@engie-group/fluid-design-system-react/lib/components/list/NJListItem.d.ts

Fluid Design System React

import React from 'react';
import { IIconProps } from '../icon';
export declare const NJListItem: React.ForwardRefExoticComponent<IListItemProps & React.RefAttributes<HTMLLIElement>>;
type TListItemType = 'list' | 'link' | 'button' | 'checkbox';
export interface IListItemProps extends React.ComponentPropsWithoutRef<'li'> {
    /**
     * Icon on the left of the list
     */
    icon?: IIconProps;
    /**
     * Whether item is disabled or not
     */
    isDisabled?: boolean;
    /**
     * Whether item border is on the right or the left
     */
    hasRightBorder?: boolean;
    /**
     * Whether item has an active border
     */
    noActiveBorder?: boolean;
    /**
     * Content that goes on the right side
     */
    rightContent?: React.ReactElement;
    /**
     * Whether item has the --clickable modifier or not
     */
    isClickable?: boolean;
    /**
     * Whether item is active or not
     */
    isActive?: boolean;
    /**
     * Whether item has focus visible
     */
    isFocusVisible?: boolean;
    /**
     * List item type <br>
     * `list` -> `<li>...</li>` <br>
     * `link` -> `<li><a>...</a></li>` <br>
     * `button` -> `<li><button>...</button></li>`
     */
    type?: TListItemType;
    /**
     * List item href. If set, list item is a link
     */
    href?: string;
    /**
     * List item target
     */
    target?: '_blank' | '_self';
    /**
     * List item data-value
     */
    value?: string;
    /**
     * Function called on list item click
     */
    onClick?: React.MouseEventHandler<HTMLButtonElement | HTMLAnchorElement | HTMLLIElement>;
    /**
     * Add role="option" and tabindex="-1" to the element.
     *
     * Used by `NJSelectInput` for accessibility reasons.
     */
    isCustomSelectItem?: boolean;
    /**
     * Masks the content and right-content to only show the icon.
     *
     * Used by `NJSibarItem`
     */
    isFolded?: boolean;
    /**
     * Checkbox id if `type` is set to `checkbox`
     */
    checkboxContentId?: string;
    /**
     * Optional id
     * @deprecated Prefer using `id` props
     */
    listItemId?: string;
    /**
     * Whether the list item is the selected value when using "option" role.
     * @deprecated Prefer using `aria-selected` props.
     */
    ariaSelected?: boolean;
}
export {};