@splunk/react-ui 4.17.1 → 4.19.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (122) hide show
  1. package/Accordion.js +6 -6
  2. package/Anchor.js +2 -2
  3. package/Animation.js +2 -2
  4. package/AnimationToggle.js +5 -5
  5. package/Box.js +2 -2
  6. package/Button.js +4 -4
  7. package/ButtonGroup.js +2 -2
  8. package/ButtonSimple.js +2 -2
  9. package/CHANGELOG.md +28 -2
  10. package/Calendar.js +8 -8
  11. package/Card.js +8 -8
  12. package/CardLayout.js +2 -2
  13. package/Chip.js +23 -16
  14. package/Clickable.js +11 -11
  15. package/CloseButton.js +2 -2
  16. package/Code.js +12 -12
  17. package/CollapsiblePanel.js +4 -4
  18. package/Color.js +209 -182
  19. package/ColumnLayout.js +6 -6
  20. package/ComboBox.js +14 -14
  21. package/Concertina.js +10 -10
  22. package/ControlGroup.js +2 -2
  23. package/Date.js +13 -13
  24. package/DefinitionList.js +2 -2
  25. package/Divider.js +2 -2
  26. package/Dropdown.js +13 -13
  27. package/DualListbox.js +9 -6
  28. package/EventListener.js +4 -4
  29. package/File.js +13 -13
  30. package/FormRows.js +264 -103
  31. package/Heading.js +50 -50
  32. package/Image.js +15 -15
  33. package/JSONTree.js +38 -36
  34. package/Layer.js +10 -10
  35. package/Link.js +2 -2
  36. package/List.js +9 -6
  37. package/MIGRATION.mdx +295 -0
  38. package/Markdown.js +24 -19
  39. package/Menu.js +12 -12
  40. package/Message.js +4 -4
  41. package/MessageBar.js +2 -2
  42. package/Modal.js +4 -4
  43. package/ModalLayer.js +4 -4
  44. package/Monogram.js +3 -3
  45. package/Multiselect.js +33 -33
  46. package/Number.js +7 -6
  47. package/Paginator.js +6 -6
  48. package/Paragraph.js +2 -2
  49. package/Popover.js +31 -27
  50. package/Progress.js +4 -4
  51. package/RadioBar.js +4 -4
  52. package/RadioList.js +2 -2
  53. package/Resize.js +6 -6
  54. package/ResultsMenu.js +8 -8
  55. package/ScreenReaderContent.js +2 -2
  56. package/Scroll.js +6 -6
  57. package/ScrollContainerContext.js +2 -2
  58. package/Search.js +14 -14
  59. package/Select.js +12 -12
  60. package/SidePanel.js +2 -2
  61. package/Slider.js +10 -10
  62. package/SlidingPanels.js +8 -8
  63. package/SplitButton.js +4 -4
  64. package/StaticContent.js +2 -2
  65. package/StepBar.js +2 -2
  66. package/Switch.js +2 -2
  67. package/TabBar.js +68 -51
  68. package/TabLayout.js +6 -6
  69. package/Table.js +51 -50
  70. package/Text.js +25 -23
  71. package/TextArea.js +24 -22
  72. package/Tooltip.js +11 -11
  73. package/TransitionOpen.js +2 -2
  74. package/Typography.js +4 -4
  75. package/WaitSpinner.js +2 -2
  76. package/cypress/support/component-index.html +12 -0
  77. package/cypress/support/component.ts +27 -0
  78. package/cypress.config.ts +19 -0
  79. package/package.json +14 -19
  80. package/stubs-dependencies.d.ts +0 -9
  81. package/types/src/Button/Button.d.ts +5 -3
  82. package/types/src/Clickable/Clickable.d.ts +2 -1
  83. package/types/src/Clickable/docs/examples/Basic.d.ts +2 -2
  84. package/types/src/CollapsiblePanel/CollapsiblePanel.d.ts +1 -0
  85. package/types/src/Color/Color.d.ts +6 -6
  86. package/types/src/Color/Palette.d.ts +46 -0
  87. package/types/src/Concertina/Panel.d.ts +1 -0
  88. package/types/src/FormRows/FormRows.d.ts +1 -2
  89. package/types/src/FormRows/Row.d.ts +3 -12
  90. package/types/src/FormRows/RowInternal.d.ts +19 -0
  91. package/types/src/FormRows/SortableList.d.ts +8 -2
  92. package/types/src/FormRows/SortableRow.d.ts +20 -0
  93. package/types/src/Heading/Heading.d.ts +8 -3
  94. package/types/src/JSONTree/JSONTree.d.ts +2 -1
  95. package/types/src/Layer/Layer.d.ts +2 -0
  96. package/types/src/List/List.d.ts +9 -1
  97. package/types/src/List/docs/examples/CustomizedList.d.ts +2 -0
  98. package/types/src/List/docs/examples/OrderedList.d.ts +2 -0
  99. package/types/src/List/docs/examples/UnorderedList.d.ts +2 -0
  100. package/types/src/Markdown/Markdown.d.ts +1 -0
  101. package/types/src/Markdown/renderers/MarkdownList.d.ts +2 -0
  102. package/types/src/Number/Number.d.ts +9 -4
  103. package/types/src/Popover/Popover.d.ts +2 -0
  104. package/types/src/TabBar/Tab.d.ts +2 -0
  105. package/types/src/Table/Head.d.ts +1 -0
  106. package/types/src/Table/HeadCell.d.ts +1 -0
  107. package/types/src/Table/HeadDropdownCell.d.ts +1 -0
  108. package/types/src/Table/Table.d.ts +3 -1
  109. package/types/src/Text/Text.d.ts +3 -1
  110. package/types/src/TextArea/TextArea.d.ts +2 -0
  111. package/useForceUpdate.js +2 -2
  112. package/useKeyPress.js +2 -2
  113. package/usePrevious.js +2 -2
  114. package/useRovingFocus.js +2 -2
  115. package/MIGRATION.md +0 -49
  116. package/cypress/plugins/index.ts +0 -15
  117. package/cypress/support/index.ts +0 -10
  118. package/cypress.json +0 -13
  119. package/types/src/List/docs/examples/Decimal.d.ts +0 -2
  120. package/types/src/List/docs/examples/Disc.d.ts +0 -2
  121. package/types/src/List/docs/examples/LowerAlpha.d.ts +0 -2
  122. package/types/src/List/docs/examples/UpperAlpha.d.ts +0 -2
package/cypress/support/component-index.html ADDED
@@ -0,0 +1,12 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
6
+ <meta name="viewport" content="width=device-width,initial-scale=1.0">
7
+ <title>Components App</title>
8
+ </head>
9
+ <body>
10
+ <div data-cy-root></div>
11
+ </body>
12
+ </html>
package/cypress/support/component.ts ADDED
@@ -0,0 +1,27 @@
1
+ import { mount } from 'cypress/react';
2
+ import 'cypress-real-events';
3
+ import { setGlobalConfig } from '@storybook/testing-react';
4
+ import { configure } from '@testing-library/cypress';
5
+
6
+ import * as sbPreview from '../../.storybook/preview';
7
+ import './commands';
8
+
9
+ // Augment the Cypress namespace to include type definitions for
10
+ // your custom command.
11
+ // Alternatively, can be defined in cypress/support/component.d.ts
12
+ // with a <reference path="./component" /> at the top of your spec.
13
+ /* eslint-disable @typescript-eslint/no-namespace */
14
+ declare global {
15
+ namespace Cypress {
16
+ interface Chainable {
17
+ mount: typeof mount;
18
+ }
19
+ }
20
+ }
21
+ /* eslint-enable @typescript-eslint/no-namespace */
22
+
23
+ Cypress.Commands.add('mount', mount);
24
+
25
+ configure({ testIdAttribute: 'data-test' });
26
+
27
+ setGlobalConfig(sbPreview);
package/cypress.config.ts ADDED
@@ -0,0 +1,19 @@
1
+ import { defineConfig } from 'cypress';
2
+ import webpackConfig from './webpack.test.config.js';
3
+
4
+ export default defineConfig({
5
+ env: {},
6
+ defaultCommandTimeout: 1000,
7
+ fixturesFolder: false,
8
+ video: false,
9
+ videoUploadOnPasses: false,
10
+ chromeWebSecurity: false,
11
+ component: {
12
+ specPattern: '**/**/tests/*.spec.tsx',
13
+ devServer: {
14
+ framework: 'react',
15
+ bundler: 'webpack',
16
+ webpackConfig,
17
+ },
18
+ },
19
+ });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@splunk/react-ui",
3
- "version": "4.17.1",
3
+ "version": "4.19.0",
4
4
  "description": "Library of React components that implement the Splunk design language",
5
5
  "license": "Apache-2.0",
6
6
  "author": "Splunk Inc.",
@@ -27,8 +27,8 @@
27
27
  "test": "jest",
28
28
  "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",
29
29
  "test:watch": "jest --watch",
30
- "test:cypress": "yarn cypress open-ct",
31
- "test:cypress:ci": "yarn cypress run-ct",
30
+ "test:cypress": "yarn cypress open --component",
31
+ "test:cypress:ci": "yarn cypress run --component",
32
32
  "types:build": "tsc --emitDeclarationOnly --declaration --declarationDir ./types && node ./scripts/pruneTypes.js",
33
33
  "types:start": "yarn types:build --watch"
34
34
  },
@@ -38,6 +38,9 @@
38
38
  "styled-components": "^5.3.10"
39
39
  },
40
40
  "dependencies": {
41
+ "@dnd-kit/core": "6.0.8",
42
+ "@dnd-kit/sortable": "7.0.2",
43
+ "@dnd-kit/utilities": "3.2.1",
41
44
  "@splunk/react-icons": "^4.0.1",
42
45
  "@splunk/themes": "^0.16.1",
43
46
  "@splunk/ui-utils": "^1.6.0",
@@ -55,7 +58,6 @@
55
58
  "moment": "^2.29.4",
56
59
  "prop-types": "^15.6.2",
57
60
  "react-resize-detector": "^3.2.1",
58
- "react-sortable-hoc": "^1.11.0",
59
61
  "react-spring": "9.2.4",
60
62
  "tinycolor2": "^1.4.1",
61
63
  "use-typed-event-listener": "^3.0.0"
@@ -63,13 +65,11 @@
63
65
  "devDependencies": {
64
66
  "@babel/core": "^7.2.0",
65
67
  "@babel/plugin-transform-runtime": "^7.18.6",
66
- "@cypress/react": "^5.12.4",
67
- "@cypress/webpack-dev-server": "^1.8.2",
68
- "@splunk/babel-preset": "^3.0.0",
68
+ "@splunk/babel-preset": "^4.0.0",
69
69
  "@splunk/cicd-tools": "^0.5.0",
70
- "@splunk/docs-gen": "1.0.0-beta.4",
70
+ "@splunk/docs-gen": "1.0.0-beta.5",
71
71
  "@splunk/eslint-config": "^4.0.0",
72
- "@splunk/react-docs": "1.0.0-beta.4",
72
+ "@splunk/react-docs": "1.0.0-beta.5",
73
73
  "@splunk/stylelint-config": "^4.0.0",
74
74
  "@splunk/test-runner-utils": "^0.4.1",
75
75
  "@splunk/webpack-configs": "^6.0.0",
@@ -80,13 +80,11 @@
80
80
  "@storybook/react": "^6.5.9",
81
81
  "@storybook/test-runner": "^0.9.0",
82
82
  "@storybook/testing-react": "^1.3.0",
83
- "@testing-library/cypress": "^8.0.2",
83
+ "@testing-library/cypress": "^9.0.0",
84
84
  "@testing-library/jest-dom": "^5.16.1",
85
85
  "@testing-library/react": "^12.1.2",
86
86
  "@testing-library/react-hooks": "^7.0.2",
87
- "@types/chai": "^3.5.2",
88
- "@types/enzyme": "^3.10.5",
89
- "@types/jest": "^25.2.1",
87
+ "@types/jest": "^26.0.0",
90
88
  "@types/mocha": "^7.0.2",
91
89
  "@types/node": "^10.17.26",
92
90
  "@types/prismjs": "^1.16.1",
@@ -102,14 +100,11 @@
102
100
  "babel-plugin-styled-components": "^1.10.7",
103
101
  "babel-plugin-transform-imports": "^2.0.0",
104
102
  "babel-plugin-transform-require-context": "^0.1.1",
105
- "chai": "^3.5.0",
106
103
  "core-js": "^3.6.4",
107
104
  "cross-env": "^6.0.3",
108
- "cypress": "^9.5.1",
109
- "cypress-real-events": "^1.7.0",
105
+ "cypress": "^12.17.1",
106
+ "cypress-real-events": "^1.9.1",
110
107
  "docgen-loader": "^1.3.4",
111
- "enzyme": "^3.11.0",
112
- "enzyme-adapter-react-16": "^1.15.2",
113
108
  "eslint": "^7.14.0",
114
109
  "eslint-config-airbnb": "^18.2.1",
115
110
  "eslint-config-prettier": "^6.15.0",
@@ -124,7 +119,7 @@
124
119
  "glob": "^7.1.6",
125
120
  "html-webpack-plugin": "^3.2.0",
126
121
  "http-server": "^14.1.1",
127
- "jest": "^25.1.0",
122
+ "jest": "^26.6.3",
128
123
  "jest-image-snapshot": "^5.1.0",
129
124
  "jest-junit": "^10.0.0",
130
125
  "jest-stare": "^2.4.1",
package/stubs-dependencies.d.ts CHANGED
@@ -1,12 +1,3 @@
1
- declare namespace Chai {
2
- interface Assert {
3
- throwsSilent(fn: Function, message?: string): void;
4
- throwsSilent(fn: Function, regExp: RegExp, message?: string): void;
5
- throwsSilent(fn: Function, errType: Function, message?: string): void;
6
- throwsSilent(fn: Function, errType: Function, regExp: RegExp): void;
7
- }
8
- }
9
-
10
1
  declare module 'commonmark-react-renderer' {
11
2
  export default class Renderer {
12
3
  constructor(options: {});
package/types/src/Button/Button.d.ts CHANGED
@@ -12,7 +12,7 @@ interface ButtonPropsBase {
12
12
  /** Returns a value on click. Use when composing or testing. */
13
13
  action?: string;
14
14
  /** Changes the style of the button.
15
- * @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.
15
+ * @themeNotes Enterprise themes support the following appearances: `default`, `primary`, `secondary`, `destructive` and `pill` (`pill` is deprecated). Prisma themes support the `default`, `primary`, `secondary`, `destructive`, `toggle` and `flat` appearances.
16
16
  */
17
17
  appearance?: 'default' | 'secondary' | 'primary' | 'destructive' | 'pill' | 'toggle' | 'flat';
18
18
  /** Removes the right border and border-radius of the button so you can
@@ -27,10 +27,12 @@ interface ButtonPropsBase {
27
27
  * A React ref which is set to the DOM element when the component mounts and null when it unmounts.
28
28
  */
29
29
  elementRef?: React.Ref<HTMLAnchorElement | HTMLButtonElement>;
30
- /** Turns the button red. If you use this prop, apply other error
30
+ /**
31
+ * @deprecated
32
+ * Turns the button red. If you use this prop, apply other error
31
33
  * indicators, such as an error message, to meet accessibility
32
34
  * requirements.
33
- * @deprecated
35
+ *
34
36
  * */
35
37
  error?: boolean;
36
38
  /** Applies the text that displays on the button. */
package/types/src/Clickable/Clickable.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import React, { Component } from 'react';
2
2
  import { legacyRefMode } from '@splunk/react-ui/Dropdown';
3
- import { NavigationProviderClickHandler } from './NavigationProvider';
3
+ import { NavigationContext, NavigationProviderClickHandler } from './NavigationProvider';
4
4
  import { ClassComponentProps } from '../utils/types';
5
5
  export declare const isInternalLink: (to: string | undefined) => boolean;
6
6
  interface ClickablePropsBase {
@@ -53,6 +53,7 @@ declare type ClickableProps = ClickableButtonProps | ClickableLinkProps;
53
53
  */
54
54
  declare class Clickable extends Component<ClickableProps> {
55
55
  private el;
56
+ context: React.ContextType<typeof NavigationContext>;
56
57
  static contextType: React.Context<{
57
58
  onClick?: NavigationProviderClickHandler | undefined;
58
59
  prefix?: string | undefined;
package/types/src/Clickable/docs/examples/Basic.d.ts CHANGED
@@ -1,2 +1,2 @@
1
- declare function Buttons(): JSX.Element;
2
- export default Buttons;
1
+ declare function Basic(): JSX.Element;
2
+ export default Basic;
package/types/src/CollapsiblePanel/CollapsiblePanel.d.ts CHANGED
@@ -67,6 +67,7 @@ interface CollapsiblePanelPropsBase {
67
67
  overflow?: string;
68
68
  /**
69
69
  * When true, children are always rendered whether collapsed or not.
70
+ * Setting this to `true` can improve the performance of expanding panels at the cost of initial loading performance.
70
71
  */
71
72
  renderChildrenWhenCollapsed?: boolean;
72
73
  /**