@semcore/input 16.1.1-prerelease.5 → 16.1.2-prerelease.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 +7 -1
- package/README.md +4 -4
- package/lib/cjs/Input.js +138 -161
- package/lib/cjs/Input.js.map +1 -1
- package/lib/cjs/index.d.js.map +1 -1
- package/lib/cjs/index.js +3 -3
- package/lib/cjs/style/input.shadow.css +5 -1
- package/lib/es6/Input.js +130 -153
- package/lib/es6/Input.js.map +1 -1
- package/lib/es6/index.d.js.map +1 -1
- package/lib/es6/style/input.shadow.css +5 -1
- package/lib/esm/Input.mjs +135 -133
- package/lib/esm/style/input.shadow.css +5 -1
- package/lib/types/index.d.ts +8 -18
- package/package.json +5 -8
package/lib/esm/Input.mjs
CHANGED
|
@@ -1,181 +1,183 @@
|
|
|
1
|
-
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
|
|
2
|
-
import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
|
|
3
|
-
import _createClass from "@babel/runtime/helpers/esm/createClass";
|
|
4
|
-
import _callSuper from "@babel/runtime/helpers/esm/callSuper";
|
|
5
|
-
import _inherits from "@babel/runtime/helpers/esm/inherits";
|
|
6
1
|
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
7
|
-
import { createComponent, sstyled,
|
|
8
|
-
import
|
|
9
|
-
import { Box, InvalidStateBox } from "@semcore/flex-box";
|
|
10
|
-
import NeighborLocation from "@semcore/neighbor-location";
|
|
2
|
+
import { createComponent, sstyled, Component, lastInteraction, assignProps } from "@semcore/core";
|
|
3
|
+
import { NeighborLocation, Box, InvalidStateBox } from "@semcore/base-components";
|
|
11
4
|
import React from "react";
|
|
12
5
|
/*!__reshadow-styles__:"./style/input.shadow.css"*/
|
|
13
|
-
|
|
6
|
+
const style = (
|
|
14
7
|
/*__reshadow_css_start__*/
|
|
15
8
|
(sstyled.insert(
|
|
16
9
|
/*__inner_css_start__*/
|
|
17
|
-
".
|
|
10
|
+
".___SInput_1yq06_gg_{display:inline-flex;width:100%;align-items:center;position:relative;z-index:0;vertical-align:middle;padding:1px;box-sizing:border-box}.___SInput_1yq06_gg_ input:-webkit-autofill{border-radius:var(--intergalactic-control-rounded, 6px);-webkit-box-shadow:0 0 0 30px #faffbd inset}.___SInput_1yq06_gg_ input:-webkit-autofill~.___SOutline_1yq06_gg_{background-color:#faffbd}.___SInput_1yq06_gg_ .___SValue_1yq06_gg_:focus,.___SInput_1yq06_gg_ .___SValue_1yq06_gg_:focus-visible,.___SInput_1yq06_gg_ .___SValue_1yq06_gg_:focus-visible::after,.___SInput_1yq06_gg_ .___SValue_1yq06_gg_:focus::after{outline:0}.___SValue_1yq06_gg_{min-width:0;width:100%;height:100%;padding:0;border:0;box-sizing:border-box;color:var(--intergalactic-text-primary, #191b23);font-size:inherit;text-overflow:ellipsis;font-family:inherit;background:0 0}.___SValue_1yq06_gg_::-moz-placeholder{color:var(--intergalactic-text-placeholder, #8a8e9b)}.___SValue_1yq06_gg_::placeholder{color:var(--intergalactic-text-placeholder, #8a8e9b)}.___SValue_1yq06_gg_:not(:disabled):-moz-read-only~.___SOutline_1yq06_gg_{background:var(--intergalactic-bg-secondary-neutral, #f4f5f9)}.___SValue_1yq06_gg_:not(:disabled):read-only~.___SOutline_1yq06_gg_{background:var(--intergalactic-bg-secondary-neutral, #f4f5f9)}.___SValue_1yq06_gg_:disabled{-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--intergalactic-disabled-opacity, 0.3)}.___SInput_1yq06_gg_.__disabled_1yq06_gg_ .___SOutline_1yq06_gg_,.___SValue_1yq06_gg_:disabled~.___SOutline_1yq06_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none}.___SOutline_1yq06_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, #ffffff)}.___SAddon_1yq06_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, #a9abb6)}.___SAddon_1yq06_gg_.__interactive_1yq06_gg_{cursor:pointer}@media (hover:hover){.___SAddon_1yq06_gg_.__interactive_1yq06_gg_:hover{color:var(--intergalactic-icon-secondary-neutral-hover-active, #878992)}}.___SAddon_1yq06_gg_.__disabled_1yq06_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none}.___SAddon_1yq06_gg_._size_m_1yq06_gg_:not(.___SButton_1yq06_gg_){padding:0 var(--intergalactic-spacing-2x, 8px)}.___SAddon_1yq06_gg_._size_l_1yq06_gg_._neighborLocation_right_1yq06_gg_:not(.___SButton_1yq06_gg_){padding:0 var(--intergalactic-spacing-2x, 8px)0 var(--intergalactic-spacing-3x, 12px)}.___SAddon_1yq06_gg_._size_l_1yq06_gg_._neighborLocation_left_1yq06_gg_:not(.___SButton_1yq06_gg_){padding:0 var(--intergalactic-spacing-3x, 12px)0 var(--intergalactic-spacing-2x, 8px)}.___SInput_1yq06_gg_ .___SAddon_1yq06_gg_:nth-last-child(2){margin-right:-1px}.___SValue_1yq06_gg_._size_m_1yq06_gg_{padding:0 var(--intergalactic-spacing-2x, 8px)}.___SValue_1yq06_gg_._size_l_1yq06_gg_{padding:0 var(--intergalactic-spacing-3x, 12px)}.___SInput_1yq06_gg_._size_m_1yq06_gg_{font-size:var(--intergalactic-fs-200, 14px);height:var(--intergalactic-form-control-m, 28px)}.___SInput_1yq06_gg_._size_l_1yq06_gg_{font-size:var(--intergalactic-fs-300, 16px);height:var(--intergalactic-form-control-l, 40px)}.___SInput_1yq06_gg_:has(.___SValue_1yq06_gg_:focus-visible){z-index:1}.___SInput_1yq06_gg_._state_normal_1yq06_gg_ .___SOutline_1yq06_gg_{border-color:var(--intergalactic-border-primary, #c4c7cf)}.___SInput_1yq06_gg_._state_normal_1yq06_gg_:has(.___SValue_1yq06_gg_:focus-visible) .___SOutline_1yq06_gg_{outline-color:var(--intergalactic-keyboard-focus-outline, #008ff8);outline-style:solid;outline-width:2px;transition-duration:calc(var(--intergalactic-duration-extra-fast, 100)*1ms);transition-timing-function:ease-in-out;outline-offset:0;transition-property:outline-color,outline-width;border-color:var(--intergalactic-border-info-active, #006dca)}.___SInput_1yq06_gg_._state_valid_1yq06_gg_ .___SOutline_1yq06_gg_{border-color:var(--intergalactic-border-success-active, #007c65)}.___SInput_1yq06_gg_._state_valid_1yq06_gg_:has(.___SValue_1yq06_gg_:focus-visible) .___SOutline_1yq06_gg_{outline-color:var(--intergalactic-keyboard-focus-outline, #008ff8);outline-style:solid;outline-width:2px;transition-duration:calc(var(--intergalactic-duration-extra-fast, 100)*1ms);transition-timing-function:ease-in-out;outline-offset:0;transition-property:outline-color,outline-width;border-color:var(--intergalactic-border-success-active, #007c65);outline-color:var(--intergalactic-keyboard-focus-valid-outline, #009f81)}.___SInput_1yq06_gg_._state_invalid_1yq06_gg_ .___SOutline_1yq06_gg_{border-color:var(--intergalactic-border-critical-active, #d1002f)}.___SInput_1yq06_gg_._state_invalid_1yq06_gg_:has(.___SValue_1yq06_gg_:focus-visible) .___SOutline_1yq06_gg_{outline-color:var(--intergalactic-keyboard-focus-outline, #008ff8);outline-style:solid;outline-width:2px;transition-duration:calc(var(--intergalactic-duration-extra-fast, 100)*1ms);transition-timing-function:ease-in-out;outline-offset:0;transition-property:outline-color,outline-width;border-color:var(--intergalactic-border-critical-active, #d1002f);outline-color:var(--intergalactic-keyboard-focus-invalid-outline, #ff4953)}.___SInput_1yq06_gg_._neighborLocation_right_1yq06_gg_ .___SOutline_1yq06_gg_{border-top-right-radius:0;border-bottom-right-radius:0}.___SInput_1yq06_gg_._neighborLocation_both_1yq06_gg_ .___SOutline_1yq06_gg_{border-radius:0;border-left:none}.___SInput_1yq06_gg_._neighborLocation_left_1yq06_gg_ .___SOutline_1yq06_gg_{border-top-left-radius:0;border-bottom-left-radius:0;border-left:none}.___SValue_1yq06_gg_._neighborLocation_right_1yq06_gg_{padding-right:0}.___SValue_1yq06_gg_._neighborLocation_both_1yq06_gg_{padding-left:0;padding-right:0}.___SValue_1yq06_gg_._neighborLocation_left_1yq06_gg_{padding-left:0}",
|
|
18
11
|
/*__inner_css_end__*/
|
|
19
|
-
"
|
|
12
|
+
"1yq06_gg_"
|
|
20
13
|
), /*__reshadow_css_end__*/
|
|
21
14
|
{
|
|
22
|
-
"__SInput": "
|
|
23
|
-
"_disabled": "
|
|
24
|
-
"__SOutline": "
|
|
25
|
-
"__SValue": "
|
|
26
|
-
"__SAddon": "
|
|
27
|
-
"_size_m": "
|
|
28
|
-
"__SButton": "
|
|
29
|
-
"_size_l": "
|
|
30
|
-
"_neighborLocation_right": "
|
|
31
|
-
"
|
|
32
|
-
"
|
|
33
|
-
"_interactive": "
|
|
34
|
-
"_state_normal": "
|
|
35
|
-
"_state_valid": "
|
|
36
|
-
"_state_invalid": "
|
|
15
|
+
"__SInput": "___SInput_1yq06_gg_",
|
|
16
|
+
"_disabled": "__disabled_1yq06_gg_",
|
|
17
|
+
"__SOutline": "___SOutline_1yq06_gg_",
|
|
18
|
+
"__SValue": "___SValue_1yq06_gg_",
|
|
19
|
+
"__SAddon": "___SAddon_1yq06_gg_",
|
|
20
|
+
"_size_m": "_size_m_1yq06_gg_",
|
|
21
|
+
"__SButton": "___SButton_1yq06_gg_",
|
|
22
|
+
"_size_l": "_size_l_1yq06_gg_",
|
|
23
|
+
"_neighborLocation_right": "_neighborLocation_right_1yq06_gg_",
|
|
24
|
+
"_neighborLocation_left": "_neighborLocation_left_1yq06_gg_",
|
|
25
|
+
"_neighborLocation_both": "_neighborLocation_both_1yq06_gg_",
|
|
26
|
+
"_interactive": "__interactive_1yq06_gg_",
|
|
27
|
+
"_state_normal": "_state_normal_1yq06_gg_",
|
|
28
|
+
"_state_valid": "_state_valid_1yq06_gg_",
|
|
29
|
+
"_state_invalid": "_state_invalid_1yq06_gg_"
|
|
37
30
|
})
|
|
38
31
|
);
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
}
|
|
46
|
-
_this = _callSuper(this, Input2, [].concat(args));
|
|
47
|
-
_defineProperty(_this, "inputRef", /* @__PURE__ */ React.createRef());
|
|
48
|
-
_defineProperty(_this, "handleMouseDownAddon", function(event) {
|
|
49
|
-
var _this$inputRef$curren;
|
|
32
|
+
class Input extends Component {
|
|
33
|
+
constructor(...args) {
|
|
34
|
+
super(...args);
|
|
35
|
+
_defineProperty(this, "inputRef", /* @__PURE__ */ React.createRef());
|
|
36
|
+
_defineProperty(this, "handleMouseDownAddon", (event) => {
|
|
37
|
+
var _a;
|
|
50
38
|
event.preventDefault();
|
|
51
|
-
(
|
|
39
|
+
(_a = this.inputRef.current) == null ? void 0 : _a.focus();
|
|
52
40
|
});
|
|
53
|
-
_defineProperty(
|
|
41
|
+
_defineProperty(this, "handleClick", () => {
|
|
54
42
|
if (!lastInteraction.isKeyboard) return;
|
|
55
|
-
setTimeout(
|
|
43
|
+
setTimeout(() => {
|
|
44
|
+
var _a;
|
|
56
45
|
if (document.activeElement === document.body) {
|
|
57
|
-
|
|
58
|
-
(_this$inputRef$curren2 = _this.inputRef.current) === null || _this$inputRef$curren2 === void 0 || _this$inputRef$curren2.focus();
|
|
46
|
+
(_a = this.inputRef.current) == null ? void 0 : _a.focus();
|
|
59
47
|
}
|
|
60
48
|
}, 0);
|
|
61
49
|
});
|
|
62
|
-
return _this;
|
|
63
50
|
}
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
51
|
+
getAddonProps() {
|
|
52
|
+
const {
|
|
53
|
+
disabled,
|
|
54
|
+
size
|
|
55
|
+
} = this.asProps;
|
|
56
|
+
return {
|
|
57
|
+
disabled,
|
|
58
|
+
onMouseDown: this.handleMouseDownAddon,
|
|
59
|
+
onClick: this.handleClick,
|
|
60
|
+
size
|
|
61
|
+
};
|
|
62
|
+
}
|
|
63
|
+
getValueProps() {
|
|
64
|
+
const {
|
|
65
|
+
size,
|
|
66
|
+
disabled,
|
|
67
|
+
state,
|
|
68
|
+
role,
|
|
69
|
+
placeholder,
|
|
70
|
+
// these props might be passed from the <Select /> component
|
|
71
|
+
"aria-haspopup": ariaHaspopup,
|
|
72
|
+
"aria-controls": ariaControls,
|
|
73
|
+
"aria-expanded": ariaExpanded,
|
|
74
|
+
"aria-autocomplete": ariaAutocomplete,
|
|
75
|
+
"aria-owns": ariaOwns,
|
|
76
|
+
"aria-activedescendant": ariaActivedescendant
|
|
77
|
+
} = this.asProps;
|
|
78
|
+
return {
|
|
79
|
+
"ref": this.inputRef,
|
|
80
|
+
size,
|
|
81
|
+
disabled,
|
|
82
|
+
state,
|
|
83
|
+
role,
|
|
84
|
+
placeholder,
|
|
85
|
+
"aria-haspopup": ariaHaspopup,
|
|
86
|
+
"aria-controls": ariaControls,
|
|
87
|
+
"aria-expanded": ariaExpanded,
|
|
88
|
+
"aria-autocomplete": ariaAutocomplete,
|
|
89
|
+
"aria-owns": ariaOwns,
|
|
90
|
+
"aria-activedescendant": ariaActivedescendant
|
|
91
|
+
};
|
|
92
|
+
}
|
|
93
|
+
render() {
|
|
94
|
+
var _ref = this.asProps;
|
|
95
|
+
const SInput = Box;
|
|
96
|
+
const SOutline = "div";
|
|
97
|
+
const {
|
|
98
|
+
Children,
|
|
99
|
+
styles,
|
|
100
|
+
neighborLocation,
|
|
101
|
+
controlsLength,
|
|
102
|
+
state
|
|
103
|
+
} = this.asProps;
|
|
104
|
+
return /* @__PURE__ */ React.createElement(NeighborLocation.Detect, {
|
|
105
|
+
neighborLocation
|
|
106
|
+
}, (neighborLocation2) => {
|
|
107
|
+
var _ref4;
|
|
108
|
+
return _ref4 = sstyled(styles), /* @__PURE__ */ React.createElement(SInput, _ref4.cn("SInput", {
|
|
109
|
+
...assignProps({
|
|
107
110
|
"neighborLocation": neighborLocation2,
|
|
108
111
|
"__excludeProps": ["role", "aria-haspopup", "aria-controls", "aria-expanded", "placeholder", "aria-autocomplete", "aria-owns", "aria-activedescendant", "tabIndex"]
|
|
109
|
-
}, _ref)
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
});
|
|
113
|
-
}
|
|
114
|
-
}
|
|
115
|
-
}
|
|
112
|
+
}, _ref)
|
|
113
|
+
}), /* @__PURE__ */ React.createElement(NeighborLocation, _ref4.cn("NeighborLocation", {
|
|
114
|
+
"controlsLength": controlsLength
|
|
115
|
+
}), /* @__PURE__ */ React.createElement(Children, _ref4.cn("Children", {}))), /* @__PURE__ */ React.createElement(SOutline, _ref4.cn("SOutline", {}), state === "invalid" && /* @__PURE__ */ React.createElement(InvalidStateBox, _ref4.cn("InvalidStateBox", {}))));
|
|
116
|
+
});
|
|
117
|
+
}
|
|
118
|
+
}
|
|
116
119
|
_defineProperty(Input, "displayName", "Input");
|
|
117
120
|
_defineProperty(Input, "defaultProps", {
|
|
118
121
|
size: "m",
|
|
119
122
|
state: "normal"
|
|
120
123
|
});
|
|
121
124
|
_defineProperty(Input, "style", style);
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
125
|
+
class Value extends Component {
|
|
126
|
+
uncontrolledProps() {
|
|
127
|
+
return {
|
|
128
|
+
value: (e) => e.target.value
|
|
129
|
+
};
|
|
126
130
|
}
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
var SValue = Box;
|
|
142
|
-
var _this$asProps4 = this.asProps, styles = _this$asProps4.styles, neighborLocation = _this$asProps4.neighborLocation, state = _this$asProps4.state;
|
|
143
|
-
return /* @__PURE__ */ React.createElement(NeighborLocation.Detect, {
|
|
144
|
-
neighborLocation
|
|
145
|
-
}, function(neighborLocation2) {
|
|
146
|
-
var _ref5;
|
|
147
|
-
return _ref5 = sstyled(styles), /* @__PURE__ */ React.createElement(SValue, _ref5.cn("SValue", _objectSpread({}, assignProps({
|
|
131
|
+
render() {
|
|
132
|
+
var _ref2 = this.asProps;
|
|
133
|
+
const SValue = Box;
|
|
134
|
+
const {
|
|
135
|
+
styles,
|
|
136
|
+
neighborLocation,
|
|
137
|
+
state
|
|
138
|
+
} = this.asProps;
|
|
139
|
+
return /* @__PURE__ */ React.createElement(NeighborLocation.Detect, {
|
|
140
|
+
neighborLocation
|
|
141
|
+
}, (neighborLocation2) => {
|
|
142
|
+
var _ref5;
|
|
143
|
+
return _ref5 = sstyled(styles), /* @__PURE__ */ React.createElement(SValue, _ref5.cn("SValue", {
|
|
144
|
+
...assignProps({
|
|
148
145
|
"inAfterOutline": true,
|
|
149
146
|
"neighborLocation": neighborLocation2,
|
|
150
147
|
"tag": "input",
|
|
151
148
|
"type": "text",
|
|
152
149
|
"aria-invalid": state === "invalid"
|
|
153
|
-
}, _ref2)
|
|
154
|
-
});
|
|
155
|
-
}
|
|
156
|
-
}
|
|
157
|
-
}
|
|
150
|
+
}, _ref2)
|
|
151
|
+
}));
|
|
152
|
+
});
|
|
153
|
+
}
|
|
154
|
+
}
|
|
158
155
|
_defineProperty(Value, "defaultProps", {
|
|
159
156
|
defaultValue: ""
|
|
160
157
|
});
|
|
161
|
-
_defineProperty(Value, "enhance", [autoFocusEnhance()]);
|
|
162
158
|
function Addon(props) {
|
|
163
159
|
var _ref3 = arguments[0];
|
|
164
|
-
|
|
165
|
-
|
|
160
|
+
const SAddon = Box;
|
|
161
|
+
const {
|
|
162
|
+
Children,
|
|
163
|
+
styles,
|
|
164
|
+
neighborLocation
|
|
165
|
+
} = props;
|
|
166
166
|
return /* @__PURE__ */ React.createElement(NeighborLocation.Detect, {
|
|
167
167
|
neighborLocation
|
|
168
|
-
},
|
|
168
|
+
}, (neighborLocation2) => {
|
|
169
169
|
var _ref6;
|
|
170
|
-
return _ref6 = sstyled(styles), /* @__PURE__ */ React.createElement(SAddon, _ref6.cn("SAddon",
|
|
171
|
-
|
|
172
|
-
|
|
170
|
+
return _ref6 = sstyled(styles), /* @__PURE__ */ React.createElement(SAddon, _ref6.cn("SAddon", {
|
|
171
|
+
...assignProps({
|
|
172
|
+
"neighborLocation": neighborLocation2
|
|
173
|
+
}, _ref3)
|
|
174
|
+
}), /* @__PURE__ */ React.createElement(Children, _ref6.cn("Children", {})));
|
|
173
175
|
});
|
|
174
176
|
}
|
|
175
|
-
const
|
|
177
|
+
const Input_default = createComponent(Input, {
|
|
176
178
|
Addon,
|
|
177
179
|
Value
|
|
178
180
|
});
|
|
179
181
|
export {
|
|
180
|
-
|
|
182
|
+
Input_default as default
|
|
181
183
|
};
|
|
@@ -105,10 +105,14 @@ SAddon[size='m']:not(SButton) {
|
|
|
105
105
|
padding: 0 var(--intergalactic-spacing-2x, 8px);
|
|
106
106
|
}
|
|
107
107
|
|
|
108
|
-
SAddon[size='l']:not(SButton) {
|
|
108
|
+
SAddon[size='l'][neighborLocation='right']:not(SButton) {
|
|
109
109
|
padding: 0 var(--intergalactic-spacing-2x, 8px) 0 var(--intergalactic-spacing-3x, 12px);
|
|
110
110
|
}
|
|
111
111
|
|
|
112
|
+
SAddon[size='l'][neighborLocation='left']:not(SButton) {
|
|
113
|
+
padding: 0 var(--intergalactic-spacing-3x, 12px) 0 var(--intergalactic-spacing-2x, 8px);
|
|
114
|
+
}
|
|
115
|
+
|
|
112
116
|
SInput SAddon:nth-last-child(2) {
|
|
113
117
|
margin-right: -1px;
|
|
114
118
|
}
|
package/lib/types/index.d.ts
CHANGED
|
@@ -1,13 +1,9 @@
|
|
|
1
|
-
import type {
|
|
2
|
-
import type {
|
|
3
|
-
import type { BoxProps } from '@semcore/flex-box';
|
|
4
|
-
import type { NeighborItemProps, NeighborLocationProps } from '@semcore/neighbor-location';
|
|
1
|
+
import type { BoxProps, NeighborItemProps, NeighborLocationProps } from '@semcore/base-components';
|
|
2
|
+
import type { Intergalactic, PropGetterFn } from '@semcore/core';
|
|
5
3
|
import type React from 'react';
|
|
6
4
|
|
|
7
5
|
export type InputSize = 'm' | 'l';
|
|
8
6
|
|
|
9
|
-
/** @deprecated */
|
|
10
|
-
export interface IInputProps extends InputProps, UnknownProperties {}
|
|
11
7
|
export type InputProps = BoxProps &
|
|
12
8
|
NeighborItemProps &
|
|
13
9
|
NeighborLocationProps & {
|
|
@@ -27,11 +23,8 @@ export type InputProps = BoxProps &
|
|
|
27
23
|
state?: 'normal' | 'invalid' | 'valid';
|
|
28
24
|
};
|
|
29
25
|
|
|
30
|
-
/** @deprecated */
|
|
31
|
-
export interface IInputValueProps extends InputValueProps, UnknownProperties {}
|
|
32
26
|
export type InputValueProps = BoxProps &
|
|
33
|
-
NeighborItemProps &
|
|
34
|
-
WithAutoFocusEnhanceProps & {
|
|
27
|
+
NeighborItemProps & {
|
|
35
28
|
/**
|
|
36
29
|
* Input value
|
|
37
30
|
*/
|
|
@@ -44,10 +37,6 @@ export type InputValueProps = BoxProps &
|
|
|
44
37
|
* Handler for changing the value
|
|
45
38
|
*/
|
|
46
39
|
onChange?: (value: string, event: React.SyntheticEvent<HTMLInputElement>) => void;
|
|
47
|
-
/**
|
|
48
|
-
* @deprecated Set `disabled` on `Input` instead.
|
|
49
|
-
* */
|
|
50
|
-
disabled?: boolean;
|
|
51
40
|
/**
|
|
52
41
|
* Sets the input to the read-only state
|
|
53
42
|
* */
|
|
@@ -61,10 +50,13 @@ export type InputValueProps = BoxProps &
|
|
|
61
50
|
* Placeholder for input
|
|
62
51
|
*/
|
|
63
52
|
placeholder?: string;
|
|
53
|
+
/**
|
|
54
|
+
* Flag to enable autofocusing after component mounting
|
|
55
|
+
* @default false
|
|
56
|
+
*/
|
|
57
|
+
autoFocus?: boolean;
|
|
64
58
|
};
|
|
65
59
|
|
|
66
|
-
/** @deprecated */
|
|
67
|
-
export interface IInputAddonProps extends InputAddonProps, UnknownProperties {}
|
|
68
60
|
export type InputAddonProps = BoxProps &
|
|
69
61
|
NeighborItemProps & {
|
|
70
62
|
/**
|
|
@@ -82,8 +74,6 @@ export type InputAddonProps = BoxProps &
|
|
|
82
74
|
size?: InputSize;
|
|
83
75
|
};
|
|
84
76
|
|
|
85
|
-
/** @deprecated */
|
|
86
|
-
export interface IInputCtx extends InputCtx, UnknownProperties {}
|
|
87
77
|
export type InputCtx = {
|
|
88
78
|
getValueProps: PropGetterFn;
|
|
89
79
|
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": "16.1.
|
|
4
|
+
"version": "16.1.2-prerelease.8",
|
|
5
5
|
"main": "lib/cjs/index.js",
|
|
6
6
|
"module": "lib/es6/index.js",
|
|
7
7
|
"typings": "lib/types/index.d.ts",
|
|
@@ -13,12 +13,8 @@
|
|
|
13
13
|
"import": "./lib/esm/index.mjs",
|
|
14
14
|
"types": "./lib/types/index.d.ts"
|
|
15
15
|
},
|
|
16
|
-
"dependencies": {
|
|
17
|
-
"@semcore/flex-box": "16.0.11-prerelease.5",
|
|
18
|
-
"@semcore/neighbor-location": "16.0.11-prerelease.5"
|
|
19
|
-
},
|
|
20
16
|
"peerDependencies": {
|
|
21
|
-
"@semcore/base-components": "^16.4.
|
|
17
|
+
"@semcore/base-components": "^16.4.3-prerelease.8"
|
|
22
18
|
},
|
|
23
19
|
"repository": {
|
|
24
20
|
"type": "git",
|
|
@@ -26,9 +22,10 @@
|
|
|
26
22
|
"directory": "semcore/input"
|
|
27
23
|
},
|
|
28
24
|
"devDependencies": {
|
|
29
|
-
"@semcore/core": "16.5.1
|
|
25
|
+
"@semcore/core": "16.5.1",
|
|
26
|
+
"@semcore/base-components": "16.4.3-prerelease.8",
|
|
30
27
|
"@semcore/testing-utils": "1.0.0",
|
|
31
|
-
"@semcore/icon": "16.7.2-prerelease.
|
|
28
|
+
"@semcore/icon": "16.7.2-prerelease.8"
|
|
32
29
|
},
|
|
33
30
|
"scripts": {
|
|
34
31
|
"build": "pnpm semcore-builder --source=js && pnpm vite build"
|