react-magma-dom 4.7.0-next.9 → 4.8.0-next.0

package/dist/components/BlockQuote/BlockQuote.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { magma, ThemeInterface } from '../../theme/magma';
+import { Colors, ThemeInterface } from '../../theme/magma';
 /**
  * @children required
  */
@@ -7,7 +7,7 @@ export interface BlockQuoteProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
      * Style properties for the left border color which accept custom CSS hex values.
      */
-    borderStyle?: keyof typeof magma.colors | string;
+    borderStyle?: keyof Colors | string;
     isInverse?: boolean;
     /**
      * @internal

package/dist/components/Button/index.d.ts

@@ -7,6 +7,7 @@ export declare enum ButtonColor {
     primary = "primary",
     secondary = "secondary",
     danger = "danger",
+    success = "success",
     marketing = "marketing",
     subtle = "subtle"
 }

package/dist/components/Combobox/ComboboxInput.d.ts

@@ -1,6 +1,6 @@
+import { UseComboboxGetComboboxPropsOptions, UseComboboxGetInputPropsOptions, UseComboboxGetToggleButtonPropsOptions } from 'downshift';
 import React from 'react';
 import { SelectComponents } from '../Select/components';
-import { UseComboboxGetComboboxPropsOptions, UseComboboxGetInputPropsOptions, UseComboboxGetToggleButtonPropsOptions } from 'downshift';
 import { ReferenceType } from '@floating-ui/react-dom';
 interface ComboboxInputProps<T> {
     ariaDescribedBy?: string;

package/dist/components/DatePicker/CalendarContext.d.ts

@@ -10,6 +10,7 @@ export interface CalendarContextInterface {
     buildCalendarMonth: (date: Date, enableOutsideDates?: boolean) => Date[][];
     showHelperInformation: () => void;
     hideHelperInformation: () => void;
+    onClose: (event?: React.SyntheticEvent) => void;
     onDateChange: (day: Date, event: React.SyntheticEvent) => void;
     onKeyDown: (event: React.KeyboardEvent) => void;
     onPrevMonthClick: () => void;

package/dist/components/DatePicker/HelperInformation.d.ts

@@ -2,6 +2,7 @@ import * as React from 'react';
 interface HelperInformationProps {
     isInverse?: boolean;
     isOpen?: boolean;
+    onReturnBack?: (event?: React.SyntheticEvent) => void;
     onClose?: (event?: React.SyntheticEvent) => void;
 }
 export declare const HelperInformation: React.FunctionComponent<HelperInformationProps>;

package/dist/components/Dropdown/Dropdown.d.ts

@@ -19,11 +19,13 @@ export interface DropdownProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
      * Alignment of the dropdown content
      * @default DropdownAlignment.start
+     * @deprecated = true
      */
     alignment?: DropdownAlignment;
     /**
      * Position of the dropdown content
      * @default DropdownDropDirection.down
+     * @deprecated = true
      */
     dropDirection?: DropdownDropDirection;
     /**

package/dist/components/InputBase/index.d.ts

@@ -1,7 +1,8 @@
+import { ReferenceType } from '@floating-ui/react-dom/dist/floating-ui.react-dom';
 import * as React from 'react';
 import { IconProps } from 'react-magma-icons';
 import { ThemeInterface } from '../../theme/magma';
-import { ReferenceType } from '@floating-ui/react-dom/dist/floating-ui.react-dom';
+import { LabelPosition } from '../Label';
 export declare enum InputSize {
     large = "large",
     medium = "medium"
@@ -25,7 +26,8 @@ export interface InputBaseProps extends React.InputHTMLAttributes<HTMLInputEleme
      */
     children?: any;
     /**
-     * Style properties for the component container element
+     * Style properties for the component container element.
+     * This div is a direct child of the div with the inputWrapperStyle, so the second from the top.
      */
     containerStyle?: React.CSSProperties;
     /**
@@ -66,7 +68,7 @@ export interface InputBaseProps extends React.InputHTMLAttributes<HTMLInputEleme
      */
     inputStyle?: React.CSSProperties;
     /**
-     * Style properties for input wrapper element
+     * Style properties for input wrapper element. This is the outermost div.
      */
     inputWrapperStyle?: React.CSSProperties;
     /**
@@ -138,6 +140,16 @@ export interface InputBaseProps extends React.InputHTMLAttributes<HTMLInputEleme
      * @default "auto"
      */
     width?: string;
+    /**
+     * Position within the component for the label to appear
+     * @default LabelPosition.top
+     */
+    labelPosition?: LabelPosition;
+    /**
+     * If true, label text will be hidden visually, but will still be read by assistive technology
+     * @default false
+     */
+    isLabelVisuallyHidden?: boolean;
 }
 export interface InputWrapperStylesProps {
     width?: string;
@@ -167,6 +179,7 @@ export declare const InputWrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType<any>;
 } & InputWrapperStylesProps, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare function getHelpIconButtonSize(props: any): any;
 export declare const IconButtonContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType<any>;
@@ -177,4 +190,17 @@ export declare const IconButtonContainer: import("@emotion/styled").StyledCompon
     isClickable?: boolean;
     hasChildren?: boolean;
 }, React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const isLeftOrHidden: ({ labelPosition, isLabelVisuallyHidden, }: {
+    labelPosition?: LabelPosition;
+    isLabelVisuallyHidden?: boolean;
+}) => boolean;
+export declare const HelpLinkContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType<any>;
+} & {
+    labelPosition?: LabelPosition;
+    inputSize?: InputSize;
+    theme: ThemeInterface;
+    isLabelVisuallyHidden?: boolean;
+}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
 export declare const InputBase: React.ForwardRefExoticComponent<InputBaseProps & React.RefAttributes<HTMLInputElement>>;

package/dist/components/List/ListItem.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { ListProps } from './';
-import { magma } from '../../theme/magma';
+import { Colors } from '../../theme/magma';
 /**
  * @children required
  */
@@ -16,10 +16,10 @@ export interface ListItemProps extends ListProps, React.HTMLAttributes<HTMLDivEl
     /**
      * Option for changing icon background with all Magma colors.
      */
-    iconBackground?: keyof typeof magma.colors;
+    iconBackground?: keyof Colors;
     /**
      * Option for changing icon color with all Magma colors.
      */
-    iconColor?: keyof typeof magma.colors;
+    iconColor?: keyof Colors;
 }
 export declare const ListItem: React.ForwardRefExoticComponent<ListItemProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/NavTabs/NavTab.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { TabsIconPosition } from '../Tabs';
-import { TabsOrientation } from '../Tabs/shared';
+import { TabsOrientation, TabsTextTransform } from '../Tabs/shared';
 import { XOR } from '../../utils';
 export interface BaseNavTabProps extends React.HTMLAttributes<HTMLAnchorElement> {
     /**
@@ -25,6 +25,11 @@ export interface BaseNavTabProps extends React.HTMLAttributes<HTMLAnchorElement>
      * @default TabsOrientation.horizontal
      */
     orientation?: TabsOrientation;
+    /**
+     * Determines whether the tab appears in all-caps
+     * @default TabsTextTransform.uppercase
+     */
+    textTransform?: TabsTextTransform;
     /**
      * @internal
      */

package/dist/components/NavTabs/NavTabs.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { TabsBorderPosition, TabsIconPosition, TabsProps } from '../Tabs';
-import { TabsOrientation } from '../Tabs/shared';
+import { TabsOrientation, TabsTextTransform } from '../Tabs/shared';
 import { Omit } from '../../utils';
 export interface NavTabsProps extends Omit<TabsProps, 'onChange'> {
 }
@@ -10,6 +10,7 @@ interface NavTabsContextInterface {
     isInverse?: boolean;
     isFullWidth?: boolean;
     orientation?: TabsOrientation;
+    textTransform?: TabsTextTransform;
 }
 export declare const NavTabsContext: React.Context<NavTabsContextInterface>;
 export declare const NavTabs: React.ForwardRefExoticComponent<(NavTabsProps & import("../Tabs").HorizontalTabsProps & React.RefAttributes<HTMLDivElement>) | (NavTabsProps & import("../Tabs").VerticalTabsProps & React.RefAttributes<HTMLDivElement>)>;

package/dist/components/Select/ItemsList.d.ts

@@ -1,7 +1,7 @@
-import React from 'react';
+import { ReferenceType } from '@floating-ui/react-dom';
 import { UseSelectGetItemPropsOptions, UseSelectGetMenuPropsOptions } from 'downshift';
+import React from 'react';
 import { SelectComponents } from './components';
-import { ReferenceType } from '@floating-ui/react-dom';
 interface ItemsListProps<T> {
     customComponents?: SelectComponents<T>;
     floatingElementStyles?: React.CSSProperties;
@@ -16,6 +16,7 @@ interface ItemsListProps<T> {
     maxHeight?: number | string;
     menuStyle?: React.CSSProperties;
     setFloating?: (node: ReferenceType) => void;
+    setHighlightedIndex?: (index: number) => void;
 }
 export declare function ItemsList<T>(props: ItemsListProps<T>): JSX.Element;
 export {};

package/dist/components/Select/components.d.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { IconButtonProps } from '../IconButton';
-import { SpinnerProps } from '../Spinner';
 import { IconProps } from 'react-magma-icons';
 import { ThemeInterface } from '../../theme/magma';
+import { IconButtonProps } from '../IconButton';
+import { SpinnerProps } from '../Spinner';
 export declare type ItemRenderOptions<T> = {
     key: string;
     isFocused?: boolean;
@@ -22,7 +22,7 @@ export declare type SelectComponents<T> = {
 export declare const DefaultClearIndicator: (props: any) => JSX.Element;
 export declare const DefaultDropdownIndicator: (props: any) => JSX.Element;
 export declare const DefaultLoadingIndicator: (props: any) => JSX.Element;
-export declare function DefaultItem<T>({ itemRef, itemString, isInverse, ...props }: ItemRenderOptions<T>): JSX.Element;
+export declare function DefaultItem<T>({ itemRef, itemString, isInverse, isDisabled, ...props }: ItemRenderOptions<T>): JSX.Element;
 export declare function defaultComponents<T>(props: SelectComponents<T>): {
     ClearIndicator: React.FunctionComponent<({} & import("../IconButton").IconTextButtonProps) | ({
         children?: never;

package/dist/components/Select/index.d.ts

@@ -1,13 +1,14 @@
-import * as React from 'react';
-import { UseMultipleSelectionProps, UseSelectProps } from 'downshift';
 import { ReferenceType } from '@floating-ui/react-dom/dist/floating-ui.react-dom';
-import { SelectComponents } from './components';
+import { UseMultipleSelectionProps, UseSelectProps } from 'downshift';
+import * as React from 'react';
 import { Omit, XOR } from '../../utils';
 import { LabelPosition } from '../Label';
+import { SelectComponents } from './components';
 export declare type SelectOptions = string | {
     value: string;
     label: string;
     [key: string]: any;
+    disabled?: boolean;
 } | any;
 export interface InternalSelectProps<T> {
     /**
@@ -123,6 +124,10 @@ export interface SelectProps<T extends SelectOptions> extends UseSelectProps<T>,
      * @internal
      */
     isMulti?: false;
+    /**
+     * Index of the item that should be highlighted by default. Use this prop when you want to set a specific item on the list to be highlighted when the component is first rendered.
+     */
+    initialHighlightedIndex?: number;
     /**
      * Event that fires when the trigger button loses focus
      */
@@ -177,6 +182,11 @@ export declare function instanceOfToBeCreatedItemObject(object: any): object is
     value: string;
     react_magma__created_item: boolean;
 };
+export declare function instanceOfItemWithOptionalDisabled(object: any): object is {
+    label: string;
+    value: string;
+    disabled?: boolean;
+};
 export declare type XORSelectProps<T> = XOR<SelectProps<T>, MultiSelectProps<T>>;
 export declare const SelectStateChangeTypes: {
     MenuKeyDownArrowDown: import("downshift").UseSelectStateChangeTypes.MenuKeyDownArrowDown;

package/dist/components/Select/shared.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { ThemeInterface } from '../../theme/magma';
 export declare const SelectContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: import("react").ElementType<any>;
@@ -12,6 +13,10 @@ export declare const SelectText: import("@emotion/styled").StyledComponent<{
     as?: import("react").ElementType<any>;
 } & {
     isClearable?: boolean;
+    isShowPlaceholder?: boolean;
+    isInverse?: boolean;
+    isDisabled?: boolean;
+    theme?: ThemeInterface;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
 export declare const StyledCard: import("@emotion/styled").StyledComponent<import("../Card").CardProps & import("react").RefAttributes<HTMLDivElement> & {
     theme?: import("@emotion/react").Theme;
@@ -32,6 +37,7 @@ export declare const StyledItem: import("@emotion/styled").StyledComponent<{
 } & {
     isInverse?: boolean;
     isFocused?: boolean;
+    isDisabled?: boolean;
 }, import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, {}>;
 export declare const SelectedItemsWrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;

package/dist/components/Select/utils.d.ts

@@ -0,0 +1 @@
+export declare function isItemDisabled(item: any): boolean;

package/dist/components/Stepper/ResponsiveStepperContainer.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { StepperProps } from './Stepper';
+export interface ResponsiveStepperContainerProps extends Omit<StepperProps, 'currentStep'> {
+    /**
+     * @children
+     */
+    children?: React.ReactNode;
+    /**
+     * Steps of the Stepper.
+     */
+    steps: React.ReactNode[];
+    /**
+     * Current step value.
+     */
+    currentStep: number;
+}
+export declare const ResponsiveStepperContainer: React.FunctionComponent<ResponsiveStepperContainerProps>;

package/dist/components/Stepper/Step.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { ThemeInterface } from '../../theme/magma';
-import { StepperLayout } from './Stepper';
+import { StepperLayout, StepperOrientation } from './Stepper';
 export interface StepProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
      * Error state for each step.
@@ -27,6 +27,10 @@ export interface StepProps extends React.HTMLAttributes<HTMLDivElement> {
      * @internal
      */
     index?: number;
+    /**
+     * @internal
+     */
+    orientation?: StepperOrientation;
     /**
      * @internal
      */

package/dist/components/Stepper/Stepper.d.ts

@@ -17,6 +17,10 @@ export interface StepperProps extends React.HTMLAttributes<HTMLDivElement> {
      * Changes the Stepper view for responsive layouts, needs a minimum 'breakpoint' number.
      */
     breakpointLayout?: StepperLayout;
+    /**
+     * Changes the Stepper orientation for responsive layouts, needs a minimum 'breakpoint' number.
+     */
+    breakpointOrientation?: StepperOrientation;
     /**
      * Sets the Stepper view
      * @default StepperLayout.showLabels
@@ -36,6 +40,11 @@ export interface StepperProps extends React.HTMLAttributes<HTMLDivElement> {
      * Current step value.
      */
     currentStep: number;
+    /**
+     * Determines if the stepper is displayed vertically or horizontally
+     * @default StepperOrientation.horizontal
+     */
+    orientation?: StepperOrientation;
     /**
      * Inverse styling.
      */
@@ -50,4 +59,8 @@ export declare enum StepperLayout {
     hideLabels = "hideLabels",
     summaryView = "summaryView"
 }
+export declare enum StepperOrientation {
+    horizontal = "horizontal",
+    vertical = "vertical"
+}
 export declare const Stepper: React.ForwardRefExoticComponent<StepperProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Stepper/index.d.ts

@@ -1,2 +1,3 @@
 export * from './Step';
 export * from './Stepper';
+export * from './ResponsiveStepperContainer';

package/dist/components/StyledButton/styles.d.ts

@@ -10,6 +10,5 @@ export declare function buildBorderColor(props: any): any;
 export declare function buildColor(props: any): any;
 export declare function buildFocusBackground(props: any): any;
 export declare function buildFocusColor(props: any): any;
-export declare function buildAfterBackground(props: any): any;
 export declare function buildActiveBackground(props: any): any;
 export declare function buildActiveColor(props: any): any;

package/dist/components/Tabs/Tab.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { TabsIconPosition, TabsBorderPosition } from './Tabs';
-import { TabsOrientation } from './shared';
+import { TabsOrientation, TabsTextTransform } from './shared';
 import { ThemeInterface } from '../../theme/magma';
 export interface TabProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     /**
@@ -8,6 +8,11 @@ export interface TabProps extends React.ButtonHTMLAttributes<HTMLButtonElement>
      */
     icon?: React.ReactElement<any> | React.ReactElement<any>[];
     isInverse?: boolean;
+    /**
+     * Determines whether the tab appears in all-caps
+     * @default TabsTextTransform.uppercase
+     */
+    textTransform?: TabsTextTransform;
     /**
      * @internal
      */

package/dist/components/Tabs/Tabs.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Omit } from '../../utils';
 import { ThemeInterface } from '../../theme/magma';
+import { TabsOrientation, TabsTextTransform } from './shared';
 export declare enum TabsAlignment {
     center = "center",
     left = "left",
@@ -18,10 +19,6 @@ export declare enum TabsIconPosition {
     right = "right",
     top = "top"
 }
-export declare enum TabsOrientation {
-    horizontal = "horizontal",
-    vertical = "vertical"
-}
 export interface VerticalTabsProps {
     orientation?: TabsOrientation.vertical;
     borderPosition?: TabsBorderPosition.left | TabsBorderPosition.right;
@@ -63,6 +60,11 @@ export interface TabsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'o
      * @default TabsOrientation.horizontal
      */
     orientation?: TabsOrientation;
+    /**
+     * Determines whether the tab appears in all-caps
+     * @default TabsTextTransform.uppercase
+     */
+    textTransform?: TabsTextTransform;
     /**
      * @internal
      */
@@ -76,6 +78,7 @@ interface TabsContextInterface {
     isInverse?: boolean;
     isFullWidth?: boolean;
     orientation?: TabsOrientation;
+    textTransform?: TabsTextTransform;
     registerTabButton: (itemRefArray: React.MutableRefObject<React.MutableRefObject<Element>[]>, itemRef: React.MutableRefObject<Element>) => void;
 }
 export declare const TabsContext: React.Context<TabsContextInterface>;

package/dist/components/Tabs/shared.d.ts

@@ -2,3 +2,7 @@ export declare enum TabsOrientation {
     horizontal = "horizontal",
     vertical = "vertical"
 }
+export declare enum TabsTextTransform {
+    uppercase = "uppercase",
+    none = "none"
+}

package/dist/components/TreeView/TreeViewContext.d.ts

@@ -4,6 +4,7 @@ import { IndeterminateCheckboxStatus } from '../IndeterminateCheckbox';
 export interface TreeItemSelectedInterface {
     itemId?: string;
     checkedStatus: IndeterminateCheckboxStatus;
+    isDisabled?: boolean;
 }
 export interface TreeViewItemInterface {
     itemId?: string;
@@ -11,13 +12,14 @@ export interface TreeViewItemInterface {
     icon?: React.ReactNode;
     checkedStatus: IndeterminateCheckboxStatus;
     hasOwnTreeItems: boolean;
+    isDisabled?: boolean;
 }
 export interface TreeViewContextInterface {
     children?: React.ReactNode[];
     hasIcons: boolean;
     initialExpandedItems: Array<string>;
     initialExpandedItemsNeedUpdate: boolean;
-    onExpandedChange?: (event: React.SyntheticEvent) => void;
+    onExpandedChange?: (event: React.SyntheticEvent, expandedItems: Array<string>) => void;
     onSelectedItemChange?: (selectedItems: Array<TreeItemSelectedInterface>) => void;
     registerTreeItem: (itemRefArray: React.MutableRefObject<React.MutableRefObject<Element>[]>, itemRef: React.MutableRefObject<Element>) => void;
     selectable: TreeViewSelectable;
@@ -29,5 +31,6 @@ export interface TreeViewContextInterface {
     checkChildren: boolean;
     items: TreeViewItemInterface[];
     selectItem: (data: Pick<TreeViewItemInterface, 'itemId' | 'checkedStatus'>) => void;
+    handleExpandedChange: (event: React.SyntheticEvent, expandedItemId: string) => void;
 }
 export declare const TreeViewContext: React.Context<TreeViewContextInterface>;

package/dist/components/TreeView/index.d.ts

@@ -4,3 +4,4 @@ export * from './useTreeItem';
 export * from './useTreeView';
 export * from './utils';
 export * from './types';
+export { TreeItemSelectedInterface, TreeViewApi } from './useTreeView';

package/dist/components/TreeView/useTreeItem.d.ts

@@ -27,9 +27,6 @@ export interface UseTreeItemProps extends React.HTMLAttributes<HTMLLIElement> {
      * Icon for the tree item
      */
     icon?: React.ReactElement<IconProps>;
-    /**
-     * @internal
-     */
     /**
      * @internal
      */
@@ -39,8 +36,6 @@ export interface UseTreeItemProps extends React.HTMLAttributes<HTMLLIElement> {
      */
     itemDepth?: number;
     /**
-     * TODO: improve functionality (issue #1305)
-     * @internal
      * If true, element is disabled
      * @default false
      */
@@ -68,6 +63,7 @@ export declare function useTreeItem(props: UseTreeItemProps, forwardedRef: any):
         selectedItems: import("./TreeViewContext").TreeItemSelectedInterface[];
         setExpanded: React.Dispatch<React.SetStateAction<boolean>>;
         treeItemChildren: (string | number | {} | React.ReactElement<any, string | ((props: any) => React.ReactElement<any, any>) | (new (props: any) => React.Component<any, any, any>)> | React.ReactNodeArray | React.ReactPortal)[];
+        isDisabled: boolean;
     };
     handleClick: (event: any, itemId: any) => void;
     handleKeyDown: (event: React.KeyboardEvent) => void;

package/dist/components/TreeView/useTreeView.d.ts

@@ -1,10 +1,13 @@
 import * as React from 'react';
 import { TreeItemSelectedInterface, TreeViewItemInterface } from './TreeViewContext';
 import { TreeViewSelectable } from './types';
+export { TreeItemSelectedInterface };
 export interface TreeViewApi {
-    selectItem({ itemId, checkedStatus }: Pick<TreeViewItemInterface, 'itemId' | 'checkedStatus'>): void;
+    selectItem({ itemId, checkedStatus, }: Pick<TreeViewItemInterface, 'itemId' | 'checkedStatus'>): void;
     selectAll(): void;
     clearAll(): void;
+    showMore(): void;
+    showLess(): void;
 }
 export interface UseTreeViewProps {
     /**
@@ -42,8 +45,10 @@ export interface UseTreeViewProps {
     testId?: string;
     /**
      * Action that fires when an item is expanded or collapsed
+     * Return an array of itemIds of items that are expanded
+     * Example: ['item0', 'item1', 'item3']
      */
-    onExpandedChange?: (event: React.SyntheticEvent) => void;
+    onExpandedChange?: (event: React.SyntheticEvent, expandedItems: Array<string>) => void;
     /**
      * Action that fires when an item is selected
      * Return an array of objects.
@@ -63,22 +68,29 @@ export interface UseTreeViewProps {
      * @default true
      */
     checkChildren?: boolean;
-    children?: React.ReactNode[];
+    children?: React.ReactNode[] | React.ReactNode;
     /**
      * The ref object that allows TreeView manipulation.
      * Actions available:
      * selectItem({ itemId, checkedStatus }: Pick<TreeViewItemInterface, 'itemId' | 'checkedStatus'>): void - action that allows to change item selection,
      * selectAll(): void - action that allows to select all items,
      * clearAll(): void - action that allows to unselect all items.
+     * showMore(): void - action that gets called when a tree has hidden items and they get expanded.
+     * showLess(): void - action that gets called when a tree has hidden items and they get collapsed.
      */
-    apiRef?: React.MutableRefObject<TreeViewApi>;
+    apiRef?: React.MutableRefObject<TreeViewApi | undefined>;
+    /**
+     * If true, every item is disabled
+     * @default false
+     */
+    isDisabled?: boolean;
 }
 export declare function useTreeView(props: UseTreeViewProps): {
     contextValue: {
         hasIcons: any;
         itemToFocus: any;
         onSelectedItemChange: (selectedItems: TreeItemSelectedInterface[]) => void;
-        onExpandedChange: (event: React.SyntheticEvent<Element, Event>) => void;
+        onExpandedChange: (event: React.SyntheticEvent<Element, Event>, expandedItems: string[]) => void;
         selectable: TreeViewSelectable;
         selectedItems: any;
         initialExpandedItems: any[];
@@ -89,7 +101,9 @@ export declare function useTreeView(props: UseTreeViewProps): {
         checkChildren: boolean;
         checkParents: boolean;
         items: any;
-        selectItem: ({ itemId, checkedStatus }: Pick<TreeViewItemInterface, 'itemId' | 'checkedStatus'>) => void;
+        selectItem: ({ itemId, checkedStatus, }: Pick<TreeViewItemInterface, 'itemId'> & Partial<Pick<TreeViewItemInterface, 'checkedStatus'>>) => void;
+        handleExpandedChange: (event: React.SyntheticEvent, itemId: string) => void;
+        expandedSet: Set<string>;
     };
 };
 export declare type UseTreeViewReturn = ReturnType<typeof useTreeView>;

package/dist/components/TreeView/utils.d.ts

@@ -3,7 +3,7 @@ import { UseTreeViewProps } from './useTreeView';
 import { TreeViewSelectable } from './types';
 import React from 'react';
 import { IndeterminateCheckboxStatus } from '../IndeterminateCheckbox';
-import { TreeViewItemInterface } from './TreeViewContext';
+import { TreeItemSelectedInterface, TreeViewItemInterface } from './TreeViewContext';
 export declare enum TreeNodeType {
     branch = "branch",
     leaf = "leaf"
@@ -25,14 +25,17 @@ export declare function getTreeItemLabelColor(isInverse: boolean, disabled: bool
 export declare function getTreeItemWrapperCursor(disabled: boolean, selectable: TreeViewSelectable, nodeType: TreeNodeType): "not-allowed" | "pointer" | "default";
 export declare function getChildrenItemIds(children: any, status?: string): any[];
 export declare function getChildrenItemIdsFlat(children: any): any[];
-export declare function getChildrenItemIdsInTree(children: any): any[];
 export declare function filterNullEntries(obj: any): {
     current: any;
 } | {
     current?: undefined;
 };
-export declare const getInitialItems: ({ children, preselectedItems: rawPreselectedItems, checkParents, selectable }: Pick<UseTreeViewProps, 'children' | 'preselectedItems' | 'checkParents' | 'selectable'>) => any;
-export declare const selectSingle: ({ items, itemId, checkedStatus }: {
+export declare const getChildrenIds: ({ items, itemId, }: {
+    items: TreeViewItemInterface[];
+    itemId: TreeViewItemInterface['itemId'];
+}) => any;
+export declare const getInitialItems: ({ children, preselectedItems: rawPreselectedItems, checkParents, checkChildren, selectable, isDisabled: isTreeViewDisabled, }: Pick<UseTreeViewProps, 'children' | 'preselectedItems' | 'checkParents' | 'checkChildren' | 'selectable' | 'isDisabled'>) => any;
+export declare const selectSingle: ({ items, itemId, checkedStatus, }: {
     items: TreeViewItemInterface[];
     itemId: TreeViewItemInterface['itemId'];
     checkedStatus: TreeViewItemInterface['checkedStatus'];
@@ -42,12 +45,20 @@ export declare const selectSingle: ({ items, itemId, checkedStatus }: {
     parentId?: string;
     icon?: React.ReactNode;
     hasOwnTreeItems: boolean;
+    isDisabled?: boolean;
 }[];
-export declare const selectMulti: ({ items, itemId, checkedStatus, checkChildren, checkParents }: {
+export declare const toggleMulti: ({ items, itemId, checkedStatus: rawCheckedStatus, forceCheckedStatus, checkChildren, checkParents, }: {
     items: TreeViewItemInterface[];
     itemId: TreeViewItemInterface['itemId'];
     checkedStatus: TreeViewItemInterface['checkedStatus'];
-} & Pick<UseTreeViewProps, "checkParents" | "checkChildren">) => any;
-export declare const getInitialExpandedIds: ({ items, initialExpandedItems }: {
+    forceCheckedStatus?: boolean;
+} & Pick<UseTreeViewProps, "checkChildren" | "checkParents">) => any;
+export declare const toggleAllMulti: ({ items, checkedStatus, checkChildren, checkParents, }: {
+    items: TreeViewItemInterface[];
+    checkedStatus: TreeViewItemInterface['checkedStatus'];
+} & Pick<UseTreeViewProps, "checkChildren" | "checkParents">) => any;
+export declare const getInitialExpandedIds: ({ items, initialExpandedItems, }: {
     items: TreeViewItemInterface[];
 } & Pick<UseTreeViewProps, "initialExpandedItems">) => any[];
+export declare const isEqualArrays: <T>(arrayA: T[], arrayB: T[]) => boolean;
+export declare const isSelectedItemsChanged: (prevSelectedItems: TreeItemSelectedInterface[] | null, selectedItems: TreeItemSelectedInterface[]) => boolean;