@oliasoft-open-source/react-ui-library 3.12.0-beta-19 → 3.12.0-beta-21

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

@@ -0,0 +1,31 @@
+import { StoryFn } from '@storybook/react';
+import { IMenuProps } from './menu.interface';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
+export default _default;
+export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IMenuProps>;
+export declare const PrimaryTrigger: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IMenuProps>;
+export declare const DestructiveTrigger: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IMenuProps>;
+export declare const TextTrigger: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IMenuProps>;
+export declare const CustomTrigger: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IMenuProps>;
+export declare const FileUpload: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IMenuProps>;
+export declare const DescriptionOnRight: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IMenuProps>;
+export declare const Actions: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IMenuProps>;
+export declare const Icons: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IMenuProps>;
+export declare const Disabled: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IMenuProps>;
+export declare const Tooltip: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IMenuProps>;
+export declare const Error: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IMenuProps>;
+export declare const Warning: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IMenuProps>;
+export declare const Loading: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IMenuProps>;
+export declare const Badge: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IMenuProps>;
+export declare const Dot: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IMenuProps>;
+export declare const Empty: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IMenuProps>;
+export declare const Submenus: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IMenuProps>;
+export declare const WithoutCloseOnOptionClick: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IMenuProps>;
+export declare const RightClickContextMenu: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IMenuProps>;
+export declare const FullWidth: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IMenuProps>;
+export declare const Small: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IMenuProps>;
+export declare const JSXItems: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IMenuProps>;
+export declare const JSXContent: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IMenuProps>;
+export declare const ShowAll: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IMenuProps>;
+export declare const Long: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IMenuProps>;
+export declare const ControlOpenStateFromParent: StoryFn<IMenuProps>;

package/dist/components/menu/menu.stories.js

@@ -0,0 +1,104 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Menu } from './menu';
+import { Button } from '../button/button';
+import { Flex } from '../layout/flex/flex';
+import * as storyData from './menu.stories-data';
+import { IconType, TriggerType } from "../../common-enum";
+export default {
+    title: 'Basic/Menu',
+    component: Menu,
+    args: {
+        menu: storyData.menu,
+    },
+};
+// TODO - re-check any types
+const Template = (args) => (_jsx(Menu
+// eslint-disable-next-line react/jsx-props-no-spreading
+, { ...args }));
+export const Default = Template.bind({});
+export const PrimaryTrigger = Template.bind({});
+PrimaryTrigger.args = { menu: { ...storyData.menu, colored: true } };
+export const DestructiveTrigger = Template.bind({});
+DestructiveTrigger.args = {
+    menu: { ...storyData.menu, label: 'Delete', colored: 'danger' },
+};
+export const TextTrigger = Template.bind({});
+TextTrigger.args = { menu: { ...storyData.menu, trigger: TriggerType.TEXT } };
+export const CustomTrigger = Template.bind({});
+CustomTrigger.args = {
+    menu: {
+        ...storyData.menu,
+        trigger: TriggerType.COMPONENT,
+        component: _jsx(Button, { small: true, colored: true, round: true, icon: IconType.SETTINGS }),
+    },
+};
+export const FileUpload = Template.bind({});
+FileUpload.args = { menu: storyData.menuFileUpload };
+export const DescriptionOnRight = Template.bind({});
+DescriptionOnRight.args = { menu: storyData.menuDescriptionOnRight };
+export const Actions = Template.bind({});
+Actions.args = { menu: storyData.menuActions };
+export const Icons = Template.bind({});
+Icons.args = { menu: storyData.menuIcons };
+export const Disabled = Template.bind({});
+Disabled.args = {
+    disabled: true,
+};
+export const Tooltip = Template.bind({});
+Tooltip.args = { tooltip: 'Tooltip goes here' };
+export const Error = Template.bind({});
+Error.args = { error: 'Error goes here' };
+export const Warning = Template.bind({});
+Warning.args = { warning: 'Warning goes here' };
+export const Loading = Template.bind({});
+Loading.args = {
+    loading: true,
+    disabled: true,
+};
+export const Badge = Template.bind({});
+Badge.args = {
+    badgeTitle: '3',
+};
+export const Dot = Template.bind({});
+Dot.args = {
+    badgeDot: true,
+};
+export const Empty = Template.bind({});
+Empty.args = { menu: storyData.menuEmpty };
+export const Submenus = Template.bind({});
+Submenus.args = { menu: storyData.menuSubmenus };
+export const WithoutCloseOnOptionClick = Template.bind({});
+WithoutCloseOnOptionClick.args = { closeOnOptionClick: false };
+export const RightClickContextMenu = Template.bind({});
+RightClickContextMenu.args = {
+    contextMenu: true,
+    menu: { ...storyData.menu, trigger: TriggerType.TEXT, label: 'Right-click me' },
+};
+export const FullWidth = Template.bind({});
+FullWidth.args = {
+    width: '100%',
+};
+export const Small = Template.bind({});
+Small.args = {
+    menu: { ...storyData.menu, small: true },
+};
+export const JSXItems = Template.bind({});
+JSXItems.args = { menu: storyData.menuJsxItems };
+export const JSXContent = Template.bind({});
+JSXContent.args = {
+    menu: {
+        ...storyData.menu,
+        sections: _jsx("div", { children: "Testing" }),
+    },
+};
+export const ShowAll = Template.bind({});
+ShowAll.args = { menu: storyData.menuShowAll };
+export const Long = Template.bind({});
+Long.args = {
+    menu: storyData.menuLong,
+};
+export const ControlOpenStateFromParent = () => {
+    const [open, setOpen] = useState(false);
+    return (_jsxs(Flex, { gap: true, children: [_jsx(Menu, { menu: storyData.menu, open: open, setOpen: setOpen }), _jsx(Button, { label: "Open", onClick: () => setOpen(true), disabled: open }), _jsx(Button, { label: "Close", onClick: () => setOpen(false), disabled: !open })] }));
+};

package/dist/components/menu/menu.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/menu/menu.test.js

@@ -0,0 +1,46 @@
+import { childPath, closePath, parentPath, registerClose, siblings } from "./layer/path";
+const tree = {
+    close: () => { },
+    sections: [
+        null,
+        null,
+        {
+            close: () => { },
+        },
+        {
+            close: () => { },
+            sections: [
+                null,
+                null,
+                null,
+                {
+                    close: () => { },
+                },
+            ],
+        },
+    ],
+};
+describe('menu paths', () => {
+    test('parentPath', () => {
+        expect(parentPath('')).toBe('');
+        expect(parentPath('foo.bar.baz')).toBe('foo.bar.baz');
+        expect(parentPath('foo.bar[45]')).toBe('foo.bar');
+    });
+    test('childPath', () => {
+        expect(childPath('', 6)).toBe('sections[6]');
+        expect(childPath('foo', 2)).toBe('foo.sections[2]');
+    });
+    test('closePath', () => {
+        expect(closePath('')).toBe('close');
+        expect(closePath('foo.bar.baz')).toBe('foo.bar.baz.close');
+    });
+    test('siblings', () => {
+        expect(siblings(tree, 'sections[3].sections[3]')).toStrictEqual(tree.sections[3].sections);
+    });
+    test('registerClose', () => {
+        expect(registerClose(tree, 'sections[3]', 'monkeys')).toStrictEqual({
+            ...tree,
+            sections: tree.sections.map((s, i) => i === 3 ? { ...s, close: 'monkeys' } : s),
+        });
+    });
+});

package/dist/components/menu/trigger/button.d.ts

@@ -0,0 +1,14 @@
+import { GroupOrder } from "../../../common-enum";
+export interface IMenuButtonProps {
+    trigger: 'Button' | 'DropDownButton' | string;
+    label: string;
+    colored?: boolean | string;
+    small?: boolean;
+    width?: string | number;
+    disabled?: boolean;
+    groupOrder?: GroupOrder;
+    loading?: boolean;
+    error?: string;
+    warning?: string;
+}
+export declare const Button: ({ trigger, label, colored, small, width, disabled, groupOrder, loading, error, warning, }: IMenuButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/menu/trigger/button.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext } from "react";
+import cx from "classnames";
+import styles from "../menu.module.less";
+import { Button as BasicButton } from "../../button/button";
+import { DisabledContext } from "../../../helpers/disabled-context";
+import { Icon } from "../../icon/icon";
+import { IconType, TriggerType } from "../../../common-enum";
+export const Button = ({ trigger, label, colored, small, width, disabled, groupOrder, loading, error, warning, }) => {
+    const disabledContext = useContext(DisabledContext);
+    const buttonLabel = trigger === TriggerType.BUTTON ? (label) : trigger === TriggerType.DROP_DOWN_BUTTON ? (_jsxs("span", { className: styles.middleAlignedInline, children: [_jsx("span", { className: styles.buttonLabel, children: label }), _jsx("span", { className: styles.buttonCaret, children: _jsx(Icon, { icon: IconType.CHEVRON_DOWN }) })] })) : null;
+    return (_jsx("div", { className: cx(styles.trigger, disabled || disabledContext ? styles.disabled : null), style: { width }, children: _jsx(BasicButton, { label: buttonLabel, colored: colored, small: small, width: width, groupOrder: groupOrder, onClick: () => { } /*handled in parent*/, loading: loading, disabled: disabled, error: error, warning: warning }) }));
+};

package/dist/components/menu/trigger/component.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface IMenuComponentProps {
+    component: React.ReactNode;
+    disabled?: boolean;
+    testId?: string;
+}
+export declare const Component: ({ component, disabled, testId, }: IMenuComponentProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/menu/trigger/component.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import cx from 'classnames';
+import styles from '../menu.module.less';
+export const Component = ({ component, disabled, testId, }) => {
+    return (_jsx("div", { className: cx(styles.component, disabled ? styles.disabled : null), "data-testid": testId, children: component }));
+};

package/dist/components/menu/trigger/text.d.ts

@@ -0,0 +1,10 @@
+import { MenuCarat } from "../enum";
+interface IMenuTextProps {
+    label: string;
+    title?: string;
+    carat?: MenuCarat;
+    disabled?: boolean;
+    isOpen?: boolean;
+}
+export declare const Text: ({ label, title, carat, disabled, isOpen, }: IMenuTextProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/menu/trigger/text.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import cx from 'classnames';
+import styles from '../menu.module.less';
+import { Icon } from '../../icon/icon';
+import { MenuCarat } from "../enum";
+import { IconType } from "../../../common-enum";
+export const Text = ({ label, title, carat, disabled, isOpen, }) => {
+    return (_jsxs("div", { className: cx(styles.trigger, disabled ? styles.disabled : null, isOpen ? styles.active : null), children: [_jsx("span", { className: styles.label, title: title || label, children: label }), carat && carat === MenuCarat.RIGHT ? (_jsx("span", { className: styles.arrow, children: _jsx(Icon, { icon: IconType.CHEVRON_RIGHT }) })) : carat && carat === MenuCarat.DOWN ? (_jsx("span", { className: styles.arrow, children: _jsx(Icon, { icon: IconType.CHEVRON_DOWN }) })) : null] }));
+};

package/dist/components/menu/trigger/trigger.d.ts

@@ -0,0 +1,27 @@
+import React, { ReactNode } from "react";
+import { GroupOrder, TriggerType } from "../../../common-enum";
+export interface IMenuTriggerProps {
+    isDisabled?: boolean;
+    badgeTitle?: string;
+    badgeDot?: boolean;
+    loading?: boolean;
+    width?: number | string;
+    trigger: TriggerType;
+    label?: string;
+    title?: string;
+    onClickTrigger: () => void;
+    colored?: boolean | string;
+    small?: boolean;
+    isNested?: boolean;
+    contextMenu?: boolean;
+    component?: ReactNode;
+    groupOrder?: GroupOrder;
+    fullHeight?: boolean;
+    isOpen?: boolean;
+    error?: string;
+    warning?: string;
+    tooltip?: string | number | ReactNode;
+    testId?: string;
+    children?: React.ReactNode;
+}
+export declare const Trigger: React.ForwardRefExoticComponent<IMenuTriggerProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/menu/trigger/trigger.js

@@ -0,0 +1,35 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import { Badge } from "../../badge/badge";
+import { Button } from "./button";
+import { Text } from "./text";
+import { Tooltip } from "../../tooltip/tooltip";
+import { Component } from "./component";
+import styles from "../menu.module.less";
+import { isStringNumberOrNode } from "../../../helpers/types";
+import { TriggerType } from "../../../common-enum";
+import { MenuCarat } from "../enum";
+const TriggerTooltip = ({ tooltip, error, warning, children, }) => {
+    if (!isStringNumberOrNode(tooltip) &&
+        !isStringNumberOrNode(error) &&
+        !isStringNumberOrNode(warning)) {
+        return _jsx(_Fragment, { children: children });
+    }
+    return (_jsx(Tooltip, { error: !!error, warning: !!warning, text: tooltip || error || warning, display: "inline-block", children: children }));
+};
+export const Trigger = React.forwardRef(({ isDisabled, badgeTitle, badgeDot, loading, width, trigger, label, title, onClickTrigger, colored, small, isNested, contextMenu, component, groupOrder, fullHeight, isOpen, error, warning, tooltip, testId, ...restProps }, ref) => {
+    const triggerElement = trigger === TriggerType.BUTTON || trigger === TriggerType.DROP_DOWN_BUTTON ? (_jsx(Button, { trigger: trigger, label: label ?? '', colored: colored, small: small, width: width, disabled: isDisabled, groupOrder: groupOrder, loading: loading, error: error, warning: warning })) : trigger === TriggerType.TEXT ? (_jsx(Text, { label: label ?? '', title: title, disabled: isDisabled, carat: !contextMenu ? (isNested ? MenuCarat.RIGHT : MenuCarat.DOWN) : undefined, isOpen: isOpen })) : trigger === TriggerType.COMPONENT ? (_jsx(Component, { component: component, disabled: isDisabled })) : null;
+    const wrappedTrigger = !isNested && (badgeTitle || badgeDot) ? (_jsx(Badge, { title: badgeTitle, dot: badgeDot, small: !badgeDot, children: triggerElement })) : (triggerElement);
+    return (_jsx("div", { ref: ref, className: styles.wrapper, style: width
+            ? { width }
+            : {
+                ...(fullHeight && {
+                    height: '100%',
+                    display: 'flex',
+                }),
+            }, onClick: (evt) => {
+            evt.stopPropagation();
+            evt.preventDefault();
+            onClickTrigger();
+        }, "data-testid": testId, children: _jsx(TriggerTooltip, { tooltip: tooltip, error: error, warning: warning, children: wrappedTrigger }) }));
+});

package/dist/components/message/dismiss.d.ts

@@ -0,0 +1,8 @@
+import { MouseEvent } from "react";
+import { MessageType } from "./enum";
+export interface IDismissProps {
+    type: MessageType;
+    onClose?: (evt: MouseEvent<SVGSVGElement>) => void;
+    isInToast?: boolean;
+}
+export declare const Dismiss: ({ type, onClose, isInToast }: IDismissProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/message/dismiss.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import cx from "classnames";
+import styles from "./message.module.less";
+import { Icon } from "../icon/icon";
+import { MessageType } from "./enum";
+import { IconType } from "../../common-enum";
+export const Dismiss = ({ type, onClose, isInToast }) => {
+    return (_jsx("div", { className: cx(styles.dismiss, isInToast ? styles.absolute : '', type === MessageType.INFO
+            ? styles.info
+            : type === MessageType.SUCCESS
+                ? styles.success
+                : type === MessageType.WARNING
+                    ? styles.warning
+                    : type === MessageType.ERROR
+                        ? styles.error
+                        : null), children: _jsx(Icon, { icon: IconType.CLOSE, onClick: onClose }) }));
+};

package/dist/components/message/enum.d.ts

@@ -0,0 +1,9 @@
+export declare enum MessageType {
+    INFO = "Info",
+    SUCCESS = "Success",
+    WARNING = "Warning",
+    ERROR = "Error"
+}
+export declare enum MessageToggle {
+    TOGGLE_DETAILS = "TOGGLE_DETAILS"
+}

package/dist/components/message/enum.js

@@ -0,0 +1,11 @@
+export var MessageType;
+(function (MessageType) {
+    MessageType["INFO"] = "Info";
+    MessageType["SUCCESS"] = "Success";
+    MessageType["WARNING"] = "Warning";
+    MessageType["ERROR"] = "Error";
+})(MessageType || (MessageType = {}));
+export var MessageToggle;
+(function (MessageToggle) {
+    MessageToggle["TOGGLE_DETAILS"] = "TOGGLE_DETAILS";
+})(MessageToggle || (MessageToggle = {}));

package/dist/components/message/message.d.ts

@@ -0,0 +1,19 @@
+import { MouseEvent, ReactNode } from "react";
+import { MessageType } from "./enum";
+export interface IMessage {
+    visible?: boolean;
+    type: MessageType;
+    icon?: boolean;
+    heading?: ReactNode;
+    content: ReactNode;
+    details?: ReactNode;
+    footer?: ReactNode;
+    withDismiss?: boolean;
+    onClose?: (evt: MouseEvent<SVGSVGElement>) => void;
+    width?: string | number;
+    maxHeight?: string | number;
+}
+export interface IMessageProps {
+    message: IMessage;
+}
+export declare const Message: ({ message }: IMessageProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/message/message.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useReducer } from "react";
+import cx from "classnames";
+import { Dismiss } from "./dismiss";
+import styles from "./message.module.less";
+import { Icon } from "../icon/icon";
+import { MessageToggle, MessageType } from "./enum";
+import { IconType } from "../../common-enum";
+const initialState = {
+    detailsVisible: false,
+};
+const reducer = (state, action) => {
+    switch (action.type) {
+        case MessageToggle.TOGGLE_DETAILS:
+            return {
+                ...state,
+                detailsVisible: !state.detailsVisible,
+            };
+        default:
+            return state;
+    }
+};
+const Details = ({ details, visible, dispatch }) => {
+    return (_jsxs("div", { children: [_jsx("div", { className: cx(styles.legendToggle), onClick: dispatch, children: visible ? 'Hide details' : 'Show details' }), visible ? _jsx("div", { className: styles.detailsText, children: details }) : null] }));
+};
+const DialogIcon = ({ type }) => {
+    const size = 16;
+    switch (type) {
+        case MessageType.SUCCESS:
+            return _jsx(Icon, { icon: IconType.SUCCESS, size: size });
+        case MessageType.WARNING:
+            return _jsx(Icon, { icon: IconType.WARNING, size: size });
+        case MessageType.ERROR:
+            return _jsx(Icon, { icon: IconType.ERROR, size: size });
+        default:
+            return _jsx(Icon, { icon: IconType.INFO, size: size });
+    }
+};
+export const Message = ({ message }) => {
+    const { visible, type, icon, heading, content, details, footer, withDismiss, onClose, width, maxHeight, } = message;
+    const [state, dispatch] = useReducer(reducer, initialState);
+    return (_jsx(_Fragment, { children: visible ? (_jsxs("div", { className: cx(styles.container, width ? styles.block : null, type === MessageType.SUCCESS
+                ? styles.success
+                : type === MessageType.WARNING
+                    ? styles.warning
+                    : type === MessageType.ERROR
+                        ? styles.error
+                        : styles.info), style: { width, maxHeight }, children: [_jsx("div", { children: icon ? (_jsx("div", { className: styles.icon, children: _jsx(DialogIcon, { type: type }) })) : null }), _jsxs("div", { className: styles.content, children: [heading ? _jsx("div", { className: styles.heading, children: heading }) : null, _jsx("div", { children: content }), details ? (_jsx(Details, { details: details, visible: state.detailsVisible, dispatch: () => dispatch({ type: MessageToggle.TOGGLE_DETAILS }) })) : null, !!footer && _jsx("div", { className: styles.footer, children: footer })] }), withDismiss ? _jsx(Dismiss, { type: type, onClose: onClose }) : null] })) : null }));
+};

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

@@ -0,0 +1,11 @@
+import { IMessage } from "./message";
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
+export default _default;
+export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IMessage>;
+export declare const Heading: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IMessage>;
+export declare const Icon: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IMessage>;
+export declare const Details: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IMessage>;
+export declare const Footer: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IMessage>;
+export declare const FullWidth: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IMessage>;
+export declare const FixedWidth: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IMessage>;
+export declare const MaxHeight: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IMessage>;

package/dist/components/message/message.stories.js

@@ -0,0 +1,82 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useArgs } from "@storybook/addons";
+import { Message } from "./message";
+import { Button } from "../button/button";
+import { Grid } from "../layout/grid/grid";
+import { MessageType } from "./enum";
+const message = {
+    visible: true,
+    heading: undefined,
+    content: 'Here is some info',
+    withDismiss: false,
+    icon: false,
+    details: undefined,
+    maxHeight: undefined,
+    type: MessageType.INFO,
+};
+export default {
+    title: 'Basic/Message',
+    component: Message,
+    args: {
+        ...message,
+    },
+    argTypes: {
+        heading: {
+            control: { type: 'text' },
+        },
+        details: {
+            control: { type: 'text' },
+        },
+    },
+};
+const Template = (args) => {
+    const [_, updateArgs] = useArgs();
+    const handleClose = () => {
+        updateArgs({ visible: false });
+        setTimeout(() => {
+            updateArgs({ visible: true });
+        }, 1000);
+    };
+    return (_jsxs(Grid, { gap: true, children: [_jsx(Message, { message: {
+                    ...args,
+                    onClose: handleClose,
+                    type: MessageType.INFO,
+                } }), _jsx(Message, { message: {
+                    ...args,
+                    onClose: handleClose,
+                    type: MessageType.ERROR,
+                } }), _jsx(Message, { message: {
+                    ...args,
+                    onClose: handleClose,
+                    type: MessageType.WARNING,
+                } }), _jsx(Message, { message: {
+                    ...args,
+                    onClose: handleClose,
+                    type: MessageType.SUCCESS,
+                } })] }));
+};
+export const Default = Template.bind({});
+export const Heading = Template.bind({});
+Heading.args = { heading: 'Message Heading' };
+export const Icon = Template.bind({});
+Icon.args = { icon: true };
+export const Details = Template.bind({});
+Details.args = {
+    details: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque at mi ac quam condimentum blandit at sit amet lectus. Nullam volutpat erat maximus, venenatis nisl sed, aliquam libero.',
+};
+export const Footer = Template.bind({});
+Footer.args = {
+    type: MessageType.ERROR,
+    icon: true,
+    content: 'Unable to sync because connection settings are not set.',
+    footer: (_jsxs(_Fragment, { children: [_jsx(Button, { small: true, label: "Edit connection settings", colored: "primary" }, "edit-settings"), _jsx(Button, { small: true, label: "Cancel sync" }, "cancel-sync"), ","] })),
+};
+export const FullWidth = Template.bind({});
+FullWidth.args = { width: '100%' };
+export const FixedWidth = Template.bind({});
+FixedWidth.args = { width: '300px' };
+export const MaxHeight = Template.bind({});
+MaxHeight.args = {
+    maxHeight: '100px',
+    content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. '.repeat(20),
+};

package/dist/components/modal/modal.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+export interface IModalProps {
+    children: ReactNode;
+    visible?: boolean;
+    centered?: boolean;
+    width?: string | number;
+}
+export declare const Modal: ({ children, visible, centered, width, }: IModalProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/modal/modal.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import cx from 'classnames';
+import { Portal } from '../portal/portal';
+import styles from './modal.module.less';
+const Wrapper = ({ children }) => (_jsx("div", { className: cx(styles.wrapper), children: children }));
+const Content = ({ children, width, centered, }) => (_jsx("div", { className: cx(styles.contentContainer, centered ? styles.centered : ''), style: { maxWidth: width }, children: children }));
+export const Modal = ({ children, visible = false, centered = false, width = '100%', }) => (_jsxs(_Fragment, { children: [_jsx(Portal, { id: "modalContainer", children: visible ? (_jsx(Wrapper, { children: _jsx(Content, { width: width, centered: centered, children: children }) })) : null }), _jsx("div", { id: "modalContainer" })] }));

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

@@ -0,0 +1,12 @@
+import { StoryFn } from "@storybook/react";
+import { IModalProps } from "./modal";
+import { IDialogProps } from "../dialog/dialog";
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
+export default _default;
+export declare const Default: StoryFn<IDialogProps | IModalProps>;
+export declare const Centered: StoryFn<IDialogProps | IModalProps>;
+export declare const LineBreak: StoryFn<IDialogProps | IModalProps>;
+export declare const Scroll: StoryFn<IDialogProps | IModalProps>;
+export declare const FullWidth: StoryFn<IDialogProps | IModalProps>;
+export declare const NoContentPadding: StoryFn<IDialogProps | IModalProps>;
+export declare const WithPopoverLayers: StoryFn<IDialogProps | IModalProps>;