@seeqdev/qomponents 0.0.184 → 0.0.185

package/dist/src/SeeqActionDropdown/SeeqActionDropdown.stories.js

@@ -0,0 +1,73 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { QTip } from '../Tooltip/Qtip';
+import Button from '../Button/Button';
+import SeeqActionDropdown from './SeeqActionDropdown';
+export default {
+    title: 'Seeq Action Dropdown',
+};
+const options = [
+    {
+        display: 'New Workbook',
+        text: 'This is a workbook to show details about your data. You can make changes to your account',
+        icon: 'fc-analysis',
+        id: 'newWorkbook',
+        enabled: true,
+        iconExtraClassNames: 'workbenchDisplay',
+        action: () => { },
+    },
+    {
+        display: 'New Report Binder',
+        text: 'This is a data tab to show details about your data. You can make changes to your account',
+        icon: 'fc-report',
+        enabled: true,
+        action: () => { },
+        id: 'newReportBinder',
+    },
+    {
+        display: 'New Datalab',
+        text: 'This is a data tab to show details about your data. You can make changes to your account',
+        icon: 'fc-seeq-datalab',
+        id: 'newDataLab',
+        enabled: false,
+        action: () => { },
+        divider: true,
+    },
+    {
+        display: 'Folder',
+        icon: 'fc-folder',
+        action: () => { },
+        id: 'newFolder',
+    },
+    {
+        display: 'SvgIcon',
+        icon: 'svgpath:M0 8.8153a8.8153 8.8153 90 1117.6306 0A8.8153 8.8153 90 110 8.8153zM9.9172 3.3057a1.1019 1.1019' +
+            ' 90 10-2.2038 0 1.1019 1.1019 90 102.2038 0zM8.8153 14.3249c1.2155 0 2.2038-.9883 2.2038-2.2038 0-.5992-.2376-1.1398-.6233-1.5358L12.6031 5.5681c.1825-.4167-.0069-.9056-.4235-1.0881s-.9056.0069-1.0881.4235L8.8807 9.9172c-.0207 0-.0448 0-.0654 0-1.2155 0-2.2038.9883-2.2038 2.2038s.9883 2.2038 2.2038 2.2038zM6.0605 4.9586a1.1019 1.1019 90 10-2.2038 0 1.1019 1.1019 90 102.2038 0zM3.3057 9.9172a1.1019 1.1019 90 100-2.2038 1.1019 1.1019 90 100 2.2038zm12.121-1.1019a1.1019 1.1019 90 10-2.2038 0 1.1019 1.1019 90 102.2038 0z',
+        action: () => { },
+        id: 'svgIcon',
+    },
+];
+export const AllSeeqActionDropdownVariants = () => {
+    const [openDropdown, setOpenDropdown] = React.useState('');
+    const allSeeqActionDropdowns = (color, isDark) => (_jsxs("div", { className: isDark ? 'tw-dark tw-bg-sq-dark-background' : '', children: [
+            _jsx("div", { className: "tw-p-5 ", children: _jsx(SeeqActionDropdown, { trigger: _jsx(Button, { label: "New", icon: "fa-plus", variant: "theme" }), "data-testid": "homeScreenNewButton", id: "seeqActionDropdownItem", align: "start", alignOffset: 0, placementOffset: 0, variant: "create-workbench", seeqActionDropdownItems: options }, "seeqActionDropdownItem") }), _jsxs("div", { className: "tw-p-5 ", children: [
+                    _jsx("div", { className: "dark:tw-text-white tw-text-xs", children: "New workbench with arrow" }), _jsx(SeeqActionDropdown, { trigger: _jsx(Button, { label: "New", icon: "fa-plus", variant: "theme" }), "data-testid": "homeScreenNewButton", id: "seeqActionDropdownItem", align: "start", alignOffset: 0, hasArrow: true, variant: "create-workbench", placementOffset: 0, seeqActionDropdownItems: options }, "seeqActionDropdownItem")
+                ] }), _jsxs("div", { className: "tw-p-5 ", children: [
+                    _jsx("div", { className: "dark:tw-text-white tw-text-xs", children: "New workbench with center align" }), _jsx(SeeqActionDropdown, { trigger: _jsx(Button, { label: "New", icon: "fa-plus", variant: "theme" }), "data-testid": "homeScreenNewButton", id: "seeqActionDropdownItem", align: "center", alignOffset: 0, hasArrow: true, variant: "create-workbench", placementOffset: 0, seeqActionDropdownItems: options }, "seeqActionDropdownItem")
+                ] }), _jsxs("div", { className: "tw-p-5 ", children: [
+                    _jsx("div", { className: "dark:tw-text-white tw-text-xs", children: "New workbench with disabled button" }), _jsx(SeeqActionDropdown, { trigger: _jsx(Button, { label: "New", icon: "fa-plus", variant: "theme" }), "data-testid": "homeScreenNewButton", id: "seeqActionDropdownItem", align: "center", disabled: true, variant: "create-workbench", alignOffset: 0, hasArrow: true, placementOffset: 0, seeqActionDropdownItems: options }, "seeqActionDropdownItem")
+                ] }), _jsxs("div", { className: "tw-p-5 ", children: [
+                    _jsx("div", { className: "dark:tw-text-white tw-text-xs", children: "View workbench" }), _jsx(SeeqActionDropdown, { trigger: _jsx(Button, { label: "View", icon: "fa-plus", variant: "theme" }), "data-testid": "homeScreenNewButton", id: "seeqActionDropdownItem", align: "center", variant: "view-workbench", alignOffset: 0, placementOffset: 0, seeqActionDropdownItems: options }, "seeqActionDropdownItem")
+                ] }), _jsxs("div", { className: "tw-p-5 ", children: [
+                    _jsx("div", { className: "dark:tw-text-white tw-text-xs", children: "Insert seeq content" }), _jsx(SeeqActionDropdown, { trigger: _jsx(Button, { label: "Insert", icon: "fc-plus", variant: "theme" }), "data-testid": "homeScreenNewButton", id: "seeqActionDropdownItem", align: "center", variant: "insert-seeq-content", alignOffset: 0, placementOffset: 0, seeqActionDropdownItems: options }, "seeqActionDropdownItem")
+                ] })
+        ] }));
+    const renderAllVariations = (color) => (_jsxs("div", { className: "tw-grid tw-grid-cols-2 tw-gap-4 tw-p-4", children: [allSeeqActionDropdowns(color), allSeeqActionDropdowns(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')] })
+        ] }));
+};

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

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

package/dist/src/SeeqActionDropdown/SeeqActionDropdown.test.js

@@ -0,0 +1,72 @@
+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 Icon from '../Icon';
+import SeeqActionDropdown from './SeeqActionDropdown';
+describe('SeeqActionDropdown', () => {
+    const mockOnClick = jest.fn();
+    const testId = 'trigger-icon';
+    class Context {
+        props = {
+            trigger: (_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: 'This is a small dropdown.',
+            tooltipDelay: 0,
+            tooltipPlacement: 'top',
+            variant: 'create-workbench',
+            isHtmlTooltip: false,
+            seeqActionDropdownItems: [
+                { display: 'Orange', icon: 'fc-data-file', action: mockOnClick, enabled: true },
+                { display: 'Mango', icon: 'fc-user-community', action: mockOnClick, enabled: true },
+                { display: 'Guava', icon: 'fc-user-community', action: mockOnClick },
+                { display: 'Banana', icon: 'fc-user-community', action: mockOnClick },
+            ],
+        };
+    }
+    let tc;
+    beforeEach(() => {
+        tc = new Context();
+        jest.clearAllMocks();
+    });
+    const renderSeeqActionDropdown = (props) => render(_jsx(SeeqActionDropdown, { ...props }));
+    const openDropdown = async () => {
+        const popover = screen.getByTestId(testId);
+        await userEvent.click(popover);
+    };
+    test('renders trigger and opens dropdown content on trigger click', async () => {
+        renderSeeqActionDropdown(tc.props);
+        expect(screen.getByTestId('trigger-icon')).toBeInTheDocument();
+        await openDropdown();
+        expect(screen.getByText('Orange')).toBeInTheDocument();
+    });
+    test('renders dividers correctly', async () => {
+        tc.props.seeqActionDropdownItems[1].divider = true;
+        renderSeeqActionDropdown(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 () => {
+        renderSeeqActionDropdown(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 () => {
+        renderSeeqActionDropdown(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;
+        renderSeeqActionDropdown(tc.props);
+        await openDropdown();
+        expect(screen.queryByText('Orange')).not.toBeInTheDocument();
+    });
+});

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

@@ -0,0 +1,159 @@
+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/src/SeeqActionDropdown/SeeqActionDropdown.types.js

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

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

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

package/dist/src/SeeqActionDropdown/index.js

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

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

@@ -0,0 +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>;

package/dist/src/SeeqActionDropdown/variants.js

@@ -0,0 +1,34 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Icon from '../Icon/Icon';
+import { isSvgIcon } from '../utils/svg';
+import SvgIcon from '../SvgIcon/SvgIcon';
+export const SeeqActionDropdownItem = (item) => {
+    let renderIcon = _jsx(_Fragment, {});
+    if (item.icon) {
+        renderIcon = isSvgIcon(item.icon) ? (_jsx(SvgIcon, { icon: item.icon, extraClassNames: 'tw-rounded-[3px] tw-h-8 tw-w-8 tw-p-1 tw-flex tw-justify-center tw-items-center tw-bg-sq-color-dark' +
+                ' dark:tw-text-sq-white tw-text-[22px] tw-text-sq-white ' +
+                item.iconExtraClassNames, ...item })) : (_jsx(Icon, { icon: item.icon, type: "text", extraClassNames: 'tw-rounded-[3px] tw-h-8 tw-w-8 tw-flex tw-justify-center tw-items-center tw-bg-sq-color-dark dark:tw-text-sq-white tw-text-[1.375rem] tw-text-sq-white ' +
+                item.iconExtraClassNames }));
+    }
+    return (_jsxs("div", { className: "tw-flex-col tw-flex tw-p-[10px] tw-pl-5 tw-w-[600px]", children: [
+            _jsxs("div", { className: "tw-flex tw-flex-row tw-gap-2 tw-items-end", children: [renderIcon, _jsx("h4", { className: "tw-text-base tw-font-[600] tw-leading-[20px] mb-0", children: item.display })
+                ] }), _jsx("div", { className: "tw-text-[0.8125rem] tw-font-normal", children: item.text })
+        ] }));
+};
+export const ViewWorkbench = (item) => {
+    let renderIcon = _jsx(_Fragment, {});
+    if (item.icon) {
+        renderIcon = isSvgIcon(item.icon) ? (_jsx(SvgIcon, { icon: item.icon, extraClassNames: 'tw-flex tw-w-5 tw-justify-center tw-items-center tw-text-[1.25rem] dark:tw-text-sq-white' +
+                ' tw-text-sq-text-color ' +
+                item.iconExtraClassNames, type: "default", ...item })) : (_jsx(Icon, { icon: item.icon, type: "text", extraClassNames: 'tw-flex tw-justify-center tw-items-center tw-text-[1.25rem] dark:tw-text-sq-white' +
+                ' tw-text-sq-text-color ' +
+                item.iconExtraClassNames }));
+    }
+    return (_jsx("div", { className: "tw-flex-col tw-flex tw-p-[10px]", children: _jsxs("div", { className: "tw-flex tw-flex-row tw-gap-2 tw-items-end", children: [renderIcon, _jsx("div", { className: "tw-text-[0.8125rem]", children: item.display })
+            ] }) }));
+};
+export const InsertSeeqContent = (item) => {
+    return (_jsxs("div", { className: "tw-flex-col tw-flex tw-justify-start tw-p-[10px] tw-font-normal tw-text-left tw-text-sq-text-color dark:tw-text-sq-dark-text", children: [
+            _jsx("h5", { className: "tw-text-[1rem] tw-font-medium tw-text-sq-color-dark tw-leading-[18px]", children: item.display }), _jsx("div", { className: "tw-text-[0.8125rem] tw-text-sq-text-color dark:tw-text-sq-dark-text !tw-mt-1", children: item.text })
+        ] }));
+};

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

@@ -0,0 +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;

package/dist/src/Select/Select.js

@@ -0,0 +1,171 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import '../styles.css';
+import { createFilter, default as ReactSelect } from 'react-select';
+import CreatableSelect from 'react-select/creatable';
+const baseClasses = ['focus:tw-ring-0', 'disabled:tw-cursor-not-allowed'].join(' ');
+const containerStyles = ['tw-bg-white', 'dark:tw-bg-sq-dark-background'].join(' ');
+const errorClasses = 'tw-border-sq-danger-color';
+const borderColorClasses = ['tw-border-sq-disabled-gray', 'dark:tw-border-sq-dark-disabled-gray'].join(' ');
+const borderStyles = ['tw-border-solid', 'tw-border'].join(' ');
+const borderActiveClasses = [
+    'hover:tw-border-sq-color-dark',
+    'focus-within:tw-border-sq-color-dark',
+    'active:tw-border-sq-color-dark',
+    'dark:hover:tw-border-sq-color-dark-dark',
+    'dark:focus-within:tw-border-sq-color-dark-dark',
+    'dark:active:tw-border-sq-color-dark-dark',
+].join(' ');
+const textStyles = ['tw-text-sq-text-color', 'dark:tw-text-sq-dark-text', 'tw-text-sm'].join(' ');
+const textActiveStyles = [
+    'hover:tw-text-sq-color-dark',
+    'dark:tw-text-sq-dark-disabled-gray',
+    'dark:hover:tw-text-sq-color-dark-dark',
+].join(' ');
+const menuStyles = [
+    'tw-border-solid',
+    'tw-border',
+    'tw-rounded-b',
+    'tw-border-sq-disabled-gray',
+    'dark:tw-border-sq-dark-disabled-gray',
+    'tw-whitespace-nowrap',
+    'tw-min-w-fit',
+    '!tw-z-[9999]',
+].join(' ');
+const menuListStyles = [
+    'tw-rounded-b',
+    'tw-bg-white',
+    'dark:tw-bg-sq-dark-background',
+    'tw-min-w-fit',
+    '!tw-z-[9999]',
+    'specSelectMenu',
+].join(' ');
+const groupHeadingStyles = [
+    'tw-bg-sq-light-gray',
+    'dark:tw-bg-sq-dark-disabled-gray',
+    'tw-text-sq-darkish-gray',
+    'tw-py-1',
+    'tw-px-2.5',
+    'specSelectGroupHeading',
+].join(' ');
+const optionStyles = [
+    'hover:tw-bg-sq-gray-highlight',
+    'hover:tw-cursor-pointer',
+    'dark:hover:tw-bg-sq-gray-highlight-dark',
+    'tw-py-1',
+    'tw-px-2.5',
+    'specSelectOption',
+].join(' ');
+const disabledClasses = ['tw-bg-sq-field-disabled-gray', '!tw-cursor-not-allowed', 'tw-opacity-50'].join(' ');
+const dropDownIndicatorStyles = `tw-text-sq-disabled-gray ${textActiveStyles} specOpenIt`;
+const placeholderStyles = ['tw-text-gray-400', 'dark:tw-text-sq-dark-text-lighter', 'specOpenSelect'].join(' ');
+const multiValueStyles = [
+    'tw-bg-sq-disabled-gray',
+    'dark:tw-bg-sq-multi-gray-dark',
+    'tw-text-sm',
+    'tw-py-0.5',
+    'tw-px-1',
+    'tw-m-0.5',
+    'tw-rounded-sm',
+    'specOpenSelect',
+].join(' ');
+/**
+ * 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".
+ *
+ */
+const Select = ({ options, value, placeholder = 'select', noOptionsMessage = 'no matching options', isSearchable = true, creatable = false, isMulti = false, isClearable = false, closeMenuOnSelect = true, id, inputId, menuPortalTarget, getOptionLabel, getSelectedValueLabel, getOptionValue, onChange, menuIsOpen, menuPlacement = 'auto', extraClassNames, controlClassNames = '', inputGroup, filterConfig, filterOption, small = false, isDisabled = false, showError = false, isLoading = false, formatGroupLabel, onRemove, defaultValue, onMenuOpen, onMenuClose, components, onMenuInputFocus, onInputChange, inputValue, }) => {
+    const getOptionOrSelectedLabel = (option, { context }) => {
+        const getSelectedOptionLabel = getSelectedValueLabel ? getSelectedValueLabel : getOptionLabel;
+        if (getOptionLabel || getSelectedValueLabel) {
+            if (context === 'value') {
+                return getSelectedOptionLabel ? getSelectedOptionLabel(option) : option.label;
+            }
+            else {
+                return getOptionLabel ? getOptionLabel(option) : option.label;
+            }
+        }
+        else {
+            return option.label;
+        }
+    };
+    const interceptOnChange = (newValue, actionMeta) => {
+        if (isMulti && onRemove && actionMeta.action === 'remove-value') {
+            onRemove({ id: actionMeta.removedValue });
+            return;
+        }
+        onChange(newValue);
+    };
+    const props = {
+        id,
+        value,
+        inputId,
+        placeholder,
+        closeMenuOnSelect,
+        blurInputOnSelect: closeMenuOnSelect,
+        isSearchable: creatable ? true : isSearchable,
+        isMulti,
+        isClearable,
+        isLoading,
+        defaultValue,
+        noOptionsMessage: () => noOptionsMessage,
+        menuPortalTarget,
+        menuIsOpen,
+        onChange: interceptOnChange,
+        unstyled: true,
+        menuPlacement,
+        formatOptionLabel: getOptionOrSelectedLabel,
+        formatGroupLabel,
+        getOptionValue,
+        options,
+        isDisabled,
+        onMenuOpen,
+        onMenuClose,
+        components,
+        onMenuInputFocus,
+        onInputChange,
+        inputValue,
+        hideSelectedOptions: isMulti,
+        filterOption: filterOption ? filterOption : filterConfig ? createFilter(filterConfig) : undefined,
+        classNames: {
+            control: ({ menuIsOpen }) => {
+                let border = menuIsOpen ? 'tw-rounded-t-md' : 'tw-rounded-md';
+                // if it's on the left side of the input group make sure the right side is straight and not curved
+                if (inputGroup === 'left') {
+                    border = menuIsOpen ? 'tw-rounded-tl-md' : 'tw-rounded-l-md';
+                }
+                else if (inputGroup === 'right') {
+                    border = menuIsOpen ? 'tw-rounded-tr-md' : 'tw-rounded-r-md';
+                }
+                const appliedClasses = `${borderStyles} ${isDisabled ? '' : borderActiveClasses} ${border}  ${showError ? errorClasses : borderColorClasses} ${small ? 'reactSelectMinHeightSmall' : 'reactSelectMinHeight'} ${controlClassNames}`;
+                return `${appliedClasses} ${baseClasses} ${containerStyles} specSelectControl ${isDisabled ? disabledClasses : ''} ${small ? 'tw-pl-2 tw-pr-1' : 'tw-pl-2.5 tw-pr-1.5'}`;
+            },
+            placeholder: () => placeholderStyles,
+            container: ({ selectProps }) => {
+                const containerBorderStyles = selectProps?.menuIsOpen ? 'tw-rounded-t-md' : 'tw-rounded-md';
+                return `${textStyles} ${extraClassNames} ${containerBorderStyles} !tw-pointer-events-auto`;
+            },
+            input: () => textStyles + ' specSelectInput',
+            menuList: () => menuListStyles,
+            menu: () => menuStyles,
+            menuPortal: () => '!tw-z-[9000]',
+            dropdownIndicator: () => dropDownIndicatorStyles,
+            option: ({ isSelected, isDisabled }) => {
+                let classes = optionStyles;
+                if (isDisabled) {
+                    classes += ' specDisabledOption ';
+                }
+                return isSelected ? classes + ' tw-bg-sq-colored-hover dark:tw-bg-sq-colored-hover-dark' : classes;
+            },
+            singleValue: () => 'specOpenSelect',
+            multiValue: () => multiValueStyles,
+            multiValueRemove: () => 'hover:tw-text-sq-danger-color specSelectMultiValueRemove',
+            clearIndicator: () => 'tw-text-sq-disabled-gray hover:tw-text-sq-danger-color specClearSelect',
+            group: () => 'specSelectGroup',
+            groupHeading: () => groupHeadingStyles,
+        },
+    };
+    return creatable ? _jsx(CreatableSelect, { ...props }) : _jsx(ReactSelect, { ...props });
+};
+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/src/Select/Select.stories.js

@@ -0,0 +1,50 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Select from './Select';
+import TextField from '../TextField';
+export default {
+    title: 'Select',
+};
+export const AllSelectVariants = () => {
+    const options = [
+        { value: 'a', label: 'Chocolate' },
+        { value: 'b', label: 'Strawberry' },
+        { value: 'c', label: 'Vanilla' },
+        { value: 'd', label: 'Rocky Road' },
+        { value: 'e', label: 'Crazy Cow' },
+        { value: 'f', label: 'Almond Joy' },
+        { value: 'g', label: 'All of the above' },
+    ];
+    const colorOptions = [
+        { value: 'h', label: 'pink' },
+        { value: 'i', label: 'purple' },
+        { value: 'j', label: 'green' },
+        { value: 'k', label: 'red' },
+    ];
+    const groupedOptions = [
+        {
+            label: 'Ice Cream Flavors',
+            options: options,
+        },
+        {
+            label: 'Colors',
+            options: colorOptions,
+        },
+    ];
+    const customColorOption = (dropdownProps) => {
+        return _jsx("div", { style: { color: dropdownProps.data.label }, children: dropdownProps.data.label });
+    };
+    const allSelects = () => (_jsxs(_Fragment, { children: [
+            _jsx("div", { className: "tw-p-5", children: _jsx(Select, { id: "hello", onChange: () => { }, options: options, placeholder: "single value" }) }), _jsx("div", { className: "tw-p-5", children: _jsx(Select, { id: "hello", onChange: () => { }, options: options, placeholder: "single value - small", small: true }) }), _jsx("div", { className: "tw-p-5", children: _jsx(Select, { id: "disabled", onChange: () => { }, options: options, placeholder: "disabled", isDisabled: true }) }), _jsx("div", { className: "tw-p-5", children: _jsx(Select, { id: "error", onChange: () => { }, options: options, placeholder: "error", showError: true }) }), _jsx("div", { className: "tw-p-5", children: _jsx(Select, { onChange: () => { }, options: options, placeholder: "stays open", closeMenuOnSelect: false, creatable: true }) }), _jsx("div", { className: "tw-p-5", children: _jsx(Select, { onChange: () => { }, options: groupedOptions, placeholder: "grouped" }) }), _jsx("div", { className: "tw-p-5", children: _jsx(Select, { onChange: () => { }, options: options, creatable: true, placeholder: "create option" }) }), _jsx("div", { className: "tw-p-5", children: _jsx(Select, { onChange: () => { }, options: options, isClearable: true, placeholder: "clearable" }) }), _jsx("div", { className: "tw-p-5", children: _jsx(Select, { onChange: () => { }, options: options, placeholder: "multi-select", isMulti: true, isSearchable: false }) }), _jsx("div", { className: "tw-p-5", children: _jsx(Select, { onChange: () => { }, placeholder: "type to search", options: options, isSearchable: true }) }), _jsxs("div", { className: "tw-p-5 tw-flex tw-flex-row", children: [
+                    _jsx(Select, { onChange: () => { }, placeholder: "type to search", options: options, inputGroup: "left", extraClassNames: "tw-w-[200px] tw-flex-2" }), _jsx(TextField, { extraClassNames: "tw-flex-1 tw-min-w-24", onChange: () => { }, placeholder: "change me", inputGroup: "right" })
+                ] }), _jsx("div", { className: "tw-p-5", children: _jsx(Select, { onChange: () => { }, options: colorOptions, placeholder: "custom option", components: { Option: (dropdownProps) => customColorOption(dropdownProps) } }) }), _jsx("div", { className: "tw-p-5", children: _jsx(Select, { onChange: () => { }, options: colorOptions, placeholder: "custom option", controlClassNames: "tw-border-0", components: { Option: (dropdownProps) => customColorOption(dropdownProps) } }) })
+        ] }));
+    const renderAllVariations = () => (_jsxs(_Fragment, { children: [allSelects(), _jsx("div", { className: "tw-dark tw-bg-sq-dark-background", children: allSelects() })
+        ] }));
+    return (_jsxs("div", { className: "tw-grid tw-grid-cols-4", children: [
+            _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/Select/Select.test.d.ts

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