@splunk/react-ui 5.0.0-beta.3 → 5.0.0-beta.4

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 (149) hide show
  1. package/Accordion.js +185 -243
  2. package/Animation.js +2 -2
  3. package/Button.js +1 -1
  4. package/ButtonSimple.js +47 -41
  5. package/CHANGELOG.md +12 -2
  6. package/CHANGELOG.v5.mdx +38 -0
  7. package/Calendar.js +352 -469
  8. package/Chip.js +149 -280
  9. package/Code.js +19 -12
  10. package/Color.js +32 -32
  11. package/ComboBox.js +8 -6
  12. package/Date.js +1 -1
  13. package/DualListbox.js +298 -296
  14. package/File.js +294 -281
  15. package/FormRows.js +165 -153
  16. package/Image.js +124 -251
  17. package/Layout.d.ts +2 -0
  18. package/MIGRATION.v5.mdx +1 -1
  19. package/Menu.js +1 -1
  20. package/Message.js +77 -100
  21. package/MessageBar.js +141 -251
  22. package/Modal.js +2 -2
  23. package/ModalLayer.js +12 -12
  24. package/Multiselect.js +1978 -2323
  25. package/NonInteractiveCheckbox.js +29 -117
  26. package/Number.js +114 -114
  27. package/Popover.js +348 -350
  28. package/Progress.js +1 -1
  29. package/RadioBar.js +136 -136
  30. package/Scroll.js +2 -2
  31. package/Select.js +236 -240
  32. package/SidePanel.js +17 -21
  33. package/Slider.js +366 -370
  34. package/SlidingPanels.js +100 -102
  35. package/SplitButton.js +39 -25
  36. package/StepBar.js +1 -1
  37. package/Switch.js +70 -64
  38. package/TabBar.js +544 -417
  39. package/Table.js +1580 -1434
  40. package/Text.js +34 -34
  41. package/TextArea.js +26 -26
  42. package/Tooltip.js +416 -562
  43. package/TransitionOpen.js +2 -2
  44. package/package.json +7 -9
  45. package/types/src/Accordion/Accordion.d.ts +14 -21
  46. package/types/src/Accordion/AccordionContext.d.ts +0 -1
  47. package/types/src/Animation/Animation.d.ts +2 -3
  48. package/types/src/AnimationToggle/docs/examples/Provider.d.ts +2 -2
  49. package/types/src/AnimationToggle/docs/examples/ToggleComponent.d.ts +2 -2
  50. package/types/src/AnimationToggle/useAnimationToggle.d.ts +1 -1
  51. package/types/src/Button/Button.d.ts +1 -1
  52. package/types/src/ButtonGroup/ButtonGroupContext.d.ts +0 -1
  53. package/types/src/ButtonSimple/ButtonSimple.d.ts +1 -3
  54. package/types/src/ButtonSimple/mixin.d.ts +1 -1
  55. package/types/src/Calendar/Calendar.d.ts +2 -2
  56. package/types/src/Calendar/{DateTable.d.ts → DateGrid.d.ts} +9 -9
  57. package/types/src/Calendar/Day.d.ts +8 -4
  58. package/types/src/CardLayout/CardLayoutContext.d.ts +0 -1
  59. package/types/src/CardLayout/docs/examples/Interactive.d.ts +2 -2
  60. package/types/src/Clickable/Clickable.d.ts +1 -1
  61. package/types/src/CollapsiblePanel/SingleOpenPanelGroupContext.d.ts +0 -1
  62. package/types/src/ComboBox/ComboBox.d.ts +3 -3
  63. package/types/src/ControlGroup/docs/examples/CustomizedLabelTarget.d.ts +2 -2
  64. package/types/src/Date/docs/examples/Controlled.d.ts +2 -2
  65. package/types/src/Date/docs/examples/HighlightToday.d.ts +2 -2
  66. package/types/src/DefinitionList/DefinitionListContext.d.ts +0 -1
  67. package/types/src/DualListbox/DualListbox.d.ts +5 -1
  68. package/types/src/File/File.d.ts +4 -4
  69. package/types/src/File/FileContext.d.ts +0 -1
  70. package/types/src/File/Item.d.ts +11 -3
  71. package/types/src/File/ItemIcon.d.ts +2 -1
  72. package/types/src/File/docs/examples/Disabled.d.ts +2 -2
  73. package/types/src/File/docs/examples/DropAnywhere.d.ts +2 -2
  74. package/types/src/File/docs/examples/Multi.d.ts +2 -2
  75. package/types/src/File/docs/examples/Single.d.ts +2 -2
  76. package/types/src/FormRows/FormRows.d.ts +4 -4
  77. package/types/src/FormRows/FormRowsContext.d.ts +1 -2
  78. package/types/src/FormRows/SortableRow.d.ts +1 -1
  79. package/types/src/FormRows/docs/examples/Basic.d.ts +2 -2
  80. package/types/src/FormRows/docs/examples/Header.d.ts +2 -2
  81. package/types/src/FormRows/docs/examples/Menu.d.ts +2 -2
  82. package/types/src/FormRows/docs/examples/ReorderOnly.d.ts +2 -2
  83. package/types/src/Image/Image.d.ts +1 -4
  84. package/types/src/JSONTree/docs/examples/Events.d.ts +2 -2
  85. package/types/src/Layout/Layout.d.ts +1 -0
  86. package/types/src/Link/icons/External.d.ts +1 -2
  87. package/types/src/Menu/Divider.d.ts +1 -1
  88. package/types/src/Menu/MenuContext.d.ts +0 -1
  89. package/types/src/MessageBar/MessageBar.d.ts +5 -1
  90. package/types/src/Modal/ModalContext.d.ts +0 -1
  91. package/types/src/Multiselect/Compact.d.ts +46 -21
  92. package/types/src/Multiselect/Multiselect.d.ts +70 -30
  93. package/types/src/Multiselect/Normal.d.ts +46 -57
  94. package/types/src/Multiselect/Option.d.ts +42 -18
  95. package/types/src/Multiselect/docs/examples/Children.d.ts +2 -2
  96. package/types/src/Multiselect/docs/examples/Controlled.d.ts +2 -2
  97. package/types/src/Multiselect/docs/examples/CustomizeSelected.d.ts +2 -2
  98. package/types/src/Multiselect/docs/examples/Disabled.d.ts +2 -2
  99. package/types/src/Multiselect/docs/examples/Error.d.ts +2 -2
  100. package/types/src/Multiselect/docs/examples/Fetching.d.ts +2 -2
  101. package/types/src/Multiselect/docs/examples/LoadMoreOnScrollBottom.d.ts +2 -2
  102. package/types/src/Multiselect/docs/examples/NewValues.d.ts +2 -2
  103. package/types/src/Multiselect/docs/examples/TabInput.d.ts +2 -2
  104. package/types/src/NonInteractiveCheckbox/NonInteractiveCheckbox.d.ts +8 -7
  105. package/types/src/Number/docs/examples/Basic.d.ts +2 -2
  106. package/types/src/Number/docs/examples/Limits.d.ts +2 -2
  107. package/types/src/Number/docs/examples/Locale.d.ts +2 -2
  108. package/types/src/Popover/Popover.d.ts +1 -1
  109. package/types/src/Popover/PopoverMenuContext.d.ts +0 -1
  110. package/types/src/RadioBar/RadioBar.d.ts +1 -1
  111. package/types/src/RadioBar/RadioBarContext.d.ts +0 -1
  112. package/types/src/RadioList/RadioListContext.d.ts +0 -1
  113. package/types/src/Scroll/Inner.d.ts +1 -1
  114. package/types/src/Scroll/docs/examples/Controlled.d.ts +2 -2
  115. package/types/src/Search/Search.d.ts +2 -2
  116. package/types/src/Select/SelectBase.d.ts +2 -2
  117. package/types/src/Slider/docs/examples/Controlled.d.ts +2 -2
  118. package/types/src/Slider/docs/examples/CustomLabels.d.ts +2 -2
  119. package/types/src/Slider/getStepMarksBackground.d.ts +8 -0
  120. package/types/src/SlidingPanels/Panel.d.ts +2 -2
  121. package/types/src/SlidingPanels/SlidingPanels.d.ts +2 -2
  122. package/types/src/SlidingPanels/docs/examples/Basic.d.ts +2 -2
  123. package/types/src/SlidingPanels/docs/examples/Dropdown.d.ts +2 -2
  124. package/types/src/SplitButton/Item.d.ts +15 -2
  125. package/types/src/StepBar/Step.d.ts +1 -1
  126. package/types/src/StepBar/StepBar.d.ts +1 -1
  127. package/types/src/StepBar/StepBarContext.d.ts +0 -1
  128. package/types/src/Switch/docs/examples/Basic.d.ts +2 -2
  129. package/types/src/Switch/docs/examples/Disabled.d.ts +2 -2
  130. package/types/src/TabBar/Tab.d.ts +12 -5
  131. package/types/src/TabBar/TabBar.d.ts +3 -2
  132. package/types/src/TabBar/TabBarContext.d.ts +7 -2
  133. package/types/src/Table/Head.d.ts +4 -15
  134. package/types/src/Table/HeadCell.d.ts +23 -25
  135. package/types/src/Table/HeadDropdownCell.d.ts +23 -26
  136. package/types/src/Table/HeadInner.d.ts +4 -10
  137. package/types/src/Table/Row.d.ts +6 -6
  138. package/types/src/Table/Table.d.ts +3 -8
  139. package/types/src/Table/TableContext.d.ts +0 -1
  140. package/types/src/Tooltip/Tooltip.d.ts +26 -58
  141. package/types/src/Tooltip/docs/examples/Controlled.d.ts +2 -2
  142. package/types/src/Tree/TreeContext.d.ts +0 -1
  143. package/types/src/useForceUpdate/useForceUpdate.d.ts +0 -1
  144. package/types/src/useResizeObserver/useResizeObserver.d.ts +2 -1
  145. package/types/src/utils/types.d.ts +2 -3
  146. package/useResizeObserver.js +26 -19
  147. package/types/src/Image/icons/Cross.d.ts +0 -3
  148. package/types/src/Table/docs/examples/prisma/DockedHeaderScrollbar.d.ts +0 -3
  149. package/types/src/Tooltip/InfoIcon.d.ts +0 -4
@@ -7,9 +7,9 @@ interface ExampleState {
7
7
  options: MovieOption[];
8
8
  values: (string | number | boolean)[];
9
9
  }
10
- declare class Fetching extends Component<{}, ExampleState> {
10
+ declare class Fetching extends Component<object, ExampleState> {
11
11
  private fetchOptions;
12
- constructor(props: {});
12
+ constructor(props: object);
13
13
  componentDidMount(): void;
14
14
  componentWillUnmount(): void;
15
15
  handleChange: MultiselectChangeHandler;
@@ -8,9 +8,9 @@ interface ExampleState {
8
8
  options: MovieOption[];
9
9
  values: (string | number | boolean)[];
10
10
  }
11
- declare class LoadMoreOnScrollBottom extends Component<{}, ExampleState> {
11
+ declare class LoadMoreOnScrollBottom extends Component<object, ExampleState> {
12
12
  private fetchOptions;
13
- constructor(props: {});
13
+ constructor(props: object);
14
14
  componentDidMount(): void;
15
15
  componentWillUnmount(): void;
16
16
  handleChange: MultiselectChangeHandler;
@@ -1,9 +1,9 @@
1
1
  import React, { Component } from 'react';
2
2
  import { MultiselectChangeHandler } from '@splunk/react-ui/Multiselect';
3
- declare class NewValues extends Component<{}, {
3
+ declare class NewValues extends Component<object, {
4
4
  values: (string | number | boolean)[];
5
5
  }> {
6
- constructor(props: {});
6
+ constructor(props: object);
7
7
  handleChange: MultiselectChangeHandler;
8
8
  render(): React.JSX.Element;
9
9
  }
@@ -1,9 +1,9 @@
1
1
  import React, { Component } from 'react';
2
2
  import { MultiselectChangeHandler } from '@splunk/react-ui/Multiselect';
3
- declare class TabInput extends Component<{}, {
3
+ declare class TabInput extends Component<object, {
4
4
  values: (string | number | boolean)[];
5
5
  }> {
6
- constructor(props: {});
6
+ constructor(props: object);
7
7
  handleChange: MultiselectChangeHandler;
8
8
  render(): React.JSX.Element;
9
9
  }
@@ -2,20 +2,21 @@ import React from 'react';
2
2
  import PropTypes from 'prop-types';
3
3
  import { ComponentProps } from '../utils/types';
4
4
  interface NonInteractiveCheckboxPropsBase {
5
- disabled?: boolean | 'dimmed';
5
+ disabled?: boolean;
6
6
  selected?: boolean | 'some';
7
7
  }
8
8
  type NonInteractiveCheckboxProps = ComponentProps<NonInteractiveCheckboxPropsBase, 'div'>;
9
9
  /**
10
10
  * NonInteractiveCheckbox is a private component that replaced our internal usage of Switch's interactive={false}
11
- * with react-icons instead in components like Menu.Item, Table.Toggle, etc. (SUI-6757)
11
+ * for components like Menu.Item, Table.Toggle, etc. (SUI-6757)
12
12
  *
13
13
  */
14
- declare function NonInteractiveCheckbox({ disabled, selected, ...otherProps }: NonInteractiveCheckboxProps): React.JSX.Element;
15
- declare namespace NonInteractiveCheckbox {
16
- var propTypes: {
17
- disabled: PropTypes.Requireable<NonNullable<string | boolean | null | undefined>>;
14
+ declare const NonInteractiveCheckbox: {
15
+ ({ className, disabled, selected }: NonInteractiveCheckboxProps): React.JSX.Element;
16
+ propTypes: {
17
+ disabled: PropTypes.Requireable<boolean>;
18
18
  selected: PropTypes.Requireable<NonNullable<string | boolean | null | undefined>>;
19
19
  };
20
- }
20
+ };
21
21
  export default NonInteractiveCheckbox;
22
+ export { NonInteractiveCheckboxPropsBase };
@@ -1,9 +1,9 @@
1
1
  import React, { Component } from 'react';
2
2
  import { NumberChangeHandler } from '@splunk/react-ui/Number';
3
- declare class Basic extends Component<{}, {
3
+ declare class Basic extends Component<object, {
4
4
  value?: number;
5
5
  }> {
6
- constructor(props: {});
6
+ constructor(props: object);
7
7
  handleChange: NumberChangeHandler;
8
8
  render(): React.JSX.Element;
9
9
  }
@@ -1,9 +1,9 @@
1
1
  import React, { Component } from 'react';
2
2
  import { NumberChangeHandler } from '@splunk/react-ui/Number';
3
- declare class Limits extends Component<{}, {
3
+ declare class Limits extends Component<object, {
4
4
  value?: number;
5
5
  }> {
6
- constructor(props: {});
6
+ constructor(props: object);
7
7
  handleChange: NumberChangeHandler;
8
8
  render(): React.JSX.Element;
9
9
  }
@@ -1,9 +1,9 @@
1
1
  import React, { Component } from 'react';
2
2
  import { NumberChangeHandler } from '@splunk/react-ui/Number';
3
- declare class Locale extends Component<{}, {
3
+ declare class Locale extends Component<object, {
4
4
  value?: number;
5
5
  }> {
6
- constructor(props: {});
6
+ constructor(props: object);
7
7
  handleChange: NumberChangeHandler;
8
8
  render(): React.JSX.Element;
9
9
  }
@@ -1,6 +1,6 @@
1
1
  import React from 'react';
2
2
  import PropTypes from 'prop-types';
3
- import { SpringConfig } from 'react-spring';
3
+ import { SpringConfig } from '@react-spring/web';
4
4
  import { ComponentProps } from '../utils/types';
5
5
  /** @public */
6
6
  type PopoverChildrenRenderer = (data: {
@@ -1,4 +1,3 @@
1
- /// <reference types="react" />
2
1
  interface PopoverMenuContextValue {
3
2
  retainFocus?: boolean;
4
3
  }
@@ -64,7 +64,7 @@ type RadioBarProps = ComponentProps<RadioBarPropsBaseControlled | RadioBarPropsB
64
64
  /**
65
65
  * RadioBar is a form control that provides the ability to select one option out of a group.
66
66
  */
67
- declare function RadioBar({ children, defaultValue: defaultValueProp, describedBy, error, labelledBy, name, onChange, required, role, value: valueProp, ...otherProps }: RadioBarProps): React.JSX.Element;
67
+ declare function RadioBar({ children, defaultValue: defaultValueProp, describedBy, elementRef, error, labelledBy, name, onChange, required, role, value: valueProp, ...otherProps }: RadioBarProps): React.JSX.Element;
68
68
  declare namespace RadioBar {
69
69
  var Option: typeof import("./Option").default;
70
70
  var propTypes: {
@@ -1,4 +1,3 @@
1
- /// <reference types="react" />
2
1
  import { OptionClickHandler, OnKeyDownHandler } from './Option';
3
2
  export interface RadioBarContext {
4
3
  onClick?: OptionClickHandler;
@@ -1,4 +1,3 @@
1
- /// <reference types="react" />
2
1
  import { RadioListChangeHandler, RadioListValueTypes } from './RadioList';
3
2
  export interface RadioListContext {
4
3
  disabled?: boolean;
@@ -1,6 +1,6 @@
1
1
  import React from 'react';
2
2
  import PropTypes from 'prop-types';
3
- import { SpringValue } from 'react-spring';
3
+ import { SpringValue } from '@react-spring/web';
4
4
  import { ComponentProps } from '../utils/types';
5
5
  interface InnerPropsBase {
6
6
  children?: React.ReactNode;
@@ -1,9 +1,9 @@
1
1
  import React, { Component } from 'react';
2
- declare class Basic extends Component<{}, {
2
+ declare class Basic extends Component<object, {
3
3
  top?: number;
4
4
  }> {
5
5
  private scrollEl;
6
- constructor(props: {});
6
+ constructor(props: object);
7
7
  handleClickDown: () => void;
8
8
  handleClickUp: () => void;
9
9
  handleScrollComplete: () => void;
@@ -104,8 +104,8 @@ declare function Search({ animateLoading, children, defaultPlacement, defaultVal
104
104
  declare namespace Search {
105
105
  var propTypes: React.WeakValidationMap<SearchPropsBase>;
106
106
  var Option: typeof import("./Option").default;
107
- var Divider: typeof import("../Menu/Divider").default;
108
- var Heading: typeof import("../Menu/Heading").default;
107
+ var Divider: typeof import("@splunk/react-ui/Menu").Divider;
108
+ var Heading: typeof import("@splunk/react-ui/Menu").Heading;
109
109
  }
110
110
  export default Search;
111
111
  export { SearchBlurHandler, SearchChangeHandler, SearchFocusHandler, Option, Divider, Heading, SearchProps, SearchPropsBase, SearchPropsBaseControlled, SearchPropsBaseUncontrolled, };
@@ -282,8 +282,8 @@ declare namespace SelectBase {
282
282
  };
283
283
  var componentType: string;
284
284
  var Option: typeof import("./OptionBase").default;
285
- var Divider: typeof import("../Menu/Divider").default;
286
- var Heading: typeof import("../Menu/Heading").default;
285
+ var Divider: typeof import("@splunk/react-ui/Menu").Divider;
286
+ var Heading: typeof import("@splunk/react-ui/Menu").Heading;
287
287
  }
288
288
  export default SelectBase;
289
289
  export { Controls, ChildrenElement, Divider, Heading, Option, SelectBaseChangeHandler, SelectBaseChangeReason, SelectBaseFilterChangeHandler, SelectBaseProps, isOption, };
@@ -1,10 +1,10 @@
1
1
  import React, { Component } from 'react';
2
2
  import { SliderChangeHandler } from '@splunk/react-ui/Slider';
3
3
  import { NumberChangeHandler } from '@splunk/react-ui/Number';
4
- declare class Controlled extends Component<{}, {
4
+ declare class Controlled extends Component<object, {
5
5
  value?: number;
6
6
  }> {
7
- constructor(props: {});
7
+ constructor(props: object);
8
8
  handleSliderChange: SliderChangeHandler;
9
9
  handleNumberChange: NumberChangeHandler;
10
10
  render(): React.JSX.Element;
@@ -1,11 +1,11 @@
1
1
  import React, { Component } from 'react';
2
2
  import { SliderChangeHandler } from '@splunk/react-ui/Slider';
3
- declare class CustomLabels extends Component<{}, {
3
+ declare class CustomLabels extends Component<object, {
4
4
  displayValue: string;
5
5
  value: number;
6
6
  }> {
7
7
  static convertValueToLabel(value: number): string;
8
- constructor(props: {});
8
+ constructor(props: object);
9
9
  handleChange: SliderChangeHandler;
10
10
  render(): React.JSX.Element;
11
11
  }
@@ -0,0 +1,8 @@
1
+ import { AnyTheme, InterpolationResult } from '@splunk/themes';
2
+ declare function getStepMarksBackground<T extends AnyTheme, A extends object>({ stepWidth, thumbPosition, beforeThumbStepColor, afterThumbStepColor, }: {
3
+ stepWidth: number;
4
+ thumbPosition?: number;
5
+ beforeThumbStepColor: InterpolationResult<T, A>;
6
+ afterThumbStepColor: InterpolationResult<T, A>;
7
+ }): import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<import("@splunk/themes").ThemedProps<T> & A, any>>;
8
+ export default getStepMarksBackground;
@@ -22,7 +22,7 @@ interface PanelPropsBase {
22
22
  /**
23
23
  * A unique `id` for this panel and used by the SlidingPanels to keep track of the open panel.
24
24
  */
25
- panelId: any;
25
+ panelId: string | number;
26
26
  }
27
27
  type PanelProps = ComponentProps<PanelPropsBase, 'div'>;
28
28
  /**
@@ -37,7 +37,7 @@ declare namespace Panel {
37
37
  onMount: PropTypes.Requireable<(...args: any[]) => any>;
38
38
  /** @private */
39
39
  onUnmount: PropTypes.Requireable<(...args: any[]) => any>;
40
- panelId: PropTypes.Validator<any>;
40
+ panelId: PropTypes.Validator<NonNullable<NonNullable<string | number | null | undefined>>>;
41
41
  };
42
42
  }
43
43
  export default Panel;
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
3
3
  import Panel from './Panel';
4
4
  import { ComponentProps } from '../utils/types';
5
5
  interface SlidingPanelsPropsBase {
6
- activePanelId: any;
6
+ activePanelId: string | number;
7
7
  children?: React.ReactNode;
8
8
  /**
9
9
  * A React ref which is set to the DOM element when the component mounts and null when it unmounts.
@@ -23,7 +23,7 @@ type SlidingPanelsProps = ComponentProps<SlidingPanelsPropsBase, 'div'>;
23
23
  declare function SlidingPanels({ activePanelId, children, elementRef, innerClassName, innerStyle, onAnimationEnd, outerClassName, outerStyle, transition, ...otherProps }: SlidingPanelsProps): React.JSX.Element;
24
24
  declare namespace SlidingPanels {
25
25
  var propTypes: {
26
- activePanelId: PropTypes.Validator<any>;
26
+ activePanelId: PropTypes.Validator<NonNullable<NonNullable<string | number | null | undefined>>>;
27
27
  children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
28
28
  elementRef: PropTypes.Requireable<object>;
29
29
  innerClassName: PropTypes.Requireable<string>;
@@ -1,9 +1,9 @@
1
1
  import React, { Component } from 'react';
2
- declare class Basic extends Component<{}, {
2
+ declare class Basic extends Component<object, {
3
3
  activePanelId: string;
4
4
  transition: 'forward' | 'backward';
5
5
  }> {
6
- constructor(props: {});
6
+ constructor(props: object);
7
7
  goBack: () => void;
8
8
  goForward: () => void;
9
9
  render(): React.JSX.Element;
@@ -1,9 +1,9 @@
1
1
  import React, { Component } from 'react';
2
- declare class DropdownExample extends Component<{}, {
2
+ declare class DropdownExample extends Component<object, {
3
3
  activePanelId: string;
4
4
  transition: 'forward' | 'backward';
5
5
  }> {
6
- constructor(props: {});
6
+ constructor(props: object);
7
7
  goBack: () => void;
8
8
  goForward: () => void;
9
9
  render(): React.JSX.Element;
@@ -1,6 +1,13 @@
1
1
  import React from 'react';
2
2
  import PropTypes from 'prop-types';
3
3
  import { ComponentProps } from '../utils/types';
4
+ /** @public */
5
+ type ItemClickHandler = (event: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>, data: {
6
+ action?: string;
7
+ icon?: React.ReactNode;
8
+ label?: React.ReactNode;
9
+ value?: any;
10
+ }) => void;
4
11
  interface ItemPropsBase {
5
12
  /**
6
13
  * Changes the style if isMain=true, passed from SplitButton.
@@ -19,6 +26,10 @@ interface ItemPropsBase {
19
26
  * A React ref which is set to the DOM element when the component mounts and null when it unmounts.
20
27
  */
21
28
  elementRef?: React.Ref<HTMLButtonElement | HTMLAnchorElement>;
29
+ /**
30
+ * Applies an icon in front of the label.
31
+ */
32
+ icon?: React.ReactNode;
22
33
  /**
23
34
  * Becomes the main button. If no `Item`s have this prop, the first `Item` is the main button.
24
35
  */
@@ -26,21 +37,23 @@ interface ItemPropsBase {
26
37
  /**
27
38
  * A callback for when an item is clicked.
28
39
  */
29
- onClick?: React.MouseEventHandler<HTMLAnchorElement | HTMLButtonElement>;
40
+ onClick?: ItemClickHandler;
30
41
  }
31
42
  type ItemProps = ComponentProps<ItemPropsBase, 'button'>;
32
43
  /**
33
44
  * An item within a `SplitButton`.
34
45
  */
35
- declare function Item({ appearance, disabled, elementRef, isMain, children, onClick, ...otherProps }: ItemProps): React.JSX.Element;
46
+ declare function Item({ appearance, disabled, elementRef, icon: iconProp, isMain, children, onClick, ...otherProps }: ItemProps): React.JSX.Element;
36
47
  declare namespace Item {
37
48
  var propTypes: {
38
49
  appearance: PropTypes.Requireable<string>;
39
50
  children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
40
51
  disabled: PropTypes.Requireable<boolean>;
41
52
  elementRef: PropTypes.Requireable<object>;
53
+ icon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
42
54
  isMain: PropTypes.Requireable<boolean>;
43
55
  onClick: PropTypes.Requireable<(...args: any[]) => any>;
44
56
  };
45
57
  }
46
58
  export default Item;
59
+ export { ItemClickHandler };
@@ -13,7 +13,7 @@ interface StepPropsBase {
13
13
  * A unique `id` for this step and used by the `StepBar` to keep track of the open `Step`.
14
14
  * Defaults to a zero-based index matching the component's position in `StepBar`.
15
15
  */
16
- stepId?: any;
16
+ stepId?: number;
17
17
  }
18
18
  type StepProps = ComponentProps<StepPropsBase, 'li'>;
19
19
  declare function Step({ children, elementRef, error, // eslint-disable-line @typescript-eslint/no-unused-vars
@@ -4,7 +4,7 @@ import Step from './Step';
4
4
  import { ComponentProps } from '../utils/types';
5
5
  interface StepBarPropsBase {
6
6
  /** The `stepId` of the `StepBar.Step` to activate. */
7
- activeStepId: any;
7
+ activeStepId: number;
8
8
  /**
9
9
  * Must be `StepBar.Step`.
10
10
  */
@@ -1,4 +1,3 @@
1
- /// <reference types="react" />
2
1
  export interface StepBarContext {
3
2
  activeStepId: number;
4
3
  idCounter?: string;
@@ -1,9 +1,9 @@
1
1
  import React, { Component } from 'react';
2
2
  import { SwitchClickHandler } from '@splunk/react-ui/Switch';
3
- declare class Basic extends Component<{}, {
3
+ declare class Basic extends Component<object, {
4
4
  values: number[];
5
5
  }> {
6
- constructor(props: {});
6
+ constructor(props: object);
7
7
  handleClick: SwitchClickHandler;
8
8
  render(): React.JSX.Element;
9
9
  }
@@ -1,9 +1,9 @@
1
1
  import React, { Component } from 'react';
2
2
  import { SwitchClickHandler } from '@splunk/react-ui/Switch';
3
- declare class Disabled extends Component<{}, {
3
+ declare class Disabled extends Component<object, {
4
4
  values: number[];
5
5
  }> {
6
- constructor(props: {});
6
+ constructor(props: object);
7
7
  handleClick: SwitchClickHandler;
8
8
  render(): React.JSX.Element;
9
9
  }
@@ -8,8 +8,6 @@ type TabFocusHandler = (event: React.FocusEvent<HTMLButtonElement>, data: {
8
8
  tabId: string;
9
9
  }) => void;
10
10
  interface TabPropsBase {
11
- /** @private. Is the tab active. */
12
- active?: boolean;
13
11
  /**
14
12
  * The ariaControls prop is the element `id` of the content displayed when the tab is selected.
15
13
  */
@@ -53,13 +51,16 @@ interface TabPropsBase {
53
51
  * The `menu` prop is only supported in horizontal layout due to both design constraints as well as keyboard support.
54
52
  */
55
53
  menu?: React.ReactNode;
54
+ /**
55
+ * @private
56
+ * Internal prop injected by TabBar to track focus order.
57
+ */
58
+ index?: number;
56
59
  }
57
60
  type TabProps = ComponentProps<TabPropsBase, 'div'>;
58
61
  declare const Tab: {
59
- ({ active, ariaControls, count, disabled, elementRef, icon, label, maxCount, tabId: tabIdProp, to, tooltip, menu, ...otherProps }: TabProps): React.JSX.Element;
62
+ ({ ariaControls, count, disabled, elementRef, icon, label, maxCount, tabId: tabIdProp, to, tooltip, menu, index, ...otherProps }: TabProps): React.JSX.Element;
60
63
  propTypes: {
61
- /** @private. Is the tab active. */
62
- active: PropTypes.Requireable<boolean>;
63
64
  ariaControls: PropTypes.Requireable<string>;
64
65
  count: PropTypes.Requireable<number>;
65
66
  disabled: PropTypes.Requireable<boolean>;
@@ -79,7 +80,13 @@ declare const Tab: {
79
80
  * The `menu` prop is only supported in horizontal layout due to both design constraints as well as keyboard support.
80
81
  */
81
82
  menu: PropTypes.Requireable<PropTypes.ReactNodeLike>;
83
+ /**
84
+ * @private
85
+ * Internal prop injected by TabBar to track order.
86
+ */
87
+ index: PropTypes.Requireable<number>;
82
88
  };
89
+ as: string;
83
90
  };
84
91
  export default Tab;
85
92
  export { TabClickHandler, TabFocusHandler };
@@ -46,9 +46,8 @@ declare namespace TabBar {
46
46
  tabWidth: PropTypes.Requireable<number>;
47
47
  };
48
48
  var Tab: {
49
- ({ active, ariaControls, count, disabled, elementRef, icon, label, maxCount, tabId: tabIdProp, to, tooltip, menu, ...otherProps }: import("./Tab").TabPropsBase & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref" | "css" | keyof import("./Tab").TabPropsBase>): React.JSX.Element;
49
+ ({ ariaControls, count, disabled, elementRef, icon, label, maxCount, tabId: tabIdProp, to, tooltip, menu, index, ...otherProps }: import("./Tab").TabPropsBase & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref" | "css" | keyof import("./Tab").TabPropsBase>): React.JSX.Element;
50
50
  propTypes: {
51
- active: PropTypes.Requireable<boolean>;
52
51
  ariaControls: PropTypes.Requireable<string>;
53
52
  count: PropTypes.Requireable<number>;
54
53
  disabled: PropTypes.Requireable<boolean>;
@@ -61,7 +60,9 @@ declare namespace TabBar {
61
60
  to: PropTypes.Requireable<string>;
62
61
  tooltip: PropTypes.Requireable<PropTypes.ReactNodeLike>;
63
62
  menu: PropTypes.Requireable<PropTypes.ReactNodeLike>;
63
+ index: PropTypes.Requireable<number>;
64
64
  };
65
+ as: string;
65
66
  };
66
67
  }
67
68
  export default TabBar;
@@ -1,10 +1,9 @@
1
- /// <reference types="react" />
2
1
  import type { DropdownRequestCloseHandler } from '@splunk/react-ui/Dropdown';
3
2
  import type { TabClickHandler, TabFocusHandler } from './Tab';
4
3
  export interface TabBarContext {
5
4
  active?: string;
6
5
  disabled?: boolean;
7
- focusedTabId: string | null;
6
+ focusedTabId?: string;
8
7
  iconPosition?: 'above' | 'left';
9
8
  layout?: 'horizontal' | 'vertical';
10
9
  onClick?: TabClickHandler;
@@ -13,6 +12,12 @@ export interface TabBarContext {
13
12
  onMenuOpen: (menusTabId: string) => void;
14
13
  onMenuClose: DropdownRequestCloseHandler;
15
14
  isMenuOpen: boolean;
15
+ registerTab: ({ tabId, element, index, }: {
16
+ tabId: string;
17
+ element: HTMLButtonElement | HTMLAnchorElement | null;
18
+ index: number;
19
+ }) => void;
20
+ activeTabId?: string;
16
21
  }
17
22
  export declare const TabBarContext: import("react").Context<TabBarContext>;
18
23
  export default TabBarContext;
@@ -3,15 +3,12 @@ import PropTypes from 'prop-types';
3
3
  import { TableRequestMoveColumnHandler } from './Table';
4
4
  import { ComponentProps } from '../utils/types';
5
5
  type HeadAutosizeColumnHandler = (event: React.MouseEvent<HTMLHRElement>, data: {
6
- columnId: any;
6
+ columnId?: string;
7
7
  index: number;
8
8
  }) => void;
9
- type HeadDragStartHandler = (data: {
10
- dragIndex?: number;
11
- }) => void;
12
9
  type HeadRequestMoveColumnHandler = TableRequestMoveColumnHandler;
13
10
  type HeadRequestResizeColumnHandler = (event: React.KeyboardEvent<HTMLHRElement> | MouseEvent, data: {
14
- columnId: any;
11
+ columnId?: string;
15
12
  id?: string;
16
13
  index: number;
17
14
  width: number;
@@ -32,16 +29,12 @@ interface HeadPropsBase {
32
29
  */
33
30
  elementRef?: React.Ref<HTMLTableSectionElement>;
34
31
  /** @private. */
35
- guidelineIndex?: number;
36
- /** @private. */
37
32
  hasDragColumn?: boolean;
38
33
  /** @private. */
39
34
  hasInfoColumn?: boolean;
40
35
  /** @private. */
41
36
  onAutosizeColumn?: HeadAutosizeColumnHandler;
42
37
  /** @private. */
43
- onDragStart?: HeadDragStartHandler;
44
- /** @private. */
45
38
  onRequestMoveColumn?: HeadRequestMoveColumnHandler;
46
39
  /** @private. */
47
40
  onRequestResizeColumn?: HeadRequestResizeColumnHandler;
@@ -52,7 +45,7 @@ interface HeadPropsBase {
52
45
  }
53
46
  type HeadProps = ComponentProps<HeadPropsBase, 'thead'>;
54
47
  declare const getCellWidths: (headEl: HTMLTableSectionElement | null) => number[];
55
- declare function Head({ actions, actionsColumnWidth, cellMinWidth, children, elementRef, guidelineIndex, hasDragColumn, hasInfoColumn, onAutosizeColumn, onDragStart, onRequestMoveColumn, onRequestResizeColumn, onRequestToggleAllRows, rowSelection, ...otherProps }: HeadProps): React.JSX.Element;
48
+ declare function Head({ actions, actionsColumnWidth, cellMinWidth, children, elementRef, hasDragColumn, hasInfoColumn, onAutosizeColumn, onRequestMoveColumn, onRequestResizeColumn, onRequestToggleAllRows, rowSelection, ...otherProps }: HeadProps): React.JSX.Element;
56
49
  declare namespace Head {
57
50
  var propTypes: {
58
51
  /** @private. */
@@ -64,16 +57,12 @@ declare namespace Head {
64
57
  children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
65
58
  elementRef: PropTypes.Requireable<object>;
66
59
  /** @private. */
67
- guidelineIndex: PropTypes.Requireable<number>;
68
- /** @private. */
69
60
  hasDragColumn: PropTypes.Requireable<boolean>;
70
61
  /** @private. */
71
62
  hasInfoColumn: PropTypes.Requireable<boolean>;
72
63
  /** @private. */
73
64
  onAutosizeColumn: PropTypes.Requireable<(...args: any[]) => any>;
74
65
  /** @private. */
75
- onDragStart: PropTypes.Requireable<(...args: any[]) => any>;
76
- /** @private. */
77
66
  onRequestMoveColumn: PropTypes.Requireable<(...args: any[]) => any>;
78
67
  /** @private. */
79
68
  onRequestResizeColumn: PropTypes.Requireable<(...args: any[]) => any>;
@@ -85,4 +74,4 @@ declare namespace Head {
85
74
  var splunkUiType: string;
86
75
  }
87
76
  export default Head;
88
- export { HeadAutosizeColumnHandler, HeadDragStartHandler, HeadRequestMoveColumnHandler, HeadRequestResizeColumnHandler, getCellWidths, };
77
+ export { HeadAutosizeColumnHandler, HeadRequestMoveColumnHandler, HeadRequestResizeColumnHandler, getCellWidths, };