@splunk/react-ui 4.1.0 → 4.4.1

package/Number.js

@@ -139,7 +139,7 @@ var keyboard_ = __webpack_require__(9);
 var i18n_ = __webpack_require__(5);
 
 // EXTERNAL MODULE: external "@splunk/react-icons/SVG"
-var SVG_ = __webpack_require__(21);
+var SVG_ = __webpack_require__(22);
 var SVG_default = /*#__PURE__*/__webpack_require__.n(SVG_);
 
 // CONCATENATED MODULE: ./src/Number/IncrementIcon.tsx
@@ -162,7 +162,7 @@ var external_styled_components_ = __webpack_require__(3);
 var external_styled_components_default = /*#__PURE__*/__webpack_require__.n(external_styled_components_);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/Button"
-var Button_ = __webpack_require__(17);
+var Button_ = __webpack_require__(16);
 var Button_default = /*#__PURE__*/__webpack_require__.n(Button_);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/Clickable"
@@ -170,7 +170,7 @@ var Clickable_ = __webpack_require__(11);
 var Clickable_default = /*#__PURE__*/__webpack_require__.n(Clickable_);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/Text"
-var Text_ = __webpack_require__(24);
+var Text_ = __webpack_require__(26);
 var Text_default = /*#__PURE__*/__webpack_require__.n(Text_);
 
 // CONCATENATED MODULE: ./src/Number/NumberStyles.ts
@@ -192,7 +192,7 @@ var StyledText = external_styled_components_default()(Text_default.a).withConfig
 var StyledControls = external_styled_components_default.a.div.withConfig({
   displayName: "NumberStyles__StyledControls",
   componentId: "sc-2ekj9s-1"
-})(["position:absolute;top:0;bottom:0;z-index:1;width:", ";", ""], Object(themes_["pick"])({
+})(["width:", ";height:100%;", " ", ""], Object(themes_["pick"])({
   enterprise: {
     comfortable: '20px',
     compact: '16px'
@@ -201,18 +201,29 @@ var StyledControls = external_styled_components_default.a.div.withConfig({
     comfortable: '24px',
     compact: '24px'
   }
+}), Object(themes_["pick"])({
+  enterprise: Object(external_styled_components_["css"])(["transform:translateY(-1px);"]),
+  prisma: Object(external_styled_components_["css"])(["transform:translateX(1px);"])
 }), function (_ref) {
   var $isAppend = _ref.$isAppend;
-  return $isAppend ? Object(external_styled_components_["css"])(["left:0;"]) : Object(external_styled_components_["css"])(["right:0;"]);
+  return $isAppend ? Object(external_styled_components_["css"])(["margin-right:8px;", ""], Object(themes_["pick"])({
+    prisma: Object(external_styled_components_["css"])(["transform:translateX(-1px);"])
+  })) : Object(external_styled_components_["css"])(["margin-left:8px;"]);
 });
-var incrementor = Object(external_styled_components_["css"])(["position:absolute;padding:3px;font-size:inherit;min-width:0;min-height:0;height:calc(50% + 0.5px);width:100%;"]);
+var incrementor = Object(external_styled_components_["css"])(["position:relative;padding:3px;font-size:inherit;min-width:0;min-height:0;height:", ";width:100%;"], Object(themes_["pick"])({
+  enterprise: 'calc(50% + 1.5px)',
+  prisma: '50%'
+}));
 var StyledPlusButton = external_styled_components_default()(Button_default.a).withConfig({
   displayName: "NumberStyles__StyledPlusButton",
   componentId: "sc-2ekj9s-2"
 })(["", ";top:0;border-bottom-left-radius:0;border-bottom-right-radius:0;", " &:not([disabled]){&,&:hover{", ";}}"], incrementor, function (_ref2) {
   var append = _ref2.append;
   return append && Object(themes_["pick"])({
-    enterprise: Object(external_styled_components_["css"])(["border-right:", ";"], themes_["variables"].border)
+    enterprise: {
+      light: Object(external_styled_components_["css"])(["border-right:1px solid ", ";"], themes_["variables"].gray60),
+      dark: Object(external_styled_components_["css"])(["border-right:", ";"], themes_["variables"].border)
+    }
   });
 }, Object(themes_["pick"])({
   enterprise: {
@@ -222,10 +233,13 @@ var StyledPlusButton = external_styled_components_default()(Button_default.a).wi
 var StyledMinusButton = external_styled_components_default()(Button_default.a).withConfig({
   displayName: "NumberStyles__StyledMinusButton",
   componentId: "sc-2ekj9s-3"
-})(["", ";bottom:0;border-top-left-radius:0;border-top-right-radius:0;", " &:not([disabled]){&,&:hover{", ";}}"], incrementor, function (_ref3) {
+})(["", ";bottom:1px;border-top-left-radius:0;border-top-right-radius:0;", " &:not([disabled]){&,&:hover{", ";}}"], incrementor, function (_ref3) {
   var append = _ref3.append;
   return append && Object(themes_["pick"])({
-    enterprise: Object(external_styled_components_["css"])(["border-right:", ";"], themes_["variables"].border)
+    enterprise: {
+      light: Object(external_styled_components_["css"])(["border-right:1px solid ", ";"], themes_["variables"].gray60),
+      dark: Object(external_styled_components_["css"])(["border-right:", ";"], themes_["variables"].border)
+    }
   });
 }, Object(themes_["pick"])({
   enterprise: {
@@ -245,11 +259,11 @@ var prismaButton = external_styled_components_default()(Clickable_default.a).wit
 var StyledPrismaPlusButton = external_styled_components_default()(prismaButton).withConfig({
   displayName: "NumberStyles__StyledPrismaPlusButton",
   componentId: "sc-2ekj9s-5"
-})(["top:0;border-top-right-radius:4px;padding-top:5px;"]);
+})(["border-top-right-radius:4px;"]);
 var StyledPrismaMinusButton = external_styled_components_default()(prismaButton).withConfig({
   displayName: "NumberStyles__StyledPrismaMinusButton",
   componentId: "sc-2ekj9s-6"
-})(["bottom:0;border-bottom-right-radius:4px;padding-bottom:5px;"]);
+})(["border-bottom-right-radius:4px;padding-bottom:5px;"]);
 
 // CONCATENATED MODULE: ./src/Number/Number.tsx
 function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
@@ -644,16 +658,9 @@ var Number_Number = /*#__PURE__*/function (_Component) {
           min = _this$props4.min,
           prepend = _this$props4.prepend,
           splunkTheme = _this$props4.splunkTheme;
-      var family = splunkTheme.family,
-          density = splunkTheme.density;
+      var family = splunkTheme.family;
       var textProps = Object(external_lodash_["omit"])(this.props, ['defaultValue', 'hideStepButtons', 'max', 'min', 'roundTo', 'spellCheck', 'step']);
       var isPrisma = family === 'prisma';
-      var padding = density === 'compact' ? '16px' : '20px';
-      var inputStyle = append && !prepend ? {
-        paddingLeft: padding
-      } : {
-        paddingRight: padding
-      };
       var buttonProps = isPrisma ? {} : {
         append: append,
         prepend: !append,
@@ -693,6 +700,13 @@ var Number_Number = /*#__PURE__*/function (_Component) {
       }, buttonProps);
 
       var styledMinus = isPrisma ? /*#__PURE__*/external_react_default.a.createElement(StyledPrismaMinusButton, minusProps, minusIcon) : /*#__PURE__*/external_react_default.a.createElement(StyledMinusButton, minusProps, minusIcon);
+      var isAppend = append && !prepend;
+      var startAdornment = (!disabled || isPrisma) && isAppend && !hideStepButtons && /*#__PURE__*/external_react_default.a.createElement(StyledControls, {
+        $isAppend: isAppend
+      }, styledPlus, styledMinus);
+      var endAdornment = (!disabled || isPrisma) && !isAppend && !hideStepButtons && /*#__PURE__*/external_react_default.a.createElement(StyledControls, {
+        $isAppend: isAppend
+      }, styledPlus, styledMinus);
       return /*#__PURE__*/external_react_default.a.createElement(StyledText, Number_extends({
         autoCapitalize: "off",
         autoComplete: "off",
@@ -704,7 +718,6 @@ var Number_Number = /*#__PURE__*/function (_Component) {
         }
       }, textProps, {
         inline: inline,
-        inputStyle: !hideStepButtons ? inputStyle : undefined,
         onChange: this.handleInputChange,
         onBlur: this.handleInputBlur,
         onKeyDown: this.handleKeyDown,
@@ -712,10 +725,10 @@ var Number_Number = /*#__PURE__*/function (_Component) {
         value: this.state.stringValue,
         "aria-describedby": describedBy,
         error: error,
-        "data-test-value": value
-      }), (isPrisma || !disabled) && !hideStepButtons && /*#__PURE__*/external_react_default.a.createElement(StyledControls, {
-        $isAppend: append && !prepend
-      }, styledPlus, styledMinus));
+        "data-test-value": value,
+        startAdornment: startAdornment,
+        endAdornment: endAdornment
+      }));
     }
   }]);
 
@@ -749,7 +762,7 @@ NumberWithTheme.propTypes = Number_Number.propTypes;
 
 /***/ }),
 
-/***/ 17:
+/***/ 16:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/Button");
@@ -763,14 +776,14 @@ module.exports = require("react");
 
 /***/ }),
 
-/***/ 21:
+/***/ 22:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-icons/SVG");
 
 /***/ }),
 
-/***/ 24:
+/***/ 26:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/Text");

package/Paginator.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 116);
+/******/ 	return __webpack_require__(__webpack_require__.s = 111);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -101,7 +101,7 @@ module.exports = require("prop-types");
 
 /***/ }),
 
-/***/ 116:
+/***/ 111:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -120,7 +120,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/format"
-var format_ = __webpack_require__(37);
+var format_ = __webpack_require__(41);
 
 // EXTERNAL MODULE: external "@splunk/ui-utils/i18n"
 var i18n_ = __webpack_require__(5);
@@ -133,7 +133,7 @@ var Box_default = /*#__PURE__*/__webpack_require__.n(Box_);
 var themes_ = __webpack_require__(0);
 
 // EXTERNAL MODULE: external "@splunk/react-icons/More"
-var More_ = __webpack_require__(88);
+var More_ = __webpack_require__(90);
 var More_default = /*#__PURE__*/__webpack_require__.n(More_);
 
 // EXTERNAL MODULE: ./src/icons/ThemedIcon.tsx
@@ -167,15 +167,49 @@ function More(props) {
     Prisma24: Prisma24
   }, props));
 }
-// EXTERNAL MODULE: external "lodash"
-var external_lodash_ = __webpack_require__(4);
-
 // EXTERNAL MODULE: external "styled-components"
 var external_styled_components_ = __webpack_require__(3);
 var external_styled_components_default = /*#__PURE__*/__webpack_require__.n(external_styled_components_);
 
+// CONCATENATED MODULE: ./src/Paginator/PageSeparatorStyles.ts
+
+
+var StyledEllipsisWrapper = external_styled_components_default.a.span.withConfig({
+  displayName: "PageSeparatorStyles__StyledEllipsisWrapper",
+  componentId: "j50fqf-0"
+})(["display:flex;align-items:center;margin:", ";color:", ";"], Object(themes_["pick"])({
+  enterprise: '0px 11px',
+  prisma: '0px 20px'
+}), Object(themes_["pick"])({
+  enterprise: themes_["variables"].contentColorDisabled,
+  prisma: themes_["variables"].contentColorActive
+}));
+
+// CONCATENATED MODULE: ./src/Paginator/PageSeparator.tsx
+
+
+
+
+
+function PageSeparator() {
+  var _useSplunkTheme = Object(themes_["useSplunkTheme"])(),
+      family = _useSplunkTheme.family;
+
+  var content = family === 'enterprise' ? /*#__PURE__*/external_react_default.a.createElement("span", {
+    role: "separator"
+  }, "...") : /*#__PURE__*/external_react_default.a.createElement(More, {
+    prismaSize: "small",
+    role: "separator"
+  });
+  return /*#__PURE__*/external_react_default.a.createElement(StyledEllipsisWrapper, null, content);
+}
+
+/* harmony default export */ var Paginator_PageSeparator = (PageSeparator);
+// EXTERNAL MODULE: external "lodash"
+var external_lodash_ = __webpack_require__(4);
+
 // EXTERNAL MODULE: external "@splunk/react-ui/ButtonSimple"
-var ButtonSimple_ = __webpack_require__(41);
+var ButtonSimple_ = __webpack_require__(43);
 var ButtonSimple_default = /*#__PURE__*/__webpack_require__.n(ButtonSimple_);
 
 // CONCATENATED MODULE: ./src/Paginator/ButtonStyles.ts
@@ -185,7 +219,7 @@ var ButtonSimple_default = /*#__PURE__*/__webpack_require__.n(ButtonSimple_);
 var StyledButtonSimple = external_styled_components_default()(ButtonSimple_default.a).withConfig({
   displayName: "ButtonStyles__StyledButtonSimple",
   componentId: "sc-1neztq7-0"
-})(["min-width:", ";min-height:", ";text-align:center;", ""], themes_["variables"].inputHeight, themes_["variables"].inputHeight, Object(themes_["pick"])({
+})(["min-width:", ";min-height:", ";text-align:center;flex-shrink:0;", ""], themes_["variables"].inputHeight, themes_["variables"].inputHeight, Object(themes_["pick"])({
   enterprise: {
     comfortable: Object(external_styled_components_["css"])(["padding:", ";"], themes_["variables"].spacingQuarter),
     compact: Object(external_styled_components_["css"])(["padding:3px;"])
@@ -307,10 +341,10 @@ _defineProperty(Button_PaginatorButton, "defaultProps", defaultProps);
 
 /* harmony default export */ var Button = (Button_PaginatorButton);
 // EXTERNAL MODULE: ./src/icons/ChevronLeft.tsx
-var ChevronLeft = __webpack_require__(50);
+var ChevronLeft = __webpack_require__(52);
 
 // EXTERNAL MODULE: ./src/icons/ChevronRight.tsx
-var ChevronRight = __webpack_require__(25);
+var ChevronRight = __webpack_require__(27);
 
 // CONCATENATED MODULE: ./src/Paginator/PaginatorStyles.ts
 
@@ -337,10 +371,6 @@ var StyledChevronRight = external_styled_components_default()(ChevronRight["a" /
     return $disabled ? themes_["variables"].contentColorDisabled : themes_["variables"].contentColorMuted;
   })
 }));
-var StyledEllipsisWrapper = external_styled_components_default.a.span.withConfig({
-  displayName: "PaginatorStyles__StyledEllipsisWrapper",
-  componentId: "pmabsp-2"
-})(["position:relative;top:-1px;color:", ";"], themes_["variables"].contentColorActive);
 
 // CONCATENATED MODULE: ./src/Paginator/Paginator.tsx
 function Paginator_extends() { Paginator_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 Paginator_extends.apply(this, arguments); }
@@ -357,7 +387,6 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 
 
-
 var Paginator_propTypes = {
   alwaysShowLastPageLink: external_prop_types_default.a.bool,
   current: external_prop_types_default.a.number,
@@ -379,10 +408,7 @@ function Paginator(_ref) {
       otherProps = _objectWithoutProperties(_ref, ["onChange", "current", "alwaysShowLastPageLink", "numPageLinks", "totalPages"]);
 
   // @docs-props-type PaginatorPropsBase
-  var _useSplunkTheme = Object(themes_["useSplunkTheme"])(),
-      family = _useSplunkTheme.family; // Can't show more links than total number of pages.
-
-
+  // Can't show more links than total number of pages.
   var numLinks = Math.min(numPageLinks, totalPages);
   var loMid = Math.ceil(numLinks / 2);
   var hiMid = Math.ceil(totalPages - numLinks / 2);
@@ -414,9 +440,6 @@ function Paginator(_ref) {
 
 
   lastPage = alwaysShowLastPageLink && lastPage + 1 === totalPages ? totalPages : lastPage;
-  var ellipsis = family === 'enterprise' ? '...' : /*#__PURE__*/external_react_default.a.createElement(StyledEllipsisWrapper, null, /*#__PURE__*/external_react_default.a.createElement(More, {
-    prismaSize: "small"
-  }));
   pages.push( /*#__PURE__*/external_react_default.a.createElement(Button, {
     "data-test": "prev",
     disabled: current === 1,
@@ -436,12 +459,9 @@ function Paginator(_ref) {
       page: 1,
       "aria-label": Object(i18n_["_"])('Go to first page')
     }));
-    pages.push( /*#__PURE__*/external_react_default.a.createElement(Button, {
-      label: ellipsis,
-      disabled: true,
-      key: "prevEllipsis",
-      "aria-hidden": "true",
-      selected: false
+    pages.push( /*#__PURE__*/external_react_default.a.createElement(Paginator_PageSeparator, {
+      "data-test": "page",
+      key: "prevEllipsis"
     }));
   }
 
@@ -460,11 +480,9 @@ function Paginator(_ref) {
   }
 
   if (current <= hiMid && totalPages > numLinks && lastPage !== totalPages) {
-    pages.push( /*#__PURE__*/external_react_default.a.createElement(Button, {
-      label: ellipsis,
-      disabled: true,
-      key: "nextEllipsis",
-      "aria-hidden": "true"
+    pages.push( /*#__PURE__*/external_react_default.a.createElement(Paginator_PageSeparator, {
+      "data-test": "page",
+      key: "nextEllipsis"
     }));
 
     if (alwaysShowLastPageLink) {
@@ -514,14 +532,14 @@ module.exports = require("react");
 
 /***/ }),
 
-/***/ 25:
+/***/ 27:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return ChevronRight; });
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _splunk_react_icons_ChevronRight__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(28);
+/* harmony import */ var _splunk_react_icons_ChevronRight__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(31);
 /* harmony import */ var _splunk_react_icons_ChevronRight__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_splunk_react_icons_ChevronRight__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _ThemedIcon__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(7);
 /* harmony import */ var _SVG__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(6);
@@ -564,13 +582,6 @@ function ChevronRight(props) {
 
 /***/ }),
 
-/***/ 28:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/react-icons/ChevronRight");
-
-/***/ }),
-
 /***/ 3:
 /***/ (function(module, exports) {
 
@@ -578,10 +589,10 @@ module.exports = require("styled-components");
 
 /***/ }),
 
-/***/ 37:
+/***/ 31:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/ui-utils/format");
+module.exports = require("@splunk/react-icons/ChevronRight");
 
 /***/ }),
 
@@ -595,6 +606,13 @@ module.exports = require("lodash");
 /***/ 41:
 /***/ (function(module, exports) {
 
+module.exports = require("@splunk/ui-utils/format");
+
+/***/ }),
+
+/***/ 43:
+/***/ (function(module, exports) {
+
 module.exports = require("@splunk/react-ui/ButtonSimple");
 
 /***/ }),
@@ -606,14 +624,14 @@ module.exports = require("@splunk/ui-utils/i18n");
 
 /***/ }),
 
-/***/ 50:
+/***/ 52:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return ChevronLeft; });
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _splunk_react_icons_ChevronLeft__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(51);
+/* harmony import */ var _splunk_react_icons_ChevronLeft__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(53);
 /* harmony import */ var _splunk_react_icons_ChevronLeft__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_splunk_react_icons_ChevronLeft__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _ThemedIcon__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(7);
 /* harmony import */ var _SVG__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(6);
@@ -656,7 +674,7 @@ function ChevronLeft(props) {
 
 /***/ }),
 
-/***/ 51:
+/***/ 53:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-icons/ChevronLeft");
@@ -813,7 +831,7 @@ module.exports = require("@splunk/react-ui/Box");
 
 /***/ }),
 
-/***/ 88:
+/***/ 90:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-icons/More");

package/Paragraph.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 151);
+/******/ 	return __webpack_require__(__webpack_require__.s = 147);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -101,7 +101,7 @@ module.exports = require("prop-types");
 
 /***/ }),
 
-/***/ 151:
+/***/ 147:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";