react-magma-dom 4.14.1-next.0 → 5.0.0

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

@@ -0,0 +1,31 @@
+import React from 'react';
+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

@@ -75,15 +75,15 @@ export interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElemen
 }
 export declare const HiddenLabelText: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
-    as?: React.ElementType<any>;
+    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<HTMLSpanElement>, HTMLSpanElement>, {}>;
 export declare const HiddenInput: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
-    as?: React.ElementType<any>;
+    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>;
+    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">;
 } & {
     isChecked?: boolean;
     color: string;

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

@@ -0,0 +1,178 @@
+import React from 'react';
+import { LabelPosition } from '../Label';
+import { SelectOptions } from '../Select';
+import { MultiComboboxProps } from '.';
+declare const _default: any;
+export default _default;
+export declare const Default: {
+    args: {
+        labelText: string;
+        defaultItems: ({
+            label: string;
+            value: string;
+            disabled?: undefined;
+        } | {
+            label: string;
+            value: string;
+            disabled: string;
+        })[];
+        disableCreateItem: boolean;
+        errorMessage: string;
+        helperMessage: string;
+        placeholder: string;
+        isClearable: boolean;
+        isMulti: boolean;
+        isLoading: boolean;
+        disabled: boolean;
+    };
+};
+export declare const Multi: {
+    render: (props: MultiComboboxProps<SelectOptions>) => React.JSX.Element;
+    args: {
+        labelText: string;
+        isMulti: boolean;
+        isClearable: boolean;
+        errorMessage: string;
+        hasPersistentMenu: boolean;
+        placeholder: string;
+    };
+};
+export declare const ErrorMessage: {
+    args: {
+        errorMessage: string;
+        labelText: string;
+        defaultItems: ({
+            label: string;
+            value: string;
+            disabled?: undefined;
+        } | {
+            label: string;
+            value: string;
+            disabled: string;
+        })[];
+        disableCreateItem: boolean;
+        helperMessage: string;
+        placeholder: string;
+        isClearable: boolean;
+        isMulti: boolean;
+        isLoading: boolean;
+        disabled: boolean;
+    };
+};
+export declare const HelperMessage: {
+    args: {
+        helperMessage: string;
+        labelText: string;
+        defaultItems: ({
+            label: string;
+            value: string;
+            disabled?: undefined;
+        } | {
+            label: string;
+            value: string;
+            disabled: string;
+        })[];
+        disableCreateItem: boolean;
+        errorMessage: string;
+        placeholder: string;
+        isClearable: boolean;
+        isMulti: boolean;
+        isLoading: boolean;
+        disabled: boolean;
+    };
+};
+export declare const Inverse: {
+    args: {
+        isInverse: boolean;
+        disabled: boolean;
+        labelText: string;
+        defaultItems: ({
+            label: string;
+            value: string;
+            disabled?: undefined;
+        } | {
+            label: string;
+            value: string;
+            disabled: string;
+        })[];
+        disableCreateItem: boolean;
+        errorMessage: string;
+        helperMessage: string;
+        placeholder: string;
+        isClearable: boolean;
+        isMulti: boolean;
+        isLoading: boolean;
+    };
+    decorators: ((Story: any) => React.JSX.Element)[];
+};
+export declare const LeftAlignedLabel: {
+    args: {
+        labelPosition: LabelPosition;
+        errorMessage: string;
+        labelText: string;
+        defaultItems: ({
+            label: string;
+            value: string;
+            disabled?: undefined;
+        } | {
+            label: string;
+            value: string;
+            disabled: string;
+        })[];
+        disableCreateItem: boolean;
+        helperMessage: string;
+        placeholder: string;
+        isClearable: boolean;
+        isMulti: boolean;
+        isLoading: boolean;
+        disabled: boolean;
+    };
+};
+export declare const LeftAlignedLabelWithContainer: {
+    args: {
+        labelPosition: LabelPosition;
+        errorMessage: string;
+        labelText: string;
+        defaultItems: ({
+            label: string;
+            value: string;
+            disabled?: undefined;
+        } | {
+            label: string;
+            value: string;
+            disabled: string;
+        })[];
+        disableCreateItem: boolean;
+        helperMessage: string;
+        placeholder: string;
+        isClearable: boolean;
+        isMulti: boolean;
+        isLoading: boolean;
+        disabled: boolean;
+    };
+    decorators: ((Story: any) => React.JSX.Element)[];
+};
+export declare const Typeahead: {
+    render: (args: any) => React.JSX.Element;
+    args: {
+        isTypeahead: boolean;
+        isClearable: boolean;
+        isMulti: boolean;
+        disableCreateItem: boolean;
+        largeDataSet: boolean;
+    };
+};
+export declare const FullPageExample: {
+    render: (args: any) => React.JSX.Element;
+    parameters: {
+        controls: {
+            exclude: string[];
+        };
+    };
+};
+export declare const ControlledSelectedItem: {
+    render: () => React.JSX.Element;
+};
+export declare const ControlledItems: {
+    render: () => React.JSX.Element;
+};

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

@@ -1,9 +1,10 @@
 import * as React from 'react';
-/**
- * @children required
- */
 export interface ContainerProps extends React.HTMLAttributes<HTMLDivElement> {
     isInverse?: boolean;
+    /**
+     * @children required
+     */
+    children: React.ReactNode;
     /**
      * Left/right padding, set by CSS.  If a number is provided, value will be in pixels
      * @default theme.spaceScale.spacing06

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

@@ -0,0 +1,33 @@
+import React from 'react';
+declare const _default: any;
+export default _default;
+export declare const Default: {
+    render: any;
+    args: {
+        children: React.JSX.Element;
+        isInverse: boolean;
+    };
+};
+export declare const Inverse: {
+    render: any;
+    args: {
+        isInverse: boolean;
+        children: React.JSX.Element;
+    };
+};
+export declare const MaxWidth: {
+    render: any;
+    args: {
+        maxWidth: string;
+        children: React.JSX.Element;
+        isInverse: boolean;
+    };
+};
+export declare const Gutters: {
+    render: any;
+    args: {
+        gutterWidth: number;
+        children: React.JSX.Element;
+        isInverse: boolean;
+    };
+};

package/dist/components/Datagrid/Datagrid.d.ts

@@ -40,10 +40,11 @@ export interface DatagridComponents {
 export interface DatagridComponentsProps {
     pagination?: Partial<Omit<TablePaginationProps, 'page' | 'defaultPage' | 'rowsPerPage' | 'defaultRowsPerPage'>>;
 }
-/**
- * @children required
- */
 export interface BaseDatagridProps extends TableProps {
+    /**
+     * @children required
+     */
+    children: React.ReactNode;
     /**
      * Column data to be displayed in the table header
      */

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

@@ -0,0 +1,332 @@
+import React from 'react';
+import { StoryObj } from '@storybook/react-webpack5';
+import { DatagridProps } from './Datagrid';
+import { TableDensity, TablePaginationProps, TableRowColor } from '../Table';
+declare const _default: any;
+export default _default;
+export declare const Default: {
+    render: any;
+    args: {
+        tableTitle: string;
+        density: TableDensity;
+        columns: {
+            field: string;
+            header: string;
+        }[];
+        rows: {
+            id: number;
+            col1: string;
+            col2: string;
+            col3: string;
+            col4: string;
+            rowName: string;
+        }[];
+        hasHoverStyles: boolean;
+        hasSquareCorners: boolean;
+        hasVerticalBorders: boolean;
+        hasZebraStripes: boolean;
+        isSelectable: boolean;
+        isInverse: boolean;
+        isSortableBySelected: boolean;
+        paginationProps: {};
+    };
+};
+export declare const ColoredRows: {
+    render: any;
+    args: {
+        rows: {
+            id: number;
+            color: TableRowColor;
+            col1: string;
+            col2: string;
+            col3: string;
+            col4: string;
+            rowName: string;
+        }[];
+        tableTitle: string;
+        density: TableDensity;
+        columns: {
+            field: string;
+            header: string;
+        }[];
+        hasHoverStyles: boolean;
+        hasSquareCorners: boolean;
+        hasVerticalBorders: boolean;
+        hasZebraStripes: boolean;
+        isSelectable: boolean;
+        isInverse: boolean;
+        isSortableBySelected: boolean;
+        paginationProps: {};
+    };
+};
+export declare const Selectable: {
+    render: any;
+    args: {
+        isSelectable: boolean;
+        tableTitle: string;
+        density: TableDensity;
+        columns: {
+            field: string;
+            header: string;
+        }[];
+        rows: {
+            id: number;
+            col1: string;
+            col2: string;
+            col3: string;
+            col4: string;
+            rowName: string;
+        }[];
+        hasHoverStyles: boolean;
+        hasSquareCorners: boolean;
+        hasVerticalBorders: boolean;
+        hasZebraStripes: boolean;
+        isInverse: boolean;
+        isSortableBySelected: boolean;
+        paginationProps: {};
+    };
+};
+export declare const SelectableAndSortable: StoryObj<DatagridProps>;
+export declare const ControlledSelectable: {
+    render: any;
+    args: {
+        isSelectable: boolean;
+        tableTitle: string;
+        density: TableDensity;
+        columns: {
+            field: string;
+            header: string;
+        }[];
+        rows: {
+            id: number;
+            col1: string;
+            col2: string;
+            col3: string;
+            col4: string;
+            rowName: string;
+        }[];
+        hasHoverStyles: boolean;
+        hasSquareCorners: boolean;
+        hasVerticalBorders: boolean;
+        hasZebraStripes: boolean;
+        isInverse: boolean;
+        isSortableBySelected: boolean;
+        paginationProps: {};
+    };
+};
+export declare const DisabledSelectableRow: {
+    render: any;
+    args: {
+        isSelectable: boolean;
+        tableTitle: string;
+        rows: ({
+            id: number;
+            col1: string;
+            col2: string;
+            col3: string;
+            col4: string;
+            rowName: string;
+        } | {
+            id: number;
+            col1: string;
+            isSelectableDisabled: boolean;
+            col2: string;
+            col3: string;
+            col4: string;
+        })[];
+        density: TableDensity;
+        columns: {
+            field: string;
+            header: string;
+        }[];
+        hasHoverStyles: boolean;
+        hasSquareCorners: boolean;
+        hasVerticalBorders: boolean;
+        hasZebraStripes: boolean;
+        isInverse: boolean;
+        isSortableBySelected: boolean;
+        paginationProps: {};
+    };
+};
+export declare const PaginationChangedDefaults: {
+    render: any;
+    args: {
+        tableTitle: string;
+        paginationProps: {
+            defaultPage: number;
+            defaultRowsPerPage: number;
+            rowsPerPageValues: number[];
+        };
+        density: TableDensity;
+        columns: {
+            field: string;
+            header: string;
+        }[];
+        rows: {
+            id: number;
+            col1: string;
+            col2: string;
+            col3: string;
+            col4: string;
+            rowName: string;
+        }[];
+        hasHoverStyles: boolean;
+        hasSquareCorners: boolean;
+        hasVerticalBorders: boolean;
+        hasZebraStripes: boolean;
+        isSelectable: boolean;
+        isInverse: boolean;
+        isSortableBySelected: boolean;
+    };
+};
+export declare const ControlledPagination: {
+    render: any;
+    args: {
+        tableTitle: string;
+        paginationProps: {
+            rowsPerPageValues: number[];
+        };
+        density: TableDensity;
+        columns: {
+            field: string;
+            header: string;
+        }[];
+        rows: {
+            id: number;
+            col1: string;
+            col2: string;
+            col3: string;
+            col4: string;
+            rowName: string;
+        }[];
+        hasHoverStyles: boolean;
+        hasSquareCorners: boolean;
+        hasVerticalBorders: boolean;
+        hasZebraStripes: boolean;
+        isSelectable: boolean;
+        isInverse: boolean;
+        isSortableBySelected: boolean;
+    };
+};
+export declare const WithoutPagination: {
+    render: any;
+    args: {
+        hasPagination: boolean;
+        tableTitle: string;
+        density: TableDensity;
+        columns: {
+            field: string;
+            header: string;
+        }[];
+        rows: {
+            id: number;
+            col1: string;
+            col2: string;
+            col3: string;
+            col4: string;
+            rowName: string;
+        }[];
+        hasHoverStyles: boolean;
+        hasSquareCorners: boolean;
+        hasVerticalBorders: boolean;
+        hasZebraStripes: boolean;
+        isSelectable: boolean;
+        isInverse: boolean;
+        isSortableBySelected: boolean;
+        paginationProps: {};
+    };
+};
+export declare const PaginationWithCustomComponent: {
+    render: any;
+    args: {
+        tableTitle: string;
+        components: {
+            Pagination: React.FunctionComponent<TablePaginationProps>;
+        };
+        density: TableDensity;
+        columns: {
+            field: string;
+            header: string;
+        }[];
+        rows: {
+            id: number;
+            col1: string;
+            col2: string;
+            col3: string;
+            col4: string;
+            rowName: string;
+        }[];
+        hasHoverStyles: boolean;
+        hasSquareCorners: boolean;
+        hasVerticalBorders: boolean;
+        hasZebraStripes: boolean;
+        isSelectable: boolean;
+        isInverse: boolean;
+        isSortableBySelected: boolean;
+        paginationProps: {};
+    };
+};
+export declare const TitleTable: {
+    render: any;
+    args: {
+        hasOutsideBorder: boolean;
+        hasSquareCorners: boolean;
+        tableTitle: React.JSX.Element;
+        density: TableDensity;
+        columns: {
+            field: string;
+            header: string;
+        }[];
+        rows: {
+            id: number;
+            col1: string;
+            col2: string;
+            col3: string;
+            col4: string;
+            rowName: string;
+        }[];
+        hasHoverStyles: boolean;
+        hasVerticalBorders: boolean;
+        hasZebraStripes: boolean;
+        isSelectable: boolean;
+        isInverse: boolean;
+        isSortableBySelected: boolean;
+        paginationProps: {};
+    };
+};
+export declare const ScrollableDatagrid: {
+    render: (args: React.JSX.IntrinsicAttributes & (DatagridProps & React.RefAttributes<HTMLTableElement>)) => React.JSX.Element;
+    args: {
+        columns: {
+            field: string;
+            header: string;
+            style: {
+                minWidth: string;
+            };
+        }[];
+        rows: {
+            id: number;
+            product: string;
+            category: string;
+            price: string;
+            quantity: string;
+            status: string;
+            brand: string;
+            warehouse: string;
+            rowName: string;
+        }[];
+        tableTitle: string;
+        hasHoverStyles: boolean;
+        hasOutsideBorder: boolean;
+        hasZebraStripes: boolean;
+        hasPagination: boolean;
+        isSelectable: boolean;
+    };
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
+    };
+};