@elastic/eui
Version:
Elastic UI Component Library
254 lines (240 loc) • 15 kB
JavaScript
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); }
var _templateObject, _templateObject2, _templateObject3, _templateObject4;
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 _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0 and the Server Side Public License, v 1; you may not use this file except
* in compliance with, at your election, the Elastic License 2.0 or the Server
* Side Public License, v 1.
*/
import { css, keyframes } from '@emotion/react';
import { euiShadowXLarge } from '@elastic/eui-theme-common';
import { isEuiFlyoutSizeNamed } from './const';
import { euiCanAnimate, euiMaxBreakpoint, euiMinBreakpoint, logicalCSS, logicalStyles, mathWithUnits } from '../../global_styling';
import { euiFormMaxWidth } from '../form/form.styles';
export var FLYOUT_BREAKPOINT = 'm';
export var euiFlyoutSlideInRight = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n from {\n opacity: 0;\n transform: translateX(100%);\n }\n to {\n opacity: 1;\n transform: translateX(0%);\n }\n"])));
export var euiFlyoutSlideOutRight = keyframes(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n from {\n opacity: 1;\n transform: translateX(0%);\n }\n to {\n opacity: 0;\n transform: translateX(100%);\n }\n"])));
export var euiFlyoutSlideInLeft = keyframes(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n from {\n opacity: 0;\n transform: translateX(-100%);\n }\n to {\n opacity: 1;\n transform: translateX(0%);\n }\n"])));
export var euiFlyoutSlideOutLeft = keyframes(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n from {\n opacity: 1;\n transform: translateX(0);\n }\n to {\n opacity: 0;\n transform: translateX(-100%);\n }\n"])));
/**
* When a `container` reference element is provided, the flyout's position
* and dimensions are constrained to the container's bounding rect via
* inline styles computed in JS.
*/
var _ref = process.env.NODE_ENV === "production" ? {
name: "yokctr-noAnimation",
styles: "animation-duration:0s!important;label:noAnimation;"
} : {
name: "yokctr-noAnimation",
styles: "animation-duration:0s!important;label:noAnimation;",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
};
var _ref2 = process.env.NODE_ENV === "production" ? {
name: "rks1ev-overlay",
styles: "&:has(.euiResizableButton){border-inline:none;};label:overlay;"
} : {
name: "rks1ev-overlay",
styles: "&:has(.euiResizableButton){border-inline:none;};label:overlay;",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
};
export var euiFlyoutStyles = function euiFlyoutStyles(euiThemeContext) {
var euiTheme = euiThemeContext.euiTheme;
return _objectSpread(_objectSpread({
euiFlyout: /*#__PURE__*/css("position:fixed;", logicalCSS('bottom', 0), " ", logicalCSS('top', 'var(--euiFixedHeadersOffset, 0)'), " ", logicalCSS('height', 'inherit'), " background:", euiTheme.colors.backgroundBasePlain, ";display:flex;flex-direction:column;align-items:stretch;&:focus{outline:none;}&.euiFlyout--hasChildBackground{background:", euiTheme.colors.backgroundBaseSubdued, ";}", maxedFlyoutWidth(euiThemeContext), ";;label:euiFlyout;")
}, composeFlyoutSizing(euiThemeContext)), {}, {
noMaxWidth: /*#__PURE__*/css(logicalCSS('max-width', 'none'), ";;label:noMaxWidth;"),
// Side
right: /*#__PURE__*/css("clip-path:polygon(-50% 0, 100% 0, 100% 100%, -50% 100%);", logicalCSS('right', 0), "animation:", euiFlyoutSlideInRight, " 0s ", euiTheme.animation.resistance, " forwards;", euiCanAnimate, "{animation-duration:", euiTheme.animation.normal, ";}&.euiFlyout--hasChild{clip-path:none;};label:right;"),
// Left-side flyouts should only be used for navigation
left: /*#__PURE__*/css(logicalCSS('left', 0), " clip-path:polygon(0 0, 150% 0, 150% 100%, 0 100%);animation:", euiFlyoutSlideInLeft, " 0s ", euiTheme.animation.resistance, " forwards;", euiCanAnimate, "{animation-duration:", euiTheme.animation.normal, ";};label:left;"),
// Type
overlay: {
overlay: _ref2,
left: /*#__PURE__*/css(euiShadowXLarge(euiThemeContext, {
borderAllInHighContrastMode: true,
border: 'right'
}), ";;label:left;"),
right: /*#__PURE__*/css(euiShadowXLarge(euiThemeContext, {
borderAllInHighContrastMode: true,
border: 'left'
}), ";;label:right;")
},
push: {
push: /*#__PURE__*/css("clip-path:none;z-index:", Number(euiTheme.levels.flyout) - 1, ";;label:push;"),
right: /*#__PURE__*/css(logicalCSS('border-left', euiTheme.border.thick), ";;label:right;"),
left: /*#__PURE__*/css(logicalCSS('border-right', euiTheme.border.thick), ";;label:left;")
},
noAnimation: _ref,
// Padding
paddingSizes: {
none: /*#__PURE__*/css(composeFlyoutPadding(euiThemeContext, 'none'), ";;label:none;"),
s: /*#__PURE__*/css(composeFlyoutPadding(euiThemeContext, 's'), ";;label:s;"),
m: /*#__PURE__*/css(composeFlyoutPadding(euiThemeContext, 'm'), ";;label:m;"),
l: /*#__PURE__*/css(composeFlyoutPadding(euiThemeContext, 'l'), ";;label:l;")
}
});
};
/**
* Applies a max-width constraint at the flyout breakpoint.
*/
export var maxedFlyoutWidth = function maxedFlyoutWidth(euiThemeContext) {
return "\n ".concat(euiMaxBreakpoint(euiThemeContext, FLYOUT_BREAKPOINT), " {\n ").concat(logicalCSS('max-width', '90% !important'), "\n }\n");
};
/**
* Composes the full set of named size styles (`s`, `m`, `l`, `fill`).
*
* Uses `%` units for widths. Media queries drive responsive breakpoints.
*
* When a child flyout is stacked on top of the parent, the parent flyout
* size will match the child flyout size. The `s` and `m` sizes include
* overrides for this stacked-child behavior.
*/
export var composeFlyoutSizing = function composeFlyoutSizing(euiThemeContext) {
var euiTheme = euiThemeContext.euiTheme;
var formMaxWidth = euiFormMaxWidth(euiThemeContext);
// Calculating the minimum width based on the screen takeover breakpoint
var flyoutSizes = {
s: {
min: "".concat(Math.round(euiTheme.breakpoint.m * 0.5), "px"),
width: '25%',
max: "".concat(Math.round(euiTheme.breakpoint.s * 0.7), "px")
},
m: {
// Calculated for forms plus padding
min: "".concat(mathWithUnits(formMaxWidth, function (x) {
return x + 24;
})),
width: '50%',
max: "".concat(euiTheme.breakpoint.m, "px")
},
l: {
min: "".concat(Math.round(euiTheme.breakpoint.m * 0.9), "px"),
width: '75%',
max: "".concat(euiTheme.breakpoint.l, "px")
},
// NOTE: These styles are for the flyout system in `stacked` layout mode.
// In `side-by-side` mode, @flyout.component.tsx uses inline styles.
fill: {
min: '90%',
width: '90%',
max: '90%'
}
};
var sizingRules = function sizingRules(size) {
return "\n ".concat(logicalCSS('max-width', flyoutSizes[size].max), "\n\n ").concat(euiMaxBreakpoint(euiThemeContext, FLYOUT_BREAKPOINT), " {\n ").concat(logicalCSS('min-width', 0), "\n ").concat(logicalCSS('width', flyoutSizes[size].min), "\n }\n ").concat(euiMinBreakpoint(euiThemeContext, FLYOUT_BREAKPOINT), " {\n ").concat(logicalCSS('min-width', flyoutSizes[size].min), "\n ").concat(logicalCSS('width', flyoutSizes[size].width), "\n }\n ");
};
return {
s: /*#__PURE__*/css(sizingRules('s'), " &.euiFlyout--hasChild--stacked.euiFlyout--hasChild--m{", sizingRules('m'), ";};label:s;"),
m: /*#__PURE__*/css(sizingRules('m'), " &.euiFlyout--hasChild--stacked.euiFlyout--hasChild--s{", sizingRules('s'), ";};label:m;"),
l: /*#__PURE__*/css(sizingRules('l'), ";;label:l;"),
fill: /*#__PURE__*/css(sizingRules('fill'), ";;label:fill;")
};
};
var composeFlyoutPadding = function composeFlyoutPadding(euiThemeContext, paddingSize) {
var euiTheme = euiThemeContext.euiTheme;
var paddingModifierMap = {
none: 0,
s: euiTheme.size.s,
m: euiTheme.size.base,
l: euiTheme.size.l
};
// Footer padding
var footerPaddingSizes = {
none: 0,
s: euiTheme.size.s,
m: "".concat(mathWithUnits(euiTheme.size.base, function (x) {
return x * 0.75;
}), " ").concat(euiTheme.size.base, ";"),
l: "".concat(mathWithUnits(euiTheme.size.l, function (x) {
return x / 1.5;
}), " ").concat(euiTheme.size.l, ";")
};
return "\n .euiFlyoutHeader {\n ".concat(logicalCSS('padding-horizontal', paddingModifierMap[paddingSize]), "\n ").concat(logicalCSS('padding-top', paddingModifierMap[paddingSize]), "\n }\n\n [class*='euiFlyoutHeader-hasBorder'] {\n ").concat(logicalCSS('padding-bottom', paddingModifierMap[paddingSize]), "\n }\n\n .euiFlyoutBody__overflowContent {\n padding: ").concat(paddingModifierMap[paddingSize], ";\n }\n\n .euiFlyoutBody__banner .euiCallOut {\n ").concat(logicalCSS('padding-horizontal', paddingModifierMap[paddingSize]), "\n }\n\n .euiFlyoutFooter {\n padding: ").concat(footerPaddingSizes[paddingSize], ";\n }\n ");
};
/**
* Helper for `composeFlyoutInlineStyles`
* Handles maxWidth prop overrides to ensure they take precedence over base CSS
*/
var composeMaxWidthOverrides = function composeMaxWidthOverrides(maxWidth, isFill) {
if (typeof maxWidth === 'boolean') {
return {};
}
var fillUnit = '90%';
var overrides = {
maxWidth: maxWidth
};
// For fill size flyouts, we need to override min-width to allow dynamic sizing
if (isFill) {
overrides.minWidth = '0';
// When maxWidth is provided for fill flyouts, we need to override the CSS rule
// that sets min-inline-size to the fill unit. We calculate min(maxWidth, fillUnit)
// to ensure the flyout respects both constraints.
if (maxWidth) {
var maxWidthWithUnits = typeof maxWidth === 'number' ? "".concat(maxWidth, "px") : maxWidth;
overrides.minWidth = "min(".concat(maxWidthWithUnits, ", ").concat(fillUnit, ")");
}
}
return logicalStyles(overrides);
};
/**
* Composes all inline styles for a flyout based on its configuration.
* Uses a CSS custom property (`--euiFlyoutMainWidth`) for synchronous
* tracking of the main flyout width during resize drag, falling back to
* the pixel value from manager state when the variable is not set.
*/
export var composeFlyoutInlineStyles = function composeFlyoutInlineStyles(size, layoutMode, siblingFlyoutId, siblingFlyoutWidth, maxWidth, zIndex) {
var fillUnit = '90%';
// Handle custom width values (non-named sizes)
var customWidthStyles = !isEuiFlyoutSizeNamed(size) ? logicalStyles({
width: size
}) : {};
var isFill = size === 'fill';
// Handle dynamic width calculation for fill size in side-by-side mode
var dynamicStyles = isFill && layoutMode === 'side-by-side' && siblingFlyoutId && siblingFlyoutWidth ? logicalStyles({
width: "calc(".concat(fillUnit, " - var(--euiFlyoutMainWidth, ").concat(siblingFlyoutWidth, "px))"),
minWidth: '0'
}) : {};
// For fill flyouts with maxWidth, we need to ensure the minWidth override is applied
// to override the CSS rule that sets min-inline-size to the fill unit
var minWidthOverride = {};
if (isFill && maxWidth) {
if (layoutMode === 'side-by-side' && siblingFlyoutId && siblingFlyoutWidth && dynamicStyles.inlineSize) {
// For fill flyouts with maxWidth and a sibling: min(maxWidth, calc(fillUnit - siblingWidth))
var dynamicWidth = dynamicStyles.inlineSize;
var maxWidthWithUnits = typeof maxWidth === 'number' ? "".concat(maxWidth, "px") : maxWidth;
minWidthOverride = {
minWidth: "min(".concat(maxWidthWithUnits, ", ").concat(dynamicWidth, ")")
};
} else {
// For fill flyouts with maxWidth but no sibling: min(maxWidth, fillUnit)
var maxWidthOverrides = composeMaxWidthOverrides(maxWidth, isFill);
minWidthOverride = {
minWidth: maxWidthOverrides.minInlineSize
};
}
}
// Calculate the final maxWidth based on conditions
var finalMaxWidth;
if (maxWidth && isFill && layoutMode === 'side-by-side' && siblingFlyoutId && siblingFlyoutWidth && dynamicStyles.inlineSize) {
// For fill flyouts with maxWidth and a sibling: min(maxWidth, calc(fillUnit - siblingWidth))
var _dynamicWidth = dynamicStyles.inlineSize;
var _maxWidthWithUnits = typeof maxWidth === 'number' ? "".concat(maxWidth, "px") : maxWidth;
finalMaxWidth = "min(".concat(_maxWidthWithUnits, ", ").concat(_dynamicWidth, ")");
} else if (maxWidth) {
// For all other cases with maxWidth: use the original maxWidth value
finalMaxWidth = typeof maxWidth === 'number' ? "".concat(maxWidth, "px") : maxWidth;
}
return logicalStyles(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, customWidthStyles), dynamicStyles), minWidthOverride), finalMaxWidth ? {
maxWidth: finalMaxWidth
} : {}), {}, {
zIndex: zIndex
}));
};