@elastic/eui 92.2.1 → 93.1.0

package/es/components/tree_view/tree_view.js

@@ -1,4 +1,4 @@
-var _excluded = ["children", "className", "items", "display", "expandByDefault", "showExpansionArrows"];
+var _excluded = ["children", "className", "items", "display", "expandByDefault", "showExpansionArrows", "theme"];
 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); }
 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 _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; }
@@ -33,35 +33,27 @@ function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input ==
 import React, { Component, createContext } from 'react';
 import PropTypes from "prop-types";
 import classNames from 'classnames';
+import { withEuiTheme, keys, htmlIdGenerator } from '../../services';
 import { EuiI18n } from '../i18n';
-import { EuiIcon } from '../icon';
 import { EuiScreenReaderOnly } from '../accessibility';
-import { EuiText } from '../text';
-import { keys, htmlIdGenerator } from '../../services';
-import { EuiInnerText } from '../inner_text';
+import { EuiTreeViewItem } from './_tree_view_item';
+import { euiTreeViewStyles } from './tree_view.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var EuiTreeViewContext = /*#__PURE__*/createContext('');
-function hasAriaLabel(x) {
-  return x.hasOwnProperty('aria-label');
-}
 function getTreeId(propId) {
   var contextId = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
   var idGenerator = arguments.length > 2 ? arguments[2] : undefined;
   return propId !== null && propId !== void 0 ? propId : contextId === '' ? idGenerator() : contextId;
 }
-var displayToClassNameMap = {
-  default: null,
-  compressed: 'euiTreeView--compressed'
-};
-export var EuiTreeView = /*#__PURE__*/function (_Component) {
-  _inherits(EuiTreeView, _Component);
-  var _super = _createSuper(EuiTreeView);
-  function EuiTreeView(props,
+export var EuiTreeViewClass = /*#__PURE__*/function (_Component) {
+  _inherits(EuiTreeViewClass, _Component);
+  var _super = _createSuper(EuiTreeViewClass);
+  function EuiTreeViewClass(props,
   // Without the optional ? typing, TS will throw errors on JSX component errors
   // @see https://github.com/facebook/react/issues/13944#issuecomment-1183693239
   context) {
     var _this;
-    _classCallCheck(this, EuiTreeView);
+    _classCallCheck(this, EuiTreeViewClass);
     // TODO: context in constructor has been deprecated.
     // We should likely convert this to a function component
     _this = _super.call(this, props, context);
@@ -183,7 +175,7 @@ export var EuiTreeView = /*#__PURE__*/function (_Component) {
     };
     return _this;
   }
-  _createClass(EuiTreeView, [{
+  _createClass(EuiTreeViewClass, [{
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps) {
       if (this.props.id !== prevProps.id) {
@@ -204,18 +196,16 @@ export var EuiTreeView = /*#__PURE__*/function (_Component) {
         display = _this$props$display === void 0 ? 'default' : _this$props$display,
         expandByDefault = _this$props.expandByDefault,
         showExpansionArrows = _this$props.showExpansionArrows,
+        theme = _this$props.theme,
         rest = _objectWithoutProperties(_this$props, _excluded);
+      var styles = euiTreeViewStyles(theme);
+      var cssStyles = [styles.euiTreeView, styles[display]];
 
       // Computed classNames
-      var classes = classNames('euiTreeView', display ? displayToClassNameMap[display] : null, {
-        'euiTreeView--withArrows': showExpansionArrows
-      }, className);
+      var classes = classNames('euiTreeView', className);
       var instructionsId = "".concat(this.state.treeID, "--instruction");
       return ___EmotionJSX(EuiTreeViewContext.Provider, {
         value: this.state.treeID
-      }, ___EmotionJSX(EuiText, {
-        size: display === 'compressed' ? 's' : 'm',
-        className: "euiTreeView__wrapper"
       }, !this.isNested && ___EmotionJSX(EuiI18n, {
         token: "euiTreeView.listNavigationInstructions",
         default: "You can quickly navigate this list using arrow keys."
@@ -224,86 +214,67 @@ export var EuiTreeView = /*#__PURE__*/function (_Component) {
           id: instructionsId
         }, listNavigationInstructions));
       }), ___EmotionJSX("ul", _extends({
+        css: cssStyles,
         className: classes,
         id: !this.isNested ? this.state.treeID : undefined,
-        "aria-describedby": !this.isNested ? instructionsId : undefined
+        "aria-describedby": !this.isNested ? instructionsId : undefined,
+        role: "list" // VoiceOver doesn't parse lists with `list-style: none` as the correct role - @see https://www.scottohara.me/blog/2019/01/12/lists-and-safari.html
       }, rest), items.map(function (node, index) {
         var buttonId = node.id;
         var wrappingId = _this2.treeIdGenerator(buttonId);
-        return ___EmotionJSX(EuiInnerText, {
-          key: node.id + index,
-          fallback: typeof node.label === 'string' ? node.label : ''
-        }, function (ref, innerText) {
-          return ___EmotionJSX(EuiI18n, {
-            key: node.id + index,
-            token: "euiTreeView.ariaLabel",
-            default: "{nodeLabel} child of {ariaLabel}",
-            values: {
-              nodeLabel: innerText,
-              ariaLabel: hasAriaLabel(rest) ? rest['aria-label'] : ''
-            }
-          }, function (ariaLabel) {
-            var label = hasAriaLabel(rest) ? {
-              'aria-label': ariaLabel
-            } : {
-              'aria-labelledby': "".concat(buttonId, " ").concat(rest['aria-labelledby'])
-            };
-            var nodeClasses = classNames('euiTreeView__node', display ? displayToClassNameMap[display] : null, {
-              'euiTreeView__node--expanded': _this2.isNodeOpen(node)
-            });
-            var nodeButtonClasses = classNames('euiTreeView__nodeInner', showExpansionArrows && node.children ? 'euiTreeView__nodeInner--withArrows' : null, _this2.state.activeItem === node.id ? 'euiTreeView__node--active' : null, node.className ? node.className : null);
-            return ___EmotionJSX(React.Fragment, null, ___EmotionJSX("li", {
-              className: nodeClasses
-            }, ___EmotionJSX("button", {
-              id: buttonId,
-              "aria-controls": wrappingId,
-              "aria-expanded": _this2.isNodeOpen(node),
-              ref: function ref(_ref3) {
-                return _this2.setButtonRef(_ref3, index);
-              },
-              "data-test-subj": "euiTreeViewButton-".concat(_this2.state.treeID),
-              onKeyDown: function onKeyDown(event) {
-                return _this2.onKeyDown(event, node);
-              },
-              onClick: function onClick() {
-                return _this2.handleNodeClick(node);
-              },
-              className: nodeButtonClasses
-            }, showExpansionArrows && node.children ? ___EmotionJSX(EuiIcon, {
-              className: "euiTreeView__expansionArrow",
-              size: display === 'compressed' ? 's' : 'm',
-              type: _this2.isNodeOpen(node) ? 'arrowDown' : 'arrowRight'
-            }) : null, node.icon && !node.useEmptyIcon ? ___EmotionJSX("span", {
-              className: "euiTreeView__iconWrapper"
-            }, _this2.isNodeOpen(node) && node.iconWhenExpanded ? node.iconWhenExpanded : node.icon) : null, node.useEmptyIcon && !node.icon ? ___EmotionJSX("span", {
-              className: "euiTreeView__iconPlaceholder"
-            }) : null, ___EmotionJSX("span", {
-              ref: ref,
-              className: "euiTreeView__nodeLabel"
-            }, node.label)), ___EmotionJSX("div", {
-              id: wrappingId,
-              onKeyDown: function onKeyDown(event) {
-                return _this2.onChildrenKeydown(event, index);
-              }
-            }, node.children && _this2.isNodeOpen(node) ? ___EmotionJSX(EuiTreeView, _extends({
-              items: node.children,
-              display: display,
-              showExpansionArrows: showExpansionArrows,
-              expandByDefault: _this2.state.expandChildNodes
-            }, label)) : null)));
-          });
-        });
-      }))));
+        var isNodeExpanded = node.children ? _this2.isNodeOpen(node) : undefined; // Determines the `aria-expanded` attribute
+
+        var icon = node.icon;
+        if (node.iconWhenExpanded && isNodeExpanded) {
+          icon = node.iconWhenExpanded;
+        } else if (!icon && node.useEmptyIcon) {
+          icon = ___EmotionJSX(React.Fragment, null); // Renders a placeholder
+        }
+
+        return ___EmotionJSX(EuiTreeViewItem, {
+          key: buttonId + index,
+          id: buttonId,
+          className: node.className,
+          buttonRef: function buttonRef(ref) {
+            return _this2.setButtonRef(ref, index);
+          },
+          "aria-controls": node.children ? wrappingId : undefined,
+          label: node.label,
+          icon: icon,
+          hasArrow: showExpansionArrows,
+          isExpanded: isNodeExpanded,
+          isActive: _this2.state.activeItem === node.id,
+          display: display,
+          "data-test-subj": "euiTreeViewButton-".concat(_this2.state.treeID),
+          onKeyDown: function onKeyDown(event) {
+            return _this2.onKeyDown(event, node);
+          },
+          onClick: function onClick() {
+            return _this2.handleNodeClick(node);
+          }
+        }, node.children && ___EmotionJSX("div", {
+          id: wrappingId,
+          onKeyDown: function onKeyDown(event) {
+            return _this2.onChildrenKeydown(event, index);
+          }
+        }, isNodeExpanded && ___EmotionJSX(EuiTreeView, {
+          items: node.children,
+          display: display,
+          showExpansionArrows: showExpansionArrows,
+          expandByDefault: _this2.state.expandChildNodes
+        })));
+      })));
     }
   }]);
-  return EuiTreeView;
+  return EuiTreeViewClass;
 }(Component);
-_defineProperty(EuiTreeView, "contextType", EuiTreeViewContext);
-EuiTreeView.propTypes = {
+_defineProperty(EuiTreeViewClass, "contextType", EuiTreeViewContext);
+EuiTreeViewClass.propTypes = {
   className: PropTypes.string,
   "data-test-subj": PropTypes.string,
   css: PropTypes.any,
-  /** An array of EuiTreeViewNodes
+  /**
+       * An array of EuiTreeViewNodes
        */
   items: PropTypes.arrayOf(PropTypes.shape({
     /** An array of EuiTreeViewNodes to render as children
@@ -337,16 +308,21 @@ EuiTreeView.propTypes = {
        */
     callback: PropTypes.func
   }).isRequired).isRequired,
-  /** Optionally use a variation with smaller text and icon sizes
+  /**
+       * Optionally use a variation with smaller text and icon sizes
+       * @default default
        */
   display: PropTypes.oneOf(["default", "compressed"]),
-  /** Set all items to open on initial load
+  /**
+       * Set all items to open on initial load
        */
   expandByDefault: PropTypes.bool,
-  /** Display expansion arrows next to all items
+  /**
+       * Display expansion arrows next to all items
        * that contain children
        */
   showExpansionArrows: PropTypes.bool,
   "aria-label": PropTypes.string,
   "aria-labelledby": PropTypes.string
-};
+};
+export var EuiTreeView = withEuiTheme(EuiTreeViewClass);

package/es/components/tree_view/tree_view.styles.js

@@ -0,0 +1,18 @@
+/*
+ * 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 { euiFontSize, logicalCSS } from '../../global_styling';
+export var euiTreeViewStyles = function euiTreeViewStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  return {
+    euiTreeView: /*#__PURE__*/css("margin:0;list-style-type:none;& &{", logicalCSS('padding-left', euiTheme.size.l), ";};label:euiTreeView;"),
+    default: /*#__PURE__*/css("font-size:", euiFontSize(euiThemeContext, 'm').fontSize, ";;label:default;"),
+    compressed: /*#__PURE__*/css("font-size:", euiFontSize(euiThemeContext, 's').fontSize, ";;label:compressed;")
+  };
+};

package/es/global_styling/mixins/_color.js

@@ -6,8 +6,9 @@
  * Side Public License, v 1.
  */
 
+import { useMemo } from 'react';
 import { css } from '@emotion/react';
-import { shade, tint, transparentize, useEuiTheme } from '../../services';
+import { shade, tint, tintOrShade, transparentize, useEuiTheme } from '../../services';
 export var BACKGROUND_COLORS = ['transparent', 'plain', 'subdued', 'accent', 'primary', 'success', 'warning', 'danger'];
 export var euiBackgroundColor = function euiBackgroundColor(_ref, color) {
   var euiTheme = _ref.euiTheme,
@@ -24,7 +25,7 @@ export var euiBackgroundColor = function euiBackgroundColor(_ref, color) {
       return transparentize(euiTheme.colors[color], 0.1);
     }
   } else {
-    var tintOrShade = function tintOrShade(color) {
+    var _tintOrShade = function _tintOrShade(color) {
       return colorMode === 'DARK' ? shade(color, 0.8) : tint(color, 0.9);
     };
     switch (color) {
@@ -33,7 +34,7 @@ export var euiBackgroundColor = function euiBackgroundColor(_ref, color) {
       case 'subdued':
         return euiTheme.colors.body;
       default:
-        return tintOrShade(euiTheme.colors[color]);
+        return _tintOrShade(euiTheme.colors[color]);
     }
   }
 };
@@ -46,14 +47,46 @@ export var useEuiBackgroundColor = function useEuiBackgroundColor(color) {
   });
 };
 export var useEuiBackgroundColorCSS = function useEuiBackgroundColorCSS() {
-  return {
-    transparent: /*#__PURE__*/css("background-color:", useEuiBackgroundColor('transparent'), ";;label:transparent;"),
-    plain: /*#__PURE__*/css("background-color:", useEuiBackgroundColor('plain'), ";;label:plain;"),
-    subdued: /*#__PURE__*/css("background-color:", useEuiBackgroundColor('subdued'), ";;label:subdued;"),
-    accent: /*#__PURE__*/css("background-color:", useEuiBackgroundColor('accent'), ";;label:accent;"),
-    primary: /*#__PURE__*/css("background-color:", useEuiBackgroundColor('primary'), ";;label:primary;"),
-    success: /*#__PURE__*/css("background-color:", useEuiBackgroundColor('success'), ";;label:success;"),
-    warning: /*#__PURE__*/css("background-color:", useEuiBackgroundColor('warning'), ";;label:warning;"),
-    danger: /*#__PURE__*/css("background-color:", useEuiBackgroundColor('danger'), ";;label:danger;")
-  };
+  var euiThemeContext = useEuiTheme();
+  return useMemo(function () {
+    return {
+      transparent: /*#__PURE__*/css("background-color:", euiBackgroundColor(euiThemeContext, 'transparent'), ";;label:transparent;"),
+      plain: /*#__PURE__*/css("background-color:", euiBackgroundColor(euiThemeContext, 'plain'), ";;label:plain;"),
+      subdued: /*#__PURE__*/css("background-color:", euiBackgroundColor(euiThemeContext, 'subdued'), ";;label:subdued;"),
+      accent: /*#__PURE__*/css("background-color:", euiBackgroundColor(euiThemeContext, 'accent'), ";;label:accent;"),
+      primary: /*#__PURE__*/css("background-color:", euiBackgroundColor(euiThemeContext, 'primary'), ";;label:primary;"),
+      success: /*#__PURE__*/css("background-color:", euiBackgroundColor(euiThemeContext, 'success'), ";;label:success;"),
+      warning: /*#__PURE__*/css("background-color:", euiBackgroundColor(euiThemeContext, 'warning'), ";;label:warning;"),
+      danger: /*#__PURE__*/css("background-color:", euiBackgroundColor(euiThemeContext, 'danger'), ";;label:danger;")
+    };
+  }, [euiThemeContext]);
+};
+export var euiBorderColor = function euiBorderColor(_ref4, color) {
+  var euiTheme = _ref4.euiTheme,
+    colorMode = _ref4.colorMode;
+  switch (color) {
+    case 'transparent':
+    case 'plain':
+    case 'subdued':
+      return euiTheme.border.color;
+    case 'warning':
+      return tintOrShade(euiTheme.colors.warning, 0.4, colorMode);
+    default:
+      return tintOrShade(euiTheme.colors[color], 0.6, colorMode);
+  }
+};
+export var useEuiBorderColorCSS = function useEuiBorderColorCSS() {
+  var euiThemeContext = useEuiTheme();
+  return useMemo(function () {
+    return {
+      transparent: /*#__PURE__*/css("border-color:", euiBorderColor(euiThemeContext, 'transparent'), ";;label:transparent;"),
+      plain: /*#__PURE__*/css("border-color:", euiBorderColor(euiThemeContext, 'plain'), ";;label:plain;"),
+      subdued: /*#__PURE__*/css("border-color:", euiBorderColor(euiThemeContext, 'subdued'), ";;label:subdued;"),
+      accent: /*#__PURE__*/css("border-color:", euiBorderColor(euiThemeContext, 'accent'), ";;label:accent;"),
+      primary: /*#__PURE__*/css("border-color:", euiBorderColor(euiThemeContext, 'primary'), ";;label:primary;"),
+      success: /*#__PURE__*/css("border-color:", euiBorderColor(euiThemeContext, 'success'), ";;label:success;"),
+      warning: /*#__PURE__*/css("border-color:", euiBorderColor(euiThemeContext, 'warning'), ";;label:warning;"),
+      danger: /*#__PURE__*/css("border-color:", euiBorderColor(euiThemeContext, 'danger'), ";;label:danger;")
+    };
+  }, [euiThemeContext]);
 };