@semcore/bulk-textarea 1.1.0-prerelease.4 → 1.1.0

package/lib/esm/BulkTextarea.mjs

@@ -0,0 +1,212 @@
+import O from "@babel/runtime/helpers/esm/classCallCheck";
+import V from "@babel/runtime/helpers/esm/createClass";
+import d from "@babel/runtime/helpers/esm/assertThisInitialized";
+import q from "@babel/runtime/helpers/esm/inherits";
+import H from "@babel/runtime/helpers/esm/createSuper";
+import i from "@babel/runtime/helpers/esm/defineProperty";
+import M, { assignProps as j, Component as G } from "@semcore/core";
+import m from "react";
+import { Box as J } from "@semcore/flex-box";
+import { InputField as K } from "./components/InputField/InputField.mjs";
+import { Counter as Q } from "./components/Counter.mjs";
+import { ClearAll as U } from "./components/ClearAll.mjs";
+import { ErrorsNavigation as W } from "./components/ErrorsNavigation.mjs";
+import { localizedMessages as X } from "./translations/__intergalactic-dynamic-locales.mjs";
+import Y from "@semcore/utils/lib/enhances/i18nEnhance";
+import Z from "@semcore/utils/lib/enhances/focusSourceEnhance";
+import rr from "@semcore/utils/lib/uniqueID";
+var E = /* @__PURE__ */ function(_) {
+  q(x, _);
+  var R = H(x);
+  function x() {
+    var r;
+    O(this, x);
+    for (var e = arguments.length, t = new Array(e), l = 0; l < e; l++)
+      t[l] = arguments[l];
+    return r = R.call.apply(R, [this].concat(t)), i(d(r), "inputFieldRef", /* @__PURE__ */ m.createRef()), i(d(r), "clearAllButtonRef", /* @__PURE__ */ m.createRef()), i(d(r), "nextButtonRef", /* @__PURE__ */ m.createRef()), i(d(r), "prevButtonRef", /* @__PURE__ */ m.createRef()), i(d(r), "counterRef", /* @__PURE__ */ m.createRef()), i(d(r), "state", {
+      linesCount: 0,
+      isEmptyText: !0,
+      errorIndex: -1,
+      highlightErrorIndex: !1
+    }), i(d(r), "handleChangeLinesCount", function(n) {
+      var s = !n;
+      r.setState({
+        linesCount: n,
+        isEmptyText: s
+      }), s && (r.handlers.showErrors(!1), r.handlers.errors([]), r.handlers.state("normal"));
+    }), i(d(r), "handleClickClearAll", function(n) {
+      var s;
+      r.handlers.showErrors(!1), r.handlers.errors([]), r.setState({
+        errorIndex: -1
+      }), r.handlers.value("", n), r.handlers.state("normal");
+      var a = (s = r.inputFieldRef.current) === null || s === void 0 ? void 0 : s.querySelector('[role="textbox"]');
+      a instanceof HTMLDivElement && a.focus();
+    }), i(d(r), "handleChangeErrorIndex", function(n) {
+      return function() {
+        var s = r.asProps.errors, a = s === void 0 ? [] : s, h = r.state.errorIndex, u = a.length - 1, o = h + n;
+        o < 0 ? o = n + u + 1 : o > u && (o = o - u - 1), a[o] ? (r.handlers.showErrors(!1), r.setState({
+          errorIndex: -1
+        }), setTimeout(function() {
+          r.handlers.showErrors(!0), r.setState({
+            errorIndex: o,
+            highlightErrorIndex: !0
+          });
+        })) : r.handleChangeErrorIndex(n < 0 ? n - 1 : n + 1)();
+      };
+    }), r;
+  }
+  return V(x, [{
+    key: "uncontrolledProps",
+    value: function() {
+      return {
+        value: null,
+        state: null,
+        showErrors: null,
+        errors: null
+      };
+    }
+  }, {
+    key: "counterId",
+    get: function() {
+      return "".concat(this.asProps.uid, "_counter");
+    }
+  }, {
+    key: "getInputFieldProps",
+    value: function() {
+      var e = this, t = this.asProps, l = t.value, n = t.size, s = t.minRows, a = t.maxRows, h = t.lineValidation, u = t.placeholder, o = t.validateOn, C = t.onChange, B = t.linesDelimiters, b = t.maxLines, $ = t.disabled, k = t.readonly, L = t.pasteProps, S = t.lineProcessing, w = t.errors, c = w === void 0 ? [] : w, y = t.showErrors, g = this.state, T = g.errorIndex, z = g.prevError, A = g.linesCount, F = g.highlightErrorIndex;
+      return i({
+        value: l,
+        size: n,
+        state: y && (c == null ? void 0 : c.length) > 0 ? "invalid" : "normal",
+        disabled: $,
+        readonly: k,
+        minRows: s,
+        maxRows: a,
+        maxLines: b,
+        placeholder: u,
+        prevError: z,
+        pasteProps: L,
+        linesCount: A,
+        lineProcessing: S,
+        onChangeLinesCount: this.handleChangeLinesCount,
+        onChangeLineIndex: function() {
+          o != null && o.includes("blurLine") && e.handlers.showErrors(!0);
+        },
+        onBlur: function(f, p) {
+          o != null && o.includes("blur") && (e.asProps.focusSourceRef.current === "keyboard" || p instanceof FocusEvent && p.relatedTarget !== e.clearAllButtonRef.current) && e.handlers.showErrors(!0), e.asProps.showErrors === !1 && (o != null && o.includes("blur") || o != null && o.includes("blurLine")) && setTimeout(function() {
+            var v;
+            (v = e.nextButtonRef.current) === null || v === void 0 || v.focus();
+          }, 250), C == null || C(f, p);
+        },
+        showErrors: y,
+        validateOn: o,
+        lineValidation: h,
+        errors: c,
+        onErrorsChange: function(f) {
+          var p = f.length === 0 ? c[0] : void 0;
+          e.handlers.errors(f), e.setState({
+            prevError: p
+          }), setTimeout(function() {
+            var v = e.asProps, N = v.showErrors, P = v.errors;
+            if (N) {
+              var D = f.length === 0 ? "normal" : "invalid";
+              e.handlers.state(D);
+            }
+            (P == null ? void 0 : P.length) === 0 && (e.handlers.showErrors(!1), setTimeout(function() {
+              e.setState({
+                prevError: void 0
+              });
+            }, 150));
+          }, 10);
+        },
+        highlightErrorIndex: F,
+        errorIndex: T,
+        onErrorIndexChange: function(f) {
+          var p = c[T];
+          e.setState({
+            errorIndex: f,
+            prevError: p,
+            highlightErrorIndex: !1
+          });
+        },
+        linesDelimiters: B,
+        ref: this.inputFieldRef
+      }, "aria-describedby", this.counterId);
+    }
+  }, {
+    key: "getCounterProps",
+    value: function() {
+      var e = this.asProps, t = e.maxLines, l = e.getI18nText, n = e.size, s = this.state, a = s.linesCount, h = s.isEmptyText, u = "";
+      return a === t ? u = "warning" : a > t && (u = "danger"), {
+        id: this.counterId,
+        ref: this.counterRef,
+        getI18nText: l,
+        theme: u,
+        linesCount: h ? 0 : a,
+        maxLines: t,
+        size: n
+      };
+    }
+  }, {
+    key: "getClearAllProps",
+    value: function() {
+      var e = this.asProps, t = e.size, l = e.getI18nText, n = e.disabled, s = e.readonly;
+      return {
+        onClick: this.handleClickClearAll,
+        isHidden: this.state.isEmptyText,
+        size: t,
+        getI18nText: l,
+        ref: this.clearAllButtonRef,
+        disabled: n || s
+      };
+    }
+  }, {
+    key: "getErrorsNavigationProps",
+    value: function() {
+      var e = this.asProps, t = e.size, l = e.getI18nText, n = e.disabled, s = e.readonly, a = e.errors, h = a === void 0 ? [] : a, u = e.showErrors, o = this.state.errorIndex;
+      return {
+        size: t,
+        getI18nText: l,
+        errorIndex: o,
+        onPrevError: this.handleChangeErrorIndex(-1),
+        onNextError: this.handleChangeErrorIndex(1),
+        errorsCount: h.map(Boolean).length,
+        showErrors: u,
+        disabled: n || s || !1,
+        nextButtonRef: this.nextButtonRef,
+        prevButtonRef: this.prevButtonRef
+      };
+    }
+  }, {
+    key: "render",
+    value: function() {
+      var e = this.asProps;
+      return /* @__PURE__ */ m.createElement(J, j({
+        __excludeProps: ["onBlur", "value", "placeholder"]
+      }, e));
+    }
+  }]), x;
+}(G);
+i(E, "displayName", "BulkTextarea");
+i(E, "defaultProps", {
+  defaultValue: "",
+  size: "m",
+  defaultState: "normal",
+  minRows: 2,
+  maxRows: 10,
+  maxLines: 100,
+  validateOn: "blur",
+  locale: "en",
+  defaultErrors: [],
+  defaultShowErrors: !1
+});
+i(E, "enhance", [Y(X), Z(), rr()]);
+var gr = M(E, {
+  InputField: K,
+  Counter: Q,
+  ClearAll: U,
+  ErrorsNavigation: W
+});
+export {
+  gr as default
+};

package/lib/esm/components/ClearAll.mjs

@@ -0,0 +1,16 @@
+import n from "@babel/runtime/helpers/esm/objectSpread2";
+import { sstyled as m, assignProps as a } from "@semcore/core";
+import l from "react";
+import u from "@semcore/button";
+import i from "@semcore/icon/Close/m";
+function p(t) {
+  var r = arguments[0], e, o = u;
+  return !t.isHidden && (e = m(t.styles), /* @__PURE__ */ l.createElement(o, e.cn("SButton", n({}, a({
+    theme: "muted",
+    use: "tertiary",
+    addonLeft: i
+  }, r))), t.getI18nText("BulkTextarea.ClearAllButton.buttonText")));
+}
+export {
+  p as ClearAll
+};

package/lib/esm/components/Counter.mjs

@@ -0,0 +1,18 @@
+import { assignProps as i } from "@semcore/core";
+import e from "react";
+import { ScreenReaderOnly as a } from "@semcore/flex-box";
+import u from "@semcore/counter";
+function d(t) {
+  var l = arguments[0], r = t.theme, o = t.linesCount, m = t.maxLines, n = t.getI18nText;
+  return /* @__PURE__ */ e.createElement(u, i({
+    ml: 1,
+    theme: r
+  }, l), o, /* @__PURE__ */ e.createElement("span", {
+    "aria-hidden": "true"
+  }, "/", m), /* @__PURE__ */ e.createElement(a, null, n("BulkTextarea.Counter.ofAllowedRows:sr-message", {
+    rowsNumber: m
+  })), r === "warning" && /* @__PURE__ */ e.createElement(a, null, n("BulkTextarea.Counter.limitReached:sr-message")), r === "danger" && /* @__PURE__ */ e.createElement(a, null, n("BulkTextarea.Counter.limitExceeded:sr-message")));
+}
+export {
+  d as Counter
+};

package/lib/esm/components/ErrorsNavigation.mjs

@@ -0,0 +1,43 @@
+import e from "react";
+import i from "@semcore/button";
+import { Flex as f } from "@semcore/flex-box";
+import { Text as d } from "@semcore/typography";
+import s from "@semcore/icon/ChevronUp/m";
+import v from "@semcore/icon/ChevronDown/m";
+function k(r) {
+  var n = r.errorIndex, o = r.errorsCount, l = r.onPrevError, m = r.onNextError, E = r.size, u = r.showErrors, t = r.getI18nText, a = r.disabled, x = r.nextButtonRef, c = r.prevButtonRef;
+  return /* @__PURE__ */ e.createElement(f, {
+    alignItems: "center"
+  }, o > 0 && u && /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(i, {
+    onClick: m,
+    addonLeft: v,
+    use: "tertiary",
+    theme: "muted",
+    "aria-label": t("BulkTextarea.ErrorsNavigation.nextError:aria-label"),
+    hintPlacement: "bottom",
+    disabled: a,
+    ref: x
+  }), /* @__PURE__ */ e.createElement(i, {
+    onClick: l,
+    addonLeft: s,
+    use: "tertiary",
+    theme: "muted",
+    "aria-label": t("BulkTextarea.ErrorsNavigation.previousError:aria-label"),
+    hintPlacement: "bottom",
+    disabled: a,
+    ref: c
+  }), /* @__PURE__ */ e.createElement(d, {
+    size: E === "l" ? 300 : 200,
+    color: "text-critical",
+    ml: 1,
+    disabled: a
+  }, n === -1 ? t("BulkTextarea.ErrorsNavigation.totalErrors", {
+    errorsCount: o
+  }) : t("BulkTextarea.ErrorsNavigation.selectedError", {
+    errorIndex: n + 1,
+    errorsCount: o
+  }))));
+}
+export {
+  k as ErrorsNavigation
+};