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

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

@@ -1,51 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useArgs } from '@storybook/addons';
-import * as storyData from './button-group.stories-data';
-import { ButtonGroup } from './button-group';
-export default {
-    title: 'Forms/ButtonGroup',
-    component: ButtonGroup,
-    args: {
-        disabled: false,
-        items: storyData.buttonsArrayOfObjects,
-        value: '0',
-        small: false,
-        testId: undefined,
-        onSelected: () => { },
-    },
-};
-const Template = (args) => {
-    const [_, updateArgs] = useArgs();
-    const handleChange = (evt) => {
-        updateArgs({ value: evt });
-    };
-    return (_jsx(ButtonGroup
-    // eslint-disable-next-line react/jsx-props-no-spreading
-    , { ...args, onSelected: handleChange }));
-};
-export const Default = Template.bind({});
-export const Icons = Template.bind({});
-Icons.args = { items: storyData.buttonsWithIcons };
-export const Tooltips = Template.bind({});
-Tooltips.args = { items: storyData.buttonsWithTooltips };
-export const Disabled = Template.bind({});
-Disabled.args = { disabled: true };
-export const ArrayOfStrings = Template.bind({});
-// @ts-ignore: data mismatch
-ArrayOfStrings.args = { items: storyData.buttonsArrayOfStrings };
-ArrayOfStrings.parameters = {
-    docs: {
-        description: {
-            story: 'For simple cases when button key, label and value are the same.',
-        },
-    },
-};
-export const ArrayOfArrays = Template.bind({});
-ArrayOfArrays.args = { items: storyData.buttonsArrayOfArrays };
-ArrayOfArrays.parameters = {
-    docs: {
-        description: {
-            story: 'Avoid this deprecated legacy usage (still supported, but may be removed in future).',
-        },
-    },
-};

package/dist/components/card/card.d.ts

@@ -1,10 +0,0 @@
-import { ReactNode } from 'react';
-export interface ICardProps {
-    bordered?: boolean;
-    heading?: ReactNode;
-    margin?: string;
-    padding?: boolean;
-    raised?: boolean;
-    children?: ReactNode;
-}
-export declare const Card: ({ bordered, heading, children, margin, padding, raised, }: ICardProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/card/card.js

@@ -1,6 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import cx from 'classnames';
-import styles from './card.module.less';
-export const Card = ({ bordered = true, heading = null, children, margin = '0', padding = true, raised = false, }) => {
-    return (_jsxs("div", { className: cx(styles.card, bordered ? styles.bordered : '', raised ? styles.raised : ''), style: { margin }, children: [heading ? _jsx("div", { className: cx(styles.cardHeader), children: heading }) : null, _jsx("div", { className: cx(styles.cardContent, heading ? styles.cardContentBorderTop : '', padding ? styles.padding : ''), children: children })] }));
-};

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

@@ -1,8 +0,0 @@
-import { ICardProps } from './card';
-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, ICardProps>;
-export declare const WithHeading: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, ICardProps>;
-export declare const WithHelpHeading: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, ICardProps>;
-export declare const NoPadding: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, ICardProps>;
-export declare const NoBorder: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, ICardProps>;

package/dist/components/card/card.stories.js

@@ -1,27 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Card } from './card';
-import { Heading } from '../heading/heading';
-export default {
-    title: 'Layout/Card',
-    component: Card,
-    args: {
-        raised: false,
-        children: 'Content goes here',
-        padding: true,
-        bordered: true,
-    },
-};
-const Template = (args) => _jsx(Card, { ...args });
-export const Default = Template.bind({});
-export const WithHeading = Template.bind({});
-WithHeading.args = {
-    heading: _jsx(Heading, { children: "Heading" }),
-};
-export const WithHelpHeading = Template.bind({});
-WithHelpHeading.args = {
-    heading: _jsx(Heading, { onClickHelp: () => console.log('help!'), children: "Heading" }),
-};
-export const NoPadding = Template.bind({});
-NoPadding.args = { padding: false };
-export const NoBorder = Template.bind({});
-NoBorder.args = { bordered: false };

package/dist/components/check-box/check-box.d.ts

@@ -1,19 +0,0 @@
-import React from 'react';
-export interface ICheckBoxProps {
-    checked?: boolean;
-    isInTable?: boolean;
-    label?: string;
-    name?: string;
-    noMargin?: boolean;
-    onChange: (evt: React.ChangeEvent<HTMLInputElement>) => void;
-    tabIndex?: number;
-    disabled?: boolean;
-    small?: boolean;
-    testId?: string;
-    key?: string;
-    dataix?: number;
-    value?: string;
-    helpText?: string;
-    onClickHelp?: () => void;
-}
-export declare const CheckBox: ({ noMargin, dataix, isInTable, tabIndex, checked, name, key, label, disabled, small, onChange, testId, value, helpText, onClickHelp, }: ICheckBoxProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/check-box/check-box.js

@@ -1,19 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useContext } from 'react';
-import cx from 'classnames';
-import styles from './check-box.module.less';
-import { DisabledContext } from '../../helpers/disabled-context';
-import { HelpIcon } from '../help-icon/help-icon';
-import { Icon } from '../icon/icon';
-import { IconType } from "../../common-enum";
-export const CheckBox = ({ noMargin = false, dataix = 0, isInTable = false, tabIndex = 0, checked = false, name, key = '', label = '', disabled = false, small = false, onChange, testId, value, helpText, onClickHelp, }) => {
-    const disabledContext = useContext(DisabledContext);
-    const showHelp = helpText || onClickHelp;
-    return (_jsxs("div", { className: cx(styles.checkbox, noMargin && styles.noMargin, isInTable && styles.isInTable, (disabled || disabledContext) && styles.disabled, small && styles.small, !label && styles.noLabel), "data-ix": dataix, onClick: (evt) => {
-            const target = evt.target;
-            target.name = name;
-            target.value = String(!checked);
-            target.checked = !checked;
-            onChange(evt);
-        }, "data-testid": testId, children: [_jsx("input", { type: "checkbox", tabIndex: tabIndex, checked: checked, name: name, onChange: () => { }, disabled: disabled || disabledContext }, key), _jsxs("label", { htmlFor: name, children: [_jsx("span", { className: styles.checkmark, children: _jsx(Icon, { icon: IconType.CHECK }) }), label] }), showHelp && _jsx(HelpIcon, { text: helpText, onClick: onClickHelp })] }));
-};

package/dist/components/check-box/check-box.stories.d.ts

@@ -1,6 +0,0 @@
-import { ICheckBoxProps } from './check-box';
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, ICheckBoxProps>;
-export default _default;
-export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, ICheckBoxProps>;
-export declare const HelpText: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, ICheckBoxProps>;
-export declare const OnClickHelp: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, ICheckBoxProps>;

package/dist/components/check-box/check-box.stories.js

@@ -1,29 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useArgs } from '@storybook/addons';
-import { CheckBox } from './check-box';
-export default {
-    title: 'Forms/CheckBox',
-    component: CheckBox,
-    args: {
-        disabled: false,
-        label: 'Label',
-    },
-};
-const Template = (args) => {
-    const [{ checked }, updateArgs] = useArgs();
-    const handleChange = () => {
-        updateArgs({ checked: !checked });
-    };
-    return (_jsx(CheckBox
-    // eslint-disable-next-line react/jsx-props-no-spreading
-    , { ...args, onChange: handleChange }));
-};
-export const Default = Template.bind({});
-export const HelpText = Template.bind({});
-HelpText.args = {
-    helpText: 'Help text',
-};
-export const OnClickHelp = Template.bind({});
-OnClickHelp.args = {
-    onClickHelp: () => console.log('Help clicked'),
-};

package/dist/components/color/color.stories-data.d.ts

@@ -1,9 +0,0 @@
-import { ReactElement } from 'react';
-export declare const colorsText: string[];
-export declare const colorsBackground: string[];
-export declare const colorsBorder: string[];
-interface IColorPaletteProps {
-    colors: string[];
-}
-export declare const ColorPalette: ({ colors, }: IColorPaletteProps) => ReactElement;
-export {};

package/dist/components/color/color.stories-data.js

@@ -1,55 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment } from 'react';
-import { toast } from '../toaster/toaster';
-export const colorsText = [
-    '--color-text',
-    '--color-text-muted',
-    '--color-text-faint',
-    '--color-text-error',
-    '--color-text-warning',
-    '--color-text-success',
-    '--color-text-info',
-    '--color-text-primary',
-    '--color-text-primary-hover',
-    '--color-text-primary-active',
-];
-export const colorsBackground = [
-    '--color-background',
-    '--color-background-raised',
-    '--color-background-primary',
-    '--color-background-info',
-    '--color-background-warning',
-    '--color-background-success',
-    '--color-background-error',
-];
-export const colorsBorder = [
-    '--color-border',
-    '--color-border-error',
-    '--color-border-warning',
-    '--color-border-focus',
-];
-export const ColorPalette = ({ colors, }) => {
-    return (_jsx("div", { style: {
-            display: 'grid',
-            gridTemplateColumns: 'auto 1fr auto 1fr',
-            gap: 20,
-            alignItems: 'center',
-        }, children: colors.map((color, index) => {
-            const variable = `var(${color})`;
-            const handleClick = () => {
-                // TODO - consider this error (promise returned from writeText is ignored )
-                navigator.clipboard.writeText(variable);
-                toast({
-                    message: {
-                        type: 'Success',
-                        content: 'Copied to clipboard',
-                    },
-                });
-            };
-            return (_jsxs(Fragment, { children: [_jsx("div", { style: {
-                            padding: '16px 20px',
-                            backgroundColor: variable,
-                            border: '1px solid rgba(0,0,0,0.1)',
-                        }, onClick: handleClick }), _jsx("code", { onClick: handleClick, children: variable })] }, index));
-        }) }));
-};

package/dist/components/dialog/dialog.d.ts

@@ -1,17 +0,0 @@
-import { ReactNode } from 'react';
-export interface IDialog {
-    heading?: string;
-    content?: ReactNode | string[];
-    contentPadding?: number | string;
-    footer?: ReactNode;
-    width?: number | string;
-    height?: number | string;
-    bordered?: boolean;
-    onClose?: () => void;
-    scroll?: boolean;
-    testId?: string;
-}
-export interface IDialogProps {
-    dialog: IDialog;
-}
-export declare const Dialog: ({ dialog }: IDialogProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/dialog/dialog.js

@@ -1,18 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment } from 'react';
-import cx from 'classnames';
-import { isArray } from 'lodash';
-import { Heading } from '../heading/heading';
-import styles from './dialog.module.less';
-import { Icon } from '../icon/icon';
-import { IconType } from "../../common-enum";
-const convertStringToJsx = (children) => {
-    if (isArray(children)) {
-        return children.map((text, index) => (_jsxs(Fragment, { children: [text, " ", _jsx("br", {})] }, index)));
-    }
-    return children;
-};
-export const Dialog = ({ dialog }) => {
-    const { heading, content, contentPadding = 20, footer, scroll, width, height, onClose, testId, } = dialog;
-    return (_jsxs("div", { className: cx(styles.dialog, width ? styles.inline : null, scroll ? styles.scroll : null), style: { width, height }, "data-testid": testId ?? null, children: [_jsxs("div", { className: styles.header, children: [_jsx(Heading, { testId: testId && `${testId}-heading`, top: true, marginBottom: 0, children: heading }), onClose ? (_jsx("div", { className: styles.dismiss, children: _jsx(Icon, { icon: IconType.CLOSE, onClick: onClose }) })) : null] }), _jsx("div", { "data-testid": testId && `${testId}-content`, className: styles.content, style: { padding: contentPadding }, children: convertStringToJsx(content) }), footer && (_jsx("div", { "data-testid": testId && `${testId}-footer`, className: styles.footer, children: footer }))] }));
-};

package/dist/components/divider/divider.d.ts

@@ -1,9 +0,0 @@
-import React from 'react';
-import { Align } from "../../common-enum";
-export interface IDividerProps {
-    margin?: number | string;
-    color?: string;
-    align?: Align;
-    children?: React.ReactNode;
-}
-export declare const Divider: ({ children, margin, color, align, }: IDividerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/divider/divider.js

@@ -1,19 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import styles from './divider.module.less';
-import { Text } from '../text/text';
-import { Align } from "../../common-enum";
-const cssAlignClass = (align) => {
-    switch (align) {
-        case Align.LEFT:
-            return styles.alignLeft;
-        case Align.RIGHT:
-            return styles.alignRight;
-        default:
-            return '';
-    }
-};
-export const Divider = ({ children, margin = 20, color = 'var(--color-border)', align = Align.CENTER, }) => (_jsx("div", { className: `${styles.divider} ${cssAlignClass(align)}`, style: {
-        marginTop: margin,
-        marginBottom: margin,
-        '--color': color,
-    }, children: typeof children === 'string' ? _jsx(Text, { muted: true, children: children }) : children }));

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

@@ -1,7 +0,0 @@
-import { IDividerProps } from "./divider";
-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, IDividerProps>;
-export declare const WithText: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IDividerProps>;
-export declare const Margin: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IDividerProps>;
-export declare const CustomColor: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IDividerProps>;

package/dist/components/divider/divider.stories.js

@@ -1,41 +0,0 @@
-import { Fragment as _Fragment, jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { Text } from "../text/text";
-import { Divider } from "./divider";
-import { Align } from "../../common-enum";
-export default {
-    title: 'Layout/Divider',
-    component: Divider,
-    argTypes: {
-        align: {
-            control: {
-                type: 'inline-radio',
-            },
-            options: ['left', 'center', 'right'],
-        },
-    },
-    decorators: [(story) => _jsxs(_Fragment, { children: ["content", story(), "more content"] })],
-    parameters: {
-        docs: {
-            source: {
-                excludeDecorators: true,
-            },
-        },
-    },
-};
-const Template = (args) => _jsx(Divider, { ...args });
-export const Default = Template.bind({});
-export const WithText = Template.bind({});
-WithText.args = {
-    children: 'Heading',
-    align: Align.LEFT,
-};
-export const Margin = Template.bind({});
-Margin.args = {
-    margin: 0,
-};
-export const CustomColor = Template.bind({});
-CustomColor.args = {
-    color: 'var(--color-text-success)',
-    children: _jsx(Text, { success: true, children: "Colored text" }),
-    align: Align.LEFT,
-};

package/dist/components/drawer/drawer-resize-wrapper.d.ts

@@ -1,2 +0,0 @@
-import { IDrawerResizeWrapperProps } from './drawer.interface';
-export declare const DrawerResizeWrapper: ({ children, width, right, onResize, setOpen, }: IDrawerResizeWrapperProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/drawer/drawer-resize-wrapper.js

@@ -1,33 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import { forwardRef, useState } from 'react';
-import { toNumber } from 'lodash';
-import { Resizable } from "react-resizable";
-import styles from './drawer.module.less';
-import { TABS_WIDTH } from './drawer.constants';
-import { Icon } from '../icon/icon';
-import { IconType } from "../../common-enum";
-const ResizeHandle = forwardRef((props, ref) => {
-    const { handleAxis, ...rest } = props;
-    return (_jsx("div", { ref: ref, className: styles.resizeHandle, ...rest, children: _jsx(Icon, { icon: IconType.DRAG_HORIZONTAL }) }));
-});
-export const DrawerResizeWrapper = ({ children = null, width = 400, right = false, onResize, setOpen, }) => {
-    const [isResizing, setIsResizing] = useState(false);
-    const MAXIMUM_OPEN_WIDTH = window.innerWidth / 2;
-    const handleResize = (event, { size }) => {
-        if (onResize)
-            onResize(size.width);
-    };
-    return onResize ? (_jsx(Resizable, { width: toNumber(width), height: 100, minConstraints: [TABS_WIDTH, Infinity], maxConstraints: [MAXIMUM_OPEN_WIDTH, Infinity], onResize: handleResize, handle: _jsx(ResizeHandle, {}), resizeHandles: right ? ['w'] : ['e'], axis: "x", className: isResizing ? styles.isResizing : '', onResizeStart: () => {
-            if (setOpen)
-                setOpen(true);
-            if (onResize)
-                onResize(width);
-            setIsResizing(true);
-        }, onResizeStop: () => {
-            setIsResizing(false);
-            if (typeof width === 'number' && width < TABS_WIDTH + 50) {
-                if (setOpen)
-                    setOpen(false);
-            }
-        }, children: children })) : (_jsx(_Fragment, { children: children }));
-};

package/dist/components/drawer/drawer-tabs.d.ts

@@ -1,2 +0,0 @@
-import { IDrawerTabsProps } from './drawer.interface';
-export declare const DrawerTabs: ({ tabs, activeTab, open, background, handleTabClick, width, testId, }: IDrawerTabsProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/drawer/drawer-tabs.js

@@ -1,15 +0,0 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import cx from 'classnames';
-import styles from './drawer.module.less';
-import { Badge } from '../badge/badge';
-const TabBadge = ({ badge, children }) => {
-    if (!badge)
-        return _jsx(_Fragment, { children: children });
-    return (_jsx(Badge, { small: true, title: badge.toString(), children: children }));
-};
-export const DrawerTabs = ({ tabs, activeTab, open, background, handleTabClick, width, testId, }) => {
-    return (_jsxs(_Fragment, { children: [_jsx("div", { className: styles.tabs, children: tabs.map((tab, index) => (_jsx("div", { className: cx(styles.tab, activeTab === index && open ? styles.active : ''), style: { background }, onClick: () => handleTabClick(index), "data-testid": testId && `${testId}-icon-${index}`, children: _jsx(TabBadge, { badge: tab.badge, children: tab.icon }) }, index))) }), tabs.map((tab, index) => {
-                const active = activeTab === index;
-                return (_jsx("div", { style: { width: typeof width === 'number' ? `${width}px` : width }, className: styles.tabsContent, "data-testid": testId && `${testId}-content-${index}`, children: active && open && tab.content }, index));
-            })] }));
-};

package/dist/components/drawer/drawer.constants.d.ts

@@ -1,2 +0,0 @@
-export declare const TABS_WIDTH: number;
-export declare const MIN_OPEN_WIDTH: number;

package/dist/components/drawer/drawer.constants.js

@@ -1,2 +0,0 @@
-export const TABS_WIDTH = 37;
-export const MIN_OPEN_WIDTH = 240;

package/dist/components/drawer/drawer.d.ts

@@ -1,2 +0,0 @@
-import { IDrawerProps } from './drawer.interface';
-export declare const Drawer: ({ background, fixed, open: openProp, setOpen: setOpenProp, right, width, closedWidth, shadow, top, button, buttonAnimate, buttonPosition, border, children, tabs, defaultTabIndex, activeTab: activeTabProp, setActiveTab: setActiveTabProp, testId, onResize, getActiveTab, onClose, onOpen, }: IDrawerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/drawer/drawer.interface.d.ts

@@ -1,55 +0,0 @@
-import React, { ReactNode } from 'react';
-import { ButtonPosition } from "../../common-enum";
-export interface ITabBadgeProps {
-    badge?: string | number;
-    children: ReactNode;
-}
-export interface IDrawerTab {
-    icon?: ReactNode | React.JSX.Element;
-    content?: ReactNode;
-    badge?: string | number;
-}
-export interface IDrawerTabsProps {
-    tabs: IDrawerTab[];
-    activeTab: number;
-    open: boolean;
-    background: string;
-    handleTabClick: (index: number) => void;
-    width: number | string;
-    testId?: string;
-}
-export interface IDrawerResizeHandleProps {
-    handleAxis?: string;
-}
-export interface IDrawerResizeWrapperProps {
-    children?: ReactNode;
-    width: number | string;
-    right?: boolean;
-    onResize?: (width: number | string) => void;
-    setOpen?: ((isOpen: boolean) => void) | null;
-}
-export interface IDrawerProps {
-    background?: string;
-    children?: ReactNode;
-    fixed?: boolean;
-    open?: boolean;
-    setOpen?: (openState: boolean) => void;
-    right?: boolean;
-    shadow?: boolean;
-    top?: string | number;
-    width?: string | number | Array<string | number>;
-    closedWidth?: string | number;
-    button?: boolean | ReactNode;
-    buttonAnimate?: boolean;
-    buttonPosition?: ButtonPosition;
-    border?: boolean | string;
-    tabs?: IDrawerTab[];
-    defaultTabIndex?: number;
-    activeTab?: number;
-    setActiveTab?: (index: number) => void;
-    testId?: string;
-    onResize?: (width: number | string | (number | string)[]) => void;
-    getActiveTab?: (tab: IDrawerTab) => void;
-    onClose?: (tab?: IDrawerTab) => any;
-    onOpen?: (tab?: IDrawerTab) => any;
-}

package/dist/components/drawer/drawer.interface.js

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

package/dist/components/drawer/drawer.js

@@ -1,80 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { isValidElement, useState } from 'react';
-import cx from 'classnames';
-import { DrawerTabs } from './drawer-tabs';
-import styles from './drawer.module.less';
-import { DrawerResizeWrapper } from './drawer-resize-wrapper';
-import { MIN_OPEN_WIDTH, TABS_WIDTH } from './drawer.constants';
-import { Button } from '../button/button';
-import { ButtonPosition, IconType } from "../../common-enum";
-export const Drawer = ({ background = 'var(--color-background-raised)', fixed = false, open: openProp = false, setOpen: setOpenProp, right = false, width = 400, closedWidth = 0, shadow = false, top = 0, button = null, buttonAnimate = true, buttonPosition = ButtonPosition.BOTTOM, border = false, children = null, tabs, defaultTabIndex = 0, activeTab: activeTabProp, setActiveTab: setActiveTabProp, testId, onResize, getActiveTab, onClose, onOpen, }) => {
-    const isStandardButton = button === true;
-    const isCustomButton = !isStandardButton && isValidElement(button);
-    const [localOpen, setLocalOpen] = setOpenProp
-        ? [openProp, setOpenProp]
-        : isStandardButton || tabs
-            ? useState(openProp)
-            : [openProp, () => { }];
-    const [localActiveTab, setLocalActiveTab] = useState(defaultTabIndex);
-    const openState = setOpenProp ? openProp : localOpen;
-    const setOpenState = setOpenProp || setLocalOpen;
-    const activeTabState = setActiveTabProp !== undefined ? activeTabProp : localActiveTab;
-    const setActiveTabState = setActiveTabProp || setLocalActiveTab;
-    const openWidth = Array.isArray(width) ? width[activeTabState || 0] : width;
-    const currentWidth = openState ? openWidth : tabs ? TABS_WIDTH : closedWidth;
-    const handleTabClick = (index) => {
-        const tabAction = (callback) => {
-            if (tabs && callback) {
-                callback(tabs[index]);
-            }
-        };
-        if (activeTabState === index && openState && setOpenState) {
-            tabAction(onClose);
-            setOpenState(false);
-        }
-        else if (!openState && setOpenState) {
-            tabAction(onOpen);
-            setOpenState(true);
-            if (onResize) {
-                // TODO: Revisit this function for optimization or refactoring in the future
-                const checkAndResize = (w) => {
-                    let targetWidth;
-                    // Check if 'w' is an array
-                    if (Array.isArray(w)) {
-                        // Use the width based on the active tab index or default to the first width value
-                        targetWidth = w[activeTabState || 0];
-                    }
-                    else {
-                        targetWidth = w;
-                    }
-                    if (typeof targetWidth === 'number' && targetWidth < MIN_OPEN_WIDTH) {
-                        onResize(MIN_OPEN_WIDTH);
-                    }
-                    else if (typeof targetWidth === 'string') {
-                        const numWidth = parseInt(targetWidth, 10);
-                        if (!isNaN(numWidth) && numWidth < MIN_OPEN_WIDTH) {
-                            onResize(MIN_OPEN_WIDTH);
-                        }
-                    }
-                };
-                checkAndResize(width);
-            }
-        }
-        setActiveTabState(index);
-        tabAction(getActiveTab);
-    };
-    return (_jsx(DrawerResizeWrapper, { width: currentWidth, onResize: onResize, setOpen: setOpenState, right: right, children: _jsxs("div", { className: cx(styles.drawer, shadow ? styles.shadow : '', fixed ? styles.fixed : styles.inline, right ? styles.right : styles.left), style: { top }, children: [_jsx("div", { className: cx(styles.drawerContent, border && styles.border), style: {
-                        background,
-                        borderColor: typeof border === 'string' ? border : undefined,
-                        width: currentWidth,
-                    }, children: tabs ? (_jsx(DrawerTabs, { width: openWidth,
-                        testId,
-                        tabs,
-                        open: openState,
-                        activeTab: activeTabState || 0,
-                        background,
-                        handleTabClick })) : (_jsx("div", { style: { width: openWidth }, children: children })) }), button && (_jsx("span", { className: cx(styles.toggleButton, localOpen &&
-                        (isStandardButton || (isCustomButton && buttonAnimate))
-                        ? styles.toggleButtonOpen
-                        : '', buttonPosition === 'top' ? styles.top : styles.bottom), children: isCustomButton ? (button) : (_jsx(Button, { onClick: setOpenState ? () => setOpenState(!openState) : undefined, round: true, icon: right ? IconType.CHEVRON_RIGHT : IconType.CHEVRON_LEFT })) }))] }) }));
-};

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

@@ -1,40 +0,0 @@
-import { IDrawerProps } from './drawer.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, IDrawerProps>;
-export declare const Right: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IDrawerProps>;
-export declare const Fixed: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IDrawerProps>;
-export declare const CustomButton: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IDrawerProps>;
-export declare const WithList: {
-    (): import("react/jsx-runtime").JSX.Element;
-    parameters: {
-        docs: {
-            description: {
-                story: string;
-            };
-        };
-    };
-};
-export declare const Tabs: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IDrawerProps>;
-export declare const ControlledOpenClose: {
-    (): import("react/jsx-runtime").JSX.Element;
-    parameters: {
-        docs: {
-            description: {
-                story: string;
-            };
-        };
-    };
-};
-export declare const ControlledTabs: {
-    (): import("react/jsx-runtime").JSX.Element;
-    parameters: {
-        docs: {
-            description: {
-                story: string;
-            };
-        };
-    };
-};
-export declare const MultipleTabbedDrawers: () => import("react/jsx-runtime").JSX.Element;
-export declare const Resizable: () => import("react/jsx-runtime").JSX.Element;