@teamturing/react-kit 2.12.0 → 2.14.0

package/esm/core/Dialog/index.js

@@ -6,19 +6,13 @@ import '../../packages/token-studio/esm/token/typography/index.js';
 import styled from 'styled-components';
 import IconButton from '../IconButton/index.js';
 import View from '../View/index.js';
+import useFocusTrap from '../../hook/useFocusTrap.js';
 import { sx } from '../../utils/styled-system/index.js';
 import MotionView from '../MotionView/index.js';
 import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js';
 import { AnimatePresence } from '../../node_modules/framer-motion/dist/es/components/AnimatePresence/index.js';
 import { cubicBezier } from '../../node_modules/framer-motion/dist/es/easing/cubic-bezier.js';
 
-function visible(el) {
-  return !el.hidden && (!el.type || el.type !== 'hidden') && (el.offsetWidth > 0 || el.offsetHeight > 0);
-}
-function focusable(el) {
-  const inputEl = el;
-  return inputEl.tabIndex >= 0 && !inputEl.disabled && visible(inputEl);
-}
 const Dialog = ({
   children,
   isOpen,
@@ -38,41 +32,19 @@ const Dialog = ({
       handleDismiss?.();
     }
   }, [handleDismiss, dialogRef, overlayRef]);
-  const getFocusableItem = useCallback((e, movement) => {
-    if (dialogRef.current) {
-      const items = Array.from(dialogRef.current.querySelectorAll('*')).filter(focusable);
-      if (items.length === 0) return;
-      e.preventDefault();
-      const focusedElement = document.activeElement;
-      if (!focusedElement) {
-        return;
-      }
-      const index = items.indexOf(focusedElement);
-      const offsetIndex = index + movement;
-      const fallbackIndex = movement === 1 ? 0 : items.length - 1;
-      const focusableItem = items[offsetIndex] || items[fallbackIndex];
-      return focusableItem;
-    }
-  }, [dialogRef]);
-  const handleTab = useCallback(e => {
-    const movement = e.shiftKey ? -1 : 1;
-    const focusableItem = getFocusableItem(e, movement);
-    if (!focusableItem) {
-      return;
-    }
-    focusableItem.focus();
-  }, [getFocusableItem]);
   const handleKeyDown = useCallback(event => {
     switch (event.key) {
-      case 'Tab':
-        handleTab(event);
-        break;
       case 'Escape':
         handleDismiss?.();
         event.stopPropagation();
         break;
     }
   }, [handleDismiss]);
+  useFocusTrap({
+    containerRef: dialogRef,
+    initialFocusRef: closeButtonRef,
+    disabled: !isOpen
+  });
   useEffect(() => {
     if (isOpen) {
       document.addEventListener('click', handleOutsideClick);
@@ -118,7 +90,7 @@ const Dialog = ({
         height: '100%',
         zIndex: 9999
       },
-      children: [/*#__PURE__*/jsxRuntimeExports.jsx(Overlay, {
+      children: [/*#__PURE__*/jsxRuntimeExports.jsx(Blanket, {
         ref: overlayRef
       }), /*#__PURE__*/jsxRuntimeExports.jsxs(BaseDialog, {
         ref: dialogRef,
@@ -162,7 +134,7 @@ const Dialog = ({
     }) : null
   });
 };
-const Overlay = styled.span`
+const Blanket = styled.span`
   &:before {
     position: fixed;
     top: 0;

package/esm/core/Overlay/index.js

@@ -0,0 +1,92 @@
+import { forwardRef, useRef, useImperativeHandle, useCallback, useEffect } from 'react';
+import styled from 'styled-components';
+import '../../node_modules/styled-system/dist/index.esm.js';
+import { forcePixelValue } from '../../utils/forcePixelValue.js';
+import { sx } from '../../utils/styled-system/index.js';
+import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js';
+import { variant } from '../../node_modules/@styled-system/variant/dist/index.esm.js';
+import { iterateFocusableElements } from '../../node_modules/@primer/behaviors/dist/esm/utils/iterate-focusable-elements.js';
+
+const Overlay = ({
+  children,
+  isOpen,
+  onDismiss,
+  size = 'm',
+  ignoreOutsideClickRefs = [],
+  ...props
+}, ref) => {
+  const overlayRef = useRef(null);
+  useImperativeHandle(ref, () => overlayRef.current);
+  const handleDismiss = useCallback(() => onDismiss?.(), [onDismiss]);
+  const handleOutsideClick = useCallback(e => {
+    if (overlayRef.current && e.target instanceof Node && !overlayRef.current.contains(e.target) && ignoreOutsideClickRefs && !ignoreOutsideClickRefs.some(({
+      current
+    }) => current?.contains(e.target))) {
+      handleDismiss?.();
+    }
+  }, [handleDismiss, overlayRef]);
+  const handleKeyDown = useCallback(event => {
+    switch (event.key) {
+      case 'Escape':
+        handleDismiss?.();
+        event.stopPropagation();
+        break;
+    }
+  }, [handleDismiss]);
+  useEffect(() => {
+    if (overlayRef.current) {
+      const firstItem = iterateFocusableElements(overlayRef.current).next().value;
+      firstItem?.focus();
+    }
+  }, [isOpen]);
+  useEffect(() => {
+    if (isOpen) {
+      document.addEventListener('keydown', handleKeyDown);
+      return () => {
+        document.removeEventListener('keydown', handleKeyDown);
+      };
+    }
+  }, [isOpen, handleKeyDown]);
+  useEffect(() => {
+    if (isOpen) {
+      document.addEventListener('click', handleOutsideClick);
+      return () => {
+        document.removeEventListener('click', handleOutsideClick);
+      };
+    }
+  }, [isOpen, handleOutsideClick]);
+  return isOpen ? /*#__PURE__*/jsxRuntimeExports.jsx(BaseOverlay, {
+    ref: overlayRef,
+    size: size,
+    ...props,
+    children: children
+  }) : null;
+};
+const BaseOverlay = styled.div`
+  position: absolute;
+  box-shadow: ${({
+  theme
+}) => theme.shadows['shadow/overlay']};
+  background-color: ${({
+  theme
+}) => theme.colors['surface/overlay']};
+  border-radius: ${({
+  theme
+}) => forcePixelValue(theme.radii.s)};
+  overflow: hidden;
+  margin: auto;
+  z-index: 99999;
+
+  ${variant({
+  prop: 'size',
+  variants: {
+    m: {
+      width: forcePixelValue(180)
+    }
+  }
+})}
+  ${sx}
+`;
+var Overlay$1 = /*#__PURE__*/forwardRef(Overlay);
+
+export { Overlay$1 as default };

package/esm/core/OverlayPopper/index.js

@@ -0,0 +1,69 @@
+import { useFloating } from '../../node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.js';
+import space from '../../packages/token-studio/esm/token/space/index.js';
+import '../../packages/token-studio/esm/token/typography/index.js';
+import { Children, cloneElement } from 'react';
+import useFocusTrap from '../../hook/useFocusTrap.js';
+import useFocusZone from '../../hook/useFocusZone.js';
+import useToggleHandler from '../../hook/useToggleHandler.js';
+import Overlay from '../Overlay/index.js';
+import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js';
+import { autoUpdate } from '../../node_modules/@floating-ui/dom/dist/floating-ui.dom.js';
+import { offset, flip, shift } from '../../node_modules/@floating-ui/core/dist/floating-ui.core.js';
+
+const OverlayPopper = ({
+  children: propChildren,
+  renderOverlay,
+  placement = 'bottom-start',
+  focusZoneSettings,
+  focusTrapSettings
+}) => {
+  const {
+    refs,
+    floatingStyles,
+    isPositioned
+  } = useFloating({
+    placement,
+    whileElementsMounted: autoUpdate,
+    middleware: [offset(space[1]), flip(), shift()],
+    strategy: 'fixed'
+  });
+  const {
+    state: isOpen,
+    toggle: toggleOverlay,
+    off: closeOverlay
+  } = useToggleHandler({
+    initialState: false
+  });
+  const children = Children.map(propChildren, child => /*#__PURE__*/cloneElement(child, {
+    onClick: toggleOverlay,
+    tabIndex: 0,
+    ...{
+      ref: refs.setReference
+    }
+  }));
+  useFocusZone({
+    containerRef: refs.floating,
+    disabled: !isOpen || !isPositioned,
+    ...focusZoneSettings
+  });
+  useFocusTrap({
+    containerRef: refs.floating,
+    disabled: !isOpen || !isPositioned,
+    ...focusTrapSettings
+  });
+  return /*#__PURE__*/jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, {
+    children: [children, /*#__PURE__*/jsxRuntimeExports.jsx(Overlay, {
+      ref: refs.setFloating,
+      isOpen: isOpen,
+      onDismiss: closeOverlay,
+      ignoreOutsideClickRefs: [refs.reference],
+      style: floatingStyles,
+      children: renderOverlay({
+        isOpen,
+        closeOverlay
+      })
+    })]
+  });
+};
+
+export { OverlayPopper as default };

package/esm/core/Pagination/index.js

@@ -0,0 +1,273 @@
+import { useCallback, Fragment } from 'react';
+import SvgChevronLeft from '../../packages/icons/esm/ChevronLeft.js';
+import SvgChevronRight from '../../packages/icons/esm/ChevronRight.js';
+import { noop } from '../../packages/utils/esm/noop.js';
+import styled, { css } from 'styled-components';
+import '../../node_modules/styled-system/dist/index.esm.js';
+import { forcePixelValue } from '../../utils/forcePixelValue.js';
+import { sx } from '../../utils/styled-system/index.js';
+import UnstyledButton from '../_UnstyledButton.js';
+import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js';
+import { variant } from '../../node_modules/@styled-system/variant/dist/index.esm.js';
+
+const Pagination = ({
+  pages: propPages,
+  currentPageIndex,
+  aroundPageCount = 1,
+  edgePageCount = 1,
+  type = 'default',
+  sx,
+  onPageClick = noop,
+  onPreviousClick = noop,
+  onNextClick = noop,
+  renderPage = (page, i) => /*#__PURE__*/jsxRuntimeExports.jsx(PaginationPage, {
+    onClick: () => onPageClick(page, i),
+    selected: i === currentPageIndex,
+    children: page.label
+  }),
+  renderPageWrapper = (children, {
+    label
+  }, i) => /*#__PURE__*/jsxRuntimeExports.jsx(Fragment, {
+    children: children
+  }, [label, i].join('-')),
+  renderPreviousPageDirection = ({
+    previousPageDirectionProps
+  }) => /*#__PURE__*/jsxRuntimeExports.jsxs(PaginationPageDirection, {
+    ...previousPageDirectionProps,
+    children: [/*#__PURE__*/jsxRuntimeExports.jsx(SvgChevronLeft, {}), "\uC774\uC804"]
+  }),
+  renderNextPageDirection = ({
+    nextPageDirectionProps
+  }) => /*#__PURE__*/jsxRuntimeExports.jsxs(PaginationPageDirection, {
+    ...nextPageDirectionProps,
+    children: ["\uB2E4\uC74C", /*#__PURE__*/jsxRuntimeExports.jsx(SvgChevronRight, {})]
+  }),
+  renderTruncationIndicator = () => /*#__PURE__*/jsxRuntimeExports.jsx(PaginationTruncationIndicator, {
+    children: "\u2026"
+  })
+}) => {
+  const CURRENT_PAGE_COUNT = 1;
+  const totalVisiblePageCount = CURRENT_PAGE_COUNT + 2 * aroundPageCount + 2 * edgePageCount;
+  const pages = propPages.map((page, i) => ({
+    page,
+    originalIndex: i
+  }));
+  const totalPageCount = propPages.length;
+  const isCurrentPageCloseToBeginEdge = currentPageIndex < edgePageCount + aroundPageCount + CURRENT_PAGE_COUNT;
+  const isCurrentPageCloseToEndEdge = totalPageCount - (edgePageCount + aroundPageCount + CURRENT_PAGE_COUNT) < currentPageIndex + 1;
+  const isTruncationNeeded = totalVisiblePageCount < totalPageCount;
+  const renderPaginationPage = useCallback((page, i) => renderPageWrapper(renderPage(page, i), page, i), [currentPageIndex]);
+  return /*#__PURE__*/jsxRuntimeExports.jsxs(BasePagination, {
+    type: type,
+    sx: sx,
+    children: [renderPreviousPageDirection({
+      previousPageDirectionProps: {
+        onClick: () => onPreviousClick(currentPageIndex),
+        disabled: currentPageIndex === 0
+      }
+    }), !isTruncationNeeded ? pages.map(({
+      page,
+      originalIndex
+    }) => renderPaginationPage(page, originalIndex)) : isTruncationNeeded && isCurrentPageCloseToBeginEdge ? [pages.slice(0, edgePageCount + aroundPageCount * 2 + CURRENT_PAGE_COUNT).map(({
+      page,
+      originalIndex
+    }) => renderPaginationPage(page, originalIndex)), /*#__PURE__*/jsxRuntimeExports.jsx(Fragment, {
+      children: renderTruncationIndicator()
+    }, 'end_truncation_indicator'), pages.slice(edgePageCount * -1).map(({
+      page,
+      originalIndex
+    }) => renderPaginationPage(page, originalIndex))] : isTruncationNeeded && isCurrentPageCloseToEndEdge ? [pages.slice(0, edgePageCount).map(({
+      page,
+      originalIndex
+    }) => renderPaginationPage(page, originalIndex)), /*#__PURE__*/jsxRuntimeExports.jsx(Fragment, {
+      children: renderTruncationIndicator()
+    }, 'begin_truncation_indicator'), pages.slice(totalPageCount - (edgePageCount + aroundPageCount * 2 + CURRENT_PAGE_COUNT)).map(({
+      page,
+      originalIndex
+    }) => renderPaginationPage(page, originalIndex))] : [pages.slice(0, edgePageCount).map(({
+      page,
+      originalIndex
+    }) => renderPaginationPage(page, originalIndex)), /*#__PURE__*/jsxRuntimeExports.jsx(Fragment, {
+      children: renderTruncationIndicator()
+    }, 'begin_truncation_indicator'), pages.slice(currentPageIndex - aroundPageCount, currentPageIndex + aroundPageCount + CURRENT_PAGE_COUNT).map(({
+      page,
+      originalIndex
+    }) => renderPaginationPage(page, originalIndex)), /*#__PURE__*/jsxRuntimeExports.jsx(Fragment, {
+      children: renderTruncationIndicator()
+    }, 'end_truncation_indicator'), pages.slice(edgePageCount * -1).map(({
+      page,
+      originalIndex
+    }) => renderPaginationPage(page, originalIndex))], renderNextPageDirection({
+      nextPageDirectionProps: {
+        onClick: () => onNextClick(currentPageIndex),
+        disabled: currentPageIndex === totalPageCount - 1
+      }
+    })]
+  });
+};
+const BasePagination = styled.nav`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: nowrap;
+  column-gap: ${({
+  theme
+}) => forcePixelValue(theme.space[1])};
+
+  ${variant({
+  prop: 'type',
+  variants: {
+    default: {},
+    simple: {
+      '& > *:not(:first-child):not(:last-child)': {
+        display: 'none !important'
+      }
+    }
+  }
+})}
+  ${sx}
+`;
+const PaginationPage = styled(UnstyledButton)`
+  transition: background-color 100ms;
+
+  height: ${forcePixelValue(32)};
+  min-width: ${forcePixelValue(32)};
+
+  border-radius: ${({
+  theme
+}) => forcePixelValue(theme.radii.xs)};
+  padding: ${({
+  theme
+}) => `${forcePixelValue(theme.space[0])} ${forcePixelValue(theme.space[3])}`};
+  background-color: ${({
+  theme
+}) => theme.colors['bg/neutral/subtler']};
+
+  font-size: ${({
+  theme
+}) => forcePixelValue(theme.fontSizes.xs)};
+  font-weight: ${({
+  theme
+}) => theme.fontWeights.regular};
+  line-height: ${({
+  theme
+}) => theme.lineHeights[2]};
+  color: ${({
+  theme
+}) => theme.colors['text/neutral']};
+
+  ${({
+  selected
+}) => selected ? css`
+          background-color: ${({
+  theme
+}) => theme.colors['bg/neutral/bolder']};
+          color: ${({
+  theme
+}) => theme.colors['text/inverse']};
+        ` : css`
+          &:hover {
+            background-color: ${({
+  theme
+}) => theme.colors['bg/neutral/subtler/hovered']};
+          }
+        `}
+`;
+const PaginationPageDirection = styled(UnstyledButton)`
+  transition: background-color 100ms;
+
+  display: inline-flex;
+  align-items: center;
+  flex-wrap: nowrap;
+  column-gap: ${({
+  theme
+}) => forcePixelValue(theme.space[1])};
+
+  height: ${forcePixelValue(32)};
+  min-width: ${forcePixelValue(32)};
+
+  border-radius: ${({
+  theme
+}) => forcePixelValue(theme.radii.xs)};
+  padding: ${({
+  theme
+}) => `${forcePixelValue(theme.space[0])} ${forcePixelValue(theme.space[3])}`};
+  background-color: ${({
+  theme
+}) => theme.colors['bg/neutral/subtler']};
+
+  font-size: ${({
+  theme
+}) => forcePixelValue(theme.fontSizes.xs)};
+  font-weight: ${({
+  theme
+}) => theme.fontWeights.regular};
+  line-height: ${({
+  theme
+}) => theme.lineHeights[2]};
+  color: ${({
+  theme
+}) => theme.colors['text/neutral']};
+
+  & svg {
+    color: ${({
+  theme
+}) => theme.colors['icon/accent/gray']};
+    width: ${forcePixelValue(16)};
+    height: ${forcePixelValue(16)};
+  }
+
+  &:hover:not(:disabled) {
+    background-color: ${({
+  theme
+}) => theme.colors['bg/neutral/subtler/hovered']};
+  }
+  &:disabled {
+    cursor: not-allowed;
+    color: ${({
+  theme
+}) => theme.colors['text/disabled']};
+    & > svg {
+      color: ${({
+  theme
+}) => theme.colors['icon/disabled']};
+    }
+  }
+`;
+const PaginationTruncationIndicator = styled.div`
+  min-width: ${forcePixelValue(32)};
+
+  border-radius: ${({
+  theme
+}) => forcePixelValue(theme.radii.xs)};
+  padding: ${({
+  theme
+}) => `${forcePixelValue(theme.space[0])} ${forcePixelValue(theme.space[3])}`};
+  background-color: ${({
+  theme
+}) => theme.colors['bg/neutral/subtler']};
+
+  font-size: ${({
+  theme
+}) => forcePixelValue(theme.fontSizes.xs)};
+  font-weight: ${({
+  theme
+}) => theme.fontWeights.regular};
+  line-height: ${({
+  theme
+}) => theme.lineHeights[2]};
+  color: ${({
+  theme
+}) => theme.colors['text/neutral']};
+
+  pointer-events: none;
+
+  ${sx}
+`;
+var index = Object.assign(Pagination, {
+  Page: PaginationPage,
+  PageDirection: PaginationPageDirection,
+  TruncationIndicator: PaginationTruncationIndicator
+});
+
+export { index as default };

package/esm/core/Pill/index.js

@@ -0,0 +1,129 @@
+import { forwardRef } from 'react';
+import SvgClose from '../../packages/icons/esm/Close.js';
+import { r as reactIsExports } from '../../node_modules/react-is/index.js';
+import styled from 'styled-components';
+import '../../node_modules/styled-system/dist/index.esm.js';
+import { forcePixelValue } from '../../utils/forcePixelValue.js';
+import { isNullable } from '../../utils/isNullable.js';
+import { sx } from '../../utils/styled-system/index.js';
+import UnstyledButton from '../_UnstyledButton.js';
+import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js';
+import { variant } from '../../node_modules/@styled-system/variant/dist/index.esm.js';
+
+const Pill = ({
+  text,
+  size = 'm',
+  variant = 'secondary',
+  leadingVisual: LeadingVisual,
+  onRemove,
+  ...props
+}, ref) => /*#__PURE__*/jsxRuntimeExports.jsxs(BasePill, {
+  ref: ref,
+  size: size,
+  variant: variant,
+  hasLeadingVisual: !isNullable(LeadingVisual),
+  hasRemoveButton: !isNullable(onRemove),
+  ...props,
+  children: [typeof LeadingVisual !== 'string' && reactIsExports.isValidElementType(LeadingVisual) ? /*#__PURE__*/jsxRuntimeExports.jsx(LeadingVisual, {}) : LeadingVisual, text, onRemove ? /*#__PURE__*/jsxRuntimeExports.jsx(UnstyledButton, {
+    type: 'button',
+    onClick: onRemove,
+    "aria-label": 'Remove Pill',
+    children: /*#__PURE__*/jsxRuntimeExports.jsx(SvgClose, {})
+  }) : null]
+});
+const BasePill = styled.span`
+  display: inline-flex;
+  align-items: center;
+  border-radius: ${({
+  theme
+}) => forcePixelValue(theme.radii.xxs)};
+
+  & > button {
+    display: flex;
+    transition: background-color 100ms;
+    border-radius: ${({
+  theme
+}) => forcePixelValue(theme.radii.full)};
+  }
+
+  ${({
+  theme,
+  hasLeadingVisual,
+  hasRemoveButton
+}) => variant({
+  prop: 'size',
+  variants: {
+    l: {
+      'pl': hasLeadingVisual || hasRemoveButton ? 2 : 3,
+      'pr': hasRemoveButton ? 0.5 : hasLeadingVisual ? 2 : 3,
+      'py': 1,
+      'fontSize': theme.fontSizes.s,
+      'fontWeight': theme.fontWeights.medium,
+      'lineHeight': theme.lineHeights[2],
+      'columnGap': 1,
+      '& svg': {
+        width: 16,
+        height: 16,
+        color: theme.colors['icon/primary']
+      },
+      '& button': {
+        p: 1
+      }
+    },
+    m: {
+      'pl': hasLeadingVisual || hasRemoveButton ? 2 : 3,
+      'pr': hasRemoveButton ? 1 : hasLeadingVisual ? 2 : 3,
+      'py': 1,
+      'fontSize': theme.fontSizes.xs,
+      'fontWeight': theme.fontWeights.medium,
+      'lineHeight': theme.lineHeights[2],
+      'columnGap': 0.5,
+      '& svg': {
+        width: 16,
+        height: 16,
+        color: theme.colors['icon/primary']
+      },
+      '& button': {
+        p: 0.5
+      }
+    },
+    s: {
+      'pl': 2,
+      'pr': hasRemoveButton ? 1 : 2,
+      'py': 0.5,
+      'fontSize': theme.fontSizes.xxs,
+      'fontWeight': theme.fontWeights.medium,
+      'lineHeight': theme.lineHeights[2],
+      'columnGap': 0.5,
+      '& svg': {
+        width: 12,
+        height: 12,
+        color: theme.colors['icon/primary']
+      },
+      '& button': {
+        p: 0.5
+      }
+    }
+  }
+})}
+  ${({
+  theme
+}) => variant({
+  prop: 'variant',
+  variants: {
+    secondary: {
+      'color': theme.colors['text/primary'],
+      'backgroundColor': theme.colors['bg/secondary'],
+      '& button': {
+        '&:hover': {
+          backgroundColor: theme.colors['bg/secondary/hovered']
+        }
+      }
+    }
+  }
+})}
+  ${sx}
+`;
+var index = /*#__PURE__*/forwardRef(Pill);
+
+export { index as default };

package/esm/hook/useFocusTrap.js

@@ -0,0 +1,39 @@
+import React__default from 'react';
+import useProvidedOrCreatedRef from './useProvidedOrCreatedRef.js';
+import { focusTrap } from '../node_modules/@primer/behaviors/dist/esm/focus-trap.js';
+
+const useFocusTrap = (settings, dependencies = []) => {
+  const containerRef = useProvidedOrCreatedRef(settings?.containerRef);
+  const initialFocusRef = useProvidedOrCreatedRef(settings?.initialFocusRef);
+  const disabled = settings?.disabled;
+  const abortController = React__default.useRef();
+  const previousFocusedElement = React__default.useRef(null);
+  if (!previousFocusedElement.current && !settings?.disabled) {
+    previousFocusedElement.current = document.activeElement;
+  }
+  const disableTrap = () => {
+    abortController.current?.abort();
+    if (settings?.restoreFocusOnCleanUp && previousFocusedElement.current instanceof HTMLElement) {
+      previousFocusedElement.current.focus();
+      previousFocusedElement.current = null;
+    }
+  };
+  React__default.useEffect(() => {
+    if (containerRef.current instanceof HTMLElement) {
+      if (!disabled) {
+        abortController.current = focusTrap(containerRef.current, initialFocusRef.current ?? undefined);
+        return () => {
+          disableTrap();
+        };
+      } else {
+        disableTrap();
+      }
+    }
+  }, [containerRef, initialFocusRef, disabled, ...dependencies]);
+  return {
+    containerRef,
+    initialFocusRef
+  };
+};
+
+export { useFocusTrap as default };