@engie-group/fluid-design-system-react
Version:
Fluid Design System React
38 lines (35 loc) • 2.39 kB
JavaScript
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
import { Root as Slot } 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 { forwardRef } from 'react';
import { extractChild, updateChild } from '../../../utils/slots.js';
import { isDefaultAction } from '../../../utils/typeHelpers.js';
import { Utils } from '../../../utils/util.js';
import { NJIcon } from '../../icon/NJIcon.js';
const rootClass = 'nj-navigation-action';
const NJNavigationAction = forwardRef((props, forwardRef) => {
const { variant, children, expanded, scale, className: hostClass, ...htmlAttributes } = props;
const className = Utils.classNames(rootClass, {
[`${rootClass}--${variant}`]: !!variant,
[`${rootClass}--${scale}`]: !!scale
}, hostClass);
let actionElement;
if (isDefaultAction(props)) {
const { ...actionHtmlAttributes } = props.action ?? {};
const actionClassName = Utils.classNames(actionHtmlAttributes.className, `${rootClass}__action`);
actionElement = (jsx("button", { ...actionHtmlAttributes, className: actionClassName, type: actionHtmlAttributes.type ?? 'button', children: jsx(ActionChild, { ...props }) }));
}
else {
const child = extractChild(children);
const shell = updateChild(children, jsx(ActionChild, { ...props, children: child }));
actionElement = jsx(Slot, { className: `${rootClass}__action`, children: shell });
}
delete htmlAttributes.actionAsChild;
delete htmlAttributes.customIcon;
delete htmlAttributes.expandable;
return (jsx("div", { ref: forwardRef, ...htmlAttributes, className: className, "aria-expanded": htmlAttributes['aria-expanded'] ?? expanded, children: actionElement }));
});
NJNavigationAction.displayName = 'NJNavigationAction';
function ActionChild({ icon, customIcon, children, trailing, expandable }) {
return (jsxs(Fragment, { children: [icon && !customIcon && jsx(NJIcon, { className: `${rootClass}__icon`, name: icon }), customIcon && jsx(Slot, { className: `${rootClass}__icon`, children: customIcon }), children && jsx("span", { className: `${rootClass}__content`, children: children }), trailing, expandable && jsx(NJIcon, { className: `${rootClass}__arrow`, name: "keyboard_arrow_down" })] }));
}
export { NJNavigationAction };