@splunk/visualizations 25.2.0 → 25.3.0

package/Markdown.js

@@ -87,7 +87,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 394);
+/******/ 	return __webpack_require__(__webpack_require__.s = 400);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -95,14 +95,14 @@ module.exports =
 /***/ 0:
 /***/ (function(module, exports) {
 
-module.exports = require("prop-types");
+module.exports = require("react");
 
 /***/ }),
 
 /***/ 1:
 /***/ (function(module, exports) {
 
-module.exports = require("react");
+module.exports = require("prop-types");
 
 /***/ }),
 
@@ -151,7 +151,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var React = __webpack_require__(1);
+var React = __webpack_require__(0);
 
 var styled_components_1 = __webpack_require__(4);
 
@@ -216,7 +216,7 @@ var withFixedSizeContainer = function withFixedSizeContainer(Viz) {
 
     return React.createElement(FixSizeItem, {
       "data-test": "fix-size-item",
-      "data-splunk-visualization-version": "25.2.0 - 4373c5a66",
+      "data-splunk-visualization-version": "25.3.0 - dae70ec02",
       width: width,
       height: height,
       backgroundColor: backgroundColor
@@ -277,18 +277,20 @@ exports.extendStaticWrapperProps = extendStaticWrapperProps;
 "use strict";
 
 
-var _taggedTemplateLiteral = __webpack_require__(85);
+var _taggedTemplateLiteral = __webpack_require__(86);
 
 var _templateObject;
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getFontMap = exports.config = exports.themes = exports.computeVizProps = void 0;
+exports.getFontMap = exports.config = exports.themes = exports.computeVizProps = exports.FONT_SIZES = void 0;
 
 var lodash_1 = __webpack_require__(3);
 
-var React = __webpack_require__(1);
+var types_1 = __webpack_require__(81);
+
+var React = __webpack_require__(0);
 
 var style_1 = __webpack_require__(15);
 
@@ -296,25 +298,25 @@ var Markdown_1 = __webpack_require__(109);
 
 var styled_components_1 = __webpack_require__(4);
 
-var T = __webpack_require__(0);
+var T = __webpack_require__(1);
 
 var themes_1 = __webpack_require__(69);
 
-var Heading_1 = __webpack_require__(395);
+var Heading_1 = __webpack_require__(401);
 
 var Paragraph_1 = __webpack_require__(114);
 
-var List_1 = __webpack_require__(396);
+var List_1 = __webpack_require__(402);
 
-var Code_1 = __webpack_require__(397);
+var Code_1 = __webpack_require__(403);
 
 var withDashboardViz_1 = __webpack_require__(32);
 
-var config_1 = __webpack_require__(398);
+var config_1 = __webpack_require__(404);
 
 exports.config = config_1.default; // map of valid font sizes with elements' respective pixel sizes
 
-var FONT_SIZES = {
+exports.FONT_SIZES = {
   extraSmall: {
     h1: 18,
     h2: 14,
@@ -369,7 +371,7 @@ var MarkdownContainer = styled_components_1.default.div.withConfig({
 var CodeBlockContainer = styled_components_1.default.div.withConfig({
   displayName: "Markdown__CodeBlockContainer",
   componentId: "zd3qkg-1"
-})(["padding:", ";margin:", " 0;background-color:", ";pre[data-test='code']{margin-bottom:0px;}code{font-size:", "px !important;}"], themes_1.pick({
+})(["padding:", ";margin:", " 0;background-color:", ";pre[data-test='code']{margin-bottom:0px;}code{font-size:", "px !important;line-height:", "px !important;}"], themes_1.pick({
   enterprise: themes_1.variables.spacingHalf,
   prisma: styled_components_1.css(_templateObject || (_templateObject = _taggedTemplateLiteral(["10px ", ""])), themes_1.variables.spacingLarge)
 }), themes_1.pick({
@@ -383,6 +385,8 @@ var CodeBlockContainer = styled_components_1.default.div.withConfig({
   prisma: themes_1.variables.backgroundColorSection
 }), function (props) {
   return props.fontSize;
+}, function (props) {
+  return props.fontSize;
 });
 var CodeInlineContainer = styled_components_1.default.code.withConfig({
   displayName: "Markdown__CodeInlineContainer",
@@ -399,12 +403,12 @@ var CodeInlineContainer = styled_components_1.default.code.withConfig({
 var getFontMap = function getFontMap(fontSize) {
   var font = fontSize;
 
-  if (!FONT_SIZES[fontSize]) {
+  if (!exports.FONT_SIZES[fontSize] && fontSize !== 'custom') {
     console.error("'".concat(fontSize, "' is not a valid value for Markdown's fontSize option. Using the 'default' font size."));
     font = 'default';
   }
 
-  return FONT_SIZES[font];
+  return exports.FONT_SIZES[font];
 };
 
 exports.getFontMap = getFontMap;
@@ -418,15 +422,25 @@ var StyledA = styled_components_1.default.a.withConfig({
   componentId: "zd3qkg-3"
 })(["text-decoration:underlined;"]); // returns renderers customized with the appropriate font sizes given the provided `fontSize` value.
 
-var getMarkdownRenderer = function getMarkdownRenderer(fontSize) {
+var getMarkdownRenderer = function getMarkdownRenderer(fontSize, customFontSize) {
+  // defaults to customFontSize of 14px if value is invalid
+  var cleanedCustomFontSize = types_1.isNumber(customFontSize) ? customFontSize : 14;
+  var isCustomFontSize = fontSize === 'custom';
   /* eslint-disable react/display-name, react/prop-types */
-  var fontMap = getFontMap(fontSize);
+
+  var fontMap = isCustomFontSize ? {
+    h1: cleanedCustomFontSize * 2.0,
+    h2: cleanedCustomFontSize * 1.5,
+    h3: cleanedCustomFontSize * 1.25,
+    p: cleanedCustomFontSize
+  } : getFontMap(fontSize);
   return {
     paragraphRenderer: function paragraphRenderer(_ref2) {
       var children = _ref2.children;
       return React.createElement(Paragraph_1.default, {
         style: {
-          fontSize: fontMap.p
+          fontSize: fontMap.p,
+          lineHeight: "".concat(fontMap.p, "px")
         }
       }, children);
     },
@@ -446,7 +460,8 @@ var getMarkdownRenderer = function getMarkdownRenderer(fontSize) {
           nodeKey = _ref4.nodeKey;
       return React.createElement(List_1.default.Item, {
         style: {
-          fontSize: fontMap.p
+          fontSize: fontMap.p,
+          lineHeight: "".concat(fontMap.p, "px")
         },
         key: nodeKey
       }, children);
@@ -489,6 +504,7 @@ var MarkdownVisualization = function MarkdownVisualization(_ref8) {
       backgroundColor = _ref8.backgroundColor,
       fontColor = _ref8.fontColor,
       fontSize = _ref8.fontSize,
+      customFontSize = _ref8.customFontSize,
       hasEventHandlers = _ref8.hasEventHandlers,
       onMarkdownClick = _ref8.onMarkdownClick;
 
@@ -496,7 +512,7 @@ var MarkdownVisualization = function MarkdownVisualization(_ref8) {
 
 
   var stringifiedMarkdown = "".concat(markdown);
-  var renderersForFontSize = getMarkdownRenderer(fontSize);
+  var renderersForFontSize = getMarkdownRenderer(fontSize, customFontSize);
   return React.createElement(MarkdownContainer, {
     "data-testid": "markdown-container",
     padding: [5, 5, 5, 5],
@@ -523,6 +539,7 @@ var propTypes = {
   backgroundColor: T.string,
   fontColor: T.string,
   fontSize: T.string,
+  customFontSize: T.number,
   hasEventHandlers: T.bool,
   onMarkdownClick: T.func
 };
@@ -533,6 +550,7 @@ var defaultProps = {
   backgroundColor: 'transparent',
   fontColor: 'rgba(255, 255, 255, 0.7)',
   fontSize: 'default',
+  customFontSize: 14,
   hasEventHandlers: false,
   onMarkdownClick: function onMarkdownClick() {}
 };
@@ -677,7 +695,7 @@ exports.enhanceOptionsSchemaWithDynamicOptions = enhanceOptionsSchemaWithDynamic
  */
 
 function enhanceConfig(vizConfig) {
-  var enhancedConfig = vizConfig;
+  var enhancedConfig = Object.assign({}, vizConfig);
 
   if (vizConfig.supports.indexOf(VizBehavior_1.VizBehavior.DYNAMIC_OPTIONS) !== -1) {
     enhancedConfig.optionsSchema = enhanceOptionsSchemaWithDynamicOptions(vizConfig.optionsSchema);
@@ -685,7 +703,7 @@ function enhanceConfig(vizConfig) {
 
   enhancedConfig.editorConfig = vizConfig.editorConfig.map(function (config) {
     return Object.assign(Object.assign({}, config), {
-      open: false
+      open: config.open || false
     });
   });
   return enhancedConfig;
@@ -700,7 +718,7 @@ exports.enhanceConfig = enhanceConfig;
  */
 
 function uncollapseEditorConfig(vizConfig) {
-  var editorPanelUncollapsedConfig = vizConfig;
+  var editorPanelUncollapsedConfig = Object.assign({}, vizConfig);
   editorPanelUncollapsedConfig.editorConfig = vizConfig.editorConfig.map(function (config) {
     return Object.assign(Object.assign({}, config), {
       open: true
@@ -859,9 +877,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.shouldShowIconPlaceholder = void 0;
 
-var React = __webpack_require__(1);
+var React = __webpack_require__(0);
 
-var T = __webpack_require__(0);
+var T = __webpack_require__(1);
 
 var lodash_1 = __webpack_require__(3);
 
@@ -953,7 +971,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getSortingParams = exports.SortParamsPropTypes = void 0;
 
-var T = __webpack_require__(0);
+var T = __webpack_require__(1);
 
 var lodash_1 = __webpack_require__(3);
 
@@ -1022,7 +1040,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getPaginationParams = exports.PaginatorParamsPropTypes = void 0;
 
-var T = __webpack_require__(0);
+var T = __webpack_require__(1);
 
 var lodash_1 = __webpack_require__(3);
 
@@ -1122,7 +1140,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var React = __webpack_require__(1);
+var React = __webpack_require__(0);
 
 var lodash_1 = __webpack_require__(3);
 
@@ -1400,7 +1418,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.INITIAL_HEIGHT = exports.INITIAL_WIDTH = void 0;
 /* eslint-disable react/no-unused-prop-types,react/prefer-stateless-function */
 
-var T = __webpack_require__(0);
+var T = __webpack_require__(1);
 
 var lodash_1 = __webpack_require__(3);
 
@@ -1590,7 +1608,60 @@ exports.validSortDirs = ['asc', 'desc', 'none'];
 
 /***/ }),
 
-/***/ 394:
+/***/ 4:
+/***/ (function(module, exports) {
+
+module.exports = require("styled-components");
+
+/***/ }),
+
+/***/ 40:
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useDeepMemo = void 0;
+
+var react_1 = __webpack_require__(0);
+
+var lodash_1 = __webpack_require__(3);
+/**
+ * This hook evaluates and stores the result of a passed function and only
+ * re-evaluates the function when passed dependencies change.
+ *
+ * It is different from the internal React useMemo in the following aspects:
+ * - it only stores the last evaluated result
+ * - it uses a deep equality check to determine if dependencies have changed
+ *
+ * Inspired by apollo-client's useDeepMemo
+ *
+ * @param fn the function to be executed and
+ * @param dependencies an array of dependencies
+ */
+
+
+var useDeepMemo = function useDeepMemo(fn, dependencies) {
+  var ref = react_1.useRef();
+
+  if (!ref.current || !lodash_1.isEqual(dependencies, ref.current.dependencies)) {
+    ref.current = {
+      dependencies: dependencies,
+      value: fn()
+    };
+  }
+
+  return ref.current.value;
+};
+
+exports.useDeepMemo = useDeepMemo;
+
+/***/ }),
+
+/***/ 400:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -1633,28 +1704,28 @@ Object.defineProperty(exports, "default", {
 
 /***/ }),
 
-/***/ 395:
+/***/ 401:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/Heading");
 
 /***/ }),
 
-/***/ 396:
+/***/ 402:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/List");
 
 /***/ }),
 
-/***/ 397:
+/***/ 403:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/Code");
 
 /***/ }),
 
-/***/ 398:
+/***/ 404:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -1680,6 +1751,7 @@ var configUtils_1 = __webpack_require__(17);
 
 var BackgroundColor_1 = __webpack_require__(50);
 
+var FONT_OPTIONS = new Set(['extraSmall', 'small', 'default', 'large', 'extraLarge']);
 var dataContract = {
   requiredDataSources: [],
   optionalDataSources: [// Note: SCP-14090 disable ui for optional datasources. We may need to add it back later
@@ -1707,6 +1779,11 @@ var optionsSchema = {
     default: 'transparent',
     pattern: schemaUtils_1.COLOR_OR_TOKEN_PATTERN_WITH_RGBA
   },
+  customFontSize: {
+    description: 'Specify the font size (in pixels) you would like to use for unformatted text when `fontSize` is set to `custom`. Header elements are calculated with the following formula: h1 = 2 × `customFontSize`, h2 = 1.5 × `customFontSize`, h3 = 1.25 × `customFontSize`',
+    default: 14,
+    type: 'number'
+  },
   fontColor: {
     description: 'Specify the text color using Hex codes or RGBA values, such as "#FF0000" or "rgba(25,12,13,0.1)". The default for enterprise light is "#3c444d". The default for enterprise dark is "#FFFFFF". The default for prisma dark is "rgba(255, 255, 255, 0.7)".',
     type: 'string',
@@ -1717,7 +1794,7 @@ var optionsSchema = {
     description: 'Specify the font size you would like to use for markdown content. Font sizes range from extra small (10px for unformatted text) to extra large (18px for unformatted text) with the default being 14px for unformatted text.',
     type: 'string',
     default: 'default',
-    pattern: schemaUtils_1.getPattern(['extraSmall', 'small', 'default', 'large', 'extraLarge'])
+    pattern: schemaUtils_1.getPattern(['extraSmall', 'small', 'default', 'large', 'extraLarge', 'custom'])
   },
   markdown: {
     description: 'Add text using basic markdown syntax.',
@@ -1737,6 +1814,7 @@ var themes = {
 };
 var editorConfig = [{
   label: i18n_1._('Markdown Settings'),
+  open: true,
   layout: [[{
     label: '',
     option: 'markdown',
@@ -1775,8 +1853,23 @@ var editorConfig = [{
       }, {
         label: i18n_1._('Extra Large'),
         value: 'extraLarge'
+      }, {
+        label: i18n_1._('Custom'),
+        value: 'custom'
       }]
     }
+  }, {
+    label: i18n_1._('Custom Font Size (px)'),
+    option: 'customFontSize',
+    editor: 'editor.number',
+    editorProps: {
+      min: 0,
+      labelPosition: 'top'
+    },
+    showEditor: function showEditor(_ref) {
+      var options = _ref.options;
+      return options.fontSize && !FONT_OPTIONS.has(options.fontSize);
+    }
   }]]
 }];
 /**
@@ -1816,59 +1909,6 @@ exports.default = configUtils_1.enhanceConfig(config);
 
 /***/ }),
 
-/***/ 4:
-/***/ (function(module, exports) {
-
-module.exports = require("styled-components");
-
-/***/ }),
-
-/***/ 40:
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useDeepMemo = void 0;
-
-var react_1 = __webpack_require__(1);
-
-var lodash_1 = __webpack_require__(3);
-/**
- * This hook evaluates and stores the result of a passed function and only
- * re-evaluates the function when passed dependencies change.
- *
- * It is different from the internal React useMemo in the following aspects:
- * - it only stores the last evaluated result
- * - it uses a deep equality check to determine if dependencies have changed
- *
- * Inspired by apollo-client's useDeepMemo
- *
- * @param fn the function to be executed and
- * @param dependencies an array of dependencies
- */
-
-
-var useDeepMemo = function useDeepMemo(fn, dependencies) {
-  var ref = react_1.useRef();
-
-  if (!ref.current || !lodash_1.isEqual(dependencies, ref.current.dependencies)) {
-    ref.current = {
-      dependencies: dependencies,
-      value: fn()
-    };
-  }
-
-  return ref.current.value;
-};
-
-exports.useDeepMemo = useDeepMemo;
-
-/***/ }),
-
 /***/ 41:
 /***/ (function(module, exports, __webpack_require__) {
 
@@ -1880,9 +1920,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.MissingPropsMessage = exports.missingKeys = exports.isMissing = void 0;
 
-var React = __webpack_require__(1);
+var React = __webpack_require__(0);
 
-var T = __webpack_require__(0);
+var T = __webpack_require__(1);
 
 var i18n_1 = __webpack_require__(2);
 
@@ -1960,7 +2000,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var React = __webpack_require__(1);
+var React = __webpack_require__(0);
 
 var styled_components_1 = __webpack_require__(4);
 
@@ -1971,7 +2011,7 @@ var Cover = styled_components_1.default.div.withConfig({
   componentId: "sc-1gsbnxb-0"
 })(["position:absolute;left:0;right:0;top:0;bottom:0;"]);
 var Blocker = styled_components_1.default.div.attrs({
-  'data-splunk-visualization-version': "25.2.0 - 4373c5a66"
+  'data-splunk-visualization-version': "25.3.0 - dae70ec02"
 }).withConfig({
   displayName: "withEditModeCover__Blocker",
   componentId: "sc-1gsbnxb-1"
@@ -2013,7 +2053,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var React = __webpack_require__(1);
+var React = __webpack_require__(0);
 
 var colorUtils_1 = __webpack_require__(12);
 
@@ -2158,7 +2198,14 @@ module.exports = require("@babel/runtime/helpers/toConsumableArray");
 
 /***/ }),
 
-/***/ 85:
+/***/ 81:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/visualization-encoding/utils/types");
+
+/***/ }),
+
+/***/ 86:
 /***/ (function(module, exports) {
 
 module.exports = require("@babel/runtime/helpers/taggedTemplateLiteral");