@splunk/react-ui 4.16.3 → 4.17.0

package/TabBar.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 182);
+/******/ 	return __webpack_require__(__webpack_require__.s = 187);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -101,7 +101,7 @@ module.exports = require("prop-types");
 
 /***/ }),
 
-/***/ 12:
+/***/ 11:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -128,28 +128,21 @@ function updateReactRef(ref, current) {
 
 /***/ }),
 
-/***/ 13:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/ui-utils/id");
-
-/***/ }),
-
-/***/ 14:
+/***/ 12:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/Clickable");
 
 /***/ }),
 
-/***/ 16:
+/***/ 14:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/ScreenReaderContent");
 
 /***/ }),
 
-/***/ 182:
+/***/ 187:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -169,7 +162,7 @@ var external_prop_types_ = __webpack_require__(1);
 var external_prop_types_default = /*#__PURE__*/__webpack_require__.n(external_prop_types_);
 
 // EXTERNAL MODULE: external "@splunk/ui-utils/keyboard"
-var keyboard_ = __webpack_require__(9);
+var keyboard_ = __webpack_require__(7);
 
 // EXTERNAL MODULE: external "styled-components"
 var external_styled_components_ = __webpack_require__(3);
@@ -197,23 +190,23 @@ var Styled = external_styled_components_default.a.div.withConfig({
   },
   vertical: {
     enterprise: Object(external_styled_components_["css"])(["display:inline-block;&::before{border-right-width:1px;}"]),
-    prisma: Object(external_styled_components_["css"])(["&::before{border-bottom-width:1px;}"])
+    prisma: Object(external_styled_components_["css"])(["display:inline-block;&::before{border-right-width:1px;}"])
   }
 }));
 
 // EXTERNAL MODULE: external "@splunk/ui-utils/id"
-var id_ = __webpack_require__(13);
+var id_ = __webpack_require__(8);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/Popover"
-var Popover_ = __webpack_require__(23);
+var Popover_ = __webpack_require__(21);
 var Popover_default = /*#__PURE__*/__webpack_require__.n(Popover_);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/ScreenReaderContent"
-var ScreenReaderContent_ = __webpack_require__(16);
+var ScreenReaderContent_ = __webpack_require__(14);
 var ScreenReaderContent_default = /*#__PURE__*/__webpack_require__.n(ScreenReaderContent_);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/Clickable"
-var Clickable_ = __webpack_require__(14);
+var Clickable_ = __webpack_require__(12);
 var Clickable_default = /*#__PURE__*/__webpack_require__.n(Clickable_);
 
 // CONCATENATED MODULE: ./src/TabBar/TabStyles.ts
@@ -239,13 +232,9 @@ var StyledClickable = external_styled_components_default()(Clickable_default.a).
       var $icon = _ref.$icon;
       return $icon && Object(external_styled_components_["css"])(["text-align:center;"]);
     }),
-    // prisma falls back to horizontal layout
-    prisma: Object(external_styled_components_["css"])(["padding:", ";margin-bottom:1px;"], Object(themes_["pick"])({
-      enterprise: '3px 20px',
-      prisma: {
-        comfortable: '0 20px',
-        compact: '0 16px'
-      }
+    prisma: Object(external_styled_components_["css"])(["width:100%;right:1px;padding:", ";"], Object(themes_["pick"])({
+      comfortable: '0 20px',
+      compact: '0 16px'
     }))
   }
 }), Object(themes_["pick"])({
@@ -278,11 +267,7 @@ var StyledUnderline = external_styled_components_default.a.div.withConfig({
   })),
   vertical: {
     enterprise: Object(external_styled_components_["css"])(["width:0;height:calc(100% - 10px * 2);top:10px;right:-1px;transition:width 0.2s;"]),
-    // prisma falls back to horizontal layout
-    prisma: Object(external_styled_components_["css"])(["height:0;box-sizing:border-box;width:", ";transition:height 0.2s;"], Object(themes_["pick"])({
-      comfortable: Object(external_styled_components_["css"])(["calc(100% - 20px * 2)"]),
-      compact: Object(external_styled_components_["css"])(["calc(100% - 16px * 2)"])
-    }))
+    prisma: Object(external_styled_components_["css"])(["width:1px;height:calc(100% - 10px * 2);top:10px;right:-1px;transition:width 0.2s;box-sizing:border-box;"])
   }
 }), Object(themes_["pick"])({
   enterprise: themes_["variables"].accentColor,
@@ -297,8 +282,7 @@ var StyledUnderline = external_styled_components_default.a.div.withConfig({
   },
   vertical: {
     enterprise: Object(external_styled_components_["css"])(["width:3px;"]),
-    // prisma falls back to horizontal $layout
-    prisma: Object(external_styled_components_["css"])(["height:1px;"])
+    prisma: Object(external_styled_components_["css"])(["width:1px;"])
   }
 }), StyledClickable, Object(themes_["pickVariant"])('$layout', {
   horizontal: {
@@ -334,14 +318,15 @@ var StyledLabel = external_styled_components_default.a.div.withConfig({
 var StyledCount = external_styled_components_default.a.div.withConfig({
   displayName: "TabStyles__StyledCount",
   componentId: "sc-1ry8mzj-4"
-})(["", " display:inline-block;background:", ";border-radius:18px;color:", ";font-size:", ";line-height:10px;padding:4px 6px;margin-left:", ";", " &[disabled]{background:", ";color:", ";}"], themes_["mixins"].reset('inlne-block'), themes_["variables"].interactiveColorBackground, themes_["variables"].contentColorDefault, Object(themes_["pick"])({
+})(["", " display:inline-block;border-radius:18px;color:", ";font-size:", ";line-height:10px;padding:4px 6px;margin-left:", ";", " &[disabled]{background:", ";color:", ";}"], themes_["mixins"].reset('inlne-block'), themes_["variables"].contentColorDefault, Object(themes_["pick"])({
   enterprise: 'inherit',
   prisma: '10px'
 }), Object(themes_["pick"])({
   enterprise: '0',
   prisma: '8px'
 }), Object(themes_["pick"])({
-  enterprise: Object(external_styled_components_["css"])(["&::before{content:'(';}&::after{content:')';}"])
+  enterprise: Object(external_styled_components_["css"])(["&::before{content:'(';}&::after{content:')';}"]),
+  prisma: Object(external_styled_components_["css"])(["background:", ";"], themes_["variables"].neutral100)
 }), themes_["variables"].interactiveColorBackgroundDisabled, themes_["variables"].contentColorDisabled);
 var StyledTooltipContent = external_styled_components_default.a.div.withConfig({
   displayName: "TabStyles__StyledTooltipContent",
@@ -349,7 +334,7 @@ var StyledTooltipContent = external_styled_components_default.a.div.withConfig({
 })(["padding:8px;font-size:", ";"], themes_["variables"].fontSizeSmall);
 
 // EXTERNAL MODULE: ./src/utils/updateReactRef.ts
-var updateReactRef = __webpack_require__(12);
+var updateReactRef = __webpack_require__(11);
 
 // CONCATENATED MODULE: ./src/TabBar/TabBarContext.tsx
 
@@ -361,10 +346,6 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
 
 function _extends() { _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; }; return _extends.apply(this, arguments); }
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
@@ -528,9 +509,7 @@ var Tab_Tab = /*#__PURE__*/function (_Component) {
           iconSize = _this$context.iconSize,
           layout = _this$context.layout,
           widthContext = _this$context.width;
-
-      var style = _objectSpread({}, otherProps);
-
+      var style = otherProps.style;
       var disabledValue = disabledContext || disabled;
       var iconSizeValue = iconSize || 'inline';
       var layoutValue = layout || 'horizontal';
@@ -755,7 +734,7 @@ module.exports = require("react");
 
 /***/ }),
 
-/***/ 23:
+/***/ 21:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/Popover");
@@ -808,11 +787,18 @@ function getPrevListItem(refs, currentIndex, prevIndex) {
 
 /***/ }),
 
-/***/ 9:
+/***/ 7:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/ui-utils/keyboard");
 
+/***/ }),
+
+/***/ 8:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/ui-utils/id");
+
 /***/ })
 
 /******/ });

package/TabLayout.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 199);
+/******/ 	return __webpack_require__(__webpack_require__.s = 207);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -104,13 +104,6 @@ module.exports = require("prop-types");
 /***/ 10:
 /***/ (function(module, exports) {
 
-module.exports = require("lodash/keys");
-
-/***/ }),
-
-/***/ 11:
-/***/ (function(module, exports) {
-
 module.exports = require("lodash/has");
 
 /***/ }),
@@ -122,14 +115,14 @@ module.exports = require("@splunk/react-ui/TabBar");
 
 /***/ }),
 
-/***/ 13:
+/***/ 2:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/ui-utils/id");
+module.exports = require("react");
 
 /***/ }),
 
-/***/ 199:
+/***/ 207:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -149,11 +142,11 @@ var external_prop_types_ = __webpack_require__(1);
 var external_prop_types_default = /*#__PURE__*/__webpack_require__.n(external_prop_types_);
 
 // EXTERNAL MODULE: external "lodash/has"
-var has_ = __webpack_require__(11);
+var has_ = __webpack_require__(10);
 var has_default = /*#__PURE__*/__webpack_require__.n(has_);
 
 // EXTERNAL MODULE: external "lodash/keys"
-var keys_ = __webpack_require__(10);
+var keys_ = __webpack_require__(9);
 var keys_default = /*#__PURE__*/__webpack_require__.n(keys_);
 
 // EXTERNAL MODULE: external "lodash/omit"
@@ -161,7 +154,7 @@ var omit_ = __webpack_require__(5);
 var omit_default = /*#__PURE__*/__webpack_require__.n(omit_);
 
 // EXTERNAL MODULE: external "@splunk/ui-utils/id"
-var id_ = __webpack_require__(13);
+var id_ = __webpack_require__(8);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/TabBar"
 var TabBar_ = __webpack_require__(120);
@@ -184,12 +177,12 @@ var StyledPanel = external_styled_components_default.a.div.withConfig({
 var Styled = external_styled_components_default.a.div.withConfig({
   displayName: "TabLayoutStyles__Styled",
   componentId: "lf0quy-1"
-})(["text-align:center;margin-top:", ";&[data-flex='true']{", "}"], themes_["variables"].spacingLarge, Object(themes_["pick"])({
-  enterprise: Object(external_styled_components_["css"])(["display:flex;> ", "{width:100%;}> [role='tablist']{flex:0 0 auto;}"],
+})(["text-align:center;margin-top:", ";", ""], themes_["variables"].spacingLarge, function (_ref) {
+  var $layout = _ref.$layout;
+  return $layout === 'vertical' && Object(external_styled_components_["css"])(["display:flex;& > [role='tablist']{flex:0 0 auto;}& > ", "{width:100%;}"],
   /* sc-sel */
-  StyledPanel),
-  prisma: Object(external_styled_components_["css"])(["text-align:center;margin-top:", ";"], themes_["variables"].spacingLarge)
-}));
+  StyledPanel);
+});
 
 // CONCATENATED MODULE: ./src/TabLayout/Panel.tsx
 function _extends() { _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; }; return _extends.apply(this, arguments); }
@@ -355,7 +348,9 @@ var TabLayout_TabLayout = /*#__PURE__*/function (_Component) {
     value: function render() {
       var _this2 = this;
 
-      var children = this.props.children;
+      var _this$props2 = this.props,
+          children = _this$props2.children,
+          layout = _this$props2.layout;
       var activePanelId = this.isControlled() ? this.props.activePanelId : this.state.activePanelId;
       var panel;
       var tabs = external_react_["Children"].toArray(children).filter(external_react_["isValidElement"]).map(function (child) {
@@ -386,10 +381,10 @@ var TabLayout_TabLayout = /*#__PURE__*/function (_Component) {
       if (false) {}
 
       return /*#__PURE__*/external_react_default.a.createElement(Styled, TabLayout_extends({
-        "data-flex": this.props.layout === 'vertical' || undefined,
         "data-test-active-panel-id": activePanelId,
         "data-test": "tab-layout",
-        ref: this.props.elementRef
+        ref: this.props.elementRef,
+        $layout: layout
       }, omit_default()(this.props, keys_default()(TabLayout.propTypes))), /*#__PURE__*/external_react_default.a.createElement(TabBar_default.a, {
         autoActivate: this.props.autoActivate,
         activeTabId: activePanelId,
@@ -419,24 +414,31 @@ _defineProperty(TabLayout_TabLayout, "Panel", TabLayout_Panel);
 
 /***/ }),
 
-/***/ 2:
+/***/ 3:
 /***/ (function(module, exports) {
 
-module.exports = require("react");
+module.exports = require("styled-components");
 
 /***/ }),
 
-/***/ 3:
+/***/ 5:
 /***/ (function(module, exports) {
 
-module.exports = require("styled-components");
+module.exports = require("lodash/omit");
 
 /***/ }),
 
-/***/ 5:
+/***/ 8:
 /***/ (function(module, exports) {
 
-module.exports = require("lodash/omit");
+module.exports = require("@splunk/ui-utils/id");
+
+/***/ }),
+
+/***/ 9:
+/***/ (function(module, exports) {
+
+module.exports = require("lodash/keys");
 
 /***/ })