@cfx-dev/ui-components 4.5.4 → 4.5.5

package/dist/components/Tabular/Tabular.d.ts

@@ -12,11 +12,23 @@ export interface TabularItem {
     ariaControls?: string;
     hasNotification?: boolean;
 }
+export interface TabularItemComponentProps {
+    disabled?: boolean;
+    type: HTMLButtonElement['type'];
+    role: HTMLButtonElement['role'];
+    className?: string;
+    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    'aria-label'?: string;
+    'aria-controls'?: string;
+    'data-text'?: React.ReactNode;
+    'aria-selected'?: boolean;
+}
 export interface TabularProps {
     items: TabularItem[];
     activeItem?: string;
     onActivate?: (id: string) => void;
     itemClassName?: string;
+    ItemComponent?: React.ElementType<TabularItemComponentProps>;
     className?: string;
     ariaLabel?: string;
     tabIndex?: number;
@@ -32,17 +44,6 @@ export declare namespace Tabular {
 export interface TabularRootProps extends React.PropsWithChildren, Pick<TabularProps, 'className' | 'ariaLabel' | 'tabIndex' | 'theme' | 'role' | 'size'> {
     style?: React.CSSProperties;
 }
-export interface TabularItemComponentProps {
-    disabled?: boolean;
-    type: HTMLButtonElement['type'];
-    role: HTMLButtonElement['role'];
-    className?: string;
-    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
-    'aria-label'?: string;
-    'aria-controls'?: string;
-    'data-text'?: React.ReactNode;
-    'aria-selected'?: boolean;
-}
 export interface TabularItemProps extends TabularItem {
     active: boolean;
     onClick: (id: string) => void;

package/dist/components/Tabular/Tabular.js

@@ -1,9 +1,9 @@
-import { jsx as m, jsxs as N } from "react/jsx-runtime";
-import d, { createElement as p } from "react";
+import { jsx as b, jsxs as N } from "react/jsx-runtime";
+import x, { createElement as p } from "react";
 import { Dot as C } from "../Dot/Dot.js";
-import { clsx as n } from "../../utils/clsx.js";
+import { clsx as d } from "../../utils/clsx.js";
 import { ui as v } from "../../utils/ui/ui.js";
-const k = "cfxui__Tabular__reset__b1dbc", R = "cfxui__Tabular__item__98cc3", I = "cfxui__Tabular__root__0ff05", y = "cfxui__Tabular__active__1ae95", j = "cfxui__Tabular__hasNotification__c372f", A = "cfxui__Tabular__content__3a95a", e = {
+const k = "cfxui__Tabular__reset__b1dbc", R = "cfxui__Tabular__item__98cc3", I = "cfxui__Tabular__root__0ff05", y = "cfxui__Tabular__active__1ae95", j = "cfxui__Tabular__hasNotification__c372f", A = "cfxui__Tabular__content__3a95a", a = {
   reset: k,
   "tabular-size-initial-large": "cfxui__Tabular__tabular-size-initial-large__9451f",
   item: R,
@@ -27,98 +27,101 @@ const k = "cfxui__Tabular__reset__b1dbc", R = "cfxui__Tabular__item__98cc3", I =
   hasNotification: j,
   content: A
 };
-function o(b) {
+function n(f) {
   const {
     items: s,
-    activeItem: t,
-    onActivate: l,
-    itemClassName: i,
+    activeItem: i,
+    onActivate: e,
+    itemClassName: _,
     size: u = "medium",
-    ..._
-  } = b, c = d.useCallback((a) => {
-    l && l(a);
-  }, [l]), r = n(
-    e.root,
-    _.className
+    className: c,
+    ItemComponent: m,
+    ...r
+  } = f, l = x.useCallback((t) => {
+    e && e(t);
+  }, [e]), o = d(
+    a.root,
+    c
   );
-  return /* @__PURE__ */ m(o.Root, { ..._, className: r, children: s.map((a) => /* @__PURE__ */ p(
-    o.Item,
+  return /* @__PURE__ */ b(n.Root, { ...r, className: o, children: s.map((t) => /* @__PURE__ */ p(
+    n.Item,
     {
-      ...a,
-      className: i,
-      key: a.id,
-      active: a.id === t,
-      onClick: c,
+      ...t,
+      Component: m,
+      className: _,
+      key: t.id,
+      active: t.id === i,
+      onClick: l,
       size: u
     }
   )) });
 }
-o.Root = function(s) {
+n.Root = function(s) {
   const {
-    children: t,
-    className: l,
-    ariaLabel: i,
+    children: i,
+    className: e,
+    ariaLabel: _,
     tabIndex: u,
-    theme: _ = "dark",
-    role: c = "tablist",
+    theme: c = "dark",
+    role: m = "tablist",
     style: r
-  } = s, a = n(e.root, e[`theme-${_}`], l);
-  return /* @__PURE__ */ m(
+  } = s, l = d(a.root, a[`theme-${c}`], e);
+  return /* @__PURE__ */ b(
     "div",
     {
-      role: c,
-      "aria-label": i,
+      role: m,
+      "aria-label": _,
       tabIndex: u,
-      className: a,
+      className: l,
       style: r,
-      children: t
+      children: i
     }
   );
 };
-o.Item = function(s) {
+n.Item = function(s) {
   const {
-    id: t,
-    label: l,
-    onClick: i,
+    id: i,
+    label: e,
+    onClick: _,
     ariaLabel: u,
-    ariaControls: _,
-    className: c,
+    ariaControls: c,
+    className: m,
     active: r = !1,
-    disabled: a = !1,
-    hasNotification: f = !1,
-    size: x,
+    disabled: l = !1,
+    hasNotification: o = !1,
+    size: t,
     Component: z
-  } = s, g = d.useCallback(() => {
-    a || i(t);
-  }, [a, i, t]), T = n(
-    e.reset,
-    e.item,
-    c,
-    v.getResponsiveFlatClassnames("tabular-size", x).map((h) => e[h]),
+  } = s, g = x.useCallback(() => {
+    l || _(i);
+  }, [l, _, i]), T = d(
+    a.reset,
+    a.item,
+    m,
+    v.getResponsiveFlatClassnames("tabular-size", t).map((h) => a[h]),
     {
-      [e.active]: r,
-      [e.hasNotification]: f
+      [a.active]: r,
+      [a.hasNotification]: o
     }
   );
-  return /* @__PURE__ */ m(
+  return /* @__PURE__ */ b(
     z || "button",
     {
-      disabled: a,
+      disabled: l,
       type: "button",
       role: "tab",
       className: T,
       onClick: g,
       "aria-label": u,
-      "aria-controls": _,
-      "data-text": l,
+      "aria-controls": c,
+      "data-text": e,
       "aria-selected": r,
-      children: /* @__PURE__ */ N("span", { className: e.content, children: [
-        l,
-        f && /* @__PURE__ */ m(C, { color: "green", className: e.notification })
+      children: /* @__PURE__ */ N("span", { className: a.content, children: [
+        e,
+        o && /* @__PURE__ */ b(C, { color: "green", className: a.notification })
       ] })
     }
   );
 };
 export {
-  o as Tabular
+  n as Tabular
 };

package/package.json

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