@nascentdigital/funnel-ui 4.6.7 → 5.0.2

package/dist/server/layouts/accordion/AccordionContainer.js

@@ -0,0 +1,18 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AccordionContainer = AccordionContainer;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("motion/react");
+const react_2 = require("react");
+const Accordion_1 = require("./Accordion");
+const AccordionContext_1 = require("./AccordionContext");
+// component
+function AccordionContainer({ children }) {
+    // bind context
+    const context = (0, react_2.useMemo)(() => ({
+        accordion: new Accordion_1.Accordion()
+    }), []);
+    // render
+    return ((0, jsx_runtime_1.jsx)(AccordionContext_1.AccordionContext.Provider, { value: context, children: (0, jsx_runtime_1.jsx)(react_1.MotionConfig, { transition: { duration: 0.3 }, children: children }) }));
+}

package/dist/server/layouts/accordion/AccordionContext.d.ts

@@ -0,0 +1,7 @@
+import { Accordion } from './Accordion';
+export declare const AccordionContext: import("react").Context<AccordionContext.Data>;
+export declare namespace AccordionContext {
+    type Data = {
+        accordion?: Accordion;
+    };
+}

package/dist/server/layouts/accordion/AccordionContext.js

@@ -0,0 +1,7 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AccordionContext = void 0;
+const react_1 = require("react");
+// context
+exports.AccordionContext = (0, react_1.createContext)({});

package/dist/server/layouts/accordion/AccordionExpander.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+export declare function AccordionExpander({ className, header, content, ...props }: AccordionExpander.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace AccordionExpander {
+    type Props = {
+        className?: string;
+        header: ReactNode;
+        content: ReactNode;
+    };
+}

package/dist/server/layouts/accordion/AccordionExpander.js

@@ -0,0 +1,72 @@
+'use client';
+"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.AccordionExpander = AccordionExpander;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = require("motion/react");
+const react_2 = require("react");
+const useAccordion_1 = require("./useAccordion");
+// block
+function AccordionExpander(_a) {
+    var { className, header, content } = _a, props = __rest(_a, ["className", "header", "content"]);
+    // bind hooks
+    const headerId = (0, react_2.useId)();
+    const expanderId = (0, react_2.useId)();
+    const accordion = (0, useAccordion_1.useAccordion)();
+    const isFocused = accordion.focused === expanderId;
+    const isExpanded = accordion.isExpanded(expanderId);
+    // helpers
+    const onToggle = () => {
+        if (isExpanded) {
+            accordion.onCollapse(expanderId);
+        }
+        else {
+            accordion.onExpand(expanderId);
+        }
+    };
+    // render
+    return ((0, jsx_runtime_1.jsxs)(react_1.motion.li, { className: (0, classnames_1.default)('nd-AccordionItem', {
+            'nd-AccordionItem-expanded': isExpanded
+        }), initial: false, animate: isExpanded ? 'open' : 'closed', children: [(0, jsx_runtime_1.jsxs)(react_1.motion.button, { id: headerId, className: "nd-AccordionItem-headerWrap", onClick: onToggle, onFocus: onlyKeyboardFocus(() => accordion.onFocus(expanderId)), onBlur: () => accordion.onBlur(expanderId), "aria-controls": expanderId, "aria-expanded": isExpanded, children: [(0, jsx_runtime_1.jsx)("div", { className: "nd-AccordionItem-header", children: header }), isFocused && ((0, jsx_runtime_1.jsx)(react_1.motion.div, { layoutId: "focus-ring", className: "nd-AccordionItem-headerFocus" }))] }), (0, jsx_runtime_1.jsx)(react_1.motion.div, { id: expanderId, className: "nd-AccordionItem-panelWrap", variants: {
+                    open: {
+                        height: "auto",
+                        maskImage: "linear-gradient(to bottom, black 100%, transparent 100%)",
+                    },
+                    closed: {
+                        height: 0,
+                        maskImage: "linear-gradient(to bottom, black 50%, transparent 100%)",
+                    },
+                }, "aria-labelledby": headerId, "aria-hidden": !isExpanded, children: (0, jsx_runtime_1.jsx)(react_1.motion.div, { className: "nd-AccordionItem-panel", variants: {
+                        open: {
+                            filter: "blur(0px)",
+                            opacity: 1,
+                        },
+                        closed: {
+                            filter: "blur(2px)",
+                            opacity: 0,
+                        },
+                    }, children: content }) })] }));
+}
+// helpers
+function onlyKeyboardFocus(callback) {
+    return (e) => {
+        if (e.type === "focus" && e.target.matches(":focus-visible")) {
+            callback();
+        }
+    };
+}

package/dist/server/layouts/accordion/AccordionItem.d.ts

@@ -0,0 +1,8 @@
+import { PropsWithChildren, ReactNode } from 'react';
+export declare function AccordionItem({ className, header, children: content, ...props }: AccordionItem.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace AccordionItem {
+    type Props = PropsWithChildren & {
+        className?: string;
+        header: ReactNode;
+    };
+}

package/dist/server/layouts/accordion/AccordionItem.js

@@ -0,0 +1,22 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AccordionItem = AccordionItem;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const AccordionExpander_1 = require("./AccordionExpander");
+// component
+function AccordionItem(_a) {
+    var { className, header, children: content } = _a, props = __rest(_a, ["className", "header", "children"]);
+    // render
+    return ((0, jsx_runtime_1.jsx)(AccordionExpander_1.AccordionExpander, Object.assign({}, props, { className: className, header: header, content: content })));
+}

package/dist/server/layouts/accordion/AccordionLayout.d.ts

@@ -0,0 +1,7 @@
+import { HTMLAttributes, ReactElement } from 'react';
+export declare function AccordionLayout({ className, children, ...props }: AccordionLayout.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace AccordionLayout {
+    type Props = Omit<HTMLAttributes<HTMLUListElement>, 'children'> & {
+        children: ReadonlyArray<ReactElement>;
+    };
+}

package/dist/server/layouts/accordion/AccordionLayout.js

@@ -0,0 +1,26 @@
+"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.AccordionLayout = AccordionLayout;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const AccordionContainer_1 = require("./AccordionContainer");
+// component
+function AccordionLayout(_a) {
+    var { className, children } = _a, props = __rest(_a, ["className", "children"]);
+    // render
+    return ((0, jsx_runtime_1.jsx)(AccordionContainer_1.AccordionContainer, { children: (0, jsx_runtime_1.jsx)("ul", Object.assign({}, props, { className: (0, classnames_1.default)(className, 'nd-AccordionLayout'), children: children })) }));
+}

package/dist/server/layouts/accordion/AccordionOptions.d.ts

@@ -0,0 +1,3 @@
+export type AccordionOptions = {
+    multiExpand: boolean;
+};

package/dist/server/layouts/accordion/AccordionOptions.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/server/layouts/accordion/index.d.ts

@@ -0,0 +1,3 @@
+export * from './AccordionItem';
+export * from './AccordionLayout';
+export * from './AccordionOptions';

package/dist/server/layouts/accordion/index.js

@@ -0,0 +1,19 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./AccordionItem"), exports);
+__exportStar(require("./AccordionLayout"), exports);
+__exportStar(require("./AccordionOptions"), exports);

package/dist/server/layouts/accordion/useAccordion.d.ts

@@ -0,0 +1 @@
+export declare function useAccordion(): import("./Accordion").Accordion;

package/dist/server/layouts/accordion/useAccordion.js

@@ -0,0 +1,34 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useAccordion = useAccordion;
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const react_1 = require("react");
+const useTouch_1 = require("../../../client/hooks/useTouch");
+const AccordionContext_1 = require("./AccordionContext");
+// hook
+function useAccordion() {
+    // bind context (or fail)
+    const { accordion } = (0, react_1.useContext)(AccordionContext_1.AccordionContext);
+    const touch = (0, useTouch_1.useTouch)();
+    // sync/touch on change
+    (0, react_1.useEffect)(() => {
+        // skip if not bound
+        if (!accordion) {
+            return;
+        }
+        // bind to changes
+        const subscriptions = [
+            accordion.expanded$.subscribe(touch),
+            accordion.focused$.subscribe(touch)
+        ];
+        // unbind on unmount
+        return () => subscriptions.forEach(subscription => subscription.unsubscribe());
+    }, [accordion, touch]);
+    // fail if context isn't bound
+    if (!accordion) {
+        throw new funnel_core_1.InvalidOperationError('Cannot access Accordion outside of AccordionContainer');
+    }
+    // return accordion
+    return accordion;
+}

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

@@ -1,6 +1,7 @@
+export * from './accordion';
+export * from './grid';
 export * from './BentoLayout';
 export * from './CardLayout';
 export * from './BrickLayout';
 export * from './FlexWrapLayout';
 export * from './StackLayout';
-export * from './grid';

package/dist/server/layouts/index.js

@@ -14,9 +14,10 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./accordion"), exports);
+__exportStar(require("./grid"), exports);
 __exportStar(require("./BentoLayout"), exports);
 __exportStar(require("./CardLayout"), exports);
 __exportStar(require("./BrickLayout"), exports);
 __exportStar(require("./FlexWrapLayout"), exports);
 __exportStar(require("./StackLayout"), exports);
-__exportStar(require("./grid"), exports);

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

@@ -1,20 +1,6 @@
-import { BlockLayout, Schema } from '@nascentdigital/funnel-core';
-import { BlockConfig, ItemAlignment, PanelLayout, RowRatio, SlotVariation } from '../schema';
-import { ListPanel } from './ListPanel';
-import { MessagePanel } from './MessagePanel';
-import { VisualPanel } from './VisualPanel';
+import { BlockLayout } from '@nascentdigital/funnel-core';
+import { PanelLayout, SlotVariation } from '../schema';
 export declare namespace BlockPanel {
-    type Props = {
-        alignX?: BlockLayout.Alignment;
-        alignY?: BlockLayout.Alignment;
-        size?: BlockLayout.Size;
-        fullbleed?: boolean;
-        mobileOrder?: BlockLayout.MobileOrder;
-    };
-    type GetClassNamesArgs = Props & {
-        panel: BlockLayout.Panel;
-    };
-    function getClassNames({ panel, alignX, alignY, size, fullbleed, mobileOrder }: GetClassNamesArgs): string;
     namespace Slots {
         type Items = 'M' | 'V' | 'L';
         namespace Items {
@@ -32,8 +18,8 @@ export declare namespace BlockPanel {
             };
             function compute({ panels: { message, visual, list }, layout, variation }: ComputeArgs): Items[];
         }
-        function forLayout(layout: PanelLayout): 1 | 2 | 3;
         type FlexDirection = 'xy' | 'x' | 'y' | 'none';
+        function forLayout(layout: PanelLayout): 1 | 2 | 3;
         namespace GetFlexDirection {
             type Args = {
                 layout: PanelLayout;
@@ -44,69 +30,17 @@ export declare namespace BlockPanel {
         function getFlexDirections({ layout, items: [item1, item2, item3] }: GetFlexDirection.Args): GetFlexDirection.Result;
         function contentAlignmentExists(layout: PanelLayout): boolean;
     }
-    namespace GetConfigSchema {
-        type Key<T extends string> = T | Key.WithLabel<T>;
-        namespace Key {
-            type WithLabel<T extends string> = {
-                key: T;
-                name: string;
-            };
-            type Optional<T extends string | undefined> = T extends string ? Key<T> : undefined;
-            function normalize<T extends string>(key: Key<T>): WithLabel<T>;
-        }
-        type Args<TFields extends Schema.Fields, TMessageKey extends string | undefined, TVisualKey extends Schema.Fields.AssetFields.Keys<TFields> | undefined, TListKey extends Schema.Fields.ListFields.Keys<TFields> | undefined, TConfigExtended extends Schema.Block.Config> = {
-            fields: TFields;
-            extend?: TConfigExtended;
-            messageKey?: Key.Optional<TMessageKey>;
-            visualKey?: Key.Optional<TVisualKey>;
-            listKey?: TListKey;
-        };
-        type Result<TFields extends Schema.Fields, TMessageKey extends string | undefined, TVisualKey extends Schema.Fields.AssetFields.Keys<TFields> | undefined, TListKey extends Schema.Fields.ListFields.Keys<TFields> | undefined, TConfigExtended extends Schema.Block.Config> = (BlockConfig.Presets.ThemeOnly.Schema & {
-            layout: PanelLayout.Schema;
-        } & {
-            slotVariation: SlotVariation.Schema;
-        } & (TMessageKey extends string ? MessagePanel.Config.Entries<TMessageKey> : {}) & (TVisualKey extends Schema.Fields.AssetFields.Keys<TFields> ? VisualPanel.Config.Entries<TVisualKey> : {}) & (TListKey extends Schema.Fields.ListFields.Keys<TFields> ? ListPanel.Config.Entries<TListKey> : {}) & (TMessageKey extends string ? TVisualKey extends Schema.Fields.AssetFields.Keys<TFields> ? ({
-            contentAlign: ItemAlignment.Vertical.Schema;
-            contentSplit: RowRatio.Schema;
-        }) : TListKey extends Schema.Fields.ListFields.Keys<TFields> ? ({
-            contentAlign: ItemAlignment.Vertical.Schema;
-            contentSplit: RowRatio.Schema;
-        }) : {} : TVisualKey extends Schema.Fields.AssetFields.Keys<TFields> ? TListKey extends Schema.Fields.ListFields.Keys<TFields> ? ({
-            contentAlign: ItemAlignment.Vertical.Schema;
-            contentSplit: RowRatio.Schema;
-        }) : {} : {})) & TConfigExtended;
-    }
-    function getConfigSchema<TFields extends Schema.Fields, TMessageKey extends string | undefined = undefined, TVisualKey extends Schema.Fields.AssetFields.Keys<TFields> | undefined = undefined, TListKey extends Schema.Fields.ListFields.Keys<TFields> | undefined = undefined, TConfigExtended extends Schema.Block.Config = Schema.Block.Config>({ extend, messageKey: messageKeyRaw, visualKey: visualKeyRaw, listKey: listKeyRaw }: GetConfigSchema.Args<TFields, TMessageKey, TVisualKey, TListKey, TConfigExtended>): GetConfigSchema.Result<TFields, TMessageKey, TVisualKey, TListKey, TConfigExtended>;
-    type GetConfigArgs<TConfig extends Schema.Block.Config, TFields extends Schema.Fields, TMessageFieldKeys extends Partial<MessagePanel.Fields.Keys> | undefined, TMessageKey extends string | undefined, TVisualKey extends Schema.Fields.AssetFields.Keys<TFields> | undefined, TListKey extends Schema.Fields.ListFields.Keys<TFields> | undefined> = {
-        args: Schema.Block.GetConfig.Args<TConfig, TFields>;
-        messageFieldKeys?: TMessageFieldKeys;
-        messageKey?: TMessageKey;
-        visualKey?: TVisualKey;
-        listKey?: TListKey;
+    type Props = {
+        alignX?: BlockLayout.Alignment;
+        alignY?: BlockLayout.Alignment;
+        size?: BlockLayout.Size;
+        fullbleed?: boolean;
+        mobileOrder?: BlockLayout.MobileOrder;
     };
-    function getConfig<TConfig extends Schema.Block.Config, TFields extends Schema.Fields, TMessageFieldKeys extends Partial<MessagePanel.Fields.Keys> | undefined, TMessageKey extends string | undefined, TVisualKey extends Schema.Fields.AssetFields.Keys<TFields> | undefined, TListKey extends Schema.Fields.ListFields.Keys<TFields> | undefined>({ args, messageFieldKeys, messageKey, visualKey, listKey }: GetConfigArgs<TConfig, TFields, TMessageFieldKeys, TMessageKey, TVisualKey, TListKey>): Schema.Block.GetConfig.Result<TConfig>;
-    type GetLayoutArgs<TConfig extends Schema.Block.Config, TFields extends Schema.Fields, TMessageFieldKeys extends Partial<MessagePanel.Fields.Keys> | undefined, TMessageKey extends string, TVisualKey extends Schema.Fields.AssetFields.Keys<TFields>, TListKey extends Schema.Fields.ListFields.Keys<TFields>> = {
-        args: Schema.Block.GetLayout.Args<TConfig, TFields>;
-        messageFieldKeys?: TMessageFieldKeys;
-        messageKey?: TMessageKey;
-        visualKey?: TVisualKey;
-        listKey?: TListKey;
+    type GetClassNamesArgs = Props & {
+        panel: BlockLayout.Panel;
     };
-    function getLayout<TConfig extends Schema.Block.Config, TFields extends Schema.Fields, TMessageFieldKeys extends Partial<MessagePanel.Fields.Keys> | undefined, TMessageKey extends string, TVisualKey extends Schema.Fields.AssetFields.Keys<TFields>, TListKey extends Schema.Fields.ListFields.Keys<TFields>>({ args, messageFieldKeys, messageKey, visualKey, listKey }: GetLayoutArgs<TConfig, TFields, TMessageFieldKeys, TMessageKey, TVisualKey, TListKey>): BlockLayout;
-    namespace GetActivePanels {
-        type Args<TFields extends Schema.Fields, TMessageFieldKeys extends Partial<MessagePanel.Fields.Keys> | undefined, TMessageKey extends string | undefined, TVisualKey extends Schema.Fields.AssetFields.Keys<TFields>, TListKey extends Schema.Fields.ListFields.Keys<TFields>> = {
-            fields: Partial<Schema.Block.Data.ForFields<TFields>> | Partial<Schema.Block.LinkedData.ForFields<TFields>>;
-            messageFieldKeys?: TMessageFieldKeys;
-            messageKey?: TMessageKey;
-            visualKey?: TVisualKey;
-            listKey?: TListKey;
-        };
-        type Result = {
-            message: PanelStatus;
-            visual: PanelStatus;
-            list: PanelStatus;
-        };
-        type PanelStatus = 'valid' | 'invalid' | false;
-    }
-    function getActivePanels<TFields extends Schema.Fields, TMessageFieldKeys extends Partial<MessagePanel.Fields.Keys> | undefined, TMessageKey extends string | undefined, TVisualKey extends Schema.Fields.AssetFields.Keys<TFields>, TListKey extends Schema.Fields.ListFields.Keys<TFields>>({ fields: fieldsRaw, messageFieldKeys, messageKey, visualKey, listKey }: GetActivePanels.Args<TFields, TMessageFieldKeys, TMessageKey, TVisualKey, TListKey>): GetActivePanels.Result;
+    function getWrapClassName(): string;
+    function getClassNames({ panel, alignX, alignY, size, mobileOrder }: GetClassNamesArgs): string;
+    function getFullBleedClassNames({ panel, fullbleed, }: GetClassNamesArgs): string;
 }