@splunk/react-ui 5.1.0 → 5.3.0

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

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

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

@@ -0,0 +1,7 @@
+import React from 'react';
+/**
+ * @name Uncontrolled
+ * @description Checkbox can also used as an uncontrolled component, using defaultChecked to set the initial checked state.
+ */
+declare const Uncontrolled: () => React.JSX.Element;
+export default Uncontrolled;

package/types/src/Checkbox/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './Checkbox';
+export * from './Checkbox';

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

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

package/types/src/Chip/docs/examples/CustomColors.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Custom colors
+ * @description When using custom colors, ensure you are following the WCAG guideline of a contrast ratio >= 4.5:1 between text and background.
+ */
 declare function CustomColors(): React.JSX.Element;
 export default CustomColors;

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

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

package/types/src/Chip/docs/examples/Removable.d.ts

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

package/types/src/Chip/docs/examples/RemovableWithNonStringChildren.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Removable with non-string children
+ * @description The descriptive label for a Chip can be overridden by applying an aria-label attribute. This is necessary if passing children that are not of type string.
+ */
 declare const RemovableWithNonStringChildren: () => React.JSX.Element;
 export default RemovableWithNonStringChildren;

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

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Disabled
+ * @description Prevents user from activating the component and adds disabled styling. If set to dimmed, the component is able to receive focus. If set to disabled, the component is unable to receive focus (as a result of setting the html disabled attribute). The default behavior when disabled={true} is "dimmed".
+ */
 declare function Disabled(): React.JSX.Element;
 export default Disabled;

package/types/src/Code/Code.d.ts

@@ -3,6 +3,8 @@ import PropTypes from 'prop-types';
 import { ComponentProps } from '../utils/types';
 type CodeSupportedLanguages = 'bash' | 'clike' | 'css' | 'html' | 'json' | 'javascript' | 'js' | 'jsx' | 'typescript' | 'ts' | 'tsx' | 'markup' | 'mathml' | 'plain' | 'plaintext' | 'splunk-spl' | 'sql' | 'svg' | 'text' | 'txt' | 'xml' | 'yaml' | 'yml';
 interface CodePropsBase {
+    /** Change the style of the Code container. */
+    containerAppearance?: 'none' | 'section';
     /**
      * A React ref which is set to the DOM element when the component mounts and null when it unmounts.
      */
@@ -43,9 +45,10 @@ interface CodePropsBase {
     value?: string;
 }
 type CodeProps = ComponentProps<CodePropsBase, 'pre'>;
-declare function Code({ elementRef, indentChars, language, languageFallback, lineHighlights, lineNumberStart, showIndentGuide, showLineNumbers, value, ...otherProps }: CodeProps): React.JSX.Element;
+declare function Code({ containerAppearance, elementRef, indentChars, language, languageFallback, lineHighlights, lineNumberStart, showIndentGuide, showLineNumbers, value, ...otherProps }: CodeProps): React.JSX.Element;
 declare namespace Code {
     var propTypes: {
+        containerAppearance: PropTypes.Requireable<string>;
         elementRef: PropTypes.Requireable<object>;
         indentChars: PropTypes.Requireable<number>;
         language: PropTypes.Requireable<string>;

package/types/src/Code/LineHighlights.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 interface LineHighlightProps {
     highlight: string;
     width: number;
+    containerAppearance: 'none' | 'section';
 }
 type Ranges = [number, number][];
 declare const parseHighlightLines: (highlight: string) => Ranges;

package/types/src/Code/LineNumbers.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 interface LineNumbersProps {
+    containerAppearance: 'none' | 'section';
     value?: string;
 }
-declare function LineNumbers({ value }: LineNumbersProps): React.JSX.Element;
+declare function LineNumbers({ containerAppearance, value }: LineNumbersProps): React.JSX.Element;
 export default LineNumbers;

package/types/src/Code/docs/examples/CustomizeContainer.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+/**
+ * @name Customize container
+ * @description Use containerAppearance="section" when you need a defined container for Code.
+ */
+declare function CustomizeContainer(): React.JSX.Element;
+export default CustomizeContainer;

package/types/src/Code/docs/examples/Default.d.ts

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

package/types/src/Code/docs/examples/HideIndent.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Without indent guideline
+ * @description Use the showIndentGuide prop to remove the indent guideline.
+ */
 declare function HideIndent(): React.JSX.Element;
 export default HideIndent;

package/types/src/Code/docs/examples/Language.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Non-Javascript syntax highlighting
+ * @description Use the language prop to apply appropriate syntax highlighting.
+ */
 declare function Language(): React.JSX.Element;
 export default Language;

package/types/src/Code/docs/examples/LineHighlights.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name With line highlighting
+ * @description Use the lineHighlights prop to pass the lines that should be highlighted.
+ */
 declare function LineHighlights(): React.JSX.Element;
 export default LineHighlights;

package/types/src/Code/docs/examples/LineNumbers.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name With line numbers
+ * @description Use the showLineNumbers prop to show line numbers.
+ */
 declare function LineNumbers(): React.JSX.Element;
 export default LineNumbers;

package/types/src/Code/docs/examples/LineNumbersCustomStart.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name With line numbers and custom start
+ * @description Use the lineNumberStart prop to pass a custom number to start from.
+ */
 declare function LineNumbersCustomStart(): React.JSX.Element;
 export default LineNumbersCustomStart;

package/types/src/CollapsiblePanel/docs/examples/Actions.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Actions
+ * @description Adding clickable items in the header.
+ */
 declare function Actions(): React.JSX.Element;
 export default Actions;

package/types/src/CollapsiblePanel/docs/examples/BasicControlled.d.ts

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

package/types/src/CollapsiblePanel/docs/examples/BasicUncontrolled.d.ts

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

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

@@ -1,3 +1,10 @@
 import React from 'react';
+/**
+ * @name Disabled
+ * @description If a CollapsiblePanel is passed disabled the default behavior is to render as "dimmed".
+ * This ensures the panel is still discoverable and can receive focus, but cannot be activated by the user.
+ * Actions that are passed are not disabled within a dimmed panel.
+ * If necessary, a CollapsiblePanel can be completely disabled by setting disabled="disabled".
+ */
 declare function Dimmed(): React.JSX.Element;
 export default Dimmed;

package/types/src/CollapsiblePanel/docs/examples/MultiControlled.d.ts

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

package/types/src/CollapsiblePanel/docs/examples/MultiUncontrolled.d.ts

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

package/types/src/CollapsiblePanel/docs/examples/SingleOpenPanelGroupControlled.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name SingleOpenPanelGroup controlled
+ * @description Expands and collapses only one panel at a time. Note: the open prop on individual Panels is ignored when SingleOpenPanelGroup is used.
+ */
 declare function SingleOpenPanelGroupControlled(): React.JSX.Element;
 export default SingleOpenPanelGroupControlled;

package/types/src/CollapsiblePanel/docs/examples/SingleOpenPanelGroupInset.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name SingleOpenPanelGroup inset
+ * @description Inset adds padding to the Collapsible Panel.
+ */
 declare function SingleOpenPanelGroupInset(): React.JSX.Element;
 export default SingleOpenPanelGroupInset;

package/types/src/CollapsiblePanel/docs/examples/SingleOpenPanelGroupUncontrolled.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name SingleOpenPanelGroup uncontrolled
+ * @description Expands and collapses only one panel at a time. Takes a defaultOpenPanelId prop.
+ */
 declare function SingleOpenPanelGroupUncontrolled(): React.JSX.Element;
 export default SingleOpenPanelGroupUncontrolled;

package/types/src/CollapsiblePanel/docs/examples/Subtle.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Subtle
+ * @description Use appearance="subtle" when you need a Collapsible Panel that has less visual weight.
+ */
 declare function Subtle(): React.JSX.Element;
 export default Subtle;

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

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

package/types/src/Color/docs/examples/CustomizedPalette.d.ts

@@ -1,2 +1,6 @@
 import React from 'react';
+/**
+ * @name Customized palette
+ * @description Color has defaultPalette exported which can be modified.
+ */
 export default function CustomizedPalette(): React.JSX.Element;

package/types/src/Color/docs/examples/HideInput.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Hide input
+ * @description Color without hex value text input. The input will still appear inside the dropdown when opened.
+ */
 declare function HideInput(): React.JSX.Element;
 export default HideInput;

package/types/src/Color/docs/examples/Null.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name N/A
+ * @description Including N/A in the palette is supported. Put this option at the start or end of the palette. Selecting N/A will return null.
+ */
 declare function Null(): React.JSX.Element;
 export default Null;

package/types/src/Color/docs/examples/ThemeVariables.d.ts

@@ -1,2 +1,6 @@
 import React from 'react';
+/**
+ * @name Theme variables
+ * @description Variables from @splunk/themes can be used to set Color values, such as defaultValue.
+ */
 export default function ThemeVariables(): React.JSX.Element;

package/types/src/Color/docs/examples/Transparent.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Transparent
+ * @description Including transparent in the palette is supported. Put this option at the start or end of the palette.
+ */
 declare function Transparent(): React.JSX.Element;
 export default Transparent;

package/types/src/Color/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/ColumnLayout/docs/examples/AlignItems.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Align items
+ * @description By default, the Columns grow vertically to fill the available space. The values for this property are the same as flexbox's align-items property.
+ */
 declare function AlignItems(): React.JSX.Element;
 export default AlignItems;

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

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Columns and spans
+ * @description The span property can be set to vary the width of the Columns. The spans must add up to 12. The Columns are colored for this example.
+ */
 declare function Basic(): React.JSX.Element;
 export default Basic;

package/types/src/ColumnLayout/docs/examples/Dividers.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Dividers
+ * @description Column Layout can show different types of dividers.
+ */
 declare function Dividers(): React.JSX.Element;
 export default Dividers;

package/types/src/ColumnLayout/docs/examples/Gutters.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Gutters
+ * @description Column Layout spaces Rows and Columns with gutters, but these can be removed or changed.
+ */
 declare function Gutters(): React.JSX.Element;
 export default Gutters;

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

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Controlled value
+ * @description Typically, the value is controlled.
+ */
 declare function Controlled(): React.JSX.Element;
 export default Controlled;

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

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Fetching
+ * @description You can populate the Options from a server. Here, that behavior is simulated. This simplified example only matches the start of the label. The matchRange prop can 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/ComboBox/docs/examples/Headings.d.ts

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

package/types/src/ComboBox/docs/examples/Label.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Label
+ * @description label can be used in addition to value when needed, similar to Select. label will be used for matching and must be a string.
+ */
 declare function Label(): React.JSX.Element;
 export default Label;

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

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Uncontrolled
+ * @description This is a basic example in which data management and filtering are handled internally.
+ */
 declare function Uncontrolled(): React.JSX.Element;
 export default Uncontrolled;

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

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Default appearance
+ * @description By default, the label appears above and the control fills the available width.
+ */
 declare function Basic(): React.JSX.Element;
 export default Basic;

package/types/src/ControlGroup/docs/examples/CustomizedLabelTarget.d.ts

@@ -1,10 +1,14 @@
 import React, { Component } from 'react';
-import { SwitchClickHandler } from '@splunk/react-ui/Switch';
+import { CheckboxChangeHandler } from '@splunk/react-ui/Checkbox';
+/**
+ * @name Customized label target
+ * @description Change the focus/activation target that should be linked to the label.
+ */
 declare class CustomizedLabelTarget extends Component<object, {
-    values: number[];
+    values: string[];
 }> {
     constructor(props: object);
-    handleClick: SwitchClickHandler;
+    handleClick: CheckboxChangeHandler;
     render(): React.JSX.Element;
 }
 export default CustomizedLabelTarget;

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

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Error
+ * @description Most form controls have their own error property. It is recommended to supply an error message so the user understands what the problem is and how to fix it.
+ */
 declare function Error(): React.JSX.Element;
 export default Error;

package/types/src/ControlGroup/docs/examples/HelpWithErrorText.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Help and error text
+ * @description Help and error text can appear at the same time.
+ */
 declare function HelpWithErrorText(): React.JSX.Element;
 export default HelpWithErrorText;

package/types/src/ControlGroup/docs/examples/HelpWithLinks.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Help text with a link.
+ * @description Help text may contain links or other content.
+ */
 declare function HelpWithLinks(): React.JSX.Element;
 export default HelpWithLinks;

package/types/src/ControlGroup/docs/examples/LabelLeft.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Labels to the left
+ * @description Alternately, labels can be placed to the left of the control.
+ */
 declare function LabelLeft(): React.JSX.Element;
 export default LabelLeft;

package/types/src/ControlGroup/docs/examples/LayoutFill.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Fill layout
+ * @description Fill layout will put space between the controls.
+ */
 declare function LayoutFill(): React.JSX.Element;
 export default LayoutFill;

package/types/src/ControlGroup/docs/examples/LayoutFillJoin.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Fill and join layout
+ * @description The controls will fill the space and will be joined together.
+ */
 declare function LayoutFillJoin(): React.JSX.Element;
 export default LayoutFillJoin;

package/types/src/ControlGroup/docs/examples/LayoutNone.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name No layout
+ * @description Removing the layout will allow controls to control their own size and wrap onto multiple lines. This should usually be used for Date, Number and Switch controls. Setting the control to inline, adjusting spacing, and/or setting a width may be necessary.
+ */
 declare function LayoutNone(): React.JSX.Element;
 export default LayoutNone;

package/types/src/ControlGroup/docs/examples/Required.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Required
+ * @description The required property will set the required attribute on each child component and add an asterisk before the label.
+ */
 declare function Required(): React.JSX.Element;
 export default Required;

package/types/src/Date/Date.d.ts

@@ -17,6 +17,8 @@ type DateFocusHandler = (event: React.FocusEvent<HTMLInputElement>, data: {
     value: string;
 }) => void;
 interface DatePropsBase {
+    /** Append removes rounded borders and the border from the right side. */
+    append?: boolean;
     /**
      * Include an "X" button to clear the value.
      */
@@ -71,6 +73,8 @@ interface DatePropsBase {
     onClick?: React.MouseEventHandler<HTMLInputElement>;
     onFocus?: DateFocusHandler;
     onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;
+    /** Prepend removes rounded borders from the left side. */
+    prepend?: boolean;
     /**
      * Setting this value makes the property controlled. An onChange callback is required.
      *
@@ -93,9 +97,10 @@ interface DatePropsBaseUncontrolled extends DatePropsBase {
 }
 type DateProps = ComponentProps<DatePropsBaseControlled | DatePropsBaseUncontrolled, 'div'>;
 declare const validateValue: (value: string | undefined) => void;
-declare function Date({ canClear, defaultValue, disabled, elementRef, highlightToday, inline, inputOnly, locale, name, onChange, onClick, onFocus, onKeyDown, value: valueProp, ...otherProps }: DateProps): React.JSX.Element;
+declare function Date({ append, canClear, defaultValue, disabled, elementRef, highlightToday, inline, inputOnly, locale, name, onChange, onClick, onFocus, onKeyDown, prepend, value: valueProp, ...otherProps }: DateProps): React.JSX.Element;
 declare namespace Date {
     var propTypes: {
+        append: PropTypes.Requireable<boolean>;
         canClear: PropTypes.Requireable<boolean>;
         defaultValue: PropTypes.Requireable<string>;
         describedBy: PropTypes.Requireable<string>;
@@ -114,6 +119,7 @@ declare namespace Date {
         onClick: PropTypes.Requireable<(...args: any[]) => any>;
         onFocus: PropTypes.Requireable<(...args: any[]) => any>;
         onKeyDown: PropTypes.Requireable<(...args: any[]) => any>;
+        prepend: PropTypes.Requireable<boolean>;
         value: PropTypes.Requireable<string>;
     };
     var momentFormat: string;

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

@@ -1,5 +1,8 @@
 import React, { Component } from 'react';
 import { DateChangeHandler } from '@splunk/react-ui/Date';
+/**
+ * @name Controlled
+ */
 declare class Controlled extends Component<object, {
     value: string;
 }> {

package/types/src/Date/docs/examples/CustomDate.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Locale
+ * @description Setting locale is recommended. Otherwise, en_US will always be used.
+ */
 declare function CustomDate(): React.JSX.Element;
 export default CustomDate;

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

@@ -1,5 +1,9 @@
 import React, { Component } from 'react';
 import { DateChangeHandler } from '@splunk/react-ui/Date';
+/**
+ * @name Highlight today
+ * @description Highlight today's day.
+ */
 declare class HighlightToday extends Component<object, {
     value: string;
 }> {

package/types/src/Date/docs/examples/WithoutCalendar.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Without calendar
+ * @description Example with input only Date.
+ */
 declare function WithoutCalendar(): React.JSX.Element;
 export default WithoutCalendar;