@seeqdev/qomponents 0.0.184 → 0.0.185

package/dist/src/ButtonGroup/ButtonGroup.stories.js

@@ -0,0 +1,328 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { QTip } from '../Tooltip/Qtip';
+import { ButtonGroup } from './ButtonGroup';
+import ToolbarButton from '../ToolbarButton';
+export default {
+    title: 'ButtonGroup',
+};
+export const AllButtonGroups = () => {
+    const [value, setValue] = React.useState('provided-1');
+    const renderAllVariations = () => (_jsxs(_Fragment, { children: [
+            _jsxs("div", { className: "light", children: [
+                    _jsx("div", { className: "tw-p-4", children: _jsx(ButtonGroup, { onChange: () => { }, buttons: [
+                                {
+                                    variant: 'button',
+                                    buttonProps: {
+                                        variant: 'outline',
+                                        icon: 'fc-annotate',
+                                        iconStyle: 'theme',
+                                        value: 'provided-1',
+                                    },
+                                },
+                                {
+                                    variant: 'button',
+                                    buttonProps: {
+                                        variant: 'outline',
+                                        icon: 'fc-trash',
+                                        iconStyle: 'theme',
+                                        value: 'provided-2',
+                                    },
+                                },
+                                {
+                                    variant: 'button',
+                                    buttonProps: {
+                                        variant: 'outline',
+                                        icon: 'fc-formula-ai',
+                                        iconStyle: 'theme',
+                                        value: 'provided-3',
+                                    },
+                                },
+                            ] }) }), _jsx("div", { className: "tw-p-4", children: _jsx(ButtonGroup, { onChange: (newValue) => setValue(newValue), buttons: [
+                                {
+                                    variant: 'button',
+                                    buttonProps: {
+                                        variant: 'outline',
+                                        icon: 'fc-annotate',
+                                        extraClassNames: 'tw-border-none',
+                                        iconStyle: 'theme',
+                                        value: 'provided-1',
+                                    },
+                                },
+                                {
+                                    variant: 'button',
+                                    buttonProps: {
+                                        variant: 'outline',
+                                        icon: 'fc-trash',
+                                        extraClassNames: 'tw-border-none',
+                                        iconStyle: 'theme',
+                                        value: 'provided-2',
+                                    },
+                                },
+                                {
+                                    variant: 'button',
+                                    buttonProps: {
+                                        variant: 'outline',
+                                        extraClassNames: 'tw-border-none',
+                                        icon: 'fc-formula-ai',
+                                        iconStyle: 'theme',
+                                        value: 'provided-3',
+                                    },
+                                },
+                            ] }) }), _jsx("div", { className: "tw-p-4", children: _jsx(ButtonGroup, { onChange: (newValue) => setValue(newValue), buttons: [
+                                {
+                                    variant: 'button',
+                                    buttonProps: {
+                                        variant: 'theme',
+                                        icon: 'fc-annotate',
+                                        iconStyle: 'white',
+                                        value: 'provided-1',
+                                    },
+                                },
+                                {
+                                    variant: 'button',
+                                    buttonProps: {
+                                        variant: 'theme',
+                                        icon: 'fc-trash',
+                                        iconStyle: 'white',
+                                        value: 'provided-2',
+                                    },
+                                },
+                                {
+                                    variant: 'button',
+                                    buttonProps: {
+                                        variant: 'theme',
+                                        icon: 'fc-formula-ai',
+                                        iconStyle: 'white',
+                                        value: 'provided-3',
+                                    },
+                                },
+                            ] }) }), _jsx("div", { className: "tw-p-4", children: _jsx(ButtonGroup, { onChange: (newValue) => setValue(newValue), buttons: [
+                                {
+                                    variant: 'button',
+                                    buttonProps: {
+                                        variant: 'theme',
+                                        label: 'annotate',
+                                        value: 'provided-1',
+                                    },
+                                },
+                                {
+                                    variant: 'button',
+                                    buttonProps: {
+                                        variant: 'theme',
+                                        label: 'trash',
+                                        value: 'provided-2',
+                                    },
+                                },
+                                {
+                                    variant: 'button',
+                                    buttonProps: {
+                                        variant: 'theme',
+                                        label: 'formula-ai',
+                                        value: 'provided-3',
+                                    },
+                                },
+                            ] }) }), _jsx("div", { className: "tw-p-4", children: _jsx(ButtonGroup, { onChange: () => { }, buttons: [
+                                {
+                                    variant: 'element',
+                                    element: (_jsx(ToolbarButton, { icon: "fc-y-axis", label: "Popover", testId: "basic-popover1", tooltipText: "This is a small popover.", tooltipOptions: { position: 'top', delay: 0 }, isHtmlTooltip: false, popoverContent: _jsx("div", { className: "tw-text-sm dark:tw-text-white", children: _jsx("p", { className: "tw-bg-gray-200 dark:tw-bg-gray-700 tw-p-2", children: "Flavors" }) }) })),
+                                },
+                                {
+                                    variant: 'element',
+                                    element: (_jsx(ToolbarButton, { icon: "fc-trash", label: "Trash", testId: "basic-popover1", tooltipText: "This is a small popover.", tooltipOptions: { position: 'top', delay: 0 }, isHtmlTooltip: false, popoverContent: _jsx("div", { className: "tw-text-sm dark:tw-text-white", children: _jsx("p", { className: "tw-bg-gray-200 dark:tw-bg-gray-700 tw-p-2", children: "Flavors" }) }) })),
+                                },
+                                {
+                                    variant: 'element',
+                                    element: (_jsx(ToolbarButton, { icon: "fc-formula-ai", label: "Formula", testId: "basic-popover1", tooltipText: "This is a small popover.", tooltipOptions: { position: 'top', delay: 0 }, isHtmlTooltip: false, popoverContent: _jsx("div", { className: "tw-text-sm dark:tw-text-white", children: _jsx("p", { className: "tw-bg-gray-200 dark:tw-bg-gray-700 tw-p-2", children: "Flavors" }) }) })),
+                                },
+                            ] }) }), _jsx("div", { className: "tw-p-4", children: _jsx(ButtonGroup, { buttons: [
+                                {
+                                    variant: 'button',
+                                    buttonProps: {
+                                        size: 'sm',
+                                        icon: 'fc-annotate',
+                                        value: 'left',
+                                        isActive: true,
+                                    },
+                                },
+                                {
+                                    variant: 'button',
+                                    buttonProps: {
+                                        size: 'sm',
+                                        icon: 'fc-trash',
+                                        value: 'center',
+                                        isActive: false,
+                                    },
+                                },
+                                {
+                                    variant: 'button',
+                                    buttonProps: {
+                                        size: 'sm',
+                                        icon: 'fc-formula-ai',
+                                        value: 'right',
+                                        isActive: false,
+                                    },
+                                },
+                            ] }) })
+                ] }), _jsxs("div", { className: "tw-dark tw-bg-sq-dark-background", children: [
+                    _jsx("div", { className: "tw-p-4", children: _jsx(ButtonGroup, { onChange: (newValue) => setValue(newValue), buttons: [
+                                {
+                                    variant: 'button',
+                                    buttonProps: {
+                                        variant: 'outline',
+                                        icon: 'fc-annotate',
+                                        iconStyle: 'theme',
+                                        value: 'provided-1',
+                                    },
+                                },
+                                {
+                                    variant: 'button',
+                                    buttonProps: {
+                                        variant: 'outline',
+                                        icon: 'fc-trash',
+                                        iconStyle: 'theme',
+                                        value: 'provided-2',
+                                    },
+                                },
+                                {
+                                    variant: 'button',
+                                    buttonProps: {
+                                        variant: 'outline',
+                                        icon: 'fc-formula-ai',
+                                        iconStyle: 'theme',
+                                        value: 'provided-3',
+                                    },
+                                },
+                            ] }) }), _jsx("div", { className: "tw-p-4", children: _jsx(ButtonGroup, { onChange: (newValue) => setValue(newValue), buttons: [
+                                {
+                                    variant: 'button',
+                                    buttonProps: {
+                                        variant: 'no-border',
+                                        icon: 'fc-annotate',
+                                        iconStyle: 'theme',
+                                        value: 'provided-1',
+                                    },
+                                },
+                                {
+                                    variant: 'button',
+                                    buttonProps: {
+                                        variant: 'no-border',
+                                        icon: 'fc-trash',
+                                        iconStyle: 'theme',
+                                        value: 'provided-2',
+                                    },
+                                },
+                                {
+                                    variant: 'button',
+                                    buttonProps: {
+                                        variant: 'no-border',
+                                        icon: 'fc-formula-ai',
+                                        iconStyle: 'theme',
+                                        value: 'provided-3',
+                                    },
+                                },
+                            ] }) }), _jsx("div", { className: "tw-p-4", children: _jsx(ButtonGroup, { onChange: (newValue) => setValue(newValue), buttons: [
+                                {
+                                    variant: 'button',
+                                    buttonProps: {
+                                        variant: 'theme',
+                                        icon: 'fc-annotate',
+                                        iconStyle: 'white',
+                                        value: 'provided-1',
+                                    },
+                                },
+                                {
+                                    variant: 'button',
+                                    buttonProps: {
+                                        variant: 'theme',
+                                        icon: 'fc-trash',
+                                        iconStyle: 'white',
+                                        value: 'provided-2',
+                                    },
+                                },
+                                {
+                                    variant: 'button',
+                                    buttonProps: {
+                                        variant: 'theme',
+                                        icon: 'fc-formula-ai',
+                                        iconStyle: 'white',
+                                        value: 'provided-3',
+                                    },
+                                },
+                            ] }) }), _jsx("div", { className: "tw-p-4", children: _jsx(ButtonGroup, { onChange: (newValue) => setValue(newValue), buttons: [
+                                {
+                                    variant: 'button',
+                                    buttonProps: {
+                                        variant: 'theme',
+                                        label: 'annotate',
+                                        value: 'provided-1',
+                                    },
+                                },
+                                {
+                                    variant: 'button',
+                                    buttonProps: {
+                                        variant: 'theme',
+                                        label: 'trash',
+                                        value: 'provided-2',
+                                    },
+                                },
+                                {
+                                    variant: 'button',
+                                    buttonProps: {
+                                        variant: 'theme',
+                                        label: 'formula-ai',
+                                        value: 'provided-3',
+                                    },
+                                },
+                            ] }) }), _jsx("div", { className: "tw-p-4", children: _jsx(ButtonGroup, { onChange: () => { }, buttons: [
+                                {
+                                    variant: 'element',
+                                    element: (_jsx(ToolbarButton, { icon: "fc-y-axis", label: "Popover", testId: "basic-popover1", tooltipText: "This is a small popover.", tooltipOptions: { position: 'top', delay: 0 }, isHtmlTooltip: false, popoverContent: _jsx("div", { className: "tw-text-sm dark:tw-text-white", children: _jsx("p", { className: "tw-bg-gray-200 dark:tw-bg-gray-700 tw-p-2", children: "Flavors" }) }) })),
+                                },
+                                {
+                                    variant: 'element',
+                                    element: (_jsx(ToolbarButton, { icon: "fc-trash", label: "Trash", testId: "basic-popover1", tooltipText: "This is a small popover.", tooltipOptions: { position: 'top', delay: 0 }, isHtmlTooltip: false, popoverContent: _jsx("div", { className: "tw-text-sm dark:tw-text-white", children: _jsx("p", { className: "tw-bg-gray-200 dark:tw-bg-gray-700 tw-p-2", children: "Flavors" }) }) })),
+                                },
+                                {
+                                    variant: 'element',
+                                    element: (_jsx(ToolbarButton, { icon: "fc-formula-ai", label: "Formula", testId: "basic-popover1", tooltipText: "This is a small popover.", tooltipOptions: { position: 'top', delay: 0 }, isHtmlTooltip: false, popoverContent: _jsx("div", { className: "tw-text-sm dark:tw-text-white", children: _jsx("p", { className: "tw-bg-gray-200 dark:tw-bg-gray-700 tw-p-2", children: "Flavors" }) }) })),
+                                },
+                            ] }) }), _jsx("div", { className: "tw-p-4", children: _jsx(ButtonGroup, { buttons: [
+                                {
+                                    variant: 'button',
+                                    buttonProps: {
+                                        size: 'sm',
+                                        icon: 'fc-annotate',
+                                        value: 'left',
+                                        isActive: true,
+                                    },
+                                },
+                                {
+                                    variant: 'button',
+                                    buttonProps: {
+                                        size: 'sm',
+                                        icon: 'fc-trash',
+                                        value: 'center',
+                                        isActive: false,
+                                    },
+                                },
+                                {
+                                    variant: 'button',
+                                    buttonProps: {
+                                        size: 'sm',
+                                        icon: 'fc-formula-ai',
+                                        value: 'right',
+                                        isActive: false,
+                                    },
+                                },
+                            ] }) })
+                ] })
+        ] }));
+    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()] }), _jsxs("div", { className: "color_analysis", children: [
+                    _jsx("b", { children: "Analysis Colors" }), renderAllVariations()] }), _jsxs("div", { className: "color_datalab", children: [
+                    _jsx("b", { children: "Datalab Colors" }), renderAllVariations()] }), _jsxs("div", { className: "color_vantage", children: [
+                    _jsx("b", { children: "Vantage Colors" }), renderAllVariations()] })
+        ] }));
+};

package/dist/src/ButtonGroup/ButtonGroup.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/ButtonGroup/ButtonGroup.test.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { fireEvent, render } from '@testing-library/react';
+import { ButtonGroup } from './ButtonGroup';
+describe('ButtonGroup', () => {
+    const mockOnChange = jest.fn();
+    const defaultProps = {
+        id: 'test-id',
+        extraClassNames: 'extra-class',
+        testId: 'button-group',
+        onChange: mockOnChange,
+        buttons: [
+            {
+                variant: 'button',
+                buttonProps: {
+                    testId: 'button1',
+                    value: 'button1',
+                    variant: 'outline',
+                    extraClassNames: 'button-class',
+                    isActive: true,
+                },
+            },
+            {
+                variant: 'button',
+                buttonProps: {
+                    testId: 'button2',
+                    value: 'button2',
+                    variant: 'theme',
+                    extraClassNames: 'button-class',
+                },
+            },
+            {
+                variant: 'element',
+                element: _jsx("span", { children: "Custom Element" }, "custom-element"),
+            },
+        ],
+    };
+    it('renders ButtonGroup with buttons and custom elements', () => {
+        const { getByTestId } = render(_jsx(ButtonGroup, { ...defaultProps }));
+        const buttonGroup = getByTestId('button-group');
+        expect(buttonGroup).toBeInTheDocument();
+        expect(buttonGroup).toHaveClass('tw-flex tw-outline-none tw-w-full tw-relative tw-flex-wrap extra-class');
+        const button1 = getByTestId('button1');
+        expect(button1).toBeInTheDocument();
+        expect(button1).toHaveClass('button-class');
+        const button2 = getByTestId('button2');
+        expect(button2).toBeInTheDocument();
+        expect(button2).toHaveClass('button-class');
+    });
+    it('calls onChange when a button is clicked', () => {
+        const { getByTestId } = render(_jsx(ButtonGroup, { ...defaultProps }));
+        const button1 = getByTestId('button1');
+        fireEvent.click(button1);
+        expect(mockOnChange).toHaveBeenCalledWith('button1');
+        const button2 = getByTestId('button2');
+        fireEvent.click(button2);
+        expect(mockOnChange).toHaveBeenCalledWith('button2');
+    });
+    it('applies active classes based on value and variant', () => {
+        const { getByTestId } = render(_jsx(ButtonGroup, { ...defaultProps }));
+        const button1 = getByTestId('button1');
+        expect(button1).toHaveClass('!tw-bg-sq-disabled-gray tw-border-sq-color-dark');
+        const button2 = getByTestId('button2');
+        expect(button2).not.toHaveClass('tw-bg-sq-color-highlight');
+    });
+});

package/dist/src/ButtonGroup/ButtonGroup.types.d.ts

@@ -0,0 +1,80 @@
+import { ButtonProps } from '../Button/Button.types';
+import { TooltipComponentProps } from '../Tooltip/Tooltip.types';
+/**
+ * Interface representing the properties for a button within a ButtonGroup.
+ * Used when you want to include an interactive button as part of the group.
+ */
+interface AppendedButtonProps {
+    /**
+     * Specifies that this group item is a clickable button.
+     * Button items can be selected, have active states, and trigger onChange events.
+     */
+    variant: 'button';
+    /**
+     * Configuration properties for the button component.
+     * Omits the onClick handler since ButtonGroup manages selection internally.
+     * Requires a value for selection tracking and optionally an isActive state.
+     */
+    buttonProps: Omit<ButtonProps, 'onClick'> & {
+        /** Unique value used to identify this button when selected */
+        value: string;
+        /** Whether this button is currently in the active/selected state */
+        isActive?: boolean;
+    };
+}
+/**
+ * Interface for including custom React elements within a ButtonGroup.
+ * Used when you need to add non-button content like separators, labels, or custom components.
+ */
+interface ElementProps {
+    /**
+     * Specifies that this group item is a custom React element.
+     * Element items are purely presentational and don't participate in selection logic.
+     */
+    variant: 'element';
+    /**
+     * The React content to render within the button group.
+     * Can be any valid React node including text, icons, separators, or complex components.
+     */
+    element: React.ReactNode;
+    /**
+     * Additional CSS classes to apply to the element's container.
+     * Use this to style the element consistently with the button group's appearance.
+     */
+    extraClassNames?: string;
+}
+type Props = AppendedButtonProps | ElementProps | undefined;
+/**
+ * Props for the ButtonGroup component that creates a cohesive group of related buttons.
+ * Extends TooltipComponentProps to support tooltip functionality on the entire group.
+ */
+export interface ButtonGroupProps extends TooltipComponentProps {
+    /**
+     * Array of items to display in the button group.
+     * Each item can be either a button (for interactive elements) or an element (for decorative content).
+     * Buttons within the group share consistent styling and spacing for a unified appearance.
+     */
+    buttons: Props[];
+    /**
+     * HTML ID attribute for the button group container.
+     * Should be unique across the page for proper HTML semantics and accessibility.
+     */
+    id?: string;
+    /**
+     * Additional CSS classes to apply to the button group container.
+     * Use this to customize the group's appearance, spacing, or layout beyond default styling.
+     */
+    extraClassNames?: string;
+    /**
+     * Callback function triggered when a button within the group is selected.
+     * Receives the value of the selected button as defined in its buttonProps.value.
+     * Use this to handle selection changes and update your application state.
+     */
+    onChange?: (value: string) => void;
+    /**
+     * Test ID attribute for the button group container used in automated testing.
+     * Applied to the group's root element for test targeting and interaction.
+     */
+    testId?: string;
+}
+export {};

package/dist/src/ButtonGroup/ButtonGroup.types.js

@@ -0,0 +1 @@
+export {};

package/dist/src/ButtonGroup/index.d.ts

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

package/dist/src/ButtonGroup/index.js

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

package/dist/src/ButtonWithDropdown/ButtonWithDropdown.d.ts

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

package/dist/src/ButtonWithDropdown/ButtonWithDropdown.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
+import Icon from '../Icon';
+import { getQTipData } from '../Tooltip/qTip.utilities';
+const borderStyles = [
+    'tw-border-solid',
+    'tw-border',
+    'tw-rounded-popover',
+    'tw-border-sq-disabled-gray',
+    'dark:tw-border-gray-500',
+].join(' ');
+const bgStyles = ['tw-bg-sq-white', 'dark:tw-bg-sq-dark-background'].join(' ');
+const disabledClasses = ['tw-opacity-50', 'tw-cursor-not-allowed'].join(' ');
+const ButtonWithDropdown = ({ dropdownItems, triggerIcon, id, extraClassNames = '', contentExtraClassNames = '', containerTestId, disabled = false, align = 'end', placement = 'bottom', placementOffset = 5, alignOffset = -35, hasArrow = false, onOpenChange, isOpen, setFocusOnTriggerOnClose = true, keepFocusInsideDropdown = true, onContainerClick, ...tooltipProps }) => {
+    const tooltipData = getQTipData(tooltipProps);
+    return (_jsxs(DropdownMenu.Root, { defaultOpen: false, open: isOpen, onOpenChange: onOpenChange, modal: keepFocusInsideDropdown, children: [
+            _jsx(DropdownMenu.Trigger, { id: id, className: `tw-border-none focus-visible:tw-outline-none focus:tw-outline-none focus-within:tw-outline-none`, disabled: disabled, children: _jsx("div", { ...tooltipData, className: `tw-bg-transparent tw-flex tw-flex-col tw-items-center focus-visible:tw-outline-none focus:tw-outline-none focus-within:tw-outline-none ${disabled ? disabledClasses : ''} ${extraClassNames}`, children: triggerIcon }) }), _jsx(DropdownMenu.Portal, { children: _jsx(DropdownMenu.Content, { onClick: onContainerClick, sideOffset: placementOffset, side: placement, align: align, alignOffset: alignOffset, asChild: true, onCloseAutoFocus: (e) => !setFocusOnTriggerOnClose && e.preventDefault(), className: "focus-visible:tw-outline-none tw-outline-none", children: _jsxs("div", { "data-testid": containerTestId, className: `${bgStyles} tw-relative tw-z-[1200] tw-min-w-6 tw-py-2 focus-visible:tw-outline-none tw-outline-none data-[state=open]:tw-animate-in data-[state=closed]:tw-animate-out forceFont data-[side=top]:tw-animate-slideDownAndFade data-[side=right]:tw-animate-slideLeftAndFade data-[side=bottom]:tw-animate-slideUpAndFade data-[side=left]:tw-animate-slideRightAndFade ${borderStyles} ${contentExtraClassNames}`, children: [hasArrow && (_jsx(DropdownMenu.Arrow, { asChild: true, children: _jsx("div", { className: " tw-fill-transparent tw-bg-white tw-w-[15px] tw-h-[15px] tw-rotate-45 dark:tw-bg-sq-dark-background tw-border-b tw-border-r tw-border-sq-disabled-gray dark:tw-border-gray-500 tw-mt-[-7px]" }) })), dropdownItems.map((item, index) => {
+                                const tooltipData = getQTipData(item);
+                                if (item.isLabel) {
+                                    return (_jsxs(DropdownMenu.Label, { className: item.itemExtraClassNames, ...tooltipData, children: [item.icon && (_jsx(Icon, { icon: item.icon, testId: item.iconTestId, type: "text", color: item.iconColor, extraClassNames: "tw-text-sq-text-color dark:tw-text-sq-white tw-w-[18px]" })), _jsx("div", { "data-testid": item.labelTestId, className: `tw-text-[0.8125rem] tw-ml-1 ${item.disabled ? 'tw-text-sq-disabled-gray' : 'tw-text-sq-text-color dark:tw-text-sq-white'} tw-not-italic tw-font-normal ${item.labelClasses}`, children: item.label })
+                                        ] }, (item.id || '') + index));
+                                }
+                                if (Array.isArray(item.subMenuItems) && item.subMenuItems.length > 0) {
+                                    return (_jsxs(DropdownMenu.Sub, { children: [
+                                            _jsxs(DropdownMenu.SubTrigger, { id: id, className: `tw-cursor-pointer tw-flex tw-justify-between dark:tw-text-sq-white hover:tw-bg-sq-gray-highlight dark:hover:tw-bg-sq-gray-highlight-dark tw-leading-none tw-items-center tw-h-[27px] tw-pl-[19px] tw-relative tw-select-none tw-outline-none data-[disabled]:tw-pointer-events-none ${item.itemExtraClassNames || ''}`, "data-testid": item.testId, disabled: item.disabled, ...tooltipData, children: [
+                                                    _jsxs("div", { className: "tw-flex", children: [item.icon && (_jsx(Icon, { icon: item.icon, extraClassNames: `tw-w-[18px] ${item.disabled
+                                                                    ? '!tw-text-sq-disabled-gray'
+                                                                    : 'tw-text-sq-text-color dark:tw-text-sq-white'} ${item.iconExtraClassNames || ''}` })), _jsx("div", { "data-testid": item.labelTestId, "data-customid": item.labelCustomId, className: `tw-text-[0.8125rem] tw-ml-1 ${item.disabled && '!tw-opacity-30'} tw-not-italic tw-font-semibold ${item.labelClasses}`, children: item.label })
+                                                        ] }), _jsx(Icon, { small: true, icon: "fc-arrow-dropdown -tw-rotate-90", extraClassNames: `${item.disabled ? 'tw-text-sq-disabled-gray' : 'tw-text-sq-text-color dark:tw-text-sq-white'} tw-w-[18px] tw-ml-4 tw-text-[0.5rem] tw-justify-center tw-flex` })
+                                                ] }), _jsx(DropdownMenu.Portal, { children: _jsx(DropdownMenu.SubContent, { className: "focus-visible:tw-outline-none tw-outline-none", children: _jsx("div", { "data-testid": containerTestId, className: `${bgStyles} tw-relative tw-z-[1000] tw-min-w-6 tw-py-2 focus-visible:tw-outline-none tw-outline-none data-[state=open]:tw-animate-in data-[state=closed]:tw-animate-out forceFont data-[side=top]:tw-animate-slideDownAndFade data-[side=right]:tw-animate-slideLeftAndFade data-[side=bottom]:tw-animate-slideUpAndFade data-[side=left]:tw-animate-slideRightAndFade ${borderStyles}`, children: item.subMenuItems.map((subItem, subIndex) => {
+                                                            return (_jsxs(DropdownMenu.Item, { onSelect: subItem.onClick, "data-qtip-text": subItem.tooltip, className: "tw-cursor-pointer tw-flex dark:tw-text-sq-white hover:tw-bg-sq-gray-highlight dark:hover:tw-bg-sq-gray-highlight-dark tw-leading-none tw-items-center tw-h-[27px] tw-px-[19px] tw-relative tw-select-none tw-outline-none data-[disabled]:tw-pointer-events-none", disabled: subItem.disabled, children: [subItem.iconClass && (_jsx(Icon, { icon: subItem.iconClass, type: "text", extraClassNames: `tw-w-[18px] ${item.disabled && '!tw-opacity-30'}` })), _jsx("div", { className: `tw-text-[0.8125rem] tw-ml-1 ${subItem.disabled
+                                                                            ? 'tw-text-sq-disabled-gray'
+                                                                            : 'tw-text-sq-text-color dark:tw-text-sq-white'} tw-not-italic tw-font-normal ${item.labelClasses}`, children: subItem.label })
+                                                                ] }, subItem.label + subIndex));
+                                                        }) }) }) })
+                                        ] }, (item.id || item.icon || '') + index));
+                                }
+                                return (_jsxs("div", { ...tooltipData, children: [
+                                        _jsxs(DropdownMenu.Item, { "data-customid": item.itemCustomId, onSelect: (e) => {
+                                                item.onClick(e);
+                                            }, className: `tw-cursor-pointer tw-flex dark:tw-text-sq-white hover:tw-bg-sq-gray-highlight dark:hover:tw-bg-sq-gray-highlight-dark tw-leading-none tw-items-center tw-min-h-[27px] tw-px-[19px] tw-relative tw-select-none tw-outline-none data-[disabled]:tw-pointer-events-none ${item.itemExtraClassNames || ''}`, "data-testid": item.testId, disabled: item.disabled, children: [item.icon && (_jsx(Icon, { icon: item.icon, testId: item.iconTestId, type: (item.iconType || 'text'), color: item.iconColor, customId: item.iconCustomId, extraClassNames: `tw-w-[18px] ${item.disabled && '!tw-opacity-30'} ${item.iconExtraClassNames || ''}` })), _jsx("div", { "data-testid": item.labelTestId, "data-customid": item.labelCustomId, className: `tw-text-[0.8125rem] tw-ml-1 ${item.disabled ? 'tw-text-sq-disabled-gray' : 'tw-text-sq-text-color dark:tw-text-sq-white'} tw-not-italic tw-font-normal ${item.labelClasses || ''}`, children: item.label })
+                                            ] }, (item.id || item.icon || '') + index), item.hasDivider && (_jsx(DropdownMenu.Separator, { "data-testid": `dropdown-divider-${index}`, className: "tw-h-[1px] tw-bg-sq-disabled-gray dark:tw-bg-gray-500 tw-my-[8px]" }))] }, (item.id || '') + index));
+                            })] }) }) })
+        ] }));
+};
+export default ButtonWithDropdown;

package/dist/src/ButtonWithDropdown/ButtonWithDropdown.stories.d.ts

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