@mw-kit/mw-ui 1.7.117 → 1.7.118

package/dist/index.js

@@ -1,5 +1,5 @@
 import 'semantic-ui-css/semantic.min.css';
-import React__default, { useState, useEffect, useCallback, useImperativeHandle, createElement } from 'react';
+import React__default, { useState, useEffect, useCallback, useImperativeHandle, createElement, useRef, useMemo } from 'react';
 import styled, { css, keyframes, createGlobalStyle, ThemeProvider as ThemeProvider$1 } from 'styled-components';
 import { Icon as Icon$1, Popup } from 'semantic-ui-react';
 export * from 'semantic-ui-react';
@@ -12256,29 +12256,26 @@ const Loader = styled.div(_t2$3 || (_t2$3 = _$3`
     `), fill, zIndex || 1, size, size, size, size, borderSize, beforeColor, loader, afterColor);
 });
 
-const isMaskFunction = value => {
-  return typeof value === 'function';
-};
+const isMaskFunction = value => typeof value === 'function';
 
-const isMaskReplace = value => {
-  return Array.isArray(value) && value[0] instanceof RegExp;
-};
+const isMaskReplace = value => Array.isArray(value) && value[0] instanceof RegExp;
 
-const isMaskReplaceArray = value => {
-  return Array.isArray(value) && Array.isArray(value[0]);
-};
+const isMaskReplaceArray = value => Array.isArray(value) && Array.isArray(value[0]);
 
 const getMask = mask => {
   if (isMaskFunction(mask)) {
     return mask;
-  } else if (isMaskReplace(mask)) {
+  }
+
+  if (isMaskReplace(mask)) {
     const [find, replace] = mask;
     return value => value.replace(find, replace);
-  } else if (isMaskReplaceArray(mask)) {
+  }
+
+  if (isMaskReplaceArray(mask)) {
     return value => {
       let newValue = value;
-      mask.forEach(e => {
-        const [find, replace] = e;
+      mask.forEach(([find, replace]) => {
         newValue = newValue.replace(find, replace);
       });
       return newValue;
@@ -12288,6 +12285,64 @@ const getMask = mask => {
   return value => value;
 };
 
+const defaultValue = {
+  isRequired: () => false,
+  isInvalid: () => false,
+  isViewMode: () => false,
+  isDisabled: () => false
+};
+const Context = React__default.createContext({ ...defaultValue
+});
+
+const useContext = name => {
+  const context = React__default.useContext(Context);
+  return {
+    isRequired: () => false,
+    isInvalid: () => false,
+    isViewMode: () => false,
+    isDisabled: () => false,
+    ...(name ? {
+      isRequired: () => context.isRequired(name),
+      isInvalid: () => context.isInvalid(name),
+      isViewMode: () => context.isViewMode(name),
+      isDisabled: () => context.isDisabled(name)
+    } : {})
+  };
+};
+
+const Provider = props => {
+  return React__default.createElement(Context.Provider, Object.assign({}, props, {
+    value: { ...defaultValue,
+      ...props.value
+    }
+  }));
+};
+
+const Form = Object.assign(React__default.forwardRef(Object.assign((props, ref) => {
+  const formProps = filterObject(props, ['isRequired', 'isInvalid', 'isViewMode', 'isDisabled']);
+  return React__default.createElement(Provider, {
+    value: { ...(props.isRequired ? {
+        isRequired: props.isRequired
+      } : {}),
+      ...(props.isInvalid ? {
+        isInvalid: props.isInvalid
+      } : {}),
+      ...(props.isViewMode ? {
+        isViewMode: props.isViewMode
+      } : {}),
+      ...(props.isDisabled ? {
+        isDisabled: props.isDisabled
+      } : {})
+    }
+  }, React__default.createElement("form", Object.assign({
+    ref: ref
+  }, formProps)));
+}, {
+  displayName: 'Form'
+})), {
+  useContext
+});
+
 const updateTitle = event => {
   let target = event.target;
 
@@ -12673,64 +12728,20 @@ const ViewModeContainer = styled.div(_t21$1 || (_t21$1 = _$5`
     `));
 });
 
-const defaultValue = {
-  isRequired: () => false,
-  isInvalid: () => false,
-  isViewMode: () => false,
-  isDisabled: () => false
-};
-const Context = React__default.createContext({ ...defaultValue
-});
-
-const useContext = name => {
-  const context = React__default.useContext(Context);
-  return {
-    isRequired: () => false,
-    isInvalid: () => false,
-    isViewMode: () => false,
-    isDisabled: () => false,
-    ...(name ? {
-      isRequired: () => context.isRequired(name),
-      isInvalid: () => context.isInvalid(name),
-      isViewMode: () => context.isViewMode(name),
-      isDisabled: () => context.isDisabled(name)
-    } : {})
-  };
-};
-
-const Provider = props => {
-  return React__default.createElement(Context.Provider, Object.assign({}, props, {
-    value: { ...defaultValue,
-      ...props.value
-    }
-  }));
+const setMask = (event, handler, setValue, maskFn) => {
+  const target = event.target;
+  const raw = target.value;
+  const masked = maskFn(raw);
+  const [start, end] = target.selectionStart === target.selectionEnd && target.selectionEnd === target.value.length ? [masked.length, masked.length] : [target.selectionStart, target.selectionEnd];
+  target.value = masked;
+  handler && handler(event);
+  setValue(masked);
+
+  if (['text', 'search', 'url', 'password'].includes(target.type)) {
+    target.setSelectionRange(start, end);
+  }
 };
 
-const Form = Object.assign(React__default.forwardRef(Object.assign((props, ref) => {
-  const formProps = filterObject(props, ['isRequired', 'isInvalid', 'isViewMode', 'isDisabled']);
-  return React__default.createElement(Provider, {
-    value: { ...(props.isRequired ? {
-        isRequired: props.isRequired
-      } : {}),
-      ...(props.isInvalid ? {
-        isInvalid: props.isInvalid
-      } : {}),
-      ...(props.isViewMode ? {
-        isViewMode: props.isViewMode
-      } : {}),
-      ...(props.isDisabled ? {
-        isDisabled: props.isDisabled
-      } : {})
-    }
-  }, React__default.createElement("form", Object.assign({
-    ref: ref
-  }, formProps)));
-}, {
-  displayName: 'Form'
-})), {
-  useContext
-});
-
 const Input$1 = React__default.forwardRef((props, ref) => {
   var _props$icon;
 
@@ -12746,18 +12757,23 @@ const Input$1 = React__default.forwardRef((props, ref) => {
     width
   } = { ...props
   };
+
+  const setValue = props.setValue || (() => {});
+
   const {
     isRequired,
     isInvalid,
     isViewMode,
     isDisabled
   } = Form.useContext(props.name);
-  const mask = getMask(props.mask);
+  const isComposing = useRef(false);
+  const maskFn = useMemo(() => getMask(props.mask), [props.mask]);
   useEffect(() => {
+    if (isComposing.current) return;
     if (!isString(props.value)) return;
-    const masked = mask(props.value);
+    const masked = maskFn(props.value);
     if (masked !== props.value) setValue(masked);
-  }, [props.value]);
+  }, [isComposing.current, props.value]);
   const invalid = isInvalid() || props.invalid;
   const required = isRequired() || props.required;
   const disabled = isDisabled() || props.disabled;
@@ -12770,20 +12786,14 @@ const Input$1 = React__default.forwardRef((props, ref) => {
     $paddingless: paddingless
   });
 
-  const onChange = inputProps.onChange || (() => {});
-
-  const setValue = props.setValue || (() => {});
-
   inputProps.onChange = event => {
-    const masked = mask(event.target.value);
-    const [start, end] = event.target.selectionStart === event.target.selectionEnd && event.target.selectionEnd === event.target.value.length ? [masked.length, masked.length] : [event.target.selectionStart, event.target.selectionEnd];
-    event.target.value = masked;
-    onChange(event);
-    setValue(event.target.value);
-
-    if (['text', 'search', 'url', 'password'].includes(event.target.type)) {
-      event.target.setSelectionRange(start, end);
+    if (isComposing.current) {
+      props.onChange && props.onChange(event);
+      setValue(event.target.value);
+      return;
     }
+
+    setMask(event, props.onChange, setValue, maskFn);
   };
 
   if (inputProps.onKeyDown || onPressEnter) {
@@ -12825,6 +12835,18 @@ const Input$1 = React__default.forwardRef((props, ref) => {
     };
   }
 
+  inputProps.onCompositionStart = event => {
+    var _props$onCompositionS;
+
+    isComposing.current = true;
+    (_props$onCompositionS = props.onCompositionStart) === null || _props$onCompositionS === void 0 ? void 0 : _props$onCompositionS.call(props, event);
+  };
+
+  inputProps.onCompositionEnd = event => {
+    isComposing.current = false;
+    setMask(event, props.onCompositionEnd, setValue, maskFn);
+  };
+
   if (inputProps.onKeyUpCapture) {
     const onKeyUpCapture = inputProps.onKeyUpCapture;