@carbon/react/lib/internal/useId.js

React components for the Carbon Design System

/**
 * 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 });

var React = require('react');
var setupGetInstanceId = require('../tools/setupGetInstanceId.js');
var environment = require('./environment.js');
var useIdPrefix = require('./useIdPrefix.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var React__default = /*#__PURE__*/_interopDefaultLegacy(React);

// This file was heavily inspired by:

// This tricks bundlers so they can't statically analyze this and produce
// compilation warnings/errors.
// https://github.com/webpack/webpack/issues/14814
// https://github.com/mui/material-ui/issues/41190
const _React = {
  ...React__default["default"]
};
const instanceId = setupGetInstanceId.setupGetInstanceId();
const useIsomorphicLayoutEffect = environment.canUseDOM ? React.useLayoutEffect : React.useEffect;
let serverHandoffCompleted = false;
const defaultId = 'id';

/**
 * Generate a unique ID for React <=17 with an optional prefix prepended to it.
 * This is an internal utility, not intended for public usage.
 * @param {string} [prefix]
 * @returns {string}
 */
function useCompatibleId(prefix = defaultId) {
  const contextPrefix = useIdPrefix.useIdPrefix();
  const [id, setId] = React.useState(() => {
    if (serverHandoffCompleted) {
      return `${contextPrefix ? `${contextPrefix}-` : ``}${prefix}-${instanceId()}`;
    }
    return null;
  });
  useIsomorphicLayoutEffect(() => {
    if (id === null) {
      setId(`${contextPrefix ? `${contextPrefix}-` : ``}${prefix}-${instanceId()}`);
    }
  }, [instanceId]);
  React.useEffect(() => {
    if (serverHandoffCompleted === false) {
      serverHandoffCompleted = true;
    }
  }, []);
  return id;
}

/**
 * Generate a unique ID for React >=18 with an optional prefix prepended to it.
 * This is an internal utility, not intended for public usage.
 * @param {string} [prefix]
 * @returns {string}
 */
function useReactId(prefix = defaultId) {
  const contextPrefix = useIdPrefix.useIdPrefix();
  return `${contextPrefix ? `${contextPrefix}-` : ``}${prefix}-${_React.useId()}`;
}

/**
 * Uses React 18's built-in `useId()` when available, or falls back to a
 * slightly less performant (requiring a double render) implementation for
 * earlier React versions.
 */
const useId = _React.useId ? useReactId : useCompatibleId;

/**
 * Generate a unique id if a given `id` is not provided
 * This is an internal utility, not intended for public usage.
 * @param {string|undefined} id
 * @returns {string}
 */
function useFallbackId(id) {
  const fallback = useId();
  return id ?? fallback;
}

exports.useCompatibleId = useCompatibleId;
exports.useFallbackId = useFallbackId;
exports.useId = useId;