. Automatically generate child `id` and label `for` attributes.\n // 3. > 1 children - render wrapping
. `labelFor` required, along with `id` on child.\n var childArray = _react2.default.Children.toArray(children);\n var id = void 0;\n var labelId = otherProps.id || (0, _createId2.default)();\n delete otherProps.id;\n\n if (childArray.length === 1) {\n // Use the existing id prop, or generate one.\n id = childArray[0].props.id || (0, _createId2.default)();\n var ariaLabelledby = childArray[0].props['aria-labelledby'] || (label ? labelId : null);\n childArray[0] = _react2.default.cloneElement(childArray[0], {\n id: id,\n labelId: labelId,\n 'aria-labelledby': ariaLabelledby\n });\n }\n\n if (id && !labelFor) {\n labelFor = id;\n }\n\n if (!labelFor) {\n console.warn('Missing labelFor attribute on ' + componentName + ' with label \"' + label + '\"');\n }\n\n var fieldLabelClassName = (0, _classnames2.default)(labelClassName, childArray.length === 0 ? className : null);\n\n var fieldLabel = label ? _react2.default.createElement(\n 'label',\n _extends({\n className: fieldLabelClassName,\n id: labelId,\n htmlFor: labelFor\n }, (0, _filterDOMProps2.default)(otherProps)),\n label,\n icon && ' ',\n icon && icon\n ) : _react2.default.createElement('div', _extends({\n className: fieldLabelClassName\n }, (0, _filterDOMProps2.default)(otherProps)));\n\n if (childArray.length > 0) {\n if (wrapperClassName) {\n childArray = _react2.default.createElement(\n 'div',\n { className: wrapperClassName },\n childArray\n );\n }\n\n return _react2.default.createElement(\n 'div',\n { className: className },\n fieldLabel,\n childArray\n );\n }\n\n return fieldLabel;\n}","'use strict';\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = undefined;\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _class;\n\nvar _autobindDecorator = require('autobind-decorator');\n\nvar _autobindDecorator2 = _interopRequireDefault(_autobindDecorator);\n\nvar _events = require('../../utils/events');\n\nvar _classnames = require('classnames');\n\nvar _classnames2 = _interopRequireDefault(_classnames);\n\nvar _createId = require('../../utils/createId');\n\nvar _createId2 = _interopRequireDefault(_createId);\n\nvar _Menu = require('../../Menu');\n\nvar _Overlay = require('../../OverlayTrigger/js/Overlay');\n\nvar _Overlay2 = _interopRequireDefault(_Overlay);\n\nvar _propTypes = require('prop-types');\n\nvar _propTypes2 = _interopRequireDefault(_propTypes);\n\nvar _react = require('react');\n\nvar _react2 = _interopRequireDefault(_react);\n\nvar _reactDom = require('react-dom');\n\nvar _reactDom2 = _interopRequireDefault(_reactDom);\n\nvar _scrollToDOMNode = require('../../utils/scrollToDOMNode');\n\nvar _scrollToDOMNode2 = _interopRequireDefault(_scrollToDOMNode);\n\nrequire('../style/index.css');\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nfunction _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }\n\nfunction _asyncToGenerator(fn) { return function () { var gen = fn.apply(this, arguments); return new Promise(function (resolve, reject) { function step(key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { return Promise.resolve(value).then(function (value) { step(\"next\", value); }, function (err) { step(\"throw\", err); }); } } return step(\"next\"); }); }; }\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\nvar getLabel = function getLabel(o) {\n return typeof o === 'string' ? o : o.label;\n};\n\nvar LISTBOX = '-listbox';\nvar OPTION = '-option-';\n\nvar Autocomplete = (0, _autobindDecorator2.default)(_class = function (_React$Component) {\n _inherits(Autocomplete, _React$Component);\n\n function Autocomplete(props) {\n _classCallCheck(this, Autocomplete);\n\n var _this = _possibleConstructorReturn(this, (Autocomplete.__proto__ || Object.getPrototypeOf(Autocomplete)).call(this, props));\n\n _this.state = {\n value: '',\n showDropdown: false,\n results: [],\n selectedIndex: -1,\n isFocused: false\n };\n\n _this.autocompleteId = (0, _createId2.default)();\n return _this;\n }\n\n _createClass(Autocomplete, [{\n key: 'componentWillMount',\n value: function componentWillMount() {\n this.componentWillReceiveProps(this.props);\n }\n }, {\n key: 'componentWillReceiveProps',\n value: function componentWillReceiveProps(props) {\n if (props.value != null && props.value !== this.state.value) {\n this.setValue(props.value);\n }\n }\n }, {\n key: 'componentDidMount',\n value: function componentDidMount() {\n this.updateSize();\n }\n }, {\n key: 'componentDidUpdate',\n value: function componentDidUpdate() {\n this.updateSize();\n }\n }, {\n key: 'updateSize',\n value: function updateSize() {\n if (this.wrapper) {\n var width = this.wrapper.offsetWidth;\n if (width !== this.state.width) {\n this.setState({ width: width });\n }\n }\n }\n }, {\n key: 'onChange',\n value: function onChange(value) {\n var onChange = this.props.onChange;\n\n if (onChange) {\n onChange(value);\n }\n\n if (this.props.value == null) {\n this.setValue(value);\n }\n }\n }, {\n key: 'setValue',\n value: function setValue(value) {\n this.setState({\n value: value,\n showDropdown: this.state.isFocused,\n selectedIndex: this.props.allowCreate && this.state.selectedIndex === -1 ? -1 : 0\n });\n\n this.getCompletions(value);\n }\n }, {\n key: 'getCompletions',\n value: function () {\n var _ref = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(value) {\n var _this2 = this;\n\n var results, getCompletions;\n return regeneratorRuntime.wrap(function _callee$(_context) {\n while (1) {\n switch (_context.prev = _context.next) {\n case 0:\n this.optionIdPrefix = this.optionIdPrefix || this.autocompleteId + LISTBOX;\n this._value = value;\n\n results = [];\n getCompletions = this.props.getCompletions;\n\n if (!getCompletions) {\n _context.next = 8;\n break;\n }\n\n _context.next = 7;\n return getCompletions(value);\n\n case 7:\n results = _context.sent;\n\n case 8:\n if (!(this._value === value)) {\n _context.next = 11;\n break;\n }\n\n this.setState({ results: results }, function () {\n var list = _reactDom2.default.findDOMNode(_this2.getListRef());\n if (list) {\n list.scrollTop = 0;\n }\n });\n\n return _context.abrupt('return', results);\n\n case 11:\n return _context.abrupt('return', this.state.results);\n\n case 12:\n case 'end':\n return _context.stop();\n }\n }\n }, _callee, this);\n }));\n\n function getCompletions(_x) {\n return _ref.apply(this, arguments);\n }\n\n return getCompletions;\n }()\n }, {\n key: 'onSelect',\n value: function onSelect(value, event) {\n this.onChange(typeof value === 'string' ? value : value.label);\n this.hideMenu();\n\n if (this.props.onSelect) {\n this.props.onSelect(value, event);\n }\n }\n }, {\n key: 'onFocus',\n value: function onFocus() {\n this.setState({ isFocused: true });\n }\n }, {\n key: 'onBlur',\n value: function onBlur(event) {\n if (this.wrapper && this.wrapper.contains(event.relatedTarget)) {\n // If the element receiving focus is a child of the Autocomplete,\n // for example the toggle button on a ComboBox,\n // do nothing in order prevent hideMenu from executing twice.\n return;\n }\n this.hideMenu();\n this.setState({ isFocused: false });\n }\n }, {\n key: 'onEscape',\n value: function onEscape(event) {\n event.preventDefault();\n this.hideMenu();\n }\n }, {\n key: 'onSelectFocused',\n value: function onSelectFocused(event) {\n // Autocomplete should accept space key as text entry\n if (event.key === ' ') {\n return;\n }\n var _state = this.state,\n _state$results = _state.results,\n results = _state$results === undefined ? [] : _state$results,\n selectedIndex = _state.selectedIndex;\n\n var value = results[selectedIndex];\n if (value) {\n event.preventDefault();\n this.onSelect(value, event);\n } else if (this.props.allowCreate) {\n if (event.key !== 'Tab') {\n event.preventDefault();\n }\n this.onSelect(this.state.value, event);\n }\n }\n }, {\n key: 'onFocusFirst',\n value: function onFocusFirst(event) {\n event.preventDefault();\n this.selectIndex(0);\n }\n }, {\n key: 'onFocusLast',\n value: function onFocusLast(event) {\n event.preventDefault();\n this.selectIndex(this.state.results.length - 1);\n }\n }, {\n key: 'onFocusPrevious',\n value: function onFocusPrevious(event) {\n event.preventDefault();\n var _state2 = this.state,\n _state2$results = _state2.results,\n results = _state2$results === undefined ? [] : _state2$results,\n selectedIndex = _state2.selectedIndex;\n\n var index = selectedIndex - 1;\n if (index < 0) {\n index = results.length - 1;\n }\n\n this.selectIndex(index);\n }\n }, {\n key: 'onFocusNext',\n value: function onFocusNext(event) {\n event.preventDefault();\n // make sure menu is shown\n if (!this.state.showDropdown) {\n this.showMenu();\n }\n var _state3 = this.state,\n _state3$results = _state3.results,\n results = _state3$results === undefined ? [] : _state3$results,\n selectedIndex = _state3.selectedIndex;\n\n var index = results.length ? (selectedIndex + 1) % results.length : 0;\n this.selectIndex(index);\n }\n }, {\n key: 'onPageDown',\n value: function onPageDown(event) {\n event.preventDefault();\n var _state4 = this.state,\n _state4$results = _state4.results,\n results = _state4$results === undefined ? [] : _state4$results,\n selectedIndex = _state4.selectedIndex,\n showDropdown = _state4.showDropdown;\n\n var len = results.length;\n if (!showDropdown || !len) {\n return;\n }\n\n var listNode = _reactDom2.default.findDOMNode(this.getListRef());\n var items = [].concat(_toConsumableArray(listNode.children));\n var targetItem = items[selectedIndex === -1 ? 0 : selectedIndex];\n var nextPage = Math.min(targetItem.offsetTop + listNode.clientHeight, listNode.scrollHeight + listNode.clientHeight);\n var index = items.indexOf(targetItem) + 1;\n var item = items.slice(index).find(function (item) {\n return item.offsetTop + item.offsetHeight > nextPage;\n });\n\n if (item) {\n this.selectIndex(items.indexOf(item), true);\n } else {\n this.onFocusLast(event);\n }\n }\n }, {\n key: 'onPageUp',\n value: function onPageUp(event) {\n event.preventDefault();\n var _state5 = this.state,\n _state5$results = _state5.results,\n results = _state5$results === undefined ? [] : _state5$results,\n selectedIndex = _state5.selectedIndex,\n showDropdown = _state5.showDropdown;\n\n var len = results.length;\n if (!showDropdown || !len) {\n return;\n }\n\n var listNode = _reactDom2.default.findDOMNode(this.getListRef());\n var items = [].concat(_toConsumableArray(listNode.children));\n var targetItem = items[selectedIndex === -1 ? 0 : selectedIndex];\n var nextPage = Math.max(targetItem.offsetTop + targetItem.offsetHeight - listNode.clientHeight, 0);\n var index = items.indexOf(targetItem);\n var item = items.slice(0, index).reverse().find(function (item) {\n return item.offsetTop < nextPage;\n });\n\n if (item) {\n this.selectIndex(items.indexOf(item));\n } else {\n this.onFocusFirst(event);\n }\n }\n }, {\n key: 'onMouseEnter',\n value: function onMouseEnter(index) {\n this.selectIndex(index);\n }\n }, {\n key: 'onAltArrowDown',\n value: function onAltArrowDown(event) {\n event.preventDefault();\n if (!this.state.showDropdown) {\n this.showMenu();\n }\n }\n }, {\n key: 'onAltArrowUp',\n value: function onAltArrowUp(event) {\n event.preventDefault();\n if (this.state.showDropdown) {\n this.hideMenu();\n }\n }\n }, {\n key: 'onTab',\n value: function onTab(event) {\n this.onSelectFocused(event);\n }\n }, {\n key: 'selectIndex',\n value: function selectIndex(selectedIndex, alignToStart) {\n var _this3 = this;\n\n this.setState({ selectedIndex: selectedIndex }, function () {\n if (_this3.menu && !isNaN(selectedIndex) && selectedIndex !== -1) {\n // make sure that the selected item scrolls into view\n var list = _reactDom2.default.findDOMNode(_this3.getListRef());\n if (list) {\n var node = list.children[selectedIndex];\n if (node) {\n (0, _scrollToDOMNode2.default)(node, list, alignToStart);\n }\n }\n }\n });\n }\n }, {\n key: 'toggleMenu',\n value: function toggleMenu() {\n if (this.state.showDropdown) {\n this.hideMenu();\n } else {\n this.showMenu();\n }\n }\n }, {\n key: 'showMenu',\n value: function () {\n var _ref2 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {\n var _this4 = this;\n\n var results, selectedIndex;\n return regeneratorRuntime.wrap(function _callee2$(_context2) {\n while (1) {\n switch (_context2.prev = _context2.next) {\n case 0:\n this.setState({ showDropdown: true, selectedIndex: -1 });\n _context2.next = 3;\n return this.getCompletions(this.state.value);\n\n case 3:\n _context2.t0 = _context2.sent;\n\n if (_context2.t0) {\n _context2.next = 6;\n break;\n }\n\n _context2.t0 = [];\n\n case 6:\n results = _context2.t0;\n\n\n // Reset the selected index based on the value\n selectedIndex = results.findIndex(function (result) {\n return getLabel(result) === _this4.state.value;\n });\n\n if (selectedIndex !== -1) {\n this.setState({ selectedIndex: selectedIndex });\n }\n\n if (this.props.onMenuShow) {\n this.props.onMenuShow();\n }\n\n case 10:\n case 'end':\n return _context2.stop();\n }\n }\n }, _callee2, this);\n }));\n\n function showMenu() {\n return _ref2.apply(this, arguments);\n }\n\n return showMenu;\n }()\n }, {\n key: 'hideMenu',\n value: function hideMenu() {\n this.setState({ showDropdown: false, selectedIndex: -1 });\n if (this.props.onMenuHide) {\n this.props.onMenuHide();\n }\n }\n }, {\n key: 'getActiveDescendantId',\n value: function getActiveDescendantId() {\n var _state6 = this.state,\n selectedIndex = _state6.selectedIndex,\n showDropdown = _state6.showDropdown,\n _state6$results = _state6.results,\n results = _state6$results === undefined ? [] : _state6$results;\n\n return showDropdown && results.length > 0 && selectedIndex !== -1 ? this.optionIdPrefix + OPTION + selectedIndex : undefined;\n }\n }, {\n key: 'getListboxId',\n value: function getListboxId() {\n var _state7 = this.state,\n showDropdown = _state7.showDropdown,\n _state7$results = _state7.results,\n results = _state7$results === undefined ? [] : _state7$results;\n\n return showDropdown && results.length > 0 ? this.autocompleteId + LISTBOX : undefined;\n }\n }, {\n key: 'getListRef',\n value: function getListRef() {\n return this.menu && this.menu.getListRef();\n }\n }, {\n key: 'render',\n value: function render() {\n var _this5 = this;\n\n var _props = this.props,\n id = _props.id,\n className = _props.className;\n var _state8 = this.state,\n isFocused = _state8.isFocused,\n _state8$results = _state8.results,\n results = _state8$results === undefined ? [] : _state8$results,\n selectedIndex = _state8.selectedIndex,\n showDropdown = _state8.showDropdown,\n value = _state8.value;\n\n var children = _react2.default.Children.toArray(this.props.children);\n var trigger = children.find(function (c) {\n return c.props.autocompleteInput;\n }) || children[0];\n var menuShown = showDropdown && results.length > 0;\n var inputId = id || trigger.props.id || this.autocompleteId;\n\n return _react2.default.createElement(\n 'div',\n {\n className: (0, _classnames2.default)('react-spectrum-Autocomplete', { 'is-focused': isFocused }, className),\n ref: function ref(w) {\n return _this5.wrapper = w;\n },\n role: 'combobox',\n 'aria-controls': this.getListboxId(),\n 'aria-expanded': menuShown,\n 'aria-haspopup': 'true',\n 'aria-owns': this.getListboxId() },\n children.map(function (child) {\n if (child === trigger) {\n return _react2.default.cloneElement(child, {\n value: value,\n onChange: (0, _events.chain)(child.props.onChange, _this5.onChange),\n onKeyDown: (0, _events.chain)(child.props.onKeyDown, _events.interpretKeyboardEvent.bind(_this5)),\n onFocus: (0, _events.chain)(child.props.onFocus, _this5.onFocus),\n onBlur: (0, _events.chain)(child.props.onBlur, _this5.onBlur),\n id: inputId,\n autoComplete: 'off',\n role: 'textbox',\n 'aria-activedescendant': _this5.getActiveDescendantId(),\n 'aria-autocomplete': 'list',\n 'aria-controls': _this5.getListboxId()\n });\n }\n\n return child;\n }),\n _react2.default.createElement(\n _Overlay2.default,\n { target: this.wrapper, show: menuShown, placement: 'bottom left', role: 'presentation' },\n _react2.default.createElement(\n _Menu.Menu,\n {\n onSelect: this.onSelect,\n onMouseDown: function onMouseDown(e) {\n return e.preventDefault();\n },\n style: { width: this.state.width + 'px' },\n role: 'listbox',\n ref: function ref(m) {\n return _this5.menu = m;\n },\n id: this.getListboxId() },\n results.map(function (result, i) {\n var label = getLabel(result);\n return _react2.default.createElement(\n _Menu.MenuItem,\n {\n role: 'option',\n id: _this5.optionIdPrefix + OPTION + i,\n tabIndex: selectedIndex === i ? 0 : -1,\n key: 'item-' + i,\n value: result,\n icon: result.icon,\n focused: selectedIndex === i,\n selected: label === value,\n onMouseEnter: _this5.onMouseEnter.bind(_this5, i),\n onMouseDown: function onMouseDown(e) {\n return e.preventDefault();\n } },\n label\n );\n })\n )\n )\n );\n }\n }]);\n\n return Autocomplete;\n}(_react2.default.Component)) || _class;\n\nAutocomplete.propTypes = {\n /**\n * Allows input that isn't part of the list of options\n */\n allowCreate: _propTypes2.default.bool,\n\n /**\n * Value of the input\n */\n value: _propTypes2.default.string,\n\n /**\n * Callback for when value changes due to selection\n */\n onSelect: _propTypes2.default.func,\n\n /**\n * String for extra class names to add to the top level div\n */\n className: _propTypes2.default.string,\n\n /**\n * String that will override the default id generated by the instance\n */\n id: _propTypes2.default.string,\n\n /**\n * Callback for when the menu opens\n */\n onMenuShow: _propTypes2.default.func,\n\n /**\n * Callback for when the menu closes\n */\n onMenuHide: _propTypes2.default.func\n};\nAutocomplete.defaultProps = {\n allowCreate: false\n};\nexports.default = Autocomplete;","'use strict';\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = undefined;\n\nvar _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _classnames = require('classnames');\n\nvar _classnames2 = _interopRequireDefault(_classnames);\n\nvar _filterDOMProps = require('../../utils/filterDOMProps');\n\nvar _filterDOMProps2 = _interopRequireDefault(_filterDOMProps);\n\nvar _FocusManager = require('../../utils/FocusManager');\n\nvar _FocusManager2 = _interopRequireDefault(_FocusManager);\n\nvar _propTypes = require('prop-types');\n\nvar _propTypes2 = _interopRequireDefault(_propTypes);\n\nvar _react = require('react');\n\nvar _react2 = _interopRequireDefault(_react);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nfunction _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }\n\nfunction _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\nif (process.env.SCALE_MEDIUM && process.env.SCALE_LARGE) {\n require('../../spectrum-css/buttongroup/index.css');\n\n require('../../spectrum-css/buttongroup/index-diff.css');\n} else if (process.env.SCALE_LARGE) {\n require('../../spectrum-css/buttongroup/index-lg.css');\n} else {\n require('../../spectrum-css/buttongroup/index.css');\n}\n\nvar BUTTONGROUP_ITEM_SELECTOR = '.spectrum-ButtonGroup-item:not([disabled]):not([aria-disabled])';\nvar BUTTONGROUP_SELECTED_ITEM_SELECTOR = BUTTONGROUP_ITEM_SELECTOR + '[aria-checked=true].is-selected';\nvar ALLOWED_BUTTON_VARIANTS = {\n tool: true,\n action: true\n};\n\nvar ButtonGroup = function (_Component) {\n _inherits(ButtonGroup, _Component);\n\n function ButtonGroup(props) {\n _classCallCheck(this, ButtonGroup);\n\n var _this = _possibleConstructorReturn(this, (ButtonGroup.__proto__ || Object.getPrototypeOf(ButtonGroup)).call(this, props));\n\n _this.state = {\n value: props.value\n };\n return _this;\n }\n\n _createClass(ButtonGroup, [{\n key: 'componentWillReceiveProps',\n value: function componentWillReceiveProps(props) {\n if (props.value && props.value !== this.state.value) {\n this.setState({\n value: props.value\n });\n }\n }\n }, {\n key: 'addSelection',\n value: function addSelection(button) {\n return [].concat(_toConsumableArray(this.state.value || []), [button.value]);\n }\n }, {\n key: 'removeSelection',\n value: function removeSelection(button) {\n var value = this.state.value || [];\n var index = value.indexOf(button.value);\n return [].concat(_toConsumableArray(value.slice(0, index)), _toConsumableArray(value.slice(index + 1, value.length)));\n }\n }, {\n key: 'handleSelect',\n value: function handleSelect(button, e) {\n if (!this.props.readOnly && !button.readOnly) {\n var nextButtons = void 0;\n if (this.props.multiple) {\n if (this.isSelected(button)) {\n nextButtons = this.removeSelection(button);\n } else {\n nextButtons = this.addSelection(button);\n }\n } else {\n nextButtons = button.value;\n }\n\n // Set state if in uncontrolled mode\n if (!('value' in this.props)) {\n this.setState({ value: nextButtons });\n }\n\n if (this.props.onChange) {\n this.props.onChange(nextButtons, e);\n }\n }\n\n if (this.props.onClick) {\n this.props.onClick(button.value, e);\n }\n }\n\n /**\n * @private\n * Evaluates whether button element is selected.\n * @param {Object} button Button properties object\n * @returns {Boolean} true if button is selected\n */\n\n }, {\n key: 'isSelected',\n value: function isSelected(button) {\n if (this.props.readOnly) {\n return null;\n }\n return this.props.multiple ? this.state.value && this.state.value.indexOf(button.value) >= 0 : this.state.value === button.value;\n }\n\n /**\n * @private\n * The role to be used by buttons within the group. If the button group is readOnly,\n * button should retain their implicit role of button. With multiple selection, buttons\n * should have role of checkbox, and with single selection buttons should have role of radio.\n * @returns {String} role of buttons within group, either null, radio or checkbox.\n */\n\n }, {\n key: 'getChildRole',\n value: function getChildRole() {\n if (this.props.readOnly) {\n return null;\n }\n return this.props.multiple ? 'checkbox' : 'radio';\n }\n }, {\n key: 'getChildProps',\n value: function getChildProps(button, index) {\n var invalid = this.props.invalid || button.props.invalid;\n var required = this.props.required || button.props.required;\n var disabled = this.props.disabled || button.props.disabled;\n var selected = this.isSelected(button.props);\n var role = this.getChildRole();\n var onClick = !disabled ? this.handleSelect.bind(this, button.props) : null;\n var allowedVariant = ALLOWED_BUTTON_VARIANTS[button.props.variant];\n return {\n className: (0, _classnames2.default)('spectrum-ButtonGroup-item'),\n selected: selected,\n disabled: disabled,\n variant: allowedVariant ? button.props.variant : 'action',\n quiet: allowedVariant ? button.props.quiet : true,\n onClick: onClick,\n onKeyDown: button.props.onKeyDown,\n role: role,\n 'aria-checked': selected,\n 'aria-invalid': invalid,\n 'aria-required': required\n };\n }\n }, {\n key: 'renderButtons',\n value: function renderButtons() {\n var _this2 = this;\n\n var children = this.props.children;\n\n return _react2.default.Children.map(children, function (child, index) {\n return child ? _react2.default.cloneElement(child, _this2.getChildProps(child, index)) : null;\n });\n }\n }, {\n key: 'render',\n value: function render() {\n var _props = this.props,\n _props$children = _props.children,\n children = _props$children === undefined ? [] : _props$children,\n className = _props.className,\n multiple = _props.multiple,\n disabled = _props.disabled,\n readOnly = _props.readOnly,\n invalid = _props.invalid,\n required = _props.required,\n orientation = _props.orientation,\n otherProps = _objectWithoutProperties(_props, ['children', 'className', 'multiple', 'disabled', 'readOnly', 'invalid', 'required', 'orientation']);\n\n delete otherProps.onChange;\n delete otherProps.onClick;\n\n if (!readOnly && !multiple) {\n\n // With single-selection, the wrapper element should have role=radiogroup.\n otherProps.role = 'radiogroup';\n } else if (readOnly || children.length > 2) {\n\n // With readOnly and more than one button, the wrapper element should have role=toolbar, otherwise with less than two items or multi-selection, use role=group.\n otherProps.role = readOnly && children.length > 2 ? 'toolbar' : 'group';\n }\n\n return _react2.default.createElement(\n _FocusManager2.default,\n { itemSelector: BUTTONGROUP_ITEM_SELECTOR, selectedItemSelector: BUTTONGROUP_SELECTED_ITEM_SELECTOR, orientation: otherProps.role === 'toolbar' ? orientation : 'both' },\n _react2.default.createElement(\n 'div',\n _extends({\n 'aria-invalid': invalid || null,\n 'aria-required': required || null,\n 'aria-disabled': disabled || null,\n 'aria-orientation': orientation !== 'both' && otherProps.role === 'toolbar' ? orientation : null\n }, (0, _filterDOMProps2.default)(otherProps), {\n className: (0, _classnames2.default)('spectrum-ButtonGroup', {\n 'spectrum-ButtonGroup--vertical': orientation === 'vertical'\n }, className) }),\n this.renderButtons(children)\n )\n );\n }\n }]);\n\n return ButtonGroup;\n}(_react.Component);\n\nButtonGroup.propTypes = {\n /**\n * All buttons in ButtonGroup are disabled, greyed out and cannot be interacted with.\n */\n disabled: _propTypes2.default.bool,\n\n /**\n * Will override all child buttons invalid\n */\n invalid: _propTypes2.default.bool,\n\n /**\n * Allows multi select\n */\n multiple: _propTypes2.default.bool,\n\n /**\n * Won't allow a permanent selection\n */\n readOnly: _propTypes2.default.bool,\n\n /**\n * Will override all child buttons required\n */\n required: _propTypes2.default.bool,\n\n /**\n * Called whenever a button is selected (non-readonly mode)\n */\n onChange: _propTypes2.default.func,\n\n /**\n * Called whenever a button is clicked (readonly mode)\n */\n onClick: _propTypes2.default.func,\n\n /**\n * Renders the button group as a row or a column\n */\n orientation: _propTypes2.default.oneOf(['horizontal', 'vertical', 'both'])\n};\nButtonGroup.defaultProps = {\n disabled: false,\n invalid: false,\n multiple: false,\n readOnly: false,\n required: false,\n orientation: 'both'\n};\nexports.default = ButtonGroup;","\"use strict\";\n\nvar React = require(\"react\");\nmodule.exports = React.createElement(\n \"svg\",\n { viewBox: \"0 0 36 36\" },\n React.createElement(\"path\", { d: \"M16 2a16 16 0 1 0 16 16A16 16 0 0 0 16 2zm10.666 9.08L14.018 27.341a1.208 1.208 0 0 1-.875.461h-.072a1.2 1.2 0 0 1-.85-.352l-7.785-7.793a1.2 1.2 0 0 1 0-1.7l1.326-1.325a1.2 1.2 0 0 1 1.7 0l5.338 5.349L23.315 8.473A1.2 1.2 0 0 1 25 8.263L26.455 9.4a1.2 1.2 0 0 1 .211 1.68z\" })\n);\n\n","\"use strict\";\n\nvar React = require(\"react\");\nmodule.exports = React.createElement(\n \"svg\",\n { viewBox: \"0 0 48 48\" },\n React.createElement(\"path\", { d: \"M24 4.1A19.9 19.9 0 1 0 43.9 24 19.9 19.9 0 0 0 24 4.1zm12.563 12.587L22.018 35.341a1.208 1.208 0 0 1-.875.461h-.072a1.2 1.2 0 0 1-.85-.352l-7.785-7.795a1.2 1.2 0 0 1 0-1.7l1.326-1.325a1.2 1.2 0 0 1 1.7 0l5.338 5.351 12.408-15.9a1.2 1.2 0 0 1 1.686-.21L36.352 15a1.2 1.2 0 0 1 .211 1.687z\" })\n);\n\n","\"use strict\";\n\nvar React = require(\"react\");\nmodule.exports = React.createElement(\n \"svg\",\n { viewBox: \"0 0 36 36\" },\n React.createElement(\"path\", { d: \"M16 2a16 16 0 1 0 16 16A16 16 0 0 0 16 2zm10 17a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1h18a1 1 0 0 1 1 1z\" })\n);\n\n","\"use strict\";\n\nvar React = require(\"react\");\nmodule.exports = React.createElement(\n \"svg\",\n { viewBox: \"0 0 48 48\" },\n React.createElement(\"path\", { d: \"M24 4.1A19.9 19.9 0 1 0 43.9 24 19.9 19.9 0 0 0 24 4.1zM36 25a1 1 0 0 1-1 1H13a1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1h22a1 1 0 0 1 1 1z\" })\n);\n\n","\"use strict\";\n\nvar React = require(\"react\");\nmodule.exports = React.createElement(\n \"svg\",\n { viewBox: \"0 0 36 36\" },\n React.createElement(\"path\", { d: \"M29 16h-9V7a1 1 0 0 0-1-1h-2a1 1 0 0 0-1 1v9H7a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h9v9a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-9h9a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1z\" })\n);\n\n","\"use strict\";\n\nvar React = require(\"react\");\nmodule.exports = React.createElement(\n \"svg\",\n { viewBox: \"0 0 48 48\" },\n React.createElement(\"path\", { d: \"M37 20H26V9a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v11H9a1 1 0 0 0-1 1v4a1 1 0 0 0 1 1h11v11a1 1 0 0 0 1 1h4a1 1 0 0 0 1-1V26h11a1 1 0 0 0 1-1v-4a1 1 0 0 0-1-1z\" })\n);\n\n","\"use strict\";\n\nvar React = require(\"react\");\nmodule.exports = React.createElement(\n \"svg\",\n { viewBox: \"0 0 36 36\" },\n React.createElement(\"path\", { d: \"M18 2a16 16 0 1 0 16 16A16 16 0 0 0 18 2zm-.3 4.3a2.718 2.718 0 0 1 2.864 2.824 2.665 2.665 0 0 1-2.864 2.863 2.706 2.706 0 0 1-2.864-2.864A2.717 2.717 0 0 1 17.7 6.3zM22 27a1 1 0 0 1-1 1h-6a1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1h1v-6h-1a1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v9h1a1 1 0 0 1 1 1z\" })\n);\n\n","\"use strict\";\n\nvar React = require(\"react\");\nmodule.exports = React.createElement(\n \"svg\",\n { viewBox: \"0 0 48 48\" },\n React.createElement(\"path\", { d: \"M24 4.1A19.9 19.9 0 1 0 43.9 24 19.9 19.9 0 0 0 24 4.1zm-.3 6.2a2.718 2.718 0 0 1 2.864 2.824 2.665 2.665 0 0 1-2.864 2.863 2.706 2.706 0 0 1-2.864-2.864A2.717 2.717 0 0 1 23.7 10.3zM28 35a1 1 0 0 1-1 1h-6a1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1h1v-8h-1a1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v11h1a1 1 0 0 1 1 1z\" })\n);\n\n","'use strict';\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = undefined;\n\nvar _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _class;\n\nvar _classnames = require('classnames');\n\nvar _classnames2 = _interopRequireDefault(_classnames);\n\nvar _filterDOMProps = require('../../utils/filterDOMProps');\n\nvar _filterDOMProps2 = _interopRequireDefault(_filterDOMProps);\n\nvar _FocusManager = require('../../utils/FocusManager');\n\nvar _FocusManager2 = _interopRequireDefault(_FocusManager);\n\nvar _focusRing = require('../../utils/focusRing');\n\nvar _focusRing2 = _interopRequireDefault(_focusRing);\n\nvar _propTypes = require('prop-types');\n\nvar _propTypes2 = _interopRequireDefault(_propTypes);\n\nvar _react = require('react');\n\nvar _react2 = _interopRequireDefault(_react);\n\nvar _Tag = require('./Tag');\n\nvar _Tag2 = _interopRequireDefault(_Tag);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nfunction _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\nif (process.env.SCALE_MEDIUM && process.env.SCALE_LARGE) {\n require('../../spectrum-css/tags/index.css');\n\n require('../../spectrum-css/tags/index-diff.css');\n} else if (process.env.SCALE_LARGE) {\n require('../../spectrum-css/tags/index-lg.css');\n} else {\n require('../../spectrum-css/tags/index.css');\n}\n\nif (!process.env.THEME_LIGHT && !process.env.THEME_DARK && !process.env.THEME_LIGHTEST && !process.env.THEME_DARKEST || process.env.THEME_LIGHT) require('../../spectrum-css/tags/multiStops/light.css');\nif (!process.env.THEME_LIGHT && !process.env.THEME_DARK && !process.env.THEME_LIGHTEST && !process.env.THEME_DARKEST || process.env.THEME_DARK) require('../../spectrum-css/tags/multiStops/dark.css');\nif (!process.env.THEME_LIGHT && !process.env.THEME_DARK && !process.env.THEME_LIGHTEST && !process.env.THEME_DARKEST || process.env.THEME_LIGHTEST) require('../../spectrum-css/tags/multiStops/lightest.css');\nif (!process.env.THEME_LIGHT && !process.env.THEME_DARK && !process.env.THEME_LIGHTEST && !process.env.THEME_DARKEST || process.env.THEME_DARKEST) require('../../spectrum-css/tags/multiStops/darkest.css');\n\n\n/**\n * A TagList displays a list of Tags\n */\nvar TAGLIST_SELECTOR = '[role=row]:not([aria-disabled])';\nvar TAGLIST_SELECTED_SELECTOR = TAGLIST_SELECTOR + '[aria-selected=true]';\n\nvar TagList = (0, _focusRing2.default)(_class = function (_React$Component) {\n _inherits(TagList, _React$Component);\n\n function TagList() {\n var _ref;\n\n var _temp, _this, _ret;\n\n _classCallCheck(this, TagList);\n\n for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {\n args[_key] = arguments[_key];\n }\n\n return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = TagList.__proto__ || Object.getPrototypeOf(TagList)).call.apply(_ref, [this].concat(args))), _this), _this.state = {\n selectedIndex: null,\n focused: false\n }, _this.handleFocus = function (e) {\n var onFocus = _this.props.onFocus;\n\n _this.setState({ focused: true });\n onFocus(e);\n }, _this.handleBlur = function (e) {\n var onBlur = _this.props.onBlur;\n\n _this.setState({ focused: false });\n onBlur(e);\n }, _temp), _possibleConstructorReturn(_this, _ret);\n }\n\n _createClass(TagList, [{\n key: 'componentWillReceiveProps',\n value: function componentWillReceiveProps(nextProps) {\n if ('selectedIndex' in nextProps) {\n this.setState({\n selectedIndex: nextProps.selectedIndex\n });\n }\n }\n }, {\n key: 'onClickItem',\n value: function onClickItem(selectedIndex, e) {\n this.setSelectedIndex(selectedIndex, e);\n }\n }, {\n key: 'setSelectedIndex',\n value: function setSelectedIndex(selectedIndex, e) {\n var lastSelectedIndex = this.state.selectedIndex;\n\n // If selectedIndex is defined on props then this is a controlled component and we shouldn't\n // change our own state.\n if (!('selectedIndex' in this.props)) {\n this.setState({\n selectedIndex: selectedIndex\n });\n }\n\n if (lastSelectedIndex !== selectedIndex) {\n this.props.onChange(selectedIndex);\n }\n }\n }, {\n key: 'baseChildProps',\n value: function baseChildProps(index) {\n var _props = this.props,\n readOnly = _props.readOnly,\n onClose = _props.onClose,\n disabled = _props.disabled;\n var _state = this.state,\n selectedIndex = _state.selectedIndex,\n focused = _state.focused;\n\n return {\n key: index,\n selected: !disabled && focused && selectedIndex === index,\n tabIndex: !disabled && (selectedIndex === index || !focused && selectedIndex === null) ? 0 : -1,\n closable: !readOnly,\n disabled: disabled,\n onClick: this.getChildOnClick(index),\n onFocus: this.getChildOnFocus(index),\n onClose: onClose,\n role: 'gridcell'\n };\n }\n }, {\n key: 'getChildOnClick',\n value: function getChildOnClick(index) {\n if (this.props.disabled) {\n return null;\n }\n var tagListOnClick = this.onClickItem.bind(this, index);\n return function (e) {\n tagListOnClick(e);\n };\n }\n }, {\n key: 'getChildOnFocus',\n value: function getChildOnFocus(index) {\n var _this2 = this;\n\n if (this.props.disabled) {\n return null;\n }\n return function (e) {\n _this2.setSelectedIndex(index, e);\n _this2.handleFocus;\n };\n }\n }, {\n key: 'renderChildren',\n value: function renderChildren() {\n var _this3 = this;\n\n if (this.props.values) {\n return this.renderValues();\n }\n return _react2.default.Children.map(this.props.children, function (child, index) {\n return _react2.default.cloneElement(child, _this3.baseChildProps(index));\n });\n }\n }, {\n key: 'renderValues',\n value: function renderValues() {\n var _this4 = this;\n\n var values = this.props.values;\n\n return values.map(function (value, index) {\n return _react2.default.createElement(\n _Tag2.default,\n _extends({ value: value }, _this4.baseChildProps(index)),\n value\n );\n });\n }\n }, {\n key: 'render',\n value: function render() {\n var _props2 = this.props,\n className = _props2.className,\n name = _props2.name,\n readOnly = _props2.readOnly,\n disabled = _props2.disabled,\n invalid = _props2.invalid,\n otherProps = _objectWithoutProperties(_props2, ['className', 'name', 'readOnly', 'disabled', 'invalid']);\n\n var focused = this.state.focused;\n\n\n return _react2.default.createElement(\n _FocusManager2.default,\n { itemSelector: TAGLIST_SELECTOR, selectedItemSelector: TAGLIST_SELECTED_SELECTOR, orientation: 'horizontal' },\n _react2.default.createElement(\n 'div',\n _extends({}, (0, _filterDOMProps2.default)(otherProps), {\n className: (0, _classnames2.default)('spectrum-Tags', {\n 'is-disabled': disabled\n }, className),\n name: name,\n readOnly: readOnly,\n disabled: disabled,\n role: 'grid',\n 'aria-atomic': 'false',\n 'aria-relevant': 'additions',\n 'aria-live': focused ? 'polite' : 'off',\n 'aria-disabled': disabled,\n 'aria-invalid': invalid,\n onFocus: this.handleFocus,\n onBlur: this.handleBlur }),\n this.renderChildren()\n )\n );\n }\n }]);\n\n return TagList;\n}(_react2.default.Component)) || _class;\n\nTagList.displayName = 'TagList';\nTagList.propTypes = {\n /** Custom CSS class to add to the tag list */\n className: _propTypes2.default.string,\n\n /** Whether to disable the tag list */\n disabled: _propTypes2.default.bool,\n\n /** Name of tag list **/\n name: _propTypes2.default.string,\n\n /** Function called when focus is taken away from the tag list */\n onBlur: _propTypes2.default.func,\n\n /** Function called when a tag in the tag list is closed */\n onClose: _propTypes2.default.func,\n\n /** Function called when focus is put on the tag list */\n onFocus: _propTypes2.default.func,\n\n /** Whether the tag list can only be read */\n readOnly: _propTypes2.default.bool,\n\n /** Initial tags in the tag list */\n values: _propTypes2.default.arrayOf(_propTypes2.default.string)\n};\nTagList.defaultProps = {\n readOnly: false,\n disabled: false,\n onClose: function onClose() {},\n onFocus: function onFocus() {},\n onBlur: function onBlur() {},\n onChange: function onChange() {}\n};\nexports.default = TagList;","'use strict';\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\n\nvar _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };\n\nexports.default = Link;\n\nvar _classnames = require('classnames');\n\nvar _classnames2 = _interopRequireDefault(_classnames);\n\nvar _filterDOMProps = require('../../utils/filterDOMProps');\n\nvar _filterDOMProps2 = _interopRequireDefault(_filterDOMProps);\n\nvar _propTypes = require('prop-types');\n\nvar _propTypes2 = _interopRequireDefault(_propTypes);\n\nvar _react = require('react');\n\nvar _react2 = _interopRequireDefault(_react);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nfunction _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; }\n\nfunction _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }\n\nif (process.env.SCALE_MEDIUM && process.env.SCALE_LARGE) {\n require('../../spectrum-css/link/index.css');\n\n require('../../spectrum-css/link/index-diff.css');\n} else if (process.env.SCALE_LARGE) {\n require('../../spectrum-css/link/index-lg.css');\n} else {\n require('../../spectrum-css/link/index.css');\n}\n\nif (!process.env.THEME_LIGHT && !process.env.THEME_DARK && !process.env.THEME_LIGHTEST && !process.env.THEME_DARKEST || process.env.THEME_LIGHT) require('../../spectrum-css/link/multiStops/light.css');\nif (!process.env.THEME_LIGHT && !process.env.THEME_DARK && !process.env.THEME_LIGHTEST && !process.env.THEME_DARKEST || process.env.THEME_DARK) require('../../spectrum-css/link/multiStops/dark.css');\nif (!process.env.THEME_LIGHT && !process.env.THEME_DARK && !process.env.THEME_LIGHTEST && !process.env.THEME_DARKEST || process.env.THEME_LIGHTEST) require('../../spectrum-css/link/multiStops/lightest.css');\nif (!process.env.THEME_LIGHT && !process.env.THEME_DARK && !process.env.THEME_LIGHTEST && !process.env.THEME_DARKEST || process.env.THEME_DARKEST) require('../../spectrum-css/link/multiStops/darkest.css');\nfunction Link(_ref) {\n var subtle = _ref.subtle,\n variant = _ref.variant,\n children = _ref.children,\n className = _ref.className,\n otherProps = _objectWithoutProperties(_ref, ['subtle', 'variant', 'children', 'className']);\n\n if (subtle) {\n console.warn('The \"subtle\" prop of Link is deprecated. Please use variant=\"quiet\" instead.');\n variant = 'quiet';\n }\n\n if (variant === 'subtle') {\n console.warn('The \"subtle\" variant of Link is deprecated. Please use variant=\"quiet\" instead.');\n variant = 'quiet';\n }\n\n return _react2.default.createElement(\n 'a',\n _extends({\n className: (0, _classnames2.default)('spectrum-Link', _defineProperty({}, 'spectrum-Link--' + variant, variant), className)\n }, (0, _filterDOMProps2.default)(otherProps)),\n children\n );\n}\n\nLink.propTypes = {\n /** Class to add to the Link */\n className: _propTypes2.default.string,\n\n /** Link variant */\n variant: _propTypes2.default.oneOf(['quiet', 'subtle', 'overBackground'])\n};\n\nLink.displayName = 'Link';","module.exports = Array.isArray || function (arr) {\n return Object.prototype.toString.call(arr) == '[object Array]';\n};\n","/*! (c) Andrea Giammarchi - ISC */\nvar self = this || /* istanbul ignore next */ {};\ntry {\n (function (URLSearchParams, plus) {\n if (\n new URLSearchParams('q=%2B').get('q') !== plus ||\n new URLSearchParams({q: plus}).get('q') !== plus ||\n new URLSearchParams([['q', plus]]).get('q') !== plus ||\n new URLSearchParams('q=\\n').toString() !== 'q=%0A' ||\n new URLSearchParams({q: ' &'}).toString() !== 'q=+%26'\n )\n throw URLSearchParams;\n self.URLSearchParams = URLSearchParams;\n }(URLSearchParams, '+'));\n} catch(URLSearchParams) {\n (function (Object, String, isArray) {'use strict';\n var create = Object.create;\n var defineProperty = Object.defineProperty;\n var find = /[!'\\(\\)~]|%20|%00/g;\n var plus = /\\+/g;\n var replace = {\n '!': '%21',\n \"'\": '%27',\n '(': '%28',\n ')': '%29',\n '~': '%7E',\n '%20': '+',\n '%00': '\\x00'\n };\n var proto = {\n append: function (key, value) {\n appendTo(this._ungap, key, value);\n },\n delete: function (key) {\n delete this._ungap[key];\n },\n get: function (key) {\n return this.has(key) ? this._ungap[key][0] : null;\n },\n getAll: function (key) {\n return this.has(key) ? this._ungap[key].slice(0) : [];\n },\n has: function (key) {\n return key in this._ungap;\n },\n set: function (key, value) {\n this._ungap[key] = [String(value)];\n },\n forEach: function (callback, thisArg) {\n var self = this;\n for (var key in self._ungap)\n self._ungap[key].forEach(invoke, key);\n function invoke(value) {\n callback.call(thisArg, value, String(key), self);\n }\n },\n toJSON: function () {\n return {};\n },\n toString: function () {\n var query = [];\n for (var key in this._ungap) {\n var encoded = encode(key);\n for (var\n i = 0,\n value = this._ungap[key];\n i < value.length; i++\n ) {\n query.push(encoded + '=' + encode(value[i]));\n }\n }\n return query.join('&');\n }\n };\n for (var key in proto)\n defineProperty(URLSearchParams.prototype, key, {\n configurable: true,\n writable: true,\n value: proto[key]\n });\n self.URLSearchParams = URLSearchParams;\n function URLSearchParams(query) {\n var dict = create(null);\n defineProperty(this, '_ungap', {value: dict});\n switch (true) {\n case !query:\n break;\n case typeof query === 'string':\n if (query.charAt(0) === '?') {\n query = query.slice(1);\n }\n for (var\n pairs = query.split('&'),\n i = 0,\n length = pairs.length; i < length; i++\n ) {\n var value = pairs[i];\n var index = value.indexOf('=');\n if (-1 < index) {\n appendTo(\n dict,\n decode(value.slice(0, index)),\n decode(value.slice(index + 1))\n );\n } else if (value.length){\n appendTo(\n dict,\n decode(value),\n ''\n );\n }\n }\n break;\n case isArray(query):\n for (var\n i = 0,\n length = query.length; i < length; i++\n ) {\n var value = query[i];\n appendTo(dict, value[0], value[1]);\n }\n break;\n case 'forEach' in query:\n query.forEach(addEach, dict);\n break;\n default:\n for (var key in query)\n appendTo(dict, key, query[key]);\n }\n }\n\n function addEach(value, key) {\n appendTo(this, key, value);\n }\n \n function appendTo(dict, key, value) {\n var res = isArray(value) ? value.join(',') : value;\n if (key in dict)\n dict[key].push(res);\n else\n dict[key] = [res];\n }\n \n function decode(str) {\n return decodeURIComponent(str.replace(plus, ' '));\n }\n \n function encode(str) {\n return encodeURIComponent(str).replace(find, replacer);\n }\n\n function replacer(match) {\n return replace[match];\n }\n\n }(Object, String, Array.isArray));\n}\n\n(function (URLSearchParamsProto) {\n\n var iterable = false;\n try { iterable = !!Symbol.iterator; } catch (o_O) {}\n\n /* istanbul ignore else */\n if (!('forEach' in URLSearchParamsProto)) {\n URLSearchParamsProto.forEach = function forEach(callback, thisArg) {\n var self = this;\n var names = Object.create(null);\n this.toString()\n .replace(/=[\\s\\S]*?(?:&|$)/g, '=')\n .split('=')\n .forEach(function (name) {\n if (!name.length || name in names)\n return;\n (names[name] = self.getAll(name)).forEach(function(value) {\n callback.call(thisArg, value, name, self);\n });\n });\n };\n }\n\n /* istanbul ignore else */\n if (!('keys' in URLSearchParamsProto)) {\n URLSearchParamsProto.keys = function keys() {\n return iterator(this, function(value, key) { this.push(key); });\n };\n }\n\n /* istanbul ignore else */\n if (!('values' in URLSearchParamsProto)) {\n URLSearchParamsProto.values = function values() {\n return iterator(this, function(value, key) { this.push(value); });\n };\n }\n\n /* istanbul ignore else */\n if (!('entries' in URLSearchParamsProto)) {\n URLSearchParamsProto.entries = function entries() {\n return iterator(this, function(value, key) { this.push([key, value]); });\n };\n }\n\n /* istanbul ignore else */\n if (iterable && !(Symbol.iterator in URLSearchParamsProto)) {\n URLSearchParamsProto[Symbol.iterator] = URLSearchParamsProto.entries;\n }\n\n /* istanbul ignore else */\n if (!('sort' in URLSearchParamsProto)) {\n URLSearchParamsProto.sort = function sort() {\n var\n entries = this.entries(),\n entry = entries.next(),\n done = entry.done,\n keys = [],\n values = Object.create(null),\n i, key, value\n ;\n while (!done) {\n value = entry.value;\n key = value[0];\n keys.push(key);\n if (!(key in values)) {\n values[key] = [];\n }\n values[key].push(value[1]);\n entry = entries.next();\n done = entry.done;\n }\n // not the champion in efficiency\n // but these two bits just do the job\n keys.sort();\n for (i = 0; i < keys.length; i++) {\n this.delete(keys[i]);\n }\n for (i = 0; i < keys.length; i++) {\n key = keys[i];\n this.append(key, values[key].shift());\n }\n };\n }\n\n function iterator(self, callback) {\n var items = [];\n self.forEach(callback, items);\n return iterable ?\n items[Symbol.iterator]() :\n {\n next: function() {\n var value = items.shift();\n return {done: value === undefined, value: value};\n }\n };\n }\n\n /* istanbul ignore next */\n (function (Object) {\n var\n dP = Object.defineProperty,\n gOPD = Object.getOwnPropertyDescriptor,\n createSearchParamsPollute = function (search) {\n function append(name, value) {\n URLSearchParamsProto.append.call(this, name, value);\n name = this.toString();\n search.set.call(this._usp, name ? ('?' + name) : '');\n }\n function del(name) {\n URLSearchParamsProto.delete.call(this, name);\n name = this.toString();\n search.set.call(this._usp, name ? ('?' + name) : '');\n }\n function set(name, value) {\n URLSearchParamsProto.set.call(this, name, value);\n name = this.toString();\n search.set.call(this._usp, name ? ('?' + name) : '');\n }\n return function (sp, value) {\n sp.append = append;\n sp.delete = del;\n sp.set = set;\n return dP(sp, '_usp', {\n configurable: true,\n writable: true,\n value: value\n });\n };\n },\n createSearchParamsCreate = function (polluteSearchParams) {\n return function (obj, sp) {\n dP(\n obj, '_searchParams', {\n configurable: true,\n writable: true,\n value: polluteSearchParams(sp, obj)\n }\n );\n return sp;\n };\n },\n updateSearchParams = function (sp) {\n var append = sp.append;\n sp.append = URLSearchParamsProto.append;\n URLSearchParams.call(sp, sp._usp.search.slice(1));\n sp.append = append;\n },\n verifySearchParams = function (obj, Class) {\n if (!(obj instanceof Class)) throw new TypeError(\n \"'searchParams' accessed on an object that \" +\n \"does not implement interface \" + Class.name\n );\n },\n upgradeClass = function (Class) {\n var\n ClassProto = Class.prototype,\n searchParams = gOPD(ClassProto, 'searchParams'),\n href = gOPD(ClassProto, 'href'),\n search = gOPD(ClassProto, 'search'),\n createSearchParams\n ;\n if (!searchParams && search && search.set) {\n createSearchParams = createSearchParamsCreate(\n createSearchParamsPollute(search)\n );\n Object.defineProperties(\n ClassProto,\n {\n href: {\n get: function () {\n return href.get.call(this);\n },\n set: function (value) {\n var sp = this._searchParams;\n href.set.call(this, value);\n if (sp) updateSearchParams(sp);\n }\n },\n search: {\n get: function () {\n return search.get.call(this);\n },\n set: function (value) {\n var sp = this._searchParams;\n search.set.call(this, value);\n if (sp) updateSearchParams(sp);\n }\n },\n searchParams: {\n get: function () {\n verifySearchParams(this, Class);\n return this._searchParams || createSearchParams(\n this,\n new URLSearchParams(this.search.slice(1))\n );\n },\n set: function (sp) {\n verifySearchParams(this, Class);\n createSearchParams(this, sp);\n }\n }\n }\n );\n }\n }\n ;\n try {\n upgradeClass(HTMLAnchorElement);\n if (/^function|object$/.test(typeof URL) && URL.prototype)\n upgradeClass(URL);\n } catch (meh) {}\n }(Object));\n\n}(self.URLSearchParams.prototype, Object));\nexport default self.URLSearchParams;\n","export function middleEllipsis(text, maxLength) {\n if (text.length > maxLength) {\n let middle = Math.round(text.length / 2);\n let tooMuch = text.length - maxLength;\n let borders = Math.round(middle - tooMuch / 2);\n text = text.substr(0, borders) + \" ... \" + text.substr(text.length - borders);\n }\n return text;\n}\n\nexport function middlePathEllipsis(path, maxLength, leftPart, rightPart, leadingSlash) {\n // -6 stands for \"...\"\n if (path.length > maxLength) {\n if (path.indexOf(\"/\") === 0) {\n path = path.substr(1);\n leadingSlash = true;\n maxLength--;\n }\n let parts = path.split(\"/\");\n if (parts.length > 2) {\n let middlePart = Math.round(parts.length / 2) - 1;\n let left = parts.slice(0, middlePart);\n let right = parts.slice(middlePart + 1);\n path = left.join(\"/\") + \"/\" + right.join(\"/\");\n return middlePathEllipsis(path, maxLength, left, right, leadingSlash);\n } else {\n return middleEllipsis((leadingSlash ? \"/\" : \"\") + path, maxLength);\n }\n }\n if (leftPart && rightPart) {\n return (leadingSlash ? \"/\" : \"\") + leftPart.join(\"/\") + \"/ ... /\" + rightPart.join(\"/\");\n } else {\n return path;\n }\n}\n\n\n// concept of auto length ellipsys\n\n// document.querySelectorAll(\".text-ellipsis\").forEach((el) => {\n// if (el.scrollWidth > el.parentNode.offsetWidth) {\n// let clone = el.cloneNode(true);\n// clone.innerText = el.innerText;\n// clone.style.display = \"block\";\n// clone.style.position = \"absolute\";\n// clone.style.visibility = \"hidden\";\n//\n// el.parentNode.insertBefore(clone, el);\n// let chunks = [];\n// while (clone.scrollWidth + 35 > el.parentNode.offsetWidth) {\n// chunks = clone.textContent.split(\"\");\n// chunks.splice(Math.round(chunks.length / 2), 1);\n// clone.textContent = chunks.join(\"\");\n// }\n// chunks.splice(Math.round(chunks.length / 2), 0, \"
/.../\");\n// el.innerHTML = chunks.join(\"\");\n// clone.remove();\n// }\n// el.classList.remove(\".text-ellipsis\");\n// });\n","/*\n * ADOBE CONFIDENTIAL\n * ___________________\n *\n * Copyright 2019 Adobe\n * All Rights Reserved.\n *\n * NOTICE: All information contained herein is, and remains\n * the property of Adobe and its suppliers, if any. The intellectual\n * and technical concepts contained herein are proprietary to Adobe\n * and its suppliers and are protected by all applicable intellectual\n * property laws, including trade secret and copyright laws.\n * Dissemination of this information or reproduction of this material\n * is strictly forbidden unless prior written permission is obtained\n * from Adobe.\n */\nimport React from \"react\";\n\nexport default (
);\n","/*\n * ADOBE CONFIDENTIAL\n * ___________________\n *\n * Copyright 2019 Adobe\n * All Rights Reserved.\n *\n * NOTICE: All information contained herein is, and remains\n * the property of Adobe and its suppliers, if any. The intellectual\n * and technical concepts contained herein are proprietary to Adobe\n * and its suppliers and are protected by all applicable intellectual\n * property laws, including trade secret and copyright laws.\n * Dissemination of this information or reproduction of this material\n * is strictly forbidden unless prior written permission is obtained\n * from Adobe.\n */\n\n// \"aem:\" prefix is not needed because it's added somewhere else\nconst feature = \"security:permissions\";\nlet foundationTracker = null;\nif (window.Granite && window.Granite.Tracking && window.Granite.Tracking.Tracker) {\n foundationTracker = window.Granite.Tracking.Tracker;\n}\nexport function trackPage(pageName, princial) {\n if (foundationTracker) {\n let hierarchy = feature;\n let name = pageName;\n if (pageName && pageName !== \"\") {\n const pageNameTokens = pageName.split(\":\");\n name = pageNameTokens.pop();\n hierarchy += \":\" + pageNameTokens.join(\":\");\n }\n foundationTracker.trackPage({\n hierarchy: hierarchy,\n name: name,\n assetId: princial\n });\n }\n}\n\nexport function trackEvent(type, action, element, widget, attributes, featureSuffix) {\n const eventFeature = featureSuffix ? feature + \":\" + featureSuffix : feature;\n if (foundationTracker) {\n let trackingData = {\n feature: eventFeature,\n element: element,\n type: type,\n action: action,\n widget: widget\n };\n if (attributes) {\n trackingData.attributes = attributes;\n }\n foundationTracker.trackEvent(trackingData);\n }\n}\n","/*\n * ADOBE CONFIDENTIAL\n * ___________________\n *\n * Copyright 2019 Adobe\n * All Rights Reserved.\n *\n * NOTICE: All information contained herein is, and remains\n * the property of Adobe and its suppliers, if any. The intellectual\n * and technical concepts contained herein are proprietary to Adobe\n * and its suppliers and are protected by all applicable intellectual\n * property laws, including trade secret and copyright laws.\n * Dissemination of this information or reproduction of this material\n * is strictly forbidden unless prior written permission is obtained\n * from Adobe.\n */\nimport React from \"react\";\nimport PropTypes from \"prop-types\";\n\nimport Button from \"@react/react-spectrum/Button\";\nimport Close from \"@react/react-spectrum/Icon/Close\";\nimport Dialog from \"@react/react-spectrum/Dialog\";\nimport Edit from \"@react/react-spectrum/Icon/Edit\";\nimport IllustratedMessage from \"@react/react-spectrum/IllustratedMessage\";\nimport ModalTrigger from \"@react/react-spectrum/ModalTrigger\";\nimport StatusLight from \"@react/react-spectrum/StatusLight\";\nimport { Table, TR, TH, TD, THead, TBody } from \"@react/react-spectrum/Table\";\n\nimport { middlePathEllipsis } from \"../../utils/Ellipsis\";\nimport noACEIcon from \"../../svg/NoACEIcon\";\nimport { trackEvent, trackPage } from \"../../utils/Tracking\";\n\nimport \"./AccessControlEntries.css\";\n\nexport default class AccessControlEntries extends React.Component {\n constructor(props) {\n super(props);\n this.handleEditClick = this.handleEditClick.bind(this);\n this.handleDeleteClick = this.handleDeleteClick.bind(this);\n this.handleAddClick = this.handleAddClick.bind(this);\n\n this.params = new URLSearchParams(this.props.location.search);\n }\n\n render() {\n const header =
{Granite.I18n.get(\"Access Control Entries (ACEs)\")};\n\n if (!this.props.entries.length) {\n return (\n
\n {header}\n \n \n );\n }\n\n const entries = [];\n this.props.entries.forEach((a, i) => {\n a.entries.forEach((e, i2) => {\n entries.push(
\n | {middlePathEllipsis(a.path, 50)} | \n {this.renderPermission(e.allow)} | \n {(e.privileges || []).join(\", \")} | \n {this.renderRestrictions(e.restrictions || [])} | \n {this.renderActions(a, e)} | \n
);\n });\n });\n\n return
\n {header}\n \n \n | {Granite.I18n.get(\"Path\")} | \n {Granite.I18n.get(\"Permission\")} | \n {Granite.I18n.get(\"Privileges\")} | \n {Granite.I18n.get(\"Restrictions\")} | \n | \n \n \n {entries}\n \n
\n ;\n }\n\n renderRestrictions(restrictions) {\n const out = [];\n\n for (const restriction of restrictions) {\n for (const [ key, values ] of Object.entries(restriction)) {\n for (const value of values) {\n out.push(`${key}=\"${value}\"`);\n }\n }\n }\n\n return
{out.join(\", \")};\n }\n\n renderPermission(isAllow) {\n if (isAllow) {\n return
\n {Granite.I18n.get(\"allow\")}\n ;\n } else {\n return
\n {Granite.I18n.get(\"deny\")}\n ;\n }\n }\n\n renderActions(ace, entry) {\n const editText = Granite.I18n.get(\"Edit\");\n const removeText = Granite.I18n.get(\"Delete\");\n let removeDesc = Granite.I18n.get(\"Are you sure you want to remove these access control entry on {0} for {1}?\",\n [ `
${ace.path}`, `
${this.props.principal}` ]);\n return
\n } title={editText} aria-label={editText}\n disabled={!entry.canEdit}\n onClick={e => this.handleEditClick(e, ace, entry)}/>\n \n \n ;\n }\n\n handleEditClick(e, ace, entry) {\n trackEvent(\"button\", \"click\", \"edit ace\", { name: \"principal access control list table\", type: \"table\" });\n this.props.history.push(`/edit/principal/${this.props.principal}?` +\n `path=${ace.path}&policyId=${ace.policyId}&entryId=${entry.entryId}` +\n `&filter=${this.params.get(\"filter\") || \"group\"}`);\n }\n\n handleDeleteClick() {\n trackEvent(\"button\", \"click\", \"delete ace\", { name: \"principal access control list table\", type: \"table\" });\n trackPage(\"principals:ace:delete\", this.props.principal);\n }\n\n handleAddClick() {\n trackEvent(\"button\", \"click\", \"add ace\", { name: \"principal access control list table\", type: \"table\" });\n this.props.history.push(`/add/principal/${this.props.principal}` +\n `?filter=${this.params.get(\"filter\") || \"group\"}`);\n }\n}\n\nAccessControlEntries.propTypes = {\n history: PropTypes.object.isRequired,\n location: PropTypes.object,\n principal: PropTypes.string.isRequired,\n entries: PropTypes.array.isRequired,\n onRemoveEntry: PropTypes.func.isRequired\n};\n\nAccessControlEntries.defaultProps = {\n entries: [],\n onRemoveEntry: () => {\n }\n};\n","import React from \"react\";\nimport Alert from \"@react/react-spectrum/Alert\";\nimport PropTypes from \"prop-types\";\n\nimport \"./ErrorAlert.css\";\n\nexport default class ErrorAlert extends React.Component {\n render() {\n return (\n
\n {this.props.text || Granite.I18n.get(\"Error loading data\")}\n \n );\n }\n}\n\nErrorAlert.propTypes = {\n text: PropTypes.string,\n header: PropTypes.string\n};\n","/*\n * ADOBE CONFIDENTIAL\n * ___________________\n *\n * Copyright 2019 Adobe\n * All Rights Reserved.\n *\n * NOTICE: All information contained herein is, and remains\n * the property of Adobe and its suppliers, if any. The intellectual\n * and technical concepts contained herein are proprietary to Adobe\n * and its suppliers and are protected by all applicable intellectual\n * property laws, including trade secret and copyright laws.\n * Dissemination of this information or reproduction of this material\n * is strictly forbidden unless prior written permission is obtained\n * from Adobe.\n */\n\nimport React from \"react\";\nimport User from \"@react/react-spectrum/Icon/User\";\nimport UserGroup from \"@react/react-spectrum/Icon/UserGroup\";\nimport Gears from \"@react/react-spectrum/Icon/Gears\";\nimport Avatar from \"@react/react-spectrum/Avatar\";\nimport { TableView } from \"@react/react-spectrum/TableView\";\nimport PropTypes from \"prop-types\";\nimport ListDataSource from \"@react/react-spectrum/ListDataSource\";\nimport Search from \"@react/react-spectrum/Search\";\nimport Select from \"@react/react-spectrum/Select\";\nimport { IndexPath } from \"@react/collection-view\";\nimport { middleEllipsis } from \"../../utils/Ellipsis\";\nimport { trackPage, trackEvent } from \"../../utils/Tracking\";\n\nimport \"./PrincipalsList.css\";\n\nconst principalListWN = \"principal list\";\n\nclass PrincipalSource extends ListDataSource {\n constructor(principalsUrlTemplate, hook, initialType) {\n super();\n this.type = initialType;\n this.query = \"\";\n this.dataLoadedHook = hook;\n this.offset = 0;\n this.limit = 100;\n this.principalsUrlTemplate = principalsUrlTemplate;\n this.moreItems = true;\n }\n\n async load() {\n return this.loadPrincipals();\n }\n\n async loadMore() {\n trackEvent(\"table\", \"newpage\", \"\", { name: principalListWN, type: \"table\" },\n { offset: this.offset, limit: this.limit, query: this.query, type: this.type });\n return this.loadPrincipals();\n }\n\n async loadPrincipals() {\n if (!this.moreItems) {\n return;\n }\n let principalsUrl = Granite.URITemplate.expand(this.principalsUrlTemplate,\n { type: this.type, query: this.query, offset: this.offset, limit: this.limit });\n const response = await fetch(principalsUrl);\n const data = await response.json();\n this.data = this.formatAuthorizables(data.principals);\n\n if (data.principals.length < this.limit) {\n this.moreItems = false;\n }\n this.offset += data.principals.length;\n\n this.dataLoadedHook();\n return this.data;\n }\n\n setQuery(query) {\n this.query = query;\n this.resetPagination();\n this.reloadData();\n }\n\n setType(type) {\n this.type = type;\n this.resetPagination();\n this.reloadData();\n }\n\n resetPagination() {\n this.offset = 0;\n this.moreItems = true;\n }\n\n formatAuthorizables(principals) {\n return principals.map(principal => {\n principal.key = principal.principal;\n return principal;\n });\n }\n}\n\nexport default class PrincipalsList extends React.Component {\n constructor(props) {\n super(props);\n\n let filterType = new URLSearchParams(props.location.search).get(\"filter\");\n this.state = {\n query: \"\",\n type: filterType || \"group\",\n forcePrincipalSelection: false\n };\n this.defaultSelection = filterType || \"group\";\n\n this.handleSearchChange = this.handleSearchChange.bind(this);\n this.handleSelectChange = this.handleSelectChange.bind(this);\n this.dataSource = new PrincipalSource(props.principalsUrlTemplate,\n () => this.setState({ \"forcePrincipalSelection\": true }), this.defaultSelection);\n }\n\n renderCell(column, data) {\n if (column.key === \"avatar\") {\n if (data.picturePath) {\n return ;\n } else {\n if (\"group\" === data.type) {\n return ;\n } else if (\"system user\" === data.type) {\n return ;\n }\n }\n return ;\n } else if (column.key === \"principal\") {\n let memberText;\n if (data.membersTotal !== undefined) {\n if (data.membersTotal === 1) {\n memberText = Granite.I18n.get(\"{0} member\", [ data.membersTotal ]);\n } else {\n memberText = Granite.I18n.get(\"{0} members\", [ data.membersTotal ]);\n }\n } else {\n memberText = middleEllipsis(data.principal_xss, 38);\n }\n\n return \n {middleEllipsis(data.name_xss, 28)}\n \n {/* The external span cannot be concatenated inside Granite.I18n call\n as it will be encoded by React */}\n \n {memberText}\n {data.type === \"external\" ? \", \" : \"\"}\n \n {data.type === \"external\" && {Granite.I18n.get(\"external\")}}\n \n
;\n }\n return \"\";\n }\n\n renderEmptyView() {\n return (\n \n {Granite.I18n.get(\"There are no results for \\\"{0}\\\".\", [ this.state.query ])}
\n {Granite.I18n.get(\"Try another search term.\")}\n
);\n }\n\n handleSearchChange(newSearchValue) {\n trackEvent(\"search\", \"change\", \"principal search\", { name: \"principal search\", type: \"search\" },\n { value: newSearchValue });\n this.setState({\n query: newSearchValue\n }, () => {\n this.dataSource.setQuery(newSearchValue);\n });\n }\n\n handleSelectChange(newSelectValue) {\n trackEvent(\"select-item\", \"change\", newSelectValue === \"\" ? \"all\" : newSelectValue,\n { name: \"principal type filter\", type: \"select\" });\n this.setState({\n type: newSelectValue\n }, () => {\n this.dataSource.setType(newSelectValue);\n });\n }\n\n render() {\n let selectedIndex = this.state.selectedIndex ? [ new IndexPath(0, this.state.selectedIndex) ] : [];\n return (\n \n \n \n {/* 61 is height of components above, 21 is padding, 12 is margin to left below */}\n \n \n );\n }\n\n selectionChanged(selection) {\n let index;\n // check for deselection\n if ([ ...selection ].length) {\n index = [ ...selection ][0].index;\n } else {\n index = this.state.selectedIndex;\n }\n if (this.dataSource.data.length && this.dataSource.sections.length && this.dataSource.sections[0][index] &&\n this.props.principal !== this.dataSource.sections[0][index].key) {\n const selectedPrincipal = this.dataSource.sections[0][index].key;\n trackEvent(\"table-row\", \"change\", selectedPrincipal, { name: principalListWN, type: \"table\" });\n trackPage(\"principals:principals\", selectedPrincipal);\n let query = new URLSearchParams(this.props.location.search);\n query.set(\"filter\", this.dataSource.type);\n this.props.history.push({\n pathname: `/principal/${selectedPrincipal}`,\n search: query.toString()\n });\n }\n }\n\n componentDidMount() {\n trackPage(\"principals:principals\", this.props.principal);\n }\n\n componentDidUpdate(previousProps) {\n if (this.props.principal && this.dataSource.data &&\n (previousProps.principal !== this.props.principal || this.state.forcePrincipalSelection)) {\n let index = this.dataSource.data.findIndex((o) => o.principal === this.props.principal);\n this.setState({\n selectedIndex: index !== -1 ? index : undefined,\n forcePrincipalSelection: false\n });\n }\n }\n}\n\nPrincipalsList.propTypes = {\n listWidth: PropTypes.number,\n listHeight: PropTypes.number,\n history: PropTypes.object,\n location: PropTypes.object,\n principal: PropTypes.string,\n principalsUrlTemplate: PropTypes.string.isRequired\n};\n","/*\n * ADOBE CONFIDENTIAL\n * ___________________\n *\n * Copyright 2019 Adobe\n * All Rights Reserved.\n *\n * NOTICE: All information contained herein is, and remains\n * the property of Adobe and its suppliers, if any. The intellectual\n * and technical concepts contained herein are proprietary to Adobe\n * and its suppliers and are protected by all applicable intellectual\n * property laws, including trade secret and copyright laws.\n * Dissemination of this information or reproduction of this material\n * is strictly forbidden unless prior written permission is obtained\n * from Adobe.\n */\n\nimport React from \"react\";\nimport { default as RSWait } from \"@react/react-spectrum/Wait\";\nimport \"./Wait.css\";\n\nexport default class Wait extends React.Component {\n render() {\n return (\n
);\n }\n}\n","/*\n * ADOBE CONFIDENTIAL\n * ___________________\n *\n * Copyright 2019 Adobe\n * All Rights Reserved.\n *\n * NOTICE: All information contained herein is, and remains\n * the property of Adobe and its suppliers, if any. The intellectual\n * and technical concepts contained herein are proprietary to Adobe\n * and its suppliers and are protected by all applicable intellectual\n * property laws, including trade secret and copyright laws.\n * Dissemination of this information or reproduction of this material\n * is strictly forbidden unless prior written permission is obtained\n * from Adobe.\n */\nexport function post(url, body) {\n return new Promise((resolve, reject) => {\n // Use XMLHttpRequest for POST as our CSRF doesn't support fetch() yet\n const xhr = new XMLHttpRequest();\n xhr.onload = () => {\n if (xhr.status === 200) {\n resolve(xhr.response);\n } else {\n reject(new Error(xhr.status));\n }\n };\n xhr.onerror = () => {\n reject(new Error(xhr.status));\n };\n xhr.open(\"POST\", url);\n xhr.setRequestHeader(\"Content-Type\", \"application/json\");\n xhr.setRequestHeader(\"X-Requested-With\", \"XMLHttpRequest\");\n xhr.send(JSON.stringify(body));\n });\n}\n","/*\n * ADOBE CONFIDENTIAL\n * ___________________\n *\n * Copyright 2019 Adobe\n * All Rights Reserved.\n *\n * NOTICE: All information contained herein is, and remains\n * the property of Adobe and its suppliers, if any. The intellectual\n * and technical concepts contained herein are proprietary to Adobe\n * and its suppliers and are protected by all applicable intellectual\n * property laws, including trade secret and copyright laws.\n * Dissemination of this information or reproduction of this material\n * is strictly forbidden unless prior written permission is obtained\n * from Adobe.\n */\nimport React from \"react\";\nimport PropTypes from \"prop-types\";\nimport Button from \"@react/react-spectrum/Button\";\nimport Dialog from \"@react/react-spectrum/Dialog\";\nimport Heading from \"@react/react-spectrum/Heading\";\nimport SplitView from \"@react/react-spectrum/SplitView\";\nimport AccessControlEntries from \"../AccessControlEntries/AccessControlEntries\";\nimport ErrorAlert from \"../ErrorAlert/ErrorAlert\";\nimport PrincipalsList from \"../PrincipalsList/PrincipalsList\";\nimport Wait from \"../Wait/Wait\";\nimport { post } from \"../../utils/Http\";\nimport { trackEvent } from \"../../utils/Tracking\";\nimport { middleEllipsis } from \"../../utils/Ellipsis\";\n\nimport \"./PrincipalView.css\";\n\nexport default class PrincipalView extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n principal: this.props.match.params.principal,\n listWidth: 324,\n data: {},\n isLoading: true,\n error: false,\n errorDialog: false,\n listHeight: 0\n };\n this.getData();\n this.handleRemoveEntry = this.handleRemoveEntry.bind(this);\n }\n\n recalculatePageHeight() {\n let panelContent = document.querySelector(\".foundation-layout-panel-content\");\n this.setState({\n listHeight: panelContent ? panelContent.offsetHeight - 10 : 0\n });\n }\n\n render() {\n let errorDialog = null;\n if (this.state.errorDialog) {\n errorDialog =