@splunk/react-ui 4.15.0 → 4.16.0

package/Table.js

@@ -586,29 +586,36 @@ function ChevronRight(props) {
 module.exports = require("@splunk/react-icons/ChevronRight");
 
 /***/ }),
-/* 45 */,
+/* 45 */
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/ui-utils/format");
+
+/***/ }),
 /* 46 */,
 /* 47 */,
-/* 48 */
+/* 48 */,
+/* 49 */
 /***/ (function(module, exports) {
 
 module.exports = require("lodash/extend");
 
 /***/ }),
-/* 49 */
+/* 50 */
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/ScrollContainerContext");
 
 /***/ }),
-/* 50 */
+/* 51 */,
+/* 52 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return CaretDown; });
 /* 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_Caret__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(51);
+/* harmony import */ var _splunk_react_icons_Caret__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(53);
 /* harmony import */ var _splunk_react_icons_Caret__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_splunk_react_icons_Caret__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);
@@ -638,24 +645,22 @@ function CaretDown(props) {
 }
 
 /***/ }),
-/* 51 */
+/* 53 */
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-icons/Caret");
 
 /***/ }),
-/* 52 */,
-/* 53 */,
 /* 54 */,
 /* 55 */,
-/* 56 */
+/* 56 */,
+/* 57 */,
+/* 58 */
 /***/ (function(module, exports) {
 
 module.exports = require("lodash/without");
 
 /***/ }),
-/* 57 */,
-/* 58 */,
 /* 59 */,
 /* 60 */,
 /* 61 */,
@@ -1011,7 +1016,7 @@ var EventListener_default = /*#__PURE__*/__webpack_require__.n(EventListener_);
 var keyboard_ = __webpack_require__(9);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/ScrollContainerContext"
-var ScrollContainerContext_ = __webpack_require__(49);
+var ScrollContainerContext_ = __webpack_require__(50);
 
 // EXTERNAL MODULE: external "lodash/findIndex"
 var findIndex_ = __webpack_require__(111);
@@ -1022,7 +1027,7 @@ var includes_ = __webpack_require__(18);
 var includes_default = /*#__PURE__*/__webpack_require__.n(includes_);
 
 // EXTERNAL MODULE: external "lodash/without"
-var without_ = __webpack_require__(56);
+var without_ = __webpack_require__(58);
 var without_default = /*#__PURE__*/__webpack_require__.n(without_);
 
 // EXTERNAL MODULE: external "styled-components"
@@ -1102,6 +1107,9 @@ var propTypes = {
   /** @private. Generally passed by Table rather than added directly. */
   onRequestMoveRow: external_prop_types_default.a.func,
 
+  /** @private. Generally passed by Table rather than added directly. */
+  primaryColumnIndex: external_prop_types_default.a.number,
+
   /** @private. Generally passed by Table rather than added directly. */
   stripeRows: external_prop_types_default.a.bool
 };
@@ -1347,8 +1355,9 @@ var Body_Body = /*#__PURE__*/function (_Component) {
           movableColumns = _this$props3.movableColumns,
           onRequestMoveRow = _this$props3.onRequestMoveRow,
           rowExpansion = _this$props3.rowExpansion,
+          primaryColumnIndex = _this$props3.primaryColumnIndex,
           stripeRows = _this$props3.stripeRows,
-          otherProps = _objectWithoutProperties(_this$props3, ["actions", "children", "movableColumns", "onRequestMoveRow", "rowExpansion", "stripeRows"]);
+          otherProps = _objectWithoutProperties(_this$props3, ["actions", "children", "movableColumns", "onRequestMoveRow", "rowExpansion", "primaryColumnIndex", "stripeRows"]);
 
       var rows = [];
       var guidelineRowIndex = this.calculateGuideIndex();
@@ -1384,6 +1393,7 @@ var Body_Body = /*#__PURE__*/function (_Component) {
             expandable: rowExpansion !== 'none',
             draggable: !!onRequestMoveRow,
             movableColumns: movableColumns,
+            primaryColumnIndex: primaryColumnIndex,
             onExpansion: onExpansion,
             onRequestMoveRow: onRequestMoveRow ? _this2.onRequestMoveRow : undefined,
             onDragStart: onRequestMoveRow ? _this2.handleDragStart : undefined,
@@ -1867,7 +1877,7 @@ function CaretDown(props) {
   }, props));
 }
 // EXTERNAL MODULE: ./src/icons/CaretDown.tsx
-var icons_CaretDown = __webpack_require__(50);
+var icons_CaretDown = __webpack_require__(52);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/ScreenReaderContent"
 var ScreenReaderContent_ = __webpack_require__(16);
@@ -2852,6 +2862,9 @@ var Dropdown_default = /*#__PURE__*/__webpack_require__.n(Dropdown_);
 var Tooltip_ = __webpack_require__(67);
 var Tooltip_default = /*#__PURE__*/__webpack_require__.n(Tooltip_);
 
+// EXTERNAL MODULE: external "@splunk/ui-utils/format"
+var format_ = __webpack_require__(45);
+
 // EXTERNAL MODULE: ./src/icons/ChevronDown.tsx
 var ChevronDown = __webpack_require__(89);
 
@@ -3255,6 +3268,7 @@ function Row_extends() { Row_extends = Object.assign || function (target) { for
 
 
 
+
 var StyledStripeComponents = {
   odd: StyledStripeOdd,
   even: StyledStripeEven,
@@ -3303,6 +3317,10 @@ var Row_propTypes = {
   /** @private. Generally passed by `Table` rather than added directly. */
   onRequestMoveRow: external_prop_types_default.a.func,
   onRequestToggle: external_prop_types_default.a.func,
+
+  /** @private. Generally passed by `Table` rather than added directly. */
+  primaryColumnIndex: external_prop_types_default.a.number,
+  rowScreenReaderText: external_prop_types_default.a.string,
   selected: external_prop_types_default.a.bool,
 
   /** @private. Generally passed by `Table` rather than added directly. */
@@ -3312,7 +3330,8 @@ var Row_propTypes = {
   stripe: external_prop_types_default.a.oneOf(['odd', 'even', 'none'])
 };
 var Row_defaultProps = {
-  stripe: 'none'
+  stripe: 'none',
+  primaryColumnIndex: 0
 };
 var ActionsSecondaryToggle = /*#__PURE__*/external_react_default.a.forwardRef(function (props, ref) {
   return /*#__PURE__*/external_react_default.a.createElement(Tooltip_default.a, Row_extends({
@@ -3456,6 +3475,8 @@ var Row_Row = /*#__PURE__*/function (_Component) {
   Row_createClass(Row, [{
     key: "render",
     value: function render() {
+      var _childrenCloned$prima;
+
       var _this$props5 = this.props,
           actions = _this$props5.actions,
           actionPrimary = _this$props5.actionPrimary,
@@ -3476,10 +3497,12 @@ var Row_Row = /*#__PURE__*/function (_Component) {
           onExpansion = _this$props5.onExpansion,
           onRequestMoveRow = _this$props5.onRequestMoveRow,
           onRequestToggle = _this$props5.onRequestToggle,
+          primaryColumnIndex = _this$props5.primaryColumnIndex,
+          rowScreenReaderText = _this$props5.rowScreenReaderText,
           selected = _this$props5.selected,
           showRowGuideline = _this$props5.showRowGuideline,
           stripe = _this$props5.stripe,
-          otherProps = Row_objectWithoutProperties(_this$props5, ["actions", "actionPrimary", "actionsSecondary", "activeElementId", "children", "dataId", "disabled", "draggable", "elementRef", "expandable", "expanded", "expansionRow", "index", "movableColumns", "onClick", "onDragStart", "onExpansion", "onRequestMoveRow", "onRequestToggle", "selected", "showRowGuideline", "stripe"]);
+          otherProps = Row_objectWithoutProperties(_this$props5, ["actions", "actionPrimary", "actionsSecondary", "activeElementId", "children", "dataId", "disabled", "draggable", "elementRef", "expandable", "expanded", "expansionRow", "index", "movableColumns", "onClick", "onDragStart", "onExpansion", "onRequestMoveRow", "onRequestToggle", "primaryColumnIndex", "rowScreenReaderText", "selected", "showRowGuideline", "stripe"]);
 
       var childrenCloned = !onClick ? external_react_["Children"].toArray(children).map(function (child) {
         return /*#__PURE__*/Object(external_react_["cloneElement"])(child, {
@@ -3492,6 +3515,25 @@ var Row_Row = /*#__PURE__*/function (_Component) {
           disabled: disabled
         });
       });
+      var rowLabelValue;
+
+      if (rowScreenReaderText) {
+        rowLabelValue = rowScreenReaderText;
+      } else if ((_childrenCloned$prima = childrenCloned[primaryColumnIndex]) === null || _childrenCloned$prima === void 0 ? void 0 : _childrenCloned$prima.props.children) {
+        var _childrenCloned$prima2;
+
+        rowLabelValue = "".concat((_childrenCloned$prima2 = childrenCloned[primaryColumnIndex]) === null || _childrenCloned$prima2 === void 0 ? void 0 : _childrenCloned$prima2.props.children);
+      } else {
+        var _childrenCloned$;
+
+        rowLabelValue = "".concat((_childrenCloned$ = childrenCloned[0]) === null || _childrenCloned$ === void 0 ? void 0 : _childrenCloned$.props.children);
+
+        if (false) {}
+      }
+
+      var selectedString = Object(format_["sprintf"])(Object(i18n_["_"])('%(selected)s'), {
+        selected: selected ? 'selected' : 'unselected'
+      });
       var StyledStripe = StyledStripeComponents[stripe];
       var StyledCellToggle = disabled ? StyledCellSelectionDisabled : Table_Cell;
       var rowSpan = expanded ? external_react_["Children"].count(expansionRow) + 1 : undefined;
@@ -3520,6 +3562,10 @@ var Row_Row = /*#__PURE__*/function (_Component) {
         rowSpan: rowSpan,
         showRowGuideline: showRowGuideline
       }), onRequestToggle && /*#__PURE__*/external_react_default.a.createElement(StyledCellToggle, {
+        "aria-label": Object(format_["sprintf"])(Object(i18n_["_"])('%(rowLabelValue)s %(selectedString)s'), {
+          rowLabelValue: rowLabelValue,
+          selectedString: selectedString
+        }),
         appearance: onClick ? 'rowLink' : 'data',
         "data-test": "toggle",
         variant: "toggle",
@@ -4456,7 +4502,7 @@ HeadDropdownCell_defineProperty(HeadDropdownCell_HeadDropdownCell, "contextType"
 
 /* harmony default export */ var Table_HeadDropdownCell = (HeadDropdownCell_HeadDropdownCell);
 // EXTERNAL MODULE: external "lodash/extend"
-var extend_ = __webpack_require__(48);
+var extend_ = __webpack_require__(49);
 var extend_default = /*#__PURE__*/__webpack_require__.n(extend_);
 
 // CONCATENATED MODULE: ./src/Table/HeadTableStyles.ts
@@ -4728,6 +4774,7 @@ var Table_propTypes = {
   onRequestToggleAllRows: external_prop_types_default.a.func,
   onScroll: external_prop_types_default.a.func,
   outerStyle: external_prop_types_default.a.object,
+  primaryColumnIndex: external_prop_types_default.a.number,
   rowExpansion: external_prop_types_default.a.oneOf(['single', 'multi', 'controlled', 'none']),
   rowSelection: external_prop_types_default.a.oneOf(['all', 'some', 'none']),
   stripeRows: external_prop_types_default.a.bool,
@@ -4742,7 +4789,8 @@ var Table_defaultProps = {
   headType: 'inline',
   rowExpansion: 'none',
   rowSelection: 'none',
-  resizableFillLayout: false
+  resizableFillLayout: false,
+  primaryColumnIndex: 0
 };
 
 var Table_Table = /*#__PURE__*/function (_Component) {
@@ -5137,6 +5185,7 @@ var Table_Table = /*#__PURE__*/function (_Component) {
         actions: validActions.length > 0,
         movableColumns: !!this.props.onRequestMoveColumn,
         onRequestMoveRow: this.props.onRequestMoveRow,
+        primaryColumnIndex: this.props.primaryColumnIndex,
         rowExpansion: this.props.rowExpansion,
         stripeRows: this.props.stripeRows
       });

package/Text.js

@@ -1353,7 +1353,7 @@ module.exports = require("@splunk/react-icons/SVG");
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return Search; });
 /* 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_Search__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(54);
+/* harmony import */ var _splunk_react_icons_Search__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(56);
 /* harmony import */ var _splunk_react_icons_Search__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_splunk_react_icons_Search__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);
@@ -1417,7 +1417,7 @@ module.exports = require("lodash/omit");
 
 /***/ }),
 
-/***/ 54:
+/***/ 56:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-icons/Search");

package/TextArea.js

@@ -196,7 +196,7 @@ var external_prop_types_ = __webpack_require__(1);
 var external_prop_types_default = /*#__PURE__*/__webpack_require__.n(external_prop_types_);
 
 // EXTERNAL MODULE: external "lodash/defer"
-var defer_ = __webpack_require__(53);
+var defer_ = __webpack_require__(55);
 var defer_default = /*#__PURE__*/__webpack_require__.n(defer_);
 
 // EXTERNAL MODULE: external "lodash/has"
@@ -1295,7 +1295,7 @@ module.exports = require("lodash/throttle");
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return Search; });
 /* 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_Search__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(54);
+/* harmony import */ var _splunk_react_icons_Search__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(56);
 /* harmony import */ var _splunk_react_icons_Search__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_splunk_react_icons_Search__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);
@@ -1359,14 +1359,14 @@ module.exports = require("lodash/omit");
 
 /***/ }),
 
-/***/ 53:
+/***/ 55:
 /***/ (function(module, exports) {
 
 module.exports = require("lodash/defer");
 
 /***/ }),
 
-/***/ 54:
+/***/ 56:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-icons/Search");

package/Typography.js

@@ -152,7 +152,7 @@ var propTypes = {
   variant: external_prop_types_default.a.oneOf(mixins_["typographyVariants"]),
   size: external_prop_types_default.a.number,
   lineHeight: external_prop_types_default.a.number,
-  color: external_prop_types_default.a.oneOf(['active', 'default', 'disabled', 'inverted', 'muted']),
+  color: external_prop_types_default.a.oneOf(['active', 'default', 'disabled', 'inverted', 'muted', 'inherit']),
   weight: external_prop_types_default.a.oneOf([300, 400, 500, 600, 700, 800, 900, 'light', 'normal', 'semiBold', 'bold', 'extraBold', 'heavy']),
   withReset: external_prop_types_default.a.bool
 };

package/WaitSpinner.js

@@ -127,7 +127,7 @@ var external_prop_types_ = __webpack_require__(1);
 var external_prop_types_default = /*#__PURE__*/__webpack_require__.n(external_prop_types_);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/AnimationToggle"
-var AnimationToggle_ = __webpack_require__(47);
+var AnimationToggle_ = __webpack_require__(48);
 
 // EXTERNAL MODULE: external "@splunk/themes"
 var themes_ = __webpack_require__(0);
@@ -288,7 +288,7 @@ module.exports = require("@splunk/ui-utils/i18n");
 
 /***/ }),
 
-/***/ 47:
+/***/ 48:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/AnimationToggle");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@splunk/react-ui",
-  "version": "4.15.0",
+  "version": "4.16.0",
   "description": "Library of React components that implement the Splunk design language",
   "license": "Apache-2.0",
   "author": "Splunk Inc.",
@@ -39,7 +39,7 @@
   },
   "dependencies": {
     "@splunk/react-icons": "^3.3.1",
-    "@splunk/themes": "^0.13.1",
+    "@splunk/themes": "^0.14.0",
     "@splunk/ui-utils": "^1.5.2",
     "@types/commonmark": "^0.27.0",
     "@types/lodash": "^4.14.156",
@@ -68,11 +68,11 @@
     "@cypress/webpack-dev-server": "^1.8.2",
     "@splunk/babel-preset": "^3.0.0",
     "@splunk/cicd-tools": "^0.5.0",
-    "@splunk/docs-gen": "1.0.0-beta.1",
+    "@splunk/docs-gen": "1.0.0-beta.2",
     "@splunk/eslint-config": "^4.0.0",
-    "@splunk/react-docs": "1.0.0-beta.1",
+    "@splunk/react-docs": "1.0.0-beta.2",
     "@splunk/stylelint-config": "^4.0.0",
-    "@splunk/test-runner-utils": "^0.4.0",
+    "@splunk/test-runner-utils": "^0.4.1",
     "@splunk/wdio-functional-test-runner": "^10.1.0",
     "@splunk/webpack-configs": "^6.0.0",
     "@storybook/addon-a11y": "^6.5.9",
@@ -143,7 +143,6 @@
     "stylelint": "^13.0.0",
     "ts-loader": "^6.2.1",
     "typescript": "^4.0.5",
-    "wdio-image-comparison-service": "^1.9.0",
     "webpack": "^4.16.2",
     "webpack-cli": "^4.9.2",
     "webpack-dev-server": "^4.7.4",

package/types/src/Button/Button.d.ts

@@ -12,7 +12,7 @@ interface ButtonPropsBase {
     /** Returns a value on click. Use when composing or testing. */
     action?: string;
     /** Changes the style of the button.
-     * @themeNotes Enterprise themes support the following appearances:`default`, `primary`, `secondary`, and `pill`. Prisma themes support the `default`, `primary`, `secondary`, `destructive`, `toggle` and `flat` appearances.
+     * @themeNotes Enterprise themes support the following appearances:`default`, `primary`, `secondary`, `destructive` and `pill`. Prisma themes support the `default`, `primary`, `secondary`, `destructive`, `toggle` and `flat` appearances.
      */
     appearance?: 'default' | 'secondary' | 'primary' | 'destructive' | 'pill' | 'toggle' | 'flat';
     /** Removes the right border and border-radius of the button so you can
@@ -29,7 +29,9 @@ interface ButtonPropsBase {
     elementRef?: React.Ref<HTMLAnchorElement | HTMLButtonElement>;
     /** Turns the button red. If you use this prop, apply other error
      * indicators, such as an error message, to meet accessibility
-     * requirements. */
+     * requirements.
+     * @deprecated
+     * */
     error?: boolean;
     /** Applies the text that displays on the button. */
     label?: React.ReactNode;
@@ -68,6 +70,7 @@ declare class Button extends Component<ButtonProps> {
     static propTypes: React.WeakValidationMap<ClassComponentProps<ButtonPropsBase, Required<Pick<ButtonPropsBase, "disabled" | "selected" | "appearance" | "inline" | "error" | "openInNewContext" | "append" | "prepend" | "isMenu">>, "button", never>> | React.WeakValidationMap<ClassComponentProps<ButtonPropsBase, Required<Pick<ButtonPropsBase, "disabled" | "selected" | "appearance" | "inline" | "error" | "openInNewContext" | "append" | "prepend" | "isMenu">>, "a", "href">>;
     static defaultProps: Required<Pick<ButtonPropsBase, "disabled" | "selected" | "appearance" | "inline" | "error" | "openInNewContext" | "append" | "prepend" | "isMenu">>;
     static [legacyRefMode]: boolean;
+    constructor(props: Readonly<ButtonProps>);
     private handleClick;
     private handleMount;
     /**

package/types/src/Button/docs/examples/Basic.d.ts

@@ -1,2 +1,2 @@
-declare function Buttons(): JSX.Element;
-export default Buttons;
+declare function Basic(): JSX.Element;
+export default Basic;