@elastic/eui 67.1.2 → 69.0.0

package/optimize/lib/components/list_group/list_group_item_extra_action.styles.js

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiListGroupItemExtraActionStyles = void 0;
+
+var _react = require("@emotion/react");
+
+var _global_styling = require("../../global_styling");
+
+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)."; }
+
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "ls7zqx-alwaysShow",
+  styles: "opacity:1;label:alwaysShow;"
+} : {
+  name: "ls7zqx-alwaysShow",
+  styles: "opacity:1;label:alwaysShow;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+var _ref2 = process.env.NODE_ENV === "production" ? {
+  name: "3r3xc1-hoverStyles",
+  styles: ".euiListGroupItem:hover &,.euiListGroupItem__button:focus+&,&:focus{opacity:1;};label:hoverStyles;"
+} : {
+  name: "3r3xc1-hoverStyles",
+  styles: ".euiListGroupItem:hover &,.euiListGroupItem__button:focus+&,&:focus{opacity:1;};label:hoverStyles;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+var euiListGroupItemExtraActionStyles = function euiListGroupItemExtraActionStyles(_ref3) {
+  var euiTheme = _ref3.euiTheme;
+  return {
+    euiListGroupItemExtraAction: /*#__PURE__*/(0, _react.css)("flex-shrink:0;opacity:0;", (0, _global_styling.logicalCSS)('margin-right', euiTheme.size.s), ";", _global_styling.euiCanAnimate, "{transition:opacity ", euiTheme.animation.fast, ";};label:euiListGroupItemExtraAction;"),
+    hoverStyles: _ref2,
+    alwaysShow: _ref
+  };
+};
+
+exports.euiListGroupItemExtraActionStyles = euiListGroupItemExtraActionStyles;

package/optimize/lib/components/list_group/pinnable_list_group/pinnable_list_group.js

@@ -23,6 +23,10 @@ var _i18n = require("../../i18n");
 
 var _list_group = require("../list_group");
 
+var _services = require("../../../services");
+
+var _pinnable_list_group = require("./pinnable_list_group.styles");
+
 var _react2 = require("@emotion/react");
 
 var _excluded = ["className", "listItems", "pinTitle", "unpinTitle", "onPinClick"],
@@ -32,20 +36,6 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 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) { (0, _defineProperty2.default)(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; }
 
-var pinExtraAction = {
-  color: 'primary',
-  iconType: 'pinFilled',
-  iconSize: 's',
-  className: 'euiPinnableListGroup__itemExtraAction'
-};
-var pinnedExtraAction = {
-  color: 'primary',
-  iconType: 'pinFilled',
-  iconSize: 's',
-  className: 'euiPinnableListGroup__itemExtraAction euiPinnableListGroup__itemExtraAction-pinned',
-  alwaysShow: true
-};
-
 var EuiPinnableListGroup = function EuiPinnableListGroup(_ref) {
   var className = _ref.className,
       listItems = _ref.listItems,
@@ -53,7 +43,20 @@ var EuiPinnableListGroup = function EuiPinnableListGroup(_ref) {
       unpinTitle = _ref.unpinTitle,
       onPinClick = _ref.onPinClick,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var classes = (0, _classnames.default)('euiPinnableListGroup', className); // Alter listItems object with extra props
+  var classes = (0, _classnames.default)('euiPinnableListGroup', className);
+  var euiTheme = (0, _services.useEuiTheme)();
+  var itemExtraActionStyles = (0, _pinnable_list_group.euiPinnableListGroupItemExtraActionStyles)(euiTheme);
+  var pinExtraAction = {
+    iconType: 'pinFilled',
+    iconSize: 's',
+    css: itemExtraActionStyles.euiPinnableListGroup__itemExtraAction
+  };
+  var pinnedExtraAction = {
+    iconType: 'pinFilled',
+    iconSize: 's',
+    css: [itemExtraActionStyles.euiPinnableListGroup__itemExtraAction, itemExtraActionStyles.pinned],
+    alwaysShow: true
+  }; // Alter listItems object with extra props
 
   var getNewListItems = function getNewListItems(pinExtraActionLabel, pinnedExtraActionLabel) {
     return listItems.map(function (item) {

package/optimize/lib/components/list_group/pinnable_list_group/pinnable_list_group.styles.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiPinnableListGroupItemExtraActionStyles = void 0;
+
+var _react = require("@emotion/react");
+
+var _services = require("../../../services");
+
+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)."; }
+
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "1du20m7-euiPinnableListGroup__itemExtraAction",
+  styles: "svg{transform:rotate(45deg);};label:euiPinnableListGroup__itemExtraAction;"
+} : {
+  name: "1du20m7-euiPinnableListGroup__itemExtraAction",
+  styles: "svg{transform:rotate(45deg);};label:euiPinnableListGroup__itemExtraAction;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+var euiPinnableListGroupItemExtraActionStyles = function euiPinnableListGroupItemExtraActionStyles(_ref2) {
+  var euiTheme = _ref2.euiTheme;
+  return {
+    // Base
+    euiPinnableListGroup__itemExtraAction: _ref,
+    // Variants
+    pinned: /*#__PURE__*/(0, _react.css)("&:not(:hover):not(:focus){color:", (0, _services.makeHighContrastColor)(euiTheme.colors.lightShade)(euiTheme), ";};label:pinned;")
+  };
+};
+
+exports.euiPinnableListGroupItemExtraActionStyles = euiPinnableListGroupItemExtraActionStyles;

package/optimize/lib/components/page/page_section/page_section.js

@@ -51,11 +51,12 @@ var EuiPageSection = function EuiPageSection(_ref) {
   var colors = (0, _global_styling.useEuiBackgroundColorCSS)();
   var cssStyles = [styles.euiPageSection, grow && styles.grow, inlinePadding[paddingSize], bottomBorder === 'extended' && styles.border, alignment && styles[alignment], colors[color]];
   var contentStyles = (0, _page_section.euiPageSectionContentStyles)();
-  var cssContentStyles = [contentStyles.euiPageSection__content, blockPadding[paddingSize], bottomBorder === true && styles.border, alignment.toLowerCase().includes('center') && contentStyles.center, restrictWidth && contentStyles.restrictWidth, (contentProps === null || contentProps === void 0 ? void 0 : contentProps.css) && contentProps.css];
+  var cssContentStyles = [contentStyles.euiPageSection__content, blockPadding[paddingSize], bottomBorder === true && styles.border, alignment.toLowerCase().includes('center') && contentStyles.center, restrictWidth && contentStyles.restrictWidth];
   return (0, _react2.jsx)(Component, (0, _extends2.default)({
     css: cssStyles
-  }, rest), (0, _react2.jsx)("div", (0, _extends2.default)({}, contentProps, {
-    css: cssContentStyles,
+  }, rest), (0, _react2.jsx)("div", (0, _extends2.default)({
+    css: cssContentStyles
+  }, contentProps, {
     style: widthStyles
   }), children));
 };

package/optimize/lib/components/pagination/pagination.js

@@ -220,10 +220,10 @@ var EuiPagination = function EuiPagination(_ref) {
         'aria-labelledby': rest['aria-labelledby']
       });
 
-      centerPageCount = (0, _react2.jsx)("ul", (0, _extends2.default)({}, accessibleName, {
-        css: paginationStyles.euiPagination__list,
-        className: "euiPagination__list"
-      }), firstPageButtons, selectablePages, lastPageButtons);
+      centerPageCount = (0, _react2.jsx)("ul", (0, _extends2.default)({
+        className: "euiPagination__list",
+        css: paginationStyles.euiPagination__list
+      }, accessibleName), firstPageButtons, selectablePages, lastPageButtons);
     }
   } // All the i18n strings used to build the whole SR-only text
 

package/optimize/lib/components/popover/input_popover.js

@@ -111,8 +111,9 @@ var EuiInputPopover = function EuiInputPopover(_ref) {
   };
 
   var classes = (0, _classnames.default)('euiInputPopover', className);
+  var form = (0, _form.euiFormVariables)(euiThemeContext);
   return (0, _react2.jsx)(_popover.EuiPopover, (0, _extends2.default)({
-    css: /*#__PURE__*/(0, _react2.css)(fullWidth ? undefined : (0, _global_styling.logicalCSS)('max-width', (0, _form.euiFormMaxWidth)(euiThemeContext)), ";label:EuiInputPopover;"),
+    css: /*#__PURE__*/(0, _react2.css)(fullWidth ? undefined : (0, _global_styling.logicalCSS)('max-width', form.maxWidth), ";label:EuiInputPopover;"),
     ownFocus: false,
     button: (0, _react2.jsx)(_resize_observer.EuiResizeObserver, {
       onResize: onResize

package/optimize/lib/components/resizable_container/resizable_container.js

@@ -35,7 +35,7 @@ var _helpers = require("./helpers");
 
 var _react2 = require("@emotion/react");
 
-var _excluded = ["direction", "children", "className", "onPanelWidthChange", "onToggleCollapsed"];
+var _excluded = ["direction", "children", "className", "onPanelWidthChange", "onToggleCollapsed", "onResizeStart", "onResizeEnd"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -66,6 +66,8 @@ var EuiResizableContainer = function EuiResizableContainer(_ref) {
       className = _ref.className,
       onPanelWidthChange = _ref.onPanelWidthChange,
       onToggleCollapsed = _ref.onToggleCollapsed,
+      onResizeStart = _ref.onResizeStart,
+      onResizeEnd = _ref.onResizeEnd,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var containerRef = (0, _react.useRef)(null);
   var isHorizontal = direction === containerDirections.horizontal;
@@ -94,6 +96,26 @@ var EuiResizableContainer = function EuiResizableContainer(_ref) {
       initialize();
     }
   }, [initialize, containerSize]);
+  var resizeContext = (0, _react.useRef)({});
+  var resizeEnd = (0, _react.useCallback)(function () {
+    onResizeEnd === null || onResizeEnd === void 0 ? void 0 : onResizeEnd();
+    resizeContext.current = {};
+  }, [onResizeEnd]);
+  var resizeStart = (0, _react.useCallback)(function (trigger, keyMoveDirection) {
+    // If another resize starts while the previous one is still in progress
+    // (e.g. user presses opposite arrow to change direction while the first
+    // is still held down, or user presses an arrow while dragging with the
+    // mouse), we want to signal the end of the previous resize first.
+    if (resizeContext.current.trigger) {
+      resizeEnd();
+    }
+
+    onResizeStart === null || onResizeStart === void 0 ? void 0 : onResizeStart(trigger);
+    resizeContext.current = {
+      trigger: trigger,
+      keyMoveDirection: keyMoveDirection
+    };
+  }, [onResizeStart, resizeEnd]);
   var onMouseDown = (0, _react.useCallback)(function (event) {
     var currentTarget = event.currentTarget;
     var prevPanel = currentTarget.previousElementSibling;
@@ -102,12 +124,13 @@ var EuiResizableContainer = function EuiResizableContainer(_ref) {
     var prevPanelId = prevPanel.id;
     var nextPanelId = nextPanel.id;
     var position = (0, _helpers.getPosition)(event, isHorizontal);
+    resizeStart('pointer');
     actions.dragStart({
       position: position,
       prevPanelId: prevPanelId,
       nextPanelId: nextPanelId
     });
-  }, [actions, isHorizontal]);
+  }, [actions, isHorizontal, resizeStart]);
   var onMouseMove = (0, _react.useCallback)(function (event) {
     if (!reducerState.prevPanelId || !reducerState.nextPanelId || !reducerState.isDragging) return;
     var position = (0, _helpers.getPosition)(event, isHorizontal);
@@ -117,24 +140,29 @@ var EuiResizableContainer = function EuiResizableContainer(_ref) {
       nextPanelId: reducerState.nextPanelId
     });
   }, [actions, isHorizontal, reducerState.prevPanelId, reducerState.nextPanelId, reducerState.isDragging]);
+  var getKeyMoveDirection = (0, _react.useCallback)(function (key) {
+    var direction = null;
+
+    if (isHorizontal && key === _services.keys.ARROW_LEFT || !isHorizontal && key === _services.keys.ARROW_UP) {
+      direction = 'backward';
+    } else if (isHorizontal && key === _services.keys.ARROW_RIGHT || !isHorizontal && key === _services.keys.ARROW_DOWN) {
+      direction = 'forward';
+    }
+
+    return direction;
+  }, [isHorizontal]);
   var onKeyDown = (0, _react.useCallback)(function (event) {
     var key = event.key,
         currentTarget = event.currentTarget;
-    var shouldResizeHorizontalPanel = isHorizontal && (key === _services.keys.ARROW_LEFT || key === _services.keys.ARROW_RIGHT);
-    var shouldResizeVerticalPanel = !isHorizontal && (key === _services.keys.ARROW_UP || key === _services.keys.ARROW_DOWN);
+    var direction = getKeyMoveDirection(key);
     var prevPanelId = currentTarget.previousElementSibling.id;
     var nextPanelId = currentTarget.nextElementSibling.id;
-    var direction;
 
-    if (key === _services.keys.ARROW_DOWN || key === _services.keys.ARROW_RIGHT) {
-      direction = 'forward';
-    }
+    if (direction && prevPanelId && nextPanelId) {
+      if (!event.repeat) {
+        resizeStart('key', direction);
+      }
 
-    if (key === _services.keys.ARROW_UP || key === _services.keys.ARROW_LEFT) {
-      direction = 'backward';
-    }
-
-    if (direction === 'forward' || direction === 'backward' && (shouldResizeHorizontalPanel || shouldResizeVerticalPanel) && prevPanelId && nextPanelId) {
       event.preventDefault();
       actions.keyMove({
         direction: direction,
@@ -142,17 +170,40 @@ var EuiResizableContainer = function EuiResizableContainer(_ref) {
         nextPanelId: nextPanelId
       });
     }
-  }, [actions, isHorizontal]);
+  }, [actions, getKeyMoveDirection, resizeStart]);
+  var onKeyUp = (0, _react.useCallback)(function (_ref2) {
+    var key = _ref2.key;
+
+    // We only want to signal the end of a resize if the key that was released
+    // is the same as the one that started the resize. This prevents the end
+    // of a resize if the user presses one arrow key, then presses the opposite
+    // arrow key to change direction, then releases the first arrow key.
+    if (resizeContext.current.trigger === 'key' && resizeContext.current.keyMoveDirection === getKeyMoveDirection(key)) {
+      resizeEnd();
+    }
+  }, [getKeyMoveDirection, resizeEnd]);
   var onMouseUp = (0, _react.useCallback)(function () {
+    if (resizeContext.current.trigger === 'pointer') {
+      resizeEnd();
+    }
+
     actions.reset();
-  }, [actions]); // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [actions, resizeEnd]);
+  var onBlur = (0, _react.useCallback)(function () {
+    if (resizeContext.current.trigger === 'key') {
+      resizeEnd();
+    }
+
+    actions.resizerBlur();
+  }, [actions, resizeEnd]); // eslint-disable-next-line react-hooks/exhaustive-deps
 
   var EuiResizableButton = (0, _react.useCallback)((0, _resizable_button.euiResizableButtonWithControls)({
     onKeyDown: onKeyDown,
+    onKeyUp: onKeyUp,
     onMouseDown: onMouseDown,
     onTouchStart: onMouseDown,
     onFocus: actions.resizerFocus,
-    onBlur: actions.resizerBlur,
+    onBlur: onBlur,
     isHorizontal: isHorizontal,
     registration: {
       register: actions.registerResizer,

package/optimize/lib/components/resizable_container/resizable_panel.js

@@ -35,7 +35,7 @@ var _resizable_collapse_button = require("./resizable_collapse_button");
 
 var _react2 = require("@emotion/react");
 
-var _excluded = ["children", "className", "id", "isHorizontal", "size", "initialSize", "minSize", "scrollable", "style", "mode", "registration", "onToggleCollapsed", "onToggleCollapsedInternal", "wrapperProps", "hasShadow", "borderRadius", "color", "paddingSize", "wrapperPadding"];
+var _excluded = ["children", "className", "id", "isHorizontal", "size", "initialSize", "minSize", "scrollable", "mode", "registration", "onToggleCollapsed", "onToggleCollapsedInternal", "wrapperProps", "hasShadow", "borderRadius", "color", "paddingSize", "wrapperPadding"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -100,8 +100,6 @@ var EuiResizablePanel = function EuiResizablePanel(_ref) {
       minSize = _ref$minSize === void 0 ? '0px' : _ref$minSize,
       _ref$scrollable = _ref.scrollable,
       scrollable = _ref$scrollable === void 0 ? true : _ref$scrollable,
-      _ref$style = _ref.style,
-      style = _ref$style === void 0 ? {} : _ref$style,
       mode = _ref.mode,
       registration = _ref.registration,
       onToggleCollapsed = _ref.onToggleCollapsed,
@@ -210,7 +208,7 @@ var EuiResizablePanel = function EuiResizablePanel(_ref) {
     };
   }
 
-  var styles = _objectSpread(_objectSpread({}, style), dimensions);
+  var styles = _objectSpread(_objectSpread({}, wrapperProps === null || wrapperProps === void 0 ? void 0 : wrapperProps.style), dimensions);
 
   (0, _react.useEffect)(function () {
     if (!registration) return;

package/optimize/lib/components/tool_tip/tool_tip_anchor.js

@@ -49,9 +49,9 @@ var EuiToolTipAnchor = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref)
   var classes = (0, _classnames.default)('euiToolTipAnchor', className);
   return (// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
     (0, _react2.jsx)("span", (0, _extends2.default)({
-      ref: ref
+      ref: ref,
+      css: cssStyles
     }, rest, {
-      css: cssStyles,
       className: classes,
       onMouseOver: onMouseOver,
       onMouseOut: onMouseOut

package/optimize/lib/services/color/manipulation.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.transparentize = exports.tintOrShade = exports.tint = exports.shadeOrTint = exports.shade = exports.saturate = exports.lightness = exports.desaturate = void 0;
+exports.transparentize = exports.tintOrShade = exports.tint = exports.shadeOrTint = exports.shade = exports.saturate = exports.lightness = exports.desaturate = exports.darken = void 0;
 
 var _chromaJs = _interopRequireDefault(require("chroma-js"));
 
@@ -122,5 +122,17 @@ exports.desaturate = desaturate;
 var lightness = function lightness(color) {
   return (0, _chromaJs.default)(color).get('hsl.l') * 100;
 };
+/**
+ * Returns the darken value of a color. 0-100
+ * @param color - Color to manipulate
+ * @param amount - Amount to change in absolute terms. 0-1.
+ */
+
+
+exports.lightness = lightness;
+
+var darken = function darken(color, amount) {
+  return (0, _chromaJs.default)(color).darken(amount).hex();
+};
 
-exports.lightness = lightness;
+exports.darken = darken;

package/optimize/lib/services/index.js

@@ -55,6 +55,7 @@ var _exportNames = {
   saturate: true,
   desaturate: true,
   lightness: true,
+  darken: true,
   makeHighContrastColor: true,
   makeDisabledContrastColor: true,
   wcagContrastMin: true,
@@ -227,6 +228,12 @@ Object.defineProperty(exports, "copyToClipboard", {
     return _copy_to_clipboard.copyToClipboard;
   }
 });
+Object.defineProperty(exports, "darken", {
+  enumerable: true,
+  get: function get() {
+    return _color.darken;
+  }
+});
 Object.defineProperty(exports, "dateFormatAliases", {
   enumerable: true,
   get: function get() {

package/optimize/lib/test/rtl/component_helpers.d.ts

@@ -5,3 +5,6 @@
  */
 export declare const waitForEuiPopoverOpen: () => Promise<void>;
 export declare const waitForEuiPopoverClose: () => Promise<void>;
+
+export declare const waitForEuiToolTipVisible: () => Promise<void>;
+export declare const waitForEuiToolTipHidden: () => Promise<void>;

package/optimize/lib/test/rtl/component_helpers.js

@@ -102,7 +102,10 @@ var waitForEuiToolTipVisible = /*#__PURE__*/function () {
             return (0, _react.waitFor)(function () {
               var tooltip = document.querySelector('.euiToolTipPopover');
               expect(tooltip).toBeVisible();
-            });
+            }, {
+              timeout: 1500
+            } // Account for long delay on tooltips
+            );
 
           case 2:
             return _context3.abrupt("return", _context3.sent);

package/package.json

@@ -1,18 +1,18 @@
 {
   "name": "@elastic/eui",
   "description": "Elastic UI Component Library",
-  "version": "67.1.2",
+  "version": "69.0.0",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "lib",
   "module": "es",
   "types": "eui.d.ts",
-  "docker_image": "node:16.16.0",
+  "docker_image": "node:16.17.1",
   "sideEffects": [
     "*.css",
     "*.scss"
   ],
   "scripts": {
-    "start": "cross-env BABEL_MODULES=false webpack-dev-server --config=src-docs/webpack.config.js",
+    "start": "cross-env BABEL_MODULES=false webpack serve --config=src-docs/webpack.config.js",
     "test-docker": "node ./scripts/test-docker.js",
     "sync-docs": "node ./scripts/docs-sync.js",
     "build-docs": "cross-env BABEL_MODULES=false cross-env NODE_ENV=production NODE_OPTIONS=--max-old-space-size=4096 webpack --config=src-docs/webpack.config.js",
@@ -115,7 +115,7 @@
     "@cypress/code-coverage": "^3.10.0",
     "@cypress/react": "^5.10.3",
     "@cypress/webpack-dev-server": "^1.7.0",
-    "@elastic/charts": "^48.0.1",
+    "@elastic/charts": "^50.0.1",
     "@elastic/datemath": "^5.0.3",
     "@elastic/eslint-config-kibana": "^0.15.0",
     "@emotion/babel-preset-css-prop": "^11.2.0",
@@ -159,20 +159,20 @@
     "babel-plugin-istanbul": "^6.0.0",
     "babel-plugin-pegjs-inline-precompile": "^0.1.1",
     "babel-template": "^6.26.0",
+    "buffer": "^6.0.3",
     "cache-loader": "^4.1.0",
     "chalk": "^4.1.0",
     "chokidar": "^3.4.2",
-    "circular-dependency-plugin": "^5.2.0",
+    "circular-dependency-plugin": "^5.2.2",
     "codesandbox": "^2.1.16",
     "core-js": "^3.6.5",
     "cross-env": "^7.0.2",
-    "css-loader": "^4.2.2",
+    "css-loader": "^6.7.1",
     "cssnano": "^4.1.10",
     "cypress": "^10.6.0",
     "cypress-axe": "^0.14.0",
     "cypress-plugin-tab": "^1.0.5",
     "cypress-real-events": "^1.7.0",
-    "deasync": "^0.1.20",
     "dedent": "^0.7.0",
     "dts-generator": "^3.0.0",
     "enzyme": "^3.11.0",
@@ -198,20 +198,22 @@
     "get-port": "^5.1.1",
     "glob": "^7.1.6",
     "html-format": "^1.0.1",
-    "html-webpack-plugin": "^4.4.1",
+    "html-webpack-plugin": "^5.5.0",
     "jest": "^24.1.0",
     "jest-cli": "^24.1.0",
     "moment": "^2.27.0",
     "moment-timezone": "^0.5.31",
     "node-sass": "^6.0.1",
     "nodegit": "^0.28.0-alpha.10",
+    "path": "^0.12.7",
     "pegjs": "^0.10.0",
     "postcss-cli": "^7.1.2",
     "postcss-inline-svg": "^4.1.0",
-    "postcss-loader": "^4.0.1",
+    "postcss-loader": "^7.0.1",
     "pre-commit": "^1.2.2",
     "prettier": "^2.1.2",
     "prettier-stylelint": "^0.4.2",
+    "process": "^0.11.10",
     "prompt": "^1.0.0",
     "prop-types": "^15.6.0",
     "puppeteer": "^5.5.0",
@@ -233,18 +235,18 @@
     "sass-extract": "^2.1.0",
     "sass-lint": "^1.13.1",
     "sass-lint-auto-fix": "^0.21.2",
-    "sass-loader": "^10.2.0",
+    "sass-loader": "^13.0.2",
     "sass-vars-to-js-loader": "^2.1.1",
     "shelljs": "^0.8.4",
     "start-server-and-test": "^1.11.3",
-    "style-loader": "^1.2.1",
-    "terser-webpack-plugin": "^4.1.0",
+    "style-loader": "^3.3.1",
+    "terser-webpack-plugin": "^5.3.5",
     "typescript": "4.5.3",
     "uglifyjs-webpack-plugin": "^2.2.0",
     "url-loader": "^4.1.0",
-    "webpack": "^4.46.0",
-    "webpack-cli": "^3.3.12",
-    "webpack-dev-server": "^3.11.3",
+    "webpack": "^5.74.0",
+    "webpack-cli": "^4.10.0",
+    "webpack-dev-server": "^4.10.0",
     "yargs": "^17.2.1",
     "yeoman-generator": "^4.12.0",
     "yo": "^3.1.1"

package/src/components/index.scss

@@ -1,7 +1,6 @@
 // Components
 
 @import 'accordion/index';
-@import 'badge/index';
 @import 'basic_table/index';
 @import 'button/index';
 @import 'code/index';
@@ -15,11 +14,9 @@
 @import 'drag_and_drop/index';
 @import 'empty_prompt/index';
 @import 'filter_group/index';
-@import 'flex/index';
 @import 'form/index';
 @import 'header/index';
 @import 'key_pad_menu/index';
-@import 'list_group/index';
 @import 'markdown_editor/index';
 @import 'modal/index';
 @import 'notification/index';

package/src/global_styling/mixins/_form.scss

@@ -175,13 +175,12 @@
   background-color: tintOrShade($euiColorEmptyShade, 0%, 40%);
   background-image: euiFormControlGradient();
   background-size: 100% 100%; // 1
+  outline: none; // Blanket remove all outlines relying on our own bottom border
 
   @if ($borderOnly) {
     box-shadow: inset 0 0 0 1px $euiFormBorderColor;
   } @else {
     box-shadow:
-      0 1px 1px -1px transparentize($euiShadowColor, .8),
-      0 4px 4px -2px transparentize($euiShadowColor, .8),
       inset 0 0 0 1px $euiFormBorderColor;
   }
 }
@@ -301,8 +300,6 @@
 // Custom styles and states for checkboxes and radios
 
 @mixin euiCustomControl($type: null, $size: $euiSize) {
-  @include euiSlightShadow;
-
   @if $size {
     $size: $size - 2px; // subtract 2px from size to account for border size
     padding: $size / 2;
@@ -321,6 +318,7 @@
               border-color $euiAnimSpeedFast ease-in;
 }
 
+
 @mixin euiCustomControlSelected($type: null) {
   border-color: $euiColorPrimary;
   background-color: $euiColorPrimary;
@@ -372,3 +370,14 @@
   cursor: pointer;
 }
 
+// Adjusts form controls border radius
+@mixin euiFormControlSideBorderRadius($borderRadius, $side, $internal: false) {
+  @if $internal == true {
+    $borderRadius: $borderRadius - 1;
+  }
+  @if $side == 'left' {
+    border-radius: $borderRadius 0 0 $borderRadius;
+  } @else if $side == 'right' {
+    border-radius: 0 $borderRadius $borderRadius 0;
+  }
+}

package/src/global_styling/variables/_borders.scss

@@ -4,8 +4,8 @@ $euiBorderWidthThin: 1px !default;
 $euiBorderWidthThick: 2px !default;
 
 $euiBorderColor: $euiColorLightShade !default;
-$euiBorderRadius: 4px !default;
-$euiBorderRadiusSmall: $euiBorderRadius / 2 !default;
+$euiBorderRadius: $euiSizeS * .75 !default;
+$euiBorderRadiusSmall: $euiSizeS * .5 !default;
 $euiBorderThick: $euiBorderWidthThick solid $euiBorderColor !default;
 $euiBorderThin: $euiBorderWidthThin solid $euiBorderColor !default;
 $euiBorderEditable: $euiBorderWidthThick dotted $euiBorderColor !default;