{children}
@@ -250,9 +252,15 @@ export interface StructuredListRowProps extends DivAttrs {
* Provide a handler that is invoked on the key down event for the control
*/
onKeyDown?(event: KeyboardEvent): void;
+
+ /**
+ * Mark if this row should be selectable
+ */
+ selection?: boolean;
}
export function StructuredListRow(props: StructuredListRowProps) {
- const { onKeyDown, children, className, head, onClick, ...other } = props;
+ const { onKeyDown, children, className, head, onClick, selection, ...other } =
+ props;
const [hasFocusWithin, setHasFocusWithin] = useState(false);
const id = useId('grid-input');
const selectedRow = React.useContext(GridSelectedRowStateContext);
@@ -263,14 +271,24 @@ export function StructuredListRow(props: StructuredListRowProps) {
`${prefix}--structured-list-row`,
{
[`${prefix}--structured-list-row--header-row`]: head,
- [`${prefix}--structured-list-row--focused-within`]: hasFocusWithin,
+ [`${prefix}--structured-list-row--focused-within`]:
+ (hasFocusWithin && !selection) ||
+ (hasFocusWithin &&
+ selection &&
+ (selectedRow === id || selectedRow === null)),
+ // Ensure focus on the first item when navigating through Tab keys and no row is selected (selectedRow === null)
[`${prefix}--structured-list-row--selected`]: selectedRow === id,
},
className
);
-
+ const itemRef = useRef
(null);
+ const handleClick = () => {
+ setHasFocusWithin(false);
+ };
+ useOutsideClick(itemRef, handleClick);
return head ? (
+ {selection && }
{children}
) : (
@@ -280,9 +298,14 @@ export function StructuredListRow(props: StructuredListRowProps) {
{...other}
role="row"
className={classes}
+ ref={itemRef}
onClick={(event) => {
setSelectedRow?.(id);
onClick && onClick(event);
+ if (selection) {
+ // focus items only when selection is enabled
+ setHasFocusWithin(true);
+ }
}}
onFocus={() => {
setHasFocusWithin(true);
@@ -292,6 +315,12 @@ export function StructuredListRow(props: StructuredListRowProps) {
}}
onKeyDown={onKeyDown}>
+ {selection && (
+
+ {selectedRow === id ? : }
+
+ )}
+
{children}