@pagamio/frontend-commons-lib 0.8.344 → 0.8.346

package/lib/components/ui/Modal.js

@@ -27,6 +27,6 @@ import Button from './Button';
  * ```
  */
 const Modal = ({ title, children, isOpen, onClose, size = 'md', dismissible = false, primaryButton, secondaryButton, headerContent, footerContent, className, ...rest }) => {
-    return (_jsxs(FlowbiteModal, { show: isOpen, onClose: onClose, size: size, dismissible: dismissible, className: cn('max-h-[90vh] mt-16 md:mt-0 md:max-h-full', className), ...rest, children: [_jsxs("div", { className: cn('flex items-center justify-between rounded-t border-b border-gray-200 p-4 dark:border-gray-600', !(title ?? headerContent) && 'border-b-0 pb-2'), children: [_jsx("div", { className: "text-xl font-semibold text-gray-900 dark:text-white", children: headerContent ?? title ?? null }), _jsxs("button", { type: "button", "aria-label": "Close", onClick: onClose, className: "ml-auto inline-flex items-center rounded-lg bg-transparent p-1.5 text-sm text-gray-400 hover:bg-gray-200 hover:text-gray-900 dark:hover:bg-gray-600 dark:hover:text-white", children: [_jsx(HiX, { className: "h-5 w-5" }), _jsx("span", { className: "sr-only", children: "Close modal" })] })] }), _jsx(FlowbiteModalBody, { children: _jsx("div", { className: "space-y-4", children: children }) }), (primaryButton || secondaryButton || footerContent) && (_jsx(FlowbiteModalFooter, { children: footerContent ?? (_jsxs("div", { className: "flex w-full justify-end gap-2", children: [secondaryButton && (_jsx(Button, { onClick: secondaryButton.onClick, variant: secondaryButton.variant ?? 'outline-primary', disabled: secondaryButton.loading ?? secondaryButton.disabled, className: secondaryButton.variant, children: secondaryButton.label })), primaryButton && (_jsx(Button, { onClick: primaryButton.onClick, variant: primaryButton.variant ?? 'primary', disabled: primaryButton.loading ?? primaryButton.disabled, className: primaryButton.variant, children: primaryButton.label }))] })) }))] }));
+    return (_jsxs(FlowbiteModal, { show: isOpen, onClose: onClose, size: size, dismissible: dismissible, className: cn('!z-[200] max-h-[90vh] mt-16 md:mt-0 md:max-h-full', className), ...rest, children: [_jsxs("div", { className: cn('flex items-center justify-between rounded-t border-b border-gray-200 p-4 dark:border-gray-600', !(title ?? headerContent) && 'border-b-0 pb-2'), children: [_jsx("div", { className: "text-xl font-semibold text-gray-900 dark:text-white", children: headerContent ?? title ?? null }), _jsxs("button", { type: "button", "aria-label": "Close", onClick: onClose, className: "ml-auto inline-flex items-center rounded-lg bg-transparent p-1.5 text-sm text-gray-400 hover:bg-gray-200 hover:text-gray-900 dark:hover:bg-gray-600 dark:hover:text-white", children: [_jsx(HiX, { className: "h-5 w-5" }), _jsx("span", { className: "sr-only", children: "Close modal" })] })] }), _jsx(FlowbiteModalBody, { children: _jsx("div", { className: "space-y-4", children: children }) }), (primaryButton || secondaryButton || footerContent) && (_jsx(FlowbiteModalFooter, { children: footerContent ?? (_jsxs("div", { className: "flex w-full justify-end gap-2", children: [secondaryButton && (_jsx(Button, { onClick: secondaryButton.onClick, variant: secondaryButton.variant ?? 'outline-primary', disabled: secondaryButton.loading ?? secondaryButton.disabled, className: secondaryButton.variant, children: secondaryButton.label })), primaryButton && (_jsx(Button, { onClick: primaryButton.onClick, variant: primaryButton.variant ?? 'primary', disabled: primaryButton.loading ?? primaryButton.disabled, className: primaryButton.variant, children: primaryButton.label }))] })) }))] }));
 };
 export default Modal;

package/lib/pagamio-drawer/components/DrawerContent.js

@@ -8,32 +8,38 @@ import { useFormPersistence } from '../../form-engine/hooks/useFormPersistence';
 const DrawerContent = ({ fields, onSubmit, isOpen, initialValues, submitButtonText = 'Submit', cancelButtonText = 'Cancel', showForm = true, showDrawerButtons = true, handleCloseDrawer, onFieldUpdate, onFieldChange, children, updateFieldOptions, updateFieldLabel, setFieldHidden, addField, updateFieldValidation, processInitialFieldUpdates, processingDependencyRef, pendingUpdatesRef, persistenceKey, clearOnClose = false, isDirtyRef, cancelRef, }) => {
     const { saveFormData, restoreFormData, clearPersistedData, hasPersistedData } = useFormPersistence(persistenceKey);
     const { addToast } = useToast();
-    // Build a `{ fieldName: '' }` baseline so every registered input starts
-    // controlled (with a defined string value). Without this, RHF defaults
-    // unspecified fields to `undefined`, which React flags as a "controlled
-    // → uncontrolled" transition the moment we reset, and Radix Select keeps
-    // showing its previously-selected display value.
+    // For clearOnClose drawers, seed an `{ fieldName: '' }` baseline so every
+    // registered input starts controlled with a defined string value. Without
+    // this, RHF leaves unspecified fields as `undefined`, and Radix Select
+    // refuses to update its visual state when we reset on close — the
+    // controlled→uncontrolled transition is the bug we're fixing.
+    // We intentionally only seed empties when clearOnClose is true: legacy
+    // drawers that relied on `undefined`-vs-`""` distinctions in their submit
+    // payload (e.g. "field omitted means don't update") keep their exact
+    // previous behaviour.
     const emptyFieldValues = useMemo(() => {
+        if (!clearOnClose)
+            return undefined;
         const acc = {};
         for (const f of fields) {
             acc[f.name] = '';
         }
         return acc;
-    }, [fields]);
+    }, [clearOnClose, fields]);
     // Determine initial values: initialValues take precedence over persisted data.
     // For clearOnClose drawers we always start from the empty baseline so a
     // stale persistence entry from a previous lifetime can't leak in.
     const getEffectiveInitialValues = () => {
         if (initialValues && Object.keys(initialValues).length > 0) {
-            return { ...emptyFieldValues, ...initialValues };
+            return emptyFieldValues ? { ...emptyFieldValues, ...initialValues } : initialValues;
         }
         if (!clearOnClose && persistenceKey && hasPersistedData()) {
             const persistedData = restoreFormData();
             if (persistedData) {
-                return { ...emptyFieldValues, ...persistedData };
+                return persistedData;
             }
         }
-        return emptyFieldValues;
+        return emptyFieldValues ?? initialValues ?? {};
     };
     const { control, handleSubmit, watch, setValue, clearErrors, formState: { errors, isSubmitting }, reset, getValues, } = useForm({ mode: 'onBlur', defaultValues: getEffectiveInitialValues() });
     const [pendingUpdateCount, setPendingUpdateCount] = useState(0);
@@ -68,7 +74,7 @@ const DrawerContent = ({ fields, onSubmit, isOpen, initialValues, submitButtonTe
         previousIsOpenRef.current = !!isOpen;
         if (wasOpen && !isOpen && clearOnCloseRef.current) {
             clearPersistedDataRef.current();
-            resetRef.current(emptyFieldValuesRef.current);
+            resetRef.current(emptyFieldValuesRef.current ?? {});
         }
     }, [isOpen]);
     const password = watch('password');

package/lib/styles.css

@@ -818,6 +818,9 @@ video {
 .\!z-\[1000\] {
   z-index: 1000 !important;
 }
+.\!z-\[200\] {
+  z-index: 200 !important;
+}
 .-z-10 {
   z-index: -10;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pagamio/frontend-commons-lib",
   "description": "Pagamio library for Frontend reusable components like the form engine and table container",
-  "version": "0.8.344",
+  "version": "0.8.346",
   "publishConfig": {
     "access": "public",
     "provenance": false