@elastic/eui
Version:
Elastic UI Component Library
853 lines (777 loc) • 559 kB
JavaScript
/******/ (function() { // webpackBootstrap
/******/ var __webpack_modules__ = ({
/***/ "../../components/common.ts":
/*!**********************************!*\
!*** ../../components/common.ts ***!
\**********************************/
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", ({
value: true
}));
exports.assertNever = void 0;
exports.keysOf = keysOf;
__webpack_require__(/*! core-js/modules/es.object.keys.js */ "../../../node_modules/core-js/modules/es.object.keys.js");
/*
* 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 assertNever = function assertNever(x) {
throw new Error("Unexpected value ".concat(x));
};
// utility types:
/**
* XOR for some properties applied to a type
* (XOR is one of these but not both or neither)
*
* Usage: OneOf<typeToExtend, one | but | not | multiple | of | these | are | required>
*
* To require aria-label or aria-labelledby but not both
* Example: OneOf<Type, 'aria-label' | 'aria-labelledby'>
*/
exports.assertNever = assertNever;
/**
* Wraps Object.keys with proper typescript definition of the resulting array
*/
function keysOf(obj) {
return Object.keys(obj);
}
/**
* Like `keyof typeof`, but for getting values instead of keys
* ValueOf<typeof {key1: 'value1', key2: 'value2'}>
* Results in `'value1' | 'value2'`
*/
// Returns the props of a given HTML element
// Utility methods for ApplyClassComponentDefaults
/**
* Because of how TypeScript's LibraryManagedAttributes is designed to handle defaultProps (https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-0.html#support-for-defaultprops-in-jsx)
* we can't directly export the props definition as the defaulted values are not made optional,
* because it isn't processed by LibraryManagedAttributes. To get around this, we:
* - remove the props which have default values applied
* - export (Props - Defaults) & Partial<Defaults>
*/
// definition of Props, made optional, that are have keys in defaultProps
/*
https://github.com/Microsoft/TypeScript/issues/28339
Problem: Pick and Omit do not distribute over union types, which manifests when
optional values become required after a Pick or Omit operation. These
Distributive forms correctly operate on union types, preserving optionality.
*/
/*
TypeScript's discriminated unions are overly permissive: as long as one type of the union is satisfied
the other types are not validated against. For example:
type Foo = {
value: string,
foo: string
};
type Bar = {
value: number,
bar: string
}
function what(x: Foo | Bar) {
return x.value;
}
As you would expect -
what({ value: 'asdf', foo: 'asdf' }); // fine
what({ value: 5, foo: 'asdf' }); // error
what({ value: 5, bar: 'asdf' }); // fine
what({ value: 'asdf', bar: 'asdf' }); // error
However, if Foo is satisfied then you can pass any value you want to Bar's unique properties:
what({ value: 'asdf', foo: 'asdf', bar: false }) // works
TypeScript is okay with this as a type guard would detect the object is Foo and prevent accessing `bar`.
Unfortunately this prevents feedback to the user about potentially unintentional effects, for example:
A common pattern in EUI is to render something as a div OR as a button, depending on if an onClick prop is passed.
passing additional props down through `...rest`, which can be specified as
type Spanlike = HTMLAttributes<HTMLSpanElement>;
type Buttonlike = { onClick: MouseEventHandler<HTMLButtonElement> }; // onClick is the discriminant
React.FunctionComponent<Spanlike | Buttonlike>
Internally, the component would have a type guard to check if props contains `onClick` and resolve to Buttonlike.
Externally, however, you could use the component as
<Component value="buzz"/>
and no error would occur as the Spanlike type is satisfied and the type guard would prevent accessing button attributes.
This prevents immediate feedback to the develop, and would actually lead to React warnings as the `value` prop would
still propagate down to the span's props, which is invalid. The following two utility types provide a solution for
creating exclusive unions:
React.FunctionComponent<ExclusiveUnion<Spanlike, Buttonlike>>
*/
/**
* Returns member keys in U not present in T set to never
* T = { 'one', 'two', 'three' }
* U = { 'three', 'four', 'five' }
* returns { 'four': never, 'five': never }
*/
/**
* Allow either T or U, preventing any additional keys of the other type from being present
*/
/**
* For components that conditionally render <button> or <a>
* Convenience types for extending base props (T) and
* element-specific props (P) with standard clickable properties
*
* These will likely be used together, along with `ExclusiveUnion`:
*
* type AnchorLike = PropsForAnchor<BaseProps>
* type ButtonLike = PropsForButton<BaseProps>
* type ComponentProps = ExclusiveUnion<AnchorLike, ButtonLike>
* const Component: FunctionComponent<ComponentProps> ...
*/
/**
* Replaces all properties on any type as optional, includes nested types
*
* @example
* ```ts
* interface Person {
* name: string;
* age?: number;
* spouse: Person;
* children: Person[];
* }
* type PartialPerson = RecursivePartial<Person>;
* // results in
* interface PartialPerson {
* name?: string;
* age?: number;
* spouse?: RecursivePartial<Person>;
* children?: RecursivePartial<Person>[]
* }
* ```
*/
/***/ }),
/***/ "../../global_styling/functions/index.ts":
/*!***********************************************!*\
!*** ../../global_styling/functions/index.ts ***!
\***********************************************/
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
"use strict";
__webpack_require__(/*! core-js/modules/es.array.for-each.js */ "../../../node_modules/core-js/modules/es.array.for-each.js");
__webpack_require__(/*! core-js/modules/es.object.to-string.js */ "../../../node_modules/core-js/modules/es.object.to-string.js");
__webpack_require__(/*! core-js/modules/web.dom-collections.for-each.js */ "../../../node_modules/core-js/modules/web.dom-collections.for-each.js");
__webpack_require__(/*! core-js/modules/es.object.keys.js */ "../../../node_modules/core-js/modules/es.object.keys.js");
Object.defineProperty(exports, "__esModule", ({
value: true
}));
var _logicals = __webpack_require__(/*! ./logicals */ "../../global_styling/functions/logicals.ts");
Object.keys(_logicals).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
if (key in exports && exports[key] === _logicals[key]) return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function get() {
return _logicals[key];
}
});
});
var _logical_shorthands = __webpack_require__(/*! ./logical_shorthands */ "../../global_styling/functions/logical_shorthands.ts");
Object.keys(_logical_shorthands).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
if (key in exports && exports[key] === _logical_shorthands[key]) return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function get() {
return _logical_shorthands[key];
}
});
});
var _math = __webpack_require__(/*! ./math */ "../../global_styling/functions/math.ts");
Object.keys(_math).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
if (key in exports && exports[key] === _math[key]) return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function get() {
return _math[key];
}
});
});
var _size = __webpack_require__(/*! ./size */ "../../global_styling/functions/size.ts");
Object.keys(_size).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
if (key in exports && exports[key] === _size[key]) return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function get() {
return _size[key];
}
});
});
var _typography = __webpack_require__(/*! ./typography */ "../../global_styling/functions/typography.ts");
Object.keys(_typography).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
if (key in exports && exports[key] === _typography[key]) return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function get() {
return _typography[key];
}
});
});
/***/ }),
/***/ "../../global_styling/functions/logical_shorthands.ts":
/*!************************************************************!*\
!*** ../../global_styling/functions/logical_shorthands.ts ***!
\************************************************************/
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
"use strict";
__webpack_require__(/*! core-js/modules/es.symbol.js */ "../../../node_modules/core-js/modules/es.symbol.js");
__webpack_require__(/*! core-js/modules/es.symbol.description.js */ "../../../node_modules/core-js/modules/es.symbol.description.js");
__webpack_require__(/*! core-js/modules/es.symbol.iterator.js */ "../../../node_modules/core-js/modules/es.symbol.iterator.js");
__webpack_require__(/*! core-js/modules/es.array.iterator.js */ "../../../node_modules/core-js/modules/es.array.iterator.js");
__webpack_require__(/*! core-js/modules/es.string.iterator.js */ "../../../node_modules/core-js/modules/es.string.iterator.js");
__webpack_require__(/*! core-js/modules/web.dom-collections.iterator.js */ "../../../node_modules/core-js/modules/web.dom-collections.iterator.js");
__webpack_require__(/*! core-js/modules/es.array.slice.js */ "../../../node_modules/core-js/modules/es.array.slice.js");
__webpack_require__(/*! core-js/modules/es.array.from.js */ "../../../node_modules/core-js/modules/es.array.from.js");
__webpack_require__(/*! core-js/modules/es.regexp.test.js */ "../../../node_modules/core-js/modules/es.regexp.test.js");
Object.defineProperty(exports, "__esModule", ({
value: true
}));
exports.logicalShorthandCSS = exports.logicalBorderRadiusCSS = exports.LOGICAL_SHORTHANDS = void 0;
__webpack_require__(/*! core-js/modules/es.array.includes.js */ "../../../node_modules/core-js/modules/es.array.includes.js");
__webpack_require__(/*! core-js/modules/es.string.includes.js */ "../../../node_modules/core-js/modules/es.string.includes.js");
__webpack_require__(/*! core-js/modules/es.regexp.exec.js */ "../../../node_modules/core-js/modules/es.regexp.exec.js");
__webpack_require__(/*! core-js/modules/es.string.split.js */ "../../../node_modules/core-js/modules/es.string.split.js");
__webpack_require__(/*! core-js/modules/es.array.concat.js */ "../../../node_modules/core-js/modules/es.array.concat.js");
__webpack_require__(/*! core-js/modules/es.array.for-each.js */ "../../../node_modules/core-js/modules/es.array.for-each.js");
__webpack_require__(/*! core-js/modules/es.object.to-string.js */ "../../../node_modules/core-js/modules/es.object.to-string.js");
__webpack_require__(/*! core-js/modules/web.dom-collections.for-each.js */ "../../../node_modules/core-js/modules/web.dom-collections.for-each.js");
__webpack_require__(/*! core-js/modules/es.string.trim.js */ "../../../node_modules/core-js/modules/es.string.trim.js");
__webpack_require__(/*! core-js/modules/es.object.entries.js */ "../../../node_modules/core-js/modules/es.object.entries.js");
__webpack_require__(/*! core-js/modules/es.array.join.js */ "../../../node_modules/core-js/modules/es.array.join.js");
var _logicals = _interopRequireDefault(__webpack_require__(/*! ./logicals.json */ "../../global_styling/functions/logicals.json"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _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(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; } /*
* 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 = _slicedToArray(_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;
/***/ }),
/***/ "../../global_styling/functions/logicals.ts":
/*!**************************************************!*\
!*** ../../global_styling/functions/logicals.ts ***!
\**************************************************/
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
"use strict";
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
__webpack_require__(/*! core-js/modules/es.symbol.js */ "../../../node_modules/core-js/modules/es.symbol.js");
__webpack_require__(/*! core-js/modules/es.symbol.to-primitive.js */ "../../../node_modules/core-js/modules/es.symbol.to-primitive.js");
__webpack_require__(/*! core-js/modules/es.date.to-primitive.js */ "../../../node_modules/core-js/modules/es.date.to-primitive.js");
__webpack_require__(/*! core-js/modules/es.symbol.description.js */ "../../../node_modules/core-js/modules/es.symbol.description.js");
__webpack_require__(/*! core-js/modules/es.number.constructor.js */ "../../../node_modules/core-js/modules/es.number.constructor.js");
__webpack_require__(/*! core-js/modules/es.symbol.iterator.js */ "../../../node_modules/core-js/modules/es.symbol.iterator.js");
__webpack_require__(/*! core-js/modules/es.array.iterator.js */ "../../../node_modules/core-js/modules/es.array.iterator.js");
__webpack_require__(/*! core-js/modules/es.string.iterator.js */ "../../../node_modules/core-js/modules/es.string.iterator.js");
__webpack_require__(/*! core-js/modules/web.dom-collections.iterator.js */ "../../../node_modules/core-js/modules/web.dom-collections.iterator.js");
__webpack_require__(/*! core-js/modules/es.array.slice.js */ "../../../node_modules/core-js/modules/es.array.slice.js");
__webpack_require__(/*! core-js/modules/es.array.from.js */ "../../../node_modules/core-js/modules/es.array.from.js");
__webpack_require__(/*! core-js/modules/es.regexp.test.js */ "../../../node_modules/core-js/modules/es.regexp.test.js");
__webpack_require__(/*! core-js/modules/es.array.filter.js */ "../../../node_modules/core-js/modules/es.array.filter.js");
__webpack_require__(/*! core-js/modules/es.object.get-own-property-descriptor.js */ "../../../node_modules/core-js/modules/es.object.get-own-property-descriptor.js");
__webpack_require__(/*! core-js/modules/es.object.get-own-property-descriptors.js */ "../../../node_modules/core-js/modules/es.object.get-own-property-descriptors.js");
Object.defineProperty(exports, "__esModule", ({
value: true
}));
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;
__webpack_require__(/*! core-js/modules/es.array.concat.js */ "../../../node_modules/core-js/modules/es.array.concat.js");
__webpack_require__(/*! core-js/modules/es.regexp.exec.js */ "../../../node_modules/core-js/modules/es.regexp.exec.js");
__webpack_require__(/*! core-js/modules/es.string.replace.js */ "../../../node_modules/core-js/modules/es.string.replace.js");
__webpack_require__(/*! core-js/modules/es.array.for-each.js */ "../../../node_modules/core-js/modules/es.array.for-each.js");
__webpack_require__(/*! core-js/modules/es.object.to-string.js */ "../../../node_modules/core-js/modules/es.object.to-string.js");
__webpack_require__(/*! core-js/modules/web.dom-collections.for-each.js */ "../../../node_modules/core-js/modules/web.dom-collections.for-each.js");
__webpack_require__(/*! core-js/modules/es.object.entries.js */ "../../../node_modules/core-js/modules/es.object.entries.js");
__webpack_require__(/*! core-js/modules/es.object.keys.js */ "../../../node_modules/core-js/modules/es.object.keys.js");
__webpack_require__(/*! core-js/modules/es.array.index-of.js */ "../../../node_modules/core-js/modules/es.array.index-of.js");
var _common = __webpack_require__(/*! ../../components/common */ "../../components/common.ts");
var _logicals2 = _interopRequireDefault(__webpack_require__(/*! ./logicals.json */ "../../global_styling/functions/logicals.json"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _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(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; } /*
* 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.
*/
/**
* EUI utilizes logical CSS properties to enable directional writing-modes.
* To encourage use of logical properties, we provide a few helper utilities to
* convert certain directional properties to logical properties.
* https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties
*/
var logicalSide = {
left: 'inline-start',
right: 'inline-end',
top: 'block-start',
bottom: 'block-end',
horizontal: 'inline',
vertical: 'block'
};
exports.logicalSide = logicalSide;
var LOGICAL_SIDES = (0, _common.keysOf)(logicalSide);
exports.LOGICAL_SIDES = LOGICAL_SIDES;
var logicals = _logicals2.default;
exports.logicals = logicals;
var _shorthands = _logicals2.default._shorthands,
_logicals = _objectWithoutProperties(_logicals2.default, ["_shorthands"]);
var LOGICAL_PROPERTIES = (0, _common.keysOf)(_logicals);
exports.LOGICAL_PROPERTIES = LOGICAL_PROPERTIES;
/**
*
* @param property A string that is a valid CSS logical property
* @param value String to output as the property value
* @returns `string` Returns the logical CSS property version for the given `property: value` pair
*/
var logicalCSS = function logicalCSS(property, value) {
return "".concat(logicals[property], ": ").concat(value, ";");
};
/**
* Some logical properties are not yet fully supported by all browsers.
* For those cases, we should use the old property as a fallback for
* browsers missing support, while allowing supporting browsers to use
* the logical properties.
*
* Examples:
* https://caniuse.com/?search=overflow-block
* https://caniuse.com/mdn-css_properties_float_flow_relative_values
*/
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
* @param value String to output as the property value
* @returns `object` Returns the logical CSS property version for the given `property: value` pair
*/
var logicalStyle = function logicalStyle(property, value) {
return _defineProperty({}, 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 = _slicedToArray(_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 logicalStyleObject;
};
/**
*
* @param width A string value for the LTR width
* @param height A string value for the LTR height
* @returns `string` Returns the logical CSS properties for height and width
*/
exports.logicalStyles = logicalStyles;
var logicalSizeCSS = function logicalSizeCSS(width) {
var height = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : width;
return "\n ".concat(logicals.width, ": ").concat(width, ";\n ").concat(logicals.height, ": ").concat(height, ";\n ");
};
/**
*
* @param width A string value for the LTR width
* @param height A string value for the LTR height
* @returns `object` Returns the logical CSS properties for height and width
*/
exports.logicalSizeCSS = logicalSizeCSS;
var logicalSizeStyle = function logicalSizeStyle(width, height) {
return _objectSpread(_objectSpread({}, logicalStyle('width', width)), logicalStyle('height', height));
};
// Text alignment is separate because its the value that changes not the property
exports.logicalSizeStyle = logicalSizeStyle;
var logicalText = {
'text-align': {
left: 'start',
center: 'center',
right: 'end'
}
};
exports.logicalText = logicalText;
var LOGICAL_TEXT_ALIGNMENT = (0, _common.keysOf)(logicalText['text-align']);
exports.LOGICAL_TEXT_ALIGNMENT = LOGICAL_TEXT_ALIGNMENT;
/**
*
* @param property A string that is a valid CSS logical property
* @param value String to output as the property value
* @returns `string` Returns the logical CSS property version for the given `property: value` pair
*/
var logicalTextAlignCSS = function logicalTextAlignCSS(value) {
return "text-align: ".concat(logicalText['text-align'][value], ";");
};
/**
*
* @param property A string that is a valid CSS logical property
* @param value String to output as the property value
* @returns `object` Returns the logical CSS property version for the given `property: value` pair
*/
exports.logicalTextAlignCSS = logicalTextAlignCSS;
var logicalTextAlignStyle = function logicalTextAlignStyle(value) {
return {
textAlign: logicalText['text-align'][value]
};
};
exports.logicalTextAlignStyle = logicalTextAlignStyle;
/***/ }),
/***/ "../../global_styling/functions/math.ts":
/*!**********************************************!*\
!*** ../../global_styling/functions/math.ts ***!
\**********************************************/
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
"use strict";
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
__webpack_require__(/*! core-js/modules/es.object.set-prototype-of.js */ "../../../node_modules/core-js/modules/es.object.set-prototype-of.js");
__webpack_require__(/*! core-js/modules/es.regexp.constructor.js */ "../../../node_modules/core-js/modules/es.regexp.constructor.js");
__webpack_require__(/*! core-js/modules/es.regexp.sticky.js */ "../../../node_modules/core-js/modules/es.regexp.sticky.js");
__webpack_require__(/*! core-js/modules/es.regexp.to-string.js */ "../../../node_modules/core-js/modules/es.regexp.to-string.js");
__webpack_require__(/*! core-js/modules/es.array.iterator.js */ "../../../node_modules/core-js/modules/es.array.iterator.js");
__webpack_require__(/*! core-js/modules/es.string.iterator.js */ "../../../node_modules/core-js/modules/es.string.iterator.js");
__webpack_require__(/*! core-js/modules/es.weak-map.js */ "../../../node_modules/core-js/modules/es.weak-map.js");
__webpack_require__(/*! core-js/modules/web.dom-collections.iterator.js */ "../../../node_modules/core-js/modules/web.dom-collections.iterator.js");
__webpack_require__(/*! core-js/modules/es.array.reduce.js */ "../../../node_modules/core-js/modules/es.array.reduce.js");
__webpack_require__(/*! core-js/modules/es.object.keys.js */ "../../../node_modules/core-js/modules/es.object.keys.js");
__webpack_require__(/*! core-js/modules/es.symbol.replace.js */ "../../../node_modules/core-js/modules/es.symbol.replace.js");
__webpack_require__(/*! core-js/modules/es.string.replace.js */ "../../../node_modules/core-js/modules/es.string.replace.js");
__webpack_require__(/*! core-js/modules/es.symbol.js */ "../../../node_modules/core-js/modules/es.symbol.js");
__webpack_require__(/*! core-js/modules/es.symbol.description.js */ "../../../node_modules/core-js/modules/es.symbol.description.js");
__webpack_require__(/*! core-js/modules/es.array.join.js */ "../../../node_modules/core-js/modules/es.array.join.js");
__webpack_require__(/*! core-js/modules/es.array.slice.js */ "../../../node_modules/core-js/modules/es.array.slice.js");
__webpack_require__(/*! core-js/modules/es.symbol.iterator.js */ "../../../node_modules/core-js/modules/es.symbol.iterator.js");
Object.defineProperty(exports, "__esModule", ({
value: true
}));
exports.mathWithUnits = void 0;
__webpack_require__(/*! core-js/modules/es.array.for-each.js */ "../../../node_modules/core-js/modules/es.array.for-each.js");
__webpack_require__(/*! core-js/modules/es.object.to-string.js */ "../../../node_modules/core-js/modules/es.object.to-string.js");
__webpack_require__(/*! core-js/modules/web.dom-collections.for-each.js */ "../../../node_modules/core-js/modules/web.dom-collections.for-each.js");
__webpack_require__(/*! core-js/modules/es.regexp.exec.js */ "../../../node_modules/core-js/modules/es.regexp.exec.js");
__webpack_require__(/*! core-js/modules/es.number.constructor.js */ "../../../node_modules/core-js/modules/es.number.constructor.js");
__webpack_require__(/*! core-js/modules/es.array.concat.js */ "../../../node_modules/core-js/modules/es.array.concat.js");
function _wrapRegExp() { _wrapRegExp = function _wrapRegExp(re, groups) { return new BabelRegExp(re, void 0, groups); }; var _super = RegExp.prototype, _groups = new WeakMap(); function BabelRegExp(re, flags, groups) { var _this = new RegExp(re, flags); return _groups.set(_this, groups || _groups.get(re)), _setPrototypeOf(_this, BabelRegExp.prototype); } function buildGroups(result, re) { var g = _groups.get(re); return Object.keys(g).reduce(function (groups, name) { var i = g[name]; if ("number" == typeof i) groups[name] = result[i];else { for (var k = 0; void 0 === result[i[k]] && k + 1 < i.length;) k++; groups[name] = result[i[k]]; } return groups; }, Object.create(null)); } return _inherits(BabelRegExp, RegExp), BabelRegExp.prototype.exec = function (str) { var result = _super.exec.call(this, str); if (result) { result.groups = buildGroups(result, this); var indices = result.indices; indices && (indices.groups = buildGroups(indices, this)); } return result; }, BabelRegExp.prototype[Symbol.replace] = function (str, substitution) { if ("string" == typeof substitution) { var groups = _groups.get(this); return _super[Symbol.replace].call(this, str, substitution.replace(/\$<([^>]+)>/g, function (_, name) { var group = groups[name]; return "$" + (Array.isArray(group) ? group.join("$") : group); })); } if ("function" == typeof substitution) { var _this = this; return _super[Symbol.replace].call(this, str, function () { var args = arguments; return "object" != _typeof(args[args.length - 1]) && (args = [].slice.call(args)).push(buildGroups(args, _this)), substitution.apply(this, args); }); } return _super[Symbol.replace].call(this, str, substitution); }, _wrapRegExp.apply(this, arguments); }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
/*
* 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.
*/
/**
* Utility for performing math callbacks on a string with CSS units
* and returning a string with its unit preserved.
*
* Example usage:
* mathWithUnits('4px', (x) => x / 2) = '2px';
* mathWithUnits(euiTheme.size.xs, (x) => x + 2) = '6px';
* mathWithUnits([euiTheme.size.l, euiTheme.size.s], (x, y) => x - y) = '16px';
*/
// Unfortunately, this is the CSSProperties[] type used for several euiTheme vars
var mathWithUnits = function mathWithUnits(values, callback) {
var unit = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
if (!Array.isArray(values)) values = [values];
var foundNumericValues = [];
var foundUnit = '';
values.forEach(function (value) {
if (typeof value === 'string') {
var _matches$groups, _matches$groups2;
var regex = /*#__PURE__*/_wrapRegExp(/(\x2D?[\d.]+)(%|[a-zA-Z]*)/, {
value: 1,
unit: 2
});
var matches = regex.exec(value);
var numericValue = Number(matches === null || matches === void 0 ? void 0 : (_matches$groups = matches.groups) === null || _matches$groups === void 0 ? void 0 : _matches$groups.value);
if (!isNaN(numericValue)) {
foundNumericValues.push(numericValue);
} else {
throw new Error('No valid numeric value found');
}
if (!unit && matches !== null && matches !== void 0 && (_matches$groups2 = matches.groups) !== null && _matches$groups2 !== void 0 && _matches$groups2.unit) {
if (!foundUnit) {
foundUnit = matches.groups.unit;
} else if (foundUnit !== matches.groups.unit) {
throw new Error('Multiple units found. Use `calc()` to mix and math multiple unit types (e.g. `%` & `px`) instead');
}
}
} else if (typeof value === 'number') {
foundNumericValues.push(value);
} else {
throw new Error('Invalid value type - pass a string or number');
}
});
return "".concat(callback.apply(void 0, foundNumericValues)).concat(unit || foundUnit);
};
exports.mathWithUnits = mathWithUnits;
/***/ }),
/***/ "../../global_styling/functions/size.ts":
/*!**********************************************!*\
!*** ../../global_styling/functions/size.ts ***!
\**********************************************/
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", ({
value: true
}));
exports.sizeToPixel = void 0;
__webpack_require__(/*! core-js/modules/es.symbol.js */ "../../../node_modules/core-js/modules/es.symbol.js");
__webpack_require__(/*! core-js/modules/es.symbol.description.js */ "../../../node_modules/core-js/modules/es.symbol.description.js");
__webpack_require__(/*! core-js/modules/es.object.to-string.js */ "../../../node_modules/core-js/modules/es.object.to-string.js");
__webpack_require__(/*! core-js/modules/es.symbol.iterator.js */ "../../../node_modules/core-js/modules/es.symbol.iterator.js");
__webpack_require__(/*! core-js/modules/es.array.iterator.js */ "../../../node_modules/core-js/modules/es.array.iterator.js");
__webpack_require__(/*! core-js/modules/es.string.iterator.js */ "../../../node_modules/core-js/modules/es.string.iterator.js");
__webpack_require__(/*! core-js/modules/web.dom-collections.iterator.js */ "../../../node_modules/core-js/modules/web.dom-collections.iterator.js");
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
/*
* 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.
*/
/**
* Calculates the `px` value based on a scale multiplier
* @param scale - The font scale multiplier
* *
* @param themeOrBase - Theme base value
* *
* @returns string - Rem unit aligned to baseline
*/
var sizeToPixel = function sizeToPixel() {
var scale = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
return function (themeOrBase) {
var base = _typeof(themeOrBase) === 'object' ? themeOrBase.base : themeOrBase;
return "".concat(base * scale, "px");
};
};
exports.sizeToPixel = sizeToPixel;
/***/ }),
/***/ "../../global_styling/functions/typography.ts":
/*!****************************************************!*\
!*** ../../global_styling/functions/typography.ts ***!
\****************************************************/
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", ({
value: true
}));
exports.euiFontSizeFromScale = euiFontSizeFromScale;
exports.euiLineHeightFromBaseline = euiLineHeightFromBaseline;
exports.euiTextShift = void 0;
__webpack_require__(/*! core-js/modules/es.number.to-fixed.js */ "../../../node_modules/core-js/modules/es.number.to-fixed.js");
__webpack_require__(/*! core-js/modules/es.object.to-string.js */ "../../../node_modules/core-js/modules/es.object.to-string.js");
__webpack_require__(/*! core-js/modules/es.regexp.to-string.js */ "../../../node_modules/core-js/modules/es.regexp.to-string.js");
__webpack_require__(/*! core-js/modules/es.array.concat.js */ "../../../node_modules/core-js/modules/es.array.concat.js");
var _logicals = __webpack_require__(/*! ./logicals */ "../../global_styling/functions/logicals.ts");
/*
* 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.
*/
/**
* Calculates the font-size value based on the provided scale key
* @param scale - The font scale key
* @param theme - Requires the `base` and `font` keys
* @param options - Optional parameters - see _FontScaleOptions
*
* @returns string - Calculated font-size value
*/
function euiFontSizeFromScale(scale, _ref) {
var base = _ref.base,
font = _ref.font;
var _ref2 = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {},
_ref2$measurement = _ref2.measurement,
measurement = _ref2$measurement === void 0 ? 'rem' : _ref2$measurement,
customScale = _ref2.customScale;
if (measurement === 'em') {
return "".concat(font.scale[scale], "em");
}
var numerator = base * font.scale[scale];
if (customScale) numerator *= font.scale[customScale];
var denominator = base * font.scale[font.body.scale];
return measurement === 'px' ? "".concat(numerator, "px") : "".concat(