@reusable-ui/nav/dist/NavItem.js

A navigation component to navigate between pages.

// react:
import { 
// react:
default as React, } from 'react';
// reusable-ui core:
import { 
// an accessibility management system:
usePropActive, ElementWithAutoActive, } from '@reusable-ui/core'; // a set of reusable-ui packages which are responsible for building any component
// reusable-ui components:
import { ListItem, ListSeparatorItem, } from '@reusable-ui/list'; // represents a series of content
export const NavItem = (props) => {
    // rest props:
    const { 
    // accessibilities:
    label, 
    // navigations:
    caseSensitive, end, 
    // components:
    listItemComponent = React.createElement(ListItem, null), ...restListItemProps } = props;
    // fn props:
    const propActive = usePropActive(props, null);
    const activeSt = (listItemComponent.props.active ?? propActive) /*controllable*/;
    const isControllableActive = activeSt !== null;
    // jsx:
    /* <ListItem> */
    const navItem = React.cloneElement(listItemComponent, 
    // props:
    {
        // other props:
        ...restListItemProps,
        ...listItemComponent.props,
        // semantics:
        'aria-current': listItemComponent.props['aria-current'] ?? props['aria-current'] ?? 'page',
        'aria-label': listItemComponent.props['aria-label'] ?? label,
    }, 
    // children:
    listItemComponent.props.children ?? props.children);
    if (isControllableActive)
        return React.cloneElement(navItem, 
        // props:
        {
            // states:
            active: activeSt,
        });
    const navItemProps = navItem.props;
    return (React.createElement(ElementWithAutoActive
    // other props:
    , { ...navItemProps, 
        // navigations:
        caseSensitive: caseSensitive, end: end, 
        // components:
        elementComponent: // the underlying `<Element>` to be `<Link>`-ed and manipulated of `[active]` & `[aria-current]` props, based on the current page url
        // clone navItem element with (almost) blank props:
        React.createElement(navItem.type
        // identifiers:
        , { 
            // identifiers:
            key: navItem.key, ...{
                ...(('caseSensitive' in navItemProps) ? { caseSensitive: navItemProps.caseSensitive } : undefined),
                ...(('end' in navItemProps) ? { end: navItemProps.end } : undefined),
                ...(('elementComponent' in navItemProps) ? { elementComponent: navItemProps.elementComponent } : undefined),
            } }) }));
};
export { ListSeparatorItem, };