@elastic/eui 70.3.0 → 71.0.0

package/test-env/global_styling/functions/logical_shorthands.js

@@ -0,0 +1,184 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.logicalShorthandCSS = exports.logicalBorderRadiusCSS = exports.LOGICAL_SHORTHANDS = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _logicals = _interopRequireDefault(require("./logicals.json"));
+
+/*
+ * 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 LOGICAL_SHORTHANDS = _logicals.default._shorthands;
+exports.LOGICAL_SHORTHANDS = LOGICAL_SHORTHANDS;
+
+/**
+ * Unfortunately, shorthand properties that describe boxes
+ * (@see https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box)
+ * do not currently automatically respond to logical changes in display direction
+ * (@see https://github.com/w3c/csswg-drafts/issues/1282)
+ *
+ * This utility is essentially a stop-gap for those shorthand properties,
+ * converting them to corresponding longer logical `-inline` and `-block` properties
+ *
+ * 🗑 NOTE: This file is in a separate util file from logicals.ts due to its relatively
+ * convoluted logic, & to make deleting it easier when an official CSS spec is implemented.
+ */
+var logicalShorthandCSS = function logicalShorthandCSS(property, value) {
+  if (!LOGICAL_SHORTHANDS.includes(property)) {
+    throw new Error("".concat(property, " is not a shorthand property that needs logical CSS"));
+  }
+
+  if (property === 'border-radius') {
+    return logicalBorderRadiusCSS(String(value));
+  } // Split all potential values by spaces
+
+
+  var values = String(value).split(/\s+/);
+  var verticalBlockValue;
+  var horizontalInlineValue;
+
+  switch (values.length) {
+    case 1:
+      // If it's the same value all around, no need to use logical properties
+      return "".concat(property, ": ").concat(value, ";");
+
+    case 2:
+      verticalBlockValue = values[0];
+      horizontalInlineValue = values[1];
+      break;
+
+    case 3:
+      verticalBlockValue = "".concat(values[0], " ").concat(values[2]);
+      horizontalInlineValue = values[1];
+      break;
+
+    case 4:
+    default:
+      verticalBlockValue = "".concat(values[0], " ").concat(values[2]);
+      horizontalInlineValue = "".concat(values[3], " ").concat(values[1]); // Note: left (4th value) comes before right (2nd value)
+
+      break;
+  }
+
+  if (property.includes('border-')) {
+    // Border properties have a different naming syntax than margin/padding/etc
+    var borderProperty = property.split('-')[1];
+    return "\n    border-block-".concat(borderProperty, ": ").concat(verticalBlockValue, ";\n    border-inline-").concat(borderProperty, ": ").concat(horizontalInlineValue, ";\n    ");
+  } else {
+    return "\n    ".concat(property, "-block: ").concat(verticalBlockValue, ";\n    ").concat(property, "-inline: ").concat(horizontalInlineValue, ";\n    ");
+  }
+};
+/**
+ * Logical border radius is unfortunately a very special case as it handles corners
+ * and not sides (@see https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#corners_of_a_box)
+ * and does not have `-inline` or `-block` shorthands.
+ *
+ * It also needs to account for `/` syntax (horizontal vs vertical radii)
+ * @see https://www.sitepoint.com/setting-css3-border-radius-with-slash-syntax/
+ */
+
+
+exports.logicalShorthandCSS = logicalShorthandCSS;
+
+var logicalBorderRadiusCSS = function logicalBorderRadiusCSS(value) {
+  var ignoreZeroes = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  var borderRadiusMap = {
+    'border-start-start-radius': '',
+    'border-start-end-radius': '',
+    'border-end-end-radius': '',
+    'border-end-start-radius': ''
+  };
+  var values = [];
+
+  if (value.includes('/')) {
+    values = ['', '', '', '']; // Split into horizontal & vertical radii strings
+
+    value.split('/').forEach(function (radiiAxes) {
+      var radii = radiiAxes.trim().split(/\s+/);
+      values.forEach(function (_, i) {
+        // Add a space between the horizontal and vertical radius
+        var combinedValue = values[i] ? "".concat(values[i], " ") : values[i];
+
+        switch (radii.length) {
+          case 1:
+            // Every value is repeated
+            combinedValue += radii[0];
+            break;
+
+          case 2:
+            // If the corner is an even index, give it the first value, if odd, second value
+            combinedValue += i % 2 ? radii[1] : radii[0];
+            break;
+
+          case 3:
+            // The last corner should repeat the second value
+            combinedValue += i === 3 ? radii[1] : radii[i];
+            break;
+
+          case 4:
+          default:
+            // Every value is specified
+            combinedValue += radii[i];
+        }
+
+        values[i] = combinedValue;
+      });
+    });
+  } else {
+    values = value.split(/\s+/);
+  }
+
+  switch (values.length) {
+    case 1:
+      // If it's the same value all around, no need to use logical properties
+      return "border-radius: ".concat(value, ";");
+
+    case 2:
+      borderRadiusMap['border-start-start-radius'] = values[0];
+      borderRadiusMap['border-start-end-radius'] = values[1];
+      borderRadiusMap['border-end-end-radius'] = values[0];
+      borderRadiusMap['border-end-start-radius'] = values[1];
+      break;
+
+    case 3:
+      borderRadiusMap['border-start-start-radius'] = values[0];
+      borderRadiusMap['border-start-end-radius'] = values[1];
+      borderRadiusMap['border-end-end-radius'] = values[2];
+      borderRadiusMap['border-end-start-radius'] = values[1];
+      break;
+
+    case 4:
+    default:
+      borderRadiusMap['border-start-start-radius'] = values[0];
+      borderRadiusMap['border-start-end-radius'] = values[1];
+      borderRadiusMap['border-end-end-radius'] = values[2];
+      borderRadiusMap['border-end-start-radius'] = values[3];
+      break;
+  }
+
+  var borderRadiusCSS = [];
+  Object.entries(borderRadiusMap).forEach(function (_ref) {
+    var _ref2 = (0, _slicedToArray2.default)(_ref, 2),
+        property = _ref2[0],
+        value = _ref2[1];
+
+    if (value) {
+      if (ignoreZeroes && value !== '0' && value !== '0px' || !ignoreZeroes) {
+        borderRadiusCSS.push("".concat(property, ": ").concat(value, ";"));
+      }
+    }
+  });
+  return borderRadiusCSS.join('\n');
+};
+
+exports.logicalBorderRadiusCSS = logicalBorderRadiusCSS;

package/test-env/global_styling/functions/logicals.js

@@ -5,13 +5,17 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.logicals = exports.logicalTextAlignStyle = exports.logicalTextAlignCSS = exports.logicalText = exports.logicalStyle = exports.logicalSizeStyle = exports.logicalSizeCSS = exports.logicalSide = exports.logicalCSSWithFallback = exports.logicalCSS = exports.LOGICAL_TEXT_ALIGNMENT = exports.LOGICAL_SIDES = exports.LOGICAL_PROPERTIES = void 0;
+exports.logicals = exports.logicalTextAlignStyle = exports.logicalTextAlignCSS = exports.logicalText = exports.logicalStyles = exports.logicalStyle = exports.logicalSizeStyle = exports.logicalSizeCSS = exports.logicalSide = exports.logicalCSSWithFallback = exports.logicalCSS = exports.LOGICAL_TEXT_ALIGNMENT = exports.LOGICAL_SIDES = exports.LOGICAL_PROPERTIES = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
 var _common = require("../../components/common");
 
-var _logicals = _interopRequireDefault(require("./logicals.json"));
+var _logicals2 = _interopRequireDefault(require("./logicals.json"));
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
@@ -34,9 +38,13 @@ var logicalSide = {
 exports.logicalSide = logicalSide;
 var LOGICAL_SIDES = (0, _common.keysOf)(logicalSide);
 exports.LOGICAL_SIDES = LOGICAL_SIDES;
-var logicals = _logicals.default;
+var logicals = _logicals2.default;
 exports.logicals = logicals;
-var LOGICAL_PROPERTIES = (0, _common.keysOf)(logicals);
+
+var _shorthands = _logicals2.default._shorthands,
+    _logicals = (0, _objectWithoutProperties2.default)(_logicals2.default, ["_shorthands"]);
+
+var LOGICAL_PROPERTIES = (0, _common.keysOf)(_logicals);
 exports.LOGICAL_PROPERTIES = LOGICAL_PROPERTIES;
 
 /**
@@ -65,6 +73,22 @@ exports.logicalCSS = logicalCSS;
 var logicalCSSWithFallback = function logicalCSSWithFallback(property, value) {
   return "\n  ".concat(property, ": ").concat(value, ";\n  ").concat(logicalCSS(property, value), "\n");
 };
+/**
+ * Casing utils for swapping between camel case (style objs) and kebab case (CSS)
+ */
+
+
+exports.logicalCSSWithFallback = logicalCSSWithFallback;
+
+var camelCase = function camelCase(kebabCasedString) {
+  return kebabCasedString.replace(/-\w/g, function (str) {
+    return str.charAt(1).toUpperCase();
+  });
+};
+
+var kebabCase = function kebabCase(camelCasedString) {
+  return camelCasedString.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
+};
 /**
  *
  * @param property A string that is a valid CSS logical property
@@ -73,14 +97,37 @@ var logicalCSSWithFallback = function logicalCSSWithFallback(property, value) {
  */
 
 
-exports.logicalCSSWithFallback = logicalCSSWithFallback;
-
 var logicalStyle = function logicalStyle(property, value) {
-  // Strip hyphens and camelCase the CSS logical property so React doesn't throw errors
-  var camelCasedProperty = logicals[property].replace(/-\w/g, function (str) {
-    return str.charAt(1).toUpperCase();
+  return (0, _defineProperty2.default)({}, camelCase(logicals[property]), value);
+};
+/**
+ * Given a style object with any amount of unknown CSS properties,
+ * find ones that can be converted to logical properties and convert them
+ *
+ * @param styleObject - A React object of camelCased styles
+ * @returns `object`
+ */
+
+
+exports.logicalStyle = logicalStyle;
+
+var logicalStyles = function logicalStyles(styleObject) {
+  var logicalStyleObject = {};
+  Object.entries(styleObject).forEach(function (_ref2) {
+    var _ref3 = (0, _slicedToArray2.default)(_ref2, 2),
+        key = _ref3[0],
+        value = _ref3[1];
+
+    var cssProperty = kebabCase(key);
+
+    if (logicals.hasOwnProperty(cssProperty)) {
+      var logicalKey = camelCase(logicals[cssProperty]);
+      logicalStyleObject[logicalKey] = value;
+    } else {
+      logicalStyleObject[key] = value;
+    }
   });
-  return (0, _defineProperty2.default)({}, camelCasedProperty, value);
+  return logicalStyleObject;
 };
 /**
  *
@@ -90,7 +137,7 @@ var logicalStyle = function logicalStyle(property, value) {
  */
 
 
-exports.logicalStyle = logicalStyle;
+exports.logicalStyles = logicalStyles;
 
 var logicalSizeCSS = function logicalSizeCSS(width, height) {
   return "\n    ".concat(logicals.width, ": ").concat(width, ";\n    ").concat(logicals.height, ": ").concat(height, ";\n  ");

package/test-env/global_styling/functions/logicals.json

@@ -52,5 +52,16 @@
   "border-top-left-radius": "border-start-start-radius",
   "border-top-right-radius": "border-start-end-radius",
   "border-bottom-left-radius": "border-end-start-radius",
-  "border-bottom-right-radius": "border-end-end-radius"
+  "border-bottom-right-radius": "border-end-end-radius",
+  "_shorthands": [
+    "margin",
+    "scroll-margin",
+    "padding",
+    "scroll-padding",
+    "inset",
+    "border-color",
+    "border-width",
+    "border-style",
+    "border-radius"
+  ]
 }

package/test-env/global_styling/mixins/_responsive.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useEuiBreakpoint = exports.euiBreakpoint = void 0;
+exports.useEuiMinBreakpoint = exports.useEuiMaxBreakpoint = exports.useEuiBreakpoint = exports.euiMinBreakpoint = exports.euiMaxBreakpoint = exports.euiBreakpoint = void 0;
 
 var _sorting = require("../../services/breakpoint/_sorting");
 
@@ -18,7 +18,7 @@ var _hooks = require("../../services/theme/hooks");
  */
 
 /**
- * Generates a CSS media query rule string based on the input breakpoint ranges.
+ * Generates a CSS media query rule string based on the input breakpoint *ranges*.
  * Examples with default theme breakpoints:
  *
  * euiBreakpoint(['s']) becomes `@media only screen and (min-width: 575px) and (max-width: 767px)`
@@ -60,5 +60,62 @@ var useEuiBreakpoint = function useEuiBreakpoint(sizes) {
   var euiTheme = (0, _hooks.useEuiTheme)();
   return euiBreakpoint(euiTheme, sizes);
 };
+/**
+ * Min/Max width breakpoint utilities that generate only a single min/max query/bound
+ *
+ * *Unlike the above euiBreakpoint utility*, these utilities treat breakpoint
+ * sizes as a one-dimensional point, rather than a two-dimensional *screen range*.
+ * Examples with default theme breakpoints:
+ *
+ * euiMaxBreakpoint('m') becomes `@media only screen and (max-width: 767px)`
+ * euiMinBreakpoint('m') becomes `@media only screen and (min-width: 768px)`
+ *
+ * This is safer and more intentional to use than euiBreakpoint(['xs', 's']) / euiBreakpoint(['m', 'xl'])
+ * in the event that consumers add larger or smaller custom breakpoints (e.g 'xxs' or `xxl`)
+ * and if the intention of the media query is actually "m and below/above" vs. "only screens m/l/xl".
+ */
+
+
+exports.useEuiBreakpoint = useEuiBreakpoint;
+
+var euiMinBreakpoint = function euiMinBreakpoint(_ref2, size) {
+  var euiTheme = _ref2.euiTheme;
+  var minBreakpointSize = euiTheme.breakpoint[size];
+
+  if (minBreakpointSize) {
+    return "@media only screen and (min-width: ".concat(minBreakpointSize, "px)");
+  } else {
+    console.warn("Invalid min breakpoint size: ".concat(size));
+    return '@media only screen';
+  }
+};
+
+exports.euiMinBreakpoint = euiMinBreakpoint;
+
+var useEuiMinBreakpoint = function useEuiMinBreakpoint(size) {
+  var euiTheme = (0, _hooks.useEuiTheme)();
+  return euiMinBreakpoint(euiTheme, size);
+};
+
+exports.useEuiMinBreakpoint = useEuiMinBreakpoint;
+
+var euiMaxBreakpoint = function euiMaxBreakpoint(_ref3, size) {
+  var euiTheme = _ref3.euiTheme;
+  var maxBreakpointSize = euiTheme.breakpoint[size];
+
+  if (maxBreakpointSize) {
+    return "@media only screen and (max-width: ".concat(maxBreakpointSize - 1, "px)");
+  } else {
+    console.warn("Invalid max breakpoint size: ".concat(size));
+    return '@media only screen';
+  }
+};
+
+exports.euiMaxBreakpoint = euiMaxBreakpoint;
+
+var useEuiMaxBreakpoint = function useEuiMaxBreakpoint(size) {
+  var euiTheme = (0, _hooks.useEuiTheme)();
+  return euiMaxBreakpoint(euiTheme, size);
+};
 
-exports.useEuiBreakpoint = useEuiBreakpoint;
+exports.useEuiMaxBreakpoint = useEuiMaxBreakpoint;

package/test-env/services/theme/hooks.js

@@ -36,27 +36,24 @@ var useEuiTheme = function useEuiTheme() {
   var theme = (0, _react.useContext)(_context.EuiThemeContext);
   var colorMode = (0, _react.useContext)(_context.EuiColorModeContext);
   var modifications = (0, _react.useContext)(_context.EuiModificationsContext);
+  var isFallback = theme === _context.defaultComputedTheme;
+  var warningLevel = (0, _provider.getEuiDevProviderWarning)();
 
-  if (process.env.NODE_ENV !== 'production') {
-    var isFallback = theme === _context.defaultComputedTheme;
-    var warningLevel = (0, _provider.getEuiDevProviderWarning)();
+  if (isFallback && typeof warningLevel !== 'undefined') {
+    switch (warningLevel) {
+      case 'log':
+        console.log(providerMessage);
+        break;
 
-    if (isFallback && typeof warningLevel !== 'undefined') {
-      switch (warningLevel) {
-        case 'log':
-          console.log(providerMessage);
-          break;
+      case 'warn':
+        console.warn(providerMessage);
+        break;
 
-        case 'warn':
-          console.warn(providerMessage);
-          break;
+      case 'error':
+        throw new Error(providerMessage);
 
-        case 'error':
-          throw new Error(providerMessage);
-
-        default:
-          break;
-      }
+      default:
+        break;
     }
   }
 

package/src/components/form/range/_dual_range.scss

@@ -1,7 +0,0 @@
-.euiDualRange {
-  &__slider {
-    @include euiRangeThumbPerBrowser {
-      visibility: hidden;
-    }
-  }
-}

package/src/components/form/range/_index.scss

@@ -1,13 +0,0 @@
-@import 'range';
-@import 'range_draggable';
-@import 'range_highlight';
-@import 'range_input';
-@import 'range_label';
-@import 'range_levels';
-@import 'range_slider';
-@import 'range_thumb';
-@import 'range_ticks';
-@import 'range_tooltip';
-@import 'range_track';
-@import 'range_wrapper';
-@import 'dual_range';

package/src/components/form/range/_range.scss

@@ -1,7 +0,0 @@
-.euiRange__horizontalSpacer {
-  width: $euiSize;
-}
-
-.euiRange__slimHorizontalSpacer {
-  width: $euiSize / 2;
-}

package/src/components/form/range/_range_draggable.scss

@@ -1,35 +0,0 @@
-.euiRangeDraggable {
-  height: $euiFormControlHeight / 2;
-  position: absolute;
-  top: $euiFormControlHeight / 4;
-  pointer-events: none;
-  z-index: 2;
-
-  &.euiRangeDraggable--compressed {
-    height: $euiFormControlCompressedHeight / 2;
-    top: $euiFormControlCompressedHeight / 4;
-  }
-
-  &.euiRangeDraggable--hasTicks {
-    top: 0;
-  }
-
-  .euiRangeDraggle__inner {
-    position: absolute;
-    left: $euiRangeThumbWidth;
-    right: $euiRangeThumbWidth;
-    top: 0;
-    bottom: 0;
-  }
-
-  &:not(.euiRangeDraggable--disabled) {
-    .euiRangeDraggle__inner {
-      cursor: grab;
-      pointer-events: all;
-
-      &:active {
-        cursor: grabbing;
-      }
-    }
-  }
-}

package/src/components/form/range/_range_highlight.scss

@@ -1,25 +0,0 @@
-.euiRangeHighlight {
-  position: absolute;
-  left: 0;
-  width: 100%;
-  top: calc(50% - #{($euiRangeHighlightHeight / 2)});
-  overflow: hidden;
-
-  &__progress {
-    height: $euiRangeHighlightHeight;
-    border-radius: $euiRangeHighlightHeight;
-    background-color: $euiRangeTrackColor;
-
-    &--hasFocus {
-      background-color: $euiColorPrimary;
-    }
-  }
-
-  &--hasTicks {
-    top: ($euiFormControlHeight / 4) - ($euiRangeHighlightHeight / 2);
-  }
-
-  &--hasTicks.euiRangeHighlight--compressed {
-    top: ($euiFormControlCompressedHeight / 4) - ($euiRangeHighlightHeight / 2);
-  }
-}

package/src/components/form/range/_range_input.scss

@@ -1,10 +0,0 @@
-.euiRangeInput {
-  width: auto;
-  min-width: $euiSize * 4;
-
-  .euiRange__popover & {
-    // sass-lint:disable no-important
-    margin: 0 !important;
-    width: 100%;
-  }
-}

package/src/components/form/range/_range_label.scss

@@ -1,18 +0,0 @@
-.euiRangeLabel {
-  &--min,
-  &--max {
-    font-size: $euiFontSizeXS;
-  }
-
-  &--min {
-    margin-right: $euiSizeS;
-  }
-
-  &--max {
-    margin-left: $euiSizeS;
-  }
-
-  &--isDisabled {
-    opacity: $euiRangeDisabledOpacity;
-  }
-}

package/src/components/form/range/_range_levels.scss

@@ -1,43 +0,0 @@
-.euiRangeLevels {
-  display: flex;
-  justify-content: stretch;
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: ($euiFormControlHeight / 2) + 2px;
-
-  &--hasTicks {
-    top: ($euiFormControlHeight / 4) + 2px;
-  }
-
-  &--compressed {
-    top: ($euiFormControlCompressedHeight / 2) + 2px;
-
-    &.euiRangeLevels--hasTicks {
-      top: ($euiFormControlCompressedHeight / 4) + 2px;
-    }
-  }
-}
-
-.euiRangeLevel {
-  display: block;
-  position: absolute;
-  height: 6px;
-  border-radius: 6px;
-  margin: 2px;
-}
-
-// Modifier naming and colors.
-$euiRangeLevelColors: (
-  primary: $euiColorPrimary,
-  success: $euiColorSuccess,
-  warning: $euiColorWarning,
-  danger: $euiColorDanger,
-);
-
-// Create level modifiers based upon the map.
-@each $name, $color in $euiRangeLevelColors {
-  .euiRangeLevel--#{$name} {
-    background-color: transparentize($color, .7);
-  }
-}