@splunk/react-ui 4.4.0 → 4.5.1

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 (132) hide show
  1. package/Accordion.js +37 -21
  2. package/Anchor.js +2 -2
  3. package/AnimationToggle.js +2 -2
  4. package/Box.js +2 -2
  5. package/Button.js +36 -12
  6. package/ButtonGroup.js +27 -6
  7. package/ButtonSimple.js +6 -6
  8. package/CHANGELOG.md +54 -1
  9. package/Calendar.js +14 -14
  10. package/Card.js +49 -23
  11. package/CardLayout.js +31 -10
  12. package/Chip.js +77 -53
  13. package/Clickable.js +2 -2
  14. package/CloseButton.js +6 -6
  15. package/Code.js +4 -4
  16. package/CollapsiblePanel.js +6 -6
  17. package/Color.js +103 -56
  18. package/ColumnLayout.js +4 -4
  19. package/ComboBox.js +22 -17
  20. package/Concertina.js +73 -68
  21. package/ControlGroup.js +72 -24
  22. package/Date.js +9 -9
  23. package/DefinitionList.js +6 -6
  24. package/Dropdown.js +12 -12
  25. package/EventListener.js +168 -0
  26. package/FetchOptions.js +8 -8
  27. package/File.js +93 -82
  28. package/FormRows.js +66 -58
  29. package/Image.js +14 -14
  30. package/JSONTree.js +5 -5
  31. package/Layer.js +32 -20
  32. package/Link.js +6 -6
  33. package/List.js +2 -2
  34. package/Markdown.js +250 -88
  35. package/Menu.js +70 -64
  36. package/Message.js +18 -18
  37. package/Modal.js +68 -14
  38. package/ModalLayer.js +4 -4
  39. package/Monogram.js +12 -11
  40. package/Multiselect.js +122 -78
  41. package/Number.js +19 -16
  42. package/Paginator.js +10 -10
  43. package/Paragraph.js +2 -2
  44. package/Popover.js +52 -38
  45. package/Progress.js +6 -6
  46. package/RadioBar.js +56 -69
  47. package/RadioList.js +2 -2
  48. package/Resize.js +19 -15
  49. package/ResultsMenu.js +8 -8
  50. package/ScreenReaderContent.js +2 -2
  51. package/Scroll.js +16 -14
  52. package/ScrollContainerContext.js +5 -5
  53. package/Search.d.ts +2 -0
  54. package/Search.js +797 -0
  55. package/Select.js +83 -43
  56. package/SidePanel.js +6 -6
  57. package/Slider.js +29 -25
  58. package/SlidingPanels.js +4 -4
  59. package/StaticContent.js +2 -2
  60. package/StepBar.js +56 -52
  61. package/Switch.js +8 -8
  62. package/TabBar.js +126 -85
  63. package/TabLayout.js +4 -5
  64. package/Table.js +188 -138
  65. package/Text.js +69 -63
  66. package/Tooltip.js +11 -11
  67. package/TransitionOpen.js +9 -9
  68. package/WaitSpinner.js +3 -4
  69. package/package.json +4 -5
  70. package/types/src/Accordion/AccordionContext.d.ts +10 -0
  71. package/types/src/Accordion/Panel.d.ts +0 -9
  72. package/types/src/Button/Button.d.ts +4 -2
  73. package/types/src/ButtonGroup/ButtonGroupContext.d.ts +7 -0
  74. package/types/src/ButtonSimple/ButtonSimple.d.ts +5 -5
  75. package/types/src/Card/Card.d.ts +2 -0
  76. package/types/src/CardLayout/CardLayoutContext.d.ts +8 -0
  77. package/types/src/Color/Color.d.ts +2 -2
  78. package/types/src/ComboBox/ComboBox.d.ts +4 -3
  79. package/types/src/Concertina/ConcertinaContext.d.ts +8 -0
  80. package/types/src/Concertina/Panel.d.ts +2 -4
  81. package/types/src/ControlGroup/ControlGroup.d.ts +6 -1
  82. package/types/src/Date/Date.d.ts +3 -3
  83. package/types/src/EventListener/EventListener.d.ts +18 -0
  84. package/types/src/EventListener/index.d.ts +2 -0
  85. package/types/src/File/File.d.ts +6 -4
  86. package/types/src/File/FileContext.d.ts +3 -0
  87. package/types/src/File/Item.d.ts +5 -8
  88. package/types/src/FormRows/FormRows.d.ts +2 -2
  89. package/types/src/FormRows/FormRowsContext.d.ts +10 -0
  90. package/types/src/FormRows/Row.d.ts +5 -16
  91. package/types/src/Markdown/Markdown.d.ts +2 -0
  92. package/types/src/Markdown/renderers/MarkdownBlockquote.d.ts +14 -0
  93. package/types/src/Markdown/renderers/MarkdownCode.d.ts +15 -0
  94. package/types/src/Markdown/renderers/MarkdownCodeBlock.d.ts +16 -0
  95. package/types/src/Markdown/renderers/MarkdownHeading.d.ts +15 -0
  96. package/types/src/Markdown/renderers/MarkdownImage.d.ts +18 -0
  97. package/types/src/Markdown/renderers/MarkdownItem.d.ts +14 -0
  98. package/types/src/Markdown/renderers/MarkdownLink.d.ts +18 -0
  99. package/types/src/Markdown/renderers/MarkdownList.d.ts +26 -0
  100. package/types/src/Markdown/renderers/MarkdownParagraph.d.ts +14 -0
  101. package/types/src/Markdown/renderers/index.d.ts +10 -0
  102. package/types/src/Modal/Modal.d.ts +15 -3
  103. package/types/src/Monogram/Monogram.d.ts +5 -1
  104. package/types/src/Multiselect/Compact.d.ts +12 -4
  105. package/types/src/Multiselect/Multiselect.d.ts +14 -4
  106. package/types/src/Multiselect/Normal.d.ts +7 -2
  107. package/types/src/Number/Number.d.ts +11 -7
  108. package/types/src/Popover/Popover.d.ts +2 -2
  109. package/types/src/RadioBar/Option.d.ts +4 -14
  110. package/types/src/RadioBar/RadioBar.d.ts +2 -2
  111. package/types/src/RadioBar/RadioBarContext.d.ts +9 -0
  112. package/types/src/Scroll/Inner.d.ts +1 -1
  113. package/types/src/ScrollContainerContext/ScrollContainerContext.d.ts +4 -4
  114. package/types/src/Search/Option.d.ts +60 -0
  115. package/types/src/Search/Search.d.ts +97 -0
  116. package/types/src/Search/index.d.ts +2 -0
  117. package/types/src/Select/Select.d.ts +6 -2
  118. package/types/src/Select/SelectBase.d.ts +12 -5
  119. package/types/src/Slider/Slider.d.ts +2 -2
  120. package/types/src/StepBar/Step.d.ts +1 -13
  121. package/types/src/StepBar/StepBarContext.d.ts +8 -0
  122. package/types/src/TabBar/Tab.d.ts +5 -13
  123. package/types/src/TabBar/TabBarContext.d.ts +14 -0
  124. package/types/src/Table/Body.d.ts +1 -1
  125. package/types/src/Table/Head.d.ts +1 -1
  126. package/types/src/Table/Row.d.ts +10 -3
  127. package/types/src/Table/Table.d.ts +3 -2
  128. package/types/src/Text/Text.d.ts +11 -7
  129. package/types/src/icons/Sort.d.ts +3 -0
  130. package/types/src/usePrevious/index.d.ts +2 -0
  131. package/types/src/usePrevious/usePrevious.d.ts +12 -0
  132. package/usePrevious.js +137 -0
@@ -10,14 +10,6 @@ interface StepPropsBase {
10
10
  /** Displays active step with alert icon.
11
11
  * @includeTheme prisma */
12
12
  error?: boolean;
13
- /** @private. */
14
- isFirst?: boolean;
15
- /** @private. */
16
- idCounter?: string;
17
- /** @private. */
18
- isLast?: boolean;
19
- /** @private. Is the tab active. */
20
- status?: 'prev' | 'active' | 'next' | 'error';
21
13
  /**
22
14
  * A unique `id` for this step and used by the `StepBar` to keep track of the open `Step`.
23
15
  * Defaults to a zero-based index matching the component's position in `StepBar`.
@@ -26,16 +18,12 @@ interface StepPropsBase {
26
18
  }
27
19
  declare type StepProps = ComponentProps<StepPropsBase, 'li'>;
28
20
  declare function Step({ children, elementRef, error, // eslint-disable-line @typescript-eslint/no-unused-vars
29
- idCounter, isFirst, isLast, status, stepId, ...otherProps }: StepProps): JSX.Element;
21
+ stepId, ...otherProps }: StepProps): JSX.Element;
30
22
  declare namespace Step {
31
23
  var propTypes: {
32
24
  children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
33
25
  elementRef: PropTypes.Requireable<object>;
34
26
  error: PropTypes.Requireable<boolean>;
35
- idCounter: PropTypes.Requireable<string>;
36
- isFirst: PropTypes.Requireable<boolean>;
37
- isLast: PropTypes.Requireable<boolean>;
38
- status: PropTypes.Requireable<string>;
39
27
  stepId: PropTypes.Requireable<any>;
40
28
  };
41
29
  }
@@ -0,0 +1,8 @@
1
+ /// <reference types="react" />
2
+ export interface StepBarContext {
3
+ activeStepId: number;
4
+ idCounter?: string;
5
+ lastChildIndex?: number;
6
+ }
7
+ export declare const StepBarContext: import("react").Context<StepBarContext>;
8
+ export default StepBarContext;
@@ -1,5 +1,6 @@
1
1
  import React, { Component } from 'react';
2
2
  import { ClassComponentProps } from '../utils/types';
3
+ import TabBarContext from './TabBarContext';
3
4
  declare type TabClickHandler = (event: React.MouseEvent<HTMLButtonElement>, data: {
4
5
  tabId?: string;
5
6
  tabKey?: number;
@@ -15,8 +16,6 @@ interface TabPropsBase {
15
16
  * The ariaControls prop is the element `id` of the content displayed when the tab is selected.
16
17
  */
17
18
  ariaControls?: string;
18
- /** @private. Setting this prop to 'context' creates an appearance without an underline. */
19
- appearance?: 'navigation' | 'context';
20
19
  /** Inserts number in tab label. */
21
20
  count?: number;
22
21
  /** Prevents user from clicking the tab. */
@@ -27,8 +26,6 @@ interface TabPropsBase {
27
26
  elementRef?: React.Ref<HTMLButtonElement>;
28
27
  /** See Icon documentation for more information. */
29
28
  icon?: React.ReactNode;
30
- /** @private. Size of icon. */
31
- iconSize?: 'inline' | 'small' | 'large';
32
29
  /**
33
30
  * Placed on the clickable element. For accessibility, the related content must
34
31
  * have an `aria-labelledby` attribute that matches this `id`. The `id` must be unique
@@ -37,12 +34,6 @@ interface TabPropsBase {
37
34
  id?: string;
38
35
  /** The text shown in the button. */
39
36
  label?: React.ReactNode;
40
- /** @private. The layout of tabs */
41
- layout?: 'horizontal' | 'vertical';
42
- /** @private. Callback function when activated */
43
- onClick?: TabClickHandler;
44
- /** @private. Callback function when focused */
45
- onFocus?: TabFocusHandler;
46
37
  ref?: React.Ref<Tab>;
47
38
  /** A unique `id` for this tab and used by the `TabBar` to keep track of the open tab. */
48
39
  tabId?: string;
@@ -56,7 +47,7 @@ interface TabPropsBase {
56
47
  */
57
48
  tooltip?: React.ReactNode;
58
49
  }
59
- declare const defaultProps: Required<Pick<TabPropsBase, 'active' | 'disabled' | 'iconSize' | 'layout'>>;
50
+ declare const defaultProps: Required<Pick<TabPropsBase, 'active'>>;
60
51
  declare type TabProps = ClassComponentProps<TabPropsBase, typeof defaultProps, 'div'>;
61
52
  interface TabState {
62
53
  anchor: HTMLButtonElement | null;
@@ -64,8 +55,9 @@ interface TabState {
64
55
  }
65
56
  declare class Tab extends Component<TabProps, TabState> {
66
57
  private popoverId;
67
- static propTypes: React.WeakValidationMap<ClassComponentProps<TabPropsBase, Required<Pick<TabPropsBase, "disabled" | "layout" | "active" | "iconSize">>, "div", never>>;
68
- static defaultProps: Required<Pick<TabPropsBase, "disabled" | "layout" | "active" | "iconSize">>;
58
+ static propTypes: React.WeakValidationMap<ClassComponentProps<TabPropsBase, Required<Pick<TabPropsBase, "active">>, "div", never>>;
59
+ static defaultProps: Required<Pick<TabPropsBase, "active">>;
60
+ static contextType: React.Context<TabBarContext>;
69
61
  constructor(props: Readonly<TabProps>);
70
62
  private handleMount;
71
63
  private handleTooltipOpen;
@@ -0,0 +1,14 @@
1
+ /// <reference types="react" />
2
+ import { TabClickHandler, TabFocusHandler } from './Tab';
3
+ export interface TabBarContext {
4
+ active?: string;
5
+ appearance?: string;
6
+ disabled?: boolean;
7
+ iconSize?: 'inline' | 'small' | 'large';
8
+ layout?: 'horizontal' | 'vertical';
9
+ onClick?: TabClickHandler;
10
+ onFocus?: TabFocusHandler;
11
+ width?: number | null;
12
+ }
13
+ export declare const TabBarContext: import("react").Context<TabBarContext>;
14
+ export default TabBarContext;
@@ -16,7 +16,7 @@ interface BodyPropsBase {
16
16
  /** @private. Generally passed by Table rather than added directly. */
17
17
  movableColumns?: boolean;
18
18
  /** @private. Generally passed by Table rather than added directly. */
19
- rowExpansion?: 'single' | 'multi' | 'none';
19
+ rowExpansion?: 'single' | 'multi' | 'none' | 'controlled';
20
20
  /** @private. Generally passed by Table rather than added directly. */
21
21
  onRequestMoveRow?: BodyRequestMoveRowHandler;
22
22
  /** @private. Generally passed by Table rather than added directly. */
@@ -21,7 +21,7 @@ interface HeadPropsBase {
21
21
  /** @private. */
22
22
  actionsColumnWidth?: number;
23
23
  /**
24
- * Must be `Table.HeadCell`s or `Table.HeadDropdownCells`.
24
+ * Must be `Table.HeadCell`s or `Table.HeadDropdownCell`s.
25
25
  */
26
26
  children?: React.ReactNode;
27
27
  /** @private. */
@@ -45,7 +45,9 @@ interface RowPropsBase {
45
45
  elementRef?: React.Ref<HTMLTableRowElement>;
46
46
  /** @private. */
47
47
  expandable?: boolean;
48
- /** @private. */
48
+ /**
49
+ * Allows row expansion to be controlled programmatically if the `rowExpansion` prop is set to `controlled` in `Table`.
50
+ */
49
51
  expanded?: boolean;
50
52
  /**
51
53
  * An optional row that is displayed when this row is expanded, or an array of rows.
@@ -61,7 +63,9 @@ interface RowPropsBase {
61
63
  onClick?: RowClickHandler;
62
64
  /** @private. Generally passed by `Table` rather than added directly. */
63
65
  onDragStart?: RowDragStartHandler;
64
- /** @private. */
66
+ /**
67
+ * An event handler that triggers when the row expansion element is selected.
68
+ */
65
69
  onExpansion?: RowExpansionHandler;
66
70
  /** @private. This is passed through and works as expected. */
67
71
  onKeyDown?: React.KeyboardEventHandler<HTMLTableRowElement>;
@@ -87,12 +91,15 @@ declare class Row extends Component<RowProps, {}> {
87
91
  static splunkUiType: string;
88
92
  static propTypes: React.WeakValidationMap<ClassComponentProps<RowPropsBase, Required<Pick<RowPropsBase, "stripe">>, "tr", never>>;
89
93
  static defaultProps: Required<Pick<RowPropsBase, "stripe">>;
94
+ private elementRef;
90
95
  private handleClick;
91
96
  private handleKeyDown;
92
97
  private handleToggle;
98
+ private handleExpansion;
93
99
  private renderActionPrimary;
94
100
  private renderActionsSecondary;
101
+ private handleMount;
95
102
  render(): JSX.Element;
96
103
  }
97
104
  export default Row;
98
- export { RowActionPrimaryClickHandler, RowActionSecondaryClickHandler, RowClickHandler, RowDragStartHandler, RowRequestMoveRowHandler, RowRequestToggleHandler, };
105
+ export { RowActionPrimaryClickHandler, RowActionSecondaryClickHandler, RowClickHandler, RowDragStartHandler, RowRequestMoveRowHandler, RowRequestToggleHandler, RowExpansionHandler, };
@@ -89,9 +89,10 @@ interface TablePropsBase {
89
89
  * * `single`: Only one row can be expanded at a time. If another expansion button is
90
90
  * clicked, the currently expanded row closes and the new one opens.
91
91
  * * `multi`: Allows mulitple rows to be expanded at the same time.
92
+ * * `controlled`: Allows the expanded state to be externally managed by `expanded` prop of `Row`.
92
93
  * * `none`: The default with no row expansion.
93
94
  */
94
- rowExpansion?: 'single' | 'multi' | 'none';
95
+ rowExpansion?: 'single' | 'multi' | 'controlled' | 'none';
95
96
  /**
96
97
  * When an `onRequestToggleAllRows` handler is defined, this prop determines the appearance
97
98
  * of the toggle all rows button.
@@ -148,7 +149,7 @@ declare class Table extends Component<TableProps, TableState> {
148
149
  private table;
149
150
  private tableContainer;
150
151
  static propTypes: React.WeakValidationMap<ClassComponentProps<TablePropsBase, Required<Pick<TablePropsBase, "actions" | "rowSelection" | "resizableFillLayout" | "headType" | "dockOffset" | "rowExpansion">>, "div", never>>;
151
- static contextType: React.Context<Element | "window" | null | undefined>;
152
+ static contextType: React.Context<Window | Document | HTMLElement | null | undefined>;
152
153
  static defaultProps: Required<Pick<TablePropsBase, "actions" | "rowSelection" | "resizableFillLayout" | "headType" | "dockOffset" | "rowExpansion">>;
153
154
  static Caption: typeof Caption;
154
155
  static Head: typeof Head;