Merge branch 'refractor-esql-grammar' of https://github.com/vadimkiba…

…na/eui into refractor-esql-grammar

packages/eui/changelogs/CHANGELOG_2025.md

@@ -1,3 +1,14 @@
+## [`v99.2.0`](https://github.com/elastic/eui/releases/v99.2.0)
+
+- Changed `EuiFieldText` styles to prioritize `disabled` styling over `readonly`. ([#8271](https://github.com/elastic/eui/pull/8271))
+- Added `plugs` and `web` glyphs to `EuiIcon` ([#8285](https://github.com/elastic/eui/pull/8285))
+- Update `title` on `EuiColorPalettePickerPaletteProps` to be optional ([#8289](https://github.com/elastic/eui/pull/8289))
+
+**Bug fixes**
+
+- Fixed an issue with EuiDataGrid with auto row height resulting in a table of 0 height ([#8251](https://github.com/elastic/eui/pull/8251))
+- Fixed `disabled` behavior of `EuiFieldText` to  prevent input changes. ([#8271](https://github.com/elastic/eui/pull/8271))
+
 ## [`v99.1.0`](https://github.com/elastic/eui/releases/v99.1.0)
 
 - Updated `EuiColorPalettePicker` - adds `append` to `EuiColorPalettePickerPaletteProps` to support appending custom content to the title ([#8208](https://github.com/elastic/eui/pull/8208))

packages/eui/changelogs/upcoming/8273.md

@@ -0,0 +1,3 @@
+- Updated table components to support adding tooltips to header cells
+  - Added `columns.nameTooltip` on `EuiBasicTable`
+  - Added `tooltipProps` prop on `EuiTableHeaderCell`

packages/eui/changelogs/upcoming/8303.md

@@ -0,0 +1 @@
+- Added `accent` color option to `EuiCallOut`

packages/eui/changelogs/upcoming/8307.md

@@ -0,0 +1,2 @@
+- Updated `EuiInlineEditForm`'s `onCancel` prop type to allow uncontrolled mode usage
+

packages/eui/changelogs/upcoming/8311.md

@@ -0,0 +1,4 @@
+**Bug fixes**
+
+- Fixed a bug on `EuiSuperDatePicker` where pasting an absolute date would append the date instead of replace it
+

packages/eui/i18ntokens.json

@@ -7181,4 +7181,4 @@
     },
     "filepath": "src/components/tree_view/tree_view.tsx"
   }
-]
+]

packages/eui/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elastic/eui",
   "description": "Elastic UI Component Library",
-  "version": "99.1.0",
+  "version": "99.2.0",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "lib",
   "module": "es",

packages/eui/src-docs/src/components/guide_page/versions.json

@@ -1,5 +1,6 @@
 {
   "euiVersions": [
+    "99.2.0",
     "99.1.0",
     "99.0.0",
     "98.2.1",

packages/eui/src-docs/src/views/call_out/accent.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+import { EuiCallOut, EuiLink } from '../../../../src';
+
+export default () => (
+  <EuiCallOut
+    title="Shiny new thing has arrived"
+    color="accent"
+    iconType="cheer"
+  >
+    <p>
+      Dull thing can now be forgotten.{' '}
+      <EuiLink external href="#">
+        Learn more
+      </EuiLink>
+      .
+    </p>
+  </EuiCallOut>
+);

packages/eui/src-docs/src/views/call_out/call_out_example.js

@@ -46,6 +46,15 @@ const dangerSnippet = [
 `,
 ];
 
+import Accent from './accent';
+const accentSource = require('!!raw-loader!./accent');
+const accentSnippet = [
+  `<EuiCallOut title="Shiny new thing has arrived" color="accent" iconType="cheer">
+  <p><!-- Content --></p>
+</EuiCallOut>
+`,
+];
+
 import OnDismiss from './on_dismiss';
 const onDismissSource = require('!!raw-loader!./on_dismiss');
 const onDismissSnippet = [
@@ -173,6 +182,23 @@ export const CallOutExample = {
       snippet: dangerSnippet,
       demo: <Danger />,
     },
+    {
+      title: 'Accent',
+      source: [
+        {
+          type: GuideSectionTypes.TSX,
+          code: accentSource,
+        },
+      ],
+      text: (
+        <p>
+          Use this callout to announce new capabilities. For example if you want
+          to highlight a feature.
+        </p>
+      ),
+      snippet: accentSnippet,
+      demo: <Accent />,
+    },
     {
       title: 'Dismissible callouts',
       source: [

packages/eui/src-docs/src/views/tables/in_memory/in_memory.tsx

@@ -85,6 +85,9 @@ const columns: Array<EuiBasicTableColumn<User>> = [
   {
     field: 'location',
     name: 'Location',
+    nameTooltip: {
+      content: 'The city and country in which this person resides',
+    },
     truncateText: true,
     textOnly: true,
     render: (location: User['location']) => {

packages/eui/src-docs/src/views/tables/sorting/sorting.tsx

@@ -8,9 +8,7 @@ import {
   EuiTableSortingType,
   Criteria,
   EuiHealth,
-  EuiIcon,
   EuiLink,
-  EuiToolTip,
   EuiFlexGroup,
   EuiFlexItem,
   EuiSwitch,
@@ -76,19 +74,10 @@ const columns: Array<EuiBasicTableColumn<User>> = [
   },
   {
     field: 'github',
-    name: (
-      <EuiToolTip content="Their mascot is the Octokitty">
-        <>
-          Github{' '}
-          <EuiIcon
-            size="s"
-            color="subdued"
-            type="questionInCircle"
-            className="eui-alignTop"
-          />
-        </>
-      </EuiToolTip>
-    ),
+    name: 'GibHub',
+    nameTooltip: {
+      content: 'Their mascot is the Octokitty',
+    },
     render: (username: User['github']) => (
       <EuiLink href="#" target="_blank">
         {username}
@@ -97,37 +86,19 @@ const columns: Array<EuiBasicTableColumn<User>> = [
   },
   {
     field: 'dateOfBirth',
-    name: (
-      <EuiToolTip content="Colloquially known as a 'birthday'">
-        <>
-          Date of Birth{' '}
-          <EuiIcon
-            size="s"
-            color="subdued"
-            type="questionInCircle"
-            className="eui-alignTop"
-          />
-        </>
-      </EuiToolTip>
-    ),
+    name: 'Date of Birth',
+    nameTooltip: {
+      content: "Colloquially known as a 'birthday'",
+    },
     render: (dateOfBirth: User['dateOfBirth']) =>
       formatDate(dateOfBirth, 'dobLong'),
   },
   {
     field: 'location',
-    name: (
-      <EuiToolTip content="The city and country in which this person resides">
-        <>
-          Nationality{' '}
-          <EuiIcon
-            size="s"
-            color="subdued"
-            type="questionInCircle"
-            className="eui-alignTop"
-          />
-        </>
-      </EuiToolTip>
-    ),
+    name: 'Nationality',
+    nameTooltip: {
+      content: 'The city and country in which this person resides',
+    },
     render: (location: User['location']) => {
       return `${location.city}, ${location.country}`;
     },
@@ -136,19 +107,10 @@ const columns: Array<EuiBasicTableColumn<User>> = [
   },
   {
     field: 'online',
-    name: (
-      <EuiToolTip content="Free to talk or busy with business">
-        <>
-          Online{' '}
-          <EuiIcon
-            size="s"
-            color="subdued"
-            type="questionInCircle"
-            className="eui-alignTop"
-          />
-        </>
-      </EuiToolTip>
-    ),
+    name: 'Online',
+    nameTooltip: {
+      content: 'Free to talk or busy with business',
+    },
     render: (online: User['online']) => {
       const color = online ? 'success' : 'danger';
       const label = online ? 'Online' : 'Offline';

packages/eui/src/components/basic_table/basic_table.stories.tsx

@@ -114,6 +114,9 @@ const columns: Array<EuiBasicTableColumn<User>> = [
   {
     field: 'location',
     name: 'Location',
+    nameTooltip: {
+      content: 'The city and country in which this person resides',
+    },
     truncateText: true,
     textOnly: true,
     render: (location: User['location']) => {

packages/eui/src/components/basic_table/basic_table.tsx

@@ -753,6 +753,7 @@ export class EuiBasicTable<T extends object = any> extends Component<
         field,
         width,
         name,
+        nameTooltip,
         align,
         dataType,
         sortable,
@@ -765,6 +766,7 @@ export class EuiBasicTable<T extends object = any> extends Component<
 
       const sharedProps = {
         width,
+        tooltipProps: nameTooltip,
         description,
         mobileOptions,
         align: columnAlign,
@@ -1280,6 +1282,7 @@ export class EuiBasicTable<T extends object = any> extends Component<
       sortable,
       footer,
       mobileOptions,
+      nameTooltip,
       ...rest
     } = column as EuiTableFieldDataColumnType<T>;
     const columnAlign = align || this.getAlignForDataType(dataType);

packages/eui/src/components/basic_table/in_memory_table.stories.tsx

@@ -102,6 +102,9 @@ const columns: Array<EuiBasicTableColumn<User>> = [
   {
     field: 'location',
     name: 'Location',
+    nameTooltip: {
+      content: 'The city and country in which this person resides',
+    },
     truncateText: true,
     textOnly: true,
     render: (location: User['location']) => {

packages/eui/src/components/basic_table/table_types.ts

@@ -12,10 +12,12 @@ import { Pagination } from './pagination_bar';
 import { Action } from './action_types';
 import { Primitive } from '../../services/sort/comparators';
 import { CommonProps } from '../common';
+import { IconType } from '../icon';
 import {
   EuiTableRowCellProps,
   EuiTableRowCellMobileOptionsShape,
 } from '../table/table_row_cell';
+import { EuiToolTipProps, EuiIconTipProps } from '../tool_tip';
 
 export type ItemId<T> = string | number | ((item: T) => string);
 export type ItemIdResolved = string | number;
@@ -31,6 +33,24 @@ export interface EuiTableFooterProps<T> {
   items: T[];
   pagination?: Pagination;
 }
+
+export type EuiTableColumnNameTooltipProps = {
+  /** The main content of the tooltip */
+  content: ReactNode;
+  /**
+   * The icon type to display
+   * @default 'questionInCircle'
+   */
+  icon?: IconType;
+  /** Additional props for EuiIcon */
+  iconProps?: EuiIconTipProps['iconProps'];
+  /** Additional props for the EuiToolip */
+  tooltipProps?: Omit<EuiToolTipProps, 'children' | 'delay' | 'position'> & {
+    delay?: EuiToolTipProps['delay'];
+    position?: EuiToolTipProps['position'];
+  };
+};
+
 export interface EuiTableFieldDataColumnType<T>
   extends CommonProps,
     Omit<TdHTMLAttributes<HTMLTableCellElement>, 'width' | 'align'> {
@@ -44,6 +64,10 @@ export interface EuiTableFieldDataColumnType<T>
    * The display name of the column
    */
   name: ReactNode;
+  /**
+   * Allows adding an icon with a tooltip displayed next to the name
+   */
+  nameTooltip?: EuiTableColumnNameTooltipProps;
   /**
    * A description of the column (will be presented as a title over the column header)
    */
@@ -118,6 +142,10 @@ export type EuiTableComputedColumnType<T> = CommonProps &
      * The display name of the column
      */
     name?: ReactNode;
+    /**
+     * Allows configuring an icon with a tooltip, to be displayed next to the name
+     */
+    nameTooltip?: EuiTableColumnNameTooltipProps;
     /**
      * If provided, allows this column to be sorted on. Must return the value to sort against.
      */
@@ -141,6 +169,10 @@ export type EuiTableActionsColumnType<T extends object> = {
    * The display name of the column
    */
   name?: ReactNode;
+  /**
+   * Allows configuring an icon with a tooltip, to be displayed next to the name
+   */
+  nameTooltip?: EuiTableColumnNameTooltipProps;
 } & Pick<EuiTableFieldDataColumnType<T>, 'description' | 'width'>;
 
 export interface EuiTableSortingType<T> {

packages/eui/src/components/call_out/__snapshots__/call_out.test.tsx.snap

@@ -14,6 +14,12 @@ exports[`EuiCallOut is rendered 1`] = `
 </div>
 `;
 
+exports[`EuiCallOut props color accent is rendered 1`] = `
+<div
+  class="euiPanel euiPanel--accent euiPanel--paddingMedium euiCallOut euiCallOut--accent emotion-euiPanel-none-m-accent-euiCallOut"
+/>
+`;
+
 exports[`EuiCallOut props color danger is rendered 1`] = `
 <div
   class="euiPanel euiPanel--danger euiPanel--paddingMedium euiCallOut euiCallOut--danger emotion-euiPanel-none-m-danger-euiCallOut"

packages/eui/src/components/call_out/call_out.styles.ts

@@ -70,6 +70,9 @@ export const euiCallOutHeaderStyles = ({ euiTheme }: UseEuiTheme) => {
     danger: css`
       color: ${euiTheme.colors.dangerText};
     `,
+    accent: css`
+      color: ${euiTheme.colors.accentText};
+    `,
     euiCallOut__icon: css`
       position: relative;
       ${logicalCSS('top', '-1px')}

packages/eui/src/components/call_out/call_out.tsx

@@ -22,7 +22,13 @@ import { EuiI18n } from '../i18n';
 
 import { euiCallOutStyles, euiCallOutHeaderStyles } from './call_out.styles';
 
-export const COLORS = ['primary', 'success', 'warning', 'danger'] as const;
+export const COLORS = [
+  'primary',
+  'success',
+  'warning',
+  'danger',
+  'accent',
+] as const;
 export type Color = (typeof COLORS)[number];
 
 export const HEADINGS = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p'] as const;

packages/eui/src/components/datagrid/data_grid.spec.tsx

@@ -63,7 +63,8 @@ describe('EuiDataGrid', () => {
   });
 
   describe('height calculation', async () => {
-    it('computes a new unconstrained height when switching to auto height', () => {
+    // TODO: Fix me
+    it.skip('computes a new unconstrained height when switching to auto height', () => {
       const renderCellValue: EuiDataGridProps['renderCellValue'] = ({
         rowIndex,
         columnId,