@wordpress/components 19.8.3 → 19.10.0

package/build/box-control/visualizer.js

@@ -1,165 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = BoxControlVisualizer;
-
-var _element = require("@wordpress/element");
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-var _boxControlVisualizerStyles = require("./styles/box-control-visualizer-styles");
-
-var _utils = require("./utils");
-
-/**
- * WordPress dependencies
- */
-
-/**
- * Internal dependencies
- */
-function BoxControlVisualizer(_ref) {
-  let {
-    children,
-    showValues = _utils.DEFAULT_VISUALIZER_VALUES,
-    values: valuesProp = _utils.DEFAULT_VALUES,
-    ...props
-  } = _ref;
-  const isPositionAbsolute = !children;
-  return (0, _element.createElement)(_boxControlVisualizerStyles.Container, (0, _extends2.default)({}, props, {
-    isPositionAbsolute: isPositionAbsolute,
-    "aria-hidden": "true"
-  }), (0, _element.createElement)(Sides, {
-    showValues: showValues,
-    values: valuesProp
-  }), children);
-}
-
-function Sides(_ref2) {
-  let {
-    showValues = _utils.DEFAULT_VISUALIZER_VALUES,
-    values
-  } = _ref2;
-  const {
-    top,
-    right,
-    bottom,
-    left
-  } = values;
-  return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(Top, {
-    isVisible: showValues.top,
-    value: top
-  }), (0, _element.createElement)(Right, {
-    isVisible: showValues.right,
-    value: right
-  }), (0, _element.createElement)(Bottom, {
-    isVisible: showValues.bottom,
-    value: bottom
-  }), (0, _element.createElement)(Left, {
-    isVisible: showValues.left,
-    value: left
-  }));
-}
-
-function Top(_ref3) {
-  let {
-    isVisible = false,
-    value
-  } = _ref3;
-  const height = value;
-  const animationProps = useSideAnimation(height);
-  const isActive = animationProps.isActive || isVisible;
-  return (0, _element.createElement)(_boxControlVisualizerStyles.TopView, {
-    isActive: isActive,
-    style: {
-      height
-    }
-  });
-}
-
-function Right(_ref4) {
-  let {
-    isVisible = false,
-    value
-  } = _ref4;
-  const width = value;
-  const animationProps = useSideAnimation(width);
-  const isActive = animationProps.isActive || isVisible;
-  return (0, _element.createElement)(_boxControlVisualizerStyles.RightView, {
-    isActive: isActive,
-    style: {
-      width
-    }
-  });
-}
-
-function Bottom(_ref5) {
-  let {
-    isVisible = false,
-    value
-  } = _ref5;
-  const height = value;
-  const animationProps = useSideAnimation(height);
-  const isActive = animationProps.isActive || isVisible;
-  return (0, _element.createElement)(_boxControlVisualizerStyles.BottomView, {
-    isActive: isActive,
-    style: {
-      height
-    }
-  });
-}
-
-function Left(_ref6) {
-  let {
-    isVisible = false,
-    value
-  } = _ref6;
-  const width = value;
-  const animationProps = useSideAnimation(width);
-  const isActive = animationProps.isActive || isVisible;
-  return (0, _element.createElement)(_boxControlVisualizerStyles.LeftView, {
-    isActive: isActive,
-    style: {
-      width
-    }
-  });
-}
-/**
- * Custom hook that renders the "flash" animation whenever the value changes.
- *
- * @param {string} value Value of (box) side.
- */
-
-
-function useSideAnimation(value) {
-  const [isActive, setIsActive] = (0, _element.useState)(false);
-  const valueRef = (0, _element.useRef)(value);
-  const timeoutRef = (0, _element.useRef)();
-
-  const clearTimer = () => {
-    if (timeoutRef.current) {
-      window.clearTimeout(timeoutRef.current);
-    }
-  };
-
-  (0, _element.useEffect)(() => {
-    if (value !== valueRef.current) {
-      setIsActive(true);
-      valueRef.current = value;
-      clearTimer();
-      timeoutRef.current = setTimeout(() => {
-        setIsActive(false);
-      }, 400);
-    }
-
-    return () => clearTimer();
-  }, [value]);
-  return {
-    isActive
-  };
-}
-//# sourceMappingURL=visualizer.js.map

package/build/box-control/visualizer.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["@wordpress/components/src/box-control/visualizer.js"],"names":["BoxControlVisualizer","children","showValues","DEFAULT_VISUALIZER_VALUES","values","valuesProp","DEFAULT_VALUES","props","isPositionAbsolute","Sides","top","right","bottom","left","Top","isVisible","value","height","animationProps","useSideAnimation","isActive","Right","width","Bottom","Left","setIsActive","valueRef","timeoutRef","clearTimer","current","window","clearTimeout","setTimeout"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useRef, useEffect, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport {\n\tContainer,\n\tTopView,\n\tRightView,\n\tBottomView,\n\tLeftView,\n} from './styles/box-control-visualizer-styles';\nimport { DEFAULT_VALUES, DEFAULT_VISUALIZER_VALUES } from './utils';\n\nexport default function BoxControlVisualizer( {\n\tchildren,\n\tshowValues = DEFAULT_VISUALIZER_VALUES,\n\tvalues: valuesProp = DEFAULT_VALUES,\n\t...props\n} ) {\n\tconst isPositionAbsolute = ! children;\n\treturn (\n\t\t<Container\n\t\t\t{ ...props }\n\t\t\tisPositionAbsolute={ isPositionAbsolute }\n\t\t\taria-hidden=\"true\"\n\t\t>\n\t\t\t<Sides showValues={ showValues } values={ valuesProp } />\n\t\t\t{ children }\n\t\t</Container>\n\t);\n}\n\nfunction Sides( { showValues = DEFAULT_VISUALIZER_VALUES, values } ) {\n\tconst { top, right, bottom, left } = values;\n\n\treturn (\n\t\t<>\n\t\t\t<Top isVisible={ showValues.top } value={ top } />\n\t\t\t<Right isVisible={ showValues.right } value={ right } />\n\t\t\t<Bottom isVisible={ showValues.bottom } value={ bottom } />\n\t\t\t<Left isVisible={ showValues.left } value={ left } />\n\t\t</>\n\t);\n}\n\nfunction Top( { isVisible = false, value } ) {\n\tconst height = value;\n\tconst animationProps = useSideAnimation( height );\n\tconst isActive = animationProps.isActive || isVisible;\n\n\treturn <TopView isActive={ isActive } style={ { height } } />;\n}\n\nfunction Right( { isVisible = false, value } ) {\n\tconst width = value;\n\tconst animationProps = useSideAnimation( width );\n\tconst isActive = animationProps.isActive || isVisible;\n\n\treturn <RightView isActive={ isActive } style={ { width } } />;\n}\n\nfunction Bottom( { isVisible = false, value } ) {\n\tconst height = value;\n\tconst animationProps = useSideAnimation( height );\n\tconst isActive = animationProps.isActive || isVisible;\n\n\treturn <BottomView isActive={ isActive } style={ { height } } />;\n}\n\nfunction Left( { isVisible = false, value } ) {\n\tconst width = value;\n\tconst animationProps = useSideAnimation( width );\n\tconst isActive = animationProps.isActive || isVisible;\n\n\treturn <LeftView isActive={ isActive } style={ { width } } />;\n}\n\n/**\n * Custom hook that renders the \"flash\" animation whenever the value changes.\n *\n * @param {string} value Value of (box) side.\n */\nfunction useSideAnimation( value ) {\n\tconst [ isActive, setIsActive ] = useState( false );\n\tconst valueRef = useRef( value );\n\tconst timeoutRef = useRef();\n\n\tconst clearTimer = () => {\n\t\tif ( timeoutRef.current ) {\n\t\t\twindow.clearTimeout( timeoutRef.current );\n\t\t}\n\t};\n\n\tuseEffect( () => {\n\t\tif ( value !== valueRef.current ) {\n\t\t\tsetIsActive( true );\n\t\t\tvalueRef.current = value;\n\n\t\t\tclearTimer();\n\n\t\t\ttimeoutRef.current = setTimeout( () => {\n\t\t\t\tsetIsActive( false );\n\t\t\t}, 400 );\n\t\t}\n\n\t\treturn () => clearTimer();\n\t}, [ value ] );\n\n\treturn {\n\t\tisActive,\n\t};\n}\n"]}

package/build-module/box-control/visualizer.js

@@ -1,154 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import { createElement, Fragment } from "@wordpress/element";
-
-/**
- * WordPress dependencies
- */
-import { useRef, useEffect, useState } from '@wordpress/element';
-/**
- * Internal dependencies
- */
-
-import { Container, TopView, RightView, BottomView, LeftView } from './styles/box-control-visualizer-styles';
-import { DEFAULT_VALUES, DEFAULT_VISUALIZER_VALUES } from './utils';
-export default function BoxControlVisualizer(_ref) {
-  let {
-    children,
-    showValues = DEFAULT_VISUALIZER_VALUES,
-    values: valuesProp = DEFAULT_VALUES,
-    ...props
-  } = _ref;
-  const isPositionAbsolute = !children;
-  return createElement(Container, _extends({}, props, {
-    isPositionAbsolute: isPositionAbsolute,
-    "aria-hidden": "true"
-  }), createElement(Sides, {
-    showValues: showValues,
-    values: valuesProp
-  }), children);
-}
-
-function Sides(_ref2) {
-  let {
-    showValues = DEFAULT_VISUALIZER_VALUES,
-    values
-  } = _ref2;
-  const {
-    top,
-    right,
-    bottom,
-    left
-  } = values;
-  return createElement(Fragment, null, createElement(Top, {
-    isVisible: showValues.top,
-    value: top
-  }), createElement(Right, {
-    isVisible: showValues.right,
-    value: right
-  }), createElement(Bottom, {
-    isVisible: showValues.bottom,
-    value: bottom
-  }), createElement(Left, {
-    isVisible: showValues.left,
-    value: left
-  }));
-}
-
-function Top(_ref3) {
-  let {
-    isVisible = false,
-    value
-  } = _ref3;
-  const height = value;
-  const animationProps = useSideAnimation(height);
-  const isActive = animationProps.isActive || isVisible;
-  return createElement(TopView, {
-    isActive: isActive,
-    style: {
-      height
-    }
-  });
-}
-
-function Right(_ref4) {
-  let {
-    isVisible = false,
-    value
-  } = _ref4;
-  const width = value;
-  const animationProps = useSideAnimation(width);
-  const isActive = animationProps.isActive || isVisible;
-  return createElement(RightView, {
-    isActive: isActive,
-    style: {
-      width
-    }
-  });
-}
-
-function Bottom(_ref5) {
-  let {
-    isVisible = false,
-    value
-  } = _ref5;
-  const height = value;
-  const animationProps = useSideAnimation(height);
-  const isActive = animationProps.isActive || isVisible;
-  return createElement(BottomView, {
-    isActive: isActive,
-    style: {
-      height
-    }
-  });
-}
-
-function Left(_ref6) {
-  let {
-    isVisible = false,
-    value
-  } = _ref6;
-  const width = value;
-  const animationProps = useSideAnimation(width);
-  const isActive = animationProps.isActive || isVisible;
-  return createElement(LeftView, {
-    isActive: isActive,
-    style: {
-      width
-    }
-  });
-}
-/**
- * Custom hook that renders the "flash" animation whenever the value changes.
- *
- * @param {string} value Value of (box) side.
- */
-
-
-function useSideAnimation(value) {
-  const [isActive, setIsActive] = useState(false);
-  const valueRef = useRef(value);
-  const timeoutRef = useRef();
-
-  const clearTimer = () => {
-    if (timeoutRef.current) {
-      window.clearTimeout(timeoutRef.current);
-    }
-  };
-
-  useEffect(() => {
-    if (value !== valueRef.current) {
-      setIsActive(true);
-      valueRef.current = value;
-      clearTimer();
-      timeoutRef.current = setTimeout(() => {
-        setIsActive(false);
-      }, 400);
-    }
-
-    return () => clearTimer();
-  }, [value]);
-  return {
-    isActive
-  };
-}
-//# sourceMappingURL=visualizer.js.map

package/build-module/box-control/visualizer.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["@wordpress/components/src/box-control/visualizer.js"],"names":["useRef","useEffect","useState","Container","TopView","RightView","BottomView","LeftView","DEFAULT_VALUES","DEFAULT_VISUALIZER_VALUES","BoxControlVisualizer","children","showValues","values","valuesProp","props","isPositionAbsolute","Sides","top","right","bottom","left","Top","isVisible","value","height","animationProps","useSideAnimation","isActive","Right","width","Bottom","Left","setIsActive","valueRef","timeoutRef","clearTimer","current","window","clearTimeout","setTimeout"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useRef, useEffect, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport {\n\tContainer,\n\tTopView,\n\tRightView,\n\tBottomView,\n\tLeftView,\n} from './styles/box-control-visualizer-styles';\nimport { DEFAULT_VALUES, DEFAULT_VISUALIZER_VALUES } from './utils';\n\nexport default function BoxControlVisualizer( {\n\tchildren,\n\tshowValues = DEFAULT_VISUALIZER_VALUES,\n\tvalues: valuesProp = DEFAULT_VALUES,\n\t...props\n} ) {\n\tconst isPositionAbsolute = ! children;\n\treturn (\n\t\t<Container\n\t\t\t{ ...props }\n\t\t\tisPositionAbsolute={ isPositionAbsolute }\n\t\t\taria-hidden=\"true\"\n\t\t>\n\t\t\t<Sides showValues={ showValues } values={ valuesProp } />\n\t\t\t{ children }\n\t\t</Container>\n\t);\n}\n\nfunction Sides( { showValues = DEFAULT_VISUALIZER_VALUES, values } ) {\n\tconst { top, right, bottom, left } = values;\n\n\treturn (\n\t\t<>\n\t\t\t<Top isVisible={ showValues.top } value={ top } />\n\t\t\t<Right isVisible={ showValues.right } value={ right } />\n\t\t\t<Bottom isVisible={ showValues.bottom } value={ bottom } />\n\t\t\t<Left isVisible={ showValues.left } value={ left } />\n\t\t</>\n\t);\n}\n\nfunction Top( { isVisible = false, value } ) {\n\tconst height = value;\n\tconst animationProps = useSideAnimation( height );\n\tconst isActive = animationProps.isActive || isVisible;\n\n\treturn <TopView isActive={ isActive } style={ { height } } />;\n}\n\nfunction Right( { isVisible = false, value } ) {\n\tconst width = value;\n\tconst animationProps = useSideAnimation( width );\n\tconst isActive = animationProps.isActive || isVisible;\n\n\treturn <RightView isActive={ isActive } style={ { width } } />;\n}\n\nfunction Bottom( { isVisible = false, value } ) {\n\tconst height = value;\n\tconst animationProps = useSideAnimation( height );\n\tconst isActive = animationProps.isActive || isVisible;\n\n\treturn <BottomView isActive={ isActive } style={ { height } } />;\n}\n\nfunction Left( { isVisible = false, value } ) {\n\tconst width = value;\n\tconst animationProps = useSideAnimation( width );\n\tconst isActive = animationProps.isActive || isVisible;\n\n\treturn <LeftView isActive={ isActive } style={ { width } } />;\n}\n\n/**\n * Custom hook that renders the \"flash\" animation whenever the value changes.\n *\n * @param {string} value Value of (box) side.\n */\nfunction useSideAnimation( value ) {\n\tconst [ isActive, setIsActive ] = useState( false );\n\tconst valueRef = useRef( value );\n\tconst timeoutRef = useRef();\n\n\tconst clearTimer = () => {\n\t\tif ( timeoutRef.current ) {\n\t\t\twindow.clearTimeout( timeoutRef.current );\n\t\t}\n\t};\n\n\tuseEffect( () => {\n\t\tif ( value !== valueRef.current ) {\n\t\t\tsetIsActive( true );\n\t\t\tvalueRef.current = value;\n\n\t\t\tclearTimer();\n\n\t\t\ttimeoutRef.current = setTimeout( () => {\n\t\t\t\tsetIsActive( false );\n\t\t\t}, 400 );\n\t\t}\n\n\t\treturn () => clearTimer();\n\t}, [ value ] );\n\n\treturn {\n\t\tisActive,\n\t};\n}\n"]}

package/src/box-control/visualizer.js

@@ -1,116 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useRef, useEffect, useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import {
-	Container,
-	TopView,
-	RightView,
-	BottomView,
-	LeftView,
-} from './styles/box-control-visualizer-styles';
-import { DEFAULT_VALUES, DEFAULT_VISUALIZER_VALUES } from './utils';
-
-export default function BoxControlVisualizer( {
-	children,
-	showValues = DEFAULT_VISUALIZER_VALUES,
-	values: valuesProp = DEFAULT_VALUES,
-	...props
-} ) {
-	const isPositionAbsolute = ! children;
-	return (
-		<Container
-			{ ...props }
-			isPositionAbsolute={ isPositionAbsolute }
-			aria-hidden="true"
-		>
-			<Sides showValues={ showValues } values={ valuesProp } />
-			{ children }
-		</Container>
-	);
-}
-
-function Sides( { showValues = DEFAULT_VISUALIZER_VALUES, values } ) {
-	const { top, right, bottom, left } = values;
-
-	return (
-		<>
-			<Top isVisible={ showValues.top } value={ top } />
-			<Right isVisible={ showValues.right } value={ right } />
-			<Bottom isVisible={ showValues.bottom } value={ bottom } />
-			<Left isVisible={ showValues.left } value={ left } />
-		</>
-	);
-}
-
-function Top( { isVisible = false, value } ) {
-	const height = value;
-	const animationProps = useSideAnimation( height );
-	const isActive = animationProps.isActive || isVisible;
-
-	return <TopView isActive={ isActive } style={ { height } } />;
-}
-
-function Right( { isVisible = false, value } ) {
-	const width = value;
-	const animationProps = useSideAnimation( width );
-	const isActive = animationProps.isActive || isVisible;
-
-	return <RightView isActive={ isActive } style={ { width } } />;
-}
-
-function Bottom( { isVisible = false, value } ) {
-	const height = value;
-	const animationProps = useSideAnimation( height );
-	const isActive = animationProps.isActive || isVisible;
-
-	return <BottomView isActive={ isActive } style={ { height } } />;
-}
-
-function Left( { isVisible = false, value } ) {
-	const width = value;
-	const animationProps = useSideAnimation( width );
-	const isActive = animationProps.isActive || isVisible;
-
-	return <LeftView isActive={ isActive } style={ { width } } />;
-}
-
-/**
- * Custom hook that renders the "flash" animation whenever the value changes.
- *
- * @param {string} value Value of (box) side.
- */
-function useSideAnimation( value ) {
-	const [ isActive, setIsActive ] = useState( false );
-	const valueRef = useRef( value );
-	const timeoutRef = useRef();
-
-	const clearTimer = () => {
-		if ( timeoutRef.current ) {
-			window.clearTimeout( timeoutRef.current );
-		}
-	};
-
-	useEffect( () => {
-		if ( value !== valueRef.current ) {
-			setIsActive( true );
-			valueRef.current = value;
-
-			clearTimer();
-
-			timeoutRef.current = setTimeout( () => {
-				setIsActive( false );
-			}, 400 );
-		}
-
-		return () => clearTimer();
-	}, [ value ] );
-
-	return {
-		isActive,
-	};
-}

package/src/input-control/stories/index.js

@@ -1,71 +0,0 @@
-/**
- * External dependencies
- */
-import { boolean, select, text } from '@storybook/addon-knobs';
-
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import InputControl from '../';
-
-export default {
-	title: 'Components (Experimental)/InputControl',
-	component: InputControl,
-	parameters: {
-		knobs: { disable: false },
-	},
-};
-
-function Example() {
-	const [ value, setValue ] = useState( '' );
-
-	const props = {
-		disabled: boolean( 'disabled', false ),
-		hideLabelFromVision: boolean( 'hideLabelFromVision', false ),
-		isPressEnterToChange: boolean( 'isPressEnterToChange', false ),
-		label: text( 'label', 'Value' ),
-		labelPosition: select(
-			'labelPosition',
-			{
-				top: 'top',
-				side: 'side',
-				bottom: 'bottom',
-			},
-			'top'
-		),
-		placeholder: text( 'placeholder', 'Placeholder' ),
-		size: select(
-			'size',
-			{
-				default: 'default',
-				small: 'small',
-				'__unstable-large': '__unstable-large',
-			},
-			'default'
-		),
-		suffix: text( 'suffix', '' ),
-		prefix: text( 'prefix', '' ),
-	};
-
-	const suffixMarkup = props.suffix ? <div>{ props.suffix }</div> : null;
-	const prefixMarkup = props.prefix ? <div>{ props.prefix }</div> : null;
-
-	return (
-		<InputControl
-			{ ...props }
-			onChange={ ( v ) => setValue( v ) }
-			prefix={ prefixMarkup }
-			suffix={ suffixMarkup }
-			value={ value }
-		/>
-	);
-}
-
-export const _default = () => {
-	return <Example />;
-};

package/src/select-control/stories/index.js

@@ -1,104 +0,0 @@
-/**
- * External dependencies
- */
-import { boolean, object, select, text } from '@storybook/addon-knobs';
-
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import SelectControl from '..';
-
-export default {
-	title: 'Components/SelectControl',
-	component: SelectControl,
-	parameters: {
-		knobs: { disable: false },
-	},
-};
-
-const SelectControlWithState = ( props ) => {
-	const [ selection, setSelection ] = useState();
-
-	return (
-		<SelectControl
-			{ ...props }
-			value={ selection }
-			onChange={ setSelection }
-		/>
-	);
-};
-
-export const _default = () => {
-	const props = {
-		disabled: boolean( 'disabled', false ),
-		help: text( 'help', 'Help text to explain the select control.' ),
-		hideLabelFromVision: boolean( 'hideLabelFromVision', false ),
-		label: text( 'label', 'Value' ),
-		labelPosition: select(
-			'labelPosition',
-			{
-				top: 'top',
-				side: 'side',
-				bottom: 'bottom',
-			},
-			'top'
-		),
-		multiple: boolean( 'multiple', false ),
-		options: object( 'Options', [
-			{ value: null, label: 'Select an Option', disabled: true },
-			{ value: 'a', label: 'Option A' },
-			{ value: 'b', label: 'Option B' },
-			{ value: 'c', label: 'Option C' },
-		] ),
-		size: select(
-			'size',
-			{
-				default: 'default',
-				small: 'small',
-				'__unstable-large': '__unstable-large',
-			},
-			'default'
-		),
-	};
-
-	return <SelectControlWithState { ...props } />;
-};
-
-export const withCustomChildren = () => {
-	return (
-		<SelectControlWithState label="Value">
-			<option value="option-1">Option 1</option>
-			<option value="option-2" disabled>
-				Option 2 - Disabled
-			</option>
-			<option value="option-3">Option 3</option>
-			<optgroup label="Option Group 1">
-				<option value="option-group-1-option-1">
-					Option Group 1 - Option 1
-				</option>
-				<option value="option-group-1-option-2" disabled>
-					Option Group 1 - Option 2 - Disabled
-				</option>
-				<option value="option-group-1-option-3">
-					Option Group 1 - Option 3
-				</option>
-			</optgroup>
-			<optgroup label="Option Group 2">
-				<option value="option-group-2-option-1">
-					Option Group 2 - Option 1
-				</option>
-				<option value="option-group-2-option-2" disabled>
-					Option Group 2 - Option 2 - Disabled
-				</option>
-				<option value="option-group-2-option-3">
-					Option Group 2 - Option 3
-				</option>
-			</optgroup>
-		</SelectControlWithState>
-	);
-};