@patternfly/react-core 4.243.1 → 4.244.1

package/src/components/SearchInput/SearchInput.tsx

@@ -13,94 +13,108 @@ import { TextInputGroup, TextInputGroupMain, TextInputGroupUtilities } from '../
 import { InputGroup } from '../InputGroup';
 import { Popper } from '../../helpers';
 
+/** Properties for adding search attributes to an advanced search input. These properties must
+ * be passed in as an object within an array to the search input component's attribute properrty.
+ */
+
 export interface SearchAttribute {
   /** The search attribute's value to be provided in the search input's query string.
-   * It should have no spaces and be unique for every attribute */
+   * It should have no spaces and be unique for every attribute.
+   */
   attr: string;
-  /** The search attribute's display name. It is used to label the field in the advanced search menu */
+  /** The search attribute's display name. It is used to label the field in the advanced
+   * search menu.
+   */
   display: React.ReactNode;
 }
 
+/** Properties for creating an expandable search input. These properties should be passed into
+ * the search input component's expandableInput property.
+ */
+
 export interface ExpandableInput {
-  /** Flag to indicate if the search input is expanded */
+  /** Flag to indicate if the search input is expanded. */
   isExpanded: boolean;
-  /** Callback function to toggle the expandable search input */
+  /** Callback function to toggle the expandable search input. */
   onToggleExpand: (isExpanded: boolean, event: React.SyntheticEvent<HTMLButtonElement>) => void;
-  /** An accessible label for the expandable search input toggle */
+  /** An accessible label for the expandable search input toggle. */
   toggleAriaLabel: string;
 }
 
+/** The main search input component. */
+
 export interface SearchInputProps extends Omit<React.HTMLProps<HTMLDivElement>, 'onChange' | 'results' | 'ref'> {
-  /** Additional classes added to the banner */
-  className?: string;
-  /** Value of the search input */
-  value?: string;
-  /** Flag indicating if search input is disabled */
-  isDisabled?: boolean;
-  /** An accessible label for the search input */
+  /** Delimiter in the query string for pairing attributes with search values.
+   * Required whenever attributes are passed as props.
+   */
+  advancedSearchDelimiter?: string;
+  /** The container to append the menu to.
+   * If your menu is being cut off you can append it to an element higher up the DOM tree.
+   * Some examples:
+   * appendTo={() => document.body}
+   * appendTo={document.getElementById('target')}
+   */
+  appendTo?: HTMLElement | (() => HTMLElement) | 'inline';
+  /** An accessible label for the search input. */
   'aria-label'?: string;
-  /** placeholder text of the search input */
-  placeholder?: string;
-  /** @hide A reference object to attach to the input box */
+  /** Array of attribute values used for dynamically generated advanced search. */
+  attributes?: string[] | SearchAttribute[];
+  /** Additional classes added to the search input. */
+  className?: string;
+  /** Object that makes the search input expandable/collapsible. */
+  expandableInput?: ExpandableInput;
+  /* Additional elements added after the attributes in the form.
+   * The new form elements can be wrapped in a form group component for automatic formatting. */
+  formAdditionalItems?: React.ReactNode;
+  /** Attribute label for strings unassociated with one of the provided listed attributes. */
+  hasWordsAttrLabel?: React.ReactNode;
+  /** A suggestion for autocompleting. */
+  hint?: string;
+  /** @hide A reference object to attach to the input box. */
   innerRef?: React.RefObject<any>;
-  /** A callback for when the input value changes */
+  /** A flag for controlling the open state of a custom advanced search implementation. */
+  isAdvancedSearchOpen?: boolean;
+  /** Flag indicating if search input is disabled. */
+  isDisabled?: boolean;
+  /** Flag indicating if the next navigation button is disabled. */
+  isNextNavigationButtonDisabled?: boolean;
+  /** Flag indicating if the previous navigation button is disabled. */
+  isPreviousNavigationButtonDisabled?: boolean;
+  /** Accessible label for the button to navigate to next result. */
+  nextNavigationButtonAriaLabel?: string;
+  /** A callback for when the input value changes. */
   onChange?: (value: string, event: React.FormEvent<HTMLInputElement>) => void;
-  /** A suggestion for autocompleting */
-  hint?: string;
-  /** Object that makes the search input expandable/collapsible */
-  expandableInput?: ExpandableInput;
-  /** A callback for when the search button clicked changes */
+  /** A callback for when the user clicks the clear button. */
+  onClear?: (event: React.SyntheticEvent<HTMLButtonElement>) => void;
+  /** A callback for when the user clicks to navigate to next result. */
+  onNextClick?: (event: React.SyntheticEvent<HTMLButtonElement>) => void;
+  /** A callback for when the user clicks to navigate to previous result. */
+  onPreviousClick?: (event: React.SyntheticEvent<HTMLButtonElement>) => void;
+  /** A callback for when the search button is clicked. */
   onSearch?: (
     value: string,
     event: React.SyntheticEvent<HTMLButtonElement>,
     attrValueMap: { [key: string]: string }
   ) => void;
-  /** A callback for when the user clicks the clear button */
-  onClear?: (event: React.SyntheticEvent<HTMLButtonElement>) => void;
-  /** Label for the buttons which reset the advanced search form and clear the search input */
-  resetButtonLabel?: string;
-  /** Label for the buttons which called the onSearch event handler */
-  submitSearchButtonLabel?: string;
-  /** A callback for when the open advanced search button is clicked */
+  /** A callback for when the open advanced search button is clicked. */
   onToggleAdvancedSearch?: (event: React.SyntheticEvent<HTMLButtonElement>, isOpen?: boolean) => void;
-  /** A flag for controlling the open state of a custom advanced search implementation */
-  isAdvancedSearchOpen?: boolean;
-  /** Label for the button which opens the advanced search form menu */
+  /** Accessible label for the button which opens the advanced search form menu. */
   openMenuButtonAriaLabel?: string;
-  /** Label for the button to navigate to previous result  */
+  /** Placeholder text of the search input. */
+  placeholder?: string;
+  /** Accessible label for the button to navigate to previous result. */
   previousNavigationButtonAriaLabel?: string;
-  /** Flag indicating if the previous navigation button is disabled */
-  isPreviousNavigationButtonDisabled?: boolean;
-  /** Label for the button to navigate to next result */
-  nextNavigationButtonAriaLabel?: string;
-  /** Flag indicating if the next navigation button is disabled */
-  isNextNavigationButtonDisabled?: boolean;
-  /** Function called when user clicks to navigate to next result */
-  onNextClick?: (event: React.SyntheticEvent<HTMLButtonElement>) => void;
-  /** Function called when user clicks to navigate to previous result */
-  onPreviousClick?: (event: React.SyntheticEvent<HTMLButtonElement>) => void;
-  /** The number of search results returned. Either a total number of results,
-   * or a string representing the current result over the total number of results. i.e. "1 / 5" */
-  resultsCount?: number | string;
-  /** Array of attribute values used for dynamically generated advanced search */
-  attributes?: string[] | SearchAttribute[];
-  /* Additional elements added after the attributes in the form.
-   * The new form elements can be wrapped in a FormGroup component for automatic formatting */
-  formAdditionalItems?: React.ReactNode;
-  /** Attribute label for strings unassociated with one of the provided listed attributes */
-  hasWordsAttrLabel?: React.ReactNode;
-  /** Delimiter in the query string for pairing attributes with search values.
-   * Required whenever attributes are passed as props */
-  advancedSearchDelimiter?: string;
-  /** The container to append the menu to.
-   * If your menu is being cut off you can append it to an element higher up the DOM tree.
-   * Some examples:
-   * appendTo={() => document.body}
-   * appendTo={document.getElementById('target')}
-   */
-  appendTo?: HTMLElement | (() => HTMLElement) | 'inline';
   /** @beta Opt-in for updated popper that does not use findDOMNode. */
   removeFindDomNode?: boolean;
+  /** Label for the button which resets the advanced search form and clears the search input. */
+  resetButtonLabel?: string;
+  /** The number of search results returned. Either a total number of results,
+   * or a string representing the current result over the total number of results. i.e. "1 / 5". */
+  resultsCount?: number | string;
+  /** Label for the button which calls the onSearch event handler. */
+  submitSearchButtonLabel?: string;
+  /** Value of the search input. */
+  value?: string;
 }
 
 const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({

package/src/components/Select/Select.tsx

@@ -143,6 +143,8 @@ export interface SelectProps
   maxHeight?: string | number;
   /** Icon element to render inside the select toggle */
   toggleIcon?: React.ReactElement;
+  /** Custom icon for the dropdown replacing the CaretDownIcon */
+  toggleIndicator?: React.ReactElement;
   /** Custom content to render in the select menu.  If this prop is defined, the variant prop will be ignored and the select will render with a single select toggle */
   customContent?: React.ReactNode;
   /** Flag indicating if select should have an inline text input for filtering */
@@ -239,6 +241,7 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
     onClear: () => undefined as void,
     onCreateOption: () => undefined as void,
     toggleIcon: null as React.ReactElement,
+    toggleIndicator: null as React.ReactElement,
     onFilter: null,
     onTypeaheadInputChanged: null,
     customContent: null,
@@ -983,6 +986,7 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
       width,
       maxHeight,
       toggleIcon,
+      toggleIndicator,
       ouiaId,
       ouiaSafe,
       hasInlineFilter,
@@ -1314,6 +1318,7 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
           onClose={this.onClose}
           onBlur={onBlur}
           variant={variant}
+          toggleIndicator={toggleIndicator}
           aria-labelledby={`${ariaLabelledBy || ''} ${selectToggleId}`}
           aria-label={toggleAriaLabel}
           {...(ariaDescribedby && { 'aria-describedby': ariaDescribedby })}

package/src/components/Select/SelectToggle.tsx

@@ -31,6 +31,8 @@ export interface SelectToggleProps extends React.HTMLProps<HTMLElement> {
   moveFocusToLastMenuItem?: () => void;
   /** Element which wraps toggle */
   parentRef: React.RefObject<HTMLDivElement>;
+  /** Custom icon for the dropdown replacing the CaretDownIcon */
+  toggleIndicator?: React.ReactElement;
   /** The menu element */
   menuRef?: React.RefObject<HTMLElement>;
   /** The menu footer element */
@@ -262,6 +264,7 @@ export class SelectToggle extends React.Component<SelectToggleProps> {
       'aria-label': ariaLabel,
       hasFooter,
       footerRef,
+      toggleIndicator,
       ...props
     } = this.props;
     /* eslint-enable @typescript-eslint/no-unused-vars */
@@ -307,9 +310,7 @@ export class SelectToggle extends React.Component<SelectToggleProps> {
             disabled={isDisabled}
           >
             {children}
-            <span className={css(styles.selectToggleArrow)}>
-              <CaretDownIcon />
-            </span>
+            <span className={css(styles.selectToggleArrow)}>{toggleIndicator ?? <CaretDownIcon />}</span>
           </button>
         )}
         {isTypeahead && (
@@ -354,7 +355,7 @@ export class SelectToggle extends React.Component<SelectToggleProps> {
               })}
               disabled={isDisabled}
             >
-              <CaretDownIcon className={css(styles.selectToggleArrow)} />
+              {toggleIndicator ?? <CaretDownIcon className={css(styles.selectToggleArrow)} />}
             </button>
           </div>
         )}

package/src/components/Slider/Slider.tsx

@@ -7,64 +7,70 @@ import { InputGroup, InputGroupText } from '../InputGroup';
 import { TextInput } from '../TextInput';
 import { Tooltip } from '../Tooltip';
 
+/** Properties for creating custom steps in a slider. These properties should be passed in as
+ * an object within an array to the slider component's customSteps property.
+ */
 export interface SliderStepObject {
-  /** Value of the step. This value is a percentage of the slider where the  tick is drawn. */
-  value: number;
-  /** The display label for the step value. This is also used for the aria-valuetext */
-  label: string;
-  /** Flag to hide the label */
+  /** Flag to hide the label. */
   isLabelHidden?: boolean;
+  /** The display label for the step value. This is also used for the aria-valuetext attribute. */
+  label: string;
+  /** Value of the step. This value is a percentage of the slider where the tick is drawn. */
+  value: number;
 }
 
+/** The main slider component. */
 export interface SliderProps extends Omit<React.HTMLProps<HTMLDivElement>, 'onChange'> {
-  /** Additional classes added to the spinner. */
-  className?: string;
-  /** Current value  */
-  value?: number;
-  /** Flag indicating if the slider is is discrete for custom steps.  This will cause the slider to snap to the closest value. */
+  /** Flag indicating if the slider is discrete for custom steps. This will cause the slider
+   * to snap to the closest value.
+   */
   areCustomStepsContinuous?: boolean;
-  /** Adds disabled styling and disables the slider and the input component is present */
-  isDisabled?: boolean;
-  /** The step interval*/
-  step?: number;
-  /** Minimum permitted value */
-  min?: number;
-  /** The maximum permitted value */
-  max?: number;
-  /** Flag to indicate if boundaries should be shown for slider that does not have custom steps */
-  showBoundaries?: boolean;
-  /** Flag to indicate if ticks should be shown for slider that does not have custom steps  */
-  showTicks?: boolean;
+  /** One or more id's to use for the slider thumb's accessible description. */
+  'aria-describedby'?: string;
+  /** One or more id's to use for the slider thumb's accessible label. */
+  'aria-labelledby'?: string;
+  /** Additional classes added to the slider. */
+  className?: string;
   /** Array of custom slider step objects (value and label of each step) for the slider. */
   customSteps?: SliderStepObject[];
-  /** Flag to show value input field */
-  isInputVisible?: boolean;
-  /** Value displayed in the input field */
-  inputValue?: number;
-  /** Aria label for the input field */
-  inputAriaLabel?: string;
-  /* Aria label for the thumb */
-  thumbAriaLabel?: string;
-  /* Adds a tooltip over the thumb containing the current value */
+  /* Adds a tooltip over the slider thumb containing the current value. */
   hasTooltipOverThumb?: boolean;
-  /** Label that is place after the input field */
+  /** Accessible label for the input field. */
+  inputAriaLabel?: string;
+  /** Text label that is place after the input field. */
   inputLabel?: string | number;
-  /** Position of the input */
+  /** Position of the input. */
   inputPosition?: 'aboveThumb' | 'right';
-  /** Value change callback. This is called when the slider value changes */
+  /** Value displayed in the input field. */
+  inputValue?: number;
+  /** Adds disabled styling, and disables the slider and the input component if present. */
+  isDisabled?: boolean;
+  /** Flag to show value input field. */
+  isInputVisible?: boolean;
+  /** Actions placed to the left of the slider. */
+  leftActions?: React.ReactNode;
+  /** The maximum permitted value. */
+  max?: number;
+  /** The minimum permitted value. */
+  min?: number;
+  /** Value change callback. This is called when the slider value changes. */
   onChange?: (
     value: number,
     inputValue?: number,
     setLocalInputValue?: React.Dispatch<React.SetStateAction<number>>
   ) => void;
-  /** Actions placed to the left of the slider */
-  leftActions?: React.ReactNode;
-  /** Actions placed to the right of the slider */
+  /** Actions placed to the right of the slider. */
   rightActions?: React.ReactNode;
-  /** One or more id's to use for the slider thumb description */
-  'aria-describedby'?: string;
-  /** One or more id's to use for the slider thumb label */
-  'aria-labelledby'?: string;
+  /** Flag to indicate if boundaries should be shown for slider that does not have custom steps. */
+  showBoundaries?: boolean;
+  /** Flag to indicate if ticks should be shown for slider that does not have custom steps. */
+  showTicks?: boolean;
+  /** The step interval. */
+  step?: number;
+  /* Accessible label for the slider thumb. */
+  thumbAriaLabel?: string;
+  /** Current value of the slider.  */
+  value?: number;
 }
 
 const getPercentage = (current: number, max: number) => (100 * current) / max;

package/src/components/Slider/SliderStep.tsx

@@ -3,18 +3,18 @@ import styles from '@patternfly/react-styles/css/components/Slider/slider';
 import { css } from '@patternfly/react-styles';
 
 export interface SliderStepProps extends Omit<React.HTMLProps<HTMLDivElement>, 'label'> {
-  /** Additional classes added to the slider steps. */
+  /** Additional classes added to the slider step. */
   className?: string;
-  /** Step value **/
-  value?: number;
-  /** Step label **/
-  label?: string;
-  /** Flag indicating that the tick should be hidden */
-  isTickHidden?: boolean;
-  /** Flag indicating that the label should be hidden */
-  isLabelHidden?: boolean;
-  /** Flag indicating the step is active */
+  /** Flag indicating the step is active. */
   isActive?: boolean;
+  /** Flag indicating that the label should be hidden. */
+  isLabelHidden?: boolean;
+  /** Flag indicating that the tick should be hidden. */
+  isTickHidden?: boolean;
+  /** Step label. **/
+  label?: string;
+  /** Step value. **/
+  value?: number;
 }
 
 export const SliderStep: React.FunctionComponent<SliderStepProps> = ({

package/src/components/TreeView/TreeView.tsx

@@ -3,76 +3,90 @@ import { TreeViewList } from './TreeViewList';
 import { TreeViewCheckProps, TreeViewListItem } from './TreeViewListItem';
 import { TreeViewRoot } from './TreeViewRoot';
 
+/** Properties that make up a tree view data item. These properties should be passed in as an
+ * object to one of the various tree view component properties which accept TreeViewDataItem as
+ * a type.
+ */
+
 export interface TreeViewDataItem {
-  /** Internal content of a tree view item */
-  name: React.ReactNode;
-  /** Title a tree view item. Only used in Compact presentations. */
-  title?: React.ReactNode;
-  /** ID of a tree view item */
-  id?: string;
-  /** Child nodes of a tree view item */
+  /** Action of a tree view item, which can be either a button or dropdown component. */
+  action?: React.ReactNode;
+  /** Additional properties of the tree view item badge. */
+  badgeProps?: any;
+  /** Additional properties of the tree view item checkbox. */
+  checkProps?: TreeViewCheckProps;
+  /** Child nodes of a tree view item. */
   children?: TreeViewDataItem[];
-  /** Flag indicating if node is expanded by default */
+  /** Optional prop for a custom badge. */
+  customBadgeContent?: React.ReactNode;
+  /** Flag indicating if node is expanded by default. */
   defaultExpanded?: boolean;
-  /** Default icon of a tree view item */
-  icon?: React.ReactNode;
-  /** Expanded icon of a tree view item */
+  /** Expanded icon of a tree view item. */
   expandedIcon?: React.ReactNode;
-  /** Flag indicating if a tree view item has a checkbox */
-  hasCheck?: boolean;
-  /** Additional properties of the tree view item checkbox */
-  checkProps?: TreeViewCheckProps;
-  /** Flag indicating if a tree view item has a badge */
+  /** Flag indicating if a tree view item has a badge. */
   hasBadge?: boolean;
-  /** Optional prop for custom badge */
-  customBadgeContent?: React.ReactNode;
-  /** Additional properties of the tree view item badge */
-  badgeProps?: any;
-  /** Action of a tree view item, can be a Button or Dropdown */
-  action?: React.ReactNode;
+  /** Flag indicating if a tree view item has a checkbox. */
+  hasCheck?: boolean;
+  /** Default icon of a tree view item. */
+  icon?: React.ReactNode;
+  /** ID of a tree view item. */
+  id?: string;
+  /** Internal content of a tree view item. */
+  name: React.ReactNode;
+  /** Title of a tree view item. Only used in compact presentations. */
+  title?: React.ReactNode;
 }
 
+/** The main tree view component. */
+
 export interface TreeViewProps {
-  /** Data of the tree view */
+  /** Active items of tree view. */
+  activeItems?: TreeViewDataItem[];
+  /** Sets the expanded state on all tree nodes, overriding default behavior and current
+   * internal state.
+   */
+  allExpanded?: boolean;
+  /** Class to add if not passed a parentItem property. */
+  className?: string;
+  /** Comparison function for determining active items. */
+  compareItems?: (item: TreeViewDataItem, itemToCheck: TreeViewDataItem) => boolean;
+  /** Data of the tree view. */
   data: TreeViewDataItem[];
-  /** ID of the tree view */
-  id?: string;
-  /** Flag indicating if the tree view is nested */
-  isNested?: boolean;
-  /** Flag indicating if all nodes in the tree view should have checkboxes */
-  hasChecks?: boolean;
-  /** Flag indicating if all nodes in the tree view should have badges */
+  /** Sets the default expanded behavior. */
+  defaultAllExpanded?: boolean;
+  /** Icon for all expanded node items. */
+  expandedIcon?: React.ReactNode;
+  /** Flag indicating if all nodes in the tree view should have badges. */
   hasBadges?: boolean;
-  /** Flag indicating if tree view has guide lines. */
+  /** Flag indicating if all nodes in the tree view should have checkboxes. */
+  hasChecks?: boolean;
+  /** Flag indicating if the tree view has guide lines. */
   hasGuides?: boolean;
-  /** Flag indicating that tree nodes should be independently selectable, even when having children */
+  /** Flag indicating if the tree view is nested. */
+  isNested?: boolean;
+  /** Flag indicating that tree nodes should be independently selectable, even when having
+   * children.
+   */
   hasSelectableNodes?: boolean;
-  /** Variant presentation styles for the tree view. */
-  variant?: 'default' | 'compact' | 'compactNoBackground';
-  /** Icon for all leaf or unexpanded node items */
+  /** Icon for all leaf or unexpanded node items. */
   icon?: React.ReactNode;
-  /** Icon for all expanded node items */
-  expandedIcon?: React.ReactNode;
-  /** Sets the expanded state on all tree nodes, overriding default behavior and current internal state */
-  allExpanded?: boolean;
-  /** Sets the default expanded behavior */
-  defaultAllExpanded?: boolean;
-  /** Callback for item selection */
-  onSelect?: (event: React.MouseEvent, item: TreeViewDataItem, parentItem: TreeViewDataItem) => void;
-  /** Callback for item checkbox selection */
+  /** ID of the tree view. */
+  id?: string;
+  /** Callback for item checkbox selection. */
   onCheck?: (event: React.ChangeEvent<HTMLInputElement>, item: TreeViewDataItem, parentItem: TreeViewDataItem) => void;
-  /** Active items of tree view */
-  activeItems?: TreeViewDataItem[];
-  /** Internal. Parent item of a TreeViewListItem */
+  /** Callback for item selection. */
+  onSelect?: (event: React.MouseEvent, item: TreeViewDataItem, parentItem: TreeViewDataItem) => void;
+  /** Internal. Parent item of a tree view list item. */
   parentItem?: TreeViewDataItem;
-  /** Comparison function for determining active items */
-  compareItems?: (item: TreeViewDataItem, itemToCheck: TreeViewDataItem) => boolean;
-  /** Class to add to add if not passed a parentItem */
-  className?: string;
-  /** Toolbar to display above the tree view */
+  /** Toolbar to display above the tree view. */
   toolbar?: React.ReactNode;
-  /** Flag indicating the TreeView should utilize memoization to help render large data sets. Setting this property requires that `activeItems` pass in an array containing every node in the selected item's path. */
+  /** Flag indicating the tree view should utilize memoization to help render large data sets.
+   * Setting this property requires that the activeItems property is passed an array containing
+   * every node in the selected item's path.
+   */
   useMemo?: boolean;
+  /** Variant presentation styles for the tree view. */
+  variant?: 'default' | 'compact' | 'compactNoBackground';
 }
 
 export const TreeView: React.FunctionComponent<TreeViewProps> = ({

package/src/components/TreeView/TreeViewList.tsx

@@ -3,12 +3,12 @@ import { css } from '@patternfly/react-styles';
 import { Divider } from '../Divider';
 
 export interface TreeViewListProps extends React.HTMLProps<HTMLUListElement> {
-  /** Flag indicating if the tree view is nested under another tree view */
+  /** Child nodes of the current tree view. */
+  children: React.ReactNode;
+  /** Flag indicating if the tree view is nested under another tree view. */
   isNested?: boolean;
-  /** Toolbar to display above the tree view */
+  /** Toolbar to display above the tree view. */
   toolbar?: React.ReactNode;
-  /** Child nodes of the current tree view */
-  children: React.ReactNode;
 }
 
 export const TreeViewList: React.FunctionComponent<TreeViewListProps> = ({

package/src/components/TreeView/TreeViewListItem.tsx

@@ -11,51 +11,58 @@ export interface TreeViewCheckProps extends Omit<Partial<React.InputHTMLAttribut
 }
 
 export interface TreeViewListItemProps {
-  /** Internal content of a tree view item */
-  name: React.ReactNode;
-  /** Title a tree view item */
-  title: React.ReactNode;
-  /** ID of a tree view item */
-  id?: string;
-  /** Flag indicating if the node is expanded, overrides internal state */
-  isExpanded?: boolean;
-  /** Flag indicating if node is expanded by default */
-  defaultExpanded?: boolean;
-  /** Child nodes of a tree view item */
-  children?: React.ReactNode;
-  /** Callback for item selection. Note: calling event.preventDefault() will prevent the node from toggling. */
-  onSelect?: (event: React.MouseEvent, item: TreeViewDataItem, parent: TreeViewDataItem) => void;
-  /** Callback for item checkbox selection */
-  onCheck?: (event: React.ChangeEvent<HTMLInputElement>, item: TreeViewDataItem, parent: TreeViewDataItem) => void;
-  /** Flag indicating if a tree view item has a checkbox */
-  hasCheck?: boolean;
-  /** Additional properties of the tree view item checkbox */
+  /** Action of a tree view item, which can be either a button or dropdown component. */
+  action?: React.ReactNode;
+  /** Active items of tree view. */
+  activeItems?: TreeViewDataItem[];
+  /** Additional properties of the tree view item badge. */
+  badgeProps?: any;
+  /** Additional properties of the tree view item checkbox. */
   checkProps?: TreeViewCheckProps;
-  /** Flag indicating if a tree view item has a badge */
-  hasBadge?: boolean;
-  /** Flag indicating that tree nodes should be independently selectable, even when having children */
-  isSelectable?: boolean;
-  /** Optional prop for custom badge */
+  /** Child nodes of a tree view item. */
+  children?: React.ReactNode;
+  /** Callback for item comparison function. */
+  compareItems?: (item: TreeViewDataItem, itemToCheck: TreeViewDataItem) => boolean;
+  /** Optional prop for a custom badge. */
   customBadgeContent?: React.ReactNode;
-  /** Additional properties of the tree view item badge */
-  badgeProps?: any;
+  /** Flag indicating if node is expanded by default. */
+  defaultExpanded?: boolean;
+  /** Expanded icon of a tree view item. */
+  expandedIcon?: React.ReactNode;
+  /** Flag indicating if a tree view item has a badge. */
+  hasBadge?: boolean;
+  /** Flag indicating if a tree view item has a checkbox. */
+  hasCheck?: boolean;
+  /** Default icon of a tree view item. */
+  icon?: React.ReactNode;
+  /** ID of a tree view item. */
+  id?: string;
   /** Flag indicating if the tree view is using a compact variation. */
   isCompact?: boolean;
-  /** Active items of tree view */
-  activeItems?: TreeViewDataItem[];
-  /** Data structure of tree view item */
+  /** Flag indicating if the node is expanded, overrides internal state. */
+  isExpanded?: boolean;
+  /** Flag indicating that tree nodes should be independently selectable, even when having
+   * children.
+   */
+  isSelectable?: boolean;
+  /** Data structure of tree view item. */
   itemData?: TreeViewDataItem;
-  /** Parent item of tree view item */
+  /** Internal content of a tree view item. */
+  name: React.ReactNode;
+  /** Callback for item checkbox selection. */
+  onCheck?: (event: React.ChangeEvent<HTMLInputElement>, item: TreeViewDataItem, parent: TreeViewDataItem) => void;
+  /** Callback for item selection. Note: calling event.preventDefault() will prevent the node
+   * from toggling.
+   */
+  onSelect?: (event: React.MouseEvent, item: TreeViewDataItem, parent: TreeViewDataItem) => void;
+  /** Parent item of tree view item. */
   parentItem?: TreeViewDataItem;
-  /** Default icon of a tree view item */
-  icon?: React.ReactNode;
-  /** Expanded icon of a tree view item */
-  expandedIcon?: React.ReactNode;
-  /** Action of a tree view item, can be a Button or Dropdown */
-  action?: React.ReactNode;
-  /** Callback for item comparison function */
-  compareItems?: (item: TreeViewDataItem, itemToCheck: TreeViewDataItem) => boolean;
-  /** Flag indicating the TreeView should utilize memoization to help render large data sets. Setting this property requires that `activeItems` pass in an array containing every node in the selected item's path. */
+  /** Title of a tree view item. */
+  title: React.ReactNode;
+  /** Flag indicating the tree view should utilize memoization to help render large data sets.
+   * Setting this property requires that the activeItems property is passed an array containing
+   * every node in the selected item's path.
+   */
   useMemo?: boolean;
 }