@elastic/eui 88.5.1 → 88.5.3

package/eui.d.ts

@@ -8032,6 +8032,40 @@ declare module '@elastic/eui/src/services/breakpoint' {
 	export * from '@elastic/eui/src/services/breakpoint/current_breakpoint_hook';
 	export * from '@elastic/eui/src/services/breakpoint/is_within_hooks';
 
+}
+declare module '@elastic/eui/src/services/canvas/canvas_text_utils' {
+	import type { ExclusiveUnion } from '@elastic/eui/src/components/common';
+	export type CanvasTextParams = ExclusiveUnion<{
+	    container: HTMLElement;
+	}, {
+	    font: CanvasTextDrawingStyles['font'];
+	}>;
+	/**
+	 * Creates a temporary Canvas element for manipulating text & determining text width.
+	 *
+	 * To accurately measure text, canvas rendering requires either a container to
+	 * compute/derive font styles from, or a static font string (useful for usage
+	 * outside the DOM). Particular care should be applied when fallback fonts are
+	 * used, as more fallback fonts can lead to less precision.
+	 *
+	 * Please note that while canvas is more significantly more performant than DOM
+	 * measurement, there are subpixel to single digit pixel differences between
+	 * DOM and canvas measurement due to the different rendering engines used.
+	 */
+	export class CanvasTextUtils {
+	    context: CanvasRenderingContext2D;
+	    currentText: string;
+	    constructor({ font, container }: CanvasTextParams);
+	    computeFontFromElement: (element: HTMLElement) => string;
+	    get textWidth(): number;
+	    setTextToCheck: (text: string) => void;
+	}
+
+}
+declare module '@elastic/eui/src/services/canvas' {
+	export { CanvasTextUtils } from '@elastic/eui/src/services/canvas/canvas_text_utils';
+	export type { CanvasTextParams } from '@elastic/eui/src/services/canvas/canvas_text_utils';
+
 }
 declare module '@elastic/eui/src/services/color_picker/color_picker' {
 	interface colorStopsType {
@@ -8470,6 +8504,7 @@ declare module '@elastic/eui/src/services' {
 	export type { HorizontalAlignment } 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 { CanvasTextUtils, type CanvasTextParams } from '@elastic/eui/src/services/canvas';
 	export { brighten, calculateContrast, calculateLuminance, colorPalette, darken, DEFAULT_VISUALIZATION_COLOR, desaturate, euiPaletteColorBlind, euiPaletteColorBlindBehindText, euiPaletteComplimentary, euiPaletteComplementary, 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 { useColorPickerState, useColorStopsState } from '@elastic/eui/src/services/color_picker';
@@ -11447,36 +11482,11 @@ declare module '@elastic/eui/src/components/filter_group/filter_select_item' {
 
 }
 declare module '@elastic/eui/src/components/text_truncate/utils' {
-	import type { ExclusiveUnion } from '@elastic/eui/src/components/common'; type CanvasTextParams = ExclusiveUnion<{
-	    container: HTMLElement;
-	}, {
-	    font: CanvasTextDrawingStyles['font'];
-	}>; type TruncationParams = CanvasTextParams & {
+	import { CanvasTextParams, CanvasTextUtils } from '@elastic/eui/src/services/canvas'; type TruncationParams = CanvasTextParams & {
 	    fullText: string;
 	    ellipsis: string;
 	    availableWidth: number;
 	};
-	/**
-	 * Under the hood, a temporary Canvas element is created for manipulating text
-	 * & determining text width.
-	 *
-	 * To accurately measure text, canvas rendering requires either a container to
-	 * compute/derive font styles from, or a static font string (useful for usage
-	 * outside the DOM). Particular care should be applied when fallback fonts are
-	 * used, as more fallback fonts can lead to less precision.
-	 *
-	 * Please note that while canvas is more significantly more performant than DOM
-	 * measurement, there are subpixel to single digit pixel differences between
-	 * DOM and canvas measurement due to the different rendering engines used.
-	 */
-	export class CanvasTextUtils {
-	    context: CanvasRenderingContext2D;
-	    currentText: string;
-	    constructor({ font, container }: CanvasTextParams);
-	    computeFontFromElement: (element: HTMLElement) => string;
-	    get textWidth(): number;
-	    setTextToCheck: (text: string) => void;
-	}
 	/**
 	 * Utilities for truncating types at various positions, as well as
 	 * determining whether truncation is possible or even necessary.
@@ -11608,7 +11618,7 @@ declare module '@elastic/eui/src/components/text_truncate/text_truncate' {
 declare module '@elastic/eui/src/components/text_truncate' {
 	export type { EuiTextTruncateProps, EuiTextTruncationTypes, } from '@elastic/eui/src/components/text_truncate/text_truncate';
 	export { EuiTextTruncate } from '@elastic/eui/src/components/text_truncate/text_truncate';
-	export { CanvasTextUtils, TruncationUtils } from '@elastic/eui/src/components/text_truncate/utils';
+	export { TruncationUtils } from '@elastic/eui/src/components/text_truncate/utils';
 
 }
 declare module '@elastic/eui/src/components/combo_box/types' {
@@ -11680,7 +11690,7 @@ declare module '@elastic/eui/src/components/combo_box/combo_box_input/combo_box_
 
 }
 declare module '@elastic/eui/src/components/combo_box/combo_box_input/combo_box_input' {
-	import React, { Component, ChangeEventHandler, FocusEventHandler, KeyboardEventHandler, RefCallback } from 'react';
+	import React, { Component, FocusEventHandler, KeyboardEventHandler, RefCallback } from 'react';
 	import { CommonProps } from '@elastic/eui/src/components/common';
 	import { htmlIdGenerator } from '@elastic/eui/src/services';
 	import { EuiFormControlLayoutProps } from '@elastic/eui/src/components/form/form_control_layout';
@@ -11696,9 +11706,9 @@ declare module '@elastic/eui/src/components/combo_box/combo_box_input/combo_box_
 	    isListOpen: boolean;
 	    noIcon: boolean;
 	    onBlur?: FocusEventHandler<HTMLInputElement>;
-	    onChange?: (searchValue: string) => void;
+	    onChange: (searchValue: string) => void;
 	    onClear?: () => void;
-	    onClick?: () => void;
+	    onClick: () => void;
 	    onCloseListClick: () => void;
 	    onFocus: FocusEventHandler<HTMLInputElement>;
 	    onOpenListClick: () => void;
@@ -11733,7 +11743,6 @@ declare module '@elastic/eui/src/components/combo_box/combo_box_input/combo_box_
 	    onBlur: FocusEventHandler<HTMLInputElement>;
 	    onKeyDown: KeyboardEventHandler<HTMLInputElement>;
 	    componentDidUpdate(prevProps: EuiComboBoxInputProps<T>): void;
-	    inputOnChange: ChangeEventHandler<HTMLInputElement>;
 	    render(): React.JSX.Element;
 	}
 	export {};

package/lib/components/combo_box/combo_box_input/combo_box_input.js

@@ -8,7 +8,6 @@ var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _services = require("../../../services");
-var _text_truncate = require("../../text_truncate");
 var _accessibility = require("../../accessibility");
 var _form_control_layout = require("../../form/form_control_layout");
 var _num_icons = require("../../form/form_control_layout/_num_icons");
@@ -58,7 +57,7 @@ var EuiComboBoxInput = /*#__PURE__*/function (_Component) {
     _defineProperty(_assertThisInitialized(_this), "widthUtils", void 0);
     _defineProperty(_assertThisInitialized(_this), "inputRefCallback", function (el) {
       var _this$props$inputRef, _this$props;
-      _this.widthUtils = new _text_truncate.CanvasTextUtils({
+      _this.widthUtils = new _services.CanvasTextUtils({
         container: el
       });
       (_this$props$inputRef = (_this$props = _this.props).inputRef) === null || _this$props$inputRef === void 0 ? void 0 : _this$props$inputRef.call(_this$props, el);
@@ -112,56 +111,51 @@ var EuiComboBoxInput = /*#__PURE__*/function (_Component) {
         }
       }
     });
-    _defineProperty(_assertThisInitialized(_this), "inputOnChange", function (event) {
-      var _this$props$onChange, _this$props3;
-      var value = event.target.value;
-      _this.updateInputSize(value);
-      (_this$props$onChange = (_this$props3 = _this.props).onChange) === null || _this$props$onChange === void 0 ? void 0 : _this$props$onChange.call(_this$props3, value);
-    });
     return _this;
   }
   _createClass(EuiComboBoxInput, [{
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps) {
-      var searchValue = prevProps.searchValue;
+      if (prevProps.searchValue !== this.props.searchValue) {
+        this.updateInputSize(this.props.searchValue);
 
-      // We need to update the position of everything if the user enters enough input to change
-      // the size of the input.
-      if (searchValue !== this.props.searchValue) {
+        // We need to update the position of everything if the user enters enough input to change
+        // the size of the input.
         this.updatePosition();
       }
     }
   }, {
     key: "render",
     value: function render() {
-      var _this$props4 = this.props,
-        compressed = _this$props4.compressed,
-        focusedOptionId = _this$props4.focusedOptionId,
-        fullWidth = _this$props4.fullWidth,
-        hasSelectedOptions = _this$props4.hasSelectedOptions,
-        id = _this$props4.id,
-        isDisabled = _this$props4.isDisabled,
-        isListOpen = _this$props4.isListOpen,
-        noIcon = _this$props4.noIcon,
-        onClear = _this$props4.onClear,
-        onClick = _this$props4.onClick,
-        onCloseListClick = _this$props4.onCloseListClick,
-        onOpenListClick = _this$props4.onOpenListClick,
-        onRemoveOption = _this$props4.onRemoveOption,
-        placeholder = _this$props4.placeholder,
-        rootId = _this$props4.rootId,
-        searchValue = _this$props4.searchValue,
-        selectedOptions = _this$props4.selectedOptions,
-        singleSelectionProp = _this$props4.singleSelection,
-        toggleButtonRef = _this$props4.toggleButtonRef,
-        value = _this$props4.value,
-        prepend = _this$props4.prepend,
-        append = _this$props4.append,
-        isLoading = _this$props4.isLoading,
-        isInvalid = _this$props4.isInvalid,
-        autoFocus = _this$props4.autoFocus,
-        ariaLabel = _this$props4['aria-label'],
-        ariaLabelledby = _this$props4['aria-labelledby'];
+      var _this$props3 = this.props,
+        compressed = _this$props3.compressed,
+        focusedOptionId = _this$props3.focusedOptionId,
+        fullWidth = _this$props3.fullWidth,
+        hasSelectedOptions = _this$props3.hasSelectedOptions,
+        id = _this$props3.id,
+        isDisabled = _this$props3.isDisabled,
+        isListOpen = _this$props3.isListOpen,
+        noIcon = _this$props3.noIcon,
+        _onChange = _this$props3.onChange,
+        onClear = _this$props3.onClear,
+        onClick = _this$props3.onClick,
+        onCloseListClick = _this$props3.onCloseListClick,
+        onOpenListClick = _this$props3.onOpenListClick,
+        onRemoveOption = _this$props3.onRemoveOption,
+        placeholder = _this$props3.placeholder,
+        rootId = _this$props3.rootId,
+        searchValue = _this$props3.searchValue,
+        selectedOptions = _this$props3.selectedOptions,
+        singleSelectionProp = _this$props3.singleSelection,
+        toggleButtonRef = _this$props3.toggleButtonRef,
+        value = _this$props3.value,
+        prepend = _this$props3.prepend,
+        append = _this$props3.append,
+        isLoading = _this$props3.isLoading,
+        isInvalid = _this$props3.isInvalid,
+        autoFocus = _this$props3.autoFocus,
+        ariaLabel = _this$props3['aria-label'],
+        ariaLabelledby = _this$props3['aria-labelledby'];
       var singleSelection = Boolean(singleSelectionProp);
       var asPlainText = singleSelectionProp && _typeof(singleSelectionProp) === 'object' && singleSelectionProp.asPlainText || false;
       var pills = selectedOptions ? selectedOptions.map(function (option) {
@@ -266,7 +260,9 @@ var EuiComboBoxInput = /*#__PURE__*/function (_Component) {
         disabled: isDisabled,
         id: id,
         onBlur: this.onBlur,
-        onChange: this.inputOnChange,
+        onChange: function onChange(event) {
+          return _onChange(event.target.value);
+        },
         onFocus: this.onFocus,
         onKeyDown: this.onKeyDown,
         ref: this.inputRefCallback,
@@ -293,9 +289,9 @@ EuiComboBoxInput.propTypes = {
   isListOpen: _propTypes.default.bool.isRequired,
   noIcon: _propTypes.default.bool.isRequired,
   onBlur: _propTypes.default.any,
-  onChange: _propTypes.default.func,
+  onChange: _propTypes.default.func.isRequired,
   onClear: _propTypes.default.func,
-  onClick: _propTypes.default.func,
+  onClick: _propTypes.default.func.isRequired,
   onCloseListClick: _propTypes.default.func.isRequired,
   onFocus: _propTypes.default.any.isRequired,
   onOpenListClick: _propTypes.default.func.isRequired,

package/lib/components/text_truncate/index.js

@@ -3,12 +3,6 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "CanvasTextUtils", {
-  enumerable: true,
-  get: function get() {
-    return _utils.CanvasTextUtils;
-  }
-});
 Object.defineProperty(exports, "EuiTextTruncate", {
   enumerable: true,
   get: function get() {

package/lib/components/text_truncate/text_truncate.js

@@ -13,7 +13,7 @@ var _resize_observer = require("../observer/resize_observer");
 var _utils = require("./utils");
 var _text_truncate = require("./text_truncate.styles");
 var _react2 = require("@emotion/react");
-var _excluded = ["width"],
+var _excluded = ["width", "onResize"],
   _excluded2 = ["width", "children", "text", "truncation", "truncationOffset", "truncationPosition", "ellipsis", "containerRef", "className"],
   _excluded3 = ["onResize"];
 /*
@@ -38,10 +38,13 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 var TRUNCATION_TYPES = ['end', 'start', 'startEnd', 'middle'];
 var EuiTextTruncate = function EuiTextTruncate(_ref) {
   var width = _ref.width,
+    onResize = _ref.onResize,
     props = _objectWithoutProperties(_ref, _excluded);
   return width != null ? (0, _react2.jsx)(EuiTextTruncateWithWidth, _extends({
     width: width
-  }, props)) : (0, _react2.jsx)(EuiTextTruncateWithResizeObserver, props);
+  }, props)) : (0, _react2.jsx)(EuiTextTruncateWithResizeObserver, _extends({
+    onResize: onResize
+  }, props));
 };
 exports.EuiTextTruncate = EuiTextTruncate;
 EuiTextTruncate.propTypes = {