@elastic/eui 116.3.1 → 116.4.0

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

@@ -58,8 +58,7 @@ var EuiBanner = exports.EuiBanner = /*#__PURE__*/(0, _react.forwardRef)(function
   var headingSize = size === 's' ? 'xxs' : 'xs';
   var primaryActionProps = actionProps === null || actionProps === void 0 ? void 0 : actionProps.primary;
   var secondaryActionProps = actionProps === null || actionProps === void 0 ? void 0 : actionProps.secondary;
-  // a standalone secondary action is not supported
-  var hasActions = Boolean(primaryActionProps);
+  var hasActions = Boolean(primaryActionProps) || Boolean(secondaryActionProps);
   var componentClass = 'euiBanner';
   var classes = (0, _classnames.default)(componentClass, className);
   var backgroundColorStyles = (0, _global_styling.useEuiBackgroundColorCSS)()[color];

package/test-env/components/banner/banner.styles.js

@@ -64,7 +64,7 @@ var euiBannerStyles = exports.euiBannerStyles = function euiBannerStyles(_ref3)
     }), ";;label:body;"),
     // At size `s` the content slot becomes a block container so the title and
     // text flow inline. Other sizes keep the flex column with a fixed gap.
-    content: /*#__PURE__*/(0, _react.css)("flex:1 1 auto;min-inline-size:0;max-inline-size:", TEXT_MAX_WIDTH, "px;display:flex;flex-direction:column;gap:", euiTheme.size.xs, ";[data-size='s'] &{display:block;>*+*:not(.euiButtonIcon){margin-block-start:", euiTheme.size.s, ";}};label:content;"),
+    content: /*#__PURE__*/(0, _react.css)("flex:1 1 auto;min-inline-size:0;max-inline-size:", TEXT_MAX_WIDTH, "px;display:flex;flex-direction:column;gap:", euiTheme.size.xs, ";[data-size='s'] &{display:block;>*+*:not(.euiButtonIcon){margin-block-start:", euiTheme.size.s, ";}}[data-size='m'] &{>.euiText+*{margin-block-start:", euiTheme.size.s, ";}};label:content;"),
     title: _ref,
     text: /*#__PURE__*/(0, _react.css)("[data-size='s'] &{display:inline;&::before{content:'\xB7';display:inline-block;inline-size:calc(", euiTheme.size.s, " + ", euiTheme.size.xxs, ");text-align:center;color:", euiTheme.colors.textHeading, ";}};label:text;"),
     actions: /*#__PURE__*/(0, _react.css)("display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap;gap:", euiTheme.size.s, ";@container ", CONTAINER_NAME, " ", CQC_BREAKPOINT_NARROWEST, "{flex-wrap:wrap;>*{inline-size:100%;}}", withContainerQuery({

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

@@ -39,7 +39,7 @@ var _accessibility2 = require("../../services/accessibility");
 var _basic_table = require("./basic_table.styles");
 var _tool_tip = require("../tool_tip");
 var _react2 = require("@emotion/react");
-var _excluded = ["className", "loading", "items", "itemId", "columns", "pagination", "sorting", "selection", "onChange", "error", "noItemsMessage", "compressed", "itemIdToExpandedRowMap", "responsiveBreakpoint", "rowProps", "cellProps", "tableCaption", "rowHeader", "tableLayout", "hasBackground", "scrollableInline", "stickyScrollbar", "stickyHeader"],
+var _excluded = ["className", "loading", "items", "itemId", "columns", "pagination", "sorting", "selection", "onChange", "error", "noItemsMessage", "compressed", "itemIdToExpandedRowMap", "responsiveBreakpoint", "rowProps", "cellProps", "tableCaption", "rowHeader", "tableLayout", "hasBackground", "scrollableInline", "stickyScrollbar", "stickyHeader", "panelled"],
   _excluded2 = ["align", "render", "dataType", "isExpander", "textOnly", "name", "field", "description", "sortable", "footer", "mobileOptions", "nameTooltip"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -370,6 +370,7 @@ var EuiBasicTable = exports.EuiBasicTable = /*#__PURE__*/function (_Component) {
         scrollableInline = _this$props2.scrollableInline,
         stickyScrollbar = _this$props2.stickyScrollbar,
         stickyHeader = _this$props2.stickyHeader,
+        panelled = _this$props2.panelled,
         rest = (0, _objectWithoutProperties2.default)(_this$props2, _excluded);
       var classes = (0, _classnames.default)('euiBasicTable', {
         'euiBasicTable-loading': loading
@@ -391,8 +392,9 @@ var EuiBasicTable = exports.EuiBasicTable = /*#__PURE__*/function (_Component) {
         loading = _this$props3.loading,
         scrollableInline = _this$props3.scrollableInline,
         stickyScrollbar = _this$props3.stickyScrollbar,
-        stickyHeader = _this$props3.stickyHeader;
-      return (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_table.EuiTableHeaderMobile, {
+        stickyHeader = _this$props3.stickyHeader,
+        panelled = _this$props3.panelled;
+      var content = (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_table.EuiTableHeaderMobile, {
         responsiveBreakpoint: responsiveBreakpoint
       }, this.renderSelectAll(true), this.renderTableMobileSort()), (0, _react2.jsx)(_services.OverrideCopiedTabularContent, null, (0, _react2.jsx)(_table.EuiTable, {
         id: this.tableId,
@@ -405,6 +407,13 @@ var EuiBasicTable = exports.EuiBasicTable = /*#__PURE__*/function (_Component) {
         stickyHeader: stickyHeader,
         css: loading && _basic_table.safariLoadingWorkaround
       }, this.renderTableCaption(), this.renderTableHead(), this.renderTableBody(), this.renderTableFooter())));
+      if (panelled) {
+        return (0, _react2.jsx)("div", {
+          css: panelled && (0, _basic_table.euiBasicTableWrapperPanelledStyles)(responsiveBreakpoint),
+          "data-test-subj": "euiBasicTablePanelledWrapper"
+        }, content);
+      }
+      return content;
     }
   }, {
     key: "renderTableMobileSort",
@@ -961,7 +970,9 @@ var EuiBasicTable = exports.EuiBasicTable = /*#__PURE__*/function (_Component) {
         error = _this$props11.error,
         pagination = _this$props11.pagination,
         tableCaption = _this$props11.tableCaption,
-        onChange = _this$props11.onChange;
+        onChange = _this$props11.onChange,
+        panelled = _this$props11.panelled,
+        responsiveBreakpoint = _this$props11.responsiveBreakpoint;
       if (!error && pagination && pagination.totalItemCount > 0) {
         if (!onChange) {
           throw new Error("The Basic Table is configured with pagination but [onChange] is\n        not configured. This callback must be implemented to handle pagination changes");
@@ -975,6 +986,8 @@ var EuiBasicTable = exports.EuiBasicTable = /*#__PURE__*/function (_Component) {
         }, function (tablePagination) {
           return (0, _react2.jsx)(_pagination_bar.PaginationBar, {
             pagination: pagination,
+            panelled: panelled,
+            responsiveBreakpoint: responsiveBreakpoint,
             onPageSizeChange: _this7.onPageSizeChange.bind(_this7),
             onPageChange: _this7.onPageChange.bind(_this7),
             "aria-controls": _this7.tableId,
@@ -1495,6 +1508,23 @@ EuiBasicTable.propTypes = {
      * Provides an infinite loading indicator
      */
   loading: _propTypes.default.bool,
+  /**
+     * Enable the panelled style of the table.
+     *
+     * Panelled style adds contrast between the table navigation controls
+     * and table content itself. It should be used in tables rendered outside
+     * EUI containers like `<EuiPanel>` or `<EuiFlyout>`.
+     * @default false
+     */
+  /**
+     * Enable the panelled style of the table.
+     *
+     * Panelled style adds contrast between the table navigation controls
+     * and table content itself. It should be used in tables rendered outside
+     * EUI containers like `<EuiPanel>` or `<EuiFlyout>`.
+     * @default false
+     */
+  panelled: _propTypes.default.bool,
   /**
      * Message to display if table is empty
      */

package/test-env/components/basic_table/basic_table.styles.js

@@ -4,10 +4,11 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.safariLoadingWorkaround = exports.euiBasicTableBodyLoading = void 0;
+exports.safariLoadingWorkaround = exports.euiBasicTableWrapperPanelledStyles = exports.euiBasicTableBodyLoading = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
 var _global_styling = require("../../global_styling");
+var _use_panel_props = require("./use_panel_props");
 var _templateObject;
 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
@@ -24,6 +25,23 @@ var euiBasicTableBodyLoading = exports.euiBasicTableBodyLoading = function euiBa
   }), ";}};label:euiBasicTableBodyLoading;");
 };
 
+/**
+ * @internal
+ */
+var euiBasicTableWrapperPanelledStyles = exports.euiBasicTableWrapperPanelledStyles = function euiBasicTableWrapperPanelledStyles(responsiveBreakpoint) {
+  return function (theme) {
+    var euiTheme = theme.euiTheme;
+    var styles = /*#__PURE__*/(0, _react.css)("border:", euiTheme.border.thin, ";border-block-end-width:0;padding-block-start:", euiTheme.border.width.thin, ";border-radius:", euiTheme.border.radius.medium, ";.euiTable{border-radius:", euiTheme.border.radius.medium, ";}.", _use_panel_props.EUI_BASIC_TABLE_PANEL_CLASS_NAME, "+.euiBasicTable &{border-start-start-radius:0;border-start-end-radius:0;.euiTable{border-start-start-radius:0;border-start-end-radius:0;}}&:not(:last-child),&:has(+ .", _use_panel_props.EUI_BASIC_TABLE_PANEL_CLASS_NAME, "){border-end-start-radius:0;border-end-end-radius:0;.euiTable{border-end-start-radius:0;border-end-end-radius:0;}};label:styles;");
+    if (responsiveBreakpoint === true) {
+      return null;
+    }
+    if (!responsiveBreakpoint) {
+      return styles;
+    }
+    return /*#__PURE__*/(0, _react.css)((0, _global_styling.euiMinBreakpoint)(theme, responsiveBreakpoint), "{", styles, ";};label:euiBasicTableWrapperPanelledStyles;");
+  };
+};
+
 // Fix to make the loading indicator position correctly in Safari
 // For whatever annoying reason, Safari doesn't respect `position: relative;`
 // on `tbody` without `position: relative` on the parent `table`

package/test-env/components/basic_table/in_memory_table.js

@@ -1015,6 +1015,23 @@ EuiInMemoryTable.propTypes = {
      * Provides an infinite loading indicator
      */
   loading: _propTypes.default.bool,
+  /**
+     * Enable the panelled style of the table.
+     *
+     * Panelled style adds contrast between the table navigation controls
+     * and table content itself. It should be used in tables rendered outside
+     * EUI containers like `<EuiPanel>` or `<EuiFlyout>`.
+     * @default false
+     */
+  /**
+     * Enable the panelled style of the table.
+     *
+     * Panelled style adds contrast between the table navigation controls
+     * and table content itself. It should be used in tables rendered outside
+     * EUI containers like `<EuiPanel>` or `<EuiFlyout>`.
+     * @default false
+     */
+  panelled: _propTypes.default.bool,
   /**
      * Applied to `EuiTableRow`
      */

package/test-env/components/basic_table/index.js

@@ -15,5 +15,12 @@ Object.defineProperty(exports, "EuiInMemoryTable", {
     return _in_memory_table.EuiInMemoryTable;
   }
 });
+Object.defineProperty(exports, "useEuiBasicTablePanelProps", {
+  enumerable: true,
+  get: function get() {
+    return _use_panel_props.useEuiBasicTablePanelProps;
+  }
+});
 var _basic_table = require("./basic_table");
-var _in_memory_table = require("./in_memory_table");
+var _in_memory_table = require("./in_memory_table");
+var _use_panel_props = require("./use_panel_props");

package/test-env/components/basic_table/pagination_bar.js

@@ -6,8 +6,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.PaginationBar = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _spacer = require("../spacer");
+var _services = require("../../services");
 var _table_pagination = require("../table/table_pagination");
+var _responsive_context = require("../table/mobile/responsive_context");
+var _pagination_bar = require("./pagination_bar.styles");
 var _react2 = require("@emotion/react");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -19,8 +21,19 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
  * Side Public License, v 1.
  */
 
+/**
+ * @internal
+ */
+
+/**
+ * An internal utility component that renders EuiTablePagination with
+ * proper configuration and handles the `panelled` styles.
+ * @internal
+ */
 var PaginationBar = exports.PaginationBar = function PaginationBar(_ref) {
   var pagination = _ref.pagination,
+    panelled = _ref.panelled,
+    responsiveBreakpoint = _ref.responsiveBreakpoint,
     onPageSizeChange = _ref.onPageSizeChange,
     onPageChange = _ref.onPageChange,
     ariaControls = _ref['aria-controls'],
@@ -35,14 +48,16 @@ var PaginationBar = exports.PaginationBar = function PaginationBar(_ref) {
     _pagination$showPerPa = pagination.showPerPageOptions,
     showPerPageOptions = _pagination$showPerPa === void 0 ? defaults.showPerPageOptions : _pagination$showPerPa;
   var pageCount = pageSize ? Math.ceil(totalItemCount / pageSize) : 1;
+  var styles = (0, _services.useEuiMemoizedStyles)(_pagination_bar.euiBasicTablePaginationBarStyles);
+  var isResponsive = (0, _responsive_context.useIsEuiTableResponsive)(responsiveBreakpoint);
   (0, _react.useEffect)(function () {
     if (pageCount < pageIndex + 1) {
       onPageChange === null || onPageChange === void 0 || onPageChange(pageCount - 1);
     }
   }, [pageCount, onPageChange, pageIndex]);
-  return (0, _react2.jsx)("div", null, (0, _react2.jsx)(_spacer.EuiSpacer, {
-    size: "m"
-  }), (0, _react2.jsx)(_table_pagination.EuiTablePagination, {
+  return (0, _react2.jsx)("div", {
+    css: [styles.root, !isResponsive && panelled && styles.panelled, ";label:PaginationBar;"]
+  }, (0, _react2.jsx)(_table_pagination.EuiTablePagination, {
     activePage: pageIndex,
     showPerPageOptions: showPerPageOptions,
     itemsPerPage: pageSize,

package/test-env/components/basic_table/pagination_bar.styles.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiBasicTablePaginationBarStyles = void 0;
+var _react = require("@emotion/react");
+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.
+ */
+
+/**
+ * @internal
+ */
+var euiBasicTablePaginationBarStyles = exports.euiBasicTablePaginationBarStyles = function euiBasicTablePaginationBarStyles(theme) {
+  var euiTheme = theme.euiTheme;
+  return {
+    root: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalShorthandCSS)('padding', "".concat(euiTheme.size.xs, " ").concat(euiTheme.size.s)), ";;label:root;"),
+    panelled: /*#__PURE__*/(0, _react.css)("background:", euiTheme.colors.backgroundBaseSubdued, ";border:", euiTheme.border.thin, ";border-block-start-width:0;", (0, _global_styling.logicalShorthandCSS)('border-radius', "0 0 ".concat(euiTheme.border.radius.medium, " ").concat(euiTheme.border.radius.medium)), ";;label:panelled;")
+  };
+};

package/test-env/components/basic_table/panel.styles.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiBasicTablePanelStyles = void 0;
+var _react = require("@emotion/react");
+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 euiBasicTablePanelStyles = exports.euiBasicTablePanelStyles = function euiBasicTablePanelStyles(_ref) {
+  var euiTheme = _ref.euiTheme;
+  return /*#__PURE__*/(0, _react.css)("background-color:", euiTheme.colors.backgroundBaseSubdued, ";border:", euiTheme.border.thin, ";border-block-end-width:0;", (0, _global_styling.logicalShorthandCSS)('border-radius', "".concat(euiTheme.border.radius.medium, " ").concat(euiTheme.border.radius.medium, " 0 0")), "&+&{border-start-start-radius:0;border-start-end-radius:0;};label:euiBasicTablePanelStyles;");
+};

package/test-env/components/basic_table/use_panel_props.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useEuiBasicTablePanelProps = exports.EUI_BASIC_TABLE_PANEL_CLASS_NAME = void 0;
+var _services = require("../../services");
+var _panel = require("./panel.styles");
+/*
+ * 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.
+ */
+
+/**
+ * @internal
+ */
+var EUI_BASIC_TABLE_PANEL_CLASS_NAME = exports.EUI_BASIC_TABLE_PANEL_CLASS_NAME = 'euiBasicTablePanel';
+
+/**
+ * A utility hook that returns props needed to be passed to element(s) being
+ * a part of the paneled table look and feel (e.g., a toolbar above the table).
+ * @beta
+ */
+var useEuiBasicTablePanelProps = exports.useEuiBasicTablePanelProps = function useEuiBasicTablePanelProps() {
+  var css = (0, _services.useEuiMemoizedStyles)(_panel.euiBasicTablePanelStyles);
+  return {
+    css: css,
+    className: EUI_BASIC_TABLE_PANEL_CLASS_NAME
+  };
+};