oihana-next-ui 0.2.0 → 0.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oihana-next-ui",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "private": false,
   "description": "Oihana Next.js UI component library — reusable components, hooks and utilities built with React 19, Next.js, Tailwind CSS and DaisyUI",
   "author": {

package/src/components/modals/Modal.jsx

@@ -19,73 +19,185 @@ import
 }
 from '../../themes/components/modal' ;
 
-const Modal =
-({
-    // Header
-    closeClassName ,
-    closeIcon= <CloseIcon size={20}/>,
-    closeTitle = 'Close' ,
-    title,
-    icon,
-    showHeader = true,
-    showTitle = true,
-    showIcon = true,
-    showCloseButton = true,
-    headerClassName,
-    headerOptions,
-
-    // Footer
-    agree = 'OK',
-    disagree = 'Cancel',
-    agreeColor = 'primary',
-    disagreeColor = 'neutral',
-    agreeIcon,
-    disagreeIcon,
-    agreeDisabled,
-    disagreeDisabled,
-    showFooter = true,
-    showAgree = true,
-    showDisagree = true,
-    footerReverse = false,
-    footerClassName,
-    footerOptions,
-    onAgree,
-    onCancel,
-
-    // Layout
-    placement = 'middle',
-    responsivePlacement,
-    maxWidth = 'max-w-2xl',
-    fullScreen,
-    fullScreenBreakpoint,
-    fullWidth,
-
-    // Backdrop
-    showBackdrop = true,
-    disableBackdropClick = false,
-    backdropClassName,
-
-    // Behavior
-    disableEscapeKeyDown = false,
-    disabled,
-    onClose,
-
-    // Content
-    children,
-
-    // Styling
-    className,
-    modalBoxClassName,
-    contentClassName,
-    titleClassName,
-
-    // Ref
-    ref,
-}) =>
+const FOOTER_NODE_OVERRIDE_PROPS =
+[
+    'agree',
+    'disagree',
+    'agreeColor',
+    'disagreeColor',
+    'agreeIcon',
+    'disagreeIcon',
+    'agreeDisabled',
+    'disagreeDisabled',
+    'showAgree',
+    'showDisagree',
+    'showFooter',
+    'footerReverse',
+    'footerClassName',
+    'footerOptions',
+    'onAgree',
+    'onCancel',
+] ;
+
+/**
+ * Accessible dialog primitive built on top of the native `<dialog>` element and DaisyUI's `modal` styles.
+ *
+ * Two layout modes:
+ *
+ * 1. **Standard mode** (default) — header (sticky top), free-flow content area, optional footer
+ *    rendered as a `modal-action` row with `agree` / `disagree` buttons (sticky bottom). The whole
+ *    modal-box is the scroll container, header and footer stick to its edges as the user scrolls.
+ *
+ * 2. **Custom-footer mode** — activated by passing a `footerNode`. The modal-box becomes a vertical
+ *    flex column: the content area grows and scrolls internally, while `footerNode` is rendered
+ *    in a dedicated, non-scrollable, border-topped slot at the bottom. Use this for forms with
+ *    a status text + custom action buttons, or any case where the standard footer is too rigid.
+ *
+ * When `footerNode` is provided, the standard footer (`agree`, `disagree`, `footerOptions`,
+ * `showFooter`, `footerReverse`, `footerClassName`, `onAgree`, `onCancel`, etc.) is **fully
+ * ignored** — `footerNode` wins. A `console.warn` is emitted in development if overlapping
+ * props are passed alongside.
+ *
+ * @example Standard usage with agree / disagree
+ * ```jsx
+ * <Modal
+ *     ref      = { modalRef }
+ *     title    = "Save changes?"
+ *     agree    = "Save"
+ *     disagree = "Cancel"
+ *     onAgree  = { handleSave }
+ * >
+ *     <p>Your unsaved changes will be lost.</p>
+ * </Modal>
+ * ```
+ *
+ * @example Custom footer with scrollable form (no `!important` overrides)
+ * ```jsx
+ * <Modal
+ *     ref        = { modalRef }
+ *     title      = "Edit profile"
+ *     footerNode = {
+ *         <div className="flex items-center gap-3 px-4 py-3">
+ *             <span className="text-sm text-base-content/60">Saved 2s ago</span>
+ *             <div className="ml-auto flex gap-2">
+ *                 <Button color="neutral" onClick={ handleCancel }>Cancel</Button>
+ *                 <Button color="primary" onClick={ handleSave }>Save</Button>
+ *             </div>
+ *         </div>
+ *     }
+ * >
+ *     <form className="flex flex-col gap-4">
+ *         { /* many fields, the form scrolls — footer stays visible *\/ }
+ *     </form>
+ * </Modal>
+ * ```
+ *
+ * @param {Object} props
+ * @param {React.ReactNode} [props.title] - Modal title (rendered in the header).
+ * @param {React.ReactNode} [props.icon] - Icon shown left of the title.
+ * @param {React.ReactNode} [props.headerOptions] - Extra nodes injected in the header row.
+ * @param {React.ReactNode} [props.footerOptions] - Extra nodes rendered alongside agree/disagree (standard mode only).
+ * @param {React.ReactNode} [props.footerNode] - **Custom footer** that fully replaces the standard footer. Activates the flex-column layout (sticky footer + internal content scroll). When set, all `agree*`/`disagree*`/`footer*`/`onAgree`/`onCancel`/`showFooter` props are ignored.
+ * @param {React.ReactNode} [props.children] - Modal body content.
+ * @param {string} [props.maxWidth='max-w-2xl'] - Tailwind max-width class for the modal-box.
+ * @param {boolean} [props.fullScreen] - Force full-screen modal.
+ * @param {string}  [props.fullScreenBreakpoint] - Tailwind breakpoint below which the modal becomes full-screen (e.g. `'md'`).
+ * @param {string}  [props.placement='middle'] - `'top'` | `'middle'` | `'bottom'` | `'start'` | `'end'`.
+ * @param {string}  [props.responsivePlacement] - Responsive placement (e.g. `'sm:modal-middle'`).
+ * @param {boolean} [props.disableBackdropClick=false] - Prevent close on backdrop click.
+ * @param {boolean} [props.disableEscapeKeyDown=false] - Prevent close on `Escape`.
+ * @param {string}  [props.contentClassName] - Extra classes on the content wrapper. In custom-footer mode, the default is `flex-1 min-h-0 overflow-y-auto p-2 py-4`; in standard mode, `overflow-y-auto h-full p-2 py-4`.
+ * @param {string}  [props.modalBoxClassName] - Extra classes on the modal-box.
+ *
+ * @see https://daisyui.com/components/modal
+ */
+const Modal = ( props ) =>
 {
+    const
+    {
+        // Header
+        closeClassName ,
+        closeIcon= <CloseIcon size={20}/>,
+        closeTitle = 'Close' ,
+        title,
+        icon,
+        showHeader = true,
+        showTitle = true,
+        showIcon = true,
+        showCloseButton = true,
+        headerClassName,
+        headerOptions,
+
+        // Footer (standard mode)
+        agree = 'OK',
+        disagree = 'Cancel',
+        agreeColor = 'primary',
+        disagreeColor = 'neutral',
+        agreeIcon,
+        disagreeIcon,
+        agreeDisabled,
+        disagreeDisabled,
+        showFooter = true,
+        showAgree = true,
+        showDisagree = true,
+        footerReverse = false,
+        footerClassName,
+        footerOptions,
+        onAgree,
+        onCancel,
+
+        // Footer (custom mode)
+        footerNode,
+
+        // Layout
+        placement = 'middle',
+        responsivePlacement,
+        maxWidth = 'max-w-2xl',
+        fullScreen,
+        fullScreenBreakpoint,
+        fullWidth,
+
+        // Backdrop
+        showBackdrop = true,
+        disableBackdropClick = false,
+        backdropClassName,
+
+        // Behavior
+        disableEscapeKeyDown = false,
+        disabled,
+        onClose,
+
+        // Content
+        children,
+
+        // Styling
+        className,
+        modalBoxClassName,
+        contentClassName,
+        titleClassName,
+
+        // Ref
+        ref,
+    }
+    = props ;
+
     const dialogRef = useRef( null ) ;
     const titleId   = useId() ;
 
+    const hasCustomFooter = footerNode !== undefined && footerNode !== null ;
+
+    if ( process.env.NODE_ENV !== 'production' && hasCustomFooter )
+    {
+        const overlap = FOOTER_NODE_OVERRIDE_PROPS.filter( key => key in props && props[ key ] !== undefined ) ;
+        if ( overlap.length > 0 )
+        {
+            console.warn(
+                `[Modal] \`footerNode\` is set, the following overlapping prop(s) are ignored: ${ overlap.join( ', ' ) }. ` +
+                `Move this content into \`footerNode\` itself.`
+            ) ;
+        }
+    }
+
     const isAboveBreakpoint = fullScreenBreakpoint
                             ? useBreakpoint( fullScreenBreakpoint )
                             : true ;
@@ -165,6 +277,7 @@ const Modal =
         fullScreen : isFullScreen,
         fullWidth,
         placement  : responsivePlacement || placement,
+        flexLayout : hasCustomFooter,
         className  : modalBoxClassName,
     }) ;
 
@@ -177,6 +290,14 @@ const Modal =
         className : backdropClassName,
     }) ;
 
+    const contentClasses = hasCustomFooter
+        ? cn( 'flex-1 min-h-0 overflow-y-auto p-2 py-4' , contentClassName )
+        : cn( 'overflow-y-auto h-full p-2 py-4'         , contentClassName ) ;
+
+    const headerClasses = hasCustomFooter
+        ? cn( 'shrink-0 bg-base-100 border-b border-base-300/60 z-10 p-2 pb-3' , headerClassName )
+        : cn( 'sticky top-0 bg-base-100 border-b border-base-300/60 z-10 p-2 pb-3' , headerClassName ) ;
+
     return (
         <dialog
             aria-labelledby = { showTitle && title ? titleId : undefined }
@@ -197,7 +318,7 @@ const Modal =
             <div className={ modalBoxClasses }>
 
                 { showHeader && (
-                    <div className={`sticky top-0 bg-base-100 border-b border-base-300/60 z-10 p-2 pb-3 ${ headerClassName || '' }`}>
+                    <div className={ headerClasses }>
                         <div className="flex items-center gap-3">
 
                             { showIcon && icon && (
@@ -232,11 +353,15 @@ const Modal =
                     </div>
                 )}
 
-                <div className={ cn( 'overflow-y-auto h-full p-2 py-4' , contentClassName ) }>
+                <div className={ contentClasses }>
                     { children }
                 </div>
 
-                { showFooter && (
+                { hasCustomFooter ? (
+                    <div className="shrink-0 bg-base-100 border-t border-base-300/60">
+                        { footerNode }
+                    </div>
+                ) : showFooter && (
                     <div className={`sticky bottom-0 bg-base-100 border-t border-base-300/60 p-0 ${ footerClassName || '' }`}>
 
                         <div className={ modalActionClasses }>
@@ -274,4 +399,4 @@ const Modal =
 
 Modal.displayName = 'Modal' ;
 
-export default Modal ;
+export default Modal ;

package/src/demo/modals/ModalDemo.jsx

@@ -22,7 +22,8 @@ import {
     MdError,
     MdDelete,
     MdDriveFileRenameOutline ,
-    MdSave
+    MdSave,
+    MdCloudDone,
 } from 'react-icons/md' ;
 
 const ModalDemo = () =>
@@ -61,6 +62,9 @@ const ModalDemo = () =>
     // Form modal
     const { modalRef: formRef, open: openForm } = useModal() ;
 
+    // Custom footerNode modal (sticky footer + scrollable content)
+    const { modalRef: footerNodeRef, open: openFooterNode } = useModal() ;
+
     // Toggle demo
     const { modalRef: toggleRef, toggle: toggleModal, isOpen: toggleIsOpen } = useModal({
         onClose: () => console.log( 'Modal closed' ),
@@ -618,6 +622,162 @@ const ModalDemo = () =>
 
             <Divider />
 
+            {/* Custom Footer Node (sticky footer + scrollable content) */}
+            <div className="flex flex-col gap-4">
+                <h3 className="text-xl font-semibold border-b-2 border-info pb-2">
+                    Custom Footer Node — sticky footer + scrollable content
+                </h3>
+
+                <div className="card bg-base-100 shadow">
+                    <div className="card-body gap-4">
+
+                        <h4 className="card-title text-base">
+                            <MdInfo className="text-info" /> When to use <code className="badge badge-sm">footerNode</code>
+                        </h4>
+
+                        <p className="text-sm text-base-content/80">
+                            Use the <code className="badge badge-sm">footerNode</code> prop when the standard
+                            <code className="badge badge-sm">agree</code> / <code className="badge badge-sm">disagree</code> footer
+                            is too rigid — typically for forms with a status text, custom buttons, or any layout
+                            that does not fit the default <code className="badge badge-sm">modal-action</code> row.
+                        </p>
+
+                        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                            <div>
+                                <h5 className="font-bold text-success mb-2">✅ What it gives you</h5>
+                                <ul className="list-disc list-inside space-y-1 text-sm">
+                                    <li>Footer always pinned at the bottom of the modal-box</li>
+                                    <li>Content area scrolls on its own (smooth, internal)</li>
+                                    <li>Header stays at the top</li>
+                                    <li>No need for <code className="badge badge-sm">!important</code> overrides</li>
+                                    <li>No need for <code className="badge badge-sm">modalBoxClassName="flex flex-col"</code> boilerplate</li>
+                                </ul>
+                            </div>
+
+                            <div>
+                                <h5 className="font-bold text-warning mb-2">⚠️ Precedence rules</h5>
+                                <p className="text-sm mb-1">
+                                    When <code className="badge badge-sm">footerNode</code> is set, these props are <strong>ignored</strong>:
+                                </p>
+                                <p className="text-xs font-mono text-base-content/70">
+                                    agree, disagree, agreeColor, disagreeColor, agreeIcon, disagreeIcon,
+                                    showAgree, showDisagree, showFooter, footerReverse, footerClassName,
+                                    footerOptions, onAgree, onCancel
+                                </p>
+                                <p className="text-sm mt-2">
+                                    A <code className="badge badge-sm">console.warn</code> is emitted in dev if any of them
+                                    are passed alongside.
+                                </p>
+                            </div>
+                        </div>
+
+                        <div className="alert alert-info">
+                            <MdInfo size={20} />
+                            <div className="text-sm">
+                                Standard mode (without <code>footerNode</code>) is unchanged: the existing
+                                <code className="badge badge-sm">showFooter</code> behaviour with sticky agree/disagree row
+                                still works exactly as before.
+                            </div>
+                        </div>
+
+                        <h5 className="font-bold mt-2">Before / After</h5>
+                        <div className="grid grid-cols-1 lg:grid-cols-2 gap-3">
+                            <div>
+                                <p className="text-xs text-error mb-1 font-semibold">❌ Before (manual recipe — 8 lines, 5 ! markers)</p>
+                                <div className="mockup-code text-xs">
+                                    <pre data-prefix="1"><code>&lt;Modal</code></pre>
+                                    <pre data-prefix="2"><code>  contentClassName ="!overflow-hidden !p-0 flex flex-col flex-1 min-h-0"</code></pre>
+                                    <pre data-prefix="3"><code>  modalBoxClassName="!overflow-hidden flex flex-col"</code></pre>
+                                    <pre data-prefix="4"><code>  showFooter={`{false}`}&gt;</code></pre>
+                                    <pre data-prefix="5"><code>  &lt;div className="flex-1 min-h-0 overflow-y-auto ..."&gt;</code></pre>
+                                    <pre data-prefix="6"><code>    {`{form fields}`}</code></pre>
+                                    <pre data-prefix="7"><code>  &lt;/div&gt;</code></pre>
+                                    <pre data-prefix="8"><code>  &lt;div className="shrink-0 flex border-t bg-base-100 ..."&gt;</code></pre>
+                                    <pre data-prefix="9"><code>    {`{status + cancel + save}`}</code></pre>
+                                    <pre data-prefix="10"><code>  &lt;/div&gt;</code></pre>
+                                    <pre data-prefix="11"><code>&lt;/Modal&gt;</code></pre>
+                                </div>
+                            </div>
+
+                            <div>
+                                <p className="text-xs text-success mb-1 font-semibold">✅ After — 1 prop, no overrides</p>
+                                <div className="mockup-code text-xs">
+                                    <pre data-prefix="1"><code>&lt;Modal</code></pre>
+                                    <pre data-prefix="2"><code>  title="Edit profile"</code></pre>
+                                    <pre data-prefix="3"><code>  footerNode={`{<FormFooter ... />}`}</code></pre>
+                                    <pre data-prefix="4"><code>&gt;</code></pre>
+                                    <pre data-prefix="5"><code>  &lt;form className="flex flex-col gap-4"&gt;</code></pre>
+                                    <pre data-prefix="6"><code>    {`{form fields}`}</code></pre>
+                                    <pre data-prefix="7"><code>  &lt;/form&gt;</code></pre>
+                                    <pre data-prefix="8"><code>&lt;/Modal&gt;</code></pre>
+                                    <pre data-prefix="9"><code></code></pre>
+                                    <pre data-prefix="10"><code>// modal-box auto: flex flex-col</code></pre>
+                                    <pre data-prefix="11"><code>// content auto:   flex-1 min-h-0 overflow-y-auto</code></pre>
+                                </div>
+                            </div>
+                        </div>
+
+                    </div>
+                </div>
+
+                <Button color="info" onClick={ openFooterNode }>
+                    Open Modal with footerNode + long form
+                </Button>
+
+                <Modal
+                    ref        = { footerNodeRef }
+                    title      = "Edit User Profile (long form)"
+                    icon       = { <MdDriveFileRenameOutline size={24} className="text-info" /> }
+                    maxWidth   = "max-w-xl"
+                    footerNode = {
+                        <div className="flex items-center gap-3 px-4 py-3">
+                            <div className="flex items-center gap-2 text-sm text-base-content/70">
+                                <MdCloudDone className="text-success" size={18} />
+                                <span>Saved 2 seconds ago</span>
+                            </div>
+                            <div className="ml-auto flex gap-2">
+                                <Button
+                                    color   = "neutral"
+                                    size    = "sm"
+                                    onClick = { () => footerNodeRef.current?.close() }
+                                >
+                                    Cancel
+                                </Button>
+                                <Button
+                                    color   = "primary"
+                                    size    = "sm"
+                                    onClick = { () =>
+                                    {
+                                        console.log( 'Profile saved' ) ;
+                                        footerNodeRef.current?.close() ;
+                                    }}
+                                >
+                                    <MdSave size={16} />
+                                    Save
+                                </Button>
+                            </div>
+                        </div>
+                    }
+                >
+                    <div className="flex flex-col gap-4 px-2">
+                        <p className="text-sm text-base-content/70">
+                            Scroll inside this modal — notice that the header stays at the top
+                            and the footer stays visible at the bottom while the form scrolls.
+                        </p>
+
+                        { Array.from( { length: 25 } ).map( ( _ , i ) => (
+                            <Input
+                                key         = { i }
+                                label       = { `Field ${ i + 1 }` }
+                                placeholder = { `Enter value for field ${ i + 1 }` }
+                            />
+                        ))}
+                    </div>
+                </Modal>
+            </div>
+
+            <Divider />
+
             {/* Form Example */}
             <div className="flex flex-col gap-4">
                 <h3 className="text-xl font-semibold border-b-2 border-secondary pb-2">

package/src/themes/components/modal.js

@@ -62,6 +62,7 @@ export const getModalClasses =
  * @param {boolean} [props.fullScreen] - Full screen mode
  * @param {boolean} [props.fullWidth] - Full width mode
  * @param {string} [props.placement] - Modal placement (for centering logic)
+ * @param {boolean} [props.flexLayout] - Switch the modal-box to a vertical flex column so a sticky custom footer + scrollable content area can be composed cleanly. Used by `<Modal footerNode>`.
  * @param {string} [props.className] - Additional classes
  *
  * @returns {string} Combined class names
@@ -69,6 +70,7 @@ export const getModalClasses =
 export const getModalBoxClasses =
 ({
     className ,
+    flexLayout ,
     fullScreen ,
     fullWidth ,
     maxWidth,
@@ -77,11 +79,13 @@ export const getModalBoxClasses =
 = {} ) => cn
 (
     MODAL_BOX ,
+    'px-4 pt-1 pb-3',
     {
         'max-w-none w-full max-h-none h-full rounded-none' : fullScreen ,
         'w-full max-w-none'                                : !fullScreen && fullWidth ,
         'mx-auto'                                          : !fullScreen && !fullWidth && ( placement === 'top' || placement === 'bottom' ) ,
         [ maxWidth ]                                       : !fullScreen && !fullWidth && maxWidth ,
+        'flex flex-col overflow-hidden'                    : flexLayout ,
     },
     className,
 ) ;

package/src/version.js

@@ -1,3 +1,3 @@
-const version = "0.2.0" ;
+const version = "0.2.1" ;
 
 export default version ;