@splunk/react-ui 4.24.0 → 4.26.0

package/cypress/README.md

@@ -0,0 +1,11 @@
+#TS Configuration
+
+Cypress' expect type clashes with Jest's: see https://docs.cypress.io/guides/tooling/typescript-support#Clashing-types-with-Jest.
+To get around this we use separate tsconfigs to check src files from Cypress tests (.spec.tsx) files, following [cypress' example](https://github.com/cypress-io/cypress-and-jest-typescript-example)
+
+There are some notable specifics in the cypress config that need to be maintained:
+* Cypress tests only need to be compiled but do not have public types, so this config sets `"noEmit": true,`
+* When types are specified they must be relative paths to the tsconfig, hence the `../node_modules`.
+* The inheritance method when using `extends` means that `include` and `exclude` entries need to be explicitly listed or repeated. This affects:
+    * Common types, jest and cypress types.
+    * `include` must be repeated in `cypress.tsconfig` so that `.spec` files are not excluded

package/cypress/support/commands.ts

@@ -1 +1,2 @@
 import '@testing-library/cypress/add-commands';
+import 'cypress-real-events';

package/cypress/support/component.ts

@@ -1,5 +1,4 @@
 import { mount } from 'cypress/react';
-import 'cypress-real-events';
 import { setGlobalConfig } from '@storybook/testing-react';
 import { configure } from '@testing-library/cypress';
 

package/cypress/tsconfig.cypress.json

@@ -0,0 +1,14 @@
+// Cypress tests (.spec.tsx files) need a separate config to avoid clashing types with jest, see README for more details
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "noEmit": true,
+    "types": [
+      "../../../node_modules/@testing-library/cypress",
+      "../../../node_modules/cypress",
+      "../../../node_modules/cypress-real-events"
+    ]
+  },
+  "include": ["../stubs-*.d.ts", "../src/**/tests/*.spec.tsx", "../src/**/tests/*.spec.ts"],
+  "exclude": ["../src/docs/*"]
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@splunk/react-ui",
-  "version": "4.24.0",
+  "version": "4.26.0",
   "description": "Library of React components that implement the Splunk design language",
   "license": "Apache-2.0",
   "author": "Splunk Inc.",
@@ -29,7 +29,8 @@
     "test:watch": "jest --watch",
     "test:cypress": "yarn cypress open --component",
     "test:cypress:ci": "yarn cypress run --component",
-    "types:build": "tsc --emitDeclarationOnly --declaration --declarationDir ./types && node ./scripts/pruneTypes.js",
+    "types:build": "yarn types:build:cypress && tsc --emitDeclarationOnly --declaration --declarationDir ./types && node ./scripts/pruneTypes.js",
+    "types:build:cypress": "tsc --p cypress/tsconfig.cypress.json",
     "types:start": "yarn types:build --watch"
   },
   "peerDependencies": {
@@ -41,16 +42,9 @@
     "@dnd-kit/core": "6.0.8",
     "@dnd-kit/sortable": "7.0.2",
     "@dnd-kit/utilities": "3.2.1",
-    "@splunk/react-icons": "^4.2.0",
+    "@splunk/react-icons": "^4.3.0",
     "@splunk/themes": "^0.16.4",
     "@splunk/ui-utils": "^1.6.0",
-    "@types/commonmark": "^0.27.6",
-    "@types/lodash": "^4.14.156",
-    "@types/react": "^16.9.38",
-    "@types/react-dom": "^16.9.8",
-    "@types/react-resize-detector": "^3.1.1",
-    "@types/styled-components": "^5.1.0",
-    "@types/tinycolor2": "^1.4.2",
     "commonmark": "^0.30.0",
     "commonmark-react-renderer": "^4.3.2",
     "decimal.js-light": "^2.2.3",
@@ -86,11 +80,17 @@
     "@testing-library/react": "^12.1.2",
     "@testing-library/react-hooks": "^7.0.2",
     "@testing-library/user-event": "^14.4.3",
+    "@types/commonmark": "^0.27.6",
     "@types/jest": "^26.0.0",
-    "@types/mocha": "^7.0.2",
+    "@types/lodash": "^4.14.156",
     "@types/node": "^10.17.26",
-    "@types/prismjs": "^1.16.1",
+    "@types/prismjs": "^1.26.3",
+    "@types/react": "^16.9.38",
+    "@types/react-dom": "^16.9.8",
+    "@types/react-resize-detector": "^3.1.1",
     "@types/sinon": "^4.3.3",
+    "@types/styled-components": "^5.1.0",
+    "@types/tinycolor2": "^1.4.2",
     "@types/webdriverio": "^5.0.0",
     "@types/webpack-env": "^1.15.2",
     "@typescript-eslint/eslint-plugin": "^4.8.2",
@@ -126,7 +126,7 @@
     "jest-stare": "^2.4.1",
     "mkdirp": "^0.5.1",
     "playwright": "^1.23.3",
-    "prismjs": "^1.25.0",
+    "prismjs": "^1.29.0",
     "prompt": "^1.0.0",
     "raw-loader": "^4.0.2",
     "react": "^16.12.0",

package/types/src/Breadcrumbs/Breadcrumbs.d.ts

@@ -2,6 +2,11 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Item from './Item';
 import { ComponentProps } from '../utils/types';
+/** @public */
+declare type BreadcrumbsClickHandler = (event: React.MouseEvent<HTMLAnchorElement>, data: {
+    label?: string;
+    to: string;
+}) => void;
 interface BreadcrumbsPropsBase {
     /**
      * `children` must be of type `Breadcrumbs.Item`. The last child will be marked as the current page.
@@ -15,17 +20,28 @@ interface BreadcrumbsPropsBase {
      * By default, the current page is a dimmed link. This prop changes this behavior by enabling the current page link.
      */
     enableCurrentPage?: boolean;
+    /**
+     * An `onClick` handler for all Items.
+     * The function takes the event and an options argument with `to` and `label`.
+     */
+    onClick?: BreadcrumbsClickHandler;
 }
 declare type BreadcrumbsProps = ComponentProps<BreadcrumbsPropsBase, 'nav'>;
-declare function Breadcrumbs({ children, elementRef, enableCurrentPage, ...otherProps }: BreadcrumbsProps): JSX.Element;
+declare type BreadcrumbsContextValue = {
+    onClick?: BreadcrumbsClickHandler;
+    prefix?: string;
+};
+declare const BreadcrumbsContext: React.Context<BreadcrumbsContextValue>;
+declare function Breadcrumbs({ children, elementRef, enableCurrentPage, onClick, ...otherProps }: BreadcrumbsProps): JSX.Element;
 declare namespace Breadcrumbs {
     var propTypes: {
         children: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
         elementRef: PropTypes.Requireable<object>;
         enableCurrentPage: PropTypes.Requireable<boolean>;
+        onClick: PropTypes.Requireable<(...args: any[]) => any>;
     };
     var defaultProps: Required<Pick<BreadcrumbsPropsBase, "enableCurrentPage">>;
     var Item: typeof import("./Item").default;
 }
 export default Breadcrumbs;
-export { Item };
+export { Item, BreadcrumbsContext, BreadcrumbsClickHandler };

package/types/src/Breadcrumbs/Item.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { BreadcrumbsClickHandler } from './Breadcrumbs';
 import { ComponentProps } from '../utils/types';
 interface ItemPropsBase {
     /**
@@ -22,6 +23,10 @@ interface ItemPropsBase {
      * The label of the `Item`.
      */
     label: string;
+    /**
+     * An `onClick` handler for the current `Item`.
+     */
+    onClick?: BreadcrumbsClickHandler;
     /**
      * Adornment at the start of the label.
      */
@@ -32,7 +37,7 @@ interface ItemPropsBase {
     to: string;
 }
 declare type ItemProps = ComponentProps<ItemPropsBase, 'a'>;
-declare function Item({ enableCurrentPage, endAdornment, isCurrent, label, startAdornment, to, ...otherProps }: ItemProps): JSX.Element;
+declare function Item({ enableCurrentPage, endAdornment, isCurrent, label, onClick, startAdornment, to, ...otherProps }: ItemProps): JSX.Element;
 declare namespace Item {
     var propTypes: {
         elementRef: PropTypes.Requireable<object>;
@@ -40,6 +45,7 @@ declare namespace Item {
         endAdornment: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         isCurrent: PropTypes.Requireable<boolean>;
         label: PropTypes.Validator<string>;
+        onClick: PropTypes.Requireable<(...args: any[]) => any>;
         startAdornment: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         to: PropTypes.Validator<string>;
     };

package/types/src/Breadcrumbs/docs/examples/CustomizedClick.d.ts

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

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

@@ -21,8 +21,10 @@ interface ButtonPropsBase {
     children?: React.ReactNode;
     /** @private An additional className to add to the button. */
     classNamePrivate?: string;
-    /** Prevents user from clicking the button. */
-    disabled?: boolean;
+    /** Prevents user from clicking the button. If set to `dimmed`, the button
+     * does not respond to mouse events but can still receive focus, and
+     * `aria-disabled` is set to `true`. */
+    disabled?: boolean | 'dimmed';
     /**
      * A React ref which is set to the DOM element when the component mounts and null when it unmounts.
      */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/types/src/ButtonSimple/ButtonSimple.d.ts

@@ -14,8 +14,10 @@ interface ButtonSimplePropsBase {
      * append things to it. */
     append?: boolean;
     children?: React.ReactNode;
-    /** Add a disabled attribute and prevent clicking. */
-    disabled?: boolean;
+    /** Add a disabled attribute and prevent clicking. If set to `dimmed`,
+     * the button does not respond to mouse events but can still receive
+     * focus, and `aria-disabled` is set to `true`. */
+    disabled?: boolean | 'dimmed';
     /**
      * Adds error styling to the button and applies `aria-invalid`.
      */