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

package/dist/components/pagination/pagination.test.js

@@ -0,0 +1,84 @@
+import { selectedRowsPerPage, numberOfPages, validateSelectedPage, } from './pagination.viewdata';
+describe('pagination', () => {
+    test('selected rows per page, by value', () => {
+        const options = [{}, {}, { value: 30, selected: true }, {}];
+        const value = 66;
+        expect(selectedRowsPerPage(options, value)).toBe(66);
+    });
+    test('selected rows per page, by selected option', () => {
+        const options = [{}, {}, { value: 30, selected: true }, {}];
+        expect(selectedRowsPerPage(options)).toBe(30);
+    });
+    test('default selected rows per page', () => {
+        expect(selectedRowsPerPage()).toBe(10);
+    });
+    test('number of pages defaults to 10', () => {
+        expect(numberOfPages()).toBe(10);
+    });
+    test('number of pages is 1 if rows per page is 0', () => {
+        expect(numberOfPages(Infinity, { value: 0 })).toBe(1);
+    });
+    test('number of pages works with options', () => {
+        expect(numberOfPages(5, {
+            options: [
+                {},
+                { value: 1 },
+                { value: 2, selected: false },
+                { value: 3, selected: true },
+                {},
+            ],
+        })).toBe(2);
+    });
+    test('number of pages otherwise behaves as expected', () => {
+        expect(numberOfPages(5, { value: 1 })).toBe(5);
+        expect(numberOfPages(5, { value: 2 })).toBe(3);
+        expect(numberOfPages(5, { value: 5 })).toBe(1);
+        expect(numberOfPages(5, { value: 7 })).toBe(1);
+    });
+    test('validateSelectedPage', () => {
+        expect(validateSelectedPage('4', 12)).toStrictEqual({
+            valid: true,
+            error: null,
+        });
+        expect(validateSelectedPage('', 12)).toStrictEqual({
+            valid: true,
+            error: null,
+        });
+        expect(validateSelectedPage('1', 1)).toStrictEqual({
+            valid: true,
+            error: null,
+        });
+        expect(validateSelectedPage('13', 12)).toStrictEqual({
+            valid: false,
+            error: 'Selected page must be a positive whole number between 1 and 12',
+        });
+        expect(validateSelectedPage('x', 12)).toStrictEqual({
+            valid: false,
+            error: 'Selected page must be a positive whole number between 1 and 12',
+        });
+        expect(validateSelectedPage('1.', 12)).toStrictEqual({
+            valid: false,
+            error: 'Selected page must be a positive whole number between 1 and 12',
+        });
+        expect(validateSelectedPage('1.0', 12)).toStrictEqual({
+            valid: false,
+            error: 'Selected page must be a positive whole number between 1 and 12',
+        });
+        expect(validateSelectedPage('1.1', 12)).toStrictEqual({
+            valid: false,
+            error: 'Selected page must be a positive whole number between 1 and 12',
+        });
+        expect(validateSelectedPage('1,1', 12)).toStrictEqual({
+            valid: false,
+            error: 'Selected page must be a positive whole number between 1 and 12',
+        });
+        expect(validateSelectedPage('1x', 12)).toStrictEqual({
+            valid: false,
+            error: 'Selected page must be a positive whole number between 1 and 12',
+        });
+        expect(validateSelectedPage('-1', 12)).toStrictEqual({
+            valid: false,
+            error: 'Selected page must be a positive whole number between 1 and 12',
+        });
+    });
+});

package/dist/components/pagination/pagination.viewdata.d.ts

@@ -0,0 +1,17 @@
+import { IPaginationOptionType, IPaginationPerPageType, IPaginationValidationResult } from './pagination.interface';
+export declare const selectedRowsPerPage: (options?: IPaginationOptionType[], value?: number) => number;
+/**
+ * Calculate number of pages
+ * @param numberOfRows Number of rows
+ * @param pageContainer Object containing page 'options' and rows per page 'value'.
+ * @returns Number of pages
+ */
+export declare const numberOfPages: (numberOfRows?: number, pageContainer?: IPaginationPerPageType) => number;
+/**
+ * Validate the selected page input value
+ * @param selectedPage Selected page
+ * @param numPages Number of pages
+ * @param errorMessageTemplate Error message template
+ * @returns Validation object
+ */
+export declare const validateSelectedPage: (selectedPage: string, numPages: number, errorMessageTemplate?: string) => IPaginationValidationResult;

package/dist/components/pagination/pagination.viewdata.js

@@ -0,0 +1,53 @@
+export const selectedRowsPerPage = (options, value) => {
+    return (value ||
+        (options &&
+            options.reduce((acc, row) => {
+                return row.selected ? Number(row.value) : acc;
+            }, 10)) ||
+        10);
+};
+/**
+ * Calculate number of pages
+ * @param numberOfRows Number of rows
+ * @param pageContainer Object containing page 'options' and rows per page 'value'.
+ * @returns Number of pages
+ */
+export const numberOfPages = (numberOfRows, pageContainer) => {
+    // Default
+    if (!pageContainer || !numberOfRows) {
+        return 10;
+    }
+    const { options, value } = pageContainer;
+    const valueToNum = Number(value);
+    // Show all
+    if (valueToNum === 0) {
+        return 1;
+    }
+    return Math.ceil(numberOfRows / selectedRowsPerPage(options, valueToNum));
+};
+/**
+ * Validate the selected page input value
+ * @param selectedPage Selected page
+ * @param numPages Number of pages
+ * @param errorMessageTemplate Error message template
+ * @returns Validation object
+ */
+export const validateSelectedPage = (selectedPage, numPages, errorMessageTemplate = 'Selected page must be a positive whole number between 1 and') => {
+    const error = `${errorMessageTemplate} ${numPages}`;
+    const valid = {
+        valid: true,
+        error: null,
+    };
+    if (selectedPage === '') {
+        return valid;
+    }
+    if (!selectedPage.match(/^\d+$/g) ||
+        parseInt(selectedPage) <= 0 ||
+        parseInt(selectedPage) > numPages) {
+        return {
+            valid: false,
+            error,
+        };
+    }
+    return valid;
+};

package/dist/components/pop-confirm/content.d.ts

@@ -0,0 +1,9 @@
+export interface IPopConfirmContentProps {
+    title?: string;
+    okText: string;
+    onClickOk: (close: () => void) => void;
+    cancelText: string;
+    onClickCancel: (close: () => void) => void;
+    close?: () => void;
+}
+export declare const Content: ({ title, okText, onClickOk, cancelText, onClickCancel, close, }: IPopConfirmContentProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/pop-confirm/content.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '../button/button';
+import { Text } from '../text/text';
+import styles from './pop-confirm.module.less';
+export const Content = ({ title, okText, onClickOk, cancelText, onClickCancel, close, }) => (_jsxs("div", { className: styles.popConfirm, children: [title && (_jsx("div", { className: styles.content, children: _jsx(Text, { children: title }) })), _jsxs("div", { className: styles.buttons, children: [_jsx(Button, { colored: true, label: okText, onClick: () => close && onClickOk(close) }), _jsx(Button, { label: cancelText, onClick: () => close && onClickCancel(close) })] })] }));

package/dist/components/pop-confirm/pop-confirm.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+import { Placement } from 'react-laag';
+export interface IPopConfirmProps {
+    children?: ReactNode;
+    placement?: Placement;
+    closeOnOutsideClick?: boolean;
+    fullWidth?: boolean;
+    title?: string;
+    cancelText?: string;
+    onClickCancel?: (close: () => void) => void;
+    okText?: string;
+    onClickOk?: (close: () => void) => void;
+}
+export declare const PopConfirm: ({ children, placement, closeOnOutsideClick, fullWidth, title, cancelText, onClickCancel, okText, onClickOk, }: IPopConfirmProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/pop-confirm/pop-confirm.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Popover } from '../popover/popover';
+import { Content } from './content';
+export const PopConfirm = ({ children, placement = 'top-center', closeOnOutsideClick = true, fullWidth = false, title = '', cancelText = 'Cancel', onClickCancel = (close) => close(), okText = 'Ok', onClickOk = () => { }, }) => {
+    const content = (_jsx(Content, { title: title, okText: okText, onClickOk: onClickOk, cancelText: cancelText, onClickCancel: onClickCancel }));
+    return (_jsx(Popover, { content: content, placement: placement, closeOnOutsideClick: closeOnOutsideClick, fullWidth: fullWidth, children: children }));
+};

package/dist/components/pop-confirm/pop-confirm.stories.d.ts

@@ -0,0 +1,4 @@
+import { IPopConfirmProps } from './pop-confirm';
+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, IPopConfirmProps>;

package/dist/components/pop-confirm/pop-confirm.stories.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PopConfirm } from './pop-confirm';
+import { Button } from '../button/button';
+import { toast } from '../toaster/toaster';
+const onOk = (close) => {
+    toast({
+        message: {
+            type: 'Success',
+            content: 'success!',
+            details: 'You successfully booked your cruise to Bahamas.',
+        },
+    });
+    close();
+};
+export default {
+    title: 'Basic/PopConfirm',
+    component: PopConfirm,
+    args: {
+        title: 'Do you want a free cruise to Bahamas?',
+        onClickCancel: (close) => close(),
+        onClickOk: onOk,
+        children: _jsx(Button, { label: "Click me!" }),
+    },
+    decorators: [
+        (story) => (_jsx("div", { style: {
+                display: 'flex',
+                height: 150,
+                alignItems: 'flex-end',
+                justifyContent: 'center',
+            }, children: story() })),
+    ],
+    parameters: {
+        docs: {
+            source: {
+                excludeDecorators: true,
+            },
+        },
+    },
+};
+const Template = (args) => (_jsx(PopConfirm
+// eslint-disable-next-line react/jsx-props-no-spreading
+, { ...args }));
+export const Default = Template.bind({});

package/dist/components/popover/popover.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from "react";
+import { Placement } from "react-laag";
+export interface IPopoverProps {
+    children: ReactNode;
+    content?: ReactNode;
+    placement?: Placement;
+    closeOnOutsideClick?: boolean;
+    fullWidth?: boolean;
+    showCloseButton?: boolean;
+    testId?: string;
+    disabled?: boolean;
+    overflowContainer?: boolean;
+}
+export declare const Popover: ({ children, content, placement, closeOnOutsideClick, fullWidth, showCloseButton, testId, disabled, overflowContainer, }: IPopoverProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/popover/popover.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useContext, useEffect, useState } from "react";
+import ResizeObserver from "resize-observer-polyfill";
+import cx from "classnames";
+import { Arrow, useLayer } from "react-laag";
+import { Button } from "../button/button";
+import styles from "./popover.module.less";
+import { DisabledContext } from "../../helpers/disabled-context";
+import { IconType } from "../../common-enum";
+export const Popover = ({ children, content, placement = 'top-center', closeOnOutsideClick = true, fullWidth = false, showCloseButton = false, testId, disabled = false, overflowContainer = false, }) => {
+    const disabledContext = useContext(DisabledContext);
+    const [isOpen, setOpen] = useState(false);
+    const close = () => setOpen(false);
+    const toggle = () => {
+        if (!(disabled || disabledContext)) {
+            setOpen(!isOpen);
+        }
+    };
+    useEffect(() => {
+        if (!(disabled || disabledContext)) {
+            close();
+        }
+    }, [disabled, disabledContext]);
+    const { renderLayer, arrowProps, layerProps, triggerProps } = useLayer({
+        isOpen,
+        placement,
+        auto: true,
+        triggerOffset: 6,
+        onOutsideClick: closeOnOutsideClick ? close : undefined,
+        ResizeObserver,
+        overflowContainer,
+    });
+    return (_jsxs(_Fragment, { children: [_jsx("div", { ref: triggerProps.ref, onClick: toggle, "data-testid": testId, children: children }), isOpen &&
+                renderLayer(_jsxs("div", { className: fullWidth
+                        ? cx(styles.toggleBox, styles.fullWidthStyleFix)
+                        : cx(styles.toggleBox), ...layerProps, children: [_jsxs("div", { children: [React.isValidElement(content)
+                                    ? React.cloneElement(content, { close })
+                                    : content, showCloseButton && (_jsx("div", { className: styles.dismiss, children: _jsx(Button, { small: true, round: true, onClick: close, icon: IconType.CLOSE }) }))] }), _jsx(Arrow, { ...arrowProps, backgroundColor: "var(--color-background-raised)", borderColor: "var(--color-border)", borderWidth: 1, size: 6 })] }))] }));
+};

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

@@ -0,0 +1,7 @@
+import { IPopoverProps } from './popover';
+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, IPopoverProps>;
+export declare const InputTrigger: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IPopoverProps>;
+export declare const CloseButton: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IPopoverProps>;
+export declare const Disabled: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IPopoverProps>;

package/dist/components/popover/popover.stories.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Popover } from './popover';
+import { Input } from '../input/input';
+import { Button } from '../button/button';
+import { Flex } from '../layout/flex/flex';
+import { Select } from '../select/select';
+const options = [
+    { label: 'Option 1', value: '1' },
+    { label: 'Option 2', value: '2' },
+];
+const SelectForm = ({ close }) => (_jsxs(Flex, { gap: "8px", children: [_jsx(Input, { value: "Value", width: "150px", small: true }), _jsx(Select, { options: options, value: options[0], width: "auto", small: true }), _jsx(Button, { colored: true, label: "Save", onClick: () => { }, small: true }), _jsx(Button, { label: "Cancel", onClick: close, small: true })] }));
+export default {
+    title: 'Basic/Popover',
+    component: Popover,
+    args: {
+        overflowContainer: true,
+        content: _jsx(SelectForm, {}),
+        children: _jsx(Button, { label: "Toggle me" }),
+    },
+    decorators: [(story) => _jsx("div", { style: { display: 'flex' }, children: story() })],
+    parameters: {
+        docs: {
+            source: {
+                excludeDecorators: true,
+            },
+        },
+    },
+};
+const Template = (args) => _jsx(Popover, { ...args });
+export const Default = Template.bind({});
+export const InputTrigger = Template.bind({});
+InputTrigger.args = {
+    children: _jsx(Input, { value: "Value", width: "100%" }),
+};
+export const CloseButton = Template.bind({});
+CloseButton.args = {
+    closeOnOutsideClick: false,
+    showCloseButton: true,
+};
+export const Disabled = Template.bind({});
+Disabled.args = {
+    disabled: true,
+};

package/dist/components/portal/portal.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+export interface IPortalProps {
+    id: string;
+    children: ReactNode | any;
+}
+export declare const Portal: ({ id, children }: IPortalProps) => import("react").ReactPortal | null;

package/dist/components/portal/portal.js

@@ -0,0 +1,11 @@
+import { useLayoutEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
+export const Portal = ({ id, children }) => {
+    const parent = document.querySelector(`#${id}`);
+    const [mounted, setMounted] = useState(false);
+    useLayoutEffect(() => {
+        if (!mounted)
+            setMounted(true);
+    }, [id]);
+    return parent ? createPortal(children, parent) : null;
+};

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

@@ -0,0 +1,7 @@
+import { StoryFn } from '@storybook/react';
+import { IPortalProps } from './portal';
+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, IPortalProps>;
+export declare const CreatePortal: StoryFn<IPortalProps>;
+export declare const CreatePortalWithDynamicDOMNode: StoryFn<IPortalProps>;

package/dist/components/portal/portal.stories.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { Portal } from './portal';
+export default {
+    title: 'Modals/Portal',
+    component: Portal,
+    args: {
+        children: _jsx("div", { children: "Portal content" }),
+        id: 'portalContainer',
+    },
+    parameters: {
+        docs: {
+            story: {
+                inline: false,
+                iframeHeight: 400,
+            },
+        },
+    },
+};
+const Template = (args) => (_jsxs(_Fragment, { children: [_jsx(Portal, { ...args }), _jsx("div", { id: args.id })] }));
+export const Default = Template.bind({});
+export const CreatePortal = () => {
+    const parent = document.querySelector('#root');
+    return (_jsxs(_Fragment, { children: [_jsx("div", { id: "portalContainer" }), parent && createPortal(_jsx("div", { children: "Portal content" }), parent)] }));
+};
+CreatePortal.parameters = {
+    docs: {
+        source: { type: 'code' },
+        description: {
+            story: 'How to use React `createPortal()` directly',
+        },
+    },
+};
+export const CreatePortalWithDynamicDOMNode = () => {
+    const parent = document.querySelector('#portalContainer');
+    const [visible, setVisible] = useState(false);
+    useEffect(() => {
+        if (!visible)
+            setVisible(true);
+    }, []);
+    return (_jsxs(_Fragment, { children: [_jsx("div", { id: "portalContainer" }), visible && parent && createPortal(_jsx("div", { children: "Portal content" }), parent)] }));
+};
+CreatePortalWithDynamicDOMNode.parameters = {
+    docs: {
+        source: { type: 'code' },
+        description: {
+            story: 'This story shows how to use React `createPortal()` directly. The domNode for `createPortal()` must exist. For a dynamic container, this is not the case on the first render.',
+        },
+    },
+};

package/dist/components/progress-bar/progress-bar.d.ts

@@ -0,0 +1,9 @@
+export interface IProgressBarProps {
+    width?: string | number;
+    inverted?: boolean;
+    colored?: boolean;
+    showProgressColors?: boolean;
+    percentage?: number;
+    noLabel?: boolean;
+}
+export declare const ProgressBar: ({ width, inverted, colored, showProgressColors, percentage, noLabel, }: IProgressBarProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/progress-bar/progress-bar.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import cx from 'classnames';
+import styles from './progress-bar.module.less';
+const getColor = (perct) => {
+    if (perct < 20)
+        return styles.grey;
+    if (perct < 40)
+        return styles.red;
+    if (perct < 60)
+        return styles.orange;
+    if (perct < 80)
+        return styles.yellow;
+    return styles.green;
+};
+export const ProgressBar = ({ width = 'auto', inverted = false, colored = true, showProgressColors = false, percentage = 0, noLabel = false, }) => {
+    return (_jsx("div", { style: { width }, "data-percent": percentage, children: _jsxs("div", { className: cx(styles.progress, inverted ? styles.inverted : ''), style: { width }, children: [_jsx("div", { className: cx(styles.bar, showProgressColors
+                        ? getColor(percentage)
+                        : colored
+                            ? styles.colored
+                            : ''), style: { width: `${percentage}%` }, children: _jsx("div", { className: styles.label, children: !noLabel && `${percentage}%` }) }), _jsx("div", { className: styles.label, children: !noLabel && `${percentage}%` })] }) }));
+};

package/dist/components/progress-bar/progress-bar.stories.d.ts

@@ -0,0 +1,4 @@
+import { IProgressBarProps } from './progress-bar';
+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, IProgressBarProps>;

package/dist/components/progress-bar/progress-bar.stories.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ProgressBar } from './progress-bar';
+export default {
+    title: 'Progress/ProgressBar',
+    component: ProgressBar,
+    args: {
+        colored: true,
+        inverted: false,
+        noLabel: false,
+        percentage: 30,
+        showProgressColors: false,
+        width: 'auto',
+    },
+};
+const Template = (args) => (_jsx(ProgressBar, { ...args }));
+export const Default = Template.bind({});

package/dist/components/radio-button/radio-button.d.ts

@@ -0,0 +1,27 @@
+import { ChangeEvent, MouseEvent } from 'react';
+export interface IRadioButtonOption {
+    label: string | number;
+    value: string | number;
+    testId?: string;
+    helpText?: string;
+    onClickHelp?: (event: MouseEvent<HTMLButtonElement>) => void;
+    name?: string;
+    checked?: boolean;
+    disabled?: boolean;
+}
+export interface IRadioButtonProps {
+    name?: string;
+    label?: string;
+    options: IRadioButtonOption[];
+    value: IRadioButtonOption;
+    inline?: boolean;
+    disabled?: boolean;
+    small?: boolean;
+    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+    noMargin?: boolean;
+    mainLabel?: string;
+    onClick?: (target: HTMLInputElement) => void;
+    radioButtonsData?: IRadioButtonOption[];
+    classForContainer?: 'grouped fields' | 'inline fields';
+}
+export declare const RadioButton: ({ name, label: rawLabel, options: rawOptions, value: rawValue, onChange, disabled, small, noMargin, onClick, inline, mainLabel, radioButtonsData, classForContainer, }: IRadioButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/radio-button/radio-button.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext } from 'react';
+import cx from 'classnames';
+import { standardizeInputs } from '../select/select.input';
+import { RadioInput } from './radio-input';
+import styles from './radio-button.module.less';
+import { DisabledContext } from '../../helpers/disabled-context';
+export const RadioButton = ({ name, label: rawLabel, options: rawOptions, value: rawValue, onChange, disabled = false, small = false, noMargin = false, onClick = () => { }, 
+// Deprecated
+inline = false, mainLabel = '', radioButtonsData, classForContainer = 'grouped fields', // Deprecated
+ }) => {
+    const disabledContext = useContext(DisabledContext);
+    const isDeprecated = radioButtonsData !== undefined;
+    const { simpleInputs, options, selectedOptions: value, } = isDeprecated
+        ? {
+            simpleInputs: false,
+            options: radioButtonsData,
+            selectedOptions: undefined,
+        }
+        : standardizeInputs(rawOptions, rawValue);
+    const selectedValue = isDeprecated || value === undefined || value === null
+        ? undefined
+        : simpleInputs
+            ? value
+            : value.value;
+    const label = isDeprecated ? mainLabel : rawLabel;
+    return (_jsxs("div", { className: cx(styles.wrapper, inline ? styles.inline : null, classForContainer === 'inline fields' ? styles.inline : null), children: [mainLabel && (_jsx("label", { className: cx(inline && styles.labelMargin), children: label })), options.map((option, index) => {
+                const selected = option.checked || option.value === selectedValue || false;
+                return (_jsx(RadioInput, { name: option.name || option.value, label: option.label, value: option.value, selected: selected, disabled: disabled || option.disabled || disabledContext, small: small, noMargin: noMargin, onChange: !option.disabled
+                        ? (evt) => {
+                            if (isDeprecated) {
+                                onClick(evt.target);
+                            }
+                            else {
+                                evt.target.name = name;
+                                evt.target.value = option.value.toString();
+                                evt.target.label = option.label.toString();
+                                if (onChange) {
+                                    onChange(evt);
+                                }
+                            }
+                        }
+                        : undefined, testId: option.testId, helpText: option.helpText, onClickHelp: option.onClickHelp }, index));
+            })] }));
+};

package/dist/components/radio-button/radio-button.stories.d.ts

@@ -0,0 +1,5 @@
+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, any>;
+export declare const HelpText: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, any>;
+export declare const OnClickHelp: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, any>;

package/dist/components/radio-button/radio-button.stories.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { RadioButton } from './radio-button';
+const options = [
+    { label: 'Aardvarks', value: 'termites' },
+    { label: 'Kangaroos', value: 'grass' },
+    { label: 'Monkeys', value: 'bananas', disabled: true },
+];
+export default {
+    title: 'Forms/RadioButton',
+    component: RadioButton,
+    args: {
+        options,
+        inline: false,
+        noMargin: false,
+        disabled: false,
+        small: false,
+    },
+};
+const Template = (args) => {
+    const [value, setValue] = useState(options[0]);
+    const handleChange = (evt) => {
+        const selectedValue = evt.target.value;
+        const selectedOption = options.find((opt) => opt.value === selectedValue);
+        if (selectedOption) {
+            setValue(selectedOption);
+        }
+    };
+    return _jsx(RadioButton, { ...args, value: value, onChange: handleChange });
+};
+export const Default = Template.bind({});
+export const HelpText = Template.bind({});
+HelpText.args = {
+    options: options.map((option, index) => ({
+        ...option,
+        helpText: `Help text #${index}`,
+    })),
+};
+export const OnClickHelp = Template.bind({});
+OnClickHelp.args = {
+    options: options.map((option, index) => ({
+        ...option,
+        onClickHelp: () => console.log(`Help #${index} clicked`),
+    })),
+};

package/dist/components/radio-button/radio-input.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+interface IRadioInputProps {
+    name: string | number;
+    label: string | number;
+    value: string | number;
+    selected: boolean;
+    disabled?: boolean;
+    small?: boolean;
+    onChange?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    noMargin?: boolean;
+    testId?: string;
+    helpText?: string;
+    onClickHelp?: (event?: any) => void;
+}
+export declare const RadioInput: ({ name, label, value, selected, disabled, small, onChange, noMargin, testId, helpText, onClickHelp, }: IRadioInputProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/radio-button/radio-input.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import cx from 'classnames';
+import { HelpIcon } from '../help-icon/help-icon';
+import styles from './radio-button.module.less';
+import { InputType } from "../../common-enum";
+export const RadioInput = ({ name, label, value, selected, disabled = false, small = false, onChange, noMargin = false, testId, helpText, onClickHelp, }) => {
+    const showHelp = helpText || onClickHelp;
+    return (_jsxs("div", { className: cx(styles.radio, disabled ? styles.disabled : null, small ? styles.small : null, noMargin ? styles.noMargin : null), onClick: onChange, "data-testid": testId, children: [_jsx("input", { type: InputType.RADIO, value: value, checked: selected, onChange: () => { }, disabled: disabled }), _jsx("label", { "data-name": name, "data-value": value, children: label }), showHelp && _jsx(HelpIcon, { text: helpText, onClick: onClickHelp })] }));
+};