@elastic/eui 72.0.0 → 72.1.0

package/es/components/key_pad_menu/key_pad_menu.a11y.js

@@ -0,0 +1,158 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+/*
+ * 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.
+ */
+/// <reference types="../../../cypress/support"/>
+import React, { useState } from 'react';
+import { EuiKeyPadMenu } from './key_pad_menu';
+import { EuiKeyPadMenuItem } from './key_pad_menu_item';
+import { EuiIcon } from '../icon';
+import { useGeneratedHtmlId } from '../../services';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+
+var KeyPadMenu = function KeyPadMenu() {
+  var keypadButtonId__1 = useGeneratedHtmlId({
+    prefix: 'keypadButton',
+    suffix: 'first'
+  });
+  var keypadButtonId__2 = useGeneratedHtmlId({
+    prefix: 'keypadButton',
+    suffix: 'second'
+  });
+  var keypadButtonId__3 = useGeneratedHtmlId({
+    prefix: 'keypadButton',
+    suffix: 'third'
+  });
+  var keypadButtonId__4 = useGeneratedHtmlId({
+    prefix: 'keypadButton',
+    suffix: 'fourth'
+  });
+  var keypadButtonId__5 = useGeneratedHtmlId({
+    prefix: 'keypadButton',
+    suffix: 'fifth'
+  });
+  var keypadButtonId__6 = useGeneratedHtmlId({
+    prefix: 'keypadButton',
+    suffix: 'sixth'
+  });
+
+  var _useState = useState(keypadButtonId__6),
+      _useState2 = _slicedToArray(_useState, 2),
+      selectedID = _useState2[0],
+      setSelectedID = _useState2[1];
+
+  return ___EmotionJSX("div", {
+    "aria-label": "Menu keypad"
+  }, ___EmotionJSX(EuiKeyPadMenu, null, ___EmotionJSX(EuiKeyPadMenuItem, {
+    "data-test-subj": "cy-keypad-button-1",
+    id: keypadButtonId__1,
+    label: "Button 1",
+    isSelected: selectedID === keypadButtonId__1,
+    onClick: function onClick() {
+      return setSelectedID(keypadButtonId__1);
+    }
+  }, ___EmotionJSX(EuiIcon, {
+    type: "grid",
+    size: "l"
+  })), ___EmotionJSX(EuiKeyPadMenuItem, {
+    "data-test-subj": "cy-keypad-button-2",
+    id: keypadButtonId__2,
+    label: "Button 2",
+    isSelected: selectedID === keypadButtonId__2,
+    onClick: function onClick() {
+      return setSelectedID(keypadButtonId__2);
+    }
+  }, ___EmotionJSX(EuiIcon, {
+    type: "grid",
+    size: "l"
+  })), ___EmotionJSX(EuiKeyPadMenuItem, {
+    "data-test-subj": "cy-keypad-button-3",
+    id: keypadButtonId__3,
+    label: "Button 3",
+    isSelected: selectedID === keypadButtonId__3,
+    onClick: function onClick() {
+      return setSelectedID(keypadButtonId__3);
+    }
+  }, ___EmotionJSX(EuiIcon, {
+    type: "grid",
+    size: "l"
+  })), ___EmotionJSX(EuiKeyPadMenuItem, {
+    "data-test-subj": "cy-keypad-link-1",
+    id: keypadButtonId__4,
+    label: "Link 1",
+    href: "#/navigation/key-pad-menu",
+    isSelected: selectedID === keypadButtonId__4,
+    onClick: function onClick() {
+      return setSelectedID(keypadButtonId__4);
+    }
+  }, ___EmotionJSX(EuiIcon, {
+    type: "link",
+    size: "l"
+  })), ___EmotionJSX(EuiKeyPadMenuItem, {
+    "data-test-subj": "cy-keypad-link-2",
+    id: keypadButtonId__5,
+    label: "Link 2",
+    href: "#/navigation/key-pad-menu",
+    isSelected: selectedID === keypadButtonId__5,
+    onClick: function onClick() {
+      return setSelectedID(keypadButtonId__5);
+    }
+  }, ___EmotionJSX(EuiIcon, {
+    type: "link",
+    size: "l"
+  })), ___EmotionJSX(EuiKeyPadMenuItem, {
+    "data-test-subj": "cy-keypad-link-3",
+    id: keypadButtonId__6,
+    label: "Disabled Link 3",
+    isDisabled: true,
+    isSelected: selectedID === keypadButtonId__6
+  }, ___EmotionJSX(EuiIcon, {
+    type: "link",
+    size: "l"
+  }))));
+};
+
+beforeEach(function () {
+  cy.realMount(___EmotionJSX(KeyPadMenu, null));
+  cy.get('div[aria-label="Menu keypad"]').should('exist');
+});
+describe('EuiKeyPadMenu', function () {
+  describe('Automated accessibility check', function () {
+    it('has zero violations on first render', function () {
+      cy.checkAxe();
+    });
+    it('has zero violations on item click', function () {
+      cy.get('a[data-test-subj="cy-keypad-link-2"]').realClick();
+      cy.get('a[data-test-subj="cy-keypad-link-2"]').should('have.class', 'euiKeyPadMenuItem-isSelected');
+      cy.checkAxe();
+    });
+    it('has zero violations on item keypress', function () {
+      cy.repeatRealPress('Tab', 3);
+      cy.get('button[data-test-subj="cy-keypad-button-3"]').should('have.focus');
+      cy.realPress('Space');
+      cy.get('button[data-test-subj="cy-keypad-button-3"]').should('have.class', 'euiKeyPadMenuItem-isSelected');
+      cy.checkAxe();
+      cy.realPress(['Shift', 'Tab']);
+      cy.get('button[data-test-subj="cy-keypad-button-2"]').should('have.focus');
+      cy.realPress('Space');
+      cy.get('button[data-test-subj="cy-keypad-button-2"]').should('have.class', 'euiKeyPadMenuItem-isSelected');
+      cy.get('button[data-test-subj="cy-keypad-button-3"]').should('not.have.class', 'euiKeyPadMenuItem-isSelected');
+      cy.checkAxe();
+    });
+  });
+});

package/es/components/popover/popover.js

@@ -508,13 +508,13 @@ export var EuiPopover = /*#__PURE__*/function (_Component) {
         panel = ___EmotionJSX(EuiPortal, {
           insert: insert
         }, ___EmotionJSX(EuiFocusTrap, _extends({
-          clickOutsideDisables: true
+          clickOutsideDisables: true,
+          onClickOutside: this.onClickOutside
         }, focusTrapProps, {
           returnFocus: returnFocus // Ignore temporary state of indecisive focus
           ,
           initialFocus: initialFocus,
           onDeactivation: onTrapDeactivation,
-          onClickOutside: this.onClickOutside,
           onEscapeKey: this.onEscapeKey,
           disabled: !ownFocus || !this.state.isOpenStable || this.state.isClosing
         }), ___EmotionJSX(EuiPopoverPanel, _extends({}, panelProps, {

package/es/components/table/table_footer_cell.js

@@ -48,6 +48,6 @@ EuiTableFooterCell.propTypes = {
   "aria-label": PropTypes.string,
   "data-test-subj": PropTypes.string,
   css: PropTypes.any,
-  align: PropTypes.oneOf(["left", "right", "center"]),
+  align: PropTypes.any,
   width: PropTypes.oneOfType([PropTypes.string.isRequired, PropTypes.number.isRequired])
 };

package/es/components/table/table_header_cell.js

@@ -139,7 +139,7 @@ EuiTableHeaderCell.propTypes = {
   "aria-label": PropTypes.string,
   "data-test-subj": PropTypes.string,
   css: PropTypes.any,
-  align: PropTypes.oneOf(["left", "right", "center"]),
+  align: PropTypes.any,
   isSortAscending: PropTypes.bool,
   isSorted: PropTypes.bool,
 

package/es/components/table/table_row_cell.js

@@ -195,7 +195,7 @@ EuiTableRowCell.propTypes = {
     /**
        * Horizontal alignment of the text in the cell
        */
-    align: PropTypes.oneOf(["left", "right", "center"]),
+    align: PropTypes.any,
 
     /**
        * _Should only be used for action cells_
@@ -217,7 +217,7 @@ EuiTableRowCell.propTypes = {
   /**
      * Horizontal alignment of the text in the cell
      */
-  align: PropTypes.oneOf(["left", "right", "center"]),
+  align: PropTypes.any,
 
   /**
      * _Should only be used for action cells_

package/es/services/color/manipulation.js

@@ -97,4 +97,13 @@ export var lightness = function lightness(color) {
 
 export var darken = function darken(color, amount) {
   return chroma(color).darken(amount).hex();
+};
+/**
+ * Returns the brighten value of a color. 0-100
+ * @param color - Color to manipulate
+ * @param amount - Amount to change in absolute terms. 0-1.
+ */
+
+export var brighten = function brighten(color, amount) {
+  return chroma(color).brighten(amount).hex();
 };

package/es/services/index.js

@@ -7,25 +7,25 @@
  */
 // Export all keys under a `keys` named variable
 import * as keys from './keys';
-export { keys };
 export { accessibleClickKeys, cascadingMenuKeys, comboBoxKeys, htmlIdGenerator, useGeneratedHtmlId } from './accessibility';
-export { LEFT_ALIGNMENT, RIGHT_ALIGNMENT, CENTER_ALIGNMENT } from './alignment';
-export { useIsWithinBreakpoints, useIsWithinMaxBreakpoint, useIsWithinMinBreakpoint, CurrentEuiBreakpointContext, CurrentEuiBreakpointProvider, useCurrentEuiBreakpoint } from './breakpoint';
-export { isColorDark, isValidHex, calculateContrast, calculateLuminance, hexToHsv, hexToRgb, hsvToHex, hsvToRgb, rgbToHex, rgbToHsv, VISUALIZATION_COLORS, DEFAULT_VISUALIZATION_COLOR, colorPalette, euiPaletteForLightBackground, euiPaletteForDarkBackground, euiPaletteColorBlind, euiPaletteColorBlindBehindText, euiPaletteForStatus, euiPaletteForTemperature, euiPaletteComplimentary, euiPaletteNegative, euiPalettePositive, euiPaletteCool, euiPaletteWarm, euiPaletteGray, getSteppedGradient, transparentize, tint, shade, tintOrShade, shadeOrTint, saturate, desaturate, lightness, darken, makeHighContrastColor, makeDisabledContrastColor, wcagContrastMin } from './color';
+export { CENTER_ALIGNMENT, LEFT_ALIGNMENT, RIGHT_ALIGNMENT } from './alignment';
+export { CurrentEuiBreakpointContext, CurrentEuiBreakpointProvider, useCurrentEuiBreakpoint, useIsWithinBreakpoints, useIsWithinMaxBreakpoint, useIsWithinMinBreakpoint } from './breakpoint';
+export { brighten, calculateContrast, calculateLuminance, colorPalette, darken, DEFAULT_VISUALIZATION_COLOR, desaturate, euiPaletteColorBlind, euiPaletteColorBlindBehindText, euiPaletteComplimentary, euiPaletteCool, euiPaletteForDarkBackground, euiPaletteForLightBackground, euiPaletteForStatus, euiPaletteForTemperature, euiPaletteGray, euiPaletteNegative, euiPalettePositive, euiPaletteWarm, getSteppedGradient, hexToHsv, hexToRgb, hsvToHex, hsvToRgb, isColorDark, isValidHex, lightness, makeDisabledContrastColor, makeHighContrastColor, rgbToHex, rgbToHsv, saturate, shade, shadeOrTint, tint, tintOrShade, transparentize, VISUALIZATION_COLORS, wcagContrastMin } from './color';
 export { useColorPickerState, useColorStopsState } from './color_picker';
 export * from './console';
 export { copyToClipboard } from './copy_to_clipboard';
 export * from './findElement';
-export { formatAuto, formatBoolean, formatDate, formatNumber, formatText, dateFormatAliases } from './format';
+export { dateFormatAliases, formatAuto, formatBoolean, formatDate, formatNumber, formatText } from './format';
+export * from './hooks';
 export { isEvenlyDivisibleBy, isWithinRange } from './number';
 export { Pager } from './paging';
+export { calculatePopoverPosition, findPopoverPosition } from './popover';
 export { Random } from './random';
 export { getSecureRelForTarget } from './security';
-export { toSentenceCase, toInitials, slugify } from './string';
-export { PropertySortType, SortDirectionType, SortDirection, SortableProperties, Comparators } from './sort';
-export { calculatePopoverPosition, findPopoverPosition } from './popover';
+export { Comparators, PropertySortType, SortableProperties, SortDirection, SortDirectionType } from './sort';
+export { slugify, toInitials, toSentenceCase } from './string';
+export * from './theme';
+export { throttle } from './throttle';
 export { getDurationAndPerformOnFrame, getTransitionTimings, getWaitDuration, performOnFrame } from './transition';
 export { EuiWindowEvent } from './window_event';
-export * from './hooks';
-export { throttle } from './throttle';
-export * from './theme';
+export { keys };

package/eui.d.ts

@@ -4587,7 +4587,7 @@ declare module '@elastic/eui/src/components/popover/popover' {
 	    /**
 	     * Object of props passed to EuiFocusTrap
 	     */
-	    focusTrapProps?: Pick<EuiFocusTrapProps, 'clickOutsideDisables' | 'noIsolation' | 'scrollLock' | 'shards'>;
+	    focusTrapProps?: Pick<EuiFocusTrapProps, 'clickOutsideDisables' | 'onClickOutside' | 'noIsolation' | 'scrollLock' | 'shards'>;
 	    /**
 	     * Show arrow indicating to originating button
 	     */
@@ -6433,6 +6433,29 @@ declare module '@elastic/eui/src/components/color_picker/color_picker' {
 	export const EuiColorPicker: FunctionComponent<EuiColorPickerProps>;
 	export {};
 
+}
+declare module '@elastic/eui/src/components/color_picker/color_picker.styles' {
+	import { UseEuiTheme } from '@elastic/eui/src/services';
+	export const euiColorPickerVariables: (euiThemeContext: UseEuiTheme) => {
+	    width: string;
+	};
+
+}
+declare module '@elastic/eui/src/components/color_picker/color_stops/color_stop_thumb.styles' {
+	import { UseEuiTheme } from '@elastic/eui/src/services';
+	export const euiColorStopThumbStyles: (euiThemeContext: UseEuiTheme) => {
+	    euiColorStopThumb: import("@emotion/utils").SerializedStyles;
+	    isPopoverOpen: import("@emotion/utils").SerializedStyles;
+	};
+	export const euiColorStopThumbPopoverStyles: (euiThemeContext: UseEuiTheme) => {
+	    euiColorStopThumbPopover: import("@emotion/utils").SerializedStyles;
+	    isLoadingPanel: import("@emotion/utils").SerializedStyles;
+	    hasFocus: import("@emotion/utils").SerializedStyles;
+	};
+	export const euiColorStopStyles: (euiThemeContext: UseEuiTheme) => {
+	    euiColorStop: import("@emotion/utils").SerializedStyles;
+	};
+
 }
 declare module '@elastic/eui/src/components/color_picker/color_stops/color_stop_thumb' {
 	import { FunctionComponent, CSSProperties } from 'react';
@@ -6473,6 +6496,25 @@ declare module '@elastic/eui/src/components/color_picker/color_stops/color_stop_
 	export const EuiColorStopThumb: FunctionComponent<EuiColorStopThumbProps>;
 	export {};
 
+}
+declare module '@elastic/eui/src/components/color_picker/color_stops/color_stops.styles' {
+	import { UseEuiTheme } from '@elastic/eui/src/services';
+	export const euiColorStopsStyles: (euiThemeContext: UseEuiTheme) => {
+	    euiColorStops: import("@emotion/utils").SerializedStyles;
+	    isEnabled: import("@emotion/utils").SerializedStyles;
+	    isDisabled: import("@emotion/utils").SerializedStyles;
+	    isHoverDisabled: import("@emotion/utils").SerializedStyles;
+	    isReadOnly: import("@emotion/utils").SerializedStyles;
+	    isDragging: import("@emotion/utils").SerializedStyles;
+	    euiColorStops__track: import("@emotion/utils").SerializedStyles;
+	    euiColorStops__addTarget: import("@emotion/utils").SerializedStyles;
+	};
+	export const euiColorStopsAddContainerStyles: (euiThemeContext: UseEuiTheme) => {
+	    euiColorStopsAddContainer: import("@emotion/utils").SerializedStyles;
+	    isEnabled: import("@emotion/utils").SerializedStyles;
+	    isDisabled: import("@emotion/utils").SerializedStyles;
+	};
+
 }
 declare module '@elastic/eui/src/components/color_picker/color_stops/color_stops' {
 	import { FunctionComponent } from 'react';
@@ -6586,6 +6628,12 @@ declare module '@elastic/eui/src/services/color/manipulation' {
 	 * @param amount - Amount to change in absolute terms. 0-1.
 	 */
 	export const darken: (color: string, amount: number) => string;
+	/**
+	 * Returns the brighten value of a color. 0-100
+	 * @param color - Color to manipulate
+	 * @param amount - Amount to change in absolute terms. 0-1.
+	 */
+	export const brighten: (color: string, amount: number) => string;
 
 }
 declare module '@elastic/eui/src/services/color/contrast' {
@@ -7203,6 +7251,54 @@ declare module '@elastic/eui/src/services/format' {
 	export { formatNumber } from '@elastic/eui/src/services/format/format_number';
 	export { formatText } from '@elastic/eui/src/services/format/format_text';
 
+}
+declare module '@elastic/eui/src/services/hooks/useUpdateEffect' {
+	export const useUpdateEffect: (effect: Function, deps: unknown[]) => void;
+
+}
+declare module '@elastic/eui/src/services/hooks/useDependentState' {
+	
+	export function useDependentState<T>(valueFn: (previousState: undefined | T) => T, deps: unknown[]): readonly [T, import("react").Dispatch<import("react").SetStateAction<T>>];
+
+}
+declare module '@elastic/eui/src/services/hooks/useCombinedRefs' {
+	import { MutableRefObject, Ref } from 'react';
+	export const useCombinedRefs: <T>(refs: (Ref<T> | MutableRefObject<T | undefined> | undefined)[]) => (node: T) => void;
+
+}
+declare module '@elastic/eui/src/services/hooks/useForceRender' {
+	export const useForceRender: () => () => void;
+
+}
+declare module '@elastic/eui/src/services/hooks/useLatest' {
+	import { MutableRefObject } from 'react';
+	/**
+	 * Wraps the given `value` into a `MutableRefObject` and keeps the `current`
+	 * value up-to-date on every render cycle.
+	 */
+	export function useLatest<Value>(value: Value): MutableRefObject<Value | null>;
+
+}
+declare module '@elastic/eui/src/services/hooks/useMouseMove' {
+	import { MouseEvent, TouchEvent } from 'react';
+	export function isMouseEvent<T = HTMLDivElement>(event: MouseEvent<T> | TouchEvent<T>): event is MouseEvent<T>;
+	export function useMouseMove<T = HTMLDivElement>(handleChange: (location: {
+	    x: number;
+	    y: number;
+	}, isFirstInteraction?: boolean) => void, interactionConditional?: any): [
+	    (e: MouseEvent<T>) => void,
+	    (e: MouseEvent<T> | TouchEvent<T>, isFirstInteraction?: boolean) => void
+	];
+
+}
+declare module '@elastic/eui/src/services/hooks' {
+	export * from '@elastic/eui/src/services/hooks/useDependentState';
+	export * from '@elastic/eui/src/services/hooks/useCombinedRefs';
+	export * from '@elastic/eui/src/services/hooks/useForceRender';
+	export * from '@elastic/eui/src/services/hooks/useLatest';
+	export * from '@elastic/eui/src/services/hooks/useMouseMove';
+	export * from '@elastic/eui/src/services/hooks/useUpdateEffect';
+
 }
 declare module '@elastic/eui/src/services/paging/pager' {
 	export class Pager {
@@ -7286,50 +7382,6 @@ declare module '@elastic/eui/src/services/security/get_secure_rel_for_target' {
 declare module '@elastic/eui/src/services/security' {
 	export { getSecureRelForTarget } from '@elastic/eui/src/services/security/get_secure_rel_for_target';
 
-}
-declare module '@elastic/eui/src/services/string/to_initials' {
-	/**
-	 * This function calculates the initials/acronym for a given name.
-	 * It defaults to only 2 characters and will take the first character (of each word).
-	 * If only one word is supplied for the name, it will only pass back the first letter of the word,
-	 * unless forced to 2 letters by setting `initialsLength` to `2`.
-	 * It will pass back the characters with the same casing as the original string
-	 * unless otherwise specified.
-	 *
-	 * @param {string} name The full name of the item to turn into initials
-	 * @param {number} initialsLength (Optional) How many characters to show (max 2 allowed)
-	 * @param {string} initials (Optional) Custom initials (max 2 characters)
-	 * @returns {string} True if the color is dark, false otherwise.
-	 */
-	export const MAX_INITIALS = 2;
-	export function toInitials(name: string, initialsLength?: 1 | 2, initials?: string): string | null;
-
-}
-declare module '@elastic/eui/src/services/string/to_case' {
-	/**
-	 * This function returns the same string with the first letter of the first word capitalized.
-	 *
-	 * @param {string} string The input string
-	 */
-	export function toSentenceCase(string: string): string;
-
-}
-declare module '@elastic/eui/src/services/string/slugify' {
-	/**
-	 * Lowercases input and replaces spaces with hyphens:
-	 * e.g. 'GridView Example' -> 'gridview-example'
-	 *
-	 * @param {string} string The starting string
-	 * @returns {string} Lowercase, dashed version of the starting staring
-	 */
-	export function slugify(str: string): string;
-
-}
-declare module '@elastic/eui/src/services/string' {
-	export { toInitials } from '@elastic/eui/src/services/string/to_initials';
-	export { toSentenceCase } from '@elastic/eui/src/services/string/to_case';
-	export { slugify } from '@elastic/eui/src/services/string/slugify';
-
 }
 declare module '@elastic/eui/src/services/sort/sort_direction' {
 	import PropTypes from 'prop-types'; const ASC: "asc"; const DESC: "desc";
@@ -7441,6 +7493,50 @@ declare module '@elastic/eui/src/services/sort' {
 	export { PropertySortType } from '@elastic/eui/src/services/sort/property_sort';
 	export { Comparators } from '@elastic/eui/src/services/sort/comparators';
 
+}
+declare module '@elastic/eui/src/services/string/to_initials' {
+	/**
+	 * This function calculates the initials/acronym for a given name.
+	 * It defaults to only 2 characters and will take the first character (of each word).
+	 * If only one word is supplied for the name, it will only pass back the first letter of the word,
+	 * unless forced to 2 letters by setting `initialsLength` to `2`.
+	 * It will pass back the characters with the same casing as the original string
+	 * unless otherwise specified.
+	 *
+	 * @param {string} name The full name of the item to turn into initials
+	 * @param {number} initialsLength (Optional) How many characters to show (max 2 allowed)
+	 * @param {string} initials (Optional) Custom initials (max 2 characters)
+	 * @returns {string} True if the color is dark, false otherwise.
+	 */
+	export const MAX_INITIALS = 2;
+	export function toInitials(name: string, initialsLength?: 1 | 2, initials?: string): string | null;
+
+}
+declare module '@elastic/eui/src/services/string/to_case' {
+	/**
+	 * This function returns the same string with the first letter of the first word capitalized.
+	 *
+	 * @param {string} string The input string
+	 */
+	export function toSentenceCase(string: string): string;
+
+}
+declare module '@elastic/eui/src/services/string/slugify' {
+	/**
+	 * Lowercases input and replaces spaces with hyphens:
+	 * e.g. 'GridView Example' -> 'gridview-example'
+	 *
+	 * @param {string} string The starting string
+	 * @returns {string} Lowercase, dashed version of the starting staring
+	 */
+	export function slugify(str: string): string;
+
+}
+declare module '@elastic/eui/src/services/string' {
+	export { toInitials } from '@elastic/eui/src/services/string/to_initials';
+	export { toSentenceCase } from '@elastic/eui/src/services/string/to_case';
+	export { slugify } from '@elastic/eui/src/services/string/slugify';
+
 }
 declare module '@elastic/eui/src/services/transition/transition' {
 	export const getTransitionTimings: (element: Element) => {
@@ -7476,84 +7572,36 @@ declare module '@elastic/eui/src/services/window_event/window_event' {
 declare module '@elastic/eui/src/services/window_event' {
 	export { EuiWindowEvent } from '@elastic/eui/src/services/window_event/window_event';
 
-}
-declare module '@elastic/eui/src/services/hooks/useUpdateEffect' {
-	export const useUpdateEffect: (effect: Function, deps: unknown[]) => void;
-
-}
-declare module '@elastic/eui/src/services/hooks/useDependentState' {
-	
-	export function useDependentState<T>(valueFn: (previousState: undefined | T) => T, deps: unknown[]): readonly [T, import("react").Dispatch<import("react").SetStateAction<T>>];
-
-}
-declare module '@elastic/eui/src/services/hooks/useCombinedRefs' {
-	import { MutableRefObject, Ref } from 'react';
-	export const useCombinedRefs: <T>(refs: (Ref<T> | MutableRefObject<T | undefined> | undefined)[]) => (node: T) => void;
-
-}
-declare module '@elastic/eui/src/services/hooks/useForceRender' {
-	export const useForceRender: () => () => void;
-
-}
-declare module '@elastic/eui/src/services/hooks/useLatest' {
-	import { MutableRefObject } from 'react';
-	/**
-	 * Wraps the given `value` into a `MutableRefObject` and keeps the `current`
-	 * value up-to-date on every render cycle.
-	 */
-	export function useLatest<Value>(value: Value): MutableRefObject<Value | null>;
-
-}
-declare module '@elastic/eui/src/services/hooks/useMouseMove' {
-	import { MouseEvent, TouchEvent } from 'react';
-	export function isMouseEvent<T = HTMLDivElement>(event: MouseEvent<T> | TouchEvent<T>): event is MouseEvent<T>;
-	export function useMouseMove<T = HTMLDivElement>(handleChange: (location: {
-	    x: number;
-	    y: number;
-	}, isFirstInteraction?: boolean) => void, interactionConditional?: any): [
-	    (e: MouseEvent<T>) => void,
-	    (e: MouseEvent<T> | TouchEvent<T>, isFirstInteraction?: boolean) => void
-	];
-
-}
-declare module '@elastic/eui/src/services/hooks' {
-	export * from '@elastic/eui/src/services/hooks/useDependentState';
-	export * from '@elastic/eui/src/services/hooks/useCombinedRefs';
-	export * from '@elastic/eui/src/services/hooks/useForceRender';
-	export * from '@elastic/eui/src/services/hooks/useLatest';
-	export * from '@elastic/eui/src/services/hooks/useMouseMove';
-	export * from '@elastic/eui/src/services/hooks/useUpdateEffect';
-
 }
 declare module '@elastic/eui/src/services' {
 	import * as keys from '@elastic/eui/src/services/keys';
-	export { keys };
 	export { accessibleClickKeys, cascadingMenuKeys, comboBoxKeys, htmlIdGenerator, useGeneratedHtmlId, } from '@elastic/eui/src/services/accessibility';
+	export { CENTER_ALIGNMENT, LEFT_ALIGNMENT, RIGHT_ALIGNMENT } from '@elastic/eui/src/services/alignment';
 	export type { HorizontalAlignment } from '@elastic/eui/src/services/alignment';
-	export { LEFT_ALIGNMENT, RIGHT_ALIGNMENT, CENTER_ALIGNMENT } from '@elastic/eui/src/services/alignment';
+	export { CurrentEuiBreakpointContext, CurrentEuiBreakpointProvider, useCurrentEuiBreakpoint, useIsWithinBreakpoints, useIsWithinMaxBreakpoint, useIsWithinMinBreakpoint, } from '@elastic/eui/src/services/breakpoint';
 	export type { EuiBreakpointSize } from '@elastic/eui/src/services/breakpoint';
-	export { useIsWithinBreakpoints, useIsWithinMaxBreakpoint, useIsWithinMinBreakpoint, CurrentEuiBreakpointContext, CurrentEuiBreakpointProvider, useCurrentEuiBreakpoint, } from '@elastic/eui/src/services/breakpoint';
+	export { brighten, calculateContrast, calculateLuminance, colorPalette, darken, DEFAULT_VISUALIZATION_COLOR, desaturate, euiPaletteColorBlind, euiPaletteColorBlindBehindText, euiPaletteComplimentary, euiPaletteCool, euiPaletteForDarkBackground, euiPaletteForLightBackground, euiPaletteForStatus, euiPaletteForTemperature, euiPaletteGray, euiPaletteNegative, euiPalettePositive, euiPaletteWarm, getSteppedGradient, hexToHsv, hexToRgb, hsvToHex, hsvToRgb, isColorDark, isValidHex, lightness, makeDisabledContrastColor, makeHighContrastColor, rgbToHex, rgbToHsv, saturate, shade, shadeOrTint, tint, tintOrShade, transparentize, VISUALIZATION_COLORS, wcagContrastMin, } from '@elastic/eui/src/services/color';
 	export type { HSV } from '@elastic/eui/src/services/color';
-	export { isColorDark, isValidHex, calculateContrast, calculateLuminance, hexToHsv, hexToRgb, hsvToHex, hsvToRgb, rgbToHex, rgbToHsv, VISUALIZATION_COLORS, DEFAULT_VISUALIZATION_COLOR, colorPalette, euiPaletteForLightBackground, euiPaletteForDarkBackground, euiPaletteColorBlind, euiPaletteColorBlindBehindText, euiPaletteForStatus, euiPaletteForTemperature, euiPaletteComplimentary, euiPaletteNegative, euiPalettePositive, euiPaletteCool, euiPaletteWarm, euiPaletteGray, getSteppedGradient, transparentize, tint, shade, tintOrShade, shadeOrTint, saturate, desaturate, lightness, darken, makeHighContrastColor, makeDisabledContrastColor, wcagContrastMin, } from '@elastic/eui/src/services/color';
-	export type { EuiSetColorMethod } from '@elastic/eui/src/services/color_picker';
 	export { useColorPickerState, useColorStopsState } from '@elastic/eui/src/services/color_picker';
+	export type { EuiSetColorMethod } from '@elastic/eui/src/services/color_picker';
 	export * from '@elastic/eui/src/services/console';
 	export { copyToClipboard } from '@elastic/eui/src/services/copy_to_clipboard';
 	export * from '@elastic/eui/src/services/findElement';
-	export { formatAuto, formatBoolean, formatDate, formatNumber, formatText, dateFormatAliases, } from '@elastic/eui/src/services/format';
+	export { dateFormatAliases, formatAuto, formatBoolean, formatDate, formatNumber, formatText, } from '@elastic/eui/src/services/format';
+	export * from '@elastic/eui/src/services/hooks';
 	export { isEvenlyDivisibleBy, isWithinRange } from '@elastic/eui/src/services/number';
 	export { Pager } from '@elastic/eui/src/services/paging';
+	export { calculatePopoverPosition, findPopoverPosition } from '@elastic/eui/src/services/popover';
 	export { Random } from '@elastic/eui/src/services/random';
 	export { getSecureRelForTarget } from '@elastic/eui/src/services/security';
-	export { toSentenceCase, toInitials, slugify } from '@elastic/eui/src/services/string';
-	export type { PropertySort, Direction } from '@elastic/eui/src/services/sort';
-	export { PropertySortType, SortDirectionType, SortDirection, SortableProperties, Comparators, } from '@elastic/eui/src/services/sort';
-	export { calculatePopoverPosition, findPopoverPosition } from '@elastic/eui/src/services/popover';
+	export { Comparators, PropertySortType, SortableProperties, SortDirection, SortDirectionType, } from '@elastic/eui/src/services/sort';
+	export type { Direction, PropertySort } from '@elastic/eui/src/services/sort';
+	export { slugify, toInitials, toSentenceCase } from '@elastic/eui/src/services/string';
+	export * from '@elastic/eui/src/services/theme';
+	export { throttle } from '@elastic/eui/src/services/throttle';
 	export { getDurationAndPerformOnFrame, getTransitionTimings, getWaitDuration, performOnFrame, } from '@elastic/eui/src/services/transition';
 	export { EuiWindowEvent } from '@elastic/eui/src/services/window_event';
-	export * from '@elastic/eui/src/services/hooks';
-	export { throttle } from '@elastic/eui/src/services/throttle';
-	export * from '@elastic/eui/src/services/theme';
+	export { keys };
 
 }
 declare module '@elastic/eui/src/global_styling/mixins/_color' {