@semcore/input 3.0.5 → 3.0.8
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 +67 -0
- package/lib/cjs/Input.js +20 -18
- package/lib/cjs/Input.js.map +1 -1
- package/lib/cjs/style/input.shadow.css +1 -4
- package/lib/es6/Input.js +19 -18
- package/lib/es6/Input.js.map +1 -1
- package/lib/es6/style/input.shadow.css +1 -4
- package/package.json +2 -2
- package/src/Input.jsx +2 -1
- package/src/style/input.shadow.css +1 -4
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.8] - 2022-07-14
|
|
6
|
+
|
|
7
|
+
### Fixed
|
|
8
|
+
|
|
9
|
+
- Fixed the reaction when interacting with the keyboard for the correct work of other components with keyboard support.
|
|
10
|
+
|
|
11
|
+
## [3.0.7] - 2022-07-13
|
|
12
|
+
|
|
13
|
+
### Fixed
|
|
14
|
+
|
|
15
|
+
- Fixed applying style(border-radius) for outline.
|
|
16
|
+
|
|
17
|
+
## [3.0.6] - 2022-07-07
|
|
18
|
+
|
|
19
|
+
### Changed
|
|
20
|
+
|
|
21
|
+
- Version patch update due to children dependencies update (`@semcore/utils` [3.33.0 ~> 3.34.0], `@semcore/flex-box` [4.5.5 ~> 4.5.6]).
|
|
22
|
+
|
|
5
23
|
## [3.0.5] - 2022-06-02
|
|
6
24
|
|
|
7
25
|
### Changed
|
package/README.md
CHANGED
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
# @semcore/input
|
|
2
|
+
|
|
3
|
+
[](https://www.npmjs.com/@semcore/input)
|
|
4
|
+
[](https://www.npmjs.com/package/@semcore/input)
|
|
5
|
+
[](https://github.com/semrush/intergalactic/blob/master/LICENSE)
|
|
6
|
+
|
|
7
|
+
> This component is part of the Intergalactic design system
|
|
8
|
+
|
|
9
|
+
### 📖 [Component documentation](https://developer.semrush.com/intergalactic/components/input/)
|
|
10
|
+
|
|
11
|
+
### 🏠 [Design system](https://developer.semrush.com/intergalactic/)
|
|
12
|
+
|
|
13
|
+
## Install
|
|
14
|
+
|
|
15
|
+
```sh
|
|
16
|
+
npm install @semcore/ui
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
## Usage
|
|
20
|
+
|
|
21
|
+
```jsx
|
|
22
|
+
import Input from '@semcore/ui/input';
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
<details>
|
|
26
|
+
<summary>Alternative installation and use</summary>
|
|
27
|
+
|
|
28
|
+
**We do not recommend this usage path due to possible dependency and update issues.**
|
|
29
|
+
|
|
30
|
+
### Install
|
|
31
|
+
|
|
32
|
+
You can only install one package from the design system
|
|
33
|
+
|
|
34
|
+
```sh
|
|
35
|
+
npm install @semcore/input @semcore/core
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
`@semcore/core` - _is the basic package by which we create our components, and it contains all of the common logic
|
|
39
|
+
of the components that is discussed below. There should only be one version of the package in the project._
|
|
40
|
+
|
|
41
|
+
### Usage
|
|
42
|
+
|
|
43
|
+
You can use the package the same way but without `/ui/` in the import path.
|
|
44
|
+
|
|
45
|
+
```jsx
|
|
46
|
+
import Input from '@semcore/input';
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
</details>
|
|
50
|
+
|
|
51
|
+
## 👤 Author
|
|
52
|
+
|
|
53
|
+
[UI-kit team](https://github.com/semrush/intergalactic/blob/master/MAINTAINERS) and [others ❤️](https://github.com/semrush/intergalactic/graphs/contributors)
|
|
54
|
+
|
|
55
|
+
## 🤝 Contributing
|
|
56
|
+
|
|
57
|
+
Contributions, issues and feature requests are welcome!
|
|
58
|
+
|
|
59
|
+
Feel free to check [issues page](https://github.com/semrush/intergalactic/issues). You can also take a look at the [contributing guide](https://github.com/semrush/intergalactic/blob/master/CONTRIBUTING.md).
|
|
60
|
+
|
|
61
|
+
## Show your support
|
|
62
|
+
|
|
63
|
+
Give a ⭐️ if this project helped you!
|
|
64
|
+
|
|
65
|
+
## 📝 License
|
|
66
|
+
|
|
67
|
+
This project is [MIT](https://github.com/semrush/intergalactic/blob/master/LICENSE) licensed.
|
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_ggnkj_gg_{display:inline-flex;width:100%;align-items:center;position:relative;z-index:0;vertical-align:middle;padding:1px;box-sizing:border-box}.___SInput_ggnkj_gg_ input:-webkit-autofill{border-radius:6px;-webkit-box-shadow:0 0 0 30px #faffbd inset}.___SInput_ggnkj_gg_ input:-webkit-autofill~.___SOutline_ggnkj_gg_{background-color:#faffbd}.___SValue_ggnkj_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_ggnkj_gg_:focus{outline:none}.___SValue_ggnkj_gg_::-moz-placeholder{color:#a9abb6}.___SValue_ggnkj_gg_:-ms-input-placeholder{color:#a9abb6}.___SValue_ggnkj_gg_::placeholder{color:#a9abb6}.___SValue_ggnkj_gg_:-moz-read-only~.___SOutline_ggnkj_gg_{background:#f4f5f9}.___SValue_ggnkj_gg_:read-only~.___SOutline_ggnkj_gg_{background:#f4f5f9}.___SValue_ggnkj_gg_:disabled{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;opacity:0.3}.___SValue_ggnkj_gg_:disabled~.___SOutline_ggnkj_gg_{opacity:0.3;cursor:default;pointer-events:none}.___SOutline_ggnkj_gg_{position:absolute;top:0;right:0;bottom:0;left:0;border:1px solid;border-radius:6px;z-index:-1;background:#fff}.___SAddon_ggnkj_gg_{display:inline-flex;justify-content:center;align-items:center;flex:0 0 auto;padding:0 8px;height:100%;color:#a9abb6}.___SAddon_ggnkj_gg_.__interactive_ggnkj_gg_{cursor:pointer}.___SAddon_ggnkj_gg_.__interactive_ggnkj_gg_:hover{color:#8a8e9b}.___SAddon_ggnkj_gg_.__disabled_ggnkj_gg_{opacity:0.3;cursor:default;pointer-events:none}.___SInput_ggnkj_gg_._size_m_ggnkj_gg_{font-size:14px;height:28px}.___SValue_ggnkj_gg_._size_l_ggnkj_gg_,.___SValue_ggnkj_gg_._size_m_ggnkj_gg_{padding:0 8px}.___SInput_ggnkj_gg_._size_l_ggnkj_gg_{font-size:16px;height:40px;padding-left:4px;padding-right:4px}.___SInput_ggnkj_gg_.__focused_ggnkj_gg_{z-index:1}.___SInput_ggnkj_gg_._state_normal_ggnkj_gg_ .___SOutline_ggnkj_gg_{border-color:#c4c7cf}.___SInput_ggnkj_gg_._state_normal_ggnkj_gg_ .___SValue_ggnkj_gg_:focus~.___SOutline_ggnkj_gg_{border-color:#008ff8;box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2)}.___SInput_ggnkj_gg_._state_valid_ggnkj_gg_ .___SOutline_ggnkj_gg_{border-color:#59ddaa}.___SInput_ggnkj_gg_._state_valid_ggnkj_gg_ .___SValue_ggnkj_gg_:focus~.___SOutline_ggnkj_gg_{border-color:#009f81;box-shadow:0px 0px 0px 3px rgba(0, 159, 129, 0.2)}.___SInput_ggnkj_gg_._state_invalid_ggnkj_gg_ .___SOutline_ggnkj_gg_{border-color:#ffaeb5}.___SInput_ggnkj_gg_._state_invalid_ggnkj_gg_ .___SValue_ggnkj_gg_:focus~.___SOutline_ggnkj_gg_{border-color:#ff4953;box-shadow:0px 0px 0px 3px rgba(255, 73, 83, 0.2)}.___SInput_ggnkj_gg_._neighborLocation_right_ggnkj_gg_ .___SOutline_ggnkj_gg_{border-top-right-radius:0;border-bottom-right-radius:0}.___SInput_ggnkj_gg_._neighborLocation_both_ggnkj_gg_ .___SOutline_ggnkj_gg_{border-radius:0;border-left:none}.___SInput_ggnkj_gg_._neighborLocation_left_ggnkj_gg_ .___SOutline_ggnkj_gg_{border-top-left-radius:0;border-bottom-left-radius:0;border-left:none}.___SAddon_ggnkj_gg_._neighborLocation_right_ggnkj_gg_{padding-right:8px}.___SAddon_ggnkj_gg_._neighborLocation_left_ggnkj_gg_{padding-left:8px}.___SValue_ggnkj_gg_._neighborLocation_right_ggnkj_gg_{padding-right:0}.___SValue_ggnkj_gg_._neighborLocation_both_ggnkj_gg_{padding-left:0;padding-right:0}.___SValue_ggnkj_gg_._neighborLocation_left_ggnkj_gg_{padding-left:0}"
|
|
54
56
|
/*__inner_css_end__*/
|
|
55
|
-
, "
|
|
57
|
+
, "ggnkj_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_ggnkj_gg_",
|
|
61
|
+
"__SOutline": "___SOutline_ggnkj_gg_",
|
|
62
|
+
"__SValue": "___SValue_ggnkj_gg_",
|
|
63
|
+
"__SAddon": "___SAddon_ggnkj_gg_",
|
|
64
|
+
"_interactive": "__interactive_ggnkj_gg_",
|
|
65
|
+
"_disabled": "__disabled_ggnkj_gg_",
|
|
66
|
+
"_size_m": "_size_m_ggnkj_gg_",
|
|
67
|
+
"_size_l": "_size_l_ggnkj_gg_",
|
|
68
|
+
"_focused": "__focused_ggnkj_gg_",
|
|
69
|
+
"_state_normal": "_state_normal_ggnkj_gg_",
|
|
70
|
+
"_state_valid": "_state_valid_ggnkj_gg_",
|
|
71
|
+
"_state_invalid": "_state_invalid_ggnkj_gg_",
|
|
72
|
+
"_neighborLocation_right": "_neighborLocation_right_ggnkj_gg_",
|
|
73
|
+
"_neighborLocation_both": "_neighborLocation_both_ggnkj_gg_",
|
|
74
|
+
"_neighborLocation_left": "_neighborLocation_left_ggnkj_gg_"
|
|
73
75
|
});
|
|
74
76
|
|
|
75
77
|
var Input = /*#__PURE__*/function (_Component) {
|
|
@@ -197,7 +199,7 @@ var Value = /*#__PURE__*/function (_Component2) {
|
|
|
197
199
|
(0, _defineProperty2["default"])(Value, "defaultProps", {
|
|
198
200
|
defaultValue: ''
|
|
199
201
|
});
|
|
200
|
-
(0, _defineProperty2["default"])(Value, "enhance", [(0, _autoFocusEnhance["default"])(), (0, _neighborLocation.neighborLocationEnhance)()]);
|
|
202
|
+
(0, _defineProperty2["default"])(Value, "enhance", [(0, _keyboardFocusEnhance["default"])(), (0, _autoFocusEnhance["default"])(), (0, _neighborLocation.neighborLocationEnhance)()]);
|
|
201
203
|
|
|
202
204
|
function Addon(props) {
|
|
203
205
|
var _ref3 = arguments[0],
|
package/lib/cjs/Input.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Input.jsx"],"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","Component","style","Value","value","target","SValue","defaultValue","Addon","props","SAddon","enhance"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AACA;;AADA;;AAEA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAIMA,K;;;;;;;;;;;;;;;8FAUI;AACNC,MAAAA,OAAO,EAAE;AADH,K;iGAIGC,kBAAMC,SAAN,E;6GAEY,UAACC,CAAD,EAAO;AAC5BA,MAAAA,CAAC,CAACC,cAAF;AACA,YAAKC,QAAL,CAAcC,OAAd,EAAuBC,KAAvB;AACD,K;gHAEyB,UAACP,OAAD;AAAA,aAAa;AAAA,eAAM,MAAKQ,QAAL,CAAc;AAAER,UAAAA,OAAO,EAAPA;AAAF,SAAd,CAAN;AAAA,OAAb;AAAA,K;;;;;;WAE1B,yBAAgB;AACd,UAAQS,QAAR,GAAqB,KAAKC,OAA1B,CAAQD,QAAR;AACA,aAAO;AACLA,QAAAA,QAAQ,EAARA,QADK;AAELE,QAAAA,WAAW,EAAE,KAAKC;AAFb,OAAP;AAID;;;WAED,yBAAgB;AACd,0BAA2B,KAAKF,OAAhC;AAAA,UAAQG,IAAR,iBAAQA,IAAR;AAAA,UAAcJ,QAAd,iBAAcA,QAAd;AACA,aAAO;AACLK,QAAAA,GAAG,EAAE,KAAKT,QADL;AAELQ,QAAAA,IAAI,EAAJA,IAFK;AAGLJ,QAAAA,QAAQ,EAARA,QAHK;AAILM,QAAAA,OAAO,EAAE,KAAKC,uBAAL,CAA6B,IAA7B,CAJJ;AAKLC,QAAAA,MAAM,EAAE,KAAKD,uBAAL,CAA6B,KAA7B;AALH,OAAP;AAOD;;;WAED,kBAAS;AAAA;AAAA;;AACP,UAAME,MAAM,GAMMC,YANlB;AACA,UAAMC,QAAQ,GAAG,KAAjB;AACA,2BAA6C,KAAKV,OAAlD;AAAA,UAAQW,QAAR,kBAAQA,QAAR;AAAA,UAAkBC,MAAlB,kBAAkBA,MAAlB;AAAA,UAA0BC,cAA1B,kBAA0BA,cAA1B;AACA,UAAQvB,OAAR,GAAoB,KAAKwB,KAAzB,CAAQxB,OAAR;AAEA,qBAAO,mBAAQsB,MAAR,CAAP,eACE,gCAAC,MAAD;AAAA,mBAA8BtB;AAA9B,+BACE,gCAAC,4BAAD;AAAA,0BAAkCuB;AAAlC,uBACE,gCAAC,QAAD,2BADF,CADF,eAIE,gCAAC,QAAD,2BAJF,CADF;AAQD;;;EAxDiBE,e;;iCAAd1B,K,iBACiB,O;iCADjBA,K,kBAGkB;AACpBc,EAAAA,IAAI,EAAE,GADc;AAEpBW,EAAAA,KAAK,EAAE;AAFa,C;iCAHlBzB,K,WAOW2B,K;iCAPX3B,K,aAQa,CAAC,gDAAD,C;;IAmDb4B,K;;;;;;;;;;;;WAMJ,6BAAoB;AAClB,aAAO;AACLC,QAAAA,KAAK,EAAE,eAACzB,CAAD;AAAA,iBAAOA,CAAC,CAAC0B,MAAF,CAASD,KAAhB;AAAA;AADF,OAAP;AAGD;;;WAED,kBAAS;AAAA;AAAA;;AACP,UAAME,MAAM,GAEwCX,YAFpD;AAEA,qBAAO,mBAAQ,KAAKT,OAAL,CAAaY,MAArB,CAAP,eAAoC,gCAAC,MAAD;AAAA,eAAyB,OAAzB;AAAA,gBAAsC;AAAtC,kBAApC;AACD;;;EAhBiBG,e;;iCAAdE,K,kBACkB;AACpBI,EAAAA,YAAY,EAAE;AADM,C;iCADlBJ,K,aAIa,CAAC,
|
|
1
|
+
{"version":3,"sources":["../../src/Input.jsx"],"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","Component","style","Value","value","target","SValue","defaultValue","Addon","props","SAddon","enhance"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AACA;;AADA;;AAEA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAIMA,K;;;;;;;;;;;;;;;8FAUI;AACNC,MAAAA,OAAO,EAAE;AADH,K;iGAIGC,kBAAMC,SAAN,E;6GAEY,UAACC,CAAD,EAAO;AAC5BA,MAAAA,CAAC,CAACC,cAAF;AACA,YAAKC,QAAL,CAAcC,OAAd,EAAuBC,KAAvB;AACD,K;gHAEyB,UAACP,OAAD;AAAA,aAAa;AAAA,eAAM,MAAKQ,QAAL,CAAc;AAAER,UAAAA,OAAO,EAAPA;AAAF,SAAd,CAAN;AAAA,OAAb;AAAA,K;;;;;;WAE1B,yBAAgB;AACd,UAAQS,QAAR,GAAqB,KAAKC,OAA1B,CAAQD,QAAR;AACA,aAAO;AACLA,QAAAA,QAAQ,EAARA,QADK;AAELE,QAAAA,WAAW,EAAE,KAAKC;AAFb,OAAP;AAID;;;WAED,yBAAgB;AACd,0BAA2B,KAAKF,OAAhC;AAAA,UAAQG,IAAR,iBAAQA,IAAR;AAAA,UAAcJ,QAAd,iBAAcA,QAAd;AACA,aAAO;AACLK,QAAAA,GAAG,EAAE,KAAKT,QADL;AAELQ,QAAAA,IAAI,EAAJA,IAFK;AAGLJ,QAAAA,QAAQ,EAARA,QAHK;AAILM,QAAAA,OAAO,EAAE,KAAKC,uBAAL,CAA6B,IAA7B,CAJJ;AAKLC,QAAAA,MAAM,EAAE,KAAKD,uBAAL,CAA6B,KAA7B;AALH,OAAP;AAOD;;;WAED,kBAAS;AAAA;AAAA;;AACP,UAAME,MAAM,GAMMC,YANlB;AACA,UAAMC,QAAQ,GAAG,KAAjB;AACA,2BAA6C,KAAKV,OAAlD;AAAA,UAAQW,QAAR,kBAAQA,QAAR;AAAA,UAAkBC,MAAlB,kBAAkBA,MAAlB;AAAA,UAA0BC,cAA1B,kBAA0BA,cAA1B;AACA,UAAQvB,OAAR,GAAoB,KAAKwB,KAAzB,CAAQxB,OAAR;AAEA,qBAAO,mBAAQsB,MAAR,CAAP,eACE,gCAAC,MAAD;AAAA,mBAA8BtB;AAA9B,+BACE,gCAAC,4BAAD;AAAA,0BAAkCuB;AAAlC,uBACE,gCAAC,QAAD,2BADF,CADF,eAIE,gCAAC,QAAD,2BAJF,CADF;AAQD;;;EAxDiBE,e;;iCAAd1B,K,iBACiB,O;iCADjBA,K,kBAGkB;AACpBc,EAAAA,IAAI,EAAE,GADc;AAEpBW,EAAAA,KAAK,EAAE;AAFa,C;iCAHlBzB,K,WAOW2B,K;iCAPX3B,K,aAQa,CAAC,gDAAD,C;;IAmDb4B,K;;;;;;;;;;;;WAMJ,6BAAoB;AAClB,aAAO;AACLC,QAAAA,KAAK,EAAE,eAACzB,CAAD;AAAA,iBAAOA,CAAC,CAAC0B,MAAF,CAASD,KAAhB;AAAA;AADF,OAAP;AAGD;;;WAED,kBAAS;AAAA;AAAA;;AACP,UAAME,MAAM,GAEwCX,YAFpD;AAEA,qBAAO,mBAAQ,KAAKT,OAAL,CAAaY,MAArB,CAAP,eAAoC,gCAAC,MAAD;AAAA,eAAyB,OAAzB;AAAA,gBAAsC;AAAtC,kBAApC;AACD;;;EAhBiBG,e;;iCAAdE,K,kBACkB;AACpBI,EAAAA,YAAY,EAAE;AADM,C;iCADlBJ,K,aAIa,CAAC,uCAAD,EAAyB,mCAAzB,EAA6C,gDAA7C,C;;AAenB,SAASK,KAAT,CAAeC,KAAf,EAAsB;AAAA;AAAA;;AACpB,MAAMC,MAAM,GACiCf,YAD7C;AACA,iBAAO,mBAAQc,KAAK,CAACX,MAAd,CAAP,eAA6B,gCAAC,MAAD,2EAA7B;AACD;;AAEDU,KAAK,CAACG,OAAN,GAAgB,CAAC,gDAAD,CAAhB;;eAEe,sBAAgBpC,KAAhB,EAAuB;AACpCiC,EAAAA,KAAK,EAALA,KADoC;AAEpCL,EAAAA,KAAK,EAALA;AAFoC,CAAvB,C","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"],"file":"Input.js"}
|
|
@@ -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_ggnkj_gg_{display:inline-flex;width:100%;align-items:center;position:relative;z-index:0;vertical-align:middle;padding:1px;box-sizing:border-box}.___SInput_ggnkj_gg_ input:-webkit-autofill{border-radius:6px;-webkit-box-shadow:0 0 0 30px #faffbd inset}.___SInput_ggnkj_gg_ input:-webkit-autofill~.___SOutline_ggnkj_gg_{background-color:#faffbd}.___SValue_ggnkj_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_ggnkj_gg_:focus{outline:none}.___SValue_ggnkj_gg_::-moz-placeholder{color:#a9abb6}.___SValue_ggnkj_gg_:-ms-input-placeholder{color:#a9abb6}.___SValue_ggnkj_gg_::placeholder{color:#a9abb6}.___SValue_ggnkj_gg_:-moz-read-only~.___SOutline_ggnkj_gg_{background:#f4f5f9}.___SValue_ggnkj_gg_:read-only~.___SOutline_ggnkj_gg_{background:#f4f5f9}.___SValue_ggnkj_gg_:disabled{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;opacity:0.3}.___SValue_ggnkj_gg_:disabled~.___SOutline_ggnkj_gg_{opacity:0.3;cursor:default;pointer-events:none}.___SOutline_ggnkj_gg_{position:absolute;top:0;right:0;bottom:0;left:0;border:1px solid;border-radius:6px;z-index:-1;background:#fff}.___SAddon_ggnkj_gg_{display:inline-flex;justify-content:center;align-items:center;flex:0 0 auto;padding:0 8px;height:100%;color:#a9abb6}.___SAddon_ggnkj_gg_.__interactive_ggnkj_gg_{cursor:pointer}.___SAddon_ggnkj_gg_.__interactive_ggnkj_gg_:hover{color:#8a8e9b}.___SAddon_ggnkj_gg_.__disabled_ggnkj_gg_{opacity:0.3;cursor:default;pointer-events:none}.___SInput_ggnkj_gg_._size_m_ggnkj_gg_{font-size:14px;height:28px}.___SValue_ggnkj_gg_._size_l_ggnkj_gg_,.___SValue_ggnkj_gg_._size_m_ggnkj_gg_{padding:0 8px}.___SInput_ggnkj_gg_._size_l_ggnkj_gg_{font-size:16px;height:40px;padding-left:4px;padding-right:4px}.___SInput_ggnkj_gg_.__focused_ggnkj_gg_{z-index:1}.___SInput_ggnkj_gg_._state_normal_ggnkj_gg_ .___SOutline_ggnkj_gg_{border-color:#c4c7cf}.___SInput_ggnkj_gg_._state_normal_ggnkj_gg_ .___SValue_ggnkj_gg_:focus~.___SOutline_ggnkj_gg_{border-color:#008ff8;box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2)}.___SInput_ggnkj_gg_._state_valid_ggnkj_gg_ .___SOutline_ggnkj_gg_{border-color:#59ddaa}.___SInput_ggnkj_gg_._state_valid_ggnkj_gg_ .___SValue_ggnkj_gg_:focus~.___SOutline_ggnkj_gg_{border-color:#009f81;box-shadow:0px 0px 0px 3px rgba(0, 159, 129, 0.2)}.___SInput_ggnkj_gg_._state_invalid_ggnkj_gg_ .___SOutline_ggnkj_gg_{border-color:#ffaeb5}.___SInput_ggnkj_gg_._state_invalid_ggnkj_gg_ .___SValue_ggnkj_gg_:focus~.___SOutline_ggnkj_gg_{border-color:#ff4953;box-shadow:0px 0px 0px 3px rgba(255, 73, 83, 0.2)}.___SInput_ggnkj_gg_._neighborLocation_right_ggnkj_gg_ .___SOutline_ggnkj_gg_{border-top-right-radius:0;border-bottom-right-radius:0}.___SInput_ggnkj_gg_._neighborLocation_both_ggnkj_gg_ .___SOutline_ggnkj_gg_{border-radius:0;border-left:none}.___SInput_ggnkj_gg_._neighborLocation_left_ggnkj_gg_ .___SOutline_ggnkj_gg_{border-top-left-radius:0;border-bottom-left-radius:0;border-left:none}.___SAddon_ggnkj_gg_._neighborLocation_right_ggnkj_gg_{padding-right:8px}.___SAddon_ggnkj_gg_._neighborLocation_left_ggnkj_gg_{padding-left:8px}.___SValue_ggnkj_gg_._neighborLocation_right_ggnkj_gg_{padding-right:0}.___SValue_ggnkj_gg_._neighborLocation_both_ggnkj_gg_{padding-left:0;padding-right:0}.___SValue_ggnkj_gg_._neighborLocation_left_ggnkj_gg_{padding-left:0}"
|
|
33
34
|
/*__inner_css_end__*/
|
|
34
|
-
, "
|
|
35
|
+
, "ggnkj_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_ggnkj_gg_",
|
|
39
|
+
"__SOutline": "___SOutline_ggnkj_gg_",
|
|
40
|
+
"__SValue": "___SValue_ggnkj_gg_",
|
|
41
|
+
"__SAddon": "___SAddon_ggnkj_gg_",
|
|
42
|
+
"_interactive": "__interactive_ggnkj_gg_",
|
|
43
|
+
"_disabled": "__disabled_ggnkj_gg_",
|
|
44
|
+
"_size_m": "_size_m_ggnkj_gg_",
|
|
45
|
+
"_size_l": "_size_l_ggnkj_gg_",
|
|
46
|
+
"_focused": "__focused_ggnkj_gg_",
|
|
47
|
+
"_state_normal": "_state_normal_ggnkj_gg_",
|
|
48
|
+
"_state_valid": "_state_valid_ggnkj_gg_",
|
|
49
|
+
"_state_invalid": "_state_invalid_ggnkj_gg_",
|
|
50
|
+
"_neighborLocation_right": "_neighborLocation_right_ggnkj_gg_",
|
|
51
|
+
"_neighborLocation_both": "_neighborLocation_both_ggnkj_gg_",
|
|
52
|
+
"_neighborLocation_left": "_neighborLocation_left_ggnkj_gg_"
|
|
52
53
|
});
|
|
53
54
|
|
|
54
55
|
var Input = /*#__PURE__*/function (_Component) {
|
|
@@ -188,7 +189,7 @@ _defineProperty(Value, "defaultProps", {
|
|
|
188
189
|
defaultValue: ''
|
|
189
190
|
});
|
|
190
191
|
|
|
191
|
-
_defineProperty(Value, "enhance", [autoFocusEnhance(), neighborLocationEnhance()]);
|
|
192
|
+
_defineProperty(Value, "enhance", [keyboardFocusEnhance(), autoFocusEnhance(), neighborLocationEnhance()]);
|
|
192
193
|
|
|
193
194
|
function Addon(props) {
|
|
194
195
|
var _ref3 = arguments[0],
|
package/lib/es6/Input.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Input.jsx"],"names":["React","createComponent","Component","sstyled","Root","Box","NeighborLocation","neighborLocationEnhance","autoFocusEnhance","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"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,eAAP,IAA0BC,SAA1B,EAAqCC,OAArC,EAA8CC,IAA9C,QAA0D,eAA1D;AACA,SAASC,GAAT,QAAoB,mBAApB;AACA,OAAOC,gBAAP,IAA2BC,uBAA3B,QAA0D,4BAA1D;AACA,OAAOC,gBAAP,MAA6B,8CAA7B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAIMC,K;;;;;;;;;;;;;;;;4DAUI;AACNC,MAAAA,OAAO,EAAE;AADH,K;;+
|
|
1
|
+
{"version":3,"sources":["../../src/Input.jsx"],"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"],"mappings":"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","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"],"file":"Input.js"}
|
|
@@ -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
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@semcore/input",
|
|
3
3
|
"description": "SEMRush Input Component",
|
|
4
|
-
"version": "3.0.
|
|
4
|
+
"version": "3.0.8",
|
|
5
5
|
"main": "lib/cjs/index.js",
|
|
6
6
|
"module": "lib/es6/index.js",
|
|
7
7
|
"typings": "lib/types/index.d.ts",
|
|
8
8
|
"sideEffects": false,
|
|
9
|
-
"author": "
|
|
9
|
+
"author": "UI-kit team <ui-kit-team@semrush.com>",
|
|
10
10
|
"license": "MIT",
|
|
11
11
|
"scripts": {
|
|
12
12
|
"build": "build --source=js",
|
package/src/Input.jsx
CHANGED
|
@@ -3,6 +3,7 @@ import createComponent, { Component, sstyled, Root } from '@semcore/core';
|
|
|
3
3
|
import { Box } from '@semcore/flex-box';
|
|
4
4
|
import NeighborLocation, { neighborLocationEnhance } from '@semcore/neighbor-location';
|
|
5
5
|
import autoFocusEnhance from '@semcore/utils/lib/enhances/autoFocusEnhance';
|
|
6
|
+
import keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
|
|
6
7
|
|
|
7
8
|
import style from './style/input.shadow.css';
|
|
8
9
|
|
|
@@ -69,7 +70,7 @@ class Value extends Component {
|
|
|
69
70
|
static defaultProps = {
|
|
70
71
|
defaultValue: '',
|
|
71
72
|
};
|
|
72
|
-
static enhance = [autoFocusEnhance(), neighborLocationEnhance()];
|
|
73
|
+
static enhance = [keyboardFocusEnhance(), autoFocusEnhance(), neighborLocationEnhance()];
|
|
73
74
|
|
|
74
75
|
uncontrolledProps() {
|
|
75
76
|
return {
|
|
@@ -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
|
}
|