@engie-group/fluid-design-system-react/lib/components/segmented-control/NJSegmentedControlButton.js

Fluid Design System React

import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
import { Root as Slot, Slottable } from '../../node_modules/.pnpm/@radix-ui_react-slot@1.2.3_@types_react@19.2.6_react@19.2.0/node_modules/@radix-ui/react-slot/dist/index.js';
import React__default, { useContext, Children } from 'react';
import { isDefaultComponent } from '../../utils/typeHelpers.js';
import { Utils } from '../../utils/util.js';
import { NJIcon } from '../icon/NJIcon.js';
import { NJSegmentedControlContext } from './NJSegmentedControl.context.js';

const rootClass = 'nj-segmented-control-btn';
const NJSegmentedControlButton = React__default.forwardRef((props, forwardedRef) => {
    const { value, iconName, icon, children, asChild, ...htmlProps } = props;
    const segmentedControlContext = useContext(NJSegmentedControlContext);
    let className = Utils.classNames(rootClass);
    const iconClassname = `${rootClass}__icon`;
    const isPressed = segmentedControlContext.selectedValue === value;
    function handleButtonClick() {
        segmentedControlContext.onOptionClicked?.(value);
    }
    const iconElement = (jsxs(Fragment, { children: [icon && jsx(Slot, { className: iconClassname, children: icon }), iconName && !icon && jsx(NJIcon, { name: iconName, className: iconClassname })] }));
    if (isDefaultComponent(asChild)) {
        className = Utils.classNames(className, {
            [`${rootClass}--icon-only`]: !children && (iconName || icon)
        }, htmlProps.className);
        return (jsxs("button", { ref: forwardedRef, ...htmlProps, className: className, "aria-pressed": isPressed, onClick: (event) => {
                handleButtonClick();
                htmlProps.onClick?.(event);
            }, children: [iconElement, children] }));
    }
    const hasChildren = children?.props.children &&
        Children.count(children.props.children) > 0;
    className = Utils.classNames(className, {
        [`${rootClass}--icon-only`]: !hasChildren && (iconName || icon)
    });
    return (jsxs(Slot, { className: className, onClick: handleButtonClick, "aria-pressed": isPressed, children: [iconElement, jsx(Slottable, { children: children })] }));
});
NJSegmentedControlButton.displayName = 'NJSegmentedControlButton';

export { NJSegmentedControlButton };