@seeqdev/qomponents 0.0.206 → 0.0.207
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.esm.js +6 -5
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +6 -5
- package/dist/index.js.map +1 -1
- package/dist/styles.css +6 -9
- package/package.json +1 -1
package/dist/index.esm.js
CHANGED
|
@@ -14583,12 +14583,13 @@ var classnames = {exports: {}};
|
|
|
14583
14583
|
var classnamesExports = classnames.exports;
|
|
14584
14584
|
var classNames = /*@__PURE__*/getDefaultExportFromCjs(classnamesExports);
|
|
14585
14585
|
|
|
14586
|
+
const CSS_TRANSITION_DURATION = process.env.NODE_ENV === 'test' ? 0 : 300; // Disable animations during testing
|
|
14586
14587
|
const Dialog = Root$4;
|
|
14587
14588
|
const DialogPortal = Portal$1;
|
|
14588
14589
|
const DialogClose = Close;
|
|
14589
|
-
const DialogContent = React__default.forwardRef(({ className, 'aria-describedby': ariaDescribedBy, children, ...props }, ref) => (jsxs(DialogPortal, { children: [jsx$1("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
|
|
14590
|
-
|
|
14591
|
-
|
|
14590
|
+
const DialogContent = React__default.forwardRef(({ className = '', 'aria-describedby': ariaDescribedBy, children, ...props }, ref) => (jsxs(DialogPortal, { children: [jsx$1("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 tw:data-[state=open]:animate-in tw:data-[state=closed]:animate-out tw:data-[state=closed]:fade-out-0\n tw:data-[state=open]:fade-in-0" }), jsxs(Content$2, { ref: ref, "aria-describedby": ariaDescribedBy, className: `tw:fixed tw:left-[50%] tw:top-0 tw:my-6 tw:translate-x-[-50%] tw:z-[1010] tw:grid
|
|
14591
|
+
tw:gap-4 tw:border tw:bg-sq-white tw:dark:bg-sq-dark-background tw:duration-${CSS_TRANSITION_DURATION}
|
|
14592
|
+
tw:shadow-lg tw:rounded-lg ${className}`, ...props, children: [jsx$1(DialogTitle$1, { className: "tw:hidden" }), children] })] })));
|
|
14592
14593
|
DialogContent.displayName = Content$2.displayName;
|
|
14593
14594
|
const DialogHeader = (props) => (jsx$1("div", { className: "tw:w-full tw:justify-between", children: jsx$1("div", { ...props }) }));
|
|
14594
14595
|
DialogHeader.displayName = 'DialogHeader';
|
|
@@ -14631,12 +14632,12 @@ const Modal = ({ titleIcon, title = 'Modal title example', titleSuffixLabel, sub
|
|
|
14631
14632
|
titleIconElement = (jsx$1(Icon, { icon: titleIcon, testId: "modalTitleIcon", extraClassNames: "tw:flex tw:text-xl tw:mt-1" }));
|
|
14632
14633
|
}
|
|
14633
14634
|
else {
|
|
14634
|
-
titleIconElement = jsx$1("div", { className: "tw:mt-
|
|
14635
|
+
titleIconElement = jsx$1("div", { className: "tw:mt-2", children: titleIcon });
|
|
14635
14636
|
}
|
|
14636
14637
|
}
|
|
14637
14638
|
return (jsxs(Fragment, { children: [titleIcon && titleIconPosition === 'left' ? jsx$1("div", { className: "tw:flex tw:mr-2", children: titleIconElement }) : jsx$1(Fragment, {}), jsx$1(DialogTitle, { asChild: true, children: isTitleEditable ? (jsxs("div", { className: "tw:flex tw:w-full tw:items-center", children: [jsx$1(TextField, { extraClassNames: inputExtraClassNames, value: title, type: "text", testId: "modalTitle", onChange: onTitleChanged, placeholder: titlePlaceholder, required: titleRequired, showError: !!titleError }), titleError && jsx$1("p", { className: "tw:text-sq-danger tw:min-w-fit tw:pl-2 tw:mb-0", children: titleError })] })) : ((customHeader ?? (jsxs("div", { "data-testid": "modalTitle", className: "modal-title", children: [jsxs("div", { className: "tw:flex tw:items-center", children: [jsx$1("h3", { children: title }), titleSuffixLabel && jsx$1("span", { className: "tw:text-xl tw:pl-0.5", children: titleSuffixLabel })] }), subtitle && (jsx$1("div", { className: "tw:italic tw:text-sm tw:text-left tw:mt-1", "data-testid": "modal-subtitle", children: subtitle }))] })))) }), titleIcon && titleIconPosition === 'right' ? jsx$1("div", { className: "tw:flex tw:ml-4", children: titleIconElement }) : jsx$1(Fragment, {})] }));
|
|
14638
14639
|
};
|
|
14639
|
-
return open ? (jsx$1(Dialog, { open: true, onOpenChange: onClose, modal: keepFocusInsideModal, children: jsxs(DialogContent, { onPointerDownOutside: (e) => (onPointerDownOutside ? onPointerDownOutside(e) : e.preventDefault()), onInteractOutside: (e) => (onInteractOutside ? onInteractOutside(e) : e.preventDefault()), "data-testid": testId, "aria-describedby": ariaDescribedBy, className: classNames(`modalContent tw:w-full tw:
|
|
14640
|
+
return open ? (jsx$1(Dialog, { open: true, onOpenChange: onClose, modal: keepFocusInsideModal, children: jsxs(DialogContent, { onPointerDownOutside: (e) => (onPointerDownOutside ? onPointerDownOutside(e) : e.preventDefault()), onInteractOutside: (e) => (onInteractOutside ? onInteractOutside(e) : e.preventDefault()), "data-testid": testId, "aria-describedby": ariaDescribedBy, className: classNames(`modalContent tw:w-full tw:shadow-none tw:dark:text-sq-dark-text tw:gap-0! tw:border-0 tw:dark:border tw:dark:border-gray-500`, {
|
|
14640
14641
|
'tw:max-w-xs': size === 'xs',
|
|
14641
14642
|
'tw:max-w-sm': size === 'sm',
|
|
14642
14643
|
'tw:max-w-md': size === 'md',
|