{
- this.element = el;
- if (!dialogRef) {
- return;
- }
- setRef(dialogRef, el);
- }}
- aria-labelledby={this.headingId}
- {...other}
- >
-
-
- (this.heading = el)}
- tabIndex={-1}
- id={this.headingId}
- >
- {typeof heading === 'object' && 'text' in heading
- ? heading.text
- : heading}
-
- {close}
-
- {children}
+ const dialog = (
+
+
+
+
+
+ {typeof heading === 'object' && 'text' in heading
+ ? heading.text
+ : heading}
+
+ {closeButton}
+ {children}
-
-
+
);
return createPortal(
- Dialog,
- ('current' in portal ? portal.current : portal) || document.body
- ) as React.JSX.Element;
- }
-
- close() {
- this.state.isolator?.deactivate();
- if (this.props.show) {
- this.props.onClose?.();
- }
- }
-
- handleClickOutside() {
- const { show, forceAction } = this.props;
- if (show && !forceAction) {
- this.close();
- }
- }
-
- focusHeading() {
- if (this.heading) {
- this.heading.focus();
- }
- this.state.isolator?.activate();
+ dialog,
+ // eslint-disable-next-line ssr-friendly/no-dom-globals-in-react-fc
+ portalElement || document.body
+ ) as React.ReactPortal;
}
+);
- private handleEscape(keyboardEvent: KeyboardEvent) {
- if (!keyboardEvent.defaultPrevented && isEscape(keyboardEvent)) {
- this.close();
- }
- }
+Dialog.displayName = 'Dialog';
- private attachEventListeners() {
- const { forceAction } = this.props;
- if (!forceAction) {
- const portal = this.props.portal || document.body;
- const targetElement =
- portal instanceof HTMLElement ? portal : portal.current;
- targetElement?.addEventListener('keyup', this.handleEscape);
- }
- }
-
- private removeEventListeners() {
- const portal = this.props.portal || document.body;
- const targetElement =
- portal instanceof HTMLElement ? portal : portal.current;
- targetElement?.removeEventListener('keyup', this.handleEscape);
- }
-}
+export default Dialog;
interface DialogAlignmentProps {
align?: 'left' | 'center' | 'right';
@@ -266,4 +227,5 @@ const DialogFooter = ({
);
DialogFooter.displayName = 'DialogFooter';
+
export { Dialog, DialogContent, DialogFooter };
diff --git a/packages/react/src/components/Drawer/Drawer.test.tsx b/packages/react/src/components/Drawer/Drawer.test.tsx
index 2fc52750e..4de141bbc 100644
--- a/packages/react/src/components/Drawer/Drawer.test.tsx
+++ b/packages/react/src/components/Drawer/Drawer.test.tsx
@@ -305,8 +305,7 @@ test('should not trap focus when behavior is non-modal', async () => {
'aria-hidden',
'true'
);
- await user.keyboard('{Tab}');
- expect(document.body).toHaveFocus();
+ document.body.focus();
await user.keyboard('{Tab}');
expect(screen.getByRole('button', { name: 'outside' })).toHaveFocus();
await user.keyboard('{Tab}');
diff --git a/packages/react/src/components/Drawer/index.tsx b/packages/react/src/components/Drawer/index.tsx
index 525e2e12b..18a74c1cf 100644
--- a/packages/react/src/components/Drawer/index.tsx
+++ b/packages/react/src/components/Drawer/index.tsx
@@ -1,19 +1,18 @@
+import type { ElementOrRef } from '../../types';
import React, {
forwardRef,
useState,
useEffect,
- useLayoutEffect,
useCallback,
useRef
} from 'react';
import { createPortal } from 'react-dom';
-import FocusTrap from 'focus-trap-react';
import classnames from 'classnames';
import Scrim from '../Scrim';
import ClickOutsideListener from '../ClickOutsideListener';
import useEscapeKey from '../../utils/useEscapeKey';
import useSharedRef from '../../utils/useSharedRef';
-import focusableSelector from '../../utils/focusable-selector';
+import useFocusTrap from '../../utils/useFocusTrap';
import resolveElement from '../../utils/resolveElement';
import AriaIsolate from '../../utils/aria-isolate';
import { isBrowser } from '../../utils/is-browser';
@@ -25,8 +24,8 @@ export interface DrawerProps
open?: boolean;
behavior?: 'modal' | 'non-modal';
focusOptions?: {
- initialFocus?: T | React.RefObject | React.MutableRefObject;
- returnFocus?: T | React.RefObject | React.MutableRefObject;
+ initialFocus?: ElementOrRef;
+ returnFocus?: ElementOrRef;
};
onClose?: () => void;
portal?: React.RefObject | HTMLElement;
@@ -50,9 +49,6 @@ const Drawer = forwardRef(
) => {
const drawerRef = useSharedRef(ref);
const openRef = useRef(!!open);
- const previousActiveElementRef = useRef(
- null
- ) as React.MutableRefObject;
const { initialFocus: focusInitial, returnFocus: focusReturn } =
focusOptions;
const [isTransitioning, setIsTransitioning] = useState(!!open);
@@ -101,36 +97,6 @@ const Drawer = forwardRef(
};
}, [isModal, open]);
- useLayoutEffect(() => {
- if (open) {
- previousActiveElementRef.current =
- document.activeElement as HTMLElement;
-
- const initialFocusElement = resolveElement(focusInitial);
- if (initialFocusElement) {
- initialFocusElement.focus();
- } else {
- const focusable = drawerRef.current?.querySelector(
- focusableSelector
- ) as HTMLElement;
- if (focusable) {
- focusable.focus();
- } else {
- // fallback focus
- drawerRef.current?.focus();
- }
- }
- } else if (previousActiveElementRef.current) {
- const returnFocusElement = resolveElement(focusReturn);
- if (returnFocusElement) {
- returnFocusElement.focus();
- } else {
- // fallback focus
- previousActiveElementRef.current?.focus();
- }
- }
- }, [open, focusInitial, focusReturn]);
-
useEscapeKey(
{ callback: handleClose, active: open, defaultPrevented: true },
[onClose]
@@ -141,6 +107,13 @@ const Drawer = forwardRef(
return null;
}
+ useFocusTrap(drawerRef, {
+ disabled: !isModal || !open,
+ initialFocusElement: focusInitial || drawerRef,
+ returnFocus: true,
+ returnFocusElement: focusReturn
+ });
+
const portalElement = resolveElement(portal);
return createPortal(
@@ -151,37 +124,25 @@ const Drawer = forwardRef(
touchEvent={open ? undefined : false}
target={drawerRef}
>
- drawerRef.current
+
-
- {children}
-
-
+ {children}
+
-
- {label ? (
-
{label}
- ) : null}
- {children}
+
+
-
+ {label ?
{label} : null}
+ {children}
+
);
}
);
diff --git a/packages/react/src/components/Popover/index.tsx b/packages/react/src/components/Popover/index.tsx
index abefd4b2b..6e6492d7b 100644
--- a/packages/react/src/components/Popover/index.tsx
+++ b/packages/react/src/components/Popover/index.tsx
@@ -7,11 +7,10 @@ import classnames from 'classnames';
import AnchoredOverlay from '../AnchoredOverlay';
import ClickOutsideListener from '../ClickOutsideListener';
import Button from '../Button';
-import FocusTrap from 'focus-trap-react';
-import focusableSelector from '../../utils/focusable-selector';
import AriaIsolate from '../../utils/aria-isolate';
import useSharedRef from '../../utils/useSharedRef';
import useEscapeKey from '../../utils/useEscapeKey';
+import useFocusTrap from '../../utils/useFocusTrap';
export type PopoverVariant = 'prompt' | 'custom';
@@ -138,18 +137,8 @@ const Popover = forwardRef
(
}, [popoverRef.current]);
useEffect(() => {
- if (show && popoverRef.current) {
- // Find the first focusable element inside the container
- const firstFocusableElement =
- popoverRef.current.querySelector(focusableSelector);
-
- if (firstFocusableElement instanceof HTMLElement) {
- firstFocusableElement.focus();
- }
- }
-
targetElement?.setAttribute('aria-expanded', Boolean(show).toString());
- }, [show, popoverRef.current]);
+ }, [show]);
useEffect(() => {
const attrText = targetElement?.getAttribute('aria-controls');
@@ -194,54 +183,49 @@ const Popover = forwardRef(
[show]
);
+ useFocusTrap(popoverRef, { disabled: !show, returnFocus: true });
+
if (!show || !isBrowser()) return null;
return createPortal(
-
-
-
-
-
- {variant === 'prompt' ? (
-
- ) : (
- children
- )}
-
-
- ,
+
+
+
+
+ {variant === 'prompt' ? (
+
+ ) : (
+ children
+ )}
+
+ ,
(portal && 'current' in portal ? portal.current : portal) ||
// Dependent on "isBrowser" check above:
// eslint-disable-next-line ssr-friendly/no-dom-globals-in-react-fc
diff --git a/packages/react/src/components/TwoColumnPanel/TwoColumnPanel.tsx b/packages/react/src/components/TwoColumnPanel/TwoColumnPanel.tsx
index 82e07c11e..87b3d34f8 100644
--- a/packages/react/src/components/TwoColumnPanel/TwoColumnPanel.tsx
+++ b/packages/react/src/components/TwoColumnPanel/TwoColumnPanel.tsx
@@ -7,7 +7,6 @@ import React, {
useLayoutEffect
} from 'react';
import { useId } from 'react-id-generator';
-import FocusTrap from 'focus-trap-react';
import Icon from '../Icon';
import Tooltip from '../Tooltip';
import ClickOutsideListener from '../ClickOutsideListener';
@@ -16,6 +15,7 @@ import ColumnRight from './ColumnRight';
import classnames from 'classnames';
import SkipLink from '../SkipLink';
import useEscapeKey from '../../utils/useEscapeKey';
+import useFocusTrap from '../../utils/useFocusTrap';
interface TwoColumnPanelProps extends React.HTMLAttributes {
initialCollapsed?: boolean;
@@ -228,6 +228,10 @@ const TwoColumnPanel = forwardRef(
}
};
+ useFocusTrap(columnLeftRef, {
+ disabled: !showPanel || !isFocusTrap
+ });
+
return (
(
ref={ref}
>
<>
-
*/
export type ContentNode = string | number | ReactPortal | ReactElement;
+
+export type ElementOrRef =
+ | E
+ | React.RefObject
+ | React.MutableRefObject;
diff --git a/packages/react/src/utils/resolveElement.ts b/packages/react/src/utils/resolveElement.ts
index 9c7fbc2e0..a294083bd 100644
--- a/packages/react/src/utils/resolveElement.ts
+++ b/packages/react/src/utils/resolveElement.ts
@@ -1,11 +1,11 @@
-import type { RefObject, MutableRefObject } from 'react';
+import type { ElementOrRef } from '../types';
/**
* When an element can be passed as a value that is either an element or an
* elementRef, this will resolve the property down to the resulting element
*/
export default function resolveElement(
- elementOrRef: T | RefObject | MutableRefObject | undefined
+ elementOrRef: ElementOrRef | undefined
): T | null {
if (elementOrRef instanceof Element) {
return elementOrRef;
diff --git a/packages/react/src/utils/useFocusTrap.test.tsx b/packages/react/src/utils/useFocusTrap.test.tsx
new file mode 100644
index 000000000..928a50334
--- /dev/null
+++ b/packages/react/src/utils/useFocusTrap.test.tsx
@@ -0,0 +1,225 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import useFocusTrap from './useFocusTrap';
+
+const ComponentOutsideFocusTrap = ({
+ children
+}: {
+ children: React.ReactNode;
+}) => {
+ return (
+ <>
+
+ {children}
+
+
+ );
+};
+
+const ComponentWithFocusableElements = ({
+ disableFocusTrap = false
+}: {
+ disableFocusTrap?: boolean;
+}) => {
+ const containerRef = React.useRef(null);
+
+ useFocusTrap(containerRef, {
+ returnFocus: true,
+ disabled: disableFocusTrap
+ });
+
+ return (
+
+
+
+
+
+ );
+};
+
+const ComponentWithInitialFocus = () => {
+ const containerRef = React.useRef(null);
+ const initialFocusRef = React.useRef(null);
+
+ useFocusTrap(containerRef, {
+ initialFocusElement: initialFocusRef
+ });
+
+ return (
+
+
+
+
+
+ );
+};
+
+const ComponentWithReturnElement = ({
+ disableFocusTrap = false
+}: {
+ disableFocusTrap?: boolean;
+}) => {
+ const containerRef = React.useRef(null);
+ const returnFocusElement = React.useRef(null);
+
+ useFocusTrap(containerRef, {
+ returnFocus: true,
+ returnFocusElement,
+ disabled: disableFocusTrap
+ });
+
+ return (
+ <>
+
+
+
+
+
+
+
+
+ );
+};
+
+describe('useFocusTrap', () => {
+ test('should trap focus within container', async () => {
+ render(
+
+
+
+ );
+
+ const buttons = screen.getAllByRole('button');
+
+ // First element should be focused initially
+ expect(buttons[1]).toHaveFocus();
+
+ // Tab forward through elements
+ await userEvent.tab();
+ expect(buttons[2]).toHaveFocus();
+ await userEvent.tab();
+ expect(buttons[3]).toHaveFocus();
+
+ // Should wrap to first element
+ await userEvent.tab();
+ expect(buttons[1]).toHaveFocus();
+
+ // Tab backward should wrap to last element
+ await userEvent.tab({ shift: true });
+ expect(buttons[3]).toHaveFocus();
+ });
+
+ test('should focus initial element with element ref', () => {
+ render(
+
+
+
+ );
+
+ const initialButton = screen.getByRole('button', { name: 'initial focus' });
+ expect(initialButton).toHaveFocus();
+ });
+
+ test('should allow for the trap to be enabled/disabled', async () => {
+ const { rerender } = render(
+
+
+
+ );
+
+ const buttonBefore = screen.getByRole('button', { name: 'outside before' });
+ const buttonAfter = screen.getByRole('button', { name: 'outside after' });
+
+ // Initially not trapped
+ await userEvent.tab();
+ expect(buttonBefore).toHaveFocus();
+
+ rerender(
+
+
+
+ );
+
+ // Focus should be trapped
+ const trappedButton = screen.getByRole('button', { name: 'first' });
+ expect(trappedButton).toHaveFocus();
+
+ // Check to see if tabbing remains within the trap
+ await userEvent.tab();
+ await userEvent.tab();
+ await userEvent.tab();
+ expect(trappedButton).toHaveFocus();
+
+ // Disable trap
+ rerender(
+
+
+
+ );
+
+ // Should be able to focus outside button
+ await userEvent.tab();
+ await userEvent.tab();
+ await userEvent.tab();
+ await userEvent.tab();
+ expect(buttonAfter).toHaveFocus();
+ });
+
+ test('should restore focus when unmounted', () => {
+ const outsideButton = document.createElement('button');
+ document.body.appendChild(outsideButton);
+ outsideButton.focus();
+
+ const { unmount } = render();
+ expect(outsideButton).not.toHaveFocus();
+
+ unmount();
+ expect(outsideButton).toHaveFocus();
+
+ document.body.removeChild(outsideButton);
+ });
+
+ test('should handle nested focus traps', () => {
+ const NestedTraps = () => {
+ const outerRef = React.useRef(null);
+ const innerRef = React.useRef(null);
+
+ useFocusTrap(outerRef);
+ useFocusTrap(innerRef);
+
+ return (
+
+ );
+ };
+
+ render();
+
+ const innerButton = screen.getByRole('button', { name: 'inner' });
+ expect(innerButton).toHaveFocus();
+ });
+
+ test('should return focus to specified returnFocusElement', async () => {
+ const { rerender } = render(
+
+ );
+
+ const buttonBefore = screen.getByRole('button', { name: 'before' });
+ const buttonAfter = screen.getByRole('button', {
+ name: 'return focus element'
+ });
+
+ await userEvent.tab();
+ expect(buttonBefore).toHaveFocus();
+
+ rerender();
+ rerender();
+
+ expect(buttonAfter).toHaveFocus();
+ });
+});
diff --git a/packages/react/src/utils/useFocusTrap.ts b/packages/react/src/utils/useFocusTrap.ts
new file mode 100644
index 000000000..74c4a326d
--- /dev/null
+++ b/packages/react/src/utils/useFocusTrap.ts
@@ -0,0 +1,245 @@
+import type { ElementOrRef } from '../types';
+import { useEffect, useRef } from 'react';
+import focusable from 'focusable';
+import resolveElement from './resolveElement';
+
+type FocusTrapMetadata = {
+ targetElement: Element;
+ lastFocusedElement: HTMLElement | null;
+ suspended: boolean;
+};
+
+type FocusTrap = {
+ initialFocusElement: HTMLElement | null;
+ destroy: () => void;
+} & FocusTrapMetadata;
+
+// When multiple focus traps are created, we need to keep track of all previous traps
+// in the stack and temporarily suspend any traps created before the most recent trap
+const focusTrapStack: Array = [];
+const removeFocusTrapFromStack = (focusTrap: FocusTrapMetadata): void => {
+ const focusTrapIndex = focusTrapStack.findIndex(
+ (trap) => focusTrap.targetElement === trap.targetElement
+ );
+ focusTrapStack.splice(focusTrapIndex, 1);
+};
+
+function getActiveElement(target: Element | null): HTMLElement {
+ return (
+ ((target?.ownerDocument.activeElement as HTMLElement) ??
+ (document.activeElement as HTMLElement)) ||
+ document.body
+ );
+}
+
+function elementContains(
+ containerElement: Element,
+ targetElement: Element | null
+): boolean {
+ if (!targetElement) {
+ return false;
+ }
+
+ if (containerElement.getRootNode() === targetElement.getRootNode()) {
+ return containerElement.contains(targetElement);
+ }
+
+ let root = targetElement.getRootNode();
+ while (root && root !== containerElement.getRootNode()) {
+ if (root.nodeType === Node.DOCUMENT_FRAGMENT_NODE) {
+ // likely a shadow root, and we need to get the host
+ root = (root as ShadowRoot).host;
+ } else {
+ break;
+ }
+ }
+ return root && containerElement.contains(root);
+
+ return false;
+}
+
+function createTrapGuard(): HTMLSpanElement {
+ const trapGuard = document.createElement('span');
+ trapGuard.setAttribute('tabindex', '0');
+ trapGuard.setAttribute('aria-hidden', 'true');
+ return trapGuard;
+}
+
+function createFocusTrap(
+ targetElement: Element,
+ initialFocusElement: HTMLElement | null
+): FocusTrap {
+ const startGuard = createTrapGuard();
+ const endGuard = createTrapGuard();
+ targetElement.insertAdjacentElement('beforebegin', startGuard);
+ targetElement.insertAdjacentElement('afterend', endGuard);
+
+ const focusTrapMetadata: FocusTrapMetadata = {
+ targetElement,
+ lastFocusedElement: null,
+ suspended: false
+ };
+
+ const focusListener = (event: FocusEvent) => {
+ const eventTarget = event.target;
+ const elementContainsTarget = elementContains(
+ targetElement,
+ eventTarget as Element
+ );
+
+ if (focusTrapMetadata.suspended) {
+ return;
+ }
+
+ if (!elementContainsTarget) {
+ // If the event target element is not contained within the target element
+ // for this focus trap, we need to prevent focus from escaping the container
+ event.stopImmediatePropagation();
+ } else if (eventTarget instanceof HTMLElement) {
+ // Ensure we keep track of the most recent valid focus element if we
+ // need to redirect focus later
+ focusTrapMetadata.lastFocusedElement = eventTarget;
+ return;
+ }
+
+ const focusableElements = Array.from(
+ targetElement?.querySelectorAll(focusable) || []
+ ) as HTMLElement[];
+
+ // If focus reaches the trap guards, we need to wrap focus around to the leading
+ // or trailing focusable element depending on which guard obtained focus
+ if (focusableElements.length && eventTarget === startGuard) {
+ focusableElements.reverse()[0]?.focus();
+ return;
+ } else if (focusableElements.length && eventTarget === endGuard) {
+ focusableElements[0]?.focus();
+ return;
+ }
+
+ // If focus somehow escaped the trap, we need to try to restore focus to
+ // to a suitable focusable element within the focus trap target. Otherwise
+ // we'll need to focus on an alternative within the container.
+ if (elementContains(targetElement, focusTrapMetadata.lastFocusedElement)) {
+ focusTrapMetadata.lastFocusedElement?.focus();
+ } else if (focusableElements.length) {
+ focusableElements[0]?.focus();
+ } else {
+ // if there are no focusable elements, just focus the container
+ (targetElement as HTMLElement).focus();
+ }
+ };
+
+ document.addEventListener('focus', focusListener, true);
+
+ if (focusTrapStack.length >= 1) {
+ // Suspend any other traps in the stack while this one is active
+ focusTrapStack.forEach((trap) => {
+ trap.suspended = true;
+ });
+ }
+
+ focusTrapStack.push(focusTrapMetadata);
+
+ if (initialFocusElement) {
+ initialFocusElement.focus();
+ } else {
+ // Try to find a suitable focus element
+ const focusableElements = Array.from(
+ targetElement?.querySelectorAll(focusable) ||
+ /* istanbul ignore else */ []
+ ) as HTMLElement[];
+ focusableElements[0]?.focus();
+ }
+
+ return {
+ ...focusTrapMetadata,
+ initialFocusElement,
+ destroy: () => {
+ document.removeEventListener('focus', focusListener, true);
+ removeFocusTrapFromStack(focusTrapMetadata);
+ startGuard.parentNode?.removeChild(startGuard);
+ endGuard.parentNode?.removeChild(endGuard);
+ // If there are any remaining focus traps in the stack, we need
+ // to unsuspend the most recently added focus trap
+ if (focusTrapStack.length) {
+ focusTrapStack[focusTrapStack.length - 1].suspended = false;
+ }
+ }
+ };
+}
+
+export default function useFocusTrap<
+ TargetElement extends Element = Element,
+ FocusElement extends HTMLElement = HTMLElement
+>(
+ target: ElementOrRef,
+ options: {
+ /**
+ * When set to false, deactivates the focus trap. This can be necessary if
+ * a component needs to conditionally manage focus traps.
+ */
+ disabled?: boolean;
+ /**
+ * When the trap is activated, an optional custom element or ref
+ * can be provided to override the default initial focus element behavior.
+ */
+ initialFocusElement?: ElementOrRef;
+ /**
+ * When set to true and the trap is deactivated, this will return focus
+ * back to the original active element or the return focus element if
+ * provided.
+ */
+ returnFocus?: boolean;
+ /**
+ * When the trap is deactivated, an optional custom element or ref
+ * can be provided to override the default active element behavior.
+ */
+ returnFocusElement?: ElementOrRef;
+ } = {}
+): React.RefObject> {
+ const {
+ disabled = false,
+ returnFocus = true,
+ initialFocusElement: initialFocusElementOrRef,
+ returnFocusElement
+ } = options;
+ const focusTrap = useRef(null);
+ const returnFocusElementRef =
+ useRef() as React.MutableRefObject;
+
+ function restoreFocusToReturnFocusElement() {
+ const resolvedReturnFocusElement = resolveElement(returnFocusElement);
+ if (resolvedReturnFocusElement instanceof HTMLElement) {
+ resolvedReturnFocusElement.focus();
+ } else {
+ returnFocusElementRef.current?.focus();
+ returnFocusElementRef.current = null;
+ }
+ }
+
+ useEffect(() => {
+ const targetElement = resolveElement(target);
+ const initialFocusElement = resolveElement(
+ initialFocusElementOrRef
+ );
+
+ if (!targetElement || disabled) {
+ return;
+ }
+
+ returnFocusElementRef.current = getActiveElement(targetElement);
+
+ focusTrap.current = createFocusTrap(targetElement, initialFocusElement);
+
+ return () => {
+ focusTrap.current?.destroy();
+ focusTrap.current = null;
+ // istanbul ignore else
+ if (returnFocus) {
+ restoreFocusToReturnFocusElement();
+ }
+ };
+ }, [target, disabled]);
+
+ return focusTrap;
+}
diff --git a/packages/react/yarn.lock b/packages/react/yarn.lock
index 131c178ae..0bd15aa32 100644
--- a/packages/react/yarn.lock
+++ b/packages/react/yarn.lock
@@ -3125,21 +3125,6 @@ find-up@^4.0.0, find-up@^4.1.0:
locate-path "^5.0.0"
path-exists "^4.0.0"
-focus-trap-react@^10.2.3:
- version "10.3.0"
- resolved "https://registry.yarnpkg.com/focus-trap-react/-/focus-trap-react-10.3.0.tgz#79e2b63459d30a2f5545cf8491a8b02c1779882e"
- integrity sha512-XrCTj44uNE0clTA47y1AbIb7tM7w6+zi6WrJzb4RxRe3uAIIivkBCwlsCqe7R3vPRT/LCQzfe4+N/KjtJMQMgw==
- dependencies:
- focus-trap "^7.6.0"
- tabbable "^6.2.0"
-
-focus-trap@^7.6.0:
- version "7.6.0"
- resolved "https://registry.yarnpkg.com/focus-trap/-/focus-trap-7.6.0.tgz#7f3edab8135eaca92ab59b6e963eb5cc42ded715"
- integrity sha512-1td0l3pMkWJLFipobUcGaf+5DTY4PLDDrcqoSaKP8ediO/CoWCCYk/fT/Y2A4e6TNB+Sh6clRJCjOPPnKoNHnQ==
- dependencies:
- tabbable "^6.2.0"
-
focusable@^2.3.0:
version "2.3.0"
resolved "https://registry.npmjs.org/focusable/-/focusable-2.3.0.tgz"
@@ -5334,11 +5319,6 @@ symbol-tree@^3.2.4:
resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2"
integrity sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==
-tabbable@^6.2.0:
- version "6.2.0"
- resolved "https://registry.yarnpkg.com/tabbable/-/tabbable-6.2.0.tgz#732fb62bc0175cfcec257330be187dcfba1f3b97"
- integrity sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==
-
test-exclude@^6.0.0:
version "6.0.0"
resolved "https://registry.npmjs.org/test-exclude/-/test-exclude-6.0.0.tgz"
From 09f8756e03c2f620b6c03da96423d465218f3dd4 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
Date: Wed, 18 Dec 2024 22:34:40 +0000
Subject: [PATCH 12/12] chore(cauldron): Release 6.13.0
---
CHANGELOG.md | 15 +++++++++++++++
package.json | 2 +-
packages/react/package.json | 2 +-
packages/styles/package.json | 2 +-
4 files changed, 18 insertions(+), 3 deletions(-)
diff --git a/CHANGELOG.md b/CHANGELOG.md
index d3ea90994..b4c61adb6 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,21 @@
All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
+## [6.13.0](https://github.com/dequelabs/cauldron/compare/v6.12.0...v6.13.0) (2024-12-18)
+
+
+### Features
+
+* **react,style:** add AnchoredOverlay component, refactor Tooltip and Popover to use AnchoredOverlay ([#1760](https://github.com/dequelabs/cauldron/issues/1760)) ([6773975](https://github.com/dequelabs/cauldron/commit/67739754b0c6368ec1db878ace917730db102797))
+* **react:** add max-width column configuration to Table grids ([#1770](https://github.com/dequelabs/cauldron/issues/1770)) ([dc7e4ac](https://github.com/dequelabs/cauldron/commit/dc7e4ac43be846ee6faa6b1cf878753aed1b6a31))
+* **react:** add multiselect to Listbox component ([#1763](https://github.com/dequelabs/cauldron/issues/1763)) ([afa8fb4](https://github.com/dequelabs/cauldron/commit/afa8fb4f89d43e453eccfa2c39587e4fee0bc9cf))
+* **react:** remove focus-trap-react replacing with internally managed focus traps ([#1730](https://github.com/dequelabs/cauldron/issues/1730)) ([775bed0](https://github.com/dequelabs/cauldron/commit/775bed0e4becc55af34e69495ee0b6e3db3a11be))
+
+
+### Bug Fixes
+
+* **react:** remove defaultProps from sidebar, use default parameters instead ([#1764](https://github.com/dequelabs/cauldron/issues/1764)) ([e4a3441](https://github.com/dequelabs/cauldron/commit/e4a3441d8497f656dbec6afa35a989a139d430e7))
+
## [6.12.0](https://github.com/dequelabs/cauldron/compare/v6.11.0...v6.12.0) (2024-12-04)
diff --git a/package.json b/package.json
index 3260c6b0f..49c556d7e 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
{
"name": "cauldron",
"private": true,
- "version": "6.12.0",
+ "version": "6.13.0",
"license": "MPL-2.0",
"scripts": {
"clean": "rimraf dist docs/dist",
diff --git a/packages/react/package.json b/packages/react/package.json
index 6511cb6d0..e5a504c56 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -1,6 +1,6 @@
{
"name": "@deque/cauldron-react",
- "version": "6.12.0",
+ "version": "6.13.0",
"license": "MPL-2.0",
"description": "Fully accessible react components library for Deque Cauldron",
"homepage": "https://cauldron.dequelabs.com/",
diff --git a/packages/styles/package.json b/packages/styles/package.json
index 264107d99..3c8f7c617 100644
--- a/packages/styles/package.json
+++ b/packages/styles/package.json
@@ -1,6 +1,6 @@
{
"name": "@deque/cauldron-styles",
- "version": "6.12.0",
+ "version": "6.13.0",
"license": "MPL-2.0",
"description": "deque cauldron pattern library styles",
"repository": "https://github.com/dequelabs/cauldron",