@czi-sds/components 22.8.0 → 22.9.1

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 +3 -1
  2. package/dist/index.cjs.js +10 -3
  3. package/dist/index.esm.d.ts +3 -1
  4. package/dist/index.esm.js +10 -3
  5. package/dist/tsconfig.tsbuildinfo +1 -1
  6. package/package.json +2 -2
package/dist/index.cjs.d.ts CHANGED
@@ -1563,12 +1563,12 @@ declare function NavigationFooter({ hasInvertedStyle, images, logo, logoUrl, log
1563
1563
  interface BaseNavigationHeaderPrimaryNavItem<T extends string> extends Record<string, unknown> {
1564
1564
  key: T;
1565
1565
  label: ReactNode;
1566
+ onClick?: (e: React.SyntheticEvent) => void;
1566
1567
  }
1567
1568
  interface TextNavigationHeaderPrimaryNavItem<T extends string> extends BaseNavigationHeaderPrimaryNavItem<T> {
1568
1569
  itemType: "text";
1569
1570
  tag?: string;
1570
1571
  tagColor?: SdsTagColorType;
1571
- onClick?: (e: React.SyntheticEvent) => void;
1572
1572
  }
1573
1573
  interface DropdownItem {
1574
1574
  label: ReactNode;
@@ -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
@@ -14687,13 +14687,14 @@ function NavigationHeaderPrimaryNav(_a) {
14687
14687
  }, []);
14688
14688
  return (jsxRuntime.jsx(StyledSection, { isNarrow: isNarrow, children: items.map(function (item) {
14689
14689
  var _a, _b;
14690
- var key = item.key, label = item.label, tag = item.tag, tagColor = item.tagColor, rest = __rest(item, ["key", "label", "tag", "tagColor"]);
14690
+ var key = item.key, label = item.label, tag = item.tag, tagColor = item.tagColor, parentOnClick = item.onClick, rest = __rest(item, ["key", "label", "tag", "tagColor", "onClick"]);
14691
14691
  var isActive = key === value;
14692
14692
  if (item.itemType === "dropdown" && !isNarrow) {
14693
14693
  var dropdownItem = item;
14694
14694
  return (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsx(PrimaryNavItem, __assign({}, rest, { itemType: item.itemType, ref: buttonRef, sdsStyle: "minimal", active: open, onClick: function (e) {
14695
14695
  setAnchorEl(e.currentTarget);
14696
14696
  onChange(key);
14697
+ parentOnClick === null || parentOnClick === void 0 ? void 0 : parentOnClick(e);
14697
14698
  }, hasInvertedStyle: hasInvertedStyle, isNarrow: isNarrow, children: jsxRuntime.jsxs(StyledLabel, { itemType: item.itemType, active: open, hasInvertedStyle: hasInvertedStyle, isNarrow: isNarrow, children: [label, jsxRuntime.jsx(Icon, { sdsIcon: open ? "ChevronUp" : "ChevronDown", sdsSize: "xs" })] }) })), jsxRuntime.jsx(Menu, { anchorEl: anchorEl, open: open, onClose: onClose, slotProps: {
14698
14699
  paper: {
14699
14700
  style: {
@@ -15484,6 +15485,7 @@ var doNotForwardProps$2 = [
15484
15485
  "disableScrollLock",
15485
15486
  "closeButtonOnClick",
15486
15487
  "CloseButtonComponent",
15488
+ "isBackdropClickEnabled",
15487
15489
  ];
15488
15490
  var basicPanelStyles = function (props) {
15489
15491
  var _a;
@@ -15536,11 +15538,16 @@ var PanelHeaderClose = function (props) {
15536
15538
  function isOverlayPanelProps(props) {
15537
15539
  return props.sdsType === "overlay";
15538
15540
  }
15541
+ var SLOT_PROPS = {
15542
+ backdrop: {
15543
+ invisible: true,
15544
+ },
15545
+ };
15539
15546
  /**
15540
15547
  * @see https://mui.com/material-ui/react-drawer/
15541
15548
  */
15542
15549
  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;
15550
+ 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
15551
  var drawerWidth = width !== null && width !== void 0 ? width : (sdsType === "basic"
15545
15552
  ? PANEL_BASIC_MIN_WIDTH_PX
15546
15553
  : PANEL_OVERLAY_MIN_WIDTH_PX);
@@ -15573,7 +15580,7 @@ var Panel = React__namespace.default.forwardRef(function (props, ref) {
15573
15580
  // (masoudmanson): Set disableScrollLock: true to prevent the Drawer from locking
15574
15581
  // the page scroll when it is open. This is necessary for the SDS Panel, as it should
15575
15582
  // 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] })));
15583
+ 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
15584
  });
15578
15585
 
15579
15586
  var doNotForwardProps$1 = ["buttonDefinition"];
package/dist/index.esm.d.ts CHANGED
@@ -1563,12 +1563,12 @@ declare function NavigationFooter({ hasInvertedStyle, images, logo, logoUrl, log
1563
1563
  interface BaseNavigationHeaderPrimaryNavItem<T extends string> extends Record<string, unknown> {
1564
1564
  key: T;
1565
1565
  label: ReactNode;
1566
+ onClick?: (e: React.SyntheticEvent) => void;
1566
1567
  }
1567
1568
  interface TextNavigationHeaderPrimaryNavItem<T extends string> extends BaseNavigationHeaderPrimaryNavItem<T> {
1568
1569
  itemType: "text";
1569
1570
  tag?: string;
1570
1571
  tagColor?: SdsTagColorType;
1571
- onClick?: (e: React.SyntheticEvent) => void;
1572
1572
  }
1573
1573
  interface DropdownItem {
1574
1574
  label: ReactNode;
@@ -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
@@ -14664,13 +14664,14 @@ function NavigationHeaderPrimaryNav(_a) {
14664
14664
  }, []);
14665
14665
  return (jsx(StyledSection, { isNarrow: isNarrow, children: items.map(function (item) {
14666
14666
  var _a, _b;
14667
- var key = item.key, label = item.label, tag = item.tag, tagColor = item.tagColor, rest = __rest(item, ["key", "label", "tag", "tagColor"]);
14667
+ var key = item.key, label = item.label, tag = item.tag, tagColor = item.tagColor, parentOnClick = item.onClick, rest = __rest(item, ["key", "label", "tag", "tagColor", "onClick"]);
14668
14668
  var isActive = key === value;
14669
14669
  if (item.itemType === "dropdown" && !isNarrow) {
14670
14670
  var dropdownItem = item;
14671
14671
  return (jsxs(Fragment$1, { children: [jsx(PrimaryNavItem, __assign({}, rest, { itemType: item.itemType, ref: buttonRef, sdsStyle: "minimal", active: open, onClick: function (e) {
14672
14672
  setAnchorEl(e.currentTarget);
14673
14673
  onChange(key);
14674
+ parentOnClick === null || parentOnClick === void 0 ? void 0 : parentOnClick(e);
14674
14675
  }, hasInvertedStyle: hasInvertedStyle, isNarrow: isNarrow, children: jsxs(StyledLabel, { itemType: item.itemType, active: open, hasInvertedStyle: hasInvertedStyle, isNarrow: isNarrow, children: [label, jsx(Icon, { sdsIcon: open ? "ChevronUp" : "ChevronDown", sdsSize: "xs" })] }) })), jsx(Menu, { anchorEl: anchorEl, open: open, onClose: onClose, slotProps: {
14675
14676
  paper: {
14676
14677
  style: {
@@ -15461,6 +15462,7 @@ var doNotForwardProps$2 = [
15461
15462
  "disableScrollLock",
15462
15463
  "closeButtonOnClick",
15463
15464
  "CloseButtonComponent",
15465
+ "isBackdropClickEnabled",
15464
15466
  ];
15465
15467
  var basicPanelStyles = function (props) {
15466
15468
  var _a;
@@ -15513,11 +15515,16 @@ var PanelHeaderClose = function (props) {
15513
15515
  function isOverlayPanelProps(props) {
15514
15516
  return props.sdsType === "overlay";
15515
15517
  }
15518
+ var SLOT_PROPS = {
15519
+ backdrop: {
15520
+ invisible: true,
15521
+ },
15522
+ };
15516
15523
  /**
15517
15524
  * @see https://mui.com/material-ui/react-drawer/
15518
15525
  */
15519
15526
  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;
15527
+ 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
15528
  var drawerWidth = width !== null && width !== void 0 ? width : (sdsType === "basic"
15522
15529
  ? PANEL_BASIC_MIN_WIDTH_PX
15523
15530
  : PANEL_OVERLAY_MIN_WIDTH_PX);
@@ -15550,7 +15557,7 @@ var Panel = React__default.forwardRef(function (props, ref) {
15550
15557
  // (masoudmanson): Set disableScrollLock: true to prevent the Drawer from locking
15551
15558
  // the page scroll when it is open. This is necessary for the SDS Panel, as it should
15552
15559
  // 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] })));
15560
+ 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
15561
  });
15555
15562
 
15556
15563
  var doNotForwardProps$1 = ["buttonDefinition"];