react-magma-dom 4.10.0-next.9 → 4.10.0

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

@@ -6,7 +6,7 @@ export declare enum ToggleTextPosition {
 }
 export interface ToggleProps extends React.InputHTMLAttributes<HTMLInputElement> {
     /**
-     * If true, element is checked (i.e. selected)
+     * If true, an element is checked (i.e., selected)
      * @default false
      */
     checked?: boolean;
@@ -29,7 +29,7 @@ export interface ToggleProps extends React.InputHTMLAttributes<HTMLInputElement>
     hasError?: boolean;
     isInverse?: boolean;
     /**
-     * If true, label text will be hidden visually, but will still be read by assistive technology
+     * If true, a label text will be hidden visually, but will still be read by assistive technology
      * @default false
      */
     isTextVisuallyHidden?: boolean;

package/dist/components/Transition/Transition.d.ts

@@ -94,5 +94,10 @@ export interface TransitionProps extends HTMLMotionProps<'div'> {
      * @default false
      */
     rotate180?: boolean;
+    /**
+     * Shows the drawer transition animation
+     * @internal
+     */
+    hasDrawerAnimation?: boolean;
 }
 export declare const Transition: React.ForwardRefExoticComponent<TransitionProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -14,6 +14,10 @@ export interface TreeViewItemInterface {
     hasOwnTreeItems: boolean;
     isDisabled?: boolean;
 }
+export interface ExpandIconInterface {
+    size?: number;
+    color?: string;
+}
 export interface TreeViewContextInterface {
     children?: React.ReactNode[];
     hasIcons: boolean;
@@ -32,5 +36,6 @@ export interface TreeViewContextInterface {
     handleExpandedChange: (event: React.SyntheticEvent, expandedItemId: string) => void;
     expandedSet: Set<string>;
     isTopLevelSelectable?: boolean;
+    expandIconStyles?: ExpandIconInterface;
 }
 export declare const TreeViewContext: React.Context<TreeViewContextInterface>;

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

@@ -6,31 +6,45 @@ export interface UseTreeItemProps extends React.HTMLAttributes<HTMLLIElement> {
      * Enables additional content within the TreeItem.
      */
     additionalContent?: React.ReactNode;
+    /**
+     * Tree item hover color
+     * @default transparent
+     */
+    hoverColor?: string;
+    /**
+     * Icon for the tree item
+     */
+    icon?: React.ReactElement<IconProps>;
+    /**
+     * If true, element is disabled
+     * @default false
+     */
+    isDisabled?: boolean;
     /**
      * Index number
      * private
      */
     index?: number;
     /**
-     * Item name
+     * @internal
      */
-    label: React.ReactNode;
+    itemDepth?: number;
     /**
      * Item id
      */
     itemId: string;
     /**
-     * @internal
+     * Item name
      */
-    testId?: string;
+    label: React.ReactNode;
     /**
-     * Action that fires when the item is clicked
+     * Style properties for the tree item label
      */
-    onClick?: () => void;
+    labelStyle?: React.CSSProperties;
     /**
-     * Icon for the tree item
+     * Action that fires when the item is clicked
      */
-    icon?: React.ReactElement<IconProps>;
+    onClick?: () => void;
     /**
      * @internal
      */
@@ -38,21 +52,16 @@ export interface UseTreeItemProps extends React.HTMLAttributes<HTMLLIElement> {
     /**
      * @internal
      */
-    itemDepth?: number;
-    /**
-     * If true, element is disabled
-     * @default false
-     */
-    isDisabled?: boolean;
-    /**
-     * Style properties for the tree item label
-     */
-    labelStyle?: React.CSSProperties;
+    testId?: string;
     /**
      * @internal
      * Whether this item is a top-level item (no parent)
      */
     topLevel?: boolean;
+    /**
+     * Style properties for the tree item
+     */
+    treeItemStyles?: React.CSSProperties;
 }
 export declare const checkedStatusToBoolean: (status: IndeterminateCheckboxStatus) => boolean;
 export declare function useTreeItem(props: UseTreeItemProps, forwardedRef: any): {

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

@@ -13,6 +13,18 @@ export interface TreeViewApi {
     addItem(item: TreeViewItemInterface): void;
 }
 export interface UseTreeViewProps {
+    /**
+     * 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.
+     * expandAll(): void - action that allows to expand all items.
+     * collapseAll(): void - action that allows to collapse all items.
+     */
+    apiRef?: React.MutableRefObject<TreeViewApi | undefined>;
     /**
      * Text for aria-label attribute for the tree.
      * If there is no visible name for the element you can reference, use aria-label to provide the user with a recognizable accessible name.
@@ -25,6 +37,29 @@ export interface UseTreeViewProps {
      * It's required to use either `ariaLabel` OR `ariaLabelledBy`.
      */
     ariaLabelledBy?: string;
+    /**
+     * Only affects if selectable mode is TreeViewSelectable.multi.
+     * Determines if the parent checkbox will get selected when the user selects all its children checkboxes.
+     * When checkParents is enabled, the TreeView displays the indeterminate state of the parent checkboxes too.
+     * @default true
+     */
+    checkParents?: boolean;
+    /**
+     * Only affects if selectable mode is TreeViewSelectable.multi.
+     * Determines if the child checkboxes get selected when the user selects parent checkbox.
+     * @default true
+     */
+    checkChildren?: boolean;
+    children?: React.ReactNode[] | React.ReactNode;
+    /**
+     * Expand icon styles.
+     */
+    expandIconStyles?: ExpandIconStylesProps;
+    /**
+     * If true, every item is disabled
+     * @default false
+     */
+    isDisabled?: boolean;
     /**
      * Array list of itemIds of items that should be expanded by default.
      * For all items expanded, provide an array with all the indexes
@@ -33,19 +68,11 @@ export interface UseTreeViewProps {
     initialExpandedItems?: Array<string>;
     isInverse?: boolean;
     /**
-     * Array list of itemIds of items that should be selected when the component renders
-     * * @default [] (no items selected)
-     */
-    preselectedItems?: Array<TreeItemSelectedInterface>;
-    /**
-     * How many items can be selected in the tree view: single, multi, off
-     * @default TreeViewSelectable.single
-     */
-    selectable?: TreeViewSelectable;
-    /**
-     * @internal
+     * 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
      */
-    testId?: string;
+    isTopLevelSelectable?: boolean;
     /**
      * Action that fires when an item is expanded or collapsed
      * Return an array of itemIds of items that are expanded
@@ -59,42 +86,30 @@ export interface UseTreeViewProps {
      */
     onSelectedItemChange?: (selectedItems: Array<TreeItemSelectedInterface>) => void;
     /**
-     * Only affects if selectable mode is TreeViewSelectable.multi.
-     * Determines if the parent checkbox will get selected when the user selects all its children checkboxes.
-     * When checkParents is enabled, the TreeView displays the indeterminate state of the parent checkboxes too.
-     * @default true
+     * Array list of itemIds of items that should be selected when the component renders
+     * * @default [] (no items selected)
      */
-    checkParents?: boolean;
+    preselectedItems?: Array<TreeItemSelectedInterface>;
     /**
-     * Only affects if selectable mode is TreeViewSelectable.multi.
-     * Determines if the child checkboxes get selected when the user selects parent checkbox.
-     * @default true
+     * How many items can be selected in the tree view: single, multi, off
+     * @default TreeViewSelectable.single
      */
-    checkChildren?: boolean;
-    children?: React.ReactNode[] | React.ReactNode;
+    selectable?: TreeViewSelectable;
     /**
-     * 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.
-     * expandAll(): void - action that allows to expand all items.
-     * collapseAll(): void - action that allows to collapse all items.
+     * @internal
      */
-    apiRef?: React.MutableRefObject<TreeViewApi | undefined>;
+    testId?: string;
+}
+interface ExpandIconStylesProps {
     /**
-     * If true, every item is disabled
-     * @default false
+     * Size for the expand/collapse icon.
+     * @default 24
      */
-    isDisabled?: boolean;
+    size?: number;
     /**
-     * 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
+     * Color for the expand/collapse icon.
      */
-    isTopLevelSelectable?: boolean;
+    color?: string;
 }
 export declare function useTreeView(props: UseTreeViewProps): {
     contextValue: {
@@ -113,6 +128,7 @@ export declare function useTreeView(props: UseTreeViewProps): {
         selectItem: ({ itemId, checkedStatus, }: Pick<TreeViewItemInterface, 'itemId'> & Partial<Pick<TreeViewItemInterface, 'checkedStatus'>>) => void;
         handleExpandedChange: (event: React.SyntheticEvent, itemId: string | string[]) => void;
         expandedSet: Set<string>;
+        expandIconStyles: ExpandIconStylesProps;
         isTopLevelSelectable: boolean;
     };
 };