@seeqdev/qomponents 0.0.194 → 0.0.202

package/dist/src/Button/Button.d.ts

@@ -1,9 +1,10 @@
 import React from 'react';
 import { ButtonProps } from './Button.types';
+type ButtonComponentProps = ButtonProps & React.RefAttributes<HTMLButtonElement>;
 /**
  * All-in-one Button:
  *  - use "variant" to achieve the desired style
  *  - include tooltips and/or icons
  */
-declare const Button: React.FunctionComponent<ButtonProps>;
+declare const Button: React.FunctionComponent<ButtonComponentProps>;
 export default Button;

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

@@ -5,10 +5,10 @@ export declare const buttonTypes: readonly ["button", "reset", "submit", "link"]
 export declare const buttonSizes: readonly ["xs", "sm", "lg"];
 export declare const buttonVariants: readonly ["outline", "theme", "theme-light", "warning", "danger", "no-border"];
 export declare const iconPositions: string[];
-export type ButtonType = typeof buttonTypes[number];
-export type ButtonSize = typeof buttonSizes[number];
-export type ButtonVariant = typeof buttonVariants[number];
-export type IconPosition = typeof iconPositions[number];
+export type ButtonType = (typeof buttonTypes)[number];
+export type ButtonSize = (typeof buttonSizes)[number];
+export type ButtonVariant = (typeof buttonVariants)[number];
+export type IconPosition = (typeof iconPositions)[number];
 export interface ButtonProps {
     /**
      * Callback function triggered when the button is clicked.

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

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

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

@@ -1,9 +1,10 @@
 import { TooltipComponentProps } from '../Tooltip/Tooltip.types';
+import { ButtonProps } from '..';
 /**
  * Interface for sub-menu items that appear in nested dropdown menus.
  * Used to create hierarchical menu structures within dropdown items.
  */
-interface DropdownSubItem {
+export interface DropdownSubItem {
     /**
      * Icon class name to display next to the sub-item label.
      * Typically uses FontAwesome classes (e.g., 'fc-zoom', 'fc-delete').
@@ -35,7 +36,7 @@ interface DropdownSubItem {
  * Interface for main dropdown menu items that can contain sub-menus.
  * Extends TooltipComponentProps for enhanced tooltip functionality.
  */
-interface DropdownItems extends TooltipComponentProps {
+export interface DropdownItems extends TooltipComponentProps {
     /**
      * HTML ID attribute for the dropdown item element.
      * Should be unique for proper HTML semantics and accessibility.
@@ -133,31 +134,29 @@ interface DropdownItems extends TooltipComponentProps {
     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.
+ * Props for the ButtonWithDropdown component that creates a Qomponents-styled Button
+ * with an attached dropdown menu.
+ *
+ * Unlike TriggerWithDropdown, this component does not allow a custom trigger element.
+ * The trigger is always a Qomponents-styled Button whose appearance can be configured
+ * via the button-related props (label, variant, size, icon, etc.).
+ *
+ * Uses the asChild prop on DropdownMenu.Trigger to avoid nesting <button> elements.
  */
-export interface ButtonWithDropdownProps extends TooltipComponentProps {
+export type ButtonWithDropdownProps = TooltipComponentProps & ButtonProps & DropdownProps;
+export interface DropdownProps {
+    children?: React.ReactNode;
     /**
      * 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.
@@ -168,11 +167,6 @@ export interface ButtonWithDropdownProps extends TooltipComponentProps {
      * 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
@@ -229,4 +223,3 @@ export interface ButtonWithDropdownProps extends TooltipComponentProps {
      */
     onContainerClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
 }
-export {};

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

@@ -1,6 +1,6 @@
 import { TooltipComponentProps } from '../Tooltip/Tooltip.types';
 export declare const iconTypes: readonly ["theme", "white", "dark-gray", "darkish-gray", "gray", "color", "info", "text", "warning", "inherit", "danger", "theme-light", "success"];
-export type IconType = typeof iconTypes[number];
+export type IconType = (typeof iconTypes)[number];
 export type IconSize = '2xs' | 'xs' | 'sm' | 'lg' | 'xl' | '2xl' | '1x' | '2x' | '3x' | '4x' | '5x' | '6x' | '7x' | '8x' | '9x' | '10x';
 /**
  * Props for the Icon component that renders customizable icons with various styling options.

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

@@ -1,6 +1,6 @@
 import { TooltipComponentProps } from '../Tooltip/Tooltip.types';
 export declare const svgIconTypes: readonly ["theme", "white", "dark-gray", "darkish-gray", "gray", "color", "info", "text", "warning", "inherit", "danger", "theme-light", "success", "default"];
-export type SvgIconType = typeof svgIconTypes[number];
+export type SvgIconType = (typeof svgIconTypes)[number];
 /**
  * Props for the SvgIcon component that renders SVG-based icons with various styling options.
  * Extends TooltipComponentProps to support tooltip functionality on the icon.

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

@@ -1,7 +1,7 @@
 import React, { MouseEvent } from 'react';
 import { TooltipProps } from '../Tooltip/Tooltip.types';
 export declare const toolbarButtonVariants: readonly ["outline", "theme", "theme-light", "warning", "danger", "no-border"];
-export type ToolbarButtonVariant = typeof toolbarButtonVariants[number];
+export type ToolbarButtonVariant = (typeof toolbarButtonVariants)[number];
 /**
  * Props for the ToolbarButton component that creates toolbar-style buttons with optional popovers.
  * Designed for use in toolbars, action bars, and similar UI contexts.

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

@@ -1,7 +1,7 @@
-export declare const DEFAULT_TOOL_TIP_DELAY = 500;
+export declare const DEFAULT_TOOL_TIP_DELAY: number;
 export declare const tooltipPositions: readonly ["top", "left", "right", "bottom"];
 import React from 'react';
-export type TooltipPosition = typeof tooltipPositions[number];
+export type TooltipPosition = (typeof tooltipPositions)[number];
 export interface TooltipProps {
     position?: TooltipPosition;
     children?: React.JSX.Element | string;

package/dist/src/TriggerWithDropdown/TriggerWithDropdown.d.ts

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

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

@@ -0,0 +1,102 @@
+import { TooltipComponentProps } from '../Tooltip/Tooltip.types';
+import { DropdownItems } from '..';
+/**
+ * Props for the TriggerWithDropdown component that creates a custom trigger with an attached dropdown menu.
+ * Extends TooltipComponentProps to support tooltip functionality on the trigger element.
+ *
+ * Use this component when you need full control over the trigger element's appearance.
+ * If you want a standard Qomponents Button as the trigger, use ButtonWithDropdown instead.
+ */
+export interface TriggerWithDropdownProps 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.
+     * Can be any React element — icon, text, custom component, etc.
+     */
+    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.
+     * 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;
+}

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

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

package/dist/src/index.d.ts

@@ -11,6 +11,7 @@ import Tabs from './Tabs';
 import Accordion from './Accordion';
 import ButtonWithPopover from './ButtonWithPopover';
 import ButtonWithDropdown from './ButtonWithDropdown';
+import TriggerWithDropdown from './TriggerWithDropdown';
 import Alert from './Alert';
 import SeeqActionDropdown from './SeeqActionDropdown';
 import InputGroup from './InputGroup';
@@ -33,6 +34,7 @@ export { Modal };
 export { Accordion };
 export { ButtonWithPopover };
 export { ButtonWithDropdown };
+export { TriggerWithDropdown };
 export { Alert };
 export { SeeqActionDropdown };
 export { InputGroup };

package/dist/src/test-utils/is-browser-mode.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Check if tests are running in Playwright browser mode vs happy-dom/Node mode.
+ *
+ * Vitest 4.0.x doesn't reliably support import.meta.env in browser projects,
+ * so this uses user agent detection for now.
+ */
+export declare function isBrowserMode(): boolean;
+export declare function isHappyDomMode(): boolean;
+export declare function isNodeMode(): boolean;
+export declare function isHeadlessBrowserMode(): boolean;

package/dist/src/types.d.ts

@@ -5,6 +5,7 @@ export * from './Alert/Alert.types';
 export * from './Button/Button.types';
 export * from './ButtonGroup/ButtonGroup.types';
 export * from './ButtonWithDropdown/ButtonWithDropdown.types';
+export * from './TriggerWithDropdown/TriggerWithDropdown.types';
 export * from './ButtonWithPopover/ButtonWithPopover.types';
 export * from './Carousel/Carousel.types';
 export * from './Checkbox/Checkbox.types';