@seeqdev/qomponents 0.0.72 → 0.0.74

package/dist/index.js

@@ -14069,8 +14069,8 @@ 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
+    React.createElement("div", { className: "tw-select-none tw-fixed tw-w-full tw-h-full tw-opacity-50 tw-inset-0 tw-z-[1009] 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-[1010] 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;
@@ -14101,29 +14101,22 @@ const Modal = ({ titleIcon, title = 'Modal title example', titleSuffixLabel, sub
         let titleIconElement = React.createElement(React.Fragment, null);
         if (titleIcon) {
             if (typeof titleIcon === 'string') {
-                titleIconElement =
-                    React.createElement(Icon, { icon: titleIcon, testId: "modalTitleIcon", extraClassNames: "tw-flex tw-text-xl tw-mt-1" });
+                titleIconElement = (React.createElement(Icon, { icon: titleIcon, testId: "modalTitleIcon", extraClassNames: "tw-flex tw-text-xl tw-mt-1" }));
             }
             else {
                 titleIconElement = React.createElement("div", { className: "tw-mt-1.5" }, titleIcon);
             }
         }
         return (React.createElement(React.Fragment, null,
-            titleIcon && titleIconPosition === 'left' ?
-                React.createElement("div", { className: "tw-flex tw-mr-2" }, titleIconElement) :
-                React.createElement(React.Fragment, null),
+            titleIcon && titleIconPosition === 'left' ? React.createElement("div", { className: "tw-flex tw-mr-2" }, titleIconElement) : React.createElement(React.Fragment, null),
             React.createElement(DialogTitle, { asChild: true }, isTitleEditable ? (React.createElement("div", { className: "tw-flex tw-w-full tw-items-center" },
                 React.createElement(TextField, { extraClassNames: inputExtraClassNames, value: title, type: "text", testId: "modalTitle", onChange: onTitleChanged, placeholder: titlePlaceholder, required: titleRequired, showError: !!titleError }),
-                titleError && React.createElement("p", { className: "tw-text-sq-danger-color tw-min-w-fit tw-pl-2 tw-mb-0" }, titleError))) :
-                customHeader ?? (React.createElement("div", { "data-testid": "modalTitle", className: "modal-title" },
-                    React.createElement("div", { className: "tw-flex tw-items-center" },
-                        React.createElement("h3", null, title),
-                        titleSuffixLabel &&
-                            React.createElement("span", { className: "tw-text-xl tw-pl-0.5" }, titleSuffixLabel)),
-                    subtitle &&
-                        React.createElement("div", { className: "tw-italic tw-text-sm tw-text-left tw-mt-1", "data-testid": "modal-subtitle" }, subtitle)))),
-            titleIcon && titleIconPosition === 'right' ?
-                React.createElement("div", { className: "tw-flex tw-ml-4" }, titleIconElement) : React.createElement(React.Fragment, null)));
+                titleError && React.createElement("p", { className: "tw-text-sq-danger-color tw-min-w-fit tw-pl-2 tw-mb-0" }, titleError))) : (customHeader ?? (React.createElement("div", { "data-testid": "modalTitle", className: "modal-title" },
+                React.createElement("div", { className: "tw-flex tw-items-center" },
+                    React.createElement("h3", null, title),
+                    titleSuffixLabel && React.createElement("span", { className: "tw-text-xl tw-pl-0.5" }, titleSuffixLabel)),
+                subtitle && (React.createElement("div", { className: "tw-italic tw-text-sm tw-text-left tw-mt-1", "data-testid": "modal-subtitle" }, subtitle)))))),
+            titleIcon && titleIconPosition === 'right' ? React.createElement("div", { className: "tw-flex tw-ml-4" }, titleIconElement) : React.createElement(React.Fragment, null)));
     };
     return open ? (React.createElement(Dialog, { open: true, onOpenChange: onClose, modal: keepFocusInsideModal },
         React.createElement(DialogContent, { onPointerDownOutside: (e) => e.preventDefault(), "data-testid": testId, className: classNames(`modalContent tw-w-full !tw-p-0 tw-border-none tw-shadow-none dark:tw-text-sq-dark-text !tw-gap-0`, {
@@ -14140,20 +14133,16 @@ const Modal = ({ titleIcon, title = 'Modal title example', titleSuffixLabel, sub
             }, 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("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"))),
+                !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")))),
             React.createElement(DialogDescription, { className: "modal-body tw-px-6 tw-py-4 tw-overflow-y-auto", asChild: true }, children),
-            !hideFooterButtons && React.createElement(DialogFooter, { className: "modal-footer tw-px-6 tw-py-4" }, modalFooter ??
-                React.createElement("div", { className: "tw-flex tw-w-full tw-justify-between", "data-testid": "modalFooter" },
-                    React.createElement("div", { className: "tw-flex tw-justify-start" }, customButton &&
-                        React.createElement(Button, { label: customButtonLabel, onClick: onClickCustomButton, disabled: disableCustomButton, extraClassNames: "tw-justify-start tw-min-w-[100px]", testId: "customButton", variant: customButtonVariant })),
-                    React.createElement("div", { className: "tw-flex tw-justify-end" },
-                        React.createElement("div", { className: "tw-flex tw-items-center" }, middleFooterSection),
-                        !hideCancelButton &&
-                            React.createElement(DialogClose, { asChild: true },
-                                React.createElement(Button, { label: cancelButtonLabel, extraClassNames: "tw-mr-5 tw-min-w-[100px]", tooltip: cancelButtonTooltip, variant: "outline", stopPropagation: false, testId: "cancelButton" })),
-                        !hideSubmitButton &&
-                            React.createElement(Button, { label: submitButtonLabel, onClick: onSubmit, disabled: disableSubmitButton, variant: "theme", stopPropagation: stopPropagationSubmitButton, tooltip: submitButtonTooltip, testId: "submitButton", extraClassNames: "tw-min-w-[100px]" }))))))) : React.createElement(React.Fragment, null);
+            !hideFooterButtons && (React.createElement(DialogFooter, { className: "modal-footer tw-px-6 tw-py-4" }, modalFooter ?? (React.createElement("div", { className: "tw-flex tw-w-full tw-justify-between", "data-testid": "modalFooter" },
+                React.createElement("div", { className: "tw-flex tw-justify-start" }, customButton && (React.createElement(Button, { label: customButtonLabel, onClick: onClickCustomButton, disabled: disableCustomButton, extraClassNames: "tw-justify-start tw-min-w-[100px]", testId: "customButton", variant: customButtonVariant }))),
+                React.createElement("div", { className: "tw-flex tw-justify-end" },
+                    React.createElement("div", { className: "tw-flex tw-items-center" }, middleFooterSection),
+                    !hideCancelButton && (React.createElement(DialogClose, { asChild: true },
+                        React.createElement(Button, { label: cancelButtonLabel, extraClassNames: "tw-mr-5 tw-min-w-[100px]", tooltip: cancelButtonTooltip, variant: "outline", stopPropagation: false, testId: "cancelButton" }))),
+                    !hideSubmitButton && (React.createElement(Button, { label: submitButtonLabel, onClick: onSubmit, disabled: disableSubmitButton, variant: "theme", stopPropagation: stopPropagationSubmitButton, tooltip: submitButtonTooltip, testId: "submitButton", extraClassNames: "tw-min-w-[100px]" })))))))))) : (React.createElement(React.Fragment, null));
 };
 
 // We have resorted to returning slots directly rather than exposing primitives that can then
@@ -15063,7 +15052,7 @@ 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
+            React__namespace.createElement("div", { "data-testid": containerTestId, className: `${bgStyles$1} ${borderStyles$1} tw-relative tw-z-[1200] 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 },
@@ -16070,7 +16059,7 @@ const ButtonWithDropdown = ({ dropdownItems, triggerIcon, id, extraClassNames, c
             React__namespace.createElement("div", { ...tooltipData, className: `tw-bg-transparent tw-flex tw-flex-col tw-items-center focus-visible:tw-outline-none focus:tw-outline-none focus-within:tw-outline-none ${disabled ? disabledClasses : ''} ${extraClassNames || ''}` }, triggerIcon)),
         React__namespace.createElement($d08ef79370b62062$export$7c6e2c02157bb7d2, { sideOffset: placementOffset, side: placement, align: align, alignOffset: alignOffset, asChild: true, onCloseAutoFocus: (e) => !setFocusOnTriggerOnClose && e.preventDefault(), className: "focus-visible:tw-outline-none tw-outline-none" },
             React__namespace.createElement("div", { "data-testid": containerTestId, className: bgStyles +
-                    ' tw-relative tw-z-[1000] tw-min-w-6 tw-py-2 focus-visible:tw-outline-none tw-outline-none' +
+                    ' tw-relative tw-z-[1200] tw-min-w-6 tw-py-2 focus-visible:tw-outline-none tw-outline-none' +
                     ' data-[state=open]:tw-animate-in data-[state=closed]:tw-animate-out' +
                     ' forceFont data-[side=top]:tw-animate-slideDownAndFade data-[side=right]:tw-animate-slideLeftAndFade data-[side=bottom]:tw-animate-slideUpAndFade data-[side=left]:tw-animate-slideRightAndFade ' +
                     borderStyles },