@seeqdev/qomponents 0.0.130 → 0.0.132

package/dist/ButtonGroup/ButtonGroup.stories.js

@@ -0,0 +1,385 @@
+import React from 'react';
+import { QTip } from '../Tooltip/Qtip';
+import { ButtonGroup } from './ButtonGroup';
+import ToolbarButton from '../ToolbarButton';
+export default {
+    title: 'ButtonGroup',
+};
+export const AllButtonGroups = () => {
+    const [value, setValue] = React.useState('provided-1');
+    const renderAllVariations = () => (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: "light" },
+            React.createElement("div", { className: "tw-p-4" },
+                React.createElement(ButtonGroup, { onChange: () => { }, buttons: [
+                        {
+                            variant: 'button',
+                            buttonProps: {
+                                variant: 'outline',
+                                icon: 'fc-annotate',
+                                iconStyle: 'theme',
+                                value: 'provided-1',
+                                onClick: () => setValue('provided-1'),
+                            },
+                        },
+                        {
+                            variant: 'button',
+                            buttonProps: {
+                                variant: 'outline',
+                                icon: 'fc-trash',
+                                iconStyle: 'theme',
+                                value: 'provided-2',
+                                onClick: () => setValue('provided-2'),
+                            },
+                        },
+                        {
+                            variant: 'button',
+                            buttonProps: {
+                                variant: 'outline',
+                                icon: 'fc-formula-ai',
+                                iconStyle: 'theme',
+                                value: 'provided-3',
+                                onClick: () => setValue('provided-3'),
+                            },
+                        },
+                    ] })),
+            React.createElement("div", { className: "tw-p-4" },
+                React.createElement(ButtonGroup, { onChange: () => { }, buttons: [
+                        {
+                            variant: 'button',
+                            buttonProps: {
+                                variant: 'outline',
+                                icon: 'fc-annotate',
+                                extraClassNames: 'tw-border-none',
+                                iconStyle: 'theme',
+                                value: 'provided-1',
+                                onClick: () => setValue('provided-1'),
+                            },
+                        },
+                        {
+                            variant: 'button',
+                            buttonProps: {
+                                variant: 'outline',
+                                icon: 'fc-trash',
+                                extraClassNames: 'tw-border-none',
+                                iconStyle: 'theme',
+                                value: 'provided-2',
+                                onClick: () => setValue('provided-2'),
+                            },
+                        },
+                        {
+                            variant: 'button',
+                            buttonProps: {
+                                variant: 'outline',
+                                extraClassNames: 'tw-border-none',
+                                icon: 'fc-formula-ai',
+                                iconStyle: 'theme',
+                                value: 'provided-3',
+                                onClick: () => setValue('provided-3'),
+                            },
+                        },
+                    ] })),
+            React.createElement("div", { className: "tw-p-4" },
+                React.createElement(ButtonGroup, { onChange: () => { }, buttons: [
+                        {
+                            variant: 'button',
+                            buttonProps: {
+                                variant: 'theme',
+                                icon: 'fc-annotate',
+                                iconStyle: 'white',
+                                value: 'provided-1',
+                                onClick: () => setValue('provided-1'),
+                            },
+                        },
+                        {
+                            variant: 'button',
+                            buttonProps: {
+                                variant: 'theme',
+                                icon: 'fc-trash',
+                                iconStyle: 'white',
+                                value: 'provided-2',
+                                onClick: () => setValue('provided-2'),
+                            },
+                        },
+                        {
+                            variant: 'button',
+                            buttonProps: {
+                                variant: 'theme',
+                                icon: 'fc-formula-ai',
+                                iconStyle: 'white',
+                                value: 'provided-3',
+                                onClick: () => setValue('provided-3'),
+                            },
+                        },
+                    ] })),
+            React.createElement("div", { className: "tw-p-4" },
+                React.createElement(ButtonGroup, { onChange: () => { }, buttons: [
+                        {
+                            variant: 'button',
+                            buttonProps: {
+                                variant: 'theme',
+                                label: 'annotate',
+                                value: 'provided-1',
+                                onClick: () => setValue('provided-1'),
+                            },
+                        },
+                        {
+                            variant: 'button',
+                            buttonProps: {
+                                variant: 'theme',
+                                label: 'trash',
+                                value: 'provided-2',
+                                onClick: () => setValue('provided-2'),
+                            },
+                        },
+                        {
+                            variant: 'button',
+                            buttonProps: {
+                                variant: 'theme',
+                                label: 'formula-ai',
+                                value: 'provided-3',
+                                onClick: () => setValue('provided-3'),
+                            },
+                        },
+                    ] })),
+            React.createElement("div", { className: "tw-p-4" },
+                React.createElement(ButtonGroup, { onChange: () => { }, buttons: [
+                        {
+                            variant: 'element',
+                            element: (React.createElement(ToolbarButton, { icon: "fc-y-axis", label: "Popover", testId: "basic-popover1", tooltipText: "This is a small popover.", tooltipOptions: { position: 'top', delay: 0 }, isHtmlTooltip: false, popoverContent: React.createElement("div", { className: "tw-text-sm dark:tw-text-white" },
+                                    React.createElement("p", { className: "tw-bg-gray-200 dark:tw-bg-gray-700 tw-p-2" }, "Flavors")) })),
+                        },
+                        {
+                            variant: 'element',
+                            element: (React.createElement(ToolbarButton, { icon: "fc-trash", label: "Trash", testId: "basic-popover1", tooltipText: "This is a small popover.", tooltipOptions: { position: 'top', delay: 0 }, isHtmlTooltip: false, popoverContent: React.createElement("div", { className: "tw-text-sm dark:tw-text-white" },
+                                    React.createElement("p", { className: "tw-bg-gray-200 dark:tw-bg-gray-700 tw-p-2" }, "Flavors")) })),
+                        },
+                        {
+                            variant: 'element',
+                            element: (React.createElement(ToolbarButton, { icon: "fc-formula-ai", label: "Formula", testId: "basic-popover1", tooltipText: "This is a small popover.", tooltipOptions: { position: 'top', delay: 0 }, isHtmlTooltip: false, popoverContent: React.createElement("div", { className: "tw-text-sm dark:tw-text-white" },
+                                    React.createElement("p", { className: "tw-bg-gray-200 dark:tw-bg-gray-700 tw-p-2" }, "Flavors")) })),
+                        },
+                    ] })),
+            React.createElement("div", { className: "tw-p-4" },
+                React.createElement(ButtonGroup, { buttons: [
+                        {
+                            variant: 'button',
+                            buttonProps: {
+                                size: 'sm',
+                                icon: 'fc-annotate',
+                                value: 'left',
+                                isActive: true,
+                            },
+                        },
+                        {
+                            variant: 'button',
+                            buttonProps: {
+                                size: 'sm',
+                                icon: 'fc-trash',
+                                value: 'center',
+                                isActive: false,
+                            },
+                        },
+                        {
+                            variant: 'button',
+                            buttonProps: {
+                                size: 'sm',
+                                icon: 'fc-formula-ai',
+                                value: 'right',
+                                isActive: false,
+                            },
+                        },
+                    ] }))),
+        React.createElement("div", { className: "tw-dark tw-bg-sq-dark-background" },
+            React.createElement("div", { className: "tw-p-4" },
+                React.createElement(ButtonGroup, { onChange: () => { }, buttons: [
+                        {
+                            variant: 'button',
+                            buttonProps: {
+                                variant: 'outline',
+                                icon: 'fc-annotate',
+                                iconStyle: 'theme',
+                                value: 'provided-1',
+                                onClick: () => setValue('provided-1'),
+                            },
+                        },
+                        {
+                            variant: 'button',
+                            buttonProps: {
+                                variant: 'outline',
+                                icon: 'fc-trash',
+                                iconStyle: 'theme',
+                                value: 'provided-2',
+                                onClick: () => setValue('provided-2'),
+                            },
+                        },
+                        {
+                            variant: 'button',
+                            buttonProps: {
+                                variant: 'outline',
+                                icon: 'fc-formula-ai',
+                                iconStyle: 'theme',
+                                value: 'provided-3',
+                                onClick: () => setValue('provided-3'),
+                            },
+                        },
+                    ] })),
+            React.createElement("div", { className: "tw-p-4" },
+                React.createElement(ButtonGroup, { onChange: () => { }, buttons: [
+                        {
+                            variant: 'button',
+                            buttonProps: {
+                                variant: 'no-border',
+                                icon: 'fc-annotate',
+                                iconStyle: 'theme',
+                                value: 'provided-1',
+                                onClick: () => setValue('provided-1'),
+                            },
+                        },
+                        {
+                            variant: 'button',
+                            buttonProps: {
+                                variant: 'no-border',
+                                icon: 'fc-trash',
+                                iconStyle: 'theme',
+                                value: 'provided-2',
+                                onClick: () => setValue('provided-2'),
+                            },
+                        },
+                        {
+                            variant: 'button',
+                            buttonProps: {
+                                variant: 'no-border',
+                                icon: 'fc-formula-ai',
+                                iconStyle: 'theme',
+                                value: 'provided-3',
+                                onClick: () => setValue('provided-3'),
+                            },
+                        },
+                    ] })),
+            React.createElement("div", { className: "tw-p-4" },
+                React.createElement(ButtonGroup, { onChange: () => { }, buttons: [
+                        {
+                            variant: 'button',
+                            buttonProps: {
+                                variant: 'theme',
+                                icon: 'fc-annotate',
+                                iconStyle: 'white',
+                                value: 'provided-1',
+                                onClick: () => setValue('provided-1'),
+                            },
+                        },
+                        {
+                            variant: 'button',
+                            buttonProps: {
+                                variant: 'theme',
+                                icon: 'fc-trash',
+                                iconStyle: 'white',
+                                value: 'provided-2',
+                                onClick: () => setValue('provided-2'),
+                            },
+                        },
+                        {
+                            variant: 'button',
+                            buttonProps: {
+                                variant: 'theme',
+                                icon: 'fc-formula-ai',
+                                iconStyle: 'white',
+                                value: 'provided-3',
+                                onClick: () => setValue('provided-3'),
+                            },
+                        },
+                    ] })),
+            React.createElement("div", { className: "tw-p-4" },
+                React.createElement(ButtonGroup, { onChange: () => { }, buttons: [
+                        {
+                            variant: 'button',
+                            buttonProps: {
+                                variant: 'theme',
+                                label: 'annotate',
+                                value: 'provided-1',
+                                onClick: () => setValue('provided-1'),
+                            },
+                        },
+                        {
+                            variant: 'button',
+                            buttonProps: {
+                                variant: 'theme',
+                                label: 'trash',
+                                value: 'provided-2',
+                                onClick: () => setValue('provided-2'),
+                            },
+                        },
+                        {
+                            variant: 'button',
+                            buttonProps: {
+                                variant: 'theme',
+                                label: 'formula-ai',
+                                value: 'provided-3',
+                                onClick: () => setValue('provided-3'),
+                            },
+                        },
+                    ] })),
+            React.createElement("div", { className: "tw-p-4" },
+                React.createElement(ButtonGroup, { onChange: () => { }, buttons: [
+                        {
+                            variant: 'element',
+                            element: (React.createElement(ToolbarButton, { icon: "fc-y-axis", label: "Popover", testId: "basic-popover1", tooltipText: "This is a small popover.", tooltipOptions: { position: 'top', delay: 0 }, isHtmlTooltip: false, popoverContent: React.createElement("div", { className: "tw-text-sm dark:tw-text-white" },
+                                    React.createElement("p", { className: "tw-bg-gray-200 dark:tw-bg-gray-700 tw-p-2" }, "Flavors")) })),
+                        },
+                        {
+                            variant: 'element',
+                            element: (React.createElement(ToolbarButton, { icon: "fc-trash", label: "Trash", testId: "basic-popover1", tooltipText: "This is a small popover.", tooltipOptions: { position: 'top', delay: 0 }, isHtmlTooltip: false, popoverContent: React.createElement("div", { className: "tw-text-sm dark:tw-text-white" },
+                                    React.createElement("p", { className: "tw-bg-gray-200 dark:tw-bg-gray-700 tw-p-2" }, "Flavors")) })),
+                        },
+                        {
+                            variant: 'element',
+                            element: (React.createElement(ToolbarButton, { icon: "fc-formula-ai", label: "Formula", testId: "basic-popover1", tooltipText: "This is a small popover.", tooltipOptions: { position: 'top', delay: 0 }, isHtmlTooltip: false, popoverContent: React.createElement("div", { className: "tw-text-sm dark:tw-text-white" },
+                                    React.createElement("p", { className: "tw-bg-gray-200 dark:tw-bg-gray-700 tw-p-2" }, "Flavors")) })),
+                        },
+                    ] })),
+            React.createElement("div", { className: "tw-p-4" },
+                React.createElement(ButtonGroup, { buttons: [
+                        {
+                            variant: 'button',
+                            buttonProps: {
+                                size: 'sm',
+                                icon: 'fc-annotate',
+                                value: 'left',
+                                isActive: true,
+                            },
+                        },
+                        {
+                            variant: 'button',
+                            buttonProps: {
+                                size: 'sm',
+                                icon: 'fc-trash',
+                                value: 'center',
+                                isActive: false,
+                            },
+                        },
+                        {
+                            variant: 'button',
+                            buttonProps: {
+                                size: 'sm',
+                                icon: 'fc-formula-ai',
+                                value: 'right',
+                                isActive: false,
+                            },
+                        },
+                    ] })))));
+    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()),
+        React.createElement("div", { className: "color_analysis" },
+            React.createElement("b", null, "Analysis Colors"),
+            renderAllVariations()),
+        React.createElement("div", { className: "color_datalab" },
+            React.createElement("b", null, "Datalab Colors"),
+            renderAllVariations()),
+        React.createElement("div", { className: "color_vantage" },
+            React.createElement("b", null, "Vantage Colors"),
+            renderAllVariations())));
+};
+//# sourceMappingURL=ButtonGroup.stories.js.map

package/dist/ButtonGroup/ButtonGroup.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonGroup.stories.js","sourceRoot":"","sources":["../../src/ButtonGroup/ButtonGroup.stories.tsx"],"names":[],"mappings":"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"}

package/dist/ButtonGroup/ButtonGroup.test.js

@@ -0,0 +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');
+    });
+});
+//# sourceMappingURL=ButtonGroup.test.js.map

package/dist/ButtonGroup/ButtonGroup.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonGroup.test.js","sourceRoot":"","sources":["../../src/ButtonGroup/ButtonGroup.test.tsx"],"names":[],"mappings":"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"}

package/dist/ButtonGroup/ButtonGroup.types.js

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

package/dist/ButtonGroup/ButtonGroup.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonGroup.types.js","sourceRoot":"","sources":["../../src/ButtonGroup/ButtonGroup.types.ts"],"names":[],"mappings":""}

package/dist/ButtonGroup/index.js

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

package/dist/ButtonGroup/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/ButtonGroup/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,IAAI,OAAO,EAAE,MAAM,eAAe,CAAC"}

package/dist/ButtonWithDropdown/ButtonWithDropdown.js

@@ -0,0 +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;
+//# sourceMappingURL=ButtonWithDropdown.js.map

package/dist/ButtonWithDropdown/ButtonWithDropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonWithDropdown.js","sourceRoot":"","sources":["../../src/ButtonWithDropdown/ButtonWithDropdown.tsx"],"names":[],"mappings":"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"}