@seeqdev/qomponents 0.0.132 → 0.0.134

package/dist/ProgressBar/index.js

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

package/dist/SeeqActionDropdown/SeeqActionDropdown.js

@@ -1,48 +1,48 @@
-import * as React from 'react';
-import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
-import { getQTipData } from '../Tooltip/qTip.utilities';
-import { InsertSeeqContent, SeeqActionDropdownItem, ViewWorkbench } from './variants';
-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 renderItem = (variant, item) => {
-    switch (variant) {
-        case 'create-workbench':
-            return React.createElement(SeeqActionDropdownItem, { ...item });
-        case 'view-workbench':
-            return React.createElement(ViewWorkbench, { ...item });
-        case 'insert-seeq-content':
-            return React.createElement(InsertSeeqContent, { ...item });
-        default:
-            return React.createElement(SeeqActionDropdownItem, { ...item });
-    }
-};
-const SeeqActionDropdown = ({ seeqActionDropdownItems, trigger, id, extraClassNames, containerTestId, disabled = false, align = 'end', placement = 'bottom', placementOffset = 5, alignOffset = -35, hasArrow = false, onOpenChange, isOpen, setFocusOnTriggerOnClose = true, keepFocusInsideDropdown = true, variant, ...tooltipProps }) => {
-    const tooltipData = getQTipData(tooltipProps);
-    return (React.createElement(DropdownMenu.Root, { defaultOpen: false, open: isOpen, onOpenChange: onOpenChange, modal: keepFocusInsideDropdown },
-        React.createElement(DropdownMenu.Trigger, { id: id, "data-testid": id, className: `tw-border-none focus-visible:tw-outline-none focus:tw-outline-none focus-within:tw-outline-none`, asChild: true, 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 || ''}` }, trigger)),
-        React.createElement(DropdownMenu.Content, { 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 },
-                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]" }))),
-                seeqActionDropdownItems.map((item, index) => {
-                    return (React.createElement("div", { key: item.display + index },
-                        React.createElement(DropdownMenu.Item, { onSelect: (e) => {
-                                item.action(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-relative tw-select-none tw-outline-none data-[disabled]:tw-text-sq-disabled-gray data-[disabled]:tw-pointer-events-none`, "data-testid": item.testId, disabled: !item.enabled }, renderItem(variant, item)),
-                        item.divider && (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 SeeqActionDropdown;
+import * as React from 'react';
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
+import { getQTipData } from '../Tooltip/qTip.utilities';
+import { InsertSeeqContent, SeeqActionDropdownItem, ViewWorkbench } from './variants';
+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 renderItem = (variant, item) => {
+    switch (variant) {
+        case 'create-workbench':
+            return React.createElement(SeeqActionDropdownItem, { ...item });
+        case 'view-workbench':
+            return React.createElement(ViewWorkbench, { ...item });
+        case 'insert-seeq-content':
+            return React.createElement(InsertSeeqContent, { ...item });
+        default:
+            return React.createElement(SeeqActionDropdownItem, { ...item });
+    }
+};
+const SeeqActionDropdown = ({ seeqActionDropdownItems, trigger, id, extraClassNames, containerTestId, disabled = false, align = 'end', placement = 'bottom', placementOffset = 5, alignOffset = -35, hasArrow = false, onOpenChange, isOpen, setFocusOnTriggerOnClose = true, keepFocusInsideDropdown = true, variant, ...tooltipProps }) => {
+    const tooltipData = getQTipData(tooltipProps);
+    return (React.createElement(DropdownMenu.Root, { defaultOpen: false, open: isOpen, onOpenChange: onOpenChange, modal: keepFocusInsideDropdown },
+        React.createElement(DropdownMenu.Trigger, { id: id, "data-testid": id, className: `tw-border-none focus-visible:tw-outline-none focus:tw-outline-none focus-within:tw-outline-none`, asChild: true, 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 || ''}` }, trigger)),
+        React.createElement(DropdownMenu.Content, { 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 },
+                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]" }))),
+                seeqActionDropdownItems.map((item, index) => {
+                    return (React.createElement("div", { key: item.display + index },
+                        React.createElement(DropdownMenu.Item, { onSelect: (e) => {
+                                item.action(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-relative tw-select-none tw-outline-none data-[disabled]:tw-text-sq-disabled-gray data-[disabled]:tw-pointer-events-none`, "data-testid": item.testId, disabled: !item.enabled }, renderItem(variant, item)),
+                        item.divider && (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 SeeqActionDropdown;
 //# sourceMappingURL=SeeqActionDropdown.js.map

package/dist/SeeqActionDropdown/SeeqActionDropdown.stories.js

@@ -1,80 +1,80 @@
-import React from 'react';
-import { QTip } from '../Tooltip/Qtip';
-import Button from '../Button/Button';
-import SeeqActionDropdown from './SeeqActionDropdown';
-export default {
-    title: 'Seeq Action Dropdown',
-};
-const options = [
-    {
-        display: 'New Workbook',
-        text: 'This is a workbook to show details about your data. You can make changes to your account',
-        icon: 'fc-analysis',
-        id: 'newWorkbook',
-        enabled: true,
-        iconExtraClassNames: 'workbenchDisplay',
-        action: () => { },
-    },
-    {
-        display: 'New Report Binder',
-        text: 'This is a data tab to show details about your data. You can make changes to your account',
-        icon: 'fc-report',
-        enabled: true,
-        action: () => { },
-        id: 'newReportBinder',
-    },
-    {
-        display: 'New Datalab',
-        text: 'This is a data tab to show details about your data. You can make changes to your account',
-        icon: 'fc-seeq-datalab',
-        id: 'newDataLab',
-        enabled: false,
-        action: () => { },
-        divider: true,
-    },
-    {
-        display: 'Folder',
-        icon: 'fc-folder',
-        action: () => { },
-        id: 'newFolder',
-    },
-];
-export const AllSeeqActionDropdownVariants = () => {
-    const [openDropdown, setOpenDropdown] = React.useState('');
-    const allSeeqActionDropdowns = (color, isDark) => (React.createElement("div", { className: isDark ? 'tw-dark tw-bg-sq-dark-background' : '' },
-        React.createElement("div", { className: "tw-p-5 " },
-            React.createElement(SeeqActionDropdown, { trigger: React.createElement(Button, { label: "New", icon: "fa-plus", variant: "theme" }), key: "seeqActionDropdownItem", "data-testid": "homeScreenNewButton", id: "seeqActionDropdownItem", align: "start", alignOffset: 0, placementOffset: 0, variant: "create-workbench", seeqActionDropdownItems: options })),
-        React.createElement("div", { className: "tw-p-5 " },
-            React.createElement("div", { className: "dark:tw-text-white tw-text-xs" }, "New workbench with arrow"),
-            React.createElement(SeeqActionDropdown, { trigger: React.createElement(Button, { label: "New", icon: "fa-plus", variant: "theme" }), key: "seeqActionDropdownItem", "data-testid": "homeScreenNewButton", id: "seeqActionDropdownItem", align: "start", alignOffset: 0, hasArrow: true, variant: "create-workbench", placementOffset: 0, seeqActionDropdownItems: options })),
-        React.createElement("div", { className: "tw-p-5 " },
-            React.createElement("div", { className: "dark:tw-text-white tw-text-xs" }, "New workbench with center align"),
-            React.createElement(SeeqActionDropdown, { trigger: React.createElement(Button, { label: "New", icon: "fa-plus", variant: "theme" }), key: "seeqActionDropdownItem", "data-testid": "homeScreenNewButton", id: "seeqActionDropdownItem", align: "center", alignOffset: 0, hasArrow: true, variant: "create-workbench", placementOffset: 0, seeqActionDropdownItems: options })),
-        React.createElement("div", { className: "tw-p-5 " },
-            React.createElement("div", { className: "dark:tw-text-white tw-text-xs" }, "New workbench with disabled button"),
-            React.createElement(SeeqActionDropdown, { trigger: React.createElement(Button, { label: "New", icon: "fa-plus", variant: "theme" }), key: "seeqActionDropdownItem", "data-testid": "homeScreenNewButton", id: "seeqActionDropdownItem", align: "center", disabled: true, variant: "create-workbench", alignOffset: 0, hasArrow: true, placementOffset: 0, seeqActionDropdownItems: options })),
-        React.createElement("div", { className: "tw-p-5 " },
-            React.createElement("div", { className: "dark:tw-text-white tw-text-xs" }, "View workbench"),
-            React.createElement(SeeqActionDropdown, { trigger: React.createElement(Button, { label: "View", icon: "fa-plus", variant: "theme" }), key: "seeqActionDropdownItem", "data-testid": "homeScreenNewButton", id: "seeqActionDropdownItem", align: "center", variant: "view-workbench", alignOffset: 0, placementOffset: 0, seeqActionDropdownItems: options })),
-        React.createElement("div", { className: "tw-p-5 " },
-            React.createElement("div", { className: "dark:tw-text-white tw-text-xs" }, "Insert seeq content"),
-            React.createElement(SeeqActionDropdown, { trigger: React.createElement(Button, { label: "Insert", icon: "fc-plus", variant: "theme" }), key: "seeqActionDropdownItem", "data-testid": "homeScreenNewButton", id: "seeqActionDropdownItem", align: "center", variant: "insert-seeq-content", alignOffset: 0, placementOffset: 0, seeqActionDropdownItems: options }))));
-    const renderAllVariations = (color) => (React.createElement("div", { className: "tw-grid tw-grid-cols-2 tw-gap-4 tw-p-4" },
-        allSeeqActionDropdowns(color),
-        allSeeqActionDropdowns(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 { QTip } from '../Tooltip/Qtip';
+import Button from '../Button/Button';
+import SeeqActionDropdown from './SeeqActionDropdown';
+export default {
+    title: 'Seeq Action Dropdown',
+};
+const options = [
+    {
+        display: 'New Workbook',
+        text: 'This is a workbook to show details about your data. You can make changes to your account',
+        icon: 'fc-analysis',
+        id: 'newWorkbook',
+        enabled: true,
+        iconExtraClassNames: 'workbenchDisplay',
+        action: () => { },
+    },
+    {
+        display: 'New Report Binder',
+        text: 'This is a data tab to show details about your data. You can make changes to your account',
+        icon: 'fc-report',
+        enabled: true,
+        action: () => { },
+        id: 'newReportBinder',
+    },
+    {
+        display: 'New Datalab',
+        text: 'This is a data tab to show details about your data. You can make changes to your account',
+        icon: 'fc-seeq-datalab',
+        id: 'newDataLab',
+        enabled: false,
+        action: () => { },
+        divider: true,
+    },
+    {
+        display: 'Folder',
+        icon: 'fc-folder',
+        action: () => { },
+        id: 'newFolder',
+    },
+];
+export const AllSeeqActionDropdownVariants = () => {
+    const [openDropdown, setOpenDropdown] = React.useState('');
+    const allSeeqActionDropdowns = (color, isDark) => (React.createElement("div", { className: isDark ? 'tw-dark tw-bg-sq-dark-background' : '' },
+        React.createElement("div", { className: "tw-p-5 " },
+            React.createElement(SeeqActionDropdown, { trigger: React.createElement(Button, { label: "New", icon: "fa-plus", variant: "theme" }), key: "seeqActionDropdownItem", "data-testid": "homeScreenNewButton", id: "seeqActionDropdownItem", align: "start", alignOffset: 0, placementOffset: 0, variant: "create-workbench", seeqActionDropdownItems: options })),
+        React.createElement("div", { className: "tw-p-5 " },
+            React.createElement("div", { className: "dark:tw-text-white tw-text-xs" }, "New workbench with arrow"),
+            React.createElement(SeeqActionDropdown, { trigger: React.createElement(Button, { label: "New", icon: "fa-plus", variant: "theme" }), key: "seeqActionDropdownItem", "data-testid": "homeScreenNewButton", id: "seeqActionDropdownItem", align: "start", alignOffset: 0, hasArrow: true, variant: "create-workbench", placementOffset: 0, seeqActionDropdownItems: options })),
+        React.createElement("div", { className: "tw-p-5 " },
+            React.createElement("div", { className: "dark:tw-text-white tw-text-xs" }, "New workbench with center align"),
+            React.createElement(SeeqActionDropdown, { trigger: React.createElement(Button, { label: "New", icon: "fa-plus", variant: "theme" }), key: "seeqActionDropdownItem", "data-testid": "homeScreenNewButton", id: "seeqActionDropdownItem", align: "center", alignOffset: 0, hasArrow: true, variant: "create-workbench", placementOffset: 0, seeqActionDropdownItems: options })),
+        React.createElement("div", { className: "tw-p-5 " },
+            React.createElement("div", { className: "dark:tw-text-white tw-text-xs" }, "New workbench with disabled button"),
+            React.createElement(SeeqActionDropdown, { trigger: React.createElement(Button, { label: "New", icon: "fa-plus", variant: "theme" }), key: "seeqActionDropdownItem", "data-testid": "homeScreenNewButton", id: "seeqActionDropdownItem", align: "center", disabled: true, variant: "create-workbench", alignOffset: 0, hasArrow: true, placementOffset: 0, seeqActionDropdownItems: options })),
+        React.createElement("div", { className: "tw-p-5 " },
+            React.createElement("div", { className: "dark:tw-text-white tw-text-xs" }, "View workbench"),
+            React.createElement(SeeqActionDropdown, { trigger: React.createElement(Button, { label: "View", icon: "fa-plus", variant: "theme" }), key: "seeqActionDropdownItem", "data-testid": "homeScreenNewButton", id: "seeqActionDropdownItem", align: "center", variant: "view-workbench", alignOffset: 0, placementOffset: 0, seeqActionDropdownItems: options })),
+        React.createElement("div", { className: "tw-p-5 " },
+            React.createElement("div", { className: "dark:tw-text-white tw-text-xs" }, "Insert seeq content"),
+            React.createElement(SeeqActionDropdown, { trigger: React.createElement(Button, { label: "Insert", icon: "fc-plus", variant: "theme" }), key: "seeqActionDropdownItem", "data-testid": "homeScreenNewButton", id: "seeqActionDropdownItem", align: "center", variant: "insert-seeq-content", alignOffset: 0, placementOffset: 0, seeqActionDropdownItems: options }))));
+    const renderAllVariations = (color) => (React.createElement("div", { className: "tw-grid tw-grid-cols-2 tw-gap-4 tw-p-4" },
+        allSeeqActionDropdowns(color),
+        allSeeqActionDropdowns(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=SeeqActionDropdown.stories.js.map

package/dist/SeeqActionDropdown/SeeqActionDropdown.test.js

@@ -1,73 +1,73 @@
-import React from 'react';
-import '@testing-library/jest-dom';
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import Icon from '../Icon';
-import SeeqActionDropdown from './SeeqActionDropdown';
-describe('SeeqActionDropdown', () => {
-    const mockOnClick = jest.fn();
-    const testId = 'trigger-icon';
-    class Context {
-        props = {
-            trigger: (React.createElement(Icon, { icon: "fc-more", type: "text", testId: testId, 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',
-            variant: 'create-workbench',
-            isHtmlTooltip: false,
-            seeqActionDropdownItems: [
-                { display: 'Orange', icon: 'fc-data-file', action: mockOnClick, enabled: true },
-                { display: 'Mango', icon: 'fc-user-community', action: mockOnClick, enabled: true },
-                { display: 'Guava', icon: 'fc-user-community', action: mockOnClick },
-                { display: 'Banana', icon: 'fc-user-community', action: mockOnClick },
-            ],
-        };
-    }
-    let tc;
-    beforeEach(() => {
-        tc = new Context();
-        jest.clearAllMocks();
-    });
-    const renderSeeqActionDropdown = (props) => render(React.createElement(SeeqActionDropdown, { ...props }));
-    const openDropdown = async () => {
-        const popover = screen.getByTestId(testId);
-        await userEvent.click(popover);
-    };
-    test('renders trigger and opens dropdown content on trigger click', async () => {
-        renderSeeqActionDropdown(tc.props);
-        expect(screen.getByTestId('trigger-icon')).toBeInTheDocument();
-        await openDropdown();
-        expect(screen.getByText('Orange')).toBeInTheDocument();
-    });
-    test('renders dividers correctly', async () => {
-        tc.props.seeqActionDropdownItems[1].divider = true;
-        renderSeeqActionDropdown(tc.props);
-        expect(screen.getByTestId('trigger-icon')).toBeInTheDocument();
-        await openDropdown();
-        expect(screen.getByText('Orange')).toBeInTheDocument();
-        expect(screen.getByTestId('dropdown-divider-1')).toBeInTheDocument();
-    });
-    test('calls onClick handler when dropdown item is selected', async () => {
-        renderSeeqActionDropdown(tc.props);
-        await openDropdown();
-        const item1 = screen.getByText('Orange');
-        await userEvent.click(item1);
-        expect(mockOnClick).toHaveBeenCalledTimes(1);
-    });
-    test('closes dropdown when item is clicked', async () => {
-        renderSeeqActionDropdown(tc.props);
-        await openDropdown();
-        const item1 = screen.getByText('Orange');
-        await userEvent.click(item1);
-        expect(mockOnClick).toHaveBeenCalledTimes(1);
-        expect(screen.queryByText('Orange')).not.toBeInTheDocument();
-    });
-    test('does not open when disabled', async () => {
-        tc.props.disabled = true;
-        renderSeeqActionDropdown(tc.props);
-        await openDropdown();
-        expect(screen.queryByText('Orange')).not.toBeInTheDocument();
-    });
-});
+import React from 'react';
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import Icon from '../Icon';
+import SeeqActionDropdown from './SeeqActionDropdown';
+describe('SeeqActionDropdown', () => {
+    const mockOnClick = jest.fn();
+    const testId = 'trigger-icon';
+    class Context {
+        props = {
+            trigger: (React.createElement(Icon, { icon: "fc-more", type: "text", testId: testId, 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',
+            variant: 'create-workbench',
+            isHtmlTooltip: false,
+            seeqActionDropdownItems: [
+                { display: 'Orange', icon: 'fc-data-file', action: mockOnClick, enabled: true },
+                { display: 'Mango', icon: 'fc-user-community', action: mockOnClick, enabled: true },
+                { display: 'Guava', icon: 'fc-user-community', action: mockOnClick },
+                { display: 'Banana', icon: 'fc-user-community', action: mockOnClick },
+            ],
+        };
+    }
+    let tc;
+    beforeEach(() => {
+        tc = new Context();
+        jest.clearAllMocks();
+    });
+    const renderSeeqActionDropdown = (props) => render(React.createElement(SeeqActionDropdown, { ...props }));
+    const openDropdown = async () => {
+        const popover = screen.getByTestId(testId);
+        await userEvent.click(popover);
+    };
+    test('renders trigger and opens dropdown content on trigger click', async () => {
+        renderSeeqActionDropdown(tc.props);
+        expect(screen.getByTestId('trigger-icon')).toBeInTheDocument();
+        await openDropdown();
+        expect(screen.getByText('Orange')).toBeInTheDocument();
+    });
+    test('renders dividers correctly', async () => {
+        tc.props.seeqActionDropdownItems[1].divider = true;
+        renderSeeqActionDropdown(tc.props);
+        expect(screen.getByTestId('trigger-icon')).toBeInTheDocument();
+        await openDropdown();
+        expect(screen.getByText('Orange')).toBeInTheDocument();
+        expect(screen.getByTestId('dropdown-divider-1')).toBeInTheDocument();
+    });
+    test('calls onClick handler when dropdown item is selected', async () => {
+        renderSeeqActionDropdown(tc.props);
+        await openDropdown();
+        const item1 = screen.getByText('Orange');
+        await userEvent.click(item1);
+        expect(mockOnClick).toHaveBeenCalledTimes(1);
+    });
+    test('closes dropdown when item is clicked', async () => {
+        renderSeeqActionDropdown(tc.props);
+        await openDropdown();
+        const item1 = screen.getByText('Orange');
+        await userEvent.click(item1);
+        expect(mockOnClick).toHaveBeenCalledTimes(1);
+        expect(screen.queryByText('Orange')).not.toBeInTheDocument();
+    });
+    test('does not open when disabled', async () => {
+        tc.props.disabled = true;
+        renderSeeqActionDropdown(tc.props);
+        await openDropdown();
+        expect(screen.queryByText('Orange')).not.toBeInTheDocument();
+    });
+});
 //# sourceMappingURL=SeeqActionDropdown.test.js.map

package/dist/SeeqActionDropdown/SeeqActionDropdown.types.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { TooltipComponentProps } from '../Tooltip/Tooltip.types';
 export interface SeeqActionDropdownItems {
     id?: string;

package/dist/SeeqActionDropdown/SeeqActionDropdown.types.js

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

package/dist/SeeqActionDropdown/index.js

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

package/dist/SeeqActionDropdown/variants.js

@@ -1,23 +1,23 @@
-import React from 'react';
-import Icon from '../Icon/Icon';
-export const SeeqActionDropdownItem = (item) => {
-    return (React.createElement("div", { className: "tw-flex-col tw-flex tw-p-[10px] tw-pl-5 tw-w-[600px]" },
-        React.createElement("div", { className: "tw-flex tw-flex-row tw-gap-2 tw-items-end" },
-            item.icon && (React.createElement(Icon, { icon: item.icon, type: "text", extraClassNames: 'tw-rounded-[3px] tw-h-8 tw-w-8 tw-flex tw-justify-center tw-items-center tw-bg-sq-color-dark dark:tw-text-sq-white tw-text-[22px] tw-text-sq-white ' +
-                    item.iconExtraClassNames })),
-            React.createElement("h4", { className: "tw-text-base tw-font-[600] tw-leading-[20px] mb-0" }, item.display)),
-        React.createElement("div", { className: "tw-text-[13px] tw-font-normal" }, item.text)));
-};
-export const ViewWorkbench = (item) => {
-    return (React.createElement("div", { className: "tw-flex-col tw-flex tw-p-[10px]" },
-        React.createElement("div", { className: "tw-flex tw-flex-row tw-gap-2 tw-items-end" },
-            item.icon && (React.createElement(Icon, { icon: item.icon, type: "text", extraClassNames: 'tw-flex tw-justify-center tw-items-center tw-text-[20px] dark:tw-text-sq-white tw-text-sq-text-color ' +
-                    item.iconExtraClassNames })),
-            React.createElement("div", { className: "tw-text-[13px]" }, item.display))));
-};
-export const InsertSeeqContent = (item) => {
-    return (React.createElement("div", { className: "tw-flex-col tw-flex tw-justify-start tw-p-[10px] tw-font-normal tw-text-left tw-text-sq-text-color dark:tw-text-sq-dark-text" },
-        React.createElement("h5", { className: "tw-text-[16px] tw-font-medium tw-text-sq-color-dark tw-leading-[18px]" }, item.display),
-        React.createElement("div", { className: "tw-text-[13px] tw-text-sq-text-color dark:tw-text-sq-dark-text !tw-mt-1" }, item.text)));
-};
+import React from 'react';
+import Icon from '../Icon/Icon';
+export const SeeqActionDropdownItem = (item) => {
+    return (React.createElement("div", { className: "tw-flex-col tw-flex tw-p-[10px] tw-pl-5 tw-w-[600px]" },
+        React.createElement("div", { className: "tw-flex tw-flex-row tw-gap-2 tw-items-end" },
+            item.icon && (React.createElement(Icon, { icon: item.icon, type: "text", extraClassNames: 'tw-rounded-[3px] tw-h-8 tw-w-8 tw-flex tw-justify-center tw-items-center tw-bg-sq-color-dark dark:tw-text-sq-white tw-text-[22px] tw-text-sq-white ' +
+                    item.iconExtraClassNames })),
+            React.createElement("h4", { className: "tw-text-base tw-font-[600] tw-leading-[20px] mb-0" }, item.display)),
+        React.createElement("div", { className: "tw-text-[13px] tw-font-normal" }, item.text)));
+};
+export const ViewWorkbench = (item) => {
+    return (React.createElement("div", { className: "tw-flex-col tw-flex tw-p-[10px]" },
+        React.createElement("div", { className: "tw-flex tw-flex-row tw-gap-2 tw-items-end" },
+            item.icon && (React.createElement(Icon, { icon: item.icon, type: "text", extraClassNames: 'tw-flex tw-justify-center tw-items-center tw-text-[20px] dark:tw-text-sq-white tw-text-sq-text-color ' +
+                    item.iconExtraClassNames })),
+            React.createElement("div", { className: "tw-text-[13px]" }, item.display))));
+};
+export const InsertSeeqContent = (item) => {
+    return (React.createElement("div", { className: "tw-flex-col tw-flex tw-justify-start tw-p-[10px] tw-font-normal tw-text-left tw-text-sq-text-color dark:tw-text-sq-dark-text" },
+        React.createElement("h5", { className: "tw-text-[16px] tw-font-medium tw-text-sq-color-dark tw-leading-[18px]" }, item.display),
+        React.createElement("div", { className: "tw-text-[13px] tw-text-sq-text-color dark:tw-text-sq-dark-text !tw-mt-1" }, item.text)));
+};
 //# sourceMappingURL=variants.js.map