https://duan.edu.ua/wp-content/plugins/editor-block-outline/controls/line-style-option.js?ver=1788769085

1function outlineStyleOption(props) {
2	const { Button, ButtonGroup } = this.components;
3	const { __ } = this.i18n;
4
5	let currentValue = props.metaValue;
6	const outlineStyleValue = props.outlineStyleState;
7
8	if (currentValue === undefined) {
9		currentValue = 'hover';
10	}
11
12	// if state value is set then use it. This will disaable control UI flickering
13	if (outlineStyleValue !== undefined && outlineStyleValue !== '') {
14		currentValue = outlineStyleValue;
15	}
16
17	const outlineStyleTypesOptions = [
18		{ key: 'solid', name: __('Solid') },
19		{ key: 'dashed', name: __('Dashed') },
20		{ key: 'dotted', name: __('Dotted') },
21	];
22
23	return this.el(
24		ButtonGroup,
25		null,
26		outlineStyleTypesOptions.map(({ name, key }) => {
27			const elProperties = {
28				key: key,
29				variant: 'secondary',
30				isTertiary: currentValue !== key,
31				isPrimary: currentValue === key,
32				isPressed: currentValue === key,
33				onClick: () => {
34					// Update state to update control ui
35					props.setState({
36						outlineStyleState: key,
37					});
38
39					// Update Editor UI
40					const root = getDocumentRoot();
41					root.style.setProperty('--outline-style', key);
42
43					// update meta
44					this.debounce(() => {
45						props.setMetaValue(key);
46					})();
47				},
48			};
49
50			return this.el(Button, elProperties, name);
51		})
52	);
53}