x-ui-design 1.0.12 → 1.0.15

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

@@ -2,10 +2,14 @@ import React from 'react';
 import { InputProps } from '../../types/input';
 import Textarea from './Textarea/Textarea';
 import './style.css';
-declare const InputComponent: {
-    ({ size, error, suffix, prefix, addonAfter, addonBefore, onPressEnter, disabled, allowClear, prefixCls, prefixClsV3, className, value, iconRender, noStyle, feedbackIcons, mask, maskChar, maskRegex, __injected, defaultValue, child, ref, ...props }: InputProps): React.JSX.Element;
-    displayName: string;
-};
+interface InputHandle {
+    focus: () => void;
+    input: HTMLInputElement | null;
+    blur: () => void;
+    nativeElement: HTMLInputElement | null;
+    setSelectionRange: (start: number, end: number) => void;
+}
+declare const InputComponent: React.ForwardRefExoticComponent<Omit<InputProps, "ref"> & React.RefAttributes<InputHandle>>;
 declare const Input: typeof InputComponent & {
     TextArea: typeof Textarea;
 };

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

@@ -9,7 +9,7 @@ declare const RangePicker: import("react").ComponentType<import("@/types/datepic
 declare const TimePicker: import("react").ComponentType<import("@/types/datepicker").TimePickerProps>;
 declare const Form: import("react").ComponentType<import("@/types/form").FormProps>;
 declare const FormItem: import("react").ComponentType<import("@/types/form").FormItemProps>;
-declare const Input: import("react").ComponentType<import("@/types/input").InputProps>;
+declare const Input: typeof import("@/components/Input/Input").default;
 declare const Textarea: import("react").ComponentType<import("@/types/input").TextareaProps>;
 declare const Radio: import("react").ComponentType<import("@/types/radio").RadioProps>;
 declare const RadioButton: import("react").ComponentType<import("@/types/radio").RadioButtonProps>;

package/dist/index.d.ts

@@ -14,6 +14,7 @@ import * as __types_radio from '@/types/radio';
 export { RadioButtonProps, RadioGroupProps, RadioProps } from '@/types/radio';
 import * as __types_input from '@/types/input';
 export { InputProps, TextareaProps } from '@/types/input';
+import * as __components_Input_Input from '@/components/Input/Input';
 import * as __types_form from '@/types/form';
 export { FieldData, FieldError, FieldInstancesInputRef, FormInstance, FormItemChildComponentProps, FormProps, RuleObject, RuleRender } from '@/types/form';
 import * as __types_datepicker from '@/types/datepicker';
@@ -122,7 +123,7 @@ declare const RangePicker: react.ComponentType<__types_datepicker.TRangePickerPr
 declare const TimePicker: react.ComponentType<__types_datepicker.TimePickerProps>;
 declare const Form: react.ComponentType<__types_form.FormProps>;
 declare const FormItem: react.ComponentType<__types_form.FormItemProps>;
-declare const Input: react.ComponentType<__types_input.InputProps>;
+declare const Input: typeof __components_Input_Input.default;
 declare const Textarea: react.ComponentType<__types_input.TextareaProps>;
 declare const Radio: react.ComponentType<__types_radio.RadioProps>;
 declare const RadioButton: react.ComponentType<__types_radio.RadioButtonProps>;

package/dist/index.esm.js

@@ -3848,7 +3848,7 @@ function applyMask(raw, mask, maskChar = MASK_CHAR) {
 var css_248z$f = ".xUi-input-container{align-items:center;background-color:transparent;border:1px solid var(--xui-border-color);border-radius:var(--xui-border-radius-sm);display:flex;overflow:hidden}.xUi-input-container:not(.xUi-input-error):not(.xUi-input-disabled):has(.xUi-input):hover,.xUi-input-container:not(.xUi-input-error):not(.xUi-input-disabled):has(.xUi-input:focus){border:1px solid var(--xui-primary-color)}.xUi-input-container.xUi-input-error{border-color:var(--xui-error-color)}.xUi-input-container.xUi-input-error .error-svg-icon,.xUi-input-suffix .error-svg-icon{color:var(--xui-error-color)}.xUi-input-wrapper{align-items:center;display:flex;flex-grow:1;position:relative;transition:border .3s}.xUi-input,.xUi-input-wrapper{background-color:transparent;height:-webkit-fill-available}.xUi-input{border:none;color:var(--xui-text-color);flex:1;outline:none;padding:.1px 7px;width:100%}.xUi-input:placeholder-shown{text-overflow:ellipsis}.xUi-input::placeholder{color:var(--xui-text-color);opacity:.6}.xUi-input-prefix,.xUi-input-suffix{background-color:transparent;gap:4px}.xUi-input-addon,.xUi-input-prefix,.xUi-input-suffix{align-items:center;color:var(--xui-text-color);display:flex;height:-webkit-fill-available;padding:0 7px}.xUi-input-addon.xUi-input-after{border-left:1px solid var(--xui-border-color)}.xUi-input-addon.xUi-input-before{border-right:1px solid var(--xui-border-color)}.xUi-input-large .xUi-input-addon{padding:0 10px}.xUi-input-clear{align-items:center;cursor:pointer;display:flex;margin:0 5px;position:relative;width:16px}.xUi-input-clear svg{color:var(--xui-text-color)}.xUi-input-disabled,.xUi-input-disabled .xUi-input,.xUi-input-disabled .xUi-input-suffix{background-color:var(--xui-color-disabled);cursor:not-allowed}.xUi-input-small{height:22px}.xUi-input-large .xUi-input-clear,.xUi-input-small .xUi-input,.xUi-input-small .xUi-input::placeholder{font-size:var(--xui-font-size-md)}.xUi-input-middle{border-radius:var(--xui-border-radius-md);height:30px}.xUi-input-large .xUi-input-clear,.xUi-input-middle .xUi-input,.xUi-input-middle .xUi-input::placeholder{font-size:var(--xui-font-size-md)}.xUi-input-large{border-radius:var(--xui-border-radius-lg);height:44px}.xUi-input-large .xUi-input,.xUi-input-large .xUi-input-clear,.xUi-input-large .xUi-input::placeholder{font-size:var(--xui-font-size-lg)}";
 styleInject(css_248z$f);
 
-const InputComponent = ({
+const InputComponent = /*#__PURE__*/React.forwardRef(({
   size = 'large',
   error,
   suffix,
@@ -3876,9 +3876,8 @@ const InputComponent = ({
   defaultValue,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   child,
-  ref,
   ...props
-}) => {
+}, ref) => {
   const inputRef = useRef(null);
   const lastKeyPressed = useRef(null);
   const internalValue = mask ? applyMask(stripMask(`${value ?? ''}`, mask, maskChar), mask, maskChar).masked : value ?? '';
@@ -3886,18 +3885,20 @@ const InputComponent = ({
   const [iconRenderVisible, setIconRenderVisible] = useState(false);
   const animationRef = useRef(null);
   useImperativeHandle(ref, () => ({
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-expect-error
-    focus: inputRef.current?.focus,
+    focus: () => {
+      inputRef.current?.focus();
+    },
     input: inputRef.current,
-    blur: inputRef.current.blur,
+    blur: () => {
+      inputRef.current?.blur();
+    },
     nativeElement: inputRef.current,
     setSelectionRange: (start, end) => {
       if (inputRef.current) {
         inputRef.current.setSelectionRange(start, end);
       }
     }
-  }));
+  }), []);
   useEffect(() => {
     setMaskValue(mask ? applyMask(stripMask(`${value ?? ''}`, mask, maskChar), mask, maskChar).masked : value ?? '');
   }, [value, mask, maskChar]);
@@ -3989,7 +3990,7 @@ const InputComponent = ({
   } : {}), suffix || iconRender?.(iconRenderVisible), error && feedbackIcons ? /*#__PURE__*/React.createElement(ErrorIcon, null) : null)), addonAfter ? /*#__PURE__*/React.createElement("span", {
     className: `${prefixCls}-addon ${prefixCls}-after ${prefixClsV3}-addon ${prefixClsV3}-after`
   }, addonAfter) : null);
-};
+});
 InputComponent.displayName = 'Input';
 const Input$1 = InputComponent;
 Input$1.TextArea = Textarea;
@@ -4169,7 +4170,7 @@ var Group = /*#__PURE__*/Object.freeze({
 	default: RadioGroup
 });
 
-var css_248z$b = ".xUi-select-options{list-style:none;margin:0;padding:4px}.xUi-select-option,.xUi-select-options{border-radius:var(--xui-border-radius-sm)}.xUi-select-option{align-items:center;color:var(--xui-text-color);cursor:pointer;display:flex;font-size:var(--xui-font-size-md);margin-bottom:2px;padding:8px 16px}.xUi-select-option.xUi-select-focused,.xUi-select-option:hover{background-color:var(--xui-primary-color);color:var(--xui-background-color)}.xUi-select-option.xUi-select-focused{align-items:center;display:flex;font-weight:600;justify-content:space-between}.xUi-select-option.xUi-select-disabled{color:rgba(0,0,0,.25);cursor:not-allowed}.xUi-select-option.selected{background-color:var(--xui-primary-color);color:var(--xui-background-color)}.xUi-select-option.selected:hover{background-color:var(--xui-primary-color-light)}";
+var css_248z$b = ".xUi-select-options{list-style:none;margin:0;padding:4px}.xUi-select-option,.xUi-select-options{border-radius:var(--xui-border-radius-sm)}.xUi-select-option{align-items:center;color:var(--xui-text-color);cursor:pointer;display:flex;font-size:var(--xui-font-size-md);margin-bottom:2px;padding:8px 16px;&[tabindex=\"0\"]:focus-visible{background-color:var(--xui-primary-color);color:var(--xui-background-color)}}.xUi-select-option.xUi-select-focused,.xUi-select-option:hover{background-color:var(--xui-primary-color);color:var(--xui-background-color)}.xUi-select-option.xUi-select-focused{align-items:center;display:flex;font-weight:600;justify-content:space-between}.xUi-select-option.xUi-select-disabled{color:rgba(0,0,0,.25);cursor:not-allowed}.xUi-select-option.selected{background-color:var(--xui-primary-color);color:var(--xui-background-color)}.xUi-select-option.selected:hover{background-color:var(--xui-primary-color-light)}";
 styleInject(css_248z$b);
 
 const Option = ({
@@ -4192,6 +4193,8 @@ const Option = ({
     onClick?.(e);
   };
   return /*#__PURE__*/React.createElement("div", _extends({
+    tabIndex: 0,
+    role: "button",
     className: clsx([`${prefixCls}-option ${prefixClsV3}-option ${className} `, {
       selected: selected,
       disabled: disabled