@carbon/react 1.80.0 → 1.80.1

package/es/components/ComposedModal/ComposedModal.js

@@ -17,14 +17,15 @@ import mergeRefs from '../../tools/mergeRefs.js';
 import cx from 'classnames';
 import toggleClass from '../../tools/toggleClass.js';
 import requiredIfGivenPropIsTruthy from '../../prop-types/requiredIfGivenPropIsTruthy.js';
-import wrapFocus, { elementOrParentIsFloatingMenu } from '../../internal/wrapFocus.js';
+import wrapFocus, { wrapFocusWithoutSentinels, elementOrParentIsFloatingMenu } from '../../internal/wrapFocus.js';
 import { usePrefix } from '../../internal/usePrefix.js';
-import { Escape } from '../../internal/keyboard/keys.js';
+import { Escape, Tab } from '../../internal/keyboard/keys.js';
 import { match } from '../../internal/keyboard/match.js';
 import { useFeatureFlag } from '../FeatureFlags/index.js';
 import { composeEventHandlers } from '../../tools/events.js';
 import deprecate from '../../prop-types/deprecate.js';
 import { unstable__Dialog } from '../Dialog/index.js';
+import { warning } from '../../internal/warning.js';
 import { debounce } from '../../node_modules/es-toolkit/dist/compat/function/debounce.mjs.js';
 
 const ModalBody = /*#__PURE__*/React__default.forwardRef(function ModalBody(_ref, ref) {
@@ -121,9 +122,9 @@ const ComposedModal = /*#__PURE__*/React__default.forwardRef(function ComposedMo
   const startSentinel = useRef(null);
   const endSentinel = useRef(null);
   const onMouseDownTarget = useRef(null);
-  const enableDialogElement =
-  // useFeatureFlag('enable-experimental-focus-wrap-without-sentinels') ||
-  useFeatureFlag('enable-dialog-element');
+  const enableDialogElement = useFeatureFlag('enable-dialog-element');
+  const focusTrapWithoutSentinels = useFeatureFlag('enable-experimental-focus-wrap-without-sentinels');
+  process.env.NODE_ENV !== "production" ? warning(!(focusTrapWithoutSentinels && enableDialogElement), '`<Modal>` detected both `focusTrapWithoutSentinels` and ' + '`enableDialogElement` feature flags are enabled. The native dialog ' + 'element handles focus, so `enableDialogElement` must be off for ' + '`focusTrapWithoutSentinels` to have any effect.') : void 0;
 
   // Keep track of modal open/close state
   // and propagate it to the document.body
@@ -149,6 +150,13 @@ const ComposedModal = /*#__PURE__*/React__default.forwardRef(function ComposedMo
       if (match(event, Escape)) {
         closeModal(event);
       }
+      if (focusTrapWithoutSentinels && open && match(event, Tab) && innerModal.current) {
+        wrapFocusWithoutSentinels({
+          containerNode: innerModal.current,
+          currentActiveNode: event.target,
+          event: event
+        });
+      }
     }
     onKeyDown?.(event);
   }
@@ -283,7 +291,7 @@ const ComposedModal = /*#__PURE__*/React__default.forwardRef(function ComposedMo
     "aria-modal": "true",
     "aria-label": ariaLabel ? ariaLabel : generatedAriaLabel,
     "aria-labelledby": ariaLabelledBy
-  }, /*#__PURE__*/React__default.createElement("button", {
+  }, !focusTrapWithoutSentinels && /*#__PURE__*/React__default.createElement("button", {
     type: "button",
     ref: startSentinel,
     className: `${prefix}--visually-hidden`
@@ -292,7 +300,7 @@ const ComposedModal = /*#__PURE__*/React__default.forwardRef(function ComposedMo
     className: `${prefix}--modal-container-body`
   }, slug ? normalizedDecorator : decorator ? /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--modal--inner__decorator`
-  }, normalizedDecorator) : '', childrenWithProps), /*#__PURE__*/React__default.createElement("button", {
+  }, normalizedDecorator) : '', childrenWithProps), !focusTrapWithoutSentinels && /*#__PURE__*/React__default.createElement("button", {
     type: "button",
     ref: endSentinel,
     className: `${prefix}--visually-hidden`
@@ -302,7 +310,7 @@ const ComposedModal = /*#__PURE__*/React__default.forwardRef(function ComposedMo
     role: "presentation",
     ref: ref,
     "aria-hidden": !open,
-    onBlur: !enableDialogElement ? handleBlur : () => {},
+    onBlur: !enableDialogElement && !focusTrapWithoutSentinels ? handleBlur : () => {},
     onClick: composeEventHandlers([rest?.onClick, handleOnClick]),
     onMouseDown: composeEventHandlers([rest?.onMouseDown, handleOnMouseDown]),
     onKeyDown: handleKeyDown,

package/es/components/Modal/Modal.js

@@ -17,11 +17,11 @@ import ButtonSet from '../ButtonSet/ButtonSet.js';
 import InlineLoading from '../InlineLoading/InlineLoading.js';
 import { Layer } from '../Layer/index.js';
 import requiredIfGivenPropIsTruthy from '../../prop-types/requiredIfGivenPropIsTruthy.js';
-import wrapFocus, { elementOrParentIsFloatingMenu } from '../../internal/wrapFocus.js';
+import wrapFocus, { wrapFocusWithoutSentinels, elementOrParentIsFloatingMenu } from '../../internal/wrapFocus.js';
 import useIsomorphicEffect from '../../internal/useIsomorphicEffect.js';
 import { useId } from '../../internal/useId.js';
 import { usePrefix } from '../../internal/usePrefix.js';
-import { Escape, Enter } from '../../internal/keyboard/keys.js';
+import { Escape, Enter, Tab } from '../../internal/keyboard/keys.js';
 import { match } from '../../internal/keyboard/match.js';
 import { IconButton } from '../IconButton/index.js';
 import { noopFn } from '../../internal/noopFn.js';
@@ -30,6 +30,7 @@ import { useFeatureFlag } from '../FeatureFlags/index.js';
 import { composeEventHandlers } from '../../tools/events.js';
 import deprecate from '../../prop-types/deprecate.js';
 import { unstable__Dialog } from '../Dialog/index.js';
+import { warning } from '../../internal/warning.js';
 import { debounce } from '../../node_modules/es-toolkit/dist/compat/function/debounce.mjs.js';
 import { Text } from '../Text/Text.js';
 
@@ -87,7 +88,9 @@ const Modal = /*#__PURE__*/React__default.forwardRef(function Modal(_ref, ref) {
     [`${prefix}--btn--loading`]: loadingStatus !== 'inactive'
   });
   const loadingActive = loadingStatus !== 'inactive';
-  const enableDialogElement = useFeatureFlag('enable-experimental-focus-wrap-without-sentinels') || useFeatureFlag('enable-dialog-element');
+  const focusTrapWithoutSentinels = useFeatureFlag('enable-experimental-focus-wrap-without-sentinels');
+  const enableDialogElement = useFeatureFlag('enable-dialog-element');
+  process.env.NODE_ENV !== "production" ? warning(!(focusTrapWithoutSentinels && enableDialogElement), '`<Modal>` detected both `focusTrapWithoutSentinels` and ' + '`enableDialogElement` feature flags are enabled. The native dialog ' + 'element handles focus, so `enableDialogElement` must be off for ' + '`focusTrapWithoutSentinels` to have any effect.') : void 0;
   function isCloseButton(element) {
     return !onSecondarySubmit && element === secondaryButton.current || element.classList.contains(modalCloseButtonClass);
   }
@@ -100,6 +103,15 @@ const Modal = /*#__PURE__*/React__default.forwardRef(function Modal(_ref, ref) {
       if (match(evt, Enter) && shouldSubmitOnEnter && !isCloseButton(evt.target)) {
         onRequestSubmit(evt);
       }
+      if (focusTrapWithoutSentinels && !enableDialogElement && match(evt, Tab) && innerModal.current) {
+        wrapFocusWithoutSentinels({
+          containerNode: innerModal.current,
+          currentActiveNode: evt.target,
+          // TODO: Delete type assertion following util rewrite.
+          // https://github.com/carbon-design-system/carbon/pull/18913
+          event: evt
+        });
+      }
     }
   }
   function handleOnClick(evt) {
@@ -326,7 +338,7 @@ const Modal = /*#__PURE__*/React__default.forwardRef(function Modal(_ref, ref) {
     iconDescription: loadingIconDescription,
     className: `${prefix}--inline-loading--btn`,
     onSuccess: onLoadingSuccess
-  })))) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, !enableDialogElement && /*#__PURE__*/React__default.createElement("span", {
+  })))) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, !enableDialogElement && !focusTrapWithoutSentinels && /*#__PURE__*/React__default.createElement("span", {
     ref: startTrap,
     tabIndex: 0,
     role: "link",
@@ -385,7 +397,7 @@ const Modal = /*#__PURE__*/React__default.forwardRef(function Modal(_ref, ref) {
     iconDescription: loadingIconDescription,
     className: `${prefix}--inline-loading--btn`,
     onSuccess: onLoadingSuccess
-  })))), !enableDialogElement && /*#__PURE__*/React__default.createElement("span", {
+  })))), !enableDialogElement && !focusTrapWithoutSentinels && /*#__PURE__*/React__default.createElement("span", {
     ref: endTrap,
     tabIndex: 0,
     role: "link",

package/lib/components/ComposedModal/ComposedModal.js

@@ -29,6 +29,7 @@ var index$1 = require('../FeatureFlags/index.js');
 var events = require('../../tools/events.js');
 var deprecate = require('../../prop-types/deprecate.js');
 var index$2 = require('../Dialog/index.js');
+var warning = require('../../internal/warning.js');
 var debounce = require('../../node_modules/es-toolkit/dist/compat/function/debounce.mjs.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -131,9 +132,9 @@ const ComposedModal = /*#__PURE__*/React__default["default"].forwardRef(function
   const startSentinel = React.useRef(null);
   const endSentinel = React.useRef(null);
   const onMouseDownTarget = React.useRef(null);
-  const enableDialogElement =
-  // useFeatureFlag('enable-experimental-focus-wrap-without-sentinels') ||
-  index$1.useFeatureFlag('enable-dialog-element');
+  const enableDialogElement = index$1.useFeatureFlag('enable-dialog-element');
+  const focusTrapWithoutSentinels = index$1.useFeatureFlag('enable-experimental-focus-wrap-without-sentinels');
+  process.env.NODE_ENV !== "production" ? warning.warning(!(focusTrapWithoutSentinels && enableDialogElement), '`<Modal>` detected both `focusTrapWithoutSentinels` and ' + '`enableDialogElement` feature flags are enabled. The native dialog ' + 'element handles focus, so `enableDialogElement` must be off for ' + '`focusTrapWithoutSentinels` to have any effect.') : void 0;
 
   // Keep track of modal open/close state
   // and propagate it to the document.body
@@ -159,6 +160,13 @@ const ComposedModal = /*#__PURE__*/React__default["default"].forwardRef(function
       if (match.match(event, keys.Escape)) {
         closeModal(event);
       }
+      if (focusTrapWithoutSentinels && open && match.match(event, keys.Tab) && innerModal.current) {
+        wrapFocus.wrapFocusWithoutSentinels({
+          containerNode: innerModal.current,
+          currentActiveNode: event.target,
+          event: event
+        });
+      }
     }
     onKeyDown?.(event);
   }
@@ -293,7 +301,7 @@ const ComposedModal = /*#__PURE__*/React__default["default"].forwardRef(function
     "aria-modal": "true",
     "aria-label": ariaLabel ? ariaLabel : generatedAriaLabel,
     "aria-labelledby": ariaLabelledBy
-  }, /*#__PURE__*/React__default["default"].createElement("button", {
+  }, !focusTrapWithoutSentinels && /*#__PURE__*/React__default["default"].createElement("button", {
     type: "button",
     ref: startSentinel,
     className: `${prefix}--visually-hidden`
@@ -302,7 +310,7 @@ const ComposedModal = /*#__PURE__*/React__default["default"].forwardRef(function
     className: `${prefix}--modal-container-body`
   }, slug ? normalizedDecorator : decorator ? /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${prefix}--modal--inner__decorator`
-  }, normalizedDecorator) : '', childrenWithProps), /*#__PURE__*/React__default["default"].createElement("button", {
+  }, normalizedDecorator) : '', childrenWithProps), !focusTrapWithoutSentinels && /*#__PURE__*/React__default["default"].createElement("button", {
     type: "button",
     ref: endSentinel,
     className: `${prefix}--visually-hidden`
@@ -312,7 +320,7 @@ const ComposedModal = /*#__PURE__*/React__default["default"].forwardRef(function
     role: "presentation",
     ref: ref,
     "aria-hidden": !open,
-    onBlur: !enableDialogElement ? handleBlur : () => {},
+    onBlur: !enableDialogElement && !focusTrapWithoutSentinels ? handleBlur : () => {},
     onClick: events.composeEventHandlers([rest?.onClick, handleOnClick]),
     onMouseDown: events.composeEventHandlers([rest?.onMouseDown, handleOnMouseDown]),
     onKeyDown: handleKeyDown,

package/lib/components/Modal/Modal.js

@@ -34,6 +34,7 @@ var index = require('../FeatureFlags/index.js');
 var events = require('../../tools/events.js');
 var deprecate = require('../../prop-types/deprecate.js');
 var index$1 = require('../Dialog/index.js');
+var warning = require('../../internal/warning.js');
 var debounce = require('../../node_modules/es-toolkit/dist/compat/function/debounce.mjs.js');
 var Text = require('../Text/Text.js');
 
@@ -97,7 +98,9 @@ const Modal = /*#__PURE__*/React__default["default"].forwardRef(function Modal(_
     [`${prefix}--btn--loading`]: loadingStatus !== 'inactive'
   });
   const loadingActive = loadingStatus !== 'inactive';
-  const enableDialogElement = index.useFeatureFlag('enable-experimental-focus-wrap-without-sentinels') || index.useFeatureFlag('enable-dialog-element');
+  const focusTrapWithoutSentinels = index.useFeatureFlag('enable-experimental-focus-wrap-without-sentinels');
+  const enableDialogElement = index.useFeatureFlag('enable-dialog-element');
+  process.env.NODE_ENV !== "production" ? warning.warning(!(focusTrapWithoutSentinels && enableDialogElement), '`<Modal>` detected both `focusTrapWithoutSentinels` and ' + '`enableDialogElement` feature flags are enabled. The native dialog ' + 'element handles focus, so `enableDialogElement` must be off for ' + '`focusTrapWithoutSentinels` to have any effect.') : void 0;
   function isCloseButton(element) {
     return !onSecondarySubmit && element === secondaryButton.current || element.classList.contains(modalCloseButtonClass);
   }
@@ -110,6 +113,15 @@ const Modal = /*#__PURE__*/React__default["default"].forwardRef(function Modal(_
       if (match.match(evt, keys.Enter) && shouldSubmitOnEnter && !isCloseButton(evt.target)) {
         onRequestSubmit(evt);
       }
+      if (focusTrapWithoutSentinels && !enableDialogElement && match.match(evt, keys.Tab) && innerModal.current) {
+        wrapFocus.wrapFocusWithoutSentinels({
+          containerNode: innerModal.current,
+          currentActiveNode: evt.target,
+          // TODO: Delete type assertion following util rewrite.
+          // https://github.com/carbon-design-system/carbon/pull/18913
+          event: evt
+        });
+      }
     }
   }
   function handleOnClick(evt) {
@@ -336,7 +348,7 @@ const Modal = /*#__PURE__*/React__default["default"].forwardRef(function Modal(_
     iconDescription: loadingIconDescription,
     className: `${prefix}--inline-loading--btn`,
     onSuccess: onLoadingSuccess
-  })))) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, !enableDialogElement && /*#__PURE__*/React__default["default"].createElement("span", {
+  })))) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, !enableDialogElement && !focusTrapWithoutSentinels && /*#__PURE__*/React__default["default"].createElement("span", {
     ref: startTrap,
     tabIndex: 0,
     role: "link",
@@ -395,7 +407,7 @@ const Modal = /*#__PURE__*/React__default["default"].forwardRef(function Modal(_
     iconDescription: loadingIconDescription,
     className: `${prefix}--inline-loading--btn`,
     onSuccess: onLoadingSuccess
-  })))), !enableDialogElement && /*#__PURE__*/React__default["default"].createElement("span", {
+  })))), !enableDialogElement && !focusTrapWithoutSentinels && /*#__PURE__*/React__default["default"].createElement("span", {
     ref: endTrap,
     tabIndex: 0,
     role: "link",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/react",
   "description": "React components for the Carbon Design System",
-  "version": "1.80.0",
+  "version": "1.80.1",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -55,7 +55,7 @@
     "@carbon/feature-flags": "^0.26.0",
     "@carbon/icons-react": "^11.58.0",
     "@carbon/layout": "^11.32.0",
-    "@carbon/styles": "^1.79.0",
+    "@carbon/styles": "^1.79.1",
     "@floating-ui/react": "^0.27.4",
     "@ibm/telemetry-js": "^1.5.0",
     "classnames": "2.5.1",
@@ -147,5 +147,5 @@
     "**/*.scss",
     "**/*.css"
   ],
-  "gitHead": "7c4674649e1a5bd1367d99797df86cdc338eff6e"
+  "gitHead": "1fcbf602a0c0a9e33987b3b63e7a7a8b39af47d0"
 }