@seeqdev/qomponents 0.0.68 → 0.0.69

package/dist/index.js

@@ -119,7 +119,7 @@ const Icon = ({ onClick, icon, iconPrefix = undefined, type = 'theme', extraClas
  *  - use "variant" to achieve the desired style
  *  - include tooltips and/or icons
  */
-const Button = ({ onClick, label, variant = 'outline', type = 'button', size = 'sm', disabled, extraClassNames, id, testId, stopPropagation = true, tooltip, tooltipOptions, iconStyle = 'text', icon, iconColor, iconPrefix = undefined, preventBlur = false, isHtmlTooltip = false, tooltipTestId, }) => {
+const Button = ({ onClick, label, variant = 'outline', type = 'button', size = 'sm', disabled, extraClassNames, id, testId, stopPropagation = true, tooltip, tooltipOptions, iconStyle = 'text', icon, iconColor, iconPosition = 'left', iconPrefix = undefined, preventBlur = false, isHtmlTooltip = false, tooltipTestId, }) => {
     const baseClasses = 'tw-py-1 tw-px-2.5 tw-rounded-sm focus:tw-ring-0 disabled:tw-pointer-events-none';
     const baseClassesByVariant = {
         'outline': 'disabled:tw-opacity-50 tw-border-solid tw-border',
@@ -183,6 +183,8 @@ const Button = ({ onClick, label, variant = 'outline', type = 'button', size = '
             'data-qtip-delay': tooltipOptions?.delay ?? DEFAULT_TOOL_TIP_DELAY,
         };
     }
+    const iconClass = (iconPosition === 'left' ? 'tw-mr-1' : 'tw-ml-1');
+    const iconElement = icon && (React.createElement(Icon, { icon: icon, iconPrefix: iconPrefix, type: iconStyle, color: iconColor, extraClassNames: label ? `${iconClass} ${textClassesByVariantLightTheme[variant]}  ${textClassesByVariantDarkTheme[variant]}` : '', testId: `${id}_spinner` }));
     return (React.createElement("button", { id: id, ...tooltipData, disabled: disabled, "data-testid": testId, type: type === 'link' || (type === 'submit' && browserIsFirefox) ? 'button' : type, onClick: (e) => {
             stopPropagation && e.stopPropagation();
             onClick && onClick(e);
@@ -191,8 +193,9 @@ const Button = ({ onClick, label, variant = 'outline', type = 'button', size = '
                 e.preventDefault();
             }
         }, className: appliedClasses },
-        icon && (React.createElement(Icon, { icon: icon, iconPrefix: iconPrefix, type: iconStyle, color: iconColor, extraClassNames: label ? `tw-mr-1 ${textClassesByVariantLightTheme[variant]}  ${textClassesByVariantDarkTheme[variant]}` : '', testId: `${id}_spinner` })),
-        label));
+        iconPosition === 'left' && iconElement,
+        label,
+        iconPosition === 'right' && iconElement));
 };
 
 function _extends() {
@@ -4423,19 +4426,6 @@ const $cb5cc270b50c6fcd$export$7dacb05d26466c3 = /*#__PURE__*/ React.forwardRef(
 const [$cb5cc270b50c6fcd$var$PortalProvider, $cb5cc270b50c6fcd$var$usePortalContext] = $cb5cc270b50c6fcd$var$createPopoverContext($cb5cc270b50c6fcd$var$PORTAL_NAME, {
     forceMount: undefined
 });
-const $cb5cc270b50c6fcd$export$dd679ffb4362d2d4 = (props)=>{
-    const { __scopePopover: __scopePopover , forceMount: forceMount , children: children , container: container  } = props;
-    const context = $cb5cc270b50c6fcd$var$usePopoverContext($cb5cc270b50c6fcd$var$PORTAL_NAME, __scopePopover);
-    return /*#__PURE__*/ React.createElement($cb5cc270b50c6fcd$var$PortalProvider, {
-        scope: __scopePopover,
-        forceMount: forceMount
-    }, /*#__PURE__*/ React.createElement($921a889cee6df7e8$export$99c2b779aa4e8b8b, {
-        present: forceMount || context.open
-    }, /*#__PURE__*/ React.createElement($f1701beae083dbae$export$602eac185826482c, {
-        asChild: true,
-        container: container
-    }, children)));
-};
 /* -------------------------------------------------------------------------------------------------
  * PopoverContent
  * -----------------------------------------------------------------------------------------------*/ const $cb5cc270b50c6fcd$var$CONTENT_NAME = 'PopoverContent';
@@ -4574,7 +4564,6 @@ const $cb5cc270b50c6fcd$export$3152841115e061b2 = /*#__PURE__*/ React.forwardRef
 }
 const $cb5cc270b50c6fcd$export$be92b6f5f03c0fe9 = $cb5cc270b50c6fcd$export$5b6b19405a83ff9d;
 const $cb5cc270b50c6fcd$export$41fb9f06171c75f4 = $cb5cc270b50c6fcd$export$7dacb05d26466c3;
-const $cb5cc270b50c6fcd$export$602eac185826482c = $cb5cc270b50c6fcd$export$dd679ffb4362d2d4;
 const $cb5cc270b50c6fcd$export$7c6e2c02157bb7d2 = $cb5cc270b50c6fcd$export$d7e1f420b25549ff;
 const $cb5cc270b50c6fcd$export$21b07c8f274aebd5 = $cb5cc270b50c6fcd$export$3152841115e061b2;
 
@@ -15034,7 +15023,7 @@ const borderStyles$1 = [
     'dark:tw-border-gray-500',
 ].join(' ');
 const disabledClasses$1 = ['tw-opacity-50', 'tw-cursor-not-allowed'].join(' ');
-const ButtonWithPopover = ({ children, trigger, id, hasArrow, extraTriggerClassNames, extraPopoverClassNames, containerTestId, onInteractOutside, onPointerDownOutside, isTriggerAsChild = false, shouldTriggerFullWidth = false, disabled = false, align = 'end', alignOffset = -35, placement = 'bottom', placementOffset = 2, isHoverEnabled = false, hoverOpenDelay = 300, onOpenChange, isOpen, isCloseOnContentClick = false, setFocusOnTriggerOnClose = true, isPortal = false, ...tooltipProps }) => {
+const ButtonWithPopover = ({ children, trigger, id, hasArrow, extraTriggerClassNames, extraPopoverClassNames, containerTestId, onInteractOutside, onPointerDownOutside, disabled = false, align = 'end', alignOffset = -35, placement = 'bottom', placementOffset = 2, isHoverEnabled = false, hoverOpenDelay = 300, onOpenChange, isOpen, isCloseOnContentClick = false, setFocusOnTriggerOnClose = true, ...tooltipProps }) => {
     const tooltipData = getQTipData(tooltipProps);
     let timeout;
     const [isHoveredOpen, setIsHoveredOpen] = React__namespace.useState(false);
@@ -15055,20 +15044,17 @@ const ButtonWithPopover = ({ children, trigger, id, hasArrow, extraTriggerClassN
         }
     };
     React__namespace.useEffect(() => () => timeout && clearTimeout(timeout), []);
-    const renderContent = () => {
-        return (React__namespace.createElement($cb5cc270b50c6fcd$export$7c6e2c02157bb7d2, { sideOffset: placementOffset, align: align, side: placement, onInteractOutside: onInteractOutside, onPointerDownOutside: onPointerDownOutside, alignOffset: isHoverEnabled ? -10 : alignOffset, asChild: true, onClick: () => isCloseOnContentClick && onOpenChange && onOpenChange(false), className: "focus-visible:tw-outline-none tw-outline-none tw-w-full tw-h-full" },
-            React__namespace.createElement("div", { "data-testid": containerTestId, className: `${bgStyles$1} ${borderStyles$1} tw-relative tw-z-[1000] tw-min-w-6 focus-visible:tw-outline-none tw-outline-none data-[state=open]:tw-animate-in data-[state=closed]:tw-animate-out
-         data-[side=top]:tw-animate-slideDownAndFade data-[side=right]:tw-animate-slideLeftAndFade data-[side=bottom]:tw-animate-slideUpAndFade data-[side=left]:tw-animate-slideRightAndFade tw-text-sq-text-color
-        ${extraPopoverClassNames || ''}` },
-                hasArrow && (React__namespace.createElement($cb5cc270b50c6fcd$export$21b07c8f274aebd5, { asChild: true },
-                    React__namespace.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" }))),
-                children)));
-    };
     const renderPopover = (popoverOpenState) => {
         return (React__namespace.createElement($cb5cc270b50c6fcd$export$be92b6f5f03c0fe9, { open: popoverOpenState, defaultOpen: false, onOpenChange: onOpenChange },
-            React__namespace.createElement($cb5cc270b50c6fcd$export$41fb9f06171c75f4, { id: id, asChild: isTriggerAsChild, className: `focus-visible:tw-outline-none tw-outline-none ${shouldTriggerFullWidth ? 'tw-w-full tw-h-full' : ''}`, disabled: disabled },
-                React__namespace.createElement("div", { ...tooltipData, onMouseOver: onHoverStart, onMouseOut: onHoverEnd, className: `tw-bg-transparent focus-visible:tw-outline-none tw-outline-none ${disabled ? disabledClasses$1 : ''} ${shouldTriggerFullWidth ? 'tw-flex tw-flex-col tw-items-center tw-justify-center' : 'inline'} ${extraTriggerClassNames || ''}` }, trigger)),
-            isPortal ? React__namespace.createElement($cb5cc270b50c6fcd$export$602eac185826482c, null, renderContent()) : renderContent()));
+            React__namespace.createElement($cb5cc270b50c6fcd$export$41fb9f06171c75f4, { id: id, className: `tw-border-none`, disabled: disabled },
+                React__namespace.createElement("div", { ...tooltipData, onMouseOver: onHoverStart, onMouseOut: onHoverEnd, className: `tw-bg-transparent tw-flex tw-flex-col tw-items-center tw-justify-center focus-visible:tw-outline-none tw-outline-none ${disabled ? disabledClasses$1 : ''} ${extraTriggerClassNames || ''}` }, trigger)),
+            React__namespace.createElement($cb5cc270b50c6fcd$export$7c6e2c02157bb7d2, { sideOffset: placementOffset, align: align, side: placement, onInteractOutside: onInteractOutside, onPointerDownOutside: onPointerDownOutside, alignOffset: isHoverEnabled ? -10 : alignOffset, asChild: true, onClick: () => isCloseOnContentClick && onOpenChange && onOpenChange(false), className: "focus-visible:tw-outline-none tw-outline-none" },
+                React__namespace.createElement("div", { "data-testid": containerTestId, className: `${bgStyles$1} ${borderStyles$1} tw-relative tw-z-[1000] tw-min-w-6 focus-visible:tw-outline-none tw-outline-none data-[state=open]:tw-animate-in data-[state=closed]:tw-animate-out
+             data-[side=top]:tw-animate-slideDownAndFade data-[side=right]:tw-animate-slideLeftAndFade data-[side=bottom]:tw-animate-slideUpAndFade data-[side=left]:tw-animate-slideRightAndFade tw-text-sq-text-color
+            ${extraPopoverClassNames || ''}` },
+                    hasArrow && (React__namespace.createElement($cb5cc270b50c6fcd$export$21b07c8f274aebd5, { asChild: true },
+                        React__namespace.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" }))),
+                    children))));
     };
     return isHoverEnabled ? renderPopover(isHoveredOpen) : renderPopover(isOpen);
 };
@@ -16073,7 +16059,7 @@ const ButtonWithDropdown = ({ dropdownItems, triggerIcon, id, extraClassNames, c
                     if (item.isLabel) {
                         return (React__namespace.createElement($d08ef79370b62062$export$b04be29aa201d4f5, { key: (item.label || '') + index, className: item.containerExtraClassNames },
                             item.icon && (React__namespace.createElement(Icon, { icon: item.icon, testId: item.iconTestId, type: "text", color: item.iconColor, extraClassNames: "tw-text-sq-text-color dark:tw-text-sq-white tw-w-[18px]" })),
-                            React__namespace.createElement("div", { "data-testid": item.labelTestId, className: "tw-text-[13px] tw-text-sq-text-color dark:tw-text-sq-white tw-ml-1" }, item.label)));
+                            React__namespace.createElement("div", { "data-testid": item.labelTestId, className: "tw-text-[13px] tw-ml-1" }, item.label)));
                     }
                     if (Array.isArray(item.subMenuItems) && item.subMenuItems.length > 0) {
                         return (React__namespace.createElement($d08ef79370b62062$export$d7a01e11500dfb6f, { key: item.label + index },