@semcore/input 16.1.2-prerelease.9 → 16.2.0-prerelease.0
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 +3 -3
- package/lib/cjs/Input.js +161 -138
- 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 +18 -22
- package/lib/es6/Input.js +153 -130
- package/lib/es6/Input.js.map +1 -1
- package/lib/es6/index.d.js.map +1 -1
- package/lib/es6/style/input.shadow.css +18 -22
- package/lib/esm/Input.mjs +133 -135
- package/lib/esm/style/input.shadow.css +18 -22
- package/lib/types/index.d.ts +18 -8
- package/package.json +8 -5
package/lib/esm/Input.mjs
CHANGED
|
@@ -1,183 +1,181 @@
|
|
|
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";
|
|
1
6
|
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
2
|
-
import { createComponent, sstyled, Component, lastInteraction
|
|
3
|
-
import
|
|
7
|
+
import { createComponent, sstyled, assignProps, Component, lastInteraction } from "@semcore/core";
|
|
8
|
+
import autoFocusEnhance from "@semcore/core/lib/utils/enhances/autoFocusEnhance";
|
|
9
|
+
import { Box, InvalidStateBox } from "@semcore/flex-box";
|
|
10
|
+
import NeighborLocation from "@semcore/neighbor-location";
|
|
4
11
|
import React from "react";
|
|
5
12
|
/*!__reshadow-styles__:"./style/input.shadow.css"*/
|
|
6
|
-
|
|
13
|
+
var style = (
|
|
7
14
|
/*__reshadow_css_start__*/
|
|
8
15
|
(sstyled.insert(
|
|
9
16
|
/*__inner_css_start__*/
|
|
10
|
-
".
|
|
17
|
+
".___SInput_1yglp_gg_{display:inline-flex;width:100%;align-items:center;position:relative;z-index:0;vertical-align:middle;padding:1px;box-sizing:border-box}.___SInput_1yglp_gg_ input:-webkit-autofill{border-radius:var(--intergalactic-control-rounded, 6px);-webkit-box-shadow:0 0 0 30px #faffbd inset}.___SInput_1yglp_gg_ input:-webkit-autofill~.___SOutline_1yglp_gg_{background-color:#faffbd}.___SInput_1yglp_gg_ .___SValue_1yglp_gg_:focus,.___SInput_1yglp_gg_ .___SValue_1yglp_gg_:focus-visible,.___SInput_1yglp_gg_ .___SValue_1yglp_gg_:focus-visible::after,.___SInput_1yglp_gg_ .___SValue_1yglp_gg_:focus::after{outline:0}.___SValue_1yglp_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_1yglp_gg_::-moz-placeholder{color:var(--intergalactic-text-placeholder, rgba(0, 5, 2, 0.457))}.___SValue_1yglp_gg_::placeholder{color:var(--intergalactic-text-placeholder, rgba(0, 5, 2, 0.457))}.___SValue_1yglp_gg_:not(:disabled):-moz-read-only~.___SOutline_1yglp_gg_{background:var(--intergalactic-bg-secondary-neutral, rgb(248, 249, 248))}.___SValue_1yglp_gg_:not(:disabled):read-only~.___SOutline_1yglp_gg_{background:var(--intergalactic-bg-secondary-neutral, rgb(248, 249, 248))}.___SValue_1yglp_gg_:disabled{-moz-user-select:none;user-select:none;opacity:var(--intergalactic-disabled-opacity, 0.4)}.___SInput_1yglp_gg_.__disabled_1yglp_gg_ .___SOutline_1yglp_gg_,.___SValue_1yglp_gg_:disabled~.___SOutline_1yglp_gg_{opacity:var(--intergalactic-disabled-opacity, 0.4);cursor:default;pointer-events:none}.___SOutline_1yglp_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_1yglp_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_1yglp_gg_{color:var(--intergalactic-icon-secondary-neutral, rgba(0, 5, 2, 0.385))}@media (color-gamut:p3){.___SAddon_1yglp_gg_{color:var(--intergalactic-icon-secondary-neutral, color(display-p3 0.0036 0.02041 0.00996 / 0.385))}}}.___SAddon_1yglp_gg_.__interactive_1yglp_gg_{cursor:pointer}@media (hover:hover){.___SAddon_1yglp_gg_.__interactive_1yglp_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_1yglp_gg_.__interactive_1yglp_gg_:hover{color:var(--intergalactic-icon-secondary-neutral-hover-active, rgba(0, 5, 2, 0.433))}@media (color-gamut:p3){.___SAddon_1yglp_gg_.__interactive_1yglp_gg_:hover{color:var(--intergalactic-icon-secondary-neutral-hover-active, color(display-p3 0.00333 0.01824 0.00791 / 0.433))}}}}.___SAddon_1yglp_gg_.__disabled_1yglp_gg_{opacity:var(--intergalactic-disabled-opacity, 0.4);cursor:default;pointer-events:none}.___SAddon_1yglp_gg_._size_m_1yglp_gg_:not(.___SButton_1yglp_gg_){padding:0 var(--intergalactic-spacing-2x, 8px)}.___SAddon_1yglp_gg_._size_l_1yglp_gg_:not(.___SButton_1yglp_gg_){padding:0 var(--intergalactic-spacing-2x, 8px)0 var(--intergalactic-spacing-3x, 12px)}.___SInput_1yglp_gg_ .___SAddon_1yglp_gg_:nth-last-child(2){margin-right:-1px}.___SValue_1yglp_gg_._size_m_1yglp_gg_{padding:0 var(--intergalactic-spacing-2x, 8px)}.___SValue_1yglp_gg_._size_l_1yglp_gg_{padding:0 var(--intergalactic-spacing-3x, 12px)}.___SInput_1yglp_gg_._size_m_1yglp_gg_{font-size:var(--intergalactic-fs-200, 14px);height:var(--intergalactic-form-control-m, 28px)}.___SInput_1yglp_gg_._size_l_1yglp_gg_{font-size:var(--intergalactic-fs-300, 16px);height:var(--intergalactic-form-control-l, 40px)}.___SInput_1yglp_gg_:has(.___SValue_1yglp_gg_:focus-visible){z-index:1}.___SInput_1yglp_gg_._state_normal_1yglp_gg_ .___SOutline_1yglp_gg_{border-color:var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161))}@supports (color:color(display-p3 0 0 0%)){.___SInput_1yglp_gg_._state_normal_1yglp_gg_ .___SOutline_1yglp_gg_{border-color:var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161))}@media (color-gamut:p3){.___SInput_1yglp_gg_._state_normal_1yglp_gg_ .___SOutline_1yglp_gg_{border-color:var(--intergalactic-border-primary, color(display-p3 0.00798 0.04498 0.03219 / 0.161))}}}.___SInput_1yglp_gg_._state_normal_1yglp_gg_:has(.___SValue_1yglp_gg_:focus-visible) .___SOutline_1yglp_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, rgba(0, 40, 230, 0.419))}.___SInput_1yglp_gg_._state_valid_1yglp_gg_ .___SOutline_1yglp_gg_{border-color:var(--intergalactic-border-success-active, rgb(0, 204, 154))}@supports (color:color(display-p3 0 0 0%)){.___SInput_1yglp_gg_._state_valid_1yglp_gg_ .___SOutline_1yglp_gg_{border-color:var(--intergalactic-border-success-active, rgb(0, 204, 154))}@media (color-gamut:p3){.___SInput_1yglp_gg_._state_valid_1yglp_gg_ .___SOutline_1yglp_gg_{border-color:var(--intergalactic-border-success-active, color(display-p3 0.36013 0.78771 0.61714))}}}.___SInput_1yglp_gg_._state_valid_1yglp_gg_:has(.___SValue_1yglp_gg_:focus-visible) .___SOutline_1yglp_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, rgb(0, 204, 154))}@supports (color:color(display-p3 0 0 0%)){.___SInput_1yglp_gg_._state_valid_1yglp_gg_:has(.___SValue_1yglp_gg_:focus-visible) .___SOutline_1yglp_gg_{border-color:var(--intergalactic-border-success-active, rgb(0, 204, 154))}@media (color-gamut:p3){.___SInput_1yglp_gg_._state_valid_1yglp_gg_:has(.___SValue_1yglp_gg_:focus-visible) .___SOutline_1yglp_gg_{border-color:var(--intergalactic-border-success-active, color(display-p3 0.36013 0.78771 0.61714))}}}@supports (color:oklab(0%0 0%)){.___SInput_1yglp_gg_._state_valid_1yglp_gg_:has(.___SValue_1yglp_gg_:focus-visible) .___SOutline_1yglp_gg_{outline-color:var(--intergalactic-keyboard-focus-valid-outline, rgb(0, 190, 142))}@media (color-gamut:p3){.___SInput_1yglp_gg_._state_valid_1yglp_gg_:has(.___SValue_1yglp_gg_:focus-visible) .___SOutline_1yglp_gg_{outline-color:var(--intergalactic-keyboard-focus-valid-outline, oklch(0.711 0.146 166.9))}}}.___SInput_1yglp_gg_._state_invalid_1yglp_gg_ .___SOutline_1yglp_gg_{border-color:var(--intergalactic-border-critical-active, rgba(255, 0, 4, 0.56))}@supports (color:color(display-p3 0 0 0%)){.___SInput_1yglp_gg_._state_invalid_1yglp_gg_ .___SOutline_1yglp_gg_{border-color:var(--intergalactic-border-critical-active, rgba(255, 0, 4, 0.56))}@media (color-gamut:p3){.___SInput_1yglp_gg_._state_invalid_1yglp_gg_ .___SOutline_1yglp_gg_{border-color:var(--intergalactic-border-critical-active, color(display-p3 0.918 0.19866 0.14259 / 0.56))}}}.___SInput_1yglp_gg_._state_invalid_1yglp_gg_:has(.___SValue_1yglp_gg_:focus-visible) .___SOutline_1yglp_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, rgba(255, 0, 4, 0.56))}@supports (color:color(display-p3 0 0 0%)){.___SInput_1yglp_gg_._state_invalid_1yglp_gg_:has(.___SValue_1yglp_gg_:focus-visible) .___SOutline_1yglp_gg_{border-color:var(--intergalactic-border-critical-active, rgba(255, 0, 4, 0.56))}@media (color-gamut:p3){.___SInput_1yglp_gg_._state_invalid_1yglp_gg_:has(.___SValue_1yglp_gg_:focus-visible) .___SOutline_1yglp_gg_{border-color:var(--intergalactic-border-critical-active, color(display-p3 0.918 0.19866 0.14259 / 0.56))}}}@supports (color:oklab(0%0 0%)){.___SInput_1yglp_gg_._state_invalid_1yglp_gg_:has(.___SValue_1yglp_gg_:focus-visible) .___SOutline_1yglp_gg_{outline-color:var(--intergalactic-keyboard-focus-invalid-outline, oklch(0.628 0.257 28.9 / 0.652))}}.___SInput_1yglp_gg_._neighborLocation_right_1yglp_gg_ .___SOutline_1yglp_gg_{border-top-right-radius:0;border-bottom-right-radius:0}.___SInput_1yglp_gg_._neighborLocation_both_1yglp_gg_ .___SOutline_1yglp_gg_{border-radius:0;border-left:none}.___SInput_1yglp_gg_._neighborLocation_left_1yglp_gg_ .___SOutline_1yglp_gg_{border-top-left-radius:0;border-bottom-left-radius:0;border-left:none}.___SValue_1yglp_gg_._neighborLocation_right_1yglp_gg_{padding-right:0}.___SValue_1yglp_gg_._neighborLocation_both_1yglp_gg_{padding-left:0;padding-right:0}.___SValue_1yglp_gg_._neighborLocation_left_1yglp_gg_{padding-left:0}",
|
|
11
18
|
/*__inner_css_end__*/
|
|
12
|
-
"
|
|
19
|
+
"1yglp_gg_"
|
|
13
20
|
), /*__reshadow_css_end__*/
|
|
14
21
|
{
|
|
15
|
-
"__SInput": "
|
|
16
|
-
"_disabled": "
|
|
17
|
-
"__SOutline": "
|
|
18
|
-
"__SValue": "
|
|
19
|
-
"__SAddon": "
|
|
20
|
-
"_size_m": "
|
|
21
|
-
"__SButton": "
|
|
22
|
-
"_size_l": "
|
|
23
|
-
"_neighborLocation_right": "
|
|
24
|
-
"
|
|
25
|
-
"
|
|
26
|
-
"_interactive": "
|
|
27
|
-
"_state_normal": "
|
|
28
|
-
"_state_valid": "
|
|
29
|
-
"_state_invalid": "
|
|
22
|
+
"__SInput": "___SInput_1yglp_gg_",
|
|
23
|
+
"_disabled": "__disabled_1yglp_gg_",
|
|
24
|
+
"__SOutline": "___SOutline_1yglp_gg_",
|
|
25
|
+
"__SValue": "___SValue_1yglp_gg_",
|
|
26
|
+
"__SAddon": "___SAddon_1yglp_gg_",
|
|
27
|
+
"_size_m": "_size_m_1yglp_gg_",
|
|
28
|
+
"__SButton": "___SButton_1yglp_gg_",
|
|
29
|
+
"_size_l": "_size_l_1yglp_gg_",
|
|
30
|
+
"_neighborLocation_right": "_neighborLocation_right_1yglp_gg_",
|
|
31
|
+
"_neighborLocation_both": "_neighborLocation_both_1yglp_gg_",
|
|
32
|
+
"_neighborLocation_left": "_neighborLocation_left_1yglp_gg_",
|
|
33
|
+
"_interactive": "__interactive_1yglp_gg_",
|
|
34
|
+
"_state_normal": "_state_normal_1yglp_gg_",
|
|
35
|
+
"_state_valid": "_state_valid_1yglp_gg_",
|
|
36
|
+
"_state_invalid": "_state_invalid_1yglp_gg_"
|
|
30
37
|
})
|
|
31
38
|
);
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
39
|
+
var Input = /* @__PURE__ */ (function(_Component) {
|
|
40
|
+
function Input2() {
|
|
41
|
+
var _this;
|
|
42
|
+
_classCallCheck(this, Input2);
|
|
43
|
+
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
44
|
+
args[_key] = arguments[_key];
|
|
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;
|
|
38
50
|
event.preventDefault();
|
|
39
|
-
(
|
|
51
|
+
(_this$inputRef$curren = _this.inputRef.current) === null || _this$inputRef$curren === void 0 || _this$inputRef$curren.focus();
|
|
40
52
|
});
|
|
41
|
-
_defineProperty(
|
|
53
|
+
_defineProperty(_this, "handleClick", function() {
|
|
42
54
|
if (!lastInteraction.isKeyboard) return;
|
|
43
|
-
setTimeout(()
|
|
44
|
-
var _a;
|
|
55
|
+
setTimeout(function() {
|
|
45
56
|
if (document.activeElement === document.body) {
|
|
46
|
-
|
|
57
|
+
var _this$inputRef$curren2;
|
|
58
|
+
(_this$inputRef$curren2 = _this.inputRef.current) === null || _this$inputRef$curren2 === void 0 || _this$inputRef$curren2.focus();
|
|
47
59
|
}
|
|
48
60
|
}, 0);
|
|
49
61
|
});
|
|
62
|
+
return _this;
|
|
50
63
|
}
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
disabled,
|
|
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
|
-
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({
|
|
64
|
+
_inherits(Input2, _Component);
|
|
65
|
+
return _createClass(Input2, [{
|
|
66
|
+
key: "getAddonProps",
|
|
67
|
+
value: function getAddonProps() {
|
|
68
|
+
var _this$asProps = this.asProps, disabled = _this$asProps.disabled, size = _this$asProps.size;
|
|
69
|
+
return {
|
|
70
|
+
disabled,
|
|
71
|
+
onMouseDown: this.handleMouseDownAddon,
|
|
72
|
+
onClick: this.handleClick,
|
|
73
|
+
size
|
|
74
|
+
};
|
|
75
|
+
}
|
|
76
|
+
}, {
|
|
77
|
+
key: "getValueProps",
|
|
78
|
+
value: function getValueProps() {
|
|
79
|
+
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"];
|
|
80
|
+
return {
|
|
81
|
+
"ref": this.inputRef,
|
|
82
|
+
size,
|
|
83
|
+
disabled,
|
|
84
|
+
state,
|
|
85
|
+
role,
|
|
86
|
+
placeholder,
|
|
87
|
+
"aria-haspopup": ariaHaspopup,
|
|
88
|
+
"aria-controls": ariaControls,
|
|
89
|
+
"aria-expanded": ariaExpanded,
|
|
90
|
+
"aria-autocomplete": ariaAutocomplete,
|
|
91
|
+
"aria-owns": ariaOwns,
|
|
92
|
+
"aria-activedescendant": ariaActivedescendant
|
|
93
|
+
};
|
|
94
|
+
}
|
|
95
|
+
}, {
|
|
96
|
+
key: "render",
|
|
97
|
+
value: function render() {
|
|
98
|
+
var _ref = this.asProps;
|
|
99
|
+
var SInput = Box;
|
|
100
|
+
var SOutline = "div";
|
|
101
|
+
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;
|
|
102
|
+
return /* @__PURE__ */ React.createElement(NeighborLocation.Detect, {
|
|
103
|
+
neighborLocation
|
|
104
|
+
}, function(neighborLocation2) {
|
|
105
|
+
var _ref4;
|
|
106
|
+
return _ref4 = sstyled(styles), /* @__PURE__ */ React.createElement(SInput, _ref4.cn("SInput", _objectSpread({}, assignProps({
|
|
110
107
|
"neighborLocation": neighborLocation2,
|
|
111
108
|
"__excludeProps": ["role", "aria-haspopup", "aria-controls", "aria-expanded", "placeholder", "aria-autocomplete", "aria-owns", "aria-activedescendant", "tabIndex"]
|
|
112
|
-
}, _ref)
|
|
113
|
-
|
|
114
|
-
"
|
|
115
|
-
})
|
|
116
|
-
}
|
|
117
|
-
}
|
|
118
|
-
}
|
|
109
|
+
}, _ref))), /* @__PURE__ */ React.createElement(NeighborLocation, _ref4.cn("NeighborLocation", {
|
|
110
|
+
"controlsLength": controlsLength
|
|
111
|
+
}), /* @__PURE__ */ React.createElement(Children, _ref4.cn("Children", {}))), /* @__PURE__ */ React.createElement(SOutline, _ref4.cn("SOutline", {}), state === "invalid" && /* @__PURE__ */ React.createElement(InvalidStateBox, _ref4.cn("InvalidStateBox", {}))));
|
|
112
|
+
});
|
|
113
|
+
}
|
|
114
|
+
}]);
|
|
115
|
+
})(Component);
|
|
119
116
|
_defineProperty(Input, "displayName", "Input");
|
|
120
117
|
_defineProperty(Input, "defaultProps", {
|
|
121
118
|
size: "m",
|
|
122
119
|
state: "normal"
|
|
123
120
|
});
|
|
124
121
|
_defineProperty(Input, "style", style);
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
};
|
|
122
|
+
var Value = /* @__PURE__ */ (function(_Component2) {
|
|
123
|
+
function Value2() {
|
|
124
|
+
_classCallCheck(this, Value2);
|
|
125
|
+
return _callSuper(this, Value2, arguments);
|
|
130
126
|
}
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
127
|
+
_inherits(Value2, _Component2);
|
|
128
|
+
return _createClass(Value2, [{
|
|
129
|
+
key: "uncontrolledProps",
|
|
130
|
+
value: function uncontrolledProps() {
|
|
131
|
+
return {
|
|
132
|
+
value: function value(e) {
|
|
133
|
+
return e.target.value;
|
|
134
|
+
}
|
|
135
|
+
};
|
|
136
|
+
}
|
|
137
|
+
}, {
|
|
138
|
+
key: "render",
|
|
139
|
+
value: function render() {
|
|
140
|
+
var _ref2 = this.asProps;
|
|
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({
|
|
145
148
|
"inAfterOutline": true,
|
|
146
149
|
"neighborLocation": neighborLocation2,
|
|
147
150
|
"tag": "input",
|
|
148
151
|
"type": "text",
|
|
149
152
|
"aria-invalid": state === "invalid"
|
|
150
|
-
}, _ref2)
|
|
151
|
-
})
|
|
152
|
-
}
|
|
153
|
-
}
|
|
154
|
-
}
|
|
153
|
+
}, _ref2))));
|
|
154
|
+
});
|
|
155
|
+
}
|
|
156
|
+
}]);
|
|
157
|
+
})(Component);
|
|
155
158
|
_defineProperty(Value, "defaultProps", {
|
|
156
159
|
defaultValue: ""
|
|
157
160
|
});
|
|
161
|
+
_defineProperty(Value, "enhance", [autoFocusEnhance()]);
|
|
158
162
|
function Addon(props) {
|
|
159
163
|
var _ref3 = arguments[0];
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
Children,
|
|
163
|
-
styles,
|
|
164
|
-
neighborLocation
|
|
165
|
-
} = props;
|
|
164
|
+
var SAddon = Box;
|
|
165
|
+
var Children = props.Children, styles = props.styles, neighborLocation = props.neighborLocation;
|
|
166
166
|
return /* @__PURE__ */ React.createElement(NeighborLocation.Detect, {
|
|
167
167
|
neighborLocation
|
|
168
|
-
}, (neighborLocation2)
|
|
168
|
+
}, function(neighborLocation2) {
|
|
169
169
|
var _ref6;
|
|
170
|
-
return _ref6 = sstyled(styles), /* @__PURE__ */ React.createElement(SAddon, _ref6.cn("SAddon", {
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
}, _ref3)
|
|
174
|
-
}), /* @__PURE__ */ React.createElement(Children, _ref6.cn("Children", {})));
|
|
170
|
+
return _ref6 = sstyled(styles), /* @__PURE__ */ React.createElement(SAddon, _ref6.cn("SAddon", _objectSpread({}, assignProps({
|
|
171
|
+
"neighborLocation": neighborLocation2
|
|
172
|
+
}, _ref3))), /* @__PURE__ */ React.createElement(Children, _ref6.cn("Children", {})));
|
|
175
173
|
});
|
|
176
174
|
}
|
|
177
|
-
const
|
|
175
|
+
const Input$1 = createComponent(Input, {
|
|
178
176
|
Addon,
|
|
179
177
|
Value
|
|
180
178
|
});
|
|
181
179
|
export {
|
|
182
|
-
|
|
180
|
+
Input$1 as default
|
|
183
181
|
};
|
|
@@ -37,30 +37,30 @@ SValue {
|
|
|
37
37
|
padding: 0;
|
|
38
38
|
border: none;
|
|
39
39
|
box-sizing: border-box;
|
|
40
|
-
color: var(--intergalactic-text-primary,
|
|
40
|
+
color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
|
|
41
41
|
font-size: inherit;
|
|
42
42
|
text-overflow: ellipsis;
|
|
43
43
|
font-family: inherit;
|
|
44
44
|
background: transparent;
|
|
45
45
|
|
|
46
46
|
&::placeholder {
|
|
47
|
-
color: var(--intergalactic-text-placeholder,
|
|
47
|
+
color: var(--intergalactic-text-placeholder, oklch(0.098 0.023 157.4 / 0.457));
|
|
48
48
|
}
|
|
49
49
|
|
|
50
50
|
&:not(:disabled):read-only~SOutline {
|
|
51
|
-
background: var(--intergalactic-bg-secondary-neutral,
|
|
51
|
+
background: var(--intergalactic-bg-secondary-neutral, oklch(0.98 0.001 180));
|
|
52
52
|
}
|
|
53
53
|
|
|
54
54
|
&:disabled {
|
|
55
55
|
user-select: none;
|
|
56
|
-
opacity: var(--intergalactic-disabled-opacity, 0.
|
|
56
|
+
opacity: var(--intergalactic-disabled-opacity, 0.4);
|
|
57
57
|
}
|
|
58
58
|
}
|
|
59
59
|
|
|
60
60
|
SInput[disabled] SOutline,
|
|
61
61
|
SValue:disabled~SOutline {
|
|
62
62
|
|
|
63
|
-
opacity: var(--intergalactic-disabled-opacity, 0.
|
|
63
|
+
opacity: var(--intergalactic-disabled-opacity, 0.4);
|
|
64
64
|
cursor: default;
|
|
65
65
|
pointer-events: none;
|
|
66
66
|
}
|
|
@@ -74,7 +74,7 @@ SOutline {
|
|
|
74
74
|
border: 1px solid;
|
|
75
75
|
border-radius: var(--intergalactic-control-rounded, 6px);
|
|
76
76
|
z-index: -1;
|
|
77
|
-
background: var(--intergalactic-bg-primary-neutral,
|
|
77
|
+
background: var(--intergalactic-bg-primary-neutral, oklch(1 0 0));
|
|
78
78
|
}
|
|
79
79
|
|
|
80
80
|
SAddon {
|
|
@@ -84,19 +84,19 @@ SAddon {
|
|
|
84
84
|
flex: 0 0 auto;
|
|
85
85
|
padding: 0 var(--intergalactic-spacing-2x, 8px);
|
|
86
86
|
height: 100%;
|
|
87
|
-
color: var(--intergalactic-icon-secondary-neutral,
|
|
87
|
+
color: var(--intergalactic-icon-secondary-neutral, oklch(0.104 0.023 162.3 / 0.385));
|
|
88
88
|
}
|
|
89
89
|
|
|
90
90
|
SAddon[interactive] {
|
|
91
91
|
cursor: pointer;
|
|
92
92
|
|
|
93
93
|
&:hover {
|
|
94
|
-
color: var(--intergalactic-icon-secondary-neutral-hover-active,
|
|
94
|
+
color: var(--intergalactic-icon-secondary-neutral-hover-active, oklch(0.1 0.023 159.1 / 0.433));
|
|
95
95
|
}
|
|
96
96
|
}
|
|
97
97
|
|
|
98
98
|
SAddon[disabled] {
|
|
99
|
-
opacity: var(--intergalactic-disabled-opacity, 0.
|
|
99
|
+
opacity: var(--intergalactic-disabled-opacity, 0.4);
|
|
100
100
|
cursor: default;
|
|
101
101
|
pointer-events: none;
|
|
102
102
|
}
|
|
@@ -105,14 +105,10 @@ SAddon[size='m']:not(SButton) {
|
|
|
105
105
|
padding: 0 var(--intergalactic-spacing-2x, 8px);
|
|
106
106
|
}
|
|
107
107
|
|
|
108
|
-
SAddon[size='l']
|
|
108
|
+
SAddon[size='l']: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
|
-
|
|
116
112
|
SInput SAddon:nth-last-child(2) {
|
|
117
113
|
margin-right: -1px;
|
|
118
114
|
}
|
|
@@ -141,7 +137,7 @@ SInput:has(SValue:focus-visible) {
|
|
|
141
137
|
|
|
142
138
|
SInput[state='normal'] {
|
|
143
139
|
& SOutline {
|
|
144
|
-
border-color: var(--intergalactic-border-primary,
|
|
140
|
+
border-color: var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161));
|
|
145
141
|
}
|
|
146
142
|
|
|
147
143
|
&:has(SValue:focus-visible) SOutline {
|
|
@@ -149,13 +145,13 @@ SInput[state='normal'] {
|
|
|
149
145
|
outline-offset: 0;
|
|
150
146
|
transition-property: outline-color, outline-width;
|
|
151
147
|
}
|
|
152
|
-
border-color: var(--intergalactic-border-info-active,
|
|
148
|
+
border-color: var(--intergalactic-border-info-active, oklch(0.443 0.273 264.2 / 0.419));
|
|
153
149
|
}
|
|
154
150
|
}
|
|
155
151
|
|
|
156
152
|
SInput[state='valid'] {
|
|
157
153
|
& SOutline {
|
|
158
|
-
border-color: var(--intergalactic-border-success-active,
|
|
154
|
+
border-color: var(--intergalactic-border-success-active, oklch(0.75 0.153 167.5));
|
|
159
155
|
}
|
|
160
156
|
|
|
161
157
|
&:has(SValue:focus-visible) SOutline {
|
|
@@ -163,14 +159,14 @@ SInput[state='valid'] {
|
|
|
163
159
|
outline-offset: 0;
|
|
164
160
|
transition-property: outline-color, outline-width;
|
|
165
161
|
}
|
|
166
|
-
border-color: var(--intergalactic-border-success-active,
|
|
167
|
-
outline-color: var(--intergalactic-keyboard-focus-valid-outline,
|
|
162
|
+
border-color: var(--intergalactic-border-success-active, oklch(0.75 0.153 167.5));
|
|
163
|
+
outline-color: var(--intergalactic-keyboard-focus-valid-outline, oklch(0.711 0.146 166.9));
|
|
168
164
|
}
|
|
169
165
|
}
|
|
170
166
|
|
|
171
167
|
SInput[state='invalid'] {
|
|
172
168
|
& SOutline {
|
|
173
|
-
border-color: var(--intergalactic-border-critical-active,
|
|
169
|
+
border-color: var(--intergalactic-border-critical-active, oklch(0.628 0.258 29 / 0.56));
|
|
174
170
|
}
|
|
175
171
|
|
|
176
172
|
&:has(SValue:focus-visible) SOutline {
|
|
@@ -178,8 +174,8 @@ SInput[state='invalid'] {
|
|
|
178
174
|
outline-offset: 0;
|
|
179
175
|
transition-property: outline-color, outline-width;
|
|
180
176
|
}
|
|
181
|
-
border-color: var(--intergalactic-border-critical-active,
|
|
182
|
-
outline-color: var(--intergalactic-keyboard-focus-invalid-outline,
|
|
177
|
+
border-color: var(--intergalactic-border-critical-active, oklch(0.628 0.258 29 / 0.56));
|
|
178
|
+
outline-color: var(--intergalactic-keyboard-focus-invalid-outline, oklch(0.628 0.257 28.9 / 0.652));
|
|
183
179
|
}
|
|
184
180
|
}
|
|
185
181
|
|
package/lib/types/index.d.ts
CHANGED
|
@@ -1,9 +1,13 @@
|
|
|
1
|
-
import type {
|
|
2
|
-
import type {
|
|
1
|
+
import type { Intergalactic, PropGetterFn, UnknownProperties } from '@semcore/core';
|
|
2
|
+
import type { WithAutoFocusEnhanceProps } from '@semcore/core/lib/utils/enhances/autoFocusEnhance';
|
|
3
|
+
import type { BoxProps } from '@semcore/flex-box';
|
|
4
|
+
import type { NeighborItemProps, NeighborLocationProps } from '@semcore/neighbor-location';
|
|
3
5
|
import type React from 'react';
|
|
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,13 +61,10 @@ export type InputValueProps = BoxProps &
|
|
|
50
61
|
* Placeholder for input
|
|
51
62
|
*/
|
|
52
63
|
placeholder?: string;
|
|
53
|
-
/**
|
|
54
|
-
* Flag to enable autofocusing after component mounting
|
|
55
|
-
* @default false
|
|
56
|
-
*/
|
|
57
|
-
autoFocus?: boolean;
|
|
58
64
|
};
|
|
59
65
|
|
|
66
|
+
/** @deprecated */
|
|
67
|
+
export interface IInputAddonProps extends InputAddonProps, UnknownProperties {}
|
|
60
68
|
export type InputAddonProps = BoxProps &
|
|
61
69
|
NeighborItemProps & {
|
|
62
70
|
/**
|
|
@@ -74,6 +82,8 @@ export type InputAddonProps = BoxProps &
|
|
|
74
82
|
size?: InputSize;
|
|
75
83
|
};
|
|
76
84
|
|
|
85
|
+
/** @deprecated */
|
|
86
|
+
export interface IInputCtx extends InputCtx, UnknownProperties {}
|
|
77
87
|
export type InputCtx = {
|
|
78
88
|
getValueProps: PropGetterFn;
|
|
79
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": "16.
|
|
4
|
+
"version": "16.2.0-prerelease.0",
|
|
5
5
|
"main": "lib/cjs/index.js",
|
|
6
6
|
"module": "lib/es6/index.js",
|
|
7
7
|
"typings": "lib/types/index.d.ts",
|
|
@@ -13,8 +13,12 @@
|
|
|
13
13
|
"import": "./lib/esm/index.mjs",
|
|
14
14
|
"types": "./lib/types/index.d.ts"
|
|
15
15
|
},
|
|
16
|
+
"dependencies": {
|
|
17
|
+
"@semcore/flex-box": "16.1.0-prerelease.0",
|
|
18
|
+
"@semcore/neighbor-location": "16.1.0-prerelease.0"
|
|
19
|
+
},
|
|
16
20
|
"peerDependencies": {
|
|
17
|
-
"@semcore/base-components": "^16.
|
|
21
|
+
"@semcore/base-components": "^16.6.0-prerelease.0"
|
|
18
22
|
},
|
|
19
23
|
"repository": {
|
|
20
24
|
"type": "git",
|
|
@@ -22,10 +26,9 @@
|
|
|
22
26
|
"directory": "semcore/input"
|
|
23
27
|
},
|
|
24
28
|
"devDependencies": {
|
|
25
|
-
"@semcore/core": "16.
|
|
26
|
-
"@semcore/base-components": "16.4.3-prerelease.9",
|
|
29
|
+
"@semcore/core": "16.6.0-prerelease.0",
|
|
27
30
|
"@semcore/testing-utils": "1.0.0",
|
|
28
|
-
"@semcore/icon": "16.
|
|
31
|
+
"@semcore/icon": "16.8.0-prerelease.0"
|
|
29
32
|
},
|
|
30
33
|
"scripts": {
|
|
31
34
|
"build": "pnpm semcore-builder --source=js && pnpm vite build"
|