@xanui/ui 1.1.20 → 1.1.21

package/Input/index.d.ts

@@ -1,23 +1,49 @@
-import React, { ReactElement, MutableRefObject } from 'react';
+import React, { ReactElement } from 'react';
 import { TagComponentType, TagProps, useBreakpointPropsType, UseColorTemplateColor } from '@xanui/core';
 
-type InputProps<T extends TagComponentType = "input"> = Omit<TagProps<T>, "size" | "color"> & {
+type InputProps<T extends TagComponentType = "div"> = Omit<TagProps<T>, "size" | "color"> & {
+    value?: string;
+    type?: TagProps<'input'>['type'];
+    name?: string;
+    placeholder?: string;
+    readOnly?: boolean;
+    autoFocus?: boolean;
+    autoComplete?: string;
+    onFocus?: (e: React.FocusEvent<any>) => void;
+    onBlur?: (e: React.FocusEvent<any>) => void;
+    onChange?: (e: React.ChangeEvent<any>) => void;
+    onInput?: (e: React.FormEvent<any>) => void;
+    onKeyDown?: (e: React.KeyboardEvent<any>) => void;
+    onKeyUp?: (e: React.KeyboardEvent<any>) => void;
+    rows?: useBreakpointPropsType<number>;
+    minRows?: useBreakpointPropsType<number>;
+    maxRows?: useBreakpointPropsType<number>;
+    fullWidth?: boolean;
     startIcon?: useBreakpointPropsType<ReactElement>;
     endIcon?: useBreakpointPropsType<ReactElement>;
     iconPlacement?: useBreakpointPropsType<"start" | "center" | "end">;
     focused?: boolean;
     color?: useBreakpointPropsType<Omit<UseColorTemplateColor, "default">>;
-    containerRef?: MutableRefObject<HTMLDivElement | undefined>;
     variant?: useBreakpointPropsType<"fill" | "outline" | "text">;
     error?: boolean;
     helperText?: useBreakpointPropsType<string>;
     multiline?: boolean;
     size?: useBreakpointPropsType<"small" | "medium" | "large">;
-    rows?: useBreakpointPropsType<number>;
-    minRows?: useBreakpointPropsType<number>;
-    maxRows?: useBreakpointPropsType<number>;
+    refs?: {
+        rootContainer?: React.Ref<"div">;
+        startIcon?: React.Ref<ReactElement>;
+        endIcon?: React.Ref<ReactElement>;
+        inputContainer?: React.Ref<"div">;
+        input?: React.Ref<'input' | 'textarea'>;
+        helperText?: React.Ref<"div">;
+    };
     slotProps?: {
-        container?: Omit<TagProps<"div">, "children">;
+        rootContainer?: Omit<TagProps<"div">, "children">;
+        startIcon?: Omit<TagProps<'div'>, "children">;
+        endIcon?: Omit<TagProps<'div'>, "children">;
+        inputContainer?: Omit<TagProps<"div">, "children">;
+        helperText?: Omit<TagProps<"div">, "children">;
+        input?: Partial<TagProps<T>>;
     };
 };
 declare const Input: React.ForwardRefExoticComponent<Omit<InputProps<TagComponentType>, "ref"> & React.RefAttributes<any>>;

package/Input/index.js

@@ -5,12 +5,11 @@ var tslib = require('tslib');
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var core = require('@xanui/core');
-var index = require('../Text/index.js');
 
 const Input = React.forwardRef((_a, ref) => {
     var _b, _c, _d;
-    var { value } = _a, props = tslib.__rest(_a, ["value"]);
-    let [_e, theme] = core.useInterface("Input", props, {}), { startIcon, endIcon, iconPlacement, onFocus, color, onBlur, focused, containerRef, disabled, variant, error, helperText, multiline, size, rows, minRows, maxRows, slotProps } = _e, rest = tslib.__rest(_e, ["startIcon", "endIcon", "iconPlacement", "onFocus", "color", "onBlur", "focused", "containerRef", "disabled", "variant", "error", "helperText", "multiline", "size", "rows", "minRows", "maxRows", "slotProps"]);
+    var { value, refs } = _a, props = tslib.__rest(_a, ["value", "refs"]);
+    let [_e, theme] = core.useInterface("Input", props, {}), { startIcon, endIcon, iconPlacement, color, name, placeholder, type, readOnly, autoFocus, autoComplete, onFocus, onBlur, onChange, onKeyDown, onKeyUp, focused, disabled, variant, error, helperText, multiline, size, rows, minRows, maxRows, fullWidth, slotProps } = _e, rest = tslib.__rest(_e, ["startIcon", "endIcon", "iconPlacement", "color", "name", "placeholder", "type", "readOnly", "autoFocus", "autoComplete", "onFocus", "onBlur", "onChange", "onKeyDown", "onKeyUp", "focused", "disabled", "variant", "error", "helperText", "multiline", "size", "rows", "minRows", "maxRows", "fullWidth", "slotProps"]);
     const _p = {};
     if (startIcon)
         _p.startIcon = startIcon;
@@ -43,18 +42,21 @@ const Input = React.forwardRef((_a, ref) => {
     rows = p.rows;
     minRows = p.minRows;
     maxRows = p.maxRows;
-    ref !== null && ref !== void 0 ? ref : (ref = React.useRef(null));
     iconPlacement !== null && iconPlacement !== void 0 ? iconPlacement : (iconPlacement = multiline ? "end" : "center");
     if (!value)
         iconPlacement = 'center';
     const [_focused, setFocused] = React.useState(false);
-    const conRef = React.useRef(null);
     let _focus = focused || _focused;
+    const inputRef = React.useRef(null);
+    const inputMergeRef = core.useMergeRefs(inputRef, refs === null || refs === void 0 ? void 0 : refs.input);
     React.useEffect(() => {
-        if (containerRef) {
-            containerRef.current = conRef === null || conRef === void 0 ? void 0 : conRef.current;
+        if (autoFocus) {
+            setTimeout(() => {
+                var _a;
+                (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            }, 100);
         }
-    }, [containerRef]);
+    }, [autoFocus]);
     let _rows = React.useMemo(() => {
         if (rows)
             return rows;
@@ -100,18 +102,18 @@ const Input = React.forwardRef((_a, ref) => {
             }
         };
     }
-    React.useEffect(() => {
-        if (ref.current) {
-            ref.current.style.height = "auto";
-            ref.current.style.height = `${ref.current.scrollHeight}px`;
-        }
-    }, [value]);
-    return (jsxRuntime.jsxs(core.Tag, { baseClass: `input${_focus ? " input-focused" : ""}`, children: [jsxRuntime.jsxs(core.Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.container, { sxr: {
+    return (jsxRuntime.jsxs(core.Tag, Object.assign({ width: fullWidth ? "100%" : undefined }, rest, { ref: ref, baseClass: 'input-root', classNames: {
+            'input-full-width': fullWidth || false,
+            'input-focused': _focus,
+            'input-error': error || false,
+            [`input-variant-${variant}`]: true,
+            [`input-size-${size}`]: true,
+        }, children: [jsxRuntime.jsxs(core.Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.rootContainer, { ref: refs === null || refs === void 0 ? void 0 : refs.rootContainer, baseClass: 'root-container', sxr: {
+                    width: "100%",
                     display: "flex",
                     flexDirection: "row",
                     alignItems: iconPlacement === 'center' ? iconPlacement : `flex-${iconPlacement}`,
                     flexWrap: "nowrap",
-                    // minWidth: 100,
                     transitionProperty: "border, box-shadow, background",
                     bgcolor: error ? "danger.soft.primary" : variant === "fill" ? "background.secondary" : "background.primary",
                     border: variant === "text" ? 0 : "1px solid",
@@ -119,13 +121,14 @@ const Input = React.forwardRef((_a, ref) => {
                     borderRadius: 1,
                     px: 1,
                     py: .5,
-                }, baseClass: 'input-container', disabled: disabled || false, ref: conRef }, _size, { height: multiline ? "auto" : _size.height, minHeight: _size.height, children: [startIcon && jsxRuntime.jsx(core.Tag, { flex: "0 0 auto", sxr: {
+                }, disabled: disabled || false }, _size, { height: multiline ? "auto" : _size.height, minHeight: _size.height, children: [startIcon && jsxRuntime.jsx(core.Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.startIcon, { ref: refs === null || refs === void 0 ? void 0 : refs.startIcon, flex: "0 0 auto", sxr: {
                             height: "100%",
                             alignItems: 'center',
                             justifyContent: "center",
                             display: "flex",
                             color: error ? "danger.primary" : "text.secondary",
-                        }, baseClass: "input-start-icon", children: startIcon }), jsxRuntime.jsx(core.Tag, { flex: 1, sxr: {
+                        }, baseClass: "input-start-icon", children: startIcon })), jsxRuntime.jsx(core.Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.inputContainer, { ref: refs === null || refs === void 0 ? void 0 : refs.inputContainer, baseClass: 'input-container', flex: 1, sxr: {
+                            width: "100%",
                             display: "flex",
                             alignItems: "center",
                             flex: 1,
@@ -138,7 +141,7 @@ const Input = React.forwardRef((_a, ref) => {
                                 "box-shadow": `0 0 0px 1000px ${variant === "fill" ? theme.colors.background.secondary : theme.colors.background.primary} inset`,
                                 transition: "background-color 5000s ease-in-out 0s"
                             }
-                        }, children: jsxRuntime.jsx(core.Tag, Object.assign({ component: multiline ? 'textarea' : 'input' }, multiprops, rest, { sxr: {
+                        }, children: jsxRuntime.jsx(core.Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.input, { ref: inputMergeRef, baseClass: 'input', component: multiline ? 'textarea' : 'input' }, multiprops, { sxr: {
                                 border: 0,
                                 outline: 0,
                                 bgcolor: "transparent",
@@ -147,19 +150,25 @@ const Input = React.forwardRef((_a, ref) => {
                                 height: multiline ? "auto" : _size.height + "px!important",
                                 width: "100%",
                                 maxHeight: 200,
-                            }, value: value, baseClass: 'input-box', ref: ref, onFocus: (e) => {
+                            }, value: value, onChange: onChange, onFocus: (e) => {
                                 focused !== null && focused !== void 0 ? focused : setFocused(true);
                                 onFocus && onFocus(e);
                             }, onBlur: (e) => {
                                 focused !== null && focused !== void 0 ? focused : setFocused(false);
                                 onBlur && onBlur(e);
-                            } })) }), endIcon && jsxRuntime.jsx(core.Tag, { flex: "0 0 auto", sxr: {
+                            }, onKeyDown: onKeyDown, onKeyUp: onKeyUp, name: name, placeholder: placeholder, type: type, readOnly: readOnly, autoComplete: autoComplete })) })), endIcon && jsxRuntime.jsx(core.Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.endIcon, { ref: refs === null || refs === void 0 ? void 0 : refs.endIcon, flex: "0 0 auto", sxr: {
                             height: "100%",
                             alignItems: 'center',
                             justifyContent: "center",
                             display: 'flex',
                             color: error ? "danger.primary" : "text.secondary",
-                        }, baseClass: "input-end-icon", children: endIcon })] })), helperText && jsxRuntime.jsx(index, { pl: .5, className: "input-helper-text", fontSize: "small", color: error ? "danger.primary" : "text.primary", children: helperText })] }));
+                        }, baseClass: "input-end-icon", children: endIcon }))] })), helperText && jsxRuntime.jsx(core.Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.helperText, { ref: refs === null || refs === void 0 ? void 0 : refs.helperText, baseClass: "input-helper-text", sxr: {
+                    color: error ? "danger.primary" : "text.primary",
+                    fontSize: "small",
+                    lineHeight: "text",
+                    fontWeight: 'text',
+                    pl: .5,
+                }, children: helperText }))] })));
 });
 
 module.exports = Input;

package/Input/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Input/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { MutableRefObject, ReactElement, useEffect, useMemo, useRef, useState } from 'react';\nimport { Tag, TagProps, TagComponentType, UseColorTemplateColor, useBreakpointPropsType, useInterface, useBreakpointProps } from '@xanui/core';\nimport Text from '../Text';\n\nexport type InputProps<T extends TagComponentType = \"input\"> = Omit<TagProps<T>, \"size\" | \"color\"> & {\n    startIcon?: useBreakpointPropsType<ReactElement>;\n    endIcon?: useBreakpointPropsType<ReactElement>;\n    iconPlacement?: useBreakpointPropsType<\"start\" | \"center\" | \"end\">;\n    focused?: boolean;\n    color?: useBreakpointPropsType<Omit<UseColorTemplateColor, \"default\">>;\n    containerRef?: MutableRefObject<HTMLDivElement | undefined>;\n    variant?: useBreakpointPropsType<\"fill\" | \"outline\" | \"text\">;\n    error?: boolean;\n    helperText?: useBreakpointPropsType<string>;\n    multiline?: boolean;\n    size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\n    rows?: useBreakpointPropsType<number>;\n    minRows?: useBreakpointPropsType<number>;\n    maxRows?: useBreakpointPropsType<number>;\n    slotProps?: {\n        container?: Omit<TagProps<\"div\">, \"children\">\n    }\n}\n\nconst Input = React.forwardRef(<T extends TagComponentType = \"input\">({ value, ...props }: InputProps<T>, ref?: React.Ref<any>) => {\n    let [{\n        startIcon,\n        endIcon,\n        iconPlacement,\n        onFocus,\n        color,\n        onBlur,\n        focused,\n        containerRef,\n        disabled,\n        variant,\n        error,\n        helperText,\n        multiline,\n        size,\n        rows,\n        minRows,\n        maxRows,\n        slotProps,\n        ...rest\n    }, theme] = useInterface<any>(\"Input\", props, {})\n\n    const _p: any = {}\n    if (startIcon) _p.startIcon = startIcon\n    if (endIcon) _p.endIcon = endIcon\n    if (iconPlacement) _p.iconPlacement = iconPlacement\n    if (color) _p.color = color\n    if (variant) _p.variant = variant\n    if (helperText) _p.helperText = helperText\n    if (size) _p.size = size\n    if (rows) _p.rows = rows\n    if (minRows) _p.minRows = minRows\n    if (maxRows) _p.maxRows = maxRows\n    const p: any = useBreakpointProps(_p)\n    startIcon = p.startIcon\n    endIcon = p.endIcon\n    iconPlacement = p.iconPlacement\n    color = p.color ?? \"brand\"\n    variant = p.variant ?? \"fill\"\n    helperText = p.helperText\n    size = p.size ?? 'medium'\n    rows = p.rows\n    minRows = p.minRows\n    maxRows = p.maxRows\n\n    ref ??= useRef(null);\n    iconPlacement ??= multiline ? \"end\" : \"center\"\n    if (!value) iconPlacement = 'center'\n\n    const [_focused, setFocused] = useState(false)\n    const conRef: any = useRef(null)\n    let _focus = focused || _focused\n\n    useEffect(() => {\n        if (containerRef) {\n            (containerRef as any).current = conRef?.current\n        }\n    }, [containerRef])\n\n    let _rows = useMemo(() => {\n        if (rows) return rows\n        if (value && multiline) {\n            let lines = (value as string).split(`\\n`).length\n            if (minRows && minRows > lines) {\n                return minRows\n            } else if (maxRows && maxRows < lines) {\n                return maxRows\n            } else {\n                return lines\n            }\n        }\n    }, [value]) || 1\n\n    const sizes: any = {\n        small: {\n            height: 40,\n            gap: .5,\n            fontSize: 'button',\n        },\n        medium: {\n            height: 48,\n            gap: 1,\n            fontSize: \"text\"\n        },\n        large: {\n            height: 52,\n            gap: 1,\n            fontSize: 'big'\n        }\n    }\n\n    const _size = sizes[size]\n    let borderColor = _focus ? color : (variant === \"fill\" ? \"transparent\" : \"divider\")\n    borderColor = error ? \"danger.primary\" : borderColor\n    let multiprops: any = {}\n    if (multiline) {\n        multiprops = {\n            rows: _rows,\n            sx: {\n                resize: \"none\"\n            }\n        }\n    }\n\n    useEffect(() => {\n        if ((ref as any).current) {\n            (ref as any).current.style.height = \"auto\";\n            (ref as any).current.style.height = `${(ref as any).current.scrollHeight}px`;\n        }\n    }, [value]);\n\n    return (\n        <Tag\n            baseClass={`input${_focus ? \" input-focused\" : \"\"}`}\n        >\n            <Tag\n                {...slotProps?.container}\n                sxr={{\n                    display: \"flex\",\n                    flexDirection: \"row\",\n                    alignItems: iconPlacement === 'center' ? iconPlacement : `flex-${iconPlacement}`,\n                    flexWrap: \"nowrap\",\n                    // minWidth: 100,\n                    transitionProperty: \"border, box-shadow, background\",\n                    bgcolor: error ? \"danger.soft.primary\" : variant === \"fill\" ? \"background.secondary\" : \"background.primary\",\n                    border: variant === \"text\" ? 0 : \"1px solid\",\n                    borderColor: borderColor,\n                    borderRadius: 1,\n                    px: 1,\n                    py: .5,\n                }}\n                baseClass='input-container'\n                disabled={disabled || false}\n                ref={conRef}\n                {..._size}\n                height={multiline ? \"auto\" : _size.height}\n                minHeight={_size.height}\n            >\n                {startIcon && <Tag\n                    flex={\"0 0 auto\"}\n                    sxr={{\n                        height: \"100%\",\n                        alignItems: 'center',\n                        justifyContent: \"center\",\n                        display: \"flex\",\n                        color: error ? \"danger.primary\" : \"text.secondary\",\n                    }}\n                    baseClass=\"input-start-icon\"\n                >{startIcon}</Tag>}\n                <Tag\n                    flex={1}\n                    sxr={{\n                        display: \"flex\",\n                        alignItems: \"center\",\n                        flex: 1,\n                        minHeight: _size.height,\n                        \"& textarea\": {\n                            resize: \"none\"\n                        },\n                        \"& input:-webkit-autofill,& input:-webkit-autofill:hover, & input:-webkit-autofill:focus,& input:-webkit-autofill:active\": {\n                            \"-webkit-text-fill-color\": \"text.primary\",\n                            \"box-shadow\": `0 0 0px 1000px ${variant === \"fill\" ? theme.colors.background.secondary : theme.colors.background.primary} inset`,\n                            transition: \"background-color 5000s ease-in-out 0s\"\n                        } as any\n                    }}\n                >\n                    <Tag\n                        component={multiline ? 'textarea' : 'input'}\n                        {...multiprops}\n                        {...rest}\n                        sxr={{\n                            border: 0,\n                            outline: 0,\n                            bgcolor: \"transparent\",\n                            color: error ? \"danger.primary\" : \"text.primary\",\n                            fontSize: _size.fontSize,\n                            height: multiline ? \"auto\" : _size.height + \"px!important\",\n                            width: \"100%\",\n                            maxHeight: 200,\n                        }}\n                        value={value}\n                        baseClass='input-box'\n                        ref={ref}\n                        onFocus={(e: any) => {\n                            focused ?? setFocused(true)\n                            onFocus && onFocus(e)\n                        }}\n                        onBlur={(e: any) => {\n                            focused ?? setFocused(false)\n                            onBlur && onBlur(e)\n                        }}\n                    />\n                </Tag>\n                {endIcon && <Tag\n                    flex={\"0 0 auto\"}\n                    sxr={{\n                        height: \"100%\",\n                        alignItems: 'center',\n                        justifyContent: \"center\",\n                        display: 'flex',\n                        color: error ? \"danger.primary\" : \"text.secondary\",\n                    }}\n                    baseClass=\"input-end-icon\"\n                >{endIcon}</Tag>}\n            </Tag>\n            {helperText && <Text\n                pl={.5}\n                className=\"input-helper-text\"\n                fontSize=\"small\"\n                color={error ? \"danger.primary\" : \"text.primary\"}\n            >{helperText}</Text>}\n        </Tag>\n    )\n})\n\nexport default Input\n"],"names":[],"mappings":";;;;;;;;;AAyBA;;AAAsE;;;AAwBlE;AAAe;AACf;AAAa;AACb;AAAmB;AACnB;AAAW;AACX;AAAa;AACb;AAAgB;AAChB;AAAU;AACV;AAAU;AACV;AAAa;AACb;AAAa;AACb;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAGA;AACA;;;AAGA;AACA;;;;;AAMA;AAEA;AACI;AAAU;AACV;;AAEI;AACI;;AACG;AACH;;;AAEA;;;AAGZ;AAEA;AACI;AACI;AACA;AACA;AACH;AACD;AACI;AACA;AACA;AACH;AACD;AACI;AACA;AACA;AACH;;AAGL;;;;;AAKI;AACI;AACA;AACI;AACH;;;;AAKL;;AAEK;;AAET;AAEA;AAOgB;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;;AAYI;AACA;AACA;AACA;;AAEH;AAMG;AACA;AACA;;AAEA;AACI;AACH;AACD;AACI;;AAEA;AACI;;AAQJ;AACA;AACA;;;AAGA;AACA;AACA;AACH;;AAMG;AACJ;;AAGI;AACJ;AAMA;AACA;AACA;AACA;;AAEH;AAYrB;;"}
+{"version":3,"file":"index.js","sources":["../../src/Input/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { ReactElement, useEffect, useMemo, useState } from 'react';\nimport { Tag, TagProps, TagComponentType, UseColorTemplateColor, useBreakpointPropsType, useInterface, useBreakpointProps, useMergeRefs } from '@xanui/core';\n\nexport type InputProps<T extends TagComponentType = \"div\"> = Omit<TagProps<T>, \"size\" | \"color\"> & {\n    value?: string;\n    type?: TagProps<'input'>['type'];\n    name?: string;\n    placeholder?: string;\n    readOnly?: boolean;\n    autoFocus?: boolean;\n    autoComplete?: string;\n\n\n    onFocus?: (e: React.FocusEvent<any>) => void;\n    onBlur?: (e: React.FocusEvent<any>) => void;\n    onChange?: (e: React.ChangeEvent<any>) => void;\n    onInput?: (e: React.FormEvent<any>) => void;\n    onKeyDown?: (e: React.KeyboardEvent<any>) => void;\n    onKeyUp?: (e: React.KeyboardEvent<any>) => void;\n\n    rows?: useBreakpointPropsType<number>;\n    minRows?: useBreakpointPropsType<number>;\n    maxRows?: useBreakpointPropsType<number>;\n    fullWidth?: boolean;\n\n    startIcon?: useBreakpointPropsType<ReactElement>;\n    endIcon?: useBreakpointPropsType<ReactElement>;\n    iconPlacement?: useBreakpointPropsType<\"start\" | \"center\" | \"end\">;\n    focused?: boolean;\n    color?: useBreakpointPropsType<Omit<UseColorTemplateColor, \"default\">>;\n    variant?: useBreakpointPropsType<\"fill\" | \"outline\" | \"text\">;\n    error?: boolean;\n    helperText?: useBreakpointPropsType<string>;\n    multiline?: boolean;\n    size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\n\n    refs?: {\n        rootContainer?: React.Ref<\"div\">;\n        startIcon?: React.Ref<ReactElement>;\n        endIcon?: React.Ref<ReactElement>;\n        inputContainer?: React.Ref<\"div\">;\n        input?: React.Ref<'input' | 'textarea'>;\n        helperText?: React.Ref<\"div\">;\n    };\n\n    slotProps?: {\n        rootContainer?: Omit<TagProps<\"div\">, \"children\">;\n        startIcon?: Omit<TagProps<'div'>, \"children\">;\n        endIcon?: Omit<TagProps<'div'>, \"children\">;\n        inputContainer?: Omit<TagProps<\"div\">, \"children\">;\n        helperText?: Omit<TagProps<\"div\">, \"children\">;\n        input?: Partial<TagProps<T>>;\n    }\n}\n\nconst Input = React.forwardRef(<T extends TagComponentType = \"div\">({ value, refs, ...props }: InputProps<T>, ref?: React.Ref<any>) => {\n    let [{\n        startIcon,\n        endIcon,\n        iconPlacement,\n        color,\n\n        name,\n        placeholder,\n        type,\n        readOnly,\n        autoFocus,\n        autoComplete,\n        onFocus,\n        onBlur,\n        onChange,\n        onKeyDown,\n        onKeyUp,\n\n        focused,\n        disabled,\n        variant,\n        error,\n        helperText,\n        multiline,\n        size,\n        rows,\n        minRows,\n        maxRows,\n        fullWidth,\n        slotProps,\n\n        ...rest\n    }, theme] = useInterface<any>(\"Input\", props, {})\n\n    const _p: any = {}\n    if (startIcon) _p.startIcon = startIcon\n    if (endIcon) _p.endIcon = endIcon\n    if (iconPlacement) _p.iconPlacement = iconPlacement\n    if (color) _p.color = color\n    if (variant) _p.variant = variant\n    if (helperText) _p.helperText = helperText\n    if (size) _p.size = size\n    if (rows) _p.rows = rows\n    if (minRows) _p.minRows = minRows\n    if (maxRows) _p.maxRows = maxRows\n    const p: any = useBreakpointProps(_p)\n    startIcon = p.startIcon\n    endIcon = p.endIcon\n    iconPlacement = p.iconPlacement\n    color = p.color ?? \"brand\"\n    variant = p.variant ?? \"fill\"\n    helperText = p.helperText\n    size = p.size ?? 'medium'\n    rows = p.rows\n    minRows = p.minRows\n    maxRows = p.maxRows\n\n    iconPlacement ??= multiline ? \"end\" : \"center\"\n    if (!value) iconPlacement = 'center'\n\n    const [_focused, setFocused] = useState(false)\n    let _focus = focused || _focused\n    const inputRef = React.useRef<HTMLInputElement | HTMLTextAreaElement>(null);\n    const inputMergeRef = useMergeRefs(inputRef, refs?.input as any);\n\n    useEffect(() => {\n        if (autoFocus) {\n            setTimeout(() => {\n                inputRef.current?.focus()\n            }, 100);\n        }\n    }, [autoFocus])\n\n    let _rows = useMemo(() => {\n        if (rows) return rows\n        if (value && multiline) {\n            let lines = (value as string).split(`\\n`).length\n            if (minRows && minRows > lines) {\n                return minRows\n            } else if (maxRows && maxRows < lines) {\n                return maxRows\n            } else {\n                return lines\n            }\n        }\n    }, [value]) || 1\n\n    const sizes: any = {\n        small: {\n            height: 40,\n            gap: .5,\n            fontSize: 'button',\n        },\n        medium: {\n            height: 48,\n            gap: 1,\n            fontSize: \"text\"\n        },\n        large: {\n            height: 52,\n            gap: 1,\n            fontSize: 'big'\n        }\n    }\n\n    const _size = sizes[size]\n    let borderColor = _focus ? color : (variant === \"fill\" ? \"transparent\" : \"divider\")\n    borderColor = error ? \"danger.primary\" : borderColor\n    let multiprops: any = {}\n    if (multiline) {\n        multiprops = {\n            rows: _rows,\n            sx: {\n                resize: \"none\"\n            }\n        }\n    }\n\n    return (\n        <Tag\n            width={fullWidth ? \"100%\" : undefined}\n            {...rest}\n            ref={ref}\n            baseClass={'input-root'}\n            classNames={{\n                'input-full-width': fullWidth || false,\n                'input-focused': _focus,\n                'input-error': error || false,\n                [`input-variant-${variant}`]: true,\n                [`input-size-${size}`]: true,\n            }}\n        >\n            <Tag\n                {...slotProps?.rootContainer}\n                ref={refs?.rootContainer}\n                baseClass='root-container'\n                sxr={{\n                    width: \"100%\",\n                    display: \"flex\",\n                    flexDirection: \"row\",\n                    alignItems: iconPlacement === 'center' ? iconPlacement : `flex-${iconPlacement}`,\n                    flexWrap: \"nowrap\",\n                    transitionProperty: \"border, box-shadow, background\",\n                    bgcolor: error ? \"danger.soft.primary\" : variant === \"fill\" ? \"background.secondary\" : \"background.primary\",\n                    border: variant === \"text\" ? 0 : \"1px solid\",\n                    borderColor: borderColor,\n                    borderRadius: 1,\n                    px: 1,\n                    py: .5,\n                }}\n                disabled={disabled || false}\n                {..._size}\n                height={multiline ? \"auto\" : _size.height}\n                minHeight={_size.height}\n            >\n                {startIcon && <Tag\n                    {...slotProps?.startIcon}\n                    ref={refs?.startIcon}\n                    flex={\"0 0 auto\"}\n                    sxr={{\n                        height: \"100%\",\n                        alignItems: 'center',\n                        justifyContent: \"center\",\n                        display: \"flex\",\n                        color: error ? \"danger.primary\" : \"text.secondary\",\n                    }}\n                    baseClass=\"input-start-icon\"\n                >{startIcon}</Tag>}\n                <Tag\n                    {...slotProps?.inputContainer}\n                    ref={refs?.inputContainer}\n                    baseClass='input-container'\n                    flex={1}\n                    sxr={{\n                        width: \"100%\",\n                        display: \"flex\",\n                        alignItems: \"center\",\n                        flex: 1,\n                        minHeight: _size.height,\n                        \"& textarea\": {\n                            resize: \"none\"\n                        },\n                        \"& input:-webkit-autofill,& input:-webkit-autofill:hover, & input:-webkit-autofill:focus,& input:-webkit-autofill:active\": {\n                            \"-webkit-text-fill-color\": \"text.primary\",\n                            \"box-shadow\": `0 0 0px 1000px ${variant === \"fill\" ? theme.colors.background.secondary : theme.colors.background.primary} inset`,\n                            transition: \"background-color 5000s ease-in-out 0s\"\n                        } as any\n                    }}\n                >\n                    <Tag\n                        {...slotProps?.input}\n                        ref={inputMergeRef}\n                        baseClass='input'\n                        component={multiline ? 'textarea' : 'input'}\n                        {...multiprops}\n                        sxr={{\n                            border: 0,\n                            outline: 0,\n                            bgcolor: \"transparent\",\n                            color: error ? \"danger.primary\" : \"text.primary\",\n                            fontSize: _size.fontSize,\n                            height: multiline ? \"auto\" : _size.height + \"px!important\",\n                            width: \"100%\",\n                            maxHeight: 200,\n                        }}\n                        value={value}\n                        onChange={onChange}\n                        onFocus={(e: any) => {\n                            focused ?? setFocused(true)\n                            onFocus && onFocus(e)\n                        }}\n                        onBlur={(e: any) => {\n                            focused ?? setFocused(false)\n                            onBlur && onBlur(e)\n                        }}\n                        onKeyDown={onKeyDown}\n                        onKeyUp={onKeyUp}\n                        name={name}\n                        placeholder={placeholder}\n                        type={type}\n                        readOnly={readOnly}\n                        autoComplete={autoComplete}\n                    />\n                </Tag>\n                {endIcon && <Tag\n                    {...slotProps?.endIcon}\n                    ref={refs?.endIcon}\n                    flex={\"0 0 auto\"}\n                    sxr={{\n                        height: \"100%\",\n                        alignItems: 'center',\n                        justifyContent: \"center\",\n                        display: 'flex',\n                        color: error ? \"danger.primary\" : \"text.secondary\",\n                    }}\n                    baseClass=\"input-end-icon\"\n                >{endIcon}</Tag>}\n            </Tag>\n            {helperText && <Tag\n                {...slotProps?.helperText}\n                ref={refs?.helperText}\n                baseClass=\"input-helper-text\"\n                sxr={{\n                    color: error ? \"danger.primary\" : \"text.primary\",\n                    fontSize: \"small\",\n                    lineHeight: \"text\",\n                    fontWeight: 'text',\n                    pl: .5,\n                }}\n            >{helperText}</Tag>}\n        </Tag>\n    )\n})\n\nexport default Input\n"],"names":[],"mappings":";;;;;;;;AAwDA;;;AACI;;AAmCA;AAAe;AACf;AAAa;AACb;AAAmB;AACnB;AAAW;AACX;AAAa;AACb;AAAgB;AAChB;AAAU;AACV;AAAU;AACV;AAAa;AACb;AAAa;AACb;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;;;AAGA;;AAEA;;;;;AAKY;;;AAGZ;AAEA;AACI;AAAU;AACV;;AAEI;AACI;;AACG;AACH;;;AAEA;;;AAGZ;AAEA;AACI;AACI;AACA;AACA;AACH;AACD;AACI;AACA;AACA;AACH;AACD;AACI;AACA;AACA;AACH;;AAGL;;;;;AAKI;AACI;AACA;AACI;AACH;;;;;AAYG;;AAEA;AACA;;AAQI;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAYI;AACA;AACA;AACA;;AAEH;AASG;AACA;AACA;AACA;;AAEA;AACI;AACH;AACD;AACI;;AAEA;AACI;AACX;AASO;AACA;AACA;;;AAGA;AACA;AACA;AACH;;AAKG;AACJ;;AAGI;;AAgBJ;AACA;AACA;AACA;;AAEH;;AAUD;AACA;AACA;AACA;AACH;AAIjB;;"}

package/Input/index.mjs

@@ -1,14 +1,13 @@
 "use client";
 import { __rest } from 'tslib';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import React, { useRef, useState, useEffect, useMemo } from 'react';
-import { useInterface, useBreakpointProps, Tag } from '@xanui/core';
-import Text from '../Text/index.mjs';
+import React, { useState, useEffect, useMemo } from 'react';
+import { useInterface, useBreakpointProps, useMergeRefs, Tag } from '@xanui/core';
 
 const Input = React.forwardRef((_a, ref) => {
     var _b, _c, _d;
-    var { value } = _a, props = __rest(_a, ["value"]);
-    let [_e, theme] = useInterface("Input", props, {}), { startIcon, endIcon, iconPlacement, onFocus, color, onBlur, focused, containerRef, disabled, variant, error, helperText, multiline, size, rows, minRows, maxRows, slotProps } = _e, rest = __rest(_e, ["startIcon", "endIcon", "iconPlacement", "onFocus", "color", "onBlur", "focused", "containerRef", "disabled", "variant", "error", "helperText", "multiline", "size", "rows", "minRows", "maxRows", "slotProps"]);
+    var { value, refs } = _a, props = __rest(_a, ["value", "refs"]);
+    let [_e, theme] = useInterface("Input", props, {}), { startIcon, endIcon, iconPlacement, color, name, placeholder, type, readOnly, autoFocus, autoComplete, onFocus, onBlur, onChange, onKeyDown, onKeyUp, focused, disabled, variant, error, helperText, multiline, size, rows, minRows, maxRows, fullWidth, slotProps } = _e, rest = __rest(_e, ["startIcon", "endIcon", "iconPlacement", "color", "name", "placeholder", "type", "readOnly", "autoFocus", "autoComplete", "onFocus", "onBlur", "onChange", "onKeyDown", "onKeyUp", "focused", "disabled", "variant", "error", "helperText", "multiline", "size", "rows", "minRows", "maxRows", "fullWidth", "slotProps"]);
     const _p = {};
     if (startIcon)
         _p.startIcon = startIcon;
@@ -41,18 +40,21 @@ const Input = React.forwardRef((_a, ref) => {
     rows = p.rows;
     minRows = p.minRows;
     maxRows = p.maxRows;
-    ref !== null && ref !== void 0 ? ref : (ref = useRef(null));
     iconPlacement !== null && iconPlacement !== void 0 ? iconPlacement : (iconPlacement = multiline ? "end" : "center");
     if (!value)
         iconPlacement = 'center';
     const [_focused, setFocused] = useState(false);
-    const conRef = useRef(null);
     let _focus = focused || _focused;
+    const inputRef = React.useRef(null);
+    const inputMergeRef = useMergeRefs(inputRef, refs === null || refs === void 0 ? void 0 : refs.input);
     useEffect(() => {
-        if (containerRef) {
-            containerRef.current = conRef === null || conRef === void 0 ? void 0 : conRef.current;
+        if (autoFocus) {
+            setTimeout(() => {
+                var _a;
+                (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            }, 100);
         }
-    }, [containerRef]);
+    }, [autoFocus]);
     let _rows = useMemo(() => {
         if (rows)
             return rows;
@@ -98,18 +100,18 @@ const Input = React.forwardRef((_a, ref) => {
             }
         };
     }
-    useEffect(() => {
-        if (ref.current) {
-            ref.current.style.height = "auto";
-            ref.current.style.height = `${ref.current.scrollHeight}px`;
-        }
-    }, [value]);
-    return (jsxs(Tag, { baseClass: `input${_focus ? " input-focused" : ""}`, children: [jsxs(Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.container, { sxr: {
+    return (jsxs(Tag, Object.assign({ width: fullWidth ? "100%" : undefined }, rest, { ref: ref, baseClass: 'input-root', classNames: {
+            'input-full-width': fullWidth || false,
+            'input-focused': _focus,
+            'input-error': error || false,
+            [`input-variant-${variant}`]: true,
+            [`input-size-${size}`]: true,
+        }, children: [jsxs(Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.rootContainer, { ref: refs === null || refs === void 0 ? void 0 : refs.rootContainer, baseClass: 'root-container', sxr: {
+                    width: "100%",
                     display: "flex",
                     flexDirection: "row",
                     alignItems: iconPlacement === 'center' ? iconPlacement : `flex-${iconPlacement}`,
                     flexWrap: "nowrap",
-                    // minWidth: 100,
                     transitionProperty: "border, box-shadow, background",
                     bgcolor: error ? "danger.soft.primary" : variant === "fill" ? "background.secondary" : "background.primary",
                     border: variant === "text" ? 0 : "1px solid",
@@ -117,13 +119,14 @@ const Input = React.forwardRef((_a, ref) => {
                     borderRadius: 1,
                     px: 1,
                     py: .5,
-                }, baseClass: 'input-container', disabled: disabled || false, ref: conRef }, _size, { height: multiline ? "auto" : _size.height, minHeight: _size.height, children: [startIcon && jsx(Tag, { flex: "0 0 auto", sxr: {
+                }, disabled: disabled || false }, _size, { height: multiline ? "auto" : _size.height, minHeight: _size.height, children: [startIcon && jsx(Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.startIcon, { ref: refs === null || refs === void 0 ? void 0 : refs.startIcon, flex: "0 0 auto", sxr: {
                             height: "100%",
                             alignItems: 'center',
                             justifyContent: "center",
                             display: "flex",
                             color: error ? "danger.primary" : "text.secondary",
-                        }, baseClass: "input-start-icon", children: startIcon }), jsx(Tag, { flex: 1, sxr: {
+                        }, baseClass: "input-start-icon", children: startIcon })), jsx(Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.inputContainer, { ref: refs === null || refs === void 0 ? void 0 : refs.inputContainer, baseClass: 'input-container', flex: 1, sxr: {
+                            width: "100%",
                             display: "flex",
                             alignItems: "center",
                             flex: 1,
@@ -136,7 +139,7 @@ const Input = React.forwardRef((_a, ref) => {
                                 "box-shadow": `0 0 0px 1000px ${variant === "fill" ? theme.colors.background.secondary : theme.colors.background.primary} inset`,
                                 transition: "background-color 5000s ease-in-out 0s"
                             }
-                        }, children: jsx(Tag, Object.assign({ component: multiline ? 'textarea' : 'input' }, multiprops, rest, { sxr: {
+                        }, children: jsx(Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.input, { ref: inputMergeRef, baseClass: 'input', component: multiline ? 'textarea' : 'input' }, multiprops, { sxr: {
                                 border: 0,
                                 outline: 0,
                                 bgcolor: "transparent",
@@ -145,19 +148,25 @@ const Input = React.forwardRef((_a, ref) => {
                                 height: multiline ? "auto" : _size.height + "px!important",
                                 width: "100%",
                                 maxHeight: 200,
-                            }, value: value, baseClass: 'input-box', ref: ref, onFocus: (e) => {
+                            }, value: value, onChange: onChange, onFocus: (e) => {
                                 focused !== null && focused !== void 0 ? focused : setFocused(true);
                                 onFocus && onFocus(e);
                             }, onBlur: (e) => {
                                 focused !== null && focused !== void 0 ? focused : setFocused(false);
                                 onBlur && onBlur(e);
-                            } })) }), endIcon && jsx(Tag, { flex: "0 0 auto", sxr: {
+                            }, onKeyDown: onKeyDown, onKeyUp: onKeyUp, name: name, placeholder: placeholder, type: type, readOnly: readOnly, autoComplete: autoComplete })) })), endIcon && jsx(Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.endIcon, { ref: refs === null || refs === void 0 ? void 0 : refs.endIcon, flex: "0 0 auto", sxr: {
                             height: "100%",
                             alignItems: 'center',
                             justifyContent: "center",
                             display: 'flex',
                             color: error ? "danger.primary" : "text.secondary",
-                        }, baseClass: "input-end-icon", children: endIcon })] })), helperText && jsx(Text, { pl: .5, className: "input-helper-text", fontSize: "small", color: error ? "danger.primary" : "text.primary", children: helperText })] }));
+                        }, baseClass: "input-end-icon", children: endIcon }))] })), helperText && jsx(Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.helperText, { ref: refs === null || refs === void 0 ? void 0 : refs.helperText, baseClass: "input-helper-text", sxr: {
+                    color: error ? "danger.primary" : "text.primary",
+                    fontSize: "small",
+                    lineHeight: "text",
+                    fontWeight: 'text',
+                    pl: .5,
+                }, children: helperText }))] })));
 });
 
 export { Input as default };

package/Input/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../src/Input/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { MutableRefObject, ReactElement, useEffect, useMemo, useRef, useState } from 'react';\nimport { Tag, TagProps, TagComponentType, UseColorTemplateColor, useBreakpointPropsType, useInterface, useBreakpointProps } from '@xanui/core';\nimport Text from '../Text';\n\nexport type InputProps<T extends TagComponentType = \"input\"> = Omit<TagProps<T>, \"size\" | \"color\"> & {\n    startIcon?: useBreakpointPropsType<ReactElement>;\n    endIcon?: useBreakpointPropsType<ReactElement>;\n    iconPlacement?: useBreakpointPropsType<\"start\" | \"center\" | \"end\">;\n    focused?: boolean;\n    color?: useBreakpointPropsType<Omit<UseColorTemplateColor, \"default\">>;\n    containerRef?: MutableRefObject<HTMLDivElement | undefined>;\n    variant?: useBreakpointPropsType<\"fill\" | \"outline\" | \"text\">;\n    error?: boolean;\n    helperText?: useBreakpointPropsType<string>;\n    multiline?: boolean;\n    size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\n    rows?: useBreakpointPropsType<number>;\n    minRows?: useBreakpointPropsType<number>;\n    maxRows?: useBreakpointPropsType<number>;\n    slotProps?: {\n        container?: Omit<TagProps<\"div\">, \"children\">\n    }\n}\n\nconst Input = React.forwardRef(<T extends TagComponentType = \"input\">({ value, ...props }: InputProps<T>, ref?: React.Ref<any>) => {\n    let [{\n        startIcon,\n        endIcon,\n        iconPlacement,\n        onFocus,\n        color,\n        onBlur,\n        focused,\n        containerRef,\n        disabled,\n        variant,\n        error,\n        helperText,\n        multiline,\n        size,\n        rows,\n        minRows,\n        maxRows,\n        slotProps,\n        ...rest\n    }, theme] = useInterface<any>(\"Input\", props, {})\n\n    const _p: any = {}\n    if (startIcon) _p.startIcon = startIcon\n    if (endIcon) _p.endIcon = endIcon\n    if (iconPlacement) _p.iconPlacement = iconPlacement\n    if (color) _p.color = color\n    if (variant) _p.variant = variant\n    if (helperText) _p.helperText = helperText\n    if (size) _p.size = size\n    if (rows) _p.rows = rows\n    if (minRows) _p.minRows = minRows\n    if (maxRows) _p.maxRows = maxRows\n    const p: any = useBreakpointProps(_p)\n    startIcon = p.startIcon\n    endIcon = p.endIcon\n    iconPlacement = p.iconPlacement\n    color = p.color ?? \"brand\"\n    variant = p.variant ?? \"fill\"\n    helperText = p.helperText\n    size = p.size ?? 'medium'\n    rows = p.rows\n    minRows = p.minRows\n    maxRows = p.maxRows\n\n    ref ??= useRef(null);\n    iconPlacement ??= multiline ? \"end\" : \"center\"\n    if (!value) iconPlacement = 'center'\n\n    const [_focused, setFocused] = useState(false)\n    const conRef: any = useRef(null)\n    let _focus = focused || _focused\n\n    useEffect(() => {\n        if (containerRef) {\n            (containerRef as any).current = conRef?.current\n        }\n    }, [containerRef])\n\n    let _rows = useMemo(() => {\n        if (rows) return rows\n        if (value && multiline) {\n            let lines = (value as string).split(`\\n`).length\n            if (minRows && minRows > lines) {\n                return minRows\n            } else if (maxRows && maxRows < lines) {\n                return maxRows\n            } else {\n                return lines\n            }\n        }\n    }, [value]) || 1\n\n    const sizes: any = {\n        small: {\n            height: 40,\n            gap: .5,\n            fontSize: 'button',\n        },\n        medium: {\n            height: 48,\n            gap: 1,\n            fontSize: \"text\"\n        },\n        large: {\n            height: 52,\n            gap: 1,\n            fontSize: 'big'\n        }\n    }\n\n    const _size = sizes[size]\n    let borderColor = _focus ? color : (variant === \"fill\" ? \"transparent\" : \"divider\")\n    borderColor = error ? \"danger.primary\" : borderColor\n    let multiprops: any = {}\n    if (multiline) {\n        multiprops = {\n            rows: _rows,\n            sx: {\n                resize: \"none\"\n            }\n        }\n    }\n\n    useEffect(() => {\n        if ((ref as any).current) {\n            (ref as any).current.style.height = \"auto\";\n            (ref as any).current.style.height = `${(ref as any).current.scrollHeight}px`;\n        }\n    }, [value]);\n\n    return (\n        <Tag\n            baseClass={`input${_focus ? \" input-focused\" : \"\"}`}\n        >\n            <Tag\n                {...slotProps?.container}\n                sxr={{\n                    display: \"flex\",\n                    flexDirection: \"row\",\n                    alignItems: iconPlacement === 'center' ? iconPlacement : `flex-${iconPlacement}`,\n                    flexWrap: \"nowrap\",\n                    // minWidth: 100,\n                    transitionProperty: \"border, box-shadow, background\",\n                    bgcolor: error ? \"danger.soft.primary\" : variant === \"fill\" ? \"background.secondary\" : \"background.primary\",\n                    border: variant === \"text\" ? 0 : \"1px solid\",\n                    borderColor: borderColor,\n                    borderRadius: 1,\n                    px: 1,\n                    py: .5,\n                }}\n                baseClass='input-container'\n                disabled={disabled || false}\n                ref={conRef}\n                {..._size}\n                height={multiline ? \"auto\" : _size.height}\n                minHeight={_size.height}\n            >\n                {startIcon && <Tag\n                    flex={\"0 0 auto\"}\n                    sxr={{\n                        height: \"100%\",\n                        alignItems: 'center',\n                        justifyContent: \"center\",\n                        display: \"flex\",\n                        color: error ? \"danger.primary\" : \"text.secondary\",\n                    }}\n                    baseClass=\"input-start-icon\"\n                >{startIcon}</Tag>}\n                <Tag\n                    flex={1}\n                    sxr={{\n                        display: \"flex\",\n                        alignItems: \"center\",\n                        flex: 1,\n                        minHeight: _size.height,\n                        \"& textarea\": {\n                            resize: \"none\"\n                        },\n                        \"& input:-webkit-autofill,& input:-webkit-autofill:hover, & input:-webkit-autofill:focus,& input:-webkit-autofill:active\": {\n                            \"-webkit-text-fill-color\": \"text.primary\",\n                            \"box-shadow\": `0 0 0px 1000px ${variant === \"fill\" ? theme.colors.background.secondary : theme.colors.background.primary} inset`,\n                            transition: \"background-color 5000s ease-in-out 0s\"\n                        } as any\n                    }}\n                >\n                    <Tag\n                        component={multiline ? 'textarea' : 'input'}\n                        {...multiprops}\n                        {...rest}\n                        sxr={{\n                            border: 0,\n                            outline: 0,\n                            bgcolor: \"transparent\",\n                            color: error ? \"danger.primary\" : \"text.primary\",\n                            fontSize: _size.fontSize,\n                            height: multiline ? \"auto\" : _size.height + \"px!important\",\n                            width: \"100%\",\n                            maxHeight: 200,\n                        }}\n                        value={value}\n                        baseClass='input-box'\n                        ref={ref}\n                        onFocus={(e: any) => {\n                            focused ?? setFocused(true)\n                            onFocus && onFocus(e)\n                        }}\n                        onBlur={(e: any) => {\n                            focused ?? setFocused(false)\n                            onBlur && onBlur(e)\n                        }}\n                    />\n                </Tag>\n                {endIcon && <Tag\n                    flex={\"0 0 auto\"}\n                    sxr={{\n                        height: \"100%\",\n                        alignItems: 'center',\n                        justifyContent: \"center\",\n                        display: 'flex',\n                        color: error ? \"danger.primary\" : \"text.secondary\",\n                    }}\n                    baseClass=\"input-end-icon\"\n                >{endIcon}</Tag>}\n            </Tag>\n            {helperText && <Text\n                pl={.5}\n                className=\"input-helper-text\"\n                fontSize=\"small\"\n                color={error ? \"danger.primary\" : \"text.primary\"}\n            >{helperText}</Text>}\n        </Tag>\n    )\n})\n\nexport default Input\n"],"names":[],"mappings":";;;;;;;AAyBA;;AAAsE;;;AAwBlE;AAAe;AACf;AAAa;AACb;AAAmB;AACnB;AAAW;AACX;AAAa;AACb;AAAgB;AAChB;AAAU;AACV;AAAU;AACV;AAAa;AACb;AAAa;AACb;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAGA;AACA;;;AAGA;AACA;;;;;AAMA;AAEA;AACI;AAAU;AACV;;AAEI;AACI;;AACG;AACH;;;AAEA;;;AAGZ;AAEA;AACI;AACI;AACA;AACA;AACH;AACD;AACI;AACA;AACA;AACH;AACD;AACI;AACA;AACA;AACH;;AAGL;;;;;AAKI;AACI;AACA;AACI;AACH;;;;AAKL;;AAEK;;AAET;AAEA;AAOgB;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;;AAYI;AACA;AACA;AACA;;AAEH;AAMG;AACA;AACA;;AAEA;AACI;AACH;AACD;AACI;;AAEA;AACI;;AAQJ;AACA;AACA;;;AAGA;AACA;AACA;AACH;;AAMG;AACJ;;AAGI;AACJ;AAMA;AACA;AACA;AACA;;AAEH;AAYrB;;"}
+{"version":3,"file":"index.mjs","sources":["../../src/Input/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { ReactElement, useEffect, useMemo, useState } from 'react';\nimport { Tag, TagProps, TagComponentType, UseColorTemplateColor, useBreakpointPropsType, useInterface, useBreakpointProps, useMergeRefs } from '@xanui/core';\n\nexport type InputProps<T extends TagComponentType = \"div\"> = Omit<TagProps<T>, \"size\" | \"color\"> & {\n    value?: string;\n    type?: TagProps<'input'>['type'];\n    name?: string;\n    placeholder?: string;\n    readOnly?: boolean;\n    autoFocus?: boolean;\n    autoComplete?: string;\n\n\n    onFocus?: (e: React.FocusEvent<any>) => void;\n    onBlur?: (e: React.FocusEvent<any>) => void;\n    onChange?: (e: React.ChangeEvent<any>) => void;\n    onInput?: (e: React.FormEvent<any>) => void;\n    onKeyDown?: (e: React.KeyboardEvent<any>) => void;\n    onKeyUp?: (e: React.KeyboardEvent<any>) => void;\n\n    rows?: useBreakpointPropsType<number>;\n    minRows?: useBreakpointPropsType<number>;\n    maxRows?: useBreakpointPropsType<number>;\n    fullWidth?: boolean;\n\n    startIcon?: useBreakpointPropsType<ReactElement>;\n    endIcon?: useBreakpointPropsType<ReactElement>;\n    iconPlacement?: useBreakpointPropsType<\"start\" | \"center\" | \"end\">;\n    focused?: boolean;\n    color?: useBreakpointPropsType<Omit<UseColorTemplateColor, \"default\">>;\n    variant?: useBreakpointPropsType<\"fill\" | \"outline\" | \"text\">;\n    error?: boolean;\n    helperText?: useBreakpointPropsType<string>;\n    multiline?: boolean;\n    size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\n\n    refs?: {\n        rootContainer?: React.Ref<\"div\">;\n        startIcon?: React.Ref<ReactElement>;\n        endIcon?: React.Ref<ReactElement>;\n        inputContainer?: React.Ref<\"div\">;\n        input?: React.Ref<'input' | 'textarea'>;\n        helperText?: React.Ref<\"div\">;\n    };\n\n    slotProps?: {\n        rootContainer?: Omit<TagProps<\"div\">, \"children\">;\n        startIcon?: Omit<TagProps<'div'>, \"children\">;\n        endIcon?: Omit<TagProps<'div'>, \"children\">;\n        inputContainer?: Omit<TagProps<\"div\">, \"children\">;\n        helperText?: Omit<TagProps<\"div\">, \"children\">;\n        input?: Partial<TagProps<T>>;\n    }\n}\n\nconst Input = React.forwardRef(<T extends TagComponentType = \"div\">({ value, refs, ...props }: InputProps<T>, ref?: React.Ref<any>) => {\n    let [{\n        startIcon,\n        endIcon,\n        iconPlacement,\n        color,\n\n        name,\n        placeholder,\n        type,\n        readOnly,\n        autoFocus,\n        autoComplete,\n        onFocus,\n        onBlur,\n        onChange,\n        onKeyDown,\n        onKeyUp,\n\n        focused,\n        disabled,\n        variant,\n        error,\n        helperText,\n        multiline,\n        size,\n        rows,\n        minRows,\n        maxRows,\n        fullWidth,\n        slotProps,\n\n        ...rest\n    }, theme] = useInterface<any>(\"Input\", props, {})\n\n    const _p: any = {}\n    if (startIcon) _p.startIcon = startIcon\n    if (endIcon) _p.endIcon = endIcon\n    if (iconPlacement) _p.iconPlacement = iconPlacement\n    if (color) _p.color = color\n    if (variant) _p.variant = variant\n    if (helperText) _p.helperText = helperText\n    if (size) _p.size = size\n    if (rows) _p.rows = rows\n    if (minRows) _p.minRows = minRows\n    if (maxRows) _p.maxRows = maxRows\n    const p: any = useBreakpointProps(_p)\n    startIcon = p.startIcon\n    endIcon = p.endIcon\n    iconPlacement = p.iconPlacement\n    color = p.color ?? \"brand\"\n    variant = p.variant ?? \"fill\"\n    helperText = p.helperText\n    size = p.size ?? 'medium'\n    rows = p.rows\n    minRows = p.minRows\n    maxRows = p.maxRows\n\n    iconPlacement ??= multiline ? \"end\" : \"center\"\n    if (!value) iconPlacement = 'center'\n\n    const [_focused, setFocused] = useState(false)\n    let _focus = focused || _focused\n    const inputRef = React.useRef<HTMLInputElement | HTMLTextAreaElement>(null);\n    const inputMergeRef = useMergeRefs(inputRef, refs?.input as any);\n\n    useEffect(() => {\n        if (autoFocus) {\n            setTimeout(() => {\n                inputRef.current?.focus()\n            }, 100);\n        }\n    }, [autoFocus])\n\n    let _rows = useMemo(() => {\n        if (rows) return rows\n        if (value && multiline) {\n            let lines = (value as string).split(`\\n`).length\n            if (minRows && minRows > lines) {\n                return minRows\n            } else if (maxRows && maxRows < lines) {\n                return maxRows\n            } else {\n                return lines\n            }\n        }\n    }, [value]) || 1\n\n    const sizes: any = {\n        small: {\n            height: 40,\n            gap: .5,\n            fontSize: 'button',\n        },\n        medium: {\n            height: 48,\n            gap: 1,\n            fontSize: \"text\"\n        },\n        large: {\n            height: 52,\n            gap: 1,\n            fontSize: 'big'\n        }\n    }\n\n    const _size = sizes[size]\n    let borderColor = _focus ? color : (variant === \"fill\" ? \"transparent\" : \"divider\")\n    borderColor = error ? \"danger.primary\" : borderColor\n    let multiprops: any = {}\n    if (multiline) {\n        multiprops = {\n            rows: _rows,\n            sx: {\n                resize: \"none\"\n            }\n        }\n    }\n\n    return (\n        <Tag\n            width={fullWidth ? \"100%\" : undefined}\n            {...rest}\n            ref={ref}\n            baseClass={'input-root'}\n            classNames={{\n                'input-full-width': fullWidth || false,\n                'input-focused': _focus,\n                'input-error': error || false,\n                [`input-variant-${variant}`]: true,\n                [`input-size-${size}`]: true,\n            }}\n        >\n            <Tag\n                {...slotProps?.rootContainer}\n                ref={refs?.rootContainer}\n                baseClass='root-container'\n                sxr={{\n                    width: \"100%\",\n                    display: \"flex\",\n                    flexDirection: \"row\",\n                    alignItems: iconPlacement === 'center' ? iconPlacement : `flex-${iconPlacement}`,\n                    flexWrap: \"nowrap\",\n                    transitionProperty: \"border, box-shadow, background\",\n                    bgcolor: error ? \"danger.soft.primary\" : variant === \"fill\" ? \"background.secondary\" : \"background.primary\",\n                    border: variant === \"text\" ? 0 : \"1px solid\",\n                    borderColor: borderColor,\n                    borderRadius: 1,\n                    px: 1,\n                    py: .5,\n                }}\n                disabled={disabled || false}\n                {..._size}\n                height={multiline ? \"auto\" : _size.height}\n                minHeight={_size.height}\n            >\n                {startIcon && <Tag\n                    {...slotProps?.startIcon}\n                    ref={refs?.startIcon}\n                    flex={\"0 0 auto\"}\n                    sxr={{\n                        height: \"100%\",\n                        alignItems: 'center',\n                        justifyContent: \"center\",\n                        display: \"flex\",\n                        color: error ? \"danger.primary\" : \"text.secondary\",\n                    }}\n                    baseClass=\"input-start-icon\"\n                >{startIcon}</Tag>}\n                <Tag\n                    {...slotProps?.inputContainer}\n                    ref={refs?.inputContainer}\n                    baseClass='input-container'\n                    flex={1}\n                    sxr={{\n                        width: \"100%\",\n                        display: \"flex\",\n                        alignItems: \"center\",\n                        flex: 1,\n                        minHeight: _size.height,\n                        \"& textarea\": {\n                            resize: \"none\"\n                        },\n                        \"& input:-webkit-autofill,& input:-webkit-autofill:hover, & input:-webkit-autofill:focus,& input:-webkit-autofill:active\": {\n                            \"-webkit-text-fill-color\": \"text.primary\",\n                            \"box-shadow\": `0 0 0px 1000px ${variant === \"fill\" ? theme.colors.background.secondary : theme.colors.background.primary} inset`,\n                            transition: \"background-color 5000s ease-in-out 0s\"\n                        } as any\n                    }}\n                >\n                    <Tag\n                        {...slotProps?.input}\n                        ref={inputMergeRef}\n                        baseClass='input'\n                        component={multiline ? 'textarea' : 'input'}\n                        {...multiprops}\n                        sxr={{\n                            border: 0,\n                            outline: 0,\n                            bgcolor: \"transparent\",\n                            color: error ? \"danger.primary\" : \"text.primary\",\n                            fontSize: _size.fontSize,\n                            height: multiline ? \"auto\" : _size.height + \"px!important\",\n                            width: \"100%\",\n                            maxHeight: 200,\n                        }}\n                        value={value}\n                        onChange={onChange}\n                        onFocus={(e: any) => {\n                            focused ?? setFocused(true)\n                            onFocus && onFocus(e)\n                        }}\n                        onBlur={(e: any) => {\n                            focused ?? setFocused(false)\n                            onBlur && onBlur(e)\n                        }}\n                        onKeyDown={onKeyDown}\n                        onKeyUp={onKeyUp}\n                        name={name}\n                        placeholder={placeholder}\n                        type={type}\n                        readOnly={readOnly}\n                        autoComplete={autoComplete}\n                    />\n                </Tag>\n                {endIcon && <Tag\n                    {...slotProps?.endIcon}\n                    ref={refs?.endIcon}\n                    flex={\"0 0 auto\"}\n                    sxr={{\n                        height: \"100%\",\n                        alignItems: 'center',\n                        justifyContent: \"center\",\n                        display: 'flex',\n                        color: error ? \"danger.primary\" : \"text.secondary\",\n                    }}\n                    baseClass=\"input-end-icon\"\n                >{endIcon}</Tag>}\n            </Tag>\n            {helperText && <Tag\n                {...slotProps?.helperText}\n                ref={refs?.helperText}\n                baseClass=\"input-helper-text\"\n                sxr={{\n                    color: error ? \"danger.primary\" : \"text.primary\",\n                    fontSize: \"small\",\n                    lineHeight: \"text\",\n                    fontWeight: 'text',\n                    pl: .5,\n                }}\n            >{helperText}</Tag>}\n        </Tag>\n    )\n})\n\nexport default Input\n"],"names":[],"mappings":";;;;;;AAwDA;;;AACI;;AAmCA;AAAe;AACf;AAAa;AACb;AAAmB;AACnB;AAAW;AACX;AAAa;AACb;AAAgB;AAChB;AAAU;AACV;AAAU;AACV;AAAa;AACb;AAAa;AACb;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;;;AAGA;;AAEA;;;;;AAKY;;;AAGZ;AAEA;AACI;AAAU;AACV;;AAEI;AACI;;AACG;AACH;;;AAEA;;;AAGZ;AAEA;AACI;AACI;AACA;AACA;AACH;AACD;AACI;AACA;AACA;AACH;AACD;AACI;AACA;AACA;AACH;;AAGL;;;;;AAKI;AACI;AACA;AACI;AACH;;;;;AAYG;;AAEA;AACA;;AAQI;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAYI;AACA;AACA;AACA;;AAEH;AASG;AACA;AACA;AACA;;AAEA;AACI;AACH;AACD;AACI;;AAEA;AACI;AACX;AASO;AACA;AACA;;;AAGA;AACA;AACA;AACH;;AAKG;AACJ;;AAGI;;AAgBJ;AACA;AACA;AACA;;AAEH;;AAUD;AACA;AACA;AACA;AACH;AAIjB;;"}

package/Menu/index.js

@@ -115,8 +115,10 @@ const Menu = (_a) => {
         if (!closed && target && menuRef.current) {
             const updatePosition = () => {
                 if (menuRef.current && target) {
-                    const p = placeMenu(placement, menuRef.current, target);
-                    setPlaced(p);
+                    requestAnimationFrame(() => {
+                        const p = placeMenu(placement, menuRef.current, target);
+                        setPlaced(p);
+                    });
                 }
             };
             updatePosition();
@@ -127,7 +129,7 @@ const Menu = (_a) => {
                 window.removeEventListener("scroll", updatePosition, true);
             };
         }
-        return undefined;
+        return;
     }, [closed, target, placement]);
     if (closed)
         return null;

package/Menu/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Menu/index.tsx"],"sourcesContent":["\"use client\";\nimport { ReactNode, useEffect, useState, useRef } from \"react\";\nimport { Tag, TagProps, useBreakpointProps, useBreakpointPropsType, useInterface, TransitionProps, Transition } from \"@xanui/core\";\nimport Portal, { PortalProps } from \"../Portal\";\nimport ClickOutside from \"../ClickOutside\";\n\nexport type PlacementTypes =\n    | \"top\"\n    | \"top-left\"\n    | \"top-right\"\n    | \"bottom\"\n    | \"bottom-left\"\n    | \"bottom-right\"\n    | \"right\"\n    | \"right-top\"\n    | \"right-bottom\"\n    | \"left\"\n    | \"left-top\"\n    | \"left-bottom\";\n\nexport type MenuProps = {\n    children?: ReactNode;\n    target?: HTMLElement;\n    placement?: useBreakpointPropsType<PlacementTypes>;\n    zIndex?: number;\n    onClickOutside?: (e: MouseEvent) => void;\n    slotProps?: {\n        transition?: Omit<TransitionProps, \"open\">;\n        portal?: Omit<PortalProps, \"children\">;\n        content?: Omit<TagProps<\"div\">, \"children\">;\n    };\n};\n\nconst placements: PlacementTypes[] = [\n    \"top\",\n    \"top-left\",\n    \"top-right\",\n    \"bottom\",\n    \"bottom-left\",\n    \"bottom-right\",\n    \"right\",\n    \"right-top\",\n    \"right-bottom\",\n    \"left\",\n    \"left-top\",\n    \"left-bottom\",\n];\n\nconst getTransformOrigin = (placement: PlacementTypes) => {\n    switch (placement) {\n        case \"top\":\n            return \"bottom\";\n        case \"top-left\":\n            return \"bottom left\";\n        case \"top-right\":\n            return \"bottom right\";\n        case \"bottom\":\n            return \"top\";\n        case \"bottom-left\":\n            return \"top left\";\n        case \"bottom-right\":\n            return \"top right\";\n        case \"left\":\n            return \"right\";\n        case \"left-top\":\n            return \"top right\";\n        case \"left-bottom\":\n            return \"bottom right\";\n        case \"right\":\n            return \"left\";\n        case \"right-top\":\n            return \"top left\";\n        case \"right-bottom\":\n            return \"bottom left\";\n        default:\n            return \"top\";\n    }\n};\n\n// Compute coordinates for each placement\nconst computePosition = (\n    placement: PlacementTypes,\n    menu: HTMLElement,\n    target: HTMLElement\n) => {\n    const { width: mw, height: mh } = menu.getBoundingClientRect();\n    const {\n        top: tt,\n        left: tl,\n        bottom: tb,\n        right: tr,\n        width: tw,\n        height: th,\n    } = target.getBoundingClientRect();\n\n    const positions: Record<PlacementTypes, { top: number; left: number }> = {\n        \"bottom-left\": { top: tb, left: tl },\n        \"bottom-right\": { top: tb, left: tr - mw },\n        bottom: { top: tb, left: tl + (tw - mw) / 2 },\n\n        \"top-left\": { top: tt - mh, left: tl },\n        \"top-right\": { top: tt - mh, left: tr - mw },\n        top: { top: tt - mh, left: tl + (tw - mw) / 2 },\n\n        left: { top: tt + (th - mh) / 2, left: tl - mw },\n        \"left-top\": { top: tt, left: tl - mw },\n        \"left-bottom\": { top: tb - mh, left: tl - mw },\n\n        right: { top: tt + (th - mh) / 2, left: tr },\n        \"right-top\": { top: tt, left: tr },\n        \"right-bottom\": { top: tb - mh, left: tr },\n    };\n\n    return positions[placement];\n};\n\n\n// Check if menu is off-screen\nconst isOffScreen = (menu: HTMLElement) => {\n    const { x, y, width, height } = menu.getBoundingClientRect();\n    return x < 0 || y < 0 || x + width > window.innerWidth || y + height > window.innerHeight;\n};\n\n// Try to place menu and fallback if off-screen\nconst placeMenu = (placement: PlacementTypes, menu: HTMLElement, target: HTMLElement) => {\n    let pos = computePosition(placement, menu, target);\n    menu.style.top = pos.top + \"px\";\n    menu.style.left = pos.left + \"px\";\n\n    if (isOffScreen(menu)) {\n        for (const p of placements) {\n            const fallbackPos = computePosition(p, menu, target);\n            menu.style.top = fallbackPos.top + \"px\";\n            menu.style.left = fallbackPos.left + \"px\";\n            if (!isOffScreen(menu)) return p;\n        }\n    }\n    return placement;\n};\n\nconst Menu = ({ children, target, ...props }: MenuProps) => {\n    let [{ onClickOutside, placement, zIndex, slotProps }] = useInterface<any>(\"Menu\", props, {});\n    const _p: any = {};\n    if (placement) _p.placement = placement;\n    const p: any = useBreakpointProps(_p);\n    placement = p.placement || \"bottom-left\";\n\n    const isOpen = Boolean(target);\n    const [closed, setClosed] = useState(!isOpen);\n    const [placed, setPlaced] = useState<PlacementTypes>(placement);\n    const menuRef = useRef<HTMLDivElement>(null);\n\n    // Open/close effect\n    useEffect(() => {\n        if (closed && isOpen) setClosed(false);\n    }, [isOpen]);\n\n\n    useEffect(() => {\n        if (!closed && target && menuRef.current) {\n            const updatePosition = () => {\n                if (menuRef.current && target) {\n                    const p = placeMenu(placement!, menuRef.current, target);\n                    setPlaced(p);\n                }\n            };\n\n            updatePosition();\n\n            window.addEventListener(\"resize\", updatePosition);\n            window.addEventListener(\"scroll\", updatePosition, true);\n\n            return () => {\n                window.removeEventListener(\"resize\", updatePosition);\n                window.removeEventListener(\"scroll\", updatePosition, true);\n            };\n        }\n        return undefined;\n    }, [closed, target, placement]);\n\n    if (closed) return null;\n\n    return (\n        <Portal {...slotProps?.portal}>\n            <ClickOutside\n                onClickOutside={(e: MouseEvent) => {\n                    if (e.target !== target) {\n                        onClickOutside && onClickOutside(e);\n                    }\n                }}\n                ref={menuRef}\n                sx={{ position: \"fixed\", zIndex: 1500 + (zIndex || 0) }}\n            >\n                <Transition\n                    duration={200}\n                    easing=\"fast\"\n                    variant=\"grow\"\n                    {...slotProps?.transition}\n                    open={isOpen}\n                    onClosed={() => {\n                        setClosed(true);\n                        slotProps?.transition?.onClosed?.();\n                    }}\n                >\n                    <Tag\n                        baseClass=\"menu-content\"\n                        {...slotProps?.content}\n                        sxr={{\n                            overflow: \"hidden\",\n                            bgcolor: \"background.primary\",\n                            shadow: 2,\n                            radius: 1,\n                            transformOrigin: getTransformOrigin(placed),\n                            ...slotProps?.content?.sx,\n                        }}\n                    >\n                        {children}\n                    </Tag>\n                </Transition>\n            </ClickOutside>\n        </Portal>\n    );\n};\n\nexport default Menu;\n"],"names":[],"mappings":";;;;;;;;;;AAiCA;;;;;;;;;;;;;;AAeA;;AAEQ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;;AAEZ;AAEA;AACA;AAKI;AACA;AASA;;;AAGI;;AAGA;AACA;AAEA;;AAEA;AAEA;;;;AAKJ;AACJ;AAGA;AACA;AACI;;AAEJ;AAEA;AACA;;;;AAKI;AACI;;;;AAII;AAAwB;;;AAGhC;AACJ;AAEA;;;;;AAGI;AAAe;AACf;AACA;AAEA;;;AAGA;;;;;AAKA;;;;AAMY;AACI;;;AAGR;AAEA;AAEA;;AAGA;AACI;;AAEJ;;AAEJ;;AAGJ;AAAY;;AAMI;AACI;;;;;;;AAmCxB;;"}
+{"version":3,"file":"index.js","sources":["../../src/Menu/index.tsx"],"sourcesContent":["\"use client\";\nimport { ReactNode, useEffect, useState, useRef } from \"react\";\nimport { Tag, TagProps, useBreakpointProps, useBreakpointPropsType, useInterface, TransitionProps, Transition } from \"@xanui/core\";\nimport Portal, { PortalProps } from \"../Portal\";\nimport ClickOutside from \"../ClickOutside\";\n\nexport type PlacementTypes =\n    | \"top\"\n    | \"top-left\"\n    | \"top-right\"\n    | \"bottom\"\n    | \"bottom-left\"\n    | \"bottom-right\"\n    | \"right\"\n    | \"right-top\"\n    | \"right-bottom\"\n    | \"left\"\n    | \"left-top\"\n    | \"left-bottom\";\n\nexport type MenuProps = {\n    children?: ReactNode;\n    target?: HTMLElement;\n    placement?: useBreakpointPropsType<PlacementTypes>;\n    zIndex?: number;\n    onClickOutside?: (e: MouseEvent) => void;\n    slotProps?: {\n        transition?: Omit<TransitionProps, \"open\">;\n        portal?: Omit<PortalProps, \"children\">;\n        content?: Omit<TagProps<\"div\">, \"children\">;\n    };\n};\n\nconst placements: PlacementTypes[] = [\n    \"top\",\n    \"top-left\",\n    \"top-right\",\n    \"bottom\",\n    \"bottom-left\",\n    \"bottom-right\",\n    \"right\",\n    \"right-top\",\n    \"right-bottom\",\n    \"left\",\n    \"left-top\",\n    \"left-bottom\",\n];\n\nconst getTransformOrigin = (placement: PlacementTypes) => {\n    switch (placement) {\n        case \"top\":\n            return \"bottom\";\n        case \"top-left\":\n            return \"bottom left\";\n        case \"top-right\":\n            return \"bottom right\";\n        case \"bottom\":\n            return \"top\";\n        case \"bottom-left\":\n            return \"top left\";\n        case \"bottom-right\":\n            return \"top right\";\n        case \"left\":\n            return \"right\";\n        case \"left-top\":\n            return \"top right\";\n        case \"left-bottom\":\n            return \"bottom right\";\n        case \"right\":\n            return \"left\";\n        case \"right-top\":\n            return \"top left\";\n        case \"right-bottom\":\n            return \"bottom left\";\n        default:\n            return \"top\";\n    }\n};\n\n// Compute coordinates for each placement\nconst computePosition = (\n    placement: PlacementTypes,\n    menu: HTMLElement,\n    target: HTMLElement\n) => {\n    const { width: mw, height: mh } = menu.getBoundingClientRect();\n    const {\n        top: tt,\n        left: tl,\n        bottom: tb,\n        right: tr,\n        width: tw,\n        height: th,\n    } = target.getBoundingClientRect();\n\n    const positions: Record<PlacementTypes, { top: number; left: number }> = {\n        \"bottom-left\": { top: tb, left: tl },\n        \"bottom-right\": { top: tb, left: tr - mw },\n        bottom: { top: tb, left: tl + (tw - mw) / 2 },\n\n        \"top-left\": { top: tt - mh, left: tl },\n        \"top-right\": { top: tt - mh, left: tr - mw },\n        top: { top: tt - mh, left: tl + (tw - mw) / 2 },\n\n        left: { top: tt + (th - mh) / 2, left: tl - mw },\n        \"left-top\": { top: tt, left: tl - mw },\n        \"left-bottom\": { top: tb - mh, left: tl - mw },\n\n        right: { top: tt + (th - mh) / 2, left: tr },\n        \"right-top\": { top: tt, left: tr },\n        \"right-bottom\": { top: tb - mh, left: tr },\n    };\n\n    return positions[placement];\n};\n\n\n// Check if menu is off-screen\nconst isOffScreen = (menu: HTMLElement) => {\n    const { x, y, width, height } = menu.getBoundingClientRect();\n    return x < 0 || y < 0 || x + width > window.innerWidth || y + height > window.innerHeight;\n};\n\n// Try to place menu and fallback if off-screen\nconst placeMenu = (placement: PlacementTypes, menu: HTMLElement, target: HTMLElement) => {\n    let pos = computePosition(placement, menu, target);\n    menu.style.top = pos.top + \"px\";\n    menu.style.left = pos.left + \"px\";\n\n    if (isOffScreen(menu)) {\n        for (const p of placements) {\n            const fallbackPos = computePosition(p, menu, target);\n            menu.style.top = fallbackPos.top + \"px\";\n            menu.style.left = fallbackPos.left + \"px\";\n            if (!isOffScreen(menu)) return p;\n        }\n    }\n    return placement;\n};\n\nconst Menu = ({ children, target, ...props }: MenuProps) => {\n    let [{ onClickOutside, placement, zIndex, slotProps }] = useInterface<any>(\"Menu\", props, {});\n    const _p: any = {};\n    if (placement) _p.placement = placement;\n    const p: any = useBreakpointProps(_p);\n    placement = p.placement || \"bottom-left\";\n\n    const isOpen = Boolean(target);\n    const [closed, setClosed] = useState(!isOpen);\n    const [placed, setPlaced] = useState<PlacementTypes>(placement);\n    const menuRef = useRef<HTMLDivElement>(null);\n\n    // Open/close effect\n    useEffect(() => {\n        if (closed && isOpen) setClosed(false);\n    }, [isOpen]);\n\n\n    useEffect(() => {\n        if (!closed && target && menuRef.current) {\n            const updatePosition = () => {\n                if (menuRef.current && target) {\n                    requestAnimationFrame(() => {\n                        const p = placeMenu(placement!, menuRef.current as any, target);\n                        setPlaced(p);\n                    });\n                }\n            };\n\n            updatePosition();\n            window.addEventListener(\"resize\", updatePosition);\n            window.addEventListener(\"scroll\", updatePosition, true);\n\n            return () => {\n                window.removeEventListener(\"resize\", updatePosition);\n                window.removeEventListener(\"scroll\", updatePosition, true);\n            };\n        }\n        return\n    }, [closed, target, placement]);\n\n\n    if (closed) return null;\n\n    return (\n        <Portal {...slotProps?.portal}>\n            <ClickOutside\n                onClickOutside={(e: MouseEvent) => {\n                    if (e.target !== target) {\n                        onClickOutside && onClickOutside(e);\n                    }\n                }}\n                ref={menuRef}\n                sx={{ position: \"fixed\", zIndex: 1500 + (zIndex || 0) }}\n            >\n                <Transition\n                    duration={200}\n                    easing=\"fast\"\n                    variant=\"grow\"\n                    {...slotProps?.transition}\n                    open={isOpen}\n                    onClosed={() => {\n                        setClosed(true);\n                        slotProps?.transition?.onClosed?.();\n                    }}\n                >\n                    <Tag\n                        baseClass=\"menu-content\"\n                        {...slotProps?.content}\n                        sxr={{\n                            overflow: \"hidden\",\n                            bgcolor: \"background.primary\",\n                            shadow: 2,\n                            radius: 1,\n                            transformOrigin: getTransformOrigin(placed),\n                            ...slotProps?.content?.sx,\n                        }}\n                    >\n                        {children}\n                    </Tag>\n                </Transition>\n            </ClickOutside>\n        </Portal>\n    );\n};\n\nexport default Menu;\n"],"names":[],"mappings":";;;;;;;;;;AAiCA;;;;;;;;;;;;;;AAeA;;AAEQ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;;AAEZ;AAEA;AACA;AAKI;AACA;AASA;;;AAGI;;AAGA;AACA;AAEA;;AAEA;AAEA;;;;AAKJ;AACJ;AAGA;AACA;AACI;;AAEJ;AAEA;AACA;;;;AAKI;AACI;;;;AAII;AAAwB;;;AAGhC;AACJ;AAEA;;;;;AAGI;AAAe;AACf;AACA;AAEA;;;AAGA;;;;;AAKA;;;;AAMY;;AAEQ;;AAEJ;;AAER;AAEA;AACA;;AAGA;AACI;;AAEJ;;;;AAMR;AAAY;;AAMI;AACI;;;;;;;AAmCxB;;"}

package/Menu/index.mjs

@@ -113,8 +113,10 @@ const Menu = (_a) => {
         if (!closed && target && menuRef.current) {
             const updatePosition = () => {
                 if (menuRef.current && target) {
-                    const p = placeMenu(placement, menuRef.current, target);
-                    setPlaced(p);
+                    requestAnimationFrame(() => {
+                        const p = placeMenu(placement, menuRef.current, target);
+                        setPlaced(p);
+                    });
                 }
             };
             updatePosition();
@@ -125,7 +127,7 @@ const Menu = (_a) => {
                 window.removeEventListener("scroll", updatePosition, true);
             };
         }
-        return undefined;
+        return;
     }, [closed, target, placement]);
     if (closed)
         return null;

package/Menu/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../src/Menu/index.tsx"],"sourcesContent":["\"use client\";\nimport { ReactNode, useEffect, useState, useRef } from \"react\";\nimport { Tag, TagProps, useBreakpointProps, useBreakpointPropsType, useInterface, TransitionProps, Transition } from \"@xanui/core\";\nimport Portal, { PortalProps } from \"../Portal\";\nimport ClickOutside from \"../ClickOutside\";\n\nexport type PlacementTypes =\n    | \"top\"\n    | \"top-left\"\n    | \"top-right\"\n    | \"bottom\"\n    | \"bottom-left\"\n    | \"bottom-right\"\n    | \"right\"\n    | \"right-top\"\n    | \"right-bottom\"\n    | \"left\"\n    | \"left-top\"\n    | \"left-bottom\";\n\nexport type MenuProps = {\n    children?: ReactNode;\n    target?: HTMLElement;\n    placement?: useBreakpointPropsType<PlacementTypes>;\n    zIndex?: number;\n    onClickOutside?: (e: MouseEvent) => void;\n    slotProps?: {\n        transition?: Omit<TransitionProps, \"open\">;\n        portal?: Omit<PortalProps, \"children\">;\n        content?: Omit<TagProps<\"div\">, \"children\">;\n    };\n};\n\nconst placements: PlacementTypes[] = [\n    \"top\",\n    \"top-left\",\n    \"top-right\",\n    \"bottom\",\n    \"bottom-left\",\n    \"bottom-right\",\n    \"right\",\n    \"right-top\",\n    \"right-bottom\",\n    \"left\",\n    \"left-top\",\n    \"left-bottom\",\n];\n\nconst getTransformOrigin = (placement: PlacementTypes) => {\n    switch (placement) {\n        case \"top\":\n            return \"bottom\";\n        case \"top-left\":\n            return \"bottom left\";\n        case \"top-right\":\n            return \"bottom right\";\n        case \"bottom\":\n            return \"top\";\n        case \"bottom-left\":\n            return \"top left\";\n        case \"bottom-right\":\n            return \"top right\";\n        case \"left\":\n            return \"right\";\n        case \"left-top\":\n            return \"top right\";\n        case \"left-bottom\":\n            return \"bottom right\";\n        case \"right\":\n            return \"left\";\n        case \"right-top\":\n            return \"top left\";\n        case \"right-bottom\":\n            return \"bottom left\";\n        default:\n            return \"top\";\n    }\n};\n\n// Compute coordinates for each placement\nconst computePosition = (\n    placement: PlacementTypes,\n    menu: HTMLElement,\n    target: HTMLElement\n) => {\n    const { width: mw, height: mh } = menu.getBoundingClientRect();\n    const {\n        top: tt,\n        left: tl,\n        bottom: tb,\n        right: tr,\n        width: tw,\n        height: th,\n    } = target.getBoundingClientRect();\n\n    const positions: Record<PlacementTypes, { top: number; left: number }> = {\n        \"bottom-left\": { top: tb, left: tl },\n        \"bottom-right\": { top: tb, left: tr - mw },\n        bottom: { top: tb, left: tl + (tw - mw) / 2 },\n\n        \"top-left\": { top: tt - mh, left: tl },\n        \"top-right\": { top: tt - mh, left: tr - mw },\n        top: { top: tt - mh, left: tl + (tw - mw) / 2 },\n\n        left: { top: tt + (th - mh) / 2, left: tl - mw },\n        \"left-top\": { top: tt, left: tl - mw },\n        \"left-bottom\": { top: tb - mh, left: tl - mw },\n\n        right: { top: tt + (th - mh) / 2, left: tr },\n        \"right-top\": { top: tt, left: tr },\n        \"right-bottom\": { top: tb - mh, left: tr },\n    };\n\n    return positions[placement];\n};\n\n\n// Check if menu is off-screen\nconst isOffScreen = (menu: HTMLElement) => {\n    const { x, y, width, height } = menu.getBoundingClientRect();\n    return x < 0 || y < 0 || x + width > window.innerWidth || y + height > window.innerHeight;\n};\n\n// Try to place menu and fallback if off-screen\nconst placeMenu = (placement: PlacementTypes, menu: HTMLElement, target: HTMLElement) => {\n    let pos = computePosition(placement, menu, target);\n    menu.style.top = pos.top + \"px\";\n    menu.style.left = pos.left + \"px\";\n\n    if (isOffScreen(menu)) {\n        for (const p of placements) {\n            const fallbackPos = computePosition(p, menu, target);\n            menu.style.top = fallbackPos.top + \"px\";\n            menu.style.left = fallbackPos.left + \"px\";\n            if (!isOffScreen(menu)) return p;\n        }\n    }\n    return placement;\n};\n\nconst Menu = ({ children, target, ...props }: MenuProps) => {\n    let [{ onClickOutside, placement, zIndex, slotProps }] = useInterface<any>(\"Menu\", props, {});\n    const _p: any = {};\n    if (placement) _p.placement = placement;\n    const p: any = useBreakpointProps(_p);\n    placement = p.placement || \"bottom-left\";\n\n    const isOpen = Boolean(target);\n    const [closed, setClosed] = useState(!isOpen);\n    const [placed, setPlaced] = useState<PlacementTypes>(placement);\n    const menuRef = useRef<HTMLDivElement>(null);\n\n    // Open/close effect\n    useEffect(() => {\n        if (closed && isOpen) setClosed(false);\n    }, [isOpen]);\n\n\n    useEffect(() => {\n        if (!closed && target && menuRef.current) {\n            const updatePosition = () => {\n                if (menuRef.current && target) {\n                    const p = placeMenu(placement!, menuRef.current, target);\n                    setPlaced(p);\n                }\n            };\n\n            updatePosition();\n\n            window.addEventListener(\"resize\", updatePosition);\n            window.addEventListener(\"scroll\", updatePosition, true);\n\n            return () => {\n                window.removeEventListener(\"resize\", updatePosition);\n                window.removeEventListener(\"scroll\", updatePosition, true);\n            };\n        }\n        return undefined;\n    }, [closed, target, placement]);\n\n    if (closed) return null;\n\n    return (\n        <Portal {...slotProps?.portal}>\n            <ClickOutside\n                onClickOutside={(e: MouseEvent) => {\n                    if (e.target !== target) {\n                        onClickOutside && onClickOutside(e);\n                    }\n                }}\n                ref={menuRef}\n                sx={{ position: \"fixed\", zIndex: 1500 + (zIndex || 0) }}\n            >\n                <Transition\n                    duration={200}\n                    easing=\"fast\"\n                    variant=\"grow\"\n                    {...slotProps?.transition}\n                    open={isOpen}\n                    onClosed={() => {\n                        setClosed(true);\n                        slotProps?.transition?.onClosed?.();\n                    }}\n                >\n                    <Tag\n                        baseClass=\"menu-content\"\n                        {...slotProps?.content}\n                        sxr={{\n                            overflow: \"hidden\",\n                            bgcolor: \"background.primary\",\n                            shadow: 2,\n                            radius: 1,\n                            transformOrigin: getTransformOrigin(placed),\n                            ...slotProps?.content?.sx,\n                        }}\n                    >\n                        {children}\n                    </Tag>\n                </Transition>\n            </ClickOutside>\n        </Portal>\n    );\n};\n\nexport default Menu;\n"],"names":[],"mappings":";;;;;;;;AAiCA;;;;;;;;;;;;;;AAeA;;AAEQ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;;AAEZ;AAEA;AACA;AAKI;AACA;AASA;;;AAGI;;AAGA;AACA;AAEA;;AAEA;AAEA;;;;AAKJ;AACJ;AAGA;AACA;AACI;;AAEJ;AAEA;AACA;;;;AAKI;AACI;;;;AAII;AAAwB;;;AAGhC;AACJ;AAEA;;;;;AAGI;AAAe;AACf;AACA;AAEA;;;AAGA;;;;;AAKA;;;;AAMY;AACI;;;AAGR;AAEA;AAEA;;AAGA;AACI;;AAEJ;;AAEJ;;AAGJ;AAAY;;AAMI;AACI;;;;;;;AAmCxB;;"}
+{"version":3,"file":"index.mjs","sources":["../../src/Menu/index.tsx"],"sourcesContent":["\"use client\";\nimport { ReactNode, useEffect, useState, useRef } from \"react\";\nimport { Tag, TagProps, useBreakpointProps, useBreakpointPropsType, useInterface, TransitionProps, Transition } from \"@xanui/core\";\nimport Portal, { PortalProps } from \"../Portal\";\nimport ClickOutside from \"../ClickOutside\";\n\nexport type PlacementTypes =\n    | \"top\"\n    | \"top-left\"\n    | \"top-right\"\n    | \"bottom\"\n    | \"bottom-left\"\n    | \"bottom-right\"\n    | \"right\"\n    | \"right-top\"\n    | \"right-bottom\"\n    | \"left\"\n    | \"left-top\"\n    | \"left-bottom\";\n\nexport type MenuProps = {\n    children?: ReactNode;\n    target?: HTMLElement;\n    placement?: useBreakpointPropsType<PlacementTypes>;\n    zIndex?: number;\n    onClickOutside?: (e: MouseEvent) => void;\n    slotProps?: {\n        transition?: Omit<TransitionProps, \"open\">;\n        portal?: Omit<PortalProps, \"children\">;\n        content?: Omit<TagProps<\"div\">, \"children\">;\n    };\n};\n\nconst placements: PlacementTypes[] = [\n    \"top\",\n    \"top-left\",\n    \"top-right\",\n    \"bottom\",\n    \"bottom-left\",\n    \"bottom-right\",\n    \"right\",\n    \"right-top\",\n    \"right-bottom\",\n    \"left\",\n    \"left-top\",\n    \"left-bottom\",\n];\n\nconst getTransformOrigin = (placement: PlacementTypes) => {\n    switch (placement) {\n        case \"top\":\n            return \"bottom\";\n        case \"top-left\":\n            return \"bottom left\";\n        case \"top-right\":\n            return \"bottom right\";\n        case \"bottom\":\n            return \"top\";\n        case \"bottom-left\":\n            return \"top left\";\n        case \"bottom-right\":\n            return \"top right\";\n        case \"left\":\n            return \"right\";\n        case \"left-top\":\n            return \"top right\";\n        case \"left-bottom\":\n            return \"bottom right\";\n        case \"right\":\n            return \"left\";\n        case \"right-top\":\n            return \"top left\";\n        case \"right-bottom\":\n            return \"bottom left\";\n        default:\n            return \"top\";\n    }\n};\n\n// Compute coordinates for each placement\nconst computePosition = (\n    placement: PlacementTypes,\n    menu: HTMLElement,\n    target: HTMLElement\n) => {\n    const { width: mw, height: mh } = menu.getBoundingClientRect();\n    const {\n        top: tt,\n        left: tl,\n        bottom: tb,\n        right: tr,\n        width: tw,\n        height: th,\n    } = target.getBoundingClientRect();\n\n    const positions: Record<PlacementTypes, { top: number; left: number }> = {\n        \"bottom-left\": { top: tb, left: tl },\n        \"bottom-right\": { top: tb, left: tr - mw },\n        bottom: { top: tb, left: tl + (tw - mw) / 2 },\n\n        \"top-left\": { top: tt - mh, left: tl },\n        \"top-right\": { top: tt - mh, left: tr - mw },\n        top: { top: tt - mh, left: tl + (tw - mw) / 2 },\n\n        left: { top: tt + (th - mh) / 2, left: tl - mw },\n        \"left-top\": { top: tt, left: tl - mw },\n        \"left-bottom\": { top: tb - mh, left: tl - mw },\n\n        right: { top: tt + (th - mh) / 2, left: tr },\n        \"right-top\": { top: tt, left: tr },\n        \"right-bottom\": { top: tb - mh, left: tr },\n    };\n\n    return positions[placement];\n};\n\n\n// Check if menu is off-screen\nconst isOffScreen = (menu: HTMLElement) => {\n    const { x, y, width, height } = menu.getBoundingClientRect();\n    return x < 0 || y < 0 || x + width > window.innerWidth || y + height > window.innerHeight;\n};\n\n// Try to place menu and fallback if off-screen\nconst placeMenu = (placement: PlacementTypes, menu: HTMLElement, target: HTMLElement) => {\n    let pos = computePosition(placement, menu, target);\n    menu.style.top = pos.top + \"px\";\n    menu.style.left = pos.left + \"px\";\n\n    if (isOffScreen(menu)) {\n        for (const p of placements) {\n            const fallbackPos = computePosition(p, menu, target);\n            menu.style.top = fallbackPos.top + \"px\";\n            menu.style.left = fallbackPos.left + \"px\";\n            if (!isOffScreen(menu)) return p;\n        }\n    }\n    return placement;\n};\n\nconst Menu = ({ children, target, ...props }: MenuProps) => {\n    let [{ onClickOutside, placement, zIndex, slotProps }] = useInterface<any>(\"Menu\", props, {});\n    const _p: any = {};\n    if (placement) _p.placement = placement;\n    const p: any = useBreakpointProps(_p);\n    placement = p.placement || \"bottom-left\";\n\n    const isOpen = Boolean(target);\n    const [closed, setClosed] = useState(!isOpen);\n    const [placed, setPlaced] = useState<PlacementTypes>(placement);\n    const menuRef = useRef<HTMLDivElement>(null);\n\n    // Open/close effect\n    useEffect(() => {\n        if (closed && isOpen) setClosed(false);\n    }, [isOpen]);\n\n\n    useEffect(() => {\n        if (!closed && target && menuRef.current) {\n            const updatePosition = () => {\n                if (menuRef.current && target) {\n                    requestAnimationFrame(() => {\n                        const p = placeMenu(placement!, menuRef.current as any, target);\n                        setPlaced(p);\n                    });\n                }\n            };\n\n            updatePosition();\n            window.addEventListener(\"resize\", updatePosition);\n            window.addEventListener(\"scroll\", updatePosition, true);\n\n            return () => {\n                window.removeEventListener(\"resize\", updatePosition);\n                window.removeEventListener(\"scroll\", updatePosition, true);\n            };\n        }\n        return\n    }, [closed, target, placement]);\n\n\n    if (closed) return null;\n\n    return (\n        <Portal {...slotProps?.portal}>\n            <ClickOutside\n                onClickOutside={(e: MouseEvent) => {\n                    if (e.target !== target) {\n                        onClickOutside && onClickOutside(e);\n                    }\n                }}\n                ref={menuRef}\n                sx={{ position: \"fixed\", zIndex: 1500 + (zIndex || 0) }}\n            >\n                <Transition\n                    duration={200}\n                    easing=\"fast\"\n                    variant=\"grow\"\n                    {...slotProps?.transition}\n                    open={isOpen}\n                    onClosed={() => {\n                        setClosed(true);\n                        slotProps?.transition?.onClosed?.();\n                    }}\n                >\n                    <Tag\n                        baseClass=\"menu-content\"\n                        {...slotProps?.content}\n                        sxr={{\n                            overflow: \"hidden\",\n                            bgcolor: \"background.primary\",\n                            shadow: 2,\n                            radius: 1,\n                            transformOrigin: getTransformOrigin(placed),\n                            ...slotProps?.content?.sx,\n                        }}\n                    >\n                        {children}\n                    </Tag>\n                </Transition>\n            </ClickOutside>\n        </Portal>\n    );\n};\n\nexport default Menu;\n"],"names":[],"mappings":";;;;;;;;AAiCA;;;;;;;;;;;;;;AAeA;;AAEQ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;;AAEZ;AAEA;AACA;AAKI;AACA;AASA;;;AAGI;;AAGA;AACA;AAEA;;AAEA;AAEA;;;;AAKJ;AACJ;AAGA;AACA;AACI;;AAEJ;AAEA;AACA;;;;AAKI;AACI;;;;AAII;AAAwB;;;AAGhC;AACJ;AAEA;;;;;AAGI;AAAe;AACf;AACA;AAEA;;;AAGA;;;;;AAKA;;;;AAMY;;AAEQ;;AAEJ;;AAER;AAEA;AACA;;AAGA;AACI;;AAEJ;;;;AAMR;AAAY;;AAMI;AACI;;;;;;;AAmCxB;;"}

package/Select/index.d.ts

@@ -12,6 +12,11 @@ type SelectProps = {
     placeholder?: useBreakpointPropsType<string>;
     color?: useBreakpointPropsType<UseColorTemplateColor>;
     variant?: useBreakpointPropsType<UseColorTemplateType>;
+    refs?: {
+        input?: React.Ref<any>;
+        menu?: React.Ref<any>;
+        list?: React.Ref<any>;
+    };
     slotProps?: {
         menu?: Omit<MenuProps, 'children' | 'target'>;
         input?: Omit<InputProps, "onChange" | "value">;

package/Select/index.js

@@ -13,8 +13,8 @@ var UpIcon = require('@xanui/icons/KeyboardArrowUp');
 var core = require('@xanui/core');
 
 const Select = React.forwardRef((_a, ref) => {
-    var _b, _c, _d, _e;
-    var { onChange, value, children } = _a, props = tslib.__rest(_a, ["onChange", "value", "children"]);
+    var _b, _c, _d, _e, _f;
+    var { onChange, value, children, refs } = _a, props = tslib.__rest(_a, ["onChange", "value", "children", "refs"]);
     let [{ slotProps, color, variant, placeholder }] = core.useInterface("Select", props, {});
     color !== null && color !== void 0 ? color : (color = "brand");
     variant !== null && variant !== void 0 ? variant : (variant = "fill");
@@ -40,12 +40,13 @@ const Select = React.forwardRef((_a, ref) => {
             selectedProps: sProps
         };
     }, [children, value]);
+    const mergeRefs = core.useMergeRefs(ref, conRef);
     const toggleMenu = () => setTarget(target ? null : conRef.current);
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(index, Object.assign({ color: color, variant: variant === "soft" ? "fill" : variant, endIcon: jsxRuntime.jsxs(index$1, { flexDirection: "row", component: "span", children: [" ", (target ? jsxRuntime.jsx(UpIcon, {}) : jsxRuntime.jsx(DownIcon, {}))] }), readOnly: true, value: typeof selectedProps.children === 'string' ? selectedProps.children : value, cursor: "pointer", userSelect: "none", startIcon: selectedProps.startIcon, focused: !!target, placeholder: placeholder }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.input, { slotProps: {
-                    container: Object.assign(Object.assign({ cursor: "pointer", userSelect: "none" }, (((_c = (_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.input) === null || _b === void 0 ? void 0 : _b.slotProps) === null || _c === void 0 ? void 0 : _c.container) || {})), { onClick: toggleMenu })
-                }, containerRef: conRef, ref: ref })), jsxRuntime.jsx(index$2, Object.assign({ target: target, placement: "bottom" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.menu, { slotProps: {
-                    content: Object.assign({ mt: .5, width: conRef && ((_d = conRef === null || conRef === void 0 ? void 0 : conRef.current) === null || _d === void 0 ? void 0 : _d.clientWidth) }, (_e = slotProps === null || slotProps === void 0 ? void 0 : slotProps.menu) === null || _e === void 0 ? void 0 : _e.content)
-                }, onClickOutside: toggleMenu, children: jsxRuntime.jsx(index$3, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.list, { color: color, variant: variant, children: childs })) }))] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(index, Object.assign({ ref: mergeRefs, color: color, variant: variant === "soft" ? "fill" : variant, endIcon: jsxRuntime.jsxs(index$1, { flexDirection: "row", component: "span", children: [" ", (target ? jsxRuntime.jsx(UpIcon, {}) : jsxRuntime.jsx(DownIcon, {}))] }), readOnly: true, value: typeof selectedProps.children === 'string' ? selectedProps.children : value, cursor: "pointer", userSelect: "none", startIcon: selectedProps.startIcon, focused: !!target, placeholder: placeholder }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.input, { refs: Object.assign({ input: refs === null || refs === void 0 ? void 0 : refs.input }, (_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.input) === null || _b === void 0 ? void 0 : _b.refs), slotProps: {
+                    rootContainer: Object.assign(Object.assign({ cursor: "pointer", userSelect: "none" }, (((_d = (_c = slotProps === null || slotProps === void 0 ? void 0 : slotProps.input) === null || _c === void 0 ? void 0 : _c.slotProps) === null || _d === void 0 ? void 0 : _d.container) || {})), { onClick: toggleMenu })
+                } })), jsxRuntime.jsx(index$2, Object.assign({ ref: refs === null || refs === void 0 ? void 0 : refs.menu, target: target, placement: "bottom-left" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.menu, { slotProps: {
+                    content: Object.assign(Object.assign({ mt: .5 }, (_e = slotProps === null || slotProps === void 0 ? void 0 : slotProps.menu) === null || _e === void 0 ? void 0 : _e.content), { width: conRef && ((_f = conRef === null || conRef === void 0 ? void 0 : conRef.current) === null || _f === void 0 ? void 0 : _f.clientWidth) })
+                }, onClickOutside: toggleMenu, children: jsxRuntime.jsx(index$3, Object.assign({ ref: refs === null || refs === void 0 ? void 0 : refs.list }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.list, { color: color, variant: variant, children: childs })) }))] }));
 });
 
 module.exports = Select;

package/Select/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Select/index.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { ReactElement, useMemo, cloneElement, useState, Children, useRef } from 'react'\nimport Input, { InputProps } from '../Input'\nimport List, { ListProps } from '../List'\nimport Menu, { MenuProps } from '../Menu'\nimport Stack from '../Stack'\nimport { OptionProps } from '../Option'\nimport DownIcon from '@xanui/icons/KeyboardArrowDown';\nimport UpIcon from '@xanui/icons/KeyboardArrowUp';\nimport { UseColorTemplateColor, UseColorTemplateType, useInterface, useBreakpointPropsType } from '@xanui/core'\n\n\nexport type SelectProps = {\n    value?: string | number;\n    onChange?: (value: string | number) => void;\n    children: ReactElement<OptionProps> | ReactElement<OptionProps>[];\n    placeholder?: useBreakpointPropsType<string>;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    variant?: useBreakpointPropsType<UseColorTemplateType>;\n    slotProps?: {\n        menu?: Omit<MenuProps, 'children' | 'target'>;\n        input?: Omit<InputProps, \"onChange\" | \"value\">;\n        list?: Omit<ListProps, \"children\">\n    }\n}\n\nconst Select = React.forwardRef(({ onChange, value, children, ...props }: SelectProps, ref: React.Ref<any>) => {\n    let [{ slotProps, color, variant, placeholder }] = useInterface<any>(\"Select\", props, {})\n    color ??= \"brand\"\n    variant ??= \"fill\"\n    const [target, setTarget] = useState<any>()\n    const conRef = useRef(null)\n    const { childs, selectedProps } = useMemo(() => {\n        let sProps: any = {}\n        const c = Children.map(children, (child: any) => {\n            let selected = child.props.value === value\n            if (selected) sProps = child.props\n            return cloneElement(child, {\n                value: undefined,\n                selected,\n                onClick: () => {\n                    setTarget(null)\n                    onChange && onChange(child.props.value)\n                }\n            })\n        })\n        return {\n            childs: c,\n            selectedProps: sProps as OptionProps\n        }\n    }, [children, value])\n\n    const toggleMenu = () => setTarget(target ? null : conRef.current)\n\n    return (\n        <>\n            <Input\n                color={color}\n                variant={variant === \"soft\" ? \"fill\" : variant}\n                endIcon={<Stack flexDirection=\"row\" component=\"span\" > {(target ? <UpIcon /> : <DownIcon />)}</Stack>}\n                readOnly\n                value={typeof selectedProps.children === 'string' ? selectedProps.children : value}\n                cursor=\"pointer\"\n                userSelect=\"none\"\n                startIcon={selectedProps.startIcon}\n                focused={!!target}\n                placeholder={placeholder}\n                {...slotProps?.input}\n                slotProps={{\n                    container: {\n                        cursor: \"pointer\",\n                        userSelect: \"none\",\n                        ...(slotProps?.input?.slotProps?.container || {}),\n                        onClick: toggleMenu,\n                    }\n                }}\n                containerRef={conRef}\n                ref={ref}\n            />\n            <Menu\n                target={target}\n                placement=\"bottom\"\n                {...slotProps?.menu}\n                slotProps={{\n                    content: {\n                        mt: .5,\n                        width: conRef && (conRef?.current as any)?.clientWidth,\n                        ...slotProps?.menu?.content\n                    }\n                }}\n                onClickOutside={toggleMenu}\n            >\n                <List\n                    {...slotProps?.list}\n                    color={color}\n                    variant={variant}\n                >\n                    {childs}\n                </List>\n            </Menu>\n        </>\n    )\n})\n\nexport default Select"],"names":[],"mappings":";;;;;;;;;;;;;;AA2BA;;;;;;;AAKI;;;;;AAKQ;AAAc;;AAEV;;;;;;AAMH;AACL;;AAEI;AACA;;AAER;AAEA;;AAiBgB;AAMH;AASG;AAKH;AAajB;;"}
+{"version":3,"file":"index.js","sources":["../../src/Select/index.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { ReactElement, useMemo, cloneElement, useState, Children, useRef } from 'react'\nimport Input, { InputProps } from '../Input'\nimport List, { ListProps } from '../List'\nimport Menu, { MenuProps } from '../Menu'\nimport Stack from '../Stack'\nimport { OptionProps } from '../Option'\nimport DownIcon from '@xanui/icons/KeyboardArrowDown';\nimport UpIcon from '@xanui/icons/KeyboardArrowUp';\nimport { UseColorTemplateColor, UseColorTemplateType, useInterface, useBreakpointPropsType, useMergeRefs } from '@xanui/core'\n\n\nexport type SelectProps = {\n    value?: string | number;\n    onChange?: (value: string | number) => void;\n    children: ReactElement<OptionProps> | ReactElement<OptionProps>[];\n    placeholder?: useBreakpointPropsType<string>;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    variant?: useBreakpointPropsType<UseColorTemplateType>;\n    refs?: {\n        input?: React.Ref<any>;\n        menu?: React.Ref<any>;\n        list?: React.Ref<any>;\n    };\n    slotProps?: {\n        menu?: Omit<MenuProps, 'children' | 'target'>;\n        input?: Omit<InputProps, \"onChange\" | \"value\">;\n        list?: Omit<ListProps, \"children\">\n    }\n}\n\nconst Select = React.forwardRef(({ onChange, value, children, refs, ...props }: SelectProps, ref: React.Ref<any>) => {\n    let [{ slotProps, color, variant, placeholder }] = useInterface<any>(\"Select\", props, {})\n    color ??= \"brand\"\n    variant ??= \"fill\"\n    const [target, setTarget] = useState<any>()\n    const conRef = useRef(null)\n    const { childs, selectedProps } = useMemo(() => {\n        let sProps: any = {}\n        const c = Children.map(children, (child: any) => {\n            let selected = child.props.value === value\n            if (selected) sProps = child.props\n            return cloneElement(child, {\n                value: undefined,\n                selected,\n                onClick: () => {\n                    setTarget(null)\n                    onChange && onChange(child.props.value)\n                }\n            })\n        })\n        return {\n            childs: c,\n            selectedProps: sProps as OptionProps\n        }\n    }, [children, value])\n\n    const mergeRefs = useMergeRefs(ref, conRef)\n    const toggleMenu = () => setTarget(target ? null : conRef.current)\n\n    return (\n        <>\n            <Input\n                ref={mergeRefs}\n                color={color}\n                variant={variant === \"soft\" ? \"fill\" : variant}\n                endIcon={<Stack flexDirection=\"row\" component=\"span\" > {(target ? <UpIcon /> : <DownIcon />)}</Stack>}\n                readOnly\n                value={typeof selectedProps.children === 'string' ? selectedProps.children : value}\n                cursor=\"pointer\"\n                userSelect=\"none\"\n                startIcon={selectedProps.startIcon}\n                focused={!!target}\n                placeholder={placeholder}\n                {...slotProps?.input}\n                refs={{\n                    input: refs?.input,\n                    ...slotProps?.input?.refs\n                }}\n                slotProps={{\n                    rootContainer: {\n                        cursor: \"pointer\",\n                        userSelect: \"none\",\n                        ...(slotProps?.input?.slotProps?.container || {}),\n                        onClick: toggleMenu,\n                    }\n                }}\n            />\n            <Menu\n                ref={refs?.menu}\n                target={target}\n                placement=\"bottom-left\"\n                {...slotProps?.menu}\n                slotProps={{\n                    content: {\n                        mt: .5,\n                        ...slotProps?.menu?.content,\n                        width: conRef && (conRef?.current as any)?.clientWidth,\n                    }\n                }}\n                onClickOutside={toggleMenu}\n            >\n                <List\n                    ref={refs?.list}\n                    {...slotProps?.list}\n                    color={color}\n                    variant={variant}\n                >\n                    {childs}\n                </List>\n            </Menu>\n        </>\n    )\n})\n\nexport default Select"],"names":[],"mappings":";;;;;;;;;;;;;;AAgCA;;AAAiC;;;;;AAK7B;;;;;AAKQ;AAAc;;AAEV;;;;;;AAMH;AACL;;AAEI;AACA;;AAER;;AAGA;AAEA;AAoBgB;AAMH;AAQG;AAKH;AAcjB;;"}

package/Select/index.mjs

@@ -8,11 +8,11 @@ import Menu from '../Menu/index.mjs';
 import Stack from '../Stack/index.mjs';
 import DownIcon from '@xanui/icons/KeyboardArrowDown';
 import UpIcon from '@xanui/icons/KeyboardArrowUp';
-import { useInterface } from '@xanui/core';
+import { useInterface, useMergeRefs } from '@xanui/core';
 
 const Select = React.forwardRef((_a, ref) => {
-    var _b, _c, _d, _e;
-    var { onChange, value, children } = _a, props = __rest(_a, ["onChange", "value", "children"]);
+    var _b, _c, _d, _e, _f;
+    var { onChange, value, children, refs } = _a, props = __rest(_a, ["onChange", "value", "children", "refs"]);
     let [{ slotProps, color, variant, placeholder }] = useInterface("Select", props, {});
     color !== null && color !== void 0 ? color : (color = "brand");
     variant !== null && variant !== void 0 ? variant : (variant = "fill");
@@ -38,12 +38,13 @@ const Select = React.forwardRef((_a, ref) => {
             selectedProps: sProps
         };
     }, [children, value]);
+    const mergeRefs = useMergeRefs(ref, conRef);
     const toggleMenu = () => setTarget(target ? null : conRef.current);
-    return (jsxs(Fragment, { children: [jsx(Input, Object.assign({ color: color, variant: variant === "soft" ? "fill" : variant, endIcon: jsxs(Stack, { flexDirection: "row", component: "span", children: [" ", (target ? jsx(UpIcon, {}) : jsx(DownIcon, {}))] }), readOnly: true, value: typeof selectedProps.children === 'string' ? selectedProps.children : value, cursor: "pointer", userSelect: "none", startIcon: selectedProps.startIcon, focused: !!target, placeholder: placeholder }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.input, { slotProps: {
-                    container: Object.assign(Object.assign({ cursor: "pointer", userSelect: "none" }, (((_c = (_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.input) === null || _b === void 0 ? void 0 : _b.slotProps) === null || _c === void 0 ? void 0 : _c.container) || {})), { onClick: toggleMenu })
-                }, containerRef: conRef, ref: ref })), jsx(Menu, Object.assign({ target: target, placement: "bottom" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.menu, { slotProps: {
-                    content: Object.assign({ mt: .5, width: conRef && ((_d = conRef === null || conRef === void 0 ? void 0 : conRef.current) === null || _d === void 0 ? void 0 : _d.clientWidth) }, (_e = slotProps === null || slotProps === void 0 ? void 0 : slotProps.menu) === null || _e === void 0 ? void 0 : _e.content)
-                }, onClickOutside: toggleMenu, children: jsx(List, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.list, { color: color, variant: variant, children: childs })) }))] }));
+    return (jsxs(Fragment, { children: [jsx(Input, Object.assign({ ref: mergeRefs, color: color, variant: variant === "soft" ? "fill" : variant, endIcon: jsxs(Stack, { flexDirection: "row", component: "span", children: [" ", (target ? jsx(UpIcon, {}) : jsx(DownIcon, {}))] }), readOnly: true, value: typeof selectedProps.children === 'string' ? selectedProps.children : value, cursor: "pointer", userSelect: "none", startIcon: selectedProps.startIcon, focused: !!target, placeholder: placeholder }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.input, { refs: Object.assign({ input: refs === null || refs === void 0 ? void 0 : refs.input }, (_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.input) === null || _b === void 0 ? void 0 : _b.refs), slotProps: {
+                    rootContainer: Object.assign(Object.assign({ cursor: "pointer", userSelect: "none" }, (((_d = (_c = slotProps === null || slotProps === void 0 ? void 0 : slotProps.input) === null || _c === void 0 ? void 0 : _c.slotProps) === null || _d === void 0 ? void 0 : _d.container) || {})), { onClick: toggleMenu })
+                } })), jsx(Menu, Object.assign({ ref: refs === null || refs === void 0 ? void 0 : refs.menu, target: target, placement: "bottom-left" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.menu, { slotProps: {
+                    content: Object.assign(Object.assign({ mt: .5 }, (_e = slotProps === null || slotProps === void 0 ? void 0 : slotProps.menu) === null || _e === void 0 ? void 0 : _e.content), { width: conRef && ((_f = conRef === null || conRef === void 0 ? void 0 : conRef.current) === null || _f === void 0 ? void 0 : _f.clientWidth) })
+                }, onClickOutside: toggleMenu, children: jsx(List, Object.assign({ ref: refs === null || refs === void 0 ? void 0 : refs.list }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.list, { color: color, variant: variant, children: childs })) }))] }));
 });
 
 export { Select as default };

package/Select/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../src/Select/index.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { ReactElement, useMemo, cloneElement, useState, Children, useRef } from 'react'\nimport Input, { InputProps } from '../Input'\nimport List, { ListProps } from '../List'\nimport Menu, { MenuProps } from '../Menu'\nimport Stack from '../Stack'\nimport { OptionProps } from '../Option'\nimport DownIcon from '@xanui/icons/KeyboardArrowDown';\nimport UpIcon from '@xanui/icons/KeyboardArrowUp';\nimport { UseColorTemplateColor, UseColorTemplateType, useInterface, useBreakpointPropsType } from '@xanui/core'\n\n\nexport type SelectProps = {\n    value?: string | number;\n    onChange?: (value: string | number) => void;\n    children: ReactElement<OptionProps> | ReactElement<OptionProps>[];\n    placeholder?: useBreakpointPropsType<string>;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    variant?: useBreakpointPropsType<UseColorTemplateType>;\n    slotProps?: {\n        menu?: Omit<MenuProps, 'children' | 'target'>;\n        input?: Omit<InputProps, \"onChange\" | \"value\">;\n        list?: Omit<ListProps, \"children\">\n    }\n}\n\nconst Select = React.forwardRef(({ onChange, value, children, ...props }: SelectProps, ref: React.Ref<any>) => {\n    let [{ slotProps, color, variant, placeholder }] = useInterface<any>(\"Select\", props, {})\n    color ??= \"brand\"\n    variant ??= \"fill\"\n    const [target, setTarget] = useState<any>()\n    const conRef = useRef(null)\n    const { childs, selectedProps } = useMemo(() => {\n        let sProps: any = {}\n        const c = Children.map(children, (child: any) => {\n            let selected = child.props.value === value\n            if (selected) sProps = child.props\n            return cloneElement(child, {\n                value: undefined,\n                selected,\n                onClick: () => {\n                    setTarget(null)\n                    onChange && onChange(child.props.value)\n                }\n            })\n        })\n        return {\n            childs: c,\n            selectedProps: sProps as OptionProps\n        }\n    }, [children, value])\n\n    const toggleMenu = () => setTarget(target ? null : conRef.current)\n\n    return (\n        <>\n            <Input\n                color={color}\n                variant={variant === \"soft\" ? \"fill\" : variant}\n                endIcon={<Stack flexDirection=\"row\" component=\"span\" > {(target ? <UpIcon /> : <DownIcon />)}</Stack>}\n                readOnly\n                value={typeof selectedProps.children === 'string' ? selectedProps.children : value}\n                cursor=\"pointer\"\n                userSelect=\"none\"\n                startIcon={selectedProps.startIcon}\n                focused={!!target}\n                placeholder={placeholder}\n                {...slotProps?.input}\n                slotProps={{\n                    container: {\n                        cursor: \"pointer\",\n                        userSelect: \"none\",\n                        ...(slotProps?.input?.slotProps?.container || {}),\n                        onClick: toggleMenu,\n                    }\n                }}\n                containerRef={conRef}\n                ref={ref}\n            />\n            <Menu\n                target={target}\n                placement=\"bottom\"\n                {...slotProps?.menu}\n                slotProps={{\n                    content: {\n                        mt: .5,\n                        width: conRef && (conRef?.current as any)?.clientWidth,\n                        ...slotProps?.menu?.content\n                    }\n                }}\n                onClickOutside={toggleMenu}\n            >\n                <List\n                    {...slotProps?.list}\n                    color={color}\n                    variant={variant}\n                >\n                    {childs}\n                </List>\n            </Menu>\n        </>\n    )\n})\n\nexport default Select"],"names":[],"mappings":";;;;;;;;;;;;AA2BA;;;;;;;AAKI;;;;;AAKQ;AAAc;;AAEV;;;;;;AAMH;AACL;;AAEI;AACA;;AAER;AAEA;;AAiBgB;AAMH;AASG;AAKH;AAajB;;"}
+{"version":3,"file":"index.mjs","sources":["../../src/Select/index.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { ReactElement, useMemo, cloneElement, useState, Children, useRef } from 'react'\nimport Input, { InputProps } from '../Input'\nimport List, { ListProps } from '../List'\nimport Menu, { MenuProps } from '../Menu'\nimport Stack from '../Stack'\nimport { OptionProps } from '../Option'\nimport DownIcon from '@xanui/icons/KeyboardArrowDown';\nimport UpIcon from '@xanui/icons/KeyboardArrowUp';\nimport { UseColorTemplateColor, UseColorTemplateType, useInterface, useBreakpointPropsType, useMergeRefs } from '@xanui/core'\n\n\nexport type SelectProps = {\n    value?: string | number;\n    onChange?: (value: string | number) => void;\n    children: ReactElement<OptionProps> | ReactElement<OptionProps>[];\n    placeholder?: useBreakpointPropsType<string>;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    variant?: useBreakpointPropsType<UseColorTemplateType>;\n    refs?: {\n        input?: React.Ref<any>;\n        menu?: React.Ref<any>;\n        list?: React.Ref<any>;\n    };\n    slotProps?: {\n        menu?: Omit<MenuProps, 'children' | 'target'>;\n        input?: Omit<InputProps, \"onChange\" | \"value\">;\n        list?: Omit<ListProps, \"children\">\n    }\n}\n\nconst Select = React.forwardRef(({ onChange, value, children, refs, ...props }: SelectProps, ref: React.Ref<any>) => {\n    let [{ slotProps, color, variant, placeholder }] = useInterface<any>(\"Select\", props, {})\n    color ??= \"brand\"\n    variant ??= \"fill\"\n    const [target, setTarget] = useState<any>()\n    const conRef = useRef(null)\n    const { childs, selectedProps } = useMemo(() => {\n        let sProps: any = {}\n        const c = Children.map(children, (child: any) => {\n            let selected = child.props.value === value\n            if (selected) sProps = child.props\n            return cloneElement(child, {\n                value: undefined,\n                selected,\n                onClick: () => {\n                    setTarget(null)\n                    onChange && onChange(child.props.value)\n                }\n            })\n        })\n        return {\n            childs: c,\n            selectedProps: sProps as OptionProps\n        }\n    }, [children, value])\n\n    const mergeRefs = useMergeRefs(ref, conRef)\n    const toggleMenu = () => setTarget(target ? null : conRef.current)\n\n    return (\n        <>\n            <Input\n                ref={mergeRefs}\n                color={color}\n                variant={variant === \"soft\" ? \"fill\" : variant}\n                endIcon={<Stack flexDirection=\"row\" component=\"span\" > {(target ? <UpIcon /> : <DownIcon />)}</Stack>}\n                readOnly\n                value={typeof selectedProps.children === 'string' ? selectedProps.children : value}\n                cursor=\"pointer\"\n                userSelect=\"none\"\n                startIcon={selectedProps.startIcon}\n                focused={!!target}\n                placeholder={placeholder}\n                {...slotProps?.input}\n                refs={{\n                    input: refs?.input,\n                    ...slotProps?.input?.refs\n                }}\n                slotProps={{\n                    rootContainer: {\n                        cursor: \"pointer\",\n                        userSelect: \"none\",\n                        ...(slotProps?.input?.slotProps?.container || {}),\n                        onClick: toggleMenu,\n                    }\n                }}\n            />\n            <Menu\n                ref={refs?.menu}\n                target={target}\n                placement=\"bottom-left\"\n                {...slotProps?.menu}\n                slotProps={{\n                    content: {\n                        mt: .5,\n                        ...slotProps?.menu?.content,\n                        width: conRef && (conRef?.current as any)?.clientWidth,\n                    }\n                }}\n                onClickOutside={toggleMenu}\n            >\n                <List\n                    ref={refs?.list}\n                    {...slotProps?.list}\n                    color={color}\n                    variant={variant}\n                >\n                    {childs}\n                </List>\n            </Menu>\n        </>\n    )\n})\n\nexport default Select"],"names":[],"mappings":";;;;;;;;;;;;AAgCA;;AAAiC;;;;;AAK7B;;;;;AAKQ;AAAc;;AAEV;;;;;;AAMH;AACL;;AAEI;AACA;;AAER;;AAGA;AAEA;AAoBgB;AAMH;AAQG;AAKH;AAcjB;;"}

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@xanui/ui",
-  "version": "1.1.20",
+  "version": "1.1.21",
   "description": "",
   "private": false,
   "main": "./index.js",
   "module": "./index.mjs",
   "types": "./index.d.ts",
   "dependencies": {
-    "@xanui/core": "^1.2.37",
+    "@xanui/core": "^1.2.38",
     "@xanui/icons": "^1.1.10",
     "pretty-class": "^1.0.8",
     "react-state-bucket": "^1.2.6"