@elastic/eui 88.0.0 → 88.1.0

package/es/components/collapsible_nav_beta/collapsible_nav_beta.js

@@ -1,5 +1,5 @@
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-var _excluded = ["id", "children", "className", "style", "initialIsCollapsed", "width", "side", "focusTrapProps"];
+var _excluded = ["id", "children", "className", "style", "initialIsCollapsed", "onCollapseToggle", "width", "side", "focusTrapProps"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -45,6 +45,7 @@ export var EuiCollapsibleNavBeta = function EuiCollapsibleNavBeta(_ref) {
     style = _ref.style,
     _ref$initialIsCollaps = _ref.initialIsCollapsed,
     initialIsCollapsed = _ref$initialIsCollaps === void 0 ? false : _ref$initialIsCollaps,
+    onCollapseToggle = _ref.onCollapseToggle,
     _ref$width = _ref.width,
     _width = _ref$width === void 0 ? 248 : _ref$width,
     _ref$side = _ref.side,
@@ -63,9 +64,10 @@ export var EuiCollapsibleNavBeta = function EuiCollapsibleNavBeta(_ref) {
     setIsCollapsed = _useState2[1];
   var toggleCollapsed = useCallback(function () {
     return setIsCollapsed(function (isCollapsed) {
+      onCollapseToggle === null || onCollapseToggle === void 0 ? void 0 : onCollapseToggle(!isCollapsed);
       return !isCollapsed;
     });
-  }, []);
+  }, [onCollapseToggle]);
   var onClose = useCallback(function () {
     return setIsCollapsed(true);
   }, []);
@@ -202,6 +204,11 @@ EuiCollapsibleNavBeta.propTypes = {
        * Whether the navigation flyout should default to initially collapsed or expanded
        */
   initialIsCollapsed: PropTypes.bool,
+  /**
+       * Optional callback that fires when the user toggles the nav between
+       * collapsed and uncollapsed states
+       */
+  onCollapseToggle: PropTypes.func,
   /**
        * Defaults to 248px wide. The navigation width determines behavior at
        * various responsive breakpoints.

package/es/components/datagrid/controls/keyboard_shortcuts.js

@@ -59,6 +59,7 @@ export var useDataGridKeyboardShortcuts = function useDataGridKeyboardShortcuts(
     }, ___EmotionJSX(EuiDescriptionList, {
       "aria-labelledby": titleId,
       type: "column",
+      columnWidths: [1, 3],
       align: "center",
       compressed: true,
       listItems: [{

package/es/components/description_list/description_list.js

@@ -1,5 +1,11 @@
-var _excluded = ["align", "children", "className", "compressed", "descriptionProps", "listItems", "textStyle", "titleProps", "type", "rowGutterSize", "columnGutterSize"];
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+var _excluded = ["align", "children", "className", "style", "compressed", "descriptionProps", "listItems", "textStyle", "titleProps", "type", "rowGutterSize", "columnGutterSize", "columnWidths"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 /*
@@ -24,6 +30,7 @@ export var EuiDescriptionList = function EuiDescriptionList(_ref) {
     align = _ref$align === void 0 ? 'left' : _ref$align,
     children = _ref.children,
     className = _ref.className,
+    style = _ref.style,
     _ref$compressed = _ref.compressed,
     compressed = _ref$compressed === void 0 ? false : _ref$compressed,
     descriptionProps = _ref.descriptionProps,
@@ -37,6 +44,7 @@ export var EuiDescriptionList = function EuiDescriptionList(_ref) {
     rowGutterSize = _ref$rowGutterSize === void 0 ? 's' : _ref$rowGutterSize,
     _ref$columnGutterSize = _ref.columnGutterSize,
     columnGutterSize = _ref$columnGutterSize === void 0 ? 's' : _ref$columnGutterSize,
+    columnWidths = _ref.columnWidths,
     rest = _objectWithoutProperties(_ref, _excluded);
   var showResponsiveColumns = useIsWithinBreakpoints(['xs', 's']);
   var type = useMemo(function () {
@@ -49,6 +57,20 @@ export var EuiDescriptionList = function EuiDescriptionList(_ref) {
   var euiTheme = useEuiTheme();
   var styles = euiDescriptionListStyles(euiTheme);
   var cssStyles = [styles.euiDescriptionList, styles[type], styles[align], type === 'column' && styles.rowGap[rowGutterSize], type === 'column' && styles.columnGap[columnGutterSize]];
+  var inlineStyles = useMemo(function () {
+    if (type === 'column' && columnWidths) {
+      // Leave string values as is - e.g. if a consumer passes in a specific '200px' or 'minmax()'
+      var convertNumbersToFr = function convertNumbersToFr(value) {
+        return typeof value === 'number' ? "".concat(value, "fr") : value;
+      };
+      var titleWidth = convertNumbersToFr(columnWidths[0]);
+      var descriptionWidth = convertNumbersToFr(columnWidths[1]);
+      return _objectSpread({
+        gridTemplateColumns: "".concat(titleWidth, " ").concat(descriptionWidth)
+      }, style);
+    }
+    return style;
+  }, [style, type, columnWidths]);
   var classes = classNames('euiDescriptionList', className);
   var childrenOrListItems = null;
   if (listItems) {
@@ -72,7 +94,8 @@ export var EuiDescriptionList = function EuiDescriptionList(_ref) {
     }
   }, ___EmotionJSX("dl", _extends({
     className: classes,
-    css: cssStyles
+    css: cssStyles,
+    style: inlineStyles
   }, rest, {
     "data-type": _type
   }), childrenOrListItems));
@@ -130,5 +153,19 @@ EuiDescriptionList.propTypes = {
      *
      * Only applies to `column` and `responsiveColumn` types.
      */
-  columnGutterSize: PropTypes.any
+  columnGutterSize: PropTypes.any,
+  /**
+     * Allows customizing specific column widths (e.g. `['100px', '200px']`). The first
+     * array value applies to the title column, and the second applies to the description column.
+     *
+     * Passing numbers instead of CSS width strings will use a ratio of widths.
+     * For example, [1, 3] will render a description column 3x the width of the title column.
+     * In other words, descriptions will have a width of `75%` and titles will have a width of `25%`.
+     *
+     * Only applies to `column` and `responsiveColumn` types.
+     *
+     * _Advanced usage note:_ column width strings also accept [CSS grid special units,
+     * sizing, keywords, and sizing functions](https://css-tricks.com/snippets/css/complete-guide-grid/#aa-special-units-functions).
+     */
+  columnWidths: PropTypes.any
 };

package/es/components/markdown_editor/markdown_format.styles.js

@@ -17,8 +17,8 @@ var euiScaleMarkdownFormatText = function euiScaleMarkdownFormatText(euiTheme, o
   var _euiFontSize = euiFontSize(euiTheme, 'm', options),
     fontSize = _euiFontSize.fontSize,
     lineHeight = _euiFontSize.lineHeight;
-  var measurement = options.measurement;
-  var lineHeightSize = measurement === 'em' ? "".concat(lineHeight, "em") : lineHeight;
+  var unit = options.unit;
+  var lineHeightSize = unit === 'em' ? "".concat(lineHeight, "em") : lineHeight;
 
   // Custom scales
   var tablePaddingVertical = mathWithUnits(fontSize, function (x) {
@@ -39,19 +39,16 @@ export var euiMarkdownFormatStyles = function euiMarkdownFormatStyles(euiTheme)
     euiMarkdownFormat: /*#__PURE__*/css(";label:euiMarkdownFormat;"),
     // Text sizes
     m: /*#__PURE__*/css(euiScaleMarkdownFormatText(euiTheme, {
-      measurement: 'rem',
       customScale: 'm'
     }), ";;label:m;"),
     s: /*#__PURE__*/css(euiScaleMarkdownFormatText(euiTheme, {
-      measurement: 'rem',
       customScale: 's'
     }), ";;label:s;"),
     xs: /*#__PURE__*/css(euiScaleMarkdownFormatText(euiTheme, {
-      measurement: 'rem',
       customScale: 'xs'
     }), ";;label:xs;"),
     relative: /*#__PURE__*/css(euiScaleMarkdownFormatText(euiTheme, {
-      measurement: 'em'
+      unit: 'em'
     }), ";;label:relative;")
   };
 };

package/es/components/text/text.styles.js

@@ -33,9 +33,9 @@ var euiScaleText = function euiScaleText(euiThemeContext, options) {
     fontSize = _euiFontSize.fontSize,
     lineHeight = _euiFontSize.lineHeight;
   var euiTheme = euiThemeContext.euiTheme;
-  var measurement = options.measurement,
+  var unit = options.unit,
     _customScale = options.customScale;
-  var lineHeightSize = measurement === 'em' ? "".concat(lineHeight, "em") : lineHeight;
+  var lineHeightSize = unit === 'em' ? "".concat(lineHeight, "em") : lineHeight;
   var headings = {
     h1: euiTitle(euiThemeContext, 'l', options),
     h2: euiTitle(euiThemeContext, 'm', options),
@@ -71,19 +71,16 @@ export var euiTextStyles = function euiTextStyles(euiThemeContext) {
     constrainedWidth: /*#__PURE__*/css(logicalCSS('max-width', euiTextConstrainedMaxWidth), ";;label:constrainedWidth;"),
     // Sizes
     m: /*#__PURE__*/css(euiScaleText(euiThemeContext, {
-      measurement: 'rem',
       customScale: 'm'
     }), ";;label:m;"),
     s: /*#__PURE__*/css(euiScaleText(euiThemeContext, {
-      measurement: 'rem',
       customScale: 's'
     }), ";;label:s;"),
     xs: /*#__PURE__*/css(euiScaleText(euiThemeContext, {
-      measurement: 'rem',
       customScale: 'xs'
     }), ";;label:xs;"),
     relative: /*#__PURE__*/css(euiScaleText(euiThemeContext, {
-      measurement: 'em'
+      unit: 'em'
     }), ";;label:relative;")
   };
 };

package/es/global_styling/functions/typography.js

@@ -20,16 +20,16 @@ export function euiFontSizeFromScale(scale, _ref) {
   var base = _ref.base,
     font = _ref.font;
   var _ref2 = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {},
-    _ref2$measurement = _ref2.measurement,
-    measurement = _ref2$measurement === void 0 ? 'rem' : _ref2$measurement,
+    _ref2$unit = _ref2.unit,
+    unit = _ref2$unit === void 0 ? font.defaultUnits : _ref2$unit,
     customScale = _ref2.customScale;
-  if (measurement === 'em') {
+  if (unit === 'em') {
     return "".concat(font.scale[scale], "em");
   }
   var numerator = base * font.scale[scale];
   if (customScale) numerator *= font.scale[customScale];
   var denominator = base * font.scale[font.body.scale];
-  return measurement === 'px' ? "".concat(numerator, "px") : "".concat((numerator / denominator).toFixed(4), "rem");
+  return unit === 'px' ? "".concat(numerator, "px") : "".concat((numerator / denominator).toFixed(4), "rem");
 }
 
 /**
@@ -48,8 +48,8 @@ export function euiLineHeightFromBaseline(scale, _ref3) {
   var base = _ref3.base,
     font = _ref3.font;
   var _ref4 = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {},
-    _ref4$measurement = _ref4.measurement,
-    measurement = _ref4$measurement === void 0 ? 'rem' : _ref4$measurement,
+    _ref4$unit = _ref4.unit,
+    unit = _ref4$unit === void 0 ? font.defaultUnits : _ref4$unit,
     customScale = _ref4.customScale;
   var baseline = font.baseline,
     lineHeightMultiplier = font.lineHeightMultiplier;
@@ -57,13 +57,13 @@ export function euiLineHeightFromBaseline(scale, _ref3) {
   if (customScale) numerator *= font.scale[customScale];
   var denominator = base * font.scale[font.body.scale];
   var _lineHeightMultiplier = numerator <= base ? lineHeightMultiplier : lineHeightMultiplier * 0.833;
-  if (measurement === 'em') {
+  if (unit === 'em') {
     // Even though the line-height via `em` cannot be determined against the pixel baseline grid;
     // we will assume that typically larger scale font-sizes should have a shorter line-height;
     return _lineHeightMultiplier.toFixed(4).toString();
   }
   var pixelValue = Math.floor(Math.round(numerator * _lineHeightMultiplier) / baseline) * baseline;
-  return measurement === 'px' ? "".concat(pixelValue, "px") : "".concat((pixelValue / denominator).toFixed(4), "rem");
+  return unit === 'px' ? "".concat(pixelValue, "px") : "".concat((pixelValue / denominator).toFixed(4), "rem");
 }
 
 /**

package/es/global_styling/variables/typography.js

@@ -10,7 +10,7 @@
  * Font units of measure
  */
 
-export var EuiThemeFontSizeMeasurements = ['rem', 'px', 'em'];
+export var EuiThemeFontUnits = ['rem', 'px', 'em'];
 /*
  * Font scale
  */

package/es/themes/amsterdam/global_styling/variables/_typography.js

@@ -38,6 +38,7 @@ export var fontBase = {
   familySerif: 'Georgia, Times, Times New Roman, serif',
   // Careful using ligatures. Code editors like ACE will often error because of width calculations
   featureSettings: "'calt' 1, 'kern' 1, 'liga' 1",
+  defaultUnits: 'rem',
   baseline: computed(function (_ref) {
     var _ref2 = _slicedToArray(_ref, 1),
       base = _ref2[0];

package/eui.d.ts

@@ -514,8 +514,8 @@ declare module '@elastic/eui/src/global_styling/variables/typography' {
 	/**
 	 * Font units of measure
 	 */
-	export const EuiThemeFontSizeMeasurements: readonly ["rem", "px", "em"];
-	export type _EuiThemeFontSizeMeasurement = (typeof EuiThemeFontSizeMeasurements)[number];
+	export const EuiThemeFontUnits: readonly ["rem", "px", "em"];
+	export type _EuiThemeFontUnit = (typeof EuiThemeFontUnits)[number];
 	export const EuiThemeFontScales: readonly ["xxxs", "xxs", "xs", "s", "m", "l", "xl", "xxl"];
 	export type _EuiThemeFontScale = (typeof EuiThemeFontScales)[number];
 	export type _EuiThemeFontScales = Record<_EuiThemeFontScale, number>;
@@ -538,6 +538,16 @@ declare module '@elastic/eui/src/global_styling/variables/typography' {
 	     * https://developer.mozilla.org/en-US/docs/Web/CSS/font-feature-settings
 	     */
 	    featureSettings?: string;
+	    /**
+	     * Sets the default units used for font size & line height set by UI components
+	     * like EuiText or EuiTitle. Defaults to `rem`.
+	     *
+	     * NOTE: This may overridden by some internal usages, e.g.
+	     * EuiText's `relative` size which must use `em`.
+	     *
+	     * @default 'rem'
+	     */
+	    defaultUnits: _EuiThemeFontUnit;
 	    /**
 	     * A computed number that is 1/4 of `base`
 	     */
@@ -1359,13 +1369,13 @@ declare module '@elastic/eui/src/services/theme/hooks' {
 
 }
 declare module '@elastic/eui/src/global_styling/functions/typography' {
-	import { _EuiThemeFontScale, _EuiThemeFontSizeMeasurement, _EuiThemeFontWeights } from '@elastic/eui/src/global_styling/variables/typography';
+	import { _EuiThemeFontScale, _EuiThemeFontUnit, _EuiThemeFontWeights } from '@elastic/eui/src/global_styling/variables/typography';
 	import { UseEuiTheme } from '@elastic/eui/src/services/theme/hooks';
 	export interface _FontScaleOptions {
 	    /**
-	     * The returned string measurement
+	     * The font-size or line-height unit to return
 	     */
-	    measurement?: _EuiThemeFontSizeMeasurement;
+	    unit?: _EuiThemeFontUnit;
 	    /**
 	     * An additional custom scale multiplier to use against the current scale
 	     * This parameter can be used (e.g. by EuiText sizes) to get sizes of text smaller than the default
@@ -1380,7 +1390,7 @@ declare module '@elastic/eui/src/global_styling/functions/typography' {
 	 *
 	 * @returns string - Calculated font-size value
 	 */
-	export function euiFontSizeFromScale(scale: _EuiThemeFontScale, { base, font }: UseEuiTheme['euiTheme'], { measurement, customScale }?: _FontScaleOptions): string;
+	export function euiFontSizeFromScale(scale: _EuiThemeFontScale, { base, font }: UseEuiTheme['euiTheme'], { unit, customScale }?: _FontScaleOptions): string;
 	/**
 	 * Calculates the line-height to the closest multiple of the baseline
 	 * EX: A proper line-height for text is 1.5 times the font-size.
@@ -1392,7 +1402,7 @@ declare module '@elastic/eui/src/global_styling/functions/typography' {
 	 *
 	 * @returns string - Calculated line-height value aligned to baseline
 	 */
-	export function euiLineHeightFromBaseline(scale: _EuiThemeFontScale, { base, font }: UseEuiTheme['euiTheme'], { measurement, customScale }?: _FontScaleOptions): string;
+	export function euiLineHeightFromBaseline(scale: _EuiThemeFontScale, { base, font }: UseEuiTheme['euiTheme'], { unit, customScale }?: _FontScaleOptions): string;
 	/**
 	 * Text weight shifting
 	 *
@@ -10580,6 +10590,11 @@ declare module '@elastic/eui/src/components/collapsible_nav_beta/collapsible_nav
 	     * Whether the navigation flyout should default to initially collapsed or expanded
 	     */
 	    initialIsCollapsed?: boolean;
+	    /**
+	     * Optional callback that fires when the user toggles the nav between
+	     * collapsed and uncollapsed states
+	     */
+	    onCollapseToggle?: (isCollapsed: boolean) => void;
 	    /**
 	     * Defaults to 248px wide. The navigation width determines behavior at
 	     * various responsive breakpoints.
@@ -14206,6 +14221,20 @@ declare module '@elastic/eui/src/components/description_list/description_list_ty
 	     * Only applies to `column` and `responsiveColumn` types.
 	     */
 	    columnGutterSize?: EuiDescriptionListColumnGapSizes;
+	    /**
+	     * Allows customizing specific column widths (e.g. `['100px', '200px']`). The first
+	     * array value applies to the title column, and the second applies to the description column.
+	     *
+	     * Passing numbers instead of CSS width strings will use a ratio of widths.
+	     * For example, [1, 3] will render a description column 3x the width of the title column.
+	     * In other words, descriptions will have a width of `75%` and titles will have a width of `25%`.
+	     *
+	     * Only applies to `column` and `responsiveColumn` types.
+	     *
+	     * _Advanced usage note:_ column width strings also accept [CSS grid special units,
+	     * sizing, keywords, and sizing functions](https://css-tricks.com/snippets/css/complete-guide-grid/#aa-special-units-functions).
+	     */
+	    columnWidths?: [number | string, number | string];
 	}
 	export const CHILD_TYPES: readonly ["row", "inline", "column"];
 	export type EuiDescriptionListChildTypes = (typeof CHILD_TYPES)[number];