@xsolla/xui-button 0.191.0 → 0.192.0

package/web/index.mjs

@@ -831,7 +831,7 @@ var IconButton = ({
 IconButton.displayName = "IconButton";
 
 // src/FlexButton.tsx
-import {
+import React5, {
   useRef,
   useState as useState3
 } from "react";
@@ -839,10 +839,20 @@ import { useDesignSystem } from "@xsolla/xui-core";
 import { Fragment, jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
 var FLEX_BUTTON_PADDING = 4;
 var hasVisibleLabel = (node) => {
-  if (node == null || node === false) return false;
+  if (node == null || node === false || node === true) return false;
   if (typeof node === "string") return node.trim().length > 0;
   if (typeof node === "number") return true;
   if (Array.isArray(node)) return node.some(hasVisibleLabel);
+  if (React5.isValidElement(node)) {
+    const { children: elementChildren } = node.props ?? {};
+    return hasVisibleLabel(elementChildren);
+  }
+  return true;
+};
+var hasRenderableContent = (node) => {
+  if (node == null || node === false || node === true) return false;
+  if (typeof node === "string") return node.trim().length > 0;
+  if (Array.isArray(node)) return node.some(hasRenderableContent);
   return true;
 };
 var ICON_SIZES = {
@@ -1044,8 +1054,10 @@ var FlexButton = ({
   const fontSize = FONT_SIZES[size];
   const borderRadius = BORDER_RADIUS[size];
   const lineHeight = LINE_HEIGHTS[size];
-  const isIconOnly = !loading && !hasVisibleLabel(children) && Boolean(iconLeft || iconRight);
-  const iconOnlyHitArea = iconSize + FLEX_BUTTON_PADDING * 2;
+  const showTextLabel = hasVisibleLabel(children);
+  const hasIconChildren = !showTextLabel && hasRenderableContent(children);
+  const isIconOnly = !loading && !showTextLabel && Boolean(iconLeft || iconRight || hasIconChildren);
+  const iconOnlyHitArea = theme.sizing.flexButton(size).height;
   const handleMouseEnter = () => {
     if (!isDisabled) {
       isMouseOverRef.current = true;
@@ -1185,7 +1197,8 @@ var FlexButton = ({
       "data-testid": testID || "flex-button",
       children: /* @__PURE__ */ jsx7("span", { style: contentStyle, children: loading ? /* @__PURE__ */ jsx7("span", { style: spinnerStyle, children: /* @__PURE__ */ jsx7(Spinner, { size: spinnerSize, color: spinnerColor }) }) : /* @__PURE__ */ jsxs3(Fragment, { children: [
         iconLeft && /* @__PURE__ */ jsx7(Icon, { size: iconSize, color: colors.text, children: iconLeft }),
-        hasVisibleLabel(children) && /* @__PURE__ */ jsx7("span", { children }),
+        showTextLabel && /* @__PURE__ */ jsx7("span", { children }),
+        hasIconChildren && /* @__PURE__ */ jsx7(Icon, { size: iconSize, color: colors.text, children }),
         iconRight && /* @__PURE__ */ jsx7(Icon, { size: iconSize, color: colors.text, children: iconRight })
       ] }) })
     }