@seeqdev/qomponents 0.0.132 → 0.0.134

package/dist/ButtonGroup/ButtonGroup.test.js

@@ -1,67 +1,67 @@
-import React from 'react';
-import { render, fireEvent } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
-import { ButtonGroup } from './ButtonGroup';
-describe('ButtonGroup', () => {
-    const mockOnChange = jest.fn();
-    const defaultProps = {
-        id: 'test-id',
-        extraClassNames: 'extra-class',
-        testId: 'button-group',
-        onChange: mockOnChange,
-        buttons: [
-            {
-                variant: 'button',
-                buttonProps: {
-                    testId: 'button1',
-                    value: 'button1',
-                    variant: 'outline',
-                    extraClassNames: 'button-class',
-                    isActive: true,
-                },
-            },
-            {
-                variant: 'button',
-                buttonProps: {
-                    testId: 'button2',
-                    value: 'button2',
-                    variant: 'theme',
-                    extraClassNames: 'button-class',
-                },
-            },
-            {
-                variant: 'element',
-                element: React.createElement("span", null, "Custom Element"),
-            },
-        ],
-    };
-    it('renders ButtonGroup with buttons and custom elements', () => {
-        const { getByTestId } = render(React.createElement(ButtonGroup, { ...defaultProps }));
-        const buttonGroup = getByTestId('button-group');
-        expect(buttonGroup).toBeInTheDocument();
-        expect(buttonGroup).toHaveClass('tw-flex tw-outline-none tw-rounded-sm tw-w-full tw-relative tw-flex-wrap extra-class');
-        const button1 = getByTestId('button1');
-        expect(button1).toBeInTheDocument();
-        expect(button1).toHaveClass('button-class');
-        const button2 = getByTestId('button2');
-        expect(button2).toBeInTheDocument();
-        expect(button2).toHaveClass('button-class');
-    });
-    it('calls onChange when a button is clicked', () => {
-        const { getByTestId } = render(React.createElement(ButtonGroup, { ...defaultProps }));
-        const button1 = getByTestId('button1');
-        fireEvent.click(button1);
-        expect(mockOnChange).toHaveBeenCalledWith('button1');
-        const button2 = getByTestId('button2');
-        fireEvent.click(button2);
-        expect(mockOnChange).toHaveBeenCalledWith('button2');
-    });
-    it('applies active classes based on value and variant', () => {
-        const { getByTestId } = render(React.createElement(ButtonGroup, { ...defaultProps }));
-        const button1 = getByTestId('button1');
-        expect(button1).toHaveClass('!tw-bg-sq-disabled-gray tw-border-sq-color-dark');
-        const button2 = getByTestId('button2');
-        expect(button2).not.toHaveClass('tw-bg-sq-color-highlight');
-    });
-});
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import { ButtonGroup } from './ButtonGroup';
+describe('ButtonGroup', () => {
+    const mockOnChange = jest.fn();
+    const defaultProps = {
+        id: 'test-id',
+        extraClassNames: 'extra-class',
+        testId: 'button-group',
+        onChange: mockOnChange,
+        buttons: [
+            {
+                variant: 'button',
+                buttonProps: {
+                    testId: 'button1',
+                    value: 'button1',
+                    variant: 'outline',
+                    extraClassNames: 'button-class',
+                    isActive: true,
+                },
+            },
+            {
+                variant: 'button',
+                buttonProps: {
+                    testId: 'button2',
+                    value: 'button2',
+                    variant: 'theme',
+                    extraClassNames: 'button-class',
+                },
+            },
+            {
+                variant: 'element',
+                element: React.createElement("span", null, "Custom Element"),
+            },
+        ],
+    };
+    it('renders ButtonGroup with buttons and custom elements', () => {
+        const { getByTestId } = render(React.createElement(ButtonGroup, { ...defaultProps }));
+        const buttonGroup = getByTestId('button-group');
+        expect(buttonGroup).toBeInTheDocument();
+        expect(buttonGroup).toHaveClass('tw-flex tw-outline-none tw-rounded-sm tw-w-full tw-relative tw-flex-wrap extra-class');
+        const button1 = getByTestId('button1');
+        expect(button1).toBeInTheDocument();
+        expect(button1).toHaveClass('button-class');
+        const button2 = getByTestId('button2');
+        expect(button2).toBeInTheDocument();
+        expect(button2).toHaveClass('button-class');
+    });
+    it('calls onChange when a button is clicked', () => {
+        const { getByTestId } = render(React.createElement(ButtonGroup, { ...defaultProps }));
+        const button1 = getByTestId('button1');
+        fireEvent.click(button1);
+        expect(mockOnChange).toHaveBeenCalledWith('button1');
+        const button2 = getByTestId('button2');
+        fireEvent.click(button2);
+        expect(mockOnChange).toHaveBeenCalledWith('button2');
+    });
+    it('applies active classes based on value and variant', () => {
+        const { getByTestId } = render(React.createElement(ButtonGroup, { ...defaultProps }));
+        const button1 = getByTestId('button1');
+        expect(button1).toHaveClass('!tw-bg-sq-disabled-gray tw-border-sq-color-dark');
+        const button2 = getByTestId('button2');
+        expect(button2).not.toHaveClass('tw-bg-sq-color-highlight');
+    });
+});
 //# sourceMappingURL=ButtonGroup.test.js.map

package/dist/ButtonGroup/ButtonGroup.types.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ButtonProps } from '../Button/Button.types';
 import { TooltipComponentProps } from '../Tooltip/Tooltip.types';
 /**

package/dist/ButtonGroup/ButtonGroup.types.js

@@ -1,2 +1,2 @@
-export {};
+export {};
 //# sourceMappingURL=ButtonGroup.types.js.map

package/dist/ButtonGroup/index.js

@@ -1,2 +1,2 @@
-export { ButtonGroup as default } from './ButtonGroup';
+export { ButtonGroup as default } from './ButtonGroup';
 //# sourceMappingURL=index.js.map

package/dist/ButtonWithDropdown/ButtonWithDropdown.js

@@ -1,60 +1,60 @@
-import * as React from 'react';
-import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
-import Icon from '../Icon';
-import { getQTipData } from '../Tooltip/qTip.utilities';
-const borderStyles = [
-    'tw-border-solid',
-    'tw-border',
-    'tw-rounded-sm',
-    'tw-border-sq-disabled-gray',
-    'dark:tw-border-gray-500',
-].join(' ');
-const bgStyles = ['tw-bg-sq-white', 'dark:tw-bg-sq-dark-background'].join(' ');
-const disabledClasses = ['tw-opacity-50', 'tw-cursor-not-allowed'].join(' ');
-const ButtonWithDropdown = ({ dropdownItems, triggerIcon, id, extraClassNames = '', contentExtraClassNames = '', containerTestId, disabled = false, align = 'end', placement = 'bottom', placementOffset = 5, alignOffset = -35, hasArrow = false, onOpenChange, isOpen, setFocusOnTriggerOnClose = true, keepFocusInsideDropdown = true, onContainerClick, ...tooltipProps }) => {
-    const tooltipData = getQTipData(tooltipProps);
-    return (React.createElement(DropdownMenu.Root, { defaultOpen: false, open: isOpen, onOpenChange: onOpenChange, modal: keepFocusInsideDropdown },
-        React.createElement(DropdownMenu.Trigger, { id: id, className: `tw-border-none focus-visible:tw-outline-none focus:tw-outline-none focus-within:tw-outline-none`, disabled: disabled },
-            React.createElement("div", { ...tooltipData, className: `tw-bg-transparent tw-flex tw-flex-col tw-items-center focus-visible:tw-outline-none focus:tw-outline-none focus-within:tw-outline-none ${disabled ? disabledClasses : ''} ${extraClassNames}` }, triggerIcon)),
-        React.createElement(DropdownMenu.Portal, null,
-            React.createElement(DropdownMenu.Content, { onClick: onContainerClick, sideOffset: placementOffset, side: placement, align: align, alignOffset: alignOffset, asChild: true, onCloseAutoFocus: (e) => !setFocusOnTriggerOnClose && e.preventDefault(), className: "focus-visible:tw-outline-none tw-outline-none" },
-                React.createElement("div", { "data-testid": containerTestId, className: `${bgStyles} tw-relative tw-z-[1200] tw-min-w-6 tw-py-2 focus-visible:tw-outline-none tw-outline-none data-[state=open]:tw-animate-in data-[state=closed]:tw-animate-out forceFont data-[side=top]:tw-animate-slideDownAndFade data-[side=right]:tw-animate-slideLeftAndFade data-[side=bottom]:tw-animate-slideUpAndFade data-[side=left]:tw-animate-slideRightAndFade ${borderStyles} ${contentExtraClassNames}` },
-                    hasArrow && (React.createElement(DropdownMenu.Arrow, { asChild: true },
-                        React.createElement("div", { className: " tw-fill-transparent tw-bg-white tw-w-[15px] tw-h-[15px] tw-rotate-45 dark:tw-bg-sq-dark-background tw-border-b tw-border-r tw-border-sq-disabled-gray dark:tw-border-gray-500 tw-mt-[-7px]" }))),
-                    dropdownItems.map((item, index) => {
-                        const tooltipData = getQTipData(item);
-                        if (item.isLabel) {
-                            return (React.createElement(DropdownMenu.Label, { key: (item.id || '') + index, className: item.itemExtraClassNames, ...tooltipData },
-                                item.icon && (React.createElement(Icon, { icon: item.icon, testId: item.iconTestId, type: "text", color: item.iconColor, extraClassNames: "tw-text-sq-text-color dark:tw-text-sq-white tw-w-[18px]" })),
-                                React.createElement("div", { "data-testid": item.labelTestId, className: `tw-text-[13px] tw-ml-1 ${item.disabled ? 'tw-text-sq-disabled-gray' : 'tw-text-sq-text-color dark:tw-text-sq-white'} tw-not-italic tw-font-normal ${item.labelClasses}` }, item.label)));
-                        }
-                        if (Array.isArray(item.subMenuItems) && item.subMenuItems.length > 0) {
-                            return (React.createElement(DropdownMenu.Sub, { key: (item.id || item.icon || '') + index },
-                                React.createElement(DropdownMenu.SubTrigger, { id: id, className: `tw-cursor-pointer tw-flex tw-justify-between dark:tw-text-sq-white hover:tw-bg-sq-gray-highlight dark:hover:tw-bg-sq-gray-highlight-dark tw-leading-none tw-items-center tw-h-[27px] tw-pl-[19px] tw-relative tw-select-none tw-outline-none data-[disabled]:tw-pointer-events-none ${item.itemExtraClassNames || ''}`, "data-testid": item.testId, disabled: item.disabled, ...tooltipData },
-                                    React.createElement("div", { className: "tw-flex" },
-                                        item.icon && (React.createElement(Icon, { icon: item.icon, extraClassNames: `tw-w-[18px] ${item.disabled
-                                                ? '!tw-text-sq-disabled-gray'
-                                                : 'tw-text-sq-text-color dark:tw-text-sq-white'} ${item.iconExtraClassNames || ''}` })),
-                                        React.createElement("div", { "data-testid": item.labelTestId, "data-customid": item.labelCustomId, className: `tw-text-[13px] tw-ml-1 ${item.disabled && '!tw-opacity-30'} tw-not-italic tw-font-semibold ${item.labelClasses}` }, item.label)),
-                                    React.createElement(Icon, { small: true, icon: "fc-arrow-dropdown -tw-rotate-90", extraClassNames: `${item.disabled ? 'tw-text-sq-disabled-gray' : 'tw-text-sq-text-color dark:tw-text-sq-white'} tw-w-[18px] tw-ml-4 tw-text-[8px] tw-justify-center tw-flex` })),
-                                React.createElement(DropdownMenu.Portal, null,
-                                    React.createElement(DropdownMenu.SubContent, { className: "focus-visible:tw-outline-none tw-outline-none" },
-                                        React.createElement("div", { "data-testid": containerTestId, className: `${bgStyles} tw-relative tw-z-[1000] tw-min-w-6 tw-py-2 focus-visible:tw-outline-none tw-outline-none data-[state=open]:tw-animate-in data-[state=closed]:tw-animate-out forceFont data-[side=top]:tw-animate-slideDownAndFade data-[side=right]:tw-animate-slideLeftAndFade data-[side=bottom]:tw-animate-slideUpAndFade data-[side=left]:tw-animate-slideRightAndFade ${borderStyles}` }, item.subMenuItems.map((subItem, subIndex) => {
-                                            return (React.createElement(DropdownMenu.Item, { key: subItem.label + subIndex, onSelect: subItem.onClick, "data-qtip-text": subItem.tooltip, className: "tw-cursor-pointer tw-flex dark:tw-text-sq-white hover:tw-bg-sq-gray-highlight dark:hover:tw-bg-sq-gray-highlight-dark tw-leading-none tw-items-center tw-h-[27px] tw-px-[19px] tw-relative tw-select-none tw-outline-none data-[disabled]:tw-pointer-events-none", disabled: subItem.disabled },
-                                                subItem.iconClass && (React.createElement(Icon, { icon: subItem.iconClass, type: "text", extraClassNames: `tw-w-[18px] ${item.disabled && '!tw-opacity-30'}` })),
-                                                React.createElement("div", { className: `tw-text-[13px] tw-ml-1 ${subItem.disabled
-                                                        ? 'tw-text-sq-disabled-gray'
-                                                        : 'tw-text-sq-text-color dark:tw-text-sq-white'} tw-not-italic tw-font-normal ${item.labelClasses}` }, subItem.label)));
-                                        }))))));
-                        }
-                        return (React.createElement("div", { key: (item.id || '') + index, ...tooltipData },
-                            React.createElement(DropdownMenu.Item, { key: (item.id || item.icon || '') + index, "data-customid": item.itemCustomId, onSelect: (e) => {
-                                    item.onClick(e);
-                                }, className: `tw-cursor-pointer tw-flex dark:tw-text-sq-white hover:tw-bg-sq-gray-highlight dark:hover:tw-bg-sq-gray-highlight-dark tw-leading-none tw-items-center tw-min-h-[27px] tw-px-[19px] tw-relative tw-select-none tw-outline-none data-[disabled]:tw-pointer-events-none ${item.itemExtraClassNames || ''}`, "data-testid": item.testId, disabled: item.disabled },
-                                item.icon && (React.createElement(Icon, { icon: item.icon, testId: item.iconTestId, type: (item.iconType || 'text'), color: item.iconColor, customId: item.iconCustomId, extraClassNames: `tw-w-[18px] ${item.disabled && '!tw-opacity-30'} ${item.iconExtraClassNames || ''}` })),
-                                React.createElement("div", { "data-testid": item.labelTestId, "data-customid": item.labelCustomId, className: `tw-text-[13px] tw-ml-1 ${item.disabled ? 'tw-text-sq-disabled-gray' : 'tw-text-sq-text-color dark:tw-text-sq-white'} tw-not-italic tw-font-normal ${item.labelClasses || ''}` }, item.label)),
-                            item.hasDivider && (React.createElement(DropdownMenu.Separator, { "data-testid": `dropdown-divider-${index}`, className: "tw-h-[1px] tw-bg-sq-disabled-gray dark:tw-bg-gray-500 tw-my-[8px]" }))));
-                    }))))));
-};
-export default ButtonWithDropdown;
+import * as React from 'react';
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
+import Icon from '../Icon';
+import { getQTipData } from '../Tooltip/qTip.utilities';
+const borderStyles = [
+    'tw-border-solid',
+    'tw-border',
+    'tw-rounded-sm',
+    'tw-border-sq-disabled-gray',
+    'dark:tw-border-gray-500',
+].join(' ');
+const bgStyles = ['tw-bg-sq-white', 'dark:tw-bg-sq-dark-background'].join(' ');
+const disabledClasses = ['tw-opacity-50', 'tw-cursor-not-allowed'].join(' ');
+const ButtonWithDropdown = ({ dropdownItems, triggerIcon, id, extraClassNames = '', contentExtraClassNames = '', containerTestId, disabled = false, align = 'end', placement = 'bottom', placementOffset = 5, alignOffset = -35, hasArrow = false, onOpenChange, isOpen, setFocusOnTriggerOnClose = true, keepFocusInsideDropdown = true, onContainerClick, ...tooltipProps }) => {
+    const tooltipData = getQTipData(tooltipProps);
+    return (React.createElement(DropdownMenu.Root, { defaultOpen: false, open: isOpen, onOpenChange: onOpenChange, modal: keepFocusInsideDropdown },
+        React.createElement(DropdownMenu.Trigger, { id: id, className: `tw-border-none focus-visible:tw-outline-none focus:tw-outline-none focus-within:tw-outline-none`, disabled: disabled },
+            React.createElement("div", { ...tooltipData, className: `tw-bg-transparent tw-flex tw-flex-col tw-items-center focus-visible:tw-outline-none focus:tw-outline-none focus-within:tw-outline-none ${disabled ? disabledClasses : ''} ${extraClassNames}` }, triggerIcon)),
+        React.createElement(DropdownMenu.Portal, null,
+            React.createElement(DropdownMenu.Content, { onClick: onContainerClick, sideOffset: placementOffset, side: placement, align: align, alignOffset: alignOffset, asChild: true, onCloseAutoFocus: (e) => !setFocusOnTriggerOnClose && e.preventDefault(), className: "focus-visible:tw-outline-none tw-outline-none" },
+                React.createElement("div", { "data-testid": containerTestId, className: `${bgStyles} tw-relative tw-z-[1200] tw-min-w-6 tw-py-2 focus-visible:tw-outline-none tw-outline-none data-[state=open]:tw-animate-in data-[state=closed]:tw-animate-out forceFont data-[side=top]:tw-animate-slideDownAndFade data-[side=right]:tw-animate-slideLeftAndFade data-[side=bottom]:tw-animate-slideUpAndFade data-[side=left]:tw-animate-slideRightAndFade ${borderStyles} ${contentExtraClassNames}` },
+                    hasArrow && (React.createElement(DropdownMenu.Arrow, { asChild: true },
+                        React.createElement("div", { className: " tw-fill-transparent tw-bg-white tw-w-[15px] tw-h-[15px] tw-rotate-45 dark:tw-bg-sq-dark-background tw-border-b tw-border-r tw-border-sq-disabled-gray dark:tw-border-gray-500 tw-mt-[-7px]" }))),
+                    dropdownItems.map((item, index) => {
+                        const tooltipData = getQTipData(item);
+                        if (item.isLabel) {
+                            return (React.createElement(DropdownMenu.Label, { key: (item.id || '') + index, className: item.itemExtraClassNames, ...tooltipData },
+                                item.icon && (React.createElement(Icon, { icon: item.icon, testId: item.iconTestId, type: "text", color: item.iconColor, extraClassNames: "tw-text-sq-text-color dark:tw-text-sq-white tw-w-[18px]" })),
+                                React.createElement("div", { "data-testid": item.labelTestId, className: `tw-text-[13px] tw-ml-1 ${item.disabled ? 'tw-text-sq-disabled-gray' : 'tw-text-sq-text-color dark:tw-text-sq-white'} tw-not-italic tw-font-normal ${item.labelClasses}` }, item.label)));
+                        }
+                        if (Array.isArray(item.subMenuItems) && item.subMenuItems.length > 0) {
+                            return (React.createElement(DropdownMenu.Sub, { key: (item.id || item.icon || '') + index },
+                                React.createElement(DropdownMenu.SubTrigger, { id: id, className: `tw-cursor-pointer tw-flex tw-justify-between dark:tw-text-sq-white hover:tw-bg-sq-gray-highlight dark:hover:tw-bg-sq-gray-highlight-dark tw-leading-none tw-items-center tw-h-[27px] tw-pl-[19px] tw-relative tw-select-none tw-outline-none data-[disabled]:tw-pointer-events-none ${item.itemExtraClassNames || ''}`, "data-testid": item.testId, disabled: item.disabled, ...tooltipData },
+                                    React.createElement("div", { className: "tw-flex" },
+                                        item.icon && (React.createElement(Icon, { icon: item.icon, extraClassNames: `tw-w-[18px] ${item.disabled
+                                                ? '!tw-text-sq-disabled-gray'
+                                                : 'tw-text-sq-text-color dark:tw-text-sq-white'} ${item.iconExtraClassNames || ''}` })),
+                                        React.createElement("div", { "data-testid": item.labelTestId, "data-customid": item.labelCustomId, className: `tw-text-[13px] tw-ml-1 ${item.disabled && '!tw-opacity-30'} tw-not-italic tw-font-semibold ${item.labelClasses}` }, item.label)),
+                                    React.createElement(Icon, { small: true, icon: "fc-arrow-dropdown -tw-rotate-90", extraClassNames: `${item.disabled ? 'tw-text-sq-disabled-gray' : 'tw-text-sq-text-color dark:tw-text-sq-white'} tw-w-[18px] tw-ml-4 tw-text-[8px] tw-justify-center tw-flex` })),
+                                React.createElement(DropdownMenu.Portal, null,
+                                    React.createElement(DropdownMenu.SubContent, { className: "focus-visible:tw-outline-none tw-outline-none" },
+                                        React.createElement("div", { "data-testid": containerTestId, className: `${bgStyles} tw-relative tw-z-[1000] tw-min-w-6 tw-py-2 focus-visible:tw-outline-none tw-outline-none data-[state=open]:tw-animate-in data-[state=closed]:tw-animate-out forceFont data-[side=top]:tw-animate-slideDownAndFade data-[side=right]:tw-animate-slideLeftAndFade data-[side=bottom]:tw-animate-slideUpAndFade data-[side=left]:tw-animate-slideRightAndFade ${borderStyles}` }, item.subMenuItems.map((subItem, subIndex) => {
+                                            return (React.createElement(DropdownMenu.Item, { key: subItem.label + subIndex, onSelect: subItem.onClick, "data-qtip-text": subItem.tooltip, className: "tw-cursor-pointer tw-flex dark:tw-text-sq-white hover:tw-bg-sq-gray-highlight dark:hover:tw-bg-sq-gray-highlight-dark tw-leading-none tw-items-center tw-h-[27px] tw-px-[19px] tw-relative tw-select-none tw-outline-none data-[disabled]:tw-pointer-events-none", disabled: subItem.disabled },
+                                                subItem.iconClass && (React.createElement(Icon, { icon: subItem.iconClass, type: "text", extraClassNames: `tw-w-[18px] ${item.disabled && '!tw-opacity-30'}` })),
+                                                React.createElement("div", { className: `tw-text-[13px] tw-ml-1 ${subItem.disabled
+                                                        ? 'tw-text-sq-disabled-gray'
+                                                        : 'tw-text-sq-text-color dark:tw-text-sq-white'} tw-not-italic tw-font-normal ${item.labelClasses}` }, subItem.label)));
+                                        }))))));
+                        }
+                        return (React.createElement("div", { key: (item.id || '') + index, ...tooltipData },
+                            React.createElement(DropdownMenu.Item, { key: (item.id || item.icon || '') + index, "data-customid": item.itemCustomId, onSelect: (e) => {
+                                    item.onClick(e);
+                                }, className: `tw-cursor-pointer tw-flex dark:tw-text-sq-white hover:tw-bg-sq-gray-highlight dark:hover:tw-bg-sq-gray-highlight-dark tw-leading-none tw-items-center tw-min-h-[27px] tw-px-[19px] tw-relative tw-select-none tw-outline-none data-[disabled]:tw-pointer-events-none ${item.itemExtraClassNames || ''}`, "data-testid": item.testId, disabled: item.disabled },
+                                item.icon && (React.createElement(Icon, { icon: item.icon, testId: item.iconTestId, type: (item.iconType || 'text'), color: item.iconColor, customId: item.iconCustomId, extraClassNames: `tw-w-[18px] ${item.disabled && '!tw-opacity-30'} ${item.iconExtraClassNames || ''}` })),
+                                React.createElement("div", { "data-testid": item.labelTestId, "data-customid": item.labelCustomId, className: `tw-text-[13px] tw-ml-1 ${item.disabled ? 'tw-text-sq-disabled-gray' : 'tw-text-sq-text-color dark:tw-text-sq-white'} tw-not-italic tw-font-normal ${item.labelClasses || ''}` }, item.label)),
+                            item.hasDivider && (React.createElement(DropdownMenu.Separator, { "data-testid": `dropdown-divider-${index}`, className: "tw-h-[1px] tw-bg-sq-disabled-gray dark:tw-bg-gray-500 tw-my-[8px]" }))));
+                    }))))));
+};
+export default ButtonWithDropdown;
 //# sourceMappingURL=ButtonWithDropdown.js.map

package/dist/ButtonWithDropdown/ButtonWithDropdown.stories.js

@@ -1,143 +1,143 @@
-import React from 'react';
-import ButtonWithDropdown from './ButtonWithDropdown';
-import Icon from '../Icon';
-import { QTip } from '../Tooltip/Qtip';
-export default {
-    title: 'Button with Dropdown',
-};
-export const AllButtonWithDropdownVariants = () => {
-    const [openDropdown, setOpenDropdown] = React.useState('');
-    const allButtonWithDropdowns = (color, isDark) => (React.createElement("div", { className: isDark ? 'tw-dark tw-bg-sq-dark-background' : '' },
-        React.createElement("div", { className: "tw-p-5 " },
-            React.createElement(ButtonWithDropdown, { onOpenChange: (isOpen) => setOpenDropdown(isOpen ? `dropdown-1-${color}-${isDark ? 'dark' : 'light'}` : ''), isOpen: openDropdown === `dropdown-1-${color}-${isDark ? 'dark' : 'light'}`, triggerIcon: React.createElement(Icon, { icon: "fc-more", type: "text", extraClassNames: "tw-text-sq-text-color dark:tw-text-sq-white tw-w-[18px]" }), containerTestId: "basic-dropdown1", tooltip: "This is a small dropdown.", tooltipDelay: 0, tooltipPlacement: "top", dropdownItems: [
-                    { label: 'Orange', icon: 'fc-data-file', onClick: () => setOpenDropdown('') },
-                    { label: 'Mango', icon: 'fc-user-community', onClick: () => setOpenDropdown('') },
-                    { label: 'Guava', icon: 'fc-user-community', onClick: () => setOpenDropdown('') },
-                    {
-                        label: 'Banana',
-                        icon: 'fc-user-community',
-                        onClick: () => setOpenDropdown(''),
-                        tooltipDelay: 0,
-                        tooltip: 'This is a banana',
-                    },
-                ] })),
-        React.createElement("div", { className: "tw-p-5 " },
-            React.createElement(ButtonWithDropdown, { triggerIcon: React.createElement(Icon, { icon: "fc-more", type: "text", extraClassNames: "tw-text-sq-text-color dark:tw-text-sq-white tw-w-[18px]" }), onOpenChange: (isOpen) => setOpenDropdown(isOpen ? `dropdown-2-${color}-${isDark ? 'dark' : 'light'}` : ''), isOpen: openDropdown === `dropdown-2-${color}-${isDark ? 'dark' : 'light'}`, dropdownItems: [
-                    { label: 'Orange', icon: 'fc-data-file', onClick: () => setOpenDropdown(''), hasDivider: true },
-                    { label: 'Mango', icon: 'fc-user-community', onClick: () => setOpenDropdown('') },
-                    { label: 'Guava', icon: 'fc-user-community', onClick: () => setOpenDropdown(''), hasDivider: true },
-                    { label: 'Banana', icon: 'fc-user-community', onClick: () => setOpenDropdown('') },
-                ], containerTestId: "basic-dropdown1", tooltip: "This is a normal dropdown.", tooltipDelay: 0, tooltipPlacement: "top" })),
-        React.createElement("div", { className: "tw-p-5 " },
-            React.createElement("div", { className: "dark:tw-text-white tw-text-xs" }, "Dropdown with arrow"),
-            React.createElement(ButtonWithDropdown, { triggerIcon: React.createElement(Icon, { icon: "fc-more", type: "text", extraClassNames: "tw-text-sq-text-color dark:tw-text-sq-white tw-w-[18px]" }), onOpenChange: (isOpen) => setOpenDropdown(isOpen ? `dropdown-3-${color}-${isDark ? 'dark' : 'light'}` : ''), isOpen: openDropdown === `dropdown-3-${color}-${isDark ? 'dark' : 'light'}`, dropdownItems: [
-                    { label: 'Orange', icon: 'fc-data-file', onClick: () => setOpenDropdown(''), hasDivider: true },
-                    { label: 'Mango', icon: 'fc-user-community', onClick: () => setOpenDropdown('') },
-                    { label: 'Guava', icon: 'fc-user-community', onClick: () => setOpenDropdown(''), hasDivider: true },
-                    { label: 'Banana', icon: 'fc-user-community', onClick: () => setOpenDropdown('') },
-                ], containerTestId: "basic-dropdown1", hasArrow: true, tooltip: "This is a normal dropdown aligned to the end", tooltipDelay: 0, tooltipPlacement: "top" })),
-        React.createElement("div", { className: "tw-p-5 " },
-            React.createElement("div", { className: "dark:tw-text-white tw-text-xs" }, "Dropdown aligned at center"),
-            React.createElement(ButtonWithDropdown, { triggerIcon: React.createElement(Icon, { icon: "fc-more", type: "text", extraClassNames: "tw-text-sq-text-color dark:tw-text-sq-white tw-w-[18px]" }), onOpenChange: (isOpen) => setOpenDropdown(isOpen ? `dropdown-4-${color}-${isDark ? 'dark' : 'light'}` : ''), isOpen: openDropdown === `dropdown-4-${color}-${isDark ? 'dark' : 'light'}`, dropdownItems: [
-                    { label: 'Orange', icon: 'fc-data-file', onClick: () => setOpenDropdown(''), hasDivider: true },
-                    { label: 'Mango', icon: 'fc-user-community', onClick: () => setOpenDropdown('') },
-                    { label: 'Guava', icon: 'fc-user-community', onClick: () => setOpenDropdown(''), hasDivider: true },
-                    { label: 'Banana', icon: 'fc-user-community', onClick: () => setOpenDropdown('') },
-                ], containerTestId: "basic-dropdown1", hasArrow: true, tooltip: "This is a normal dropdown aligned to the center", align: "center", tooltipDelay: 0, tooltipPlacement: "top" })),
-        React.createElement("div", { className: "tw-p-5 " },
-            React.createElement("div", { className: "dark:tw-text-white tw-text-xs" }, "Dropdown aligned at start"),
-            React.createElement(ButtonWithDropdown, { triggerIcon: React.createElement(Icon, { icon: "fc-more", type: "text", extraClassNames: "tw-text-sq-text-color dark:tw-text-sq-white tw-w-[18px]" }), onOpenChange: (isOpen) => setOpenDropdown(isOpen ? `dropdown-5-${color}-${isDark ? 'dark' : 'light'}` : ''), isOpen: openDropdown === `dropdown-5-${color}-${isDark ? 'dark' : 'light'}`, dropdownItems: [
-                    { label: 'Orange', icon: 'fc-data-file', onClick: () => setOpenDropdown(''), hasDivider: true },
-                    { label: 'Mango', icon: 'fc-user-community', onClick: () => setOpenDropdown('') },
-                    { label: 'Guava', icon: 'fc-user-community', onClick: () => setOpenDropdown(''), hasDivider: true },
-                    { label: 'Banana', icon: 'fc-user-community', onClick: () => setOpenDropdown('') },
-                ], containerTestId: "basic-dropdown1", hasArrow: true, tooltip: "This is a normal dropdown aligned to the center", align: "start", tooltipDelay: 0, tooltipPlacement: "top" })),
-        React.createElement("div", { className: "tw-p-5 " },
-            React.createElement(ButtonWithDropdown, { triggerIcon: React.createElement(Icon, { icon: "fc-gears-2", type: "text", extraClassNames: "tw-text-sq-text-color dark:tw-text-sq-white tw-w-[18px]" }), dropdownItems: [], onOpenChange: (isOpen) => setOpenDropdown(isOpen ? `dropdown-6-${color}-${isDark ? 'dark' : 'light'}` : ''), isOpen: openDropdown === `dropdown-6-${color}-${isDark ? 'dark' : 'light'}`, containerTestId: "basic-dropdown2", tooltip: "This is a disabled dropdown.", tooltipDelay: 0, tooltipPlacement: "top", disabled: true })),
-        React.createElement("div", { className: "tw-p-5 " },
-            React.createElement(ButtonWithDropdown, { onOpenChange: (isOpen) => setOpenDropdown(isOpen ? `dropdown-7-${color}-${isDark ? 'dark' : 'light'}` : ''), isOpen: openDropdown === `dropdown-7-${color}-${isDark ? 'dark' : 'light'}`, triggerIcon: React.createElement(Icon, { icon: "fc-more", type: "text", extraClassNames: "tw-text-sq-text-color dark:tw-text-sq-white tw-w-[18px]" }), containerTestId: "basic-dropdown7", tooltip: "This is a dropdown with submenu", tooltipDelay: 0, tooltipPlacement: "top", dropdownItems: [
-                    { label: 'Orange', icon: 'fc-data-file', onClick: () => setOpenDropdown('') },
-                    { label: 'Mango', icon: 'fc-user-community', onClick: () => setOpenDropdown('') },
-                    {
-                        label: 'Guava',
-                        icon: 'fc-user-community',
-                        onClick: () => setOpenDropdown(''),
-                        tooltipDelay: 0,
-                        tooltip: 'This is a guava',
-                        subMenuItems: [
-                            { label: 'Orange', iconClass: 'fc-data-file', onClick: () => setOpenDropdown('') },
-                            { label: 'Mango', iconClass: 'fc-user-community', onClick: () => setOpenDropdown('') },
-                            { label: 'Apple', iconClass: 'fc-user-community', onClick: () => setOpenDropdown(''), disabled: true },
-                        ],
-                    },
-                    { label: 'Banana', icon: 'fc-user-community', onClick: () => setOpenDropdown(''), disabled: true },
-                    {
-                        label: 'Cashew',
-                        icon: 'fc-user-community',
-                        disabled: true,
-                        onClick: () => setOpenDropdown(''),
-                        subMenuItems: [
-                            { label: 'Orange', iconClass: 'fc-data-file', onClick: () => setOpenDropdown('') },
-                            { label: 'Mango', iconClass: 'fc-user-community', onClick: () => setOpenDropdown('') },
-                            { label: 'Apple', iconClass: 'fc-user-community', onClick: () => setOpenDropdown(''), disabled: true },
-                        ],
-                    },
-                ] })),
-        React.createElement("div", { className: "tw-p-5 " },
-            React.createElement(ButtonWithDropdown, { onOpenChange: (isOpen) => setOpenDropdown(isOpen ? `dropdown-8-${color}-${isDark ? 'dark' : 'light'}` : ''), isOpen: openDropdown === `dropdown-8-${color}-${isDark ? 'dark' : 'light'}`, triggerIcon: React.createElement(Icon, { icon: "fc-more", type: "text", extraClassNames: "tw-text-sq-text-color dark:tw-text-sq-white tw-w-[18px]" }), containerTestId: "basic-dropdown8", tooltip: "This is a dropdown with submenu", tooltipDelay: 0, tooltipPlacement: "top", dropdownItems: [
-                    {
-                        label: (React.createElement("div", null,
-                            React.createElement("h5", null, "Label heading"),
-                            React.createElement("p", null, "Label description"),
-                            React.createElement("p", null, "Dropdown is my work"),
-                            React.createElement("p", null, "I do it happily"),
-                            React.createElement("p", null, "Final remards"),
-                            React.createElement("p", null, "Thank you"))),
-                        icon: 'fc-data-file',
-                        onClick: () => setOpenDropdown(''),
-                    },
-                    { label: 'Mango', icon: 'fc-user-community', onClick: () => setOpenDropdown('') },
-                    {
-                        label: 'Guava',
-                        icon: 'fc-user-community',
-                        onClick: () => setOpenDropdown(''),
-                        tooltipDelay: 0,
-                        tooltip: 'This is a guava',
-                        subMenuItems: [
-                            { label: 'Orange', iconClass: 'fc-data-file', onClick: () => setOpenDropdown('') },
-                            { label: 'Mango', iconClass: 'fc-user-community', onClick: () => setOpenDropdown('') },
-                            { label: 'Apple', iconClass: 'fc-user-community', onClick: () => setOpenDropdown(''), disabled: true },
-                        ],
-                    },
-                    { label: 'Banana', icon: 'fc-user-community', onClick: () => setOpenDropdown(''), disabled: true },
-                    {
-                        label: 'Cashew',
-                        icon: 'fc-user-community',
-                        disabled: true,
-                        onClick: () => setOpenDropdown(''),
-                        subMenuItems: [
-                            { label: 'Orange', iconClass: 'fc-data-file', onClick: () => setOpenDropdown('') },
-                            { label: 'Mango', iconClass: 'fc-user-community', onClick: () => setOpenDropdown('') },
-                            { label: 'Apple', iconClass: 'fc-user-community', onClick: () => setOpenDropdown(''), disabled: true },
-                        ],
-                    },
-                ] }))));
-    const renderAllVariations = (color) => (React.createElement("div", { className: "tw-grid tw-grid-cols-2 tw-gap-4 tw-p-4" },
-        allButtonWithDropdowns(color),
-        allButtonWithDropdowns(color, true)));
-    return (React.createElement("div", { className: "tw-grid tw-grid-cols-4 tw-gap-4" },
-        React.createElement(QTip, null),
-        React.createElement("div", { className: "color_topic" },
-            React.createElement("b", null, "Topic Colors"),
-            renderAllVariations('topic')),
-        React.createElement("div", { className: "color_analysis" },
-            React.createElement("b", null, "Analysis Colors"),
-            renderAllVariations('analysis')),
-        React.createElement("div", { className: "color_datalab" },
-            React.createElement("b", null, "Datalab Colors"),
-            renderAllVariations('datalab')),
-        React.createElement("div", { className: "color_vantage" },
-            React.createElement("b", null, "Vantage Colors"),
-            renderAllVariations('vantage'))));
-};
+import React from 'react';
+import ButtonWithDropdown from './ButtonWithDropdown';
+import Icon from '../Icon';
+import { QTip } from '../Tooltip/Qtip';
+export default {
+    title: 'Button with Dropdown',
+};
+export const AllButtonWithDropdownVariants = () => {
+    const [openDropdown, setOpenDropdown] = React.useState('');
+    const allButtonWithDropdowns = (color, isDark) => (React.createElement("div", { className: isDark ? 'tw-dark tw-bg-sq-dark-background' : '' },
+        React.createElement("div", { className: "tw-p-5 " },
+            React.createElement(ButtonWithDropdown, { onOpenChange: (isOpen) => setOpenDropdown(isOpen ? `dropdown-1-${color}-${isDark ? 'dark' : 'light'}` : ''), isOpen: openDropdown === `dropdown-1-${color}-${isDark ? 'dark' : 'light'}`, triggerIcon: React.createElement(Icon, { icon: "fc-more", type: "text", extraClassNames: "tw-text-sq-text-color dark:tw-text-sq-white tw-w-[18px]" }), containerTestId: "basic-dropdown1", tooltip: "This is a small dropdown.", tooltipDelay: 0, tooltipPlacement: "top", dropdownItems: [
+                    { label: 'Orange', icon: 'fc-data-file', onClick: () => setOpenDropdown('') },
+                    { label: 'Mango', icon: 'fc-user-community', onClick: () => setOpenDropdown('') },
+                    { label: 'Guava', icon: 'fc-user-community', onClick: () => setOpenDropdown('') },
+                    {
+                        label: 'Banana',
+                        icon: 'fc-user-community',
+                        onClick: () => setOpenDropdown(''),
+                        tooltipDelay: 0,
+                        tooltip: 'This is a banana',
+                    },
+                ] })),
+        React.createElement("div", { className: "tw-p-5 " },
+            React.createElement(ButtonWithDropdown, { triggerIcon: React.createElement(Icon, { icon: "fc-more", type: "text", extraClassNames: "tw-text-sq-text-color dark:tw-text-sq-white tw-w-[18px]" }), onOpenChange: (isOpen) => setOpenDropdown(isOpen ? `dropdown-2-${color}-${isDark ? 'dark' : 'light'}` : ''), isOpen: openDropdown === `dropdown-2-${color}-${isDark ? 'dark' : 'light'}`, dropdownItems: [
+                    { label: 'Orange', icon: 'fc-data-file', onClick: () => setOpenDropdown(''), hasDivider: true },
+                    { label: 'Mango', icon: 'fc-user-community', onClick: () => setOpenDropdown('') },
+                    { label: 'Guava', icon: 'fc-user-community', onClick: () => setOpenDropdown(''), hasDivider: true },
+                    { label: 'Banana', icon: 'fc-user-community', onClick: () => setOpenDropdown('') },
+                ], containerTestId: "basic-dropdown1", tooltip: "This is a normal dropdown.", tooltipDelay: 0, tooltipPlacement: "top" })),
+        React.createElement("div", { className: "tw-p-5 " },
+            React.createElement("div", { className: "dark:tw-text-white tw-text-xs" }, "Dropdown with arrow"),
+            React.createElement(ButtonWithDropdown, { triggerIcon: React.createElement(Icon, { icon: "fc-more", type: "text", extraClassNames: "tw-text-sq-text-color dark:tw-text-sq-white tw-w-[18px]" }), onOpenChange: (isOpen) => setOpenDropdown(isOpen ? `dropdown-3-${color}-${isDark ? 'dark' : 'light'}` : ''), isOpen: openDropdown === `dropdown-3-${color}-${isDark ? 'dark' : 'light'}`, dropdownItems: [
+                    { label: 'Orange', icon: 'fc-data-file', onClick: () => setOpenDropdown(''), hasDivider: true },
+                    { label: 'Mango', icon: 'fc-user-community', onClick: () => setOpenDropdown('') },
+                    { label: 'Guava', icon: 'fc-user-community', onClick: () => setOpenDropdown(''), hasDivider: true },
+                    { label: 'Banana', icon: 'fc-user-community', onClick: () => setOpenDropdown('') },
+                ], containerTestId: "basic-dropdown1", hasArrow: true, tooltip: "This is a normal dropdown aligned to the end", tooltipDelay: 0, tooltipPlacement: "top" })),
+        React.createElement("div", { className: "tw-p-5 " },
+            React.createElement("div", { className: "dark:tw-text-white tw-text-xs" }, "Dropdown aligned at center"),
+            React.createElement(ButtonWithDropdown, { triggerIcon: React.createElement(Icon, { icon: "fc-more", type: "text", extraClassNames: "tw-text-sq-text-color dark:tw-text-sq-white tw-w-[18px]" }), onOpenChange: (isOpen) => setOpenDropdown(isOpen ? `dropdown-4-${color}-${isDark ? 'dark' : 'light'}` : ''), isOpen: openDropdown === `dropdown-4-${color}-${isDark ? 'dark' : 'light'}`, dropdownItems: [
+                    { label: 'Orange', icon: 'fc-data-file', onClick: () => setOpenDropdown(''), hasDivider: true },
+                    { label: 'Mango', icon: 'fc-user-community', onClick: () => setOpenDropdown('') },
+                    { label: 'Guava', icon: 'fc-user-community', onClick: () => setOpenDropdown(''), hasDivider: true },
+                    { label: 'Banana', icon: 'fc-user-community', onClick: () => setOpenDropdown('') },
+                ], containerTestId: "basic-dropdown1", hasArrow: true, tooltip: "This is a normal dropdown aligned to the center", align: "center", tooltipDelay: 0, tooltipPlacement: "top" })),
+        React.createElement("div", { className: "tw-p-5 " },
+            React.createElement("div", { className: "dark:tw-text-white tw-text-xs" }, "Dropdown aligned at start"),
+            React.createElement(ButtonWithDropdown, { triggerIcon: React.createElement(Icon, { icon: "fc-more", type: "text", extraClassNames: "tw-text-sq-text-color dark:tw-text-sq-white tw-w-[18px]" }), onOpenChange: (isOpen) => setOpenDropdown(isOpen ? `dropdown-5-${color}-${isDark ? 'dark' : 'light'}` : ''), isOpen: openDropdown === `dropdown-5-${color}-${isDark ? 'dark' : 'light'}`, dropdownItems: [
+                    { label: 'Orange', icon: 'fc-data-file', onClick: () => setOpenDropdown(''), hasDivider: true },
+                    { label: 'Mango', icon: 'fc-user-community', onClick: () => setOpenDropdown('') },
+                    { label: 'Guava', icon: 'fc-user-community', onClick: () => setOpenDropdown(''), hasDivider: true },
+                    { label: 'Banana', icon: 'fc-user-community', onClick: () => setOpenDropdown('') },
+                ], containerTestId: "basic-dropdown1", hasArrow: true, tooltip: "This is a normal dropdown aligned to the center", align: "start", tooltipDelay: 0, tooltipPlacement: "top" })),
+        React.createElement("div", { className: "tw-p-5 " },
+            React.createElement(ButtonWithDropdown, { triggerIcon: React.createElement(Icon, { icon: "fc-gears-2", type: "text", extraClassNames: "tw-text-sq-text-color dark:tw-text-sq-white tw-w-[18px]" }), dropdownItems: [], onOpenChange: (isOpen) => setOpenDropdown(isOpen ? `dropdown-6-${color}-${isDark ? 'dark' : 'light'}` : ''), isOpen: openDropdown === `dropdown-6-${color}-${isDark ? 'dark' : 'light'}`, containerTestId: "basic-dropdown2", tooltip: "This is a disabled dropdown.", tooltipDelay: 0, tooltipPlacement: "top", disabled: true })),
+        React.createElement("div", { className: "tw-p-5 " },
+            React.createElement(ButtonWithDropdown, { onOpenChange: (isOpen) => setOpenDropdown(isOpen ? `dropdown-7-${color}-${isDark ? 'dark' : 'light'}` : ''), isOpen: openDropdown === `dropdown-7-${color}-${isDark ? 'dark' : 'light'}`, triggerIcon: React.createElement(Icon, { icon: "fc-more", type: "text", extraClassNames: "tw-text-sq-text-color dark:tw-text-sq-white tw-w-[18px]" }), containerTestId: "basic-dropdown7", tooltip: "This is a dropdown with submenu", tooltipDelay: 0, tooltipPlacement: "top", dropdownItems: [
+                    { label: 'Orange', icon: 'fc-data-file', onClick: () => setOpenDropdown('') },
+                    { label: 'Mango', icon: 'fc-user-community', onClick: () => setOpenDropdown('') },
+                    {
+                        label: 'Guava',
+                        icon: 'fc-user-community',
+                        onClick: () => setOpenDropdown(''),
+                        tooltipDelay: 0,
+                        tooltip: 'This is a guava',
+                        subMenuItems: [
+                            { label: 'Orange', iconClass: 'fc-data-file', onClick: () => setOpenDropdown('') },
+                            { label: 'Mango', iconClass: 'fc-user-community', onClick: () => setOpenDropdown('') },
+                            { label: 'Apple', iconClass: 'fc-user-community', onClick: () => setOpenDropdown(''), disabled: true },
+                        ],
+                    },
+                    { label: 'Banana', icon: 'fc-user-community', onClick: () => setOpenDropdown(''), disabled: true },
+                    {
+                        label: 'Cashew',
+                        icon: 'fc-user-community',
+                        disabled: true,
+                        onClick: () => setOpenDropdown(''),
+                        subMenuItems: [
+                            { label: 'Orange', iconClass: 'fc-data-file', onClick: () => setOpenDropdown('') },
+                            { label: 'Mango', iconClass: 'fc-user-community', onClick: () => setOpenDropdown('') },
+                            { label: 'Apple', iconClass: 'fc-user-community', onClick: () => setOpenDropdown(''), disabled: true },
+                        ],
+                    },
+                ] })),
+        React.createElement("div", { className: "tw-p-5 " },
+            React.createElement(ButtonWithDropdown, { onOpenChange: (isOpen) => setOpenDropdown(isOpen ? `dropdown-8-${color}-${isDark ? 'dark' : 'light'}` : ''), isOpen: openDropdown === `dropdown-8-${color}-${isDark ? 'dark' : 'light'}`, triggerIcon: React.createElement(Icon, { icon: "fc-more", type: "text", extraClassNames: "tw-text-sq-text-color dark:tw-text-sq-white tw-w-[18px]" }), containerTestId: "basic-dropdown8", tooltip: "This is a dropdown with submenu", tooltipDelay: 0, tooltipPlacement: "top", dropdownItems: [
+                    {
+                        label: (React.createElement("div", null,
+                            React.createElement("h5", null, "Label heading"),
+                            React.createElement("p", null, "Label description"),
+                            React.createElement("p", null, "Dropdown is my work"),
+                            React.createElement("p", null, "I do it happily"),
+                            React.createElement("p", null, "Final remards"),
+                            React.createElement("p", null, "Thank you"))),
+                        icon: 'fc-data-file',
+                        onClick: () => setOpenDropdown(''),
+                    },
+                    { label: 'Mango', icon: 'fc-user-community', onClick: () => setOpenDropdown('') },
+                    {
+                        label: 'Guava',
+                        icon: 'fc-user-community',
+                        onClick: () => setOpenDropdown(''),
+                        tooltipDelay: 0,
+                        tooltip: 'This is a guava',
+                        subMenuItems: [
+                            { label: 'Orange', iconClass: 'fc-data-file', onClick: () => setOpenDropdown('') },
+                            { label: 'Mango', iconClass: 'fc-user-community', onClick: () => setOpenDropdown('') },
+                            { label: 'Apple', iconClass: 'fc-user-community', onClick: () => setOpenDropdown(''), disabled: true },
+                        ],
+                    },
+                    { label: 'Banana', icon: 'fc-user-community', onClick: () => setOpenDropdown(''), disabled: true },
+                    {
+                        label: 'Cashew',
+                        icon: 'fc-user-community',
+                        disabled: true,
+                        onClick: () => setOpenDropdown(''),
+                        subMenuItems: [
+                            { label: 'Orange', iconClass: 'fc-data-file', onClick: () => setOpenDropdown('') },
+                            { label: 'Mango', iconClass: 'fc-user-community', onClick: () => setOpenDropdown('') },
+                            { label: 'Apple', iconClass: 'fc-user-community', onClick: () => setOpenDropdown(''), disabled: true },
+                        ],
+                    },
+                ] }))));
+    const renderAllVariations = (color) => (React.createElement("div", { className: "tw-grid tw-grid-cols-2 tw-gap-4 tw-p-4" },
+        allButtonWithDropdowns(color),
+        allButtonWithDropdowns(color, true)));
+    return (React.createElement("div", { className: "tw-grid tw-grid-cols-4 tw-gap-4" },
+        React.createElement(QTip, null),
+        React.createElement("div", { className: "color_topic" },
+            React.createElement("b", null, "Topic Colors"),
+            renderAllVariations('topic')),
+        React.createElement("div", { className: "color_analysis" },
+            React.createElement("b", null, "Analysis Colors"),
+            renderAllVariations('analysis')),
+        React.createElement("div", { className: "color_datalab" },
+            React.createElement("b", null, "Datalab Colors"),
+            renderAllVariations('datalab')),
+        React.createElement("div", { className: "color_vantage" },
+            React.createElement("b", null, "Vantage Colors"),
+            renderAllVariations('vantage'))));
+};
 //# sourceMappingURL=ButtonWithDropdown.stories.js.map