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

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

@@ -1,125 +1,43 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useRovingTabIndex = exports.getSlidesToShowCount = exports.getSlidesCountByBreakpoint = exports.getSliderResponsiveParams = exports.getSlidesToShowWithDefaults = exports.isFocusable = exports.DEFAULT_SLIDE_BREAKPOINTS = void 0;
+exports.setElementAtrributes = exports.useMemoized = exports.getSliderResponsiveParams = exports.DEFAULT_SLIDE_BREAKPOINTS = void 0;
 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");
 exports.DEFAULT_SLIDE_BREAKPOINTS = {
-    [models_1.SliderBreakpointNames.Xl]: 3,
-    [models_1.SliderBreakpointNames.Lg]: 2,
+    [models_1.SliderBreakpointNames.Lg]: 3,
     [models_1.SliderBreakpointNames.Md]: 2,
-    [models_1.SliderBreakpointNames.Sm]: 1.15,
+    [models_1.SliderBreakpointNames.Sm]: 2,
+    [models_1.SliderBreakpointNames.Xs]: 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;
-    }
-};
-exports.isFocusable = isFocusable;
-function getSlidesToShowWithDefaults({ contentLength, breakpoints, mobileFullscreen, }) {
+function getSliderResponsiveParams({ contentLength, slidesToShow, mobileFullscreen, }) {
     let result;
-    if (typeof breakpoints === 'number') {
-        result = Object.keys(exports.DEFAULT_SLIDE_BREAKPOINTS).reduce((acc, breakpointName) => (Object.assign(Object.assign({}, acc), { [breakpointName]: breakpoints })), {});
+    if (typeof slidesToShow === 'number') {
+        result = Object.keys(exports.DEFAULT_SLIDE_BREAKPOINTS).reduce((acc, breakpointName) => (Object.assign(Object.assign({}, acc), { [breakpointName]: slidesToShow })), {});
     }
     else {
-        result = breakpoints || exports.DEFAULT_SLIDE_BREAKPOINTS;
+        result = slidesToShow || exports.DEFAULT_SLIDE_BREAKPOINTS;
     }
-    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 });
-}
-exports.getSlidesToShowWithDefaults = getSlidesToShowWithDefaults;
-function getSliderResponsiveParams(breakpoints) {
-    return Object.entries(breakpoints).map(([breakpointName, slidesToShow]) => ({
-        breakpoint: constants_1.BREAKPOINTS[breakpointName],
-        settings: { slidesToShow },
-    }));
+    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 res;
+    }, {});
 }
 exports.getSliderResponsiveParams = getSliderResponsiveParams;
-function getSlidesCountByBreakpoint(breakpoint, breakpoints) {
-    const breakpointName = BREAKPOINT_NAMES_BY_VALUES[breakpoint];
-    return Math.floor(breakpoints[breakpointName]);
-}
-exports.getSlidesCountByBreakpoint = getSlidesCountByBreakpoint;
-function getSlidesToShowCount(breakpoints) {
-    return Math.floor(Math.max(...Object.values(breakpoints)));
-}
-exports.getSlidesToShowCount = getSlidesToShowCount;
-const getRovingListItemId = (uniqId, index) => `${uniqId}-roving-tabindex-item-${index}`;
-function useRovingTabIndex(props) {
-    const { itemCount, activeIndex, firstIndex = 0, uniqId } = props;
-    const [currentIndex, setCurrentIndex] = (0, react_1.useState)(firstIndex);
-    const hasFocusRef = (0, react_1.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;
-            },
-        };
-    };
+const useMemoized = (value) => {
+    const [memoizedValue, setMemoizedValue] = (0, react_1.useState)(value);
     (0, react_1.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.useRovingTabIndex = useRovingTabIndex;
+        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;

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

@@ -1,34 +1,37 @@
-.pc-slider-new-block-arrow__button {
+.pc-slider-old-block-arrow__button {
   box-shadow: 0px 4px 24px var(--pc-color-sfx-shadow), 0px 2px 8px var(--pc-color-sfx-shadow);
 }
 
-.pc-slider-new-block-arrow__button:hover {
+.pc-slider-old-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-new-block-arrow__icon-wrapper, .pc-slider-new-block-arrow__button, .pc-slider-new-block-arrow {
+.pc-slider-old-block-arrow__icon-wrapper, .pc-slider-old-block-arrow__button, .pc-slider-old-block-arrow {
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
-.pc-slider-new-block-arrow {
+.pc-slider-old-block-arrow {
   width: 42px;
   height: 42px;
   cursor: pointer;
 }
 @media (max-width: 576px) {
-  .pc-slider-new-block-arrow {
+  .pc-slider-old-block-arrow {
     display: none;
   }
 }
-.pc-slider-new-block-arrow_type_left .pc-slider-new-block-arrow__icon-wrapper {
+.pc-slider-old-block-arrow_type_left {
+  margin-right: 16px;
+}
+.pc-slider-old-block-arrow_type_left .pc-slider-old-block-arrow__icon-wrapper {
   transform: rotate(180deg);
 }
-.pc-slider-new-block-arrow__button {
+.pc-slider-old-block-arrow__button {
   display: inline-block;
   margin: 0;
   padding: 0;
@@ -44,19 +47,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 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
+  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);
 }
-.pc-slider-new-block-arrow__button:focus {
+.pc-slider-old-block-arrow__button:focus {
   outline: 2px solid var(--g-color-line-focus);
   outline-offset: 0;
 }
-.pc-slider-new-block-arrow__button:focus:not(:focus-visible) {
+.pc-slider-old-block-arrow__button:focus:not(:focus-visible) {
   outline: 0;
 }
-.pc-slider-new-block-arrow:hover .pc-slider-new-block-arrow__button {
+.pc-slider-old-block-arrow:hover .pc-slider-old-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-new-block-arrow__icon {
+.pc-slider-old-block-arrow__icon {
   position: relative;
 }

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

@@ -0,0 +1,9 @@
+import { ClassNameProps } from '../../../models';
+export type ArrowType = 'left' | 'right';
+export interface ArrowProps {
+    type: ArrowType;
+    handleClick?: (direction: ArrowType) => void;
+    size?: number;
+}
+declare const Arrow: ({ type, handleClick, className, size }: ArrowProps & ClassNameProps) => JSX.Element;
+export default Arrow;

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

@@ -5,9 +5,9 @@ const react_1 = tslib_1.__importDefault(require("react"));
 const ToggleArrow_1 = tslib_1.__importDefault(require("../../../components/ToggleArrow/ToggleArrow"));
 const utils_1 = require("../../../utils");
 const i18n_1 = require("../i18n");
-const b = (0, utils_1.block)('slider-new-block-arrow');
-const Arrow = ({ type, onClick, className, size = 16, extraProps }) => (react_1.default.createElement("div", { className: b({ type }, className) },
-    react_1.default.createElement("button", Object.assign({ className: b('button'), onClick: onClick, "aria-label": (0, i18n_1.i18n)(`arrow-${type}`) }, extraProps),
+const b = (0, utils_1.block)('slider-old-block-arrow');
+const Arrow = ({ type, handleClick, className, size = 16 }) => (react_1.default.createElement("div", { className: b({ type }, className) },
+    react_1.default.createElement("button", { className: b('button'), onClick: handleClick ? () => handleClick(type) : undefined, "aria-label": (0, i18n_1.i18n)(`arrow-${type}`) },
         react_1.default.createElement("span", { className: b('icon-wrapper') },
             react_1.default.createElement(ToggleArrow_1.default, { size: size, type: 'horizontal', iconType: "navigation", className: b('icon') })))));
 exports.default = Arrow;