@seeqdev/qomponents 0.0.172 → 0.0.173

package/dist/ButtonWithDropdown/ButtonWithDropdown.stories.js

@@ -0,0 +1,104 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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) => (_jsxs("div", { className: isDark ? 'tw-dark tw-bg-sq-dark-background' : '', children: [_jsx("div", { className: "tw-p-5 ", children: _jsx(ButtonWithDropdown, { onOpenChange: (isOpen) => setOpenDropdown(isOpen ? `dropdown-1-${color}-${isDark ? 'dark' : 'light'}` : ''), isOpen: openDropdown === `dropdown-1-${color}-${isDark ? 'dark' : 'light'}`, triggerIcon: _jsx(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',
+                        },
+                    ] }) }), _jsx("div", { className: "tw-p-5 ", children: _jsx(ButtonWithDropdown, { triggerIcon: _jsx(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" }) }), _jsxs("div", { className: "tw-p-5 ", children: [_jsx("div", { className: "dark:tw-text-white tw-text-xs", children: "Dropdown with arrow" }), _jsx(ButtonWithDropdown, { triggerIcon: _jsx(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" })] }), _jsxs("div", { className: "tw-p-5 ", children: [_jsx("div", { className: "dark:tw-text-white tw-text-xs", children: "Dropdown aligned at center" }), _jsx(ButtonWithDropdown, { triggerIcon: _jsx(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" })] }), _jsxs("div", { className: "tw-p-5 ", children: [_jsx("div", { className: "dark:tw-text-white tw-text-xs", children: "Dropdown aligned at start" }), _jsx(ButtonWithDropdown, { triggerIcon: _jsx(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" })] }), _jsx("div", { className: "tw-p-5 ", children: _jsx(ButtonWithDropdown, { triggerIcon: _jsx(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 }) }), _jsx("div", { className: "tw-p-5 ", children: _jsx(ButtonWithDropdown, { onOpenChange: (isOpen) => setOpenDropdown(isOpen ? `dropdown-7-${color}-${isDark ? 'dark' : 'light'}` : ''), isOpen: openDropdown === `dropdown-7-${color}-${isDark ? 'dark' : 'light'}`, triggerIcon: _jsx(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 },
+                            ],
+                        },
+                    ] }) }), _jsx("div", { className: "tw-p-5 ", children: _jsx(ButtonWithDropdown, { onOpenChange: (isOpen) => setOpenDropdown(isOpen ? `dropdown-8-${color}-${isDark ? 'dark' : 'light'}` : ''), isOpen: openDropdown === `dropdown-8-${color}-${isDark ? 'dark' : 'light'}`, triggerIcon: _jsx(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: (_jsxs("div", { children: [_jsx("h5", { children: "Label heading" }), _jsx("p", { children: "Label description" }), _jsx("p", { children: "Dropdown is my work" }), _jsx("p", { children: "I do it happily" }), _jsx("p", { children: "Final remards" }), _jsx("p", { children: "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) => (_jsxs("div", { className: "tw-grid tw-grid-cols-2 tw-gap-4 tw-p-4", children: [allButtonWithDropdowns(color), allButtonWithDropdowns(color, true)] }));
+    return (_jsxs("div", { className: "tw-grid tw-grid-cols-4 tw-gap-4", children: [_jsx(QTip, {}), _jsxs("div", { className: "color_topic", children: [_jsx("b", { children: "Topic Colors" }), renderAllVariations('topic')] }), _jsxs("div", { className: "color_analysis", children: [_jsx("b", { children: "Analysis Colors" }), renderAllVariations('analysis')] }), _jsxs("div", { className: "color_datalab", children: [_jsx("b", { children: "Datalab Colors" }), renderAllVariations('datalab')] }), _jsxs("div", { className: "color_vantage", children: [_jsx("b", { children: "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.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/ButtonWithDropdown/ButtonWithDropdown.test.js

@@ -0,0 +1,93 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+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: (_jsx(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(_jsx(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

@@ -0,0 +1,233 @@
+/// <reference types="react" />
+import { TooltipComponentProps } from '../Tooltip/Tooltip.types';
+/**
+ * Interface for sub-menu items that appear in nested dropdown menus.
+ * Used to create hierarchical menu structures within dropdown items.
+ */
+interface DropdownSubItem {
+    /**
+     * Icon class name to display next to the sub-item label.
+     * Typically uses FontAwesome classes (e.g., 'fc-zoom', 'fc-delete').
+     * Optional visual enhancement for better user recognition.
+     */
+    iconClass?: string;
+    /**
+     * Text label for the dropdown sub-item.
+     * This is the clickable text that users will see and interact with.
+     */
+    label: string;
+    /**
+     * Callback function triggered when the sub-item is clicked.
+     * Use this to define the action that should occur when users select this sub-item.
+     */
+    onClick?: (e?: Event) => void;
+    /**
+     * When true, disables the sub-item preventing user interaction.
+     * Disabled items appear visually dimmed and don't respond to clicks.
+     */
+    disabled?: boolean;
+    /**
+     * Tooltip text to display when hovering over the sub-item.
+     * Provides additional context or information about the sub-item's action.
+     */
+    tooltip?: string;
+}
+/**
+ * Interface for main dropdown menu items that can contain sub-menus.
+ * Extends TooltipComponentProps for enhanced tooltip functionality.
+ */
+interface DropdownItems extends TooltipComponentProps {
+    /**
+     * HTML ID attribute for the dropdown item element.
+     * Should be unique for proper HTML semantics and accessibility.
+     */
+    id?: string;
+    /**
+     * Icon class name to display next to the item label.
+     * Typically uses Seeq or FontAwesome classes for consistent visual styling.
+     */
+    icon?: string;
+    /**
+     * Type/style of the icon that determines its rendering and colors.
+     * Common values include 'theme', 'text', 'color' based on the Icon component.
+     */
+    iconType?: string;
+    /**
+     * Custom color for the icon when using color-type icons.
+     * Can be any valid CSS color value (hex, rgb, color names).
+     */
+    iconColor?: string;
+    /**
+     * Custom HTML ID attribute specifically for the icon element.
+     * Useful for targeting the icon separately from the item container.
+     */
+    iconCustomId?: string;
+    /**
+     * Additional CSS classes to apply to the icon element.
+     * Use this to customize icon appearance beyond standard styling.
+     */
+    iconExtraClassNames?: string;
+    /**
+     * Content to display as the item label.
+     * Can be simple text or any React element for rich content like formatted text or badges.
+     */
+    label: string | React.ReactNode;
+    /**
+     * Custom HTML ID attribute specifically for the label element.
+     * Useful for accessibility or when you need to target the label separately.
+     */
+    labelCustomId?: string;
+    /**
+     * When true, treats this item as a non-interactive label/header.
+     * Label items typically appear different visually and don't trigger onClick events.
+     */
+    isLabel?: boolean;
+    /**
+     * Callback function triggered when the dropdown item is clicked.
+     * Required for interactive items. Use this to define the primary action for the item.
+     */
+    onClick: (e?: Event) => void;
+    /**
+     * Additional CSS classes to apply to the label element.
+     * Use this to customize label appearance, typography, or spacing.
+     */
+    labelClasses?: string;
+    /**
+     * When true, disables this dropdown item preventing user interaction.
+     * Disabled items appear visually dimmed and don't respond to clicks.
+     */
+    disabled?: boolean;
+    /**
+     * Custom HTML ID attribute for the entire dropdown item container.
+     * Useful for unique identification and accessibility purposes.
+     */
+    itemCustomId?: string;
+    /**
+     * Additional CSS classes to apply to the dropdown item container.
+     * Use this to customize item appearance, spacing, or hover effects.
+     */
+    itemExtraClassNames?: string;
+    /**
+     * Test ID attribute for the label element used in automated testing.
+     * Helps identify and interact with specific dropdown item labels in tests.
+     */
+    labelTestId?: string;
+    /**
+     * Test ID attribute for the icon element used in automated testing.
+     * Helps identify and interact with specific dropdown item icons in tests.
+     */
+    iconTestId?: string;
+    /**
+     * When true, displays a visual divider line below this dropdown item.
+     * Useful for grouping related items or separating different sections of the menu.
+     */
+    hasDivider?: boolean;
+    /**
+     * Test ID attribute for the dropdown item container used in automated testing.
+     * Helps identify and interact with specific dropdown items in test suites.
+     */
+    testId?: string;
+    /**
+     * Array of sub-menu items that appear when this item is hovered or clicked.
+     * Creates hierarchical dropdown menus for organizing related actions.
+     */
+    subMenuItems?: DropdownSubItem[];
+}
+/**
+ * Props for the ButtonWithDropdown component that creates a button with an attached dropdown menu.
+ * Extends TooltipComponentProps to support tooltip functionality on the trigger button.
+ */
+export interface ButtonWithDropdownProps extends TooltipComponentProps {
+    /**
+     * Array of items to display in the dropdown menu.
+     * Each item can be interactive (with onClick) or decorative (labels/dividers).
+     * Items can also contain sub-menus for hierarchical organization.
+     */
+    dropdownItems: DropdownItems[];
+    /**
+     * React element to use as the clickable trigger button.
+     * Typically an icon, text, or button element that users click to open the dropdown.
+     */
+    triggerIcon: React.ReactNode;
+    /**
+     * HTML ID attribute for the dropdown trigger element.
+     * Should be unique across the page for proper HTML semantics and accessibility.
+     */
+    id?: string;
+    /**
+     * Additional CSS classes to apply to the dropdown trigger button.
+     * Use this to customize the trigger's appearance beyond default styling.
+     */
+    extraClassNames?: string;
+    /**
+     * Test ID attribute for the dropdown container element used in automated testing.
+     * Applied to the main container that wraps both trigger and dropdown content.
+     */
+    containerTestId?: string;
+    /**
+     * Additional CSS classes to apply to the dropdown content container.
+     * Use this to customize the dropdown menu's appearance, spacing, or styling.
+     */
+    contentExtraClassNames?: string;
+    /**
+     * When true, disables the dropdown trigger preventing user interaction.
+     * Disabled triggers appear visually dimmed and don't open the dropdown when clicked.
+     */
+    disabled?: boolean;
+    /**
+     * Horizontal alignment of the dropdown content relative to the trigger:
+     * - `start`: Aligns to the left edge of the trigger
+     * - `center`: Centers the dropdown on the trigger
+     * - `end`: Aligns to the right edge of the trigger
+     */
+    align?: 'start' | 'center' | 'end';
+    /**
+     * Numeric offset in pixels from the aligned position.
+     * Positive values move the dropdown further from the trigger in the align direction.
+     */
+    alignOffset?: number;
+    /**
+     * Position of the dropdown relative to the trigger element:
+     * - `top`: Dropdown appears above the trigger
+     * - `bottom`: Dropdown appears below the trigger
+     * - `left`: Dropdown appears to the left of the trigger
+     * - `right`: Dropdown appears to the right of the trigger
+     */
+    placement?: 'top' | 'bottom' | 'left' | 'right';
+    /**
+     * Numeric offset in pixels from the placement position.
+     * Positive values move the dropdown further away from the trigger.
+     */
+    placementOffset?: number;
+    /**
+     * When true, displays a visual arrow pointing from the dropdown to the trigger.
+     * Helps users understand the relationship between trigger and dropdown content.
+     */
+    hasArrow?: boolean;
+    /**
+     * Controls whether the dropdown is currently open and visible.
+     * Use this for controlled dropdown behavior where you manage open state externally.
+     */
+    isOpen?: boolean;
+    /**
+     * Callback function triggered when the dropdown open state changes.
+     * Receives the new open state as a boolean parameter. Use this to sync with external state.
+     */
+    onOpenChange?: (isOpen: boolean) => void;
+    /**
+     * When true, automatically focuses the trigger button when the dropdown closes.
+     * Improves keyboard navigation and accessibility by returning focus to the trigger.
+     */
+    setFocusOnTriggerOnClose?: boolean;
+    /**
+     * When true, traps keyboard focus within the dropdown when it's open.
+     * Prevents users from tabbing outside the dropdown, improving accessibility.
+     */
+    keepFocusInsideDropdown?: boolean;
+    /**
+     * Callback function triggered when the dropdown container is clicked.
+     * Receives the click event. Use this for handling container-level interactions.
+     */
+    onContainerClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
+}
+export {};

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.d.ts

@@ -0,0 +1 @@
+export { default } from './ButtonWithDropdown';

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.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { ButtonWithPopoverProps } from './ButtonWithPopover.types';
+declare const ButtonWithPopover: React.FunctionComponent<ButtonWithPopoverProps>;
+export default ButtonWithPopover;

package/dist/ButtonWithPopover/ButtonWithPopover.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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-popover',
+    '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 (_jsx(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", children: _jsxs("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 || ''}`, children: [hasArrow && (_jsx(PopoverPrimitive.Arrow, { asChild: true, children: _jsx("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 (_jsxs(PopoverPrimitive.Root, { open: popoverOpenState, defaultOpen: false, onOpenChange: onOpenChange, children: [trigger ? (_jsx(PopoverPrimitive.Trigger, { id: id, asChild: isTriggerAsChild, className: `focus-visible:tw-outline-none tw-outline-none ${shouldTriggerFullWidth ? 'tw-w-full tw-h-full' : ''}`, disabled: disabled, children: _jsx("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 || ''}`, children: trigger }) })) : (_jsx(PopoverPrimitive.Trigger, { asChild: true, children: _jsx("div", {}) })), isPortal ? _jsx(PopoverPrimitive.Portal, { children: 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.d.ts

@@ -0,0 +1,5 @@
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const AllButtonWithPopoverVariants: () => import("react/jsx-runtime").JSX.Element;

package/dist/ButtonWithPopover/ButtonWithPopover.stories.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 = () => (_jsxs("div", { className: "tw-text-sm dark:tw-text-white tw-w-72 tw-p-4", children: [_jsx("p", { className: "tw-font-bold", children: "Flavors" }), _jsx("div", { className: "tw-w-full tw-flex tw-flex-wrap tw-gap-1", children: options.map((option) => (_jsxs("div", { 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", children: [_jsx(Icon, { type: "color", color: "rgb(var(--sq-color-dark-dark))", icon: "fc-check", extraClassNames: "tw-mr-2" }), _jsx("span", { children: option })] }, option))) })] }));
+    const renderInputFields = () => {
+        const [name, setName] = React.useState('');
+        const [email, setEmail] = React.useState('');
+        return (_jsx("div", { className: "tw-w-72 tw-p-4", children: _jsxs("div", { className: "tw-flex tw-flex-col tw-gap-2", children: [_jsx("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" }), _jsx("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" }), _jsx("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", children: "Submit" })] }) }));
+    };
+    const [openPopver, setOpenPopover] = React.useState('');
+    const iconRef = React.useRef(null);
+    const allButtonWithPopovers = (isDark = false, topic) => (_jsxs("div", { className: isDark ? 'tw-dark tw-bg-sq-dark-background ' : '', children: [_jsx("div", { className: "tw-p-5 ", children: _jsx(ButtonWithPopover, { trigger: _jsx(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, children: renderFlavours() }) }), _jsx("div", { className: "tw-p-5 ", children: _jsx(ButtonWithPopover, { trigger: _jsx(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, children: renderFlavours() }) }), _jsxs("div", { className: "tw-p-5 ", children: [_jsx("p", { className: "dark:tw-text-sq-white tw-text-sm tw-mb-4", children: "Close popover on content click" }), _jsx(ButtonWithPopover, { trigger: _jsx(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, children: renderFlavours() })] }), _jsx("div", { className: "tw-p-5 ", children: _jsx(ButtonWithPopover, { trigger: _jsx(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, children: renderFlavours() }) }), _jsxs("div", { className: "tw-p-5 ", children: [_jsx("div", { className: "dark:tw-text-white tw-text-xs", children: "Popover with arrow" }), _jsx(ButtonWithPopover, { trigger: _jsx(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, children: renderFlavours() })] }), _jsxs("div", { className: "tw-p-5 ", children: [_jsx("div", { className: "dark:tw-text-white tw-text-xs", children: "Popover aligned at center" }), _jsx(ButtonWithPopover, { trigger: _jsx(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, children: renderFlavours() })] }), _jsxs("div", { className: "tw-p-5 ", children: [_jsx("div", { className: "dark:tw-text-white tw-text-xs", children: "Popover aligned at start" }), _jsx(ButtonWithPopover, { trigger: _jsx(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, children: renderFlavours() })] }), _jsxs("div", { className: "tw-p-5 ", children: [_jsx("div", { className: "dark:tw-text-white tw-text-xs", children: "Popover triggered by hover" }), _jsx(ButtonWithPopover, { trigger: _jsx(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, children: renderFlavours() })] }), _jsxs("div", { className: "tw-p-5 ", children: [_jsx(ButtonWithPopover, { trigger: _jsx("div", { className: "dark:tw-text-white tw-text-xs", children: "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, children: renderFlavours() }), openPopver != `basic-popover-${isDark ? 'dark' : 'light'}-${topic}-9` && (_jsx("div", { ref: iconRef, onClick: () => {
+                            setOpenPopover(`basic-popover-${isDark ? 'dark' : 'light'}-${topic}-9`);
+                        }, children: _jsx(Icon, { type: "text", icon: "fc-all-items" }) }))] }), _jsxs("div", { className: "tw-p-5 ", children: [_jsx("div", { className: "dark:tw-text-white tw-text-xs", children: "Popover with input fields" }), _jsx(ButtonWithPopover, { trigger: _jsx(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, children: renderInputFields() })] })] }));
+    const renderAllVariations = (color) => (_jsxs("div", { className: "tw-grid tw-grid-cols-2 tw-gap-4 tw-p-4", children: [allButtonWithPopovers(false, color), allButtonWithPopovers(true, color)] }));
+    return (_jsxs("div", { className: "tw-grid tw-grid-cols-4 tw-gap-4", children: [_jsx(QTip, {}), _jsxs("div", { className: "color_topic", children: [_jsx("b", { children: "Topic Colors" }), renderAllVariations('topic')] }), _jsxs("div", { className: "color_analysis", children: [_jsx("b", { children: "Analysis Colors" }), renderAllVariations('analysis')] }), _jsxs("div", { className: "color_datalab", children: [_jsx("b", { children: "Datalab Colors" }), renderAllVariations('datalab')] }), _jsxs("div", { className: "color_vantage", children: [_jsx("b", { children: "Vantage Colors" }), renderAllVariations('vantage')] })] }));
+};
+//# sourceMappingURL=ButtonWithPopover.stories.js.map