@elastic/eui 76.3.0 → 76.4.0

package/es/components/key_pad_menu/key_pad_menu.js

@@ -19,6 +19,8 @@ import React from 'react';
 import PropTypes from "prop-types";
 import classNames from 'classnames';
 import { EuiFormLabel } from '../form/form_label/form_label';
+import { useEuiTheme } from '../../services';
+import { euiKeyPadMenuStyles } from './key_pad_menu.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiKeyPadMenu = function EuiKeyPadMenu(_ref) {
   var children = _ref.children,
@@ -27,13 +29,20 @@ export var EuiKeyPadMenu = function EuiKeyPadMenu(_ref) {
       rest = _objectWithoutProperties(_ref, _excluded);
 
   var classes = classNames('euiKeyPadMenu', className);
-  var legend = _typeof(checkable) === 'object' && checkable.legend ? ___EmotionJSX(EuiFormLabel, _extends({}, checkable.legendProps, {
+  var theme = useEuiTheme();
+  var styles = euiKeyPadMenuStyles(theme);
+  var cssStyles = [styles.euiKeyPadMenu];
+  var legend = _typeof(checkable) === 'object' && checkable.legend ? ___EmotionJSX(EuiFormLabel, _extends({
+    css: styles.euiKeyPadMenu__legend
+  }, checkable.legendProps, {
     type: "legend"
   }), checkable.legend) : undefined;
   return checkable ? ___EmotionJSX("fieldset", _extends({
+    css: cssStyles,
     className: classes,
     "aria-label": _typeof(checkable) === 'object' ? checkable.ariaLegend : undefined
   }, rest), legend, children) : ___EmotionJSX("ul", _extends({
+    css: cssStyles,
     className: classes
   }, rest), React.Children.map(children, function (child) {
     return ___EmotionJSX("li", null, child);

package/es/components/key_pad_menu/key_pad_menu.styles.js

@@ -0,0 +1,33 @@
+/*
+ * 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 { logicalCSS, mathWithUnits } from '../../global_styling';
+export var euiKeyPadMenuVariables = function euiKeyPadMenuVariables(_ref) {
+  var euiTheme = _ref.euiTheme;
+  return {
+    euiKeyPadMenuSize: mathWithUnits(euiTheme.size.base, function (x) {
+      return x * 6;
+    }),
+    euiKeyPadMenuMarginSize: euiTheme.size.xs
+  };
+};
+export var euiKeyPadMenuStyles = function euiKeyPadMenuStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+
+  var _euiKeyPadMenuVariabl = euiKeyPadMenuVariables(euiThemeContext),
+      euiKeyPadMenuSize = _euiKeyPadMenuVariabl.euiKeyPadMenuSize,
+      euiKeyPadMenuMarginSize = _euiKeyPadMenuVariabl.euiKeyPadMenuMarginSize;
+
+  return {
+    euiKeyPadMenu: /*#__PURE__*/css("display:flex;flex-direction:row;flex-wrap:wrap;", logicalCSS('width', mathWithUnits([euiKeyPadMenuSize, euiKeyPadMenuMarginSize], function (x, y) {
+      return x * 3 + y * 3;
+    })), " ", logicalCSS('max-width', '100%'), " gap:", euiKeyPadMenuMarginSize, ";;label:euiKeyPadMenu;"),
+    // Checkable = Fieldset and Legend
+    euiKeyPadMenu__legend: /*#__PURE__*/css(logicalCSS('margin-bottom', euiTheme.size.s), ";;label:euiKeyPadMenu__legend;")
+  };
+};

package/eui.d.ts

@@ -15614,6 +15614,18 @@ declare module '@elastic/eui/src/components/image' {
 	export type { EuiImageProps } from '@elastic/eui/src/components/image/image_types';
 	export { EuiImage } from '@elastic/eui/src/components/image/image';
 
+}
+declare module '@elastic/eui/src/components/key_pad_menu/key_pad_menu.styles' {
+	import { UseEuiTheme } from '@elastic/eui/src/services';
+	export const euiKeyPadMenuVariables: ({ euiTheme }: UseEuiTheme) => {
+	    euiKeyPadMenuSize: string;
+	    euiKeyPadMenuMarginSize: string;
+	};
+	export const euiKeyPadMenuStyles: (euiThemeContext: UseEuiTheme) => {
+	    euiKeyPadMenu: import("@emotion/utils").SerializedStyles;
+	    euiKeyPadMenu__legend: import("@emotion/utils").SerializedStyles;
+	};
+
 }
 declare module '@elastic/eui/src/components/key_pad_menu/key_pad_menu' {
 	import { FunctionComponent, HTMLAttributes, ReactNode } from 'react';

package/lib/components/key_pad_menu/key_pad_menu.js

@@ -13,6 +13,10 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _form_label = require("../form/form_label/form_label");
 
+var _services = require("../../services");
+
+var _key_pad_menu = require("./key_pad_menu.styles");
+
 var _react2 = require("@emotion/react");
 
 var _excluded = ["children", "className", "checkable"];
@@ -34,13 +38,20 @@ var EuiKeyPadMenu = function EuiKeyPadMenu(_ref) {
       rest = _objectWithoutProperties(_ref, _excluded);
 
   var classes = (0, _classnames.default)('euiKeyPadMenu', className);
-  var legend = _typeof(checkable) === 'object' && checkable.legend ? (0, _react2.jsx)(_form_label.EuiFormLabel, _extends({}, checkable.legendProps, {
+  var theme = (0, _services.useEuiTheme)();
+  var styles = (0, _key_pad_menu.euiKeyPadMenuStyles)(theme);
+  var cssStyles = [styles.euiKeyPadMenu];
+  var legend = _typeof(checkable) === 'object' && checkable.legend ? (0, _react2.jsx)(_form_label.EuiFormLabel, _extends({
+    css: styles.euiKeyPadMenu__legend
+  }, checkable.legendProps, {
     type: "legend"
   }), checkable.legend) : undefined;
   return checkable ? (0, _react2.jsx)("fieldset", _extends({
+    css: cssStyles,
     className: classes,
     "aria-label": _typeof(checkable) === 'object' ? checkable.ariaLegend : undefined
   }, rest), legend, children) : (0, _react2.jsx)("ul", _extends({
+    css: cssStyles,
     className: classes
   }, rest), _react.default.Children.map(children, function (child) {
     return (0, _react2.jsx)("li", null, child);

package/lib/components/key_pad_menu/key_pad_menu.styles.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiKeyPadMenuVariables = exports.euiKeyPadMenuStyles = 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 euiKeyPadMenuVariables = function euiKeyPadMenuVariables(_ref) {
+  var euiTheme = _ref.euiTheme;
+  return {
+    euiKeyPadMenuSize: (0, _global_styling.mathWithUnits)(euiTheme.size.base, function (x) {
+      return x * 6;
+    }),
+    euiKeyPadMenuMarginSize: euiTheme.size.xs
+  };
+};
+
+exports.euiKeyPadMenuVariables = euiKeyPadMenuVariables;
+
+var euiKeyPadMenuStyles = function euiKeyPadMenuStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+
+  var _euiKeyPadMenuVariabl = euiKeyPadMenuVariables(euiThemeContext),
+      euiKeyPadMenuSize = _euiKeyPadMenuVariabl.euiKeyPadMenuSize,
+      euiKeyPadMenuMarginSize = _euiKeyPadMenuVariabl.euiKeyPadMenuMarginSize;
+
+  return {
+    euiKeyPadMenu: /*#__PURE__*/(0, _react.css)("display:flex;flex-direction:row;flex-wrap:wrap;", (0, _global_styling.logicalCSS)('width', (0, _global_styling.mathWithUnits)([euiKeyPadMenuSize, euiKeyPadMenuMarginSize], function (x, y) {
+      return x * 3 + y * 3;
+    })), " ", (0, _global_styling.logicalCSS)('max-width', '100%'), " gap:", euiKeyPadMenuMarginSize, ";;label:euiKeyPadMenu;"),
+    // Checkable = Fieldset and Legend
+    euiKeyPadMenu__legend: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('margin-bottom', euiTheme.size.s), ";;label:euiKeyPadMenu__legend;")
+  };
+};
+
+exports.euiKeyPadMenuStyles = euiKeyPadMenuStyles;

package/optimize/es/components/key_pad_menu/key_pad_menu.js

@@ -13,6 +13,8 @@ var _excluded = ["children", "className", "checkable"];
 import React from 'react';
 import classNames from 'classnames';
 import { EuiFormLabel } from '../form/form_label/form_label';
+import { useEuiTheme } from '../../services';
+import { euiKeyPadMenuStyles } from './key_pad_menu.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiKeyPadMenu = function EuiKeyPadMenu(_ref) {
   var children = _ref.children,
@@ -21,13 +23,20 @@ export var EuiKeyPadMenu = function EuiKeyPadMenu(_ref) {
       rest = _objectWithoutProperties(_ref, _excluded);
 
   var classes = classNames('euiKeyPadMenu', className);
-  var legend = _typeof(checkable) === 'object' && checkable.legend ? ___EmotionJSX(EuiFormLabel, _extends({}, checkable.legendProps, {
+  var theme = useEuiTheme();
+  var styles = euiKeyPadMenuStyles(theme);
+  var cssStyles = [styles.euiKeyPadMenu];
+  var legend = _typeof(checkable) === 'object' && checkable.legend ? ___EmotionJSX(EuiFormLabel, _extends({
+    css: styles.euiKeyPadMenu__legend
+  }, checkable.legendProps, {
     type: "legend"
   }), checkable.legend) : undefined;
   return checkable ? ___EmotionJSX("fieldset", _extends({
+    css: cssStyles,
     className: classes,
     "aria-label": _typeof(checkable) === 'object' ? checkable.ariaLegend : undefined
   }, rest), legend, children) : ___EmotionJSX("ul", _extends({
+    css: cssStyles,
     className: classes
   }, rest), React.Children.map(children, function (child) {
     return ___EmotionJSX("li", null, child);

package/optimize/es/components/key_pad_menu/key_pad_menu.styles.js

@@ -0,0 +1,33 @@
+/*
+ * 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 { logicalCSS, mathWithUnits } from '../../global_styling';
+export var euiKeyPadMenuVariables = function euiKeyPadMenuVariables(_ref) {
+  var euiTheme = _ref.euiTheme;
+  return {
+    euiKeyPadMenuSize: mathWithUnits(euiTheme.size.base, function (x) {
+      return x * 6;
+    }),
+    euiKeyPadMenuMarginSize: euiTheme.size.xs
+  };
+};
+export var euiKeyPadMenuStyles = function euiKeyPadMenuStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+
+  var _euiKeyPadMenuVariabl = euiKeyPadMenuVariables(euiThemeContext),
+      euiKeyPadMenuSize = _euiKeyPadMenuVariabl.euiKeyPadMenuSize,
+      euiKeyPadMenuMarginSize = _euiKeyPadMenuVariabl.euiKeyPadMenuMarginSize;
+
+  return {
+    euiKeyPadMenu: /*#__PURE__*/css("display:flex;flex-direction:row;flex-wrap:wrap;", logicalCSS('width', mathWithUnits([euiKeyPadMenuSize, euiKeyPadMenuMarginSize], function (x, y) {
+      return x * 3 + y * 3;
+    })), " ", logicalCSS('max-width', '100%'), " gap:", euiKeyPadMenuMarginSize, ";;label:euiKeyPadMenu;"),
+    // Checkable = Fieldset and Legend
+    euiKeyPadMenu__legend: /*#__PURE__*/css(logicalCSS('margin-bottom', euiTheme.size.s), ";;label:euiKeyPadMenu__legend;")
+  };
+};

package/optimize/lib/components/key_pad_menu/key_pad_menu.js

@@ -19,6 +19,10 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _form_label = require("../form/form_label/form_label");
 
+var _services = require("../../services");
+
+var _key_pad_menu = require("./key_pad_menu.styles");
+
 var _react2 = require("@emotion/react");
 
 var _excluded = ["children", "className", "checkable"];
@@ -29,13 +33,20 @@ var EuiKeyPadMenu = function EuiKeyPadMenu(_ref) {
       checkable = _ref.checkable,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var classes = (0, _classnames.default)('euiKeyPadMenu', className);
-  var legend = (0, _typeof2.default)(checkable) === 'object' && checkable.legend ? (0, _react2.jsx)(_form_label.EuiFormLabel, (0, _extends2.default)({}, checkable.legendProps, {
+  var theme = (0, _services.useEuiTheme)();
+  var styles = (0, _key_pad_menu.euiKeyPadMenuStyles)(theme);
+  var cssStyles = [styles.euiKeyPadMenu];
+  var legend = (0, _typeof2.default)(checkable) === 'object' && checkable.legend ? (0, _react2.jsx)(_form_label.EuiFormLabel, (0, _extends2.default)({
+    css: styles.euiKeyPadMenu__legend
+  }, checkable.legendProps, {
     type: "legend"
   }), checkable.legend) : undefined;
   return checkable ? (0, _react2.jsx)("fieldset", (0, _extends2.default)({
+    css: cssStyles,
     className: classes,
     "aria-label": (0, _typeof2.default)(checkable) === 'object' ? checkable.ariaLegend : undefined
   }, rest), legend, children) : (0, _react2.jsx)("ul", (0, _extends2.default)({
+    css: cssStyles,
     className: classes
   }, rest), _react.default.Children.map(children, function (child) {
     return (0, _react2.jsx)("li", null, child);

package/optimize/lib/components/key_pad_menu/key_pad_menu.styles.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiKeyPadMenuVariables = exports.euiKeyPadMenuStyles = 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 euiKeyPadMenuVariables = function euiKeyPadMenuVariables(_ref) {
+  var euiTheme = _ref.euiTheme;
+  return {
+    euiKeyPadMenuSize: (0, _global_styling.mathWithUnits)(euiTheme.size.base, function (x) {
+      return x * 6;
+    }),
+    euiKeyPadMenuMarginSize: euiTheme.size.xs
+  };
+};
+
+exports.euiKeyPadMenuVariables = euiKeyPadMenuVariables;
+
+var euiKeyPadMenuStyles = function euiKeyPadMenuStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+
+  var _euiKeyPadMenuVariabl = euiKeyPadMenuVariables(euiThemeContext),
+      euiKeyPadMenuSize = _euiKeyPadMenuVariabl.euiKeyPadMenuSize,
+      euiKeyPadMenuMarginSize = _euiKeyPadMenuVariabl.euiKeyPadMenuMarginSize;
+
+  return {
+    euiKeyPadMenu: /*#__PURE__*/(0, _react.css)("display:flex;flex-direction:row;flex-wrap:wrap;", (0, _global_styling.logicalCSS)('width', (0, _global_styling.mathWithUnits)([euiKeyPadMenuSize, euiKeyPadMenuMarginSize], function (x, y) {
+      return x * 3 + y * 3;
+    })), " ", (0, _global_styling.logicalCSS)('max-width', '100%'), " gap:", euiKeyPadMenuMarginSize, ";;label:euiKeyPadMenu;"),
+    // Checkable = Fieldset and Legend
+    euiKeyPadMenu__legend: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('margin-bottom', euiTheme.size.s), ";;label:euiKeyPadMenu__legend;")
+  };
+};
+
+exports.euiKeyPadMenuStyles = euiKeyPadMenuStyles;

package/package.json

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

package/src/components/key_pad_menu/_index.scss

@@ -2,5 +2,4 @@
 
 @import 'variables';
 
-@import 'key_pad_menu';
 @import 'key_pad_menu_item';

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

@@ -21,6 +21,10 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _form_label = require("../form/form_label/form_label");
 
+var _services = require("../../services");
+
+var _key_pad_menu = require("./key_pad_menu.styles");
+
 var _react2 = require("@emotion/react");
 
 var _excluded = ["children", "className", "checkable"];
@@ -31,13 +35,20 @@ var EuiKeyPadMenu = function EuiKeyPadMenu(_ref) {
       checkable = _ref.checkable,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var classes = (0, _classnames.default)('euiKeyPadMenu', className);
-  var legend = (0, _typeof2.default)(checkable) === 'object' && checkable.legend ? (0, _react2.jsx)(_form_label.EuiFormLabel, (0, _extends2.default)({}, checkable.legendProps, {
+  var theme = (0, _services.useEuiTheme)();
+  var styles = (0, _key_pad_menu.euiKeyPadMenuStyles)(theme);
+  var cssStyles = [styles.euiKeyPadMenu];
+  var legend = (0, _typeof2.default)(checkable) === 'object' && checkable.legend ? (0, _react2.jsx)(_form_label.EuiFormLabel, (0, _extends2.default)({
+    css: styles.euiKeyPadMenu__legend
+  }, checkable.legendProps, {
     type: "legend"
   }), checkable.legend) : undefined;
   return checkable ? (0, _react2.jsx)("fieldset", (0, _extends2.default)({
+    css: cssStyles,
     className: classes,
     "aria-label": (0, _typeof2.default)(checkable) === 'object' ? checkable.ariaLegend : undefined
   }, rest), legend, children) : (0, _react2.jsx)("ul", (0, _extends2.default)({
+    css: cssStyles,
     className: classes
   }, rest), _react.default.Children.map(children, function (child) {
     return (0, _react2.jsx)("li", null, child);

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

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiKeyPadMenuVariables = exports.euiKeyPadMenuStyles = 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 euiKeyPadMenuVariables = function euiKeyPadMenuVariables(_ref) {
+  var euiTheme = _ref.euiTheme;
+  return {
+    euiKeyPadMenuSize: (0, _global_styling.mathWithUnits)(euiTheme.size.base, function (x) {
+      return x * 6;
+    }),
+    euiKeyPadMenuMarginSize: euiTheme.size.xs
+  };
+};
+
+exports.euiKeyPadMenuVariables = euiKeyPadMenuVariables;
+
+var euiKeyPadMenuStyles = function euiKeyPadMenuStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+
+  var _euiKeyPadMenuVariabl = euiKeyPadMenuVariables(euiThemeContext),
+      euiKeyPadMenuSize = _euiKeyPadMenuVariabl.euiKeyPadMenuSize,
+      euiKeyPadMenuMarginSize = _euiKeyPadMenuVariabl.euiKeyPadMenuMarginSize;
+
+  return {
+    euiKeyPadMenu: /*#__PURE__*/(0, _react.css)("display:flex;flex-direction:row;flex-wrap:wrap;", (0, _global_styling.logicalCSS)('width', (0, _global_styling.mathWithUnits)([euiKeyPadMenuSize, euiKeyPadMenuMarginSize], function (x, y) {
+      return x * 3 + y * 3;
+    })), " ", (0, _global_styling.logicalCSS)('max-width', '100%'), " gap:", euiKeyPadMenuMarginSize, ";;label:euiKeyPadMenu;"),
+    // Checkable = Fieldset and Legend
+    euiKeyPadMenu__legend: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('margin-bottom', euiTheme.size.s), ";;label:euiKeyPadMenu__legend;")
+  };
+};
+
+exports.euiKeyPadMenuStyles = euiKeyPadMenuStyles;

package/src/components/key_pad_menu/_key_pad_menu.scss

@@ -1,22 +0,0 @@
-/**
- * 1. Default to grid of 3
- */
-.euiKeyPadMenu {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  width: ($euiKeyPadMenuSize * 3) + ($euiKeyPadMenuMarginSize * 3);
-  max-width: 100%;
-  // Using negative margins on the whole menu negates the ones on the (last) items no matter how many exist per row
-  margin-bottom: -$euiKeyPadMenuMarginSize;
-  margin-right: -$euiKeyPadMenuMarginSize;
-
-  legend {
-    margin-bottom: $euiSizeS;
-  }
-
-  > *:not(legend) {
-    margin-bottom: $euiKeyPadMenuMarginSize;
-    margin-right: $euiKeyPadMenuMarginSize;
-  }
-}