@cloud-ru/ds-drawer 1.0.4 → 1.0.5-preview-98332145.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/dist/cjs/components/DrawerCustom/DrawerCustom.js +4 -2
  2. package/dist/cjs/components/DrawerCustom/styles.module.css +13 -2
  3. package/dist/cjs/style.css +13 -2
  4. package/dist/esm/components/DrawerCustom/DrawerCustom.js +4 -2
  5. package/dist/esm/components/DrawerCustom/styles.module.css +13 -2
  6. package/dist/esm/style.css +13 -2
  7. package/dist/tsconfig.cjs.tsbuildinfo +1 -1
  8. package/dist/tsconfig.esm.tsbuildinfo +1 -1
  9. package/package.json +9 -9
  10. package/src/components/DrawerCustom/DrawerCustom.tsx +10 -3
  11. package/src/components/DrawerCustom/styles.module.scss +17 -2
package/dist/cjs/components/DrawerCustom/DrawerCustom.js CHANGED
@@ -52,12 +52,14 @@ function DrawerFrame(props) {
52
52
  const focusTrapRef = (0, hooks_1.useDrawerFocusTrap)(Boolean(open));
53
53
  const outerScrollLock = (0, hooks_1.useOuterScrollLock)(Boolean(open));
54
54
  // Без явного container портал идёт через PortalContextProvider (как у Modal): скоуп к локальному
55
- // элементу и отказ от body-level scroll lock, который rc-drawer ставит при рендере в document.body.
55
+ // контейнеру вместо document.body. Скролл фона лочит `RemoveScroll` — у `@rc-component/drawer`
56
+ // своего body scroll lock больше нет; wheel по mask / нескроллируемым зонам панели не должен
57
+ // крутить страницу под дровером.
56
58
  const portalContextRef = (0, portal_context_1.usePortalContext)();
57
59
  const resolvedContainer = container ?? (portalContextRef.current ? () => portalContextRef.current : undefined);
58
60
  return ((0, jsx_runtime_1.jsx)(RcDrawer, { resizable: drawerResizable, panelRef: checkElement, mask: showBlackout, maskClosable: showBlackout, keyboard: showBlackout, "data-showblackout": showBlackout, open: open, onClose: onClose, push: push, getContainer: resolvedContainer, placement: position, destroyOnHidden: true, rootClassName: (0, classnames_1.default)(styles_module_scss_1.default.drawerRoot, rootClassName), style: drawerPanelStyle, classNames: {
59
61
  section: (0, classnames_1.default)(styles_module_scss_1.default.drawer, className),
60
- }, size: isPredefinedWidth ? 'null' : width, ...(0, utils_1.extractSupportProps)(rest), "data-content-wrapper": true, "data-position": position, "data-width": isPredefinedWidth ? width : undefined, "data-height-auto": heightAutoVertical ? true : undefined, "data-acrylic-appearance": 'neutral', "data-acrylic-level": '1Level', prefixCls: 'snack-rc-drawer', ...(disableMotions ? {} : constants_2.motionProps), children: (0, jsx_runtime_1.jsxs)(react_remove_scroll_1.RemoveScroll, { enabled: showBlackout || outerScrollLock, removeScrollBar: false, ref: focusTrapRef, className: styles_module_scss_1.default.focusScope, children: [showButtonClosed && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.showButtonClosedWrapper, children: (0, jsx_runtime_1.jsx)(popup_private_1.PopupCloseButton, { className: styles_module_scss_1.default.showButtonClosed, "aria-label": 'close drawer', "data-test-id": constants_1.TEST_IDS.closeButton, onClick: onClose }) })), (0, jsx_runtime_1.jsx)(bottom_sheet_1.OverlaySurfaceProvider, { surface: bottom_sheet_1.OVERLAY_SURFACE.Drawer, bodyHeightAuto: heightAutoVertical, children: children }), tooltip, nestedDrawer] }) }));
62
+ }, size: isPredefinedWidth ? 'null' : width, ...(0, utils_1.extractSupportProps)(rest), "data-content-wrapper": true, "data-position": position, "data-width": isPredefinedWidth ? width : undefined, "data-height-auto": heightAutoVertical ? true : undefined, "data-acrylic-appearance": 'neutral', "data-acrylic-level": '1Level', prefixCls: 'snack-rc-drawer', ...(disableMotions ? {} : constants_2.motionProps), children: (0, jsx_runtime_1.jsxs)(react_remove_scroll_1.RemoveScroll, { enabled: showBlackout || outerScrollLock, removeScrollBar: false, ref: focusTrapRef, className: styles_module_scss_1.default.scrollLock, children: [showButtonClosed && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.showButtonClosedWrapper, children: (0, jsx_runtime_1.jsx)(popup_private_1.PopupCloseButton, { className: styles_module_scss_1.default.showButtonClosed, "aria-label": 'close drawer', "data-test-id": constants_1.TEST_IDS.closeButton, onClick: onClose }) })), (0, jsx_runtime_1.jsx)(bottom_sheet_1.OverlaySurfaceProvider, { surface: bottom_sheet_1.OVERLAY_SURFACE.Drawer, bodyHeightAuto: heightAutoVertical, children: children }), tooltip, nestedDrawer] }) }));
61
63
  }
62
64
  /**
63
65
  * Адаптивный low-level `DrawerCustom`: на `mobile` — `BottomSheetCustom`, иначе — `DrawerFrame`.
package/dist/cjs/components/DrawerCustom/styles.module.css CHANGED
@@ -18,6 +18,7 @@
18
18
  position:absolute;
19
19
  z-index:initial;
20
20
  inset:0;
21
+ overscroll-behavior:none;
21
22
  opacity:1;
22
23
  background-color:var(--sn-theme-color-blackout, var(--sn-brand-color-overlay-forLightMode-blackout, rgba(0, 0, 0, 0.3215686275)));
23
24
  transition:opacity 0.2s;
@@ -38,6 +39,8 @@
38
39
  .drawerRoot:global(.snack-rc-drawer) :global .snack-rc-drawer-section{
39
40
  pointer-events:auto;
40
41
  position:relative;
42
+ overflow:hidden;
43
+ overscroll-behavior:none;
41
44
  display:flex;
42
45
  flex-direction:column;
43
46
  flex-grow:1;
@@ -470,8 +473,16 @@
470
473
  background:var(--sn-theme-color-neutral-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(124, 131, 182, 0.0784313725)));
471
474
  }
472
475
 
473
- .focusScope{
474
- display:contents;
476
+ .scrollLock{
477
+ display:flex;
478
+ flex:1 1 auto;
479
+ flex-direction:column;
480
+ align-self:stretch;
481
+ box-sizing:border-box;
482
+ width:100%;
483
+ min-width:0;
484
+ height:100%;
485
+ min-height:0;
475
486
  }
476
487
 
477
488
  .showButtonClosed{
package/dist/cjs/style.css CHANGED
@@ -37,6 +37,7 @@
37
37
  position:absolute;
38
38
  z-index:initial;
39
39
  inset:0;
40
+ overscroll-behavior:none;
40
41
  opacity:1;
41
42
  background-color:var(--sn-theme-color-blackout, var(--sn-brand-color-overlay-forLightMode-blackout, rgba(0, 0, 0, 0.3215686275)));
42
43
  transition:opacity 0.2s;
@@ -57,6 +58,8 @@
57
58
  .drawerRoot:global(.snack-rc-drawer) :global .snack-rc-drawer-section{
58
59
  pointer-events:auto;
59
60
  position:relative;
61
+ overflow:hidden;
62
+ overscroll-behavior:none;
60
63
  display:flex;
61
64
  flex-direction:column;
62
65
  flex-grow:1;
@@ -489,8 +492,16 @@
489
492
  background:var(--sn-theme-color-neutral-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(124, 131, 182, 0.0784313725)));
490
493
  }
491
494
 
492
- .focusScope{
493
- display:contents;
495
+ .scrollLock{
496
+ display:flex;
497
+ flex:1 1 auto;
498
+ flex-direction:column;
499
+ align-self:stretch;
500
+ box-sizing:border-box;
501
+ width:100%;
502
+ min-width:0;
503
+ height:100%;
504
+ min-height:0;
494
505
  }
495
506
 
496
507
  .showButtonClosed{
package/dist/esm/components/DrawerCustom/DrawerCustom.js CHANGED
@@ -46,12 +46,14 @@ function DrawerFrame(props) {
46
46
  const focusTrapRef = useDrawerFocusTrap(Boolean(open));
47
47
  const outerScrollLock = useOuterScrollLock(Boolean(open));
48
48
  // Без явного container портал идёт через PortalContextProvider (как у Modal): скоуп к локальному
49
- // элементу и отказ от body-level scroll lock, который rc-drawer ставит при рендере в document.body.
49
+ // контейнеру вместо document.body. Скролл фона лочит `RemoveScroll` — у `@rc-component/drawer`
50
+ // своего body scroll lock больше нет; wheel по mask / нескроллируемым зонам панели не должен
51
+ // крутить страницу под дровером.
50
52
  const portalContextRef = usePortalContext();
51
53
  const resolvedContainer = container ?? (portalContextRef.current ? () => portalContextRef.current : undefined);
52
54
  return (_jsx(RcDrawer, { resizable: drawerResizable, panelRef: checkElement, mask: showBlackout, maskClosable: showBlackout, keyboard: showBlackout, "data-showblackout": showBlackout, open: open, onClose: onClose, push: push, getContainer: resolvedContainer, placement: position, destroyOnHidden: true, rootClassName: cn(styles.drawerRoot, rootClassName), style: drawerPanelStyle, classNames: {
53
55
  section: cn(styles.drawer, className),
54
- }, size: isPredefinedWidth ? 'null' : width, ...extractSupportProps(rest), "data-content-wrapper": true, "data-position": position, "data-width": isPredefinedWidth ? width : undefined, "data-height-auto": heightAutoVertical ? true : undefined, "data-acrylic-appearance": 'neutral', "data-acrylic-level": '1Level', prefixCls: 'snack-rc-drawer', ...(disableMotions ? {} : motionProps), children: _jsxs(RemoveScroll, { enabled: showBlackout || outerScrollLock, removeScrollBar: false, ref: focusTrapRef, className: styles.focusScope, children: [showButtonClosed && (_jsx("div", { className: styles.showButtonClosedWrapper, children: _jsx(PopupCloseButton, { className: styles.showButtonClosed, "aria-label": 'close drawer', "data-test-id": TEST_IDS.closeButton, onClick: onClose }) })), _jsx(OverlaySurfaceProvider, { surface: OVERLAY_SURFACE.Drawer, bodyHeightAuto: heightAutoVertical, children: children }), tooltip, nestedDrawer] }) }));
56
+ }, size: isPredefinedWidth ? 'null' : width, ...extractSupportProps(rest), "data-content-wrapper": true, "data-position": position, "data-width": isPredefinedWidth ? width : undefined, "data-height-auto": heightAutoVertical ? true : undefined, "data-acrylic-appearance": 'neutral', "data-acrylic-level": '1Level', prefixCls: 'snack-rc-drawer', ...(disableMotions ? {} : motionProps), children: _jsxs(RemoveScroll, { enabled: showBlackout || outerScrollLock, removeScrollBar: false, ref: focusTrapRef, className: styles.scrollLock, children: [showButtonClosed && (_jsx("div", { className: styles.showButtonClosedWrapper, children: _jsx(PopupCloseButton, { className: styles.showButtonClosed, "aria-label": 'close drawer', "data-test-id": TEST_IDS.closeButton, onClick: onClose }) })), _jsx(OverlaySurfaceProvider, { surface: OVERLAY_SURFACE.Drawer, bodyHeightAuto: heightAutoVertical, children: children }), tooltip, nestedDrawer] }) }));
55
57
  }
56
58
  /**
57
59
  * Адаптивный low-level `DrawerCustom`: на `mobile` — `BottomSheetCustom`, иначе — `DrawerFrame`.
package/dist/esm/components/DrawerCustom/styles.module.css CHANGED
@@ -18,6 +18,7 @@
18
18
  position:absolute;
19
19
  z-index:initial;
20
20
  inset:0;
21
+ overscroll-behavior:none;
21
22
  opacity:1;
22
23
  background-color:var(--sn-theme-color-blackout, var(--sn-brand-color-overlay-forLightMode-blackout, rgba(0, 0, 0, 0.3215686275)));
23
24
  transition:opacity 0.2s;
@@ -38,6 +39,8 @@
38
39
  .drawerRoot:global(.snack-rc-drawer) :global .snack-rc-drawer-section{
39
40
  pointer-events:auto;
40
41
  position:relative;
42
+ overflow:hidden;
43
+ overscroll-behavior:none;
41
44
  display:flex;
42
45
  flex-direction:column;
43
46
  flex-grow:1;
@@ -470,8 +473,16 @@
470
473
  background:var(--sn-theme-color-neutral-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(124, 131, 182, 0.0784313725)));
471
474
  }
472
475
 
473
- .focusScope{
474
- display:contents;
476
+ .scrollLock{
477
+ display:flex;
478
+ flex:1 1 auto;
479
+ flex-direction:column;
480
+ align-self:stretch;
481
+ box-sizing:border-box;
482
+ width:100%;
483
+ min-width:0;
484
+ height:100%;
485
+ min-height:0;
475
486
  }
476
487
 
477
488
  .showButtonClosed{
package/dist/esm/style.css CHANGED
@@ -37,6 +37,7 @@
37
37
  position:absolute;
38
38
  z-index:initial;
39
39
  inset:0;
40
+ overscroll-behavior:none;
40
41
  opacity:1;
41
42
  background-color:var(--sn-theme-color-blackout, var(--sn-brand-color-overlay-forLightMode-blackout, rgba(0, 0, 0, 0.3215686275)));
42
43
  transition:opacity 0.2s;
@@ -57,6 +58,8 @@
57
58
  .drawerRoot:global(.snack-rc-drawer) :global .snack-rc-drawer-section{
58
59
  pointer-events:auto;
59
60
  position:relative;
61
+ overflow:hidden;
62
+ overscroll-behavior:none;
60
63
  display:flex;
61
64
  flex-direction:column;
62
65
  flex-grow:1;
@@ -489,8 +492,16 @@
489
492
  background:var(--sn-theme-color-neutral-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(124, 131, 182, 0.0784313725)));
490
493
  }
491
494
 
492
- .focusScope{
493
- display:contents;
495
+ .scrollLock{
496
+ display:flex;
497
+ flex:1 1 auto;
498
+ flex-direction:column;
499
+ align-self:stretch;
500
+ box-sizing:border-box;
501
+ width:100%;
502
+ min-width:0;
503
+ height:100%;
504
+ min-height:0;
494
505
  }
495
506
 
496
507
  .showButtonClosed{