@gravity-ui/page-constructor 6.3.2-alpha.6 → 6.3.2-alpha.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/cjs/editor-v2/components/DynamicForm/FieldBase/FieldBase.css +0 -1
- package/build/cjs/editor-v2/components/Tabs/Tabs.css +23 -2
- package/build/cjs/editor-v2/containers/BlockConfigForm/BlockConfigForm.css +0 -1
- package/build/cjs/editor-v2/containers/BlocksList/BlocksList.css +2 -1
- package/build/cjs/editor-v2/containers/GlobalConfig/GlobalConfig.css +0 -1
- package/build/cjs/editor-v2/containers/ViewSwitches/ViewSwitches.js +3 -3
- package/build/cjs/editor-v2/containers/ViewSwitches/ViewSwitches.js.map +1 -1
- package/build/esm/editor-v2/components/DynamicForm/FieldBase/FieldBase.css +0 -1
- package/build/esm/editor-v2/components/Tabs/Tabs.css +23 -2
- package/build/esm/editor-v2/containers/BlockConfigForm/BlockConfigForm.css +0 -1
- package/build/esm/editor-v2/containers/BlocksList/BlocksList.css +2 -1
- package/build/esm/editor-v2/containers/GlobalConfig/GlobalConfig.css +0 -1
- package/build/esm/editor-v2/containers/ViewSwitches/ViewSwitches.js +4 -4
- package/build/esm/editor-v2/containers/ViewSwitches/ViewSwitches.js.map +1 -1
- package/package.json +1 -1
|
@@ -3,12 +3,16 @@
|
|
|
3
3
|
width: 100%;
|
|
4
4
|
display: flex;
|
|
5
5
|
flex-direction: column;
|
|
6
|
+
/* Make sure any nested tabs component also has proper overflow behavior */
|
|
6
7
|
}
|
|
7
8
|
.pceditor-tabs__item {
|
|
8
9
|
color: var(--g-color-text-hint);
|
|
9
10
|
font-weight: 500;
|
|
10
11
|
letter-spacing: 0.5px;
|
|
11
12
|
cursor: pointer;
|
|
13
|
+
font-size: var(--g-text-code-inline-1-font-size);
|
|
14
|
+
line-height: var(--g-text-code-inline-2-line-height);
|
|
15
|
+
align-items: center;
|
|
12
16
|
}
|
|
13
17
|
.pceditor-tabs__item_active {
|
|
14
18
|
pointer-events: none;
|
|
@@ -19,13 +23,30 @@
|
|
|
19
23
|
border-bottom: 1px solid var(--g-color-line-generic);
|
|
20
24
|
display: inline-flex;
|
|
21
25
|
flex-direction: row;
|
|
22
|
-
padding:
|
|
26
|
+
padding: 12px 4px;
|
|
23
27
|
flex: 0 0 auto;
|
|
24
28
|
box-sizing: border-box;
|
|
25
29
|
overflow-x: auto;
|
|
30
|
+
position: sticky;
|
|
31
|
+
top: 0;
|
|
32
|
+
background-color: var(--g-color-base-background);
|
|
33
|
+
/* This ensures the background is visible when sticky */
|
|
34
|
+
z-index: 2;
|
|
35
|
+
/* Higher z-index for parent tabs-wrapper */
|
|
36
|
+
}
|
|
37
|
+
.pceditor-tabs .pceditor-tabs {
|
|
38
|
+
overflow: visible;
|
|
39
|
+
/* Ensure nested tabs-wrapper elements are also sticky but positioned below parent tabs-wrapper */
|
|
40
|
+
/* This selector specifically targets tabs-wrapper elements inside a nested tabs component */
|
|
41
|
+
}
|
|
42
|
+
.pceditor-tabs .pceditor-tabs .pceditor-tabs__tabs-wrapper {
|
|
43
|
+
position: sticky;
|
|
44
|
+
top: 48.5px;
|
|
45
|
+
/* Position below parent tabs-wrapper */
|
|
46
|
+
z-index: 1;
|
|
47
|
+
background-color: var(--g-color-base-background);
|
|
26
48
|
}
|
|
27
49
|
.pceditor-tabs__body {
|
|
28
50
|
flex: 1;
|
|
29
51
|
min-height: 1px;
|
|
30
|
-
overflow-y: auto;
|
|
31
52
|
}
|
|
@@ -15,6 +15,7 @@
|
|
|
15
15
|
justify-content: space-between;
|
|
16
16
|
text-align: center;
|
|
17
17
|
gap: 4px;
|
|
18
|
+
max-width: 192px;
|
|
18
19
|
}
|
|
19
20
|
.pceditor-blocks-list__card:active {
|
|
20
21
|
background-color: var(--g-color-base-generic-hover);
|
|
@@ -44,7 +45,7 @@
|
|
|
44
45
|
}
|
|
45
46
|
.pceditor-blocks-list__group-items {
|
|
46
47
|
display: grid;
|
|
47
|
-
grid-template-columns:
|
|
48
|
+
grid-template-columns: repeat(auto-fill, minmax(98px, 1fr));
|
|
48
49
|
gap: 8px;
|
|
49
50
|
}
|
|
50
51
|
.pceditor-blocks-list__search-icon {
|
|
@@ -13,7 +13,7 @@ const b = (0, cn_1.editorCn)('view-switches');
|
|
|
13
13
|
* Available device viewport options
|
|
14
14
|
* - Desktop: 100% width
|
|
15
15
|
* - Tablet: 768px width
|
|
16
|
-
* - Mobile:
|
|
16
|
+
* - Mobile: 375px width
|
|
17
17
|
*/
|
|
18
18
|
const DEVICE_OPTIONS = [
|
|
19
19
|
{
|
|
@@ -28,7 +28,7 @@ const DEVICE_OPTIONS = [
|
|
|
28
28
|
},
|
|
29
29
|
{
|
|
30
30
|
label: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { width: 14, data: icons_1.Smartphone }),
|
|
31
|
-
value: '
|
|
31
|
+
value: '375px',
|
|
32
32
|
ariaLabel: 'Mobile view',
|
|
33
33
|
},
|
|
34
34
|
];
|
|
@@ -48,7 +48,7 @@ const ViewSwitches = () => {
|
|
|
48
48
|
setZoom(newZoom);
|
|
49
49
|
}
|
|
50
50
|
}, [setZoom]);
|
|
51
|
-
return ((0, jsx_runtime_1.jsxs)("div", { className: b(), role: "toolbar", "aria-label": "View controls", children: [(0, jsx_runtime_1.jsx)(uikit_1.SegmentedRadioGroup, { value: deviceWidth, onUpdate: setDeviceWidth, "aria-label": "Device viewport selector", children: DEVICE_OPTIONS.map(({ value, label, ariaLabel }) => ((0, jsx_runtime_1.jsx)(uikit_1.SegmentedRadioGroup.Option, { value: value, "aria-label": ariaLabel, children: label }, value))) }), (0, jsx_runtime_1.jsx)(uikit_1.Button, { view: "flat", onClick: togglePreviewMode, "aria-label": "Switch to preview mode", title: "Switch to preview mode", children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.
|
|
51
|
+
return ((0, jsx_runtime_1.jsxs)("div", { className: b(), role: "toolbar", "aria-label": "View controls", children: [(0, jsx_runtime_1.jsx)(uikit_1.SegmentedRadioGroup, { value: deviceWidth, onUpdate: setDeviceWidth, "aria-label": "Device viewport selector", children: DEVICE_OPTIONS.map(({ value, label, ariaLabel }) => ((0, jsx_runtime_1.jsx)(uikit_1.SegmentedRadioGroup.Option, { value: value, "aria-label": ariaLabel, children: label }, value))) }), (0, jsx_runtime_1.jsx)(uikit_1.Button, { view: "flat", onClick: togglePreviewMode, "aria-label": "Switch to preview mode", title: "Switch to preview mode", children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.SquareDashed }) }), (0, jsx_runtime_1.jsxs)("div", { className: b('zoom'), role: "group", "aria-label": "Zoom controls", children: [(0, jsx_runtime_1.jsx)(uikit_1.Button, { view: "flat", onClick: decreaseZoom, "aria-label": "Decrease zoom", disabled: zoom <= Math.min(...constants_1.ZOOM_STEPS), children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.Minus }) }), (0, jsx_runtime_1.jsx)(uikit_1.Select, { className: b('zoom-select'), multiple: false, value: currentZoomValue, options: zoomOptions, onUpdate: handleZoomUpdate, "aria-label": "Select zoom level", width: "max" }), (0, jsx_runtime_1.jsx)(uikit_1.Button, { view: "flat", onClick: increaseZoom, "aria-label": "Increase zoom", disabled: zoom >= Math.max(...constants_1.ZOOM_STEPS), children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.Plus }) })] })] }));
|
|
52
52
|
};
|
|
53
53
|
exports.default = React.memo(ViewSwitches);
|
|
54
54
|
//# sourceMappingURL=ViewSwitches.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ViewSwitches.js","sourceRoot":"../../../../../src","sources":["editor-v2/containers/ViewSwitches/ViewSwitches.tsx"],"names":[],"mappings":";;;;AAAA,qDAA+B;AAC/B,
|
|
1
|
+
{"version":3,"file":"ViewSwitches.js","sourceRoot":"../../../../../src","sources":["editor-v2/containers/ViewSwitches/ViewSwitches.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport {Display, Minus, Plus, Smartphone, SquareDashed} from '@gravity-ui/icons';\nimport {Button, Icon, SegmentedRadioGroup, Select} from '@gravity-ui/uikit';\n\nimport {ZOOM_STEPS} from '../../constants';\nimport {useMainEditorStore} from '../../hooks/useMainEditorStore';\nimport {editorCn} from '../../utils/cn';\n\nimport './ViewSwitches.scss';\n\nconst b = editorCn('view-switches');\n\n/**\n * Device option type definition\n */\ninterface DeviceOption {\n /** React node to display as the option label */\n label: React.ReactNode;\n /** Device width value (e.g., '100%', '768px') */\n value: string;\n /** Descriptive name for accessibility */\n ariaLabel: string;\n}\n\n/**\n * Available device viewport options\n * - Desktop: 100% width\n * - Tablet: 768px width\n * - Mobile: 375px width\n */\nconst DEVICE_OPTIONS: DeviceOption[] = [\n {\n label: <Icon data={Display} />,\n value: '100%',\n ariaLabel: 'Desktop view',\n },\n {\n label: <Icon data={Smartphone} />,\n value: '768px',\n ariaLabel: 'Tablet view',\n },\n {\n label: <Icon width={14} data={Smartphone} />,\n value: '375px',\n ariaLabel: 'Mobile view',\n },\n];\n\nconst ViewSwitches: React.FC = () => {\n const {\n zoom,\n setZoom,\n decreaseZoom,\n increaseZoom,\n deviceWidth,\n setDeviceWidth,\n togglePreviewMode,\n } = useMainEditorStore();\n\n // Memoize zoom options to prevent unnecessary recalculations\n const zoomOptions = React.useMemo(\n () =>\n ZOOM_STEPS.map((step) => ({\n value: String(step),\n content: `${step}%`,\n })),\n [],\n );\n\n // Memoize current zoom value for Select component\n const currentZoomValue = React.useMemo(() => [String(zoom)], [zoom]);\n\n // Create stable callback for zoom updates\n const handleZoomUpdate = React.useCallback(\n (value: string | string[]) => {\n const newZoom = Number(Array.isArray(value) ? value[0] : value);\n if (!isNaN(newZoom) && ZOOM_STEPS.includes(newZoom)) {\n setZoom(newZoom);\n }\n },\n [setZoom],\n );\n\n return (\n <div className={b()} role=\"toolbar\" aria-label=\"View controls\">\n <SegmentedRadioGroup\n value={deviceWidth}\n onUpdate={setDeviceWidth}\n aria-label=\"Device viewport selector\"\n >\n {DEVICE_OPTIONS.map(({value, label, ariaLabel}) => (\n <SegmentedRadioGroup.Option key={value} value={value} aria-label={ariaLabel}>\n {label}\n </SegmentedRadioGroup.Option>\n ))}\n </SegmentedRadioGroup>\n\n <Button\n view=\"flat\"\n onClick={togglePreviewMode}\n aria-label=\"Switch to preview mode\"\n title=\"Switch to preview mode\"\n >\n <Icon data={SquareDashed} />\n </Button>\n\n <div className={b('zoom')} role=\"group\" aria-label=\"Zoom controls\">\n <Button\n view=\"flat\"\n onClick={decreaseZoom}\n aria-label=\"Decrease zoom\"\n disabled={zoom <= Math.min(...ZOOM_STEPS)}\n >\n <Icon data={Minus} />\n </Button>\n\n <Select\n className={b('zoom-select')}\n multiple={false}\n value={currentZoomValue}\n options={zoomOptions}\n onUpdate={handleZoomUpdate}\n aria-label=\"Select zoom level\"\n width=\"max\"\n />\n\n <Button\n view=\"flat\"\n onClick={increaseZoom}\n aria-label=\"Increase zoom\"\n disabled={zoom >= Math.max(...ZOOM_STEPS)}\n >\n <Icon data={Plus} />\n </Button>\n </div>\n </div>\n );\n};\n\nexport default React.memo(ViewSwitches);\n"]}
|
|
@@ -3,12 +3,16 @@
|
|
|
3
3
|
width: 100%;
|
|
4
4
|
display: flex;
|
|
5
5
|
flex-direction: column;
|
|
6
|
+
/* Make sure any nested tabs component also has proper overflow behavior */
|
|
6
7
|
}
|
|
7
8
|
.pceditor-tabs__item {
|
|
8
9
|
color: var(--g-color-text-hint);
|
|
9
10
|
font-weight: 500;
|
|
10
11
|
letter-spacing: 0.5px;
|
|
11
12
|
cursor: pointer;
|
|
13
|
+
font-size: var(--g-text-code-inline-1-font-size);
|
|
14
|
+
line-height: var(--g-text-code-inline-2-line-height);
|
|
15
|
+
align-items: center;
|
|
12
16
|
}
|
|
13
17
|
.pceditor-tabs__item_active {
|
|
14
18
|
pointer-events: none;
|
|
@@ -19,13 +23,30 @@
|
|
|
19
23
|
border-bottom: 1px solid var(--g-color-line-generic);
|
|
20
24
|
display: inline-flex;
|
|
21
25
|
flex-direction: row;
|
|
22
|
-
padding:
|
|
26
|
+
padding: 12px 4px;
|
|
23
27
|
flex: 0 0 auto;
|
|
24
28
|
box-sizing: border-box;
|
|
25
29
|
overflow-x: auto;
|
|
30
|
+
position: sticky;
|
|
31
|
+
top: 0;
|
|
32
|
+
background-color: var(--g-color-base-background);
|
|
33
|
+
/* This ensures the background is visible when sticky */
|
|
34
|
+
z-index: 2;
|
|
35
|
+
/* Higher z-index for parent tabs-wrapper */
|
|
36
|
+
}
|
|
37
|
+
.pceditor-tabs .pceditor-tabs {
|
|
38
|
+
overflow: visible;
|
|
39
|
+
/* Ensure nested tabs-wrapper elements are also sticky but positioned below parent tabs-wrapper */
|
|
40
|
+
/* This selector specifically targets tabs-wrapper elements inside a nested tabs component */
|
|
41
|
+
}
|
|
42
|
+
.pceditor-tabs .pceditor-tabs .pceditor-tabs__tabs-wrapper {
|
|
43
|
+
position: sticky;
|
|
44
|
+
top: 48.5px;
|
|
45
|
+
/* Position below parent tabs-wrapper */
|
|
46
|
+
z-index: 1;
|
|
47
|
+
background-color: var(--g-color-base-background);
|
|
26
48
|
}
|
|
27
49
|
.pceditor-tabs__body {
|
|
28
50
|
flex: 1;
|
|
29
51
|
min-height: 1px;
|
|
30
|
-
overflow-y: auto;
|
|
31
52
|
}
|
|
@@ -15,6 +15,7 @@
|
|
|
15
15
|
justify-content: space-between;
|
|
16
16
|
text-align: center;
|
|
17
17
|
gap: 4px;
|
|
18
|
+
max-width: 192px;
|
|
18
19
|
}
|
|
19
20
|
.pceditor-blocks-list__card:active {
|
|
20
21
|
background-color: var(--g-color-base-generic-hover);
|
|
@@ -44,7 +45,7 @@
|
|
|
44
45
|
}
|
|
45
46
|
.pceditor-blocks-list__group-items {
|
|
46
47
|
display: grid;
|
|
47
|
-
grid-template-columns:
|
|
48
|
+
grid-template-columns: repeat(auto-fill, minmax(98px, 1fr));
|
|
48
49
|
gap: 8px;
|
|
49
50
|
}
|
|
50
51
|
.pceditor-blocks-list__search-icon {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import * as React from 'react';
|
|
3
|
-
import { Display,
|
|
3
|
+
import { Display, Minus, Plus, Smartphone, SquareDashed } from '@gravity-ui/icons';
|
|
4
4
|
import { Button, Icon, SegmentedRadioGroup, Select } from '@gravity-ui/uikit';
|
|
5
5
|
import { ZOOM_STEPS } from "../../constants.js";
|
|
6
6
|
import { useMainEditorStore } from "../../hooks/useMainEditorStore.js";
|
|
@@ -11,7 +11,7 @@ const b = editorCn('view-switches');
|
|
|
11
11
|
* Available device viewport options
|
|
12
12
|
* - Desktop: 100% width
|
|
13
13
|
* - Tablet: 768px width
|
|
14
|
-
* - Mobile:
|
|
14
|
+
* - Mobile: 375px width
|
|
15
15
|
*/
|
|
16
16
|
const DEVICE_OPTIONS = [
|
|
17
17
|
{
|
|
@@ -26,7 +26,7 @@ const DEVICE_OPTIONS = [
|
|
|
26
26
|
},
|
|
27
27
|
{
|
|
28
28
|
label: _jsx(Icon, { width: 14, data: Smartphone }),
|
|
29
|
-
value: '
|
|
29
|
+
value: '375px',
|
|
30
30
|
ariaLabel: 'Mobile view',
|
|
31
31
|
},
|
|
32
32
|
];
|
|
@@ -46,7 +46,7 @@ const ViewSwitches = () => {
|
|
|
46
46
|
setZoom(newZoom);
|
|
47
47
|
}
|
|
48
48
|
}, [setZoom]);
|
|
49
|
-
return (_jsxs("div", { className: b(), role: "toolbar", "aria-label": "View controls", children: [_jsx(SegmentedRadioGroup, { value: deviceWidth, onUpdate: setDeviceWidth, "aria-label": "Device viewport selector", children: DEVICE_OPTIONS.map(({ value, label, ariaLabel }) => (_jsx(SegmentedRadioGroup.Option, { value: value, "aria-label": ariaLabel, children: label }, value))) }), _jsx(Button, { view: "flat", onClick: togglePreviewMode, "aria-label": "Switch to preview mode", title: "Switch to preview mode", children: _jsx(Icon, { data:
|
|
49
|
+
return (_jsxs("div", { className: b(), role: "toolbar", "aria-label": "View controls", children: [_jsx(SegmentedRadioGroup, { value: deviceWidth, onUpdate: setDeviceWidth, "aria-label": "Device viewport selector", children: DEVICE_OPTIONS.map(({ value, label, ariaLabel }) => (_jsx(SegmentedRadioGroup.Option, { value: value, "aria-label": ariaLabel, children: label }, value))) }), _jsx(Button, { view: "flat", onClick: togglePreviewMode, "aria-label": "Switch to preview mode", title: "Switch to preview mode", children: _jsx(Icon, { data: SquareDashed }) }), _jsxs("div", { className: b('zoom'), role: "group", "aria-label": "Zoom controls", children: [_jsx(Button, { view: "flat", onClick: decreaseZoom, "aria-label": "Decrease zoom", disabled: zoom <= Math.min(...ZOOM_STEPS), children: _jsx(Icon, { data: Minus }) }), _jsx(Select, { className: b('zoom-select'), multiple: false, value: currentZoomValue, options: zoomOptions, onUpdate: handleZoomUpdate, "aria-label": "Select zoom level", width: "max" }), _jsx(Button, { view: "flat", onClick: increaseZoom, "aria-label": "Increase zoom", disabled: zoom >= Math.max(...ZOOM_STEPS), children: _jsx(Icon, { data: Plus }) })] })] }));
|
|
50
50
|
};
|
|
51
51
|
export default React.memo(ViewSwitches);
|
|
52
52
|
//# sourceMappingURL=ViewSwitches.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ViewSwitches.js","sourceRoot":"../../../../../src","sources":["editor-v2/containers/ViewSwitches/ViewSwitches.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAC,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"ViewSwitches.js","sourceRoot":"../../../../../src","sources":["editor-v2/containers/ViewSwitches/ViewSwitches.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport {Display, Minus, Plus, Smartphone, SquareDashed} from '@gravity-ui/icons';\nimport {Button, Icon, SegmentedRadioGroup, Select} from '@gravity-ui/uikit';\n\nimport {ZOOM_STEPS} from '../../constants';\nimport {useMainEditorStore} from '../../hooks/useMainEditorStore';\nimport {editorCn} from '../../utils/cn';\n\nimport './ViewSwitches.scss';\n\nconst b = editorCn('view-switches');\n\n/**\n * Device option type definition\n */\ninterface DeviceOption {\n /** React node to display as the option label */\n label: React.ReactNode;\n /** Device width value (e.g., '100%', '768px') */\n value: string;\n /** Descriptive name for accessibility */\n ariaLabel: string;\n}\n\n/**\n * Available device viewport options\n * - Desktop: 100% width\n * - Tablet: 768px width\n * - Mobile: 375px width\n */\nconst DEVICE_OPTIONS: DeviceOption[] = [\n {\n label: <Icon data={Display} />,\n value: '100%',\n ariaLabel: 'Desktop view',\n },\n {\n label: <Icon data={Smartphone} />,\n value: '768px',\n ariaLabel: 'Tablet view',\n },\n {\n label: <Icon width={14} data={Smartphone} />,\n value: '375px',\n ariaLabel: 'Mobile view',\n },\n];\n\nconst ViewSwitches: React.FC = () => {\n const {\n zoom,\n setZoom,\n decreaseZoom,\n increaseZoom,\n deviceWidth,\n setDeviceWidth,\n togglePreviewMode,\n } = useMainEditorStore();\n\n // Memoize zoom options to prevent unnecessary recalculations\n const zoomOptions = React.useMemo(\n () =>\n ZOOM_STEPS.map((step) => ({\n value: String(step),\n content: `${step}%`,\n })),\n [],\n );\n\n // Memoize current zoom value for Select component\n const currentZoomValue = React.useMemo(() => [String(zoom)], [zoom]);\n\n // Create stable callback for zoom updates\n const handleZoomUpdate = React.useCallback(\n (value: string | string[]) => {\n const newZoom = Number(Array.isArray(value) ? value[0] : value);\n if (!isNaN(newZoom) && ZOOM_STEPS.includes(newZoom)) {\n setZoom(newZoom);\n }\n },\n [setZoom],\n );\n\n return (\n <div className={b()} role=\"toolbar\" aria-label=\"View controls\">\n <SegmentedRadioGroup\n value={deviceWidth}\n onUpdate={setDeviceWidth}\n aria-label=\"Device viewport selector\"\n >\n {DEVICE_OPTIONS.map(({value, label, ariaLabel}) => (\n <SegmentedRadioGroup.Option key={value} value={value} aria-label={ariaLabel}>\n {label}\n </SegmentedRadioGroup.Option>\n ))}\n </SegmentedRadioGroup>\n\n <Button\n view=\"flat\"\n onClick={togglePreviewMode}\n aria-label=\"Switch to preview mode\"\n title=\"Switch to preview mode\"\n >\n <Icon data={SquareDashed} />\n </Button>\n\n <div className={b('zoom')} role=\"group\" aria-label=\"Zoom controls\">\n <Button\n view=\"flat\"\n onClick={decreaseZoom}\n aria-label=\"Decrease zoom\"\n disabled={zoom <= Math.min(...ZOOM_STEPS)}\n >\n <Icon data={Minus} />\n </Button>\n\n <Select\n className={b('zoom-select')}\n multiple={false}\n value={currentZoomValue}\n options={zoomOptions}\n onUpdate={handleZoomUpdate}\n aria-label=\"Select zoom level\"\n width=\"max\"\n />\n\n <Button\n view=\"flat\"\n onClick={increaseZoom}\n aria-label=\"Increase zoom\"\n disabled={zoom >= Math.max(...ZOOM_STEPS)}\n >\n <Icon data={Plus} />\n </Button>\n </div>\n </div>\n );\n};\n\nexport default React.memo(ViewSwitches);\n"]}
|