@webiny/app-admin 0.0.0-unstable.78f581c1d2 → 0.0.0-unstable.7c2def32a7

package/base/Base/FieldRenderers/BirthdayInputRenderer.test.js

@@ -0,0 +1,123 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import react from "react";
+import { cleanup, fireEvent, render, screen, within } from "@testing-library/react";
+import { AdminUiProvider } from "@webiny/admin-ui";
+import { DateTimeFieldBuilder } from "../../../features/formModel/fieldTypes/DateTimeFieldType.js";
+import { BirthdayInputRenderer } from "./BirthdayInputRenderer.js";
+vi.mock("@webiny/icons/calendar_month.svg", ()=>({
+        ReactComponent: ()=>null
+    }));
+vi.mock("@webiny/icons/close.svg", ()=>({
+        ReactComponent: ()=>null
+    }));
+const createAdultField = ()=>{
+    const config = new DateTimeFieldBuilder().dateOnly().dateLte({
+        expression: "today-18y"
+    }).renderer("birthdayInput").build("dob");
+    return {
+        name: "dob",
+        qualifiedName: "dob",
+        type: "datetime",
+        label: "Date of birth",
+        value: void 0,
+        validation: {
+            isValid: null
+        },
+        validating: false,
+        required: false,
+        visible: true,
+        disabled: false,
+        renderer: config.renderer,
+        rendererSettings: config.rendererSettings,
+        onChange: vi.fn(),
+        onBlur: vi.fn(),
+        addItem: vi.fn(),
+        removeItem: vi.fn(),
+        focusRequested: false,
+        clearFocusRequest: vi.fn(),
+        context: {}
+    };
+};
+const cell = (step, name)=>{
+    const panel = document.querySelector(`div[data-step="${step}"]`);
+    return within(panel).getByRole("button", {
+        name,
+        hidden: true
+    });
+};
+const years = ()=>{
+    const panel = document.querySelector('div[data-step="year"]');
+    return within(panel).getAllByRole("button", {
+        hidden: true
+    }).map((button)=>Number(button.textContent));
+};
+const renderField = (field)=>render(/*#__PURE__*/ react.createElement(AdminUiProvider, null, /*#__PURE__*/ react.createElement(BirthdayInputRenderer, {
+        field: field
+    })));
+const openPicker = ()=>{
+    fireEvent.click(screen.getByRole("button", {
+        expanded: false
+    }));
+};
+describe("BirthdayInputRenderer with a relative limit", ()=>{
+    beforeEach(()=>{
+        vi.useFakeTimers({
+            toFake: [
+                "Date"
+            ]
+        });
+        vi.stubGlobal("ResizeObserver", class {
+            observe() {}
+            unobserve() {}
+            disconnect() {}
+        });
+    });
+    afterEach(()=>{
+        cleanup();
+        vi.useRealTimers();
+        vi.unstubAllGlobals();
+    });
+    it("starts the year list at the cut-off year", ()=>{
+        vi.setSystemTime(new Date(2026, 9, 19, 12));
+        renderField(createAdultField());
+        openPicker();
+        expect(years()[0]).toBe(2008);
+        expect(years().some((year)=>year > 2008)).toBe(false);
+    });
+    it("dims the cut-off year for a day after the cut-off", ()=>{
+        vi.setSystemTime(new Date(2026, 9, 19, 12));
+        renderField(createAdultField());
+        openPicker();
+        fireEvent.click(cell("day", "20"));
+        fireEvent.click(cell("month", "October"));
+        expect(cell("year", "2008").disabled).toBe(true);
+        expect(cell("year", "2007").disabled).toBe(false);
+    });
+    it("allows the cut-off day itself", ()=>{
+        vi.setSystemTime(new Date(2026, 9, 19, 12));
+        const field = createAdultField();
+        renderField(field);
+        openPicker();
+        fireEvent.click(cell("day", "19"));
+        fireEvent.click(cell("month", "October"));
+        expect(cell("year", "2008").disabled).toBe(false);
+        fireEvent.click(cell("year", "2008"));
+        expect(field.onChange).toHaveBeenLastCalledWith("2008-10-19");
+    });
+    it("moves the cut-off with the date", ()=>{
+        vi.setSystemTime(new Date(2026, 9, 20, 12));
+        renderField(createAdultField());
+        openPicker();
+        fireEvent.click(cell("day", "20"));
+        fireEvent.click(cell("month", "October"));
+        expect(cell("year", "2008").disabled).toBe(false);
+    });
+    it("moves the year list on 1 January", ()=>{
+        vi.setSystemTime(new Date(2027, 0, 1, 12));
+        renderField(createAdultField());
+        openPicker();
+        expect(years()[0]).toBe(2009);
+    });
+});
+
+//# sourceMappingURL=BirthdayInputRenderer.test.js.map

package/base/Base/FieldRenderers/BirthdayInputRenderer.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"base/Base/FieldRenderers/BirthdayInputRenderer.test.js","sources":["../../../../src/base/Base/FieldRenderers/BirthdayInputRenderer.test.tsx"],"sourcesContent":["import { afterEach, beforeEach, describe, it, expect, vi } from \"vitest\";\nimport React from \"react\";\nimport { cleanup, fireEvent, render, screen, within } from \"@testing-library/react\";\nimport { AdminUiProvider } from \"@webiny/admin-ui\";\nimport type { IFieldVM } from \"~/features/formModel/abstractions.js\";\nimport { DateTimeFieldBuilder } from \"~/features/formModel/fieldTypes/DateTimeFieldType.js\";\nimport { BirthdayInputRenderer } from \"./BirthdayInputRenderer.js\";\n\n// Tests don't turn SVG files into components, so the picker's icons are stubbed.\nvi.mock(\"@webiny/icons/calendar_month.svg\", () => ({ ReactComponent: () => null }));\nvi.mock(\"@webiny/icons/close.svg\", () => ({ ReactComponent: () => null }));\n\n/** A date-only field of 18 or older, as `datetime()` hands it to the renderer. */\nconst createAdultField = (): IFieldVM => {\n    const config = new DateTimeFieldBuilder()\n        .dateOnly()\n        .dateLte({ expression: \"today-18y\" })\n        .renderer(\"birthdayInput\")\n        .build(\"dob\");\n\n    return {\n        name: \"dob\",\n        qualifiedName: \"dob\",\n        type: \"datetime\",\n        label: \"Date of birth\",\n        value: undefined,\n        validation: { isValid: null },\n        validating: false,\n        required: false,\n        visible: true,\n        disabled: false,\n        renderer: config.renderer,\n        rendererSettings: config.rendererSettings,\n        onChange: vi.fn(),\n        onBlur: vi.fn(),\n        addItem: vi.fn(),\n        removeItem: vi.fn(),\n        focusRequested: false,\n        clearFocusRequest: vi.fn(),\n        context: {}\n    };\n};\n\n/**\n * A step's grid. The header segments carry `data-step` too, so only the grid `div` matches.\n * Only the current step's grid is visible, so the cells are looked up as hidden as well.\n */\nconst cell = (step: \"day\" | \"month\" | \"year\", name: string) => {\n    const panel = document.querySelector<HTMLElement>(`div[data-step=\"${step}\"]`)!;\n    return within(panel).getByRole<HTMLButtonElement>(\"button\", { name, hidden: true });\n};\n\nconst years = () => {\n    const panel = document.querySelector<HTMLElement>(`div[data-step=\"year\"]`)!;\n    return within(panel)\n        .getAllByRole(\"button\", { hidden: true })\n        .map(button => Number(button.textContent));\n};\n\nconst renderField = (field: IFieldVM) =>\n    render(\n        <AdminUiProvider>\n            <BirthdayInputRenderer field={field} />\n        </AdminUiProvider>\n    );\n\nconst openPicker = () => {\n    fireEvent.click(screen.getByRole(\"button\", { expanded: false }));\n};\n\n/**\n * The renderer works the limits out from the editor's local date on every render. Only `Date`\n * is frozen, so the picker's own timers and animation frames run as usual.\n */\ndescribe(\"BirthdayInputRenderer with a relative limit\", () => {\n    beforeEach(() => {\n        vi.useFakeTimers({ toFake: [\"Date\"] });\n        // Polyfilled per test: jsdom has no ResizeObserver, which the popover and scroll area use.\n        vi.stubGlobal(\n            \"ResizeObserver\",\n            class {\n                observe() {}\n                unobserve() {}\n                disconnect() {}\n            }\n        );\n    });\n\n    afterEach(() => {\n        cleanup();\n        vi.useRealTimers();\n        vi.unstubAllGlobals();\n    });\n\n    it(\"starts the year list at the cut-off year\", () => {\n        vi.setSystemTime(new Date(2026, 9, 19, 12));\n        renderField(createAdultField());\n        openPicker();\n\n        expect(years()[0]).toBe(2008);\n        expect(years().some(year => year > 2008)).toBe(false);\n    });\n\n    it(\"dims the cut-off year for a day after the cut-off\", () => {\n        vi.setSystemTime(new Date(2026, 9, 19, 12));\n        renderField(createAdultField());\n        openPicker();\n\n        fireEvent.click(cell(\"day\", \"20\"));\n        fireEvent.click(cell(\"month\", \"October\"));\n\n        expect(cell(\"year\", \"2008\").disabled).toBe(true);\n        expect(cell(\"year\", \"2007\").disabled).toBe(false);\n    });\n\n    it(\"allows the cut-off day itself\", () => {\n        vi.setSystemTime(new Date(2026, 9, 19, 12));\n        const field = createAdultField();\n        renderField(field);\n        openPicker();\n\n        fireEvent.click(cell(\"day\", \"19\"));\n        fireEvent.click(cell(\"month\", \"October\"));\n        expect(cell(\"year\", \"2008\").disabled).toBe(false);\n\n        fireEvent.click(cell(\"year\", \"2008\"));\n        expect(field.onChange).toHaveBeenLastCalledWith(\"2008-10-19\");\n    });\n\n    it(\"moves the cut-off with the date\", () => {\n        vi.setSystemTime(new Date(2026, 9, 20, 12));\n        renderField(createAdultField());\n        openPicker();\n\n        fireEvent.click(cell(\"day\", \"20\"));\n        fireEvent.click(cell(\"month\", \"October\"));\n\n        expect(cell(\"year\", \"2008\").disabled).toBe(false);\n    });\n\n    it(\"moves the year list on 1 January\", () => {\n        vi.setSystemTime(new Date(2027, 0, 1, 12));\n        renderField(createAdultField());\n        openPicker();\n\n        expect(years()[0]).toBe(2009);\n    });\n});\n"],"names":["vi","createAdultField","config","DateTimeFieldBuilder","undefined","cell","step","name","panel","document","within","years","button","Number","renderField","field","render","AdminUiProvider","BirthdayInputRenderer","openPicker","fireEvent","screen","describe","beforeEach","afterEach","cleanup","it","Date","expect","year"],"mappings":"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"}

package/base/Base/FieldRenderers/CheckboxesRenderer.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+declare module "../../../features/formModel/abstractions.js" {
+    interface IFieldRendererRegistry {
+        checkboxes: {
+            fieldType: "text" | "number";
+            options: true;
+            settings: undefined;
+        };
+    }
+}
+export declare const CheckboxesRenderer: React.ComponentType<{
+    field: import("~/features/formModel/index.js").IFieldVM;
+}>;

package/base/Base/FieldRenderers/CheckboxesRenderer.js

@@ -0,0 +1,28 @@
+import react from "react";
+import { createFieldRenderer } from "../../../features/formModel/createFieldRenderer.js";
+import { CheckboxGroup } from "@webiny/admin-ui";
+const CheckboxesRenderer = createFieldRenderer(({ field })=>{
+    const options = field.options ?? [];
+    const value = field.value ?? [];
+    return /*#__PURE__*/ react.createElement(CheckboxGroup, {
+        label: field.label,
+        hint: field.help,
+        description: field.description,
+        note: field.note,
+        required: field.required,
+        disabled: field.disabled,
+        validation: field.validation,
+        items: options.map((opt)=>({
+                label: opt.label,
+                value: opt.value
+            })),
+        value: value,
+        onChange: (value)=>{
+            field.onChange(value);
+            field.onBlur();
+        }
+    });
+});
+export { CheckboxesRenderer };
+
+//# sourceMappingURL=CheckboxesRenderer.js.map

package/base/Base/FieldRenderers/CheckboxesRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"base/Base/FieldRenderers/CheckboxesRenderer.js","sources":["../../../../src/base/Base/FieldRenderers/CheckboxesRenderer.tsx"],"sourcesContent":["import React from \"react\";\nimport { createFieldRenderer } from \"~/features/formModel/createFieldRenderer.js\";\nimport { CheckboxGroup } from \"@webiny/admin-ui\";\nimport type { IValueOption } from \"~/features/formModel/index.js\";\n\ndeclare module \"../../../features/formModel/abstractions.js\" {\n    interface IFieldRendererRegistry {\n        checkboxes: { fieldType: \"text\" | \"number\"; options: true; settings: undefined };\n    }\n}\n\nexport const CheckboxesRenderer = createFieldRenderer(({ field }) => {\n    const options: IValueOption[] = field.options ?? [];\n    const value = (field.value as (string | number)[]) ?? [];\n\n    return (\n        <CheckboxGroup\n            label={field.label}\n            hint={field.help}\n            description={field.description}\n            note={field.note}\n            required={field.required}\n            disabled={field.disabled}\n            validation={field.validation}\n            items={options.map(opt => ({\n                label: opt.label,\n                value: opt.value\n            }))}\n            value={value}\n            onChange={value => {\n                field.onChange(value);\n                field.onBlur();\n            }}\n        />\n    );\n});\n"],"names":["CheckboxesRenderer","createFieldRenderer","field","options","value","CheckboxGroup","opt"],"mappings":";;;AAWO,MAAMA,qBAAqBC,oBAAoB,CAAC,EAAEC,KAAK,EAAE;IAC5D,MAAMC,UAA0BD,MAAM,OAAO,IAAI,EAAE;IACnD,MAAME,QAASF,MAAM,KAAK,IAA4B,EAAE;IAExD,OAAO,WAAP,GACI,oBAACG,eAAaA;QACV,OAAOH,MAAM,KAAK;QAClB,MAAMA,MAAM,IAAI;QAChB,aAAaA,MAAM,WAAW;QAC9B,MAAMA,MAAM,IAAI;QAChB,UAAUA,MAAM,QAAQ;QACxB,UAAUA,MAAM,QAAQ;QACxB,YAAYA,MAAM,UAAU;QAC5B,OAAOC,QAAQ,GAAG,CAACG,CAAAA,MAAQ;gBACvB,OAAOA,IAAI,KAAK;gBAChB,OAAOA,IAAI,KAAK;YACpB;QACA,OAAOF;QACP,UAAUA,CAAAA;YACNF,MAAM,QAAQ,CAACE;YACfF,MAAM,MAAM;QAChB;;AAGZ"}

package/base/Base/FieldRenderers/CodeEditorRenderer.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+declare module "../../../features/formModel/abstractions.js" {
+    interface IFieldRendererRegistry {
+        codeEditor: {
+            fieldType: "text";
+            settings: {
+                language?: string;
+                height?: number;
+            };
+        };
+    }
+}
+export declare const CodeEditorRenderer: React.ComponentType<{
+    field: import("../../..").IFieldVM;
+}>;

package/base/Base/FieldRenderers/CodeEditorRenderer.js

@@ -0,0 +1,14 @@
+import react from "react";
+import { createFieldRenderer } from "../../../features/formModel/createFieldRenderer.js";
+import { CodeEditor } from "@webiny/admin-ui";
+const CodeEditorRenderer = createFieldRenderer(({ field })=>/*#__PURE__*/ react.createElement("div", {
+        className: "border-1 border-neutral-dimmed"
+    }, /*#__PURE__*/ react.createElement(CodeEditor, {
+        value: field.value ?? "",
+        height: field.rendererSettings?.height ?? 400,
+        onChange: (value)=>field.onChange(value),
+        language: field.rendererSettings?.language ?? "html"
+    })));
+export { CodeEditorRenderer };
+
+//# sourceMappingURL=CodeEditorRenderer.js.map

package/base/Base/FieldRenderers/CodeEditorRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"base/Base/FieldRenderers/CodeEditorRenderer.js","sources":["../../../../src/base/Base/FieldRenderers/CodeEditorRenderer.tsx"],"sourcesContent":["import React from \"react\";\nimport { createFieldRenderer } from \"~/features/formModel/createFieldRenderer.js\";\nimport { CodeEditor } from \"@webiny/admin-ui\";\n\ndeclare module \"../../../features/formModel/abstractions.js\" {\n    interface IFieldRendererRegistry {\n        codeEditor: {\n            fieldType: \"text\";\n            settings: { language?: string; height?: number };\n        };\n    }\n}\n\nexport const CodeEditorRenderer = createFieldRenderer<\"codeEditor\">(({ field }) => {\n    return (\n        <div className={\"border-1 border-neutral-dimmed\"}>\n            <CodeEditor\n                value={(field.value as string) ?? \"\"}\n                height={field.rendererSettings?.height ?? 400}\n                onChange={value => field.onChange(value)}\n                language={field.rendererSettings?.language ?? \"html\"}\n            />\n        </div>\n    );\n});\n"],"names":["CodeEditorRenderer","createFieldRenderer","field","CodeEditor","value"],"mappings":";;;AAaO,MAAMA,qBAAqBC,oBAAkC,CAAC,EAAEC,KAAK,EAAE,GACnE,WAAP,GACI,oBAAC;QAAI,WAAW;qBACZ,oBAACC,YAAUA;QACP,OAAQD,MAAM,KAAK,IAAe;QAClC,QAAQA,MAAM,gBAAgB,EAAE,UAAU;QAC1C,UAAUE,CAAAA,QAASF,MAAM,QAAQ,CAACE;QAClC,UAAUF,MAAM,gBAAgB,EAAE,YAAY"}

package/base/Base/FieldRenderers/DateTimeInputsRenderer.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+declare module "../../../features/formModel/abstractions.js" {
+    interface IFieldRendererRegistry {
+        dateTimeInputs: {
+            fieldType: "datetime";
+            settings: {
+                type: "date" | "time" | "dateTimeLocal" | "dateTimeTz" | "dateTimeWithoutTimezone" | "dateTimeWithTimezone" | "month" | "week";
+                addItemLabel?: string;
+                displayFormat?: string;
+                weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+            };
+        };
+    }
+}
+export declare const DateTimeInputsRenderer: React.ComponentType<{
+    field: import("../../..").IFieldVM;
+}>;

package/base/Base/FieldRenderers/DateTimeInputsRenderer.js

@@ -0,0 +1,70 @@
+import react from "react";
+import { createFieldRenderer } from "../../../features/formModel/createFieldRenderer.js";
+import { ReactComponent } from "@webiny/icons/delete.svg";
+import { ReactComponent as add_svg_ReactComponent } from "@webiny/icons/add.svg";
+import { Button, DatePickerPrimitive, FormComponentDescription, FormComponentErrorMessage, IconButton, Separator } from "@webiny/admin-ui";
+const PICKER_TYPE_MAP = {
+    date: "date",
+    time: "time",
+    dateTimeLocal: "dateTimeLocal",
+    dateTimeTz: "dateTimeTz",
+    dateTimeWithoutTimezone: "dateTimeLocal",
+    dateTimeWithTimezone: "dateTimeTz",
+    month: "month",
+    week: "week"
+};
+const DateTimeInputsRenderer = createFieldRenderer(({ field })=>{
+    const values = field.value ?? [];
+    const settingsType = field.rendererSettings?.type ?? "date";
+    const pickerType = PICKER_TYPE_MAP[settingsType] ?? "date";
+    const updateAt = (index, val)=>{
+        const next = [
+            ...values
+        ];
+        next[index] = val ?? "";
+        field.onChange(next);
+    };
+    return /*#__PURE__*/ react.createElement("div", {
+        className: "flex flex-col gap-sm"
+    }, /*#__PURE__*/ react.createElement(Separator, {
+        labelPosition: "start",
+        variant: "accent"
+    }, /*#__PURE__*/ react.createElement("span", {
+        className: "text-accent-primary text-lg font-semibold"
+    }, `${field.label ?? ""} ${values.length ? `(${values.length})` : ""}`)), field.description && /*#__PURE__*/ react.createElement(FormComponentDescription, {
+        text: field.description
+    }), values.map((val, index)=>/*#__PURE__*/ react.createElement("div", {
+            key: index,
+            className: "flex items-center gap-sm"
+        }, /*#__PURE__*/ react.createElement("div", {
+            className: "flex-1"
+        }, /*#__PURE__*/ react.createElement(DatePickerPrimitive, {
+            type: pickerType,
+            value: val || void 0,
+            onChange: (v)=>updateAt(index, v),
+            disabled: field.disabled,
+            displayFormat: field.rendererSettings?.displayFormat,
+            weekStartsOn: field.rendererSettings?.weekStartsOn
+        })), /*#__PURE__*/ react.createElement(IconButton, {
+            icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+            onClick: (e)=>{
+                e.stopPropagation();
+                field.removeItem(index);
+            },
+            size: "lg",
+            variant: "ghost"
+        }))), /*#__PURE__*/ react.createElement(Button, {
+        disabled: field.disabled,
+        variant: "tertiary",
+        icon: /*#__PURE__*/ react.createElement(add_svg_ReactComponent, null),
+        text: field.rendererSettings?.addItemLabel ?? "Add Value",
+        onClick: ()=>field.addItem("")
+    }), /*#__PURE__*/ react.createElement(FormComponentErrorMessage, {
+        text: field.validation.message,
+        invalid: false === field.validation.isValid,
+        disabled: field.disabled
+    }));
+});
+export { DateTimeInputsRenderer };
+
+//# sourceMappingURL=DateTimeInputsRenderer.js.map

package/base/Base/FieldRenderers/DateTimeInputsRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"base/Base/FieldRenderers/DateTimeInputsRenderer.js","sources":["../../../../src/base/Base/FieldRenderers/DateTimeInputsRenderer.tsx"],"sourcesContent":["import React from \"react\";\nimport { createFieldRenderer } from \"~/features/formModel/createFieldRenderer.js\";\nimport { ReactComponent as DeleteIcon } from \"@webiny/icons/delete.svg\";\nimport { ReactComponent as AddIcon } from \"@webiny/icons/add.svg\";\nimport {\n    Button,\n    DatePickerPrimitive,\n    type DatePickerPrimitiveProps,\n    FormComponentDescription,\n    FormComponentErrorMessage,\n    Separator\n} from \"@webiny/admin-ui\";\nimport { IconButton } from \"@webiny/admin-ui\";\n\ndeclare module \"../../../features/formModel/abstractions.js\" {\n    interface IFieldRendererRegistry {\n        dateTimeInputs: {\n            fieldType: \"datetime\";\n            settings: {\n                type:\n                    | \"date\"\n                    | \"time\"\n                    | \"dateTimeLocal\"\n                    | \"dateTimeTz\"\n                    | \"dateTimeWithoutTimezone\"\n                    | \"dateTimeWithTimezone\"\n                    | \"month\"\n                    | \"week\";\n                addItemLabel?: string;\n                displayFormat?: string;\n                weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;\n            };\n        };\n    }\n}\n\ntype StringPickerType = \"date\" | \"time\" | \"dateTimeLocal\" | \"dateTimeTz\" | \"month\" | \"week\";\n\nconst PICKER_TYPE_MAP: Record<string, StringPickerType> = {\n    date: \"date\",\n    time: \"time\",\n    dateTimeLocal: \"dateTimeLocal\",\n    dateTimeTz: \"dateTimeTz\",\n    dateTimeWithoutTimezone: \"dateTimeLocal\",\n    dateTimeWithTimezone: \"dateTimeTz\",\n    month: \"month\",\n    week: \"week\"\n};\n\nexport const DateTimeInputsRenderer = createFieldRenderer<\"dateTimeInputs\">(({ field }) => {\n    const values = (field.value as string[]) ?? [];\n    const settingsType = field.rendererSettings?.type ?? \"date\";\n    const pickerType: StringPickerType = PICKER_TYPE_MAP[settingsType] ?? \"date\";\n\n    const updateAt = (index: number, val: string | undefined) => {\n        const next = [...values];\n        next[index] = val ?? \"\";\n        field.onChange(next);\n    };\n\n    return (\n        <div className=\"flex flex-col gap-sm\">\n            <Separator labelPosition=\"start\" variant=\"accent\">\n                <span className=\"text-accent-primary text-lg font-semibold\">\n                    {`${field.label ?? \"\"} ${values.length ? `(${values.length})` : \"\"}`}\n                </span>\n            </Separator>\n            {field.description && <FormComponentDescription text={field.description} />}\n            {values.map((val, index) => (\n                <div key={index} className=\"flex items-center gap-sm\">\n                    <div className=\"flex-1\">\n                        <DatePickerPrimitive\n                            {...({\n                                type: pickerType,\n                                value: val || undefined,\n                                onChange: (v: string | undefined) => updateAt(index, v),\n                                disabled: field.disabled,\n                                displayFormat: field.rendererSettings?.displayFormat,\n                                weekStartsOn: field.rendererSettings?.weekStartsOn\n                            } as DatePickerPrimitiveProps)}\n                        />\n                    </div>\n                    <IconButton\n                        icon={<DeleteIcon />}\n                        onClick={e => {\n                            e.stopPropagation();\n                            field.removeItem(index);\n                        }}\n                        size=\"lg\"\n                        variant=\"ghost\"\n                    />\n                </div>\n            ))}\n            <Button\n                disabled={field.disabled}\n                variant=\"tertiary\"\n                icon={<AddIcon />}\n                text={field.rendererSettings?.addItemLabel ?? \"Add Value\"}\n                onClick={() => field.addItem(\"\")}\n            />\n            <FormComponentErrorMessage\n                text={field.validation.message}\n                invalid={field.validation.isValid === false}\n                disabled={field.disabled}\n            />\n        </div>\n    );\n});\n"],"names":["PICKER_TYPE_MAP","DateTimeInputsRenderer","createFieldRenderer","field","values","settingsType","pickerType","updateAt","index","val","next","Separator","FormComponentDescription","DatePickerPrimitive","undefined","v","IconButton","DeleteIcon","e","Button","AddIcon","FormComponentErrorMessage"],"mappings":";;;;;AAsCA,MAAMA,kBAAoD;IACtD,MAAM;IACN,MAAM;IACN,eAAe;IACf,YAAY;IACZ,yBAAyB;IACzB,sBAAsB;IACtB,OAAO;IACP,MAAM;AACV;AAEO,MAAMC,yBAAyBC,oBAAsC,CAAC,EAAEC,KAAK,EAAE;IAClF,MAAMC,SAAUD,MAAM,KAAK,IAAiB,EAAE;IAC9C,MAAME,eAAeF,MAAM,gBAAgB,EAAE,QAAQ;IACrD,MAAMG,aAA+BN,eAAe,CAACK,aAAa,IAAI;IAEtE,MAAME,WAAW,CAACC,OAAeC;QAC7B,MAAMC,OAAO;eAAIN;SAAO;QACxBM,IAAI,CAACF,MAAM,GAAGC,OAAO;QACrBN,MAAM,QAAQ,CAACO;IACnB;IAEA,OAAO,WAAP,GACI,oBAAC;QAAI,WAAU;qBACX,oBAACC,WAASA;QAAC,eAAc;QAAQ,SAAQ;qBACrC,oBAAC;QAAK,WAAU;OACX,GAAGR,MAAM,KAAK,IAAI,GAAG,CAAC,EAAEC,OAAO,MAAM,GAAG,CAAC,CAAC,EAAEA,OAAO,MAAM,CAAC,CAAC,CAAC,GAAG,IAAI,IAG3ED,MAAM,WAAW,IAAI,WAAJ,GAAI,oBAACS,0BAAwBA;QAAC,MAAMT,MAAM,WAAW;QACtEC,OAAO,GAAG,CAAC,CAACK,KAAKD,QAAAA,WAAAA,GACd,oBAAC;YAAI,KAAKA;YAAO,WAAU;yBACvB,oBAAC;YAAI,WAAU;yBACX,oBAACK,qBACQ;YACD,MAAMP;YACN,OAAOG,OAAOK;YACd,UAAU,CAACC,IAA0BR,SAASC,OAAOO;YACrD,UAAUZ,MAAM,QAAQ;YACxB,eAAeA,MAAM,gBAAgB,EAAE;YACvC,cAAcA,MAAM,gBAAgB,EAAE;QAC1C,mBAGR,oBAACa,YAAUA;YACP,oBAAM,oBAACC,gBAAUA;YACjB,SAASC,CAAAA;gBACLA,EAAE,eAAe;gBACjBf,MAAM,UAAU,CAACK;YACrB;YACA,MAAK;YACL,SAAQ;4BAIpB,oBAACW,QAAMA;QACH,UAAUhB,MAAM,QAAQ;QACxB,SAAQ;QACR,oBAAM,oBAACiB,wBAAOA;QACd,MAAMjB,MAAM,gBAAgB,EAAE,gBAAgB;QAC9C,SAAS,IAAMA,MAAM,OAAO,CAAC;sBAEjC,oBAACkB,2BAAyBA;QACtB,MAAMlB,MAAM,UAAU,CAAC,OAAO;QAC9B,SAASA,AAA6B,UAA7BA,MAAM,UAAU,CAAC,OAAO;QACjC,UAAUA,MAAM,QAAQ;;AAIxC"}

package/base/Base/FieldRenderers/DateTimeRenderer.d.ts

@@ -0,0 +1,21 @@
+import React from "react";
+declare module "../../../features/formModel/abstractions.js" {
+    interface IFieldRendererRegistry {
+        dateTimeInput: {
+            fieldType: "datetime";
+            settings: {
+                type: "date" | "time" | "dateTimeWithoutTimezone" | "dateTimeWithTimezone" | "month" | "week" | "year" | "dateRange" | "multipleDates" | "multipleMonths" | "multipleYears";
+                displayFormat?: string;
+                yearRange?: [number, number];
+                weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+                presets?: Array<{
+                    label: string;
+                    value: () => Date;
+                }>;
+            };
+        };
+    }
+}
+export declare const DateTimeRenderer: React.ComponentType<{
+    field: import("../../..").IFieldVM;
+}>;

package/base/Base/FieldRenderers/DateTimeRenderer.js

@@ -0,0 +1,45 @@
+import react from "react";
+import { DatePicker } from "@webiny/admin-ui";
+import { createFieldRenderer } from "../../../features/formModel/createFieldRenderer.js";
+const PICKER_TYPE_MAP = {
+    date: "date",
+    time: "time",
+    dateTimeWithoutTimezone: "dateTimeLocal",
+    dateTimeWithTimezone: "dateTimeTz",
+    month: "month",
+    week: "week",
+    year: "year",
+    dateRange: "dateRange",
+    multipleDates: "multipleDates",
+    multipleMonths: "multipleMonths",
+    multipleYears: "multipleYears"
+};
+const DateTimeRenderer = createFieldRenderer(({ field })=>{
+    const settingsType = field.rendererSettings?.type ?? "date";
+    const pickerType = PICKER_TYPE_MAP[settingsType] || "date";
+    return /*#__PURE__*/ react.createElement("div", {
+        className: "w-full"
+    }, /*#__PURE__*/ react.createElement(DatePicker, {
+        hint: field.help,
+        type: pickerType,
+        value: field.value,
+        onChange: (v)=>{
+            field.onChange(v);
+            field.onBlur();
+        },
+        disabled: field.disabled,
+        placeholder: field.placeholder,
+        displayFormat: field.rendererSettings?.displayFormat,
+        yearRange: field.rendererSettings?.yearRange,
+        weekStartsOn: field.rendererSettings?.weekStartsOn,
+        presets: field.rendererSettings?.presets,
+        label: field.label,
+        description: field.description,
+        note: field.note,
+        required: field.required,
+        validation: field.validation
+    }));
+});
+export { DateTimeRenderer };
+
+//# sourceMappingURL=DateTimeRenderer.js.map

package/base/Base/FieldRenderers/DateTimeRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"base/Base/FieldRenderers/DateTimeRenderer.js","sources":["../../../../src/base/Base/FieldRenderers/DateTimeRenderer.tsx"],"sourcesContent":["import React from \"react\";\nimport { DatePicker } from \"@webiny/admin-ui\";\nimport { createFieldRenderer } from \"~/features/formModel/createFieldRenderer.js\";\n\ndeclare module \"../../../features/formModel/abstractions.js\" {\n    interface IFieldRendererRegistry {\n        dateTimeInput: {\n            fieldType: \"datetime\";\n            settings: {\n                type:\n                    | \"date\"\n                    | \"time\"\n                    | \"dateTimeWithoutTimezone\"\n                    | \"dateTimeWithTimezone\"\n                    | \"month\"\n                    | \"week\"\n                    | \"year\"\n                    | \"dateRange\"\n                    | \"multipleDates\"\n                    | \"multipleMonths\"\n                    | \"multipleYears\";\n                displayFormat?: string;\n                yearRange?: [number, number];\n                weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;\n                presets?: Array<{ label: string; value: () => Date }>;\n            };\n        };\n    }\n}\n\nconst PICKER_TYPE_MAP: Record<string, string> = {\n    date: \"date\",\n    time: \"time\",\n    dateTimeWithoutTimezone: \"dateTimeLocal\",\n    dateTimeWithTimezone: \"dateTimeTz\",\n    month: \"month\",\n    week: \"week\",\n    year: \"year\",\n    dateRange: \"dateRange\",\n    multipleDates: \"multipleDates\",\n    multipleMonths: \"multipleMonths\",\n    multipleYears: \"multipleYears\"\n};\n\nexport const DateTimeRenderer = createFieldRenderer<\"dateTimeInput\">(({ field }) => {\n    const settingsType = field.rendererSettings?.type ?? \"date\";\n    const pickerType = PICKER_TYPE_MAP[settingsType] || \"date\";\n\n    return (\n        <div className=\"w-full\">\n            <DatePicker\n                hint={field.help}\n                type={pickerType as any}\n                value={field.value as any}\n                onChange={(v: any) => {\n                    field.onChange(v);\n                    field.onBlur();\n                }}\n                disabled={field.disabled}\n                placeholder={field.placeholder}\n                displayFormat={field.rendererSettings?.displayFormat}\n                yearRange={field.rendererSettings?.yearRange}\n                weekStartsOn={field.rendererSettings?.weekStartsOn}\n                presets={field.rendererSettings?.presets}\n                label={field.label}\n                description={field.description}\n                note={field.note}\n                required={field.required}\n                validation={field.validation}\n            />\n        </div>\n    );\n});\n"],"names":["PICKER_TYPE_MAP","DateTimeRenderer","createFieldRenderer","field","settingsType","pickerType","DatePicker","v"],"mappings":";;;AA8BA,MAAMA,kBAA0C;IAC5C,MAAM;IACN,MAAM;IACN,yBAAyB;IACzB,sBAAsB;IACtB,OAAO;IACP,MAAM;IACN,MAAM;IACN,WAAW;IACX,eAAe;IACf,gBAAgB;IAChB,eAAe;AACnB;AAEO,MAAMC,mBAAmBC,oBAAqC,CAAC,EAAEC,KAAK,EAAE;IAC3E,MAAMC,eAAeD,MAAM,gBAAgB,EAAE,QAAQ;IACrD,MAAME,aAAaL,eAAe,CAACI,aAAa,IAAI;IAEpD,OAAO,WAAP,GACI,oBAAC;QAAI,WAAU;qBACX,oBAACE,YAAUA;QACP,MAAMH,MAAM,IAAI;QAChB,MAAME;QACN,OAAOF,MAAM,KAAK;QAClB,UAAU,CAACI;YACPJ,MAAM,QAAQ,CAACI;YACfJ,MAAM,MAAM;QAChB;QACA,UAAUA,MAAM,QAAQ;QACxB,aAAaA,MAAM,WAAW;QAC9B,eAAeA,MAAM,gBAAgB,EAAE;QACvC,WAAWA,MAAM,gBAAgB,EAAE;QACnC,cAAcA,MAAM,gBAAgB,EAAE;QACtC,SAASA,MAAM,gBAAgB,EAAE;QACjC,OAAOA,MAAM,KAAK;QAClB,aAAaA,MAAM,WAAW;QAC9B,MAAMA,MAAM,IAAI;QAChB,UAAUA,MAAM,QAAQ;QACxB,YAAYA,MAAM,UAAU;;AAI5C"}

package/base/Base/FieldRenderers/FilePickerRenderer.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import type { FileFieldSettings } from "../../../features/formModel/fieldTypes/FileFieldType.js";
+declare module "../../../features/formModel/abstractions.js" {
+    interface IFieldRendererRegistry {
+        filePicker: {
+            fieldType: "file";
+            settings: FileFieldSettings;
+        };
+    }
+}
+export declare const FilePickerRenderer: React.ComponentType<{
+    field: import("~/features/formModel/abstractions.js").IFieldVM;
+}>;

package/base/Base/FieldRenderers/FilePickerRenderer.js

@@ -0,0 +1,46 @@
+import react from "react";
+import { createFieldRenderer } from "../../../features/formModel/createFieldRenderer.js";
+import { FileManager } from "../../ui/FileManager.js";
+import { FilePicker } from "@webiny/admin-ui";
+const FilePickerRenderer = createFieldRenderer(({ field })=>{
+    const settings = field.rendererSettings;
+    return /*#__PURE__*/ react.createElement(FileManager, {
+        images: settings?.images,
+        accept: settings?.accept,
+        own: settings?.own,
+        scope: settings?.scope,
+        render: ({ showFileManager })=>/*#__PURE__*/ react.createElement(FilePicker, {
+                label: field.label,
+                hint: field.help,
+                description: field.description,
+                type: "area",
+                value: toFilePickerValue(field.value),
+                validation: field.validation,
+                onSelectItem: ()=>showFileManager((file)=>{
+                        field.onChange(fileManagerItemToValue(file));
+                    }),
+                onRemoveItem: ()=>field.onChange(void 0)
+            })
+    });
+});
+const toFilePickerValue = (value)=>{
+    const img = value;
+    if (!img?.src) return;
+    return {
+        url: img.src,
+        name: img.name,
+        mimeType: img.mimeType
+    };
+};
+const fileManagerItemToValue = (file)=>({
+        id: file.id,
+        name: file.name,
+        size: file.size,
+        mimeType: file.type,
+        src: file.src || "",
+        width: file.width,
+        height: file.height
+    });
+export { FilePickerRenderer };
+
+//# sourceMappingURL=FilePickerRenderer.js.map

package/base/Base/FieldRenderers/FilePickerRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"base/Base/FieldRenderers/FilePickerRenderer.js","sources":["../../../../src/base/Base/FieldRenderers/FilePickerRenderer.tsx"],"sourcesContent":["import React from \"react\";\nimport { createFieldRenderer } from \"~/features/formModel/createFieldRenderer.js\";\nimport { FileManager } from \"~/base/ui/FileManager.js\";\nimport { FilePicker, type FileItemDto } from \"@webiny/admin-ui\";\nimport type { FileManagerFileItem } from \"~/base/ui/FileManager.js\";\nimport type { FileValue } from \"~/features/formModel/abstractions.js\";\nimport type { FileFieldSettings } from \"~/features/formModel/fieldTypes/FileFieldType.js\";\n\ndeclare module \"../../../features/formModel/abstractions.js\" {\n    interface IFieldRendererRegistry {\n        filePicker: { fieldType: \"file\"; settings: FileFieldSettings };\n    }\n}\n\nexport const FilePickerRenderer = createFieldRenderer<\"filePicker\">(({ field }) => {\n    const settings = field.rendererSettings as FileFieldSettings | undefined;\n\n    return (\n        <FileManager\n            images={settings?.images}\n            accept={settings?.accept}\n            own={settings?.own}\n            scope={settings?.scope}\n            render={({ showFileManager }) => (\n                <FilePicker\n                    label={field.label}\n                    hint={field.help}\n                    description={field.description}\n                    type=\"area\"\n                    value={toFilePickerValue(field.value)}\n                    validation={field.validation}\n                    onSelectItem={() =>\n                        showFileManager((file: FileManagerFileItem) => {\n                            field.onChange(fileManagerItemToValue(file));\n                        })\n                    }\n                    onRemoveItem={() => field.onChange(undefined)}\n                />\n            )}\n        />\n    );\n});\n\nconst toFilePickerValue = (value: unknown): FileItemDto | undefined => {\n    const img = value as FileValue | undefined;\n    if (!img?.src) {\n        return undefined;\n    }\n    return { url: img.src, name: img.name, mimeType: img.mimeType };\n};\n\nconst fileManagerItemToValue = (file: FileManagerFileItem) => {\n    return {\n        id: file.id,\n        name: file.name,\n        size: file.size,\n        mimeType: file.type,\n        src: file.src || \"\",\n        width: file.width,\n        height: file.height\n    };\n};\n"],"names":["FilePickerRenderer","createFieldRenderer","field","settings","FileManager","showFileManager","FilePicker","toFilePickerValue","file","fileManagerItemToValue","undefined","value","img"],"mappings":";;;;AAcO,MAAMA,qBAAqBC,oBAAkC,CAAC,EAAEC,KAAK,EAAE;IAC1E,MAAMC,WAAWD,MAAM,gBAAgB;IAEvC,OAAO,WAAP,GACI,oBAACE,aAAWA;QACR,QAAQD,UAAU;QAClB,QAAQA,UAAU;QAClB,KAAKA,UAAU;QACf,OAAOA,UAAU;QACjB,QAAQ,CAAC,EAAEE,eAAe,EAAE,iBACxB,oBAACC,YAAUA;gBACP,OAAOJ,MAAM,KAAK;gBAClB,MAAMA,MAAM,IAAI;gBAChB,aAAaA,MAAM,WAAW;gBAC9B,MAAK;gBACL,OAAOK,kBAAkBL,MAAM,KAAK;gBACpC,YAAYA,MAAM,UAAU;gBAC5B,cAAc,IACVG,gBAAgB,CAACG;wBACbN,MAAM,QAAQ,CAACO,uBAAuBD;oBAC1C;gBAEJ,cAAc,IAAMN,MAAM,QAAQ,CAACQ;;;AAKvD;AAEA,MAAMH,oBAAoB,CAACI;IACvB,MAAMC,MAAMD;IACZ,IAAI,CAACC,KAAK,KACN;IAEJ,OAAO;QAAE,KAAKA,IAAI,GAAG;QAAE,MAAMA,IAAI,IAAI;QAAE,UAAUA,IAAI,QAAQ;IAAC;AAClE;AAEA,MAAMH,yBAAyB,CAACD,OACrB;QACH,IAAIA,KAAK,EAAE;QACX,MAAMA,KAAK,IAAI;QACf,MAAMA,KAAK,IAAI;QACf,UAAUA,KAAK,IAAI;QACnB,KAAKA,KAAK,GAAG,IAAI;QACjB,OAAOA,KAAK,KAAK;QACjB,QAAQA,KAAK,MAAM;IACvB"}

package/base/Base/FieldRenderers/FileUrlPickerRenderer.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+declare module "../../../features/formModel/abstractions.js" {
+    interface IFieldRendererRegistry {
+        fileUrlPicker: {
+            fieldType: "fileUrl";
+            settings: undefined;
+        };
+    }
+}
+export declare const FileUrlPickerRenderer: React.ComponentType<{
+    field: import("../../..").IFieldVM;
+}>;

package/base/Base/FieldRenderers/FileUrlPickerRenderer.js

@@ -0,0 +1,21 @@
+import react from "react";
+import { createFieldRenderer } from "../../../features/formModel/createFieldRenderer.js";
+import { FileManager } from "../../ui/FileManager.js";
+import { FilePicker } from "@webiny/admin-ui";
+const FileUrlPickerRenderer = createFieldRenderer(({ field })=>/*#__PURE__*/ react.createElement(FileManager, {
+        images: true,
+        render: ({ showFileManager })=>/*#__PURE__*/ react.createElement(FilePicker, {
+                label: field.label,
+                hint: field.help,
+                description: field.description,
+                type: "area",
+                value: field.value,
+                onSelectItem: ()=>showFileManager((file)=>{
+                        field.onChange(file.src || "");
+                    }),
+                onRemoveItem: ()=>field.onChange(void 0)
+            })
+    }));
+export { FileUrlPickerRenderer };
+
+//# sourceMappingURL=FileUrlPickerRenderer.js.map

package/base/Base/FieldRenderers/FileUrlPickerRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"base/Base/FieldRenderers/FileUrlPickerRenderer.js","sources":["../../../../src/base/Base/FieldRenderers/FileUrlPickerRenderer.tsx"],"sourcesContent":["import React from \"react\";\nimport { createFieldRenderer } from \"~/features/formModel/createFieldRenderer.js\";\nimport { FileManager } from \"~/base/ui/FileManager.js\";\nimport { FilePicker } from \"@webiny/admin-ui\";\nimport type { FileManagerFileItem } from \"~/base/ui/FileManager.js\";\n\ndeclare module \"../../../features/formModel/abstractions.js\" {\n    interface IFieldRendererRegistry {\n        fileUrlPicker: { fieldType: \"fileUrl\"; settings: undefined };\n    }\n}\n\nexport const FileUrlPickerRenderer = createFieldRenderer(({ field }) => {\n    return (\n        <FileManager\n            images={true}\n            render={({ showFileManager }) => (\n                <FilePicker\n                    label={field.label}\n                    hint={field.help}\n                    description={field.description}\n                    type=\"area\"\n                    value={field.value as string | undefined}\n                    onSelectItem={() =>\n                        showFileManager((file: FileManagerFileItem) => {\n                            field.onChange(file.src || \"\");\n                        })\n                    }\n                    onRemoveItem={() => field.onChange(undefined)}\n                />\n            )}\n        />\n    );\n});\n"],"names":["FileUrlPickerRenderer","createFieldRenderer","field","FileManager","showFileManager","FilePicker","file","undefined"],"mappings":";;;;AAYO,MAAMA,wBAAwBC,oBAAoB,CAAC,EAAEC,KAAK,EAAE,GACxD,WAAP,GACI,oBAACC,aAAWA;QACR,QAAQ;QACR,QAAQ,CAAC,EAAEC,eAAe,EAAE,iBACxB,oBAACC,YAAUA;gBACP,OAAOH,MAAM,KAAK;gBAClB,MAAMA,MAAM,IAAI;gBAChB,aAAaA,MAAM,WAAW;gBAC9B,MAAK;gBACL,OAAOA,MAAM,KAAK;gBAClB,cAAc,IACVE,gBAAgB,CAACE;wBACbJ,MAAM,QAAQ,CAACI,KAAK,GAAG,IAAI;oBAC/B;gBAEJ,cAAc,IAAMJ,MAAM,QAAQ,CAACK"}

package/base/Base/FieldRenderers/HiddenRenderer.d.ts

@@ -0,0 +1,12 @@
+import type { IFieldVM } from "../../../features/formModel/index.js";
+declare module "../../../features/formModel/abstractions.js" {
+    interface IFieldRendererRegistry {
+        hidden: {
+            fieldType: string;
+            settings: undefined;
+        };
+    }
+}
+export declare const HiddenRenderer: (_props: {
+    field: IFieldVM;
+}) => null;

package/base/Base/FieldRenderers/HiddenRenderer.js

@@ -0,0 +1,5 @@
+import "react";
+const HiddenRenderer = (_props)=>null;
+export { HiddenRenderer };
+
+//# sourceMappingURL=HiddenRenderer.js.map

package/base/Base/FieldRenderers/HiddenRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"base/Base/FieldRenderers/HiddenRenderer.js","sources":["../../../../src/base/Base/FieldRenderers/HiddenRenderer.tsx"],"sourcesContent":["import React from \"react\";\nimport type { IFieldVM } from \"~/features/formModel/index.js\";\n\ndeclare module \"../../../features/formModel/abstractions.js\" {\n    interface IFieldRendererRegistry {\n        hidden: { fieldType: string; settings: undefined };\n    }\n}\n\nexport const HiddenRenderer = (_props: { field: IFieldVM }) => {\n    return null;\n};\n"],"names":["HiddenRenderer","_props"],"mappings":";AASO,MAAMA,iBAAiB,CAACC,SACpB"}

package/base/Base/FieldRenderers/HorizontalTabsRenderer.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import type { TabsNodeRendererProps } from "../../../features/formModel/FormView.js";
+export declare const HorizontalTabsRenderer: (({ node }: TabsNodeRendererProps) => React.JSX.Element) & React.NamedExoticComponent<TabsNodeRendererProps> & {
+    readonly type: ({ node }: TabsNodeRendererProps) => React.JSX.Element;
+};

package/base/Base/FieldRenderers/HorizontalTabsRenderer.js

@@ -0,0 +1,27 @@
+import react from "react";
+import { observer } from "mobx-react-lite";
+import { Tabs } from "@webiny/admin-ui";
+import { LayoutNodeRenderer, renderTabIcon } from "../../../features/formModel/FormView.js";
+const HorizontalTabsRenderer_HorizontalTabsRenderer = observer(function({ node }) {
+    return /*#__PURE__*/ react.createElement(Tabs, {
+        ...node.rendererSettings,
+        value: node.activeTabId,
+        onValueChange: (id)=>node.setActiveTab(id),
+        tabs: node.tabs.map((tab)=>/*#__PURE__*/ react.createElement(Tabs.Tab, {
+                key: tab.id,
+                value: tab.id,
+                icon: renderTabIcon(tab.icon),
+                trigger: tab.label,
+                disabled: tab.disabled,
+                content: /*#__PURE__*/ react.createElement("div", {
+                    className: "flex flex-col gap-4"
+                }, tab.layout.map((childNode, index)=>/*#__PURE__*/ react.createElement(LayoutNodeRenderer, {
+                        key: index,
+                        node: childNode
+                    })))
+            }))
+    });
+});
+export { HorizontalTabsRenderer_HorizontalTabsRenderer as HorizontalTabsRenderer };
+
+//# sourceMappingURL=HorizontalTabsRenderer.js.map

package/base/Base/FieldRenderers/HorizontalTabsRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"base/Base/FieldRenderers/HorizontalTabsRenderer.js","sources":["../../../../src/base/Base/FieldRenderers/HorizontalTabsRenderer.tsx"],"sourcesContent":["import React from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { Tabs } from \"@webiny/admin-ui\";\nimport { LayoutNodeRenderer, renderTabIcon } from \"~/features/formModel/FormView.js\";\nimport type { TabsNodeRendererProps } from \"~/features/formModel/FormView.js\";\n\nexport const HorizontalTabsRenderer = observer(function HorizontalTabsRenderer({\n    node\n}: TabsNodeRendererProps) {\n    return (\n        <Tabs\n            {...(node.rendererSettings as Record<string, any>)}\n            value={node.activeTabId}\n            onValueChange={id => node.setActiveTab(id)}\n            tabs={node.tabs.map(tab => (\n                <Tabs.Tab\n                    key={tab.id}\n                    value={tab.id}\n                    icon={renderTabIcon(tab.icon)}\n                    trigger={tab.label}\n                    disabled={tab.disabled}\n                    content={\n                        <div className={\"flex flex-col gap-4\"}>\n                            {tab.layout.map((childNode, index) => (\n                                <LayoutNodeRenderer key={index} node={childNode} />\n                            ))}\n                        </div>\n                    }\n                />\n            ))}\n        />\n    );\n});\n"],"names":["HorizontalTabsRenderer","observer","node","Tabs","id","tab","renderTabIcon","childNode","index","LayoutNodeRenderer"],"mappings":";;;;AAMO,MAAMA,gDAAyBC,SAAS,SAAgC,EAC3EC,IAAI,EACgB;IACpB,OAAO,WAAP,GACI,oBAACC,MAAIA;QACA,GAAID,KAAK,gBAAgB;QAC1B,OAAOA,KAAK,WAAW;QACvB,eAAeE,CAAAA,KAAMF,KAAK,YAAY,CAACE;QACvC,MAAMF,KAAK,IAAI,CAAC,GAAG,CAACG,CAAAA,MAAAA,WAAAA,GAChB,oBAACF,KAAK,GAAG;gBACL,KAAKE,IAAI,EAAE;gBACX,OAAOA,IAAI,EAAE;gBACb,MAAMC,cAAcD,IAAI,IAAI;gBAC5B,SAASA,IAAI,KAAK;gBAClB,UAAUA,IAAI,QAAQ;gBACtB,uBACI,oBAAC;oBAAI,WAAW;mBACXA,IAAI,MAAM,CAAC,GAAG,CAAC,CAACE,WAAWC,QAAAA,WAAAA,GACxB,oBAACC,oBAAkBA;wBAAC,KAAKD;wBAAO,MAAMD;;;;AAQtE"}

package/base/Base/FieldRenderers/InputRenderer.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+declare module "../../../features/formModel/abstractions.js" {
+    interface IFieldRendererRegistry {
+        textInput: {
+            fieldType: "text";
+            settings: undefined;
+        };
+    }
+}
+export declare const InputRenderer: React.ComponentType<{
+    field: import("../../..").IFieldVM;
+}>;