@seeqdev/qomponents 0.0.183 → 0.0.185

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

@@ -20,11 +20,6 @@ export interface SeeqActionDropdownItems {
      * Use this to customize icon appearance beyond standard styling.
      */
     iconExtraClassNames?: string;
-    /**
-     * Additional CSS classes to apply to the dropdown icon container.
-     * Use this to customize the icon's appearance beyond default Seeq styling.
-     */
-    iconContainerExtraClassNames?: string;
     /**
      * Main display text for the dropdown item.
      * This is the primary text that users see and click on to trigger the action.

package/dist/src/SeeqActionDropdown/SeeqActionDropdown.types.js

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

package/dist/src/SeeqActionDropdown/index.js

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

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.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.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.js

@@ -0,0 +1,176 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import Select from './Select';
+describe('Select', () => {
+    class Context {
+        testId = 'selectTestId';
+        label = 'button label';
+        options = [
+            { label: 'vanilla', value: 'a' },
+            { label: 'chocolate', value: 'b' },
+            { label: 'strawberry', value: 'c' },
+        ];
+        otherOptions = [
+            { label: 'red', value: 'd' },
+            { label: 'green', value: 'e' },
+        ];
+        groupedOptions = [
+            {
+                label: 'Ice Cream Flavors',
+                options: this.options,
+            },
+            {
+                label: 'Colors',
+                options: this.otherOptions,
+            },
+        ];
+        props = {
+            onChange: jest.fn(),
+            options: this.options,
+        };
+    }
+    let tc;
+    beforeEach(() => {
+        tc = new Context();
+    });
+    const openSelect = async () => {
+        const select = document.querySelector(`.specOpenSelect`);
+        await userEvent.click(select);
+    };
+    const renderSelect = (props) => render(_jsx("div", { id: "wrapper", children: _jsx(Select, { ...props }) }));
+    it('renders the select', () => {
+        renderSelect(tc.props);
+        expect(document.querySelector('.specSelectControl')).toBeInTheDocument();
+    });
+    it('displays options', async () => {
+        renderSelect(tc.props);
+        await openSelect();
+        expect(document.querySelectorAll('.specSelectOption')).toHaveLength(3);
+    });
+    it('displays grouped options', async () => {
+        renderSelect({ ...tc.props, options: tc.groupedOptions });
+        await openSelect();
+        expect(document.querySelectorAll('.specSelectOption')).toHaveLength(5);
+        expect(document.querySelectorAll('.specSelectGroupHeading')).toHaveLength(2);
+        expect(document.querySelectorAll('.specSelectGroup')).toHaveLength(2);
+    });
+    it('reflects error state', () => {
+        renderSelect({ ...tc.props, showError: true });
+        expect(document.querySelector('.specSelectControl')).toHaveClass('tw-border-sq-danger-color');
+    });
+    it('reflects custom render function for option', async () => {
+        const getOptionLabel = (option) => (_jsxs("div", { children: [option.label, _jsx("br", {}),
+                "custom formatting applied"] }));
+        renderSelect({ ...tc.props, getOptionLabel });
+        await openSelect();
+        expect(document.querySelectorAll('.specSelectOption')[0]).toHaveTextContent('custom formatting applied');
+    });
+    it('reflects custom render for selected option', async () => {
+        const getSelectedValueLabel = (option) => (_jsxs("div", { children: [option.label, _jsx("br", {}),
+                "the chosen one"] }));
+        renderSelect({ ...tc.props, getSelectedValueLabel });
+        await openSelect();
+        await userEvent.click(screen.getByText(tc.options[0].label));
+        expect(document.querySelectorAll('.specOpenSelect')[0]).toHaveTextContent('the chosen one');
+    });
+    it('renders the provided value as selected', () => {
+        const value = tc.options[1];
+        renderSelect({ ...tc.props, value });
+        expect(document.querySelectorAll('.specOpenSelect')[0]).toHaveTextContent(value.label);
+    });
+    it('renders the provided placeholder', () => {
+        const placeholder = 'choose your favorite flavor';
+        renderSelect({ ...tc.props, placeholder });
+        expect(screen.getByText(placeholder)).toBeInTheDocument();
+    });
+    it('renders the provided noOptionsMessage', async () => {
+        const noOptionsMessage = 'Nothing to see here.';
+        renderSelect({ ...tc.props, noOptionsMessage, options: [] });
+        await openSelect();
+        expect(screen.getByText(noOptionsMessage)).toBeInTheDocument();
+    });
+    it('supports multi selection', async () => {
+        const isMulti = true;
+        renderSelect({ ...tc.props, isMulti });
+        await openSelect();
+        await userEvent.click(screen.getByText(tc.options[0].label));
+        await openSelect();
+        await userEvent.click(screen.getByText(tc.options[1].label));
+        expect(document.querySelectorAll('.specOpenSelect')).toHaveLength(2);
+    });
+    it('renders isClearable', async () => {
+        const isClearable = true;
+        const placeholder = 'no worries - you can clear this.';
+        renderSelect({ ...tc.props, isClearable, placeholder });
+        await openSelect();
+        await userEvent.click(screen.getByText(tc.options[0].label));
+        expect(document.querySelectorAll('.specOpenSelect')[0]).toHaveTextContent(tc.options[0].label);
+        expect(document.querySelector('.specClearSelect')).toBeInTheDocument();
+        await userEvent.click(document.querySelector('.specClearSelect'));
+        expect(document.querySelectorAll('.specOpenSelect')[0]).toHaveTextContent(placeholder);
+    });
+    it('supports menuIsOpen', async () => {
+        const menuIsOpen = true;
+        renderSelect({ ...tc.props, menuIsOpen, menuPortalTarget: document.querySelector('#wrapper') });
+        expect(document.querySelectorAll('.specSelectOption')).toHaveLength(tc.options.length);
+    });
+    it('supports closeMenuOnSelect', async () => {
+        const closeMenuOnSelect = false;
+        renderSelect({ ...tc.props, closeMenuOnSelect });
+        await openSelect();
+        await userEvent.click(screen.getByText(tc.options[1].label));
+        await userEvent.click(screen.getByText(tc.options[2].label));
+        expect(document.querySelectorAll('.specOpenSelect')[0]).toHaveTextContent(tc.options[2].label);
+    });
+    it('removes selected option from multi-select options list', async () => {
+        const closeMenuOnSelect = false;
+        renderSelect({ ...tc.props, isMulti: true, closeMenuOnSelect });
+        await openSelect();
+        await userEvent.click(screen.getByText(tc.options[1].label));
+        await userEvent.click(screen.getByText(tc.options[2].label));
+        expect(document.querySelectorAll('.specSelectOption')).toHaveLength(tc.options.length - 2);
+    });
+    it('calls onChange handler', async () => {
+        const onChange = jest.fn();
+        renderSelect({ ...tc.props, onChange });
+        await openSelect();
+        await userEvent.click(screen.getByText(tc.options[1].label));
+        expect(onChange).toHaveBeenCalledWith(tc.options[1]);
+    });
+    it('includes inputId', async () => {
+        const inputId = 'idMe';
+        renderSelect({ ...tc.props, inputId });
+        expect(document.querySelector(`#${inputId}`)).toBeInTheDocument();
+    });
+    it('supports creating options', async () => {
+        const inputId = 'idMe';
+        const favorite = 'Almond Joy';
+        renderSelect({ ...tc.props, creatable: true, inputId });
+        await openSelect();
+        await userEvent.type(document.querySelector(`#${inputId}`), favorite);
+        expect(screen.getByText(`Create "${favorite}"`)).toBeInTheDocument();
+    });
+    it('supports onMenuOpen', async () => {
+        const onMenuOpen = jest.fn();
+        renderSelect({ ...tc.props, onMenuOpen });
+        await openSelect();
+        expect(onMenuOpen).toHaveBeenCalled();
+    });
+    it('supports onMenuClose', async () => {
+        const onMenuClose = jest.fn();
+        renderSelect({ ...tc.props, onMenuClose });
+        await openSelect();
+        await userEvent.click(screen.getByText(tc.options[0].label));
+        expect(onMenuClose).toHaveBeenCalled();
+    });
+    it('supports custom components', async () => {
+        const components = {
+            DropdownIndicator: () => _jsx("div", { className: "custom", children: "Custom Dropdown" }),
+        };
+        renderSelect({ ...tc.props, components });
+        await openSelect();
+        expect(document.querySelector('.custom')).toBeInTheDocument();
+    });
+});

package/dist/src/Select/Select.types.js

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

package/dist/src/Select/index.js

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

package/dist/src/Slider/Slider.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as RadixSlider from '@radix-ui/react-slider';
+/**
+ * Slider .
+ */
+export const Slider = (props) => {
+    const { onValueChange, onPointerUp, id, value, name, disabled = false, rootExtraClassNames = '', trackExtraClassNames = '', rangeExtraClassNames = '', thumbExtraClassNames = '', step, min, max, } = props;
+    return (_jsxs(RadixSlider.Root, { className: `tw-relative tw-flex tw-h-5 tw-w-full tw-touch-none tw-select-none tw-items-center ${rootExtraClassNames}`, defaultValue: [value], value: [value], onValueChange: (value) => onValueChange && onValueChange(value), onPointerUp: (e) => onPointerUp && onPointerUp(e), name: name, id: id, max: max, min: min, disabled: disabled, step: step, children: [
+            _jsx(RadixSlider.Track, { className: `tw-relative tw-h-[5px] tw-grow tw-rounded-[4px] tw-bg-sq-dark-gray dark:tw-bg-sq-dark-disabled-gray ${trackExtraClassNames}`, children: _jsx(RadixSlider.Range, { className: `tw-absolute tw-h-full tw-rounded-full ${rangeExtraClassNames}` }) }), _jsx(RadixSlider.Thumb, { className: `tw-block tw-h-[15px] tw-w-[15px] tw-rounded-full tw-bg-sq-color-dark active:tw-bg-sq-color-dark-dark focus:outline-none focus-visible:tw-outline-none aria-disabled:tw-bg-sq-dark-gray dark:aria-disabled:tw-bg-sq-dark-disabled-gray tw-transition tw-ease-in-out ${thumbExtraClassNames}`, "aria-disabled": disabled })
+        ] }));
+};

package/dist/src/Slider/Slider.stories.js

@@ -0,0 +1,37 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { Slider } from './Slider';
+import { QTip } from '../Tooltip';
+export default {
+    title: 'Slider',
+};
+export const AllSliders = () => {
+    const [value1, setValue1] = React.useState(0);
+    const [value2, setValue2] = React.useState(0);
+    const renderAllVariations = () => (_jsxs(_Fragment, { children: [
+            _jsxs("div", { className: "tw-p-4 light", children: [
+                    _jsx("div", { className: "tw-p-4", children: _jsx(Slider, { min: 0, max: 10, value: 4 }) }), _jsx("div", { className: "tw-p-4", children: _jsx(Slider, { min: 0, max: 10, value: 10 }) }), _jsx("div", { className: "tw-p-4", children: _jsx(Slider, { value: 0, min: 0, max: 10 }) }), _jsxs("div", { className: "tw-p-4", children: [
+                            _jsx("div", { children: "1 Step" }), _jsx(Slider, { value: value1, min: 0, max: 20, step: 4, onValueChange: (v) => setValue1(v[0]) })
+                        ] }), _jsxs("div", { className: "tw-p-4", children: [
+                            _jsx("div", { children: "10 Steps" }), _jsx(Slider, { value: value2, min: 0, max: 20, step: 10, onValueChange: (v) => setValue2(v[0]) })
+                        ] }), _jsxs("div", { className: "tw-p-4", children: [
+                            _jsx("div", { className: "tw-sq-text-color", children: "Disabled" }), _jsx(Slider, { value: 10, min: 0, max: 20, step: 10, disabled: true })
+                        ] })
+                ] }), _jsxs("div", { className: "tw-p-4 tw-dark tw-bg-sq-dark-background", children: [
+                    _jsx("div", { className: "tw-p-4", children: _jsx(Slider, { min: 0, max: 10, value: 4 }) }), _jsx("div", { className: "tw-p-4", children: _jsx(Slider, { min: 0, max: 10, value: 10 }) }), _jsx("div", { className: "tw-p-4", children: _jsx(Slider, { value: 0, min: 0, max: 10 }) }), _jsxs("div", { className: "tw-p-4", children: [
+                            _jsx("div", { className: "dark:tw-text-white", children: "1 Step" }), _jsx(Slider, { value: value1, min: 0, max: 20, step: 4, onValueChange: (v) => setValue1(v[0]) })
+                        ] }), _jsxs("div", { className: "tw-p-4", children: [
+                            _jsx("div", { className: "dark:tw-text-white", children: "10 Steps" }), _jsx(Slider, { value: value2, min: 0, max: 20, step: 10, onValueChange: (v) => setValue2(v[0]) })
+                        ] }), _jsxs("div", { className: "tw-p-4", children: [
+                            _jsx("div", { className: "dark:tw-text-white", children: "Disabled" }), _jsx(Slider, { value: 10, min: 0, max: 20, step: 10, disabled: 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()] }), _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/Slider/Slider.test.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render } from '@testing-library/react';
+import { Slider } from './Slider';
+describe('Slider Component', () => {
+    const defaultProps = {
+        onValueChange: jest.fn(),
+        onPointerUp: jest.fn(),
+        id: 'test-slider',
+        value: 50,
+        name: 'slider',
+        disabled: false,
+        testId: 'slider',
+        step: 1,
+        min: 0,
+        max: 100,
+    };
+    beforeEach(() => {
+        global.ResizeObserver = jest.fn().mockImplementation(() => {
+            return { observe: jest.fn(), disconnect: jest.fn(), unobserve: jest.fn() };
+        });
+    });
+    it('renders without crashing', () => {
+        const { getByRole } = render(_jsx(Slider, { ...defaultProps }));
+        expect(getByRole('slider')).toBeInTheDocument();
+    });
+    it('is disabled when disabled prop is true', () => {
+        const { getByRole } = render(_jsx(Slider, { ...defaultProps, disabled: true }));
+        const thumb = getByRole('slider');
+        expect(thumb).toHaveAttribute('data-disabled', '');
+    });
+});

package/dist/src/Slider/Slider.types.js

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

package/dist/src/Slider/index.js

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