@splunk/react-ui 4.18.0 → 4.19.0

package/cypress.config.ts

@@ -0,0 +1,19 @@
+import { defineConfig } from 'cypress';
+import webpackConfig from './webpack.test.config.js';
+
+export default defineConfig({
+    env: {},
+    defaultCommandTimeout: 1000,
+    fixturesFolder: false,
+    video: false,
+    videoUploadOnPasses: false,
+    chromeWebSecurity: false,
+    component: {
+        specPattern: '**/**/tests/*.spec.tsx',
+        devServer: {
+            framework: 'react',
+            bundler: 'webpack',
+            webpackConfig,
+        },
+    },
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@splunk/react-ui",
-  "version": "4.18.0",
+  "version": "4.19.0",
   "description": "Library of React components that implement the Splunk design language",
   "license": "Apache-2.0",
   "author": "Splunk Inc.",
@@ -27,8 +27,8 @@
     "test": "jest",
     "test:ci": "JEST_JUNIT_OUTPUT_DIR=./test-reports JEST_JUNIT_OUTPUT_NAME=unit-results.xml JEST_JUNIT_CLASSNAME=unit yarn run test --ci --reporters=default jest-junit --coverage --coverageDirectory=coverage_report/coverage_maps_unit --coverageReporters=cobertura",
     "test:watch": "jest --watch",
-    "test:cypress": "yarn cypress open-ct",
-    "test:cypress:ci": "yarn cypress run-ct",
+    "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:start": "yarn types:build --watch"
   },
@@ -38,6 +38,9 @@
     "styled-components": "^5.3.10"
   },
   "dependencies": {
+    "@dnd-kit/core": "6.0.8",
+    "@dnd-kit/sortable": "7.0.2",
+    "@dnd-kit/utilities": "3.2.1",
     "@splunk/react-icons": "^4.0.1",
     "@splunk/themes": "^0.16.1",
     "@splunk/ui-utils": "^1.6.0",
@@ -55,7 +58,6 @@
     "moment": "^2.29.4",
     "prop-types": "^15.6.2",
     "react-resize-detector": "^3.2.1",
-    "react-sortable-hoc": "^1.11.0",
     "react-spring": "9.2.4",
     "tinycolor2": "^1.4.1",
     "use-typed-event-listener": "^3.0.0"
@@ -63,8 +65,6 @@
   "devDependencies": {
     "@babel/core": "^7.2.0",
     "@babel/plugin-transform-runtime": "^7.18.6",
-    "@cypress/react": "^5.12.4",
-    "@cypress/webpack-dev-server": "^1.8.2",
     "@splunk/babel-preset": "^4.0.0",
     "@splunk/cicd-tools": "^0.5.0",
     "@splunk/docs-gen": "1.0.0-beta.5",
@@ -80,7 +80,7 @@
     "@storybook/react": "^6.5.9",
     "@storybook/test-runner": "^0.9.0",
     "@storybook/testing-react": "^1.3.0",
-    "@testing-library/cypress": "^8.0.2",
+    "@testing-library/cypress": "^9.0.0",
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^12.1.2",
     "@testing-library/react-hooks": "^7.0.2",
@@ -102,8 +102,8 @@
     "babel-plugin-transform-require-context": "^0.1.1",
     "core-js": "^3.6.4",
     "cross-env": "^6.0.3",
-    "cypress": "^9.5.1",
-    "cypress-real-events": "^1.7.0",
+    "cypress": "^12.17.1",
+    "cypress-real-events": "^1.9.1",
     "docgen-loader": "^1.3.4",
     "eslint": "^7.14.0",
     "eslint-config-airbnb": "^18.2.1",

package/types/src/Clickable/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;

package/types/src/FormRows/FormRows.d.ts

@@ -1,5 +1,4 @@
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
 import Row from './Row';
 import type { RowRequestRemoveHandler, RowWithoutSortable } from './Row';
 import { ClassComponentProps } from '../utils/types';
@@ -33,7 +32,7 @@ declare type FormRowsProps = ClassComponentProps<FormRowsPropsBase, typeof defau
 declare class FormRows extends Component<FormRowsProps, {}> {
     static propTypes: React.WeakValidationMap<ClassComponentProps<FormRowsPropsBase, Required<Pick<FormRowsPropsBase, "header" | "disabled" | "addLabel">>, "div", never>>;
     static defaultProps: Required<Pick<FormRowsPropsBase, "header" | "disabled" | "addLabel">>;
-    static Row: React.ComponentClass<Pick<import("./Row").RowPropsBase, "children" | "value" | "elementRef" | "index" | "onRequestRemove" | "rowIndex"> & Pick<PropTypes.InferProps<React.WeakValidationMap<import("./Row").RowPropsBase>>, never> & Pick<import("./Row").RowPropsBase, never>, any>;
+    static Row: typeof Row;
     /**
      * Static function for adding a row.
      *

package/types/src/FormRows/Row.d.ts

@@ -1,5 +1,4 @@
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
 import FormRowsContext from './FormRowsContext';
 declare type RowKeyDownHandler = (event: React.KeyboardEvent<HTMLDivElement>, data: {
     index: number;
@@ -14,16 +13,10 @@ interface RowPropsBase {
      * A React ref which is set to the DOM element when the component mounts and null when it unmounts.
      */
     elementRef?: React.Ref<HTMLDivElement>;
-    /** Index of the row */
+    /** Index of the row. This is required if the rows are sortable. */
     index?: number;
     /** Callback when remove button is clicked. */
     onRequestRemove?: RowRequestRemoveHandler;
-    /**
-     * @private
-     * Sortable HOC consumes and removes `index`, so we have `rowIndex` to keep
-     * track of it internally.
-     */
-    rowIndex?: number;
     /** The contents of Row */
     value?: React.ReactNode;
 }
@@ -31,10 +24,7 @@ declare class Row extends Component<RowPropsBase, {}> {
     static propTypes: React.WeakValidationMap<RowPropsBase>;
     context: React.ContextType<typeof FormRowsContext>;
     static contextType: React.Context<FormRowsContext>;
-    private handleKeyDown;
-    private handleRequestRemove;
     render(): JSX.Element;
 }
-declare const SortableRow: React.ComponentClass<Pick<RowPropsBase, "children" | "value" | "elementRef" | "index" | "onRequestRemove" | "rowIndex"> & Pick<PropTypes.InferProps<React.WeakValidationMap<RowPropsBase>>, never> & Pick<RowPropsBase, never>, any>;
-export default SortableRow;
+export default Row;
 export type { Row as RowWithoutSortable, RowKeyDownHandler, RowPropsBase, RowRequestRemoveHandler };

package/types/src/FormRows/RowInternal.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+/** @public */
+declare type RowRequestRemoveHandler = (event: React.MouseEvent<HTMLButtonElement>, data: {
+    index: number;
+}) => void;
+interface RowInternalPropsBase {
+    children?: React.ReactNode;
+    /** Index of the row. This is required if the rows are sortable. */
+    index?: number;
+    /** Callback when remove button is clicked. */
+    onRequestRemove?: RowRequestRemoveHandler;
+    renderDragHandle?: () => React.ReactNode;
+    style?: React.CSSProperties;
+    /** The contents of Row */
+    value?: React.ReactNode;
+}
+declare const RowInternal: React.ForwardRefExoticComponent<RowInternalPropsBase & React.RefAttributes<HTMLDivElement>>;
+export default RowInternal;
+export type { RowInternalPropsBase, RowRequestRemoveHandler };

package/types/src/FormRows/SortableList.d.ts

@@ -1,5 +1,11 @@
 import React from 'react';
-declare const SortableList: React.ComponentClass<{
+declare type SortEndHandler = ({ oldIndex, newIndex }: {
+    oldIndex: number;
+    newIndex: number;
+}) => void;
+declare const SortableList: ({ children, onSortEnd, }: {
     children?: React.ReactNode;
-} & import("react-sortable-hoc").SortableContainerProps, any>;
+    onSortEnd: SortEndHandler;
+}) => JSX.Element;
 export default SortableList;
+export { SortEndHandler };

package/types/src/FormRows/SortableRow.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+declare type RowKeyDownHandler = (event: React.KeyboardEvent<HTMLDivElement>, data: {
+    index: number;
+}) => void;
+/** @public */
+declare type RowRequestRemoveHandler = (event: React.MouseEvent<HTMLButtonElement>, data: {
+    index: number;
+}) => void;
+interface RowPropsBase {
+    children?: React.ReactNode;
+    /** Index of the row. */
+    index?: number;
+    /** Callback when remove button is clicked. */
+    onRequestRemove?: RowRequestRemoveHandler;
+    /** The contents of Row */
+    value?: React.ReactNode;
+}
+declare const Row: React.ForwardRefExoticComponent<RowPropsBase & React.RefAttributes<HTMLDivElement>>;
+export default Row;
+export type { Row as RowWithoutSortable, RowKeyDownHandler, RowPropsBase, RowRequestRemoveHandler };

package/types/src/Heading/Heading.d.ts

@@ -34,7 +34,7 @@ declare const levelToElement: {
     readonly '5': "h5";
     readonly '6': "h6";
 };
-declare function Heading({ level, children, variant, ...otherProps }: HeadingProps): JSX.Element;
+declare function Heading({ children, elementRef, level, variant, ...otherProps }: HeadingProps): JSX.Element;
 declare namespace Heading {
     var propTypes: {
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;

package/useForceUpdate.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 241);
+/******/ 	return __webpack_require__(__webpack_require__.s = 242);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -94,7 +94,7 @@ module.exports = require("react");
 
 /***/ }),
 
-/***/ 241:
+/***/ 242:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";

package/useKeyPress.js

@@ -82,12 +82,12 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 167);
+/******/ 	return __webpack_require__(__webpack_require__.s = 168);
 /******/ })
 /************************************************************************/
 /******/ ({
 
-/***/ 167:
+/***/ 168:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";

package/usePrevious.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 242);
+/******/ 	return __webpack_require__(__webpack_require__.s = 243);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -94,7 +94,7 @@ module.exports = require("react");
 
 /***/ }),
 
-/***/ 242:
+/***/ 243:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";

package/useRovingFocus.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 243);
+/******/ 	return __webpack_require__(__webpack_require__.s = 244);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -94,7 +94,7 @@ module.exports = require("react");
 
 /***/ }),
 
-/***/ 243:
+/***/ 244:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";

package/cypress/plugins/index.ts

@@ -1,15 +0,0 @@
-/* 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/index.ts

@@ -1,10 +0,0 @@
-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

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