@elastic/eui 87.0.0 → 87.2.0

package/optimize/lib/components/selectable/selectable_list/selectable_list.js

@@ -170,17 +170,67 @@ var EuiSelectableList = /*#__PURE__*/function (_Component) {
         search: searchValue
       }, label));
     }, _reactWindow.areEqual));
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderVirtualizedList", function (heightIsFull, optionArray) {
+      if (!_this.props.isVirtualized) return null;
+      var _this$props3 = _this.props,
+        windowProps = _this$props3.windowProps,
+        forcedHeight = _this$props3.height,
+        rowHeight = _this$props3.rowHeight;
+      var virtualizationProps = _objectSpread({
+        className: 'euiSelectableList__list',
+        ref: _this.setListRef,
+        outerRef: _this.removeScrollableTabStop,
+        innerRef: _this.setListBoxRef,
+        innerElementType: 'ul',
+        itemCount: optionArray.length,
+        itemData: optionArray,
+        itemSize: rowHeight,
+        'data-skip-axe': 'scrollable-region-focusable'
+      }, windowProps);
+
+      // Calculated height is only used if height is not full
+      var calculatedHeight = !heightIsFull ? forcedHeight || 0 : 0;
+
+      // If calculatedHeight is still falsy, then calculate it
+      if (!heightIsFull && !calculatedHeight) {
+        var maxVisibleOptions = 7;
+        var numVisibleOptions = optionArray.length;
+        var numVisibleMoreThanMax = optionArray.length > maxVisibleOptions;
+        if (numVisibleMoreThanMax) {
+          // Show only half of the last one to indicate there's more to scroll to
+          calculatedHeight = (maxVisibleOptions - 0.5) * rowHeight;
+        } else {
+          calculatedHeight = numVisibleOptions * rowHeight;
+        }
+      }
+      return heightIsFull ? (0, _react2.jsx)(_auto_sizer.EuiAutoSizer, null, function (_ref2) {
+        var width = _ref2.width,
+          height = _ref2.height;
+        return (0, _react2.jsx)(_reactWindow.FixedSizeList, (0, _extends2.default)({
+          width: width,
+          height: height
+        }, virtualizationProps), _this.ListRow);
+      }) : (0, _react2.jsx)(_auto_sizer.EuiAutoSizer, {
+        disableHeight: true
+      }, function (_ref3) {
+        var width = _ref3.width;
+        return (0, _react2.jsx)(_reactWindow.FixedSizeList, (0, _extends2.default)({
+          width: width,
+          height: calculatedHeight
+        }, virtualizationProps), _this.ListRow);
+      });
+    });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onAddOrRemoveOption", function (option, event) {
       if (option.disabled) {
         return;
       }
-      var _this$props3 = _this.props,
-        allowExclusions = _this$props3.allowExclusions,
-        options = _this$props3.options,
-        _this$props3$visibleO = _this$props3.visibleOptions,
-        visibleOptions = _this$props3$visibleO === void 0 ? options : _this$props3$visibleO;
-      _this.props.setActiveOptionIndex(visibleOptions.findIndex(function (_ref2) {
-        var label = _ref2.label;
+      var _this$props4 = _this.props,
+        allowExclusions = _this$props4.allowExclusions,
+        options = _this$props4.options,
+        _this$props4$visibleO = _this$props4.visibleOptions,
+        visibleOptions = _this$props4$visibleO === void 0 ? options : _this$props4$visibleO;
+      _this.props.setActiveOptionIndex(visibleOptions.findIndex(function (_ref4) {
+        var label = _ref4.label;
         return label === option.label;
       }), function () {
         if (option.checked === 'on' && allowExclusions) {
@@ -193,10 +243,10 @@ var EuiSelectableList = /*#__PURE__*/function (_Component) {
       });
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onAddOption", function (addedOption, event) {
-      var _this$props4 = _this.props,
-        onOptionClick = _this$props4.onOptionClick,
-        options = _this$props4.options,
-        singleSelection = _this$props4.singleSelection;
+      var _this$props5 = _this.props,
+        onOptionClick = _this$props5.onOptionClick,
+        options = _this$props5.options,
+        singleSelection = _this$props5.singleSelection;
       var changedOption = _objectSpread({}, addedOption);
       var updatedOptions = options.map(function (option) {
         // if singleSelection is enabled, uncheck any selected option(s)
@@ -215,10 +265,10 @@ var EuiSelectableList = /*#__PURE__*/function (_Component) {
       onOptionClick(updatedOptions, event, changedOption);
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onRemoveOption", function (removedOption, event) {
-      var _this$props5 = _this.props,
-        onOptionClick = _this$props5.onOptionClick,
-        singleSelection = _this$props5.singleSelection,
-        options = _this$props5.options;
+      var _this$props6 = _this.props,
+        onOptionClick = _this$props6.onOptionClick,
+        singleSelection = _this$props6.singleSelection,
+        options = _this$props6.options;
       var changedOption = _objectSpread({}, removedOption);
       var updatedOptions = options.map(function (option) {
         var updatedOption = _objectSpread({}, option);
@@ -231,9 +281,9 @@ var EuiSelectableList = /*#__PURE__*/function (_Component) {
       onOptionClick(updatedOptions, event, changedOption);
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onExcludeOption", function (excludedOption, event) {
-      var _this$props6 = _this.props,
-        onOptionClick = _this$props6.onOptionClick,
-        options = _this$props6.options;
+      var _this$props7 = _this.props,
+        onOptionClick = _this$props7.onOptionClick,
+        options = _this$props7.options;
       var changedOption = _objectSpread({}, excludedOption);
       var updatedOptions = options.map(function (option) {
         var updatedOption = _objectSpread({}, option);
@@ -262,76 +312,44 @@ var EuiSelectableList = /*#__PURE__*/function (_Component) {
     key: "render",
     value: function render() {
       var _this2 = this;
-      var _this$props7 = this.props,
-        className = _this$props7.className,
-        options = _this$props7.options,
-        searchValue = _this$props7.searchValue,
-        onOptionClick = _this$props7.onOptionClick,
-        renderOption = _this$props7.renderOption,
-        forcedHeight = _this$props7.height,
-        windowProps = _this$props7.windowProps,
-        rowHeight = _this$props7.rowHeight,
-        activeOptionIndex = _this$props7.activeOptionIndex,
-        makeOptionId = _this$props7.makeOptionId,
-        showIcons = _this$props7.showIcons,
-        singleSelection = _this$props7.singleSelection,
-        visibleOptions = _this$props7.visibleOptions,
-        allowExclusions = _this$props7.allowExclusions,
-        bordered = _this$props7.bordered,
-        paddingSize = _this$props7.paddingSize,
-        searchable = _this$props7.searchable,
-        onFocusBadge = _this$props7.onFocusBadge,
-        listId = _this$props7.listId,
-        setActiveOptionIndex = _this$props7.setActiveOptionIndex,
-        ariaLabel = _this$props7['aria-label'],
-        ariaLabelledby = _this$props7['aria-labelledby'],
-        ariaDescribedby = _this$props7['aria-describedby'],
-        role = _this$props7.role,
-        isVirtualized = _this$props7.isVirtualized,
-        textWrap = _this$props7.textWrap,
-        rest = (0, _objectWithoutProperties2.default)(_this$props7, _excluded3);
+      var _this$props8 = this.props,
+        className = _this$props8.className,
+        options = _this$props8.options,
+        searchValue = _this$props8.searchValue,
+        onOptionClick = _this$props8.onOptionClick,
+        renderOption = _this$props8.renderOption,
+        forcedHeight = _this$props8.height,
+        windowProps = _this$props8.windowProps,
+        rowHeight = _this$props8.rowHeight,
+        activeOptionIndex = _this$props8.activeOptionIndex,
+        makeOptionId = _this$props8.makeOptionId,
+        showIcons = _this$props8.showIcons,
+        singleSelection = _this$props8.singleSelection,
+        visibleOptions = _this$props8.visibleOptions,
+        allowExclusions = _this$props8.allowExclusions,
+        bordered = _this$props8.bordered,
+        paddingSize = _this$props8.paddingSize,
+        searchable = _this$props8.searchable,
+        onFocusBadge = _this$props8.onFocusBadge,
+        listId = _this$props8.listId,
+        setActiveOptionIndex = _this$props8.setActiveOptionIndex,
+        ariaLabel = _this$props8['aria-label'],
+        ariaLabelledby = _this$props8['aria-labelledby'],
+        ariaDescribedby = _this$props8['aria-describedby'],
+        role = _this$props8.role,
+        isVirtualized = _this$props8.isVirtualized,
+        textWrap = _this$props8.textWrap,
+        rest = (0, _objectWithoutProperties2.default)(_this$props8, _excluded3);
       var optionArray = visibleOptions || options;
       this.calculateAriaSetAttrs(optionArray);
       var heightIsFull = forcedHeight === 'full';
-      var calculatedHeight = heightIsFull ? false : forcedHeight;
-
-      // If calculatedHeight is still undefined, then calculate it
-      if (calculatedHeight === undefined) {
-        var maxVisibleOptions = 7;
-        var numVisibleOptions = optionArray.length;
-        var numVisibleMoreThanMax = optionArray.length > maxVisibleOptions;
-        if (numVisibleMoreThanMax) {
-          // Show only half of the last one to indicate there's more to scroll to
-          calculatedHeight = (maxVisibleOptions - 0.5) * rowHeight;
-        } else {
-          calculatedHeight = numVisibleOptions * rowHeight;
-        }
-      }
       var classes = (0, _classnames.default)('euiSelectableList', {
         'euiSelectableList-fullHeight': heightIsFull,
         'euiSelectableList-bordered': bordered
       }, className);
       return (0, _react2.jsx)("div", (0, _extends2.default)({
         className: classes
-      }, rest), isVirtualized ? (0, _react2.jsx)(_auto_sizer.EuiAutoSizer, {
-        disableHeight: !heightIsFull
-      }, function (_ref3) {
-        var width = _ref3.width,
-          height = _ref3.height;
-        return (0, _react2.jsx)(_reactWindow.FixedSizeList, (0, _extends2.default)({
-          ref: _this2.setListRef,
-          outerRef: _this2.removeScrollableTabStop,
-          className: "euiSelectableList__list",
-          "data-skip-axe": "scrollable-region-focusable",
-          width: width,
-          height: calculatedHeight || height,
-          itemCount: optionArray.length,
-          itemData: optionArray,
-          itemSize: rowHeight,
-          innerElementType: "ul",
-          innerRef: _this2.setListBoxRef
-        }, windowProps), _this2.ListRow);
-      }) : (0, _react2.jsx)("div", {
+      }, rest), isVirtualized ? this.renderVirtualizedList(heightIsFull, optionArray) : (0, _react2.jsx)("div", {
         className: "euiSelectableList__list",
         ref: this.removeScrollableTabStop
       }, (0, _react2.jsx)("ul", {

package/optimize/lib/components/steps/step.styles.js

@@ -48,7 +48,7 @@ exports.euiStepStyles = euiStepStyles;
 var euiStepContentStyles = function euiStepContentStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   var euiStep = euiStepVariables(euiTheme);
-  var styles = {
+  return {
     euiStep__content: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('margin-top', euiTheme.size.s), " ", (0, _global_styling.logicalCSS)('padding-top', euiTheme.size.base), " ", (0, _global_styling.logicalCSS)('padding-bottom', (0, _global_styling.mathWithUnits)([euiTheme.size.xl, euiTheme.size.s], function (x, y) {
       return x + y;
     })), " ", (0, _global_styling.logicalCSS)('padding-right', euiTheme.size.base), ";;label:euiStep__content;"),
@@ -58,16 +58,16 @@ var euiStepContentStyles = function euiStepContentStyles(euiThemeContext) {
     })), (0, _global_styling.logicalCSS)('margin-left', (0, _global_styling.mathWithUnits)(euiStep.numberSize, function (x) {
       return x / 2;
     })), ";;label:m;"),
-    s: /*#__PURE__*/(0, _react.css)(";label:s;"),
-    // s is the same as m, so we'll programmatically duplicate it below
+    // `s` is the same as `m` - use a getter to duplicate its content
+    get s() {
+      return this.m;
+    },
     xs: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('padding-left', (0, _global_styling.mathWithUnits)([euiStep.numberXSSize, euiStep.numberMargin], function (x, y) {
       return x / 2 + y;
     })), (0, _global_styling.logicalCSS)('margin-left', (0, _global_styling.mathWithUnits)(euiStep.numberXSSize, function (x) {
       return x / 2;
     })), ";;label:xs;")
   };
-  styles.s = styles.m;
-  return styles;
 };
 exports.euiStepContentStyles = euiStepContentStyles;
 var euiStepTitleStyles = function euiStepTitleStyles(euiThemeContext) {

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

@@ -17,7 +17,6 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
-var _common = require("../common");
 var _services = require("../../services");
 var _react2 = require("../../services/react");
 var _resize_observer = require("../observer/resize_observer");
@@ -38,22 +37,13 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
                                                                                                                                                                                                                                                                                                                                            * in compliance with, at your election, the Elastic License 2.0 or the Server
                                                                                                                                                                                                                                                                                                                                            * Side Public License, v 1.
                                                                                                                                                                                                                                                                                                                                            */
-var positionsToClassNameMap = {
-  top: 'euiToolTip--top',
-  right: 'euiToolTip--right',
-  bottom: 'euiToolTip--bottom',
-  left: 'euiToolTip--left'
-};
-var POSITIONS = (0, _common.keysOf)(positionsToClassNameMap);
+var POSITIONS = ['top', 'right', 'bottom', 'left'];
 exports.POSITIONS = POSITIONS;
+var DISPLAYS = ['inlineBlock', 'block'];
 var delayToMsMap = {
   regular: 250,
   long: 250 * 5
 };
-var displayToClassNameMap = {
-  inlineBlock: undefined,
-  block: 'euiToolTipAnchor--displayBlock'
-};
 var DEFAULT_TOOLTIP_STYLES = {
   // position the tooltip content near the top-left
   // corner of the window so it can't create scrollbars
@@ -264,7 +254,7 @@ var EuiToolTip = /*#__PURE__*/function (_Component) {
         onFocus: this.onFocus,
         onMouseOver: this.showToolTip,
         onMouseOut: this.onMouseOut,
-        id: this.state.id,
+        id: id,
         className: anchorClasses,
         display: display,
         isVisible: visible

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

@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.EuiToolTipAnchor = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
@@ -23,8 +22,6 @@ var _excluded = ["onBlur", "onFocus", "onMouseOver", "onMouseOut", "id", "classN
  */
 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); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-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) { (0, _defineProperty2.default)(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; }
 var EuiToolTipAnchor = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var _onBlur = _ref.onBlur,
     _onFocus = _ref.onFocus,
@@ -48,7 +45,7 @@ var EuiToolTipAnchor = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref)
       className: classes,
       onMouseOver: onMouseOver,
       onMouseOut: onMouseOut
-    }), /*#__PURE__*/(0, _react.cloneElement)(children, _objectSpread({
+    }), /*#__PURE__*/(0, _react.cloneElement)(children, {
       onFocus: function onFocus(e) {
         _onFocus();
         children.props.onFocus && children.props.onFocus(e);
@@ -56,10 +53,9 @@ var EuiToolTipAnchor = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref)
       onBlur: function onBlur(e) {
         _onBlur();
         children.props.onBlur && children.props.onBlur(e);
-      }
-    }, isVisible && {
-      'aria-describedby': id
-    })))
+      },
+      'aria-describedby': isVisible ? (0, _classnames.default)(id, children.props['aria-describedby']) : children.props['aria-describedby']
+    }))
   );
 });
 exports.EuiToolTipAnchor = EuiToolTipAnchor;

package/optimize/lib/services/accessibility/html_id_generator.js

@@ -1,12 +1,15 @@
 "use strict";
 
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.htmlIdGenerator = htmlIdGenerator;
 exports.useGeneratedHtmlId = void 0;
+var _react = _interopRequireWildcard(require("react"));
 var _uuid = require("uuid");
-var _react = require("react");
+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); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -38,7 +41,8 @@ function htmlIdGenerator() {
  * This prevents IDs from being re-randomized on every component update.
  */
 
-var useGeneratedHtmlId = function useGeneratedHtmlId() {
+// We can remove this deprecated hook once EUI no longer needs to support React 16-17
+var useDeprecatedGeneratedHtmlId = function useDeprecatedGeneratedHtmlId() {
   var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
     prefix = _ref.prefix,
     suffix = _ref.suffix,
@@ -47,4 +51,19 @@ var useGeneratedHtmlId = function useGeneratedHtmlId() {
     return conditionalId || htmlIdGenerator(prefix)(suffix);
   }, [conditionalId, prefix, suffix]);
 };
+var useNewGeneratedHtmlId = function useNewGeneratedHtmlId() {
+  var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+    _ref2$prefix = _ref2.prefix,
+    prefix = _ref2$prefix === void 0 ? '' : _ref2$prefix,
+    _ref2$suffix = _ref2.suffix,
+    suffix = _ref2$suffix === void 0 ? '' : _ref2$suffix,
+    conditionalId = _ref2.conditionalId;
+  // Using the default export and dot notation here is intentional
+  // to prevent React <18 import errors.
+  var id = _react.default.useId();
+  return (0, _react.useMemo)(function () {
+    return conditionalId || "".concat(prefix).concat(id).concat(suffix);
+  }, [id, conditionalId, prefix, suffix]);
+};
+var useGeneratedHtmlId = 'useId' in _react.default ? useNewGeneratedHtmlId : useDeprecatedGeneratedHtmlId;
 exports.useGeneratedHtmlId = useGeneratedHtmlId;

package/optimize/lib/themes/amsterdam/global_styling/mixins/shadow.js

@@ -87,7 +87,6 @@ var euiShadowXLarge = function euiShadowXLarge(_ref9) {
 
 /**
  * slightShadowHover
- * TODO: I think this is only used by panels/cards in the Amsterdam theme, move there
  */
 exports.euiShadowXLarge = euiShadowXLarge;
 var euiSlightShadowHover = function euiSlightShadowHover(_ref11) {

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@elastic/eui",
   "description": "Elastic UI Component Library",
-  "version": "87.0.0",
+  "version": "87.2.0",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "lib",
   "module": "es",
   "types": "eui.d.ts",
-  "docker_image": "18.17.0",
+  "docker_image": "18.17.1",
   "engines": {
     "node": "16.x || 18.x || >=20.0"
   },
@@ -47,8 +47,8 @@
     "yo-doc": "yo ./generator-eui/app/documentation.js",
     "yo-changelog": "yo ./generator-eui/changelog/index.js",
     "release": "node ./scripts/release.js",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
+    "storybook": "yarn compile-scss && storybook dev -p 6006",
+    "build-storybook": "yarn compile-scss && storybook build"
   },
   "repository": {
     "type": "git",
@@ -68,25 +68,24 @@
     "@types/lodash": "^4.14.194",
     "@types/numeral": "^0.0.28",
     "@types/react-input-autosize": "^2.2.1",
-    "@types/react-virtualized-auto-sizer": "^1.0.1",
     "@types/react-window": "^1.8.5",
     "@types/refractor": "^3.0.0",
     "@types/resize-observer-browser": "^0.1.5",
     "@types/vfile-message": "^2.0.0",
     "chroma-js": "^2.4.2",
-    "classnames": "^2.2.6",
+    "classnames": "^2.3.2",
     "lodash": "^4.17.21",
     "mdast-util-to-hast": "^10.2.0",
     "numeral": "^2.0.6",
     "prop-types": "^15.6.0",
-    "react-dropzone": "^11.5.3",
+    "react-dropzone": "^11.7.1",
     "react-element-to-jsx-string": "^14.3.4",
     "react-focus-on": "^3.9.1",
     "react-input-autosize": "^3.0.0",
     "react-is": "^17.0.2",
     "react-remove-scroll-bar": "^2.3.4",
-    "react-virtualized-auto-sizer": "^1.0.6",
-    "react-window": "^1.8.6",
+    "react-virtualized-auto-sizer": "^1.0.20",
+    "react-window": "^1.8.9",
     "refractor": "^3.5.0",
     "rehype-raw": "^5.0.0",
     "rehype-react": "^6.0.0",
@@ -95,7 +94,7 @@
     "remark-emoji": "^2.1.0",
     "remark-parse-no-trim": "^8.0.4",
     "remark-rehype": "^8.0.0",
-    "tabbable": "^5.2.1",
+    "tabbable": "^5.3.3",
     "text-diff": "^1.0.1",
     "unified": "^9.2.0",
     "unist-util-visit": "^2.0.3",
@@ -130,13 +129,13 @@
     "@emotion/react": "^11.11.0",
     "@faker-js/faker": "^7.6.0",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
-    "@storybook/addon-essentials": "^7.0.17",
-    "@storybook/addon-interactions": "^7.0.17",
-    "@storybook/addon-links": "^7.0.17",
-    "@storybook/blocks": "^7.0.17",
-    "@storybook/react": "^7.0.17",
-    "@storybook/react-webpack5": "^7.0.17",
-    "@storybook/testing-library": "^0.0.14-next.2",
+    "@storybook/addon-essentials": "^7.3.1",
+    "@storybook/addon-interactions": "^7.3.1",
+    "@storybook/addon-links": "^7.3.1",
+    "@storybook/blocks": "^7.3.1",
+    "@storybook/react": "^7.3.1",
+    "@storybook/react-webpack5": "^7.3.1",
+    "@storybook/testing-library": "^0.1.0",
     "@svgr/core": "8.0.0",
     "@svgr/plugin-jsx": "^8.0.1",
     "@svgr/plugin-svgo": "^8.0.1",
@@ -147,7 +146,7 @@
     "@testing-library/user-event": "^13.5.0",
     "@types/cheerio": "^0.22.31",
     "@types/chroma-js": "^2.4.0",
-    "@types/classnames": "^2.2.10",
+    "@types/classnames": "^2.3.1",
     "@types/enzyme": "^3.10.5",
     "@types/jest": "^24.0.6",
     "@types/node": "^10.17.5",
@@ -155,7 +154,6 @@
     "@types/react-dom": "^18.2.6",
     "@types/react-is": "^17.0.3",
     "@types/react-router-dom": "^5.3.3",
-    "@types/tabbable": "^3.1.2",
     "@types/testing-library__jest-dom": "^5.14.3",
     "@types/url-parse": "^1.4.8",
     "@types/uuid": "^8.3.0",
@@ -201,7 +199,7 @@
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-storybook": "^0.6.12",
+    "eslint-plugin-storybook": "^0.6.13",
     "expose-gc": "^1.0.0",
     "file-loader": "^6.1.0",
     "findup": "^0.1.5",
@@ -248,7 +246,7 @@
     "sass-loader": "^13.2.0",
     "shelljs": "^0.8.4",
     "start-server-and-test": "^1.11.3",
-    "storybook": "^7.0.17",
+    "storybook": "^7.3.1",
     "style-loader": "^3.3.1",
     "stylelint": "^15.7.0",
     "stylelint-config-prettier-scss": "^1.0.0",

package/src/components/index.scss

@@ -16,7 +16,6 @@
 @import 'panel/index';
 @import 'page/index'; // Page needs to come after Panel for cascade specificity
 @import 'tree_view/index';
-@import 'resizable_container/index';
 @import 'side_nav/index';
 @import 'search_bar/index';
 @import 'selectable/index';