Migrate style-selector to custom select input

src/js/components/container.jsx

@@ -369,8 +369,7 @@ const BibWebContainer = props => {
 		}
 	}, [messages]);
 
-	const handleCitationStyleChanged = useCallback(async ev => {
-		const newCitationStyle = ev.value;
+	const handleCitationStyleChanged = useCallback(async newCitationStyle => {
 		setMessages([]);
 		setItemUnderReview(null);
 		if(newCitationStyle === 'install') {

src/js/components/style-selector.jsx

@@ -1,40 +1,45 @@
-import React from 'react';
+import React, { useCallback, memo } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import { default as Select } from 'react-select';
+
+import Select, { SelectDivider, SelectOption } from './ui/select';
 import { citationStylesCount } from '../../../data/citation-styles-data.json';
 
-class StyleSelector extends React.Component {
-	render() {
-		return (
-			<div className={ cx('style-selector', this.props.className ) }>
+const StyleSelector = ({ className, citationStyle, citationStyles, onCitationStyleChanged }) => {
+	const handleMoreStylesTrigger = useCallback(
+		() => onCitationStyleChanged('install'), [onCitationStyleChanged]
+	);
+
+	return (
+			<div className={ cx('style-selector', className ) }>
 				<Select
 					clearable={ false }
 					searchable={ false}
-					value={ this.props.citationStyle }
+					value={ citationStyle }
 					options={ [
-						...this.props.citationStyles.map(cs => ({
+						...citationStyles.map(cs => ({
 							value: cs.name,
 							label: cs.title
 						})),
-						{
-							value: 'install',
-							label: `${(Math.floor(citationStylesCount / 100) * 100).toLocaleString()}+ other styles available…`
-						}
 					] }
-					onChange={ this.props.onCitationStyleChanged }
-				/>
+					onChange={ onCitationStyleChanged }
+				>
+					<SelectDivider />
+					<SelectOption
+						onTrigger={ handleMoreStylesTrigger }
+						option={ { label: `${(Math.floor(citationStylesCount / 100) * 100).toLocaleString()}+ other styles available…`, value: 'install' } }
+						/>
+				</Select>
 			</div>
 		);
-	}
+}
 
-	static propTypes = {
-		className: PropTypes.string,
-		citationStyle: PropTypes.string,
-		citationStyles: PropTypes.array,
-		onCitationStyleChanged: PropTypes.func
-	}
+StyleSelector.propTypes = {
+	className: PropTypes.string,
+	citationStyle: PropTypes.string,
+	citationStyles: PropTypes.array,
+	onCitationStyleChanged: PropTypes.func
 }
 
 
-export default StyleSelector;
+export default memo(StyleSelector);

src/scss/components/_bibliography-section.scss

@@ -121,8 +121,8 @@
 	.style-selector {
 		text-align: left;
 
-		.Select {
-			.Select-control {
+		.select-component {
+			.select-control {
 				border-color: transparent;
 				background: $style-selector-bg;
 				color: $style-selector-color;
@@ -140,7 +140,7 @@
 			}
 
 			&.is-focused {
-				.Select-control {
+				.select-control {
 					box-shadow: 0 0 0 2px $secondary;
 					outline: none;
 
@@ -150,38 +150,38 @@
 				}
 			}
 
-			&.Select--single {
-				.Select-value-label {
+			&.single {
+				.select-value-label {
 					overflow: inherit;
 					text-overflow: inherit;
 					white-space: inherit;
 				}
 			}
 
-			.Select-value {
+			.select-value {
 				position: static;
 				padding: 0;
 			}
 
-			.Select-input {
+			.select-input {
 				position: absolute;
 			}
 
-			.Select-arrow-zone {
+			.select-arrow-container {
 				margin-right: 0;
 			}
 
-			.Select-arrow {
+			.select-arrow {
 				background: image-url("bg-icons/16/chevron-11-down-light.svg");
 			}
 
-			.Select-menu-outer {
+			.select-menu-outer {
 				padding: $space-xs 0;
 				left: 0;
 				right: 0;
 			}
 
-			.Select-option {
+			.select-option:not(.select-divider) {
 				padding: $space-min $input-btn-padding-x-lg;
 
 				&:last-child {