intergalactic 15.129.0 → 15.130.0

package/input-tags/lib/esm/InputTags.mjs

@@ -1,119 +1,158 @@
-import F from "@babel/runtime/helpers/esm/slicedToArray";
-import y from "@babel/runtime/helpers/esm/objectSpread2";
-import W from "@babel/runtime/helpers/esm/createForOfIteratorHelper";
-import R from "@babel/runtime/helpers/esm/classCallCheck";
-import E from "@babel/runtime/helpers/esm/createClass";
-import c from "@babel/runtime/helpers/esm/assertThisInitialized";
-import k from "@babel/runtime/helpers/esm/inherits";
-import D from "@babel/runtime/helpers/esm/createSuper";
-import _ from "@babel/runtime/helpers/esm/defineProperty";
-import { sstyled as O } from 'intergalactic/utils/lib/core/index';
-import $, { sstyled as S, assignProps as C, Component as V } from 'intergalactic/core';
-import l from "react";
-import z from 'intergalactic/input';
-import P from 'intergalactic/scroll-area';
-import B, { TagContainer as b } from 'intergalactic/tag';
-import A from 'intergalactic/utils/lib/fire';
-import { ScreenReaderOnly as K } from 'intergalactic/flex-box';
-import N from 'intergalactic/utils/lib/uniqueID';
-import j from 'intergalactic/portal';
-import { localizedMessages as L } from "./translations/__intergalactic-dynamic-locales.mjs";
-import H from 'intergalactic/utils/lib/enhances/i18nEnhance';
-import { isAdvanceMode as U, extractFrom as q } from 'intergalactic/utils/lib/findComponent';
-import { getAccessibleName as G } from 'intergalactic/utils/lib/getAccessibleName';
-var J = (
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _createForOfIteratorHelper from "@babel/runtime/helpers/esm/createForOfIteratorHelper";
+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 } from 'intergalactic/utils/lib/core/index';
+import createComponent, { sstyled as sstyled$1, assignProps, Component } from 'intergalactic/core';
+import React from "react";
+import Input from 'intergalactic/input';
+import ScrollArea from 'intergalactic/scroll-area';
+import Tag, { TagContainer } from 'intergalactic/tag';
+import fire from 'intergalactic/utils/lib/fire';
+import { ScreenReaderOnly } from 'intergalactic/flex-box';
+import uniqueIDEnhancement from 'intergalactic/utils/lib/uniqueID';
+import Portal from 'intergalactic/portal';
+import { localizedMessages } from "./translations/__intergalactic-dynamic-locales.mjs";
+import i18nEnhance from 'intergalactic/utils/lib/enhances/i18nEnhance';
+import { isAdvanceMode, extractFrom } from 'intergalactic/utils/lib/findComponent';
+import { getAccessibleName } from 'intergalactic/utils/lib/getAccessibleName';
+/*!__reshadow-styles__:"./style/input-tag.shadow.css"*/
+var style = (
   /*__reshadow_css_start__*/
-  (O.insert(
+  (sstyled.insert(
     /*__inner_css_start__*/
-    '.___SInputTags_1m190_gg_{box-sizing:border-box;cursor:text;align-items:flex-start;overflow:visible;overflow:initial}.___SInputTags_1m190_gg_ .___SContainer_1m190_gg_:focus .___SOutline_1m190_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))}.___SInputTags_1m190_gg_ .___SContainer_1m190_gg_:focus:has(.___SOutline_1m190_gg_)::after{box-shadow:none}.___SContainer_1m190_gg_{padding:1px 0;box-sizing:border-box;border-bottom:1px solid transparent;border-top:1px solid transparent}.___SInputTags_1m190_gg_>div>div{display:flex;align-items:center;flex-flow:row wrap}.___SInputTags_1m190_gg_>div[data-ui-name="ScrollArea.Bar"]._orientation_vertical_1m190_gg_{right:1px!important}.___SInputTags_1m190_gg_._size_m_1m190_gg_{min-height:var(--intergalactic-form-control-m, 28px);height:auto;padding:0 calc(var(--intergalactic-spacing-1x, 4px) + var(--intergalactic-spacing-05x, 2px))}.___SInputTags_1m190_gg_._size_l_1m190_gg_{min-height:var(--intergalactic-form-control-l, 40px);height:auto;padding:0 calc(var(--intergalactic-spacing-2x, 8px) + var(--intergalactic-spacing-05x, 2px))}.___STagContainer_1m190_gg_{margin:var(--intergalactic-spacing-05x, 2px)}.___STagContainer_1m190_gg_.__editable_1m190_gg_{cursor:pointer}.___SInputTags_1m190_gg_._size_m_1m190_gg_ .___SValue_1m190_gg_{height:calc(var(--intergalactic-form-control-m, 28px) - var(--intergalactic-spacing-1x, 4px))}.___SInputTags_1m190_gg_._size_l_1m190_gg_ .___SValue_1m190_gg_{height:calc(var(--intergalactic-form-control-l, 40px) - var(--intergalactic-spacing-1x, 4px))}.___SValue_1m190_gg_{padding:0!important;margin-left:var(--intergalactic-spacing-05x, 2px);margin-right:var(--intergalactic-spacing-05x, 2px)}.___SSpacer_1m190_gg_{position:absolute;top:0;left:0;visibility:hidden;height:0;overflow:scroll;white-space:pre;font-family:inherit;font-size:inherit;font-weight:inherit;font-style:inherit;letter-spacing:inherit;text-transform:inherit}.___SListAriaWrapper_1m190_gg_{display:contents}',
-    "1m190_gg_"
-  ), {
-    __SInputTags: "___SInputTags_1m190_gg_",
-    __SContainer: "___SContainer_1m190_gg_",
-    __SOutline: "___SOutline_1m190_gg_",
-    _orientation_vertical: "_orientation_vertical_1m190_gg_",
-    _size_m: "_size_m_1m190_gg_",
-    _size_l: "_size_l_1m190_gg_",
-    __STagContainer: "___STagContainer_1m190_gg_",
-    _editable: "__editable_1m190_gg_",
-    __SValue: "___SValue_1m190_gg_",
-    __SSpacer: "___SSpacer_1m190_gg_",
-    __SListAriaWrapper: "___SListAriaWrapper_1m190_gg_"
+    '.___SInputTags_rooxr_gg_{box-sizing:border-box;cursor:text;align-items:flex-start;overflow:visible;overflow:initial}.___SInputTags_rooxr_gg_ .___SContainer_rooxr_gg_:focus .___SOutline_rooxr_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))}.___SInputTags_rooxr_gg_ .___SContainer_rooxr_gg_:focus:has(.___SOutline_rooxr_gg_)::after{box-shadow:none}.___SContainer_rooxr_gg_{padding:1px 0;box-sizing:border-box;border-bottom:1px solid transparent;border-top:1px solid transparent}.___SInputTags_rooxr_gg_>div>div{display:flex;align-items:center;flex-flow:row wrap}.___SInputTags_rooxr_gg_>div[data-ui-name="ScrollArea.Bar"]._orientation_vertical_rooxr_gg_{right:1px!important}.___SInputTags_rooxr_gg_._size_m_rooxr_gg_{min-height:var(--intergalactic-form-control-m, 28px);height:auto;padding:0 calc(var(--intergalactic-spacing-1x, 4px) + var(--intergalactic-spacing-05x, 2px))}.___SInputTags_rooxr_gg_._size_l_rooxr_gg_{min-height:var(--intergalactic-form-control-l, 40px);height:auto;padding:0 calc(var(--intergalactic-spacing-2x, 8px) + var(--intergalactic-spacing-05x, 2px))}.___STagContainer_rooxr_gg_{margin:var(--intergalactic-spacing-05x, 2px)}.___STagContainer_rooxr_gg_.__editable_rooxr_gg_{cursor:pointer}.___SInputTags_rooxr_gg_._size_m_rooxr_gg_ .___SValue_rooxr_gg_{height:calc(var(--intergalactic-form-control-m, 28px) - var(--intergalactic-spacing-1x, 4px))}.___SInputTags_rooxr_gg_._size_l_rooxr_gg_ .___SValue_rooxr_gg_{height:calc(var(--intergalactic-form-control-l, 40px) - var(--intergalactic-spacing-1x, 4px))}.___SValue_rooxr_gg_{padding:0!important;margin-left:var(--intergalactic-spacing-05x, 2px);margin-right:var(--intergalactic-spacing-05x, 2px)}.___SSpacer_rooxr_gg_{position:absolute;top:0;left:0;visibility:hidden;height:0;overflow:scroll;white-space:pre;font-family:inherit;font-size:inherit;font-weight:inherit;font-style:inherit;letter-spacing:inherit;text-transform:inherit}.___SListAriaWrapper_rooxr_gg_{display:contents}',
+    /*__inner_css_end__*/
+    "rooxr_gg_"
+  ), /*__reshadow_css_end__*/
+  {
+    "__SInputTags": "___SInputTags_rooxr_gg_",
+    "__SContainer": "___SContainer_rooxr_gg_",
+    "__SOutline": "___SOutline_rooxr_gg_",
+    "_orientation_vertical": "_orientation_vertical_rooxr_gg_",
+    "_size_m": "_size_m_rooxr_gg_",
+    "_size_l": "_size_l_rooxr_gg_",
+    "__STagContainer": "___STagContainer_rooxr_gg_",
+    "_editable": "__editable_rooxr_gg_",
+    "__SValue": "___SValue_rooxr_gg_",
+    "__SSpacer": "___SSpacer_rooxr_gg_",
+    "__SListAriaWrapper": "___SListAriaWrapper_rooxr_gg_"
   })
-), I = /* @__PURE__ */ function(n) {
-  k(s, n);
-  var u = D(s);
-  function s() {
-    var e;
-    R(this, s);
-    for (var i = arguments.length, r = new Array(i), a = 0; a < i; a++)
-      r[a] = arguments[a];
-    return e = u.call.apply(u, [this].concat(r)), _(c(e), "inputRef", /* @__PURE__ */ l.createRef()), _(c(e), "scrollContainerRef", /* @__PURE__ */ l.createRef()), _(c(e), "tagsRefs", []), _(c(e), "state", {
+);
+var InputTags = /* @__PURE__ */ function(_Component) {
+  _inherits(InputTags2, _Component);
+  var _super = _createSuper(InputTags2);
+  function InputTags2() {
+    var _this;
+    _classCallCheck(this, InputTags2);
+    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), "inputRef", /* @__PURE__ */ React.createRef());
+    _defineProperty(_assertThisInitialized(_this), "scrollContainerRef", /* @__PURE__ */ React.createRef());
+    _defineProperty(_assertThisInitialized(_this), "tagsRefs", []);
+    _defineProperty(_assertThisInitialized(_this), "state", {
       tagsContainerAriaLabel: ""
-    }), _(c(e), "moveFocusToInput", function(t) {
-      var o = e.inputRef.current;
-      if (o && t.target !== o) {
-        var g = o.value.length;
-        t.preventDefault(), o.focus(), o.setSelectionRange(g, g);
+    });
+    _defineProperty(_assertThisInitialized(_this), "moveFocusToInput", function(event) {
+      var inputRef = _this.inputRef.current;
+      if (inputRef && event.target !== inputRef) {
+        var caretPosition = inputRef.value.length;
+        event.preventDefault();
+        inputRef.focus();
+        inputRef.setSelectionRange(caretPosition, caretPosition);
       }
-    }), _(c(e), "handleKeyDown", function(t) {
-      var o = t.key, g = t.currentTarget, p = e.asProps.delimiters, T = g.value, m = T.slice(-1), d = T.trim();
-      if ((p != null && p.includes(o) || m === " " && o === " ") && d) {
-        var h;
-        t.preventDefault(), A(c(e), "onAdd", d, t), A(c(e), "onAppend", [d], t), typeof ((h = e.inputRef.current) === null || h === void 0 ? void 0 : h.scrollIntoView) == "function" && setTimeout(function() {
-          var f;
-          typeof ((f = e.inputRef.current) === null || f === void 0 ? void 0 : f.scrollIntoView) == "function" && e.inputRef.current.scrollIntoView({
-            block: "nearest",
-            inline: "nearest",
-            behavior: "smooth"
-          });
-        }, 0);
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleKeyDown", function(event) {
+      var key = event.key, currentTarget = event.currentTarget;
+      var delimiters = _this.asProps.delimiters;
+      var value = currentTarget.value;
+      var lastSymbol = value.slice(-1);
+      var trimmedValue = value.trim();
+      if ((delimiters !== null && delimiters !== void 0 && delimiters.includes(key) || lastSymbol === " " && key === " ") && trimmedValue) {
+        var _this$inputRef$curren;
+        event.preventDefault();
+        fire(_assertThisInitialized(_this), "onAdd", trimmedValue, event);
+        fire(_assertThisInitialized(_this), "onAppend", [trimmedValue], event);
+        if (typeof ((_this$inputRef$curren = _this.inputRef.current) === null || _this$inputRef$curren === void 0 ? void 0 : _this$inputRef$curren.scrollIntoView) === "function") {
+          setTimeout(function() {
+            var _this$inputRef$curren2;
+            if (typeof ((_this$inputRef$curren2 = _this.inputRef.current) === null || _this$inputRef$curren2 === void 0 ? void 0 : _this$inputRef$curren2.scrollIntoView) === "function") {
+              _this.inputRef.current.scrollIntoView({
+                block: "nearest",
+                inline: "nearest",
+                behavior: "smooth"
+              });
+            }
+          }, 0);
+        }
       }
-      o === "Backspace" && !T && (t.preventDefault(), A(c(e), "onRemove", t));
-    }), _(c(e), "handlePaste", function(t) {
-      var o, g = t.clipboardData.getData("text/plain"), p = e.asProps, T = p.delimiters, m = p.onAdd, d = p.onAppend, h = new RegExp(T.filter(function(v) {
-        return !/\w+/.test(String(v));
-      }).map(function(v) {
-        return v.replace(/[\\^$*+?.()|[\]{}]/g, "\\$&");
-      }).join("|")), f = g.split(h).filter(Boolean);
-      if (f.length > 0) {
-        t.preventDefault();
-        var x = W(f), w;
+      if (key === "Backspace" && !value) {
+        event.preventDefault();
+        fire(_assertThisInitialized(_this), "onRemove", event);
+      }
+    });
+    _defineProperty(_assertThisInitialized(_this), "handlePaste", function(event) {
+      var _this$inputRef$curren3;
+      var value = event.clipboardData.getData("text/plain");
+      var _this$asProps = _this.asProps, delimiters = _this$asProps.delimiters, onAdd = _this$asProps.onAdd, onAppend = _this$asProps.onAppend;
+      var reg = new RegExp(delimiters.filter(function(s) {
+        return !/\w+/.test(String(s));
+      }).map(function(s) {
+        return s.replace(/[\\^$*+?.()|[\]{}]/g, "\\$&");
+      }).join("|"));
+      var tagsToBeAdded = value.split(reg).filter(Boolean);
+      if (tagsToBeAdded.length > 0) {
+        event.preventDefault();
+        var _iterator = _createForOfIteratorHelper(tagsToBeAdded), _step;
         try {
-          for (x.s(); !(w = x.n()).done; ) {
-            var M = w.value;
-            m == null || m(M, t);
+          for (_iterator.s(); !(_step = _iterator.n()).done; ) {
+            var tag = _step.value;
+            onAdd === null || onAdd === void 0 ? void 0 : onAdd(tag, event);
           }
-        } catch (v) {
-          x.e(v);
+        } catch (err) {
+          _iterator.e(err);
         } finally {
-          x.f();
+          _iterator.f();
         }
-        d == null || d(f, t);
+        onAppend === null || onAppend === void 0 ? void 0 : onAppend(tagsToBeAdded, event);
+      }
+      if (typeof ((_this$inputRef$curren3 = _this.inputRef.current) === null || _this$inputRef$curren3 === void 0 ? void 0 : _this$inputRef$curren3.scrollIntoView) === "function") {
+        setTimeout(function() {
+          var _this$inputRef$curren4;
+          if (typeof ((_this$inputRef$curren4 = _this.inputRef.current) === null || _this$inputRef$curren4 === void 0 ? void 0 : _this$inputRef$curren4.scrollIntoView) === "function") {
+            _this.inputRef.current.scrollIntoView({
+              block: "nearest",
+              inline: "nearest",
+              behavior: "smooth"
+            });
+          }
+        }, 0);
       }
-      typeof ((o = e.inputRef.current) === null || o === void 0 ? void 0 : o.scrollIntoView) == "function" && setTimeout(function() {
-        var v;
-        typeof ((v = e.inputRef.current) === null || v === void 0 ? void 0 : v.scrollIntoView) == "function" && e.inputRef.current.scrollIntoView({
-          block: "nearest",
-          inline: "nearest",
-          behavior: "smooth"
-        });
-      }, 0);
-    }), _(c(e), "onTagClick", function(t) {
-      A(c(e), "onRemove", t);
-    }), e;
+    });
+    _defineProperty(_assertThisInitialized(_this), "onTagClick", function(event) {
+      fire(_assertThisInitialized(_this), "onRemove", event);
+    });
+    return _this;
   }
-  return E(s, [{
+  _createClass(InputTags2, [{
     key: "componentDidMount",
-    value: function() {
-      var i = this.inputRef.current, r = G(i);
+    value: function componentDidMount() {
+      var inputElement = this.inputRef.current;
+      var inputAccessibleName = getAccessibleName(inputElement);
       this.setState({
-        tagsContainerAriaLabel: r
+        tagsContainerAriaLabel: inputAccessibleName
       });
     }
   }, {
     key: "getValueProps",
-    value: function() {
+    value: function getValueProps() {
       return {
         ref: this.inputRef,
         onKeyDown: this.handleKeyDown,
@@ -122,175 +161,209 @@ var J = (
     }
   }, {
     key: "getTagProps",
-    value: function(i, r) {
-      var a = this, t = i.editable;
+    value: function getTagProps(_ref13, index) {
+      var _this2 = this;
+      var editable = _ref13.editable;
       return {
         size: this.asProps.size,
-        onClick: t ? this.onTagClick : void 0,
-        interactive: t,
-        ref: function(g) {
-          a.tagsRefs[r] = g;
+        onClick: editable ? this.onTagClick : void 0,
+        interactive: editable,
+        ref: function ref(node) {
+          _this2.tagsRefs[index] = node;
         }
       };
     }
   }, {
     key: "getTagTextProps",
-    value: function(i, r) {
+    value: function getTagTextProps(_, index) {
       return {
-        uid: "".concat(this.asProps.uid, "-").concat(r),
+        uid: "".concat(this.asProps.uid, "-").concat(index),
         getI18nText: this.asProps.getI18nText
       };
     }
   }, {
     key: "getInputTagsContainerProps",
-    value: function() {
+    value: function getInputTagsContainerProps() {
       return {
         tagsContainerAriaLabel: this.state.tagsContainerAriaLabel
       };
     }
   }, {
     key: "getTagContainerTextContentProps",
-    value: function() {
+    value: function getTagContainerTextContentProps() {
       return {
         tabIndex: null
       };
     }
   }, {
     key: "render",
-    value: function() {
-      var i = this.asProps, r, a = z, t = this.asProps, o = t.Children, g = t.styles, p = "ul", T = U(o, ["InputTags.TagsContainer"]);
-      if (T) {
-        var m;
-        return m = S(g), /* @__PURE__ */ l.createElement(a, m.cn("SInputTags", y({}, C({
-          tag: P,
-          onMouseDown: this.moveFocusToInput,
-          container: this.scrollContainerRef,
-          tabIndex: null
-        }, i))), /* @__PURE__ */ l.createElement(o, m.cn("Children", {})));
+    value: function render() {
+      var _ref = this.asProps, _ref7;
+      var SInputTags = Input;
+      var _this$asProps2 = this.asProps, Children = _this$asProps2.Children, styles = _this$asProps2.styles;
+      var SListAriaWrapper = "ul";
+      var isAdvancedMode = isAdvanceMode(Children, ["InputTags.TagsContainer"]);
+      if (isAdvancedMode) {
+        var _ref6;
+        return _ref6 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SInputTags, _ref6.cn("SInputTags", _objectSpread({}, assignProps({
+          "tag": ScrollArea,
+          "onMouseDown": this.moveFocusToInput,
+          "container": this.scrollContainerRef,
+          "tabIndex": null
+        }, _ref))), /* @__PURE__ */ React.createElement(Children, _ref6.cn("Children", {})));
       }
-      var d = q(o, ["InputTags.Value"]), h = F(d, 2), f = h[0], x = h[1];
-      return r = S(g), /* @__PURE__ */ l.createElement(a, r.cn("SInputTags", y({}, C({
-        tag: P,
-        onMouseDown: this.moveFocusToInput,
-        container: this.scrollContainerRef,
-        tabIndex: null
-      }, i))), /* @__PURE__ */ l.createElement(p, r.cn("SListAriaWrapper", {
+      var _extractFrom = extractFrom(Children, ["InputTags.Value"]), _extractFrom2 = _slicedToArray(_extractFrom, 2), InputComponents = _extractFrom2[0], RestComponents = _extractFrom2[1];
+      return _ref7 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SInputTags, _ref7.cn("SInputTags", _objectSpread({}, assignProps({
+        "tag": ScrollArea,
+        "onMouseDown": this.moveFocusToInput,
+        "container": this.scrollContainerRef,
+        "tabIndex": null
+      }, _ref))), /* @__PURE__ */ React.createElement(SListAriaWrapper, _ref7.cn("SListAriaWrapper", {
         "aria-label": this.state.tagsContainerAriaLabel
-      }), x), f);
+      }), RestComponents), InputComponents);
     }
-  }]), s;
-}(V);
-_(I, "displayName", "InputTags");
-_(I, "style", J);
-_(I, "enhance", [N(), H(L)]);
-_(I, "defaultProps", {
+  }]);
+  return InputTags2;
+}(Component);
+_defineProperty(InputTags, "displayName", "InputTags");
+_defineProperty(InputTags, "style", style);
+_defineProperty(InputTags, "enhance", [uniqueIDEnhancement(), i18nEnhance(localizedMessages)]);
+_defineProperty(InputTags, "defaultProps", {
   size: "m",
   delimiters: [",", ";", "|", "Enter", "Tab"],
   defaultValue: "",
-  i18n: L,
+  i18n: localizedMessages,
   locale: "en"
 });
-var Q = /* @__PURE__ */ function(n) {
-  k(s, n);
-  var u = D(s);
-  function s() {
-    var e;
-    R(this, s);
-    for (var i = arguments.length, r = new Array(i), a = 0; a < i; a++)
-      r[a] = arguments[a];
-    return e = u.call.apply(u, [this].concat(r)), _(c(e), "_spacer", /* @__PURE__ */ l.createRef()), _(c(e), "state", {
+var Value = /* @__PURE__ */ function(_Component2) {
+  _inherits(Value2, _Component2);
+  var _super2 = _createSuper(Value2);
+  function Value2() {
+    var _this3;
+    _classCallCheck(this, Value2);
+    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+      args[_key2] = arguments[_key2];
+    }
+    _this3 = _super2.call.apply(_super2, [this].concat(args));
+    _defineProperty(_assertThisInitialized(_this3), "_spacer", /* @__PURE__ */ React.createRef());
+    _defineProperty(_assertThisInitialized(_this3), "state", {
       width: "10px"
-    }), _(c(e), "handleChange", function(t) {
-      e.updateInputStyles(t);
-    }), _(c(e), "updateInputStyles", function(t) {
-      var o = e._spacer.current;
-      if (o) {
-        var g = e.props.placeholder, p = 2;
-        g && (t === void 0 || t === "") ? (o.innerText = g, p += 8) : o.innerText = t, e.setState({
-          width: "".concat(Math.max(o.offsetWidth, o.scrollWidth) + p, "px")
-        });
+    });
+    _defineProperty(_assertThisInitialized(_this3), "handleChange", function(value) {
+      _this3.updateInputStyles(value);
+    });
+    _defineProperty(_assertThisInitialized(_this3), "updateInputStyles", function(value) {
+      var spacerNode = _this3._spacer.current;
+      if (!spacerNode) return;
+      var placeholder = _this3.props.placeholder;
+      var magicOffset = 2;
+      if (placeholder && (value === void 0 || value === "")) {
+        spacerNode["innerText"] = placeholder;
+        magicOffset += 8;
+      } else {
+        spacerNode["innerText"] = value;
       }
-    }), e;
+      _this3.setState({
+        width: "".concat(Math.max(spacerNode["offsetWidth"], spacerNode["scrollWidth"]) + magicOffset, "px")
+      });
+    });
+    return _this3;
   }
-  return E(s, [{
+  _createClass(Value2, [{
     key: "componentDidMount",
-    value: function() {
+    value: function componentDidMount() {
       this.updateInputStyles(this.asProps.value);
     }
   }, {
     key: "componentDidUpdate",
-    value: function(i) {
-      var r = this.asProps, a = r.value, t = r.placeholder;
-      (a !== i.value || t !== i.placeholder) && this.updateInputStyles(a);
+    value: function componentDidUpdate(prevProps) {
+      var _this$asProps3 = this.asProps, value = _this$asProps3.value, placeholder = _this$asProps3.placeholder;
+      if (value !== prevProps.value || placeholder !== prevProps.placeholder) {
+        this.updateInputStyles(value);
+      }
     }
   }, {
     key: "render",
-    value: function() {
-      var i = this.asProps, r, a = z.Value, t = "div";
-      return r = S(this.asProps.styles), /* @__PURE__ */ l.createElement(l.Fragment, null, /* @__PURE__ */ l.createElement(a, r.cn("SValue", y({}, C({
-        style: {
+    value: function render() {
+      var _ref2 = this.asProps, _ref8;
+      var SValue = Input.Value;
+      var SSpacer = "div";
+      return _ref8 = sstyled$1(this.asProps.styles), /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(SValue, _ref8.cn("SValue", _objectSpread({}, assignProps({
+        "style": {
           width: this.state.width
         }
-      }, i)))), /* @__PURE__ */ l.createElement(t, r.cn("SSpacer", {
-        ref: this._spacer,
-        "aria-hidden": !0
+      }, _ref2)))), /* @__PURE__ */ React.createElement(SSpacer, _ref8.cn("SSpacer", {
+        "ref": this._spacer,
+        "aria-hidden": true
       })));
     }
-  }]), s;
-}(V);
-function X(n) {
-  var u, s = n.Children, e = n.tagsContainerAriaLabel, i = n.styles, r = "ul";
-  return u = S(i), /* @__PURE__ */ l.createElement(r, u.cn("SListAriaWrapper", {
-    "aria-label": e
-  }), /* @__PURE__ */ l.createElement(s, u.cn("Children", {})));
+  }]);
+  return Value2;
+}(Component);
+function InputTagsContainer(_ref14) {
+  var _ref9;
+  var Children = _ref14.Children, tagsContainerAriaLabel = _ref14.tagsContainerAriaLabel, styles = _ref14.styles;
+  var SListAriaWrapper = "ul";
+  return _ref9 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SListAriaWrapper, _ref9.cn("SListAriaWrapper", {
+    "aria-label": tagsContainerAriaLabel
+  }), /* @__PURE__ */ React.createElement(Children, _ref9.cn("Children", {})));
 }
-function Y(n) {
-  var u = arguments[0], s, e = b, i = l.useCallback(function(a) {
-    if (n.onClick && (a.key === "Enter" || a.key === " "))
-      return a.preventDefault(), n.onClick(a), !1;
-  }, [n.onClick]), r = n.editable || n.onClick;
-  return s = S(n.styles), /* @__PURE__ */ l.createElement(e, s.cn("STag", y({}, C({
-    "data-value": n.value,
-    tag: "li",
-    onKeyDown: i,
-    interactive: r
-  }, u))));
+function InputTagContainer(props) {
+  var _ref3 = arguments[0], _ref10;
+  var STag = TagContainer;
+  var onKeyDown = React.useCallback(function(event) {
+    if (props.onClick && (event.key === "Enter" || event.key === " ")) {
+      event.preventDefault();
+      props.onClick(event);
+      return false;
+    }
+  }, [props.onClick]);
+  var interactive = props.editable || props.onClick;
+  return _ref10 = sstyled$1(props.styles), /* @__PURE__ */ React.createElement(STag, _ref10.cn("STag", _objectSpread({}, assignProps({
+    "data-value": props.value,
+    "tag": "li",
+    "onKeyDown": onKeyDown,
+    "interactive": interactive
+  }, _ref3))));
 }
-function Z(n) {
-  var u = arguments[0], s, e = b.Tag, i = n.getI18nText;
-  n.editable;
-  var r = l.useRef();
-  return l.useEffect(function() {
-    var a;
-    if (r.current instanceof HTMLButtonElement || ((a = r.current) === null || a === void 0 ? void 0 : a.getAttribute("role")) === "button")
-      r.current.setAttribute("aria-describedby", "".concat(n.uid, "-description"));
-    else {
-      var t;
-      (t = r.current) === null || t === void 0 || t.removeAttribute("aria-describedby");
+function InputTagContainerTag(props) {
+  var _ref4 = arguments[0], _ref11;
+  var STag = TagContainer.Tag;
+  var getI18nText = props.getI18nText;
+  props.editable;
+  var ref = React.useRef();
+  React.useEffect(function() {
+    var _ref$current;
+    if (ref.current instanceof HTMLButtonElement || ((_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.getAttribute("role")) === "button") {
+      ref.current.setAttribute("aria-describedby", "".concat(props.uid, "-description"));
+    } else {
+      var _ref$current2;
+      (_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.removeAttribute("aria-describedby");
     }
-  }, [r.current, n.uid]), s = S(n.styles), /* @__PURE__ */ l.createElement(l.Fragment, null, /* @__PURE__ */ l.createElement(j, s.cn("Portal", {}), /* @__PURE__ */ l.createElement(K, s.cn("ScreenReaderOnly", {
-    id: "".concat(n.uid, "-description"),
+  }, [ref.current, props.uid]);
+  return _ref11 = sstyled$1(props.styles), /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Portal, _ref11.cn("Portal", {}), /* @__PURE__ */ React.createElement(ScreenReaderOnly, _ref11.cn("ScreenReaderOnly", {
+    "id": "".concat(props.uid, "-description"),
     "aria-hidden": "true"
-  }), i("pressEnterToEdit"))), /* @__PURE__ */ l.createElement(e, s.cn("STag", y({}, C({
-    ref: r
-  }, u)))));
+  }), getI18nText("pressEnterToEdit"))), /* @__PURE__ */ React.createElement(STag, _ref11.cn("STag", _objectSpread({}, assignProps({
+    "ref": ref
+  }, _ref4)))));
 }
-function ee(n) {
-  var u = arguments[0];
-  return S(n.styles), /* @__PURE__ */ l.createElement(B.Text, C({}, u));
+function TagContainerTextContent(props) {
+  var _ref5 = arguments[0];
+  return sstyled$1(props.styles), /* @__PURE__ */ React.createElement(Tag.Text, assignProps({}, _ref5));
 }
-const ye = $(I, {
-  Value: Q,
-  TagsContainer: X,
-  Tag: [Y, {
-    Text: [Z, {
-      Content: ee
+const InputTags$1 = createComponent(InputTags, {
+  Value,
+  TagsContainer: InputTagsContainer,
+  Tag: [InputTagContainer, {
+    Text: [InputTagContainerTag, {
+      Content: TagContainerTextContent
     }],
-    Close: b.Close,
-    Addon: b.Tag.Addon,
-    Circle: b.Circle
+    Close: TagContainer.Close,
+    Addon: TagContainer.Tag.Addon,
+    Circle: TagContainer.Circle
   }]
 });
 export {
-  ye as default
+  InputTags$1 as default
 };

package/input-tags/lib/esm/index.mjs

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