From df39774a05e66a9ef8b595608d7a66a9da5046e4 Mon Sep 17 00:00:00 2001
From: Theo Velikov <theo.velikov@appfolio.com>
Date: Wed, 22 Jul 2026 14:18:21 -0700
Subject: [PATCH 1/2] feat: support dragHandle="inside" on reorderable
 HasManyFields

---
 .../HasManyFields/HasManyFields.d.ts          |  1 +
 src/components/HasManyFields/HasManyFields.js | 57 +++++++++++++------
 .../HasManyFields/HasManyFields.spec.js       | 34 +++++++++++
 .../HasManyFields/HasManyFields.stories.js    |  7 +++
 4 files changed, 82 insertions(+), 17 deletions(-)

diff --git a/src/components/HasManyFields/HasManyFields.d.ts b/src/components/HasManyFields/HasManyFields.d.ts
index 4d28209c2..fbb6922c1 100644
--- a/src/components/HasManyFields/HasManyFields.d.ts
+++ b/src/components/HasManyFields/HasManyFields.d.ts
@@ -16,6 +16,7 @@ interface HasManyFieldsPropTypes {
   minimumRows?: number;
   maximumRows?: number;
   reorderable?: boolean;
+  dragHandle?: 'outside' | 'inside';
   value?: HasManyValue[];
   className?: string;
 }
diff --git a/src/components/HasManyFields/HasManyFields.js b/src/components/HasManyFields/HasManyFields.js
index deea2f634..6cb1ccf43 100644
--- a/src/components/HasManyFields/HasManyFields.js
+++ b/src/components/HasManyFields/HasManyFields.js
@@ -9,15 +9,22 @@ import HasManyFieldsRow from './HasManyFieldsRow';
 
 const DragHandler = withDragHandler();
 
-const SortableItem = ReorderableElement(({ key, sortIndex, value, renderHasManyFieldsRow }) => (
-  <div className="d-flex js-reorderable-item" key={key}>
-    <DragHandler />
-    <div className="w-100">{renderHasManyFieldsRow(null, sortIndex, value)}</div>
-  </div>
-));
+const SortableItem = ReorderableElement(
+  ({ key, sortIndex, value, renderHasManyFieldsRow, dragHandleInside }) =>
+    dragHandleInside ? (
+      <div className="js-reorderable-item" key={key}>
+        {renderHasManyFieldsRow(null, sortIndex, value, <DragHandler />)}
+      </div>
+    ) : (
+      <div className="d-flex js-reorderable-item" key={key}>
+        <DragHandler />
+        <div className="w-100">{renderHasManyFieldsRow(null, sortIndex, value)}</div>
+      </div>
+    )
+);
 
 const SortableContainer = ReorderableContainer(
-  ({ value, renderAddRow, renderHasManyFieldsRow }) => (
+  ({ value, renderAddRow, renderHasManyFieldsRow, dragHandleInside }) => (
     <div>
       {value.map((item, index) => (
         <SortableItem
@@ -25,6 +32,7 @@ const SortableContainer = ReorderableContainer(
           index={index}
           sortIndex={index}
           value={item}
+          dragHandleInside={dragHandleInside}
           renderHasManyFieldsRow={renderHasManyFieldsRow}
         />
       ))}
@@ -44,6 +52,7 @@ class HasManyFields extends React.Component {
     minimumRows: 1,
     maximumRows: Infinity,
     reorderable: false,
+    dragHandle: 'outside',
   };
 
   constructor(props) {
@@ -135,10 +144,21 @@ class HasManyFields extends React.Component {
     return isFunction && !(Template.prototype && Template.prototype.render);
   };
 
-  renderHasManyFieldsRow = (key, index, value) => {
+  renderHasManyFieldsRow = (key, index, value, dragHandle) => {
     const { template: Template, disabled, deleteProps, errors, minimumRows } = this.props;
     const refProps = this.isStateless(Template) ? {} : { ref: this.setRowReference(index) };
 
+    const template = (
+      <Template
+        value={value}
+        errors={errors[index]}
+        onChange={this.updateItem(index)}
+        disabled={disabled}
+        index={index}
+        {...refProps}
+      />
+    );
+
     return (
       <HasManyFieldsRow
         onDelete={this.deleteItem(index)}
@@ -147,20 +167,22 @@ class HasManyFields extends React.Component {
         disabled={disabled}
         deleteProps={deleteProps}
       >
-        <Template
-          value={value}
-          errors={errors[index]}
-          onChange={this.updateItem(index)}
-          disabled={disabled}
-          index={index}
-          {...refProps}
-        />
+        {dragHandle ? (
+          <div className="d-flex">
+            {dragHandle}
+            <div className="w-100" style={{ minWidth: 0 }}>
+              {template}
+            </div>
+          </div>
+        ) : (
+          template
+        )}
       </HasManyFieldsRow>
     );
   };
 
   render() {
-    const { className, disabled, reorderable } = this.props;
+    const { className, disabled, reorderable, dragHandle } = this.props;
 
     if (!disabled && reorderable) {
       return (
@@ -172,6 +194,7 @@ class HasManyFields extends React.Component {
             useDragHandle
             lockAxis="y"
             value={this.value}
+            dragHandleInside={dragHandle === 'inside'}
             renderHasManyFieldsRow={this.renderHasManyFieldsRow}
             renderAddRow={this.renderAddRow}
           />
diff --git a/src/components/HasManyFields/HasManyFields.spec.js b/src/components/HasManyFields/HasManyFields.spec.js
index d76bc3219..ab3ea8c34 100644
--- a/src/components/HasManyFields/HasManyFields.spec.js
+++ b/src/components/HasManyFields/HasManyFields.spec.js
@@ -274,6 +274,40 @@ describe('<HasManyFields />', () => {
         assert.equal(items.length, component.find('.js-reorderable-item').length);
         assert.equal(items.length, component.find(HasManyFieldsRow).length);
       });
+
+      it('renders drag handles outside the rows by default', () => {
+        assert.equal(items.length, component.find('div.rg-DragHandler').length);
+        assert.equal(0, component.find(HasManyFieldsRow).at(0).find('div.rg-DragHandler').length);
+      });
+    });
+  });
+
+  describe('reorderable with dragHandle="inside"', () => {
+    let component;
+
+    beforeEach(() => {
+      component = mount(
+        <HasManyFields
+          value={items}
+          errors={errors}
+          template={Input}
+          blank="foo"
+          label="Add an Animal"
+          reorderable
+          dragHandle="inside"
+        />
+      );
+    });
+
+    it('has correct number of reorderable items', () => {
+      assert.equal(items.length, component.find('.js-reorderable-item').length);
+      assert.equal(items.length, component.find(HasManyFieldsRow).length);
+    });
+
+    it('renders each drag handle inside its row', () => {
+      component.find(HasManyFieldsRow).forEach((row) => {
+        assert.equal(1, row.find('div.rg-DragHandler').length);
+      });
     });
   });
 });
diff --git a/src/components/HasManyFields/HasManyFields.stories.js b/src/components/HasManyFields/HasManyFields.stories.js
index b34ddf832..7fbedb73f 100644
--- a/src/components/HasManyFields/HasManyFields.stories.js
+++ b/src/components/HasManyFields/HasManyFields.stories.js
@@ -66,6 +66,13 @@ LiveExample.args = {
   minimumRows: 1,
   maximumRows: 5,
   reorderable: false,
+  dragHandle: 'outside',
+};
+LiveExample.argTypes = {
+  dragHandle: {
+    control: 'radio',
+    options: ['outside', 'inside'],
+  },
 };
 
 export const RowWrapper = (args) => (

From dda0c07dbeb4f341c14656cd552e3cb35c6f9a4f Mon Sep 17 00:00:00 2001
From: Theo Velikov <theo.velikov@appfolio.com>
Date: Wed, 22 Jul 2026 14:38:48 -0700
Subject: [PATCH 2/2] feat: add rowClassName pass-through to HasManyFields rows

---
 src/components/HasManyFields/HasManyFields.d.ts       |  1 +
 src/components/HasManyFields/HasManyFields.js         | 10 +++++++++-
 src/components/HasManyFields/HasManyFields.spec.js    | 10 ++++++++++
 src/components/HasManyFields/HasManyFields.stories.js |  1 +
 4 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/src/components/HasManyFields/HasManyFields.d.ts b/src/components/HasManyFields/HasManyFields.d.ts
index fbb6922c1..1e09c672b 100644
--- a/src/components/HasManyFields/HasManyFields.d.ts
+++ b/src/components/HasManyFields/HasManyFields.d.ts
@@ -17,6 +17,7 @@ interface HasManyFieldsPropTypes {
   maximumRows?: number;
   reorderable?: boolean;
   dragHandle?: 'outside' | 'inside';
+  rowClassName?: string;
   value?: HasManyValue[];
   className?: string;
 }
diff --git a/src/components/HasManyFields/HasManyFields.js b/src/components/HasManyFields/HasManyFields.js
index 6cb1ccf43..fc634703c 100644
--- a/src/components/HasManyFields/HasManyFields.js
+++ b/src/components/HasManyFields/HasManyFields.js
@@ -145,7 +145,14 @@ class HasManyFields extends React.Component {
   };
 
   renderHasManyFieldsRow = (key, index, value, dragHandle) => {
-    const { template: Template, disabled, deleteProps, errors, minimumRows } = this.props;
+    const {
+      template: Template,
+      disabled,
+      deleteProps,
+      errors,
+      minimumRows,
+      rowClassName,
+    } = this.props;
     const refProps = this.isStateless(Template) ? {} : { ref: this.setRowReference(index) };
 
     const template = (
@@ -163,6 +170,7 @@ class HasManyFields extends React.Component {
       <HasManyFieldsRow
         onDelete={this.deleteItem(index)}
         key={key}
+        className={rowClassName}
         deletable={this.value.length > minimumRows}
         disabled={disabled}
         deleteProps={deleteProps}
diff --git a/src/components/HasManyFields/HasManyFields.spec.js b/src/components/HasManyFields/HasManyFields.spec.js
index ab3ea8c34..a12b167bb 100644
--- a/src/components/HasManyFields/HasManyFields.spec.js
+++ b/src/components/HasManyFields/HasManyFields.spec.js
@@ -310,4 +310,14 @@ describe('<HasManyFields />', () => {
       });
     });
   });
+
+  it('passes rowClassName through to each row', () => {
+    const component = mount(
+      <HasManyFields value={items} template={Input} label="Add an Animal" rowClassName="border rounded p-3" />
+    );
+
+    component.find(HasManyFieldsRow).forEach((row) => {
+      assert.equal('border rounded p-3', row.prop('className'));
+    });
+  });
 });
diff --git a/src/components/HasManyFields/HasManyFields.stories.js b/src/components/HasManyFields/HasManyFields.stories.js
index 7fbedb73f..f5b185fd8 100644
--- a/src/components/HasManyFields/HasManyFields.stories.js
+++ b/src/components/HasManyFields/HasManyFields.stories.js
@@ -67,6 +67,7 @@ LiveExample.args = {
   maximumRows: 5,
   reorderable: false,
   dragHandle: 'outside',
+  rowClassName: '',
 };
 LiveExample.argTypes = {
   dragHandle: {