@nascentdigital/funnel-editor 4.4.18

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

@@ -0,0 +1,45 @@
+"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.Button = void 0;
+exports.getButtonClassnames = getButtonClassnames;
+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 Loader_1 = require("./Loader");
+// component
+exports.Button = (0, react_1.forwardRef)(function Button(_a, ref) {
+    var { className, variant = 'primary', size = 'md', iconLeft, iconRight, loading = false, disabled = false, children } = _a, props = __rest(_a, ["className", "variant", "size", "iconLeft", "iconRight", "loading", "disabled", "children"]);
+    // render
+    return ((0, jsx_runtime_1.jsxs)("button", Object.assign({ ref: ref, className: (0, classnames_1.default)(className, getButtonClassnames({ variant, size, loading, disabled })), type: "button", disabled: disabled || loading }, props, { children: [loading &&
+                (0, jsx_runtime_1.jsx)(Loader_1.Loader, { size: "sm" }), iconLeft && !loading && size !== 'xs' &&
+                (0, jsx_runtime_1.jsx)(visuals_1.Icon, { variant: iconLeft, size: size === 'md' ? 'md' : 'sm' }), children, iconRight && size !== 'xs' &&
+                (0, jsx_runtime_1.jsx)(visuals_1.Icon, { variant: iconRight, size: size === 'md' ? 'md' : 'sm' })] })));
+});
+function getButtonClassnames({ variant, size, loading, disabled }) {
+    return (0, classnames_1.default)('button', {
+        'button-primary': variant === 'primary',
+        'button-secondary': variant === 'secondary',
+        'button-destructive': variant === 'destructive',
+        'button-text': variant === 'text',
+        'button-disabled': disabled,
+        'button-loading': loading,
+        'button-md': size === 'md',
+        'button-sm': size === 'sm',
+        'button-xs': size === 'xs'
+    });
+}

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

@@ -0,0 +1,19 @@
+import { AnchorHTMLAttributes } from 'react';
+import { Icon } from '../visuals';
+import { Button } from './Button';
+export declare const ButtonLink: import("react").ForwardRefExoticComponent<AnchorHTMLAttributes<HTMLAnchorElement> & {
+    variant?: Button.Variant;
+    size?: Button.Size;
+    iconLeft?: Icon.Variant;
+    iconRight?: Icon.Variant;
+    disabled?: boolean;
+} & import("react").RefAttributes<HTMLAnchorElement>>;
+export declare namespace ButtonLink {
+    type Props = AnchorHTMLAttributes<HTMLAnchorElement> & {
+        variant?: Button.Variant;
+        size?: Button.Size;
+        iconLeft?: Icon.Variant;
+        iconRight?: Icon.Variant;
+        disabled?: boolean;
+    };
+}

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

@@ -0,0 +1,30 @@
+"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.ButtonLink = 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 Button_1 = require("./Button");
+// component
+exports.ButtonLink = (0, react_1.forwardRef)(function ButtonLink(_a, ref) {
+    var { className, variant = 'primary', size = 'md', iconLeft, iconRight, disabled = false, children } = _a, props = __rest(_a, ["className", "variant", "size", "iconLeft", "iconRight", "disabled", "children"]);
+    // render
+    return ((0, jsx_runtime_1.jsxs)("a", Object.assign({ ref: ref, className: (0, classnames_1.default)(className, (0, Button_1.getButtonClassnames)({ variant, size, loading: false, disabled })) }, props, { children: [iconLeft &&
+                (0, jsx_runtime_1.jsx)(visuals_1.Icon, { variant: iconLeft, size: size === 'md' ? 'md' : 'sm' }), (0, jsx_runtime_1.jsx)("span", { className: "Button-label", children: children }), iconRight &&
+                (0, jsx_runtime_1.jsx)(visuals_1.Icon, { variant: iconRight, size: size === 'md' ? 'md' : 'sm' })] })));
+});

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

@@ -0,0 +1,9 @@
+import { Callback } from '@nascentdigital/funnel-core';
+import { InputHTMLAttributes } from 'react';
+export declare function Checkbox({ id: customId, className, checked, onChange, disabled, children, ...props }: Checkbox.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace Checkbox {
+    type Props = Omit<InputHTMLAttributes<HTMLInputElement>, 'checked' | 'onChange'> & {
+        checked?: boolean;
+        onChange?: Callback<boolean>;
+    };
+}

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

@@ -0,0 +1,49 @@
+"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.Checkbox = Checkbox;
+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 visuals_1 = require("../visuals");
+// component
+function Checkbox(_a) {
+    var { id: customId, className, checked = false, onChange = funnel_core_1.Fn.NoOp, disabled = false, children } = _a, props = __rest(_a, ["id", "className", "checked", "onChange", "disabled", "children"]);
+    // bind id
+    const defaultId = (0, react_1.useId)();
+    const id = customId !== null && customId !== void 0 ? customId : defaultId;
+    // render
+    return ((0, jsx_runtime_1.jsxs)("span", { className: (0, classnames_1.default)(className, 'group inline-flex items-center gap-l4 interpolate-fast', 'outline outline-2 outline-offset-2 outline-transparent rounded-xs', {
+            'has-[input:focus-visible]:outline-ix-primary': !disabled
+        }), children: [(0, jsx_runtime_1.jsxs)("span", { className: (0, classnames_1.default)('shrink-0 relative inline-block w-20 h-20 interpolate-fast', 'border border-solid rounded-xs', {
+                    'bg-transparent border-border-l2': !disabled && !checked,
+                    'group-hover:bg-ix-util-hover/tint1 group-active:bg-ix-util-press/tint2': !disabled && !checked,
+                    'bg-ix-disabled border-border-l2': disabled && !checked,
+                    'bg-ix-primary border-ix-primary': !disabled && checked,
+                    'group-hover:bg-ix-primary-hover group-hover:border-ix-primary-hover': !disabled && checked,
+                    'group-active:bg-ix-primary-press group-active:border-ix-primary-press': !disabled && checked,
+                    'bg-ix-primary border-ix-primary opacity-disabled': disabled && checked
+                }), children: [(0, jsx_runtime_1.jsx)("input", Object.assign({}, props, { id: id, className: "absolute inset-0 opacity-0 appearance-none outline-none cursor-pointer disabled:cursor-default", type: "checkbox", checked: checked, onChange: () => onChange(!checked), disabled: disabled })), (0, jsx_runtime_1.jsx)("span", { className: (0, classnames_1.default)('absolute inset-0 inline-flex justify-center items-center', 'text-content-button pointer-events-none interpolate-fast', {
+                            'opacity-none': !checked
+                        }), children: (0, jsx_runtime_1.jsx)(visuals_1.Icon, { variant: "Check", size: "sm" }) })] }), children && typeof children === 'string'
+                ?
+                    (0, jsx_runtime_1.jsx)("label", { className: (0, classnames_1.default)('label-md', {
+                            'text-content-primary cursor-pointer': !disabled,
+                            'text-ix-disabled-content cursor-default': disabled
+                        }), htmlFor: id, children: children })
+                : children] }));
+}

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

@@ -0,0 +1,13 @@
+import { Callback } from '@nascentdigital/funnel-core';
+import { ReactNode } from 'react';
+export declare function Chip({ className, label, draggable, disabled, onClick, onDelete }: Chip.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace Chip {
+    type Props = {
+        className?: string;
+        label: ReactNode;
+        draggable?: boolean;
+        disabled?: boolean;
+        onClick?: Callback.Void;
+        onDelete?: Callback.Void;
+    };
+}

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

@@ -0,0 +1,31 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Chip = Chip;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const IconButton_1 = require("./IconButton");
+// component
+function Chip({ className, label, draggable = false, disabled = false, onClick, onDelete }) {
+    // render
+    const interactive = draggable || !!onClick;
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(className, 'h-32 px-l4 appearance-none select-none interpolate', 'label-md text-content-primary bg-ix-secondary border border-solid border-border-l1 rounded-md overflow-hidden', 'outline-2 outline-offset-4 outline-transparent', {
+            'grid grid-cols-[1fr_min-content] items-center gap-l4': !!onDelete,
+            'cursor-pointer': interactive,
+            'avoid-[.DeleteIcon]:hover:bg-ix-secondary-hover': interactive && !disabled,
+            'avoid-[.DeleteIcon]:focus-visible:bg-ix-secondary-hover avoid-[.DeleteIcon]:focus-visible:outline-ix-primary': interactive && !disabled,
+            'avoid-[.DeleteIcon]:active:bg-ix-secondary': interactive && !disabled,
+            'text-ix-disabled-content bg-ix-disabled pointer-events-none': disabled
+        }), onClick: onClick, tabIndex: disabled ? undefined : 0, children: [typeof label === 'string'
+                ? (0, jsx_runtime_1.jsx)("span", { className: "ellipsis", children: label })
+                : label, onDelete &&
+                (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { className: "DeleteIcon shrink-0", variant: "util", size: "xs", icon: "X", onClick: e => {
+                        // consume click
+                        e.preventDefault();
+                        e.stopPropagation();
+                        // delete
+                        onDelete();
+                    } })] }));
+}

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

@@ -0,0 +1,17 @@
+import { Callback, Transform } from '@nascentdigital/funnel-core';
+import { ReactNode } from 'react';
+export declare function ChipFilters<T>({ className, title, multiselect, options, selectedOptions, onToggle, onToggleAll, renderLabel, disabled, ...htmlProps }: ChipFilters.Props<T>): import("react/jsx-runtime").JSX.Element;
+export declare namespace ChipFilters {
+    type Props<T> = {
+        className?: string;
+        title?: ReactNode;
+        multiselect?: boolean;
+        options?: ReadonlyArray<T>;
+        selectedOptions?: ReadonlyArray<T>;
+        onToggle: OnToggleCallback<T>;
+        onToggleAll?: Callback<boolean>;
+        renderLabel: Transform<T, ReactNode>;
+        disabled?: boolean;
+    };
+    type OnToggleCallback<T> = (option: T, on: boolean) => void;
+}

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

@@ -0,0 +1,31 @@
+"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.ChipFilters = ChipFilters;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const classnames_1 = __importDefault(require("classnames"));
+const ChoiceChip_1 = require("./ChoiceChip");
+// component
+function ChipFilters(_a) {
+    var { className, title, multiselect = false, options = [], selectedOptions = [], onToggle, onToggleAll = funnel_core_1.Fn.NoOp, renderLabel, disabled = false } = _a, htmlProps = __rest(_a, ["className", "title", "multiselect", "options", "selectedOptions", "onToggle", "onToggleAll", "renderLabel", "disabled"]);
+    // render
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, htmlProps, { className: (0, classnames_1.default)(className, 'flex flex-col gap-l6'), children: [title && typeof title === 'string'
+                ?
+                    (0, jsx_runtime_1.jsx)("h2", { className: "label-sm label-strong text-content-tertiary", children: title })
+                : title, (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-wrap gap-l3", children: [multiselect &&
+                        (0, jsx_runtime_1.jsx)(ChoiceChip_1.ChoiceChip, { size: "sm", label: "All", selected: selectedOptions.length === 0, onChange: onToggleAll, disabled: disabled }), options.map((option, index) => (0, jsx_runtime_1.jsx)(ChoiceChip_1.ChoiceChip, { label: renderLabel(option), size: "sm", selected: selectedOptions.includes(option), onChange: selected => onToggle(option, selected), disabled: disabled }, index.toString()))] })] })));
+}

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

@@ -0,0 +1,14 @@
+import { Callback } from '@nascentdigital/funnel-core';
+import { ReactNode } from 'react';
+export declare function ChoiceChip({ className, label, size, disabled, selected, onChange }: ChoiceChip.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace ChoiceChip {
+    type Props = {
+        className?: string;
+        label: ReactNode;
+        size?: Size;
+        disabled?: boolean;
+        selected?: boolean;
+        onChange?: Callback<boolean>;
+    };
+    type Size = 'md' | 'sm';
+}

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

@@ -0,0 +1,31 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChoiceChip = ChoiceChip;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const classnames_1 = __importDefault(require("classnames"));
+const visuals_1 = require("../visuals");
+// component
+function ChoiceChip({ className, label, size = 'md', disabled = false, selected, onChange = funnel_core_1.Fn.NoOp }) {
+    // render
+    return ((0, jsx_runtime_1.jsxs)("button", { className: (0, classnames_1.default)(className, 'flex items-center gap-l2 cursor-pointer appearance-none select-none interpolate', 'border border-solid overflow-hidden', 'disabled:cursor-default', 'outline outline-2 outline-offset-2 outline-transparent', {
+            'h-32 px-l4 label-md rounded-md': size === 'md',
+            'h-24 px-l3 label-sm rounded-sm': size === 'sm',
+            'text-content-primary bg-ix-secondary border-border-l1': !disabled && !selected,
+            'hover:bg-ix-secondary-hover': !disabled && !selected,
+            'focus-visible:bg-ix-secondary-hover focus-visible:outline-ix-primary': !disabled && !selected,
+            'active:bg-ix-secondary-press active:outline-transparent': !disabled && !selected,
+            'text-ix-disabled-content bg-ix-disabled border-border-l1': disabled && !selected,
+            'text-content-button bg-ix-primary border-ix-primary': !disabled && selected,
+            'hover:bg-ix-primary-hover hover:border-ix-primary-hover': !disabled && selected,
+            'focus-visible:bg-ix-primary-hover focus-visible:border-ix-primary-hover focus-visible:outline-ix-primary': !disabled && selected,
+            'active:bg-ix-primary-press active:border-ix-primary-press active:outline-transparent': !disabled && selected,
+            'text-ix-disabled-content bg-ix-primary border-ix-primary opacity-disabled': disabled && selected
+        }), disabled: disabled, onClick: () => onChange(!selected), children: [selected && size === 'md' &&
+                (0, jsx_runtime_1.jsx)(visuals_1.Icon, { className: "shrink-0", variant: "Check", size: "sm" }), typeof label === 'string'
+                ? (0, jsx_runtime_1.jsx)("span", { className: "ellipsis", children: label })
+                : label] }));
+}

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

@@ -0,0 +1,36 @@
+import { Callback, Transform } from '@nascentdigital/funnel-core';
+import { ReactNode } from 'react';
+import { Icon } from '../visuals';
+export declare function Combobox<TOptionId extends string>({ id: externalId, className, maxRows, rowHeight, disabled, options, noSelectionText, selectedOption: selectedOptionId, onSelect, renderSelection: renderSelectionRaw, renderOption, }: Combobox.Props<TOptionId>): import("react/jsx-runtime").JSX.Element;
+export declare namespace Combobox {
+    type Props<TOptionId extends string> = {
+        id?: string;
+        className?: string;
+        maxRows?: number;
+        rowHeight?: number;
+        disabled?: boolean;
+        options: ReadonlyArray<Option<TOptionId>>;
+        noSelectionText?: string;
+        selectedOption?: TOptionId | undefined;
+        onSelect?: Callback<TOptionId>;
+        renderSelection?: Transform<Option<TOptionId> | undefined, ReactNode>;
+        renderOption?: Transform<RenderOptionArgs<TOptionId>, ReactNode>;
+    };
+    type Option<TOptionId extends string = string> = Option.Standard<TOptionId> | Option.WithIcon<TOptionId>;
+    namespace Option {
+        type Standard<TOptionId extends string> = {
+            id: TOptionId;
+            label: string;
+        };
+        type WithIcon<TOptionId extends string> = Standard<TOptionId> & {
+            icon: Icon.Variant;
+        };
+        function hasIcon<TOptionId extends string>(option: Option<TOptionId>): option is WithIcon<TOptionId>;
+    }
+    type RenderOptionArgs<TOptionId extends string = string> = {
+        option: Option<TOptionId>;
+        selected: boolean;
+    };
+    interface Service {
+    }
+}

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

@@ -0,0 +1,94 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Combobox = Combobox;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const client_1 = require("@nascentdigital/funnel-ui/client");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = require("react");
+const visuals_1 = require("../visuals");
+const Popup_1 = require("./Popup");
+// component
+function Combobox({ id: externalId, className, maxRows = 6, rowHeight = 36, disabled = false, options, noSelectionText = 'Make a selection', selectedOption: selectedOptionId, onSelect = funnel_core_1.Fn.NoOp, renderSelection: renderSelectionRaw, renderOption = onRenderOption, }) {
+    // bind state
+    const [open, setOpen] = (0, react_1.useState)(false);
+    const buttonRef = (0, react_1.useRef)(null);
+    const button = buttonRef.current;
+    const autoId = (0, react_1.useId)();
+    const id = externalId !== null && externalId !== void 0 ? externalId : autoId;
+    const popupId = `${id}::container`;
+    const selectedOption = selectedOptionId
+        && options.find(option => option.id === selectedOptionId);
+    const renderSelection = (0, react_1.useMemo)(() => renderSelectionRaw
+        ? renderSelectionRaw :
+        (option) => onRenderSelection(option, noSelectionText), [renderSelectionRaw, noSelectionText]);
+    // helpers
+    const onOpen = (e) => {
+        // stop propagation
+        e.preventDefault();
+        e.stopPropagation();
+        // open popup
+        setOpen(true);
+    };
+    const onOptionSelect = (e, option) => {
+        // stop propagation
+        e.preventDefault();
+        e.stopPropagation();
+        // update selection
+        onSelect(option.id);
+        // close popup
+        onOptionsClose();
+    };
+    const onOptionsClose = () => {
+        // close popup
+        setOpen(false);
+    };
+    // render
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("button", { ref: buttonRef, id: id, className: (0, classnames_1.default)(className, 'min-w-[180px] h-40 flex items-center justify-between gap-l5 px-l5', 'bg-surface1 border border-solid border-border-l1 rounded-full select-none appearance-none', 'disabled:opacity-disabled', {
+                    'pointer-events-none': open
+                }), type: "button", disabled: disabled, role: "combobox", "aria-expanded": open, "aria-controls": popupId, "aria-owns": popupId, onClick: onOpen, onKeyDown: client_1.OnKey.enter(onOpen), children: [renderSelection(selectedOption), (0, jsx_runtime_1.jsx)(visuals_1.Icon, { className: "text-content-primary", variant: "ChevronDown" })] }), (0, jsx_runtime_1.jsx)(Popup_1.Popup, { open: open, anchor: button, anchorOffset: 2, placement: "bottom", onClose: onOptionsClose, children: (0, jsx_runtime_1.jsx)("div", { id: popupId, className: (0, classnames_1.default)('flex flex-col py-l4 bg-surface2 rounded-lg shadow-popup overflow-y-scroll'), style: {
+                        minWidth: button ? `${button.offsetWidth}px` : 'auto',
+                        maxHeight: maxRows * rowHeight + 16
+                    }, role: "listbox", children: options.map((option, index) => {
+                        // render
+                        const optionKey = getOptionId(id, option);
+                        const selected = option.id === selectedOptionId;
+                        return ((0, jsx_runtime_1.jsx)("button", { id: optionKey, style: { height: `${rowHeight}px` }, role: "option", "aria-selected": selected, autoFocus: (index === 0 && !selected) || (index === 1 && options[0].id === selectedOptionId), disabled: selected, onClick: e => onOptionSelect(e, option), onKeyDown: client_1.OnKey.enter(e => onOptionSelect(e, option)), children: (0, jsx_runtime_1.jsx)("span", { className: (0, classnames_1.default)('h-full flex items-center justify-between gap-l4 px-l6 appearance-none select-none outline-none interpolate', {
+                                    'text-content-link-highlight': selected,
+                                    'text-content-primary hover:bg-ix-util-hover/tint1 active:bg-ix-util-press/tint2': !selected && !disabled,
+                                    'focus-visible:bg-interactive focus-visible:border-border-l1': !selected && !disabled,
+                                    'text-ix-disabled-content': disabled
+                                }), children: renderOption({ option, selected }) }) }, optionKey));
+                    }) }) })] }));
+}
+// extension
+(function (Combobox) {
+    let Option;
+    (function (Option) {
+        // guards
+        function hasIcon(option) {
+            return 'icon' in option;
+        }
+        Option.hasIcon = hasIcon;
+    })(Option = Combobox.Option || (Combobox.Option = {}));
+})(Combobox || (exports.Combobox = Combobox = {}));
+// helpers
+function getOptionId(comboboxId, option) {
+    return `${comboboxId}::option::${option.id}`;
+}
+function onRenderSelection(option, noSelectionText) {
+    var _a;
+    return ((0, jsx_runtime_1.jsx)("span", { className: (0, classnames_1.default)('inline-block body-sm', {
+            'text-content-primary': !!option,
+            'text-ix-disabled-content': !option
+        }), children: (_a = option === null || option === void 0 ? void 0 : option.label) !== null && _a !== void 0 ? _a : noSelectionText }));
+}
+function onRenderOption({ option, selected }) {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: (0, classnames_1.default)('inline-block label-md', {
+                    'label-strong': selected
+                }), children: option.label }), selected &&
+                (0, jsx_runtime_1.jsx)(visuals_1.Icon, { variant: "Check" })] }));
+}

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

@@ -0,0 +1,18 @@
+import { Callback, DateString } from '@nascentdigital/funnel-core';
+export declare function DatePicker({ className, inputClassName, placement, minDate: minDateString, maxDate: maxDateString, autoFocus, autoClose, selected, onChange, onBlur, ...props }: DatePicker.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace DatePicker {
+    type Props = {
+        id?: string;
+        className?: string;
+        inputClassName?: string;
+        placement?: Placement;
+        minDate?: DateString;
+        maxDate?: DateString;
+        autoFocus?: boolean;
+        autoClose?: boolean;
+        selected?: DateString | undefined;
+        onChange?: Callback<DateString | undefined>;
+        onBlur?: Callback.Void;
+    };
+    type Placement = 'top-start' | 'top' | 'top-end' | 'right-start' | 'right' | 'right-end' | 'bottom-start' | 'bottom' | 'bottom-end' | 'left-start' | 'left' | 'left-end';
+}

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

@@ -0,0 +1,156 @@
+"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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+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.DatePicker = DatePicker;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const client_1 = require("@nascentdigital/funnel-ui/client");
+const classnames_1 = __importDefault(require("classnames"));
+const imask_1 = __importStar(require("imask"));
+const react_1 = require("react");
+const react_datepicker_1 = __importDefault(require("react-datepicker"));
+const visuals_1 = require("../visuals");
+// component
+function DatePicker(_a) {
+    var { className = '', inputClassName = '', placement = 'bottom-end', minDate: minDateString, maxDate: maxDateString, autoFocus = false, autoClose = false, selected, onChange, onBlur = funnel_core_1.Fn.NoOp } = _a, props = __rest(_a, ["className", "inputClassName", "placement", "minDate", "maxDate", "autoFocus", "autoClose", "selected", "onChange", "onBlur"]);
+    // bind memos
+    const minDate = (0, react_1.useMemo)(() => minDateString && funnel_core_1.DateString.toDate(minDateString), [minDateString]);
+    const maxDate = (0, react_1.useMemo)(() => maxDateString && funnel_core_1.DateString.toDate(maxDateString), [maxDateString]);
+    // helpers
+    const onDateSelect = (date) => {
+        // update date
+        if (onChange) {
+            onChange(date ? funnel_core_1.DateString.fromDate(date) : undefined);
+        }
+        // HACK: on blur is called here as a workaround
+        // there is a bug in the react-datepicker library which breaks onBlur
+        // https://github.com/Hacker0x01/react-datepicker/issues/2028
+        onBlur();
+    };
+    // render
+    return ((0, jsx_runtime_1.jsx)("div", { className: className, children: (0, jsx_runtime_1.jsx)(react_datepicker_1.default, Object.assign({ selected: selected ? funnel_core_1.DateString.toDate(selected) : null, onChange: onDateSelect, autoFocus: autoFocus, closeOnScroll: true, showPopperArrow: false, popperPlacement: placement, portalId: "funnel/DatePicker", dateFormat: funnel_core_1.DateString.FORMAT, minDate: minDate, maxDate: maxDate, scrollableYearDropdown: true, shouldCloseOnSelect: autoClose, customInput: (0, jsx_runtime_1.jsx)(DatePickerInput, { inputClassName: inputClassName, onChange: onChange }) }, props)) }));
+}
+// input component
+function DatePickerInput(_a) {
+    var { className, value, onChange, onClick, disabled = false, inputClassName, ref } = _a, props = __rest(_a, ["className", "value", "onChange", "onClick", "disabled", "inputClassName", "ref"]);
+    // bind state + hooks
+    const [elementRef, element] = (0, client_1.useRefElement)();
+    const [mask, setMask] = (0, react_1.useState)();
+    const onChangeRef = (0, react_1.useRef)(onChange);
+    onChangeRef.current = onChange;
+    // bind input ref upstream
+    if (ref && typeof ref === 'function') {
+        ref(element);
+    }
+    // create mask when element + options change
+    (0, react_1.useEffect)(() => {
+        // skip if element isn't ready
+        if (!element) {
+            return;
+        }
+        // bind mask
+        const mask = new imask_1.InputMask(element, {
+            mask: Date,
+            pattern: 'Y-`m-`d',
+            blocks: {
+                Y: {
+                    mask: imask_1.default.MaskedRange,
+                    from: 1900,
+                    to: 2100,
+                    placeholderChar: 'Y'
+                },
+                m: {
+                    mask: imask_1.default.MaskedRange,
+                    from: 1,
+                    to: 12,
+                    maxLength: 2,
+                    placeholderChar: 'M'
+                },
+                d: {
+                    mask: imask_1.default.MaskedRange,
+                    from: 1,
+                    to: 31,
+                    maxLength: 2,
+                    placeholderChar: 'D'
+                }
+            },
+            format: (date) => {
+                return date
+                    ? funnel_core_1.DateString.fromDate(date)
+                    : '';
+            },
+            parse: (value) => funnel_core_1.DateString.coerceToDate(value),
+            autofix: true,
+            lazy: false,
+            overwrite: true
+        });
+        setMask(mask);
+        // bind events
+        const onAccept = () => onChangeRef.current && onChangeRef.current({ target: element });
+        mask.on('accept', onAccept);
+        // destroy mask
+        return () => {
+            // unbind events
+            mask.off(onAccept);
+            // destroy mask
+            mask.destroy();
+        };
+    }, [element]);
+    // sync mask value
+    (0, react_1.useEffect)(() => {
+        if (mask) {
+            mask.value = value !== null && value !== void 0 ? value : '';
+            mask.updateValue();
+        }
+    }, [mask, value]);
+    // render input
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(className, 'relative flex items-center', {
+            'opacity-disabled': disabled
+        }), children: [(0, jsx_runtime_1.jsx)("input", Object.assign({ ref: elementRef, id: "inner-input", className: (0, classnames_1.default)(inputClassName, 'flex-1 py-l4 pl-l4 pr-l10 appearance-none outline-none interpolate', 'body-md text-onSurfaceVariant', 'bg-transparent border border-solid border-border-l1 rounded-md', 'focus-visible:border-border-l1'), defaultValue: value, disabled: disabled, onClick: onClick }, props)), (0, jsx_runtime_1.jsx)("div", { className: "absolute inset-y-0 right-0 px-l4 flex items-center justify-center cursor-pointer", onClick: onClick, children: (0, jsx_runtime_1.jsx)(visuals_1.Icon, { className: "text-content-secondary", variant: "Settings" }) })] }));
+}

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

@@ -0,0 +1,18 @@
+import { Callback, Timestamp } from '@nascentdigital/funnel-core';
+import 'flatpickr/dist/themes/dark.css';
+export declare function DateTimePicker({ className, disabled, placeholder, date, onChange, ...optionsRaw }: DateTimePicker.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace DateTimePicker {
+    type Props = {
+        className?: string;
+        scope?: Scope;
+        minTime?: Date;
+        maxTime?: Date;
+        autoClose?: boolean;
+        defaultHour?: Timestamp.Hour;
+        disabled?: boolean;
+        placeholder?: string;
+        date?: Date;
+        onChange?: Callback<Date | undefined>;
+    };
+    type Scope = 'month' | 'day' | 'time';
+}