@seeqdev/qomponents 0.0.108 → 0.0.109

package/dist/ToolbarButton/ToolbarButton.stories.js

@@ -1,94 +1,94 @@
-import React from 'react';
-import { ToolbarButton } from './ToolbarButton';
-import Icon from '../Icon';
-import { QTip } from '../Tooltip/Qtip';
-export default {
-    title: 'Toolbar Button',
-};
-export const AllToolbarButtonVariants = () => {
-    const options = [
-        { value: 'a', label: 'Chocolate' },
-        { value: 'b', label: 'Strawberry' },
-        { value: 'c', label: 'Vanilla' },
-        { value: 'd', label: 'Rocky Road' },
-        { value: 'e', label: 'Crazy Cow' },
-        { value: 'f', label: 'Almond Joy' },
-        { value: 'g', label: 'All of the above' },
-    ];
-    const colorOptions = [
-        { value: 'h', label: 'pink' },
-        { value: 'i', label: 'purple' },
-        { value: 'j', label: 'green' },
-        { value: 'k', label: 'red' },
-    ];
-    const allToolbarButtons = (isDark) => (React.createElement("div", { className: isDark ? 'tw-dark tw-bg-sq-dark-background' : '' },
-        React.createElement("div", { className: "tw-p-5 " },
-            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, isSmall: true, 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"),
-                    options.map((option) => (React.createElement("div", { key: option.value, className: "tw-flex tw-items-center tw-p-2 hover:tw-bg-green-500" },
-                        React.createElement(Icon, { type: "color", color: "green", icon: "fc-check", extraClassNames: "tw-mr-2" }),
-                        React.createElement("span", null, option.label)))),
-                    React.createElement("p", { className: "tw-bg-gray-200 dark:tw-bg-gray-700 tw-p-2" }, "Colors"),
-                    colorOptions.map((option) => (React.createElement("div", { key: option.value, className: "tw-flex tw-items-center tw-p-2" },
-                        React.createElement(Icon, { type: "color", color: "green", icon: "fc-check", extraClassNames: "tw-mr-2" }),
-                        React.createElement("span", null, option.label))))) })),
-        React.createElement("div", { className: "tw-p-5 " },
-            React.createElement(ToolbarButton, { icon: "fc-y-axis", label: "Normal", testId: "basic-popover1", tooltipText: "This is a normal 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"),
-                    options.map((option) => (React.createElement("div", { key: option.value, className: "tw-flex tw-items-center tw-p-2 hover:tw-bg-green-500" },
-                        React.createElement(Icon, { type: "color", color: "green", icon: "fc-check", extraClassNames: "tw-mr-2" }),
-                        React.createElement("span", null, option.label)))),
-                    React.createElement("p", { className: "tw-bg-gray-200 dark:tw-bg-gray-700 tw-p-2" }, "Colors"),
-                    colorOptions.map((option) => (React.createElement("div", { key: option.value, className: "tw-flex tw-items-center tw-p-2" },
-                        React.createElement(Icon, { type: "color", color: "green", icon: "fc-check", extraClassNames: "tw-mr-2" }),
-                        React.createElement("span", null, option.label))))) })),
-        React.createElement("div", { className: "tw-p-5 " },
-            React.createElement(ToolbarButton, { icon: "fc-y-axis", label: "With arrow", testId: "basic-popover1", tooltipText: "This is a normal popover.", tooltipOptions: { position: 'top', delay: 0 }, hasArrow: true, 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"),
-                    options.map((option) => (React.createElement("div", { key: option.value, className: "tw-flex tw-items-center tw-p-2 hover:tw-bg-green-500" },
-                        React.createElement(Icon, { type: "color", color: "green", icon: "fc-check", extraClassNames: "tw-mr-2" }),
-                        React.createElement("span", null, option.label)))),
-                    React.createElement("p", { className: "tw-bg-gray-200 dark:tw-bg-gray-700 tw-p-2" }, "Colors"),
-                    colorOptions.map((option) => (React.createElement("div", { key: option.value, className: "tw-flex tw-items-center tw-p-2" },
-                        React.createElement(Icon, { type: "color", color: "green", icon: "fc-check", extraClassNames: "tw-mr-2" }),
-                        React.createElement("span", null, option.label))))) })),
-        React.createElement("div", { className: "tw-p-5 " },
-            React.createElement("p", { className: "tw-text-sq-color-dark tw-text-[10px]" }, "Without popup"),
-            React.createElement(ToolbarButton, { icon: "fc-y-axis", label: "Button", testId: "basic-popover3", isHtmlTooltip: false })),
-        React.createElement("div", { className: "tw-p-5 " },
-            React.createElement(ToolbarButton, { icon: "fc-y-axis", label: "Disabled", testId: "basic-popover2", tooltipText: "This is a popover.", tooltipOptions: { position: 'top' }, isHtmlTooltip: false, disabled: true, popoverContent: React.createElement("div", { className: "tw-border tw-border-gray-100 tw-p-2 tw-rounded-sm tw-text-sm dark:tw-bg-sq-dark-background" },
-                    React.createElement("p", { className: "tw-bg-gray-200 dark:tw-bg-gray-700 tw-p-2" }, "Flavors"),
-                    options.map((option) => (React.createElement("div", { key: option.value, className: "tw-flex tw-items-center tw-p-2 hover:tw-bg-green-500" },
-                        React.createElement(Icon, { type: "color", color: "green", icon: "fc-check", extraClassNames: "tw-mr-2" }),
-                        React.createElement("span", null, option.label)))),
-                    React.createElement("p", { className: "tw-bg-gray-200 dark:tw-bg-gray-700 tw-p-2" }, "Colors"),
-                    colorOptions.map((option) => (React.createElement("div", { key: option.value, className: "tw-flex tw-items-center tw-p-2" },
-                        React.createElement(Icon, { type: "color", color: "green", icon: "fc-check", extraClassNames: "tw-mr-2" }),
-                        React.createElement("span", null, option.label))))) })),
-        React.createElement("div", { className: "tw-p-5 " },
-            React.createElement(ToolbarButton, { id: "scatterPlotFlipXY", isActive: false, disabled: true, testId: "scatterPlotFlipXY", label: "", icon: "fc-grab-window", tooltipText: "This is a large disabled popover.", tooltipOptions: { position: 'top' }, extraClassNames: "no-border ml5" })),
-        React.createElement("div", { className: "tw-p-5 " },
-            React.createElement(ToolbarButton, { icon: "fc-y-axis", tooltipText: "This is a large popover icon", tooltipOptions: { position: 'top', delay: 0 }, testId: "basic-popover4", isHtmlTooltip: false })),
-        React.createElement("div", { className: "tw-p-5 " },
-            React.createElement(ToolbarButton, { icon: "fc-y-axis", label: "Active", testId: "basic-popover5", tooltipText: "This is a button.", tooltipOptions: { position: 'top', delay: 0 }, isHtmlTooltip: false, isActive: true })),
-        React.createElement("div", { className: "tw-p-5 " },
-            React.createElement(ToolbarButton, { isPrimaryAnSvg: true, iconHeight: 13, iconWidth: 13, icon: "svgpath:M 19 2.76 L 18.016 4.066 L 7.678 17.765 L 6.745 19 L 5.812 17.765 L 0.984 11.373 L 0 10.067 L 1.867 7.307 L 2.851 8.613 L 6.745 13.771 L 16.149 1.306 L 17.133 0 L 19 2.76 Z", label: "Active", testId: "basic-popover5", tooltipText: "This is a button.", tooltipOptions: { position: 'top', delay: 0 }, isHtmlTooltip: false, isActive: true }))));
-    const renderAllVariations = () => (React.createElement("div", { className: "tw-grid tw-grid-cols-2 tw-gap-4 tw-p-4" },
-        allToolbarButtons(),
-        allToolbarButtons(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()),
-        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())));
-};
+import React from 'react';
+import { ToolbarButton } from './ToolbarButton';
+import Icon from '../Icon';
+import { QTip } from '../Tooltip/Qtip';
+export default {
+    title: 'Toolbar Button',
+};
+export const AllToolbarButtonVariants = () => {
+    const options = [
+        { value: 'a', label: 'Chocolate' },
+        { value: 'b', label: 'Strawberry' },
+        { value: 'c', label: 'Vanilla' },
+        { value: 'd', label: 'Rocky Road' },
+        { value: 'e', label: 'Crazy Cow' },
+        { value: 'f', label: 'Almond Joy' },
+        { value: 'g', label: 'All of the above' },
+    ];
+    const colorOptions = [
+        { value: 'h', label: 'pink' },
+        { value: 'i', label: 'purple' },
+        { value: 'j', label: 'green' },
+        { value: 'k', label: 'red' },
+    ];
+    const allToolbarButtons = (isDark) => (React.createElement("div", { className: isDark ? 'tw-dark tw-bg-sq-dark-background' : '' },
+        React.createElement("div", { className: "tw-p-5 " },
+            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, isSmall: true, 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"),
+                    options.map((option) => (React.createElement("div", { key: option.value, className: "tw-flex tw-items-center tw-p-2 hover:tw-bg-green-500" },
+                        React.createElement(Icon, { type: "color", color: "green", icon: "fc-check", extraClassNames: "tw-mr-2" }),
+                        React.createElement("span", null, option.label)))),
+                    React.createElement("p", { className: "tw-bg-gray-200 dark:tw-bg-gray-700 tw-p-2" }, "Colors"),
+                    colorOptions.map((option) => (React.createElement("div", { key: option.value, className: "tw-flex tw-items-center tw-p-2" },
+                        React.createElement(Icon, { type: "color", color: "green", icon: "fc-check", extraClassNames: "tw-mr-2" }),
+                        React.createElement("span", null, option.label))))) })),
+        React.createElement("div", { className: "tw-p-5 " },
+            React.createElement(ToolbarButton, { icon: "fc-y-axis", label: "Normal", testId: "basic-popover1", tooltipText: "This is a normal 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"),
+                    options.map((option) => (React.createElement("div", { key: option.value, className: "tw-flex tw-items-center tw-p-2 hover:tw-bg-green-500" },
+                        React.createElement(Icon, { type: "color", color: "green", icon: "fc-check", extraClassNames: "tw-mr-2" }),
+                        React.createElement("span", null, option.label)))),
+                    React.createElement("p", { className: "tw-bg-gray-200 dark:tw-bg-gray-700 tw-p-2" }, "Colors"),
+                    colorOptions.map((option) => (React.createElement("div", { key: option.value, className: "tw-flex tw-items-center tw-p-2" },
+                        React.createElement(Icon, { type: "color", color: "green", icon: "fc-check", extraClassNames: "tw-mr-2" }),
+                        React.createElement("span", null, option.label))))) })),
+        React.createElement("div", { className: "tw-p-5 " },
+            React.createElement(ToolbarButton, { icon: "fc-y-axis", label: "With arrow", testId: "basic-popover1", tooltipText: "This is a normal popover.", tooltipOptions: { position: 'top', delay: 0 }, hasArrow: true, 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"),
+                    options.map((option) => (React.createElement("div", { key: option.value, className: "tw-flex tw-items-center tw-p-2 hover:tw-bg-green-500" },
+                        React.createElement(Icon, { type: "color", color: "green", icon: "fc-check", extraClassNames: "tw-mr-2" }),
+                        React.createElement("span", null, option.label)))),
+                    React.createElement("p", { className: "tw-bg-gray-200 dark:tw-bg-gray-700 tw-p-2" }, "Colors"),
+                    colorOptions.map((option) => (React.createElement("div", { key: option.value, className: "tw-flex tw-items-center tw-p-2" },
+                        React.createElement(Icon, { type: "color", color: "green", icon: "fc-check", extraClassNames: "tw-mr-2" }),
+                        React.createElement("span", null, option.label))))) })),
+        React.createElement("div", { className: "tw-p-5 " },
+            React.createElement("p", { className: "tw-text-sq-color-dark tw-text-[10px]" }, "Without popup"),
+            React.createElement(ToolbarButton, { icon: "fc-y-axis", label: "Button", testId: "basic-popover3", isHtmlTooltip: false })),
+        React.createElement("div", { className: "tw-p-5 " },
+            React.createElement(ToolbarButton, { icon: "fc-y-axis", label: "Disabled", testId: "basic-popover2", tooltipText: "This is a popover.", tooltipOptions: { position: 'top' }, isHtmlTooltip: false, disabled: true, popoverContent: React.createElement("div", { className: "tw-border tw-border-gray-100 tw-p-2 tw-rounded-sm tw-text-sm dark:tw-bg-sq-dark-background" },
+                    React.createElement("p", { className: "tw-bg-gray-200 dark:tw-bg-gray-700 tw-p-2" }, "Flavors"),
+                    options.map((option) => (React.createElement("div", { key: option.value, className: "tw-flex tw-items-center tw-p-2 hover:tw-bg-green-500" },
+                        React.createElement(Icon, { type: "color", color: "green", icon: "fc-check", extraClassNames: "tw-mr-2" }),
+                        React.createElement("span", null, option.label)))),
+                    React.createElement("p", { className: "tw-bg-gray-200 dark:tw-bg-gray-700 tw-p-2" }, "Colors"),
+                    colorOptions.map((option) => (React.createElement("div", { key: option.value, className: "tw-flex tw-items-center tw-p-2" },
+                        React.createElement(Icon, { type: "color", color: "green", icon: "fc-check", extraClassNames: "tw-mr-2" }),
+                        React.createElement("span", null, option.label))))) })),
+        React.createElement("div", { className: "tw-p-5 " },
+            React.createElement(ToolbarButton, { id: "scatterPlotFlipXY", isActive: false, disabled: true, testId: "scatterPlotFlipXY", label: "", icon: "fc-grab-window", tooltipText: "This is a large disabled popover.", tooltipOptions: { position: 'top' }, extraClassNames: "no-border ml5" })),
+        React.createElement("div", { className: "tw-p-5 " },
+            React.createElement(ToolbarButton, { icon: "fc-y-axis", tooltipText: "This is a large popover icon", tooltipOptions: { position: 'top', delay: 0 }, testId: "basic-popover4", isHtmlTooltip: false })),
+        React.createElement("div", { className: "tw-p-5 " },
+            React.createElement(ToolbarButton, { icon: "fc-y-axis", label: "Active", testId: "basic-popover5", tooltipText: "This is a button.", tooltipOptions: { position: 'top', delay: 0 }, isHtmlTooltip: false, isActive: true })),
+        React.createElement("div", { className: "tw-p-5 " },
+            React.createElement(ToolbarButton, { isPrimaryAnSvg: true, iconHeight: 13, iconWidth: 13, icon: "svgpath:M 19 2.76 L 18.016 4.066 L 7.678 17.765 L 6.745 19 L 5.812 17.765 L 0.984 11.373 L 0 10.067 L 1.867 7.307 L 2.851 8.613 L 6.745 13.771 L 16.149 1.306 L 17.133 0 L 19 2.76 Z", label: "Active", testId: "basic-popover5", tooltipText: "This is a button.", tooltipOptions: { position: 'top', delay: 0 }, isHtmlTooltip: false, isActive: true }))));
+    const renderAllVariations = () => (React.createElement("div", { className: "tw-grid tw-grid-cols-2 tw-gap-4 tw-p-4" },
+        allToolbarButtons(),
+        allToolbarButtons(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()),
+        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=ToolbarButton.stories.js.map

package/dist/ToolbarButton/ToolbarButton.test.js

@@ -1,93 +1,93 @@
-import React from 'react';
-import '@testing-library/jest-dom';
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { ToolbarButton } from './ToolbarButton';
-import Icon from '../Icon';
-describe('ToolbarButton', () => {
-    const options = [
-        { value: 'a', label: 'Chocolate' },
-        { value: 'b', label: 'Strawberry' },
-        { value: 'c', label: 'Vanilla' },
-        { value: 'd', label: 'Rocky Road' },
-        { value: 'e', label: 'Crazy Cow' },
-        { value: 'f', label: 'Almond Joy' },
-        { value: 'g', label: 'All of the above' },
-    ];
-    const colorOptions = [
-        { value: 'h', label: 'pink' },
-        { value: 'i', label: 'purple' },
-        { value: 'j', label: 'green' },
-        { value: 'k', label: 'red' },
-    ];
-    const popoverContent = (React.createElement("div", { className: "tw-text-sm" },
-        React.createElement("p", { className: "tw-bg-gray-200 tw-p-2" }, "Flavors"),
-        options.map((option) => (React.createElement("div", { key: option.value, className: "tw-flex tw-items-center tw-p-2 hover:tw-bg-green-500" },
-            React.createElement(Icon, { type: "color", color: "green", icon: "fc-check", extraClassNames: "tw-mr-2" }),
-            React.createElement("span", null, option.label)))),
-        React.createElement("p", null, "Colors"),
-        colorOptions.map((option) => (React.createElement("div", { key: option.value, className: "tw-flex tw-items-center tw-p-2" },
-            React.createElement(Icon, { type: "color", color: "green", icon: "fc-check", extraClassNames: "tw-mr-2" }),
-            React.createElement("span", null, option.label))))));
-    const mockOnClick = jest.fn();
-    class Context {
-        testId = 'popoverTestId';
-        label = 'popover label';
-        props = {
-            label: this.label,
-            onClick: mockOnClick,
-            testId: this.testId,
-            icon: 'fc-y-axis',
-            tooltipText: 'This is a popover.',
-            tooltipOptions: { position: 'top', delay: 0 },
-            isHtmlTooltip: false,
-            isSmall: false,
-            popoverContent,
-        };
-    }
-    let tc;
-    beforeEach(() => {
-        tc = new Context();
-        jest.clearAllMocks();
-    });
-    const renderToolbarButton = (props) => render(React.createElement(ToolbarButton, { ...props }));
-    const openPopover = async () => {
-        const popover = screen.getByTestId(tc.testId);
-        await userEvent.click(popover);
-    };
-    it('renders popover icon without label when small', () => {
-        tc.props.isSmall = true;
-        renderToolbarButton(tc.props);
-        const popoverLabel = screen.queryByText(tc.label);
-        expect(popoverLabel).not.toBeInTheDocument();
-    });
-    it('renders popover trigger button', () => {
-        renderToolbarButton(tc.props);
-        expect(screen.getByText(tc.label)).toBeInTheDocument();
-    });
-    it('opens popover on click', async () => {
-        renderToolbarButton(tc.props);
-        await openPopover();
-        expect(screen.getByText(options[2].label)).toBeVisible();
-    });
-    it('renders disabled popover trigger', async () => {
-        renderToolbarButton({ ...tc.props, disabled: true });
-        await openPopover();
-        expect(mockOnClick).not.toHaveBeenCalled();
-    });
-    it('handles click events', async () => {
-        const handleClick = jest.fn();
-        tc.props.onClick = handleClick;
-        const { getByTestId } = renderToolbarButton(tc.props);
-        await userEvent.click(getByTestId(tc.testId));
-        expect(handleClick).toHaveBeenCalled();
-    });
-    it('handles click events within popover and does not close the popover', async () => {
-        renderToolbarButton(tc.props);
-        expect(screen.queryByText(options[4].label)).not.toBeInTheDocument();
-        await openPopover();
-        await userEvent.click(screen.getByText(options[3].label));
-        expect(screen.getByText(options[4].label)).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 { ToolbarButton } from './ToolbarButton';
+import Icon from '../Icon';
+describe('ToolbarButton', () => {
+    const options = [
+        { value: 'a', label: 'Chocolate' },
+        { value: 'b', label: 'Strawberry' },
+        { value: 'c', label: 'Vanilla' },
+        { value: 'd', label: 'Rocky Road' },
+        { value: 'e', label: 'Crazy Cow' },
+        { value: 'f', label: 'Almond Joy' },
+        { value: 'g', label: 'All of the above' },
+    ];
+    const colorOptions = [
+        { value: 'h', label: 'pink' },
+        { value: 'i', label: 'purple' },
+        { value: 'j', label: 'green' },
+        { value: 'k', label: 'red' },
+    ];
+    const popoverContent = (React.createElement("div", { className: "tw-text-sm" },
+        React.createElement("p", { className: "tw-bg-gray-200 tw-p-2" }, "Flavors"),
+        options.map((option) => (React.createElement("div", { key: option.value, className: "tw-flex tw-items-center tw-p-2 hover:tw-bg-green-500" },
+            React.createElement(Icon, { type: "color", color: "green", icon: "fc-check", extraClassNames: "tw-mr-2" }),
+            React.createElement("span", null, option.label)))),
+        React.createElement("p", null, "Colors"),
+        colorOptions.map((option) => (React.createElement("div", { key: option.value, className: "tw-flex tw-items-center tw-p-2" },
+            React.createElement(Icon, { type: "color", color: "green", icon: "fc-check", extraClassNames: "tw-mr-2" }),
+            React.createElement("span", null, option.label))))));
+    const mockOnClick = jest.fn();
+    class Context {
+        testId = 'popoverTestId';
+        label = 'popover label';
+        props = {
+            label: this.label,
+            onClick: mockOnClick,
+            testId: this.testId,
+            icon: 'fc-y-axis',
+            tooltipText: 'This is a popover.',
+            tooltipOptions: { position: 'top', delay: 0 },
+            isHtmlTooltip: false,
+            isSmall: false,
+            popoverContent,
+        };
+    }
+    let tc;
+    beforeEach(() => {
+        tc = new Context();
+        jest.clearAllMocks();
+    });
+    const renderToolbarButton = (props) => render(React.createElement(ToolbarButton, { ...props }));
+    const openPopover = async () => {
+        const popover = screen.getByTestId(tc.testId);
+        await userEvent.click(popover);
+    };
+    it('renders popover icon without label when small', () => {
+        tc.props.isSmall = true;
+        renderToolbarButton(tc.props);
+        const popoverLabel = screen.queryByText(tc.label);
+        expect(popoverLabel).not.toBeInTheDocument();
+    });
+    it('renders popover trigger button', () => {
+        renderToolbarButton(tc.props);
+        expect(screen.getByText(tc.label)).toBeInTheDocument();
+    });
+    it('opens popover on click', async () => {
+        renderToolbarButton(tc.props);
+        await openPopover();
+        expect(screen.getByText(options[2].label)).toBeVisible();
+    });
+    it('renders disabled popover trigger', async () => {
+        renderToolbarButton({ ...tc.props, disabled: true });
+        await openPopover();
+        expect(mockOnClick).not.toHaveBeenCalled();
+    });
+    it('handles click events', async () => {
+        const handleClick = jest.fn();
+        tc.props.onClick = handleClick;
+        const { getByTestId } = renderToolbarButton(tc.props);
+        await userEvent.click(getByTestId(tc.testId));
+        expect(handleClick).toHaveBeenCalled();
+    });
+    it('handles click events within popover and does not close the popover', async () => {
+        renderToolbarButton(tc.props);
+        expect(screen.queryByText(options[4].label)).not.toBeInTheDocument();
+        await openPopover();
+        await userEvent.click(screen.getByText(options[3].label));
+        expect(screen.getByText(options[4].label)).toBeInTheDocument();
+    });
+});
 //# sourceMappingURL=ToolbarButton.test.js.map

package/dist/ToolbarButton/ToolbarButton.types.js

@@ -1,2 +1,2 @@
-export const toolbarButtonVariants = ['outline', 'theme', 'theme-light', 'warning', 'danger', 'no-border'];
+export const toolbarButtonVariants = ['outline', 'theme', 'theme-light', 'warning', 'danger', 'no-border'];
 //# sourceMappingURL=ToolbarButton.types.js.map

package/dist/ToolbarButton/index.js

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

package/dist/Tooltip/QTip.stories.js

@@ -1,45 +1,45 @@
-import React from 'react';
-import Button from '../Button';
-import { tooltipPositions } from './Tooltip.types';
-import { QTip } from './Qtip';
-import Icon from '../Icon';
-export default {
-    title: 'Tooltip',
-};
-export const AllQTips = () => {
-    const renderSvgWithTooltip = () => tooltipPositions.map((position) => (React.createElement("div", { className: "tw-w-full tw-flex tw-justify-center tw-items-center" },
-        React.createElement("div", { "data-qtip-text": "this is a test tooltip", "data-qtip-placement": position, key: `${position}_svg` },
-            React.createElement("svg", { viewBox: "0 0 19 19", xmlns: "http://www.w3.org/2000/svg", className: "seeq-icon p2", height: "19", width: "19" },
-                React.createElement("path", { d: "M 2.714 1.188 L 2.714 0 L 0 0 L 0 1.188 L 0 2.375 L 0 13.656 L 0 17.813 L 0 19 L 2.714 19 L 2.714 17.813 L 2.714 13.063 L 5.441 12.465 C 7.184 12.083 9.029 12.261 10.637 12.962 C 12.511 13.782 14.687 13.883 16.646 13.237 L 19 12.469 L 19 0.594 L 16.693 1.603 C 14.729 2.464 12.418 2.464 10.454 1.603 C 8.966 0.95 7.256 0.787 5.641 1.139 L 2.714 1.781 L 2.714 1.188 Z", fill: "red" }))))));
-    const renderButtonsWithTooltip = () => tooltipPositions.map((position) => (React.createElement("div", { key: `${position}_button` },
-        React.createElement(Button, { tooltip: `Tooltip on the ${position}`, label: position, tooltipOptions: { position } }))));
-    const renderIconsWithHtmlTooltip = () => tooltipPositions.map((position) => (React.createElement("div", { key: `${position}_icon` },
-        React.createElement(Icon, { tooltip: "<div><h2>Fancy Tooltip</h2> This is a special tooltip. Why? <br />Because it supports <b>HTML!</b></div>", tooltipPlacement: position, icon: "fc-sun", isHtmlTooltip: true }))));
-    const renderTextTooltipOnText = () => tooltipPositions.map((position) => (React.createElement("div", { key: `${position}_text` },
-        React.createElement("span", { "data-qtip-text": "Helpful information provided here", "data-qtip-placement": position },
-            "Hover for Tooltip (on the ",
-            position,
-            ")"))));
-    const renderTextTooltipOnTextWithDelay = () => tooltipPositions.map((position) => (React.createElement("div", { key: `${position}_text` },
-        React.createElement("span", { "data-qtip-text": "Helpful information provided here", "data-qtip-placement": position, "data-qtip-delay": 1500 },
-            "Hover for Tooltip (on the ",
-            position,
-            ") - with delay (1500ms)"))));
-    const renderTextTooltipOnOverflowHiddenText = () => tooltipPositions.map((position) => (React.createElement("div", { key: `${position}_text`, className: "tw-overflow-hidden" },
-        React.createElement("span", { "data-qtip-text": "Helpful information provided here", "data-qtip-placement": position },
-            "Hover for Tooltip (on the ",
-            position,
-            ")",
-            React.createElement("br", null),
-            "(Overflow set to hidden)"))));
-    return (React.createElement(React.Fragment, null,
-        React.createElement(QTip, null),
-        React.createElement("div", { className: "tw-grid tw-grid-cols-4 tw-gap-4 tw-text-center" },
-            renderSvgWithTooltip(),
-            renderButtonsWithTooltip(),
-            renderIconsWithHtmlTooltip(),
-            renderTextTooltipOnText(),
-            renderTextTooltipOnTextWithDelay(),
-            renderTextTooltipOnOverflowHiddenText())));
-};
+import React from 'react';
+import Button from '../Button';
+import { tooltipPositions } from './Tooltip.types';
+import { QTip } from './Qtip';
+import Icon from '../Icon';
+export default {
+    title: 'Tooltip',
+};
+export const AllQTips = () => {
+    const renderSvgWithTooltip = () => tooltipPositions.map((position) => (React.createElement("div", { className: "tw-w-full tw-flex tw-justify-center tw-items-center" },
+        React.createElement("div", { "data-qtip-text": "this is a test tooltip", "data-qtip-placement": position, key: `${position}_svg` },
+            React.createElement("svg", { viewBox: "0 0 19 19", xmlns: "http://www.w3.org/2000/svg", className: "seeq-icon p2", height: "19", width: "19" },
+                React.createElement("path", { d: "M 2.714 1.188 L 2.714 0 L 0 0 L 0 1.188 L 0 2.375 L 0 13.656 L 0 17.813 L 0 19 L 2.714 19 L 2.714 17.813 L 2.714 13.063 L 5.441 12.465 C 7.184 12.083 9.029 12.261 10.637 12.962 C 12.511 13.782 14.687 13.883 16.646 13.237 L 19 12.469 L 19 0.594 L 16.693 1.603 C 14.729 2.464 12.418 2.464 10.454 1.603 C 8.966 0.95 7.256 0.787 5.641 1.139 L 2.714 1.781 L 2.714 1.188 Z", fill: "red" }))))));
+    const renderButtonsWithTooltip = () => tooltipPositions.map((position) => (React.createElement("div", { key: `${position}_button` },
+        React.createElement(Button, { tooltip: `Tooltip on the ${position}`, label: position, tooltipOptions: { position } }))));
+    const renderIconsWithHtmlTooltip = () => tooltipPositions.map((position) => (React.createElement("div", { key: `${position}_icon` },
+        React.createElement(Icon, { tooltip: "<div><h2>Fancy Tooltip</h2> This is a special tooltip. Why? <br />Because it supports <b>HTML!</b></div>", tooltipPlacement: position, icon: "fc-sun", isHtmlTooltip: true }))));
+    const renderTextTooltipOnText = () => tooltipPositions.map((position) => (React.createElement("div", { key: `${position}_text` },
+        React.createElement("span", { "data-qtip-text": "Helpful information provided here", "data-qtip-placement": position },
+            "Hover for Tooltip (on the ",
+            position,
+            ")"))));
+    const renderTextTooltipOnTextWithDelay = () => tooltipPositions.map((position) => (React.createElement("div", { key: `${position}_text` },
+        React.createElement("span", { "data-qtip-text": "Helpful information provided here", "data-qtip-placement": position, "data-qtip-delay": 1500 },
+            "Hover for Tooltip (on the ",
+            position,
+            ") - with delay (1500ms)"))));
+    const renderTextTooltipOnOverflowHiddenText = () => tooltipPositions.map((position) => (React.createElement("div", { key: `${position}_text`, className: "tw-overflow-hidden" },
+        React.createElement("span", { "data-qtip-text": "Helpful information provided here", "data-qtip-placement": position },
+            "Hover for Tooltip (on the ",
+            position,
+            ")",
+            React.createElement("br", null),
+            "(Overflow set to hidden)"))));
+    return (React.createElement(React.Fragment, null,
+        React.createElement(QTip, null),
+        React.createElement("div", { className: "tw-grid tw-grid-cols-4 tw-gap-4 tw-text-center" },
+            renderSvgWithTooltip(),
+            renderButtonsWithTooltip(),
+            renderIconsWithHtmlTooltip(),
+            renderTextTooltipOnText(),
+            renderTextTooltipOnTextWithDelay(),
+            renderTextTooltipOnOverflowHiddenText())));
+};
 //# sourceMappingURL=QTip.stories.js.map

package/dist/Tooltip/QTip.types.js

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

package/dist/Tooltip/QTipPerformance.stories.js

@@ -1,30 +1,30 @@
-import React from 'react';
-import { QTip } from './Qtip';
-import Icon from '../Icon';
-export default {
-    title: 'Tooltip',
-};
-const renderManyQTips = () => {
-    const colsCount = 100;
-    const rowCount = 100;
-    const rows = [];
-    const getCols = (rowId) => {
-        const cols = [];
-        for (let i = 0; i < colsCount; i++) {
-            cols.push(React.createElement("td", { key: 'col_' + i + '_row_' + rowId },
-                React.createElement(Icon, { icon: "fc-sun", tooltip: `hello there ${i}` })));
-        }
-        return cols;
-    };
-    for (let i = 0; i < rowCount; i++) {
-        rows.push(React.createElement("tr", { key: 'row_' + i }, ...getCols(i)));
-    }
-    return (React.createElement("table", null,
-        React.createElement("tbody", null, rows.map((row) => row))));
-};
-export const QtipPerformance = () => {
-    return (React.createElement(React.Fragment, null,
-        React.createElement(QTip, null),
-        React.createElement("div", { className: "tw-grid tw-grid-cols-4 tw-gap-4 tw-text-center" }, renderManyQTips())));
-};
+import React from 'react';
+import { QTip } from './Qtip';
+import Icon from '../Icon';
+export default {
+    title: 'Tooltip',
+};
+const renderManyQTips = () => {
+    const colsCount = 100;
+    const rowCount = 100;
+    const rows = [];
+    const getCols = (rowId) => {
+        const cols = [];
+        for (let i = 0; i < colsCount; i++) {
+            cols.push(React.createElement("td", { key: 'col_' + i + '_row_' + rowId },
+                React.createElement(Icon, { icon: "fc-sun", tooltip: `hello there ${i}` })));
+        }
+        return cols;
+    };
+    for (let i = 0; i < rowCount; i++) {
+        rows.push(React.createElement("tr", { key: 'row_' + i }, ...getCols(i)));
+    }
+    return (React.createElement("table", null,
+        React.createElement("tbody", null, rows.map((row) => row))));
+};
+export const QtipPerformance = () => {
+    return (React.createElement(React.Fragment, null,
+        React.createElement(QTip, null),
+        React.createElement("div", { className: "tw-grid tw-grid-cols-4 tw-gap-4 tw-text-center" }, renderManyQTips())));
+};
 //# sourceMappingURL=QTipPerformance.stories.js.map