@carbon/react 1.53.1 → 1.54.0

package/lib/internal/wrapFocus.js

@@ -10,7 +10,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var findLast = require('lodash.findlast');
+var React = require('react');
 var navigation = require('./keyboard/navigation.js');
+var tabbable = require('tabbable');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -68,5 +70,54 @@ function wrapFocus(_ref) {
   }
 }
 
+/**
+ * Ensures the focus is kept in the given `containerNode`, implementing "focus-wrap" behavior.
+ * Note: This must be called *before* focus moves using onKeyDown or similar.
+ * @param {object} options The options.
+ * @param {Node|null} options.containerNode
+ * @param {EventTarget} options.currentActiveNode The DOM node that has focus.
+ * @param {KeyboardEvent} options.event The DOM event
+ */
+function wrapFocusWithoutSentinels(_ref2) {
+  let {
+    containerNode,
+    currentActiveNode,
+    event
+  } = _ref2;
+  if (['blur', 'focusout', 'focusin', 'focus'].includes(event.type) && process.env.NODE_ENV !== "production") {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    React.useEffect(() => {
+      throw new Error(`Error: wrapFocusWithoutSentinels(...) called in unsupported ${event.type} event.\n\nCall wrapFocusWithoutSentinels(...) from onKeyDown instead.`);
+    });
+  }
+
+  // The reason we're using tabbable is because it returns the tabbable
+  // items *in tab order*, whereas using our `selectorTabbable` only
+  // returns in DOM order
+  const tabbables = tabbable.tabbable(containerNode);
+  const firstTabbable = tabbables[0];
+  const lastTabbable = tabbables[tabbables.length - 1];
+
+  // console.log(`---------------------------------`);
+  // console.log(containerNode);
+  // console.log(tabbables);
+  // console.log(firstTabbable);
+  // console.log(lastTabbable);
+  // console.log(currentActiveNode);
+
+  // The shift key is used to determine if focus is moving forwards or backwards
+  if (currentActiveNode === lastTabbable && !event.shiftKey) {
+    // Cancel the current movement of focus because we're going to place it ourselves
+    event.preventDefault();
+    firstTabbable.focus();
+  }
+  if (currentActiveNode === firstTabbable && event.shiftKey) {
+    // Cancel the current movement of focus because we're going to place it ourselves
+    event.preventDefault();
+    lastTabbable.focus();
+  }
+}
+
 exports["default"] = wrapFocus;
 exports.elementOrParentIsFloatingMenu = elementOrParentIsFloatingMenu;
+exports.wrapFocusWithoutSentinels = wrapFocusWithoutSentinels;

package/lib/tools/createPropAdapter.js

@@ -0,0 +1,44 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+/**
+ * Create an adapter that converts an object of props with potentially deprecated
+ * prop names to the replacement prop names in a newer version. Useful for guarding
+ * against breaking changes when a prop has been renamed
+ *
+ * @param {Array} spec - an array of options which specify a text or regex
+ * matcher alongside a replacement if there is a match
+ * @returns {Function}
+ */
+function mapPopoverAlignProp(align) {
+  switch (align) {
+    case 'top-left':
+      return 'top-start';
+    case 'top-right':
+      return 'top-end';
+    case 'bottom-left':
+      return 'bottom-start';
+    case 'bottom-right':
+      return 'bottom-end';
+    case 'left-bottom':
+      return 'left-end';
+    case 'left-top':
+      return 'left-start';
+    case 'right-bottom':
+      return 'right-end';
+    case 'right-top':
+      return 'right-start';
+    default:
+      return align;
+  }
+}
+
+exports.mapPopoverAlignProp = mapPopoverAlignProp;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/react",
   "description": "React components for the Carbon Design System",
-  "version": "1.53.1",
+  "version": "1.54.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -48,14 +48,15 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.18.3",
-    "@carbon/feature-flags": "^0.18.0",
-    "@carbon/icons-react": "^11.38.0",
+    "@carbon/feature-flags": "^0.19.0",
+    "@carbon/icons-react": "^11.39.0",
     "@carbon/layout": "^11.21.0",
-    "@carbon/styles": "^1.53.1",
+    "@carbon/styles": "^1.54.0",
+    "@floating-ui/react": "^0.25.4",
     "@ibm/telemetry-js": "^1.2.1",
     "classnames": "2.5.1",
     "copy-to-clipboard": "^3.3.1",
-    "downshift": "8.4.0",
+    "downshift": "8.5.0",
     "flatpickr": "4.6.13",
     "invariant": "^2.2.3",
     "lodash.debounce": "^4.0.8",
@@ -65,6 +66,7 @@
     "lodash.throttle": "^4.1.1",
     "prop-types": "^15.7.2",
     "react-is": "^18.2.0",
+    "tabbable": "^6.2.0",
     "use-resize-observer": "^6.0.0",
     "wicg-inert": "^3.1.1",
     "window-or-global": "^1.0.1"
@@ -79,7 +81,7 @@
     "@babel/preset-react": "^7.22.3",
     "@babel/preset-typescript": "^7.21.5",
     "@carbon/test-utils": "^10.30.0",
-    "@carbon/themes": "^11.33.1",
+    "@carbon/themes": "^11.34.0",
     "@rollup/plugin-babel": "^6.0.0",
     "@rollup/plugin-commonjs": "^25.0.0",
     "@rollup/plugin-node-resolve": "^15.0.0",
@@ -139,5 +141,5 @@
     "**/*.scss",
     "**/*.css"
   ],
-  "gitHead": "56291fbf93e5fe5a8b75cdc162131784cdc57947"
+  "gitHead": "4bdd6802dd612af764ef76162141333d35bd84f4"
 }