@cfx-dev/ui-components 2.1.9 → 2.1.11

package/dist/components/Button/Button.js

@@ -1,72 +1,72 @@
-import { jsx as r, jsxs as W, Fragment as g } from "react/jsx-runtime";
+import { jsx as r, jsxs as g, Fragment as B } from "react/jsx-runtime";
 import m from "react";
-import { Icon as B } from "../Icon/Icon.js";
-import { clsx as q } from "../../utils/clsx.js";
+import { Icon as q } from "../Icon/Icon.js";
+import { clsx as I } from "../../utils/clsx.js";
 import { noop as h } from "../../utils/functional.js";
-import '../../assets/Button.css';const I = "_root_1hwl6_1", M = "_fullWidth_1hwl6_35", j = "_primary_1hwl6_55", F = "_secondary_1hwl6_76", R = "_linked_1hwl6_118", v = "_quicklink_1hwl6_143", D = "_icon_1hwl6_150", L = "_icononly_1hwl6_175", U = "_decorator_1hwl6_180", o = {
-  root: I,
-  fullWidth: M,
-  primary: j,
+import '../../assets/Button.css';const M = "_root_1n01a_1", j = "_fullWidth_1n01a_33", w = "_primary_1n01a_53", F = "_secondary_1n01a_74", R = "_linked_1n01a_116", v = "_quicklink_1n01a_141", D = "_icon_1n01a_148", L = "_icononly_1n01a_173", U = "_decorator_1n01a_178", o = {
+  root: M,
+  fullWidth: j,
+  primary: w,
   secondary: F,
-  "on-light": "_on-light_1hwl6_97",
+  "on-light": "_on-light_1n01a_95",
   linked: R,
   quicklink: v,
   icon: D,
   icononly: L,
   decorator: U
 };
-function z(c) {
+function z(a) {
   const {
-    text: t = null,
-    icon: l,
-    decorator: n = null
-  } = c;
-  return /* @__PURE__ */ W(g, { children: [
-    t,
-    !!l && /* @__PURE__ */ r(B, { name: l, className: o.icon }),
-    !!n && /* @__PURE__ */ r("div", { className: o.decorator, children: n })
+    text: n = null,
+    icon: e,
+    decorator: t = null
+  } = a;
+  return /* @__PURE__ */ g(B, { children: [
+    n,
+    !!e && /* @__PURE__ */ r(q, { name: e, className: o.icon }),
+    !!t && /* @__PURE__ */ r("div", { className: o.decorator, children: t })
   ] });
 }
-function A(c) {
+function A(a) {
   const {
-    text: t = null,
-    icon: l,
-    theme: n = "default",
-    disabled: a = !1,
+    text: n = null,
+    icon: e,
+    theme: t = "default",
+    disabled: c = !1,
     className: u = "",
     autofocus: d = !1,
     fullWidth: i = !1,
     tabIndex: s
-  } = c;
-  return q(o.root, o[n], u, {
-    [o.disabled]: a,
-    [o.icononly]: !!l && (t === null || typeof t > "u"),
-    [o.text]: !!t,
+  } = a;
+  return I(o.root, o[t], u, {
+    [o.disabled]: c,
+    [o.icononly]: !!e && (n === null || typeof n > "u"),
+    [o.text]: !!n,
     [o.autofocus]: d || typeof s < "u",
     [o.fullWidth]: i
   });
 }
-const O = m.forwardRef(function(t, l) {
+const O = m.forwardRef(function(n, e) {
   const {
-    text: n = null,
-    icon: a,
+    text: t = null,
+    icon: c,
     title: u = "",
     type: d = "button",
     className: i = "",
     theme: s = "default",
-    disabled: e = !1,
+    disabled: l = !1,
     onClick: k = h,
     onMouseDown: p = h,
-    onMouseUp: w = h,
+    onMouseUp: b = h,
     autofocus: f = !1,
     tabIndex: _,
     fullWidth: y = !1,
-    ariaLabel: b = ""
-  } = t, x = m.useMemo(() => A({
-    text: n,
-    icon: a,
+    ariaLabel: x = ""
+  } = n, C = m.useMemo(() => A({
+    text: t,
+    icon: c,
     theme: s,
-    disabled: e,
+    disabled: l,
     className: i,
     autofocus: f,
     fullWidth: y,
@@ -75,29 +75,29 @@ const O = m.forwardRef(function(t, l) {
     f,
     i,
     y,
-    e,
-    a,
+    l,
+    c,
     _,
-    n,
+    t,
     s
-  ]), C = m.useCallback((N) => {
-    e || k(N);
-  }, [e, k]);
+  ]), N = m.useCallback((W) => {
+    l || k(W);
+  }, [l, k]);
   return /* @__PURE__ */ r(
     "button",
     {
-      ref: l,
-      disabled: e,
-      className: x,
-      onClick: C,
+      ref: e,
+      disabled: l,
+      className: C,
+      onClick: N,
       onMouseDown: p,
-      onMouseUp: w,
+      onMouseUp: b,
       autoFocus: f,
       tabIndex: _,
       title: u,
       type: d,
-      "aria-label": b,
-      children: /* @__PURE__ */ r(z, { ...t })
+      "aria-label": x,
+      children: /* @__PURE__ */ r(z, { ...n })
     }
   );
 });

package/dist/components/InfoPanel/InfoPanel.js

@@ -1,35 +1,35 @@
 import { jsxs as p, jsx as o } from "react/jsx-runtime";
-import b from "react";
-import { Icon as c } from "../Icon/Icon.js";
-import { clsx as h } from "../../utils/clsx.js";
-import '../../assets/InfoPanel.css';const k = "_rootUnset_1cbhk_1", u = "_root_1cbhk_1", v = "_interactive_1cbhk_19", y = "_interactiveIcon_1cbhk_22", f = "_icon_1cbhk_70", x = "_content_1cbhk_74", t = {
-  rootUnset: k,
-  root: u,
-  interactive: v,
-  interactiveIcon: y,
-  "type-neutral": "_type-neutral_1cbhk_34",
-  "type-error": "_type-error_1cbhk_41",
-  "type-success": "_type-success_1cbhk_48",
-  "type-warning": "_type-warning_1cbhk_55",
-  "size-small": "_size-small_1cbhk_62",
-  "size-large": "_size-large_1cbhk_66",
-  icon: f,
-  content: x
+import u from "react";
+import { Icon as r } from "../Icon/Icon.js";
+import { clsx as v } from "../../utils/clsx.js";
+import '../../assets/InfoPanel.css';const y = "_rootUnset_5rtl4_1", f = "_root_5rtl4_1", x = "_interactive_5rtl4_19", z = "_interactiveIcon_5rtl4_22", d = "_icon_5rtl4_70", I = "_content_5rtl4_74", t = {
+  rootUnset: y,
+  root: f,
+  interactive: x,
+  interactiveIcon: z,
+  "type-neutral": "_type-neutral_5rtl4_34",
+  "type-error": "_type-error_5rtl4_41",
+  "type-success": "_type-success_5rtl4_48",
+  "type-warning": "_type-warning_5rtl4_55",
+  "size-small": "_size-small_5rtl4_62",
+  "size-large": "_size-large_5rtl4_66",
+  icon: d,
+  content: I
 };
-function z(s) {
+function N(s) {
   const {
-    type: r = "neutral",
+    type: c = "neutral",
     size: a = "normal",
     className: i,
     onClick: e,
-    ariaLabel: _,
+    ariaLabel: l,
     icon: n,
-    children: l
-  } = s, m = h(
+    children: _
+  } = s, m = v(
     t.rootUnset,
     t.root,
     i,
-    t[`type-${r}`],
+    t[`type-${c}`],
     t[`size-${a}`],
     {
       [t.interactive]: !!e
@@ -41,16 +41,16 @@ function z(s) {
       type: e ? "button" : void 0,
       className: m,
       onClick: e,
-      "aria-label": _,
+      "aria-label": l,
       children: [
-        n && /* @__PURE__ */ o(c, { size: "xxsmall", name: n, className: t.icon }),
-        /* @__PURE__ */ o("div", { className: t.content, children: l }),
-        e && /* @__PURE__ */ o(c, { size: "xxsmall", name: "LeftArrow", className: t.interactiveIcon })
+        n && /* @__PURE__ */ o(r, { size: "xxsmall", name: n, className: t.icon }),
+        /* @__PURE__ */ o("div", { className: t.content, children: _ }),
+        e && /* @__PURE__ */ o(r, { size: "xxsmall", name: "LeftArrow", className: t.interactiveIcon })
       ]
     }
   );
 }
-const U = b.memo(z);
+const R = u.memo(N);
 export {
-  U as default
+  R as default
 };

package/dist/components/Tabular/Tabular.js

@@ -1,12 +1,12 @@
 import { jsx as r, jsxs as u } from "react/jsx-runtime";
-import h, { createElement as v } from "react";
-import { Dot as C } from "../Dot/Dot.js";
-import { clsx as k } from "../../utils/clsx.js";
-import '../../assets/Tabular.css';const p = "_reset_cctkn_1", x = "_root_cctkn_5", I = "_item_cctkn_16", R = "_active_cctkn_37", g = "_hasNotification_cctkn_64", T = "_content_cctkn_67", a = {
-  reset: p,
+import f, { createElement as k } from "react";
+import { Dot as v } from "../Dot/Dot.js";
+import { clsx as h } from "../../utils/clsx.js";
+import '../../assets/Tabular.css';const C = "_reset_17apb_1", x = "_root_17apb_5", I = "_item_17apb_16", R = "_active_17apb_37", g = "_hasNotification_17apb_64", T = "_content_17apb_67", e = {
+  reset: C,
   root: x,
-  "theme-dark": "_theme-dark_cctkn_10",
-  "theme-light": "_theme-light_cctkn_13",
+  "theme-dark": "_theme-dark_17apb_10",
+  "theme-light": "_theme-light_17apb_13",
   item: I,
   active: R,
   hasNotification: g,
@@ -14,77 +14,77 @@ import '../../assets/Tabular.css';const p = "_reset_cctkn_1", x = "_root_cctkn_5
 };
 function m(_) {
   const {
-    items: i,
+    items: s,
     activeItem: o,
-    onActivate: e,
-    itemClassName: c,
-    ...n
-  } = _, s = h.useCallback((t) => {
-    e && e(t);
-  }, [e]);
-  return /* @__PURE__ */ r(m.Root, { ...n, children: i.map((t) => /* @__PURE__ */ v(
+    onActivate: a,
+    itemClassName: i,
+    ...c
+  } = _, n = f.useCallback((t) => {
+    a && a(t);
+  }, [a]);
+  return /* @__PURE__ */ r(m.Root, { ...c, children: s.map((t) => /* @__PURE__ */ k(
     m.Item,
     {
       ...t,
-      className: c,
+      className: i,
       key: t.id,
       active: t.id === o,
-      onClick: s
+      onClick: n
     }
   )) });
 }
-m.Root = function(i) {
+m.Root = function(s) {
   const {
     children: o,
-    className: e,
-    ariaLabel: c,
-    tabIndex: n,
-    theme: s = "dark",
+    className: a,
+    ariaLabel: i,
+    tabIndex: c,
+    theme: n = "dark",
     role: t = "tablist"
-  } = i, l = k(a.root, a[`theme-${s}`], e);
+  } = s, l = h(e.root, e[`theme-${n}`], a);
   return /* @__PURE__ */ r(
     "div",
     {
       role: t,
-      "aria-label": c,
-      tabIndex: n,
+      "aria-label": i,
+      tabIndex: c,
       className: l,
       children: o
     }
   );
 };
-m.Item = function(i) {
+m.Item = function(s) {
   const {
     id: o,
-    label: e,
-    onClick: c,
-    ariaLabel: n,
-    ariaControls: s,
+    label: a,
+    onClick: i,
+    ariaLabel: c,
+    ariaControls: n,
     className: t,
     active: l = !1,
-    disabled: d = !1,
-    hasNotification: f = !1
-  } = i, b = h.useCallback(() => {
-    d || c(o);
-  }, [d, c, o]), N = k(a.reset, a.item, t, {
-    [a.active]: l,
-    [a.hasNotification]: f
+    disabled: b = !1,
+    hasNotification: d = !1
+  } = s, p = f.useCallback(() => {
+    b || i(o);
+  }, [b, i, o]), N = h(e.reset, e.item, t, {
+    [e.active]: l,
+    [e.hasNotification]: d
   });
   return /* @__PURE__ */ r(
     "button",
     {
-      disabled: d,
+      disabled: b,
       type: "button",
       role: "tab",
       className: N,
-      onClick: b,
-      "aria-label": n,
-      "aria-controls": s,
-      "data-text": e,
+      onClick: p,
+      "aria-label": c,
+      "aria-controls": n,
+      "data-text": a,
       "aria-selected": l,
-      children: /* @__PURE__ */ u("span", { className: a.content, children: [
-        e,
-        f && /* @__PURE__ */ r(C, { color: "green", className: a.notification })
+      children: /* @__PURE__ */ u("span", { className: e.content, children: [
+        a,
+        d && /* @__PURE__ */ r(v, { color: "green", className: e.notification })
       ] })
     }
   );

package/dist/components/ToggleGroup/ToggleGroup.js

@@ -1,62 +1,62 @@
 import { jsxs as d, jsx as p } from "react/jsx-runtime";
-import a from "react";
-import { Interactive as x } from "../Interactive/Interactive.js";
+import l from "react";
+import { Interactive as D } from "../Interactive/Interactive.js";
 import { clsx as _ } from "../../utils/clsx.js";
-import '../../assets/ToggleGroup.css';const D = "_root_1ha4w_1", j = "_disabled_1ha4w_7", k = "_descripted_1ha4w_11", E = "_multiline_1ha4w_14", L = "_options_1ha4w_18", O = "_option_1ha4w_18", S = "_description_1ha4w_25", G = "_active_1ha4w_70", e = {
-  root: D,
-  disabled: j,
-  descripted: k,
-  multiline: E,
-  options: L,
-  option: O,
-  description: S,
+import '../../assets/ToggleGroup.css';const j = "_root_1500i_1", k = "_disabled_1500i_6", E = "_descripted_1500i_10", L = "_multiline_1500i_13", O = "_options_1500i_17", S = "_option_1500i_17", w = "_description_1500i_24", G = "_active_1500i_69", e = {
+  root: j,
+  disabled: k,
+  descripted: E,
+  multiline: L,
+  options: O,
+  option: S,
+  description: w,
   active: G
-}, m = (l, i) => {
+}, m = (a, s) => {
   var o;
-  return ((o = i.find((t) => t.value === l)) == null ? void 0 : o.description) || "";
-}, y = a.memo(function(i) {
+  return ((o = s.find((i) => i.value === a)) == null ? void 0 : o.description) || "";
+}, y = l.memo(function(s) {
   const {
     value: o,
-    options: t,
+    options: i,
     onChange: r,
     className: u = "",
-    disabled: h = !1,
-    multiline: v = !1
-  } = i, [n, c] = a.useState(m(o, t)), f = a.useMemo(
-    () => t.map((s, N) => {
-      const b = () => {
-        r(s.value);
-      }, C = () => {
-        c(s.description || "");
+    disabled: v = !1,
+    multiline: f = !1
+  } = s, [n, c] = l.useState(m(o, i)), h = l.useMemo(
+    () => i.map((t, b) => {
+      const C = () => {
+        r(t.value);
       }, M = () => {
-        c(m(o, t));
-      }, g = _(e.option, {
-        [e.active]: s.value === o
+        c(t.description || "");
+      }, g = () => {
+        c(m(o, i));
+      }, x = _(e.option, {
+        [e.active]: t.value === o
       });
       return /* @__PURE__ */ d(
-        x,
+        D,
         {
-          className: g,
-          tabIndex: N,
-          onClick: b,
-          onMouseEnter: C,
-          onMouseLeave: M,
+          className: x,
+          tabIndex: b,
+          onClick: C,
+          onMouseEnter: M,
+          onMouseLeave: g,
           children: [
-            s.icon || null,
-            s.label
+            t.icon || null,
+            t.label
           ]
         },
-        s.value
+        t.value
       );
     }),
-    [o, t, r, c]
-  ), w = _(e.root, u, {
-    [e.disabled]: h,
+    [o, i, r, c]
+  ), N = _(e.root, u, {
+    [e.disabled]: v,
     [e.descripted]: n,
-    [e.multiline]: v
+    [e.multiline]: f
   });
-  return /* @__PURE__ */ d("div", { className: w, children: [
-    /* @__PURE__ */ p("div", { className: e.options, children: f }),
+  return /* @__PURE__ */ d("div", { className: N, children: [
+    /* @__PURE__ */ p("div", { className: e.options, children: h }),
     n && /* @__PURE__ */ p("div", { className: e.description, children: n })
   ] });
 });

package/dist/styles-scss/global.scss

@@ -118,9 +118,13 @@ li::marker {
 .util-z-index-9000 {
   z-index: ui.zindex('max');
 }
+.util-text-unselectable,
+.util-text-unselectable * {
+  user-select: none !important;
+}
 .util-text-selectable,
 .util-text-selectable * {
-  user-select: text !important;
+  user-select: text;
 }
 .util-flex-grow {
   flex-grow: 1;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cfx-dev/ui-components",
   "private": false,
-  "version": "2.1.9",
+  "version": "2.1.11",
   "type": "module",
   "license": "MIT",
   "main": "dist/main.js",