@seeqdev/qomponents 0.0.122 → 0.0.124

package/dist/ButtonWithDropdown/ButtonWithDropdown.stories.js

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

package/dist/ButtonWithDropdown/ButtonWithDropdown.stories.js.map

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

package/dist/ButtonWithDropdown/ButtonWithDropdown.test.js

@@ -0,0 +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 ButtonWithDropdown from './ButtonWithDropdown';
+import Icon from '../Icon';
+describe('ButtonWithDropdown', () => {
+    const mockOnClick = jest.fn();
+    const testId = 'trigger-icon';
+    const tooltip = 'This is a small dropdown.';
+    const itemTooltip = 'This is an item from the dropdown.';
+    class Context {
+        props = {
+            triggerIcon: (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,
+            tooltipDelay: 0,
+            tooltipPlacement: 'top',
+            isHtmlTooltip: false,
+            dropdownItems: [
+                { label: 'Orange', icon: 'fc-data-file', onClick: mockOnClick },
+                { label: 'Mango', icon: 'fc-user-community', onClick: mockOnClick },
+                { label: 'Guava', icon: 'fc-user-community', onClick: mockOnClick },
+                {
+                    label: 'Banana',
+                    icon: 'fc-user-community',
+                    onClick: mockOnClick,
+                    tooltip: itemTooltip,
+                    tooltipPlacement: 'top',
+                    tooltipDelay: 0,
+                    isHtmlTooltip: false,
+                },
+            ],
+        };
+    }
+    let tc;
+    beforeEach(() => {
+        tc = new Context();
+        jest.clearAllMocks();
+    });
+    const renderButtonWithDropdown = (props) => render(React.createElement(ButtonWithDropdown, { ...props }));
+    const openDropdown = async () => {
+        const popover = screen.getByTestId(testId);
+        await userEvent.click(popover);
+    };
+    test('renders trigger and opens dropdown content on trigger click', async () => {
+        renderButtonWithDropdown(tc.props);
+        expect(screen.getByTestId('trigger-icon')).toBeInTheDocument();
+        await openDropdown();
+        expect(screen.getByText('Orange')).toBeInTheDocument();
+    });
+    test('renders dividers correctly', async () => {
+        tc.props.dropdownItems[1].hasDivider = true;
+        renderButtonWithDropdown(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 () => {
+        renderButtonWithDropdown(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 () => {
+        renderButtonWithDropdown(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;
+        renderButtonWithDropdown(tc.props);
+        await openDropdown();
+        expect(screen.queryByText('Orange')).not.toBeInTheDocument();
+    });
+    test('renders button tooltip correctly', async () => {
+        renderButtonWithDropdown(tc.props);
+        const tooltipText = document.querySelector(`[data-qtip-text="${tooltip}"]`);
+        expect(tooltipText).toBeInTheDocument();
+    });
+    test('renders dropdown item tooltip correctly', async () => {
+        renderButtonWithDropdown(tc.props);
+        await openDropdown();
+        const tooltipText = document.querySelector(`[data-qtip-text="${itemTooltip}"]`);
+        expect(tooltipText).toBeInTheDocument();
+    });
+});
+//# sourceMappingURL=ButtonWithDropdown.test.js.map

package/dist/ButtonWithDropdown/ButtonWithDropdown.test.js.map

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

package/dist/ButtonWithDropdown/ButtonWithDropdown.types.d.ts

@@ -15,7 +15,7 @@ interface DropdownItems extends TooltipComponentProps {
     id?: string;
     /** icon class to be used with the dropdown items - if available (i.e. 'fc-zoom') */
     icon?: string;
-    /** icon type to be used with the dropdown items - if available (i.e. 'fc') */
+    /** icon type to be used with the dropdown items - if available (i.e. 'theme') */
     iconType?: string;
     /** icon color to be used with the dropdown items - if available */
     iconColor?: string;
@@ -24,7 +24,7 @@ interface DropdownItems extends TooltipComponentProps {
     /** icon extra class names */
     iconExtraClassNames?: string;
     /** label for the dropdown items */
-    label: string;
+    label: string | React.ReactNode;
     /** custom id for the dropdown label */
     labelCustomId?: string;
     /** is the dropdown subitem a label */
@@ -37,8 +37,8 @@ interface DropdownItems extends TooltipComponentProps {
     disabled?: boolean;
     /** custom id for the subitem */
     itemCustomId?: string;
-    /** dropdown container extra class names */
-    containerExtraClassNames?: string;
+    /** dropdown item extra class names */
+    itemExtraClassNames?: string;
     /** test id for the dropdown subitem */
     labelTestId?: string;
     /** test id for the dropdown subitem icon */
@@ -57,10 +57,12 @@ export interface ButtonWithDropdownProps extends TooltipComponentProps {
     triggerIcon: React.ReactNode;
     /** id of the dropdown trigger */
     id?: string;
-    /** extra class names to be placed on the dropdown container */
+    /** extra class names to be placed on the dropdown trigger */
     extraClassNames?: string;
     /** id that will be used in the data-testid attribute on the container element */
     containerTestId?: string;
+    /** extra class names to be placed on the dropdown container */
+    contentExtraClassNames?: string;
     /** is the button disabled */
     disabled?: boolean;
     /** alignment of the content of the popover */

package/dist/ButtonWithDropdown/ButtonWithDropdown.types.js

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

package/dist/ButtonWithDropdown/ButtonWithDropdown.types.js.map

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

package/dist/ButtonWithDropdown/index.js

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

package/dist/ButtonWithDropdown/index.js.map

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

package/dist/ButtonWithPopover/ButtonWithPopover.js

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import { getQTipData } from '../Tooltip/qTip.utilities';
+const bgStyles = ['tw-bg-sq-white', 'dark:tw-bg-sq-dark-background'].join(' ');
+const borderStyles = [
+    'tw-border-solid',
+    'tw-border',
+    'tw-rounded-sm',
+    'tw-border-sq-disabled-gray',
+    'dark:tw-border-gray-500',
+].join(' ');
+const disabledClasses = ['tw-opacity-50', 'tw-cursor-not-allowed'].join(' ');
+const ButtonWithPopover = ({ children, trigger, id, hasArrow, extraTriggerClassNames, extraPopoverClassNames, containerTestId, onInteractOutside, onPointerDownOutside, isTriggerAsChild = false, shouldTriggerFullWidth = false, disabled = false, align = 'end', alignOffset = -35, placement = 'bottom', placementOffset = 2, isHoverEnabled = false, hoverOpenDelay = 300, onOpenChange, isOpen, isCloseOnContentClick = false, isPortal = false, ...tooltipProps }) => {
+    const tooltipData = getQTipData(tooltipProps);
+    let timeout;
+    const [isHoveredOpen, setIsHoveredOpen] = React.useState(false);
+    const onHoverStart = () => {
+        if (isHoverEnabled) {
+            timeout = setTimeout(() => {
+                setIsHoveredOpen(true);
+                onOpenChange && onOpenChange(true);
+            }, hoverOpenDelay);
+        }
+    };
+    const onHoverEnd = () => {
+        if (isHoverEnabled) {
+            timeout = setTimeout(() => {
+                setIsHoveredOpen(false);
+                onOpenChange && onOpenChange(false);
+            }, 200);
+        }
+    };
+    React.useEffect(() => () => timeout && clearTimeout(timeout), []);
+    const renderContent = () => {
+        return (React.createElement(PopoverPrimitive.Content, { sideOffset: placementOffset, align: align, side: placement, onInteractOutside: onInteractOutside, onPointerDownOutside: onPointerDownOutside, alignOffset: isHoverEnabled ? -10 : alignOffset, asChild: true, onClick: () => isCloseOnContentClick && onOpenChange && onOpenChange(false), className: "focus-visible:tw-outline-none tw-outline-none tw-w-full tw-h-full" },
+            React.createElement("div", { "data-testid": containerTestId, className: `${bgStyles} ${borderStyles} tw-relative tw-z-[1200] tw-min-w-6 focus-visible:tw-outline-none tw-outline-none data-[state=open]:tw-animate-in data-[state=closed]:tw-animate-out
+         data-[side=top]:tw-animate-slideDownAndFade data-[side=right]:tw-animate-slideLeftAndFade data-[side=bottom]:tw-animate-slideUpAndFade data-[side=left]:tw-animate-slideRightAndFade tw-text-sq-text-color
+        ${extraPopoverClassNames || ''}` },
+                hasArrow && (React.createElement(PopoverPrimitive.Arrow, { asChild: true },
+                    React.createElement("div", { className: "tw-fill-transparent tw-bg-white tw-w-[15px] tw-h-[15px] tw-mt-[-7px] 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" }))),
+                children)));
+    };
+    const renderPopover = (popoverOpenState) => {
+        return (React.createElement(PopoverPrimitive.Root, { open: popoverOpenState, defaultOpen: false, onOpenChange: onOpenChange },
+            trigger ? (React.createElement(PopoverPrimitive.Trigger, { id: id, asChild: isTriggerAsChild, className: `focus-visible:tw-outline-none tw-outline-none ${shouldTriggerFullWidth ? 'tw-w-full tw-h-full' : ''}`, disabled: disabled },
+                React.createElement("div", { ...tooltipData, onMouseOver: onHoverStart, onMouseOut: onHoverEnd, className: `tw-bg-transparent focus-visible:tw-outline-none tw-outline-none ${disabled ? disabledClasses : ''} ${shouldTriggerFullWidth ? 'tw-flex tw-flex-col tw-items-center tw-justify-center' : 'tw-inline'} ${extraTriggerClassNames || ''}` }, trigger))) : (React.createElement(PopoverPrimitive.Trigger, { asChild: true },
+                React.createElement("div", null))),
+            isPortal ? React.createElement(PopoverPrimitive.Portal, null, renderContent()) : renderContent()));
+    };
+    return isHoverEnabled ? renderPopover(isHoveredOpen) : renderPopover(isOpen);
+};
+export default ButtonWithPopover;
+//# sourceMappingURL=ButtonWithPopover.js.map

package/dist/ButtonWithPopover/ButtonWithPopover.js.map

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

package/dist/ButtonWithPopover/ButtonWithPopover.stories.js

@@ -0,0 +1,75 @@
+import React from 'react';
+import ButtonWithPopover from './ButtonWithPopover';
+import Icon from '../Icon';
+import { QTip } from '../Tooltip/Qtip';
+export default {
+    title: 'Button with Popover',
+};
+export const AllButtonWithPopoverVariants = () => {
+    const options = ['Chocolate', 'Strawberry', 'Vanilla', 'Rocky Road', 'Crazy Cow', 'Almond Joy'];
+    const renderFlavours = () => (React.createElement("div", { className: "tw-text-sm dark:tw-text-white tw-w-72 tw-p-4" },
+        React.createElement("p", { className: "tw-font-bold" }, "Flavors"),
+        React.createElement("div", { className: "tw-w-full tw-flex tw-flex-wrap tw-gap-1" }, options.map((option) => (React.createElement("div", { key: option, className: "tw-flex tw-items-center tw-px-2 tw-py-1 tw-mt-2 tw tw-rounded-full tw-border-sq-color-dark-dark tw-border" },
+            React.createElement(Icon, { type: "color", color: "rgb(var(--sq-color-dark-dark))", icon: "fc-check", extraClassNames: "tw-mr-2" }),
+            React.createElement("span", null, option)))))));
+    const renderInputFields = () => {
+        const [name, setName] = React.useState('');
+        const [email, setEmail] = React.useState('');
+        return (React.createElement("div", { className: "tw-w-72 tw-p-4" },
+            React.createElement("div", { className: "tw-flex tw-flex-col tw-gap-2" },
+                React.createElement("input", { type: "text", value: name, onChange: (e) => setName(e.target.value), placeholder: "Enter your name", className: "tw-p-2 tw-rounded tw-border tw-border-sq-color-dark-dark dark:tw-border-sq-dark-background tw-bg-transparent" }),
+                React.createElement("input", { type: "text", value: email, onChange: (e) => setEmail(e.target.value), placeholder: "Enter your email", className: "tw-p-2 tw-rounded tw-border tw-border-sq-color-dark-dark dark:tw-border-sq-dark-background tw-bg-transparent" }),
+                React.createElement("button", { className: "tw-p-2 tw-rounded tw-border tw-border-sq-color-dark-dark dark:tw-border-sq-dark-background tw-bg-transparent tw-text-sq-color" }, "Submit"))));
+    };
+    const [openPopver, setOpenPopover] = React.useState('');
+    const iconRef = React.useRef(null);
+    const allButtonWithPopovers = (isDark = false, topic) => (React.createElement("div", { className: isDark ? 'tw-dark tw-bg-sq-dark-background ' : '' },
+        React.createElement("div", { className: "tw-p-5 " },
+            React.createElement(ButtonWithPopover, { trigger: React.createElement(Icon, { type: "color", color: "rgb(var(--sq-color-dark-dark))", icon: "fc-more" }), containerTestId: `basic-popover-${isDark ? 'dark' : 'light'}-${topic}-1`, tooltip: "This is a small popover.", tooltipDelay: 0, tooltipPlacement: "top", isHtmlTooltip: false }, renderFlavours())),
+        React.createElement("div", { className: "tw-p-5 " },
+            React.createElement(ButtonWithPopover, { trigger: React.createElement(Icon, { type: "color", color: "rgb(var(--sq-color-dark-dark))", icon: "fc-more" }), containerTestId: `basic-popover-${isDark ? 'dark' : 'light'}-${topic}-2`, isOpen: openPopver === `basic-popover-${isDark ? 'dark' : 'light'}-${topic}-2`, onOpenChange: (isOpen) => setOpenPopover(isOpen ? `basic-popover-${isDark ? 'dark' : 'light'}-${topic}-2` : ''), tooltip: "This is a normal popover.", tooltipDelay: 0, tooltipPlacement: "top", isHtmlTooltip: false }, renderFlavours())),
+        React.createElement("div", { className: "tw-p-5 " },
+            React.createElement("p", { className: "dark:tw-text-sq-white tw-text-sm tw-mb-4" }, "Close popover on content click"),
+            React.createElement(ButtonWithPopover, { trigger: React.createElement(Icon, { type: "color", color: "rgb(var(--sq-color-dark-dark))", icon: "fc-more" }), containerTestId: `basic-popover-${isDark ? 'dark' : 'light'}-${topic}-3`, isOpen: openPopver === `basic-popover-${isDark ? 'dark' : 'light'}-${topic}-3`, onOpenChange: (isOpen) => setOpenPopover(isOpen ? `basic-popover-${isDark ? 'dark' : 'light'}-${topic}-3` : ''), tooltip: "This is a normal popover.", tooltipDelay: 0, tooltipPlacement: "top", isCloseOnContentClick: true, isHtmlTooltip: false }, renderFlavours())),
+        React.createElement("div", { className: "tw-p-5 " },
+            React.createElement(ButtonWithPopover, { trigger: React.createElement(Icon, { type: "color", color: "rgb(var(--sq-color-dark-dark))", icon: "fc-more" }), containerTestId: `basic-popover-${isDark ? 'dark' : 'light'}-${topic}-4`, isOpen: openPopver === `basic-popover-${isDark ? 'dark' : 'light'}-${topic}-4`, onOpenChange: (isOpen) => setOpenPopover(isOpen ? `basic-popover-${isDark ? 'dark' : 'light'}-${topic}-4` : ''), tooltip: "This is a disabled popover.", tooltipDelay: 0, tooltipPlacement: "top", isHtmlTooltip: false, disabled: true }, renderFlavours())),
+        React.createElement("div", { className: "tw-p-5 " },
+            React.createElement("div", { className: "dark:tw-text-white tw-text-xs" }, "Popover with arrow"),
+            React.createElement(ButtonWithPopover, { trigger: React.createElement(Icon, { type: "color", color: "rgb(var(--sq-color-dark-dark))", icon: "fc-more" }), containerTestId: `basic-popover-${isDark ? 'dark' : 'light'}-${topic}-5`, isOpen: openPopver === `basic-popover-${isDark ? 'dark' : 'light'}-${topic}-5`, onOpenChange: (isOpen) => setOpenPopover(isOpen ? `basic-popover-${isDark ? 'dark' : 'light'}-${topic}-5` : ''), tooltip: "This is a normal popover with arrow.", tooltipDelay: 0, tooltipPlacement: "top", hasArrow: true, isHtmlTooltip: false }, renderFlavours())),
+        React.createElement("div", { className: "tw-p-5 " },
+            React.createElement("div", { className: "dark:tw-text-white tw-text-xs" }, "Popover aligned at center"),
+            React.createElement(ButtonWithPopover, { trigger: React.createElement(Icon, { type: "color", color: "rgb(var(--sq-color-dark-dark))", icon: "fc-more" }), containerTestId: `basic-popover-${isDark ? 'dark' : 'light'}-${topic}-6`, isOpen: openPopver === `basic-popover-${isDark ? 'dark' : 'light'}-${topic}-6`, onOpenChange: (isOpen) => setOpenPopover(isOpen ? `basic-popover-${isDark ? 'dark' : 'light'}-${topic}-6` : ''), tooltip: "This is a normal popover with arrow.", tooltipDelay: 0, tooltipPlacement: "top", align: "center", hasArrow: true, isHtmlTooltip: false }, renderFlavours())),
+        React.createElement("div", { className: "tw-p-5 " },
+            React.createElement("div", { className: "dark:tw-text-white tw-text-xs" }, "Popover aligned at start"),
+            React.createElement(ButtonWithPopover, { trigger: React.createElement(Icon, { type: "color", color: "rgb(var(--sq-color-dark-dark))", icon: "fc-more" }), containerTestId: `basic-popover-${isDark ? 'dark' : 'light'}-${topic}-7`, isOpen: openPopver === `basic-popover-${isDark ? 'dark' : 'light'}-${topic}-7`, onOpenChange: (isOpen) => setOpenPopover(isOpen ? `basic-popover-${isDark ? 'dark' : 'light'}-${topic}-7` : ''), tooltip: "This is a normal popover with arrow.", tooltipDelay: 0, align: "start", tooltipPlacement: "top", hasArrow: true, isHtmlTooltip: false }, renderFlavours())),
+        React.createElement("div", { className: "tw-p-5 " },
+            React.createElement("div", { className: "dark:tw-text-white tw-text-xs" }, "Popover triggered by hover"),
+            React.createElement(ButtonWithPopover, { trigger: React.createElement(Icon, { type: "color", color: "rgb(var(--sq-color-dark-dark))", icon: "fc-more" }), containerTestId: `basic-popover-${isDark ? 'dark' : 'light'}-${topic}-8`, isOpen: openPopver === `basic-popover-${isDark ? 'dark' : 'light'}-${topic}-8`, onOpenChange: (isOpen) => setOpenPopover(isOpen ? `basic-popover-${isDark ? 'dark' : 'light'}-${topic}-8` : ''), isHoverEnabled: true, align: "start", tooltipPlacement: "top", hasArrow: true, isHtmlTooltip: false }, renderFlavours())),
+        React.createElement("div", { className: "tw-p-5 " },
+            React.createElement(ButtonWithPopover, { trigger: React.createElement("div", { className: "dark:tw-text-white tw-text-xs" }, "Popover triggered by another element"), containerTestId: `basic-popover-${isDark ? 'dark' : 'light'}-${topic}-9`, isOpen: openPopver === `basic-popover-${isDark ? 'dark' : 'light'}-${topic}-9`, onInteractOutside: () => setOpenPopover(''), align: "start", tooltipPlacement: "top", hasArrow: true, isHtmlTooltip: false }, renderFlavours()),
+            openPopver != `basic-popover-${isDark ? 'dark' : 'light'}-${topic}-9` && (React.createElement("div", { ref: iconRef, onClick: () => {
+                    setOpenPopover(`basic-popover-${isDark ? 'dark' : 'light'}-${topic}-9`);
+                } },
+                React.createElement(Icon, { type: "text", icon: "fc-all-items" })))),
+        React.createElement("div", { className: "tw-p-5 " },
+            React.createElement("div", { className: "dark:tw-text-white tw-text-xs" }, "Popover with input fields"),
+            React.createElement(ButtonWithPopover, { trigger: React.createElement(Icon, { type: "color", color: "rgb(var(--sq-color-dark-dark))", icon: "fc-more" }), containerTestId: `basic-popover-${isDark ? 'dark' : 'light'}-${topic}-10`, isOpen: openPopver === `basic-popover-${isDark ? 'dark' : 'light'}-${topic}-10`, onOpenChange: (isOpen) => setOpenPopover(isOpen ? `basic-popover-${isDark ? 'dark' : 'light'}-${topic}-10` : ''), tooltip: "This is a normal popover with arrow.", tooltipDelay: 0, tooltipPlacement: "top", align: "center", hasArrow: true, isHtmlTooltip: false }, renderInputFields()))));
+    const renderAllVariations = (color) => (React.createElement("div", { className: "tw-grid tw-grid-cols-2 tw-gap-4 tw-p-4" },
+        allButtonWithPopovers(false, color),
+        allButtonWithPopovers(true, color)));
+    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=ButtonWithPopover.stories.js.map

package/dist/ButtonWithPopover/ButtonWithPopover.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonWithPopover.stories.js","sourceRoot":"","sources":["../../src/ButtonWithPopover/ButtonWithPopover.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,iBAAiB,MAAM,qBAAqB,CAAC;AACpD,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAEvC,eAAe;IACb,KAAK,EAAE,qBAAqB;CAC7B,CAAC;AAEF,MAAM,CAAC,MAAM,4BAA4B,GAAG,GAAG,EAAE;IAC/C,MAAM,OAAO,GAAG,CAAC,WAAW,EAAE,YAAY,EAAE,SAAS,EAAE,YAAY,EAAE,WAAW,EAAE,YAAY,CAAC,CAAC;IAEhG,MAAM,cAAc,GAAG,GAAG,EAAE,CAAC,CAC3B,6BAAK,SAAS,EAAC,8CAA8C;QAC3D,2BAAG,SAAS,EAAC,cAAc,cAAY;QACvC,6BAAK,SAAS,EAAC,yCAAyC,IACrD,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CACvB,6BACE,GAAG,EAAE,MAAM,EACX,SAAS,EAAC,2GAA2G;YACrH,oBAAC,IAAI,IAAC,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,gCAAgC,EAAC,IAAI,EAAC,UAAU,EAAC,eAAe,EAAC,SAAS,GAAG;YACtG,kCAAO,MAAM,CAAQ,CACjB,CACP,CAAC,CACE,CACF,CACP,CAAC;IAEF,MAAM,iBAAiB,GAAG,GAAG,EAAE;QAC7B,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;QAC3C,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;QAC7C,OAAO,CACL,6BAAK,SAAS,EAAC,gBAAgB;YAC7B,6BAAK,SAAS,EAAC,8BAA8B;gBAC3C,+BACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,IAAI,EACX,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EACxC,WAAW,EAAC,iBAAiB,EAC7B,SAAS,EAAC,8GAA8G,GACxH;gBACF,+BACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EACzC,WAAW,EAAC,kBAAkB,EAC9B,SAAS,EAAC,8GAA8G,GACxH;gBACF,gCAAQ,SAAS,EAAC,+HAA+H,aAExI,CACL,CACF,CACP,CAAC;IACJ,CAAC,CAAC;IAEF,MAAM,CAAC,UAAU,EAAE,cAAc,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;IACxD,MAAM,OAAO,GAAG,KAAK,CAAC,MAAM,CAAwB,IAAI,CAAC,CAAC;IAE1D,MAAM,qBAAqB,GAAG,CAAC,MAAM,GAAG,KAAK,EAAE,KAAa,EAAE,EAAE,CAAC,CAC/D,6BAAK,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC,mCAAmC,CAAC,CAAC,CAAC,EAAE;QAC/D,6BAAK,SAAS,EAAC,SAAS;YACtB,oBAAC,iBAAiB,IAChB,OAAO,EAAE,oBAAC,IAAI,IAAC,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,gCAAgC,EAAC,IAAI,EAAC,SAAS,GAAG,EACpF,eAAe,EAAE,iBAAiB,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,IAAI,KAAK,IAAI,EACxE,OAAO,EAAC,0BAA0B,EAClC,YAAY,EAAE,CAAC,EACf,gBAAgB,EAAC,KAAK,EACtB,aAAa,EAAE,KAAK,IACnB,cAAc,EAAE,CACC,CAChB;QACN,6BAAK,SAAS,EAAC,SAAS;YACtB,oBAAC,iBAAiB,IAChB,OAAO,EAAE,oBAAC,IAAI,IAAC,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,gCAAgC,EAAC,IAAI,EAAC,SAAS,GAAG,EACpF,eAAe,EAAE,iBAAiB,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,IAAI,KAAK,IAAI,EACxE,MAAM,EAAE,UAAU,KAAK,iBAAiB,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,IAAI,KAAK,IAAI,EAC9E,YAAY,EAAE,CAAC,MAAM,EAAE,EAAE,CACvB,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC,iBAAiB,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAEvF,OAAO,EAAC,2BAA2B,EACnC,YAAY,EAAE,CAAC,EACf,gBAAgB,EAAC,KAAK,EACtB,aAAa,EAAE,KAAK,IACnB,cAAc,EAAE,CACC,CAChB;QACN,6BAAK,SAAS,EAAC,SAAS;YACtB,2BAAG,SAAS,EAAC,0CAA0C,qCAAmC;YAC1F,oBAAC,iBAAiB,IAChB,OAAO,EAAE,oBAAC,IAAI,IAAC,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,gCAAgC,EAAC,IAAI,EAAC,SAAS,GAAG,EACpF,eAAe,EAAE,iBAAiB,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,IAAI,KAAK,IAAI,EACxE,MAAM,EAAE,UAAU,KAAK,iBAAiB,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,IAAI,KAAK,IAAI,EAC9E,YAAY,EAAE,CAAC,MAAM,EAAE,EAAE,CACvB,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC,iBAAiB,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAEvF,OAAO,EAAC,2BAA2B,EACnC,YAAY,EAAE,CAAC,EACf,gBAAgB,EAAC,KAAK,EACtB,qBAAqB,QACrB,aAAa,EAAE,KAAK,IACnB,cAAc,EAAE,CACC,CAChB;QACN,6BAAK,SAAS,EAAC,SAAS;YACtB,oBAAC,iBAAiB,IAChB,OAAO,EAAE,oBAAC,IAAI,IAAC,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,gCAAgC,EAAC,IAAI,EAAC,SAAS,GAAG,EACpF,eAAe,EAAE,iBAAiB,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,IAAI,KAAK,IAAI,EACxE,MAAM,EAAE,UAAU,KAAK,iBAAiB,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,IAAI,KAAK,IAAI,EAC9E,YAAY,EAAE,CAAC,MAAM,EAAE,EAAE,CACvB,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC,iBAAiB,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAEvF,OAAO,EAAC,6BAA6B,EACrC,YAAY,EAAE,CAAC,EACf,gBAAgB,EAAC,KAAK,EACtB,aAAa,EAAE,KAAK,EACpB,QAAQ,UACP,cAAc,EAAE,CACC,CAChB;QACN,6BAAK,SAAS,EAAC,SAAS;YACtB,6BAAK,SAAS,EAAC,+BAA+B,yBAAyB;YACvE,oBAAC,iBAAiB,IAChB,OAAO,EAAE,oBAAC,IAAI,IAAC,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,gCAAgC,EAAC,IAAI,EAAC,SAAS,GAAG,EACpF,eAAe,EAAE,iBAAiB,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,IAAI,KAAK,IAAI,EACxE,MAAM,EAAE,UAAU,KAAK,iBAAiB,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,IAAI,KAAK,IAAI,EAC9E,YAAY,EAAE,CAAC,MAAM,EAAE,EAAE,CACvB,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC,iBAAiB,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAEvF,OAAO,EAAC,sCAAsC,EAC9C,YAAY,EAAE,CAAC,EACf,gBAAgB,EAAC,KAAK,EACtB,QAAQ,QACR,aAAa,EAAE,KAAK,IACnB,cAAc,EAAE,CACC,CAChB;QACN,6BAAK,SAAS,EAAC,SAAS;YACtB,6BAAK,SAAS,EAAC,+BAA+B,gCAAgC;YAC9E,oBAAC,iBAAiB,IAChB,OAAO,EAAE,oBAAC,IAAI,IAAC,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,gCAAgC,EAAC,IAAI,EAAC,SAAS,GAAG,EACpF,eAAe,EAAE,iBAAiB,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,IAAI,KAAK,IAAI,EACxE,MAAM,EAAE,UAAU,KAAK,iBAAiB,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,IAAI,KAAK,IAAI,EAC9E,YAAY,EAAE,CAAC,MAAM,EAAE,EAAE,CACvB,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC,iBAAiB,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAEvF,OAAO,EAAC,sCAAsC,EAC9C,YAAY,EAAE,CAAC,EACf,gBAAgB,EAAC,KAAK,EACtB,KAAK,EAAC,QAAQ,EACd,QAAQ,QACR,aAAa,EAAE,KAAK,IACnB,cAAc,EAAE,CACC,CAChB;QACN,6BAAK,SAAS,EAAC,SAAS;YACtB,6BAAK,SAAS,EAAC,+BAA+B,+BAA+B;YAC7E,oBAAC,iBAAiB,IAChB,OAAO,EAAE,oBAAC,IAAI,IAAC,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,gCAAgC,EAAC,IAAI,EAAC,SAAS,GAAG,EACpF,eAAe,EAAE,iBAAiB,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,IAAI,KAAK,IAAI,EACxE,MAAM,EAAE,UAAU,KAAK,iBAAiB,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,IAAI,KAAK,IAAI,EAC9E,YAAY,EAAE,CAAC,MAAM,EAAE,EAAE,CACvB,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC,iBAAiB,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAEvF,OAAO,EAAC,sCAAsC,EAC9C,YAAY,EAAE,CAAC,EACf,KAAK,EAAC,OAAO,EACb,gBAAgB,EAAC,KAAK,EACtB,QAAQ,QACR,aAAa,EAAE,KAAK,IACnB,cAAc,EAAE,CACC,CAChB;QACN,6BAAK,SAAS,EAAC,SAAS;YACtB,6BAAK,SAAS,EAAC,+BAA+B,iCAAiC;YAC/E,oBAAC,iBAAiB,IAChB,OAAO,EAAE,oBAAC,IAAI,IAAC,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,gCAAgC,EAAC,IAAI,EAAC,SAAS,GAAG,EACpF,eAAe,EAAE,iBAAiB,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,IAAI,KAAK,IAAI,EACxE,MAAM,EAAE,UAAU,KAAK,iBAAiB,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,IAAI,KAAK,IAAI,EAC9E,YAAY,EAAE,CAAC,MAAM,EAAE,EAAE,CACvB,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC,iBAAiB,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAEvF,cAAc,QACd,KAAK,EAAC,OAAO,EACb,gBAAgB,EAAC,KAAK,EACtB,QAAQ,QACR,aAAa,EAAE,KAAK,IACnB,cAAc,EAAE,CACC,CAChB;QACN,6BAAK,SAAS,EAAC,SAAS;YACtB,oBAAC,iBAAiB,IAChB,OAAO,EAAE,6BAAK,SAAS,EAAC,+BAA+B,2CAA2C,EAClG,eAAe,EAAE,iBAAiB,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,IAAI,KAAK,IAAI,EACxE,MAAM,EAAE,UAAU,KAAK,iBAAiB,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,IAAI,KAAK,IAAI,EAC9E,iBAAiB,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,EAAE,CAAC,EAC3C,KAAK,EAAC,OAAO,EACb,gBAAgB,EAAC,KAAK,EACtB,QAAQ,QACR,aAAa,EAAE,KAAK,IACnB,cAAc,EAAE,CACC;YACnB,UAAU,IAAI,iBAAiB,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,IAAI,KAAK,IAAI,IAAI,CACxE,6BACE,GAAG,EAAE,OAAO,EACZ,OAAO,EAAE,GAAG,EAAE;oBACZ,cAAc,CAAC,iBAAiB,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,IAAI,KAAK,IAAI,CAAC,CAAC;gBAC1E,CAAC;gBACD,oBAAC,IAAI,IAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,cAAc,GAAG,CACpC,CACP,CACG;QACN,6BAAK,SAAS,EAAC,SAAS;YACtB,6BAAK,SAAS,EAAC,+BAA+B,gCAAgC;YAC9E,oBAAC,iBAAiB,IAChB,OAAO,EAAE,oBAAC,IAAI,IAAC,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,gCAAgC,EAAC,IAAI,EAAC,SAAS,GAAG,EACpF,eAAe,EAAE,iBAAiB,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,IAAI,KAAK,KAAK,EACzE,MAAM,EAAE,UAAU,KAAK,iBAAiB,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,IAAI,KAAK,KAAK,EAC/E,YAAY,EAAE,CAAC,MAAM,EAAE,EAAE,CACvB,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC,iBAAiB,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,IAAI,KAAK,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,EAExF,OAAO,EAAC,sCAAsC,EAC9C,YAAY,EAAE,CAAC,EACf,gBAAgB,EAAC,KAAK,EACtB,KAAK,EAAC,QAAQ,EACd,QAAQ,QACR,aAAa,EAAE,KAAK,IACnB,iBAAiB,EAAE,CACF,CAChB,CACF,CACP,CAAC;IACF,MAAM,mBAAmB,GAAG,CAAC,KAAa,EAAE,EAAE,CAAC,CAC7C,6BAAK,SAAS,EAAC,wCAAwC;QACpD,qBAAqB,CAAC,KAAK,EAAE,KAAK,CAAC;QACnC,qBAAqB,CAAC,IAAI,EAAE,KAAK,CAAC,CAC/B,CACP,CAAC;IACF,OAAO,CACL,6BAAK,SAAS,EAAC,iCAAiC;QAC9C,oBAAC,IAAI,OAAG;QACR,6BAAK,SAAS,EAAC,aAAa;YAC1B,8CAAmB;YAClB,mBAAmB,CAAC,OAAO,CAAC,CACzB;QAEN,6BAAK,SAAS,EAAC,gBAAgB;YAC7B,iDAAsB;YACrB,mBAAmB,CAAC,UAAU,CAAC,CAC5B;QAEN,6BAAK,SAAS,EAAC,eAAe;YAC5B,gDAAqB;YACpB,mBAAmB,CAAC,SAAS,CAAC,CAC3B;QAEN,6BAAK,SAAS,EAAC,eAAe;YAC5B,gDAAqB;YACpB,mBAAmB,CAAC,SAAS,CAAC,CAC3B,CACF,CACP,CAAC;AACJ,CAAC,CAAC"}

package/dist/ButtonWithPopover/ButtonWithPopover.test.js

@@ -0,0 +1,82 @@
+import React from 'react';
+import '@testing-library/jest-dom';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import ButtonWithPopover from './ButtonWithPopover';
+import Icon from '../Icon';
+describe('ButtonWithPopover', () => {
+    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]" })),
+            onOpenChange: mockOnClick,
+            containerTestId: 'basic-Popover1',
+            tooltip: 'This is a small Popover.',
+            tooltipDelay: 0,
+            tooltipPlacement: 'top',
+            isHtmlTooltip: false,
+            hoverOpenDelay: 0,
+            children: React.createElement("div", null, "Popover content"),
+        };
+    }
+    let tc;
+    beforeEach(() => {
+        tc = new Context();
+        jest.clearAllMocks();
+    });
+    afterEach(() => {
+        global.ResizeObserver = undefined;
+    });
+    const renderButtonWithPopover = (props) => render(React.createElement("div", { "data-testid": "container", className: "tw-w-10 tw-h-10" },
+        React.createElement(ButtonWithPopover, { ...props })));
+    const openPopover = async () => {
+        const popover = screen.getByTestId(testId);
+        await userEvent.click(popover);
+    };
+    const closePopover = async () => {
+        const container = screen.getByTestId('container');
+        await userEvent.click(container);
+    };
+    test('renders trigger and opens Popover content on trigger click', async () => {
+        renderButtonWithPopover(tc.props);
+        expect(screen.getByTestId('trigger-icon')).toBeInTheDocument();
+        await openPopover();
+        expect(screen.getByText('Popover content')).toBeInTheDocument();
+        await closePopover();
+        expect(screen.queryByText('Popover content')).not.toBeInTheDocument();
+    });
+    test('renders trigger and opens Popover content on trigger hover', async () => {
+        tc.props.isHoverEnabled = true;
+        renderButtonWithPopover(tc.props);
+        expect(screen.getByTestId('trigger-icon')).toBeInTheDocument();
+        const popover = screen.getByTestId(testId);
+        await userEvent.hover(popover);
+        await waitFor(() => {
+            expect(screen.getByText('Popover content')).toBeInTheDocument();
+        });
+    });
+    test('closes popover when content is clicked and is set in props', async () => {
+        tc.props.isCloseOnContentClick = true;
+        renderButtonWithPopover(tc.props);
+        await openPopover();
+        const item1 = screen.getByText('Popover content');
+        await userEvent.click(item1);
+        expect(mockOnClick).toHaveBeenCalledTimes(2);
+    });
+    test('leaves popover open when content is clicked and is set in props', async () => {
+        tc.props.isCloseOnContentClick = false;
+        renderButtonWithPopover(tc.props);
+        await openPopover();
+        const item1 = screen.getByText('Popover content');
+        await userEvent.click(item1);
+        expect(mockOnClick).toHaveBeenCalledTimes(1);
+    });
+    test('does not open when disabled', async () => {
+        tc.props.disabled = true;
+        renderButtonWithPopover(tc.props);
+        await openPopover();
+        expect(screen.queryByText('Popover content')).not.toBeInTheDocument();
+    });
+});
+//# sourceMappingURL=ButtonWithPopover.test.js.map

package/dist/ButtonWithPopover/ButtonWithPopover.test.js.map

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

package/dist/ButtonWithPopover/ButtonWithPopover.types.js

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

package/dist/ButtonWithPopover/ButtonWithPopover.types.js.map

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

package/dist/ButtonWithPopover/index.js

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