react-magma-dom 5.0.1-rc.2 → 5.1.0-rc.100

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

@@ -1,10 +1,8 @@
 import React from 'react';
-declare const _default: import("storybook/internal/csf").ComponentAnnotations<import("@storybook/react/dist/types-5617c98e").R, import("storybook/internal/csf").Args>;
+declare const _default: any;
 export default _default;
 export declare const Default: {
-    render: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react/dist/types-5617c98e").R, ({
-        trailingIcon?: never;
-    } & import(".").IconOnlyAIButtonProps) | ({} & import(".").TextAIButtonProps)>;
+    render: any;
     args: {
         isInverse: boolean;
         isFullWidth: boolean;

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

@@ -1,15 +1,14 @@
 import React from 'react';
-import { AccordionProps } from '.';
-declare const _default: import("storybook/internal/csf").ComponentAnnotations<import("@storybook/react/dist/types-5617c98e").R, import("storybook/internal/csf").Args>;
+declare const _default: any;
 export default _default;
 export declare const Default: {
-    render: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react/dist/types-5617c98e").R, AccordionProps>;
+    render: any;
     args: {
         defaultIndex: number[];
     };
 };
 export declare const NoMulti: {
-    render: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react/dist/types-5617c98e").R, AccordionProps>;
+    render: any;
     args: {
         defaultIndex: number;
         isMulti: boolean;
@@ -33,7 +32,7 @@ export declare const ExpandCollapseAll: {
     render: (args: any) => React.JSX.Element;
 };
 export declare const Inverse: {
-    render: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react/dist/types-5617c98e").R, AccordionProps>;
+    render: any;
     args: {
         defaultIndex: number[];
         isInverse: boolean;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-declare const _default: import("storybook/internal/csf").ComponentAnnotations<import("@storybook/react/dist/types-5617c98e").R, import("storybook/internal/csf").Args>;
+declare const _default: any;
 export default _default;
 export declare const Default: () => React.JSX.Element;
 export declare const Inverse: () => React.JSX.Element;

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

@@ -19,6 +19,10 @@ export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
      * @default false
      */
     isDismissible?: boolean;
+    /**
+     * Reference to the dismiss button element
+     */
+    dismissibleButtonRef?: React.Ref<HTMLButtonElement>;
     isInverse?: boolean;
     /**
      * Action that fires when the close button is clicked (required when isDismissible is true)

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

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { IconProps } from 'react-magma-icons';
+import { I18nInterface } from '../..';
 export declare const VARIANT_ICON: {
     [name: string]: React.FunctionComponent<IconProps>;
 };
@@ -18,6 +19,7 @@ export interface AlertBaseProps extends React.HTMLAttributes<HTMLDivElement> {
     isExiting?: boolean;
     isDismissed?: boolean;
     isDismissible?: boolean;
+    dismissibleButtonRef?: React.Ref<HTMLButtonElement>;
     isInverse?: boolean;
     isPaused?: boolean;
     isToast?: boolean;
@@ -39,4 +41,5 @@ export declare const AdditionalContentWrapper: import("@emotion/styled").StyledC
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType<any, "symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "center" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "search" | "slot" | "script" | "section" | "select" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "set" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view">;
 }, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare function getAriaLabelIcon(variant: string, i18n: I18nInterface): string;
 export declare const AlertBase: React.ForwardRefExoticComponent<AlertBaseProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -1,4 +1,4 @@
 import React from 'react';
-declare const _default: import("storybook/internal/csf").ComponentAnnotations<import("@storybook/react/dist/types-5617c98e").R, import("storybook/internal/csf").Args>;
+declare const _default: any;
 export default _default;
 export declare const Default: () => React.JSX.Element;

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

@@ -1,9 +1,8 @@
 import React from 'react';
-import { AppBarProps } from './index';
-declare const _default: import("storybook/internal/csf").ComponentAnnotations<import("@storybook/react/dist/types-5617c98e").R, import("storybook/internal/csf").Args>;
+declare const _default: any;
 export default _default;
 export declare const Default: {
-    render: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react/dist/types-5617c98e").R, AppBarProps>;
+    render: any;
     args: {
         children: string;
         isCompact: boolean;
@@ -11,7 +10,7 @@ export declare const Default: {
     };
 };
 export declare const Tabs: {
-    render: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react/dist/types-5617c98e").R, AppBarProps>;
+    render: any;
     args: {
         children: any;
         isCompact: boolean;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-declare const _default: import("storybook/internal/csf").ComponentAnnotations<import("@storybook/react/dist/types-5617c98e").R, import("storybook/internal/csf").Args>;
+declare const _default: any;
 export default _default;
 export declare const Default: () => React.JSX.Element;
 export declare const Inverse: () => React.JSX.Element;

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

@@ -1,13 +1,12 @@
 import React from 'react';
-import { BannerProps } from '.';
-declare const _default: import("storybook/internal/csf").ComponentAnnotations<import("@storybook/react/dist/types-5617c98e").R, import("storybook/internal/csf").Args>;
+declare const _default: any;
 export default _default;
 export declare const Default: {
-    render: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react/dist/types-5617c98e").R, BannerProps>;
+    render: any;
     args: {};
 };
 export declare const Inverse: {
-    render: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react/dist/types-5617c98e").R, BannerProps>;
+    render: any;
     args: {
         isInverse: boolean;
     };

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

@@ -22,6 +22,10 @@ export interface BannerProps extends AlertProps {
      * @default false
      */
     isDismissible?: boolean;
+    /**
+     * Reference to the dismiss button element
+     */
+    dismissibleButtonRef?: React.Ref<HTMLButtonElement>;
     isInverse?: boolean;
 }
 export declare const Banner: React.ForwardRefExoticComponent<BannerProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -1,15 +1,14 @@
 import React from 'react';
-import { BlockQuoteItemProps } from '.';
-declare const _default: import("storybook/internal/csf").ComponentAnnotations<import("@storybook/react/dist/types-5617c98e").R, import("storybook/internal/csf").Args>;
+declare const _default: any;
 export default _default;
 export declare const Default: {
-    render: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react/dist/types-5617c98e").R, BlockQuoteItemProps>;
+    render: any;
     args: {
         isInverse: boolean;
     };
 };
 export declare const Inverse: {
-    render: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react/dist/types-5617c98e").R, BlockQuoteItemProps>;
+    render: any;
     args: {
         isInverse: boolean;
     };

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

@@ -1,15 +1,14 @@
 import React from 'react';
-import { BreadcrumbProps } from '.';
-declare const _default: import("storybook/internal/csf").ComponentAnnotations<import("@storybook/react/dist/types-5617c98e").R, import("storybook/internal/csf").Args>;
+declare const _default: any;
 export default _default;
 export declare const Default: {
-    render: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react/dist/types-5617c98e").R, BreadcrumbProps>;
+    render: any;
     args: {
         isInverse: boolean;
     };
 };
 export declare const Inverse: {
-    render: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react/dist/types-5617c98e").R, BreadcrumbProps>;
+    render: any;
     args: {
         isInverse: boolean;
     };

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

@@ -1,4 +1,4 @@
 import React from 'react';
-declare const _default: import("storybook/internal/csf").ComponentAnnotations<import("@storybook/react/dist/types-5617c98e").R, import("storybook/internal/csf").Args>;
+declare const _default: any;
 export default _default;
 export declare const Default: () => React.JSX.Element;

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

@@ -1,9 +1,8 @@
 import React from 'react';
-import { ButtonProps } from '.';
-declare const _default: import("storybook/internal/csf").ComponentAnnotations<import("@storybook/react/dist/types-5617c98e").R, import("storybook/internal/csf").Args>;
+declare const _default: any;
 export default _default;
 export declare const Default: {
-    render: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react/dist/types-5617c98e").R, ButtonProps>;
+    render: any;
     args: {
         isInverse: boolean;
         isFullWidth: boolean;
@@ -11,7 +10,7 @@ export declare const Default: {
     };
 };
 export declare const Disabled: {
-    render: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react/dist/types-5617c98e").R, ButtonProps>;
+    render: any;
     args: {
         isInverse: boolean;
         isFullWidth: boolean;
@@ -19,7 +18,7 @@ export declare const Disabled: {
     };
 };
 export declare const Inverse: {
-    render: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react/dist/types-5617c98e").R, ButtonProps>;
+    render: any;
     args: {
         isInverse: boolean;
         isFullWidth: boolean;
@@ -28,7 +27,7 @@ export declare const Inverse: {
     decorators: ((Story: any) => React.JSX.Element)[];
 };
 export declare const InverseDisabled: {
-    render: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react/dist/types-5617c98e").R, ButtonProps>;
+    render: any;
     args: {
         disabled: boolean;
         isInverse: boolean;

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

@@ -1,9 +1,9 @@
 import React from 'react';
-import { ButtonGroupOrientation, ButtonGroupAlignment, ButtonGroupProps } from '.';
-declare const _default: import("storybook/internal/csf").ComponentAnnotations<import("@storybook/react/dist/types-5617c98e").R, import("storybook/internal/csf").Args>;
+import { ButtonGroupOrientation, ButtonGroupAlignment } from '.';
+declare const _default: any;
 export default _default;
 export declare const Default: {
-    render: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react/dist/types-5617c98e").R, ButtonGroupProps>;
+    render: any;
     args: {
         orientation: ButtonGroupOrientation;
         noSpace: boolean;

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

@@ -12,7 +12,8 @@ export declare enum ButtonGroupOrientation {
     horizontal = "horizontal",
     vertical = "vertical"
 }
-export interface ButtonGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+declare type ButtonGroupElement = HTMLDivElement | HTMLUListElement;
+export interface ButtonGroupProps extends React.HTMLAttributes<ButtonGroupElement> {
     /**
      * @children required
      */
@@ -61,6 +62,11 @@ export interface ButtonGroupProps extends React.HTMLAttributes<HTMLDivElement> {
      * @internal
      */
     theme?: ThemeInterface;
+    /**
+     * Renders ButtonGroup as a `<ul>` with children wrapped in `<li>`.
+     * @default false
+     */
+    isList?: boolean;
 }
 export interface ButtonGroupContextInterface {
     variant?: ButtonVariant;
@@ -70,4 +76,5 @@ export interface ButtonGroupContextInterface {
     isInverse?: boolean;
 }
 export declare const ButtonGroupContext: React.Context<ButtonGroupContextInterface>;
-export declare const ButtonGroup: React.ForwardRefExoticComponent<ButtonGroupProps & React.RefAttributes<HTMLDivElement>>;
+export declare const ButtonGroup: React.ForwardRefExoticComponent<ButtonGroupProps & React.RefAttributes<ButtonGroupElement>>;
+export {};

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

@@ -1,5 +1,5 @@
 import React from 'react';
-declare const _default: import("storybook/internal/csf").ComponentAnnotations<import("@storybook/react/dist/types-5617c98e").R, import("storybook/internal/csf").Args>;
+declare const _default: any;
 export default _default;
 export declare const Default: {
     render: (args: any) => React.JSX.Element;

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

@@ -1,9 +1,8 @@
 import React from 'react';
-import { CharacterCounterProps } from '.';
-declare const _default: import("storybook/internal/csf").ComponentAnnotations<import("@storybook/react/dist/types-5617c98e").R, import("storybook/internal/csf").Args>;
+declare const _default: any;
 export default _default;
 export declare const Default: {
-    render: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react/dist/types-5617c98e").R, CharacterCounterProps>;
+    render: any;
     args: {
         isInverse: boolean;
     };

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

@@ -1,5 +1,31 @@
 import React from 'react';
-declare const _default: import("storybook/internal/csf").ComponentAnnotations<import("@storybook/react/dist/types-5617c98e").R, import("storybook/internal/csf").Args>;
+declare const _default: any;
 export default _default;
 export declare const Default: () => React.JSX.Element;
 export declare const Inverse: () => React.JSX.Element;
+/**
+ * Performance reproduction story.
+ *
+ * Renders N controlled Checkbox components and lets you flip their `checked`
+ * prop in bulk via the buttons. Measures time from setState to the next paint
+ * (via two requestAnimationFrame ticks) so we can see how heavy a mass update
+ * is for a large list.
+ */
+export declare const PerformanceLargeList: {
+    (args: {
+        count: number;
+    }): React.JSX.Element;
+    argTypes: {
+        count: {
+            control: {
+                type: string;
+                min: number;
+                max: number;
+                step: number;
+            };
+        };
+    };
+    args: {
+        count: number;
+    };
+};

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

@@ -68,6 +68,10 @@ export interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElemen
      * @internal
      */
     hideFocus?: boolean;
+    /**
+     * Text for aria-label attribute for the checkbox.
+     */
+    ariaLabel?: string;
 }
 export declare const HiddenLabelText: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
@@ -91,4 +95,4 @@ export declare const StyledFakeInput: import("@emotion/styled").StyledComponent<
     textPosition?: CheckboxTextPosition;
     theme?: ThemeInterface;
 }, React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
-export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
+export declare const Checkbox: React.MemoExoticComponent<React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>>;

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

@@ -2,15 +2,20 @@ import React from 'react';
 import { LabelPosition } from '../Label';
 import { SelectOptions } from '../Select';
 import { MultiComboboxProps } from '.';
-declare const _default: import("storybook/internal/csf").ComponentAnnotations<import("@storybook/react/dist/types-5617c98e").R, import("storybook/internal/csf").Args>;
+declare const _default: any;
 export default _default;
 export declare const Default: {
     args: {
         labelText: string;
-        defaultItems: {
+        defaultItems: ({
             label: string;
             value: string;
-        }[];
+            disabled?: undefined;
+        } | {
+            label: string;
+            value: string;
+            disabled: string;
+        })[];
         disableCreateItem: boolean;
         errorMessage: string;
         helperMessage: string;
@@ -36,10 +41,15 @@ export declare const ErrorMessage: {
     args: {
         errorMessage: string;
         labelText: string;
-        defaultItems: {
+        defaultItems: ({
+            label: string;
+            value: string;
+            disabled?: undefined;
+        } | {
             label: string;
             value: string;
-        }[];
+            disabled: string;
+        })[];
         disableCreateItem: boolean;
         helperMessage: string;
         placeholder: string;
@@ -53,10 +63,15 @@ export declare const HelperMessage: {
     args: {
         helperMessage: string;
         labelText: string;
-        defaultItems: {
+        defaultItems: ({
             label: string;
             value: string;
-        }[];
+            disabled?: undefined;
+        } | {
+            label: string;
+            value: string;
+            disabled: string;
+        })[];
         disableCreateItem: boolean;
         errorMessage: string;
         placeholder: string;
@@ -71,10 +86,15 @@ export declare const Inverse: {
         isInverse: boolean;
         disabled: boolean;
         labelText: string;
-        defaultItems: {
+        defaultItems: ({
+            label: string;
+            value: string;
+            disabled?: undefined;
+        } | {
             label: string;
             value: string;
-        }[];
+            disabled: string;
+        })[];
         disableCreateItem: boolean;
         errorMessage: string;
         helperMessage: string;
@@ -90,10 +110,15 @@ export declare const LeftAlignedLabel: {
         labelPosition: LabelPosition;
         errorMessage: string;
         labelText: string;
-        defaultItems: {
+        defaultItems: ({
+            label: string;
+            value: string;
+            disabled?: undefined;
+        } | {
             label: string;
             value: string;
-        }[];
+            disabled: string;
+        })[];
         disableCreateItem: boolean;
         helperMessage: string;
         placeholder: string;
@@ -108,10 +133,15 @@ export declare const LeftAlignedLabelWithContainer: {
         labelPosition: LabelPosition;
         errorMessage: string;
         labelText: string;
-        defaultItems: {
+        defaultItems: ({
             label: string;
             value: string;
-        }[];
+            disabled?: undefined;
+        } | {
+            label: string;
+            value: string;
+            disabled: string;
+        })[];
         disableCreateItem: boolean;
         helperMessage: string;
         placeholder: string;
@@ -140,3 +170,9 @@ export declare const FullPageExample: {
         };
     };
 };
+export declare const ControlledSelectedItem: {
+    render: () => React.JSX.Element;
+};
+export declare const ControlledItems: {
+    render: () => React.JSX.Element;
+};

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

@@ -23,6 +23,7 @@ interface ComboboxInputProps<T> {
     onInputKeyUp?: (event: any) => void;
     placeholder?: string;
     selectedItems?: React.ReactNode;
+    selectedItem?: React.ReactNode;
     setReference?: (node: ReferenceType) => void;
     toggleButtonRef?: React.Ref<HTMLButtonElement>;
 }

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

@@ -1,23 +1,22 @@
 import React from 'react';
-import { ContainerProps } from './';
-declare const _default: import("storybook/internal/csf").ComponentAnnotations<import("@storybook/react/dist/types-5617c98e").R, import("storybook/internal/csf").Args>;
+declare const _default: any;
 export default _default;
 export declare const Default: {
-    render: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react/dist/types-5617c98e").R, ContainerProps>;
+    render: any;
     args: {
         children: React.JSX.Element;
         isInverse: boolean;
     };
 };
 export declare const Inverse: {
-    render: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react/dist/types-5617c98e").R, ContainerProps>;
+    render: any;
     args: {
         isInverse: boolean;
         children: React.JSX.Element;
     };
 };
 export declare const MaxWidth: {
-    render: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react/dist/types-5617c98e").R, ContainerProps>;
+    render: any;
     args: {
         maxWidth: string;
         children: React.JSX.Element;
@@ -25,7 +24,7 @@ export declare const MaxWidth: {
     };
 };
 export declare const Gutters: {
-    render: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react/dist/types-5617c98e").R, ContainerProps>;
+    render: any;
     args: {
         gutterWidth: number;
         children: React.JSX.Element;