@elastic/eui 68.0.0 → 70.0.0

package/es/components/code/code_block.js

@@ -33,22 +33,17 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-import React, { forwardRef, useEffect, useMemo, useState, useCallback } from 'react';
+import React, { useMemo } from 'react';
 import PropTypes from "prop-types";
 import classNames from 'classnames';
-import { FixedSizeList } from 'react-window';
-import { keys, useCombinedRefs } from '../../services';
-import { EuiAutoSizer } from '../auto_sizer';
-import { EuiButtonIcon } from '../button';
-import { keysOf } from '../common';
-import { EuiCopy } from '../copy';
-import { EuiFocusTrap } from '../focus_trap';
-import { useEuiI18n } from '../i18n';
-import { useInnerText } from '../inner_text';
-import { useMutationObserver } from '../observer/mutation_observer';
-import { useResizeObserver } from '../observer/resize_observer';
-import { EuiOverlayMask } from '../overlay_mask';
-import { DEFAULT_LANGUAGE, checkSupportedLanguage, getHtmlContent, nodeToHtml, highlightByLine } from './utils'; // Based on observed line height for non-virtualized code blocks
+import { useCombinedRefs, useEuiTheme } from '../../services';
+import { DEFAULT_LANGUAGE, checkSupportedLanguage, getHtmlContent, highlightByLine } from './utils';
+import { useOverflow } from './code_block_overflow';
+import { useCopy } from './code_block_copy';
+import { useFullScreen, EuiCodeBlockFullScreenWrapper } from './code_block_full_screen';
+import { EuiCodeBlockControls } from './code_block_controls';
+import { EuiCodeBlockVirtualized } from './code_block_virtualized';
+import { euiCodeBlockStyles, euiCodeBlockPreStyles, euiCodeBlockCodeStyles } from './code_block.styles'; // Based on observed line height for non-virtualized code blocks
 
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var fontSizeToRowHeightMap = {
@@ -56,20 +51,8 @@ var fontSizeToRowHeightMap = {
   m: 21,
   l: 24
 };
-var fontSizeToClassNameMap = {
-  s: 'euiCodeBlock--fontSmall',
-  m: 'euiCodeBlock--fontMedium',
-  l: 'euiCodeBlock--fontLarge'
-};
-export var FONT_SIZES = keysOf(fontSizeToClassNameMap);
-var paddingSizeToClassNameMap = {
-  none: '',
-  s: 'euiCodeBlock--paddingSmall',
-  m: 'euiCodeBlock--paddingMedium',
-  l: 'euiCodeBlock--paddingLarge'
-};
-export var PADDING_SIZES = keysOf(paddingSizeToClassNameMap); // This exclusive union enforces specific props based on isVirtualized
-
+export var FONT_SIZES = ['s', 'm', 'l'];
+export var PADDING_SIZES = ['none', 's', 'm', 'l'];
 export var EuiCodeBlock = function EuiCodeBlock(_ref) {
   var _ref$language = _ref.language,
       _language = _ref$language === void 0 ? DEFAULT_LANGUAGE : _ref$language,
@@ -91,6 +74,7 @@ export var EuiCodeBlock = function EuiCodeBlock(_ref) {
       lineNumbers = _ref$lineNumbers === void 0 ? false : _ref$lineNumbers,
       rest = _objectWithoutProperties(_ref, _excluded);
 
+  var euiTheme = useEuiTheme();
   var language = useMemo(function () {
     return checkSupportedLanguage(_language);
   }, [_language]);
@@ -110,8 +94,8 @@ export var EuiCodeBlock = function EuiCodeBlock(_ref) {
       return [];
     }
 
-    return highlightByLine(children, language, lineNumbersConfig);
-  }, [children, language, lineNumbersConfig]); // Used by `pre` when `isVirtualized=false` or `children` is not parsable
+    return highlightByLine(children, language, lineNumbersConfig, euiTheme);
+  }, [children, language, lineNumbersConfig, euiTheme]); // Used by `pre` when `isVirtualized=false` or `children` is not parsable
 
   var content = useMemo(function () {
     return getHtmlContent(data, children);
@@ -126,106 +110,86 @@ export var EuiCodeBlock = function EuiCodeBlock(_ref) {
     children: children
   }),
       innerTextRef = _useCopy.innerTextRef,
-      showCopyButton = _useCopy.showCopyButton,
-      textToCopy = _useCopy.textToCopy;
+      copyButton = _useCopy.copyButton;
 
-  var _useOverflowDetection = useOverflowDetection(),
-      setWrapperRef = _useOverflowDetection.setWrapperRef,
-      tabIndex = _useOverflowDetection.tabIndex;
+  var _useOverflow = useOverflow({
+    overflowHeight: overflowHeight
+  }),
+      setWrapperRef = _useOverflow.setWrapperRef,
+      tabIndex = _useOverflow.tabIndex,
+      overflowHeightStyles = _useOverflow.overflowHeightStyles;
 
   var combinedRef = useCombinedRefs([innerTextRef, setWrapperRef]);
 
   var _useFullScreen = useFullScreen({
     overflowHeight: overflowHeight
   }),
-      showFullScreenButton = _useFullScreen.showFullScreenButton,
-      onKeyDown = _useFullScreen.onKeyDown,
+      fullScreenButton = _useFullScreen.fullScreenButton,
       isFullScreen = _useFullScreen.isFullScreen,
-      toggleFullScreen = _useFullScreen.toggleFullScreen; // Classes used in both fullscreen and non-fullscreen mode
-
-
-  var wrapperClasses = classNames(className, 'euiCodeBlock', {
-    'euiCodeBlock--hasControl': showCopyButton || showFullScreenButton,
-    'euiCodeBlock--hasBothControls': showCopyButton && showFullScreenButton,
-    'euiCodeBlock--hasLineNumbers': lineNumbersConfig.show
-  }); // Classes used in non-fullscreen mode only
+      onKeyDown = _useFullScreen.onKeyDown;
+
+  var hasControls = !!(copyButton || fullScreenButton);
+  var hasBothControls = !!(copyButton && fullScreenButton);
+  var styles = euiCodeBlockStyles(euiTheme);
+  var cssStyles = [styles.euiCodeBlock, styles[fontSize], transparentBackground && styles.transparentBackground, hasControls && (hasBothControls ? styles.hasBothControls[paddingSize] : styles.hasControls[paddingSize])];
+
+  var _useMemo = useMemo(function () {
+    var isWhiteSpacePre = whiteSpace === 'pre' || isVirtualized;
+    var styles = euiCodeBlockPreStyles(euiTheme);
+    var cssStyles = [styles.euiCodeBlock__pre, isWhiteSpacePre ? styles.whiteSpace.pre.pre : styles.whiteSpace.preWrap.preWrap];
+    var preProps = {
+      className: 'euiCodeBlock__pre',
+      css: [].concat(cssStyles, [styles.padding[paddingSize], hasControls && (isWhiteSpacePre ? styles.whiteSpace.pre.controlsOffset[paddingSize] : styles.whiteSpace.preWrap.controlsOffset[paddingSize])]),
+      tabIndex: isVirtualized ? 0 : tabIndex
+    };
+    var preFullscreenProps = {
+      className: 'euiCodeBlock__pre',
+      css: [].concat(cssStyles, [// Force fullscreen to use xl padding
+      styles.padding.xl, hasControls && (isWhiteSpacePre ? styles.whiteSpace.pre.controlsOffset.xl : styles.whiteSpace.preWrap.controlsOffset.xl)]),
+      tabIndex: 0,
+      onKeyDown: onKeyDown
+    };
+    return [preProps, preFullscreenProps];
+  }, [euiTheme, whiteSpace, isVirtualized, hasControls, paddingSize, onKeyDown, tabIndex]),
+      _useMemo2 = _slicedToArray(_useMemo, 2),
+      preProps = _useMemo2[0],
+      preFullscreenProps = _useMemo2[1];
 
-  var classes = classNames(wrapperClasses, fontSizeToClassNameMap[fontSize], paddingSizeToClassNameMap[paddingSize], {
-    'euiCodeBlock--transparentBackground': transparentBackground
-  });
   var codeProps = useMemo(function () {
+    var styles = euiCodeBlockCodeStyles(euiTheme);
+    var cssStyles = [styles.euiCodeBlock__code, isVirtualized && styles.isVirtualized];
     return _objectSpread({
       className: 'euiCodeBlock__code',
+      css: cssStyles,
       'data-code-language': language
     }, rest);
-  }, [language, rest]);
-  var preClasses = classNames('euiCodeBlock__pre', {
-    'euiCodeBlock__pre--whiteSpacePre': whiteSpace === 'pre' || isVirtualized,
-    'euiCodeBlock__pre--whiteSpacePreWrap': whiteSpace === 'pre-wrap' && !isVirtualized,
-    'euiCodeBlock__pre--isVirtualized': isVirtualized
-  });
-  var preFullscreenProps = useMemo(function () {
-    return {
-      className: preClasses,
-      tabIndex: 0,
-      onKeyDown: onKeyDown
-    };
-  }, [preClasses, onKeyDown]);
-  var overflowHeightStyles = useMemo(function () {
-    if (overflowHeight) {
-      var property = typeof overflowHeight === 'string' ? 'height' : 'maxHeight';
-      return _defineProperty({}, property, overflowHeight);
-    }
-
-    return {};
-  }, [overflowHeight]);
-  var wrapperProps = useMemo(function () {
-    return {
-      className: classes,
-      style: overflowHeightStyles
-    };
-  }, [classes, overflowHeightStyles]);
-  var codeBlockControls = useMemo(function () {
-    if (showCopyButton || showFullScreenButton) {
-      return ___EmotionJSX("div", {
-        className: "euiCodeBlock__controls"
-      }, showFullScreenButton && ___EmotionJSX(FullScreenButton, {
-        isFullScreen: isFullScreen,
-        toggleFullScreen: toggleFullScreen
-      }), showCopyButton && ___EmotionJSX(CopyButton, {
-        textToCopy: textToCopy
-      }));
-    }
-  }, [isFullScreen, toggleFullScreen, showCopyButton, showFullScreenButton, textToCopy]);
-  return ___EmotionJSX("div", wrapperProps, isVirtualized ? ___EmotionJSX(VirtualizedCodeBlock, {
+  }, [language, euiTheme, isVirtualized, rest]);
+  return ___EmotionJSX("div", {
+    css: cssStyles,
+    className: classNames('euiCodeBlock', className),
+    style: overflowHeightStyles
+  }, isVirtualized ? ___EmotionJSX(EuiCodeBlockVirtualized, {
     data: data,
     rowHeight: fontSizeToRowHeightMap[fontSize],
     overflowHeight: overflowHeight,
-    preProps: preFullscreenProps // Note: the virtualized codeblock always sets a tabIndex of 0
-    ,
+    preProps: preProps,
     codeProps: codeProps
-  }) : ___EmotionJSX("pre", {
+  }) : ___EmotionJSX("pre", _extends({}, preProps, {
     ref: combinedRef,
-    style: overflowHeightStyles,
-    className: preClasses,
-    tabIndex: tabIndex
-  }, ___EmotionJSX("code", codeProps, content)), codeBlockControls, isFullScreen && ___EmotionJSX(FullScreenDisplay, {
-    className: wrapperClasses
-  }, isVirtualized ? ___EmotionJSX(VirtualizedCodeBlock, {
+    style: overflowHeightStyles
+  }), ___EmotionJSX("code", codeProps, content)), ___EmotionJSX(EuiCodeBlockControls, {
+    controls: [fullScreenButton, copyButton],
+    paddingSize: paddingSize
+  }), isFullScreen && ___EmotionJSX(EuiCodeBlockFullScreenWrapper, null, isVirtualized ? ___EmotionJSX(EuiCodeBlockVirtualized, {
     data: data,
     rowHeight: fontSizeToRowHeightMap.l,
     preProps: preFullscreenProps,
     codeProps: codeProps
-  }) : ___EmotionJSX("pre", preFullscreenProps, ___EmotionJSX("code", codeProps, content)), codeBlockControls));
+  }) : ___EmotionJSX("pre", preFullscreenProps, ___EmotionJSX("code", codeProps, content)), ___EmotionJSX(EuiCodeBlockControls, {
+    controls: [fullScreenButton, copyButton],
+    paddingSize: "l"
+  })));
 };
-/**
- * Overflow logic
- *
- * Detects whether the code block overflows and returns a tabIndex of 0 if so,
- * which allows keyboard users to use the up/down arrow keys to scroll through
- * the container.
- */
-
 EuiCodeBlock.propTypes = {
   className: PropTypes.string,
   "aria-label": PropTypes.string,
@@ -238,8 +202,8 @@ EuiCodeBlock.propTypes = {
        */
   language: PropTypes.string,
   transparentBackground: PropTypes.bool,
-  paddingSize: PropTypes.oneOf(["none", "s", "m", "l"]),
-  fontSize: PropTypes.oneOf(["s", "m", "l"]),
+  paddingSize: PropTypes.any,
+  fontSize: PropTypes.any,
 
   /**
      * Specify how `white-space` inside the element is handled.
@@ -278,211 +242,4 @@ EuiCodeBlock.propTypes = {
      * `whiteSpace` can only be `pre`.
      */
   isVirtualized: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOfType([PropTypes.oneOf([true]).isRequired, PropTypes.oneOf([false])])])
-};
-
-var useOverflowDetection = function useOverflowDetection() {
-  var _useState = useState(null),
-      _useState2 = _slicedToArray(_useState, 2),
-      wrapperRef = _useState2[0],
-      setWrapperRef = _useState2[1];
-
-  var _useState3 = useState(-1),
-      _useState4 = _slicedToArray(_useState3, 2),
-      tabIndex = _useState4[0],
-      setTabIndex = _useState4[1];
-
-  var _useResizeObserver = useResizeObserver(wrapperRef),
-      width = _useResizeObserver.width,
-      height = _useResizeObserver.height;
-
-  var doesOverflow = function doesOverflow() {
-    if (!wrapperRef) return;
-    var clientWidth = wrapperRef.clientWidth,
-        clientHeight = wrapperRef.clientHeight,
-        scrollWidth = wrapperRef.scrollWidth,
-        scrollHeight = wrapperRef.scrollHeight;
-    var doesOverflow = scrollHeight > clientHeight || scrollWidth > clientWidth;
-    setTabIndex(doesOverflow ? 0 : -1);
-  };
-
-  useMutationObserver(wrapperRef, doesOverflow, {
-    subtree: true,
-    childList: true
-  });
-  useEffect(doesOverflow, [width, height, wrapperRef]);
-  return {
-    setWrapperRef: setWrapperRef,
-    tabIndex: tabIndex
-  };
-};
-/**
- * Copy logic
- */
-
-
-var CopyButton = function CopyButton(_ref3) {
-  var textToCopy = _ref3.textToCopy;
-  var copyButton = useEuiI18n('euiCodeBlock.copyButton', 'Copy');
-  return ___EmotionJSX("div", {
-    className: "euiCodeBlock__copyButton"
-  }, ___EmotionJSX(EuiCopy, {
-    textToCopy: textToCopy
-  }, function (copy) {
-    return ___EmotionJSX(EuiButtonIcon, {
-      onClick: copy,
-      iconType: "copyClipboard",
-      color: "text",
-      "aria-label": copyButton
-    });
-  }));
-};
-
-CopyButton.propTypes = {
-  textToCopy: PropTypes.string.isRequired
-};
-
-var useCopy = function useCopy(_ref4) {
-  var isCopyable = _ref4.isCopyable,
-      isVirtualized = _ref4.isVirtualized,
-      children = _ref4.children;
-
-  var _useInnerText = useInnerText(''),
-      _useInnerText2 = _slicedToArray(_useInnerText, 2),
-      innerTextRef = _useInnerText2[0],
-      _innerText = _useInnerText2[1];
-
-  var innerText = useMemo(function () {
-    return (_innerText === null || _innerText === void 0 ? void 0 : _innerText.replace(/[\r\n?]{2}|\n\n/g, '\n')) || '';
-  }, [_innerText]);
-  var textToCopy = isVirtualized ? "".concat(children) : innerText; // Virtualized code blocks do not have inner text
-
-  var showCopyButton = isCopyable && textToCopy;
-  return {
-    innerTextRef: innerTextRef,
-    showCopyButton: showCopyButton,
-    textToCopy: textToCopy
-  };
-};
-/**
- * Fullscreen logic
- */
-
-
-var FullScreenButton = function FullScreenButton(_ref5) {
-  var isFullScreen = _ref5.isFullScreen,
-      toggleFullScreen = _ref5.toggleFullScreen;
-
-  var _useEuiI18n = useEuiI18n(['euiCodeBlock.fullscreenCollapse', 'euiCodeBlock.fullscreenExpand'], ['Collapse', 'Expand']),
-      _useEuiI18n2 = _slicedToArray(_useEuiI18n, 2),
-      fullscreenCollapse = _useEuiI18n2[0],
-      fullscreenExpand = _useEuiI18n2[1];
-
-  return ___EmotionJSX(EuiButtonIcon, {
-    className: "euiCodeBlock__fullScreenButton",
-    onClick: toggleFullScreen,
-    iconType: isFullScreen ? 'fullScreenExit' : 'fullScreen',
-    color: "text",
-    "aria-label": isFullScreen ? fullscreenCollapse : fullscreenExpand
-  });
-};
-
-FullScreenButton.propTypes = {
-  isFullScreen: PropTypes.bool.isRequired,
-  toggleFullScreen: PropTypes.func.isRequired
-};
-
-var FullScreenDisplay = function FullScreenDisplay(_ref6) {
-  var children = _ref6.children,
-      className = _ref6.className;
-  // Force fullscreen to use large font and padding.
-  var fullScreenClasses = classNames(className, 'euiCodeBlock--fontLarge', 'euiCodeBlock--paddingLarge', 'euiCodeBlock-isFullScreen'); // Attaches to the body because of EuiOverlayMask's React portal usage.
-
-  return ___EmotionJSX(EuiOverlayMask, null, ___EmotionJSX(EuiFocusTrap, {
-    clickOutsideDisables: true
-  }, ___EmotionJSX("div", {
-    className: fullScreenClasses
-  }, children)));
-};
-
-FullScreenDisplay.propTypes = {
-  className: PropTypes.string.isRequired
-};
-
-var useFullScreen = function useFullScreen(_ref7) {
-  var overflowHeight = _ref7.overflowHeight;
-
-  var _useState5 = useState(false),
-      _useState6 = _slicedToArray(_useState5, 2),
-      isFullScreen = _useState6[0],
-      setIsFullScreen = _useState6[1];
-
-  var toggleFullScreen = useCallback(function () {
-    setIsFullScreen(function (isFullScreen) {
-      return !isFullScreen;
-    });
-  }, []);
-  var onKeyDown = useCallback(function (event) {
-    if (event.key === keys.ESCAPE) {
-      event.preventDefault();
-      event.stopPropagation();
-      setIsFullScreen(false);
-    }
-  }, []);
-  var showFullScreenButton = !!overflowHeight;
-  return {
-    showFullScreenButton: showFullScreenButton,
-    isFullScreen: isFullScreen,
-    toggleFullScreen: toggleFullScreen,
-    onKeyDown: onKeyDown
-  };
-};
-/**
- * Virtualization logic
- */
-
-
-var ListRow = function ListRow(_ref8) {
-  var data = _ref8.data,
-      index = _ref8.index,
-      style = _ref8.style;
-  var row = data[index];
-  row.properties.style = style;
-  return nodeToHtml(row, index, data, 0);
-};
-
-var VirtualizedCodeBlock = function VirtualizedCodeBlock(_ref9) {
-  var data = _ref9.data,
-      rowHeight = _ref9.rowHeight,
-      overflowHeight = _ref9.overflowHeight,
-      preProps = _ref9.preProps,
-      codeProps = _ref9.codeProps;
-  var VirtualizedOuterElement = useMemo(function () {
-    return /*#__PURE__*/forwardRef(function (props, ref) {
-      return ___EmotionJSX("pre", _extends({}, props, {
-        ref: ref
-      }, preProps));
-    });
-  }, [preProps]);
-  var VirtualizedInnerElement = useMemo(function () {
-    return /*#__PURE__*/forwardRef(function (props, ref) {
-      return ___EmotionJSX("code", _extends({}, props, {
-        ref: ref
-      }, codeProps));
-    });
-  }, [codeProps]);
-  return ___EmotionJSX(EuiAutoSizer, {
-    disableHeight: typeof overflowHeight === 'number'
-  }, function (_ref10) {
-    var height = _ref10.height,
-        width = _ref10.width;
-    return ___EmotionJSX(FixedSizeList, {
-      height: height !== null && height !== void 0 ? height : overflowHeight,
-      width: width,
-      itemData: data,
-      itemSize: rowHeight,
-      itemCount: data.length,
-      outerElementType: VirtualizedOuterElement,
-      innerElementType: VirtualizedInnerElement
-    }, ListRow);
-  });
 };

package/es/components/code/code_block.styles.js

@@ -0,0 +1,153 @@
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+
+/*
+ * 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.
+ */
+
+/*
+ * 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.
+ */
+import { css } from '@emotion/react';
+import { euiPaddingSize, euiFontSize, euiScrollBarStyles, mathWithUnits } from '../../global_styling';
+import { euiCodeSyntaxColors, euiCodeSyntaxTokens } from './code_syntax.styles';
+
+var _ref4 = process.env.NODE_ENV === "production" ? {
+  name: "i92zwx-isFullScreen",
+  styles: "position:fixed;inset:0;label:isFullScreen;"
+} : {
+  name: "i92zwx-isFullScreen",
+  styles: "position:fixed;inset:0;label:isFullScreen;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+var _ref5 = process.env.NODE_ENV === "production" ? {
+  name: "gfiv3z-transparentBackground",
+  styles: "background:transparent;label:transparentBackground;"
+} : {
+  name: "gfiv3z-transparentBackground",
+  styles: "background:transparent;label:transparentBackground;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+export var euiCodeBlockStyles = function euiCodeBlockStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var euiCodeSyntax = euiCodeSyntaxColors(euiThemeContext);
+  return {
+    euiCodeBlock: /*#__PURE__*/css("max-inline-size:100%;display:block;position:relative;background:", euiCodeSyntax.backgroundColor, ";", euiCodeSyntaxTokens(euiThemeContext), ";;label:euiCodeBlock;"),
+    // Font size
+    s: /*#__PURE__*/css(euiFontSize(euiThemeContext, 'xs'), ";;label:s;"),
+    m: /*#__PURE__*/css(euiFontSize(euiThemeContext, 's'), ";;label:m;"),
+    l: /*#__PURE__*/css(euiFontSize(euiThemeContext, 'm'), ";;label:l;"),
+    // Variants
+    transparentBackground: _ref5,
+    isFullScreen: _ref4,
+    // Account for control heights
+    hasControls: generatePaddingCss(euiThemeContext, function (paddingSize) {
+      return /*#__PURE__*/css("min-block-size:", mathWithUnits([euiTheme.size.l, paddingSize], function (iconSize, paddingSize) {
+        return iconSize + paddingSize * 2;
+      }), ";;label:hasControls;");
+    }),
+    hasBothControls: generatePaddingCss(euiThemeContext, function (paddingSize) {
+      return /*#__PURE__*/css("min-block-size:", mathWithUnits([euiTheme.size.l, euiTheme.size.xs, paddingSize], function (iconSize, gap, paddingSize) {
+        return iconSize * 2 + gap + paddingSize * 2;
+      }), ";;label:hasBothControls;");
+    })
+  };
+};
+
+var _ref2 = process.env.NODE_ENV === "production" ? {
+  name: "eav5br-preWrap",
+  styles: "white-space:pre-wrap;label:preWrap;"
+} : {
+  name: "eav5br-preWrap",
+  styles: "white-space:pre-wrap;label:preWrap;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+var _ref3 = process.env.NODE_ENV === "production" ? {
+  name: "4dmmkq-pre",
+  styles: "white-space:pre;label:pre;"
+} : {
+  name: "4dmmkq-pre",
+  styles: "white-space:pre;label:pre;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+export var euiCodeBlockPreStyles = function euiCodeBlockPreStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  return {
+    euiCodeBlock__pre: /*#__PURE__*/css("block-size:100%;overflow:auto;display:block;", euiScrollBarStyles(euiThemeContext), ";;label:euiCodeBlock__pre;"),
+    padding: _objectSpread({}, generatePaddingCss(euiThemeContext, function (paddingSize) {
+      return /*#__PURE__*/css("padding:", paddingSize, ";;label:padding;");
+    })),
+    whiteSpace: {
+      pre: {
+        pre: _ref3,
+        controlsOffset: generatePaddingCss(euiThemeContext, function (paddingSize) {
+          return /*#__PURE__*/css("margin-inline-end:", mathWithUnits([paddingSize, euiTheme.size.l, euiTheme.size.xs], function (paddingSize, iconSize, gap) {
+            return paddingSize + gap + iconSize;
+          }), ";;label:controlsOffset;");
+        })
+      },
+      preWrap: {
+        preWrap: _ref2,
+        controlsOffset: generatePaddingCss(euiThemeContext, function (paddingSize) {
+          return /*#__PURE__*/css("padding-inline-end:", mathWithUnits([paddingSize, euiTheme.size.l, euiTheme.size.xs], function (paddingSize, iconSize, gap) {
+            return paddingSize + gap + iconSize;
+          }), ";;label:controlsOffset;");
+        })
+      }
+    }
+  };
+};
+
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "9y8iu3-isVirtualized",
+  styles: "position:relative;label:isVirtualized;"
+} : {
+  name: "9y8iu3-isVirtualized",
+  styles: "position:relative;label:isVirtualized;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+export var euiCodeBlockCodeStyles = function euiCodeBlockCodeStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var euiCodeSyntax = euiCodeSyntaxColors(euiThemeContext);
+  return {
+    euiCodeBlock__code: /*#__PURE__*/css("font-family:", euiTheme.font.familyCode, ";font-size:inherit;color:", euiCodeSyntax.color, ";display:block;;label:euiCodeBlock__code;"),
+    isVirtualized: _ref
+  };
+};
+/**
+ * Helper for generating keys for each code block padding size
+ */
+
+var generatePaddingCss = function generatePaddingCss(euiThemeContext, callback) {
+  var cssKeys = {
+    none: /*#__PURE__*/css(";label:none;"),
+    s: /*#__PURE__*/css(";label:s;"),
+    m: /*#__PURE__*/css(";label:m;"),
+    l: /*#__PURE__*/css(";label:l;"),
+    xl: /*#__PURE__*/css(";label:xl;")
+  }; // xl padding used by fullscreen mode
+
+  ['none', 's', 'm', 'l', 'xl'].forEach(function (size) {
+    var paddingSize = euiPaddingSize(euiThemeContext, size) || 0;
+    cssKeys[size] = callback(paddingSize);
+  });
+  return cssKeys;
+};

package/es/components/code/code_block_controls.js

@@ -0,0 +1,29 @@
+/*
+ * 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.
+ */
+import React, { Fragment } from 'react';
+import { useEuiTheme } from '../../services';
+import { euiCodeBlockControlsStyles } from './code_block_controls.styles';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export var EuiCodeBlockControls = function EuiCodeBlockControls(_ref) {
+  var paddingSize = _ref.paddingSize,
+      controls = _ref.controls;
+  var euiTheme = useEuiTheme();
+  var styles = euiCodeBlockControlsStyles(euiTheme);
+  var cssStyles = [styles.euiCodeBlock__controls, styles.offset[paddingSize]];
+  var hasControls = controls.some(function (control) {
+    return !!control;
+  });
+  return hasControls ? ___EmotionJSX("div", {
+    className: "euiCodeBlock__controls",
+    css: cssStyles
+  }, controls.map(function (control, i) {
+    return ___EmotionJSX(Fragment, {
+      key: i
+    }, control);
+  })) : null;
+};