How to use the @rmwc/base.randomId function in @rmwc/base

label?: React.ReactNode;
  /** By default, all props except className and style spread to the input. These are additional props for the root of the checkbox. */
  rootProps?: React.HTMLProps;
  /** A reference to the native input. */
  inputRef?:
    | React.MutableRefObject
    | ((ref: HTMLInputElement | null) => void);
}

export class ToggleableFoundationComponent<
  Foundation extends any,
  P extends ToggleableFoundationProps,
  S extends any = {}
> extends FoundationComponent {
  // @ts-ignore
  generatedId = randomId(this.constructor.displayName);

  /** @internal */
  get hasLabel() {
    return this.props.label || this.props.children;
  }
  /** @internal */
  get id() {
    return this.props.id || this.generatedId;
  }
  /** @internal */
  get toggleRootProps() {
    const { className, style, disabled, rootProps = {} } = this.props;

    if (this.hasLabel) {
      // @ts-ignore
      return this.root.props({ disabled });

classNames: ['mdc-text-field__input']
});

const TextFieldTextarea = componentFactory({
  displayName: 'TextFieldTextarea',
  tag: 'textarea',
  classNames: ['mdc-text-field__input']
});

/** A TextField component for accepting text input from a user. */
export class TextField extends FoundationComponent<
  MDCTextFieldFoundation,
  TextFieldProps & DeprecatedTextfieldProps
> {
  static displayName = 'TextField';
  generatedId = randomId('textfield');
  private root = this.createElement('root');
  private input = this.createElement(
    'input'
  );
  private label = this.createElement('label');
  private lineRipple = this.createElement('lineRipple');
  characterCounter?: null | TextFieldCharacterCount = null;
  leadingIcon: null | TextFieldIcon = null;
  trailingIcon: null | TextFieldIcon = null;
  outline: null | any;
  valueNeedsUpdate = false;

  constructor(props: any) {
    super(props);

    this.handleOnChange = this.handleOnChange.bind(this);

/** A Tab icon. This is an instance of the Icon component. */
const TabIcon = componentFactory({
  displayName: 'TabIcon',
  tag: Icon,
  classNames: ['mdc-tab__icon']
});

/** A Tab component */
export const Tab = withTabBarContext()(
  class extends FoundationComponent<
    MDCTabFoundation,
    TabProps & { contextApi?: TabBarContextT }
  > {
    static displayName = 'TabFoundation';

    _id = randomId('tab');
    private root = this.createElement('root');
    tabIndicator: TabIndicator | null = null;
    content: HTMLDivElement | null = null;

    constructor(props: TabProps & { contextApi?: TabBarContextT }) {
      super(props);
      this.props.contextApi && this.props.contextApi.registerTab(this);
      this.handleClick = this.handleClick.bind(this);
    }

    componentWillUnmount() {
      this.props.contextApi && this.props.contextApi.unregisterTab(this);
    }

    get id() {
      return this.props.id

componentDidMount() {
    super.componentDidMount();

    this.id =
      this.root.ref && this.root.ref.id
        ? this.root.ref.id
        : this._reactInternalFiber.key || randomId('chip');
  }

interface SelectState {
  selectedIndex: number;
  selectedTextContent: string;
  menuOpen: boolean;
}

export class SelectBase extends FoundationComponent<
  MDCSelectFoundation,
  SelectProps & DeprecatedSelectProps,
  SelectState
> {
  private root = this.createElement('root');
  private lineRipple = this.createElement('lineRipple');
  private outline = this.createElement('outline');
  private label = this.createElement('label');
  id: string = this.props.id || randomId('select');
  nativeControl: HTMLSelectElement | null = null;
  selectedText: HTMLElement | null = null;
  menuElement: HTMLElement | null = null;
  menu: Menu | null = null;
  hiddenInput_: HTMLInputElement | null = null;
  leadingIcon_: SelectIcon | null = null;
  trailingIcon_: HTMLElement | null = null;

  state = {
    selectedIndex: this.props.placeholder !== undefined ? 0 : -1,
    menuOpen: false,
    selectedTextContent: ''
  };

  constructor(props: SelectProps) {
    super(props);

return new Promise((resolve, reject) => {
    const d = factory({ id: randomId(), ...dialog, resolve, reject });
    queue.push(d);
  });
};