@splunk/react-ui 5.1.0 → 5.3.0

package/types/src/SidePanel/docs/examples/Basic.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Basic
+ * @description The size of the Panels is determined by the size of the content or by directly setting innerStyle.
+ */
 declare function Basic(): React.JSX.Element;
 export default Basic;

package/types/src/SidePanel/docs/examples/ChangeSize.d.ts

@@ -1,3 +1,6 @@
 import React from 'react';
+/**
+ * @name Change Panel size
+ */
 declare function ChangeWidth(): React.JSX.Element;
 export default ChangeWidth;

package/types/src/SidePanel/docs/examples/Composition.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Complex
+ * @description Composition with other components.
+ */
 declare function Composition(): React.JSX.Element;
 export default Composition;

package/types/src/Slider/docs/examples/Basic.d.ts

@@ -1,3 +1,6 @@
 import React from 'react';
+/**
+ * @name Uncontrolled
+ */
 declare function Basic(): React.JSX.Element;
 export default Basic;

package/types/src/Slider/docs/examples/Controlled.d.ts

@@ -1,6 +1,10 @@
 import React, { Component } from 'react';
 import { NumberChangeHandler } from '@splunk/react-ui/Number';
 import { SliderChangeHandler } from '@splunk/react-ui/Slider';
+/**
+ * @name Controlled
+ * @description Slider syncing with a Number input.
+ */
 declare class Controlled extends Component<object, {
     value?: number;
 }> {

package/types/src/Slider/docs/examples/CustomLabels.d.ts

@@ -1,5 +1,9 @@
 import React, { Component } from 'react';
 import { SliderChangeHandler } from '@splunk/react-ui/Slider';
+/**
+ * @name Custom labels
+ * @description Labels can be modified or removed. Replacing all labels can create very different experiences, such as exponentially increasing values or ordered values (words only).
+ */
 declare class CustomLabels extends Component<object, {
     displayValue: string;
     value: number;

package/types/src/Slider/docs/examples/Disabled.d.ts

@@ -1,3 +1,6 @@
 import React from 'react';
+/**
+ * @name Disabled
+ */
 declare function Disabled(): React.JSX.Element;
 export default Disabled;

package/types/src/Slider/docs/examples/Error.d.ts

@@ -1,3 +1,6 @@
 import React from 'react';
+/**
+ * @name Error
+ */
 declare function Error(): React.JSX.Element;
 export default Error;

package/types/src/Slider/docs/examples/StepMarks.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Step marks
+ * @description stepMarks can be set to always or never. Defaults to show on focus.
+ */
 declare function StepMarks(): React.JSX.Element;
 export default StepMarks;

package/types/src/SlidingPanels/docs/examples/Basic.d.ts

@@ -1,4 +1,7 @@
 import React, { Component } from 'react';
+/**
+ * @name Basic
+ */
 declare class Basic extends Component<object, {
     activePanelId: string;
     transition: 'forward' | 'backward';

package/types/src/SlidingPanels/docs/examples/Dropdown.d.ts

@@ -1,4 +1,7 @@
 import React, { Component } from 'react';
+/**
+ * @name Dropdown with submenus
+ */
 declare class DropdownExample extends Component<object, {
     activePanelId: string;
     transition: 'forward' | 'backward';

package/types/src/SlidingPanels/docs/examples/Modal.d.ts

@@ -1,3 +1,6 @@
 import React from 'react';
+/**
+ * @name In a modal
+ */
 declare function ModalExample(): React.JSX.Element;
 export default ModalExample;

package/types/src/SplitButton/SplitButton.d.ts

@@ -31,9 +31,13 @@ interface SplitButtonPropsBase {
      * A callback for when the main button or toggle is clicked.
      */
     onClick?: React.MouseEventHandler<HTMLDivElement>;
+    /**
+     * A React ref which is set to the dropdown toggle when the component mounts and null when it unmounts.
+     */
+    toggleRef?: React.Ref<HTMLButtonElement | HTMLAnchorElement>;
 }
 type SplitButtonProps = ComponentProps<SplitButtonPropsBase, 'div'>;
-declare function SplitButton({ appearance, children, disabled, elementRef, inline, onClick, ...otherProps }: SplitButtonProps): React.JSX.Element;
+declare function SplitButton({ appearance, children, disabled, elementRef, inline, onClick, toggleRef, ...otherProps }: SplitButtonProps): React.JSX.Element;
 declare namespace SplitButton {
     var propTypes: {
         appearance: PropTypes.Requireable<string>;
@@ -42,6 +46,7 @@ declare namespace SplitButton {
         elementRef: PropTypes.Requireable<object>;
         onClick: PropTypes.Requireable<(...args: any[]) => any>;
         inline: PropTypes.Requireable<boolean>;
+        toggleRef: PropTypes.Requireable<object>;
     };
     var Item: typeof import("./Item").default;
 }

package/types/src/SplitButton/docs/examples/Basic.d.ts

@@ -1,2 +1,5 @@
 import React from 'react';
+/**
+ * @name Basic
+ */
 export default function Basic(): React.JSX.Element;

package/types/src/SplitButton/docs/examples/Block.d.ts

@@ -1,2 +1,6 @@
 import React from 'react';
+/**
+ * @name Block
+ * @description By default, Split Buttons exist in inline blocks. Set inline to false to make the Split Button the full width of the parent container.
+ */
 export default function Block(): React.JSX.Element;

package/types/src/SplitButton/docs/examples/ChangeLabel.d.ts

@@ -1,2 +1,6 @@
 import React from 'react';
+/**
+ * @name Change Label
+ * @description The isMain prop can be used to change which Item appears as the main button.
+ */
 export default function ChangeLabel(): React.JSX.Element;

package/types/src/SplitButton/docs/examples/Disabled.d.ts

@@ -1,2 +1,5 @@
 import React from 'react';
+/**
+ * @name Disabled
+ */
 export default function Disabled(): React.JSX.Element;

package/types/src/StaticContent/docs/examples/Basic.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Basic
+ * @description Static Content renders content within a Control Group.
+ */
 declare function Basic(): React.JSX.Element;
 export default Basic;

package/types/src/StaticContent/docs/examples/FieldValue.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Icons and other controls
+ * @description Static Content with other components in a Control Group.
+ */
 declare function FieldValue(): React.JSX.Element;
 export default FieldValue;

package/types/src/StepBar/docs/examples/Basic.d.ts

@@ -1,3 +1,6 @@
 import React from 'react';
+/**
+ * @name Basic
+ */
 declare function Basic(): React.JSX.Element;
 export default Basic;

package/types/src/StepBar/docs/examples/Error.d.ts

@@ -1,3 +1,6 @@
 import React from 'react';
+/**
+ * @name Error
+ */
 declare function StepBarError(): React.JSX.Element;
 export default StepBarError;

package/types/src/Switch/Switch.d.ts

@@ -12,6 +12,12 @@ type SwitchCheckboxWithSomeClickHandler = (event: React.MouseEvent<HTMLButtonEle
     value?: any;
 }) => void;
 interface SwitchPropsBase {
+    /**
+     * Determines if the component renders as a checkbox or toggle.
+     *
+     * @deprecatedValue 'checkbox'
+     * The 'checkbox' value is deprecated and will be removed in a future major version.
+     */
     appearance?: 'checkbox' | 'toggle';
     children?: React.ReactNode;
     disabled?: boolean;
@@ -82,7 +88,7 @@ type SwitchProps = ComponentProps<SwitchCheckboxWithSomePropsBase | SwitchNoSome
 /**
  * `Switch` is a basic form control with an on/off state.
  */
-declare function Switch({ appearance, children, disabled, elementRef, error, id, inline, labelledBy, onClick, required, selected, selectedLabel, someSelectedLabel, toggleRef, unselectedLabel, value, ...otherProps }: SwitchProps): React.JSX.Element;
+declare function Switch({ appearance, children, disabled, elementRef, error, id, inline, labelledBy, onClick, required, selected, selectedLabel, someSelectedLabel, role, tabIndex, toggleRef, unselectedLabel, value, ...otherProps }: SwitchProps): React.JSX.Element;
 declare namespace Switch {
     var propTypes: {
         appearance: PropTypes.Requireable<string>;

package/types/src/Switch/docs/examples/Basic.d.ts

@@ -1,10 +1,6 @@
-import React, { Component } from 'react';
-import { SwitchClickHandler } from '@splunk/react-ui/Switch';
-declare class Basic extends Component<object, {
-    values: number[];
-}> {
-    constructor(props: object);
-    handleClick: SwitchClickHandler;
-    render(): React.JSX.Element;
-}
+import React from 'react';
+/**
+ * @name Basic
+ */
+declare const Basic: () => React.JSX.Element;
 export default Basic;

package/types/src/Switch/docs/examples/Disabled.d.ts

@@ -1,10 +1,6 @@
-import React, { Component } from 'react';
-import { SwitchClickHandler } from '@splunk/react-ui/Switch';
-declare class Disabled extends Component<object, {
-    values: number[];
-}> {
-    constructor(props: object);
-    handleClick: SwitchClickHandler;
-    render(): React.JSX.Element;
-}
+import React from 'react';
+/**
+ * @name Disabled
+ */
+declare const Disabled: () => React.JSX.Element;
 export default Disabled;

package/types/src/TabBar/docs/examples/Basic.d.ts

@@ -1,3 +1,6 @@
 import React from 'react';
+/**
+ * @name Basic
+ */
 declare function Basic(): React.JSX.Element;
 export default Basic;

package/types/src/TabBar/docs/examples/Disabled.d.ts

@@ -1,3 +1,6 @@
 import React from 'react';
+/**
+ * @name Disabled
+ */
 declare function Disabled(): React.JSX.Element;
 export default Disabled;

package/types/src/TabBar/docs/examples/Icons.d.ts

@@ -1,3 +1,6 @@
 import React from 'react';
+/**
+ * @name Icons
+ */
 declare function IconsLeft(): React.JSX.Element;
 export default IconsLeft;

package/types/src/TabBar/docs/examples/Tooltips.d.ts

@@ -1,3 +1,6 @@
 import React from 'react';
+/**
+ * @name Tooltips
+ */
 declare function Tooltips(): React.JSX.Element;
 export default Tooltips;

package/types/src/TabBar/docs/examples/Vertical.d.ts

@@ -1,3 +1,6 @@
 import React from 'react';
+/**
+ * @name Vertical
+ */
 declare function Vertical(): React.JSX.Element;
 export default Vertical;

package/types/src/TabBar/docs/examples/VerticalIcons.d.ts

@@ -1,3 +1,6 @@
 import React from 'react';
+/**
+ * @name Vertical icons
+ */
 declare function VerticalIconsLeft(): React.JSX.Element;
 export default VerticalIconsLeft;

package/types/src/TabBar/docs/examples/WithCount.d.ts

@@ -1,3 +1,6 @@
 import React from 'react';
+/**
+ * @name With count
+ */
 declare function WithCount(): React.JSX.Element;
 export default WithCount;

package/types/src/TabBar/tabBarUtils.d.ts

@@ -0,0 +1,4 @@
+import { TabElementType } from './types';
+declare function getNextTabItem(tabItems: TabElementType[], currentIndex: number, nextIndex: number): TabElementType;
+declare function getPrevTabItem(tabItems: TabElementType[], currentIndex: number, prevIndex: number): TabElementType;
+export { getNextTabItem, getPrevTabItem };

package/types/src/TabBar/types.d.ts

@@ -0,0 +1,5 @@
+export interface TabElementType {
+    element: HTMLButtonElement | HTMLAnchorElement;
+    index: number;
+    tabId?: string;
+}

package/types/src/TabLayout/docs/examples/AutoActivate.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Auto activate
+ * @description In this example, switching to a tab with the keyboard automatically activates it.
+ */
 declare function AutoActivate(): React.JSX.Element;
 export default AutoActivate;

package/types/src/TabLayout/docs/examples/Controlled.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Controlled
+ * @description In this example, the open Panel is controlled by the parent component.
+ */
 declare function Controlled(): React.JSX.Element;
 export default Controlled;

package/types/src/TabLayout/docs/examples/Icons.d.ts

@@ -1,3 +1,6 @@
 import React from 'react';
+/**
+ * @name Icons
+ */
 declare function Icons(): React.JSX.Element;
 export default Icons;

package/types/src/TabLayout/docs/examples/Uncontrolled.d.ts

@@ -1,3 +1,6 @@
 import React from 'react';
+/**
+ * @name Uncontrolled
+ */
 declare function Uncontrolled(): React.JSX.Element;
 export default Uncontrolled;

package/types/src/TabLayout/docs/examples/Vertical.d.ts

@@ -1,3 +1,6 @@
 import React from 'react';
+/**
+ * @name Vertical
+ */
 declare function Vertical(): React.JSX.Element;
 export default Vertical;

package/types/src/TabLayout/docs/examples/VerticalIcons.d.ts

@@ -1,3 +1,6 @@
 import React from 'react';
+/**
+ * @name Vertical icons
+ */
 declare function VerticalIcons(): React.JSX.Element;
 export default VerticalIcons;

package/types/src/Table/ExpandButton.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { ComponentProps } from '@splunk/react-ui/utils/types';
+import { ComponentProps } from '../utils/types';
 interface ExpandButtonPropsBase {
     expanded?: boolean;
 }

package/types/src/Table/docs/examples/Basic.d.ts

@@ -1,3 +1,6 @@
 import React from 'react';
+/**
+ * @name Basic
+ */
 declare function Basic(): React.JSX.Element;
 export default Basic;

package/types/src/Table/docs/examples/Click.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Clickable cells
+ * @description Adding an onClick handler to a Cell adds a link style. The value of the data prop is passed to the handler.
+ */
 declare function Click(): React.JSX.Element;
 export default Click;

package/types/src/Table/docs/examples/ClickRows.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Clickable rows
+ * @description Adding an onClick handler to a Row adds hover and active styling. The primary cell is additionally styled with an underline on row hover. The value of the data prop is passed to the handler.
+ */
 declare function ClickRows(): React.JSX.Element;
 export default ClickRows;

package/types/src/Table/docs/examples/Complex.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Complex
+ * @description All capabilities can be used together except where noted.
+ */
 declare function Complex(): React.JSX.Element;
 export default Complex;

package/types/src/Table/docs/examples/DockedHeaderScrollbar.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Docked header and scroll bar
+ * @description When scrolling the page, the header can dock against the top of the window, and the scroll bar can dock against the bottom of the window. This allows the user to read the column headings and scroll even when the top and bottom of the Table is off screen.
+ */
 declare function DockedHeaderScrollbar(): React.JSX.Element;
 export default DockedHeaderScrollbar;

package/types/src/Table/docs/examples/FilterColumnValues.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Filter column values
+ * @description HeadDropdownCell can also be used to filter column values.
+ */
 declare function FilterableTable(): React.JSX.Element;
 export default FilterableTable;

package/types/src/Table/docs/examples/FixedHeader.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Fixed header
+ * @description Fix the header relative to the table.
+ */
 declare function FixedHeader(): React.JSX.Element;
 export default FixedHeader;

package/types/src/Table/docs/examples/HeadDropdownCell.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Dropdowns in header
+ * @description A column heading can act as a Dropdown. HeadDropdownCell does not support the sort interface from HeadCell. Sort features can be recreated in the Dropdown. This supports the same interface as [Dropdown](./Dropdown). See that component for more examples.
+ */
 declare function HeadDropdownCell(): React.JSX.Element;
 export default HeadDropdownCell;

package/types/src/Table/docs/examples/ReorderColumns.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Reorder columns
+ * @description Drag a column heading to reorder. To pick up a draggable column using the keyboard, press Space or Enter when focused on the column heading drag handle. Use the Left and Right arrow keys to update the position of the column heading. Press Space or Enter again to drop the column heading in its new position, or press Escape to cancel.
+ */
 declare function ReorderColumns(): React.JSX.Element;
 export default ReorderColumns;

package/types/src/Table/docs/examples/ReorderRows.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Reorder rows
+ * @description Drag a Row to reorder. To pick up a draggable Row using the keyboard, press Space or Enter when focused on the Row drag handle. Use the Up and Down arrow keys to update the position of the row. Press Space or Enter again to drop the Row in its new position, or press Escape to cancel. Reordering Rows is not compatible with sorting columns and doesn't take effect if any sort attributes or props are added.
+ */
 declare function ReorderRows(): React.JSX.Element;
 export default ReorderRows;

package/types/src/Table/docs/examples/Resizable.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Resizable columns
+ * @description The area between the column headings can be used to resize the columns one of the following ways: click and drag, press arrow keys when focused, or double-click to auto-size.
+ */
 declare function Resizable(): React.JSX.Element;
 export default Resizable;

package/types/src/Table/docs/examples/ResizableFill.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Fill layout with resizable columns
+ * @description The resizableFillLayout sets the Table to fill its container's space and allows column's width property to be auto. Table will enforce a minimum cell width when auto is used. To use a custom minimum cell width, it must be controlled using the onRequestResizeColumn callback and larger than the base minimum width of 60px. However, onRequestResizeColumn is only called for the current column being resized. So the custom minimum cell widths will not be respected for the other columns while the current column is being resized.
+ */
 declare function ResizableFill(): React.JSX.Element;
 export default ResizableFill;

package/types/src/Table/docs/examples/RowActions.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Row actions
+ * @description Adds Table-level and Row-level actions.
+ */
 declare function RowAction(): React.JSX.Element;
 export default RowAction;

package/types/src/Table/docs/examples/Selectable.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Selectable rows
+ * @description Rows can be selectable. The selection state of the Table overall and each Row are managed separately.
+ */
 declare function Selectable(): React.JSX.Element;
 export default Selectable;

package/types/src/Table/docs/examples/SortableColumns.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Sortable columns
+ * @description If a column is provided a sortKey, it is rendered as sortable. When a sortable HeadCell is clicked, it triggers an onSort callback. It is the consumer's responsibility to implement the sorting logic.
+ */
 declare function SortableColumns(): React.JSX.Element;
 export default SortableColumns;

package/types/src/Table/docs/examples/StripeRows.d.ts

@@ -1,3 +1,6 @@
 import React from 'react';
+/**
+ * @name Stripe rows
+ */
 declare function StripeRows(): React.JSX.Element;
 export default StripeRows;

package/types/src/Text/docs/examples/Basic.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Controlled
+ * @description Text requires a value prop and an onChange callback to update the value prop for most use cases.
+ */
 declare const Basic: () => React.JSX.Element;
 export default Basic;

package/types/src/Text/docs/examples/CustomizedIcon.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Customized icons
+ * @description The Text control also supports customized icons.
+ */
 declare const CustomizedIcon: () => React.JSX.Element;
 export default CustomizedIcon;

package/types/src/Text/docs/examples/Dimmed.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Dimmed
+ * @description If you absolutely need to disable a Text use a dimmed Text. When the disabled prop is set to "dimmed", the Text does not respond to events but can still receive focus to ensure users can navigate to the Text when using assistive technologies. This also sets aria-disabled to true.
+ */
 declare const Dimmed: () => React.JSX.Element;
 export default Dimmed;

package/types/src/Text/docs/examples/Disabled.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Disabled
+ * @description Disabled cannot accept an input or become focused.
+ */
 declare const Disabled: () => React.JSX.Element;
 export default Disabled;

package/types/src/Text/docs/examples/Error.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Error
+ * @description Setting error will highlight the field.
+ */
 declare const Error: () => React.JSX.Element;
 export default Error;

package/types/src/Text/docs/examples/Inline.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Inline
+ * @description Passing inline will create an inline element and the input will be its default size.
+ */
 declare const Inline: () => React.JSX.Element;
 export default Inline;

package/types/src/Text/docs/examples/Password.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Password
+ * @description The Text control also supports a password input type and visibility toggle independently of each other.
+ */
 declare const Password: () => React.JSX.Element;
 export default Password;

package/types/src/Text/docs/examples/Uncontrolled.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Uncontrolled
+ * @description Alternatively, Text can be uncontrolled and optionally provided a defaultValue. The onChange callback still fires. The value prop cannot be set or updated externally.
+ */
 declare function Uncontrolled(): React.JSX.Element;
 export default Uncontrolled;

package/types/src/TextArea/docs/examples/Basic.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Controlled
+ * @description Text Area requires a value prop and an onChange callback to update the value prop for most use cases.
+ */
 declare const Basic: () => React.JSX.Element;
 export default Basic;

package/types/src/TextArea/docs/examples/Disabled.d.ts

@@ -1,3 +1,6 @@
 import React from 'react';
+/**
+ * @name Disabled
+ */
 declare const Disabled: () => React.JSX.Element;
 export default Disabled;

package/types/src/TextArea/docs/examples/Error.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Error
+ * @description Setting error will highlight the field.
+ */
 declare const Error: () => React.JSX.Element;
 export default Error;