{"version":3,"sources":["../../src/components/Button/IconButton/IconButton.styles.ts","../../src/components/Button/IconButton/IconButton.tsx","../../src/components/Panel/Panel.types.ts","../../src/useUnmount.ts","../../src/components/Overlay/Overlay.base.tsx","../../src/components/Overlay/Overlay.styles.ts","../../src/components/Overlay/Overlay.tsx","../../src/useEventCallback.ts","../../src/components/FocusTrapZone/FocusTrapZone.tsx","../../src/components/Panel/Panel.base.tsx","../../src/components/Panel/Panel.styles.ts","../../src/components/Panel/Panel.ts"],"names":["getStyles","memoizeFunction","theme","customStyles","baseButtonStyles","getBaseButtonStyles","splitButtonStyles","getSplitButtonStyles","palette","iconButtonStyles","root","padding","width","height","backgroundColor","border","color","semanticColors","link","rootHovered","themeDarkAlt","neutralLighter","selectors","_a","HighContrastSelector","borderColor","rootHasMenu","rootPressed","themeDark","neutralLight","rootExpanded","rootChecked","rootCheckedHovered","neutralQuaternaryAlt","rootDisabled","neutralTertiaryAlt","concatStyleSets","IconButton","_super","__extends","prototype","render","this","props","styles","React","BaseButton","__assign","variantClassName","onRenderText","nullRender","onRenderDescription","__decorate","customizable","PanelType","useUnmount","callback","unmountRef","current","call","getClassNames","classNamesFunction","OverlayBase","_this","initializeComponentRef","allowTouchBodyScroll","_allowTouchBodyScroll","componentDidMount","disableBodyScroll","componentWillUnmount","enableBodyScroll","isDark","isDarkThemed","className","divProps","getNativeProps","divProperties","classNames","GlobalClassNames","rootDark","Overlay","styled","isNone","getGlobalClassNames","fonts","medium","whiteTranslucent40","top","right","bottom","left","position","opacity","visibility","blackTranslucent40","undefined","scope","useEventCallback","fn","callbackRef","Error","useIsomorphicLayoutEffect","useConst","args","_i","arguments","length","apply","DEFAULT_PROPS","disabled","disableFirstFocus","forceFocusInsideTrap","isClickableOutsideFocusTrap","FocusTrapZone","propsWithoutDefaults","ref","firstBumper","lastBumper","mergedRootRef","useMergedRefs","doc","useDocument","isFirstRender","usePrevious","getPropsWithDefaults","internalState","hasFocus","focusStackId","useId","id","children","componentRef","focusPreviouslyFocusedInnerElement","firstFocusableSelector","firstFocusableTarget","_b","disableRestoreFocus","ignoreExternalFocusing","enableAriaHiddenSiblings","bumperProps","style","pointerEvents","tabIndex","focusElementAsync","element","focusAsync","focusFTZ","previouslyFocusedElementInTrapZone","elementContains","firstFocusableChild","querySelector","focusSelector","getNextElement","firstChild","focusBumper","isFirstBumper","nextFocusable","getLastTabbable","getFirstTabbable","focus","returnFocusToInitiator","elementToFocusOnDismiss","focusStack","filter","value","activeElement","body","forceFocusOrClickInTrap","ev","slice","targetElement","target","setTimeout","preventDefault","stopPropagation","disposables","push","on","window","forEach","dispose","modalize","previouslyFocusedElement","useComponentRef","ariaLabelledBy","onFocusCapture","currentTarget","onBlurCapture","relatedTarget","displayName","PanelVisibilityState","PanelBase","_panel","_animationCallback","_hasCustomNavigation","onRenderNavigation","onRenderNavigationContent","dismiss","onDismiss","isActive","defaultPrevented","close","_allowScrollOnPanel","elt","allowOverscrollOnElement","_events","allowScrollOnElement","off","_scrollableContent","_onRenderNavigation","hasCloseButton","_onRenderNavigationContent","_classNames","navigation","closeButtonAriaLabel","onRenderHeader","_onRenderHeader","subComponentStyles","closeButton","_headerTextId","onClick","_onPanelClick","ariaLabel","title","iconProps","iconName","defaultRender","headerTextId","headerText","headerTextProps","header","role","css","_onRenderBody","content","_onRenderFooter","onRenderFooterContent","footer","footerInner","_animateTo","newVisibilityState","open","onOpen","_async","setState","_onTransitionComplete","_clearExistingAnimationTimer","clearTimeout","_updateFooterPosition","onOpened","closed","onDismissed","warnDeprecations","state","isFooterSticky","getId","getDerivedStateFromProps","nextProps","prevState","isOpen","animatingClosed","animatingOpen","Async","EventGroup","_shouldListenForOuterClick","document","_dismissOnOuterClick","componentDidUpdate","previousProps","previousState","shouldListenOnOuterClick","previousShouldListenOnOuterClick","focusTrapZoneProps","_c","headerClassName","isBlocking","isFooterAtBottom","isLightDismiss","isHiddenOnDismiss","layerProps","overlayProps","popupProps","type","customWidth","_d","onLightDismissClick","_e","_f","_g","onRenderBody","_h","onRenderFooter","_j","isLeft","smallFixedNear","customNear","isOnRightSide","getRTL","customWidthStyles","custom","nativeProps","isAnimating","focusTrapZoneClassName","hasCustomNavigation","overlay","Layer","Popup","hiddenPanel","main","contentInner","scrollableContent","commands","Object","defineProperty","clientHeight","innerHeight_1","scrollHeight","panel","onOuterClick","defaultProps","smallFixedFar","smallFluid","large","largeFixed","extraLarge","panelWidth","panelMargin","smallPanelSelectors","ScreenWidthMinMedium","mediumPanelSelectors","ScreenWidthMinLarge","ScreenWidthMinXLarge","largePanelSelectors","ScreenWidthMinUhfMobile","ScreenWidthMinXXLarge","largeFixedPanelSelectors","extraLargePanelSelectors","getPanelBreakpoints","sharedPaddingStyles","paddingLeft","paddingRight","Panel","effects","isCustomPanel","cursor","AnimationClassNames","fadeIn100","fadeOut100","bodyBackground","boxShadow","elevation64","display","flexDirection","overflowX","overflowY","WebkitOverflowScrolling","borderLeft","variantBorder","borderRight","maxWidth","slideRightIn40","slideLeftIn40","slideLeftOut40","slideRightOut40","paddingTop","zIndex","justifyContent","flexGrow","alignSelf","flexShrink","xLarge","bodyText","lineHeight","overflowWrap","wordWrap","wordBreak","hyphens","paddingBottom","borderTop","transition","AnimationVariables","durationValue3","easeFunction2","borderTopColor","marginRight","neutralSecondary","fontSize","IconFontSizes","neutralPrimary"],"mappings":"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","file":"static/js/1.7d55bf7f.chunk.js","sourcesContent":["import { concatStyleSets, HighContrastSelector } from '../../../Styling';\nimport { memoizeFunction } from '../../../Utilities';\nimport { getStyles as getBaseButtonStyles } from '../BaseButton.styles';\nimport { getStyles as getSplitButtonStyles } from '../SplitButton/SplitButton.styles';\nimport type { IButtonStyles } from '../Button.types';\nimport type { ITheme } from '../../../Styling';\n\nexport const getStyles = memoizeFunction((theme: ITheme, customStyles?: IButtonStyles): IButtonStyles => {\n  const baseButtonStyles: IButtonStyles = getBaseButtonStyles(theme);\n  const splitButtonStyles: IButtonStyles = getSplitButtonStyles(theme);\n  const { palette, semanticColors } = theme;\n  const iconButtonStyles: IButtonStyles = {\n    root: {\n      padding: '0 4px',\n      width: '32px',\n      height: '32px',\n      backgroundColor: 'transparent',\n      border: 'none',\n      color: semanticColors.link,\n    },\n\n    rootHovered: {\n      color: palette.themeDarkAlt,\n      backgroundColor: palette.neutralLighter,\n      selectors: {\n        [HighContrastSelector]: {\n          borderColor: 'Highlight',\n          color: 'Highlight',\n        },\n      },\n    },\n\n    rootHasMenu: {\n      width: 'auto',\n    },\n\n    rootPressed: {\n      color: palette.themeDark,\n      backgroundColor: palette.neutralLight,\n    },\n\n    rootExpanded: {\n      color: palette.themeDark,\n      backgroundColor: palette.neutralLight,\n    },\n\n    rootChecked: {\n      color: palette.themeDark,\n      backgroundColor: palette.neutralLight,\n    },\n\n    rootCheckedHovered: {\n      color: palette.themeDark,\n      backgroundColor: palette.neutralQuaternaryAlt,\n    },\n\n    rootDisabled: {\n      color: palette.neutralTertiaryAlt,\n    },\n  };\n\n  return concatStyleSets(baseButtonStyles, iconButtonStyles, splitButtonStyles, customStyles)!;\n});\n","import * as React from 'react';\nimport { BaseButton } from '../BaseButton';\nimport { customizable, nullRender } from '../../../Utilities';\nimport { getStyles } from './IconButton.styles';\nimport type { IButtonProps } from '../Button.types';\n\n/**\n * {@docCategory Button}\n */\n@customizable('IconButton', ['theme', 'styles'], true)\nexport class IconButton extends React.Component<IButtonProps, {}> {\n  public render(): JSX.Element {\n    const { styles, theme } = this.props;\n\n    return (\n      <BaseButton\n        {...this.props}\n        variantClassName=\"ms-Button--icon\"\n        styles={getStyles(theme!, styles)}\n        onRenderText={nullRender}\n        onRenderDescription={nullRender}\n      />\n    );\n  }\n}\n","import * as React from 'react';\nimport { PanelBase } from './Panel.base';\nimport type { IFocusTrapZoneProps } from '../../FocusTrapZone';\nimport type { ILayerProps } from '../../Layer';\nimport type { IOverlayProps } from '../../Overlay';\nimport type { IStyle, ITheme } from '../../Styling';\nimport type { IRefObject, IRenderFunction, IStyleFunctionOrObject } from '../../Utilities';\nimport type { IButtonStyles } from '../../Button';\nimport type { IPopupProps } from '../../Popup';\n\n/**\n * {@docCategory Panel}\n */\nexport interface IPanel {\n  /**\n   * Forces the panel to open.\n   */\n  open: () => void;\n\n  /**\n   * Forces the panel to dismiss.\n   */\n  dismiss: (ev?: React.KeyboardEvent<HTMLElement> | KeyboardEvent) => void;\n}\n\n/**\n * {@docCategory Panel}\n */\nexport interface IPanelProps extends React.HTMLAttributes<PanelBase> {\n  /**\n   * Optional callback to access the IPanel interface. Use this instead of ref for accessing\n   * the public methods and properties of the component.\n   */\n  componentRef?: IRefObject<IPanel>;\n\n  /**\n   * Whether the panel is displayed.\n   * If true, will cause panel to stay open even if dismissed.\n   * If false, will cause panel to stay hidden.\n   * If undefined, will allow the panel to control its own visibility through open/dismiss methods.\n   * @defaultvalue undefined\n   */\n  isOpen?: boolean;\n\n  /**\n   * Has the close button visible.\n   * @defaultvalue true\n   */\n  hasCloseButton?: boolean;\n\n  /**\n   * Whether the panel can be light dismissed.\n   * @defaultvalue false\n   */\n  isLightDismiss?: boolean;\n\n  /**\n   * Whether the panel is hidden on dismiss, instead of destroyed in the DOM.\n   * Protects the contents from being destroyed when the panel is dismissed.\n   * @defaultvalue false\n   */\n  isHiddenOnDismiss?: boolean;\n\n  /**\n   * Whether the panel uses a modal overlay or not\n   * @defaultvalue true\n   */\n  isBlocking?: boolean;\n\n  /**\n   * Determines if content should stretch to fill available space putting footer at the bottom of the page\n   * @defaultvalue false\n   */\n  isFooterAtBottom?: boolean;\n\n  /**\n   * Header text for the Panel.\n   * @defaultvalue \"\"\n   */\n  headerText?: string;\n\n  /**\n   * The props for header text container.\n   */\n  headerTextProps?: React.HTMLAttributes<HTMLDivElement>;\n\n  /**\n   * A callback function for when the Panel is opened, before the animation completes.\n   */\n  onOpen?: () => void;\n\n  /**\n   * A callback function for when the Panel is opened, after the animation completes.\n   */\n  onOpened?: () => void;\n\n  /**\n   * A callback function for when the panel is closed, before the animation completes.\n   * If the panel should NOT be dismissed based on some keyboard event, then simply call ev.preventDefault() on it\n   */\n  onDismiss?: (ev?: React.SyntheticEvent<HTMLElement> | KeyboardEvent) => void;\n\n  /**\n   * A callback function which is called **after** the Panel is dismissed and the animation is complete.\n   * (If you need to update the Panel's `isOpen` prop in response to a dismiss event, use `onDismiss` instead.)\n   */\n  onDismissed?: () => void;\n\n  /**\n   * Call to provide customized styling that will layer on top of the variant rules.\n   */\n  styles?: IStyleFunctionOrObject<IPanelStyleProps, IPanelStyles>;\n\n  /**\n   * Theme provided by High-Order Component.\n   */\n  theme?: ITheme;\n\n  /**\n   * Additional css class to apply to the Panel\n   * @defaultvalue undefined\n   */\n  className?: string;\n\n  /**\n   * Type of the panel.\n   * @defaultvalue PanelType.smallFixedFar\n   */\n  type?: PanelType;\n\n  /**\n   * Custom panel width, used only when `type` is set to `PanelType.custom`.\n   */\n  customWidth?: string;\n\n  /**\n   * Aria label on close button\n   */\n  closeButtonAriaLabel?: string;\n\n  /**\n   * Optional parameter to provider the class name for header text\n   */\n  headerClassName?: string;\n\n  /**\n   * Sets the HTMLElement to focus on when exiting the FocusTrapZone.\n   * @defaultvalue The `element.target` that triggered the Panel.\n   */\n  elementToFocusOnDismiss?: HTMLElement;\n\n  /**\n   * Indicates if this Panel will ignore keeping track of HTMLElement that activated the Zone.\n   * @defaultvalue false\n   * @deprecated Use `focusTrapZoneProps`.\n   */\n  ignoreExternalFocusing?: boolean;\n\n  /**\n   * Indicates whether Panel should force focus inside the focus trap zone.\n   * If not explicitly specified, behavior aligns with FocusTrapZone's default behavior.\n   * @deprecated Use `focusTrapZoneProps`.\n   */\n  forceFocusInsideTrap?: boolean;\n\n  /**\n   * Indicates the selector for first focusable item.\n   * @deprecated Use `focusTrapZoneProps`.\n   */\n  firstFocusableSelector?: string;\n\n  /**\n   * Optional props to pass to the FocusTrapZone component to manage focus in the panel.\n   */\n  focusTrapZoneProps?: IFocusTrapZoneProps;\n\n  /**\n   * Optional props to pass to the Layer component hosting the panel.\n   */\n  layerProps?: ILayerProps;\n\n  /**\n   * Optional props to pass to the Overlay component that the panel uses.\n   */\n  overlayProps?: IOverlayProps;\n\n  /**\n   * Optional props to pass the Popup component that the panel uses.\n   */\n  popupProps?: IPopupProps;\n\n  /**\n   * Optional custom function to handle clicks outside the panel in lightdismiss mode\n   */\n  onLightDismissClick?: () => void;\n\n  /**\n   * Optional custom function to handle clicks outside this component\n   */\n  onOuterClick?: (ev?: React.MouseEvent<HTMLDivElement>) => void;\n\n  /**\n   * Optional custom renderer navigation region. Replaces the region that contains the close button.\n   */\n  onRenderNavigation?: IRenderFunction<IPanelProps>;\n\n  /**\n   * Optional custom renderer for content in the navigation region. Replaces current close button.\n   */\n  onRenderNavigationContent?: IRenderFunction<IPanelProps>;\n\n  /**\n   * Optional custom renderer for header region. Replaces current title\n   */\n  onRenderHeader?: IPanelHeaderRenderer;\n\n  /**\n   * Optional custom renderer for body region. Replaces any children passed into the component.\n   */\n  onRenderBody?: IRenderFunction<IPanelProps>;\n\n  /**\n   * Optional custom renderer for footer region. Replaces sticky footer.\n   */\n  onRenderFooter?: IRenderFunction<IPanelProps>;\n\n  /**\n   * Custom renderer for content in the sticky footer\n   */\n  onRenderFooterContent?: IRenderFunction<IPanelProps>;\n\n  /**\n   * @deprecated Not used.\n   */\n  componentId?: string;\n\n  /**\n   * Allow body scroll on content and overlay on touch devices. Changing after mounting has no effect.\n   * @defaultvalue false\n   */\n  allowTouchBodyScroll?: boolean;\n}\n\n/**\n * Renderer function which takes an additional parameter, the ID to use for the element containing\n * the panel's title. This allows the `aria-labelledby` for the panel popup to work correctly.\n * Note that if `headerTextId` is provided, it **must** be used on an element, or screen readers\n * will be confused by the reference to a nonexistent ID.\n * {@docCategory Panel}\n */\nexport interface IPanelHeaderRenderer extends IRenderFunction<IPanelProps> {\n  /**\n   * @param props - Props given to the panel\n   * @param defaultRender - Default header renderer. If using this renderer in code that does not\n   * assign `headerTextId` to an element elsewhere, it **must** be passed to this function.\n   * @param headerTextId - If provided, this **must** be used as the ID of an element containing the\n   * panel's title, because the panel popup uses this ID as its aria-labelledby.\n   */\n  (props?: IPanelProps, defaultRender?: IPanelHeaderRenderer, headerTextId?: string | undefined): JSX.Element | null;\n}\n\n/**\n * {@docCategory Panel}\n */\nexport enum PanelType {\n  /**\n   * Renders the Panel with a `fluid` (full screen) width.\n   * Recommended for use on small screen breakpoints.\n   * - Small (320-479): full screen width, 16px left/right padding\n   * - Medium (480-639): full screen width, 16px left/right padding\n   * - Large (640-1023): full screen width, 32px left/right padding\n   * - XLarge (1024-1365): full screen width, 32px left/right padding\n   * - XXLarge (1366-up): full screen width, 40px left/right padding\n   */\n  smallFluid = 0,\n\n  /**\n   * Renders the Panel in fixed-width `small` size, anchored to the far side (right in LTR mode).\n   * - Small (320-479): adapts to `PanelType.smallFluid` at this breakpoint\n   * - Medium (480-639): 340px width, 16px left/right padding\n   * - Large (640-1023): 340px width, 32px left/right padding\n   * - XLarge (1024-1365): 340px width, 32px left/right padding\n   * - XXLarge (1366-up): 340px width, 40px left/right padding\n   */\n  smallFixedFar = 1,\n\n  /**\n   * Renders the Panel in fixed-width `small` size, anchored to the near side (left in LTR mode).\n   * - Small (320-479): 272px width, 16px left/right padding\n   * - Medium (480-639): 272px width, 16px left/right padding\n   * - Large (640-1023): 272px width, 32px left/right padding\n   * - XLarge (1024-1365): 272px width, 32px left/right padding\n   * - XXLarge (1366-up): 272px width, 40px left/right padding\n   */\n  smallFixedNear = 2,\n\n  /**\n   * Renders the Panel in `medium` size, anchored to the far side (right in LTR mode).\n   * - Small (320-479): adapts to `PanelType.smallFluid` at this breakpoint\n   * - Medium (480-639): adapts to `PanelType.smallFixedFar` at this breakpoint\n   * - Large (640-1023): 592px width, 32px left/right padding\n   * - XLarge (1024-1365): 644px width, 32px left/right padding\n   * - XXLarge (1366-up): 644px width, 40px left/right padding\n   */\n  medium = 3,\n\n  /**\n   * Renders the Panel in `large` size, anchored to the far side (right in LTR mode).\n   * - Small (320-479): adapts to `PanelType.smallFluid` at this breakpoint\n   * - Medium (480-639):  adapts to `PanelType.smallFixedFar` at this breakpoint\n   * - Large (640-1023): adapts to `PanelType.medium` at this breakpoint\n   * - XLarge (1024-1365): 48px fixed left margin, fluid width, 32px left/right padding\n   * - XXLarge (1366-up): 428px fixed left margin, fluid width, 40px left/right padding\n   */\n  large = 4,\n\n  /**\n   * Renders the Panel in `large` size, anchored to the far side (right in LTR mode), with a fixed width at\n   * XX-Large breakpoint.\n   * - Small (320-479): adapts to `PanelType.smallFluid` at this breakpoint\n   * - Medium (480-639): adapts to `PanelType.smallFixedFar` at this breakpoint\n   * - Large (640-1023): adapts to `PanelType.medium` at this breakpoint\n   * - XLarge (1024-1365): 48px fixed left margin, fluid width, 32px left/right padding\n   * - XXLarge (1366-up): 940px width, 40px left/right padding\n   */\n  largeFixed = 5,\n\n  /**\n   * Renders the Panel in `extra large` size, anchored to the far side (right in LTR mode).\n   * - Small (320-479): adapts to `PanelType.smallFluid` at this breakpoint\n   * - Medium (480-639): adapts to `PanelType.smallFixedFar` at this breakpoint\n   * - Large (640-1023): adapts to `PanelType.medium` at this breakpoint\n   * - XLarge (1024-1365): adapts to `PanelType.large` at this breakpoint\n   * - XXLarge (1366-1919): 176px fixed left margin, fluid width, 40px left/right padding\n   * - XXXLarge (1920-up): 176px fixed left margin, fluid width, 40px left/right padding\n   */\n  extraLarge = 6,\n\n  /**\n   * Renders the Panel in `custom` size using `customWidth`, anchored to the far side (right in LTR mode).\n   * - Has a fixed width provided by the `customWidth` prop\n   * - When screen width reaches the `customWidth` value it will behave like a fluid width Panel\n   * taking up 100% of the viewport width\n   */\n  custom = 7,\n\n  /**\n   * Renders the Panel in `custom` size using `customWidth`, anchored to the near side (left in LTR mode).\n   * - Has a fixed width provided by the `customWidth` prop\n   * - When screen width reaches the `customWidth` value it will behave like a fluid width Panel\n   * taking up 100% of the viewport width\n   */\n  customNear = 8,\n}\n\n/**\n * {@docCategory Panel}\n */\nexport interface IPanelStyleProps {\n  /**\n   * Theme provided by High-Order Component.\n   */\n  theme: ITheme;\n\n  /**\n   * Accept custom classNames\n   */\n  className?: string;\n\n  /**\n   * Is Panel open\n   */\n  isOpen?: boolean;\n\n  /**\n   * Is animation currently running\n   */\n  isAnimating?: boolean;\n\n  /**\n   * Is panel on right side\n   */\n  isOnRightSide?: boolean;\n\n  /**\n   * Is panel hidden on dismiss\n   */\n  isHiddenOnDismiss?: boolean;\n\n  /**\n   * Classname for FocusTrapZone element\n   */\n  focusTrapZoneClassName?: string;\n\n  /**\n   * Determines if content should stretch to fill available space putting footer at the bottom of the page\n   */\n  isFooterAtBottom?: boolean;\n\n  /**\n   * Based on state value setting footer to sticky or not\n   */\n  isFooterSticky?: boolean;\n\n  /**\n   * Panel has close button\n   */\n  hasCloseButton?: boolean;\n\n  /**\n   * Type of the panel.\n   */\n  type?: PanelType;\n\n  /**\n   * Optional parameter to provider the class name for header text\n   */\n  headerClassName?: string;\n\n  /**\n   * Determines where the header is rendered based on whether the user\n   * has passed in a custom onRenderNavigation or onRenderNavigationContent render callback\n   */\n  hasCustomNavigation?: boolean;\n}\n\nexport interface IPanelSubComponentStyles {\n  /**\n   * Styling for close button child component.\n   */\n  closeButton: Partial<IButtonStyles>;\n}\n\n/**\n * {@docCategory Panel}\n */\nexport interface IPanelStyles {\n  /**\n   * Style for the root element.\n   */\n  root: IStyle;\n\n  /**\n   * Style for the overlay element.\n   */\n  overlay: IStyle;\n\n  /**\n   * Style for the hidden element.\n   */\n  hiddenPanel: IStyle;\n\n  /**\n   * Style for the main section element.\n   */\n  main: IStyle;\n\n  /**\n   * Style for the navigation container element.\n   */\n  commands: IStyle;\n\n  /**\n   * Style for the Body and Footer container element.\n   */\n  contentInner: IStyle;\n\n  /**\n   * Style for the scrollable content area container element.\n   */\n  scrollableContent: IStyle;\n\n  /**\n   * Style for the close button container element.\n   */\n  navigation: IStyle;\n\n  /**\n   * Style for the close button IconButton element.\n   * @deprecated Use `subComponentStyles.closeButton` instead.\n   */\n  closeButton?: IStyle;\n\n  /**\n   * Style for the header container div element.\n   */\n  header: IStyle;\n\n  /**\n   * Style for the header text div element.\n   */\n  headerText: IStyle;\n\n  /**\n   * Style for the body div element.\n   */\n  content: IStyle;\n\n  /**\n   * Style for the footer div element.\n   */\n  footer: IStyle;\n\n  /**\n   * Style for the inner footer div element.\n   */\n  footerInner: IStyle;\n\n  /**\n   * Styling for subcomponents.\n   */\n  subComponentStyles: IPanelSubComponentStyles;\n}\n","import * as React from 'react';\n\n/**\n * Hook which synchronously executes a callback when the component is about to unmount.\n *\n * @param callback - Function to call during unmount.\n */\nexport const useUnmount = (callback: () => void) => {\n  const unmountRef = React.useRef(callback);\n  unmountRef.current = callback;\n  React.useEffect(\n    () => () => {\n      unmountRef.current?.();\n    },\n    [],\n  );\n};\n","import * as React from 'react';\nimport {\n  classNamesFunction,\n  getNativeProps,\n  divProperties,\n  enableBodyScroll,\n  disableBodyScroll,\n  initializeComponentRef,\n} from '../../Utilities';\nimport type { IOverlayProps, IOverlayStyleProps, IOverlayStyles } from './Overlay.types';\n\nconst getClassNames = classNamesFunction<IOverlayStyleProps, IOverlayStyles>();\n\nexport class OverlayBase extends React.Component<IOverlayProps, {}> {\n  private _allowTouchBodyScroll: boolean;\n\n  constructor(props: IOverlayProps) {\n    super(props);\n\n    initializeComponentRef(this);\n    const { allowTouchBodyScroll = false } = this.props;\n    this._allowTouchBodyScroll = allowTouchBodyScroll;\n  }\n\n  public componentDidMount(): void {\n    !this._allowTouchBodyScroll && disableBodyScroll();\n  }\n\n  public componentWillUnmount(): void {\n    !this._allowTouchBodyScroll && enableBodyScroll();\n  }\n\n  public render(): JSX.Element {\n    const { isDarkThemed: isDark, className, theme, styles } = this.props;\n\n    const divProps = getNativeProps<React.HTMLAttributes<HTMLDivElement>>(this.props, divProperties);\n\n    const classNames = getClassNames(styles!, {\n      theme: theme!,\n      className,\n      isDark,\n    });\n\n    return <div {...divProps} className={classNames.root} />;\n  }\n}\n","import { HighContrastSelector, getGlobalClassNames } from '../../Styling';\nimport type { IOverlayStyleProps, IOverlayStyles } from './Overlay.types';\n\nconst GlobalClassNames = {\n  root: 'ms-Overlay',\n  rootDark: 'ms-Overlay--dark',\n};\n\nexport const getStyles = (props: IOverlayStyleProps): IOverlayStyles => {\n  const { className, theme, isNone, isDark } = props;\n\n  const { palette } = theme;\n\n  const classNames = getGlobalClassNames(GlobalClassNames, theme);\n\n  return {\n    root: [\n      classNames.root,\n      theme.fonts.medium,\n      {\n        backgroundColor: palette.whiteTranslucent40,\n        top: 0,\n        right: 0,\n        bottom: 0,\n        left: 0,\n        position: 'absolute',\n\n        selectors: {\n          [HighContrastSelector]: {\n            border: '1px solid WindowText',\n            opacity: 0,\n          },\n        },\n      },\n\n      isNone && {\n        visibility: 'hidden',\n      },\n\n      isDark && [\n        classNames.rootDark,\n        {\n          backgroundColor: palette.blackTranslucent40,\n        },\n      ],\n\n      className,\n    ],\n  };\n};\n","import * as React from 'react';\nimport { styled } from '../../Utilities';\nimport { OverlayBase } from './Overlay.base';\nimport { getStyles } from './Overlay.styles';\nimport type { IOverlayProps, IOverlayStyleProps, IOverlayStyles } from './Overlay.types';\n\nexport const Overlay: React.FunctionComponent<IOverlayProps> = styled<\n  IOverlayProps,\n  IOverlayStyleProps,\n  IOverlayStyles\n>(OverlayBase, getStyles, undefined, {\n  scope: 'Overlay',\n});\n","import * as React from 'react';\nimport { useConst } from './useConst';\nimport { useIsomorphicLayoutEffect } from '@fluentui/utilities';\n\n/**\n * Modified `useCallback` that returns the same function reference every time, but internally calls\n * the most-recently passed callback implementation. Can be useful in situations such as:\n * - Event handler dependencies change too frequently, such as user props which might change on\n *   every render, or volatile values such as useState/useDispatch\n * - Callback must be referenced in a captured context (such as a window event handler or unmount\n *   handler that's registered once) but needs access to the latest props\n *\n * In general, prefer `useCallback` unless you've encountered one of the problems above.\n *\n * https://reactjs.org/docs/hooks-faq.html#how-to-read-an-often-changing-value-from-usecallback\n *\n * @param fn - The callback function that will be used\n * @returns A function which is referentially stable but internally calls the most recently passed callback\n */\nexport function useEventCallback<Args extends unknown[], Return>(fn: (...args: Args) => Return) {\n  const callbackRef = React.useRef<typeof fn>(() => {\n    throw new Error('Cannot call an event handler while rendering');\n  });\n\n  useIsomorphicLayoutEffect(() => {\n    callbackRef.current = fn;\n  }, [fn]);\n\n  // useConst rather than useCallback to ensure the reference is always stable\n  // (useCallback's deps list is an optimization, not a guarantee)\n  return useConst(() => (...args: Args) => {\n    const callback = callbackRef.current;\n    return callback(...args);\n  });\n}\n","import * as React from 'react';\nimport {\n  elementContains,\n  getNativeProps,\n  divProperties,\n  getFirstTabbable,\n  getLastTabbable,\n  getNextElement,\n  focusAsync,\n  getPropsWithDefaults,\n  modalize,\n  on,\n} from '../../Utilities';\nimport { useId, useConst, useMergedRefs, useEventCallback, usePrevious, useUnmount } from '@fluentui/react-hooks';\nimport { useDocument } from '../../WindowProvider';\nimport type { IRefObject } from '../../Utilities';\nimport type { IFocusTrapZoneProps, IFocusTrapZone } from './FocusTrapZone.types';\n\ninterface IFocusTrapZoneInternalState {\n  previouslyFocusedElementInTrapZone?: HTMLElement;\n  hasFocus: boolean;\n  /** ID tracked in focusStack. Don't respect prop updates in case the ID changes while the FTZ is active. */\n  focusStackId: string;\n}\n\nconst COMPONENT_NAME = 'FocusTrapZone';\n\nconst DEFAULT_PROPS = {\n  disabled: false,\n  disableFirstFocus: false,\n  forceFocusInsideTrap: true,\n  isClickableOutsideFocusTrap: false,\n};\n\nconst useComponentRef = (\n  componentRef: IRefObject<IFocusTrapZone> | undefined,\n  previouslyFocusedElement: HTMLElement | undefined,\n  focusFTZ: () => void,\n) => {\n  React.useImperativeHandle(\n    componentRef,\n    () => ({\n      get previouslyFocusedElement() {\n        return previouslyFocusedElement;\n      },\n      focus: focusFTZ,\n    }),\n    [focusFTZ, previouslyFocusedElement],\n  );\n};\n\nexport const FocusTrapZone: React.FunctionComponent<IFocusTrapZoneProps> & {\n  /**\n   * Stack of active FocusTrapZone identifiers, exposed for testing purposes only.\n   * (This is always set, just marked as optional to avoid a cast in the component definition.)\n   * @internal\n   */\n  focusStack?: string[];\n} = React.forwardRef<HTMLDivElement, IFocusTrapZoneProps>((propsWithoutDefaults, ref) => {\n  const root = React.useRef<HTMLDivElement>(null);\n  const firstBumper = React.useRef<HTMLDivElement>(null);\n  const lastBumper = React.useRef<HTMLDivElement>(null);\n  const mergedRootRef = useMergedRefs(root, ref) as React.Ref<HTMLDivElement>;\n  const doc = useDocument();\n\n  const isFirstRender = usePrevious(false) ?? true;\n\n  const props = getPropsWithDefaults(DEFAULT_PROPS, propsWithoutDefaults);\n\n  const internalState = useConst<IFocusTrapZoneInternalState>({\n    hasFocus: false,\n    focusStackId: useId('ftz-', props.id),\n  });\n\n  const {\n    children,\n    componentRef,\n    disabled,\n    disableFirstFocus,\n    forceFocusInsideTrap,\n    focusPreviouslyFocusedInnerElement,\n    // eslint-disable-next-line deprecation/deprecation\n    firstFocusableSelector,\n    firstFocusableTarget,\n    // eslint-disable-next-line deprecation/deprecation\n    disableRestoreFocus = props.ignoreExternalFocusing,\n    isClickableOutsideFocusTrap,\n    enableAriaHiddenSiblings,\n  } = props;\n\n  const bumperProps = {\n    'aria-hidden': true,\n    style: {\n      pointerEvents: 'none',\n      position: 'fixed', // 'fixed' prevents browsers from scrolling to bumpers when viewport does not contain them\n    },\n    tabIndex: disabled ? -1 : 0, // make bumpers tabbable only when enabled\n    'data-is-visible': true,\n    'data-is-focus-trap-zone-bumper': true,\n  } as React.HTMLAttributes<HTMLDivElement>;\n\n  const focusElementAsync = React.useCallback((element: HTMLElement) => {\n    if (element !== firstBumper.current && element !== lastBumper.current) {\n      focusAsync(element);\n    }\n  }, []);\n\n  /**\n   * Callback to force focus into FTZ (named to avoid overlap with global focus() callback).\n   * useEventCallback always returns the same callback reference but updates the implementation\n   * every render to avoid stale captured values.\n   */\n  const focusFTZ = useEventCallback(() => {\n    if (!root.current) {\n      return; // not done mounting\n    }\n\n    const { previouslyFocusedElementInTrapZone } = internalState;\n    if (\n      focusPreviouslyFocusedInnerElement &&\n      previouslyFocusedElementInTrapZone &&\n      elementContains(root.current, previouslyFocusedElementInTrapZone)\n    ) {\n      // focus on the last item that had focus in the zone before we left the zone\n      focusElementAsync(previouslyFocusedElementInTrapZone);\n      return;\n    }\n\n    let firstFocusableChild: HTMLElement | null = null;\n\n    if (typeof firstFocusableTarget === 'string') {\n      firstFocusableChild = root.current.querySelector(firstFocusableTarget);\n    } else if (firstFocusableTarget) {\n      firstFocusableChild = firstFocusableTarget(root.current);\n    } else if (firstFocusableSelector) {\n      const focusSelector =\n        typeof firstFocusableSelector === 'string' ? firstFocusableSelector : firstFocusableSelector();\n      firstFocusableChild = root.current.querySelector('.' + focusSelector);\n    }\n\n    // Fall back to first element if query selector did not match any elements.\n    if (!firstFocusableChild) {\n      firstFocusableChild = getNextElement(\n        root.current,\n        root.current.firstChild as HTMLElement,\n        false,\n        false,\n        false,\n        true,\n      );\n    }\n\n    if (firstFocusableChild) {\n      focusElementAsync(firstFocusableChild);\n    }\n  });\n\n  /** Used in root div focus/blur handlers */\n  const focusBumper = (isFirstBumper: boolean) => {\n    if (disabled || !root.current) {\n      return;\n    }\n\n    const nextFocusable =\n      isFirstBumper === internalState.hasFocus\n        ? getLastTabbable(root.current, lastBumper.current!, true, false)\n        : getFirstTabbable(root.current, firstBumper.current!, true, false);\n\n    if (nextFocusable) {\n      if (nextFocusable === firstBumper.current || nextFocusable === lastBumper.current) {\n        // This can happen when FTZ contains no tabbable elements.\n        // focusFTZ() will take care of finding a focusable element in FTZ.\n        focusFTZ();\n      } else {\n        nextFocusable.focus();\n      }\n    }\n  };\n\n  /** Root div blur handler (doesn't need useCallback since it's for a native element) */\n  const onRootBlurCapture = (ev: React.FocusEvent<HTMLDivElement>) => {\n    props.onBlurCapture?.(ev);\n    let relatedTarget = ev.relatedTarget;\n    if (ev.relatedTarget === null) {\n      // In IE11, due to lack of support, event.relatedTarget is always\n      // null making every onBlur call to be \"outside\" of the root\n      // even when it's not. Using document.activeElement is another way\n      // for us to be able to get what the relatedTarget without relying\n      // on the event\n      relatedTarget = doc!.activeElement as Element;\n    }\n    if (!elementContains(root.current, relatedTarget as HTMLElement)) {\n      internalState.hasFocus = false;\n    }\n  };\n\n  /** Root div focus handler (doesn't need useCallback since it's for a native element) */\n  const onRootFocusCapture = (ev: React.FocusEvent<HTMLDivElement>) => {\n    props.onFocusCapture?.(ev);\n\n    if (ev.target === firstBumper.current) {\n      focusBumper(true);\n    } else if (ev.target === lastBumper.current) {\n      focusBumper(false);\n    }\n\n    internalState.hasFocus = true;\n\n    if (ev.target !== ev.currentTarget && !(ev.target === firstBumper.current || ev.target === lastBumper.current)) {\n      // every time focus changes within the trap zone, remember the focused element so that\n      // it can be restored if focus leaves the pane and returns via keystroke (i.e. via a call to this.focus(true))\n      internalState.previouslyFocusedElementInTrapZone = ev.target as HTMLElement;\n    }\n  };\n\n  /** Called to restore focus on unmount or props change. (useEventCallback ensures latest prop values are used.) */\n  const returnFocusToInitiator = useEventCallback((elementToFocusOnDismiss: HTMLElement | null) => {\n    FocusTrapZone.focusStack = FocusTrapZone.focusStack!.filter(value => internalState.focusStackId !== value);\n\n    if (!doc) {\n      return;\n    }\n\n    const activeElement = doc.activeElement as HTMLElement;\n    if (\n      !disableRestoreFocus &&\n      typeof elementToFocusOnDismiss?.focus === 'function' &&\n      // only restore focus if the current focused element is within the FTZ, or if nothing is focused\n      (elementContains(root.current, activeElement) || activeElement === doc.body)\n    ) {\n      focusElementAsync(elementToFocusOnDismiss);\n    }\n  });\n\n  /** Called in window event handlers. (useEventCallback ensures latest prop values are used.) */\n  const forceFocusOrClickInTrap = useEventCallback((ev: FocusEvent | MouseEvent): void => {\n    // be sure to use the latest values here\n    if (disabled) {\n      return;\n    }\n    if (internalState.focusStackId === FocusTrapZone.focusStack!.slice(-1)[0]) {\n      const targetElement = ev.target as HTMLElement | null;\n      if (targetElement && !elementContains(root.current, targetElement)) {\n        if (doc && doc.activeElement === doc.body) {\n          setTimeout(() => {\n            if (doc && doc.activeElement === doc.body) {\n              focusFTZ();\n              internalState.hasFocus = true; // set focus here since we stop event propagation\n            }\n          }, 0);\n        } else {\n          focusFTZ();\n          internalState.hasFocus = true; // set focus here since we stop event propagation\n        }\n        ev.preventDefault();\n        ev.stopPropagation();\n      }\n    }\n  });\n\n  // Update window event handlers when relevant props change\n  React.useEffect(() => {\n    const disposables: Array<() => void> = [];\n\n    if (forceFocusInsideTrap) {\n      disposables.push(on(window, 'focus', forceFocusOrClickInTrap, true));\n    }\n    if (!isClickableOutsideFocusTrap) {\n      disposables.push(on(window, 'click', forceFocusOrClickInTrap, true));\n    }\n\n    return () => {\n      disposables.forEach(dispose => dispose());\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- should only run when these two props change\n  }, [forceFocusInsideTrap, isClickableOutsideFocusTrap]);\n\n  // On prop change or first render, focus the FTZ and update focusStack if appropriate\n  React.useEffect(() => {\n    // Do nothing if disabled, or if it's a re-render and forceFocusInsideTrap is false\n    // (to match existing behavior, the FTZ handles first focus even if forceFocusInsideTrap\n    // is false, though it's debatable whether it should do this)\n    if (disabled || (!isFirstRender && !forceFocusInsideTrap) || !root.current) {\n      return;\n    }\n\n    // Transition from forceFocusInsideTrap / FTZ disabled to enabled (or initial mount)\n    FocusTrapZone.focusStack!.push(internalState.focusStackId);\n\n    const elementToFocusOnDismiss = props.elementToFocusOnDismiss || (doc!.activeElement as HTMLElement | null);\n\n    if (!disableFirstFocus && !elementContains(root.current, elementToFocusOnDismiss)) {\n      focusFTZ();\n    }\n\n    // To match existing behavior, always return focus on cleanup (even if we didn't handle\n    // initial focus), but it's debatable whether that's correct\n    return () => returnFocusToInitiator(elementToFocusOnDismiss);\n\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- should only run when these two props change\n  }, [forceFocusInsideTrap, disabled]);\n\n  // Handle modalization separately from first focus\n  React.useEffect(() => {\n    if (!disabled && enableAriaHiddenSiblings) {\n      const unmodalize = modalize(root.current!);\n      return unmodalize;\n    }\n  }, [disabled, enableAriaHiddenSiblings, root]);\n\n  // Cleanup lifecyle method for internalState.\n  useUnmount(() => {\n    // Dispose of element references so the DOM Nodes can be garbage-collected\n    delete internalState.previouslyFocusedElementInTrapZone;\n  });\n\n  useComponentRef(componentRef, internalState.previouslyFocusedElementInTrapZone, focusFTZ);\n\n  return (\n    <div\n      // this is above the native props spread so props['aria-labelledby'] will override it if provided\n      aria-labelledby={props.ariaLabelledBy}\n      // native props include onFocus, onBlur, className\n      {...getNativeProps<React.HTMLAttributes<HTMLDivElement>>(props, divProperties)}\n      ref={mergedRootRef}\n      onFocusCapture={onRootFocusCapture}\n      onBlurCapture={onRootBlurCapture}\n    >\n      <div {...bumperProps} ref={firstBumper} />\n      {children}\n      <div {...bumperProps} ref={lastBumper} />\n    </div>\n  );\n});\n\nFocusTrapZone.displayName = COMPONENT_NAME;\nFocusTrapZone.focusStack = [];\n","import * as React from 'react';\nimport { IconButton } from '../../Button';\nimport { Layer } from '../../Layer';\nimport { Overlay } from '../../Overlay';\nimport { Popup } from '../../Popup';\nimport {\n  allowScrollOnElement,\n  allowOverscrollOnElement,\n  classNamesFunction,\n  divProperties,\n  elementContains,\n  getId,\n  getNativeProps,\n  getRTL,\n  css,\n  warnDeprecations,\n  Async,\n  EventGroup,\n  initializeComponentRef,\n} from '../../Utilities';\nimport { FocusTrapZone } from '../FocusTrapZone/index';\nimport { PanelType } from './Panel.types';\nimport type { IProcessedStyleSet } from '../../Styling';\nimport type { IPanel, IPanelProps, IPanelStyleProps, IPanelStyles } from './Panel.types';\n\nconst getClassNames = classNamesFunction<IPanelStyleProps, IPanelStyles>();\nconst COMPONENT_NAME = 'Panel';\n\nenum PanelVisibilityState {\n  closed,\n  animatingOpen,\n  open,\n  animatingClosed,\n}\n\ninterface IPanelState {\n  isFooterSticky?: boolean;\n  id?: string;\n  visibility: PanelVisibilityState;\n}\n\nexport class PanelBase extends React.Component<IPanelProps, IPanelState> implements IPanel {\n  public static defaultProps: IPanelProps = {\n    isHiddenOnDismiss: false,\n    isOpen: undefined,\n    isBlocking: true,\n    hasCloseButton: true,\n    type: PanelType.smallFixedFar,\n  };\n\n  private _async: Async;\n  private _events: EventGroup;\n  private _panel = React.createRef<HTMLDivElement>();\n  private _classNames: IProcessedStyleSet<IPanelStyles>;\n  private _scrollableContent: HTMLDivElement | null;\n  private _animationCallback: number | null = null;\n  private _hasCustomNavigation: boolean = !!(this.props.onRenderNavigation || this.props.onRenderNavigationContent);\n  private _headerTextId: string | undefined;\n  private _allowTouchBodyScroll: boolean;\n\n  public static getDerivedStateFromProps(\n    nextProps: Readonly<IPanelProps>,\n    prevState: Readonly<IPanelState>,\n  ): Partial<IPanelState> | null {\n    if (nextProps.isOpen === undefined) {\n      return null; // no state update\n    }\n    if (\n      nextProps.isOpen &&\n      (prevState.visibility === PanelVisibilityState.closed ||\n        prevState.visibility === PanelVisibilityState.animatingClosed)\n    ) {\n      return { visibility: PanelVisibilityState.animatingOpen };\n    }\n    if (\n      !nextProps.isOpen &&\n      (prevState.visibility === PanelVisibilityState.open ||\n        prevState.visibility === PanelVisibilityState.animatingOpen)\n    ) {\n      return { visibility: PanelVisibilityState.animatingClosed };\n    }\n    return null;\n  }\n\n  constructor(props: IPanelProps) {\n    super(props);\n\n    const { allowTouchBodyScroll = false } = this.props;\n    this._allowTouchBodyScroll = allowTouchBodyScroll;\n\n    initializeComponentRef(this);\n\n    warnDeprecations(COMPONENT_NAME, props, {\n      ignoreExternalFocusing: 'focusTrapZoneProps',\n      forceFocusInsideTrap: 'focusTrapZoneProps',\n      firstFocusableSelector: 'focusTrapZoneProps',\n    });\n\n    this.state = {\n      isFooterSticky: false,\n      // intentionally ignore props so animation takes place during componentDidMount\n      visibility: PanelVisibilityState.closed,\n      id: getId('Panel'),\n    };\n  }\n\n  public componentDidMount(): void {\n    this._async = new Async(this);\n    this._events = new EventGroup(this);\n\n    this._events.on(window, 'resize', this._updateFooterPosition);\n\n    if (this._shouldListenForOuterClick(this.props)) {\n      this._events.on(document.body, 'mousedown', this._dismissOnOuterClick, true);\n    }\n\n    if (this.props.isOpen) {\n      this.setState({ visibility: PanelVisibilityState.animatingOpen });\n    }\n  }\n\n  public componentDidUpdate(previousProps: IPanelProps, previousState: IPanelState): void {\n    const shouldListenOnOuterClick = this._shouldListenForOuterClick(this.props);\n    const previousShouldListenOnOuterClick = this._shouldListenForOuterClick(previousProps);\n\n    if (this.state.visibility !== previousState.visibility) {\n      this._clearExistingAnimationTimer();\n      if (this.state.visibility === PanelVisibilityState.animatingOpen) {\n        this._animateTo(PanelVisibilityState.open);\n      } else if (this.state.visibility === PanelVisibilityState.animatingClosed) {\n        this._animateTo(PanelVisibilityState.closed);\n      }\n    }\n\n    if (shouldListenOnOuterClick && !previousShouldListenOnOuterClick) {\n      this._events.on(document.body, 'mousedown', this._dismissOnOuterClick, true);\n    } else if (!shouldListenOnOuterClick && previousShouldListenOnOuterClick) {\n      this._events.off(document.body, 'mousedown', this._dismissOnOuterClick, true);\n    }\n  }\n\n  public componentWillUnmount(): void {\n    this._async.dispose();\n    this._events.dispose();\n  }\n\n  public render(): JSX.Element | null {\n    const {\n      className = '',\n      elementToFocusOnDismiss,\n      /* eslint-disable deprecation/deprecation */\n      firstFocusableSelector,\n      focusTrapZoneProps,\n      forceFocusInsideTrap,\n      hasCloseButton,\n      headerText,\n      headerClassName = '',\n      ignoreExternalFocusing,\n      isBlocking,\n      isFooterAtBottom,\n      isLightDismiss,\n      isHiddenOnDismiss,\n      layerProps,\n      overlayProps,\n      popupProps,\n      type,\n      styles,\n      theme,\n      customWidth,\n      onLightDismissClick = this._onPanelClick,\n      onRenderNavigation = this._onRenderNavigation,\n      onRenderHeader = this._onRenderHeader,\n      onRenderBody = this._onRenderBody,\n      onRenderFooter = this._onRenderFooter,\n    } = this.props;\n    const { isFooterSticky, visibility, id } = this.state;\n    const isLeft = type === PanelType.smallFixedNear || type === PanelType.customNear ? true : false;\n    const isRTL = getRTL(theme);\n    const isOnRightSide = isRTL ? isLeft : !isLeft;\n    const customWidthStyles = type === PanelType.custom || type === PanelType.customNear ? { width: customWidth } : {};\n    const nativeProps = getNativeProps<React.HTMLAttributes<HTMLDivElement>>(this.props, divProperties);\n    const isOpen = this.isActive;\n    const isAnimating =\n      visibility === PanelVisibilityState.animatingClosed || visibility === PanelVisibilityState.animatingOpen;\n\n    this._headerTextId = headerText && id + '-headerText';\n\n    if (!isOpen && !isAnimating && !isHiddenOnDismiss) {\n      return null;\n    }\n\n    this._classNames = getClassNames(styles!, {\n      theme: theme!,\n      className,\n      focusTrapZoneClassName: focusTrapZoneProps ? focusTrapZoneProps.className : undefined,\n      hasCloseButton,\n      headerClassName,\n      isAnimating,\n      isFooterSticky,\n      isFooterAtBottom,\n      isOnRightSide,\n      isOpen,\n      isHiddenOnDismiss,\n      type,\n      hasCustomNavigation: this._hasCustomNavigation,\n    });\n\n    const { _classNames, _allowTouchBodyScroll } = this;\n\n    let overlay;\n    if (isBlocking && isOpen) {\n      overlay = (\n        <Overlay\n          className={_classNames.overlay}\n          isDarkThemed={false}\n          onClick={isLightDismiss ? onLightDismissClick : undefined}\n          allowTouchBodyScroll={_allowTouchBodyScroll}\n          {...overlayProps}\n        />\n      );\n    }\n\n    return (\n      <Layer {...layerProps}>\n        <Popup\n          role=\"dialog\"\n          aria-modal={isBlocking ? 'true' : undefined}\n          ariaLabelledBy={this._headerTextId ? this._headerTextId : undefined}\n          onDismiss={this.dismiss}\n          className={_classNames.hiddenPanel}\n          enableAriaHiddenSiblings={isOpen ? true : false}\n          {...popupProps}\n        >\n          <div aria-hidden={!isOpen && isAnimating} {...nativeProps} ref={this._panel} className={_classNames.root}>\n            {overlay}\n            <FocusTrapZone\n              ignoreExternalFocusing={ignoreExternalFocusing}\n              forceFocusInsideTrap={!isBlocking || (isHiddenOnDismiss && !isOpen) ? false : forceFocusInsideTrap}\n              firstFocusableSelector={firstFocusableSelector}\n              isClickableOutsideFocusTrap={true}\n              {...focusTrapZoneProps}\n              className={_classNames.main}\n              style={customWidthStyles}\n              elementToFocusOnDismiss={elementToFocusOnDismiss}\n            >\n              <div className={_classNames.contentInner}>\n                <div ref={this._allowScrollOnPanel} className={_classNames.scrollableContent} data-is-scrollable={true}>\n                  <div className={_classNames.commands} data-is-visible={true}>\n                    {onRenderNavigation(this.props, this._onRenderNavigation)}\n                  </div>\n                  {(this._hasCustomNavigation || !hasCloseButton) &&\n                    onRenderHeader(this.props, this._onRenderHeader, this._headerTextId)}\n                  {onRenderBody(this.props, this._onRenderBody)}\n                  {onRenderFooter(this.props, this._onRenderFooter)}\n                </div>\n              </div>\n            </FocusTrapZone>\n          </div>\n        </Popup>\n      </Layer>\n    );\n  }\n\n  public open() {\n    if (this.props.isOpen !== undefined) {\n      return;\n    }\n\n    if (this.isActive) {\n      return;\n    }\n\n    this.setState({ visibility: PanelVisibilityState.animatingOpen });\n  }\n\n  public close() {\n    if (this.props.isOpen !== undefined) {\n      return;\n    }\n\n    if (!this.isActive) {\n      return;\n    }\n\n    this.setState({ visibility: PanelVisibilityState.animatingClosed });\n  }\n\n  public dismiss = (ev?: React.SyntheticEvent<HTMLElement> | KeyboardEvent): void => {\n    if (this.props.onDismiss && this.isActive) {\n      this.props.onDismiss(ev);\n    }\n\n    if (!ev || (ev && !ev.defaultPrevented)) {\n      this.close();\n    }\n  };\n\n  /** isActive is true when panel is open or opening. */\n  public get isActive(): boolean {\n    return (\n      this.state.visibility === PanelVisibilityState.open ||\n      this.state.visibility === PanelVisibilityState.animatingOpen\n    );\n  }\n\n  // Allow the user to scroll within the panel but not on the body\n  private _allowScrollOnPanel = (elt: HTMLDivElement | null): void => {\n    if (elt) {\n      if (this._allowTouchBodyScroll) {\n        allowOverscrollOnElement(elt, this._events);\n      } else {\n        allowScrollOnElement(elt, this._events);\n      }\n    } else {\n      this._events.off(this._scrollableContent);\n    }\n    this._scrollableContent = elt;\n  };\n\n  private _shouldListenForOuterClick(props: IPanelProps): boolean {\n    return !!props.isBlocking && !!props.isOpen;\n  }\n\n  private _onRenderNavigation = (props: IPanelProps): JSX.Element | null => {\n    if (!this.props.onRenderNavigationContent && !this.props.onRenderNavigation && !this.props.hasCloseButton) {\n      return null;\n    }\n    const { onRenderNavigationContent = this._onRenderNavigationContent } = this.props;\n    return (\n      <div className={this._classNames.navigation}>\n        {onRenderNavigationContent(props, this._onRenderNavigationContent)}\n      </div>\n    );\n  };\n\n  private _onRenderNavigationContent = (props: IPanelProps): JSX.Element | null => {\n    const { closeButtonAriaLabel, hasCloseButton, onRenderHeader = this._onRenderHeader } = props;\n    if (hasCloseButton) {\n      const iconButtonStyles = this._classNames.subComponentStyles?.closeButton();\n\n      return (\n        <>\n          {!this._hasCustomNavigation && onRenderHeader(this.props, this._onRenderHeader, this._headerTextId)}\n          <IconButton\n            styles={iconButtonStyles}\n            className={this._classNames.closeButton}\n            onClick={this._onPanelClick}\n            ariaLabel={closeButtonAriaLabel}\n            title={closeButtonAriaLabel}\n            data-is-visible={true}\n            iconProps={{ iconName: 'Cancel' }}\n          />\n        </>\n      );\n    }\n    return null;\n  };\n\n  private _onRenderHeader = (\n    props: IPanelProps,\n    defaultRender?: (props?: IPanelProps) => JSX.Element | null,\n    headerTextId?: string | undefined,\n  ): JSX.Element | null => {\n    const { headerText, headerTextProps = {} } = props;\n\n    if (headerText) {\n      return (\n        <div className={this._classNames.header}>\n          <div\n            id={headerTextId}\n            role=\"heading\"\n            aria-level={1}\n            {...headerTextProps}\n            className={css(this._classNames.headerText, headerTextProps.className)}\n          >\n            {headerText}\n          </div>\n        </div>\n      );\n    }\n    return null;\n  };\n\n  private _onRenderBody = (props: IPanelProps): JSX.Element => {\n    return <div className={this._classNames.content}>{props.children}</div>;\n  };\n\n  private _onRenderFooter = (props: IPanelProps): JSX.Element | null => {\n    const { onRenderFooterContent = null } = this.props;\n    if (onRenderFooterContent) {\n      return (\n        <div className={this._classNames.footer}>\n          <div className={this._classNames.footerInner}>{onRenderFooterContent()}</div>\n        </div>\n      );\n    }\n    return null;\n  };\n\n  private _updateFooterPosition(): void {\n    const scrollableContent = this._scrollableContent;\n    if (scrollableContent) {\n      const height = scrollableContent.clientHeight;\n      const innerHeight = scrollableContent.scrollHeight;\n\n      this.setState({\n        isFooterSticky: height < innerHeight ? true : false,\n      });\n    }\n  }\n\n  private _dismissOnOuterClick(ev: React.MouseEvent<HTMLDivElement>): void {\n    const panel = this._panel.current;\n    if (this.isActive && panel && !ev.defaultPrevented) {\n      if (!elementContains(panel, ev.target as HTMLElement)) {\n        if (this.props.onOuterClick) {\n          this.props.onOuterClick(ev);\n        } else {\n          this.dismiss(ev);\n        }\n      }\n    }\n  }\n\n  private _animateTo = (newVisibilityState: PanelVisibilityState): void => {\n    if (newVisibilityState === PanelVisibilityState.open && this.props.onOpen) {\n      this.props.onOpen();\n    }\n\n    this._animationCallback = this._async.setTimeout(() => {\n      this.setState({ visibility: newVisibilityState });\n      this._onTransitionComplete(newVisibilityState);\n    }, 200);\n  };\n\n  private _clearExistingAnimationTimer = (): void => {\n    if (this._animationCallback !== null) {\n      this._async.clearTimeout(this._animationCallback);\n    }\n  };\n\n  private _onPanelClick = (ev?: any): void => {\n    this.dismiss(ev);\n  };\n\n  private _onTransitionComplete = (newVisibilityState: PanelVisibilityState): void => {\n    this._updateFooterPosition();\n    if (newVisibilityState === PanelVisibilityState.open && this.props.onOpened) {\n      this.props.onOpened();\n    }\n\n    if (newVisibilityState === PanelVisibilityState.closed && this.props.onDismissed) {\n      this.props.onDismissed();\n    }\n  };\n}\n","import { PanelType } from './Panel.types';\nimport {\n  AnimationClassNames,\n  AnimationVariables,\n  getGlobalClassNames,\n  HighContrastSelector,\n  ScreenWidthMinMedium,\n  ScreenWidthMinLarge,\n  ScreenWidthMinXLarge,\n  ScreenWidthMinXXLarge,\n  ScreenWidthMinUhfMobile,\n  IconFontSizes,\n} from '../../Styling';\nimport type { IPanelStyleProps, IPanelStyles } from './Panel.types';\nimport type { IStyle } from '../../Styling';\n\nconst GlobalClassNames = {\n  root: 'ms-Panel',\n  main: 'ms-Panel-main',\n  commands: 'ms-Panel-commands',\n  contentInner: 'ms-Panel-contentInner',\n  scrollableContent: 'ms-Panel-scrollableContent',\n  navigation: 'ms-Panel-navigation',\n  closeButton: 'ms-Panel-closeButton ms-PanelAction-close',\n  header: 'ms-Panel-header',\n  headerText: 'ms-Panel-headerText',\n  content: 'ms-Panel-content',\n  footer: 'ms-Panel-footer',\n  footerInner: 'ms-Panel-footerInner',\n  isOpen: 'is-open',\n  hasCloseButton: 'ms-Panel--hasCloseButton',\n  smallFluid: 'ms-Panel--smFluid',\n  smallFixedNear: 'ms-Panel--smLeft',\n  smallFixedFar: 'ms-Panel--sm',\n  medium: 'ms-Panel--md',\n  large: 'ms-Panel--lg',\n  largeFixed: 'ms-Panel--fixed',\n  extraLarge: 'ms-Panel--xl',\n  custom: 'ms-Panel--custom',\n  customNear: 'ms-Panel--customLeft',\n};\n\nconst panelWidth = {\n  full: '100%',\n  auto: 'auto',\n  xs: 272,\n  sm: 340,\n  md1: 592,\n  md2: 644,\n  lg: 940,\n};\n\nconst panelMargin = {\n  auto: 'auto',\n  none: 0,\n  md: 48,\n  lg: 428,\n  xl: 176,\n};\n\n// Following consts are used below in `getPanelBreakpoints()` function to provide\n// necessary fallbacks for different types of Panel in different breakpoints.\nconst smallPanelSelectors = {\n  [`@media (min-width: ${ScreenWidthMinMedium}px)`]: {\n    width: panelWidth.sm,\n  },\n};\n\nconst mediumPanelSelectors = {\n  [`@media (min-width: ${ScreenWidthMinLarge}px)`]: {\n    width: panelWidth.md1,\n  },\n  [`@media (min-width: ${ScreenWidthMinXLarge}px)`]: {\n    width: panelWidth.md2,\n  },\n};\n\nconst largePanelSelectors = {\n  [`@media (min-width: ${ScreenWidthMinUhfMobile}px)`]: {\n    left: panelMargin.md,\n    width: panelWidth.auto,\n  },\n  [`@media (min-width: ${ScreenWidthMinXXLarge}px)`]: {\n    left: panelMargin.lg,\n  },\n};\n\nconst largeFixedPanelSelectors = {\n  [`@media (min-width: ${ScreenWidthMinXXLarge}px)`]: {\n    left: panelMargin.auto,\n    width: panelWidth.lg,\n  },\n};\n\nconst extraLargePanelSelectors = {\n  [`@media (min-width: ${ScreenWidthMinXXLarge}px)`]: {\n    left: panelMargin.xl,\n  },\n};\n\n// Make sure Panels have fallbacks to different breakpoints by reusing same selectors.\n// This is done in the effort to follow design redlines.\nconst getPanelBreakpoints = (type: PanelType): { [x: string]: IStyle } | undefined => {\n  let selectors;\n\n  // Panel types `smallFluid`, `smallFixedNear`, `custom` and `customNear`\n  // are not checked in here because they render the same in all the breakpoints\n  // and have the checks done separately in the `getStyles` function below.\n  switch (type) {\n    case PanelType.smallFixedFar:\n      selectors = {\n        ...smallPanelSelectors,\n      };\n      break;\n    case PanelType.medium:\n      selectors = {\n        ...smallPanelSelectors,\n        ...mediumPanelSelectors,\n      };\n      break;\n    case PanelType.large:\n      selectors = {\n        ...smallPanelSelectors,\n        ...mediumPanelSelectors,\n        ...largePanelSelectors,\n      };\n      break;\n    case PanelType.largeFixed:\n      selectors = {\n        ...smallPanelSelectors,\n        ...mediumPanelSelectors,\n        ...largePanelSelectors,\n        ...largeFixedPanelSelectors,\n      };\n      break;\n    case PanelType.extraLarge:\n      selectors = {\n        ...smallPanelSelectors,\n        ...mediumPanelSelectors,\n        ...largePanelSelectors,\n        ...extraLargePanelSelectors,\n      };\n      break;\n    default:\n      break;\n  }\n\n  return selectors;\n};\n\nconst commandBarHeight = '44px';\n\nconst sharedPaddingStyles = {\n  paddingLeft: '24px',\n  paddingRight: '24px',\n};\n\nexport const getStyles = (props: IPanelStyleProps): IPanelStyles => {\n  const {\n    className,\n    focusTrapZoneClassName,\n    hasCloseButton,\n    headerClassName,\n    isAnimating,\n    isFooterSticky,\n    isFooterAtBottom,\n    isOnRightSide,\n    isOpen,\n    isHiddenOnDismiss,\n    hasCustomNavigation,\n    theme,\n    type = PanelType.smallFixedFar,\n  } = props;\n  const { effects, fonts, semanticColors } = theme;\n  const classNames = getGlobalClassNames(GlobalClassNames, theme);\n  const isCustomPanel = type === PanelType.custom || type === PanelType.customNear;\n\n  return {\n    root: [\n      classNames.root,\n      theme.fonts.medium,\n      isOpen && classNames.isOpen,\n      hasCloseButton && classNames.hasCloseButton,\n      {\n        pointerEvents: 'none',\n        position: 'absolute',\n        top: 0,\n        left: 0,\n        right: 0,\n        bottom: 0,\n      },\n      isCustomPanel && isOnRightSide && classNames.custom,\n      isCustomPanel && !isOnRightSide && classNames.customNear,\n      className,\n    ],\n    overlay: [\n      {\n        pointerEvents: 'auto',\n        cursor: 'pointer',\n      },\n      isOpen && isAnimating && AnimationClassNames.fadeIn100,\n      !isOpen && isAnimating && AnimationClassNames.fadeOut100,\n    ],\n    hiddenPanel: [\n      !isOpen &&\n        !isAnimating &&\n        isHiddenOnDismiss && {\n          visibility: 'hidden',\n        },\n    ],\n    main: [\n      classNames.main,\n      {\n        backgroundColor: semanticColors.bodyBackground,\n        boxShadow: effects.elevation64,\n        pointerEvents: 'auto',\n        position: 'absolute',\n        display: 'flex',\n        flexDirection: 'column',\n        overflowX: 'hidden',\n        overflowY: 'auto',\n        WebkitOverflowScrolling: 'touch',\n        bottom: 0,\n        top: 0,\n        // left, right, width are overridden depending on the type of the Panel and the screen breakpoint.\n        left: panelMargin.auto,\n        right: panelMargin.none,\n        width: panelWidth.full,\n        selectors: {\n          [HighContrastSelector]: {\n            borderLeft: `3px solid ${semanticColors.variantBorder}`,\n            borderRight: `3px solid ${semanticColors.variantBorder}`,\n          },\n          ...getPanelBreakpoints(type),\n        },\n      },\n      type === PanelType.smallFluid && {\n        left: panelMargin.none,\n      },\n      type === PanelType.smallFixedNear && {\n        left: panelMargin.none,\n        right: panelMargin.auto,\n        width: panelWidth.xs,\n      },\n      type === PanelType.customNear && {\n        right: 'auto',\n        left: 0,\n      },\n      isCustomPanel && {\n        maxWidth: '100vw',\n      },\n      isOpen && isAnimating && !isOnRightSide && AnimationClassNames.slideRightIn40,\n      isOpen && isAnimating && isOnRightSide && AnimationClassNames.slideLeftIn40,\n      !isOpen && isAnimating && !isOnRightSide && AnimationClassNames.slideLeftOut40,\n      !isOpen && isAnimating && isOnRightSide && AnimationClassNames.slideRightOut40,\n      focusTrapZoneClassName,\n    ],\n    commands: [\n      classNames.commands,\n      {\n        // Ensures that the sticky header always has a background to prevent overlaps on scroll.\n        backgroundColor: semanticColors.bodyBackground,\n        paddingTop: 18,\n        selectors: {\n          [`@media (min-height: ${ScreenWidthMinMedium}px)`]: {\n            position: 'sticky',\n            top: 0,\n            zIndex: 1,\n          },\n        },\n      },\n      hasCustomNavigation && {\n        paddingTop: 'inherit',\n      },\n    ],\n    navigation: [\n      classNames.navigation,\n      {\n        display: 'flex',\n        justifyContent: 'flex-end',\n      },\n      hasCustomNavigation && {\n        height: commandBarHeight,\n      },\n    ],\n    contentInner: [\n      classNames.contentInner,\n      {\n        display: 'flex',\n        flexDirection: 'column',\n        flexGrow: 1,\n        overflowY: 'hidden',\n      },\n    ],\n    header: [\n      classNames.header,\n      sharedPaddingStyles,\n      {\n        alignSelf: 'flex-start',\n      },\n      hasCloseButton &&\n        !hasCustomNavigation && {\n          flexGrow: 1,\n        },\n      hasCustomNavigation && {\n        // Ensure that title doesn't shrink if screen is too small\n        flexShrink: 0,\n      },\n    ],\n    headerText: [\n      classNames.headerText,\n      fonts.xLarge,\n      {\n        color: semanticColors.bodyText,\n        lineHeight: '27px',\n        overflowWrap: 'break-word',\n        wordWrap: 'break-word',\n        wordBreak: 'break-word',\n        hyphens: 'auto',\n      },\n      headerClassName,\n    ],\n    scrollableContent: [\n      classNames.scrollableContent,\n      {\n        overflowY: 'auto',\n      },\n      isFooterAtBottom && {\n        flexGrow: 1,\n        display: 'inherit',\n        flexDirection: 'inherit',\n      },\n    ],\n    content: [\n      classNames.content,\n      sharedPaddingStyles,\n      {\n        paddingBottom: 20,\n      },\n      isFooterAtBottom && {\n        selectors: {\n          [`@media (min-height: ${ScreenWidthMinMedium}px)`]: {\n            flexGrow: 1,\n          },\n        },\n      },\n    ],\n    footer: [\n      classNames.footer,\n      {\n        // Ensure that footer doesn't shrink if screen is too small\n        flexShrink: 0,\n        borderTop: '1px solid transparent',\n        transition: `opacity ${AnimationVariables.durationValue3} ${AnimationVariables.easeFunction2}`,\n        selectors: {\n          [`@media (min-height: ${ScreenWidthMinMedium}px)`]: {\n            position: 'sticky',\n            bottom: 0,\n          },\n        },\n      },\n      isFooterSticky && {\n        backgroundColor: semanticColors.bodyBackground,\n        borderTopColor: semanticColors.variantBorder,\n      },\n    ],\n    footerInner: [\n      classNames.footerInner,\n      sharedPaddingStyles,\n      {\n        paddingBottom: 16,\n        paddingTop: 16,\n      },\n    ],\n    subComponentStyles: {\n      closeButton: {\n        root: [\n          classNames.closeButton,\n          {\n            marginRight: 14,\n            color: theme.palette.neutralSecondary,\n            fontSize: IconFontSizes.large,\n          },\n          hasCustomNavigation && {\n            marginRight: 0,\n            height: 'auto',\n            width: '44px',\n          },\n        ],\n        rootHovered: {\n          color: theme.palette.neutralPrimary,\n        },\n      },\n    },\n  };\n};\n","import * as React from 'react';\nimport { styled } from '../../Utilities';\nimport { PanelBase } from './Panel.base';\nimport { getStyles } from './Panel.styles';\nimport type { IPanelProps, IPanelStyleProps, IPanelStyles } from './Panel.types';\n\n/**\n * Panel description\n */\nexport const Panel: React.FunctionComponent<IPanelProps> = styled<IPanelProps, IPanelStyleProps, IPanelStyles>(\n  PanelBase,\n  getStyles,\n  undefined,\n  {\n    scope: 'Panel',\n  },\n);\n"],"sourceRoot":""}