@shopify/polaris
Version:
Shopify’s product component library
1,823 lines (1,550 loc) • 575 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
var React = require('react');
var React__default = _interopDefault(React);
var DefaultThemeColors = _interopDefault(require('@shopify/polaris-tokens/dist-modern/theme/base.json'));
var tokens = require('@shopify/polaris-tokens');
var tokens__default = _interopDefault(tokens);
var distModern = require('@shopify/polaris-tokens/dist-modern');
var utils = require('@shopify/polaris-tokens/dist-modern/utils');
var base = require('@shopify/polaris-tokens/dist-modern/configs/base');
var debounce = _interopDefault(require('lodash/debounce'));
var polarisIcons = require('@shopify/polaris-icons');
var reactDom = require('react-dom');
var isEqual = _interopDefault(require('lodash/isEqual'));
var reactTransitionGroup = require('react-transition-group');
if (typeof window !== 'undefined') {
window.Polaris = window.Polaris || {};
window.Polaris.VERSION = '5.13.0';
}
(function (Key) {
Key[Key["Backspace"] = 8] = "Backspace";
Key[Key["Tab"] = 9] = "Tab";
Key[Key["Enter"] = 13] = "Enter";
Key[Key["Shift"] = 16] = "Shift";
Key[Key["Ctrl"] = 17] = "Ctrl";
Key[Key["Alt"] = 18] = "Alt";
Key[Key["Pause"] = 19] = "Pause";
Key[Key["CapsLock"] = 20] = "CapsLock";
Key[Key["Escape"] = 27] = "Escape";
Key[Key["Space"] = 32] = "Space";
Key[Key["PageUp"] = 33] = "PageUp";
Key[Key["PageDown"] = 34] = "PageDown";
Key[Key["End"] = 35] = "End";
Key[Key["Home"] = 36] = "Home";
Key[Key["LeftArrow"] = 37] = "LeftArrow";
Key[Key["UpArrow"] = 38] = "UpArrow";
Key[Key["RightArrow"] = 39] = "RightArrow";
Key[Key["DownArrow"] = 40] = "DownArrow";
Key[Key["Insert"] = 45] = "Insert";
Key[Key["Delete"] = 46] = "Delete";
Key[Key["Key0"] = 48] = "Key0";
Key[Key["Key1"] = 49] = "Key1";
Key[Key["Key2"] = 50] = "Key2";
Key[Key["Key3"] = 51] = "Key3";
Key[Key["Key4"] = 52] = "Key4";
Key[Key["Key5"] = 53] = "Key5";
Key[Key["Key6"] = 54] = "Key6";
Key[Key["Key7"] = 55] = "Key7";
Key[Key["Key8"] = 56] = "Key8";
Key[Key["Key9"] = 57] = "Key9";
Key[Key["KeyA"] = 65] = "KeyA";
Key[Key["KeyB"] = 66] = "KeyB";
Key[Key["KeyC"] = 67] = "KeyC";
Key[Key["KeyD"] = 68] = "KeyD";
Key[Key["KeyE"] = 69] = "KeyE";
Key[Key["KeyF"] = 70] = "KeyF";
Key[Key["KeyG"] = 71] = "KeyG";
Key[Key["KeyH"] = 72] = "KeyH";
Key[Key["KeyI"] = 73] = "KeyI";
Key[Key["KeyJ"] = 74] = "KeyJ";
Key[Key["KeyK"] = 75] = "KeyK";
Key[Key["KeyL"] = 76] = "KeyL";
Key[Key["KeyM"] = 77] = "KeyM";
Key[Key["KeyN"] = 78] = "KeyN";
Key[Key["KeyO"] = 79] = "KeyO";
Key[Key["KeyP"] = 80] = "KeyP";
Key[Key["KeyQ"] = 81] = "KeyQ";
Key[Key["KeyR"] = 82] = "KeyR";
Key[Key["KeyS"] = 83] = "KeyS";
Key[Key["KeyT"] = 84] = "KeyT";
Key[Key["KeyU"] = 85] = "KeyU";
Key[Key["KeyV"] = 86] = "KeyV";
Key[Key["KeyW"] = 87] = "KeyW";
Key[Key["KeyX"] = 88] = "KeyX";
Key[Key["KeyY"] = 89] = "KeyY";
Key[Key["KeyZ"] = 90] = "KeyZ";
Key[Key["LeftMeta"] = 91] = "LeftMeta";
Key[Key["RightMeta"] = 92] = "RightMeta";
Key[Key["Select"] = 93] = "Select";
Key[Key["Numpad0"] = 96] = "Numpad0";
Key[Key["Numpad1"] = 97] = "Numpad1";
Key[Key["Numpad2"] = 98] = "Numpad2";
Key[Key["Numpad3"] = 99] = "Numpad3";
Key[Key["Numpad4"] = 100] = "Numpad4";
Key[Key["Numpad5"] = 101] = "Numpad5";
Key[Key["Numpad6"] = 102] = "Numpad6";
Key[Key["Numpad7"] = 103] = "Numpad7";
Key[Key["Numpad8"] = 104] = "Numpad8";
Key[Key["Numpad9"] = 105] = "Numpad9";
Key[Key["Multiply"] = 106] = "Multiply";
Key[Key["Add"] = 107] = "Add";
Key[Key["Subtract"] = 109] = "Subtract";
Key[Key["Decimal"] = 110] = "Decimal";
Key[Key["Divide"] = 111] = "Divide";
Key[Key["F1"] = 112] = "F1";
Key[Key["F2"] = 113] = "F2";
Key[Key["F3"] = 114] = "F3";
Key[Key["F4"] = 115] = "F4";
Key[Key["F5"] = 116] = "F5";
Key[Key["F6"] = 117] = "F6";
Key[Key["F7"] = 118] = "F7";
Key[Key["F8"] = 119] = "F8";
Key[Key["F9"] = 120] = "F9";
Key[Key["F10"] = 121] = "F10";
Key[Key["F11"] = 122] = "F11";
Key[Key["F12"] = 123] = "F12";
Key[Key["NumLock"] = 144] = "NumLock";
Key[Key["ScrollLock"] = 145] = "ScrollLock";
Key[Key["Semicolon"] = 186] = "Semicolon";
Key[Key["Equals"] = 187] = "Equals";
Key[Key["Comma"] = 188] = "Comma";
Key[Key["Dash"] = 189] = "Dash";
Key[Key["Period"] = 190] = "Period";
Key[Key["ForwardSlash"] = 191] = "ForwardSlash";
Key[Key["GraveAccent"] = 192] = "GraveAccent";
Key[Key["OpenBracket"] = 219] = "OpenBracket";
Key[Key["BackSlash"] = 220] = "BackSlash";
Key[Key["CloseBracket"] = 221] = "CloseBracket";
Key[Key["SingleQuote"] = 222] = "SingleQuote";
})(exports.Key || (exports.Key = {}));
function _defineProperty(obj, key, value) {
if (key in obj) {
Object.defineProperty(obj, key, {
value: value,
enumerable: true,
configurable: true,
writable: true
});
} else {
obj[key] = value;
}
return obj;
}
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;
}
function _objectSpread2(target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i] != null ? arguments[i] : {};
if (i % 2) {
ownKeys(Object(source), true).forEach(function (key) {
_defineProperty(target, key, source[key]);
});
} else if (Object.getOwnPropertyDescriptors) {
Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
} else {
ownKeys(Object(source)).forEach(function (key) {
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(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;
}
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;
}
const ThemeContext = /*#__PURE__*/React.createContext(undefined);
class MissingAppProviderError extends Error {
constructor(message = '') {
super(`${message ? `${message} ` : message}Your application must be wrapped in an <AppProvider> component. See https://polaris.shopify.com/components/structure/app-provider for implementation instructions.`);
this.name = 'MissingAppProviderError';
}
}
function useTheme() {
const theme = React.useContext(ThemeContext);
if (!theme) {
throw new MissingAppProviderError('No Theme was provided.');
}
return theme;
}
function clamp(number, min, max) {
if (number < min) return min;
if (number > max) return max;
return number;
}
// Because everything is a float in JS, Number.toFixed sometimes rounds in the
// "wrong" direction because of float imprecision. For instance:
// `(1.005).toFixed(2)` is `1.00`, NOT `1.01` because 1.005 in floating point is
// actually 1.004999995. By using exponentiation tricks here we can work around
// this imprecision, so `roundNumberToDecimalPlaces(1.005)` returns the expected
// value of `1.01`
// See https://www.jacklmoore.com/notes/rounding-in-javascript/
function roundNumberToDecimalPlaces(value, decimals) {
const exponent = Number(`${value}e${decimals}`);
const roundedExponent = Math.round(exponent);
const numberWithDecimalPlaces = Number(`${roundedExponent}e-${decimals}`);
return numberWithDecimalPlaces;
}
function rgbString(color) {
const {
red,
green,
blue
} = color;
if ('alpha' in color) {
return `rgba(${red}, ${green}, ${blue}, ${color.alpha})`;
} else {
return `rgb(${red}, ${green}, ${blue})`;
}
}
const rgbaString = rgbString;
function rgbToHex({
red,
green,
blue
}) {
return `#${componentToHex(red)}${componentToHex(green)}${componentToHex(blue)}`;
}
function componentToHex(component) {
const hex = component.toString(16);
return hex.length === 1 ? `0${hex}` : hex;
}
function hsbToHex(color) {
return rgbToHex(hsbToRgb(color));
}
function rgbFromHueAndChroma(hue, chroma) {
const huePrime = hue / 60;
const hueDelta = 1 - Math.abs(huePrime % 2 - 1);
const intermediateValue = chroma * hueDelta;
let red = 0;
let green = 0;
let blue = 0;
if (huePrime >= 0 && huePrime <= 1) {
red = chroma;
green = intermediateValue;
blue = 0;
}
if (huePrime >= 1 && huePrime <= 2) {
red = intermediateValue;
green = chroma;
blue = 0;
}
if (huePrime >= 2 && huePrime <= 3) {
red = 0;
green = chroma;
blue = intermediateValue;
}
if (huePrime >= 3 && huePrime <= 4) {
red = 0;
green = intermediateValue;
blue = chroma;
}
if (huePrime >= 4 && huePrime <= 5) {
red = intermediateValue;
green = 0;
blue = chroma;
}
if (huePrime >= 5 && huePrime <= 6) {
red = chroma;
green = 0;
blue = intermediateValue;
}
return {
red,
green,
blue
};
} // implements https://en.wikipedia.org/wiki/HSL_and_HSV#From_HSV
function hsbToRgb(color) {
const {
hue,
saturation,
brightness,
alpha = 1
} = color;
const chroma = brightness * saturation;
let {
red,
green,
blue
} = rgbFromHueAndChroma(hue, chroma);
const chromaBrightnessDelta = brightness - chroma;
red += chromaBrightnessDelta;
green += chromaBrightnessDelta;
blue += chromaBrightnessDelta;
return {
red: Math.round(red * 255),
green: Math.round(green * 255),
blue: Math.round(blue * 255),
alpha
};
} // implements https://en.wikipedia.org/wiki/HSL_and_HSV#From_HSV
function hslToRgb(color) {
const {
hue,
saturation,
lightness,
alpha = 1
} = color;
const chroma = (1 - Math.abs(2 * (lightness / 100) - 1)) * (saturation / 100);
let {
red,
green,
blue
} = rgbFromHueAndChroma(hue, chroma);
const lightnessVal = lightness / 100 - chroma / 2;
red += lightnessVal;
green += lightnessVal;
blue += lightnessVal;
return {
red: Math.round(red * 255),
green: Math.round(green * 255),
blue: Math.round(blue * 255),
alpha
};
} // ref https://en.wikipedia.org/wiki/HSL_and_HSV
function rgbToHsbl(color, type = 'b') {
const {
alpha = 1
} = color;
const red = color.red / 255;
const green = color.green / 255;
const blue = color.blue / 255;
const largestComponent = Math.max(red, green, blue);
const smallestComponent = Math.min(red, green, blue);
const delta = largestComponent - smallestComponent;
const lightness = (largestComponent + smallestComponent) / 2;
let saturation = 0;
if (largestComponent === 0) {
saturation = 0;
} else if (type === 'b') {
saturation = delta / largestComponent;
} else if (type === 'l') {
const baseSaturation = lightness > 0.5 ? delta / (2 - largestComponent - smallestComponent) : delta / (largestComponent + smallestComponent);
saturation = isNaN(baseSaturation) ? 0 : baseSaturation;
}
let huePercentage = 0;
switch (largestComponent) {
case red:
huePercentage = (green - blue) / delta + (green < blue ? 6 : 0);
break;
case green:
huePercentage = (blue - red) / delta + 2;
break;
case blue:
huePercentage = (red - green) / delta + 4;
}
const hue = huePercentage / 6 * 360;
const clampedHue = clamp(hue, 0, 360);
return {
hue: clampedHue ? roundNumberToDecimalPlaces(clampedHue, 2) : 0,
saturation: roundNumberToDecimalPlaces(clamp(saturation, 0, 1), 4),
brightness: roundNumberToDecimalPlaces(clamp(largestComponent, 0, 1), 4),
lightness: roundNumberToDecimalPlaces(lightness, 4),
alpha: roundNumberToDecimalPlaces(alpha, 4)
};
}
function rgbToHsb(color) {
const {
hue,
saturation,
brightness,
alpha = 1
} = rgbToHsbl(color, 'b');
return {
hue,
saturation,
brightness,
alpha
};
}
function rgbToHsl(color) {
const {
hue,
saturation: rawSaturation,
lightness: rawLightness,
alpha = 1
} = rgbToHsbl(color, 'l');
const saturation = roundNumberToDecimalPlaces(rawSaturation * 100, 2);
const lightness = roundNumberToDecimalPlaces(rawLightness * 100, 2);
return {
hue,
saturation,
lightness,
alpha
};
}
function hexToRgb(color) {
if (color.length === 4) {
const repeatHex = (hex1, hex2) => color.slice(hex1, hex2).repeat(2);
const _red = parseInt(repeatHex(1, 2), 16);
const _green = parseInt(repeatHex(2, 3), 16);
const _blue = parseInt(repeatHex(3, 4), 16);
return {
red: _red,
green: _green,
blue: _blue
};
}
const red = parseInt(color.slice(1, 3), 16);
const green = parseInt(color.slice(3, 5), 16);
const blue = parseInt(color.slice(5, 7), 16);
return {
red,
green,
blue
};
}
function getColorType(color) {
if (color.includes('#')) {
return 'hex';
} else if (color.includes('rgb')) {
return 'rgb';
} else if (color.includes('rgba')) {
return 'rgba';
} else if (color.includes('hsl')) {
return 'hsl';
} else if (color.includes('hsla')) {
return 'hsla';
} else {
if (process.env.NODE_ENV === 'development') {
/* eslint-disable-next-line no-console */
console.warn('Accepted colors formats are: hex, rgb, rgba, hsl and hsla');
}
return 'default';
}
}
function hslToString(hslColor) {
if (typeof hslColor === 'string') {
return hslColor;
}
const alpha = 'alpha' in hslColor ? hslColor.alpha : 1;
const {
hue,
lightness,
saturation
} = hslColor;
return `hsla(${roundNumberToDecimalPlaces(hue, 2)}, ${roundNumberToDecimalPlaces(saturation, 2)}%, ${roundNumberToDecimalPlaces(lightness, 2)}%, ${roundNumberToDecimalPlaces(alpha, 2)})`;
}
function rgbToObject(color) {
// eslint-disable-next-line @typescript-eslint/prefer-regexp-exec
const colorMatch = color.match(/\(([^)]+)\)/);
if (!colorMatch) {
return {
red: 0,
green: 0,
blue: 0,
alpha: 0
};
}
const [red, green, blue, alpha] = colorMatch[1].split(',');
const objColor = {
red: parseInt(red, 10),
green: parseInt(green, 10),
blue: parseInt(blue, 10),
alpha: parseInt(alpha, 10) || 1
};
return objColor;
}
function hexToHsla(color) {
return rgbToHsl(hexToRgb(color));
}
function rbgStringToHsla(color) {
return rgbToHsl(rgbToObject(color));
}
function hslToObject(color) {
// eslint-disable-next-line @typescript-eslint/prefer-regexp-exec
const colorMatch = color.match(/\(([^)]+)\)/);
if (!colorMatch) {
return {
hue: 0,
saturation: 0,
lightness: 0,
alpha: 0
};
}
const [hue, saturation, lightness, alpha] = colorMatch[1].split(',');
const objColor = {
hue: roundNumberToDecimalPlaces(parseFloat(hue), 2),
saturation: roundNumberToDecimalPlaces(parseFloat(saturation), 2),
lightness: roundNumberToDecimalPlaces(parseFloat(lightness), 2),
alpha: roundNumberToDecimalPlaces(parseFloat(alpha), 2) || 1
};
return objColor;
}
function colorToHsla(color) {
const type = getColorType(color);
switch (type) {
case 'hex':
return hexToHsla(color);
case 'rgb':
case 'rgba':
return rbgStringToHsla(color);
case 'hsl':
case 'hsla':
return hslToObject(color);
case 'default':
default:
throw new Error('Accepted color formats are: hex, rgb, rgba, hsl and hsla');
}
}
// implements: https://www.w3.org/WAI/ER/WD-AERT/#color-contrast
function isLight({
red,
green,
blue
}) {
const contrast = (red * 299 + green * 587 + blue * 114) / 1000;
return contrast > 125;
}
function normalizeName(name) {
return name.split(/(?=[A-Z])/).join('-').toLowerCase();
}
function constructColorName(baseName, property, suffix) {
const name = normalizeName(baseName);
const propertyName = property ? `-${normalizeName(property)}` : '';
const constructedSuffix = suffix ? `-${suffix}` : '';
return `--${name}${propertyName}${constructedSuffix}`;
}
function lightenColor(color, lighten = 0) {
if (typeof color === 'string') {
return color;
}
const {
lightness
} = color;
const nextLightness = lightness + lighten;
return _objectSpread2(_objectSpread2({}, color), {}, {
lightness: clamp(nextLightness, 0, 100)
});
}
function saturateColor(color, saturate = 0) {
if (typeof color === 'string') {
return color;
}
const {
saturation
} = color;
const nextSaturation = saturation + saturate;
return _objectSpread2(_objectSpread2({}, color), {}, {
saturation: nextSaturation
});
}
function createLightColor(color, lightness, saturation) {
if (typeof color === 'string') {
return color;
}
const lightenedColor = lightenColor(color, lightness);
const saturatedColor = saturateColor(lightenedColor, -saturation);
return saturatedColor;
}
const needsVariantList = ['topBar'];
function buildCustomPropertiesNoMemo(themeConfig, newDesignLanguage, tokens) {
const {
colors = {},
colorScheme,
config,
frameOffset = 0
} = themeConfig;
const mergedConfig = utils.mergeConfigs(base.config, config || {});
return newDesignLanguage ? customPropertyTransformer(_objectSpread2(_objectSpread2(_objectSpread2({}, distModern.colorFactory(colors, colorScheme, mergedConfig)), tokens), {}, {
frameOffset: `${frameOffset}px`
})) : _objectSpread2(_objectSpread2({}, buildLegacyColors(themeConfig)), customPropertyTransformer({
frameOffset: `${frameOffset}px`
}));
}
function buildThemeContext(themeConfig, cssCustomProperties) {
const {
logo,
colors = {},
colorScheme
} = themeConfig;
const newDesignLanguageColors = _objectWithoutProperties(colors, ["topBar"]);
return {
logo,
cssCustomProperties: toString(cssCustomProperties),
colors: newDesignLanguageColors,
colorScheme
};
}
function toString(obj) {
if (obj) {
return Object.entries(obj).map(pair => pair.join(':')).join(';');
} else {
return undefined;
}
}
function customPropertyTransformer(properties) {
return Object.entries(properties).reduce((transformed, [key, value]) => _objectSpread2(_objectSpread2({}, transformed), {}, {
[toCssCustomPropertySyntax(key)]: value
}), {});
}
function toCssCustomPropertySyntax(camelCase) {
return `--p-${camelCase.replace(/([A-Z0-9])/g, '-$1').toLowerCase()}`;
}
function buildLegacyColors(theme) {
let colorPairs;
const colors = theme && theme.colors && theme.colors.topBar ? theme.colors.topBar : {
background: '#00848e',
backgroundLighter: '#1d9ba4',
color: '#f9fafb'
};
const colorKey = 'topBar';
const colorKeys = Object.keys(colors);
if (colorKeys.length > 1) {
colorPairs = colorKeys.map(key => {
return [constructColorName(colorKey, key), colors[key]];
});
} else {
colorPairs = parseColors([colorKey, colors]);
}
return colorPairs.reduce((state, [key, value]) => _objectSpread2(_objectSpread2({}, state), {}, {
[key]: value
}), {});
}
function needsVariant(name) {
return needsVariantList.includes(name);
}
function lightenToString(color, lightness, saturation) {
return hslToString(createLightColor(color, lightness, saturation));
}
function setTextColor(name, variant = 'dark') {
if (variant === 'light') {
return [name, tokens__default.colorInk];
}
return [name, tokens__default.colorWhite];
}
function setBorderColor(name, variant = 'dark') {
if (variant === 'light') {
return [name, tokens__default.colorInkLighter];
}
return [name, tokens__default.colorSkyDark];
}
function setTheme(color, baseName, key, variant) {
const colorPairs = [];
switch (variant) {
case 'light':
colorPairs.push(setTextColor(constructColorName(baseName, null, 'color'), 'light'));
colorPairs.push(setBorderColor(constructColorName(baseName, null, 'border'), 'light'));
colorPairs.push([constructColorName(baseName, key, 'lighter'), lightenToString(color, 7, -10)]);
break;
case 'dark':
colorPairs.push(setTextColor(constructColorName(baseName, null, 'color'), 'dark'));
colorPairs.push(setBorderColor(constructColorName(baseName, null, 'border'), 'dark'));
colorPairs.push([constructColorName(baseName, key, 'lighter'), lightenToString(color, 15, 15)]);
break;
}
return colorPairs;
}
function parseColors([baseName, colors]) {
const keys = Object.keys(colors);
const colorPairs = [];
for (const key of keys) {
colorPairs.push([constructColorName(baseName, key), colors[key]]);
if (needsVariant(baseName)) {
const hslColor = colorToHsla(colors[key]);
if (typeof hslColor === 'string') {
return colorPairs;
}
const rgbColor = hslToRgb(hslColor);
if (isLight(rgbColor)) {
colorPairs.push(...setTheme(hslColor, baseName, key, 'light'));
} else {
colorPairs.push(...setTheme(hslColor, baseName, key, 'dark'));
}
}
}
return colorPairs;
} // eslint-disable-next-line @typescript-eslint/ban-types
function memoize(fnToMemoize) {
const cache = new Map();
return function (...args) {
const key = JSON.stringify([fnToMemoize.name, args]);
if (cache.get(key) === undefined) {
cache.set(key, fnToMemoize(...args));
}
return cache.get(key);
};
}
const buildCustomProperties = memoize(buildCustomPropertiesNoMemo);
const Tokens = {
// Border Radiuses
borderRadiusBase: rem('4px'),
borderRadiusWide: rem('8px'),
borderRadiusFull: '50%',
// Shadows
cardShadow: '0px 0px 5px var(--p-shadow-from-ambient-light), 0px 1px 2px var(--p-shadow-from-direct-light)',
popoverShadow: '-1px 0px 20px var(--p-shadow-from-ambient-light), 0px 1px 5px var(--p-shadow-from-direct-light)',
modalShadow: '0px 26px 80px var(--p-shadow-from-dim-light), 0px 0px 1px var(--p-shadow-from-dim-light)',
topBarShadow: '0 2px 2px -1px var(--p-shadow-from-direct-light)',
buttonDropShadow: '0 1px 0 rgba(0, 0, 0, 0.05)',
buttonInnerShadow: 'inset 0 -1px 0 rgba(0, 0, 0, 0.2)',
buttonPressedInnerShadow: 'inset 0 1px 0 rgba(0, 0, 0, 0.15)',
// Overrides
overrideNone: 'none',
overrideTransparent: 'transparent',
overrideOne: '1',
overrideVisible: 'visible',
overrideZero: '0',
overrideLoadingZIndex: '514',
buttonFontWeight: '500',
nonNullContent: "''",
choiceSize: rem('20px'),
iconSize: rem('10px'),
choiceMargin: rem('1px'),
controlBorderWidth: rem('2px'),
bannerBorderDefault: buildBannerBorder('--p-border-neutral-subdued'),
bannerBorderSuccess: buildBannerBorder('--p-border-success-subdued'),
bannerBorderHighlight: buildBannerBorder('--p-border-highlight-subdued'),
bannerBorderWarning: buildBannerBorder('--p-border-warning-subdued'),
bannerBorderCritical: buildBannerBorder('--p-border-critical-subdued'),
badgeMixBlendMode: 'luminosity',
thinBorderSubdued: `${rem('1px')} solid var(--p-border-subdued)`,
textFieldSpinnerOffset: rem('2px'),
textFieldFocusRingOffset: rem('-4px'),
textFieldFocusRingBorderRadius: rem('7px'),
buttonGroupItemSpacing: rem('-1px'),
duration100: '100ms',
duration150: '150ms',
easeIn: 'cubic-bezier(0.5, 0.1, 1, 1)',
ease: 'cubic-bezier(0.4, 0.22, 0.28, 1)',
rangeSliderThumbSizeBase: rem('16px'),
rangeSliderThumbSizeActive: rem('24px'),
rangeSliderThumbScale: '1.5',
badgeFontWeight: '400'
};
function rem(px) {
const baseFontSize = 10;
return `${parseInt(px, 10) / baseFontSize}rem`;
}
function buildBannerBorder(cssVar) {
return `inset 0 ${rem('1px')} 0 0 var(${cssVar}), inset 0 0 0 ${rem('1px')} var(${cssVar})`;
}
const FeaturesContext = /*#__PURE__*/React.createContext(undefined);
function useFeatures() {
const features = React.useContext(FeaturesContext);
if (!features) {
throw new Error('No Features were provided.');
}
return features;
}
function ThemeProvider({
theme: themeConfig,
alwaysRenderCustomProperties = false,
children
}) {
const {
newDesignLanguage
} = useFeatures();
const parentContext = React.useContext(ThemeContext);
const isParentThemeProvider = parentContext === undefined;
const parentColorScheme = parentContext && parentContext.colorScheme && parentContext.colorScheme;
const parentColors = parentContext && parentContext.colors && parentContext.colors;
const [customProperties, theme] = React.useMemo(() => {
const {
colors,
colorScheme
} = themeConfig,
rest = _objectWithoutProperties(themeConfig, ["colors", "colorScheme"]);
const processedThemeConfig = _objectSpread2(_objectSpread2(_objectSpread2({}, rest), {
colorScheme: getColorScheme(colorScheme, parentColorScheme)
}), {}, {
colors: _objectSpread2(_objectSpread2(_objectSpread2({}, isParentThemeProvider && DefaultThemeColors), parentColors != null && parentColors), colors)
});
const customProperties = buildCustomProperties(processedThemeConfig, newDesignLanguage, Tokens);
const theme = _objectSpread2(_objectSpread2({}, buildThemeContext(processedThemeConfig, newDesignLanguage ? customProperties : undefined)), {}, {
textColor: customProperties['--p-text'] || ''
});
return [customProperties, theme];
}, [isParentThemeProvider, newDesignLanguage, parentColorScheme, parentColors, themeConfig]); // We want these values to be empty string instead of `undefined` when not set.
// Otherwise, setting a style property to `undefined` does not remove it from the DOM.
const backgroundColor = customProperties['--p-background'] || '';
const color = customProperties['--p-text'] || '';
React.useEffect(() => {
if (isParentThemeProvider) {
document.body.style.backgroundColor = backgroundColor;
document.body.style.color = color;
}
}, [backgroundColor, color, isParentThemeProvider]);
let style;
if (isParentThemeProvider) {
style = customProperties;
} else if (alwaysRenderCustomProperties || !isParentThemeProvider && parentContext.cssCustomProperties !== toString(customProperties)) {
style = _objectSpread2(_objectSpread2({}, customProperties), {
color
});
} else {
style = {
color
};
}
return /*#__PURE__*/React__default.createElement(ThemeContext.Provider, {
value: theme
}, /*#__PURE__*/React__default.createElement("div", {
style: style
}, children));
}
function isInverseColorScheme(colorScheme) {
return colorScheme === 'inverse';
}
function getColorScheme(colorScheme, parentColorScheme) {
if (colorScheme == null) {
return parentColorScheme || 'light';
} else if (isInverseColorScheme(colorScheme)) {
return parentColorScheme === 'dark' || parentColorScheme === undefined ? 'light' : 'dark';
} else {
return colorScheme;
}
}
const MediaQueryContext = /*#__PURE__*/React.createContext(undefined);
function useMediaQuery() {
const mediaQuery = React.useContext(MediaQueryContext);
if (!mediaQuery) {
throw new Error('No mediaQuery was provided. Your application must be wrapped in an <AppProvider> component. See https://polaris.shopify.com/components/structure/app-provider for implementation instructions.');
}
return mediaQuery;
}
const Breakpoints = {
navigationBarCollapsed: '768px',
stackedContent: '1043px'
};
const noWindowMatches = {
media: '',
addListener: noop,
removeListener: noop,
matches: false,
onchange: noop,
addEventListener: noop,
removeEventListener: noop,
dispatchEvent: _ => true
};
function noop() {}
function navigationBarCollapsed() {
return typeof window === 'undefined' ? noWindowMatches : window.matchMedia(`(max-width: ${Breakpoints.navigationBarCollapsed})`);
}
function stackedContent() {
return typeof window === 'undefined' ? noWindowMatches : window.matchMedia(`(max-width: ${Breakpoints.stackedContent})`);
}
// see https://github.com/oliviertassinari/react-event-listener/
class EventListener extends React.PureComponent {
componentDidMount() {
this.attachListener();
}
componentDidUpdate(_ref) {
let detachProps = _objectWithoutProperties(_ref, ["passive"]);
this.detachListener(detachProps);
this.attachListener();
}
componentWillUnmount() {
this.detachListener();
}
render() {
return null;
}
attachListener() {
const {
event,
handler,
capture,
passive
} = this.props;
window.addEventListener(event, handler, {
capture,
passive
});
}
detachListener(prevProps) {
const {
event,
handler,
capture
} = prevProps || this.props;
window.removeEventListener(event, handler, capture);
}
}
const MediaQueryProvider = function MediaQueryProvider({
children
}) {
const [isNavigationCollapsed, setIsNavigationCollapsed] = React.useState(navigationBarCollapsed().matches); // eslint-disable-next-line react-hooks/exhaustive-deps
const handleResize = React.useCallback(debounce(() => {
if (isNavigationCollapsed !== navigationBarCollapsed().matches) {
setIsNavigationCollapsed(!isNavigationCollapsed);
}
}, 40, {
trailing: true,
leading: true,
maxWait: 40
}), [isNavigationCollapsed]);
React.useEffect(() => {
setIsNavigationCollapsed(navigationBarCollapsed().matches);
}, []);
return /*#__PURE__*/React__default.createElement(MediaQueryContext.Provider, {
value: {
isNavigationCollapsed
}
}, /*#__PURE__*/React__default.createElement(EventListener, {
event: "resize",
handler: handleResize
}), children);
};
const FocusManagerContext = /*#__PURE__*/React.createContext(undefined);
const UniqueIdFactoryContext = /*#__PURE__*/React.createContext(undefined);
/**
* Returns a unique id that remains consistent across multiple re-renders of the
* same hook
* @param prefix Defines a prefix for the ID. You probably want to set this to
* the name of the component you're calling `useUniqueId` in.
* @param overrideId Defines a fixed value to use instead of generating a unique
* ID. Useful for components that allow consumers to specify their own ID.
*/
function useUniqueId(prefix = '', overrideId = '') {
const idFactory = React.useContext(UniqueIdFactoryContext); // By using a ref to store the uniqueId for each invocation of the hook and
// checking that it is not already populated we ensure that we don’t generate
// a new ID on every re-render of a component.
const uniqueIdRef = React.useRef(null);
if (!idFactory) {
throw new MissingAppProviderError('No UniqueIdFactory was provided.');
} // If an override was specified, then use that instead of using a unique ID
// Hooks can’t be called conditionally so this has to go after all use* calls
if (overrideId) {
return overrideId;
} // If a unique id has not yet been generated, then get a new one
if (!uniqueIdRef.current) {
uniqueIdRef.current = idFactory.nextId(prefix);
}
return uniqueIdRef.current;
}
class UniqueIdFactory {
constructor(idGeneratorFactory) {
this.idGeneratorFactory = void 0;
this.idGenerators = {};
this.idGeneratorFactory = idGeneratorFactory;
}
nextId(prefix) {
if (!this.idGenerators[prefix]) {
this.idGenerators[prefix] = this.idGeneratorFactory(prefix);
}
return this.idGenerators[prefix]();
}
}
function globalIdGeneratorFactory(prefix = '') {
let index = 1;
return () => `Polaris${prefix}${index++}`;
}
function useFocusManager({
trapping
}) {
const focusManager = React.useContext(FocusManagerContext);
const id = useUniqueId();
if (!focusManager) {
throw new MissingAppProviderError('No FocusManager was provided.');
}
const {
trapFocusList,
add: addFocusItem,
remove: removeFocusItem
} = focusManager;
const canSafelyFocus = trapFocusList[0] === id;
const value = React.useMemo(() => ({
canSafelyFocus
}), [canSafelyFocus]);
React.useEffect(() => {
if (!trapping) return;
addFocusItem(id);
return () => {
removeFocusItem(id);
};
}, [addFocusItem, id, removeFocusItem, trapping]);
return value;
}
function FocusManager({
children
}) {
const [trapFocusList, setTrapFocusList] = React.useState([]);
const add = React.useCallback(id => {
setTrapFocusList(list => [...list, id]);
}, []);
const remove = React.useCallback(id => {
let removed = true;
setTrapFocusList(list => {
const clone = [...list];
const index = clone.indexOf(id);
if (index === -1) {
removed = false;
} else {
clone.splice(index, 1);
}
return clone;
});
return removed;
}, []);
const value = React.useMemo(() => ({
trapFocusList,
add,
remove
}), [add, trapFocusList, remove]);
return /*#__PURE__*/React__default.createElement(FocusManagerContext.Provider, {
value: value
}, children);
}
const PortalsManagerContext = /*#__PURE__*/React.createContext(undefined);
function usePortalsManager() {
const portalsManager = React.useContext(PortalsManagerContext);
if (!portalsManager) {
throw new Error('No portals manager was provided. Your application must be wrapped in an <AppProvider> component. See https://polaris.shopify.com/components/structure/app-provider for implementation instructions.');
}
return portalsManager;
}
function PortalsContainerComponent(_props, ref) {
return /*#__PURE__*/React__default.createElement("div", {
id: "PolarisPortalsContainer",
ref: ref
});
}
const PortalsContainer = /*#__PURE__*/React.forwardRef(PortalsContainerComponent);
function PortalsManager({
children,
container
}) {
const [portalContainerElement, setPortalContainerElement] = React.useState(null);
const currentContainer = container != null ? container : portalContainerElement;
const contextValue = React.useMemo(() => ({
container: currentContainer
}), [currentContainer]);
return /*#__PURE__*/React__default.createElement(PortalsManagerContext.Provider, {
value: contextValue
}, children, container ? null : /*#__PURE__*/React__default.createElement(PortalsContainer, {
ref: setPortalContainerElement
}));
}
const I18nContext = /*#__PURE__*/React.createContext(undefined);
function useI18n() {
const i18n = React.useContext(I18nContext);
if (!i18n) {
throw new MissingAppProviderError('No i18n was provided.');
}
return i18n;
}
const OBJECT_NOTATION_MATCHER = /\[(.*?)\]|(\w+)/g;
function get(obj, keypath, defaultValue) {
if (obj == null) return undefined;
const keys = Array.isArray(keypath) ? keypath : getKeypath(keypath);
let acc = obj; // eslint-disable-next-line @typescript-eslint/prefer-for-of
for (let i = 0; i < keys.length; i++) {
const val = acc[keys[i]];
if (val === undefined) return defaultValue;
acc = val;
}
return acc;
}
function getKeypath(str) {
const path = [];
let result;
while (result = OBJECT_NOTATION_MATCHER.exec(str)) {
const [, first, second] = result;
path.push(first || second);
}
return path;
}
// Unfortunately, this is how we have to type this at the moment.
// There is currently a proposal to support variadic kinds.
// https://github.com/Microsoft/TypeScript/issues/5453
function merge(...objs) {
let final = {};
for (const obj of objs) {
final = mergeRecursively(final, obj);
}
return final;
}
function mergeRecursively(inputObjA, objB) {
const objA = Array.isArray(inputObjA) ? [...inputObjA] : _objectSpread2({}, inputObjA);
for (const key in objB) {
if (!Object.prototype.hasOwnProperty.call(objB, key)) {
continue;
} else if (isMergeableValue(objB[key]) && isMergeableValue(objA[key])) {
objA[key] = mergeRecursively(objA[key], objB[key]);
} else {
objA[key] = objB[key];
}
}
return objA;
}
function isMergeableValue(value) {
return value !== null && typeof value === 'object';
}
const REPLACE_REGEX = /{([^}]*)}/g;
class I18n {
/**
* @param translation A locale object or array of locale objects that overrides default translations. If specifying an array then your desired language dictionary should come first, followed by your fallback language dictionaries
*/
constructor(translation) {
this.translation = {};
// slice the array to make a shallow copy of it, so we don't accidentally
// modify the original translation array
this.translation = Array.isArray(translation) ? merge(...translation.slice().reverse()) : translation;
}
translate(id, replacements) {
const text = get(this.translation, id, '');
if (!text) {
return '';
}
if (replacements) {
return text.replace(REPLACE_REGEX, match => {
const replacement = match.substring(1, match.length - 1);
if (replacements[replacement] === undefined) {
const replacementData = JSON.stringify(replacements);
throw new Error(`Error in translation for key '${id}'. No replacement found for key '${replacement}'. The following replacements were passed: '${replacementData}'`);
} // This could be a string or a number, but JS doesn't mind which it gets
// and can handle that cast internally. So let it, to save us calling
// toString() on what's already a string in 90% of cases.
return replacements[replacement];
});
}
return text;
}
translationKeyExists(path) {
return Boolean(get(this.translation, path));
}
}
const ScrollLockManagerContext = /*#__PURE__*/React.createContext(undefined);
function useScrollLockManager() {
const scrollLockManager = React.useContext(ScrollLockManagerContext);
if (!scrollLockManager) {
throw new MissingAppProviderError('No ScrollLockManager was provided.');
}
return scrollLockManager;
}
const isServer = typeof window === 'undefined' || typeof document === 'undefined';
const SCROLL_LOCKING_ATTRIBUTE = 'data-lock-scrolling';
const SCROLL_LOCKING_WRAPPER_ATTRIBUTE = 'data-lock-scrolling-wrapper';
let scrollPosition = 0;
class ScrollLockManager {
constructor() {
this.scrollLocks = 0;
this.locked = false;
}
registerScrollLock() {
this.scrollLocks += 1;
this.handleScrollLocking();
}
unregisterScrollLock() {
this.scrollLocks -= 1;
this.handleScrollLocking();
}
handleScrollLocking() {
if (isServer) return;
const {
scrollLocks
} = this;
const {
body
} = document;
const wrapper = body.firstElementChild;
if (scrollLocks === 0) {
body.removeAttribute(SCROLL_LOCKING_ATTRIBUTE);
if (wrapper) {
wrapper.removeAttribute(SCROLL_LOCKING_WRAPPER_ATTRIBUTE);
}
window.scroll(0, scrollPosition);
this.locked = false;
} else if (scrollLocks > 0 && !this.locked) {
scrollPosition = window.pageYOffset;
body.setAttribute(SCROLL_LOCKING_ATTRIBUTE, '');
if (wrapper) {
wrapper.setAttribute(SCROLL_LOCKING_WRAPPER_ATTRIBUTE, '');
wrapper.scrollTop = scrollPosition;
}
this.locked = true;
}
}
resetScrollPosition() {
scrollPosition = 0;
}
}
const StickyManagerContext = /*#__PURE__*/React.createContext(undefined);
function useStickyManager() {
const stickyManager = React.useContext(StickyManagerContext);
if (!stickyManager) {
throw new MissingAppProviderError('No StickyManager was provided.');
}
return stickyManager;
}
const scrollable = {
props: {
'data-polaris-scrollable': true
},
selector: '[data-polaris-scrollable]'
};
const overlay = {
props: {
'data-polaris-overlay': true
},
selector: '[data-polaris-overlay]'
};
const layer = {
props: {
'data-polaris-layer': true
},
selector: '[data-polaris-layer]'
};
const unstyled = {
props: {
'data-polaris-unstyled': true
},
selector: '[data-polaris-unstyled]'
};
const dataPolarisTopBar = {
props: {
'data-polaris-top-bar': true
},
selector: '[data-polaris-top-bar]'
};
const headerCell = {
props: {
'data-polaris-header-cell': true
},
selector: '[data-polaris-header-cell]'
};
const portal = {
props: ['data-portal-id'],
selector: '[data-portal-id]'
};
const DATA_ATTRIBUTE = {
overlay,
layer
};
class Rect {
static get zero() {
return new Rect();
}
constructor({
top = 0,
left = 0,
width = 0,
height = 0
} = {}) {
this.top = void 0;
this.left = void 0;
this.width = void 0;
this.height = void 0;
this.top = top;
this.left = left;
this.width = width;
this.height = height;
}
get center() {
return {
x: this.left + this.width / 2,
y: this.top + this.height / 2
};
}
}
function getRectForNode(node) {
if (!(node instanceof Element)) {
return new Rect({
width: window.innerWidth,
height: window.innerHeight
});
}
const rect = node.getBoundingClientRect();
return new Rect({
top: rect.top,
left: rect.left,
width: rect.width,
height: rect.height
});
}
class StickyManager {
constructor(container) {
this.stickyItems = [];
this.stuckItems = [];
this.container = null;
this.topBarOffset = 0;
this.handleResize = debounce(() => {
this.manageStickyItems();
}, 40, {
leading: true,
trailing: true,
maxWait: 40
});
this.handleScroll = debounce(() => {
this.manageStickyItems();
}, 40, {
leading: true,
trailing: true,
maxWait: 40
});
if (container) {
this.setContainer(container);
}
}
registerStickyItem(stickyItem) {
this.stickyItems.push(stickyItem);
}
unregisterStickyItem(nodeToRemove) {
const nodeIndex = this.stickyItems.findIndex(({
stickyNode
}) => nodeToRemove === stickyNode);
this.stickyItems.splice(nodeIndex, 1);
}
setContainer(el) {
this.container = el;
if (isDocument(el)) {
this.setTopBarOffset(el);
}
this.container.addEventListener('scroll', this.handleScroll);
window.addEventListener('resize', this.handleResize);
this.manageStickyItems();
}
removeScrollListener() {
if (this.container) {
this.container.removeEventListener('scroll', this.handleScroll);
window.removeEventListener('resize', this.handleResize);
}
}
manageStickyItems() {
if (this.stickyItems.length <= 0) {
return;
}
const scrollTop = this.container ? scrollTopFor(this.container) : 0;
const containerTop = getRectForNode(this.container).top + this.topBarOffset;
this.stickyItems.forEach(stickyItem => {
const {
handlePositioning
} = stickyItem;
const {
sticky,
top,
left,
width
} = this.evaluateStickyItem(stickyItem, scrollTop, containerTop);
this.updateStuckItems(stickyItem, sticky);
handlePositioning(sticky, top, left, width);
});
}
evaluateStickyItem(stickyItem, scrollTop, containerTop) {
const {
stickyNode,
placeHolderNode,
boundingElement,
offset,
disableWhenStacked
} = stickyItem;
if (disableWhenStacked && stackedContent().matches) {
return {
sticky: false,
top: 0,
left: 0,
width: 'auto'
};
}
const stickyOffset = offset ? this.getOffset(stickyNode) + parseInt(tokens.spacingLoose, 10) : this.getOffset(stickyNode);
const scrollPosition = scrollTop + stickyOffset;
const placeHolderNodeCurrentTop = placeHolderNode.getBoundingClientRect().top - containerTop + scrollTop;
const top = containerTop + stickyOffset;
const width = placeHolderNode.getBoundingClientRect().width;
const left = placeHolderNode.getBoundingClientRect().left;
let sticky;
if (boundingElement == null) {
sticky = scrollPosition >= placeHolderNodeCurrentTop;
} else {
const stickyItemHeight = stickyNode.getBoundingClientRect().height;
const stickyItemBottomPosition = boundingElement.getBoundingClientRect().bottom - stickyItemHeight + scrollTop - containerTop;
sticky = scrollPosition >= placeHolderNodeCurrentTop && scrollPosition < stickyItemBottomPosition;
}
return {
sticky,
top,
left,
width
};
}
updateStuckItems(item, sticky) {
const {
stickyNode
} = item;
if (sticky && !this.isNodeStuck(stickyNode)) {
this.addStuckItem(item);
} else if (!sticky && this.isNodeStuck(stickyNode)) {
this.removeStuckItem(item);
}
}
addStuckItem(stickyItem) {
this.stuckItems.push(stickyItem);
}
removeStuckItem(stickyItem) {
const {
stickyNode: nodeToRemove
} = stickyItem;
const nodeIndex = this.stuckItems.findIndex(({
stickyNode
}) => nodeToRemove === stickyNode);
this.stuckItems.splice(nodeIndex, 1);
}
getOffset(node) {
if (this.stuckItems.length === 0) {
return 0;
}
let offset = 0;
let count = 0;
const stuckNodesLength = this.stuckItems.length;
const nodeRect = getRectForNode(node);
while (count < stuckNodesLength) {
const stuckNode = this.stuckItems[count].stickyNode;
if (stuckNode !== node) {
const stuckNodeRect = getRectForNode(stuckNode);
if (!horizontallyOverlaps(nodeRect, stuckNodeRect)) {
offset += getRectForNode(stuckNode).height;
}
} else {
break;
}
count++;
}
return offset;
}
isNodeStuck(node) {
const nodeFound = this.stuckItems.findIndex(({
stickyNode
}) => node === stickyNode);
return nodeFound >= 0;
}
setTopBarOffset(container) {
const topbarElement = container.querySelector(`:not(${scrollable.selector}) ${dataPolarisTopBar.selector}`);
this.topBarOffset = topbarElement ? topbarElement.clientHeight : 0;
}
}
function isDocument(node) {
return node === document;
}
function scrollTopFor(container) {
return isDocument(container) ? document.body.scrollTop || document.documentElement.scrollTop : container.scrollTop;
}
function horizontallyOverlaps(rect1, rect2) {
const rect1Left = rect1.left;
const rect1Right = rect1.left + rect1.width;
const rect2Left = rect2.left;
const rect2Right = rect2.left + rect2.width;
return rect2Right < rect1Left || rect1Right < rect2Left;
}
const LinkContext = /*#__PURE__*/React.createContext(undefined);
function useLink() {
return React.useContext(LinkContext);
}
var AppProvider = {};
class AppProvider$1 extends React.Component {
constructor(props) {
super(props);
this.stickyManager = void 0;
this.scrollLockManager = void 0;
this.uniqueIdFactory = void 0;
this.stickyManager = new StickyManager();
this.scrollLockManager = new ScrollLockManager();
this.uniqueIdFactory = new UniqueIdFactory(globalIdGeneratorFactory);
const {
i18n,
linkComponent
} = this.props; // eslint-disable-next-line react/state-in-constructor
this.state = {
link: linkComponent,
intl: new I18n(i18n)
};
}
componentDidMount() {
if (document != null) {
this.stickyManager.setContainer(document);
}
}
componentDidUpdate({
i18n: prevI18n,
linkComponent: prevLinkComponent
}) {
const {
i18n,
linkComponent
} = this.props;
if (i18n === prevI18n && linkComponent === prevLinkComponent) {
return;
} // eslint-disable-next-line react/no-did-update-set-state
this.setState({
link: linkComponent,
intl: new I18n(i18n)
});
}
render() {
const {
theme = {},
children
} = this.props;
const {
intl,
link
} = this.state;
const features = _objectSpread2({
newDesignLanguage: false
}, this.props.features);
return /*#__PURE__*/React__default.createElement(FeaturesContext.Provider, {
value: features
}, /*#__PURE__*/React__default.createElement(I18nContext.Provider, {
value: intl
}, /*#__PURE__*/React__default.createElement(ScrollLockManagerContext.Provider, {
value: this.scrollLockManager
}, /*#__PURE__*/React__default.createElement(StickyManagerContext.Provider, {
value: this.stickyManager
}, /*#__PURE__*/React__default.createElement(UniqueIdFactoryContext.Provider, {
value: this.uniqueIdFactory
}, /*#__PURE__*/React__default.createElement(LinkContext.Provider, {
value: link
}, /*#__PURE__*/React__default.createElement(ThemeProvider, {
theme: theme
}, /*#__PURE__*/React__default.createElement(MediaQueryProvider, null, /*#__PURE__*/React__default.createElement(PortalsManager, null, /*#__PURE__*/React__default.createElement(FocusManager, null, children))))))))));
}
}
function classNames(...classes) {
return classes.filter(Boolean).join(' ');
}
function variationName(name, value) {
return `${name}${value.charAt(0).toUpperCase()}${value.slice(1)}`;
}
/**
* useIsAfterInitialMount will trigger a re-render to provide
* you with an updated value. Using this you enhance server-side
* code that can only run on the client.
* @returns MutableRefObject<T> - Returns a ref object with the
* results from invoking initial value
* @example
* function ComponentExample({children})