superdesk-ui-framework 2.4.16 → 2.4.19

package/dist/examples.bundle.js

@@ -38576,13 +38576,21 @@ function mapToStyles(_ref2) {
       adaptive = _ref2.adaptive,
       roundOffsets = _ref2.roundOffsets,
       isFixed = _ref2.isFixed;
+  var _offsets$x = offsets.x,
+      x = _offsets$x === void 0 ? 0 : _offsets$x,
+      _offsets$y = offsets.y,
+      y = _offsets$y === void 0 ? 0 : _offsets$y;
 
-  var _ref3 = roundOffsets === true ? roundOffsetsByDPR(offsets) : typeof roundOffsets === 'function' ? roundOffsets(offsets) : offsets,
-      _ref3$x = _ref3.x,
-      x = _ref3$x === void 0 ? 0 : _ref3$x,
-      _ref3$y = _ref3.y,
-      y = _ref3$y === void 0 ? 0 : _ref3$y;
+  var _ref3 = typeof roundOffsets === 'function' ? roundOffsets({
+    x: x,
+    y: y
+  }) : {
+    x: x,
+    y: y
+  };
 
+  x = _ref3.x;
+  y = _ref3.y;
   var hasX = offsets.hasOwnProperty('x');
   var hasY = offsets.hasOwnProperty('y');
   var sideX = __WEBPACK_IMPORTED_MODULE_0__enums_js__["l" /* left */];
@@ -38627,6 +38635,17 @@ function mapToStyles(_ref2) {
     position: position
   }, adaptive && unsetSides);
 
+  var _ref4 = roundOffsets === true ? roundOffsetsByDPR({
+    x: x,
+    y: y
+  }) : {
+    x: x,
+    y: y
+  };
+
+  x = _ref4.x;
+  y = _ref4.y;
+
   if (gpuAcceleration) {
     var _Object$assign;
 
@@ -38636,9 +38655,9 @@ function mapToStyles(_ref2) {
   return Object.assign({}, commonStyles, (_Object$assign2 = {}, _Object$assign2[sideY] = hasY ? y + "px" : '', _Object$assign2[sideX] = hasX ? x + "px" : '', _Object$assign2.transform = '', _Object$assign2));
 }
 
-function computeStyles(_ref4) {
-  var state = _ref4.state,
-      options = _ref4.options;
+function computeStyles(_ref5) {
+  var state = _ref5.state,
+      options = _ref5.options;
   var _options$gpuAccelerat = options.gpuAcceleration,
       gpuAcceleration = _options$gpuAccelerat === void 0 ? true : _options$gpuAccelerat,
       _options$adaptive = options.adaptive,
@@ -60369,7 +60388,7 @@ module.exports = function(isValidElement, throwOnDirectAccess) {
         if (checkerResult == null) {
           return null;
         }
-        if (checkerResult.data.hasOwnProperty('expectedType')) {
+        if (checkerResult.data && has(checkerResult.data, 'expectedType')) {
           expectedTypes.push(checkerResult.data.expectedType);
         }
       }
@@ -61022,8 +61041,11 @@ var Input = /** @class */ (function (_super) {
             'sd-input--disabled': this.props.disabled,
             'sd-input--invalid': this.props.invalid || this.state.invalid,
         });
+        var labelClasses = classnames_1.default('sd-input__label', {
+            'a11y-only': this.props.labelHidden,
+        });
         return (React.createElement("div", { className: classes },
-            this.props.label ? React.createElement("label", { className: 'sd-input__label', htmlFor: this.htmlId, id: this.htmlId + 'label' }, this.props.label) : null,
+            React.createElement("label", { className: labelClasses, htmlFor: this.htmlId, id: this.htmlId + 'label' }, this.props.label),
             React.createElement("input", { className: 'sd-input__input', type: 'text', id: this.htmlId, value: this.state.value, "aria-label": this.props.label, "aria-describedby": this.htmlId + 'label', onChange: this.handleChange, disabled: this.props.disabled }),
             this.props.maxLength ?
                 React.createElement("div", { className: 'sd-input__char-count' },
@@ -61106,6 +61128,13 @@ var Select = /** @class */ (function (_super) {
         this.setState({ value: event.target.value });
         this.props.onChange(event.target.value);
     };
+    Select.prototype.componentDidUpdate = function (prevProps) {
+        var _a, _b;
+        if (this.props.value !== prevProps.value) {
+            this.setState({ value: (_a = this.props.value) !== null && _a !== void 0 ? _a : '' });
+            this.props.onChange((_b = this.props.value) !== null && _b !== void 0 ? _b : '');
+        }
+    };
     Select.prototype.render = function () {
         var classes = classnames_1.default('sd-input sd-input--is-select', {
             'sd-input--inline-label': this.props.inlineLabel,
@@ -61113,9 +61142,11 @@ var Select = /** @class */ (function (_super) {
             'sd-input--disabled': this.props.disabled,
             'sd-input--invalid': this.props.invalid || this.state.invalid,
         });
+        var labelClasses = classnames_1.default('sd-input__label', {
+            'a11y-only': this.props.labelHidden,
+        });
         return (React.createElement("div", { className: classes },
-            this.props.label ?
-                React.createElement("label", { className: 'sd-input__label', htmlFor: this.htmlId }, this.props.label) : null,
+            React.createElement("label", { className: labelClasses, htmlFor: this.htmlId }, this.props.label),
             React.createElement("select", { className: 'sd-input__select', id: this.htmlId, value: this.state.value, "aria-label": this.props.label, "aria-describedby": this.htmlId, onChange: this.handleChange, disabled: this.props.disabled }, this.props.children),
             React.createElement("div", { className: 'sd-input__message-box' },
                 this.props.info && !this.props.invalid && !this.state.invalid ?
@@ -71953,7 +71984,6 @@ exports.Dropdown = function (_a) {
                     if (toggleRef && menuRef) {
                         core_1.createPopper(toggleRef, menuRef, {
                             placement: checkAlign() ? 'bottom-end' : 'bottom-start',
-                            strategy: 'fixed',
                         });
                         menuRef.style.display = 'block';
                     }
@@ -72186,7 +72216,7 @@ function getClippingParents(element) {
 
 
   return clippingParents.filter(function (clippingParent) {
-    return Object(__WEBPACK_IMPORTED_MODULE_7__instanceOf_js__["a" /* isElement */])(clippingParent) && Object(__WEBPACK_IMPORTED_MODULE_10__contains_js__["a" /* default */])(clippingParent, clipperElement) && Object(__WEBPACK_IMPORTED_MODULE_11__getNodeName_js__["a" /* default */])(clippingParent) !== 'body' && (canEscapeClipping ? Object(__WEBPACK_IMPORTED_MODULE_6__getComputedStyle_js__["a" /* default */])(clippingParent).position !== 'static' : true);
+    return Object(__WEBPACK_IMPORTED_MODULE_7__instanceOf_js__["a" /* isElement */])(clippingParent) && Object(__WEBPACK_IMPORTED_MODULE_10__contains_js__["a" /* default */])(clippingParent, clipperElement) && Object(__WEBPACK_IMPORTED_MODULE_11__getNodeName_js__["a" /* default */])(clippingParent) !== 'body';
   });
 } // Gets the maximum area that the element is visible in due to any number of
 // clipping parents
@@ -72808,7 +72838,7 @@ exports.Tag = function (_a) {
         _b["tag-label--" + shade] = shade && shade !== 'light',
         _b['tag-label--square'] = shape === 'square',
         _b));
-    return (React.createElement("div", { className: classes, key: keyValue },
+    return (React.createElement("span", { className: classes, key: keyValue },
         text,
         !readOnly ? React.createElement("button", { className: 'tag-label__remove', onClick: onClick },
             React.createElement("i", { className: 'icon-close-small' })) : null));
@@ -100678,7 +100708,7 @@ var _self = (typeof window !== 'undefined')
 var Prism = (function (_self) {
 
 	// Private helper vars
-	var lang = /\blang(?:uage)?-([\w-]+)\b/i;
+	var lang = /(?:^|\s)lang(?:uage)?-([\w-]+)(?=\s|$)/i;
 	var uniqueId = 0;
 
 	// The grammar object for plaintext
@@ -100708,6 +100738,27 @@ var Prism = (function (_self) {
 		 * @public
 		 */
 		manual: _self.Prism && _self.Prism.manual,
+		/**
+		 * By default, if Prism is in a web worker, it assumes that it is in a worker it created itself, so it uses
+		 * `addEventListener` to communicate with its parent instance. However, if you're using Prism manually in your
+		 * own worker, you don't want it to do this.
+		 *
+		 * By setting this value to `true`, Prism will not add its own listeners to the worker.
+		 *
+		 * You obviously have to change this value before Prism executes. To do this, you can add an
+		 * empty Prism object into the global scope before loading the Prism script like this:
+		 *
+		 * ```js
+		 * window.Prism = window.Prism || {};
+		 * Prism.disableWorkerMessageHandler = true;
+		 * // Load Prism's script
+		 * ```
+		 *
+		 * @default false
+		 * @type {boolean}
+		 * @memberof Prism
+		 * @public
+		 */
 		disableWorkerMessageHandler: _self.Prism && _self.Prism.disableWorkerMessageHandler,
 
 		/**
@@ -100822,15 +100873,33 @@ var Prism = (function (_self) {
 			 * @returns {string}
 			 */
 			getLanguage: function (element) {
-				while (element && !lang.test(element.className)) {
+				while (element) {
+					var m = lang.exec(element.className);
+					if (m) {
+						return m[1].toLowerCase();
+					}
 					element = element.parentElement;
 				}
-				if (element) {
-					return (element.className.match(lang) || [, 'none'])[1].toLowerCase();
-				}
 				return 'none';
 			},
 
+			/**
+			 * Sets the Prism `language-xxxx` class of the given element.
+			 *
+			 * @param {Element} element
+			 * @param {string} language
+			 * @returns {void}
+			 */
+			setLanguage: function (element, language) {
+				// remove all `language-xxxx` classes
+				// (this might leave behind a leading space)
+				element.className = element.className.replace(RegExp(lang, 'gi'), '');
+
+				// add the new `language-xxxx` class
+				// (using `classList` will automatically clean up spaces for us)
+				element.classList.add('language-' + language);
+			},
+
 			/**
 			 * Returns the script element that is currently executing.
 			 *
@@ -101185,12 +101254,12 @@ var Prism = (function (_self) {
 			var grammar = _.languages[language];
 
 			// Set language on the element, if not present
-			element.className = element.className.replace(lang, '').replace(/\s+/g, ' ') + ' language-' + language;
+			_.util.setLanguage(element, language);
 
 			// Set language on the parent, for styling
 			var parent = element.parentElement;
 			if (parent && parent.nodeName.toLowerCase() === 'pre') {
-				parent.className = parent.className.replace(lang, '').replace(/\s+/g, ' ') + ' language-' + language;
+				_.util.setLanguage(parent, language);
 			}
 
 			var code = element.textContent;
@@ -101279,6 +101348,9 @@ var Prism = (function (_self) {
 				language: language
 			};
 			_.hooks.run('before-tokenize', env);
+			if (!env.grammar) {
+				throw new Error('The language "' + env.language + '" has no grammar.');
+			}
 			env.tokens = _.tokenize(env.code, env.grammar);
 			_.hooks.run('after-tokenize', env);
 			return Token.stringify(_.util.encode(env.tokens), env.language);
@@ -101585,7 +101657,7 @@ var Prism = (function (_self) {
 
 					if (greedy) {
 						match = matchPattern(pattern, pos, text, lookbehind);
-						if (!match) {
+						if (!match || match.index >= text.length) {
 							break;
 						}
 
@@ -102161,14 +102233,14 @@ Prism.languages.clike = {
 		greedy: true
 	},
 	'class-name': {
-		pattern: /(\b(?:class|interface|extends|implements|trait|instanceof|new)\s+|\bcatch\s+\()[\w.\\]+/i,
+		pattern: /(\b(?:class|extends|implements|instanceof|interface|new|trait)\s+|\bcatch\s+\()[\w.\\]+/i,
 		lookbehind: true,
 		inside: {
 			'punctuation': /[.\\]/
 		}
 	},
-	'keyword': /\b(?:if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\b/,
-	'boolean': /\b(?:true|false)\b/,
+	'keyword': /\b(?:break|catch|continue|do|else|finally|for|function|if|in|instanceof|new|null|return|throw|try|while)\b/,
+	'boolean': /\b(?:false|true)\b/,
 	'function': /\b\w+(?=\()/,
 	'number': /\b0x[\da-f]+\b|(?:\b\d+(?:\.\d*)?|\B\.\d+)(?:e[+-]?\d+)?/i,
 	'operator': /[<>]=?|[!=]=?=?|--?|\+\+?|&&?|\|\|?|[?*/~^%]/,
@@ -102184,7 +102256,7 @@ Prism.languages.javascript = Prism.languages.extend('clike', {
 	'class-name': [
 		Prism.languages.clike['class-name'],
 		{
-			pattern: /(^|[^$\w\xA0-\uFFFF])(?!\s)[_$A-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\.(?:prototype|constructor))/,
+			pattern: /(^|[^$\w\xA0-\uFFFF])(?!\s)[_$A-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\.(?:constructor|prototype))/,
 			lookbehind: true
 		}
 	],
@@ -102200,11 +102272,38 @@ Prism.languages.javascript = Prism.languages.extend('clike', {
 	],
 	// Allow for all non-ASCII characters (See http://stackoverflow.com/a/2008444)
 	'function': /#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*(?:\.\s*(?:apply|bind|call)\s*)?\()/,
-	'number': /\b(?:(?:0[xX](?:[\dA-Fa-f](?:_[\dA-Fa-f])?)+|0[bB](?:[01](?:_[01])?)+|0[oO](?:[0-7](?:_[0-7])?)+)n?|(?:\d(?:_\d)?)+n|NaN|Infinity)\b|(?:\b(?:\d(?:_\d)?)+\.?(?:\d(?:_\d)?)*|\B\.(?:\d(?:_\d)?)+)(?:[Ee][+-]?(?:\d(?:_\d)?)+)?/,
+	'number': {
+		pattern: RegExp(
+			/(^|[^\w$])/.source +
+			'(?:' +
+			(
+				// constant
+				/NaN|Infinity/.source +
+				'|' +
+				// binary integer
+				/0[bB][01]+(?:_[01]+)*n?/.source +
+				'|' +
+				// octal integer
+				/0[oO][0-7]+(?:_[0-7]+)*n?/.source +
+				'|' +
+				// hexadecimal integer
+				/0[xX][\dA-Fa-f]+(?:_[\dA-Fa-f]+)*n?/.source +
+				'|' +
+				// decimal bigint
+				/\d+(?:_\d+)*n/.source +
+				'|' +
+				// decimal number (integer or float) but no bigint
+				/(?:\d+(?:_\d+)*(?:\.(?:\d+(?:_\d+)*)?)?|\.\d+(?:_\d+)*)(?:[Ee][+-]?\d+(?:_\d+)*)?/.source
+			) +
+			')' +
+			/(?![\w$])/.source
+		),
+		lookbehind: true
+	},
 	'operator': /--|\+\+|\*\*=?|=>|&&=?|\|\|=?|[!=]==|<<=?|>>>?=?|[-+*/%&|^!=<>]=?|\.{3}|\?\?=?|\?\.?|[~:]/
 });
 
-Prism.languages.javascript['class-name'][0].pattern = /(\b(?:class|interface|extends|implements|instanceof|new)\s+)[\w.\\]+/;
+Prism.languages.javascript['class-name'][0].pattern = /(\b(?:class|extends|implements|instanceof|interface|new)\s+)[\w.\\]+/;
 
 Prism.languages.insertBefore('javascript', 'keyword', {
 	'regex': {
@@ -102280,9 +102379,23 @@ Prism.languages.insertBefore('javascript', 'string', {
 			},
 			'string': /[\s\S]+/
 		}
+	},
+	'string-property': {
+		pattern: /((?:^|[,{])[ \t]*)(["'])(?:\\(?:\r\n|[\s\S])|(?!\2)[^\\\r\n])*\2(?=\s*:)/m,
+		lookbehind: true,
+		greedy: true,
+		alias: 'property'
 	}
 });
 
+Prism.languages.insertBefore('javascript', 'operator', {
+	'literal-property': {
+		pattern: /((?:^|[,{])[ \t]*)(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*:)/m,
+		lookbehind: true,
+		alias: 'property'
+	},
+});
+
 if (Prism.languages.markup) {
 	Prism.languages.markup.tag.addInlined('script', 'javascript');
 
@@ -102338,21 +102451,57 @@ Prism.languages.js = Prism.languages.javascript;
 	var SELECTOR = 'pre[data-src]:not([' + STATUS_ATTR + '="' + STATUS_LOADED + '"])'
 		+ ':not([' + STATUS_ATTR + '="' + STATUS_LOADING + '"])';
 
-	var lang = /\blang(?:uage)?-([\w-]+)\b/i;
-
 	/**
-	 * Sets the Prism `language-xxxx` or `lang-xxxx` class to the given language.
+	 * Loads the given file.
 	 *
-	 * @param {HTMLElement} element
-	 * @param {string} language
-	 * @returns {void}
+	 * @param {string} src The URL or path of the source file to load.
+	 * @param {(result: string) => void} success
+	 * @param {(reason: string) => void} error
 	 */
-	function setLanguageClass(element, language) {
-		var className = element.className;
-		className = className.replace(lang, ' ') + ' language-' + language;
-		element.className = className.replace(/\s+/g, ' ').trim();
+	function loadFile(src, success, error) {
+		var xhr = new XMLHttpRequest();
+		xhr.open('GET', src, true);
+		xhr.onreadystatechange = function () {
+			if (xhr.readyState == 4) {
+				if (xhr.status < 400 && xhr.responseText) {
+					success(xhr.responseText);
+				} else {
+					if (xhr.status >= 400) {
+						error(FAILURE_MESSAGE(xhr.status, xhr.statusText));
+					} else {
+						error(FAILURE_EMPTY_MESSAGE);
+					}
+				}
+			}
+		};
+		xhr.send(null);
 	}
 
+	/**
+	 * Parses the given range.
+	 *
+	 * This returns a range with inclusive ends.
+	 *
+	 * @param {string | null | undefined} range
+	 * @returns {[number, number | undefined] | undefined}
+	 */
+	function parseRange(range) {
+		var m = /^\s*(\d+)\s*(?:(,)\s*(?:(\d+)\s*)?)?$/.exec(range || '');
+		if (m) {
+			var start = Number(m[1]);
+			var comma = m[2];
+			var end = m[3];
+
+			if (!comma) {
+				return [start, start];
+			}
+			if (!end) {
+				return [start, undefined];
+			}
+			return [start, Number(end)];
+		}
+		return undefined;
+	}
 
 	Prism.hooks.add('before-highlightall', function (env) {
 		env.selector += ', ' + SELECTOR;
@@ -102380,8 +102529,8 @@ Prism.languages.js = Prism.languages.javascript;
 			}
 
 			// set language classes
-			setLanguageClass(code, language);
-			setLanguageClass(pre, language);
+			Prism.util.setLanguage(code, language);
+			Prism.util.setLanguage(pre, language);
 
 			// preload the language
 			var autoloader = Prism.plugins.autoloader;
@@ -102390,31 +102539,45 @@ Prism.languages.js = Prism.languages.javascript;
 			}
 
 			// load file
-			var xhr = new XMLHttpRequest();
-			xhr.open('GET', src, true);
-			xhr.onreadystatechange = function () {
-				if (xhr.readyState == 4) {
-					if (xhr.status < 400 && xhr.responseText) {
-						// mark as loaded
-						pre.setAttribute(STATUS_ATTR, STATUS_LOADED);
-
-						// highlight code
-						code.textContent = xhr.responseText;
-						Prism.highlightElement(code);
-
-					} else {
-						// mark as failed
-						pre.setAttribute(STATUS_ATTR, STATUS_FAILED);
-
-						if (xhr.status >= 400) {
-							code.textContent = FAILURE_MESSAGE(xhr.status, xhr.statusText);
-						} else {
-							code.textContent = FAILURE_EMPTY_MESSAGE;
+			loadFile(
+				src,
+				function (text) {
+					// mark as loaded
+					pre.setAttribute(STATUS_ATTR, STATUS_LOADED);
+
+					// handle data-range
+					var range = parseRange(pre.getAttribute('data-range'));
+					if (range) {
+						var lines = text.split(/\r\n?|\n/g);
+
+						// the range is one-based and inclusive on both ends
+						var start = range[0];
+						var end = range[1] == null ? lines.length : range[1];
+
+						if (start < 0) { start += lines.length; }
+						start = Math.max(0, Math.min(start - 1, lines.length));
+						if (end < 0) { end += lines.length; }
+						end = Math.max(0, Math.min(end, lines.length));
+
+						text = lines.slice(start, end).join('\n');
+
+						// add data-start for line numbers
+						if (!pre.hasAttribute('data-start')) {
+							pre.setAttribute('data-start', String(start + 1));
 						}
 					}
+
+					// highlight code
+					code.textContent = text;
+					Prism.highlightElement(code);
+				},
+				function (error) {
+					// mark as failed
+					pre.setAttribute(STATUS_ATTR, STATUS_FAILED);
+
+					code.textContent = error;
 				}
-			};
-			xhr.send(null);
+			);
 		}
 	});
 
@@ -102949,7 +103112,7 @@ Prism.languages.js = Prism.languages.javascript;
 			greedy: true,
 			inside: {
 				'punctuation': /^---|---$/,
-				'font-matter': {
+				'front-matter': {
 					pattern: /\S+(?:\s+\S+)*/,
 					alias: ['yaml', 'language-yaml'],
 					inside: Prism.languages.yaml
@@ -103364,8 +103527,8 @@ Prism.languages.js = Prism.languages.javascript;
 		/<\/?(?:[\w.:-]+(?:<S>+(?:[\w.:$-]+(?:=(?:"(?:\\[\s\S]|[^\\"])*"|'(?:\\[\s\S]|[^\\'])*'|[^\s{'"/>=]+|<BRACES>))?|<SPREAD>))*<S>*\/?)?>/.source
 	);
 
-	Prism.languages.jsx.tag.inside['tag'].pattern = /^<\/?[^\s>\/]*/i;
-	Prism.languages.jsx.tag.inside['attr-value'].pattern = /=(?!\{)(?:"(?:\\[\s\S]|[^\\"])*"|'(?:\\[\s\S]|[^\\'])*'|[^\s'">]+)/i;
+	Prism.languages.jsx.tag.inside['tag'].pattern = /^<\/?[^\s>\/]*/;
+	Prism.languages.jsx.tag.inside['attr-value'].pattern = /=(?!\{)(?:"(?:\\[\s\S]|[^\\"])*"|'(?:\\[\s\S]|[^\\'])*'|[^\s'">]+)/;
 	Prism.languages.jsx.tag.inside['tag'].inside['class-name'] = /^[A-Z]\w*(?:\.[A-Z]\w*)*$/;
 	Prism.languages.jsx.tag.inside['comment'] = javascript['comment'];
 
@@ -103380,6 +103543,7 @@ Prism.languages.js = Prism.languages.javascript;
 		'script': {
 			// Allow for two levels of nesting
 			pattern: re(/=<BRACES>/.source),
+			alias: 'language-javascript',
 			inside: {
 				'script-punctuation': {
 					pattern: /^=(?=\{)/,
@@ -103387,7 +103551,6 @@ Prism.languages.js = Prism.languages.javascript;
 				},
 				rest: Prism.languages.jsx
 			},
-			'alias': 'language-javascript'
 		}
 	}, Prism.languages.jsx.tag);
 
@@ -104863,7 +105026,7 @@ var InputsDoc = /** @class */ (function (_super) {
             React.createElement("p", { className: 'docs-page__paragraph' }),
             React.createElement(Markup.ReactMarkup, null,
                 React.createElement(Markup.ReactMarkupPreview, null,
-                    React.createElement("div", { className: 'docs-page__content-row docs-page__content-row--no-margin' },
+                    React.createElement("div", { className: 'docs-page__content-row' },
                         React.createElement("div", { className: 'form__row' },
                             React.createElement(app_typescript_1.CheckGroup, null,
                                 React.createElement(app_typescript_1.Checkbox, { checked: this.state.required, label: { text: 'Required input' }, onChange: function (value) { _this.setState({ required: value }); } }),
@@ -104871,7 +105034,11 @@ var InputsDoc = /** @class */ (function (_super) {
                                 React.createElement(app_typescript_1.Checkbox, { checked: this.state.invalid, label: { text: 'Invalid input' }, onChange: function (value) { _this.setState({ invalid: value }); } }),
                                 React.createElement(app_typescript_1.Checkbox, { checked: this.state.inlineLabel, label: { text: 'Label positioned inline' }, onChange: function (value) { _this.setState({ inlineLabel: value }); } }))),
                         React.createElement("div", { className: 'form__row' },
-                            React.createElement(app_typescript_1.Input, { label: 'Input label', value: 'This is some value', maxLength: 30, error: 'This is error message', info: 'This is some hint message', inlineLabel: this.state.inlineLabel, required: this.state.required, disabled: this.state.disabled, invalid: this.state.invalid, onChange: function (value) { } })))),
+                            React.createElement(app_typescript_1.Input, { label: 'Input label', value: 'This is the value', maxLength: 30, error: 'This is error message', info: 'This is some hint message', inlineLabel: this.state.inlineLabel, required: this.state.required, disabled: this.state.disabled, invalid: this.state.invalid, onChange: function (value) { } }))),
+                    React.createElement("div", { className: 'docs-page__content-row docs-page__content-row--no-margin' },
+                        React.createElement("p", { className: "docs-page__paragraph" }, "// Hidden label"),
+                        React.createElement("div", { className: 'form__row' },
+                            React.createElement(app_typescript_1.Input, { label: 'Hidden input label', value: 'Lorem ipsum input', maxLength: 30, error: 'This is an error message', info: 'This is a hint message', inlineLabel: true, labelHidden: true, required: false, disabled: false, invalid: false, onChange: function (value) { } })))),
                 React.createElement(Markup.ReactMarkupCode, null, "\n                        <Input label='Input label'\n                            value='This is some value'\n                            maxLength={30}\n                            error='This is error message'\n                            info='This is some hint message'\n                            inlineLabel={false}\n                            required={true}\n                            disabled={false}\n                            invalid={false}\n                            onChange={(value) => {}} />\n                    ")),
             React.createElement("h3", { className: 'docs-page__h3' }, "Props"),
             React.createElement(app_typescript_1.PropsList, null,
@@ -104881,6 +105048,7 @@ var InputsDoc = /** @class */ (function (_super) {
                 React.createElement(app_typescript_1.Prop, { name: 'info', isRequired: false, type: 'string', default: '/', description: 'Hint text' }),
                 React.createElement(app_typescript_1.Prop, { name: 'error', isRequired: false, type: 'string', default: '/', description: 'Error text' }),
                 React.createElement(app_typescript_1.Prop, { name: 'inlineLabel', isRequired: false, type: 'boolean', default: 'false', description: 'Position labels as inline' }),
+                React.createElement(app_typescript_1.Prop, { name: 'labelHidden', isRequired: false, type: 'boolean', default: 'false', description: 'Hide the label. The label will still be accessible to screen-readers.' }),
                 React.createElement(app_typescript_1.Prop, { name: 'required', isRequired: false, type: 'boolean', default: 'false', description: 'Mark field as required' }),
                 React.createElement(app_typescript_1.Prop, { name: 'disabled', isRequired: false, type: 'boolean', default: 'false', description: 'Mark field as disabled' }),
                 React.createElement(app_typescript_1.Prop, { name: 'invalid', isRequired: false, type: 'boolean', default: 'false', description: 'Mark field as invalid' }))));
@@ -105131,7 +105299,7 @@ var InputsDoc = /** @class */ (function (_super) {
             React.createElement("p", { className: 'docs-page__paragraph' }),
             React.createElement(Markup.ReactMarkup, null,
                 React.createElement(Markup.ReactMarkupPreview, null,
-                    React.createElement("div", { className: 'docs-page__content-row docs-page__content-row--no-margin' },
+                    React.createElement("div", { className: 'docs-page__content-row' },
                         React.createElement("div", { className: 'form__row' },
                             React.createElement(app_typescript_1.CheckGroup, null,
                                 React.createElement(app_typescript_1.Checkbox, { checked: this.state.required, label: { text: 'Required input' }, onChange: function (value) { _this.setState({ required: value }); } }),
@@ -105141,7 +105309,15 @@ var InputsDoc = /** @class */ (function (_super) {
                         React.createElement("div", { className: 'form__row' },
                             React.createElement(app_typescript_1.Select, { label: 'Select label', value: 'Option 2', error: 'This is error message', info: 'This is some hint message', inlineLabel: this.state.inlineLabel, required: this.state.required, disabled: this.state.disabled, invalid: this.state.invalid, onChange: function (value) { console.log(value); } },
                                 React.createElement(app_typescript_1.Option, null, "Option 1"),
-                                React.createElement(app_typescript_1.Option, null, "Option 2"))))),
+                                React.createElement(app_typescript_1.Option, null, "Option 2")))),
+                    React.createElement("div", { className: 'docs-page__content-row docs-page__content-row--no-margin' },
+                        React.createElement("p", { className: "docs-page__paragraph" }, "// Hidden label"),
+                        React.createElement("div", { className: 'form__row' },
+                            React.createElement(app_typescript_1.Select, { label: 'Hidden select label', value: 'Option 1', error: 'Error message', info: 'This is a hint message', inlineLabel: true, labelHidden: true, required: false, disabled: false, invalid: this.state.invalid, onChange: function (value) { console.log(value); } },
+                                React.createElement(app_typescript_1.Option, null, "Option 1"),
+                                React.createElement(app_typescript_1.Option, null, "Option 2"),
+                                React.createElement(app_typescript_1.Option, null, "Option 3"),
+                                React.createElement(app_typescript_1.Option, null, "Option 4"))))),
                 React.createElement(Markup.ReactMarkupCode, null, "\n                        <Select label='Select label'\n                            value='Option 2'\n                            error='This is error message'\n                            info='This is some hint message'\n                            inlineLabel={false}\n                            required={true}\n                            disabled={false}\n                            invalid={false}\n                            onChange={(value) => {}}>\n                            <Option value=\"option-1\">Option 1</option>\n                            <Option value=\"option-2\">Option 2</option>\n                        </Select>\n                    ")),
             React.createElement("h3", { className: 'docs-page__h3' }, "Props"),
             React.createElement(app_typescript_1.PropsList, null,
@@ -105150,6 +105326,7 @@ var InputsDoc = /** @class */ (function (_super) {
                 React.createElement(app_typescript_1.Prop, { name: 'info', isRequired: false, type: 'string', default: '/', description: 'Hint text' }),
                 React.createElement(app_typescript_1.Prop, { name: 'error', isRequired: false, type: 'string', default: '/', description: 'Error text' }),
                 React.createElement(app_typescript_1.Prop, { name: 'inlineLabel', isRequired: false, type: 'boolean', default: 'false', description: 'Position labels as inline' }),
+                React.createElement(app_typescript_1.Prop, { name: 'labelHidden', isRequired: false, type: 'boolean', default: 'false', description: 'Hide the label. The label will still be accessible to screen-readers.' }),
                 React.createElement(app_typescript_1.Prop, { name: 'required', isRequired: false, type: 'boolean', default: 'false', description: 'Mark field as required' }),
                 React.createElement(app_typescript_1.Prop, { name: 'disabled', isRequired: false, type: 'boolean', default: 'false', description: 'Mark field as disabled' }),
                 React.createElement(app_typescript_1.Prop, { name: 'invalid', isRequired: false, type: 'boolean', default: 'false', description: 'Mark field as invalid' }))));
@@ -110746,7 +110923,18 @@ var SamsPlayground = /** @class */ (function (_super) {
                                     React.createElement(index_1.Badge, { text: item.urgency, color: item.urgencyColor }),
                                     React.createElement(index_1.Badge, { text: item.priority, shape: 'square', color: item.priorityColor })),
                                 React.createElement(GridElements.GridItemFooterActions, null,
-                                    React.createElement(index_1.IconButton, { icon: 'dots-vertical', ariaValue: 'More actions', onClick: function () { return _this.changeStatus(item, 'archived'); } }))));
+                                    React.createElement(index_1.Dropdown, { align: 'right', append: true, items: [
+                                            {
+                                                type: 'group', label: 'Actions',
+                                                items: [
+                                                    'divider',
+                                                    { label: 'Edit', icon: 'pencil', onSelect: function () { return _this.setState({ dropDownState: 'Edit ' }); } },
+                                                    { label: 'Download', icon: 'download', onSelect: function () { return _this.setState({ dropDownState: 'Download' }); } },
+                                                    { label: 'Delete', icon: 'trash', onSelect: function () { return _this.setState({ dropDownState: 'Delete' }); } },
+                                                ]
+                                            }
+                                        ] },
+                                        React.createElement(index_1.IconButton, { ariaValue: 'dropdown-more-options', icon: 'dots-vertical', onClick: function () { return false; } })))));
                     }))),
                 React.createElement(Components.RightPanel, { open: this.state.openPreview },
                     React.createElement(Components.Panel, { side: 'right' },
@@ -111365,7 +111553,7 @@ exports.MenuDocs = MenuDocs;
 /* 480 */
 /***/ (function(module, exports) {
 
-module.exports = {"name":"superdesk-ui-framework","version":"2.4.16","license":"AGPL-3.0","repository":{"type":"git","url":"https://github.com/superdesk/superdesk-ui-framework.git"},"main":"dist/superdesk-ui.bundle.js","types":"react/index.d.ts","contributors":["Nemanja Pavlovic","Vladimir Stefanovic","Darko Tomic","Aleksandar Jelicic","Tomas Kikutis","Dragana Zivkovic"],"scripts":{"start":"webpack-dev-server --config tasks/webpack.dev.js","server":"webpack --watch --config tasks/webpack.prod.js && tsc-watch","build":"webpack --config tasks/webpack.prod.js && tsc && npm run lint","build-ui":"webpack && tsc && npm run lint","lint":"eslint app && tslint -c tslint.json 'app-typescript/**/*.{ts,tsx}'","prepublishOnly":"npm run build","prepublish":"patch-package"},"devDependencies":{"@types/chart.js":"^2.9.24","@types/classnames":"^2.2.9","@types/lodash":"^4.14.161","@types/react":"16.8.23","@types/react-dom":"16.8.0","@types/react-router-dom":"^5.1.2","angular":"^1.7.9","angular-animate":"^1.7.9","angular-route":"^1.7.9","babel-core":"^6.26.0","babel-loader":"^7.1.2","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-es2015":"^6.24.1","babel-preset-react":"^6.24.1","classnames":"^2.2.5","clean-webpack-plugin":"^1.0.0","code-prettify":"^0.1.0","copy-webpack-plugin":"^4.6.0","css-loader":"^2.1.1","eslint":"^4.6.1","eslint-loader":"^1.9.0","eslint-plugin-angular":"^3.1.1","eslint-plugin-react":"^7.3.0","extract-text-webpack-plugin":"^3.0.2","file-loader":"^0.11.2","html-loader":"^0.5.1","html-webpack-plugin":"^2.30.1","jquery":"^3.1.1","jquery-ui":"^1.12.1","lodash":"4.17.21","node-sass":"^4.5.3","patch-package":"6.2.0","prismjs":"^1.17.1","prop-types":"^15.6.0","react":"16.8.6","react-bootstrap":"^0.31.2","react-dom":"16.8.6","react-redux":"^5.0.6","react-router-dom":"^5.1.2","redux":"^3.7.2","redux-form":"^7.0.4","sass-loader":"^6.0.6","style-loader":"^0.18.2","superdesk-code-style":"^1.1.2","ts-loader":"^6.0.2","tslint":"^5.18.0","typescript":"^3.5.1","url-loader":"^1.1.2","webpack":"^3.5.5","webpack-cli":"3.3.10","webpack-dev-server":"2.11.1","webpack-merge":"^4.2.1"},"dependencies":{"@material-ui/lab":"^4.0.0-alpha.56","@popperjs/core":"^2.4.0","@superdesk/primereact":"^5.0.2-4","@types/node":"^14.10.2","chart.js":"^2.9.3","date-fns":"2.7.0","popper.js":"1.14.4","primeicons":"2.0.0","react-id-generator":"^3.0.0","react-popper":"^2.2.3"}}
+module.exports = {"name":"superdesk-ui-framework","version":"2.4.19","license":"AGPL-3.0","repository":{"type":"git","url":"https://github.com/superdesk/superdesk-ui-framework.git"},"main":"dist/superdesk-ui.bundle.js","types":"react/index.d.ts","contributors":["Nemanja Pavlovic","Vladimir Stefanovic","Darko Tomic","Aleksandar Jelicic","Tomas Kikutis","Dragana Zivkovic"],"scripts":{"start":"webpack-dev-server --config tasks/webpack.dev.js","server":"webpack --watch --config tasks/webpack.prod.js && tsc-watch","build":"webpack --config tasks/webpack.prod.js && tsc && npm run lint","build-ui":"webpack && tsc && npm run lint","lint":"eslint app && tslint -c tslint.json 'app-typescript/**/*.{ts,tsx}'","prepublishOnly":"npm run build","prepublish":"patch-package"},"devDependencies":{"@types/chart.js":"^2.9.24","@types/classnames":"^2.2.9","@types/lodash":"^4.14.161","@types/react":"16.8.23","@types/react-dom":"16.8.0","@types/react-router-dom":"^5.1.2","angular":"^1.7.9","angular-animate":"^1.7.9","angular-route":"^1.7.9","babel-core":"^6.26.0","babel-loader":"^7.1.2","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-es2015":"^6.24.1","babel-preset-react":"^6.24.1","classnames":"^2.2.5","clean-webpack-plugin":"^1.0.0","code-prettify":"^0.1.0","copy-webpack-plugin":"^4.6.0","css-loader":"^2.1.1","eslint":"^4.6.1","eslint-loader":"^1.9.0","eslint-plugin-angular":"^3.1.1","eslint-plugin-react":"^7.3.0","extract-text-webpack-plugin":"^3.0.2","file-loader":"^0.11.2","html-loader":"^0.5.1","html-webpack-plugin":"^2.30.1","jquery":"^3.1.1","jquery-ui":"^1.12.1","lodash":"4.17.21","node-sass":"^4.5.3","patch-package":"6.2.0","prismjs":"^1.17.1","prop-types":"^15.6.0","react":"16.8.6","react-bootstrap":"^0.31.2","react-dom":"16.8.6","react-redux":"^5.0.6","react-router-dom":"^5.1.2","redux":"^3.7.2","redux-form":"^7.0.4","sass-loader":"^6.0.6","style-loader":"^0.18.2","superdesk-code-style":"^1.1.2","ts-loader":"^6.0.2","tslint":"^5.18.0","typescript":"^3.5.1","url-loader":"^1.1.2","webpack":"^3.5.5","webpack-cli":"3.3.10","webpack-dev-server":"2.11.1","webpack-merge":"^4.2.1"},"dependencies":{"@material-ui/lab":"^4.0.0-alpha.56","@popperjs/core":"^2.4.0","@superdesk/primereact":"^5.0.2-4","@types/node":"^14.10.2","chart.js":"^2.9.3","date-fns":"2.7.0","popper.js":"1.14.4","primeicons":"2.0.0","react-id-generator":"^3.0.0","react-popper":"^2.2.3"}}
 
 /***/ }),
 /* 481 */

package/dist/playgrounds/react-playgrounds/SamsPlayground.tsx

@@ -228,7 +228,20 @@ export class SamsPlayground extends React.Component<IProps, IState> {
                                             <Badge text={item.priority} shape='square' color={item.priorityColor} />
                                         </GridElements.GridItemFooterBlock>
                                         <GridElements.GridItemFooterActions>
-                                            <IconButton icon='dots-vertical' ariaValue='More actions' onClick={()=> this.changeStatus(item, 'archived')} />
+                                            <Dropdown
+                                                align = 'right'
+                                                append = {true}
+                                                items={[
+                                                    {
+                                                        type: 'group', label: 'Actions', items: [
+                                                            'divider',
+                                                            { label: 'Edit', icon: 'pencil', onSelect: () => this.setState({ dropDownState: 'Edit ' }) },
+                                                            { label: 'Download', icon: 'download', onSelect: () => this.setState({ dropDownState: 'Download' }) },
+                                                            { label: 'Delete', icon: 'trash', onSelect: () => this.setState({ dropDownState: 'Delete' }) },
+                                                        ]
+                                                    }]}>
+                                                <IconButton ariaValue='dropdown-more-options' icon='dots-vertical' onClick={() => false} />
+                                            </Dropdown>
                                         </GridElements.GridItemFooterActions>
                                     </GridElements.GridItemFooter>
                                 </GridElements.GridItem>