@seeqdev/qomponents 0.0.69 → 0.0.71

package/dist/index.js

@@ -108,7 +108,7 @@ const Icon = ({ onClick, icon, iconPrefix = undefined, type = 'theme', extraClas
     const fontAwesomePrefix = iconPrefix ? iconPrefix : 'fa-sharp fa-regular';
     const iconPrefixString = icon.startsWith('fc') ? 'fc' : fontAwesomePrefix;
     const style = type === 'color' && color ? { color } : {};
-    const appliedClassNames = `${iconPrefixString} ${icon} ${small ? 'fa-sm' : ''} ${large ? 'fa-lg' : ''} 
+    const appliedClassNames = `${iconPrefixString} ${icon} ${small ? 'fa-sm' : ''} ${large ? 'fa-lg' : ''} 
   ${colorClassesThemeLight[type]} ${colorClassesThemeDark[type]} ${onClick ? 'cursor-pointer' : ''} ${extraClassNames} focus:tw-outline-none focus-visible:tw-outline-none tw-outline-none`;
     const tooltipData = getQTipData(tooltipProps);
     return (React.createElement("i", { className: appliedClassNames, style: style, onClick: onClick, "data-testid": testId, "data-customid": customId, id: id, "data-number": number, ...tooltipData }));
@@ -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, iconPosition = 'left', 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, 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,8 +183,6 @@ 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);
@@ -193,9 +191,8 @@ const Button = ({ onClick, label, variant = 'outline', type = 'button', size = '
                 e.preventDefault();
             }
         }, className: appliedClasses },
-        iconPosition === 'left' && iconElement,
-        label,
-        iconPosition === 'right' && iconElement));
+        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));
 };
 
 function _extends() {
@@ -4426,6 +4423,19 @@ 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';
@@ -4564,6 +4574,7 @@ 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;
 
@@ -4755,13 +4766,13 @@ const Tooltip = ({ position = 'bottom', children, text, delay = DEFAULT_TOOL_TIP
     const arrowBaseClasses = 'before:tw-content-[\'\'] before:tw-absolute before:tw-border-8';
     const centerArrowVertically = 'before:tw-top-1/2 before:-tw-translate-y-1/2';
     const centerArrowHorizontally = 'before:tw-left-1/2 before:-tw-translate-x-1/2';
-    const arrowRight = `${arrowBaseClasses} ${centerArrowVertically} before:tw-right-[100%] before:tw-border-y-transparent 
+    const arrowRight = `${arrowBaseClasses} ${centerArrowVertically} before:tw-right-[100%] before:tw-border-y-transparent 
   before:tw-border-l-transparent before:tw-border-r-black`;
-    const arrowLeft = `${arrowBaseClasses} ${centerArrowVertically} before:tw-left-[100%] before:tw-border-y-transparent
+    const arrowLeft = `${arrowBaseClasses} ${centerArrowVertically} before:tw-left-[100%] before:tw-border-y-transparent
    before:tw-border-l-black before:tw-border-r-transparent`;
-    const arrowBottom = `${arrowBaseClasses} ${centerArrowHorizontally} before:-tw-top-4 before:tw-border-b-black 
+    const arrowBottom = `${arrowBaseClasses} ${centerArrowHorizontally} before:-tw-top-4 before:tw-border-b-black 
   before:tw-border-r-transparent before:tw-border-l-transparent before:tw-border-t-transparent`;
-    const arrowTop = `${arrowBaseClasses} ${centerArrowHorizontally} before:-tw-bottom-4 before:tw-border-b-transparent 
+    const arrowTop = `${arrowBaseClasses} ${centerArrowHorizontally} before:-tw-bottom-4 before:tw-border-b-transparent 
   before:tw-border-t-black before:tw-border-l-transparent before:tw-border-r-transparent`;
     const placements = {
         top: `-tw-top-2 -tw-translate-y-full tw-left-1/2 -tw-translate-x-1/2 ${arrowTop}`,
@@ -4771,7 +4782,7 @@ const Tooltip = ({ position = 'bottom', children, text, delay = DEFAULT_TOOL_TIP
     };
     return (React.createElement("div", { className: "tw-group tw-relative tw-inline-block" },
         children,
-        React.createElement("div", { className: `tw-z-50 tw-whitespace-nowrap tw-hidden group-hover:tw-inline-block group-hover:tw-delay-[${delay}ms] 
+        React.createElement("div", { className: `tw-z-50 tw-whitespace-nowrap tw-hidden group-hover:tw-inline-block group-hover:tw-delay-[${delay}ms] 
         tw-absolute tw-opacity-0 group-hover:tw-opacity-100 tw-rounded tw-bg-black tw-p-2 tw-text-xs tw-text-white ${placements[position]}` }, text)));
 };
 
@@ -13692,7 +13703,7 @@ const multiValueStyles = [
  *  For ease of testing most of the elements of this select can be identified by classNames prefixed with "spec".
  *
  */
-const Select = ({ options, value, placeholder = 'select', noOptionsMessage = 'no matching options', isSearchable = true, creatable = false, isMulti = false, isClearable = false, closeMenuOnSelect = true, id, inputId, menuPortalTarget, getOptionLabel, getSelectedValueLabel, getOptionValue, onChange, menuIsOpen, menuPlacement = 'auto', extraClassNames, inputGroup, filterConfig, filterOption, small = false, isDisabled = false, showError = false, isLoading = false, formatGroupLabel, onRemove, defaultValue, }) => {
+const Select = ({ options, value, placeholder = 'select', noOptionsMessage = 'no matching options', isSearchable = true, creatable = false, isMulti = false, isClearable = false, closeMenuOnSelect = true, id, inputId, menuPortalTarget, getOptionLabel, getSelectedValueLabel, getOptionValue, onChange, menuIsOpen, menuPlacement = 'auto', extraClassNames, inputGroup, filterConfig, filterOption, small = false, isDisabled = false, showError = false, isLoading = false, formatGroupLabel, onRemove, defaultValue, onMenuOpen, onMenuClose, components }) => {
     const getOptionOrSelectedLabel = (option, { context }) => {
         const getSelectedOptionLabel = getSelectedValueLabel ? getSelectedValueLabel : getOptionLabel;
         if (getOptionLabel || getSelectedValueLabel) {
@@ -13737,6 +13748,9 @@ const Select = ({ options, value, placeholder = 'select', noOptionsMessage = 'no
         getOptionValue,
         options,
         isDisabled,
+        onMenuOpen,
+        onMenuClose,
+        components,
         hideSelectedOptions: isMulti,
         filterOption: filterOption ? filterOption : filterConfig ? createFilter(filterConfig) : undefined,
         classNames: {
@@ -14052,9 +14066,9 @@ const Dialog = $5d3850c4d0b4e6c7$export$be92b6f5f03c0fe9;
 const DialogPortal = $5d3850c4d0b4e6c7$export$602eac185826482c;
 const DialogClose = $5d3850c4d0b4e6c7$export$f39c2d165cd861fe;
 const DialogContent = React.forwardRef(({ className, children, ...props }, ref) => (React.createElement(DialogPortal, null,
-    React.createElement("div", { className: "tw-select-none tw-fixed tw-w-full tw-h-full tw-opacity-50 tw-inset-0 tw-z-[1000] tw-bg-sq-dark-background\n    data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0\n    data-[state=open]:fade-in-0 " }),
-    React.createElement($5d3850c4d0b4e6c7$export$7c6e2c02157bb7d2, { ref: ref, className: `tw-fixed tw-left-[50%] tw-top-0 tw-my-6 tw-translate-x-[-50%] tw-z-[1001] tw-grid
-       tw-gap-4 tw-border tw-bg-sq-white dark:tw-bg-sq-dark-background tw-p-6 tw-shadow-lg tw-duration-200
+    React.createElement("div", { className: "tw-select-none tw-fixed tw-w-full tw-h-full tw-opacity-50 tw-inset-0 tw-z-[1000] tw-bg-sq-dark-background\r\n    data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0\r\n    data-[state=open]:fade-in-0 " }),
+    React.createElement($5d3850c4d0b4e6c7$export$7c6e2c02157bb7d2, { ref: ref, className: `tw-fixed tw-left-[50%] tw-top-0 tw-my-6 tw-translate-x-[-50%] tw-z-[1001] tw-grid
+       tw-gap-4 tw-border tw-bg-sq-white dark:tw-bg-sq-dark-background tw-p-6 tw-shadow-lg tw-duration-200
        tw-rounded-lg ${className}`, ...props }, children))));
 DialogContent.displayName = $5d3850c4d0b4e6c7$export$7c6e2c02157bb7d2.displayName;
 const DialogHeader = ({ className, ...props }) => (React.createElement("div", { className: "tw-w-full tw-justify-between" },
@@ -14121,7 +14135,7 @@ const Modal = ({ titleIcon, title = 'Modal title example', titleSuffixLabel, sub
                 'tw-max-w-5xl': size === '5xl',
                 'tw-max-w-6xl': size === '6xl',
             }, dialogClassName) },
-            React.createElement(DialogHeader, { className: "modal-header tw-flex tw-w-full tw-justify-between tw-border-sq-disabled-gray\n          dark:tw-border-sq-dark-disabled-gray tw-border-0 tw-border-b tw-px-6 tw-py-4" },
+            React.createElement(DialogHeader, { className: "modal-header tw-flex tw-w-full tw-justify-between tw-border-sq-disabled-gray\r\n          dark:tw-border-sq-dark-disabled-gray tw-border-0 tw-border-b tw-px-6 tw-py-4" },
                 React.createElement("div", { className: "tw-flex tw-w-full" }, renderTitle()),
                 !hideCloseIcon && React.createElement(DialogClose, { autoFocus: false, className: "[&:has(:focus-visible)]:none tw-opacity-70 tw-bg-transparent hover:tw-opacity-100  close tw-cursor-pointer tw-ml-4", "data-testid": "closeButton" },
                     React.createElement("span", { className: "tw-cursor-pointer" }, "\u00D7"))),
@@ -15023,7 +15037,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, disabled = false, align = 'end', alignOffset = -35, placement = 'bottom', placementOffset = 2, isHoverEnabled = false, hoverOpenDelay = 300, onOpenChange, isOpen, isCloseOnContentClick = false, setFocusOnTriggerOnClose = true, ...tooltipProps }) => {
+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 tooltipData = getQTipData(tooltipProps);
     let timeout;
     const [isHoveredOpen, setIsHoveredOpen] = React__namespace.useState(false);
@@ -15044,17 +15058,20 @@ 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, 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))));
+            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()));
     };
     return isHoverEnabled ? renderPopover(isHoveredOpen) : renderPopover(isOpen);
 };
@@ -16059,7 +16076,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-ml-1" }, item.label)));
+                            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)));
                     }
                     if (Array.isArray(item.subMenuItems) && item.subMenuItems.length > 0) {
                         return (React__namespace.createElement($d08ef79370b62062$export$d7a01e11500dfb6f, { key: item.label + index },