@nascentdigital/funnel-editor 4.4.18

package/dist/core/components/interaction/DateTimePicker.js

@@ -0,0 +1,98 @@
+"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.DateTimePicker = DateTimePicker;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const client_1 = require("@nascentdigital/funnel-ui/client");
+const flatpickr_1 = __importDefault(require("flatpickr"));
+const react_1 = require("react");
+// styles
+require("flatpickr/dist/themes/dark.css");
+// component
+function DateTimePicker(_a) {
+    var { className, disabled = false, placeholder, date, onChange } = _a, optionsRaw = __rest(_a, ["className", "disabled", "placeholder", "date", "onChange"]);
+    // bind state + hooks
+    const [open, setOpen] = (0, react_1.useState)(false);
+    const [inputRef, input] = (0, client_1.useRefElement)();
+    const pickerRef = (0, react_1.useRef)(undefined);
+    const options = (0, client_1.useLatestValue)(optionsRaw);
+    const pickerOptions = (0, react_1.useMemo)(() => getFlatPickrOptions(options), [options]);
+    const onChangeRef = (0, react_1.useRef)(onChange);
+    onChangeRef.current = onChange;
+    // bind picker
+    (0, react_1.useEffect)(() => {
+        // skip if there's no input
+        if (!input) {
+            return;
+        }
+        // create picker
+        const picker = (0, flatpickr_1.default)(input, Object.assign(Object.assign({}, pickerOptions), { onChange: ([date]) => {
+                const onChange = onChangeRef.current;
+                if (onChange) {
+                    onChange(date);
+                }
+            } }));
+        pickerRef.current = picker;
+        console.debug('[DateTimePicker] picker is bound', picker);
+        // destroy picker on unmount
+        return () => {
+            // destroy picker
+            picker.destroy();
+            console.debug('[DateTimePicker] picker is unbound', picker);
+            // clear ref (if it's bound)
+            if (pickerRef.current === picker) {
+                pickerRef.current = undefined;
+            }
+        };
+    }, [input, pickerOptions]);
+    // sync date
+    (0, react_1.useEffect)(() => {
+        // skip if there's no picker
+        const picker = pickerRef.current;
+        if (!picker) {
+            console.debug('[DateTimePicker/syncDate] picker is not bound');
+            return;
+        }
+        // set date
+        if (date) {
+            console.debug('[DateTimePicker/syncDate] setting date', date);
+            picker.setDate(date);
+        }
+        // or clear it
+        else {
+            console.debug('[DateTimePicker/syncDate] clearing date');
+            picker.clear();
+        }
+    }, [date]);
+    // render picker
+    return ((0, jsx_runtime_1.jsx)("input", { ref: inputRef, className: className, disabled: disabled, placeholder: placeholder }));
+}
+function getFlatPickrOptions({ scope = 'time', minTime, maxTime, autoClose = false, defaultHour, }) {
+    return {
+        clickOpens: true,
+        closeOnSelect: autoClose,
+        defaultHour,
+        defaultMinute: 0,
+        minDate: minTime,
+        maxDate: maxTime,
+        enableTime: scope === 'time',
+        dateFormat: scope === 'month'
+            ? 'M Y'
+            : scope === 'day'
+                ? 'M j, Y'
+                : 'M j, Y - h:i K'
+    };
+}

package/dist/core/components/interaction/IconButton.d.ts

@@ -0,0 +1,26 @@
+import { HTMLAttributes } from 'react';
+import { Icon } from '../visuals';
+export declare const IconButton: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLButtonElement>, "children"> & {
+    variant?: IconButton.Variant;
+    icon: Icon.Variant;
+    size?: Extract<Icon.Size, "md" | "sm" | "xs">;
+    active?: boolean;
+    disabled?: boolean;
+} & import("react").RefAttributes<HTMLButtonElement>>;
+export declare namespace IconButton {
+    type Props = Omit<HTMLAttributes<HTMLButtonElement>, 'children'> & {
+        variant?: Variant;
+        icon: Icon.Variant;
+        size?: Extract<Icon.Size, 'md' | 'sm' | 'xs'>;
+        active?: boolean;
+        disabled?: boolean;
+    };
+    type Variant = 'primary' | 'secondary' | 'util' | 'toolbar';
+}
+export type GetIconButtonClassnamesArgs = {
+    variant: IconButton.Variant;
+    size: Icon.Size;
+    active: boolean;
+    disabled: boolean;
+};
+export declare function getIconButtonClassnames({ variant, size, active, disabled }: GetIconButtonClassnamesArgs): string;

package/dist/core/components/interaction/IconButton.js

@@ -0,0 +1,41 @@
+"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.IconButton = void 0;
+exports.getIconButtonClassnames = getIconButtonClassnames;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = require("react");
+const visuals_1 = require("../visuals");
+// component
+exports.IconButton = (0, react_1.forwardRef)(function IconButton(_a, ref) {
+    var { className, variant = 'util', icon, size = 'md', active = false, disabled = false } = _a, props = __rest(_a, ["className", "variant", "icon", "size", "active", "disabled"]);
+    // render
+    return ((0, jsx_runtime_1.jsx)("button", Object.assign({ ref: ref, className: (0, classnames_1.default)(className, getIconButtonClassnames({ variant, size, active, disabled })), disabled: disabled }, props, { children: (0, jsx_runtime_1.jsx)(visuals_1.Icon, { variant: icon, size: size }) })));
+});
+function getIconButtonClassnames({ variant, size, active, disabled }) {
+    return (0, classnames_1.default)('iconbutton', {
+        'iconbutton-primary': variant === 'primary',
+        'iconbutton-secondary': variant === 'secondary',
+        'iconbutton-util': variant === 'util',
+        'iconbutton-toolbar': variant === 'toolbar',
+        'iconbutton-active': active,
+        'iconbutton-disabled': disabled,
+        'iconbutton-md': size === 'md',
+        'iconbutton-sm': size === 'sm',
+        'iconbutton-xs': size === 'xs'
+    });
+}

package/dist/core/components/interaction/IconLink.d.ts

@@ -0,0 +1,6 @@
+import { AnchorHTMLAttributes } from 'react';
+import { IconButton } from './IconButton';
+export declare const IconLink: import("react").ForwardRefExoticComponent<Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "children"> & Pick<IconButton.Props, "disabled" | "size" | "icon" | "variant"> & import("react").RefAttributes<HTMLAnchorElement>>;
+export declare namespace IconLink {
+    type Props = Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'children'> & Pick<IconButton.Props, 'variant' | 'icon' | 'size' | 'disabled'>;
+}

package/dist/core/components/interaction/IconLink.js

@@ -0,0 +1,28 @@
+"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.IconLink = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = require("react");
+const visuals_1 = require("../visuals");
+const IconButton_1 = require("./IconButton");
+// component
+exports.IconLink = (0, react_1.forwardRef)(function IconLink(_a, ref) {
+    var { className, variant = 'util', icon, size = 'md', disabled = false } = _a, props = __rest(_a, ["className", "variant", "icon", "size", "disabled"]);
+    // render
+    return ((0, jsx_runtime_1.jsx)("a", Object.assign({ ref: ref, className: (0, classnames_1.default)(className, (0, IconButton_1.getIconButtonClassnames)({ variant, size, active: false, disabled })) }, props, { children: (0, jsx_runtime_1.jsx)(visuals_1.Icon, { variant: icon, size: size }) })));
+});

package/dist/core/components/interaction/LinkGroup.d.ts

@@ -0,0 +1,18 @@
+import { Callback, Schema } from '@nascentdigital/funnel-core';
+import { HTMLAttributes } from 'react';
+import { EditorRouter } from '../../routing';
+/**
+ * Display a group of page and collection links
+ */
+export declare function LinkGroup({ title, message, pages, collections, onLinkClick, className, ...props }: LinkGroup.Props): import("react/jsx-runtime").JSX.Element | null;
+export declare namespace LinkGroup {
+    type Props = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+        title: string;
+        message?: string;
+        pages?: ReadonlyArray<Schema.Page.Data.AsLink>;
+        collections?: ReadonlyArray<Schema.Collection.Data.AsRef>;
+        onLinkClick?: Callback.Void;
+    };
+    function toPageTarget(page: Schema.Page.Data.AsLink): Omit<EditorRouter.Route.Page, 'target'>;
+    function toCollectionTarget(collection: Schema.Collection.Data.AsRef): Omit<EditorRouter.Route.Collection, 'target'>;
+}

package/dist/core/components/interaction/LinkGroup.js

@@ -0,0 +1,68 @@
+"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.LinkGroup = LinkGroup;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const routing_1 = require("../../routing");
+const visuals_1 = require("../visuals");
+const Button_1 = require("./Button");
+/**
+ * Display a group of page and collection links
+ */
+function LinkGroup(_a) {
+    var { title, message, pages = [], collections = [], onLinkClick, className } = _a, props = __rest(_a, ["title", "message", "pages", "collections", "onLinkClick", "className"]);
+    // bind hooks
+    const router = (0, routing_1.useEditorRouter)();
+    // render nothing if no links
+    if (pages.length === 0 && collections.length === 0) {
+        return null;
+    }
+    // build links
+    const pageLinks = pages.map(page => (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "secondary", onClick: async () => {
+            await router.navigateToPage(LinkGroup.toPageTarget(page), { mode: 'new' });
+            onLinkClick === null || onLinkClick === void 0 ? void 0 : onLinkClick();
+        }, children: page.name }));
+    const collectionLinks = collections.map(collection => (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "secondary", onClick: async () => {
+            await router.navigateToCollection(LinkGroup.toCollectionTarget(collection), { mode: 'new' });
+            onLinkClick === null || onLinkClick === void 0 ? void 0 : onLinkClick();
+        }, children: collection.name }));
+    // render
+    const links = [...pageLinks, ...collectionLinks];
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: (0, classnames_1.default)(className, 'flex flex-col gap-l6 p-l6', 'border border-solid border-outlineVariant rounded-sm') }, props, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-row gap-l4 items-center", children: [(0, jsx_runtime_1.jsx)(visuals_1.Icon, { className: "shrink-0 text-destructive-content", variant: "CircleAlert", size: "sm" }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h2", { className: "heading-xs", children: title }), message &&
+                                (0, jsx_runtime_1.jsx)("p", { className: "body-sm text-content-secondary", children: message })] })] }), (0, jsx_runtime_1.jsx)("ul", { className: "flex flex-row flex-wrap", children: links.map((link, index) => (0, jsx_runtime_1.jsx)("li", { children: link }, `linkGroupItem-${index}`)) })] })));
+}
+// extension
+(function (LinkGroup) {
+    // helpers
+    function toPageTarget(page) {
+        return {
+            page: page.type,
+            slug: page.slug,
+            region: page.region,
+            language: page.language
+        };
+    }
+    LinkGroup.toPageTarget = toPageTarget;
+    function toCollectionTarget(collection) {
+        return {
+            type: collection.type,
+            groupId: collection.groupId,
+            language: collection.language
+        };
+    }
+    LinkGroup.toCollectionTarget = toCollectionTarget;
+})(LinkGroup || (exports.LinkGroup = LinkGroup = {}));

package/dist/core/components/interaction/Loader.d.ts

@@ -0,0 +1,10 @@
+export declare function Loader({ id, className, size }: Loader.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace Loader {
+    type Props = {
+        id?: string;
+        className?: string;
+        size?: Size;
+    };
+    type Size = number | 'sm' | 'md' | 'lg' | 'xl';
+}
+export declare function getSize(size: Loader.Size): number;

package/dist/core/components/interaction/Loader.js

@@ -0,0 +1,35 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Loader = Loader;
+exports.getSize = getSize;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = require("react");
+// component
+function Loader({ id, className, size = 'md' }) {
+    // memoize size
+    const dimension = (0, react_1.useMemo)(() => getSize(size), [size]);
+    // render
+    return ((0, jsx_runtime_1.jsx)("span", { children: (0, jsx_runtime_1.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", id: id, className: (0, classnames_1.default)(className, 'nd-Loader'), viewBox: "0 0 64 64", fill: "none", width: dimension, height: dimension, children: [(0, jsx_runtime_1.jsx)("path", { d: "M32 5.3335V16.0002", strokeWidth: "6", strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M43.2002 20.8002L50.9335 13.0669", strokeWidth: "6", strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M48 32H58.6667", strokeWidth: "6", strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M43.2002 43.2002L50.9335 50.9335", strokeWidth: "6", strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M32 48V58.6667", strokeWidth: "6", strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M13.0664 50.9335L20.7997 43.2002", strokeWidth: "6", strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M5.33301 32H15.9997", strokeWidth: "6", strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M13.0664 13.0669L20.7997 20.8002", strokeWidth: "6", strokeLinecap: "round", strokeLinejoin: "round" })] }) }));
+}
+// helper
+function getSize(size) {
+    // use number directly
+    if (typeof size === 'number') {
+        return size;
+    }
+    // or translate
+    switch (size) {
+        case 'sm':
+            return 20;
+        case 'md':
+            return 32;
+        case 'lg':
+            return 48;
+        case 'xl':
+            return 64;
+    }
+}

package/dist/core/components/interaction/MiniEditor.d.ts

@@ -0,0 +1,19 @@
+import { Callback, Provider, Transform } from '@nascentdigital/funnel-core';
+import { ReactNode } from 'react';
+import { Popup } from './Popup';
+export declare function MiniEditor({ className, title, open, wide, disabled, renderSaveLabel, canSave, disableSave, onSave: onSaveRaw, onClose: onCloseRaw, customActions, children, ...popupProps }: MiniEditor.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace MiniEditor {
+    type Props = PopupProps & {
+        title: string;
+        wide?: boolean;
+        disabled?: boolean;
+        renderSaveLabel?: Transform<State, string>;
+        canSave?: Provider<boolean> | Provider.Async<boolean>;
+        disableSave?: boolean;
+        onSave?: Callback.Void | Callback.AsyncVoid;
+        customActions?: ReactNode;
+    };
+    type State = 'editing' | 'validating' | 'saving' | 'error' | 'saved';
+}
+type PopupProps = Pick<Popup.Props, 'className' | 'open' | 'anchor' | 'anchorOffset' | 'placement' | 'onOpened' | 'onClose' | 'onClosed' | 'children'>;
+export {};

package/dist/core/components/interaction/MiniEditor.js

@@ -0,0 +1,113 @@
+"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.MiniEditor = MiniEditor;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = require("react");
+const Button_1 = require("./Button");
+const Popup_1 = require("./Popup");
+// component
+function MiniEditor(_a) {
+    var { className, title, open, wide, disabled = false, renderSaveLabel = onRenderSaveLabel, canSave = funnel_core_1.Fn.True, disableSave = false, onSave: onSaveRaw = funnel_core_1.Fn.NoOp, onClose: onCloseRaw = funnel_core_1.Fn.NoOp, customActions, children } = _a, popupProps = __rest(_a, ["className", "title", "open", "wide", "disabled", "renderSaveLabel", "canSave", "disableSave", "onSave", "onClose", "customActions", "children"]);
+    // bind state + refs
+    const [state, setState] = (0, react_1.useState)('editing');
+    // reset state on open
+    (0, react_1.useEffect)(() => {
+        if (open) {
+            setState('editing');
+        }
+    }, [open]);
+    // helpers
+    const onSave = async (e) => {
+        console.debug('[MiniEditor/onSave]', { state, disabled, open });
+        // consume event
+        if (e) {
+            e.preventDefault();
+            e.stopPropagation();
+        }
+        // ignore if state is invalid
+        if (state !== 'editing' && state !== 'error') {
+            return;
+        }
+        // try to save
+        try {
+            // update state
+            setState('validating');
+            // skip if not valid
+            const valid = await Promise.resolve(canSave());
+            if (!valid) {
+                setState('error');
+                return;
+            }
+            // update state
+            setState('saving');
+            // try to save
+            await Promise.resolve(onSaveRaw());
+            // mark as saved
+            setState('saved');
+        }
+        // handle error
+        catch (e) {
+            console.warn('[MiniEditor/onSave] error', e);
+            // update state
+            setState('error');
+        }
+    };
+    const onClose = (e) => {
+        // consume event
+        if (e) {
+            e.preventDefault();
+            e.stopPropagation();
+        }
+        // close
+        onCloseRaw();
+    };
+    const onKeyDown = async (e) => {
+        // ignore if disabled OR state is invalid
+        if (disabled || (state !== 'editing' && state !== 'error')) {
+            return;
+        }
+        // cancel on escape
+        switch (e.key) {
+            case 'Escape':
+                onClose(e);
+                break;
+            case 'Enter':
+                await onSave(e);
+                break;
+        }
+    };
+    // render
+    const locked = disabled || state === 'validating' || state === 'saving' || state === 'saved';
+    return ((0, jsx_runtime_1.jsxs)(Popup_1.Popup, Object.assign({}, popupProps, { className: (0, classnames_1.default)(className, 'max-h-[90dvh]', 'flex flex-col gap-l8 p-l8 shadow-miniEditor interpolate', 'bg-background border border-solid border-border-l1 rounded-md', {
+            'w-[420px] max-w-[420px]': !wide
+        }), open: open, disabled: disabled, disableDismiss: locked, onKeyDown: onKeyDown, onClose: onClose, tabIndex: -1, children: [(0, jsx_runtime_1.jsx)("h2", { className: "heading-md text-content-primary", children: title }), children, (0, jsx_runtime_1.jsxs)("div", { className: "flex justify-end items-center gap-l4 pt-l6", children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "text", size: "sm", disabled: locked, onClick: onClose, children: "Cancel" }), customActions &&
+                        (0, jsx_runtime_1.jsx)("div", { className: "flex-1 flex justify-end items-center gap-l4", children: customActions }), (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "primary", size: "sm", loading: state === 'saving', disabled: disableSave || locked, onClick: onSave, children: renderSaveLabel(state) })] })] })));
+}
+function onRenderSaveLabel(state) {
+    switch (state) {
+        case 'editing':
+        case 'validating':
+        case 'error':
+            return 'Save';
+        case 'saving':
+            return 'Saving...';
+        case 'saved':
+            return 'Saved';
+    }
+}

package/dist/core/components/interaction/MultiSelectControls.d.ts

@@ -0,0 +1,27 @@
+import { Callback } from '@nascentdigital/funnel-core';
+import { Dispatch, ReactNode, SetStateAction } from 'react';
+import { Observable } from 'rxjs';
+export declare const MultiSelectControls: import("react").ForwardRefExoticComponent<MultiSelectControls.Props<string> & import("react").RefAttributes<MultiSelectControls.Ref<string>>>;
+export declare namespace MultiSelectControls {
+    type Event = 'selection.start' | 'selection.end' | 'selection.change';
+    type Props<TId extends string> = {
+        className?: string;
+        ids?: ReadonlyArray<TId>;
+        actions?: ReactNode;
+        editLabel?: string;
+        cancelLabel?: string;
+        selectAllLabel?: string;
+        deselectAllLabel?: string;
+    };
+    interface Ref<TId extends string = string> {
+        readonly selecting: boolean;
+        readonly setSelecting: Dispatch<SetStateAction<boolean>>;
+        readonly selectedIds: ReadonlyArray<TId>;
+        readonly setSelectedIds: Dispatch<SetStateAction<ReadonlyArray<TId>>>;
+        readonly events$: Observable<Event>;
+    }
+}
+export declare function useMultiSelectControls<TId extends string = string>(): [Callback<MultiSelectControls.Ref<TId> | null>, MultiSelectControls.Ref<TId> | null];
+export declare namespace useMultiSelectControls {
+    type Result = {};
+}

package/dist/core/components/interaction/MultiSelectControls.js

@@ -0,0 +1,88 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MultiSelectControls = void 0;
+exports.useMultiSelectControls = useMultiSelectControls;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const client_1 = require("@nascentdigital/funnel-ui/client");
+const hooks_1 = require("@nascentdigital/funnel-ui/hooks");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = require("react");
+const rxjs_1 = require("rxjs");
+const Button_1 = require("./Button");
+// component
+exports.MultiSelectControls = (0, react_1.forwardRef)(function MultiSelectControlsImpl({ className, ids: idsRaw, actions, editLabel = 'Edit', cancelLabel = 'Cancel', selectAllLabel = 'Select All', deselectAllLabel = 'Deselect All' }, ref) {
+    // bind state
+    const [selecting, setSelecting] = (0, react_1.useState)(false);
+    const [selectedIds, setSelectedIds] = (0, react_1.useState)([]);
+    const _events$ = (0, react_1.useMemo)(() => new rxjs_1.Subject(), []);
+    const events$ = (0, react_1.useMemo)(() => _events$.asObservable(), [_events$]);
+    const selectedIdCount = selectedIds.length;
+    const ids = (0, client_1.useLatestValue)(idsRaw !== null && idsRaw !== void 0 ? idsRaw : []);
+    const idCount = ids.length;
+    // bind ref
+    (0, react_1.useImperativeHandle)(ref, () => ({
+        selecting,
+        setSelecting,
+        selectedIds,
+        setSelectedIds,
+        events$
+    }), [selecting, selectedIds, events$]);
+    // sync events
+    (0, react_1.useEffect)(() => {
+        _events$.next(selecting ? 'selection.start' : 'selection.end');
+    }, [_events$, selecting]);
+    (0, react_1.useEffect)(() => {
+        _events$.next('selection.change');
+    }, [_events$, selectedIds]);
+    // render nothing if there are no ids to select
+    if (idCount === 0) {
+        return null;
+    }
+    // helpers
+    const onSelectStart = () => {
+        setSelecting(true);
+    };
+    const onSelectCancel = () => {
+        setSelecting(false);
+        setSelectedIds([]);
+    };
+    const onSelectAll = () => {
+        setSelectedIds(ids.slice());
+    };
+    const onDeselectAll = () => {
+        setSelectedIds([]);
+    };
+    // render controls when selecting
+    if (selecting) {
+        return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('flex flex-wrap items-center gap-l5', className), children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "secondary", size: "sm", onClick: selectedIdCount < idCount ? onSelectAll : onDeselectAll, children: selectedIdCount < idCount ? selectAllLabel : deselectAllLabel }), actions, (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "text", size: "sm", onClick: onSelectCancel, children: cancelLabel })] }));
+    }
+    // or render control to enter selection
+    else {
+        return ((0, jsx_runtime_1.jsx)("div", { className: className, children: (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "text", size: "sm", onClick: onSelectStart, children: editLabel }) }));
+    }
+});
+// hook
+function useMultiSelectControls() {
+    // bind state
+    const touch = (0, hooks_1.useTouch)();
+    const [multiSelect, setMultiSelect] = (0, react_1.useState)(null);
+    // sync touch with events
+    (0, react_1.useEffect)(() => {
+        // skip if not bound
+        if (!multiSelect) {
+            console.debug('[useMultiSelectControls] controls not ready');
+            return;
+        }
+        console.debug('[useMultiSelectControls] binding to controls');
+        // touch on event
+        const subscription = multiSelect.events$.subscribe(touch);
+        // unsubscribe on unmount
+        return () => subscription.unsubscribe();
+    }, [touch, multiSelect]);
+    console.debug('[useMultiSelectControls] updated', multiSelect);
+    // return selector
+    return [setMultiSelect, multiSelect];
+}

package/dist/core/components/interaction/NavButton.d.ts

@@ -0,0 +1,9 @@
+import { HTMLAttributes } from 'react';
+import { Touchable } from './Touchable';
+export declare function NavButton({ className, mode, onClick, ...props }: NavButton.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace NavButton {
+    type Props = Omit<HTMLAttributes<HTMLButtonElement>, 'children'> & Pick<Touchable.Props, 'dark'> & {
+        mode: Mode;
+    };
+    type Mode = 'menu' | 'back' | 'close';
+}

package/dist/core/components/interaction/NavButton.js

@@ -0,0 +1,47 @@
+"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.NavButton = NavButton;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = require("react");
+const Touchable_1 = require("./Touchable");
+// component
+function NavButton(_a) {
+    var { className, mode = 'menu', onClick = funnel_core_1.Fn.NoOp } = _a, props = __rest(_a, ["className", "mode", "onClick"]);
+    // bind state
+    const [initial, setInitial] = (0, react_1.useState)(true);
+    const initialMode = (0, react_1.useRef)(mode).current;
+    // clear initial after first mode change
+    (0, react_1.useEffect)(() => {
+        if (initialMode !== mode) {
+            setInitial(false);
+        }
+    }, [initialMode, mode]);
+    // helpers
+    const onButtonClick = (e) => {
+        setInitial(false);
+        onClick(e);
+    };
+    // render
+    return ((0, jsx_runtime_1.jsx)(Touchable_1.Touchable, Object.assign({ className: (0, classnames_1.default)(className, 'NavButton-root'), variant: "icon", onClick: onButtonClick }, props, { children: (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('NavButton-icon', {
+                'NavButton-menu': mode === 'menu',
+                'NavButton-close': mode === 'close',
+                'NavButton-back': mode === 'back',
+                'NavButton-initial': initial
+            }), children: [(0, jsx_runtime_1.jsx)("span", { className: "NavButton-top" }), (0, jsx_runtime_1.jsx)("span", { className: "NavButton-mid" }), (0, jsx_runtime_1.jsx)("span", { className: "NavButton-btm" })] }) })));
+}