fix(SidePanel): remove default slide-in focus trap (carbon-design-sys…

…tem#5432)
emyarod · Jun 11, 2024 · 793b7d2 · 793b7d2
1 parent 28e0140
commit 793b7d2
Showing 1 changed file with 8 additions and 5 deletions.
diff --git a/packages/ibm-products/src/components/SidePanel/SidePanel.tsx b/packages/ibm-products/src/components/SidePanel/SidePanel.tsx
@@ -49,7 +49,7 @@ type SidePanelBaseProps = {
  /**
  * Sets the action toolbar buttons
  */
- actionToolbarButtons?: ButtonProps[];
+ actionToolbarButtons?: ButtonProps<any>[];
 
  /**
  * The primary actions to be shown in the side panel. Each action is
@@ -59,7 +59,7 @@ type SidePanelBaseProps = {
  *
  * See https://react.carbondesignsystem.com/?path=/docs/components-button--default#component-api
  */
- actions?: ButtonProps[];
+ actions?: ButtonProps<any>[];
 
  /**
  * Determines if the title will animate on scroll
@@ -623,12 +623,12 @@ export let SidePanel = React.forwardRef(
  if (primeFocusEl) {
  (primeFocusEl as HTMLElement)?.focus();
  }
- } else {
+ } else if (!slideIn) {
  firstElement?.focus();
  }
  }, 0);
  }
- }, [animationComplete, firstElement, open, selectorPrimaryFocus]);
+ }, [animationComplete, firstElement, open, selectorPrimaryFocus, slideIn]);
 
  const primaryActionContainerClassNames = cx([
  `${blockClass}__actions-container`,
@@ -844,7 +844,7 @@ export let SidePanel = React.forwardRef(
  animate="visible"
  exit="exit"
  custom={{ placement, shouldReduceMotion }}
- onKeyDown={keyDownListener}
+ onKeyDown={slideIn ? undefined : keyDownListener}
  >
  <>
  {/* header */}
@@ -889,6 +889,7 @@ SidePanel.propTypes = {
  /**
  * Sets the action toolbar buttons
  */
+ /**@ts-ignore */
  actionToolbarButtons: PropTypes.arrayOf(
  PropTypes.shape({
  label: PropTypes.string,
@@ -922,6 +923,7 @@ SidePanel.propTypes = {
  ActionSet.validateActions(),
  PropTypes.arrayOf(
  PropTypes.shape({
+ /**@ts-ignore */
  ...Button.propTypes,
  kind: PropTypes.oneOf([
  'ghost',
@@ -935,6 +937,7 @@ SidePanel.propTypes = {
  label: PropTypes.string,
  loading: PropTypes.bool,
  // we duplicate this Button prop to improve the DocGen here
+ /**@ts-ignore */
  onClick: Button.propTypes.onClick,
  })
  ),