@laser-ui/components 0.6.5 → 0.6.6

package/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.6.6](https://github.com/laser-ui/laser-ui/compare/v0.6.5...v0.6.6) (2024-06-14)
+
+### Features
+
+- **components:** emit change after IME composition ends ([1f80404](https://github.com/laser-ui/laser-ui/commit/1f80404d037c74bd125ca0415c79f0542b6b4ce1))
+
 ## [0.6.5](https://github.com/laser-ui/laser-ui/compare/v0.6.4...v0.6.5) (2024-06-11)
 
 ### Bug Fixes

package/base-input/BaseInput.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { BaseInputProps } from './types';
+export declare const BaseInput: import("react").ForwardRefExoticComponent<BaseInputProps & import("react").RefAttributes<HTMLInputElement>>;

package/base-input/BaseInput.js

@@ -0,0 +1,27 @@
+import { __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { isString } from 'lodash';
+import { forwardRef, useState } from 'react';
+export const BaseInput = forwardRef((props, ref) => {
+    const { value, onValueChange } = props, restProps = __rest(props, ["value", "onValueChange"]);
+    const [composing, setComposing] = useState();
+    return (_jsx("input", Object.assign({}, restProps, { ref: ref, value: isString(composing) ? composing : value, onCompositionStart: (e) => {
+            var _a;
+            (_a = restProps.onCompositionStart) === null || _a === void 0 ? void 0 : _a.call(restProps, e);
+            setComposing(e.currentTarget.value);
+        }, onCompositionEnd: (e) => {
+            var _a;
+            (_a = restProps.onCompositionEnd) === null || _a === void 0 ? void 0 : _a.call(restProps, e);
+            setComposing(undefined);
+            onValueChange(e.currentTarget.value);
+        }, onChange: (e) => {
+            var _a;
+            (_a = restProps.onChange) === null || _a === void 0 ? void 0 : _a.call(restProps, e);
+            if (isString(composing)) {
+                setComposing(e.currentTarget.value);
+            }
+            else {
+                onValueChange(e.currentTarget.value);
+            }
+        } })));
+});

package/base-input/index.d.ts

@@ -0,0 +1,2 @@
+export type { BaseInputProps } from './types';
+export { BaseInput } from './BaseInput';

package/base-input/index.js

@@ -0,0 +1 @@
+export { BaseInput } from './BaseInput';

package/base-input/types.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export {};
+export interface BaseInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    onValueChange: (val: string) => void;
+}

package/base-input/types.js

@@ -0,0 +1 @@
+export {};

package/cascader/Cascader.js

@@ -11,6 +11,7 @@ import { createElement, forwardRef, useId, useImperativeHandle, useMemo, useRef,
 import { CascaderPanel } from './internal/CascaderPanel';
 import { CascaderSearchPanel } from './internal/CascaderSearchPanel';
 import { CLASSES } from './vars';
+import { BaseInput } from '../base-input';
 import { Dropdown } from '../dropdown';
 import { useComponentProps, useControlled, useDesign, useFocusVisible, useJSS, useLayout, useListenGlobalScrolling, useMaxIndex, useNamespace, useScopedProps, useStyled, useTranslation, } from '../hooks';
 import { Icon } from '../icon';
@@ -217,7 +218,7 @@ function CascaderFC(props, ref) {
     const scrollCallback = useRef();
     const inputable = searchable && visible;
     const clearable = clearableProp && hasSelected && !visible && !loading && !disabled;
-    const inputNode = focusVisibleWrapper(createElement(searchable ? 'input' : 'div', Object.assign(Object.assign(Object.assign(Object.assign({}, mergeCS(styled('cascader__search'), {
+    const inputNode = focusVisibleWrapper(createElement(searchable ? BaseInput : 'div', Object.assign(Object.assign(Object.assign(Object.assign({}, mergeCS(styled('cascader__search'), {
         style: {
             opacity: inputable ? undefined : 0,
             zIndex: inputable ? undefined : -1,
@@ -338,16 +339,15 @@ function CascaderFC(props, ref) {
                     }
                 }
             }
-        }, onChange: (e) => {
-            if (searchable) {
-                changeSearchValue(e.currentTarget.value);
-            }
         } }), searchable
         ? {
             type: 'text',
             value: searchValue,
             autoComplete: 'off',
             disabled,
+            onValueChange: (val) => {
+                changeSearchValue(val);
+            },
         }
         : {})));
     const [selectedNode, suffixNode, selectedLabel] = (() => {

package/date-picker/DatePicker.js

@@ -9,6 +9,7 @@ import { isArray, isBoolean, isNull, isUndefined } from 'lodash';
 import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
 import { DatePickerPanel } from './internal/DatePickerPanel';
 import { CLASSES } from './vars';
+import { BaseInput } from '../base-input';
 import { Button } from '../button';
 import dayjs from '../dayjs';
 import { useComponentProps, useControlled, useDesign, useJSS, useLayout, useListenGlobalScrolling, useMaxIndex, useNamespace, useScopedProps, useStyled, useTranslation, } from '../hooks';
@@ -203,11 +204,11 @@ export const DatePicker = forwardRef((props, ref) => {
         const index = isLeft ? 0 : 1;
         const value = isLeft ? valueLeft : valueRight;
         const render = inputRender === null || inputRender === void 0 ? void 0 : inputRender[index];
-        const node = (_jsx("input", Object.assign({}, styled('date-picker__input'), formControl === null || formControl === void 0 ? void 0 : formControl.inputAria, { ref: isLeft ? combineInputLeftRef : combineInputRightRef, type: "text", autoComplete: "off", value: inputValue[index], size: 22, placeholder: isLeft ? placeholderLeft : placeholderRight, disabled: disabled, onChange: (e) => {
+        const node = (_jsx(BaseInput, Object.assign({}, styled('date-picker__input'), formControl === null || formControl === void 0 ? void 0 : formControl.inputAria, { ref: isLeft ? combineInputLeftRef : combineInputRightRef, type: "text", autoComplete: "off", value: inputValue[index], size: 22, placeholder: isLeft ? placeholderLeft : placeholderRight, disabled: disabled, onValueChange: (val) => {
                 forceUpdate();
-                dataRef.current.inputValue[index] = e.currentTarget.value;
-                if (dayjs(e.currentTarget.value, format, true).isValid()) {
-                    const date = dayjs(e.currentTarget.value, format).toDate();
+                dataRef.current.inputValue[index] = val;
+                if (dayjs(val, format, true).isValid()) {
+                    const date = dayjs(val, format).toDate();
                     changeValue(date);
                     updatePanel(date);
                 }

package/input/Input.js

@@ -8,6 +8,7 @@ import VisibilityOffOutlined from '@material-design-icons/svg/outlined/visibilit
 import { useRef } from 'react';
 import { InputNumber } from './InputNumber';
 import { CLASSES } from './vars';
+import { BaseInput } from '../base-input';
 import { useComponentProps, useControlled, useDesign, useScopedProps, useStyled, useTranslation } from '../hooks';
 import { Icon } from '../icon';
 import { mergeCS } from '../utils';
@@ -26,8 +27,8 @@ export const Input = (props) => {
         }
     };
     const designProps = useDesign({ compose: { disabled }, form: formControl });
-    const inputNode = (_jsx("input", Object.assign({}, styled('input__input'), formControl === null || formControl === void 0 ? void 0 : formControl.inputAria, { ref: combineInputRef, value: value, type: type === 'password' ? (password ? 'password' : 'text') : type, placeholder: placeholder, disabled: disabled, onChange: (e) => {
-            changeValue(e.currentTarget.value);
+    const inputNode = (_jsx(BaseInput, Object.assign({}, styled('input__input'), formControl === null || formControl === void 0 ? void 0 : formControl.inputAria, { ref: combineInputRef, value: value, type: type === 'password' ? (password ? 'password' : 'text') : type, placeholder: placeholder, disabled: disabled, onValueChange: (val) => {
+            changeValue(val);
         } })));
     return (_jsxs("div", Object.assign({}, restProps, mergeCS(styled('input', `input--${size}`, {
         'input.is-disabled': disabled,

package/input/InputNumber.js

@@ -8,6 +8,7 @@ import KeyboardArrowUpOutlined from '@material-design-icons/svg/outlined/keyboar
 import { isNull, isUndefined } from 'lodash';
 import { useRef } from 'react';
 import { CLASSES } from './vars';
+import { BaseInput } from '../base-input';
 import { useComponentProps, useControlled, useDesign, useScopedProps, useStyled, useTranslation } from '../hooks';
 import { Icon } from '../icon';
 import { mergeCS } from '../utils';
@@ -68,16 +69,16 @@ export function InputNumber(props) {
         }
     };
     const designProps = useDesign({ compose: { disabled }, form: formControl });
-    const inputNode = (_jsx("input", Object.assign({}, styled('input__input'), formControl === null || formControl === void 0 ? void 0 : formControl.inputAria, { ref: combineInputRef, value: inputValue, max: max, min: min, step: step, type: "number", placeholder: placeholder, disabled: disabled, onChange: (e) => {
+    const inputNode = (_jsx(BaseInput, Object.assign({}, styled('input__input'), formControl === null || formControl === void 0 ? void 0 : formControl.inputAria, { ref: combineInputRef, value: inputValue, max: max, min: min, step: step, type: "number", placeholder: placeholder, disabled: disabled, onValueChange: (val) => {
             forceUpdate();
-            dataRef.current.inputValue = e.currentTarget.value;
-            if (e.currentTarget.value.length === 0) {
+            dataRef.current.inputValue = val;
+            if (val.length === 0) {
                 changeValue(null);
             }
             else {
-                const val = Number(e.currentTarget.value);
-                if ((isUndefined(max) || val <= max) && (isUndefined(min) || val >= min) && (!integer || Number.isInteger(val))) {
-                    changeValue(val);
+                const num = Number(val);
+                if ((isUndefined(max) || num <= max) && (isUndefined(min) || num >= min) && (!integer || Number.isInteger(num))) {
+                    changeValue(num);
                 }
             }
         }, onFocus: () => {
@@ -89,17 +90,17 @@ export function InputNumber(props) {
                 changeValue(null);
             }
             else {
-                let val = Number(inputValue);
-                if (!isUndefined(max) && val > max) {
-                    val = max;
+                let num = Number(inputValue);
+                if (!isUndefined(max) && num > max) {
+                    num = max;
                 }
-                if (!isUndefined(min) && val < min) {
-                    val = min;
+                if (!isUndefined(min) && num < min) {
+                    num = min;
                 }
-                if (integer && !Number.isInteger(val)) {
-                    val = Math.round(val);
+                if (integer && !Number.isInteger(num)) {
+                    num = Math.round(num);
                 }
-                changeValue(val);
+                changeValue(num);
             }
         } })));
     return (_jsxs("div", Object.assign({}, restProps, mergeCS(styled('input', `input--${size}`, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@laser-ui/components",
-  "version": "0.6.5",
+  "version": "0.6.6",
   "description": "React components.",
   "keywords": [
     "ui",
@@ -40,5 +40,5 @@
     "access": "public",
     "directory": "../../dist/libs/components"
   },
-  "gitHead": "4a94e6ec5bcfa6f04633956dd74c71203bb2e00f"
+  "gitHead": "406794ec6f5881cb567aa6c702beb109998ea997"
 }

package/select/Select.js

@@ -11,6 +11,7 @@ import SearchOutlined from '@material-design-icons/svg/outlined/search.svg?react
 import { isNull, isNumber, isUndefined } from 'lodash';
 import { createElement, forwardRef, useCallback, useId, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { CLASSES, IS_CREATED } from './vars';
+import { BaseInput } from '../base-input';
 import { Checkbox } from '../checkbox';
 import { Dropdown } from '../dropdown';
 import { Empty } from '../empty';
@@ -232,7 +233,7 @@ function SelectFC(props, ref) {
     const scrollCallback = useRef();
     const inputable = searchable && visible;
     const clearable = clearableProp && hasSelected && !visible && !loading && !disabled;
-    const inputNode = focusVisibleWrapper(createElement(searchable ? 'input' : 'div', Object.assign(Object.assign(Object.assign(Object.assign({}, mergeCS(styled('select__search'), {
+    const inputNode = focusVisibleWrapper(createElement(searchable ? BaseInput : 'div', Object.assign(Object.assign(Object.assign(Object.assign({}, mergeCS(styled('select__search'), {
         style: {
             opacity: inputable ? undefined : 0,
             zIndex: inputable ? undefined : -1,
@@ -352,16 +353,15 @@ function SelectFC(props, ref) {
                     }
                 }
             }
-        }, onChange: (e) => {
-            if (searchable) {
-                changeSearchValue(e.currentTarget.value);
-            }
         } }), searchable
         ? {
             type: 'text',
             value: searchValue,
             autoComplete: 'off',
             disabled,
+            onValueChange: (val) => {
+                changeSearchValue(val);
+            },
         }
         : {})));
     const [selectedNode, suffixNode, selectedLabel] = (() => {

package/time-picker/TimePicker.js

@@ -9,6 +9,7 @@ import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
 import { TimePickerPanel } from './internal/TimePickerPanel';
 import { deepCompareDate, orderTime } from './utils';
 import { CLASSES } from './vars';
+import { BaseInput } from '../base-input';
 import { Button } from '../button';
 import dayjs from '../dayjs';
 import { useComponentProps, useControlled, useDesign, useJSS, useLayout, useListenGlobalScrolling, useMaxIndex, useNamespace, useScopedProps, useStyled, useTranslation, } from '../hooks';
@@ -191,12 +192,12 @@ export const TimePicker = forwardRef((props, ref) => {
         const index = isLeft ? 0 : 1;
         const value = isLeft ? valueLeft : valueRight;
         const render = inputRender === null || inputRender === void 0 ? void 0 : inputRender[index];
-        const node = (_jsx("input", Object.assign({}, styled('time-picker__input'), formControl === null || formControl === void 0 ? void 0 : formControl.inputAria, { ref: isLeft ? combineInputLeftRef : combineInputRightRef, type: "text", autoComplete: "off", value: inputValue[index], size: 10, placeholder: isLeft ? placeholderLeft : placeholderRight, disabled: disabled, onChange: (e) => {
+        const node = (_jsx(BaseInput, Object.assign({}, styled('time-picker__input'), formControl === null || formControl === void 0 ? void 0 : formControl.inputAria, { ref: isLeft ? combineInputLeftRef : combineInputRightRef, type: "text", autoComplete: "off", value: inputValue[index], size: 10, placeholder: isLeft ? placeholderLeft : placeholderRight, disabled: disabled, onValueChange: (val) => {
                 var _a;
                 forceUpdate();
-                dataRef.current.inputValue[index] = e.currentTarget.value;
-                if (dayjs(e.currentTarget.value, format, true).isValid()) {
-                    const date = dayjs(e.currentTarget.value, format).toDate();
+                dataRef.current.inputValue[index] = val;
+                if (dayjs(val, format, true).isValid()) {
+                    const date = dayjs(val, format).toDate();
                     changeValue(date);
                     (_a = panelRef.current) === null || _a === void 0 ? void 0 : _a.call(panelRef, date);
                 }

package/tree-select/TreeSelect.js

@@ -10,6 +10,7 @@ import { isNull, isNumber, isUndefined } from 'lodash';
 import { createElement, forwardRef, useId, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { TreeSelectSearchPanel } from './internal/TreeSelectSearchPanel';
 import { CLASSES } from './vars';
+import { BaseInput } from '../base-input';
 import { Dropdown } from '../dropdown';
 import { useComponentProps, useControlled, useDesign, useFocusVisible, useJSS, useLayout, useListenGlobalScrolling, useMaxIndex, useNamespace, useScopedProps, useStyled, useTranslation, } from '../hooks';
 import { Icon } from '../icon';
@@ -237,7 +238,7 @@ function TreeSelectFC(props, ref) {
     const scrollCallback = useRef();
     const inputable = searchable && visible;
     const clearable = clearableProp && hasSelected && !visible && !loading && !disabled;
-    const inputNode = focusVisibleWrapper(createElement(searchable ? 'input' : 'div', Object.assign(Object.assign(Object.assign(Object.assign({}, mergeCS(styled('tree-select__search'), {
+    const inputNode = focusVisibleWrapper(createElement(searchable ? BaseInput : 'div', Object.assign(Object.assign(Object.assign(Object.assign({}, mergeCS(styled('tree-select__search'), {
         style: {
             opacity: inputable ? undefined : 0,
             zIndex: inputable ? undefined : -1,
@@ -358,16 +359,15 @@ function TreeSelectFC(props, ref) {
                     }
                 }
             }
-        }, onChange: (e) => {
-            if (searchable) {
-                changeSearchValue(e.currentTarget.value);
-            }
         } }), searchable
         ? {
             type: 'text',
             value: searchValue,
             autoComplete: 'off',
             disabled,
+            onValueChange: (val) => {
+                changeSearchValue(val);
+            },
         }
         : {})));
     const [selectedNode, suffixNode, selectedLabel] = (() => {