@semcore/pills 16.0.0-prerelease.6 → 16.0.0-prerelease.7

package/lib/esm/Pills.mjs

@@ -1,155 +1,195 @@
-import u from "@babel/runtime/helpers/esm/objectSpread2";
-import z from "@babel/runtime/helpers/esm/classCallCheck";
-import w from "@babel/runtime/helpers/esm/createClass";
-import p from "@babel/runtime/helpers/esm/assertThisInitialized";
-import L from "@babel/runtime/helpers/esm/inherits";
-import A from "@babel/runtime/helpers/esm/createSuper";
-import d from "@babel/runtime/helpers/esm/defineProperty";
-import { sstyled as f, createComponent as k, assignProps as P, Component as C } from "@semcore/core";
-import s from "react";
-import { Box as S } from "@semcore/flex-box";
-import T, { useNeighborLocationDetect as E } from "@semcore/neighbor-location";
-import D from "@semcore/core/lib/utils/addonTextChildren";
-import N from "@semcore/core/lib/utils/enhances/a11yEnhance";
-import y from "@semcore/core/lib/utils/logger";
-var R = (
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import { sstyled, createComponent, assignProps, Component } from "@semcore/core";
+import React from "react";
+import { Box } from "@semcore/flex-box";
+import NeighborLocation, { useNeighborLocationDetect } from "@semcore/neighbor-location";
+import addonTextChildren from "@semcore/core/lib/utils/addonTextChildren";
+import a11yEnhance from "@semcore/core/lib/utils/enhances/a11yEnhance";
+import log from "@semcore/core/lib/utils/logger";
+var style = (
   /*__reshadow_css_start__*/
-  (f.insert(
+  (sstyled.insert(
     /*__inner_css_start__*/
     ".___SPill_1m0ra_gg_,.___SPills_1m0ra_gg_{display:inline-flex;align-items:center;justify-content:center;border-radius:var(--intergalactic-control-rounded, 6px)}.___SPills_1m0ra_gg_{isolation:isolate}.___SPill_1m0ra_gg_{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;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)}.___SPill_1m0ra_gg_::-moz-focus-inner{border:0;padding:0}.___SPill_1m0ra_gg_:active{outline:0;-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___SPill_1m0ra_gg_:hover{outline:0;-webkit-text-decoration:none;text-decoration:none;background:var(--intergalactic-bg-primary-neutral-hover, #f4f5f9)}}.___SPill_1m0ra_gg_.__selected_1m0ra_gg_{background:var(--intergalactic-control-secondary-info, rgba(0, 143, 248, 0.1));border-color:var(--intergalactic-border-info-active, #006dca)}.___SPill_1m0ra_gg_:active,.___SPill_1m0ra_gg_:focus-visible{z-index:1}@media (hover:hover){.___SPill_1m0ra_gg_:hover{z-index:1}}.___SPill_1m0ra_gg_.__disabled_1m0ra_gg_{cursor:default;pointer-events:none}.___SPill_1m0ra_gg_.__disabled_1m0ra_gg_>*{opacity:var(--intergalactic-disabled-opacity, 0.3)}.___SText_1m0ra_gg_{color:var(--intergalactic-text-primary, #191b23);display:inline-flex}.___SAddon_1m0ra_gg_{color:var(--intergalactic-text-secondary, #6c6e79);display:inline-flex;align-items:center;justify-content:center}.___SPill_1m0ra_gg_._size_m_1m0ra_gg_{height:var(--intergalactic-form-control-m, 28px);min-width:var(--intergalactic-form-control-m, 28px);font-size:var(--intergalactic-fs-200, 14px)}.___SPill_1m0ra_gg_._size_l_1m0ra_gg_ .___SText_1m0ra_gg_,.___SPill_1m0ra_gg_._size_m_1m0ra_gg_ .___SText_1m0ra_gg_{margin-left:var(--intergalactic-spacing-2x, 8px);margin-right:var(--intergalactic-spacing-2x, 8px)}.___SPill_1m0ra_gg_._size_m_1m0ra_gg_ .___SAddon_1m0ra_gg_:not(:only-child):first-child{margin-left:var(--intergalactic-spacing-2x, 8px)}.___SPill_1m0ra_gg_._size_m_1m0ra_gg_ .___SAddon_1m0ra_gg_:not(:only-child):last-child{margin-right:var(--intergalactic-spacing-2x, 8px)}.___SPill_1m0ra_gg_._size_m_1m0ra_gg_ .___SAddon_1m0ra_gg_:only-child{margin-left:var(--intergalactic-spacing-2x, 8px);margin-right:var(--intergalactic-spacing-2x, 8px)}.___SPill_1m0ra_gg_._size_l_1m0ra_gg_{height:var(--intergalactic-form-control-l, 40px);min-width:var(--intergalactic-form-control-l, 40px);font-size:var(--intergalactic-fs-300, 16px)}.___SPill_1m0ra_gg_._size_l_1m0ra_gg_ .___SAddon_1m0ra_gg_:only-child,.___SPill_1m0ra_gg_._size_l_1m0ra_gg_ .___SText_1m0ra_gg_:only-child{margin-left:var(--intergalactic-spacing-3x, 12px);margin-right:var(--intergalactic-spacing-3x, 12px)}.___SPill_1m0ra_gg_._size_l_1m0ra_gg_ .___SAddon_1m0ra_gg_:not(:only-child):first-child{margin-left:var(--intergalactic-spacing-3x, 12px)}.___SPill_1m0ra_gg_._size_l_1m0ra_gg_ .___SAddon_1m0ra_gg_:not(:only-child):last-child{margin-right:var(--intergalactic-spacing-3x, 12px)}.___SPill_1m0ra_gg_._neighborLocation_right_1m0ra_gg_{border-top-right-radius:0;border-bottom-right-radius:0}.___SPill_1m0ra_gg_._neighborLocation_both_1m0ra_gg_{border-radius:0;margin-left:-1px}.___SPill_1m0ra_gg_._neighborLocation_left_1m0ra_gg_{border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-1px}",
     "1m0ra_gg_"
   ), {
-    __SPills: "___SPills_1m0ra_gg_",
-    __SPill: "___SPill_1m0ra_gg_",
-    _selected: "__selected_1m0ra_gg_",
-    __SText: "___SText_1m0ra_gg_",
-    __SAddon: "___SAddon_1m0ra_gg_",
-    _neighborLocation_right: "_neighborLocation_right_1m0ra_gg_",
-    _neighborLocation_both: "_neighborLocation_both_1m0ra_gg_",
-    _neighborLocation_left: "_neighborLocation_left_1m0ra_gg_",
-    _disabled: "__disabled_1m0ra_gg_",
-    _size_m: "_size_m_1m0ra_gg_",
-    _size_l: "_size_l_1m0ra_gg_"
+    "__SPills": "___SPills_1m0ra_gg_",
+    "__SPill": "___SPill_1m0ra_gg_",
+    "_selected": "__selected_1m0ra_gg_",
+    "__SText": "___SText_1m0ra_gg_",
+    "__SAddon": "___SAddon_1m0ra_gg_",
+    "_neighborLocation_right": "_neighborLocation_right_1m0ra_gg_",
+    "_neighborLocation_both": "_neighborLocation_both_1m0ra_gg_",
+    "_neighborLocation_left": "_neighborLocation_left_1m0ra_gg_",
+    "_disabled": "__disabled_1m0ra_gg_",
+    "_size_m": "_size_m_1m0ra_gg_",
+    "_size_l": "_size_l_1m0ra_gg_"
   })
-), j = {
-  onNeighborChange: function(r, _) {
-    r && (r.focus(), (_.behavior === "auto" || _.behavior === "radio") && r.click());
+);
+var optionsA11yEnhance = {
+  onNeighborChange: function onNeighborChange(neighborElement, props) {
+    if (neighborElement) {
+      neighborElement.focus();
+      if (props.behavior === "auto" || props.behavior === "radio") {
+        neighborElement.click();
+      }
+    }
   },
-  childSelector: function(r) {
-    return r.behavior === "auto" || r.behavior === "radio" ? ["role", "radio"] : ["role", "tab"];
+  childSelector: function childSelector(props) {
+    return props.behavior === "auto" || props.behavior === "radio" ? ["role", "radio"] : ["role", "tab"];
   }
-}, v = /* @__PURE__ */ function(a) {
-  L(_, a);
-  var r = A(_);
-  function _() {
-    var i;
-    z(this, _);
-    for (var l = arguments.length, o = new Array(l), n = 0; n < l; n++)
-      o[n] = arguments[n];
-    return i = r.call.apply(r, [this].concat(o)), d(p(i), "itemValues", []), d(p(i), "bindHandlerClick", function(e) {
-      return function(t) {
-        i.handlers.value(e, t);
+};
+var RootPills = /* @__PURE__ */ function(_Component) {
+  _inherits(RootPills2, _Component);
+  var _super = _createSuper(RootPills2);
+  function RootPills2() {
+    var _this;
+    _classCallCheck(this, RootPills2);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _super.call.apply(_super, [this].concat(args));
+    _defineProperty(_assertThisInitialized(_this), "itemValues", []);
+    _defineProperty(_assertThisInitialized(_this), "bindHandlerClick", function(value) {
+      return function(e) {
+        _this.handlers.value(value, e);
       };
-    }), d(p(i), "bindHandleKeyDown", function(e) {
-      return function(t) {
-        (t.key === "Enter" || t.key === " ") && (t.preventDefault(), i.handlers.value(e, t));
+    });
+    _defineProperty(_assertThisInitialized(_this), "bindHandleKeyDown", function(value) {
+      return function(event) {
+        if (event.key === "Enter" || event.key === " ") {
+          event.preventDefault();
+          _this.handlers.value(value, event);
+        }
       };
-    }), d(p(i), "changeIndex", function(e, t) {
-      for (var c = !1; !c && e >= 0 && e < i.itemValues.length; ) {
-        t === "increment" && e++, t === "decrement" && e--;
-        var g = i.itemRefs[e];
-        (g == null ? void 0 : g.disabled) === !1 && (c = !0);
+    });
+    _defineProperty(_assertThisInitialized(_this), "changeIndex", function(startIndex, type) {
+      var selectable = false;
+      while (!selectable && startIndex >= 0 && startIndex < _this.itemValues.length) {
+        if (type === "increment") startIndex++;
+        if (type === "decrement") startIndex--;
+        var element = _this.itemRefs[startIndex];
+        if ((element === null || element === void 0 ? void 0 : element.disabled) === false) {
+          selectable = true;
+        }
       }
-      return e >= 0 && e < i.itemValues.length ? e : void 0;
-    }), i;
+      return startIndex >= 0 && startIndex < _this.itemValues.length ? startIndex : void 0;
+    });
+    return _this;
   }
-  return w(_, [{
+  _createClass(RootPills2, [{
     key: "componentDidMount",
-    value: function() {
-      y.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"), y.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");
+    value: function componentDidMount() {
+      log.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");
+      log.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() {
+    value: function uncontrolledProps() {
       return {
         value: null
       };
     }
   }, {
     key: "getItemProps",
-    value: function(l, o) {
-      var n = this.asProps, e = n.value, t = n.size, c = n.disabled, g = n.behavior, m = e === l.value;
-      return this.itemValues[o] = l.value, {
-        index: o,
-        size: t,
-        disabled: c,
-        selected: m,
-        behavior: g,
-        tabIndex: m ? 0 : -1,
-        onClick: this.bindHandlerClick(l.value),
-        onKeyDown: this.bindHandleKeyDown(l.value)
+    value: function getItemProps(props, index) {
+      var _this$asProps = this.asProps, value = _this$asProps.value, size = _this$asProps.size, disabled = _this$asProps.disabled, behavior = _this$asProps.behavior;
+      var isSelected = value === props.value;
+      this.itemValues[index] = props.value;
+      return {
+        index,
+        size,
+        disabled,
+        selected: isSelected,
+        behavior,
+        tabIndex: isSelected ? 0 : -1,
+        onClick: this.bindHandlerClick(props.value),
+        onKeyDown: this.bindHandleKeyDown(props.value)
       };
     }
   }, {
     key: "render",
-    value: function() {
-      var l = this.asProps, o, n = S, e = this.asProps, t = e.Children, c = e.styles, g = e.controlsLength, m = e.disabled, b = e.behavior, h = e.value;
-      return o = f(c), /* @__PURE__ */ s.createElement(n, o.cn("SPills", u({}, P({
-        role: b === "radio" || b === "auto" ? "radiogroup" : "tablist",
-        "aria-disabled": m,
-        "use:tabIndex": h !== null ? -1 : 0
-      }, l))), /* @__PURE__ */ s.createElement(T, o.cn("NeighborLocation", {
-        controlsLength: g
-      }), /* @__PURE__ */ s.createElement(t, o.cn("Children", {}))));
+    value: function render() {
+      var _ref = this.asProps, _ref5;
+      var SPills = Box;
+      var _this$asProps2 = this.asProps, Children = _this$asProps2.Children, styles = _this$asProps2.styles, controlsLength = _this$asProps2.controlsLength, disabled = _this$asProps2.disabled, behavior = _this$asProps2.behavior, value = _this$asProps2.value;
+      return _ref5 = sstyled(styles), /* @__PURE__ */ React.createElement(SPills, _ref5.cn("SPills", _objectSpread({}, assignProps({
+        "role": behavior === "radio" || behavior === "auto" ? "radiogroup" : "tablist",
+        "aria-disabled": disabled,
+        "use:tabIndex": value !== null ? -1 : 0
+      }, _ref))), /* @__PURE__ */ React.createElement(NeighborLocation, _ref5.cn("NeighborLocation", {
+        "controlsLength": controlsLength
+      }), /* @__PURE__ */ React.createElement(Children, _ref5.cn("Children", {}))));
     }
-  }]), _;
-}(C);
-d(v, "displayName", "Pills");
-d(v, "style", R);
-d(v, "defaultProps", function(a) {
-  var r = a.behavior;
+  }]);
+  return RootPills2;
+}(Component);
+_defineProperty(RootPills, "displayName", "Pills");
+_defineProperty(RootPills, "style", style);
+_defineProperty(RootPills, "defaultProps", function(_ref9) {
+  var behavior = _ref9.behavior;
   return {
     size: "m",
     defaultValue: null,
-    behavior: r ?? "auto"
+    behavior: behavior !== null && behavior !== void 0 ? behavior : "auto"
   };
 });
-d(v, "enhance", [N(j)]);
-function I(a) {
-  var r = arguments[0], _, i = S, l = a.Children, o = a.styles, n = a.addonLeft, e = a.addonRight, t = a.selected, c = a.disabled, g = a.index, m = a.behavior, b = E(g), h = {};
-  return m === "radio" || m === "auto" ? (h.role = "radio", h["aria-checked"] = t) : (h.role = "tab", h["aria-selected"] = t), _ = f(o), /* @__PURE__ */ s.createElement(i, _.cn("SPill", u({}, P(u({
-    tag: "button",
-    type: "button",
-    tabIndex: 0,
-    neighborLocation: b,
-    "aria-disabled": c
-  }, h), r))), n ? /* @__PURE__ */ s.createElement(x.Item.Addon, {
-    tag: n
-  }) : null, D(l, x.Item.Text, x.Item.Addon), e ? /* @__PURE__ */ s.createElement(x.Item.Addon, {
-    tag: e
+_defineProperty(RootPills, "enhance", [a11yEnhance(optionsA11yEnhance)]);
+function Pill(props) {
+  var _ref2 = arguments[0], _ref6;
+  var SPill = Box;
+  var Children = props.Children, styles = props.styles, addonLeft = props.addonLeft, addonRight = props.addonRight, selected = props.selected, disabled = props.disabled, index = props.index, behavior = props.behavior;
+  var neighborLocation = useNeighborLocationDetect(index);
+  var roleAreaProps = {};
+  if (behavior === "radio" || behavior === "auto") {
+    roleAreaProps.role = "radio";
+    roleAreaProps["aria-checked"] = selected;
+  } else {
+    roleAreaProps.role = "tab";
+    roleAreaProps["aria-selected"] = selected;
+  }
+  return _ref6 = sstyled(styles), /* @__PURE__ */ React.createElement(SPill, _ref6.cn("SPill", _objectSpread({}, assignProps(_objectSpread({
+    "tag": "button",
+    "type": "button",
+    "tabIndex": 0,
+    "neighborLocation": neighborLocation,
+    "aria-disabled": disabled
+  }, roleAreaProps), _ref2))), addonLeft ? /* @__PURE__ */ React.createElement(Pills.Item.Addon, {
+    tag: addonLeft
+  }) : null, addonTextChildren(Children, Pills.Item.Text, Pills.Item.Addon), addonRight ? /* @__PURE__ */ React.createElement(Pills.Item.Addon, {
+    tag: addonRight
   }) : null);
 }
-function V(a) {
-  var r = arguments[0], _, i = S;
-  return _ = f(a.styles), /* @__PURE__ */ s.createElement(i, _.cn("SText", u({}, P({
-    tag: "span"
-  }, r))));
+function Text(props) {
+  var _ref3 = arguments[0], _ref7;
+  var SText = Box;
+  return _ref7 = sstyled(props.styles), /* @__PURE__ */ React.createElement(SText, _ref7.cn("SText", _objectSpread({}, assignProps({
+    "tag": "span"
+  }, _ref3))));
 }
-function H(a) {
-  var r = arguments[0], _, i = S;
-  return _ = f(a.styles), /* @__PURE__ */ s.createElement(i, _.cn("SAddon", u({}, P({
-    tag: "span"
-  }, r))));
+function Addon(props) {
+  var _ref4 = arguments[0], _ref8;
+  var SAddon = Box;
+  return _ref8 = sstyled(props.styles), /* @__PURE__ */ React.createElement(SAddon, _ref8.cn("SAddon", _objectSpread({}, assignProps({
+    "tag": "span"
+  }, _ref4))));
 }
-var x = k(v, {
-  Item: [I, {
-    Text: V,
-    Addon: H
+var Pills = createComponent(RootPills, {
+  Item: [Pill, {
+    Text,
+    Addon
   }]
-}), Z = function(r) {
-  return r;
+});
+var wrapPills = function wrapPills2(wrapper) {
+  return wrapper;
 };
 export {
-  x as default,
-  Z as wrapPills
+  Pills as default,
+  wrapPills
 };

package/lib/esm/index.mjs

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@semcore/pills",
   "description": "Semrush Pills Component",
-  "version": "16.0.0-prerelease.6",
+  "version": "16.0.0-prerelease.7",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",
@@ -14,11 +14,11 @@
     "types": "./lib/types/index.d.ts"
   },
   "dependencies": {
-    "@semcore/flex-box": "16.0.0-prerelease.6",
-    "@semcore/neighbor-location": "16.0.0-prerelease.6"
+    "@semcore/flex-box": "16.0.0-prerelease.7",
+    "@semcore/neighbor-location": "16.0.0-prerelease.7"
   },
   "peerDependencies": {
-    "@semcore/base-components": "^16.0.0-prerelease.6"
+    "@semcore/base-components": "^16.0.0-prerelease.7"
   },
   "repository": {
     "type": "git",