@czi-sds/components 22.8.0 → 22.9.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 (6) hide show
  1. package/dist/index.cjs.d.ts +2 -0
  2. package/dist/index.cjs.js +8 -2
  3. package/dist/index.esm.d.ts +2 -0
  4. package/dist/index.esm.js +8 -2
  5. package/dist/tsconfig.tsbuildinfo +1 -1
  6. package/package.json +2 -2
package/dist/index.cjs.d.ts CHANGED
@@ -1696,6 +1696,7 @@ interface BasicPanelProps extends Omit<DrawerProps, "variant"> {
1696
1696
  sdsType: "basic"; // Discriminator
1697
1697
  position?: "left" | "right";
1698
1698
  width?: number | string;
1699
+ isBackdropClickEnabled?: boolean;
1699
1700
  }
1700
1701
  interface OverlayPanelProps extends Omit<DrawerProps, "variant"> {
1701
1702
  sdsType: "overlay"; // Discriminator
@@ -1704,6 +1705,7 @@ interface OverlayPanelProps extends Omit<DrawerProps, "variant"> {
1704
1705
  HeaderComponent?: React.ReactNode;
1705
1706
  closeButtonOnClick?: PanelHeaderCloseProps["onClick"];
1706
1707
  CloseButtonComponent?: PanelHeaderCloseProps["CloseButtonComponent"];
1708
+ isBackdropClickEnabled?: boolean;
1707
1709
  }
1708
1710
  // Discriminated Union
1709
1711
  type PanelProps = BasicPanelProps | OverlayPanelProps;
package/dist/index.cjs.js CHANGED
@@ -15484,6 +15484,7 @@ var doNotForwardProps$2 = [
15484
15484
  "disableScrollLock",
15485
15485
  "closeButtonOnClick",
15486
15486
  "CloseButtonComponent",
15487
+ "isBackdropClickEnabled",
15487
15488
  ];
15488
15489
  var basicPanelStyles = function (props) {
15489
15490
  var _a;
@@ -15536,11 +15537,16 @@ var PanelHeaderClose = function (props) {
15536
15537
  function isOverlayPanelProps(props) {
15537
15538
  return props.sdsType === "overlay";
15538
15539
  }
15540
+ var SLOT_PROPS = {
15541
+ backdrop: {
15542
+ invisible: true,
15543
+ },
15544
+ };
15539
15545
  /**
15540
15546
  * @see https://mui.com/material-ui/react-drawer/
15541
15547
  */
15542
15548
  var Panel = React__namespace.default.forwardRef(function (props, ref) {
15543
- var children = props.children, _a = props.sdsType, sdsType = _a === void 0 ? "basic" : _a, _b = props.position, position = _b === void 0 ? "left" : _b, width = props.width, ModalProps = props.ModalProps;
15549
+ var children = props.children, _a = props.sdsType, sdsType = _a === void 0 ? "basic" : _a, _b = props.position, position = _b === void 0 ? "left" : _b, width = props.width, ModalProps = props.ModalProps, _c = props.isBackdropClickEnabled, isBackdropClickEnabled = _c === void 0 ? false : _c;
15544
15550
  var drawerWidth = width !== null && width !== void 0 ? width : (sdsType === "basic"
15545
15551
  ? PANEL_BASIC_MIN_WIDTH_PX
15546
15552
  : PANEL_OVERLAY_MIN_WIDTH_PX);
@@ -15573,7 +15579,7 @@ var Panel = React__namespace.default.forwardRef(function (props, ref) {
15573
15579
  // (masoudmanson): Set disableScrollLock: true to prevent the Drawer from locking
15574
15580
  // the page scroll when it is open. This is necessary for the SDS Panel, as it should
15575
15581
  // not lock the page scroll when it is open.
15576
- disableScrollLock: true }), hideBackdrop: true, children: [isOverlayPanelProps(props) && (jsxRuntime.jsxs(StyledHeaderComponent, { children: [(props === null || props === void 0 ? void 0 : props.HeaderComponent) && (jsxRuntime.jsx(PanelHeader, { children: props === null || props === void 0 ? void 0 : props.HeaderComponent })), jsxRuntime.jsx(PanelHeaderClose, { onClick: props === null || props === void 0 ? void 0 : props.closeButtonOnClick, CloseButtonComponent: props === null || props === void 0 ? void 0 : props.CloseButtonComponent })] })), children] })));
15582
+ disableScrollLock: true }), slotProps: SLOT_PROPS, hideBackdrop: !isBackdropClickEnabled, children: [isOverlayPanelProps(props) && (jsxRuntime.jsxs(StyledHeaderComponent, { children: [(props === null || props === void 0 ? void 0 : props.HeaderComponent) && (jsxRuntime.jsx(PanelHeader, { children: props === null || props === void 0 ? void 0 : props.HeaderComponent })), jsxRuntime.jsx(PanelHeaderClose, { onClick: props === null || props === void 0 ? void 0 : props.closeButtonOnClick, CloseButtonComponent: props === null || props === void 0 ? void 0 : props.CloseButtonComponent })] })), children] })));
15577
15583
  });
15578
15584
 
15579
15585
  var doNotForwardProps$1 = ["buttonDefinition"];
package/dist/index.esm.d.ts CHANGED
@@ -1696,6 +1696,7 @@ interface BasicPanelProps extends Omit<DrawerProps, "variant"> {
1696
1696
  sdsType: "basic"; // Discriminator
1697
1697
  position?: "left" | "right";
1698
1698
  width?: number | string;
1699
+ isBackdropClickEnabled?: boolean;
1699
1700
  }
1700
1701
  interface OverlayPanelProps extends Omit<DrawerProps, "variant"> {
1701
1702
  sdsType: "overlay"; // Discriminator
@@ -1704,6 +1705,7 @@ interface OverlayPanelProps extends Omit<DrawerProps, "variant"> {
1704
1705
  HeaderComponent?: React.ReactNode;
1705
1706
  closeButtonOnClick?: PanelHeaderCloseProps["onClick"];
1706
1707
  CloseButtonComponent?: PanelHeaderCloseProps["CloseButtonComponent"];
1708
+ isBackdropClickEnabled?: boolean;
1707
1709
  }
1708
1710
  // Discriminated Union
1709
1711
  type PanelProps = BasicPanelProps | OverlayPanelProps;
package/dist/index.esm.js CHANGED
@@ -15461,6 +15461,7 @@ var doNotForwardProps$2 = [
15461
15461
  "disableScrollLock",
15462
15462
  "closeButtonOnClick",
15463
15463
  "CloseButtonComponent",
15464
+ "isBackdropClickEnabled",
15464
15465
  ];
15465
15466
  var basicPanelStyles = function (props) {
15466
15467
  var _a;
@@ -15513,11 +15514,16 @@ var PanelHeaderClose = function (props) {
15513
15514
  function isOverlayPanelProps(props) {
15514
15515
  return props.sdsType === "overlay";
15515
15516
  }
15517
+ var SLOT_PROPS = {
15518
+ backdrop: {
15519
+ invisible: true,
15520
+ },
15521
+ };
15516
15522
  /**
15517
15523
  * @see https://mui.com/material-ui/react-drawer/
15518
15524
  */
15519
15525
  var Panel = React__default.forwardRef(function (props, ref) {
15520
- var children = props.children, _a = props.sdsType, sdsType = _a === void 0 ? "basic" : _a, _b = props.position, position = _b === void 0 ? "left" : _b, width = props.width, ModalProps = props.ModalProps;
15526
+ var children = props.children, _a = props.sdsType, sdsType = _a === void 0 ? "basic" : _a, _b = props.position, position = _b === void 0 ? "left" : _b, width = props.width, ModalProps = props.ModalProps, _c = props.isBackdropClickEnabled, isBackdropClickEnabled = _c === void 0 ? false : _c;
15521
15527
  var drawerWidth = width !== null && width !== void 0 ? width : (sdsType === "basic"
15522
15528
  ? PANEL_BASIC_MIN_WIDTH_PX
15523
15529
  : PANEL_OVERLAY_MIN_WIDTH_PX);
@@ -15550,7 +15556,7 @@ var Panel = React__default.forwardRef(function (props, ref) {
15550
15556
  // (masoudmanson): Set disableScrollLock: true to prevent the Drawer from locking
15551
15557
  // the page scroll when it is open. This is necessary for the SDS Panel, as it should
15552
15558
  // not lock the page scroll when it is open.
15553
- disableScrollLock: true }), hideBackdrop: true, children: [isOverlayPanelProps(props) && (jsxs(StyledHeaderComponent, { children: [(props === null || props === void 0 ? void 0 : props.HeaderComponent) && (jsx(PanelHeader, { children: props === null || props === void 0 ? void 0 : props.HeaderComponent })), jsx(PanelHeaderClose, { onClick: props === null || props === void 0 ? void 0 : props.closeButtonOnClick, CloseButtonComponent: props === null || props === void 0 ? void 0 : props.CloseButtonComponent })] })), children] })));
15559
+ disableScrollLock: true }), slotProps: SLOT_PROPS, hideBackdrop: !isBackdropClickEnabled, children: [isOverlayPanelProps(props) && (jsxs(StyledHeaderComponent, { children: [(props === null || props === void 0 ? void 0 : props.HeaderComponent) && (jsx(PanelHeader, { children: props === null || props === void 0 ? void 0 : props.HeaderComponent })), jsx(PanelHeaderClose, { onClick: props === null || props === void 0 ? void 0 : props.closeButtonOnClick, CloseButtonComponent: props === null || props === void 0 ? void 0 : props.CloseButtonComponent })] })), children] })));
15554
15560
  });
15555
15561
 
15556
15562
  var doNotForwardProps$1 = ["buttonDefinition"];