react-magma-dom 4.7.0-next.5 → 4.7.0-next.7

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

@@ -1,18 +1,18 @@
 declare const _default: import("@storybook/csf").ComponentAnnotations<import("@storybook/react/types-6-0").ReactFramework, import("@storybook/react/types-6-0").Args>;
 export default _default;
 export declare const Default: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, ({} & import(".").IconTextButtonProps) | ({
-    children?: never;
     iconPosition?: never;
+    children?: never;
 } & import(".").IconOnlyButtonProps)>;
 export declare const Inverse: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, ({} & import(".").IconTextButtonProps) | ({
-    children?: never;
     iconPosition?: never;
+    children?: never;
 } & import(".").IconOnlyButtonProps)>;
 export declare const IconOnly: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, ({} & import(".").IconTextButtonProps) | ({
-    children?: never;
     iconPosition?: never;
+    children?: never;
 } & import(".").IconOnlyButtonProps)>;
 export declare const AnimatedIcon: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, ({} & import(".").IconTextButtonProps) | ({
-    children?: never;
     iconPosition?: never;
+    children?: never;
 } & import(".").IconOnlyButtonProps)>;

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

@@ -38,13 +38,14 @@ export declare const IconPositions: {
         inputWrapperStyle?: React.CSSProperties;
         isClearable?: boolean;
         onClear?: () => void;
+        isPasswordInput?: boolean;
         isPredictive?: boolean;
         onIconClick?: () => void;
         onIconKeyDown?: (event: any) => void;
         onDateChange?: (event: any) => void;
+        setReference?: (node: import("@floating-ui/react-dom").ReferenceType) => void;
         theme?: any;
         type?: InputType;
-        isPasswordInput?: boolean;
         width?: string;
         accept?: string;
         alt?: string;
@@ -60,10 +61,10 @@ export declare const IconPositions: {
         formMethod?: string;
         formNoValidate?: boolean;
         formTarget?: string;
-        height?: string | number;
+        height?: React.ReactText;
         list?: string;
-        max?: string | number;
-        min?: string | number;
+        max?: React.ReactText;
+        min?: React.ReactText;
         minLength?: number;
         multiple?: boolean;
         name?: string;
@@ -72,7 +73,7 @@ export declare const IconPositions: {
         required?: boolean;
         size?: number;
         src?: string;
-        step?: string | number;
+        step?: React.ReactText;
         value?: string | number | readonly string[];
         onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
         defaultChecked?: boolean;
@@ -81,7 +82,7 @@ export declare const IconPositions: {
         suppressHydrationWarning?: boolean;
         accessKey?: string;
         className?: string;
-        contentEditable?: boolean | "inherit" | "true" | "false";
+        contentEditable?: boolean | "true" | "false" | "inherit";
         contextMenu?: string;
         dir?: string;
         draggable?: boolean | "true" | "false";
@@ -116,11 +117,11 @@ export declare const IconPositions: {
         results?: number;
         security?: string;
         unselectable?: "on" | "off";
-        inputMode?: "none" | "text" | "search" | "tel" | "url" | "email" | "numeric" | "decimal";
+        inputMode?: "text" | "none" | "search" | "tel" | "url" | "email" | "numeric" | "decimal";
         is?: string;
         'aria-activedescendant'?: string;
         'aria-atomic'?: boolean | "true" | "false";
-        'aria-autocomplete'?: "none" | "inline" | "list" | "both";
+        'aria-autocomplete'?: "list" | "none" | "inline" | "both";
         'aria-busy'?: boolean | "true" | "false";
         'aria-checked'?: boolean | "true" | "false" | "mixed";
         'aria-colcount'?: number;
@@ -131,12 +132,12 @@ export declare const IconPositions: {
         'aria-describedby'?: string;
         'aria-details'?: string;
         'aria-disabled'?: boolean | "true" | "false";
-        'aria-dropeffect'?: "none" | "copy" | "move" | "link" | "execute" | "popup";
+        'aria-dropeffect'?: "link" | "none" | "copy" | "execute" | "move" | "popup";
         'aria-errormessage'?: string;
         'aria-expanded'?: boolean | "true" | "false";
         'aria-flowto'?: string;
         'aria-grabbed'?: boolean | "true" | "false";
-        'aria-haspopup'?: boolean | "grid" | "dialog" | "menu" | "true" | "false" | "listbox" | "tree";
+        'aria-haspopup'?: boolean | "dialog" | "menu" | "true" | "false" | "grid" | "listbox" | "tree";
         'aria-hidden'?: boolean | "true" | "false";
         'aria-invalid'?: boolean | "true" | "false" | "grammar" | "spelling";
         'aria-keyshortcuts'?: string;
@@ -153,7 +154,7 @@ export declare const IconPositions: {
         'aria-posinset'?: number;
         'aria-pressed'?: boolean | "true" | "false" | "mixed";
         'aria-readonly'?: boolean | "true" | "false";
-        'aria-relevant'?: "all" | "text" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals";
+        'aria-relevant'?: "text" | "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals";
         'aria-required'?: boolean | "true" | "false";
         'aria-roledescription'?: string;
         'aria-rowcount'?: number;
@@ -368,13 +369,14 @@ export declare const WithChildren: {
         inputWrapperStyle?: React.CSSProperties;
         isClearable?: boolean;
         onClear?: () => void;
+        isPasswordInput?: boolean;
         isPredictive?: boolean;
         onIconClick?: () => void;
         onIconKeyDown?: (event: any) => void;
         onDateChange?: (event: any) => void;
+        setReference?: (node: import("@floating-ui/react-dom").ReferenceType) => void;
         theme?: any;
         type?: InputType;
-        isPasswordInput?: boolean;
         width?: string;
         accept?: string;
         alt?: string;
@@ -390,10 +392,10 @@ export declare const WithChildren: {
         formMethod?: string;
         formNoValidate?: boolean;
         formTarget?: string;
-        height?: string | number;
+        height?: React.ReactText;
         list?: string;
-        max?: string | number;
-        min?: string | number;
+        max?: React.ReactText;
+        min?: React.ReactText;
         minLength?: number;
         multiple?: boolean;
         name?: string;
@@ -403,7 +405,7 @@ export declare const WithChildren: {
         required?: boolean;
         size?: number;
         src?: string;
-        step?: string | number;
+        step?: React.ReactText;
         value?: string | number | readonly string[];
         onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
         defaultChecked?: boolean;
@@ -412,7 +414,7 @@ export declare const WithChildren: {
         suppressHydrationWarning?: boolean;
         accessKey?: string;
         className?: string;
-        contentEditable?: boolean | "inherit" | "true" | "false";
+        contentEditable?: boolean | "true" | "false" | "inherit";
         contextMenu?: string;
         dir?: string;
         draggable?: boolean | "true" | "false";
@@ -447,11 +449,11 @@ export declare const WithChildren: {
         results?: number;
         security?: string;
         unselectable?: "on" | "off";
-        inputMode?: "none" | "text" | "search" | "tel" | "url" | "email" | "numeric" | "decimal";
+        inputMode?: "text" | "none" | "search" | "tel" | "url" | "email" | "numeric" | "decimal";
         is?: string;
         'aria-activedescendant'?: string;
         'aria-atomic'?: boolean | "true" | "false";
-        'aria-autocomplete'?: "none" | "inline" | "list" | "both";
+        'aria-autocomplete'?: "list" | "none" | "inline" | "both";
         'aria-busy'?: boolean | "true" | "false";
         'aria-checked'?: boolean | "true" | "false" | "mixed";
         'aria-colcount'?: number;
@@ -462,12 +464,12 @@ export declare const WithChildren: {
         'aria-describedby'?: string;
         'aria-details'?: string;
         'aria-disabled'?: boolean | "true" | "false";
-        'aria-dropeffect'?: "none" | "copy" | "move" | "link" | "execute" | "popup";
+        'aria-dropeffect'?: "link" | "none" | "copy" | "execute" | "move" | "popup";
         'aria-errormessage'?: string;
         'aria-expanded'?: boolean | "true" | "false";
         'aria-flowto'?: string;
         'aria-grabbed'?: boolean | "true" | "false";
-        'aria-haspopup'?: boolean | "grid" | "dialog" | "menu" | "true" | "false" | "listbox" | "tree";
+        'aria-haspopup'?: boolean | "dialog" | "menu" | "true" | "false" | "grid" | "listbox" | "tree";
         'aria-hidden'?: boolean | "true" | "false";
         'aria-invalid'?: boolean | "true" | "false" | "grammar" | "spelling";
         'aria-keyshortcuts'?: string;
@@ -484,7 +486,7 @@ export declare const WithChildren: {
         'aria-posinset'?: number;
         'aria-pressed'?: boolean | "true" | "false" | "mixed";
         'aria-readonly'?: boolean | "true" | "false";
-        'aria-relevant'?: "all" | "text" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals";
+        'aria-relevant'?: "text" | "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals";
         'aria-required'?: boolean | "true" | "false";
         'aria-roledescription'?: string;
         'aria-rowcount'?: number;
@@ -696,13 +698,14 @@ export declare const WithTwoIcons: {
         inputWrapperStyle?: React.CSSProperties;
         isClearable?: boolean;
         onClear?: () => void;
+        isPasswordInput?: boolean;
         isPredictive?: boolean;
         onIconClick?: () => void;
         onIconKeyDown?: (event: any) => void;
         onDateChange?: (event: any) => void;
+        setReference?: (node: import("@floating-ui/react-dom").ReferenceType) => void;
         theme?: any;
         type?: InputType;
-        isPasswordInput?: boolean;
         width?: string;
         accept?: string;
         alt?: string;
@@ -718,10 +721,10 @@ export declare const WithTwoIcons: {
         formMethod?: string;
         formNoValidate?: boolean;
         formTarget?: string;
-        height?: string | number;
+        height?: React.ReactText;
         list?: string;
-        max?: string | number;
-        min?: string | number;
+        max?: React.ReactText;
+        min?: React.ReactText;
         minLength?: number;
         multiple?: boolean;
         name?: string;
@@ -731,7 +734,7 @@ export declare const WithTwoIcons: {
         required?: boolean;
         size?: number;
         src?: string;
-        step?: string | number;
+        step?: React.ReactText;
         value?: string | number | readonly string[];
         onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
         defaultChecked?: boolean;
@@ -740,7 +743,7 @@ export declare const WithTwoIcons: {
         suppressHydrationWarning?: boolean;
         accessKey?: string;
         className?: string;
-        contentEditable?: boolean | "inherit" | "true" | "false";
+        contentEditable?: boolean | "true" | "false" | "inherit";
         contextMenu?: string;
         dir?: string;
         draggable?: boolean | "true" | "false";
@@ -775,11 +778,11 @@ export declare const WithTwoIcons: {
         results?: number;
         security?: string;
         unselectable?: "on" | "off";
-        inputMode?: "none" | "text" | "search" | "tel" | "url" | "email" | "numeric" | "decimal";
+        inputMode?: "text" | "none" | "search" | "tel" | "url" | "email" | "numeric" | "decimal";
         is?: string;
         'aria-activedescendant'?: string;
         'aria-atomic'?: boolean | "true" | "false";
-        'aria-autocomplete'?: "none" | "inline" | "list" | "both";
+        'aria-autocomplete'?: "list" | "none" | "inline" | "both";
         'aria-busy'?: boolean | "true" | "false";
         'aria-checked'?: boolean | "true" | "false" | "mixed";
         'aria-colcount'?: number;
@@ -790,12 +793,12 @@ export declare const WithTwoIcons: {
         'aria-describedby'?: string;
         'aria-details'?: string;
         'aria-disabled'?: boolean | "true" | "false";
-        'aria-dropeffect'?: "none" | "copy" | "move" | "link" | "execute" | "popup";
+        'aria-dropeffect'?: "link" | "none" | "copy" | "execute" | "move" | "popup";
         'aria-errormessage'?: string;
         'aria-expanded'?: boolean | "true" | "false";
         'aria-flowto'?: string;
         'aria-grabbed'?: boolean | "true" | "false";
-        'aria-haspopup'?: boolean | "grid" | "dialog" | "menu" | "true" | "false" | "listbox" | "tree";
+        'aria-haspopup'?: boolean | "dialog" | "menu" | "true" | "false" | "grid" | "listbox" | "tree";
         'aria-hidden'?: boolean | "true" | "false";
         'aria-invalid'?: boolean | "true" | "false" | "grammar" | "spelling";
         'aria-keyshortcuts'?: string;
@@ -812,7 +815,7 @@ export declare const WithTwoIcons: {
         'aria-posinset'?: number;
         'aria-pressed'?: boolean | "true" | "false" | "mixed";
         'aria-readonly'?: boolean | "true" | "false";
-        'aria-relevant'?: "all" | "text" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals";
+        'aria-relevant'?: "text" | "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals";
         'aria-required'?: boolean | "true" | "false";
         'aria-roledescription'?: string;
         'aria-rowcount'?: number;

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/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