@seeqdev/qomponents 0.0.68 → 0.0.69

package/dist/Button/Button.types.d.ts

@@ -4,9 +4,11 @@ import React from 'react';
 export declare const buttonTypes: readonly ["button", "reset", "submit", "link"];
 export declare const buttonSizes: readonly ["sm", "lg"];
 export declare const buttonVariants: readonly ["outline", "theme", "theme-light", "warning", "danger", "no-border"];
+export declare const iconPositions: string[];
 export type ButtonType = typeof buttonTypes[number];
 export type ButtonSize = typeof buttonSizes[number];
 export type ButtonVariant = typeof buttonVariants[number];
+export type IconPosition = typeof iconPositions[number];
 export interface ButtonProps {
     /** function to call when clicking the button (takes no parameters) */
     onClick?: (e: React.MouseEvent) => void;
@@ -23,10 +25,12 @@ export interface ButtonProps {
     extraClassNames?: string;
     /** icon class to be used if an icon should go before the text (i.e. fc-zoom) */
     icon?: string;
-    /** icon color option (text, white, theme, color, default is "text") */
+    /** icon color option (text, white, theme, color; default is "text") */
     iconStyle?: IconType;
     /** color of the icon if it is custom (required if iconStyle is "color") */
     iconColor?: string;
+    /** where the icon should be positioned relative to the provided text (left or right; default is left) */
+    iconPosition?: IconPosition;
     /** normally we want for Icon to prefix FontAwesome icons with the fa-sharp fa-regular prefix however there are a
      *  select few icons that are not pulled from that set. For those we need to pass specific prefixes instead.*/
     iconPrefix?: string;

package/dist/ButtonWithPopover/ButtonWithPopover.types.d.ts

@@ -45,10 +45,4 @@ export interface ButtonWithPopoverProps extends TooltipComponentProps {
     onInteractOutside?: () => void;
     /** calls the function if pointer down happens outside popover content */
     onPointerDownOutside?: () => void;
-    /** merge trigger button with trigger element */
-    isTriggerAsChild?: boolean;
-    /** should trigger button take full width */
-    shouldTriggerFullWidth?: boolean;
-    /** is popover rendered in a portal */
-    isPortal?: boolean;
 }

package/dist/index.esm.js

@@ -99,7 +99,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',
@@ -163,6 +163,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__default.createElement(Icon, { icon: icon, iconPrefix: iconPrefix, type: iconStyle, color: iconColor, extraClassNames: label ? `${iconClass} ${textClassesByVariantLightTheme[variant]}  ${textClassesByVariantDarkTheme[variant]}` : '', testId: `${id}_spinner` }));
     return (React__default.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);
@@ -171,8 +173,9 @@ const Button = ({ onClick, label, variant = 'outline', type = 'button', size = '
                 e.preventDefault();
             }
         }, className: appliedClasses },
-        icon && (React__default.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() {
@@ -4403,19 +4406,6 @@ const $cb5cc270b50c6fcd$export$7dacb05d26466c3 = /*#__PURE__*/ forwardRef((props
 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__*/ createElement($cb5cc270b50c6fcd$var$PortalProvider, {
-        scope: __scopePopover,
-        forceMount: forceMount
-    }, /*#__PURE__*/ createElement($921a889cee6df7e8$export$99c2b779aa4e8b8b, {
-        present: forceMount || context.open
-    }, /*#__PURE__*/ createElement($f1701beae083dbae$export$602eac185826482c, {
-        asChild: true,
-        container: container
-    }, children)));
-};
 /* -------------------------------------------------------------------------------------------------
  * PopoverContent
  * -----------------------------------------------------------------------------------------------*/ const $cb5cc270b50c6fcd$var$CONTENT_NAME = 'PopoverContent';
@@ -4554,7 +4544,6 @@ const $cb5cc270b50c6fcd$export$3152841115e061b2 = /*#__PURE__*/ forwardRef((prop
 }
 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;
 
@@ -15014,7 +15003,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.useState(false);
@@ -15035,20 +15024,17 @@ const ButtonWithPopover = ({ children, trigger, id, hasArrow, extraTriggerClassN
         }
     };
     React.useEffect(() => () => timeout && clearTimeout(timeout), []);
-    const renderContent = () => {
-        return (React.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.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.createElement($cb5cc270b50c6fcd$export$21b07c8f274aebd5, { 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" }))),
-                children)));
-    };
     const renderPopover = (popoverOpenState) => {
         return (React.createElement($cb5cc270b50c6fcd$export$be92b6f5f03c0fe9, { open: popoverOpenState, defaultOpen: false, onOpenChange: onOpenChange },
-            React.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.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.createElement($cb5cc270b50c6fcd$export$602eac185826482c, null, renderContent()) : renderContent()));
+            React.createElement($cb5cc270b50c6fcd$export$41fb9f06171c75f4, { id: id, className: `tw-border-none`, disabled: disabled },
+                React.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.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.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.createElement($cb5cc270b50c6fcd$export$21b07c8f274aebd5, { 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" }))),
+                    children))));
     };
     return isHoverEnabled ? renderPopover(isHoveredOpen) : renderPopover(isOpen);
 };
@@ -16053,7 +16039,7 @@ const ButtonWithDropdown = ({ dropdownItems, triggerIcon, id, extraClassNames, c
                     if (item.isLabel) {
                         return (React.createElement($d08ef79370b62062$export$b04be29aa201d4f5, { key: (item.label || '') + index, className: item.containerExtraClassNames },
                             item.icon && (React.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.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.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.createElement($d08ef79370b62062$export$d7a01e11500dfb6f, { key: item.label + index },