@carbon/ibm-products 2.43.2-canary.18 → 2.43.2-canary.183

package/lib/global/js/utils/keyboardNavigation.js

@@ -0,0 +1,43 @@
+/**
+ * Copyright IBM Corp. 2020, 2024
+ *
+ * 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 });
+
+/**
+ * Various utilities to help with a11y work
+ */
+
+/**
+ * A flag `node.compareDocumentPosition(target)` returns,
+ * that indicates `target` is located earlier than `node` in the document or `target` contains `node`.
+ */
+var DOCUMENT_POSITION_BROAD_PRECEDING =
+// Checks `typeof Node` for `react-docgen`
+typeof Node !== 'undefined' &&
+// eslint-disable-next-line ssr-friendly/no-dom-globals-in-module-scope
+Node.DOCUMENT_POSITION_PRECEDING | Node.DOCUMENT_POSITION_CONTAINS;
+
+/**
+ * A flag `node.compareDocumentPosition(target)` returns,
+ * that indicates `target` is located later than `node` in the document or `node` contains `target`.
+ */
+var DOCUMENT_POSITION_BROAD_FOLLOWING =
+// Checks `typeof Node` for `react-docgen`
+typeof Node !== 'undefined' &&
+// eslint-disable-next-line ssr-friendly/no-dom-globals-in-module-scope
+Node.DOCUMENT_POSITION_FOLLOWING | Node.DOCUMENT_POSITION_CONTAINED_BY;
+
+/**
+ * CSS selector that selects major nodes that are sequential-focusable.
+ */
+var selectorTabbable = "\n  a[href], area[href], input:not([disabled]):not([tabindex='-1']),\n  button:not([disabled]):not([tabindex='-1']),select:not([disabled]):not([tabindex='-1']),\n  textarea:not([disabled]):not([tabindex='-1']),\n  iframe, object, embed, *[tabindex]:not([tabindex='-1']):not([disabled]), *[contenteditable=true]\n";
+
+exports.DOCUMENT_POSITION_BROAD_FOLLOWING = DOCUMENT_POSITION_BROAD_FOLLOWING;
+exports.DOCUMENT_POSITION_BROAD_PRECEDING = DOCUMENT_POSITION_BROAD_PRECEDING;
+exports.selectorTabbable = selectorTabbable;

package/lib/global/js/utils/scrollableAncestor.js

@@ -11,6 +11,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
 
+/**
+ * Copyright IBM Corp. 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 var windowExists = (typeof window === "undefined" ? "undefined" : _rollupPluginBabelHelpers["typeof"](window)) !== "undefined";
 
 // determine whether the target is scrollable

package/lib/global/js/utils/uuidv4.d.ts

@@ -1,2 +1,8 @@
 export default uuidv4;
+/**
+ * Copyright IBM Corp. 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
 declare function uuidv4(): any;

package/lib/global/js/utils/uuidv4.js

@@ -9,6 +9,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+// https://stackoverflow.com/a/2117523
+
 function uuidv4() {
   var randomValues = function randomValues(c) {
     return typeof crypto !== 'undefined' ? crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4 : Math.random() * 16 >> c / 4;

package/lib/global/js/utils/wait.d.ts

@@ -1,2 +1,8 @@
 export default wait;
+/**
+ * Copyright IBM Corp. 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
 declare function wait(ms: any): Promise<any>;

package/lib/global/js/utils/wait.js

@@ -9,6 +9,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+// utility function for an async timeout
+
 function wait(ms) {
   return new Promise(function (resolve) {
     return setTimeout(resolve, ms);

package/lib/global/js/utils/wrapFocus.d.ts

@@ -0,0 +1,25 @@
+export default wrapFocus;
+/**
+ * @param {Node} node A DOM node.
+ * @param {string[]} selectorsFloatingMenus The CSS selectors that matches floating menus.
+ * @returns {boolean} `true` of the given `node` is in a floating menu.
+ */
+export function elementOrParentIsFloatingMenu(node: Node, selectorsFloatingMenus?: string[]): boolean;
+/**
+ * Ensures the focus is kept in the given `modalNode`, implementing "focus-wrap" behavior.
+ * @param {object} options The options.
+ * @param {Node|null} options.bodyNode The DOM node of the inner modal.
+ * @param {Node|null} options.startTrapNode The DOM node of the focus sentinel the is placed earlier next to `modalNode`.
+ * @param {Node|null} options.endTrapNode The DOM node of the focus sentinel the is placed next to `modalNode`.
+ * @param {Node} options.currentActiveNode The DOM node that has focus.
+ * @param {Node} options.oldActiveNode The DOM node that previously had focus.
+ * @param {string[]} [options.selectorsFloatingMenus] The CSS selectors that matches floating menus
+ */
+declare function wrapFocus({ bodyNode, startTrapNode, endTrapNode, currentActiveNode, oldActiveNode, selectorsFloatingMenus, }: {
+    bodyNode: Node | null;
+    startTrapNode: Node | null;
+    endTrapNode: Node | null;
+    currentActiveNode: Node;
+    oldActiveNode: Node;
+    selectorsFloatingMenus?: string[] | undefined;
+}): void;

package/lib/global/js/utils/wrapFocus.js

@@ -0,0 +1,73 @@
+/**
+ * Copyright IBM Corp. 2020, 2024
+ *
+ * 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 });
+
+var keyboardNavigation = require('./keyboardNavigation.js');
+var settings = require('../../../settings.js');
+
+/**
+ * @param {Node} node A DOM node.
+ * @param {string[]} selectorsFloatingMenus The CSS selectors that matches floating menus.
+ * @returns {boolean} `true` of the given `node` is in a floating menu.
+ */
+function elementOrParentIsFloatingMenu(node) {
+  var selectorsFloatingMenus = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [".".concat(settings.carbon.prefix, "--overflow-menu-options"), ".".concat(settings.carbon.prefix, "--tooltip"), '.flatpickr-calendar'];
+  if (node && typeof node.closest === 'function') {
+    return selectorsFloatingMenus.some(function (selector) {
+      return node.closest(selector);
+    });
+  }
+}
+
+/**
+ * Ensures the focus is kept in the given `modalNode`, implementing "focus-wrap" behavior.
+ * @param {object} options The options.
+ * @param {Node|null} options.bodyNode The DOM node of the inner modal.
+ * @param {Node|null} options.startTrapNode The DOM node of the focus sentinel the is placed earlier next to `modalNode`.
+ * @param {Node|null} options.endTrapNode The DOM node of the focus sentinel the is placed next to `modalNode`.
+ * @param {Node} options.currentActiveNode The DOM node that has focus.
+ * @param {Node} options.oldActiveNode The DOM node that previously had focus.
+ * @param {string[]} [options.selectorsFloatingMenus] The CSS selectors that matches floating menus
+ */
+function wrapFocus(_ref) {
+  var bodyNode = _ref.bodyNode,
+    startTrapNode = _ref.startTrapNode,
+    endTrapNode = _ref.endTrapNode,
+    currentActiveNode = _ref.currentActiveNode,
+    oldActiveNode = _ref.oldActiveNode,
+    selectorsFloatingMenus = _ref.selectorsFloatingMenus;
+  if (bodyNode && currentActiveNode && oldActiveNode && !bodyNode.contains(currentActiveNode) && !elementOrParentIsFloatingMenu(currentActiveNode, selectorsFloatingMenus)) {
+    var comparisonResult = oldActiveNode.compareDocumentPosition(currentActiveNode);
+    if (currentActiveNode === startTrapNode || comparisonResult & keyboardNavigation.DOCUMENT_POSITION_BROAD_PRECEDING) {
+      var arrayNodes = Array.from(bodyNode.querySelectorAll(keyboardNavigation.selectorTabbable));
+      arrayNodes.reverse();
+      var tabbable = arrayNodes.find(function (elem) {
+        return Boolean(elem.offsetParent);
+      });
+      if (tabbable) {
+        tabbable.focus();
+      } else if (bodyNode !== oldActiveNode) {
+        bodyNode.focus();
+      }
+    } else if (currentActiveNode === endTrapNode || comparisonResult & keyboardNavigation.DOCUMENT_POSITION_BROAD_FOLLOWING) {
+      var _tabbable = Array.prototype.find.call(bodyNode.querySelectorAll(keyboardNavigation.selectorTabbable), function (elem) {
+        return Boolean(elem.offsetParent);
+      });
+      if (_tabbable) {
+        _tabbable.focus();
+      } else if (bodyNode !== oldActiveNode) {
+        bodyNode.focus();
+      }
+    }
+  }
+}
+
+exports["default"] = wrapFocus;
+exports.elementOrParentIsFloatingMenu = elementOrParentIsFloatingMenu;