UNPKG

@shopify/polaris

Version:

Shopify’s product component library

1,104 lines (1,065 loc) 496 kB
'use strict'; Object.defineProperty(exports, '__esModule', { value: true }); function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; } var PropTypes = require('prop-types'); var React = require('react'); var styles = require('@shopify/react-utilities/styles'); var tslib_1 = require('tslib'); var decorators = require('@shopify/javascript-utilities/decorators'); var geometry = require('@shopify/javascript-utilities/geometry'); var throttle = _interopDefault(require('lodash-decorators/throttle')); var events = require('@shopify/javascript-utilities/events'); var other = require('@shopify/javascript-utilities/other'); var get = _interopDefault(require('lodash/get')); var merge = _interopDefault(require('lodash/merge')); var replace = _interopDefault(require('lodash/replace')); var hoistStatics = _interopDefault(require('hoist-non-react-statics')); var reactUtilities = require('@shopify/react-utilities'); var fastdom = require('@shopify/javascript-utilities/fastdom'); var math = require('@shopify/javascript-utilities/math'); var dates = require('@shopify/javascript-utilities/dates'); var capitalize = _interopDefault(require('lodash/capitalize')); require('core-js/fn/array/some'); require('core-js/fn/string/ends-with'); var ReactDOM = require('react-dom'); var focus = require('@shopify/javascript-utilities/focus'); var dom = require('@shopify/javascript-utilities/dom'); var reactTransitionGroup = require('react-transition-group'); var memoize$1 = _interopDefault(require('lodash/memoize')); var isEqual = _interopDefault(require('lodash/isEqual')); var pick = _interopDefault(require('lodash/pick')); var target = require('@shopify/react-utilities/target'); if (typeof window !== 'undefined') { window.Polaris = window.Polaris || {}; window.Polaris.VERSION = '2.7.0'; } (function (Keys) { Keys[Keys["BACKSPACE"] = 8] = "BACKSPACE"; Keys[Keys["TAB"] = 9] = "TAB"; Keys[Keys["ENTER"] = 13] = "ENTER"; Keys[Keys["SHIFT"] = 16] = "SHIFT"; Keys[Keys["CTRL"] = 17] = "CTRL"; Keys[Keys["ALT"] = 18] = "ALT"; Keys[Keys["PAUSE"] = 19] = "PAUSE"; Keys[Keys["CAPS_LOCK"] = 20] = "CAPS_LOCK"; Keys[Keys["ESCAPE"] = 27] = "ESCAPE"; Keys[Keys["SPACE"] = 32] = "SPACE"; Keys[Keys["PAGE_UP"] = 33] = "PAGE_UP"; Keys[Keys["PAGE_DOWN"] = 34] = "PAGE_DOWN"; Keys[Keys["END"] = 35] = "END"; Keys[Keys["HOME"] = 36] = "HOME"; Keys[Keys["LEFT_ARROW"] = 37] = "LEFT_ARROW"; Keys[Keys["UP_ARROW"] = 38] = "UP_ARROW"; Keys[Keys["RIGHT_ARROW"] = 39] = "RIGHT_ARROW"; Keys[Keys["DOWN_ARROW"] = 40] = "DOWN_ARROW"; Keys[Keys["INSERT"] = 45] = "INSERT"; Keys[Keys["DELETE"] = 46] = "DELETE"; Keys[Keys["KEY_0"] = 48] = "KEY_0"; Keys[Keys["KEY_1"] = 49] = "KEY_1"; Keys[Keys["KEY_2"] = 50] = "KEY_2"; Keys[Keys["KEY_3"] = 51] = "KEY_3"; Keys[Keys["KEY_4"] = 52] = "KEY_4"; Keys[Keys["KEY_5"] = 53] = "KEY_5"; Keys[Keys["KEY_6"] = 54] = "KEY_6"; Keys[Keys["KEY_7"] = 55] = "KEY_7"; Keys[Keys["KEY_8"] = 56] = "KEY_8"; Keys[Keys["KEY_9"] = 57] = "KEY_9"; Keys[Keys["KEY_A"] = 65] = "KEY_A"; Keys[Keys["KEY_B"] = 66] = "KEY_B"; Keys[Keys["KEY_C"] = 67] = "KEY_C"; Keys[Keys["KEY_D"] = 68] = "KEY_D"; Keys[Keys["KEY_E"] = 69] = "KEY_E"; Keys[Keys["KEY_F"] = 70] = "KEY_F"; Keys[Keys["KEY_G"] = 71] = "KEY_G"; Keys[Keys["KEY_H"] = 72] = "KEY_H"; Keys[Keys["KEY_I"] = 73] = "KEY_I"; Keys[Keys["KEY_J"] = 74] = "KEY_J"; Keys[Keys["KEY_K"] = 75] = "KEY_K"; Keys[Keys["KEY_L"] = 76] = "KEY_L"; Keys[Keys["KEY_M"] = 77] = "KEY_M"; Keys[Keys["KEY_N"] = 78] = "KEY_N"; Keys[Keys["KEY_O"] = 79] = "KEY_O"; Keys[Keys["KEY_P"] = 80] = "KEY_P"; Keys[Keys["KEY_Q"] = 81] = "KEY_Q"; Keys[Keys["KEY_R"] = 82] = "KEY_R"; Keys[Keys["KEY_S"] = 83] = "KEY_S"; Keys[Keys["KEY_T"] = 84] = "KEY_T"; Keys[Keys["KEY_U"] = 85] = "KEY_U"; Keys[Keys["KEY_V"] = 86] = "KEY_V"; Keys[Keys["KEY_W"] = 87] = "KEY_W"; Keys[Keys["KEY_X"] = 88] = "KEY_X"; Keys[Keys["KEY_Y"] = 89] = "KEY_Y"; Keys[Keys["KEY_Z"] = 90] = "KEY_Z"; Keys[Keys["LEFT_META"] = 91] = "LEFT_META"; Keys[Keys["RIGHT_META"] = 92] = "RIGHT_META"; Keys[Keys["SELECT"] = 93] = "SELECT"; Keys[Keys["NUMPAD_0"] = 96] = "NUMPAD_0"; Keys[Keys["NUMPAD_1"] = 97] = "NUMPAD_1"; Keys[Keys["NUMPAD_2"] = 98] = "NUMPAD_2"; Keys[Keys["NUMPAD_3"] = 99] = "NUMPAD_3"; Keys[Keys["NUMPAD_4"] = 100] = "NUMPAD_4"; Keys[Keys["NUMPAD_5"] = 101] = "NUMPAD_5"; Keys[Keys["NUMPAD_6"] = 102] = "NUMPAD_6"; Keys[Keys["NUMPAD_7"] = 103] = "NUMPAD_7"; Keys[Keys["NUMPAD_8"] = 104] = "NUMPAD_8"; Keys[Keys["NUMPAD_9"] = 105] = "NUMPAD_9"; Keys[Keys["MULTIPLY"] = 106] = "MULTIPLY"; Keys[Keys["ADD"] = 107] = "ADD"; Keys[Keys["SUBTRACT"] = 109] = "SUBTRACT"; Keys[Keys["DECIMAL"] = 110] = "DECIMAL"; Keys[Keys["DIVIDE"] = 111] = "DIVIDE"; Keys[Keys["F1"] = 112] = "F1"; Keys[Keys["F2"] = 113] = "F2"; Keys[Keys["F3"] = 114] = "F3"; Keys[Keys["F4"] = 115] = "F4"; Keys[Keys["F5"] = 116] = "F5"; Keys[Keys["F6"] = 117] = "F6"; Keys[Keys["F7"] = 118] = "F7"; Keys[Keys["F8"] = 119] = "F8"; Keys[Keys["F9"] = 120] = "F9"; Keys[Keys["F10"] = 121] = "F10"; Keys[Keys["F11"] = 122] = "F11"; Keys[Keys["F12"] = 123] = "F12"; Keys[Keys["NUM_LOCK"] = 144] = "NUM_LOCK"; Keys[Keys["SCROLL_LOCK"] = 145] = "SCROLL_LOCK"; Keys[Keys["SEMICOLON"] = 186] = "SEMICOLON"; Keys[Keys["EQUALS"] = 187] = "EQUALS"; Keys[Keys["COMMA"] = 188] = "COMMA"; Keys[Keys["DASH"] = 189] = "DASH"; Keys[Keys["PERIOD"] = 190] = "PERIOD"; Keys[Keys["FORWARD_SLASH"] = 191] = "FORWARD_SLASH"; Keys[Keys["GRAVE_ACCENT"] = 192] = "GRAVE_ACCENT"; Keys[Keys["OPEN_BRACKET"] = 219] = "OPEN_BRACKET"; Keys[Keys["BACK_SLASH"] = 220] = "BACK_SLASH"; Keys[Keys["CLOSE_BRACKET"] = 221] = "CLOSE_BRACKET"; Keys[Keys["SINGLE_QUOTE"] = 222] = "SINGLE_QUOTE"; })(exports.Keys || (exports.Keys = {})); const contentContextTypes = { withinContentContainer: PropTypes.bool }; var index_common = { colorPurpleLighter: 'rgb(246, 240, 253)', colorPurpleLight: 'rgb(227, 208, 255)', colorPurpleBase: 'rgb(156, 106, 222)', colorPurpleDark: 'rgb(80, 36, 143)', colorPurpleDarker: 'rgb(35, 0, 81)', colorPurpleText: 'rgb(80, 73, 90)', colorIndigoLighter: 'rgb(244, 245, 250)', colorIndigoLight: 'rgb(179, 188, 245)', colorIndigoBase: 'rgb(92, 106, 196)', colorIndigoDark: 'rgb(32, 46, 120)', colorIndigoDarker: 'rgb(0, 6, 57)', colorIndigoText: 'rgb(62, 65, 85)', colorBlueLighter: 'rgb(235, 245, 250)', colorBlueLight: 'rgb(180, 225, 250)', colorBlueBase: 'rgb(0, 122, 206)', colorBlueDark: 'rgb(8, 78, 138)', colorBlueDarker: 'rgb(0, 20, 41)', colorBlueText: 'rgb(62, 78, 87)', colorTealLighter: 'rgb(224, 245, 245)', colorTealLight: 'rgb(183, 236, 236)', colorTealBase: 'rgb(71, 193, 191)', colorTealDark: 'rgb(0, 132, 142)', colorTealDarker: 'rgb(0, 49, 53)', colorTealText: 'rgb(64, 83, 82)', colorGreenLighter: 'rgb(227, 241, 223)', colorGreenLight: 'rgb(187, 229, 179)', colorGreenBase: 'rgb(80, 184, 60)', colorGreenDark: 'rgb(16, 128, 67)', colorGreenDarker: 'rgb(23, 54, 48)', colorGreenText: 'rgb(65, 79, 62)', colorYellowLighter: 'rgb(252, 241, 205)', colorYellowLight: 'rgb(255, 234, 138)', colorYellowBase: 'rgb(238, 194, 0)', colorYellowDark: 'rgb(156, 111, 25)', colorYellowDarker: 'rgb(87, 59, 0)', colorYellowText: 'rgb(89, 81, 48)', colorOrangeLighter: 'rgb(252, 235, 219)', colorOrangeLight: 'rgb(255, 197, 139)', colorOrangeBase: 'rgb(244, 147, 66)', colorOrangeDark: 'rgb(192, 87, 23)', colorOrangeDarker: 'rgb(74, 21, 4)', colorOrangeText: 'rgb(89, 68, 48)', colorRedLighter: 'rgb(251, 234, 229)', colorRedLight: 'rgb(254, 173, 154)', colorRedBase: 'rgb(222, 54, 24)', colorRedDark: 'rgb(191, 7, 17)', colorRedDarker: 'rgb(51, 1, 1)', colorRedText: 'rgb(88, 60, 53)', colorWhiteBase: 'rgb(255, 255, 255)', colorSkyLighter: 'rgb(249, 250, 251)', colorSkyLight: 'rgb(244, 246, 248)', colorSkyBase: 'rgb(223, 227, 232)', colorSkyDark: 'rgb(196, 205, 213)', colorInkLightest: 'rgb(145, 158, 171)', colorInkLighter: 'rgb(99, 115, 129)', colorInkLight: 'rgb(69, 79, 91)', colorInkBase: 'rgb(33, 43, 54)', colorBlackBase: 'rgb(0, 0, 0)', spacingNone: 0, spacingExtraTight: '4px', spacingTight: '8px', spacingBase: '16px', spacingLoose: '20px', spacingExtraLoose: '32px', fontStackBase: "-apple-system, 'BlinkMacSystemFont', 'San Francisco', 'Roboto', 'Segoe UI', 'Helvetica Neue', sans-serif", fontStackMonospace: "Monaco, Consolas, 'Lucida Console', monospace", }; var polarisTokens = index_common; const Breakpoints = { navBarCollapsed: '769px', stackedContent: '1043px' }; const noWindowMatches = { media: '', addListener: other.noop, removeListener: other.noop, matches: false }; function stackedContent() { return typeof window === 'undefined' ? noWindowMatches : window.matchMedia(`(max-width: ${Breakpoints.stackedContent})`); } class StickyManager { constructor(container) { this.stickyItems = []; this.stuckItems = []; 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; events.addEventListener(this.container, 'scroll', this.handleScroll); events.addEventListener(window, 'resize', this.handleResize); this.manageStickyItems(); } removeScrollListener() { if (this.container) { events.removeEventListener(this.container, 'scroll', this.handleScroll); events.removeEventListener(window, 'resize', this.handleResize); } } handleResize() { this.manageStickyItems(); } handleScroll() { this.manageStickyItems(); } manageStickyItems() { if (this.stickyItems.length <= 0) { return; } const scrollTop = scrollTopFor(this.container); const containerTop = geometry.getRectForNode(this.container).top; this.stickyItems.forEach(stickyItem => { const handlePositioning = stickyItem.handlePositioning; var _evaluateStickyItem = this.evaluateStickyItem(stickyItem, scrollTop, containerTop); const sticky = _evaluateStickyItem.sticky, top = _evaluateStickyItem.top, left = _evaluateStickyItem.left, width = _evaluateStickyItem.width; this.updateStuckItems(stickyItem, sticky); handlePositioning(sticky, top, left, width); }); } evaluateStickyItem(stickyItem, scrollTop, containerTop) { const stickyNode = stickyItem.stickyNode, placeHolderNode = stickyItem.placeHolderNode, boundingElement = stickyItem.boundingElement, offset = stickyItem.offset, disableWhenStacked = stickyItem.disableWhenStacked; if (disableWhenStacked && stackedContent().matches) { return { sticky: false, top: 0, left: 0, width: 'auto' }; } const stickyOffset = offset ? this.getOffset(stickyNode) + parseInt(polarisTokens.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.stickyNode; 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 nodeToRemove = stickyItem.stickyNode; 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 = geometry.getRectForNode(node); while (count < stuckNodesLength) { const stuckNode = this.stuckItems[count].stickyNode; if (stuckNode !== node) { const stuckNodeRect = geometry.getRectForNode(stuckNode); if (!horizontallyOverlaps(nodeRect, stuckNodeRect)) { offset += geometry.getRectForNode(stuckNode).height; } } else { break; } count++; } return offset; } isNodeStuck(node) { const nodeFound = this.stuckItems.findIndex(({ stickyNode }) => node === stickyNode); return nodeFound >= 0; } } tslib_1.__decorate([throttle(50), decorators.autobind], StickyManager.prototype, "handleResize", null); tslib_1.__decorate([throttle(50), decorators.autobind], StickyManager.prototype, "handleScroll", null); 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 polarisAppProviderContextTypes = { polaris: PropTypes.any, easdk: PropTypes.any }; var Polaris = {"Avatar":{"label":"Avatar","labelWithInitials":"Avatar with initials {initials}"},"Badge":{"PROGRESS_LABELS":{"incomplete":"Incomplete","partiallyComplete":"Partially complete","complete":"Complete"},"STATUS_LABELS":{"info":"Info","success":"Success","warning":"Warning","attention":"Attention"}},"Button":{"spinnerAccessibilityLabel":"Loading"},"Common":{"checkbox":"checkbox","undo":"Undo"},"DataTable":{"sortAccessibilityLabel":"sort {direction} by","navAccessibilityLabel":"Scroll table {direction} one column","totalsRowHeading":"Totals"},"DatePicker":{"previousMonth":"Show previous month, {previousMonthName} {showPreviousYear}","nextMonth":"Show next month, {nextMonth} {nextYear}","today":"Today "},"DropZone":{"overlayTextFile":"Drop file to upload","overlayTextImage":"Drop image to upload","errorOverlayTextFile":"File type is not valid","errorOverlayTextImage":"Image type is not valid","FileUpload":{"actionTitleFile":"Add file","actionTitleImage":"Add image","actionHintFile":"or drop files to upload","actionHintImage":"or drop images to upload"}},"EmptySearchResult":{"altText":"Empty search results"},"Icon":{"backdropWarning":"The {color} icon doesn’t accept backdrops. The icon colors that have backdrops are: {colorsWithBackDrops}"},"Modal":{"iFrameTitle":"body markup","modalWarning":"These required properties are missing from Modal: {missingProps}","actionWarning":"Modals inside of an embedded app will ignore: {actionWarnings}"},"Pagination":{"previous":"Previous","next":"Next","pagination":"Pagination"},"ProgressBar":{"negativeWarningMessage":"Values passed to the progress prop shouldn’t be negative. Resetting {progress} to 0.","exceedWarningMessage":"Values passed to the progress prop shouldn’t exceed 100. Setting {progress} to 100."},"ResourceList":{"sortingLabel":"Sort by","defaultItemSingular":"item","defaultItemPlural":"items","showing":"Showing {itemsCount} {resource}","selected":"{selectedItemsCount} selected","allItemsSelected":"All {itemsLength}+ {resourceNamePlural} in your store are selected.","selectAllItems":"Select all {itemsLength}+ {resourceNamePlural} in your store","emptySearchResultTitle":"No {resourceNamePlural} found","emptySearchResultDescription":"Try changing the filters or search term","selectButtonText":"Select","a11yCheckboxDeselectAllSingle":"Deselect {resourceNameSingular}","a11yCheckboxSelectAllSingle":"Select {resourceNameSingular}","a11yCheckboxDeselectAllMultiple":"Deselect all {itemsLength} {resourceNamePlural}","a11yCheckboxSelectAllMultiple":"Select all {itemsLength} {resourceNamePlural}","ariaLiveSingular":"{itemsLength} item","ariaLivePlural":"{itemsLength} items","Item":{"selectItem":"Select: {accessibilityLabel}","deselectItem":"Deselect: {accessibilityLabel}","actionsDropdown":"Actions dropdown"},"BulkActions":{"actionsActivatorLabel":"Actions","moreActionsActivatorLabel":"More actions","warningMessage":"To provide a better user experience. There should only be a maximum of {maxPromotedActions} promoted actions."},"FilterCreator":{"filterButtonLabel":"Filter","selectFilterKeyPlaceholder":"Select a filter…","addFilterButtonLabel":"Add filter","showAllWhere":"Show all {resourceNamePlural} where:"},"FilterControl":{"textFieldLabel":"Search {resourceNamePlural}"},"FilterValueSelector":{"selectFilterValuePlaceholder":"Select a filter…"},"DateSelector":{"dateFilterLabel":"Select a value","dateValueLabel":"Date","dateValueError":"Match YYYY-MM-DD format","dateValuePlaceholder":"YYYY-MM-DD","SelectOptions":{"PastWeek":"in the last week","PastMonth":"in the last month","PastQuarter":"in the last 3 months","PastYear":"in the last year","ComingWeek":"next week","ComingMonth":"next month","ComingQuarter":"in the next 3 months","ComingYear":"in the next year","OnOrBefore":"on or before","OnOrAfter":"on or after"},"FilterLabelForValue":{"past_week":"in the last week","past_month":"in the last month","past_quarter":"in the last 3 months","past_year":"in the last year","coming_week":"next week","coming_month":"next month","coming_quarter":"in the next 3 months","coming_year":"in the next year","on_or_before":"on or before {date}","on_or_after":"on or after {date}"}}},"Spinner":{"warningMessage":"The color {color} is not meant to be used on {size} spinners. The colors available on large spinners are: {colors}"},"Tag":{"ariaLabel":"Remove {children}"}}; var en = { Polaris: Polaris }; class Intl { constructor(translation) { this.translation = translation; this.setTranslation(translation); } setTranslation(translation) { const i18n = Array.isArray(translation) ? merge({}, ...translation) : translation; this.translation = i18n ? merge({}, en, i18n) : en; } translate(id, replacements) { return translate(id, this.translation, replacements); } translationKeyExists(path) { return Boolean(get(this.translation, path)); } } tslib_1.__decorate([decorators.autobind], Intl.prototype, "translate", null); class Link { constructor(linkComponent) { this.linkComponent = linkComponent; } setLinkComponent(link) { this.linkComponent = link; } getLinkComponent() { return this.linkComponent; } } function transformBreadcrumb(breadcrumb, shopOrigin) { if (breadcrumb.content == null) { throw new Error(`No content provided for breadcrumb (${JSON.stringify(breadcrumb)})`); } let target$$1; if (breadcrumb.target) { target$$1 = breadcrumb.target; } else if (breadcrumb.url) { target$$1 = getTargetFromURL(breadcrumb.url, shopOrigin); } else { target$$1 = undefined; } return { label: breadcrumb.content, href: breadcrumb.url, target: target$$1, message: target$$1 === 'app' ? generateCallback(breadcrumb.url) : breadcrumb.onAction }; } function transformAction(shopOrigin) { return action => { let style; if (action.disabled) { style = 'disabled'; } else if (action.destructive) { style = 'danger'; } let target$$1; if (action.target) { target$$1 = action.target; } else if (action.url) { target$$1 = action.external ? 'new' : getTargetFromURL(action.url, shopOrigin); } else { target$$1 = undefined; } return { label: action.content, href: action.url, target: target$$1, message: target$$1 === 'app' ? generateCallback(action.url) : action.onAction, style }; }; } function transformActionGroup(shopOrigin) { return actionGroup => { return { type: 'dropdown', label: actionGroup.title, links: actionGroup.actions.map(transformAction(shopOrigin)) }; }; } // see https://en.wikipedia.org/wiki/Uniform_Resource_Identifier#Generic_syntax for more info on the URI scheme function getTargetFromURL(url, shopOrigin) { if (isRootRelative(url) || isOriginHost(url, shopOrigin)) { return 'shopify'; } else if (isSameHost(url) || isFragment(url) || isRelative(url) || isSchemeRelative(url)) { return 'app'; } else { return 'new'; } } function isRootRelative(url) { return url.charAt(0) === '/' && url.charAt(1) !== '/'; } function isOriginHost(url, shopOrigin) { return shopOrigin && url.indexOf(shopOrigin) !== -1; } function isSameHost(url) { const hostIndex = url.indexOf(window.location.hostname); const firstDotIndex = url.indexOf('.'); return hostIndex >= 0 && hostIndex < firstDotIndex; } function isFragment(url) { return url.charAt(0) === '#'; } function isRelative(url) { return url.charAt(0) !== '/' && url.toLowerCase().indexOf('http') !== 0; } function isSchemeRelative(url) { return url.indexOf('//') === 0; } function generateCallback(url) { if (url == null) { return; } return () => { window.location.assign(url); }; } function transformPagination(pagination) { if (pagination == null) { return undefined; } const hasNext = pagination.hasNext, hasPrevious = pagination.hasPrevious, nextURL = pagination.nextURL, previousURL = pagination.previousURL, onNext = pagination.onNext, onPrevious = pagination.onPrevious; const finalPagination = {}; if (hasNext) { if (onNext) { finalPagination.next = { message: onNext }; } else if (nextURL) { finalPagination.next = { href: nextURL }; } } if (hasPrevious) { if (onPrevious) { finalPagination.previous = { message: onPrevious }; } else if (previousURL) { finalPagination.previous = { href: previousURL }; } } return finalPagination; } class Bar { constructor(messenger) { this.messenger = messenger; } update(config) { const title = config.title, icon = config.icon, breadcrumbs = config.breadcrumbs, secondaryActions = config.secondaryActions, actionGroups = config.actionGroups, primaryAction = config.primaryAction, pagination = config.pagination; this.messenger.send('Shopify.API.Bar.initialize', { buttons: { primary: primaryAction ? transformAction(this.messenger.targetOrigin)(primaryAction) : undefined, secondary: [...(secondaryActions || []).map(transformAction(this.messenger.targetOrigin)), ...(actionGroups || []).map(transformActionGroup(this.messenger.targetOrigin))] }, title, icon, breadcrumb: getLastLevelBreadcrumb(breadcrumbs, this.messenger.targetOrigin), pagination: transformPagination(pagination) }); if (actionGroups) { document.addEventListener('click', this.closeDropdown); } else { document.removeEventListener('click', this.closeDropdown); } } closeDropdown() { this.messenger.send('Shopify.API.Bar.closeDropdown'); } } tslib_1.__decorate([decorators.autobind], Bar.prototype, "closeDropdown", null); function getLastLevelBreadcrumb(breadcrumbs, shopOrigin) { return breadcrumbs && breadcrumbs.length > 0 ? transformBreadcrumb(breadcrumbs[breadcrumbs.length - 1], shopOrigin) : undefined; } class Modal { constructor(messenger) { this.messenger = messenger; } open(config) { const title = config.title, primaryAction = config.primaryAction, secondaryActions = config.secondaryActions, src = config.src, width = config.width, height = config.height, onClose = config.onClose; if (onClose != null) { this.storeCloseCallback(onClose); } this.messenger.send('Shopify.API.Modal.open', { src, title, width, height, buttons: { primary: primaryAction ? transformAction(this.messenger.targetOrigin)(primaryAction) : undefined, secondary: secondaryActions ? secondaryActions.map(transformAction(this.messenger.targetOrigin)) : undefined } }); } alert(config) { const children = config.children, title = config.title, destructive = config.destructive, confirmContent = config.confirmContent, cancelContent = config.cancelContent, onClose = config.onClose, onConfirm = config.onConfirm; this.storeCloseCallback(result => { if (result) { if (onConfirm) { onConfirm(); } } else if (onClose) { onClose(); } }); if (onClose && cancelContent) { this.messenger.send('Shopify.API.Modal.confirm', { message: { title, message: children, okButton: confirmContent, cancelButton: cancelContent, style: destructive ? 'danger' : undefined } }); } else { this.messenger.send('Shopify.API.Modal.alert', { message: { title, message: children, okButton: confirmContent, style: destructive ? 'danger' : undefined } }); } } close(result, data) { if (this.closeCallback == null) { return; } this.messenger.send('Shopify.API.Modal.close', { result, data }); } storeCloseCallback(callback) { this.closeCallback = callback; } callCloseCallback(result, data) { const closeCallback = this.closeCallback; if (typeof closeCallback === 'function') { delete this.closeCallback; closeCallback(result, data); } } } class ResourcePicker { constructor(messenger, modal) { this.messenger = messenger; this.modal = modal; } close() { this.modal.close(); } open({ title, products, collections, allowMultiple = false, showHidden = true, onCancel, onSelection }) { this.modal.storeCloseCallback((success, data) => { if (!success) { if (onCancel != null) { onCancel(); } return; } if (onSelection == null) { return; } onSelection(data); }); const resources = []; if (products) { resources.push('products'); } if (collections) { resources.push('collections'); } if (collections) { this.messenger.send('Shopify.API.Modal.collectionPicker', { title, selectMultiple: allowMultiple, // eslint-disable-next-line camelcase show_hidden: showHidden, // eslint-disable-next-line camelcase selectable_resources: resources }); } else { this.messenger.send('Shopify.API.Modal.productPicker', { title, selectMultiple: allowMultiple, // eslint-disable-next-line camelcase show_hidden: showHidden, // eslint-disable-next-line camelcase selectable_resources: resources }); } } } const CoreWeakMap = require('core-js/library/es6/weak-map'); class Messenger { constructor(target$$1, handlers, options) { this.target = target$$1; this.handlers = handlers; this.targetOrigin = '*'; this.queue = []; this.callbacks = {}; this.callbacksToID = new CoreWeakMap(); this.callbackIndex = 0; if (typeof window === 'undefined') { return; } this.name = options.name; this.targetOrigin = options.targetOrigin; this.debug = options.debug || false; if (!this.targetOrigin.match(/^http(s)?:\/\//)) { this.warn('warning: targetOrigin should include the protocol'); } window.addEventListener('message', this.handleMessage.bind(this), false); } setTarget(target$$1) { this.target = target$$1; this.tryToDequeue(); } send(message, data) { const normalizedPayload = this.normalizePayload(data); const newMessage = { message, data: normalizedPayload }; const messageString = JSON.stringify(newMessage); if (this.target != null) { this.log(`Posting message: ${messageString} to ${this.targetOrigin} }`); this.target.postMessage(messageString, this.targetOrigin); } else { this.log(`Queueing message: ${messageString}`); this.queue.push(newMessage); } return normalizedPayload; } tryToDequeue() { const queue = this.queue, target$$1 = this.target; if (target$$1 == null || queue.length === 0) { return; } this.queue.forEach(message => { target$$1.postMessage(message, '*'); }); this.queue.length = 0; } log(message) { if (!this.debug) { return; } // eslint-disable-next-line no-console console.log(`[${this.name} Messenger]: ${message}`); } warn(message) { if (!this.debug) { return; } // eslint-disable-next-line no-console console.warn(`[${this.name} Messenger]: ${message}`); } storeCallback(callback) { // Optimization, so we don’t store a new callback ID for callbacks // we have sent before if (this.callbacksToID.has(callback)) { return this.callbacksToID.get(callback); } const id = `EASDKCallback${this.callbackIndex++}`; this.callbacks[id] = callback; this.callbacksToID.set(callback, id); return id; } normalizePayload(payload) { if (payload == null) { return payload; } if (typeof payload === 'function') { return this.storeCallback(payload); } else if (payload instanceof Array) { return payload.map(newPayload => { return this.normalizePayload(newPayload); }); } else if (typeof payload === 'object') { return Object.keys(payload).reduce((newPayload, key) => { newPayload[key] = this.normalizePayload(payload[key]); return newPayload; }, {}); } else { return payload; } } handleMessage(event) { if (!this.isFromTargetOrigin(event)) { this.log(`client received ${event.data} from unknown origin ${event.origin}. Expected ${this.targetOrigin}`); return; } this.log(`Received message: ${event.data} from ${event.origin}`); let receivedMessage; try { receivedMessage = JSON.parse(event.data); } catch (error) { // eslint-disable-next-line no-console console.error(`Received received invalid JSON and cannot process the message. ${error} : ${event.data} : ${JSON.stringify(event.data)}`); return; } if (receivedMessage.message === Messenger.Messages.SET_WINDOW_LOCATION) { this.windowLocation = receivedMessage.data; } else { this.invokeCallback(receivedMessage); this.invokeHandler(receivedMessage); } } isFromTargetOrigin({ origin }) { return origin != null && origin === this.targetOrigin; } invokeCallback(receivedMessage) { const callback = this.callbacks[receivedMessage.message]; if (typeof callback === 'function') { // eslint-disable-next-line callback-return callback(); } } invokeHandler(receivedMessage) { const handler = this.handlers[receivedMessage.message]; if (typeof handler === 'function') { handler(receivedMessage.data); } } set windowLocation(location) { window.location = location; } } Messenger.Messages = Object.freeze({ SET_WINDOW_LOCATION: 'Shopify.API.setWindowLocation' }); class EASDK { constructor({ apiKey, shopOrigin, debug, forceRedirect }, metadata) { checkFrameRedirect(apiKey, shopOrigin, forceRedirect); this.messenger = new Messenger(window.parent, { 'Shopify.API.initialize': data => { if (data && data.User && data.User.current) { this.currentUser = data.User.current; } }, 'Shopify.API.Modal.close': ({ result, data }) => { this.Modal.callCloseCallback(result, data); } }, { name: 'iframe', targetOrigin: shopOrigin, debug }); this.Bar = new Bar(this.messenger); this.Modal = new Modal(this.messenger); this.ResourcePicker = new ResourcePicker(this.messenger, this.Modal); this.messenger.send('Shopify.API.initialize', { apiKey, shopOrigin, metadata, debug, forceRedirect }); } startLoading() { this.messenger.send('Shopify.API.Bar.loading.on'); } stopLoading() { this.messenger.send('Shopify.API.Bar.loading.off'); } showFlashNotice(message, options = {}) { var _options$error = options.error; const error = _options$error === undefined ? false : _options$error; const type = error ? 'Shopify.API.flash.error' : 'Shopify.API.flash.notice'; this.messenger.send(type, { message }); } pushState(location) { this.messenger.send('Shopify.API.pushState', { location }); } redirect(location) { this.messenger.send('Shopify.API.redirect', { location }); } } tslib_1.__decorate([decorators.autobind], EASDK.prototype, "startLoading", null); tslib_1.__decorate([decorators.autobind], EASDK.prototype, "stopLoading", null); tslib_1.__decorate([decorators.autobind], EASDK.prototype, "showFlashNotice", null); tslib_1.__decorate([decorators.autobind], EASDK.prototype, "pushState", null); tslib_1.__decorate([decorators.autobind], EASDK.prototype, "redirect", null); function checkFrameRedirect(apiKey, shopOrigin = 'https://myshopify.com', forceRedirect) { if (window !== window.parent) { return; } let redirectUrl = `${shopOrigin}/admin/apps/`; if (apiKey) { redirectUrl = `${redirectUrl}${apiKey}${window.location.pathname}${window.location.search}`; } if (forceRedirect) { window.location.assign(redirectUrl); } else { // eslint-disable-next-line no-console console.warn(`Embedded app was not loaded in an iframe and redirecting is disabled. Set forceRedirect to true and this page will redirect to: ${redirectUrl}`); } } var name = "@shopify/polaris"; var description = "Shopify’s product component library"; var version = "2.7.0"; var license = "MIT"; var author = "Shopify <dev@shopify.com>"; var homepage = "https://github.com/Shopify/polaris#readme"; var repository = "https://github.com/Shopify/polaris"; var bugs = {"url":"https://github.com/Shopify/polaris/issues"}; var publishConfig = {"access":"public"}; var keywords = ["shopify","polaris","react","components","component library"]; var main = "index.js"; var module$1 = "index.es.js"; var types = "types/index.d.ts"; var scripts = {"lint":"npm-run-all lint:js lint:css","lint:css":"stylelint './**/*.scss' --max-warnings 0","lint:js":"eslint './**/*.{js,jsx,ts,tsx}' --max-warnings 0 --format codeframe","format":"npm-run-all format:js format:css format:prettier","format:css":"yarn run lint:css --fix","format:js":"yarn run lint:js --fix","format:prettier":"prettier '**/*.{json,md,yml}' --write","ts":"tsc --noEmit","test":"jest --config ./config/jest/config.json","test:coverage":"yarn test --coverage --no-cache","test:ci":"yarn test --runInBand --coverage","test:watch":"yarn test --watch","check":"npm-run-all lint ts test","check:ci":"npm-run-all lint ts test:ci","clean":"rimraf build build-esnext esnext styles types docs 'build-intermediate' 'index.*' 'embedded.js' './src/styles/polaris-tokens' './tophat/.cache' './tophat/assets' 'styles.{css,scss}'","optimize":"node ./scripts/optimize.js","prebuild":"npm-run-all clean optimize copy-polaris-tokens","build":"babel-node ./scripts/build.js","prebuild-consumer":"npm-run-all build hide-private-readme","build-consumer":"babel-node ./scripts/build-consumer","postbuild-consumer":"yarn run show-private-readme","build-shrink-ray":"yarn run copy-polaris-tokens && node ./scripts/build-shrink-ray.js","precdn":"yarn run build","cdn:secrets":"ejson decrypt -o secrets.json secrets.ejson","cdn:deploy":"node ./scripts/deploy.js","cdn":"npm-run-all cdn:secrets cdn:deploy","public-release:secrets":"ejson decrypt -o secrets.json secrets.ejson","prepublic-release":"rimraf sandbox && yarn run public-release:secrets","public-release":"babel-node ./scripts/public-repo-deploy.js","copy-polaris-tokens":"rimraf ./src/styles/polaris-tokens && shx cp -r ./node_modules/@shopify/polaris-tokens/dist ./src/styles/polaris-tokens","hide-private-readme":"shx mv ./README.md ./public/README-private.md && shx mv ./public/README.md ./README.md","show-private-readme":"shx mv ./README.md ./public/README.md && shx mv ./public/README-private.md ./README.md ","prepublish":"in-publish && npm-run-all build hide-private-readme || :","postpublish":"in-publish && npm-run-all cdn show-private-readme public-release || :","dev":"yarn run copy-polaris-tokens && webpack-dev-server --config ./playground/webpack.config.js --content-base ./playground/ --hot --inline","dev:host":"yarn run copy-polaris-tokens && webpack-dev-server --config ./playground/webpack.config.js --content-base ./playground/ --hot --inline --host $(ipconfig getifaddr en0)","tophat":"yarn run copy-polaris-tokens && node ./tophat/index.js --watch","test:percy":"node ./tophat/snapshots.js","test:a11y":"node ./scripts/pa11y.js","start":"node ./tophat/index.js","heroku-postbuild":"yarn run copy-polaris-tokens && webpack --config ./tophat/webpack.config.js --output-path ./tophat/assets"}; var stylelint = {"extends":["stylelint-config-shopify/prettier"],"rules":{"selector-class-pattern":"^[a-zA-Z][a-zA-Z0-9-]+$","selector-pseudo-class-no-unknown":[true,{"ignorePseudoClasses":["global"]}]}}; var devDependencies = {"@babel/generator":"^7.0.0-beta.51","@babel/parser":"^7.0.0-beta.51","@babel/standalone":"^7.0.0-beta.51","@percy/puppeteer":"^0.3.2","@shopify/js-uploader":"github:shopify/js-uploader","@shopify/polaris-tokens":"^1.2.0","@shopify/react-serialize":"^1.0.6","@types/enzyme":"^3.1.10","@types/jest":"^21.1.2","@types/lodash":"^4.14.108","@types/lodash-decorators":"^4.0.0","@types/node":"^8.10.17","@types/react-helmet":"^5.0.6","@types/react-hot-loader":"^3.0.6","@types/react-router-dom":"^4.2.7","archiver":"^2.1.0","awesome-typescript-loader":"^3.1.3","aws-sdk":"^2.58.0","babel":"^6.23.0","babel-cli":"^6.26.0","babel-core":"^6.26.3","babel-jest":"^21.2.0","babel-loader":"^7.1.2","babel-plugin-transform-jsx-html":"^1.0.0","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-plugin-transform-react-jsx":"^6.24.1","babel-polyfill":"^6.26.0","babel-preset-env":"^1.7.0","babel-preset-es2015":"^6.24.1","babel-preset-react":"^6.24.1","babel-preset-shopify":"^16.2.0","babel-preset-stage-0":"^6.24.1","babel-register":"^6.26.0","change-case":"^3.0.1","codecov":"^3.0.4","copyfiles":"^1.2.0","crypto":"^1.0.1","css-loader":"^0.28.3","cssnano":"^3.10.0","enzyme":"^3.3.0","enzyme-adapter-react-16":"^1.1.1","eslint":"^4.8.0","eslint-plugin-shopify":"^23.1.0","express":"^4.16.3","file-loader":"^1.1.11","fs-extra":"^4.0.2","generic-names":"^1.0.2","glob":"^7.1.2","gray-matter":"^4.0.1","identity-obj-proxy":"^3.0.0","image-webpack-loader":"^3.3.1","in-publish":"^2.0.0","isomorphic-fetch":"^2.2.1","jest":"^21.2.1","node-sass":"^4.5.3","npm-run-all":"^4.0.2","object-hash":"^1.3.0","pa11y":"^5.0.4","postcss":"^6.0.1","postcss-loader":"^2.0.5","postcss-modules-extract-imports":"^1.1.0","postcss-modules-local-by-default":"^1.2.0","postcss-modules-parser":"^1.1.1","postcss-modules-scope":"^1.1.0","postcss-modules-values":"^1.3.0","postcss-shopify":"^1.0.0","prettier":"^1.14.2","puppeteer":"^1.5.0","react":"^16.4.0","react-dom":"^16.4.0","react-helmet":"^5.2.0","react-router-dom":"^4.3.1","react-test-renderer":"^16.3.1","rimraf":"^2.6.1","rollup":"^0.50.0","rollup-plugin-babel":"^3.0.2","rollup-plugin-commonjs":"^8.0.2","rollup-plugin-json":"^2.1.1","rollup-plugin-node-resolve":"^3.0.0","rollup-pluginutils":"^2.0.1","sass-loader":"^7.0.3","sass-resources-loader":"^1.3.3","semver":"^5.4.1","shelljs":"^0.7.7","shx":"^0.2.2","style-loader":"^0.19.0","stylelint":"^9.2.1","stylelint-config-shopify":"^6.1.0","svgo":"^0.7.2","tslint":"^5.8.0","typescript":"^2.9.1","url-loader":"^1.0.1","webpack":"^3.7.1","webpack-bundle-analyzer":"^2.11.1","webpack-dev-server":"^2.9.3","yargs":"^12.0.1"}; var peerDependencies = {"react":"^16.3.1","react-dom":"^16.3.1"}; var files = ["esnext","styles","types","docs","index.js","index.es.js","styles.css","styles.scss","embedded.js","embedded.d.ts"]; var dependencies = {"@shopify/images":"^1.1.0","@shopify/javascript-utilities":"^2.2.0","@shopify/react-html":"^3.0.3","@shopify/react-utilities":"^2.0.3","@types/prop-types":"^15.5.2","@types/react":"^16.4.7","@types/react-dom":"^16.0.6","@types/react-transition-group":"^2.0.7","babel-runtime":"^6.23.0","core-js":"^2.5.1","hoist-non-react-statics":"^2.5.0","lodash":"^4.17.4","lodash-decorators":"^4.3.5","prop-types":"^15.6.1","react-transition-group":"^2.3.0","tslib":"^1.8.0"}; var packageJSON = { name: name, description: description, version: version, license: license, author: author, homepage: homepage, repository: repository, bugs: bugs, publishConfig: publishConfig, keywords: keywords, main: main, module: module$1, types: types, scripts: scripts, stylelint: stylelint, devDependencies: devDependencies, peerDependencies: peerDependencies, files: files, dependencies: dependencies, "private": false, "jsnext:main": "index.es.js" }; const METADATA = { interface: { name: packageJSON.name, version: packageJSON.version } }; const REPLACE_REGEX = /{([^}]*)}/g; function translate(id, translations, replacements) { const text = get(translations, id); if (!text) { return ''; } if (replacements) { return replace(text, REPLACE_REGEX, match => { const replacement = match.substring(1, match.length - 1); if (!replacements.hasOwnProperty(replacement)) { throw new Error(`No replacement found for key '${replacement}'. The following replacements were passed: ${Object.keys(replacements).map(key => `'${key}'`).join(', ')}`); } return replacements[replacement]; }); } return text; } function withAppProvider() { return function addProvider(WrappedComponent) { // eslint-disable-next-line react/prefer-stateless-function class WithProvider extends React.Component { render() { var _context = this.context; const polaris = _context.polaris, easdk = _context.easdk; const polarisContext = Object.assign({}, polaris, { easdk }); if (!polaris) { throw new Error(`The <AppProvider> component is required as of v2.0 of Polaris React. See https://polaris.shopify.com/components/structure/app-provider for implementation instructions.`); } return React.createElement(WrappedComponent, Object.assign({}, this.props, { polaris: polarisContext })); } } WithProvider.contextTypes = WrappedComponent.contextTypes ? merge(WrappedComponent.contextTypes, polarisAppProviderContextTypes) : polarisAppProviderContextTypes; const FinalComponent = hoistStatics(WithProvider, WrappedComponent); return FinalComponent; }; } function withSticky() { return function addStickyManager(WrappedComponent) { class WithStickyManager extends React.Component { constructor(props, context) { super(props); this.stickyManager = new StickyManager(); const polaris = context.polaris, easdk = context.easdk; this.polarisContext = Object.assign({}, polaris, { stickyManager: this.stickyManager, easdk }); } getChildContext() { const _a = this.polarisContext, easdk = _a.easdk, rest = tslib_1.__rest(_a, ["easdk"]); return { polaris: rest, easdk }; } render() { return React.createElement(WrappedComponent, Object.assign({}, this.props, { polaris: this.polarisContext })); } } WithStickyManager.childContextTypes = polarisAppProviderContextTypes; WithStickyManager.contextTypes = WrappedComponent.contextTypes ? merge(WrappedComponent.contextTypes, polarisAppProviderContextTypes) : polarisAppProviderContextTypes; const FinalComponent = hoistStatics(WithStickyManager, WrappedComponent); return FinalComponent; }; } function createPolarisContext({ i18n, linkComponent, apiKey, shopOrigin, forceRedirect, debug, stickyManager } = {}) { const intl = new Intl(i18n); const link = new Link(linkComponent); const easdk = apiKey && shopOrigin ? new EASDK({ apiKey, shopOrigin, forceRedirect, debug }, METADATA) : undefined; return { polaris: { intl, link, stickyManager: stickyManager || new StickyManager() }, easdk }; } class AppProvider$1 extends React.Component { constructor(props) { super(props); this.stickyManager = new StickyManager(); this.polarisContext = createPolarisContext(Object.assign({}, props, { stickyManager: this.stickyManager })); } componentDidMount() { if (document != null) { this.stickyManager.setContainer(document); } } componentWillReceiveProps({ i18n, linkComponent, apiKey, shopOrigin, forceRedirect, debug }) { if (i18n !== this.props.i18n || linkComponent !== this.props.linkComponent || apiKey !== this.props.apiKey || shopOrigin !== this.props.shopOrigin || forceRedirect !== this.props.forceRedirect || debug !== this.props.debug) { const stickyManager = this.stickyManager; this.polarisContext = createPolarisContext({ i18n, linkComponent, apiKey, shopOrigin, forceRedirect, debug, stickyManager }); } } getChildContext() { return this.polarisContext; } render() { return React.Children.only(this.props.children); } } AppProvider$1.childContextTypes = polarisAppProviderContextTypes; function Image$1(_a) { var sourceSet = _a.sourceSet, source = _a.sourc