@golemui/gui-react 0.0.2 → 0.12.0

package/Select-BLUX_W91.js

@@ -0,0 +1,55 @@
+import { jsx as a } from "react/jsx-runtime";
+import { useInputWidget as I } from "@golemui/react";
+import { useCallback as s } from "react";
+/* empty css                */
+function B(r) {
+  const d = r.widget, {
+    uid: c,
+    errors: u,
+    value: p,
+    isTouched: m,
+    templateData: e,
+    onValueChanged: o,
+    onBlur: h,
+    injectValidationIssues: n
+  } = I(d), v = s(
+    (t) => o(t.nativeEvent.detail.value),
+    [o]
+  ), g = s(
+    (t) => {
+      const i = t, l = (D) => {
+        n([D.detail.message]);
+      };
+      return t && i.addEventListener("inputError", l), () => {
+        i.removeEventListener("inputError", l);
+      };
+    },
+    [n]
+  ), f = e.options, b = e.label, E = e.hint, y = e.placeholder, C = e.autocomplete, F = e.icon, q = e.valueField, x = e.labelField, R = e.disabled, j = e.readonly, w = e.validator?.required;
+  return /* @__PURE__ */ a("div", { className: "gui-select gui-field", style: { flex: e.size }, children: /* @__PURE__ */ a(
+    "gui-select",
+    {
+      ref: g,
+      uid: c,
+      label: b,
+      errors: u,
+      touched: m,
+      required: w,
+      disabled: R,
+      readOnly: j,
+      value: p,
+      hint: E,
+      placeholder: y,
+      autocomplete: C ?? void 0,
+      icon: F,
+      options: f,
+      labelField: x,
+      valueField: q,
+      onChange: v,
+      onBlur: h
+    }
+  ) });
+}
+export {
+  B as Select
+};

package/Tabs-C2qqi8xO.js

@@ -0,0 +1,129 @@
+import { jsx as o, jsxs as v } from "react/jsx-runtime";
+import { useLayoutWidget as N, WidgetRenderer as E, cn as A } from "@golemui/react";
+import { createIntersectionObserver as x } from "@golemui/gui-components";
+import { useRef as u, useState as h, useEffect as b, useCallback as f } from "react";
+function z(y) {
+  const _ = u(null), r = y.widget, { uid: k, children: g, templateData: e, onChange: m } = N(r), c = u([]), $ = u(null), w = u(null), [O, S] = h(!1), [R, T] = h(!1), [s, p] = h(e.defaultOpen);
+  b(() => {
+    const a = $.current, t = w.current, i = x(
+      a,
+      (n) => S(n)
+    ), d = x(
+      t,
+      (n) => T(n)
+    );
+    return () => {
+      i.disconnect(), d.disconnect();
+    };
+  }, []), b(() => {
+    s === void 0 && e.tabs?.length > 0 && p(e.tabs[0].uid);
+  }, [e.tabs, s]), b(() => {
+    e.defaultOpen && p(e.defaultOpen);
+  }, [e.defaultOpen]), b(() => {
+    const t = (e.tabs || []).findIndex((i) => i.uid === s);
+    t > -1 && c.current[t].scrollIntoView({ block: "nearest", inline: "nearest" });
+  }, [s, e.tabs]);
+  const l = f(
+    (a) => {
+      p(a), m(a);
+    },
+    [m]
+  ), I = f(
+    (a) => {
+      const t = e.tabs.findIndex((n) => n.uid === s), i = c.current, d = _.current ? window.getComputedStyle(_.current).direction === "rtl" : !1;
+      switch (a.key) {
+        case "ArrowLeft": {
+          const n = t + (d ? 1 : -1);
+          n >= 0 && n < e.tabs.length && (l(e.tabs[n].uid), i[n]?.focus());
+          break;
+        }
+        case "ArrowRight": {
+          const n = t + (d ? -1 : 1);
+          n >= 0 && n < e.tabs.length && (l(e.tabs[n].uid), i[n]?.focus());
+          break;
+        }
+        case "Home":
+          l(e.tabs[0].uid), i[0]?.focus();
+          break;
+        case "End":
+          l(e.tabs[e.tabs.length - 1].uid), i[e.tabs.length - 1]?.focus();
+          break;
+        default:
+          return;
+      }
+    },
+    [s, e.tabs, l]
+  ), V = f(() => (e.tabs || []).map((t, i) => /* @__PURE__ */ o("li", { role: "presentation", children: /* @__PURE__ */ o(
+    "button",
+    {
+      ref: (d) => {
+        c.current[i] = d;
+      },
+      type: "button",
+      role: "tab",
+      tabIndex: t.uid === s ? 0 : -1,
+      "data-cy": `tab_${r.uid}_${i}`,
+      id: `tab_${r.uid}_${i}`,
+      "aria-controls": `tabpanel_${r.uid}_${i}`,
+      "aria-selected": t.uid === s ? "true" : "false",
+      className: `${t.uid === s ? "active" : ""}`,
+      onClick: () => l(t.uid),
+      onKeyDown: (d) => I(d),
+      onFocus: (d) => {
+        d.target.scrollIntoView({ block: "nearest", inline: "nearest" });
+      },
+      children: t.label
+    }
+  ) }, `tab_${r.uid}_${t.uid}`)), [e, s, r, c, l, I]), C = f(() => {
+    const a = g.findIndex((t) => t.uid === s);
+    return g.filter((t) => t.uid === s || e.renderMode !== "activeOnly").map((t) => /* @__PURE__ */ o(
+      "section",
+      {
+        role: "tabpanel",
+        "data-cy": `tabpanel_${r.uid}_${a}`,
+        id: `tabpanel_${r.uid}_${a}`,
+        hidden: t.uid !== s && e.renderMode !== "activeOnly",
+        "aria-labelledby": `tab_${r.uid}_${a}`,
+        children: /* @__PURE__ */ o(E, { widget: t }, t.uid)
+      },
+      `tabpanel_${r.uid}_${t.uid}`
+    ));
+  }, [g, s, r]);
+  return /* @__PURE__ */ v("div", { className: "gui-tabs gui-field", style: { flex: e.size }, children: [
+    /* @__PURE__ */ o(
+      "nav",
+      {
+        className: A({
+          "gui-widget": !0,
+          "gui-widget--horizontal": !0,
+          "gui-tabs--start-shadow": !O,
+          "gui-tabs--end-shadow": !R
+        }),
+        id: k,
+        children: /* @__PURE__ */ v("ul", { role: "tablist", children: [
+          /* @__PURE__ */ o(
+            "li",
+            {
+              role: "presentation",
+              ref: $,
+              className: "gui-sentinel gui-sentinel__start"
+            }
+          ),
+          V(),
+          /* @__PURE__ */ o(
+            "li",
+            {
+              role: "presentation",
+              ref: w,
+              className: "gui-sentinel gui-sentinel__end"
+            }
+          )
+        ] })
+      }
+    ),
+    C()
+  ] });
+}
+export {
+  z as Tabs
+};

package/TextArea-cw3Q2v97.js

@@ -0,0 +1,35 @@
+import { jsx as o } from "react/jsx-runtime";
+import { useInputWidget as C } from "@golemui/react";
+import { useCallback as D } from "react";
+/* empty css                */
+function M(a) {
+  const i = a.widget, { uid: n, errors: l, value: r, isTouched: d, templateData: e, onValueChanged: t, onBlur: s } = C(i), u = D(
+    (q) => t(q.nativeEvent.detail.value),
+    [t]
+  ), c = e.label, m = e.hint, h = e.placeholder, p = e.validator?.maxLength, g = e.counterMode, v = e.autocomplete, x = e.autoGrow, b = e.minimumHeight, f = e.disabled, w = e.readonly, y = e.validator?.required;
+  return /* @__PURE__ */ o("div", { className: "gui-textarea gui-field", style: { flex: e.size }, children: /* @__PURE__ */ o(
+    "gui-textarea",
+    {
+      uid: n,
+      label: c,
+      errors: l,
+      touched: d,
+      required: y,
+      disabled: f,
+      readOnly: w,
+      value: r,
+      hint: m,
+      placeholder: h,
+      autocomplete: v ?? void 0,
+      counterMode: g,
+      minimumHeight: b,
+      autoGrow: x,
+      maxLength: p,
+      onInput: u,
+      onBlur: s
+    }
+  ) });
+}
+export {
+  M as TextArea
+};

package/TextInput-geLoAA0c.js

@@ -0,0 +1,32 @@
+import { jsx as o } from "react/jsx-runtime";
+import { useInputWidget as y } from "@golemui/react";
+import { useCallback as q } from "react";
+/* empty css                */
+function R(i) {
+  const n = i.widget, { uid: l, errors: a, value: d, isTouched: r, templateData: e, onValueChanged: t, onBlur: s } = y(n), c = q(
+    (x) => t(x.nativeEvent.detail.value),
+    [t]
+  ), u = e.label, p = e.hint, m = e.placeholder, h = e.autocomplete, g = e.icon, v = e.disabled, b = e.readonly, f = e.validator?.required;
+  return /* @__PURE__ */ o("div", { className: "gui-textinput gui-field", style: { flex: e.size }, children: /* @__PURE__ */ o(
+    "gui-textinput",
+    {
+      uid: l,
+      label: u,
+      hint: p,
+      errors: a,
+      touched: r,
+      required: f,
+      disabled: v,
+      readOnly: b,
+      value: d,
+      icon: g,
+      placeholder: m ?? void 0,
+      autocomplete: h ?? void 0,
+      onInput: c,
+      onBlur: s
+    }
+  ) });
+}
+export {
+  R as TextInput
+};

package/{Toggle-CCzdFjkq.js → Toggle-a7L71GwR.js}

@@ -1,16 +1,16 @@
 import { jsx as o } from "react/jsx-runtime";
-import { useInputWidget as f } from "@golemui/react";
+import { useInputWidget as v } from "@golemui/react";
 import { useCallback as y } from "react";
 /* empty css                */
 function D(i) {
-  const n = i.widget, { uid: l, errors: a, value: s, onValueChanged: t, onBlur: d, templateData: e, isTouched: r } = f(n), g = y(
-    (v) => t(v.nativeEvent.detail.value),
+  const l = i.widget, { uid: n, errors: a, value: s, onValueChanged: t, onBlur: d, templateData: e, isTouched: r } = v(l), g = y(
+    (f) => t(f.nativeEvent.detail.value),
     [t]
   ), u = e.label, c = e.hint, h = e.togglePosition, m = e.disabled, p = e.readonly, b = e.validator?.required;
-  return /* @__PURE__ */ o("div", { className: "gui-toggle", style: { flex: e.size }, children: /* @__PURE__ */ o(
+  return /* @__PURE__ */ o("div", { className: "gui-toggle gui-field", style: { flex: e.size }, children: /* @__PURE__ */ o(
     "gui-toggle",
     {
-      uid: l,
+      uid: n,
       label: u,
       errors: a,
       touched: r,