@hi-ui/input 4.0.10 → 4.0.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/CHANGELOG.md +18 -0
  2. package/lib/cjs/Input.js +89 -126
  3. package/lib/cjs/MockInput.js +44 -75
  4. package/lib/cjs/index.js +0 -6
  5. package/lib/cjs/styles/index.scss.js +1 -4
  6. package/lib/cjs/use-input-cursor.js +22 -42
  7. package/lib/cjs/use-input.js +40 -63
  8. package/lib/cjs/utils/index.js +0 -40
  9. package/lib/esm/Input.js +80 -97
  10. package/lib/esm/MockInput.js +38 -49
  11. package/lib/esm/styles/index.scss.js +1 -3
  12. package/lib/esm/use-input-cursor.js +22 -36
  13. package/lib/esm/use-input.js +40 -52
  14. package/lib/esm/utils/index.js +0 -37
  15. package/package.json +13 -13
package/lib/esm/MockInput.js CHANGED
@@ -14,54 +14,49 @@ import { __DEV__ } from '@hi-ui/env';
14
14
  import { useUncontrolledState } from '@hi-ui/use-uncontrolled-state';
15
15
  import { CloseCircleFilled } from '@hi-ui/icons';
16
16
  var _role = 'mock-input';
17
-
18
17
  var _prefix = getPrefixCls(_role);
19
-
20
18
  var NOOP_VALUE = '';
21
19
  var NOOP_ARRAY = [];
22
20
  /**
23
21
  * 支持自定义渲染输入框内容，暂时仅供内部 Picker 类组件使用，不对外提供
24
22
  */
25
-
26
23
  var MockInput = /*#__PURE__*/forwardRef(function (_a, ref) {
27
24
  var _a$prefixCls = _a.prefixCls,
28
- prefixCls = _a$prefixCls === void 0 ? _prefix : _a$prefixCls,
29
- _a$role = _a.role,
30
- role = _a$role === void 0 ? _role : _a$role,
31
- className = _a.className,
32
- _a$data = _a.data,
33
- data = _a$data === void 0 ? NOOP_ARRAY : _a$data,
34
- _a$defaultValue = _a.defaultValue,
35
- defaultValue = _a$defaultValue === void 0 ? NOOP_VALUE : _a$defaultValue,
36
- valueProp = _a.value,
37
- onChange = _a.onChange,
38
- placeholder = _a.placeholder,
39
- _a$disabled = _a.disabled,
40
- disabled = _a$disabled === void 0 ? false : _a$disabled,
41
- _a$clearable = _a.clearable,
42
- clearable = _a$clearable === void 0 ? false : _a$clearable,
43
- _a$focused = _a.focused,
44
- focused = _a$focused === void 0 ? false : _a$focused,
45
- _a$invalid = _a.invalid,
46
- invalid = _a$invalid === void 0 ? false : _a$invalid,
47
- _a$readOnly = _a.readOnly,
48
- readOnly = _a$readOnly === void 0 ? false : _a$readOnly,
49
- _a$size = _a.size,
50
- size = _a$size === void 0 ? 'md' : _a$size,
51
- _a$appearance = _a.appearance,
52
- appearance = _a$appearance === void 0 ? 'line' : _a$appearance,
53
- _a$clearableTrigger = _a.clearableTrigger,
54
- clearableTrigger = _a$clearableTrigger === void 0 ? 'hover' : _a$clearableTrigger,
55
- displayRender = _a.displayRender,
56
- suffix = _a.suffix,
57
- _onMouseOver = _a.onMouseOver,
58
- _onMouseLeave = _a.onMouseLeave,
59
- rest = __rest(_a, ["prefixCls", "role", "className", "data", "defaultValue", "value", "onChange", "placeholder", "disabled", "clearable", "focused", "invalid", "readOnly", "size", "appearance", "clearableTrigger", "displayRender", "suffix", "onMouseOver", "onMouseLeave"]);
60
-
25
+ prefixCls = _a$prefixCls === void 0 ? _prefix : _a$prefixCls,
26
+ _a$role = _a.role,
27
+ role = _a$role === void 0 ? _role : _a$role,
28
+ className = _a.className,
29
+ _a$data = _a.data,
30
+ data = _a$data === void 0 ? NOOP_ARRAY : _a$data,
31
+ _a$defaultValue = _a.defaultValue,
32
+ defaultValue = _a$defaultValue === void 0 ? NOOP_VALUE : _a$defaultValue,
33
+ valueProp = _a.value,
34
+ onChange = _a.onChange,
35
+ placeholder = _a.placeholder,
36
+ _a$disabled = _a.disabled,
37
+ disabled = _a$disabled === void 0 ? false : _a$disabled,
38
+ _a$clearable = _a.clearable,
39
+ clearable = _a$clearable === void 0 ? false : _a$clearable,
40
+ _a$focused = _a.focused,
41
+ focused = _a$focused === void 0 ? false : _a$focused,
42
+ _a$invalid = _a.invalid,
43
+ invalid = _a$invalid === void 0 ? false : _a$invalid,
44
+ _a$readOnly = _a.readOnly,
45
+ readOnly = _a$readOnly === void 0 ? false : _a$readOnly,
46
+ _a$size = _a.size,
47
+ size = _a$size === void 0 ? 'md' : _a$size,
48
+ _a$appearance = _a.appearance,
49
+ appearance = _a$appearance === void 0 ? 'line' : _a$appearance,
50
+ _a$clearableTrigger = _a.clearableTrigger,
51
+ clearableTrigger = _a$clearableTrigger === void 0 ? 'hover' : _a$clearableTrigger,
52
+ displayRender = _a.displayRender,
53
+ suffix = _a.suffix,
54
+ _onMouseOver = _a.onMouseOver,
55
+ _onMouseLeave = _a.onMouseLeave,
56
+ rest = __rest(_a, ["prefixCls", "role", "className", "data", "defaultValue", "value", "onChange", "placeholder", "disabled", "clearable", "focused", "invalid", "readOnly", "size", "appearance", "clearableTrigger", "displayRender", "suffix", "onMouseOver", "onMouseLeave"]);
61
57
  var _useUncontrolledState = useUncontrolledState(defaultValue, valueProp, onChange),
62
- value = _useUncontrolledState[0],
63
- tryChangeValue = _useUncontrolledState[1];
64
-
58
+ value = _useUncontrolledState[0],
59
+ tryChangeValue = _useUncontrolledState[1];
65
60
  var displayItem = useMemo(function () {
66
61
  if (value === '') return null;
67
62
  var displayItem = data.find(function (item) {
@@ -71,11 +66,9 @@ var MockInput = /*#__PURE__*/forwardRef(function (_a, ref) {
71
66
  }, [value, data]);
72
67
  var displayValue = useMemo(function () {
73
68
  if (!displayItem) return '';
74
-
75
69
  if (displayRender) {
76
70
  return displayRender(displayItem);
77
71
  }
78
-
79
72
  return displayItem.title;
80
73
  }, [displayItem, displayRender]);
81
74
  var handleClear = useCallback(function (evt) {
@@ -83,17 +76,15 @@ var MockInput = /*#__PURE__*/forwardRef(function (_a, ref) {
83
76
  evt.stopPropagation();
84
77
  tryChangeValue(NOOP_VALUE, displayItem);
85
78
  }, [tryChangeValue, disabled, displayItem]);
86
-
87
79
  var _useState = useState(false),
88
- hover = _useState[0],
89
- setHover = _useState[1];
90
-
80
+ hover = _useState[0],
81
+ setHover = _useState[1];
91
82
  var trySetHover = useCallback(function (hovered) {
92
83
  if (disabled) return;
93
84
  setHover(hovered);
94
85
  }, [disabled]);
95
- var hasValue = !!displayValue; // 在开启 clearable 下展示 清除内容按钮，可点击进行内容清除
96
-
86
+ var hasValue = !!displayValue;
87
+ // 在开启 clearable 下展示 清除内容按钮，可点击进行内容清除
97
88
  var showClearableIcon = useMemo(function () {
98
89
  return clearable && hasValue && !disabled && (clearableTrigger === 'always' || hover);
99
90
  }, [clearable, hasValue, disabled, clearableTrigger, hover]);
@@ -123,9 +114,7 @@ var MockInput = /*#__PURE__*/forwardRef(function (_a, ref) {
123
114
  onClick: handleClear
124
115
  }, /*#__PURE__*/React.createElement(CloseCircleFilled, null)) : suffix) : null);
125
116
  });
126
-
127
117
  if (__DEV__) {
128
118
  MockInput.displayName = 'MockInput';
129
119
  }
130
-
131
120
  export { MockInput };
package/lib/esm/styles/index.scss.js CHANGED
@@ -8,8 +8,6 @@
8
8
  * LICENSE file in the root directory of this source tree.
9
9
  */
10
10
  import __styleInject__ from 'style-inject';
11
- var css_248z = ".hi-v4-mock-input {-webkit-box-sizing: border-box;box-sizing: border-box;margin: 0;padding: 0;border: none;outline: none;-webkit-box-shadow: none;box-shadow: none;-webkit-appearance: none;-moz-appearance: none;appearance: none;cursor: text;background-color: transparent;-webkit-tap-highlight-color: transparent;position: relative;overflow: hidden;display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;-webkit-transition-property: all;transition-property: all;-webkit-transition-duration: var(--hi-v4-motion-duration-normal, 200ms);transition-duration: var(--hi-v4-motion-duration-normal, 200ms);-webkit-transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));width: 100%;height: auto;z-index: auto;font-size: inherit;line-height: inherit;color: var(--hi-v4-color-gray-700, #1f2733);border: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-static-transparent, transparent);background-color: var(--hi-v4-color-static-white, #fff);}.hi-v4-mock-input:not(.disabled):hover {z-index: calc(var(--hi-v4-zindex-absolute, 1) + 1);}.hi-v4-mock-input:not(.disabled).focused {z-index: calc(var(--hi-v4-zindex-absolute, 1) + 1);}.hi-v4-mock-input.disabled {cursor: not-allowed;}.hi-v4-mock-input__suffix, .hi-v4-mock-input__placeholder {color: var(--hi-v4-color-gray-400, #b5bcc7);}.hi-v4-mock-input--appearance-unset .hi-v4-mock-input__suffix, .hi-v4-mock-input--appearance-unset .hi-v4-mock-input__placeholder {color: var(--hi-v4-color-gray-500, #929aa6);}.hi-v4-mock-input__placeholder {width: auto;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}.hi-v4-mock-input__clear {display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;width: 16px;height: 16px;font-size: var(--hi-v4-text-size-md, 0.875rem);text-align: center;color: var(--hi-v4-color-gray-500, #929aa6);-ms-flex-negative: 0;flex-shrink: 0;cursor: pointer;visibility: hidden;opacity: 0;-webkit-transition-property: all;transition-property: all;-webkit-transition-duration: var(--hi-v4-motion-duration-normal, 200ms);transition-duration: var(--hi-v4-motion-duration-normal, 200ms);-webkit-transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));}.hi-v4-mock-input__clear:hover {color: var(--hi-v4-color-static-black, #000);}.hi-v4-mock-input__clear.active {visibility: visible;opacity: 1;}.hi-v4-mock-input__suffix {display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-ms-flex-negative: 0;flex-shrink: 0;color: var(--hi-v4-color-gray-400, #b5bcc7);font-size: var(--hi-v4-text-size-lg, 1rem);padding-left: var(--hi-v4-spacing-4, 8px);text-align: center;}.hi-v4-mock-input__value {-webkit-box-sizing: border-box;box-sizing: border-box;display: inline-block;width: auto;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}.hi-v4-mock-input--size-sm.hi-v4-mock-input {height: var(--hi-v4-height-6, 24px);font-size: var(--hi-v4-text-size-sm, 0.75rem);line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);border-radius: var(--hi-v4-border-radius-md, 4px);padding: 1px calc(var(--hi-v4-spacing-6, 12px) - 1px);}.hi-v4-mock-input--size-md.hi-v4-mock-input {height: var(--hi-v4-height-8, 32px);font-size: var(--hi-v4-text-size-md, 0.875rem);line-height: var(--hi-v4-text-lineheight-md, 1.375rem);border-radius: var(--hi-v4-border-radius-md, 4px);padding: 4px calc(var(--hi-v4-spacing-6, 12px) - 1px);}.hi-v4-mock-input--size-lg.hi-v4-mock-input {height: var(--hi-v4-height-10, 40px);font-size: var(--hi-v4-text-size-lg, 1rem);line-height: var(--hi-v4-text-lineheight-lg, 1.5rem);border-radius: var(--hi-v4-border-radius-md, 4px);padding: 7px calc(var(--hi-v4-spacing-6, 12px) - 1px);}.hi-v4-mock-input--appearance-line.hi-v4-mock-input {border-color: var(--hi-v4-color-gray-300, #dfe2e8);}.hi-v4-mock-input--appearance-line.hi-v4-mock-input:not(.disabled):hover {border-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-mock-input--appearance-line.hi-v4-mock-input:not(.disabled).focused {-webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-primary-100, var(--hi-v4-color-brandblue-100, #bde2ff));box-shadow: 0 0 0 2px var(--hi-v4-color-primary-100, var(--hi-v4-color-brandblue-100, #bde2ff));border-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-mock-input--appearance-line.hi-v4-mock-input:not(.disabled).invalid {border-color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959));}.hi-v4-mock-input--appearance-line.hi-v4-mock-input:not(.disabled).invalid.hover {border-color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959));}.hi-v4-mock-input--appearance-line.hi-v4-mock-input:not(.disabled).invalid.focused {-webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-danger-100, var(--hi-v4-color-red-100, #ffd1c9));box-shadow: 0 0 0 2px var(--hi-v4-color-danger-100, var(--hi-v4-color-red-100, #ffd1c9));}.hi-v4-mock-input--appearance-unset.hi-v4-mock-input {width: auto;max-width: 100%;-webkit-box-pack: start;-ms-flex-pack: start;justify-content: flex-start;border-color: transparent;}.hi-v4-mock-input--appearance-unset.hi-v4-mock-input:not(.disabled):hover {background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-mock-input--appearance-unset.hi-v4-mock-input:not(.disabled).focused {-webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-primary-100, var(--hi-v4-color-brandblue-100, #bde2ff));box-shadow: 0 0 0 2px var(--hi-v4-color-primary-100, var(--hi-v4-color-brandblue-100, #bde2ff));background-color: var(--hi-v4-color-static-white, #fff);border-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-mock-input--appearance-unset.hi-v4-mock-input:not(.disabled).invalid {border-color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959));}.hi-v4-mock-input--appearance-unset.hi-v4-mock-input:not(.disabled).invalid.hover {border-color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959));}.hi-v4-mock-input--appearance-unset.hi-v4-mock-input:not(.disabled).invalid.focused {-webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-danger-100, var(--hi-v4-color-red-100, #ffd1c9));box-shadow: 0 0 0 2px var(--hi-v4-color-danger-100, var(--hi-v4-color-red-100, #ffd1c9));}.hi-v4-mock-input--appearance-filled.hi-v4-mock-input {background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-mock-input--appearance-filled.hi-v4-mock-input:not(.disabled):hover {background-color: var(--hi-v4-color-static-white, #fff);border-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-mock-input--appearance-filled.hi-v4-mock-input:not(.disabled).focused {-webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-primary-100, var(--hi-v4-color-brandblue-100, #bde2ff));box-shadow: 0 0 0 2px var(--hi-v4-color-primary-100, var(--hi-v4-color-brandblue-100, #bde2ff));border-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));background-color: var(--hi-v4-color-static-white, #fff);}.hi-v4-mock-input--appearance-filled.hi-v4-mock-input:not(.disabled).invalid {border-color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959));}.hi-v4-mock-input--appearance-filled.hi-v4-mock-input:not(.disabled).invalid.hover {border-color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959));}.hi-v4-mock-input--appearance-filled.hi-v4-mock-input:not(.disabled).invalid.focused {-webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-danger-100, var(--hi-v4-color-red-100, #ffd1c9));box-shadow: 0 0 0 2px var(--hi-v4-color-danger-100, var(--hi-v4-color-red-100, #ffd1c9));}.hi-v4-mock-input--appearance-line.disabled.hi-v4-mock-input, .hi-v4-mock-input--appearance-unset.disabled.hi-v4-mock-input, .hi-v4-mock-input--appearance-filled.disabled.hi-v4-mock-input {color: var(--hi-v4-color-gray-400, #b5bcc7);}.hi-v4-mock-input--appearance-line.disabled.hi-v4-mock-input, .hi-v4-mock-input--appearance-filled.disabled.hi-v4-mock-input {background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-input {position: relative;display: inline-block;-webkit-box-sizing: border-box;box-sizing: border-box;width: 100%;}.hi-v4-input__outer {margin: 0;padding: 0;display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;position: relative;height: 100%;width: 100%;}.hi-v4-input__text {-webkit-box-sizing: border-box;box-sizing: border-box;margin: 0;padding: 0;border: none;outline: none;-webkit-box-shadow: none;box-shadow: none;-webkit-appearance: none;-moz-appearance: none;appearance: none;cursor: text;background-color: transparent;-webkit-tap-highlight-color: transparent;-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;display: inline-block;box-sizing: border-box;-webkit-transition-property: all;transition-property: all;-webkit-transition-duration: var(--hi-v4-motion-duration-normal, 200ms);transition-duration: var(--hi-v4-motion-duration-normal, 200ms);-webkit-transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));width: 100%;font-size: inherit;line-height: inherit;color: var(--hi-v4-color-gray-700, #1f2733);}.hi-v4-input__text::-webkit-input-placeholder {color: var(--hi-v4-color-gray-400, #b5bcc7);}.hi-v4-input__text::-moz-placeholder {color: var(--hi-v4-color-gray-400, #b5bcc7);}.hi-v4-input__text::-ms-input-placeholder {color: var(--hi-v4-color-gray-400, #b5bcc7);}.hi-v4-input__text:-ms-input-placeholder {color: var(--hi-v4-color-gray-400, #b5bcc7);}.hi-v4-input__text::placeholder {color: var(--hi-v4-color-gray-400, #b5bcc7);}.hi-v4-input--appearance-unset .hi-v4-input__text::-webkit-input-placeholder {color: var(--hi-v4-color-gray-500, #929aa6);}.hi-v4-input--appearance-unset .hi-v4-input__text::-moz-placeholder {color: var(--hi-v4-color-gray-500, #929aa6);}.hi-v4-input--appearance-unset .hi-v4-input__text::-ms-input-placeholder {color: var(--hi-v4-color-gray-500, #929aa6);}.hi-v4-input--appearance-unset .hi-v4-input__text:-ms-input-placeholder {color: var(--hi-v4-color-gray-500, #929aa6);}.hi-v4-input--appearance-unset .hi-v4-input__text::placeholder {color: var(--hi-v4-color-gray-500, #929aa6);}.hi-v4-input__text:disabled {cursor: not-allowed;}.hi-v4-input__inner {position: relative;display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;height: auto;width: 100%;-webkit-box-sizing: border-box;box-sizing: border-box;font-size: inherit;border: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-static-transparent, transparent);background-color: var(--hi-v4-color-static-white, #fff);-webkit-transition-property: all;transition-property: all;-webkit-transition-duration: var(--hi-v4-motion-duration-normal, 200ms);transition-duration: var(--hi-v4-motion-duration-normal, 200ms);-webkit-transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));outline: none;z-index: auto;}.hi-v4-input__inner:not(.hi-v4-input__inner--disabled):hover {z-index: calc(var(--hi-v4-zindex-absolute, 1) + 1);}.hi-v4-input__inner:not(.hi-v4-input__inner--disabled).hi-v4-input__inner--focused {z-index: calc(var(--hi-v4-zindex-absolute, 1) + 1);}.hi-v4-input__clear {display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;height: auto;text-align: center;font-size: var(--hi-v4-text-size-md, 0.875rem);color: var(--hi-v4-color-gray-500, #929aa6);-ms-flex-negative: 0;flex-shrink: 0;cursor: pointer;-webkit-transition-property: all;transition-property: all;-webkit-transition-duration: var(--hi-v4-motion-duration-normal, 200ms);transition-duration: var(--hi-v4-motion-duration-normal, 200ms);-webkit-transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));visibility: hidden;opacity: 0;}.hi-v4-input__clear:hover {color: var(--hi-v4-color-gray-700, #1f2733);}.hi-v4-input__clear.hi-v4-input__clear--active {visibility: visible;opacity: 1;}.hi-v4-input__inner--suffix .hi-v4-input__clear {-webkit-margin-end: var(--hi-v4-spacing-2, 4px);margin-inline-end: var(--hi-v4-spacing-2, 4px);}.hi-v4-input__prefix, .hi-v4-input__suffix {display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-ms-flex-negative: 0;flex-shrink: 0;color: var(--hi-v4-color-gray-700, #1f2733);font-size: inherit;text-align: center;}.hi-v4-input__prefix {padding-left: calc(var(--hi-v4-spacing-6, 12px) - 1px);}.hi-v4-input__suffix {padding-right: calc(var(--hi-v4-spacing-6, 12px) - 1px);}.hi-v4-input__prepend, .hi-v4-input__append {position: relative;color: var(--hi-v4-color-gray-700, #1f2733);background-color: var(--hi-v4-color-gray-50, #f5f7fa);-ms-flex-negative: 0;flex-shrink: 0;display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;font-size: inherit;text-align: center;padding: 0 calc(var(--hi-v4-spacing-6, 12px) - 1px);border: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-static-transparent, transparent);white-space: nowrap;-webkit-transition-property: all;transition-property: all;-webkit-transition-duration: var(--hi-v4-motion-duration-normal, 200ms);transition-duration: var(--hi-v4-motion-duration-normal, 200ms);-webkit-transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));z-index: var(--hi-v4-zindex-absolute, 1);}.hi-v4-input__prepend {border-top-right-radius: 0;border-bottom-right-radius: 0;margin-right: -1px;}.hi-v4-input__append {border-top-left-radius: 0;border-bottom-left-radius: 0;margin-left: -1px;}.hi-v4-input--size-sm {height: var(--hi-v4-height-6, 24px);font-size: var(--hi-v4-text-size-sm, 0.75rem);line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);}.hi-v4-input--size-sm .hi-v4-input__text {padding: 1px calc(var(--hi-v4-spacing-6, 12px) - 1px);}.hi-v4-input--size-sm .hi-v4-input__inner,.hi-v4-input--size-sm .hi-v4-input__prepend,.hi-v4-input--size-sm .hi-v4-input__append {border-radius: var(--hi-v4-border-radius-md, 4px);}.hi-v4-input--size-sm .hi-v4-input__prepend {border-top-right-radius: 0;border-bottom-right-radius: 0;}.hi-v4-input--size-sm .hi-v4-input__append {border-top-left-radius: 0;border-bottom-left-radius: 0;}.hi-v4-input--size-md {height: var(--hi-v4-height-8, 32px);font-size: var(--hi-v4-text-size-md, 0.875rem);line-height: var(--hi-v4-text-lineheight-md, 1.375rem);}.hi-v4-input--size-md .hi-v4-input__text {padding: 4px calc(var(--hi-v4-spacing-6, 12px) - 1px);}.hi-v4-input--size-md .hi-v4-input__inner,.hi-v4-input--size-md .hi-v4-input__prepend,.hi-v4-input--size-md .hi-v4-input__append {border-radius: var(--hi-v4-border-radius-md, 4px);}.hi-v4-input--size-md .hi-v4-input__prepend {border-top-right-radius: 0;border-bottom-right-radius: 0;}.hi-v4-input--size-md .hi-v4-input__append {border-top-left-radius: 0;border-bottom-left-radius: 0;}.hi-v4-input--size-lg {height: var(--hi-v4-height-10, 40px);font-size: var(--hi-v4-text-size-lg, 1rem);line-height: var(--hi-v4-text-lineheight-lg, 1.5rem);}.hi-v4-input--size-lg .hi-v4-input__text {padding: 7px calc(var(--hi-v4-spacing-6, 12px) - 1px);}.hi-v4-input--size-lg .hi-v4-input__inner,.hi-v4-input--size-lg .hi-v4-input__prepend,.hi-v4-input--size-lg .hi-v4-input__append {border-radius: var(--hi-v4-border-radius-md, 4px);}.hi-v4-input--size-lg .hi-v4-input__prepend {border-top-right-radius: 0;border-bottom-right-radius: 0;}.hi-v4-input--size-lg .hi-v4-input__append {border-top-left-radius: 0;border-bottom-left-radius: 0;}.hi-v4-input--appearance-line .hi-v4-input__inner {border-color: var(--hi-v4-color-gray-300, #dfe2e8);}.hi-v4-input--appearance-line .hi-v4-input__inner:not(.hi-v4-input__inner--disabled):hover {border-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-input--appearance-line .hi-v4-input__inner:not(.hi-v4-input__inner--disabled).hi-v4-input__inner--focused {-webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-primary-100, var(--hi-v4-color-brandblue-100, #bde2ff));box-shadow: 0 0 0 2px var(--hi-v4-color-primary-100, var(--hi-v4-color-brandblue-100, #bde2ff));border-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-input--appearance-line .hi-v4-input__inner:not(.hi-v4-input__inner--disabled).hi-v4-input__inner--invalid {border-color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959));}.hi-v4-input--appearance-line .hi-v4-input__inner:not(.hi-v4-input__inner--disabled).hi-v4-input__inner--invalid:hover {border-color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959));}.hi-v4-input--appearance-line .hi-v4-input__inner:not(.hi-v4-input__inner--disabled).hi-v4-input__inner--invalid.hi-v4-input__inner--focused {-webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-danger-100, var(--hi-v4-color-red-100, #ffd1c9));box-shadow: 0 0 0 2px var(--hi-v4-color-danger-100, var(--hi-v4-color-red-100, #ffd1c9));}.hi-v4-input--appearance-line .hi-v4-input__prepend,.hi-v4-input--appearance-line .hi-v4-input__append {border-color: var(--hi-v4-color-gray-300, #dfe2e8);}.hi-v4-input--appearance-unset .hi-v4-input__text {padding-left: 0;padding-right: 0;}.hi-v4-input--appearance-unset.hi-v4-input__outer--prepend .hi-v4-input__text,.hi-v4-input--appearance-unset .hi-v4-input__inner--prefix .hi-v4-input__text {padding-left: calc(var(--hi-v4-spacing-6, 12px) - 1px);}.hi-v4-input--appearance-unset.hi-v4-input__outer--append .hi-v4-input__text,.hi-v4-input--appearance-unset .hi-v4-input__inner--suffix .hi-v4-input__text {padding-right: calc(var(--hi-v4-spacing-6, 12px) - 1px);}.hi-v4-input--appearance-unset .hi-v4-input__inner {border-radius: 0;}.hi-v4-input--appearance-unset:not(.hi-v4-input__inner--disabled) .hi-v4-input__inner:hover {background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-input--appearance-filled .hi-v4-input__inner {background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-input--appearance-filled .hi-v4-input__inner:not(.hi-v4-input__inner--disabled):hover {background-color: var(--hi-v4-color-static-white, #fff);border-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-input--appearance-filled .hi-v4-input__inner:not(.hi-v4-input__inner--disabled).hi-v4-input__inner--focused {-webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-primary-100, var(--hi-v4-color-brandblue-100, #bde2ff));box-shadow: 0 0 0 2px var(--hi-v4-color-primary-100, var(--hi-v4-color-brandblue-100, #bde2ff));border-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));background-color: var(--hi-v4-color-static-white, #fff);}.hi-v4-input--appearance-filled .hi-v4-input__inner:not(.hi-v4-input__inner--disabled).hi-v4-input__inner--invalid {border-color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959));}.hi-v4-input--appearance-filled .hi-v4-input__inner:not(.hi-v4-input__inner--disabled).hi-v4-input__inner--invalid:hover {border-color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959));}.hi-v4-input--appearance-filled .hi-v4-input__inner:not(.hi-v4-input__inner--disabled).hi-v4-input__inner--invalid.hi-v4-input__inner--focused {-webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-danger-100, var(--hi-v4-color-red-100, #ffd1c9));box-shadow: 0 0 0 2px var(--hi-v4-color-danger-100, var(--hi-v4-color-red-100, #ffd1c9));}.hi-v4-input--appearance-underline .hi-v4-input__text {padding-left: 0;padding-right: 0;}.hi-v4-input--appearance-underline.hi-v4-input__outer--prepend .hi-v4-input__text,.hi-v4-input--appearance-underline .hi-v4-input__inner--prefix .hi-v4-input__text {padding-left: calc(var(--hi-v4-spacing-6, 12px) - 1px);}.hi-v4-input--appearance-underline.hi-v4-input__outer--append .hi-v4-input__text,.hi-v4-input--appearance-underline .hi-v4-input__inner--suffix .hi-v4-input__text {padding-right: calc(var(--hi-v4-spacing-6, 12px) - 1px);}.hi-v4-input--appearance-underline .hi-v4-input__inner {border-radius: 0;}.hi-v4-input--appearance-underline .hi-v4-input__inner::after {content: \"\";-webkit-box-sizing: border-box;box-sizing: border-box;display: block;position: absolute;bottom: 0;left: -1px;right: -1px;border-bottom: 1px solid var(--hi-v4-color-gray-300, #dfe2e8);-webkit-transition: all 0.3s;transition: all 0.3s;}.hi-v4-input--appearance-underline .hi-v4-input__inner:not(.hi-v4-input__inner--disabled):hover::after {border-bottom-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-input--appearance-underline .hi-v4-input__inner:not(.hi-v4-input__inner--disabled).hi-v4-input__inner--focused::after {border-bottom-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-input--appearance-underline .hi-v4-input__inner:not(.hi-v4-input__inner--disabled).hi-v4-input__inner--invalid::after {border-bottom-color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959));}.hi-v4-input--appearance-underline .hi-v4-input__inner:not(.hi-v4-input__inner--disabled).hi-v4-input__inner--invalid.hover::after {border-bottom-color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959));}.hi-v4-input--appearance-line .hi-v4-input__inner.hi-v4-input__inner--disabled, .hi-v4-input--appearance-filled .hi-v4-input__inner.hi-v4-input__inner--disabled {color: var(--hi-v4-color-gray-400, #b5bcc7);background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-input--appearance-line .hi-v4-input__inner.hi-v4-input__inner--disabled .hi-v4-input__text, .hi-v4-input--appearance-filled .hi-v4-input__inner.hi-v4-input__inner--disabled .hi-v4-input__text {color: var(--hi-v4-color-gray-400, #b5bcc7);}.hi-v4-input--appearance-unset .hi-v4-input__inner.hi-v4-input__inner--disabled, .hi-v4-input--appearance-underline .hi-v4-input__inner.hi-v4-input__inner--disabled {color: var(--hi-v4-color-gray-400, #b5bcc7);background-color: transparent;}.hi-v4-input--appearance-unset .hi-v4-input__inner.hi-v4-input__inner--disabled .hi-v4-input__text, .hi-v4-input--appearance-underline .hi-v4-input__inner.hi-v4-input__inner--disabled .hi-v4-input__text {color: var(--hi-v4-color-gray-400, #b5bcc7);}.hi-v4-input__outer--prepend .hi-v4-input__inner {border-top-left-radius: 0;border-bottom-left-radius: 0;}.hi-v4-input__outer--prepend-unset .hi-v4-input__prepend {border: none;padding: 0;}.hi-v4-input__outer--prepend-unset .hi-v4-input__prepend .hi-v4-mock-input {border-top-right-radius: 0;border-bottom-right-radius: 0;}.hi-v4-input__outer--prepend-unset .hi-v4-input__prepend .hi-v4-button {border-top-right-radius: 0;border-bottom-right-radius: 0;}.hi-v4-input__outer--append .hi-v4-input__inner {border-top-right-radius: 0;border-bottom-right-radius: 0;}.hi-v4-input__outer--append-unset .hi-v4-input__append {border: none;padding: 0;}.hi-v4-input__outer--append-unset .hi-v4-input__append .hi-v4-mock-input {border-top-left-radius: 0;border-bottom-left-radius: 0;}.hi-v4-input__outer--append-unset .hi-v4-input__append .hi-v4-button {border-top-left-radius: 0;border-bottom-left-radius: 0;}";
12
-
11
+ var css_248z = ".hi-v4-mock-input {-webkit-box-sizing: border-box;box-sizing: border-box;margin: 0;padding: 0;border: none;outline: none;-webkit-box-shadow: none;box-shadow: none;-webkit-appearance: none;-moz-appearance: none;appearance: none;cursor: text;background-color: transparent;-webkit-tap-highlight-color: transparent;position: relative;overflow: hidden;display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;-webkit-transition-property: all;transition-property: all;-webkit-transition-duration: var(--hi-v4-motion-duration-normal, 200ms);transition-duration: var(--hi-v4-motion-duration-normal, 200ms);-webkit-transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));width: 100%;height: auto;z-index: auto;font-size: inherit;line-height: inherit;color: var(--hi-v4-color-gray-700, #1f2733);border: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-static-transparent, transparent);background-color: var(--hi-v4-color-static-white, #fff);}.hi-v4-mock-input:not(.disabled):hover {z-index: calc(var(--hi-v4-zindex-absolute, 1) + 1);}.hi-v4-mock-input:not(.disabled).focused {z-index: calc(var(--hi-v4-zindex-absolute, 1) + 1);}.hi-v4-mock-input.disabled {cursor: not-allowed;}.hi-v4-mock-input__suffix, .hi-v4-mock-input__placeholder {color: var(--hi-v4-color-gray-400, #b5bcc7);}.hi-v4-mock-input--appearance-unset .hi-v4-mock-input__suffix, .hi-v4-mock-input--appearance-unset .hi-v4-mock-input__placeholder {color: var(--hi-v4-color-gray-500, #929aa6);}.hi-v4-mock-input__placeholder {width: auto;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}.hi-v4-mock-input__clear {display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;width: 16px;height: 16px;font-size: var(--hi-v4-text-size-md, 0.875rem);text-align: center;color: var(--hi-v4-color-gray-500, #929aa6);-ms-flex-negative: 0;flex-shrink: 0;cursor: pointer;visibility: hidden;opacity: 0;-webkit-transition-property: all;transition-property: all;-webkit-transition-duration: var(--hi-v4-motion-duration-normal, 200ms);transition-duration: var(--hi-v4-motion-duration-normal, 200ms);-webkit-transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));}.hi-v4-mock-input__clear:hover {color: var(--hi-v4-color-static-black, #000);}.hi-v4-mock-input__clear.active {visibility: visible;opacity: 1;}.hi-v4-mock-input__suffix {display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-ms-flex-negative: 0;flex-shrink: 0;color: var(--hi-v4-color-gray-400, #b5bcc7);font-size: var(--hi-v4-text-size-lg, 1rem);padding-left: var(--hi-v4-spacing-4, 8px);text-align: center;}.hi-v4-mock-input__value {-webkit-box-sizing: border-box;box-sizing: border-box;display: inline-block;width: auto;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}.hi-v4-mock-input--size-sm.hi-v4-mock-input {height: var(--hi-v4-height-6, 24px);font-size: var(--hi-v4-text-size-sm, 0.75rem);line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);border-radius: var(--hi-v4-border-radius-md, 4px);padding: 1px calc(var(--hi-v4-spacing-6, 12px) - 1px);}.hi-v4-mock-input--size-md.hi-v4-mock-input {height: var(--hi-v4-height-8, 32px);font-size: var(--hi-v4-text-size-md, 0.875rem);line-height: var(--hi-v4-text-lineheight-md, 1.375rem);border-radius: var(--hi-v4-border-radius-md, 4px);padding: 4px calc(var(--hi-v4-spacing-6, 12px) - 1px);}.hi-v4-mock-input--size-lg.hi-v4-mock-input {height: var(--hi-v4-height-10, 40px);font-size: var(--hi-v4-text-size-lg, 1rem);line-height: var(--hi-v4-text-lineheight-lg, 1.5rem);border-radius: var(--hi-v4-border-radius-md, 4px);padding: 7px calc(var(--hi-v4-spacing-6, 12px) - 1px);}.hi-v4-mock-input--appearance-line.hi-v4-mock-input {border-color: var(--hi-v4-color-gray-300, #dfe2e8);}.hi-v4-mock-input--appearance-line.hi-v4-mock-input:not(.disabled):hover {border-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-mock-input--appearance-line.hi-v4-mock-input:not(.disabled).focused {-webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-primary-100, var(--hi-v4-color-brandblue-100, #bde2ff));box-shadow: 0 0 0 2px var(--hi-v4-color-primary-100, var(--hi-v4-color-brandblue-100, #bde2ff));border-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-mock-input--appearance-line.hi-v4-mock-input:not(.disabled).invalid {border-color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959));}.hi-v4-mock-input--appearance-line.hi-v4-mock-input:not(.disabled).invalid.hover {border-color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959));}.hi-v4-mock-input--appearance-line.hi-v4-mock-input:not(.disabled).invalid.focused {-webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-danger-100, var(--hi-v4-color-red-100, #ffd1c9));box-shadow: 0 0 0 2px var(--hi-v4-color-danger-100, var(--hi-v4-color-red-100, #ffd1c9));}.hi-v4-mock-input--appearance-unset.hi-v4-mock-input {width: auto;max-width: 100%;-webkit-box-pack: start;-ms-flex-pack: start;justify-content: flex-start;border-color: transparent;}.hi-v4-mock-input--appearance-unset.hi-v4-mock-input:not(.disabled):hover {background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-mock-input--appearance-unset.hi-v4-mock-input:not(.disabled).focused {-webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-primary-100, var(--hi-v4-color-brandblue-100, #bde2ff));box-shadow: 0 0 0 2px var(--hi-v4-color-primary-100, var(--hi-v4-color-brandblue-100, #bde2ff));background-color: var(--hi-v4-color-static-white, #fff);border-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-mock-input--appearance-unset.hi-v4-mock-input:not(.disabled).invalid {border-color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959));}.hi-v4-mock-input--appearance-unset.hi-v4-mock-input:not(.disabled).invalid.hover {border-color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959));}.hi-v4-mock-input--appearance-unset.hi-v4-mock-input:not(.disabled).invalid.focused {-webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-danger-100, var(--hi-v4-color-red-100, #ffd1c9));box-shadow: 0 0 0 2px var(--hi-v4-color-danger-100, var(--hi-v4-color-red-100, #ffd1c9));}.hi-v4-mock-input--appearance-filled.hi-v4-mock-input {background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-mock-input--appearance-filled.hi-v4-mock-input:not(.disabled):hover {background-color: var(--hi-v4-color-static-white, #fff);border-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-mock-input--appearance-filled.hi-v4-mock-input:not(.disabled).focused {-webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-primary-100, var(--hi-v4-color-brandblue-100, #bde2ff));box-shadow: 0 0 0 2px var(--hi-v4-color-primary-100, var(--hi-v4-color-brandblue-100, #bde2ff));border-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));background-color: var(--hi-v4-color-static-white, #fff);}.hi-v4-mock-input--appearance-filled.hi-v4-mock-input:not(.disabled).invalid {border-color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959));}.hi-v4-mock-input--appearance-filled.hi-v4-mock-input:not(.disabled).invalid.hover {border-color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959));}.hi-v4-mock-input--appearance-filled.hi-v4-mock-input:not(.disabled).invalid.focused {-webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-danger-100, var(--hi-v4-color-red-100, #ffd1c9));box-shadow: 0 0 0 2px var(--hi-v4-color-danger-100, var(--hi-v4-color-red-100, #ffd1c9));}.hi-v4-mock-input--appearance-line.disabled.hi-v4-mock-input, .hi-v4-mock-input--appearance-unset.disabled.hi-v4-mock-input, .hi-v4-mock-input--appearance-filled.disabled.hi-v4-mock-input {color: var(--hi-v4-color-gray-400, #b5bcc7);}.hi-v4-mock-input--appearance-line.disabled.hi-v4-mock-input, .hi-v4-mock-input--appearance-filled.disabled.hi-v4-mock-input {background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-input {position: relative;display: inline-block;-webkit-box-sizing: border-box;box-sizing: border-box;width: 100%;}.hi-v4-input__outer {margin: 0;padding: 0;display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;position: relative;height: 100%;width: 100%;}.hi-v4-input__text {-webkit-box-sizing: border-box;box-sizing: border-box;margin: 0;padding: 0;border: none;outline: none;-webkit-box-shadow: none;box-shadow: none;-webkit-appearance: none;-moz-appearance: none;appearance: none;cursor: text;background-color: transparent;-webkit-tap-highlight-color: transparent;-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;display: inline-block;box-sizing: border-box;-webkit-transition-property: all;transition-property: all;-webkit-transition-duration: var(--hi-v4-motion-duration-normal, 200ms);transition-duration: var(--hi-v4-motion-duration-normal, 200ms);-webkit-transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));width: 100%;font-size: inherit;line-height: inherit;color: var(--hi-v4-color-gray-700, #1f2733);}.hi-v4-input__text::-webkit-input-placeholder {color: var(--hi-v4-color-gray-400, #b5bcc7);}.hi-v4-input__text::-moz-placeholder {color: var(--hi-v4-color-gray-400, #b5bcc7);}.hi-v4-input__text::-ms-input-placeholder {color: var(--hi-v4-color-gray-400, #b5bcc7);}.hi-v4-input__text::placeholder {color: var(--hi-v4-color-gray-400, #b5bcc7);}.hi-v4-input--appearance-unset .hi-v4-input__text::-webkit-input-placeholder {color: var(--hi-v4-color-gray-500, #929aa6);}.hi-v4-input--appearance-unset .hi-v4-input__text::-moz-placeholder {color: var(--hi-v4-color-gray-500, #929aa6);}.hi-v4-input--appearance-unset .hi-v4-input__text::-ms-input-placeholder {color: var(--hi-v4-color-gray-500, #929aa6);}.hi-v4-input--appearance-unset .hi-v4-input__text::placeholder {color: var(--hi-v4-color-gray-500, #929aa6);}.hi-v4-input__text:disabled {cursor: not-allowed;}.hi-v4-input__inner {position: relative;display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;height: auto;width: 100%;-webkit-box-sizing: border-box;box-sizing: border-box;font-size: inherit;border: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-static-transparent, transparent);background-color: var(--hi-v4-color-static-white, #fff);-webkit-transition-property: all;transition-property: all;-webkit-transition-duration: var(--hi-v4-motion-duration-normal, 200ms);transition-duration: var(--hi-v4-motion-duration-normal, 200ms);-webkit-transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));outline: none;z-index: auto;}.hi-v4-input__inner:not(.hi-v4-input__inner--disabled):hover {z-index: calc(var(--hi-v4-zindex-absolute, 1) + 1);}.hi-v4-input__inner:not(.hi-v4-input__inner--disabled).hi-v4-input__inner--focused {z-index: calc(var(--hi-v4-zindex-absolute, 1) + 1);}.hi-v4-input__clear {display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;height: auto;text-align: center;font-size: var(--hi-v4-text-size-md, 0.875rem);color: var(--hi-v4-color-gray-500, #929aa6);-ms-flex-negative: 0;flex-shrink: 0;cursor: pointer;-webkit-transition-property: all;transition-property: all;-webkit-transition-duration: var(--hi-v4-motion-duration-normal, 200ms);transition-duration: var(--hi-v4-motion-duration-normal, 200ms);-webkit-transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));visibility: hidden;opacity: 0;}.hi-v4-input__clear:hover {color: var(--hi-v4-color-gray-700, #1f2733);}.hi-v4-input__clear.hi-v4-input__clear--active {visibility: visible;opacity: 1;}.hi-v4-input__inner--suffix .hi-v4-input__clear {-webkit-margin-end: var(--hi-v4-spacing-2, 4px);margin-inline-end: var(--hi-v4-spacing-2, 4px);}.hi-v4-input__prefix, .hi-v4-input__suffix {display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-ms-flex-negative: 0;flex-shrink: 0;color: var(--hi-v4-color-gray-700, #1f2733);font-size: inherit;text-align: center;}.hi-v4-input__prefix {padding-left: calc(var(--hi-v4-spacing-6, 12px) - 1px);}.hi-v4-input__suffix {padding-right: calc(var(--hi-v4-spacing-6, 12px) - 1px);}.hi-v4-input__prepend, .hi-v4-input__append {position: relative;color: var(--hi-v4-color-gray-700, #1f2733);background-color: var(--hi-v4-color-gray-50, #f5f7fa);-ms-flex-negative: 0;flex-shrink: 0;display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;font-size: inherit;text-align: center;padding: 0 calc(var(--hi-v4-spacing-6, 12px) - 1px);border: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-static-transparent, transparent);white-space: nowrap;-webkit-transition-property: all;transition-property: all;-webkit-transition-duration: var(--hi-v4-motion-duration-normal, 200ms);transition-duration: var(--hi-v4-motion-duration-normal, 200ms);-webkit-transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));z-index: var(--hi-v4-zindex-absolute, 1);}.hi-v4-input__prepend {border-top-right-radius: 0;border-bottom-right-radius: 0;margin-right: -1px;}.hi-v4-input__append {border-top-left-radius: 0;border-bottom-left-radius: 0;margin-left: -1px;}.hi-v4-input--size-sm {height: var(--hi-v4-height-6, 24px);font-size: var(--hi-v4-text-size-sm, 0.75rem);line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);}.hi-v4-input--size-sm .hi-v4-input__text {padding: 1px calc(var(--hi-v4-spacing-6, 12px) - 1px);}.hi-v4-input--size-sm .hi-v4-input__inner,.hi-v4-input--size-sm .hi-v4-input__prepend,.hi-v4-input--size-sm .hi-v4-input__append {border-radius: var(--hi-v4-border-radius-md, 4px);}.hi-v4-input--size-sm .hi-v4-input__prepend {border-top-right-radius: 0;border-bottom-right-radius: 0;}.hi-v4-input--size-sm .hi-v4-input__append {border-top-left-radius: 0;border-bottom-left-radius: 0;}.hi-v4-input--size-md {height: var(--hi-v4-height-8, 32px);font-size: var(--hi-v4-text-size-md, 0.875rem);line-height: var(--hi-v4-text-lineheight-md, 1.375rem);}.hi-v4-input--size-md .hi-v4-input__text {padding: 4px calc(var(--hi-v4-spacing-6, 12px) - 1px);}.hi-v4-input--size-md .hi-v4-input__inner,.hi-v4-input--size-md .hi-v4-input__prepend,.hi-v4-input--size-md .hi-v4-input__append {border-radius: var(--hi-v4-border-radius-md, 4px);}.hi-v4-input--size-md .hi-v4-input__prepend {border-top-right-radius: 0;border-bottom-right-radius: 0;}.hi-v4-input--size-md .hi-v4-input__append {border-top-left-radius: 0;border-bottom-left-radius: 0;}.hi-v4-input--size-lg {height: var(--hi-v4-height-10, 40px);font-size: var(--hi-v4-text-size-lg, 1rem);line-height: var(--hi-v4-text-lineheight-lg, 1.5rem);}.hi-v4-input--size-lg .hi-v4-input__text {padding: 7px calc(var(--hi-v4-spacing-6, 12px) - 1px);}.hi-v4-input--size-lg .hi-v4-input__inner,.hi-v4-input--size-lg .hi-v4-input__prepend,.hi-v4-input--size-lg .hi-v4-input__append {border-radius: var(--hi-v4-border-radius-md, 4px);}.hi-v4-input--size-lg .hi-v4-input__prepend {border-top-right-radius: 0;border-bottom-right-radius: 0;}.hi-v4-input--size-lg .hi-v4-input__append {border-top-left-radius: 0;border-bottom-left-radius: 0;}.hi-v4-input--appearance-line .hi-v4-input__inner {border-color: var(--hi-v4-color-gray-300, #dfe2e8);}.hi-v4-input--appearance-line .hi-v4-input__inner:not(.hi-v4-input__inner--disabled):hover {border-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-input--appearance-line .hi-v4-input__inner:not(.hi-v4-input__inner--disabled).hi-v4-input__inner--focused {-webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-primary-100, var(--hi-v4-color-brandblue-100, #bde2ff));box-shadow: 0 0 0 2px var(--hi-v4-color-primary-100, var(--hi-v4-color-brandblue-100, #bde2ff));border-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-input--appearance-line .hi-v4-input__inner:not(.hi-v4-input__inner--disabled).hi-v4-input__inner--invalid {border-color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959));}.hi-v4-input--appearance-line .hi-v4-input__inner:not(.hi-v4-input__inner--disabled).hi-v4-input__inner--invalid:hover {border-color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959));}.hi-v4-input--appearance-line .hi-v4-input__inner:not(.hi-v4-input__inner--disabled).hi-v4-input__inner--invalid.hi-v4-input__inner--focused {-webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-danger-100, var(--hi-v4-color-red-100, #ffd1c9));box-shadow: 0 0 0 2px var(--hi-v4-color-danger-100, var(--hi-v4-color-red-100, #ffd1c9));}.hi-v4-input--appearance-line .hi-v4-input__prepend,.hi-v4-input--appearance-line .hi-v4-input__append {border-color: var(--hi-v4-color-gray-300, #dfe2e8);}.hi-v4-input--appearance-unset .hi-v4-input__text {padding-left: 0;padding-right: 0;}.hi-v4-input--appearance-unset.hi-v4-input__outer--prepend .hi-v4-input__text,.hi-v4-input--appearance-unset .hi-v4-input__inner--prefix .hi-v4-input__text {padding-left: calc(var(--hi-v4-spacing-6, 12px) - 1px);}.hi-v4-input--appearance-unset.hi-v4-input__outer--append .hi-v4-input__text,.hi-v4-input--appearance-unset .hi-v4-input__inner--suffix .hi-v4-input__text {padding-right: calc(var(--hi-v4-spacing-6, 12px) - 1px);}.hi-v4-input--appearance-unset .hi-v4-input__inner {border-radius: 0;}.hi-v4-input--appearance-unset:not(.hi-v4-input__inner--disabled) .hi-v4-input__inner:hover {background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-input--appearance-filled .hi-v4-input__inner {background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-input--appearance-filled .hi-v4-input__inner:not(.hi-v4-input__inner--disabled):hover {background-color: var(--hi-v4-color-static-white, #fff);border-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-input--appearance-filled .hi-v4-input__inner:not(.hi-v4-input__inner--disabled).hi-v4-input__inner--focused {-webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-primary-100, var(--hi-v4-color-brandblue-100, #bde2ff));box-shadow: 0 0 0 2px var(--hi-v4-color-primary-100, var(--hi-v4-color-brandblue-100, #bde2ff));border-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));background-color: var(--hi-v4-color-static-white, #fff);}.hi-v4-input--appearance-filled .hi-v4-input__inner:not(.hi-v4-input__inner--disabled).hi-v4-input__inner--invalid {border-color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959));}.hi-v4-input--appearance-filled .hi-v4-input__inner:not(.hi-v4-input__inner--disabled).hi-v4-input__inner--invalid:hover {border-color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959));}.hi-v4-input--appearance-filled .hi-v4-input__inner:not(.hi-v4-input__inner--disabled).hi-v4-input__inner--invalid.hi-v4-input__inner--focused {-webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-danger-100, var(--hi-v4-color-red-100, #ffd1c9));box-shadow: 0 0 0 2px var(--hi-v4-color-danger-100, var(--hi-v4-color-red-100, #ffd1c9));}.hi-v4-input--appearance-underline .hi-v4-input__text {padding-left: 0;padding-right: 0;}.hi-v4-input--appearance-underline.hi-v4-input__outer--prepend .hi-v4-input__text,.hi-v4-input--appearance-underline .hi-v4-input__inner--prefix .hi-v4-input__text {padding-left: calc(var(--hi-v4-spacing-6, 12px) - 1px);}.hi-v4-input--appearance-underline.hi-v4-input__outer--append .hi-v4-input__text,.hi-v4-input--appearance-underline .hi-v4-input__inner--suffix .hi-v4-input__text {padding-right: calc(var(--hi-v4-spacing-6, 12px) - 1px);}.hi-v4-input--appearance-underline .hi-v4-input__inner {border-radius: 0;}.hi-v4-input--appearance-underline .hi-v4-input__inner::after {content: \"\";-webkit-box-sizing: border-box;box-sizing: border-box;display: block;position: absolute;bottom: 0;left: -1px;right: -1px;border-bottom: 1px solid var(--hi-v4-color-gray-300, #dfe2e8);-webkit-transition: all 0.3s;transition: all 0.3s;}.hi-v4-input--appearance-underline .hi-v4-input__inner:not(.hi-v4-input__inner--disabled):hover::after {border-bottom-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-input--appearance-underline .hi-v4-input__inner:not(.hi-v4-input__inner--disabled).hi-v4-input__inner--focused::after {border-bottom-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-input--appearance-underline .hi-v4-input__inner:not(.hi-v4-input__inner--disabled).hi-v4-input__inner--invalid::after {border-bottom-color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959));}.hi-v4-input--appearance-underline .hi-v4-input__inner:not(.hi-v4-input__inner--disabled).hi-v4-input__inner--invalid.hover::after {border-bottom-color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959));}.hi-v4-input--appearance-line .hi-v4-input__inner.hi-v4-input__inner--disabled, .hi-v4-input--appearance-filled .hi-v4-input__inner.hi-v4-input__inner--disabled {color: var(--hi-v4-color-gray-400, #b5bcc7);background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-input--appearance-line .hi-v4-input__inner.hi-v4-input__inner--disabled .hi-v4-input__text, .hi-v4-input--appearance-filled .hi-v4-input__inner.hi-v4-input__inner--disabled .hi-v4-input__text {color: var(--hi-v4-color-gray-400, #b5bcc7);}.hi-v4-input--appearance-unset .hi-v4-input__inner.hi-v4-input__inner--disabled, .hi-v4-input--appearance-underline .hi-v4-input__inner.hi-v4-input__inner--disabled {color: var(--hi-v4-color-gray-400, #b5bcc7);background-color: transparent;}.hi-v4-input--appearance-unset .hi-v4-input__inner.hi-v4-input__inner--disabled .hi-v4-input__text, .hi-v4-input--appearance-underline .hi-v4-input__inner.hi-v4-input__inner--disabled .hi-v4-input__text {color: var(--hi-v4-color-gray-400, #b5bcc7);}.hi-v4-input__outer--prepend .hi-v4-input__inner {border-top-left-radius: 0;border-bottom-left-radius: 0;}.hi-v4-input__outer--prepend-unset .hi-v4-input__prepend {border: none;padding: 0;}.hi-v4-input__outer--prepend-unset .hi-v4-input__prepend .hi-v4-mock-input {border-top-right-radius: 0;border-bottom-right-radius: 0;}.hi-v4-input__outer--prepend-unset .hi-v4-input__prepend .hi-v4-button {border-top-right-radius: 0;border-bottom-right-radius: 0;}.hi-v4-input__outer--append .hi-v4-input__inner {border-top-right-radius: 0;border-bottom-right-radius: 0;}.hi-v4-input__outer--append-unset .hi-v4-input__append {border: none;padding: 0;}.hi-v4-input__outer--append-unset .hi-v4-input__append .hi-v4-mock-input {border-top-left-radius: 0;border-bottom-left-radius: 0;}.hi-v4-input__outer--append-unset .hi-v4-input__append .hi-v4-button {border-top-left-radius: 0;border-bottom-left-radius: 0;}";
13
12
  __styleInject__(css_248z);
14
-
15
13
  export { css_248z as default };
package/lib/esm/use-input-cursor.js CHANGED
@@ -10,58 +10,50 @@
10
10
  import { useState, useRef, useCallback } from 'react';
11
11
  import { isNullish } from '@hi-ui/type-assertion';
12
12
  var defaultSeparator = ' ';
13
-
14
13
  var useInputCursor = function useInputCursor(_ref) {
15
14
  var inputElementRef = _ref.inputElementRef,
16
- value = _ref.value,
17
- formatter = _ref.formatter,
18
- _ref$separator = _ref.separator,
19
- separator = _ref$separator === void 0 ? defaultSeparator : _ref$separator;
20
-
15
+ value = _ref.value,
16
+ formatter = _ref.formatter,
17
+ _ref$separator = _ref.separator,
18
+ separator = _ref$separator === void 0 ? defaultSeparator : _ref$separator;
21
19
  var _useState = useState(0),
22
- position = _useState[0],
23
- setPosition = _useState[1];
24
-
25
- var startPositionRef = useRef(0); // 记录值变化前的位置
26
-
20
+ position = _useState[0],
21
+ setPosition = _useState[1];
22
+ var startPositionRef = useRef(0);
23
+ // 记录值变化前的位置
27
24
  var handleOnKeyDown = useCallback(function () {
28
25
  var _a, _b;
29
-
30
26
  startPositionRef.current = (_b = (_a = inputElementRef.current) === null || _a === void 0 ? void 0 : _a.selectionStart) !== null && _b !== void 0 ? _b : 0;
31
27
  }, [inputElementRef]);
32
28
  var handleChange = useCallback(function (evt) {
33
29
  var _a, _b;
34
-
35
30
  if (isNullish(value)) {
36
31
  return;
37
32
  }
38
-
39
- var val = evt.target.value; // 处理后的字符串
40
-
41
- var str = typeof formatter === 'function' ? formatter(val) : val; // 光标变化后的位置
42
-
43
- var endPosition = (_b = (_a = inputElementRef.current) === null || _a === void 0 ? void 0 : _a.selectionStart) !== null && _b !== void 0 ? _b : 0; // 字符串添加
44
-
33
+ var val = evt.target.value;
34
+ // 处理后的字符串
35
+ var str = typeof formatter === 'function' ? formatter(val) : val;
36
+ // 光标变化后的位置
37
+ var endPosition = (_b = (_a = inputElementRef.current) === null || _a === void 0 ? void 0 : _a.selectionStart) !== null && _b !== void 0 ? _b : 0;
38
+ // 字符串添加
45
39
  if (str.length > value.length) {
46
40
  // 值变化的长度
47
- var len = str.length - value.length; // 取出变化的值
48
-
49
- var addStr = str.substring(startPositionRef.current, startPositionRef.current + len); // 光标应该移动的格数
50
-
41
+ var len = str.length - value.length;
42
+ // 取出变化的值
43
+ var addStr = str.substring(startPositionRef.current, startPositionRef.current + len);
44
+ // 光标应该移动的格数
51
45
  var step = getSeparatorNum(addStr, separator);
52
46
  setPosition(endPosition + step);
53
- } // 字符串删除
54
-
55
-
47
+ }
48
+ // 字符串删除
56
49
  if (str.length < value.length) {
57
50
  if (str.charAt(endPosition - 1) === separator) {
58
51
  setPosition(endPosition - 1);
59
52
  } else {
60
53
  setPosition(endPosition);
61
54
  }
62
- } // 没有变化
63
-
64
-
55
+ }
56
+ // 没有变化
65
57
  if (str.length === value.length) {
66
58
  if (str.charAt(startPositionRef.current) === separator) {
67
59
  setPosition(endPosition + 1);
@@ -81,22 +73,16 @@ var useInputCursor = function useInputCursor(_ref) {
81
73
  * @param str
82
74
  * @returns
83
75
  */
84
-
85
-
86
76
  var getSeparatorNum = function getSeparatorNum(str, separator) {
87
77
  if (separator === void 0) {
88
78
  separator = defaultSeparator;
89
79
  }
90
-
91
80
  var index = str.indexOf(separator);
92
81
  var num = 0;
93
-
94
82
  while (index !== -1) {
95
83
  index = str.indexOf(separator, index + 1);
96
84
  num++;
97
85
  }
98
-
99
86
  return num;
100
87
  };
101
-
102
88
  export { useInputCursor };
package/lib/esm/use-input.js CHANGED
@@ -14,50 +14,46 @@ import { setAttrStatus } from '@hi-ui/dom-utils';
14
14
  import { callAllFuncs } from '@hi-ui/func-utils';
15
15
  import { format, pure, formatAmount } from './utils/index.js';
16
16
  import { useInputCursor } from './use-input-cursor.js';
17
- var EXTRA_TYPE = ['text', 'id', 'tel', 'card', 'amount', 'email']; // 需要格式化后校对光标的类型
18
-
17
+ var EXTRA_TYPE = ['text', 'id', 'tel', 'card', 'amount', 'email'];
18
+ // 需要格式化后校对光标的类型
19
19
  var RESET_CURSOR_TYPE = ['id', 'tel', 'card'];
20
-
21
20
  var useInput = function useInput(_ref) {
22
21
  var name = _ref.name,
23
- _ref$autoFocus = _ref.autoFocus,
24
- autoFocus = _ref$autoFocus === void 0 ? false : _ref$autoFocus,
25
- _ref$disabled = _ref.disabled,
26
- disabled = _ref$disabled === void 0 ? false : _ref$disabled,
27
- _ref$readOnly = _ref.readOnly,
28
- readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
29
- maxLength = _ref.maxLength,
30
- placeholder = _ref.placeholder,
31
- _ref$defaultValue = _ref.defaultValue,
32
- defaultValue = _ref$defaultValue === void 0 ? '' : _ref$defaultValue,
33
- valueProp = _ref.value,
34
- onChange = _ref.onChange,
35
- onFocus = _ref.onFocus,
36
- onBlur = _ref.onBlur,
37
- onKeyDown = _ref.onKeyDown,
38
- _ref$trimValueOnBlur = _ref.trimValueOnBlur,
39
- trimValueOnBlur = _ref$trimValueOnBlur === void 0 ? false : _ref$trimValueOnBlur,
40
- _ref$type = _ref.type,
41
- type = _ref$type === void 0 ? 'text' : _ref$type,
42
- clearElementRef = _ref.clearElementRef,
43
- inputElementRef = _ref.inputElementRef; // Object.is 避免 trimValueOnBlur 和 点击 clearIcon 触发 2 次相同的 onCHange
44
-
22
+ _ref$autoFocus = _ref.autoFocus,
23
+ autoFocus = _ref$autoFocus === void 0 ? false : _ref$autoFocus,
24
+ _ref$disabled = _ref.disabled,
25
+ disabled = _ref$disabled === void 0 ? false : _ref$disabled,
26
+ _ref$readOnly = _ref.readOnly,
27
+ readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
28
+ maxLength = _ref.maxLength,
29
+ placeholder = _ref.placeholder,
30
+ _ref$defaultValue = _ref.defaultValue,
31
+ defaultValue = _ref$defaultValue === void 0 ? '' : _ref$defaultValue,
32
+ valueProp = _ref.value,
33
+ onChange = _ref.onChange,
34
+ onFocus = _ref.onFocus,
35
+ onBlur = _ref.onBlur,
36
+ onKeyDown = _ref.onKeyDown,
37
+ _ref$trimValueOnBlur = _ref.trimValueOnBlur,
38
+ trimValueOnBlur = _ref$trimValueOnBlur === void 0 ? false : _ref$trimValueOnBlur,
39
+ _ref$type = _ref.type,
40
+ type = _ref$type === void 0 ? 'text' : _ref$type,
41
+ clearElementRef = _ref.clearElementRef,
42
+ inputElementRef = _ref.inputElementRef;
43
+ // Object.is 避免 trimValueOnBlur 和 点击 clearIcon 触发 2 次相同的 onCHange
45
44
  var _useUncontrolledState = useUncontrolledState(defaultValue, valueProp, onChange, Object.is),
46
- value = _useUncontrolledState[0],
47
- tryChangeValue = _useUncontrolledState[1];
48
-
45
+ value = _useUncontrolledState[0],
46
+ tryChangeValue = _useUncontrolledState[1];
49
47
  var _useInputCursor = useInputCursor({
50
- inputElementRef: inputElementRef,
51
- value: format(value, type)
52
- }),
53
- formatHandleChange = _useInputCursor.handleChange,
54
- handleOnKeyDown = _useInputCursor.handleOnKeyDown,
55
- position = _useInputCursor.position;
48
+ inputElementRef: inputElementRef,
49
+ value: format(value, type)
50
+ }),
51
+ formatHandleChange = _useInputCursor.handleChange,
52
+ handleOnKeyDown = _useInputCursor.handleOnKeyDown,
53
+ position = _useInputCursor.position;
56
54
  /**
57
55
  * 修复值格式化时光标位置问题：https://github.com/XiaoMi/hiui/issues/2438
58
56
  */
59
-
60
-
61
57
  var needResetCursorPosition = useMemo(function () {
62
58
  return RESET_CURSOR_TYPE.includes(type);
63
59
  }, [type]);
@@ -65,18 +61,15 @@ var useInput = function useInput(_ref) {
65
61
  if (trim === void 0) {
66
62
  trim = false;
67
63
  }
68
-
69
64
  evt.persist();
70
65
  var nextValue = evt.target.value;
71
- var valueTrue = pure(nextValue, type); // 防溢出，保证 onChange 拿到的是值是最新的 formatted value
72
-
66
+ var valueTrue = pure(nextValue, type);
67
+ // 防溢出，保证 onChange 拿到的是值是最新的 formatted value
73
68
  var value = format(nextValue, type);
74
-
75
69
  if (trim) {
76
70
  valueTrue = valueTrue.trim();
77
71
  value = value.trim();
78
72
  }
79
-
80
73
  var event = Object.create(evt);
81
74
  event.target = Object.assign(Object.assign({}, evt.target), {
82
75
  value: value
@@ -84,31 +77,27 @@ var useInput = function useInput(_ref) {
84
77
  tryChangeValue(valueTrue, event);
85
78
  needResetCursorPosition && formatHandleChange(event);
86
79
  }, [formatHandleChange, needResetCursorPosition, tryChangeValue, type]);
87
-
88
80
  var _useState = useState(autoFocus),
89
- focused = _useState[0],
90
- setFocused = _useState[1];
91
-
81
+ focused = _useState[0],
82
+ setFocused = _useState[1];
92
83
  var handleFocus = useLatestCallback(function (evt) {
93
84
  setFocused(true);
94
85
  onFocus === null || onFocus === void 0 ? void 0 : onFocus(evt);
95
86
  });
96
87
  var handleBlur = useLatestCallback(function (event) {
97
- var relatedTarget = event.relatedTarget; // 拦截 clearIcon 点击清空，阻止其触发 input 失焦
98
-
88
+ var relatedTarget = event.relatedTarget;
89
+ // 拦截 clearIcon 点击清空，阻止其触发 input 失焦
99
90
  if (clearElementRef && clearElementRef.current && clearElementRef.current === relatedTarget) {
100
91
  return;
101
92
  }
102
-
103
- setFocused(false); // amount 自动添加小数
104
-
93
+ setFocused(false);
94
+ // amount 自动添加小数
105
95
  if (type === 'amount') {
106
96
  event.target.value = formatAmount(value, true);
107
97
  handleChange(event, trimValueOnBlur);
108
98
  } else if (trimValueOnBlur) {
109
99
  handleChange(event, true);
110
100
  }
111
-
112
101
  onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
113
102
  });
114
103
  var nativeInputProps = useMemo(function () {
@@ -147,5 +136,4 @@ var useInput = function useInput(_ref) {
147
136
  getInputProps: getInputProps
148
137
  };
149
138
  };
150
-
151
139
  export { useInput };
package/lib/esm/utils/index.js CHANGED
@@ -7,18 +7,15 @@
7
7
  * This source code is licensed under the MIT license found in the
8
8
  * LICENSE file in the root directory of this source tree.
9
9
  */
10
-
11
10
  /**
12
11
  * 格式化身份证
13
12
  */
14
13
  var formatId = function formatId(val) {
15
14
  val = val.replace(/[^a-zA-Z0-9]/g, '');
16
15
  var len = val.length;
17
-
18
16
  if (val === '' || len < 7) {
19
17
  return val;
20
18
  }
21
-
22
19
  if (len < 11) {
23
20
  return val.slice(0, 6) + ' ' + val.slice(6, 10);
24
21
  } else if (len < 15) {
@@ -27,7 +24,6 @@ var formatId = function formatId(val) {
27
24
  return val.slice(0, 6) + ' ' + val.slice(6, 10) + ' ' + val.slice(10, 14) + ' ' + val.slice(14, 18);
28
25
  }
29
26
  };
30
-
31
27
  var pureId = function pureId(val) {
32
28
  var tmp = val.replace(/[^\d|.]/g, '');
33
29
  return tmp.slice(0, 18);
@@ -35,23 +31,18 @@ var pureId = function pureId(val) {
35
31
  /**
36
32
  * 格式化手机号
37
33
  */
38
-
39
-
40
34
  var formatTel = function formatTel(val) {
41
35
  val = val.replace(/\D/g, '');
42
36
  var len = val.length;
43
-
44
37
  if (val === '' || len < 4) {
45
38
  return val;
46
39
  }
47
-
48
40
  if (len < 8) {
49
41
  return val.slice(0, 3) + ' ' + val.slice(3, 7);
50
42
  } else {
51
43
  return val.slice(0, 3) + ' ' + val.slice(3, 7) + ' ' + val.slice(7, 11);
52
44
  }
53
45
  };
54
-
55
46
  var pureTel = function pureTel(val) {
56
47
  var tmp = val.replace(/[^\d|.]/g, '');
57
48
  return tmp.slice(0, 11);
@@ -59,16 +50,12 @@ var pureTel = function pureTel(val) {
59
50
  /**
60
51
  * 格式化银行卡号
61
52
  */
62
-
63
-
64
53
  var formatCard = function formatCard(val) {
65
54
  val = val.replace(/\D/g, '');
66
55
  var len = val.length;
67
-
68
56
  if (val === '' || val.length < 5) {
69
57
  return val;
70
58
  }
71
-
72
59
  if (len < 9) {
73
60
  return val.slice(0, 4) + ' ' + val.slice(4, 8);
74
61
  } else if (len < 13) {
@@ -79,7 +66,6 @@ var formatCard = function formatCard(val) {
79
66
  return val.slice(0, 4) + ' ' + val.slice(4, 8) + ' ' + val.slice(8, 12) + ' ' + val.slice(12, 16) + ' ' + val.slice(16, 19);
80
67
  }
81
68
  };
82
-
83
69
  var pureCard = function pureCard(val) {
84
70
  var tmp = val.replace(/[^\d|.]/g, '');
85
71
  return tmp.slice(0, 19);
@@ -88,59 +74,44 @@ var pureCard = function pureCard(val) {
88
74
  * 金额自动生成小数
89
75
  * @param {string} val 需要处理的值
90
76
  */
91
-
92
-
93
77
  var formatAmount = function formatAmount(val, fill) {
94
78
  if (fill === void 0) {
95
79
  fill = false;
96
80
  }
97
-
98
81
  val = val.replace(/[^\d|.|,]/g, '').replace(/(\.\d*?)(\.|,).*/, function (_, $1) {
99
82
  return $1;
100
83
  });
101
-
102
84
  if (fill) {
103
85
  if (!val) return val;
104
86
  return val.indexOf('.') > -1 ? val : val + '.00';
105
87
  }
106
-
107
88
  return val;
108
89
  };
109
-
110
90
  var pureAmount = function pureAmount(val) {
111
91
  var tmp = val.replace(/[^\d|.]/g, '');
112
92
  return tmp;
113
93
  };
114
-
115
94
  var formatEmail = function formatEmail(val) {
116
95
  return val.replace(/\W/g, '');
117
96
  };
118
-
119
97
  var pureEmail = function pureEmail(val) {
120
98
  return val;
121
99
  };
122
100
  /**
123
101
  * 输入规则
124
102
  */
125
-
126
-
127
103
  var format = function format(val, type) {
128
104
  switch (type) {
129
105
  case 'id':
130
106
  return formatId(val);
131
-
132
107
  case 'tel':
133
108
  return formatTel(val);
134
-
135
109
  case 'card':
136
110
  return formatCard(val);
137
-
138
111
  case 'email':
139
112
  return formatEmail(val);
140
-
141
113
  case 'amount':
142
114
  return formatAmount(val);
143
-
144
115
  default:
145
116
  return val;
146
117
  }
@@ -148,28 +119,20 @@ var format = function format(val, type) {
148
119
  /**
149
120
  * 净化规则
150
121
  */
151
-
152
-
153
122
  var pure = function pure(val, type) {
154
123
  switch (type) {
155
124
  case 'id':
156
125
  return pureId(val);
157
-
158
126
  case 'tel':
159
127
  return pureTel(val);
160
-
161
128
  case 'card':
162
129
  return pureCard(val);
163
-
164
130
  case 'email':
165
131
  return pureEmail(val);
166
-
167
132
  case 'amount':
168
133
  return pureAmount(val);
169
-
170
134
  default:
171
135
  return val;
172
136
  }
173
137
  };
174
-
175
138
  export { format, formatAmount, formatCard, formatEmail, formatId, formatTel, pure, pureAmount, pureCard, pureEmail, pureId, pureTel };