@elastic/eui 95.7.0 → 95.8.0-backport.0

package/i18ntokens.json

@@ -1391,14 +1391,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 281,
+        "line": 280,
         "column": 18,
-        "index": 10032
+        "index": 9968
       },
       "end": {
-        "line": 284,
+        "line": 283,
         "column": 20,
-        "index": 10156
+        "index": 10092
       }
     },
     "filepath": "src/components/datagrid/controls/column_selector.tsx"
@@ -1409,14 +1409,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 294,
+        "line": 293,
         "column": 18,
-        "index": 10516
+        "index": 10452
       },
       "end": {
-        "line": 297,
+        "line": 296,
         "column": 20,
-        "index": 10638
+        "index": 10574
       }
     },
     "filepath": "src/components/datagrid/controls/column_selector.tsx"
@@ -4793,14 +4793,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 104,
+        "line": 105,
         "column": 49,
-        "index": 2946
+        "index": 2960
       },
       "end": {
-        "line": 110,
+        "line": 111,
         "column": 3,
-        "index": 3167
+        "index": 3181
       }
     },
     "filepath": "src/components/form/field_password/field_password.tsx"
@@ -4811,18 +4811,36 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 104,
+        "line": 105,
         "column": 49,
-        "index": 2946
+        "index": 2960
       },
       "end": {
-        "line": 110,
+        "line": 111,
         "column": 3,
-        "index": 3167
+        "index": 3181
       }
     },
     "filepath": "src/components/form/field_password/field_password.tsx"
   },
+  {
+    "token": "euiFieldSearch.clearSearchButtonLabel",
+    "defString": "Clear search input",
+    "highlighting": "string",
+    "loc": {
+      "start": {
+        "line": 260,
+        "column": 6,
+        "index": 7437
+      },
+      "end": {
+        "line": 263,
+        "column": 7,
+        "index": 7544
+      }
+    },
+    "filepath": "src/components/form/field_search/field_search.tsx"
+  },
   {
     "token": "euiFilePicker.promptText",
     "defString": "Select or drag and drop a file",
@@ -4901,14 +4919,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 38,
-        "column": 4,
-        "index": 1180
+        "line": 34,
+        "column": 20,
+        "index": 1321
       },
       "end": {
-        "line": 41,
-        "column": 5,
-        "index": 1274
+        "line": 37,
+        "column": 3,
+        "index": 1399
       }
     },
     "filepath": "src/components/form/form_control_layout/form_control_layout_clear_button.tsx"
@@ -4919,14 +4937,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 82,
+        "line": 121,
         "column": 27,
-        "index": 2237
+        "index": 3395
       },
       "end": {
-        "line": 85,
+        "line": 124,
         "column": 3,
-        "index": 2313
+        "index": 3471
       }
     },
     "filepath": "src/components/form/form_control_layout/form_control_layout_delimited.tsx"
@@ -4937,14 +4955,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 94,
+        "line": 97,
         "column": 8,
-        "index": 2536
+        "index": 2581
       },
       "end": {
-        "line": 97,
+        "line": 100,
         "column": 9,
-        "index": 2657
+        "index": 2702
       }
     },
     "filepath": "src/components/form/form.tsx"

package/lib/components/combo_box/combo_box_input/combo_box_input.js

@@ -257,13 +257,14 @@ var EuiComboBoxInput = exports.EuiComboBoxInput = /*#__PURE__*/function (_Compon
       return (0, _react2.jsx)(_services.RenderWithEuiStylesMemoizer, null, function (stylesMemoizer) {
         var styles = stylesMemoizer(_combo_box_input.euiComboBoxInputStyles);
         var cssStyles = [styles.euiComboBoxInputWrapper, !singleSelection && styles.multiSelect, compressed ? styles.compressed : styles.uncompressed].concat(_toConsumableArray(_this2.asPlainText || showPlaceholder ? [styles.plainText.plainText, compressed ? styles.plainText.compressed : styles.plainText.uncompressed] : []), [isDisabled ? styles.disabled : isInvalid ? styles.invalid : isListOpen ? styles.open : undefined, isInGroup && styles.inGroup]);
-        var formLayoutStyles = [styles.formLayout.euiComboBox__formControlLayout, !singleSelection && styles.formLayout.multiSelect, isInGroup && !append && styles.formLayout.prependOnly, isInGroup && !prepend && styles.formLayout.appendOnly];
+        var formLayoutStyles = [styles.formLayout.euiComboBox__formControlLayout, !singleSelection && styles.formLayout.multiSelect];
         return (0, _react2.jsx)(_form_control_layout.EuiFormControlLayout, _extends({
           icon: icon
         }, clickProps, {
           inputId: id,
           isLoading: isLoading,
           isInvalid: isInvalid,
+          isDisabled: isDisabled,
           compressed: compressed,
           fullWidth: fullWidth,
           prepend: prepend,

package/lib/components/combo_box/combo_box_input/combo_box_input.styles.js

@@ -54,11 +54,7 @@ var euiComboBoxInputStyles = exports.euiComboBoxInputStyles = function euiComboB
     formLayout: {
       euiComboBox__formControlLayout: /*#__PURE__*/(0, _react.css)(";label:euiComboBox__formControlLayout;"),
       // Allow the form control to expand to any height to accommodate multiple rows of pills
-      // TODO: Remove && specificity override once EuiFormControlLayout is on Emotion
-      multiSelect: /*#__PURE__*/(0, _react.css)("&&{", (0, _global_styling.logicalCSS)('height', 'auto'), ";};label:multiSelect;"),
-      // Fix overflowing input wrapper background
-      prependOnly: /*#__PURE__*/(0, _react.css)(".euiFormControlLayout__childrenWrapper{", (0, _global_styling.logicalCSS)('border-top-right-radius', 'inherit'), " ", (0, _global_styling.logicalCSS)('border-bottom-right-radius', 'inherit'), ";};label:prependOnly;"),
-      appendOnly: /*#__PURE__*/(0, _react.css)(".euiFormControlLayout__childrenWrapper{", (0, _global_styling.logicalCSS)('border-top-left-radius', 'inherit'), " ", (0, _global_styling.logicalCSS)('border-bottom-left-radius', 'inherit'), ";};label:appendOnly;")
+      multiSelect: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', 'auto'), ";;label:multiSelect;")
     }
   };
 };

package/lib/components/datagrid/controls/column_selector.js

@@ -167,8 +167,7 @@ var useDataGridColumnSelector = exports.useDataGridColumnSelector = function use
           label: displayValues[id] || id,
           showLabel: false,
           checked: visibleColumnIds.has(id),
-          compressed: true,
-          className: "euiSwitch--mini",
+          mini: true,
           onChange: function onChange(event) {
             var checked = event.target.checked;
             var nextVisibleColumns = sortedColumns.filter(function (columnId) {

package/lib/components/datagrid/data_grid.a11y.js

@@ -183,7 +183,7 @@ describe('EuiDataGrid', function () {
     it('has zero violations when the columns reorder searchbox returns multiple results', function () {
       cy.get('button[data-test-subj="dataGridColumnSelectorButton"]').realClick();
       cy.get('input[data-test-subj="dataGridColumnSelectorSearch"]').type('a');
-      cy.get('div.euiSwitch--compressed').should(function ($s) {
+      cy.get('.euiSwitch').should(function ($s) {
         expect($s).to.have.length(5);
       });
       cy.checkAxe();
@@ -191,7 +191,7 @@ describe('EuiDataGrid', function () {
     it('has zero violations when the columns reorder searchbox returns 1 result', function () {
       cy.get('button[data-test-subj="dataGridColumnSelectorButton"]').realClick();
       cy.get('input[data-test-subj="dataGridColumnSelectorSearch"]').type('favorite');
-      cy.get('div.euiSwitch--compressed').should(function ($s) {
+      cy.get('.euiSwitch').should(function ($s) {
         expect($s).to.have.length(1);
       });
       cy.checkAxe();

package/lib/components/date_picker/date_picker.js

@@ -29,10 +29,14 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 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 _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure 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 _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 _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+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 _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; }
 var euiDatePickerDefaultDateFormat = exports.euiDatePickerDefaultDateFormat = 'MM/DD/YYYY';
@@ -115,14 +119,13 @@ var EuiDatePicker = exports.EuiDatePicker = function EuiDatePicker(_ref) {
     timeFormat = _ref$timeFormat === void 0 ? euiDatePickerDefaultTimeFormat : _ref$timeFormat,
     utcOffset = _ref.utcOffset,
     rest = _objectWithoutProperties(_ref, _excluded);
+  // Check for whether the passed `selected` moment date is valid
+  var isInvalid = _isInvalid || ((selected === null || selected === void 0 ? void 0 : selected.isValid()) === false ? true : undefined);
   var styles = (0, _services.useEuiMemoizedStyles)(_date_picker.euiDatePickerStyles);
-  var cssStyles = [styles.euiDatePicker, inline && styles.inline, inline && shadow && styles.shadow];
+  var cssStyles = [styles.euiDatePicker].concat(_toConsumableArray(inline ? [styles.inline.inline, isInvalid && !(disabled || readOnly) && styles.inline.invalid, shadow ? styles.inline.shadow : styles.inline.noShadow, disabled && styles.inline.disabled, readOnly && styles.inline.readOnly] : []));
   var calendarStyles = (0, _services.useEuiMemoizedStyles)(_react_date_picker.euiReactDatePickerStyles);
   var classes = (0, _classnames.default)('euiDatePicker', className);
 
-  // Check for whether the passed `selected` moment date is valid
-  var isInvalid = _isInvalid || ((selected === null || selected === void 0 ? void 0 : selected.isValid()) === false ? true : undefined);
-
   // Passed to the default EuiFieldText input, not passed to custom inputs
   var defaultInputProps = !inline && !customInput ? {
     compressed: compressed,
@@ -213,11 +216,8 @@ var EuiDatePicker = exports.EuiDatePicker = function EuiDatePicker(_ref) {
     isInvalid: isInvalid,
     isDisabled: disabled,
     readOnly: readOnly,
-    className: (0, _classnames.default)({
-      // Take advantage of `euiFormControlLayoutDelimited`'s replacement input styling
-      euiFormControlLayoutDelimited: inline,
-      'euiFormControlLayoutDelimited--isInvalid': inline && isInvalid && !disabled && !readOnly
-    }),
+    isDelimited: inline // Styling shortcut for inline calendars
+    ,
     iconsPosition: inline ? 'static' : undefined
   }, control));
 };

package/lib/components/date_picker/date_picker.styles.js

@@ -7,6 +7,7 @@ exports.euiDatePickerStyles = void 0;
 var _react = require("@emotion/react");
 var _global_styling = require("../../global_styling");
 var _mixins = require("../../themes/amsterdam/global_styling/mixins");
+var _form = require("../form/form.styles");
 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
@@ -26,7 +27,18 @@ var euiDatePickerStyles = exports.euiDatePickerStyles = function euiDatePickerSt
   var euiTheme = euiThemeContext.euiTheme;
   return {
     euiDatePicker: _ref,
-    inline: /*#__PURE__*/(0, _react.css)(".euiFormControlLayout{", (0, _global_styling.logicalCSS)('height', 'auto'), " ", (0, _global_styling.logicalCSS)('width', 'fit-content'), " background-color:transparent;box-shadow:none;padding:0;}.euiFormControlLayoutDelimited .euiFormControlLayout__childrenWrapper{background-color:transparent;flex-direction:column;}.euiFormControlLayoutIcons{justify-content:center;", (0, _global_styling.logicalCSS)('padding-bottom', euiTheme.size.s), ";};label:inline;"),
-    shadow: /*#__PURE__*/(0, _react.css)(".euiFormControlLayout{", (0, _mixins.euiShadowMedium)(euiThemeContext), ";}.euiFormControlLayoutDelimited .euiFormControlLayout__childrenWrapper{background-color:", euiTheme.colors.emptyShade, ";};label:shadow;")
+    inline: {
+      inline: /*#__PURE__*/(0, _react.css)(".euiFormControlLayout{", (0, _global_styling.logicalCSS)('height', 'auto'), " ", (0, _global_styling.logicalCSS)('width', 'fit-content'), " box-shadow:none;padding:0;}.euiFormControlLayout__childrenWrapper{flex-direction:column;}.euiFormControlLayoutIcons{justify-content:center;", (0, _global_styling.logicalCSS)('padding-bottom', euiTheme.size.s), ";};label:inline;"),
+      // Skip css`` to avoid generating an Emotion className
+      noShadow: "\n        .euiFormControlLayout {\n          background-color: transparent;\n        }\n      ",
+      shadow: /*#__PURE__*/(0, _react.css)(".euiFormControlLayout{background-color:", euiTheme.colors.emptyShade, ";", (0, _mixins.euiShadowMedium)(euiThemeContext), ";};label:shadow;"),
+      // Needs to come before shadow CSS so that it doesn't override their background-colors
+      invalid: /*#__PURE__*/(0, _react.css)(".euiFormControlLayout{", (0, _form.euiFormControlDefaultShadow)(euiThemeContext, {
+        withBorder: false
+      }), " ", (0, _form.euiFormControlInvalidStyles)(euiThemeContext), ";};label:invalid;"),
+      // Should come after shadow CSS to override their background-colors
+      disabled: /*#__PURE__*/(0, _react.css)(".euiFormControlLayout{", (0, _form.euiFormControlDisabledStyles)(euiThemeContext), ";};label:disabled;"),
+      readOnly: /*#__PURE__*/(0, _react.css)(".euiFormControlLayout{", (0, _form.euiFormControlReadOnlyStyles)(euiThemeContext), ";};label:readOnly;")
+    }
   };
 };

package/lib/components/date_picker/date_picker_range.js

@@ -123,7 +123,8 @@ var EuiDatePickerRange = exports.EuiDatePickerRange = function EuiDatePickerRang
     isInvalid: isInvalid,
     isLoading: isLoading,
     append: inline ? undefined : append,
-    prepend: inline ? undefined : prepend
+    prepend: inline ? undefined : prepend,
+    css: inline && !disabled && (shadow ? inlineStyles.formLayout.shadow : inlineStyles.formLayout.noShadow)
   }));
 };
 EuiDatePickerRange.propTypes = {

package/lib/components/date_picker/date_picker_range.styles.js

@@ -7,17 +7,24 @@ exports.euiDatePickerRangeStyles = exports.euiDatePickerRangeInlineStyles = void
 var _react = require("@emotion/react");
 var _global_styling = require("../../global_styling");
 var _mixins = require("../../themes/amsterdam/global_styling/mixins");
-/*
+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 euiDatePickerRangeStyles = exports.euiDatePickerRangeStyles = {
   euiDatePickerRange: /*#__PURE__*/(0, _react.css)(".euiPopover,.react-datepicker__input-container,.euiDatePicker{", (0, _global_styling.logicalCSS)('height', '100%'), ";};label:euiDatePickerRange;")
 };
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "bicgs9-noShadow",
+  styles: "background-color:transparent;label:noShadow;"
+} : {
+  name: "bicgs9-noShadow",
+  styles: "background-color:transparent;label:noShadow;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
 var euiDatePickerRangeInlineStyles = exports.euiDatePickerRangeInlineStyles = function euiDatePickerRangeInlineStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
 
@@ -29,9 +36,15 @@ var euiDatePickerRangeInlineStyles = exports.euiDatePickerRangeInlineStyles = fu
     return "\n    display: block;\n    container-type: inline-size;\n\n    .euiFormControlLayout__childrenWrapper {\n      /* Use static px widths for now, since render behavior comes from a third party library */\n      @container (max-width: ".concat(datePickerWidth * 2 + delimiterWidth, "px) {\n        /* Unset grid display */\n        display: block !important;\n\n        /* Center and point the default delimiter arrow downwards */\n        .euiFormControlLayoutDelimited__delimiter .euiIcon {\n          transform: rotate(90deg);\n          margin-inline: auto;\n        }\n      }\n    }");
   };
   return {
-    euiDatePickerRangeInline: /*#__PURE__*/(0, _react.css)(".euiFormControlLayoutDelimited{", (0, _global_styling.logicalCSS)('height', 'auto'), " ", (0, _global_styling.logicalCSS)('width', 'fit-content'), " ", (0, _global_styling.logicalCSS)('max-width', '100%'), " background-color:transparent;box-shadow:none;padding:0;.euiFormControlLayout__childrenWrapper{display:grid;grid-template-columns:1fr auto 1fr;grid-template-rows:auto;align-items:stretch;background-color:transparent;}&.euiFormControlLayout--group{&>*,.euiFormControlLayoutDelimited__delimiter{", (0, _global_styling.logicalCSS)('height', 'auto'), ";}}.euiFormControlLayoutIcons{justify-content:center;grid-column:1/span 3;", (0, _global_styling.logicalCSS)('height', 'auto'), " ", (0, _global_styling.logicalCSS)('padding-bottom', euiTheme.size.s), ";}}.react-datepicker{position:relative;};label:euiDatePickerRangeInline;"),
+    euiDatePickerRangeInline: /*#__PURE__*/(0, _react.css)(".euiFormControlLayoutDelimited{", (0, _global_styling.logicalCSS)('height', 'auto'), " ", (0, _global_styling.logicalCSS)('width', 'fit-content'), " ", (0, _global_styling.logicalCSS)('max-width', '100%'), " box-shadow:none;padding:0;.euiFormControlLayout__childrenWrapper{display:grid;grid-template-columns:1fr auto 1fr;grid-template-rows:auto;align-items:stretch;background-color:transparent;}.euiFormControlLayoutIcons{justify-content:center;grid-column:1/span 3;", (0, _global_styling.logicalCSS)('height', 'auto'), " ", (0, _global_styling.logicalCSS)('padding-bottom', euiTheme.size.s), ";}}.react-datepicker{position:relative;};label:euiDatePickerRangeInline;"),
     responsive: /*#__PURE__*/(0, _react.css)(containerQuery(268), ";;label:responsive;"),
     responsiveWithTimeSelect: /*#__PURE__*/(0, _react.css)(containerQuery(374), ";;label:responsiveWithTimeSelect;"),
-    shadow: /*#__PURE__*/(0, _react.css)(".euiFormControlLayoutDelimited{", (0, _mixins.euiShadowMedium)(euiThemeContext), " .euiFormControlLayout__childrenWrapper{background-color:", euiTheme.colors.emptyShade, ";}};label:shadow;")
+    shadow: /*#__PURE__*/(0, _react.css)(".euiFormControlLayoutDelimited{", (0, _mixins.euiShadowMedium)(euiThemeContext), ";};label:shadow;"),
+    // Applied directly to EuiFormControlLayout so we can check if `disabled`
+    // and allow the disabled background-color to take precedence
+    formLayout: {
+      noShadow: _ref,
+      shadow: /*#__PURE__*/(0, _react.css)("background-color:", euiTheme.colors.emptyShade, ";;label:shadow;")
+    }
   };
 };

package/lib/components/date_picker/super_date_picker/super_date_picker.js

@@ -23,10 +23,15 @@ var _date_popover_button = require("./date_popover/date_popover_button");
 var _auto_refresh = require("../auto_refresh/auto_refresh");
 var _super_date_picker = require("./super_date_picker.styles");
 var _react2 = require("@emotion/react");
+var _excluded = ["isDisabled"];
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 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; }
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+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 _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 _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); } }
@@ -288,7 +293,7 @@ var EuiSuperDatePickerInternal = exports.EuiSuperDatePickerInternal = /*#__PURE_
         compressed: compressed,
         isInvalid: isInvalid,
         isLoading: isLoading && !showUpdateButton,
-        disabled: !!isDisabled,
+        isDisabled: !!isDisabled,
         prepend: _this.renderQuickSelect(),
         append: autoRefreshAppend,
         fullWidth: true,
@@ -319,9 +324,16 @@ var EuiSuperDatePickerInternal = exports.EuiSuperDatePickerInternal = /*#__PURE_
         })));
       }
       var rangeCssStyles = [styles.euiSuperDatePicker__range, formControlLayoutProps.css];
+
+      // EuiFormControlLayout wants `isDisabled`, EuiDatePickerRange wants `disabled` :T
+      var _ = formControlLayoutProps.isDisabled,
+        _rangeProps = _objectWithoutProperties(formControlLayoutProps, _excluded);
+      var rangeProps = _objectSpread(_objectSpread({}, _rangeProps), {}, {
+        disabled: formControlLayoutProps.isDisabled
+      });
       return (0, _react2.jsx)(_context.EuiI18nConsumer, null, function (_ref4) {
         var contextLocale = _ref4.locale;
-        return (0, _react2.jsx)(_date_picker_range.EuiDatePickerRange, _extends({}, formControlLayoutProps, {
+        return (0, _react2.jsx)(_date_picker_range.EuiDatePickerRange, _extends({}, rangeProps, {
           css: rangeCssStyles,
           isCustom: true,
           iconType: false,

package/lib/components/date_picker/super_date_picker/super_date_picker.styles.js

@@ -46,7 +46,7 @@ var euiSuperDatePickerStyles = exports.euiSuperDatePickerStyles = function euiSu
   var needsUpdatingBackgroundColor = colorMode === 'DARK' ? (0, _services.shade)(euiTheme.colors.success, 0.7) : (0, _services.tint)(euiTheme.colors.success, 0.9);
   var needsUpdatingTextColor = (0, _services.makeHighContrastColor)(euiTheme.colors.success)(needsUpdatingBackgroundColor);
   return {
-    euiSuperDatePicker: /*#__PURE__*/(0, _react.css)("display:flex;gap:", gap, ";", (0, _global_styling.logicalCSS)('max-width', '100%'), " ", (0, _global_styling.euiMaxBreakpoint)(euiThemeContext, 'm'), "{", (0, _global_styling.logicalCSS)('width', '100%'), ";}.euiFormControlLayout__childrenWrapper:last-child{", (0, _global_styling.logicalCSS)('border-top-right-radius', 'inherit'), " ", (0, _global_styling.logicalCSS)('border-bottom-right-radius', 'inherit'), ";};label:euiSuperDatePicker;"),
+    euiSuperDatePicker: /*#__PURE__*/(0, _react.css)("display:flex;gap:", gap, ";", (0, _global_styling.logicalCSS)('max-width', '100%'), " ", (0, _global_styling.euiMaxBreakpoint)(euiThemeContext, 'm'), "{", (0, _global_styling.logicalCSS)('width', '100%'), ";};label:euiSuperDatePicker;"),
     widths: {
       restricted: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('width', restrictedWidth), ";;label:restricted;"),
       full: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('width', '100%'), ";;label:full;"),
@@ -66,9 +66,9 @@ var euiSuperDatePickerStyles = exports.euiSuperDatePickerStyles = function euiSu
       full: "\n        label: isAutoRefreshOnly;\n        display: block;\n      "
     },
     // isQuickSelectOnly forces `width` to be `auto`
-    isQuickSelectOnly: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('min-width', 0), ";;label:isQuickSelectOnly;"),
+    isQuickSelectOnly: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('min-width', 0), ".euiFormControlLayout__prepend{", (0, _global_styling.logicalCSS)('max-width', 'none'), ";};label:isQuickSelectOnly;"),
     euiSuperDatePicker__range: _ref,
-    euiSuperDatePicker__rangeInput: /*#__PURE__*/(0, _react.css)("flex-grow:1;", (0, _global_styling.logicalCSS)('width', 'auto !important'), ";;label:euiSuperDatePicker__rangeInput;"),
+    euiSuperDatePicker__rangeInput: /*#__PURE__*/(0, _react.css)("flex-grow:1;", (0, _global_styling.logicalCSS)('width', 'auto'), ";;label:euiSuperDatePicker__rangeInput;"),
     euiSuperDatePicker__prettyFormat: /*#__PURE__*/(0, _react.css)(_buttonStyles(euiThemeContext), " text-align:start;;label:euiSuperDatePicker__prettyFormat;"),
     // Form states
     states: {
@@ -76,7 +76,7 @@ var euiSuperDatePickerStyles = exports.euiSuperDatePickerStyles = function euiSu
       default: /*#__PURE__*/(0, _react.css)(".euiFormControlLayout__childrenWrapper{color:", forms.textColor, ";background-color:", forms.backgroundColor, ";}.euiDatePopoverButton{", (0, _form.euiFormControlDefaultShadow)(euiThemeContext), " box-shadow:none;}.euiDatePopoverButton:focus,.euiPopover-isOpen .euiDatePopoverButton{--euiFormControlStateColor:", euiTheme.colors.primary, ";background-size:100% 100%;};label:default;"),
       disabled: /*#__PURE__*/(0, _react.css)(".euiFormControlLayout__childrenWrapper{", (0, _form.euiFormControlDisabledStyles)(euiThemeContext), ";};label:disabled;"),
       invalid: /*#__PURE__*/(0, _react.css)(".euiFormControlLayout__childrenWrapper{color:", euiTheme.colors.dangerText, ";background-color:", forms.backgroundColor, ";", (0, _form.euiFormControlInvalidStyles)(euiThemeContext), ";};label:invalid;"),
-      needsUpdating: /*#__PURE__*/(0, _react.css)(".euiFormControlLayoutDelimited .euiFormControlLayout__childrenWrapper{color:", needsUpdatingTextColor, ";background-color:", needsUpdatingBackgroundColor, ";}.euiFormControlLayoutDelimited__delimiter{color:inherit;}.euiDatePopoverButton{", (0, _form.euiFormControlDefaultShadow)(euiThemeContext), " background-color:inherit;box-shadow:none;}.euiDatePopoverButton:focus,.euiPopover-isOpen .euiDatePopoverButton{--euiFormControlStateColor:", euiTheme.colors.success, ";background-size:100% 100%;};label:needsUpdating;")
+      needsUpdating: /*#__PURE__*/(0, _react.css)(".euiFormControlLayout__childrenWrapper{color:", needsUpdatingTextColor, ";background-color:", needsUpdatingBackgroundColor, ";}.euiFormControlLayoutDelimited__delimiter{color:inherit;}.euiDatePopoverButton{", (0, _form.euiFormControlDefaultShadow)(euiThemeContext), " background-color:inherit;box-shadow:none;}.euiDatePopoverButton:focus,.euiPopover-isOpen .euiDatePopoverButton{--euiFormControlStateColor:", euiTheme.colors.success, ";background-size:100% 100%;};label:needsUpdating;")
     }
   };
 };

package/lib/components/form/checkbox/checkbox.js

@@ -7,10 +7,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.EuiCheckbox = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _react2 = require("@emotion/react");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _services = require("../../../services");
-var _excluded = ["className", "css", "id", "checked", "label", "onChange", "type", "disabled", "indeterminate", "inputRef", "labelProps"];
+var _icon = require("../../icon");
+var _checkbox = require("./checkbox.styles");
+var _react2 = require("@emotion/react");
+var _excluded = ["className", "id", "checked", "label", "onChange", "type", "disabled", "readOnly", "indeterminate", "inputRef", "labelProps"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -26,7 +28,6 @@ function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, 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; }
 var EuiCheckbox = exports.EuiCheckbox = function EuiCheckbox(_ref) {
   var className = _ref.className,
-    customCss = _ref.css,
     id = _ref.id,
     _ref$checked = _ref.checked,
     checked = _ref$checked === void 0 ? false : _ref$checked,
@@ -35,26 +36,19 @@ var EuiCheckbox = exports.EuiCheckbox = function EuiCheckbox(_ref) {
     type = _ref.type,
     _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$readOnly = _ref.readOnly,
+    readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
     _ref$indeterminate = _ref.indeterminate,
     indeterminate = _ref$indeterminate === void 0 ? false : _ref$indeterminate,
     inputRef = _ref.inputRef,
     labelProps = _ref.labelProps,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var classes = (0, _classnames.default)('euiCheckbox', {
-    'euiCheckbox--noLabel': !label
-  }, className);
-  var styles = {
-    euiCheckbox: /*#__PURE__*/(0, _react2.css)(";label:euiCheckbox;")
-  }; // TODO: Emotion conversion
-  var cssStyles = [styles.euiCheckbox, customCss];
-  var optionalLabel = (0, _react.useMemo)(function () {
-    if (!label) return;
-    var labelClasses = (0, _classnames.default)('euiCheckbox__label', labelProps === null || labelProps === void 0 ? void 0 : labelProps.className);
-    return (0, _react2.jsx)("label", _extends({}, labelProps, {
-      className: labelClasses,
-      htmlFor: id
-    }), label);
-  }, [label, labelProps, id]);
+  var classes = (0, _classnames.default)('euiCheckbox', className);
+  var styles = (0, _services.useEuiMemoizedStyles)(_checkbox.euiCheckboxStyles);
+  var inputStyles = [styles.input.euiCheckbox__square, disabled ? checked || indeterminate ? styles.input.disabled.selected : styles.input.disabled.unselected : checked || indeterminate ? styles.input.enabled.selected : styles.input.enabled.unselected, readOnly && styles.input.readOnly];
+  var labelClasses = (0, _classnames.default)('euiCheckbox__label', labelProps === null || labelProps === void 0 ? void 0 : labelProps.className);
+  var labelStyles = [styles.label.euiCheckbox__label, disabled ? styles.label.disabled : styles.label.enabled, readOnly && styles.label.readOnly, labelProps === null || labelProps === void 0 ? void 0 : labelProps.css];
+  var iconStyles = [styles.input.icon.euiCheckbox__icon, indeterminate ? styles.input.icon.indeterminate : styles.input.icon.check];
 
   // @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes
   var setIndeterminateState = (0, _react.useCallback)(function (input) {
@@ -62,19 +56,29 @@ var EuiCheckbox = exports.EuiCheckbox = function EuiCheckbox(_ref) {
   }, [indeterminate]);
   var refs = (0, _services.useCombinedRefs)([inputRef, setIndeterminateState]);
   return (0, _react2.jsx)("div", {
-    css: cssStyles,
+    css: styles.euiCheckbox,
     className: classes
-  }, (0, _react2.jsx)("input", _extends({
+  }, (0, _react2.jsx)("div", {
+    css: inputStyles,
+    className: "euiCheckbox__square"
+  }, (0, _react2.jsx)(_icon.EuiIcon, {
+    css: iconStyles,
+    type: indeterminate ? 'stopFilled' : checked ? 'check' : 'empty'
+  }), (0, _react2.jsx)("input", _extends({
+    css: styles.input.euiCheckbox__input,
     className: "euiCheckbox__input",
     type: "checkbox",
     id: id,
     checked: checked,
     onChange: onChange,
     disabled: disabled,
+    readOnly: readOnly,
     ref: refs
-  }, rest)), (0, _react2.jsx)("div", {
-    className: "euiCheckbox__square"
-  }), optionalLabel);
+  }, rest))), label && (0, _react2.jsx)("label", _extends({}, labelProps, {
+    css: labelStyles,
+    className: labelClasses,
+    htmlFor: id
+  }), label));
 };
 EuiCheckbox.propTypes = {
   id: _propTypes.default.string.isRequired,

package/lib/components/form/checkbox/checkbox.styles.js

@@ -0,0 +1,66 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiCheckboxStyles = void 0;
+var _react = require("@emotion/react");
+var _form = require("../form.styles");
+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: "1m8ob9b-readOnly",
+  styles: "cursor:default;label:readOnly;"
+} : {
+  name: "1m8ob9b-readOnly",
+  styles: "cursor:default;label:readOnly;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+var _ref2 = process.env.NODE_ENV === "production" ? {
+  name: "u54glv-indeterminate",
+  styles: "transform:scale(0.5);label:indeterminate;"
+} : {
+  name: "u54glv-indeterminate",
+  styles: "transform:scale(0.5);label:indeterminate;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+var euiCheckboxStyles = exports.euiCheckboxStyles = function euiCheckboxStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var controlStyles = (0, _form.euiFormCustomControlStyles)(euiThemeContext);
+  var _euiFormCustomControl = (0, _form.euiFormCustomControlVariables)(euiThemeContext),
+    unselectedBorder = _euiFormCustomControl.colors.unselectedBorder;
+  return {
+    euiCheckbox: /*#__PURE__*/(0, _react.css)(controlStyles.wrapper, ";label:euiCheckbox;"),
+    input: {
+      euiCheckbox__square: /*#__PURE__*/(0, _react.css)(controlStyles.input.fauxInput, " border-radius:", euiTheme.border.radius.small, ";;label:euiCheckbox__square;"),
+      enabled: {
+        selected: /*#__PURE__*/(0, _react.css)(controlStyles.input.enabled.selected, ";label:selected;"),
+        unselected: /*#__PURE__*/(0, _react.css)(controlStyles.input.enabled.unselected, ";label:unselected;")
+      },
+      disabled: {
+        selected: /*#__PURE__*/(0, _react.css)(controlStyles.input.disabled.selected, ";label:selected;"),
+        unselected: /*#__PURE__*/(0, _react.css)(controlStyles.input.disabled.unselected, ";label:unselected;")
+      },
+      // Readonly checkboxes are used by EuiMarkdownEditor
+      // Maintain the initial color to enforce that clicks are not doing anything
+      readOnly: /*#__PURE__*/(0, _react.css)("&:has(input:focus-visible){outline:", euiTheme.focus.width, " solid ", unselectedBorder, ";}&:has(input:focus){border-color:", unselectedBorder, ";};label:readOnly;"),
+      icon: {
+        euiCheckbox__icon: /*#__PURE__*/(0, _react.css)(";label:euiCheckbox__icon;"),
+        check: /*#__PURE__*/(0, _react.css)(controlStyles.input.icon, " stroke:currentColor;;label:check;"),
+        indeterminate: _ref2
+      },
+      euiCheckbox__input: /*#__PURE__*/(0, _react.css)(controlStyles.input.hiddenInput, " &[readonly]{cursor:default;};label:euiCheckbox__input;")
+    },
+    label: {
+      euiCheckbox__label: /*#__PURE__*/(0, _react.css)(controlStyles.label.label, ";label:euiCheckbox__label;"),
+      enabled: controlStyles.label.enabled,
+      disabled: /*#__PURE__*/(0, _react.css)(controlStyles.label.disabled, ";label:disabled;"),
+      readOnly: _ref
+    }
+  };
+};