@seeqdev/qomponents 0.0.108 → 0.0.109

package/dist/TextField/TextField.js

@@ -1,79 +1,79 @@
-import React, { useEffect, useRef, useState } from 'react';
-import '../styles.css';
-import { setValidInputDimension } from '../utils/validateStyleDimension';
-import { getQTipData } from '../Tooltip/qTip.utilities';
-const errorClasses = 'tw-border-sq-danger-color';
-const borderColorClasses = [
-    'tw-border-sq-disabled-gray',
-    'dark:tw-border-sq-dark-disabled-gray',
-    'dark:focus:tw-border-sq-color-dark-dark',
-    'dark:active:tw-border-sq-color-dark-dark',
-    'focus:tw-border-sq-color-dark',
-    'active:tw-border-sq-color-dark',
-].join(' ');
-const baseClasses = 'tw-h-inputs tw-leading-normal tw-outline-none tw-py-1 tw-px-3' +
-    ' disabled:tw-pointer-events-none disabled:tw-bg-sq-light-gray  disabled:dark:tw-bg-sq-dark-disabled-gray' +
-    ' disabled:tw-cursor-not-allowed tw-p-1 tw-border-solid tw-border tw-placeholder-gray-400' +
-    '  dark:tw-placeholder-sq-dark-text-lighter specTextField';
-const darkTheme = 'dark:tw-bg-sq-dark-background dark:tw-text-sq-dark-text disabled:dark:tw-text-sq-dark-text-lighter';
-const lightTheme = 'tw-text-sq-text-color disabled:tw-text-sq-darkish-gray';
-const sizeClasses = {
-    sm: 'tw-text-sm',
-    lg: 'tw-text-xl',
-};
-/**
- * Textfield.
- */
-export const TextField = React.forwardRef((props, ref) => {
-    const { readonly = false, disabled = false, onChange, onKeyUp, onFocus, onBlur, onKeyDown, id, name, size = 'sm', value, placeholder, extraClassNames, testId, type = 'text', inputGroup, step, showError, errorText, min, max, maxLength, minLength, required = false, autoComplete = 'off', inputWidth = undefined, inputHeight = undefined, autoFocus = false, ...tooltipProps } = props;
-    const internalRef = useRef(null);
-    const [cursor, setCursor] = useState(null);
-    const tooltipData = getQTipData(tooltipProps);
-    const setAllRefs = (receivedRef) => {
-        if (ref)
-            ref.current = receivedRef;
-        internalRef.current = receivedRef;
-    };
-    useEffect(() => {
-        const input = internalRef.current;
-        if (input && type !== 'number' && type !== 'email')
-            input.setSelectionRange(cursor, cursor);
-    }, [ref, cursor, value]);
-    const handleChange = (e) => {
-        setCursor(e.target.selectionStart);
-        onChange && onChange(e);
-    };
-    useEffect(() => {
-        /**
-         * we need to change the value only if it's different since the internal state of "input" will change it anyway
-         * this will only be the case when the value has been changed externally via store (undo / redo)
-         */
-        if (value !== null && value !== undefined && value !== internalRef.current?.value && internalRef.current) {
-            // we need to use this method because using the value props directly will switch the input to a "controlled"
-            // component
-            internalRef.current.value = `${value}`;
-        }
-    }, [value]);
-    let borderRadius = 'tw-rounded-sm';
-    if (inputGroup === 'left') {
-        borderRadius = 'tw-rounded-l-sm tw-border-r-0 focus:tw-border-r' + ' active:tw-border-r';
-    }
-    else if (inputGroup === 'right') {
-        borderRadius = 'tw-rounded-r-sm tw-border-l-0 focus:tw-border-l active:tw-border-l';
-    }
-    const appliedClasses = `${baseClasses} ${sizeClasses[size]} ${extraClassNames} ${lightTheme} ${darkTheme} ${borderRadius} ${showError ? errorClasses : borderColorClasses} `;
-    const inputProp = setValidInputDimension(inputWidth, inputHeight)
-        ? {
-            style: setValidInputDimension(inputWidth, inputHeight),
-        }
-        : {};
-    const inputLenghtProp = {};
-    if (maxLength)
-        inputLenghtProp.maxLength = maxLength;
-    if (minLength)
-        inputLenghtProp.minLength = minLength;
-    return (React.createElement(React.Fragment, null,
-        React.createElement("input", { ref: setAllRefs, "data-testid": testId, name: name, id: id, type: type, value: value, className: appliedClasses, placeholder: placeholder, disabled: disabled, readOnly: readonly, autoComplete: autoComplete, onChange: handleChange, onFocus: onFocus, onBlur: onBlur, onKeyDown: onKeyDown, onKeyUp: onKeyUp, step: step, required: required, autoFocus: autoFocus, min: min, max: max, ...inputLenghtProp, ...inputProp, ...tooltipData }),
-        errorText && showError && React.createElement("div", { className: "tw-text-sq-danger-color tw-text-xs tw-mt-1" }, errorText)));
-});
+import React, { useEffect, useRef, useState } from 'react';
+import '../styles.css';
+import { setValidInputDimension } from '../utils/validateStyleDimension';
+import { getQTipData } from '../Tooltip/qTip.utilities';
+const errorClasses = 'tw-border-sq-danger-color';
+const borderColorClasses = [
+    'tw-border-sq-disabled-gray',
+    'dark:tw-border-sq-dark-disabled-gray',
+    'dark:focus:tw-border-sq-color-dark-dark',
+    'dark:active:tw-border-sq-color-dark-dark',
+    'focus:tw-border-sq-color-dark',
+    'active:tw-border-sq-color-dark',
+].join(' ');
+const baseClasses = 'tw-h-inputs tw-leading-normal tw-outline-none tw-py-1 tw-px-3' +
+    ' disabled:tw-pointer-events-none disabled:tw-bg-sq-light-gray  disabled:dark:tw-bg-sq-dark-disabled-gray' +
+    ' disabled:tw-cursor-not-allowed tw-p-1 tw-border-solid tw-border tw-placeholder-gray-400' +
+    '  dark:tw-placeholder-sq-dark-text-lighter specTextField';
+const darkTheme = 'dark:tw-bg-sq-dark-background dark:tw-text-sq-dark-text disabled:dark:tw-text-sq-dark-text-lighter';
+const lightTheme = 'tw-text-sq-text-color disabled:tw-text-sq-darkish-gray';
+const sizeClasses = {
+    sm: 'tw-text-sm',
+    lg: 'tw-text-xl',
+};
+/**
+ * Textfield.
+ */
+export const TextField = React.forwardRef((props, ref) => {
+    const { readonly = false, disabled = false, onChange, onKeyUp, onFocus, onBlur, onKeyDown, id, name, size = 'sm', value, placeholder, extraClassNames, testId, type = 'text', inputGroup, step, showError, errorText, min, max, maxLength, minLength, required = false, autoComplete = 'off', inputWidth = undefined, inputHeight = undefined, autoFocus = false, ...tooltipProps } = props;
+    const internalRef = useRef(null);
+    const [cursor, setCursor] = useState(null);
+    const tooltipData = getQTipData(tooltipProps);
+    const setAllRefs = (receivedRef) => {
+        if (ref)
+            ref.current = receivedRef;
+        internalRef.current = receivedRef;
+    };
+    useEffect(() => {
+        const input = internalRef.current;
+        if (input && type !== 'number' && type !== 'email')
+            input.setSelectionRange(cursor, cursor);
+    }, [ref, cursor, value]);
+    const handleChange = (e) => {
+        setCursor(e.target.selectionStart);
+        onChange && onChange(e);
+    };
+    useEffect(() => {
+        /**
+         * we need to change the value only if it's different since the internal state of "input" will change it anyway
+         * this will only be the case when the value has been changed externally via store (undo / redo)
+         */
+        if (value !== null && value !== undefined && value !== internalRef.current?.value && internalRef.current) {
+            // we need to use this method because using the value props directly will switch the input to a "controlled"
+            // component
+            internalRef.current.value = `${value}`;
+        }
+    }, [value]);
+    let borderRadius = 'tw-rounded-sm';
+    if (inputGroup === 'left') {
+        borderRadius = 'tw-rounded-l-sm tw-border-r-0 focus:tw-border-r' + ' active:tw-border-r';
+    }
+    else if (inputGroup === 'right') {
+        borderRadius = 'tw-rounded-r-sm tw-border-l-0 focus:tw-border-l active:tw-border-l';
+    }
+    const appliedClasses = `${baseClasses} ${sizeClasses[size]} ${extraClassNames} ${lightTheme} ${darkTheme} ${borderRadius} ${showError ? errorClasses : borderColorClasses} `;
+    const inputProp = setValidInputDimension(inputWidth, inputHeight)
+        ? {
+            style: setValidInputDimension(inputWidth, inputHeight),
+        }
+        : {};
+    const inputLenghtProp = {};
+    if (maxLength)
+        inputLenghtProp.maxLength = maxLength;
+    if (minLength)
+        inputLenghtProp.minLength = minLength;
+    return (React.createElement(React.Fragment, null,
+        React.createElement("input", { ref: setAllRefs, "data-testid": testId, name: name, id: id, type: type, value: value, className: appliedClasses, placeholder: placeholder, disabled: disabled, readOnly: readonly, autoComplete: autoComplete, onChange: handleChange, onFocus: onFocus, onBlur: onBlur, onKeyDown: onKeyDown, onKeyUp: onKeyUp, step: step, required: required, autoFocus: autoFocus, min: min, max: max, ...inputLenghtProp, ...inputProp, ...tooltipData }),
+        errorText && showError && React.createElement("div", { className: "tw-text-sq-danger-color tw-text-xs tw-mt-1" }, errorText)));
+});
 //# sourceMappingURL=TextField.js.map

package/dist/TextField/TextField.stories.js

@@ -1,70 +1,70 @@
-import React from 'react';
-import { TextField } from './TextField';
-import { QTip } from '../Tooltip';
-export default {
-    title: 'TextField',
-};
-export const AllTextFields = () => {
-    const renderAllVariations = () => (React.createElement(React.Fragment, null,
-        React.createElement("div", { className: "tw-p-4 light" },
-            React.createElement("div", { className: "tw-p-4" },
-                React.createElement(TextField, { value: "value provided" })),
-            React.createElement("div", { className: "tw-p-4" },
-                React.createElement(TextField, { placeholder: "placeholder text" })),
-            React.createElement("div", { className: "tw-p-4" },
-                React.createElement(TextField, { placeholder: "with error", showError: true })),
-            React.createElement("div", { className: "tw-p-4" },
-                React.createElement(TextField, { placeholder: "with error text", showError: true, errorText: "this is a major test error and it is long on purpose to see its looks" })),
-            React.createElement("div", { className: "tw-p-4" },
-                React.createElement(TextField, { value: "read-only", readonly: true, onFocus: (e) => e.currentTarget.select() })),
-            React.createElement("div", { className: "tw-p-4" },
-                React.createElement(TextField, { value: "disabled", disabled: true, onFocus: (e) => e.currentTarget.select() })),
-            React.createElement("div", { className: "tw-p-4" },
-                React.createElement("div", null, "max value = 10"),
-                React.createElement(TextField, { type: "number", value: 20, max: 10 })),
-            React.createElement("div", { className: "tw-p-4" },
-                React.createElement("div", null, "min value = 2"),
-                React.createElement(TextField, { type: "number", value: 1, min: 2 })),
-            React.createElement("div", { className: "tw-p-4" },
-                React.createElement(TextField, { value: "large", size: "lg" })),
-            React.createElement("div", { className: "tw-p-4" },
-                React.createElement(TextField, { value: "with tooltip", tooltip: "small tooltip" }))),
-        React.createElement("div", { className: "tw-p-4 tw-dark tw-bg-sq-dark-background" },
-            React.createElement("div", { className: "tw-p-4" },
-                React.createElement(TextField, { value: "value provided" })),
-            React.createElement("div", { className: "tw-p-4" },
-                React.createElement(TextField, { placeholder: "placeholder text" })),
-            React.createElement("div", { className: "tw-p-4" },
-                React.createElement(TextField, { placeholder: "with error", showError: true })),
-            React.createElement("div", { className: "tw-p-4" },
-                React.createElement(TextField, { placeholder: "with error text", showError: true, errorText: "this is a major test error and it is long on purpose to see its looks" })),
-            React.createElement("div", { className: "tw-p-4" },
-                React.createElement(TextField, { value: "read-only", readonly: true, onFocus: (e) => e.currentTarget.select() })),
-            React.createElement("div", { className: "tw-p-4" },
-                React.createElement(TextField, { value: "disabled", disabled: true, onFocus: (e) => e.currentTarget.select() })),
-            React.createElement("div", { className: "tw-p-4" },
-                React.createElement("div", { className: "tw-text-sq-color-dark dark:tw-text-sq-color-dark-dark" }, "max value = 10"),
-                React.createElement(TextField, { type: "number", value: 8, max: 10 })),
-            React.createElement("div", { className: "tw-p-4" },
-                React.createElement("div", { className: "tw-text-sq-color-dark dark:tw-text-sq-color-dark-dark" }, "min value = 2"),
-                React.createElement(TextField, { type: "number", value: 10, min: 2 })),
-            React.createElement("div", { className: "tw-p-4" },
-                React.createElement(TextField, { value: "large", size: "lg" })),
-            React.createElement("div", { className: "tw-p-4" },
-                React.createElement(TextField, { value: "with tooltip", tooltip: "small tooltip" })))));
-    return (React.createElement("div", { className: "tw-grid tw-grid-cols-4 tw-gap-4" },
-        React.createElement(QTip, null),
-        React.createElement("div", { className: "color_topic" },
-            React.createElement("b", null, "Topic Colors"),
-            renderAllVariations()),
-        React.createElement("div", { className: "color_analysis" },
-            React.createElement("b", null, "Analysis Colors"),
-            renderAllVariations()),
-        React.createElement("div", { className: "color_datalab" },
-            React.createElement("b", null, "Datalab Colors"),
-            renderAllVariations()),
-        React.createElement("div", { className: "color_vantage" },
-            React.createElement("b", null, "Vantage Colors"),
-            renderAllVariations())));
-};
+import React from 'react';
+import { TextField } from './TextField';
+import { QTip } from '../Tooltip';
+export default {
+    title: 'TextField',
+};
+export const AllTextFields = () => {
+    const renderAllVariations = () => (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: "tw-p-4 light" },
+            React.createElement("div", { className: "tw-p-4" },
+                React.createElement(TextField, { value: "value provided" })),
+            React.createElement("div", { className: "tw-p-4" },
+                React.createElement(TextField, { placeholder: "placeholder text" })),
+            React.createElement("div", { className: "tw-p-4" },
+                React.createElement(TextField, { placeholder: "with error", showError: true })),
+            React.createElement("div", { className: "tw-p-4" },
+                React.createElement(TextField, { placeholder: "with error text", showError: true, errorText: "this is a major test error and it is long on purpose to see its looks" })),
+            React.createElement("div", { className: "tw-p-4" },
+                React.createElement(TextField, { value: "read-only", readonly: true, onFocus: (e) => e.currentTarget.select() })),
+            React.createElement("div", { className: "tw-p-4" },
+                React.createElement(TextField, { value: "disabled", disabled: true, onFocus: (e) => e.currentTarget.select() })),
+            React.createElement("div", { className: "tw-p-4" },
+                React.createElement("div", null, "max value = 10"),
+                React.createElement(TextField, { type: "number", value: 20, max: 10 })),
+            React.createElement("div", { className: "tw-p-4" },
+                React.createElement("div", null, "min value = 2"),
+                React.createElement(TextField, { type: "number", value: 1, min: 2 })),
+            React.createElement("div", { className: "tw-p-4" },
+                React.createElement(TextField, { value: "large", size: "lg" })),
+            React.createElement("div", { className: "tw-p-4" },
+                React.createElement(TextField, { value: "with tooltip", tooltip: "small tooltip" }))),
+        React.createElement("div", { className: "tw-p-4 tw-dark tw-bg-sq-dark-background" },
+            React.createElement("div", { className: "tw-p-4" },
+                React.createElement(TextField, { value: "value provided" })),
+            React.createElement("div", { className: "tw-p-4" },
+                React.createElement(TextField, { placeholder: "placeholder text" })),
+            React.createElement("div", { className: "tw-p-4" },
+                React.createElement(TextField, { placeholder: "with error", showError: true })),
+            React.createElement("div", { className: "tw-p-4" },
+                React.createElement(TextField, { placeholder: "with error text", showError: true, errorText: "this is a major test error and it is long on purpose to see its looks" })),
+            React.createElement("div", { className: "tw-p-4" },
+                React.createElement(TextField, { value: "read-only", readonly: true, onFocus: (e) => e.currentTarget.select() })),
+            React.createElement("div", { className: "tw-p-4" },
+                React.createElement(TextField, { value: "disabled", disabled: true, onFocus: (e) => e.currentTarget.select() })),
+            React.createElement("div", { className: "tw-p-4" },
+                React.createElement("div", { className: "tw-text-sq-color-dark dark:tw-text-sq-color-dark-dark" }, "max value = 10"),
+                React.createElement(TextField, { type: "number", value: 8, max: 10 })),
+            React.createElement("div", { className: "tw-p-4" },
+                React.createElement("div", { className: "tw-text-sq-color-dark dark:tw-text-sq-color-dark-dark" }, "min value = 2"),
+                React.createElement(TextField, { type: "number", value: 10, min: 2 })),
+            React.createElement("div", { className: "tw-p-4" },
+                React.createElement(TextField, { value: "large", size: "lg" })),
+            React.createElement("div", { className: "tw-p-4" },
+                React.createElement(TextField, { value: "with tooltip", tooltip: "small tooltip" })))));
+    return (React.createElement("div", { className: "tw-grid tw-grid-cols-4 tw-gap-4" },
+        React.createElement(QTip, null),
+        React.createElement("div", { className: "color_topic" },
+            React.createElement("b", null, "Topic Colors"),
+            renderAllVariations()),
+        React.createElement("div", { className: "color_analysis" },
+            React.createElement("b", null, "Analysis Colors"),
+            renderAllVariations()),
+        React.createElement("div", { className: "color_datalab" },
+            React.createElement("b", null, "Datalab Colors"),
+            renderAllVariations()),
+        React.createElement("div", { className: "color_vantage" },
+            React.createElement("b", null, "Vantage Colors"),
+            renderAllVariations())));
+};
 //# sourceMappingURL=TextField.stories.js.map

package/dist/TextField/TextField.test.js

@@ -1,39 +1,39 @@
-import React from 'react';
-import '@testing-library/jest-dom';
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { TextField } from './TextField';
-describe('TextField', () => {
-    class Context {
-        testId = 'textFieldTestId';
-        props = {
-            onChange: jest.fn(),
-            testId: this.testId,
-        };
-    }
-    let tc;
-    beforeEach(() => {
-        tc = new Context();
-    });
-    const renderTextField = (props) => render(React.createElement(TextField, { ...props }));
-    it('renders the provided value', () => {
-        const value = 'hello';
-        renderTextField({ ...tc.props, value });
-        expect(screen.getByDisplayValue(value)).toBeInTheDocument();
-    });
-    it('renders the provided placeholder', () => {
-        const placeholder = 'Prompt to enter';
-        renderTextField({ ...tc.props, placeholder });
-        expect(screen.getByPlaceholderText(placeholder)).toBeInTheDocument();
-    });
-    it('calls onChange handler', async () => {
-        renderTextField({ ...tc.props });
-        await userEvent.type(screen.getByTestId(tc.testId), 'trigger');
-        expect(tc.props.onChange).toHaveBeenCalled();
-    });
-    it('autofocuses the textfield', async () => {
-        renderTextField({ ...tc.props, autoFocus: true });
-        expect(screen.getByTestId(tc.testId)).toHaveFocus();
-    });
-});
+import React from 'react';
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { TextField } from './TextField';
+describe('TextField', () => {
+    class Context {
+        testId = 'textFieldTestId';
+        props = {
+            onChange: jest.fn(),
+            testId: this.testId,
+        };
+    }
+    let tc;
+    beforeEach(() => {
+        tc = new Context();
+    });
+    const renderTextField = (props) => render(React.createElement(TextField, { ...props }));
+    it('renders the provided value', () => {
+        const value = 'hello';
+        renderTextField({ ...tc.props, value });
+        expect(screen.getByDisplayValue(value)).toBeInTheDocument();
+    });
+    it('renders the provided placeholder', () => {
+        const placeholder = 'Prompt to enter';
+        renderTextField({ ...tc.props, placeholder });
+        expect(screen.getByPlaceholderText(placeholder)).toBeInTheDocument();
+    });
+    it('calls onChange handler', async () => {
+        renderTextField({ ...tc.props });
+        await userEvent.type(screen.getByTestId(tc.testId), 'trigger');
+        expect(tc.props.onChange).toHaveBeenCalled();
+    });
+    it('autofocuses the textfield', async () => {
+        renderTextField({ ...tc.props, autoFocus: true });
+        expect(screen.getByTestId(tc.testId)).toHaveFocus();
+    });
+});
 //# sourceMappingURL=TextField.test.js.map

package/dist/TextField/TextField.types.js

@@ -1,2 +1,2 @@
-export {};
+export {};
 //# sourceMappingURL=TextField.types.js.map

package/dist/TextField/index.js

@@ -1,2 +1,2 @@
-export { TextField as default } from './TextField';
+export { TextField as default } from './TextField';
 //# sourceMappingURL=index.js.map

package/dist/ToolbarButton/ToolbarButton.js

@@ -1,75 +1,75 @@
-import * as React from 'react';
-import * as PopoverPrimitive from '@radix-ui/react-popover';
-import Icon from '../Icon';
-import { DEFAULT_TOOL_TIP_DELAY } from '../Tooltip/Tooltip.types';
-import { getSvgIconPath } from '../utils/svg';
-const borderStyles = [
-    'tw-border-solid',
-    'tw-border',
-    'tw-rounded-sm',
-    'tw-border-sq-disabled-gray',
-    'dark:tw-border-gray-500',
-].join(' ');
-const triggerBorderStyles = [
-    'tw-border-solid',
-    'tw-border',
-    'tw-rounded-sm',
-    'tw-border-transparent',
-    'hover:tw-border-solid',
-    'hover:tw-border',
-    'hover:tw-rounded-sm',
-    'hover:tw-border-sq-darkish-gray',
-    'active:tw-border-sq-color-dark',
-    'dark:hover:tw-border-sq-color-dark-dark',
-    'dark:focus:tw-border-sq-color-dark-dark',
-    'dark:active:tw-border-sq-color-dark-dark',
-].join(' ');
-const activeBorderStyles = [
-    'active',
-    'tw-border-solid',
-    'tw-border',
-    'tw-rounded-sm',
-    'tw-border-sq-color-dark',
-    'active:tw-border-sq-color-dark',
-    'dark:hover:tw-border-sq-color-dark-dark',
-].join(' ');
-const bgStyles = ['tw-bg-sq-white', 'dark:tw-bg-sq-dark-background'].join(' ');
-const disabledClasses = ['tw-opacity-50', 'tw-cursor-not-allowed'].join(' ');
-const PopoverContent = React.forwardRef(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (React.createElement(PopoverPrimitive.Content, { ref: ref, align: align, sideOffset: sideOffset, ...props, asChild: true })));
-export const ToolbarButton = ({ isSmall = false, label, icon, secondIcon, forceSmallIcon = false, tooltipText, id, popoverContent, extraClassNames, testId, tooltipTestId, tooltipOptions, isActive = false, isHtmlTooltip = false, hasArrow = false, disabled = false, isPrimaryAnSvg = false, primaryIconExtraClassNames = false, iconHeight = 24, iconWidth = 24, primaryIconViewbox = '0 0 24 24', onClick, onHide, }) => {
-    let tooltipData = undefined;
-    if (tooltipText) {
-        tooltipData = {
-            'data-qtip-text': tooltipText,
-            'data-qtip-placement': tooltipOptions?.position,
-            'data-qtip-is-html': isHtmlTooltip,
-            'data-qtip-testid': tooltipTestId,
-            'data-qtip-delay': tooltipOptions?.delay ?? DEFAULT_TOOL_TIP_DELAY,
-        };
-    }
-    const onOpenChange = (open) => {
-        if (!open) {
-            onHide && onHide();
-        }
-    };
-    return (React.createElement(PopoverPrimitive.Root, { defaultOpen: false, onOpenChange: onOpenChange },
-        React.createElement(PopoverPrimitive.Trigger, { id: id, className: `tw-border-none ${isActive ? 'active' : ''}`, disabled: disabled, "data-testid": testId, onClick: (e) => {
-                onClick && onClick(e);
-            } },
-            React.createElement("div", { ...tooltipData, className: `tw-bg-transparent tw-p-0 tw-flex tw-flex-col tw-items-center ${isSmall ? 'tw-py-[1px] tw-px-[5px]' : 'tw-px-2 tw-py-[5px]'} ${disabled ? disabledClasses : isActive ? activeBorderStyles : triggerBorderStyles} ${extraClassNames || ''}` },
-                React.createElement("span", { className: "tw-nowrap" },
-                    isPrimaryAnSvg ? (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", className: `tw-text-sq-text-color dark:tw-text-sq-dark-text ${primaryIconExtraClassNames || ''}`, viewBox: primaryIconViewbox, height: `${iconHeight}px`, width: `${iconWidth}px`, fill: "currentColor", "data-testid": testId },
-                        React.createElement("path", { d: getSvgIconPath(icon) }))) : (React.createElement(Icon, { icon: icon, testId: "firstIcon", type: "text", large: !isSmall && !label && !secondIcon && !forceSmallIcon, extraClassNames: `tw-text-sq-text-color dark:tw-text-sq-dark-text` })),
-                    secondIcon && React.createElement(Icon, { icon: secondIcon, type: "text", testId: "secondIcon" }),
-                    popoverContent ? (React.createElement(Icon, { icon: "fc-arrow-dropdown", extraClassNames: "tw-text-sq-text-color dark:tw-text-sq-dark-text tw-ml-[3px] tw-text-[8px]", type: "text" })) : undefined),
-                !isSmall && (React.createElement("small", { className: "tw-text-sq-text-color dark:tw-text-sq-dark-text tw-text-[10px]" }, label)))),
-        !!popoverContent ? (React.createElement(PopoverContent, { sideOffset: 2, align: "start" },
-            React.createElement("div", { className: bgStyles +
-                    ' tw-relative tw-z-[1000] tw-min-w-6 tw-p-[0.5rem] focus-visible:tw-outline-none tw-outline-none data-[state=open]:animate-in data-[state=closed]:animate-out' +
-                    ' data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2' +
-                    borderStyles },
-                hasArrow && (React.createElement(PopoverPrimitive.Arrow, { asChild: true },
-                    React.createElement("div", { className: " tw-fill-transparent tw-bg-white tw-w-[15px] tw-h-[15px] tw-mt-[-7px] tw-rotate-45 dark:tw-bg-sq-dark-background tw-border-b tw-border-r tw-border-sq-disabled-gray dark:tw-border-gray-500" }))),
-                popoverContent))) : undefined));
-};
+import * as React from 'react';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import Icon from '../Icon';
+import { DEFAULT_TOOL_TIP_DELAY } from '../Tooltip/Tooltip.types';
+import { getSvgIconPath } from '../utils/svg';
+const borderStyles = [
+    'tw-border-solid',
+    'tw-border',
+    'tw-rounded-sm',
+    'tw-border-sq-disabled-gray',
+    'dark:tw-border-gray-500',
+].join(' ');
+const triggerBorderStyles = [
+    'tw-border-solid',
+    'tw-border',
+    'tw-rounded-sm',
+    'tw-border-transparent',
+    'hover:tw-border-solid',
+    'hover:tw-border',
+    'hover:tw-rounded-sm',
+    'hover:tw-border-sq-darkish-gray',
+    'active:tw-border-sq-color-dark',
+    'dark:hover:tw-border-sq-color-dark-dark',
+    'dark:focus:tw-border-sq-color-dark-dark',
+    'dark:active:tw-border-sq-color-dark-dark',
+].join(' ');
+const activeBorderStyles = [
+    'active',
+    'tw-border-solid',
+    'tw-border',
+    'tw-rounded-sm',
+    'tw-border-sq-color-dark',
+    'active:tw-border-sq-color-dark',
+    'dark:hover:tw-border-sq-color-dark-dark',
+].join(' ');
+const bgStyles = ['tw-bg-sq-white', 'dark:tw-bg-sq-dark-background'].join(' ');
+const disabledClasses = ['tw-opacity-50', 'tw-cursor-not-allowed'].join(' ');
+const PopoverContent = React.forwardRef(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (React.createElement(PopoverPrimitive.Content, { ref: ref, align: align, sideOffset: sideOffset, ...props, asChild: true })));
+export const ToolbarButton = ({ isSmall = false, label, icon, secondIcon, forceSmallIcon = false, tooltipText, id, popoverContent, extraClassNames, testId, tooltipTestId, tooltipOptions, isActive = false, isHtmlTooltip = false, hasArrow = false, disabled = false, isPrimaryAnSvg = false, primaryIconExtraClassNames = false, iconHeight = 24, iconWidth = 24, primaryIconViewbox = '0 0 24 24', onClick, onHide, }) => {
+    let tooltipData = undefined;
+    if (tooltipText) {
+        tooltipData = {
+            'data-qtip-text': tooltipText,
+            'data-qtip-placement': tooltipOptions?.position,
+            'data-qtip-is-html': isHtmlTooltip,
+            'data-qtip-testid': tooltipTestId,
+            'data-qtip-delay': tooltipOptions?.delay ?? DEFAULT_TOOL_TIP_DELAY,
+        };
+    }
+    const onOpenChange = (open) => {
+        if (!open) {
+            onHide && onHide();
+        }
+    };
+    return (React.createElement(PopoverPrimitive.Root, { defaultOpen: false, onOpenChange: onOpenChange },
+        React.createElement(PopoverPrimitive.Trigger, { id: id, className: `tw-border-none ${isActive ? 'active' : ''}`, disabled: disabled, "data-testid": testId, onClick: (e) => {
+                onClick && onClick(e);
+            } },
+            React.createElement("div", { ...tooltipData, className: `tw-bg-transparent tw-p-0 tw-flex tw-flex-col tw-items-center ${isSmall ? 'tw-py-[1px] tw-px-[5px]' : 'tw-px-2 tw-py-[5px]'} ${disabled ? disabledClasses : isActive ? activeBorderStyles : triggerBorderStyles} ${extraClassNames || ''}` },
+                React.createElement("span", { className: "tw-nowrap" },
+                    isPrimaryAnSvg ? (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", className: `tw-text-sq-text-color dark:tw-text-sq-dark-text ${primaryIconExtraClassNames || ''}`, viewBox: primaryIconViewbox, height: `${iconHeight}px`, width: `${iconWidth}px`, fill: "currentColor", "data-testid": testId },
+                        React.createElement("path", { d: getSvgIconPath(icon) }))) : (React.createElement(Icon, { icon: icon, testId: "firstIcon", type: "text", large: !isSmall && !label && !secondIcon && !forceSmallIcon, extraClassNames: `tw-text-sq-text-color dark:tw-text-sq-dark-text` })),
+                    secondIcon && React.createElement(Icon, { icon: secondIcon, type: "text", testId: "secondIcon" }),
+                    popoverContent ? (React.createElement(Icon, { icon: "fc-arrow-dropdown", extraClassNames: "tw-text-sq-text-color dark:tw-text-sq-dark-text tw-ml-[3px] tw-text-[8px]", type: "text" })) : undefined),
+                !isSmall && (React.createElement("small", { className: "tw-text-sq-text-color dark:tw-text-sq-dark-text tw-text-[10px]" }, label)))),
+        !!popoverContent ? (React.createElement(PopoverContent, { sideOffset: 2, align: "start" },
+            React.createElement("div", { className: bgStyles +
+                    ' tw-relative tw-z-[1000] tw-min-w-6 tw-p-[0.5rem] focus-visible:tw-outline-none tw-outline-none data-[state=open]:animate-in data-[state=closed]:animate-out' +
+                    ' data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2' +
+                    borderStyles },
+                hasArrow && (React.createElement(PopoverPrimitive.Arrow, { asChild: true },
+                    React.createElement("div", { className: " tw-fill-transparent tw-bg-white tw-w-[15px] tw-h-[15px] tw-mt-[-7px] tw-rotate-45 dark:tw-bg-sq-dark-background tw-border-b tw-border-r tw-border-sq-disabled-gray dark:tw-border-gray-500" }))),
+                popoverContent))) : undefined));
+};
 //# sourceMappingURL=ToolbarButton.js.map