@splunk/react-ui 5.0.0 → 5.2.0

package/types/src/RadioBar/RadioBarContext.d.ts

@@ -1,9 +1,11 @@
 import { OptionClickHandler, OnKeyDownHandler } from './Option';
 export interface RadioBarContext {
-    onClick?: OptionClickHandler;
+    disabled?: boolean;
     error?: boolean;
-    onKeyDown?: OnKeyDownHandler;
     firstValue?: any;
+    name?: string;
+    onClick?: OptionClickHandler;
+    onKeyDown?: OnKeyDownHandler;
     selectedValue?: any;
 }
 export declare const RadioBarContext: import("react").Context<RadioBarContext>;

package/types/src/RadioBar/docs/examples/AdornmentAriaExamples.d.ts

@@ -1,3 +1,8 @@
 import React from 'react';
+/**
+ * @name Adornments using aria-* attributes
+ * @description startAdornment and endAdornment will be part of the Options' label by default.
+ * Change the semantics of adornments where they are not labels using the `aria-*` attributes: aria-labelledby, aria-describedby, aria-hidden.
+ */
 declare function AdornmentAriaExamples(): React.JSX.Element;
 export default AdornmentAriaExamples;

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

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

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

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Disabled
+ * @description Either the entire RadioBar or individual Options can be disabled using the disabled prop. When set on the RadioBar, this overrides any individual Option disabled states.
+ */
 declare function Disabled(): React.JSX.Element;
 export default Disabled;

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

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

package/types/src/RadioBar/docs/examples/MenuBar.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Menu bar
+ * @description Radio Bar can be used outside of a form context to behave like a menu bar by setting role="menubar"
+ */
 declare function MenuBar(): React.JSX.Element;
 export default MenuBar;

package/types/src/RadioBar/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/RadioList/RadioList.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { ComponentProps } from '../utils/types';
 import Option from './Option';
+import { ComponentProps } from '../utils/types';
 type RadioListValueTypes = number | string | boolean | Record<string, unknown> | symbol;
 /** @public */
 type RadioListChangeHandler = (event: React.ChangeEvent<HTMLInputElement>, data: {
@@ -87,6 +87,7 @@ declare namespace RadioList {
         value: PropTypes.Requireable<any>;
     };
     var Option: typeof import("./Option").default;
+    var componentType: string;
 }
 export default RadioList;
 export { Option, RadioListValueTypes, RadioListChangeHandler };

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

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

package/types/src/RadioList/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/RadioList/docs/examples/Error.d.ts

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

package/types/src/RadioList/docs/examples/Row.d.ts

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

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

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Uncontrolled
+ * @description Alternately, Radio List 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/Resize/docs/examples/Appearance.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Appearance
+ * @description Resize handles can be placed on any edge or corner. Note that margin cannot be overridden when using the "border" appearance.
+ */
 declare function Appearance(): React.JSX.Element;
 export default Appearance;

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

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Basic
+ * @description The onRequestResize handler must handle any desired constraints on size.
+ */
 declare function Basic(): React.JSX.Element;
 export default Basic;

package/types/src/Resize/docs/examples/Percentage.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Percentage
+ * @description Sizes don't need to be defined in pixels or with height and width styles. Here, flex-basis is calculated as a percentage.
+ */
 declare function Percentage(): React.JSX.Element;
 export default Percentage;

package/types/src/Resize/docs/examples/SizingInner.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Sizing inner
+ * @description In this example, styles are placed on the inner content.
+ */
 declare function SizingInner(): React.JSX.Element;
 export default SizingInner;

package/types/src/Resize/docs/examples/SizingOuter.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Sizing outer
+ * @description Resize does not dictate how it is sized. In this example, styles are placed on an outer container.
+ */
 declare function SizingOuter(): React.JSX.Element;
 export default SizingOuter;

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

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Basic
+ * @description Click 'Show Code' to view the hidden Screen Reader Content.
+ */
 declare function Basic(): React.JSX.Element;
 export default Basic;

package/types/src/ScreenReaderContent/docs/examples/SkipLink.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+/**
+ * @name Skip-link
+ * @description For initially hidden interactive content, such as skip-links, use the skipLink mixin.
+ */
+declare function SkipLink(): React.JSX.Element;
+export default SkipLink;

package/types/src/Scroll/Inner.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { SpringValue } from '@react-spring/web';
+import PropTypes from 'prop-types';
 import { ComponentProps } from '../utils/types';
 interface InnerPropsBase {
     children?: React.ReactNode;

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

@@ -1,4 +1,8 @@
 import React, { Component } from 'react';
+/**
+ * @name Controlled
+ * @description The controlled method must be used to set the Scroll position.
+ */
 declare class Basic extends Component<object, {
     top?: number;
 }> {

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

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Uncontrolled with scroll propagation
+ * @description The uncontrolled approach is useful for stopping propagation of the Scroll. Here, scrolling with the mouse wheel over the container does not scroll the window.
+ */
 declare function Uncontrolled(): React.JSX.Element;
 export default Uncontrolled;

package/types/src/ScrollContainerContext/docs/examples/Provider.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Provider
+ * @description A Dropdown inside a custom Scroll Container. The Dropdown (when open) scrolls with the custom container, not the window.
+ */
 declare function Provider(): React.JSX.Element;
 export default Provider;

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

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Controlled
+ * @description The Search component can be used as both uncontrolled default variant and as a controlled variant. In this example we show the controlled variant.
+ */
 declare const Controlled: () => React.JSX.Element;
 export default Controlled;

package/types/src/Search/docs/examples/Loading.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Asynchronously loaded options
+ * @description The Search component's quick Options can be loaded asynchronously. In this example we show the input paired with asycnchrously loaded and filtered Options.
+ */
 declare function Loading(): React.JSX.Element;
 export default Loading;

package/types/src/Search/docs/examples/Options.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Quick options
+ * @description The Search component can be populated with quick Options. In this example the user can select a quick Option or search via the input, but the Options are not filtered.
+ */
 declare const Options: () => React.JSX.Element;
 export default Options;

package/types/src/Search/docs/examples/OptionsLinks.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Options as links
+ * @description The option on a list of results of search can be a link redirecting to a product page
+ */
 declare const OptionsLinks: () => React.JSX.Element;
 export default OptionsLinks;

package/types/src/Select/Option.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import type { OptionClickHandler } from './OptionBase';
 import { ComponentProps } from '../utils/types';
+import type { OptionClickHandler } from './OptionBase';
 interface OptionPropsBase {
     /** @private */
     active?: boolean;

package/types/src/Select/Select.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Divider as BaseDivider, Heading as BaseHeading, SelectBaseProps } from './SelectBase';
 import Option from './Option';
+import { Divider as BaseDivider, Heading as BaseHeading, SelectBaseProps } from './SelectBase';
 import { ComponentProps } from '../utils/types';
 /** @public */
 type SelectChangeHandler = (event: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLInputElement>, data: {

package/types/src/Select/SelectAllOption.d.ts

@@ -1,17 +1,12 @@
 import React from 'react';
+import OptionBase from './OptionBase';
 import { ComponentProps } from '../utils/types';
-interface SelectAllOptionPropsBase {
-    active?: boolean;
-    changedToggle?: boolean;
-    elementRef?: React.Ref<HTMLAnchorElement | HTMLButtonElement>;
-    id?: string;
-    onClick: (e: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLInputElement>) => void;
-    selectAllLabel: string;
-    selected?: boolean | 'some';
+interface SelectAllOptionPropsBase extends Omit<React.ComponentProps<typeof OptionBase>, 'value'> {
     totalCount?: number;
+    value?: string;
 }
-type SelectAllOptionProps = ComponentProps<SelectAllOptionPropsBase, 'div'>;
-declare function SelectAllOption({ active, elementRef, id, onClick, selectAllLabel, totalCount, changedToggle, selected, }: SelectAllOptionProps): React.JSX.Element;
+type SelectAllOptionProps = ComponentProps<SelectAllOptionPropsBase, 'button'>;
+declare function SelectAllOption({ active, elementRef, id, label, onClick, selected, totalCount, value, ...otherProps }: SelectAllOptionProps): React.JSX.Element;
 declare namespace SelectAllOption {
     var propTypes: React.WeakValidationMap<SelectAllOptionPropsBase>;
 }

package/types/src/Select/SelectBase.d.ts

@@ -164,7 +164,7 @@ interface SelectBasePropsBase {
     /**
      * Determines how to display Select all/Clear all.
      */
-    selectAllAppearance?: 'buttongroup' | 'checkbox';
+    selectAllAppearance?: 'buttongroup' | 'checkbox' | 'none';
     showSelectedValuesFirst?: 'nextOpen' | 'immediately' | 'never';
     /**
      * Places this string after the selected label.

package/types/src/Select/docs/examples/Appearance.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Appearance
+ * @description The appearance prop changes the toggle to any button appearance, or a link for use in sentences.
+ */
 declare function Appearance(): React.JSX.Element;
 export default Appearance;

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

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

package/types/src/Select/docs/examples/Children.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Children
+ * @description children replace label when provided. label is still used for matching to the filter.
+ */
 declare function Children(): React.JSX.Element;
 export default Children;

package/types/src/Select/docs/examples/Descriptions.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Descriptions
+ * @description Descriptions can be placed below or to the right of the label.
+ */
 declare function Descriptions(): React.JSX.Element;
 export default Descriptions;

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

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

package/types/src/Select/docs/examples/Fetching.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Fetching
+ * @description It's possible to populate the Options from a server. Here, that behavior is simulated. This simplified example only matches the start of the label. The matchRange prop may be set manually to reflect the matching algorithm used to filter the results. Otherwise matching text is not shown.
+ */
 declare function Fetching(): React.JSX.Element;
 export default Fetching;

package/types/src/Select/docs/examples/Filter.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Filter select items
+ * @description An additional filter box can be enabled.
+ */
 declare function Filter(): React.JSX.Element;
 export default Filter;

package/types/src/Select/docs/examples/Headings.d.ts

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

package/types/src/Select/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/Select/docs/examples/LoadMoreOnScrollBottom.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Load more on scroll bottom
+ * @description This example is similar to the example for fetching. You can append more Options from a server when the list is scrolled to the bottom. Here, that behavior is simulated. The onScrollBottom prop is a function that should fetches more results and appends them to the current Options. Once all items are loaded, the onScrollBottom prop should be set to null.
+ */
 declare function LoadMoreOnScrollBottom(): React.JSX.Element;
 export default LoadMoreOnScrollBottom;

package/types/src/Select/docs/examples/Prefix.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Prefixed label
+ * @description When used outside of a Control Group, it is useful to inline the label inside the button.
+ */
 declare function Prefix(): React.JSX.Element;
 export default Prefix;

package/types/src/Select/docs/examples/Truncate.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Truncate
+ * @description Labels that are too long can be restrained to one line and truncated.
+ */
 declare function Truncate(): React.JSX.Element;
 export default Truncate;

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

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Uncontrolled
+ * @description Alternatively, Select 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/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 { SliderChangeHandler } from '@splunk/react-ui/Slider';
 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;