@serendie/ui
Version:
Adaptive UI component library as part of Serendie Design System by Mitsubishi Electric
83 lines (82 loc) • 3.06 kB
TypeScript
import { default as React, ComponentProps } from 'react';
export declare const ListItemStyle: import('../../../styled-system/types').SlotRecipeRuntimeFn<"title" | "description" | "root" | "badge" | "wrapper" | "textGroup" | "subDescription" | "trailingElement" | "headingElement", {
isLargeHeadingElement: {
true: {
headingElement: {
"& svg": {
width: "40px";
height: "40px";
};
};
};
false: {};
};
isLargeTrailingElement: {
true: {
trailingElement: {
"& svg": {
width: "40px";
height: "40px";
};
};
};
false: {};
};
size: {
small: {
wrapper: {
minH: number;
};
};
};
}>;
type ListItemBaseProps = {
title: string;
description?: string;
subDescription?: string;
trailingElement?: React.ReactElement;
headingElement?: React.ReactElement;
isLargeHeadingElement?: boolean;
isLargeTrailingElement?: boolean;
badge?: number;
children?: React.ReactNode;
disabled?: boolean;
selected?: boolean;
focusVisible?: boolean;
/**
* wrapper要素をキーボードフォーカス可能にするか
* Menu/Selectなど親がフォーカス（roving focus）を管理する場合は `false` にする
* @default true
*/
focusable?: boolean;
size?: "small";
/** @deprecated `leftIcon` は廃止予定です。`headingElement` を使ってください */
leftIcon?: React.ReactElement;
/** @deprecated `rightIcon` は廃止予定です。`trailingElement` を使ってください */
rightIcon?: React.ReactElement;
/** @deprecated `isLargeLeftIcon` は廃止予定です。`isLargeHeadingElement` を使ってください */
isLargeLeftIcon?: boolean;
/** @deprecated `isLargeRightIcon` は廃止予定です。`isLargeTrailingElement` を使ってください */
isLargeRightIcon?: boolean;
};
type ExclusiveTrailingItemProps = ({
badge?: number;
} & {
trailingElement?: never;
isLargeTrailingElement?: never;
/** @deprecated `rightIcon` は廃止予定です。`trailingElement` を使ってください */
rightIcon?: never;
/** @deprecated `isLargeRightIcon` は廃止予定です。`isLargeTrailingElement` を使ってください */
isLargeRightIcon?: never;
}) | {
badge?: never;
trailingElement?: React.ReactElement;
isLargeTrailingElement?: boolean;
/** @deprecated `rightIcon` は廃止予定です。`trailingElement` を使ってください */
rightIcon?: React.ReactElement;
/** @deprecated `isLargeRightIcon` は廃止予定です。`isLargeTrailingElement` を使ってください */
isLargeRightIcon?: boolean;
};
type ListItemProps = ComponentProps<"li"> & ListItemBaseProps & ExclusiveTrailingItemProps;
export declare const ListItem: React.FC<ListItemProps>;
export {};