@splunk/react-ui 4.5.2 → 4.7.0

package/TransitionOpen.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 167);
+/******/ 	return __webpack_require__(__webpack_require__.s = 175);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -101,7 +101,7 @@ module.exports = require("prop-types");
 
 /***/ }),
 
-/***/ 167:
+/***/ 175:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -126,10 +126,10 @@ var external_lodash_ = __webpack_require__(4);
 var Animation_ = __webpack_require__(30);
 
 // EXTERNAL MODULE: external "@splunk/ui-utils/focus"
-var focus_ = __webpack_require__(25);
+var focus_ = __webpack_require__(26);
 
 // EXTERNAL MODULE: external "@splunk/ui-utils/style"
-var style_ = __webpack_require__(39);
+var style_ = __webpack_require__(40);
 
 // EXTERNAL MODULE: external "react-spring"
 var external_react_spring_ = __webpack_require__(18);
@@ -291,7 +291,8 @@ var TransitionOpen_TransitionOpen = /*#__PURE__*/function (_Component) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "internalRender", function (_ref) {
-      var value = _ref.value;
+      var value = _ref.value,
+          transform = _ref.transform;
       var _this$props2 = _this.props,
           animation = _this$props2.animation,
           className = _this$props2.className,
@@ -304,37 +305,19 @@ var TransitionOpen_TransitionOpen = /*#__PURE__*/function (_Component) {
           outerId = _this$props2.outerId,
           outerStyle = _this$props2.outerStyle;
       var animating = _this.state.animating;
-      var offset = value.to(function (v) {
-        return _this.state.value || 0 - v;
-      });
-      var transform;
       var dimension;
 
       if (animating) {
         switch (animation) {
           case 'slideFromTop':
-            transform = "translateY(-".concat(offset, "px)");
-            dimension = 'height';
-            break;
-
           case 'slideFromBottom':
+          case 'expandHeight':
           case 'none':
             dimension = 'height';
             break;
 
           case 'slideFromLeft':
-            transform = "translateX(".concat(-offset, "px)");
-            dimension = 'width';
-            break;
-
           case 'slideFromRight':
-            dimension = 'width';
-            break;
-
-          case 'expandHeight':
-            dimension = 'height';
-            break;
-
           case 'expandWidth':
             dimension = 'width';
             break;
@@ -365,6 +348,58 @@ var TransitionOpen_TransitionOpen = /*#__PURE__*/function (_Component) {
       }), children));
     });
 
+    _defineProperty(_assertThisInitialized(_this), "getSpringTransition", function () {
+      var _this$props3 = _this.props,
+          open = _this$props3.open,
+          animation = _this$props3.animation;
+      var value = _this.state.value;
+      var toValue = {
+        value: open ? value : 0
+      };
+      var fromValue = {
+        value: open ? 0 : value
+      };
+      var config = {
+        precision: 1
+      }; // Only use precision when not using transform, otherwise transform animation will break
+      // Expansion doesn't require a valid value; the subsequent render animates it.
+
+      if (animation === 'expandWidth' || animation === 'expandHeight' || animation === 'none') {
+        return {
+          to: toValue,
+          config: config
+        };
+      } // Slide transitions require a valid value, render without transition first.
+
+
+      if (!value) {
+        return null;
+      }
+
+      if (animation !== 'slideFromTop' && animation !== 'slideFromLeft') {
+        // Return the standard transition if not using a transform.
+        return {
+          to: toValue,
+          from: fromValue,
+          config: config
+        };
+      } // The top and left directions require an additional transform of their inner content to match the outer dimension animation.
+      // This is needed to achieve a clipping effect from the outer div, rather than the consumer providing their own.
+
+
+      var orientation = animation === 'slideFromTop' ? 'Y' : 'X';
+      var toTransform = "translate".concat(orientation, "(").concat(open ? 0 : -value, "px)");
+      var fromTransform = "translate".concat(orientation, "(").concat(open ? -value : 0, "px)");
+      return {
+        to: _objectSpread({
+          transform: toTransform
+        }, toValue),
+        from: _objectSpread({
+          transform: fromTransform
+        }, fromValue)
+      };
+    });
+
     _this.state = {
       animating: props.animateOnMount ? props.open : false,
       innerEl: null,
@@ -379,7 +414,7 @@ var TransitionOpen_TransitionOpen = /*#__PURE__*/function (_Component) {
     value: function componentDidUpdate() {
       var value = this.getValue(this.state.innerEl);
 
-      if (this.state.value !== value) {
+      if (this.state.value !== value && !this.state.animating) {
         this.setState({
           value: value
         }); // eslint-disable-line react/no-did-update-set-state
@@ -388,21 +423,11 @@ var TransitionOpen_TransitionOpen = /*#__PURE__*/function (_Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this$props3 = this.props,
-          open = _this$props3.open,
-          animation = _this$props3.animation;
-      var value = this.state.value;
-      var animateTo = open ? value : 0;
-      return /*#__PURE__*/external_react_default.a.createElement(Animation_["Spring"], {
-        to: {
-          value: animateTo || 0
-        },
+      var animation = this.props.animation;
+      return /*#__PURE__*/external_react_default.a.createElement(Animation_["Spring"], _extends({}, this.getSpringTransition(), {
         immediate: animation === 'none',
-        onRest: this.handleRest,
-        config: {
-          precision: 1
-        }
-      }, // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        onRest: this.handleRest
+      }), // eslint-disable-next-line @typescript-eslint/no-explicit-any
       this.internalRender);
     }
   }]);
@@ -445,7 +470,7 @@ module.exports = require("react");
 
 /***/ }),
 
-/***/ 25:
+/***/ 26:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/ui-utils/focus");
@@ -466,17 +491,17 @@ module.exports = require("@splunk/react-ui/Animation");
 
 /***/ }),
 
-/***/ 39:
+/***/ 4:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/ui-utils/style");
+module.exports = require("lodash");
 
 /***/ }),
 
-/***/ 4:
+/***/ 40:
 /***/ (function(module, exports) {
 
-module.exports = require("lodash");
+module.exports = require("@splunk/ui-utils/style");
 
 /***/ })
 

package/WaitSpinner.js

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

package/cypress/plugins/index.ts

@@ -0,0 +1,15 @@
+/* eslint-env node */
+
+import { startDevServer } from '@cypress/webpack-dev-server';
+import webpackConfig from '../../webpack.test.config';
+
+/**
+ * @type {Cypress.PluginConfig}
+ */
+module.exports = (on, config) => {
+    if (config.testingType === 'component') {
+        on('dev-server:start', (options) => startDevServer({ options, webpackConfig }));
+    }
+
+    return config;
+};

package/cypress/support/commands.ts

@@ -0,0 +1 @@
+import '@testing-library/cypress/add-commands';

package/cypress/support/index.ts

@@ -0,0 +1,10 @@
+import { setGlobalConfig } from '@storybook/testing-react';
+import { configure } from '@testing-library/cypress';
+import 'cypress-real-events/support';
+
+import './commands';
+import * as sbPreview from '../../.storybook/preview';
+
+configure({ testIdAttribute: 'data-test' });
+
+setGlobalConfig(sbPreview);

package/cypress.json

@@ -0,0 +1,12 @@
+{
+  "baseUrl": "http://localhost:8080",
+  "env": {},
+  "defaultCommandTimeout": 1000,
+  "fixturesFolder": false,
+  "video": false,
+  "videoUploadOnPasses": false,
+  "component": {
+    "componentFolder": "src",
+    "testFiles": "**/**/tests/*.spec.tsx"
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@splunk/react-ui",
-  "version": "4.5.2",
+  "version": "4.7.0",
   "description": "Library of React components that implement the Splunk design language",
   "license": "Apache-2.0",
   "author": "Splunk Inc.",
@@ -22,6 +22,8 @@
     "test:functional:coverage": "cross-env NODE_ENV=test-coverage splunk-wdio-functional-test-runner functional.local.conf.js --coverage",
     "test:functional:ci": "cross-env NODE_ENV=test-coverage splunk-wdio-functional-test-runner functional.ci.conf.js --coverage-maps",
     "test:functional:cloud": "splunk-wdio-functional-test-runner functional.cloud.conf.js",
+    "test:cypress": "yarn cypress open-ct",
+    "test:cypress:ci": "yarn cypress run-ct",
     "test:visual:cloud": "splunk-wdio-functional-test-runner functional.visual.conf.js",
     "types:build": "tsc --emitDeclarationOnly --declaration --declarationDir ./types && node ./scripts/pruneTypes.js",
     "types:start": "tsc --emitDeclarationOnly --declaration --declarationDir ./types --watch"
@@ -29,11 +31,11 @@
   "peerDependencies": {
     "react": "^16.8",
     "react-dom": "^16.8",
-    "styled-components": "^5.1"
+    "styled-components": "5.1.1"
   },
   "dependencies": {
-    "@splunk/react-icons": "^3.1.0",
-    "@splunk/themes": "^0.10.0",
+    "@splunk/react-icons": "^3.2.0",
+    "@splunk/themes": "^0.11.0",
     "@splunk/ui-utils": "^1.4.0",
     "@types/commonmark": "^0.27.0",
     "@types/lodash": "^4.14.156",
@@ -56,6 +58,8 @@
   },
   "devDependencies": {
     "@babel/core": "^7.2.0",
+    "@cypress/react": "^5.12.4",
+    "@cypress/webpack-dev-server": "^1.8.2",
     "@splunk/babel-preset": "^3.0.0",
     "@splunk/eslint-config": "^4.0.0",
     "@splunk/stylelint-config": "^4.0.0",
@@ -66,6 +70,11 @@
     "@storybook/addon-essentials": "^6.3.0",
     "@storybook/csf": "^0.0.1",
     "@storybook/react": "^6.3.0",
+    "@storybook/testing-react": "^1.2.3",
+    "@testing-library/cypress": "^8.0.2",
+    "@testing-library/jest-dom": "^5.16.1",
+    "@testing-library/react": "^12.1.2",
+    "@testing-library/react-hooks": "^7.0.2",
     "@types/chai": "^3.5.2",
     "@types/enzyme": "^3.10.5",
     "@types/jest": "^25.2.1",
@@ -83,12 +92,15 @@
     "chai": "^3.5.0",
     "core-js": "^3.6.4",
     "cross-env": "^6.0.3",
+    "cypress": "^9.5.1",
+    "cypress-real-events": "^1.7.0",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.2",
     "eslint": "^7.14.0",
     "eslint-config-airbnb": "^18.2.1",
     "eslint-config-prettier": "^6.15.0",
     "eslint-import-resolver-webpack": "^0.13.0",
+    "eslint-plugin-cypress": "^2.12.1",
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-react": "^7.21.5",
@@ -105,7 +117,7 @@
     "raw-loader": "^0.5.1",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
-    "react-test-renderer": "^16.12.0",
+    "react-test-renderer": "^16.13.1",
     "sinon": "^2.1.0",
     "styled-components": "5.1.1",
     "stylelint": "^13.0.0",
@@ -114,6 +126,7 @@
     "wdio-image-comparison-service": "^1.9.0",
     "webpack": "^4.16.2",
     "webpack-cli": "^3.1.0",
+    "webpack-dev-server": "^4.7.4",
     "webpack-merge": "^4.1.3"
   },
   "engines": {

package/types/src/Animation/Animation.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { SpringComponentProps as RSSpringComponentProps, TransitionComponentProps as RSTransitionComponentProps } from 'react-spring';
 /**
  * Wrappers to use in place of `Spring` and `Transition` from `react-spring`.

package/types/src/Calendar/DateTable.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import PropTypes from 'prop-types';
 import { DayClickHandler } from './Day';
 import { ComponentProps } from '../utils/types';

package/types/src/Clickable/Clickable.d.ts

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import { legacyRefMode } from '@splunk/react-ui/Dropdown';
 import { NavigationProviderClickHandler } from './NavigationProvider';
 import { ClassComponentProps } from '../utils/types';
-export declare const isInternalLink: (to: string) => boolean;
+export declare const isInternalLink: (to: string | undefined) => boolean;
 interface ClickablePropsBase {
     children?: React.ReactNode;
     /**
@@ -25,6 +25,13 @@ interface ClickablePropsBase {
      * Ignored if not in link mode.
      */
     openInNewContext?: boolean;
+    /**
+     * The text representation of the navigational link.
+     * This should be provided if child content is not a string.
+     *
+     * Ignored if not in link mode.
+     */
+    navigationLabel?: string;
     /**
      * A URL for a link. If set and not disabled, an `a` element is used instead
      * of a `button` element (link mode).
@@ -41,7 +48,10 @@ declare type ClickableProps = ClickableButtonProps | ClickableLinkProps;
  */
 declare class Clickable extends Component<ClickableProps> {
     private el;
-    static contextType: React.Context<NavigationProviderClickHandler | undefined>;
+    static contextType: React.Context<{
+        onClick?: NavigationProviderClickHandler | undefined;
+        prefix?: string | undefined;
+    }>;
     static propTypes: React.WeakValidationMap<ClassComponentProps<ClickablePropsBase, Required<Pick<ClickablePropsBase, "disabled" | "openInNewContext">>, "button", never>> | React.WeakValidationMap<ClassComponentProps<ClickablePropsBase, Required<Pick<ClickablePropsBase, "disabled" | "openInNewContext">>, "a", "href">>;
     static defaultProps: Required<Pick<ClickablePropsBase, "disabled" | "openInNewContext">>;
     static [legacyRefMode]: boolean;

package/types/src/Clickable/NavigationProvider.d.ts

@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 declare type NavigationProviderClickHandler = (event: React.MouseEvent<HTMLAnchorElement>, data: {
     openInNewContext?: boolean;
     to: string;
+    label?: string;
 }) => void;
 interface NavigationProviderProps {
     children?: React.ReactNode;
@@ -12,17 +13,26 @@ interface NavigationProviderProps {
      * The function takes the event and an options argument with `to` and `openInNewContext`
      */
     onClick?: NavigationProviderClickHandler;
+    /**
+     * If set, all links that use the NavigationProvider's context will have this prepended to them.
+     */
+    prefix?: string;
 }
-declare const NavigationContext: React.Context<NavigationProviderClickHandler | undefined>;
+declare type NavigationContextValue = {
+    onClick?: NavigationProviderClickHandler;
+    prefix?: string;
+};
+declare const NavigationContext: React.Context<NavigationContextValue>;
 /**
  * Used to provide an override for the `onClick` for links for single page applications so that
  * internal links can navigate without a page reload.
  */
-declare function NavigationProvider({ children, onClick }: NavigationProviderProps): JSX.Element;
+declare function NavigationProvider({ children, onClick, prefix }: NavigationProviderProps): JSX.Element;
 declare namespace NavigationProvider {
     var propTypes: {
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         onClick: PropTypes.Requireable<(...args: any[]) => any>;
+        prefix: PropTypes.Requireable<string>;
     };
 }
 export { NavigationContext, NavigationProvider, NavigationProviderClickHandler };