Module: SortableList

A SortableList component to display a list of items that can be reordered with drag and drop or keyboard navigation.

Parameters:

Name Type Description

props

object

Component props.

Properties

Name	Type	Description
`border`	string	The border type.
`customAttributes`	object	Custom attributes for the component.
`customClasses`	string \| Array \| object	Custom classes for the component.
`depth`	number	The current depth of this list.
`items`	Array	The items for this list.
`maxNesting`	number	The max number of levels of nesting to allow.
`newItemProps`	object	The props to use for new items.
`NewItemTemplate`	string \| function \| element	The template to use for new items.
`showAdd`	boolean	Whether to show the add button.
`showArrows`	boolean	Whether to show the navigation arrows.
`showDragHandle`	boolean	Whether to show the drag handle.
`showDropZone`	boolean	Whether to show the drop zone.
`formFieldId`
`spacing`	string \| number \| Array \| object	The spacing for the component, as a string, number, array, or object.
`enableExternalDrag`	boolean	Whether to enable drag and drop from external sources.
`showDropIndicators`	boolean	Whether to show visual drop indicators during external drag operations.
`externalDragConfig`	object	Configuration for external drag behavior including selectors and data attributes.

Since: 3.3.6
Source: modules/SortableList/index.js, line 9

Returns:

The Sortable List component.

Type:: JSX.Element

Methods

(inner) addExternalItem(e)

Add an item to the list from an external source.

Parameters:

Name	Type	Description
`e`	Event	The triggering event with item data in detail property.

Since: 1.0.0
Source: modules/SortableList/index.js, line 424

Returns:

void

(inner) addItem()

Add an item to the list.

Since: 1.0.0
Source: modules/SortableList/index.js, line 376

Returns:

void

(inner) calculateDropIndex(mouseY) → {number}

Calculate the insertion index based on mouse position relative to existing items.

Parameters:

Name	Type	Description
`mouseY`	number	The Y position of the mouse relative to the document.

Since: 1.0.0
Source: modules/SortableList/index.js, line 157

Returns:

The calculated insertion index.

Type:: number

(inner) clearAllTargetStates()

Clear data attributes from all target elements to prevent conflicts between multiple lists.

Since: 1.0.0
Source: modules/SortableList/index.js, line 133

Returns:

void

(inner) clearExternalDragState()

Clear the visual state when no longer receiving external drag.

Since: 1.0.0
Source: modules/SortableList/index.js, line 269

Returns:

void

(inner) deleteItem(deleteId)

Delete an item from the list.

Parameters:

Name	Type	Description
`deleteId`	string	ID of the item to be deleted.

Since: 1.0.0
Source: modules/SortableList/index.js, line 402

Returns:

void

(inner) isMouseOverThisList(clientX, clientY) → {boolean}

Check if the mouse coordinates are over this specific list container.

Parameters:

Name	Type	Description
`clientX`	number	The X coordinate of the mouse.
`clientY`	number	The Y coordinate of the mouse.

Since: 1.0.0
Source: modules/SortableList/index.js, line 195

Returns:

Whether the mouse is over this list.

Type:: boolean

(inner) isValidDragSource(target) → {boolean}

Check if the target element is a valid drag source based on configuration.

Parameters:

Name	Type	Description
`target`	Element	The target element to check.

Since: 1.0.0
Source: modules/SortableList/index.js, line 113

Returns:

Whether the element is a valid drag source.

Type:: boolean

(inner) moveItem(originIndex, newIndex)

Moves an item within a list by a given set of positions.

Parameters:

Name	Type	Description
`originIndex`	number	The original index of the item.
`newIndex`	number	The new index of the item.

Since: 1.0.0
Source: modules/SortableList/index.js, line 311

Returns:

void

(inner) renderDropIndicator(index, position) → {JSX.Element}

Render a visual indicator showing where an external item will be dropped.

Parameters:

Name	Type	Description
`index`	number	The index where the indicator should appear.
`position`	string	Additional identifier for unique keys (e.g., 'start', 'end', 'empty').

Since: 1.0.0
Source: modules/SortableList/index.js, line 531

Returns:

The drop indicator component.

Type:: JSX.Element

(inner) renderEmptyState() → {JSX.Element}

Render the emptyh state UI.

Since: 1.0.0
Source: modules/SortableList/index.js, line 587

Returns:

A JSX element.

Type:: JSX.Element

(inner) renderItemsWithIndicators() → {Array}

Render all items with drop indicators interspersed between them.

Since: 1.0.0
Source: modules/SortableList/index.js, line 657

Returns:

Array of JSX elements including items and indicators.

Type:: Array

(inner) renderListItem(listItem, index) → {JSX.Element|null}

Render a list item with all necessary props.

Parameters:

Name	Type	Description
`listItem`	object	The list item to render.
`index`	number	The index to render at.

Since: 1.0.0
Source: modules/SortableList/index.js, line 480

Returns:

The rendered list item component.

Type:: JSX.Element | null

(inner) renderSortableList(origDepth, children) → {JSX.Element|null}

Render a nested SortableList component.

Parameters:

Name	Type	Description
`origDepth`	number	The original depth of the item.
`children`	Array \| boolean	The children of the item.

Since: 1.0.0
Source: modules/SortableList/index.js, line 334

Returns:

The nested SortableList component or null.

Type:: JSX.Element | null

(inner) updateExternalDragState(insertIndex)

Update the visual state and data attributes when receiving external drag.

Parameters:

Name	Type	Description
`insertIndex`	number	The calculated insertion index.

Since: 1.0.0
Source: modules/SortableList/index.js, line 241

Returns:

void