@nascentdigital/funnel-ui 5.0.1 → 5.0.3

package/dist/client/hooks/index.d.ts

@@ -16,6 +16,7 @@ export * from './useLock';
 export * from './useMixedResponsiveValue';
 export * from './usePathname';
 export * from './useRefElement';
+export * from './useRefValue';
 export * from './useRefresh';
 export * from './useResizeObserver';
 export * from './useResponsiveValue';

package/dist/client/hooks/index.js

@@ -32,6 +32,7 @@ __exportStar(require("./useLock"), exports);
 __exportStar(require("./useMixedResponsiveValue"), exports);
 __exportStar(require("./usePathname"), exports);
 __exportStar(require("./useRefElement"), exports);
+__exportStar(require("./useRefValue"), exports);
 __exportStar(require("./useRefresh"), exports);
 __exportStar(require("./useResizeObserver"), exports);
 __exportStar(require("./useResponsiveValue"), exports);

package/dist/client/hooks/useRefValue.d.ts

@@ -0,0 +1,2 @@
+import { Callback } from '@nascentdigital/funnel-core';
+export declare function useRefValue<TRef>(): [Callback<TRef | null>, TRef | null];

package/dist/client/hooks/useRefValue.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useRefValue = useRefValue;
+const react_1 = require("react");
+// hook
+function useRefValue() {
+    // create state
+    const [value, setValue] = (0, react_1.useState)(null);
+    // create ref callback function
+    const setRef = (0, react_1.useCallback)((value) => {
+        setValue(value);
+    }, []);
+    // return state and setter
+    return [setRef, value];
+}

package/dist/server/blocks/Block.d.ts

@@ -14,6 +14,7 @@ export declare namespace Block {
         className?: string;
         panel: BlockLayout.Panel;
     };
+    type RenderItemArgs<TField, TItemProps = {}> = TField extends Schema.Optional.Maybe<Schema.ListField<infer TContent>> ? Create.Result.ComponentProps.RenderItemArgs<TContent, TItemProps> : never;
     namespace Create {
         type Args<TBlockId extends string, TMessage extends boolean | undefined, TVisual extends boolean | undefined, TList extends Schema.Optional.Maybe<Schema.ListField> | undefined, TExtend extends Schema.Block.Config, TItemProps> = {
             id: TBlockId;
@@ -23,7 +24,10 @@ export declare namespace Block {
             className?: string;
             message?: TMessage;
             visual?: TVisual;
-            list?: TList;
+            list?: {
+                schema: TList;
+                renderItem: TList extends Schema.Optional.Maybe<Schema.ListField<infer TContent>> ? Transform<Result.ComponentProps.RenderItemArgs<TContent, TItemProps>, ReactNode> : never;
+            };
             extendConfigSchema?: TExtend;
         };
         type Result<TBlockId extends string, TMessage extends boolean | undefined, TVisual extends boolean | undefined, TList extends Schema.Optional.Maybe<Schema.ListField> | undefined, TExtend extends Schema.Block.Config, TItemProps> = {
@@ -47,7 +51,7 @@ export declare namespace Block {
                 listPanelProps?: ListPanel.Props.Configuration & {
                     itemProps?: TItemProps;
                 };
-                children: (args: ComponentProps.RenderItemArgs<TContent, TItemProps>) => ReactNode;
+                children?: Transform<ComponentProps.RenderItemArgs<TContent, TItemProps>, ReactNode>;
             } : {})) & HTMLBlockElement<'div'>;
             namespace ComponentProps {
                 type ForMessage = ComponentProps<string, true, undefined, undefined, {}, unknown>;

package/dist/server/blocks/Block.js

@@ -67,26 +67,31 @@ function Block(_a) {
                     config: (_b = props.model.config) !== null && _b !== void 0 ? _b : {}
                 } }, panelKeyMapping));
             const getPanel = ({ className, panel }) => {
-                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
                 switch (panel.type) {
                     // message panel
                     case 'message': {
                         const { model: { fields }, messagePanelProps } = props;
-                        const _o = messagePanelProps !== null && messagePanelProps !== void 0 ? messagePanelProps : {}, { className: panelClassName } = _o, panelProps = __rest(_o, ["className"]);
+                        const _p = messagePanelProps !== null && messagePanelProps !== void 0 ? messagePanelProps : {}, { className: panelClassName } = _p, panelProps = __rest(_p, ["className"]);
                         return ((0, jsx_runtime_1.jsx)(panels_1.MessagePanel, Object.assign({ className: (0, classnames_1.default)(className, panelClassName), panel: panel, title: (_a = fields === null || fields === void 0 ? void 0 : fields.title) === null || _a === void 0 ? void 0 : _a.value, headline: (_b = fields === null || fields === void 0 ? void 0 : fields.headline) === null || _b === void 0 ? void 0 : _b.value, caption: (_c = fields === null || fields === void 0 ? void 0 : fields.caption) === null || _c === void 0 ? void 0 : _c.value, ctas: (_d = fields === null || fields === void 0 ? void 0 : fields.ctas) === null || _d === void 0 ? void 0 : _d.value }, panelProps)));
                     }
                     // visual panel
                     case 'visual': {
                         const { model: { fields, config }, visualPanelProps } = props;
-                        const _p = visualPanelProps !== null && visualPanelProps !== void 0 ? visualPanelProps : {}, { className: panelClassName } = _p, panelProps = __rest(_p, ["className"]);
+                        const _q = visualPanelProps !== null && visualPanelProps !== void 0 ? visualPanelProps : {}, { className: panelClassName } = _q, panelProps = __rest(_q, ["className"]);
                         return ((0, jsx_runtime_1.jsx)(panels_1.VisualPanel, Object.assign({ className: (0, classnames_1.default)(className, panelClassName), panel: panel, visual: (_e = fields === null || fields === void 0 ? void 0 : fields.visual) === null || _e === void 0 ? void 0 : _e.value, anchor: (_f = funnel_core_1.Schema.EnumField.Value.fromData(config === null || config === void 0 ? void 0 : config.visualAnchor)) !== null && _f !== void 0 ? _f : 'center', controls: (_g = funnel_core_1.Schema.BooleanField.Value.fromData(config === null || config === void 0 ? void 0 : config.visualControls)) !== null && _g !== void 0 ? _g : true, autoPlay: (_h = funnel_core_1.Schema.BooleanField.Value.fromData(config === null || config === void 0 ? void 0 : config.visualAutoPlay)) !== null && _h !== void 0 ? _h : false, loop: (_j = funnel_core_1.Schema.BooleanField.Value.fromData(config === null || config === void 0 ? void 0 : config.visualLoop)) !== null && _j !== void 0 ? _j : false, mute: (_k = funnel_core_1.Schema.BooleanField.Value.fromData(config === null || config === void 0 ? void 0 : config.visualMute)) !== null && _k !== void 0 ? _k : false }, panelProps)));
                     }
                     // list panel
                     case 'list': {
                         const { model: { fields, config }, listPanelProps, children } = props;
-                        const _q = listPanelProps !== null && listPanelProps !== void 0 ? listPanelProps : {}, { className: panelClassName, itemProps } = _q, panelProps = __rest(_q, ["className", "itemProps"]);
+                        const _r = listPanelProps !== null && listPanelProps !== void 0 ? listPanelProps : {}, { className: panelClassName, itemProps } = _r, panelProps = __rest(_r, ["className", "itemProps"]);
                         const listLayout = (_l = funnel_core_1.Schema.EnumField.Value.fromData(config === null || config === void 0 ? void 0 : config.listLayout)) !== null && _l !== void 0 ? _l : 'card';
-                        return ((0, jsx_runtime_1.jsx)(panels_1.ListPanel, Object.assign({ className: (0, classnames_1.default)(className, panelClassName), panel: panel, layout: listLayout, items: (_m = fields === null || fields === void 0 ? void 0 : fields.list) === null || _m === void 0 ? void 0 : _m.value }, panelProps, { children: item => children({ item, itemProps, listLayout, blockLayout }) })));
+                        // determine renderer
+                        const renderItem = children !== null && children !== void 0 ? children : (_m = args.list) === null || _m === void 0 ? void 0 : _m.renderItem;
+                        if (!renderItem) {
+                            throw new funnel_core_1.IllegalStateError(`No item render specified for list panel`);
+                        }
+                        return ((0, jsx_runtime_1.jsx)(panels_1.ListPanel, Object.assign({ className: (0, classnames_1.default)(className, panelClassName), panel: panel, layout: listLayout, items: (_o = fields === null || fields === void 0 ? void 0 : fields.list) === null || _o === void 0 ? void 0 : _o.value }, panelProps, { children: item => renderItem({ item, itemProps, listLayout, blockLayout }) })));
                     }
                 }
             };
@@ -114,7 +119,7 @@ function Block(_a) {
             panelKeyMapping.visualKey = 'visual';
         }
         if (list) {
-            fieldsSchema = Object.assign(Object.assign({}, fieldsSchema), { list });
+            fieldsSchema = Object.assign(Object.assign({}, fieldsSchema), { list: list.schema });
             panelKeyMapping.listKey = 'list';
         }
         // create config schema

package/dist/server/blocks/MediaLayout.d.ts

@@ -1,9 +1,8 @@
 import { Schema } from '@nascentdigital/funnel-core';
-import { ComponentProps, JSXElementConstructor } from 'react';
-import { EmbeddedVideo } from '../../client/refs';
+import { ComponentProps } from 'react';
 import { Media } from '../fields';
 import { Block } from './Block';
-export declare function MediaLayout({ EmbeddedVideoElement, ...props }: MediaLayout.Props): import("react/jsx-runtime").JSX.Element;
+export declare function MediaLayout({ ...props }: MediaLayout.Props): import("react/jsx-runtime").JSX.Element;
 export declare namespace MediaLayout {
     const Component: import("react").FunctionComponent<Block.Create.Result.ComponentProps<"_nd-mediaLayout", true, undefined, Schema.ListField<{
         media: Schema.CollectionField<Schema.Collection<{
@@ -31,7 +30,5 @@ export declare namespace MediaLayout {
         }>>;
     }>, Schema.Block.Config>;
     type Model = Schema.Block.LinkedData<typeof schema>;
-    type Props = Omit<ComponentProps<typeof Component>, 'children'> & {
-        EmbeddedVideoElement?: JSXElementConstructor<EmbeddedVideo.Props>;
-    };
+    type Props = Omit<ComponentProps<typeof Component>, 'children'>;
 }

package/dist/server/blocks/MediaLayout.js

@@ -14,14 +14,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.MediaLayout = MediaLayout;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const funnel_core_1 = require("@nascentdigital/funnel-core");
-const refs_1 = require("../../client/refs");
 const fields_1 = require("../fields");
 const Block_1 = require("./Block");
 // block
 function MediaLayout(_a) {
-    var { EmbeddedVideoElement = refs_1.EmbeddedVideo } = _a, props = __rest(_a, ["EmbeddedVideoElement"]);
-    // render
-    return ((0, jsx_runtime_1.jsx)(MediaLayout.Component, Object.assign({}, props, { children: ({ item }) => (0, jsx_runtime_1.jsx)("div", { className: "nd-MediaLayout-itemWrap", children: (0, jsx_runtime_1.jsx)(fields_1.Media, { className: "nd-MediaLayout-item", media: item.value }) }) })));
+    var props = __rest(_a, []);
+    return (0, jsx_runtime_1.jsx)(MediaLayout.Component, Object.assign({}, props));
 }
 // extension
 (function (MediaLayout) {
@@ -33,14 +31,17 @@ function MediaLayout(_a) {
         version: 1,
         className: 'nd-MediaLayout',
         message: true,
-        list: funnel_core_1.Schema.Field.list({
-            name: 'Assets',
-            description: 'Add one or more assets and then configure the layout.',
-            itemTypes: {
-                media: fields_1.Media.schema
-            },
-            min: 1,
-            max: 20
-        })
+        list: {
+            schema: funnel_core_1.Schema.Field.list({
+                name: 'Assets',
+                description: 'Add one or more assets and then configure the layout.',
+                itemTypes: {
+                    media: fields_1.Media.schema
+                },
+                min: 1,
+                max: 20
+            }),
+            renderItem: ({ item }) => ((0, jsx_runtime_1.jsx)("div", { className: "nd-MediaLayout-itemWrap", children: (0, jsx_runtime_1.jsx)(fields_1.Media, { className: "nd-MediaLayout-item", media: item.value }) }))
+        }
     }), MediaLayout.Component = _a.Component, MediaLayout.schema = _a.schema;
 })(MediaLayout || (exports.MediaLayout = MediaLayout = {}));

package/dist/server/blocks/Message.js

@@ -19,14 +19,14 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const funnel_core_1 = require("@nascentdigital/funnel-core");
 const classnames_1 = __importDefault(require("classnames"));
 const Block_1 = require("./Block");
-// component
+// block
 function Message(_a) {
     var _b;
     var { className } = _a, props = __rest(_a, ["className"]);
     // extract variant
     const variant = funnel_core_1.Schema.EnumField.Value.fromData((_b = props.model) === null || _b === void 0 ? void 0 : _b.config.variant);
     // render
-    return (0, jsx_runtime_1.jsx)(Message.Component, Object.assign({ className: (0, classnames_1.default)(className, 'nd-Message', Message.Variant.getClassName(variant)) }, props));
+    return ((0, jsx_runtime_1.jsx)(Message.Component, Object.assign({ className: (0, classnames_1.default)(className, 'nd-Message', Message.Variant.getClassName(variant)) }, props)));
 }
 // extension
 (function (Message) {

package/dist/server/blocks/index.d.ts

@@ -1,5 +1,4 @@
 export * from './Block';
-export * from './Editorial';
 export * from './Form';
 export * from './FormMessage';
 export * from './MediaLayout';

package/dist/server/blocks/index.js

@@ -15,7 +15,6 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./Block"), exports);
-__exportStar(require("./Editorial"), exports);
 __exportStar(require("./Form"), exports);
 __exportStar(require("./FormMessage"), exports);
 __exportStar(require("./MediaLayout"), exports);

package/dist/server/fields/Media.js

@@ -58,8 +58,8 @@ function Media(_a) {
             description: 'Image content for your website',
             version: 1,
             fields: {
-                image: funnel_core_1.Schema.Field.image({ name: 'Primary' }),
-                mobileImage: funnel_core_1.Schema.Field.image({ name: 'Mobile Optimized' }).optional()
+                image: funnel_core_1.Schema.Field.image({ name: 'Primary Image' }),
+                mobileImage: funnel_core_1.Schema.Field.image({ name: 'Mobile Image' }).optional()
             }
         });
     })(Image = Media.Image || (Media.Image = {}));

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@nascentdigital/funnel-ui",
   "description": "UI components for funnel",
-  "version": "5.0.1",
+  "version": "5.0.3",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
-    "access": "restricted"
+    "access": "public"
   },
   "repository": {
     "url": "git+https://github.com/nascentdigital/funnel.git",
@@ -69,5 +69,5 @@
     "react-dom": "^19",
     "ts-jest": "^29.3.2"
   },
-  "gitHead": "6ac66e04e5d6d10b959826b84cf3827422ddf47b"
+  "gitHead": "0d1cc7d78504e8819998d928ffb342d622f75690"
 }

package/dist/server/blocks/Editorial.d.ts

@@ -1,33 +0,0 @@
-import { Schema } from '@nascentdigital/funnel-core';
-import { ReactNode } from 'react';
-import { HTMLBlockElement } from '../../types';
-import { Caption, FreeFormContent, Headline, Title, Visual } from '../fields';
-import { BlockConfig } from '../schema';
-export declare function Editorial({ className, model, titleTag, headlineTag, captionTag, freeFormContentTag, headerDecorator, visualDecorator, visualLoading, ...props }: Editorial.Props): import("react/jsx-runtime").JSX.Element | null;
-export declare namespace Editorial {
-    const schema: Schema.Block<"_nd-editorial", {
-        visual: Schema.Optional<Schema.AssetField<Schema.AssetField.LinkedValue.Visual>>;
-        title: Schema.Optional<Schema.TextField>;
-        headline: Schema.Optional<Schema.RichTextField>;
-        caption: Schema.Optional<Schema.RichTextField>;
-        ctas: Schema.Optional<Schema.ListField<{
-            cta: Schema.LinkField;
-        }>>;
-        content: Schema.RichTextField;
-        extraContent: Schema.Optional<Schema.RichTextField>;
-    }, {
-        theme: Schema.EnumField<Readonly<import("@nascentdigital/funnel-core").BlockThemes.Options>>;
-        visualLayout: Schema.EnumField<Schema.EnumField.Options<BlockConfig.VisualLayout>>;
-    }>;
-    type Props = HTMLBlockElement<'div'> & {
-        model: Model;
-        titleTag?: Title.Tag;
-        headlineTag?: Headline.Tag;
-        captionTag?: Caption.Tag;
-        freeFormContentTag?: FreeFormContent.Tag;
-        headerDecorator?: ReactNode;
-        visualDecorator?: ReactNode;
-        visualLoading?: Visual.Loading;
-    };
-    type Model = Schema.Block.LinkedData<typeof schema>;
-}

package/dist/server/blocks/Editorial.js

@@ -1,80 +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.Editorial = Editorial;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const funnel_core_1 = require("@nascentdigital/funnel-core");
-const classnames_1 = __importDefault(require("classnames"));
-const fields_1 = require("../fields");
-const schema_1 = require("../schema");
-// block
-function Editorial(_a) {
-    var _b, _c, _d, _e, _f;
-    var { className, model, titleTag = 'span', headlineTag = 'div', captionTag = 'div', freeFormContentTag = 'div', headerDecorator, visualDecorator, visualLoading = 'eager' } = _a, props = __rest(_a, ["className", "model", "titleTag", "headlineTag", "captionTag", "freeFormContentTag", "headerDecorator", "visualDecorator", "visualLoading"]);
-    // dont render if missing model
-    if (!model) {
-        console.warn('[Editorial] attempted to render without editorial model');
-        return null;
-    }
-    // render
-    const { title: titleRaw, headline: headlineRaw, caption: captionRaw, ctas: ctasRaw, visual: visualRaw, content: contentRaw, extraContent: extraContentRaw } = model.fields;
-    const visual = visualRaw === null || visualRaw === void 0 ? void 0 : visualRaw.value;
-    const title = titleRaw === null || titleRaw === void 0 ? void 0 : titleRaw.value;
-    const headline = headlineRaw === null || headlineRaw === void 0 ? void 0 : headlineRaw.value;
-    const caption = captionRaw === null || captionRaw === void 0 ? void 0 : captionRaw.value;
-    const ctas = (_b = ctasRaw === null || ctasRaw === void 0 ? void 0 : ctasRaw.value) !== null && _b !== void 0 ? _b : [];
-    const content = contentRaw === null || contentRaw === void 0 ? void 0 : contentRaw.value;
-    const extraContent = extraContentRaw === null || extraContentRaw === void 0 ? void 0 : extraContentRaw.value;
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: (0, classnames_1.default)(className, 'nd-Block nd-Editorial', schema_1.BlockConfig.Theme.getClassName((_d = (_c = model === null || model === void 0 ? void 0 : model.config) === null || _c === void 0 ? void 0 : _c.theme) === null || _d === void 0 ? void 0 : _d.value), schema_1.BlockConfig.VisualLayout.getClassName((_f = (_e = model === null || model === void 0 ? void 0 : model.config) === null || _e === void 0 ? void 0 : _e.visualLayout) === null || _f === void 0 ? void 0 : _f.value)) }, props, { children: (0, jsx_runtime_1.jsxs)("div", { className: "nd-Editorial-content", children: [(title || headline || caption || ctas.length > 0) &&
-                    (0, jsx_runtime_1.jsxs)("div", { className: "nd-Editorial-headerWrap", children: [(0, jsx_runtime_1.jsxs)("div", { className: "nd-Editorial-header", children: [title &&
-                                        (0, jsx_runtime_1.jsx)(fields_1.Title, { className: "nd-Editorial-title", as: titleTag, title: title }), headline &&
-                                        (0, jsx_runtime_1.jsx)(fields_1.Headline, { className: "nd-Editorial-headline", as: headlineTag, headline: headline }), caption &&
-                                        (0, jsx_runtime_1.jsx)(fields_1.Caption, { className: "nd-Editorial-caption", as: captionTag, caption: caption }), ctas.length > 0 &&
-                                        (0, jsx_runtime_1.jsx)("div", { className: "nd-Editorial-ctas", children: ctas.map(cta => (0, jsx_runtime_1.jsx)(fields_1.Link, { className: "nd-Editorial-cta", link: cta.value }, cta.id)) })] }), headerDecorator] }), (0, jsx_runtime_1.jsx)("div", { className: "nd-Editorial-bodyWrap", children: (0, jsx_runtime_1.jsxs)("div", { className: "nd-Editorial-body", children: [(visual || visualDecorator) &&
-                                (0, jsx_runtime_1.jsxs)("div", { className: "nd-Editorial-visualWrap", children: [visual &&
-                                            (0, jsx_runtime_1.jsx)(fields_1.Visual, { className: "nd-Editorial-visual", visual: visual, loading: visualLoading }), visualDecorator] }), (0, jsx_runtime_1.jsxs)("div", { className: "nd-Editorial-columns", children: [(0, jsx_runtime_1.jsx)(fields_1.FreeFormContent, { as: freeFormContentTag, className: "nd-Editorial-freeFormContent", content: content }), extraContent &&
-                                        (0, jsx_runtime_1.jsx)(fields_1.FreeFormContent, { as: freeFormContentTag, className: "nd-Editorial-freeFormContent", content: extraContent })] })] }) })] }) })));
-}
-// extension
-(function (Editorial) {
-    // schema
-    Editorial.schema = funnel_core_1.Schema.Block.create({
-        id: '_nd-editorial',
-        name: 'Editorial',
-        version: 1,
-        config: {
-            theme: schema_1.BlockConfig.Theme.schema,
-            visualLayout: schema_1.BlockConfig.VisualLayout.schema
-        },
-        fields: {
-            visual: fields_1.Visual.schema.optional(),
-            title: fields_1.Title.schema.modify({ description: 'A short intro or heading for the message' }).optional(),
-            headline: fields_1.Headline.schema.optional(),
-            caption: fields_1.Caption.schema.optional(),
-            ctas: funnel_core_1.Schema.Field.list({
-                name: 'CTAs',
-                description: 'Add your call-to-actions in the order you\'d like them to appear *(these are optional)*.',
-                itemTypes: {
-                    cta: funnel_core_1.Schema.Field.link({ name: 'Call to Action' })
-                },
-                min: 1,
-                max: 2
-            }).optional(),
-            content: fields_1.FreeFormContent.schema.full,
-            extraContent: fields_1.FreeFormContent.schema.full.optional()
-        }
-    });
-})(Editorial || (exports.Editorial = Editorial = {}));