@cloud-ru/uikit-product-mobile-drawer 0.9.15

package/src/components/MobileDrawerCustom/hooks.ts

@@ -0,0 +1,196 @@
+import mergeRefs from 'merge-refs';
+import { CSSProperties, useRef, useState } from 'react';
+
+import { DATA_SWIPE_DIRECTIONS_ATTRIBUTE, SwipeCallback, SwipeEventData, useSwipeable } from '@snack-uikit/utils';
+
+import { Position } from '../../types';
+import { POSITION_TO_SWIPE_DIRECTION_MAP, SWIPE_DIRECTION_TO_POSITION_MAP } from './constants';
+
+type UseSwipePropsProps = {
+  onSwiped(): void;
+  position: Position;
+  enabled: boolean;
+};
+
+const TRANSFORM = 0;
+const SWIPE_DURATION = 500;
+
+export function useSwipeProps({ onSwiped, position, enabled }: UseSwipePropsProps) {
+  const swipeRef = useRef<HTMLDivElement>(null);
+  const canCloseDrawer = useRef(true);
+  const itemSize =
+    (position === 'bottom' || position === 'top' ? swipeRef.current?.offsetHeight : swipeRef.current?.offsetWidth) ?? 0;
+  const swipeStart = useRef(0);
+
+  const getInitialDrag = () => ({
+    initial: TRANSFORM,
+    start: 0,
+    isDown: false,
+    drag: 0,
+    finished: true,
+    pointers: true,
+  });
+
+  const [drag, setDrag] = useState(getInitialDrag);
+
+  const [styles, setStyles] = useState<{
+    drawer: CSSProperties | undefined;
+    mask: CSSProperties | undefined;
+  }>();
+
+  const getDrawerTransform = (value: number) => {
+    switch (position) {
+      case 'bottom':
+      case 'top':
+        return `translateY(${TRANSFORM - value}px)`;
+      case 'right':
+      case 'left':
+      default:
+        return `translateX(${TRANSFORM - value}px)`;
+    }
+  };
+
+  const getMaskOpacity = (value: number) => 1 + value / itemSize;
+
+  const resetStyles = () => {
+    setStyles(undefined);
+    setDrag(getInitialDrag());
+  };
+
+  const isContainedInArea = ({
+    element,
+    condition,
+  }: {
+    element: HTMLElement | undefined;
+    condition(element: HTMLElement): boolean;
+  }): boolean => {
+    if (!element) {
+      return false;
+    }
+
+    if (element === swipeRef.current) {
+      return false;
+    }
+
+    if (!element.parentElement) {
+      return false;
+    }
+
+    return condition(element) || isContainedInArea({ element: element.parentElement, condition });
+  };
+
+  const isSwipeEnabled = (eventData: SwipeEventData): boolean => {
+    const element = eventData.event.target as HTMLElement;
+    const equalDirectionsCondition = (el: HTMLElement) => {
+      const directions = el.getAttribute(DATA_SWIPE_DIRECTIONS_ATTRIBUTE)?.split(' ') ?? [];
+      return directions.some(direction => direction === eventData.dir);
+    };
+
+    if (isContainedInArea({ element, condition: equalDirectionsCondition })) {
+      return false;
+    }
+
+    return position === SWIPE_DIRECTION_TO_POSITION_MAP[eventData.dir];
+  };
+
+  const handleSwipeStart: SwipeCallback = () => {
+    swipeStart.current = Date.now();
+  };
+
+  const handleSwiping: SwipeCallback = eventData => {
+    if (!isSwipeEnabled(eventData)) {
+      return;
+    }
+
+    if (!canCloseDrawer.current) {
+      return;
+    }
+
+    let adjustedDrag = 0;
+    const element = eventData.event.target as HTMLElement;
+
+    switch (position) {
+      case 'left':
+        if (isContainedInArea({ element, condition: el => el.scrollWidth - el.offsetWidth > el.scrollLeft })) {
+          canCloseDrawer.current = false;
+          return;
+        }
+        adjustedDrag = Math.max(0, -eventData.deltaX);
+        break;
+      case 'right':
+        if (isContainedInArea({ element, condition: el => el.scrollLeft > 0 })) {
+          canCloseDrawer.current = false;
+          return;
+        }
+        adjustedDrag = Math.min(0, -eventData.deltaX);
+        break;
+      case 'top':
+        if (isContainedInArea({ element, condition: el => el.scrollHeight - el.offsetHeight > el.scrollTop })) {
+          canCloseDrawer.current = false;
+          return;
+        }
+        adjustedDrag = Math.max(0, -eventData.deltaY);
+        break;
+      case 'bottom':
+        if (isContainedInArea({ element, condition: el => el.scrollTop > 0 })) {
+          canCloseDrawer.current = false;
+          return;
+        }
+        adjustedDrag = Math.min(0, -eventData.deltaY);
+        break;
+      default:
+        break;
+    }
+
+    setDrag(prevDrag => ({
+      ...prevDrag,
+      drag: adjustedDrag,
+      pointers: eventData.absX < Number.MIN_SAFE_INTEGER,
+    }));
+
+    setStyles({
+      drawer: { transform: getDrawerTransform(adjustedDrag), transition: 'none' },
+      mask: { opacity: getMaskOpacity(adjustedDrag), transition: 'none' },
+    });
+  };
+
+  const handleSwiped: SwipeCallback = eventData => {
+    if (!isSwipeEnabled(eventData)) {
+      return resetStyles();
+    }
+
+    if (Date.now() - swipeStart.current > SWIPE_DURATION) {
+      return resetStyles();
+    }
+
+    if (!canCloseDrawer.current) {
+      canCloseDrawer.current = true;
+      return resetStyles();
+    }
+
+    onSwiped();
+    setStyles({ drawer: { transform: getDrawerTransform(drag.drag) }, mask: { opacity: getMaskOpacity(drag.drag) } });
+    setDrag(prevDrag => ({ ...prevDrag, drag: 0, isDown: false, finished: true, pointers: true }));
+  };
+
+  const { ref, ...swipeProps } = useSwipeable({
+    onSwipeStart: handleSwipeStart,
+    onSwiping: handleSwiping,
+    onSwiped: handleSwiped,
+    enabled,
+    availableDirections: [POSITION_TO_SWIPE_DIRECTION_MAP[position]],
+    trackMouse: true,
+  });
+
+  return {
+    swipeRef: mergeRefs(ref as (value: HTMLDivElement) => void, swipeRef),
+    drawerStyles: styles?.drawer,
+    maskStyles: styles?.mask,
+    showPointer: !drag.pointers,
+    swipeProps,
+    drawerMotionProps: {
+      onLeaveActive: () => setStyles(undefined),
+      onLeaveEnd: () => setStyles(undefined),
+    },
+  };
+}

package/src/components/MobileDrawerCustom/index.ts

@@ -0,0 +1 @@
+export * from './MobileDrawerCustom';

package/src/components/MobileDrawerCustom/motion.css

@@ -0,0 +1,117 @@
+.maskMotionMobile {
+  opacity: unset;
+}
+.maskMotionMobile-enter, .maskMotionMobile-appear {
+  opacity: 0;
+}
+.maskMotionMobile-enter-active, .maskMotionMobile-appear-active {
+  opacity: 1;
+  transition: opacity 0.2s;
+}
+.maskMotionMobile-leave {
+  opacity: 1;
+}
+.maskMotionMobile-leave-active {
+  opacity: 0;
+  transition: opacity 0.1s;
+}
+
+.panelMotionMobile {
+  transform: unset;
+}
+
+/** LEFT */
+.panelMotionMobile-left-enter-start, .panelMotionMobile-left-appear-start, .panelMotionMobile-left-leave-start {
+  transition: none !important;
+}
+.panelMotionMobile-left-enter-active, .panelMotionMobile-left-appear-active {
+  transition: transform 0.2s ease-in-out;
+}
+.panelMotionMobile-left-leave-active {
+  transition: transform 0.1s ease-out;
+}
+.panelMotionMobile-left-enter, .panelMotionMobile-left-appear {
+  transform: translateX(-100%);
+}
+.panelMotionMobile-left-enter-active, .panelMotionMobile-left-appear-active {
+  transform: translateX(0);
+}
+.panelMotionMobile-left-leave {
+  transform: translateX(0);
+}
+.panelMotionMobile-left-leave-active {
+  transform: translateX(-100%) !important;
+}
+/*********/
+
+/** RIGHT */
+.panelMotionMobile-right-enter-start, .panelMotionMobile-right-appear-start, .panelMotionMobile-right-leave-start {
+  transition: none !important;
+}
+.panelMotionMobile-right-enter-active, .panelMotionMobile-right-appear-active {
+  transition: transform 0.2s ease-in-out;
+}
+.panelMotionMobile-right-leave-active {
+  transition: transform 0.1s ease-out;
+}
+.panelMotionMobile-right-enter, .panelMotionMobile-right-appear {
+  transform: translateX(100%);
+}
+.panelMotionMobile-right-enter-active, .panelMotionMobile-right-appear-active {
+  transform: translateX(0);
+}
+.panelMotionMobile-right-leave {
+  transform: translateX(0);
+}
+.panelMotionMobile-right-leave-active {
+  transform: translateX(100%) !important;
+}
+/**********/
+
+/** BOTTOM */
+.panelMotionMobile-bottom-enter-start, .panelMotionMobile-bottom-appear-start, .panelMotionMobile-bottom-leave-start {
+  transition: none !important;
+}
+.panelMotionMobile-bottom-enter-active, .panelMotionMobile-bottom-appear-active {
+  transition: transform 0.2s ease-in-out;
+}
+.panelMotionMobile-bottom-leave-active {
+  transition: transform 0.1s ease-out;
+}
+.panelMotionMobile-bottom-enter, .panelMotionMobile-bottom-appear {
+  transform: translateY(100%);
+}
+.panelMotionMobile-bottom-enter-active, .panelMotionMobile-bottom-appear-active {
+  transform: translateY(0);
+}
+.panelMotionMobile-bottom-leave {
+  transform: translateY(0);
+}
+.panelMotionMobile-bottom-leave-active {
+  transform: translateY(100%) !important;
+}
+/***********/
+
+/** TOP */
+.panelMotionMobile-top-enter-start, .panelMotionMobile-top-appear-start, .panelMotionMobile-top-leave-start {
+  transition: none !important;
+}
+.panelMotionMobile-top-enter-active, .panelMotionMobile-top-appear-active {
+  transition: transform 0.2s ease-in-out;
+}
+.panelMotionMobile-top-leave-active {
+  transition: transform 0.1s ease-out;
+}
+.panelMotionMobile-top-enter, .panelMotionMobile-top-appear {
+  transform: translateY(-100%);
+}
+.panelMotionMobile-top-enter-active, .panelMotionMobile-top-appear-active {
+  transform: translateY(0);
+}
+.panelMotionMobile-top-leave {
+  transform: translateY(0);
+}
+.panelMotionMobile-top-leave-active {
+  transform: translateY(-100%) !important;
+}
+/********/

package/src/components/MobileDrawerCustom/styles.module.scss

@@ -0,0 +1,219 @@
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/components/styles-tokens-drawer';
+
+$modes: ('regular', 'soft');
+$sizes: ('s', 'm', 'l');
+$drawer-background-color: (
+  'regular': styles-tokens-drawer.$sys-neutral-background1-level,
+  'soft': styles-tokens-drawer.$sys-neutral-background2-level,
+);
+
+.content {
+  flex-grow: 1;
+  min-width: styles-tokens-drawer.$dimension-5m;
+  min-height: styles-tokens-drawer.$dimension-5m;
+  display: flex;
+  flex-direction: column;
+
+  &[data-swipe] {
+    cursor: grab;
+
+    &[data-pointers] {
+      cursor: grabbing;
+      user-select: none;
+
+      -webkit-user-drag: none;
+    }
+  }
+}
+
+.drawerRoot {
+  z-index: initial !important; /* stylelint-disable-line declaration-no-important */
+
+  &,
+  & * {
+    overscroll-behavior-y: contain;
+  }
+
+  div[data-content-wrapper='true'] {
+    will-change: transform;
+
+    z-index: initial;
+    overflow: hidden;
+    touch-action: none;
+
+    &[data-position='left'],
+    &[data-position='right'] {
+      height: 100%;
+      max-height: 100%;
+      max-width: calc(100% - #{styles-tokens-drawer.$space-drawer-outside-gap});
+      top: 0;
+      bottom: 0;
+
+      .content {
+        max-height: 100dvh;
+      }
+
+      @each $size in $sizes {
+        &[data-size='#{$size}'] {
+          @include styles-tokens-drawer.composite-var(styles-tokens-drawer.$drawer, 'window', $size);
+        }
+      }
+    }
+
+    &[data-position='left'] {
+      left: 0;
+
+      &[data-border-radius] {
+        border-bottom-right-radius: 12px;
+        border-top-right-radius: 12px;
+      }
+
+      &[data-outline] {
+        border-right: 1px solid styles-tokens-drawer.$sys-neutral-decor-default;
+      }
+    }
+
+    &[data-position='right'] {
+      right: 0;
+
+      &[data-border-radius] {
+        border-bottom-left-radius: 12px;
+        border-top-left-radius: 12px;
+      }
+
+      &[data-outline] {
+        border-left: 1px solid styles-tokens-drawer.$sys-neutral-decor-default;
+      }
+    }
+
+    &[data-position='bottom'],
+    &[data-position='top'] {
+      width: 100%;
+      max-width: 100%;
+      max-height: calc(100% - #{styles-tokens-drawer.$space-drawer-outside-gap});
+      left: 0;
+      right: 0;
+
+      .content {
+        max-height: calc(100dvh - #{styles-tokens-drawer.$space-drawer-outside-gap});
+      }
+
+      @each $size in $sizes {
+        &[data-size='#{$size}'] {
+          height: styles-tokens-drawer.simple-var(styles-tokens-drawer.$drawer, 'window', $size, 'width');
+          min-height: styles-tokens-drawer.simple-var(styles-tokens-drawer.$drawer, 'window', $size, 'min-width');
+        }
+      }
+    }
+
+    &[data-position='bottom'] {
+      bottom: 0;
+
+      &[data-border-radius] {
+        border-top-left-radius: 12px;
+        border-top-right-radius: 12px;
+      }
+
+      &[data-outline] {
+        border-top: 1px solid styles-tokens-drawer.$sys-neutral-decor-default;
+      }
+    }
+
+    &[data-position='top'] {
+      top: 0;
+
+      &[data-border-radius] {
+        border-bottom-left-radius: 12px;
+        border-bottom-right-radius: 12px;
+      }
+
+      &[data-outline] {
+        border-bottom: 1px solid styles-tokens-drawer.$sys-neutral-decor-default;
+      }
+    }
+
+    @each $mode in $modes {
+      &[data-mode='#{$mode}'] {
+        .drawer {
+          background-color: styles-tokens-drawer.simple-var($drawer-background-color, $mode);
+        }
+      }
+    }
+  }
+}
+
+.drawer {
+  overflow: unset;
+  display: flex;
+  flex-direction: column;
+
+  box-sizing: border-box;
+
+  box-shadow: styles-tokens-drawer.simple-var(styles-tokens-drawer.$box-shadow-elevation-level5);
+}
+
+.mask {
+  z-index: initial !important; /* stylelint-disable-line declaration-no-important */
+  background-color: styles-tokens-drawer.simple-var(styles-tokens-drawer.$sys-blackout);
+}
+
+.maskBlur {
+  backdrop-filter: blur(styles-tokens-drawer.simple-var(styles-tokens-drawer.$background-blur-background-blur));
+}
+
+.drawerBlur {
+  outline: none;
+}
+
+$swiper-length: styles-tokens-drawer.$dimension-10m;
+
+.swiper {
+  position: absolute;
+
+  background-color: styles-tokens-drawer.$sys-neutral-decor-default;
+  border-radius: styles-tokens-drawer.$dimension-050m;
+
+  &[data-position='left'],
+  &[data-position='right'] {
+    width: styles-tokens-drawer.$dimension-050m;
+    height: $swiper-length;
+  }
+
+  &[data-position='left'] {
+    right: styles-tokens-drawer.$dimension-050m;
+    top: calc(50% - $swiper-length / 2);
+  }
+
+  &[data-position='right'] {
+    left: styles-tokens-drawer.$dimension-050m;
+    top: calc(50% - $swiper-length / 2);
+  }
+
+  &[data-position='bottom'],
+  &[data-position='top'] {
+    width: $swiper-length;
+    height: styles-tokens-drawer.$dimension-050m;
+  }
+
+  &[data-position='bottom'] {
+    top: styles-tokens-drawer.$dimension-050m;
+    left: calc(50% - $swiper-length / 2);
+  }
+
+  &[data-position='top'] {
+    bottom: styles-tokens-drawer.$dimension-050m;
+    left: calc(50% - $swiper-length / 2);
+  }
+}
+
+.headerElements {
+  @include styles-tokens-drawer.composite-var(styles-tokens-drawer.$drawer-header-elements-container);
+  @include styles-tokens-drawer.composite-var(styles-tokens-drawer.$drawer-header-elements-elements-layout);
+
+  position: absolute;
+  top: 0;
+  right: 0;
+
+  display: flex;
+  align-items: center;
+}

package/src/components/index.ts

@@ -0,0 +1,2 @@
+export * from './MobileDrawer';
+export * from './MobileDrawerCustom';

package/src/constants.ts

@@ -0,0 +1,42 @@
+export const SIZE = {
+  S: 's',
+  M: 'm',
+  L: 'l',
+} as const;
+
+export const SIZE_AS_VALUES: string[] = Object.values(SIZE);
+
+export const MODE = {
+  Regular: 'regular',
+  Soft: 'soft',
+} as const;
+
+export const MODAL_MODE = {
+  Regular: 'regular',
+  Aggressive: 'aggressive',
+  Forced: 'forced',
+} as const;
+
+export const POSITION = {
+  Right: 'right',
+  Left: 'left',
+  Bottom: 'bottom',
+  Top: 'top',
+} as const;
+
+export const NESTED_DRAWER_PUSH_DISTANCE = 24;
+
+export const TEST_IDS = {
+  closeButton: 'drawer__close-button',
+  header: 'drawer__header',
+  title: 'drawer__title',
+  tooltip: 'drawer__title-tooltip',
+  subtitle: 'drawer__subtitle',
+  image: 'drawer__image',
+  content: 'drawer__body',
+  footer: 'drawer__footer',
+  footerActions: 'drawer__footer-actions',
+  approveButton: 'drawer__approve-button',
+  cancelButton: 'drawer__cancel-button',
+  additionalButton: 'drawer__additional-button',
+};

package/src/helperComponents/Body/Body.tsx

@@ -0,0 +1,28 @@
+import cn from 'classnames';
+import { ReactNode } from 'react';
+
+import { Scroll } from '@snack-uikit/scroll';
+import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
+
+import styles from './styles.module.scss';
+
+export type DrawerBodyProps = WithSupportProps<{
+  /** Контент */
+  content: ReactNode;
+  /** CSS-класс */
+  className?: string;
+}>;
+
+/** Вспомогательный компонент для добавления "тела" в DrawerCustom */
+export function DrawerBody({ content, className, ...rest }: DrawerBodyProps) {
+  return (
+    <Scroll
+      size='m'
+      barHideStrategy='never'
+      className={cn(styles.drawerBody, className)}
+      {...extractSupportProps(rest)}
+    >
+      {content}
+    </Scroll>
+  );
+}

package/src/helperComponents/Body/index.ts

@@ -0,0 +1 @@
+export * from './Body';

package/src/helperComponents/Body/styles.module.scss

@@ -0,0 +1,11 @@
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/components/styles-tokens-drawer';
+
+.drawerBody {
+  @include styles-tokens-drawer.composite-var(styles-tokens-drawer.$drawer-body);
+  padding: 0 styles-tokens-drawer.$dimension-2m;
+
+  flex: 1 1 auto;
+  box-sizing: border-box;
+  min-height: styles-tokens-drawer.$dimension-2m;
+  color: styles-tokens-drawer.$sys-neutral-text-main;
+}

package/src/helperComponents/ButtonClose/ButtonClose.tsx

@@ -0,0 +1,22 @@
+import { CrossSVG } from '@cloud-ru/uikit-product-icons';
+
+import { TEST_IDS } from '../../constants';
+import styles from './styles.module.scss';
+
+type ButtonCloseProps = {
+  onClick(): void;
+};
+
+export function ButtonClose({ onClick }: ButtonCloseProps) {
+  return (
+    <button
+      type='button'
+      className={styles.buttonClose}
+      onClick={onClick}
+      aria-label='close drawer'
+      data-test-id={TEST_IDS.closeButton}
+    >
+      <CrossSVG />
+    </button>
+  );
+}

package/src/helperComponents/ButtonClose/index.ts

@@ -0,0 +1 @@
+export * from './ButtonClose';

package/src/helperComponents/ButtonClose/styles.module.scss

@@ -0,0 +1,44 @@
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/components/styles-tokens-drawer';
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/components/styles-tokens-element';
+
+.buttonClose {
+  @include styles-tokens-element.composite-var(styles-tokens-drawer.$drawer-button-close);
+
+  cursor: pointer;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+
+  color: styles-tokens-element.simple-var(styles-tokens-element.$sys-neutral-text-support);
+
+  background-color: styles-tokens-element.simple-var(styles-tokens-element.$sys-neutral-decor-default);
+  border: 0 solid transparent;
+  outline: 0;
+  outline-offset: styles-tokens-element.$spacing-state-focus-offset;
+
+  &:hover, &:focus-visible {
+    color: styles-tokens-element.simple-var(styles-tokens-element.$sys-neutral-text-main);
+    background-color: styles-tokens-element.simple-var(styles-tokens-element.$sys-neutral-decor-hovered);
+  }
+
+  &:focus-visible {
+    @include styles-tokens-element.outline-var(styles-tokens-element.$container-focused-s);
+
+    outline-color: styles-tokens-element.$sys-available-complementary;
+  }
+
+  &:active {
+    color: styles-tokens-element.simple-var(styles-tokens-element.$sys-neutral-text-main);
+    background-color: styles-tokens-element.simple-var(styles-tokens-element.$sys-neutral-decor-activated);
+  }
+
+  svg {
+    width: styles-tokens-element.$icon-s !important; /* stylelint-disable-line declaration-no-important */
+    height: styles-tokens-element.$icon-s !important; /* stylelint-disable-line declaration-no-important */
+  }
+}