@box/blueprint-web 6.41.9 → 6.42.1

package/lib-esm/index.d.ts

@@ -54,5 +54,6 @@ export * from './toolbar';
 export * from './tooltip';
 export * from './trigger-button';
 export * from './util-components/scrollable-container/scrollable-container';
+export * from './util-components/focus-trap';
 export * from './utils/useBreakpoint';
 export * from './utils/keyboardUtils';

package/lib-esm/index.js

@@ -67,6 +67,7 @@ export { Toolbar } from './toolbar/index.js';
 export { Tooltip, TooltipProvider } from './tooltip/tooltip.js';
 export { TriggerButton } from './trigger-button/trigger-button.js';
 export { ScrollContext, ScrollableContainer, useScroll, useScrollContext } from './util-components/scrollable-container/scrollable-container.js';
+export { FocusTrap } from './util-components/focus-trap/focus-trap.js';
 export { Breakpoint, useBreakpoint } from './utils/useBreakpoint.js';
 export { isCtrlKeyPressed, isDeleteKeyPressed, keys } from './utils/keyboardUtils.js';
 export { useNotification } from './primitives/notification/notification-provider.js';

package/lib-esm/primitives/tabs/tab-list.js

@@ -9,7 +9,8 @@ const TabList = /*#__PURE__*/forwardRef(function TabList(props, ref) {
   const {
     className,
     variant = 'default',
-    containerClassname
+    containerClassname,
+    ...rest
   } = props;
   const tab = useTabs();
   if (!tab) {
@@ -18,7 +19,7 @@ const TabList = /*#__PURE__*/forwardRef(function TabList(props, ref) {
   return jsx("div", {
     className: clsx(styles.tabsListContainer, containerClassname),
     children: jsx(TabList$1, {
-      ...props,
+      ...rest,
       ref: ref,
       className: clsx(variant === 'contentSwitcher' ? styles.contentSwitchTabList : styles.tabList, className),
       store: tab

package/lib-esm/util-components/focus-trap/focus-trap.js

@@ -0,0 +1,52 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useRef, useCallback, useEffect } from 'react';
+import tabbable from 'tabbable';
+
+// TODO(DISC-1141): write unit tests
+const FocusTrap = ({
+  containerRef,
+  children,
+  customInitialFocus
+}) => {
+  const previousFocusEl = useRef(null);
+  const getTabbableElements = useCallback(() => {
+    if (!containerRef.current) {
+      throw new Error('Could not initialize focus-trapping - container is missing');
+    }
+    const tabbableEls = tabbable(containerRef.current);
+    if (!tabbableEls.length) {
+      throw new Error('Could not initialize focus-trapping - focusable elements are missing');
+    }
+    return tabbableEls;
+  }, [containerRef]);
+  const focusFirstTabbableElement = useCallback(() => {
+    const tabbableEls = getTabbableElements();
+    tabbableEls[0].focus();
+  }, [getTabbableElements]);
+  const focusLastTabbableElement = useCallback(() => {
+    const tabbableEls = getTabbableElements();
+    tabbableEls[tabbableEls.length - 1].focus();
+  }, [getTabbableElements]);
+  useEffect(() => {
+    previousFocusEl.current = document.activeElement;
+    customInitialFocus ? customInitialFocus(getTabbableElements()) : focusFirstTabbableElement();
+    return () => {
+      if (previousFocusEl.current) {
+        previousFocusEl.current.focus();
+      }
+    };
+  }, [customInitialFocus, focusFirstTabbableElement, getTabbableElements]);
+  return jsxs(Fragment, {
+    children: [jsx("i", {
+      "aria-hidden": true,
+      onFocus: focusLastTabbableElement,
+      tabIndex: 0
+    }), children, jsx("i", {
+      "aria-hidden": true,
+      onFocus: focusFirstTabbableElement,
+      tabIndex: 0
+    })]
+  });
+};
+
+export { FocusTrap };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "6.41.9",
+    "version": "6.42.1",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {
         "access": "public",
@@ -57,7 +57,7 @@
     "devDependencies": {
         "@box/storybook-utils": "^0.0.8"
     },
-    "gitHead": "d291964120bd974fcc10f9a7ce5c24661f2673a2",
+    "gitHead": "62264a08465fad473f298ca4b8deb24bb26a1e88",
     "module": "lib-esm/index.js",
     "main": "lib-esm/index.js",
     "exports": {