@semcore/input 4.42.0-prerelease.1 → 4.42.0-prerelease.12

package/CHANGELOG.md

@@ -2,11 +2,11 @@
 
 CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
 
-## [4.42.0] - 2025-02-27
+## [4.42.0] - 2025-03-14
 
-### Changed
+### Added
 
-- Version minor update due to children dependencies update (`@semcore/utils` [4.45.1 ~> 4.47.0], `@semcore/neighbor-location` [4.38.1 ~> 4.39.0], `@semcore/flex-box` [5.40.1 ~> 5.41.0], `@semcore/core` [2.38.1 ~> 2.39.0]).
+- Build for ESM.
 
 ## [4.41.1] - 2025-02-05
 

package/lib/esm/Input.mjs

@@ -0,0 +1,185 @@
+import m from "@babel/runtime/helpers/esm/objectSpread2";
+import L from "@babel/runtime/helpers/esm/classCallCheck";
+import V from "@babel/runtime/helpers/esm/createClass";
+import x from "@babel/runtime/helpers/esm/assertThisInitialized";
+import w from "@babel/runtime/helpers/esm/inherits";
+import P from "@babel/runtime/helpers/esm/createSuper";
+import g from "@babel/runtime/helpers/esm/defineProperty";
+import { sstyled as A } from "@semcore/utils/lib/core/index";
+import E, { sstyled as S, assignProps as y, Component as O } from "@semcore/core";
+import o from "react";
+import { InvalidStateBox as C, Box as I } from "@semcore/flex-box";
+import f from "@semcore/neighbor-location";
+import D from "@semcore/utils/lib/enhances/autoFocusEnhance";
+import B from "@semcore/utils/lib/enhances/keyboardFocusEnhance";
+var F = (
+  /*__reshadow_css_start__*/
+  (A.insert(
+    /*__inner_css_start__*/
+    ".___SInput_1kj4x_gg_{display:inline-flex;width:100%;align-items:center;position:relative;z-index:0;vertical-align:middle;padding:1px;box-sizing:border-box}.___SInput_1kj4x_gg_ input:-webkit-autofill{border-radius:var(--intergalactic-control-rounded, 6px);-webkit-box-shadow:0 0 0 30px #faffbd inset}.___SInput_1kj4x_gg_ input:-webkit-autofill~.___SOutline_1kj4x_gg_{background-color:#faffbd}.___SValue_1kj4x_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_1kj4x_gg_:focus{outline:0}.___SValue_1kj4x_gg_::-moz-placeholder{color:var(--intergalactic-text-placeholder, #8a8e9b)}.___SValue_1kj4x_gg_::placeholder{color:var(--intergalactic-text-placeholder, #8a8e9b)}.___SValue_1kj4x_gg_:not(:disabled):-moz-read-only~.___SOutline_1kj4x_gg_{background:var(--intergalactic-bg-secondary-neutral, #f4f5f9)}.___SValue_1kj4x_gg_:not(:disabled):read-only~.___SOutline_1kj4x_gg_{background:var(--intergalactic-bg-secondary-neutral, #f4f5f9)}.___SValue_1kj4x_gg_:disabled{-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--intergalactic-disabled-opacity, 0.3)}.___SInput_1kj4x_gg_.__disabled_1kj4x_gg_ .___SOutline_1kj4x_gg_,.___SValue_1kj4x_gg_:disabled~.___SOutline_1kj4x_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none}.___SOutline_1kj4x_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_1kj4x_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_1kj4x_gg_.__interactive_1kj4x_gg_{cursor:pointer}@media (hover:hover){.___SAddon_1kj4x_gg_.__interactive_1kj4x_gg_:hover{color:var(--intergalactic-icon-secondary-neutral-hover-active, #878992)}}.___SAddon_1kj4x_gg_.__disabled_1kj4x_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none}.___SAddon_1kj4x_gg_._size_m_1kj4x_gg_:not(.___SButton_1kj4x_gg_){padding:0 var(--intergalactic-spacing-2x, 8px)}.___SAddon_1kj4x_gg_._size_l_1kj4x_gg_:not(.___SButton_1kj4x_gg_){padding:0 var(--intergalactic-spacing-2x, 8px)0 var(--intergalactic-spacing-3x, 12px)}.___SInput_1kj4x_gg_ .___SAddon_1kj4x_gg_:nth-last-child(2){margin-right:-1px}.___SValue_1kj4x_gg_._size_m_1kj4x_gg_{padding:0 var(--intergalactic-spacing-2x, 8px)}.___SValue_1kj4x_gg_._size_l_1kj4x_gg_{padding:0 var(--intergalactic-spacing-3x, 12px)}.___SInput_1kj4x_gg_._size_m_1kj4x_gg_{font-size:var(--intergalactic-fs-200, 14px);height:var(--intergalactic-form-control-m, 28px)}.___SInput_1kj4x_gg_._size_l_1kj4x_gg_{font-size:var(--intergalactic-fs-300, 16px);height:var(--intergalactic-form-control-l, 40px)}.___SInput_1kj4x_gg_.__focused_1kj4x_gg_{z-index:1}.___SInput_1kj4x_gg_._state_normal_1kj4x_gg_ .___SOutline_1kj4x_gg_{border-color:var(--intergalactic-border-primary, #c4c7cf)}.___SInput_1kj4x_gg_._state_normal_1kj4x_gg_.__focused_1kj4x_gg_ .___SOutline_1kj4x_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_1kj4x_gg_._state_valid_1kj4x_gg_ .___SOutline_1kj4x_gg_{border-color:var(--intergalactic-border-success-active, #007c65)}.___SInput_1kj4x_gg_._state_valid_1kj4x_gg_.__focused_1kj4x_gg_ .___SOutline_1kj4x_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_1kj4x_gg_._state_invalid_1kj4x_gg_ .___SOutline_1kj4x_gg_{border-color:var(--intergalactic-border-critical-active, #d1002f)}.___SInput_1kj4x_gg_._state_invalid_1kj4x_gg_.__focused_1kj4x_gg_ .___SOutline_1kj4x_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_1kj4x_gg_._neighborLocation_right_1kj4x_gg_ .___SOutline_1kj4x_gg_{border-top-right-radius:0;border-bottom-right-radius:0}.___SInput_1kj4x_gg_._neighborLocation_both_1kj4x_gg_ .___SOutline_1kj4x_gg_{border-radius:0;border-left:none}.___SInput_1kj4x_gg_._neighborLocation_left_1kj4x_gg_ .___SOutline_1kj4x_gg_{border-top-left-radius:0;border-bottom-left-radius:0;border-left:none}.___SValue_1kj4x_gg_._neighborLocation_right_1kj4x_gg_{padding-right:0}.___SValue_1kj4x_gg_._neighborLocation_both_1kj4x_gg_{padding-left:0;padding-right:0}.___SValue_1kj4x_gg_._neighborLocation_left_1kj4x_gg_{padding-left:0}",
+    "1kj4x_gg_"
+  ), {
+    __SInput: "___SInput_1kj4x_gg_",
+    _disabled: "__disabled_1kj4x_gg_",
+    __SOutline: "___SOutline_1kj4x_gg_",
+    __SValue: "___SValue_1kj4x_gg_",
+    __SAddon: "___SAddon_1kj4x_gg_",
+    _size_m: "_size_m_1kj4x_gg_",
+    __SButton: "___SButton_1kj4x_gg_",
+    _size_l: "_size_l_1kj4x_gg_",
+    _focused: "__focused_1kj4x_gg_",
+    _neighborLocation_right: "_neighborLocation_right_1kj4x_gg_",
+    _neighborLocation_both: "_neighborLocation_both_1kj4x_gg_",
+    _neighborLocation_left: "_neighborLocation_left_1kj4x_gg_",
+    _interactive: "__interactive_1kj4x_gg_",
+    _state_normal: "_state_normal_1kj4x_gg_",
+    _state_valid: "_state_valid_1kj4x_gg_",
+    _state_invalid: "_state_invalid_1kj4x_gg_"
+  })
+), k = /* @__PURE__ */ function(l) {
+  w(n, l);
+  var c = P(n);
+  function n() {
+    var e;
+    L(this, n);
+    for (var _ = arguments.length, i = new Array(_), a = 0; a < _; a++)
+      i[a] = arguments[a];
+    return e = c.call.apply(c, [this].concat(i)), g(x(e), "state", {
+      focused: !1
+    }), g(x(e), "inputRef", /* @__PURE__ */ o.createRef()), g(x(e), "handleMouseDownAddon", function(r) {
+      var t;
+      r.preventDefault(), (t = e.inputRef.current) === null || t === void 0 || t.focus();
+    }), g(x(e), "handleKeyDown", function(r) {
+      r.key === "Enter" && setTimeout(function() {
+        if (document.activeElement === document.body) {
+          var t;
+          (t = e.inputRef.current) === null || t === void 0 || t.focus();
+        }
+      }, 10);
+    }), g(x(e), "bindHandleValueFocused", function(r) {
+      return function() {
+        return e.setState({
+          focused: r
+        });
+      };
+    }), e;
+  }
+  return V(n, [{
+    key: "getAddonProps",
+    value: function() {
+      var _ = this.asProps, i = _.disabled, a = _.size;
+      return {
+        disabled: i,
+        onMouseDown: this.handleMouseDownAddon,
+        size: a
+      };
+    }
+  }, {
+    key: "getValueProps",
+    value: function() {
+      var _ = this.asProps, i = _.size, a = _.disabled, r = _.state, t = _.role, u = _.placeholder, p = _["aria-haspopup"], d = _["aria-controls"], b = _["aria-expanded"], h = _["aria-autocomplete"], v = _["aria-owns"], j = _["aria-activedescendant"];
+      return {
+        ref: this.inputRef,
+        size: i,
+        disabled: a,
+        state: r,
+        onFocus: this.bindHandleValueFocused(!0),
+        onBlur: this.bindHandleValueFocused(!1),
+        role: t,
+        placeholder: u,
+        "aria-haspopup": p,
+        "aria-controls": d,
+        "aria-expanded": b,
+        "aria-autocomplete": h,
+        "aria-owns": v,
+        "aria-activedescendant": j
+      };
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function(_) {
+      _.disabled !== this.asProps.disabled && this.asProps.disabled && this.setState({
+        focused: !1
+      });
+    }
+  }, {
+    key: "render",
+    value: function() {
+      var _ = this.asProps, i = this, a = I, r = "div", t = this.asProps, u = t.Children, p = t.styles, d = t.neighborLocation, b = t.controlsLength, h = t.state, v = this.state.focused;
+      return /* @__PURE__ */ o.createElement(f.Detect, {
+        neighborLocation: d
+      }, function(j) {
+        var s;
+        return s = S(p), /* @__PURE__ */ o.createElement(a, s.cn("SInput", m({}, y({
+          focused: v,
+          onKeyDown: i.handleKeyDown,
+          neighborLocation: j,
+          __excludeProps: ["role", "aria-haspopup", "aria-controls", "aria-expanded", "placeholder", "aria-autocomplete", "aria-owns", "aria-activedescendant", "tabIndex"]
+        }, _))), /* @__PURE__ */ o.createElement(f, s.cn("NeighborLocation", {
+          controlsLength: b
+        }), /* @__PURE__ */ o.createElement(u, s.cn("Children", {}))), /* @__PURE__ */ o.createElement(r, s.cn("SOutline", {}), h === "invalid" && /* @__PURE__ */ o.createElement(C, s.cn("InvalidStateBox", {}))));
+      });
+    }
+  }]), n;
+}(O);
+g(k, "displayName", "Input");
+g(k, "defaultProps", {
+  size: "m",
+  state: "normal"
+});
+g(k, "style", F);
+var z = /* @__PURE__ */ function(l) {
+  w(n, l);
+  var c = P(n);
+  function n() {
+    return L(this, n), c.apply(this, arguments);
+  }
+  return V(n, [{
+    key: "uncontrolledProps",
+    value: function() {
+      return {
+        value: function(i) {
+          return i.target.value;
+        }
+      };
+    }
+  }, {
+    key: "render",
+    value: function() {
+      var _ = this.asProps, i = I, a = this.asProps, r = a.styles, t = a.neighborLocation, u = a.state;
+      return /* @__PURE__ */ o.createElement(f.Detect, {
+        neighborLocation: t
+      }, function(p) {
+        var d;
+        return d = S(r), /* @__PURE__ */ o.createElement(i, d.cn("SValue", m({}, y({
+          neighborLocation: p,
+          tag: "input",
+          type: "text",
+          "aria-invalid": u === "invalid"
+        }, _))));
+      });
+    }
+  }]), n;
+}(O);
+g(z, "defaultProps", {
+  defaultValue: ""
+});
+g(z, "enhance", [B(), D()]);
+function R(l) {
+  var c = arguments[0], n = I, e = l.Children, _ = l.styles, i = l.neighborLocation;
+  return /* @__PURE__ */ o.createElement(f.Detect, {
+    neighborLocation: i
+  }, function(a) {
+    var r;
+    return r = S(_), /* @__PURE__ */ o.createElement(n, r.cn("SAddon", m({}, y({
+      neighborLocation: a
+    }, c))), /* @__PURE__ */ o.createElement(e, r.cn("Children", {})));
+  });
+}
+const Z = E(k, {
+  Addon: R,
+  Value: z
+});
+export {
+  Z as default
+};

package/lib/esm/index.mjs

@@ -0,0 +1,4 @@
+import { default as o } from "./Input.mjs";
+export {
+  o as default
+};

package/package.json

@@ -1,20 +1,25 @@
 {
   "name": "@semcore/input",
   "description": "Semrush Input Component",
-  "version": "4.42.0-prerelease.1",
+  "version": "4.42.0-prerelease.12",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",
   "sideEffects": false,
   "author": "UI-kit team <ui-kit-team@semrush.com>",
   "license": "MIT",
+  "exports": {
+    "require": "./lib/cjs/index.js",
+    "import": "./lib/esm/index.mjs",
+    "types": "./lib/types/index.d.ts"
+  },
   "dependencies": {
-    "@semcore/utils": "4.47.0-prerelease.1",
-    "@semcore/neighbor-location": "4.39.0-prerelease.1",
-    "@semcore/flex-box": "5.41.0-prerelease.1"
+    "@semcore/utils": "4.48.0-prerelease.12",
+    "@semcore/neighbor-location": "4.40.0-prerelease.12",
+    "@semcore/flex-box": "5.41.0-prerelease.12"
   },
   "peerDependencies": {
-    "@semcore/core": "^2.39.0-prerelease.1",
+    "@semcore/core": "^2.39.0-prerelease.12",
     "react": "16.8 - 18",
     "react-dom": "16.8 - 18"
   },
@@ -29,6 +34,6 @@
     "@semcore/icon": "*"
   },
   "scripts": {
-    "build": "pnpm semcore-builder --source=js"
+    "build": "pnpm semcore-builder --source=js && pnpm vite build"
   }
 }

package/vite.config.ts

@@ -0,0 +1,17 @@
+import { defineConfig, mergeConfig } from 'vite';
+
+import viteConfig from '../../commonVite.config';
+
+export default mergeConfig(
+  viteConfig,
+  defineConfig({
+    build: {
+      lib: {
+        entry: './src/index.js',
+      },
+      rollupOptions: {
+        external: ['react', 'react-dom', 'react/jsx-runtime', /@babel\/runtime\/*/, /@semcore\/*/],
+      },
+    },
+  }),
+);