@nascentdigital/funnel-ui 4.5.1 → 4.5.3

package/dist/server/panels/VisualPanel.d.ts

@@ -8,7 +8,7 @@ export declare namespace VisualPanel {
     type Props = BlockPanel.Props & {
         className?: string;
         panel: BlockLayout.Visual;
-        visual: Visual.Model;
+        visual?: Visual.Model;
         visualDecorator?: ReactNode;
         visualLoading?: Visual.Loading;
         aspect?: AspectRatio;

package/dist/styles/blocks/MediaLayout.css

@@ -1,214 +1,54 @@
 @layer components {
 
     :root {
-        --nd-medialayout-gap: theme('spacing.l8');
-        --nd-medialayout-poster-gap: unset;
-        --nd-medialayout-1col-gap: var(--nd-medialayout-gap);
-        --nd-medialayout-2col-gap: var(--nd-medialayout-gap);
-        --nd-medialayout-brick-gap: var(--nd-medialayout-gap);
-        @media screen(md) {
-            --nd-medialayout-gap: theme('spacing.l9');
-        }
-        @media screen(lg) {
-            --nd-medialayout-gap: theme('spacing.l10');
-        }
     }
 
     /* base */
     .nd-MediaLayout {
     }
 
+    /* visual aspect ratios */
+    .nd-MediaLayout .nd-ListPanel {
 
-    /* poster */
-    .nd-MediaLayout-layout-poster {
-
-        .nd-MediaLayout-content {
-            @apply flex flex-col gap-[var(--nd-medialayout-poster-gap)];
-        }
-        .nd-MediaLayout-itemWrap {
-            @apply w-full aspect-cinema lg:aspect-cinemascope;
-        }
-        .nd-MediaLayout-item {
-            @apply w-full object-cover;
-        }
-    }
-
-    /* 1col */
-    .nd-MediaLayout-layout-1col {
-
-        .nd-MediaLayout-content {
-            @apply container-wide-p flex flex-col gap-[var(--nd-medialayout-1col-gap)];
-        }
-        .nd-MediaLayout-itemWrap {
-            @apply w-full;
-        }
-        .nd-MediaLayout-item {
-            @apply w-full object-cover;
-        }
-    }
-
-    /* 2col */
-    ._nd-MediaLayout-layout-2col-mobile {
-        .nd-MediaLayout-content {
-            @apply container-wide-p grid grid-flow-row grid-cols-1 gap-[var(--nd-medialayout-2col-gap)];
-        }
+        /* general styling across layouts */
         .nd-MediaLayout-itemWrap {
-            @apply block max-w-full aspect-tv overflow-hidden;
+            @apply block w-full overflow-hidden;
         }
         .nd-MediaLayout-item {
-            @apply w-full h-full object-cover object-center;
+            @apply size-full object-cover object-center;
         }
-    }
-    ._nd-MediaLayout-layout-2col-desktop {
-        .nd-MediaLayout-content {
-            @apply container-wide-p grid grid-cols-2 grid-flow-row gap-[var(--nd-medialayout-2col-gap)];
-        }
-        .nd-MediaLayout-itemWrap {
-            @apply w-full col-span-1 aspect-tv overflow-hidden;
-
-            /* make full width if a solo last child */
-            &:nth-child(odd):last-child {
-                @apply col-span-full aspect-cinema;
-            }
-        }
-        .nd-MediaLayout-item {
-            @apply w-full h-full object-cover object-center;
-        }
-    }
-    .nd-MediaLayout-layout-2col {
-        @apply max-md:_nd-MediaLayout-layout-2col-mobile md:_nd-MediaLayout-layout-2col-desktop;
-    }
 
-    /* brick */
-    ._nd-MediaLayout-layout-brick-mobile {
-
-        .nd-MediaLayout-content {
-            @apply container-wide-p grid grid-flow-row grid-cols-1 gap-[var(--nd-medialayout-brick-gap)];
-        }
-        .nd-MediaLayout-itemWrap {
-            @apply block max-w-full aspect-widescreen overflow-hidden;
-        }
-        .nd-MediaLayout-item {
-            @apply w-full h-full object-cover object-center;
-        }
-    }
-    ._nd-MediaLayout-layout-brick-desktop {
-
-        /* base */
-        .nd-MediaLayout-content {
-            @apply container-wide-p grid grid-cols-2 gap-[var(--nd-medialayout-brick-gap)];
-        }
-        .nd-MediaLayout-itemWrap {
-            @apply block max-w-full col-span-1 aspect-tv overflow-hidden;
-
-            /* every 1, 4, 7, 10, 13 and so on images will be full width */
-            &:nth-child(3n + 1) {
-                @apply col-span-full aspect-cinema;
-            }
-        }
-        .nd-MediaLayout-item {
-            @apply w-full h-full object-cover object-center;
-        }
-
-        /* if the total number of images are 2, 5, 8, 11, 14 and so on, then make last 2 single */
-        .nd-MediaLayout-content:has(.nd-MediaLayout-itemWrap:nth-child(3n+2):last-child) {
+        /* brick */
+        .nd-BrickLayout {
 
+            /* default aspect ratio */
             .nd-MediaLayout-itemWrap {
-                &:nth-last-child(1), &:nth-last-child(2) {
-                    @apply col-span-1 aspect-tv;
-                }
+                @apply aspect-widescreen @panel-md:aspect-tv;
             }
-        }
-    }
-    .nd-MediaLayout-layout-brick {
-        @apply max-md:_nd-MediaLayout-layout-brick-mobile md:_nd-MediaLayout-layout-brick-desktop;
-    }
-
-
-    /* brick */
-    ._nd-MediaLayout-layout-brickAlt-desktop {
 
-        /* base */
-        .nd-MediaLayout-content {
-            @apply container-wide-p grid grid-cols-2 gap-[var(--nd-medialayout-brick-gap)];
-        }
-        .nd-MediaLayout-itemWrap {
-            @apply block max-w-full col-span-1 aspect-tv overflow-hidden;
+            /* brick (not flipped) */
+            &:not(.nd-BrickLayout-flipped) {
 
-            /* every 3, 6, 9, 12, 15 and so on images will be full width */
-            &:nth-child(3n) {
-                @apply col-span-full aspect-cinema;
+                /* every 1, 4, 7, 10, 13 and so on images will be full width */
+                .nd-MediaLayout-itemWrap:nth-child(3n + 1) {
+                    @apply @panel-md:aspect-cinema;
+                }
             }
-        }
-        .nd-MediaLayout-item {
-            @apply w-full h-full object-cover object-center;
-        }
 
-        /* if the total number of images are 1, 4, 7, 10, 13, 16 and so on, then make last 2 single */
-        .nd-MediaLayout-content:has(.nd-MediaLayout-itemWrap:nth-child(3n+2):last-child) {
+            /* brick (flipped) */
+            &.nd-BrickLayout-flipped {
 
-            .nd-MediaLayout-itemWrap {
-                &:nth-last-child(1), &:nth-last-child(2) {
-                    @apply col-span-1 aspect-tv;
+                /* every 3, 6, 9, 12, 15 and so on images will be full width */
+                .nd-MediaLayout-itemWrap:nth-child(3n) {
+                    @apply @panel-md:aspect-cinema;
                 }
             }
         }
 
-        /* single image would be full width */
-        .nd-MediaLayout-content:has(.nd-MediaLayout-itemWrap:first-child:last-child) {
-
-            /* make it full width */
+        /* vertical stack */
+        .nd-StackLayout.nd-StackLayout-direction-vertical {
             .nd-MediaLayout-itemWrap {
-                @apply col-span-full aspect-cinema;
-            }
-        }
-    }
-    .nd-MediaLayout-layout-brickAlt {
-        @apply max-md:_nd-MediaLayout-layout-brick-mobile md:_nd-MediaLayout-layout-brickAlt-desktop;
-    }
-}
-
-
-@layer components {
-
-    /* desktop overrides */
-    @media screen(md) {
-        .nd-MediaGrid-root {
-
-            /* brick layout flipped */
-            &.nd-MediaGrid-brickFlipped {
-                .nd-MediaGrid-content {
-                    @apply grid-cols-2;
-
-                    .nd-MediaGrid-visual {
-                        @apply col-span-1;
-
-                        /* every 3, 6, 9, 12, 15 and so on images will be full width */
-                        &:nth-child(3n) {
-                            @apply col-span-full aspect-widescreen;
-                        }
-                    }
-
-                    /* if the total number of images are 1, 4, 7, 10, 13, 16 and so on  */
-                    &:has(.nd-MediaGrid-visual:nth-child(3n+1):last-child) {
-
-                        /* make the last two images take 50-50 of the screen width */
-                        .nd-MediaGrid-visual {
-                            &:nth-last-child(2) {
-                                @apply col-span-1 aspect-tv;
-                            }
-                        }
-                    }
-
-                    /* if there is only one image  */
-                    &:has(.nd-MediaGrid-visual:first-child:last-child) {
-
-                        /* make it full width */
-                        .nd-MediaGrid-visual {
-                            @apply col-span-full aspect-widescreen;
-                        }
-                    }
-                }
+                @apply aspect-cinema @panel-lg:aspect-cinemascope;
             }
         }
     }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nascentdigital/funnel-ui",
   "description": "UI components for funnel",
-  "version": "4.5.1",
+  "version": "4.5.3",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "restricted"
@@ -70,5 +70,5 @@
     "react-dom": "^19",
     "ts-jest": "^29.3.2"
   },
-  "gitHead": "3348c90ff56f3dd931ab564f8a6ad13d454a4ca1"
+  "gitHead": "ef42bb5440cc23187aeefc29319875ed5402676f"
 }

package/dist/client/interaction/Popup.d.ts

@@ -1,36 +0,0 @@
-import { Callback, Frame, Rect } from '@nascentdigital/funnel-core';
-import { Variants } from 'framer-motion';
-import { HTMLAttributes } from 'react';
-import { ClickObserver } from './ClickObserver';
-import { UILevel } from './UILevel';
-export declare function Popup({ className, style, anchor, level, placement, anchorOffset, viewportPadding, animation, dismissTrigger, disableBackground, disabled, bubbleCloseEvent, open, onOpened: onOpenedRaw, onClose, onClosed: onClosedRaw, children, ...props }: Popup.Props): import("react/jsx-runtime").JSX.Element | null;
-export declare namespace Popup {
-    type Props = HTMLAttributes<HTMLDivElement> & {
-        anchor?: Rect | Element | string | null | undefined;
-        level?: UILevel;
-        placement?: Placement;
-        anchorOffset?: number;
-        viewportPadding?: number;
-        animation?: Animation;
-        dismissTrigger?: ClickObserver.Trigger | 'none';
-        disableBackground?: boolean;
-        disabled?: boolean;
-        bubbleCloseEvent?: boolean;
-        open?: boolean;
-        onOpened?: Callback.Void;
-        onClose?: Callback.Void;
-        onClosed?: Callback.Void;
-    };
-    type Placement = 'top-start' | 'top' | 'top-end' | 'top-match' | 'bottom-start' | 'bottom' | 'bottom-end' | 'bottom-match' | 'left-start' | 'left' | 'left-end' | 'right-start' | 'right' | 'right-end';
-    type Animation = 'in' | 'out' | 'in-out';
-    type GetFrameArgs = {
-        anchorRect: Rect;
-        contentElement: HTMLDivElement;
-        placement: Popup.Placement;
-        anchorOffset: number;
-        viewportPadding: number;
-    };
-    function getFrame({ anchorRect, contentElement, placement, anchorOffset, viewportPadding }: GetFrameArgs): Partial<Frame>;
-}
-export declare const animations: Variants;
-export declare function getAnchorRect(anchor: Rect | Element | string | null | undefined): Rect | null;

package/dist/client/interaction/Popup.js

@@ -1,244 +0,0 @@
-"use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.animations = void 0;
-exports.Popup = Popup;
-exports.getAnchorRect = getAnchorRect;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const funnel_core_1 = require("@nascentdigital/funnel-core");
-const classnames_1 = __importDefault(require("classnames"));
-const framer_motion_1 = require("framer-motion");
-const react_1 = require("react");
-const react_dom_1 = require("react-dom");
-const react_hotkeys_hook_1 = require("react-hotkeys-hook");
-const hooks_1 = require("../hooks");
-const ClickObserver_1 = require("./ClickObserver");
-// component
-function Popup(_a) {
-    var { className, style = {}, anchor, level = 'l1', placement = 'bottom', anchorOffset = 0, viewportPadding = 0, animation = 'in-out', dismissTrigger, disableBackground = false, disabled = false, bubbleCloseEvent = false, open = false, onOpened: onOpenedRaw = funnel_core_1.Fn.NoOp, onClose = funnel_core_1.Fn.NoOp, onClosed: onClosedRaw = funnel_core_1.Fn.NoOp, children } = _a, props = __rest(_a, ["className", "style", "anchor", "level", "placement", "anchorOffset", "viewportPadding", "animation", "dismissTrigger", "disableBackground", "disabled", "bubbleCloseEvent", "open", "onOpened", "onClose", "onClosed", "children"]);
-    // bind context
-    const [active, setActive] = (0, react_1.useState)(false);
-    const openedRef = (0, react_1.useRef)(false);
-    const contentRef = (0, react_1.useRef)(null);
-    const id = (0, react_1.useId)();
-    const anchorRect = getAnchorRect(anchor);
-    const onOpenedRef = (0, react_1.useRef)(onOpenedRaw);
-    onOpenedRef.current = onOpenedRaw;
-    const onClosedRef = (0, react_1.useRef)(onClosedRaw);
-    onClosedRef.current = onClosedRaw;
-    const closeCallback = (0, react_1.useCallback)(() => {
-        if (openedRef.current) {
-            onClose();
-        }
-    }, [onClose]);
-    // re-render on window size change
-    (0, hooks_1.useViewportSize)();
-    // close on escape
-    (0, react_hotkeys_hook_1.useHotkeys)('esc', closeCallback);
-    // show/hide based on open change
-    (0, react_1.useEffect)(() => {
-        // raise event on open/close
-        let unlock = undefined;
-        if (open) {
-            // update ref
-            openedRef.current = true;
-            // activate
-            setActive(true);
-            // lock keyboard
-            unlock = funnel_core_1.Browser.lockFocus(`#${CSS.escape(id)}`);
-        }
-        // raise event on close (if it was actually opened)
-        else if (openedRef.current) {
-            // deactivate
-            setActive(false);
-            // update ref
-            openedRef.current = false;
-        }
-        // on unmount
-        return () => {
-            // unlock (if locked)
-            if (unlock) {
-                unlock();
-            }
-        };
-    }, [open, id]);
-    // skip for SSR
-    if (!funnel_core_1.Browser.available) {
-        return null;
-    }
-    // compute popup rect (if visible + ready)
-    const contentElement = contentRef.current;
-    const popupFrame = active && !!anchorRect && !!contentElement
-        ? Popup.getFrame({
-            anchorRect,
-            contentElement,
-            placement,
-            anchorOffset,
-            viewportPadding
-        })
-        : {};
-    // helpers
-    const onClickOutside = (e) => {
-        // consume click
-        if (!bubbleCloseEvent) {
-            e.preventDefault();
-            e.stopPropagation();
-        }
-        // close
-        onClose();
-    };
-    const onAnimationComplete = (definition) => {
-        if (definition === 'visible') {
-            onOpenedRef.current();
-        }
-        else if (definition === 'exit') {
-            onClosedRef.current();
-        }
-    };
-    // render
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { children: open && !!anchorRect &&
-                (0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { id: id, className: (0, classnames_1.default)('Popup-wrap', {
-                        'Popup-disableBg': disableBackground,
-                        'Popup-disabled': disabled,
-                        'Popup-l1': level === 'l1',
-                        'Popup-l2': level === 'l2',
-                        'Popup-l3': level === 'l3'
-                    }), variants: exports.animations, initial: animation !== 'out' ? 'hidden' : 'visible', animate: "visible", exit: animation !== 'in' ? 'exit' : 'visible', onAnimationComplete: definition => onAnimationComplete(definition), children: (0, jsx_runtime_1.jsx)(ClickObserver_1.ClickObserver, { trigger: dismissTrigger === 'none' ? 'click' : dismissTrigger, disabled: !open || dismissTrigger === 'none', onClickOutside: onClickOutside, children: (0, jsx_runtime_1.jsx)("div", Object.assign({}, props, { ref: contentRef, style: Object.assign(Object.assign({}, style), popupFrame), className: (0, classnames_1.default)(className, 'Popup-root'), children: children })) }) }, id) }), document.body) }));
-}
-// extension
-(function (Popup) {
-    // helpers
-    function getFrame({ anchorRect, contentElement, placement, anchorOffset, viewportPadding }) {
-        // get geometries
-        const viewportRect = new funnel_core_1.Rect(viewportPadding, viewportPadding, window.innerWidth - viewportPadding * 2, window.innerHeight - viewportPadding * 2);
-        const contentWidth = contentElement.offsetWidth;
-        const contentHeight = contentElement.offsetHeight;
-        // horizontal layout if left/right
-        const popupFrame = {};
-        const [primary, secondary] = placement.split('-');
-        if (primary === 'left' || primary === 'right') {
-            // determine space to left/right
-            const spaceLeft = Math.max(0, anchorRect.left - viewportRect.left - anchorOffset);
-            const spaceRight = Math.max(0, viewportRect.right - anchorRect.right - anchorOffset);
-            // place left if it fits or it fits better than on the right
-            if ((primary === 'left' && (spaceLeft >= contentWidth || spaceLeft > spaceRight))
-                || (primary === 'right' && spaceRight < contentWidth && spaceRight < spaceLeft)) {
-                popupFrame.right = viewportRect.right - anchorRect.left + anchorOffset;
-            }
-            // or place right
-            else {
-                popupFrame.left = anchorRect.right + anchorOffset;
-            }
-            // top-align on start
-            if (secondary === 'start') {
-                popupFrame.top = anchorRect.top;
-            }
-            // bottom-align on end
-            else if (secondary === 'end') {
-                popupFrame.bottom = viewportRect.bottom - anchorRect.bottom;
-            }
-            // or center against anchor
-            else {
-                // set top bounds so it's centered
-                popupFrame.top = Math.max(anchorRect.top + (anchorRect.height - contentHeight) / 2, viewportRect.top);
-                // offset if the bottom is bleeding over
-                if (popupFrame.top + contentHeight > viewportRect.bottom) {
-                    popupFrame.top -= popupFrame.top + contentHeight - viewportRect.bottom;
-                }
-            }
-        }
-        // or standard vertical layout
-        else {
-            // determine space to top/bottom
-            const spaceTop = Math.max(0, anchorRect.top - viewportRect.top - anchorOffset);
-            const spaceBottom = Math.max(0, viewportRect.bottom - anchorRect.bottom - anchorOffset);
-            // place above if it fits or it fits better than on the right
-            if ((primary === 'top' && (spaceTop >= contentHeight || spaceBottom < spaceTop))
-                || (primary === 'bottom' && spaceBottom < contentHeight && spaceBottom < spaceTop)) {
-                popupFrame.bottom = viewportRect.bottom - anchorRect.top + anchorOffset;
-            }
-            // or place below
-            else {
-                popupFrame.top = anchorRect.bottom + anchorOffset;
-            }
-            // left-align on start
-            if (secondary === 'start') {
-                popupFrame.left = anchorRect.left;
-            }
-            // right-align on end
-            else if (secondary === 'end') {
-                popupFrame.right = viewportRect.right - anchorRect.right;
-            }
-            // match width
-            else if (secondary === 'match') {
-                popupFrame.left = anchorRect.left;
-                popupFrame.width = anchorRect.width;
-            }
-            // or center against anchor
-            else {
-                // set left bounds so it's centered
-                popupFrame.left = Math.max(anchorRect.left + (anchorRect.width - contentWidth) / 2, viewportRect.left);
-                // offset if the right is bleeding over
-                if (popupFrame.left + contentWidth > viewportRect.right) {
-                    popupFrame.left -= popupFrame.left + contentWidth - viewportRect.right;
-                }
-            }
-        }
-        // return position insets
-        return popupFrame;
-    }
-    Popup.getFrame = getFrame;
-})(Popup || (exports.Popup = Popup = {}));
-// helpers
-exports.animations = {
-    hidden: {
-        opacity: 0
-    },
-    visible: {
-        opacity: 1,
-        transition: {
-            ease: 'easeOut',
-            duration: 0.5,
-            when: 'beforeChildren'
-        }
-    },
-    exit: {
-        opacity: 0,
-        transition: {
-            ease: 'easeIn',
-            duration: 0.15,
-            bounce: 0,
-            when: 'afterChildren'
-        }
-    }
-};
-function getAnchorRect(anchor) {
-    // skip if there's no anchor or if we're SSR
-    if (!anchor || !funnel_core_1.Browser.available) {
-        return null;
-    }
-    // or skip if we already have a rect
-    else if (anchor instanceof funnel_core_1.Rect) {
-        return anchor;
-    }
-    // try to coerce anchor into an element (or fail)
-    const anchorElement = typeof anchor === 'string'
-        ? document.querySelector(anchor)
-        : anchor;
-    return anchorElement
-        ? funnel_core_1.Rect.fromInsets(anchorElement.getBoundingClientRect())
-        : null;
-}

package/dist/client/interaction/Tooltip.d.ts

@@ -1,16 +0,0 @@
-import { ReactNode, RefObject } from 'react';
-import { Popup } from './Popup';
-export declare function Tooltip({ delay, scroller, content, children, anchorClassName, popupClassName, onClose, placement, anchorOffset, viewportPadding, disabled }: DelayedPopup.Props): import("react/jsx-runtime").JSX.Element;
-export declare namespace DelayedPopup {
-    type Props = Pick<Popup.Props, 'anchorOffset' | 'viewportPadding' | 'placement' | 'onClose'> & {
-        delay?: number;
-        scroller?: string | RefObject<HTMLElement | null>;
-        content: ReactNode;
-        children: ReactNode;
-        anchorClassName?: string;
-        popupClassName?: string;
-        disabled?: boolean;
-    };
-    type HoverState = 'inactive' | 'waiting' | 'active';
-    type TapState = 'inactive' | 'active';
-}