@backstage/plugin-scaffolder-react 1.20.2-next.0 → 1.21.0-next.1

package/CHANGELOG.md

@@ -1,5 +1,43 @@
 # @backstage/plugin-scaffolder-react
 
+## 1.21.0-next.1
+
+### Minor Changes
+
+- dbeb7aa: Added experimental BUI (Backstage UI) form theme for scaffolder forms. All default field extensions render BUI variants when enabled.
+
+  **Extension config:**
+
+  ```yaml
+  app:
+    extensions:
+      - sub-page:scaffolder/templates:
+          config:
+            enableBackstageUi: true
+  ```
+
+  **JSX props:**
+
+  ```tsx
+  <ScaffolderPage formProps={{ EXPERIMENTAL_theme: 'bui' }} />
+  ```
+
+- 8006acf: Promoted `FormDecoratorBlueprint` and `ScaffolderFormDecorator` from `@alpha`
+  to `@public`.
+- d09c21c: The `TemplateCard` component is now a swappable component. Apps using the new
+  frontend system can replace it by registering a `SwappableComponentBlueprint`
+  that targets `TemplateCard`. Components used as the swappable implementation
+  receive `TemplateCardComponentProps`, where `onSelected` is a zero-argument
+  callback bound to the rendered template. Existing usage continues to work
+  unchanged.
+
+### Patch Changes
+
+- Updated dependencies
+  - @backstage/ui@0.15.0-next.3
+  - @backstage/plugin-scaffolder-common@2.2.0-next.1
+  - @backstage/plugin-catalog-react@2.1.5-next.1
+
 ## 1.20.2-next.0
 
 ### Patch Changes

package/dist/alpha.d.ts

@@ -104,7 +104,7 @@ declare const createAsyncValidators: (rootSchema: JsonObject, validators: Record
 }) => (formData: JsonObject) => Promise<FormValidation>;
 
 /**
- * The Props for the {@link TemplateCard} component
+ * The legacy Props for the `CardComponent` slot in {@link TemplateGroupsProps}.
  * @alpha
  */
 interface TemplateCardProps {
@@ -117,10 +117,32 @@ interface TemplateCardProps {
     onSelected?: (template: TemplateEntityV1beta3) => void;
 }
 /**
- * The `TemplateCard` component that is rendered in a list for each template
+ * The Props for components used as the swappable {@link TemplateCard}. The
+ * surrounding list takes care of binding the template to `onSelected`, so
+ * implementations only need to invoke it without arguments.
  * @alpha
  */
-declare const TemplateCard: (props: TemplateCardProps) => react_jsx_runtime.JSX.Element;
+interface TemplateCardComponentProps {
+    template: TemplateEntityV1beta3;
+    additionalLinks?: {
+        icon: IconComponent;
+        text: string;
+        url: string;
+    }[];
+    onSelected?: () => void;
+}
+
+/**
+ * The `TemplateCard` component that is rendered in a list for each template.
+ * Apps using the new frontend system can replace it by registering a
+ * `SwappableComponentBlueprint` that targets `TemplateCard`.
+ *
+ * @alpha
+ */
+declare const TemplateCard: {
+    (props: TemplateCardComponentProps): JSX.Element | null;
+    ref: _backstage_frontend_plugin_api.SwappableComponentRef<TemplateCardComponentProps, TemplateCardComponentProps>;
+};
 
 /**
  * The props for the {@link TemplateGroup} component.
@@ -203,7 +225,12 @@ declare const DefaultTemplateOutputs: (props: {
  * The Form component
  * @alpha
  */
-declare const Form: (props: PropsWithChildren<ScaffolderRJSFFormProps>) => react_jsx_runtime.JSX.Element;
+declare const Form: (props: PropsWithChildren<ScaffolderRJSFFormProps & Pick<FormProps, "EXPERIMENTAL_theme">>) => react_jsx_runtime.JSX.Element;
+
+/** @alpha */
+type ScaffolderTheme = 'mui' | 'bui';
+/** @alpha */
+declare const useScaffolderTheme: () => ScaffolderTheme;
 
 /**
  * Props for the TaskSteps component
@@ -341,7 +368,7 @@ type ScaffolderFormDecoratorContext<TInput extends JsonObject = JsonObject> = {
     setFormState: (fn: (currentState: Record<string, JsonValue>) => Record<string, JsonValue>) => void;
     setSecrets: (fn: (currentState: Record<string, string>) => Record<string, string>) => void;
 };
-/** @alpha */
+/** @public */
 type ScaffolderFormDecorator<TInput extends JsonObject = JsonObject> = {
     readonly $$type: '@backstage/scaffolder/FormDecorator';
     readonly id: string;
@@ -376,7 +403,7 @@ declare function createScaffolderFormDecorator<TInputSchema extends {
 }): ScaffolderFormDecorator<TInput>;
 
 /**
- * @alpha
+ * @public
  * Creates extensions that are Field Extensions for the Scaffolder
  * */
 declare const FormDecoratorBlueprint: _backstage_frontend_plugin_api.ExtensionBlueprint<{
@@ -449,5 +476,5 @@ declare const scaffolderReactTranslationRef: _backstage_frontend_plugin_api.Tran
     readonly "templateOutputs.title": "Text Output";
 }>;
 
-export { DefaultTemplateOutputs, EmbeddableWorkflow, Form, FormDecoratorBlueprint, FormFieldBlueprint, ReviewState, ScaffolderField, ScaffolderPageContextMenu, SecretWidget, Stepper, TaskLogStream, TaskSteps, TemplateCard, TemplateCategoryPicker, TemplateGroup, TemplateGroups, Workflow, createAsyncValidators, createFieldValidation, createFormField, createScaffolderFormDecorator, extractSchemaFromStep, formFieldsApiRef, scaffolderReactTranslationRef, useFilteredSchemaProperties, useFormDataFromQuery, useTemplateParameterSchema, useTemplateSchema };
-export type { BackstageOverrides, BackstageTemplateStepperClassKey, FormField, FormFieldExtensionData, FormValidation, ParsedTemplateSchema, ReviewStateProps, ScaffolderFieldProps, ScaffolderFormDecorator, ScaffolderFormDecoratorContext, ScaffolderFormFieldsApi, ScaffolderPageContextMenuProps, ScaffolderReactComponentsNameToClassKey, ScaffolderReactTemplateCategoryPickerClassKey, StepperProps, TaskStepsProps, TemplateCardProps, TemplateGroupProps, TemplateGroupsProps, WorkflowProps };
+export { DefaultTemplateOutputs, EmbeddableWorkflow, Form, FormDecoratorBlueprint, FormFieldBlueprint, ReviewState, ScaffolderField, ScaffolderPageContextMenu, SecretWidget, Stepper, TaskLogStream, TaskSteps, TemplateCard, TemplateCategoryPicker, TemplateGroup, TemplateGroups, Workflow, createAsyncValidators, createFieldValidation, createFormField, createScaffolderFormDecorator, extractSchemaFromStep, formFieldsApiRef, scaffolderReactTranslationRef, useFilteredSchemaProperties, useFormDataFromQuery, useScaffolderTheme, useTemplateParameterSchema, useTemplateSchema };
+export type { BackstageOverrides, BackstageTemplateStepperClassKey, FormField, FormFieldExtensionData, FormValidation, ParsedTemplateSchema, ReviewStateProps, ScaffolderFieldProps, ScaffolderFormDecorator, ScaffolderFormDecoratorContext, ScaffolderFormFieldsApi, ScaffolderPageContextMenuProps, ScaffolderReactComponentsNameToClassKey, ScaffolderReactTemplateCategoryPickerClassKey, ScaffolderTheme, StepperProps, TaskStepsProps, TemplateCardComponentProps, TemplateCardProps, TemplateGroupProps, TemplateGroupsProps, WorkflowProps };

package/dist/alpha.esm.js

@@ -8,6 +8,7 @@ export { TemplateGroups } from './next/components/TemplateGroups/TemplateGroups.
 export { EmbeddableWorkflow, Workflow } from './next/components/Workflow/Workflow.esm.js';
 export { DefaultTemplateOutputs } from './next/components/TemplateOutputs/DefaultTemplateOutputs.esm.js';
 export { Form } from './next/components/Form/Form.esm.js';
+export { useScaffolderTheme } from './next/components/Form/ScaffolderThemeContext.esm.js';
 export { TaskSteps } from './next/components/TaskSteps/TaskSteps.esm.js';
 export { TaskLogStream } from './next/components/TaskLogStream/TaskLogStream.esm.js';
 export { TemplateCategoryPicker } from './next/components/TemplateCategoryPicker/TemplateCategoryPicker.esm.js';

package/dist/alpha.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"alpha.esm.js","sources":["../src/alpha.ts"],"sourcesContent":["/*\n * Copyright 2022 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nexport * from './next';\n\nimport { scaffolderReactTranslationRef as _scaffolderReactTranslationRef } from './translation';\n\n/**\n * @alpha\n * @deprecated Import from `@backstage/plugin-scaffolder-react` instead.\n */\nexport const scaffolderReactTranslationRef = _scaffolderReactTranslationRef;\n"],"names":["_scaffolderReactTranslationRef"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAwBO,MAAM,6BAAA,GAAgCA;;;;"}
+{"version":3,"file":"alpha.esm.js","sources":["../src/alpha.ts"],"sourcesContent":["/*\n * Copyright 2022 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nexport * from './next';\n\nimport { scaffolderReactTranslationRef as _scaffolderReactTranslationRef } from './translation';\n\n/**\n * @alpha\n * @deprecated Import from `@backstage/plugin-scaffolder-react` instead.\n */\nexport const scaffolderReactTranslationRef = _scaffolderReactTranslationRef;\n"],"names":["_scaffolderReactTranslationRef"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAwBO,MAAM,6BAAA,GAAgCA;;;;"}

package/dist/index.d.ts

@@ -314,7 +314,9 @@ type TemplateGroupFilter = {
  *
  * @public
  */
-type FormProps = Pick<FormProps$1, 'transformErrors' | 'noHtml5Validate' | 'uiSchema' | 'formContext' | 'omitExtraData' | 'liveOmit'>;
+type FormProps = Pick<FormProps$1, 'transformErrors' | 'noHtml5Validate' | 'uiSchema' | 'formContext' | 'omitExtraData' | 'liveOmit'> & {
+    EXPERIMENTAL_theme?: 'mui' | 'bui';
+};
 /**
  * The props for the Last Step in scaffolder template form.
  * Which represents the summary of the input provided by the end user.

package/dist/next/blueprints/FormDecoratorBlueprint.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormDecoratorBlueprint.esm.js","sources":["../../../src/next/blueprints/FormDecoratorBlueprint.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport {\n  createExtensionBlueprint,\n  createExtensionDataRef,\n} from '@backstage/frontend-plugin-api';\nimport { ScaffolderFormDecorator } from '../extensions';\n\nconst formDecoratorExtensionDataRef =\n  createExtensionDataRef<ScaffolderFormDecorator>().with({\n    id: 'scaffolder.form-decorator-loader',\n  });\n\n/**\n * @alpha\n * Creates extensions that are Field Extensions for the Scaffolder\n * */\nexport const FormDecoratorBlueprint = createExtensionBlueprint({\n  kind: 'scaffolder-form-decorator',\n  attachTo: { id: 'api:scaffolder/form-decorators', input: 'formDecorators' },\n  dataRefs: {\n    formDecoratorLoader: formDecoratorExtensionDataRef,\n  },\n  output: [formDecoratorExtensionDataRef],\n  *factory(params: { decorator: ScaffolderFormDecorator }) {\n    yield formDecoratorExtensionDataRef(params.decorator);\n  },\n});\n"],"names":[],"mappings":";;AAqBA,MAAM,6BAAA,GACJ,sBAAA,EAAgD,CAAE,IAAA,CAAK;AAAA,EACrD,EAAA,EAAI;AACN,CAAC,CAAA;AAMI,MAAM,yBAAyB,wBAAA,CAAyB;AAAA,EAC7D,IAAA,EAAM,2BAAA;AAAA,EACN,QAAA,EAAU,EAAE,EAAA,EAAI,gCAAA,EAAkC,OAAO,gBAAA,EAAiB;AAAA,EAC1E,QAAA,EAAU;AAAA,IACR,mBAAA,EAAqB;AAAA,GACvB;AAAA,EACA,MAAA,EAAQ,CAAC,6BAA6B,CAAA;AAAA,EACtC,CAAC,QAAQ,MAAA,EAAgD;AACvD,IAAA,MAAM,6BAAA,CAA8B,OAAO,SAAS,CAAA;AAAA,EACtD;AACF,CAAC;;;;"}
+{"version":3,"file":"FormDecoratorBlueprint.esm.js","sources":["../../../src/next/blueprints/FormDecoratorBlueprint.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport {\n  createExtensionBlueprint,\n  createExtensionDataRef,\n} from '@backstage/frontend-plugin-api';\nimport { ScaffolderFormDecorator } from '../extensions';\n\nconst formDecoratorExtensionDataRef =\n  createExtensionDataRef<ScaffolderFormDecorator>().with({\n    id: 'scaffolder.form-decorator-loader',\n  });\n\n/**\n * @public\n * Creates extensions that are Field Extensions for the Scaffolder\n * */\nexport const FormDecoratorBlueprint = createExtensionBlueprint({\n  kind: 'scaffolder-form-decorator',\n  attachTo: { id: 'api:scaffolder/form-decorators', input: 'formDecorators' },\n  dataRefs: {\n    formDecoratorLoader: formDecoratorExtensionDataRef,\n  },\n  output: [formDecoratorExtensionDataRef],\n  *factory(params: { decorator: ScaffolderFormDecorator }) {\n    yield formDecoratorExtensionDataRef(params.decorator);\n  },\n});\n"],"names":[],"mappings":";;AAqBA,MAAM,6BAAA,GACJ,sBAAA,EAAgD,CAAE,IAAA,CAAK;AAAA,EACrD,EAAA,EAAI;AACN,CAAC,CAAA;AAMI,MAAM,yBAAyB,wBAAA,CAAyB;AAAA,EAC7D,IAAA,EAAM,2BAAA;AAAA,EACN,QAAA,EAAU,EAAE,EAAA,EAAI,gCAAA,EAAkC,OAAO,gBAAA,EAAiB;AAAA,EAC1E,QAAA,EAAU;AAAA,IACR,mBAAA,EAAqB;AAAA,GACvB;AAAA,EACA,MAAA,EAAQ,CAAC,6BAA6B,CAAA;AAAA,EACtC,CAAC,QAAQ,MAAA,EAAgD;AACvD,IAAA,MAAM,6BAAA,CAA8B,OAAO,SAAS,CAAA;AAAA,EACtD;AACF,CAAC;;;;"}

package/dist/next/components/Form/BuiTheme/Form.module.css.esm.js

@@ -0,0 +1,8 @@
+import styleInject from '../../../../node_modules_dist/style-inject/dist/style-inject.es.esm.js';
+
+var css_248z = "/*\n * Copyright 2026 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/* BUI inputs ship in a \"filled\" style that picks a neutral one step above the\n * surface they sit on. Scaffolder forms live on the same neutral-1 surface as\n * their inputs, so the bg step-up either reads as disabled or disappears\n * entirely. Override to the outlined style PasswordField already uses: rest\n * border, focus/invalid borders preserved from BUI defaults. */\n\n@layer components {\n  .Form_form__dce6521a3e .bui-Input:not([data-focused]):not([data-invalid]),\n  .Form_form__dce6521a3e\n    .bui-ComboboxInput:not([data-focus-within]):not([data-invalid]) {\n    box-shadow: inset 0 0 0 1px var(--bui-border-2);\n  }\n\n  .Form_form__dce6521a3e\n    .bui-SelectTrigger:not([data-focus-visible]):not([data-invalid]) {\n    box-shadow: inset 0 0 0 1px var(--bui-border-2);\n  }\n}\n";
+var styles = {"form":"Form_form__dce6521a3e"};
+styleInject(css_248z);
+
+export { styles as default };
+//# sourceMappingURL=Form.module.css.esm.js.map

package/dist/next/components/Form/BuiTheme/Form.module.css.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Form.module.css.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

package/dist/next/components/Form/BuiTheme/index.esm.js

@@ -0,0 +1,12 @@
+import { generateBuiTemplates } from './templates/index.esm.js';
+import { generateBuiWidgets } from './widgets/index.esm.js';
+
+function generateBuiTheme() {
+  return {
+    templates: generateBuiTemplates(),
+    widgets: generateBuiWidgets()
+  };
+}
+
+export { generateBuiTheme };
+//# sourceMappingURL=index.esm.js.map

package/dist/next/components/Form/BuiTheme/index.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.esm.js","sources":["../../../../../src/next/components/Form/BuiTheme/index.ts"],"sourcesContent":["/*\n * Copyright 2022 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport { FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';\nimport { ThemeProps } from '@rjsf/core';\n\nimport { generateBuiTemplates } from './templates';\nimport { generateBuiWidgets } from './widgets';\n\nexport function generateBuiTheme<\n  T = any,\n  S extends StrictRJSFSchema = RJSFSchema,\n  F extends FormContextType = any,\n>(): ThemeProps<T, S, F> {\n  return {\n    templates: generateBuiTemplates<T, S, F>(),\n    widgets: generateBuiWidgets<T, S, F>(),\n  };\n}\n"],"names":[],"mappings":";;;AAqBO,SAAS,gBAAA,GAIS;AACvB,EAAA,OAAO;AAAA,IACL,WAAW,oBAAA,EAA8B;AAAA,IACzC,SAAS,kBAAA;AAA4B,GACvC;AACF;;;;"}

package/dist/next/components/Form/BuiTheme/templates/ArrayFieldDescriptionTemplate.esm.js

@@ -0,0 +1,17 @@
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { isValidElement } from 'react';
+import { MarkdownContent } from '@backstage/core-components';
+
+function ArrayFieldDescriptionTemplate(props) {
+  const { description } = props;
+  if (!description) {
+    return null;
+  }
+  if (isValidElement(description)) {
+    return /* @__PURE__ */ jsx(Fragment, { children: description });
+  }
+  return /* @__PURE__ */ jsx(MarkdownContent, { content: description, linkTarget: "_blank" });
+}
+
+export { ArrayFieldDescriptionTemplate as default };
+//# sourceMappingURL=ArrayFieldDescriptionTemplate.esm.js.map

package/dist/next/components/Form/BuiTheme/templates/ArrayFieldDescriptionTemplate.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArrayFieldDescriptionTemplate.esm.js","sources":["../../../../../../src/next/components/Form/BuiTheme/templates/ArrayFieldDescriptionTemplate.tsx"],"sourcesContent":["/*\n * Copyright 2026 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport { isValidElement } from 'react';\nimport {\n  ArrayFieldDescriptionProps,\n  FormContextType,\n  RJSFSchema,\n  StrictRJSFSchema,\n} from '@rjsf/utils';\nimport { MarkdownContent } from '@backstage/core-components';\n\nexport default function ArrayFieldDescriptionTemplate<\n  T = any,\n  S extends StrictRJSFSchema = RJSFSchema,\n  F extends FormContextType = any,\n>(props: ArrayFieldDescriptionProps<T, S, F>) {\n  const { description } = props;\n  if (!description) {\n    return null;\n  }\n\n  if (isValidElement(description)) {\n    return <>{description}</>;\n  }\n\n  return <MarkdownContent content={description as string} linkTarget=\"_blank\" />;\n}\n"],"names":[],"mappings":";;;;AAwBA,SAAwB,8BAItB,KAAA,EAA4C;AAC5C,EAAA,MAAM,EAAE,aAAY,GAAI,KAAA;AACxB,EAAA,IAAI,CAAC,WAAA,EAAa;AAChB,IAAA,OAAO,IAAA;AAAA,EACT;AAEA,EAAA,IAAI,cAAA,CAAe,WAAW,CAAA,EAAG;AAC/B,IAAA,uCAAU,QAAA,EAAA,WAAA,EAAY,CAAA;AAAA,EACxB;AAEA,EAAA,uBAAO,GAAA,CAAC,eAAA,EAAA,EAAgB,OAAA,EAAS,WAAA,EAAuB,YAAW,QAAA,EAAS,CAAA;AAC9E;;;;"}

package/dist/next/components/Form/BuiTheme/templates/ArrayFieldItemTemplate.esm.js

@@ -0,0 +1,107 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { Box, Card, CardHeader, Flex, Button, Text, ButtonIcon, CardBody } from '@backstage/ui';
+import { Disclosure, DisclosurePanel } from 'react-aria-components';
+import { RiArrowDownSLine, RiArrowRightSLine, RiArrowUpSLine, RiAddLine, RiDeleteBinLine } from '@remixicon/react';
+
+function ArrayFieldItemTemplate({
+  children,
+  disabled,
+  hasToolbar,
+  hasCopy,
+  hasMoveDown,
+  hasMoveUp,
+  hasRemove,
+  index,
+  onCopyIndexClick,
+  onDropIndexClick,
+  onReorderClick,
+  readonly,
+  schema
+}) {
+  const [isOpen, setIsOpen] = useState(true);
+  const itemSchema = schema?.items;
+  const itemTitle = itemSchema?.title ? `${itemSchema.title} ${index + 1}` : `Item ${index + 1}`;
+  return /* @__PURE__ */ jsx(Box, { mb: "4", children: /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsx(Disclosure, { isExpanded: isOpen, onExpandedChange: setIsOpen, children: ({ isExpanded }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      CardHeader,
+      {
+        style: { backgroundColor: "var(--bui-bg-neutral-2)" },
+        children: /* @__PURE__ */ jsx(Box, { py: "3", px: "4", children: /* @__PURE__ */ jsxs(Flex, { align: "center", justify: "between", children: [
+          /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "2", children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                slot: "trigger",
+                style: {
+                  padding: "2px",
+                  background: "none",
+                  border: "none",
+                  cursor: "pointer",
+                  display: "flex",
+                  alignItems: "center",
+                  color: "var(--bui-fg-secondary)"
+                },
+                "aria-label": isExpanded ? "Collapse" : "Expand",
+                children: isExpanded ? /* @__PURE__ */ jsx(RiArrowDownSLine, { size: 18 }) : /* @__PURE__ */ jsx(RiArrowRightSLine, { size: 18 })
+              }
+            ),
+            /* @__PURE__ */ jsx(Text, { variant: "body-medium", weight: "bold", children: itemTitle })
+          ] }),
+          hasToolbar && /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "1", children: [
+            (hasMoveUp || hasMoveDown) && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(
+                ButtonIcon,
+                {
+                  variant: "tertiary",
+                  size: "small",
+                  isDisabled: disabled || readonly || !hasMoveUp,
+                  onClick: onReorderClick(index, index - 1),
+                  "aria-label": "Move up",
+                  icon: /* @__PURE__ */ jsx(RiArrowUpSLine, { size: 18 })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                ButtonIcon,
+                {
+                  variant: "tertiary",
+                  size: "small",
+                  isDisabled: disabled || readonly || !hasMoveDown,
+                  onClick: onReorderClick(index, index + 1),
+                  "aria-label": "Move down",
+                  icon: /* @__PURE__ */ jsx(RiArrowDownSLine, { size: 18 })
+                }
+              )
+            ] }),
+            hasCopy && /* @__PURE__ */ jsx(
+              ButtonIcon,
+              {
+                variant: "tertiary",
+                size: "small",
+                isDisabled: disabled || readonly,
+                onClick: onCopyIndexClick(index),
+                "aria-label": "Duplicate",
+                icon: /* @__PURE__ */ jsx(RiAddLine, { size: 18 })
+              }
+            ),
+            hasRemove && /* @__PURE__ */ jsx(
+              ButtonIcon,
+              {
+                variant: "tertiary",
+                size: "small",
+                isDisabled: disabled || readonly,
+                onClick: onDropIndexClick(index),
+                "aria-label": "Remove",
+                icon: /* @__PURE__ */ jsx(RiDeleteBinLine, { size: 18 })
+              }
+            )
+          ] })
+        ] }) })
+      }
+    ),
+    /* @__PURE__ */ jsx(DisclosurePanel, { children: /* @__PURE__ */ jsx(CardBody, { children: /* @__PURE__ */ jsx(Box, { p: "4", children }) }) })
+  ] }) }) }) });
+}
+
+export { ArrayFieldItemTemplate as default };
+//# sourceMappingURL=ArrayFieldItemTemplate.esm.js.map

package/dist/next/components/Form/BuiTheme/templates/ArrayFieldItemTemplate.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArrayFieldItemTemplate.esm.js","sources":["../../../../../../src/next/components/Form/BuiTheme/templates/ArrayFieldItemTemplate.tsx"],"sourcesContent":["/*\n * Copyright 2026 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport {\n  ArrayFieldTemplateItemType,\n  FormContextType,\n  RJSFSchema,\n  StrictRJSFSchema,\n} from '@rjsf/utils';\nimport { useState } from 'react';\nimport {\n  Card,\n  CardHeader,\n  CardBody,\n  Flex,\n  Text,\n  ButtonIcon,\n  Box,\n  Button,\n} from '@backstage/ui';\nimport { Disclosure, DisclosurePanel } from 'react-aria-components';\nimport {\n  RiArrowDownSLine,\n  RiArrowUpSLine,\n  RiDeleteBinLine,\n  RiAddLine,\n  RiArrowRightSLine,\n} from '@remixicon/react';\n\nexport default function ArrayFieldItemTemplate<\n  T = any,\n  S extends StrictRJSFSchema = RJSFSchema,\n  F extends FormContextType = any,\n>({\n  children,\n  disabled,\n  hasToolbar,\n  hasCopy,\n  hasMoveDown,\n  hasMoveUp,\n  hasRemove,\n  index,\n  onCopyIndexClick,\n  onDropIndexClick,\n  onReorderClick,\n  readonly,\n  schema,\n}: ArrayFieldTemplateItemType<T, S, F>) {\n  const [isOpen, setIsOpen] = useState(true);\n\n  const itemSchema = schema?.items as S | undefined;\n  const itemTitle = itemSchema?.title\n    ? `${itemSchema.title} ${index + 1}`\n    : `Item ${index + 1}`;\n\n  return (\n    <Box mb=\"4\">\n      <Card>\n        <Disclosure isExpanded={isOpen} onExpandedChange={setIsOpen}>\n          {({ isExpanded }) => (\n            <>\n              <CardHeader\n                style={{ backgroundColor: 'var(--bui-bg-neutral-2)' }}\n              >\n                <Box py=\"3\" px=\"4\">\n                  <Flex align=\"center\" justify=\"between\">\n                    <Flex align=\"center\" gap=\"2\">\n                      <Button\n                        slot=\"trigger\"\n                        style={{\n                          padding: '2px',\n                          background: 'none',\n                          border: 'none',\n                          cursor: 'pointer',\n                          display: 'flex',\n                          alignItems: 'center',\n                          color: 'var(--bui-fg-secondary)',\n                        }}\n                        aria-label={isExpanded ? 'Collapse' : 'Expand'}\n                      >\n                        {isExpanded ? (\n                          <RiArrowDownSLine size={18} />\n                        ) : (\n                          <RiArrowRightSLine size={18} />\n                        )}\n                      </Button>\n                      <Text variant=\"body-medium\" weight=\"bold\">\n                        {itemTitle}\n                      </Text>\n                    </Flex>\n                    {hasToolbar && (\n                      <Flex align=\"center\" gap=\"1\">\n                        {(hasMoveUp || hasMoveDown) && (\n                          <>\n                            <ButtonIcon\n                              variant=\"tertiary\"\n                              size=\"small\"\n                              isDisabled={disabled || readonly || !hasMoveUp}\n                              onClick={onReorderClick(index, index - 1)}\n                              aria-label=\"Move up\"\n                              icon={<RiArrowUpSLine size={18} />}\n                            />\n                            <ButtonIcon\n                              variant=\"tertiary\"\n                              size=\"small\"\n                              isDisabled={disabled || readonly || !hasMoveDown}\n                              onClick={onReorderClick(index, index + 1)}\n                              aria-label=\"Move down\"\n                              icon={<RiArrowDownSLine size={18} />}\n                            />\n                          </>\n                        )}\n                        {hasCopy && (\n                          <ButtonIcon\n                            variant=\"tertiary\"\n                            size=\"small\"\n                            isDisabled={disabled || readonly}\n                            onClick={onCopyIndexClick(index)}\n                            aria-label=\"Duplicate\"\n                            icon={<RiAddLine size={18} />}\n                          />\n                        )}\n                        {hasRemove && (\n                          <ButtonIcon\n                            variant=\"tertiary\"\n                            size=\"small\"\n                            isDisabled={disabled || readonly}\n                            onClick={onDropIndexClick(index)}\n                            aria-label=\"Remove\"\n                            icon={<RiDeleteBinLine size={18} />}\n                          />\n                        )}\n                      </Flex>\n                    )}\n                  </Flex>\n                </Box>\n              </CardHeader>\n              <DisclosurePanel>\n                <CardBody>\n                  <Box p=\"4\">{children}</Box>\n                </CardBody>\n              </DisclosurePanel>\n            </>\n          )}\n        </Disclosure>\n      </Card>\n    </Box>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/next/components/Form/BuiTheme/templates/ArrayFieldTemplate.esm.js

@@ -0,0 +1,84 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { getUiOptions, getTemplate } from '@rjsf/utils';
+import { Box, Text } from '@backstage/ui';
+
+function ArrayFieldTemplate({
+  canAdd,
+  disabled,
+  idSchema,
+  uiSchema,
+  items,
+  onAddClick,
+  readonly,
+  registry,
+  required,
+  schema,
+  title
+}) {
+  const uiOptions = getUiOptions(uiSchema);
+  const ArrayFieldDescriptionTemplate = getTemplate("ArrayFieldDescriptionTemplate", registry, uiOptions);
+  const ArrayFieldItemTemplate = getTemplate("ArrayFieldItemTemplate", registry, uiOptions);
+  const ArrayFieldTitleTemplate = getTemplate("ArrayFieldTitleTemplate", registry, uiOptions);
+  const {
+    ButtonTemplates: { AddButton }
+  } = registry.templates;
+  const hasTitle = uiOptions.title || title;
+  const hasDescription = uiOptions.description || schema.description;
+  return /* @__PURE__ */ jsxs(Box, { mb: "4", children: [
+    hasTitle && /* @__PURE__ */ jsx(Box, { mb: "2", children: /* @__PURE__ */ jsx(
+      ArrayFieldTitleTemplate,
+      {
+        idSchema,
+        title: uiOptions.title || title,
+        required,
+        schema,
+        uiSchema,
+        registry
+      }
+    ) }),
+    hasDescription && /* @__PURE__ */ jsx(Box, { mb: "2", children: /* @__PURE__ */ jsx(
+      ArrayFieldDescriptionTemplate,
+      {
+        idSchema,
+        description: uiOptions.description || schema.description,
+        schema,
+        uiSchema,
+        registry
+      }
+    ) }),
+    items && items.length > 0 ? items.map(
+      ({ key, ...itemProps }) => /* @__PURE__ */ jsx(ArrayFieldItemTemplate, { ...itemProps }, key)
+    ) : /* @__PURE__ */ jsx(
+      Box,
+      {
+        p: "3",
+        mb: "4",
+        style: {
+          backgroundColor: "var(--bui-bg-neutral-2)",
+          borderRadius: "var(--bui-radius-2)"
+        },
+        children: /* @__PURE__ */ jsx(
+          Text,
+          {
+            variant: "body-medium",
+            color: "secondary",
+            style: { textAlign: "center" },
+            children: "No items added yet"
+          }
+        )
+      }
+    ),
+    canAdd && /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
+      AddButton,
+      {
+        onClick: onAddClick,
+        disabled: disabled || readonly,
+        uiSchema,
+        registry
+      }
+    ) })
+  ] });
+}
+
+export { ArrayFieldTemplate as default };
+//# sourceMappingURL=ArrayFieldTemplate.esm.js.map

package/dist/next/components/Form/BuiTheme/templates/ArrayFieldTemplate.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArrayFieldTemplate.esm.js","sources":["../../../../../../src/next/components/Form/BuiTheme/templates/ArrayFieldTemplate.tsx"],"sourcesContent":["/*\n * Copyright 2026 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport {\n  ArrayFieldTemplateProps,\n  ArrayFieldTemplateItemType,\n  FormContextType,\n  getTemplate,\n  getUiOptions,\n  RJSFSchema,\n  StrictRJSFSchema,\n} from '@rjsf/utils';\nimport { Box, Text } from '@backstage/ui';\n\nexport default function ArrayFieldTemplate<\n  T = any,\n  S extends StrictRJSFSchema = RJSFSchema,\n  F extends FormContextType = any,\n>({\n  canAdd,\n  disabled,\n  idSchema,\n  uiSchema,\n  items,\n  onAddClick,\n  readonly,\n  registry,\n  required,\n  schema,\n  title,\n}: ArrayFieldTemplateProps<T, S, F>) {\n  const uiOptions = getUiOptions<T, S, F>(uiSchema);\n  const ArrayFieldDescriptionTemplate = getTemplate<\n    'ArrayFieldDescriptionTemplate',\n    T,\n    S,\n    F\n  >('ArrayFieldDescriptionTemplate', registry, uiOptions);\n  const ArrayFieldItemTemplate = getTemplate<\n    'ArrayFieldItemTemplate',\n    T,\n    S,\n    F\n  >('ArrayFieldItemTemplate', registry, uiOptions);\n  const ArrayFieldTitleTemplate = getTemplate<\n    'ArrayFieldTitleTemplate',\n    T,\n    S,\n    F\n  >('ArrayFieldTitleTemplate', registry, uiOptions);\n  const {\n    ButtonTemplates: { AddButton },\n  } = registry.templates;\n\n  const hasTitle = uiOptions.title || title;\n  const hasDescription = uiOptions.description || schema.description;\n\n  return (\n    <Box mb=\"4\">\n      {hasTitle && (\n        <Box mb=\"2\">\n          <ArrayFieldTitleTemplate\n            idSchema={idSchema}\n            title={uiOptions.title || title}\n            required={required}\n            schema={schema}\n            uiSchema={uiSchema}\n            registry={registry}\n          />\n        </Box>\n      )}\n      {hasDescription && (\n        <Box mb=\"2\">\n          <ArrayFieldDescriptionTemplate\n            idSchema={idSchema}\n            description={uiOptions.description || schema.description}\n            schema={schema}\n            uiSchema={uiSchema}\n            registry={registry}\n          />\n        </Box>\n      )}\n      {items && items.length > 0 ? (\n        items.map(\n          ({ key, ...itemProps }: ArrayFieldTemplateItemType<T, S, F>) => (\n            <ArrayFieldItemTemplate key={key} {...itemProps} />\n          ),\n        )\n      ) : (\n        <Box\n          p=\"3\"\n          mb=\"4\"\n          style={{\n            backgroundColor: 'var(--bui-bg-neutral-2)',\n            borderRadius: 'var(--bui-radius-2)',\n          }}\n        >\n          <Text\n            variant=\"body-medium\"\n            color=\"secondary\"\n            style={{ textAlign: 'center' }}\n          >\n            No items added yet\n          </Text>\n        </Box>\n      )}\n      {canAdd && (\n        <Box>\n          <AddButton\n            onClick={onAddClick}\n            disabled={disabled || readonly}\n            uiSchema={uiSchema}\n            registry={registry}\n          />\n        </Box>\n      )}\n    </Box>\n  );\n}\n"],"names":[],"mappings":";;;;AA0BA,SAAwB,kBAAA,CAItB;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA,KAAA;AAAA,EACA,UAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA,MAAA;AAAA,EACA;AACF,CAAA,EAAqC;AACnC,EAAA,MAAM,SAAA,GAAY,aAAsB,QAAQ,CAAA;AAChD,EAAA,MAAM,6BAAA,GAAgC,WAAA,CAKpC,+BAAA,EAAiC,QAAA,EAAU,SAAS,CAAA;AACtD,EAAA,MAAM,sBAAA,GAAyB,WAAA,CAK7B,wBAAA,EAA0B,QAAA,EAAU,SAAS,CAAA;AAC/C,EAAA,MAAM,uBAAA,GAA0B,WAAA,CAK9B,yBAAA,EAA2B,QAAA,EAAU,SAAS,CAAA;AAChD,EAAA,MAAM;AAAA,IACJ,eAAA,EAAiB,EAAE,SAAA;AAAU,MAC3B,QAAA,CAAS,SAAA;AAEb,EAAA,MAAM,QAAA,GAAW,UAAU,KAAA,IAAS,KAAA;AACpC,EAAA,MAAM,cAAA,GAAiB,SAAA,CAAU,WAAA,IAAe,MAAA,CAAO,WAAA;AAEvD,EAAA,uBACE,IAAA,CAAC,GAAA,EAAA,EAAI,EAAA,EAAG,GAAA,EACL,QAAA,EAAA;AAAA,IAAA,QAAA,oBACC,GAAA,CAAC,GAAA,EAAA,EAAI,EAAA,EAAG,GAAA,EACN,QAAA,kBAAA,GAAA;AAAA,MAAC,uBAAA;AAAA,MAAA;AAAA,QACC,QAAA;AAAA,QACA,KAAA,EAAO,UAAU,KAAA,IAAS,KAAA;AAAA,QAC1B,QAAA;AAAA,QACA,MAAA;AAAA,QACA,QAAA;AAAA,QACA;AAAA;AAAA,KACF,EACF,CAAA;AAAA,IAED,cAAA,oBACC,GAAA,CAAC,GAAA,EAAA,EAAI,EAAA,EAAG,GAAA,EACN,QAAA,kBAAA,GAAA;AAAA,MAAC,6BAAA;AAAA,MAAA;AAAA,QACC,QAAA;AAAA,QACA,WAAA,EAAa,SAAA,CAAU,WAAA,IAAe,MAAA,CAAO,WAAA;AAAA,QAC7C,MAAA;AAAA,QACA,QAAA;AAAA,QACA;AAAA;AAAA,KACF,EACF,CAAA;AAAA,IAED,KAAA,IAAS,KAAA,CAAM,MAAA,GAAS,CAAA,GACvB,KAAA,CAAM,GAAA;AAAA,MACJ,CAAC,EAAE,GAAA,EAAK,GAAG,SAAA,uBACT,GAAA,CAAC,sBAAA,EAAA,EAAkC,GAAG,SAAA,EAAA,EAAT,GAAoB;AAAA,KAErD,mBAEA,GAAA;AAAA,MAAC,GAAA;AAAA,MAAA;AAAA,QACC,CAAA,EAAE,GAAA;AAAA,QACF,EAAA,EAAG,GAAA;AAAA,QACH,KAAA,EAAO;AAAA,UACL,eAAA,EAAiB,yBAAA;AAAA,UACjB,YAAA,EAAc;AAAA,SAChB;AAAA,QAEA,QAAA,kBAAA,GAAA;AAAA,UAAC,IAAA;AAAA,UAAA;AAAA,YACC,OAAA,EAAQ,aAAA;AAAA,YACR,KAAA,EAAM,WAAA;AAAA,YACN,KAAA,EAAO,EAAE,SAAA,EAAW,QAAA,EAAS;AAAA,YAC9B,QAAA,EAAA;AAAA;AAAA;AAED;AAAA,KACF;AAAA,IAED,MAAA,wBACE,GAAA,EAAA,EACC,QAAA,kBAAA,GAAA;AAAA,MAAC,SAAA;AAAA,MAAA;AAAA,QACC,OAAA,EAAS,UAAA;AAAA,QACT,UAAU,QAAA,IAAY,QAAA;AAAA,QACtB,QAAA;AAAA,QACA;AAAA;AAAA,KACF,EACF;AAAA,GAAA,EAEJ,CAAA;AAEJ;;;;"}

package/dist/next/components/Form/BuiTheme/templates/ArrayFieldTitleTemplate.esm.js

@@ -0,0 +1,20 @@
+import { jsxs } from 'react/jsx-runtime';
+import { titleId } from '@rjsf/utils';
+import { Text } from '@backstage/ui';
+
+function ArrayFieldTitleTemplate({ idSchema, title, required }) {
+  if (!title) {
+    return null;
+  }
+  const id = titleId(idSchema);
+  return /* @__PURE__ */ jsxs(Text, { id, as: "h3", variant: "title-medium", weight: "bold", children: [
+    title,
+    required && /* @__PURE__ */ jsxs(Text, { as: "span", color: "danger", children: [
+      " ",
+      "*"
+    ] })
+  ] });
+}
+
+export { ArrayFieldTitleTemplate as default };
+//# sourceMappingURL=ArrayFieldTitleTemplate.esm.js.map

package/dist/next/components/Form/BuiTheme/templates/ArrayFieldTitleTemplate.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArrayFieldTitleTemplate.esm.js","sources":["../../../../../../src/next/components/Form/BuiTheme/templates/ArrayFieldTitleTemplate.tsx"],"sourcesContent":["/*\n * Copyright 2026 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport {\n  ArrayFieldTitleProps,\n  FormContextType,\n  RJSFSchema,\n  StrictRJSFSchema,\n  titleId,\n} from '@rjsf/utils';\nimport { Text } from '@backstage/ui';\n\nexport default function ArrayFieldTitleTemplate<\n  T = any,\n  S extends StrictRJSFSchema = RJSFSchema,\n  F extends FormContextType = any,\n>({ idSchema, title, required }: ArrayFieldTitleProps<T, S, F>) {\n  if (!title) {\n    return null;\n  }\n\n  const id = titleId<T>(idSchema);\n\n  return (\n    <Text id={id} as=\"h3\" variant=\"title-medium\" weight=\"bold\">\n      {title}\n      {required && (\n        <Text as=\"span\" color=\"danger\">\n          {' '}\n          *\n        </Text>\n      )}\n    </Text>\n  );\n}\n"],"names":[],"mappings":";;;;AAwBA,SAAwB,uBAAA,CAItB,EAAE,QAAA,EAAU,KAAA,EAAO,UAAS,EAAkC;AAC9D,EAAA,IAAI,CAAC,KAAA,EAAO;AACV,IAAA,OAAO,IAAA;AAAA,EACT;AAEA,EAAA,MAAM,EAAA,GAAK,QAAW,QAAQ,CAAA;AAE9B,EAAA,uBACE,IAAA,CAAC,QAAK,EAAA,EAAQ,EAAA,EAAG,MAAK,OAAA,EAAQ,cAAA,EAAe,QAAO,MAAA,EACjD,QAAA,EAAA;AAAA,IAAA,KAAA;AAAA,IACA,4BACC,IAAA,CAAC,IAAA,EAAA,EAAK,EAAA,EAAG,MAAA,EAAO,OAAM,QAAA,EACnB,QAAA,EAAA;AAAA,MAAA,GAAA;AAAA,MAAI;AAAA,KAAA,EAEP;AAAA,GAAA,EAEJ,CAAA;AAEJ;;;;"}

package/dist/next/components/Form/BuiTheme/templates/ButtonTemplates.esm.js

@@ -0,0 +1,83 @@
+import { jsx } from 'react/jsx-runtime';
+import { TranslatableString, getSubmitButtonOptions } from '@rjsf/utils';
+import { Button } from '@backstage/ui';
+import { RiAddLine, RiFileCopyLine, RiDeleteBinLine, RiArrowDownLine, RiArrowUpLine } from '@remixicon/react';
+
+function SubmitButton({ uiSchema }) {
+  const {
+    submitText,
+    norender,
+    props: submitButtonProps = {}
+  } = getSubmitButtonOptions(uiSchema);
+  if (norender) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(Button, { type: "submit", variant: "primary", ...submitButtonProps, children: submitText });
+}
+function AddButton({ registry, disabled, onClick, className }) {
+  const { translateString } = registry;
+  const handleClick = onClick ? (e) => onClick(e) : void 0;
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      isDisabled: disabled,
+      onClick: handleClick,
+      className,
+      variant: "secondary",
+      size: "small",
+      iconStart: /* @__PURE__ */ jsx(RiAddLine, {}),
+      children: translateString(TranslatableString.AddItemButton)
+    }
+  );
+}
+function IconButton(props) {
+  const { icon, registry, disabled, onClick, className } = props;
+  const { translateString } = registry;
+  let buttonIcon;
+  let buttonLabel;
+  switch (icon) {
+    case "arrow-up":
+      buttonIcon = /* @__PURE__ */ jsx(RiArrowUpLine, {});
+      buttonLabel = translateString(TranslatableString.MoveUpButton);
+      break;
+    case "arrow-down":
+      buttonIcon = /* @__PURE__ */ jsx(RiArrowDownLine, {});
+      buttonLabel = translateString(TranslatableString.MoveDownButton);
+      break;
+    case "remove":
+      buttonIcon = /* @__PURE__ */ jsx(RiDeleteBinLine, {});
+      buttonLabel = translateString(TranslatableString.RemoveButton);
+      break;
+    case "copy":
+      buttonIcon = /* @__PURE__ */ jsx(RiFileCopyLine, {});
+      buttonLabel = translateString(TranslatableString.CopyButton);
+      break;
+    default:
+      buttonIcon = null;
+      buttonLabel = "";
+  }
+  const handleClick = onClick ? () => onClick(void 0) : void 0;
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      isDisabled: disabled,
+      onClick: handleClick,
+      className,
+      variant: "tertiary",
+      size: "small",
+      iconStart: buttonIcon || void 0,
+      children: buttonLabel
+    }
+  );
+}
+const ButtonTemplates = {
+  SubmitButton,
+  AddButton,
+  RemoveButton: IconButton,
+  MoveDownButton: IconButton,
+  MoveUpButton: IconButton,
+  CopyButton: IconButton
+};
+
+export { AddButton, IconButton, SubmitButton, ButtonTemplates as default };
+//# sourceMappingURL=ButtonTemplates.esm.js.map

package/dist/next/components/Form/BuiTheme/templates/ButtonTemplates.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonTemplates.esm.js","sources":["../../../../../../src/next/components/Form/BuiTheme/templates/ButtonTemplates.tsx"],"sourcesContent":["/*\n * Copyright 2026 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport {\n  FormContextType,\n  IconButtonProps,\n  RJSFSchema,\n  StrictRJSFSchema,\n  SubmitButtonProps,\n  TranslatableString,\n  getSubmitButtonOptions,\n} from '@rjsf/utils';\nimport { Button } from '@backstage/ui';\nimport {\n  RiAddLine,\n  RiArrowUpLine,\n  RiArrowDownLine,\n  RiDeleteBinLine,\n  RiFileCopyLine,\n} from '@remixicon/react';\n\nexport function SubmitButton<\n  T = any,\n  S extends StrictRJSFSchema = RJSFSchema,\n  F extends FormContextType = any,\n>({ uiSchema }: SubmitButtonProps<T, S, F>) {\n  const {\n    submitText,\n    norender,\n    props: submitButtonProps = {},\n  } = getSubmitButtonOptions<T, S, F>(uiSchema);\n\n  if (norender) {\n    return null;\n  }\n\n  return (\n    <Button type=\"submit\" variant=\"primary\" {...submitButtonProps}>\n      {submitText}\n    </Button>\n  );\n}\n\nexport function AddButton<\n  T = any,\n  S extends StrictRJSFSchema = RJSFSchema,\n  F extends FormContextType = any,\n>({ registry, disabled, onClick, className }: IconButtonProps<T, S, F>) {\n  const { translateString } = registry;\n\n  const handleClick = onClick ? (e: any) => onClick(e) : undefined;\n\n  return (\n    <Button\n      isDisabled={disabled}\n      onClick={handleClick}\n      className={className}\n      variant=\"secondary\"\n      size=\"small\"\n      iconStart={<RiAddLine />}\n    >\n      {translateString(TranslatableString.AddItemButton)}\n    </Button>\n  );\n}\n\nexport function IconButton<\n  T = any,\n  S extends StrictRJSFSchema = RJSFSchema,\n  F extends FormContextType = any,\n>(props: IconButtonProps<T, S, F>) {\n  const { icon, registry, disabled, onClick, className } = props;\n  const { translateString } = registry;\n\n  let buttonIcon;\n  let buttonLabel;\n\n  switch (icon) {\n    case 'arrow-up':\n      buttonIcon = <RiArrowUpLine />;\n      buttonLabel = translateString(TranslatableString.MoveUpButton);\n      break;\n    case 'arrow-down':\n      buttonIcon = <RiArrowDownLine />;\n      buttonLabel = translateString(TranslatableString.MoveDownButton);\n      break;\n    case 'remove':\n      buttonIcon = <RiDeleteBinLine />;\n      buttonLabel = translateString(TranslatableString.RemoveButton);\n      break;\n    case 'copy':\n      buttonIcon = <RiFileCopyLine />;\n      buttonLabel = translateString(TranslatableString.CopyButton);\n      break;\n    default:\n      buttonIcon = null;\n      buttonLabel = '';\n  }\n\n  const handleClick = onClick ? () => onClick(undefined as any) : undefined;\n\n  return (\n    <Button\n      isDisabled={disabled}\n      onClick={handleClick}\n      className={className}\n      variant=\"tertiary\"\n      size=\"small\"\n      iconStart={buttonIcon || undefined}\n    >\n      {buttonLabel}\n    </Button>\n  );\n}\n\nconst ButtonTemplates = {\n  SubmitButton,\n  AddButton,\n  RemoveButton: IconButton,\n  MoveDownButton: IconButton,\n  MoveUpButton: IconButton,\n  CopyButton: IconButton,\n};\n\nexport default ButtonTemplates;\n"],"names":[],"mappings":";;;;;AAiCO,SAAS,YAAA,CAId,EAAE,QAAA,EAAS,EAA+B;AAC1C,EAAA,MAAM;AAAA,IACJ,UAAA;AAAA,IACA,QAAA;AAAA,IACA,KAAA,EAAO,oBAAoB;AAAC,GAC9B,GAAI,uBAAgC,QAAQ,CAAA;AAE5C,EAAA,IAAI,QAAA,EAAU;AACZ,IAAA,OAAO,IAAA;AAAA,EACT;AAEA,EAAA,uBACE,GAAA,CAAC,UAAO,IAAA,EAAK,QAAA,EAAS,SAAQ,SAAA,EAAW,GAAG,mBACzC,QAAA,EAAA,UAAA,EACH,CAAA;AAEJ;AAEO,SAAS,UAId,EAAE,QAAA,EAAU,QAAA,EAAU,OAAA,EAAS,WAAU,EAA6B;AACtE,EAAA,MAAM,EAAE,iBAAgB,GAAI,QAAA;AAE5B,EAAA,MAAM,cAAc,OAAA,GAAU,CAAC,CAAA,KAAW,OAAA,CAAQ,CAAC,CAAA,GAAI,MAAA;AAEvD,EAAA,uBACE,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,UAAA,EAAY,QAAA;AAAA,MACZ,OAAA,EAAS,WAAA;AAAA,MACT,SAAA;AAAA,MACA,OAAA,EAAQ,WAAA;AAAA,MACR,IAAA,EAAK,OAAA;AAAA,MACL,SAAA,sBAAY,SAAA,EAAA,EAAU,CAAA;AAAA,MAErB,QAAA,EAAA,eAAA,CAAgB,mBAAmB,aAAa;AAAA;AAAA,GACnD;AAEJ;AAEO,SAAS,WAId,KAAA,EAAiC;AACjC,EAAA,MAAM,EAAE,IAAA,EAAM,QAAA,EAAU,QAAA,EAAU,OAAA,EAAS,WAAU,GAAI,KAAA;AACzD,EAAA,MAAM,EAAE,iBAAgB,GAAI,QAAA;AAE5B,EAAA,IAAI,UAAA;AACJ,EAAA,IAAI,WAAA;AAEJ,EAAA,QAAQ,IAAA;AAAM,IACZ,KAAK,UAAA;AACH,MAAA,UAAA,uBAAc,aAAA,EAAA,EAAc,CAAA;AAC5B,MAAA,WAAA,GAAc,eAAA,CAAgB,mBAAmB,YAAY,CAAA;AAC7D,MAAA;AAAA,IACF,KAAK,YAAA;AACH,MAAA,UAAA,uBAAc,eAAA,EAAA,EAAgB,CAAA;AAC9B,MAAA,WAAA,GAAc,eAAA,CAAgB,mBAAmB,cAAc,CAAA;AAC/D,MAAA;AAAA,IACF,KAAK,QAAA;AACH,MAAA,UAAA,uBAAc,eAAA,EAAA,EAAgB,CAAA;AAC9B,MAAA,WAAA,GAAc,eAAA,CAAgB,mBAAmB,YAAY,CAAA;AAC7D,MAAA;AAAA,IACF,KAAK,MAAA;AACH,MAAA,UAAA,uBAAc,cAAA,EAAA,EAAe,CAAA;AAC7B,MAAA,WAAA,GAAc,eAAA,CAAgB,mBAAmB,UAAU,CAAA;AAC3D,MAAA;AAAA,IACF;AACE,MAAA,UAAA,GAAa,IAAA;AACb,MAAA,WAAA,GAAc,EAAA;AAAA;AAGlB,EAAA,MAAM,WAAA,GAAc,OAAA,GAAU,MAAM,OAAA,CAAQ,MAAgB,CAAA,GAAI,MAAA;AAEhE,EAAA,uBACE,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,UAAA,EAAY,QAAA;AAAA,MACZ,OAAA,EAAS,WAAA;AAAA,MACT,SAAA;AAAA,MACA,OAAA,EAAQ,UAAA;AAAA,MACR,IAAA,EAAK,OAAA;AAAA,MACL,WAAW,UAAA,IAAc,MAAA;AAAA,MAExB,QAAA,EAAA;AAAA;AAAA,GACH;AAEJ;AAEA,MAAM,eAAA,GAAkB;AAAA,EACtB,YAAA;AAAA,EACA,SAAA;AAAA,EACA,YAAA,EAAc,UAAA;AAAA,EACd,cAAA,EAAgB,UAAA;AAAA,EAChB,YAAA,EAAc,UAAA;AAAA,EACd,UAAA,EAAY;AACd;;;;"}

package/dist/next/components/Form/BuiTheme/templates/DescriptionFieldTemplate.esm.js

@@ -0,0 +1,19 @@
+import { jsx } from 'react/jsx-runtime';
+import { isValidElement } from 'react';
+import { MarkdownContent } from '@backstage/core-components';
+
+function DescriptionFieldTemplate({ id, description }) {
+  if (!description) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx("div", { id, children: isValidElement(description) ? description : /* @__PURE__ */ jsx(
+    MarkdownContent,
+    {
+      content: description,
+      linkTarget: "_blank"
+    }
+  ) });
+}
+
+export { DescriptionFieldTemplate as default };
+//# sourceMappingURL=DescriptionFieldTemplate.esm.js.map

package/dist/next/components/Form/BuiTheme/templates/DescriptionFieldTemplate.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DescriptionFieldTemplate.esm.js","sources":["../../../../../../src/next/components/Form/BuiTheme/templates/DescriptionFieldTemplate.tsx"],"sourcesContent":["/*\n * Copyright 2022 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport { isValidElement } from 'react';\nimport {\n  DescriptionFieldProps,\n  FormContextType,\n  RJSFSchema,\n  StrictRJSFSchema,\n} from '@rjsf/utils';\nimport { MarkdownContent } from '@backstage/core-components';\n\nexport default function DescriptionFieldTemplate<\n  T = any,\n  S extends StrictRJSFSchema = RJSFSchema,\n  F extends FormContextType = any,\n>({ id, description }: DescriptionFieldProps<T, S, F>) {\n  if (!description) {\n    return null;\n  }\n\n  return (\n    <div id={id}>\n      {isValidElement(description) ? (\n        description\n      ) : (\n        <MarkdownContent\n          content={description as string}\n          linkTarget=\"_blank\"\n        />\n      )}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;AAwBA,SAAwB,wBAAA,CAItB,EAAE,EAAA,EAAI,WAAA,EAAY,EAAmC;AACrD,EAAA,IAAI,CAAC,WAAA,EAAa;AAChB,IAAA,OAAO,IAAA;AAAA,EACT;AAEA,EAAA,2BACG,KAAA,EAAA,EAAI,EAAA,EACF,QAAA,EAAA,cAAA,CAAe,WAAW,IACzB,WAAA,mBAEA,GAAA;AAAA,IAAC,eAAA;AAAA,IAAA;AAAA,MACC,OAAA,EAAS,WAAA;AAAA,MACT,UAAA,EAAW;AAAA;AAAA,GACb,EAEJ,CAAA;AAEJ;;;;"}