@semcore/input 3.0.6 → 3.0.9
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.
- package/CHANGELOG.md +18 -0
- package/README.md +2 -2
- package/lib/cjs/Input.js +24 -20
- package/lib/cjs/Input.js.map +1 -1
- package/lib/cjs/index.js.map +1 -1
- package/lib/cjs/style/input.shadow.css +1 -4
- package/lib/es6/Input.js +23 -20
- package/lib/es6/Input.js.map +1 -1
- package/lib/es6/index.js.map +1 -1
- package/lib/es6/style/input.shadow.css +1 -4
- package/package.json +1 -1
- package/src/Input.jsx +0 -97
- package/src/index.d.ts +0 -85
- package/src/index.js +0 -1
- package/src/style/input.shadow.css +0 -191
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,24 @@
|
|
|
2
2
|
|
|
3
3
|
CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
|
|
4
4
|
|
|
5
|
+
## [3.0.9] - 2022-07-22
|
|
6
|
+
|
|
7
|
+
### Changed
|
|
8
|
+
|
|
9
|
+
- Version patch update due to children dependencies update (`@semcore/utils` [3.34.0 ~> 3.35.0], `@semcore/flex-box` [4.5.6 ~> 4.5.7]).
|
|
10
|
+
|
|
11
|
+
## [3.0.8] - 2022-07-14
|
|
12
|
+
|
|
13
|
+
### Fixed
|
|
14
|
+
|
|
15
|
+
- Fixed the reaction when interacting with the keyboard for the correct work of other components with keyboard support.
|
|
16
|
+
|
|
17
|
+
## [3.0.7] - 2022-07-13
|
|
18
|
+
|
|
19
|
+
### Fixed
|
|
20
|
+
|
|
21
|
+
- Fixed applying style(border-radius) for outline.
|
|
22
|
+
|
|
5
23
|
## [3.0.6] - 2022-07-07
|
|
6
24
|
|
|
7
25
|
### Changed
|
package/README.md
CHANGED
|
@@ -42,12 +42,12 @@ of the components that is discussed below. There should only be one version of t
|
|
|
42
42
|
|
|
43
43
|
You can use the package the same way but without `/ui/` in the import path.
|
|
44
44
|
|
|
45
|
-
</details>
|
|
46
|
-
|
|
47
45
|
```jsx
|
|
48
46
|
import Input from '@semcore/input';
|
|
49
47
|
```
|
|
50
48
|
|
|
49
|
+
</details>
|
|
50
|
+
|
|
51
51
|
## 👤 Author
|
|
52
52
|
|
|
53
53
|
[UI-kit team](https://github.com/semrush/intergalactic/blob/master/MAINTAINERS) and [others ❤️](https://github.com/semrush/intergalactic/graphs/contributors)
|
package/lib/cjs/Input.js
CHANGED
|
@@ -33,6 +33,8 @@ var _neighborLocation = _interopRequireWildcard(require("@semcore/neighbor-locat
|
|
|
33
33
|
|
|
34
34
|
var _autoFocusEnhance = _interopRequireDefault(require("@semcore/utils/lib/enhances/autoFocusEnhance"));
|
|
35
35
|
|
|
36
|
+
var _keyboardFocusEnhance = _interopRequireDefault(require("@semcore/utils/lib/enhances/keyboardFocusEnhance"));
|
|
37
|
+
|
|
36
38
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
37
39
|
|
|
38
40
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
@@ -50,26 +52,26 @@ var style = (
|
|
|
50
52
|
/*__reshadow_css_start__*/
|
|
51
53
|
_core.sstyled.insert(
|
|
52
54
|
/*__inner_css_start__*/
|
|
53
|
-
".
|
|
55
|
+
".___SInput_1rrw0_gg_{display:inline-flex;width:100%;align-items:center;position:relative;z-index:0;vertical-align:middle;padding:1px;box-sizing:border-box}.___SInput_1rrw0_gg_ input:-webkit-autofill{border-radius:6px;-webkit-box-shadow:0 0 0 30px #faffbd inset}.___SInput_1rrw0_gg_ input:-webkit-autofill~.___SOutline_1rrw0_gg_{background-color:#faffbd}.___SValue_1rrw0_gg_{min-width:0;width:100%;height:100%;padding:0;border:none;box-sizing:border-box;color:#191b23;font-size:inherit;text-overflow:ellipsis;font-family:inherit;background:transparent}.___SValue_1rrw0_gg_:focus{outline:none}.___SValue_1rrw0_gg_::-moz-placeholder{color:#a9abb6}.___SValue_1rrw0_gg_:-ms-input-placeholder{color:#a9abb6}.___SValue_1rrw0_gg_::placeholder{color:#a9abb6}.___SValue_1rrw0_gg_:-moz-read-only~.___SOutline_1rrw0_gg_{background:#f4f5f9}.___SValue_1rrw0_gg_:read-only~.___SOutline_1rrw0_gg_{background:#f4f5f9}.___SValue_1rrw0_gg_:disabled{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;opacity:0.3}.___SValue_1rrw0_gg_:disabled~.___SOutline_1rrw0_gg_{opacity:0.3;cursor:default;pointer-events:none}.___SOutline_1rrw0_gg_{position:absolute;top:0;right:0;bottom:0;left:0;border:1px solid;border-radius:6px;z-index:-1;background:#fff}.___SAddon_1rrw0_gg_{display:inline-flex;justify-content:center;align-items:center;flex:0 0 auto;padding:0 8px;height:100%;color:#a9abb6}.___SAddon_1rrw0_gg_.__interactive_1rrw0_gg_{cursor:pointer}.___SAddon_1rrw0_gg_.__interactive_1rrw0_gg_:hover{color:#8a8e9b}.___SAddon_1rrw0_gg_.__disabled_1rrw0_gg_{opacity:0.3;cursor:default;pointer-events:none}.___SInput_1rrw0_gg_._size_m_1rrw0_gg_{font-size:14px;height:28px}.___SValue_1rrw0_gg_._size_l_1rrw0_gg_,.___SValue_1rrw0_gg_._size_m_1rrw0_gg_{padding:0 8px}.___SInput_1rrw0_gg_._size_l_1rrw0_gg_{font-size:16px;height:40px;padding-left:4px;padding-right:4px}.___SInput_1rrw0_gg_.__focused_1rrw0_gg_{z-index:1}.___SInput_1rrw0_gg_._state_normal_1rrw0_gg_ .___SOutline_1rrw0_gg_{border-color:#c4c7cf}.___SInput_1rrw0_gg_._state_normal_1rrw0_gg_ .___SValue_1rrw0_gg_:focus~.___SOutline_1rrw0_gg_{border-color:#008ff8;box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2)}.___SInput_1rrw0_gg_._state_valid_1rrw0_gg_ .___SOutline_1rrw0_gg_{border-color:#59ddaa}.___SInput_1rrw0_gg_._state_valid_1rrw0_gg_ .___SValue_1rrw0_gg_:focus~.___SOutline_1rrw0_gg_{border-color:#009f81;box-shadow:0px 0px 0px 3px rgba(0, 159, 129, 0.2)}.___SInput_1rrw0_gg_._state_invalid_1rrw0_gg_ .___SOutline_1rrw0_gg_{border-color:#ffaeb5}.___SInput_1rrw0_gg_._state_invalid_1rrw0_gg_ .___SValue_1rrw0_gg_:focus~.___SOutline_1rrw0_gg_{border-color:#ff4953;box-shadow:0px 0px 0px 3px rgba(255, 73, 83, 0.2)}.___SInput_1rrw0_gg_._neighborLocation_right_1rrw0_gg_ .___SOutline_1rrw0_gg_{border-top-right-radius:0;border-bottom-right-radius:0}.___SInput_1rrw0_gg_._neighborLocation_both_1rrw0_gg_ .___SOutline_1rrw0_gg_{border-radius:0;border-left:none}.___SInput_1rrw0_gg_._neighborLocation_left_1rrw0_gg_ .___SOutline_1rrw0_gg_{border-top-left-radius:0;border-bottom-left-radius:0;border-left:none}.___SAddon_1rrw0_gg_._neighborLocation_right_1rrw0_gg_{padding-right:8px}.___SAddon_1rrw0_gg_._neighborLocation_left_1rrw0_gg_{padding-left:8px}.___SValue_1rrw0_gg_._neighborLocation_right_1rrw0_gg_{padding-right:0}.___SValue_1rrw0_gg_._neighborLocation_both_1rrw0_gg_{padding-left:0;padding-right:0}.___SValue_1rrw0_gg_._neighborLocation_left_1rrw0_gg_{padding-left:0}"
|
|
54
56
|
/*__inner_css_end__*/
|
|
55
|
-
, "
|
|
57
|
+
, "1rrw0_gg_")
|
|
56
58
|
/*__reshadow_css_end__*/
|
|
57
59
|
, {
|
|
58
|
-
"__SInput": "
|
|
59
|
-
"__SOutline": "
|
|
60
|
-
"__SValue": "
|
|
61
|
-
"__SAddon": "
|
|
62
|
-
"_interactive": "
|
|
63
|
-
"_disabled": "
|
|
64
|
-
"_size_m": "
|
|
65
|
-
"_size_l": "
|
|
66
|
-
"_focused": "
|
|
67
|
-
"_state_normal": "
|
|
68
|
-
"_state_valid": "
|
|
69
|
-
"_state_invalid": "
|
|
70
|
-
"_neighborLocation_right": "
|
|
71
|
-
"_neighborLocation_both": "
|
|
72
|
-
"_neighborLocation_left": "
|
|
60
|
+
"__SInput": "___SInput_1rrw0_gg_",
|
|
61
|
+
"__SOutline": "___SOutline_1rrw0_gg_",
|
|
62
|
+
"__SValue": "___SValue_1rrw0_gg_",
|
|
63
|
+
"__SAddon": "___SAddon_1rrw0_gg_",
|
|
64
|
+
"_interactive": "__interactive_1rrw0_gg_",
|
|
65
|
+
"_disabled": "__disabled_1rrw0_gg_",
|
|
66
|
+
"_size_m": "_size_m_1rrw0_gg_",
|
|
67
|
+
"_size_l": "_size_l_1rrw0_gg_",
|
|
68
|
+
"_focused": "__focused_1rrw0_gg_",
|
|
69
|
+
"_state_normal": "_state_normal_1rrw0_gg_",
|
|
70
|
+
"_state_valid": "_state_valid_1rrw0_gg_",
|
|
71
|
+
"_state_invalid": "_state_invalid_1rrw0_gg_",
|
|
72
|
+
"_neighborLocation_right": "_neighborLocation_right_1rrw0_gg_",
|
|
73
|
+
"_neighborLocation_both": "_neighborLocation_both_1rrw0_gg_",
|
|
74
|
+
"_neighborLocation_left": "_neighborLocation_left_1rrw0_gg_"
|
|
73
75
|
});
|
|
74
76
|
|
|
75
77
|
var Input = /*#__PURE__*/function (_Component) {
|
|
@@ -90,10 +92,12 @@ var Input = /*#__PURE__*/function (_Component) {
|
|
|
90
92
|
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "state", {
|
|
91
93
|
focused: false
|
|
92
94
|
});
|
|
93
|
-
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "inputRef", _react["default"].createRef());
|
|
95
|
+
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "inputRef", /*#__PURE__*/_react["default"].createRef());
|
|
94
96
|
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleMouseDownAddon", function (e) {
|
|
97
|
+
var _this$inputRef$curren;
|
|
98
|
+
|
|
95
99
|
e.preventDefault();
|
|
96
|
-
_this.inputRef.current
|
|
100
|
+
(_this$inputRef$curren = _this.inputRef.current) === null || _this$inputRef$curren === void 0 ? void 0 : _this$inputRef$curren.focus();
|
|
97
101
|
});
|
|
98
102
|
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "bindHandlerValueFocused", function (focused) {
|
|
99
103
|
return function () {
|
|
@@ -197,7 +201,7 @@ var Value = /*#__PURE__*/function (_Component2) {
|
|
|
197
201
|
(0, _defineProperty2["default"])(Value, "defaultProps", {
|
|
198
202
|
defaultValue: ''
|
|
199
203
|
});
|
|
200
|
-
(0, _defineProperty2["default"])(Value, "enhance", [(0, _autoFocusEnhance["default"])(), (0, _neighborLocation.neighborLocationEnhance)()]);
|
|
204
|
+
(0, _defineProperty2["default"])(Value, "enhance", [(0, _keyboardFocusEnhance["default"])(), (0, _autoFocusEnhance["default"])(), (0, _neighborLocation.neighborLocationEnhance)()]);
|
|
201
205
|
|
|
202
206
|
function Addon(props) {
|
|
203
207
|
var _ref3 = arguments[0],
|
package/lib/cjs/Input.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"Input.js","names":["Input","focused","React","createRef","e","preventDefault","inputRef","current","focus","setState","disabled","asProps","onMouseDown","handleMouseDownAddon","size","ref","onFocus","bindHandlerValueFocused","onBlur","SInput","Box","SOutline","Children","styles","controlsLength","state","sstyled","Component","style","neighborLocationEnhance","Value","value","target","SValue","defaultValue","keyboardFocusEnhance","autoFocusEnhance","Addon","props","SAddon","enhance","createComponent"],"sources":["../../src/Input.jsx"],"sourcesContent":["import React from 'react';\nimport createComponent, { Component, sstyled, Root } from '@semcore/core';\nimport { Box } from '@semcore/flex-box';\nimport NeighborLocation, { neighborLocationEnhance } from '@semcore/neighbor-location';\nimport autoFocusEnhance from '@semcore/utils/lib/enhances/autoFocusEnhance';\nimport keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\n\nimport style from './style/input.shadow.css';\n\nclass Input extends Component {\n static displayName = 'Input';\n\n static defaultProps = {\n size: 'm',\n state: 'normal',\n };\n static style = style;\n static enhance = [neighborLocationEnhance()];\n\n state = {\n focused: false,\n };\n\n inputRef = React.createRef();\n\n handleMouseDownAddon = (e) => {\n e.preventDefault();\n this.inputRef.current?.focus();\n };\n\n bindHandlerValueFocused = (focused) => () => this.setState({ focused });\n\n getAddonProps() {\n const { disabled } = this.asProps;\n return {\n disabled,\n onMouseDown: this.handleMouseDownAddon,\n };\n }\n\n getValueProps() {\n const { size, disabled } = this.asProps;\n return {\n ref: this.inputRef,\n size,\n disabled,\n onFocus: this.bindHandlerValueFocused(true),\n onBlur: this.bindHandlerValueFocused(false),\n };\n }\n\n render() {\n const SInput = Root;\n const SOutline = 'div';\n const { Children, styles, controlsLength } = this.asProps;\n const { focused } = this.state;\n\n return sstyled(styles)(\n <SInput render={Box} focused={focused}>\n <NeighborLocation controlsLength={controlsLength}>\n <Children />\n </NeighborLocation>\n <SOutline />\n </SInput>,\n );\n }\n}\n\nclass Value extends Component {\n static defaultProps = {\n defaultValue: '',\n };\n static enhance = [keyboardFocusEnhance(), autoFocusEnhance(), neighborLocationEnhance()];\n\n uncontrolledProps() {\n return {\n value: (e) => e.target.value,\n };\n }\n\n render() {\n const SValue = Root;\n\n return sstyled(this.asProps.styles)(<SValue render={Box} tag=\"input\" type=\"text\" />);\n }\n}\n\nfunction Addon(props) {\n const SAddon = Root;\n return sstyled(props.styles)(<SAddon render={Box} />);\n}\n\nAddon.enhance = [neighborLocationEnhance()];\n\nexport default createComponent(Input, {\n Addon,\n Value,\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AACA;;AADA;;AAEA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAIMA,K;;;;;;;;;;;;;;;8FAUI;MACNC,OAAO,EAAE;IADH,C;8GAIGC,iBAAA,CAAMC,SAAN,E;6GAEY,UAACC,CAAD,EAAO;MAAA;;MAC5BA,CAAC,CAACC,cAAF;MACA,+BAAKC,QAAL,CAAcC,OAAd,gFAAuBC,KAAvB;IACD,C;gHAEyB,UAACP,OAAD;MAAA,OAAa;QAAA,OAAM,MAAKQ,QAAL,CAAc;UAAER,OAAO,EAAPA;QAAF,CAAd,CAAN;MAAA,CAAb;IAAA,C;;;;;;WAE1B,yBAAgB;MACd,IAAQS,QAAR,GAAqB,KAAKC,OAA1B,CAAQD,QAAR;MACA,OAAO;QACLA,QAAQ,EAARA,QADK;QAELE,WAAW,EAAE,KAAKC;MAFb,CAAP;IAID;;;WAED,yBAAgB;MACd,oBAA2B,KAAKF,OAAhC;MAAA,IAAQG,IAAR,iBAAQA,IAAR;MAAA,IAAcJ,QAAd,iBAAcA,QAAd;MACA,OAAO;QACLK,GAAG,EAAE,KAAKT,QADL;QAELQ,IAAI,EAAJA,IAFK;QAGLJ,QAAQ,EAARA,QAHK;QAILM,OAAO,EAAE,KAAKC,uBAAL,CAA6B,IAA7B,CAJJ;QAKLC,MAAM,EAAE,KAAKD,uBAAL,CAA6B,KAA7B;MALH,CAAP;IAOD;;;WAED,kBAAS;MAAA;MAAA;;MACP,IAAME,MAAM,GAMMC,YANlB;MACA,IAAMC,QAAQ,GAAG,KAAjB;MACA,qBAA6C,KAAKV,OAAlD;MAAA,IAAQW,QAAR,kBAAQA,QAAR;MAAA,IAAkBC,MAAlB,kBAAkBA,MAAlB;MAAA,IAA0BC,cAA1B,kBAA0BA,cAA1B;MACA,IAAQvB,OAAR,GAAoB,KAAKwB,KAAzB,CAAQxB,OAAR;MAEA,eAAO,IAAAyB,aAAA,EAAQH,MAAR,CAAP,eACE,gCAAC,MAAD;QAAA,WAA8BtB;MAA9B,yBACE,gCAAC,4BAAD;QAAA,kBAAkCuB;MAAlC,iBACE,gCAAC,QAAD,2BADF,CADF,eAIE,gCAAC,QAAD,2BAJF,CADF;IAQD;;;EAxDiBG,e;;iCAAd3B,K,iBACiB,O;iCADjBA,K,kBAGkB;EACpBc,IAAI,EAAE,GADc;EAEpBW,KAAK,EAAE;AAFa,C;iCAHlBzB,K,WAOW4B,K;iCAPX5B,K,aAQa,CAAC,IAAA6B,yCAAA,GAAD,C;;IAmDbC,K;;;;;;;;;;;;WAMJ,6BAAoB;MAClB,OAAO;QACLC,KAAK,EAAE,eAAC3B,CAAD;UAAA,OAAOA,CAAC,CAAC4B,MAAF,CAASD,KAAhB;QAAA;MADF,CAAP;IAGD;;;WAED,kBAAS;MAAA;MAAA;;MACP,IAAME,MAAM,GAEwCb,YAFpD;MAEA,eAAO,IAAAM,aAAA,EAAQ,KAAKf,OAAL,CAAaY,MAArB,CAAP,eAAoC,gCAAC,MAAD;QAAA,OAAyB,OAAzB;QAAA,QAAsC;MAAtC,YAApC;IACD;;;EAhBiBI,e;;iCAAdG,K,kBACkB;EACpBI,YAAY,EAAE;AADM,C;iCADlBJ,K,aAIa,CAAC,IAAAK,gCAAA,GAAD,EAAyB,IAAAC,4BAAA,GAAzB,EAA6C,IAAAP,yCAAA,GAA7C,C;;AAenB,SAASQ,KAAT,CAAeC,KAAf,EAAsB;EAAA;EAAA;;EACpB,IAAMC,MAAM,GACiCnB,YAD7C;EACA,eAAO,IAAAM,aAAA,EAAQY,KAAK,CAACf,MAAd,CAAP,eAA6B,gCAAC,MAAD,2EAA7B;AACD;;AAEDc,KAAK,CAACG,OAAN,GAAgB,CAAC,IAAAX,yCAAA,GAAD,CAAhB;;eAEe,IAAAY,gBAAA,EAAgBzC,KAAhB,EAAuB;EACpCqC,KAAK,EAALA,KADoC;EAEpCP,KAAK,EAALA;AAFoC,CAAvB,C"}
|
package/lib/cjs/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../src/index.js"],"sourcesContent":["export { default } from './Input';\n"],"mappings":";;;;;;;;;;;;;;AAAA"}
|
|
@@ -18,10 +18,6 @@ SInput {
|
|
|
18
18
|
background-color: rgb(250, 255, 189);
|
|
19
19
|
}
|
|
20
20
|
}
|
|
21
|
-
|
|
22
|
-
& SOutline {
|
|
23
|
-
border-radius: var(--rounded-m);
|
|
24
|
-
}
|
|
25
21
|
}
|
|
26
22
|
|
|
27
23
|
SValue {
|
|
@@ -69,6 +65,7 @@ SOutline {
|
|
|
69
65
|
bottom: 0;
|
|
70
66
|
left: 0;
|
|
71
67
|
border: 1px solid;
|
|
68
|
+
border-radius: var(--rounded-m);
|
|
72
69
|
z-index: -1;
|
|
73
70
|
background: #fff;
|
|
74
71
|
}
|
package/lib/es6/Input.js
CHANGED
|
@@ -23,32 +23,33 @@ import createComponent, { Component, sstyled, Root } from '@semcore/core';
|
|
|
23
23
|
import { Box } from '@semcore/flex-box';
|
|
24
24
|
import NeighborLocation, { neighborLocationEnhance } from '@semcore/neighbor-location';
|
|
25
25
|
import autoFocusEnhance from '@semcore/utils/lib/enhances/autoFocusEnhance';
|
|
26
|
+
import keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
|
|
26
27
|
|
|
27
28
|
/*__reshadow-styles__:"./style/input.shadow.css"*/
|
|
28
29
|
var style = (
|
|
29
30
|
/*__reshadow_css_start__*/
|
|
30
31
|
_sstyled.insert(
|
|
31
32
|
/*__inner_css_start__*/
|
|
32
|
-
".
|
|
33
|
+
".___SInput_1rrw0_gg_{display:inline-flex;width:100%;align-items:center;position:relative;z-index:0;vertical-align:middle;padding:1px;box-sizing:border-box}.___SInput_1rrw0_gg_ input:-webkit-autofill{border-radius:6px;-webkit-box-shadow:0 0 0 30px #faffbd inset}.___SInput_1rrw0_gg_ input:-webkit-autofill~.___SOutline_1rrw0_gg_{background-color:#faffbd}.___SValue_1rrw0_gg_{min-width:0;width:100%;height:100%;padding:0;border:none;box-sizing:border-box;color:#191b23;font-size:inherit;text-overflow:ellipsis;font-family:inherit;background:transparent}.___SValue_1rrw0_gg_:focus{outline:none}.___SValue_1rrw0_gg_::-moz-placeholder{color:#a9abb6}.___SValue_1rrw0_gg_:-ms-input-placeholder{color:#a9abb6}.___SValue_1rrw0_gg_::placeholder{color:#a9abb6}.___SValue_1rrw0_gg_:-moz-read-only~.___SOutline_1rrw0_gg_{background:#f4f5f9}.___SValue_1rrw0_gg_:read-only~.___SOutline_1rrw0_gg_{background:#f4f5f9}.___SValue_1rrw0_gg_:disabled{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;opacity:0.3}.___SValue_1rrw0_gg_:disabled~.___SOutline_1rrw0_gg_{opacity:0.3;cursor:default;pointer-events:none}.___SOutline_1rrw0_gg_{position:absolute;top:0;right:0;bottom:0;left:0;border:1px solid;border-radius:6px;z-index:-1;background:#fff}.___SAddon_1rrw0_gg_{display:inline-flex;justify-content:center;align-items:center;flex:0 0 auto;padding:0 8px;height:100%;color:#a9abb6}.___SAddon_1rrw0_gg_.__interactive_1rrw0_gg_{cursor:pointer}.___SAddon_1rrw0_gg_.__interactive_1rrw0_gg_:hover{color:#8a8e9b}.___SAddon_1rrw0_gg_.__disabled_1rrw0_gg_{opacity:0.3;cursor:default;pointer-events:none}.___SInput_1rrw0_gg_._size_m_1rrw0_gg_{font-size:14px;height:28px}.___SValue_1rrw0_gg_._size_l_1rrw0_gg_,.___SValue_1rrw0_gg_._size_m_1rrw0_gg_{padding:0 8px}.___SInput_1rrw0_gg_._size_l_1rrw0_gg_{font-size:16px;height:40px;padding-left:4px;padding-right:4px}.___SInput_1rrw0_gg_.__focused_1rrw0_gg_{z-index:1}.___SInput_1rrw0_gg_._state_normal_1rrw0_gg_ .___SOutline_1rrw0_gg_{border-color:#c4c7cf}.___SInput_1rrw0_gg_._state_normal_1rrw0_gg_ .___SValue_1rrw0_gg_:focus~.___SOutline_1rrw0_gg_{border-color:#008ff8;box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2)}.___SInput_1rrw0_gg_._state_valid_1rrw0_gg_ .___SOutline_1rrw0_gg_{border-color:#59ddaa}.___SInput_1rrw0_gg_._state_valid_1rrw0_gg_ .___SValue_1rrw0_gg_:focus~.___SOutline_1rrw0_gg_{border-color:#009f81;box-shadow:0px 0px 0px 3px rgba(0, 159, 129, 0.2)}.___SInput_1rrw0_gg_._state_invalid_1rrw0_gg_ .___SOutline_1rrw0_gg_{border-color:#ffaeb5}.___SInput_1rrw0_gg_._state_invalid_1rrw0_gg_ .___SValue_1rrw0_gg_:focus~.___SOutline_1rrw0_gg_{border-color:#ff4953;box-shadow:0px 0px 0px 3px rgba(255, 73, 83, 0.2)}.___SInput_1rrw0_gg_._neighborLocation_right_1rrw0_gg_ .___SOutline_1rrw0_gg_{border-top-right-radius:0;border-bottom-right-radius:0}.___SInput_1rrw0_gg_._neighborLocation_both_1rrw0_gg_ .___SOutline_1rrw0_gg_{border-radius:0;border-left:none}.___SInput_1rrw0_gg_._neighborLocation_left_1rrw0_gg_ .___SOutline_1rrw0_gg_{border-top-left-radius:0;border-bottom-left-radius:0;border-left:none}.___SAddon_1rrw0_gg_._neighborLocation_right_1rrw0_gg_{padding-right:8px}.___SAddon_1rrw0_gg_._neighborLocation_left_1rrw0_gg_{padding-left:8px}.___SValue_1rrw0_gg_._neighborLocation_right_1rrw0_gg_{padding-right:0}.___SValue_1rrw0_gg_._neighborLocation_both_1rrw0_gg_{padding-left:0;padding-right:0}.___SValue_1rrw0_gg_._neighborLocation_left_1rrw0_gg_{padding-left:0}"
|
|
33
34
|
/*__inner_css_end__*/
|
|
34
|
-
, "
|
|
35
|
+
, "1rrw0_gg_")
|
|
35
36
|
/*__reshadow_css_end__*/
|
|
36
37
|
, {
|
|
37
|
-
"__SInput": "
|
|
38
|
-
"__SOutline": "
|
|
39
|
-
"__SValue": "
|
|
40
|
-
"__SAddon": "
|
|
41
|
-
"_interactive": "
|
|
42
|
-
"_disabled": "
|
|
43
|
-
"_size_m": "
|
|
44
|
-
"_size_l": "
|
|
45
|
-
"_focused": "
|
|
46
|
-
"_state_normal": "
|
|
47
|
-
"_state_valid": "
|
|
48
|
-
"_state_invalid": "
|
|
49
|
-
"_neighborLocation_right": "
|
|
50
|
-
"_neighborLocation_both": "
|
|
51
|
-
"_neighborLocation_left": "
|
|
38
|
+
"__SInput": "___SInput_1rrw0_gg_",
|
|
39
|
+
"__SOutline": "___SOutline_1rrw0_gg_",
|
|
40
|
+
"__SValue": "___SValue_1rrw0_gg_",
|
|
41
|
+
"__SAddon": "___SAddon_1rrw0_gg_",
|
|
42
|
+
"_interactive": "__interactive_1rrw0_gg_",
|
|
43
|
+
"_disabled": "__disabled_1rrw0_gg_",
|
|
44
|
+
"_size_m": "_size_m_1rrw0_gg_",
|
|
45
|
+
"_size_l": "_size_l_1rrw0_gg_",
|
|
46
|
+
"_focused": "__focused_1rrw0_gg_",
|
|
47
|
+
"_state_normal": "_state_normal_1rrw0_gg_",
|
|
48
|
+
"_state_valid": "_state_valid_1rrw0_gg_",
|
|
49
|
+
"_state_invalid": "_state_invalid_1rrw0_gg_",
|
|
50
|
+
"_neighborLocation_right": "_neighborLocation_right_1rrw0_gg_",
|
|
51
|
+
"_neighborLocation_both": "_neighborLocation_both_1rrw0_gg_",
|
|
52
|
+
"_neighborLocation_left": "_neighborLocation_left_1rrw0_gg_"
|
|
52
53
|
});
|
|
53
54
|
|
|
54
55
|
var Input = /*#__PURE__*/function (_Component) {
|
|
@@ -71,11 +72,13 @@ var Input = /*#__PURE__*/function (_Component) {
|
|
|
71
72
|
focused: false
|
|
72
73
|
});
|
|
73
74
|
|
|
74
|
-
_defineProperty(_assertThisInitialized(_this), "inputRef", React.createRef());
|
|
75
|
+
_defineProperty(_assertThisInitialized(_this), "inputRef", /*#__PURE__*/React.createRef());
|
|
75
76
|
|
|
76
77
|
_defineProperty(_assertThisInitialized(_this), "handleMouseDownAddon", function (e) {
|
|
78
|
+
var _this$inputRef$curren;
|
|
79
|
+
|
|
77
80
|
e.preventDefault();
|
|
78
|
-
_this.inputRef.current
|
|
81
|
+
(_this$inputRef$curren = _this.inputRef.current) === null || _this$inputRef$curren === void 0 ? void 0 : _this$inputRef$curren.focus();
|
|
79
82
|
});
|
|
80
83
|
|
|
81
84
|
_defineProperty(_assertThisInitialized(_this), "bindHandlerValueFocused", function (focused) {
|
|
@@ -188,7 +191,7 @@ _defineProperty(Value, "defaultProps", {
|
|
|
188
191
|
defaultValue: ''
|
|
189
192
|
});
|
|
190
193
|
|
|
191
|
-
_defineProperty(Value, "enhance", [autoFocusEnhance(), neighborLocationEnhance()]);
|
|
194
|
+
_defineProperty(Value, "enhance", [keyboardFocusEnhance(), autoFocusEnhance(), neighborLocationEnhance()]);
|
|
192
195
|
|
|
193
196
|
function Addon(props) {
|
|
194
197
|
var _ref3 = arguments[0],
|
package/lib/es6/Input.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"Input.js","names":["React","createComponent","Component","sstyled","Root","Box","NeighborLocation","neighborLocationEnhance","autoFocusEnhance","keyboardFocusEnhance","Input","focused","createRef","e","preventDefault","inputRef","current","focus","setState","disabled","asProps","onMouseDown","handleMouseDownAddon","size","ref","onFocus","bindHandlerValueFocused","onBlur","SInput","SOutline","Children","styles","controlsLength","state","style","Value","value","target","SValue","defaultValue","Addon","props","SAddon","enhance"],"sources":["../../src/Input.jsx"],"sourcesContent":["import React from 'react';\nimport createComponent, { Component, sstyled, Root } from '@semcore/core';\nimport { Box } from '@semcore/flex-box';\nimport NeighborLocation, { neighborLocationEnhance } from '@semcore/neighbor-location';\nimport autoFocusEnhance from '@semcore/utils/lib/enhances/autoFocusEnhance';\nimport keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\n\nimport style from './style/input.shadow.css';\n\nclass Input extends Component {\n static displayName = 'Input';\n\n static defaultProps = {\n size: 'm',\n state: 'normal',\n };\n static style = style;\n static enhance = [neighborLocationEnhance()];\n\n state = {\n focused: false,\n };\n\n inputRef = React.createRef();\n\n handleMouseDownAddon = (e) => {\n e.preventDefault();\n this.inputRef.current?.focus();\n };\n\n bindHandlerValueFocused = (focused) => () => this.setState({ focused });\n\n getAddonProps() {\n const { disabled } = this.asProps;\n return {\n disabled,\n onMouseDown: this.handleMouseDownAddon,\n };\n }\n\n getValueProps() {\n const { size, disabled } = this.asProps;\n return {\n ref: this.inputRef,\n size,\n disabled,\n onFocus: this.bindHandlerValueFocused(true),\n onBlur: this.bindHandlerValueFocused(false),\n };\n }\n\n render() {\n const SInput = Root;\n const SOutline = 'div';\n const { Children, styles, controlsLength } = this.asProps;\n const { focused } = this.state;\n\n return sstyled(styles)(\n <SInput render={Box} focused={focused}>\n <NeighborLocation controlsLength={controlsLength}>\n <Children />\n </NeighborLocation>\n <SOutline />\n </SInput>,\n );\n }\n}\n\nclass Value extends Component {\n static defaultProps = {\n defaultValue: '',\n };\n static enhance = [keyboardFocusEnhance(), autoFocusEnhance(), neighborLocationEnhance()];\n\n uncontrolledProps() {\n return {\n value: (e) => e.target.value,\n };\n }\n\n render() {\n const SValue = Root;\n\n return sstyled(this.asProps.styles)(<SValue render={Box} tag=\"input\" type=\"text\" />);\n }\n}\n\nfunction Addon(props) {\n const SAddon = Root;\n return sstyled(props.styles)(<SAddon render={Box} />);\n}\n\nAddon.enhance = [neighborLocationEnhance()];\n\nexport default createComponent(Input, {\n Addon,\n Value,\n});\n"],"mappings":"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"}
|
package/lib/es6/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"index.js","names":["default"],"sources":["../../src/index.js"],"sourcesContent":["export { default } from './Input';\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,SAAxB"}
|
|
@@ -18,10 +18,6 @@ SInput {
|
|
|
18
18
|
background-color: rgb(250, 255, 189);
|
|
19
19
|
}
|
|
20
20
|
}
|
|
21
|
-
|
|
22
|
-
& SOutline {
|
|
23
|
-
border-radius: var(--rounded-m);
|
|
24
|
-
}
|
|
25
21
|
}
|
|
26
22
|
|
|
27
23
|
SValue {
|
|
@@ -69,6 +65,7 @@ SOutline {
|
|
|
69
65
|
bottom: 0;
|
|
70
66
|
left: 0;
|
|
71
67
|
border: 1px solid;
|
|
68
|
+
border-radius: var(--rounded-m);
|
|
72
69
|
z-index: -1;
|
|
73
70
|
background: #fff;
|
|
74
71
|
}
|
package/package.json
CHANGED
package/src/Input.jsx
DELETED
|
@@ -1,97 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import createComponent, { Component, sstyled, Root } from '@semcore/core';
|
|
3
|
-
import { Box } from '@semcore/flex-box';
|
|
4
|
-
import NeighborLocation, { neighborLocationEnhance } from '@semcore/neighbor-location';
|
|
5
|
-
import autoFocusEnhance from '@semcore/utils/lib/enhances/autoFocusEnhance';
|
|
6
|
-
|
|
7
|
-
import style from './style/input.shadow.css';
|
|
8
|
-
|
|
9
|
-
class Input extends Component {
|
|
10
|
-
static displayName = 'Input';
|
|
11
|
-
|
|
12
|
-
static defaultProps = {
|
|
13
|
-
size: 'm',
|
|
14
|
-
state: 'normal',
|
|
15
|
-
};
|
|
16
|
-
static style = style;
|
|
17
|
-
static enhance = [neighborLocationEnhance()];
|
|
18
|
-
|
|
19
|
-
state = {
|
|
20
|
-
focused: false,
|
|
21
|
-
};
|
|
22
|
-
|
|
23
|
-
inputRef = React.createRef();
|
|
24
|
-
|
|
25
|
-
handleMouseDownAddon = (e) => {
|
|
26
|
-
e.preventDefault();
|
|
27
|
-
this.inputRef.current?.focus();
|
|
28
|
-
};
|
|
29
|
-
|
|
30
|
-
bindHandlerValueFocused = (focused) => () => this.setState({ focused });
|
|
31
|
-
|
|
32
|
-
getAddonProps() {
|
|
33
|
-
const { disabled } = this.asProps;
|
|
34
|
-
return {
|
|
35
|
-
disabled,
|
|
36
|
-
onMouseDown: this.handleMouseDownAddon,
|
|
37
|
-
};
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
getValueProps() {
|
|
41
|
-
const { size, disabled } = this.asProps;
|
|
42
|
-
return {
|
|
43
|
-
ref: this.inputRef,
|
|
44
|
-
size,
|
|
45
|
-
disabled,
|
|
46
|
-
onFocus: this.bindHandlerValueFocused(true),
|
|
47
|
-
onBlur: this.bindHandlerValueFocused(false),
|
|
48
|
-
};
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
render() {
|
|
52
|
-
const SInput = Root;
|
|
53
|
-
const SOutline = 'div';
|
|
54
|
-
const { Children, styles, controlsLength } = this.asProps;
|
|
55
|
-
const { focused } = this.state;
|
|
56
|
-
|
|
57
|
-
return sstyled(styles)(
|
|
58
|
-
<SInput render={Box} focused={focused}>
|
|
59
|
-
<NeighborLocation controlsLength={controlsLength}>
|
|
60
|
-
<Children />
|
|
61
|
-
</NeighborLocation>
|
|
62
|
-
<SOutline />
|
|
63
|
-
</SInput>,
|
|
64
|
-
);
|
|
65
|
-
}
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
class Value extends Component {
|
|
69
|
-
static defaultProps = {
|
|
70
|
-
defaultValue: '',
|
|
71
|
-
};
|
|
72
|
-
static enhance = [autoFocusEnhance(), neighborLocationEnhance()];
|
|
73
|
-
|
|
74
|
-
uncontrolledProps() {
|
|
75
|
-
return {
|
|
76
|
-
value: (e) => e.target.value,
|
|
77
|
-
};
|
|
78
|
-
}
|
|
79
|
-
|
|
80
|
-
render() {
|
|
81
|
-
const SValue = Root;
|
|
82
|
-
|
|
83
|
-
return sstyled(this.asProps.styles)(<SValue render={Box} tag="input" type="text" />);
|
|
84
|
-
}
|
|
85
|
-
}
|
|
86
|
-
|
|
87
|
-
function Addon(props) {
|
|
88
|
-
const SAddon = Root;
|
|
89
|
-
return sstyled(props.styles)(<SAddon render={Box} />);
|
|
90
|
-
}
|
|
91
|
-
|
|
92
|
-
Addon.enhance = [neighborLocationEnhance()];
|
|
93
|
-
|
|
94
|
-
export default createComponent(Input, {
|
|
95
|
-
Addon,
|
|
96
|
-
Value,
|
|
97
|
-
});
|
package/src/index.d.ts
DELETED
|
@@ -1,85 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { PropGetterFn } from '@semcore/core';
|
|
3
|
-
import { IBoxProps } from '@semcore/flex-box';
|
|
4
|
-
import { INeighborItemProps, INeighborLocationProps } from '@semcore/neighbor-location';
|
|
5
|
-
import { IWithAutoFocusEnhanceProps } from '@semcore/utils/lib/enhances/autoFocusEnhance';
|
|
6
|
-
|
|
7
|
-
/* utils type */
|
|
8
|
-
type CProps<Props, Ctx = {}, UCProps = {}> = Props & {
|
|
9
|
-
children?: ((props: Props & Ctx, handlers: UCProps) => React.ReactNode) | React.ReactNode;
|
|
10
|
-
};
|
|
11
|
-
type ReturnEl = React.ReactElement | null;
|
|
12
|
-
/* utils type */
|
|
13
|
-
|
|
14
|
-
export type InputSize = 'm' | 'l';
|
|
15
|
-
|
|
16
|
-
export interface IInputProps extends IBoxProps, INeighborItemProps, INeighborLocationProps {
|
|
17
|
-
/**
|
|
18
|
-
* Sets the input and addons to the disabled state
|
|
19
|
-
* */
|
|
20
|
-
disabled?: boolean;
|
|
21
|
-
/**
|
|
22
|
-
* Input size
|
|
23
|
-
* @default m
|
|
24
|
-
*/
|
|
25
|
-
size?: InputSize;
|
|
26
|
-
/**
|
|
27
|
-
* Sets the input state
|
|
28
|
-
* @default normal
|
|
29
|
-
*/
|
|
30
|
-
state?: 'normal' | 'invalid' | 'valid';
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
export interface IInputValueProps
|
|
34
|
-
extends IBoxProps,
|
|
35
|
-
INeighborItemProps,
|
|
36
|
-
IWithAutoFocusEnhanceProps {
|
|
37
|
-
/**
|
|
38
|
-
* Input value
|
|
39
|
-
*/
|
|
40
|
-
value?: string;
|
|
41
|
-
/**
|
|
42
|
-
* Handler for changing the value
|
|
43
|
-
*/
|
|
44
|
-
onChange?: (value: string, event: React.SyntheticEvent<HTMLInputElement>) => void;
|
|
45
|
-
/**
|
|
46
|
-
* Sets the input to the disabled state
|
|
47
|
-
* */
|
|
48
|
-
disabled?: boolean;
|
|
49
|
-
/**
|
|
50
|
-
* Sets the input to the read-only state
|
|
51
|
-
* */
|
|
52
|
-
readOnly?: boolean;
|
|
53
|
-
/**
|
|
54
|
-
* Input size
|
|
55
|
-
* @default m
|
|
56
|
-
*/
|
|
57
|
-
size?: InputSize;
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
export interface IInputAddonProps extends IBoxProps, INeighborItemProps {
|
|
61
|
-
/**
|
|
62
|
-
* Adds styles for interactive icons
|
|
63
|
-
*/
|
|
64
|
-
interactive?: boolean;
|
|
65
|
-
/**
|
|
66
|
-
* Blocks the addon
|
|
67
|
-
* */
|
|
68
|
-
disabled?: boolean;
|
|
69
|
-
/**
|
|
70
|
-
* Input size
|
|
71
|
-
* @default m
|
|
72
|
-
*/
|
|
73
|
-
size?: InputSize;
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
interface IInputCtx {
|
|
77
|
-
getValueProps: PropGetterFn;
|
|
78
|
-
getAddonProps: PropGetterFn;
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
declare const Input: (<T>(props: CProps<IInputProps & T, IInputCtx>) => ReturnEl) & {
|
|
82
|
-
Value: <T>(props: IInputValueProps & T) => ReturnEl;
|
|
83
|
-
Addon: <T>(props: CProps<IInputAddonProps & T, IInputProps>) => ReturnEl;
|
|
84
|
-
};
|
|
85
|
-
export default Input;
|
package/src/index.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default } from './Input';
|
|
@@ -1,191 +0,0 @@
|
|
|
1
|
-
@import '@semcore/utils/style/var.css';
|
|
2
|
-
|
|
3
|
-
SInput {
|
|
4
|
-
display: inline-flex;
|
|
5
|
-
width: 100%;
|
|
6
|
-
align-items: center;
|
|
7
|
-
position: relative;
|
|
8
|
-
z-index: 0;
|
|
9
|
-
vertical-align: middle;
|
|
10
|
-
padding: 1px;
|
|
11
|
-
box-sizing: border-box;
|
|
12
|
-
|
|
13
|
-
& input:-webkit-autofill {
|
|
14
|
-
border-radius: var(--rounded-m);
|
|
15
|
-
-webkit-box-shadow: 0 0 0 30px rgb(250, 255, 189) inset;
|
|
16
|
-
|
|
17
|
-
& ~ SOutline {
|
|
18
|
-
background-color: rgb(250, 255, 189);
|
|
19
|
-
}
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
& SOutline {
|
|
23
|
-
border-radius: var(--rounded-m);
|
|
24
|
-
}
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
SValue {
|
|
28
|
-
/* hack for firefox */
|
|
29
|
-
min-width: 0;
|
|
30
|
-
width: 100%;
|
|
31
|
-
height: 100%;
|
|
32
|
-
padding: 0;
|
|
33
|
-
border: none;
|
|
34
|
-
box-sizing: border-box;
|
|
35
|
-
color: var(--gray-800);
|
|
36
|
-
font-size: inherit;
|
|
37
|
-
text-overflow: ellipsis;
|
|
38
|
-
font-family: inherit;
|
|
39
|
-
background: transparent;
|
|
40
|
-
|
|
41
|
-
&:focus {
|
|
42
|
-
outline: none;
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
&::placeholder {
|
|
46
|
-
color: var(--gray-300);
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
&:read-only ~ SOutline {
|
|
50
|
-
background: var(--gray-50);
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
&:disabled {
|
|
54
|
-
user-select: none;
|
|
55
|
-
opacity: var(--disabled-opacity);
|
|
56
|
-
|
|
57
|
-
& ~ SOutline {
|
|
58
|
-
opacity: var(--disabled-opacity);
|
|
59
|
-
cursor: default;
|
|
60
|
-
pointer-events: none;
|
|
61
|
-
}
|
|
62
|
-
}
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
SOutline {
|
|
66
|
-
position: absolute;
|
|
67
|
-
top: 0;
|
|
68
|
-
right: 0;
|
|
69
|
-
bottom: 0;
|
|
70
|
-
left: 0;
|
|
71
|
-
border: 1px solid;
|
|
72
|
-
z-index: -1;
|
|
73
|
-
background: #fff;
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
SAddon {
|
|
77
|
-
display: inline-flex;
|
|
78
|
-
justify-content: center;
|
|
79
|
-
align-items: center;
|
|
80
|
-
flex: 0 0 auto;
|
|
81
|
-
padding: 0 8px;
|
|
82
|
-
height: 100%;
|
|
83
|
-
color: var(--gray-300);
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
SAddon[interactive] {
|
|
87
|
-
cursor: pointer;
|
|
88
|
-
|
|
89
|
-
&:hover {
|
|
90
|
-
color: var(--gray-400);
|
|
91
|
-
}
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
SAddon[disabled] {
|
|
95
|
-
opacity: var(--disabled-opacity);
|
|
96
|
-
cursor: default;
|
|
97
|
-
pointer-events: none;
|
|
98
|
-
}
|
|
99
|
-
|
|
100
|
-
SInput[size='m'] {
|
|
101
|
-
font-size: var(--fs-200);
|
|
102
|
-
height: var(--form-control-m);
|
|
103
|
-
}
|
|
104
|
-
|
|
105
|
-
SValue[size='m'],
|
|
106
|
-
SValue[size='l'] {
|
|
107
|
-
padding: 0 8px;
|
|
108
|
-
}
|
|
109
|
-
|
|
110
|
-
SInput[size='l'] {
|
|
111
|
-
font-size: var(--fs-300);
|
|
112
|
-
height: var(--form-control-l);
|
|
113
|
-
padding-left: 4px;
|
|
114
|
-
padding-right: 4px;
|
|
115
|
-
}
|
|
116
|
-
|
|
117
|
-
SInput[focused] {
|
|
118
|
-
z-index: 1;
|
|
119
|
-
}
|
|
120
|
-
|
|
121
|
-
SInput[state='normal'] {
|
|
122
|
-
& SOutline {
|
|
123
|
-
border-color: var(--gray-200);
|
|
124
|
-
}
|
|
125
|
-
|
|
126
|
-
& SValue:focus ~ SOutline {
|
|
127
|
-
border-color: var(--blue-400);
|
|
128
|
-
box-shadow: var(--keyboard-focus);
|
|
129
|
-
}
|
|
130
|
-
}
|
|
131
|
-
SInput[state='valid'] {
|
|
132
|
-
& SOutline {
|
|
133
|
-
border-color: var(--green-200);
|
|
134
|
-
}
|
|
135
|
-
|
|
136
|
-
& SValue:focus ~ SOutline {
|
|
137
|
-
border-color: var(--green-400);
|
|
138
|
-
box-shadow: var(--keyboard-focus-valid);
|
|
139
|
-
}
|
|
140
|
-
}
|
|
141
|
-
SInput[state='invalid'] {
|
|
142
|
-
& SOutline {
|
|
143
|
-
border-color: var(--red-200);
|
|
144
|
-
}
|
|
145
|
-
|
|
146
|
-
& SValue:focus ~ SOutline {
|
|
147
|
-
border-color: var(--red-400);
|
|
148
|
-
box-shadow: var(--keyboard-focus-invalid);
|
|
149
|
-
}
|
|
150
|
-
}
|
|
151
|
-
|
|
152
|
-
SInput[neighborLocation='right'] {
|
|
153
|
-
& SOutline {
|
|
154
|
-
border-top-right-radius: 0;
|
|
155
|
-
border-bottom-right-radius: 0;
|
|
156
|
-
}
|
|
157
|
-
}
|
|
158
|
-
SInput[neighborLocation='both'] {
|
|
159
|
-
& SOutline {
|
|
160
|
-
border-radius: 0;
|
|
161
|
-
border-left: none;
|
|
162
|
-
}
|
|
163
|
-
}
|
|
164
|
-
SInput[neighborLocation='left'] {
|
|
165
|
-
& SOutline {
|
|
166
|
-
border-top-left-radius: 0;
|
|
167
|
-
border-bottom-left-radius: 0;
|
|
168
|
-
border-left: none;
|
|
169
|
-
}
|
|
170
|
-
}
|
|
171
|
-
|
|
172
|
-
SAddon[neighborLocation='right'] {
|
|
173
|
-
padding-right: 8px;
|
|
174
|
-
}
|
|
175
|
-
|
|
176
|
-
SAddon[neighborLocation='left'] {
|
|
177
|
-
padding-left: 8px;
|
|
178
|
-
}
|
|
179
|
-
|
|
180
|
-
SValue[neighborLocation='right'] {
|
|
181
|
-
padding-right: 0;
|
|
182
|
-
}
|
|
183
|
-
|
|
184
|
-
SValue[neighborLocation='both'] {
|
|
185
|
-
padding-left: 0;
|
|
186
|
-
padding-right: 0;
|
|
187
|
-
}
|
|
188
|
-
|
|
189
|
-
SValue[neighborLocation='left'] {
|
|
190
|
-
padding-left: 0;
|
|
191
|
-
}
|