@semcore/input 4.43.0-prerelease.0 → 4.43.0-prerelease.1
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/lib/cjs/Input.js +89 -72
- package/lib/cjs/Input.js.map +1 -1
- package/lib/cjs/index.d.js.map +1 -1
- package/lib/cjs/index.js +1 -1
- package/lib/cjs/index.js.map +1 -1
- package/lib/cjs/style/input.shadow.css +15 -43
- package/lib/es6/Input.js +77 -63
- package/lib/es6/Input.js.map +1 -1
- package/lib/es6/index.d.js.map +1 -1
- package/lib/es6/index.js.map +1 -1
- package/lib/es6/style/input.shadow.css +15 -43
- package/lib/esm/Input.mjs +86 -71
- package/lib/esm/style/input.shadow.css +15 -43
- package/lib/types/index.d.ts +34 -9
- package/package.json +5 -5
package/lib/esm/Input.mjs
CHANGED
|
@@ -1,73 +1,90 @@
|
|
|
1
1
|
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
|
|
2
2
|
import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
|
|
3
3
|
import _createClass from "@babel/runtime/helpers/esm/createClass";
|
|
4
|
-
import
|
|
4
|
+
import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
|
|
5
5
|
import _inherits from "@babel/runtime/helpers/esm/inherits";
|
|
6
|
+
import _createSuper from "@babel/runtime/helpers/esm/createSuper";
|
|
6
7
|
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
7
|
-
import { sstyled
|
|
8
|
-
import {
|
|
8
|
+
import { sstyled } from "@semcore/utils/lib/core/index";
|
|
9
|
+
import createComponent, { sstyled as sstyled$1, assignProps, Component } from "@semcore/core";
|
|
9
10
|
import React from "react";
|
|
11
|
+
import { InvalidStateBox, Box } from "@semcore/flex-box";
|
|
12
|
+
import NeighborLocation from "@semcore/neighbor-location";
|
|
13
|
+
import autoFocusEnhance from "@semcore/utils/lib/enhances/autoFocusEnhance";
|
|
14
|
+
import keyboardFocusEnhance from "@semcore/utils/lib/enhances/keyboardFocusEnhance";
|
|
10
15
|
/*!__reshadow-styles__:"./style/input.shadow.css"*/
|
|
11
16
|
var style = (
|
|
12
17
|
/*__reshadow_css_start__*/
|
|
13
18
|
(sstyled.insert(
|
|
14
19
|
/*__inner_css_start__*/
|
|
15
|
-
".
|
|
20
|
+
".___SInput_1v5g2_gg_{display:inline-flex;width:100%;align-items:center;position:relative;z-index:0;vertical-align:middle;padding:1px;box-sizing:border-box}.___SInput_1v5g2_gg_ input:-webkit-autofill{border-radius:var(--intergalactic-control-rounded, 6px);-webkit-box-shadow:0 0 0 30px #faffbd inset}.___SInput_1v5g2_gg_ input:-webkit-autofill~.___SOutline_1v5g2_gg_{background-color:#faffbd}.___SValue_1v5g2_gg_{min-width:0;width:100%;height:100%;padding:0;border:0;box-sizing:border-box;color:var(--intergalactic-text-primary, rgba(1, 5, 0, 0.899));font-size:inherit;text-overflow:ellipsis;font-family:inherit;background:0 0}.___SValue_1v5g2_gg_:focus{outline:0}.___SValue_1v5g2_gg_::-moz-placeholder{color:var(--intergalactic-text-placeholder, rgba(0, 5, 2, 0.457))}.___SValue_1v5g2_gg_::placeholder{color:var(--intergalactic-text-placeholder, rgba(0, 5, 2, 0.457))}.___SValue_1v5g2_gg_:not(:disabled):-moz-read-only~.___SOutline_1v5g2_gg_{background:var(--intergalactic-bg-secondary-neutral, rgb(248, 249, 248))}.___SValue_1v5g2_gg_:not(:disabled):read-only~.___SOutline_1v5g2_gg_{background:var(--intergalactic-bg-secondary-neutral, rgb(248, 249, 248))}.___SValue_1v5g2_gg_:disabled{-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--intergalactic-disabled-opacity, 0.4)}.___SInput_1v5g2_gg_.__disabled_1v5g2_gg_ .___SOutline_1v5g2_gg_,.___SValue_1v5g2_gg_:disabled~.___SOutline_1v5g2_gg_{opacity:var(--intergalactic-disabled-opacity, 0.4);cursor:default;pointer-events:none}.___SOutline_1v5g2_gg_{position:absolute;top:0;right:0;bottom:0;left:0;border:1px solid;border-radius:var(--intergalactic-control-rounded, 6px);z-index:-1;background:var(--intergalactic-bg-primary-neutral, rgb(255, 255, 255))}.___SAddon_1v5g2_gg_{display:inline-flex;justify-content:center;align-items:center;flex:0 0 auto;padding:0 var(--intergalactic-spacing-2x, 8px);height:100%;color:var(--intergalactic-icon-secondary-neutral, rgba(0, 5, 2, 0.385))}@supports (color:color(display-p3 0 0 0)){.___SAddon_1v5g2_gg_{color:var(--intergalactic-icon-secondary-neutral, rgba(0, 5, 2, 0.385))}@media (color-gamut:p3){.___SAddon_1v5g2_gg_{color:var(--intergalactic-icon-secondary-neutral, color(display-p3 0.0036 0.02041 0.00996 / 0.385))}}}.___SAddon_1v5g2_gg_.__interactive_1v5g2_gg_{cursor:pointer}@media (hover:hover){.___SAddon_1v5g2_gg_.__interactive_1v5g2_gg_:hover{color:var(--intergalactic-icon-secondary-neutral-hover-active, rgba(0, 5, 2, 0.433))}@supports (color:color(display-p3 0 0 0)){.___SAddon_1v5g2_gg_.__interactive_1v5g2_gg_:hover{color:var(--intergalactic-icon-secondary-neutral-hover-active, rgba(0, 5, 2, 0.433))}@media (color-gamut:p3){.___SAddon_1v5g2_gg_.__interactive_1v5g2_gg_:hover{color:var(--intergalactic-icon-secondary-neutral-hover-active, color(display-p3 0.00333 0.01824 0.00791 / 0.433))}}}}.___SAddon_1v5g2_gg_.__disabled_1v5g2_gg_{opacity:var(--intergalactic-disabled-opacity, 0.4);cursor:default;pointer-events:none}.___SAddon_1v5g2_gg_._size_m_1v5g2_gg_:not(.___SButton_1v5g2_gg_){padding:0 var(--intergalactic-spacing-2x, 8px)}.___SAddon_1v5g2_gg_._size_l_1v5g2_gg_:not(.___SButton_1v5g2_gg_){padding:0 var(--intergalactic-spacing-2x, 8px)0 var(--intergalactic-spacing-3x, 12px)}.___SInput_1v5g2_gg_ .___SAddon_1v5g2_gg_:nth-last-child(2){margin-right:-1px}.___SValue_1v5g2_gg_._size_m_1v5g2_gg_{padding:0 var(--intergalactic-spacing-2x, 8px)}.___SValue_1v5g2_gg_._size_l_1v5g2_gg_{padding:0 var(--intergalactic-spacing-3x, 12px)}.___SInput_1v5g2_gg_._size_m_1v5g2_gg_{font-size:var(--intergalactic-fs-200, 14px);height:var(--intergalactic-form-control-m, 28px)}.___SInput_1v5g2_gg_._size_l_1v5g2_gg_{font-size:var(--intergalactic-fs-300, 16px);height:var(--intergalactic-form-control-l, 40px)}.___SInput_1v5g2_gg_.__focused_1v5g2_gg_{z-index:1}.___SInput_1v5g2_gg_._state_normal_1v5g2_gg_ .___SOutline_1v5g2_gg_{border-color:var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161))}@supports (color:color(display-p3 0 0 0)){.___SInput_1v5g2_gg_._state_normal_1v5g2_gg_ .___SOutline_1v5g2_gg_{border-color:var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161))}@media (color-gamut:p3){.___SInput_1v5g2_gg_._state_normal_1v5g2_gg_ .___SOutline_1v5g2_gg_{border-color:var(--intergalactic-border-primary, color(display-p3 0.00798 0.04498 0.03219 / 0.161))}}}.___SInput_1v5g2_gg_._state_normal_1v5g2_gg_.__focused_1v5g2_gg_ .___SOutline_1v5g2_gg_{border-color:var(--intergalactic-border-info-active, rgba(0, 22, 195, 0.386));box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 18, 193, 0.441))}@supports (color:color(display-p3 0 0 0)){.___SInput_1v5g2_gg_._state_normal_1v5g2_gg_.__focused_1v5g2_gg_ .___SOutline_1v5g2_gg_{border-color:var(--intergalactic-border-info-active, rgba(0, 22, 195, 0.386))}@media (color-gamut:p3){.___SInput_1v5g2_gg_._state_normal_1v5g2_gg_.__focused_1v5g2_gg_ .___SOutline_1v5g2_gg_{border-color:var(--intergalactic-border-info-active, color(display-p3 0.01805 0.08333 0.73488 / 0.386))}}}.___SInput_1v5g2_gg_._state_valid_1v5g2_gg_ .___SOutline_1v5g2_gg_{border-color:var(--intergalactic-border-success-active, rgb(0, 204, 154))}@supports (color:color(display-p3 0 0 0)){.___SInput_1v5g2_gg_._state_valid_1v5g2_gg_ .___SOutline_1v5g2_gg_{border-color:var(--intergalactic-border-success-active, rgb(0, 204, 154))}@media (color-gamut:p3){.___SInput_1v5g2_gg_._state_valid_1v5g2_gg_ .___SOutline_1v5g2_gg_{border-color:var(--intergalactic-border-success-active, color(display-p3 0.36013 0.78771 0.61714))}}}.___SInput_1v5g2_gg_._state_valid_1v5g2_gg_.__focused_1v5g2_gg_ .___SOutline_1v5g2_gg_{border-color:var(--intergalactic-border-success-active, rgb(0, 204, 154));box-shadow:var(--intergalactic-keyboard-focus-valid, 0px 0px 0px 3px rgb(0, 190, 142))}@supports (color:color(display-p3 0 0 0)){.___SInput_1v5g2_gg_._state_valid_1v5g2_gg_.__focused_1v5g2_gg_ .___SOutline_1v5g2_gg_{border-color:var(--intergalactic-border-success-active, rgb(0, 204, 154));box-shadow:var(--intergalactic-keyboard-focus-valid, 0px 0px 0px 3px rgb(0, 190, 142))}@media (color-gamut:p3){.___SInput_1v5g2_gg_._state_valid_1v5g2_gg_.__focused_1v5g2_gg_ .___SOutline_1v5g2_gg_{border-color:var(--intergalactic-border-success-active, color(display-p3 0.36013 0.78771 0.61714));box-shadow:var(--intergalactic-keyboard-focus-valid, 0px 0px 0px 3px color(display-p3 0.33388 0.7337 0.56959))}}}.___SInput_1v5g2_gg_._state_invalid_1v5g2_gg_ .___SOutline_1v5g2_gg_{border-color:var(--intergalactic-border-critical-active, rgba(255, 0, 4, 0.56))}@supports (color:color(display-p3 0 0 0)){.___SInput_1v5g2_gg_._state_invalid_1v5g2_gg_ .___SOutline_1v5g2_gg_{border-color:var(--intergalactic-border-critical-active, rgba(255, 0, 4, 0.56))}@media (color-gamut:p3){.___SInput_1v5g2_gg_._state_invalid_1v5g2_gg_ .___SOutline_1v5g2_gg_{border-color:var(--intergalactic-border-critical-active, color(display-p3 0.918 0.19866 0.14259 / 0.56))}}}.___SInput_1v5g2_gg_._state_invalid_1v5g2_gg_.__focused_1v5g2_gg_ .___SOutline_1v5g2_gg_{border-color:var(--intergalactic-border-critical-active, rgba(255, 0, 4, 0.56));box-shadow:var(--intergalactic-keyboard-focus-invalid, 0px 0px 0px 3px rgba(255, 2, 7, 0.652))}@supports (color:color(display-p3 0 0 0)){.___SInput_1v5g2_gg_._state_invalid_1v5g2_gg_.__focused_1v5g2_gg_ .___SOutline_1v5g2_gg_{border-color:var(--intergalactic-border-critical-active, rgba(255, 0, 4, 0.56))}@media (color-gamut:p3){.___SInput_1v5g2_gg_._state_invalid_1v5g2_gg_.__focused_1v5g2_gg_ .___SOutline_1v5g2_gg_{border-color:var(--intergalactic-border-critical-active, color(display-p3 0.918 0.19866 0.14259 / 0.56))}}}.___SInput_1v5g2_gg_._neighborLocation_right_1v5g2_gg_ .___SOutline_1v5g2_gg_{border-top-right-radius:0;border-bottom-right-radius:0}.___SInput_1v5g2_gg_._neighborLocation_both_1v5g2_gg_ .___SOutline_1v5g2_gg_{border-radius:0;border-left:none}.___SInput_1v5g2_gg_._neighborLocation_left_1v5g2_gg_ .___SOutline_1v5g2_gg_{border-top-left-radius:0;border-bottom-left-radius:0;border-left:none}.___SValue_1v5g2_gg_._neighborLocation_right_1v5g2_gg_{padding-right:0}.___SValue_1v5g2_gg_._neighborLocation_both_1v5g2_gg_{padding-left:0;padding-right:0}.___SValue_1v5g2_gg_._neighborLocation_left_1v5g2_gg_{padding-left:0}",
|
|
16
21
|
/*__inner_css_end__*/
|
|
17
|
-
"
|
|
22
|
+
"1v5g2_gg_"
|
|
18
23
|
), /*__reshadow_css_end__*/
|
|
19
24
|
{
|
|
20
|
-
"__SInput": "
|
|
21
|
-
"_disabled": "
|
|
22
|
-
"__SOutline": "
|
|
23
|
-
"__SValue": "
|
|
24
|
-
"__SAddon": "
|
|
25
|
-
"_size_m": "
|
|
26
|
-
"__SButton": "
|
|
27
|
-
"_size_l": "
|
|
28
|
-
"
|
|
29
|
-
"
|
|
30
|
-
"_neighborLocation_both": "
|
|
31
|
-
"
|
|
32
|
-
"
|
|
33
|
-
"
|
|
34
|
-
"
|
|
25
|
+
"__SInput": "___SInput_1v5g2_gg_",
|
|
26
|
+
"_disabled": "__disabled_1v5g2_gg_",
|
|
27
|
+
"__SOutline": "___SOutline_1v5g2_gg_",
|
|
28
|
+
"__SValue": "___SValue_1v5g2_gg_",
|
|
29
|
+
"__SAddon": "___SAddon_1v5g2_gg_",
|
|
30
|
+
"_size_m": "_size_m_1v5g2_gg_",
|
|
31
|
+
"__SButton": "___SButton_1v5g2_gg_",
|
|
32
|
+
"_size_l": "_size_l_1v5g2_gg_",
|
|
33
|
+
"_focused": "__focused_1v5g2_gg_",
|
|
34
|
+
"_neighborLocation_right": "_neighborLocation_right_1v5g2_gg_",
|
|
35
|
+
"_neighborLocation_both": "_neighborLocation_both_1v5g2_gg_",
|
|
36
|
+
"_neighborLocation_left": "_neighborLocation_left_1v5g2_gg_",
|
|
37
|
+
"_interactive": "__interactive_1v5g2_gg_",
|
|
38
|
+
"_state_normal": "_state_normal_1v5g2_gg_",
|
|
39
|
+
"_state_valid": "_state_valid_1v5g2_gg_",
|
|
40
|
+
"_state_invalid": "_state_invalid_1v5g2_gg_"
|
|
35
41
|
})
|
|
36
42
|
);
|
|
37
|
-
var Input = /* @__PURE__ */
|
|
43
|
+
var Input = /* @__PURE__ */ function(_Component) {
|
|
44
|
+
_inherits(Input2, _Component);
|
|
45
|
+
var _super = _createSuper(Input2);
|
|
38
46
|
function Input2() {
|
|
39
47
|
var _this;
|
|
40
48
|
_classCallCheck(this, Input2);
|
|
41
49
|
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
42
50
|
args[_key] = arguments[_key];
|
|
43
51
|
}
|
|
44
|
-
_this =
|
|
45
|
-
_defineProperty(_this, "
|
|
46
|
-
|
|
52
|
+
_this = _super.call.apply(_super, [this].concat(args));
|
|
53
|
+
_defineProperty(_assertThisInitialized(_this), "state", {
|
|
54
|
+
focused: false
|
|
55
|
+
});
|
|
56
|
+
_defineProperty(_assertThisInitialized(_this), "inputRef", /* @__PURE__ */ React.createRef());
|
|
57
|
+
_defineProperty(_assertThisInitialized(_this), "handleMouseDownAddon", function(event) {
|
|
47
58
|
var _this$inputRef$curren;
|
|
48
59
|
event.preventDefault();
|
|
49
|
-
(_this$inputRef$curren = _this.inputRef.current) === null || _this$inputRef$curren === void 0
|
|
60
|
+
(_this$inputRef$curren = _this.inputRef.current) === null || _this$inputRef$curren === void 0 ? void 0 : _this$inputRef$curren.focus();
|
|
50
61
|
});
|
|
51
|
-
_defineProperty(_this, "
|
|
52
|
-
if (
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
62
|
+
_defineProperty(_assertThisInitialized(_this), "handleKeyDown", function(event) {
|
|
63
|
+
if (event.key === "Enter") {
|
|
64
|
+
setTimeout(function() {
|
|
65
|
+
if (document.activeElement === document.body) {
|
|
66
|
+
var _this$inputRef$curren2;
|
|
67
|
+
(_this$inputRef$curren2 = _this.inputRef.current) === null || _this$inputRef$curren2 === void 0 ? void 0 : _this$inputRef$curren2.focus();
|
|
68
|
+
}
|
|
69
|
+
}, 10);
|
|
70
|
+
}
|
|
71
|
+
});
|
|
72
|
+
_defineProperty(_assertThisInitialized(_this), "bindHandleValueFocused", function(focused) {
|
|
73
|
+
return function() {
|
|
74
|
+
return _this.setState({
|
|
75
|
+
focused
|
|
76
|
+
});
|
|
77
|
+
};
|
|
59
78
|
});
|
|
60
79
|
return _this;
|
|
61
80
|
}
|
|
62
|
-
|
|
63
|
-
return _createClass(Input2, [{
|
|
81
|
+
_createClass(Input2, [{
|
|
64
82
|
key: "getAddonProps",
|
|
65
83
|
value: function getAddonProps() {
|
|
66
84
|
var _this$asProps = this.asProps, disabled = _this$asProps.disabled, size = _this$asProps.size;
|
|
67
85
|
return {
|
|
68
86
|
disabled,
|
|
69
87
|
onMouseDown: this.handleMouseDownAddon,
|
|
70
|
-
onClick: this.handleClick,
|
|
71
88
|
size
|
|
72
89
|
};
|
|
73
90
|
}
|
|
@@ -76,10 +93,12 @@ var Input = /* @__PURE__ */ (function(_Component) {
|
|
|
76
93
|
value: function getValueProps() {
|
|
77
94
|
var _this$asProps2 = this.asProps, size = _this$asProps2.size, disabled = _this$asProps2.disabled, state = _this$asProps2.state, role = _this$asProps2.role, placeholder = _this$asProps2.placeholder, ariaHaspopup = _this$asProps2["aria-haspopup"], ariaControls = _this$asProps2["aria-controls"], ariaExpanded = _this$asProps2["aria-expanded"], ariaAutocomplete = _this$asProps2["aria-autocomplete"], ariaOwns = _this$asProps2["aria-owns"], ariaActivedescendant = _this$asProps2["aria-activedescendant"];
|
|
78
95
|
return {
|
|
79
|
-
|
|
96
|
+
ref: this.inputRef,
|
|
80
97
|
size,
|
|
81
98
|
disabled,
|
|
82
99
|
state,
|
|
100
|
+
onFocus: this.bindHandleValueFocused(true),
|
|
101
|
+
onBlur: this.bindHandleValueFocused(false),
|
|
83
102
|
role,
|
|
84
103
|
placeholder,
|
|
85
104
|
"aria-haspopup": ariaHaspopup,
|
|
@@ -90,18 +109,30 @@ var Input = /* @__PURE__ */ (function(_Component) {
|
|
|
90
109
|
"aria-activedescendant": ariaActivedescendant
|
|
91
110
|
};
|
|
92
111
|
}
|
|
112
|
+
}, {
|
|
113
|
+
key: "componentDidUpdate",
|
|
114
|
+
value: function componentDidUpdate(prevProps) {
|
|
115
|
+
if (prevProps.disabled !== this.asProps.disabled && this.asProps.disabled) {
|
|
116
|
+
this.setState({
|
|
117
|
+
focused: false
|
|
118
|
+
});
|
|
119
|
+
}
|
|
120
|
+
}
|
|
93
121
|
}, {
|
|
94
122
|
key: "render",
|
|
95
123
|
value: function render() {
|
|
96
|
-
var _ref = this.asProps;
|
|
124
|
+
var _ref = this.asProps, _this2 = this;
|
|
97
125
|
var SInput = Box;
|
|
98
126
|
var SOutline = "div";
|
|
99
127
|
var _this$asProps3 = this.asProps, Children = _this$asProps3.Children, styles = _this$asProps3.styles, neighborLocation = _this$asProps3.neighborLocation, controlsLength = _this$asProps3.controlsLength, state = _this$asProps3.state;
|
|
128
|
+
var focused = this.state.focused;
|
|
100
129
|
return /* @__PURE__ */ React.createElement(NeighborLocation.Detect, {
|
|
101
130
|
neighborLocation
|
|
102
131
|
}, function(neighborLocation2) {
|
|
103
132
|
var _ref4;
|
|
104
|
-
return _ref4 = sstyled(styles), /* @__PURE__ */ React.createElement(SInput, _ref4.cn("SInput", _objectSpread({}, assignProps({
|
|
133
|
+
return _ref4 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SInput, _ref4.cn("SInput", _objectSpread({}, assignProps({
|
|
134
|
+
"focused": focused,
|
|
135
|
+
"onKeyDown": _this2.handleKeyDown,
|
|
105
136
|
"neighborLocation": neighborLocation2,
|
|
106
137
|
"__excludeProps": ["role", "aria-haspopup", "aria-controls", "aria-expanded", "placeholder", "aria-autocomplete", "aria-owns", "aria-activedescendant", "tabIndex"]
|
|
107
138
|
}, _ref))), /* @__PURE__ */ React.createElement(NeighborLocation, _ref4.cn("NeighborLocation", {
|
|
@@ -110,37 +141,22 @@ var Input = /* @__PURE__ */ (function(_Component) {
|
|
|
110
141
|
});
|
|
111
142
|
}
|
|
112
143
|
}]);
|
|
113
|
-
|
|
144
|
+
return Input2;
|
|
145
|
+
}(Component);
|
|
114
146
|
_defineProperty(Input, "displayName", "Input");
|
|
115
147
|
_defineProperty(Input, "defaultProps", {
|
|
116
148
|
size: "m",
|
|
117
149
|
state: "normal"
|
|
118
150
|
});
|
|
119
151
|
_defineProperty(Input, "style", style);
|
|
120
|
-
var Value = /* @__PURE__ */
|
|
152
|
+
var Value = /* @__PURE__ */ function(_Component2) {
|
|
153
|
+
_inherits(Value2, _Component2);
|
|
154
|
+
var _super2 = _createSuper(Value2);
|
|
121
155
|
function Value2() {
|
|
122
|
-
var _this2;
|
|
123
156
|
_classCallCheck(this, Value2);
|
|
124
|
-
|
|
125
|
-
args[_key2] = arguments[_key2];
|
|
126
|
-
}
|
|
127
|
-
_this2 = _callSuper(this, Value2, [].concat(args));
|
|
128
|
-
_defineProperty(_this2, "inputRef", /* @__PURE__ */ React.createRef());
|
|
129
|
-
return _this2;
|
|
157
|
+
return _super2.apply(this, arguments);
|
|
130
158
|
}
|
|
131
|
-
|
|
132
|
-
return _createClass(Value2, [{
|
|
133
|
-
key: "componentDidMount",
|
|
134
|
-
value: function componentDidMount() {
|
|
135
|
-
var _this3 = this;
|
|
136
|
-
if (this.asProps.autoFocus) {
|
|
137
|
-
setTimeout(function() {
|
|
138
|
-
var _this3$inputRef$curre;
|
|
139
|
-
(_this3$inputRef$curre = _this3.inputRef.current) === null || _this3$inputRef$curre === void 0 || _this3$inputRef$curre.focus();
|
|
140
|
-
}, 10);
|
|
141
|
-
}
|
|
142
|
-
}
|
|
143
|
-
}, {
|
|
159
|
+
_createClass(Value2, [{
|
|
144
160
|
key: "uncontrolledProps",
|
|
145
161
|
value: function uncontrolledProps() {
|
|
146
162
|
return {
|
|
@@ -152,29 +168,28 @@ var Value = /* @__PURE__ */ (function(_Component2) {
|
|
|
152
168
|
}, {
|
|
153
169
|
key: "render",
|
|
154
170
|
value: function render() {
|
|
155
|
-
var _ref2 = this.asProps
|
|
171
|
+
var _ref2 = this.asProps;
|
|
156
172
|
var SValue = Box;
|
|
157
173
|
var _this$asProps4 = this.asProps, styles = _this$asProps4.styles, neighborLocation = _this$asProps4.neighborLocation, state = _this$asProps4.state;
|
|
158
174
|
return /* @__PURE__ */ React.createElement(NeighborLocation.Detect, {
|
|
159
175
|
neighborLocation
|
|
160
176
|
}, function(neighborLocation2) {
|
|
161
177
|
var _ref5;
|
|
162
|
-
return _ref5 = sstyled(styles), /* @__PURE__ */ React.createElement(SValue, _ref5.cn("SValue", _objectSpread({}, assignProps({
|
|
163
|
-
"ref": _this4.inputRef,
|
|
164
|
-
"inAfterOutline": true,
|
|
178
|
+
return _ref5 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SValue, _ref5.cn("SValue", _objectSpread({}, assignProps({
|
|
165
179
|
"neighborLocation": neighborLocation2,
|
|
166
180
|
"tag": "input",
|
|
167
181
|
"type": "text",
|
|
168
|
-
"aria-invalid": state === "invalid"
|
|
169
|
-
"use:autoFocus": false
|
|
182
|
+
"aria-invalid": state === "invalid"
|
|
170
183
|
}, _ref2))));
|
|
171
184
|
});
|
|
172
185
|
}
|
|
173
186
|
}]);
|
|
174
|
-
|
|
187
|
+
return Value2;
|
|
188
|
+
}(Component);
|
|
175
189
|
_defineProperty(Value, "defaultProps", {
|
|
176
190
|
defaultValue: ""
|
|
177
191
|
});
|
|
192
|
+
_defineProperty(Value, "enhance", [keyboardFocusEnhance(), autoFocusEnhance()]);
|
|
178
193
|
function Addon(props) {
|
|
179
194
|
var _ref3 = arguments[0];
|
|
180
195
|
var SAddon = Box;
|
|
@@ -183,15 +198,15 @@ function Addon(props) {
|
|
|
183
198
|
neighborLocation
|
|
184
199
|
}, function(neighborLocation2) {
|
|
185
200
|
var _ref6;
|
|
186
|
-
return _ref6 = sstyled(styles), /* @__PURE__ */ React.createElement(SAddon, _ref6.cn("SAddon", _objectSpread({}, assignProps({
|
|
201
|
+
return _ref6 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SAddon, _ref6.cn("SAddon", _objectSpread({}, assignProps({
|
|
187
202
|
"neighborLocation": neighborLocation2
|
|
188
203
|
}, _ref3))), /* @__PURE__ */ React.createElement(Children, _ref6.cn("Children", {})));
|
|
189
204
|
});
|
|
190
205
|
}
|
|
191
|
-
const
|
|
206
|
+
const Input$1 = createComponent(Input, {
|
|
192
207
|
Addon,
|
|
193
208
|
Value
|
|
194
209
|
});
|
|
195
210
|
export {
|
|
196
|
-
|
|
211
|
+
Input$1 as default
|
|
197
212
|
};
|
|
@@ -13,20 +13,10 @@ SInput {
|
|
|
13
13
|
border-radius: var(--intergalactic-control-rounded, 6px);
|
|
14
14
|
-webkit-box-shadow: 0 0 0 30px rgb(250, 255, 189) inset;
|
|
15
15
|
|
|
16
|
-
|
|
16
|
+
& ~ SOutline {
|
|
17
17
|
background-color: rgb(250, 255, 189);
|
|
18
18
|
}
|
|
19
19
|
}
|
|
20
|
-
|
|
21
|
-
SValue {
|
|
22
|
-
&:focus, &:focus-visible {
|
|
23
|
-
outline: none;
|
|
24
|
-
|
|
25
|
-
&::after {
|
|
26
|
-
outline: none;
|
|
27
|
-
}
|
|
28
|
-
}
|
|
29
|
-
}
|
|
30
20
|
}
|
|
31
21
|
|
|
32
22
|
SValue {
|
|
@@ -43,11 +33,15 @@ SValue {
|
|
|
43
33
|
font-family: inherit;
|
|
44
34
|
background: transparent;
|
|
45
35
|
|
|
36
|
+
&:focus {
|
|
37
|
+
outline: none;
|
|
38
|
+
}
|
|
39
|
+
|
|
46
40
|
&::placeholder {
|
|
47
41
|
color: var(--intergalactic-text-placeholder, oklch(0.098 0.023 157.4 / 0.457));
|
|
48
42
|
}
|
|
49
43
|
|
|
50
|
-
&:not(:disabled):read-only~SOutline {
|
|
44
|
+
&:not(:disabled):read-only ~ SOutline {
|
|
51
45
|
background: var(--intergalactic-bg-secondary-neutral, oklch(0.98 0.001 180));
|
|
52
46
|
}
|
|
53
47
|
|
|
@@ -57,8 +51,7 @@ SValue {
|
|
|
57
51
|
}
|
|
58
52
|
}
|
|
59
53
|
|
|
60
|
-
SInput[disabled] SOutline,
|
|
61
|
-
SValue:disabled~SOutline {
|
|
54
|
+
SInput[disabled] SOutline, SValue:disabled ~ SOutline {
|
|
62
55
|
|
|
63
56
|
opacity: var(--intergalactic-disabled-opacity, 0.4);
|
|
64
57
|
cursor: default;
|
|
@@ -104,15 +97,10 @@ SAddon[disabled] {
|
|
|
104
97
|
SAddon[size='m']:not(SButton) {
|
|
105
98
|
padding: 0 var(--intergalactic-spacing-2x, 8px);
|
|
106
99
|
}
|
|
107
|
-
|
|
108
|
-
SAddon[size='l'][neighborLocation='right']:not(SButton) {
|
|
100
|
+
SAddon[size='l']:not(SButton) {
|
|
109
101
|
padding: 0 var(--intergalactic-spacing-2x, 8px) 0 var(--intergalactic-spacing-3x, 12px);
|
|
110
102
|
}
|
|
111
103
|
|
|
112
|
-
SAddon[size='l'][neighborLocation='left']:not(SButton) {
|
|
113
|
-
padding: 0 var(--intergalactic-spacing-3x, 12px) 0 var(--intergalactic-spacing-2x, 8px);
|
|
114
|
-
}
|
|
115
|
-
|
|
116
104
|
SInput SAddon:nth-last-child(2) {
|
|
117
105
|
margin-right: -1px;
|
|
118
106
|
}
|
|
@@ -120,7 +108,6 @@ SInput SAddon:nth-last-child(2) {
|
|
|
120
108
|
SValue[size='m'] {
|
|
121
109
|
padding: 0 var(--intergalactic-spacing-2x, 8px);
|
|
122
110
|
}
|
|
123
|
-
|
|
124
111
|
SValue[size='l'] {
|
|
125
112
|
padding: 0 var(--intergalactic-spacing-3x, 12px);
|
|
126
113
|
}
|
|
@@ -135,7 +122,7 @@ SInput[size='l'] {
|
|
|
135
122
|
height: var(--intergalactic-form-control-l, 40px);
|
|
136
123
|
}
|
|
137
124
|
|
|
138
|
-
SInput
|
|
125
|
+
SInput[focused] {
|
|
139
126
|
z-index: 1;
|
|
140
127
|
}
|
|
141
128
|
|
|
@@ -144,42 +131,29 @@ SInput[state='normal'] {
|
|
|
144
131
|
border-color: var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161));
|
|
145
132
|
}
|
|
146
133
|
|
|
147
|
-
|
|
148
|
-
@mixin focus-outline-mixin {
|
|
149
|
-
outline-offset: 0;
|
|
150
|
-
transition-property: outline-color, outline-width;
|
|
151
|
-
}
|
|
134
|
+
&[focused] SOutline {
|
|
152
135
|
border-color: var(--intergalactic-border-info-active, oklch(0.382 0.248 264.2 / 0.386));
|
|
136
|
+
box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px oklch(0.376 0.247 264.2 / 0.441));
|
|
153
137
|
}
|
|
154
138
|
}
|
|
155
|
-
|
|
156
139
|
SInput[state='valid'] {
|
|
157
140
|
& SOutline {
|
|
158
141
|
border-color: var(--intergalactic-border-success-active, oklch(0.75 0.153 167.5));
|
|
159
142
|
}
|
|
160
143
|
|
|
161
|
-
|
|
162
|
-
@mixin focus-outline-mixin {
|
|
163
|
-
outline-offset: 0;
|
|
164
|
-
transition-property: outline-color, outline-width;
|
|
165
|
-
}
|
|
144
|
+
&[focused] SOutline {
|
|
166
145
|
border-color: var(--intergalactic-border-success-active, oklch(0.75 0.153 167.5));
|
|
167
|
-
|
|
146
|
+
box-shadow: var(--intergalactic-keyboard-focus-valid, 0px 0px 0px 3px oklch(0.711 0.146 166.9));
|
|
168
147
|
}
|
|
169
148
|
}
|
|
170
|
-
|
|
171
149
|
SInput[state='invalid'] {
|
|
172
150
|
& SOutline {
|
|
173
151
|
border-color: var(--intergalactic-border-critical-active, oklch(0.628 0.258 29 / 0.56));
|
|
174
152
|
}
|
|
175
153
|
|
|
176
|
-
|
|
177
|
-
@mixin focus-outline-mixin {
|
|
178
|
-
outline-offset: 0;
|
|
179
|
-
transition-property: outline-color, outline-width;
|
|
180
|
-
}
|
|
154
|
+
&[focused] SOutline {
|
|
181
155
|
border-color: var(--intergalactic-border-critical-active, oklch(0.628 0.258 29 / 0.56));
|
|
182
|
-
|
|
156
|
+
box-shadow: var(--intergalactic-keyboard-focus-invalid, 0px 0px 0px 3px oklch(0.628 0.257 28.9 / 0.652));
|
|
183
157
|
}
|
|
184
158
|
}
|
|
185
159
|
|
|
@@ -189,14 +163,12 @@ SInput[neighborLocation='right'] {
|
|
|
189
163
|
border-bottom-right-radius: 0;
|
|
190
164
|
}
|
|
191
165
|
}
|
|
192
|
-
|
|
193
166
|
SInput[neighborLocation='both'] {
|
|
194
167
|
& SOutline {
|
|
195
168
|
border-radius: 0;
|
|
196
169
|
border-left: none;
|
|
197
170
|
}
|
|
198
171
|
}
|
|
199
|
-
|
|
200
172
|
SInput[neighborLocation='left'] {
|
|
201
173
|
& SOutline {
|
|
202
174
|
border-top-left-radius: 0;
|
package/lib/types/index.d.ts
CHANGED
|
@@ -1,9 +1,13 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { Intergalactic, PropGetterFn, UnknownProperties } from '@semcore/core';
|
|
3
|
+
import { BoxProps } from '@semcore/flex-box';
|
|
4
|
+
import { NeighborItemProps, NeighborLocationProps } from '@semcore/neighbor-location';
|
|
5
|
+
import { WithAutoFocusEnhanceProps } from '@semcore/utils/lib/enhances/autoFocusEnhance';
|
|
4
6
|
|
|
5
7
|
export type InputSize = 'm' | 'l';
|
|
6
8
|
|
|
9
|
+
/** @deprecated */
|
|
10
|
+
export interface IInputProps extends InputProps, UnknownProperties {}
|
|
7
11
|
export type InputProps = BoxProps &
|
|
8
12
|
NeighborItemProps &
|
|
9
13
|
NeighborLocationProps & {
|
|
@@ -23,8 +27,11 @@ export type InputProps = BoxProps &
|
|
|
23
27
|
state?: 'normal' | 'invalid' | 'valid';
|
|
24
28
|
};
|
|
25
29
|
|
|
30
|
+
/** @deprecated */
|
|
31
|
+
export interface IInputValueProps extends InputValueProps, UnknownProperties {}
|
|
26
32
|
export type InputValueProps = BoxProps &
|
|
27
|
-
NeighborItemProps &
|
|
33
|
+
NeighborItemProps &
|
|
34
|
+
WithAutoFocusEnhanceProps & {
|
|
28
35
|
/**
|
|
29
36
|
* Input value
|
|
30
37
|
*/
|
|
@@ -37,6 +44,10 @@ export type InputValueProps = BoxProps &
|
|
|
37
44
|
* Handler for changing the value
|
|
38
45
|
*/
|
|
39
46
|
onChange?: (value: string, event: React.SyntheticEvent<HTMLInputElement>) => void;
|
|
47
|
+
/**
|
|
48
|
+
* @deprecated Set `disabled` on `Input` instead.
|
|
49
|
+
* */
|
|
50
|
+
disabled?: boolean;
|
|
40
51
|
/**
|
|
41
52
|
* Sets the input to the read-only state
|
|
42
53
|
* */
|
|
@@ -50,15 +61,29 @@ export type InputValueProps = BoxProps &
|
|
|
50
61
|
* Placeholder for input
|
|
51
62
|
*/
|
|
52
63
|
placeholder?: string;
|
|
64
|
+
};
|
|
65
|
+
|
|
66
|
+
/** @deprecated */
|
|
67
|
+
export interface IInputAddonProps extends InputAddonProps, UnknownProperties {}
|
|
68
|
+
export type InputAddonProps = BoxProps &
|
|
69
|
+
NeighborItemProps & {
|
|
53
70
|
/**
|
|
54
|
-
*
|
|
55
|
-
* @default false
|
|
71
|
+
* Adds styles for interactive icons
|
|
56
72
|
*/
|
|
57
|
-
|
|
73
|
+
interactive?: boolean;
|
|
74
|
+
/**
|
|
75
|
+
* Blocks the addon
|
|
76
|
+
* */
|
|
77
|
+
disabled?: boolean;
|
|
78
|
+
/**
|
|
79
|
+
* Input size
|
|
80
|
+
* @default m
|
|
81
|
+
*/
|
|
82
|
+
size?: InputSize;
|
|
58
83
|
};
|
|
59
84
|
|
|
60
|
-
|
|
61
|
-
|
|
85
|
+
/** @deprecated */
|
|
86
|
+
export interface IInputCtx extends InputCtx, UnknownProperties {}
|
|
62
87
|
export type InputCtx = {
|
|
63
88
|
getValueProps: PropGetterFn;
|
|
64
89
|
getAddonProps: PropGetterFn;
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@semcore/input",
|
|
3
3
|
"description": "Semrush Input Component",
|
|
4
|
-
"version": "4.43.0-prerelease.
|
|
4
|
+
"version": "4.43.0-prerelease.1",
|
|
5
5
|
"main": "lib/cjs/index.js",
|
|
6
6
|
"module": "lib/es6/index.js",
|
|
7
7
|
"typings": "lib/types/index.d.ts",
|
|
@@ -14,12 +14,12 @@
|
|
|
14
14
|
"types": "./lib/types/index.d.ts"
|
|
15
15
|
},
|
|
16
16
|
"dependencies": {
|
|
17
|
-
"@semcore/utils": "4.49.0-prerelease.
|
|
18
|
-
"@semcore/neighbor-location": "4.41.0-prerelease.
|
|
19
|
-
"@semcore/flex-box": "5.42.0-prerelease.
|
|
17
|
+
"@semcore/utils": "4.49.0-prerelease.1",
|
|
18
|
+
"@semcore/neighbor-location": "4.41.0-prerelease.1",
|
|
19
|
+
"@semcore/flex-box": "5.42.0-prerelease.1"
|
|
20
20
|
},
|
|
21
21
|
"peerDependencies": {
|
|
22
|
-
"@semcore/core": "^2.40.0-prerelease.
|
|
22
|
+
"@semcore/core": "^2.40.0-prerelease.1",
|
|
23
23
|
"react": "16.8 - 18",
|
|
24
24
|
"react-dom": "16.8 - 18"
|
|
25
25
|
},
|