@hi-ui/input 4.0.5 → 4.0.7

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 (17) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/lib/cjs/Input.js +4 -1
  3. package/lib/cjs/index.js +3 -0
  4. package/lib/cjs/styles/index.scss.js +1 -1
  5. package/lib/cjs/use-input-cursor.js +104 -0
  6. package/lib/cjs/use-input.js +37 -5
  7. package/lib/esm/Input.js +4 -1
  8. package/lib/esm/index.js +1 -0
  9. package/lib/esm/styles/index.scss.js +1 -1
  10. package/lib/esm/use-input-cursor.js +97 -0
  11. package/lib/esm/use-input.js +37 -7
  12. package/lib/types/MockInput.d.ts +1 -1
  13. package/lib/types/index.d.ts +1 -0
  14. package/lib/types/use-input-cursor.d.ts +27 -0
  15. package/lib/types/use-input.d.ts +10 -1
  16. package/package.json +3 -3
  17. package/LICENSE +0 -21
package/CHANGELOG.md ADDED
@@ -0,0 +1,7 @@
1
+ # @hi-ui/input
2
+
3
+ ## 4.0.7
4
+
5
+ ### Patch Changes
6
+
7
+ - [#2440](https://github.com/XiaoMi/hiui/pull/2440) [`45f1ddd4d`](https://github.com/XiaoMi/hiui/commit/45f1ddd4de49c84f09b0074bcacdcb587a5d1535) Thanks [@zyprepare](https://github.com/zyprepare)! - fix: 输入框值格式化时光标跑到最后
package/lib/cjs/Input.js CHANGED
@@ -82,11 +82,12 @@ var Input = /*#__PURE__*/React.forwardRef(function (_a, ref) {
82
82
  onChange = _a.onChange,
83
83
  onFocus = _a.onFocus,
84
84
  onBlur = _a.onBlur,
85
+ onKeyDown = _a.onKeyDown,
85
86
  trimValueOnBlur = _a.trimValueOnBlur,
86
87
  onClear = _a.onClear,
87
88
  type = _a.type,
88
89
  containerRef = _a.containerRef,
89
- rest = tslib.__rest(_a, ["prefixCls", "role", "className", "style", "size", "appearance", "prepend", "append", "prefix", "suffix", "clearableTrigger", "clearable", "invalid", "name", "autoFocus", "disabled", "readOnly", "maxLength", "placeholder", "defaultValue", "value", "onChange", "onFocus", "onBlur", "trimValueOnBlur", "onClear", "type", "containerRef"]); // @TODO: 临时方案，后面迁移至 InputGroup
90
+ rest = tslib.__rest(_a, ["prefixCls", "role", "className", "style", "size", "appearance", "prepend", "append", "prefix", "suffix", "clearableTrigger", "clearable", "invalid", "name", "autoFocus", "disabled", "readOnly", "maxLength", "placeholder", "defaultValue", "value", "onChange", "onFocus", "onBlur", "onKeyDown", "trimValueOnBlur", "onClear", "type", "containerRef"]); // @TODO: 临时方案，后面迁移至 InputGroup
90
91
 
91
92
 
92
93
  var _useMemo = React.useMemo(function () {
@@ -117,6 +118,7 @@ var Input = /*#__PURE__*/React.forwardRef(function (_a, ref) {
117
118
 
118
119
  var _useInput = useInput.useInput({
119
120
  clearElementRef: clearElementRef,
121
+ inputElementRef: inputElementRef,
120
122
  name: name,
121
123
  autoFocus: autoFocus,
122
124
  disabled: disabled,
@@ -128,6 +130,7 @@ var Input = /*#__PURE__*/React.forwardRef(function (_a, ref) {
128
130
  onChange: proxyOnChange,
129
131
  onFocus: onFocus,
130
132
  onBlur: onBlur,
133
+ onKeyDown: onKeyDown,
131
134
  trimValueOnBlur: trimValueOnBlur,
132
135
  type: type
133
136
  }),
package/lib/cjs/index.js CHANGED
@@ -19,10 +19,13 @@ var Input = require('./Input.js');
19
19
 
20
20
  var useInput = require('./use-input.js');
21
21
 
22
+ var useInputCursor = require('./use-input-cursor.js');
23
+
22
24
  var MockInput = require('./MockInput.js');
23
25
 
24
26
  exports.Input = Input.Input;
25
27
  exports["default"] = Input.Input;
26
28
  exports.onChangeMock = Input.onChangeMock;
27
29
  exports.useInput = useInput.useInput;
30
+ exports.useInputCursor = useInputCursor.useInputCursor;
28
31
  exports.MockInput = MockInput.MockInput;
package/lib/cjs/styles/index.scss.js CHANGED
@@ -12,7 +12,7 @@
12
12
  Object.defineProperty(exports, '__esModule', {
13
13
  value: true
14
14
  });
15
- var css_248z = ".hi-v4-mock-input {-webkit-box-sizing: border-box;box-sizing: border-box;margin: 0;padding: 0;border: none;outline: none;-webkit-box-shadow: none;box-shadow: none;-webkit-appearance: none;-moz-appearance: none;appearance: none;cursor: text;background-color: transparent;-webkit-tap-highlight-color: transparent;position: relative;overflow: hidden;display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;-webkit-transition-property: all;transition-property: all;-webkit-transition-duration: var(--hi-v4-motion-duration-normal, 200ms);transition-duration: var(--hi-v4-motion-duration-normal, 200ms);-webkit-transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));width: 100%;height: auto;z-index: auto;font-size: inherit;line-height: inherit;color: var(--hi-v4-color-gray-700, #1f2733);border: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-static-transparent, transparent);background-color: var(--hi-v4-color-static-white, #fff); }.hi-v4-mock-input:not(.disabled):hover {z-index: calc(var(--hi-v4-zindex-absolute, 1) + 1); }.hi-v4-mock-input:not(.disabled).focused {z-index: calc(var(--hi-v4-zindex-absolute, 1) + 1); }.hi-v4-mock-input.disabled {cursor: not-allowed; }.hi-v4-mock-input__suffix, .hi-v4-mock-input__placeholder {color: var(--hi-v4-color-gray-400, #c9ced6); }.hi-v4-mock-input__placeholder {width: auto;overflow: hidden;text-overflow: ellipsis;white-space: nowrap; }.hi-v4-mock-input__clear {display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;width: 16px;height: 16px;font-size: var(--hi-v4-text-size-md, 0.875rem);text-align: center;color: var(--hi-v4-color-gray-500, #929aa6);-ms-flex-negative: 0;flex-shrink: 0;cursor: pointer;visibility: hidden;opacity: 0;-webkit-transition-property: all;transition-property: all;-webkit-transition-duration: var(--hi-v4-motion-duration-normal, 200ms);transition-duration: var(--hi-v4-motion-duration-normal, 200ms);-webkit-transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1)); }.hi-v4-mock-input__clear:hover {color: var(--hi-v4-color-static-black, #000); }.hi-v4-mock-input__clear.active {visibility: visible;opacity: 1; }.hi-v4-mock-input__suffix {display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-ms-flex-negative: 0;flex-shrink: 0;color: var(--hi-v4-color-gray-400, #c9ced6);font-size: var(--hi-v4-text-size-lg, 1rem);padding-left: var(--hi-v4-spacing-4, 8px);text-align: center; }.hi-v4-mock-input__value {-webkit-box-sizing: border-box;box-sizing: border-box;display: inline-block;width: auto;overflow: hidden;text-overflow: ellipsis;white-space: nowrap; }.hi-v4-mock-input--size-sm.hi-v4-mock-input {height: var(--hi-v4-height-6, 24px);font-size: var(--hi-v4-text-size-sm, 0.75rem);line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);border-radius: var(--hi-v4-border-radius-md, 4px);padding: 1px calc(var(--hi-v4-spacing-6, 12px) - 1px); }.hi-v4-mock-input--size-md.hi-v4-mock-input {height: var(--hi-v4-height-8, 32px);font-size: var(--hi-v4-text-size-md, 0.875rem);line-height: var(--hi-v4-text-lineheight-md, 1.375rem);border-radius: var(--hi-v4-border-radius-md, 4px);padding: 4px calc(var(--hi-v4-spacing-6, 12px) - 1px); }.hi-v4-mock-input--size-lg.hi-v4-mock-input {height: var(--hi-v4-height-10, 40px);font-size: var(--hi-v4-text-size-lg, 1rem);line-height: var(--hi-v4-text-lineheight-lg, 1.5rem);border-radius: var(--hi-v4-border-radius-md, 4px);padding: 7px calc(var(--hi-v4-spacing-6, 12px) - 1px); }.hi-v4-mock-input--appearance-line.hi-v4-mock-input {border-color: var(--hi-v4-color-gray-300, #dfe2e8); }.hi-v4-mock-input--appearance-line.hi-v4-mock-input:not(.disabled):hover {border-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-mock-input--appearance-line.hi-v4-mock-input:not(.disabled).focused {-webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-primary-100, var(--hi-v4-color-brandblue-100, #bde2ff));box-shadow: 0 0 0 2px var(--hi-v4-color-primary-100, var(--hi-v4-color-brandblue-100, #bde2ff));border-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-mock-input--appearance-line.hi-v4-mock-input:not(.disabled).invalid {border-color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959)); }.hi-v4-mock-input--appearance-line.hi-v4-mock-input:not(.disabled).invalid.hover {border-color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959)); }.hi-v4-mock-input--appearance-line.hi-v4-mock-input:not(.disabled).invalid.focused {-webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-danger-100, var(--hi-v4-color-red-100, #ffd1c9));box-shadow: 0 0 0 2px var(--hi-v4-color-danger-100, var(--hi-v4-color-red-100, #ffd1c9)); }.hi-v4-mock-input--appearance-unset.hi-v4-mock-input {width: auto;max-width: 100%;-webkit-box-pack: start;-ms-flex-pack: start;justify-content: flex-start;border-color: transparent; }.hi-v4-mock-input--appearance-unset.hi-v4-mock-input:not(.disabled):hover {background-color: var(--hi-v4-color-gray-100, #f2f4f7); }.hi-v4-mock-input--appearance-unset.hi-v4-mock-input:not(.disabled).focused {-webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-primary-100, var(--hi-v4-color-brandblue-100, #bde2ff));box-shadow: 0 0 0 2px var(--hi-v4-color-primary-100, var(--hi-v4-color-brandblue-100, #bde2ff));background-color: var(--hi-v4-color-static-white, #fff);border-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-mock-input--appearance-unset.hi-v4-mock-input:not(.disabled).invalid {border-color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959)); }.hi-v4-mock-input--appearance-unset.hi-v4-mock-input:not(.disabled).invalid.hover {border-color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959)); }.hi-v4-mock-input--appearance-unset.hi-v4-mock-input:not(.disabled).invalid.focused {-webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-danger-100, var(--hi-v4-color-red-100, #ffd1c9));box-shadow: 0 0 0 2px var(--hi-v4-color-danger-100, var(--hi-v4-color-red-100, #ffd1c9)); }.hi-v4-mock-input--appearance-filled.hi-v4-mock-input {background-color: var(--hi-v4-color-gray-100, #f2f4f7); }.hi-v4-mock-input--appearance-filled.hi-v4-mock-input:not(.disabled):hover {background-color: var(--hi-v4-color-static-white, #fff);border-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-mock-input--appearance-filled.hi-v4-mock-input:not(.disabled).focused {-webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-primary-100, var(--hi-v4-color-brandblue-100, #bde2ff));box-shadow: 0 0 0 2px var(--hi-v4-color-primary-100, var(--hi-v4-color-brandblue-100, #bde2ff));border-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));background-color: var(--hi-v4-color-static-white, #fff); }.hi-v4-mock-input--appearance-filled.hi-v4-mock-input:not(.disabled).invalid {border-color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959)); }.hi-v4-mock-input--appearance-filled.hi-v4-mock-input:not(.disabled).invalid.hover {border-color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959)); }.hi-v4-mock-input--appearance-filled.hi-v4-mock-input:not(.disabled).invalid.focused {-webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-danger-100, var(--hi-v4-color-red-100, #ffd1c9));box-shadow: 0 0 0 2px var(--hi-v4-color-danger-100, var(--hi-v4-color-red-100, #ffd1c9)); }.hi-v4-mock-input--appearance-line.disabled.hi-v4-mock-input, .hi-v4-mock-input--appearance-unset.disabled.hi-v4-mock-input, .hi-v4-mock-input--appearance-filled.disabled.hi-v4-mock-input {color: var(--hi-v4-color-gray-400, #c9ced6); }.hi-v4-mock-input--appearance-line.disabled.hi-v4-mock-input, .hi-v4-mock-input--appearance-filled.disabled.hi-v4-mock-input {background-color: var(--hi-v4-color-gray-100, #f2f4f7); }.hi-v4-input {position: relative;display: inline-block;-webkit-box-sizing: border-box;box-sizing: border-box;width: 100%; }.hi-v4-input__outer {margin: 0;padding: 0;display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;position: relative;height: 100%;width: 100%; }.hi-v4-input__text {-webkit-box-sizing: border-box;box-sizing: border-box;margin: 0;padding: 0;border: none;outline: none;-webkit-box-shadow: none;box-shadow: none;-webkit-appearance: none;-moz-appearance: none;appearance: none;cursor: text;background-color: transparent;-webkit-tap-highlight-color: transparent;-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;display: inline-block;box-sizing: border-box;-webkit-transition-property: all;transition-property: all;-webkit-transition-duration: var(--hi-v4-motion-duration-normal, 200ms);transition-duration: var(--hi-v4-motion-duration-normal, 200ms);-webkit-transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));width: 100%;font-size: inherit;line-height: inherit;color: var(--hi-v4-color-gray-700, #1f2733); }.hi-v4-input__text::-webkit-input-placeholder {color: var(--hi-v4-color-gray-400, #c9ced6); }.hi-v4-input__text::-moz-placeholder {color: var(--hi-v4-color-gray-400, #c9ced6); }.hi-v4-input__text::-ms-input-placeholder {color: var(--hi-v4-color-gray-400, #c9ced6); }.hi-v4-input__text:-ms-input-placeholder {color: var(--hi-v4-color-gray-400, #c9ced6); }.hi-v4-input__text::placeholder {color: var(--hi-v4-color-gray-400, #c9ced6); }.hi-v4-input__text:disabled {cursor: not-allowed; }.hi-v4-input__inner {position: relative;display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;height: auto;width: 100%;-webkit-box-sizing: border-box;box-sizing: border-box;font-size: inherit;border: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-static-transparent, transparent);background-color: var(--hi-v4-color-static-white, #fff);-webkit-transition-property: all;transition-property: all;-webkit-transition-duration: var(--hi-v4-motion-duration-normal, 200ms);transition-duration: var(--hi-v4-motion-duration-normal, 200ms);-webkit-transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));outline: none;z-index: auto; }.hi-v4-input__inner:not(.hi-v4-input__inner--disabled):hover {z-index: calc(var(--hi-v4-zindex-absolute, 1) + 1); }.hi-v4-input__inner:not(.hi-v4-input__inner--disabled).hi-v4-input__inner--focused {z-index: calc(var(--hi-v4-zindex-absolute, 1) + 1); }.hi-v4-input__clear {display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;height: auto;text-align: center;font-size: var(--hi-v4-text-size-md, 0.875rem);color: var(--hi-v4-color-gray-500, #929aa6);-ms-flex-negative: 0;flex-shrink: 0;cursor: pointer;-webkit-transition-property: all;transition-property: all;-webkit-transition-duration: var(--hi-v4-motion-duration-normal, 200ms);transition-duration: var(--hi-v4-motion-duration-normal, 200ms);-webkit-transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));visibility: hidden;opacity: 0; }.hi-v4-input__clear:hover {color: var(--hi-v4-color-gray-700, #1f2733); }.hi-v4-input__clear.hi-v4-input__clear--active {visibility: visible;opacity: 1; }.hi-v4-input__inner--suffix .hi-v4-input__clear {-webkit-margin-end: var(--hi-v4-spacing-2, 4px);margin-inline-end: var(--hi-v4-spacing-2, 4px); }.hi-v4-input__prefix, .hi-v4-input__suffix {display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-ms-flex-negative: 0;flex-shrink: 0;color: var(--hi-v4-color-gray-700, #1f2733);font-size: inherit;text-align: center; }.hi-v4-input__prefix {padding-left: calc(var(--hi-v4-spacing-6, 12px) - 1px); }.hi-v4-input__suffix {padding-right: calc(var(--hi-v4-spacing-6, 12px) - 1px); }.hi-v4-input__prepend, .hi-v4-input__append {position: relative;color: var(--hi-v4-color-gray-700, #1f2733);background-color: var(--hi-v4-color-gray-50, #f5f7fa);-ms-flex-negative: 0;flex-shrink: 0;display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;font-size: inherit;text-align: center;padding: 0 calc(var(--hi-v4-spacing-6, 12px) - 1px);border: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-static-transparent, transparent);white-space: nowrap;-webkit-transition-property: all;transition-property: all;-webkit-transition-duration: var(--hi-v4-motion-duration-normal, 200ms);transition-duration: var(--hi-v4-motion-duration-normal, 200ms);-webkit-transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));z-index: var(--hi-v4-zindex-absolute, 1); }.hi-v4-input__prepend {border-top-right-radius: 0;border-bottom-right-radius: 0;margin-right: -1px; }.hi-v4-input__append {border-top-left-radius: 0;border-bottom-left-radius: 0;margin-left: -1px; }.hi-v4-input--size-sm {height: var(--hi-v4-height-6, 24px);font-size: var(--hi-v4-text-size-sm, 0.75rem);line-height: var(--hi-v4-text-lineheight-sm, 1.25rem); }.hi-v4-input--size-sm .hi-v4-input__text {padding: 1px calc(var(--hi-v4-spacing-6, 12px) - 1px); }.hi-v4-input--size-sm .hi-v4-input__inner,.hi-v4-input--size-sm .hi-v4-input__prepend,.hi-v4-input--size-sm .hi-v4-input__append {border-radius: var(--hi-v4-border-radius-md, 4px); }.hi-v4-input--size-sm .hi-v4-input__prepend {border-top-right-radius: 0;border-bottom-right-radius: 0; }.hi-v4-input--size-sm .hi-v4-input__append {border-top-left-radius: 0;border-bottom-left-radius: 0; }.hi-v4-input--size-md {height: var(--hi-v4-height-8, 32px);font-size: var(--hi-v4-text-size-md, 0.875rem);line-height: var(--hi-v4-text-lineheight-md, 1.375rem); }.hi-v4-input--size-md .hi-v4-input__text {padding: 4px calc(var(--hi-v4-spacing-6, 12px) - 1px); }.hi-v4-input--size-md .hi-v4-input__inner,.hi-v4-input--size-md .hi-v4-input__prepend,.hi-v4-input--size-md .hi-v4-input__append {border-radius: var(--hi-v4-border-radius-md, 4px); }.hi-v4-input--size-md .hi-v4-input__prepend {border-top-right-radius: 0;border-bottom-right-radius: 0; }.hi-v4-input--size-md .hi-v4-input__append {border-top-left-radius: 0;border-bottom-left-radius: 0; }.hi-v4-input--size-lg {height: var(--hi-v4-height-10, 40px);font-size: var(--hi-v4-text-size-lg, 1rem);line-height: var(--hi-v4-text-lineheight-lg, 1.5rem); }.hi-v4-input--size-lg .hi-v4-input__text {padding: 7px calc(var(--hi-v4-spacing-6, 12px) - 1px); }.hi-v4-input--size-lg .hi-v4-input__inner,.hi-v4-input--size-lg .hi-v4-input__prepend,.hi-v4-input--size-lg .hi-v4-input__append {border-radius: var(--hi-v4-border-radius-md, 4px); }.hi-v4-input--size-lg .hi-v4-input__prepend {border-top-right-radius: 0;border-bottom-right-radius: 0; }.hi-v4-input--size-lg .hi-v4-input__append {border-top-left-radius: 0;border-bottom-left-radius: 0; }.hi-v4-input--appearance-line .hi-v4-input__inner {border-color: var(--hi-v4-color-gray-300, #dfe2e8); }.hi-v4-input--appearance-line .hi-v4-input__inner:not(.hi-v4-input__inner--disabled):hover {border-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-input--appearance-line .hi-v4-input__inner:not(.hi-v4-input__inner--disabled).hi-v4-input__inner--focused {-webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-primary-100, var(--hi-v4-color-brandblue-100, #bde2ff));box-shadow: 0 0 0 2px var(--hi-v4-color-primary-100, var(--hi-v4-color-brandblue-100, #bde2ff));border-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-input--appearance-line .hi-v4-input__inner:not(.hi-v4-input__inner--disabled).hi-v4-input__inner--invalid {border-color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959)); }.hi-v4-input--appearance-line .hi-v4-input__inner:not(.hi-v4-input__inner--disabled).hi-v4-input__inner--invalid:hover {border-color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959)); }.hi-v4-input--appearance-line .hi-v4-input__inner:not(.hi-v4-input__inner--disabled).hi-v4-input__inner--invalid.hi-v4-input__inner--focused {-webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-danger-100, var(--hi-v4-color-red-100, #ffd1c9));box-shadow: 0 0 0 2px var(--hi-v4-color-danger-100, var(--hi-v4-color-red-100, #ffd1c9)); }.hi-v4-input--appearance-line .hi-v4-input__prepend,.hi-v4-input--appearance-line .hi-v4-input__append {border-color: var(--hi-v4-color-gray-300, #dfe2e8); }.hi-v4-input--appearance-unset .hi-v4-input__text {padding-left: 0;padding-right: 0; }.hi-v4-input--appearance-unset.hi-v4-input__outer--prepend .hi-v4-input__text,.hi-v4-input--appearance-unset .hi-v4-input__inner--prefix .hi-v4-input__text {padding-left: calc(var(--hi-v4-spacing-6, 12px) - 1px); }.hi-v4-input--appearance-unset.hi-v4-input__outer--append .hi-v4-input__text,.hi-v4-input--appearance-unset .hi-v4-input__inner--suffix .hi-v4-input__text {padding-right: calc(var(--hi-v4-spacing-6, 12px) - 1px); }.hi-v4-input--appearance-unset .hi-v4-input__inner {border-radius: 0; }.hi-v4-input--appearance-filled .hi-v4-input__inner {background-color: var(--hi-v4-color-gray-100, #f2f4f7); }.hi-v4-input--appearance-filled .hi-v4-input__inner:not(.hi-v4-input__inner--disabled):hover {background-color: var(--hi-v4-color-static-white, #fff);border-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-input--appearance-filled .hi-v4-input__inner:not(.hi-v4-input__inner--disabled).hi-v4-input__inner--focused {-webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-primary-100, var(--hi-v4-color-brandblue-100, #bde2ff));box-shadow: 0 0 0 2px var(--hi-v4-color-primary-100, var(--hi-v4-color-brandblue-100, #bde2ff));border-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));background-color: var(--hi-v4-color-static-white, #fff); }.hi-v4-input--appearance-filled .hi-v4-input__inner:not(.hi-v4-input__inner--disabled).hi-v4-input__inner--invalid {border-color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959)); }.hi-v4-input--appearance-filled .hi-v4-input__inner:not(.hi-v4-input__inner--disabled).hi-v4-input__inner--invalid:hover {border-color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959)); }.hi-v4-input--appearance-filled .hi-v4-input__inner:not(.hi-v4-input__inner--disabled).hi-v4-input__inner--invalid.hi-v4-input__inner--focused {-webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-danger-100, var(--hi-v4-color-red-100, #ffd1c9));box-shadow: 0 0 0 2px var(--hi-v4-color-danger-100, var(--hi-v4-color-red-100, #ffd1c9)); }.hi-v4-input--appearance-underline .hi-v4-input__text {padding-left: 0;padding-right: 0; }.hi-v4-input--appearance-underline.hi-v4-input__outer--prepend .hi-v4-input__text,.hi-v4-input--appearance-underline .hi-v4-input__inner--prefix .hi-v4-input__text {padding-left: calc(var(--hi-v4-spacing-6, 12px) - 1px); }.hi-v4-input--appearance-underline.hi-v4-input__outer--append .hi-v4-input__text,.hi-v4-input--appearance-underline .hi-v4-input__inner--suffix .hi-v4-input__text {padding-right: calc(var(--hi-v4-spacing-6, 12px) - 1px); }.hi-v4-input--appearance-underline .hi-v4-input__inner {border-radius: 0; }.hi-v4-input--appearance-underline .hi-v4-input__inner::after {content: '';-webkit-box-sizing: border-box;box-sizing: border-box;display: block;position: absolute;bottom: 0;left: -1px;right: -1px;border-bottom: 1px solid var(--hi-v4-color-gray-300, #dfe2e8);-webkit-transition: all 0.3s;transition: all 0.3s; }.hi-v4-input--appearance-underline .hi-v4-input__inner:not(.hi-v4-input__inner--disabled):hover::after {border-bottom-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-input--appearance-underline .hi-v4-input__inner:not(.hi-v4-input__inner--disabled).hi-v4-input__inner--focused::after {border-bottom-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-input--appearance-underline .hi-v4-input__inner:not(.hi-v4-input__inner--disabled).hi-v4-input__inner--invalid::after {border-bottom-color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959)); }.hi-v4-input--appearance-underline .hi-v4-input__inner:not(.hi-v4-input__inner--disabled).hi-v4-input__inner--invalid.hover::after {border-bottom-color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959)); }.hi-v4-input--appearance-line .hi-v4-input__inner.hi-v4-input__inner--disabled, .hi-v4-input--appearance-filled .hi-v4-input__inner.hi-v4-input__inner--disabled {color: var(--hi-v4-color-gray-400, #c9ced6);background-color: var(--hi-v4-color-gray-100, #f2f4f7); }.hi-v4-input--appearance-line .hi-v4-input__inner.hi-v4-input__inner--disabled .hi-v4-input__text, .hi-v4-input--appearance-filled .hi-v4-input__inner.hi-v4-input__inner--disabled .hi-v4-input__text {color: var(--hi-v4-color-gray-400, #c9ced6); }.hi-v4-input--appearance-unset .hi-v4-input__inner.hi-v4-input__inner--disabled, .hi-v4-input--appearance-underline .hi-v4-input__inner.hi-v4-input__inner--disabled {color: var(--hi-v4-color-gray-400, #c9ced6);background-color: transparent; }.hi-v4-input--appearance-unset .hi-v4-input__inner.hi-v4-input__inner--disabled .hi-v4-input__text, .hi-v4-input--appearance-underline .hi-v4-input__inner.hi-v4-input__inner--disabled .hi-v4-input__text {color: var(--hi-v4-color-gray-400, #c9ced6); }.hi-v4-input__outer--prepend .hi-v4-input__inner {border-top-left-radius: 0;border-bottom-left-radius: 0; }.hi-v4-input__outer--prepend-unset .hi-v4-input__prepend {border: none;padding: 0; }.hi-v4-input__outer--prepend-unset .hi-v4-input__prepend .hi-v4-mock-input {border-top-right-radius: 0;border-bottom-right-radius: 0; }.hi-v4-input__outer--prepend-unset .hi-v4-input__prepend .hi-v4-button {border-top-right-radius: 0;border-bottom-right-radius: 0; }.hi-v4-input__outer--append .hi-v4-input__inner {border-top-right-radius: 0;border-bottom-right-radius: 0; }.hi-v4-input__outer--append-unset .hi-v4-input__append {border: none;padding: 0; }.hi-v4-input__outer--append-unset .hi-v4-input__append .hi-v4-mock-input {border-top-left-radius: 0;border-bottom-left-radius: 0; }.hi-v4-input__outer--append-unset .hi-v4-input__append .hi-v4-button {border-top-left-radius: 0;border-bottom-left-radius: 0; }";
15
+ var css_248z = ".hi-v4-mock-input {-webkit-box-sizing: border-box;box-sizing: border-box;margin: 0;padding: 0;border: none;outline: none;-webkit-box-shadow: none;box-shadow: none;-webkit-appearance: none;-moz-appearance: none;appearance: none;cursor: text;background-color: transparent;-webkit-tap-highlight-color: transparent;position: relative;overflow: hidden;display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;-webkit-transition-property: all;transition-property: all;-webkit-transition-duration: var(--hi-v4-motion-duration-normal, 200ms);transition-duration: var(--hi-v4-motion-duration-normal, 200ms);-webkit-transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));width: 100%;height: auto;z-index: auto;font-size: inherit;line-height: inherit;color: var(--hi-v4-color-gray-700, #1f2733);border: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-static-transparent, transparent);background-color: var(--hi-v4-color-static-white, #fff); }.hi-v4-mock-input:not(.disabled):hover {z-index: calc(var(--hi-v4-zindex-absolute, 1) + 1); }.hi-v4-mock-input:not(.disabled).focused {z-index: calc(var(--hi-v4-zindex-absolute, 1) + 1); }.hi-v4-mock-input.disabled {cursor: not-allowed; }.hi-v4-mock-input__suffix, .hi-v4-mock-input__placeholder {color: var(--hi-v4-color-gray-400, #c9ced6); }.hi-v4-mock-input--appearance-unset .hi-v4-mock-input__suffix, .hi-v4-mock-input--appearance-unset .hi-v4-mock-input__placeholder {color: var(--hi-v4-color-gray-500, #929aa6); }.hi-v4-mock-input__placeholder {width: auto;overflow: hidden;text-overflow: ellipsis;white-space: nowrap; }.hi-v4-mock-input__clear {display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;width: 16px;height: 16px;font-size: var(--hi-v4-text-size-md, 0.875rem);text-align: center;color: var(--hi-v4-color-gray-500, #929aa6);-ms-flex-negative: 0;flex-shrink: 0;cursor: pointer;visibility: hidden;opacity: 0;-webkit-transition-property: all;transition-property: all;-webkit-transition-duration: var(--hi-v4-motion-duration-normal, 200ms);transition-duration: var(--hi-v4-motion-duration-normal, 200ms);-webkit-transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1)); }.hi-v4-mock-input__clear:hover {color: var(--hi-v4-color-static-black, #000); }.hi-v4-mock-input__clear.active {visibility: visible;opacity: 1; }.hi-v4-mock-input__suffix {display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-ms-flex-negative: 0;flex-shrink: 0;color: var(--hi-v4-color-gray-400, #c9ced6);font-size: var(--hi-v4-text-size-lg, 1rem);padding-left: var(--hi-v4-spacing-4, 8px);text-align: center; }.hi-v4-mock-input__value {-webkit-box-sizing: border-box;box-sizing: border-box;display: inline-block;width: auto;overflow: hidden;text-overflow: ellipsis;white-space: nowrap; }.hi-v4-mock-input--size-sm.hi-v4-mock-input {height: var(--hi-v4-height-6, 24px);font-size: var(--hi-v4-text-size-sm, 0.75rem);line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);border-radius: var(--hi-v4-border-radius-md, 4px);padding: 1px calc(var(--hi-v4-spacing-6, 12px) - 1px); }.hi-v4-mock-input--size-md.hi-v4-mock-input {height: var(--hi-v4-height-8, 32px);font-size: var(--hi-v4-text-size-md, 0.875rem);line-height: var(--hi-v4-text-lineheight-md, 1.375rem);border-radius: var(--hi-v4-border-radius-md, 4px);padding: 4px calc(var(--hi-v4-spacing-6, 12px) - 1px); }.hi-v4-mock-input--size-lg.hi-v4-mock-input {height: var(--hi-v4-height-10, 40px);font-size: var(--hi-v4-text-size-lg, 1rem);line-height: var(--hi-v4-text-lineheight-lg, 1.5rem);border-radius: var(--hi-v4-border-radius-md, 4px);padding: 7px calc(var(--hi-v4-spacing-6, 12px) - 1px); }.hi-v4-mock-input--appearance-line.hi-v4-mock-input {border-color: var(--hi-v4-color-gray-300, #dfe2e8); }.hi-v4-mock-input--appearance-line.hi-v4-mock-input:not(.disabled):hover {border-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-mock-input--appearance-line.hi-v4-mock-input:not(.disabled).focused {-webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-primary-100, var(--hi-v4-color-brandblue-100, #bde2ff));box-shadow: 0 0 0 2px var(--hi-v4-color-primary-100, var(--hi-v4-color-brandblue-100, #bde2ff));border-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-mock-input--appearance-line.hi-v4-mock-input:not(.disabled).invalid {border-color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959)); }.hi-v4-mock-input--appearance-line.hi-v4-mock-input:not(.disabled).invalid.hover {border-color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959)); }.hi-v4-mock-input--appearance-line.hi-v4-mock-input:not(.disabled).invalid.focused {-webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-danger-100, var(--hi-v4-color-red-100, #ffd1c9));box-shadow: 0 0 0 2px var(--hi-v4-color-danger-100, var(--hi-v4-color-red-100, #ffd1c9)); }.hi-v4-mock-input--appearance-unset.hi-v4-mock-input {width: auto;max-width: 100%;-webkit-box-pack: start;-ms-flex-pack: start;justify-content: flex-start;border-color: transparent; }.hi-v4-mock-input--appearance-unset.hi-v4-mock-input:not(.disabled):hover {background-color: var(--hi-v4-color-gray-100, #f2f4f7); }.hi-v4-mock-input--appearance-unset.hi-v4-mock-input:not(.disabled).focused {-webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-primary-100, var(--hi-v4-color-brandblue-100, #bde2ff));box-shadow: 0 0 0 2px var(--hi-v4-color-primary-100, var(--hi-v4-color-brandblue-100, #bde2ff));background-color: var(--hi-v4-color-static-white, #fff);border-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-mock-input--appearance-unset.hi-v4-mock-input:not(.disabled).invalid {border-color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959)); }.hi-v4-mock-input--appearance-unset.hi-v4-mock-input:not(.disabled).invalid.hover {border-color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959)); }.hi-v4-mock-input--appearance-unset.hi-v4-mock-input:not(.disabled).invalid.focused {-webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-danger-100, var(--hi-v4-color-red-100, #ffd1c9));box-shadow: 0 0 0 2px var(--hi-v4-color-danger-100, var(--hi-v4-color-red-100, #ffd1c9)); }.hi-v4-mock-input--appearance-filled.hi-v4-mock-input {background-color: var(--hi-v4-color-gray-100, #f2f4f7); }.hi-v4-mock-input--appearance-filled.hi-v4-mock-input:not(.disabled):hover {background-color: var(--hi-v4-color-static-white, #fff);border-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-mock-input--appearance-filled.hi-v4-mock-input:not(.disabled).focused {-webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-primary-100, var(--hi-v4-color-brandblue-100, #bde2ff));box-shadow: 0 0 0 2px var(--hi-v4-color-primary-100, var(--hi-v4-color-brandblue-100, #bde2ff));border-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));background-color: var(--hi-v4-color-static-white, #fff); }.hi-v4-mock-input--appearance-filled.hi-v4-mock-input:not(.disabled).invalid {border-color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959)); }.hi-v4-mock-input--appearance-filled.hi-v4-mock-input:not(.disabled).invalid.hover {border-color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959)); }.hi-v4-mock-input--appearance-filled.hi-v4-mock-input:not(.disabled).invalid.focused {-webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-danger-100, var(--hi-v4-color-red-100, #ffd1c9));box-shadow: 0 0 0 2px var(--hi-v4-color-danger-100, var(--hi-v4-color-red-100, #ffd1c9)); }.hi-v4-mock-input--appearance-line.disabled.hi-v4-mock-input, .hi-v4-mock-input--appearance-unset.disabled.hi-v4-mock-input, .hi-v4-mock-input--appearance-filled.disabled.hi-v4-mock-input {color: var(--hi-v4-color-gray-400, #c9ced6); }.hi-v4-mock-input--appearance-line.disabled.hi-v4-mock-input, .hi-v4-mock-input--appearance-filled.disabled.hi-v4-mock-input {background-color: var(--hi-v4-color-gray-100, #f2f4f7); }.hi-v4-input {position: relative;display: inline-block;-webkit-box-sizing: border-box;box-sizing: border-box;width: 100%; }.hi-v4-input__outer {margin: 0;padding: 0;display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;position: relative;height: 100%;width: 100%; }.hi-v4-input__text {-webkit-box-sizing: border-box;box-sizing: border-box;margin: 0;padding: 0;border: none;outline: none;-webkit-box-shadow: none;box-shadow: none;-webkit-appearance: none;-moz-appearance: none;appearance: none;cursor: text;background-color: transparent;-webkit-tap-highlight-color: transparent;-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;display: inline-block;box-sizing: border-box;-webkit-transition-property: all;transition-property: all;-webkit-transition-duration: var(--hi-v4-motion-duration-normal, 200ms);transition-duration: var(--hi-v4-motion-duration-normal, 200ms);-webkit-transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));width: 100%;font-size: inherit;line-height: inherit;color: var(--hi-v4-color-gray-700, #1f2733); }.hi-v4-input__text::-webkit-input-placeholder {color: var(--hi-v4-color-gray-400, #c9ced6); }.hi-v4-input__text::-moz-placeholder {color: var(--hi-v4-color-gray-400, #c9ced6); }.hi-v4-input__text::-ms-input-placeholder {color: var(--hi-v4-color-gray-400, #c9ced6); }.hi-v4-input__text:-ms-input-placeholder {color: var(--hi-v4-color-gray-400, #c9ced6); }.hi-v4-input__text::placeholder {color: var(--hi-v4-color-gray-400, #c9ced6); }.hi-v4-input--appearance-unset .hi-v4-input__text::-webkit-input-placeholder {color: var(--hi-v4-color-gray-500, #929aa6); }.hi-v4-input--appearance-unset .hi-v4-input__text::-moz-placeholder {color: var(--hi-v4-color-gray-500, #929aa6); }.hi-v4-input--appearance-unset .hi-v4-input__text::-ms-input-placeholder {color: var(--hi-v4-color-gray-500, #929aa6); }.hi-v4-input--appearance-unset .hi-v4-input__text:-ms-input-placeholder {color: var(--hi-v4-color-gray-500, #929aa6); }.hi-v4-input--appearance-unset .hi-v4-input__text::placeholder {color: var(--hi-v4-color-gray-500, #929aa6); }.hi-v4-input__text:disabled {cursor: not-allowed; }.hi-v4-input__inner {position: relative;display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;height: auto;width: 100%;-webkit-box-sizing: border-box;box-sizing: border-box;font-size: inherit;border: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-static-transparent, transparent);background-color: var(--hi-v4-color-static-white, #fff);-webkit-transition-property: all;transition-property: all;-webkit-transition-duration: var(--hi-v4-motion-duration-normal, 200ms);transition-duration: var(--hi-v4-motion-duration-normal, 200ms);-webkit-transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));outline: none;z-index: auto; }.hi-v4-input__inner:not(.hi-v4-input__inner--disabled):hover {z-index: calc(var(--hi-v4-zindex-absolute, 1) + 1); }.hi-v4-input__inner:not(.hi-v4-input__inner--disabled).hi-v4-input__inner--focused {z-index: calc(var(--hi-v4-zindex-absolute, 1) + 1); }.hi-v4-input__clear {display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;height: auto;text-align: center;font-size: var(--hi-v4-text-size-md, 0.875rem);color: var(--hi-v4-color-gray-500, #929aa6);-ms-flex-negative: 0;flex-shrink: 0;cursor: pointer;-webkit-transition-property: all;transition-property: all;-webkit-transition-duration: var(--hi-v4-motion-duration-normal, 200ms);transition-duration: var(--hi-v4-motion-duration-normal, 200ms);-webkit-transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));visibility: hidden;opacity: 0; }.hi-v4-input__clear:hover {color: var(--hi-v4-color-gray-700, #1f2733); }.hi-v4-input__clear.hi-v4-input__clear--active {visibility: visible;opacity: 1; }.hi-v4-input__inner--suffix .hi-v4-input__clear {-webkit-margin-end: var(--hi-v4-spacing-2, 4px);margin-inline-end: var(--hi-v4-spacing-2, 4px); }.hi-v4-input__prefix, .hi-v4-input__suffix {display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-ms-flex-negative: 0;flex-shrink: 0;color: var(--hi-v4-color-gray-700, #1f2733);font-size: inherit;text-align: center; }.hi-v4-input__prefix {padding-left: calc(var(--hi-v4-spacing-6, 12px) - 1px); }.hi-v4-input__suffix {padding-right: calc(var(--hi-v4-spacing-6, 12px) - 1px); }.hi-v4-input__prepend, .hi-v4-input__append {position: relative;color: var(--hi-v4-color-gray-700, #1f2733);background-color: var(--hi-v4-color-gray-50, #f5f7fa);-ms-flex-negative: 0;flex-shrink: 0;display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;font-size: inherit;text-align: center;padding: 0 calc(var(--hi-v4-spacing-6, 12px) - 1px);border: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-static-transparent, transparent);white-space: nowrap;-webkit-transition-property: all;transition-property: all;-webkit-transition-duration: var(--hi-v4-motion-duration-normal, 200ms);transition-duration: var(--hi-v4-motion-duration-normal, 200ms);-webkit-transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));z-index: var(--hi-v4-zindex-absolute, 1); }.hi-v4-input__prepend {border-top-right-radius: 0;border-bottom-right-radius: 0;margin-right: -1px; }.hi-v4-input__append {border-top-left-radius: 0;border-bottom-left-radius: 0;margin-left: -1px; }.hi-v4-input--size-sm {height: var(--hi-v4-height-6, 24px);font-size: var(--hi-v4-text-size-sm, 0.75rem);line-height: var(--hi-v4-text-lineheight-sm, 1.25rem); }.hi-v4-input--size-sm .hi-v4-input__text {padding: 1px calc(var(--hi-v4-spacing-6, 12px) - 1px); }.hi-v4-input--size-sm .hi-v4-input__inner,.hi-v4-input--size-sm .hi-v4-input__prepend,.hi-v4-input--size-sm .hi-v4-input__append {border-radius: var(--hi-v4-border-radius-md, 4px); }.hi-v4-input--size-sm .hi-v4-input__prepend {border-top-right-radius: 0;border-bottom-right-radius: 0; }.hi-v4-input--size-sm .hi-v4-input__append {border-top-left-radius: 0;border-bottom-left-radius: 0; }.hi-v4-input--size-md {height: var(--hi-v4-height-8, 32px);font-size: var(--hi-v4-text-size-md, 0.875rem);line-height: var(--hi-v4-text-lineheight-md, 1.375rem); }.hi-v4-input--size-md .hi-v4-input__text {padding: 4px calc(var(--hi-v4-spacing-6, 12px) - 1px); }.hi-v4-input--size-md .hi-v4-input__inner,.hi-v4-input--size-md .hi-v4-input__prepend,.hi-v4-input--size-md .hi-v4-input__append {border-radius: var(--hi-v4-border-radius-md, 4px); }.hi-v4-input--size-md .hi-v4-input__prepend {border-top-right-radius: 0;border-bottom-right-radius: 0; }.hi-v4-input--size-md .hi-v4-input__append {border-top-left-radius: 0;border-bottom-left-radius: 0; }.hi-v4-input--size-lg {height: var(--hi-v4-height-10, 40px);font-size: var(--hi-v4-text-size-lg, 1rem);line-height: var(--hi-v4-text-lineheight-lg, 1.5rem); }.hi-v4-input--size-lg .hi-v4-input__text {padding: 7px calc(var(--hi-v4-spacing-6, 12px) - 1px); }.hi-v4-input--size-lg .hi-v4-input__inner,.hi-v4-input--size-lg .hi-v4-input__prepend,.hi-v4-input--size-lg .hi-v4-input__append {border-radius: var(--hi-v4-border-radius-md, 4px); }.hi-v4-input--size-lg .hi-v4-input__prepend {border-top-right-radius: 0;border-bottom-right-radius: 0; }.hi-v4-input--size-lg .hi-v4-input__append {border-top-left-radius: 0;border-bottom-left-radius: 0; }.hi-v4-input--appearance-line .hi-v4-input__inner {border-color: var(--hi-v4-color-gray-300, #dfe2e8); }.hi-v4-input--appearance-line .hi-v4-input__inner:not(.hi-v4-input__inner--disabled):hover {border-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-input--appearance-line .hi-v4-input__inner:not(.hi-v4-input__inner--disabled).hi-v4-input__inner--focused {-webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-primary-100, var(--hi-v4-color-brandblue-100, #bde2ff));box-shadow: 0 0 0 2px var(--hi-v4-color-primary-100, var(--hi-v4-color-brandblue-100, #bde2ff));border-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-input--appearance-line .hi-v4-input__inner:not(.hi-v4-input__inner--disabled).hi-v4-input__inner--invalid {border-color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959)); }.hi-v4-input--appearance-line .hi-v4-input__inner:not(.hi-v4-input__inner--disabled).hi-v4-input__inner--invalid:hover {border-color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959)); }.hi-v4-input--appearance-line .hi-v4-input__inner:not(.hi-v4-input__inner--disabled).hi-v4-input__inner--invalid.hi-v4-input__inner--focused {-webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-danger-100, var(--hi-v4-color-red-100, #ffd1c9));box-shadow: 0 0 0 2px var(--hi-v4-color-danger-100, var(--hi-v4-color-red-100, #ffd1c9)); }.hi-v4-input--appearance-line .hi-v4-input__prepend,.hi-v4-input--appearance-line .hi-v4-input__append {border-color: var(--hi-v4-color-gray-300, #dfe2e8); }.hi-v4-input--appearance-unset .hi-v4-input__text {padding-left: 0;padding-right: 0; }.hi-v4-input--appearance-unset.hi-v4-input__outer--prepend .hi-v4-input__text,.hi-v4-input--appearance-unset .hi-v4-input__inner--prefix .hi-v4-input__text {padding-left: calc(var(--hi-v4-spacing-6, 12px) - 1px); }.hi-v4-input--appearance-unset.hi-v4-input__outer--append .hi-v4-input__text,.hi-v4-input--appearance-unset .hi-v4-input__inner--suffix .hi-v4-input__text {padding-right: calc(var(--hi-v4-spacing-6, 12px) - 1px); }.hi-v4-input--appearance-unset .hi-v4-input__inner {border-radius: 0; }.hi-v4-input--appearance-filled .hi-v4-input__inner {background-color: var(--hi-v4-color-gray-100, #f2f4f7); }.hi-v4-input--appearance-filled .hi-v4-input__inner:not(.hi-v4-input__inner--disabled):hover {background-color: var(--hi-v4-color-static-white, #fff);border-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-input--appearance-filled .hi-v4-input__inner:not(.hi-v4-input__inner--disabled).hi-v4-input__inner--focused {-webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-primary-100, var(--hi-v4-color-brandblue-100, #bde2ff));box-shadow: 0 0 0 2px var(--hi-v4-color-primary-100, var(--hi-v4-color-brandblue-100, #bde2ff));border-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));background-color: var(--hi-v4-color-static-white, #fff); }.hi-v4-input--appearance-filled .hi-v4-input__inner:not(.hi-v4-input__inner--disabled).hi-v4-input__inner--invalid {border-color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959)); }.hi-v4-input--appearance-filled .hi-v4-input__inner:not(.hi-v4-input__inner--disabled).hi-v4-input__inner--invalid:hover {border-color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959)); }.hi-v4-input--appearance-filled .hi-v4-input__inner:not(.hi-v4-input__inner--disabled).hi-v4-input__inner--invalid.hi-v4-input__inner--focused {-webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-danger-100, var(--hi-v4-color-red-100, #ffd1c9));box-shadow: 0 0 0 2px var(--hi-v4-color-danger-100, var(--hi-v4-color-red-100, #ffd1c9)); }.hi-v4-input--appearance-underline .hi-v4-input__text {padding-left: 0;padding-right: 0; }.hi-v4-input--appearance-underline.hi-v4-input__outer--prepend .hi-v4-input__text,.hi-v4-input--appearance-underline .hi-v4-input__inner--prefix .hi-v4-input__text {padding-left: calc(var(--hi-v4-spacing-6, 12px) - 1px); }.hi-v4-input--appearance-underline.hi-v4-input__outer--append .hi-v4-input__text,.hi-v4-input--appearance-underline .hi-v4-input__inner--suffix .hi-v4-input__text {padding-right: calc(var(--hi-v4-spacing-6, 12px) - 1px); }.hi-v4-input--appearance-underline .hi-v4-input__inner {border-radius: 0; }.hi-v4-input--appearance-underline .hi-v4-input__inner::after {content: '';-webkit-box-sizing: border-box;box-sizing: border-box;display: block;position: absolute;bottom: 0;left: -1px;right: -1px;border-bottom: 1px solid var(--hi-v4-color-gray-300, #dfe2e8);-webkit-transition: all 0.3s;transition: all 0.3s; }.hi-v4-input--appearance-underline .hi-v4-input__inner:not(.hi-v4-input__inner--disabled):hover::after {border-bottom-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-input--appearance-underline .hi-v4-input__inner:not(.hi-v4-input__inner--disabled).hi-v4-input__inner--focused::after {border-bottom-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-input--appearance-underline .hi-v4-input__inner:not(.hi-v4-input__inner--disabled).hi-v4-input__inner--invalid::after {border-bottom-color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959)); }.hi-v4-input--appearance-underline .hi-v4-input__inner:not(.hi-v4-input__inner--disabled).hi-v4-input__inner--invalid.hover::after {border-bottom-color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959)); }.hi-v4-input--appearance-line .hi-v4-input__inner.hi-v4-input__inner--disabled, .hi-v4-input--appearance-filled .hi-v4-input__inner.hi-v4-input__inner--disabled {color: var(--hi-v4-color-gray-400, #c9ced6);background-color: var(--hi-v4-color-gray-100, #f2f4f7); }.hi-v4-input--appearance-line .hi-v4-input__inner.hi-v4-input__inner--disabled .hi-v4-input__text, .hi-v4-input--appearance-filled .hi-v4-input__inner.hi-v4-input__inner--disabled .hi-v4-input__text {color: var(--hi-v4-color-gray-400, #c9ced6); }.hi-v4-input--appearance-unset .hi-v4-input__inner.hi-v4-input__inner--disabled, .hi-v4-input--appearance-underline .hi-v4-input__inner.hi-v4-input__inner--disabled {color: var(--hi-v4-color-gray-400, #c9ced6);background-color: transparent; }.hi-v4-input--appearance-unset .hi-v4-input__inner.hi-v4-input__inner--disabled .hi-v4-input__text, .hi-v4-input--appearance-underline .hi-v4-input__inner.hi-v4-input__inner--disabled .hi-v4-input__text {color: var(--hi-v4-color-gray-400, #c9ced6); }.hi-v4-input__outer--prepend .hi-v4-input__inner {border-top-left-radius: 0;border-bottom-left-radius: 0; }.hi-v4-input__outer--prepend-unset .hi-v4-input__prepend {border: none;padding: 0; }.hi-v4-input__outer--prepend-unset .hi-v4-input__prepend .hi-v4-mock-input {border-top-right-radius: 0;border-bottom-right-radius: 0; }.hi-v4-input__outer--prepend-unset .hi-v4-input__prepend .hi-v4-button {border-top-right-radius: 0;border-bottom-right-radius: 0; }.hi-v4-input__outer--append .hi-v4-input__inner {border-top-right-radius: 0;border-bottom-right-radius: 0; }.hi-v4-input__outer--append-unset .hi-v4-input__append {border: none;padding: 0; }.hi-v4-input__outer--append-unset .hi-v4-input__append .hi-v4-mock-input {border-top-left-radius: 0;border-bottom-left-radius: 0; }.hi-v4-input__outer--append-unset .hi-v4-input__append .hi-v4-button {border-top-left-radius: 0;border-bottom-left-radius: 0; }";
16
16
 
17
17
  var __styleInject__ = require('inject-head-style')["default"];
18
18
 
package/lib/cjs/use-input-cursor.js ADDED
@@ -0,0 +1,104 @@
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
+ Object.defineProperty(exports, '__esModule', {
13
+ value: true
14
+ });
15
+
16
+ var React = require('react');
17
+
18
+ var defaultSeparator = ' ';
19
+
20
+ var useInputCursor = function useInputCursor(_ref) {
21
+ var inputElementRef = _ref.inputElementRef,
22
+ value = _ref.value,
23
+ formatter = _ref.formatter,
24
+ _ref$separator = _ref.separator,
25
+ separator = _ref$separator === void 0 ? defaultSeparator : _ref$separator;
26
+
27
+ var _useState = React.useState(0),
28
+ position = _useState[0],
29
+ setPosition = _useState[1];
30
+
31
+ var startPositionRef = React.useRef(0); // 记录值变化前的位置
32
+
33
+ var handleOnKeyDown = React.useCallback(function () {
34
+ var _a, _b;
35
+
36
+ startPositionRef.current = (_b = (_a = inputElementRef.current) === null || _a === void 0 ? void 0 : _a.selectionStart) !== null && _b !== void 0 ? _b : 0;
37
+ }, [inputElementRef]);
38
+ var handleChange = React.useCallback(function (evt) {
39
+ var _a, _b;
40
+
41
+ var val = evt.target.value; // 处理后的字符串
42
+
43
+ var str = typeof formatter === 'function' ? formatter(val) : val; // 光标变化后的位置
44
+
45
+ var endPosition = (_b = (_a = inputElementRef.current) === null || _a === void 0 ? void 0 : _a.selectionStart) !== null && _b !== void 0 ? _b : 0; // 字符串添加
46
+
47
+ if (str.length > value.length) {
48
+ // 值变化的长度
49
+ var len = str.length - value.length; // 取出变化的值
50
+
51
+ var addStr = str.substring(startPositionRef.current, startPositionRef.current + len); // 光标应该移动的格数
52
+
53
+ var step = getSeparatorNum(addStr, separator);
54
+ setPosition(endPosition + step);
55
+ } // 字符串删除
56
+
57
+
58
+ if (str.length < value.length) {
59
+ if (str.charAt(endPosition - 1) === separator) {
60
+ setPosition(endPosition - 1);
61
+ } else {
62
+ setPosition(endPosition);
63
+ }
64
+ } // 没有变化
65
+
66
+
67
+ if (str.length === value.length) {
68
+ if (str.charAt(startPositionRef.current) === separator) {
69
+ setPosition(endPosition + 1);
70
+ } else {
71
+ setPosition(endPosition);
72
+ }
73
+ }
74
+ }, [formatter, inputElementRef, separator, value.length]);
75
+ return {
76
+ position: position,
77
+ handleChange: handleChange,
78
+ handleOnKeyDown: handleOnKeyDown
79
+ };
80
+ };
81
+ /**
82
+ * 获取字符串中有多少格式化字符
83
+ * @param str
84
+ * @returns
85
+ */
86
+
87
+
88
+ var getSeparatorNum = function getSeparatorNum(str, separator) {
89
+ if (separator === void 0) {
90
+ separator = defaultSeparator;
91
+ }
92
+
93
+ var index = str.indexOf(separator);
94
+ var num = 0;
95
+
96
+ while (index !== -1) {
97
+ index = str.indexOf(separator, index + 1);
98
+ num++;
99
+ }
100
+
101
+ return num;
102
+ };
103
+
104
+ exports.useInputCursor = useInputCursor;
package/lib/cjs/use-input.js CHANGED
@@ -21,9 +21,15 @@ var useLatest = require('@hi-ui/use-latest');
21
21
 
22
22
  var domUtils = require('@hi-ui/dom-utils');
23
23
 
24
+ var funcUtils = require('@hi-ui/func-utils');
25
+
24
26
  var index = require('./utils/index.js');
25
27
 
26
- var EXTRA_TYPE = ['text', 'id', 'tel', 'card', 'amount', 'email'];
28
+ var useInputCursor = require('./use-input-cursor.js');
29
+
30
+ var EXTRA_TYPE = ['text', 'id', 'tel', 'card', 'amount', 'email']; // 需要格式化后校对光标的类型
31
+
32
+ var RESET_CURSOR_TYPE = ['id', 'tel', 'card'];
27
33
 
28
34
  var useInput = function useInput(_ref) {
29
35
  var name = _ref.name,
@@ -41,16 +47,33 @@ var useInput = function useInput(_ref) {
41
47
  onChange = _ref.onChange,
42
48
  onFocus = _ref.onFocus,
43
49
  onBlur = _ref.onBlur,
50
+ onKeyDown = _ref.onKeyDown,
44
51
  _ref$trimValueOnBlur = _ref.trimValueOnBlur,
45
52
  trimValueOnBlur = _ref$trimValueOnBlur === void 0 ? false : _ref$trimValueOnBlur,
46
53
  _ref$type = _ref.type,
47
54
  type = _ref$type === void 0 ? 'text' : _ref$type,
48
- clearElementRef = _ref.clearElementRef; // Object.is 避免 trimValueOnBlur 和 点击 clearIcon 触发 2 次相同的 onCHange
55
+ clearElementRef = _ref.clearElementRef,
56
+ inputElementRef = _ref.inputElementRef; // Object.is 避免 trimValueOnBlur 和 点击 clearIcon 触发 2 次相同的 onCHange
49
57
 
50
58
  var _useUncontrolledState = useUncontrolledState.useUncontrolledState(defaultValue, valueProp, onChange, Object.is),
51
59
  value = _useUncontrolledState[0],
52
60
  tryChangeValue = _useUncontrolledState[1];
53
61
 
62
+ var _useInputCursor = useInputCursor.useInputCursor({
63
+ inputElementRef: inputElementRef,
64
+ value: index.format(value, type)
65
+ }),
66
+ formatHandleChange = _useInputCursor.handleChange,
67
+ handleOnKeyDown = _useInputCursor.handleOnKeyDown,
68
+ position = _useInputCursor.position;
69
+ /**
70
+ * 修复值格式化时光标位置问题：https://github.com/XiaoMi/hiui/issues/2438
71
+ */
72
+
73
+
74
+ var needResetCursorPosition = React.useMemo(function () {
75
+ return RESET_CURSOR_TYPE.includes(type);
76
+ }, [type]);
54
77
  var handleChange = React.useCallback(function (evt, trim) {
55
78
  if (trim === void 0) {
56
79
  trim = false;
@@ -72,7 +95,8 @@ var useInput = function useInput(_ref) {
72
95
  value: value
73
96
  });
74
97
  tryChangeValue(valueTrue, event);
75
- }, [tryChangeValue, type]);
98
+ needResetCursorPosition && formatHandleChange(event);
99
+ }, [formatHandleChange, needResetCursorPosition, tryChangeValue, type]);
76
100
 
77
101
  var _useState = React.useState(autoFocus),
78
102
  focused = _useState[0],
@@ -118,9 +142,17 @@ var useInput = function useInput(_ref) {
118
142
  type: nativeType,
119
143
  onChange: handleChange,
120
144
  onFocus: handleFocus,
121
- onBlur: handleBlur
145
+ onBlur: handleBlur,
146
+ onKeyDown: needResetCursorPosition ? funcUtils.callAllFuncs(handleOnKeyDown, onKeyDown) : onKeyDown
122
147
  });
123
- }, [value, type, handleChange, handleFocus, handleBlur, nativeInputProps]);
148
+ }, [type, nativeInputProps, value, handleChange, handleFocus, handleBlur, needResetCursorPosition, handleOnKeyDown, onKeyDown]);
149
+ React.useEffect(function () {
150
+ // 满足以下条件时需要校对光标位置
151
+ if (needResetCursorPosition && inputElementRef.current) {
152
+ inputElementRef.current.selectionStart = position;
153
+ inputElementRef.current.selectionEnd = position;
154
+ }
155
+ }, [inputElementRef, needResetCursorPosition, position, type]);
124
156
  return {
125
157
  focused: focused,
126
158
  value: value,
package/lib/esm/Input.js CHANGED
@@ -60,11 +60,12 @@ var Input = /*#__PURE__*/forwardRef(function (_a, ref) {
60
60
  onChange = _a.onChange,
61
61
  onFocus = _a.onFocus,
62
62
  onBlur = _a.onBlur,
63
+ onKeyDown = _a.onKeyDown,
63
64
  trimValueOnBlur = _a.trimValueOnBlur,
64
65
  onClear = _a.onClear,
65
66
  type = _a.type,
66
67
  containerRef = _a.containerRef,
67
- rest = __rest(_a, ["prefixCls", "role", "className", "style", "size", "appearance", "prepend", "append", "prefix", "suffix", "clearableTrigger", "clearable", "invalid", "name", "autoFocus", "disabled", "readOnly", "maxLength", "placeholder", "defaultValue", "value", "onChange", "onFocus", "onBlur", "trimValueOnBlur", "onClear", "type", "containerRef"]); // @TODO: 临时方案，后面迁移至 InputGroup
68
+ rest = __rest(_a, ["prefixCls", "role", "className", "style", "size", "appearance", "prepend", "append", "prefix", "suffix", "clearableTrigger", "clearable", "invalid", "name", "autoFocus", "disabled", "readOnly", "maxLength", "placeholder", "defaultValue", "value", "onChange", "onFocus", "onBlur", "onKeyDown", "trimValueOnBlur", "onClear", "type", "containerRef"]); // @TODO: 临时方案，后面迁移至 InputGroup
68
69
 
69
70
 
70
71
  var _useMemo = useMemo(function () {
@@ -95,6 +96,7 @@ var Input = /*#__PURE__*/forwardRef(function (_a, ref) {
95
96
 
96
97
  var _useInput = useInput({
97
98
  clearElementRef: clearElementRef,
99
+ inputElementRef: inputElementRef,
98
100
  name: name,
99
101
  autoFocus: autoFocus,
100
102
  disabled: disabled,
@@ -106,6 +108,7 @@ var Input = /*#__PURE__*/forwardRef(function (_a, ref) {
106
108
  onChange: proxyOnChange,
107
109
  onFocus: onFocus,
108
110
  onBlur: onBlur,
111
+ onKeyDown: onKeyDown,
109
112
  trimValueOnBlur: trimValueOnBlur,
110
113
  type: type
111
114
  }),
package/lib/esm/index.js CHANGED
@@ -10,4 +10,5 @@
10
10
  import './styles/index.scss.js';
11
11
  export { Input, Input as default, onChangeMock } from './Input.js';
12
12
  export { useInput } from './use-input.js';
13
+ export { useInputCursor } from './use-input-cursor.js';
13
14
  export { MockInput } from './MockInput.js';
package/lib/esm/styles/index.scss.js CHANGED
@@ -8,7 +8,7 @@
8
8
  * LICENSE file in the root directory of this source tree.
9
9
  */
10
10
  import __styleInject__ from 'inject-head-style';
11
- var css_248z = ".hi-v4-mock-input {-webkit-box-sizing: border-box;box-sizing: border-box;margin: 0;padding: 0;border: none;outline: none;-webkit-box-shadow: none;box-shadow: none;-webkit-appearance: none;-moz-appearance: none;appearance: none;cursor: text;background-color: transparent;-webkit-tap-highlight-color: transparent;position: relative;overflow: hidden;display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;-webkit-transition-property: all;transition-property: all;-webkit-transition-duration: var(--hi-v4-motion-duration-normal, 200ms);transition-duration: var(--hi-v4-motion-duration-normal, 200ms);-webkit-transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));width: 100%;height: auto;z-index: auto;font-size: inherit;line-height: inherit;color: var(--hi-v4-color-gray-700, #1f2733);border: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-static-transparent, transparent);background-color: var(--hi-v4-color-static-white, #fff); }.hi-v4-mock-input:not(.disabled):hover {z-index: calc(var(--hi-v4-zindex-absolute, 1) + 1); }.hi-v4-mock-input:not(.disabled).focused {z-index: calc(var(--hi-v4-zindex-absolute, 1) + 1); }.hi-v4-mock-input.disabled {cursor: not-allowed; }.hi-v4-mock-input__suffix, .hi-v4-mock-input__placeholder {color: var(--hi-v4-color-gray-400, #c9ced6); }.hi-v4-mock-input__placeholder {width: auto;overflow: hidden;text-overflow: ellipsis;white-space: nowrap; }.hi-v4-mock-input__clear {display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;width: 16px;height: 16px;font-size: var(--hi-v4-text-size-md, 0.875rem);text-align: center;color: var(--hi-v4-color-gray-500, #929aa6);-ms-flex-negative: 0;flex-shrink: 0;cursor: pointer;visibility: hidden;opacity: 0;-webkit-transition-property: all;transition-property: all;-webkit-transition-duration: var(--hi-v4-motion-duration-normal, 200ms);transition-duration: var(--hi-v4-motion-duration-normal, 200ms);-webkit-transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1)); }.hi-v4-mock-input__clear:hover {color: var(--hi-v4-color-static-black, #000); }.hi-v4-mock-input__clear.active {visibility: visible;opacity: 1; }.hi-v4-mock-input__suffix {display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-ms-flex-negative: 0;flex-shrink: 0;color: var(--hi-v4-color-gray-400, #c9ced6);font-size: var(--hi-v4-text-size-lg, 1rem);padding-left: var(--hi-v4-spacing-4, 8px);text-align: center; }.hi-v4-mock-input__value {-webkit-box-sizing: border-box;box-sizing: border-box;display: inline-block;width: auto;overflow: hidden;text-overflow: ellipsis;white-space: nowrap; }.hi-v4-mock-input--size-sm.hi-v4-mock-input {height: var(--hi-v4-height-6, 24px);font-size: var(--hi-v4-text-size-sm, 0.75rem);line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);border-radius: var(--hi-v4-border-radius-md, 4px);padding: 1px calc(var(--hi-v4-spacing-6, 12px) - 1px); }.hi-v4-mock-input--size-md.hi-v4-mock-input {height: var(--hi-v4-height-8, 32px);font-size: var(--hi-v4-text-size-md, 0.875rem);line-height: var(--hi-v4-text-lineheight-md, 1.375rem);border-radius: var(--hi-v4-border-radius-md, 4px);padding: 4px calc(var(--hi-v4-spacing-6, 12px) - 1px); }.hi-v4-mock-input--size-lg.hi-v4-mock-input {height: var(--hi-v4-height-10, 40px);font-size: var(--hi-v4-text-size-lg, 1rem);line-height: var(--hi-v4-text-lineheight-lg, 1.5rem);border-radius: var(--hi-v4-border-radius-md, 4px);padding: 7px calc(var(--hi-v4-spacing-6, 12px) - 1px); }.hi-v4-mock-input--appearance-line.hi-v4-mock-input {border-color: var(--hi-v4-color-gray-300, #dfe2e8); }.hi-v4-mock-input--appearance-line.hi-v4-mock-input:not(.disabled):hover {border-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-mock-input--appearance-line.hi-v4-mock-input:not(.disabled).focused {-webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-primary-100, var(--hi-v4-color-brandblue-100, #bde2ff));box-shadow: 0 0 0 2px var(--hi-v4-color-primary-100, var(--hi-v4-color-brandblue-100, #bde2ff));border-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-mock-input--appearance-line.hi-v4-mock-input:not(.disabled).invalid {border-color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959)); }.hi-v4-mock-input--appearance-line.hi-v4-mock-input:not(.disabled).invalid.hover {border-color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959)); }.hi-v4-mock-input--appearance-line.hi-v4-mock-input:not(.disabled).invalid.focused {-webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-danger-100, var(--hi-v4-color-red-100, #ffd1c9));box-shadow: 0 0 0 2px var(--hi-v4-color-danger-100, var(--hi-v4-color-red-100, #ffd1c9)); }.hi-v4-mock-input--appearance-unset.hi-v4-mock-input {width: auto;max-width: 100%;-webkit-box-pack: start;-ms-flex-pack: start;justify-content: flex-start;border-color: transparent; }.hi-v4-mock-input--appearance-unset.hi-v4-mock-input:not(.disabled):hover {background-color: var(--hi-v4-color-gray-100, #f2f4f7); }.hi-v4-mock-input--appearance-unset.hi-v4-mock-input:not(.disabled).focused {-webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-primary-100, var(--hi-v4-color-brandblue-100, #bde2ff));box-shadow: 0 0 0 2px var(--hi-v4-color-primary-100, var(--hi-v4-color-brandblue-100, #bde2ff));background-color: var(--hi-v4-color-static-white, #fff);border-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-mock-input--appearance-unset.hi-v4-mock-input:not(.disabled).invalid {border-color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959)); }.hi-v4-mock-input--appearance-unset.hi-v4-mock-input:not(.disabled).invalid.hover {border-color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959)); }.hi-v4-mock-input--appearance-unset.hi-v4-mock-input:not(.disabled).invalid.focused {-webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-danger-100, var(--hi-v4-color-red-100, #ffd1c9));box-shadow: 0 0 0 2px var(--hi-v4-color-danger-100, var(--hi-v4-color-red-100, #ffd1c9)); }.hi-v4-mock-input--appearance-filled.hi-v4-mock-input {background-color: var(--hi-v4-color-gray-100, #f2f4f7); }.hi-v4-mock-input--appearance-filled.hi-v4-mock-input:not(.disabled):hover {background-color: var(--hi-v4-color-static-white, #fff);border-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-mock-input--appearance-filled.hi-v4-mock-input:not(.disabled).focused {-webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-primary-100, var(--hi-v4-color-brandblue-100, #bde2ff));box-shadow: 0 0 0 2px var(--hi-v4-color-primary-100, var(--hi-v4-color-brandblue-100, #bde2ff));border-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));background-color: var(--hi-v4-color-static-white, #fff); }.hi-v4-mock-input--appearance-filled.hi-v4-mock-input:not(.disabled).invalid {border-color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959)); }.hi-v4-mock-input--appearance-filled.hi-v4-mock-input:not(.disabled).invalid.hover {border-color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959)); }.hi-v4-mock-input--appearance-filled.hi-v4-mock-input:not(.disabled).invalid.focused {-webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-danger-100, var(--hi-v4-color-red-100, #ffd1c9));box-shadow: 0 0 0 2px var(--hi-v4-color-danger-100, var(--hi-v4-color-red-100, #ffd1c9)); }.hi-v4-mock-input--appearance-line.disabled.hi-v4-mock-input, .hi-v4-mock-input--appearance-unset.disabled.hi-v4-mock-input, .hi-v4-mock-input--appearance-filled.disabled.hi-v4-mock-input {color: var(--hi-v4-color-gray-400, #c9ced6); }.hi-v4-mock-input--appearance-line.disabled.hi-v4-mock-input, .hi-v4-mock-input--appearance-filled.disabled.hi-v4-mock-input {background-color: var(--hi-v4-color-gray-100, #f2f4f7); }.hi-v4-input {position: relative;display: inline-block;-webkit-box-sizing: border-box;box-sizing: border-box;width: 100%; }.hi-v4-input__outer {margin: 0;padding: 0;display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;position: relative;height: 100%;width: 100%; }.hi-v4-input__text {-webkit-box-sizing: border-box;box-sizing: border-box;margin: 0;padding: 0;border: none;outline: none;-webkit-box-shadow: none;box-shadow: none;-webkit-appearance: none;-moz-appearance: none;appearance: none;cursor: text;background-color: transparent;-webkit-tap-highlight-color: transparent;-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;display: inline-block;box-sizing: border-box;-webkit-transition-property: all;transition-property: all;-webkit-transition-duration: var(--hi-v4-motion-duration-normal, 200ms);transition-duration: var(--hi-v4-motion-duration-normal, 200ms);-webkit-transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));width: 100%;font-size: inherit;line-height: inherit;color: var(--hi-v4-color-gray-700, #1f2733); }.hi-v4-input__text::-webkit-input-placeholder {color: var(--hi-v4-color-gray-400, #c9ced6); }.hi-v4-input__text::-moz-placeholder {color: var(--hi-v4-color-gray-400, #c9ced6); }.hi-v4-input__text::-ms-input-placeholder {color: var(--hi-v4-color-gray-400, #c9ced6); }.hi-v4-input__text:-ms-input-placeholder {color: var(--hi-v4-color-gray-400, #c9ced6); }.hi-v4-input__text::placeholder {color: var(--hi-v4-color-gray-400, #c9ced6); }.hi-v4-input__text:disabled {cursor: not-allowed; }.hi-v4-input__inner {position: relative;display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;height: auto;width: 100%;-webkit-box-sizing: border-box;box-sizing: border-box;font-size: inherit;border: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-static-transparent, transparent);background-color: var(--hi-v4-color-static-white, #fff);-webkit-transition-property: all;transition-property: all;-webkit-transition-duration: var(--hi-v4-motion-duration-normal, 200ms);transition-duration: var(--hi-v4-motion-duration-normal, 200ms);-webkit-transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));outline: none;z-index: auto; }.hi-v4-input__inner:not(.hi-v4-input__inner--disabled):hover {z-index: calc(var(--hi-v4-zindex-absolute, 1) + 1); }.hi-v4-input__inner:not(.hi-v4-input__inner--disabled).hi-v4-input__inner--focused {z-index: calc(var(--hi-v4-zindex-absolute, 1) + 1); }.hi-v4-input__clear {display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;height: auto;text-align: center;font-size: var(--hi-v4-text-size-md, 0.875rem);color: var(--hi-v4-color-gray-500, #929aa6);-ms-flex-negative: 0;flex-shrink: 0;cursor: pointer;-webkit-transition-property: all;transition-property: all;-webkit-transition-duration: var(--hi-v4-motion-duration-normal, 200ms);transition-duration: var(--hi-v4-motion-duration-normal, 200ms);-webkit-transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));visibility: hidden;opacity: 0; }.hi-v4-input__clear:hover {color: var(--hi-v4-color-gray-700, #1f2733); }.hi-v4-input__clear.hi-v4-input__clear--active {visibility: visible;opacity: 1; }.hi-v4-input__inner--suffix .hi-v4-input__clear {-webkit-margin-end: var(--hi-v4-spacing-2, 4px);margin-inline-end: var(--hi-v4-spacing-2, 4px); }.hi-v4-input__prefix, .hi-v4-input__suffix {display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-ms-flex-negative: 0;flex-shrink: 0;color: var(--hi-v4-color-gray-700, #1f2733);font-size: inherit;text-align: center; }.hi-v4-input__prefix {padding-left: calc(var(--hi-v4-spacing-6, 12px) - 1px); }.hi-v4-input__suffix {padding-right: calc(var(--hi-v4-spacing-6, 12px) - 1px); }.hi-v4-input__prepend, .hi-v4-input__append {position: relative;color: var(--hi-v4-color-gray-700, #1f2733);background-color: var(--hi-v4-color-gray-50, #f5f7fa);-ms-flex-negative: 0;flex-shrink: 0;display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;font-size: inherit;text-align: center;padding: 0 calc(var(--hi-v4-spacing-6, 12px) - 1px);border: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-static-transparent, transparent);white-space: nowrap;-webkit-transition-property: all;transition-property: all;-webkit-transition-duration: var(--hi-v4-motion-duration-normal, 200ms);transition-duration: var(--hi-v4-motion-duration-normal, 200ms);-webkit-transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));z-index: var(--hi-v4-zindex-absolute, 1); }.hi-v4-input__prepend {border-top-right-radius: 0;border-bottom-right-radius: 0;margin-right: -1px; }.hi-v4-input__append {border-top-left-radius: 0;border-bottom-left-radius: 0;margin-left: -1px; }.hi-v4-input--size-sm {height: var(--hi-v4-height-6, 24px);font-size: var(--hi-v4-text-size-sm, 0.75rem);line-height: var(--hi-v4-text-lineheight-sm, 1.25rem); }.hi-v4-input--size-sm .hi-v4-input__text {padding: 1px calc(var(--hi-v4-spacing-6, 12px) - 1px); }.hi-v4-input--size-sm .hi-v4-input__inner,.hi-v4-input--size-sm .hi-v4-input__prepend,.hi-v4-input--size-sm .hi-v4-input__append {border-radius: var(--hi-v4-border-radius-md, 4px); }.hi-v4-input--size-sm .hi-v4-input__prepend {border-top-right-radius: 0;border-bottom-right-radius: 0; }.hi-v4-input--size-sm .hi-v4-input__append {border-top-left-radius: 0;border-bottom-left-radius: 0; }.hi-v4-input--size-md {height: var(--hi-v4-height-8, 32px);font-size: var(--hi-v4-text-size-md, 0.875rem);line-height: var(--hi-v4-text-lineheight-md, 1.375rem); }.hi-v4-input--size-md .hi-v4-input__text {padding: 4px calc(var(--hi-v4-spacing-6, 12px) - 1px); }.hi-v4-input--size-md .hi-v4-input__inner,.hi-v4-input--size-md .hi-v4-input__prepend,.hi-v4-input--size-md .hi-v4-input__append {border-radius: var(--hi-v4-border-radius-md, 4px); }.hi-v4-input--size-md .hi-v4-input__prepend {border-top-right-radius: 0;border-bottom-right-radius: 0; }.hi-v4-input--size-md .hi-v4-input__append {border-top-left-radius: 0;border-bottom-left-radius: 0; }.hi-v4-input--size-lg {height: var(--hi-v4-height-10, 40px);font-size: var(--hi-v4-text-size-lg, 1rem);line-height: var(--hi-v4-text-lineheight-lg, 1.5rem); }.hi-v4-input--size-lg .hi-v4-input__text {padding: 7px calc(var(--hi-v4-spacing-6, 12px) - 1px); }.hi-v4-input--size-lg .hi-v4-input__inner,.hi-v4-input--size-lg .hi-v4-input__prepend,.hi-v4-input--size-lg .hi-v4-input__append {border-radius: var(--hi-v4-border-radius-md, 4px); }.hi-v4-input--size-lg .hi-v4-input__prepend {border-top-right-radius: 0;border-bottom-right-radius: 0; }.hi-v4-input--size-lg .hi-v4-input__append {border-top-left-radius: 0;border-bottom-left-radius: 0; }.hi-v4-input--appearance-line .hi-v4-input__inner {border-color: var(--hi-v4-color-gray-300, #dfe2e8); }.hi-v4-input--appearance-line .hi-v4-input__inner:not(.hi-v4-input__inner--disabled):hover {border-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-input--appearance-line .hi-v4-input__inner:not(.hi-v4-input__inner--disabled).hi-v4-input__inner--focused {-webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-primary-100, var(--hi-v4-color-brandblue-100, #bde2ff));box-shadow: 0 0 0 2px var(--hi-v4-color-primary-100, var(--hi-v4-color-brandblue-100, #bde2ff));border-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-input--appearance-line .hi-v4-input__inner:not(.hi-v4-input__inner--disabled).hi-v4-input__inner--invalid {border-color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959)); }.hi-v4-input--appearance-line .hi-v4-input__inner:not(.hi-v4-input__inner--disabled).hi-v4-input__inner--invalid:hover {border-color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959)); }.hi-v4-input--appearance-line .hi-v4-input__inner:not(.hi-v4-input__inner--disabled).hi-v4-input__inner--invalid.hi-v4-input__inner--focused {-webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-danger-100, var(--hi-v4-color-red-100, #ffd1c9));box-shadow: 0 0 0 2px var(--hi-v4-color-danger-100, var(--hi-v4-color-red-100, #ffd1c9)); }.hi-v4-input--appearance-line .hi-v4-input__prepend,.hi-v4-input--appearance-line .hi-v4-input__append {border-color: var(--hi-v4-color-gray-300, #dfe2e8); }.hi-v4-input--appearance-unset .hi-v4-input__text {padding-left: 0;padding-right: 0; }.hi-v4-input--appearance-unset.hi-v4-input__outer--prepend .hi-v4-input__text,.hi-v4-input--appearance-unset .hi-v4-input__inner--prefix .hi-v4-input__text {padding-left: calc(var(--hi-v4-spacing-6, 12px) - 1px); }.hi-v4-input--appearance-unset.hi-v4-input__outer--append .hi-v4-input__text,.hi-v4-input--appearance-unset .hi-v4-input__inner--suffix .hi-v4-input__text {padding-right: calc(var(--hi-v4-spacing-6, 12px) - 1px); }.hi-v4-input--appearance-unset .hi-v4-input__inner {border-radius: 0; }.hi-v4-input--appearance-filled .hi-v4-input__inner {background-color: var(--hi-v4-color-gray-100, #f2f4f7); }.hi-v4-input--appearance-filled .hi-v4-input__inner:not(.hi-v4-input__inner--disabled):hover {background-color: var(--hi-v4-color-static-white, #fff);border-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-input--appearance-filled .hi-v4-input__inner:not(.hi-v4-input__inner--disabled).hi-v4-input__inner--focused {-webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-primary-100, var(--hi-v4-color-brandblue-100, #bde2ff));box-shadow: 0 0 0 2px var(--hi-v4-color-primary-100, var(--hi-v4-color-brandblue-100, #bde2ff));border-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));background-color: var(--hi-v4-color-static-white, #fff); }.hi-v4-input--appearance-filled .hi-v4-input__inner:not(.hi-v4-input__inner--disabled).hi-v4-input__inner--invalid {border-color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959)); }.hi-v4-input--appearance-filled .hi-v4-input__inner:not(.hi-v4-input__inner--disabled).hi-v4-input__inner--invalid:hover {border-color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959)); }.hi-v4-input--appearance-filled .hi-v4-input__inner:not(.hi-v4-input__inner--disabled).hi-v4-input__inner--invalid.hi-v4-input__inner--focused {-webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-danger-100, var(--hi-v4-color-red-100, #ffd1c9));box-shadow: 0 0 0 2px var(--hi-v4-color-danger-100, var(--hi-v4-color-red-100, #ffd1c9)); }.hi-v4-input--appearance-underline .hi-v4-input__text {padding-left: 0;padding-right: 0; }.hi-v4-input--appearance-underline.hi-v4-input__outer--prepend .hi-v4-input__text,.hi-v4-input--appearance-underline .hi-v4-input__inner--prefix .hi-v4-input__text {padding-left: calc(var(--hi-v4-spacing-6, 12px) - 1px); }.hi-v4-input--appearance-underline.hi-v4-input__outer--append .hi-v4-input__text,.hi-v4-input--appearance-underline .hi-v4-input__inner--suffix .hi-v4-input__text {padding-right: calc(var(--hi-v4-spacing-6, 12px) - 1px); }.hi-v4-input--appearance-underline .hi-v4-input__inner {border-radius: 0; }.hi-v4-input--appearance-underline .hi-v4-input__inner::after {content: '';-webkit-box-sizing: border-box;box-sizing: border-box;display: block;position: absolute;bottom: 0;left: -1px;right: -1px;border-bottom: 1px solid var(--hi-v4-color-gray-300, #dfe2e8);-webkit-transition: all 0.3s;transition: all 0.3s; }.hi-v4-input--appearance-underline .hi-v4-input__inner:not(.hi-v4-input__inner--disabled):hover::after {border-bottom-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-input--appearance-underline .hi-v4-input__inner:not(.hi-v4-input__inner--disabled).hi-v4-input__inner--focused::after {border-bottom-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-input--appearance-underline .hi-v4-input__inner:not(.hi-v4-input__inner--disabled).hi-v4-input__inner--invalid::after {border-bottom-color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959)); }.hi-v4-input--appearance-underline .hi-v4-input__inner:not(.hi-v4-input__inner--disabled).hi-v4-input__inner--invalid.hover::after {border-bottom-color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959)); }.hi-v4-input--appearance-line .hi-v4-input__inner.hi-v4-input__inner--disabled, .hi-v4-input--appearance-filled .hi-v4-input__inner.hi-v4-input__inner--disabled {color: var(--hi-v4-color-gray-400, #c9ced6);background-color: var(--hi-v4-color-gray-100, #f2f4f7); }.hi-v4-input--appearance-line .hi-v4-input__inner.hi-v4-input__inner--disabled .hi-v4-input__text, .hi-v4-input--appearance-filled .hi-v4-input__inner.hi-v4-input__inner--disabled .hi-v4-input__text {color: var(--hi-v4-color-gray-400, #c9ced6); }.hi-v4-input--appearance-unset .hi-v4-input__inner.hi-v4-input__inner--disabled, .hi-v4-input--appearance-underline .hi-v4-input__inner.hi-v4-input__inner--disabled {color: var(--hi-v4-color-gray-400, #c9ced6);background-color: transparent; }.hi-v4-input--appearance-unset .hi-v4-input__inner.hi-v4-input__inner--disabled .hi-v4-input__text, .hi-v4-input--appearance-underline .hi-v4-input__inner.hi-v4-input__inner--disabled .hi-v4-input__text {color: var(--hi-v4-color-gray-400, #c9ced6); }.hi-v4-input__outer--prepend .hi-v4-input__inner {border-top-left-radius: 0;border-bottom-left-radius: 0; }.hi-v4-input__outer--prepend-unset .hi-v4-input__prepend {border: none;padding: 0; }.hi-v4-input__outer--prepend-unset .hi-v4-input__prepend .hi-v4-mock-input {border-top-right-radius: 0;border-bottom-right-radius: 0; }.hi-v4-input__outer--prepend-unset .hi-v4-input__prepend .hi-v4-button {border-top-right-radius: 0;border-bottom-right-radius: 0; }.hi-v4-input__outer--append .hi-v4-input__inner {border-top-right-radius: 0;border-bottom-right-radius: 0; }.hi-v4-input__outer--append-unset .hi-v4-input__append {border: none;padding: 0; }.hi-v4-input__outer--append-unset .hi-v4-input__append .hi-v4-mock-input {border-top-left-radius: 0;border-bottom-left-radius: 0; }.hi-v4-input__outer--append-unset .hi-v4-input__append .hi-v4-button {border-top-left-radius: 0;border-bottom-left-radius: 0; }";
11
+ var css_248z = ".hi-v4-mock-input {-webkit-box-sizing: border-box;box-sizing: border-box;margin: 0;padding: 0;border: none;outline: none;-webkit-box-shadow: none;box-shadow: none;-webkit-appearance: none;-moz-appearance: none;appearance: none;cursor: text;background-color: transparent;-webkit-tap-highlight-color: transparent;position: relative;overflow: hidden;display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;-webkit-transition-property: all;transition-property: all;-webkit-transition-duration: var(--hi-v4-motion-duration-normal, 200ms);transition-duration: var(--hi-v4-motion-duration-normal, 200ms);-webkit-transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));width: 100%;height: auto;z-index: auto;font-size: inherit;line-height: inherit;color: var(--hi-v4-color-gray-700, #1f2733);border: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-static-transparent, transparent);background-color: var(--hi-v4-color-static-white, #fff); }.hi-v4-mock-input:not(.disabled):hover {z-index: calc(var(--hi-v4-zindex-absolute, 1) + 1); }.hi-v4-mock-input:not(.disabled).focused {z-index: calc(var(--hi-v4-zindex-absolute, 1) + 1); }.hi-v4-mock-input.disabled {cursor: not-allowed; }.hi-v4-mock-input__suffix, .hi-v4-mock-input__placeholder {color: var(--hi-v4-color-gray-400, #c9ced6); }.hi-v4-mock-input--appearance-unset .hi-v4-mock-input__suffix, .hi-v4-mock-input--appearance-unset .hi-v4-mock-input__placeholder {color: var(--hi-v4-color-gray-500, #929aa6); }.hi-v4-mock-input__placeholder {width: auto;overflow: hidden;text-overflow: ellipsis;white-space: nowrap; }.hi-v4-mock-input__clear {display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;width: 16px;height: 16px;font-size: var(--hi-v4-text-size-md, 0.875rem);text-align: center;color: var(--hi-v4-color-gray-500, #929aa6);-ms-flex-negative: 0;flex-shrink: 0;cursor: pointer;visibility: hidden;opacity: 0;-webkit-transition-property: all;transition-property: all;-webkit-transition-duration: var(--hi-v4-motion-duration-normal, 200ms);transition-duration: var(--hi-v4-motion-duration-normal, 200ms);-webkit-transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1)); }.hi-v4-mock-input__clear:hover {color: var(--hi-v4-color-static-black, #000); }.hi-v4-mock-input__clear.active {visibility: visible;opacity: 1; }.hi-v4-mock-input__suffix {display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-ms-flex-negative: 0;flex-shrink: 0;color: var(--hi-v4-color-gray-400, #c9ced6);font-size: var(--hi-v4-text-size-lg, 1rem);padding-left: var(--hi-v4-spacing-4, 8px);text-align: center; }.hi-v4-mock-input__value {-webkit-box-sizing: border-box;box-sizing: border-box;display: inline-block;width: auto;overflow: hidden;text-overflow: ellipsis;white-space: nowrap; }.hi-v4-mock-input--size-sm.hi-v4-mock-input {height: var(--hi-v4-height-6, 24px);font-size: var(--hi-v4-text-size-sm, 0.75rem);line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);border-radius: var(--hi-v4-border-radius-md, 4px);padding: 1px calc(var(--hi-v4-spacing-6, 12px) - 1px); }.hi-v4-mock-input--size-md.hi-v4-mock-input {height: var(--hi-v4-height-8, 32px);font-size: var(--hi-v4-text-size-md, 0.875rem);line-height: var(--hi-v4-text-lineheight-md, 1.375rem);border-radius: var(--hi-v4-border-radius-md, 4px);padding: 4px calc(var(--hi-v4-spacing-6, 12px) - 1px); }.hi-v4-mock-input--size-lg.hi-v4-mock-input {height: var(--hi-v4-height-10, 40px);font-size: var(--hi-v4-text-size-lg, 1rem);line-height: var(--hi-v4-text-lineheight-lg, 1.5rem);border-radius: var(--hi-v4-border-radius-md, 4px);padding: 7px calc(var(--hi-v4-spacing-6, 12px) - 1px); }.hi-v4-mock-input--appearance-line.hi-v4-mock-input {border-color: var(--hi-v4-color-gray-300, #dfe2e8); }.hi-v4-mock-input--appearance-line.hi-v4-mock-input:not(.disabled):hover {border-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-mock-input--appearance-line.hi-v4-mock-input:not(.disabled).focused {-webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-primary-100, var(--hi-v4-color-brandblue-100, #bde2ff));box-shadow: 0 0 0 2px var(--hi-v4-color-primary-100, var(--hi-v4-color-brandblue-100, #bde2ff));border-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-mock-input--appearance-line.hi-v4-mock-input:not(.disabled).invalid {border-color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959)); }.hi-v4-mock-input--appearance-line.hi-v4-mock-input:not(.disabled).invalid.hover {border-color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959)); }.hi-v4-mock-input--appearance-line.hi-v4-mock-input:not(.disabled).invalid.focused {-webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-danger-100, var(--hi-v4-color-red-100, #ffd1c9));box-shadow: 0 0 0 2px var(--hi-v4-color-danger-100, var(--hi-v4-color-red-100, #ffd1c9)); }.hi-v4-mock-input--appearance-unset.hi-v4-mock-input {width: auto;max-width: 100%;-webkit-box-pack: start;-ms-flex-pack: start;justify-content: flex-start;border-color: transparent; }.hi-v4-mock-input--appearance-unset.hi-v4-mock-input:not(.disabled):hover {background-color: var(--hi-v4-color-gray-100, #f2f4f7); }.hi-v4-mock-input--appearance-unset.hi-v4-mock-input:not(.disabled).focused {-webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-primary-100, var(--hi-v4-color-brandblue-100, #bde2ff));box-shadow: 0 0 0 2px var(--hi-v4-color-primary-100, var(--hi-v4-color-brandblue-100, #bde2ff));background-color: var(--hi-v4-color-static-white, #fff);border-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-mock-input--appearance-unset.hi-v4-mock-input:not(.disabled).invalid {border-color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959)); }.hi-v4-mock-input--appearance-unset.hi-v4-mock-input:not(.disabled).invalid.hover {border-color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959)); }.hi-v4-mock-input--appearance-unset.hi-v4-mock-input:not(.disabled).invalid.focused {-webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-danger-100, var(--hi-v4-color-red-100, #ffd1c9));box-shadow: 0 0 0 2px var(--hi-v4-color-danger-100, var(--hi-v4-color-red-100, #ffd1c9)); }.hi-v4-mock-input--appearance-filled.hi-v4-mock-input {background-color: var(--hi-v4-color-gray-100, #f2f4f7); }.hi-v4-mock-input--appearance-filled.hi-v4-mock-input:not(.disabled):hover {background-color: var(--hi-v4-color-static-white, #fff);border-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-mock-input--appearance-filled.hi-v4-mock-input:not(.disabled).focused {-webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-primary-100, var(--hi-v4-color-brandblue-100, #bde2ff));box-shadow: 0 0 0 2px var(--hi-v4-color-primary-100, var(--hi-v4-color-brandblue-100, #bde2ff));border-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));background-color: var(--hi-v4-color-static-white, #fff); }.hi-v4-mock-input--appearance-filled.hi-v4-mock-input:not(.disabled).invalid {border-color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959)); }.hi-v4-mock-input--appearance-filled.hi-v4-mock-input:not(.disabled).invalid.hover {border-color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959)); }.hi-v4-mock-input--appearance-filled.hi-v4-mock-input:not(.disabled).invalid.focused {-webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-danger-100, var(--hi-v4-color-red-100, #ffd1c9));box-shadow: 0 0 0 2px var(--hi-v4-color-danger-100, var(--hi-v4-color-red-100, #ffd1c9)); }.hi-v4-mock-input--appearance-line.disabled.hi-v4-mock-input, .hi-v4-mock-input--appearance-unset.disabled.hi-v4-mock-input, .hi-v4-mock-input--appearance-filled.disabled.hi-v4-mock-input {color: var(--hi-v4-color-gray-400, #c9ced6); }.hi-v4-mock-input--appearance-line.disabled.hi-v4-mock-input, .hi-v4-mock-input--appearance-filled.disabled.hi-v4-mock-input {background-color: var(--hi-v4-color-gray-100, #f2f4f7); }.hi-v4-input {position: relative;display: inline-block;-webkit-box-sizing: border-box;box-sizing: border-box;width: 100%; }.hi-v4-input__outer {margin: 0;padding: 0;display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;position: relative;height: 100%;width: 100%; }.hi-v4-input__text {-webkit-box-sizing: border-box;box-sizing: border-box;margin: 0;padding: 0;border: none;outline: none;-webkit-box-shadow: none;box-shadow: none;-webkit-appearance: none;-moz-appearance: none;appearance: none;cursor: text;background-color: transparent;-webkit-tap-highlight-color: transparent;-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;display: inline-block;box-sizing: border-box;-webkit-transition-property: all;transition-property: all;-webkit-transition-duration: var(--hi-v4-motion-duration-normal, 200ms);transition-duration: var(--hi-v4-motion-duration-normal, 200ms);-webkit-transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));width: 100%;font-size: inherit;line-height: inherit;color: var(--hi-v4-color-gray-700, #1f2733); }.hi-v4-input__text::-webkit-input-placeholder {color: var(--hi-v4-color-gray-400, #c9ced6); }.hi-v4-input__text::-moz-placeholder {color: var(--hi-v4-color-gray-400, #c9ced6); }.hi-v4-input__text::-ms-input-placeholder {color: var(--hi-v4-color-gray-400, #c9ced6); }.hi-v4-input__text:-ms-input-placeholder {color: var(--hi-v4-color-gray-400, #c9ced6); }.hi-v4-input__text::placeholder {color: var(--hi-v4-color-gray-400, #c9ced6); }.hi-v4-input--appearance-unset .hi-v4-input__text::-webkit-input-placeholder {color: var(--hi-v4-color-gray-500, #929aa6); }.hi-v4-input--appearance-unset .hi-v4-input__text::-moz-placeholder {color: var(--hi-v4-color-gray-500, #929aa6); }.hi-v4-input--appearance-unset .hi-v4-input__text::-ms-input-placeholder {color: var(--hi-v4-color-gray-500, #929aa6); }.hi-v4-input--appearance-unset .hi-v4-input__text:-ms-input-placeholder {color: var(--hi-v4-color-gray-500, #929aa6); }.hi-v4-input--appearance-unset .hi-v4-input__text::placeholder {color: var(--hi-v4-color-gray-500, #929aa6); }.hi-v4-input__text:disabled {cursor: not-allowed; }.hi-v4-input__inner {position: relative;display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;height: auto;width: 100%;-webkit-box-sizing: border-box;box-sizing: border-box;font-size: inherit;border: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-static-transparent, transparent);background-color: var(--hi-v4-color-static-white, #fff);-webkit-transition-property: all;transition-property: all;-webkit-transition-duration: var(--hi-v4-motion-duration-normal, 200ms);transition-duration: var(--hi-v4-motion-duration-normal, 200ms);-webkit-transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));outline: none;z-index: auto; }.hi-v4-input__inner:not(.hi-v4-input__inner--disabled):hover {z-index: calc(var(--hi-v4-zindex-absolute, 1) + 1); }.hi-v4-input__inner:not(.hi-v4-input__inner--disabled).hi-v4-input__inner--focused {z-index: calc(var(--hi-v4-zindex-absolute, 1) + 1); }.hi-v4-input__clear {display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;height: auto;text-align: center;font-size: var(--hi-v4-text-size-md, 0.875rem);color: var(--hi-v4-color-gray-500, #929aa6);-ms-flex-negative: 0;flex-shrink: 0;cursor: pointer;-webkit-transition-property: all;transition-property: all;-webkit-transition-duration: var(--hi-v4-motion-duration-normal, 200ms);transition-duration: var(--hi-v4-motion-duration-normal, 200ms);-webkit-transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));visibility: hidden;opacity: 0; }.hi-v4-input__clear:hover {color: var(--hi-v4-color-gray-700, #1f2733); }.hi-v4-input__clear.hi-v4-input__clear--active {visibility: visible;opacity: 1; }.hi-v4-input__inner--suffix .hi-v4-input__clear {-webkit-margin-end: var(--hi-v4-spacing-2, 4px);margin-inline-end: var(--hi-v4-spacing-2, 4px); }.hi-v4-input__prefix, .hi-v4-input__suffix {display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-ms-flex-negative: 0;flex-shrink: 0;color: var(--hi-v4-color-gray-700, #1f2733);font-size: inherit;text-align: center; }.hi-v4-input__prefix {padding-left: calc(var(--hi-v4-spacing-6, 12px) - 1px); }.hi-v4-input__suffix {padding-right: calc(var(--hi-v4-spacing-6, 12px) - 1px); }.hi-v4-input__prepend, .hi-v4-input__append {position: relative;color: var(--hi-v4-color-gray-700, #1f2733);background-color: var(--hi-v4-color-gray-50, #f5f7fa);-ms-flex-negative: 0;flex-shrink: 0;display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;font-size: inherit;text-align: center;padding: 0 calc(var(--hi-v4-spacing-6, 12px) - 1px);border: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-static-transparent, transparent);white-space: nowrap;-webkit-transition-property: all;transition-property: all;-webkit-transition-duration: var(--hi-v4-motion-duration-normal, 200ms);transition-duration: var(--hi-v4-motion-duration-normal, 200ms);-webkit-transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));z-index: var(--hi-v4-zindex-absolute, 1); }.hi-v4-input__prepend {border-top-right-radius: 0;border-bottom-right-radius: 0;margin-right: -1px; }.hi-v4-input__append {border-top-left-radius: 0;border-bottom-left-radius: 0;margin-left: -1px; }.hi-v4-input--size-sm {height: var(--hi-v4-height-6, 24px);font-size: var(--hi-v4-text-size-sm, 0.75rem);line-height: var(--hi-v4-text-lineheight-sm, 1.25rem); }.hi-v4-input--size-sm .hi-v4-input__text {padding: 1px calc(var(--hi-v4-spacing-6, 12px) - 1px); }.hi-v4-input--size-sm .hi-v4-input__inner,.hi-v4-input--size-sm .hi-v4-input__prepend,.hi-v4-input--size-sm .hi-v4-input__append {border-radius: var(--hi-v4-border-radius-md, 4px); }.hi-v4-input--size-sm .hi-v4-input__prepend {border-top-right-radius: 0;border-bottom-right-radius: 0; }.hi-v4-input--size-sm .hi-v4-input__append {border-top-left-radius: 0;border-bottom-left-radius: 0; }.hi-v4-input--size-md {height: var(--hi-v4-height-8, 32px);font-size: var(--hi-v4-text-size-md, 0.875rem);line-height: var(--hi-v4-text-lineheight-md, 1.375rem); }.hi-v4-input--size-md .hi-v4-input__text {padding: 4px calc(var(--hi-v4-spacing-6, 12px) - 1px); }.hi-v4-input--size-md .hi-v4-input__inner,.hi-v4-input--size-md .hi-v4-input__prepend,.hi-v4-input--size-md .hi-v4-input__append {border-radius: var(--hi-v4-border-radius-md, 4px); }.hi-v4-input--size-md .hi-v4-input__prepend {border-top-right-radius: 0;border-bottom-right-radius: 0; }.hi-v4-input--size-md .hi-v4-input__append {border-top-left-radius: 0;border-bottom-left-radius: 0; }.hi-v4-input--size-lg {height: var(--hi-v4-height-10, 40px);font-size: var(--hi-v4-text-size-lg, 1rem);line-height: var(--hi-v4-text-lineheight-lg, 1.5rem); }.hi-v4-input--size-lg .hi-v4-input__text {padding: 7px calc(var(--hi-v4-spacing-6, 12px) - 1px); }.hi-v4-input--size-lg .hi-v4-input__inner,.hi-v4-input--size-lg .hi-v4-input__prepend,.hi-v4-input--size-lg .hi-v4-input__append {border-radius: var(--hi-v4-border-radius-md, 4px); }.hi-v4-input--size-lg .hi-v4-input__prepend {border-top-right-radius: 0;border-bottom-right-radius: 0; }.hi-v4-input--size-lg .hi-v4-input__append {border-top-left-radius: 0;border-bottom-left-radius: 0; }.hi-v4-input--appearance-line .hi-v4-input__inner {border-color: var(--hi-v4-color-gray-300, #dfe2e8); }.hi-v4-input--appearance-line .hi-v4-input__inner:not(.hi-v4-input__inner--disabled):hover {border-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-input--appearance-line .hi-v4-input__inner:not(.hi-v4-input__inner--disabled).hi-v4-input__inner--focused {-webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-primary-100, var(--hi-v4-color-brandblue-100, #bde2ff));box-shadow: 0 0 0 2px var(--hi-v4-color-primary-100, var(--hi-v4-color-brandblue-100, #bde2ff));border-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-input--appearance-line .hi-v4-input__inner:not(.hi-v4-input__inner--disabled).hi-v4-input__inner--invalid {border-color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959)); }.hi-v4-input--appearance-line .hi-v4-input__inner:not(.hi-v4-input__inner--disabled).hi-v4-input__inner--invalid:hover {border-color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959)); }.hi-v4-input--appearance-line .hi-v4-input__inner:not(.hi-v4-input__inner--disabled).hi-v4-input__inner--invalid.hi-v4-input__inner--focused {-webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-danger-100, var(--hi-v4-color-red-100, #ffd1c9));box-shadow: 0 0 0 2px var(--hi-v4-color-danger-100, var(--hi-v4-color-red-100, #ffd1c9)); }.hi-v4-input--appearance-line .hi-v4-input__prepend,.hi-v4-input--appearance-line .hi-v4-input__append {border-color: var(--hi-v4-color-gray-300, #dfe2e8); }.hi-v4-input--appearance-unset .hi-v4-input__text {padding-left: 0;padding-right: 0; }.hi-v4-input--appearance-unset.hi-v4-input__outer--prepend .hi-v4-input__text,.hi-v4-input--appearance-unset .hi-v4-input__inner--prefix .hi-v4-input__text {padding-left: calc(var(--hi-v4-spacing-6, 12px) - 1px); }.hi-v4-input--appearance-unset.hi-v4-input__outer--append .hi-v4-input__text,.hi-v4-input--appearance-unset .hi-v4-input__inner--suffix .hi-v4-input__text {padding-right: calc(var(--hi-v4-spacing-6, 12px) - 1px); }.hi-v4-input--appearance-unset .hi-v4-input__inner {border-radius: 0; }.hi-v4-input--appearance-filled .hi-v4-input__inner {background-color: var(--hi-v4-color-gray-100, #f2f4f7); }.hi-v4-input--appearance-filled .hi-v4-input__inner:not(.hi-v4-input__inner--disabled):hover {background-color: var(--hi-v4-color-static-white, #fff);border-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-input--appearance-filled .hi-v4-input__inner:not(.hi-v4-input__inner--disabled).hi-v4-input__inner--focused {-webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-primary-100, var(--hi-v4-color-brandblue-100, #bde2ff));box-shadow: 0 0 0 2px var(--hi-v4-color-primary-100, var(--hi-v4-color-brandblue-100, #bde2ff));border-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));background-color: var(--hi-v4-color-static-white, #fff); }.hi-v4-input--appearance-filled .hi-v4-input__inner:not(.hi-v4-input__inner--disabled).hi-v4-input__inner--invalid {border-color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959)); }.hi-v4-input--appearance-filled .hi-v4-input__inner:not(.hi-v4-input__inner--disabled).hi-v4-input__inner--invalid:hover {border-color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959)); }.hi-v4-input--appearance-filled .hi-v4-input__inner:not(.hi-v4-input__inner--disabled).hi-v4-input__inner--invalid.hi-v4-input__inner--focused {-webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-danger-100, var(--hi-v4-color-red-100, #ffd1c9));box-shadow: 0 0 0 2px var(--hi-v4-color-danger-100, var(--hi-v4-color-red-100, #ffd1c9)); }.hi-v4-input--appearance-underline .hi-v4-input__text {padding-left: 0;padding-right: 0; }.hi-v4-input--appearance-underline.hi-v4-input__outer--prepend .hi-v4-input__text,.hi-v4-input--appearance-underline .hi-v4-input__inner--prefix .hi-v4-input__text {padding-left: calc(var(--hi-v4-spacing-6, 12px) - 1px); }.hi-v4-input--appearance-underline.hi-v4-input__outer--append .hi-v4-input__text,.hi-v4-input--appearance-underline .hi-v4-input__inner--suffix .hi-v4-input__text {padding-right: calc(var(--hi-v4-spacing-6, 12px) - 1px); }.hi-v4-input--appearance-underline .hi-v4-input__inner {border-radius: 0; }.hi-v4-input--appearance-underline .hi-v4-input__inner::after {content: '';-webkit-box-sizing: border-box;box-sizing: border-box;display: block;position: absolute;bottom: 0;left: -1px;right: -1px;border-bottom: 1px solid var(--hi-v4-color-gray-300, #dfe2e8);-webkit-transition: all 0.3s;transition: all 0.3s; }.hi-v4-input--appearance-underline .hi-v4-input__inner:not(.hi-v4-input__inner--disabled):hover::after {border-bottom-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-input--appearance-underline .hi-v4-input__inner:not(.hi-v4-input__inner--disabled).hi-v4-input__inner--focused::after {border-bottom-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-input--appearance-underline .hi-v4-input__inner:not(.hi-v4-input__inner--disabled).hi-v4-input__inner--invalid::after {border-bottom-color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959)); }.hi-v4-input--appearance-underline .hi-v4-input__inner:not(.hi-v4-input__inner--disabled).hi-v4-input__inner--invalid.hover::after {border-bottom-color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959)); }.hi-v4-input--appearance-line .hi-v4-input__inner.hi-v4-input__inner--disabled, .hi-v4-input--appearance-filled .hi-v4-input__inner.hi-v4-input__inner--disabled {color: var(--hi-v4-color-gray-400, #c9ced6);background-color: var(--hi-v4-color-gray-100, #f2f4f7); }.hi-v4-input--appearance-line .hi-v4-input__inner.hi-v4-input__inner--disabled .hi-v4-input__text, .hi-v4-input--appearance-filled .hi-v4-input__inner.hi-v4-input__inner--disabled .hi-v4-input__text {color: var(--hi-v4-color-gray-400, #c9ced6); }.hi-v4-input--appearance-unset .hi-v4-input__inner.hi-v4-input__inner--disabled, .hi-v4-input--appearance-underline .hi-v4-input__inner.hi-v4-input__inner--disabled {color: var(--hi-v4-color-gray-400, #c9ced6);background-color: transparent; }.hi-v4-input--appearance-unset .hi-v4-input__inner.hi-v4-input__inner--disabled .hi-v4-input__text, .hi-v4-input--appearance-underline .hi-v4-input__inner.hi-v4-input__inner--disabled .hi-v4-input__text {color: var(--hi-v4-color-gray-400, #c9ced6); }.hi-v4-input__outer--prepend .hi-v4-input__inner {border-top-left-radius: 0;border-bottom-left-radius: 0; }.hi-v4-input__outer--prepend-unset .hi-v4-input__prepend {border: none;padding: 0; }.hi-v4-input__outer--prepend-unset .hi-v4-input__prepend .hi-v4-mock-input {border-top-right-radius: 0;border-bottom-right-radius: 0; }.hi-v4-input__outer--prepend-unset .hi-v4-input__prepend .hi-v4-button {border-top-right-radius: 0;border-bottom-right-radius: 0; }.hi-v4-input__outer--append .hi-v4-input__inner {border-top-right-radius: 0;border-bottom-right-radius: 0; }.hi-v4-input__outer--append-unset .hi-v4-input__append {border: none;padding: 0; }.hi-v4-input__outer--append-unset .hi-v4-input__append .hi-v4-mock-input {border-top-left-radius: 0;border-bottom-left-radius: 0; }.hi-v4-input__outer--append-unset .hi-v4-input__append .hi-v4-button {border-top-left-radius: 0;border-bottom-left-radius: 0; }";
12
12
 
13
13
  __styleInject__(css_248z);
14
14
 
package/lib/esm/use-input-cursor.js ADDED
@@ -0,0 +1,97 @@
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 { useState, useRef, useCallback } from 'react';
11
+ var defaultSeparator = ' ';
12
+
13
+ var useInputCursor = function useInputCursor(_ref) {
14
+ var inputElementRef = _ref.inputElementRef,
15
+ value = _ref.value,
16
+ formatter = _ref.formatter,
17
+ _ref$separator = _ref.separator,
18
+ separator = _ref$separator === void 0 ? defaultSeparator : _ref$separator;
19
+
20
+ var _useState = useState(0),
21
+ position = _useState[0],
22
+ setPosition = _useState[1];
23
+
24
+ var startPositionRef = useRef(0); // 记录值变化前的位置
25
+
26
+ var handleOnKeyDown = useCallback(function () {
27
+ var _a, _b;
28
+
29
+ startPositionRef.current = (_b = (_a = inputElementRef.current) === null || _a === void 0 ? void 0 : _a.selectionStart) !== null && _b !== void 0 ? _b : 0;
30
+ }, [inputElementRef]);
31
+ var handleChange = useCallback(function (evt) {
32
+ var _a, _b;
33
+
34
+ var val = evt.target.value; // 处理后的字符串
35
+
36
+ var str = typeof formatter === 'function' ? formatter(val) : val; // 光标变化后的位置
37
+
38
+ var endPosition = (_b = (_a = inputElementRef.current) === null || _a === void 0 ? void 0 : _a.selectionStart) !== null && _b !== void 0 ? _b : 0; // 字符串添加
39
+
40
+ if (str.length > value.length) {
41
+ // 值变化的长度
42
+ var len = str.length - value.length; // 取出变化的值
43
+
44
+ var addStr = str.substring(startPositionRef.current, startPositionRef.current + len); // 光标应该移动的格数
45
+
46
+ var step = getSeparatorNum(addStr, separator);
47
+ setPosition(endPosition + step);
48
+ } // 字符串删除
49
+
50
+
51
+ if (str.length < value.length) {
52
+ if (str.charAt(endPosition - 1) === separator) {
53
+ setPosition(endPosition - 1);
54
+ } else {
55
+ setPosition(endPosition);
56
+ }
57
+ } // 没有变化
58
+
59
+
60
+ if (str.length === value.length) {
61
+ if (str.charAt(startPositionRef.current) === separator) {
62
+ setPosition(endPosition + 1);
63
+ } else {
64
+ setPosition(endPosition);
65
+ }
66
+ }
67
+ }, [formatter, inputElementRef, separator, value.length]);
68
+ return {
69
+ position: position,
70
+ handleChange: handleChange,
71
+ handleOnKeyDown: handleOnKeyDown
72
+ };
73
+ };
74
+ /**
75
+ * 获取字符串中有多少格式化字符
76
+ * @param str
77
+ * @returns
78
+ */
79
+
80
+
81
+ var getSeparatorNum = function getSeparatorNum(str, separator) {
82
+ if (separator === void 0) {
83
+ separator = defaultSeparator;
84
+ }
85
+
86
+ var index = str.indexOf(separator);
87
+ var num = 0;
88
+
89
+ while (index !== -1) {
90
+ index = str.indexOf(separator, index + 1);
91
+ num++;
92
+ }
93
+
94
+ return num;
95
+ };
96
+
97
+ export { useInputCursor };
package/lib/esm/use-input.js CHANGED
@@ -7,12 +7,16 @@
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
- import { useCallback, useState, useMemo } from 'react';
10
+ import { useMemo, useCallback, useState, useEffect } from 'react';
11
11
  import { useUncontrolledState } from '@hi-ui/use-uncontrolled-state';
12
12
  import { useLatestCallback } from '@hi-ui/use-latest';
13
13
  import { setAttrStatus } from '@hi-ui/dom-utils';
14
- import { pure, format, formatAmount } from './utils/index.js';
15
- var EXTRA_TYPE = ['text', 'id', 'tel', 'card', 'amount', 'email'];
14
+ import { callAllFuncs } from '@hi-ui/func-utils';
15
+ import { format, pure, formatAmount } from './utils/index.js';
16
+ import { useInputCursor } from './use-input-cursor.js';
17
+ var EXTRA_TYPE = ['text', 'id', 'tel', 'card', 'amount', 'email']; // 需要格式化后校对光标的类型
18
+
19
+ var RESET_CURSOR_TYPE = ['id', 'tel', 'card'];
16
20
 
17
21
  var useInput = function useInput(_ref) {
18
22
  var name = _ref.name,
@@ -30,16 +34,33 @@ var useInput = function useInput(_ref) {
30
34
  onChange = _ref.onChange,
31
35
  onFocus = _ref.onFocus,
32
36
  onBlur = _ref.onBlur,
37
+ onKeyDown = _ref.onKeyDown,
33
38
  _ref$trimValueOnBlur = _ref.trimValueOnBlur,
34
39
  trimValueOnBlur = _ref$trimValueOnBlur === void 0 ? false : _ref$trimValueOnBlur,
35
40
  _ref$type = _ref.type,
36
41
  type = _ref$type === void 0 ? 'text' : _ref$type,
37
- clearElementRef = _ref.clearElementRef; // Object.is 避免 trimValueOnBlur 和 点击 clearIcon 触发 2 次相同的 onCHange
42
+ clearElementRef = _ref.clearElementRef,
43
+ inputElementRef = _ref.inputElementRef; // Object.is 避免 trimValueOnBlur 和 点击 clearIcon 触发 2 次相同的 onCHange
38
44
 
39
45
  var _useUncontrolledState = useUncontrolledState(defaultValue, valueProp, onChange, Object.is),
40
46
  value = _useUncontrolledState[0],
41
47
  tryChangeValue = _useUncontrolledState[1];
42
48
 
49
+ var _useInputCursor = useInputCursor({
50
+ inputElementRef: inputElementRef,
51
+ value: format(value, type)
52
+ }),
53
+ formatHandleChange = _useInputCursor.handleChange,
54
+ handleOnKeyDown = _useInputCursor.handleOnKeyDown,
55
+ position = _useInputCursor.position;
56
+ /**
57
+ * 修复值格式化时光标位置问题：https://github.com/XiaoMi/hiui/issues/2438
58
+ */
59
+
60
+
61
+ var needResetCursorPosition = useMemo(function () {
62
+ return RESET_CURSOR_TYPE.includes(type);
63
+ }, [type]);
43
64
  var handleChange = useCallback(function (evt, trim) {
44
65
  if (trim === void 0) {
45
66
  trim = false;
@@ -61,7 +82,8 @@ var useInput = function useInput(_ref) {
61
82
  value: value
62
83
  });
63
84
  tryChangeValue(valueTrue, event);
64
- }, [tryChangeValue, type]);
85
+ needResetCursorPosition && formatHandleChange(event);
86
+ }, [formatHandleChange, needResetCursorPosition, tryChangeValue, type]);
65
87
 
66
88
  var _useState = useState(autoFocus),
67
89
  focused = _useState[0],
@@ -107,9 +129,17 @@ var useInput = function useInput(_ref) {
107
129
  type: nativeType,
108
130
  onChange: handleChange,
109
131
  onFocus: handleFocus,
110
- onBlur: handleBlur
132
+ onBlur: handleBlur,
133
+ onKeyDown: needResetCursorPosition ? callAllFuncs(handleOnKeyDown, onKeyDown) : onKeyDown
111
134
  });
112
- }, [value, type, handleChange, handleFocus, handleBlur, nativeInputProps]);
135
+ }, [type, nativeInputProps, value, handleChange, handleFocus, handleBlur, needResetCursorPosition, handleOnKeyDown, onKeyDown]);
136
+ useEffect(function () {
137
+ // 满足以下条件时需要校对光标位置
138
+ if (needResetCursorPosition && inputElementRef.current) {
139
+ inputElementRef.current.selectionStart = position;
140
+ inputElementRef.current.selectionEnd = position;
141
+ }
142
+ }, [inputElementRef, needResetCursorPosition, position, type]);
113
143
  return {
114
144
  focused: focused,
115
145
  value: value,
package/lib/types/MockInput.d.ts CHANGED
@@ -3,7 +3,7 @@ import type { HiBaseAppearanceEnum, HiBaseDataItem, HiBaseHTMLFieldProps } from
3
3
  /**
4
4
  * 支持自定义渲染输入框内容，暂时仅供内部 Picker 类组件使用，不对外提供
5
5
  */
6
- export declare const MockInput: React.ForwardRefExoticComponent<Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "disabled" | "readOnly" | "placeholder" | "defaultValue" | "value" | "onChange" | "type" | "focused" | "onSelect" | "title" | "size" | "prefix" | "data" | "onClick" | "appearance" | "suffix" | "clearableTrigger" | "clearable" | "displayRender"> & {
6
+ export declare const MockInput: React.ForwardRefExoticComponent<Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "value" | "disabled" | "readOnly" | "placeholder" | "defaultValue" | "onChange" | "type" | "focused" | "onSelect" | "title" | "size" | "prefix" | "data" | "onClick" | "appearance" | "suffix" | "clearableTrigger" | "clearable" | "displayRender"> & {
7
7
  prefixCls?: string | undefined;
8
8
  role?: string | undefined;
9
9
  } & {
package/lib/types/index.d.ts CHANGED
@@ -2,5 +2,6 @@ import './styles/index.scss';
2
2
  export * from './Input';
3
3
  export { Input as default } from './Input';
4
4
  export * from './use-input';
5
+ export * from './use-input-cursor';
5
6
  export * from './MockInput';
6
7
  export * from './types';
package/lib/types/use-input-cursor.d.ts ADDED
@@ -0,0 +1,27 @@
1
+ import React, { MutableRefObject } from 'react';
2
+ export declare const useInputCursor: ({ inputElementRef, value, formatter, separator, }: UseInputCursorProps) => {
3
+ position: number;
4
+ handleChange: (evt: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
5
+ handleOnKeyDown: () => void;
6
+ };
7
+ export interface UseInputCursorProps {
8
+ /**
9
+ * 输入框 ref
10
+ */
11
+ inputElementRef: MutableRefObject<HTMLInputElement | null>;
12
+ /**
13
+ * 输入框变化前的值
14
+ */
15
+ value: string;
16
+ /**
17
+ * 格式化处理函数
18
+ * @param args
19
+ * @returns
20
+ */
21
+ formatter?: (...args: any[]) => string;
22
+ /**
23
+ * 间隔符
24
+ */
25
+ separator?: string;
26
+ }
27
+ export declare type useFormatReturn = ReturnType<typeof useInputCursor>;
package/lib/types/use-input.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import React from 'react';
2
- export declare const useInput: ({ name, autoFocus, disabled, readOnly, maxLength, placeholder, defaultValue, value: valueProp, onChange, onFocus, onBlur, trimValueOnBlur, type, clearElementRef, }: UseInputProps) => {
2
+ export declare const useInput: ({ name, autoFocus, disabled, readOnly, maxLength, placeholder, defaultValue, value: valueProp, onChange, onFocus, onBlur, onKeyDown, trimValueOnBlur, type, clearElementRef, inputElementRef, }: UseInputProps) => {
3
3
  focused: boolean;
4
4
  value: string;
5
5
  tryChangeValue: (stateOrFunction: React.SetStateAction<string>, ...args: any[]) => void;
@@ -9,6 +9,7 @@ export declare const useInput: ({ name, autoFocus, disabled, readOnly, maxLength
9
9
  onChange: (evt: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>, trim?: any) => void;
10
10
  onFocus: (evt: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
11
11
  onBlur: (event: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
12
+ onKeyDown: ((evt: React.KeyboardEvent<any>) => void) | ((...args: any) => void) | undefined;
12
13
  name: string | undefined;
13
14
  disabled: boolean;
14
15
  readOnly: boolean;
@@ -59,6 +60,10 @@ export interface UseInputProps {
59
60
  * 值改变时的回调
60
61
  */
61
62
  onChange?: (value: string, evt: React.ChangeEvent<any>) => void;
63
+ /**
64
+ * 输入框按下时的回调
65
+ */
66
+ onKeyDown?: (evt: React.KeyboardEvent<any>) => void;
62
67
  /**
63
68
  * 输入框聚焦时的回调
64
69
  */
@@ -75,5 +80,9 @@ export interface UseInputProps {
75
80
  * @private
76
81
  */
77
82
  clearElementRef?: any;
83
+ /**
84
+ * 输入框 ref
85
+ */
86
+ inputElementRef?: any;
78
87
  }
79
88
  export declare type useInputReturn = ReturnType<typeof useInput>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hi-ui/input",
3
- "version": "4.0.5",
3
+ "version": "4.0.7",
4
4
  "description": "A sub-package for @hi-ui/hiui.",
5
5
  "keywords": [],
6
6
  "author": "HiUI <mi-hiui@xiaomi.com>",
@@ -46,6 +46,7 @@
46
46
  "@hi-ui/classname": "^4.0.1",
47
47
  "@hi-ui/dom-utils": "^4.0.4",
48
48
  "@hi-ui/env": "^4.0.1",
49
+ "@hi-ui/func-utils": "^4.0.1",
49
50
  "@hi-ui/icons": "^4.0.4",
50
51
  "@hi-ui/use-latest": "^4.0.1",
51
52
  "@hi-ui/use-merge-refs": "^4.0.1",
@@ -62,6 +63,5 @@
62
63
  "@hi-ui/hi-build": "^4.0.1",
63
64
  "react": "^17.0.1",
64
65
  "react-dom": "^17.0.1"
65
- },
66
- "gitHead": "db81f4e6bffc562f26ab0655cb71ec160c5e2c22"
66
+ }
67
67
  }
package/LICENSE DELETED
@@ -1,21 +0,0 @@
1
- MIT License
2
-
3
- Copyright (c) 2018 Xiaomi
4
-
5
- Permission is hereby granted, free of charge, to any person obtaining a copy
6
- of this software and associated documentation files (the "Software"), to deal
7
- in the Software without restriction, including without limitation the rights
8
- to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
- copies of the Software, and to permit persons to whom the Software is
10
- furnished to do so, subject to the following conditions:
11
-
12
- The above copyright notice and this permission notice shall be included in all
13
- copies or substantial portions of the Software.
14
-
15
- THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
- IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
- FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
- AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
- LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
- OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
- SOFTWARE.