@cloud-ru/ds-drawer 1.0.0 → 1.0.1-preview-fb311860.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 (10) hide show
  1. package/dist/cjs/components/DrawerCustom/hooks/useDrawerResize.js +2 -2
  2. package/dist/cjs/style.css +0 -93
  3. package/dist/esm/components/DrawerCustom/hooks/useDrawerResize.js +2 -2
  4. package/dist/esm/style.css +0 -93
  5. package/dist/tsconfig.cjs.tsbuildinfo +1 -1
  6. package/dist/tsconfig.esm.tsbuildinfo +1 -1
  7. package/package.json +9 -9
  8. package/src/components/DrawerCustom/hooks/useDrawerResize.tsx +9 -2
  9. package/dist/cjs/components/DrawerCustom/motion.css +0 -93
  10. package/dist/esm/components/DrawerCustom/motion.css +0 -93
package/dist/cjs/components/DrawerCustom/hooks/useDrawerResize.js CHANGED
@@ -5,7 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
5
5
  const tooltip_1 = require("@cloud-ru/ds-tooltip");
6
6
  const utils_1 = require("@cloud-ru/ds-utils");
7
7
  const react_1 = require("react");
8
- const DRAGGER_SELECTOR = '.rc-drawer-resizable-dragger';
8
+ const DRAGGER_SELECTOR = '.snack-rc-drawer-resizable-dragger';
9
9
  function useDrawerResize({ position, resizable: resizableProp }) {
10
10
  const targetRef = (0, react_1.useRef)(null);
11
11
  const targetRefCallbackRef = (0, react_1.useRef)();
@@ -21,7 +21,7 @@ function useDrawerResize({ position, resizable: resizableProp }) {
21
21
  targetRefCallbackRef.current ? targetRefCallbackRef.current(element) : (targetRef.current = element);
22
22
  }
23
23
  }, [draggerTooltip]);
24
- const tooltip = draggerTooltip ? ((0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { placement: position, offset: 4, tip: draggerTooltip, open: open && !muted, onOpenChange: setOpen, children: ({ ref: targetRefCallback }) => {
24
+ const tooltip = draggerTooltip ? ((0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { placement: position, offset: 4, hoverDelayOpen: 500, tip: draggerTooltip, open: open && !muted, onOpenChange: setOpen, children: ({ ref: targetRefCallback }) => {
25
25
  if (!targetRefCallback)
26
26
  return null;
27
27
  targetRef.current ? targetRefCallback(targetRef.current) : (targetRefCallbackRef.current = targetRefCallback);
package/dist/cjs/style.css CHANGED
@@ -17,99 +17,6 @@
17
17
  align-self:stretch;
18
18
  padding-bottom:var(--sn-drawer-anatomy-container-safeArea-paddingBottom, var(--sn-density-spacing-interval-s, var(--sn-primitive-dimension-8, 8px)));
19
19
  }
20
- .rc-drawer.rc-drawer-open .rc-drawer-mask{
21
- opacity:unset;
22
- transition:none;
23
- }
24
-
25
- .rc-drawer .rc-drawer-mask.maskMotion{
26
- opacity:unset;
27
- }
28
- .rc-drawer .rc-drawer-mask.maskMotion-enter, .rc-drawer .rc-drawer-mask.maskMotion-appear{
29
- opacity:0;
30
- }
31
- .rc-drawer .rc-drawer-mask.maskMotion-enter-active, .rc-drawer .rc-drawer-mask.maskMotion-appear-active{
32
- opacity:1;
33
- transition:opacity 0.2s;
34
- }
35
- .rc-drawer .rc-drawer-mask.maskMotion-leave{
36
- opacity:1;
37
- }
38
- .rc-drawer .rc-drawer-mask.maskMotion-leave-active{
39
- opacity:0;
40
- transition:opacity 0.1s;
41
- }
42
- .rc-drawer .rc-drawer-content-wrapper.panelMotion{
43
- transform:unset;
44
- }
45
- .rc-drawer .rc-drawer-content-wrapper.panelMotion-left-enter-start, .rc-drawer .rc-drawer-content-wrapper.panelMotion-left-appear-start, .rc-drawer .rc-drawer-content-wrapper.panelMotion-left-leave-start{
46
- transition:none !important;
47
- }
48
- .rc-drawer .rc-drawer-content-wrapper.panelMotion-left-enter, .rc-drawer .rc-drawer-content-wrapper.panelMotion-left-appear{
49
- transform:translateX(-100%);
50
- }
51
- .rc-drawer .rc-drawer-content-wrapper.panelMotion-left-enter-active, .rc-drawer .rc-drawer-content-wrapper.panelMotion-left-appear-active{
52
- transform:translateX(0);
53
- transition:transform 0.2s ease-in-out;
54
- }
55
- .rc-drawer .rc-drawer-content-wrapper.panelMotion-left-leave{
56
- transform:translateX(0);
57
- }
58
- .rc-drawer .rc-drawer-content-wrapper.panelMotion-left-leave-active{
59
- transform:translateX(-100%) !important;
60
- transition:transform 0.1s ease-out;
61
- }
62
- .rc-drawer .rc-drawer-content-wrapper.panelMotion-right-enter-start, .rc-drawer .rc-drawer-content-wrapper.panelMotion-right-appear-start, .rc-drawer .rc-drawer-content-wrapper.panelMotion-right-leave-start{
63
- transition:none !important;
64
- }
65
- .rc-drawer .rc-drawer-content-wrapper.panelMotion-right-enter, .rc-drawer .rc-drawer-content-wrapper.panelMotion-right-appear{
66
- transform:translateX(100%);
67
- }
68
- .rc-drawer .rc-drawer-content-wrapper.panelMotion-right-enter-active, .rc-drawer .rc-drawer-content-wrapper.panelMotion-right-appear-active{
69
- transform:translateX(0);
70
- transition:transform 0.2s ease-in-out;
71
- }
72
- .rc-drawer .rc-drawer-content-wrapper.panelMotion-right-leave{
73
- transform:translateX(0);
74
- }
75
- .rc-drawer .rc-drawer-content-wrapper.panelMotion-right-leave-active{
76
- transform:translateX(100%) !important;
77
- transition:transform 0.1s ease-out;
78
- }
79
- .rc-drawer .rc-drawer-content-wrapper.panelMotion-top-enter-start, .rc-drawer .rc-drawer-content-wrapper.panelMotion-top-appear-start, .rc-drawer .rc-drawer-content-wrapper.panelMotion-top-leave-start{
80
- transition:none !important;
81
- }
82
- .rc-drawer .rc-drawer-content-wrapper.panelMotion-top-enter, .rc-drawer .rc-drawer-content-wrapper.panelMotion-top-appear{
83
- transform:translateY(-100%);
84
- }
85
- .rc-drawer .rc-drawer-content-wrapper.panelMotion-top-enter-active, .rc-drawer .rc-drawer-content-wrapper.panelMotion-top-appear-active{
86
- transform:translateY(0);
87
- transition:transform 0.2s ease-in-out;
88
- }
89
- .rc-drawer .rc-drawer-content-wrapper.panelMotion-top-leave{
90
- transform:translateY(0);
91
- }
92
- .rc-drawer .rc-drawer-content-wrapper.panelMotion-top-leave-active{
93
- transform:translateY(-100%) !important;
94
- transition:transform 0.1s ease-out;
95
- }
96
- .rc-drawer .rc-drawer-content-wrapper.panelMotion-bottom-enter-start, .rc-drawer .rc-drawer-content-wrapper.panelMotion-bottom-appear-start, .rc-drawer .rc-drawer-content-wrapper.panelMotion-bottom-leave-start{
97
- transition:none !important;
98
- }
99
- .rc-drawer .rc-drawer-content-wrapper.panelMotion-bottom-enter, .rc-drawer .rc-drawer-content-wrapper.panelMotion-bottom-appear{
100
- transform:translateY(100%);
101
- }
102
- .rc-drawer .rc-drawer-content-wrapper.panelMotion-bottom-enter-active, .rc-drawer .rc-drawer-content-wrapper.panelMotion-bottom-appear-active{
103
- transform:translateY(0);
104
- transition:transform 0.2s ease-in-out;
105
- }
106
- .rc-drawer .rc-drawer-content-wrapper.panelMotion-bottom-leave{
107
- transform:translateY(0);
108
- }
109
- .rc-drawer .rc-drawer-content-wrapper.panelMotion-bottom-leave-active{
110
- transform:translateY(100%) !important;
111
- transition:transform 0.1s ease-out;
112
- }
113
20
  @charset "UTF-8";
114
21
  .drawerRoot:global(.snack-rc-drawer){
115
22
  pointer-events:none;
package/dist/esm/components/DrawerCustom/hooks/useDrawerResize.js CHANGED
@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
2
2
  import { Tooltip } from '@cloud-ru/ds-tooltip';
3
3
  import { isBrowser } from '@cloud-ru/ds-utils';
4
4
  import { useCallback, useMemo, useRef, useState } from 'react';
5
- const DRAGGER_SELECTOR = '.rc-drawer-resizable-dragger';
5
+ const DRAGGER_SELECTOR = '.snack-rc-drawer-resizable-dragger';
6
6
  export function useDrawerResize({ position, resizable: resizableProp }) {
7
7
  const targetRef = useRef(null);
8
8
  const targetRefCallbackRef = useRef();
@@ -18,7 +18,7 @@ export function useDrawerResize({ position, resizable: resizableProp }) {
18
18
  targetRefCallbackRef.current ? targetRefCallbackRef.current(element) : (targetRef.current = element);
19
19
  }
20
20
  }, [draggerTooltip]);
21
- const tooltip = draggerTooltip ? (_jsx(Tooltip, { placement: position, offset: 4, tip: draggerTooltip, open: open && !muted, onOpenChange: setOpen, children: ({ ref: targetRefCallback }) => {
21
+ const tooltip = draggerTooltip ? (_jsx(Tooltip, { placement: position, offset: 4, hoverDelayOpen: 500, tip: draggerTooltip, open: open && !muted, onOpenChange: setOpen, children: ({ ref: targetRefCallback }) => {
22
22
  if (!targetRefCallback)
23
23
  return null;
24
24
  targetRef.current ? targetRefCallback(targetRef.current) : (targetRefCallbackRef.current = targetRefCallback);
package/dist/esm/style.css CHANGED
@@ -17,99 +17,6 @@
17
17
  align-self:stretch;
18
18
  padding-bottom:var(--sn-drawer-anatomy-container-safeArea-paddingBottom, var(--sn-density-spacing-interval-s, var(--sn-primitive-dimension-8, 8px)));
19
19
  }
20
- .rc-drawer.rc-drawer-open .rc-drawer-mask{
21
- opacity:unset;
22
- transition:none;
23
- }
24
-
25
- .rc-drawer .rc-drawer-mask.maskMotion{
26
- opacity:unset;
27
- }
28
- .rc-drawer .rc-drawer-mask.maskMotion-enter, .rc-drawer .rc-drawer-mask.maskMotion-appear{
29
- opacity:0;
30
- }
31
- .rc-drawer .rc-drawer-mask.maskMotion-enter-active, .rc-drawer .rc-drawer-mask.maskMotion-appear-active{
32
- opacity:1;
33
- transition:opacity 0.2s;
34
- }
35
- .rc-drawer .rc-drawer-mask.maskMotion-leave{
36
- opacity:1;
37
- }
38
- .rc-drawer .rc-drawer-mask.maskMotion-leave-active{
39
- opacity:0;
40
- transition:opacity 0.1s;
41
- }
42
- .rc-drawer .rc-drawer-content-wrapper.panelMotion{
43
- transform:unset;
44
- }
45
- .rc-drawer .rc-drawer-content-wrapper.panelMotion-left-enter-start, .rc-drawer .rc-drawer-content-wrapper.panelMotion-left-appear-start, .rc-drawer .rc-drawer-content-wrapper.panelMotion-left-leave-start{
46
- transition:none !important;
47
- }
48
- .rc-drawer .rc-drawer-content-wrapper.panelMotion-left-enter, .rc-drawer .rc-drawer-content-wrapper.panelMotion-left-appear{
49
- transform:translateX(-100%);
50
- }
51
- .rc-drawer .rc-drawer-content-wrapper.panelMotion-left-enter-active, .rc-drawer .rc-drawer-content-wrapper.panelMotion-left-appear-active{
52
- transform:translateX(0);
53
- transition:transform 0.2s ease-in-out;
54
- }
55
- .rc-drawer .rc-drawer-content-wrapper.panelMotion-left-leave{
56
- transform:translateX(0);
57
- }
58
- .rc-drawer .rc-drawer-content-wrapper.panelMotion-left-leave-active{
59
- transform:translateX(-100%) !important;
60
- transition:transform 0.1s ease-out;
61
- }
62
- .rc-drawer .rc-drawer-content-wrapper.panelMotion-right-enter-start, .rc-drawer .rc-drawer-content-wrapper.panelMotion-right-appear-start, .rc-drawer .rc-drawer-content-wrapper.panelMotion-right-leave-start{
63
- transition:none !important;
64
- }
65
- .rc-drawer .rc-drawer-content-wrapper.panelMotion-right-enter, .rc-drawer .rc-drawer-content-wrapper.panelMotion-right-appear{
66
- transform:translateX(100%);
67
- }
68
- .rc-drawer .rc-drawer-content-wrapper.panelMotion-right-enter-active, .rc-drawer .rc-drawer-content-wrapper.panelMotion-right-appear-active{
69
- transform:translateX(0);
70
- transition:transform 0.2s ease-in-out;
71
- }
72
- .rc-drawer .rc-drawer-content-wrapper.panelMotion-right-leave{
73
- transform:translateX(0);
74
- }
75
- .rc-drawer .rc-drawer-content-wrapper.panelMotion-right-leave-active{
76
- transform:translateX(100%) !important;
77
- transition:transform 0.1s ease-out;
78
- }
79
- .rc-drawer .rc-drawer-content-wrapper.panelMotion-top-enter-start, .rc-drawer .rc-drawer-content-wrapper.panelMotion-top-appear-start, .rc-drawer .rc-drawer-content-wrapper.panelMotion-top-leave-start{
80
- transition:none !important;
81
- }
82
- .rc-drawer .rc-drawer-content-wrapper.panelMotion-top-enter, .rc-drawer .rc-drawer-content-wrapper.panelMotion-top-appear{
83
- transform:translateY(-100%);
84
- }
85
- .rc-drawer .rc-drawer-content-wrapper.panelMotion-top-enter-active, .rc-drawer .rc-drawer-content-wrapper.panelMotion-top-appear-active{
86
- transform:translateY(0);
87
- transition:transform 0.2s ease-in-out;
88
- }
89
- .rc-drawer .rc-drawer-content-wrapper.panelMotion-top-leave{
90
- transform:translateY(0);
91
- }
92
- .rc-drawer .rc-drawer-content-wrapper.panelMotion-top-leave-active{
93
- transform:translateY(-100%) !important;
94
- transition:transform 0.1s ease-out;
95
- }
96
- .rc-drawer .rc-drawer-content-wrapper.panelMotion-bottom-enter-start, .rc-drawer .rc-drawer-content-wrapper.panelMotion-bottom-appear-start, .rc-drawer .rc-drawer-content-wrapper.panelMotion-bottom-leave-start{
97
- transition:none !important;
98
- }
99
- .rc-drawer .rc-drawer-content-wrapper.panelMotion-bottom-enter, .rc-drawer .rc-drawer-content-wrapper.panelMotion-bottom-appear{
100
- transform:translateY(100%);
101
- }
102
- .rc-drawer .rc-drawer-content-wrapper.panelMotion-bottom-enter-active, .rc-drawer .rc-drawer-content-wrapper.panelMotion-bottom-appear-active{
103
- transform:translateY(0);
104
- transition:transform 0.2s ease-in-out;
105
- }
106
- .rc-drawer .rc-drawer-content-wrapper.panelMotion-bottom-leave{
107
- transform:translateY(0);
108
- }
109
- .rc-drawer .rc-drawer-content-wrapper.panelMotion-bottom-leave-active{
110
- transform:translateY(100%) !important;
111
- transition:transform 0.1s ease-out;
112
- }
113
20
  @charset "UTF-8";
114
21
  .drawerRoot:global(.snack-rc-drawer){
115
22
  pointer-events:none;