@iota/apps-ui-kit 0.11.0 → 0.12.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @iota/apps-ui-kit
 
+## 0.12.0
+
+### Minor Changes
+
+-   352991b: fix checkbox alignment
+
+### Patch Changes
+
+-   dd41759: Add icon for Badge
+-   437f907: Fix Tooltip not closing on scroll and overflowing the viewport.
+-   3ac0260: add prop to disable state layer in the accordion and add a receipt layout option for the keyvalue
+-   2dcb8d1: update some types in displaystats and keyvalueinfo components
+
 ## 0.11.0
 
 ### Minor Changes

package/dist/index.d.ts

@@ -34,7 +34,7 @@ declare interface AccordionContentProps {
     isExpanded: boolean;
 }
 
-export declare function AccordionHeader({ onToggle, children, isExpanded, hideArrow, }: PropsWithChildren<AccordionHeaderProps>): JSX_2.Element;
+export declare function AccordionHeader({ onToggle, children, isExpanded, hideArrow, disableStateLayer, }: PropsWithChildren<AccordionHeaderProps>): JSX_2.Element;
 
 export declare interface AccordionHeaderProps {
     /**
@@ -57,6 +57,12 @@ export declare interface AccordionHeaderProps {
      * Flag for hiding border.
      */
     hideBorder?: boolean;
+    /**
+     * Disable the header state layer while an interactive child is active.
+     * This keeps the parent hover treatment from competing with child links
+     * and controls.
+     */
+    disableStateLayer?: boolean;
 }
 
 export declare function Account({ title, subtitle, badgeType, badgeText, avatarContent, onOptionsClick, onCopy, copyText, onOpen, isCopyable, isExternal, isSelected, isActive, showSelected, badgeTooltipText, badgeTooltipPosition, }: AccountProps): React.JSX.Element;
@@ -186,7 +192,7 @@ export declare interface AssetMediaRendererProps extends VideoProps {
     showFallback?: boolean;
 }
 
-export declare function Badge({ type, label, size }: BadgeProps): React.JSX.Element;
+export declare function Badge({ type, label, size, icon, }: BadgeProps): React.JSX.Element;
 
 declare interface BadgeProps {
     /**
@@ -201,6 +207,10 @@ declare interface BadgeProps {
      * The size of the badge
      */
     size?: BadgeSize;
+    /**
+     * An icon rendered before the label.
+     */
+    icon?: ReactNode;
 }
 
 export declare enum BadgeSize {
@@ -230,7 +240,7 @@ export declare interface BaseInputProps extends InputWrapperProps {
     /**
      * Amount counter that is shown at the side of the caption text.
      */
-    amountCounter?: string | number;
+    amountCounter?: React.ReactNode;
     /**
      * Trailing element that is shown after the input
      */
@@ -246,7 +256,7 @@ export declare interface BaseInputProps extends InputWrapperProps {
     /**
      * Text that is shown below the value of the input.
      */
-    supportingValue?: string | null;
+    supportingValue?: React.ReactNode;
     /**
      * Default value of the input
      */
@@ -285,7 +295,7 @@ export declare interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTM
     /**
      * The text of the button.
      */
-    text?: string;
+    text?: React.ReactNode;
     /**
      The icon of the button
      */
@@ -382,7 +392,7 @@ export declare function Card({ isDisabled, type, isHoverable, onClick, children,
 export declare function CardAction({ type, onClick, subtitle, title, icon, iconAfterText, buttonType, buttonDisabled, }: CardActionProps): JSX_2.Element | null;
 
 export declare type CardActionProps = {
-    title?: string;
+    title?: React.ReactNode;
     subtitle?: string | React.ReactNode;
     type: CardActionType;
     onClick?: () => void;
@@ -643,7 +653,7 @@ declare interface DisplayStatsProps {
     /**
      * The tooltip text.
      */
-    tooltipText?: string;
+    tooltipText?: ReactNode;
     /**
      * The value of the stats.
      */
@@ -832,7 +842,7 @@ declare interface InputWrapperProps {
     /**
      * Shows a caption with the text below the input.
      */
-    caption?: string;
+    caption?: ReactNode;
     /**
      * Error Message. Overrides the caption.
      */
@@ -840,7 +850,7 @@ declare interface InputWrapperProps {
     /**
      * Amount counter that is shown at the side of the caption text.
      */
-    amountCounter?: string | number;
+    amountCounter?: React.ReactNode;
     /**
      * Is the input required
      */
@@ -1035,13 +1045,13 @@ export declare const IOTA_PRIMITIVES_COLOR_PALETTE: {
     };
 };
 
-export declare function KeyValueInfo({ keyText, keyIcon, value, tooltipPosition, tooltipText, supportingLabel, size, isTruncated, copyText, onCopySuccess, onCopyError, fullwidth, isReverse, valueHoverTitle, }: KeyValueProps): React.JSX.Element;
+export declare function KeyValueInfo({ keyText, keyIcon, value, tooltipPosition, tooltipText, supportingLabel, size, isTruncated, copyText, onCopySuccess, onCopyError, fullwidth, isReverse, layout, valueHoverTitle, }: KeyValueProps): React.JSX.Element;
 
 declare interface KeyValueProps {
     /**
      * The key of the KeyValue.
      */
-    keyText: string;
+    keyText: ReactNode;
     /**
      * An icon shown next to the key text (optional).
      */
@@ -1090,6 +1100,11 @@ declare interface KeyValueProps {
      * Reverse the KeyValue (optional).
      */
     isReverse?: boolean;
+    /**
+     * Use a receipt-style row with a dotted leader and right-aligned value.
+     * This is opt-in so existing KeyValueInfo layouts remain unchanged.
+     */
+    layout?: 'default' | 'receipt';
     /**
      * Text shown on value hover.
      */
@@ -1603,7 +1618,7 @@ export declare function TableActionButton(props: PropsWithChildren<ButtonProps_2
 
 export declare function TableBody({ children }: PropsWithChildren): JSX.Element;
 
-export declare function TableCellBase({ children, hasLastBorderNoneClass, isContentCentered, }: PropsWithChildren<TableCellBaseProps>): JSX_2.Element;
+export declare function TableCellBase({ children, hasLastBorderNoneClass, isContentCentered, colSpan, }: PropsWithChildren<TableCellBaseProps>): JSX_2.Element;
 
 declare interface TableCellBaseProps {
     /**
@@ -1618,6 +1633,10 @@ declare interface TableCellBaseProps {
      * Whether the cell content should be centered.
      */
     isContentCentered?: boolean;
+    /**
+     * The number of columns the cell should span.
+     */
+    colSpan?: number;
 }
 
 export declare function TableCellPlaceholder(): JSX_2.Element;
@@ -1760,8 +1779,9 @@ export declare type TableProps = {
     heightFull?: boolean;
 };
 
-export declare function TableRow({ children, leading, }: PropsWithChildren<{
+export declare function TableRow({ children, leading, onClick, }: PropsWithChildren<{
     leading?: React.ReactNode;
+    onClick?: React.MouseEventHandler<HTMLTableRowElement>;
 }>): JSX.Element;
 
 export declare function TableRowCheckbox({ rowIndex, onCheckboxChange, isDisabled, }: TableRowCheckboxProps): React.JSX.Element;

package/dist/index.es.js

@@ -1046,14 +1046,17 @@ var ge = {
 	[P.Outlined]: "badge-border-color-outlined",
 	[P.Error]: "border-error-surface"
 }, F = /* @__PURE__ */ E(Oe());
-function Ne({ type: e, label: n, size: r = ke.Medium }) {
-	let i = Ae[e], a = je[e], o = r === ke.Small, s = e === P.Outlined, c = n ? "px-xs py-xxs" : "h-1.5 w-1.5", l = o ? "text-label-sm" : "text-label-md";
-	return /* @__PURE__ */ t("div", {
-		className: (0, F.default)("inline-flex items-center space-x-2 rounded-full disabled:opacity-30", { border: !o }, { [Me[e]]: !o }, { "badge-ring-outlined": o && s }, i, c),
-		children: /* @__PURE__ */ t("span", {
-			className: (0, F.default)(l, a),
-			children: n
-		})
+function Ne({ type: e, label: r, size: i = ke.Medium, icon: a }) {
+	let o = Ae[e], s = je[e], c = i === ke.Small, l = e === P.Outlined, u = r ? "px-xs py-xxs" : "h-1.5 w-1.5", d = c ? "text-label-sm" : "text-label-md";
+	return /* @__PURE__ */ n("div", {
+		className: (0, F.default)("inline-flex items-center rounded-full disabled:opacity-30", a ? "gap-xxs" : "space-x-2", { border: !c }, { [Me[e]]: !c }, { "badge-ring-outlined": c && l }, o, u),
+		children: [a && /* @__PURE__ */ t("span", {
+			className: (0, F.default)("flex h-4 w-4 items-center justify-center", s),
+			children: a
+		}), /* @__PURE__ */ t("span", {
+			className: (0, F.default)(d, s),
+			children: r
+		})]
 	});
 }
 //#endregion
@@ -1661,7 +1664,7 @@ var Ct = c(({ isChecked: e, isIndeterminate: r, label: i, isLabelFirst: a, isDis
 			}),
 			/* @__PURE__ */ t("span", {
 				onClick: () => f.current?.click(),
-				className: (0, F.default)("checkbox-base checkbox-state checkbox-icon checkbox-icon-hidden", "checkbox-border-default", "peer-[&:is(:checked,:indeterminate)]:checkbox-border-checked", "peer-[&:is(:checked,:indeterminate)]:checkbox-bg-checked", "peer-[&:is(:checked,:indeterminate)]:checkbox-text-checked", "peer-disabled:peer-[&:not(:checked,:indeterminate)]:checkbox-border-color-disabled", "peer-disabled:peer-[&:is(:checked,:indeterminate)]:checkbox-border-color-disabled-checked", "peer-disabled:peer-[&:is(:checked,:indeterminate)]:checkbox-bg-color-disabled-checked"),
+				className: (0, F.default)("checkbox-base checkbox-state checkbox-icon checkbox-icon-hidden shrink-0", "checkbox-border-default", "peer-[&:is(:checked,:indeterminate)]:checkbox-border-checked", "peer-[&:is(:checked,:indeterminate)]:checkbox-bg-checked", "peer-[&:is(:checked,:indeterminate)]:checkbox-text-checked", "peer-disabled:peer-[&:not(:checked,:indeterminate)]:checkbox-border-color-disabled", "peer-disabled:peer-[&:is(:checked,:indeterminate)]:checkbox-border-color-disabled-checked", "peer-disabled:peer-[&:is(:checked,:indeterminate)]:checkbox-bg-color-disabled-checked"),
 				children: /* @__PURE__ */ t(m, {})
 			}),
 			/* @__PURE__ */ t(wt, {
@@ -1674,7 +1677,7 @@ var Ct = c(({ isChecked: e, isIndeterminate: r, label: i, isLabelFirst: a, isDis
 function wt({ label: e, name: n }) {
 	return /* @__PURE__ */ t("label", {
 		htmlFor: n,
-		className: "checkbox-label checkbox-label-disabled",
+		className: "checkbox-label checkbox-label-disabled flex-1",
 		children: e
 	});
 }
@@ -1712,37 +1715,50 @@ function Mt({ text: r, position: i = jt.Top, maxWidth: a = "max-w-[200px]", offs
 		S(), b.current = setTimeout(() => g(!0), s);
 	}, w = () => {
 		S(), x.current = setTimeout(() => g(!1), c);
+	}, T = (e) => ({
+		[jt.Top]: {
+			top: e.top - o,
+			left: e.left + e.width / 2,
+			transform: "translate(-50%, -100%)",
+			anchorX: .5,
+			anchorY: 1
+		},
+		[jt.Bottom]: {
+			top: e.bottom + o,
+			left: e.left + e.width / 2,
+			transform: "translate(-50%, 0)",
+			anchorX: .5,
+			anchorY: 0
+		},
+		[jt.Left]: {
+			top: e.top + e.height / 2,
+			left: e.left - o,
+			transform: "translate(-100%, -50%)",
+			anchorX: 1,
+			anchorY: .5
+		},
+		[jt.Right]: {
+			top: e.top + e.height / 2,
+			left: e.right + o,
+			transform: "translate(0, -50%)",
+			anchorX: 0,
+			anchorY: .5
+		}
+	})[i], E = (e, t, n, r) => {
+		let i = e + t;
+		return i > n - r ? n - r - i : e < r ? r - e : 0;
 	};
 	return d(() => {
 		if (!h) return;
-		let e = u.current?.getBoundingClientRect();
-		if (!e) return;
-		let t = {
-			[jt.Top]: {
-				top: e.top - o,
-				left: e.left + e.width / 2,
-				transform: "translate(-50%, -100%)"
-			},
-			[jt.Bottom]: {
-				top: e.bottom + o,
-				left: e.left + e.width / 2,
-				transform: "translate(-50%, 0)"
-			},
-			[jt.Left]: {
-				top: e.top + e.height / 2,
-				left: e.left - o,
-				transform: "translate(-100%, -50%)"
-			},
-			[jt.Right]: {
-				top: e.top + e.height / 2,
-				left: e.right + o,
-				transform: "translate(0, -50%)"
-			}
-		}[i];
+		let e = u.current?.getBoundingClientRect(), t = f.current;
+		if (!e || !t) return;
+		let n = T(e);
+		t.style.transform = n.transform;
+		let { width: r, height: i } = t.getBoundingClientRect(), a = n.left - r * n.anchorX, o = n.top - i * n.anchorY, s = E(a, r, window.innerWidth, 8), c = E(o, i, window.innerHeight, 8);
 		y({
-			top: t.top,
-			left: t.left
-		}), f.current.style.transform = t.transform;
+			top: n.top + c,
+			left: n.left + s
+		});
 	}, [
 		h,
 		i,
@@ -1750,11 +1766,7 @@ function Mt({ text: r, position: i = jt.Top, maxWidth: a = "max-w-[200px]", offs
 	]), d(() => {
 		if (!h) return;
 		let e = () => {
-			let e = u.current?.getBoundingClientRect();
-			e && y((t) => ({
-				...t,
-				left: e.left + e.width / 2
-			}));
+			S(), g(!1);
 		};
 		return window.addEventListener("scroll", e, !0), window.addEventListener("resize", e), () => {
 			window.removeEventListener("scroll", e, !0), window.removeEventListener("resize", e);
@@ -1788,9 +1800,9 @@ function Mt({ text: r, position: i = jt.Top, maxWidth: a = "max-w-[200px]", offs
 }
 //#endregion
 //#region src/lib/components/atoms/key-value-info/KeyValueInfo.tsx
-function Nt({ keyText: e, keyIcon: r, value: i, tooltipPosition: a, tooltipText: o, supportingLabel: s, size: c = At.Small, isTruncated: l = !1, copyText: u, onCopySuccess: d, onCopyError: f, fullwidth: p, isReverse: m = !1, valueHoverTitle: h }) {
-	let g = m ? "flex-row-reverse" : "flex-row";
-	async function _(e) {
+function Nt({ keyText: e, keyIcon: r, value: i, tooltipPosition: a, tooltipText: o, supportingLabel: s, size: c = At.Small, isTruncated: l = !1, copyText: u, onCopySuccess: d, onCopyError: f, fullwidth: p, isReverse: m = !1, layout: h = "default", valueHoverTitle: g }) {
+	let _ = m ? "flex-row-reverse" : "flex-row", v = h === "receipt";
+	async function y(e) {
 		if (navigator.clipboard && u) try {
 			await navigator.clipboard.writeText(u), d?.(e, u);
 		} catch (e) {
@@ -1798,47 +1810,56 @@ function Nt({ keyText: e, keyIcon: r, value: i, tooltipPosition: a, tooltipText:
 		}
 	}
 	return /* @__PURE__ */ n("div", {
-		className: (0, F.default)("flex w-full items-baseline gap-xs py-xxs font-inter", g, { "flex-wrap justify-between": p }),
-		children: [/* @__PURE__ */ n("div", {
-			className: (0, F.default)("flex shrink-0 flex-row items-center gap-x-0.5", { "w-1/4": !p }),
-			children: [
-				r,
-				/* @__PURE__ */ t("span", {
-					className: "key-value-key-text-color break-normal text-body-md",
-					children: e
-				}),
-				o && /* @__PURE__ */ t(Mt, {
-					text: o,
-					position: a,
-					children: /* @__PURE__ */ t(et, { className: "key-supporting-text-color" })
-				})
-			]
-		}), /* @__PURE__ */ n("div", {
-			className: (0, F.default)("flex min-w-0 flex-row items-baseline gap-1 break-all", {
-				"w-3/4": !p,
-				"flex-wrap": p,
-				truncate: l
+		className: (0, F.default)("flex w-full items-baseline gap-xs py-xxs font-inter", _, { "flex-wrap justify-between": p }),
+		children: [
+			/* @__PURE__ */ n("div", {
+				className: (0, F.default)("flex shrink-0 flex-row items-center gap-x-0.5", { "w-1/4": !p && !v }),
+				children: [
+					r,
+					/* @__PURE__ */ t("span", {
+						className: "key-value-key-text-color break-normal text-body-md",
+						children: e
+					}),
+					o && /* @__PURE__ */ t(Mt, {
+						text: o,
+						position: a,
+						children: /* @__PURE__ */ t(et, { className: "key-supporting-text-color" })
+					})
+				]
 			}),
-			children: [
-				/* @__PURE__ */ t("span", {
-					title: h,
-					className: (0, F.default)("key-value-hover-text-color min-w-0", c === At.Medium ? "text-body-lg" : "text-body-md", { truncate: l }),
-					children: i
-				}),
-				s && /* @__PURE__ */ t("span", {
-					className: (0, F.default)("key-supporting-text-color", c === At.Medium ? "text-body-md" : "text-body-sm"),
-					children: s
+			v && !p && /* @__PURE__ */ t("span", {
+				"aria-hidden": "true",
+				className: "mb-1 min-w-[0.5rem] flex-1 border-b border-dotted border-iota-neutral-80 opacity-60 dark:border-iota-neutral-20"
+			}),
+			/* @__PURE__ */ n("div", {
+				className: (0, F.default)("flex min-w-0 flex-row items-baseline gap-1 break-all", {
+					"w-3/4": !p && !v,
+					"max-w-[60%] justify-end text-right": !p && v,
+					"flex-wrap": p,
+					"justify-end text-right": p && v,
+					truncate: l
 				}),
-				/* @__PURE__ */ t("div", {
-					className: "self-center",
-					children: u && /* @__PURE__ */ t(B, {
-						onClick: _,
-						"aria-label": "Copy to clipboard",
-						children: /* @__PURE__ */ t(Xe, { className: "key-supporting-text-color" })
+				children: [
+					/* @__PURE__ */ t("span", {
+						title: g,
+						className: (0, F.default)("key-value-hover-text-color min-w-0", c === At.Medium ? "text-body-lg" : "text-body-md", { truncate: l }),
+						children: i
+					}),
+					s && /* @__PURE__ */ t("span", {
+						className: (0, F.default)("key-supporting-text-color", c === At.Medium ? "text-body-md" : "text-body-sm"),
+						children: s
+					}),
+					/* @__PURE__ */ t("div", {
+						className: "self-center",
+						children: u && /* @__PURE__ */ t(B, {
+							onClick: y,
+							"aria-label": "Copy to clipboard",
+							children: /* @__PURE__ */ t(Xe, { className: "key-supporting-text-color" })
+						})
 					})
-				})
-			]
-		})]
+				]
+			})
+		]
 	});
 }
 //#endregion
@@ -3292,8 +3313,9 @@ var ii = /* @__PURE__ */ function(e) {
 }({});
 //#endregion
 //#region src/lib/components/molecules/table-cell/TableCell.tsx
-function ai({ children: e, hasLastBorderNoneClass: n, isContentCentered: r }) {
+function ai({ children: e, hasLastBorderNoneClass: n, isContentCentered: r, colSpan: i }) {
 	return /* @__PURE__ */ t("td", {
+		colSpan: i,
 		className: (0, F.default)("table-cell-border-color h-14  border-b px-md", { "last:border-none": n }, { "flex items-center justify-center": r }),
 		children: e
 	});
@@ -3832,7 +3854,7 @@ function Bi({ label: e, tooltipPosition: r, tooltipText: i, value: a, supporting
 			className: "flex w-full flex-row items-baseline gap-xxs",
 			children: [
 				/* @__PURE__ */ t("span", {
-					className: (0, F.default)("break-all", g),
+					className: (0, F.default)("min-w-0 break-all", g),
 					children: a
 				}),
 				o && /* @__PURE__ */ t("span", {
@@ -5619,8 +5641,12 @@ function Ec(e) {
 function Dc({ children: e }) {
 	return /* @__PURE__ */ t("thead", { children: e });
 }
-function Oc({ children: e, leading: t }) {
-	return /* @__PURE__ */ n("tr", { children: [t, e] });
+function Oc({ children: e, leading: t, onClick: r }) {
+	return /* @__PURE__ */ n("tr", {
+		onClick: r,
+		className: (0, F.default)({ "cursor-pointer hover:bg-shader-neutral-light-8 dark:hover:bg-shader-neutral-dark-8": r }),
+		children: [t, e]
+	});
 }
 var kc = "table-text-color", Ac = "text-body-md";
 function jc({ children: e }) {
@@ -5731,12 +5757,12 @@ function Fc({ items: r, activeId: i, onClickItem: a, isOpen: o, onToggleNavbar:
 }
 //#endregion
 //#region src/lib/components/organisms/accordion/Accordion.tsx
-function Ic({ onToggle: e, children: r, isExpanded: i, hideArrow: a }) {
+function Ic({ onToggle: e, children: r, isExpanded: i, hideArrow: a, disableStateLayer: o = !1 }) {
 	return /* @__PURE__ */ n("div", {
 		onClick: e,
 		role: "button",
 		"aria-expanded": i,
-		className: (0, F.default)("state-layer relative flex cursor-pointer items-center justify-between gap-md overflow-hidden rounded-xl py-sm--rs", { "pr-md--rs": !a }),
+		className: (0, F.default)("relative flex cursor-pointer items-center justify-between gap-md overflow-hidden rounded-xl py-sm--rs", !o && "state-layer", { "pr-md--rs": !a }),
 		children: [r, !a && /* @__PURE__ */ t("div", {
 			className: "[&_svg]:h-5 [&_svg]:w-5",
 			children: /* @__PURE__ */ t(z, {