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

Carbon react components for the MSKCC DSM

/**
 * MSKCC 2021, 2024
 */

'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');

// This file was heavily inspired by Reach UI and their work on their auto-id
const getId = setupGetInstanceId["default"]();
const useIsomorphicLayoutEffect = environment.canUseDOM ? React.useLayoutEffect : React.useEffect;
let serverHandoffCompleted = false;

/**
 * Generate a unique ID with an optional prefix prepended to it
 * @param {string} [prefix]
 * @returns {string}
 */
function useId() {
  let prefix = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'id';
  const _prefix = useIdPrefix.useIdPrefix();
  const [id, setId] = React.useState(() => {
    if (serverHandoffCompleted) {
      return `${_prefix ? `${_prefix}-` : ``}${prefix}-${getId()}`;
    }
    return null;
  });
  useIsomorphicLayoutEffect(() => {
    if (id === null) {
      setId(`${_prefix ? `${_prefix}-` : ``}${prefix}-${getId()}`);
    }
  }, [getId]);
  React.useEffect(() => {
    if (serverHandoffCompleted === false) {
      serverHandoffCompleted = true;
    }
  }, []);
  if (React.useId) {
    const id = nativeReactUseId(_prefix, prefix);
    return id;
  }
  return id;
}
function nativeReactUseId(_prefix, prefix) {
  const getId = React.useId();
  const id = `${_prefix ? `${_prefix}-` : ``}${prefix}-${getId}`;
  return id;
}

/**
 * Generate a unique id if a given `id` is not provided
 * @param {string|number|undefined} id
 * @returns {string}
 */
function useFallbackId(id) {
  const fallback = useId();
  return id ?? fallback;
}

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