@gravity-ui/page-constructor 6.0.0-alpha.6 → 6.0.0-beta.0

package/build/cjs/blocks/Slider/utils.d.ts

@@ -1,16 +1,37 @@
-import type { SwiperOptions } from 'swiper/types/swiper-options';
-import { SlidesToShow } from './models';
+import * as React from 'react';
+import { SliderBreakpointParams, SlidesToShow } from "./models.js";
 export declare const DEFAULT_SLIDE_BREAKPOINTS: {
+    xl: number;
     lg: number;
     md: number;
     sm: number;
-    xs: number;
 };
 export interface GetSlidesToShowParams {
     contentLength: number;
-    slidesToShow?: SlidesToShow;
+    breakpoints?: SlidesToShow;
     mobileFullscreen?: boolean;
 }
-export declare function getSliderResponsiveParams({ contentLength, slidesToShow, mobileFullscreen, }: GetSlidesToShowParams): Record<number, SwiperOptions>;
-export declare const useMemoized: <T>(value: T) => T;
-export declare const setElementAtrributes: (element: Element, attributes: Record<string, unknown>) => void;
+export declare const isFocusable: (element: Element) => boolean;
+export declare function getSlidesToShowWithDefaults({ contentLength, breakpoints, mobileFullscreen, }: GetSlidesToShowParams): {
+    sm: number;
+    xl: number;
+    lg: number;
+    md: number;
+};
+export declare function getSliderResponsiveParams(breakpoints: SliderBreakpointParams): {
+    breakpoint: number;
+    settings: {
+        slidesToShow: number;
+    };
+}[];
+export declare function getSlidesCountByBreakpoint(breakpoint: number, breakpoints: SliderBreakpointParams): number;
+export declare function getSlidesToShowCount(breakpoints: SliderBreakpointParams): number;
+export declare function useRovingTabIndex(props: {
+    itemCount: number;
+    activeIndex: number;
+    firstIndex?: number;
+    uniqId: string;
+}): {
+    getRovingItemProps: (index: number) => Pick<React.HTMLAttributes<HTMLElement>, "id" | "tabIndex" | "onFocus">;
+    rovingListProps: React.HTMLAttributes<HTMLElement>;
+};

package/build/cjs/blocks/Slider/utils.js

@@ -1,43 +1,126 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.setElementAtrributes = exports.useMemoized = exports.getSliderResponsiveParams = exports.DEFAULT_SLIDE_BREAKPOINTS = void 0;
+exports.isFocusable = exports.DEFAULT_SLIDE_BREAKPOINTS = void 0;
+exports.getSlidesToShowWithDefaults = getSlidesToShowWithDefaults;
+exports.getSliderResponsiveParams = getSliderResponsiveParams;
+exports.getSlidesCountByBreakpoint = getSlidesCountByBreakpoint;
+exports.getSlidesToShowCount = getSlidesToShowCount;
+exports.useRovingTabIndex = useRovingTabIndex;
 const tslib_1 = require("tslib");
-const react_1 = require("react");
-const isEqual_1 = tslib_1.__importDefault(require("lodash/isEqual"));
 const pickBy_1 = tslib_1.__importDefault(require("lodash/pickBy"));
-const constants_1 = require("../../constants");
-const models_1 = require("./models");
+const React = tslib_1.__importStar(require("react"));
+const constants_1 = require("../../constants.js");
+const models_1 = require("./models.js");
 exports.DEFAULT_SLIDE_BREAKPOINTS = {
-    [models_1.SliderBreakpointNames.Lg]: 3,
+    [models_1.SliderBreakpointNames.Xl]: 3,
+    [models_1.SliderBreakpointNames.Lg]: 2,
     [models_1.SliderBreakpointNames.Md]: 2,
-    [models_1.SliderBreakpointNames.Sm]: 2,
-    [models_1.SliderBreakpointNames.Xs]: 1.15,
+    [models_1.SliderBreakpointNames.Sm]: 1.15,
+};
+const BREAKPOINT_NAMES_BY_VALUES = Object.entries(constants_1.BREAKPOINTS).reduce((acc, [key, value]) => (Object.assign(Object.assign({}, acc), { [value]: key })), {});
+const isFocusable = (element) => {
+    if (!(element instanceof HTMLElement)) {
+        return false;
+    }
+    const tabIndexAttr = element.getAttribute('tabindex');
+    const hasTabIndex = tabIndexAttr !== null;
+    const tabIndex = Number(tabIndexAttr);
+    if (element.ariaHidden === 'true' || (hasTabIndex && tabIndex < 0)) {
+        return false;
+    }
+    if (hasTabIndex && tabIndex >= 0) {
+        return true;
+    }
+    // without this jest fails here for some reason
+    let htmlElement;
+    switch (true) {
+        case element instanceof HTMLAnchorElement:
+            htmlElement = element;
+            return Boolean(htmlElement.href);
+        case element instanceof HTMLInputElement:
+            htmlElement = element;
+            return htmlElement.type !== 'hidden' && !htmlElement.disabled;
+        case element instanceof HTMLSelectElement:
+        case element instanceof HTMLTextAreaElement:
+        case element instanceof HTMLButtonElement:
+            htmlElement = element;
+            return !htmlElement.disabled;
+        default:
+            return false;
+    }
 };
-function getSliderResponsiveParams({ contentLength, slidesToShow, mobileFullscreen, }) {
+exports.isFocusable = isFocusable;
+function getSlidesToShowWithDefaults({ contentLength, breakpoints, mobileFullscreen, }) {
     let result;
-    if (typeof slidesToShow === 'number') {
-        result = Object.keys(exports.DEFAULT_SLIDE_BREAKPOINTS).reduce((acc, breakpointName) => (Object.assign(Object.assign({}, acc), { [breakpointName]: slidesToShow })), {});
+    if (typeof breakpoints === 'number') {
+        result = Object.keys(exports.DEFAULT_SLIDE_BREAKPOINTS).reduce((acc, breakpointName) => (Object.assign(Object.assign({}, acc), { [breakpointName]: breakpoints })), {});
     }
     else {
-        result = slidesToShow || exports.DEFAULT_SLIDE_BREAKPOINTS;
+        result = breakpoints || exports.DEFAULT_SLIDE_BREAKPOINTS;
     }
-    const showCount = Object.assign(Object.assign(Object.assign({}, exports.DEFAULT_SLIDE_BREAKPOINTS), (0, pickBy_1.default)(result, (value) => !isNaN(value))), { xs: !mobileFullscreen && contentLength > 1 ? exports.DEFAULT_SLIDE_BREAKPOINTS.xs : 1 });
-    return Object.entries(showCount).reduce((res, [breakpointName, value]) => {
-        // eslint-disable-next-line no-param-reassign
-        res[constants_1.BREAKPOINTS[breakpointName] + 1] = {
-            slidesPerView: value,
+    return Object.assign(Object.assign(Object.assign({}, exports.DEFAULT_SLIDE_BREAKPOINTS), (0, pickBy_1.default)(result, (value) => !isNaN(value))), { sm: !mobileFullscreen && contentLength > 1 ? exports.DEFAULT_SLIDE_BREAKPOINTS.sm : 1 });
+}
+function getSliderResponsiveParams(breakpoints) {
+    return Object.entries(breakpoints).map(([breakpointName, slidesToShow]) => ({
+        breakpoint: constants_1.BREAKPOINTS[breakpointName],
+        settings: { slidesToShow },
+    }));
+}
+function getSlidesCountByBreakpoint(breakpoint, breakpoints) {
+    const breakpointName = BREAKPOINT_NAMES_BY_VALUES[breakpoint];
+    return Math.floor(breakpoints[breakpointName]);
+}
+function getSlidesToShowCount(breakpoints) {
+    return Math.floor(Math.max(...Object.values(breakpoints)));
+}
+const getRovingListItemId = (uniqId, index) => `${uniqId}-roving-tabindex-item-${index}`;
+function useRovingTabIndex(props) {
+    const { itemCount, activeIndex, firstIndex = 0, uniqId } = props;
+    const [currentIndex, setCurrentIndex] = React.useState(firstIndex);
+    const hasFocusRef = React.useRef(false);
+    const lastIndex = itemCount + firstIndex - 1;
+    const getRovingItemProps = (index) => {
+        return {
+            id: getRovingListItemId(uniqId, index),
+            tabIndex: index === activeIndex ? 0 : -1,
+            onFocus: () => {
+                setCurrentIndex(index);
+                hasFocusRef.current = true;
+            },
         };
-        return res;
-    }, {});
+    };
+    React.useEffect(() => {
+        var _a;
+        if (!hasFocusRef.current) {
+            return;
+        }
+        (_a = document.getElementById(getRovingListItemId(uniqId, currentIndex))) === null || _a === void 0 ? void 0 : _a.focus();
+    }, [activeIndex, currentIndex, uniqId]);
+    const setNextIndex = () => setCurrentIndex((prev) => (prev >= lastIndex ? firstIndex : prev + 1));
+    const setPrevIndex = () => setCurrentIndex((prev) => (prev <= firstIndex ? lastIndex : prev - 1));
+    const onRovingListKeyDown = (e) => {
+        const key = e.key.toLowerCase();
+        if (key !== 'tab' && key !== 'enter') {
+            e.preventDefault();
+        }
+        switch (key) {
+            case 'arrowleft':
+            case 'arrowup':
+                setPrevIndex();
+                return;
+            case 'arrowright':
+            case 'arrowdown':
+                setNextIndex();
+                return;
+        }
+    };
+    const onRovingListBlur = () => {
+        hasFocusRef.current = false;
+    };
+    const rovingListProps = {
+        onKeyDown: onRovingListKeyDown,
+        onBlur: onRovingListBlur,
+    };
+    return { getRovingItemProps, rovingListProps };
 }
-exports.getSliderResponsiveParams = getSliderResponsiveParams;
-const useMemoized = (value) => {
-    const [memoizedValue, setMemoizedValue] = (0, react_1.useState)(value);
-    (0, react_1.useEffect)(() => {
-        setMemoizedValue((memoized) => value && typeof value === 'object' && (0, isEqual_1.default)(memoized, value) ? memoized : value);
-    }, [value]);
-    return memoizedValue;
-};
-exports.useMemoized = useMemoized;
-const setElementAtrributes = (element, attributes) => Object.entries(attributes).forEach(([attribute, value]) => element.setAttribute(attribute, String(value)));
-exports.setElementAtrributes = setElementAtrributes;
+//# sourceMappingURL=utils.js.map

package/build/cjs/blocks/Slider/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"../../../../src","sources":["blocks/Slider/utils.ts"],"names":[],"mappings":"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","sourcesContent":["import pickBy from 'lodash/pickBy';\nimport * as React from 'react';\n\nimport {BREAKPOINTS} from '../../constants';\n\nimport {SliderBreakpointNames, SliderBreakpointParams, SlidesToShow} from './models';\n\nexport const DEFAULT_SLIDE_BREAKPOINTS = {\n    [SliderBreakpointNames.Xl]: 3,\n    [SliderBreakpointNames.Lg]: 2,\n    [SliderBreakpointNames.Md]: 2,\n    [SliderBreakpointNames.Sm]: 1.15,\n};\n\nconst BREAKPOINT_NAMES_BY_VALUES = Object.entries(BREAKPOINTS).reduce<\n    Record<number, SliderBreakpointNames>\n>((acc, [key, value]) => ({...acc, [value]: key as SliderBreakpointNames}), {});\n\nexport interface GetSlidesToShowParams {\n    contentLength: number;\n    breakpoints?: SlidesToShow;\n    mobileFullscreen?: boolean;\n}\n\nexport const isFocusable = (element: Element): boolean => {\n    if (!(element instanceof HTMLElement)) {\n        return false;\n    }\n    const tabIndexAttr = element.getAttribute('tabindex');\n    const hasTabIndex = tabIndexAttr !== null;\n    const tabIndex = Number(tabIndexAttr);\n    if (element.ariaHidden === 'true' || (hasTabIndex && tabIndex < 0)) {\n        return false;\n    }\n    if (hasTabIndex && tabIndex >= 0) {\n        return true;\n    }\n\n    // without this jest fails here for some reason\n    let htmlElement:\n        | HTMLAnchorElement\n        | HTMLInputElement\n        | HTMLSelectElement\n        | HTMLTextAreaElement\n        | HTMLButtonElement;\n    switch (true) {\n        case element instanceof HTMLAnchorElement:\n            htmlElement = element as HTMLAnchorElement;\n            return Boolean(htmlElement.href);\n        case element instanceof HTMLInputElement:\n            htmlElement = element as HTMLInputElement;\n            return htmlElement.type !== 'hidden' && !htmlElement.disabled;\n        case element instanceof HTMLSelectElement:\n        case element instanceof HTMLTextAreaElement:\n        case element instanceof HTMLButtonElement:\n            htmlElement = element as HTMLSelectElement | HTMLTextAreaElement | HTMLButtonElement;\n            return !htmlElement.disabled;\n        default:\n            return false;\n    }\n};\n\nexport function getSlidesToShowWithDefaults({\n    contentLength,\n    breakpoints,\n    mobileFullscreen,\n}: GetSlidesToShowParams) {\n    let result;\n\n    if (typeof breakpoints === 'number') {\n        result = Object.keys(DEFAULT_SLIDE_BREAKPOINTS).reduce(\n            (acc, breakpointName) => ({...acc, [breakpointName]: breakpoints}),\n            {} as SliderBreakpointParams,\n        );\n    } else {\n        result = breakpoints || DEFAULT_SLIDE_BREAKPOINTS;\n    }\n\n    return {\n        ...DEFAULT_SLIDE_BREAKPOINTS,\n        ...pickBy(result, (value) => !isNaN(value)),\n        sm: !mobileFullscreen && contentLength > 1 ? DEFAULT_SLIDE_BREAKPOINTS.sm : 1,\n    };\n}\n\nexport function getSliderResponsiveParams(breakpoints: SliderBreakpointParams) {\n    return Object.entries(breakpoints).map(([breakpointName, slidesToShow]) => ({\n        breakpoint: BREAKPOINTS[breakpointName as SliderBreakpointNames],\n        settings: {slidesToShow},\n    }));\n}\n\nexport function getSlidesCountByBreakpoint(\n    breakpoint: number,\n    breakpoints: SliderBreakpointParams,\n) {\n    const breakpointName = BREAKPOINT_NAMES_BY_VALUES[breakpoint];\n\n    return Math.floor(breakpoints[breakpointName]);\n}\n\nexport function getSlidesToShowCount(breakpoints: SliderBreakpointParams) {\n    return Math.floor(Math.max(...Object.values(breakpoints)));\n}\n\nconst getRovingListItemId = (uniqId: string, index: number) =>\n    `${uniqId}-roving-tabindex-item-${index}`;\nexport function useRovingTabIndex(props: {\n    itemCount: number;\n    activeIndex: number;\n    firstIndex?: number;\n    uniqId: string;\n}) {\n    const {itemCount, activeIndex, firstIndex = 0, uniqId} = props;\n    const [currentIndex, setCurrentIndex] = React.useState(firstIndex);\n    const hasFocusRef = React.useRef(false);\n    const lastIndex = itemCount + firstIndex - 1;\n\n    const getRovingItemProps = (\n        index: number,\n    ): Pick<React.HTMLAttributes<HTMLElement>, 'id' | 'tabIndex' | 'onFocus'> => {\n        return {\n            id: getRovingListItemId(uniqId, index),\n            tabIndex: index === activeIndex ? 0 : -1,\n            onFocus: () => {\n                setCurrentIndex(index);\n                hasFocusRef.current = true;\n            },\n        };\n    };\n\n    React.useEffect(() => {\n        if (!hasFocusRef.current) {\n            return;\n        }\n        document.getElementById(getRovingListItemId(uniqId, currentIndex))?.focus();\n    }, [activeIndex, currentIndex, uniqId]);\n\n    const setNextIndex = () =>\n        setCurrentIndex((prev) => (prev >= lastIndex ? firstIndex : prev + 1));\n    const setPrevIndex = () =>\n        setCurrentIndex((prev) => (prev <= firstIndex ? lastIndex : prev - 1));\n\n    const onRovingListKeyDown: React.KeyboardEventHandler<HTMLElement> = (e) => {\n        const key = e.key.toLowerCase();\n\n        if (key !== 'tab' && key !== 'enter') {\n            e.preventDefault();\n        }\n\n        switch (key) {\n            case 'arrowleft':\n            case 'arrowup':\n                setPrevIndex();\n                return;\n            case 'arrowright':\n            case 'arrowdown':\n                setNextIndex();\n                return;\n        }\n    };\n\n    const onRovingListBlur: React.FocusEventHandler<HTMLElement> = () => {\n        hasFocusRef.current = false;\n    };\n\n    const rovingListProps: React.HTMLAttributes<HTMLElement> = {\n        onKeyDown: onRovingListKeyDown,\n        onBlur: onRovingListBlur,\n    };\n\n    return {getRovingItemProps, rovingListProps};\n}\n"]}

package/build/cjs/blocks/{SliderOld → SliderNew}/Arrow/Arrow.css

@@ -1,37 +1,34 @@
-.pc-slider-old-block-arrow__button {
+.pc-slider-new-block-arrow__button {
   box-shadow: 0px 4px 24px var(--pc-color-sfx-shadow), 0px 2px 8px var(--pc-color-sfx-shadow);
 }
 
-.pc-slider-old-block-arrow__button:hover {
+.pc-slider-new-block-arrow__button:hover {
   box-shadow: 0px 4px 24px var(--g-color-sfx-shadow), 0px 2px 8px var(--g-color-sfx-shadow);
   cursor: pointer;
 }
 
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
-.pc-slider-old-block-arrow__icon-wrapper, .pc-slider-old-block-arrow__button, .pc-slider-old-block-arrow {
+.pc-slider-new-block-arrow__icon-wrapper, .pc-slider-new-block-arrow__button, .pc-slider-new-block-arrow {
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
-.pc-slider-old-block-arrow {
+.pc-slider-new-block-arrow {
   width: 42px;
   height: 42px;
   cursor: pointer;
 }
 @media (max-width: 576px) {
-  .pc-slider-old-block-arrow {
+  .pc-slider-new-block-arrow {
     display: none;
   }
 }
-.pc-slider-old-block-arrow_type_left {
-  margin-right: 16px;
-}
-.pc-slider-old-block-arrow_type_left .pc-slider-old-block-arrow__icon-wrapper {
+.pc-slider-new-block-arrow_type_left .pc-slider-new-block-arrow__icon-wrapper {
   transform: rotate(180deg);
 }
-.pc-slider-old-block-arrow__button {
+.pc-slider-new-block-arrow__button {
   display: inline-block;
   margin: 0;
   padding: 0;
@@ -47,19 +44,19 @@ unpredictable css rules order in build */
   border-radius: 100%;
   background-color: var(--g-color-base-background);
   box-shadow: 0 4px 24px var(--pc-color-sfx-shadow), 0 2px 8px var(--pc-color-sfx-shadow);
-  transition: box-shadow 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), color 1s cubic-bezier(0.22, 0.61, 0.36, 1);
+  transition: box-shadow 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), color 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
 }
-.pc-slider-old-block-arrow__button:focus {
+.pc-slider-new-block-arrow__button:focus {
   outline: 2px solid var(--g-color-line-focus);
   outline-offset: 0;
 }
-.pc-slider-old-block-arrow__button:focus:not(:focus-visible) {
+.pc-slider-new-block-arrow__button:focus:not(:focus-visible) {
   outline: 0;
 }
-.pc-slider-old-block-arrow:hover .pc-slider-old-block-arrow__button {
+.pc-slider-new-block-arrow:hover .pc-slider-new-block-arrow__button {
   color: var(--g-color-text-primary);
   box-shadow: 0 2px 12px var(--pc-color-sfx-shadow), 0 4px 24px var(--pc-color-sfx-shadow);
 }
-.pc-slider-old-block-arrow__icon {
+.pc-slider-new-block-arrow__icon {
   position: relative;
 }

package/build/cjs/blocks/SliderNew/Arrow/Arrow.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { ClassNameProps } from "../../../models/index.js";
+export type ArrowType = 'left' | 'right';
+export interface ArrowProps {
+    type: ArrowType;
+    onClick?: () => void;
+    size?: number;
+    extraProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;
+}
+declare const Arrow: ({ type, onClick, className, size, extraProps }: ArrowProps & ClassNameProps) => import("react/jsx-runtime").JSX.Element;
+export default Arrow;

package/build/cjs/blocks/SliderNew/Arrow/Arrow.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ToggleArrow_1 = tslib_1.__importDefault(require("../../../components/ToggleArrow/ToggleArrow.js"));
+const utils_1 = require("../../../utils/index.js");
+const i18n_1 = require("../i18n/index.js");
+const b = (0, utils_1.block)('slider-new-block-arrow');
+const Arrow = ({ type, onClick, className, size = 16, extraProps }) => ((0, jsx_runtime_1.jsx)("div", { className: b({ type }, className), children: (0, jsx_runtime_1.jsx)("button", Object.assign({ className: b('button'), onClick: onClick, "aria-label": (0, i18n_1.i18n)(`arrow-${type}`) }, extraProps, { children: (0, jsx_runtime_1.jsx)("span", { className: b('icon-wrapper'), children: (0, jsx_runtime_1.jsx)(ToggleArrow_1.default, { size: size, type: 'horizontal', iconType: "navigation", className: b('icon') }) }) })) }));
+exports.default = Arrow;
+//# sourceMappingURL=Arrow.js.map

package/build/cjs/blocks/SliderNew/Arrow/Arrow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Arrow.js","sourceRoot":"../../../../../src","sources":["blocks/SliderNew/Arrow/Arrow.tsx"],"names":[],"mappings":";;;;AAEA,yGAAsE;AAEtE,mDAAqC;AACrC,2CAA6B;AAI7B,MAAM,CAAC,GAAG,IAAA,aAAK,EAAC,wBAAwB,CAAC,CAAC;AAW1C,MAAM,KAAK,GAAG,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,IAAI,GAAG,EAAE,EAAE,UAAU,EAA8B,EAAE,EAAE,CAAC,CAC9F,gCAAK,SAAS,EAAE,CAAC,CAAC,EAAC,IAAI,EAAC,EAAE,SAAS,CAAC,YAChC,iDACI,SAAS,EAAE,CAAC,CAAC,QAAQ,CAAC,EACtB,OAAO,EAAE,OAAO,gBACJ,IAAA,WAAI,EAAC,SAAS,IAAI,EAAE,CAAC,IAC7B,UAAU,cAEd,iCAAM,SAAS,EAAE,CAAC,CAAC,cAAc,CAAC,YAC9B,uBAAC,qBAAW,IACR,IAAI,EAAE,IAAI,EACV,IAAI,EAAE,YAAY,EAClB,QAAQ,EAAC,YAAY,EACrB,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,GACtB,GACC,IACF,GACP,CACT,CAAC;AAEF,kBAAe,KAAK,CAAC","sourcesContent":["import * as React from 'react';\n\nimport ToggleArrow from '../../../components/ToggleArrow/ToggleArrow';\nimport {ClassNameProps} from '../../../models';\nimport {block} from '../../../utils';\nimport {i18n} from '../i18n';\n\nimport './Arrow.scss';\n\nconst b = block('slider-new-block-arrow');\n\nexport type ArrowType = 'left' | 'right';\n\nexport interface ArrowProps {\n    type: ArrowType;\n    onClick?: () => void;\n    size?: number;\n    extraProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;\n}\n\nconst Arrow = ({type, onClick, className, size = 16, extraProps}: ArrowProps & ClassNameProps) => (\n    <div className={b({type}, className)}>\n        <button\n            className={b('button')}\n            onClick={onClick}\n            aria-label={i18n(`arrow-${type}`)}\n            {...extraProps}\n        >\n            <span className={b('icon-wrapper')}>\n                <ToggleArrow\n                    size={size}\n                    type={'horizontal'}\n                    iconType=\"navigation\"\n                    className={b('icon')}\n                />\n            </span>\n        </button>\n    </div>\n);\n\nexport default Arrow;\n"]}