UNPKG

@engie-group/fluid-design-system-react

Version:

Fluid Design System React

38 lines (35 loc) 2.39 kB
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 };