) => {
*/
export const ListBoxItem = (props: ListBoxItemProps) => {
const { ownProps, restProps } = useDefinition(ListBoxItemDefinition, props);
- const { classes, children, description, icon } = ownProps;
+ const { classes, children, description, icon, customActions } = ownProps;
const textValue = typeof children === 'string' ? children : undefined;
@@ -69,7 +70,11 @@ export const ListBoxItem = (props: ListBoxItemProps) => {
)}
- {icon && {icon}
}
+ {icon && (
+
+ {icon}
+
+ )}
{children}
{description && (
@@ -78,6 +83,15 @@ export const ListBoxItem = (props: ListBoxItemProps) => {
)}
+ {customActions && (
+ e.stopPropagation()}
+ onKeyDown={e => e.stopPropagation()}
+ >
+ {customActions}
+
+ )}
>
)}
diff --git a/packages/ui/src/components/ListBox/definition.ts b/packages/ui/src/components/ListBox/definition.ts
index 6c2b41d883..ef8d6e4b61 100644
--- a/packages/ui/src/components/ListBox/definition.ts
+++ b/packages/ui/src/components/ListBox/definition.ts
@@ -47,11 +47,13 @@ export const ListBoxItemDefinition = defineComponent()({
icon: 'bui-ListBoxItemIcon',
label: 'bui-ListBoxItemLabel',
description: 'bui-ListBoxItemDescription',
+ actions: 'bui-ListBoxItemActions',
},
propDefs: {
children: {},
description: {},
icon: {},
+ customActions: {},
className: {},
},
});
diff --git a/packages/ui/src/components/ListBox/types.ts b/packages/ui/src/components/ListBox/types.ts
index cf936babf7..6299518467 100644
--- a/packages/ui/src/components/ListBox/types.ts
+++ b/packages/ui/src/components/ListBox/types.ts
@@ -55,9 +55,14 @@ export type ListBoxItemOwnProps = {
*/
description?: string;
/**
- * Optional icon displayed before the label.
+ * Optional icon displayed before the label, rendered in a 32×32px box.
*/
icon?: React.ReactNode;
+ /**
+ * Optional actions rendered in a flex row on the right side of the item,
+ * e.g. a ButtonIcon with a dropdown menu, or a set of tags.
+ */
+ customActions?: React.ReactNode;
className?: string;
};