@seeqdev/qomponents 0.0.157 → 0.0.159

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

@@ -0,0 +1,160 @@
+/// <reference types="react" />
+import { TooltipComponentProps } from '../Tooltip/Tooltip.types';
+/**
+ * Interface for individual action items within a SeeqActionDropdown.
+ * Each item represents a clickable action with optional icon, text, and divider.
+ */
+export interface SeeqActionDropdownItems {
+    /**
+     * 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 FontAwesome classes (e.g., 'fc-zoom', 'fc-delete').
+     * Provides visual context for the action.
+     */
+    icon?: string;
+    /**
+     * Additional CSS classes to apply to the icon element.
+     * Use this to customize icon appearance beyond standard styling.
+     */
+    iconExtraClassNames?: string;
+    /**
+     * Main display text for the dropdown item.
+     * This is the primary text that users see and click on to trigger the action.
+     */
+    display: string;
+    /**
+     * Callback function triggered when the dropdown item is clicked.
+     * Use this to define the specific action that should occur when users select this item.
+     */
+    action: (e?: Event) => void;
+    /**
+     * When true, the item is clickable and interactive.
+     * When false, the item appears disabled and doesn't respond to clicks.
+     * @default true
+     */
+    enabled?: boolean;
+    /**
+     * When true, displays a visual divider line below this dropdown item.
+     * Useful for grouping related items or separating different sections of actions.
+     */
+    divider?: boolean;
+    /**
+     * Test ID attribute for the dropdown item used in automated testing.
+     * Helps identify and interact with specific action items in test suites.
+     */
+    testId?: string;
+    /**
+     * Secondary descriptive text displayed below the main display text.
+     * Provides additional context or explanation about what the action does.
+     */
+    text?: string;
+}
+/**
+ * Props for the SeeqActionDropdown component that creates specialized Seeq-branded action menus.
+ * Extends TooltipComponentProps to support tooltip functionality on the trigger.
+ */
+export interface SeeqActionDropdownProps extends TooltipComponentProps {
+    /**
+     * Array of action items to display in the dropdown menu.
+     * Each item represents a specific action users can perform, with icons and descriptions.
+     */
+    seeqActionDropdownItems: SeeqActionDropdownItems[];
+    /**
+     * React element to use as the clickable trigger for the dropdown.
+     * Typically a button, icon, or text element that users click to open the action menu.
+     */
+    trigger: 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 container.
+     * Use this to customize the dropdown's appearance beyond default Seeq 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;
+    /**
+     * When true, disables the dropdown trigger preventing user interaction.
+     * Disabled triggers appear visually dimmed and don't open the dropdown when clicked.
+     */
+    disabled?: boolean;
+    /**
+     * Callback function triggered when the trigger is clicked.
+     * Primarily used for tracking or analytics purposes. Note: this doesn't control
+     * dropdown opening, which is handled separately.
+     */
+    onClick?: (e: MouseEvent) => void;
+    /**
+     * 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, automatically closes the dropdown when any content inside it is clicked.
+     * Useful for action dropdowns where selecting an option should close the dropdown.
+     */
+    isCloseOnContentClick?: boolean;
+    /**
+     * When true, traps keyboard focus within the dropdown when it's open.
+     * Prevents users from tabbing outside the dropdown, improving accessibility.
+     */
+    keepFocusInsideDropdown?: boolean;
+    /**
+     * Predefined variant that determines the dropdown's styling and behavior:
+     * - `create-workbench`: For workbench creation actions
+     * - `view-workbench`: For workbench viewing and management actions
+     * - `insert-seeq-content`: For inserting Seeq-specific content and objects
+     * Each variant has specific styling and may filter available actions.
+     */
+    variant: 'create-workbench' | 'view-workbench' | 'insert-seeq-content';
+}

package/dist/{SeeqActionDropdown → src/SeeqActionDropdown}/index.d.ts

@@ -1 +1 @@
-export { default } from './SeeqActionDropdown';
+export { default } from './SeeqActionDropdown';

package/dist/{SeeqActionDropdown → src/SeeqActionDropdown}/variants.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import { SeeqActionDropdownItems } from './SeeqActionDropdown.types';
-export declare const SeeqActionDropdownItem: React.FC<SeeqActionDropdownItems>;
-export declare const ViewWorkbench: React.FC<SeeqActionDropdownItems>;
-export declare const InsertSeeqContent: React.FC<SeeqActionDropdownItems>;
+import React from 'react';
+import { SeeqActionDropdownItems } from './SeeqActionDropdown.types';
+export declare const SeeqActionDropdownItem: React.FC<SeeqActionDropdownItems>;
+export declare const ViewWorkbench: React.FC<SeeqActionDropdownItems>;
+export declare const InsertSeeqContent: React.FC<SeeqActionDropdownItems>;

package/dist/{Select → src/Select}/Select.d.ts

@@ -1,15 +1,15 @@
-import React from 'react';
-import { SelectProps } from './Select.types';
-import '../styles.css';
-import { MultiValue as MV, SingleValue as SV } from 'react-select';
-export type MultiValue<T> = MV<T>;
-export type SingleValue<T> = SV<T>;
-/**
- * Select Component
- *  - based on react-select (https://react-select.com/)
- *
- *  For ease of testing most of the elements of this select can be identified by classNames prefixed with "spec".
- *
- */
-declare const Select: React.FunctionComponent<SelectProps>;
-export default Select;
+import React from 'react';
+import { SelectProps } from './Select.types';
+import '../styles.css';
+import { MultiValue as MV, SingleValue as SV } from 'react-select';
+export type MultiValue<T> = MV<T>;
+export type SingleValue<T> = SV<T>;
+/**
+ * Select Component
+ *  - based on react-select (https://react-select.com/)
+ *
+ *  For ease of testing most of the elements of this select can be identified by classNames prefixed with "spec".
+ *
+ */
+declare const Select: React.FunctionComponent<SelectProps>;
+export default Select;

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

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

package/dist/{Select → src/Select}/Select.test.d.ts

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

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

@@ -0,0 +1,220 @@
+import { GroupBase, InputActionMeta, MenuPlacement, MultiValue, SingleValue } from 'react-select';
+import { ReactNode } from 'react';
+import { InputGroupPlacement } from '../types';
+export type Option = {
+    label: string;
+    value: string | number;
+} | any;
+export type GroupedOption = {
+    label: string;
+    options: Option[];
+};
+/**
+ * Props for the Select component that provides a customizable dropdown selection interface.
+ * Built on top of react-select with additional Seeq-specific styling and functionality.
+ */
+export interface SelectProps {
+    /**
+     * When false (default), automatically closes the dropdown menu after an option is selected.
+     * When true, keeps the menu open after selection, useful for multi-select scenarios
+     * where users might want to select multiple options quickly.
+     */
+    closeMenuOnSelect?: boolean;
+    /**
+     * When true, allows users to create new options by typing values not in the existing options list.
+     * The new option will be added to the selection and can be handled in the onChange callback.
+     * Useful for tag-like inputs or dynamic option lists.
+     */
+    creatable?: boolean;
+    /**
+     * When true, disables the entire select component preventing user interaction.
+     * The select appears visually dimmed and doesn't respond to clicks or keyboard input.
+     */
+    isDisabled?: boolean;
+    /**
+     * Additional CSS classes to apply to the select container element.
+     * Can be used to control the overall size, positioning, or styling of the select component.
+     */
+    extraClassNames?: string;
+    /**
+     * Additional CSS classes to apply specifically to the select control (the main input area).
+     * Use this to customize the appearance of the clickable area that displays the selected value.
+     */
+    controlClassNames?: string;
+    /**
+     * Custom filter configuration for search functionality.
+     * Advanced option for customizing how the select filters options when users type.
+     */
+    filterConfig?: unknown;
+    /**
+     * Custom function to format how option labels are displayed in the dropdown menu and control.
+     * Receives an option object and should return a React node for custom rendering.
+     * Useful for displaying rich content like icons, badges, or formatted text.
+     */
+    getOptionLabel?: (option: Option) => ReactNode | undefined;
+    /**
+     * Custom function to extract the value from an option object.
+     * Should return a string that uniquely identifies the option.
+     * Used internally by react-select for option comparison and selection tracking.
+     */
+    getOptionValue?: (option: Option) => string;
+    /**
+     * Custom function to format how selected option labels are displayed.
+     * Similar to getOptionLabel but specifically for rendering selected values.
+     * Useful when you want different formatting for selected vs dropdown options.
+     */
+    getSelectedValueLabel?: (option: Option) => ReactNode | undefined;
+    /**
+     * HTML ID attribute for the select component container.
+     * Should be unique across the page for proper HTML semantics and accessibility.
+     */
+    id?: string;
+    /**
+     * Specifies the select's position within an input group:
+     * - `prepend`: Select is preceded by another element
+     * - `append`: Select is followed by another element
+     * Affects styling to create seamless grouped appearance.
+     */
+    inputGroup?: InputGroupPlacement;
+    /**
+     * HTML ID attribute for the internal input element.
+     * Used for accessibility and form associations. If not provided, one will be generated.
+     */
+    inputId?: string;
+    /**
+     * When true, displays a clear button (X) that allows users to remove their selection.
+     * Useful for optional selections where users might want to revert to no selection.
+     */
+    isClearable?: boolean;
+    /**
+     * When true, displays a loading spinner and disables interaction while options are being fetched.
+     * Use this when loading options asynchronously to provide visual feedback to users.
+     */
+    isLoading?: boolean;
+    /**
+     * When true, allows selection of multiple options instead of just one.
+     * Selected options are displayed as chips/tags within the control area.
+     * The onChange callback will receive an array of selected options.
+     */
+    isMulti?: boolean;
+    /**
+     * When true, allows users to type in the select to filter/search through available options.
+     * When false, the select acts as a pure dropdown without search functionality.
+     */
+    isSearchable?: boolean;
+    /**
+     * Forces the dropdown menu to remain open regardless of user interaction.
+     * Primarily useful for debugging or special UI scenarios. Normally should be left undefined.
+     */
+    menuIsOpen?: boolean;
+    /**
+     * Controls where the dropdown menu appears relative to the select control:
+     * - `auto`: Automatically positions based on available space (recommended)
+     * - `top`: Always appears above the control
+     * - `bottom`: Always appears below the control
+     */
+    menuPlacement?: MenuPlacement;
+    /**
+     * Specifies a DOM element where the dropdown menu should be rendered.
+     * When null, renders in the normal document flow. When specified, renders in a portal
+     * to that element, which can help with z-index issues.
+     */
+    menuPortalTarget?: null | HTMLElement;
+    /**
+     * Custom message to display when no options are available for selection.
+     * Shown when the options array is empty or when search filters exclude all options.
+     * @default "No options"
+     */
+    noOptionsMessage?: string;
+    /**
+     * Callback function triggered when the selected value(s) change.
+     * For single selects, receives a single Option or null. For multi-selects, receives an array.
+     * Use this to handle selection changes and update your application state.
+     */
+    onChange: (newValue: SingleValue<Option> | MultiValue<Option>) => void;
+    /**
+     * Array of available options for selection in the dropdown.
+     * Can be a flat array of options or grouped options with category labels.
+     * Each option should have at minimum a label and value property.
+     */
+    options: Option[] | GroupedOption[];
+    /**
+     * Placeholder text displayed when no option is selected.
+     * Provides guidance to users about what they should select.
+     * Only shown when there's no current selection.
+     */
+    placeholder?: string;
+    /**
+     * When true, displays error styling (typically red border) on the select control.
+     * Used to indicate validation errors or invalid selections.
+     */
+    showError?: boolean;
+    /**
+     * When true, renders the select in a smaller, more compact size.
+     * Useful for dense layouts or when space is limited.
+     */
+    small?: boolean;
+    /**
+     * Currently selected option(s) for controlled component behavior.
+     * For single selects, should be a single Option or undefined.
+     * For multi-selects, should be an array of Options.
+     */
+    value?: Option | undefined;
+    /**
+     * Initial selected option(s) for uncontrolled component behavior.
+     * Used when you want the select to manage its own state internally.
+     * Only used during initial render.
+     */
+    defaultValue?: Option | undefined;
+    /**
+     * Custom function to determine if an option should be displayed in the menu.
+     * Receives the option and current search input, returns true to show the option.
+     * Useful for implementing complex filtering logic beyond simple text matching.
+     */
+    filterOption?: (option: Option, rawInput: string) => boolean;
+    /**
+     * Custom function to format group labels when using grouped options.
+     * Receives a group object and should return a React node for the group header.
+     */
+    formatGroupLabel?: (group: GroupBase<unknown>) => ReactNode;
+    /**
+     * Callback triggered when an option is removed in multi-select mode.
+     * Receives an object with the ID of the removed option.
+     * Useful for handling removal-specific logic separately from general onChange.
+     */
+    onRemove?: ({ id }: {
+        id: Option | string;
+    }) => void;
+    /**
+     * Callback triggered when the dropdown menu opens.
+     * Use this for lazy loading options, analytics, or other open-related side effects.
+     */
+    onMenuOpen?: () => void;
+    /**
+     * Callback triggered when the dropdown menu closes.
+     * Use this for cleanup, saving state, or other close-related side effects.
+     */
+    onMenuClose?: () => void;
+    /**
+     * Custom react-select components to override default rendering.
+     * Allows deep customization of option rendering, control appearance, etc.
+     * See react-select documentation for available component slots.
+     */
+    components?: Partial<any>;
+    /**
+     * Callback triggered when the search input within the menu receives focus.
+     * Receives the current input value. Useful for search-related functionality.
+     */
+    onMenuInputFocus?: (inputValue: string) => void;
+    /**
+     * Callback triggered whenever the search input value changes.
+     * Different from onChange which only fires on selection - this fires on every keystroke.
+     * The action parameter indicates what caused the change (input, menu-close, etc.).
+     */
+    onInputChange?: (inputValue: string, action: InputActionMeta) => void;
+    /**
+     * Current value of the search input for controlled search behavior.
+     * Use this when you want to control the search input externally.
+     */
+    inputValue?: string;
+}

package/dist/{Select → src/Select}/index.d.ts

@@ -1,2 +1,2 @@
-export { default } from './Select';
-export { components as SelectCompoents } from 'react-select';
+export { default } from './Select';
+export { components as SelectCompoents } from 'react-select';

package/dist/{Slider → src/Slider}/Slider.d.ts

@@ -1,6 +1,6 @@
-import React from 'react';
-import { SliderProps } from './Slider.types';
-/**
- * Slider .
- */
-export declare const Slider: React.FunctionComponent<SliderProps>;
+import React from 'react';
+import { SliderProps } from './Slider.types';
+/**
+ * Slider .
+ */
+export declare const Slider: React.FunctionComponent<SliderProps>;

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

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

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

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

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

@@ -0,0 +1,85 @@
+/// <reference types="react" />
+/**
+ * Props for the Slider component that provides an interactive range input control.
+ */
+export interface SliderProps {
+    /**
+     * When true, disables the slider preventing user interaction.
+     * Disabled sliders appear visually dimmed and don't respond to mouse or keyboard input.
+     */
+    disabled?: boolean;
+    /**
+     * Callback function triggered when the slider value changes.
+     * Receives an array of numbers (even for single-value sliders for consistency).
+     * Use this to handle value changes and update your application state.
+     */
+    onValueChange?: (value: number[]) => void;
+    /**
+     * Callback function triggered when the user releases the pointer (mouse/touch) from the slider.
+     * Useful for triggering actions only when the user finishes adjusting the value,
+     * rather than continuously during dragging.
+     */
+    onPointerUp?: React.PointerEventHandler<HTMLDivElement>;
+    /**
+     * HTML ID attribute for the slider component.
+     * Should be unique across the page for proper HTML semantics and accessibility.
+     */
+    id?: string;
+    /**
+     * Name attribute for the slider used in form submission.
+     * Identifies the slider's data when the form is submitted to a server.
+     */
+    name?: string;
+    /**
+     * Current value of the slider.
+     * Should be within the min/max range. The slider thumb will be positioned
+     * proportionally based on this value relative to the min/max range.
+     */
+    value: number;
+    /**
+     * Additional CSS classes to apply to the slider's root container.
+     * Use this to customize the overall slider appearance and layout.
+     */
+    rootExtraClassNames?: string;
+    /**
+     * Additional CSS classes to apply to the slider track (the background line).
+     * Use this to customize the track's color, height, or styling.
+     */
+    trackExtraClassNames?: string;
+    /**
+     * Additional CSS classes to apply to the slider thumb (the draggable handle).
+     * Use this to customize the thumb's size, color, shape, or styling.
+     */
+    thumbExtraClassNames?: string;
+    /**
+     * Additional CSS classes to apply to the active range (filled portion of the track).
+     * Use this to customize the color or styling of the filled area from min to current value.
+     */
+    rangeExtraClassNames?: string;
+    /**
+     * Test ID attribute for the slider component used in automated testing.
+     * Applied to the slider's root element for test targeting and interaction.
+     */
+    testId?: string;
+    /**
+     * Step value that defines the increment/decrement amount for the slider.
+     * The slider value will snap to multiples of this step value.
+     * Smaller steps provide finer control, larger steps provide coarser control.
+     * @default 1
+     */
+    step?: number;
+    /**
+     * Minimum allowed value for the slider.
+     * The slider thumb cannot be moved below this value.
+     * Defines the left/bottom end of the slider range.
+     * @default 0
+     */
+    min?: number;
+    /**
+     * Maximum allowed value for the slider.
+     * The slider thumb cannot be moved above this value.
+     * Defines the right/top end of the slider range.
+     * @default 100
+     */
+    max?: number;
+}

package/dist/{Slider → src/Slider}/index.d.ts

@@ -1 +1 @@
-export { Slider as default } from './Slider';
+export { Slider as default } from './Slider';

package/dist/{SvgIcon → src/SvgIcon}/SvgIcon.d.ts

@@ -1,20 +1,20 @@
-import React from 'react';
-import '../styles.css';
-import { SvgIconProps } from './SvgIcon.types';
-/**
- * Renders an icon that has an SVG icon path (see {@link isSvgIcon() })
- *
- * @param onClick - function to call when clicking the icon (takes no parameters)
- * @param id - id that can be placed on the SvgIcon component
- * @param testId - id that will be used in the data-testid attribute on the icon
- * @param customId - id that will be used in the data-customid attribute on the icon. Can be used to identify the icon
- *   as the click event target in an event handler
- * @param icon - the SVG icon
- * @param color - used to add a custom color to the icon (required if type="color")
- * @param extraClassNames - extra class names to apply
- * @param [viewBox='0 0 19 19'] - optional SVG view box
- * @param type - default will use dark/light text colors otherwise will use the theme color
- * @param tooltipProps - props to pass to the tooltip
- */
-declare const SvgIcon: React.FunctionComponent<SvgIconProps>;
-export default SvgIcon;
+import React from 'react';
+import '../styles.css';
+import { SvgIconProps } from './SvgIcon.types';
+/**
+ * Renders an icon that has an SVG icon path (see {@link isSvgIcon() })
+ *
+ * @param onClick - function to call when clicking the icon (takes no parameters)
+ * @param id - id that can be placed on the SvgIcon component
+ * @param testId - id that will be used in the data-testid attribute on the icon
+ * @param customId - id that will be used in the data-customid attribute on the icon. Can be used to identify the icon
+ *   as the click event target in an event handler
+ * @param icon - the SVG icon
+ * @param color - used to add a custom color to the icon (required if type="color")
+ * @param extraClassNames - extra class names to apply
+ * @param [viewBox='0 0 19 19'] - optional SVG view box
+ * @param type - default will use dark/light text colors otherwise will use the theme color
+ * @param tooltipProps - props to pass to the tooltip
+ */
+declare const SvgIcon: React.FunctionComponent<SvgIconProps>;
+export default SvgIcon;

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

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

package/dist/{SvgIcon → src/SvgIcon}/SvgIcon.test.d.ts

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