react-magma-dom 4.10.0-next.3 → 4.10.0-next.31

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

@@ -35,6 +35,11 @@ export interface BaseTablePaginationProps extends React.HTMLAttributes<HTMLDivEl
      * @default true
      */
     hasSquareCorners?: boolean;
+    /**
+     * If true, the table paginator will have outer border
+     * @default false
+     */
+    hasOutsideBorder?: boolean;
 }
 export interface ControlledPageProps {
     /**

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

@@ -25,7 +25,7 @@ export interface TableRowProps extends React.HTMLAttributes<HTMLTableRowElement>
     onTableRowSelect?: (event: React.ChangeEvent<HTMLInputElement>) => void;
     rowIndex?: number;
     /**
-     * Unique name to be used to identify row for screenreaders
+     * Unique name to be used to identify row for screen readers
      */
     rowName?: string;
     /**

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import { TabProps } from './Tab';
+/**
+ * CustomTab allows full customization of the tab content while preserving tab behavior.
+ * You can pass any children (e.g., a Button) and all tab context/props will be handled.
+ */
+export declare const CustomTab: React.ForwardRefExoticComponent<TabProps & React.RefAttributes<HTMLButtonElement>>;

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

@@ -8,6 +8,11 @@ export interface TabProps extends React.ButtonHTMLAttributes<HTMLButtonElement>
      */
     icon?: React.ReactElement<any> | React.ReactElement<any>[];
     isInverse?: boolean;
+    /**
+     * If true, the tab will have no styles and will render the children directly.
+     * @internal
+     */
+    unstyled?: boolean;
     /**
      * Determines whether the tab appears in all-caps
      * @default TabsTextTransform.uppercase
@@ -33,6 +38,7 @@ export declare const StyledTabsChild: import("@emotion/styled").StyledComponent<
     isInverse?: boolean;
     orientation: TabsOrientation;
     theme: ThemeInterface;
+    unstyled?: boolean;
 }, React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, {}>;
 export declare const TabStyles: (props: any) => import("@emotion/react").SerializedStyles;
 export declare const StyledIcon: import("@emotion/styled").StyledComponent<{

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/TreeItem.d.ts

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

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

@@ -2,31 +2,49 @@ import * as React from 'react';
 import { IconProps } from 'react-magma-icons';
 import { IndeterminateCheckboxStatus } from '../IndeterminateCheckbox';
 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
      */
@@ -34,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

@@ -10,8 +10,21 @@ export interface TreeViewApi {
     showLess(): void;
     expandAll(): void;
     collapseAll(): void;
+    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.
@@ -24,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
@@ -32,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
@@ -58,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: {
@@ -112,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;
     };
 };

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

@@ -34,7 +34,9 @@ export declare const getChildrenIds: ({ items, itemId, }: {
     items: TreeViewItemInterface[];
     itemId: TreeViewItemInterface['itemId'];
 }) => 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 getInitialItems: ({ children, preselectedItems: rawPreselectedItems, checkParents, checkChildren, selectable, isDisabled: isTreeViewDisabled, isTopLevelSelectable, items, }: Pick<UseTreeViewProps, "isDisabled" | "checkChildren" | "selectable" | "preselectedItems" | "checkParents" | "children" | "isTopLevelSelectable"> & {
+    items?: TreeViewItemInterface[];
+}) => any;
 export declare const selectSingle: ({ items, itemId, checkedStatus, }: {
     items: TreeViewItemInterface[];
     itemId: TreeViewItemInterface['itemId'];