[Emotion] Convert EuiTextArea, EuiSelect, and EuiSuperSelect

packages/eui/src/components/form/super_select/__snapshots__/super_select.test.tsx.snap

@@ -204,7 +204,7 @@ exports[`EuiSuperSelect renders 1`] = `
             >
               <button
                 aria-selected="false"
-                class="euiContextMenuItem euiSuperSelect__item emotion-euiContextMenuItem-m-center"
+                class="euiContextMenuItem euiSuperSelect__item emotion-euiContextMenuItem-m-center-euiSuperSelect__item"
                 id="1"
                 role="option"
                 type="button"
@@ -222,7 +222,7 @@ exports[`EuiSuperSelect renders 1`] = `
               </button>
               <button
                 aria-selected="false"
-                class="euiContextMenuItem euiSuperSelect__item emotion-euiContextMenuItem-m-center"
+                class="euiContextMenuItem euiSuperSelect__item emotion-euiContextMenuItem-m-center-euiSuperSelect__item"
                 id="2"
                 role="option"
                 type="button"

packages/eui/src/components/form/super_select/_super_select.scss

@@ -1,9 +0,0 @@
-.euiSuperSelect__item {
-  @include euiFontSizeS;
-  @include euiInteractiveStates;
-  padding: $euiSizeS;
-}
-
-.euiSuperSelect__item--hasDividers:not(:last-of-type) {
-  border-bottom: $euiBorderThin;
-}

packages/eui/src/components/form/super_select/index.ts

@@ -8,8 +8,7 @@
 
 export type { EuiSuperSelectProps } from './super_select';
 export { EuiSuperSelect } from './super_select';
-export type {
-  EuiSuperSelectControlProps,
-  EuiSuperSelectOption,
-} from './super_select_control';
+export type { EuiSuperSelectOption } from './super_select_item';
+
+export type { EuiSuperSelectControlProps } from './super_select_control';
 export { EuiSuperSelectControl } from './super_select_control';

packages/eui/src/components/form/super_select/super_select.styles.ts

@@ -8,6 +8,7 @@
 
 import { css } from '@emotion/react';
 
+import { UseEuiTheme } from '../../../services';
 import { logicalCSS, logicalCSSWithFallback } from '../../../global_styling';
 
 export const euiSuperSelectStyles = {
@@ -17,3 +18,14 @@ export const euiSuperSelectStyles = {
     ${logicalCSSWithFallback('overflow-x', 'hidden')}
   `,
 };
+
+export const euiSuperSelectItemStyles = ({ euiTheme }: UseEuiTheme) => ({
+  euiSuperSelect__item: css`
+    padding: ${euiTheme.size.s};
+  `,
+  hasDividers: css`
+    &:not(:last-of-type) {
+      ${logicalCSS('border-bottom', euiTheme.border.thin)}
+    }
+  `,
+});

packages/eui/src/components/form/super_select/super_select.tsx

@@ -14,13 +14,16 @@ import { CommonProps } from '../../common';
 import { EuiI18n } from '../../i18n';
 import { EuiScreenReaderOnly } from '../../accessibility';
 import { EuiInputPopover, type EuiInputPopoverProps } from '../../popover';
-import { EuiContextMenuItem, type EuiContextMenuItemLayoutAlignment } from '../../context_menu';
+import { type EuiContextMenuItemLayoutAlignment } from '../../context_menu';
 
 import {
   EuiSuperSelectControl,
   type EuiSuperSelectControlProps,
-  type EuiSuperSelectOption,
 } from './super_select_control';
+import {
+  EuiSuperSelectItem,
+  type EuiSuperSelectOption,
+} from './super_select_item';
 import { euiSuperSelectStyles as styles } from './super_select.styles';
 
 enum ShiftDirection {
@@ -287,14 +290,6 @@ export class EuiSuperSelect<T = string> extends Component<
       className
     );
 
-    const itemClasses = classNames(
-      'euiSuperSelect__item',
-      {
-        'euiSuperSelect__item--hasDividers': hasDividers,
-      },
-      itemClassName
-    );
-
     const button = (
       <EuiSuperSelectControl
         options={options}
@@ -318,21 +313,21 @@ export class EuiSuperSelect<T = string> extends Component<
       if (value == null) return;
 
       return (
-        <EuiContextMenuItem
+        <EuiSuperSelectItem
           key={index}
-          className={itemClasses}
+          id={String(value)}
+          className={itemClassName}
+          hasDividers={hasDividers}
+          layoutAlign={itemLayoutAlign}
           icon={valueOfSelected === value ? 'check' : 'empty'}
           onClick={() => this.itemClicked(value)}
           onKeyDown={this.onItemKeyDown}
-          layoutAlign={itemLayoutAlign}
           buttonRef={(node) => this.setItemNode(node, index)}
-          role="option"
-          id={String(value)}
           aria-selected={valueOfSelected === value}
           {...optionRest}
         >
           {dropdownDisplay || inputDisplay}
-        </EuiContextMenuItem>
+        </EuiSuperSelectItem>
       );
     });
 

packages/eui/src/components/form/super_select/super_select_control.tsx

@@ -27,13 +27,7 @@ import {
 import { getFormControlClassNameForIconCount } from '../form_control_layout/_num_icons';
 import { useFormContext } from '../eui_form_context';
 
-export interface EuiSuperSelectOption<T> {
-  value: NonNullable<T>;
-  inputDisplay?: ReactNode;
-  dropdownDisplay?: ReactNode;
-  disabled?: boolean;
-  'data-test-subj'?: string;
-}
+import { EuiSuperSelectOption } from './super_select_item';
 
 export interface EuiSuperSelectControlProps<T>
   extends CommonProps,

packages/eui/src/components/form/super_select/super_select_item.tsx

@@ -0,0 +1,55 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React, { FunctionComponent, ComponentProps, ReactNode } from 'react';
+import classNames from 'classnames';
+
+import { useEuiMemoizedStyles } from '../../../services';
+import { EuiContextMenuItem } from '../../context_menu';
+import { euiSuperSelectItemStyles } from './super_select.styles';
+
+// Type exposed to consumers via API
+export interface EuiSuperSelectOption<T> {
+  value: NonNullable<T>;
+  inputDisplay?: ReactNode;
+  dropdownDisplay?: ReactNode;
+  disabled?: boolean;
+  'data-test-subj'?: string;
+}
+
+// Actual props used by below component, transmogged by parent EuiSuperSelect
+// from consumer props to internal EUI props
+type EuiSuperSelectItemProps = ComponentProps<typeof EuiContextMenuItem> & {
+  hasDividers?: boolean;
+};
+
+// Internal subcomponent util, primarily for easier usage of hooks
+export const EuiSuperSelectItem: FunctionComponent<EuiSuperSelectItemProps> = ({
+  children,
+  className,
+  hasDividers,
+  ...rest
+}) => {
+  const classes = classNames('euiSuperSelect__item', className);
+  const styles = useEuiMemoizedStyles(euiSuperSelectItemStyles);
+  const cssStyles = [
+    styles.euiSuperSelect__item,
+    hasDividers && styles.hasDividers,
+  ];
+
+  return (
+    <EuiContextMenuItem
+      css={cssStyles}
+      className={classes}
+      role="option"
+      {...rest}
+    >
+      {children}
+    </EuiContextMenuItem>
+  );
+};