@hi-ui/input 4.0.0-alpha.2 → 4.0.0-alpha.20

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 (18) hide show
  1. package/lib/cjs/Input.js +42 -13
  2. package/lib/cjs/Input.js.map +1 -1
  3. package/lib/cjs/MockInput.js +151 -0
  4. package/lib/cjs/MockInput.js.map +1 -0
  5. package/lib/cjs/index.js +4 -1
  6. package/lib/cjs/index.js.map +1 -1
  7. package/lib/cjs/styles/index.scss.js +2 -2
  8. package/lib/esm/Input.js +43 -13
  9. package/lib/esm/Input.js.map +1 -1
  10. package/lib/esm/MockInput.js +129 -0
  11. package/lib/esm/MockInput.js.map +1 -0
  12. package/lib/esm/index.js +2 -1
  13. package/lib/esm/index.js.map +1 -1
  14. package/lib/esm/styles/index.scss.js +2 -2
  15. package/lib/types/Input.d.ts +9 -27
  16. package/lib/types/MockInput.d.ts +134 -0
  17. package/lib/types/index.d.ts +1 -0
  18. package/package.json +10 -9
package/lib/cjs/Input.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /** @LICENSE
2
- * @hi-ui/input v4.0.0-alpha.1
2
+ * @hi-ui/input
3
3
  * https://github.com/XiaoMi/hiui/tree/master/packages/ui/input#readme
4
4
  *
5
5
  * Copyright (c) HIUI <mi-hiui@xiaomi.com>.
@@ -37,9 +37,7 @@ function _interopDefaultLegacy(e) {
37
37
 
38
38
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
39
39
 
40
- var _role = 'input';
41
-
42
- var _prefix = classname.getPrefixCls(_role);
40
+ var _prefix = classname.getPrefixCls('input');
43
41
  /**
44
42
  * TODO: What is Input
45
43
  */
@@ -49,7 +47,7 @@ var Input = /*#__PURE__*/React.forwardRef(function (_a, ref) {
49
47
  var _a$prefixCls = _a.prefixCls,
50
48
  prefixCls = _a$prefixCls === void 0 ? _prefix : _a$prefixCls,
51
49
  _a$role = _a.role,
52
- role = _a$role === void 0 ? _role : _a$role,
50
+ role = _a$role === void 0 ? 'input' : _a$role,
53
51
  className = _a.className,
54
52
  style = _a.style,
55
53
  _a$autoFocus = _a.autoFocus,
@@ -63,7 +61,7 @@ var Input = /*#__PURE__*/React.forwardRef(function (_a, ref) {
63
61
  _a$type = _a.type,
64
62
  type = _a$type === void 0 ? 'text' : _a$type,
65
63
  _a$size = _a.size,
66
- size = _a$size === void 0 ? 'sm' : _a$size,
64
+ size = _a$size === void 0 ? 'md' : _a$size,
67
65
  _a$appearance = _a.appearance,
68
66
  appearance = _a$appearance === void 0 ? 'outline' : _a$appearance,
69
67
  placeholder = _a.placeholder,
@@ -81,7 +79,31 @@ var Input = /*#__PURE__*/React.forwardRef(function (_a, ref) {
81
79
  clearableTrigger = _a$clearableTrigger === void 0 ? 'hover' : _a$clearableTrigger,
82
80
  _a$clearable = _a.clearable,
83
81
  clearable = _a$clearable === void 0 ? false : _a$clearable,
84
- rest = tslib.__rest(_a, ["prefixCls", "role", "className", "style", "autoFocus", "disabled", "readOnly", "name", "maxLength", "type", "size", "appearance", "floatLabel", "placeholder", "prepend", "append", "prefix", "suffix", "defaultValue", "value", "onChange", "onFocus", "onBlur", "clearableTrigger", "clearable"]);
82
+ _a$trimValueOnBlur = _a.trimValueOnBlur,
83
+ trimValueOnBlur = _a$trimValueOnBlur === void 0 ? false : _a$trimValueOnBlur,
84
+ _a$invalid = _a.invalid,
85
+ invalid = _a$invalid === void 0 ? false : _a$invalid,
86
+ rest = tslib.__rest(_a, ["prefixCls", "role", "className", "style", "autoFocus", "disabled", "readOnly", "name", "maxLength", "type", "size", "appearance", "floatLabel", "placeholder", "prepend", "append", "prefix", "suffix", "defaultValue", "value", "onChange", "onFocus", "onBlur", "clearableTrigger", "clearable", "trimValueOnBlur", "invalid"]); // @TODO: 临时方案，后面迁移至 InputGroup
87
+
88
+
89
+ var _useMemo = React.useMemo(function () {
90
+ var shouldUnset = [false, false]; // @ts-ignore
91
+ // @ts-ignore
92
+
93
+ if ( /*#__PURE__*/React.isValidElement(prepend) && ['Select', 'Button'].includes(prepend.type.HiName)) {
94
+ shouldUnset[0] = true;
95
+ } // @ts-ignore
96
+ // @ts-ignore
97
+
98
+
99
+ if ( /*#__PURE__*/React.isValidElement(append) && ['Select', 'Button'].includes(append.type.HiName)) {
100
+ shouldUnset[1] = true;
101
+ }
102
+
103
+ return shouldUnset;
104
+ }, [prepend, append]),
105
+ unsetPrepend = _useMemo[0],
106
+ unsetAppend = _useMemo[1];
85
107
 
86
108
  var inputRef = React.useRef(null);
87
109
  var proxyOnChange = React.useCallback(function (value, evt) {
@@ -108,8 +130,14 @@ var Input = /*#__PURE__*/React.forwardRef(function (_a, ref) {
108
130
  }, [onFocus]);
109
131
  var handleBlur = React.useCallback(function (event) {
110
132
  setFocused(false);
133
+
134
+ if (trimValueOnBlur) {
135
+ var nextValue = event.target.value;
136
+ tryChangeValue(nextValue.trim(), event);
137
+ }
138
+
111
139
  onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
112
- }, [onBlur]);
140
+ }, [onBlur, tryChangeValue, trimValueOnBlur]);
113
141
  var focus = React.useCallback(function () {
114
142
  var _a;
115
143
 
@@ -136,7 +164,7 @@ var Input = /*#__PURE__*/React.forwardRef(function (_a, ref) {
136
164
 
137
165
 
138
166
  var showClearableIcon = clearable && !!value && !disabled;
139
- var cls = classname.cx(className, prefixCls + "__outer", prepend && prefixCls + "__outer--prepend", append && prefixCls + "__outer--append", prefixCls + "--appearance-" + appearance, prefixCls + "--size-" + size);
167
+ var cls = classname.cx(className, prefixCls + "__outer", prepend && prefixCls + "__outer--prepend", prepend && unsetPrepend && prefixCls + "__outer--prepend-unset", append && prefixCls + "__outer--append", append && unsetAppend && prefixCls + "__outer--append-unset", prefixCls + "--appearance-" + appearance, prefixCls + "--size-" + size);
140
168
  return /*#__PURE__*/React__default['default'].createElement("div", {
141
169
  role: role,
142
170
  className: cls,
@@ -144,7 +172,8 @@ var Input = /*#__PURE__*/React.forwardRef(function (_a, ref) {
144
172
  }, prepend ? /*#__PURE__*/React__default['default'].createElement("div", {
145
173
  className: prefixCls + "__prepend"
146
174
  }, prepend) : null, /*#__PURE__*/React__default['default'].createElement("div", {
147
- className: classname.cx(prefixCls + "__inner", prefix && prefixCls + "__inner--prefix", suffix && prefixCls + "__inner--suffix", focused && "focused", disabled && 'disabled', readOnly && 'readonly'),
175
+ className: classname.cx(prefixCls + "__inner", prefix && prefixCls + "__inner--prefix", suffix && prefixCls + "__inner--suffix", // TODO: bem规范统一
176
+ focused && "focused", disabled && 'disabled', readOnly && 'readonly', invalid && 'invalid'),
148
177
  onMouseOver: function onMouseOver(e) {
149
178
  setHover(true);
150
179
  },
@@ -177,7 +206,7 @@ if (env.__DEV__) {
177
206
  Input.displayName = 'Input';
178
207
  }
179
208
  /**
180
- * 伪造目标事件 target
209
+ * 模拟伪装目标事件 target
181
210
  *
182
211
  * @param target
183
212
  * @param evt
@@ -188,9 +217,9 @@ if (env.__DEV__) {
188
217
 
189
218
 
190
219
  function onChangeMock(onChange, evt, target, targetValue) {
191
- var event = evt; // 点击 clearIcon 时，代理 onChange 的事件对象 target 指向 input.target
220
+ var event = evt; // 点击 clearIcon 或者 失焦 trim 时，都会代理 onChange 的事件对象 target 指向 input.target
192
221
 
193
- if (evt.type === 'click') {
222
+ if (evt.type !== 'change') {
194
223
  if (!target) return;
195
224
  var originalTargetValue = target.value;
196
225
  event = Object.create(evt);
package/lib/cjs/Input.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Input.js","sources":["../../src/Input.tsx"],"sourcesContent":[null],"names":["_role","_prefix","getPrefixCls","Input","forwardRef","_a","ref","prefixCls","role","className","style","autoFocus","disabled","readOnly","name","maxLength","type","size","appearance","placeholder","prepend","append","prefix","suffix","defaultValue","valueProp","value","onChange","onFocus","onBlur","clearableTrigger","clearable","rest","inputRef","useRef","proxyOnChange","useCallback","evt","onChangeMock","current","useUncontrolledState","tryChangeValue","handleChange","nextValue","target","useState","focused","setFocused","handleFocus","handleBlur","event","focus","handleReset","nativeInputProps","useMemo","hover","setHover","showClearableIcon","cls","cx","React","onMouseOver","e","onMouseLeave","useMergeRefs","tabIndex","onClick","CloseCircleFilled","__DEV__","displayName","targetValue","originalTargetValue","Object","create","currentTarget"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA,IAAMA,KAAK,GAAG,OAAd;;AACA,IAAMC,OAAO,GAAGC,sBAAAA,CAAaF,KAAbE,CAAhB;AAEA;;;;;IAGaC,KAAK,gBAAGC,gBAAAA,CACnB,UACEC,EADF,EA6BEC,GA7BF;wBAEIC;MAAAA,sCAAYN;mBACZO;MAAAA,4BAAOR;MACPS,eAAAA;MACAC,WAAAA;wBACAC;MAAAA,sCAAY;uBACZC;MAAAA,oCAAW;uBACXC;MAAAA,oCAAW;MACXC,UAAAA;MACAC,eAAAA;mBACAC;MAAAA,4BAAO;mBACPC;MAAAA,4BAAO;yBACPC;MAAAA,wCAAa;MAEbC,iBAAAA;MACAC,aAAAA;MACAC,YAAAA;MACAC,YAAAA;MACAC,YAAAA;2BACAC;MAAAA,4CAAe;MACRC,eAAPC;MACAC,cAAAA;MACAC,aAAAA;MACAC,YAAAA;+BACAC;MAAAA,oDAAmB;wBACnBC;MAAAA,sCAAY;MACTC,wBA1BL,YAAA,QAAA,aAAA,SAAA,aAAA,YAAA,YAAA,QAAA,aAAA,QAAA,QAAA,cAAA,cAAA,eAAA,WAAA,UAAA,UAAA,UAAA,gBAAA,SAAA,YAAA,WAAA,UAAA,oBAAA,aAAA;;MA8BMC,QAAQ,GAAGC,YAAAA,CAAyB,IAAzBA;MAEXC,aAAa,GAAGC,iBAAAA,CACpB,UAACV,KAAD,EAAgBW,GAAhB;QACM,CAACV,UAAU;AACfW,IAAAA,YAAY,CAACX,QAAD,EAAWU,GAAX,EAAgBJ,QAAQ,CAACM,OAAzB,EAAkCb,KAAlC,CAAZY;AAH6B,GAAXF,EAKpB,CAACT,QAAD,CALoBS;;8BAQUI,yCAAAA,CAAqBhB,YAArBgB,EAAmCf,SAAnCe,EAA8CL,aAA9CK;MAAzBd,KAAP;MAAce,cAAd;;MAEMC,YAAY,GAAGN,iBAAAA,CACnB,UAACC,GAAD;QACQM,SAAS,GAAGN,GAAG,CAACO,MAAJP,CAAWX;AAC7Be,IAAAA,cAAc,CAACE,SAAD,EAAYN,GAAZ,CAAdI;AAH4B,GAAXL,EAKnB,CAACK,cAAD,CALmBL;;kBAQSS,cAAAA,CAASlC,SAATkC;MAAvBC,OAAP;MAAgBC,UAAhB;;MAEMC,WAAW,GAAGZ,iBAAAA,CAClB,UAACC,GAAD;AACEU,IAAAA,UAAU,CAAC,IAAD,CAAVA;AACAnB,IAAAA,OAAO,SAAPA,IAAAA,OAAO,WAAPA,SAAAA,GAAAA,OAAO,CAAGS,GAAH,CAAPT;AAH2B,GAAXQ,EAKlB,CAACR,OAAD,CALkBQ;MAQda,UAAU,GAAGb,iBAAAA,CACjB,UAACc,KAAD;AACEH,IAAAA,UAAU,CAAC,KAAD,CAAVA;AACAlB,IAAAA,MAAM,SAANA,IAAAA,MAAM,WAANA,SAAAA,GAAAA,MAAM,CAAGqB,KAAH,CAANrB;AAH0B,GAAXO,EAKjB,CAACP,MAAD,CALiBO;MAQbe,KAAK,GAAGf,iBAAAA,CAAY;;;UACxBH,QAAQ,CAACM,iDAASY;AADK,GAAXf,EAEX,EAFWA;MAIRgB,WAAW,GAAGhB,iBAAAA,CAClB,UAACC,GAAD;AACEI,IAAAA,cAAc,CAAC,EAAD,EAAKJ,GAAL,CAAdI;AACAU,IAAAA,KAAK;AAHsB,GAAXf,EAKlB,CAACK,cAAD,EAAiBU,KAAjB,CALkBf;MAQdiB,gBAAgB,GAAGC,aAAAA,CACvB;WAAO;AACLxC,MAAAA,IAAI,EAAJA,IADK;AAELF,MAAAA,QAAQ,EAARA,QAFK;AAGLC,MAAAA,QAAQ,EAARA,QAHK;AAILF,MAAAA,SAAS,EAATA,SAJK;AAKLQ,MAAAA,WAAW,EAAXA,WALK;AAMLJ,MAAAA,SAAS,EAATA;AANK;AADuB,GAAPuC,EASvB,CAAC1C,QAAD,EAAWC,QAAX,EAAqBF,SAArB,EAAgCQ,WAAhC,EAA6CJ,SAA7C,EAAwDD,IAAxD,CATuBwC;;mBAYCT,cAAAA,CAAS,KAATA;MAAnBU,KAAP;MAAcC,QAAd;;;MAEMC,iBAAiB,GAAG1B,SAAS,IAAI,CAAC,CAACL,KAAfK,IAAwB,CAACnB;MAE7C8C,GAAG,GAAGC,YAAAA,CACVlD,SADUkD,EAEPpD,SAFS,YAAFoD,EAGVvC,OAAO,IAAOb,SAAP,qBAHGoD,EAIVtC,MAAM,IAAOd,SAAP,oBAJIoD,EAKPpD,SALS,kBAKTA,GAAyBW,UALlByC,EAMPpD,SANS,YAMTA,GAAmBU,IANZ0C;sBAUVC,yBAAAA,cAAAA,MAAAA;AAAKpD,IAAAA,IAAI,EAAEA;AAAMC,IAAAA,SAAS,EAAEiD;AAAKhD,IAAAA,KAAK,EAAEA;GAAxCkD,EACGxC,OAAO,gBAAGwC,yBAAAA,cAAAA,MAAAA;AAAKnD,IAAAA,SAAS,EAAKF,SAAL;GAAdqD,EAA0CxC,OAA1CwC,CAAH,GAA8D,IADxEA,eAEEA,yBAAAA,cAAAA,MAAAA;AACEnD,IAAAA,SAAS,EAAEkD,YAAAA,CACNpD,SADQ,YAAFoD,EAETrC,MAAM,IAAOf,SAAP,oBAFGoD,EAGTpC,MAAM,IAAOhB,SAAP,oBAHGoD,EAITb,OAAO,aAJEa,EAKT/C,QAAQ,IAAI,UALH+C,EAMT9C,QAAQ,IAAI,UANH8C;AAQXE,IAAAA,WAAW,EAAE,oBAAA,CAACC,CAAD;AACXN,MAAAA,QAAQ,CAAC,IAAD,CAARA;;AAEFO,IAAAA,YAAY,EAAE,qBAAA,CAACD,CAAD;AACZN,MAAAA,QAAQ,CAAC,KAAD,CAARA;;GAbJI,EAgBGtC,MAAM,gBAAGsC,yBAAAA,cAAAA,OAAAA;AAAMnD,IAAAA,SAAS,EAAKF,SAAL;GAAfqD,EAA0CtC,MAA1CsC,CAAH,GAA8D,IAhBvEA,eAkBEA,yBAAAA,cAAAA,QAAAA;AACEtD,IAAAA,GAAG,EAAE0D,yBAAAA,CAAa1D,GAAb0D,EAAkB/B,QAAlB+B;AACLvD,IAAAA,SAAS,EAAEkD,YAAAA,CACTpD,SADSoD,EAETb,OAAO,aAFEa,EAGT/C,QAAQ,IAAI,UAHH+C,EAIT9C,QAAQ,IAAI,UAJH8C;AAMX3C,IAAAA,IAAI,EAAEA;AACNU,IAAAA,KAAK,EAAEA;AACPC,IAAAA,QAAQ,EAAEe;AACVd,IAAAA,OAAO,EAAEoB;AACTnB,IAAAA,MAAM,EAAEoB;KACJjB,MACAqB,iBAdNO,CAlBFA,EAmCGrC,MAAM,IAAIkC,iBAAVlC,gBACCqC,yBAAAA,cAAAA,OAAAA;AAAMnD,IAAAA,SAAS,EAAKF,SAAL;GAAfqD,EACGH,iBAAiB,gBAChBG,yBAAAA,cAAAA,OAAAA;AACEnD,IAAAA,SAAS,EAAEkD,YAAAA,CACNpD,SADQ,YAAFoD,EAET,CAAC7B,gBAAgB,KAAK,QAArBA,IAAiCyB,KAAlC,KAA4C,QAFnCI;AAIXnD,IAAAA,IAAI,EAAC;AACLyD,IAAAA,QAAQ,EAAE,CAAC;AACXC,IAAAA,OAAO,EAAEd;GAPXQ,eASEA,yBAAAA,cAAAA,CAACO,uBAADP,MAAAA,CATFA,CADgB,GAYd,IAbNA,EAcGrC,MAdHqC,CADDrC,GAiBG,IApDNqC,CAFFA,EAwDGvC,MAAM,gBAAGuC,yBAAAA,cAAAA,MAAAA;AAAKnD,IAAAA,SAAS,EAAKF,SAAL;GAAdqD,EAAyCvC,MAAzCuC,CAAH,GAA4D,IAxDrEA;AA5GyB,CAAVxD;;AAkRrB,IAAIgE,WAAJ,EAAa;AACXjE,EAAAA,KAAK,CAACkE,WAANlE,GAAoB,OAApBA;;AAGF;;;;;;;;;;;SASgBmC,aACdX,UACAU,KACAO,QACA0B;MAEIpB,KAAK,GAAGb;;MAGRA,GAAG,CAACrB,IAAJqB,KAAa,SAAS;QACpB,CAACO,QAAQ;QAEP2B,mBAAmB,GAAG3B,MAAM,CAAClB;AACnCwB,IAAAA,KAAK,GAAGsB,MAAM,CAACC,MAAPD,CAAcnC,GAAdmC,CAARtB;AAEAA,IAAAA,KAAK,CAACN,MAANM,GAAeN,MAAfM;AACAA,IAAAA,KAAK,CAACwB,aAANxB,GAAsBN,MAAtBM;AACAN,IAAAA,MAAM,CAAClB,KAAPkB,GAAe0B,WAAf1B;AACAjB,IAAAA,QAAQ,CAACuB,KAAD,CAARvB,CATwB;;AAWxBiB,IAAAA,MAAM,CAAClB,KAAPkB,GAAe2B,mBAAf3B;;;;AAIFjB,EAAAA,QAAQ,CAACuB,KAAD,CAARvB;;;;"}
1
+ {"version":3,"file":"Input.js","sources":["../../src/Input.tsx"],"sourcesContent":[null],"names":["_prefix","getPrefixCls","Input","forwardRef","_a","ref","prefixCls","role","className","style","autoFocus","disabled","readOnly","name","maxLength","type","size","appearance","placeholder","prepend","append","prefix","suffix","defaultValue","valueProp","value","onChange","onFocus","onBlur","clearableTrigger","clearable","trimValueOnBlur","invalid","rest","useMemo","shouldUnset","isValidElement","includes","HiName","unsetPrepend","unsetAppend","inputRef","useRef","proxyOnChange","useCallback","evt","onChangeMock","current","useUncontrolledState","tryChangeValue","handleChange","nextValue","target","useState","focused","setFocused","handleFocus","handleBlur","event","trim","focus","handleReset","nativeInputProps","hover","setHover","showClearableIcon","cls","cx","React","onMouseOver","e","onMouseLeave","useMergeRefs","tabIndex","onClick","CloseCircleFilled","__DEV__","displayName","targetValue","originalTargetValue","Object","create","currentTarget"],"mappings":"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"}
package/lib/cjs/MockInput.js ADDED
@@ -0,0 +1,151 @@
1
+ /** @LICENSE
2
+ * @hi-ui/input
3
+ * https://github.com/XiaoMi/hiui/tree/master/packages/ui/input#readme
4
+ *
5
+ * Copyright (c) HIUI <mi-hiui@xiaomi.com>.
6
+ *
7
+ * This source code is licensed under the MIT license found in the
8
+ * LICENSE file in the root directory of this source tree.
9
+ */
10
+ 'use strict';
11
+
12
+ var _typeof = require("@babel/runtime/helpers/typeof");
13
+
14
+ Object.defineProperty(exports, '__esModule', {
15
+ value: true
16
+ });
17
+
18
+ var tslib = require('tslib');
19
+
20
+ var React = require('react');
21
+
22
+ var classname = require('@hi-ui/classname');
23
+
24
+ var env = require('@hi-ui/env');
25
+
26
+ var useUncontrolledState = require('@hi-ui/use-uncontrolled-state');
27
+
28
+ var icons = require('@hi-ui/icons');
29
+
30
+ function _interopDefaultLegacy(e) {
31
+ return e && _typeof(e) === 'object' && 'default' in e ? e : {
32
+ 'default': e
33
+ };
34
+ }
35
+
36
+ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
37
+
38
+ var _role = 'mock-input';
39
+
40
+ var _prefix = classname.getPrefixCls(_role);
41
+
42
+ var NOOP_VALUE = '';
43
+ var NOOP_ARRAY = [];
44
+ /**
45
+ * 支持自定义渲染输入框内容，暂时仅供内部 Picker 类组件使用，不对外提供
46
+ */
47
+
48
+ var MockInput = /*#__PURE__*/React.forwardRef(function (_a, ref) {
49
+ var _a$prefixCls = _a.prefixCls,
50
+ prefixCls = _a$prefixCls === void 0 ? _prefix : _a$prefixCls,
51
+ _a$role = _a.role,
52
+ role = _a$role === void 0 ? _role : _a$role,
53
+ className = _a.className,
54
+ _a$data = _a.data,
55
+ data = _a$data === void 0 ? NOOP_ARRAY : _a$data,
56
+ _a$defaultValue = _a.defaultValue,
57
+ defaultValue = _a$defaultValue === void 0 ? NOOP_VALUE : _a$defaultValue,
58
+ valueProp = _a.value,
59
+ onChange = _a.onChange,
60
+ placeholder = _a.placeholder,
61
+ _a$disabled = _a.disabled,
62
+ disabled = _a$disabled === void 0 ? false : _a$disabled,
63
+ _a$clearable = _a.clearable,
64
+ clearable = _a$clearable === void 0 ? false : _a$clearable,
65
+ _a$focused = _a.focused,
66
+ focused = _a$focused === void 0 ? false : _a$focused,
67
+ _a$invalid = _a.invalid,
68
+ invalid = _a$invalid === void 0 ? false : _a$invalid,
69
+ _a$readOnly = _a.readOnly,
70
+ readOnly = _a$readOnly === void 0 ? false : _a$readOnly,
71
+ _a$size = _a.size,
72
+ size = _a$size === void 0 ? 'md' : _a$size,
73
+ _a$appearance = _a.appearance,
74
+ appearance = _a$appearance === void 0 ? 'outline' : _a$appearance,
75
+ _a$clearableTrigger = _a.clearableTrigger,
76
+ clearableTrigger = _a$clearableTrigger === void 0 ? 'hover' : _a$clearableTrigger,
77
+ displayRender = _a.displayRender,
78
+ suffix = _a.suffix,
79
+ _onMouseOver = _a.onMouseOver,
80
+ _onMouseLeave = _a.onMouseLeave,
81
+ rest = tslib.__rest(_a, ["prefixCls", "role", "className", "data", "defaultValue", "value", "onChange", "placeholder", "disabled", "clearable", "focused", "invalid", "readOnly", "size", "appearance", "clearableTrigger", "displayRender", "suffix", "onMouseOver", "onMouseLeave"]);
82
+
83
+ var _useUncontrolledState = useUncontrolledState.useUncontrolledState(defaultValue, valueProp, onChange),
84
+ value = _useUncontrolledState[0],
85
+ tryChangeValue = _useUncontrolledState[1];
86
+
87
+ var displayValue = React.useMemo(function () {
88
+ if (value === '') return null;
89
+ var displayItem = data.find(function (item) {
90
+ return item.id === value;
91
+ });
92
+ if (!displayItem) return null;
93
+
94
+ if (displayRender) {
95
+ return displayRender(displayItem);
96
+ }
97
+
98
+ return displayItem.title;
99
+ }, [data, value, displayRender]);
100
+ var handleClear = React.useCallback(function (evt) {
101
+ if (disabled) return;
102
+ evt.stopPropagation();
103
+ tryChangeValue(NOOP_VALUE);
104
+ }, [tryChangeValue, disabled]);
105
+
106
+ var _useState = React.useState(false),
107
+ hover = _useState[0],
108
+ setHover = _useState[1];
109
+
110
+ var trySetHover = React.useCallback(function (hovered) {
111
+ if (disabled) return;
112
+ setHover(hovered);
113
+ }, [disabled]);
114
+ var hasValue = !!displayValue; // 在开启 clearable 下展示 清除内容按钮，可点击进行内容清除
115
+
116
+ var showClearableIcon = React.useMemo(function () {
117
+ return clearable && hasValue && !disabled && (clearableTrigger === 'always' || hover);
118
+ }, [clearable, hasValue, disabled, clearableTrigger, hover]);
119
+ var cls = classname.cx(prefixCls, className, prefixCls + "--appearance-" + appearance, prefixCls + "--size-" + size, focused && "focused", disabled && 'disabled', readOnly && 'readonly', invalid && 'invalid');
120
+ return /*#__PURE__*/React__default['default'].createElement("div", Object.assign({
121
+ ref: ref,
122
+ role: role,
123
+ className: cls,
124
+ onMouseOver: function onMouseOver(evt) {
125
+ trySetHover(true);
126
+ _onMouseOver === null || _onMouseOver === void 0 ? void 0 : _onMouseOver(evt);
127
+ },
128
+ onMouseLeave: function onMouseLeave(evt) {
129
+ trySetHover(false);
130
+ _onMouseLeave === null || _onMouseLeave === void 0 ? void 0 : _onMouseLeave(evt);
131
+ }
132
+ }, rest), hasValue ? /*#__PURE__*/React__default['default'].createElement("span", {
133
+ className: prefixCls + "__value"
134
+ }, displayValue) : /*#__PURE__*/React__default['default'].createElement("span", {
135
+ className: prefixCls + "__placeholder"
136
+ }, placeholder), suffix || showClearableIcon ? /*#__PURE__*/React__default['default'].createElement("span", {
137
+ className: prefixCls + "__suffix"
138
+ }, showClearableIcon ? /*#__PURE__*/React__default['default'].createElement("span", {
139
+ role: "button",
140
+ tabIndex: -1,
141
+ className: classname.cx(prefixCls + "__clear", 'active'),
142
+ onClick: handleClear
143
+ }, /*#__PURE__*/React__default['default'].createElement(icons.CloseCircleFilled, null)) : suffix) : null);
144
+ });
145
+
146
+ if (env.__DEV__) {
147
+ MockInput.displayName = 'MockInput';
148
+ }
149
+
150
+ exports.MockInput = MockInput;
151
+ //# sourceMappingURL=MockInput.js.map
package/lib/cjs/MockInput.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"MockInput.js","sources":["../../src/MockInput.tsx"],"sourcesContent":[null],"names":["_role","_prefix","getPrefixCls","NOOP_VALUE","NOOP_ARRAY","MockInput","forwardRef","_a","ref","prefixCls","role","className","data","defaultValue","valueProp","value","onChange","placeholder","disabled","clearable","focused","invalid","readOnly","size","appearance","clearableTrigger","displayRender","suffix","onMouseOver","onMouseLeave","rest","useUncontrolledState","tryChangeValue","displayValue","useMemo","displayItem","find","item","id","title","handleClear","useCallback","evt","stopPropagation","useState","hover","setHover","trySetHover","hovered","hasValue","showClearableIcon","cls","cx","React","tabIndex","onClick","CloseCircleFilled","__DEV__","displayName"],"mappings":"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"}
package/lib/cjs/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /** @LICENSE
2
- * @hi-ui/input v4.0.0-alpha.1
2
+ * @hi-ui/input
3
3
  * https://github.com/XiaoMi/hiui/tree/master/packages/ui/input#readme
4
4
  *
5
5
  * Copyright (c) HIUI <mi-hiui@xiaomi.com>.
@@ -17,7 +17,10 @@ require('./styles/index.scss.js');
17
17
 
18
18
  var Input = require('./Input.js');
19
19
 
20
+ var MockInput = require('./MockInput.js');
21
+
20
22
  exports.Input = Input.Input;
21
23
  exports["default"] = Input.Input;
22
24
  exports.onChangeMock = Input.onChangeMock;
25
+ exports.MockInput = MockInput.MockInput;
23
26
  //# sourceMappingURL=index.js.map
package/lib/cjs/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;"}
package/lib/cjs/styles/index.scss.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /** @LICENSE
2
- * @hi-ui/input v4.0.0-alpha.1
2
+ * @hi-ui/input
3
3
  * https://github.com/XiaoMi/hiui/tree/master/packages/ui/input#readme
4
4
  *
5
5
  * Copyright (c) HIUI <mi-hiui@xiaomi.com>.
@@ -12,7 +12,7 @@
12
12
  Object.defineProperty(exports, '__esModule', {
13
13
  value: true
14
14
  });
15
- var css_248z = ".hi-v4-input {\n margin: 0;\n border: none;\n outline: none;\n -webkit-box-shadow: none;\n box-shadow: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n height: inherit;\n background-color: transparent;\n cursor: text;\n -webkit-box-flex: 1;\n -ms-flex: 1 1;\n flex: 1 1;\n display: inline-block;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n -webkit-transition: all .3s;\n transition: all .3s;\n width: 100%;\n font-size: inherit;\n color: var(--color-black);\n line-height: 22px; }\n .hi-v4-input::-webkit-input-placeholder {\n color: var(--color-gray-50); }\n .hi-v4-input::-moz-placeholder {\n color: var(--color-gray-50); }\n .hi-v4-input::-ms-input-placeholder {\n color: var(--color-gray-50); }\n .hi-v4-input:-ms-input-placeholder {\n color: var(--color-gray-50); }\n .hi-v4-input::placeholder {\n color: var(--color-gray-50); }\n .hi-v4-input:disabled {\n cursor: not-allowed; }\n .hi-v4-input__inner {\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n height: auto;\n width: 100%;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n font-size: inherit;\n border: 1px solid transparent;\n background-color: var(--color-white);\n -webkit-transition: all 0.3s;\n transition: all 0.3s;\n outline: 2px solid transparent; }\n .hi-v4-input__inner:not(.disabled):hover {\n z-index: 1; }\n .hi-v4-input__inner:not(.disabled).focused {\n z-index: 1; }\n .hi-v4-input__outer {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n position: relative;\n margin: 0;\n padding: 0;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n height: auto;\n width: 100%; }\n .hi-v4-input__clear {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n height: auto;\n font-size: 14px;\n text-align: center;\n color: var(--color-gray-50);\n -ms-flex-negative: 0;\n flex-shrink: 0;\n cursor: pointer;\n -webkit-transition: all 0.3s;\n transition: all 0.3s;\n visibility: hidden;\n opacity: 0; }\n .hi-v4-input__clear:hover {\n color: var(--color-black); }\n .hi-v4-input__clear.active {\n visibility: visible;\n opacity: 1; }\n .hi-v4-input__inner--suffix .hi-v4-input__clear {\n margin-right: 4px; }\n .hi-v4-input__prefix, .hi-v4-input__suffix {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -ms-flex-negative: 0;\n flex-shrink: 0;\n color: var(--color-black);\n font-size: inherit;\n text-align: center; }\n .hi-v4-input__prefix {\n padding-left: 11px; }\n .hi-v4-input__suffix {\n padding-right: 11px; }\n .hi-v4-input__prepend, .hi-v4-input__append {\n position: relative;\n color: var(--color-black);\n -ms-flex-negative: 0;\n flex-shrink: 0;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n font-size: inherit;\n text-align: center;\n -webkit-transition: all .3s;\n transition: all .3s;\n padding: 0 11px;\n border: 1px solid transparent;\n white-space: nowrap; }\n .hi-v4-input__prepend, .hi-v4-input__append {\n background-color: #f8f8f8; }\n .hi-v4-input__prepend {\n border-right-width: 0;\n border-top-right-radius: 0;\n border-bottom-right-radius: 0; }\n .hi-v4-input__append {\n border-left-width: 0;\n border-top-left-radius: 0;\n border-bottom-left-radius: 0; }\n .hi-v4-input--size-sm {\n font-size: 14px; }\n .hi-v4-input--size-sm .hi-v4-input {\n padding: 4px 11px; }\n .hi-v4-input--size-sm .hi-v4-input__inner {\n border-radius: 2px; }\n .hi-v4-input--size-sm .hi-v4-input__prepend {\n border-top-left-radius: 2px;\n border-bottom-left-radius: 2px; }\n .hi-v4-input--size-sm .hi-v4-input__append {\n border-top-right-radius: 2px;\n border-bottom-right-radius: 2px; }\n .hi-v4-input--size-md {\n font-size: 16px; }\n .hi-v4-input--size-md .hi-v4-input {\n padding: 8px 11px; }\n .hi-v4-input--size-md .hi-v4-input__inner {\n border-radius: 4px; }\n .hi-v4-input--size-md .hi-v4-input__prepend {\n border-top-left-radius: 4px;\n border-bottom-left-radius: 4px; }\n .hi-v4-input--size-md .hi-v4-input__append {\n border-top-right-radius: 4px;\n border-bottom-right-radius: 4px; }\n .hi-v4-input--size-lg {\n font-size: 18px; }\n .hi-v4-input--size-lg .hi-v4-input {\n padding: 12px 11px; }\n .hi-v4-input--size-lg .hi-v4-input__inner {\n border-radius: 6px; }\n .hi-v4-input--size-lg .hi-v4-input__prepend {\n border-top-left-radius: 6px;\n border-bottom-left-radius: 6px; }\n .hi-v4-input--size-lg .hi-v4-input__append {\n border-top-right-radius: 6px;\n border-bottom-right-radius: 6px; }\n .hi-v4-input--appearance-outline .hi-v4-input__inner {\n border-color: var(--color-gray-30); }\n .hi-v4-input--appearance-outline .hi-v4-input__inner:not(.disabled):hover {\n border-color: var(--color-primary); }\n .hi-v4-input--appearance-outline .hi-v4-input__inner:not(.disabled).focused {\n -webkit-box-shadow: 0 0 0 1px var(--color-primary);\n box-shadow: 0 0 0 1px var(--color-primary);\n border-color: var(--color-primary); }\n .hi-v4-input--appearance-outline .hi-v4-input__inner.disabled {\n color: var(--color-gray-50);\n background-color: var(--color-gray-10); }\n .hi-v4-input--appearance-outline .hi-v4-input__prepend,\n .hi-v4-input--appearance-outline .hi-v4-input__append {\n border-color: var(--color-gray-30); }\n .hi-v4-input--appearance-unset .hi-v4-input {\n padding-left: 0;\n padding-right: 0; }\n .hi-v4-input--appearance-unset.hi-v4-input__outer--prepend .hi-v4-input,\n .hi-v4-input--appearance-unset .hi-v4-input__inner--prefix .hi-v4-input {\n padding-left: 11px; }\n .hi-v4-input--appearance-unset.hi-v4-input__outer--append .hi-v4-input,\n .hi-v4-input--appearance-unset .hi-v4-input__inner--suffix .hi-v4-input {\n padding-right: 11px; }\n .hi-v4-input--appearance-unset .hi-v4-input__inner {\n border-radius: 0; }\n .hi-v4-input--appearance-filled .hi-v4-input__inner {\n background-color: #f8f8f8; }\n .hi-v4-input--appearance-filled .hi-v4-input__inner:not(.disabled):hover {\n -webkit-box-shadow: 0 0 0 1px var(--color-primary);\n box-shadow: 0 0 0 1px var(--color-primary);\n border-color: var(--color-primary); }\n .hi-v4-input--appearance-filled .hi-v4-input__inner:not(.disabled).focused {\n -webkit-box-shadow: 0 0 0 1px var(--color-primary);\n box-shadow: 0 0 0 1px var(--color-primary);\n border-color: var(--color-primary);\n background-color: var(--color-white); }\n .hi-v4-input--appearance-underline .hi-v4-input {\n padding-left: 0;\n padding-right: 0; }\n .hi-v4-input--appearance-underline.hi-v4-input__outer--prepend .hi-v4-input,\n .hi-v4-input--appearance-underline .hi-v4-input__inner--prefix .hi-v4-input {\n padding-left: 11px; }\n .hi-v4-input--appearance-underline.hi-v4-input__outer--append .hi-v4-input,\n .hi-v4-input--appearance-underline .hi-v4-input__inner--suffix .hi-v4-input {\n padding-right: 11px; }\n .hi-v4-input--appearance-underline .hi-v4-input__inner {\n border-radius: 0; }\n .hi-v4-input--appearance-underline .hi-v4-input__inner::after {\n content: '';\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n display: block;\n position: absolute;\n bottom: 0;\n left: -1px;\n right: -1px;\n border-bottom: 1px solid var(--color-gray-30);\n -webkit-transition: all .3s;\n transition: all .3s; }\n .hi-v4-input--appearance-underline .hi-v4-input__inner:not(.disabled):hover::after {\n border-bottom-color: var(--color-primary); }\n .hi-v4-input--appearance-underline .hi-v4-input__inner:not(.disabled).focused::after {\n border-bottom-color: var(--color-primary);\n -webkit-box-shadow: 0 1px 0 0 var(--color-primary);\n box-shadow: 0 1px 0 0 var(--color-primary); }\n .hi-v4-input__outer--prepend .hi-v4-input__inner {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0; }\n .hi-v4-input__outer--append .hi-v4-input__inner {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0; }\n";
15
+ var css_248z = "@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n.hi-v4-mock-input {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n border: none;\n outline: none;\n -webkit-box-shadow: none;\n box-shadow: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n cursor: text;\n background-color: transparent;\n -webkit-tap-highlight-color: transparent;\n position: relative;\n overflow: hidden;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -webkit-box-flex: 1;\n -ms-flex: 1 1;\n flex: 1 1;\n -webkit-transition-property: all;\n transition-property: all;\n -webkit-transition-duration: 200ms;\n transition-duration: 200ms;\n -webkit-transition-duration: var(--hi-v4-motion-duration-normal, 200ms);\n transition-duration: var(--hi-v4-motion-duration-normal, 200ms);\n -webkit-transition-timing-function: cubic-bezier(0.37, 0.02, 0.34, 1);\n transition-timing-function: cubic-bezier(0.37, 0.02, 0.34, 1);\n -webkit-transition-timing-function: var(--hi-v4-motion-bezier-normal, cubic-bezier(0.37, 0.02, 0.34, 1));\n transition-timing-function: var(--hi-v4-motion-bezier-normal, cubic-bezier(0.37, 0.02, 0.34, 1));\n width: 100%;\n height: auto;\n z-index: auto;\n font-size: inherit;\n line-height: inherit;\n color: #1f2733;\n color: var(--hi-v4-color-gray-700, #1f2733);\n border: 1px solid transparent;\n border: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-static-transparent, transparent);\n background-color: #fff;\n background-color: var(--hi-v4-color-static-white, #fff); }\n.hi-v4-mock-input:not(.disabled):hover {\n z-index: calc(1 + 1);\n z-index: calc(var(--hi-v4-zindex-absolute, 1) + 1); }\n.hi-v4-mock-input:not(.disabled).focused {\n z-index: calc(1 + 1);\n z-index: calc(var(--hi-v4-zindex-absolute, 1) + 1); }\n.hi-v4-mock-input.disabled {\n cursor: not-allowed; }\n.hi-v4-mock-input__suffix, .hi-v4-mock-input__placeholder {\n color: #c9ced6;\n color: var(--hi-v4-color-gray-400, #c9ced6); }\n.hi-v4-mock-input__clear {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n width: 16px;\n height: 16px;\n font-size: 0.875rem;\n font-size: var(--hi-v4-text-size-normal, 0.875rem);\n text-align: center;\n color: #929aa6;\n color: var(--hi-v4-color-gray-500, #929aa6);\n -ms-flex-negative: 0;\n flex-shrink: 0;\n cursor: pointer;\n visibility: hidden;\n opacity: 0;\n -webkit-transition-property: all;\n transition-property: all;\n -webkit-transition-duration: 200ms;\n transition-duration: 200ms;\n -webkit-transition-duration: var(--hi-v4-motion-duration-normal, 200ms);\n transition-duration: var(--hi-v4-motion-duration-normal, 200ms);\n -webkit-transition-timing-function: cubic-bezier(0.37, 0.02, 0.34, 1);\n transition-timing-function: cubic-bezier(0.37, 0.02, 0.34, 1);\n -webkit-transition-timing-function: var(--hi-v4-motion-bezier-normal, cubic-bezier(0.37, 0.02, 0.34, 1));\n transition-timing-function: var(--hi-v4-motion-bezier-normal, cubic-bezier(0.37, 0.02, 0.34, 1)); }\n.hi-v4-mock-input__clear:hover {\n color: #000;\n color: var(--hi-v4-color-static-black, #000); }\n.hi-v4-mock-input__clear.active {\n visibility: visible;\n opacity: 1; }\n.hi-v4-mock-input__suffix {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -ms-flex-negative: 0;\n flex-shrink: 0;\n color: #c9ced6;\n color: var(--hi-v4-color-gray-400, #c9ced6);\n font-size: 1rem;\n font-size: var(--hi-v4-text-size-lg, 1rem);\n padding-left: 8px;\n padding-left: var(--hi-v4-spacing-4, 8px);\n text-align: center; }\n.hi-v4-mock-input__value {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n display: inline-block;\n width: auto;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap; }\n.hi-v4-mock-input--size-sm {\n height: 24px;\n height: var(--hi-v4-height-xs, 24px);\n font-size: 0.75rem;\n font-size: var(--hi-v4-text-size-sm, 0.75rem);\n line-height: 1.25rem;\n border-radius: 4px;\n border-radius: var(--hi-v4-border-radius-normal, 4px);\n padding: 1px calc(12px - 1px);\n padding: 1px calc(var(--hi-v4-spacing-6, 12px) - 1px); }\n.hi-v4-mock-input--size-md {\n height: 32px;\n height: var(--hi-v4-height-normal, 32px);\n font-size: 0.875rem;\n font-size: var(--hi-v4-text-size-normal, 0.875rem);\n line-height: 1.375rem;\n border-radius: 4px;\n border-radius: var(--hi-v4-border-radius-normal, 4px);\n padding: 4px calc(12px - 1px);\n padding: 4px calc(var(--hi-v4-spacing-6, 12px) - 1px); }\n.hi-v4-mock-input--size-lg {\n height: 40px;\n height: var(--hi-v4-height-xl, 40px);\n font-size: 1rem;\n font-size: var(--hi-v4-text-size-lg, 1rem);\n line-height: 1.5rem;\n border-radius: 4px;\n border-radius: var(--hi-v4-border-radius-normal, 4px);\n padding: 7px calc(12px - 1px);\n padding: 7px calc(var(--hi-v4-spacing-6, 12px) - 1px); }\n.hi-v4-mock-input--appearance-outline {\n border-color: #dfe2e8;\n border-color: var(--hi-v4-color-gray-300, #dfe2e8); }\n.hi-v4-mock-input--appearance-outline:not(.disabled):hover {\n border-color: #237ffa;\n border-color: var(--hi-v4-color-brandblue-500, #237ffa); }\n.hi-v4-mock-input--appearance-outline:not(.disabled).focused {\n -webkit-box-shadow: 0 0 0 2px #bde2ff;\n box-shadow: 0 0 0 2px #bde2ff;\n -webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-brandblue-100, #bde2ff);\n box-shadow: 0 0 0 2px var(--hi-v4-color-brandblue-100, #bde2ff);\n border-color: #237ffa;\n border-color: var(--hi-v4-color-brandblue-500, #237ffa); }\n.hi-v4-mock-input--appearance-outline:not(.disabled).invalid {\n border-color: #ff5959;\n border-color: var(--hi-v4-color-red-500, #ff5959); }\n.hi-v4-mock-input--appearance-outline:not(.disabled).invalid.hover {\n border-color: #ff5959;\n border-color: var(--hi-v4-color-red-500, #ff5959); }\n.hi-v4-mock-input--appearance-outline:not(.disabled).invalid.focused {\n -webkit-box-shadow: 0 0 0 2px #ffd1c9;\n box-shadow: 0 0 0 2px #ffd1c9;\n -webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-red-100, #ffd1c9);\n box-shadow: 0 0 0 2px var(--hi-v4-color-red-100, #ffd1c9); }\n.hi-v4-mock-input--appearance-unset {\n width: auto;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: flex-start;\n border-color: transparent; }\n.hi-v4-mock-input--appearance-unset:not(.disabled):hover {\n background-color: #f2f4f7;\n background-color: var(--hi-v4-color-gray-100, #f2f4f7); }\n.hi-v4-mock-input--appearance-unset:not(.disabled).focused {\n -webkit-box-shadow: 0 0 0 2px #bde2ff;\n box-shadow: 0 0 0 2px #bde2ff;\n -webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-brandblue-100, #bde2ff);\n box-shadow: 0 0 0 2px var(--hi-v4-color-brandblue-100, #bde2ff);\n background-color: #fff;\n background-color: var(--hi-v4-color-static-white, #fff);\n border-color: #237ffa;\n border-color: var(--hi-v4-color-brandblue-500, #237ffa); }\n.hi-v4-mock-input--appearance-unset:not(.disabled).invalid {\n border-color: #ff5959;\n border-color: var(--hi-v4-color-red-500, #ff5959); }\n.hi-v4-mock-input--appearance-unset:not(.disabled).invalid.hover {\n border-color: #ff5959;\n border-color: var(--hi-v4-color-red-500, #ff5959); }\n.hi-v4-mock-input--appearance-unset:not(.disabled).invalid.focused {\n -webkit-box-shadow: 0 0 0 2px #ffd1c9;\n box-shadow: 0 0 0 2px #ffd1c9;\n -webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-red-100, #ffd1c9);\n box-shadow: 0 0 0 2px var(--hi-v4-color-red-100, #ffd1c9); }\n.hi-v4-mock-input--appearance-filled {\n background-color: #f2f4f7;\n background-color: var(--hi-v4-color-gray-100, #f2f4f7); }\n.hi-v4-mock-input--appearance-filled:not(.disabled):hover {\n background-color: #fff;\n background-color: var(--hi-v4-color-static-white, #fff);\n border-color: #237ffa;\n border-color: var(--hi-v4-color-brandblue-500, #237ffa); }\n.hi-v4-mock-input--appearance-filled:not(.disabled).focused {\n -webkit-box-shadow: 0 0 0 2px #bde2ff;\n box-shadow: 0 0 0 2px #bde2ff;\n -webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-brandblue-100, #bde2ff);\n box-shadow: 0 0 0 2px var(--hi-v4-color-brandblue-100, #bde2ff);\n border-color: #237ffa;\n border-color: var(--hi-v4-color-brandblue-500, #237ffa);\n background-color: #fff;\n background-color: var(--hi-v4-color-static-white, #fff); }\n.hi-v4-mock-input--appearance-filled:not(.disabled).invalid {\n border-color: #ff5959;\n border-color: var(--hi-v4-color-red-500, #ff5959); }\n.hi-v4-mock-input--appearance-filled:not(.disabled).invalid.hover {\n border-color: #ff5959;\n border-color: var(--hi-v4-color-red-500, #ff5959); }\n.hi-v4-mock-input--appearance-filled:not(.disabled).invalid.focused {\n -webkit-box-shadow: 0 0 0 2px #ffd1c9;\n box-shadow: 0 0 0 2px #ffd1c9;\n -webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-red-100, #ffd1c9);\n box-shadow: 0 0 0 2px var(--hi-v4-color-red-100, #ffd1c9); }\n.hi-v4-mock-input--appearance-outline.disabled, .hi-v4-mock-input--appearance-unset.disabled, .hi-v4-mock-input--appearance-filled.disabled {\n color: #c9ced6;\n color: var(--hi-v4-color-gray-400, #c9ced6); }\n.hi-v4-mock-input--appearance-outline.disabled, .hi-v4-mock-input--appearance-filled.disabled {\n background-color: #ebedf0;\n background-color: var(--hi-v4-color-gray-200, #ebedf0); }\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n.hi-v4-input {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n border: none;\n outline: none;\n -webkit-box-shadow: none;\n box-shadow: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n cursor: text;\n background-color: transparent;\n -webkit-tap-highlight-color: transparent;\n -webkit-box-flex: 1;\n -ms-flex: 1 1;\n flex: 1 1;\n display: inline-block;\n box-sizing: border-box;\n -webkit-transition-property: all;\n transition-property: all;\n -webkit-transition-duration: 200ms;\n transition-duration: 200ms;\n -webkit-transition-duration: var(--hi-v4-motion-duration-normal, 200ms);\n transition-duration: var(--hi-v4-motion-duration-normal, 200ms);\n -webkit-transition-timing-function: cubic-bezier(0.37, 0.02, 0.34, 1);\n transition-timing-function: cubic-bezier(0.37, 0.02, 0.34, 1);\n -webkit-transition-timing-function: var(--hi-v4-motion-bezier-normal, cubic-bezier(0.37, 0.02, 0.34, 1));\n transition-timing-function: var(--hi-v4-motion-bezier-normal, cubic-bezier(0.37, 0.02, 0.34, 1));\n width: 100%;\n font-size: inherit;\n line-height: inherit;\n color: #1f2733;\n color: var(--hi-v4-color-gray-700, #1f2733); }\n.hi-v4-input::-webkit-input-placeholder {\n color: #c9ced6;\n color: var(--hi-v4-color-gray-400, #c9ced6); }\n.hi-v4-input::-moz-placeholder {\n color: #c9ced6;\n color: var(--hi-v4-color-gray-400, #c9ced6); }\n.hi-v4-input::-ms-input-placeholder {\n color: #c9ced6;\n color: var(--hi-v4-color-gray-400, #c9ced6); }\n.hi-v4-input:-ms-input-placeholder {\n color: #c9ced6;\n color: var(--hi-v4-color-gray-400, #c9ced6); }\n.hi-v4-input::placeholder {\n color: #c9ced6;\n color: var(--hi-v4-color-gray-400, #c9ced6); }\n.hi-v4-input:disabled {\n cursor: not-allowed; }\n.hi-v4-input__inner {\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n height: auto;\n width: 100%;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n font-size: inherit;\n border: 1px solid transparent;\n border: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-static-transparent, transparent);\n background-color: #fff;\n background-color: var(--hi-v4-color-static-white, #fff);\n -webkit-transition-property: all;\n transition-property: all;\n -webkit-transition-duration: 200ms;\n transition-duration: 200ms;\n -webkit-transition-duration: var(--hi-v4-motion-duration-normal, 200ms);\n transition-duration: var(--hi-v4-motion-duration-normal, 200ms);\n -webkit-transition-timing-function: cubic-bezier(0.37, 0.02, 0.34, 1);\n transition-timing-function: cubic-bezier(0.37, 0.02, 0.34, 1);\n -webkit-transition-timing-function: var(--hi-v4-motion-bezier-normal, cubic-bezier(0.37, 0.02, 0.34, 1));\n transition-timing-function: var(--hi-v4-motion-bezier-normal, cubic-bezier(0.37, 0.02, 0.34, 1));\n outline: none;\n z-index: auto; }\n.hi-v4-input__inner:not(.disabled):hover {\n z-index: calc(1 + 1);\n z-index: calc(var(--hi-v4-zindex-absolute, 1) + 1); }\n.hi-v4-input__inner:not(.disabled).focused {\n z-index: calc(1 + 1);\n z-index: calc(var(--hi-v4-zindex-absolute, 1) + 1); }\n.hi-v4-input__outer {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n position: relative;\n margin: 0;\n padding: 0;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n height: auto;\n width: 100%;\n vertical-align: middle; }\n.hi-v4-input__clear {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n height: auto;\n text-align: center;\n font-size: 0.875rem;\n font-size: var(--hi-v4-text-size-normal, 0.875rem);\n color: #929aa6;\n color: var(--hi-v4-color-gray-500, #929aa6);\n -ms-flex-negative: 0;\n flex-shrink: 0;\n cursor: pointer;\n -webkit-transition-property: all;\n transition-property: all;\n -webkit-transition-duration: 200ms;\n transition-duration: 200ms;\n -webkit-transition-duration: var(--hi-v4-motion-duration-normal, 200ms);\n transition-duration: var(--hi-v4-motion-duration-normal, 200ms);\n -webkit-transition-timing-function: cubic-bezier(0.37, 0.02, 0.34, 1);\n transition-timing-function: cubic-bezier(0.37, 0.02, 0.34, 1);\n -webkit-transition-timing-function: var(--hi-v4-motion-bezier-normal, cubic-bezier(0.37, 0.02, 0.34, 1));\n transition-timing-function: var(--hi-v4-motion-bezier-normal, cubic-bezier(0.37, 0.02, 0.34, 1));\n visibility: hidden;\n opacity: 0; }\n.hi-v4-input__clear:hover {\n color: #1f2733;\n color: var(--hi-v4-color-gray-700, #1f2733); }\n.hi-v4-input__clear.active {\n visibility: visible;\n opacity: 1; }\n.hi-v4-input__inner--suffix .hi-v4-input__clear {\n -webkit-margin-end: 4px;\n margin-inline-end: 4px;\n -webkit-margin-end: var(--hi-v4-spacing-2, 4px);\n margin-inline-end: var(--hi-v4-spacing-2, 4px); }\n.hi-v4-input__prefix, .hi-v4-input__suffix {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -ms-flex-negative: 0;\n flex-shrink: 0;\n color: #1f2733;\n color: var(--hi-v4-color-gray-700, #1f2733);\n font-size: inherit;\n text-align: center; }\n.hi-v4-input__prefix {\n padding-left: calc(12px - 1px);\n padding-left: calc(var(--hi-v4-spacing-6, 12px) - 1px); }\n.hi-v4-input__suffix {\n padding-right: calc(12px - 1px);\n padding-right: calc(var(--hi-v4-spacing-6, 12px) - 1px); }\n.hi-v4-input__prepend, .hi-v4-input__append {\n position: relative;\n color: #1f2733;\n color: var(--hi-v4-color-gray-700, #1f2733);\n background-color: #f5f7fa;\n background-color: var(--hi-v4-color-gray-50, #f5f7fa);\n -ms-flex-negative: 0;\n flex-shrink: 0;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n font-size: inherit;\n text-align: center;\n padding: 0 calc(12px - 1px);\n padding: 0 calc(var(--hi-v4-spacing-6, 12px) - 1px);\n border: 1px solid transparent;\n border: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-static-transparent, transparent);\n white-space: nowrap;\n -webkit-transition-property: all;\n transition-property: all;\n -webkit-transition-duration: 200ms;\n transition-duration: 200ms;\n -webkit-transition-duration: var(--hi-v4-motion-duration-normal, 200ms);\n transition-duration: var(--hi-v4-motion-duration-normal, 200ms);\n -webkit-transition-timing-function: cubic-bezier(0.37, 0.02, 0.34, 1);\n transition-timing-function: cubic-bezier(0.37, 0.02, 0.34, 1);\n -webkit-transition-timing-function: var(--hi-v4-motion-bezier-normal, cubic-bezier(0.37, 0.02, 0.34, 1));\n transition-timing-function: var(--hi-v4-motion-bezier-normal, cubic-bezier(0.37, 0.02, 0.34, 1));\n z-index: 1;\n z-index: var(--hi-v4-zindex-absolute, 1); }\n.hi-v4-input__prepend {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n margin-right: -1px; }\n.hi-v4-input__append {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n margin-left: -1px; }\n.hi-v4-input--size-sm {\n height: 24px;\n height: var(--hi-v4-height-xs, 24px);\n font-size: 0.75rem;\n font-size: var(--hi-v4-text-size-sm, 0.75rem);\n line-height: 1.25rem; }\n.hi-v4-input--size-sm .hi-v4-input {\n padding: 1px calc(12px - 1px);\n padding: 1px calc(var(--hi-v4-spacing-6, 12px) - 1px); }\n.hi-v4-input--size-sm .hi-v4-input__inner,\n .hi-v4-input--size-sm .hi-v4-input__prepend,\n .hi-v4-input--size-sm .hi-v4-input__append {\n border-radius: 4px;\n border-radius: var(--hi-v4-border-radius-normal, 4px); }\n.hi-v4-input--size-sm .hi-v4-input__prepend {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0; }\n.hi-v4-input--size-sm .hi-v4-input__append {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0; }\n.hi-v4-input--size-md {\n height: 32px;\n height: var(--hi-v4-height-normal, 32px);\n font-size: 0.875rem;\n font-size: var(--hi-v4-text-size-normal, 0.875rem);\n line-height: 1.375rem; }\n.hi-v4-input--size-md .hi-v4-input {\n padding: 4px calc(12px - 1px);\n padding: 4px calc(var(--hi-v4-spacing-6, 12px) - 1px); }\n.hi-v4-input--size-md .hi-v4-input__inner,\n .hi-v4-input--size-md .hi-v4-input__prepend,\n .hi-v4-input--size-md .hi-v4-input__append {\n border-radius: 4px;\n border-radius: var(--hi-v4-border-radius-normal, 4px); }\n.hi-v4-input--size-md .hi-v4-input__prepend {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0; }\n.hi-v4-input--size-md .hi-v4-input__append {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0; }\n.hi-v4-input--size-lg {\n height: 40px;\n height: var(--hi-v4-height-xl, 40px);\n font-size: 1rem;\n font-size: var(--hi-v4-text-size-lg, 1rem);\n line-height: 1.5rem; }\n.hi-v4-input--size-lg .hi-v4-input {\n padding: 7px calc(12px - 1px);\n padding: 7px calc(var(--hi-v4-spacing-6, 12px) - 1px); }\n.hi-v4-input--size-lg .hi-v4-input__inner,\n .hi-v4-input--size-lg .hi-v4-input__prepend,\n .hi-v4-input--size-lg .hi-v4-input__append {\n border-radius: 4px;\n border-radius: var(--hi-v4-border-radius-normal, 4px); }\n.hi-v4-input--size-lg .hi-v4-input__prepend {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0; }\n.hi-v4-input--size-lg .hi-v4-input__append {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0; }\n.hi-v4-input--appearance-outline .hi-v4-input__inner {\n border-color: #dfe2e8;\n border-color: var(--hi-v4-color-gray-300, #dfe2e8); }\n.hi-v4-input--appearance-outline .hi-v4-input__inner:not(.disabled):hover {\n border-color: #237ffa;\n border-color: var(--hi-v4-color-brandblue-500, #237ffa); }\n.hi-v4-input--appearance-outline .hi-v4-input__inner:not(.disabled).focused {\n -webkit-box-shadow: 0 0 0 2px #bde2ff;\n box-shadow: 0 0 0 2px #bde2ff;\n -webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-brandblue-100, #bde2ff);\n box-shadow: 0 0 0 2px var(--hi-v4-color-brandblue-100, #bde2ff);\n border-color: #237ffa;\n border-color: var(--hi-v4-color-brandblue-500, #237ffa); }\n.hi-v4-input--appearance-outline .hi-v4-input__inner:not(.disabled).invalid {\n border-color: #ff5959;\n border-color: var(--hi-v4-color-red-500, #ff5959); }\n.hi-v4-input--appearance-outline .hi-v4-input__inner:not(.disabled).invalid.hover {\n border-color: #ff5959;\n border-color: var(--hi-v4-color-red-500, #ff5959); }\n.hi-v4-input--appearance-outline .hi-v4-input__inner:not(.disabled).invalid.focused {\n -webkit-box-shadow: 0 0 0 2px #ffd1c9;\n box-shadow: 0 0 0 2px #ffd1c9;\n -webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-red-100, #ffd1c9);\n box-shadow: 0 0 0 2px var(--hi-v4-color-red-100, #ffd1c9); }\n.hi-v4-input--appearance-outline .hi-v4-input__prepend,\n .hi-v4-input--appearance-outline .hi-v4-input__append {\n border-color: #dfe2e8;\n border-color: var(--hi-v4-color-gray-300, #dfe2e8); }\n.hi-v4-input--appearance-unset .hi-v4-input {\n padding-left: 0;\n padding-right: 0; }\n.hi-v4-input--appearance-unset.hi-v4-input__outer--prepend .hi-v4-input,\n .hi-v4-input--appearance-unset .hi-v4-input__inner--prefix .hi-v4-input {\n padding-left: calc(12px - 1px);\n padding-left: calc(var(--hi-v4-spacing-6, 12px) - 1px); }\n.hi-v4-input--appearance-unset.hi-v4-input__outer--append .hi-v4-input,\n .hi-v4-input--appearance-unset .hi-v4-input__inner--suffix .hi-v4-input {\n padding-right: calc(12px - 1px);\n padding-right: calc(var(--hi-v4-spacing-6, 12px) - 1px); }\n.hi-v4-input--appearance-unset .hi-v4-input__inner {\n border-radius: 0; }\n.hi-v4-input--appearance-filled .hi-v4-input__inner {\n background-color: #f2f4f7;\n background-color: var(--hi-v4-color-gray-100, #f2f4f7); }\n.hi-v4-input--appearance-filled .hi-v4-input__inner:not(.disabled):hover {\n background-color: #fff;\n background-color: var(--hi-v4-color-static-white, #fff);\n border-color: #237ffa;\n border-color: var(--hi-v4-color-brandblue-500, #237ffa); }\n.hi-v4-input--appearance-filled .hi-v4-input__inner:not(.disabled).focused {\n -webkit-box-shadow: 0 0 0 2px #bde2ff;\n box-shadow: 0 0 0 2px #bde2ff;\n -webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-brandblue-100, #bde2ff);\n box-shadow: 0 0 0 2px var(--hi-v4-color-brandblue-100, #bde2ff);\n border-color: #237ffa;\n border-color: var(--hi-v4-color-brandblue-500, #237ffa);\n background-color: #fff;\n background-color: var(--hi-v4-color-static-white, #fff); }\n.hi-v4-input--appearance-filled .hi-v4-input__inner:not(.disabled).invalid {\n border-color: #ff5959;\n border-color: var(--hi-v4-color-red-500, #ff5959); }\n.hi-v4-input--appearance-filled .hi-v4-input__inner:not(.disabled).invalid.hover {\n border-color: #ff5959;\n border-color: var(--hi-v4-color-red-500, #ff5959); }\n.hi-v4-input--appearance-filled .hi-v4-input__inner:not(.disabled).invalid.focused {\n -webkit-box-shadow: 0 0 0 2px #ffd1c9;\n box-shadow: 0 0 0 2px #ffd1c9;\n -webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-red-100, #ffd1c9);\n box-shadow: 0 0 0 2px var(--hi-v4-color-red-100, #ffd1c9); }\n.hi-v4-input--appearance-underline .hi-v4-input {\n padding-left: 0;\n padding-right: 0; }\n.hi-v4-input--appearance-underline.hi-v4-input__outer--prepend .hi-v4-input,\n .hi-v4-input--appearance-underline .hi-v4-input__inner--prefix .hi-v4-input {\n padding-left: calc(12px - 1px);\n padding-left: calc(var(--hi-v4-spacing-6, 12px) - 1px); }\n.hi-v4-input--appearance-underline.hi-v4-input__outer--append .hi-v4-input,\n .hi-v4-input--appearance-underline .hi-v4-input__inner--suffix .hi-v4-input {\n padding-right: calc(12px - 1px);\n padding-right: calc(var(--hi-v4-spacing-6, 12px) - 1px); }\n.hi-v4-input--appearance-underline .hi-v4-input__inner {\n border-radius: 0; }\n.hi-v4-input--appearance-underline .hi-v4-input__inner::after {\n content: '';\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n display: block;\n position: absolute;\n bottom: 0;\n left: -1px;\n right: -1px;\n border-bottom: 1px solid #dfe2e8;\n border-bottom: 1px solid var(--hi-v4-color-gray-300, #dfe2e8);\n -webkit-transition: all 0.3s;\n transition: all 0.3s; }\n.hi-v4-input--appearance-underline .hi-v4-input__inner:not(.disabled):hover::after {\n border-bottom-color: #237ffa;\n border-bottom-color: var(--hi-v4-color-brandblue-500, #237ffa); }\n.hi-v4-input--appearance-underline .hi-v4-input__inner:not(.disabled).focused::after {\n border-bottom-color: #237ffa;\n border-bottom-color: var(--hi-v4-color-brandblue-500, #237ffa); }\n.hi-v4-input--appearance-underline .hi-v4-input__inner:not(.disabled).invalid::after {\n border-bottom-color: #ff5959;\n border-bottom-color: var(--hi-v4-color-red-500, #ff5959); }\n.hi-v4-input--appearance-underline .hi-v4-input__inner:not(.disabled).invalid.hover::after {\n border-bottom-color: #ff5959;\n border-bottom-color: var(--hi-v4-color-red-500, #ff5959); }\n.hi-v4-input--appearance-outline .hi-v4-input__inner.disabled, .hi-v4-input--appearance-unset .hi-v4-input__inner.disabled, .hi-v4-input--appearance-filled .hi-v4-input__inner.disabled, .hi-v4-input--appearance-underline .hi-v4-input__inner.disabled {\n color: #c9ced6;\n color: var(--hi-v4-color-gray-400, #c9ced6);\n background-color: #ebedf0;\n background-color: var(--hi-v4-color-gray-200, #ebedf0); }\n.hi-v4-input__outer--prepend .hi-v4-input__inner {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0; }\n.hi-v4-input__outer--prepend-unset .hi-v4-input__prepend {\n border: none;\n padding: 0; }\n.hi-v4-input__outer--prepend-unset .hi-v4-input__prepend .hi-v4-mock-input {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0; }\n.hi-v4-input__outer--prepend-unset .hi-v4-input__prepend .hi-v4-button {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0; }\n.hi-v4-input__outer--append .hi-v4-input__inner {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0; }\n.hi-v4-input__outer--append-unset .hi-v4-input__append {\n border: none;\n padding: 0; }\n.hi-v4-input__outer--append-unset .hi-v4-input__append .hi-v4-mock-input {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0; }\n.hi-v4-input__outer--append-unset .hi-v4-input__append .hi-v4-button {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0; }\n";
16
16
 
17
17
  var __styleInject__ = require('style-inject/dist/style-inject.es.js')["default"];
18
18
 
package/lib/esm/Input.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /** @LICENSE
2
- * @hi-ui/input v4.0.0-alpha.1
2
+ * @hi-ui/input
3
3
  * https://github.com/XiaoMi/hiui/tree/master/packages/ui/input#readme
4
4
  *
5
5
  * Copyright (c) HIUI <mi-hiui@xiaomi.com>.
@@ -8,15 +8,14 @@
8
8
  * LICENSE file in the root directory of this source tree.
9
9
  */
10
10
  import { __rest } from 'tslib';
11
- import React, { forwardRef, useRef, useCallback, useState, useMemo } from 'react';
11
+ import React, { forwardRef, useMemo, isValidElement, useRef, useCallback, useState } from 'react';
12
12
  import { getPrefixCls, cx } from '@hi-ui/classname';
13
13
  import { __DEV__ } from '@hi-ui/env';
14
14
  import { useUncontrolledState } from '@hi-ui/use-uncontrolled-state';
15
15
  import { useMergeRefs } from '@hi-ui/use-merge-refs';
16
16
  import { CloseCircleFilled } from '@hi-ui/icons';
17
- var _role = 'input';
18
17
 
19
- var _prefix = getPrefixCls(_role);
18
+ var _prefix = getPrefixCls('input');
20
19
  /**
21
20
  * TODO: What is Input
22
21
  */
@@ -26,7 +25,7 @@ var Input = /*#__PURE__*/forwardRef(function (_a, ref) {
26
25
  var _a$prefixCls = _a.prefixCls,
27
26
  prefixCls = _a$prefixCls === void 0 ? _prefix : _a$prefixCls,
28
27
  _a$role = _a.role,
29
- role = _a$role === void 0 ? _role : _a$role,
28
+ role = _a$role === void 0 ? 'input' : _a$role,
30
29
  className = _a.className,
31
30
  style = _a.style,
32
31
  _a$autoFocus = _a.autoFocus,
@@ -40,7 +39,7 @@ var Input = /*#__PURE__*/forwardRef(function (_a, ref) {
40
39
  _a$type = _a.type,
41
40
  type = _a$type === void 0 ? 'text' : _a$type,
42
41
  _a$size = _a.size,
43
- size = _a$size === void 0 ? 'sm' : _a$size,
42
+ size = _a$size === void 0 ? 'md' : _a$size,
44
43
  _a$appearance = _a.appearance,
45
44
  appearance = _a$appearance === void 0 ? 'outline' : _a$appearance,
46
45
  placeholder = _a.placeholder,
@@ -58,7 +57,31 @@ var Input = /*#__PURE__*/forwardRef(function (_a, ref) {
58
57
  clearableTrigger = _a$clearableTrigger === void 0 ? 'hover' : _a$clearableTrigger,
59
58
  _a$clearable = _a.clearable,
60
59
  clearable = _a$clearable === void 0 ? false : _a$clearable,
61
- rest = __rest(_a, ["prefixCls", "role", "className", "style", "autoFocus", "disabled", "readOnly", "name", "maxLength", "type", "size", "appearance", "floatLabel", "placeholder", "prepend", "append", "prefix", "suffix", "defaultValue", "value", "onChange", "onFocus", "onBlur", "clearableTrigger", "clearable"]);
60
+ _a$trimValueOnBlur = _a.trimValueOnBlur,
61
+ trimValueOnBlur = _a$trimValueOnBlur === void 0 ? false : _a$trimValueOnBlur,
62
+ _a$invalid = _a.invalid,
63
+ invalid = _a$invalid === void 0 ? false : _a$invalid,
64
+ rest = __rest(_a, ["prefixCls", "role", "className", "style", "autoFocus", "disabled", "readOnly", "name", "maxLength", "type", "size", "appearance", "floatLabel", "placeholder", "prepend", "append", "prefix", "suffix", "defaultValue", "value", "onChange", "onFocus", "onBlur", "clearableTrigger", "clearable", "trimValueOnBlur", "invalid"]); // @TODO: 临时方案，后面迁移至 InputGroup
65
+
66
+
67
+ var _useMemo = useMemo(function () {
68
+ var shouldUnset = [false, false]; // @ts-ignore
69
+ // @ts-ignore
70
+
71
+ if ( /*#__PURE__*/isValidElement(prepend) && ['Select', 'Button'].includes(prepend.type.HiName)) {
72
+ shouldUnset[0] = true;
73
+ } // @ts-ignore
74
+ // @ts-ignore
75
+
76
+
77
+ if ( /*#__PURE__*/isValidElement(append) && ['Select', 'Button'].includes(append.type.HiName)) {
78
+ shouldUnset[1] = true;
79
+ }
80
+
81
+ return shouldUnset;
82
+ }, [prepend, append]),
83
+ unsetPrepend = _useMemo[0],
84
+ unsetAppend = _useMemo[1];
62
85
 
63
86
  var inputRef = useRef(null);
64
87
  var proxyOnChange = useCallback(function (value, evt) {
@@ -85,8 +108,14 @@ var Input = /*#__PURE__*/forwardRef(function (_a, ref) {
85
108
  }, [onFocus]);
86
109
  var handleBlur = useCallback(function (event) {
87
110
  setFocused(false);
111
+
112
+ if (trimValueOnBlur) {
113
+ var nextValue = event.target.value;
114
+ tryChangeValue(nextValue.trim(), event);
115
+ }
116
+
88
117
  onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
89
- }, [onBlur]);
118
+ }, [onBlur, tryChangeValue, trimValueOnBlur]);
90
119
  var focus = useCallback(function () {
91
120
  var _a;
92
121
 
@@ -113,7 +142,7 @@ var Input = /*#__PURE__*/forwardRef(function (_a, ref) {
113
142
 
114
143
 
115
144
  var showClearableIcon = clearable && !!value && !disabled;
116
- var cls = cx(className, prefixCls + "__outer", prepend && prefixCls + "__outer--prepend", append && prefixCls + "__outer--append", prefixCls + "--appearance-" + appearance, prefixCls + "--size-" + size);
145
+ var cls = cx(className, prefixCls + "__outer", prepend && prefixCls + "__outer--prepend", prepend && unsetPrepend && prefixCls + "__outer--prepend-unset", append && prefixCls + "__outer--append", append && unsetAppend && prefixCls + "__outer--append-unset", prefixCls + "--appearance-" + appearance, prefixCls + "--size-" + size);
117
146
  return /*#__PURE__*/React.createElement("div", {
118
147
  role: role,
119
148
  className: cls,
@@ -121,7 +150,8 @@ var Input = /*#__PURE__*/forwardRef(function (_a, ref) {
121
150
  }, prepend ? /*#__PURE__*/React.createElement("div", {
122
151
  className: prefixCls + "__prepend"
123
152
  }, prepend) : null, /*#__PURE__*/React.createElement("div", {
124
- className: cx(prefixCls + "__inner", prefix && prefixCls + "__inner--prefix", suffix && prefixCls + "__inner--suffix", focused && "focused", disabled && 'disabled', readOnly && 'readonly'),
153
+ className: cx(prefixCls + "__inner", prefix && prefixCls + "__inner--prefix", suffix && prefixCls + "__inner--suffix", // TODO: bem规范统一
154
+ focused && "focused", disabled && 'disabled', readOnly && 'readonly', invalid && 'invalid'),
125
155
  onMouseOver: function onMouseOver(e) {
126
156
  setHover(true);
127
157
  },
@@ -154,7 +184,7 @@ if (__DEV__) {
154
184
  Input.displayName = 'Input';
155
185
  }
156
186
  /**
157
- * 伪造目标事件 target
187
+ * 模拟伪装目标事件 target
158
188
  *
159
189
  * @param target
160
190
  * @param evt
@@ -165,9 +195,9 @@ if (__DEV__) {
165
195
 
166
196
 
167
197
  function onChangeMock(onChange, evt, target, targetValue) {
168
- var event = evt; // 点击 clearIcon 时，代理 onChange 的事件对象 target 指向 input.target
198
+ var event = evt; // 点击 clearIcon 或者 失焦 trim 时，都会代理 onChange 的事件对象 target 指向 input.target
169
199
 
170
- if (evt.type === 'click') {
200
+ if (evt.type !== 'change') {
171
201
  if (!target) return;
172
202
  var originalTargetValue = target.value;
173
203
  event = Object.create(evt);
package/lib/esm/Input.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Input.js","sources":["../../src/Input.tsx"],"sourcesContent":[null],"names":["_role","_prefix","getPrefixCls","Input","forwardRef","_a","ref","prefixCls","role","className","style","autoFocus","disabled","readOnly","name","maxLength","type","size","appearance","placeholder","prepend","append","prefix","suffix","defaultValue","valueProp","value","onChange","onFocus","onBlur","clearableTrigger","clearable","rest","inputRef","useRef","proxyOnChange","useCallback","evt","onChangeMock","current","useUncontrolledState","tryChangeValue","handleChange","nextValue","target","useState","focused","setFocused","handleFocus","handleBlur","event","focus","handleReset","nativeInputProps","useMemo","hover","setHover","showClearableIcon","cls","cx","React","onMouseOver","e","onMouseLeave","useMergeRefs","tabIndex","onClick","CloseCircleFilled","__DEV__","displayName","targetValue","originalTargetValue","Object","create","currentTarget"],"mappings":"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"}
1
+ {"version":3,"file":"Input.js","sources":["../../src/Input.tsx"],"sourcesContent":[null],"names":["_prefix","getPrefixCls","Input","forwardRef","_a","ref","prefixCls","role","className","style","autoFocus","disabled","readOnly","name","maxLength","type","size","appearance","placeholder","prepend","append","prefix","suffix","defaultValue","valueProp","value","onChange","onFocus","onBlur","clearableTrigger","clearable","trimValueOnBlur","invalid","rest","useMemo","shouldUnset","isValidElement","includes","HiName","unsetPrepend","unsetAppend","inputRef","useRef","proxyOnChange","useCallback","evt","onChangeMock","current","useUncontrolledState","tryChangeValue","handleChange","nextValue","target","useState","focused","setFocused","handleFocus","handleBlur","event","trim","focus","handleReset","nativeInputProps","hover","setHover","showClearableIcon","cls","cx","React","onMouseOver","e","onMouseLeave","useMergeRefs","tabIndex","onClick","CloseCircleFilled","__DEV__","displayName","targetValue","originalTargetValue","Object","create","currentTarget"],"mappings":"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"}
package/lib/esm/MockInput.js ADDED
@@ -0,0 +1,129 @@
1
+ /** @LICENSE
2
+ * @hi-ui/input
3
+ * https://github.com/XiaoMi/hiui/tree/master/packages/ui/input#readme
4
+ *
5
+ * Copyright (c) HIUI <mi-hiui@xiaomi.com>.
6
+ *
7
+ * This source code is licensed under the MIT license found in the
8
+ * LICENSE file in the root directory of this source tree.
9
+ */
10
+ import { __rest } from 'tslib';
11
+ import React, { forwardRef, useMemo, useCallback, useState } from 'react';
12
+ import { getPrefixCls, cx } from '@hi-ui/classname';
13
+ import { __DEV__ } from '@hi-ui/env';
14
+ import { useUncontrolledState } from '@hi-ui/use-uncontrolled-state';
15
+ import { CloseCircleFilled } from '@hi-ui/icons';
16
+ var _role = 'mock-input';
17
+
18
+ var _prefix = getPrefixCls(_role);
19
+
20
+ var NOOP_VALUE = '';
21
+ var NOOP_ARRAY = [];
22
+ /**
23
+ * 支持自定义渲染输入框内容，暂时仅供内部 Picker 类组件使用，不对外提供
24
+ */
25
+
26
+ var MockInput = /*#__PURE__*/forwardRef(function (_a, ref) {
27
+ 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 ? 'outline' : _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
+
61
+ var _useUncontrolledState = useUncontrolledState(defaultValue, valueProp, onChange),
62
+ value = _useUncontrolledState[0],
63
+ tryChangeValue = _useUncontrolledState[1];
64
+
65
+ var displayValue = useMemo(function () {
66
+ if (value === '') return null;
67
+ var displayItem = data.find(function (item) {
68
+ return item.id === value;
69
+ });
70
+ if (!displayItem) return null;
71
+
72
+ if (displayRender) {
73
+ return displayRender(displayItem);
74
+ }
75
+
76
+ return displayItem.title;
77
+ }, [data, value, displayRender]);
78
+ var handleClear = useCallback(function (evt) {
79
+ if (disabled) return;
80
+ evt.stopPropagation();
81
+ tryChangeValue(NOOP_VALUE);
82
+ }, [tryChangeValue, disabled]);
83
+
84
+ var _useState = useState(false),
85
+ hover = _useState[0],
86
+ setHover = _useState[1];
87
+
88
+ var trySetHover = useCallback(function (hovered) {
89
+ if (disabled) return;
90
+ setHover(hovered);
91
+ }, [disabled]);
92
+ var hasValue = !!displayValue; // 在开启 clearable 下展示 清除内容按钮，可点击进行内容清除
93
+
94
+ var showClearableIcon = useMemo(function () {
95
+ return clearable && hasValue && !disabled && (clearableTrigger === 'always' || hover);
96
+ }, [clearable, hasValue, disabled, clearableTrigger, hover]);
97
+ var cls = cx(prefixCls, className, prefixCls + "--appearance-" + appearance, prefixCls + "--size-" + size, focused && "focused", disabled && 'disabled', readOnly && 'readonly', invalid && 'invalid');
98
+ return /*#__PURE__*/React.createElement("div", Object.assign({
99
+ ref: ref,
100
+ role: role,
101
+ className: cls,
102
+ onMouseOver: function onMouseOver(evt) {
103
+ trySetHover(true);
104
+ _onMouseOver === null || _onMouseOver === void 0 ? void 0 : _onMouseOver(evt);
105
+ },
106
+ onMouseLeave: function onMouseLeave(evt) {
107
+ trySetHover(false);
108
+ _onMouseLeave === null || _onMouseLeave === void 0 ? void 0 : _onMouseLeave(evt);
109
+ }
110
+ }, rest), hasValue ? /*#__PURE__*/React.createElement("span", {
111
+ className: prefixCls + "__value"
112
+ }, displayValue) : /*#__PURE__*/React.createElement("span", {
113
+ className: prefixCls + "__placeholder"
114
+ }, placeholder), suffix || showClearableIcon ? /*#__PURE__*/React.createElement("span", {
115
+ className: prefixCls + "__suffix"
116
+ }, showClearableIcon ? /*#__PURE__*/React.createElement("span", {
117
+ role: "button",
118
+ tabIndex: -1,
119
+ className: cx(prefixCls + "__clear", 'active'),
120
+ onClick: handleClear
121
+ }, /*#__PURE__*/React.createElement(CloseCircleFilled, null)) : suffix) : null);
122
+ });
123
+
124
+ if (__DEV__) {
125
+ MockInput.displayName = 'MockInput';
126
+ }
127
+
128
+ export { MockInput };
129
+ //# sourceMappingURL=MockInput.js.map
package/lib/esm/MockInput.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"MockInput.js","sources":["../../src/MockInput.tsx"],"sourcesContent":[null],"names":["_role","_prefix","getPrefixCls","NOOP_VALUE","NOOP_ARRAY","MockInput","forwardRef","_a","ref","prefixCls","role","className","data","defaultValue","valueProp","value","onChange","placeholder","disabled","clearable","focused","invalid","readOnly","size","appearance","clearableTrigger","displayRender","suffix","onMouseOver","onMouseLeave","rest","useUncontrolledState","tryChangeValue","displayValue","useMemo","displayItem","find","item","id","title","handleClear","useCallback","evt","stopPropagation","useState","hover","setHover","trySetHover","hovered","hasValue","showClearableIcon","cls","cx","React","tabIndex","onClick","CloseCircleFilled","__DEV__","displayName"],"mappings":"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"}
package/lib/esm/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /** @LICENSE
2
- * @hi-ui/input v4.0.0-alpha.1
2
+ * @hi-ui/input
3
3
  * https://github.com/XiaoMi/hiui/tree/master/packages/ui/input#readme
4
4
  *
5
5
  * Copyright (c) HIUI <mi-hiui@xiaomi.com>.
@@ -9,4 +9,5 @@
9
9
  */
10
10
  import './styles/index.scss.js';
11
11
  export { Input, Input as default, onChangeMock } from './Input.js';
12
+ export { MockInput } from './MockInput.js';
12
13
  //# sourceMappingURL=index.js.map
package/lib/esm/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}
1
+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}
package/lib/esm/styles/index.scss.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /** @LICENSE
2
- * @hi-ui/input v4.0.0-alpha.1
2
+ * @hi-ui/input
3
3
  * https://github.com/XiaoMi/hiui/tree/master/packages/ui/input#readme
4
4
  *
5
5
  * Copyright (c) HIUI <mi-hiui@xiaomi.com>.
@@ -7,7 +7,7 @@
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
- var css_248z = ".hi-v4-input {\n margin: 0;\n border: none;\n outline: none;\n -webkit-box-shadow: none;\n box-shadow: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n height: inherit;\n background-color: transparent;\n cursor: text;\n -webkit-box-flex: 1;\n -ms-flex: 1 1;\n flex: 1 1;\n display: inline-block;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n -webkit-transition: all .3s;\n transition: all .3s;\n width: 100%;\n font-size: inherit;\n color: var(--color-black);\n line-height: 22px; }\n .hi-v4-input::-webkit-input-placeholder {\n color: var(--color-gray-50); }\n .hi-v4-input::-moz-placeholder {\n color: var(--color-gray-50); }\n .hi-v4-input::-ms-input-placeholder {\n color: var(--color-gray-50); }\n .hi-v4-input:-ms-input-placeholder {\n color: var(--color-gray-50); }\n .hi-v4-input::placeholder {\n color: var(--color-gray-50); }\n .hi-v4-input:disabled {\n cursor: not-allowed; }\n .hi-v4-input__inner {\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n height: auto;\n width: 100%;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n font-size: inherit;\n border: 1px solid transparent;\n background-color: var(--color-white);\n -webkit-transition: all 0.3s;\n transition: all 0.3s;\n outline: 2px solid transparent; }\n .hi-v4-input__inner:not(.disabled):hover {\n z-index: 1; }\n .hi-v4-input__inner:not(.disabled).focused {\n z-index: 1; }\n .hi-v4-input__outer {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n position: relative;\n margin: 0;\n padding: 0;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n height: auto;\n width: 100%; }\n .hi-v4-input__clear {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n height: auto;\n font-size: 14px;\n text-align: center;\n color: var(--color-gray-50);\n -ms-flex-negative: 0;\n flex-shrink: 0;\n cursor: pointer;\n -webkit-transition: all 0.3s;\n transition: all 0.3s;\n visibility: hidden;\n opacity: 0; }\n .hi-v4-input__clear:hover {\n color: var(--color-black); }\n .hi-v4-input__clear.active {\n visibility: visible;\n opacity: 1; }\n .hi-v4-input__inner--suffix .hi-v4-input__clear {\n margin-right: 4px; }\n .hi-v4-input__prefix, .hi-v4-input__suffix {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -ms-flex-negative: 0;\n flex-shrink: 0;\n color: var(--color-black);\n font-size: inherit;\n text-align: center; }\n .hi-v4-input__prefix {\n padding-left: 11px; }\n .hi-v4-input__suffix {\n padding-right: 11px; }\n .hi-v4-input__prepend, .hi-v4-input__append {\n position: relative;\n color: var(--color-black);\n -ms-flex-negative: 0;\n flex-shrink: 0;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n font-size: inherit;\n text-align: center;\n -webkit-transition: all .3s;\n transition: all .3s;\n padding: 0 11px;\n border: 1px solid transparent;\n white-space: nowrap; }\n .hi-v4-input__prepend, .hi-v4-input__append {\n background-color: #f8f8f8; }\n .hi-v4-input__prepend {\n border-right-width: 0;\n border-top-right-radius: 0;\n border-bottom-right-radius: 0; }\n .hi-v4-input__append {\n border-left-width: 0;\n border-top-left-radius: 0;\n border-bottom-left-radius: 0; }\n .hi-v4-input--size-sm {\n font-size: 14px; }\n .hi-v4-input--size-sm .hi-v4-input {\n padding: 4px 11px; }\n .hi-v4-input--size-sm .hi-v4-input__inner {\n border-radius: 2px; }\n .hi-v4-input--size-sm .hi-v4-input__prepend {\n border-top-left-radius: 2px;\n border-bottom-left-radius: 2px; }\n .hi-v4-input--size-sm .hi-v4-input__append {\n border-top-right-radius: 2px;\n border-bottom-right-radius: 2px; }\n .hi-v4-input--size-md {\n font-size: 16px; }\n .hi-v4-input--size-md .hi-v4-input {\n padding: 8px 11px; }\n .hi-v4-input--size-md .hi-v4-input__inner {\n border-radius: 4px; }\n .hi-v4-input--size-md .hi-v4-input__prepend {\n border-top-left-radius: 4px;\n border-bottom-left-radius: 4px; }\n .hi-v4-input--size-md .hi-v4-input__append {\n border-top-right-radius: 4px;\n border-bottom-right-radius: 4px; }\n .hi-v4-input--size-lg {\n font-size: 18px; }\n .hi-v4-input--size-lg .hi-v4-input {\n padding: 12px 11px; }\n .hi-v4-input--size-lg .hi-v4-input__inner {\n border-radius: 6px; }\n .hi-v4-input--size-lg .hi-v4-input__prepend {\n border-top-left-radius: 6px;\n border-bottom-left-radius: 6px; }\n .hi-v4-input--size-lg .hi-v4-input__append {\n border-top-right-radius: 6px;\n border-bottom-right-radius: 6px; }\n .hi-v4-input--appearance-outline .hi-v4-input__inner {\n border-color: var(--color-gray-30); }\n .hi-v4-input--appearance-outline .hi-v4-input__inner:not(.disabled):hover {\n border-color: var(--color-primary); }\n .hi-v4-input--appearance-outline .hi-v4-input__inner:not(.disabled).focused {\n -webkit-box-shadow: 0 0 0 1px var(--color-primary);\n box-shadow: 0 0 0 1px var(--color-primary);\n border-color: var(--color-primary); }\n .hi-v4-input--appearance-outline .hi-v4-input__inner.disabled {\n color: var(--color-gray-50);\n background-color: var(--color-gray-10); }\n .hi-v4-input--appearance-outline .hi-v4-input__prepend,\n .hi-v4-input--appearance-outline .hi-v4-input__append {\n border-color: var(--color-gray-30); }\n .hi-v4-input--appearance-unset .hi-v4-input {\n padding-left: 0;\n padding-right: 0; }\n .hi-v4-input--appearance-unset.hi-v4-input__outer--prepend .hi-v4-input,\n .hi-v4-input--appearance-unset .hi-v4-input__inner--prefix .hi-v4-input {\n padding-left: 11px; }\n .hi-v4-input--appearance-unset.hi-v4-input__outer--append .hi-v4-input,\n .hi-v4-input--appearance-unset .hi-v4-input__inner--suffix .hi-v4-input {\n padding-right: 11px; }\n .hi-v4-input--appearance-unset .hi-v4-input__inner {\n border-radius: 0; }\n .hi-v4-input--appearance-filled .hi-v4-input__inner {\n background-color: #f8f8f8; }\n .hi-v4-input--appearance-filled .hi-v4-input__inner:not(.disabled):hover {\n -webkit-box-shadow: 0 0 0 1px var(--color-primary);\n box-shadow: 0 0 0 1px var(--color-primary);\n border-color: var(--color-primary); }\n .hi-v4-input--appearance-filled .hi-v4-input__inner:not(.disabled).focused {\n -webkit-box-shadow: 0 0 0 1px var(--color-primary);\n box-shadow: 0 0 0 1px var(--color-primary);\n border-color: var(--color-primary);\n background-color: var(--color-white); }\n .hi-v4-input--appearance-underline .hi-v4-input {\n padding-left: 0;\n padding-right: 0; }\n .hi-v4-input--appearance-underline.hi-v4-input__outer--prepend .hi-v4-input,\n .hi-v4-input--appearance-underline .hi-v4-input__inner--prefix .hi-v4-input {\n padding-left: 11px; }\n .hi-v4-input--appearance-underline.hi-v4-input__outer--append .hi-v4-input,\n .hi-v4-input--appearance-underline .hi-v4-input__inner--suffix .hi-v4-input {\n padding-right: 11px; }\n .hi-v4-input--appearance-underline .hi-v4-input__inner {\n border-radius: 0; }\n .hi-v4-input--appearance-underline .hi-v4-input__inner::after {\n content: '';\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n display: block;\n position: absolute;\n bottom: 0;\n left: -1px;\n right: -1px;\n border-bottom: 1px solid var(--color-gray-30);\n -webkit-transition: all .3s;\n transition: all .3s; }\n .hi-v4-input--appearance-underline .hi-v4-input__inner:not(.disabled):hover::after {\n border-bottom-color: var(--color-primary); }\n .hi-v4-input--appearance-underline .hi-v4-input__inner:not(.disabled).focused::after {\n border-bottom-color: var(--color-primary);\n -webkit-box-shadow: 0 1px 0 0 var(--color-primary);\n box-shadow: 0 1px 0 0 var(--color-primary); }\n .hi-v4-input__outer--prepend .hi-v4-input__inner {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0; }\n .hi-v4-input__outer--append .hi-v4-input__inner {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0; }\n";
10
+ var css_248z = "@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n.hi-v4-mock-input {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n border: none;\n outline: none;\n -webkit-box-shadow: none;\n box-shadow: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n cursor: text;\n background-color: transparent;\n -webkit-tap-highlight-color: transparent;\n position: relative;\n overflow: hidden;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -webkit-box-flex: 1;\n -ms-flex: 1 1;\n flex: 1 1;\n -webkit-transition-property: all;\n transition-property: all;\n -webkit-transition-duration: 200ms;\n transition-duration: 200ms;\n -webkit-transition-duration: var(--hi-v4-motion-duration-normal, 200ms);\n transition-duration: var(--hi-v4-motion-duration-normal, 200ms);\n -webkit-transition-timing-function: cubic-bezier(0.37, 0.02, 0.34, 1);\n transition-timing-function: cubic-bezier(0.37, 0.02, 0.34, 1);\n -webkit-transition-timing-function: var(--hi-v4-motion-bezier-normal, cubic-bezier(0.37, 0.02, 0.34, 1));\n transition-timing-function: var(--hi-v4-motion-bezier-normal, cubic-bezier(0.37, 0.02, 0.34, 1));\n width: 100%;\n height: auto;\n z-index: auto;\n font-size: inherit;\n line-height: inherit;\n color: #1f2733;\n color: var(--hi-v4-color-gray-700, #1f2733);\n border: 1px solid transparent;\n border: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-static-transparent, transparent);\n background-color: #fff;\n background-color: var(--hi-v4-color-static-white, #fff); }\n.hi-v4-mock-input:not(.disabled):hover {\n z-index: calc(1 + 1);\n z-index: calc(var(--hi-v4-zindex-absolute, 1) + 1); }\n.hi-v4-mock-input:not(.disabled).focused {\n z-index: calc(1 + 1);\n z-index: calc(var(--hi-v4-zindex-absolute, 1) + 1); }\n.hi-v4-mock-input.disabled {\n cursor: not-allowed; }\n.hi-v4-mock-input__suffix, .hi-v4-mock-input__placeholder {\n color: #c9ced6;\n color: var(--hi-v4-color-gray-400, #c9ced6); }\n.hi-v4-mock-input__clear {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n width: 16px;\n height: 16px;\n font-size: 0.875rem;\n font-size: var(--hi-v4-text-size-normal, 0.875rem);\n text-align: center;\n color: #929aa6;\n color: var(--hi-v4-color-gray-500, #929aa6);\n -ms-flex-negative: 0;\n flex-shrink: 0;\n cursor: pointer;\n visibility: hidden;\n opacity: 0;\n -webkit-transition-property: all;\n transition-property: all;\n -webkit-transition-duration: 200ms;\n transition-duration: 200ms;\n -webkit-transition-duration: var(--hi-v4-motion-duration-normal, 200ms);\n transition-duration: var(--hi-v4-motion-duration-normal, 200ms);\n -webkit-transition-timing-function: cubic-bezier(0.37, 0.02, 0.34, 1);\n transition-timing-function: cubic-bezier(0.37, 0.02, 0.34, 1);\n -webkit-transition-timing-function: var(--hi-v4-motion-bezier-normal, cubic-bezier(0.37, 0.02, 0.34, 1));\n transition-timing-function: var(--hi-v4-motion-bezier-normal, cubic-bezier(0.37, 0.02, 0.34, 1)); }\n.hi-v4-mock-input__clear:hover {\n color: #000;\n color: var(--hi-v4-color-static-black, #000); }\n.hi-v4-mock-input__clear.active {\n visibility: visible;\n opacity: 1; }\n.hi-v4-mock-input__suffix {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -ms-flex-negative: 0;\n flex-shrink: 0;\n color: #c9ced6;\n color: var(--hi-v4-color-gray-400, #c9ced6);\n font-size: 1rem;\n font-size: var(--hi-v4-text-size-lg, 1rem);\n padding-left: 8px;\n padding-left: var(--hi-v4-spacing-4, 8px);\n text-align: center; }\n.hi-v4-mock-input__value {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n display: inline-block;\n width: auto;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap; }\n.hi-v4-mock-input--size-sm {\n height: 24px;\n height: var(--hi-v4-height-xs, 24px);\n font-size: 0.75rem;\n font-size: var(--hi-v4-text-size-sm, 0.75rem);\n line-height: 1.25rem;\n border-radius: 4px;\n border-radius: var(--hi-v4-border-radius-normal, 4px);\n padding: 1px calc(12px - 1px);\n padding: 1px calc(var(--hi-v4-spacing-6, 12px) - 1px); }\n.hi-v4-mock-input--size-md {\n height: 32px;\n height: var(--hi-v4-height-normal, 32px);\n font-size: 0.875rem;\n font-size: var(--hi-v4-text-size-normal, 0.875rem);\n line-height: 1.375rem;\n border-radius: 4px;\n border-radius: var(--hi-v4-border-radius-normal, 4px);\n padding: 4px calc(12px - 1px);\n padding: 4px calc(var(--hi-v4-spacing-6, 12px) - 1px); }\n.hi-v4-mock-input--size-lg {\n height: 40px;\n height: var(--hi-v4-height-xl, 40px);\n font-size: 1rem;\n font-size: var(--hi-v4-text-size-lg, 1rem);\n line-height: 1.5rem;\n border-radius: 4px;\n border-radius: var(--hi-v4-border-radius-normal, 4px);\n padding: 7px calc(12px - 1px);\n padding: 7px calc(var(--hi-v4-spacing-6, 12px) - 1px); }\n.hi-v4-mock-input--appearance-outline {\n border-color: #dfe2e8;\n border-color: var(--hi-v4-color-gray-300, #dfe2e8); }\n.hi-v4-mock-input--appearance-outline:not(.disabled):hover {\n border-color: #237ffa;\n border-color: var(--hi-v4-color-brandblue-500, #237ffa); }\n.hi-v4-mock-input--appearance-outline:not(.disabled).focused {\n -webkit-box-shadow: 0 0 0 2px #bde2ff;\n box-shadow: 0 0 0 2px #bde2ff;\n -webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-brandblue-100, #bde2ff);\n box-shadow: 0 0 0 2px var(--hi-v4-color-brandblue-100, #bde2ff);\n border-color: #237ffa;\n border-color: var(--hi-v4-color-brandblue-500, #237ffa); }\n.hi-v4-mock-input--appearance-outline:not(.disabled).invalid {\n border-color: #ff5959;\n border-color: var(--hi-v4-color-red-500, #ff5959); }\n.hi-v4-mock-input--appearance-outline:not(.disabled).invalid.hover {\n border-color: #ff5959;\n border-color: var(--hi-v4-color-red-500, #ff5959); }\n.hi-v4-mock-input--appearance-outline:not(.disabled).invalid.focused {\n -webkit-box-shadow: 0 0 0 2px #ffd1c9;\n box-shadow: 0 0 0 2px #ffd1c9;\n -webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-red-100, #ffd1c9);\n box-shadow: 0 0 0 2px var(--hi-v4-color-red-100, #ffd1c9); }\n.hi-v4-mock-input--appearance-unset {\n width: auto;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: flex-start;\n border-color: transparent; }\n.hi-v4-mock-input--appearance-unset:not(.disabled):hover {\n background-color: #f2f4f7;\n background-color: var(--hi-v4-color-gray-100, #f2f4f7); }\n.hi-v4-mock-input--appearance-unset:not(.disabled).focused {\n -webkit-box-shadow: 0 0 0 2px #bde2ff;\n box-shadow: 0 0 0 2px #bde2ff;\n -webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-brandblue-100, #bde2ff);\n box-shadow: 0 0 0 2px var(--hi-v4-color-brandblue-100, #bde2ff);\n background-color: #fff;\n background-color: var(--hi-v4-color-static-white, #fff);\n border-color: #237ffa;\n border-color: var(--hi-v4-color-brandblue-500, #237ffa); }\n.hi-v4-mock-input--appearance-unset:not(.disabled).invalid {\n border-color: #ff5959;\n border-color: var(--hi-v4-color-red-500, #ff5959); }\n.hi-v4-mock-input--appearance-unset:not(.disabled).invalid.hover {\n border-color: #ff5959;\n border-color: var(--hi-v4-color-red-500, #ff5959); }\n.hi-v4-mock-input--appearance-unset:not(.disabled).invalid.focused {\n -webkit-box-shadow: 0 0 0 2px #ffd1c9;\n box-shadow: 0 0 0 2px #ffd1c9;\n -webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-red-100, #ffd1c9);\n box-shadow: 0 0 0 2px var(--hi-v4-color-red-100, #ffd1c9); }\n.hi-v4-mock-input--appearance-filled {\n background-color: #f2f4f7;\n background-color: var(--hi-v4-color-gray-100, #f2f4f7); }\n.hi-v4-mock-input--appearance-filled:not(.disabled):hover {\n background-color: #fff;\n background-color: var(--hi-v4-color-static-white, #fff);\n border-color: #237ffa;\n border-color: var(--hi-v4-color-brandblue-500, #237ffa); }\n.hi-v4-mock-input--appearance-filled:not(.disabled).focused {\n -webkit-box-shadow: 0 0 0 2px #bde2ff;\n box-shadow: 0 0 0 2px #bde2ff;\n -webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-brandblue-100, #bde2ff);\n box-shadow: 0 0 0 2px var(--hi-v4-color-brandblue-100, #bde2ff);\n border-color: #237ffa;\n border-color: var(--hi-v4-color-brandblue-500, #237ffa);\n background-color: #fff;\n background-color: var(--hi-v4-color-static-white, #fff); }\n.hi-v4-mock-input--appearance-filled:not(.disabled).invalid {\n border-color: #ff5959;\n border-color: var(--hi-v4-color-red-500, #ff5959); }\n.hi-v4-mock-input--appearance-filled:not(.disabled).invalid.hover {\n border-color: #ff5959;\n border-color: var(--hi-v4-color-red-500, #ff5959); }\n.hi-v4-mock-input--appearance-filled:not(.disabled).invalid.focused {\n -webkit-box-shadow: 0 0 0 2px #ffd1c9;\n box-shadow: 0 0 0 2px #ffd1c9;\n -webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-red-100, #ffd1c9);\n box-shadow: 0 0 0 2px var(--hi-v4-color-red-100, #ffd1c9); }\n.hi-v4-mock-input--appearance-outline.disabled, .hi-v4-mock-input--appearance-unset.disabled, .hi-v4-mock-input--appearance-filled.disabled {\n color: #c9ced6;\n color: var(--hi-v4-color-gray-400, #c9ced6); }\n.hi-v4-mock-input--appearance-outline.disabled, .hi-v4-mock-input--appearance-filled.disabled {\n background-color: #ebedf0;\n background-color: var(--hi-v4-color-gray-200, #ebedf0); }\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n.hi-v4-input {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n border: none;\n outline: none;\n -webkit-box-shadow: none;\n box-shadow: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n cursor: text;\n background-color: transparent;\n -webkit-tap-highlight-color: transparent;\n -webkit-box-flex: 1;\n -ms-flex: 1 1;\n flex: 1 1;\n display: inline-block;\n box-sizing: border-box;\n -webkit-transition-property: all;\n transition-property: all;\n -webkit-transition-duration: 200ms;\n transition-duration: 200ms;\n -webkit-transition-duration: var(--hi-v4-motion-duration-normal, 200ms);\n transition-duration: var(--hi-v4-motion-duration-normal, 200ms);\n -webkit-transition-timing-function: cubic-bezier(0.37, 0.02, 0.34, 1);\n transition-timing-function: cubic-bezier(0.37, 0.02, 0.34, 1);\n -webkit-transition-timing-function: var(--hi-v4-motion-bezier-normal, cubic-bezier(0.37, 0.02, 0.34, 1));\n transition-timing-function: var(--hi-v4-motion-bezier-normal, cubic-bezier(0.37, 0.02, 0.34, 1));\n width: 100%;\n font-size: inherit;\n line-height: inherit;\n color: #1f2733;\n color: var(--hi-v4-color-gray-700, #1f2733); }\n.hi-v4-input::-webkit-input-placeholder {\n color: #c9ced6;\n color: var(--hi-v4-color-gray-400, #c9ced6); }\n.hi-v4-input::-moz-placeholder {\n color: #c9ced6;\n color: var(--hi-v4-color-gray-400, #c9ced6); }\n.hi-v4-input::-ms-input-placeholder {\n color: #c9ced6;\n color: var(--hi-v4-color-gray-400, #c9ced6); }\n.hi-v4-input:-ms-input-placeholder {\n color: #c9ced6;\n color: var(--hi-v4-color-gray-400, #c9ced6); }\n.hi-v4-input::placeholder {\n color: #c9ced6;\n color: var(--hi-v4-color-gray-400, #c9ced6); }\n.hi-v4-input:disabled {\n cursor: not-allowed; }\n.hi-v4-input__inner {\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n height: auto;\n width: 100%;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n font-size: inherit;\n border: 1px solid transparent;\n border: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-static-transparent, transparent);\n background-color: #fff;\n background-color: var(--hi-v4-color-static-white, #fff);\n -webkit-transition-property: all;\n transition-property: all;\n -webkit-transition-duration: 200ms;\n transition-duration: 200ms;\n -webkit-transition-duration: var(--hi-v4-motion-duration-normal, 200ms);\n transition-duration: var(--hi-v4-motion-duration-normal, 200ms);\n -webkit-transition-timing-function: cubic-bezier(0.37, 0.02, 0.34, 1);\n transition-timing-function: cubic-bezier(0.37, 0.02, 0.34, 1);\n -webkit-transition-timing-function: var(--hi-v4-motion-bezier-normal, cubic-bezier(0.37, 0.02, 0.34, 1));\n transition-timing-function: var(--hi-v4-motion-bezier-normal, cubic-bezier(0.37, 0.02, 0.34, 1));\n outline: none;\n z-index: auto; }\n.hi-v4-input__inner:not(.disabled):hover {\n z-index: calc(1 + 1);\n z-index: calc(var(--hi-v4-zindex-absolute, 1) + 1); }\n.hi-v4-input__inner:not(.disabled).focused {\n z-index: calc(1 + 1);\n z-index: calc(var(--hi-v4-zindex-absolute, 1) + 1); }\n.hi-v4-input__outer {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n position: relative;\n margin: 0;\n padding: 0;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n height: auto;\n width: 100%;\n vertical-align: middle; }\n.hi-v4-input__clear {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n height: auto;\n text-align: center;\n font-size: 0.875rem;\n font-size: var(--hi-v4-text-size-normal, 0.875rem);\n color: #929aa6;\n color: var(--hi-v4-color-gray-500, #929aa6);\n -ms-flex-negative: 0;\n flex-shrink: 0;\n cursor: pointer;\n -webkit-transition-property: all;\n transition-property: all;\n -webkit-transition-duration: 200ms;\n transition-duration: 200ms;\n -webkit-transition-duration: var(--hi-v4-motion-duration-normal, 200ms);\n transition-duration: var(--hi-v4-motion-duration-normal, 200ms);\n -webkit-transition-timing-function: cubic-bezier(0.37, 0.02, 0.34, 1);\n transition-timing-function: cubic-bezier(0.37, 0.02, 0.34, 1);\n -webkit-transition-timing-function: var(--hi-v4-motion-bezier-normal, cubic-bezier(0.37, 0.02, 0.34, 1));\n transition-timing-function: var(--hi-v4-motion-bezier-normal, cubic-bezier(0.37, 0.02, 0.34, 1));\n visibility: hidden;\n opacity: 0; }\n.hi-v4-input__clear:hover {\n color: #1f2733;\n color: var(--hi-v4-color-gray-700, #1f2733); }\n.hi-v4-input__clear.active {\n visibility: visible;\n opacity: 1; }\n.hi-v4-input__inner--suffix .hi-v4-input__clear {\n -webkit-margin-end: 4px;\n margin-inline-end: 4px;\n -webkit-margin-end: var(--hi-v4-spacing-2, 4px);\n margin-inline-end: var(--hi-v4-spacing-2, 4px); }\n.hi-v4-input__prefix, .hi-v4-input__suffix {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -ms-flex-negative: 0;\n flex-shrink: 0;\n color: #1f2733;\n color: var(--hi-v4-color-gray-700, #1f2733);\n font-size: inherit;\n text-align: center; }\n.hi-v4-input__prefix {\n padding-left: calc(12px - 1px);\n padding-left: calc(var(--hi-v4-spacing-6, 12px) - 1px); }\n.hi-v4-input__suffix {\n padding-right: calc(12px - 1px);\n padding-right: calc(var(--hi-v4-spacing-6, 12px) - 1px); }\n.hi-v4-input__prepend, .hi-v4-input__append {\n position: relative;\n color: #1f2733;\n color: var(--hi-v4-color-gray-700, #1f2733);\n background-color: #f5f7fa;\n background-color: var(--hi-v4-color-gray-50, #f5f7fa);\n -ms-flex-negative: 0;\n flex-shrink: 0;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n font-size: inherit;\n text-align: center;\n padding: 0 calc(12px - 1px);\n padding: 0 calc(var(--hi-v4-spacing-6, 12px) - 1px);\n border: 1px solid transparent;\n border: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-static-transparent, transparent);\n white-space: nowrap;\n -webkit-transition-property: all;\n transition-property: all;\n -webkit-transition-duration: 200ms;\n transition-duration: 200ms;\n -webkit-transition-duration: var(--hi-v4-motion-duration-normal, 200ms);\n transition-duration: var(--hi-v4-motion-duration-normal, 200ms);\n -webkit-transition-timing-function: cubic-bezier(0.37, 0.02, 0.34, 1);\n transition-timing-function: cubic-bezier(0.37, 0.02, 0.34, 1);\n -webkit-transition-timing-function: var(--hi-v4-motion-bezier-normal, cubic-bezier(0.37, 0.02, 0.34, 1));\n transition-timing-function: var(--hi-v4-motion-bezier-normal, cubic-bezier(0.37, 0.02, 0.34, 1));\n z-index: 1;\n z-index: var(--hi-v4-zindex-absolute, 1); }\n.hi-v4-input__prepend {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n margin-right: -1px; }\n.hi-v4-input__append {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n margin-left: -1px; }\n.hi-v4-input--size-sm {\n height: 24px;\n height: var(--hi-v4-height-xs, 24px);\n font-size: 0.75rem;\n font-size: var(--hi-v4-text-size-sm, 0.75rem);\n line-height: 1.25rem; }\n.hi-v4-input--size-sm .hi-v4-input {\n padding: 1px calc(12px - 1px);\n padding: 1px calc(var(--hi-v4-spacing-6, 12px) - 1px); }\n.hi-v4-input--size-sm .hi-v4-input__inner,\n .hi-v4-input--size-sm .hi-v4-input__prepend,\n .hi-v4-input--size-sm .hi-v4-input__append {\n border-radius: 4px;\n border-radius: var(--hi-v4-border-radius-normal, 4px); }\n.hi-v4-input--size-sm .hi-v4-input__prepend {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0; }\n.hi-v4-input--size-sm .hi-v4-input__append {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0; }\n.hi-v4-input--size-md {\n height: 32px;\n height: var(--hi-v4-height-normal, 32px);\n font-size: 0.875rem;\n font-size: var(--hi-v4-text-size-normal, 0.875rem);\n line-height: 1.375rem; }\n.hi-v4-input--size-md .hi-v4-input {\n padding: 4px calc(12px - 1px);\n padding: 4px calc(var(--hi-v4-spacing-6, 12px) - 1px); }\n.hi-v4-input--size-md .hi-v4-input__inner,\n .hi-v4-input--size-md .hi-v4-input__prepend,\n .hi-v4-input--size-md .hi-v4-input__append {\n border-radius: 4px;\n border-radius: var(--hi-v4-border-radius-normal, 4px); }\n.hi-v4-input--size-md .hi-v4-input__prepend {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0; }\n.hi-v4-input--size-md .hi-v4-input__append {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0; }\n.hi-v4-input--size-lg {\n height: 40px;\n height: var(--hi-v4-height-xl, 40px);\n font-size: 1rem;\n font-size: var(--hi-v4-text-size-lg, 1rem);\n line-height: 1.5rem; }\n.hi-v4-input--size-lg .hi-v4-input {\n padding: 7px calc(12px - 1px);\n padding: 7px calc(var(--hi-v4-spacing-6, 12px) - 1px); }\n.hi-v4-input--size-lg .hi-v4-input__inner,\n .hi-v4-input--size-lg .hi-v4-input__prepend,\n .hi-v4-input--size-lg .hi-v4-input__append {\n border-radius: 4px;\n border-radius: var(--hi-v4-border-radius-normal, 4px); }\n.hi-v4-input--size-lg .hi-v4-input__prepend {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0; }\n.hi-v4-input--size-lg .hi-v4-input__append {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0; }\n.hi-v4-input--appearance-outline .hi-v4-input__inner {\n border-color: #dfe2e8;\n border-color: var(--hi-v4-color-gray-300, #dfe2e8); }\n.hi-v4-input--appearance-outline .hi-v4-input__inner:not(.disabled):hover {\n border-color: #237ffa;\n border-color: var(--hi-v4-color-brandblue-500, #237ffa); }\n.hi-v4-input--appearance-outline .hi-v4-input__inner:not(.disabled).focused {\n -webkit-box-shadow: 0 0 0 2px #bde2ff;\n box-shadow: 0 0 0 2px #bde2ff;\n -webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-brandblue-100, #bde2ff);\n box-shadow: 0 0 0 2px var(--hi-v4-color-brandblue-100, #bde2ff);\n border-color: #237ffa;\n border-color: var(--hi-v4-color-brandblue-500, #237ffa); }\n.hi-v4-input--appearance-outline .hi-v4-input__inner:not(.disabled).invalid {\n border-color: #ff5959;\n border-color: var(--hi-v4-color-red-500, #ff5959); }\n.hi-v4-input--appearance-outline .hi-v4-input__inner:not(.disabled).invalid.hover {\n border-color: #ff5959;\n border-color: var(--hi-v4-color-red-500, #ff5959); }\n.hi-v4-input--appearance-outline .hi-v4-input__inner:not(.disabled).invalid.focused {\n -webkit-box-shadow: 0 0 0 2px #ffd1c9;\n box-shadow: 0 0 0 2px #ffd1c9;\n -webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-red-100, #ffd1c9);\n box-shadow: 0 0 0 2px var(--hi-v4-color-red-100, #ffd1c9); }\n.hi-v4-input--appearance-outline .hi-v4-input__prepend,\n .hi-v4-input--appearance-outline .hi-v4-input__append {\n border-color: #dfe2e8;\n border-color: var(--hi-v4-color-gray-300, #dfe2e8); }\n.hi-v4-input--appearance-unset .hi-v4-input {\n padding-left: 0;\n padding-right: 0; }\n.hi-v4-input--appearance-unset.hi-v4-input__outer--prepend .hi-v4-input,\n .hi-v4-input--appearance-unset .hi-v4-input__inner--prefix .hi-v4-input {\n padding-left: calc(12px - 1px);\n padding-left: calc(var(--hi-v4-spacing-6, 12px) - 1px); }\n.hi-v4-input--appearance-unset.hi-v4-input__outer--append .hi-v4-input,\n .hi-v4-input--appearance-unset .hi-v4-input__inner--suffix .hi-v4-input {\n padding-right: calc(12px - 1px);\n padding-right: calc(var(--hi-v4-spacing-6, 12px) - 1px); }\n.hi-v4-input--appearance-unset .hi-v4-input__inner {\n border-radius: 0; }\n.hi-v4-input--appearance-filled .hi-v4-input__inner {\n background-color: #f2f4f7;\n background-color: var(--hi-v4-color-gray-100, #f2f4f7); }\n.hi-v4-input--appearance-filled .hi-v4-input__inner:not(.disabled):hover {\n background-color: #fff;\n background-color: var(--hi-v4-color-static-white, #fff);\n border-color: #237ffa;\n border-color: var(--hi-v4-color-brandblue-500, #237ffa); }\n.hi-v4-input--appearance-filled .hi-v4-input__inner:not(.disabled).focused {\n -webkit-box-shadow: 0 0 0 2px #bde2ff;\n box-shadow: 0 0 0 2px #bde2ff;\n -webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-brandblue-100, #bde2ff);\n box-shadow: 0 0 0 2px var(--hi-v4-color-brandblue-100, #bde2ff);\n border-color: #237ffa;\n border-color: var(--hi-v4-color-brandblue-500, #237ffa);\n background-color: #fff;\n background-color: var(--hi-v4-color-static-white, #fff); }\n.hi-v4-input--appearance-filled .hi-v4-input__inner:not(.disabled).invalid {\n border-color: #ff5959;\n border-color: var(--hi-v4-color-red-500, #ff5959); }\n.hi-v4-input--appearance-filled .hi-v4-input__inner:not(.disabled).invalid.hover {\n border-color: #ff5959;\n border-color: var(--hi-v4-color-red-500, #ff5959); }\n.hi-v4-input--appearance-filled .hi-v4-input__inner:not(.disabled).invalid.focused {\n -webkit-box-shadow: 0 0 0 2px #ffd1c9;\n box-shadow: 0 0 0 2px #ffd1c9;\n -webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-red-100, #ffd1c9);\n box-shadow: 0 0 0 2px var(--hi-v4-color-red-100, #ffd1c9); }\n.hi-v4-input--appearance-underline .hi-v4-input {\n padding-left: 0;\n padding-right: 0; }\n.hi-v4-input--appearance-underline.hi-v4-input__outer--prepend .hi-v4-input,\n .hi-v4-input--appearance-underline .hi-v4-input__inner--prefix .hi-v4-input {\n padding-left: calc(12px - 1px);\n padding-left: calc(var(--hi-v4-spacing-6, 12px) - 1px); }\n.hi-v4-input--appearance-underline.hi-v4-input__outer--append .hi-v4-input,\n .hi-v4-input--appearance-underline .hi-v4-input__inner--suffix .hi-v4-input {\n padding-right: calc(12px - 1px);\n padding-right: calc(var(--hi-v4-spacing-6, 12px) - 1px); }\n.hi-v4-input--appearance-underline .hi-v4-input__inner {\n border-radius: 0; }\n.hi-v4-input--appearance-underline .hi-v4-input__inner::after {\n content: '';\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n display: block;\n position: absolute;\n bottom: 0;\n left: -1px;\n right: -1px;\n border-bottom: 1px solid #dfe2e8;\n border-bottom: 1px solid var(--hi-v4-color-gray-300, #dfe2e8);\n -webkit-transition: all 0.3s;\n transition: all 0.3s; }\n.hi-v4-input--appearance-underline .hi-v4-input__inner:not(.disabled):hover::after {\n border-bottom-color: #237ffa;\n border-bottom-color: var(--hi-v4-color-brandblue-500, #237ffa); }\n.hi-v4-input--appearance-underline .hi-v4-input__inner:not(.disabled).focused::after {\n border-bottom-color: #237ffa;\n border-bottom-color: var(--hi-v4-color-brandblue-500, #237ffa); }\n.hi-v4-input--appearance-underline .hi-v4-input__inner:not(.disabled).invalid::after {\n border-bottom-color: #ff5959;\n border-bottom-color: var(--hi-v4-color-red-500, #ff5959); }\n.hi-v4-input--appearance-underline .hi-v4-input__inner:not(.disabled).invalid.hover::after {\n border-bottom-color: #ff5959;\n border-bottom-color: var(--hi-v4-color-red-500, #ff5959); }\n.hi-v4-input--appearance-outline .hi-v4-input__inner.disabled, .hi-v4-input--appearance-unset .hi-v4-input__inner.disabled, .hi-v4-input--appearance-filled .hi-v4-input__inner.disabled, .hi-v4-input--appearance-underline .hi-v4-input__inner.disabled {\n color: #c9ced6;\n color: var(--hi-v4-color-gray-400, #c9ced6);\n background-color: #ebedf0;\n background-color: var(--hi-v4-color-gray-200, #ebedf0); }\n.hi-v4-input__outer--prepend .hi-v4-input__inner {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0; }\n.hi-v4-input__outer--prepend-unset .hi-v4-input__prepend {\n border: none;\n padding: 0; }\n.hi-v4-input__outer--prepend-unset .hi-v4-input__prepend .hi-v4-mock-input {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0; }\n.hi-v4-input__outer--prepend-unset .hi-v4-input__prepend .hi-v4-button {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0; }\n.hi-v4-input__outer--append .hi-v4-input__inner {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0; }\n.hi-v4-input__outer--append-unset .hi-v4-input__append {\n border: none;\n padding: 0; }\n.hi-v4-input__outer--append-unset .hi-v4-input__append .hi-v4-mock-input {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0; }\n.hi-v4-input__outer--append-unset .hi-v4-input__append .hi-v4-button {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0; }\n";
11
11
 
12
12
  var __styleInject__ = require('style-inject/dist/style-inject.es.js')["default"];
13
13
 
package/lib/types/Input.d.ts CHANGED
@@ -1,25 +1,10 @@
1
1
  import React from 'react';
2
+ import { HiBaseHTMLFieldProps } from '@hi-ui/core';
2
3
  /**
3
4
  * TODO: What is Input
4
5
  */
5
6
  export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement | null>>;
6
- export interface InputProps {
7
- /**
8
- * 组件默认的选择器类
9
- */
10
- prefixCls?: string;
11
- /**
12
- * 组件的语义化 Role 属性
13
- */
14
- role?: string;
15
- /**
16
- * 组件的注入选择器类
17
- */
18
- className?: string;
19
- /**
20
- * 组件的注入样式
21
- */
22
- style?: React.CSSProperties;
7
+ export interface InputProps extends HiBaseHTMLFieldProps<'input'> {
23
8
  /**
24
9
  * 开启输入框只读
25
10
  */
@@ -47,7 +32,7 @@ export interface InputProps {
47
32
  /**
48
33
  * 设置输入框类型，支持原生 input 的 type 属性所有值
49
34
  */
50
- type?: 'text' | 'number';
35
+ type?: 'text' | 'number' | string;
51
36
  /**
52
37
  * 输入最大长度
53
38
  */
@@ -72,6 +57,10 @@ export interface InputProps {
72
57
  * 是否可清空，通过点击右侧清除按钮
73
58
  */
74
59
  clearable?: boolean;
60
+ /**
61
+ * 再失焦时触发对值的 trim onChange 给用户
62
+ */
63
+ trimValueOnBlur?: boolean;
75
64
  /**
76
65
  * 清除按钮展示的触发形态
77
66
  */
@@ -86,6 +75,7 @@ export interface InputProps {
86
75
  placeholder?: string;
87
76
  /**
88
77
  * 设置展现形式
78
+ * 其中 `underline` 内部使用，不对外提供支持（风格去线型化：由线性过渡到面性）
89
79
  */
90
80
  appearance?: 'outline' | 'unset' | 'filled' | 'underline';
91
81
  /**
@@ -96,17 +86,9 @@ export interface InputProps {
96
86
  * 值改变时的回调
97
87
  */
98
88
  onChange?: (evt: React.ChangeEvent<HTMLInputElement>) => void;
99
- /**
100
- * 获得焦点时的回调
101
- */
102
- onFocus?: (evt: React.FocusEvent<HTMLInputElement>) => void;
103
- /**
104
- * 失去焦点时的回调
105
- */
106
- onBlur?: (evt: React.FocusEvent<HTMLInputElement>) => void;
107
89
  }
108
90
  /**
109
- * 伪造目标事件 target
91
+ * 模拟伪装目标事件 target
110
92
  *
111
93
  * @param target
112
94
  * @param evt
package/lib/types/MockInput.d.ts ADDED
@@ -0,0 +1,134 @@
1
+ import React from 'react';
2
+ import type { HiBaseDataItem, HiBaseHTMLFieldProps } from '@hi-ui/core';
3
+ /**
4
+ * 支持自定义渲染输入框内容，暂时仅供内部 Picker 类组件使用，不对外提供
5
+ */
6
+ export declare const MockInput: React.ForwardRefExoticComponent<Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "defaultValue" | "onChange" | "value" | "onSelect" | "title" | "size" | "prefix" | "data" | "disabled" | "placeholder" | "readOnly" | "onClick" | "appearance" | "suffix" | "clearableTrigger" | "clearable" | "focused" | "displayRender"> & {
7
+ prefixCls?: string | undefined;
8
+ role?: string | undefined;
9
+ } & {
10
+ /**
11
+ * 设置当前多选值
12
+ */
13
+ value?: React.ReactText | undefined;
14
+ /**
15
+ * 设置当前多选值默认值
16
+ */
17
+ defaultValue?: React.ReactText | undefined;
18
+ /**
19
+ * 多选值改变时的回调
20
+ */
21
+ onChange?: ((values: React.ReactText) => void) | undefined;
22
+ /**
23
+ * 是否可清空
24
+ */
25
+ clearable?: boolean | undefined;
26
+ /**
27
+ * 清除按钮展示的触发形态
28
+ */
29
+ clearableTrigger?: "always" | "hover" | undefined;
30
+ /**
31
+ * 是否禁止使用
32
+ */
33
+ disabled?: boolean | undefined;
34
+ /**
35
+ * 自定义选择后触发器所展示的内容
36
+ */
37
+ displayRender?: ((item: HiBaseDataItem) => React.ReactNode) | undefined;
38
+ /**
39
+ * 输入框占位符
40
+ */
41
+ placeholder?: string | undefined;
42
+ /**
43
+ * 输入框后置内容
44
+ */
45
+ suffix?: React.ReactNode;
46
+ /**
47
+ * 点击 Input 时触发回调
48
+ */
49
+ onClick?: ((event: React.MouseEvent<HTMLDivElement>) => void) | undefined;
50
+ /**
51
+ * 展示数据源
52
+ */
53
+ data?: HiBaseDataItem[] | undefined;
54
+ /**
55
+ * 是否聚焦
56
+ */
57
+ focused?: boolean | undefined;
58
+ /**
59
+ * 开启输入框只读
60
+ */
61
+ readOnly?: boolean | undefined;
62
+ /**
63
+ * 设置展现形式
64
+ */
65
+ appearance?: "outline" | "unset" | "filled" | undefined;
66
+ /**
67
+ * 设置输入框尺寸
68
+ */
69
+ size?: "sm" | "md" | "lg" | undefined;
70
+ } & {
71
+ invalid?: boolean | undefined;
72
+ } & React.RefAttributes<HTMLDivElement | null>>;
73
+ export declare type MockInputProps = HiBaseHTMLFieldProps<'div', {
74
+ /**
75
+ * 设置当前多选值
76
+ */
77
+ value?: React.ReactText;
78
+ /**
79
+ * 设置当前多选值默认值
80
+ */
81
+ defaultValue?: React.ReactText;
82
+ /**
83
+ * 多选值改变时的回调
84
+ */
85
+ onChange?: (values: React.ReactText) => void;
86
+ /**
87
+ * 是否可清空
88
+ */
89
+ clearable?: boolean;
90
+ /**
91
+ * 清除按钮展示的触发形态
92
+ */
93
+ clearableTrigger?: 'always' | 'hover';
94
+ /**
95
+ * 是否禁止使用
96
+ */
97
+ disabled?: boolean;
98
+ /**
99
+ * 自定义选择后触发器所展示的内容
100
+ */
101
+ displayRender?: (item: HiBaseDataItem) => React.ReactNode;
102
+ /**
103
+ * 输入框占位符
104
+ */
105
+ placeholder?: string;
106
+ /**
107
+ * 输入框后置内容
108
+ */
109
+ suffix?: React.ReactNode;
110
+ /**
111
+ * 点击 Input 时触发回调
112
+ */
113
+ onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
114
+ /**
115
+ * 展示数据源
116
+ */
117
+ data?: HiBaseDataItem[];
118
+ /**
119
+ * 是否聚焦
120
+ */
121
+ focused?: boolean;
122
+ /**
123
+ * 开启输入框只读
124
+ */
125
+ readOnly?: boolean;
126
+ /**
127
+ * 设置展现形式
128
+ */
129
+ appearance?: 'outline' | 'unset' | 'filled';
130
+ /**
131
+ * 设置输入框尺寸
132
+ */
133
+ size?: 'sm' | 'md' | 'lg';
134
+ }>;
package/lib/types/index.d.ts CHANGED
@@ -1,3 +1,4 @@
1
1
  import './styles/index.scss';
2
2
  export * from './Input';
3
3
  export { Input as default } from './Input';
4
+ export * from './MockInput';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hi-ui/input",
3
- "version": "4.0.0-alpha.2",
3
+ "version": "4.0.0-alpha.20",
4
4
  "description": "A sub-package for @hi-ui/hiui.",
5
5
  "keywords": [],
6
6
  "author": "HIUI <mi-hiui@xiaomi.com>",
@@ -43,21 +43,22 @@
43
43
  "url": "https://github.com/XiaoMi/hiui/issues"
44
44
  },
45
45
  "dependencies": {
46
- "@hi-ui/classname": "^4.0.0-alpha.1",
47
- "@hi-ui/core-css": "^4.0.0-alpha.0",
48
- "@hi-ui/env": "^4.0.0-alpha.1",
49
- "@hi-ui/icons": "^4.0.0-alpha.2",
50
- "@hi-ui/use-merge-refs": "^4.0.0-alpha.1",
51
- "@hi-ui/use-uncontrolled-state": "^4.0.0-alpha.1"
46
+ "@hi-ui/classname": "^4.0.0-alpha.2",
47
+ "@hi-ui/core": "^4.0.0-alpha.10",
48
+ "@hi-ui/core-css": "^4.0.0-alpha.8",
49
+ "@hi-ui/env": "^4.0.0-alpha.3",
50
+ "@hi-ui/icons": "^4.0.0-alpha.16",
51
+ "@hi-ui/use-merge-refs": "^4.0.0-alpha.3",
52
+ "@hi-ui/use-uncontrolled-state": "^4.0.0-alpha.10"
52
53
  },
53
54
  "peerDependencies": {
54
55
  "react": "^17.0.1",
55
56
  "react-dom": "^17.0.1"
56
57
  },
57
58
  "devDependencies": {
58
- "@hi-ui/hi-build": "^4.0.0-alpha.1",
59
+ "@hi-ui/hi-build": "^4.0.0-alpha.3",
59
60
  "react": "^17.0.1",
60
61
  "react-dom": "^17.0.1"
61
62
  },
62
- "gitHead": "344d6065e760614e42101b8ff14f7c8ef6cabc37"
63
+ "gitHead": "651d38db4ff7ad032735fc9ac7570ce8bf29924f"
63
64
  }