@saltcorn/builder 1.3.1-beta.2 → 1.3.1-beta.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saltcorn/builder",
-  "version": "1.3.1-beta.2",
+  "version": "1.3.1-beta.4",
   "description": "Drag and drop view builder for Saltcorn, open-source no-code platform",
   "main": "index.js",
   "homepage": "https://saltcorn.com",
@@ -20,7 +20,7 @@
     "@babel/preset-react": "7.24.7",
     "@craftjs/core": "0.1.0-beta.20",
     "@craftjs/utils": "0.1.0-beta.20",
-    "@saltcorn/common-code": "1.3.1-beta.2",
+    "@saltcorn/common-code": "1.3.1-beta.4",
     "saltcorn-craft-layers-noeye": "0.1.0-beta.22",
     "@fonticonpicker/react-fonticonpicker": "1.2.0",
     "@fortawesome/fontawesome-svg-core": "1.2.34",
@@ -58,6 +58,7 @@
   "overrides": {
     "immer": "9.0.6",
     "glob-parent": "^5.1.2",
+    "undici": "7.12.0",
     "parse5": "7.2.1",
     "parse5-htmlparser2-tree-adapter": "7.0.0"
   },

package/src/components/Builder.js

@@ -127,7 +127,8 @@ const SettingsPanel = () => {
    */
   const handleUserKeyPress = (event) => {
     const { keyCode, target } = event;
-    if (target.tagName.toLowerCase() === "body" && selected) {
+    const tagName = target.tagName.toLowerCase();
+    if ((tagName === "body" || tagName === "button") && selected) {
       //8 backsp, 46 del
       if ((keyCode === 8 || keyCode === 46) && selected.id === "ROOT") {
         deleteChildren();

package/src/components/elements/Action.js

@@ -22,6 +22,7 @@ import {
 } from "./utils";
 import { ntimes } from "./Columns";
 import { ArrayManager } from "./ArrayManager";
+import Select from "react-select";
 
 export /**
  *
@@ -155,6 +156,40 @@ const ActionSettings = () => {
           step_action_names?.[use_setting_action_n]
         )}`
       : "";
+  const setAction = (value0) => {
+    const value = value0.value || value0;
+    setProp((prop) => {
+      prop.name = value;
+      if (options.mode === "filter" && value !== "Clear") {
+        const rowRequired =
+          options.actionConstraints &&
+          options.actionConstraints[value]?.requireRow;
+        if (!action_row_variable) {
+          prop.action_row_variable = rowRequired ? "state" : "none";
+        } else if (rowRequired && action_row_variable === "none") {
+          prop.action_row_variable = "state";
+        }
+      }
+      if (value === "Multi-step action" && !nsteps) prop.nsteps = 1;
+      if (value === "Multi-step action" && !setting_action_n)
+        prop.setting_action_n = 0;
+      if (value === "Multi-step action" && !configuration.steps)
+        prop.configuration = { steps: [] };
+    });
+    setInitialConfig(setProp, value, getCfgFields(value));
+  };
+  const actionOptions = options.actions.filter(Boolean).map((f, ix) =>
+    f.optgroup && !f.options.length
+      ? null
+      : f.optgroup
+        ? {
+            label: f.label,
+            options: f.options.map((a, jx) => ({ label: a, value: a })),
+          }
+        : { label: f, value: f }
+  );
+  const selectedAction = { label: name, value: name };
+
   return (
     <div>
       <table className="w-100">
@@ -163,56 +198,20 @@ const ActionSettings = () => {
             <td>
               <label>Action</label>
             </td>
-            <td>
-              <select
-                value={name}
-                className="form-control form-select"
-                onChange={(e) => {
-                  if (!e.target) return;
-                  const value = e.target.value;
-                  setProp((prop) => {
-                    prop.name = value;
-                    if (options.mode === "filter" && value !== "Clear") {
-                      const rowRequired =
-                        options.actionConstraints &&
-                        options.actionConstraints[value]?.requireRow;
-                      if (!action_row_variable) {
-                        prop.action_row_variable = rowRequired
-                          ? "state"
-                          : "none";
-                      } else if (
-                        rowRequired &&
-                        action_row_variable === "none"
-                      ) {
-                        prop.action_row_variable = "state";
-                      }
-                    }
-                    if (value === "Multi-step action" && !nsteps)
-                      prop.nsteps = 1;
-                    if (value === "Multi-step action" && !setting_action_n)
-                      prop.setting_action_n = 0;
-                    if (value === "Multi-step action" && !configuration.steps)
-                      prop.configuration = { steps: [] };
-                  });
-                  setInitialConfig(setProp, value, getCfgFields(value));
-                }}
-              >
-                {options.actions.filter(Boolean).map((f, ix) =>
-                  f.optgroup && !f.options.length ? null : f.optgroup ? (
-                    <optgroup key={ix} label={f.label}>
-                      {f.options.map((a, jx) => (
-                        <option key={jx} value={a}>
-                          {a}
-                        </option>
-                      ))}
-                    </optgroup>
-                  ) : (
-                    <option key={ix} value={f}>
-                      {f}
-                    </option>
-                  )
-                )}
-              </select>
+            <td>             
+              {options.inJestTestingMode ? null : (
+                <Select
+                  options={actionOptions}
+                  className="react-select action-selector"
+                  value={selectedAction}
+                  defaultValue={selectedAction}
+                  onChange={setAction}
+                  menuPortalTarget={document.body}
+                  styles={{
+                    menuPortal: (base) => ({ ...base, zIndex: 19999 }),
+                  }}
+                ></Select>
+              )}
             </td>
           </tr>
           {name !== "Clear" && options.mode === "filter" ? (

package/src/components/elements/Link.js

@@ -67,7 +67,7 @@ const Link = ({
       <button
         className={`${textStyle} is-builder-link ${
           selected ? "selected-node" : ""
-        } ${isFormula?.text ? "font-monospace" : ""} ${link_style} ${
+        } ${isFormula?.text ? "font-monospace" : ""} ${link_style} ${link_style && link_style.includes("btn") ? "d-inline-block" : ""} ${
           link_size || ""
         } ${block ? "d-block" : ""}`}
         ref={(dom) => connect(drag(dom))}

package/src/components/elements/View.js

@@ -261,6 +261,7 @@ const ViewSettings = () => {
               <Select
                 options={viewOptions}
                 value={selectedView}
+                className="react-select view-selector"
                 onChange={set_view_name}
                 onBlur={set_view_name}
                 menuPortalTarget={document.body}
@@ -302,6 +303,7 @@ const ViewSettings = () => {
             <Select
               options={viewOptions}
               value={selectedView}
+              className="react-select view-selector"
               onChange={(e) => {
                 const target_value = e?.target?.value || e?.value;
                 setProp((prop) => {

package/src/components/elements/ViewLink.js

@@ -254,6 +254,7 @@ const ViewLinkSettings = () => {
               {options.inJestTestingMode ? null : (
                 <Select
                   options={viewOptions}
+                  className="react-select viewlink-selector"
                   value={selectedView}
                   onChange={set_view_name}
                   onBlur={set_view_name}

package/src/components/elements/utils.js

@@ -135,7 +135,7 @@ export const FormulaTooltip = () => {
   
       <div>
         In view formulae, you can use aggregation formulae. The syntax for this is 
-        <code>{inbound_table}${inboundkey_field}${target_field}${aggrgation}</code> 
+        <code>[inbound_table]$[inboundkey_field]$[target_field]$[aggrgation]</code> 
         The aggregation (which should be lower case) can be ommitted and defaults to 
         <code>array_agg</code>. Examples: <code>patients$favbook$id$count</code> or 
         <code>patients$favbook$id</code>. 
@@ -1056,6 +1056,7 @@ const ConfigField = ({
         return (
           <Select
             options={seloptions}
+            className="react-select selectized-field"
             value={seloptions.find((so) => value === so.value)}
             onChange={(e) =>
               (e.name && myOnChange(e.name)) ||