@seeqdev/qomponents 0.0.83 → 0.0.84

package/dist/ToolbarButton/ToolbarButton.types.d.ts

@@ -39,4 +39,14 @@ export interface ToolbarButtonProps {
     onHide?: () => void;
     /** set to display arrow or not */
     hasArrow?: boolean;
+    /** true if the `icon` string is an svg */
+    isPrimaryAnSvg?: boolean;
+    /** extra class names to be placed on the primary icon */
+    primaryIconExtraClassNames?: string;
+    /** height for the icon */
+    iconHeight?: number;
+    /** width for the icon */
+    iconWidth?: number;
+    /** viewbox for the icon */
+    primaryIconViewbox?: string;
 }

package/dist/index.esm.js

@@ -4561,6 +4561,26 @@ const $cb5cc270b50c6fcd$export$602eac185826482c = $cb5cc270b50c6fcd$export$dd679
 const $cb5cc270b50c6fcd$export$7c6e2c02157bb7d2 = $cb5cc270b50c6fcd$export$d7e1f420b25549ff;
 const $cb5cc270b50c6fcd$export$21b07c8f274aebd5 = $cb5cc270b50c6fcd$export$3152841115e061b2;
 
+const SVG_PATH = 'svgpath:';
+/**
+ * Determines if an icon is SVG
+ *
+ * @param icon - an icon string that will either be an icon class or an SVG path definition (e.g. "fa fa-wrench" or
+ * "svgpath:M 17.0181 0 ...")
+ */
+function isSvgIcon(icon) {
+    return icon.startsWith(SVG_PATH);
+}
+/**
+ * Retrieves the SVG path from an SVG icon
+ *
+ * @param icon - an SVG icon string including path definition (e.g. "svgpath:M 17.0181 0 ...")
+ * @returns the SVG icon path or an empty string if the supplied icon is not SVG
+ */
+function getSvgIconPath(icon) {
+    return isSvgIcon(icon) ? icon.substring(SVG_PATH.length) : '';
+}
+
 const borderStyles$4 = [
     'tw-border-solid',
     'tw-border',
@@ -4594,7 +4614,7 @@ const activeBorderStyles = [
 const bgStyles$3 = ['tw-bg-sq-white', 'dark:tw-bg-sq-dark-background'].join(' ');
 const disabledClasses$4 = ['tw-opacity-50', 'tw-cursor-not-allowed'].join(' ');
 const PopoverContent = React.forwardRef(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (React.createElement($cb5cc270b50c6fcd$export$7c6e2c02157bb7d2, { ref: ref, align: align, sideOffset: sideOffset, ...props, asChild: true })));
-const ToolbarButton = ({ isSmall = false, label, icon, secondIcon, forceSmallIcon = false, tooltipText, id, popoverContent, extraClassNames, testId, tooltipTestId, tooltipOptions, isActive = false, isHtmlTooltip = false, hasArrow = false, disabled = false, onClick, onHide, }) => {
+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 = {
@@ -4614,9 +4634,10 @@ const ToolbarButton = ({ isSmall = false, label, icon, secondIcon, forceSmallIco
         React.createElement($cb5cc270b50c6fcd$export$41fb9f06171c75f4, { 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-[3px]'} ${disabled ? disabledClasses$4 : isActive ? activeBorderStyles : triggerBorderStyles} ${extraClassNames || ''}` },
+            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$4 : isActive ? activeBorderStyles : triggerBorderStyles} ${extraClassNames || ''}` },
                 React.createElement("span", { className: "tw-nowrap" },
-                    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` }),
+                    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)))),