@aglyn/shared-ui-jsx-forms 1.0.0-beta.143

package/src/lib/mapper/field-array.js

@@ -0,0 +1,326 @@
+import { _ as _extends } from "@swc/helpers/_/_extends";
+import { _ as _object_without_properties_loose } from "@swc/helpers/_/_object_without_properties_loose";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * @license
+ * Copyright 2026 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */ /**
+ * Ported from `@data-driven-forms/mui-component-mapper` (Apache-2.0) and
+ * updated for the current MUI Grid API.
+ */ import { memo, useReducer } from "react";
+import { Button, FormControl, FormHelperText, Grid, IconButton, Typography } from "@mui/material";
+import { styled } from "@mui/material/styles";
+import RedoIcon from "@mui/icons-material/Redo";
+import UndoIcon from "@mui/icons-material/Undo";
+import clsx from "clsx";
+import { isEqual } from "lodash-es";
+import { FieldArray, useFieldApi, useFormApi } from "../vendor/data-driven-forms.js";
+import FormFieldGrid from "./form-field-grid.js";
+const PREFIX = 'DynamicArray';
+const classes = {
+    formControl: `${PREFIX}-formControl`,
+    centerText: `${PREFIX}-centerText`,
+    buttonsToEnd: `${PREFIX}-buttonsToEnd`,
+    header: `${PREFIX}-header`,
+    label: `${PREFIX}-label`,
+    fieldArrayGroup: `${PREFIX}-fieldArrayGroup`
+};
+const StyledFormFieldGrid = styled(FormFieldGrid)({
+    [`& .${classes.formControl}`]: {
+        width: '100%'
+    },
+    [`& .${classes.centerText}`]: {
+        display: 'flex',
+        justifyContent: 'center'
+    },
+    [`& .${classes.buttonsToEnd}`]: {
+        display: 'flex',
+        justifyContent: 'flex-end'
+    },
+    [`& .${classes.header}`]: {
+        display: 'flex'
+    },
+    [`& .${classes.label}`]: {
+        flexGrow: 1
+    },
+    [`&.${classes.fieldArrayGroup}`]: {
+        marginBottom: 32
+    }
+});
+const ArrayItem = /*#__PURE__*/ memo(({ fields, fieldIndex, name, remove, length, minItems, removeLabel, FieldContainerProps = {}, FieldGroupGridProps = {}, RemoveButtonGridProps = {}, RemoveButtonProps = {} })=>{
+    const { renderForm } = useFormApi();
+    const editedFields = fields.map((field, index)=>{
+        const computedName = field.name ? `${name}.${field.name}` : name;
+        return _extends({}, field, {
+            name: computedName,
+            key: `${computedName}-${index}`
+        });
+    });
+    return /*#__PURE__*/ _jsxs(Grid, _extends({
+        container: true,
+        spacing: 3
+    }, FieldContainerProps, {
+        children: [
+            /*#__PURE__*/ _jsx(Grid, _extends({
+                size: {
+                    xs: 12
+                }
+            }, FieldGroupGridProps, {
+                children: /*#__PURE__*/ _jsx(Grid, {
+                    container: true,
+                    spacing: 3,
+                    children: renderForm(editedFields)
+                })
+            })),
+            /*#__PURE__*/ _jsx(Grid, _extends({
+                size: {
+                    xs: 12
+                },
+                className: classes.buttonsToEnd
+            }, RemoveButtonGridProps, {
+                children: /*#__PURE__*/ _jsx(Button, _extends({
+                    color: "primary",
+                    onClick: ()=>remove(fieldIndex),
+                    disabled: length <= minItems
+                }, RemoveButtonProps, {
+                    children: removeLabel
+                }))
+            }))
+        ]
+    }));
+}, (_0, _1)=>{
+    let _ref = [
+        _0,
+        _1
+    ], [_ref1, ..._rest] = _ref, { remove: _prevRemove } = _ref1, prev = _object_without_properties_loose(_ref1, [
+        "remove"
+    ]), [_ref2] = _rest, { remove: _nextRemove } = _ref2, next = _object_without_properties_loose(_ref2, [
+        "remove"
+    ]);
+    return isEqual(prev, next);
+});
+const defaultButtonLabels = {
+    add: 'ADD',
+    remove: 'REMOVE'
+};
+const initialState = {
+    index: 0,
+    history: []
+};
+export const reducer = (state, actionObj)=>{
+    switch(actionObj.type){
+        case 'redo':
+            return _extends({}, state, {
+                index: state.index + 1
+            });
+        case 'action':
+            return {
+                index: state.index + 1,
+                history: [
+                    ...state.history.slice(0, state.index),
+                    actionObj.action
+                ]
+            };
+        case 'undo':
+            return _extends({}, state, {
+                index: state.index - 1
+            });
+        case 'resetHistory':
+            return _extends({}, state, {
+                history: state.history.slice(0, state.index)
+            });
+        default:
+            return state;
+    }
+};
+export const DynamicArray = (props)=>{
+    const _useFieldApi = useFieldApi(props), { arrayValidator, label, description, fields: formFields, defaultItem, meta, minItems = 0, maxItems = Infinity, noItemsMessage = 'No items added', help, FormFieldGridProps = {}, FormControlProps = {}, buttonLabels, GridContainerProps = {}, HeaderGridProps = {}, HeaderProps = {}, UndoButtonProps = {}, RedoButtonProps = {}, AddButtonProps = {}, DescriptionGridProps = {}, DescriptionProps = {}, BodyGridProps = {}, NoItemsProps = {}, FormHelperTextGridProps = {}, FormHelperTextProps = {}, FieldContainerProps = {}, FieldGroupGridProps = {}, RemoveButtonGridProps = {}, RemoveButtonProps = {} } = _useFieldApi, rest = _object_without_properties_loose(_useFieldApi, [
+        "arrayValidator",
+        "label",
+        "description",
+        "fields",
+        "defaultItem",
+        "meta",
+        "minItems",
+        "maxItems",
+        "noItemsMessage",
+        "help",
+        "FormFieldGridProps",
+        "FormControlProps",
+        "buttonLabels",
+        "GridContainerProps",
+        "HeaderGridProps",
+        "HeaderProps",
+        "UndoButtonProps",
+        "RedoButtonProps",
+        "AddButtonProps",
+        "DescriptionGridProps",
+        "DescriptionProps",
+        "BodyGridProps",
+        "NoItemsProps",
+        "FormHelperTextGridProps",
+        "FormHelperTextProps",
+        "FieldContainerProps",
+        "FieldGroupGridProps",
+        "RemoveButtonGridProps",
+        "RemoveButtonProps"
+    ]);
+    const [state, dispatch] = useReducer(reducer, initialState);
+    const combinedButtonLabels = _extends({}, defaultButtonLabels, buttonLabels);
+    const { dirty, submitFailed, error, submitError } = meta;
+    const isError = (dirty || submitFailed) && error && typeof error === 'string';
+    return /*#__PURE__*/ _jsx(StyledFormFieldGrid, _extends({
+        help: help
+    }, FormFieldGridProps, {
+        className: clsx(classes.fieldArrayGroup, FormFieldGridProps.className),
+        children: /*#__PURE__*/ _jsx(FormControl, _extends({
+            component: "fieldset",
+            error: isError || submitError
+        }, FormControlProps, {
+            className: clsx(classes.formControl, FormControlProps.className),
+            children: /*#__PURE__*/ _jsx(FieldArray, {
+                name: rest.input.name,
+                validate: arrayValidator,
+                children: ({ fields: { map, value = [], push, remove } })=>{
+                    const pushWrapper = ()=>{
+                        dispatch({
+                            type: 'resetHistory'
+                        });
+                        push(defaultItem);
+                    };
+                    const removeWrapper = (index)=>{
+                        dispatch({
+                            type: 'action',
+                            action: {
+                                action: 'remove',
+                                value: value[index]
+                            }
+                        });
+                        remove(index);
+                    };
+                    const undo = ()=>{
+                        push(state.history[state.index - 1].value);
+                        dispatch({
+                            type: 'undo'
+                        });
+                    };
+                    const redo = ()=>{
+                        remove(value.length - 1);
+                        dispatch({
+                            type: 'redo'
+                        });
+                    };
+                    return /*#__PURE__*/ _jsxs(Grid, _extends({
+                        container: true,
+                        spacing: 3
+                    }, GridContainerProps, {
+                        children: [
+                            /*#__PURE__*/ _jsxs(Grid, _extends({
+                                size: {
+                                    xs: 12
+                                },
+                                className: classes.header
+                            }, HeaderGridProps, {
+                                children: [
+                                    label && /*#__PURE__*/ _jsx(Typography, _extends({
+                                        variant: "h6",
+                                        className: classes.label
+                                    }, HeaderProps, {
+                                        children: label
+                                    })),
+                                    /*#__PURE__*/ _jsx(IconButton, _extends({
+                                        color: "primary",
+                                        "aria-label": "undo",
+                                        component: "span",
+                                        disabled: state.index === 0,
+                                        onClick: undo
+                                    }, UndoButtonProps, {
+                                        size: "large",
+                                        children: /*#__PURE__*/ _jsx(UndoIcon, {})
+                                    })),
+                                    /*#__PURE__*/ _jsx(IconButton, _extends({
+                                        color: "primary",
+                                        "aria-label": "redo",
+                                        component: "span",
+                                        disabled: state.index === state.history.length,
+                                        onClick: redo
+                                    }, RedoButtonProps, {
+                                        size: "large",
+                                        children: /*#__PURE__*/ _jsx(RedoIcon, {})
+                                    })),
+                                    /*#__PURE__*/ _jsx(Button, _extends({
+                                        color: "primary",
+                                        onClick: pushWrapper,
+                                        disabled: value.length >= maxItems
+                                    }, AddButtonProps, {
+                                        children: combinedButtonLabels.add
+                                    }))
+                                ]
+                            })),
+                            description && /*#__PURE__*/ _jsx(Grid, _extends({
+                                size: {
+                                    xs: 12
+                                }
+                            }, DescriptionGridProps, {
+                                children: /*#__PURE__*/ _jsx(Typography, _extends({
+                                    variant: "subtitle1"
+                                }, DescriptionProps, {
+                                    children: description
+                                }))
+                            })),
+                            /*#__PURE__*/ _jsx(Grid, _extends({
+                                size: {
+                                    xs: 12
+                                }
+                            }, BodyGridProps, {
+                                children: value.length <= 0 ? /*#__PURE__*/ _jsx(Typography, _extends({
+                                    variant: "body1",
+                                    gutterBottom: true,
+                                    className: classes.centerText
+                                }, NoItemsProps, {
+                                    children: noItemsMessage
+                                })) : map((name, index)=>/*#__PURE__*/ _jsx(ArrayItem, {
+                                        fields: formFields,
+                                        name: name,
+                                        fieldIndex: index,
+                                        remove: removeWrapper,
+                                        length: value.length,
+                                        minItems: minItems,
+                                        removeLabel: combinedButtonLabels.remove,
+                                        FieldContainerProps: FieldContainerProps,
+                                        FieldGroupGridProps: FieldGroupGridProps,
+                                        RemoveButtonGridProps: RemoveButtonGridProps,
+                                        RemoveButtonProps: RemoveButtonProps
+                                    }, name))
+                            })),
+                            (isError || submitError) && /*#__PURE__*/ _jsx(Grid, _extends({
+                                size: {
+                                    xs: 12
+                                }
+                            }, FormHelperTextGridProps, {
+                                children: /*#__PURE__*/ _jsx(FormHelperText, _extends({}, FormHelperTextProps, {
+                                    children: error || submitError
+                                }))
+                            }))
+                        ]
+                    }));
+                }
+            }, rest.input.name)
+        }))
+    }));
+};
+export default DynamicArray;
+
+//# sourceMappingURL=field-array.js.map

package/src/lib/mapper/field-array.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../libs/shared/ui/jsx-forms/src/lib/mapper/field-array.tsx"],"sourcesContent":["/**\n * @license\n * Copyright 2026 Aglyn LLC\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/**\n * Ported from `@data-driven-forms/mui-component-mapper` (Apache-2.0) and\n * updated for the current MUI Grid API.\n */\n\nimport { memo, useReducer } from 'react'\n\nimport {\n  Button,\n  type ButtonProps,\n  FormControl,\n  type FormControlProps,\n  FormHelperText,\n  type FormHelperTextProps,\n  Grid,\n  type GridProps,\n  IconButton,\n  type IconButtonProps,\n  Typography,\n  type TypographyProps,\n} from '@mui/material'\nimport { styled } from '@mui/material/styles'\n\nimport RedoIcon from '@mui/icons-material/Redo'\nimport UndoIcon from '@mui/icons-material/Undo'\n\nimport clsx from 'clsx'\n\nimport { isEqual } from 'lodash-es'\n\nimport {\n  FieldArray,\n  useFieldApi,\n  useFormApi,\n} from '../vendor/data-driven-forms'\nimport FormFieldGrid, { type FormFieldGridProps } from './form-field-grid'\nimport type { BaseFieldProps } from './types'\n\nconst PREFIX = 'DynamicArray'\n\nconst classes = {\n  formControl: `${PREFIX}-formControl`,\n  centerText: `${PREFIX}-centerText`,\n  buttonsToEnd: `${PREFIX}-buttonsToEnd`,\n  header: `${PREFIX}-header`,\n  label: `${PREFIX}-label`,\n  fieldArrayGroup: `${PREFIX}-fieldArrayGroup`,\n}\n\nconst StyledFormFieldGrid = styled(FormFieldGrid)({\n  [`& .${classes.formControl}`]: {\n    width: '100%',\n  },\n  [`& .${classes.centerText}`]: {\n    display: 'flex',\n    justifyContent: 'center',\n  },\n  [`& .${classes.buttonsToEnd}`]: {\n    display: 'flex',\n    justifyContent: 'flex-end',\n  },\n  [`& .${classes.header}`]: {\n    display: 'flex',\n  },\n  [`& .${classes.label}`]: {\n    flexGrow: 1,\n  },\n  [`&.${classes.fieldArrayGroup}`]: {\n    marginBottom: 32,\n  },\n})\n\ninterface ArrayItemProps {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  fields: (Record<string, any> & { name?: string; component: string })[]\n  fieldIndex: number\n  name: string\n  remove: (index: number) => void\n  length: number\n  minItems: number\n  removeLabel: string\n  FieldContainerProps?: GridProps\n  FieldGroupGridProps?: GridProps\n  RemoveButtonGridProps?: GridProps\n  RemoveButtonProps?: ButtonProps\n}\n\nconst ArrayItem = memo<ArrayItemProps>(\n  ({\n    fields,\n    fieldIndex,\n    name,\n    remove,\n    length,\n    minItems,\n    removeLabel,\n    FieldContainerProps = {},\n    FieldGroupGridProps = {},\n    RemoveButtonGridProps = {},\n    RemoveButtonProps = {},\n  }) => {\n    const { renderForm } = useFormApi()\n\n    const editedFields = fields.map((field, index) => {\n      const computedName = field.name ? `${name}.${field.name}` : name\n      return { ...field, name: computedName, key: `${computedName}-${index}` }\n    })\n\n    return (\n      <Grid container spacing={3} {...FieldContainerProps}>\n        <Grid size={{ xs: 12 }} {...FieldGroupGridProps}>\n          <Grid container spacing={3}>\n            {renderForm(editedFields)}\n          </Grid>\n        </Grid>\n        <Grid\n          size={{ xs: 12 }}\n          className={classes.buttonsToEnd}\n          {...RemoveButtonGridProps}\n        >\n          <Button\n            color=\"primary\"\n            onClick={() => remove(fieldIndex)}\n            disabled={length <= minItems}\n            {...RemoveButtonProps}\n          >\n            {removeLabel}\n          </Button>\n        </Grid>\n      </Grid>\n    )\n  },\n  ({ remove: _prevRemove, ...prev }, { remove: _nextRemove, ...next }) =>\n    isEqual(prev, next),\n)\n\ninterface ButtonLabels {\n  add?: string\n  remove?: string\n}\n\nconst defaultButtonLabels: Required<ButtonLabels> = {\n  add: 'ADD',\n  remove: 'REMOVE',\n}\n\ninterface HistoryAction {\n  action: 'remove'\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  value: any\n}\n\ninterface HistoryState {\n  index: number\n  history: HistoryAction[]\n}\n\ntype ReducerAction =\n  | { type: 'redo' }\n  | { type: 'undo' }\n  | { type: 'action'; action: HistoryAction }\n  | { type: 'resetHistory' }\n\nconst initialState: HistoryState = {\n  index: 0,\n  history: [],\n}\n\nexport const reducer = (\n  state: HistoryState,\n  actionObj: ReducerAction,\n): HistoryState => {\n  switch (actionObj.type) {\n    case 'redo':\n      return {\n        ...state,\n        index: state.index + 1,\n      }\n    case 'action':\n      return {\n        index: state.index + 1,\n        history: [...state.history.slice(0, state.index), actionObj.action],\n      }\n    case 'undo':\n      return {\n        ...state,\n        index: state.index - 1,\n      }\n    case 'resetHistory':\n      return {\n        ...state,\n        history: state.history.slice(0, state.index),\n      }\n    default:\n      return state\n  }\n}\n\nexport interface FieldArrayProps extends BaseFieldProps {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  arrayValidator?: (value: any[]) => string | undefined\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  fields: Record<string, any>[]\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  defaultItem?: any\n  minItems?: number\n  maxItems?: number\n  noItemsMessage?: string\n  buttonLabels?: ButtonLabels\n  FormFieldGridProps?: FormFieldGridProps\n  FormControlProps?: FormControlProps\n  GridContainerProps?: GridProps\n  HeaderGridProps?: GridProps\n  HeaderProps?: TypographyProps\n  UndoButtonProps?: IconButtonProps\n  RedoButtonProps?: IconButtonProps\n  AddButtonProps?: ButtonProps\n  DescriptionGridProps?: GridProps\n  DescriptionProps?: TypographyProps\n  BodyGridProps?: GridProps\n  NoItemsProps?: TypographyProps\n  FormHelperTextGridProps?: GridProps\n  FormHelperTextProps?: FormHelperTextProps\n  FieldContainerProps?: GridProps\n  FieldGroupGridProps?: GridProps\n  RemoveButtonGridProps?: GridProps\n  RemoveButtonProps?: ButtonProps\n}\n\nexport const DynamicArray = (props: FieldArrayProps) => {\n  const {\n    arrayValidator,\n    label,\n    description,\n    fields: formFields,\n    defaultItem,\n    meta,\n    minItems = 0,\n    maxItems = Infinity,\n    noItemsMessage = 'No items added',\n    help,\n    FormFieldGridProps = {},\n    FormControlProps = {},\n    buttonLabels,\n    GridContainerProps = {},\n    HeaderGridProps = {},\n    HeaderProps = {},\n    UndoButtonProps = {},\n    RedoButtonProps = {},\n    AddButtonProps = {},\n    DescriptionGridProps = {},\n    DescriptionProps = {},\n    BodyGridProps = {},\n    NoItemsProps = {},\n    FormHelperTextGridProps = {},\n    FormHelperTextProps = {},\n    FieldContainerProps = {},\n    FieldGroupGridProps = {},\n    RemoveButtonGridProps = {},\n    RemoveButtonProps = {},\n    ...rest\n  } = useFieldApi(props)\n  const [state, dispatch] = useReducer(reducer, initialState)\n\n  const combinedButtonLabels = {\n    ...defaultButtonLabels,\n    ...buttonLabels,\n  }\n\n  const { dirty, submitFailed, error, submitError } = meta\n  const isError = (dirty || submitFailed) && error && typeof error === 'string'\n\n  return (\n    <StyledFormFieldGrid\n      help={help}\n      {...FormFieldGridProps}\n      className={clsx(classes.fieldArrayGroup, FormFieldGridProps.className)}\n    >\n      <FormControl\n        component=\"fieldset\"\n        error={isError || submitError}\n        {...FormControlProps}\n        className={clsx(classes.formControl, FormControlProps.className)}\n      >\n        <FieldArray\n          key={rest.input.name}\n          name={rest.input.name}\n          validate={arrayValidator}\n        >\n          {({ fields: { map, value = [], push, remove } }) => {\n            const pushWrapper = () => {\n              dispatch({ type: 'resetHistory' })\n              push(defaultItem)\n            }\n\n            const removeWrapper = (index: number) => {\n              dispatch({\n                type: 'action',\n                action: { action: 'remove', value: value[index] },\n              })\n              remove(index)\n            }\n\n            const undo = () => {\n              push(state.history[state.index - 1].value)\n              dispatch({ type: 'undo' })\n            }\n\n            const redo = () => {\n              remove(value.length - 1)\n              dispatch({ type: 'redo' })\n            }\n\n            return (\n              <Grid container spacing={3} {...GridContainerProps}>\n                <Grid\n                  size={{ xs: 12 }}\n                  className={classes.header}\n                  {...HeaderGridProps}\n                >\n                  {label && (\n                    <Typography\n                      variant=\"h6\"\n                      className={classes.label}\n                      {...HeaderProps}\n                    >\n                      {label}\n                    </Typography>\n                  )}\n                  <IconButton\n                    color=\"primary\"\n                    aria-label=\"undo\"\n                    component=\"span\"\n                    disabled={state.index === 0}\n                    onClick={undo}\n                    {...UndoButtonProps}\n                    size=\"large\"\n                  >\n                    <UndoIcon />\n                  </IconButton>\n                  <IconButton\n                    color=\"primary\"\n                    aria-label=\"redo\"\n                    component=\"span\"\n                    disabled={state.index === state.history.length}\n                    onClick={redo}\n                    {...RedoButtonProps}\n                    size=\"large\"\n                  >\n                    <RedoIcon />\n                  </IconButton>\n                  <Button\n                    color=\"primary\"\n                    onClick={pushWrapper}\n                    disabled={value.length >= maxItems}\n                    {...AddButtonProps}\n                  >\n                    {combinedButtonLabels.add}\n                  </Button>\n                </Grid>\n                {description && (\n                  <Grid size={{ xs: 12 }} {...DescriptionGridProps}>\n                    <Typography variant=\"subtitle1\" {...DescriptionProps}>\n                      {description}\n                    </Typography>\n                  </Grid>\n                )}\n                <Grid size={{ xs: 12 }} {...BodyGridProps}>\n                  {value.length <= 0 ? (\n                    <Typography\n                      variant=\"body1\"\n                      gutterBottom\n                      className={classes.centerText}\n                      {...NoItemsProps}\n                    >\n                      {noItemsMessage}\n                    </Typography>\n                  ) : (\n                    map((name, index) => (\n                      <ArrayItem\n                        key={name}\n                        fields={formFields}\n                        name={name}\n                        fieldIndex={index}\n                        remove={removeWrapper}\n                        length={value.length}\n                        minItems={minItems}\n                        removeLabel={combinedButtonLabels.remove}\n                        FieldContainerProps={FieldContainerProps}\n                        FieldGroupGridProps={FieldGroupGridProps}\n                        RemoveButtonGridProps={RemoveButtonGridProps}\n                        RemoveButtonProps={RemoveButtonProps}\n                      />\n                    ))\n                  )}\n                </Grid>\n                {(isError || submitError) && (\n                  <Grid size={{ xs: 12 }} {...FormHelperTextGridProps}>\n                    <FormHelperText {...FormHelperTextProps}>\n                      {error || submitError}\n                    </FormHelperText>\n                  </Grid>\n                )}\n              </Grid>\n            )\n          }}\n        </FieldArray>\n      </FormControl>\n    </StyledFormFieldGrid>\n  )\n}\n\nexport default DynamicArray\n"],"names":["memo","useReducer","Button","FormControl","FormHelperText","Grid","IconButton","Typography","styled","RedoIcon","UndoIcon","clsx","isEqual","FieldArray","useFieldApi","useFormApi","FormFieldGrid","PREFIX","classes","formControl","centerText","buttonsToEnd","header","label","fieldArrayGroup","StyledFormFieldGrid","width","display","justifyContent","flexGrow","marginBottom","ArrayItem","fields","fieldIndex","name","remove","length","minItems","removeLabel","FieldContainerProps","FieldGroupGridProps","RemoveButtonGridProps","RemoveButtonProps","renderForm","editedFields","map","field","index","computedName","key","container","spacing","size","xs","className","color","onClick","disabled","_prevRemove","prev","_nextRemove","next","defaultButtonLabels","add","initialState","history","reducer","state","actionObj","type","slice","action","DynamicArray","props","arrayValidator","description","formFields","defaultItem","meta","maxItems","Infinity","noItemsMessage","help","FormFieldGridProps","FormControlProps","buttonLabels","GridContainerProps","HeaderGridProps","HeaderProps","UndoButtonProps","RedoButtonProps","AddButtonProps","DescriptionGridProps","DescriptionProps","BodyGridProps","NoItemsProps","FormHelperTextGridProps","FormHelperTextProps","rest","dispatch","combinedButtonLabels","dirty","submitFailed","error","submitError","isError","component","input","validate","value","push","pushWrapper","removeWrapper","undo","redo","variant","aria-label","gutterBottom"],"mappings":"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"}

package/src/lib/mapper/form-field-grid.d.ts

@@ -0,0 +1,155 @@
+/**
+ * @license
+ * Copyright 2026 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Ported from `@data-driven-forms/mui-component-mapper` (Apache-2.0) and
+ * updated for the current MUI Grid API (`size` instead of `item`/`xs`).
+ */
+import type { ReactNode } from 'react';
+import { type HelpTipContent } from '@aglyn/shared-ui-jsx';
+import { type GridProps } from '@mui/material';
+/**
+ * How a row whose declaration is switched off reads.
+ *
+ * It has to say "set, but not applying" and never "unset" — that distinction
+ * is the whole point of switching a declaration off rather than deleting it.
+ * So the VALUE is struck through and the control fades, while the corner
+ * buttons stay at full strength: they are the way back, and must not look
+ * disabled themselves.
+ *
+ * Exported as a plain sx object because a mute can sit on surfaces that are
+ * not grid-wrapped fields — the inline toggle rows, the box editor's sides,
+ * the custom-CSS builder — and all of them have to read the same.
+ */
+export declare const FIELD_MUTED_STYLES: {
+    [x: string]: {
+        opacity: number;
+        textDecoration?: undefined;
+    } | {
+        textDecoration: string;
+        opacity?: undefined;
+    };
+};
+/**
+ * The "put this field back to unset" affordance (AGL-2486).
+ *
+ * Every editor in the styles panel could SET a value and none of them
+ * could take one off again: a colour typed once stayed on the node
+ * forever, because "unset" is not a value any of these controls can be
+ * driven to — a colour picker has no empty swatch, a length box with a
+ * unit picked re-serializes `px` onto an emptied number, and a select's
+ * "Default" option only exists where someone remembered to author one.
+ * The way back has to be a control of its own.
+ *
+ * It lives on the shared wrapper rather than inside each editor so the
+ * affordance is one thing in one place — but each editor still supplies
+ * {@link onClear}, because what "clear" MEANS differs per editor (a
+ * gradient drops its stops, a length drops its unit) and a wrapper that
+ * only knew the form value would leave those drafts behind.
+ */
+export interface FieldClearAction {
+    /** Accessible name, e.g. `Clear Text Color`. */
+    label: string;
+    /** Nothing to clear — the button is not rendered at all. */
+    hidden?: boolean;
+    disabled?: boolean;
+    onClear: () => void;
+}
+/**
+ * Builds a {@link FieldClearAction} for one editor.
+ *
+ * `hasValue` is passed in rather than derived from a form value because
+ * `0` and `'0'` are legitimate style values and this repo compiles with
+ * `strictNullChecks` off — a falsy test here would hide the clear button
+ * on exactly the values hardest to type back in.
+ */
+export declare const buildFieldClear: (options: {
+    /** Opt-in: only fields whose schema asks for it get the affordance. */
+    clearable?: boolean;
+    label?: ReactNode;
+    hasValue: boolean;
+    locked?: boolean;
+    onClear: () => void;
+}) => FieldClearAction | undefined;
+/**
+ * The "stop applying this one declaration, keep its value" affordance
+ * (AGL-2486) — the browser-devtools checkbox, in the styles panel.
+ *
+ * Distinct from {@link FieldClearAction} in the only way that matters: clear
+ * takes the value off the element, mute leaves it exactly where it is and
+ * stops it painting, so a layout can be looked at with one property switched
+ * off and the comparison value is still there to switch back on.
+ *
+ * Supplied by the panel through the field's `FormFieldGridProps`, not by each
+ * editor, because unlike clear it needs nothing from the editor: which
+ * declaration to mute is the field's own name, and where the mute lives is
+ * the panel's business.
+ */
+export interface FieldMuteAction {
+    /** Accessible name, e.g. `Stop applying Max Width`. */
+    label: string;
+    /** True while the declaration is switched off. */
+    muted?: boolean;
+    onToggle: () => void;
+}
+/**
+ * The eye itself, so every surface that can carry a mute renders the same
+ * control: the grid-wrapped fields, the inline toggle rows, the box editor's
+ * sides and the custom-CSS builder. `offset` places it in a corner where one
+ * is free.
+ */
+export declare const FieldMuteButton: {
+    ({ mute, offset, sx, }: {
+        mute?: FieldMuteAction;
+        offset?: number;
+        sx?: object;
+    }): import("react").JSX.Element;
+    displayName: string;
+};
+/** Class marking a row whose declaration is switched off. */
+export declare const FIELD_MUTED_CLASS: string;
+/**
+ * The "let something else supply this value" affordance — the `{}` a
+ * free-text field carries inside its box, for a field that has no box to
+ * carry it in.
+ *
+ * A switch or a checkbox has no box to put an end adornment in, so the button
+ * joins the corner controls instead, where it sits the same way on any field.
+ * What it opens is the caller's business: the field's name is all a wrapper
+ * knows, and which values may stand in for it is a question only the surface
+ * that rendered the field can answer.
+ */
+export interface FieldBindAction {
+    /** Accessible name, e.g. `Bind Autoplay to a property`. */
+    label: string;
+    /** Opens the caller's picker, anchored on the button that was pressed. */
+    onOpen: (anchor: HTMLElement) => void;
+}
+export interface FormFieldGridProps extends Omit<GridProps, 'size'> {
+    children?: ReactNode;
+    className?: string;
+    size?: GridProps['size'];
+    /** Contextual help affordance at the field's top-right (AGL-601). */
+    help?: HelpTipContent;
+    /** Reset-to-unset affordance at the field's top-right (AGL-2486). */
+    clear?: FieldClearAction;
+    /** Switch this declaration off without losing it (AGL-2486). */
+    mute?: FieldMuteAction;
+    /** Supply this value from elsewhere, e.g. a component property. */
+    bind?: FieldBindAction;
+}
+export declare const FormFieldGrid: ({ children, className, help, clear, mute, bind, size, ...props }: FormFieldGridProps) => import("react").JSX.Element;
+export default FormFieldGrid;