@seeqdev/qomponents 0.0.132 → 0.0.134

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

package/dist/ToolbarButton/ToolbarButton.stories.js

@@ -1,94 +1,94 @@
-import React from 'react';
-import { ToolbarButton } from './ToolbarButton';
-import Icon from '../Icon';
-import { QTip } from '../Tooltip/Qtip';
-export default {
-    title: 'Toolbar Button',
-};
-export const AllToolbarButtonVariants = () => {
-    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 allToolbarButtons = (isDark) => (React.createElement("div", { className: isDark ? 'tw-dark tw-bg-sq-dark-background' : '' },
-        React.createElement("div", { className: "tw-p-5 " },
-            React.createElement(ToolbarButton, { icon: "fc-y-axis", label: "Popover", testId: "basic-popover1", tooltipText: "This is a small popover.", tooltipOptions: { position: 'top', delay: 0 }, isHtmlTooltip: false, isSmall: true, popoverContent: React.createElement("div", { className: "tw-text-sm dark:tw-text-white" },
-                    React.createElement("p", { className: "tw-bg-gray-200 dark:tw-bg-gray-700 tw-p-2" }, "Flavors"),
-                    options.map((option) => (React.createElement("div", { key: option.value, className: "tw-flex tw-items-center tw-p-2 hover:tw-bg-green-500" },
-                        React.createElement(Icon, { type: "color", color: "green", icon: "fc-check", extraClassNames: "tw-mr-2" }),
-                        React.createElement("span", null, option.label)))),
-                    React.createElement("p", { className: "tw-bg-gray-200 dark:tw-bg-gray-700 tw-p-2" }, "Colors"),
-                    colorOptions.map((option) => (React.createElement("div", { key: option.value, className: "tw-flex tw-items-center tw-p-2" },
-                        React.createElement(Icon, { type: "color", color: "green", icon: "fc-check", extraClassNames: "tw-mr-2" }),
-                        React.createElement("span", null, option.label))))) })),
-        React.createElement("div", { className: "tw-p-5 " },
-            React.createElement(ToolbarButton, { icon: "fc-y-axis", label: "Normal", testId: "basic-popover1", tooltipText: "This is a normal popover.", tooltipOptions: { position: 'top', delay: 0 }, isHtmlTooltip: false, popoverContent: React.createElement("div", { className: "tw-text-sm dark:tw-text-white" },
-                    React.createElement("p", { className: "tw-bg-gray-200 dark:tw-bg-gray-700 tw-p-2" }, "Flavors"),
-                    options.map((option) => (React.createElement("div", { key: option.value, className: "tw-flex tw-items-center tw-p-2 hover:tw-bg-green-500" },
-                        React.createElement(Icon, { type: "color", color: "green", icon: "fc-check", extraClassNames: "tw-mr-2" }),
-                        React.createElement("span", null, option.label)))),
-                    React.createElement("p", { className: "tw-bg-gray-200 dark:tw-bg-gray-700 tw-p-2" }, "Colors"),
-                    colorOptions.map((option) => (React.createElement("div", { key: option.value, className: "tw-flex tw-items-center tw-p-2" },
-                        React.createElement(Icon, { type: "color", color: "green", icon: "fc-check", extraClassNames: "tw-mr-2" }),
-                        React.createElement("span", null, option.label))))) })),
-        React.createElement("div", { className: "tw-p-5 " },
-            React.createElement(ToolbarButton, { icon: "fc-y-axis", label: "With arrow", testId: "basic-popover1", tooltipText: "This is a normal popover.", tooltipOptions: { position: 'top', delay: 0 }, hasArrow: true, isHtmlTooltip: false, popoverContent: React.createElement("div", { className: "tw-text-sm dark:tw-text-white" },
-                    React.createElement("p", { className: "tw-bg-gray-200 dark:tw-bg-gray-700 tw-p-2" }, "Flavors"),
-                    options.map((option) => (React.createElement("div", { key: option.value, className: "tw-flex tw-items-center tw-p-2 hover:tw-bg-green-500" },
-                        React.createElement(Icon, { type: "color", color: "green", icon: "fc-check", extraClassNames: "tw-mr-2" }),
-                        React.createElement("span", null, option.label)))),
-                    React.createElement("p", { className: "tw-bg-gray-200 dark:tw-bg-gray-700 tw-p-2" }, "Colors"),
-                    colorOptions.map((option) => (React.createElement("div", { key: option.value, className: "tw-flex tw-items-center tw-p-2" },
-                        React.createElement(Icon, { type: "color", color: "green", icon: "fc-check", extraClassNames: "tw-mr-2" }),
-                        React.createElement("span", null, option.label))))) })),
-        React.createElement("div", { className: "tw-p-5 " },
-            React.createElement("p", { className: "tw-text-sq-color-dark tw-text-[10px]" }, "Without popup"),
-            React.createElement(ToolbarButton, { icon: "fc-y-axis", label: "Button", testId: "basic-popover3", isHtmlTooltip: false })),
-        React.createElement("div", { className: "tw-p-5 " },
-            React.createElement(ToolbarButton, { icon: "fc-y-axis", label: "Disabled", testId: "basic-popover2", tooltipText: "This is a popover.", tooltipOptions: { position: 'top' }, isHtmlTooltip: false, disabled: true, popoverContent: React.createElement("div", { className: "tw-border tw-border-gray-100 tw-p-2 tw-rounded-sm tw-text-sm dark:tw-bg-sq-dark-background" },
-                    React.createElement("p", { className: "tw-bg-gray-200 dark:tw-bg-gray-700 tw-p-2" }, "Flavors"),
-                    options.map((option) => (React.createElement("div", { key: option.value, className: "tw-flex tw-items-center tw-p-2 hover:tw-bg-green-500" },
-                        React.createElement(Icon, { type: "color", color: "green", icon: "fc-check", extraClassNames: "tw-mr-2" }),
-                        React.createElement("span", null, option.label)))),
-                    React.createElement("p", { className: "tw-bg-gray-200 dark:tw-bg-gray-700 tw-p-2" }, "Colors"),
-                    colorOptions.map((option) => (React.createElement("div", { key: option.value, className: "tw-flex tw-items-center tw-p-2" },
-                        React.createElement(Icon, { type: "color", color: "green", icon: "fc-check", extraClassNames: "tw-mr-2" }),
-                        React.createElement("span", null, option.label))))) })),
-        React.createElement("div", { className: "tw-p-5 " },
-            React.createElement(ToolbarButton, { id: "scatterPlotFlipXY", isActive: false, disabled: true, testId: "scatterPlotFlipXY", label: "", icon: "fc-grab-window", tooltipText: "This is a large disabled popover.", tooltipOptions: { position: 'top' }, extraClassNames: "no-border ml5" })),
-        React.createElement("div", { className: "tw-p-5 " },
-            React.createElement(ToolbarButton, { icon: "fc-y-axis", tooltipText: "This is a large popover icon", tooltipOptions: { position: 'top', delay: 0 }, testId: "basic-popover4", isHtmlTooltip: false })),
-        React.createElement("div", { className: "tw-p-5 " },
-            React.createElement(ToolbarButton, { icon: "fc-y-axis", label: "Active", testId: "basic-popover5", tooltipText: "This is a button.", tooltipOptions: { position: 'top', delay: 0 }, isHtmlTooltip: false, isActive: true })),
-        React.createElement("div", { className: "tw-p-5 " },
-            React.createElement(ToolbarButton, { isPrimaryAnSvg: true, iconHeight: 13, iconWidth: 13, icon: "svgpath:M 19 2.76 L 18.016 4.066 L 7.678 17.765 L 6.745 19 L 5.812 17.765 L 0.984 11.373 L 0 10.067 L 1.867 7.307 L 2.851 8.613 L 6.745 13.771 L 16.149 1.306 L 17.133 0 L 19 2.76 Z", label: "Active", testId: "basic-popover5", tooltipText: "This is a button.", tooltipOptions: { position: 'top', delay: 0 }, isHtmlTooltip: false, isActive: true }))));
-    const renderAllVariations = () => (React.createElement("div", { className: "tw-grid tw-grid-cols-2 tw-gap-4 tw-p-4" },
-        allToolbarButtons(),
-        allToolbarButtons(true)));
-    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 { ToolbarButton } from './ToolbarButton';
+import Icon from '../Icon';
+import { QTip } from '../Tooltip/Qtip';
+export default {
+    title: 'Toolbar Button',
+};
+export const AllToolbarButtonVariants = () => {
+    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 allToolbarButtons = (isDark) => (React.createElement("div", { className: isDark ? 'tw-dark tw-bg-sq-dark-background' : '' },
+        React.createElement("div", { className: "tw-p-5 " },
+            React.createElement(ToolbarButton, { icon: "fc-y-axis", label: "Popover", testId: "basic-popover1", tooltipText: "This is a small popover.", tooltipOptions: { position: 'top', delay: 0 }, isHtmlTooltip: false, isSmall: true, popoverContent: React.createElement("div", { className: "tw-text-sm dark:tw-text-white" },
+                    React.createElement("p", { className: "tw-bg-gray-200 dark:tw-bg-gray-700 tw-p-2" }, "Flavors"),
+                    options.map((option) => (React.createElement("div", { key: option.value, className: "tw-flex tw-items-center tw-p-2 hover:tw-bg-green-500" },
+                        React.createElement(Icon, { type: "color", color: "green", icon: "fc-check", extraClassNames: "tw-mr-2" }),
+                        React.createElement("span", null, option.label)))),
+                    React.createElement("p", { className: "tw-bg-gray-200 dark:tw-bg-gray-700 tw-p-2" }, "Colors"),
+                    colorOptions.map((option) => (React.createElement("div", { key: option.value, className: "tw-flex tw-items-center tw-p-2" },
+                        React.createElement(Icon, { type: "color", color: "green", icon: "fc-check", extraClassNames: "tw-mr-2" }),
+                        React.createElement("span", null, option.label))))) })),
+        React.createElement("div", { className: "tw-p-5 " },
+            React.createElement(ToolbarButton, { icon: "fc-y-axis", label: "Normal", testId: "basic-popover1", tooltipText: "This is a normal popover.", tooltipOptions: { position: 'top', delay: 0 }, isHtmlTooltip: false, popoverContent: React.createElement("div", { className: "tw-text-sm dark:tw-text-white" },
+                    React.createElement("p", { className: "tw-bg-gray-200 dark:tw-bg-gray-700 tw-p-2" }, "Flavors"),
+                    options.map((option) => (React.createElement("div", { key: option.value, className: "tw-flex tw-items-center tw-p-2 hover:tw-bg-green-500" },
+                        React.createElement(Icon, { type: "color", color: "green", icon: "fc-check", extraClassNames: "tw-mr-2" }),
+                        React.createElement("span", null, option.label)))),
+                    React.createElement("p", { className: "tw-bg-gray-200 dark:tw-bg-gray-700 tw-p-2" }, "Colors"),
+                    colorOptions.map((option) => (React.createElement("div", { key: option.value, className: "tw-flex tw-items-center tw-p-2" },
+                        React.createElement(Icon, { type: "color", color: "green", icon: "fc-check", extraClassNames: "tw-mr-2" }),
+                        React.createElement("span", null, option.label))))) })),
+        React.createElement("div", { className: "tw-p-5 " },
+            React.createElement(ToolbarButton, { icon: "fc-y-axis", label: "With arrow", testId: "basic-popover1", tooltipText: "This is a normal popover.", tooltipOptions: { position: 'top', delay: 0 }, hasArrow: true, isHtmlTooltip: false, popoverContent: React.createElement("div", { className: "tw-text-sm dark:tw-text-white" },
+                    React.createElement("p", { className: "tw-bg-gray-200 dark:tw-bg-gray-700 tw-p-2" }, "Flavors"),
+                    options.map((option) => (React.createElement("div", { key: option.value, className: "tw-flex tw-items-center tw-p-2 hover:tw-bg-green-500" },
+                        React.createElement(Icon, { type: "color", color: "green", icon: "fc-check", extraClassNames: "tw-mr-2" }),
+                        React.createElement("span", null, option.label)))),
+                    React.createElement("p", { className: "tw-bg-gray-200 dark:tw-bg-gray-700 tw-p-2" }, "Colors"),
+                    colorOptions.map((option) => (React.createElement("div", { key: option.value, className: "tw-flex tw-items-center tw-p-2" },
+                        React.createElement(Icon, { type: "color", color: "green", icon: "fc-check", extraClassNames: "tw-mr-2" }),
+                        React.createElement("span", null, option.label))))) })),
+        React.createElement("div", { className: "tw-p-5 " },
+            React.createElement("p", { className: "tw-text-sq-color-dark tw-text-[10px]" }, "Without popup"),
+            React.createElement(ToolbarButton, { icon: "fc-y-axis", label: "Button", testId: "basic-popover3", isHtmlTooltip: false })),
+        React.createElement("div", { className: "tw-p-5 " },
+            React.createElement(ToolbarButton, { icon: "fc-y-axis", label: "Disabled", testId: "basic-popover2", tooltipText: "This is a popover.", tooltipOptions: { position: 'top' }, isHtmlTooltip: false, disabled: true, popoverContent: React.createElement("div", { className: "tw-border tw-border-gray-100 tw-p-2 tw-rounded-sm tw-text-sm dark:tw-bg-sq-dark-background" },
+                    React.createElement("p", { className: "tw-bg-gray-200 dark:tw-bg-gray-700 tw-p-2" }, "Flavors"),
+                    options.map((option) => (React.createElement("div", { key: option.value, className: "tw-flex tw-items-center tw-p-2 hover:tw-bg-green-500" },
+                        React.createElement(Icon, { type: "color", color: "green", icon: "fc-check", extraClassNames: "tw-mr-2" }),
+                        React.createElement("span", null, option.label)))),
+                    React.createElement("p", { className: "tw-bg-gray-200 dark:tw-bg-gray-700 tw-p-2" }, "Colors"),
+                    colorOptions.map((option) => (React.createElement("div", { key: option.value, className: "tw-flex tw-items-center tw-p-2" },
+                        React.createElement(Icon, { type: "color", color: "green", icon: "fc-check", extraClassNames: "tw-mr-2" }),
+                        React.createElement("span", null, option.label))))) })),
+        React.createElement("div", { className: "tw-p-5 " },
+            React.createElement(ToolbarButton, { id: "scatterPlotFlipXY", isActive: false, disabled: true, testId: "scatterPlotFlipXY", label: "", icon: "fc-grab-window", tooltipText: "This is a large disabled popover.", tooltipOptions: { position: 'top' }, extraClassNames: "no-border ml5" })),
+        React.createElement("div", { className: "tw-p-5 " },
+            React.createElement(ToolbarButton, { icon: "fc-y-axis", tooltipText: "This is a large popover icon", tooltipOptions: { position: 'top', delay: 0 }, testId: "basic-popover4", isHtmlTooltip: false })),
+        React.createElement("div", { className: "tw-p-5 " },
+            React.createElement(ToolbarButton, { icon: "fc-y-axis", label: "Active", testId: "basic-popover5", tooltipText: "This is a button.", tooltipOptions: { position: 'top', delay: 0 }, isHtmlTooltip: false, isActive: true })),
+        React.createElement("div", { className: "tw-p-5 " },
+            React.createElement(ToolbarButton, { isPrimaryAnSvg: true, iconHeight: 13, iconWidth: 13, icon: "svgpath:M 19 2.76 L 18.016 4.066 L 7.678 17.765 L 6.745 19 L 5.812 17.765 L 0.984 11.373 L 0 10.067 L 1.867 7.307 L 2.851 8.613 L 6.745 13.771 L 16.149 1.306 L 17.133 0 L 19 2.76 Z", label: "Active", testId: "basic-popover5", tooltipText: "This is a button.", tooltipOptions: { position: 'top', delay: 0 }, isHtmlTooltip: false, isActive: true }))));
+    const renderAllVariations = () => (React.createElement("div", { className: "tw-grid tw-grid-cols-2 tw-gap-4 tw-p-4" },
+        allToolbarButtons(),
+        allToolbarButtons(true)));
+    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=ToolbarButton.stories.js.map

package/dist/ToolbarButton/ToolbarButton.test.js

@@ -1,93 +1,93 @@
-import React from 'react';
-import '@testing-library/jest-dom';
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { ToolbarButton } from './ToolbarButton';
-import Icon from '../Icon';
-describe('ToolbarButton', () => {
-    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 popoverContent = (React.createElement("div", { className: "tw-text-sm" },
-        React.createElement("p", { className: "tw-bg-gray-200 tw-p-2" }, "Flavors"),
-        options.map((option) => (React.createElement("div", { key: option.value, className: "tw-flex tw-items-center tw-p-2 hover:tw-bg-green-500" },
-            React.createElement(Icon, { type: "color", color: "green", icon: "fc-check", extraClassNames: "tw-mr-2" }),
-            React.createElement("span", null, option.label)))),
-        React.createElement("p", null, "Colors"),
-        colorOptions.map((option) => (React.createElement("div", { key: option.value, className: "tw-flex tw-items-center tw-p-2" },
-            React.createElement(Icon, { type: "color", color: "green", icon: "fc-check", extraClassNames: "tw-mr-2" }),
-            React.createElement("span", null, option.label))))));
-    const mockOnClick = jest.fn();
-    class Context {
-        testId = 'popoverTestId';
-        label = 'popover label';
-        props = {
-            label: this.label,
-            onClick: mockOnClick,
-            testId: this.testId,
-            icon: 'fc-y-axis',
-            tooltipText: 'This is a popover.',
-            tooltipOptions: { position: 'top', delay: 0 },
-            isHtmlTooltip: false,
-            isSmall: false,
-            popoverContent,
-        };
-    }
-    let tc;
-    beforeEach(() => {
-        tc = new Context();
-        jest.clearAllMocks();
-    });
-    const renderToolbarButton = (props) => render(React.createElement(ToolbarButton, { ...props }));
-    const openPopover = async () => {
-        const popover = screen.getByTestId(tc.testId);
-        await userEvent.click(popover);
-    };
-    it('renders popover icon without label when small', () => {
-        tc.props.isSmall = true;
-        renderToolbarButton(tc.props);
-        const popoverLabel = screen.queryByText(tc.label);
-        expect(popoverLabel).not.toBeInTheDocument();
-    });
-    it('renders popover trigger button', () => {
-        renderToolbarButton(tc.props);
-        expect(screen.getByText(tc.label)).toBeInTheDocument();
-    });
-    it('opens popover on click', async () => {
-        renderToolbarButton(tc.props);
-        await openPopover();
-        expect(screen.getByText(options[2].label)).toBeVisible();
-    });
-    it('renders disabled popover trigger', async () => {
-        renderToolbarButton({ ...tc.props, disabled: true });
-        await openPopover();
-        expect(mockOnClick).not.toHaveBeenCalled();
-    });
-    it('handles click events', async () => {
-        const handleClick = jest.fn();
-        tc.props.onClick = handleClick;
-        const { getByTestId } = renderToolbarButton(tc.props);
-        await userEvent.click(getByTestId(tc.testId));
-        expect(handleClick).toHaveBeenCalled();
-    });
-    it('handles click events within popover and does not close the popover', async () => {
-        renderToolbarButton(tc.props);
-        expect(screen.queryByText(options[4].label)).not.toBeInTheDocument();
-        await openPopover();
-        await userEvent.click(screen.getByText(options[3].label));
-        expect(screen.getByText(options[4].label)).toBeInTheDocument();
-    });
-});
+import React from 'react';
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { ToolbarButton } from './ToolbarButton';
+import Icon from '../Icon';
+describe('ToolbarButton', () => {
+    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 popoverContent = (React.createElement("div", { className: "tw-text-sm" },
+        React.createElement("p", { className: "tw-bg-gray-200 tw-p-2" }, "Flavors"),
+        options.map((option) => (React.createElement("div", { key: option.value, className: "tw-flex tw-items-center tw-p-2 hover:tw-bg-green-500" },
+            React.createElement(Icon, { type: "color", color: "green", icon: "fc-check", extraClassNames: "tw-mr-2" }),
+            React.createElement("span", null, option.label)))),
+        React.createElement("p", null, "Colors"),
+        colorOptions.map((option) => (React.createElement("div", { key: option.value, className: "tw-flex tw-items-center tw-p-2" },
+            React.createElement(Icon, { type: "color", color: "green", icon: "fc-check", extraClassNames: "tw-mr-2" }),
+            React.createElement("span", null, option.label))))));
+    const mockOnClick = jest.fn();
+    class Context {
+        testId = 'popoverTestId';
+        label = 'popover label';
+        props = {
+            label: this.label,
+            onClick: mockOnClick,
+            testId: this.testId,
+            icon: 'fc-y-axis',
+            tooltipText: 'This is a popover.',
+            tooltipOptions: { position: 'top', delay: 0 },
+            isHtmlTooltip: false,
+            isSmall: false,
+            popoverContent,
+        };
+    }
+    let tc;
+    beforeEach(() => {
+        tc = new Context();
+        jest.clearAllMocks();
+    });
+    const renderToolbarButton = (props) => render(React.createElement(ToolbarButton, { ...props }));
+    const openPopover = async () => {
+        const popover = screen.getByTestId(tc.testId);
+        await userEvent.click(popover);
+    };
+    it('renders popover icon without label when small', () => {
+        tc.props.isSmall = true;
+        renderToolbarButton(tc.props);
+        const popoverLabel = screen.queryByText(tc.label);
+        expect(popoverLabel).not.toBeInTheDocument();
+    });
+    it('renders popover trigger button', () => {
+        renderToolbarButton(tc.props);
+        expect(screen.getByText(tc.label)).toBeInTheDocument();
+    });
+    it('opens popover on click', async () => {
+        renderToolbarButton(tc.props);
+        await openPopover();
+        expect(screen.getByText(options[2].label)).toBeVisible();
+    });
+    it('renders disabled popover trigger', async () => {
+        renderToolbarButton({ ...tc.props, disabled: true });
+        await openPopover();
+        expect(mockOnClick).not.toHaveBeenCalled();
+    });
+    it('handles click events', async () => {
+        const handleClick = jest.fn();
+        tc.props.onClick = handleClick;
+        const { getByTestId } = renderToolbarButton(tc.props);
+        await userEvent.click(getByTestId(tc.testId));
+        expect(handleClick).toHaveBeenCalled();
+    });
+    it('handles click events within popover and does not close the popover', async () => {
+        renderToolbarButton(tc.props);
+        expect(screen.queryByText(options[4].label)).not.toBeInTheDocument();
+        await openPopover();
+        await userEvent.click(screen.getByText(options[3].label));
+        expect(screen.getByText(options[4].label)).toBeInTheDocument();
+    });
+});
 //# sourceMappingURL=ToolbarButton.test.js.map

package/dist/ToolbarButton/ToolbarButton.types.js

@@ -1,2 +1,2 @@
-export const toolbarButtonVariants = ['outline', 'theme', 'theme-light', 'warning', 'danger', 'no-border'];
+export const toolbarButtonVariants = ['outline', 'theme', 'theme-light', 'warning', 'danger', 'no-border'];
 //# sourceMappingURL=ToolbarButton.types.js.map

package/dist/ToolbarButton/index.js

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