@elastic/eui 93.1.0 → 93.1.1

package/es/components/tree_view/tree_view.js

@@ -36,7 +36,7 @@ import classNames from 'classnames';
 import { withEuiTheme, keys, htmlIdGenerator } from '../../services';
 import { EuiI18n } from '../i18n';
 import { EuiScreenReaderOnly } from '../accessibility';
-import { EuiTreeViewItem } from './_tree_view_item';
+import { EuiTreeViewItem } from './tree_view_item';
 import { euiTreeViewStyles } from './tree_view.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var EuiTreeViewContext = /*#__PURE__*/createContext('');
@@ -325,4 +325,6 @@ EuiTreeViewClass.propTypes = {
   "aria-label": PropTypes.string,
   "aria-labelledby": PropTypes.string
 };
-export var EuiTreeView = withEuiTheme(EuiTreeViewClass);
+export var EuiTreeView = Object.assign(withEuiTheme(EuiTreeViewClass), {
+  Item: EuiTreeViewItem
+});

package/es/components/tree_view/{_tree_view_item.js → tree_view_item.js}

@@ -15,7 +15,7 @@ import PropTypes from "prop-types";
 import classNames from 'classnames';
 import { useEuiTheme } from '../../services';
 import { EuiIcon } from '../icon';
-import { euiTreeViewItemStyles } from './_tree_view_item.styles';
+import { euiTreeViewItemStyles } from './tree_view_item.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiTreeViewItem = /*#__PURE__*/memo(function (_ref) {
   var id = _ref.id,
@@ -70,14 +70,42 @@ EuiTreeViewItem.propTypes = {
   "aria-label": PropTypes.string,
   "data-test-subj": PropTypes.string,
   css: PropTypes.any,
+  /**
+       * Required for `aria-controls` accessibility
+       */
   id: PropTypes.string.isRequired,
+  /**
+       * The main button content
+       */
   label: PropTypes.node.isRequired,
+  /**
+       * Used to render nested `EuiTreeView`s
+       */
+  children: PropTypes.node,
+  /**
+       * Optional icon to render. Pass, e.g., `<EuiIcon />` or `<EuiToken />`
+       */
   icon: PropTypes.node,
+  /**
+       * Renders an arrow if `children` exists. Otherwise renders a blank icon
+       */
   hasArrow: PropTypes.bool,
+  /**
+       * Adds a targetable modifier class
+       */
   isActive: PropTypes.bool,
+  /**
+       * Sets the `aria-expanded` attribute
+       */
   isExpanded: PropTypes.bool,
+  /**
+       * Determines default or compressed display
+       */
   display: PropTypes.oneOf(["default", "compressed"]),
   buttonRef: PropTypes.any,
+  /**
+       * Optional extra props to pass to the wrapping `<li>`
+       */
   wrapperProps: PropTypes.any
 };
 EuiTreeViewItem.displayName = 'EuiTreeViewItem';

package/{optimize/es/components/tree_view/_tree_view_item.styles.js → es/components/tree_view/tree_view_item.styles.js}

@@ -1,3 +1,4 @@
+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
@@ -9,13 +10,21 @@
 import { css } from '@emotion/react';
 import { transparentize } from '../../services';
 import { euiFocusRing, logicalCSS, mathWithUnits } from '../../global_styling';
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "22lgun-euiTreeView__node",
+  styles: "list-style:none;label:euiTreeView__node;"
+} : {
+  name: "22lgun-euiTreeView__node",
+  styles: "list-style:none;label:euiTreeView__node;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
 export var euiTreeViewItemStyles = function euiTreeViewItemStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   var defaultSize = euiTheme.size.xl;
   var compressedSize = euiTheme.size.l;
   return {
     li: {
-      euiTreeView__node: /*#__PURE__*/css(";label:euiTreeView__node;"),
+      euiTreeView__node: _ref,
       default: /*#__PURE__*/css(logicalCSS('max-height', defaultSize), " line-height:", defaultSize, ";;label:default;"),
       compressed: /*#__PURE__*/css(logicalCSS('max-height', compressedSize), " line-height:", compressedSize, ";;label:compressed;"),
       expanded: /*#__PURE__*/css(logicalCSS('max-height', '100vh'), ";;label:expanded;")

package/eui.d.ts

@@ -19629,7 +19629,7 @@ declare module '@elastic/eui/src/components/provider' {
 	export { EuiComponentDefaultsProvider, EuiComponentDefaultsContext, } from '@elastic/eui/src/components/provider/component_defaults';
 
 }
-declare module '@elastic/eui/src/components/tree_view/_tree_view_item.styles' {
+declare module '@elastic/eui/src/components/tree_view/tree_view_item.styles' {
 	import { UseEuiTheme } from '@elastic/eui/src/services';
 	export const euiTreeViewItemStyles: (euiThemeContext: UseEuiTheme) => {
 	    li: {
@@ -19651,22 +19651,50 @@ declare module '@elastic/eui/src/components/tree_view/_tree_view_item.styles' {
 	};
 
 }
-declare module '@elastic/eui/src/components/tree_view/_tree_view_item' {
-	import { FunctionComponent, PropsWithChildren, HTMLAttributes, ReactNode, Ref } from 'react';
+declare module '@elastic/eui/src/components/tree_view/tree_view_item' {
+	import { FunctionComponent, HTMLAttributes, ReactNode, Ref } from 'react';
 	import { CommonProps } from '@elastic/eui/src/components/common';
-	import { EuiTreeViewProps } from '@elastic/eui/src/components/tree_view/tree_view'; type EuiTreeViewItemProps = HTMLAttributes<HTMLButtonElement> & CommonProps & PropsWithChildren & {
+	import { EuiTreeViewProps } from '@elastic/eui/src/components/tree_view/tree_view';
+	export type EuiTreeViewItemProps = Omit<HTMLAttributes<HTMLButtonElement>, 'id' | 'children'> & CommonProps & {
+	    /**
+	     * Required for `aria-controls` accessibility
+	     */
 	    id: string;
+	    /**
+	     * The main button content
+	     */
 	    label: ReactNode;
+	    /**
+	     * Used to render nested `EuiTreeView`s
+	     */
+	    children?: ReactNode;
+	    /**
+	     * Optional icon to render. Pass, e.g., `<EuiIcon />` or `<EuiToken />`
+	     */
 	    icon?: ReactNode;
+	    /**
+	     * Renders an arrow if `children` exists. Otherwise renders a blank icon
+	     */
 	    hasArrow?: boolean;
+	    /**
+	     * Adds a targetable modifier class
+	     */
 	    isActive?: boolean;
+	    /**
+	     * Sets the `aria-expanded` attribute
+	     */
 	    isExpanded?: boolean;
+	    /**
+	     * Determines default or compressed display
+	     */
 	    display?: EuiTreeViewProps['display'];
 	    buttonRef?: Ref<HTMLButtonElement>;
+	    /**
+	     * Optional extra props to pass to the wrapping `<li>`
+	     */
 	    wrapperProps?: HTMLAttributes<HTMLLIElement>;
 	};
 	export const EuiTreeViewItem: FunctionComponent<EuiTreeViewItemProps>;
-	export {};
 
 }
 declare module '@elastic/eui/src/components/tree_view/tree_view.styles' {
@@ -19765,7 +19793,9 @@ declare module '@elastic/eui/src/components/tree_view/tree_view' {
 	    onChildrenKeydown: (event: React.KeyboardEvent, index: number) => void;
 	    render(): React.JSX.Element;
 	}
-	export const EuiTreeView: React.ForwardRefExoticComponent<Omit<EuiTreeViewProps, "theme"> & React.RefAttributes<Omit<EuiTreeViewProps, "theme">>>;
+	export const EuiTreeView: React.ForwardRefExoticComponent<Omit<EuiTreeViewProps, "theme"> & React.RefAttributes<Omit<EuiTreeViewProps, "theme">>> & {
+	    Item: React.FunctionComponent<import ("@elastic/eui/src/components/tree_view/tree_view_item").EuiTreeViewItemProps>;
+	};
 	export {};
 
 }

package/i18ntokens.json

@@ -6901,12 +6901,12 @@
       "start": {
         "line": 291,
         "column": 10,
-        "index": 8054
+        "index": 8053
       },
       "end": {
         "line": 294,
         "column": 11,
-        "index": 8208
+        "index": 8207
       }
     },
     "filepath": "src/components/tree_view/tree_view.tsx"

package/lib/components/tree_view/tree_view.js

@@ -10,7 +10,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _services = require("../../services");
 var _i18n = require("../i18n");
 var _accessibility = require("../accessibility");
-var _tree_view_item = require("./_tree_view_item");
+var _tree_view_item = require("./tree_view_item");
 var _tree_view = require("./tree_view.styles");
 var _react2 = require("@emotion/react");
 var _excluded = ["children", "className", "items", "display", "expandByDefault", "showExpansionArrows", "theme"];
@@ -333,5 +333,7 @@ EuiTreeViewClass.propTypes = {
   "aria-label": _propTypes.default.string,
   "aria-labelledby": _propTypes.default.string
 };
-var EuiTreeView = (0, _services.withEuiTheme)(EuiTreeViewClass);
+var EuiTreeView = Object.assign((0, _services.withEuiTheme)(EuiTreeViewClass), {
+  Item: _tree_view_item.EuiTreeViewItem
+});
 exports.EuiTreeView = EuiTreeView;

package/lib/components/tree_view/{_tree_view_item.js → tree_view_item.js}

@@ -10,7 +10,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _services = require("../../services");
 var _icon = require("../icon");
-var _tree_view_item = require("./_tree_view_item.styles");
+var _tree_view_item = require("./tree_view_item.styles");
 var _react2 = require("@emotion/react");
 var _excluded = ["id", "label", "className", "children", "display", "icon", "hasArrow", "isActive", "isExpanded", "buttonRef", "wrapperProps"];
 /*
@@ -80,14 +80,42 @@ EuiTreeViewItem.propTypes = {
   "aria-label": _propTypes.default.string,
   "data-test-subj": _propTypes.default.string,
   css: _propTypes.default.any,
+  /**
+       * Required for `aria-controls` accessibility
+       */
   id: _propTypes.default.string.isRequired,
+  /**
+       * The main button content
+       */
   label: _propTypes.default.node.isRequired,
+  /**
+       * Used to render nested `EuiTreeView`s
+       */
+  children: _propTypes.default.node,
+  /**
+       * Optional icon to render. Pass, e.g., `<EuiIcon />` or `<EuiToken />`
+       */
   icon: _propTypes.default.node,
+  /**
+       * Renders an arrow if `children` exists. Otherwise renders a blank icon
+       */
   hasArrow: _propTypes.default.bool,
+  /**
+       * Adds a targetable modifier class
+       */
   isActive: _propTypes.default.bool,
+  /**
+       * Sets the `aria-expanded` attribute
+       */
   isExpanded: _propTypes.default.bool,
+  /**
+       * Determines default or compressed display
+       */
   display: _propTypes.default.oneOf(["default", "compressed"]),
   buttonRef: _propTypes.default.any,
+  /**
+       * Optional extra props to pass to the wrapping `<li>`
+       */
   wrapperProps: _propTypes.default.any
 };
 EuiTreeViewItem.displayName = 'EuiTreeViewItem';

package/lib/components/tree_view/tree_view_item.styles.js

@@ -0,0 +1,52 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiTreeViewItemStyles = void 0;
+var _react = require("@emotion/react");
+var _services = require("../../services");
+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)."; } /*
+                                                                                                                                                                                                                                                                                           * 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.
+                                                                                                                                                                                                                                                                                           */
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "22lgun-euiTreeView__node",
+  styles: "list-style:none;label:euiTreeView__node;"
+} : {
+  name: "22lgun-euiTreeView__node",
+  styles: "list-style:none;label:euiTreeView__node;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+var euiTreeViewItemStyles = function euiTreeViewItemStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var defaultSize = euiTheme.size.xl;
+  var compressedSize = euiTheme.size.l;
+  return {
+    li: {
+      euiTreeView__node: _ref,
+      default: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('max-height', defaultSize), " line-height:", defaultSize, ";;label:default;"),
+      compressed: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('max-height', compressedSize), " line-height:", compressedSize, ";;label:compressed;"),
+      expanded: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('max-height', '100vh'), ";;label:expanded;")
+    },
+    button: {
+      euiTreeView__nodeInner: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('width', '100%'), " ", (0, _global_styling.logicalCSS)('padding-left', euiTheme.size.s), " ", (0, _global_styling.logicalCSS)('padding-right', euiTheme.size.xxs), " display:flex;align-items:center;&:focus{", (0, _global_styling.euiFocusRing)(euiThemeContext, 'inset'), ";}&:hover,&:active,&:focus{background-color:", (0, _services.transparentize)(euiTheme.colors.text, euiTheme.focus.transparency), ";};label:euiTreeView__nodeInner;"),
+      default: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', defaultSize), " gap:", euiTheme.size.s, ";border-radius:", euiTheme.border.radius.medium, ";;label:default;"),
+      compressed: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', compressedSize), " gap:", euiTheme.size.xs, ";border-radius:", euiTheme.border.radius.small, ";;label:compressed;")
+    },
+    icon: {
+      euiTreeView__iconWrapper: /*#__PURE__*/(0, _react.css)("flex-shrink:0;line-height:0;&>*{", (0, _global_styling.logicalCSS)('max-width', '100%'), ";}&>.euiToken{", (0, _global_styling.logicalCSS)('max-height', '100%'), " ", (0, _global_styling.logicalCSS)('height', 'auto'), " svg{", (0, _global_styling.logicalCSS)('width', '100%'), ";}};label:euiTreeView__iconWrapper;"),
+      default: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('width', (0, _global_styling.mathWithUnits)(defaultSize, function (x) {
+        return x / 2;
+      })), ";;label:default;"),
+      compressed: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('width', (0, _global_styling.mathWithUnits)(compressedSize, function (x) {
+        return x / 2;
+      })), ";;label:compressed;")
+    }
+  };
+};
+exports.euiTreeViewItemStyles = euiTreeViewItemStyles;

package/optimize/es/components/tree_view/tree_view.js

@@ -24,7 +24,7 @@ import classNames from 'classnames';
 import { withEuiTheme, keys, htmlIdGenerator } from '../../services';
 import { EuiI18n } from '../i18n';
 import { EuiScreenReaderOnly } from '../accessibility';
-import { EuiTreeViewItem } from './_tree_view_item';
+import { EuiTreeViewItem } from './tree_view_item';
 import { euiTreeViewStyles } from './tree_view.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var EuiTreeViewContext = /*#__PURE__*/createContext('');
@@ -257,4 +257,6 @@ export var EuiTreeViewClass = /*#__PURE__*/function (_Component) {
   return EuiTreeViewClass;
 }(Component);
 _defineProperty(EuiTreeViewClass, "contextType", EuiTreeViewContext);
-export var EuiTreeView = withEuiTheme(EuiTreeViewClass);
+export var EuiTreeView = Object.assign(withEuiTheme(EuiTreeViewClass), {
+  Item: EuiTreeViewItem
+});

package/optimize/es/components/tree_view/{_tree_view_item.js → tree_view_item.js}

@@ -13,7 +13,7 @@ import React, { memo } from 'react';
 import classNames from 'classnames';
 import { useEuiTheme } from '../../services';
 import { EuiIcon } from '../icon';
-import { euiTreeViewItemStyles } from './_tree_view_item.styles';
+import { euiTreeViewItemStyles } from './tree_view_item.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiTreeViewItem = /*#__PURE__*/memo(function (_ref) {
   var id = _ref.id,

package/{es/components/tree_view/_tree_view_item.styles.js → optimize/es/components/tree_view/tree_view_item.styles.js}

@@ -1,3 +1,4 @@
+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
@@ -9,13 +10,21 @@
 import { css } from '@emotion/react';
 import { transparentize } from '../../services';
 import { euiFocusRing, logicalCSS, mathWithUnits } from '../../global_styling';
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "22lgun-euiTreeView__node",
+  styles: "list-style:none;label:euiTreeView__node;"
+} : {
+  name: "22lgun-euiTreeView__node",
+  styles: "list-style:none;label:euiTreeView__node;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
 export var euiTreeViewItemStyles = function euiTreeViewItemStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   var defaultSize = euiTheme.size.xl;
   var compressedSize = euiTheme.size.l;
   return {
     li: {
-      euiTreeView__node: /*#__PURE__*/css(";label:euiTreeView__node;"),
+      euiTreeView__node: _ref,
       default: /*#__PURE__*/css(logicalCSS('max-height', defaultSize), " line-height:", defaultSize, ";;label:default;"),
       compressed: /*#__PURE__*/css(logicalCSS('max-height', compressedSize), " line-height:", compressedSize, ";;label:compressed;"),
       expanded: /*#__PURE__*/css(logicalCSS('max-height', '100vh'), ";;label:expanded;")

package/optimize/lib/components/tree_view/tree_view.js

@@ -21,7 +21,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _services = require("../../services");
 var _i18n = require("../i18n");
 var _accessibility = require("../accessibility");
-var _tree_view_item = require("./_tree_view_item");
+var _tree_view_item = require("./tree_view_item");
 var _tree_view = require("./tree_view.styles");
 var _react2 = require("@emotion/react");
 var _excluded = ["children", "className", "items", "display", "expandByDefault", "showExpansionArrows", "theme"];
@@ -266,5 +266,7 @@ var EuiTreeViewClass = /*#__PURE__*/function (_Component) {
 }(_react.Component);
 exports.EuiTreeViewClass = EuiTreeViewClass;
 (0, _defineProperty2.default)(EuiTreeViewClass, "contextType", EuiTreeViewContext);
-var EuiTreeView = (0, _services.withEuiTheme)(EuiTreeViewClass);
+var EuiTreeView = Object.assign((0, _services.withEuiTheme)(EuiTreeViewClass), {
+  Item: _tree_view_item.EuiTreeViewItem
+});
 exports.EuiTreeView = EuiTreeView;

package/optimize/lib/components/tree_view/{_tree_view_item.js → tree_view_item.js}

@@ -12,7 +12,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _services = require("../../services");
 var _icon = require("../icon");
-var _tree_view_item = require("./_tree_view_item.styles");
+var _tree_view_item = require("./tree_view_item.styles");
 var _react2 = require("@emotion/react");
 var _excluded = ["id", "label", "className", "children", "display", "icon", "hasArrow", "isActive", "isExpanded", "buttonRef", "wrapperProps"];
 /*

package/optimize/lib/components/tree_view/tree_view_item.styles.js

@@ -0,0 +1,52 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiTreeViewItemStyles = void 0;
+var _react = require("@emotion/react");
+var _services = require("../../services");
+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)."; } /*
+                                                                                                                                                                                                                                                                                           * 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.
+                                                                                                                                                                                                                                                                                           */
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "22lgun-euiTreeView__node",
+  styles: "list-style:none;label:euiTreeView__node;"
+} : {
+  name: "22lgun-euiTreeView__node",
+  styles: "list-style:none;label:euiTreeView__node;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+var euiTreeViewItemStyles = function euiTreeViewItemStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var defaultSize = euiTheme.size.xl;
+  var compressedSize = euiTheme.size.l;
+  return {
+    li: {
+      euiTreeView__node: _ref,
+      default: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('max-height', defaultSize), " line-height:", defaultSize, ";;label:default;"),
+      compressed: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('max-height', compressedSize), " line-height:", compressedSize, ";;label:compressed;"),
+      expanded: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('max-height', '100vh'), ";;label:expanded;")
+    },
+    button: {
+      euiTreeView__nodeInner: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('width', '100%'), " ", (0, _global_styling.logicalCSS)('padding-left', euiTheme.size.s), " ", (0, _global_styling.logicalCSS)('padding-right', euiTheme.size.xxs), " display:flex;align-items:center;&:focus{", (0, _global_styling.euiFocusRing)(euiThemeContext, 'inset'), ";}&:hover,&:active,&:focus{background-color:", (0, _services.transparentize)(euiTheme.colors.text, euiTheme.focus.transparency), ";};label:euiTreeView__nodeInner;"),
+      default: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', defaultSize), " gap:", euiTheme.size.s, ";border-radius:", euiTheme.border.radius.medium, ";;label:default;"),
+      compressed: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', compressedSize), " gap:", euiTheme.size.xs, ";border-radius:", euiTheme.border.radius.small, ";;label:compressed;")
+    },
+    icon: {
+      euiTreeView__iconWrapper: /*#__PURE__*/(0, _react.css)("flex-shrink:0;line-height:0;&>*{", (0, _global_styling.logicalCSS)('max-width', '100%'), ";}&>.euiToken{", (0, _global_styling.logicalCSS)('max-height', '100%'), " ", (0, _global_styling.logicalCSS)('height', 'auto'), " svg{", (0, _global_styling.logicalCSS)('width', '100%'), ";}};label:euiTreeView__iconWrapper;"),
+      default: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('width', (0, _global_styling.mathWithUnits)(defaultSize, function (x) {
+        return x / 2;
+      })), ";;label:default;"),
+      compressed: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('width', (0, _global_styling.mathWithUnits)(compressedSize, function (x) {
+        return x / 2;
+      })), ";;label:compressed;")
+    }
+  };
+};
+exports.euiTreeViewItemStyles = euiTreeViewItemStyles;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elastic/eui",
   "description": "Elastic UI Component Library",
-  "version": "93.1.0",
+  "version": "93.1.1",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "lib",
   "module": "es",

package/test-env/components/tree_view/tree_view.js

@@ -22,7 +22,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _services = require("../../services");
 var _i18n = require("../i18n");
 var _accessibility = require("../accessibility");
-var _tree_view_item = require("./_tree_view_item");
+var _tree_view_item = require("./tree_view_item");
 var _tree_view = require("./tree_view.styles");
 var _react2 = require("@emotion/react");
 var _excluded = ["children", "className", "items", "display", "expandByDefault", "showExpansionArrows", "theme"];
@@ -323,5 +323,7 @@ EuiTreeViewClass.propTypes = {
   "aria-label": _propTypes.default.string,
   "aria-labelledby": _propTypes.default.string
 };
-var EuiTreeView = (0, _services.withEuiTheme)(EuiTreeViewClass);
+var EuiTreeView = Object.assign((0, _services.withEuiTheme)(EuiTreeViewClass), {
+  Item: _tree_view_item.EuiTreeViewItem
+});
 exports.EuiTreeView = EuiTreeView;

package/test-env/components/tree_view/{_tree_view_item.js → tree_view_item.js}

@@ -13,7 +13,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _services = require("../../services");
 var _icon = require("../icon");
-var _tree_view_item = require("./_tree_view_item.styles");
+var _tree_view_item = require("./tree_view_item.styles");
 var _react2 = require("@emotion/react");
 var _excluded = ["id", "label", "className", "children", "display", "icon", "hasArrow", "isActive", "isExpanded", "buttonRef", "wrapperProps"];
 /*
@@ -79,14 +79,42 @@ EuiTreeViewItem.propTypes = {
   "aria-label": _propTypes.default.string,
   "data-test-subj": _propTypes.default.string,
   css: _propTypes.default.any,
+  /**
+       * Required for `aria-controls` accessibility
+       */
   id: _propTypes.default.string.isRequired,
+  /**
+       * The main button content
+       */
   label: _propTypes.default.node.isRequired,
+  /**
+       * Used to render nested `EuiTreeView`s
+       */
+  children: _propTypes.default.node,
+  /**
+       * Optional icon to render. Pass, e.g., `<EuiIcon />` or `<EuiToken />`
+       */
   icon: _propTypes.default.node,
+  /**
+       * Renders an arrow if `children` exists. Otherwise renders a blank icon
+       */
   hasArrow: _propTypes.default.bool,
+  /**
+       * Adds a targetable modifier class
+       */
   isActive: _propTypes.default.bool,
+  /**
+       * Sets the `aria-expanded` attribute
+       */
   isExpanded: _propTypes.default.bool,
+  /**
+       * Determines default or compressed display
+       */
   display: _propTypes.default.oneOf(["default", "compressed"]),
   buttonRef: _propTypes.default.any,
+  /**
+       * Optional extra props to pass to the wrapping `<li>`
+       */
   wrapperProps: _propTypes.default.any
 };
 EuiTreeViewItem.displayName = 'EuiTreeViewItem';

package/test-env/components/tree_view/tree_view_item.styles.js

@@ -0,0 +1,52 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiTreeViewItemStyles = void 0;
+var _react = require("@emotion/react");
+var _services = require("../../services");
+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)."; } /*
+                                                                                                                                                                                                                                                                                           * 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.
+                                                                                                                                                                                                                                                                                           */
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "22lgun-euiTreeView__node",
+  styles: "list-style:none;label:euiTreeView__node;"
+} : {
+  name: "22lgun-euiTreeView__node",
+  styles: "list-style:none;label:euiTreeView__node;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+var euiTreeViewItemStyles = function euiTreeViewItemStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var defaultSize = euiTheme.size.xl;
+  var compressedSize = euiTheme.size.l;
+  return {
+    li: {
+      euiTreeView__node: _ref,
+      default: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('max-height', defaultSize), " line-height:", defaultSize, ";;label:default;"),
+      compressed: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('max-height', compressedSize), " line-height:", compressedSize, ";;label:compressed;"),
+      expanded: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('max-height', '100vh'), ";;label:expanded;")
+    },
+    button: {
+      euiTreeView__nodeInner: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('width', '100%'), " ", (0, _global_styling.logicalCSS)('padding-left', euiTheme.size.s), " ", (0, _global_styling.logicalCSS)('padding-right', euiTheme.size.xxs), " display:flex;align-items:center;&:focus{", (0, _global_styling.euiFocusRing)(euiThemeContext, 'inset'), ";}&:hover,&:active,&:focus{background-color:", (0, _services.transparentize)(euiTheme.colors.text, euiTheme.focus.transparency), ";};label:euiTreeView__nodeInner;"),
+      default: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', defaultSize), " gap:", euiTheme.size.s, ";border-radius:", euiTheme.border.radius.medium, ";;label:default;"),
+      compressed: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', compressedSize), " gap:", euiTheme.size.xs, ";border-radius:", euiTheme.border.radius.small, ";;label:compressed;")
+    },
+    icon: {
+      euiTreeView__iconWrapper: /*#__PURE__*/(0, _react.css)("flex-shrink:0;line-height:0;&>*{", (0, _global_styling.logicalCSS)('max-width', '100%'), ";}&>.euiToken{", (0, _global_styling.logicalCSS)('max-height', '100%'), " ", (0, _global_styling.logicalCSS)('height', 'auto'), " svg{", (0, _global_styling.logicalCSS)('width', '100%'), ";}};label:euiTreeView__iconWrapper;"),
+      default: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('width', (0, _global_styling.mathWithUnits)(defaultSize, function (x) {
+        return x / 2;
+      })), ";;label:default;"),
+      compressed: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('width', (0, _global_styling.mathWithUnits)(compressedSize, function (x) {
+        return x / 2;
+      })), ";;label:compressed;")
+    }
+  };
+};
+exports.euiTreeViewItemStyles = euiTreeViewItemStyles;

package/lib/components/tree_view/_tree_view_item.styles.js

@@ -1,45 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.euiTreeViewItemStyles = void 0;
-var _react = require("@emotion/react");
-var _services = require("../../services");
-var _global_styling = require("../../global_styling");
-/*
- * 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.
- */
-
-var euiTreeViewItemStyles = function euiTreeViewItemStyles(euiThemeContext) {
-  var euiTheme = euiThemeContext.euiTheme;
-  var defaultSize = euiTheme.size.xl;
-  var compressedSize = euiTheme.size.l;
-  return {
-    li: {
-      euiTreeView__node: /*#__PURE__*/(0, _react.css)(";label:euiTreeView__node;"),
-      default: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('max-height', defaultSize), " line-height:", defaultSize, ";;label:default;"),
-      compressed: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('max-height', compressedSize), " line-height:", compressedSize, ";;label:compressed;"),
-      expanded: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('max-height', '100vh'), ";;label:expanded;")
-    },
-    button: {
-      euiTreeView__nodeInner: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('width', '100%'), " ", (0, _global_styling.logicalCSS)('padding-left', euiTheme.size.s), " ", (0, _global_styling.logicalCSS)('padding-right', euiTheme.size.xxs), " display:flex;align-items:center;&:focus{", (0, _global_styling.euiFocusRing)(euiThemeContext, 'inset'), ";}&:hover,&:active,&:focus{background-color:", (0, _services.transparentize)(euiTheme.colors.text, euiTheme.focus.transparency), ";};label:euiTreeView__nodeInner;"),
-      default: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', defaultSize), " gap:", euiTheme.size.s, ";border-radius:", euiTheme.border.radius.medium, ";;label:default;"),
-      compressed: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', compressedSize), " gap:", euiTheme.size.xs, ";border-radius:", euiTheme.border.radius.small, ";;label:compressed;")
-    },
-    icon: {
-      euiTreeView__iconWrapper: /*#__PURE__*/(0, _react.css)("flex-shrink:0;line-height:0;&>*{", (0, _global_styling.logicalCSS)('max-width', '100%'), ";}&>.euiToken{", (0, _global_styling.logicalCSS)('max-height', '100%'), " ", (0, _global_styling.logicalCSS)('height', 'auto'), " svg{", (0, _global_styling.logicalCSS)('width', '100%'), ";}};label:euiTreeView__iconWrapper;"),
-      default: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('width', (0, _global_styling.mathWithUnits)(defaultSize, function (x) {
-        return x / 2;
-      })), ";;label:default;"),
-      compressed: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('width', (0, _global_styling.mathWithUnits)(compressedSize, function (x) {
-        return x / 2;
-      })), ";;label:compressed;")
-    }
-  };
-};
-exports.euiTreeViewItemStyles = euiTreeViewItemStyles;

package/optimize/lib/components/tree_view/_tree_view_item.styles.js

@@ -1,45 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.euiTreeViewItemStyles = void 0;
-var _react = require("@emotion/react");
-var _services = require("../../services");
-var _global_styling = require("../../global_styling");
-/*
- * 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.
- */
-
-var euiTreeViewItemStyles = function euiTreeViewItemStyles(euiThemeContext) {
-  var euiTheme = euiThemeContext.euiTheme;
-  var defaultSize = euiTheme.size.xl;
-  var compressedSize = euiTheme.size.l;
-  return {
-    li: {
-      euiTreeView__node: /*#__PURE__*/(0, _react.css)(";label:euiTreeView__node;"),
-      default: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('max-height', defaultSize), " line-height:", defaultSize, ";;label:default;"),
-      compressed: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('max-height', compressedSize), " line-height:", compressedSize, ";;label:compressed;"),
-      expanded: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('max-height', '100vh'), ";;label:expanded;")
-    },
-    button: {
-      euiTreeView__nodeInner: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('width', '100%'), " ", (0, _global_styling.logicalCSS)('padding-left', euiTheme.size.s), " ", (0, _global_styling.logicalCSS)('padding-right', euiTheme.size.xxs), " display:flex;align-items:center;&:focus{", (0, _global_styling.euiFocusRing)(euiThemeContext, 'inset'), ";}&:hover,&:active,&:focus{background-color:", (0, _services.transparentize)(euiTheme.colors.text, euiTheme.focus.transparency), ";};label:euiTreeView__nodeInner;"),
-      default: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', defaultSize), " gap:", euiTheme.size.s, ";border-radius:", euiTheme.border.radius.medium, ";;label:default;"),
-      compressed: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', compressedSize), " gap:", euiTheme.size.xs, ";border-radius:", euiTheme.border.radius.small, ";;label:compressed;")
-    },
-    icon: {
-      euiTreeView__iconWrapper: /*#__PURE__*/(0, _react.css)("flex-shrink:0;line-height:0;&>*{", (0, _global_styling.logicalCSS)('max-width', '100%'), ";}&>.euiToken{", (0, _global_styling.logicalCSS)('max-height', '100%'), " ", (0, _global_styling.logicalCSS)('height', 'auto'), " svg{", (0, _global_styling.logicalCSS)('width', '100%'), ";}};label:euiTreeView__iconWrapper;"),
-      default: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('width', (0, _global_styling.mathWithUnits)(defaultSize, function (x) {
-        return x / 2;
-      })), ";;label:default;"),
-      compressed: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('width', (0, _global_styling.mathWithUnits)(compressedSize, function (x) {
-        return x / 2;
-      })), ";;label:compressed;")
-    }
-  };
-};
-exports.euiTreeViewItemStyles = euiTreeViewItemStyles;

package/test-env/components/tree_view/_tree_view_item.styles.js

@@ -1,45 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.euiTreeViewItemStyles = void 0;
-var _react = require("@emotion/react");
-var _services = require("../../services");
-var _global_styling = require("../../global_styling");
-/*
- * 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.
- */
-
-var euiTreeViewItemStyles = function euiTreeViewItemStyles(euiThemeContext) {
-  var euiTheme = euiThemeContext.euiTheme;
-  var defaultSize = euiTheme.size.xl;
-  var compressedSize = euiTheme.size.l;
-  return {
-    li: {
-      euiTreeView__node: /*#__PURE__*/(0, _react.css)(";label:euiTreeView__node;"),
-      default: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('max-height', defaultSize), " line-height:", defaultSize, ";;label:default;"),
-      compressed: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('max-height', compressedSize), " line-height:", compressedSize, ";;label:compressed;"),
-      expanded: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('max-height', '100vh'), ";;label:expanded;")
-    },
-    button: {
-      euiTreeView__nodeInner: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('width', '100%'), " ", (0, _global_styling.logicalCSS)('padding-left', euiTheme.size.s), " ", (0, _global_styling.logicalCSS)('padding-right', euiTheme.size.xxs), " display:flex;align-items:center;&:focus{", (0, _global_styling.euiFocusRing)(euiThemeContext, 'inset'), ";}&:hover,&:active,&:focus{background-color:", (0, _services.transparentize)(euiTheme.colors.text, euiTheme.focus.transparency), ";};label:euiTreeView__nodeInner;"),
-      default: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', defaultSize), " gap:", euiTheme.size.s, ";border-radius:", euiTheme.border.radius.medium, ";;label:default;"),
-      compressed: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', compressedSize), " gap:", euiTheme.size.xs, ";border-radius:", euiTheme.border.radius.small, ";;label:compressed;")
-    },
-    icon: {
-      euiTreeView__iconWrapper: /*#__PURE__*/(0, _react.css)("flex-shrink:0;line-height:0;&>*{", (0, _global_styling.logicalCSS)('max-width', '100%'), ";}&>.euiToken{", (0, _global_styling.logicalCSS)('max-height', '100%'), " ", (0, _global_styling.logicalCSS)('height', 'auto'), " svg{", (0, _global_styling.logicalCSS)('width', '100%'), ";}};label:euiTreeView__iconWrapper;"),
-      default: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('width', (0, _global_styling.mathWithUnits)(defaultSize, function (x) {
-        return x / 2;
-      })), ";;label:default;"),
-      compressed: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('width', (0, _global_styling.mathWithUnits)(compressedSize, function (x) {
-        return x / 2;
-      })), ";;label:compressed;")
-    }
-  };
-};
-exports.euiTreeViewItemStyles = euiTreeViewItemStyles;