@yr3/ui 1.1.5 → 1.1.6
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.
- package/dist/index.cjs +10 -1
- package/dist/index.d.cts +1 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +10 -1
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -3590,7 +3590,7 @@ var initialPropsComponent2 = {
|
|
|
3590
3590
|
container: {},
|
|
3591
3591
|
onClose: false
|
|
3592
3592
|
};
|
|
3593
|
-
var Drawer = ({ open, anchor = null, onClose, children, propsComponent }) => {
|
|
3593
|
+
var Drawer = ({ open, anchor = null, onClose, children, propsComponent, onTransitionEnd }) => {
|
|
3594
3594
|
const { show, hide } = useBackdrop();
|
|
3595
3595
|
const ref = React9.useRef(null);
|
|
3596
3596
|
const properties = mergeDeep2(initialPropsComponent2, propsComponent);
|
|
@@ -3617,6 +3617,10 @@ var Drawer = ({ open, anchor = null, onClose, children, propsComponent }) => {
|
|
|
3617
3617
|
}, [properties?.onClose]);
|
|
3618
3618
|
const classesBem = bem("yr3Drawer");
|
|
3619
3619
|
const drawerClasses = classesBem(void 0, { [anchor]: anchor, open });
|
|
3620
|
+
const stateRef = React9.useRef(open ? "in" : "out");
|
|
3621
|
+
React9.useEffect(() => {
|
|
3622
|
+
stateRef.current = open ? "in" : "out";
|
|
3623
|
+
}, [open]);
|
|
3620
3624
|
return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
3621
3625
|
"div",
|
|
3622
3626
|
{
|
|
@@ -3624,6 +3628,11 @@ var Drawer = ({ open, anchor = null, onClose, children, propsComponent }) => {
|
|
|
3624
3628
|
style: properties?.drawer,
|
|
3625
3629
|
onClick: (e) => e.stopPropagation(),
|
|
3626
3630
|
ref,
|
|
3631
|
+
onTransitionEnd: (e) => {
|
|
3632
|
+
if (e.target === e.currentTarget && e.propertyName === "transform") {
|
|
3633
|
+
onTransitionEnd?.(stateRef?.current);
|
|
3634
|
+
}
|
|
3635
|
+
},
|
|
3627
3636
|
"data-testid": "yr3Drawer",
|
|
3628
3637
|
children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
3629
3638
|
DrawerContainer_default,
|
package/dist/index.d.cts
CHANGED
|
@@ -2104,6 +2104,7 @@ type DrawerProps = {
|
|
|
2104
2104
|
onClose: () => void;
|
|
2105
2105
|
children?: React$1.ReactNode;
|
|
2106
2106
|
anchor?: 'left' | 'right' | 'top' | 'bottom' | null;
|
|
2107
|
+
onTransitionEnd?: (state: 'in' | 'out') => void;
|
|
2107
2108
|
propsComponent?: {
|
|
2108
2109
|
drawer?: React$1.CSSProperties;
|
|
2109
2110
|
closing?: "drawer" | "container" | null;
|
package/dist/index.d.ts
CHANGED
|
@@ -2104,6 +2104,7 @@ type DrawerProps = {
|
|
|
2104
2104
|
onClose: () => void;
|
|
2105
2105
|
children?: React$1.ReactNode;
|
|
2106
2106
|
anchor?: 'left' | 'right' | 'top' | 'bottom' | null;
|
|
2107
|
+
onTransitionEnd?: (state: 'in' | 'out') => void;
|
|
2107
2108
|
propsComponent?: {
|
|
2108
2109
|
drawer?: React$1.CSSProperties;
|
|
2109
2110
|
closing?: "drawer" | "container" | null;
|
package/dist/index.js
CHANGED
|
@@ -3469,7 +3469,7 @@ var initialPropsComponent2 = {
|
|
|
3469
3469
|
container: {},
|
|
3470
3470
|
onClose: false
|
|
3471
3471
|
};
|
|
3472
|
-
var Drawer = ({ open, anchor = null, onClose, children, propsComponent }) => {
|
|
3472
|
+
var Drawer = ({ open, anchor = null, onClose, children, propsComponent, onTransitionEnd }) => {
|
|
3473
3473
|
const { show, hide } = useBackdrop();
|
|
3474
3474
|
const ref = React9.useRef(null);
|
|
3475
3475
|
const properties = mergeDeep2(initialPropsComponent2, propsComponent);
|
|
@@ -3496,6 +3496,10 @@ var Drawer = ({ open, anchor = null, onClose, children, propsComponent }) => {
|
|
|
3496
3496
|
}, [properties?.onClose]);
|
|
3497
3497
|
const classesBem = bem("yr3Drawer");
|
|
3498
3498
|
const drawerClasses = classesBem(void 0, { [anchor]: anchor, open });
|
|
3499
|
+
const stateRef = React9.useRef(open ? "in" : "out");
|
|
3500
|
+
React9.useEffect(() => {
|
|
3501
|
+
stateRef.current = open ? "in" : "out";
|
|
3502
|
+
}, [open]);
|
|
3499
3503
|
return /* @__PURE__ */ jsx18(
|
|
3500
3504
|
"div",
|
|
3501
3505
|
{
|
|
@@ -3503,6 +3507,11 @@ var Drawer = ({ open, anchor = null, onClose, children, propsComponent }) => {
|
|
|
3503
3507
|
style: properties?.drawer,
|
|
3504
3508
|
onClick: (e) => e.stopPropagation(),
|
|
3505
3509
|
ref,
|
|
3510
|
+
onTransitionEnd: (e) => {
|
|
3511
|
+
if (e.target === e.currentTarget && e.propertyName === "transform") {
|
|
3512
|
+
onTransitionEnd?.(stateRef?.current);
|
|
3513
|
+
}
|
|
3514
|
+
},
|
|
3506
3515
|
"data-testid": "yr3Drawer",
|
|
3507
3516
|
children: /* @__PURE__ */ jsx18(
|
|
3508
3517
|
DrawerContainer_default,
|