@scm-manager/ui-forms 2.42.3 → 2.42.4-20230213-150253

package/src/ScmFormContext.tsx

@@ -29,6 +29,7 @@ import type { TFunction } from "i18next";
 type ContextType<T = any> = UseFormReturn<T> & {
   t: TFunction;
   readOnly?: boolean;
+  formId: string;
 };
 
 const ScmFormContext = React.createContext<ContextType>(null as unknown as ContextType);

package/src/ScmFormListContext.tsx

@@ -0,0 +1,65 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React, { FC, useContext, useMemo } from "react";
+import { FieldValues, useFieldArray, UseFieldArrayReturn } from "react-hook-form";
+import { ScmFormPathContextProvider, useScmFormPathContext } from "./FormPathContext";
+import { useScmFormContext } from "./ScmFormContext";
+
+type ContextType<T extends FieldValues = any> = UseFieldArrayReturn<T> & { isNested: boolean };
+
+const ScmFormListContext = React.createContext<ContextType>(null as unknown as ContextType);
+
+type Props = {
+  name: string;
+};
+
+/**
+ * Sets up an array field to be displayed in an enclosed *Form.Table* or *Form.List*.
+ * A *Form.AddListEntryForm* can be used to implement a sub-form for adding new entries to the list.
+ *
+ * @beta
+ * @since 2.43.0
+ */
+export const ScmFormListContextProvider: FC<Props> = ({ name, children }) => {
+  const { control } = useScmFormContext();
+  const prefix = useScmFormPathContext();
+  const parentForm = useScmFormListContext();
+  const nameWithPrefix = useMemo(() => (prefix ? `${prefix}.${name}` : name), [name, prefix]);
+  const fieldArray = useFieldArray({
+    control,
+    name: nameWithPrefix,
+  });
+  const value = useMemo(() => ({ ...fieldArray, isNested: !!parentForm }), [fieldArray, parentForm]);
+
+  return (
+    <ScmFormPathContextProvider path={nameWithPrefix}>
+      <ScmFormListContext.Provider value={value}>{children}</ScmFormListContext.Provider>
+    </ScmFormPathContextProvider>
+  );
+};
+
+export function useScmFormListContext() {
+  return useContext(ScmFormListContext);
+}

package/src/base/help/Help.tsx

@@ -23,14 +23,12 @@
  */
 
 import React from "react";
-import classNames from "classnames";
+import { Tooltip } from "@scm-manager/ui-overlays";
 
 type Props = { text?: string; className?: string };
-
-/**
- * TODO: Implement tooltip
- */
 const Help = ({ text, className }: Props) => (
-  <span className={classNames("fas fa-fw fa-question-circle has-text-blue-light", className)} title={text} />
+  <Tooltip className={className} message={text}>
+    <i className="fas fa-fw fa-question-circle has-text-blue-light" />
+  </Tooltip>
 );
 export default Help;

package/src/checkbox/ControlledCheckboxField.tsx

@@ -24,9 +24,10 @@
 
 import React, { ComponentProps } from "react";
 import { Controller, ControllerRenderProps, Path, RegisterOptions } from "react-hook-form";
-import classNames from "classnames";
 import { useScmFormContext } from "../ScmFormContext";
 import CheckboxField from "./CheckboxField";
+import { useScmFormPathContext } from "../FormPathContext";
+import { prefixWithoutIndices } from "../helpers";
 
 type Props<T extends Record<string, unknown>> = Omit<
   ComponentProps<typeof CheckboxField>,
@@ -42,31 +43,33 @@ function ControlledInputField<T extends Record<string, unknown>>({
   label,
   helpText,
   rules,
-  className,
   testId,
   defaultChecked,
   readOnly,
   ...props
 }: Props<T>) {
-  const { control, t, readOnly: formReadonly } = useScmFormContext();
-  const labelTranslation = label || t(`${name}.label`) || "";
-  const helpTextTranslation = helpText || t(`${name}.helpText`);
+  const { control, t, readOnly: formReadonly, formId } = useScmFormContext();
+  const formPathPrefix = useScmFormPathContext();
+  const nameWithPrefix = formPathPrefix ? `${formPathPrefix}.${name}` : name;
+  const prefixedNameWithoutIndices = prefixWithoutIndices(nameWithPrefix);
+  const labelTranslation = label || t(`${prefixedNameWithoutIndices}.label`) || "";
+  const helpTextTranslation = helpText || t(`${prefixedNameWithoutIndices}.helpText`);
   return (
     <Controller
       control={control}
-      name={name}
+      name={nameWithPrefix}
       rules={rules}
       defaultValue={defaultChecked as never}
       render={({ field }) => (
         <CheckboxField
-          className={classNames("column", className)}
+          form={formId}
           readOnly={readOnly ?? formReadonly}
           defaultChecked={field.value}
           {...props}
           {...field}
           label={labelTranslation}
           helpText={helpTextTranslation}
-          testId={testId ?? `checkbox-${name}`}
+          testId={testId ?? `checkbox-${nameWithPrefix}`}
         />
       )}
     />

package/src/helpers.ts

@@ -0,0 +1,27 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+export function prefixWithoutIndices(path: string): string {
+  return path.replace(/(\.\d+)/g, "");
+}

package/src/index.ts

@@ -22,6 +22,33 @@
  * SOFTWARE.
  */
 
-export { default as Form } from "./Form";
+import FormCmp from "./Form";
+import FormRow from "./FormRow";
+import ControlledInputField from "./input/ControlledInputField";
+import ControlledCheckboxField from "./checkbox/ControlledCheckboxField";
+import ControlledSecretConfirmationField from "./input/ControlledSecretConfirmationField";
+import ControlledSelectField from "./select/ControlledSelectField";
+import { ScmFormListContextProvider } from "./ScmFormListContext";
+import ControlledList from "./list/ControlledList";
+import ControlledTable from "./table/ControlledTable";
+import ControlledColumn from "./table/ControlledColumn";
+import AddListEntryForm from "./AddListEntryForm";
+import { ScmNestedFormPathContextProvider } from "./FormPathContext";
+
 export { default as ConfigurationForm } from "./ConfigurationForm";
 export * from "./resourceHooks";
+
+export const Form = Object.assign(FormCmp, {
+  Row: FormRow,
+  Input: ControlledInputField,
+  Checkbox: ControlledCheckboxField,
+  SecretConfirmation: ControlledSecretConfirmationField,
+  Select: ControlledSelectField,
+  PathContext: ScmNestedFormPathContextProvider,
+  ListContext: ScmFormListContextProvider,
+  List: ControlledList,
+  AddListEntryForm: AddListEntryForm,
+  Table: Object.assign(ControlledTable, {
+    Column: ControlledColumn,
+  }),
+});

package/src/input/ControlledInputField.tsx

@@ -24,9 +24,10 @@
 
 import React, { ComponentProps } from "react";
 import { Controller, ControllerRenderProps, Path } from "react-hook-form";
-import classNames from "classnames";
 import { useScmFormContext } from "../ScmFormContext";
 import InputField from "./InputField";
+import { useScmFormPathContext } from "../FormPathContext";
+import { prefixWithoutIndices } from "../helpers";
 
 type Props<T extends Record<string, unknown>> = Omit<
   ComponentProps<typeof InputField>,
@@ -42,32 +43,38 @@ function ControlledInputField<T extends Record<string, unknown>>({
   label,
   helpText,
   rules,
-  className,
   testId,
   defaultValue,
   readOnly,
   ...props
 }: Props<T>) {
-  const { control, t, readOnly: formReadonly } = useScmFormContext();
-  const labelTranslation = label || t(`${name}.label`) || "";
-  const helpTextTranslation = helpText || t(`${name}.helpText`);
+  const { control, t, readOnly: formReadonly, formId } = useScmFormContext();
+  const formPathPrefix = useScmFormPathContext();
+  const nameWithPrefix = formPathPrefix ? `${formPathPrefix}.${name}` : name;
+  const prefixedNameWithoutIndices = prefixWithoutIndices(nameWithPrefix);
+  const labelTranslation = label || t(`${prefixedNameWithoutIndices}.label`) || "";
+  const helpTextTranslation = helpText || t(`${prefixedNameWithoutIndices}.helpText`);
   return (
     <Controller
       control={control}
-      name={name}
+      name={nameWithPrefix}
       rules={rules}
       defaultValue={defaultValue as never}
       render={({ field, fieldState }) => (
         <InputField
-          className={classNames("column", className)}
           readOnly={readOnly ?? formReadonly}
           required={rules?.required as boolean}
           {...props}
           {...field}
+          form={formId}
           label={labelTranslation}
           helpText={helpTextTranslation}
-          error={fieldState.error ? fieldState.error.message || t(`${name}.error.${fieldState.error.type}`) : undefined}
-          testId={testId ?? `input-${name}`}
+          error={
+            fieldState.error
+              ? fieldState.error.message || t(`${prefixedNameWithoutIndices}.error.${fieldState.error.type}`)
+              : undefined
+          }
+          testId={testId ?? `input-${nameWithPrefix}`}
         />
       )}
     />

package/src/input/ControlledSecretConfirmationField.tsx

@@ -24,9 +24,10 @@
 
 import React, { ComponentProps } from "react";
 import { Controller, ControllerRenderProps, Path } from "react-hook-form";
-import classNames from "classnames";
 import { useScmFormContext } from "../ScmFormContext";
 import InputField from "./InputField";
+import { useScmFormPathContext } from "../FormPathContext";
+import { prefixWithoutIndices } from "../helpers";
 
 type Props<T extends Record<string, unknown>> = Omit<
   ComponentProps<typeof InputField>,
@@ -56,60 +57,70 @@ export default function ControlledSecretConfirmationField<T extends Record<strin
   readOnly,
   ...props
 }: Props<T>) {
-  const { control, watch, t, readOnly: formReadonly } = useScmFormContext();
-  const labelTranslation = label || t(`${name}.label`) || "";
-  const helpTextTranslation = helpText || t(`${name}.helpText`);
-  const confirmationLabelTranslation = confirmationLabel || t(`${name}.confirmation.label`) || "";
-  const confirmationHelpTextTranslation = confirmationHelpText || t(`${name}.confirmation.helpText`);
-  const confirmationErrorMessageTranslation = confirmationErrorMessage || t(`${name}.confirmation.errorMessage`);
-  const secretValue = watch(name);
+  const { control, watch, t, readOnly: formReadonly, formId } = useScmFormContext();
+  const formPathPrefix = useScmFormPathContext();
+  const nameWithPrefix = formPathPrefix ? `${formPathPrefix}.${name}` : name;
+  const prefixedNameWithoutIndices = prefixWithoutIndices(nameWithPrefix);
+  const labelTranslation = label || t(`${prefixedNameWithoutIndices}.label`) || "";
+  const helpTextTranslation = helpText || t(`${prefixedNameWithoutIndices}.helpText`);
+  const confirmationLabelTranslation = confirmationLabel || t(`${prefixedNameWithoutIndices}.confirmation.label`) || "";
+  const confirmationHelpTextTranslation =
+    confirmationHelpText || t(`${prefixedNameWithoutIndices}.confirmation.helpText`);
+  const confirmationErrorMessageTranslation =
+    confirmationErrorMessage || t(`${prefixedNameWithoutIndices}.confirmation.errorMessage`);
+  const secretValue = watch(nameWithPrefix);
 
   return (
     <>
       <Controller
         control={control}
-        name={name}
+        name={nameWithPrefix}
         defaultValue={defaultValue as never}
         rules={{
           ...rules,
-          deps: [`${name}Confirmation`],
+          deps: [`${nameWithPrefix}Confirmation`],
         }}
         render={({ field, fieldState }) => (
           <InputField
-            className={classNames("column", className)}
+            className={className}
             readOnly={readOnly ?? formReadonly}
             {...props}
             {...field}
+            form={formId}
             required={rules?.required as boolean}
             type="password"
             label={labelTranslation}
             helpText={helpTextTranslation}
             error={
-              fieldState.error ? fieldState.error.message || t(`${name}.error.${fieldState.error.type}`) : undefined
+              fieldState.error
+                ? fieldState.error.message || t(`${prefixedNameWithoutIndices}.error.${fieldState.error.type}`)
+                : undefined
             }
-            testId={testId ?? `input-${name}`}
+            testId={testId ?? `input-${nameWithPrefix}`}
           />
         )}
       />
       <Controller
         control={control}
-        name={`${name}Confirmation`}
+        name={`${nameWithPrefix}Confirmation`}
         defaultValue={defaultValue as never}
         render={({ field, fieldState }) => (
           <InputField
-            className={classNames("column", className)}
+            className={className}
             type="password"
             readOnly={readOnly ?? formReadonly}
             disabled={props.disabled}
             {...field}
+            form={formId}
             label={confirmationLabelTranslation}
             helpText={confirmationHelpTextTranslation}
             error={
               fieldState.error
-                ? fieldState.error.message || t(`${name}.confirmation.error.${fieldState.error.type}`)
+                ? fieldState.error.message ||
+                  t(`${prefixedNameWithoutIndices}.confirmation.error.${fieldState.error.type}`)
                 : undefined
             }
-            testId={confirmationTestId ?? `input-${name}-confirmation`}
+            testId={confirmationTestId ?? `input-${nameWithPrefix}-confirmation`}
           />
         )}
         rules={{

package/src/list/ControlledList.tsx

@@ -0,0 +1,88 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React from "react";
+import { Path, PathValue } from "react-hook-form";
+import { useScmFormContext } from "../ScmFormContext";
+import { ScmFormPathContextProvider, useScmFormPathContext } from "../FormPathContext";
+import { Button } from "@scm-manager/ui-buttons";
+import { prefixWithoutIndices } from "../helpers";
+import { useScmFormListContext } from "../ScmFormListContext";
+import { useTranslation } from "react-i18next";
+
+type ArrayItemType<T> = T extends Array<infer U> ? U : unknown;
+
+type RenderProps<T extends Record<string, unknown>, PATH extends Path<T>> = {
+  value: ArrayItemType<PathValue<T, PATH>>;
+  index: number;
+  remove: () => void;
+};
+
+type Props<T extends Record<string, unknown>, PATH extends Path<T>> = {
+  withDelete?: boolean;
+  children: ((renderProps: RenderProps<T, PATH>) => React.ReactNode | React.ReactNode[]) | React.ReactNode;
+};
+
+/**
+ * @beta
+ * @since 2.43.0
+ */
+function ControlledList<T extends Record<string, unknown>, PATH extends Path<T>>({
+  withDelete,
+  children,
+}: Props<T, PATH>) {
+  const [defaultTranslate] = useTranslation("commons", { keyPrefix: "form" });
+  const { readOnly, t } = useScmFormContext();
+  const nameWithPrefix = useScmFormPathContext();
+  const prefixedNameWithoutIndices = prefixWithoutIndices(nameWithPrefix);
+  const { fields, remove } = useScmFormListContext();
+
+  const deleteButtonTranslation = t(`${prefixedNameWithoutIndices}.delete`, {
+    defaultValue: defaultTranslate("list.delete.label", {
+      entity: t(`${prefixedNameWithoutIndices}.entity`),
+    }),
+  });
+
+  return (
+    <>
+      {fields.map((value, index) => (
+        <ScmFormPathContextProvider key={value.id} path={`${nameWithPrefix}.${index}`}>
+          {typeof children === "function"
+            ? children({ value: value as never, index, remove: () => remove(index) })
+            : children}
+          {withDelete && !readOnly ? (
+            <div className="level-right">
+              <Button variant="signal" onClick={() => remove(index)}>
+                {deleteButtonTranslation}
+              </Button>
+            </div>
+          ) : null}
+          <hr />
+        </ScmFormPathContextProvider>
+      ))}
+    </>
+  );
+}
+
+export default ControlledList;

package/src/select/ControlledSelectField.tsx

@@ -24,9 +24,10 @@
 
 import React, { ComponentProps } from "react";
 import { Controller, ControllerRenderProps, Path } from "react-hook-form";
-import classNames from "classnames";
 import { useScmFormContext } from "../ScmFormContext";
 import SelectField from "./SelectField";
+import { useScmFormPathContext } from "../FormPathContext";
+import { prefixWithoutIndices } from "../helpers";
 
 type Props<T extends Record<string, unknown>> = Omit<
   ComponentProps<typeof SelectField>,
@@ -42,32 +43,38 @@ function ControlledSelectField<T extends Record<string, unknown>>({
   label,
   helpText,
   rules,
-  className,
   testId,
   defaultValue,
   readOnly,
   ...props
 }: Props<T>) {
-  const { control, t, readOnly: formReadonly } = useScmFormContext();
-  const labelTranslation = label || t(`${name}.label`) || "";
-  const helpTextTranslation = helpText || t(`${name}.helpText`);
+  const { control, t, readOnly: formReadonly, formId } = useScmFormContext();
+  const formPathPrefix = useScmFormPathContext();
+  const nameWithPrefix = formPathPrefix ? `${formPathPrefix}.${name}` : name;
+  const prefixedNameWithoutIndices = prefixWithoutIndices(nameWithPrefix);
+  const labelTranslation = label || t(`${prefixedNameWithoutIndices}.label`) || "";
+  const helpTextTranslation = helpText || t(`${prefixedNameWithoutIndices}.helpText`);
   return (
     <Controller
       control={control}
-      name={name}
+      name={nameWithPrefix}
       rules={rules}
       defaultValue={defaultValue as never}
       render={({ field, fieldState }) => (
         <SelectField
-          className={classNames("column", className)}
+          form={formId}
           readOnly={readOnly ?? formReadonly}
           required={rules?.required as boolean}
           {...props}
           {...field}
           label={labelTranslation}
           helpText={helpTextTranslation}
-          error={fieldState.error ? fieldState.error.message || t(`${name}.error.${fieldState.error.type}`) : undefined}
-          testId={testId ?? `select-${name}`}
+          error={
+            fieldState.error
+              ? fieldState.error.message || t(`${prefixedNameWithoutIndices}.error.${fieldState.error.type}`)
+              : undefined
+          }
+          testId={testId ?? `select-${nameWithPrefix}`}
         />
       )}
     />

package/src/select/Select.tsx

@@ -22,22 +22,32 @@
  * SOFTWARE.
  */
 
-import React, { InputHTMLAttributes } from "react";
+import React, { InputHTMLAttributes, Key, OptionHTMLAttributes } from "react";
 import classNames from "classnames";
 import { createVariantClass, Variant } from "../variants";
 import { createAttributesForTesting } from "@scm-manager/ui-components";
 
 type Props = {
   variant?: Variant;
+  options?: Array<OptionHTMLAttributes<HTMLOptionElement> & { label: string }>;
   testId?: string;
 } & InputHTMLAttributes<HTMLSelectElement>;
 
-const Select = React.forwardRef<HTMLSelectElement, Props>(({ variant, children, className, testId, ...props }, ref) => (
-  <div className={classNames("select", { "is-multiple": props.multiple }, createVariantClass(variant), className)}>
-    <select ref={ref} {...props} {...createAttributesForTesting(testId)}>
-      {children}
-    </select>
-  </div>
-));
+const Select = React.forwardRef<HTMLSelectElement, Props>(
+  ({ variant, children, className, options, testId, ...props }, ref) => (
+    <div className={classNames("select", { "is-multiple": props.multiple }, createVariantClass(variant), className)}>
+      <select ref={ref} {...props} {...createAttributesForTesting(testId)}>
+        {options
+          ? options.map((option) => (
+              <option {...option} key={option.value as Key}>
+                {option.label}
+                {option.children}
+              </option>
+            ))
+          : children}
+      </select>
+    </div>
+  )
+);
 
 export default Select;

package/src/table/ControlledColumn.tsx

@@ -0,0 +1,49 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React, { FC, HTMLAttributes, useMemo } from "react";
+import { useScmFormPathContext } from "../FormPathContext";
+import { useScmFormContext } from "../ScmFormContext";
+import { useWatch } from "react-hook-form";
+
+type Props = {
+  name: string;
+  children?: (value: unknown) => React.ReactNode | React.ReactNode[];
+} & HTMLAttributes<HTMLTableCellElement>;
+
+/**
+ * @beta
+ * @since 2.43.0
+ */
+const ControlledColumn: FC<Props> = ({ name, children, ...props }) => {
+  const { control } = useScmFormContext();
+  const formPathPrefix = useScmFormPathContext();
+  const nameWithPrefix = useMemo(() => (formPathPrefix ? `${formPathPrefix}.${name}` : name), [formPathPrefix, name]);
+  const value = useWatch({ control, name: nameWithPrefix, disabled: typeof children === "function" });
+  const allValues = useWatch({ control, name: formPathPrefix, disabled: typeof children !== "function" });
+
+  return <td {...props}>{typeof children === "function" ? children(allValues) : value}</td>;
+};
+
+export default ControlledColumn;