react-magma-dom 4.7.0-next.2 → 4.7.0-next.20

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,7 @@
 import React from 'react';
 import { SelectComponents } from '../Select/components';
-import { UseComboboxGetToggleButtonPropsOptions, UseComboboxGetComboboxPropsOptions, UseComboboxGetInputPropsOptions } from 'downshift';
+import { UseComboboxGetComboboxPropsOptions, UseComboboxGetInputPropsOptions, UseComboboxGetToggleButtonPropsOptions } from 'downshift';
+import { ReferenceType } from '@floating-ui/react-dom';
 interface ComboboxInputProps<T> {
     ariaDescribedBy?: string;
     children?: React.ReactNode | React.ReactNode[];
@@ -22,6 +23,7 @@ interface ComboboxInputProps<T> {
     onInputKeyUp?: (event: any) => void;
     placeholder?: string;
     selectedItems?: React.ReactNode;
+    setReference?: (node: ReferenceType) => void;
     toggleButtonRef?: React.Ref<HTMLButtonElement>;
 }
 export declare function ComboboxInput<T>(props: ComboboxInputProps<T>): JSX.Element;

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

@@ -1,13 +1,18 @@
 import React from 'react';
 import { UseComboboxProps, UseComboboxState, UseMultipleSelectionProps } from 'downshift';
-import { SelectOptions, InternalSelectProps, InternalMultiProps } from '../Select';
-import { XOR, Omit } from '../../utils';
+import { InternalMultiProps, InternalSelectProps, SelectOptions } from '../Select';
+import { Omit, XOR } from '../../utils';
 import { LabelPosition } from '../Label';
+import { ReferenceType } from '@floating-ui/react-dom';
 export interface ComboboxProps<T extends SelectOptions> extends Omit<UseComboboxProps<T>, 'items'>, InternalSelectProps<T> {
     /**
      * Id of the element that describes the combobox input
      */
     ariaDescribedBy?: string;
+    /**
+     * Style properties for the component container element
+     */
+    containerStyle?: React.CSSProperties;
     /**
      * Default selectable options. Allows for uncontrolled component and internal creation of items. Can be an array of strings or objects
      */
@@ -17,6 +22,10 @@ export interface ComboboxProps<T extends SelectOptions> extends Omit<UseCombobox
      * @default false
      */
     disableCreateItem?: boolean;
+    /**
+     * @internal
+     */
+    floatingElementStyles?: React.CSSProperties;
     /**
      * @internal
      */
@@ -43,6 +52,13 @@ export interface ComboboxProps<T extends SelectOptions> extends Omit<UseCombobox
      * Default selectable options. Can be an array of strings or objects
      */
     items?: T[];
+    /**
+     * When false, the selected item gets validated to ensure it's in the original `items` list.
+     * When using Combobox for typeahead with a large `items` list, set this boolean to true to allow the selected item to not be part of the original `items` list.
+     * In addition, when this is true and `isLoading` is used, the loading indicator will appear on the list instead of the input
+     * @default false
+     */
+    isTypeahead?: boolean;
     /**
      * Function passed in that transforms a newly created item to whatever format your items are in
      */
@@ -83,24 +99,21 @@ export interface ComboboxProps<T extends SelectOptions> extends Omit<UseCombobox
      */
     onItemCreated?: (newItem: T) => void;
     /**
-     * Reference to the toggle button element wrapping the input in the combobox
+     * @internal
      */
-    toggleButtonRef?: React.Ref<HTMLButtonElement>;
+    setFloating?: (node: ReferenceType) => void;
     /**
      * @internal
      */
-    testId?: string;
+    setReference?: (node: ReferenceType) => void;
     /**
-     * Style properties for the component container element
+     * Reference to the toggle button element wrapping the input in the combobox
      */
-    containerStyle?: React.CSSProperties;
+    toggleButtonRef?: React.Ref<HTMLButtonElement>;
     /**
-     * When false, the selected item gets validated to ensure it's in the original `items` list.
-     * When using Combobox for typeahead with a large `items` list, set this boolean to true to allow the selected item to not be part of the original `items` list.
-     * In addition, when this is true and `isLoading` is used, the loading indicator will appear on the list instead of the input
-     * @default false
+     * @internal
      */
-    isTypeahead?: boolean;
+    testId?: string;
 }
 export interface MultiComboboxProps<T extends SelectOptions> extends UseMultipleSelectionProps<T>, Omit<ComboboxProps<T>, 'onStateChange' | 'stateReducer' | 'isMulti'>, InternalMultiProps<T> {
     /**

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

@@ -26,6 +26,10 @@ export interface DatePickerProps extends Omit<React.InputHTMLAttributes<HTMLInpu
      * @default false
      */
     isClearable?: boolean;
+    /**
+     * If true, the component will have inverse styling to better appear on a dark background
+     * @default false
+     */
     isInverse?: boolean;
     /**
      * Style properties for the label element

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

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { ReferenceType } from '@floating-ui/react-dom/dist/floating-ui.react-dom';
 export declare enum DropdownDropDirection {
     down = "down",
     left = "left",
@@ -25,6 +26,10 @@ export interface DropdownProps extends React.HTMLAttributes<HTMLDivElement> {
      * @default DropdownDropDirection.down
      */
     dropDirection?: DropdownDropDirection;
+    /**
+     * If true, the component will have inverse styling to better appear on a dark background
+     * @default false
+     */
     isInverse?: boolean;
     /**
      * Max-height of dropdown content
@@ -55,6 +60,7 @@ interface DropdownContextInterface {
     closeDropdown?: (event: React.SyntheticEvent | React.KeyboardEvent) => void;
     dropdownButtonId?: React.MutableRefObject<string>;
     dropDirection?: DropdownDropDirection;
+    floatingStyles?: React.CSSProperties;
     handleDropdownBlur?: (event: React.FocusEvent) => void;
     itemRefArray?: React.MutableRefObject<React.MutableRefObject<Element>[]>;
     isFixedWidth?: boolean;
@@ -66,6 +72,8 @@ interface DropdownContextInterface {
     registerDropdownMenuItem: (itemRefArray: React.MutableRefObject<React.MutableRefObject<Element>[]>, itemRef: React.MutableRefObject<Element>) => void;
     setActiveItemIndex?: React.Dispatch<React.SetStateAction<number>>;
     setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+    setFloating?: (node: ReferenceType) => void;
+    setReference?: (node: ReferenceType) => void;
     toggleRef?: any;
     width?: string;
 }

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

@@ -1,6 +1,7 @@
 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';
 export declare enum InputSize {
     large = "large",
     medium = "medium"
@@ -81,7 +82,15 @@ export interface InputBaseProps extends React.InputHTMLAttributes<HTMLInputEleme
      * Function to be called when the contents of input are cleared by clicking a clear button
      */
     onClear?: () => void;
+    /**
+     * If true, the component will have inverse styling to better appear on a dark background
+     * @default false
+     */
     isInverse?: boolean;
+    /**
+     * Boolean for whether this is a Password Input or not
+     */
+    isPasswordInput?: boolean;
     /**
      * For use in predictive search which moves the icon to the left
      */
@@ -107,6 +116,10 @@ export interface InputBaseProps extends React.InputHTMLAttributes<HTMLInputEleme
      * Action that will synchronize chosenDate with input value
      */
     onDateChange?: (event: any) => void;
+    /**
+     * @internal
+     */
+    setReference?: (node: ReferenceType) => void;
     /**
      * @internal
      */
@@ -120,10 +133,6 @@ export interface InputBaseProps extends React.InputHTMLAttributes<HTMLInputEleme
      * @default InputType.text
      */
     type?: InputType;
-    /**
-     * Boolean for whether this is a Password Input or not
-     */
-    isPasswordInput?: boolean;
     /**
      * String to determine width of input, must be suffixed with "px", "rem", or "%""
      * @default "auto"

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

@@ -1,18 +1,21 @@
 import React from 'react';
-import { UseSelectGetMenuPropsOptions, UseSelectGetItemPropsOptions } from 'downshift';
+import { UseSelectGetItemPropsOptions, UseSelectGetMenuPropsOptions } from 'downshift';
 import { SelectComponents } from './components';
+import { ReferenceType } from '@floating-ui/react-dom';
 interface ItemsListProps<T> {
     customComponents?: SelectComponents<T>;
+    floatingElementStyles?: React.CSSProperties;
     getItemProps: (options?: UseSelectGetItemPropsOptions<T>) => any;
     getMenuProps: (options?: UseSelectGetMenuPropsOptions) => any;
     highlightedIndex?: number;
-    isOpen?: boolean;
     isInverse?: boolean;
+    isLoading?: boolean;
+    isOpen?: boolean;
     items: T[];
     itemToString: (item: T) => string;
     maxHeight?: number | string;
     menuStyle?: React.CSSProperties;
-    isLoading?: boolean;
+    setFloating?: (node: ReferenceType) => void;
 }
 export declare function ItemsList<T>(props: ItemsListProps<T>): JSX.Element;
 export {};

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

@@ -13,8 +13,8 @@ interface SelectContainerInterface<T> {
     additionalContent?: React.ReactNode;
     children: React.ReactNode[];
     containerStyle?: React.CSSProperties;
-    errorMessage?: React.ReactNode;
     descriptionId?: string;
+    errorMessage?: React.ReactNode;
     getLabelProps: (options?: UseSelectGetLabelPropsOptions) => any;
     hasError?: boolean;
     helperMessage?: React.ReactNode;

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

@@ -1,12 +1,14 @@
 import React from 'react';
 import { SelectComponents } from '../Select/components';
+import { ReferenceType } from '@floating-ui/react-dom';
 interface SelectTriggerButtonInterface<T> {
     ariaDescribedBy?: string;
     children: React.ReactNode | React.ReactNode[];
     customComponents?: SelectComponents<T>;
-    hasError?: boolean;
     disabled?: boolean;
+    hasError?: boolean;
     isInverse?: boolean;
+    setReference?: (node: ReferenceType) => void;
     style?: React.CSSProperties;
     toggleButtonProps: any;
     tabindex?: number;

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

@@ -1,7 +1,8 @@
 import * as React from 'react';
-import { UseSelectProps, UseMultipleSelectionProps } from 'downshift';
+import { UseMultipleSelectionProps, UseSelectProps } from 'downshift';
+import { ReferenceType } from '@floating-ui/react-dom/dist/floating-ui.react-dom';
 import { SelectComponents } from './components';
-import { XOR, Omit } from '../../utils';
+import { Omit, XOR } from '../../utils';
 import { LabelPosition } from '../Label';
 export declare type SelectOptions = string | {
     value: string;
@@ -43,6 +44,10 @@ export interface InternalSelectProps<T> {
      * @default false
      */
     disabled?: boolean;
+    /**
+     * If true, the component will have inverse styling to better appear on a dark background
+     * @default false
+     */
     isInverse?: boolean;
     /**
      * If true, label text will be hidden visually, but will still be read by assistive technology
@@ -102,6 +107,10 @@ 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
      */
@@ -134,12 +143,23 @@ 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> {
     /**
      * @internal
      */
     hasError?: boolean;
+    /**
+     * @internal
+     */
     isInverse?: boolean;
     /**
      * @internal

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

@@ -10,6 +10,8 @@ export declare const StyledButton: import("@emotion/styled").StyledComponent<{
 export declare const SelectText: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: import("react").ElementType<any>;
+} & {
+    isClearable?: boolean;
 }, 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;

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

@@ -81,7 +81,7 @@ export declare function useTreeView(props: UseTreeViewProps): {
         onExpandedChange: (event: React.SyntheticEvent<Element, Event>) => void;
         selectable: TreeViewSelectable;
         selectedItems: any;
-        initialExpandedItems: string[];
+        initialExpandedItems: any[];
         treeItemRefArray: React.MutableRefObject<React.MutableRefObject<Element>[]>;
         registerTreeItem: (refArray: React.MutableRefObject<React.MutableRefObject<Element>[]>, ref: React.MutableRefObject<Element>) => void;
         initialExpandedItemsNeedUpdate: boolean;

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

@@ -48,3 +48,6 @@ export declare const selectMulti: ({ items, itemId, checkedStatus, checkChildren
     itemId: TreeViewItemInterface['itemId'];
     checkedStatus: TreeViewItemInterface['checkedStatus'];
 } & Pick<UseTreeViewProps, "checkParents" | "checkChildren">) => any;
+export declare const getInitialExpandedIds: ({ items, initialExpandedItems }: {
+    items: TreeViewItemInterface[];
+} & Pick<UseTreeViewProps, "initialExpandedItems">) => any[];