@tw1934/mui-material 7.3.7

package/esm/Tooltip/index.js

@@ -0,0 +1,3 @@
+export { default } from "./Tooltip.js";
+export { default as tooltipClasses } from "./tooltipClasses.js";
+export * from "./tooltipClasses.js";

package/esm/Tooltip/tooltipClasses.d.ts

@@ -0,0 +1,30 @@
+export interface TooltipClasses {
+  /** Styles applied to the Popper component. */
+  popper: string;
+  /** Styles applied to the Popper component unless `disableInteractive={true}`. */
+  popperInteractive: string;
+  /** Styles applied to the Popper component if `arrow={true}`. */
+  popperArrow: string;
+  /** Styles applied to the Popper component unless the tooltip is open. */
+  popperClose: string;
+  /** Styles applied to the tooltip (label wrapper) element. */
+  tooltip: string;
+  /** Styles applied to the tooltip (label wrapper) element if `arrow={true}`. */
+  tooltipArrow: string;
+  /** Styles applied to the arrow element. */
+  arrow: string;
+  /** Styles applied to the tooltip (label wrapper) element if the tooltip is opened by touch. */
+  touch: string;
+  /** Styles applied to the tooltip (label wrapper) element if `placement` contains "left". */
+  tooltipPlacementLeft: string;
+  /** Styles applied to the tooltip (label wrapper) element if `placement` contains "right". */
+  tooltipPlacementRight: string;
+  /** Styles applied to the tooltip (label wrapper) element if `placement` contains "top". */
+  tooltipPlacementTop: string;
+  /** Styles applied to the tooltip (label wrapper) element if `placement` contains "bottom". */
+  tooltipPlacementBottom: string;
+}
+export type TooltipClassKey = keyof TooltipClasses;
+export declare function getTooltipUtilityClass(slot: string): string;
+declare const tooltipClasses: TooltipClasses;
+export default tooltipClasses;

package/esm/Tooltip/tooltipClasses.js

@@ -0,0 +1,7 @@
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
+export function getTooltipUtilityClass(slot) {
+  return generateUtilityClass('MuiTooltip', slot);
+}
+const tooltipClasses = generateUtilityClasses('MuiTooltip', ['popper', 'popperInteractive', 'popperArrow', 'popperClose', 'tooltip', 'tooltipArrow', 'touch', 'tooltipPlacementLeft', 'tooltipPlacementRight', 'tooltipPlacementTop', 'tooltipPlacementBottom', 'arrow']);
+export default tooltipClasses;

package/esm/Typography/Typography.d.ts

@@ -0,0 +1,99 @@
+import * as React from 'react';
+import { OverridableStringUnion } from '@mui/types';
+import { SxProps, SystemProps } from '@mui/system';
+import { Theme, TypeText } from "../styles/index.js";
+import { OverrideProps, OverridableComponent } from "../OverridableComponent/index.js";
+import { TypographyVariant } from "../styles/createTypography.js";
+import { TypographyClasses } from "./typographyClasses.js";
+export interface TypographyPropsVariantOverrides {}
+export interface TypographyPropsColorOverrides {}
+export interface TypographyOwnProps extends Omit<SystemProps<Theme>, 'color'> {
+  /**
+   * Set the text-align on the component.
+   * @default 'inherit'
+   */
+  align?: 'inherit' | 'left' | 'center' | 'right' | 'justify';
+  /**
+   * The content of the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<TypographyClasses>;
+  /**
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
+   */
+  color?: OverridableStringUnion<'primary' | 'secondary' | 'success' | 'error' | 'info' | 'warning' | `text${Capitalize<keyof TypeText>}`, TypographyPropsColorOverrides> | (string & {}); // to work with v5 color prop type which allows any string
+  /**
+   * If `true`, the text will have a bottom margin.
+   * @default false
+   */
+  gutterBottom?: boolean;
+  /**
+   * If `true`, the text will not wrap, but instead will truncate with a text overflow ellipsis.
+   *
+   * Note that text overflow can only happen with block or inline-block level elements
+   * (the element needs to have a width in order to overflow).
+   * @default false
+   */
+  noWrap?: boolean;
+  /**
+   * If `true`, the element will be a paragraph element.
+   * @default false
+   * @deprecated Use the `component` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+   */
+  paragraph?: boolean;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+  /**
+   * Applies the theme typography styles.
+   * @default 'body1'
+   */
+  variant?: OverridableStringUnion<TypographyVariant | 'inherit', TypographyPropsVariantOverrides>;
+  /**
+   * The component maps the variant prop to a range of different HTML element types.
+   * For instance, subtitle1 to `<h6>`.
+   * If you wish to change that mapping, you can provide your own.
+   * Alternatively, you can use the `component` prop.
+   * @default {
+   *   h1: 'h1',
+   *   h2: 'h2',
+   *   h3: 'h3',
+   *   h4: 'h4',
+   *   h5: 'h5',
+   *   h6: 'h6',
+   *   subtitle1: 'h6',
+   *   subtitle2: 'h6',
+   *   body1: 'p',
+   *   body2: 'p',
+   *   inherit: 'p',
+   * }
+   */
+  variantMapping?: Partial<Record<OverridableStringUnion<TypographyVariant | 'inherit', TypographyPropsVariantOverrides>, string>>;
+}
+export interface TypographyTypeMap<AdditionalProps = {}, RootComponent extends React.ElementType = 'span'> {
+  props: AdditionalProps & TypographyOwnProps;
+  defaultComponent: RootComponent;
+}
+
+/**
+ *
+ * Demos:
+ *
+ * - [Breadcrumbs](https://mui.com/material-ui/react-breadcrumbs/)
+ * - [Typography](https://mui.com/material-ui/react-typography/)
+ *
+ * API:
+ *
+ * - [Typography API](https://mui.com/material-ui/api/typography/)
+ */
+declare const Typography: OverridableComponent<TypographyTypeMap>;
+export type TypographyProps<RootComponent extends React.ElementType = TypographyTypeMap['defaultComponent'], AdditionalProps = {}> = OverrideProps<TypographyTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
+export default Typography;

package/esm/Typography/Typography.js

@@ -0,0 +1,181 @@
+'use client';
+
+import * as React from 'react';
+import clsx from 'clsx';
+import composeClasses from '@mui/utils/composeClasses';
+import { styled, internal_createExtendSxProp } from "../zero-styled/index.js";
+import memoTheme from "../utils/memoTheme.js";
+import { useDefaultProps } from "../DefaultPropsProvider/index.js";
+import capitalize from "../utils/capitalize.js";
+import createSimplePaletteValueFilter from "../utils/createSimplePaletteValueFilter.js";
+import { getTypographyUtilityClass } from "./typographyClasses.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const v6Colors = {
+  primary: true,
+  secondary: true,
+  error: true,
+  info: true,
+  success: true,
+  warning: true,
+  textPrimary: true,
+  textSecondary: true,
+  textDisabled: true
+};
+const extendSxProp = internal_createExtendSxProp();
+const useUtilityClasses = ownerState => {
+  const {
+    align,
+    gutterBottom,
+    noWrap,
+    paragraph,
+    variant,
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['root', variant, ownerState.align !== 'inherit' && `align${capitalize(align)}`, gutterBottom && 'gutterBottom', noWrap && 'noWrap', paragraph && 'paragraph']
+  };
+  return composeClasses(slots, getTypographyUtilityClass, classes);
+};
+export const TypographyRoot = styled('span', {
+  name: 'MuiTypography',
+  slot: 'Root',
+  overridesResolver: (props, styles) => {
+    const {
+      ownerState
+    } = props;
+    return [styles.root, ownerState.variant && styles[ownerState.variant], ownerState.align !== 'inherit' && styles[`align${capitalize(ownerState.align)}`], ownerState.noWrap && styles.noWrap, ownerState.gutterBottom && styles.gutterBottom, ownerState.paragraph && styles.paragraph];
+  }
+})(memoTheme(({
+  theme
+}) => ({
+  margin: 0,
+  variants: [{
+    props: {
+      variant: 'inherit'
+    },
+    style: {
+      // Some elements, like <button> on Chrome have default font that doesn't inherit, reset this.
+      font: 'inherit',
+      lineHeight: 'inherit',
+      letterSpacing: 'inherit'
+    }
+  }, ...Object.entries(theme.typography).filter(([variant, value]) => variant !== 'inherit' && value && typeof value === 'object').map(([variant, value]) => ({
+    props: {
+      variant
+    },
+    style: value
+  })), ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter()).map(([color]) => ({
+    props: {
+      color
+    },
+    style: {
+      color: (theme.vars || theme).palette[color].main
+    }
+  })), ...Object.entries(theme.palette?.text || {}).filter(([, value]) => typeof value === 'string').map(([color]) => ({
+    props: {
+      color: `text${capitalize(color)}`
+    },
+    style: {
+      color: (theme.vars || theme).palette.text[color]
+    }
+  })), {
+    props: ({
+      ownerState
+    }) => ownerState.align !== 'inherit',
+    style: {
+      textAlign: 'var(--Typography-textAlign)'
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.noWrap,
+    style: {
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap'
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.gutterBottom,
+    style: {
+      marginBottom: '0.35em'
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.paragraph,
+    style: {
+      marginBottom: 16
+    }
+  }]
+})));
+const defaultVariantMapping = {
+  h1: 'h1',
+  h2: 'h2',
+  h3: 'h3',
+  h4: 'h4',
+  h5: 'h5',
+  h6: 'h6',
+  subtitle1: 'h6',
+  subtitle2: 'h6',
+  body1: 'p',
+  body2: 'p',
+  inherit: 'p'
+};
+const Typography = /*#__PURE__*/React.forwardRef(function Typography(inProps, ref) {
+  const {
+    color,
+    ...themeProps
+  } = useDefaultProps({
+    props: inProps,
+    name: 'MuiTypography'
+  });
+  const isSxColor = !v6Colors[color];
+  // TODO: Remove `extendSxProp` in v7
+  const props = extendSxProp({
+    ...themeProps,
+    ...(isSxColor && {
+      color
+    })
+  });
+  const {
+    align = 'inherit',
+    className,
+    component,
+    gutterBottom = false,
+    noWrap = false,
+    paragraph = false,
+    variant = 'body1',
+    variantMapping = defaultVariantMapping,
+    ...other
+  } = props;
+  const ownerState = {
+    ...props,
+    align,
+    color,
+    className,
+    component,
+    gutterBottom,
+    noWrap,
+    paragraph,
+    variant,
+    variantMapping
+  };
+  const Component = component || (paragraph ? 'p' : variantMapping[variant] || defaultVariantMapping[variant]) || 'span';
+  const classes = useUtilityClasses(ownerState);
+  return /*#__PURE__*/_jsx(TypographyRoot, {
+    as: Component,
+    ref: ref,
+    className: clsx(classes.root, className),
+    ...other,
+    ownerState: ownerState,
+    style: {
+      ...(align !== 'inherit' && {
+        '--Typography-textAlign': align
+      }),
+      ...other.style
+    }
+  });
+});
+export default Typography;

package/esm/Typography/index.d.ts

@@ -0,0 +1,4 @@
+export { default } from "./Typography.js";
+export * from "./Typography.js";
+export { default as typographyClasses } from "./typographyClasses.js";
+export * from "./typographyClasses.js";

package/esm/Typography/index.js

@@ -0,0 +1,3 @@
+export { default } from "./Typography.js";
+export { default as typographyClasses } from "./typographyClasses.js";
+export * from "./typographyClasses.js";

package/esm/Typography/typographyClasses.d.ts

@@ -0,0 +1,53 @@
+export interface TypographyClasses {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the root element if `variant="body2"`. */
+  body2: string;
+  /** Styles applied to the root element if `variant="body1"`. */
+  body1: string;
+  /** Styles applied to the root element if `variant="caption"`. */
+  caption: string;
+  /** Styles applied to the root element if `variant="button"`. */
+  button: string;
+  /** Styles applied to the root element if `variant="h1"`. */
+  h1: string;
+  /** Styles applied to the root element if `variant="h2"`. */
+  h2: string;
+  /** Styles applied to the root element if `variant="h3"`. */
+  h3: string;
+  /** Styles applied to the root element if `variant="h4"`. */
+  h4: string;
+  /** Styles applied to the root element if `variant="h5"`. */
+  h5: string;
+  /** Styles applied to the root element if `variant="h6"`. */
+  h6: string;
+  /** Styles applied to the root element if `variant="subtitle1"`. */
+  subtitle1: string;
+  /** Styles applied to the root element if `variant="subtitle2"`. */
+  subtitle2: string;
+  /** Styles applied to the root element if `variant="overline"`. */
+  overline: string;
+  /** Styles applied to the root element if `variant="inherit"`. */
+  inherit: string;
+  /** Styles applied to the root element if `align="left"`. */
+  alignLeft: string;
+  /** Styles applied to the root element if `align="center"`. */
+  alignCenter: string;
+  /** Styles applied to the root element if `align="right"`. */
+  alignRight: string;
+  /** Styles applied to the root element if `align="justify"`. */
+  alignJustify: string;
+  /** Styles applied to the root element if `nowrap={true}`. */
+  noWrap: string;
+  /** Styles applied to the root element if `gutterBottom={true}`. */
+  gutterBottom: string;
+  /**
+   * Styles applied to the root element if `paragraph={true}`.
+   * @deprecated
+   */
+  paragraph: string;
+}
+export type TypographyClassKey = keyof TypographyClasses;
+export declare function getTypographyUtilityClass(slot: string): string;
+declare const typographyClasses: TypographyClasses;
+export default typographyClasses;

package/esm/Typography/typographyClasses.js

@@ -0,0 +1,7 @@
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
+export function getTypographyUtilityClass(slot) {
+  return generateUtilityClass('MuiTypography', slot);
+}
+const typographyClasses = generateUtilityClasses('MuiTypography', ['root', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'subtitle1', 'subtitle2', 'body1', 'body2', 'inherit', 'button', 'caption', 'overline', 'alignLeft', 'alignRight', 'alignCenter', 'alignJustify', 'noWrap', 'gutterBottom', 'paragraph']);
+export default typographyClasses;

package/esm/Unstable_TrapFocus/FocusTrap.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { FocusTrapProps } from "./FocusTrap.types.js";
+/**
+ * @ignore - internal component.
+ */
+declare function FocusTrap(props: FocusTrapProps): React.JSX.Element;
+export default FocusTrap;

package/esm/Unstable_TrapFocus/FocusTrap.js

@@ -0,0 +1,277 @@
+'use client';
+
+/* eslint-disable consistent-return, jsx-a11y/no-noninteractive-tabindex */
+import * as React from 'react';
+import useForkRef from '@mui/utils/useForkRef';
+import ownerDocument from '@mui/utils/ownerDocument';
+import getReactElementRef from '@mui/utils/getReactElementRef';
+import getActiveElement from "../utils/getActiveElement.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Inspired by https://github.com/focus-trap/tabbable
+const candidatesSelector = ['input', 'select', 'textarea', 'a[href]', 'button', '[tabindex]', 'audio[controls]', 'video[controls]', '[contenteditable]:not([contenteditable="false"])'].join(',');
+function getTabIndex(node) {
+  const tabindexAttr = parseInt(node.getAttribute('tabindex') || '', 10);
+  if (!Number.isNaN(tabindexAttr)) {
+    return tabindexAttr;
+  }
+
+  // Browsers do not return `tabIndex` correctly for contentEditable nodes;
+  // https://issues.chromium.org/issues/41283952
+  // so if they don't have a tabindex attribute specifically set, assume it's 0.
+  // in Chrome, <details/>, <audio controls/> and <video controls/> elements get a default
+  //  `tabIndex` of -1 when the 'tabindex' attribute isn't specified in the DOM,
+  //  yet they are still part of the regular tab order; in FF, they get a default
+  //  `tabIndex` of 0; since Chrome still puts those elements in the regular tab
+  //  order, consider their tab index to be 0.
+  if (node.contentEditable === 'true' || (node.nodeName === 'AUDIO' || node.nodeName === 'VIDEO' || node.nodeName === 'DETAILS') && node.getAttribute('tabindex') === null) {
+    return 0;
+  }
+  return node.tabIndex;
+}
+function isNonTabbableRadio(node) {
+  if (node.tagName !== 'INPUT' || node.type !== 'radio') {
+    return false;
+  }
+  if (!node.name) {
+    return false;
+  }
+  const getRadio = selector => node.ownerDocument.querySelector(`input[type="radio"]${selector}`);
+  let roving = getRadio(`[name="${node.name}"]:checked`);
+  if (!roving) {
+    roving = getRadio(`[name="${node.name}"]`);
+  }
+  return roving !== node;
+}
+function isNodeMatchingSelectorFocusable(node) {
+  if (node.disabled || node.tagName === 'INPUT' && node.type === 'hidden' || isNonTabbableRadio(node)) {
+    return false;
+  }
+  return true;
+}
+function defaultGetTabbable(root) {
+  const regularTabNodes = [];
+  const orderedTabNodes = [];
+  Array.from(root.querySelectorAll(candidatesSelector)).forEach((node, i) => {
+    const nodeTabIndex = getTabIndex(node);
+    if (nodeTabIndex === -1 || !isNodeMatchingSelectorFocusable(node)) {
+      return;
+    }
+    if (nodeTabIndex === 0) {
+      regularTabNodes.push(node);
+    } else {
+      orderedTabNodes.push({
+        documentOrder: i,
+        tabIndex: nodeTabIndex,
+        node: node
+      });
+    }
+  });
+  return orderedTabNodes.sort((a, b) => a.tabIndex === b.tabIndex ? a.documentOrder - b.documentOrder : a.tabIndex - b.tabIndex).map(a => a.node).concat(regularTabNodes);
+}
+function defaultIsEnabled() {
+  return true;
+}
+
+/**
+ * @ignore - internal component.
+ */
+function FocusTrap(props) {
+  const {
+    children,
+    disableAutoFocus = false,
+    disableEnforceFocus = false,
+    disableRestoreFocus = false,
+    getTabbable = defaultGetTabbable,
+    isEnabled = defaultIsEnabled,
+    open
+  } = props;
+  const ignoreNextEnforceFocus = React.useRef(false);
+  const sentinelStart = React.useRef(null);
+  const sentinelEnd = React.useRef(null);
+  const nodeToRestore = React.useRef(null);
+  const reactFocusEventTarget = React.useRef(null);
+  // This variable is useful when disableAutoFocus is true.
+  // It waits for the active element to move into the component to activate.
+  const activated = React.useRef(false);
+  const rootRef = React.useRef(null);
+  const handleRef = useForkRef(getReactElementRef(children), rootRef);
+  const lastKeydown = React.useRef(null);
+  React.useEffect(() => {
+    // We might render an empty child.
+    if (!open || !rootRef.current) {
+      return;
+    }
+    activated.current = !disableAutoFocus;
+  }, [disableAutoFocus, open]);
+  React.useEffect(() => {
+    // We might render an empty child.
+    if (!open || !rootRef.current) {
+      return;
+    }
+    const doc = ownerDocument(rootRef.current);
+    const activeElement = getActiveElement(doc);
+    if (!rootRef.current.contains(activeElement)) {
+      if (!rootRef.current.hasAttribute('tabIndex')) {
+        if (process.env.NODE_ENV !== 'production') {
+          console.error(['MUI: The modal content node does not accept focus.', 'For the benefit of assistive technologies, ' + 'the tabIndex of the node is being set to "-1".'].join('\n'));
+        }
+        rootRef.current.setAttribute('tabIndex', '-1');
+      }
+      if (activated.current) {
+        rootRef.current.focus();
+      }
+    }
+    return () => {
+      // restoreLastFocus()
+      if (!disableRestoreFocus) {
+        // In IE11 it is possible for document.activeElement to be null resulting
+        // in nodeToRestore.current being null.
+        // Not all elements in IE11 have a focus method.
+        // Once IE11 support is dropped the focus() call can be unconditional.
+        if (nodeToRestore.current && nodeToRestore.current.focus) {
+          ignoreNextEnforceFocus.current = true;
+          nodeToRestore.current.focus();
+        }
+        nodeToRestore.current = null;
+      }
+    };
+    // Missing `disableRestoreFocus` which is fine.
+    // We don't support changing that prop on an open FocusTrap
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open]);
+  React.useEffect(() => {
+    // We might render an empty child.
+    if (!open || !rootRef.current) {
+      return;
+    }
+    const doc = ownerDocument(rootRef.current);
+    const loopFocus = nativeEvent => {
+      lastKeydown.current = nativeEvent;
+      if (disableEnforceFocus || !isEnabled() || nativeEvent.key !== 'Tab') {
+        return;
+      }
+      const activeElement = getActiveElement(doc);
+
+      // Make sure the next tab starts from the right place.
+      // activeElement refers to the origin.
+      if (activeElement === rootRef.current && nativeEvent.shiftKey) {
+        // We need to ignore the next contain as
+        // it will try to move the focus back to the rootRef element.
+        ignoreNextEnforceFocus.current = true;
+        if (sentinelEnd.current) {
+          sentinelEnd.current.focus();
+        }
+      }
+    };
+    const contain = () => {
+      const rootElement = rootRef.current;
+
+      // Cleanup functions are executed lazily in React 17.
+      // Contain can be called between the component being unmounted and its cleanup function being run.
+      if (rootElement === null) {
+        return;
+      }
+      const activeEl = getActiveElement(doc);
+      if (!doc.hasFocus() || !isEnabled() || ignoreNextEnforceFocus.current) {
+        ignoreNextEnforceFocus.current = false;
+        return;
+      }
+
+      // The focus is already inside
+      if (rootElement.contains(activeEl)) {
+        return;
+      }
+
+      // The disableEnforceFocus is set and the focus is outside of the focus trap (and sentinel nodes)
+      if (disableEnforceFocus && activeEl !== sentinelStart.current && activeEl !== sentinelEnd.current) {
+        return;
+      }
+
+      // if the focus event is not coming from inside the children's react tree, reset the refs
+      if (activeEl !== reactFocusEventTarget.current) {
+        reactFocusEventTarget.current = null;
+      } else if (reactFocusEventTarget.current !== null) {
+        return;
+      }
+      if (!activated.current) {
+        return;
+      }
+      let tabbable = [];
+      if (activeEl === sentinelStart.current || activeEl === sentinelEnd.current) {
+        tabbable = getTabbable(rootRef.current);
+      }
+
+      // one of the sentinel nodes was focused, so move the focus
+      // to the first/last tabbable element inside the focus trap
+      if (tabbable.length > 0) {
+        const isShiftTab = Boolean(lastKeydown.current?.shiftKey && lastKeydown.current?.key === 'Tab');
+        const focusNext = tabbable[0];
+        const focusPrevious = tabbable[tabbable.length - 1];
+        if (typeof focusNext !== 'string' && typeof focusPrevious !== 'string') {
+          if (isShiftTab) {
+            focusPrevious.focus();
+          } else {
+            focusNext.focus();
+          }
+        }
+        // no tabbable elements in the trap focus or the focus was outside of the focus trap
+      } else {
+        rootElement.focus();
+      }
+    };
+    doc.addEventListener('focusin', contain);
+    doc.addEventListener('keydown', loopFocus, true);
+
+    // With Edge, Safari and Firefox, no focus related events are fired when the focused area stops being a focused area.
+    // for example https://bugzilla.mozilla.org/show_bug.cgi?id=559561.
+    // Instead, we can look if the active element was restored on the BODY element.
+    //
+    // The whatwg spec defines how the browser should behave but does not explicitly mention any events:
+    // https://html.spec.whatwg.org/multipage/interaction.html#focus-fixup-rule.
+    const interval = setInterval(() => {
+      const activeEl = getActiveElement(doc);
+      if (activeEl && activeEl.tagName === 'BODY') {
+        contain();
+      }
+    }, 50);
+    return () => {
+      clearInterval(interval);
+      doc.removeEventListener('focusin', contain);
+      doc.removeEventListener('keydown', loopFocus, true);
+    };
+  }, [disableAutoFocus, disableEnforceFocus, disableRestoreFocus, isEnabled, open, getTabbable]);
+  const onFocus = event => {
+    if (nodeToRestore.current === null) {
+      nodeToRestore.current = event.relatedTarget;
+    }
+    activated.current = true;
+    reactFocusEventTarget.current = event.target;
+    const childrenPropsHandler = children.props.onFocus;
+    if (childrenPropsHandler) {
+      childrenPropsHandler(event);
+    }
+  };
+  const handleFocusSentinel = event => {
+    if (nodeToRestore.current === null) {
+      nodeToRestore.current = event.relatedTarget;
+    }
+    activated.current = true;
+  };
+  return /*#__PURE__*/_jsxs(React.Fragment, {
+    children: [/*#__PURE__*/_jsx("div", {
+      tabIndex: open ? 0 : -1,
+      onFocus: handleFocusSentinel,
+      ref: sentinelStart,
+      "data-testid": "sentinelStart"
+    }), /*#__PURE__*/React.cloneElement(children, {
+      ref: handleRef,
+      onFocus
+    }), /*#__PURE__*/_jsx("div", {
+      tabIndex: open ? 0 : -1,
+      onFocus: handleFocusSentinel,
+      ref: sentinelEnd,
+      "data-testid": "sentinelEnd"
+    })]
+  });
+}
+export default FocusTrap;