react-magma-dom 4.9.0-next.3 → 4.9.0-next.30

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

@@ -1,6 +1,6 @@
 import React from 'react';
-import { SelectComponents } from '../Select/components';
 import { ReferenceType } from '@floating-ui/react-dom';
+import { SelectComponents } from '../Select/components';
 interface SelectTriggerButtonInterface<T> {
     ariaDescribedBy?: string;
     children: React.ReactNode | React.ReactNode[];
@@ -13,5 +13,5 @@ interface SelectTriggerButtonInterface<T> {
     toggleButtonProps: any;
     tabindex?: number;
 }
-export declare function SelectTriggerButton<T>(props: SelectTriggerButtonInterface<T>): JSX.Element;
+export declare function SelectTriggerButton<T>(props: SelectTriggerButtonInterface<T>): React.JSX.Element;
 export {};

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

@@ -19,16 +19,16 @@ export declare type SelectComponents<T> = {
     LoadingIndicator?: React.FunctionComponent<SpinnerProps>;
     Item?: React.FunctionComponent<ItemRenderOptions<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, isDisabled, ...props }: ItemRenderOptions<T>): JSX.Element;
+export declare const DefaultClearIndicator: (props: any) => React.JSX.Element;
+export declare const DefaultDropdownIndicator: (props: any) => React.JSX.Element;
+export declare const DefaultLoadingIndicator: (props: any) => React.JSX.Element;
+export declare function DefaultItem<T>({ itemRef, itemString, isInverse, isDisabled, ...props }: ItemRenderOptions<T>): React.JSX.Element;
 export declare function defaultComponents<T>(props: SelectComponents<T>): {
     ClearIndicator: React.FunctionComponent<({} & import("../IconButton").IconTextButtonProps) | ({
         children?: never;
         iconPosition?: never;
-    } & import("../IconButton").IconOnlyButtonProps)> | ((props: any) => JSX.Element);
-    DropdownIndicator: React.FunctionComponent<Partial<IconProps>> | ((props: any) => JSX.Element);
-    LoadingIndicator: React.FunctionComponent<SpinnerProps> | ((props: any) => JSX.Element);
+    } & import("../IconButton").IconOnlyButtonProps)> | ((props: any) => React.JSX.Element);
+    DropdownIndicator: React.FunctionComponent<Partial<IconProps>> | ((props: any) => React.JSX.Element);
+    LoadingIndicator: React.FunctionComponent<SpinnerProps> | ((props: any) => React.JSX.Element);
     Item: typeof DefaultItem | React.FunctionComponent<ItemRenderOptions<T>>;
 };

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

@@ -1,6 +1,6 @@
+import * as React from 'react';
 import { ReferenceType } from '@floating-ui/react-dom/dist/floating-ui.react-dom';
 import { UseMultipleSelectionProps, UseSelectProps } from 'downshift';
-import * as React from 'react';
 import { Omit, XOR } from '../../utils';
 import { LabelPosition } from '../Label';
 import { SelectComponents } from './components';
@@ -228,4 +228,4 @@ export declare const MultipleSelectionStateChangeTypes: {
     FunctionSetActiveIndex: import("downshift").UseMultipleSelectionStateChangeTypes.FunctionSetActiveIndex;
     FunctionReset: import("downshift").UseMultipleSelectionStateChangeTypes.FunctionReset;
 };
-export declare function Select<T>(props: XORSelectProps<T>): JSX.Element;
+export declare function Select<T>(props: XORSelectProps<T>): React.JSX.Element;

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

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { HyperlinkProps } from '../Hyperlink';
 import { Omit } from '../../utils';
+import { HyperlinkProps } from '../Hyperlink';
 export declare const TARGET_ID = "reactMagmaMainContent";
-export interface SkipLinkProps extends Omit<HyperlinkProps, 'children'> {
+export interface SkipLinkProps extends Omit<HyperlinkProps, 'children' | 'to'> {
     /**
      * The text in the skip link
      * @default "Skip Navigation"
@@ -22,5 +22,10 @@ export interface SkipLinkProps extends Omit<HyperlinkProps, 'children'> {
      * @internal
      */
     testId?: string;
+    /**
+     * The `to` prop will be removed from the SkipLink component in the next major release.
+     * @deprecated = true
+     */
+    to?: string;
 }
 export declare const SkipLink: React.FunctionComponent<SkipLinkProps>;

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

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

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

@@ -9,4 +9,11 @@ export declare const BaseStyledButton: import("@emotion/styled").StyledComponent
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType<any>;
 }, React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
+export declare const ChildrenWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType<any>;
+} & {
+    isLoading: boolean;
+    testId?: string;
+}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
 export declare const StyledButton: React.ForwardRefExoticComponent<StyledButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/Table/TableCell.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { TableCellAlign } from './Table';
+import { ThemeInterface } from '../../theme/magma';
 export interface TableCellProps extends React.HTMLAttributes<HTMLTableCellElement> {
     /**
      * Text alignment of the cell content. Right alignment should be used for numeric values
@@ -17,5 +18,5 @@ export interface TableCellProps extends React.HTMLAttributes<HTMLTableCellElemen
     width?: string | number;
 }
 export declare const baseTableCellStyle: (props: any) => import("@emotion/react").SerializedStyles;
-export declare function buildCellPaddingStyle(density: any, theme: any): string;
+export declare function buildCellPaddingStyle(density: any, theme: ThemeInterface): string;
 export declare const TableCell: React.ForwardRefExoticComponent<TableCellProps & React.RefAttributes<HTMLTableCellElement>>;

package/dist/components/Table/TableRow.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { TableRowColor, TableSortDirection } from './';
 import { IndeterminateCheckboxStatus } from '../IndeterminateCheckbox';
+import { TableRowColor, TableSortDirection } from './';
 /**
  * @children required
  */

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

@@ -1,6 +1,6 @@
 import React from 'react';
-import { TabsIconPosition, TabsBorderPosition } from './Tabs';
 import { TabsOrientation, TabsTextTransform } from './shared';
+import { TabsIconPosition, TabsBorderPosition } from './Tabs';
 import { ThemeInterface } from '../../theme/magma';
 export interface TabProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     /**
@@ -20,7 +20,7 @@ export interface TabProps extends React.ButtonHTMLAttributes<HTMLButtonElement>
     /**
      * @internal
      */
-    theme?: any;
+    theme?: ThemeInterface;
 }
 export declare const StyledTabsChild: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;

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

@@ -1,7 +1,7 @@
 import React from 'react';
-import { Omit } from '../../utils';
-import { ThemeInterface } from '../../theme/magma';
 import { TabsOrientation, TabsTextTransform } from './shared';
+import { ThemeInterface } from '../../theme/magma';
+import { Omit } from '../../utils';
 export declare enum TabsAlignment {
     center = "center",
     left = "left",

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

@@ -1 +1 @@
-export * from "./Tag";
+export * from './Tag';

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { FormFieldContainerBaseProps } from '../FormFieldContainer';
 import { Omit } from '../../utils';
+import { FormFieldContainerBaseProps } from '../FormFieldContainer';
 export interface TextareaProps extends Omit<FormFieldContainerBaseProps, 'inputSize' | 'fieldId'>, React.TextareaHTMLAttributes<HTMLTextAreaElement> {
     /**
      * Style properties for the component container element

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

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { ThemeInterface } from '../../theme/magma';
 export declare enum ToggleTextPosition {
     left = "left",
     right = "right"
@@ -52,7 +53,7 @@ export interface ToggleProps extends React.InputHTMLAttributes<HTMLInputElement>
     /**
      * @internal
      */
-    theme?: any;
+    theme?: ThemeInterface;
     /**
      * Style properties for the part of the component that slides back and forth on the track
      */

package/dist/components/ToggleButton/ToggleButton.d.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { XOR } from '../../utils';
+import { IconProps } from 'react-magma-icons';
 import { ThemeInterface } from '../../theme/magma';
+import { XOR } from '../../utils';
 import { ButtonProps, ButtonSize } from '../Button';
-import { IconProps } from 'react-magma-icons';
 export interface ToggleButtonTextProps extends ButtonProps {
     /**
      * Sets a disabled state for a button.

package/dist/components/ToggleButtonGroup/ToggleButtonGroup.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
+import { ThemeInterface } from '../../theme/magma';
 import { ButtonSize } from '../Button';
 import { ButtonGroupProps } from '../ButtonGroup';
-import { ThemeInterface } from '../../theme/magma';
 /**
  * @children required
  */

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

@@ -1,5 +1,4 @@
 import * as React from 'react';
 import { UseTreeItemProps } from './useTreeItem';
-export interface TreeItemProps extends UseTreeItemProps {
-}
-export declare const TreeItem: React.ForwardRefExoticComponent<TreeItemProps & React.RefAttributes<HTMLLIElement>>;
+export declare type TreeItemProps = UseTreeItemProps;
+export declare const TreeItem: React.ForwardRefExoticComponent<UseTreeItemProps & React.RefAttributes<HTMLLIElement>>;

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

@@ -18,13 +18,11 @@ export interface TreeViewContextInterface {
     children?: React.ReactNode[];
     hasIcons: boolean;
     initialExpandedItems: Array<string>;
-    initialExpandedItemsNeedUpdate: boolean;
     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;
     selectedItems: Array<TreeItemSelectedInterface>;
-    setInitialExpandedItemsNeedUpdate: React.Dispatch<React.SetStateAction<any>>;
     treeItemRefArray?: React.MutableRefObject<React.MutableRefObject<Element>[]>;
     itemToFocus?: string;
     checkParents: boolean;
@@ -33,5 +31,6 @@ export interface TreeViewContextInterface {
     selectItem: (data: Pick<TreeViewItemInterface, 'itemId' | 'checkedStatus'>) => void;
     handleExpandedChange: (event: React.SyntheticEvent, expandedItemId: string) => void;
     expandedSet: Set<string>;
+    isTopLevelSelectable?: boolean;
 }
 export declare const TreeViewContext: React.Context<TreeViewContextInterface>;

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

@@ -46,6 +46,7 @@ export interface UseTreeItemProps extends React.HTMLAttributes<HTMLLIElement> {
     labelStyle?: React.CSSProperties;
     /**
      * @internal
+     * Whether this item is a top-level item (no parent)
      */
     topLevel?: boolean;
 }
@@ -62,7 +63,7 @@ export declare function useTreeItem(props: UseTreeItemProps, forwardedRef: any):
         ref: (node: any) => void;
         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)[];
+        treeItemChildren: (string | number | {} | React.ReactElement<any, string | ((props: any) => React.ReactElement<any, any>) | (new (props: any) => React.Component<any, any, any>)> | Iterable<React.ReactNode> | React.ReactPortal)[];
         isDisabled: boolean;
     };
     handleClick: (event: any, itemId: any) => void;

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

@@ -79,6 +79,8 @@ export interface UseTreeViewProps {
      * 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.
+     * expandAll(): void - action that allows to expand all items.
+     * collapseAll(): void - action that allows to collapse all items.
      */
     apiRef?: React.MutableRefObject<TreeViewApi | undefined>;
     /**
@@ -86,6 +88,12 @@ export interface UseTreeViewProps {
      * @default false
      */
     isDisabled?: boolean;
+    /**
+     * If false, top-level items will not be selectable in multi-select mode.
+     * Their checkboxes will be hidden, and they will only function as expandable groups.
+     * @default true
+     */
+    isTopLevelSelectable?: boolean;
 }
 export declare function useTreeView(props: UseTreeViewProps): {
     contextValue: {
@@ -98,14 +106,13 @@ export declare function useTreeView(props: UseTreeViewProps): {
         initialExpandedItems: any[];
         treeItemRefArray: React.MutableRefObject<React.MutableRefObject<Element>[]>;
         registerTreeItem: (refArray: React.MutableRefObject<React.MutableRefObject<Element>[]>, ref: React.MutableRefObject<Element>) => void;
-        initialExpandedItemsNeedUpdate: boolean;
-        setInitialExpandedItemsNeedUpdate: React.Dispatch<React.SetStateAction<boolean>>;
         checkChildren: boolean;
         checkParents: boolean;
         items: any;
         selectItem: ({ itemId, checkedStatus, }: Pick<TreeViewItemInterface, 'itemId'> & Partial<Pick<TreeViewItemInterface, 'checkedStatus'>>) => void;
-        handleExpandedChange: (event: React.SyntheticEvent, itemId: string) => void;
+        handleExpandedChange: (event: React.SyntheticEvent, itemId: string | string[]) => void;
         expandedSet: Set<string>;
+        isTopLevelSelectable: boolean;
     };
 };
 export declare type UseTreeViewReturn = ReturnType<typeof useTreeView>;

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

@@ -1,7 +1,7 @@
-import { ThemeInterface } from '../../theme/magma';
-import { UseTreeViewProps } from './useTreeView';
-import { TreeViewSelectable } from './types';
 import React from 'react';
+import { TreeViewSelectable } from './types';
+import { UseTreeViewProps } from './useTreeView';
+import { ThemeInterface } from '../../theme/magma';
 import { IndeterminateCheckboxStatus } from '../IndeterminateCheckbox';
 import { TreeItemSelectedInterface, TreeViewItemInterface } from './TreeViewContext';
 export declare enum TreeNodeType {
@@ -34,7 +34,7 @@ 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 getInitialItems: ({ children, preselectedItems: rawPreselectedItems, checkParents, checkChildren, selectable, isDisabled: isTreeViewDisabled, isTopLevelSelectable, }: Pick<UseTreeViewProps, 'children' | 'preselectedItems' | 'checkParents' | 'checkChildren' | 'selectable' | 'isDisabled' | 'isTopLevelSelectable'>) => any;
 export declare const selectSingle: ({ items, itemId, checkedStatus, }: {
     items: TreeViewItemInterface[];
     itemId: TreeViewItemInterface['itemId'];
@@ -47,16 +47,16 @@ export declare const selectSingle: ({ items, itemId, checkedStatus, }: {
     hasOwnTreeItems: boolean;
     isDisabled?: boolean;
 }[];
-export declare const toggleMulti: ({ items, itemId, checkedStatus: rawCheckedStatus, forceCheckedStatus, checkChildren, checkParents, }: {
+export declare const toggleMulti: ({ items, itemId, checkedStatus: rawCheckedStatus, forceCheckedStatus, checkChildren, checkParents, isTopLevelSelectable, }: {
     items: TreeViewItemInterface[];
     itemId: TreeViewItemInterface['itemId'];
     checkedStatus: TreeViewItemInterface['checkedStatus'];
     forceCheckedStatus?: boolean;
-} & Pick<UseTreeViewProps, "checkChildren" | "checkParents">) => any;
-export declare const toggleAllMulti: ({ items, checkedStatus, checkChildren, checkParents, }: {
+} & Pick<UseTreeViewProps, "checkChildren" | "checkParents" | "isTopLevelSelectable">) => any;
+export declare const toggleAllMulti: ({ items, checkedStatus, checkChildren, checkParents, isTopLevelSelectable, }: {
     items: TreeViewItemInterface[];
     checkedStatus: TreeViewItemInterface['checkedStatus'];
-} & Pick<UseTreeViewProps, "checkChildren" | "checkParents">) => any;
+} & Pick<UseTreeViewProps, "checkChildren" | "checkParents" | "isTopLevelSelectable">) => any;
 export declare const getInitialExpandedIds: ({ items, initialExpandedItems, }: {
     items: TreeViewItemInterface[];
 } & Pick<UseTreeViewProps, "initialExpandedItems">) => any[];

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

@@ -1,7 +1,8 @@
 import * as React from 'react';
-export interface TypographyProps<T = HTMLParagraphElement> extends React.HTMLAttributes<T> {
-    as?: string;
-    children?: any;
+import { ThemeInterface } from '../../theme/magma';
+export interface TypographyProps<T = HTMLParagraphElement> extends Omit<React.HTMLAttributes<T>, 'color'> {
+    as?: React.ElementType;
+    children?: React.ReactNode;
     color?: TypographyColor;
     contextVariant?: TypographyContextVariant;
     element?: string;
@@ -14,7 +15,7 @@ export interface TypographyProps<T = HTMLParagraphElement> extends React.HTMLAtt
      * @internal
      */
     testId?: string;
-    theme?: any;
+    theme?: ThemeInterface;
     visualStyle?: TypographyVisualStyle;
 }
 export declare enum TypographyColor {