@splunk/react-ui 4.5.3 → 4.8.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,11 +1,13 @@
 {
   "name": "@splunk/react-ui",
-  "version": "4.5.3",
+  "version": "4.8.0",
   "description": "Library of React components that implement the Splunk design language",
   "license": "Apache-2.0",
   "author": "Splunk Inc.",
   "scripts": {
-    "build": "cross-env NODE_ENV=production webpack --bail && yarn types:build && yarn build-storybook",
+    "build": "cross-env NODE_ENV=production webpack && yarn types:build && yarn build-storybook",
+    "docs": "NODE_ENV=production webpack --config docs.gen.webpack.config.js",
+    "docs:start": "webpack serve --config docs.gen.webpack.config.js",
     "eslint": "eslint src .storybook --ext \".ts,.tsx,.js,.jsx\"",
     "eslint:fix": "yarn run eslint --fix",
     "eslint:ci": "yarn run eslint -f junit -o test-reports/lint-results.xml",
@@ -22,18 +24,20 @@
     "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"
+    "types:start": "yarn types:build --watch"
   },
   "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,8 +60,12 @@
   },
   "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/docs-gen": "^0.11.1",
     "@splunk/eslint-config": "^4.0.0",
+    "@splunk/react-docs": "^0.11.0",
     "@splunk/stylelint-config": "^4.0.0",
     "@splunk/test-runner-utils": "^0.4.0",
     "@splunk/wdio-functional-test-runner": "^10.1.0",
@@ -66,6 +74,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 +96,16 @@
     "chai": "^3.5.0",
     "core-js": "^3.6.4",
     "cross-env": "^6.0.3",
+    "cypress": "^9.5.1",
+    "cypress-real-events": "^1.7.0",
+    "docgen-loader": "^1.3.4",
     "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",
@@ -104,8 +121,9 @@
     "prompt": "^1.0.0",
     "raw-loader": "^0.5.1",
     "react": "^16.12.0",
+    "react-docgen": "^5.4.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",
@@ -113,7 +131,8 @@
     "typescript": "^4.0.5",
     "wdio-image-comparison-service": "^1.9.0",
     "webpack": "^4.16.2",
-    "webpack-cli": "^3.1.0",
+    "webpack-cli": "^4.9.2",
+    "webpack-dev-server": "^4.7.4",
     "webpack-merge": "^4.1.3"
   },
   "engines": {

package/stubs-splunkui.d.ts

@@ -1,6 +1,7 @@
 declare const __DEV__: boolean;
 declare const __EXAMPLES__: any;
 declare const __OPTIONS__: any;
+declare const __EXAMPLES_OFFSET__: number;
 
 declare module '__FONTS_IMPORT__/*' {
     const component: string;

package/types/src/Accordion/docs/examples/Controlled.d.ts

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

package/types/src/Accordion/docs/examples/FixedHeight.d.ts

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

package/types/src/Accordion/docs/examples/InDropdown.d.ts

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

package/types/src/Accordion/docs/examples/Inset.d.ts

@@ -0,0 +1,2 @@
+declare const Inset: () => JSX.Element;
+export default Inset;

package/types/src/Accordion/docs/examples/Uncontrolled.d.ts

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

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

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

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/AnimationToggle/docs/examples/Provider.d.ts

@@ -0,0 +1,11 @@
+import { Component } from 'react';
+declare class Provider extends Component<{}, {
+    animatedTransitions: boolean;
+    open: boolean;
+}> {
+    constructor(props: {});
+    handleButtonClick: () => void;
+    handleSwitchClick: () => void;
+    render(): JSX.Element;
+}
+export default Provider;

package/types/src/AnimationToggle/docs/examples/ReducedMotionComponent.d.ts

@@ -0,0 +1,2 @@
+declare const ReducedMotionComponent: () => JSX.Element;
+export default ReducedMotionComponent;

package/types/src/AnimationToggle/docs/examples/ReducedMotionHook.d.ts

@@ -0,0 +1,2 @@
+declare const ReducedMotionHook: () => JSX.Element;
+export default ReducedMotionHook;

package/types/src/AnimationToggle/docs/examples/ToggleComponent.d.ts

@@ -0,0 +1,9 @@
+import { Component } from 'react';
+declare class ToggleComponent extends Component<{}, {
+    animatedTransitions: boolean;
+}> {
+    constructor(props: {});
+    handleSwitchClick: () => void;
+    render(): JSX.Element;
+}
+export default ToggleComponent;

package/types/src/AnimationToggle/docs/examples/ToggleHook.d.ts

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/types/src/Button/docs/examples/prisma/Block.d.ts

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

package/types/src/Button/docs/examples/prisma/Disabled.d.ts

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

package/types/src/Button/docs/examples/prisma/Icons.d.ts

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

package/types/src/Button/docs/examples/prisma/Menus.d.ts

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

package/types/src/Button/docs/examples/prisma/To.d.ts

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

package/types/src/Button/docs/examples/prisma/Truncated.d.ts

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

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

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

package/types/src/ButtonGroup/docs/examples/prisma/Basic.d.ts

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

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/Card/docs/examples/Basic.d.ts

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

package/types/src/Card/docs/examples/Clickable.d.ts

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

package/types/src/Card/docs/examples/Full.d.ts

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

package/types/src/Card/docs/examples/Images.d.ts

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

package/types/src/Card/docs/examples/Selectable.d.ts

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

package/types/src/Card/docs/examples/prisma/Actions.d.ts

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

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

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

package/types/src/CardLayout/docs/examples/Interactive.d.ts

@@ -0,0 +1,28 @@
+import { Component } from 'react';
+import { NumberChangeHandler } from '@splunk/react-ui/Number';
+import { SwitchClickHandler } from '@splunk/react-ui/Switch';
+interface InteractiveState {
+    value?: number;
+    minWidth?: number;
+    maxWidth?: number;
+    gutterSize?: number;
+    wrapCards: boolean;
+    alignCards: 'left' | 'center' | 'right';
+    setAsWidth: boolean;
+    hasMaxWidth: boolean;
+}
+declare class Interactive extends Component<{}, InteractiveState> {
+    constructor(props: {});
+    handleChangeAmount: NumberChangeHandler;
+    handleChangeMinWidth: NumberChangeHandler;
+    handleChangeMaxWidth: NumberChangeHandler;
+    handleChangeGutter: NumberChangeHandler;
+    handleChangeWrap: SwitchClickHandler;
+    handleChangeAlign: (e: any, { value }: {
+        value: any;
+    }) => void;
+    handleSetAsWidth: SwitchClickHandler;
+    handleHasMaxWidth: SwitchClickHandler;
+    render(): JSX.Element;
+}
+export default Interactive;

package/types/src/Chip/docs/examples/Appearance.d.ts

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

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

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

package/types/src/Chip/docs/examples/CustomColors.d.ts

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

package/types/src/Chip/docs/examples/Disabled.d.ts

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

package/types/src/Chip/docs/examples/Icon.d.ts

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

package/types/src/Chip/docs/examples/Removable.d.ts

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

package/types/src/Chip/docs/examples/prisma/Appearance.d.ts

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

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;