@xanui/ui 1.1.62 → 1.1.64

package/InputNumber/index.cjs

@@ -9,41 +9,45 @@ var core = require('@xanui/core');
 
 const InputNumber = React.forwardRef((props, ref) => {
     var _a;
-    const [_val, setVal] = React.useState((_a = props.value) !== null && _a !== void 0 ? _a : "");
     const inputRef = React.useRef(null);
     const mergeRef = core.useMergeRefs(inputRef, ref);
-    React.useEffect(() => {
-        if (inputRef.current && (props === null || props === void 0 ? void 0 : props.onChange)) {
-            let valstr = String(_val);
-            inputRef.current.value = valstr.includes(".") ? parseFloat(_val) : parseInt(_val);
-            const syntheticEvent = {
-                target: inputRef.current,
-                currentTarget: inputRef.current,
-            };
-            props === null || props === void 0 ? void 0 : props.onChange(syntheticEvent);
-        }
-    }, [_val]);
-    const isNumeric = _val === undefined || _val === '' || !isNaN(Number(_val));
+    const isNumeric = props.value === undefined || props.value === '' || !isNaN(Number(props.value));
     const errorProps = {};
     if (!isNumeric) {
         errorProps.error = true;
         errorProps.helperText = "Value must be numeric";
     }
-    return (jsxRuntime.jsx(index, Object.assign({}, props, errorProps, { ref: mergeRef, endIcon: jsxRuntime.jsx(UnfoldMore, {}), value: _val !== null && _val !== void 0 ? _val : "", onKeyDown: (e) => {
+    return (jsxRuntime.jsx(index, Object.assign({}, props, errorProps, { ref: mergeRef, endIcon: jsxRuntime.jsx(UnfoldMore, {}), value: (_a = props.value) !== null && _a !== void 0 ? _a : "", onKeyDown: (e) => {
             var _a;
             (_a = props.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(props, e);
             if (e.key !== 'ArrowUp' && e.key !== 'ArrowDown')
                 return;
             e.preventDefault();
-            const current = parseFloat(_val) || 0;
-            setVal(e.key === 'ArrowUp' ? current + 1 : current - 1);
+            const current = parseFloat(props.value) || 0;
+            e.target.value = e.key === 'ArrowUp' ? current + 1 : current - 1;
+            (props === null || props === void 0 ? void 0 : props.onChange) && (props === null || props === void 0 ? void 0 : props.onChange(e));
+        }, onBlur: (e) => {
+            var _a;
+            const raw = e.target.value;
+            if (raw === "" || raw === ".")
+                return;
+            const num = parseFloat(raw);
+            if (!Number.isNaN(num)) {
+                (_a = props === null || props === void 0 ? void 0 : props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, Object.assign(Object.assign({}, e), { target: Object.assign(Object.assign({}, e.target), { value: num }) }));
+            }
         }, onChange: (e) => {
-            let val = e.target.value.replace(/[^0-9.]/g, '');
-            const parts = val.split('.');
-            if (parts.length > 2) {
-                val = parts[0] + '.' + parts.slice(1).join('');
+            var _a, _b;
+            let value = e.target.value;
+            if (value === "") {
+                (_a = props === null || props === void 0 ? void 0 : props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, e);
+                return;
             }
-            setVal(val === "." ? `0.` : val);
+            if (!/^\d*\.?\d*$/.test(value))
+                return;
+            if (value === ".")
+                value = "0.";
+            const nextEvent = Object.assign(Object.assign({}, e), { target: Object.assign(Object.assign({}, e.target), { value }) });
+            (_b = props === null || props === void 0 ? void 0 : props.onChange) === null || _b === void 0 ? void 0 : _b.call(props, nextEvent);
         } })));
 });
 

package/InputNumber/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/InputNumber/index.tsx"],"sourcesContent":["\"use client\"\nimport React, { useEffect, useRef, useState } from 'react'\nimport Input, { InputProps } from '../Input'\nimport UnfoldMore from '@xanui/icons/UnfoldMore'\nimport { useMergeRefs } from '@xanui/core'\n\nexport type InputNumberProps = Omit<InputProps, \"value\"> & {\n   value?: number; // allow string so typing \".\" works\n}\n\nconst InputNumber = React.forwardRef<HTMLInputElement, InputNumberProps>((props, ref) => {\n   const [_val, setVal] = useState<string>(props.value as any ?? \"\")\n   const inputRef = useRef<any>(null)\n   const mergeRef = useMergeRefs(inputRef, ref)\n   useEffect(() => {\n      if (inputRef.current && props?.onChange) {\n         let valstr = String(_val)\n         inputRef.current.value = valstr.includes(\".\") ? parseFloat(_val) : parseInt(_val)\n         const syntheticEvent = {\n            target: inputRef.current,\n            currentTarget: inputRef.current,\n         } as unknown as React.ChangeEvent<HTMLInputElement>;\n         props?.onChange(syntheticEvent)\n      }\n   }, [_val])\n\n   const isNumeric = _val === undefined || _val === '' || !isNaN(Number(_val));\n   const errorProps: Partial<InputProps> = {};\n   if (!isNumeric) {\n      errorProps.error = true;\n      errorProps.helperText = \"Value must be numeric\";\n   }\n\n   return (\n      <Input\n         {...props}\n         {...errorProps}\n         ref={mergeRef}\n         endIcon={<UnfoldMore />}\n         value={_val ?? \"\" as any}\n         onKeyDown={(e: any) => {\n            props.onKeyDown?.(e);\n\n            if (e.key !== 'ArrowUp' && e.key !== 'ArrowDown') return;\n\n            e.preventDefault();\n            const current = parseFloat(_val as any) || 0;\n            setVal(e.key === 'ArrowUp' ? current + 1 : current - 1 as any);\n         }}\n         onChange={(e) => {\n            let val: any = e.target.value.replace(/[^0-9.]/g, '')\n            const parts = val.split('.');\n            if (parts.length > 2) {\n               val = parts[0] + '.' + parts.slice(1).join('')\n            }\n            setVal(val === \".\" ? `0.` : val);\n         }}\n      />\n   );\n});\n\nexport default InputNumber;\n"],"names":[],"mappings":";;;;;;;;;AAUA;;AACG;AACA;;;AAGG;AACG;;AAEA;;;;;;AAMN;AAEA;;;AAGG;AACA;;AAGH;;AAQS;;;;;AAMA;AACH;AAEG;;AAEA;AACG;;AAEH;;AAIZ;;"}
+{"version":3,"file":"index.cjs","sources":["../../src/InputNumber/index.tsx"],"sourcesContent":["\"use client\"\nimport React, { useRef } from 'react'\nimport Input, { InputProps } from '../Input'\nimport UnfoldMore from '@xanui/icons/UnfoldMore'\nimport { useMergeRefs } from '@xanui/core'\n\nexport type InputNumberProps = Omit<InputProps, \"value\"> & {\n   value?: number | \"\";\n}\n\nconst InputNumber = React.forwardRef<HTMLInputElement, InputNumberProps>((props, ref) => {\n   const inputRef = useRef<any>(null)\n   const mergeRef = useMergeRefs(inputRef, ref)\n   const isNumeric = props.value === undefined || props.value === '' || !isNaN(Number(props.value));\n   const errorProps: Partial<InputProps> = {};\n   if (!isNumeric) {\n      errorProps.error = true;\n      errorProps.helperText = \"Value must be numeric\";\n   }\n\n   return (\n      <Input\n         {...props}\n         {...errorProps}\n         ref={mergeRef}\n         endIcon={<UnfoldMore />}\n         value={props.value ?? \"\" as any}\n         onKeyDown={(e: any) => {\n            props.onKeyDown?.(e);\n            if (e.key !== 'ArrowUp' && e.key !== 'ArrowDown') return;\n            e.preventDefault();\n            const current = parseFloat(props.value as any) || 0;\n            e.target.value = e.key === 'ArrowUp' ? current + 1 : current - 1 as any\n            props?.onChange && props?.onChange(e)\n\n         }}\n         onBlur={(e) => {\n            const raw = e.target.value\n            if (raw === \"\" || raw === \".\") return\n            const num = parseFloat(raw)\n            if (!Number.isNaN(num)) {\n               props?.onChange?.({\n                  ...e,\n                  target: { ...e.target, value: num },\n               } as any)\n            }\n         }}\n\n         onChange={(e) => {\n            let value = e.target.value\n            if (value === \"\") {\n               props?.onChange?.(e)\n               return\n            }\n\n            if (!/^\\d*\\.?\\d*$/.test(value)) return\n\n            if (value === \".\") value = \"0.\"\n            const nextEvent = {\n               ...e,\n               target: {\n                  ...e.target,\n                  value,\n               },\n            }\n\n            props?.onChange?.(nextEvent as any)\n         }}\n\n      />\n   );\n});\n\nexport default InputNumber;\n"],"names":[],"mappings":";;;;;;;;;AAUA;;AACG;;;;;AAKG;AACA;;AAGH;;AAQS;;;;;;AAKA;AAEH;;AAEG;AACA;;AACA;;;;AAOH;;AAGG;AACA;;;;AAKA;;;;AAGA;;;AAaZ;;"}

package/InputNumber/index.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import { InputProps } from '../Input/index.js';
 
 type InputNumberProps = Omit<InputProps, "value"> & {
-    value?: number;
+    value?: number | "";
 };
 declare const InputNumber: React.ForwardRefExoticComponent<Omit<InputNumberProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
 

package/InputNumber/index.js

@@ -1,47 +1,51 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
-import React, { useState, useRef, useEffect } from 'react';
+import React, { useRef } from 'react';
 import Input from '../Input/index.js';
 import UnfoldMore from '@xanui/icons/UnfoldMore';
 import { useMergeRefs } from '@xanui/core';
 
 const InputNumber = React.forwardRef((props, ref) => {
     var _a;
-    const [_val, setVal] = useState((_a = props.value) !== null && _a !== void 0 ? _a : "");
     const inputRef = useRef(null);
     const mergeRef = useMergeRefs(inputRef, ref);
-    useEffect(() => {
-        if (inputRef.current && (props === null || props === void 0 ? void 0 : props.onChange)) {
-            let valstr = String(_val);
-            inputRef.current.value = valstr.includes(".") ? parseFloat(_val) : parseInt(_val);
-            const syntheticEvent = {
-                target: inputRef.current,
-                currentTarget: inputRef.current,
-            };
-            props === null || props === void 0 ? void 0 : props.onChange(syntheticEvent);
-        }
-    }, [_val]);
-    const isNumeric = _val === undefined || _val === '' || !isNaN(Number(_val));
+    const isNumeric = props.value === undefined || props.value === '' || !isNaN(Number(props.value));
     const errorProps = {};
     if (!isNumeric) {
         errorProps.error = true;
         errorProps.helperText = "Value must be numeric";
     }
-    return (jsx(Input, Object.assign({}, props, errorProps, { ref: mergeRef, endIcon: jsx(UnfoldMore, {}), value: _val !== null && _val !== void 0 ? _val : "", onKeyDown: (e) => {
+    return (jsx(Input, Object.assign({}, props, errorProps, { ref: mergeRef, endIcon: jsx(UnfoldMore, {}), value: (_a = props.value) !== null && _a !== void 0 ? _a : "", onKeyDown: (e) => {
             var _a;
             (_a = props.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(props, e);
             if (e.key !== 'ArrowUp' && e.key !== 'ArrowDown')
                 return;
             e.preventDefault();
-            const current = parseFloat(_val) || 0;
-            setVal(e.key === 'ArrowUp' ? current + 1 : current - 1);
+            const current = parseFloat(props.value) || 0;
+            e.target.value = e.key === 'ArrowUp' ? current + 1 : current - 1;
+            (props === null || props === void 0 ? void 0 : props.onChange) && (props === null || props === void 0 ? void 0 : props.onChange(e));
+        }, onBlur: (e) => {
+            var _a;
+            const raw = e.target.value;
+            if (raw === "" || raw === ".")
+                return;
+            const num = parseFloat(raw);
+            if (!Number.isNaN(num)) {
+                (_a = props === null || props === void 0 ? void 0 : props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, Object.assign(Object.assign({}, e), { target: Object.assign(Object.assign({}, e.target), { value: num }) }));
+            }
         }, onChange: (e) => {
-            let val = e.target.value.replace(/[^0-9.]/g, '');
-            const parts = val.split('.');
-            if (parts.length > 2) {
-                val = parts[0] + '.' + parts.slice(1).join('');
+            var _a, _b;
+            let value = e.target.value;
+            if (value === "") {
+                (_a = props === null || props === void 0 ? void 0 : props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, e);
+                return;
             }
-            setVal(val === "." ? `0.` : val);
+            if (!/^\d*\.?\d*$/.test(value))
+                return;
+            if (value === ".")
+                value = "0.";
+            const nextEvent = Object.assign(Object.assign({}, e), { target: Object.assign(Object.assign({}, e.target), { value }) });
+            (_b = props === null || props === void 0 ? void 0 : props.onChange) === null || _b === void 0 ? void 0 : _b.call(props, nextEvent);
         } })));
 });
 

package/InputNumber/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/InputNumber/index.tsx"],"sourcesContent":["\"use client\"\nimport React, { useEffect, useRef, useState } from 'react'\nimport Input, { InputProps } from '../Input'\nimport UnfoldMore from '@xanui/icons/UnfoldMore'\nimport { useMergeRefs } from '@xanui/core'\n\nexport type InputNumberProps = Omit<InputProps, \"value\"> & {\n   value?: number; // allow string so typing \".\" works\n}\n\nconst InputNumber = React.forwardRef<HTMLInputElement, InputNumberProps>((props, ref) => {\n   const [_val, setVal] = useState<string>(props.value as any ?? \"\")\n   const inputRef = useRef<any>(null)\n   const mergeRef = useMergeRefs(inputRef, ref)\n   useEffect(() => {\n      if (inputRef.current && props?.onChange) {\n         let valstr = String(_val)\n         inputRef.current.value = valstr.includes(\".\") ? parseFloat(_val) : parseInt(_val)\n         const syntheticEvent = {\n            target: inputRef.current,\n            currentTarget: inputRef.current,\n         } as unknown as React.ChangeEvent<HTMLInputElement>;\n         props?.onChange(syntheticEvent)\n      }\n   }, [_val])\n\n   const isNumeric = _val === undefined || _val === '' || !isNaN(Number(_val));\n   const errorProps: Partial<InputProps> = {};\n   if (!isNumeric) {\n      errorProps.error = true;\n      errorProps.helperText = \"Value must be numeric\";\n   }\n\n   return (\n      <Input\n         {...props}\n         {...errorProps}\n         ref={mergeRef}\n         endIcon={<UnfoldMore />}\n         value={_val ?? \"\" as any}\n         onKeyDown={(e: any) => {\n            props.onKeyDown?.(e);\n\n            if (e.key !== 'ArrowUp' && e.key !== 'ArrowDown') return;\n\n            e.preventDefault();\n            const current = parseFloat(_val as any) || 0;\n            setVal(e.key === 'ArrowUp' ? current + 1 : current - 1 as any);\n         }}\n         onChange={(e) => {\n            let val: any = e.target.value.replace(/[^0-9.]/g, '')\n            const parts = val.split('.');\n            if (parts.length > 2) {\n               val = parts[0] + '.' + parts.slice(1).join('')\n            }\n            setVal(val === \".\" ? `0.` : val);\n         }}\n      />\n   );\n});\n\nexport default InputNumber;\n"],"names":[],"mappings":";;;;;;;AAUA;;AACG;AACA;;;AAGG;AACG;;AAEA;;;;;;AAMN;AAEA;;;AAGG;AACA;;AAGH;;AAQS;;;;;AAMA;AACH;AAEG;;AAEA;AACG;;AAEH;;AAIZ;;"}
+{"version":3,"file":"index.js","sources":["../../src/InputNumber/index.tsx"],"sourcesContent":["\"use client\"\nimport React, { useRef } from 'react'\nimport Input, { InputProps } from '../Input'\nimport UnfoldMore from '@xanui/icons/UnfoldMore'\nimport { useMergeRefs } from '@xanui/core'\n\nexport type InputNumberProps = Omit<InputProps, \"value\"> & {\n   value?: number | \"\";\n}\n\nconst InputNumber = React.forwardRef<HTMLInputElement, InputNumberProps>((props, ref) => {\n   const inputRef = useRef<any>(null)\n   const mergeRef = useMergeRefs(inputRef, ref)\n   const isNumeric = props.value === undefined || props.value === '' || !isNaN(Number(props.value));\n   const errorProps: Partial<InputProps> = {};\n   if (!isNumeric) {\n      errorProps.error = true;\n      errorProps.helperText = \"Value must be numeric\";\n   }\n\n   return (\n      <Input\n         {...props}\n         {...errorProps}\n         ref={mergeRef}\n         endIcon={<UnfoldMore />}\n         value={props.value ?? \"\" as any}\n         onKeyDown={(e: any) => {\n            props.onKeyDown?.(e);\n            if (e.key !== 'ArrowUp' && e.key !== 'ArrowDown') return;\n            e.preventDefault();\n            const current = parseFloat(props.value as any) || 0;\n            e.target.value = e.key === 'ArrowUp' ? current + 1 : current - 1 as any\n            props?.onChange && props?.onChange(e)\n\n         }}\n         onBlur={(e) => {\n            const raw = e.target.value\n            if (raw === \"\" || raw === \".\") return\n            const num = parseFloat(raw)\n            if (!Number.isNaN(num)) {\n               props?.onChange?.({\n                  ...e,\n                  target: { ...e.target, value: num },\n               } as any)\n            }\n         }}\n\n         onChange={(e) => {\n            let value = e.target.value\n            if (value === \"\") {\n               props?.onChange?.(e)\n               return\n            }\n\n            if (!/^\\d*\\.?\\d*$/.test(value)) return\n\n            if (value === \".\") value = \"0.\"\n            const nextEvent = {\n               ...e,\n               target: {\n                  ...e.target,\n                  value,\n               },\n            }\n\n            props?.onChange?.(nextEvent as any)\n         }}\n\n      />\n   );\n});\n\nexport default InputNumber;\n"],"names":[],"mappings":";;;;;;;AAUA;;AACG;;;;;AAKG;AACA;;AAGH;;AAQS;;;;;;AAKA;AAEH;;AAEG;AACA;;AACA;;;;AAOH;;AAGG;AACA;;;;AAKA;;;;AAGA;;;AAaZ;;"}

package/Select/index.cjs

@@ -52,7 +52,7 @@ const Select = React.forwardRef((_a, ref) => {
                     if (conRef.current.contains(e.target))
                         return;
                     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 === "outline" ? "fill" : variant, maxHeight: window.innerHeight - 50, overflow: "auto", children: childs })) }))] }));
+                }, 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 === "outline" ? "fill" : variant, maxHeight: typeof window === "undefined" ? "auto" : (window === null || window === void 0 ? void 0 : window.innerHeight) - 50, overflow: "auto", children: childs })) }))] }));
 });
 
 module.exports = Select;

package/Select/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","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 { useInterface, useMergeRefs } from '@xanui/core'\n\n\nexport type SelectProps = Omit<InputProps, \"onChange\" | \"value\" | \"children\" | \"slotProps\"> & {\n    value?: string | number;\n    onChange?: (value: string | number) => void;\n    children: ReactElement<OptionProps> | ReactElement<OptionProps>[];\n\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, error, helperText, name, refs, ...props }: SelectProps, ref: React.Ref<any>) => {\n    let [{ slotProps, color, variant, ...inputProps }] = 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                error={error}\n                helperText={helperText}\n                name={name}\n                {...slotProps?.input}\n                {...inputProps}\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: () => {\n                            if (!target) {\n                                toggleMenu()\n                            }\n                        },\n                    }\n                }}\n            />\n            <Menu\n                ref={refs?.menu}\n                target={target}\n                placement=\"bottom-left\"\n                {...slotProps?.menu}\n                slotProps={{\n                    ...slotProps?.menu?.slotProps,\n                    content: {\n                        mt: .5,\n                        ...slotProps?.menu?.content,\n                        width: conRef && (conRef?.current as any)?.clientWidth,\n                    }\n                }}\n                onClickOutside={(e) => {\n                    if ((conRef.current as any).contains(e.target)) return;\n                    toggleMenu()\n                }}\n            >\n                <List\n                    ref={refs?.list}\n                    {...slotProps?.list}\n                    color={color}\n                    variant={variant === \"outline\" ? \"fill\" : variant}\n                    maxHeight={window.innerHeight - 50}\n                    overflow={\"auto\"}\n                >\n                    {childs}\n                </List>\n            </Menu>\n        </>\n    )\n})\n\nexport default Select"],"names":[],"mappings":";;;;;;;;;;;;;;AA8BA;;AAAiC;;;;;AAK7B;;;;;AAKQ;AAAc;;AAEV;;;;;;AAMH;AACL;;AAEI;AACA;;AAER;;AAGA;AAEA;AAuBgB;;AAMY;;AAER;AAEP;;;AAiBG;;AAgBpB;;"}
+{"version":3,"file":"index.cjs","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 { useInterface, useMergeRefs } from '@xanui/core'\n\n\nexport type SelectProps = Omit<InputProps, \"onChange\" | \"value\" | \"children\" | \"slotProps\"> & {\n    value?: string | number;\n    onChange?: (value: string | number) => void;\n    children: ReactElement<OptionProps> | ReactElement<OptionProps>[];\n\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, error, helperText, name, refs, ...props }: SelectProps, ref: React.Ref<any>) => {\n    let [{ slotProps, color, variant, ...inputProps }] = 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                error={error}\n                helperText={helperText}\n                name={name}\n                {...slotProps?.input}\n                {...inputProps}\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: () => {\n                            if (!target) {\n                                toggleMenu()\n                            }\n                        },\n                    }\n                }}\n            />\n            <Menu\n                ref={refs?.menu}\n                target={target}\n                placement=\"bottom-left\"\n                {...slotProps?.menu}\n                slotProps={{\n                    ...slotProps?.menu?.slotProps,\n                    content: {\n                        mt: .5,\n                        ...slotProps?.menu?.content,\n                        width: conRef && (conRef?.current as any)?.clientWidth,\n                    }\n                }}\n                onClickOutside={(e) => {\n                    if ((conRef.current as any).contains(e.target)) return;\n                    toggleMenu()\n                }}\n            >\n                <List\n                    ref={refs?.list}\n                    {...slotProps?.list}\n                    color={color}\n                    variant={variant === \"outline\" ? \"fill\" : variant}\n                    maxHeight={typeof window === \"undefined\" ? \"auto\" : window?.innerHeight - 50}\n                    overflow={\"auto\"}\n                >\n                    {childs}\n                </List>\n            </Menu>\n        </>\n    )\n})\n\nexport default Select"],"names":[],"mappings":";;;;;;;;;;;;;;AA8BA;;AAAiC;;;;;AAK7B;;;;;AAKQ;AAAc;;AAEV;;;;;;AAMH;AACL;;AAEI;AACA;;AAER;;AAGA;AAEA;AAuBgB;;AAMY;;AAER;AAEP;;;AAiBG;AACJ;AAehB;;"}

package/Select/index.js

@@ -50,7 +50,7 @@ const Select = React.forwardRef((_a, ref) => {
                     if (conRef.current.contains(e.target))
                         return;
                     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 === "outline" ? "fill" : variant, maxHeight: window.innerHeight - 50, overflow: "auto", children: childs })) }))] }));
+                }, 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 === "outline" ? "fill" : variant, maxHeight: typeof window === "undefined" ? "auto" : (window === null || window === void 0 ? void 0 : window.innerHeight) - 50, overflow: "auto", children: childs })) }))] }));
 });
 
 export { Select as default };

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 { useInterface, useMergeRefs } from '@xanui/core'\n\n\nexport type SelectProps = Omit<InputProps, \"onChange\" | \"value\" | \"children\" | \"slotProps\"> & {\n    value?: string | number;\n    onChange?: (value: string | number) => void;\n    children: ReactElement<OptionProps> | ReactElement<OptionProps>[];\n\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, error, helperText, name, refs, ...props }: SelectProps, ref: React.Ref<any>) => {\n    let [{ slotProps, color, variant, ...inputProps }] = 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                error={error}\n                helperText={helperText}\n                name={name}\n                {...slotProps?.input}\n                {...inputProps}\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: () => {\n                            if (!target) {\n                                toggleMenu()\n                            }\n                        },\n                    }\n                }}\n            />\n            <Menu\n                ref={refs?.menu}\n                target={target}\n                placement=\"bottom-left\"\n                {...slotProps?.menu}\n                slotProps={{\n                    ...slotProps?.menu?.slotProps,\n                    content: {\n                        mt: .5,\n                        ...slotProps?.menu?.content,\n                        width: conRef && (conRef?.current as any)?.clientWidth,\n                    }\n                }}\n                onClickOutside={(e) => {\n                    if ((conRef.current as any).contains(e.target)) return;\n                    toggleMenu()\n                }}\n            >\n                <List\n                    ref={refs?.list}\n                    {...slotProps?.list}\n                    color={color}\n                    variant={variant === \"outline\" ? \"fill\" : variant}\n                    maxHeight={window.innerHeight - 50}\n                    overflow={\"auto\"}\n                >\n                    {childs}\n                </List>\n            </Menu>\n        </>\n    )\n})\n\nexport default Select"],"names":[],"mappings":";;;;;;;;;;;;AA8BA;;AAAiC;;;;;AAK7B;;;;;AAKQ;AAAc;;AAEV;;;;;;AAMH;AACL;;AAEI;AACA;;AAER;;AAGA;AAEA;AAuBgB;;AAMY;;AAER;AAEP;;;AAiBG;;AAgBpB;;"}
+{"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 { useInterface, useMergeRefs } from '@xanui/core'\n\n\nexport type SelectProps = Omit<InputProps, \"onChange\" | \"value\" | \"children\" | \"slotProps\"> & {\n    value?: string | number;\n    onChange?: (value: string | number) => void;\n    children: ReactElement<OptionProps> | ReactElement<OptionProps>[];\n\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, error, helperText, name, refs, ...props }: SelectProps, ref: React.Ref<any>) => {\n    let [{ slotProps, color, variant, ...inputProps }] = 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                error={error}\n                helperText={helperText}\n                name={name}\n                {...slotProps?.input}\n                {...inputProps}\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: () => {\n                            if (!target) {\n                                toggleMenu()\n                            }\n                        },\n                    }\n                }}\n            />\n            <Menu\n                ref={refs?.menu}\n                target={target}\n                placement=\"bottom-left\"\n                {...slotProps?.menu}\n                slotProps={{\n                    ...slotProps?.menu?.slotProps,\n                    content: {\n                        mt: .5,\n                        ...slotProps?.menu?.content,\n                        width: conRef && (conRef?.current as any)?.clientWidth,\n                    }\n                }}\n                onClickOutside={(e) => {\n                    if ((conRef.current as any).contains(e.target)) return;\n                    toggleMenu()\n                }}\n            >\n                <List\n                    ref={refs?.list}\n                    {...slotProps?.list}\n                    color={color}\n                    variant={variant === \"outline\" ? \"fill\" : variant}\n                    maxHeight={typeof window === \"undefined\" ? \"auto\" : window?.innerHeight - 50}\n                    overflow={\"auto\"}\n                >\n                    {childs}\n                </List>\n            </Menu>\n        </>\n    )\n})\n\nexport default Select"],"names":[],"mappings":";;;;;;;;;;;;AA8BA;;AAAiC;;;;;AAK7B;;;;;AAKQ;AAAc;;AAEV;;;;;;AAMH;AACL;;AAEI;AACA;;AAER;;AAGA;AAEA;AAuBgB;;AAMY;;AAER;AAEP;;;AAiBG;AACJ;AAehB;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xanui/ui",
-  "version": "1.1.62",
+  "version": "1.1.64",
   "description": "Xanui - A React Component Library",
   "private": false,
   "dependencies": {