<commit_before>import React from 'react';

import PropTypes from 'prop-types';
import IconSettings from '~/components/icon-settings';

import Filter from '~/components/filter';

import Combobox from '~/components/combobox';

const options = {
	'show-me': [
		{ id: 1, label: 'All Products', value: 'all-products' },
		{ id: 2, label: 'All Wackamoles', value: 'all-Wackamoles' },
	],
};

class Example extends React.Component {
	static displayName = 'FilterExample';

	static propTypes() {
		return {
			align: PropTypes.string,
		};
	}

	state = {
		'show-me': {
			comboboxSelection: [options['show-me'][0]],
			selectedItem: options['show-me'][0],
			isActive: true,
		},
	};

	onChangePredicate = (event, { id }) => {
		const idSuffix = id.split('sample-panel-filtering-')[1];
		this.setState({
			[idSuffix]: {
				...this.state[idSuffix],
				selectedItem: this.state[idSuffix].comboboxSelection,
			},
		});
	};

	onRemove = (event, { id }) => {
		const idSuffix = id.split('sample-panel-filtering-')[1];
		this.setState({
			[idSuffix]: {
				...this.state[idSuffix],
				isActive: false,
			},
		});
	};

	render() {
		return (
			this.state['show-me'].isActive && (
				<IconSettings iconPath="/assets/icons">
					<Filter
						align={this.props.align}
						id="sample-panel-filtering-show-me"
						isError
						onChange={this.onChangePredicate}
						onRemove={this.onRemove}
						property="Show Me"
						predicate={this.state['show-me'].selectedItem.label}
					>
						<Combobox
							events={{
								onSelect: (event, data) => {
									this.setState({
										'show-me': {
											...this.state['show-me'],
											comboboxSelection: data.selection,
										},
									});
								},
							}}
							labels={{
								label: 'Show Me',
								placeholder: 'Select record type',
							}}
							menuPosition="relative"
							options={options['show-me']}
							selection={this.state['show-me'].comboboxSelection}
							variant="readonly"
						/>
					</Filter>
				</IconSettings>
			)<commit_msg>Filter: Add error message to example<commit_after>import React from 'react';

import PropTypes from 'prop-types';
import IconSettings from '~/components/icon-settings';

import Filter from '~/components/filter';

import Combobox from '~/components/combobox';

const options = {
	'show-me': [
		{ id: '1', label: 'All Products', value: 'all-products' },
		{ id: '2', label: 'All Wackamoles', value: 'all-Wackamoles' },
	],
};

class Example extends React.Component {
	static displayName = 'FilterExample';

	static propTypes() {
		return {
			align: PropTypes.string,
		};
	}

	state = {
		'show-me': {
			comboboxSelection: [options['show-me'][0]],
			selectedItem: options['show-me'][0],
			isActive: true,
		},
	};

	onChangePredicate = (event, { id }) => {
		const idSuffix = id.split('sample-panel-filtering-')[1];
		this.setState({
			[idSuffix]: {
				...this.state[idSuffix],
				selectedItem: this.state[idSuffix].comboboxSelection,
			},
		});
	};

	onRemove = (event, { id }) => {
		const idSuffix = id.split('sample-panel-filtering-')[1];
		this.setState({
			[idSuffix]: {
				...this.state[idSuffix],
				isActive: false,
			},
		});
	};

	render() {
		return (
			this.state['show-me'].isActive && (
				<IconSettings iconPath="/assets/icons">
					<div>
						<Filter
							errorLabel="Error Message"
							align={this.props.align}
							id="sample-panel-filtering-show-me"
							isError
							onChange={this.onChangePredicate}
							onRemove={this.onRemove}
							property="Show Me"
							predicate={this.state['show-me'].selectedItem.label}
						>
							<Combobox
								events={{
									onSelect: (event, data) => {
										this.setState({
											'show-me': {
												...this.state['show-me'],
												comboboxSelection: data.selection,
											},
										});
									},
								}}
								labels={{
									label: 'Show Me',
									placeholder: 'Select record type',
								}}
								menuPosition="relative"
								options={options['show-me']}
								selection={this.state['show-me'].comboboxSelection}
								variant="readonly"
							/>
						</Filter>
						<p
							id="sample-panel-filtering-show-me-error"
							className="slds-text-color_error slds-m-top_xx-small"
						>
							Error Message
						</p>
					</div>
				</IconSettings>
			)
{'fraction_non_alphanumeric': 0.1693121693121693, 'fraction_numerical': 0.0027605244996549345, 'mean_word_length': 2.529220779220779, 'pattern_counts': {'":': 0, '<': 17, '<?xml version=': 0, '>': 23, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3818992', 'n_tokens_mistral': 1986, 'n_tokens_neox': 1421, 'n_words': 250}