@yr3/ui 1.0.14 → 1.0.15

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 (5) hide show
  1. package/dist/index.cjs +24 -13
  2. package/dist/index.d.cts +2 -2
  3. package/dist/index.d.ts +2 -2
  4. package/dist/index.js +24 -13
  5. package/package.json +1 -1
package/dist/index.cjs CHANGED
@@ -724,9 +724,18 @@ var React2 = __toESM(require("react"), 1);
724
724
  var import_jsx_runtime2 = require("react/jsx-runtime");
725
725
  var BackdropContext = React2.createContext(null);
726
726
  var BackdropProvider = ({ children }) => {
727
- const [open, setOpen] = React2.useState(false);
728
- const show = () => setOpen(true);
729
- const hide = () => setOpen(false);
727
+ const [stack, setStack] = React2.useState([]);
728
+ const show = (id) => {
729
+ setStack((prev) => [...prev, id]);
730
+ };
731
+ const hide = (id) => {
732
+ if (id) {
733
+ setStack((prev) => prev.filter((item) => item !== id));
734
+ } else {
735
+ setStack([]);
736
+ }
737
+ };
738
+ const open = stack.length > 0;
730
739
  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(BackdropContext.Provider, { value: { open, show, hide }, children: [
731
740
  children,
732
741
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Backdrop, {})
@@ -1400,7 +1409,7 @@ var DrawerContainer = ({ children, ui, style, props, onClose }) => {
1400
1409
  const { hide } = useBackdrop();
1401
1410
  const handleClose = () => {
1402
1411
  if (props === "container") {
1403
- hide();
1412
+ hide("drawer");
1404
1413
  onClose && onClose();
1405
1414
  }
1406
1415
  return;
@@ -1437,30 +1446,32 @@ var Drawer = ({ open, anchor = null, onClose, children, propsComponent }) => {
1437
1446
  const ref = React8.useRef(null);
1438
1447
  const properties = mergeDeep(initialPropsComponent2, propsComponent);
1439
1448
  React8.useEffect(() => {
1440
- if (!!open) {
1441
- show();
1449
+ if (open) {
1450
+ show("drawer");
1442
1451
  } else {
1443
- hide();
1452
+ hide("drawer");
1444
1453
  }
1445
1454
  }, [open]);
1446
1455
  useClickAway(ref, () => {
1447
1456
  if (!open || properties?.closing === null) return;
1448
1457
  if (properties?.closing === "drawer") {
1449
- hide();
1458
+ hide("drawer");
1450
1459
  onClose();
1451
1460
  }
1452
1461
  ;
1453
1462
  });
1454
1463
  React8.useEffect(() => {
1455
1464
  if (properties?.onClose) {
1456
- hide();
1465
+ hide("drawer");
1457
1466
  onClose();
1458
1467
  }
1459
1468
  }, [properties?.onClose]);
1469
+ const classesBem = bem("yr3Drawer");
1470
+ const drawerClasses = classesBem(void 0, { [anchor]: anchor, open });
1460
1471
  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
1461
1472
  "div",
1462
1473
  {
1463
- className: `yr3Drawer ${anchor && `yr3Drawer--${anchor}`} ${open && "yr3Drawer--open"}`,
1474
+ className: drawerClasses,
1464
1475
  style: properties?.drawer,
1465
1476
  onClick: (e) => e.stopPropagation(),
1466
1477
  ref,
@@ -2109,11 +2120,11 @@ var Modal = ({ open, onClose, children, propsComponent }) => {
2109
2120
  const { show, hide } = useBackdrop();
2110
2121
  React15.useEffect(() => {
2111
2122
  if (open) {
2112
- show();
2123
+ show("modal");
2113
2124
  } else {
2114
- hide();
2125
+ hide("modal");
2115
2126
  }
2116
- }, [open, show]);
2127
+ }, [open]);
2117
2128
  const classes = bem("yr3Modal");
2118
2129
  const classComponent = classes(void 0, { "open": !!open });
2119
2130
  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: classComponent, onClick: (e) => e.stopPropagation(), "data-testid": "yr3Modal", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ModalContainer, { ...propsComponent?.container, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(Flex, { variant: "column", container: true, center: true, gap: 1, children: [
package/dist/index.d.cts CHANGED
@@ -1047,8 +1047,8 @@ declare const Button: React$1.FC<ButtonProps>;
1047
1047
 
1048
1048
  type BackdropContextType = {
1049
1049
  open: boolean;
1050
- show: () => void;
1051
- hide: () => void;
1050
+ show: (id: string) => void;
1051
+ hide: (id: string | null) => void;
1052
1052
  };
1053
1053
  declare const BackdropContext: React$1.Context<BackdropContextType | null>;
1054
1054
  declare const BackdropProvider: ({ children }: any) => react_jsx_runtime.JSX.Element;
package/dist/index.d.ts CHANGED
@@ -1047,8 +1047,8 @@ declare const Button: React$1.FC<ButtonProps>;
1047
1047
 
1048
1048
  type BackdropContextType = {
1049
1049
  open: boolean;
1050
- show: () => void;
1051
- hide: () => void;
1050
+ show: (id: string) => void;
1051
+ hide: (id: string | null) => void;
1052
1052
  };
1053
1053
  declare const BackdropContext: React$1.Context<BackdropContextType | null>;
1054
1054
  declare const BackdropProvider: ({ children }: any) => react_jsx_runtime.JSX.Element;
package/dist/index.js CHANGED
@@ -607,9 +607,18 @@ import * as React2 from "react";
607
607
  import { jsx as jsx2, jsxs } from "react/jsx-runtime";
608
608
  var BackdropContext = React2.createContext(null);
609
609
  var BackdropProvider = ({ children }) => {
610
- const [open, setOpen] = React2.useState(false);
611
- const show = () => setOpen(true);
612
- const hide = () => setOpen(false);
610
+ const [stack, setStack] = React2.useState([]);
611
+ const show = (id) => {
612
+ setStack((prev) => [...prev, id]);
613
+ };
614
+ const hide = (id) => {
615
+ if (id) {
616
+ setStack((prev) => prev.filter((item) => item !== id));
617
+ } else {
618
+ setStack([]);
619
+ }
620
+ };
621
+ const open = stack.length > 0;
613
622
  return /* @__PURE__ */ jsxs(BackdropContext.Provider, { value: { open, show, hide }, children: [
614
623
  children,
615
624
  /* @__PURE__ */ jsx2(Backdrop, {})
@@ -1283,7 +1292,7 @@ var DrawerContainer = ({ children, ui, style, props, onClose }) => {
1283
1292
  const { hide } = useBackdrop();
1284
1293
  const handleClose = () => {
1285
1294
  if (props === "container") {
1286
- hide();
1295
+ hide("drawer");
1287
1296
  onClose && onClose();
1288
1297
  }
1289
1298
  return;
@@ -1320,30 +1329,32 @@ var Drawer = ({ open, anchor = null, onClose, children, propsComponent }) => {
1320
1329
  const ref = React8.useRef(null);
1321
1330
  const properties = mergeDeep(initialPropsComponent2, propsComponent);
1322
1331
  React8.useEffect(() => {
1323
- if (!!open) {
1324
- show();
1332
+ if (open) {
1333
+ show("drawer");
1325
1334
  } else {
1326
- hide();
1335
+ hide("drawer");
1327
1336
  }
1328
1337
  }, [open]);
1329
1338
  useClickAway(ref, () => {
1330
1339
  if (!open || properties?.closing === null) return;
1331
1340
  if (properties?.closing === "drawer") {
1332
- hide();
1341
+ hide("drawer");
1333
1342
  onClose();
1334
1343
  }
1335
1344
  ;
1336
1345
  });
1337
1346
  React8.useEffect(() => {
1338
1347
  if (properties?.onClose) {
1339
- hide();
1348
+ hide("drawer");
1340
1349
  onClose();
1341
1350
  }
1342
1351
  }, [properties?.onClose]);
1352
+ const classesBem = bem("yr3Drawer");
1353
+ const drawerClasses = classesBem(void 0, { [anchor]: anchor, open });
1343
1354
  return /* @__PURE__ */ jsx16(
1344
1355
  "div",
1345
1356
  {
1346
- className: `yr3Drawer ${anchor && `yr3Drawer--${anchor}`} ${open && "yr3Drawer--open"}`,
1357
+ className: drawerClasses,
1347
1358
  style: properties?.drawer,
1348
1359
  onClick: (e) => e.stopPropagation(),
1349
1360
  ref,
@@ -1992,11 +2003,11 @@ var Modal = ({ open, onClose, children, propsComponent }) => {
1992
2003
  const { show, hide } = useBackdrop();
1993
2004
  React15.useEffect(() => {
1994
2005
  if (open) {
1995
- show();
2006
+ show("modal");
1996
2007
  } else {
1997
- hide();
2008
+ hide("modal");
1998
2009
  }
1999
- }, [open, show]);
2010
+ }, [open]);
2000
2011
  const classes = bem("yr3Modal");
2001
2012
  const classComponent = classes(void 0, { "open": !!open });
2002
2013
  return /* @__PURE__ */ jsx28("div", { className: classComponent, onClick: (e) => e.stopPropagation(), "data-testid": "yr3Modal", children: /* @__PURE__ */ jsx28(ModalContainer, { ...propsComponent?.container, children: /* @__PURE__ */ jsxs9(Flex, { variant: "column", container: true, center: true, gap: 1, children: [
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@yr3/ui",
3
- "version": "1.0.14",
3
+ "version": "1.0.15",
4
4
  "main": "dist/index.cjs",
5
5
  "module": "dist/index.js",
6
6
  "types": "dist/index.d.ts",