MLAttributes<HTMLElement>;
    const extendedChildren = () =>
      variant === SelectVariant.checkbox
        ? this.extendCheckboxChildren(children as React.ReactElement[])
        : this.extendChildren(inputIdPrefix);

    if (isCustomContent) {
      variantProps.children = children;
    } else if (hasInlineFilter) {
      if (React.Children.count(children) === 0) {
        variantProps.children = <fieldset className={css(styles.selectMenuFieldset)} />;
      } else {
        variantProps.children = (
          <fieldset
            aria-label={ariaLabel}
            aria-labelledby={(!ariaLabel && ariaLabelledBy) || null}
            className={css(formStyles.formFieldset)}
          >
            {(children as React.ReactElement[]).shift()}
            {extendedChildren()}
          </fieldset>
        );
      }
    } else {
      variantProps.children = extendedChildren();
      if (!isGrouped) {
        Component = 'ul';
        variantProps.role = 'listbox';
        variantProps['aria-label'] = ariaLabel;
        variantProps['aria-labelledby'] = (!ariaLabel && ariaLabelledBy) || null;
      }
    }

    return (
      <React.Fragment>
        <Component {...variantProps} {...props} />
        {footer && (
          <div className={css(styles.selectMenuFooter)} ref={footerRef}>
            {footer}
          </div>
        )}
      </React.Fragment>
    );
  }

  render() {
    return <SelectConsumer>{(context) => this.renderSelectMenu(context)}</SelectConsumer>;
  }
}

export const SelectMenu = React.forwardRef<unknown, React.PropsWithChildren<unknown>>((props, ref) => (
  <SelectMenuWithRef innerRef={ref} {...props}>
    {props.children}
  </SelectMenuWithRef>
));