@seeqdev/qomponents 0.0.132 → 0.0.134

package/dist/ButtonWithDropdown/ButtonWithDropdown.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 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();
-    });
-});
+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.types.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { TooltipComponentProps } from '../Tooltip/Tooltip.types';
 interface DropdownSubItem {
     /** icon class to be used with the dropdown subitems - if available (i.e. 'fc-zoom')  */

package/dist/ButtonWithDropdown/ButtonWithDropdown.types.js

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

package/dist/ButtonWithDropdown/index.js

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

package/dist/ButtonWithPopover/ButtonWithPopover.js

@@ -1,62 +1,62 @@
-import * as React from 'react';
-import { useRef } 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);
-    const timeout = useRef(null);
-    const [isHoveredOpen, setIsHoveredOpen] = React.useState(false);
-    const clearHoverTimeout = () => {
-        if (timeout.current) {
-            clearTimeout(timeout.current);
-            timeout.current = null;
-        }
-    };
-    const onHoverStart = () => {
-        if (isHoverEnabled) {
-            clearHoverTimeout();
-            timeout.current = setTimeout(() => {
-                setIsHoveredOpen(true);
-                onOpenChange && onOpenChange(true);
-            }, hoverOpenDelay);
-        }
-    };
-    const onHoverEnd = () => {
-        if (isHoverEnabled) {
-            clearHoverTimeout();
-            timeout.current = setTimeout(() => {
-                setIsHoveredOpen(false);
-                onOpenChange && onOpenChange(false);
-            }, 200);
-        }
-    };
-    React.useEffect(() => clearHoverTimeout, []);
-    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;
+import * as React from 'react';
+import { useRef } 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);
+    const timeout = useRef(null);
+    const [isHoveredOpen, setIsHoveredOpen] = React.useState(false);
+    const clearHoverTimeout = () => {
+        if (timeout.current) {
+            clearTimeout(timeout.current);
+            timeout.current = null;
+        }
+    };
+    const onHoverStart = () => {
+        if (isHoverEnabled) {
+            clearHoverTimeout();
+            timeout.current = setTimeout(() => {
+                setIsHoveredOpen(true);
+                onOpenChange && onOpenChange(true);
+            }, hoverOpenDelay);
+        }
+    };
+    const onHoverEnd = () => {
+        if (isHoverEnabled) {
+            clearHoverTimeout();
+            timeout.current = setTimeout(() => {
+                setIsHoveredOpen(false);
+                onOpenChange && onOpenChange(false);
+            }, 200);
+        }
+    };
+    React.useEffect(() => clearHoverTimeout, []);
+    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.stories.js

@@ -1,75 +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'))));
-};
+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