[DO NOT MERGE][EUI] Selection and navigation list component updates

package.json

@@ -141,7 +141,7 @@
     "@elastic/elasticsearch": "9.3.4",
     "@elastic/ems-client": "8.6.3",
     "@elastic/esql": "1.7.0",
-    "@elastic/eui": "114.0.0",
+    "@elastic/eui": "file:./eui_114.0.0_selectable_ui_updates_05.tgz",
     "@elastic/eui-theme-borealis": "7.0.0",
     "@elastic/filesaver": "1.1.2",
     "@elastic/kibana-d3-color": "npm:@elastic/kibana-d3-color@2.0.1",

src/platform/packages/shared/content-management/table_list_view_table/src/components/tag_filter_panel.tsx

@@ -181,6 +181,7 @@ export const TagFilterPanel: FC<{}> = ({}) => {
           onChange={onSelectChange}
           data-test-subj="tagSelectableList"
           aria-label={tagsLabel}
+          listProps={{ paddingSize: 's' }}
           {...searchProps}
         >
           {(list, search) => {

src/platform/packages/shared/kbn-alerts-ui-shared/src/add_message_variables/index.tsx

@@ -189,7 +189,6 @@ export const AddMessageVariables: React.FunctionComponent<Props> = ({
         listProps={{
           rowHeight: 70,
           showIcons: false,
-          paddingSize: 'none',
           textWrap: 'wrap',
         }}
         loadingMessage={i18n.LOADING_VARIABLES}

src/platform/plugins/shared/controls/public/controls/data_controls/options_list_control/components/options_list_popover_suggestions.tsx

@@ -210,7 +210,7 @@ export const OptionsListPopoverSuggestions = ({
         <EuiSelectable
           options={selectableOptions}
           renderOption={(option) => renderOption(option, searchString)}
-          listProps={{ onFocusBadge: false }}
+          listProps={{ onFocusBadge: false, paddingSize: 's' }}
           aria-label={OptionsListStrings.popover.getSuggestionsAriaLabel(
             label,
             selectableOptions.length

src/platform/plugins/shared/unified_search/public/dataview_picker/dataview_list.tsx

@@ -131,6 +131,7 @@ export function DataViewsList({
       {...selectableProps}
       listProps={{
         truncationProps: MIDDLE_TRUNCATION_PROPS,
+        paddingSize: 's',
         ...(selectableProps?.listProps ? selectableProps.listProps : undefined),
       }}
       data-test-subj="indexPattern-switcher"

src/platform/plugins/shared/unified_search/public/saved_query_management/saved_query_management_list.test.tsx

@@ -379,9 +379,9 @@ describe('Saved query management list component', () => {
     await waitFor(() => {
       expect(findSavedQueriesSpy).toHaveBeenLastCalledWith(undefined, 5, 1);
     });
-    expect(screen.getByRole('option', { name: 'Test 0', checked: false })).toBeInTheDocument();
+    expect(screen.getByRole('option', { name: 'Test 0', selected: false })).toBeInTheDocument();
     await userEvent.click(screen.getByRole('option', { name: 'Test 0' }));
-    expect(screen.getByRole('option', { name: 'Test 0', checked: true })).toBeInTheDocument();
+    expect(screen.getByRole('option', { name: 'Test 0', selected: true })).toBeInTheDocument();
     findSavedQueriesSpy.mockResolvedValue({
       total: 6,
       queries: generateSavedQueries(1),
@@ -398,7 +398,7 @@ describe('Saved query management list component', () => {
     await waitFor(() => {
       expect(findSavedQueriesSpy).toHaveBeenLastCalledWith(undefined, 5, 1);
     });
-    expect(screen.getByRole('option', { name: 'Test 0', checked: true })).toBeInTheDocument();
+    expect(screen.getByRole('option', { name: 'Test 0', selected: true })).toBeInTheDocument();
   });
 
   it('should allow providing a search term', async () => {

src/platform/plugins/shared/unified_search/public/saved_query_management/saved_query_management_list.tsx

@@ -430,7 +430,7 @@ export const SavedQueryManagementList = ({
             isLoading={isInitializing}
             singleSelection="always"
             options={savedQueriesOptions}
-            listProps={{ onFocusBadge: false }}
+            listProps={{ onFocusBadge: false, paddingSize: 's' }}
             isPreFiltered
             searchable
             searchProps={{

x-pack/platform/packages/private/ml/field_stats_flyout/moon.yml

@@ -29,6 +29,7 @@ dependsOn:
   - '@kbn/ml-query-utils'
   - '@kbn/ml-is-defined'
   - '@kbn/field-types'
+  - '@kbn/css-utils'
 tags:
   - shared-browser
   - package

x-pack/platform/packages/private/ml/field_stats_flyout/options_list_with_stats/option_list_popover.tsx

@@ -11,9 +11,11 @@ import type {
   EuiComboBoxOptionOption,
   EuiComboBoxSingleSelectionShape,
   EuiSelectableOption,
+  UseEuiTheme,
 } from '@elastic/eui';
 import { EuiFlexItem, EuiSelectable, htmlIdGenerator } from '@elastic/eui';
 import { css } from '@emotion/react';
+import { useMemoCss } from '@kbn/css-utils/public/use_memo_css';
 import { type DropDownLabel } from './types';
 import { useFieldStatsFlyoutContext } from '../use_field_stats_flyout_context';
 import { OptionsListPopoverFooter } from './option_list_popover_footer';
@@ -112,6 +114,11 @@ export const OptionsListPopover = ({
   );
   const id = useMemo(() => htmlIdGenerator()(), []);
 
+  const styles = useMemoCss({
+    optionsListAvailableOptions: ({ euiTheme }: UseEuiTheme) =>
+      css({ width: '100%', height: '100%', padding: euiTheme.size.s }),
+  });
+
   const filteredOptions = useMemo(() => {
     return showEmptyFields
       ? options
@@ -140,7 +147,7 @@ export const OptionsListPopover = ({
     >
       <EuiFlexItem
         data-test-subj={`optionsListControlAvailableOptions`}
-        css={css({ width: '100%', height: '100%' })}
+        css={styles.optionsListAvailableOptions}
       >
         <OptionsListPopoverSuggestions
           renderOption={renderOption}

x-pack/platform/packages/private/ml/field_stats_flyout/tsconfig.json

@@ -28,5 +28,6 @@
     "@kbn/ml-query-utils",
     "@kbn/ml-is-defined",
     "@kbn/field-types",
+    "@kbn/css-utils",
   ]
 }

x-pack/platform/packages/shared/kbn-classic-stream-flyout/src/components/create_classic_stream_flyout/steps/select_template/select_template_step.tsx

@@ -137,7 +137,7 @@ export const SelectTemplateStep = ({
       >
         {(list, search) => (
           <>
-            <div style={{ paddingLeft: euiTheme.size.l, paddingRight: euiTheme.size.l }}>
+            <div style={{ paddingLeft: euiTheme.size.s, paddingRight: euiTheme.size.s }}>
               {search}
               <EuiSpacer size="s" />
             </div>

x-pack/platform/plugins/private/drilldowns/url_drilldown/public/lib/components/variable_popover/index.tsx

@@ -69,6 +69,7 @@ export const VariablePopover: React.FC<Props> = ({ variables, onSelect, variable
         }}
         listProps={{
           showIcons: false,
+          paddingSize: 's',
         }}
       >
         {(list, search) => (

x-pack/platform/plugins/shared/agent_builder/public/application/components/common/agent_selector/agent_selector_dropdown.tsx

@@ -221,6 +221,7 @@ export const AgentSelectorDropdown: React.FC<AgentSelectorDropdownProps> = ({
               rowHeight: AGENT_OPTION_ROW_HEIGHT,
               onFocusBadge: false,
               css: selectorListStyles,
+              paddingSize: 's',
             }}
           >
             {(list) => (

x-pack/platform/plugins/shared/agent_builder/public/application/components/conversations/conversation_input/input_actions/connector_selector/connector_selector.tsx

@@ -300,6 +300,7 @@ export const ConnectorSelector: React.FC<{}> = () => {
           css: selectorListStyles,
           rowHeight: CONNECTOR_OPTION_ROW_HEIGHT,
           onFocusBadge: false,
+          paddingSize: 's',
         }}
       >
         {(list) => (

x-pack/platform/plugins/shared/cases/public/components/all_cases/assignees_filter.test.tsx

@@ -275,7 +275,7 @@ describe('AssigneesFilterPopover', () => {
         `You've selected the maximum number of ${MAX_ASSIGNEES_FILTER_LENGTH} assignees`
       )
     ).toBeInTheDocument();
-    expect(await screen.findByTitle('No assignees')).toHaveAttribute('aria-selected', 'false');
+    expect(await screen.findByTitle('No assignees')).toHaveAttribute('aria-checked', 'false');
     expect(await screen.findByTitle('No assignees')).toHaveAttribute('aria-disabled', 'true');
   });
 });

x-pack/platform/plugins/shared/dataset_quality/public/components/dataset_quality/filters/integrations_selector.tsx

@@ -116,6 +116,7 @@ export function IntegrationsSelector({
           placeholder: integrationsSelectorSearchPlaceholder,
           compressed: true,
         }}
+        listProps={{ paddingSize: 's' }}
         aria-label={integrationsSelectorLabel}
         options={integrations}
         onChange={onIntegrationsChange}

x-pack/platform/plugins/shared/dataset_quality/public/components/dataset_quality/filters/namespaces_selector.tsx

@@ -96,6 +96,7 @@ export function NamespacesSelector({
           placeholder: namespacesSelectorSearchPlaceholder,
           compressed: true,
         }}
+        listProps={{ paddingSize: 's' }}
         aria-label={namespacesSelectorLabel}
         options={namespaces}
         onChange={onNamespacesChange}

x-pack/platform/plugins/shared/dataset_quality/public/components/dataset_quality/filters/selector.tsx

@@ -87,6 +87,7 @@ export function Selector({
           placeholder: searchPlaceholder,
           compressed: true,
         }}
+        listProps={{ paddingSize: 's' }}
         aria-label={label}
         options={options}
         onChange={onOptionsChange}

x-pack/platform/plugins/shared/fleet/public/applications/fleet/sections/agents/agent_details_page/components/agent_logs/filter_dataset.tsx

@@ -95,7 +95,7 @@ export const DatasetFilter: React.FunctionComponent<{
       }
       isOpen={isOpen}
       closePopover={closePopover}
-      panelPaddingSize="none"
+      panelPaddingSize="s"
     >
       <EuiSelectable
         options={options}
@@ -111,7 +111,6 @@ export const DatasetFilter: React.FunctionComponent<{
         data-test-subj="agentList.datasetFilterOptions"
         isLoading={isLoading}
         listProps={{
-          paddingSize: 's',
           style: {
             minWidth: 220,
           },

x-pack/platform/plugins/shared/fleet/public/applications/fleet/sections/agents/agent_details_page/components/agent_logs/filter_log_level.tsx

@@ -48,7 +48,7 @@ export const LogLevelFilter: React.FunctionComponent<{
       }
       isOpen={isOpen}
       closePopover={closePopover}
-      panelPaddingSize="none"
+      panelPaddingSize="s"
     >
       <EuiSelectable
         options={options}
@@ -62,9 +62,6 @@ export const LogLevelFilter: React.FunctionComponent<{
           });
         }}
         data-test-subj="agentList.logLevelFilterOptions"
-        listProps={{
-          paddingSize: 's',
-        }}
       >
         {(list) => list}
       </EuiSelectable>

x-pack/platform/plugins/shared/fleet/public/applications/fleet/sections/agents/agent_list_page/components/agent_status_filter.tsx

@@ -245,14 +245,13 @@ export const AgentStatusFilter: React.FC<{
         }
         isOpen={isStatusFilterOpen}
         closePopover={() => updateIsStatusFilterOpen(false)}
-        panelPaddingSize="none"
+        panelPaddingSize="s"
       >
         <EuiSelectable
           options={options}
           onChange={onOptionsChange}
           data-test-subj="agentList.agentStatusFilterOptions"
           listProps={{
-            paddingSize: 's',
             style: {
               minWidth: 140,
             },

x-pack/platform/plugins/shared/fleet/public/applications/fleet/sections/agents/agent_list_page/components/filter_bar/agent_policy_filter.tsx

@@ -78,7 +78,7 @@ export const AgentPolicyFilter: React.FunctionComponent<Props> = ({
       }
       isOpen={isAgentPoliciesFilterOpen}
       closePopover={() => setIsAgentPoliciesFilterOpen(false)}
-      panelPaddingSize="none"
+      panelPaddingSize="s"
     >
       <EuiSelectable
         options={options}
@@ -98,7 +98,6 @@ export const AgentPolicyFilter: React.FunctionComponent<Props> = ({
         }}
         data-test-subj="agentList.agentPolicyFilterOptions"
         listProps={{
-          paddingSize: 's',
           style: {
             minWidth: 200,
           },

x-pack/platform/plugins/shared/fleet/public/applications/fleet/sections/agents/agent_list_page/components/filter_bar/tags_filter.tsx

@@ -68,7 +68,7 @@ export const TagsFilter: React.FunctionComponent<Props> = ({
       }
       isOpen={isTagsFilterOpen}
       closePopover={() => setIsTagsFilterOpen(false)}
-      panelPaddingSize="none"
+      panelPaddingSize="s"
     >
       <EuiSelectable
         options={options}
@@ -90,7 +90,6 @@ export const TagsFilter: React.FunctionComponent<Props> = ({
         }}
         data-test-subj="agentList.agentPolicyFilterOptions"
         listProps={{
-          paddingSize: 's',
           style: {
             minWidth: 140,
           },

x-pack/platform/plugins/shared/fleet/public/applications/integrations/sections/epm/components/status_filter.tsx

@@ -70,7 +70,7 @@ export const StatusFilter: React.FC<StatusFilterProps> = ({
       id={popoverId}
       isOpen={isOpen}
       closePopover={closePopover}
-      panelPaddingSize="none"
+      panelPaddingSize="s"
       button={
         <EuiFilterButton
           data-test-subj={`${testSubjPrefix}.statusBtn`}
@@ -91,7 +91,6 @@ export const StatusFilter: React.FC<StatusFilterProps> = ({
         options={options}
         onChange={onSelectionChange}
         listProps={{
-          paddingSize: 's',
           showIcons: true,
           style: {
             minWidth: 250,

x-pack/platform/plugins/shared/fleet/public/applications/integrations/sections/epm/screens/browse_integrations/components/search_and_filters_bar.tsx

@@ -124,7 +124,7 @@ const SortFilter: React.FC = () => {
         id="browseIntegrationsSortPopover"
         isOpen={isOpen}
         closePopover={closePopover}
-        panelPaddingSize="none"
+        panelPaddingSize="s"
         button={
           <EuiFilterButton
             data-test-subj="browseIntegrations.searchBar.sortBtn"
@@ -148,7 +148,6 @@ const SortFilter: React.FC = () => {
             }
           }}
           listProps={{
-            paddingSize: 's',
             showIcons: false,
           }}
         >
@@ -211,7 +210,7 @@ const SetupMethodFilter: React.FC<{
       id="browseIntegrationsSetupMethodPopover"
       isOpen={isOpen}
       closePopover={closePopover}
-      panelPaddingSize="none"
+      panelPaddingSize="s"
       button={
         <EuiFilterButton
           data-test-subj="browseIntegrations.searchBar.setupMethodBtn"
@@ -235,7 +234,6 @@ const SetupMethodFilter: React.FC<{
         options={options}
         onChange={onSelectionChange}
         listProps={{
-          paddingSize: 's',
           showIcons: true,
           style: { minWidth: 250 },
         }}
@@ -307,7 +305,7 @@ const SignalFilter: React.FC<{
       id="browseIntegrationsSignalPopover"
       isOpen={isOpen}
       closePopover={closePopover}
-      panelPaddingSize="none"
+      panelPaddingSize="s"
       button={
         <EuiFilterButton
           data-test-subj="browseIntegrations.searchBar.signalBtn"
@@ -331,7 +329,6 @@ const SignalFilter: React.FC<{
         options={options}
         onChange={onSelectionChange}
         listProps={{
-          paddingSize: 's',
           showIcons: true,
           style: { minWidth: 250 },
         }}

x-pack/platform/plugins/shared/fleet/public/components/platform_selector.tsx

@@ -181,7 +181,7 @@ export const PlatformSelector: React.FunctionComponent<Props> = ({
               }
               isOpen={showExtendedPlatforms}
               closePopover={() => setShowExtendedPlatforms(false)}
-              panelPaddingSize="none"
+              panelPaddingSize="s"
               repositionOnScroll={true}
             >
               <EuiSelectable
@@ -203,7 +203,7 @@ export const PlatformSelector: React.FunctionComponent<Props> = ({
                   setShowExtendedPlatforms(false);
                 }}
                 css={{ width: 150 }}
-                listProps={{ paddingSize: 'none', onFocusBadge: false }}
+                listProps={{ onFocusBadge: false }}
               >
                 {(list) => list}
               </EuiSelectable>

x-pack/platform/plugins/shared/index_management/public/application/components/component_templates/component_template_list/table.tsx

@@ -221,7 +221,7 @@ export const ComponentTable: FunctionComponent<Props> = ({
                   button={button}
                   isOpen={isPopoverOpen}
                   closePopover={closePopover}
-                  panelPaddingSize="none"
+                  panelPaddingSize="s"
                 >
                   <EuiSelectable
                     allowExclusions

x-pack/platform/plugins/shared/index_management/public/application/components/component_templates/component_template_selector/components/filter_list_button.tsx

@@ -112,7 +112,7 @@ export function FilterListButton({ onChange, filters }: Props) {
         button={button}
         isOpen={isPopoverOpen}
         closePopover={closePopover}
-        panelPaddingSize="none"
+        panelPaddingSize="s"
         data-test-subj="filterList"
         aria-label="Filter component templates"
       >

x-pack/platform/plugins/shared/index_management/public/application/sections/home/components/filter_list_button.tsx

@@ -80,7 +80,7 @@ export function FilterListButton<T extends string>({ onChange, filters }: Props<
         button={button}
         isOpen={isPopoverOpen}
         closePopover={closePopover}
-        panelPaddingSize="none"
+        panelPaddingSize="s"
         data-test-subj="filterList"
       >
         <EuiSelectable

x-pack/platform/plugins/shared/index_management/public/application/sections/home/index_list/details_page/details_page_filter_fields.tsx

@@ -157,6 +157,7 @@ export const MappingsFilter: React.FC<Props> = ({
           options={
             !isAddingFields ? state.filter.selectedOptions : previousState.filter.selectedOptions
           }
+          listProps={{ paddingSize: 's' }}
           onChange={(options) => {
             if (!isAddingFields) {
               setSelectedOptions(options);