@elastic/eui 95.7.0 → 95.8.0-backport.0

package/es/components/form/form_control_layout/form_control_layout_icons.js

@@ -3,6 +3,12 @@ var _excluded = ["ref", "side"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
 function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
 function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
@@ -25,11 +31,12 @@ function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf
 
 import React, { Component } from 'react';
 import PropTypes from "prop-types";
-import classNames from 'classnames';
+import { RenderWithEuiStylesMemoizer } from '../../../services';
+import { EuiIcon } from '../../icon';
 import { EuiLoadingSpinner } from '../../loading';
 import { EuiFormControlLayoutClearButton } from './form_control_layout_clear_button';
 import { EuiFormControlLayoutCustomIcon } from './form_control_layout_custom_icon';
-import { EuiIcon } from '../../icon';
+import { euiFormControlLayoutIconsStyles } from './form_control_layout_icons.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var ICON_SIDES = ['left', 'right'];
 export var isIconShape = function isIconShape(icon) {
@@ -48,23 +55,30 @@ export var EuiFormControlLayoutIcons = /*#__PURE__*/function (_Component) {
         _this$props$side = _this$props.side,
         side = _this$props$side === void 0 ? 'left' : _this$props$side,
         _this$props$iconsPosi = _this$props.iconsPosition,
-        iconsPosition = _this$props$iconsPosi === void 0 ? 'absolute' : _this$props$iconsPosi;
+        iconsPosition = _this$props$iconsPosi === void 0 ? 'absolute' : _this$props$iconsPosi,
+        compressed = _this$props.compressed,
+        isDisabled = _this$props.isDisabled;
       var customIcon = this.renderCustomIcon();
       var loadingSpinner = this.renderLoadingSpinner();
       var clearButton = this.renderClearButton();
       var invalidIcon = this.renderInvalidIcon();
       var dropdownIcon = this.renderDropdownIcon();
-      var classes = classNames('euiFormControlLayoutIcons', "euiFormControlLayoutIcons--".concat(side), "euiFormControlLayoutIcons--".concat(iconsPosition));
-      return ___EmotionJSX("div", {
-        className: classes
-      }, clearButton, loadingSpinner, invalidIcon, customIcon, dropdownIcon);
+      return ___EmotionJSX(RenderWithEuiStylesMemoizer, null, function (stylesMemoizer) {
+        var styles = stylesMemoizer(euiFormControlLayoutIconsStyles);
+        var cssStyles = [styles.euiFormControlLayoutIcons, compressed ? styles.compressed : styles.uncompressed].concat(_toConsumableArray(iconsPosition === 'absolute' ? [styles.position.absolute.absolute, compressed ? styles.position.absolute.compressed[side] : styles.position.absolute.uncompressed[side]] : [styles.position.static.static, compressed ? styles.position.static.compressed : styles.position.static.uncompressed]), [isDisabled && styles.disabled]);
+        return ___EmotionJSX("div", {
+          css: cssStyles,
+          className: "euiFormControlLayoutIcons"
+        }, clearButton, loadingSpinner, invalidIcon, customIcon, dropdownIcon);
+      });
     }
   }, {
     key: "renderCustomIcon",
     value: function renderCustomIcon() {
       var _this$props2 = this.props,
         icon = _this$props2.icon,
-        compressed = _this$props2.compressed;
+        compressed = _this$props2.compressed,
+        isDisabled = _this$props2.isDisabled;
       if (!icon) {
         return null;
       }
@@ -78,6 +92,7 @@ export var EuiFormControlLayoutIcons = /*#__PURE__*/function (_Component) {
         iconRest = _objectWithoutProperties(iconProps, _excluded);
       return ___EmotionJSX(EuiFormControlLayoutCustomIcon, _extends({
         size: compressed ? 's' : 'm',
+        disabled: isDisabled,
         iconRef: iconRef
       }, iconRest));
     }
@@ -86,12 +101,14 @@ export var EuiFormControlLayoutIcons = /*#__PURE__*/function (_Component) {
     value: function renderDropdownIcon() {
       var _this$props3 = this.props,
         isDropdown = _this$props3.isDropdown,
-        compressed = _this$props3.compressed;
+        compressed = _this$props3.compressed,
+        isDisabled = _this$props3.isDisabled;
       if (!isDropdown) {
         return null;
       }
       return ___EmotionJSX(EuiFormControlLayoutCustomIcon, {
         size: compressed ? 's' : 'm',
+        disabled: isDisabled,
         type: "arrowDown"
       });
     }
@@ -113,12 +130,14 @@ export var EuiFormControlLayoutIcons = /*#__PURE__*/function (_Component) {
     value: function renderClearButton() {
       var _this$props5 = this.props,
         clear = _this$props5.clear,
-        compressed = _this$props5.compressed;
+        compressed = _this$props5.compressed,
+        isDisabled = _this$props5.isDisabled;
       if (!clear) {
         return null;
       }
       return ___EmotionJSX(EuiFormControlLayoutClearButton, _extends({
-        size: compressed ? 's' : 'm'
+        size: compressed ? 's' : 'm',
+        disabled: isDisabled
       }, clear));
     }
   }, {
@@ -152,10 +171,11 @@ EuiFormControlLayoutIcons.propTypes = {
     "aria-label": PropTypes.string,
     "data-test-subj": PropTypes.string,
     css: PropTypes.any,
-    size: PropTypes.any
+    size: PropTypes.oneOf(["s", "m"])
   }),
   isLoading: PropTypes.bool,
   isInvalid: PropTypes.bool,
   isDropdown: PropTypes.bool,
-  compressed: PropTypes.bool
+  compressed: PropTypes.bool,
+  isDisabled: PropTypes.bool
 };

package/es/components/form/form_control_layout/form_control_layout_icons.styles.js

@@ -0,0 +1,54 @@
+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.
+ */
+
+import { css } from '@emotion/react';
+import { logicalCSS, mathWithUnits } from '../../../global_styling';
+import { euiFormVariables } from '../form.styles';
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "3lf9c4-euiFormControlLayoutIcons",
+  styles: "pointer-events:none;display:flex;align-items:center;label:euiFormControlLayoutIcons;"
+} : {
+  name: "3lf9c4-euiFormControlLayoutIcons",
+  styles: "pointer-events:none;display:flex;align-items:center;label:euiFormControlLayoutIcons;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+export var euiFormControlLayoutIconsStyles = function euiFormControlLayoutIconsStyles(euiThemeContext) {
+  var _euiFormVariables = euiFormVariables(euiThemeContext),
+    controlPadding = _euiFormVariables.controlPadding,
+    controlCompressedPadding = _euiFormVariables.controlCompressedPadding,
+    controlDisabledColor = _euiFormVariables.controlDisabledColor;
+  return {
+    euiFormControlLayoutIcons: _ref,
+    uncompressed: "\n      gap: ".concat(mathWithUnits(controlPadding, function (x) {
+      return x / 2;
+    }), ";\n    "),
+    compressed: /*#__PURE__*/css("gap:", mathWithUnits(controlCompressedPadding, function (x) {
+      return x / 2;
+    }), ";;label:compressed;"),
+    disabled: /*#__PURE__*/css("cursor:not-allowed;color:", controlDisabledColor, ";;label:disabled;"),
+    position: {
+      absolute: {
+        absolute: /*#__PURE__*/css("position:absolute;", logicalCSS('vertical', 0), ";;label:absolute;"),
+        uncompressed: {
+          left: /*#__PURE__*/css("z-index:1;", logicalCSS('left', controlPadding), ";;label:left;"),
+          right: /*#__PURE__*/css(logicalCSS('right', controlPadding), ";;label:right;")
+        },
+        compressed: {
+          left: /*#__PURE__*/css("z-index:1;", logicalCSS('left', controlCompressedPadding), ";;label:left;"),
+          right: /*#__PURE__*/css(logicalCSS('right', controlCompressedPadding), ";;label:right;")
+        }
+      },
+      static: {
+        static: /*#__PURE__*/css("position:static;", logicalCSS('height', '100%'), " align-self:stretch;flex-grow:0;", logicalCSS('padding-horizontal', '100%'), ";;label:static;"),
+        uncompressed: logicalCSS('padding-horizontal', controlPadding),
+        compressed: logicalCSS('padding-horizontal', controlCompressedPadding)
+      }
+    }
+  };
+};

package/es/components/form/form_error_text/form_error_text.js

@@ -13,13 +13,17 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 import React from 'react';
 import PropTypes from "prop-types";
 import classNames from 'classnames';
+import { useEuiMemoizedStyles } from '../../../services';
+import { euiFormErrorTextStyles } from './form_error_text.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiFormErrorText = function EuiFormErrorText(_ref) {
   var children = _ref.children,
     className = _ref.className,
     rest = _objectWithoutProperties(_ref, _excluded);
   var classes = classNames('euiFormErrorText', className);
+  var styles = useEuiMemoizedStyles(euiFormErrorTextStyles);
   return ___EmotionJSX("div", _extends({
+    css: styles.euiFormErrorText,
     className: classes,
     "aria-live": "polite"
   }, rest), children);

package/es/components/form/form_error_text/form_error_text.styles.js

@@ -0,0 +1,16 @@
+/*
+ * 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 euiFormErrorTextStyles = function euiFormErrorTextStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  return {
+    euiFormErrorText: /*#__PURE__*/css(logicalCSS('padding-top', euiTheme.size.xs), " ", euiFontSize(euiThemeContext, 'xs'), " color:", euiTheme.colors.danger, ";;label:euiFormErrorText;")
+  };
+};

package/es/components/form/form_fieldset/form_legend.js

@@ -13,7 +13,9 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 import React from 'react';
 import PropTypes from "prop-types";
 import classNames from 'classnames';
+import { useEuiMemoizedStyles } from '../../../services';
 import { EuiScreenReaderOnly } from '../../accessibility';
+import { euiFormLegendStyles } from './form_legend.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiFormLegend = function EuiFormLegend(_ref) {
   var children = _ref.children,
@@ -23,11 +25,13 @@ export var EuiFormLegend = function EuiFormLegend(_ref) {
     compressed = _ref.compressed,
     rest = _objectWithoutProperties(_ref, _excluded);
   var isLegendHidden = display === 'hidden';
+  var styles = useEuiMemoizedStyles(euiFormLegendStyles);
+  var cssStyles = [styles.euiFormLegend, !isLegendHidden && (compressed ? styles.compressed : styles.uncompressed)];
   var classes = classNames('euiFormLegend', {
-    'euiFormLegend-isHidden': isLegendHidden,
-    'euiFormLegend--compressed': compressed
+    'euiFormLegend-isHidden': isLegendHidden
   }, className);
   return ___EmotionJSX("legend", _extends({
+    css: cssStyles,
     className: classes
   }, rest), isLegendHidden ? ___EmotionJSX(EuiScreenReaderOnly, null, ___EmotionJSX("span", null, children)) : children);
 };

package/es/components/form/form_fieldset/form_legend.styles.js

@@ -0,0 +1,20 @@
+/*
+ * 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 } from '../../../global_styling';
+import { euiFormLabel } from '../form_label/form_label.styles';
+export var euiFormLegendStyles = function euiFormLegendStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  return {
+    euiFormLegend: /*#__PURE__*/css(euiFormLabel(euiThemeContext), ";;label:euiFormLegend;"),
+    // Skip css`` to avoid generating an extra Emotion className
+    uncompressed: logicalCSS('margin-bottom', euiTheme.size.s),
+    compressed: /*#__PURE__*/css(logicalCSS('margin-bottom', euiTheme.size.xs), ";label:compressed;")
+  };
+};

package/es/components/form/form_help_text/form_help_text.js

@@ -13,13 +13,17 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 import React from 'react';
 import PropTypes from "prop-types";
 import classNames from 'classnames';
+import { useEuiMemoizedStyles } from '../../../services';
+import { euiFormHelpTextStyles } from './form_help_text.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiFormHelpText = function EuiFormHelpText(_ref) {
   var children = _ref.children,
     className = _ref.className,
     rest = _objectWithoutProperties(_ref, _excluded);
   var classes = classNames('euiFormHelpText', className);
+  var styles = useEuiMemoizedStyles(euiFormHelpTextStyles);
   return ___EmotionJSX("div", _extends({
+    css: styles.euiFormHelpText,
     className: classes
   }, rest), children);
 };

package/es/components/form/form_help_text/form_help_text.styles.js

@@ -0,0 +1,16 @@
+/*
+ * 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 euiFormHelpTextStyles = function euiFormHelpTextStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  return {
+    euiFormHelpText: /*#__PURE__*/css(logicalCSS('padding-top', euiTheme.size.xs), " ", euiFontSize(euiThemeContext, 'xs'), " color:", euiTheme.colors.darkShade, ";;label:euiFormHelpText;")
+  };
+};

package/es/components/form/form_label/form_label.js

@@ -13,6 +13,8 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 import React from 'react';
 import PropTypes from "prop-types";
 import classNames from 'classnames';
+import { useEuiMemoizedStyles } from '../../../services';
+import { euiFormLabelStyles } from './form_label.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiFormLabel = function EuiFormLabel(_ref) {
   var _ref$type = _ref.type,
@@ -23,6 +25,8 @@ export var EuiFormLabel = function EuiFormLabel(_ref) {
     children = _ref.children,
     className = _ref.className,
     rest = _objectWithoutProperties(_ref, _excluded);
+  var styles = useEuiMemoizedStyles(euiFormLabelStyles);
+  var cssStyles = [styles.euiFormLabel, !isDisabled && styles.notDisabled, isInvalid && styles.invalid, isFocused && styles.focused];
   var classes = classNames('euiFormLabel', className, {
     'euiFormLabel-isFocused': isFocused,
     'euiFormLabel-isInvalid': isInvalid,
@@ -30,10 +34,12 @@ export var EuiFormLabel = function EuiFormLabel(_ref) {
   });
   if (type === 'legend') {
     return ___EmotionJSX("legend", _extends({
+      css: cssStyles,
       className: classes
     }, rest), children);
   } else {
     return ___EmotionJSX("label", _extends({
+      css: cssStyles,
       className: classes
     }, rest), children);
   }

package/es/components/form/form_label/form_label.styles.js

@@ -0,0 +1,38 @@
+var _excluded = ["fontWeight"];
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+/*
+ * 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 { serializeStyles } from '@emotion/serialize';
+import { euiCanAnimate, euiTextBreakWord } from '../../../global_styling';
+import { euiTitle } from '../../title/title.styles';
+export var euiFormLabel = function euiFormLabel(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  // Exclude the fontWeight from the title, since we're setting our own later
+  var _euiTitle = euiTitle(euiThemeContext, 'xxxs'),
+    _ = _euiTitle.fontWeight,
+    _titleStyles = _objectWithoutProperties(_euiTitle, _excluded);
+  // Since we're not returning a css`` string (to avoid generating an extra Emotion
+  // className), we need to manually serialize the style object into a string
+  var titleStyles = serializeStyles([_titleStyles]).styles;
+  return "\n    ".concat(titleStyles, "\n    font-weight: ").concat(euiTheme.font.weight.semiBold, ";\n    ").concat(euiTextBreakWord(), "\n  ");
+};
+export var euiFormLabelStyles = function euiFormLabelStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  return {
+    euiFormLabel: /*#__PURE__*/css(euiFormLabel(euiThemeContext), " display:inline-block;", euiCanAnimate, "{transition:color ", euiTheme.animation.fast, " ", euiTheme.animation.resistance, ";};label:euiFormLabel;"),
+    // Skip css`` to avoid generating an extra Emotion className
+    // Use :where to reduce specificity & make the CSS easier to override by prepend/append nodes
+    notDisabled: "\n      &:where([for]) {\n        cursor: pointer;\n      }\n    ",
+    invalid: /*#__PURE__*/css("color:", euiTheme.colors.danger, ";;label:invalid;"),
+    // Focused state should override invalid state
+    focused: /*#__PURE__*/css("color:", euiTheme.colors.primary, ";;label:focused;")
+  };
+};