eui

Bug fixes

• Fixed an EuiTabbedContent edge case bug that occurred when updated with a completely different set of tabs (#7713)
• Fixed the @storybook/test dependency to be listed in devDependencies and not dependencies (#7719)

• Updated getDefaultEuiMarkdownPlugins() to allow excluding the following plugins in addition to tooltip: (#7676)
  • checkbox
  • linkValidator
  • lineBreaks
  • emoji
• Updated EuiSelectable's isPreFiltered prop to allow passing a configuration object, which allows disabling search highlighting in addition to search filtering (#7683)
• Updated EuiFlexGroup and EuiFlexItem prop types to support passing any valid React component type to the component prop and ensure proper type checking of the extra props forwarded to the component. (#7688)
• Updated EuiSearchBar to allow the @ special character in query string searches (#7702)
• Added a new, optional optionMatcher prop to EuiSelectable and EuiComboBox allowing passing a custom option matcher function to these components and controlling option filtering for given search string (#7709)

Bug fixes

• Fixed an EuiPageTemplate bug where prop updates would not cascade down to child sections (#7648)
  • To cascade props down to the sidebar, EuiPageTemplate now explicitly requires using the EuiPageTemplate.Sidebar rather than EuiPageSidebar
• Fixed EuiFieldNumber's typing to accept an icon configuration shape (#7666)
• Fixed EuiFieldText and EuiFieldNumber to render the correct paddings for icon shapes set to side: 'right' (#7666)
• Fixed EuiFieldText and EuiFieldNumber to fully ignore icon/prepend/append when controlOnly is set to true (#7666)
• Fixed EuiColorPicker's input not setting the correct right padding for the number of icons displayed (#7666)
• Visual fixes for EuiRanges with showInput: (#7678)
  • Longer append/prepend labels no longer cause a background bug
  • Inputs can no longer overwhelm the actual range in width
• Fixed a visual text alignment regression in EuiTableRowCells with the row header scope (#7681)
• Fixed toolTipProps type on EuiSuperUpdateButton to use Partial<EuiToolTipProps> (#7692)
• Fixes missing prop type for popperProps on EuiDatePicker (#7694)
• Fixed a focus bug with EuiDataGrids with leadingControlColumns when moving columns to the left/right (#7701) (#7698)
• Fixed EuiSuperDatePicker to validate date string with respect of locale on EuiAbsoluteTab. (#7705)
• Fixed a visual bug with EuiSuperDatePicker's absolute tab on small mobile screens (#7708)
• Fixed i18n of empty and loading state messages for the FieldValueSelectionFilter component (#7718)

Dependency updates

• Updated @hello-pangea/dnd to v16.6.0 (#7599)
• Updated remark-rehype to v8.1.0 (#7601)

Accessibility

• Improved EuiBasicTable and EuiInMemoryTable's selection checkboxes to have unique aria-labels per row (#7672)
• Added aria-valuetext attributes to EuiRanges with tick labels for improved screen reader UX (#7675)
• Updated EuiAccordion to keep focus on accordion trigger instead of moving to content on click/keypress (#7696)
• Added aria-disabled attribute to EuiHorizontalSteps when status is "disabled" (#7699)

• Updated EuiTableHeaderCell to show a subdued sortable icon for columns that are not currently sorted but can be (#7656)
• Updated EuiBasicTable and EuiInMemoryTable's columns[].actions[]'s to pass back click events to onClick callbacks as the second callback (#7667)

• Updated EuiTable, EuiBasicTable, and EuiInMemoryTable with a new responsiveBreakpoint prop, which allows customizing the point at which the table collapses into a mobile-friendly view with cards (#7625)
• Updated EuiProvider's componentDefaults prop to allow configuring EuiTable.responsiveBreakpoint (#7625)

Bug fixes

• EuiBasicTable & EuiInMemoryTable isPrimary actions are now correctly shown on mobile views (#7640)
• Table mobileOptions: (#7642)
  • mobileOptions.align is now respected instead of all cells being forced to left alignment
  • textTruncate and textOnly are now respected even if a render function is not passed

Breaking changes

• Removed unused EuiTableHeaderButton component (#7621)
• Removed the responsive prop from EuiTable, EuiBasicTable, and EuiInMemoryTable. Use the new responsiveBreakpoint prop instead (#7625)
• The following props are no longer needed by EuiBasicTable or EuiInMemoryTable for responsive table behavior to work correctly, and can be removed: (#7632)
  • isSelectable
  • isExpandable
  • hasActions
• Removed the showOnHover prop from EuiTableRowCell / EuiBasicTable/EuiInMemoryTable's columns API. Use the new actions columns[].actions[].showOnHover API instead. (#7640)
• Removed top-level textOnly prop from EuiBasicTable and EuiInMemoryTable. Use columns[].textOnly instead. (#7642)

DOM changes

• EuiTable mobile headers no longer render in the DOM when not visible (previously rendered with display: none). This may affect DOM testing assertions. (#7625)
• EuiTableRowCell now applies passed classNames to the parent <td> element, instead of to the inner cell content <div>. (#7631)
• EuiTableRows rendered by basic and memory tables now only render a .euiTableRow-isSelectable className if the selection checkbox is not disabled (#7632)
• EuiTableRowCells with textOnly set to false will no longer attempt to apply the .euiTableCellContent__text className to child elements. (#7641)
• EuiTableRowCell no longer renders mobile headers to the DOM unless the current table is displaying its responsive view. (#7642)
• EuiTableHeaderCell and EuiTableRowCell will no longer render in the DOM at all on mobile if their columns' mobileOptions.show is set to false. (#7642)
• EuiTableHeaderCell and EuiTableRowCell will no longer render in the DOM at all on desktop if their columns' mobileOptions.only is set to true. (#7642)

CSS-in-JS conversions

• Converted EuiTable, EuiTableRow, EuiTableRowCell, and all other table subcomponents to Emotion (#7654)
• Removed the following EuiTable Sass variables: (#7654)
  • $euiTableCellContentPadding
  • $euiTableCellContentPaddingCompressed
  • $euiTableCellCheckboxWidth
  • $euiTableHoverColor
  • $euiTableSelectedColor
  • $euiTableHoverSelectedColor
  • $euiTableActionsBorderColor
  • $euiTableHoverClickableColor
  • $euiTableFocusClickableColor
• Removed the following EuiTable Sass mixins: (#7654)
  • euiTableActionsBackgroundMobile
  • euiTableCellCheckbox
  • euiTableCell

• Updated EuiBreadcrumb styles to improve visual distinction of clickable breadcrumbs (#7615)

Deprecations

• Deprecated color prop on EuiBreadcrumb (#7615)

Bug fixes

• Fixed EuiComboBox to correctly select full matches within groups via the Enter key (#7658)

Accessibility

• Updated EuiHeaderBreadcrumb styles to ensure min. required color contrast (#7643)
• EuiSuperSelect now correctly reads out parent EuiFormRow labels to screen readers (#7650)
• EuiSuperSelect now more closely mimics native <select> behavior in its keyboard behavior and navigation (#7650)
• EuiSuperSelect no longer strands keyboard focus on close (#7650)
• EuiSuperSelect now correctly allows keyboard navigating past disabled options in the middle of the options list (#7650)

Dependency updates

• Updated react-virtualized-auto-sizer to 1.0.24 (#7598)
• Updated react-window to 1.8.10 (#7600)

CSS-in-JS conversions

• Updated EUI's internal style memoization/performance utility to have configurable error/warning levels via setEuiDevProviderWarning (#7626)

Bug fixes

• Fixed unvirtualized EuiSelectables to not cause Jest/jsdom errors on active option change (#7618)

• EuiHeaderLinks now accepts a children render function that will be passed a closeMobilePopover callback, allowing consumers to close the mobile popover by its content (#7603)
• Updated EuiSelectable to support scrolling list containers when listProps.isVirtualization is set to false (#7609)

Bug fixes

• Fixed EuiIconTip's default aria-label text to be i18n tokenizable (#7606)
• Fixed EuiTextArea's CSS box model to no longer render a few extra pixels of strut height (#7607)

Dependency updates

• Updated @types/refractor to v3.4.0 (#7590)
• Updated @types/lodash to v4.14.202 (#7591)
• Removed @types/resize-observer-browser dependency. ResizeObserver types should already be baked in to Typescript as of 4.2+ (#7592)
• Updated classnames to v2.5.1 (#7593)
• Updated @types/numeral to v2.0.5 (#7594)
• Updated @types/react-window to 1.8.8 (#7597)
• Updated prop-types to v15.18.1 (#7602)
• Removed prop-types as a peer dependency, per package recommendation (#7602)

Accessibility

• EuiIcons no longer apply aria-hidden to empty icons, as long as a valid title or label is provided to the icon. In particular, this is intended to improve the accessibility of loading EuiIconTips. (#7606)

• Added the following properties to EuiButtonGroup's options configs: toolTipContent, toolTipProps, and title. These new properties allow wrapping buttons in EuiToolTips, and additionally customizing or disabling the native browser title tooltip. (#7461)
• Enhanced EuiResizeObserver and useResizeObserver's performance to not trigger page reflows on resize event (#7575)
• Updated EuiSuperUpdateButton to support custom button text via an optional children prop (#7576)

Bug fixes

• Fixed EuiFlyout to not repeatedly remove/add a body class on resize (#7462)
• Fixed EuiToast title text to wrap instead of overflowing out of the container (#7568)
• Fixed a visual bug with EuiHeaderBreadcrumbs with popovers (#7580)

Deprecations

• Deprecated euiPalettePositive and euiPaletteNegative in favour of a more culturally inclusive euiPaletteGreen and euiPaletteRed (#7570)
• Deprecated all charts theme exports in favor of @elastic/charts exports: (#7572)
  • Deprecated EUI_CHARTS_THEME_<DARK|LIGHT> in favor of <DARK|LIGHT>_THEME from @elastic/charts. (#7572)
  • Deprecated EUI_SPARKLINE_THEME_PARTIAL in favor of useSparklineOverrides theme from the kibana charts plugin theme service.

Accessibility

• Updated EuiModal to set an aria-modal attribute and a default dialog role (#7564)
• Updated EuiConfirmModal to set a default alertdialog role (#7564)
• Fixed EuiModal and EuiConfirmModal to properly trap Safari+VoiceOver's virtual cursor (#7564)

• Added new EuiDataGrid new prop: cellContext, an optional object of additional props passed to the cell render function. (#7374)
• EuiBreadcrumbs's popoverContent API now accepts a render function that will be passed a closePopover callback, allowing consumers to close the breadcrumb popover from their popover content (#7555)

Bug fixes

• Fixed missing animation on native EuiProgress bar update (#7538)
• Fixed an EuiDataGrid bug with gridStyle.rowClasses, where custom consumer classes that began with euiDataGridRow would not be correctly removed/reapplied (#7549)
• Fixed a visual EuiDataGrid bug where EuiCheckboxes within control columns were not vertically centered within single height rows (#7549)

• Updated EuiPageSidebar and EuiPageTemplate.Sidebar with a new hasEmbellish prop (defaults to false) (#7521)
• Added diff glyph to EuiIcon (#7520)
• Added newChat glyph to EuiIcon (#7524)

Bug fixes

• Fixed EuiSideNav not correctly typing the items prop as required (#7521)
• Fixed the CSS is not defined bug in EuiPageTemplate when rendering in some SSR environments, particularly Next.js v13 and up (#7525)
• Fixed EuiDataGrid component to clean up timer from side effect on unmount (#7534)

Accessibility

• Fixed EuiSideNav to render a fallback aria-label on mobile toggles if no heading or mobile title exists (#7521)

CSS-in-JS conversions

• Converted EuiSideNav to Emotion; Removed the following Sass variables: (#7521)
  • $euiSideNavEmphasizedBackgroundColor
  • $euiSideNavRootTextcolor
  • $euiSideNavBranchTextcolor
  • $euiSideNavSelectedTextcolor
  • $euiSideNavDisabledTextcolor
• Removed the euiSideNavEmbellish Sass mixin. Use the new EuiPageSidebar hasEmbellish prop instead (#7521)
• Added a new memoization/performance optimization utility for CSS-in-JS styles (#7529)

This is a patch release primarily intended for use by Kibana.

• Added top-level EuiTreeView.Item export (#7526)

• Added index glyph to EuiIcon (#7498)
• Updated EuiHighlight to accept an array of search strings, which allows highlighting multiple, separate words within its children. This new type and behavior only works if highlightAll is also set to true. (#7496)
• Updated EuiContextMenu with a new panels.items.renderItem property, which allows rendering completely custom items next to standard EuiContextMenuItem objects (#7510)
• EuiSuperDatePicker updates:
  • Updated EuiSuperDatePicker with a new canRoundRelativeUnits prop, which defaults to true (current behavior). To preserve displaying the unit that users select for relative time, set this to false. (#7502)
  • Updated EuiSuperDatePicker with a new refreshIntervalUnits prop. Passing this prop allows controlling and overriding the default unit rounding behavior. (#7501)
  • Updated EuiAutoRefresh and EuiRefreshInterval with a new intervalUnits prop. Passing this prop allows controlling and overriding the default unit rounding behavior. (#7501)
  • Updated onRefreshChange to pass back a new intervalUnits key that contains the current interval unit format (seconds, minutes, or hours). (#7501)
  • Updated EuiSuperDatePicker with a new refreshMinInterval prop, which accepts a minimum number in milliseconds (#7516)
  • Updated EuiAutoRefresh and EuiRefreshInterval with a new minInterval prop, which accepts a minimum number in milliseconds (#7516)

Bug fixes

• Fixed EuiHighlight to not parse search strings as regexes (#7496)
• Fixed EuiSuperDatePicker submit bug when used within <form> elements (#7504)
• Fixed an EuiTreeView bug where aria-expanded was being applied to items without expandable children (#7513)

CSS-in-JS conversions

• Converted EuiTreeView to Emotion. Updates as part of the conversion: (#7513)
  • Removed .euiTreeView__wrapper div node
  • Enforced consistent icon size based on display size

Bug fixes

• Fixed EuiTextTruncate component to clean up timer from side effect on unmount (#7495)

Breaking changes

• Removed deprecated anchorClassName prop from EuiPopover. Use className instead (#7488)
• Removed deprecated buttonRef prop from EuiPopover. Use popoverRef instead (#7488)
• Removed deprecated toolTipTitle and toolTipPosition props from EuiContextMenuItem. Use toolTipProps.title and toolTipProps.position instead (#7489)
• Removed deprecated internal setSelection ref method from EuiInMemoryTable and EuiBasicTable. Use the new controlled selection.selected prop API instead. (#7491)
• EuiTourStep's className and style props now apply to the anchoring element instead of to the popover panel, to match EuiPopover behavior. (#7497)
  • Convert your existing usages to panelClassName and panelStyle respectively instead.

Performance

• Improved the amount of recomputed styles being generated by EuiCode and EuiCodeBlock (#7486)

CSS-in-JS conversions

• Converted EuiSearchBar to Emotion (#7490)
• Converted EuiEmptyPrompt to Emotion (#7494)
• Added euiBorderColor and useEuiBorderColorCSS style utilities (#7494)

Bug fixes

• Removed unintentional i18n tokens in prior release that should not have been exported

• Updated EuiFlyoutResizable with new optional onResize callback (#7464)

Bug fixes

• Fixed an issue in EuiResizableContainer where onResizeEnd could become a stale closure when renders occured between resize start and end, resulting in an outdated version of a consumer's onResizeEnd callback being called (#7468)
• Fixed EuiTextArea to correctly fire onChange callbacks on clear button click (#7473)
• Fixed EuiContextMenu's panel titles & items to not show underlines on hover for non-interactive elements (#7474)

Deprecations

• Remove unused public EuiHue and EuiSaturation subcomponent exports. Use the parent EuiColorPicker component instead (#7460)
• Remove unused public EuiCommentTimeline subcomponent export. Use the parent EuiComment or EuiCommentList components instead. (#7467)

Bug fixes

• Minor EuiDataGrid cell performance fixes (#7465)

• Updated EuiResizableButton to allow customizing the indicator style with either handle (default) or border (#7455)
• Enhanced EuiResizableContainer to preserve the drag/resize event when the user's mouse leaves the parent container and re-enters (#7456)

Bug fixes

• Fixed an EuiTreeView JSX Typescript error (#7452)
• Fixed a color console warning being generated by disabled EuiSteps (#7454)

Accessibility

• EuiDataGrid's keyboard/screenreader experience has been tweaked to be more consistent for varying complex data: (#7448)
  • Headers are now always navigable by arrow key, regardless of whether the header cells contain interactive content
  • Non-expandable cells containing any amount of interactive content now must be entered via Enter or F2 keypress
  • Expandable cells continue to be toggled via Enter or F2 keypress
• EuiDataGrid now provides a direct screen reader hint for Enter key behavior for expandable & interactive cells (#7448)

v92.0.0

• Updated generic types of EuiBasicTable, EuiInMemoryTable and EuiSearchBar.Query.execute to add extends object constraint (#7340)
  • This change should have no impact on your applications since the updated types only affect properties that exclusively accept object values.
• Added a new EuiFlyoutResizable component (#7439)
• Updated EuiTextArea to accept isClearable and icon as props (#7449)

Bug fixes

• EuiRange/EuiDualRange's track ticks & highlights now update their positions on resize (#7442)

Deprecations

• Updated EuiFilterButton to remove the second .euiFilterButton__textShift span wrapper. Target .euiFilterButton__text instead (#7444)

Breaking changes

• Removed deprecated EuiNotificationEvent. We recommend copying the component to your application if necessary (#7434)
• Removed deprecated EuiControlBar. We recommend using EuiBottomBar instead (#7435)

Bug fixes

• Moved EuiDataGrid's header cells' dataGridHeaderCellActionButton test subject attribute from to the clickable button, for easier E2E testing (#7427)
• Fixed EuiBasicTable/EuiInMemoryTable actions to correctly show as disabled when rows are being selected (#7428)