@cloud-ru/ds-drawer 1.0.6-preview-fd6730e3.0 → 1.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cloud-ru/ds-drawer",
-  "version": "1.0.6-preview-fd6730e3.0",
+  "version": "1.0.6",
   "description": "Пакет выезжающих панелей — компоненты Drawer и DrawerCustom с едиными токенами позиции и ширины.",
   "repository": {
     "type": "git",
@@ -40,13 +40,13 @@
     "classnames": "^2.5.1",
     "react-remove-scroll": "^2.7.2",
     "tabbable": "^6.5.0",
-    "@cloud-ru/ds-adaptive": "1.0.1",
-    "@cloud-ru/ds-bottom-sheet": "1.0.5-preview-fd6730e3.0",
-    "@cloud-ru/ds-materials": "1.0.1",
-    "@cloud-ru/ds-popup-private": "1.0.4-preview-fd6730e3.0",
-    "@cloud-ru/ds-portal-context": "1.0.1",
-    "@cloud-ru/ds-scroll": "1.0.2",
-    "@cloud-ru/ds-tooltip": "1.0.3",
-    "@cloud-ru/ds-utils": "1.1.0"
+    "@cloud-ru/ds-adaptive": "^1.0.1",
+    "@cloud-ru/ds-popup-private": "^1.0.4",
+    "@cloud-ru/ds-portal-context": "^1.0.1",
+    "@cloud-ru/ds-tooltip": "^1.0.4",
+    "@cloud-ru/ds-scroll": "^1.0.2",
+    "@cloud-ru/ds-materials": "^1.0.1",
+    "@cloud-ru/ds-utils": "^1.1.0",
+    "@cloud-ru/ds-bottom-sheet": "^1.0.5"
   }
 }

package/src/components/DrawerCustom/DrawerCustom.tsx

@@ -118,7 +118,7 @@ function DrawerFrame(props: DrawerCustomProps) {
       data-height-auto={heightAutoVertical ? true : undefined}
       data-acrylic-appearance='neutral'
       data-acrylic-level='1Level'
-      prefixCls={styles.prefixCls}
+      prefixCls='snack-rc-drawer'
       {...(disableMotions ? {} : motionProps)}
     >
       {/*

package/src/components/DrawerCustom/constants.ts

@@ -1,16 +1,14 @@
 import { DrawerProps } from '@rc-component/drawer';
 
-import styles from './styles.module.scss';
-
 export const maskMotion: DrawerProps['maskMotion'] = {
   motionAppear: true,
-  motionName: styles.maskMotionName,
+  motionName: 'maskMotion',
 };
 
 export const motion: DrawerProps['motion'] = placement => ({
   motionAppear: true,
   motionDeadline: 300,
-  motionName: `${styles.panelMotionName}-${placement}`,
+  motionName: `panelMotion-${placement}`,
 });
 
 export const motionProps: Partial<DrawerProps> = {

package/src/components/DrawerCustom/hooks/useDrawerResize.tsx

@@ -3,10 +3,9 @@ import { isBrowser } from '@cloud-ru/ds-utils';
 import { DrawerProps } from '@rc-component/drawer';
 import { useCallback, useMemo, useRef, useState } from 'react';
 
-import styles from '../styles.module.scss';
 import { DrawerCustomProps } from '../types';
 
-const DRAGGER_SELECTOR = `.${styles.prefixCls}-resizable-dragger`;
+const DRAGGER_SELECTOR = '.snack-rc-drawer-resizable-dragger';
 
 type UseDrawerResizeParams = Pick<DrawerCustomProps, 'position' | 'resizable'>;
 

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

@@ -10,20 +10,6 @@ $draggerWidth: base.$sn-primitive-dimension-4;
 $draggerPosition: calc(drawer.$sn-drawer-anatomy-container-vertical-positionLeft-paddingRight - $draggerWidth - base.$sn-primitive-dimension-6);
 $activeDraggerHeight: calc(base.$sn-primitive-dimension-32 + base.$sn-primitive-dimension-24);
 
-// Классы rc-drawer/rc-motion глобальные (css-модуль их не хеширует), поэтому свои — с namespace и
-// версией: у легаси-шелла консоли те же `.maskMotion-*` / `.panelMotion-*`, и его правила дёргают
-// панель вбок. В JS имена уходят через `:export`. Версию бампать при сломе разметки или кадров.
-$classVersion: 'v1';
-$prefixCls: 'cloud-ru-ds-drawer-#{$classVersion}';
-$maskMotionName: '#{$prefixCls}-mask-motion';
-$panelMotionName: '#{$prefixCls}-panel-motion';
-
-:export {
-  maskMotionName: #{$maskMotionName};
-  panelMotionName: #{$panelMotionName};
-  prefixCls: #{$prefixCls};
-}
-
 // placement → offscreen transform для panelMotion-*
 $panelMotions: (
   'left': translateX(-100%),
@@ -32,18 +18,14 @@ $panelMotions: (
   'bottom': translateY(100%),
 );
 
-.drawerRoot:global(.#{$prefixCls}) {
+.drawerRoot:global(.snack-rc-drawer) {
   pointer-events: none;
 
   position: fixed;
   z-index: initial;
   inset: 0;
 
-  // 🔴 Не обрезаем панель корнем: пока панель едет трансформом, обрезка заставляет браузер
-  // пересчитывать её в главном потоке каждый кадр — на тяжёлом кадре движение дёргается.
-  // Корень — `position: fixed`, а фиксированные элементы не участвуют в прокрутке документа,
-  // поэтому выехавшая за экран панель полос прокрутки не создаёт.
-  overflow: visible;
+  overflow: hidden;
 
   transition: width 0s ease 0.3s, height 0s ease 0.3s, transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
 
@@ -51,12 +33,12 @@ $panelMotions: (
     transition: transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86), opacity 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86), box-shadow 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
   }
 
-  &:global(.#{$prefixCls}-open) {
+  &:global(.snack-rc-drawer-open) {
     transition: transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
   }
 
   :global {
-    .#{$prefixCls}-mask {
+    .snack-rc-drawer-mask {
       pointer-events: auto;
 
       position: absolute;
@@ -70,27 +52,27 @@ $panelMotions: (
 
       transition: opacity 0.2s;
 
-      &.#{$maskMotionName}-enter,
-      &.#{$maskMotionName}-appear {
+      &.maskMotion-enter,
+      &.maskMotion-appear {
         opacity: 0;
       }
 
-      &.#{$maskMotionName}-enter-active,
-      &.#{$maskMotionName}-appear-active {
+      &.maskMotion-enter-active,
+      &.maskMotion-appear-active {
         opacity: 1;
       }
 
-      &.#{$maskMotionName}-leave {
+      &.maskMotion-leave {
         opacity: 1;
         transition: opacity 0.1s;
       }
 
-      &.#{$maskMotionName}-leave-active {
+      &.maskMotion-leave-active {
         opacity: 0;
       }
     }
 
-    .#{$prefixCls}-section {
+    .snack-rc-drawer-section {
       pointer-events: auto;
 
       position: relative;
@@ -108,10 +90,10 @@ $panelMotions: (
       box-shadow: base.$sn-boxShadow-elevation-level5;
     }
 
-    .#{$prefixCls}-content-wrapper {
+    .snack-rc-drawer-content-wrapper {
       pointer-events: none;
       will-change: transform;
-      
+
       position: absolute;
       z-index: initial;
 
@@ -130,7 +112,7 @@ $panelMotions: (
       &[data-position='top'] {
         @include base.composite-var(drawer.$drawer, 'anatomy', 'container', 'horizontal', 'positionTop');
 
-        .#{$prefixCls}-section {
+        .snack-rc-drawer-section {
           @include base.composite-var(drawer.$drawer, 'anatomy', 'container', 'horizontal', 'positionTop', 'container');
         }
       }
@@ -140,7 +122,7 @@ $panelMotions: (
 
         @include base.composite-var(drawer.$drawer, 'anatomy', 'container', 'horizontal', 'positionBottom');
 
-        .#{$prefixCls}-section {
+        .snack-rc-drawer-section {
           @include base.composite-var(drawer.$drawer, 'anatomy', 'container', 'horizontal', 'positionBottom', 'container');
         }
       }
@@ -152,7 +134,7 @@ $panelMotions: (
 
         @include base.composite-var(drawer.$drawer, 'anatomy', 'container', 'vertical', 'positionLeft');
 
-        .#{$prefixCls}-section {
+        .snack-rc-drawer-section {
           @include base.composite-var(drawer.$drawer, 'anatomy', 'container', 'vertical', 'positionLeft', 'container');
         }
       }
@@ -164,7 +146,7 @@ $panelMotions: (
 
         @include base.composite-var(drawer.$drawer, 'anatomy', 'container', 'vertical', 'positionRight');
 
-        .#{$prefixCls}-section {
+        .snack-rc-drawer-section {
           @include base.composite-var(drawer.$drawer, 'anatomy', 'container', 'vertical', 'positionRight', 'container');
         }
       }
@@ -207,32 +189,32 @@ $panelMotions: (
       }
 
       @each $placement, $offscreen in $panelMotions {
-        &.#{$panelMotionName}-#{$placement}-enter,
-        &.#{$panelMotionName}-#{$placement}-appear {
+        &.panelMotion-#{$placement}-enter,
+        &.panelMotion-#{$placement}-appear {
           transform: $offscreen;
         }
 
-        &.#{$panelMotionName}-#{$placement}-enter-active,
-        &.#{$panelMotionName}-#{$placement}-appear-active {
+        &.panelMotion-#{$placement}-enter-active,
+        &.panelMotion-#{$placement}-appear-active {
           transform: translate(0);
         }
 
-        &.#{$panelMotionName}-#{$placement}-leave {
+        &.panelMotion-#{$placement}-leave {
           transform: translate(0);
         }
 
-        &.#{$panelMotionName}-#{$placement}-leave-active {
+        &.panelMotion-#{$placement}-leave-active {
           transform: $offscreen;
           transition: transform 0.1s ease-out;
         }
       }
     }
 
-    .#{$prefixCls}-content-wrapper-hidden {
+    .snack-rc-drawer-content-wrapper-hidden {
       display: none;
     }
 
-    .#{$prefixCls}-resizable-dragger {
+    .snack-rc-drawer-resizable-dragger {
       pointer-events: auto;
       cursor: ew-resize;
 
@@ -266,66 +248,66 @@ $panelMotions: (
       }
     }
 
-    .#{$prefixCls}-resizable-dragger-left {
+    .snack-rc-drawer-resizable-dragger-left {
       right: $draggerPosition;
     }
 
-    .#{$prefixCls}-resizable-dragger-right {
+    .snack-rc-drawer-resizable-dragger-right {
       left: $draggerPosition;
     }
   }
 
-  &:global(.#{$prefixCls}-left),
-  &:global(.#{$prefixCls}-right) {
+  &:global(.snack-rc-drawer-left),
+  &:global(.snack-rc-drawer-right) {
     top: 0;
     width: 0%;
     height: 100%;
   }
 
-  &:global(.#{$prefixCls}-left) {
+  &:global(.snack-rc-drawer-left) {
     left: 0;
   }
 
-  &:global(.#{$prefixCls}-right) {
+  &:global(.snack-rc-drawer-right) {
     right: 0;
   }
 
-  &:global(.#{$prefixCls}-top),
-  &:global(.#{$prefixCls}-bottom) {
+  &:global(.snack-rc-drawer-top),
+  &:global(.snack-rc-drawer-bottom) {
     left: 0;
     width: 100%;
     height: 0%;
   }
 
-  &:global(.#{$prefixCls}-top) {
+  &:global(.snack-rc-drawer-top) {
     top: 0;
   }
 
-  &:global(.#{$prefixCls}-bottom) {
+  &:global(.snack-rc-drawer-bottom) {
     bottom: 0;
   }
 
-  &:has(:global(.#{$prefixCls}-resizable-dragger-dragging)) {
+  &:has(:global(.snack-rc-drawer-resizable-dragger-dragging)) {
     cursor: ew-resize;
 
-    :global(.#{$prefixCls}-resizable-dragger) {
+    :global(.snack-rc-drawer-resizable-dragger) {
       height: $activeDraggerHeight;
     }
   }
 
 
-  &:global(.#{$prefixCls}-left.#{$prefixCls}-open),
-  &:global(.#{$prefixCls}-right.#{$prefixCls}-open) {
+  &:global(.snack-rc-drawer-left.snack-rc-drawer-open),
+  &:global(.snack-rc-drawer-right.snack-rc-drawer-open) {
     width: 100%;
   }
 
-  &:global(.#{$prefixCls}-top.#{$prefixCls}-open),
-  &:global(.#{$prefixCls}-bottom.#{$prefixCls}-open) {
+  &:global(.snack-rc-drawer-top.snack-rc-drawer-open),
+  &:global(.snack-rc-drawer-bottom.snack-rc-drawer-open) {
     height: 100%;
   }
 }
 
-.drawerRoot:global(.#{$prefixCls} .#{$prefixCls}-content-wrapper) {
+.drawerRoot:global(.snack-rc-drawer .snack-rc-drawer-content-wrapper) {
   @include m.with-material('acrylic', #{drawer});
 }