@webiny/app-admin 0.0.0-unstable.a4f3e4ea8b → 0.0.0-unstable.a85ef555b2

package/base/Base/FieldRenderers/ObjectRenderer/TemplatePicker/TemplateGalleryToolbar.js

@@ -0,0 +1,52 @@
+import react from "react";
+import { DelayedOnChange, Icon, Input, ToggleGroup } from "@webiny/admin-ui";
+import { ReactComponent } from "@webiny/icons/search.svg";
+import { ReactComponent as grid_view_svg_ReactComponent } from "@webiny/icons/grid_view.svg";
+import { ReactComponent as list_svg_ReactComponent } from "@webiny/icons/list.svg";
+const TemplateGalleryToolbar = ({ search, onSearch, viewMode, onViewMode })=>/*#__PURE__*/ react.createElement("div", {
+        className: "flex items-center gap-sm pb-md pt-xs"
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "flex-1 min-w-0"
+    }, /*#__PURE__*/ react.createElement(DelayedOnChange, {
+        value: search,
+        onChange: onSearch
+    }, ({ value, onChange })=>/*#__PURE__*/ react.createElement(Input, {
+            autoFocus: true,
+            value: value,
+            onChange: onChange,
+            placeholder: "Search templates...",
+            startIcon: /*#__PURE__*/ react.createElement(Icon, {
+                icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+                label: "Search"
+            }),
+            size: "md",
+            variant: "primary"
+        }))), /*#__PURE__*/ react.createElement("div", {
+        className: "shrink-0"
+    }, /*#__PURE__*/ react.createElement(ToggleGroup, {
+        type: "single",
+        value: viewMode,
+        onChange: (value)=>onViewMode(value),
+        items: [
+            {
+                id: "grid",
+                value: "grid",
+                icon: /*#__PURE__*/ react.createElement(Icon, {
+                    icon: /*#__PURE__*/ react.createElement(grid_view_svg_ReactComponent, null),
+                    label: "Grid view"
+                })
+            },
+            {
+                id: "list",
+                value: "list",
+                icon: /*#__PURE__*/ react.createElement(Icon, {
+                    icon: /*#__PURE__*/ react.createElement(list_svg_ReactComponent, null),
+                    label: "List view"
+                })
+            }
+        ],
+        variant: "ghost"
+    })));
+export { TemplateGalleryToolbar };
+
+//# sourceMappingURL=TemplateGalleryToolbar.js.map

package/base/Base/FieldRenderers/ObjectRenderer/TemplatePicker/TemplateGalleryToolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"base/Base/FieldRenderers/ObjectRenderer/TemplatePicker/TemplateGalleryToolbar.js","sources":["../../../../../../src/base/Base/FieldRenderers/ObjectRenderer/TemplatePicker/TemplateGalleryToolbar.tsx"],"sourcesContent":["import React from \"react\";\nimport { DelayedOnChange } from \"@webiny/admin-ui\";\nimport { Icon } from \"@webiny/admin-ui\";\nimport { Input } from \"@webiny/admin-ui\";\nimport { ToggleGroup } from \"@webiny/admin-ui\";\nimport { ReactComponent as SearchIcon } from \"@webiny/icons/search.svg\";\nimport { ReactComponent as GridIcon } from \"@webiny/icons/grid_view.svg\";\nimport { ReactComponent as ListIcon } from \"@webiny/icons/list.svg\";\nimport type { ViewMode } from \"./types.js\";\n\ninterface TemplateGalleryToolbarProps {\n    search: string;\n    onSearch: (search: string) => void;\n    viewMode: ViewMode;\n    onViewMode: (viewMode: ViewMode) => void;\n}\n\nexport const TemplateGalleryToolbar = ({\n    search,\n    onSearch,\n    viewMode,\n    onViewMode\n}: TemplateGalleryToolbarProps) => {\n    return (\n        <div className={\"flex items-center gap-sm pb-md pt-xs\"}>\n            <div className={\"flex-1 min-w-0\"}>\n                <DelayedOnChange value={search} onChange={onSearch}>\n                    {({ value, onChange }) => (\n                        <Input\n                            autoFocus={true}\n                            value={value}\n                            onChange={onChange}\n                            placeholder={\"Search templates...\"}\n                            startIcon={<Icon icon={<SearchIcon />} label={\"Search\"} />}\n                            size={\"md\"}\n                            variant={\"primary\"}\n                        />\n                    )}\n                </DelayedOnChange>\n            </div>\n            <div className={\"shrink-0\"}>\n                <ToggleGroup\n                    type=\"single\"\n                    value={viewMode}\n                    onChange={value => onViewMode(value as ViewMode)}\n                    items={[\n                        {\n                            id: \"grid\",\n                            value: \"grid\",\n                            icon: <Icon icon={<GridIcon />} label={\"Grid view\"} />\n                        },\n                        {\n                            id: \"list\",\n                            value: \"list\",\n                            icon: <Icon icon={<ListIcon />} label={\"List view\"} />\n                        }\n                    ]}\n                    variant=\"ghost\"\n                />\n            </div>\n        </div>\n    );\n};\n"],"names":["TemplateGalleryToolbar","search","onSearch","viewMode","onViewMode","DelayedOnChange","value","onChange","Input","Icon","SearchIcon","ToggleGroup","GridIcon","ListIcon"],"mappings":";;;;;AAiBO,MAAMA,yBAAyB,CAAC,EACnCC,MAAM,EACNC,QAAQ,EACRC,QAAQ,EACRC,UAAU,EACgB,GACnB,WAAP,GACI,oBAAC;QAAI,WAAW;qBACZ,oBAAC;QAAI,WAAW;qBACZ,oBAACC,iBAAeA;QAAC,OAAOJ;QAAQ,UAAUC;OACrC,CAAC,EAAEI,KAAK,EAAEC,QAAQ,EAAE,iBACjB,oBAACC,OAAKA;YACF,WAAW;YACX,OAAOF;YACP,UAAUC;YACV,aAAa;YACb,yBAAW,oBAACE,MAAIA;gBAAC,oBAAM,oBAACC,gBAAUA;gBAAK,OAAO;;YAC9C,MAAM;YACN,SAAS;4BAKzB,oBAAC;QAAI,WAAW;qBACZ,oBAACC,aAAWA;QACR,MAAK;QACL,OAAOR;QACP,UAAUG,CAAAA,QAASF,WAAWE;QAC9B,OAAO;YACH;gBACI,IAAI;gBACJ,OAAO;gBACP,MAAM,WAAN,GAAM,oBAACG,MAAIA;oBAAC,oBAAM,oBAACG,8BAAQA;oBAAK,OAAO;;YAC3C;YACA;gBACI,IAAI;gBACJ,OAAO;gBACP,MAAM,WAAN,GAAM,oBAACH,MAAIA;oBAAC,oBAAM,oBAACI,yBAAQA;oBAAK,OAAO;;YAC3C;SACH;QACD,SAAQ"}

package/base/Base/FieldRenderers/ObjectRenderer/TemplatePicker/TemplateIcon.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import type { ITemplateIcon } from "../../../../../features/formModel/index.js";
+interface TemplateIconProps {
+    icon: ITemplateIcon | undefined;
+    size: number;
+}
+export declare const TemplateIcon: ({ icon, size }: TemplateIconProps) => React.JSX.Element | null;
+export {};

package/base/Base/FieldRenderers/ObjectRenderer/TemplatePicker/TemplateIcon.js

@@ -0,0 +1,16 @@
+import react from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+const TemplateIcon = ({ icon, size })=>{
+    if (!icon) return null;
+    return /*#__PURE__*/ react.createElement(FontAwesomeIcon, {
+        className: "text-neutral-xstrong",
+        icon: icon.name.split("/"),
+        style: {
+            width: size,
+            height: size
+        }
+    });
+};
+export { TemplateIcon };
+
+//# sourceMappingURL=TemplateIcon.js.map

package/base/Base/FieldRenderers/ObjectRenderer/TemplatePicker/TemplateIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"base/Base/FieldRenderers/ObjectRenderer/TemplatePicker/TemplateIcon.js","sources":["../../../../../../src/base/Base/FieldRenderers/ObjectRenderer/TemplatePicker/TemplateIcon.tsx"],"sourcesContent":["import React from \"react\";\nimport type { IconProp } from \"@fortawesome/fontawesome-svg-core\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport type { ITemplateIcon } from \"~/features/formModel/index.js\";\n\ninterface TemplateIconProps {\n    icon: ITemplateIcon | undefined;\n    size: number;\n}\n\nexport const TemplateIcon = ({ icon, size }: TemplateIconProps) => {\n    if (!icon) {\n        return null;\n    }\n\n    return (\n        <FontAwesomeIcon\n            className={\"text-neutral-xstrong\"}\n            icon={icon.name.split(\"/\") as IconProp}\n            style={{ width: size, height: size }}\n        />\n    );\n};\n"],"names":["TemplateIcon","icon","size","FontAwesomeIcon"],"mappings":";;AAUO,MAAMA,eAAe,CAAC,EAAEC,IAAI,EAAEC,IAAI,EAAqB;IAC1D,IAAI,CAACD,MACD,OAAO;IAGX,OAAO,WAAP,GACI,oBAACE,iBAAeA;QACZ,WAAW;QACX,MAAMF,KAAK,IAAI,CAAC,KAAK,CAAC;QACtB,OAAO;YAAE,OAAOC;YAAM,QAAQA;QAAK;;AAG/C"}

package/base/Base/FieldRenderers/ObjectRenderer/TemplatePicker/TemplateList.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import type { ITemplateVM } from "../../../../../features/formModel/index.js";
+import type { ViewMode } from "./types.js";
+interface TemplateListProps {
+    viewMode: ViewMode;
+    templates: ITemplateVM[];
+    onSelect: (template: ITemplateVM) => void;
+}
+export declare const TemplateList: ({ viewMode, templates, onSelect }: TemplateListProps) => React.JSX.Element;
+export {};

package/base/Base/FieldRenderers/ObjectRenderer/TemplatePicker/TemplateList.js

@@ -0,0 +1,22 @@
+import react from "react";
+import { TemplateCard } from "./TemplateCard.js";
+import { TemplateListItem } from "./TemplateListItem.js";
+const TemplateList = ({ viewMode, templates, onSelect })=>{
+    if ("list" === viewMode) return /*#__PURE__*/ react.createElement("div", {
+        className: "flex flex-col gap-y-sm mb-xs"
+    }, templates.map((template)=>/*#__PURE__*/ react.createElement(TemplateListItem, {
+            key: template.id,
+            template: template,
+            onSelect: onSelect
+        })));
+    return /*#__PURE__*/ react.createElement("div", {
+        className: "gap-md flex flex-wrap p-xs mb-xs"
+    }, templates.map((template)=>/*#__PURE__*/ react.createElement(TemplateCard, {
+            key: template.id,
+            template: template,
+            onSelect: onSelect
+        })));
+};
+export { TemplateList };
+
+//# sourceMappingURL=TemplateList.js.map

package/base/Base/FieldRenderers/ObjectRenderer/TemplatePicker/TemplateList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"base/Base/FieldRenderers/ObjectRenderer/TemplatePicker/TemplateList.js","sources":["../../../../../../src/base/Base/FieldRenderers/ObjectRenderer/TemplatePicker/TemplateList.tsx"],"sourcesContent":["import React from \"react\";\nimport type { ITemplateVM } from \"~/features/formModel/index.js\";\nimport { TemplateCard } from \"./TemplateCard.js\";\nimport { TemplateListItem } from \"./TemplateListItem.js\";\nimport type { ViewMode } from \"./types.js\";\n\ninterface TemplateListProps {\n    viewMode: ViewMode;\n    templates: ITemplateVM[];\n    onSelect: (template: ITemplateVM) => void;\n}\n\nexport const TemplateList = ({ viewMode, templates, onSelect }: TemplateListProps) => {\n    if (viewMode === \"list\") {\n        return (\n            <div className={\"flex flex-col gap-y-sm mb-xs\"}>\n                {templates.map(template => (\n                    <TemplateListItem key={template.id} template={template} onSelect={onSelect} />\n                ))}\n            </div>\n        );\n    }\n\n    return (\n        <div className={\"gap-md flex flex-wrap p-xs mb-xs\"}>\n            {templates.map(template => (\n                <TemplateCard key={template.id} template={template} onSelect={onSelect} />\n            ))}\n        </div>\n    );\n};\n"],"names":["TemplateList","viewMode","templates","onSelect","template","TemplateListItem","TemplateCard"],"mappings":";;;AAYO,MAAMA,eAAe,CAAC,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,QAAQ,EAAqB;IAC7E,IAAIF,AAAa,WAAbA,UACA,OAAO,WAAP,GACI,oBAAC;QAAI,WAAW;OACXC,UAAU,GAAG,CAACE,CAAAA,WAAAA,WAAAA,GACX,oBAACC,kBAAgBA;YAAC,KAAKD,SAAS,EAAE;YAAE,UAAUA;YAAU,UAAUD;;IAMlF,OAAO,WAAP,GACI,oBAAC;QAAI,WAAW;OACXD,UAAU,GAAG,CAACE,CAAAA,WAAAA,WAAAA,GACX,oBAACE,cAAYA;YAAC,KAAKF,SAAS,EAAE;YAAE,UAAUA;YAAU,UAAUD;;AAI9E"}

package/base/Base/FieldRenderers/ObjectRenderer/TemplatePicker/TemplateListItem.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import type { TemplateItemProps } from "./types.js";
+export declare const TemplateListItem: ({ template, onSelect }: TemplateItemProps) => React.JSX.Element;

package/base/Base/FieldRenderers/ObjectRenderer/TemplatePicker/TemplateListItem.js

@@ -0,0 +1,35 @@
+import react from "react";
+import { Button, Text } from "@webiny/admin-ui";
+import { ReactComponent } from "@webiny/icons/add_circle_outline.svg";
+import { SelectableTemplate } from "./SelectableTemplate.js";
+import { TemplateIcon } from "./TemplateIcon.js";
+const TemplateListItem = ({ template, onSelect })=>/*#__PURE__*/ react.createElement(SelectableTemplate, {
+        template: template,
+        onSelect: onSelect,
+        className: "flex items-center py-sm-extra px-md rounded-lg bg-neutral-light hover:bg-[#f1f2f4]"
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "flex items-center justify-center shrink-0 pr-md"
+    }, /*#__PURE__*/ react.createElement(TemplateIcon, {
+        icon: template.icon,
+        size: 24
+    })), /*#__PURE__*/ react.createElement("div", {
+        className: "flex-1 min-w-0"
+    }, /*#__PURE__*/ react.createElement(Text, {
+        size: "md",
+        className: "text-neutral-primary font-semibold truncate"
+    }, template.label), template.description && /*#__PURE__*/ react.createElement(Text, {
+        size: "sm",
+        as: "div",
+        className: "text-neutral-muted truncate"
+    }, template.description)), /*#__PURE__*/ react.createElement("div", {
+        className: "hidden group-hover:block group-focus-visible:block"
+    }, /*#__PURE__*/ react.createElement(Button, {
+        size: "md",
+        variant: "primary",
+        icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+        tabIndex: -1,
+        "aria-hidden": true
+    }, "Insert")));
+export { TemplateListItem };
+
+//# sourceMappingURL=TemplateListItem.js.map

package/base/Base/FieldRenderers/ObjectRenderer/TemplatePicker/TemplateListItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"base/Base/FieldRenderers/ObjectRenderer/TemplatePicker/TemplateListItem.js","sources":["../../../../../../src/base/Base/FieldRenderers/ObjectRenderer/TemplatePicker/TemplateListItem.tsx"],"sourcesContent":["import React from \"react\";\nimport { Button } from \"@webiny/admin-ui\";\nimport { Text } from \"@webiny/admin-ui\";\nimport { ReactComponent as PlusIcon } from \"@webiny/icons/add_circle_outline.svg\";\nimport { SelectableTemplate } from \"./SelectableTemplate.js\";\nimport { TemplateIcon } from \"./TemplateIcon.js\";\nimport type { TemplateItemProps } from \"./types.js\";\n\n// Used #f1f2f4 b/c in Figma, the color was result of multiple colors combined.\nexport const TemplateListItem = ({ template, onSelect }: TemplateItemProps) => {\n    return (\n        <SelectableTemplate\n            template={template}\n            onSelect={onSelect}\n            className={\n                \"flex items-center py-sm-extra px-md rounded-lg bg-neutral-light hover:bg-[#f1f2f4]\"\n            }\n        >\n            <div className={\"flex items-center justify-center shrink-0 pr-md\"}>\n                <TemplateIcon icon={template.icon} size={24} />\n            </div>\n            <div className={\"flex-1 min-w-0\"}>\n                <Text size={\"md\"} className={\"text-neutral-primary font-semibold truncate\"}>\n                    {template.label}\n                </Text>\n                {template.description && (\n                    <Text size={\"sm\"} as={\"div\"} className={\"text-neutral-muted truncate\"}>\n                        {template.description}\n                    </Text>\n                )}\n            </div>\n            <div className={\"hidden group-hover:block group-focus-visible:block\"}>\n                <Button\n                    size={\"md\"}\n                    variant={\"primary\"}\n                    icon={<PlusIcon />}\n                    tabIndex={-1}\n                    aria-hidden={true}\n                >\n                    Insert\n                </Button>\n            </div>\n        </SelectableTemplate>\n    );\n};\n"],"names":["TemplateListItem","template","onSelect","SelectableTemplate","TemplateIcon","Text","Button","PlusIcon"],"mappings":";;;;;AASO,MAAMA,mBAAmB,CAAC,EAAEC,QAAQ,EAAEC,QAAQ,EAAqB,GAC/D,WAAP,GACI,oBAACC,oBAAkBA;QACf,UAAUF;QACV,UAAUC;QACV,WACI;qBAGJ,oBAAC;QAAI,WAAW;qBACZ,oBAACE,cAAYA;QAAC,MAAMH,SAAS,IAAI;QAAE,MAAM;uBAE7C,oBAAC;QAAI,WAAW;qBACZ,oBAACI,MAAIA;QAAC,MAAM;QAAM,WAAW;OACxBJ,SAAS,KAAK,GAElBA,SAAS,WAAW,IAAI,WAAJ,GACjB,oBAACI,MAAIA;QAAC,MAAM;QAAM,IAAI;QAAO,WAAW;OACnCJ,SAAS,WAAW,kBAIjC,oBAAC;QAAI,WAAW;qBACZ,oBAACK,QAAMA;QACH,MAAM;QACN,SAAS;QACT,oBAAM,oBAACC,gBAAQA;QACf,UAAU;QACV,eAAa;OAChB"}

package/base/Base/FieldRenderers/ObjectRenderer/TemplatePicker/index.d.ts

@@ -0,0 +1 @@
+export { AddTemplateButton, type AddTemplateButtonProps } from "./AddTemplateButton.js";

package/base/Base/FieldRenderers/ObjectRenderer/TemplatePicker/index.js

@@ -0,0 +1 @@
+export { AddTemplateButton } from "./AddTemplateButton.js";

package/base/Base/FieldRenderers/ObjectRenderer/TemplatePicker/types.d.ts

@@ -0,0 +1,6 @@
+import type { ITemplateVM } from "../../../../../features/formModel/index.js";
+export type ViewMode = "grid" | "list";
+export interface TemplateItemProps {
+    template: ITemplateVM;
+    onSelect: (template: ITemplateVM) => void;
+}

package/base/Base/FieldRenderers/ObjectRenderer/resolveItemTitle.d.ts

@@ -1,5 +1,10 @@
-import type { IObjectFieldItemVM } from "../../../../features/formModel/index.js";
+import type { IFieldValueFormatter, IFieldVM } from "../../../../features/formModel/index.js";
 type ItemStringSetting = string | ((data: Record<string, unknown>, index: number) => string);
-export declare function resolveItemTitle(item: IObjectFieldItemVM, index: number, label: string | undefined, itemTitle: ItemStringSetting | undefined): string;
-export declare function resolveItemDescription(item: IObjectFieldItemVM, index: number, itemDescription: ItemStringSetting | undefined): string | undefined;
+/**
+ * The text a field's value reads as in a summary. A formatter registered for the field's type
+ * wins; otherwise each value is printed, swapped for its option label when the field has options.
+ */
+export declare function formatFieldValue(field: IFieldVM, formatters: IFieldValueFormatter[]): string;
+export declare function resolveItemTitle(fields: IFieldVM[], index: number, fallback: string, itemTitle: ItemStringSetting | undefined, formatters: IFieldValueFormatter[]): string;
+export declare function resolveItemDescription(fields: IFieldVM[], index: number, itemDescription: ItemStringSetting | undefined, formatters: IFieldValueFormatter[]): string | undefined;
 export {};

package/base/Base/FieldRenderers/ObjectRenderer/resolveItemTitle.js

@@ -3,26 +3,34 @@ function fieldsToData(fields) {
     for (const field of fields)data[field.name] = field.value;
     return data;
 }
-function resolveItemTitle(item, index, label, itemTitle) {
-    const fallback = `${label || "Item"} #${index + 1}`;
-    if (!itemTitle) return fallback;
-    if ("string" == typeof itemTitle) {
-        const field = item.fields.find((f)=>f.name === itemTitle);
-        const value = field ? String(field.value ?? "") : "";
-        return value || fallback;
+function formatScalar(value, options) {
+    if (null == value || "object" == typeof value) return "";
+    const option = options?.find((o)=>String(o.value) === String(value));
+    return option ? option.label : String(value);
+}
+function formatFieldValue(field, formatters) {
+    const formatter = formatters.find((f)=>f.type === field.type);
+    if (formatter) return formatter.format(field) ?? "";
+    const values = Array.isArray(field.value) ? field.value : [
+        field.value
+    ];
+    return values.map((value)=>formatScalar(value, field.options)).filter(Boolean).join(", ");
+}
+function resolveSetting(fields, index, setting, formatters) {
+    if ("string" == typeof setting) {
+        const field = fields.find((f)=>f.name === setting);
+        return field ? formatFieldValue(field, formatters) : "";
     }
-    const data = fieldsToData(item.fields);
-    return itemTitle(data, index) || fallback;
+    return setting(fieldsToData(fields), index);
 }
-function resolveItemDescription(item, index, itemDescription) {
+function resolveItemTitle(fields, index, fallback, itemTitle, formatters) {
+    if (!itemTitle) return fallback;
+    return resolveSetting(fields, index, itemTitle, formatters) || fallback;
+}
+function resolveItemDescription(fields, index, itemDescription, formatters) {
     if (!itemDescription) return;
-    if ("string" == typeof itemDescription) {
-        const field = item.fields.find((f)=>f.name === itemDescription);
-        return field ? String(field.value ?? "") || void 0 : void 0;
-    }
-    const data = fieldsToData(item.fields);
-    return itemDescription(data, index) || void 0;
+    return resolveSetting(fields, index, itemDescription, formatters) || void 0;
 }
-export { resolveItemDescription, resolveItemTitle };
+export { formatFieldValue, resolveItemDescription, resolveItemTitle };
 
 //# sourceMappingURL=resolveItemTitle.js.map

package/base/Base/FieldRenderers/ObjectRenderer/resolveItemTitle.js.map

@@ -1 +1 @@
-{"version":3,"file":"base/Base/FieldRenderers/ObjectRenderer/resolveItemTitle.js","sources":["../../../../../src/base/Base/FieldRenderers/ObjectRenderer/resolveItemTitle.ts"],"sourcesContent":["import type { IFieldVM, IObjectFieldItemVM } from \"~/features/formModel/index.js\";\n\ntype ItemStringSetting = string | ((data: Record<string, unknown>, index: number) => string);\n\nfunction fieldsToData(fields: IFieldVM[]): Record<string, unknown> {\n    const data: Record<string, unknown> = {};\n    for (const field of fields) {\n        data[field.name] = field.value;\n    }\n    return data;\n}\n\nexport function resolveItemTitle(\n    item: IObjectFieldItemVM,\n    index: number,\n    label: string | undefined,\n    itemTitle: ItemStringSetting | undefined\n): string {\n    const fallback = `${label || \"Item\"} #${index + 1}`;\n\n    if (!itemTitle) {\n        return fallback;\n    }\n\n    if (typeof itemTitle === \"string\") {\n        const field = item.fields.find(f => f.name === itemTitle);\n        const value = field ? String(field.value ?? \"\") : \"\";\n        return value || fallback;\n    }\n\n    const data = fieldsToData(item.fields);\n    return itemTitle(data, index) || fallback;\n}\n\nexport function resolveItemDescription(\n    item: IObjectFieldItemVM,\n    index: number,\n    itemDescription: ItemStringSetting | undefined\n): string | undefined {\n    if (!itemDescription) {\n        return undefined;\n    }\n\n    if (typeof itemDescription === \"string\") {\n        const field = item.fields.find(f => f.name === itemDescription);\n        return field ? String(field.value ?? \"\") || undefined : undefined;\n    }\n\n    const data = fieldsToData(item.fields);\n    return itemDescription(data, index) || undefined;\n}\n"],"names":["fieldsToData","fields","data","field","resolveItemTitle","item","index","label","itemTitle","fallback","f","value","String","resolveItemDescription","itemDescription","undefined"],"mappings":"AAIA,SAASA,aAAaC,MAAkB;IACpC,MAAMC,OAAgC,CAAC;IACvC,KAAK,MAAMC,SAASF,OAChBC,IAAI,CAACC,MAAM,IAAI,CAAC,GAAGA,MAAM,KAAK;IAElC,OAAOD;AACX;AAEO,SAASE,iBACZC,IAAwB,EACxBC,KAAa,EACbC,KAAyB,EACzBC,SAAwC;IAExC,MAAMC,WAAW,GAAGF,SAAS,OAAO,EAAE,EAAED,QAAQ,GAAG;IAEnD,IAAI,CAACE,WACD,OAAOC;IAGX,IAAI,AAAqB,YAArB,OAAOD,WAAwB;QAC/B,MAAML,QAAQE,KAAK,MAAM,CAAC,IAAI,CAACK,CAAAA,IAAKA,EAAE,IAAI,KAAKF;QAC/C,MAAMG,QAAQR,QAAQS,OAAOT,MAAM,KAAK,IAAI,MAAM;QAClD,OAAOQ,SAASF;IACpB;IAEA,MAAMP,OAAOF,aAAaK,KAAK,MAAM;IACrC,OAAOG,UAAUN,MAAMI,UAAUG;AACrC;AAEO,SAASI,uBACZR,IAAwB,EACxBC,KAAa,EACbQ,eAA8C;IAE9C,IAAI,CAACA,iBACD;IAGJ,IAAI,AAA2B,YAA3B,OAAOA,iBAA8B;QACrC,MAAMX,QAAQE,KAAK,MAAM,CAAC,IAAI,CAACK,CAAAA,IAAKA,EAAE,IAAI,KAAKI;QAC/C,OAAOX,QAAQS,OAAOT,MAAM,KAAK,IAAI,OAAOY,SAAYA;IAC5D;IAEA,MAAMb,OAAOF,aAAaK,KAAK,MAAM;IACrC,OAAOS,gBAAgBZ,MAAMI,UAAUS;AAC3C"}
+{"version":3,"file":"base/Base/FieldRenderers/ObjectRenderer/resolveItemTitle.js","sources":["../../../../../src/base/Base/FieldRenderers/ObjectRenderer/resolveItemTitle.ts"],"sourcesContent":["import type { IFieldValueFormatter, IFieldVM, IValueOption } from \"~/features/formModel/index.js\";\n\ntype ItemStringSetting = string | ((data: Record<string, unknown>, index: number) => string);\n\nfunction fieldsToData(fields: IFieldVM[]): Record<string, unknown> {\n    const data: Record<string, unknown> = {};\n    for (const field of fields) {\n        data[field.name] = field.value;\n    }\n    return data;\n}\n\nfunction formatScalar(value: unknown, options: IValueOption[] | undefined): string {\n    if (value === null || value === undefined || typeof value === \"object\") {\n        return \"\";\n    }\n    // Predefined values store the option's value; the editor knows the option by its label.\n    const option = options?.find(o => String(o.value) === String(value));\n    return option ? option.label : String(value);\n}\n\n/**\n * The text a field's value reads as in a summary. A formatter registered for the field's type\n * wins; otherwise each value is printed, swapped for its option label when the field has options.\n */\nexport function formatFieldValue(field: IFieldVM, formatters: IFieldValueFormatter[]): string {\n    const formatter = formatters.find(f => f.type === field.type);\n    if (formatter) {\n        return formatter.format(field) ?? \"\";\n    }\n\n    const values = Array.isArray(field.value) ? field.value : [field.value];\n    return values\n        .map(value => formatScalar(value, field.options))\n        .filter(Boolean)\n        .join(\", \");\n}\n\nfunction resolveSetting(\n    fields: IFieldVM[],\n    index: number,\n    setting: ItemStringSetting,\n    formatters: IFieldValueFormatter[]\n): string {\n    if (typeof setting === \"string\") {\n        const field = fields.find(f => f.name === setting);\n        return field ? formatFieldValue(field, formatters) : \"\";\n    }\n\n    return setting(fieldsToData(fields), index);\n}\n\nexport function resolveItemTitle(\n    fields: IFieldVM[],\n    index: number,\n    fallback: string,\n    itemTitle: ItemStringSetting | undefined,\n    formatters: IFieldValueFormatter[]\n): string {\n    if (!itemTitle) {\n        return fallback;\n    }\n\n    return resolveSetting(fields, index, itemTitle, formatters) || fallback;\n}\n\nexport function resolveItemDescription(\n    fields: IFieldVM[],\n    index: number,\n    itemDescription: ItemStringSetting | undefined,\n    formatters: IFieldValueFormatter[]\n): string | undefined {\n    if (!itemDescription) {\n        return undefined;\n    }\n\n    return resolveSetting(fields, index, itemDescription, formatters) || undefined;\n}\n"],"names":["fieldsToData","fields","data","field","formatScalar","value","options","option","o","String","formatFieldValue","formatters","formatter","f","values","Array","Boolean","resolveSetting","index","setting","resolveItemTitle","fallback","itemTitle","resolveItemDescription","itemDescription","undefined"],"mappings":"AAIA,SAASA,aAAaC,MAAkB;IACpC,MAAMC,OAAgC,CAAC;IACvC,KAAK,MAAMC,SAASF,OAChBC,IAAI,CAACC,MAAM,IAAI,CAAC,GAAGA,MAAM,KAAK;IAElC,OAAOD;AACX;AAEA,SAASE,aAAaC,KAAc,EAAEC,OAAmC;IACrE,IAAID,QAAAA,SAAyC,AAAiB,YAAjB,OAAOA,OAChD,OAAO;IAGX,MAAME,SAASD,SAAS,KAAKE,CAAAA,IAAKC,OAAOD,EAAE,KAAK,MAAMC,OAAOJ;IAC7D,OAAOE,SAASA,OAAO,KAAK,GAAGE,OAAOJ;AAC1C;AAMO,SAASK,iBAAiBP,KAAe,EAAEQ,UAAkC;IAChF,MAAMC,YAAYD,WAAW,IAAI,CAACE,CAAAA,IAAKA,EAAE,IAAI,KAAKV,MAAM,IAAI;IAC5D,IAAIS,WACA,OAAOA,UAAU,MAAM,CAACT,UAAU;IAGtC,MAAMW,SAASC,MAAM,OAAO,CAACZ,MAAM,KAAK,IAAIA,MAAM,KAAK,GAAG;QAACA,MAAM,KAAK;KAAC;IACvE,OAAOW,OACF,GAAG,CAACT,CAAAA,QAASD,aAAaC,OAAOF,MAAM,OAAO,GAC9C,MAAM,CAACa,SACP,IAAI,CAAC;AACd;AAEA,SAASC,eACLhB,MAAkB,EAClBiB,KAAa,EACbC,OAA0B,EAC1BR,UAAkC;IAElC,IAAI,AAAmB,YAAnB,OAAOQ,SAAsB;QAC7B,MAAMhB,QAAQF,OAAO,IAAI,CAACY,CAAAA,IAAKA,EAAE,IAAI,KAAKM;QAC1C,OAAOhB,QAAQO,iBAAiBP,OAAOQ,cAAc;IACzD;IAEA,OAAOQ,QAAQnB,aAAaC,SAASiB;AACzC;AAEO,SAASE,iBACZnB,MAAkB,EAClBiB,KAAa,EACbG,QAAgB,EAChBC,SAAwC,EACxCX,UAAkC;IAElC,IAAI,CAACW,WACD,OAAOD;IAGX,OAAOJ,eAAehB,QAAQiB,OAAOI,WAAWX,eAAeU;AACnE;AAEO,SAASE,uBACZtB,MAAkB,EAClBiB,KAAa,EACbM,eAA8C,EAC9Cb,UAAkC;IAElC,IAAI,CAACa,iBACD;IAGJ,OAAOP,eAAehB,QAAQiB,OAAOM,iBAAiBb,eAAec;AACzE"}

package/base/Base/FieldRenderers/ObjectRenderer/resolveItemTitle.test.d.ts

@@ -0,0 +1 @@
+export {};

package/base/Base/FieldRenderers/ObjectRenderer/resolveItemTitle.test.js

@@ -0,0 +1,106 @@
+import { describe, expect, it } from "vitest";
+import { resolveItemDescription, resolveItemTitle } from "./resolveItemTitle.js";
+const field = (name, type, value, extra = {})=>({
+        name,
+        type,
+        value,
+        ...extra
+    });
+const classTypes = [
+    {
+        label: "Fitness",
+        value: "fitness"
+    },
+    {
+        label: "Personal Training",
+        value: "personal-training"
+    }
+];
+describe("resolveItemTitle", ()=>{
+    it("shows the label of a predefined value instead of its value", ()=>{
+        const fields = [
+            field("classType", "text", "personal-training", {
+                options: classTypes
+            })
+        ];
+        expect(resolveItemTitle(fields, 0, "Item #1", "classType", [])).toBe("Personal Training");
+    });
+    it("joins the labels of a list of predefined values", ()=>{
+        const fields = [
+            field("classTypes", "text", [
+                "fitness",
+                "personal-training"
+            ], {
+                options: classTypes
+            })
+        ];
+        expect(resolveItemTitle(fields, 0, "Item #1", "classTypes", [])).toBe("Fitness, Personal Training");
+    });
+    it("matches a numeric predefined value", ()=>{
+        const fields = [
+            field("size", "number", 2, {
+                options: [
+                    {
+                        label: "Small",
+                        value: 1
+                    },
+                    {
+                        label: "Large",
+                        value: 2
+                    }
+                ]
+            })
+        ];
+        expect(resolveItemTitle(fields, 0, "Item #1", "size", [])).toBe("Large");
+    });
+    it("hands the value to the formatter registered for the field's type", ()=>{
+        const formatter = {
+            type: "ref",
+            format: (f)=>null === f.value ? void 0 : "Baker"
+        };
+        const fields = [
+            field("location", "ref", {
+                id: "baker#0001",
+                modelId: "location"
+            })
+        ];
+        expect(resolveItemTitle(fields, 0, "Item #1", "location", [
+            formatter
+        ])).toBe("Baker");
+        expect(resolveItemDescription(fields, 0, "location", [
+            formatter
+        ])).toBe("Baker");
+    });
+    it("falls back while a value has no readable text", ()=>{
+        const loading = {
+            type: "ref",
+            format: ()=>void 0
+        };
+        const fields = [
+            field("location", "ref", {
+                id: "baker#0001",
+                modelId: "location"
+            }),
+            field("details", "object", {
+                a: 1
+            })
+        ];
+        expect(resolveItemTitle(fields, 2, "Facility #3", "location", [
+            loading
+        ])).toBe("Facility #3");
+        expect(resolveItemTitle(fields, 2, "Facility #3", "details", [])).toBe("Facility #3");
+        expect(resolveItemDescription(fields, 2, "location", [
+            loading
+        ])).toBeUndefined();
+    });
+    it("passes raw values to a title function", ()=>{
+        const fields = [
+            field("classType", "text", "fitness", {
+                options: classTypes
+            })
+        ];
+        expect(resolveItemTitle(fields, 1, "Item #2", (data, index)=>`${data.classType} ${index}`, [])).toBe("fitness 1");
+    });
+});
+
+//# sourceMappingURL=resolveItemTitle.test.js.map

package/base/Base/FieldRenderers/ObjectRenderer/resolveItemTitle.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"base/Base/FieldRenderers/ObjectRenderer/resolveItemTitle.test.js","sources":["../../../../../src/base/Base/FieldRenderers/ObjectRenderer/resolveItemTitle.test.ts"],"sourcesContent":["import { describe, it, expect } from \"vitest\";\nimport type { IFieldValueFormatter, IFieldVM } from \"~/features/formModel/index.js\";\nimport { resolveItemDescription, resolveItemTitle } from \"./resolveItemTitle.js\";\n\nconst field = (name: string, type: string, value: unknown, extra: Partial<IFieldVM> = {}) =>\n    ({ name, type, value, ...extra }) as IFieldVM;\n\nconst classTypes = [\n    { label: \"Fitness\", value: \"fitness\" },\n    { label: \"Personal Training\", value: \"personal-training\" }\n];\n\ndescribe(\"resolveItemTitle\", () => {\n    it(\"shows the label of a predefined value instead of its value\", () => {\n        const fields = [field(\"classType\", \"text\", \"personal-training\", { options: classTypes })];\n\n        expect(resolveItemTitle(fields, 0, \"Item #1\", \"classType\", [])).toBe(\"Personal Training\");\n    });\n\n    it(\"joins the labels of a list of predefined values\", () => {\n        const fields = [\n            field(\"classTypes\", \"text\", [\"fitness\", \"personal-training\"], { options: classTypes })\n        ];\n\n        expect(resolveItemTitle(fields, 0, \"Item #1\", \"classTypes\", [])).toBe(\n            \"Fitness, Personal Training\"\n        );\n    });\n\n    it(\"matches a numeric predefined value\", () => {\n        const fields = [\n            field(\"size\", \"number\", 2, {\n                options: [\n                    { label: \"Small\", value: 1 },\n                    { label: \"Large\", value: 2 }\n                ]\n            })\n        ];\n\n        expect(resolveItemTitle(fields, 0, \"Item #1\", \"size\", [])).toBe(\"Large\");\n    });\n\n    it(\"hands the value to the formatter registered for the field's type\", () => {\n        const formatter: IFieldValueFormatter = {\n            type: \"ref\",\n            format: f => (f.value === null ? undefined : \"Baker\")\n        };\n        const fields = [field(\"location\", \"ref\", { id: \"baker#0001\", modelId: \"location\" })];\n\n        expect(resolveItemTitle(fields, 0, \"Item #1\", \"location\", [formatter])).toBe(\"Baker\");\n        expect(resolveItemDescription(fields, 0, \"location\", [formatter])).toBe(\"Baker\");\n    });\n\n    it(\"falls back while a value has no readable text\", () => {\n        const loading: IFieldValueFormatter = { type: \"ref\", format: () => undefined };\n        const fields = [\n            field(\"location\", \"ref\", { id: \"baker#0001\", modelId: \"location\" }),\n            field(\"details\", \"object\", { a: 1 })\n        ];\n\n        expect(resolveItemTitle(fields, 2, \"Facility #3\", \"location\", [loading])).toBe(\n            \"Facility #3\"\n        );\n        expect(resolveItemTitle(fields, 2, \"Facility #3\", \"details\", [])).toBe(\"Facility #3\");\n        expect(resolveItemDescription(fields, 2, \"location\", [loading])).toBeUndefined();\n    });\n\n    it(\"passes raw values to a title function\", () => {\n        const fields = [field(\"classType\", \"text\", \"fitness\", { options: classTypes })];\n\n        expect(\n            resolveItemTitle(\n                fields,\n                1,\n                \"Item #2\",\n                (data, index) => `${data.classType} ${index}`,\n                []\n            )\n        ).toBe(\"fitness 1\");\n    });\n});\n"],"names":["field","name","type","value","extra","classTypes","describe","it","fields","expect","resolveItemTitle","formatter","f","undefined","resolveItemDescription","loading","data","index"],"mappings":";;AAIA,MAAMA,QAAQ,CAACC,MAAcC,MAAcC,OAAgBC,QAA2B,CAAC,CAAC,GACnF;QAAEH;QAAMC;QAAMC;QAAO,GAAGC,KAAK;IAAC;AAEnC,MAAMC,aAAa;IACf;QAAE,OAAO;QAAW,OAAO;IAAU;IACrC;QAAE,OAAO;QAAqB,OAAO;IAAoB;CAC5D;AAEDC,SAAS,oBAAoB;IACzBC,GAAG,8DAA8D;QAC7D,MAAMC,SAAS;YAACR,MAAM,aAAa,QAAQ,qBAAqB;gBAAE,SAASK;YAAW;SAAG;QAEzFI,OAAOC,iBAAiBF,QAAQ,GAAG,WAAW,aAAa,EAAE,GAAG,IAAI,CAAC;IACzE;IAEAD,GAAG,mDAAmD;QAClD,MAAMC,SAAS;YACXR,MAAM,cAAc,QAAQ;gBAAC;gBAAW;aAAoB,EAAE;gBAAE,SAASK;YAAW;SACvF;QAEDI,OAAOC,iBAAiBF,QAAQ,GAAG,WAAW,cAAc,EAAE,GAAG,IAAI,CACjE;IAER;IAEAD,GAAG,sCAAsC;QACrC,MAAMC,SAAS;YACXR,MAAM,QAAQ,UAAU,GAAG;gBACvB,SAAS;oBACL;wBAAE,OAAO;wBAAS,OAAO;oBAAE;oBAC3B;wBAAE,OAAO;wBAAS,OAAO;oBAAE;iBAC9B;YACL;SACH;QAEDS,OAAOC,iBAAiBF,QAAQ,GAAG,WAAW,QAAQ,EAAE,GAAG,IAAI,CAAC;IACpE;IAEAD,GAAG,oEAAoE;QACnE,MAAMI,YAAkC;YACpC,MAAM;YACN,QAAQC,CAAAA,IAAMA,AAAY,SAAZA,EAAE,KAAK,GAAYC,SAAY;QACjD;QACA,MAAML,SAAS;YAACR,MAAM,YAAY,OAAO;gBAAE,IAAI;gBAAc,SAAS;YAAW;SAAG;QAEpFS,OAAOC,iBAAiBF,QAAQ,GAAG,WAAW,YAAY;YAACG;SAAU,GAAG,IAAI,CAAC;QAC7EF,OAAOK,uBAAuBN,QAAQ,GAAG,YAAY;YAACG;SAAU,GAAG,IAAI,CAAC;IAC5E;IAEAJ,GAAG,iDAAiD;QAChD,MAAMQ,UAAgC;YAAE,MAAM;YAAO,QAAQ,IAAMF;QAAU;QAC7E,MAAML,SAAS;YACXR,MAAM,YAAY,OAAO;gBAAE,IAAI;gBAAc,SAAS;YAAW;YACjEA,MAAM,WAAW,UAAU;gBAAE,GAAG;YAAE;SACrC;QAEDS,OAAOC,iBAAiBF,QAAQ,GAAG,eAAe,YAAY;YAACO;SAAQ,GAAG,IAAI,CAC1E;QAEJN,OAAOC,iBAAiBF,QAAQ,GAAG,eAAe,WAAW,EAAE,GAAG,IAAI,CAAC;QACvEC,OAAOK,uBAAuBN,QAAQ,GAAG,YAAY;YAACO;SAAQ,GAAG,aAAa;IAClF;IAEAR,GAAG,yCAAyC;QACxC,MAAMC,SAAS;YAACR,MAAM,aAAa,QAAQ,WAAW;gBAAE,SAASK;YAAW;SAAG;QAE/EI,OACIC,iBACIF,QACA,GACA,WACA,CAACQ,MAAMC,QAAU,GAAGD,KAAK,SAAS,CAAC,CAAC,EAAEC,OAAO,EAC7C,EAAE,GAER,IAAI,CAAC;IACX;AACJ"}

package/base/Base/FieldRenderers/SelectRenderer.js

@@ -16,6 +16,7 @@ const SelectRenderer = createFieldRenderer(({ field })=>{
             field.onBlur();
         },
         required: field.required,
+        displayResetAction: !field.required,
         disabled: field.disabled,
         validation: field.validation,
         options: options.map((opt)=>({

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

@@ -1 +1 @@
-{"version":3,"file":"base/Base/FieldRenderers/SelectRenderer.js","sources":["../../../../src/base/Base/FieldRenderers/SelectRenderer.tsx"],"sourcesContent":["import React from \"react\";\nimport { createFieldRenderer } from \"~/features/formModel/createFieldRenderer.js\";\nimport { Select } from \"@webiny/admin-ui\";\nimport type { IValueOption } from \"~/features/formModel/index.js\";\n\ndeclare module \"../../../features/formModel/abstractions.js\" {\n    interface IFieldRendererRegistry {\n        select: { fieldType: \"text\" | \"number\"; options: true; settings: undefined };\n        /** @deprecated Use \"select\" instead. */\n        dropdown: { fieldType: \"text\" | \"number\"; options: true; settings: undefined };\n    }\n}\n\nconst isValidValue = (value: unknown): value is string | number =>\n    typeof value === \"string\" || typeof value === \"number\";\n\nexport const SelectRenderer = createFieldRenderer(({ field }) => {\n    const options: IValueOption[] = field.options ?? [];\n\n    return (\n        <Select\n            label={field.label}\n            hint={field.help}\n            placeholder={field.placeholder}\n            description={field.description}\n            note={field.note}\n            value={isValidValue(field.value) ? String(field.value) : \"\"}\n            onChange={value => {\n                field.onChange(value);\n                field.onBlur();\n            }}\n            required={field.required}\n            disabled={field.disabled}\n            validation={field.validation}\n            options={options.map(opt => ({\n                label: opt.label,\n                value: isValidValue(opt.value) ? String(opt.value) : opt.value,\n                disabled: opt.disabled\n            }))}\n        />\n    );\n});\n"],"names":["isValidValue","value","SelectRenderer","createFieldRenderer","field","options","Select","String","opt"],"mappings":";;;AAaA,MAAMA,eAAe,CAACC,QAClB,AAAiB,YAAjB,OAAOA,SAAsB,AAAiB,YAAjB,OAAOA;AAEjC,MAAMC,iBAAiBC,oBAAoB,CAAC,EAAEC,KAAK,EAAE;IACxD,MAAMC,UAA0BD,MAAM,OAAO,IAAI,EAAE;IAEnD,OAAO,WAAP,GACI,oBAACE,QAAMA;QACH,OAAOF,MAAM,KAAK;QAClB,MAAMA,MAAM,IAAI;QAChB,aAAaA,MAAM,WAAW;QAC9B,aAAaA,MAAM,WAAW;QAC9B,MAAMA,MAAM,IAAI;QAChB,OAAOJ,aAAaI,MAAM,KAAK,IAAIG,OAAOH,MAAM,KAAK,IAAI;QACzD,UAAUH,CAAAA;YACNG,MAAM,QAAQ,CAACH;YACfG,MAAM,MAAM;QAChB;QACA,UAAUA,MAAM,QAAQ;QACxB,UAAUA,MAAM,QAAQ;QACxB,YAAYA,MAAM,UAAU;QAC5B,SAASC,QAAQ,GAAG,CAACG,CAAAA,MAAQ;gBACzB,OAAOA,IAAI,KAAK;gBAChB,OAAOR,aAAaQ,IAAI,KAAK,IAAID,OAAOC,IAAI,KAAK,IAAIA,IAAI,KAAK;gBAC9D,UAAUA,IAAI,QAAQ;YAC1B;;AAGZ"}
+{"version":3,"file":"base/Base/FieldRenderers/SelectRenderer.js","sources":["../../../../src/base/Base/FieldRenderers/SelectRenderer.tsx"],"sourcesContent":["import React from \"react\";\nimport { createFieldRenderer } from \"~/features/formModel/createFieldRenderer.js\";\nimport { Select } from \"@webiny/admin-ui\";\nimport type { IValueOption } from \"~/features/formModel/index.js\";\n\ndeclare module \"../../../features/formModel/abstractions.js\" {\n    interface IFieldRendererRegistry {\n        select: { fieldType: \"text\" | \"number\"; options: true; settings: undefined };\n        /** @deprecated Use \"select\" instead. */\n        dropdown: { fieldType: \"text\" | \"number\"; options: true; settings: undefined };\n    }\n}\n\nconst isValidValue = (value: unknown): value is string | number =>\n    typeof value === \"string\" || typeof value === \"number\";\n\nexport const SelectRenderer = createFieldRenderer(({ field }) => {\n    const options: IValueOption[] = field.options ?? [];\n\n    return (\n        <Select\n            label={field.label}\n            hint={field.help}\n            placeholder={field.placeholder}\n            description={field.description}\n            note={field.note}\n            value={isValidValue(field.value) ? String(field.value) : \"\"}\n            onChange={value => {\n                field.onChange(value);\n                field.onBlur();\n            }}\n            required={field.required}\n            // Clearing a required field can only leave it invalid, so it gets no reset action.\n            displayResetAction={!field.required}\n            disabled={field.disabled}\n            validation={field.validation}\n            options={options.map(opt => ({\n                label: opt.label,\n                value: isValidValue(opt.value) ? String(opt.value) : opt.value,\n                disabled: opt.disabled\n            }))}\n        />\n    );\n});\n"],"names":["isValidValue","value","SelectRenderer","createFieldRenderer","field","options","Select","String","opt"],"mappings":";;;AAaA,MAAMA,eAAe,CAACC,QAClB,AAAiB,YAAjB,OAAOA,SAAsB,AAAiB,YAAjB,OAAOA;AAEjC,MAAMC,iBAAiBC,oBAAoB,CAAC,EAAEC,KAAK,EAAE;IACxD,MAAMC,UAA0BD,MAAM,OAAO,IAAI,EAAE;IAEnD,OAAO,WAAP,GACI,oBAACE,QAAMA;QACH,OAAOF,MAAM,KAAK;QAClB,MAAMA,MAAM,IAAI;QAChB,aAAaA,MAAM,WAAW;QAC9B,aAAaA,MAAM,WAAW;QAC9B,MAAMA,MAAM,IAAI;QAChB,OAAOJ,aAAaI,MAAM,KAAK,IAAIG,OAAOH,MAAM,KAAK,IAAI;QACzD,UAAUH,CAAAA;YACNG,MAAM,QAAQ,CAACH;YACfG,MAAM,MAAM;QAChB;QACA,UAAUA,MAAM,QAAQ;QAExB,oBAAoB,CAACA,MAAM,QAAQ;QACnC,UAAUA,MAAM,QAAQ;QACxB,YAAYA,MAAM,UAAU;QAC5B,SAASC,QAAQ,GAAG,CAACG,CAAAA,MAAQ;gBACzB,OAAOA,IAAI,KAAK;gBAChB,OAAOR,aAAaQ,IAAI,KAAK,IAAID,OAAOC,IAAI,KAAK,IAAIA,IAAI,KAAK;gBAC9D,UAAUA,IAAI,QAAQ;YAC1B;;AAGZ"}

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

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

package/base/Base/Menus.js

@@ -4,10 +4,10 @@ import { ReactComponent as settings_svg_ReactComponent } from "@webiny/icons/set
 import { ReactComponent as electric_bolt_svg_ReactComponent } from "@webiny/icons/electric_bolt.svg";
 import { AdminConfig } from "../../config/AdminConfig.js";
 import { Menu } from "../../config/AdminConfig/Menu.js";
-import { useWcp } from "../../presentation/wcp/useWcp.js";
+import { useFeatureFlags } from "../../presentation/featureFlags/useFeatureFlags.js";
 const Menus = /*#__PURE__*/ react.memo(()=>{
-    const wcp = useWcp();
-    const hasWcpLicense = Boolean(wcp.getProject());
+    const featureFlags = useFeatureFlags();
+    const showUpgrade = !featureFlags.isEnabled("multiTenancy");
     return /*#__PURE__*/ react.createElement(AdminConfig, null, /*#__PURE__*/ react.createElement(Menu, {
         name: "home",
         pin: "start",
@@ -37,7 +37,7 @@ const Menus = /*#__PURE__*/ react.memo(()=>{
             text: "System",
             collapsible: false
         })
-    }), !hasWcpLicense && /*#__PURE__*/ react.createElement(Menu.Footer, {
+    }), showUpgrade && /*#__PURE__*/ react.createElement(Menu.Footer, {
         name: "upgrade",
         element: /*#__PURE__*/ react.createElement(Menu.Link, {
             text: "Upgrade",

package/base/Base/Menus.js.map

@@ -1 +1 @@
-{"version":3,"file":"base/Base/Menus.js","sources":["../../../src/base/Base/Menus.tsx"],"sourcesContent":["import React from \"react\";\nimport { ReactComponent as DashboardIcon } from \"@webiny/icons/space_dashboard.svg\";\nimport { ReactComponent as SettingsIcon } from \"@webiny/icons/settings.svg\";\nimport { ReactComponent as UpgradeIcon } from \"@webiny/icons/electric_bolt.svg\";\nimport { AdminConfig } from \"~/config/AdminConfig.js\";\nimport { Menu } from \"~/config/AdminConfig/Menu.js\";\nimport { useWcp } from \"~/presentation/wcp/useWcp.js\";\n\nexport const Menus = React.memo(() => {\n    const wcp = useWcp();\n    const hasWcpLicense = Boolean(wcp.getProject());\n\n    return (\n        <AdminConfig>\n            <Menu\n                name={\"home\"}\n                pin={\"start\"}\n                element={\n                    <Menu.Link\n                        to={\"/\"}\n                        text={\"Home\"}\n                        icon={<Menu.Link.Icon label=\"Home\" element={<DashboardIcon />} />}\n                    />\n                }\n            />\n            <Menu\n                name={\"settings\"}\n                hideIfEmpty={true}\n                pin={\"end\"}\n                element={\n                    <Menu.Item\n                        text={\"Settings\"}\n                        icon={<Menu.Link.Icon label=\"Settings\" element={<SettingsIcon />} />}\n                    />\n                }\n            />\n\n            <Menu\n                parent={\"settings\"}\n                name=\"settings.system\"\n                element={<Menu.Group text=\"System\" collapsible={false} />}\n            />\n\n            {!hasWcpLicense && (\n                <Menu.Footer\n                    name={\"upgrade\"}\n                    element={\n                        <Menu.Link\n                            text={\"Upgrade\"}\n                            icon={<Menu.Link.Icon label=\"Upgrade\" element={<UpgradeIcon />} />}\n                            to={\"https://www.webiny.com/pricing\"}\n                            rel={\"noopener noreferrer\"}\n                            target={\"_blank\"}\n                            className={\n                                \"[&_a]:text-accent-primary! [&_svg]:fill-accent-default! font-semibold\"\n                            }\n                        />\n                    }\n                />\n            )}\n        </AdminConfig>\n    );\n});\n\nMenus.displayName = \"Menus\";\n"],"names":["Menus","React","wcp","useWcp","hasWcpLicense","Boolean","AdminConfig","Menu","DashboardIcon","SettingsIcon","UpgradeIcon"],"mappings":";;;;;;;AAQO,MAAMA,QAAQ,WAAHA,GAAGC,MAAAA,IAAU,CAAC;IAC5B,MAAMC,MAAMC;IACZ,MAAMC,gBAAgBC,QAAQH,IAAI,UAAU;IAE5C,OAAO,WAAP,GACI,oBAACI,aAAWA,MAAAA,WAAAA,GACR,oBAACC,MAAIA;QACD,MAAM;QACN,KAAK;QACL,uBACI,oBAACA,KAAK,IAAI;YACN,IAAI;YACJ,MAAM;YACN,oBAAM,oBAACA,KAAK,IAAI,CAAC,IAAI;gBAAC,OAAM;gBAAO,uBAAS,oBAACC,gBAAaA;;;sBAItE,oBAACD,MAAIA;QACD,MAAM;QACN,aAAa;QACb,KAAK;QACL,uBACI,oBAACA,KAAK,IAAI;YACN,MAAM;YACN,oBAAM,oBAACA,KAAK,IAAI,CAAC,IAAI;gBAAC,OAAM;gBAAW,uBAAS,oBAACE,6BAAYA;;;sBAKzE,oBAACF,MAAIA;QACD,QAAQ;QACR,MAAK;QACL,uBAAS,oBAACA,KAAK,KAAK;YAAC,MAAK;YAAS,aAAa;;QAGnD,CAACH,iBAAiB,WAAjBA,GACE,oBAACG,KAAK,MAAM;QACR,MAAM;QACN,uBACI,oBAACA,KAAK,IAAI;YACN,MAAM;YACN,oBAAM,oBAACA,KAAK,IAAI,CAAC,IAAI;gBAAC,OAAM;gBAAU,uBAAS,oBAACG,kCAAWA;;YAC3D,IAAI;YACJ,KAAK;YACL,QAAQ;YACR,WACI;;;AAQhC;AAEAV,MAAM,WAAW,GAAG"}
+{"version":3,"file":"base/Base/Menus.js","sources":["../../../src/base/Base/Menus.tsx"],"sourcesContent":["import React from \"react\";\nimport { ReactComponent as DashboardIcon } from \"@webiny/icons/space_dashboard.svg\";\nimport { ReactComponent as SettingsIcon } from \"@webiny/icons/settings.svg\";\nimport { ReactComponent as UpgradeIcon } from \"@webiny/icons/electric_bolt.svg\";\nimport { AdminConfig } from \"~/config/AdminConfig.js\";\nimport { Menu } from \"~/config/AdminConfig/Menu.js\";\nimport { useFeatureFlags } from \"~/presentation/featureFlags/useFeatureFlags.js\";\n\nexport const Menus = React.memo(() => {\n    const featureFlags = useFeatureFlags();\n    const showUpgrade = !featureFlags.isEnabled(\"multiTenancy\");\n\n    return (\n        <AdminConfig>\n            <Menu\n                name={\"home\"}\n                pin={\"start\"}\n                element={\n                    <Menu.Link\n                        to={\"/\"}\n                        text={\"Home\"}\n                        icon={<Menu.Link.Icon label=\"Home\" element={<DashboardIcon />} />}\n                    />\n                }\n            />\n            <Menu\n                name={\"settings\"}\n                hideIfEmpty={true}\n                pin={\"end\"}\n                element={\n                    <Menu.Item\n                        text={\"Settings\"}\n                        icon={<Menu.Link.Icon label=\"Settings\" element={<SettingsIcon />} />}\n                    />\n                }\n            />\n\n            <Menu\n                parent={\"settings\"}\n                name=\"settings.system\"\n                element={<Menu.Group text=\"System\" collapsible={false} />}\n            />\n\n            {showUpgrade && (\n                <Menu.Footer\n                    name={\"upgrade\"}\n                    element={\n                        <Menu.Link\n                            text={\"Upgrade\"}\n                            icon={<Menu.Link.Icon label=\"Upgrade\" element={<UpgradeIcon />} />}\n                            to={\"https://www.webiny.com/pricing\"}\n                            rel={\"noopener noreferrer\"}\n                            target={\"_blank\"}\n                            className={\n                                \"[&_a]:text-accent-primary! [&_svg]:fill-accent-default! font-semibold\"\n                            }\n                        />\n                    }\n                />\n            )}\n        </AdminConfig>\n    );\n});\n\nMenus.displayName = \"Menus\";\n"],"names":["Menus","React","featureFlags","useFeatureFlags","showUpgrade","AdminConfig","Menu","DashboardIcon","SettingsIcon","UpgradeIcon"],"mappings":";;;;;;;AAQO,MAAMA,QAAQ,WAAHA,GAAGC,MAAAA,IAAU,CAAC;IAC5B,MAAMC,eAAeC;IACrB,MAAMC,cAAc,CAACF,aAAa,SAAS,CAAC;IAE5C,OAAO,WAAP,GACI,oBAACG,aAAWA,MAAAA,WAAAA,GACR,oBAACC,MAAIA;QACD,MAAM;QACN,KAAK;QACL,uBACI,oBAACA,KAAK,IAAI;YACN,IAAI;YACJ,MAAM;YACN,oBAAM,oBAACA,KAAK,IAAI,CAAC,IAAI;gBAAC,OAAM;gBAAO,uBAAS,oBAACC,gBAAaA;;;sBAItE,oBAACD,MAAIA;QACD,MAAM;QACN,aAAa;QACb,KAAK;QACL,uBACI,oBAACA,KAAK,IAAI;YACN,MAAM;YACN,oBAAM,oBAACA,KAAK,IAAI,CAAC,IAAI;gBAAC,OAAM;gBAAW,uBAAS,oBAACE,6BAAYA;;;sBAKzE,oBAACF,MAAIA;QACD,QAAQ;QACR,MAAK;QACL,uBAAS,oBAACA,KAAK,KAAK;YAAC,MAAK;YAAS,aAAa;;QAGnDF,eAAe,WAAfA,GACG,oBAACE,KAAK,MAAM;QACR,MAAM;QACN,uBACI,oBAACA,KAAK,IAAI;YACN,MAAM;YACN,oBAAM,oBAACA,KAAK,IAAI,CAAC,IAAI;gBAAC,OAAM;gBAAU,uBAAS,oBAACG,kCAAWA;;YAC3D,IAAI;YACJ,KAAK;YACL,QAAQ;YACR,WACI;;;AAQhC;AAEAT,MAAM,WAAW,GAAG"}

package/base/Base.js

@@ -8,7 +8,8 @@ import { DefaultFieldRenderers } from "./Base/DefaultFieldRenderers.js";
 import { DefaultLayoutRenderers } from "./Base/DefaultLayoutRenderers.js";
 import { DefaultLexicalEditorConfig } from "../components/LexicalEditor/DefaultLexicalEditorConfig.js";
 import { AccessManagementExtension } from "../modules/AccessManagementExtension.js";
-const BaseExtension = ()=>/*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(Tenant, null), /*#__PURE__*/ react.createElement(Menus, null), /*#__PURE__*/ react.createElement(UserMenu, null), /*#__PURE__*/ react.createElement(RoutesConfig, null), /*#__PURE__*/ react.createElement(LexicalPreset, null), /*#__PURE__*/ react.createElement(DefaultFieldRenderers, null), /*#__PURE__*/ react.createElement(DefaultLayoutRenderers, null), /*#__PURE__*/ react.createElement(DefaultLexicalEditorConfig, null), /*#__PURE__*/ react.createElement(AccessManagementExtension, null));
+import { DebuggerExtension } from "../modules/DebuggerExtension.js";
+const BaseExtension = ()=>/*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(Tenant, null), /*#__PURE__*/ react.createElement(Menus, null), /*#__PURE__*/ react.createElement(UserMenu, null), /*#__PURE__*/ react.createElement(RoutesConfig, null), /*#__PURE__*/ react.createElement(LexicalPreset, null), /*#__PURE__*/ react.createElement(DefaultFieldRenderers, null), /*#__PURE__*/ react.createElement(DefaultLayoutRenderers, null), /*#__PURE__*/ react.createElement(DefaultLexicalEditorConfig, null), /*#__PURE__*/ react.createElement(AccessManagementExtension, null), /*#__PURE__*/ react.createElement(DebuggerExtension, null));
 const Base = /*#__PURE__*/ memo(BaseExtension);
 export { Base };
 

package/base/Base.js.map

@@ -1 +1 @@
-{"version":3,"file":"base/Base.js","sources":["../../src/base/Base.tsx"],"sourcesContent":["import React, { memo } from \"react\";\nimport { Menus } from \"./Base/Menus.js\";\nimport { RoutesConfig } from \"./Base/RoutesConfig.js\";\nimport { Tenant } from \"./Base/Tenant.js\";\nimport { UserMenu } from \"./Base/UserMenu.js\";\nimport { LexicalPreset } from \"./Base/LexicalPreset.js\";\nimport { DefaultFieldRenderers } from \"./Base/DefaultFieldRenderers.js\";\nimport { DefaultLayoutRenderers } from \"./Base/DefaultLayoutRenderers.js\";\nimport { DefaultLexicalEditorConfig } from \"~/components/LexicalEditor/DefaultLexicalEditorConfig.js\";\nimport { AccessManagementExtension } from \"~/modules/AccessManagementExtension.js\";\n\nconst BaseExtension = () => {\n    return (\n        <>\n            <Tenant />\n            <Menus />\n            <UserMenu />\n            <RoutesConfig />\n            <LexicalPreset />\n            <DefaultFieldRenderers />\n            <DefaultLayoutRenderers />\n            <DefaultLexicalEditorConfig />\n            <AccessManagementExtension />\n        </>\n    );\n};\n\nexport const Base = memo(BaseExtension);\n"],"names":["BaseExtension","Tenant","Menus","UserMenu","RoutesConfig","LexicalPreset","DefaultFieldRenderers","DefaultLayoutRenderers","DefaultLexicalEditorConfig","AccessManagementExtension","Base","memo"],"mappings":";;;;;;;;;;AAWA,MAAMA,gBAAgB,IACX,WAAP,GACI,wDACI,oBAACC,QAAMA,OAAAA,WAAAA,GACP,oBAACC,OAAKA,OAAAA,WAAAA,GACN,oBAACC,UAAQA,OAAAA,WAAAA,GACT,oBAACC,cAAYA,OAAAA,WAAAA,GACb,oBAACC,eAAaA,OAAAA,WAAAA,GACd,oBAACC,uBAAqBA,OAAAA,WAAAA,GACtB,oBAACC,wBAAsBA,OAAAA,WAAAA,GACvB,oBAACC,4BAA0BA,OAAAA,WAAAA,GAC3B,oBAACC,2BAAyBA;AAK/B,MAAMC,OAAO,WAAHA,GAAGC,KAAKX"}
+{"version":3,"file":"base/Base.js","sources":["../../src/base/Base.tsx"],"sourcesContent":["import React, { memo } from \"react\";\nimport { Menus } from \"./Base/Menus.js\";\nimport { RoutesConfig } from \"./Base/RoutesConfig.js\";\nimport { Tenant } from \"./Base/Tenant.js\";\nimport { UserMenu } from \"./Base/UserMenu.js\";\nimport { LexicalPreset } from \"./Base/LexicalPreset.js\";\nimport { DefaultFieldRenderers } from \"./Base/DefaultFieldRenderers.js\";\nimport { DefaultLayoutRenderers } from \"./Base/DefaultLayoutRenderers.js\";\nimport { DefaultLexicalEditorConfig } from \"~/components/LexicalEditor/DefaultLexicalEditorConfig.js\";\nimport { AccessManagementExtension } from \"~/modules/AccessManagementExtension.js\";\nimport { DebuggerExtension } from \"~/modules/DebuggerExtension.js\";\n\nconst BaseExtension = () => {\n    return (\n        <>\n            <Tenant />\n            <Menus />\n            <UserMenu />\n            <RoutesConfig />\n            <LexicalPreset />\n            <DefaultFieldRenderers />\n            <DefaultLayoutRenderers />\n            <DefaultLexicalEditorConfig />\n            <AccessManagementExtension />\n            <DebuggerExtension />\n        </>\n    );\n};\n\nexport const Base = memo(BaseExtension);\n"],"names":["BaseExtension","Tenant","Menus","UserMenu","RoutesConfig","LexicalPreset","DefaultFieldRenderers","DefaultLayoutRenderers","DefaultLexicalEditorConfig","AccessManagementExtension","DebuggerExtension","Base","memo"],"mappings":";;;;;;;;;;;AAYA,MAAMA,gBAAgB,IACX,WAAP,GACI,wDACI,oBAACC,QAAMA,OAAAA,WAAAA,GACP,oBAACC,OAAKA,OAAAA,WAAAA,GACN,oBAACC,UAAQA,OAAAA,WAAAA,GACT,oBAACC,cAAYA,OAAAA,WAAAA,GACb,oBAACC,eAAaA,OAAAA,WAAAA,GACd,oBAACC,uBAAqBA,OAAAA,WAAAA,GACtB,oBAACC,wBAAsBA,OAAAA,WAAAA,GACvB,oBAACC,4BAA0BA,OAAAA,WAAAA,GAC3B,oBAACC,2BAAyBA,OAAAA,WAAAA,GAC1B,oBAACC,mBAAiBA;AAKvB,MAAMC,OAAO,WAAHA,GAAGC,KAAKZ"}

package/base/createRootContainer.js

@@ -7,10 +7,12 @@ import { HistoryRouterGateway } from "@webiny/app/features/router/HistoryRouterG
 import { EnvConfigFeature } from "@webiny/app/features/envConfig/feature.js";
 import { GraphQLClientFeature } from "@webiny/app/features/graphqlClient/feature.js";
 import { MainGraphQLClientFeature } from "@webiny/app/features/mainGraphQLClient/feature.js";
+import { ApiStreamClientFeature } from "@webiny/app/features/apiStreamClient/feature.js";
 import { LocalStorageFeature } from "@webiny/app/features/localStorage/feature.js";
 import { EventPublisherFeature } from "@webiny/app/features/eventPublisher/feature.js";
 import { NotificationsFeature } from "../features/notifications/feature.js";
-import { WcpFeature } from "../features/wcp/feature.js";
+import { BannersFeature } from "../features/banners/feature.js";
+import { FeatureFlagsFeature } from "../features/featureFlags/feature.js";
 import { TenancyFeature } from "../features/tenancy/feature.js";
 import { SystemInstallerFeature } from "../presentation/installation/presenters/SystemInstaller/feature.js";
 import { TelemetryFeature } from "../features/telemetry/feature.js";
@@ -19,6 +21,7 @@ import { ToolsFeature } from "../features/tools/feature.js";
 import { TextToLexicalToolFeature } from "../presentation/textToLexicalTool/feature.js";
 import { ConfirmationFeature } from "../features/confirmation/feature.js";
 import { ClipboardFeature } from "../features/clipboard/feature.js";
+import { resolveApiUrl, resolveGraphqlUrl, resolveWebsocketUrl } from "./resolveApiUrl.js";
 const isUndefined = (value)=>[
         void 0,
         "undefined"
@@ -30,14 +33,14 @@ function createRootContainer() {
     const deploymentId = String(process.env.WEBINY_ADMIN_DEPLOYMENT_ID);
     EnvConfigFeature.register(container, {
         deploymentId,
-        apiUrl: String(process.env.REACT_APP_API_URL),
+        apiUrl: resolveApiUrl(),
         debug: "true" === process.env.WEBINY_ADMIN_DEBUG,
-        graphqlApiUrl: String(process.env.REACT_APP_GRAPHQL_API_URL),
+        graphqlApiUrl: resolveGraphqlUrl(),
         telemetryEnabled: "true" === process.env.REACT_APP_WEBINY_TELEMETRY,
         telemetryUserId: process.env.REACT_APP_WEBINY_TELEMETRY_USER_ID,
         trashBinRetentionPeriodDays: trashBinRetention,
         wcpProjectId: process.env.REACT_APP_WEBINY_PROJECT_ID || process.env.REACT_APP_WCP_PROJECT_ID,
-        websocketUrl: String(process.env.REACT_APP_WEBSOCKET_URL)
+        websocketUrl: resolveWebsocketUrl()
     });
     const history = createBrowserHistory();
     container.registerInstance(RouterGateway, new HistoryRouterGateway(history, ""));
@@ -45,16 +48,18 @@ function createRootContainer() {
     RouterFeature.register(container);
     EventPublisherFeature.register(container);
     NotificationsFeature.register(container);
+    BannersFeature.register(container);
     GraphQLClientFeature.register(container, {
         batching: true,
         retry: true
     });
     MainGraphQLClientFeature.register(container);
+    ApiStreamClientFeature.register(container);
     LocalStorageFeature.register(container, {
         prefix: `webiny/${deploymentId}`
     });
     TenancyFeature.register(container);
-    WcpFeature.register(container);
+    FeatureFlagsFeature.register(container);
     SystemInstallerFeature.register(container);
     TelemetryFeature.register(container);
     container.register(ErrorOverlayNetworkErrorHandler).inSingletonScope();