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

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

@@ -1,115 +1,36 @@
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useState } from 'react';
+import isEqual from 'lodash/isEqual';
 import pickBy from 'lodash/pickBy';
 import { BREAKPOINTS } from '../../constants';
 import { SliderBreakpointNames } from './models';
 export const DEFAULT_SLIDE_BREAKPOINTS = {
-    [SliderBreakpointNames.Xl]: 3,
-    [SliderBreakpointNames.Lg]: 2,
+    [SliderBreakpointNames.Lg]: 3,
     [SliderBreakpointNames.Md]: 2,
-    [SliderBreakpointNames.Sm]: 1.15,
+    [SliderBreakpointNames.Sm]: 2,
+    [SliderBreakpointNames.Xs]: 1.15,
 };
-const BREAKPOINT_NAMES_BY_VALUES = Object.entries(BREAKPOINTS).reduce((acc, [key, value]) => (Object.assign(Object.assign({}, acc), { [value]: key })), {});
-export 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;
-    }
-};
-export function getSlidesToShowWithDefaults({ contentLength, breakpoints, mobileFullscreen, }) {
+export function getSliderResponsiveParams({ contentLength, slidesToShow, mobileFullscreen, }) {
     let result;
-    if (typeof breakpoints === 'number') {
-        result = Object.keys(DEFAULT_SLIDE_BREAKPOINTS).reduce((acc, breakpointName) => (Object.assign(Object.assign({}, acc), { [breakpointName]: breakpoints })), {});
+    if (typeof slidesToShow === 'number') {
+        result = Object.keys(DEFAULT_SLIDE_BREAKPOINTS).reduce((acc, breakpointName) => (Object.assign(Object.assign({}, acc), { [breakpointName]: slidesToShow })), {});
     }
     else {
-        result = breakpoints || DEFAULT_SLIDE_BREAKPOINTS;
+        result = slidesToShow || DEFAULT_SLIDE_BREAKPOINTS;
     }
-    return Object.assign(Object.assign(Object.assign({}, DEFAULT_SLIDE_BREAKPOINTS), pickBy(result, (value) => !isNaN(value))), { sm: !mobileFullscreen && contentLength > 1 ? DEFAULT_SLIDE_BREAKPOINTS.sm : 1 });
-}
-export function getSliderResponsiveParams(breakpoints) {
-    return Object.entries(breakpoints).map(([breakpointName, slidesToShow]) => ({
-        breakpoint: BREAKPOINTS[breakpointName],
-        settings: { slidesToShow },
-    }));
-}
-export function getSlidesCountByBreakpoint(breakpoint, breakpoints) {
-    const breakpointName = BREAKPOINT_NAMES_BY_VALUES[breakpoint];
-    return Math.floor(breakpoints[breakpointName]);
-}
-export function getSlidesToShowCount(breakpoints) {
-    return Math.floor(Math.max(...Object.values(breakpoints)));
-}
-const getRovingListItemId = (uniqId, index) => `${uniqId}-roving-tabindex-item-${index}`;
-export function useRovingTabIndex(props) {
-    const { itemCount, activeIndex, firstIndex = 0, uniqId } = props;
-    const [currentIndex, setCurrentIndex] = useState(firstIndex);
-    const hasFocusRef = 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 showCount = Object.assign(Object.assign(Object.assign({}, DEFAULT_SLIDE_BREAKPOINTS), pickBy(result, (value) => !isNaN(value))), { xs: !mobileFullscreen && contentLength > 1 ? DEFAULT_SLIDE_BREAKPOINTS.xs : 1 });
+    return Object.entries(showCount).reduce((res, [breakpointName, value]) => {
+        // eslint-disable-next-line no-param-reassign
+        res[BREAKPOINTS[breakpointName] + 1] = {
+            slidesPerView: value,
         };
-    };
-    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 };
+        return res;
+    }, {});
 }
+export const useMemoized = (value) => {
+    const [memoizedValue, setMemoizedValue] = useState(value);
+    useEffect(() => {
+        setMemoizedValue((memoized) => value && typeof value === 'object' && isEqual(memoized, value) ? memoized : value);
+    }, [value]);
+    return memoizedValue;
+};
+export const setElementAtrributes = (element, attributes) => Object.entries(attributes).forEach(([attribute, value]) => element.setAttribute(attribute, String(value)));

package/build/esm/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/esm/blocks/SliderOld/Arrow/Arrow.d.ts

@@ -0,0 +1,10 @@
+import { ClassNameProps } from '../../../models';
+import './Arrow.css';
+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/esm/blocks/{SliderNew → SliderOld}/Arrow/Arrow.js

@@ -3,9 +3,9 @@ import ToggleArrow from '../../../components/ToggleArrow/ToggleArrow';
 import { block } from '../../../utils';
 import { i18n } from '../i18n';
 import './Arrow.css';
-const b = block('slider-new-block-arrow');
-const Arrow = ({ type, onClick, className, size = 16, extraProps }) => (React.createElement("div", { className: b({ type }, className) },
-    React.createElement("button", Object.assign({ className: b('button'), onClick: onClick, "aria-label": i18n(`arrow-${type}`) }, extraProps),
+const b = block('slider-old-block-arrow');
+const Arrow = ({ type, handleClick, className, size = 16 }) => (React.createElement("div", { className: b({ type }, className) },
+    React.createElement("button", { className: b('button'), onClick: handleClick ? () => handleClick(type) : undefined, "aria-label": i18n(`arrow-${type}`) },
         React.createElement("span", { className: b('icon-wrapper') },
             React.createElement(ToggleArrow, { size: size, type: 'horizontal', iconType: "navigation", className: b('icon') })))));
 export default Arrow;