assName={css(styles.dualListSelectorItemToggleIcon)}> )} ) => { onOptionCheck && onOptionCheck(evt, !isChecked, itemData); setFocusedOption(id); }} onClick={(evt: React.MouseEvent) => evt.stopPropagation()} onKeyDown={(e: React.KeyboardEvent) => { if (e.key === ' ' || e.key === 'Enter') { onOptionCheck && onOptionCheck(e, !isChecked, itemData); setFocusedOption(id); e.preventDefault(); } }} ref={(elem) => elem && (elem.indeterminate = isChecked === null)} checked={isChecked || false} tabIndex={-1} {...checkProps} /> {text} {hasBadge && children && ( {flattenTree((children as React.ReactElement).props.data).length} )} {isExpanded && children} ); }; export const DualListSelectorTreeItem = React.memo(DualListSelectorTreeItemBase, (prevProps, nextProps) => { if (!nextProps.useMemo) { return false; } if ( prevProps.className !== nextProps.className || prevProps.text !== nextProps.text || prevProps.id !== nextProps.id || prevProps.defaultExpanded !== nextProps.defaultExpanded || prevProps.checkProps !== nextProps.checkProps || prevProps.hasBadge !== nextProps.hasBadge || prevProps.badgeProps !== nextProps.badgeProps || prevProps.isChecked !== nextProps.isChecked || prevProps.itemData !== nextProps.itemData ) { return false; } return true; }); DualListSelectorTreeItem.displayName = 'DualListSelectorTreeItem';