@semcore/input 16.0.0-prerelease.6 → 16.0.0-prerelease.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/lib/esm/Input.mjs CHANGED
@@ -1,164 +1,183 @@
1
- import S from "@babel/runtime/helpers/esm/objectSpread2";
2
- import z from "@babel/runtime/helpers/esm/classCallCheck";
3
- import L from "@babel/runtime/helpers/esm/createClass";
4
- import m from "@babel/runtime/helpers/esm/assertThisInitialized";
5
- import V from "@babel/runtime/helpers/esm/inherits";
6
- import w from "@babel/runtime/helpers/esm/createSuper";
7
- import l from "@babel/runtime/helpers/esm/defineProperty";
8
- import { createComponent as O, sstyled as b, assignProps as x, Component as P } from "@semcore/core";
9
- import o from "react";
10
- import { InvalidStateBox as A, Box as y } from "@semcore/flex-box";
11
- import v from "@semcore/neighbor-location";
12
- import k from "@semcore/core/lib/utils/enhances/autoFocusEnhance";
13
- var E = (
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 _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
5
+ import _inherits from "@babel/runtime/helpers/esm/inherits";
6
+ import _createSuper from "@babel/runtime/helpers/esm/createSuper";
7
+ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
8
+ import { createComponent, sstyled, assignProps, Component } from "@semcore/core";
9
+ import React from "react";
10
+ import { InvalidStateBox, Box } from "@semcore/flex-box";
11
+ import NeighborLocation from "@semcore/neighbor-location";
12
+ import autoFocusEnhance from "@semcore/core/lib/utils/enhances/autoFocusEnhance";
13
+ var style = (
14
14
  /*__reshadow_css_start__*/
15
- (b.insert(
15
+ (sstyled.insert(
16
16
  /*__inner_css_start__*/
17
17
  ".___SInput_1jqp6_gg_{display:inline-flex;width:100%;align-items:center;position:relative;z-index:0;vertical-align:middle;padding:1px;box-sizing:border-box}.___SInput_1jqp6_gg_ input:-webkit-autofill{border-radius:var(--intergalactic-control-rounded, 6px);-webkit-box-shadow:0 0 0 30px #faffbd inset}.___SInput_1jqp6_gg_ input:-webkit-autofill~.___SOutline_1jqp6_gg_{background-color:#faffbd}.___SValue_1jqp6_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_1jqp6_gg_:focus{outline:0}.___SValue_1jqp6_gg_::-moz-placeholder{color:var(--intergalactic-text-placeholder, #8a8e9b)}.___SValue_1jqp6_gg_::placeholder{color:var(--intergalactic-text-placeholder, #8a8e9b)}.___SValue_1jqp6_gg_:not(:disabled):-moz-read-only~.___SOutline_1jqp6_gg_{background:var(--intergalactic-bg-secondary-neutral, #f4f5f9)}.___SValue_1jqp6_gg_:not(:disabled):read-only~.___SOutline_1jqp6_gg_{background:var(--intergalactic-bg-secondary-neutral, #f4f5f9)}.___SValue_1jqp6_gg_:disabled{-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--intergalactic-disabled-opacity, 0.3)}.___SInput_1jqp6_gg_.__disabled_1jqp6_gg_ .___SOutline_1jqp6_gg_,.___SValue_1jqp6_gg_:disabled~.___SOutline_1jqp6_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none}.___SOutline_1jqp6_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_1jqp6_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_1jqp6_gg_.__interactive_1jqp6_gg_{cursor:pointer}@media (hover:hover){.___SAddon_1jqp6_gg_.__interactive_1jqp6_gg_:hover{color:var(--intergalactic-icon-secondary-neutral-hover-active, #878992)}}.___SAddon_1jqp6_gg_.__disabled_1jqp6_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none}.___SAddon_1jqp6_gg_._size_m_1jqp6_gg_:not(.___SButton_1jqp6_gg_){padding:0 var(--intergalactic-spacing-2x, 8px)}.___SAddon_1jqp6_gg_._size_l_1jqp6_gg_:not(.___SButton_1jqp6_gg_){padding:0 var(--intergalactic-spacing-2x, 8px)0 var(--intergalactic-spacing-3x, 12px)}.___SInput_1jqp6_gg_ .___SAddon_1jqp6_gg_:nth-last-child(2){margin-right:-1px}.___SValue_1jqp6_gg_._size_m_1jqp6_gg_{padding:0 var(--intergalactic-spacing-2x, 8px)}.___SValue_1jqp6_gg_._size_l_1jqp6_gg_{padding:0 var(--intergalactic-spacing-3x, 12px)}.___SInput_1jqp6_gg_._size_m_1jqp6_gg_{font-size:var(--intergalactic-fs-200, 14px);height:var(--intergalactic-form-control-m, 28px)}.___SInput_1jqp6_gg_._size_l_1jqp6_gg_{font-size:var(--intergalactic-fs-300, 16px);height:var(--intergalactic-form-control-l, 40px)}.___SInput_1jqp6_gg_:has(.___SValue_1jqp6_gg_:focus-visible){z-index:1}.___SInput_1jqp6_gg_._state_normal_1jqp6_gg_ .___SOutline_1jqp6_gg_{border-color:var(--intergalactic-border-primary, #c4c7cf)}.___SInput_1jqp6_gg_._state_normal_1jqp6_gg_:has(.___SValue_1jqp6_gg_:focus-visible) .___SOutline_1jqp6_gg_{border-color:var(--intergalactic-border-info-active, #006dca);box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5))}.___SInput_1jqp6_gg_._state_valid_1jqp6_gg_ .___SOutline_1jqp6_gg_{border-color:var(--intergalactic-border-success-active, #007c65)}.___SInput_1jqp6_gg_._state_valid_1jqp6_gg_:has(.___SValue_1jqp6_gg_:focus-visible) .___SOutline_1jqp6_gg_{border-color:var(--intergalactic-border-success-active, #007c65);box-shadow:var(--intergalactic-keyboard-focus-valid, 0px 0px 0px 3px rgba(0, 159, 129, 0.5))}.___SInput_1jqp6_gg_._state_invalid_1jqp6_gg_ .___SOutline_1jqp6_gg_{border-color:var(--intergalactic-border-critical-active, #d1002f)}.___SInput_1jqp6_gg_._state_invalid_1jqp6_gg_:has(.___SValue_1jqp6_gg_:focus-visible) .___SOutline_1jqp6_gg_{border-color:var(--intergalactic-border-critical-active, #d1002f);box-shadow:var(--intergalactic-keyboard-focus-invalid, 0px 0px 0px 3px rgba(255, 73, 83, 0.5))}.___SInput_1jqp6_gg_._neighborLocation_right_1jqp6_gg_ .___SOutline_1jqp6_gg_{border-top-right-radius:0;border-bottom-right-radius:0}.___SInput_1jqp6_gg_._neighborLocation_both_1jqp6_gg_ .___SOutline_1jqp6_gg_{border-radius:0;border-left:none}.___SInput_1jqp6_gg_._neighborLocation_left_1jqp6_gg_ .___SOutline_1jqp6_gg_{border-top-left-radius:0;border-bottom-left-radius:0;border-left:none}.___SValue_1jqp6_gg_._neighborLocation_right_1jqp6_gg_{padding-right:0}.___SValue_1jqp6_gg_._neighborLocation_both_1jqp6_gg_{padding-left:0;padding-right:0}.___SValue_1jqp6_gg_._neighborLocation_left_1jqp6_gg_{padding-left:0}",
18
18
  "1jqp6_gg_"
19
19
  ), {
20
- __SInput: "___SInput_1jqp6_gg_",
21
- _disabled: "__disabled_1jqp6_gg_",
22
- __SOutline: "___SOutline_1jqp6_gg_",
23
- __SValue: "___SValue_1jqp6_gg_",
24
- __SAddon: "___SAddon_1jqp6_gg_",
25
- _size_m: "_size_m_1jqp6_gg_",
26
- __SButton: "___SButton_1jqp6_gg_",
27
- _size_l: "_size_l_1jqp6_gg_",
28
- _neighborLocation_right: "_neighborLocation_right_1jqp6_gg_",
29
- _neighborLocation_both: "_neighborLocation_both_1jqp6_gg_",
30
- _neighborLocation_left: "_neighborLocation_left_1jqp6_gg_",
31
- _interactive: "__interactive_1jqp6_gg_",
32
- _state_normal: "_state_normal_1jqp6_gg_",
33
- _state_valid: "_state_valid_1jqp6_gg_",
34
- _state_invalid: "_state_invalid_1jqp6_gg_"
20
+ "__SInput": "___SInput_1jqp6_gg_",
21
+ "_disabled": "__disabled_1jqp6_gg_",
22
+ "__SOutline": "___SOutline_1jqp6_gg_",
23
+ "__SValue": "___SValue_1jqp6_gg_",
24
+ "__SAddon": "___SAddon_1jqp6_gg_",
25
+ "_size_m": "_size_m_1jqp6_gg_",
26
+ "__SButton": "___SButton_1jqp6_gg_",
27
+ "_size_l": "_size_l_1jqp6_gg_",
28
+ "_neighborLocation_right": "_neighborLocation_right_1jqp6_gg_",
29
+ "_neighborLocation_both": "_neighborLocation_both_1jqp6_gg_",
30
+ "_neighborLocation_left": "_neighborLocation_left_1jqp6_gg_",
31
+ "_interactive": "__interactive_1jqp6_gg_",
32
+ "_state_normal": "_state_normal_1jqp6_gg_",
33
+ "_state_valid": "_state_valid_1jqp6_gg_",
34
+ "_state_invalid": "_state_invalid_1jqp6_gg_"
35
35
  })
36
- ), h = /* @__PURE__ */ function(p) {
37
- V(i, p);
38
- var c = w(i);
39
- function i() {
40
- var a;
41
- z(this, i);
42
- for (var _ = arguments.length, r = new Array(_), t = 0; t < _; t++)
43
- r[t] = arguments[t];
44
- return a = c.call.apply(c, [this].concat(r)), l(m(a), "inputRef", /* @__PURE__ */ o.createRef()), l(m(a), "handleMouseDownAddon", function(n) {
45
- var e;
46
- n.preventDefault(), (e = a.inputRef.current) === null || e === void 0 || e.focus();
47
- }), l(m(a), "handleKeyDown", function(n) {
48
- n.key === "Enter" && setTimeout(function() {
49
- if (document.activeElement === document.body) {
50
- var e;
51
- (e = a.inputRef.current) === null || e === void 0 || e.focus();
52
- }
53
- }, 10);
54
- }), a;
36
+ );
37
+ var Input = /* @__PURE__ */ function(_Component) {
38
+ _inherits(Input2, _Component);
39
+ var _super = _createSuper(Input2);
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 = _super.call.apply(_super, [this].concat(args));
47
+ _defineProperty(_assertThisInitialized(_this), "inputRef", /* @__PURE__ */ React.createRef());
48
+ _defineProperty(_assertThisInitialized(_this), "handleMouseDownAddon", function(event) {
49
+ var _this$inputRef$curren;
50
+ event.preventDefault();
51
+ (_this$inputRef$curren = _this.inputRef.current) === null || _this$inputRef$curren === void 0 ? void 0 : _this$inputRef$curren.focus();
52
+ });
53
+ _defineProperty(_assertThisInitialized(_this), "handleKeyDown", function(event) {
54
+ if (event.key === "Enter") {
55
+ setTimeout(function() {
56
+ if (document.activeElement === document.body) {
57
+ var _this$inputRef$curren2;
58
+ (_this$inputRef$curren2 = _this.inputRef.current) === null || _this$inputRef$curren2 === void 0 ? void 0 : _this$inputRef$curren2.focus();
59
+ }
60
+ }, 10);
61
+ }
62
+ });
63
+ return _this;
55
64
  }
56
- return L(i, [{
65
+ _createClass(Input2, [{
57
66
  key: "getAddonProps",
58
- value: function() {
59
- var _ = this.asProps, r = _.disabled, t = _.size;
67
+ value: function getAddonProps() {
68
+ var _this$asProps = this.asProps, disabled = _this$asProps.disabled, size = _this$asProps.size;
60
69
  return {
61
- disabled: r,
70
+ disabled,
62
71
  onMouseDown: this.handleMouseDownAddon,
63
- size: t
72
+ size
64
73
  };
65
74
  }
66
75
  }, {
67
76
  key: "getValueProps",
68
- value: function() {
69
- var _ = this.asProps, r = _.size, t = _.disabled, n = _.state, e = _.role, s = _.placeholder, u = _["aria-haspopup"], d = _["aria-controls"], f = _["aria-expanded"], j = _["aria-autocomplete"], q = _["aria-owns"], g = _["aria-activedescendant"];
77
+ value: function getValueProps() {
78
+ 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"];
70
79
  return {
71
80
  ref: this.inputRef,
72
- size: r,
73
- disabled: t,
74
- state: n,
75
- role: e,
76
- placeholder: s,
77
- "aria-haspopup": u,
78
- "aria-controls": d,
79
- "aria-expanded": f,
80
- "aria-autocomplete": j,
81
- "aria-owns": q,
82
- "aria-activedescendant": g
81
+ size,
82
+ disabled,
83
+ state,
84
+ role,
85
+ placeholder,
86
+ "aria-haspopup": ariaHaspopup,
87
+ "aria-controls": ariaControls,
88
+ "aria-expanded": ariaExpanded,
89
+ "aria-autocomplete": ariaAutocomplete,
90
+ "aria-owns": ariaOwns,
91
+ "aria-activedescendant": ariaActivedescendant
83
92
  };
84
93
  }
85
94
  }, {
86
95
  key: "render",
87
- value: function() {
88
- var _ = this.asProps, r = this, t = y, n = "div", e = this.asProps, s = e.Children, u = e.styles, d = e.neighborLocation, f = e.controlsLength, j = e.state;
89
- return /* @__PURE__ */ o.createElement(v.Detect, {
90
- neighborLocation: d
91
- }, function(q) {
92
- var g;
93
- return g = b(u), /* @__PURE__ */ o.createElement(t, g.cn("SInput", S({}, x({
94
- onKeyDown: r.handleKeyDown,
95
- neighborLocation: q,
96
- __excludeProps: ["role", "aria-haspopup", "aria-controls", "aria-expanded", "placeholder", "aria-autocomplete", "aria-owns", "aria-activedescendant", "tabIndex"]
97
- }, _))), /* @__PURE__ */ o.createElement(v, g.cn("NeighborLocation", {
98
- controlsLength: f
99
- }), /* @__PURE__ */ o.createElement(s, g.cn("Children", {}))), /* @__PURE__ */ o.createElement(n, g.cn("SOutline", {}), j === "invalid" && /* @__PURE__ */ o.createElement(A, g.cn("InvalidStateBox", {}))));
96
+ value: function render() {
97
+ var _ref = this.asProps, _this2 = this;
98
+ var SInput = Box;
99
+ var SOutline = "div";
100
+ 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;
101
+ return /* @__PURE__ */ React.createElement(NeighborLocation.Detect, {
102
+ neighborLocation
103
+ }, function(neighborLocation2) {
104
+ var _ref4;
105
+ return _ref4 = sstyled(styles), /* @__PURE__ */ React.createElement(SInput, _ref4.cn("SInput", _objectSpread({}, assignProps({
106
+ "onKeyDown": _this2.handleKeyDown,
107
+ "neighborLocation": neighborLocation2,
108
+ "__excludeProps": ["role", "aria-haspopup", "aria-controls", "aria-expanded", "placeholder", "aria-autocomplete", "aria-owns", "aria-activedescendant", "tabIndex"]
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", {}))));
100
112
  });
101
113
  }
102
- }]), i;
103
- }(P);
104
- l(h, "displayName", "Input");
105
- l(h, "defaultProps", {
114
+ }]);
115
+ return Input2;
116
+ }(Component);
117
+ _defineProperty(Input, "displayName", "Input");
118
+ _defineProperty(Input, "defaultProps", {
106
119
  size: "m",
107
120
  state: "normal"
108
121
  });
109
- l(h, "style", E);
110
- var I = /* @__PURE__ */ function(p) {
111
- V(i, p);
112
- var c = w(i);
113
- function i() {
114
- return z(this, i), c.apply(this, arguments);
122
+ _defineProperty(Input, "style", style);
123
+ var Value = /* @__PURE__ */ function(_Component2) {
124
+ _inherits(Value2, _Component2);
125
+ var _super2 = _createSuper(Value2);
126
+ function Value2() {
127
+ _classCallCheck(this, Value2);
128
+ return _super2.apply(this, arguments);
115
129
  }
116
- return L(i, [{
130
+ _createClass(Value2, [{
117
131
  key: "uncontrolledProps",
118
- value: function() {
132
+ value: function uncontrolledProps() {
119
133
  return {
120
- value: function(r) {
121
- return r.target.value;
134
+ value: function value(e) {
135
+ return e.target.value;
122
136
  }
123
137
  };
124
138
  }
125
139
  }, {
126
140
  key: "render",
127
- value: function() {
128
- var _ = this.asProps, r = y, t = this.asProps, n = t.styles, e = t.neighborLocation, s = t.state;
129
- return /* @__PURE__ */ o.createElement(v.Detect, {
130
- neighborLocation: e
131
- }, function(u) {
132
- var d;
133
- return d = b(n), /* @__PURE__ */ o.createElement(r, d.cn("SValue", S({}, x({
134
- neighborLocation: u,
135
- tag: "input",
136
- type: "text",
137
- "aria-invalid": s === "invalid"
138
- }, _))));
141
+ value: function render() {
142
+ var _ref2 = this.asProps;
143
+ var SValue = Box;
144
+ var _this$asProps4 = this.asProps, styles = _this$asProps4.styles, neighborLocation = _this$asProps4.neighborLocation, state = _this$asProps4.state;
145
+ return /* @__PURE__ */ React.createElement(NeighborLocation.Detect, {
146
+ neighborLocation
147
+ }, function(neighborLocation2) {
148
+ var _ref5;
149
+ return _ref5 = sstyled(styles), /* @__PURE__ */ React.createElement(SValue, _ref5.cn("SValue", _objectSpread({}, assignProps({
150
+ "neighborLocation": neighborLocation2,
151
+ "tag": "input",
152
+ "type": "text",
153
+ "aria-invalid": state === "invalid"
154
+ }, _ref2))));
139
155
  });
140
156
  }
141
- }]), i;
142
- }(P);
143
- l(I, "defaultProps", {
157
+ }]);
158
+ return Value2;
159
+ }(Component);
160
+ _defineProperty(Value, "defaultProps", {
144
161
  defaultValue: ""
145
162
  });
146
- l(I, "enhance", [k()]);
147
- function C(p) {
148
- var c = arguments[0], i = y, a = p.Children, _ = p.styles, r = p.neighborLocation;
149
- return /* @__PURE__ */ o.createElement(v.Detect, {
150
- neighborLocation: r
151
- }, function(t) {
152
- var n;
153
- return n = b(_), /* @__PURE__ */ o.createElement(i, n.cn("SAddon", S({}, x({
154
- neighborLocation: t
155
- }, c))), /* @__PURE__ */ o.createElement(a, n.cn("Children", {})));
163
+ _defineProperty(Value, "enhance", [autoFocusEnhance()]);
164
+ function Addon(props) {
165
+ var _ref3 = arguments[0];
166
+ var SAddon = Box;
167
+ var Children = props.Children, styles = props.styles, neighborLocation = props.neighborLocation;
168
+ return /* @__PURE__ */ React.createElement(NeighborLocation.Detect, {
169
+ neighborLocation
170
+ }, function(neighborLocation2) {
171
+ var _ref6;
172
+ return _ref6 = sstyled(styles), /* @__PURE__ */ React.createElement(SAddon, _ref6.cn("SAddon", _objectSpread({}, assignProps({
173
+ "neighborLocation": neighborLocation2
174
+ }, _ref3))), /* @__PURE__ */ React.createElement(Children, _ref6.cn("Children", {})));
156
175
  });
157
176
  }
158
- const Q = O(h, {
159
- Addon: C,
160
- Value: I
177
+ const Input$1 = createComponent(Input, {
178
+ Addon,
179
+ Value
161
180
  });
162
181
  export {
163
- Q as default
182
+ Input$1 as default
164
183
  };
package/lib/esm/index.mjs CHANGED
@@ -1,4 +1,4 @@
1
- import { default as o } from "./Input.mjs";
1
+ import { default as default2 } from "./Input.mjs";
2
2
  export {
3
- o as default
3
+ default2 as default
4
4
  };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@semcore/input",
3
3
  "description": "Semrush Input Component",
4
- "version": "16.0.0-prerelease.6",
4
+ "version": "16.0.0-prerelease.9",
5
5
  "main": "lib/cjs/index.js",
6
6
  "module": "lib/es6/index.js",
7
7
  "typings": "lib/types/index.d.ts",
@@ -14,11 +14,11 @@
14
14
  "types": "./lib/types/index.d.ts"
15
15
  },
16
16
  "dependencies": {
17
- "@semcore/neighbor-location": "16.0.0-prerelease.6",
18
- "@semcore/flex-box": "16.0.0-prerelease.6"
17
+ "@semcore/neighbor-location": "16.0.0-prerelease.9",
18
+ "@semcore/flex-box": "16.0.0-prerelease.9"
19
19
  },
20
20
  "peerDependencies": {
21
- "@semcore/base-components": "^16.0.0-prerelease.6"
21
+ "@semcore/base-components": "^16.0.0-prerelease.9"
22
22
  },
23
23
  "repository": {
24
24
  "type": "git",