@shopify/polaris
Version:
Shopify’s product component library
1,853 lines (1,580 loc) • 566 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.8.4';
}
var NEW_DESIGN_LANGUAGE_COLORS = ['base', 'subdued', 'critical', 'warning', 'highlight', 'success', 'primary'];
function isNewDesignLanguageColor(color) {
return NEW_DESIGN_LANGUAGE_COLORS.includes(color);
}
(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;
}
var ThemeContext = /*#__PURE__*/React.createContext(undefined);
class MissingAppProviderError extends Error {
constructor(message = '') {
super("".concat(message ? "".concat(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() {
var 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;
}
function rgbString(color) {
var {
red,
green,
blue
} = color;
if ('alpha' in color) {
return "rgba(".concat(red, ", ").concat(green, ", ").concat(blue, ", ").concat(color.alpha, ")");
} else {
return "rgb(".concat(red, ", ").concat(green, ", ").concat(blue, ")");
}
}
var rgbaString = rgbString;
function rgbToHex({
red,
green,
blue
}) {
return "#".concat(componentToHex(red)).concat(componentToHex(green)).concat(componentToHex(blue));
}
function componentToHex(component) {
var hex = component.toString(16);
return hex.length === 1 ? "0".concat(hex) : hex;
}
function hsbToHex(color) {
return rgbToHex(hsbToRgb(color));
}
function rgbFromHueAndChroma(hue, chroma) {
var huePrime = hue / 60;
var hueDelta = 1 - Math.abs(huePrime % 2 - 1);
var intermediateValue = chroma * hueDelta;
var red = 0;
var green = 0;
var 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) {
var {
hue,
saturation,
brightness,
alpha = 1
} = color;
var chroma = brightness * saturation;
var {
red,
green,
blue
} = rgbFromHueAndChroma(hue, chroma);
var 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) {
var {
hue,
saturation,
lightness,
alpha = 1
} = color;
var chroma = (1 - Math.abs(2 * (lightness / 100) - 1)) * (saturation / 100);
var {
red,
green,
blue
} = rgbFromHueAndChroma(hue, chroma);
var 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') {
var {
red: r,
green: g,
blue: b,
alpha = 1
} = color;
var red = r / 255;
var green = g / 255;
var blue = b / 255;
var largestComponent = Math.max(red, green, blue);
var smallestComponent = Math.min(red, green, blue);
var delta = largestComponent - smallestComponent;
var lightness = (largestComponent + smallestComponent) / 2;
var saturation = 0;
if (largestComponent === 0) {
saturation = 0;
} else if (type === 'b') {
saturation = delta / largestComponent;
} else if (type === 'l') {
var baseSaturation = lightness > 0.5 ? delta / (2 - largestComponent - smallestComponent) : delta / (largestComponent + smallestComponent);
saturation = isNaN(baseSaturation) ? 0 : baseSaturation;
}
var 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;
}
var hue = Math.round(huePercentage / 6 * 360);
return {
hue: clamp(hue, 0, 360) || 0,
saturation: parseFloat(clamp(saturation, 0, 1).toFixed(2)),
brightness: parseFloat(clamp(largestComponent, 0, 1).toFixed(2)),
lightness: parseFloat(lightness.toFixed(2)),
alpha: parseFloat(alpha.toFixed(2))
};
}
function rgbToHsb(color) {
var {
hue,
saturation,
brightness,
alpha = 1
} = rgbToHsbl(color, 'b');
return {
hue,
saturation,
brightness,
alpha
};
}
function rgbToHsl(color) {
var {
hue,
saturation: rawSaturation,
lightness: rawLightness,
alpha = 1
} = rgbToHsbl(color, 'l');
var saturation = rawSaturation * 100;
var lightness = rawLightness * 100;
return {
hue,
saturation,
lightness,
alpha
};
}
function hexToRgb(color) {
if (color.length === 4) {
var repeatHex = (hex1, hex2) => color.slice(hex1, hex2).repeat(2);
var _red = parseInt(repeatHex(1, 2), 16);
var _green = parseInt(repeatHex(2, 3), 16);
var _blue = parseInt(repeatHex(3, 4), 16);
return {
red: _red,
green: _green,
blue: _blue
};
}
var red = parseInt(color.slice(1, 3), 16);
var green = parseInt(color.slice(3, 5), 16);
var 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;
}
var alpha = 'alpha' in hslColor ? hslColor.alpha : 1;
var {
hue,
lightness,
saturation
} = hslColor;
return "hsla(".concat(hue, ", ").concat(saturation, "%, ").concat(lightness, "%, ").concat(alpha, ")");
}
function rgbToObject(color) {
// eslint-disable-next-line @typescript-eslint/prefer-regexp-exec
var colorMatch = color.match(/\(([^)]+)\)/);
if (!colorMatch) {
return {
red: 0,
green: 0,
blue: 0,
alpha: 0
};
}
var [red, green, blue, alpha] = colorMatch[1].split(',');
var 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
var colorMatch = color.match(/\(([^)]+)\)/);
if (!colorMatch) {
return {
hue: 0,
saturation: 0,
lightness: 0,
alpha: 0
};
}
var [hue, saturation, lightness, alpha] = colorMatch[1].split(',');
var objColor = {
hue: parseInt(hue, 10),
saturation: parseInt(saturation, 10),
lightness: parseInt(lightness, 10),
alpha: parseFloat(alpha) || 1
};
return objColor;
}
function colorToHsla(color) {
var 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
}) {
var 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) {
var name = normalizeName(baseName);
var propertyName = property ? "-".concat(normalizeName(property)) : '';
var constructedSuffix = suffix ? "-".concat(suffix) : '';
return "--".concat(name).concat(propertyName).concat(constructedSuffix);
}
function lightenColor(color, lighten = 0) {
if (typeof color === 'string') {
return color;
}
var {
lightness
} = color;
var nextLightness = lightness + lighten;
return _objectSpread2(_objectSpread2({}, color), {}, {
lightness: clamp(nextLightness, 0, 100)
});
}
function saturateColor(color, saturate = 0) {
if (typeof color === 'string') {
return color;
}
var {
saturation
} = color;
var nextSaturation = saturation + saturate;
return _objectSpread2(_objectSpread2({}, color), {}, {
saturation: nextSaturation
});
}
function createLightColor(color, lightness, saturation) {
if (typeof color === 'string') {
return color;
}
var lightenedColor = lightenColor(color, lightness);
var saturatedColor = saturateColor(lightenedColor, -saturation);
return saturatedColor;
}
var needsVariantList = ['topBar'];
function buildCustomProperties(themeConfig, newDesignLanguage, tokens) {
var {
colors = {},
colorScheme,
config,
frameOffset = 0
} = themeConfig;
var mergedConfig = utils.mergeConfigs(base.config, config || {});
return newDesignLanguage ? customPropertyTransformer(_objectSpread2(_objectSpread2(_objectSpread2({}, distModern.colorFactory(colors, colorScheme, mergedConfig)), tokens), {}, {
frameOffset: "".concat(frameOffset, "px")
})) : _objectSpread2(_objectSpread2({}, buildLegacyColors(themeConfig)), customPropertyTransformer({
frameOffset: "".concat(frameOffset, "px")
}));
}
function buildThemeContext(themeConfig, cssCustomProperties) {
var {
logo,
colors = {},
colorScheme
} = themeConfig;
var 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-".concat(camelCase.replace(/([A-Z0-9])/g, '-$1').toLowerCase());
}
function buildLegacyColors(theme) {
var colorPairs;
var colors = theme && theme.colors && theme.colors.topBar ? theme.colors.topBar : {
background: '#00848e',
backgroundLighter: '#1d9ba4',
color: '#f9fafb'
};
var colorKey = 'topBar';
var 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) {
var 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]) {
var keys = Object.keys(colors);
var colorPairs = [];
for (var _key of keys) {
colorPairs.push([constructColorName(baseName, _key), colors[_key]]);
if (needsVariant(baseName)) {
var hslColor = colorToHsla(colors[_key]);
if (typeof hslColor === 'string') {
return colorPairs;
}
var rgbColor = hslToRgb(hslColor);
if (isLight(rgbColor)) {
colorPairs.push(...setTheme(hslColor, baseName, _key, 'light'));
} else {
colorPairs.push(...setTheme(hslColor, baseName, _key, 'dark'));
}
}
}
return colorPairs;
}
var 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: "".concat(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) {
var baseFontSize = 10;
return "".concat(parseInt(px, 10) / baseFontSize, "rem");
}
function buildBannerBorder(cssVar) {
return "inset 0 ".concat(rem('1px'), " 0 0 var(").concat(cssVar, "), inset 0 0 0 ").concat(rem('1px'), " var(").concat(cssVar, ")");
}
var FeaturesContext = /*#__PURE__*/React.createContext(undefined);
function useFeatures() {
var features = React.useContext(FeaturesContext);
if (!features) {
throw new Error('No Features were provided.');
}
return features;
}
function ThemeProvider({
theme: themeConfig,
children
}) {
var {
newDesignLanguage
} = useFeatures();
var parentContext = React.useContext(ThemeContext);
var isParentThemeProvider = parentContext === undefined;
var parentColorScheme = parentContext && parentContext.colorScheme && parentContext.colorScheme;
var parentColors = parentContext && parentContext.colors && parentContext.colors;
var {
colors,
colorScheme
} = themeConfig,
rest = _objectWithoutProperties(themeConfig, ["colors", "colorScheme"]);
var processedThemeConfig = _objectSpread2(_objectSpread2(_objectSpread2({}, rest), {
colorScheme: getColorScheme(colorScheme, parentColorScheme)
}), {}, {
colors: _objectSpread2(_objectSpread2(_objectSpread2({}, isParentThemeProvider && DefaultThemeColors), parentColors != null && parentColors), colors)
});
var customProperties = React.useMemo(() => buildCustomProperties(processedThemeConfig, newDesignLanguage, Tokens), [processedThemeConfig, newDesignLanguage]);
var theme = React.useMemo(() => buildThemeContext(processedThemeConfig, newDesignLanguage ? customProperties : undefined), [customProperties, processedThemeConfig, newDesignLanguage]); // 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.
var backgroundColor = customProperties['--p-background'] || '';
var color = customProperties['--p-text'] || '';
React.useEffect(() => {
if (isParentThemeProvider) {
document.body.style.backgroundColor = backgroundColor;
document.body.style.color = color;
}
}, [backgroundColor, color, isParentThemeProvider]);
var style = _objectSpread2(_objectSpread2({}, customProperties), !isParentThemeProvider && {
color
});
return /*#__PURE__*/React__default.createElement(ThemeContext.Provider, {
value: _objectSpread2(_objectSpread2({}, theme), {}, {
textColor: color
})
}, /*#__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;
}
}
var MediaQueryContext = /*#__PURE__*/React.createContext(undefined);
function useMediaQuery() {
var 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;
}
var Breakpoints = {
navigationBarCollapsed: '768px',
stackedContent: '1043px'
};
var 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: ".concat(Breakpoints.navigationBarCollapsed, ")"));
}
function stackedContent() {
return typeof window === 'undefined' ? noWindowMatches : window.matchMedia("(max-width: ".concat(Breakpoints.stackedContent, ")"));
}
// see https://github.com/oliviertassinari/react-event-listener/
class EventListener extends React.PureComponent {
componentDidMount() {
this.attachListener();
}
componentDidUpdate(_ref) {
var detachProps = _objectWithoutProperties(_ref, ["passive"]);
this.detachListener(detachProps);
this.attachListener();
}
componentWillUnmount() {
this.detachListener();
}
render() {
return null;
}
attachListener() {
var {
event,
handler,
capture,
passive
} = this.props;
window.addEventListener(event, handler, {
capture,
passive
});
}
detachListener(prevProps) {
var {
event,
handler,
capture
} = prevProps || this.props;
window.removeEventListener(event, handler, capture);
}
}
var MediaQueryProvider = function MediaQueryProvider({
children
}) {
var [isNavigationCollapsed, setIsNavigationCollapsed] = React.useState(navigationBarCollapsed().matches); // eslint-disable-next-line react-hooks/exhaustive-deps
var 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);
};
var FocusManagerContext = /*#__PURE__*/React.createContext(undefined);
var 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 = '') {
var 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.
var 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 = '') {
var index = 1;
return () => "Polaris".concat(prefix).concat(index++);
}
function useFocusManager() {
var focusManager = React.useContext(FocusManagerContext);
var id = useUniqueId();
if (!focusManager) {
throw new MissingAppProviderError('No FocusManager was provided.');
}
var {
trapFocusList,
add: addFocusItem,
remove: removeFocusItem
} = focusManager;
var canSafelyFocus = trapFocusList[0] === id;
var value = React.useMemo(() => ({
canSafelyFocus
}), [canSafelyFocus]);
React.useEffect(() => {
addFocusItem(id);
return () => {
removeFocusItem(id);
};
}, [addFocusItem, id, removeFocusItem]);
return value;
}
function FocusManager({
children
}) {
var [trapFocusList, setTrapFocusList] = React.useState([]);
var add = React.useCallback(id => {
setTrapFocusList(list => [...list, id]);
}, []);
var remove = React.useCallback(id => {
var removed = true;
setTrapFocusList(list => {
var clone = [...list];
var index = clone.indexOf(id);
if (index === -1) {
removed = false;
} else {
clone.splice(index, 1);
}
return clone;
});
return removed;
}, []);
var value = React.useMemo(() => ({
trapFocusList,
add,
remove
}), [add, trapFocusList, remove]);
return /*#__PURE__*/React__default.createElement(FocusManagerContext.Provider, {
value: value
}, children);
}
var I18nContext = /*#__PURE__*/React.createContext(undefined);
function useI18n() {
var i18n = React.useContext(I18nContext);
if (!i18n) {
throw new MissingAppProviderError('No i18n was provided.');
}
return i18n;
}
var OBJECT_NOTATION_MATCHER = /\[(.*?)\]|(\w+)/g;
function get(obj, keypath, defaultValue) {
if (obj == null) return undefined;
var keys = Array.isArray(keypath) ? keypath : getKeypath(keypath);
var acc = obj; // eslint-disable-next-line @typescript-eslint/prefer-for-of
for (var i = 0; i < keys.length; i++) {
var val = acc[keys[i]];
if (val === undefined) return defaultValue;
acc = val;
}
return acc;
}
function getKeypath(str) {
var path = [];
var result;
while (result = OBJECT_NOTATION_MATCHER.exec(str)) {
var [, 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) {
var final = {};
for (var obj of objs) {
final = mergeRecursively(final, obj);
}
return final;
}
function mergeRecursively(inputObjA, objB) {
var objA = Array.isArray(inputObjA) ? [...inputObjA] : _objectSpread2({}, inputObjA);
for (var 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';
}
var 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) {
var text = get(this.translation, id, '');
if (!text) {
return '';
}
if (replacements) {
return text.replace(REPLACE_REGEX, match => {
var replacement = match.substring(1, match.length - 1);
if (replacements[replacement] === undefined) {
var replacementData = JSON.stringify(replacements);
throw new Error("Error in translation for key '".concat(id, "'. No replacement found for key '").concat(replacement, "'. The following replacements were passed: '").concat(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));
}
}
var ScrollLockManagerContext = /*#__PURE__*/React.createContext(undefined);
function useScrollLockManager() {
var scrollLockManager = React.useContext(ScrollLockManagerContext);
if (!scrollLockManager) {
throw new MissingAppProviderError('No ScrollLockManager was provided.');
}
return scrollLockManager;
}
var isServer = typeof window === 'undefined' || typeof document === 'undefined';
var SCROLL_LOCKING_ATTRIBUTE = 'data-lock-scrolling';
var SCROLL_LOCKING_WRAPPER_ATTRIBUTE = 'data-lock-scrolling-wrapper';
var 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;
var {
scrollLocks
} = this;
var {
body
} = document;
var 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;
}
}
var StickyManagerContext = /*#__PURE__*/React.createContext(undefined);
function useStickyManager() {
var stickyManager = React.useContext(StickyManagerContext);
if (!stickyManager) {
throw new MissingAppProviderError('No StickyManager was provided.');
}
return stickyManager;
}
var scrollable = {
props: {
'data-polaris-scrollable': true
},
selector: '[data-polaris-scrollable]'
};
var overlay = {
props: {
'data-polaris-overlay': true
},
selector: '[data-polaris-overlay]'
};
var layer = {
props: {
'data-polaris-layer': true
},
selector: '[data-polaris-layer]'
};
var unstyled = {
props: {
'data-polaris-unstyled': true
},
selector: '[data-polaris-unstyled]'
};
var dataPolarisTopBar = {
props: {
'data-polaris-top-bar': true
},
selector: '[data-polaris-top-bar]'
};
var headerCell = {
props: {
'data-polaris-header-cell': true
},
selector: '[data-polaris-header-cell]'
};
var portal = {
props: ['data-portal-id'],
selector: '[data-portal-id]'
};
var 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
});
}
var 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) {
var 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;
}
var scrollTop = this.container ? scrollTopFor(this.container) : 0;
var containerTop = getRectForNode(this.container).top + this.topBarOffset;
this.stickyItems.forEach(stickyItem => {
var {
handlePositioning
} = stickyItem;
var {
sticky,
top,
left,
width
} = this.evaluateStickyItem(stickyItem, scrollTop, containerTop);
this.updateStuckItems(stickyItem, sticky);
handlePositioning(sticky, top, left, width);
});
}
evaluateStickyItem(stickyItem, scrollTop, containerTop) {
var {
stickyNode,
placeHolderNode,
boundingElement,
offset,
disableWhenStacked
} = stickyItem;
if (disableWhenStacked && stackedContent().matches) {
return {
sticky: false,
top: 0,
left: 0,
width: 'auto'
};
}
var stickyOffset = offset ? this.getOffset(stickyNode) + parseInt(tokens.spacingLoose, 10) : this.getOffset(stickyNode);
var scrollPosition = scrollTop + stickyOffset;
var placeHolderNodeCurrentTop = placeHolderNode.getBoundingClientRect().top - containerTop + scrollTop;
var top = containerTop + stickyOffset;
var width = placeHolderNode.getBoundingClientRect().width;
var left = placeHolderNode.getBoundingClientRect().left;
var sticky;
if (boundingElement == null) {
sticky = scrollPosition >= placeHolderNodeCurrentTop;
} else {
var stickyItemHeight = stickyNode.getBoundingClientRect().height;
var stickyItemBottomPosition = boundingElement.getBoundingClientRect().bottom - stickyItemHeight + scrollTop - containerTop;
sticky = scrollPosition >= placeHolderNodeCurrentTop && scrollPosition < stickyItemBottomPosition;
}
return {
sticky,
top,
left,
width
};
}
updateStuckItems(item, sticky) {
var {
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) {
var {
stickyNode: nodeToRemove
} = stickyItem;
var nodeIndex = this.stuckItems.findIndex(({
stickyNode
}) => nodeToRemove === stickyNode);
this.stuckItems.splice(nodeIndex, 1);
}
getOffset(node) {
if (this.stuckItems.length === 0) {
return 0;
}
var offset = 0;
var count = 0;
var stuckNodesLength = this.stuckItems.length;
var nodeRect = getRectForNode(node);
while (count < stuckNodesLength) {
var stuckNode = this.stuckItems[count].stickyNode;
if (stuckNode !== node) {
var stuckNodeRect = getRectForNode(stuckNode);
if (!horizontallyOverlaps(nodeRect, stuckNodeRect)) {
offset += getRectForNode(stuckNode).height;
}
} else {
break;
}
count++;
}
return offset;
}
isNodeStuck(node) {
var nodeFound = this.stuckItems.findIndex(({
stickyNode
}) => node === stickyNode);
return nodeFound >= 0;
}
setTopBarOffset(container) {
var topbarElement = container.querySelector(":not(".concat(scrollable.selector, ") ").concat(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) {
var rect1Left = rect1.left;
var rect1Right = rect1.left + rect1.width;
var rect2Left = rect2.left;
var rect2Right = rect2.left + rect2.width;
return rect2Right < rect1Left || rect1Right < rect2Left;
}
var 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);
var {
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
}) {
var {
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() {
var {
theme = {},
children
} = this.props;
var {
intl,
link
} = this.state;
var 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(FocusManager, null, children)))))))));
}
}
function classNames(...classes) {
return classes.filter(Boolean).join(' ');
}
function variationName(name, value) {
return "".concat(name).concat(value.charAt(0).toUpperCase()).concat(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}) {
* const isMounted = useIsAfterInitialMount();
* const content = isMounted ? children : null;
*
* return <>{content}</>;
* }
*/
function useIsAfterInitialMount() {
var [isAfterInitialMount, setIsAfterInitialMount] = React.useState(false);
React.useEffect(() => {
setIsAfterInitialMount(true);
}, []);
return isAfterInitialMount;
}
function Image(_ref) {
var {
sourceSet,
source,
crossOrigin
} = _ref,
rest = _objectWithoutProperties(_ref, ["sourceSet", "source", "crossOrigin"]);
var finalSourceSet = sourceSet ? sourceSet.map(({
source: subSource,
descriptor
}) => "".concat(subSource, " ").concat(descriptor)).join(',') : null;
return finalSourceSet ?
/*#__PURE__*/
// eslint-disable-next-line jsx-a11y/alt-text
React__default.createElement("img", Object.assign({
src: source,
srcSet: finalSourceSet,
crossOrigin: crossOrigin
}, rest)) :
/*#__PURE__*/
// eslint-disable-next-line jsx-a11y/alt-text
React__default.createElement("img", Object.assign({
src: source
}, rest, {
crossOrigin: crossOrigin
}));
}
var styles = {
"Avatar": "Polaris-Avatar",
"hidden": "Polaris-Avatar--hidden",
"sizeSmall": "Polaris-Avatar--sizeSmall",
"sizeMedium": "Polaris-Avatar--sizeMedium",
"sizeLarge": "Polaris-Avatar--sizeLarge",
"styleOne": "Polaris-Avatar--styleOne",
"styleTwo": "Polaris-Avatar--styleTwo",
"styleThree": "Polaris-Avatar--styleThree",
"styleFour": "Polaris-Avatar--styleFour",
"styleFive": "Polaris-Avatar--styleFive",
"styleSix": "Polaris-Avatar--styleSix",
"hasImage": "Polaris-Avatar--hasImage",
"Image": "Polaris-Avatar__Image",
"Initials": "Polaris-Avatar__Initials",
"Svg": "Polaris-Avatar__Svg"
};
var Status;
(function (Status) {
Status["Pending"] = "PENDING";
Status["Loaded"] = "LOADED";
Status["Errored"] = "ERRORED";
})(Status || (Status = {}));
var STYLE_CLASSES = ['one', 'two', 'three', 'four', 'five'];
var _ref = /*#__PURE__*/React__default.createElement("path", {
fill: "currentColor",
d: "M8.28 27.5A14.95 14.95 0 0120 21.8c4.76 0 8.97 2.24 11.72 5.7a14.02 14.02 0 01-8.25 5.91 14.82 14.82 0 01-6.94 0 14.02 14.02 0 01-8.25-5.9zM13.99 12.78a6.02 6.02 0 1112.03 0 6.02 6.02 0 01-12.03 0z"
});
function Avatar({
name,
source,
initials,
customer,
size = 'medium',
accessibilityLabel
}) {
var i18n = useI18n();
var {
newDesignLanguage
} = useFeatures();
var isAfterInitialMount = useIsAfterInitialMount();
function styleClass(name) {
var finalStyleClasses = newDesignLanguage ? STYLE_CLASSES : [...STYLE_CLASSES, 'six'];
return name ? finalStyleClasses[name.charCodeAt(0) % finalStyleClasses.length] : finalStyleClasses[0];
}
var [status, setStatus] = React.useState(Status.Pending); // If the source changes, set the status back to pending
React.useEffect(() => {
setStatus(Status.Pending);
}, [source]);
var handleError = React.useCallback(() => {
setStatus(Status.Errored);
}, []);
var handleLoad = React.useCallback(() => {
setStatus(Statu