feat(TMC-15843): disabled item in datalist

packages/components/src/Datalist/Datalist.component.js

@@ -170,6 +170,10 @@ class Datalist extends Component {
 		if (this.props.multiSection) {
 			newValue = this.state.suggestions[sectionIndex].suggestions[itemIndex];
 		}
+		if (newValue.disabled) {
+			event.preventDefault();
+			return;
+		}
 		this.updateValue(event, newValue, true);
 	}
 
@@ -233,7 +237,7 @@ class Datalist extends Component {
 		} else {
 			const index = this.props.titleMap.findIndex(item => item.name === value);
 			this.setState({
-				focusedItemIndex: index,
+				focusedItemIndex: index === -1 ? null : index,
 			});
 		}
 	}

packages/components/src/Typeahead/Typeahead.component.js

@@ -113,10 +113,11 @@ function Typeahead({ onToggle, icon, position, docked, ...rest }) {
 		...themeProps,
 		...inputProps,
 		items: rest.items || [],
-		itemProps: {
+		itemProps: ({ itemIndex }) => ({
 			onMouseDown: rest.onSelect,
 			'data-feature': rest['data-feature'],
-		},
+			'aria-disabled': rest.items[itemIndex] && rest.items[itemIndex].disabled,
+		}),
 	};
 
 	return <Autowhatever {...autowhateverProps} />;

packages/components/src/Typeahead/Typeahead.component.renderers.js

@@ -138,8 +138,9 @@ export function renderItem(item, { value }) {
 		title = (item.title || item.name || '').trim();
 		description = item.description;
 	}
+
 	return (
-		<div className={theme.item} title={title}>
+		<div className={classNames(theme.item, { [theme.disabled]: item.disabled })} title={title}>
 			<span className={classNames(theme['item-title'], 'tc-typeahead-item-title')}>
 				<Emphasis value={value} text={title} />
 			</span>

packages/components/src/Typeahead/Typeahead.scss

@@ -157,6 +157,15 @@ $tc-typeahead-items-font-size: 1.5rem !default;
 	&-highlighted {
 		background-color: $tc-typeahead-focused-item-background-color;
 	}
+
+	&.disabled {
+		color: $silver-chalice;
+		cursor: not-allowed;
+
+		&:hover {
+			background: none;
+		}
+	}
 }
 
 .highlight-match {

packages/components/stories/Datalist.js

@@ -13,16 +13,16 @@ const propsMultiSection = {
 		{
 			title: 'cat 1',
 			suggestions: [
-				{ name: 'foo', value: 'foo', description: 'foo description' },
-				{ name: 'faa', value: 'faa' },
+				{ name: 'My foo', value: 'foo', description: 'foo description' },
+				{ name: 'My faa', value: 'faa' },
 			],
 		},
-		{ title: 'cat 2', suggestions: [{ name: 'bar', value: 'bar' }] },
+		{ title: 'cat 2', suggestions: [{ name: 'My bar', value: 'bar' }] },
 		{
 			title: 'cat 3',
-			suggestions: [{ name: 'foobar', value: 'foobar', description: 'foobar description' }],
+			suggestions: [{ name: 'My foobar', value: 'foobar', description: 'foobar description' }],
 		},
-		{ title: 'cat 4', suggestions: [{ name: 'lol', value: 'lol' }] },
+		{ title: 'cat 4', suggestions: [{ name: 'My lol', value: 'lol' }] },
 	],
 	onFinish: action('onFinish'),
 	onChange: action('onChange'),
@@ -45,6 +45,13 @@ const singleSectionProps = {
 	onLiveChange: action('onLiveChange'),
 };
 
+const titleMapWithDisabledItems = [
+	{ name: 'My foo', value: 'foo', description: 'foo description', disabled: true },
+	{ name: 'My bar', value: 'bar' },
+	{ name: 'My lol', value: 'lol', disabled: true },
+	{ name: 'My foobar', value: 'foobar', description: 'foobar description' },
+];
+
 storiesOf('Datalist', module)
 	.addDecorator(story => <div className="col-lg-offset-2 col-lg-8">{story()}</div>)
 	.add('default multiSection', () => {
@@ -67,6 +74,7 @@ storiesOf('Datalist', module)
 	.add('default single section', () => {
 		const restrictedValues = { ...singleSectionProps, restricted: true };
 		const defaultValue = { ...singleSectionProps, value: 'lol' };
+		const disabledItems = { ...singleSectionProps, titleMap: titleMapWithDisabledItems };
 		return (
 			<form className="form">
 				<IconsProvider />
@@ -80,6 +88,8 @@ storiesOf('Datalist', module)
 				<Datalist {...singleSectionProps} titleMap={[]} isLoading />
 				<h3>Auto focused :</h3>
 				<Datalist {...singleSectionProps} autoFocus />
+				<h3>With disabled Items :</h3>
+				<Datalist {...disabledItems} autoFocus />
 				<h3>Insert custom elements via render props :</h3>
 				<Datalist {...singleSectionProps}>
 					{(content, { isShown }) => (