swoop-common 2.2.182 → 2.2.184

package/dist/api/generated/core/models/ComponentInstance.d.ts

@@ -6,6 +6,7 @@ import type { ComponentInstanceId } from './ComponentInstanceId';
 import type { CreditEntry } from './CreditEntry';
 import type { Field } from './Field';
 import type { Flag } from './Flag';
+import type { InfoNote } from './InfoNote';
 import type { InternalSwoopId } from './InternalSwoopId';
 import type { Price } from './Price';
 import type { UserComponentInstanceField } from './UserComponentInstanceField';
@@ -35,4 +36,5 @@ export type ComponentInstance = {
     isCancellationFee?: boolean;
     sortOrder?: number;
     creditEntries?: Array<CreditEntry>;
+    topLevelNotes?: Array<InfoNote>;
 };

package/dist/rendering/components/ComponentPicker.js

@@ -162,6 +162,8 @@ export default function ComponentPickerModal({ open, onClose, onSelect, selected
     };
     const handleClearSearch = () => setSearchTerm("");
     const handleSelect = (component) => {
+        if (!component)
+            return;
         onSelect(component);
         onClose();
     };
@@ -235,8 +237,5 @@ export default function ComponentPickerModal({ open, onClose, onSelect, selected
             components.length > 0 && (React.createElement(Box, { display: "flex", justifyContent: "center", mt: 2 },
                 React.createElement(Pagination, { count: Math.ceil(totalCount / pageSize), page: page, onChange: (_, newPage) => setPage(newPage), color: "primary" })))),
         React.createElement(DialogActions, null,
-            React.createElement(Button, { onClick: onClose }, "Cancel"),
-            selectedComponent && (React.createElement(Button, { variant: "contained", onClick: () => handleSelect(selectedComponent) },
-                "Select ",
-                selectedComponent.name)))));
+            React.createElement(Button, { onClick: onClose }, "Cancel"))));
 }

package/dist/rendering/renderers/ComponentPicker.js

@@ -8,14 +8,15 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import React, { useEffect, useMemo, useState } from "react";
-import { Paper, Button, } from "@mui/material";
+import { Paper, Box, Button, IconButton } from "@mui/material";
+import ClearIcon from "@mui/icons-material/Clear";
 import { useLocalErrors } from "../hooks/errors";
 import { ComponentPool } from "../registry/types";
 import { registerComponent } from "../registry/components";
 import { CoreService } from "../../api/generated/core";
 import { useComponentPicker } from "../contexts/ComponentPickerContext";
 import { InternalServices } from "../../api/init";
-import { getComponentDataByTemplateName, TEMPLATE_NAMES } from "../../lib/config/templateStructure";
+import { getComponentDataByTemplateName, TEMPLATE_NAMES, } from "../../lib/config/templateStructure";
 export const FormComponentPicker = ({ selectedComponent, onChange, templateIds, getError, label, enabled, }) => {
     const [selected, setSelected] = useState();
     const { get } = useComponentPicker();
@@ -37,30 +38,42 @@ export const FormComponentPicker = ({ selectedComponent, onChange, templateIds,
             : selected.name;
     }, [selected, selectedComponent, label]);
     return (React.createElement(Paper, { component: "form", sx: { display: "flex", flexDirection: "column", gap: 1, p: 2, mb: 1 }, noValidate: true, autoComplete: "off" },
-        React.createElement(Button, { disabled: !enabled, onClick: () => {
-                get(templateIds)
-                    .then((comp) => {
-                    onChange(comp.id);
-                })
-                    .catch(() => { });
-            }, variant: "outlined", fullWidth: true, sx: {
-                height: 56,
-                fontSize: "1rem",
-                fontWeight: 500,
-                borderRadius: 1,
-                textTransform: "none",
-                justifyContent: "flex-start",
-                px: 2,
-                // Red if not selected
-                color: !selectedComponent ? "error.main" : "text.primary",
-                borderColor: !selectedComponent ? "error.main" : "divider",
-                "&:hover": {
-                    borderColor: !selectedComponent ? "error.dark" : undefined,
-                    backgroundColor: !selectedComponent
-                        ? "rgba(211, 47, 47, 0.04)"
-                        : undefined,
-                },
-            } }, displayLabel)));
+        React.createElement(Box, { sx: { position: "relative" } },
+            React.createElement(Button, { disabled: !enabled, onClick: () => {
+                    get(templateIds)
+                        .then((comp) => {
+                        onChange(comp.id);
+                    })
+                        .catch(() => { });
+                }, variant: "outlined", fullWidth: true, sx: {
+                    height: 56,
+                    fontSize: "1rem",
+                    fontWeight: 500,
+                    borderRadius: 1,
+                    textTransform: "none",
+                    justifyContent: "flex-start",
+                    px: 2,
+                    pr: selectedComponent ? 6 : 2,
+                    // Red if not selected
+                    color: !selectedComponent ? "error.main" : "text.primary",
+                    borderColor: !selectedComponent ? "error.main" : "divider",
+                    "&:hover": {
+                        borderColor: !selectedComponent ? "error.dark" : undefined,
+                        backgroundColor: !selectedComponent
+                            ? "rgba(211, 47, 47, 0.04)"
+                            : undefined,
+                    },
+                } }, displayLabel),
+            selectedComponent && (React.createElement(IconButton, { disabled: !enabled, size: "small", onClick: (e) => {
+                    e.stopPropagation();
+                    onChange("");
+                }, sx: {
+                    position: "absolute",
+                    right: 8,
+                    top: "50%",
+                    transform: "translateY(-50%)",
+                } },
+                React.createElement(ClearIcon, { fontSize: "small" }))))));
 };
 const FormRendererComponentPicker = ({ data, handleChange, path, label, enabled, schema, }) => {
     const getError = useLocalErrors(path);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "swoop-common",
-    "version": "2.2.182",
+    "version": "2.2.184",
     "main": "dist/api/index.js",
     "types": "dist/api/index.d.ts",
     "exports": {