@cfx-dev/ui-components 2.1.10 → 2.1.12

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/Table/Table.js

@@ -1,26 +1,26 @@
-import { jsx as t, jsxs as C } from "react/jsx-runtime";
-import l, { useState as k } from "react";
-import g from "../Checkbox/Checkbox.js";
-import B from "../IconButton/IconButton.js";
-import { Text as v } from "../Text/Text.js";
-import { clsx as y } from "../../utils/clsx.js";
-import '../../assets/Table.css';const $ = "_root_13qg4_1", T = "_radio_13qg4_14", j = "_pointer_13qg4_21", z = "_selectedRow_13qg4_24", A = "_headerContent_13qg4_34", E = "_sortable_13qg4_40", O = "_empty_13qg4_40", S = "_sortButton_13qg4_43", r = {
-  root: $,
-  radio: T,
-  pointer: j,
-  selectedRow: z,
-  headerContent: A,
-  sortable: E,
-  empty: O,
-  sortButton: S
+import { jsx as t, jsxs as y } from "react/jsx-runtime";
+import l, { useState as C } from "react";
+import B from "../Checkbox/Checkbox.js";
+import $ from "../IconButton/IconButton.js";
+import { Text as T } from "../Text/Text.js";
+import { clsx as x } from "../../utils/clsx.js";
+import '../../assets/Table.css';const j = "_root_1v0yo_1", z = "_radio_1v0yo_14", A = "_pointer_1v0yo_21", E = "_selectedRow_1v0yo_24", O = "_headerContent_1v0yo_34", S = "_sortable_1v0yo_40", F = "_empty_1v0yo_40", H = "_sortButton_1v0yo_43", r = {
+  root: j,
+  radio: z,
+  pointer: A,
+  selectedRow: E,
+  headerContent: O,
+  sortable: S,
+  empty: F,
+  sortButton: H
 };
-function F(h) {
+function V(h) {
   const {
     item: e,
     onSortClick: o
   } = h, s = l.useCallback(() => {
     o && o(e.sortKey || e.text);
-  }, [e.sortKey, e.text, o]), b = y(r.headerContent, {
+  }, [e.sortKey, e.text, o]), b = x(r.headerContent, {
     [r.sortable]: e.sortable,
     [r.empty]: !e.text
   });
@@ -29,10 +29,10 @@ function F(h) {
     {
       className: e.sortable ? r.pointer : void 0,
       onClick: e.sortable ? s : void 0,
-      children: /* @__PURE__ */ C("div", { className: b, children: [
-        /* @__PURE__ */ t(v, { color: "secondary", weight: "bold", uppercase: !0, size: "xxsmall", children: e.text }),
+      children: /* @__PURE__ */ y("div", { className: b, children: [
+        /* @__PURE__ */ t(T, { color: "secondary", weight: "bold", uppercase: !0, size: "xxsmall", children: e.text }),
         !!e.sortable && /* @__PURE__ */ t(
-          B,
+          $,
           {
             className: r.sortButton,
             color: "secondary",
@@ -44,7 +44,7 @@ function F(h) {
     }
   );
 }
-function H(h) {
+function q(h) {
   const {
     index: e,
     includeRadio: o = !1,
@@ -58,18 +58,18 @@ function H(h) {
     );
   }, [a, e]), _ = l.useCallback(() => {
     a(e);
-  }, [a, e]), p = y({
+  }, [a, e]), p = x({
     [r.selectedRow]: s === e,
     [r.pointer]: o
   });
-  return /* @__PURE__ */ C(
+  return /* @__PURE__ */ y(
     "tr",
     {
       className: p,
       onClick: o ? _ : void 0,
       children: [
         o && /* @__PURE__ */ t("td", { className: r.radio, children: /* @__PURE__ */ t(
-          g,
+          B,
           {
             size: "small",
             onCheckedChange: f,
@@ -86,7 +86,7 @@ function H(h) {
     `row-${e}`
   );
 }
-function L({
+function M({
   headers: h = [],
   data: e = [],
   includeRadio: o = !1,
@@ -97,10 +97,10 @@ function L({
   sortOrder: f = "asc",
   onSortChange: _
 }) {
-  const [p, n] = k(m), [u, d] = k(a), [w, x] = k(f), q = l.useCallback((c) => {
-    const R = u === c && w === "asc" ? "desc" : "asc";
-    d(c), x(R), _ == null || _(c, R);
-  }, [_, u, w]), N = l.useCallback(
+  const [p, n] = C(m), [u, d] = C(a), [k, v] = C(f), R = l.useCallback((c) => {
+    const w = u === c && k === "asc" ? "desc" : "asc";
+    d(c), v(w), _ == null || _(c, w);
+  }, [_, u, k]), N = l.useCallback(
     (c) => {
       const i = c === p ? null : c;
       n(i), s == null || s(i);
@@ -112,21 +112,21 @@ function L({
   }, [m]), l.useEffect(() => {
     d(a);
   }, [a]), l.useEffect(() => {
-    x(f);
-  }, [f]), /* @__PURE__ */ t("div", { className: r.root, children: /* @__PURE__ */ C("table", { children: [
-    /* @__PURE__ */ t("thead", { children: /* @__PURE__ */ C("tr", { children: [
+    v(f);
+  }, [f]), /* @__PURE__ */ t("div", { className: r.root, children: /* @__PURE__ */ y("table", { children: [
+    /* @__PURE__ */ t("thead", { children: /* @__PURE__ */ y("tr", { children: [
       o && /* @__PURE__ */ t("th", { "aria-label": "Select Row" }),
       h.map((c, i) => /* @__PURE__ */ t(
-        F,
+        V,
         {
           item: c,
-          onSortClick: q
+          onSortClick: R
         },
         `header-${i}`
       ))
     ] }) }),
     /* @__PURE__ */ t("tbody", { children: e.map((c, i) => /* @__PURE__ */ t(
-      H,
+      q,
       {
         index: i,
         item: c,
@@ -140,6 +140,6 @@ function L({
   ] }) });
 }
 export {
-  L as Table,
-  F as TableHeaderItem
+  M as Table,
+  V as TableHeaderItem
 };

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.10",
+  "version": "2.1.12",
   "type": "module",
   "license": "MIT",
   "main": "dist/main.js",