react-magma-dom 5.2.0-rc.9 → 5.2.0

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

@@ -29,3 +29,11 @@ export declare const PerformanceLargeList: {
         count: number;
     };
 };
+export declare const Lots: {
+    (args: {
+        numberRows: number;
+    }): React.JSX.Element;
+    args: {
+        numberRows: number;
+    };
+};

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

@@ -75,16 +75,11 @@ export interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElemen
 }
 export declare const HiddenLabelText: import("@emotion/styled").StyledComponent<{
     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">;
+    as?: React.ElementType<any, "symbol" | "object" | "input" | "style" | "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" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "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" | "sub" | "summary" | "sup" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "noindex" | "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<HTMLSpanElement>, HTMLSpanElement>, {}>;
-export declare const HiddenInput: import("@emotion/styled").StyledComponent<{
-    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.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {}>;
-export declare const StyledFakeInput: import("@emotion/styled").StyledComponent<{
-    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">;
-} & {
+export declare const checkboxInputClassName = "magma-checkbox-input";
+export declare const HiddenInput: React.FC<React.InputHTMLAttributes<HTMLInputElement> & React.RefAttributes<HTMLInputElement>> | React.ForwardRefExoticComponent<React.InputHTMLAttributes<HTMLInputElement> & React.RefAttributes<HTMLInputElement>>;
+interface FakeInputStyleProps {
     isChecked?: boolean;
     color: string;
     disabled?: boolean;
@@ -93,6 +88,13 @@ export declare const StyledFakeInput: import("@emotion/styled").StyledComponent<
     hasError?: boolean;
     hideFocus?: boolean;
     textPosition?: CheckboxTextPosition;
-    theme?: ThemeInterface;
-}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+    theme: ThemeInterface;
+}
+export interface StyledFakeInputProps extends FakeInputStyleProps {
+    children?: React.ReactNode;
+    style?: React.CSSProperties;
+    'aria-hidden'?: React.AriaAttributes['aria-hidden'];
+}
+export declare const StyledFakeInput: React.FC<StyledFakeInputProps & React.RefAttributes<any>> | React.ForwardRefExoticComponent<StyledFakeInputProps & React.RefAttributes<any>>;
 export declare const Checkbox: React.MemoExoticComponent<React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>>;
+export {};

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

@@ -10,6 +10,10 @@ export declare enum DropdownAlignment {
     start = "start",
     end = "end"
 }
+export interface DropdownApi {
+    closeDropdownManually(event: React.SyntheticEvent): void;
+    openDropdownManually(event: React.SyntheticEvent): void;
+}
 export interface DropdownProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
      * Index of the item that will active/selected. If none is provided, no item will appear active
@@ -22,6 +26,13 @@ export interface DropdownProps extends React.HTMLAttributes<HTMLDivElement> {
      * @deprecated = true
      */
     alignment?: DropdownAlignment;
+    /**
+     * The ref object that allows Dropdown manipulation.
+     * Actions available:
+     * closeDropdownManually(event: React.SyntheticEvent): void - Closes the dropdown manually.
+     * openDropdownManually(event: React.SyntheticEvent): void - Opens the dropdown manually.
+     */
+    apiRef?: React.MutableRefObject<DropdownApi | undefined>;
     /**
      * Position of the dropdown content
      * @default DropdownDropDirection.down
@@ -77,6 +88,7 @@ interface DropdownContextInterface {
     setFloating?: (node: ReferenceType) => void;
     setReference?: (node: ReferenceType) => void;
     toggleRef?: any;
+    leftButtonRef?: React.MutableRefObject<HTMLButtonElement>;
     width?: string;
 }
 export declare const DropdownContext: React.Context<DropdownContextInterface>;

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

@@ -76,6 +76,10 @@ export declare const Performance: {
 export declare const DropdownExpandableMenuWithSorting: {
     render: (args: any) => React.JSX.Element;
 };
+export declare const ApiRef: {
+    render: any;
+    args: {};
+};
 export declare const DropdownInsidePopover: {
     render: (args: any) => React.JSX.Element;
 };

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

@@ -26,5 +26,9 @@ export interface DropdownSplitButtonProps extends ButtonStyles {
      * Function that fires when the button is clicked
      */
     onClick?: () => void;
+    /**
+     * Ref for the main action button (left side).
+     */
+    mainButtonRef?: React.Ref<HTMLButtonElement>;
 }
 export declare const DropdownSplitButton: React.ForwardRefExoticComponent<DropdownSplitButtonProps & React.RefAttributes<HTMLButtonElement>>;

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

@@ -18,6 +18,14 @@ export declare const Disabled: {
         testId: string;
     };
 };
+export declare const WithDisabledItems: {
+    render: any;
+    args: {
+        isInverse: boolean;
+        labelText: string;
+        testId: string;
+    };
+};
 export declare const WithContent: {
     render: any;
     args: {