synapse-react-client 4.0.41 → 4.0.43

package/dist/components/FormTemplateEditor/FormTemplatePreview.js

@@ -1,79 +1,67 @@
-import { JsonSchemaForm as e } from "../JsonSchemaForm/JsonSchemaForm.js";
-import { generateDataAccessSchema as t } from "../../utils/jsonschema/generateDataAccessSchema.js";
-import { useMemo as n, useState as r } from "react";
-import { Box as i, Paper as a, Step as o, StepButton as s, Stepper as c, ToggleButton as l, ToggleButtonGroup as u, Typography as d } from "@mui/material";
-import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
+import { generateDataAccessSchema as e } from "../../utils/jsonschema/generateDataAccessSchema.js";
+import { getStepTitle as t } from "../../utils/jsonschema/schemaData.js";
+import n from "../JsonSchemaForm/SchemaStepForm.js";
+import { useMemo as r, useState as i } from "react";
+import { Box as a, Paper as o, Step as s, StepButton as c, Stepper as l, ToggleButton as u, ToggleButtonGroup as d, Typography as f } from "@mui/material";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
 import { DataAccessRequestType as h } from "@sage-bionetworks/synapse-client";
 //#region src/components/FormTemplateEditor/FormTemplatePreview.tsx
 function g({ template: g, jsonSchema: _ }) {
-	let [v, y] = r(0), [b, x] = r(h.REQUEST), { steps: S } = n(() => t(g, _, b), [
+	let [v, y] = i(0), [b, x] = i({}), [S, C] = i(h.REQUEST), { steps: w } = r(() => e(g, _, S), [
 		g,
 		_,
-		b
+		S
 	]);
-	if (S.length === 0) return /* @__PURE__ */ p(a, {
+	if (w.length === 0) return /* @__PURE__ */ p(o, {
 		variant: "outlined",
 		sx: { p: 2 },
-		children: /* @__PURE__ */ p(i, {
+		children: /* @__PURE__ */ p(a, {
 			sx: {
 				py: 4,
 				textAlign: "center"
 			},
-			children: /* @__PURE__ */ p(d, {
+			children: /* @__PURE__ */ p(f, {
 				variant: "body2",
 				color: "text.secondary",
 				children: "Add at least one step with a bound field to preview the form."
 			})
 		})
 	});
-	let C = Math.min(v, S.length - 1), w = S[C], T = w.jsonSchema.title ?? "", E = w.jsonSchema.description ?? "";
-	return /* @__PURE__ */ m(a, {
+	let T = Math.min(v, w.length - 1), E = w[T];
+	return /* @__PURE__ */ m(o, {
 		variant: "outlined",
 		sx: { p: 2 },
 		children: [
-			/* @__PURE__ */ m(u, {
-				value: b,
+			/* @__PURE__ */ m(d, {
+				value: S,
 				exclusive: !0,
 				size: "small",
 				onChange: (e, t) => {
-					t && x(t);
+					t && C(t);
 				},
 				sx: { mb: 2 },
-				children: [/* @__PURE__ */ p(l, {
+				children: [/* @__PURE__ */ p(u, {
 					value: h.REQUEST,
 					children: "Request"
-				}), /* @__PURE__ */ p(l, {
+				}), /* @__PURE__ */ p(u, {
 					value: h.RENEWAL,
 					children: "Renewal"
 				})]
 			}),
-			S.length > 1 && /* @__PURE__ */ p(c, {
-				activeStep: C,
+			w.length > 1 && /* @__PURE__ */ p(l, {
+				activeStep: T,
 				nonLinear: !0,
 				sx: { mb: 2 },
-				children: S.map((e, t) => /* @__PURE__ */ p(o, { children: /* @__PURE__ */ p(s, {
-					onClick: () => y(t),
-					children: e.jsonSchema.title ?? `Step ${t + 1}`
-				}) }, t))
+				children: w.map((e, n) => /* @__PURE__ */ p(s, { children: /* @__PURE__ */ p(c, {
+					onClick: () => y(n),
+					children: t(e, n + 1)
+				}) }, n))
 			}),
-			T && /* @__PURE__ */ p(d, {
-				variant: "h6",
-				gutterBottom: !0,
-				children: T
-			}),
-			E && /* @__PURE__ */ p(d, {
-				variant: "body2",
-				color: "text.secondary",
-				sx: { mb: 2 },
-				children: E
-			}),
-			/* @__PURE__ */ p(e, {
-				schema: w.jsonSchema,
-				uiSchema: w.uiSchema,
-				formContext: { descriptionVariant: "inline" },
-				children: /* @__PURE__ */ p(f, {}),
-				liveValidate: !1
-			})
+			/* @__PURE__ */ p(n, {
+				step: E,
+				schemaData: b,
+				onSchemaDataChange: x
+			}, T)
 		]
 	});
 }

package/dist/components/FormTemplateEditor/FormTemplatePreview.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormTemplatePreview.js","names":[],"sources":["../../../src/components/FormTemplateEditor/FormTemplatePreview.tsx"],"sourcesContent":["import { JsonSchemaForm } from '@/components/JsonSchemaForm/JsonSchemaForm'\nimport { generateDataAccessSchema } from '@/utils/jsonschema/generateDataAccessSchema'\nimport {\n  DataAccessRequestType,\n  FormTemplate,\n} from '@sage-bionetworks/synapse-client'\nimport {\n  Box,\n  Paper,\n  Step,\n  StepButton,\n  Stepper,\n  ToggleButton,\n  ToggleButtonGroup,\n  Typography,\n} from '@mui/material'\nimport { RJSFSchema } from '@rjsf/utils'\nimport { useMemo, useState } from 'react'\n\ntype FormTemplatePreviewProps = {\n  template: FormTemplate\n  jsonSchema: RJSFSchema\n}\n\n/**\n * Renders a live preview of how a FormTemplate + its referenced JSON Schema will appear to a\n * requester. Computed client-side against the unsaved draft, purely to give ACT instant feedback\n * while editing.\n */\nexport function FormTemplatePreview({\n  template,\n  jsonSchema,\n}: FormTemplatePreviewProps) {\n  const [activeStep, setActiveStep] = useState(0)\n  const [requestType, setRequestType] = useState<DataAccessRequestType>(\n    DataAccessRequestType.REQUEST,\n  )\n\n  const { steps } = useMemo(\n    () => generateDataAccessSchema(template, jsonSchema, requestType),\n    [template, jsonSchema, requestType],\n  )\n\n  if (steps.length === 0) {\n    return (\n      <Paper variant=\"outlined\" sx={{ p: 2 }}>\n        <Box sx={{ py: 4, textAlign: 'center' }}>\n          <Typography variant=\"body2\" color=\"text.secondary\">\n            Add at least one step with a bound field to preview the form.\n          </Typography>\n        </Box>\n      </Paper>\n    )\n  }\n\n  const safeIndex = Math.min(activeStep, steps.length - 1)\n  const currentStep = steps[safeIndex]\n  const title = (currentStep.jsonSchema.title as string) ?? ''\n  const description = (currentStep.jsonSchema.description as string) ?? ''\n\n  return (\n    <Paper variant=\"outlined\" sx={{ p: 2 }}>\n      <ToggleButtonGroup\n        value={requestType}\n        exclusive\n        size=\"small\"\n        onChange={(_, next: DataAccessRequestType | null) => {\n          if (next) setRequestType(next)\n        }}\n        sx={{ mb: 2 }}\n      >\n        <ToggleButton value={DataAccessRequestType.REQUEST}>\n          Request\n        </ToggleButton>\n        <ToggleButton value={DataAccessRequestType.RENEWAL}>\n          Renewal\n        </ToggleButton>\n      </ToggleButtonGroup>\n\n      {steps.length > 1 && (\n        <Stepper activeStep={safeIndex} nonLinear sx={{ mb: 2 }}>\n          {steps.map((step, index) => (\n            <Step key={index}>\n              <StepButton onClick={() => setActiveStep(index)}>\n                {(step.jsonSchema.title as string) ?? `Step ${index + 1}`}\n              </StepButton>\n            </Step>\n          ))}\n        </Stepper>\n      )}\n\n      {title && (\n        <Typography variant=\"h6\" gutterBottom>\n          {title}\n        </Typography>\n      )}\n      {description && (\n        <Typography variant=\"body2\" color=\"text.secondary\" sx={{ mb: 2 }}>\n          {description}\n        </Typography>\n      )}\n      <JsonSchemaForm\n        schema={currentStep.jsonSchema}\n        uiSchema={currentStep.uiSchema}\n        formContext={{ descriptionVariant: 'inline' }}\n        children={<></>}\n        liveValidate={false}\n      />\n    </Paper>\n  )\n}\n"],"mappings":";;;;;;;AA6BA,SAAgB,EAAoB,EAClC,aACA,iBAC2B;CAC3B,IAAM,CAAC,GAAY,KAAiB,EAAS,CAAC,GACxC,CAAC,GAAa,KAAkB,EACpC,EAAsB,OACxB,GAEM,EAAE,aAAU,QACV,EAAyB,GAAU,GAAY,CAAW,GAChE;EAAC;EAAU;EAAY;CAAW,CACpC;CAEA,IAAI,EAAM,WAAW,GACnB,OACE,kBAAC,GAAD;EAAO,SAAQ;EAAW,IAAI,EAAE,GAAG,EAAE;YACnC,kBAAC,GAAD;GAAK,IAAI;IAAE,IAAI;IAAG,WAAW;GAAS;aACpC,kBAAC,GAAD;IAAY,SAAQ;IAAQ,OAAM;cAAiB;GAEvC,CAAA;EACT,CAAA;CACA,CAAA;CAIX,IAAM,IAAY,KAAK,IAAI,GAAY,EAAM,SAAS,CAAC,GACjD,IAAc,EAAM,IACpB,IAAS,EAAY,WAAW,SAAoB,IACpD,IAAe,EAAY,WAAW,eAA0B;CAEtE,OACE,kBAAC,GAAD;EAAO,SAAQ;EAAW,IAAI,EAAE,GAAG,EAAE;YAArC;GACE,kBAAC,GAAD;IACE,OAAO;IACP,WAAA;IACA,MAAK;IACL,WAAW,GAAG,MAAuC;KACnD,AAAI,KAAM,EAAe,CAAI;IAC/B;IACA,IAAI,EAAE,IAAI,EAAE;cAPd,CASE,kBAAC,GAAD;KAAc,OAAO,EAAsB;eAAS;IAEtC,CAAA,GACd,kBAAC,GAAD;KAAc,OAAO,EAAsB;eAAS;IAEtC,CAAA,CACG;;GAElB,EAAM,SAAS,KACd,kBAAC,GAAD;IAAS,YAAY;IAAW,WAAA;IAAU,IAAI,EAAE,IAAI,EAAE;cACnD,EAAM,KAAK,GAAM,MAChB,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD;KAAY,eAAe,EAAc,CAAK;eAC1C,EAAK,WAAW,SAAoB,QAAQ,IAAQ;IAC5C,CAAA,EACR,GAJK,CAIL,CACP;GACM,CAAA;GAGV,KACC,kBAAC,GAAD;IAAY,SAAQ;IAAK,cAAA;cACtB;GACS,CAAA;GAEb,KACC,kBAAC,GAAD;IAAY,SAAQ;IAAQ,OAAM;IAAiB,IAAI,EAAE,IAAI,EAAE;cAC5D;GACS,CAAA;GAEd,kBAAC,GAAD;IACE,QAAQ,EAAY;IACpB,UAAU,EAAY;IACtB,aAAa,EAAE,oBAAoB,SAAS;IAC5C,UAAU,kBAAA,GAAA,CAAI,CAAA;IACd,cAAc;GACf,CAAA;EACI;;AAEX"}
+{"version":3,"file":"FormTemplatePreview.js","names":[],"sources":["../../../src/components/FormTemplateEditor/FormTemplatePreview.tsx"],"sourcesContent":["import SchemaStepForm from '@/components/JsonSchemaForm/SchemaStepForm'\nimport { generateDataAccessSchema } from '@/utils/jsonschema/generateDataAccessSchema'\nimport { getStepTitle, SchemaData } from '@/utils/jsonschema/schemaData'\nimport {\n  DataAccessRequestType,\n  FormTemplate,\n} from '@sage-bionetworks/synapse-client'\nimport {\n  Box,\n  Paper,\n  Step,\n  StepButton,\n  Stepper,\n  ToggleButton,\n  ToggleButtonGroup,\n  Typography,\n} from '@mui/material'\nimport { RJSFSchema } from '@rjsf/utils'\nimport { useMemo, useState } from 'react'\n\ntype FormTemplatePreviewProps = {\n  template: FormTemplate\n  jsonSchema: RJSFSchema\n}\n\n/**\n * Renders a live preview of how a FormTemplate + its referenced JSON Schema will appear to a\n * requester. Computed client-side against the unsaved draft, purely to give ACT instant feedback\n * while editing.\n */\nexport function FormTemplatePreview({\n  template,\n  jsonSchema,\n}: FormTemplatePreviewProps) {\n  const [activeStep, setActiveStep] = useState(0)\n  // Kept across steps and request types so ACT can see how answers carry through the form\n  const [schemaData, setSchemaData] = useState<SchemaData>({})\n  const [requestType, setRequestType] = useState<DataAccessRequestType>(\n    DataAccessRequestType.REQUEST,\n  )\n\n  const { steps } = useMemo(\n    () => generateDataAccessSchema(template, jsonSchema, requestType),\n    [template, jsonSchema, requestType],\n  )\n\n  if (steps.length === 0) {\n    return (\n      <Paper variant=\"outlined\" sx={{ p: 2 }}>\n        <Box sx={{ py: 4, textAlign: 'center' }}>\n          <Typography variant=\"body2\" color=\"text.secondary\">\n            Add at least one step with a bound field to preview the form.\n          </Typography>\n        </Box>\n      </Paper>\n    )\n  }\n\n  const safeIndex = Math.min(activeStep, steps.length - 1)\n  const currentStep = steps[safeIndex]\n\n  return (\n    <Paper variant=\"outlined\" sx={{ p: 2 }}>\n      <ToggleButtonGroup\n        value={requestType}\n        exclusive\n        size=\"small\"\n        onChange={(_, next: DataAccessRequestType | null) => {\n          if (next) setRequestType(next)\n        }}\n        sx={{ mb: 2 }}\n      >\n        <ToggleButton value={DataAccessRequestType.REQUEST}>\n          Request\n        </ToggleButton>\n        <ToggleButton value={DataAccessRequestType.RENEWAL}>\n          Renewal\n        </ToggleButton>\n      </ToggleButtonGroup>\n\n      {steps.length > 1 && (\n        <Stepper activeStep={safeIndex} nonLinear sx={{ mb: 2 }}>\n          {steps.map((step, index) => (\n            <Step key={index}>\n              <StepButton onClick={() => setActiveStep(index)}>\n                {getStepTitle(step, index + 1)}\n              </StepButton>\n            </Step>\n          ))}\n        </Stepper>\n      )}\n\n      <SchemaStepForm\n        // Each step is a separate form, as it is for a requester\n        key={safeIndex}\n        step={currentStep}\n        schemaData={schemaData}\n        onSchemaDataChange={setSchemaData}\n      />\n    </Paper>\n  )\n}\n"],"mappings":";;;;;;;;AA8BA,SAAgB,EAAoB,EAClC,aACA,iBAC2B;CAC3B,IAAM,CAAC,GAAY,KAAiB,EAAS,CAAC,GAExC,CAAC,GAAY,KAAiB,EAAqB,CAAC,CAAC,GACrD,CAAC,GAAa,KAAkB,EACpC,EAAsB,OACxB,GAEM,EAAE,aAAU,QACV,EAAyB,GAAU,GAAY,CAAW,GAChE;EAAC;EAAU;EAAY;CAAW,CACpC;CAEA,IAAI,EAAM,WAAW,GACnB,OACE,kBAAC,GAAD;EAAO,SAAQ;EAAW,IAAI,EAAE,GAAG,EAAE;YACnC,kBAAC,GAAD;GAAK,IAAI;IAAE,IAAI;IAAG,WAAW;GAAS;aACpC,kBAAC,GAAD;IAAY,SAAQ;IAAQ,OAAM;cAAiB;GAEvC,CAAA;EACT,CAAA;CACA,CAAA;CAIX,IAAM,IAAY,KAAK,IAAI,GAAY,EAAM,SAAS,CAAC,GACjD,IAAc,EAAM;CAE1B,OACE,kBAAC,GAAD;EAAO,SAAQ;EAAW,IAAI,EAAE,GAAG,EAAE;YAArC;GACE,kBAAC,GAAD;IACE,OAAO;IACP,WAAA;IACA,MAAK;IACL,WAAW,GAAG,MAAuC;KACnD,AAAI,KAAM,EAAe,CAAI;IAC/B;IACA,IAAI,EAAE,IAAI,EAAE;cAPd,CASE,kBAAC,GAAD;KAAc,OAAO,EAAsB;eAAS;IAEtC,CAAA,GACd,kBAAC,GAAD;KAAc,OAAO,EAAsB;eAAS;IAEtC,CAAA,CACG;;GAElB,EAAM,SAAS,KACd,kBAAC,GAAD;IAAS,YAAY;IAAW,WAAA;IAAU,IAAI,EAAE,IAAI,EAAE;cACnD,EAAM,KAAK,GAAM,MAChB,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD;KAAY,eAAe,EAAc,CAAK;eAC3C,EAAa,GAAM,IAAQ,CAAC;IACnB,CAAA,EACR,GAJK,CAIL,CACP;GACM,CAAA;GAGX,kBAAC,GAAD;IAGE,MAAM;IACM;IACZ,oBAAoB;GACrB,GAJM,CAIN;EACI;;AAEX"}

package/dist/components/FormTemplateEditor/StepCard.d.ts

@@ -0,0 +1,25 @@
+import { FormTemplateStep } from '@sage-bionetworks/synapse-client';
+import { RJSFSchema } from '@rjsf/utils';
+import { ResolvedSchemaProperty } from '@/utils/jsonschema/submissionContext';
+import { EditableFormTemplateStep } from './utils';
+export type StepCardProps = {
+    step: EditableFormTemplateStep;
+    stepIndex: number;
+    isFirst: boolean;
+    isLast: boolean;
+    /** Properties not yet bound to any step in the template. */
+    unboundProperties: ResolvedSchemaProperty[];
+    /** The full JSON Schema, used to resolve display labels for slot rows. */
+    jsonSchema: RJSFSchema;
+    /** The FormTemplate's id, if it has been saved. Threaded down to file-field template uploads. */
+    formTemplateId: string | undefined;
+    /** If true, render expanded by default (first step). */
+    defaultExpanded: boolean;
+    onChange: (patch: Partial<FormTemplateStep>) => void;
+    onBindField: (propertyKey: string) => void;
+    onMoveUp: () => void;
+    onMoveDown: () => void;
+    onRemove: () => void;
+};
+export declare function StepCard({ step, stepIndex, isFirst, isLast, unboundProperties, jsonSchema, formTemplateId, defaultExpanded, onChange, onBindField, onMoveUp, onMoveDown, onRemove, }: StepCardProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=StepCard.d.ts.map

package/dist/components/FormTemplateEditor/StepCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepCard.d.ts","sourceRoot":"","sources":["../../../src/components/FormTemplateEditor/StepCard.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,gBAAgB,EACjB,MAAM,kCAAkC,CAAA;AAmBzC,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AAGxC,OAAO,EAGL,sBAAsB,EAEvB,MAAM,sCAAsC,CAAA;AAa7C,OAAO,EAAoB,wBAAwB,EAAY,MAAM,SAAS,CAAA;AAS9E,MAAM,MAAM,aAAa,GAAG;IAC1B,IAAI,EAAE,wBAAwB,CAAA;IAC9B,SAAS,EAAE,MAAM,CAAA;IACjB,OAAO,EAAE,OAAO,CAAA;IAChB,MAAM,EAAE,OAAO,CAAA;IACf,4DAA4D;IAC5D,iBAAiB,EAAE,sBAAsB,EAAE,CAAA;IAC3C,0EAA0E;IAC1E,UAAU,EAAE,UAAU,CAAA;IACtB,iGAAiG;IACjG,cAAc,EAAE,MAAM,GAAG,SAAS,CAAA;IAClC,wDAAwD;IACxD,eAAe,EAAE,OAAO,CAAA;IACxB,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAA;IACpD,WAAW,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAA;IAC1C,QAAQ,EAAE,MAAM,IAAI,CAAA;IACpB,UAAU,EAAE,MAAM,IAAI,CAAA;IACtB,QAAQ,EAAE,MAAM,IAAI,CAAA;CACrB,CAAA;AAED,wBAAgB,QAAQ,CAAC,EACvB,IAAI,EACJ,SAAS,EACT,OAAO,EACP,MAAM,EACN,iBAAiB,EACjB,UAAU,EACV,cAAc,EACd,eAAe,EACf,QAAQ,EACR,WAAW,EACX,QAAQ,EACR,UAAU,EACV,QAAQ,GACT,EAAE,aAAa,2CAoNf"}

package/dist/components/FormTemplateEditor/StepCard.js

@@ -0,0 +1,203 @@
+import { moveItem as e } from "../../utils/functions/ArrayUtils.js";
+import { pointerToPropertyKey as t, propertyKeyToPointer as n, resolveSchemaPropertyAtPointer as r } from "../../utils/jsonschema/submissionContext.js";
+import i from "./dragHandle.module.js";
+import { FIELD_DRAG_TYPE as a, SLOT_SORTABLE_TYPE as o, STEP_SORTABLE_GROUP as s, STEP_SORTABLE_TYPE as c, slotGroupId as l, slotSortableId as u, stepSortableId as d } from "./sortableIds.js";
+import f from "./dropTarget.module.js";
+import { StepFieldRow as p } from "./StepFieldRow.js";
+import { BIND_FIELD_LABEL as m } from "./utils.js";
+import { useState as h } from "react";
+import { Box as g, Collapse as _, IconButton as v, MenuItem as y, Paper as b, Stack as ee, TextField as x, Typography as S } from "@mui/material";
+import { jsx as C, jsxs as w } from "react/jsx-runtime";
+import { ArrowDownward as T, ArrowUpward as E, Delete as D, DragIndicator as O, ExpandLess as k, ExpandMore as A } from "@mui/icons-material";
+import j from "pluralize";
+import { useDroppable as M } from "@dnd-kit/react";
+import { useSortable as N } from "@dnd-kit/react/sortable";
+//#region src/components/FormTemplateEditor/StepCard.tsx
+var P = 1;
+function F({ step: F, stepIndex: I, isFirst: te, isLast: L, unboundProperties: R, jsonSchema: z, formTemplateId: B, defaultExpanded: V, onChange: H, onBindField: U, onMoveUp: W, onMoveDown: G, onRemove: K }) {
+	let [q, J] = h(V), { ref: Y, handleRef: X, isDragging: Z, isDropTarget: Q } = N({
+		id: d(F),
+		index: I,
+		group: s,
+		type: c,
+		accept: [c, a]
+	}), { ref: ne, isDropTarget: re } = M({
+		id: l(F),
+		accept: o,
+		collisionPriority: P
+	}), ie = (e, t) => {
+		H({ fields: F.fields.map((n, r) => r === e ? {
+			...n,
+			...t
+		} : n) });
+	}, $ = (t, n) => {
+		H({ fields: e(F.fields, t, n) });
+	}, ae = (e) => {
+		H({ fields: F.fields.filter((t, n) => n !== e) });
+	}, oe = j("field", F.fields.length, !0);
+	return /* @__PURE__ */ w(b, {
+		ref: Y,
+		variant: "outlined",
+		className: `${f.dropTarget} ${i.dragSource}`,
+		"data-drop-target": Q,
+		"data-dragging": Z,
+		sx: { p: 1.5 },
+		children: [/* @__PURE__ */ w(g, {
+			sx: {
+				display: "flex",
+				alignItems: "center",
+				gap: .5
+			},
+			children: [
+				/* @__PURE__ */ C(g, {
+					ref: X,
+					role: "button",
+					tabIndex: 0,
+					"aria-label": "Drag to reorder step",
+					className: i.dragHandle,
+					sx: { color: "text.secondary" },
+					children: /* @__PURE__ */ C(O, { fontSize: "small" })
+				}),
+				/* @__PURE__ */ C(v, {
+					size: "small",
+					onClick: () => J((e) => !e),
+					"aria-label": q ? "Collapse step" : "Expand step",
+					children: C(q ? k : A, { fontSize: "small" })
+				}),
+				/* @__PURE__ */ w(g, {
+					sx: {
+						flexGrow: 1,
+						minWidth: 0
+					},
+					children: [/* @__PURE__ */ w(S, {
+						variant: "body2",
+						fontWeight: 500,
+						noWrap: !0,
+						children: [
+							"Step ",
+							I + 1,
+							": ",
+							F.title || "(untitled)"
+						]
+					}), /* @__PURE__ */ C(S, {
+						variant: "caption",
+						color: "text.secondary",
+						children: oe
+					})]
+				}),
+				/* @__PURE__ */ C(v, {
+					size: "small",
+					disabled: te,
+					onClick: W,
+					"aria-label": "Move step up",
+					children: /* @__PURE__ */ C(E, { fontSize: "small" })
+				}),
+				/* @__PURE__ */ C(v, {
+					size: "small",
+					disabled: L,
+					onClick: G,
+					"aria-label": "Move step down",
+					children: /* @__PURE__ */ C(T, { fontSize: "small" })
+				}),
+				/* @__PURE__ */ C(v, {
+					size: "small",
+					onClick: K,
+					"aria-label": "Remove step",
+					children: /* @__PURE__ */ C(D, { fontSize: "small" })
+				})
+			]
+		}), /* @__PURE__ */ C(_, {
+			in: q,
+			unmountOnExit: !0,
+			children: /* @__PURE__ */ w(g, {
+				sx: { pt: 1.5 },
+				children: [
+					/* @__PURE__ */ C(x, {
+						label: "Title",
+						value: F.title,
+						onChange: (e) => H({ title: e.target.value }),
+						size: "small",
+						fullWidth: !0,
+						sx: { mb: 1 }
+					}),
+					/* @__PURE__ */ C(x, {
+						label: "Description",
+						value: F.description ?? "",
+						onChange: (e) => H({ description: e.target.value }),
+						size: "small",
+						multiline: !0,
+						rows: 2,
+						fullWidth: !0,
+						sx: { mb: 1.5 }
+					}),
+					/* @__PURE__ */ C(g, {
+						ref: ne,
+						className: f.dropTarget,
+						"data-drop-target": re,
+						sx: {
+							display: "flex",
+							flexDirection: "column",
+							gap: 1,
+							mb: 1,
+							p: .5,
+							borderRadius: 1
+						},
+						children: F.fields.length === 0 ? /* @__PURE__ */ C(S, {
+							variant: "caption",
+							color: "text.secondary",
+							sx: { p: 1 },
+							children: "Drag a field here, or bind one below."
+						}) : F.fields.map((e, n) => {
+							let i = r(z, e.schemaPath);
+							return /* @__PURE__ */ C(p, {
+								sortableId: u(e),
+								sortableIndex: n,
+								sortableGroup: l(F),
+								field: e,
+								resolvedProperty: i?.subSchema,
+								context: i?.context ?? "ALWAYS",
+								propertyKey: t(e.schemaPath) ?? e.schemaPath,
+								isFirst: n === 0,
+								isLast: n === F.fields.length - 1,
+								formTemplateId: B,
+								onChange: (e) => ie(n, e),
+								onMoveUp: () => $(n, -1),
+								onMoveDown: () => $(n, 1),
+								onRemove: () => ae(n)
+							}, e.schemaPath);
+						})
+					}),
+					/* @__PURE__ */ C(ee, {
+						spacing: 1,
+						children: /* @__PURE__ */ C(x, {
+							select: !0,
+							size: "small",
+							label: m,
+							value: "",
+							onChange: (e) => {
+								e.target.value && U(e.target.value);
+							},
+							disabled: R.length === 0,
+							helperText: R.length === 0 ? "All fields are bound to a step." : "Add a field from the library to this step.",
+							children: R.length === 0 ? /* @__PURE__ */ C(y, {
+								value: "",
+								disabled: !0,
+								children: "All fields bound"
+							}) : R.map((e) => {
+								let t = n(e.propertyKey);
+								return /* @__PURE__ */ C(y, {
+									value: e.propertyKey,
+									children: e.subSchema.title ? `${e.subSchema.title} (${t})` : t
+								}, e.propertyKey);
+							})
+						})
+					})
+				]
+			})
+		})]
+	});
+}
+//#endregion
+export { F as StepCard };
+
+//# sourceMappingURL=StepCard.js.map

package/dist/components/FormTemplateEditor/StepCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepCard.js","names":[],"sources":["../../../src/components/FormTemplateEditor/StepCard.tsx"],"sourcesContent":["import { useDroppable } from '@dnd-kit/react'\nimport { useSortable } from '@dnd-kit/react/sortable'\nimport {\n  FormTemplateField,\n  FormTemplateStep,\n} from '@sage-bionetworks/synapse-client'\nimport {\n  Box,\n  Collapse,\n  IconButton,\n  MenuItem,\n  Paper,\n  Stack,\n  TextField,\n  Typography,\n} from '@mui/material'\nimport {\n  ArrowDownward as DownIcon,\n  Delete as DeleteIcon,\n  DragIndicator as DragHandleIcon,\n  ExpandLess as ExpandLessIcon,\n  ExpandMore as ExpandMoreIcon,\n  ArrowUpward as UpIcon,\n} from '@mui/icons-material'\nimport { RJSFSchema } from '@rjsf/utils'\nimport pluralize from 'pluralize'\nimport { useState } from 'react'\nimport {\n  pointerToPropertyKey,\n  propertyKeyToPointer,\n  ResolvedSchemaProperty,\n  resolveSchemaPropertyAtPointer,\n} from '@/utils/jsonschema/submissionContext'\nimport dragHandleStyles from './dragHandle.module.scss'\nimport dropTargetStyles from './dropTarget.module.scss'\nimport { StepFieldRow } from './StepFieldRow'\nimport {\n  FIELD_DRAG_TYPE,\n  slotGroupId,\n  SLOT_SORTABLE_TYPE,\n  slotSortableId,\n  stepSortableId,\n  STEP_SORTABLE_GROUP,\n  STEP_SORTABLE_TYPE,\n} from './sortableIds'\nimport { BIND_FIELD_LABEL, EditableFormTemplateStep, moveItem } from './utils'\n\n/**\n * The slot list must lose to the slot rows inside it so that dragging over a populated step\n * targets a row (which resolves to a precise insertion index) and only an empty or below-the-last-\n * row region falls through to the list itself.\n */\nconst SLOT_LIST_COLLISION_PRIORITY = 1\n\nexport type StepCardProps = {\n  step: EditableFormTemplateStep\n  stepIndex: number\n  isFirst: boolean\n  isLast: boolean\n  /** Properties not yet bound to any step in the template. */\n  unboundProperties: ResolvedSchemaProperty[]\n  /** The full JSON Schema, used to resolve display labels for slot rows. */\n  jsonSchema: RJSFSchema\n  /** The FormTemplate's id, if it has been saved. Threaded down to file-field template uploads. */\n  formTemplateId: string | undefined\n  /** If true, render expanded by default (first step). */\n  defaultExpanded: boolean\n  onChange: (patch: Partial<FormTemplateStep>) => void\n  onBindField: (propertyKey: string) => void\n  onMoveUp: () => void\n  onMoveDown: () => void\n  onRemove: () => void\n}\n\nexport function StepCard({\n  step,\n  stepIndex,\n  isFirst,\n  isLast,\n  unboundProperties,\n  jsonSchema,\n  formTemplateId,\n  defaultExpanded,\n  onChange,\n  onBindField,\n  onMoveUp,\n  onMoveDown,\n  onRemove,\n}: StepCardProps) {\n  const [expanded, setExpanded] = useState(defaultExpanded)\n\n  // Step is sortable within its group, and also accepts field drops to bind.\n  const { ref, handleRef, isDragging, isDropTarget } = useSortable({\n    id: stepSortableId(step),\n    index: stepIndex,\n    group: STEP_SORTABLE_GROUP,\n    type: STEP_SORTABLE_TYPE,\n    accept: [STEP_SORTABLE_TYPE, FIELD_DRAG_TYPE],\n  })\n\n  // The slot list is the drop target for slots dragged in from another step, which is the only\n  // way to reach a step whose list is empty and therefore has no slot rows to target.\n  const { ref: slotListRef, isDropTarget: isSlotDropTarget } = useDroppable({\n    id: slotGroupId(step),\n    accept: SLOT_SORTABLE_TYPE,\n    collisionPriority: SLOT_LIST_COLLISION_PRIORITY,\n  })\n\n  const handleFieldChange = (\n    fieldIdx: number,\n    patch: Partial<FormTemplateField>,\n  ) => {\n    onChange({\n      fields: step.fields.map((f, i) =>\n        i === fieldIdx ? { ...f, ...patch } : f,\n      ),\n    })\n  }\n\n  const handleFieldMove = (fieldIdx: number, direction: -1 | 1) => {\n    onChange({ fields: moveItem(step.fields, fieldIdx, direction) })\n  }\n\n  const handleFieldRemove = (fieldIdx: number) => {\n    onChange({ fields: step.fields.filter((_, i) => i !== fieldIdx) })\n  }\n\n  const fieldCountLabel = pluralize('field', step.fields.length, true)\n\n  return (\n    <Paper\n      ref={ref}\n      variant=\"outlined\"\n      className={`${dropTargetStyles.dropTarget} ${dragHandleStyles.dragSource}`}\n      data-drop-target={isDropTarget}\n      data-dragging={isDragging}\n      sx={{ p: 1.5 }}\n    >\n      <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>\n        <Box\n          ref={handleRef}\n          role=\"button\"\n          tabIndex={0}\n          aria-label=\"Drag to reorder step\"\n          className={dragHandleStyles.dragHandle}\n          sx={{ color: 'text.secondary' }}\n        >\n          <DragHandleIcon fontSize=\"small\" />\n        </Box>\n        <IconButton\n          size=\"small\"\n          onClick={() => setExpanded(prev => !prev)}\n          aria-label={expanded ? 'Collapse step' : 'Expand step'}\n        >\n          {expanded ? (\n            <ExpandLessIcon fontSize=\"small\" />\n          ) : (\n            <ExpandMoreIcon fontSize=\"small\" />\n          )}\n        </IconButton>\n        <Box sx={{ flexGrow: 1, minWidth: 0 }}>\n          <Typography variant=\"body2\" fontWeight={500} noWrap>\n            Step {stepIndex + 1}: {step.title || '(untitled)'}\n          </Typography>\n          <Typography variant=\"caption\" color=\"text.secondary\">\n            {fieldCountLabel}\n          </Typography>\n        </Box>\n        <IconButton\n          size=\"small\"\n          disabled={isFirst}\n          onClick={onMoveUp}\n          aria-label=\"Move step up\"\n        >\n          <UpIcon fontSize=\"small\" />\n        </IconButton>\n        <IconButton\n          size=\"small\"\n          disabled={isLast}\n          onClick={onMoveDown}\n          aria-label=\"Move step down\"\n        >\n          <DownIcon fontSize=\"small\" />\n        </IconButton>\n        <IconButton size=\"small\" onClick={onRemove} aria-label=\"Remove step\">\n          <DeleteIcon fontSize=\"small\" />\n        </IconButton>\n      </Box>\n\n      <Collapse in={expanded} unmountOnExit>\n        <Box sx={{ pt: 1.5 }}>\n          <TextField\n            label=\"Title\"\n            value={step.title}\n            onChange={e => onChange({ title: e.target.value })}\n            size=\"small\"\n            fullWidth\n            sx={{ mb: 1 }}\n          />\n          <TextField\n            label=\"Description\"\n            value={step.description ?? ''}\n            onChange={e => onChange({ description: e.target.value })}\n            size=\"small\"\n            multiline\n            rows={2}\n            fullWidth\n            sx={{ mb: 1.5 }}\n          />\n\n          <Box\n            ref={slotListRef}\n            className={dropTargetStyles.dropTarget}\n            data-drop-target={isSlotDropTarget}\n            sx={{\n              display: 'flex',\n              flexDirection: 'column',\n              gap: 1,\n              mb: 1,\n              p: 0.5,\n              borderRadius: 1,\n            }}\n          >\n            {step.fields.length === 0 ? (\n              <Typography\n                variant=\"caption\"\n                color=\"text.secondary\"\n                sx={{ p: 1 }}\n              >\n                Drag a field here, or bind one below.\n              </Typography>\n            ) : (\n              step.fields.map((field, fieldIdx) => {\n                const resolved = resolveSchemaPropertyAtPointer(\n                  jsonSchema,\n                  field.schemaPath,\n                )\n                return (\n                  <StepFieldRow\n                    key={field.schemaPath}\n                    sortableId={slotSortableId(field)}\n                    sortableIndex={fieldIdx}\n                    sortableGroup={slotGroupId(step)}\n                    field={field}\n                    resolvedProperty={resolved?.subSchema}\n                    context={resolved?.context ?? 'ALWAYS'}\n                    propertyKey={\n                      pointerToPropertyKey(field.schemaPath) ?? field.schemaPath\n                    }\n                    isFirst={fieldIdx === 0}\n                    isLast={fieldIdx === step.fields.length - 1}\n                    formTemplateId={formTemplateId}\n                    onChange={patch => handleFieldChange(fieldIdx, patch)}\n                    onMoveUp={() => handleFieldMove(fieldIdx, -1)}\n                    onMoveDown={() => handleFieldMove(fieldIdx, 1)}\n                    onRemove={() => handleFieldRemove(fieldIdx)}\n                  />\n                )\n              })\n            )}\n          </Box>\n\n          <Stack spacing={1}>\n            <TextField\n              select\n              size=\"small\"\n              label={BIND_FIELD_LABEL}\n              value=\"\"\n              onChange={e => {\n                if (e.target.value) onBindField(e.target.value)\n              }}\n              disabled={unboundProperties.length === 0}\n              helperText={\n                unboundProperties.length === 0\n                  ? 'All fields are bound to a step.'\n                  : 'Add a field from the library to this step.'\n              }\n            >\n              {unboundProperties.length === 0 ? (\n                <MenuItem value=\"\" disabled>\n                  All fields bound\n                </MenuItem>\n              ) : (\n                unboundProperties.map(p => {\n                  const pointer = propertyKeyToPointer(p.propertyKey)\n                  return (\n                    <MenuItem key={p.propertyKey} value={p.propertyKey}>\n                      {p.subSchema.title\n                        ? `${p.subSchema.title} (${pointer})`\n                        : pointer}\n                    </MenuItem>\n                  )\n                })\n              )}\n            </TextField>\n          </Stack>\n        </Box>\n      </Collapse>\n    </Paper>\n  )\n}\n"],"mappings":"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"}

package/dist/components/FormTemplateEditor/StepFieldRow.d.ts

@@ -0,0 +1,34 @@
+import { FormTemplateField } from '@sage-bionetworks/synapse-client';
+import { RJSFSchema } from '@rjsf/utils';
+import { SchemaPropertyContext } from '@/utils/jsonschema/submissionContext';
+export type StepFieldRowProps = {
+    /** Sortable id assigned by parent: `slot:{stepIndex}:{fieldIndex}`. */
+    sortableId: string;
+    /** Position within its step's fields array. */
+    sortableIndex: number;
+    /** Sortable group; slots only reorder within the same step. */
+    sortableGroup: string;
+    field: FormTemplateField;
+    /** The schema property this slot resolves to, if it still exists. */
+    resolvedProperty: RJSFSchema | undefined;
+    /** Which submission context (per the schema's `x-synapse-submissionContext` convention)
+     * gates this field, derived from `resolvedProperty`. */
+    context: SchemaPropertyContext;
+    /** Underlying property key (the segment after `/` in `schemaPath`). */
+    propertyKey: string;
+    isFirst: boolean;
+    isLast: boolean;
+    /** The FormTemplate's id, if it has been saved. Used to build the template file download. */
+    formTemplateId: string | undefined;
+    onChange: (patch: Partial<FormTemplateField>) => void;
+    onMoveUp: () => void;
+    onMoveDown: () => void;
+    onRemove: () => void;
+};
+/**
+ * A slot row inside a step. Compact by default — shows the field's display
+ * name. Expand to reveal slot-specific config: (for file fields) an
+ * optional template file handle. Sortable within its parent step.
+ */
+export declare function StepFieldRow({ sortableId, sortableIndex, sortableGroup, field, resolvedProperty, context, propertyKey, isFirst, isLast, formTemplateId, onChange, onMoveUp, onMoveDown, onRemove, }: StepFieldRowProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=StepFieldRow.d.ts.map

package/dist/components/FormTemplateEditor/StepFieldRow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepFieldRow.d.ts","sourceRoot":"","sources":["../../../src/components/FormTemplateEditor/StepFieldRow.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,kCAAkC,CAAA;AAmBpE,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AAExC,OAAO,EACL,qBAAqB,EAEtB,MAAM,sCAAsC,CAAA;AAM7C,MAAM,MAAM,iBAAiB,GAAG;IAC9B,uEAAuE;IACvE,UAAU,EAAE,MAAM,CAAA;IAClB,+CAA+C;IAC/C,aAAa,EAAE,MAAM,CAAA;IACrB,+DAA+D;IAC/D,aAAa,EAAE,MAAM,CAAA;IACrB,KAAK,EAAE,iBAAiB,CAAA;IACxB,qEAAqE;IACrE,gBAAgB,EAAE,UAAU,GAAG,SAAS,CAAA;IACxC;4DACwD;IACxD,OAAO,EAAE,qBAAqB,CAAA;IAC9B,uEAAuE;IACvE,WAAW,EAAE,MAAM,CAAA;IACnB,OAAO,EAAE,OAAO,CAAA;IAChB,MAAM,EAAE,OAAO,CAAA;IACf,6FAA6F;IAC7F,cAAc,EAAE,MAAM,GAAG,SAAS,CAAA;IAClC,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAA;IACrD,QAAQ,EAAE,MAAM,IAAI,CAAA;IACpB,UAAU,EAAE,MAAM,IAAI,CAAA;IACtB,QAAQ,EAAE,MAAM,IAAI,CAAA;CACrB,CAAA;AAED;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,EAC3B,UAAU,EACV,aAAa,EACb,aAAa,EACb,KAAK,EACL,gBAAgB,EAChB,OAAO,EACP,WAAW,EACX,OAAO,EACP,MAAM,EACN,cAAc,EACd,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,QAAQ,GACT,EAAE,iBAAiB,2CA4HnB"}

package/dist/components/FormTemplateEditor/StepFieldRow.js

@@ -0,0 +1,128 @@
+import { submissionContextLabel as e } from "../../utils/jsonschema/submissionContext.js";
+import { detectFieldType as t, fieldTypeLabel as n } from "./schemaFieldUtils.js";
+import r from "./dragHandle.module.js";
+import { SLOT_SORTABLE_TYPE as i } from "./sortableIds.js";
+import { TemplateFileHandleField as a } from "./TemplateFileHandleField.js";
+import { useState as o } from "react";
+import { Box as s, Checkbox as c, Collapse as l, FormControlLabel as u, IconButton as d, Paper as f, Stack as p, Typography as m } from "@mui/material";
+import { jsx as h, jsxs as g } from "react/jsx-runtime";
+import { ArrowDownward as _, ArrowUpward as v, Delete as y, DragIndicator as b, ExpandLess as x, ExpandMore as S } from "@mui/icons-material";
+import { useSortable as C } from "@dnd-kit/react/sortable";
+//#region src/components/FormTemplateEditor/StepFieldRow.tsx
+function w({ sortableId: w, sortableIndex: T, sortableGroup: E, field: D, resolvedProperty: O, context: k, propertyKey: A, isFirst: j, isLast: M, formTemplateId: N, onChange: P, onMoveUp: F, onMoveDown: I, onRemove: L }) {
+	let [R, z] = o(!1), { ref: B, handleRef: V, isDragging: H } = C({
+		id: w,
+		index: T,
+		group: E,
+		type: i,
+		accept: i
+	}), U = O ? t(O) : null, W = O?.title || A, G = U === "file", K = !O, q = `Missing field: ${D.schemaPath}`;
+	if (!K) {
+		let t = [n(U)];
+		k !== "ALWAYS" && t.push(e(k)), D.isPublic && t.push("Public"), q = t.join(" · ");
+	}
+	return /* @__PURE__ */ g(f, {
+		ref: B,
+		variant: "outlined",
+		className: r.dragSource,
+		"data-dragging": H,
+		sx: {
+			p: 1,
+			backgroundColor: "action.hover",
+			borderColor: K ? "error.main" : void 0
+		},
+		children: [/* @__PURE__ */ g(s, {
+			sx: {
+				display: "flex",
+				alignItems: "center",
+				gap: .5
+			},
+			children: [
+				/* @__PURE__ */ h(s, {
+					ref: V,
+					role: "button",
+					tabIndex: 0,
+					"aria-label": "Drag to reorder field",
+					className: r.dragHandle,
+					sx: { color: "text.secondary" },
+					children: /* @__PURE__ */ h(b, { fontSize: "small" })
+				}),
+				/* @__PURE__ */ h(d, {
+					size: "small",
+					onClick: () => z((e) => !e),
+					"aria-label": R ? "Collapse field" : "Expand field",
+					children: h(R ? x : S, { fontSize: "small" })
+				}),
+				/* @__PURE__ */ g(s, {
+					sx: {
+						flexGrow: 1,
+						minWidth: 0
+					},
+					children: [/* @__PURE__ */ h(m, {
+						variant: "body2",
+						noWrap: !0,
+						title: W,
+						children: W
+					}), /* @__PURE__ */ h(m, {
+						variant: "caption",
+						color: K ? "error" : "text.secondary",
+						children: q
+					})]
+				}),
+				/* @__PURE__ */ h(d, {
+					size: "small",
+					disabled: j,
+					onClick: F,
+					"aria-label": "Move field up",
+					children: /* @__PURE__ */ h(v, { fontSize: "small" })
+				}),
+				/* @__PURE__ */ h(d, {
+					size: "small",
+					disabled: M,
+					onClick: I,
+					"aria-label": "Move field down",
+					children: /* @__PURE__ */ h(_, { fontSize: "small" })
+				}),
+				/* @__PURE__ */ h(d, {
+					size: "small",
+					onClick: L,
+					"aria-label": "Remove field from step",
+					children: /* @__PURE__ */ h(y, { fontSize: "small" })
+				})
+			]
+		}), /* @__PURE__ */ h(l, {
+			in: R,
+			unmountOnExit: !0,
+			children: /* @__PURE__ */ g(p, {
+				spacing: 1,
+				sx: {
+					pt: 1,
+					pl: 4
+				},
+				children: [
+					G && /* @__PURE__ */ h(a, {
+						fileHandleId: D.templateFileHandleId,
+						formTemplateId: N,
+						onChange: (e) => P({ templateFileHandleId: e })
+					}),
+					/* @__PURE__ */ h(u, {
+						control: /* @__PURE__ */ h(c, {
+							checked: D.isPublic ?? !1,
+							onChange: (e) => P({ isPublic: e.target.checked })
+						}),
+						label: "Publicly viewable after approval"
+					}),
+					/* @__PURE__ */ h(m, {
+						variant: "caption",
+						color: "text.secondary",
+						children: "Answers appear in this AR's public submission info once a submission is approved. Snapshotted at submit time."
+					})
+				]
+			})
+		})]
+	});
+}
+//#endregion
+export { w as StepFieldRow };
+
+//# sourceMappingURL=StepFieldRow.js.map

package/dist/components/FormTemplateEditor/StepFieldRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepFieldRow.js","names":[],"sources":["../../../src/components/FormTemplateEditor/StepFieldRow.tsx"],"sourcesContent":["import { useSortable } from '@dnd-kit/react/sortable'\nimport { FormTemplateField } from '@sage-bionetworks/synapse-client'\nimport {\n  Box,\n  Checkbox,\n  Collapse,\n  FormControlLabel,\n  IconButton,\n  Paper,\n  Stack,\n  Typography,\n} from '@mui/material'\nimport {\n  ArrowDownward as DownIcon,\n  Delete as DeleteIcon,\n  DragIndicator as DragHandleIcon,\n  ExpandLess as ExpandLessIcon,\n  ExpandMore as ExpandMoreIcon,\n  ArrowUpward as UpIcon,\n} from '@mui/icons-material'\nimport { RJSFSchema } from '@rjsf/utils'\nimport { useState } from 'react'\nimport {\n  SchemaPropertyContext,\n  submissionContextLabel,\n} from '@/utils/jsonschema/submissionContext'\nimport styles from './dragHandle.module.scss'\nimport { detectFieldType, fieldTypeLabel } from './schemaFieldUtils'\nimport { SLOT_SORTABLE_TYPE } from './sortableIds'\nimport { TemplateFileHandleField } from './TemplateFileHandleField'\n\nexport type StepFieldRowProps = {\n  /** Sortable id assigned by parent: `slot:{stepIndex}:{fieldIndex}`. */\n  sortableId: string\n  /** Position within its step's fields array. */\n  sortableIndex: number\n  /** Sortable group; slots only reorder within the same step. */\n  sortableGroup: string\n  field: FormTemplateField\n  /** The schema property this slot resolves to, if it still exists. */\n  resolvedProperty: RJSFSchema | undefined\n  /** Which submission context (per the schema's `x-synapse-submissionContext` convention)\n   * gates this field, derived from `resolvedProperty`. */\n  context: SchemaPropertyContext\n  /** Underlying property key (the segment after `/` in `schemaPath`). */\n  propertyKey: string\n  isFirst: boolean\n  isLast: boolean\n  /** The FormTemplate's id, if it has been saved. Used to build the template file download. */\n  formTemplateId: string | undefined\n  onChange: (patch: Partial<FormTemplateField>) => void\n  onMoveUp: () => void\n  onMoveDown: () => void\n  onRemove: () => void\n}\n\n/**\n * A slot row inside a step. Compact by default — shows the field's display\n * name. Expand to reveal slot-specific config: (for file fields) an\n * optional template file handle. Sortable within its parent step.\n */\nexport function StepFieldRow({\n  sortableId,\n  sortableIndex,\n  sortableGroup,\n  field,\n  resolvedProperty,\n  context,\n  propertyKey,\n  isFirst,\n  isLast,\n  formTemplateId,\n  onChange,\n  onMoveUp,\n  onMoveDown,\n  onRemove,\n}: StepFieldRowProps) {\n  const [expanded, setExpanded] = useState(false)\n\n  const { ref, handleRef, isDragging } = useSortable({\n    id: sortableId,\n    index: sortableIndex,\n    group: sortableGroup,\n    type: SLOT_SORTABLE_TYPE,\n    accept: SLOT_SORTABLE_TYPE,\n  })\n\n  const type = resolvedProperty ? detectFieldType(resolvedProperty) : null\n  const displayLabel = resolvedProperty?.title || propertyKey\n  const isFileField = type === 'file'\n  const isUnresolved = !resolvedProperty\n\n  let caption = `Missing field: ${field.schemaPath}`\n  if (!isUnresolved) {\n    const captionParts = [fieldTypeLabel(type)]\n    if (context !== 'ALWAYS') {\n      captionParts.push(submissionContextLabel(context))\n    }\n    if (field.isPublic) {\n      captionParts.push('Public')\n    }\n    caption = captionParts.join(' · ')\n  }\n\n  return (\n    <Paper\n      ref={ref}\n      variant=\"outlined\"\n      className={styles.dragSource}\n      data-dragging={isDragging}\n      sx={{\n        p: 1,\n        backgroundColor: 'action.hover',\n        borderColor: isUnresolved ? 'error.main' : undefined,\n      }}\n    >\n      <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>\n        <Box\n          ref={handleRef}\n          role=\"button\"\n          tabIndex={0}\n          aria-label=\"Drag to reorder field\"\n          className={styles.dragHandle}\n          sx={{ color: 'text.secondary' }}\n        >\n          <DragHandleIcon fontSize=\"small\" />\n        </Box>\n        <IconButton\n          size=\"small\"\n          onClick={() => setExpanded(prev => !prev)}\n          aria-label={expanded ? 'Collapse field' : 'Expand field'}\n        >\n          {expanded ? (\n            <ExpandLessIcon fontSize=\"small\" />\n          ) : (\n            <ExpandMoreIcon fontSize=\"small\" />\n          )}\n        </IconButton>\n        <Box sx={{ flexGrow: 1, minWidth: 0 }}>\n          <Typography variant=\"body2\" noWrap title={displayLabel}>\n            {displayLabel}\n          </Typography>\n          <Typography\n            variant=\"caption\"\n            color={isUnresolved ? 'error' : 'text.secondary'}\n          >\n            {caption}\n          </Typography>\n        </Box>\n        <IconButton\n          size=\"small\"\n          disabled={isFirst}\n          onClick={onMoveUp}\n          aria-label=\"Move field up\"\n        >\n          <UpIcon fontSize=\"small\" />\n        </IconButton>\n        <IconButton\n          size=\"small\"\n          disabled={isLast}\n          onClick={onMoveDown}\n          aria-label=\"Move field down\"\n        >\n          <DownIcon fontSize=\"small\" />\n        </IconButton>\n        <IconButton\n          size=\"small\"\n          onClick={onRemove}\n          aria-label=\"Remove field from step\"\n        >\n          <DeleteIcon fontSize=\"small\" />\n        </IconButton>\n      </Box>\n\n      <Collapse in={expanded} unmountOnExit>\n        <Stack spacing={1} sx={{ pt: 1, pl: 4 }}>\n          {isFileField && (\n            <TemplateFileHandleField\n              fileHandleId={field.templateFileHandleId}\n              formTemplateId={formTemplateId}\n              onChange={next => onChange({ templateFileHandleId: next })}\n            />\n          )}\n          <FormControlLabel\n            control={\n              <Checkbox\n                checked={field.isPublic ?? false}\n                onChange={e => onChange({ isPublic: e.target.checked })}\n              />\n            }\n            label=\"Publicly viewable after approval\"\n          />\n          <Typography variant=\"caption\" color=\"text.secondary\">\n            Answers appear in this AR's public submission info once a submission\n            is approved. Snapshotted at submit time.\n          </Typography>\n        </Stack>\n      </Collapse>\n    </Paper>\n  )\n}\n"],"mappings":";;;;;;;;;;;AA6DA,SAAgB,EAAa,EAC3B,eACA,kBACA,kBACA,UACA,qBACA,YACA,gBACA,YACA,WACA,mBACA,aACA,aACA,eACA,eACoB;CACpB,IAAM,CAAC,GAAU,KAAe,EAAS,EAAK,GAExC,EAAE,QAAK,cAAW,kBAAe,EAAY;EACjD,IAAI;EACJ,OAAO;EACP,OAAO;EACP,MAAM;EACN,QAAQ;CACV,CAAC,GAEK,IAAO,IAAmB,EAAgB,CAAgB,IAAI,MAC9D,IAAe,GAAkB,SAAS,GAC1C,IAAc,MAAS,QACvB,IAAe,CAAC,GAElB,IAAU,kBAAkB,EAAM;CACtC,IAAI,CAAC,GAAc;EACjB,IAAM,IAAe,CAAC,EAAe,CAAI,CAAC;EAO1C,AANI,MAAY,YACd,EAAa,KAAK,EAAuB,CAAO,CAAC,GAE/C,EAAM,YACR,EAAa,KAAK,QAAQ,GAE5B,IAAU,EAAa,KAAK,KAAK;CACnC;CAEA,OACE,kBAAC,GAAD;EACO;EACL,SAAQ;EACR,WAAW,EAAO;EAClB,iBAAe;EACf,IAAI;GACF,GAAG;GACH,iBAAiB;GACjB,aAAa,IAAe,eAAe,KAAA;EAC7C;YATF,CAWE,kBAAC,GAAD;GAAK,IAAI;IAAE,SAAS;IAAQ,YAAY;IAAU,KAAK;GAAI;aAA3D;IACE,kBAAC,GAAD;KACE,KAAK;KACL,MAAK;KACL,UAAU;KACV,cAAW;KACX,WAAW,EAAO;KAClB,IAAI,EAAE,OAAO,iBAAiB;eAE9B,kBAAC,GAAD,EAAgB,UAAS,QAAS,CAAA;IAC/B,CAAA;IACL,kBAAC,GAAD;KACE,MAAK;KACL,eAAe,GAAY,MAAQ,CAAC,CAAI;KACxC,cAAY,IAAW,mBAAmB;eAGxC,EADD,IACE,IAEA,GAFD,EAAgB,UAAS,QAAS,CAEA;IAE1B,CAAA;IACZ,kBAAC,GAAD;KAAK,IAAI;MAAE,UAAU;MAAG,UAAU;KAAE;eAApC,CACE,kBAAC,GAAD;MAAY,SAAQ;MAAQ,QAAA;MAAO,OAAO;gBACvC;KACS,CAAA,GACZ,kBAAC,GAAD;MACE,SAAQ;MACR,OAAO,IAAe,UAAU;gBAE/B;KACS,CAAA,CACT;;IACL,kBAAC,GAAD;KACE,MAAK;KACL,UAAU;KACV,SAAS;KACT,cAAW;eAEX,kBAAC,GAAD,EAAQ,UAAS,QAAS,CAAA;IAChB,CAAA;IACZ,kBAAC,GAAD;KACE,MAAK;KACL,UAAU;KACV,SAAS;KACT,cAAW;eAEX,kBAAC,GAAD,EAAU,UAAS,QAAS,CAAA;IAClB,CAAA;IACZ,kBAAC,GAAD;KACE,MAAK;KACL,SAAS;KACT,cAAW;eAEX,kBAAC,GAAD,EAAY,UAAS,QAAS,CAAA;IACpB,CAAA;GACT;MAEL,kBAAC,GAAD;GAAU,IAAI;GAAU,eAAA;aACtB,kBAAC,GAAD;IAAO,SAAS;IAAG,IAAI;KAAE,IAAI;KAAG,IAAI;IAAE;cAAtC;KACG,KACC,kBAAC,GAAD;MACE,cAAc,EAAM;MACJ;MAChB,WAAU,MAAQ,EAAS,EAAE,sBAAsB,EAAK,CAAC;KAC1D,CAAA;KAEH,kBAAC,GAAD;MACE,SACE,kBAAC,GAAD;OACE,SAAS,EAAM,YAAY;OAC3B,WAAU,MAAK,EAAS,EAAE,UAAU,EAAE,OAAO,QAAQ,CAAC;MACvD,CAAA;MAEH,OAAM;KACP,CAAA;KACD,kBAAC,GAAD;MAAY,SAAQ;MAAU,OAAM;gBAAiB;KAGzC,CAAA;IACP;;EACC,CAAA,CACL;;AAEX"}

package/dist/components/FormTemplateEditor/TemplateFileHandleField.d.ts

@@ -0,0 +1,19 @@
+export type TemplateFileHandleFieldProps = {
+    /** The slot's `templateFileHandleId`, if one is attached. */
+    fileHandleId: string | undefined;
+    /**
+     * The FormTemplate's id, used to build the download association. Undefined for a template
+     * that has not been saved yet (a brand-new draft), in which case the file is downloaded
+     * directly as a file handle the current user uploaded.
+     */
+    formTemplateId: string | undefined;
+    onChange: (fileHandleId: string | undefined) => void;
+};
+/**
+ * Upload/download control for a file field's optional template attachment
+ * (`FormTemplateField.templateFileHandleId`) — e.g. a fillable document requesters must
+ * download, complete, and re-upload to answer this slot. Uploads immediately via
+ * `BasicFileHandleUpload` in a dialog; download reuses `FileHandleLink`.
+ */
+export declare function TemplateFileHandleField({ fileHandleId, formTemplateId, onChange, }: TemplateFileHandleFieldProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=TemplateFileHandleField.d.ts.map

package/dist/components/FormTemplateEditor/TemplateFileHandleField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TemplateFileHandleField.d.ts","sourceRoot":"","sources":["../../../src/components/FormTemplateEditor/TemplateFileHandleField.tsx"],"names":[],"mappings":"AAwBA,MAAM,MAAM,4BAA4B,GAAG;IACzC,6DAA6D;IAC7D,YAAY,EAAE,MAAM,GAAG,SAAS,CAAA;IAChC;;;;OAIG;IACH,cAAc,EAAE,MAAM,GAAG,SAAS,CAAA;IAClC,QAAQ,EAAE,CAAC,YAAY,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAA;CACrD,CAAA;AAED;;;;;GAKG;AACH,wBAAgB,uBAAuB,CAAC,EACtC,YAAY,EACZ,cAAc,EACd,QAAQ,GACT,EAAE,4BAA4B,2CA+F9B"}