@semcore/pills 5.43.0-prerelease.11 → 5.43.0-prerelease.15

package/CHANGELOG.md

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

package/lib/esm/Pills.mjs

@@ -0,0 +1,158 @@
+import h from "@babel/runtime/helpers/esm/objectSpread2";
+import k from "@babel/runtime/helpers/esm/classCallCheck";
+import L from "@babel/runtime/helpers/esm/createClass";
+import b from "@babel/runtime/helpers/esm/assertThisInitialized";
+import A from "@babel/runtime/helpers/esm/inherits";
+import C from "@babel/runtime/helpers/esm/createSuper";
+import d from "@babel/runtime/helpers/esm/defineProperty";
+import { sstyled as T } from "@semcore/utils/lib/core/index";
+import E, { sstyled as w, assignProps as p, Component as D } from "@semcore/core";
+import s from "react";
+import { Box as P } from "@semcore/flex-box";
+import j, { useNeighborLocationDetect as N } from "@semcore/neighbor-location";
+import y from "@semcore/utils/lib/enhances/keyboardFocusEnhance";
+import R from "@semcore/utils/lib/addonTextChildren";
+import F from "@semcore/utils/lib/enhances/a11yEnhance";
+import S from "@semcore/utils/lib/logger";
+var V = (
+  /*__reshadow_css_start__*/
+  (T.insert(
+    /*__inner_css_start__*/
+    ".___SPills_wxe59_gg_{display:inline-flex;align-items:center;justify-content:center;isolation:isolate;outline:0}.___SPills_wxe59_gg_.__keyboardFocused_wxe59_gg_:focus{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));z-index:1}.___SPill_wxe59_gg_{display:inline-flex;align-items:center;justify-content:center;line-height:normal;position:relative;touch-action:manipulation;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;user-select:none;box-sizing:border-box;padding:0;margin:0;box-shadow:none;-webkit-text-decoration:none;text-decoration:none;-webkit-tap-highlight-color:transparent;overflow:visible;outline:0;text-align:center;vertical-align:middle;font-family:inherit;cursor:pointer;background:var(--intergalactic-bg-primary-neutral, #ffffff);border:1px solid var(--intergalactic-border-primary, #c4c7cf);border-radius:var(--intergalactic-control-rounded, 6px)}.___SPill_wxe59_gg_::-moz-focus-inner{border:0;padding:0}.___SPill_wxe59_gg_:active,.___SPill_wxe59_gg_:focus{outline:0;-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___SPill_wxe59_gg_:hover{outline:0;-webkit-text-decoration:none;text-decoration:none;background:var(--intergalactic-bg-primary-neutral-hover, #f4f5f9)}}.___SPill_wxe59_gg_.__selected_wxe59_gg_{background:var(--intergalactic-control-secondary-info, rgba(0, 143, 248, 0.1));border-color:var(--intergalactic-border-info-active, #006dca);z-index:1}.___SPill_wxe59_gg_.__disabled_wxe59_gg_{cursor:default;pointer-events:none}.___SPill_wxe59_gg_.__disabled_wxe59_gg_>*{opacity:var(--intergalactic-disabled-opacity, 0.3)}.___SPill_wxe59_gg_.__keyboardFocused_wxe59_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));z-index:1}.___SText_wxe59_gg_{color:var(--intergalactic-text-primary, #191b23);display:inline-flex}.___SAddon_wxe59_gg_{color:var(--intergalactic-text-secondary, #6c6e79);display:inline-flex;align-items:center;justify-content:center}.___SPill_wxe59_gg_._size_m_wxe59_gg_{height:var(--intergalactic-form-control-m, 28px);min-width:var(--intergalactic-form-control-m, 28px);font-size:var(--intergalactic-fs-200, 14px)}.___SPill_wxe59_gg_._size_l_wxe59_gg_ .___SText_wxe59_gg_,.___SPill_wxe59_gg_._size_m_wxe59_gg_ .___SText_wxe59_gg_{margin-left:var(--intergalactic-spacing-2x, 8px);margin-right:var(--intergalactic-spacing-2x, 8px)}.___SPill_wxe59_gg_._size_m_wxe59_gg_ .___SAddon_wxe59_gg_:not(:only-child):first-child{margin-left:var(--intergalactic-spacing-2x, 8px)}.___SPill_wxe59_gg_._size_m_wxe59_gg_ .___SAddon_wxe59_gg_:not(:only-child):last-child{margin-right:var(--intergalactic-spacing-2x, 8px)}.___SPill_wxe59_gg_._size_m_wxe59_gg_ .___SAddon_wxe59_gg_:only-child{margin-left:var(--intergalactic-spacing-2x, 8px);margin-right:var(--intergalactic-spacing-2x, 8px)}.___SPill_wxe59_gg_._size_l_wxe59_gg_{height:var(--intergalactic-form-control-l, 40px);min-width:var(--intergalactic-form-control-l, 40px);font-size:var(--intergalactic-fs-300, 16px)}.___SPill_wxe59_gg_._size_l_wxe59_gg_ .___SAddon_wxe59_gg_:only-child,.___SPill_wxe59_gg_._size_l_wxe59_gg_ .___SText_wxe59_gg_:only-child{margin-left:var(--intergalactic-spacing-3x, 12px);margin-right:var(--intergalactic-spacing-3x, 12px)}.___SPill_wxe59_gg_._size_l_wxe59_gg_ .___SAddon_wxe59_gg_:not(:only-child):first-child{margin-left:var(--intergalactic-spacing-3x, 12px)}.___SPill_wxe59_gg_._size_l_wxe59_gg_ .___SAddon_wxe59_gg_:not(:only-child):last-child{margin-right:var(--intergalactic-spacing-3x, 12px)}.___SPill_wxe59_gg_._neighborLocation_right_wxe59_gg_{border-top-right-radius:0;border-bottom-right-radius:0}.___SPill_wxe59_gg_._neighborLocation_both_wxe59_gg_{border-radius:0;margin-left:-1px}.___SPill_wxe59_gg_._neighborLocation_left_wxe59_gg_{border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-1px}",
+    "wxe59_gg_"
+  ), {
+    __SPills: "___SPills_wxe59_gg_",
+    _keyboardFocused: "__keyboardFocused_wxe59_gg_",
+    __SPill: "___SPill_wxe59_gg_",
+    _selected: "__selected_wxe59_gg_",
+    __SText: "___SText_wxe59_gg_",
+    __SAddon: "___SAddon_wxe59_gg_",
+    _neighborLocation_right: "_neighborLocation_right_wxe59_gg_",
+    _neighborLocation_both: "_neighborLocation_both_wxe59_gg_",
+    _neighborLocation_left: "_neighborLocation_left_wxe59_gg_",
+    _disabled: "__disabled_wxe59_gg_",
+    _size_m: "_size_m_wxe59_gg_",
+    _size_l: "_size_l_wxe59_gg_"
+  })
+), H = {
+  onNeighborChange: function(i, t) {
+    i && (i.focus(), (t.behavior === "auto" || t.behavior === "radio") && i.click());
+  },
+  childSelector: function(i) {
+    return i.behavior === "auto" || i.behavior === "radio" ? ["role", "radio"] : ["role", "tab"];
+  }
+}, f = /* @__PURE__ */ function(r) {
+  A(t, r);
+  var i = C(t);
+  function t() {
+    var _;
+    k(this, t);
+    for (var l = arguments.length, o = new Array(l), n = 0; n < l; n++)
+      o[n] = arguments[n];
+    return _ = i.call.apply(i, [this].concat(o)), d(b(_), "itemValues", []), d(b(_), "bindHandlerClick", function(e) {
+      return function(a) {
+        _.handlers.value(e, a);
+      };
+    }), d(b(_), "bindHandleKeyDown", function(e) {
+      return function(a) {
+        (a.key === "Enter" || a.key === " ") && (a.preventDefault(), _.handlers.value(e, a));
+      };
+    }), d(b(_), "changeIndex", function(e, a) {
+      for (var c = !1; !c && e >= 0 && e < _.itemValues.length; ) {
+        a === "increment" && e++, a === "decrement" && e--;
+        var g = _.itemRefs[e];
+        (g == null ? void 0 : g.disabled) === !1 && (c = !0);
+      }
+      return e >= 0 && e < _.itemValues.length ? e : void 0;
+    }), _;
+  }
+  return L(t, [{
+    key: "componentDidMount",
+    value: function() {
+      S.warn(this.asProps.behavior === "tabs", "Use behavior `manual` instead of `tabs`. \n`tabs` is deprecated and will be removed in the next major release.", "Pills"), S.warn(this.asProps.behavior === "radio", "Use behavior `auto` (or nothing, it is default value) instead of `radio`. \n`radio` is deprecated and will be removed in the next major release.", "Pills");
+    }
+  }, {
+    key: "uncontrolledProps",
+    value: function() {
+      return {
+        value: null
+      };
+    }
+  }, {
+    key: "getItemProps",
+    value: function(l, o) {
+      var n = this.asProps, e = n.value, a = n.size, c = n.disabled, g = n.behavior, x = e === l.value;
+      return this.itemValues[o] = l.value, {
+        index: o,
+        size: a,
+        disabled: c,
+        selected: x,
+        behavior: g,
+        tabIndex: x ? 0 : -1,
+        onClick: this.bindHandlerClick(l.value),
+        onKeyDown: this.bindHandleKeyDown(l.value)
+      };
+    }
+  }, {
+    key: "render",
+    value: function() {
+      var l = this.asProps, o, n = P, e = this.asProps, a = e.Children, c = e.styles, g = e.controlsLength, x = e.disabled, m = e.behavior, u = e.value;
+      return o = w(c), /* @__PURE__ */ s.createElement(n, o.cn("SPills", h({}, p({
+        role: m === "radio" || m === "auto" ? "radiogroup" : "tablist",
+        "aria-disabled": x,
+        "use:tabIndex": u !== null ? -1 : 0
+      }, l))), /* @__PURE__ */ s.createElement(j, o.cn("NeighborLocation", {
+        controlsLength: g
+      }), /* @__PURE__ */ s.createElement(a, o.cn("Children", {}))));
+    }
+  }]), t;
+}(D);
+d(f, "displayName", "Pills");
+d(f, "style", V);
+d(f, "defaultProps", function(r) {
+  var i = r.behavior;
+  return {
+    size: "m",
+    defaultValue: null,
+    behavior: i ?? "auto"
+  };
+});
+d(f, "enhance", [F(H), y()]);
+function z(r) {
+  var i = arguments[0], t, _ = P, l = r.Children, o = r.styles, n = r.addonLeft, e = r.addonRight, a = r.selected, c = r.disabled, g = r.index, x = r.behavior, m = N(g), u = {};
+  return x === "radio" || x === "auto" ? (u.role = "radio", u["aria-checked"] = a) : (u.role = "tab", u["aria-selected"] = a), t = w(o), /* @__PURE__ */ s.createElement(_, t.cn("SPill", h({}, p(h({
+    tag: "button",
+    type: "button",
+    neighborLocation: m,
+    "aria-disabled": c
+  }, u), i))), n ? /* @__PURE__ */ s.createElement(v.Item.Addon, {
+    tag: n
+  }) : null, R(l, v.Item.Text, v.Item.Addon), e ? /* @__PURE__ */ s.createElement(v.Item.Addon, {
+    tag: e
+  }) : null);
+}
+z.enhance = [y()];
+function I(r) {
+  var i = arguments[0], t, _ = P;
+  return t = w(r.styles), /* @__PURE__ */ s.createElement(_, t.cn("SText", h({}, p({
+    tag: "span"
+  }, i))));
+}
+function K(r) {
+  var i = arguments[0], t, _ = P;
+  return t = w(r.styles), /* @__PURE__ */ s.createElement(_, t.cn("SAddon", h({}, p({
+    tag: "span"
+  }, i))));
+}
+var v = E(f, {
+  Item: [z, {
+    Text: I,
+    Addon: K
+  }]
+}), re = function(i) {
+  return i;
+};
+export {
+  v as default,
+  re as wrapPills
+};

package/lib/esm/index.mjs

@@ -0,0 +1,5 @@
+import { default as a, wrapPills as e } from "./Pills.mjs";
+export {
+  a as default,
+  e as wrapPills
+};

package/package.json

@@ -1,20 +1,25 @@
 {
   "name": "@semcore/pills",
   "description": "Semrush Pills Component",
-  "version": "5.43.0-prerelease.11",
+  "version": "5.43.0-prerelease.15",
   "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/flex-box": "5.41.0-prerelease.11",
-    "@semcore/neighbor-location": "4.39.0-prerelease.11",
-    "@semcore/utils": "4.47.1-prerelease.11"
+    "@semcore/flex-box": "5.41.0-prerelease.15",
+    "@semcore/neighbor-location": "4.40.0-prerelease.15",
+    "@semcore/utils": "4.48.0-prerelease.15"
   },
   "peerDependencies": {
-    "@semcore/core": "^2.39.0-prerelease.11",
+    "@semcore/core": "^2.39.0-prerelease.15",
     "react": "16.8 - 18",
     "react-dom": "16.8 - 18"
   },
@@ -30,6 +35,6 @@
     "@semcore/testing-utils": "1.0.0"
   },
   "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\/*/],
+      },
+    },
+  }),
+);