@carbon/ibm-products/lib/global/js/hooks/useCreateComponentFocus.js

Carbon for IBM Products

/**
 * Copyright IBM Corp. 2020, 2025
 *
 * 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';

var React = require('react');
var wait = require('../utils/wait.js');

// Focus the first focusable element and call the onMount prop for the current step if one is provided
const useCreateComponentFocus = _ref => {
  let {
    previousState,
    currentStep,
    blockClass,
    onMount,
    firstFocusElement
  } = _ref;
  React.useEffect(() => {
    if (typeof onMount === 'function') {
      onMount();
    }
  }, [onMount]);
  React.useEffect(() => {
    // because of how handleStackChange.claimFocus in TearsheetShell works a timeout is required to focus on specific elements
    const awaitFocus = async elm => {
      await wait.default(10);
      elm.focus();
    };
    if (previousState?.currentStep !== currentStep && currentStep > 0) {
      if (firstFocusElement) {
        const elm = document.querySelector(firstFocusElement);
        if (elm) {
          awaitFocus(elm);
        }
      }
    }
  }, [currentStep, previousState, blockClass, onMount, firstFocusElement]);
};

exports.useCreateComponentFocus = useCreateComponentFocus;