@teamturing/react-kit 2.12.0 → 2.13.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/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 };

package/esm/hook/useFocusZone.js

@@ -0,0 +1,35 @@
+import { useRef, useEffect } from 'react';
+import useProvidedOrCreatedRef from './useProvidedOrCreatedRef.js';
+import { focusZone } from '../node_modules/@primer/behaviors/dist/esm/focus-zone.js';
+export { FocusKeys } from '../node_modules/@primer/behaviors/dist/esm/focus-zone.js';
+
+const useFocusZone = (settings = {}, dependencies = []) => {
+  const containerRef = useProvidedOrCreatedRef(settings.containerRef);
+  const useActiveDescendant = !!settings.activeDescendantFocus;
+  const passedActiveDescendantRef = typeof settings.activeDescendantFocus === 'boolean' || !settings.activeDescendantFocus ? undefined : settings.activeDescendantFocus;
+  const activeDescendantControlRef = useProvidedOrCreatedRef(passedActiveDescendantRef);
+  const disabled = settings.disabled;
+  const abortController = useRef();
+  useEffect(() => {
+    if (containerRef.current instanceof HTMLElement && (!useActiveDescendant || activeDescendantControlRef.current instanceof HTMLElement)) {
+      if (!disabled) {
+        const defaultSettings = {
+          ...settings,
+          activeDescendantControl: activeDescendantControlRef.current ?? undefined
+        };
+        abortController.current = focusZone(containerRef.current, defaultSettings);
+        return () => {
+          abortController.current?.abort();
+        };
+      } else {
+        abortController.current?.abort();
+      }
+    }
+  }, [disabled, ...dependencies]);
+  return {
+    containerRef,
+    activeDescendantControlRef
+  };
+};
+
+export { useFocusZone as default };

package/esm/index.js

@@ -11,6 +11,8 @@ export { default as IconToggleButton } from './core/IconToggleButton/index.js';
 export { default as Image } from './core/Image/index.js';
 export { default as ItemList } from './core/ItemList/index.js';
 export { default as MotionView } from './core/MotionView/index.js';
+export { default as Overlay } from './core/Overlay/index.js';
+export { default as OverlayPopper } from './core/OverlayPopper/index.js';
 export { default as Space } from './core/Space/index.js';
 export { default as Spinner } from './core/Spinner/index.js';
 export { default as Stack } from './core/Stack/index.js';
@@ -26,6 +28,10 @@ export { default as View } from './core/View/index.js';
 export { default as UnstyledButton } from './core/_UnstyledButton.js';
 export { default as EnigmaUI } from './enigma/EnigmaUI/index.js';
 export { default as useDevice } from './hook/useDevice.js';
+export { default as useDialogHandler } from './hook/useDialogHandler.js';
+export { default as useFocusTrap } from './hook/useFocusTrap.js';
+export { default as useFocusZone } from './hook/useFocusZone.js';
+export { default as useMediaQuery } from './hook/useMediaQuery.js';
 export { default as useOutsideClick } from './hook/useOutsideClick.js';
 export { default as useProvidedOrCreatedRef } from './hook/useProvidedOrCreatedRef.js';
 export { default as useResize } from './hook/useResize.js';