react-magma-dom 4.10.0-next.1 → 4.10.0-next.11

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

@@ -1,5 +1,4 @@
 import React from 'react';
-import { ReferenceType } from '@floating-ui/react-dom';
 import { UseComboboxProps, UseComboboxState, UseMultipleSelectionProps } from 'downshift';
 import { InternalMultiProps, InternalSelectProps, SelectOptions } from '../Select';
 import { Omit, XOR } from '../../utils';
@@ -14,7 +13,7 @@ export interface ComboboxProps<T extends SelectOptions> extends Omit<UseCombobox
      */
     containerStyle?: React.CSSProperties;
     /**
-     * Default selectable options. Allows for uncontrolled component and internal creation of items. Can be an array of strings or objects
+     * Default selectable options. Allows for an uncontrolled component and internal creation of items. Can be an array of strings or objects
      */
     defaultItems?: T[];
     /**
@@ -22,10 +21,6 @@ export interface ComboboxProps<T extends SelectOptions> extends Omit<UseCombobox
      * @default false
      */
     disableCreateItem?: boolean;
-    /**
-     * @internal
-     */
-    floatingElementStyles?: React.CSSProperties;
     /**
      * @internal
      */
@@ -98,14 +93,6 @@ export interface ComboboxProps<T extends SelectOptions> extends Omit<UseCombobox
      * Event that fires when a new item is created with the create item option is clicked in the item list menu
      */
     onItemCreated?: (newItem: T) => void;
-    /**
-     * @internal
-     */
-    setFloating?: (node: ReferenceType) => void;
-    /**
-     * @internal
-     */
-    setReference?: (node: ReferenceType) => void;
     /**
      * Reference to the toggle button element wrapping the input in the combobox
      */

package/dist/components/Drawer/Drawer.d.ts

@@ -27,6 +27,11 @@ export interface DrawerProps extends Omit<ModalProps, 'size'> {
      * @default DrawerPosition.top
      */
     position?: DrawerPosition;
+    /**
+     * Shows a background overlay when the drawer is open.
+     * @default true
+     */
+    showBackgroundOverlay?: boolean;
     isInverse?: boolean;
 }
 export declare const Drawer: React.ForwardRefExoticComponent<DrawerProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -23,6 +23,10 @@ export interface IconTextDropdownButtonProps extends ButtonProps {
      * @default ButtonIconPosition.right
      */
     iconPosition?: ButtonIconPosition;
+    /**
+     * Leading icon to display on the left side within the component
+     */
+    leadingIcon?: React.ReactElement<IconProps>;
     /**
      * The content of the component
      */
@@ -32,4 +36,5 @@ export declare type DropdownButtonProps = XOR<IconOnlyDropdownButtonProps, IconT
 export declare const DropdownButton: React.ForwardRefExoticComponent<({} & IconTextDropdownButtonProps & React.RefAttributes<HTMLButtonElement>) | ({
     children?: never;
     iconPosition?: never;
+    leadingIcon?: never;
 } & IconOnlyDropdownButtonProps & React.RefAttributes<HTMLButtonElement>)>;

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

@@ -21,19 +21,29 @@ export interface IconTextButtonProps extends ButtonProps {
      * Icon to display within the component
      */
     icon: React.ReactElement<IconProps>;
-    children: React.ReactChild | React.ReactChild[];
     /**
      * Position within the button for the icon to appear
      * @default ButtonIconPosition.right
      */
     iconPosition?: ButtonIconPosition;
+    /**
+     * Leading icon to display on the left side of the button
+     */
+    leadingIcon?: React.ReactElement<IconProps>;
+    /**
+     * The content of the component
+     */
+    children: React.ReactChild | React.ReactChild[];
 }
 export declare type IconButtonProps = XOR<IconOnlyButtonProps, IconTextButtonProps>;
 export interface SpanProps {
+    hasIconLeading?: boolean;
     size?: ButtonSize;
 }
+export declare function getIconSize(size: any, theme: any): any;
 export declare function instanceOfIconOnly(object: any): object is IconOnlyButtonProps;
 export declare const IconButton: React.ForwardRefExoticComponent<({} & IconTextButtonProps & React.RefAttributes<HTMLButtonElement>) | ({
     children?: never;
     iconPosition?: never;
+    leadingIcon?: never;
 } & IconOnlyButtonProps & React.RefAttributes<HTMLButtonElement>)>;

package/dist/components/Input/testUtils.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+export declare const CustomTopicsRow: ({ topicList, isRemoveButtonDisabled, shouldValidate, topicTitle, testTopic, studyMaterialsTopic, order, setTopicTitle, setTestTopic, setStudyMaterialsTopic, removeTopicRow, }: {
+    topicList: {
+        reference: string;
+        title: string;
+    }[];
+    isRemoveButtonDisabled: boolean;
+    shouldValidate?: boolean;
+    topicTitle: string;
+    testTopic?: string;
+    studyMaterialsTopic?: string;
+    order: number;
+    setTopicTitle: (title: string) => void;
+    setTestTopic: (reference: string) => void;
+    setStudyMaterialsTopic: (reference: string) => void;
+    removeTopicRow: () => void;
+}) => React.JSX.Element;

package/dist/components/Modal/Modal.d.ts

@@ -46,7 +46,7 @@ export interface ModalProps extends React.HTMLAttributes<HTMLDivElement> {
      */
     isBackgroundClickDisabled?: boolean;
     /**
-     * If true, the close button the the modal will be suppressed
+     * If true, the close button the modal will be suppressed
      * @default false
      */
     isCloseButtonHidden?: boolean;
@@ -83,6 +83,11 @@ export interface ModalProps extends React.HTMLAttributes<HTMLDivElement> {
      * @default ModalSize.medium
      */
     size?: ModalSize;
+    /**
+     * @internal
+     * @default true
+     */
+    showBackgroundOverlay?: boolean;
     /**
      * @internal
      */
@@ -91,5 +96,10 @@ export interface ModalProps extends React.HTMLAttributes<HTMLDivElement> {
      * @internal
      */
     theme?: ThemeInterface;
+    /**
+     * Shows the drawer transition animation
+     * @internal
+     */
+    hasDrawerAnimation?: boolean;
 }
 export declare const Modal: React.ForwardRefExoticComponent<ModalProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Pagination/Pagination.d.ts

@@ -92,6 +92,7 @@ export declare const NavButton: import("@emotion/styled").StyledComponent<({} &
 }) | ({
     children?: never;
     iconPosition?: never;
+    leadingIcon?: never;
 } & import("../IconButton").IconOnlyButtonProps & React.RefAttributes<HTMLButtonElement> & {
     theme?: import("@emotion/react").Theme;
 }), {}, {}>;

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

@@ -27,6 +27,7 @@ export declare function defaultComponents<T>(props: SelectComponents<T>): {
     ClearIndicator: React.FunctionComponent<({} & import("../IconButton").IconTextButtonProps) | ({
         children?: never;
         iconPosition?: never;
+        leadingIcon?: never;
     } & 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);

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

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { ReferenceType } from '@floating-ui/react-dom/dist/floating-ui.react-dom';
 import { UseMultipleSelectionProps, UseSelectProps } from 'downshift';
 import { Omit, XOR } from '../../utils';
 import { LabelPosition } from '../Label';
@@ -108,10 +107,6 @@ export interface SelectProps<T extends SelectOptions> extends UseSelectProps<T>,
      * Id of the element that describes the select trigger button
      */
     ariaDescribedBy?: string;
-    /**
-     * @internal
-     */
-    floatingElementStyles?: React.CSSProperties;
     /**
      * @internal
      */
@@ -148,14 +143,6 @@ export interface SelectProps<T extends SelectOptions> extends UseSelectProps<T>,
      * Event that will fire when a keypress is released while focused on the trigger button
      */
     onKeyUp?: (event: React.KeyboardEvent) => void;
-    /**
-     * @internal
-     */
-    setFloating?: (node: ReferenceType) => void;
-    /**
-     * @internal
-     */
-    setReference?: (node: ReferenceType) => void;
 }
 export interface MultiSelectProps<T extends SelectOptions> extends UseMultipleSelectionProps<T>, Omit<SelectProps<T>, 'onStateChange' | 'stateReducer' | 'isMulti'>, InternalMultiProps<T> {
     /**

package/dist/components/SelectionControls/InputStyles.d.ts

@@ -1,5 +1,4 @@
 export declare const DisplayInputStyles: (props: any) => import("@emotion/react").SerializedStyles;
-export declare const DisplayInputActiveStyles: import("@emotion/react").SerializedStyles;
 export declare function buildDisplayInputActiveBackground(props: any): any;
 export declare function buildDisplayInputBorderColor(props: any): any;
 export declare function buildDisplayInputFocusStyles(props: any): import("@emotion/react").SerializedStyles;

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

@@ -13,11 +13,21 @@ export interface TableProps extends React.HTMLAttributes<HTMLTableElement> {
      * @default false
      */
     hasHoverStyles?: boolean;
+    /**
+     *  If true, the table will have additional styles for table.
+     *  @default false
+     */
+    hasTablePagination?: boolean;
     /**
      * If true, the table will have square edges
      * @default false
      */
     hasSquareCorners?: boolean;
+    /**
+     * If true, the table will have outer border
+     * @default false
+     */
+    hasOutsideBorder?: boolean;
     /**
      * If true, columns will have vertical borders
      */
@@ -42,6 +52,12 @@ export interface TableProps extends React.HTMLAttributes<HTMLTableElement> {
     minWidth?: number;
     rowCount?: number;
     selectedItems?: Array<number>;
+    /**
+     * The title or caption of a table inside a <caption> HTML element that provides the table an accessible
+     * description.
+     * It can be a simple string or a React node, such as a heading element (e.g., <h1>, <h2>).
+     */
+    tableTitle?: React.ReactNode | string;
     /**
      * @internal
      */
@@ -74,6 +90,7 @@ interface TableContextInterface {
     density?: TableDensity;
     hasHoverStyles?: boolean;
     hasSquareCorners?: boolean;
+    hasTablePagination?: boolean;
     hasVerticalBorders?: boolean;
     hasZebraStripes?: boolean;
     isInverse?: boolean;
@@ -97,11 +114,20 @@ export declare const TableWrapper: import("@emotion/styled").StyledComponent<{
 } & {
     minWidth: number;
 }, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledTableTitle: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType<any>;
+} & {
+    isInverse: boolean;
+    isTitleNode: boolean;
+}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, {}>;
 export declare const StyledTable: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType<any>;
 } & {
+    hasOutsideBorder?: boolean;
     hasSquareCorners?: boolean;
+    hasTablePagination?: boolean;
     isInverse?: boolean;
     minWidth: number;
 }, React.DetailedHTMLProps<React.TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, {}>;

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

@@ -2,6 +2,10 @@ 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;
     /**
      * Index number
      * private

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

@@ -10,6 +10,7 @@ export interface TreeViewApi {
     showLess(): void;
     expandAll(): void;
     collapseAll(): void;
+    addItem(item: TreeViewItemInterface): void;
 }
 export interface UseTreeViewProps {
     /**

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'];