@splunk/react-ui 4.24.0 → 4.26.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 (50) hide show
  1. package/Breadcrumbs.js +65 -42
  2. package/Button.js +8 -7
  3. package/ButtonSimple.js +40 -39
  4. package/CHANGELOG.md +30 -1
  5. package/Code.js +193 -100
  6. package/Color.js +18 -15
  7. package/JSONTree.js +1 -1
  8. package/MIGRATION.mdx +48 -0
  9. package/Modal.js +69 -58
  10. package/RadioList.js +12 -11
  11. package/Table.js +2330 -2543
  12. package/TextArea.js +298 -302
  13. package/cypress/README.md +11 -0
  14. package/cypress/support/commands.ts +1 -0
  15. package/cypress/support/component.ts +0 -1
  16. package/cypress/tsconfig.cypress.json +14 -0
  17. package/package.json +13 -13
  18. package/types/src/Breadcrumbs/Breadcrumbs.d.ts +18 -2
  19. package/types/src/Breadcrumbs/Item.d.ts +7 -1
  20. package/types/src/Breadcrumbs/docs/examples/CustomizedClick.d.ts +2 -0
  21. package/types/src/Button/Button.d.ts +4 -2
  22. package/types/src/Button/docs/examples/Block.d.ts +2 -2
  23. package/types/src/Button/docs/examples/Dimmed.d.ts +2 -0
  24. package/types/src/Button/docs/examples/Disabled.d.ts +2 -2
  25. package/types/src/Button/docs/examples/Icons.d.ts +2 -2
  26. package/types/src/Button/docs/examples/Menus.d.ts +2 -2
  27. package/types/src/Button/docs/examples/To.d.ts +2 -2
  28. package/types/src/Button/docs/examples/Truncated.d.ts +2 -2
  29. package/types/src/Button/docs/examples/prisma/Basic.d.ts +2 -2
  30. package/types/src/Button/docs/examples/prisma/Block.d.ts +2 -2
  31. package/types/src/Button/docs/examples/prisma/Dimmed.d.ts +2 -0
  32. package/types/src/Button/docs/examples/prisma/Disabled.d.ts +2 -2
  33. package/types/src/Button/docs/examples/prisma/Menus.d.ts +2 -2
  34. package/types/src/Button/docs/examples/prisma/To.d.ts +2 -2
  35. package/types/src/Button/docs/examples/prisma/Truncated.d.ts +2 -2
  36. package/types/src/ButtonSimple/ButtonSimple.d.ts +4 -2
  37. package/types/src/Color/Color.d.ts +5 -3
  38. package/types/src/JSONTree/JSONTree.d.ts +1 -1
  39. package/types/src/Modal/Header.d.ts +6 -7
  40. package/types/src/Modal/Modal.d.ts +10 -2
  41. package/types/src/Modal/ModalContext.d.ts +1 -0
  42. package/types/src/RadioList/RadioList.d.ts +27 -27
  43. package/types/src/RadioList/RadioListContext.d.ts +5 -4
  44. package/types/src/Table/Body.d.ts +26 -22
  45. package/types/src/Table/Row.d.ts +47 -16
  46. package/types/src/Table/RowDragCell.d.ts +23 -42
  47. package/types/src/Table/Table.d.ts +28 -78
  48. package/types/src/TextArea/TextArea.d.ts +1 -0
  49. package/types/unit-test-setup-testing-library.d.ts +1 -0
  50. package/types/src/Modal/docs/examples/prisma/TypicalUsage.d.ts +0 -2
@@ -58,7 +58,7 @@ interface JSONTreePropsBase {
58
58
  */
59
59
  overflow?: 'wrap' | 'scroll';
60
60
  /**
61
- * If set to `true`, using `shift + click` or `shift + enter` will expand or collapse all descendant nodes
61
+ * If set to `true`, using `shift + click` or `shift + enter` will expand all descendant nodes
62
62
  * of the tree at once. A tooltip is added to the expand all / collapse all button to indicate that this feature
63
63
  * is enabled.
64
64
  */
@@ -7,11 +7,16 @@ interface HeaderPropsBase {
7
7
  * rendered if a title is provided.
8
8
  */
9
9
  children?: React.ReactNode;
10
+ /**
11
+ * The icon to show before the title.
12
+ */
13
+ icon?: React.ReactNode;
10
14
  /**
11
15
  * If an `onRequestClose` function is provided, the header includes a close
12
16
  * button, which invokes the `onRequestClose` callback when clicked.
13
17
  *
14
- * This callback must return focus to the invoking element or other element that follows the logical flow of the application.
18
+ * If `Modal`'s `returnFocus` prop isn't used, this callback *must* return focus to the invoking element
19
+ * or other element that follows the logical flow of the application.
15
20
  */
16
21
  onRequestClose?: React.MouseEventHandler<HTMLButtonElement>;
17
22
  /**
@@ -20,14 +25,8 @@ interface HeaderPropsBase {
20
25
  title?: string;
21
26
  /**
22
27
  * Used as the subheading. Only shown if `title` is also present.
23
- * @includeTheme prisma
24
28
  */
25
29
  subtitle?: React.ReactNode;
26
- /**
27
- * The icon to show before the title.
28
- * @includeTheme prisma
29
- */
30
- icon?: React.ReactNode;
31
30
  }
32
31
  declare type HeaderProps = ComponentProps<HeaderPropsBase, 'div'>;
33
32
  /**
@@ -9,7 +9,7 @@ declare type ModalRequestCloseHandler = (data: {
9
9
  reason: 'clickAway' | 'escapeKey';
10
10
  }) => void;
11
11
  declare type ModalInitialFocus = 'first' | 'container' | (React.Component & {
12
- focus: () => {};
12
+ focus: () => void;
13
13
  }) | HTMLElement | null;
14
14
  interface ModalPropsBase {
15
15
  /**
@@ -45,6 +45,13 @@ interface ModalPropsBase {
45
45
  * Set to `true` if the `Modal` is currently open. Otherwise, set to `false`.
46
46
  */
47
47
  open?: boolean;
48
+ /**
49
+ * Ref of the invoking element (or other element that follows the logical flow of the application) to be focused after the `Modal` is closed.
50
+ * If you are not using this prop, then you *must* manually return focus to the invoking element in `onRequestClose`.
51
+ */
52
+ returnFocus?: React.MutableRefObject<(React.Component & {
53
+ focus: () => void;
54
+ }) | HTMLElement | null>;
48
55
  }
49
56
  declare const defaultProps: Required<Pick<ModalPropsBase, 'initialFocus' | 'open' | 'divider'>>;
50
57
  declare type ModalProps = ClassComponentProps<ModalPropsBase, typeof defaultProps, 'div'>;
@@ -53,6 +60,7 @@ declare class Modal extends Component<ModalProps> {
53
60
  private initialFocusTimeoutId;
54
61
  private initialFocus;
55
62
  private headerTitleId;
63
+ private headerSubtitleId;
56
64
  static propTypes: React.WeakValidationMap<ClassComponentProps<ModalPropsBase, Required<Pick<ModalPropsBase, "open" | "divider" | "initialFocus">>, "div", never>>;
57
65
  static defaultProps: Required<Pick<ModalPropsBase, "open" | "divider" | "initialFocus">>;
58
66
  static Header: typeof Header;
@@ -63,7 +71,7 @@ declare class Modal extends Component<ModalProps> {
63
71
  componentDidUpdate(prevProps: ModalProps): void;
64
72
  private getDefaultMotionStyle;
65
73
  private getMotionStyle;
66
- private handleInitialFocus;
74
+ private handleFocus;
67
75
  private handleModalMount;
68
76
  private handleModalKeyDown;
69
77
  private handleRequestClose;
@@ -2,6 +2,7 @@
2
2
  export interface ModalContext {
3
3
  divider?: 'header' | 'footer' | 'both' | 'none';
4
4
  titleId?: string;
5
+ subtitleId?: string;
5
6
  }
6
7
  export declare const ModalContext: import("react").Context<ModalContext>;
7
8
  export default ModalContext;
@@ -13,47 +13,47 @@ interface RadioListPropsBase {
13
13
  * `children` should be `RadioList.Option`s.
14
14
  */
15
15
  children?: React.ReactNode;
16
- disabled?: boolean;
17
- /** The name is returned with onChange events, which can be used to identify the
18
- * control when multiple controls share an onChange callback.
19
- * A randomly generated name is used if one is not provided. */
20
- name?: string;
21
- /** Changes the layout of the RadioList. */
22
- direction?: 'column' | 'row';
23
- /**
24
- * Highlight the field as having an error. The buttons and labels will turn red.
25
- */
26
- error?: boolean;
27
- /** The current selected value. Setting this value makes the property controlled. A
28
- * callback is required.
29
- */
30
- value?: RadioListValueTypes;
31
16
  /**
32
17
  * Set this property instead of value to make value uncontrolled.
33
18
  */
34
19
  defaultValue?: RadioListValueTypes;
20
+ /**
21
+ * When placed in a ControlGroup, this is automatically set to the ControlGroup's help component.
22
+ * @private
23
+ */
24
+ describedBy?: string;
25
+ /** Changes the layout of the RadioList. */
26
+ direction?: 'column' | 'row';
27
+ disabled?: boolean;
35
28
  /**
36
29
  * A React ref which is set to the DOM element when the component mounts and null when it unmounts.
37
30
  */
38
31
  elementRef?: React.Ref<HTMLDivElement>;
39
32
  /**
40
- * A callback to receive the change events.
41
- * If value is set, this callback is required. This must set the value prop to retain the
42
- * change.
33
+ * Highlight the field as having an error. The buttons and labels will turn red.
43
34
  */
44
- onChange?: RadioListChangeHandler;
45
- /** @private. */
46
- required?: boolean;
35
+ error?: boolean;
47
36
  /**
48
37
  * When placed in a ControlGroup, this is automatically set to the ControlGroup's label.
49
38
  * @private
50
39
  */
51
40
  labelledBy?: string;
41
+ /** The name is returned with onChange events, which can be used to identify the
42
+ * control when multiple controls share an onChange callback.
43
+ * A randomly generated name is used if one is not provided. */
44
+ name?: string;
52
45
  /**
53
- * When placed in a ControlGroup, this is automatically set to the ControlGroup's help component.
54
- * @private
46
+ * A callback to receive the change events.
47
+ * If value is set, this callback is required. This must set the value prop to retain the
48
+ * change.
55
49
  */
56
- describedBy?: string;
50
+ onChange?: RadioListChangeHandler;
51
+ /** @private. */
52
+ required?: boolean;
53
+ /** The current selected value. Setting this value makes the property controlled. A
54
+ * callback is required.
55
+ */
56
+ value?: RadioListValueTypes;
57
57
  }
58
58
  interface RadioListPropsBaseControlled extends RadioListPropsBase {
59
59
  value: RadioListValueTypes;
@@ -69,19 +69,19 @@ declare type RadioListProps = ComponentProps<RadioListPropsBaseControlled | Radi
69
69
  declare function RadioList({ children, defaultValue: defaultValueProp, describedBy, direction, disabled, error, labelledBy, name: nameProp, onChange, required, value: valueProp, ...otherProps }: RadioListProps): JSX.Element;
70
70
  declare namespace RadioList {
71
71
  var propTypes: {
72
- direction: PropTypes.Requireable<string>;
73
72
  children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
74
73
  defaultValue: PropTypes.Requireable<any>;
74
+ describedBy: PropTypes.Requireable<string>;
75
+ direction: PropTypes.Requireable<string>;
75
76
  disabled: PropTypes.Requireable<boolean>;
76
77
  elementRef: PropTypes.Requireable<object>;
77
78
  error: PropTypes.Requireable<boolean>;
79
+ labelledBy: PropTypes.Requireable<string>;
78
80
  name: PropTypes.Requireable<string>;
79
81
  onChange: PropTypes.Requireable<(...args: any[]) => any>;
80
82
  /** @private. */
81
83
  required: PropTypes.Requireable<boolean>;
82
84
  value: PropTypes.Requireable<any>;
83
- labelledBy: PropTypes.Requireable<string>;
84
- describedBy: PropTypes.Requireable<string>;
85
85
  };
86
86
  var Option: typeof import("./Option").default;
87
87
  }
@@ -1,11 +1,12 @@
1
1
  /// <reference types="react" />
2
2
  import { RadioListChangeHandler, RadioListValueTypes } from './RadioList';
3
3
  export interface RadioListContext {
4
- value?: RadioListValueTypes;
5
- onChange?: RadioListChangeHandler;
6
- name?: string;
7
- error?: boolean;
8
4
  disabled?: boolean;
5
+ error?: boolean;
6
+ name?: string;
7
+ onChange?: RadioListChangeHandler;
8
+ required?: boolean;
9
+ value?: RadioListValueTypes;
9
10
  }
10
11
  export declare const RadioListContext: import("react").Context<RadioListContext>;
11
12
  export default RadioListContext;
@@ -1,10 +1,13 @@
1
1
  import React, { Component } from 'react';
2
+ import PropTypes from 'prop-types';
2
3
  import { RowRequestMoveRowHandler } from './Row';
3
4
  import { ClassComponentProps } from '../utils/types';
4
5
  declare type BodyRequestMoveRowHandler = RowRequestMoveRowHandler;
5
6
  interface BodyPropsBase {
6
7
  /** @private. Generally passed by Table rather than added directly. */
7
8
  actions?: boolean;
9
+ /** @private. Generally passed by Table rather than added directly. */
10
+ activeElementId?: string;
8
11
  /**
9
12
  * Must be `Table.Row`.
10
13
  */
@@ -26,13 +29,28 @@ interface BodyPropsBase {
26
29
  }
27
30
  declare const defaultProps: Required<Pick<BodyPropsBase, 'actions' | 'rowExpansion' | 'stripeRows'>>;
28
31
  declare type BodyProps = ClassComponentProps<BodyPropsBase, typeof defaultProps, 'tbody'>;
29
- interface BodyState {
30
- dragDataId?: string | number;
31
- dragIndex?: number;
32
- dragPosition?: number;
33
- expanded: (string | number | null)[];
32
+ declare function BodyBase({ activeElementId, actions, children, elementRef, movableColumns, onRequestMoveRow, rowExpansion, primaryColumnIndex, stripeRows, ...otherProps }: BodyProps): JSX.Element | null;
33
+ declare namespace BodyBase {
34
+ var propTypes: {
35
+ /** @private. Generally passed by Table rather than added directly. */
36
+ actions: PropTypes.Requireable<boolean>;
37
+ /** @private. Generally passed by Table rather than added directly. */
38
+ activeElementId: PropTypes.Requireable<string>;
39
+ children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
40
+ elementRef: PropTypes.Requireable<object>;
41
+ /** @private. Generally passed by Table rather than added directly. */
42
+ movableColumns: PropTypes.Requireable<boolean>;
43
+ /** @private. Generally passed by Table rather than added directly. */
44
+ rowExpansion: PropTypes.Requireable<string>;
45
+ /** @private. Generally passed by Table rather than added directly. */
46
+ onRequestMoveRow: PropTypes.Requireable<(...args: any[]) => any>;
47
+ /** @private. Generally passed by Table rather than added directly. */
48
+ primaryColumnIndex: PropTypes.Requireable<number>;
49
+ /** @private. Generally passed by Table rather than added directly. */
50
+ stripeRows: PropTypes.Requireable<boolean>;
51
+ };
34
52
  }
35
- declare class Body extends Component<BodyProps, BodyState> {
53
+ declare class Body extends Component<BodyProps, {}> {
36
54
  private el;
37
55
  private rect?;
38
56
  private rowHeight?;
@@ -40,21 +58,7 @@ declare class Body extends Component<BodyProps, BodyState> {
40
58
  static splunkUiType: string;
41
59
  static propTypes: React.WeakValidationMap<ClassComponentProps<BodyPropsBase, Required<Pick<BodyPropsBase, "actions" | "rowExpansion" | "stripeRows">>, "tbody", never>>;
42
60
  static defaultProps: Required<Pick<BodyPropsBase, "actions" | "rowExpansion" | "stripeRows">>;
43
- constructor(props: Readonly<BodyProps>);
44
- componentWillUnmount(): void;
45
- private handleDragStart;
46
- private handleDragOver;
47
- private handleDragEnter;
48
- private handleDrop;
49
- private handleDragEnd;
50
- private onRequestMoveRow;
51
- private handleMount;
52
- private handleRowExpansion;
53
- private calculateGuideIndex;
54
- private updateDragPositionImpl;
55
- private updateDragPosition;
56
- private updateScrollPosition;
57
- private cleanupDrag;
58
- render(): JSX.Element | null;
61
+ render(): JSX.Element;
59
62
  }
60
63
  export default Body;
64
+ export { BodyBase };
@@ -1,5 +1,7 @@
1
1
  import React, { Component } from 'react';
2
- import { RowDragCellDragStartHandler, RowDragCellRequestMoveRowHandler } from './RowDragCell';
2
+ import PropTypes from 'prop-types';
3
+ import { DragStartEvent } from '@dnd-kit/core';
4
+ import { TableRequestMoveRowHandler } from './Table';
3
5
  import { ClassComponentProps } from '../utils/types';
4
6
  /** @public */
5
7
  declare type RowActionPrimaryClickHandler = (event: React.MouseEvent, data?: any) => void;
@@ -7,9 +9,9 @@ declare type RowActionPrimaryClickHandler = (event: React.MouseEvent, data?: any
7
9
  declare type RowActionSecondaryClickHandler = (event: React.MouseEvent, data?: any) => void;
8
10
  /** @public */
9
11
  declare type RowClickHandler = (event: React.MouseEvent<HTMLTableRowElement> | React.KeyboardEvent<HTMLTableRowElement>, data?: any) => void;
10
- declare type RowDragStartHandler = RowDragCellDragStartHandler;
12
+ declare type RowDragStartHandler = (event: DragStartEvent) => void;
13
+ declare type RowRequestMoveRowHandler = TableRequestMoveRowHandler;
11
14
  declare type RowExpansionHandler = (event: React.MouseEvent<HTMLTableCellElement> | React.KeyboardEvent<HTMLTableCellElement>, data?: any) => void;
12
- declare type RowRequestMoveRowHandler = RowDragCellRequestMoveRowHandler;
13
15
  /** @public */
14
16
  declare type RowRequestToggleHandler = (event: React.MouseEvent<HTMLTableCellElement> | React.KeyboardEvent<HTMLTableCellElement>, data?: any) => void;
15
17
  interface RowPropsBase {
@@ -61,8 +63,6 @@ interface RowPropsBase {
61
63
  movableColumns?: boolean;
62
64
  /** Providing an `onClick` handler enables focus, hover, and related styles. */
63
65
  onClick?: RowClickHandler;
64
- /** @private. Generally passed by `Table` rather than added directly. */
65
- onDragStart?: RowDragStartHandler;
66
66
  /**
67
67
  * An event handler that triggers when the row expansion element is selected.
68
68
  */
@@ -88,26 +88,57 @@ interface RowPropsBase {
88
88
  * of the toggle.
89
89
  */
90
90
  selected?: boolean;
91
- /** @private. Generally passed by `Table` rather than added directly. */
92
- showRowGuideline?: 'none' | 'before' | 'after';
93
91
  /** @private. */
94
92
  stripe?: 'odd' | 'even' | 'none';
95
93
  }
96
94
  declare const defaultProps: Required<Pick<RowPropsBase, 'stripe' | 'primaryColumnIndex'>>;
97
95
  declare type RowProps = ClassComponentProps<RowPropsBase, typeof defaultProps, 'tr'>;
96
+ declare function RowBase(props: RowProps): JSX.Element;
97
+ declare namespace RowBase {
98
+ var propTypes: {
99
+ /** @private. Generally passed by Table rather than added directly. */
100
+ activeElementId: PropTypes.Requireable<string>;
101
+ actionPrimary: PropTypes.Requireable<PropTypes.ReactElementLike>;
102
+ actionsSecondary: PropTypes.Requireable<PropTypes.ReactElementLike>;
103
+ children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
104
+ data: PropTypes.Requireable<any>;
105
+ /** @private. Generally passed by Table rather than added directly. */
106
+ dataId: PropTypes.Requireable<React.ReactText>;
107
+ disabled: PropTypes.Requireable<boolean>;
108
+ /** @private. Generally passed by Table rather than added directly. */
109
+ draggable: PropTypes.Requireable<boolean>;
110
+ elementRef: PropTypes.Requireable<object>;
111
+ /** @private. */
112
+ expandable: PropTypes.Requireable<boolean>;
113
+ expanded: PropTypes.Requireable<boolean>;
114
+ expansionRow: PropTypes.Requireable<PropTypes.ReactElementLike | (PropTypes.ReactElementLike | null | undefined)[]>;
115
+ /** @private. Indicates whether the table has an actions column. */
116
+ actions: PropTypes.Requireable<boolean>;
117
+ /** @private. Generally passed by `Table` rather than added directly. */
118
+ index: PropTypes.Requireable<number>;
119
+ /** @private. Generally passed by `Table` rather than added directly. */
120
+ movableColumns: PropTypes.Requireable<boolean>;
121
+ onClick: PropTypes.Requireable<(...args: any[]) => any>;
122
+ onExpansion: PropTypes.Requireable<(...args: any[]) => any>;
123
+ /** @private. This is passed through and works as expected. */
124
+ onKeyDown: PropTypes.Requireable<(...args: any[]) => any>;
125
+ /** @private. Generally passed by `Table` rather than added directly. */
126
+ onRequestMoveRow: PropTypes.Requireable<(...args: any[]) => any>;
127
+ onRequestToggle: PropTypes.Requireable<(...args: any[]) => any>;
128
+ /** @private. Generally passed by `Table` rather than added directly. */
129
+ primaryColumnIndex: PropTypes.Requireable<number>;
130
+ rowScreenReaderText: PropTypes.Requireable<string>;
131
+ selected: PropTypes.Requireable<boolean>;
132
+ /** @private. */
133
+ stripe: PropTypes.Requireable<string>;
134
+ };
135
+ }
98
136
  declare class Row extends Component<RowProps, {}> {
99
137
  static splunkUiType: string;
100
138
  static propTypes: React.WeakValidationMap<ClassComponentProps<RowPropsBase, Required<Pick<RowPropsBase, "stripe" | "primaryColumnIndex">>, "tr", never>>;
101
139
  static defaultProps: Required<Pick<RowPropsBase, "stripe" | "primaryColumnIndex">>;
102
- private elementRef;
103
- private handleClick;
104
- private handleKeyDown;
105
- private handleToggle;
106
- private handleExpansion;
107
- private renderActionPrimary;
108
- private renderActionsSecondary;
109
- private handleMount;
110
140
  render(): JSX.Element;
111
141
  }
112
142
  export default Row;
113
- export { RowActionPrimaryClickHandler, RowActionSecondaryClickHandler, RowClickHandler, RowDragStartHandler, RowRequestMoveRowHandler, RowRequestToggleHandler, RowExpansionHandler, };
143
+ export { RowActionPrimaryClickHandler, RowActionSecondaryClickHandler, RowBase, // exporting the base component for testing purpose
144
+ RowClickHandler, RowDragStartHandler, RowRequestMoveRowHandler, RowRequestToggleHandler, RowExpansionHandler, };
@@ -1,6 +1,7 @@
1
- import React, { Component } from 'react';
1
+ import React from 'react';
2
+ import PropTypes from 'prop-types';
2
3
  import { TableRequestMoveRowHandler } from './Table';
3
- declare type RowDragCellDragStartHandler = (index?: number, dataId?: string | number) => void;
4
+ import { ComponentProps } from '../utils/types';
4
5
  declare type RowDragCellKeyDownHandler = (event: React.KeyboardEvent<HTMLTableCellElement>, data: {
5
6
  dataId?: string | number;
6
7
  index: number;
@@ -8,61 +9,41 @@ declare type RowDragCellKeyDownHandler = (event: React.KeyboardEvent<HTMLTableCe
8
9
  declare type RowDragCellRequestMoveRowHandler = TableRequestMoveRowHandler;
9
10
  interface RowDragCellPropsBase {
10
11
  /**
11
- * event-handler that is triggered when row drag begins
12
- */
13
- onDragStart?: RowDragCellDragStartHandler;
14
- /**
15
- * event-handler that is triggered when row drag ends
16
- */
17
- onDragEnd?: () => void;
18
- /**
19
- * callback for reordering the rows
20
- */
21
- onRequestMoveRow?: RowDragCellRequestMoveRowHandler;
22
- /**
23
- * index of the data-object in input array
12
+ * dataID of the activeElement or the selected element in DOM
24
13
  */
25
- index?: number;
14
+ activeElementId?: string;
26
15
  /**
27
16
  * unique-ID of the data-object in input array
28
17
  */
29
18
  dataId?: string | number;
30
19
  /**
31
- * dataID of the activeElement or the selected element in DOM
32
- */
33
- activeElementId?: string;
34
- /**
35
- * location where the guideline would be displayed
20
+ * index of the data-object in input array
36
21
  */
37
- showRowGuideline?: 'none' | 'before' | 'after';
22
+ index?: number;
38
23
  /**
39
24
  * event-handler for keyboard events
40
25
  */
41
26
  onKeyDown?: RowDragCellKeyDownHandler;
27
+ /**
28
+ * callback for reordering the rows
29
+ */
30
+ onRequestMoveRow?: RowDragCellRequestMoveRowHandler;
42
31
  /**
43
32
  * no of rows a cell expands to. applies when a table is rendered with expandable rows option
44
33
  */
45
34
  rowSpan?: number;
46
35
  }
47
- declare const defaultProps: Required<Pick<RowDragCellPropsBase, 'showRowGuideline'>>;
48
- declare type RowDragCellProps = RowDragCellPropsBase & typeof defaultProps;
49
- interface RowDragCellState {
50
- isDragging: boolean;
51
- }
52
- declare class RowDragCell extends Component<RowDragCellProps, RowDragCellState> {
53
- private cloneEl?;
54
- private el;
55
- static propTypes: React.WeakValidationMap<RowDragCellProps>;
56
- static defaultProps: Required<Pick<RowDragCellPropsBase, "showRowGuideline">>;
57
- constructor(props: Readonly<RowDragCellProps>);
58
- componentDidMount(): void;
59
- componentWillUnmount(): void;
60
- private handleMount;
61
- private handleDragStart;
62
- private handleDragEnd;
63
- private handleKeyDown;
64
- private cleanupDrag;
65
- render(): JSX.Element;
36
+ declare type RowDragCellProps = ComponentProps<RowDragCellPropsBase, 'td'>;
37
+ declare function RowDragCell({ activeElementId, onRequestMoveRow, index, dataId, onKeyDown, ...otherProps }: RowDragCellProps): JSX.Element;
38
+ declare namespace RowDragCell {
39
+ var propTypes: {
40
+ activeElementId: PropTypes.Requireable<string>;
41
+ dataId: PropTypes.Requireable<React.ReactText>;
42
+ index: PropTypes.Requireable<number>;
43
+ onKeyDown: PropTypes.Requireable<(...args: any[]) => any>;
44
+ onRequestMoveRow: PropTypes.Requireable<(...args: any[]) => any>;
45
+ rowSpan: PropTypes.Requireable<number>;
46
+ };
66
47
  }
67
48
  export default RowDragCell;
68
- export { RowDragCellDragStartHandler, RowDragCellRequestMoveRowHandler };
49
+ export { RowDragCellRequestMoveRowHandler };
@@ -1,5 +1,5 @@
1
1
  import React, { Component } from 'react';
2
- import { ScrollContainerContext } from '@splunk/react-ui/ScrollContainerContext';
2
+ import PropTypes from 'prop-types';
3
3
  import Body from './Body';
4
4
  import Caption from './Caption';
5
5
  import Cell, { CellClickHandler } from './Cell';
@@ -133,27 +133,33 @@ interface TablePropsBase {
133
133
  }
134
134
  declare const defaultProps: Required<Pick<TablePropsBase, 'actions' | 'dockOffset' | 'headType' | 'rowExpansion' | 'rowSelection' | 'resizableFillLayout' | 'primaryColumnIndex'>>;
135
135
  declare type TableProps = ClassComponentProps<TablePropsBase, typeof defaultProps, 'div'>;
136
- interface TableState {
137
- cellWidths?: number[];
138
- dragIndex?: number;
139
- dragPosition?: number;
140
- horizontalOffset?: number;
141
- tableWidth?: number;
142
- top?: number;
143
- width?: number;
136
+ declare function TableBase(props: TableProps): JSX.Element;
137
+ declare namespace TableBase {
138
+ var propTypes: {
139
+ actions: PropTypes.Requireable<(PropTypes.ReactElementLike | null | undefined)[]>;
140
+ actionsColumnWidth: PropTypes.Requireable<number>;
141
+ children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
142
+ dockOffset: PropTypes.Requireable<number>;
143
+ dockScrollBar: PropTypes.Requireable<boolean>;
144
+ elementRef: PropTypes.Requireable<object>;
145
+ headType: PropTypes.Requireable<string>;
146
+ innerStyle: PropTypes.Requireable<object>;
147
+ onRequestToggleAllRows: PropTypes.Requireable<(...args: any[]) => any>;
148
+ onScroll: PropTypes.Requireable<(...args: any[]) => any>;
149
+ outerStyle: PropTypes.Requireable<object>;
150
+ primaryColumnIndex: PropTypes.Requireable<number>;
151
+ rowExpansion: PropTypes.Requireable<string>;
152
+ rowSelection: PropTypes.Requireable<string>;
153
+ stripeRows: PropTypes.Requireable<boolean>;
154
+ tableStyle: PropTypes.Requireable<object>;
155
+ onRequestMoveColumn: PropTypes.Requireable<(...args: any[]) => any>;
156
+ onRequestMoveRow: PropTypes.Requireable<(...args: any[]) => any>;
157
+ onRequestResizeColumn: PropTypes.Requireable<(...args: any[]) => any>;
158
+ resizableFillLayout: PropTypes.Requireable<boolean>;
159
+ };
144
160
  }
145
- declare class Table extends Component<TableProps, TableState> {
146
- private dockedScrollBar;
147
- private head;
148
- private headFocusState?;
149
- private headTable;
150
- private headTableEl;
151
- private scrollSource?;
152
- private table;
153
- private tableContainer;
161
+ declare class Table extends Component<TableProps, {}> {
154
162
  static propTypes: React.WeakValidationMap<ClassComponentProps<TablePropsBase, Required<Pick<TablePropsBase, "actions" | "headType" | "rowSelection" | "resizableFillLayout" | "primaryColumnIndex" | "dockOffset" | "rowExpansion">>, "div", never>>;
155
- context: React.ContextType<typeof ScrollContainerContext>;
156
- static contextType: React.Context<Window | Document | HTMLElement | null | undefined>;
157
163
  static defaultProps: Required<Pick<TablePropsBase, "actions" | "headType" | "rowSelection" | "resizableFillLayout" | "primaryColumnIndex" | "dockOffset" | "rowExpansion">>;
158
164
  static Caption: typeof Caption;
159
165
  static Head: typeof Head;
@@ -162,65 +168,9 @@ declare class Table extends Component<TableProps, TableState> {
162
168
  static Body: typeof Body;
163
169
  static Row: typeof Row;
164
170
  static Cell: typeof Cell;
165
- /**
166
- * @private
167
- * @private
168
- * Returns an object describing the focus state of the provided `head`.
169
- * @param head - A reference to a mounted `Head` component.
170
- * @returns {Object} focusState - An object containing a target (either 'headCell' or
171
- * 'resizeButton') and an index.
172
- */
173
- private static getHeadFocusState;
174
- private static getOffset;
175
- /**
176
- * @private
177
- * @private
178
- * Applies the provided `headFocusState` to the provided `head`.
179
- * @param head - A reference to a mounted `Head` component.
180
- * @param {Object} headFocusState
181
- * @param {String} headFocusState.target - Focus can be applied to a 'headCell' or a
182
- * 'resizeButton'.
183
- * @param {Number} headFocusState.index - The index of the element to set focus on.
184
- */
185
- private static applyHeadFocusState;
186
- constructor(props: Readonly<TableProps>);
187
- componentDidUpdate(prevProps: Readonly<TableProps>): void;
188
- /**
189
- * Add this lifecycle method to improve the performance of this giant component.
190
- */
191
- shouldComponentUpdate(nextProps: Readonly<TableProps>, nextState: Readonly<TableState>): boolean;
192
- componentDidMount(): void;
193
- componentWillUnmount(): void;
194
- private updateDockedHeadState;
195
- private handleScroll;
196
- private handleResize;
197
- private handleContainerScroll;
198
- private handleDockedScrollBarScroll;
199
- private handleDragStart;
200
- private handleDragOver;
201
- private handleDragEnter;
202
- private handleDragEnd;
203
- private handleDrop;
204
- private handleHeadMount;
205
- private handleHeadTableMount;
206
- private handleHeadTableElementMount;
207
- private handleHeadTableKeyUp;
208
- private handleAutosizeColumn;
209
- private createHead;
210
- private createBody;
211
- private isInline;
212
- private headerIsDocked;
213
- private isFixed;
214
- private showDockedHeader;
215
- private showDockedScrollBar;
216
- private updateDragPositionImpl;
217
- private updateDragPosition;
218
- private cleanupDrag;
219
- private renderHeadTable;
220
- private renderDockedScrollbar;
221
- private getTableContainerWidthWithoutBorders;
222
171
  render(): JSX.Element;
223
172
  }
224
173
  export default Table;
225
174
  export { Body, Caption, Cell, Head, HeadCell, HeadDropdownCell, Row };
226
- export type { CellClickHandler, HeadCellSortHandler, HeadDropdownCellPossibleCloseReason, HeadDropdownCellRequestCloseHandler, HeadDropdownCellRequestOpenHandler, RowActionPrimaryClickHandler, RowActionSecondaryClickHandler, RowClickHandler, RowRequestToggleHandler, TableRequestMoveColumnHandler, TableRequestMoveRowHandler, TableRequestResizeColumnHandler, };
175
+ export type { CellClickHandler, HeadCellSortHandler, HeadDropdownCellPossibleCloseReason, HeadDropdownCellRequestCloseHandler, HeadDropdownCellRequestOpenHandler, RowActionPrimaryClickHandler, RowActionSecondaryClickHandler, RowClickHandler, RowRequestToggleHandler, TableBase, // exporting the base component for testing purpose
176
+ TableRequestMoveColumnHandler, TableRequestMoveRowHandler, TableRequestResizeColumnHandler, };
@@ -182,6 +182,7 @@ declare class TextArea extends Component<TextAreaProps, TextAreaState> {
182
182
  private getAdornmentWidth;
183
183
  private handleResize;
184
184
  private handleInputMount;
185
+ private handleShadowMount;
185
186
  private handleInputChange;
186
187
  private handleInputKeyDown;
187
188
  private handleInputSelect;
@@ -0,0 +1 @@
1
+ import '@testing-library/jest-dom';
@@ -1,2 +0,0 @@
1
- declare function TypicalUsage(): JSX.Element;
2
- export default TypicalUsage;