@allxsmith/bestax-bulma 5.13.0 → 5.14.0

package/dist/index.esm.js

@@ -2786,8 +2786,37 @@ function getIconClasses(library, name, variant, features) {
 const Icon = ({ className, textColor, bgColor, name, library, variant, features, libraryFeatures, // Deprecated but maintained for backward compatibility
 size, ariaLabel = 'icon', style, icon, // Capture and exclude the deprecated 'icon' prop from DOM
 color: _color, // Exclude 'color' prop if passed directly
-containerClassName, ...restProps }) => {
-    // Handle deprecated 'icon' prop - parse it to extract the actual name
+containerClassName, children, ...restProps }) => {
+    // Get the default icon library from context, fallback to 'fa' if not set
+    const defaultLibrary = useIconLibrary();
+    /**
+     * Generates Bulma helper classes and separates out remaining props.
+     * Note: variant, features, and libraryFeatures are excluded from props spread
+     */
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor,
+        backgroundColor: bgColor,
+        ...restProps,
+    });
+    // Hoisted unconditionally to respect rules-of-hooks; the branches below
+    // pick which result to consume.
+    const defaultIconClasses = usePrefixedClassNames('icon', {
+        [`is-${size}`]: size,
+    });
+    const sizeModifierClass = usePrefixedClassNames(size ? `is-${size}` : undefined);
+    const bulmaClasses = containerClassName
+        ? containerClassName
+        : defaultIconClasses;
+    const iconContainerClasses = classNames(bulmaClasses, containerClassName && size ? sizeModifierClass : undefined, bulmaHelperClasses, className);
+    if (children !== undefined) {
+        // `IconChildrenProps`: render the caller's node (an inline SVG, a `react-icons`
+        // component, …) in place of a class-based glyph. Library/variant/features don't apply.
+        return (jsx("span", { className: iconContainerClasses, "aria-label": ariaLabel, style: style, ...rest, children: children }));
+    }
+    // `name` is guaranteed once `children` is absent (`IconProps` is a discriminated union of
+    // the two, and `IconChildrenProps['children']` excludes `undefined` so `children={undefined}`
+    // can't slip past into this branch) — the cast only matters for legacy callers that bypass
+    // the type and rely solely on the deprecated `icon` prop below.
     let finalName = name;
     if (!name && icon) {
         // If icon prop is provided instead of name, try to parse it
@@ -2806,31 +2835,16 @@ containerClassName, ...restProps }) => {
             }
         }
     }
-    // Get the default icon library from context, fallback to 'fa' if not set
-    const defaultLibrary = useIconLibrary();
     const finalLibrary = library || defaultLibrary || 'fa';
     // Normalize a redundant leading library prefix (e.g. "fa-check" -> "check" when the
     // library is 'fa'), so `name` behaves identically with or without the prefix.
     finalName = stripRedundantLibraryPrefix(finalName, finalLibrary);
-    /**
-     * Generates Bulma helper classes and separates out remaining props.
-     * Note: variant, features, and libraryFeatures are excluded from props spread
-     */
-    const { bulmaHelperClasses, rest } = useBulmaClasses({
-        color: textColor,
-        backgroundColor: bgColor,
-        ...restProps,
-    });
-    // Hoisted unconditionally to respect rules-of-hooks; the ternaries below
-    // pick which result to consume.
-    const defaultIconClasses = usePrefixedClassNames('icon', {
-        [`is-${size}`]: size,
-    });
-    const sizeModifierClass = usePrefixedClassNames(size ? `is-${size}` : undefined);
-    const bulmaClasses = containerClassName
-        ? containerClassName
-        : defaultIconClasses;
-    const iconContainerClasses = classNames(bulmaClasses, containerClassName && size ? sizeModifierClass : undefined, bulmaHelperClasses, className);
+    if (!finalName) {
+        // No glyph to name. Unreachable through the public type, but a plain-JS caller (or one
+        // that casts) can land here, and building a class off an absent name produced a bogus
+        // `fa-undefined` glyph. Render the bare container instead, matching the `children` branch.
+        return (jsx("span", { className: iconContainerClasses, "aria-label": ariaLabel, style: style, ...rest }));
+    }
     // Backward compatibility: if libraryFeatures is provided, parse it for variant and features
     let finalVariant = variant;
     let finalFeatures = features;
@@ -2949,8 +2963,9 @@ const PanelTabs = ({ className, children, ...props }) => (jsx("p", { className:
  */
 const PanelBlock = ({ className, active, children, ...props }) => (jsx("a", { className: classNames(usePrefixedClassNames('panel-block', { 'is-active': active }), className), ...props, children: children }));
 /**
- * Icon wrapper with panel styling (renders as `<span class="panel-icon"><i/></span>`).
- * Accepts all Icon props (`name`, `variant`, `features`, etc.)
+ * Icon wrapper with panel styling (renders as `<span class="panel-icon">`, containing an
+ * `<i/>` when a `name` is given, or the custom node passed as `children`).
+ * Accepts all Icon props (`name`, `variant`, `features`, etc.), or `children` for a custom node.
  *
  * @function
  * @param {PanelIconProps} props - Props for the PanelIcon component.
@@ -5125,6 +5140,16 @@ const Figure = withSubComponents(FigureComponent, {
     Caption: FigureCaption,
 }, 'Figure');
 
+/**
+ * Distinguishes an `IconProps` object from a plain custom node (an inline SVG, a `react-icons`
+ * component, …) passed to a slot that accepts either.
+ */
+function isIconProps$1(value) {
+    return (typeof value === 'object' &&
+        value !== null &&
+        !React.isValidElement(value) &&
+        ('name' in value || 'children' in value));
+}
 /**
  * The `IconText` component provides a Bulma-styled horizontal arrangement of one or more `Icon` components and optional text.
  *
@@ -5144,7 +5169,9 @@ const IconTextComponent = ({ className, textColor, color, bgColor, iconProps, ch
     });
     const bulmaClasses = usePrefixedClassNames('icon-text');
     const iconTextClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
-    return (jsx("span", { className: iconTextClasses, ...rest, children: items ? (items.map((item, index) => (jsxs(React.Fragment, { children: [jsx(Icon, { ...item.iconProps }), item.text && jsx("span", { children: item.text })] }, index)))) : (jsxs(Fragment, { children: [iconProps && jsx(Icon, { ...iconProps }), children && jsx("span", { children: children })] })) }));
+    return (jsx("span", { className: iconTextClasses, ...rest, children: items ? (items.map((item, index) => (jsxs(React.Fragment, { children: [item.iconProps &&
+                    (isIconProps$1(item.iconProps) ? (jsx(Icon, { ...item.iconProps })) : (jsx(Icon, { children: item.iconProps }))), item.text && jsx("span", { children: item.text })] }, index)))) : (jsxs(Fragment, { children: [iconProps &&
+                    (isIconProps$1(iconProps) ? (jsx(Icon, { ...iconProps })) : (jsx(Icon, { children: iconProps }))), children && jsx("span", { children: children })] })) }));
 };
 const IconText = withSubComponents(IconTextComponent, { Icon }, 'IconText');
 
@@ -6055,6 +6082,16 @@ const Checkbox = forwardRef(({ color, size, className, children, textColor, disa
 });
 Checkbox.displayName = 'Checkbox';
 
+/**
+ * Distinguishes an `IconProps` object from a plain custom node (an inline SVG, a `react-icons`
+ * component, …) passed to a slot that accepts either.
+ */
+function isIconProps(value) {
+    return (typeof value === 'object' &&
+        value !== null &&
+        !React.isValidElement(value) &&
+        ('name' in value || 'children' in value));
+}
 const allowedColors = [...validColors, 'inherit', 'current'];
 /**
  * The `Control` component is a Bulma-styled wrapper for form controls (`Input`, `Select`, `TextArea`, etc.), supporting icons (left/right), loading state, expansion, size, and Bulma helper props for layout and color.
@@ -6086,15 +6123,19 @@ const Control = React.forwardRef(({ as = 'div', hasIconsLeft, hasIconsRight, isL
         backgroundColor: safeBgColor,
         ...restProps,
     });
-    // Prepare icon props for the shortcut
-    const leftIconProps = iconLeft ||
+    // Prepare icon props for the shortcut. A truthiness test (not `!== undefined`)
+    // so a falsy node from the idiomatic `iconLeft={cond && <Node/>}` / `iconLeft={maybe ?? null}`
+    // pattern counts as "no icon" — otherwise `false`/`null` would reserve the icon column and
+    // mount an empty `.icon` span. A falsy `iconLeft` also correctly falls through to the
+    // `iconLeftName` shortcut, matching the pre-node behavior.
+    const leftIconValue = iconLeft ||
         (iconLeftName
             ? {
                 name: iconLeftName,
                 size: iconLeftSize,
             }
             : undefined);
-    const rightIconProps = iconRight ||
+    const rightIconValue = iconRight ||
         (iconRightName
             ? {
                 name: iconRightName,
@@ -6102,15 +6143,17 @@ const Control = React.forwardRef(({ as = 'div', hasIconsLeft, hasIconsRight, isL
             }
             : undefined);
     const mainClass = usePrefixedClassNames('control', {
-        'has-icons-left': hasIconsLeft || !!leftIconProps,
-        'has-icons-right': hasIconsRight || !!rightIconProps,
+        'has-icons-left': hasIconsLeft || !!leftIconValue,
+        'has-icons-right': hasIconsRight || !!rightIconValue,
         'is-loading': isLoading,
         'is-expanded': isExpanded,
         [`is-${size}`]: !!size,
     });
     const controlClass = classNames(mainClass, bulmaHelperClasses, className);
     // --- FIX: Spread both restProps (for data-testid, etc) AND rest (from useBulmaClasses) ---
-    return (jsx(ControlProvider, { value: true, children: jsxs(Component, { className: controlClass, ref: ref, ...restProps, ...rest, children: [children, leftIconProps && leftIconProps.name && (jsx(Icon, { ...leftIconProps, className: prefixedClassNames(classPrefix, 'is-left') })), rightIconProps && rightIconProps.name && (jsx(Icon, { ...rightIconProps, className: prefixedClassNames(classPrefix, 'is-right') }))] }) }));
+    return (jsx(ControlProvider, { value: true, children: jsxs(Component, { className: controlClass, ref: ref, ...restProps, ...rest, children: [children, leftIconValue &&
+                    (isIconProps(leftIconValue) ? (jsx(Icon, { ...leftIconValue, className: prefixedClassNames(classPrefix, 'is-left') })) : (jsx(Icon, { className: prefixedClassNames(classPrefix, 'is-left'), children: leftIconValue }))), rightIconValue &&
+                    (isIconProps(rightIconValue) ? (jsx(Icon, { ...rightIconValue, className: prefixedClassNames(classPrefix, 'is-right') })) : (jsx(Icon, { className: prefixedClassNames(classPrefix, 'is-right'), children: rightIconValue })))] }) }));
 });
 Control.displayName = 'Control';