@seeqdev/qomponents 0.0.185 → 0.0.186

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

@@ -1,72 +0,0 @@
-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.js

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

package/dist/src/SeeqActionDropdown/index.js

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

package/dist/src/SeeqActionDropdown/variants.js

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

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

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

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

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

package/dist/src/Select/index.js

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

package/dist/src/Slider/Slider.js

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

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

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

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

package/dist/src/Slider/index.js

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

package/dist/src/SvgIcon/SvgIcon.js

@@ -1,27 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import '../styles.css';
-import { getQTipData } from '../Tooltip/qTip.utilities';
-import { getSvgIconPath } from '../utils/svg';
-/**
- * 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
- */
-const SvgIcon = ({ onClick, icon, color, type = 'default', extraClassNames, viewBox = '0 0 19 19', id, testId, customId, ...tooltipProps }) => {
-    const appliedClassNames = `${onClick ? 'tw-cursor-pointer' : ''} ${extraClassNames} focus:tw-outline-none focus-visible:tw-outline-none 
-  tw-outline-none`;
-    const tooltipData = getQTipData(tooltipProps);
-    const appliedType = type === 'default' ? 'currentColor' : 'rgb(var(--sq-icon))';
-    return (_jsx("div", { onClick: onClick, ...tooltipData, className: `svgContainer ${appliedClassNames}`, children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: `tw-sq-icon dark:tw-text-white`, viewBox: viewBox, fill: color ? color : appliedType, "data-testid": testId, children: _jsx("path", { d: getSvgIconPath(icon) }) }) }));
-};
-export default SvgIcon;