@pega/cosmos-react-dnd 7.0.0-build.9.2 → 7.0.0-rc.1

package/lib/components/DragDropList/DragDropList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DragDropList.d.ts","sourceRoot":"","sources":["../../../src/components/DragDropList/DragDropList.tsx"],"names":[],"mappings":";AAUA,OAAO,KAAK,EAAE,YAAY,EAAc,MAAM,yBAAyB,CAAC;AAMxE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAgB9D,QAAA,MAAM,YAAY,oQAwRjB,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"DragDropList.d.ts","sourceRoot":"","sources":["../../../src/components/DragDropList/DragDropList.tsx"],"names":[],"mappings":";AAUA,OAAO,KAAK,EAAE,YAAY,EAAc,MAAM,yBAAyB,CAAC;AAOxE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAgB9D,QAAA,MAAM,YAAY,oQA8TjB,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/lib/components/DragDropList/DragDropList.js

@@ -1,8 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useCallback, useState, useRef } from 'react';
+import { useCallback, useState, useRef, useMemo } from 'react';
 import { useElement, useAfterInitialEffect, useTriggerableEffect, useUID } from '@pega/cosmos-react-core';
 import Draggable from '../Draggable';
 import Droppable from '../Droppable';
+import DragDropListContext from './DragDropListContext';
 const middleYOfRect = ({ top, bottom }) => top + (bottom - top) / 2;
 const DragDropList = ({ testId, id: idProp, accept, items, itemRenderer: ItemRenderer, emptyRenderer: EmptyRenderer, onChange, onEnter, pullMode = 'remove', pushMode = 'insert', dragToRemove = false, as: Component = 'ul', ...restProps }) => {
     const [internalItems, setInternalItems] = useState(items);
@@ -190,18 +191,50 @@ const DragDropList = ({ testId, id: idProp, accept, items, itemRenderer: ItemRen
         });
     }, [dragToRemove, internalItems, triggerOnChange]);
     const emptyContent = EmptyRenderer ? _jsx(EmptyRenderer, {}) : null;
-    return (_jsx(Droppable, { accept: accept, onHover: onHover, onDrop: onDrop, children: ({ dropRef }) => {
-            return (_jsx(Component, { ref: (el) => {
-                    dropRef(el);
-                    setListEl(el);
-                }, ...restProps, children: internalItems.length === 0
-                    ? emptyContent
-                    : internalItems.map(item => {
-                        return (_jsx(Draggable, { id: item.id, type: item.type, data: item.data, onBegin: onBegin(item.id), onEnd: onEnd, children: ({ dragRef, previewRef, collected }) => {
-                                return (_jsx(ItemRenderer, { testId: testId, ...item, dragRef: dragRef, previewRef: previewRef, ...collected, isDragging: !!item.sourceId }));
-                            } }, item.id));
-                    }) }));
-        } }));
+    const keyboardReorderItem = useCallback((itemId, direction) => {
+        let newItems = internalItems;
+        const currentItems = internalItems;
+        const index = currentItems.findIndex(({ id }) => id === itemId);
+        if (direction === 'prev') {
+            if (index === 0) {
+                return;
+            }
+            newItems = [
+                ...currentItems.slice(0, index - 1),
+                currentItems[index],
+                currentItems[index - 1],
+                ...currentItems.slice(index + 1, currentItems.length)
+            ];
+        }
+        else if (direction === 'next') {
+            if (index === currentItems.length - 1) {
+                return;
+            }
+            newItems = [
+                ...currentItems.slice(0, index),
+                currentItems[index + 1],
+                currentItems[index],
+                ...currentItems.slice(index + 2, currentItems.length)
+            ];
+        }
+        else {
+            return;
+        }
+        triggerOnChange(newItems);
+    }, [internalItems, triggerOnChange]);
+    const contextValue = useMemo(() => ({ keyboardReorderItem }), [keyboardReorderItem]);
+    return (_jsx(DragDropListContext.Provider, { value: contextValue, children: _jsx(Droppable, { accept: accept, onHover: onHover, onDrop: onDrop, children: ({ dropRef }) => {
+                return (_jsx(Component, { ref: (el) => {
+                        dropRef(el);
+                        setListEl(el);
+                    }, ...restProps, children: internalItems.length === 0
+                        ? emptyContent
+                        : internalItems.map(item => {
+                            return (_jsx(Draggable, { id: item.id, type: item.type, data: item.data, onBegin: onBegin(item.id), onEnd: onEnd, children: ({ dragRef, previewRef, collected }) => {
+                                    return (_jsx(ItemRenderer, { testId: testId, ...item, dragRef: dragRef, previewRef: previewRef, ...collected, isDragging: !!item.sourceId }));
+                                } }, item.id));
+                        }) }));
+            } }) }));
 };
 export default DragDropList;
 //# sourceMappingURL=DragDropList.js.map

package/lib/components/DragDropList/DragDropList.js.map

@@ -1 +1 @@
-{"version":3,"file":"DragDropList.js","sourceRoot":"","sources":["../../../src/components/DragDropList/DragDropList.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useCallback, useState, useRef } from 'react';\nimport type { RefObject, MutableRefObject } from 'react';\nimport type { DragSourceMonitor, DropTargetMonitor } from 'react-dnd';\n\nimport {\n  useElement,\n  useAfterInitialEffect,\n  useTriggerableEffect,\n  useUID\n} from '@pega/cosmos-react-core';\nimport type { ForwardProps, OmitStrict } from '@pega/cosmos-react-core';\n\nimport Draggable from '../Draggable';\nimport type { DraggableItem } from '../Draggable';\nimport Droppable from '../Droppable';\n\nimport type { DragDropListProps } from './DragDropList.types';\n\ninterface DragDropListItem<T extends object = object> extends DraggableItem<T> {\n  removeFromCurrent?: () => void;\n  returnToSource?: (item: DraggableItem<T>) => void;\n  normalizeDestination?: () => void;\n  changeSource?: (itemId: DraggableItem<T>['id'], destinationId: string) => void;\n  changeDestination?: (items: DragDropListItem<T>[], insertIndex?: number) => void;\n  destinationItemsRef?: RefObject<DragDropListItem<T>[]>;\n  transformedItemCache?: Set<MutableRefObject<DraggableItem<T> | null>>;\n  sourceId?: string;\n  destinationId?: string;\n}\n\nconst middleYOfRect = ({ top, bottom }: DOMRect): number => top + (bottom - top) / 2;\n\nconst DragDropList = <T extends object = object>({\n  testId,\n  id: idProp,\n  accept,\n  items,\n  itemRenderer: ItemRenderer,\n  emptyRenderer: EmptyRenderer,\n  onChange,\n  onEnter,\n  pullMode = 'remove',\n  pushMode = 'insert',\n  dragToRemove = false,\n  as: Component = 'ul',\n  ...restProps\n}: DragDropListProps<T> & ForwardProps) => {\n  const [internalItems, setInternalItems] = useState<DragDropListItem<T>[]>(items);\n  const itemRectsRef = useRef<DOMRect[] | null>(null);\n  const transformedItem = useRef<DraggableItem<T> | null>(null);\n  const [listEl, setListEl] = useElement<HTMLElement>();\n  const uniqueId = useUID();\n  const listId = idProp ?? uniqueId;\n\n  const getItemRects = useCallback((): DOMRect[] | null => {\n    if (!listEl || listEl.children.length === 0) return null;\n    return [...listEl.children].map(itemEl => {\n      return itemEl.getBoundingClientRect();\n    });\n  }, [listEl]);\n\n  useAfterInitialEffect(() => {\n    setInternalItems(items);\n  }, [items]);\n\n  const internalItemsRef = useRef(internalItems);\n  internalItemsRef.current = internalItems;\n\n  const triggerOnChange = useTriggerableEffect(\n    useCallback(\n      (newItems: DragDropListItem<T>[], insertIndex?: number) => {\n        onChange(newItems, insertIndex);\n      },\n      [onChange]\n    )\n  );\n\n  const getTransformedItem = useCallback(\n    (item: DragDropListItem<T>) => {\n      if (!onEnter) {\n        transformedItem.current = null;\n        return item;\n      }\n\n      if (transformedItem.current) return transformedItem.current;\n\n      const newItem = {\n        ...item,\n        ...onEnter(item),\n        id: item.id\n      };\n      transformedItem.current = newItem;\n      return newItem;\n    },\n    [onEnter]\n  );\n\n  const changeSource = useCallback(\n    (itemId: DraggableItem<T>['id'], destinationId: string) => {\n      const sourcePullMode = typeof pullMode === 'function' ? pullMode(destinationId) : pullMode;\n      if (sourcePullMode === 'remove') {\n        const newList = internalItems.filter(({ id }) => id !== itemId);\n        triggerOnChange(newList);\n      } else {\n        setInternalItems(items);\n      }\n    },\n    [pullMode, items, internalItems, triggerOnChange]\n  );\n\n  const getInsertIndex = useCallback(\n    (item: DraggableItem<T>, monitor: DropTargetMonitor | DragSourceMonitor): number => {\n      itemRectsRef.current = getItemRects();\n      const { current: itemRects } = itemRectsRef;\n      let insertIndex = -1;\n      const prevIndex = internalItems.findIndex(({ id }) => id === item.id);\n\n      const clientXY = monitor.getClientOffset();\n      if (!itemRects || !clientXY) return insertIndex;\n\n      const dragPreviewRectTop = clientXY.y;\n      const atHead = dragPreviewRectTop < middleYOfRect(itemRects[0]);\n      const atTail = dragPreviewRectTop >= middleYOfRect(itemRects[itemRects.length - 1]);\n\n      if (atHead) {\n        insertIndex = 0;\n      } else if (atTail) {\n        insertIndex = prevIndex === itemRects.length - 1 ? prevIndex : itemRects.length;\n      } else {\n        itemRects.some((rect, i, rects) => {\n          if (i === rects.length - 1) {\n            if (prevIndex === i) insertIndex = i;\n            return true;\n          }\n          const belowCurrent = dragPreviewRectTop >= middleYOfRect(rect);\n          const aboveNext = dragPreviewRectTop < middleYOfRect(rects[i + 1]);\n          if (belowCurrent && aboveNext) {\n            if (prevIndex !== -1 && i >= prevIndex) insertIndex = i;\n            else insertIndex = i + 1;\n            return true;\n          }\n          return false;\n        });\n      }\n\n      return insertIndex;\n    },\n    [getItemRects, internalItems]\n  );\n\n  const removeById = useCallback((itemId: DraggableItem<T>['id']): void => {\n    setInternalItems(currentItems => currentItems.filter(({ id }) => id !== itemId));\n  }, []);\n\n  const normalizeItems = useCallback(() => {\n    setInternalItems(currentItems =>\n      currentItems.map(({ id, data, type }) => ({\n        id,\n        data,\n        type\n      }))\n    );\n  }, []);\n\n  const positionItems = useCallback(\n    (item: DragDropListItem<T>, monitor: DropTargetMonitor): void => {\n      if (!monitor.canDrop() || !monitor.isOver({ shallow: true })) return;\n\n      const prevIndex = internalItems.findIndex(({ id }) => id === item.id);\n\n      if (prevIndex === -1) {\n        item.removeFromCurrent?.();\n        item.removeFromCurrent = () => {\n          removeById(item.id);\n        };\n      }\n\n      item.normalizeDestination = normalizeItems;\n      item.changeDestination = triggerOnChange;\n      item.destinationItemsRef = internalItemsRef;\n      item.transformedItemCache?.add(transformedItem);\n      item.destinationId = listId;\n\n      let insertIndex = 0;\n      if (pushMode === 'insert') insertIndex = getInsertIndex(item, monitor);\n      if (pushMode === 'append') insertIndex = internalItems.length + 1;\n\n      let newItems: DraggableItem<T>[];\n\n      // Is the current being dragged is within its own list\n      if (prevIndex !== -1) {\n        if (insertIndex === prevIndex || pushMode !== 'insert') return;\n\n        newItems = internalItems.filter(({ id }) => id !== item.id);\n        newItems.splice(insertIndex, 0, transformedItem.current ?? item);\n\n        if (typeof pushMode === 'function') setInternalItems(newItems.sort(pushMode));\n        else setInternalItems(newItems);\n      } else {\n        newItems = [...internalItems];\n        newItems.splice(insertIndex, 0, getTransformedItem(item));\n\n        if (typeof pushMode === 'function') setInternalItems(newItems.sort(pushMode));\n        else setInternalItems(newItems);\n      }\n    },\n    [internalItems, pushMode, getInsertIndex, normalizeItems, triggerOnChange, removeById, listId]\n  );\n\n  const onHover = positionItems;\n  const onDrop = positionItems;\n\n  const onBegin = useCallback(\n    (itemId: DraggableItem<T>['id']) =>\n      (): OmitStrict<DragDropListItem<T>, keyof DraggableItem<T>> => {\n        const initialIndex = internalItems.findIndex(({ id }) => id === itemId);\n\n        return {\n          returnToSource: (item: DraggableItem<T>) => {\n            setInternalItems(currentItems => {\n              const newItems = currentItems.filter(({ id }) => id !== itemId);\n              newItems.splice(initialIndex, 0, item);\n              return newItems;\n            });\n            normalizeItems();\n          },\n          normalizeDestination: normalizeItems,\n          changeSource,\n          changeDestination: triggerOnChange,\n          destinationItemsRef: internalItemsRef,\n          transformedItemCache: new Set([transformedItem]),\n          sourceId: listId,\n          destinationId: listId\n        };\n      },\n    [internalItems, normalizeItems, triggerOnChange, changeSource, removeById, listId]\n  );\n\n  const onEnd = useCallback(\n    (item: DragDropListItem<T> | undefined, monitor: DragSourceMonitor) => {\n      if (!item) return;\n\n      if (monitor.didDrop()) {\n        const { id: itemId, sourceId, destinationId } = item;\n        let insertIndex;\n        item.normalizeDestination?.();\n        const destinationItems = item.destinationItemsRef!.current!;\n        if (sourceId && destinationId && sourceId !== destinationId) {\n          item.changeSource?.(itemId, destinationId);\n          insertIndex = destinationItems.findIndex(({ id }) => id === itemId);\n        }\n        item.changeDestination?.(destinationItems, insertIndex);\n      } else {\n        item.removeFromCurrent?.();\n        if (dragToRemove) {\n          triggerOnChange(internalItems.filter(({ id }) => id !== item.id));\n        } else {\n          item.returnToSource?.(item);\n        }\n      }\n      item.transformedItemCache?.forEach(ref => {\n        ref.current = null;\n      });\n    },\n    [dragToRemove, internalItems, triggerOnChange]\n  );\n\n  const emptyContent = EmptyRenderer ? <EmptyRenderer /> : null;\n\n  return (\n    <Droppable accept={accept} onHover={onHover} onDrop={onDrop}>\n      {({ dropRef }) => {\n        return (\n          <Component\n            ref={(el: HTMLElement) => {\n              dropRef(el);\n              setListEl(el);\n            }}\n            {...restProps}\n          >\n            {internalItems.length === 0\n              ? emptyContent\n              : internalItems.map(item => {\n                  return (\n                    <Draggable\n                      key={item.id}\n                      id={item.id}\n                      type={item.type}\n                      data={item.data}\n                      onBegin={onBegin(item.id)}\n                      onEnd={onEnd}\n                    >\n                      {({ dragRef, previewRef, collected }) => {\n                        return (\n                          <ItemRenderer\n                            testId={testId}\n                            {...item}\n                            dragRef={dragRef}\n                            previewRef={previewRef}\n                            {...collected}\n                            isDragging={!!item.sourceId}\n                          />\n                        );\n                      }}\n                    </Draggable>\n                  );\n                })}\n          </Component>\n        );\n      }}\n    </Droppable>\n  );\n};\n\nexport default DragDropList;\n"]}
+{"version":3,"file":"DragDropList.js","sourceRoot":"","sources":["../../../src/components/DragDropList/DragDropList.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useCallback, useState, useRef, useMemo } from 'react';\nimport type { RefObject, MutableRefObject } from 'react';\nimport type { DragSourceMonitor, DropTargetMonitor } from 'react-dnd';\n\nimport {\n  useElement,\n  useAfterInitialEffect,\n  useTriggerableEffect,\n  useUID\n} from '@pega/cosmos-react-core';\nimport type { ForwardProps, OmitStrict } from '@pega/cosmos-react-core';\n\nimport Draggable from '../Draggable';\nimport type { DraggableItem } from '../Draggable';\nimport Droppable from '../Droppable';\n\nimport DragDropListContext from './DragDropListContext';\nimport type { DragDropListProps } from './DragDropList.types';\n\ninterface DragDropListItem<T extends object = object> extends DraggableItem<T> {\n  removeFromCurrent?: () => void;\n  returnToSource?: (item: DraggableItem<T>) => void;\n  normalizeDestination?: () => void;\n  changeSource?: (itemId: DraggableItem<T>['id'], destinationId: string) => void;\n  changeDestination?: (items: DragDropListItem<T>[], insertIndex?: number) => void;\n  destinationItemsRef?: RefObject<DragDropListItem<T>[]>;\n  transformedItemCache?: Set<MutableRefObject<DraggableItem<T> | null>>;\n  sourceId?: string;\n  destinationId?: string;\n}\n\nconst middleYOfRect = ({ top, bottom }: DOMRect): number => top + (bottom - top) / 2;\n\nconst DragDropList = <T extends object = object>({\n  testId,\n  id: idProp,\n  accept,\n  items,\n  itemRenderer: ItemRenderer,\n  emptyRenderer: EmptyRenderer,\n  onChange,\n  onEnter,\n  pullMode = 'remove',\n  pushMode = 'insert',\n  dragToRemove = false,\n  as: Component = 'ul',\n  ...restProps\n}: DragDropListProps<T> & ForwardProps) => {\n  const [internalItems, setInternalItems] = useState<DragDropListItem<T>[]>(items);\n  const itemRectsRef = useRef<DOMRect[] | null>(null);\n  const transformedItem = useRef<DraggableItem<T> | null>(null);\n  const [listEl, setListEl] = useElement<HTMLElement>();\n  const uniqueId = useUID();\n  const listId = idProp ?? uniqueId;\n\n  const getItemRects = useCallback((): DOMRect[] | null => {\n    if (!listEl || listEl.children.length === 0) return null;\n    return [...listEl.children].map(itemEl => {\n      return itemEl.getBoundingClientRect();\n    });\n  }, [listEl]);\n\n  useAfterInitialEffect(() => {\n    setInternalItems(items);\n  }, [items]);\n\n  const internalItemsRef = useRef(internalItems);\n  internalItemsRef.current = internalItems;\n\n  const triggerOnChange = useTriggerableEffect(\n    useCallback(\n      (newItems: DragDropListItem<T>[], insertIndex?: number) => {\n        onChange(newItems, insertIndex);\n      },\n      [onChange]\n    )\n  );\n\n  const getTransformedItem = useCallback(\n    (item: DragDropListItem<T>) => {\n      if (!onEnter) {\n        transformedItem.current = null;\n        return item;\n      }\n\n      if (transformedItem.current) return transformedItem.current;\n\n      const newItem = {\n        ...item,\n        ...onEnter(item),\n        id: item.id\n      };\n      transformedItem.current = newItem;\n      return newItem;\n    },\n    [onEnter]\n  );\n\n  const changeSource = useCallback(\n    (itemId: DraggableItem<T>['id'], destinationId: string) => {\n      const sourcePullMode = typeof pullMode === 'function' ? pullMode(destinationId) : pullMode;\n      if (sourcePullMode === 'remove') {\n        const newList = internalItems.filter(({ id }) => id !== itemId);\n        triggerOnChange(newList);\n      } else {\n        setInternalItems(items);\n      }\n    },\n    [pullMode, items, internalItems, triggerOnChange]\n  );\n\n  const getInsertIndex = useCallback(\n    (item: DraggableItem<T>, monitor: DropTargetMonitor | DragSourceMonitor): number => {\n      itemRectsRef.current = getItemRects();\n      const { current: itemRects } = itemRectsRef;\n      let insertIndex = -1;\n      const prevIndex = internalItems.findIndex(({ id }) => id === item.id);\n\n      const clientXY = monitor.getClientOffset();\n      if (!itemRects || !clientXY) return insertIndex;\n\n      const dragPreviewRectTop = clientXY.y;\n      const atHead = dragPreviewRectTop < middleYOfRect(itemRects[0]);\n      const atTail = dragPreviewRectTop >= middleYOfRect(itemRects[itemRects.length - 1]);\n\n      if (atHead) {\n        insertIndex = 0;\n      } else if (atTail) {\n        insertIndex = prevIndex === itemRects.length - 1 ? prevIndex : itemRects.length;\n      } else {\n        itemRects.some((rect, i, rects) => {\n          if (i === rects.length - 1) {\n            if (prevIndex === i) insertIndex = i;\n            return true;\n          }\n          const belowCurrent = dragPreviewRectTop >= middleYOfRect(rect);\n          const aboveNext = dragPreviewRectTop < middleYOfRect(rects[i + 1]);\n          if (belowCurrent && aboveNext) {\n            if (prevIndex !== -1 && i >= prevIndex) insertIndex = i;\n            else insertIndex = i + 1;\n            return true;\n          }\n          return false;\n        });\n      }\n\n      return insertIndex;\n    },\n    [getItemRects, internalItems]\n  );\n\n  const removeById = useCallback((itemId: DraggableItem<T>['id']): void => {\n    setInternalItems(currentItems => currentItems.filter(({ id }) => id !== itemId));\n  }, []);\n\n  const normalizeItems = useCallback(() => {\n    setInternalItems(currentItems =>\n      currentItems.map(({ id, data, type }) => ({\n        id,\n        data,\n        type\n      }))\n    );\n  }, []);\n\n  const positionItems = useCallback(\n    (item: DragDropListItem<T>, monitor: DropTargetMonitor): void => {\n      if (!monitor.canDrop() || !monitor.isOver({ shallow: true })) return;\n\n      const prevIndex = internalItems.findIndex(({ id }) => id === item.id);\n\n      if (prevIndex === -1) {\n        item.removeFromCurrent?.();\n        item.removeFromCurrent = () => {\n          removeById(item.id);\n        };\n      }\n\n      item.normalizeDestination = normalizeItems;\n      item.changeDestination = triggerOnChange;\n      item.destinationItemsRef = internalItemsRef;\n      item.transformedItemCache?.add(transformedItem);\n      item.destinationId = listId;\n\n      let insertIndex = 0;\n      if (pushMode === 'insert') insertIndex = getInsertIndex(item, monitor);\n      if (pushMode === 'append') insertIndex = internalItems.length + 1;\n\n      let newItems: DraggableItem<T>[];\n\n      // Is the current being dragged is within its own list\n      if (prevIndex !== -1) {\n        if (insertIndex === prevIndex || pushMode !== 'insert') return;\n\n        newItems = internalItems.filter(({ id }) => id !== item.id);\n        newItems.splice(insertIndex, 0, transformedItem.current ?? item);\n\n        if (typeof pushMode === 'function') setInternalItems(newItems.sort(pushMode));\n        else setInternalItems(newItems);\n      } else {\n        newItems = [...internalItems];\n        newItems.splice(insertIndex, 0, getTransformedItem(item));\n\n        if (typeof pushMode === 'function') setInternalItems(newItems.sort(pushMode));\n        else setInternalItems(newItems);\n      }\n    },\n    [internalItems, pushMode, getInsertIndex, normalizeItems, triggerOnChange, removeById, listId]\n  );\n\n  const onHover = positionItems;\n  const onDrop = positionItems;\n\n  const onBegin = useCallback(\n    (itemId: DraggableItem<T>['id']) =>\n      (): OmitStrict<DragDropListItem<T>, keyof DraggableItem<T>> => {\n        const initialIndex = internalItems.findIndex(({ id }) => id === itemId);\n\n        return {\n          returnToSource: (item: DraggableItem<T>) => {\n            setInternalItems(currentItems => {\n              const newItems = currentItems.filter(({ id }) => id !== itemId);\n              newItems.splice(initialIndex, 0, item);\n              return newItems;\n            });\n            normalizeItems();\n          },\n          normalizeDestination: normalizeItems,\n          changeSource,\n          changeDestination: triggerOnChange,\n          destinationItemsRef: internalItemsRef,\n          transformedItemCache: new Set([transformedItem]),\n          sourceId: listId,\n          destinationId: listId\n        };\n      },\n    [internalItems, normalizeItems, triggerOnChange, changeSource, removeById, listId]\n  );\n\n  const onEnd = useCallback(\n    (item: DragDropListItem<T> | undefined, monitor: DragSourceMonitor) => {\n      if (!item) return;\n\n      if (monitor.didDrop()) {\n        const { id: itemId, sourceId, destinationId } = item;\n        let insertIndex;\n        item.normalizeDestination?.();\n        const destinationItems = item.destinationItemsRef!.current!;\n        if (sourceId && destinationId && sourceId !== destinationId) {\n          item.changeSource?.(itemId, destinationId);\n          insertIndex = destinationItems.findIndex(({ id }) => id === itemId);\n        }\n        item.changeDestination?.(destinationItems, insertIndex);\n      } else {\n        item.removeFromCurrent?.();\n        if (dragToRemove) {\n          triggerOnChange(internalItems.filter(({ id }) => id !== item.id));\n        } else {\n          item.returnToSource?.(item);\n        }\n      }\n      item.transformedItemCache?.forEach(ref => {\n        ref.current = null;\n      });\n    },\n    [dragToRemove, internalItems, triggerOnChange]\n  );\n\n  const emptyContent = EmptyRenderer ? <EmptyRenderer /> : null;\n\n  const keyboardReorderItem = useCallback(\n    (itemId: DraggableItem['id'], direction: 'prev' | 'next') => {\n      let newItems = internalItems;\n      const currentItems = internalItems;\n      const index = currentItems.findIndex(({ id }) => id === itemId);\n      if (direction === 'prev') {\n        if (index === 0) {\n          return;\n        }\n        newItems = [\n          ...currentItems.slice(0, index - 1),\n          currentItems[index],\n          currentItems[index - 1],\n          ...currentItems.slice(index + 1, currentItems.length)\n        ];\n      } else if (direction === 'next') {\n        if (index === currentItems.length - 1) {\n          return;\n        }\n        newItems = [\n          ...currentItems.slice(0, index),\n          currentItems[index + 1],\n          currentItems[index],\n          ...currentItems.slice(index + 2, currentItems.length)\n        ];\n      } else {\n        return;\n      }\n\n      triggerOnChange(newItems);\n    },\n    [internalItems, triggerOnChange]\n  );\n\n  const contextValue = useMemo(() => ({ keyboardReorderItem }), [keyboardReorderItem]);\n\n  return (\n    <DragDropListContext.Provider value={contextValue}>\n      <Droppable accept={accept} onHover={onHover} onDrop={onDrop}>\n        {({ dropRef }) => {\n          return (\n            <Component\n              ref={(el: HTMLElement) => {\n                dropRef(el);\n                setListEl(el);\n              }}\n              {...restProps}\n            >\n              {internalItems.length === 0\n                ? emptyContent\n                : internalItems.map(item => {\n                    return (\n                      <Draggable\n                        key={item.id}\n                        id={item.id}\n                        type={item.type}\n                        data={item.data}\n                        onBegin={onBegin(item.id)}\n                        onEnd={onEnd}\n                      >\n                        {({ dragRef, previewRef, collected }) => {\n                          return (\n                            <ItemRenderer\n                              testId={testId}\n                              {...item}\n                              dragRef={dragRef}\n                              previewRef={previewRef}\n                              {...collected}\n                              isDragging={!!item.sourceId}\n                            />\n                          );\n                        }}\n                      </Draggable>\n                    );\n                  })}\n            </Component>\n          );\n        }}\n      </Droppable>\n    </DragDropListContext.Provider>\n  );\n};\n\nexport default DragDropList;\n"]}

package/lib/components/DragDropList/DragDropListContext.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import type { DraggableItem } from '../Draggable';
+declare const DragDropListContext: import("react").Context<{
+    keyboardReorderItem: (itemId: DraggableItem['id'], direction: 'prev' | 'next') => void;
+} | undefined>;
+export default DragDropListContext;
+//# sourceMappingURL=DragDropListContext.d.ts.map

package/lib/components/DragDropList/DragDropListContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DragDropListContext.d.ts","sourceRoot":"","sources":["../../../src/components/DragDropList/DragDropListContext.ts"],"names":[],"mappings":";AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAElD,QAAA,MAAM,mBAAmB;kCAEW,aAAa,CAAC,IAAI,CAAC,aAAa,MAAM,GAAG,MAAM,KAAK,IAAI;cAGhF,CAAC;AAEb,eAAe,mBAAmB,CAAC"}

package/lib/components/DragDropList/DragDropListContext.js

@@ -0,0 +1,4 @@
+import { createContext } from 'react';
+const DragDropListContext = createContext(undefined);
+export default DragDropListContext;
+//# sourceMappingURL=DragDropListContext.js.map

package/lib/components/DragDropList/DragDropListContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DragDropListContext.js","sourceRoot":"","sources":["../../../src/components/DragDropList/DragDropListContext.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAItC,MAAM,mBAAmB,GAAG,aAAa,CAKvC,SAAS,CAAC,CAAC;AAEb,eAAe,mBAAmB,CAAC","sourcesContent":["import { createContext } from 'react';\n\nimport type { DraggableItem } from '../Draggable';\n\nconst DragDropListContext = createContext<\n  | {\n      keyboardReorderItem: (itemId: DraggableItem['id'], direction: 'prev' | 'next') => void;\n    }\n  | undefined\n>(undefined);\n\nexport default DragDropListContext;\n"]}

package/lib/components/DragDropManager/DragDropManager.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DragDropManager.d.ts","sourceRoot":"","sources":["../../../src/components/DragDropManager/DragDropManager.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAI1D,MAAM,WAAW,oBAAoB;IACnC,QAAQ,EAAE,SAAS,CAAC;IACpB,WAAW,CAAC,EAAE,IAAI,CAAC;CACpB;AAED,QAAA,MAAM,eAAe,EAAE,iBAAiB,CAAC,oBAAoB,CAS5D,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"DragDropManager.d.ts","sourceRoot":"","sources":["../../../src/components/DragDropManager/DragDropManager.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAK1D,MAAM,WAAW,oBAAoB;IACnC,QAAQ,EAAE,SAAS,CAAC;IACpB,WAAW,CAAC,EAAE,IAAI,CAAC;CACpB;AAED,QAAA,MAAM,eAAe,EAAE,iBAAiB,CAAC,oBAAoB,CAkB5D,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/lib/components/DragDropManager/DragDropManager.js

@@ -1,8 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
 import { DndProvider } from 'react-dnd';
-import { HTML5Backend } from 'react-dnd-html5-backend';
+import { MultiBackend } from 'react-dnd-multi-backend';
+import { HTML5toTouch } from 'rdndmb-html5-to-touch';
 const DragDropManager = ({ children, rootElement }) => {
-    return (_jsx(DndProvider, { backend: HTML5Backend, options: { rootElement }, children: children }));
+    const options = useMemo(() => ({
+        backends: [...HTML5toTouch.backends].map(backend => backend.id === 'html5' ? { ...backend, options: { rootElement } } : backend)
+    }), [rootElement]);
+    return (_jsx(DndProvider, { backend: MultiBackend, options: options, children: children }));
 };
 export default DragDropManager;
 //# sourceMappingURL=DragDropManager.js.map

package/lib/components/DragDropManager/DragDropManager.js.map

@@ -1 +1 @@
-{"version":3,"file":"DragDropManager.js","sourceRoot":"","sources":["../../../src/components/DragDropManager/DragDropManager.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AACxC,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAOvD,MAAM,eAAe,GAA4C,CAAC,EAChE,QAAQ,EACR,WAAW,EACU,EAAE,EAAE;IACzB,OAAO,CACL,KAAC,WAAW,IAAC,OAAO,EAAE,YAAY,EAAE,OAAO,EAAE,EAAE,WAAW,EAAE,YACzD,QAAQ,GACG,CACf,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,eAAe,CAAC","sourcesContent":["import type { FunctionComponent, ReactNode } from 'react';\nimport { DndProvider } from 'react-dnd';\nimport { HTML5Backend } from 'react-dnd-html5-backend';\n\nexport interface DragDropManagerProps {\n  children: ReactNode;\n  rootElement?: Node;\n}\n\nconst DragDropManager: FunctionComponent<DragDropManagerProps> = ({\n  children,\n  rootElement\n}: DragDropManagerProps) => {\n  return (\n    <DndProvider backend={HTML5Backend} options={{ rootElement }}>\n      {children}\n    </DndProvider>\n  );\n};\n\nexport default DragDropManager;\n"]}
+{"version":3,"file":"DragDropManager.js","sourceRoot":"","sources":["../../../src/components/DragDropManager/DragDropManager.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEhC,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AACxC,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AACvD,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAOrD,MAAM,eAAe,GAA4C,CAAC,EAChE,QAAQ,EACR,WAAW,EACU,EAAE,EAAE;IACzB,MAAM,OAAO,GAAG,OAAO,CACrB,GAAG,EAAE,CAAC,CAAC;QACL,QAAQ,EAAE,CAAC,GAAG,YAAY,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CACjD,OAAO,CAAC,EAAE,KAAK,OAAO,CAAC,CAAC,CAAC,EAAE,GAAG,OAAO,EAAE,OAAO,EAAE,EAAE,WAAW,EAAE,EAAE,CAAC,CAAC,CAAC,OAAO,CAC5E;KACF,CAAC,EACF,CAAC,WAAW,CAAC,CACd,CAAC;IAEF,OAAO,CACL,KAAC,WAAW,IAAC,OAAO,EAAE,YAAY,EAAE,OAAO,EAAE,OAAO,YACjD,QAAQ,GACG,CACf,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,eAAe,CAAC","sourcesContent":["import { useMemo } from 'react';\nimport type { FunctionComponent, ReactNode } from 'react';\nimport { DndProvider } from 'react-dnd';\nimport { MultiBackend } from 'react-dnd-multi-backend';\nimport { HTML5toTouch } from 'rdndmb-html5-to-touch';\n\nexport interface DragDropManagerProps {\n  children: ReactNode;\n  rootElement?: Node;\n}\n\nconst DragDropManager: FunctionComponent<DragDropManagerProps> = ({\n  children,\n  rootElement\n}: DragDropManagerProps) => {\n  const options = useMemo(\n    () => ({\n      backends: [...HTML5toTouch.backends].map(backend =>\n        backend.id === 'html5' ? { ...backend, options: { rootElement } } : backend\n      )\n    }),\n    [rootElement]\n  );\n\n  return (\n    <DndProvider backend={MultiBackend} options={options}>\n      {children}\n    </DndProvider>\n  );\n};\n\nexport default DragDropManager;\n"]}

package/lib/components/DragHandle/DragHandle.d.ts

@@ -0,0 +1,13 @@
+import { type Ref } from 'react';
+import type { DraggableItem } from '../Draggable';
+export interface DragHandleProps {
+    /** The id of the item, used to keep track of the row when reordering */
+    itemId: DraggableItem['id'];
+    /** The label or name of the actual item being dragged, used for accessibility */
+    contextualLabel?: string;
+    /** Ref to the button element */
+    ref?: Ref<HTMLButtonElement>;
+}
+declare const DragHandle: import("react").ForwardRefExoticComponent<Omit<DragHandleProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+export default DragHandle;
+//# sourceMappingURL=DragHandle.d.ts.map

package/lib/components/DragHandle/DragHandle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DragHandle.d.ts","sourceRoot":"","sources":["../../../src/components/DragHandle/DragHandle.tsx"],"names":[],"mappings":"AAAA,OAAO,EAOL,KAAK,GAAG,EACT,MAAM,OAAO,CAAC;AAYf,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAElD,MAAM,WAAW,eAAe;IAC9B,wEAAwE;IACxE,MAAM,EAAE,aAAa,CAAC,IAAI,CAAC,CAAC;IAC5B,iFAAiF;IACjF,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,gCAAgC;IAChC,GAAG,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAC;CAC9B;AAED,QAAA,MAAM,UAAU,4HAiEf,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/lib/components/DragHandle/DragHandle.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useContext, useEffect, useState } from 'react';
+import { Icon, Button, useI18n, useUID, VisuallyHiddenText } from '@pega/cosmos-react-core';
+import DragDropListContext from '../DragDropList/DragDropListContext';
+const DragHandle = forwardRef(({ itemId, contextualLabel }, ref) => {
+    const [grabbed, setGrabbed] = useState(false);
+    const context = useContext(DragDropListContext);
+    const descriptionId = useUID();
+    const t = useI18n();
+    const handleKeyDown = (e) => {
+        // Limit preventDefault and stopPropagation to these codes to not interfere with tab key behavior
+        if (e.code === 'Space' || e.code === 'ArrowUp' || e.code === 'ArrowDown') {
+            e.preventDefault();
+            e.stopPropagation();
+        }
+        if (e.code === 'Space') {
+            setGrabbed(prev => !prev);
+        }
+        else if (grabbed && context?.keyboardReorderItem)
+            if (e.code === 'ArrowUp') {
+                context.keyboardReorderItem(itemId, 'prev');
+            }
+            else if (e.code === 'ArrowDown') {
+                context.keyboardReorderItem(itemId, 'next');
+            }
+    };
+    useEffect(() => {
+        if (!grabbed)
+            return;
+        const removeGrabbed = () => {
+            setGrabbed(false);
+        };
+        document.addEventListener('dragend', removeGrabbed);
+        return () => {
+            document.removeEventListener('dragend', removeGrabbed);
+        };
+    }, [grabbed]);
+    return (_jsxs(Button, { label: t('drag'), "aria-label": contextualLabel ? `${t('drag')} - ${contextualLabel}` : undefined, "aria-describedby": descriptionId, ref: ref, icon: true, variant: 'simple', "aria-grabbed": grabbed, onKeyDown: handleKeyDown, onMouseDown: () => {
+            setGrabbed(true);
+        }, onMouseUp: () => {
+            setGrabbed(false);
+        }, onBlur: () => {
+            setGrabbed(false);
+        }, children: [_jsx(Icon, { name: 'drag' }), _jsx(VisuallyHiddenText, { id: descriptionId, "aria-hidden": true, children: t('drag_handle_description') })] }));
+});
+export default DragHandle;
+//# sourceMappingURL=DragHandle.js.map

package/lib/components/DragHandle/DragHandle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DragHandle.js","sourceRoot":"","sources":["../../../src/components/DragHandle/DragHandle.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,UAAU,EACV,UAAU,EACV,SAAS,EACT,QAAQ,EAIT,MAAM,OAAO,CAAC;AAEf,OAAO,EACL,IAAI,EACJ,MAAM,EACN,OAAO,EACP,MAAM,EACN,kBAAkB,EAEnB,MAAM,yBAAyB,CAAC;AAEjC,OAAO,mBAAmB,MAAM,qCAAqC,CAAC;AAYtE,MAAM,UAAU,GAAG,UAAU,CAC3B,CAAC,EAAE,MAAM,EAAE,eAAe,EAAE,EAAE,GAAG,EAAE,EAAE;IACnC,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC9C,MAAM,OAAO,GAAG,UAAU,CAAC,mBAAmB,CAAC,CAAC;IAChD,MAAM,aAAa,GAAG,MAAM,EAAE,CAAC;IAC/B,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,MAAM,aAAa,GAAG,CAAC,CAAmC,EAAE,EAAE;QAC5D,iGAAiG;QACjG,IAAI,CAAC,CAAC,IAAI,KAAK,OAAO,IAAI,CAAC,CAAC,IAAI,KAAK,SAAS,IAAI,CAAC,CAAC,IAAI,KAAK,WAAW,EAAE;YACxE,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,CAAC,CAAC,eAAe,EAAE,CAAC;SACrB;QAED,IAAI,CAAC,CAAC,IAAI,KAAK,OAAO,EAAE;YACtB,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC;SAC3B;aAAM,IAAI,OAAO,IAAI,OAAO,EAAE,mBAAmB;YAChD,IAAI,CAAC,CAAC,IAAI,KAAK,SAAS,EAAE;gBACxB,OAAO,CAAC,mBAAmB,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;aAC7C;iBAAM,IAAI,CAAC,CAAC,IAAI,KAAK,WAAW,EAAE;gBACjC,OAAO,CAAC,mBAAmB,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;aAC7C;IACL,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,OAAO;YAAE,OAAO;QAErB,MAAM,aAAa,GAAG,GAAG,EAAE;YACzB,UAAU,CAAC,KAAK,CAAC,CAAC;QACpB,CAAC,CAAC;QAEF,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;QAEpD,OAAO,GAAG,EAAE;YACV,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;QACzD,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,OAAO,CACL,MAAC,MAAM,IACL,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,gBACJ,eAAe,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,MAAM,eAAe,EAAE,CAAC,CAAC,CAAC,SAAS,sBAC3D,aAAa,EAC/B,GAAG,EAAE,GAAG,EACR,IAAI,QACJ,OAAO,EAAC,QAAQ,kBACF,OAAO,EACrB,SAAS,EAAE,aAAa,EACxB,WAAW,EAAE,GAAG,EAAE;YAChB,UAAU,CAAC,IAAI,CAAC,CAAC;QACnB,CAAC,EACD,SAAS,EAAE,GAAG,EAAE;YACd,UAAU,CAAC,KAAK,CAAC,CAAC;QACpB,CAAC,EACD,MAAM,EAAE,GAAG,EAAE;YACX,UAAU,CAAC,KAAK,CAAC,CAAC;QACpB,CAAC,aAED,KAAC,IAAI,IAAC,IAAI,EAAC,MAAM,GAAG,EACpB,KAAC,kBAAkB,IAAC,EAAE,EAAE,aAAa,iCAClC,CAAC,CAAC,yBAAyB,CAAC,GACV,IACd,CACV,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,UAAU,CAAC","sourcesContent":["import {\n  forwardRef,\n  useContext,\n  useEffect,\n  useState,\n  type KeyboardEvent,\n  type PropsWithoutRef,\n  type Ref\n} from 'react';\n\nimport {\n  Icon,\n  Button,\n  useI18n,\n  useUID,\n  VisuallyHiddenText,\n  type RefElement\n} from '@pega/cosmos-react-core';\n\nimport DragDropListContext from '../DragDropList/DragDropListContext';\nimport type { DraggableItem } from '../Draggable';\n\nexport interface DragHandleProps {\n  /** The id of the item, used to keep track of the row when reordering */\n  itemId: DraggableItem['id'];\n  /** The label or name of the actual item being dragged, used for accessibility */\n  contextualLabel?: string;\n  /** Ref to the button element */\n  ref?: Ref<HTMLButtonElement>;\n}\n\nconst DragHandle = forwardRef<RefElement<DragHandleProps>, PropsWithoutRef<DragHandleProps>>(\n  ({ itemId, contextualLabel }, ref) => {\n    const [grabbed, setGrabbed] = useState(false);\n    const context = useContext(DragDropListContext);\n    const descriptionId = useUID();\n    const t = useI18n();\n\n    const handleKeyDown = (e: KeyboardEvent<HTMLButtonElement>) => {\n      // Limit preventDefault and stopPropagation to these codes to not interfere with tab key behavior\n      if (e.code === 'Space' || e.code === 'ArrowUp' || e.code === 'ArrowDown') {\n        e.preventDefault();\n        e.stopPropagation();\n      }\n\n      if (e.code === 'Space') {\n        setGrabbed(prev => !prev);\n      } else if (grabbed && context?.keyboardReorderItem)\n        if (e.code === 'ArrowUp') {\n          context.keyboardReorderItem(itemId, 'prev');\n        } else if (e.code === 'ArrowDown') {\n          context.keyboardReorderItem(itemId, 'next');\n        }\n    };\n\n    useEffect(() => {\n      if (!grabbed) return;\n\n      const removeGrabbed = () => {\n        setGrabbed(false);\n      };\n\n      document.addEventListener('dragend', removeGrabbed);\n\n      return () => {\n        document.removeEventListener('dragend', removeGrabbed);\n      };\n    }, [grabbed]);\n\n    return (\n      <Button\n        label={t('drag')}\n        aria-label={contextualLabel ? `${t('drag')} - ${contextualLabel}` : undefined}\n        aria-describedby={descriptionId}\n        ref={ref}\n        icon\n        variant='simple'\n        aria-grabbed={grabbed}\n        onKeyDown={handleKeyDown}\n        onMouseDown={() => {\n          setGrabbed(true);\n        }}\n        onMouseUp={() => {\n          setGrabbed(false);\n        }}\n        onBlur={() => {\n          setGrabbed(false);\n        }}\n      >\n        <Icon name='drag' />\n        <VisuallyHiddenText id={descriptionId} aria-hidden>\n          {t('drag_handle_description')}\n        </VisuallyHiddenText>\n      </Button>\n    );\n  }\n);\n\nexport default DragHandle;\n"]}

package/lib/components/DragHandle/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './DragHandle';
+export type { DragHandleProps } from './DragHandle';
+//# sourceMappingURL=index.d.ts.map

package/lib/components/DragHandle/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DragHandle/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC"}

package/lib/components/DragHandle/index.js

@@ -0,0 +1,2 @@
+export { default } from './DragHandle';
+//# sourceMappingURL=index.js.map

package/lib/components/DragHandle/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/DragHandle/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC","sourcesContent":["export { default } from './DragHandle';\nexport type { DragHandleProps } from './DragHandle';\n"]}

package/lib/components/StandardDragDropList/StandardDragDropList.d.ts

@@ -2,7 +2,7 @@ import type { FunctionComponent } from 'react';
 import type { ForwardProps } from '@pega/cosmos-react-core';
 import type { StandardDragDropListProps } from './StandardDragDropList.types';
 declare const _default: FunctionComponent<StandardDragDropListProps & ForwardProps> & {
-    getTestIds: (testIdProp?: string | undefined) => import("@pega/cosmos-react-core").TestIdsRecord<readonly ["header"]>;
+    getTestIds: (testIdProp?: string | null | undefined) => import("@pega/cosmos-react-core").TestIdsRecord<readonly ["header"]>;
 };
 export default _default;
 //# sourceMappingURL=StandardDragDropList.d.ts.map

package/lib/components/StandardDragDropList/StandardDragDropList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StandardDragDropList.d.ts","sourceRoot":"","sources":["../../../src/components/StandardDragDropList/StandardDragDropList.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAA+B,MAAM,OAAO,CAAC;AAiB5E,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAoB5D,OAAO,KAAK,EACV,yBAAyB,EAE1B,MAAM,8BAA8B,CAAC;;;;AA+YtC,wBAAiF"}
+{"version":3,"file":"StandardDragDropList.d.ts","sourceRoot":"","sources":["../../../src/components/StandardDragDropList/StandardDragDropList.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAA+B,MAAM,OAAO,CAAC;AAkB5E,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAsB5D,OAAO,KAAK,EACV,yBAAyB,EAE1B,MAAM,8BAA8B,CAAC;;;;AAibtC,wBAAiF"}

package/lib/components/StandardDragDropList/StandardDragDropList.js

@@ -1,17 +1,20 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useCallback, useMemo, useRef, useState } from 'react';
-import { Flex, registerIcon, Icon, Text, Button, useI18n, EmptyState, ExpandCollapse, useUID, Tooltip, useElement, useTestIds, withTestIds } from '@pega/cosmos-react-core';
+import { Flex, registerIcon, Icon, Text, Button, useI18n, EmptyState, ExpandCollapse, useUID, Tooltip, useElement, useTestIds, withTestIds, AdditionalInfo } from '@pega/cosmos-react-core';
 import * as DragIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/drag.icon';
 import * as PlusIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/plus.icon';
 import * as CaretDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-down.icon';
+import * as FlagWaveSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/flag-wave-solid.icon';
+import * as WarnSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/warn-solid.icon';
 import DragDropList from '../DragDropList';
-import { StyledStandardDragDropList, StyledStandardDragDropListItem, StyledDragHandle, StyledExpandCollapseToggle, StyledItemActions, StyledItemContent, StyledItemStatus, StyledListItemInner, StyledSecondary } from './StandardDragDropList.styles';
+import { StyledStandardDragDropList, StyledStandardDragDropListItem, StyledDragHandle, StyledExpandCollapseToggle, StyledItemActions, StyledItemContent, StyledItemStatus, StyledSecondary, StyledListItemInner } from './StandardDragDropList.styles';
 import { getItemRendererTestIds, getStandardDragDropListTestIds } from './StandardDragDropList.test-ids';
-registerIcon(DragIcon, PlusIcon, CaretDownIcon);
+registerIcon(DragIcon, PlusIcon, CaretDownIcon, FlagWaveSolidIcon, WarnSolidIcon);
 let StandardDragDropList;
 const ItemStatus = ({ message, type }) => {
     const [ttt, setTTT] = useElement(null);
-    return (_jsx(StyledItemStatus, { "aria-live": 'polite', role: 'status', children: message && (_jsx(Text, { variant: 'secondary', status: 'error', children: _jsxs(Flex, { container: { gap: 0.5 }, children: [_jsx(Icon, { ref: setTTT, name: 'warn-solid', role: 'status', tabIndex: 0, "aria-label": type }), _jsx(Tooltip, { target: ttt, "aria-hidden": true, showDelay: 'none', hideDelay: 'none', children: message })] }) })) }));
+    const iconName = type === 'warning' ? 'flag-wave-solid' : 'warn-solid';
+    return (_jsx(StyledItemStatus, { "aria-live": 'polite', role: 'status', children: message && (_jsx(Text, { variant: 'secondary', status: type, children: _jsxs(Flex, { container: { gap: 0.5 }, children: [_jsx(Icon, { ref: setTTT, name: iconName, role: 'status', tabIndex: 0, "aria-label": type }), _jsx(Tooltip, { target: ttt, "aria-hidden": true, showDelay: 'none', hideDelay: 'none', children: message })] }) })) }));
 };
 const getFlattenedIds = (items) => {
     return items.flatMap(item => {
@@ -20,7 +23,7 @@ const getFlattenedIds = (items) => {
 };
 const ItemRenderer = ({ testId, dragRef, previewRef, isDragging, data: { id, 
 // Remove type for DOM restProps
-type, accept, primary, secondary, draggable = true, status, items, onConfigure, onRemove, onAddTo, onChange, ...restProps }, data }) => {
+type, accept, primary, secondary, draggable = true, status, items, icon, onConfigure, onRemove, onAddTo, onChange, ...restProps }, data }) => {
     const t = useI18n();
     const [collapsed, setCollapsed] = useState(false);
     const expandCollpaseId = useUID();
@@ -28,14 +31,14 @@ type, accept, primary, secondary, draggable = true, status, items, onConfigure,
     const hasActions = !!(onConfigure ?? onRemove ?? onAddTo);
     const primaryEl = useMemo(() => {
         if (items) {
-            return (_jsx(StyledExpandCollapseToggle, { "data-testid": testIds.expandCollapseButton, variant: 'text', "aria-label": `${primary}. ${collapsed ? t('expand') : t('collapse')}.`, onClick: () => setCollapsed(cur => !cur), "aria-owns": expandCollpaseId, "aria-expanded": collapsed ? 'false' : 'true', children: _jsxs(Flex, { container: { inline: true, alignItems: 'center', gap: 0.5 }, children: [_jsx(Icon, { name: 'caret-down' }), _jsx("span", { children: primary })] }) }));
+            return (_jsx(StyledExpandCollapseToggle, { "data-testid": testIds.expandCollapseButton, variant: 'text', "aria-label": `${primary}. ${collapsed ? t('expand') : t('collapse')}.`, onClick: () => setCollapsed(cur => !cur), "aria-owns": expandCollpaseId, "aria-expanded": collapsed ? 'false' : 'true', children: _jsxs(Flex, { container: { inline: true, alignItems: 'center', gap: 0.5 }, children: [_jsx(Icon, { name: 'caret-down' }), icon && _jsx(Icon, { "data-testid": testIds.icon, ...icon, size: 's' }), _jsx("span", { children: primary })] }) }));
         }
         if (typeof primary === 'string') {
             return _jsx("span", { children: primary });
         }
         return (_jsx(Button, { variant: 'link', onClick: primary.onClick, href: primary.href, children: _jsx("span", { children: primary.text }) }));
     }, [t, items, primary, collapsed, expandCollpaseId]);
-    return (_jsxs(Flex, { "data-testid": testIds.root, ...restProps, container: { direction: 'column' }, as: StyledStandardDragDropListItem, ref: previewRef, isDragging: isDragging, children: [_jsxs(Flex, { container: { alignItems: 'center' }, as: StyledListItemInner, children: [draggable && (_jsx(StyledDragHandle, { ref: dragRef, "data-testid": testIds.dragHandle, children: _jsx(Icon, { name: 'drag' }) })), _jsx(Flex, { container: { alignItems: 'center', gap: 0.5 }, item: { grow: 1 }, children: _jsxs(Flex, { container: { alignItems: 'center', gap: status ? 0.5 : undefined, pad: 0.25 }, item: { grow: 1 }, as: StyledItemContent, children: [_jsx(ItemStatus, { type: status?.type, message: status?.message }), primaryEl] }) }), (secondary || hasActions) && (_jsxs(Flex, { container: { alignItems: 'center', gap: 0.5 }, children: [secondary && _jsx(StyledSecondary, { variant: 'secondary', children: secondary }), hasActions && (_jsxs(Flex, { container: { alignItems: 'center', gap: 0.5 }, as: StyledItemActions, children: [onAddTo && (_jsx("span", { children: _jsx(Button, { "data-testid": testIds.addButton, icon: true, variant: 'simple', label: t('add'), onClick: (e) => {
+    return (_jsxs(Flex, { "data-testid": testIds.root, ...restProps, container: { direction: 'column' }, as: StyledStandardDragDropListItem, ref: previewRef, isDragging: isDragging, hasActions: hasActions, children: [_jsxs(Flex, { container: { alignItems: 'center' }, as: StyledListItemInner, isDraggable: draggable, hasActions: hasActions, hasVisual: !!status || !!icon, children: [draggable && (_jsx(StyledDragHandle, { ref: dragRef, hasVisual: !!status || !!icon, "data-testid": testIds.dragHandle, children: _jsx(Icon, { name: 'drag' }) })), _jsx(Flex, { container: { alignItems: 'center', gap: 0.5 }, item: { grow: 1 }, children: _jsxs(Flex, { container: { alignItems: 'center', gap: status || icon ? 1 : undefined, pad: 0.25 }, item: { grow: 1 }, as: StyledItemContent, children: [_jsx(ItemStatus, { type: status?.type, message: status?.message }), icon && !items && _jsx(Icon, { "data-testid": testIds.icon, ...icon, size: 's' }), primaryEl] }) }), (secondary || hasActions) && (_jsxs(Flex, { container: { alignItems: 'center', gap: 0.5 }, children: [secondary && _jsx(StyledSecondary, { variant: 'secondary', children: secondary }), hasActions && (_jsxs(Flex, { container: { alignItems: 'center', gap: 0.5 }, as: StyledItemActions, children: [onAddTo && (_jsx("span", { children: _jsx(Button, { "data-testid": testIds.addButton, icon: true, variant: 'simple', label: t('add'), onClick: (e) => {
                                                 onAddTo?.(id, e);
                                             }, children: _jsx(Icon, { name: 'plus' }) }) })), onConfigure && (_jsx("span", { children: _jsx(Button, { "data-testid": testIds.configureButton, icon: true, variant: 'simple', label: t('configure'), onClick: (e) => {
                                                 onConfigure?.(id, e);
@@ -44,7 +47,7 @@ type, accept, primary, secondary, draggable = true, status, items, onConfigure,
                                             }, children: _jsx(Icon, { name: 'trash' }) }) }))] }))] }))] }), data.items && data.items.length > 0 && (_jsx(ExpandCollapse, { collapsed: collapsed, id: expandCollpaseId, children: _jsx(StandardDragDropList, { accept: data.accept, items: data.items, onChange: data.onChange }) }))] }));
 };
 const ItemRendererWithTestIds = withTestIds(ItemRenderer, getItemRendererTestIds);
-StandardDragDropList = forwardRef(function StandardDragDropListFunction({ testId, accept, items: itemsProp, heading: title, footer, onChange: onChangeProp, pushMode, pullMode, headingTag = 'h2', ...restProps }, ref) {
+StandardDragDropList = forwardRef(function StandardDragDropListFunction({ testId, accept, items: itemsProp, heading: title, footer, onChange: onChangeProp, pushMode, pullMode, headingTag = 'h2', additionalInfo, ...restProps }, ref) {
     const flatIds = useMemo(() => getFlattenedIds(itemsProp), [itemsProp]);
     const timerRef = useRef();
     const newItemsRef = useRef();
@@ -67,11 +70,11 @@ StandardDragDropList = forwardRef(function StandardDragDropListFunction({ testId
                     return;
                 // The duplicate was top level before.
                 if (itemsProp.some(({ id }) => id === duplicateItemId)) {
-                    onChangeProp(itemsWithDuplicate.filter(({ id }) => id !== duplicateItemId));
+                    onChangeProp?.(itemsWithDuplicate.filter(({ id }) => id !== duplicateItemId));
                 }
                 // The duplicate was nested before.
                 else {
-                    onChangeProp(itemsWithDuplicate.map(innerItem => {
+                    onChangeProp?.(itemsWithDuplicate.map(innerItem => {
                         if (!innerItem.items)
                             return innerItem;
                         if (itemsProp
@@ -88,14 +91,14 @@ StandardDragDropList = forwardRef(function StandardDragDropListFunction({ testId
             }
             else {
                 // Failsafe for two unrelated change events within 100ms.
-                onChangeProp(refedItems);
-                onChangeProp(newItems);
+                onChangeProp?.(refedItems);
+                onChangeProp?.(newItems);
             }
         }
         else {
             newItemsRef.current = newItems;
             timerRef.current = window.setTimeout(() => {
-                onChangeProp(newItems);
+                onChangeProp?.(newItems);
             }, 100);
         }
     }, [onChangeProp, itemsProp]);
@@ -103,7 +106,10 @@ StandardDragDropList = forwardRef(function StandardDragDropListFunction({ testId
         const newItem = {
             id: item.id,
             type: item.type,
-            data: item
+            data: {
+                ...item,
+                draggable: item.draggable && !!onChangeProp
+            }
         };
         if (!item.items)
             return newItem;
@@ -112,20 +118,23 @@ StandardDragDropList = forwardRef(function StandardDragDropListFunction({ testId
             data: {
                 ...item,
                 accept: item.accept ?? accept,
-                onChange: (newItems) => {
-                    const newContentItems = itemsProp.map(topLevelItem => topLevelItem.id === item.id && topLevelItem.items
-                        ? { ...topLevelItem, items: newItems }
-                        : topLevelItem);
-                    const flatNewItems = getFlattenedIds(newContentItems);
-                    if (itemsProp.some(propItem => !!propItem.items) &&
-                        flatIds.length !== flatNewItems.length) {
-                        // An item may be "removed" or "duplicated".
-                        mergeChangeHandler(newContentItems);
-                    }
-                    else {
-                        onChangeProp(newContentItems);
+                draggable: item.draggable && !!onChangeProp,
+                onChange: onChangeProp
+                    ? (newItems) => {
+                        const newContentItems = itemsProp.map(topLevelItem => topLevelItem.id === item.id && topLevelItem.items
+                            ? { ...topLevelItem, items: newItems }
+                            : topLevelItem);
+                        const flatNewItems = getFlattenedIds(newContentItems);
+                        if (itemsProp.some(propItem => !!propItem.items) &&
+                            flatIds.length !== flatNewItems.length) {
+                            // An item may be "removed" or "duplicated".
+                            mergeChangeHandler(newContentItems);
+                        }
+                        else {
+                            onChangeProp(newContentItems);
+                        }
                     }
-                }
+                    : undefined
             }
         };
     }), [accept, itemsProp, onChangeProp, flatIds, mergeChangeHandler]);
@@ -139,15 +148,16 @@ StandardDragDropList = forwardRef(function StandardDragDropListFunction({ testId
             mergeChangeHandler(newContentItems);
         }
         else {
-            onChangeProp(newContentItems);
+            onChangeProp?.(newContentItems);
         }
     }, [onChangeProp, flatIds, mergeChangeHandler]);
-    return (_jsxs(StyledStandardDragDropList, { ref: ref, ...restProps, children: [title && (_jsx(Flex, { "data-testid": testIds.header, container: {
+    const heading = title ? _jsx(Text, { variant: headingTag, children: title }) : null;
+    return (_jsxs(StyledStandardDragDropList, { ref: ref, ...restProps, children: [heading && (_jsx(Flex, { "data-testid": testIds.header, container: {
                     justify: 'between',
                     alignItems: 'center',
                     gap: 1,
                     pad: 1
-                }, as: 'header', children: _jsx(Text, { variant: headingTag, children: title }) })), _jsx(DragDropList, { testId: testId, accept: accept, items: itemsToRender, pushMode: pushMode, pullMode: pullMode, itemRenderer: ItemRendererWithTestIds, emptyRenderer: EmptyState, onChange: onChange }), footer && (_jsx(Flex, { container: {
+                }, as: 'header', children: additionalInfo ? (_jsxs(Flex, { container: true, children: [heading, _jsx(AdditionalInfo, { heading: additionalInfo.heading ?? title, children: additionalInfo.content })] })) : (heading) })), _jsx(DragDropList, { testId: testId, accept: accept, items: itemsToRender, pushMode: pushMode, pullMode: pullMode, itemRenderer: ItemRendererWithTestIds, emptyRenderer: EmptyState, onChange: onChange }), footer && (_jsx(Flex, { container: {
                     alignItems: 'center',
                     itemGap: 1,
                     pad: 1

package/lib/components/StandardDragDropList/StandardDragDropList.js.map

@@ -1 +1 @@
-{"version":3,"file":"StandardDragDropList.js","sourceRoot":"","sources":["../../../src/components/StandardDragDropList/StandardDragDropList.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useCallback, useMemo, useRef, useState } from 'react';\nimport type { FunctionComponent, MouseEvent, PropsWithoutRef } from 'react';\n\nimport {\n  Flex,\n  registerIcon,\n  Icon,\n  Text,\n  Button,\n  useI18n,\n  EmptyState,\n  ExpandCollapse,\n  useUID,\n  Tooltip,\n  useElement,\n  useTestIds,\n  withTestIds\n} from '@pega/cosmos-react-core';\nimport type { ForwardProps } from '@pega/cosmos-react-core';\nimport * as DragIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/drag.icon';\nimport * as PlusIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/plus.icon';\nimport * as CaretDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-down.icon';\n\nimport DragDropList from '../DragDropList';\nimport type { ItemRendererProps } from '../DragDropList';\nimport type { DraggableItem } from '../Draggable';\n\nimport {\n  StyledStandardDragDropList,\n  StyledStandardDragDropListItem,\n  StyledDragHandle,\n  StyledExpandCollapseToggle,\n  StyledItemActions,\n  StyledItemContent,\n  StyledItemStatus,\n  StyledListItemInner,\n  StyledSecondary\n} from './StandardDragDropList.styles';\nimport type {\n  StandardDragDropListProps,\n  StandardDragDropListItemProps\n} from './StandardDragDropList.types';\nimport {\n  getItemRendererTestIds,\n  getStandardDragDropListTestIds\n} from './StandardDragDropList.test-ids';\n\nregisterIcon(DragIcon, PlusIcon, CaretDownIcon);\n\ntype InternalStandardDragDropListItemProps = StandardDragDropListItemProps &\n  (\n    | {\n        items: StandardDragDropListItemProps[];\n        accept: StandardDragDropListProps['accept'];\n        onChange: StandardDragDropListProps['onChange'];\n      }\n    | {\n        items?: undefined;\n        accept?: never;\n        onChange?: never;\n      }\n  );\n\nlet StandardDragDropList: FunctionComponent<StandardDragDropListProps & ForwardProps>;\n\nconst ItemStatus = ({\n  message,\n  type\n}: Partial<NonNullable<StandardDragDropListItemProps['status']>>) => {\n  const [ttt, setTTT] = useElement(null);\n\n  return (\n    <StyledItemStatus aria-live='polite' role='status'>\n      {message && (\n        <Text variant='secondary' status='error'>\n          <Flex container={{ gap: 0.5 }}>\n            <Icon ref={setTTT} name='warn-solid' role='status' tabIndex={0} aria-label={type} />\n            <Tooltip target={ttt} aria-hidden showDelay='none' hideDelay='none'>\n              {message}\n            </Tooltip>\n          </Flex>\n        </Text>\n      )}\n    </StyledItemStatus>\n  );\n};\n\nconst getFlattenedIds = (\n  items: StandardDragDropListItemProps[]\n): StandardDragDropListItemProps['id'][] => {\n  return items.flatMap(item => {\n    return item.items ? [item.id, ...item.items.map(({ id }) => id)] : [item.id];\n  });\n};\n\nconst ItemRenderer = ({\n  testId,\n  dragRef,\n  previewRef,\n  isDragging,\n  data: {\n    id,\n    // Remove type for DOM restProps\n    type,\n    accept,\n    primary,\n    secondary,\n    draggable = true,\n    status,\n    items,\n    onConfigure,\n    onRemove,\n    onAddTo,\n    onChange,\n    ...restProps\n  },\n  data\n}: ItemRendererProps<InternalStandardDragDropListItemProps>) => {\n  const t = useI18n();\n  const [collapsed, setCollapsed] = useState(false);\n  const expandCollpaseId = useUID();\n  const testIds = useTestIds(testId, getItemRendererTestIds);\n\n  const hasActions = !!(onConfigure ?? onRemove ?? onAddTo);\n\n  const primaryEl = useMemo(() => {\n    if (items) {\n      return (\n        <StyledExpandCollapseToggle\n          data-testid={testIds.expandCollapseButton}\n          variant='text'\n          aria-label={`${primary}. ${collapsed ? t('expand') : t('collapse')}.`}\n          onClick={() => setCollapsed(cur => !cur)}\n          aria-owns={expandCollpaseId}\n          aria-expanded={collapsed ? 'false' : 'true'}\n        >\n          <Flex container={{ inline: true, alignItems: 'center', gap: 0.5 }}>\n            <Icon name='caret-down' />\n            <span>{primary}</span>\n          </Flex>\n        </StyledExpandCollapseToggle>\n      );\n    }\n\n    if (typeof primary === 'string') {\n      return <span>{primary}</span>;\n    }\n\n    return (\n      <Button variant='link' onClick={primary.onClick} href={primary.href}>\n        <span>{primary.text}</span>\n      </Button>\n    );\n  }, [t, items, primary, collapsed, expandCollpaseId]);\n\n  return (\n    <Flex\n      data-testid={testIds.root}\n      {...restProps}\n      container={{ direction: 'column' }}\n      as={StyledStandardDragDropListItem}\n      ref={previewRef}\n      isDragging={isDragging}\n    >\n      <Flex container={{ alignItems: 'center' }} as={StyledListItemInner}>\n        {draggable && (\n          <StyledDragHandle ref={dragRef} data-testid={testIds.dragHandle}>\n            <Icon name='drag' />\n          </StyledDragHandle>\n        )}\n\n        <Flex container={{ alignItems: 'center', gap: 0.5 }} item={{ grow: 1 }}>\n          <Flex\n            container={{ alignItems: 'center', gap: status ? 0.5 : undefined, pad: 0.25 }}\n            item={{ grow: 1 }}\n            as={StyledItemContent}\n          >\n            <ItemStatus type={status?.type} message={status?.message} />\n\n            {primaryEl}\n          </Flex>\n        </Flex>\n\n        {(secondary || hasActions) && (\n          <Flex container={{ alignItems: 'center', gap: 0.5 }}>\n            {secondary && <StyledSecondary variant='secondary'>{secondary}</StyledSecondary>}\n\n            {hasActions && (\n              <Flex container={{ alignItems: 'center', gap: 0.5 }} as={StyledItemActions}>\n                {onAddTo && (\n                  <span>\n                    <Button\n                      data-testid={testIds.addButton}\n                      icon\n                      variant='simple'\n                      label={t('add')}\n                      onClick={(e: MouseEvent<HTMLButtonElement>) => {\n                        onAddTo?.(id, e);\n                      }}\n                    >\n                      <Icon name='plus' />\n                    </Button>\n                  </span>\n                )}\n\n                {onConfigure && (\n                  <span>\n                    <Button\n                      data-testid={testIds.configureButton}\n                      icon\n                      variant='simple'\n                      label={t('configure')}\n                      onClick={(e: MouseEvent<HTMLButtonElement>) => {\n                        onConfigure?.(id, e);\n                      }}\n                    >\n                      <Icon name='gear' />\n                    </Button>\n                  </span>\n                )}\n\n                {onRemove && (\n                  <span>\n                    <Button\n                      data-testid={testIds.removeButton}\n                      icon\n                      variant='simple'\n                      label={t('remove')}\n                      onClick={(e: MouseEvent<HTMLButtonElement>) => {\n                        onRemove?.(id, e);\n                      }}\n                    >\n                      <Icon name='trash' />\n                    </Button>\n                  </span>\n                )}\n              </Flex>\n            )}\n          </Flex>\n        )}\n      </Flex>\n\n      {/* Using data here so TS can track conditional type. */}\n      {data.items && data.items.length > 0 && (\n        <ExpandCollapse collapsed={collapsed} id={expandCollpaseId}>\n          <StandardDragDropList accept={data.accept} items={data.items} onChange={data.onChange} />\n        </ExpandCollapse>\n      )}\n    </Flex>\n  );\n};\n\nconst ItemRendererWithTestIds = withTestIds(ItemRenderer, getItemRendererTestIds);\n\nStandardDragDropList = forwardRef(function StandardDragDropListFunction(\n  {\n    testId,\n    accept,\n    items: itemsProp,\n    heading: title,\n    footer,\n    onChange: onChangeProp,\n    pushMode,\n    pullMode,\n    headingTag = 'h2',\n    ...restProps\n  }: PropsWithoutRef<StandardDragDropListProps>,\n  ref: StandardDragDropListProps['ref']\n) {\n  const flatIds = useMemo(() => getFlattenedIds(itemsProp), [itemsProp]);\n\n  const timerRef = useRef<number>();\n  const newItemsRef = useRef<StandardDragDropListItemProps[]>();\n\n  const testIds = useTestIds(testId, getStandardDragDropListTestIds);\n\n  const mergeChangeHandler = useCallback(\n    (newItems: StandardDragDropListItemProps[]) => {\n      if (typeof timerRef.current === 'number' && newItemsRef.current) {\n        clearTimeout(timerRef.current);\n        timerRef.current = undefined;\n        const refedItems = newItemsRef.current;\n        newItemsRef.current = undefined;\n\n        const reffedItemsCount = getFlattenedIds(refedItems).length;\n        const newItemsCount = getFlattenedIds(newItems).length;\n\n        // Item moved between the top level list and nested list.\n        if (Math.abs(reffedItemsCount - newItemsCount) === 2) {\n          const itemsWithDuplicate = reffedItemsCount > newItemsCount ? refedItems : newItems;\n\n          const flatItemsWithDuplicate = getFlattenedIds(itemsWithDuplicate);\n\n          const duplicateItemId = flatItemsWithDuplicate.find(\n            (id, idx) => flatItemsWithDuplicate.indexOf(id) !== idx\n          );\n\n          // Should never happen.\n          if (!duplicateItemId) return;\n\n          // The duplicate was top level before.\n          if (itemsProp.some(({ id }) => id === duplicateItemId)) {\n            onChangeProp(itemsWithDuplicate.filter(({ id }) => id !== duplicateItemId));\n          }\n\n          // The duplicate was nested before.\n          else {\n            onChangeProp(\n              itemsWithDuplicate.map(innerItem => {\n                if (!innerItem.items) return innerItem;\n\n                if (\n                  itemsProp\n                    .find(({ id }) => id === innerItem.id)\n                    ?.items?.some(({ id: subItemId }) => subItemId === duplicateItemId)\n                ) {\n                  return {\n                    ...innerItem,\n                    items: innerItem.items.filter(({ id }) => id !== duplicateItemId)\n                  };\n                }\n\n                return innerItem;\n              })\n            );\n          }\n        } else {\n          // Failsafe for two unrelated change events within 100ms.\n          onChangeProp(refedItems);\n          onChangeProp(newItems);\n        }\n      } else {\n        newItemsRef.current = newItems;\n        timerRef.current = window.setTimeout(() => {\n          onChangeProp(newItems);\n        }, 100);\n      }\n    },\n    [onChangeProp, itemsProp]\n  );\n\n  const itemsToRender: DraggableItem<InternalStandardDragDropListItemProps>[] = useMemo(\n    () =>\n      itemsProp.map(item => {\n        const newItem = {\n          id: item.id,\n          type: item.type,\n          data: item as InternalStandardDragDropListItemProps\n        };\n        if (!item.items) return newItem;\n\n        return {\n          ...newItem,\n          data: {\n            ...item,\n            accept: item.accept ?? accept,\n            onChange: (newItems: InternalStandardDragDropListItemProps[]) => {\n              const newContentItems = itemsProp.map(topLevelItem =>\n                topLevelItem.id === item.id && topLevelItem.items\n                  ? { ...topLevelItem, items: newItems }\n                  : topLevelItem\n              );\n\n              const flatNewItems = getFlattenedIds(newContentItems);\n\n              if (\n                itemsProp.some(propItem => !!propItem.items) &&\n                flatIds.length !== flatNewItems.length\n              ) {\n                // An item may be \"removed\" or \"duplicated\".\n                mergeChangeHandler(newContentItems);\n              } else {\n                onChangeProp(newContentItems);\n              }\n            }\n          } as InternalStandardDragDropListItemProps\n        };\n      }),\n    [accept, itemsProp, onChangeProp, flatIds, mergeChangeHandler]\n  );\n\n  const onChange = useCallback(\n    (newItems: DraggableItem<InternalStandardDragDropListItemProps>[]) => {\n      const newContentItems = newItems.map(({ data: { onChange: _, ...data } }) => {\n        return data;\n      });\n      const flatNewItems = getFlattenedIds(newContentItems);\n\n      if (itemsProp.some(propItem => !!propItem.items) && flatIds.length !== flatNewItems.length) {\n        // An item may be \"removed\" or \"duplicated\".\n        mergeChangeHandler(newContentItems);\n      } else {\n        onChangeProp(newContentItems);\n      }\n    },\n    [onChangeProp, flatIds, mergeChangeHandler]\n  );\n\n  return (\n    <StyledStandardDragDropList ref={ref} {...restProps}>\n      {title && (\n        <Flex\n          data-testid={testIds.header}\n          container={{\n            justify: 'between',\n            alignItems: 'center',\n            gap: 1,\n            pad: 1\n          }}\n          as='header'\n        >\n          <Text variant={headingTag}>{title}</Text>\n        </Flex>\n      )}\n      <DragDropList\n        testId={testId}\n        accept={accept}\n        items={itemsToRender}\n        pushMode={pushMode}\n        pullMode={pullMode}\n        itemRenderer={ItemRendererWithTestIds}\n        emptyRenderer={EmptyState}\n        onChange={onChange}\n      />\n      {footer && (\n        <Flex\n          container={{\n            alignItems: 'center',\n            itemGap: 1,\n            pad: 1\n          }}\n          as='footer'\n        >\n          {footer}\n        </Flex>\n      )}\n    </StyledStandardDragDropList>\n  );\n});\n\nexport default withTestIds(StandardDragDropList, getStandardDragDropListTestIds);\n"]}
+{"version":3,"file":"StandardDragDropList.js","sourceRoot":"","sources":["../../../src/components/StandardDragDropList/StandardDragDropList.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useCallback, useMemo, useRef, useState } from 'react';\nimport type { FunctionComponent, MouseEvent, PropsWithoutRef } from 'react';\n\nimport {\n  Flex,\n  registerIcon,\n  Icon,\n  Text,\n  Button,\n  useI18n,\n  EmptyState,\n  ExpandCollapse,\n  useUID,\n  Tooltip,\n  useElement,\n  useTestIds,\n  withTestIds,\n  AdditionalInfo\n} from '@pega/cosmos-react-core';\nimport type { ForwardProps } from '@pega/cosmos-react-core';\nimport * as DragIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/drag.icon';\nimport * as PlusIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/plus.icon';\nimport * as CaretDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-down.icon';\nimport * as FlagWaveSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/flag-wave-solid.icon';\nimport * as WarnSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/warn-solid.icon';\n\nimport DragDropList from '../DragDropList';\nimport type { ItemRendererProps } from '../DragDropList';\nimport type { DraggableItem } from '../Draggable';\n\nimport {\n  StyledStandardDragDropList,\n  StyledStandardDragDropListItem,\n  StyledDragHandle,\n  StyledExpandCollapseToggle,\n  StyledItemActions,\n  StyledItemContent,\n  StyledItemStatus,\n  StyledSecondary,\n  StyledListItemInner\n} from './StandardDragDropList.styles';\nimport type {\n  StandardDragDropListProps,\n  StandardDragDropListItemProps\n} from './StandardDragDropList.types';\nimport {\n  getItemRendererTestIds,\n  getStandardDragDropListTestIds\n} from './StandardDragDropList.test-ids';\n\nregisterIcon(DragIcon, PlusIcon, CaretDownIcon, FlagWaveSolidIcon, WarnSolidIcon);\n\ntype InternalStandardDragDropListItemProps = StandardDragDropListItemProps &\n  (\n    | {\n        items: StandardDragDropListItemProps[];\n        accept: StandardDragDropListProps['accept'];\n        onChange: StandardDragDropListProps['onChange'];\n      }\n    | {\n        items?: undefined;\n        accept?: never;\n        onChange?: never;\n      }\n  );\n\nlet StandardDragDropList: FunctionComponent<StandardDragDropListProps & ForwardProps>;\n\nconst ItemStatus = ({\n  message,\n  type\n}: Partial<NonNullable<StandardDragDropListItemProps['status']>>) => {\n  const [ttt, setTTT] = useElement(null);\n  const iconName = type === 'warning' ? 'flag-wave-solid' : 'warn-solid';\n\n  return (\n    <StyledItemStatus aria-live='polite' role='status'>\n      {message && (\n        <Text variant='secondary' status={type}>\n          <Flex container={{ gap: 0.5 }}>\n            <Icon ref={setTTT} name={iconName} role='status' tabIndex={0} aria-label={type} />\n            <Tooltip target={ttt} aria-hidden showDelay='none' hideDelay='none'>\n              {message}\n            </Tooltip>\n          </Flex>\n        </Text>\n      )}\n    </StyledItemStatus>\n  );\n};\n\nconst getFlattenedIds = (\n  items: StandardDragDropListItemProps[]\n): StandardDragDropListItemProps['id'][] => {\n  return items.flatMap(item => {\n    return item.items ? [item.id, ...item.items.map(({ id }) => id)] : [item.id];\n  });\n};\n\nconst ItemRenderer = ({\n  testId,\n  dragRef,\n  previewRef,\n  isDragging,\n  data: {\n    id,\n    // Remove type for DOM restProps\n    type,\n    accept,\n    primary,\n    secondary,\n    draggable = true,\n    status,\n    items,\n    icon,\n    onConfigure,\n    onRemove,\n    onAddTo,\n    onChange,\n    ...restProps\n  },\n  data\n}: ItemRendererProps<InternalStandardDragDropListItemProps>) => {\n  const t = useI18n();\n  const [collapsed, setCollapsed] = useState(false);\n  const expandCollpaseId = useUID();\n  const testIds = useTestIds(testId, getItemRendererTestIds);\n\n  const hasActions = !!(onConfigure ?? onRemove ?? onAddTo);\n\n  const primaryEl = useMemo(() => {\n    if (items) {\n      return (\n        <StyledExpandCollapseToggle\n          data-testid={testIds.expandCollapseButton}\n          variant='text'\n          aria-label={`${primary}. ${collapsed ? t('expand') : t('collapse')}.`}\n          onClick={() => setCollapsed(cur => !cur)}\n          aria-owns={expandCollpaseId}\n          aria-expanded={collapsed ? 'false' : 'true'}\n        >\n          <Flex container={{ inline: true, alignItems: 'center', gap: 0.5 }}>\n            <Icon name='caret-down' />\n            {icon && <Icon data-testid={testIds.icon} {...icon} size='s' />}\n            <span>{primary}</span>\n          </Flex>\n        </StyledExpandCollapseToggle>\n      );\n    }\n\n    if (typeof primary === 'string') {\n      return <span>{primary}</span>;\n    }\n\n    return (\n      <Button variant='link' onClick={primary.onClick} href={primary.href}>\n        <span>{primary.text}</span>\n      </Button>\n    );\n  }, [t, items, primary, collapsed, expandCollpaseId]);\n\n  return (\n    <Flex\n      data-testid={testIds.root}\n      {...restProps}\n      container={{ direction: 'column' }}\n      as={StyledStandardDragDropListItem}\n      ref={previewRef}\n      isDragging={isDragging}\n      hasActions={hasActions}\n    >\n      <Flex\n        container={{ alignItems: 'center' }}\n        as={StyledListItemInner}\n        isDraggable={draggable}\n        hasActions={hasActions}\n        hasVisual={!!status || !!icon}\n      >\n        {draggable && (\n          <StyledDragHandle\n            ref={dragRef}\n            hasVisual={!!status || !!icon}\n            data-testid={testIds.dragHandle}\n          >\n            <Icon name='drag' />\n          </StyledDragHandle>\n        )}\n\n        <Flex container={{ alignItems: 'center', gap: 0.5 }} item={{ grow: 1 }}>\n          <Flex\n            container={{ alignItems: 'center', gap: status || icon ? 1 : undefined, pad: 0.25 }}\n            item={{ grow: 1 }}\n            as={StyledItemContent}\n          >\n            <ItemStatus type={status?.type} message={status?.message} />\n            {icon && !items && <Icon data-testid={testIds.icon} {...icon} size='s' />}\n\n            {primaryEl}\n          </Flex>\n        </Flex>\n\n        {(secondary || hasActions) && (\n          <Flex container={{ alignItems: 'center', gap: 0.5 }}>\n            {secondary && <StyledSecondary variant='secondary'>{secondary}</StyledSecondary>}\n\n            {hasActions && (\n              <Flex container={{ alignItems: 'center', gap: 0.5 }} as={StyledItemActions}>\n                {onAddTo && (\n                  <span>\n                    <Button\n                      data-testid={testIds.addButton}\n                      icon\n                      variant='simple'\n                      label={t('add')}\n                      onClick={(e: MouseEvent<HTMLButtonElement>) => {\n                        onAddTo?.(id, e);\n                      }}\n                    >\n                      <Icon name='plus' />\n                    </Button>\n                  </span>\n                )}\n\n                {onConfigure && (\n                  <span>\n                    <Button\n                      data-testid={testIds.configureButton}\n                      icon\n                      variant='simple'\n                      label={t('configure')}\n                      onClick={(e: MouseEvent<HTMLButtonElement>) => {\n                        onConfigure?.(id, e);\n                      }}\n                    >\n                      <Icon name='gear' />\n                    </Button>\n                  </span>\n                )}\n\n                {onRemove && (\n                  <span>\n                    <Button\n                      data-testid={testIds.removeButton}\n                      icon\n                      variant='simple'\n                      label={t('remove')}\n                      onClick={(e: MouseEvent<HTMLButtonElement>) => {\n                        onRemove?.(id, e);\n                      }}\n                    >\n                      <Icon name='trash' />\n                    </Button>\n                  </span>\n                )}\n              </Flex>\n            )}\n          </Flex>\n        )}\n      </Flex>\n\n      {/* Using data here so TS can track conditional type. */}\n      {data.items && data.items.length > 0 && (\n        <ExpandCollapse collapsed={collapsed} id={expandCollpaseId}>\n          <StandardDragDropList accept={data.accept} items={data.items} onChange={data.onChange} />\n        </ExpandCollapse>\n      )}\n    </Flex>\n  );\n};\n\nconst ItemRendererWithTestIds = withTestIds(ItemRenderer, getItemRendererTestIds);\n\nStandardDragDropList = forwardRef(function StandardDragDropListFunction(\n  {\n    testId,\n    accept,\n    items: itemsProp,\n    heading: title,\n    footer,\n    onChange: onChangeProp,\n    pushMode,\n    pullMode,\n    headingTag = 'h2',\n    additionalInfo,\n    ...restProps\n  }: PropsWithoutRef<StandardDragDropListProps>,\n  ref: StandardDragDropListProps['ref']\n) {\n  const flatIds = useMemo(() => getFlattenedIds(itemsProp), [itemsProp]);\n\n  const timerRef = useRef<number>();\n  const newItemsRef = useRef<StandardDragDropListItemProps[]>();\n\n  const testIds = useTestIds(testId, getStandardDragDropListTestIds);\n\n  const mergeChangeHandler = useCallback(\n    (newItems: StandardDragDropListItemProps[]) => {\n      if (typeof timerRef.current === 'number' && newItemsRef.current) {\n        clearTimeout(timerRef.current);\n        timerRef.current = undefined;\n        const refedItems = newItemsRef.current;\n        newItemsRef.current = undefined;\n\n        const reffedItemsCount = getFlattenedIds(refedItems).length;\n        const newItemsCount = getFlattenedIds(newItems).length;\n\n        // Item moved between the top level list and nested list.\n        if (Math.abs(reffedItemsCount - newItemsCount) === 2) {\n          const itemsWithDuplicate = reffedItemsCount > newItemsCount ? refedItems : newItems;\n\n          const flatItemsWithDuplicate = getFlattenedIds(itemsWithDuplicate);\n\n          const duplicateItemId = flatItemsWithDuplicate.find(\n            (id, idx) => flatItemsWithDuplicate.indexOf(id) !== idx\n          );\n\n          // Should never happen.\n          if (!duplicateItemId) return;\n\n          // The duplicate was top level before.\n          if (itemsProp.some(({ id }) => id === duplicateItemId)) {\n            onChangeProp?.(itemsWithDuplicate.filter(({ id }) => id !== duplicateItemId));\n          }\n\n          // The duplicate was nested before.\n          else {\n            onChangeProp?.(\n              itemsWithDuplicate.map(innerItem => {\n                if (!innerItem.items) return innerItem;\n\n                if (\n                  itemsProp\n                    .find(({ id }) => id === innerItem.id)\n                    ?.items?.some(({ id: subItemId }) => subItemId === duplicateItemId)\n                ) {\n                  return {\n                    ...innerItem,\n                    items: innerItem.items.filter(({ id }) => id !== duplicateItemId)\n                  };\n                }\n\n                return innerItem;\n              })\n            );\n          }\n        } else {\n          // Failsafe for two unrelated change events within 100ms.\n          onChangeProp?.(refedItems);\n          onChangeProp?.(newItems);\n        }\n      } else {\n        newItemsRef.current = newItems;\n        timerRef.current = window.setTimeout(() => {\n          onChangeProp?.(newItems);\n        }, 100);\n      }\n    },\n    [onChangeProp, itemsProp]\n  );\n\n  const itemsToRender: DraggableItem<InternalStandardDragDropListItemProps>[] = useMemo(\n    () =>\n      itemsProp.map(item => {\n        const newItem = {\n          id: item.id,\n          type: item.type,\n          data: {\n            ...item,\n            draggable: item.draggable && !!onChangeProp\n          } as InternalStandardDragDropListItemProps\n        };\n        if (!item.items) return newItem;\n\n        return {\n          ...newItem,\n          data: {\n            ...item,\n            accept: item.accept ?? accept,\n            draggable: item.draggable && !!onChangeProp,\n            onChange: onChangeProp\n              ? (newItems: InternalStandardDragDropListItemProps[]) => {\n                  const newContentItems = itemsProp.map(topLevelItem =>\n                    topLevelItem.id === item.id && topLevelItem.items\n                      ? { ...topLevelItem, items: newItems }\n                      : topLevelItem\n                  );\n\n                  const flatNewItems = getFlattenedIds(newContentItems);\n\n                  if (\n                    itemsProp.some(propItem => !!propItem.items) &&\n                    flatIds.length !== flatNewItems.length\n                  ) {\n                    // An item may be \"removed\" or \"duplicated\".\n                    mergeChangeHandler(newContentItems);\n                  } else {\n                    onChangeProp(newContentItems);\n                  }\n                }\n              : undefined\n          } as InternalStandardDragDropListItemProps\n        };\n      }),\n    [accept, itemsProp, onChangeProp, flatIds, mergeChangeHandler]\n  );\n\n  const onChange = useCallback(\n    (newItems: DraggableItem<InternalStandardDragDropListItemProps>[]) => {\n      const newContentItems = newItems.map(({ data: { onChange: _, ...data } }) => {\n        return data;\n      });\n      const flatNewItems = getFlattenedIds(newContentItems);\n\n      if (itemsProp.some(propItem => !!propItem.items) && flatIds.length !== flatNewItems.length) {\n        // An item may be \"removed\" or \"duplicated\".\n        mergeChangeHandler(newContentItems);\n      } else {\n        onChangeProp?.(newContentItems);\n      }\n    },\n    [onChangeProp, flatIds, mergeChangeHandler]\n  );\n\n  const heading = title ? <Text variant={headingTag}>{title}</Text> : null;\n\n  return (\n    <StyledStandardDragDropList ref={ref} {...restProps}>\n      {heading && (\n        <Flex\n          data-testid={testIds.header}\n          container={{\n            justify: 'between',\n            alignItems: 'center',\n            gap: 1,\n            pad: 1\n          }}\n          as='header'\n        >\n          {additionalInfo ? (\n            <Flex container>\n              {heading}\n              {/* Can assert title when heading is defined */}\n              <AdditionalInfo heading={additionalInfo.heading ?? title!}>\n                {additionalInfo.content}\n              </AdditionalInfo>\n            </Flex>\n          ) : (\n            heading\n          )}\n        </Flex>\n      )}\n      <DragDropList\n        testId={testId}\n        accept={accept}\n        items={itemsToRender}\n        pushMode={pushMode}\n        pullMode={pullMode}\n        itemRenderer={ItemRendererWithTestIds}\n        emptyRenderer={EmptyState}\n        onChange={onChange}\n      />\n      {footer && (\n        <Flex\n          container={{\n            alignItems: 'center',\n            itemGap: 1,\n            pad: 1\n          }}\n          as='footer'\n        >\n          {footer}\n        </Flex>\n      )}\n    </StyledStandardDragDropList>\n  );\n});\n\nexport default withTestIds(StandardDragDropList, getStandardDragDropListTestIds);\n"]}

package/lib/components/StandardDragDropList/StandardDragDropList.styles.d.ts

@@ -2,11 +2,17 @@
 import { Button } from '@pega/cosmos-react-core';
 export declare const StyledExpandCollapseToggle: typeof Button;
 export declare const StyledItemStatus: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledDragHandle: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledDragHandle: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    hasVisual: boolean;
+}, never>;
 export declare const StyledItemContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledItemActions: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledSecondary: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").TextProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledListItemInner: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledListItemInner: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    isDraggable?: boolean | undefined;
+    hasActions?: boolean | undefined;
+    hasVisual?: boolean | undefined;
+}, never>;
 export declare const StyledStandardDragDropListItem: import("styled-components").StyledComponent<"li", import("styled-components").DefaultTheme, {
     isDragging?: boolean | undefined;
     empty?: boolean | undefined;

package/lib/components/StandardDragDropList/StandardDragDropList.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StandardDragDropList.styles.d.ts","sourceRoot":"","sources":["../../../src/components/StandardDragDropList/StandardDragDropList.styles.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,MAAM,EAAoD,MAAM,yBAAyB,CAAC;AAEnG,eAAO,MAAM,0BAA0B,EAAE,OAAO,MAe9C,CAAC;AAEH,eAAO,MAAM,gBAAgB,yGAU3B,CAAC;AAIH,eAAO,MAAM,gBAAgB,yGAM5B,CAAC;AAIF,eAAO,MAAM,iBAAiB,yGAK7B,CAAC;AAIF,eAAO,MAAM,iBAAiB,yGAAe,CAAC;AAC9C,eAAO,MAAM,eAAe,mOAAiB,CAAC;AAE9C,eAAO,MAAM,mBAAmB,yGAK9B,CAAC;AAIH,eAAO,MAAM,8BAA8B;;;SAkE1C,CAAC;AAIF,eAAO,MAAM,0BAA0B,yGAqBrC,CAAC"}
+{"version":3,"file":"StandardDragDropList.styles.d.ts","sourceRoot":"","sources":["../../../src/components/StandardDragDropList/StandardDragDropList.styles.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,MAAM,EAAoD,MAAM,yBAAyB,CAAC;AAEnG,eAAO,MAAM,0BAA0B,EAAE,OAAO,MAe9C,CAAC;AAEH,eAAO,MAAM,gBAAgB,yGAU3B,CAAC;AAIH,eAAO,MAAM,gBAAgB;eAA2B,OAAO;SAY7D,CAAC;AAIH,eAAO,MAAM,iBAAiB,yGAK7B,CAAC;AAIF,eAAO,MAAM,iBAAiB,yGAAe,CAAC;AAC9C,eAAO,MAAM,eAAe,mOAAiB,CAAC;AAE9C,eAAO,MAAM,mBAAmB;;;;SAuB9B,CAAC;AAIH,eAAO,MAAM,8BAA8B;;;SAmEzC,CAAC;AAIH,eAAO,MAAM,0BAA0B,yGAqBrC,CAAC"}

package/lib/components/StandardDragDropList/StandardDragDropList.styles.js

@@ -11,7 +11,7 @@ export const StyledExpandCollapseToggle = styled(Button)(({ theme }) => {
       transition: transform ${theme.base.animation.speed} ${theme.base.animation.timing.ease};
     }
 
-    &[aria-expanded='false'] ${StyledIcon} {
+    &[aria-expanded='false'] ${StyledIcon}:first-of-type {
       transform: rotateZ(${ltr ? '-' : ''}90deg);
     }
   `;
@@ -28,13 +28,19 @@ export const StyledItemStatus = styled.div(({ theme }) => {
   `;
 });
 StyledItemStatus.defaultProps = defaultThemeProp;
-export const StyledDragHandle = styled.div `
-  padding: 0 ${({ theme }) => theme.base.spacing} 0 0;
-  cursor: move;
-  > svg {
-    display: block;
-  }
-`;
+export const StyledDragHandle = styled.div(({ hasVisual, theme }) => {
+    return css `
+    padding-inline-end: ${!hasVisual &&
+        css `
+      ${theme.base.spacing};
+    `};
+    cursor: move;
+
+    > svg {
+      display: block;
+    }
+  `;
+});
 StyledDragHandle.defaultProps = defaultThemeProp;
 export const StyledItemContent = styled.div `
   & > :nth-child(2) {
@@ -45,10 +51,24 @@ export const StyledItemContent = styled.div `
 StyledItemContent.defaultProps = defaultThemeProp;
 export const StyledItemActions = styled.div ``;
 export const StyledSecondary = styled(Text) ``;
-export const StyledListItemInner = styled.div(({ theme }) => {
+export const StyledListItemInner = styled.div(({ theme, isDraggable, hasActions, hasVisual }) => {
     return css `
-    padding-inline: calc(${theme.base.spacing} / 2);
     white-space: nowrap;
+    padding-inline-start: calc(${theme.base.spacing} / 2);
+    padding-inline-end: ${hasActions
+        ? `calc(${theme.base.spacing} / 2)`
+        : `calc(${theme.base.spacing} * 1.5)`};
+
+    ${!isDraggable &&
+        !hasVisual &&
+        css `
+      padding-inline-start: ${theme.base.spacing};
+    `}
+    ${hasVisual &&
+        !isDraggable &&
+        css `
+      padding-inline-start: 0;
+    `}
   `;
 });
 StyledListItemInner.defaultProps = defaultThemeProp;
@@ -57,63 +77,63 @@ export const StyledStandardDragDropListItem = styled.li(({ theme, isDragging, em
     const bdr = `0.0625rem dashed ${isDragging || empty ? bdrColor : 'transparent'}`;
     if (empty) {
         return css `
-        text-align: center;
-        padding: ${theme.base.spacing};
-        border: ${bdr};
-        font-style: italic;
-      `;
+      text-align: center;
+      padding: ${theme.base.spacing};
+      border: ${bdr};
+      font-style: italic;
+    `;
     }
     return css `
-      position: relative;
-      background: ${theme.base.palette['primary-background']};
+    position: relative;
+    background: ${theme.base.palette['primary-background']};
 
-      ${isDragging &&
+    ${isDragging &&
         css `
-        z-index: 1;
-
-        & > div,
-        span {
-          opacity: 0.5;
-        }
-      `}
+      z-index: 1;
 
-      &::before,
-      &::after {
-        content: '';
-        display: block;
-        position: absolute;
-        height: 0.0625rem;
-        left: 0;
-        right: 0;
-        background: ${isDragging ? theme.base.palette['primary-background'] : bdrColor};
+      & > div,
+      span {
+        opacity: 0.5;
       }
+    `}
+
+    &::before,
+    &::after {
+      content: '';
+      display: block;
+      position: absolute;
+      height: 0.0625rem;
+      left: 0;
+      right: 0;
+      background: ${isDragging ? theme.base.palette['primary-background'] : bdrColor};
+    }
 
-      &::before {
-        top: 0;
-        border-top: ${bdr};
-        ${isDragging &&
+    &::before {
+      top: 0;
+      border-top: ${bdr};
+      ${isDragging &&
         css `
-          box-shadow: 0 0.0625rem 0 ${theme.base.palette.interactive};
-        `}
-      }
+        box-shadow: 0 0.0625rem 0 ${theme.base.palette.interactive};
+      `}
+    }
 
-      &::after {
-        bottom: -0.0625rem;
-        border-bottom: ${bdr};
-        ${isDragging &&
+    &::after {
+      bottom: -0.0625rem;
+      border-bottom: ${bdr};
+      ${isDragging &&
         css `
-          box-shadow: 0 -0.0625rem 0 ${theme.base.palette.interactive};
-        `}
-      }
+        box-shadow: 0 -0.0625rem 0 ${theme.base.palette.interactive};
+      `}
+    }
 
-      & > ${StyledListItemInner} {
-        min-height: calc(${theme.base['hit-area'].mouse} + ${theme.base.spacing});
+    & > ${StyledListItemInner} {
+      min-height: calc(${theme.base['hit-area'].mouse} + ${theme.base.spacing});
 
-        @media (pointer: coarse) {
-          min-height: calc(${theme.base['hit-area']['finger-min']} + ${theme.base.spacing});
-        }
+      @media (pointer: coarse) {
+        min-height: calc(${theme.base['hit-area']['finger-min']} + ${theme.base.spacing});
       }
-    `;
+    }
+  `;
 });
 StyledStandardDragDropListItem.defaultProps = defaultThemeProp;
 export const StyledStandardDragDropList = styled.div(({ theme }) => {

package/lib/components/StandardDragDropList/StandardDragDropList.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"StandardDragDropList.styles.js","sourceRoot":"","sources":["../../../src/components/StandardDragDropList/StandardDragDropList.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { Button, defaultThemeProp, StyledIcon, Text, useDirection } from '@pega/cosmos-react-core';\n\nexport const StyledExpandCollapseToggle: typeof Button = styled(Button)(({ theme }) => {\n  const { ltr } = useDirection();\n  return css`\n    & > div {\n      vertical-align: middle;\n    }\n\n    & ${StyledIcon} {\n      transition: transform ${theme.base.animation.speed} ${theme.base.animation.timing.ease};\n    }\n\n    &[aria-expanded='false'] ${StyledIcon} {\n      transform: rotateZ(${ltr ? '-' : ''}90deg);\n    }\n  `;\n});\n\nexport const StyledItemStatus = styled.div(({ theme }) => {\n  return css`\n    ${StyledIcon} {\n      outline: none;\n\n      &:focus {\n        box-shadow: ${theme.base.shadow['focus-inset']};\n      }\n    }\n  `;\n});\n\nStyledItemStatus.defaultProps = defaultThemeProp;\n\nexport const StyledDragHandle = styled.div`\n  padding: 0 ${({ theme }) => theme.base.spacing} 0 0;\n  cursor: move;\n  > svg {\n    display: block;\n  }\n`;\n\nStyledDragHandle.defaultProps = defaultThemeProp;\n\nexport const StyledItemContent = styled.div`\n  & > :nth-child(2) {\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n`;\n\nStyledItemContent.defaultProps = defaultThemeProp;\n\nexport const StyledItemActions = styled.div``;\nexport const StyledSecondary = styled(Text)``;\n\nexport const StyledListItemInner = styled.div(({ theme }) => {\n  return css`\n    padding-inline: calc(${theme.base.spacing} / 2);\n    white-space: nowrap;\n  `;\n});\n\nStyledListItemInner.defaultProps = defaultThemeProp;\n\nexport const StyledStandardDragDropListItem = styled.li<{ isDragging?: boolean; empty?: boolean }>(\n  ({ theme, isDragging, empty }) => {\n    const bdrColor = theme.base.palette['border-line'];\n    const bdr = `0.0625rem dashed ${isDragging || empty ? bdrColor : 'transparent'}`;\n\n    if (empty) {\n      return css`\n        text-align: center;\n        padding: ${theme.base.spacing};\n        border: ${bdr};\n        font-style: italic;\n      `;\n    }\n\n    return css`\n      position: relative;\n      background: ${theme.base.palette['primary-background']};\n\n      ${isDragging &&\n      css`\n        z-index: 1;\n\n        & > div,\n        span {\n          opacity: 0.5;\n        }\n      `}\n\n      &::before,\n      &::after {\n        content: '';\n        display: block;\n        position: absolute;\n        height: 0.0625rem;\n        left: 0;\n        right: 0;\n        background: ${isDragging ? theme.base.palette['primary-background'] : bdrColor};\n      }\n\n      &::before {\n        top: 0;\n        border-top: ${bdr};\n        ${isDragging &&\n        css`\n          box-shadow: 0 0.0625rem 0 ${theme.base.palette.interactive};\n        `}\n      }\n\n      &::after {\n        bottom: -0.0625rem;\n        border-bottom: ${bdr};\n        ${isDragging &&\n        css`\n          box-shadow: 0 -0.0625rem 0 ${theme.base.palette.interactive};\n        `}\n      }\n\n      & > ${StyledListItemInner} {\n        min-height: calc(${theme.base['hit-area'].mouse} + ${theme.base.spacing});\n\n        @media (pointer: coarse) {\n          min-height: calc(${theme.base['hit-area']['finger-min']} + ${theme.base.spacing});\n        }\n      }\n    `;\n  }\n);\n\nStyledStandardDragDropListItem.defaultProps = defaultThemeProp;\n\nexport const StyledStandardDragDropList = styled.div(({ theme }) => {\n  return css`\n    flex-grow: 1;\n    background-color: ${theme.base.palette['primary-background']};\n\n    ul {\n      list-style: none;\n    }\n\n    & & {\n      padding-inline: calc(3.5 * ${theme.base.spacing}) 0;\n\n      ${StyledStandardDragDropListItem} {\n        &:last-child {\n          &::after {\n            display: none;\n          }\n        }\n      }\n    }\n  `;\n});\n\nStyledStandardDragDropList.defaultProps = defaultThemeProp;\n"]}
+{"version":3,"file":"StandardDragDropList.styles.js","sourceRoot":"","sources":["../../../src/components/StandardDragDropList/StandardDragDropList.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { Button, defaultThemeProp, StyledIcon, Text, useDirection } from '@pega/cosmos-react-core';\n\nexport const StyledExpandCollapseToggle: typeof Button = styled(Button)(({ theme }) => {\n  const { ltr } = useDirection();\n  return css`\n    & > div {\n      vertical-align: middle;\n    }\n\n    & ${StyledIcon} {\n      transition: transform ${theme.base.animation.speed} ${theme.base.animation.timing.ease};\n    }\n\n    &[aria-expanded='false'] ${StyledIcon}:first-of-type {\n      transform: rotateZ(${ltr ? '-' : ''}90deg);\n    }\n  `;\n});\n\nexport const StyledItemStatus = styled.div(({ theme }) => {\n  return css`\n    ${StyledIcon} {\n      outline: none;\n\n      &:focus {\n        box-shadow: ${theme.base.shadow['focus-inset']};\n      }\n    }\n  `;\n});\n\nStyledItemStatus.defaultProps = defaultThemeProp;\n\nexport const StyledDragHandle = styled.div<{ hasVisual: boolean }>(({ hasVisual, theme }) => {\n  return css`\n    padding-inline-end: ${!hasVisual &&\n    css`\n      ${theme.base.spacing};\n    `};\n    cursor: move;\n\n    > svg {\n      display: block;\n    }\n  `;\n});\n\nStyledDragHandle.defaultProps = defaultThemeProp;\n\nexport const StyledItemContent = styled.div`\n  & > :nth-child(2) {\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n`;\n\nStyledItemContent.defaultProps = defaultThemeProp;\n\nexport const StyledItemActions = styled.div``;\nexport const StyledSecondary = styled(Text)``;\n\nexport const StyledListItemInner = styled.div<{\n  isDraggable?: boolean;\n  hasActions?: boolean;\n  hasVisual?: boolean;\n}>(({ theme, isDraggable, hasActions, hasVisual }) => {\n  return css`\n    white-space: nowrap;\n    padding-inline-start: calc(${theme.base.spacing} / 2);\n    padding-inline-end: ${hasActions\n      ? `calc(${theme.base.spacing} / 2)`\n      : `calc(${theme.base.spacing} * 1.5)`};\n\n    ${!isDraggable &&\n    !hasVisual &&\n    css`\n      padding-inline-start: ${theme.base.spacing};\n    `}\n    ${hasVisual &&\n    !isDraggable &&\n    css`\n      padding-inline-start: 0;\n    `}\n  `;\n});\n\nStyledListItemInner.defaultProps = defaultThemeProp;\n\nexport const StyledStandardDragDropListItem = styled.li<{\n  isDragging?: boolean;\n  empty?: boolean;\n}>(({ theme, isDragging, empty }) => {\n  const bdrColor = theme.base.palette['border-line'];\n  const bdr = `0.0625rem dashed ${isDragging || empty ? bdrColor : 'transparent'}`;\n\n  if (empty) {\n    return css`\n      text-align: center;\n      padding: ${theme.base.spacing};\n      border: ${bdr};\n      font-style: italic;\n    `;\n  }\n\n  return css`\n    position: relative;\n    background: ${theme.base.palette['primary-background']};\n\n    ${isDragging &&\n    css`\n      z-index: 1;\n\n      & > div,\n      span {\n        opacity: 0.5;\n      }\n    `}\n\n    &::before,\n    &::after {\n      content: '';\n      display: block;\n      position: absolute;\n      height: 0.0625rem;\n      left: 0;\n      right: 0;\n      background: ${isDragging ? theme.base.palette['primary-background'] : bdrColor};\n    }\n\n    &::before {\n      top: 0;\n      border-top: ${bdr};\n      ${isDragging &&\n      css`\n        box-shadow: 0 0.0625rem 0 ${theme.base.palette.interactive};\n      `}\n    }\n\n    &::after {\n      bottom: -0.0625rem;\n      border-bottom: ${bdr};\n      ${isDragging &&\n      css`\n        box-shadow: 0 -0.0625rem 0 ${theme.base.palette.interactive};\n      `}\n    }\n\n    & > ${StyledListItemInner} {\n      min-height: calc(${theme.base['hit-area'].mouse} + ${theme.base.spacing});\n\n      @media (pointer: coarse) {\n        min-height: calc(${theme.base['hit-area']['finger-min']} + ${theme.base.spacing});\n      }\n    }\n  `;\n});\n\nStyledStandardDragDropListItem.defaultProps = defaultThemeProp;\n\nexport const StyledStandardDragDropList = styled.div(({ theme }) => {\n  return css`\n    flex-grow: 1;\n    background-color: ${theme.base.palette['primary-background']};\n\n    ul {\n      list-style: none;\n    }\n\n    & & {\n      padding-inline: calc(3.5 * ${theme.base.spacing}) 0;\n\n      ${StyledStandardDragDropListItem} {\n        &:last-child {\n          &::after {\n            display: none;\n          }\n        }\n      }\n    }\n  `;\n});\n\nStyledStandardDragDropList.defaultProps = defaultThemeProp;\n"]}

package/lib/components/StandardDragDropList/StandardDragDropList.test-ids.d.ts

@@ -1,3 +1,3 @@
-export declare const getItemRendererTestIds: (testIdProp?: string | undefined) => import("@pega/cosmos-react-core").TestIdsRecord<readonly ["expand-collapse-button", "add-button", "configure-button", "remove-button", "drag-handle"]>;
-export declare const getStandardDragDropListTestIds: (testIdProp?: string | undefined) => import("@pega/cosmos-react-core").TestIdsRecord<readonly ["header"]>;
+export declare const getItemRendererTestIds: (testIdProp?: string | null | undefined) => import("@pega/cosmos-react-core").TestIdsRecord<readonly ["expand-collapse-button", "add-button", "configure-button", "remove-button", "drag-handle", "icon"]>;
+export declare const getStandardDragDropListTestIds: (testIdProp?: string | null | undefined) => import("@pega/cosmos-react-core").TestIdsRecord<readonly ["header"]>;
 //# sourceMappingURL=StandardDragDropList.test-ids.d.ts.map

package/lib/components/StandardDragDropList/StandardDragDropList.test-ids.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StandardDragDropList.test-ids.d.ts","sourceRoot":"","sources":["../../../src/components/StandardDragDropList/StandardDragDropList.test-ids.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,sBAAsB,6LAMxB,CAAC;AAEZ,eAAO,MAAM,8BAA8B,2GAEhC,CAAC"}
+{"version":3,"file":"StandardDragDropList.test-ids.d.ts","sourceRoot":"","sources":["../../../src/components/StandardDragDropList/StandardDragDropList.test-ids.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,sBAAsB,4MAOxB,CAAC;AAEZ,eAAO,MAAM,8BAA8B,kHAEhC,CAAC"}

package/lib/components/StandardDragDropList/StandardDragDropList.test-ids.js

@@ -4,7 +4,8 @@ export const getItemRendererTestIds = createTestIds('standard-drag-drop-item', [
     'add-button',
     'configure-button',
     'remove-button',
-    'drag-handle'
+    'drag-handle',
+    'icon'
 ]);
 export const getStandardDragDropListTestIds = createTestIds('standard-drag-drop-list', [
     'header'

package/lib/components/StandardDragDropList/StandardDragDropList.test-ids.js.map

@@ -1 +1 @@
-{"version":3,"file":"StandardDragDropList.test-ids.js","sourceRoot":"","sources":["../../../src/components/StandardDragDropList/StandardDragDropList.test-ids.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAExD,MAAM,CAAC,MAAM,sBAAsB,GAAG,aAAa,CAAC,yBAAyB,EAAE;IAC7E,wBAAwB;IACxB,YAAY;IACZ,kBAAkB;IAClB,eAAe;IACf,aAAa;CACL,CAAC,CAAC;AAEZ,MAAM,CAAC,MAAM,8BAA8B,GAAG,aAAa,CAAC,yBAAyB,EAAE;IACrF,QAAQ;CACA,CAAC,CAAC","sourcesContent":["import { createTestIds } from '@pega/cosmos-react-core';\n\nexport const getItemRendererTestIds = createTestIds('standard-drag-drop-item', [\n  'expand-collapse-button',\n  'add-button',\n  'configure-button',\n  'remove-button',\n  'drag-handle'\n] as const);\n\nexport const getStandardDragDropListTestIds = createTestIds('standard-drag-drop-list', [\n  'header'\n] as const);\n"]}
+{"version":3,"file":"StandardDragDropList.test-ids.js","sourceRoot":"","sources":["../../../src/components/StandardDragDropList/StandardDragDropList.test-ids.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAExD,MAAM,CAAC,MAAM,sBAAsB,GAAG,aAAa,CAAC,yBAAyB,EAAE;IAC7E,wBAAwB;IACxB,YAAY;IACZ,kBAAkB;IAClB,eAAe;IACf,aAAa;IACb,MAAM;CACE,CAAC,CAAC;AAEZ,MAAM,CAAC,MAAM,8BAA8B,GAAG,aAAa,CAAC,yBAAyB,EAAE;IACrF,QAAQ;CACA,CAAC,CAAC","sourcesContent":["import { createTestIds } from '@pega/cosmos-react-core';\n\nexport const getItemRendererTestIds = createTestIds('standard-drag-drop-item', [\n  'expand-collapse-button',\n  'add-button',\n  'configure-button',\n  'remove-button',\n  'drag-handle',\n  'icon'\n] as const);\n\nexport const getStandardDragDropListTestIds = createTestIds('standard-drag-drop-list', [\n  'header'\n] as const);\n"]}

package/lib/components/StandardDragDropList/StandardDragDropList.types.d.ts

@@ -1,11 +1,16 @@
 import type { MouseEvent, MouseEventHandler, ReactNode, Ref } from 'react';
-import type { TestIdProp, OmitStrict, BaseProps, NoChildrenProp, ForwardProps, HeadingTag } from '@pega/cosmos-react-core';
+import type { TestIdProp, OmitStrict, BaseProps, NoChildrenProp, ForwardProps, HeadingTag, AdditionalInfoProps, IconProps } from '@pega/cosmos-react-core';
 import type { DragDropListProps } from '../DragDropList';
 export interface StandardDragDropListProps extends OmitStrict<DragDropListProps<StandardDragDropListItemProps>, 'dragHandles' | 'itemRenderer' | 'emptyRenderer' | 'items' | 'onChange'>, BaseProps, NoChildrenProp, TestIdProp {
     /** The contents of the list. */
     items: StandardDragDropListItemProps[];
     /** A title for the list. */
     heading?: string;
+    /** Renders a button that when clicked presents additional information for the list. */
+    additionalInfo?: {
+        heading?: AdditionalInfoProps['heading'];
+        content: AdditionalInfoProps['children'];
+    };
     /**
      * Select the heading tag for header
      * @default h2
@@ -17,7 +22,7 @@ export interface StandardDragDropListProps extends OmitStrict<DragDropListProps<
      * Called when the list's content changes by way of drag for reorder, add or remove.
      * The handler is provided an array of items representing the new state.
      */
-    onChange: (items: StandardDragDropListProps['items']) => void;
+    onChange?: (items: StandardDragDropListProps['items']) => void;
     /** A ref to the root HTMLElement for the component. */
     ref?: Ref<HTMLDivElement>;
 }
@@ -37,11 +42,13 @@ export type StandardDragDropListItemProps = ForwardProps & {
     secondary?: string;
     /** Presents the item as being in an invalidate state. */
     status?: {
-        type: 'error';
+        type: 'error' | 'warning';
         message: string;
     };
     /** Whether or not the item can be reordered with drag. */
     draggable?: boolean;
+    /** Defines the props of the icon passed to the list item */
+    icon?: OmitStrict<IconProps, 'size'>;
     /**
      * If the item is configurable pass a callback to render a button.
      * The item's id and an event argument provides access to the underlying HTMLButtonElement.

package/lib/components/StandardDragDropList/StandardDragDropList.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StandardDragDropList.types.d.ts","sourceRoot":"","sources":["../../../src/components/StandardDragDropList/StandardDragDropList.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,iBAAiB,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE3E,OAAO,KAAK,EACV,UAAU,EACV,UAAU,EACV,SAAS,EACT,cAAc,EACd,YAAY,EACZ,UAAU,EACX,MAAM,yBAAyB,CAAC;AAEjC,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAEzD,MAAM,WAAW,yBACf,SAAQ,UAAU,CACd,iBAAiB,CAAC,6BAA6B,CAAC,EAChD,aAAa,GAAG,cAAc,GAAG,eAAe,GAAG,OAAO,GAAG,UAAU,CACxE,EACD,SAAS,EACT,cAAc,EACd,UAAU;IACZ,gCAAgC;IAChC,KAAK,EAAE,6BAA6B,EAAE,CAAC;IACvC,4BAA4B;IAC5B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,8CAA8C;IAC9C,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;;OAGG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,yBAAyB,CAAC,OAAO,CAAC,KAAK,IAAI,CAAC;IAC9D,uDAAuD;IACvD,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,KAAK,UAAU,GAAG,CAChB,EAAE,EAAE,6BAA6B,CAAC,IAAI,CAAC,EACvC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAC7B,IAAI,CAAC;AAEV,MAAM,MAAM,6BAA6B,GAAG,YAAY,GAAG;IACzD,6DAA6D;IAC7D,EAAE,EAAE,MAAM,CAAC;IACX,mFAAmF;IACnF,IAAI,EAAE,MAAM,CAAC;IACb,wFAAwF;IACxF,OAAO,EAAE,MAAM,GAAG,CAAC;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,iBAAiB,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,YAAY,CAAC,CAAC;IAC/F,uEAAuE;IACvE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yDAAyD;IACzD,MAAM,CAAC,EAAE;QACP,IAAI,EAAE,OAAO,CAAC;QACd,OAAO,EAAE,MAAM,CAAC;KACjB,CAAC;IACF,0DAA0D;IAC1D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,WAAW,CAAC,EAAE,UAAU,CAAC;IACzB;;;OAGG;IACH,QAAQ,CAAC,EAAE,UAAU,CAAC;CACvB,GAAG,CACE;IACE,sDAAsD;IACtD,KAAK,EAAE,6BAA6B,EAAE,CAAC;IACvC,kHAAkH;IAClH,MAAM,CAAC,EAAE,yBAAyB,CAAC,QAAQ,CAAC,CAAC;IAC7C,6DAA6D;IAC7D,OAAO,CAAC,EAAE,UAAU,CAAC;CACtB,GACD;IACE,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,MAAM,CAAC,EAAE,KAAK,CAAC;IACf,OAAO,CAAC,EAAE,KAAK,CAAC;CACjB,CACJ,CAAC"}
+{"version":3,"file":"StandardDragDropList.types.d.ts","sourceRoot":"","sources":["../../../src/components/StandardDragDropList/StandardDragDropList.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,iBAAiB,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE3E,OAAO,KAAK,EACV,UAAU,EACV,UAAU,EACV,SAAS,EACT,cAAc,EACd,YAAY,EACZ,UAAU,EACV,mBAAmB,EACnB,SAAS,EACV,MAAM,yBAAyB,CAAC;AAEjC,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAEzD,MAAM,WAAW,yBACf,SAAQ,UAAU,CACd,iBAAiB,CAAC,6BAA6B,CAAC,EAChD,aAAa,GAAG,cAAc,GAAG,eAAe,GAAG,OAAO,GAAG,UAAU,CACxE,EACD,SAAS,EACT,cAAc,EACd,UAAU;IACZ,gCAAgC;IAChC,KAAK,EAAE,6BAA6B,EAAE,CAAC;IACvC,4BAA4B;IAC5B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,uFAAuF;IACvF,cAAc,CAAC,EAAE;QACf,OAAO,CAAC,EAAE,mBAAmB,CAAC,SAAS,CAAC,CAAC;QACzC,OAAO,EAAE,mBAAmB,CAAC,UAAU,CAAC,CAAC;KAC1C,CAAC;IACF;;;OAGG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,8CAA8C;IAC9C,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,yBAAyB,CAAC,OAAO,CAAC,KAAK,IAAI,CAAC;IAC/D,uDAAuD;IACvD,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,KAAK,UAAU,GAAG,CAChB,EAAE,EAAE,6BAA6B,CAAC,IAAI,CAAC,EACvC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAC7B,IAAI,CAAC;AAEV,MAAM,MAAM,6BAA6B,GAAG,YAAY,GAAG;IACzD,6DAA6D;IAC7D,EAAE,EAAE,MAAM,CAAC;IACX,mFAAmF;IACnF,IAAI,EAAE,MAAM,CAAC;IACb,wFAAwF;IACxF,OAAO,EAAE,MAAM,GAAG,CAAC;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,iBAAiB,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,YAAY,CAAC,CAAC;IAC/F,uEAAuE;IACvE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yDAAyD;IACzD,MAAM,CAAC,EAAE;QACP,IAAI,EAAE,OAAO,GAAG,SAAS,CAAC;QAC1B,OAAO,EAAE,MAAM,CAAC;KACjB,CAAC;IACF,0DAA0D;IAC1D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,4DAA4D;IAC5D,IAAI,CAAC,EAAE,UAAU,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC;IACrC;;;OAGG;IACH,WAAW,CAAC,EAAE,UAAU,CAAC;IACzB;;;OAGG;IACH,QAAQ,CAAC,EAAE,UAAU,CAAC;CACvB,GAAG,CACE;IACE,sDAAsD;IACtD,KAAK,EAAE,6BAA6B,EAAE,CAAC;IACvC,kHAAkH;IAClH,MAAM,CAAC,EAAE,yBAAyB,CAAC,QAAQ,CAAC,CAAC;IAC7C,6DAA6D;IAC7D,OAAO,CAAC,EAAE,UAAU,CAAC;CACtB,GACD;IACE,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,MAAM,CAAC,EAAE,KAAK,CAAC;IACf,OAAO,CAAC,EAAE,KAAK,CAAC;CACjB,CACJ,CAAC"}

package/lib/components/StandardDragDropList/StandardDragDropList.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"StandardDragDropList.types.js","sourceRoot":"","sources":["../../../src/components/StandardDragDropList/StandardDragDropList.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { MouseEvent, MouseEventHandler, ReactNode, Ref } from 'react';\n\nimport type {\n  TestIdProp,\n  OmitStrict,\n  BaseProps,\n  NoChildrenProp,\n  ForwardProps,\n  HeadingTag\n} from '@pega/cosmos-react-core';\n\nimport type { DragDropListProps } from '../DragDropList';\n\nexport interface StandardDragDropListProps\n  extends OmitStrict<\n      DragDropListProps<StandardDragDropListItemProps>,\n      'dragHandles' | 'itemRenderer' | 'emptyRenderer' | 'items' | 'onChange'\n    >,\n    BaseProps,\n    NoChildrenProp,\n    TestIdProp {\n  /** The contents of the list. */\n  items: StandardDragDropListItemProps[];\n  /** A title for the list. */\n  heading?: string;\n  /**\n   * Select the heading tag for header\n   * @default h2\n   */\n  headingTag?: HeadingTag;\n  /** A region for various list level actions */\n  footer?: ReactNode;\n  /**\n   * Called when the list's content changes by way of drag for reorder, add or remove.\n   * The handler is provided an array of items representing the new state.\n   */\n  onChange: (items: StandardDragDropListProps['items']) => void;\n  /** A ref to the root HTMLElement for the component. */\n  ref?: Ref<HTMLDivElement>;\n}\n\ntype ItemAction = (\n  id: StandardDragDropListItemProps['id'],\n  e: MouseEvent<HTMLButtonElement>\n) => void;\n\nexport type StandardDragDropListItemProps = ForwardProps & {\n  /** An identifier unique within the entire list hierarchy. */\n  id: string;\n  /** Indicates the type of item for determining drop acceptance by a target list. */\n  type: string;\n  /** The primary textual representation for the item or props for a linkable resource. */\n  primary: string | ({ text: string; onClick: MouseEventHandler; href?: string } & ForwardProps);\n  /** An additional textual representation for the item e.g. metadata. */\n  secondary?: string;\n  /** Presents the item as being in an invalidate state. */\n  status?: {\n    type: 'error';\n    message: string;\n  };\n  /** Whether or not the item can be reordered with drag. */\n  draggable?: boolean;\n  /**\n   * If the item is configurable pass a callback to render a button.\n   * The item's id and an event argument provides access to the underlying HTMLButtonElement.\n   */\n  onConfigure?: ItemAction;\n  /**\n   * If the item can be removed form the list pass a callback to render a button.\n   * The handler's event argument provides access to the underlying HTMLButtonElement.\n   */\n  onRemove?: ItemAction;\n} & (\n    | {\n        /** If the item can possess a nested list of items. */\n        items: StandardDragDropListItemProps[];\n        /** Type of items allowed to be dropped on the list. If not passed it will inherit accept from the parent list. */\n        accept?: StandardDragDropListProps['accept'];\n        /** Optionally render an add button for parent item types. */\n        onAddTo?: ItemAction;\n      }\n    | {\n        items?: undefined;\n        accept?: never;\n        onAddTo?: never;\n      }\n  );\n"]}
+{"version":3,"file":"StandardDragDropList.types.js","sourceRoot":"","sources":["../../../src/components/StandardDragDropList/StandardDragDropList.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { MouseEvent, MouseEventHandler, ReactNode, Ref } from 'react';\n\nimport type {\n  TestIdProp,\n  OmitStrict,\n  BaseProps,\n  NoChildrenProp,\n  ForwardProps,\n  HeadingTag,\n  AdditionalInfoProps,\n  IconProps\n} from '@pega/cosmos-react-core';\n\nimport type { DragDropListProps } from '../DragDropList';\n\nexport interface StandardDragDropListProps\n  extends OmitStrict<\n      DragDropListProps<StandardDragDropListItemProps>,\n      'dragHandles' | 'itemRenderer' | 'emptyRenderer' | 'items' | 'onChange'\n    >,\n    BaseProps,\n    NoChildrenProp,\n    TestIdProp {\n  /** The contents of the list. */\n  items: StandardDragDropListItemProps[];\n  /** A title for the list. */\n  heading?: string;\n  /** Renders a button that when clicked presents additional information for the list. */\n  additionalInfo?: {\n    heading?: AdditionalInfoProps['heading'];\n    content: AdditionalInfoProps['children'];\n  };\n  /**\n   * Select the heading tag for header\n   * @default h2\n   */\n  headingTag?: HeadingTag;\n  /** A region for various list level actions */\n  footer?: ReactNode;\n  /**\n   * Called when the list's content changes by way of drag for reorder, add or remove.\n   * The handler is provided an array of items representing the new state.\n   */\n  onChange?: (items: StandardDragDropListProps['items']) => void;\n  /** A ref to the root HTMLElement for the component. */\n  ref?: Ref<HTMLDivElement>;\n}\n\ntype ItemAction = (\n  id: StandardDragDropListItemProps['id'],\n  e: MouseEvent<HTMLButtonElement>\n) => void;\n\nexport type StandardDragDropListItemProps = ForwardProps & {\n  /** An identifier unique within the entire list hierarchy. */\n  id: string;\n  /** Indicates the type of item for determining drop acceptance by a target list. */\n  type: string;\n  /** The primary textual representation for the item or props for a linkable resource. */\n  primary: string | ({ text: string; onClick: MouseEventHandler; href?: string } & ForwardProps);\n  /** An additional textual representation for the item e.g. metadata. */\n  secondary?: string;\n  /** Presents the item as being in an invalidate state. */\n  status?: {\n    type: 'error' | 'warning';\n    message: string;\n  };\n  /** Whether or not the item can be reordered with drag. */\n  draggable?: boolean;\n  /** Defines the props of the icon passed to the list item */\n  icon?: OmitStrict<IconProps, 'size'>;\n  /**\n   * If the item is configurable pass a callback to render a button.\n   * The item's id and an event argument provides access to the underlying HTMLButtonElement.\n   */\n  onConfigure?: ItemAction;\n  /**\n   * If the item can be removed form the list pass a callback to render a button.\n   * The handler's event argument provides access to the underlying HTMLButtonElement.\n   */\n  onRemove?: ItemAction;\n} & (\n    | {\n        /** If the item can possess a nested list of items. */\n        items: StandardDragDropListItemProps[];\n        /** Type of items allowed to be dropped on the list. If not passed it will inherit accept from the parent list. */\n        accept?: StandardDragDropListProps['accept'];\n        /** Optionally render an add button for parent item types. */\n        onAddTo?: ItemAction;\n      }\n    | {\n        items?: undefined;\n        accept?: never;\n        onAddTo?: never;\n      }\n  );\n"]}

package/lib/index.d.ts

@@ -4,6 +4,8 @@ export { default as DragDropManager } from './components/DragDropManager';
 export * from './components/DragDropManager';
 export { default as Draggable } from './components/Draggable';
 export * from './components/Draggable';
+export { default as DragHandle } from './components/DragHandle';
+export * from './components/DragHandle';
 export { default as Droppable } from './components/Droppable';
 export * from './components/Droppable';
 export { default as StandardDragDropList } from './components/StandardDragDropList';

package/lib/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACpE,cAAc,2BAA2B,CAAC;AAC1C,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAC1E,cAAc,8BAA8B,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAC9D,cAAc,wBAAwB,CAAC;AACvC,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAC9D,cAAc,wBAAwB,CAAC;AACvC,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,mCAAmC,CAAC;AACpF,cAAc,mCAAmC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACpE,cAAc,2BAA2B,CAAC;AAC1C,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAC1E,cAAc,8BAA8B,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAC9D,cAAc,wBAAwB,CAAC;AACvC,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAChE,cAAc,yBAAyB,CAAC;AACxC,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAC9D,cAAc,wBAAwB,CAAC;AACvC,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,mCAAmC,CAAC;AACpF,cAAc,mCAAmC,CAAC"}

package/lib/index.js

@@ -5,6 +5,8 @@ export { default as DragDropManager } from './components/DragDropManager';
 export * from './components/DragDropManager';
 export { default as Draggable } from './components/Draggable';
 export * from './components/Draggable';
+export { default as DragHandle } from './components/DragHandle';
+export * from './components/DragHandle';
 export { default as Droppable } from './components/Droppable';
 export * from './components/Droppable';
 export { default as StandardDragDropList } from './components/StandardDragDropList';

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,+DAA+D;AAC/D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACpE,cAAc,2BAA2B,CAAC;AAC1C,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAC1E,cAAc,8BAA8B,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAC9D,cAAc,wBAAwB,CAAC;AACvC,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAC9D,cAAc,wBAAwB,CAAC;AACvC,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,mCAAmC,CAAC;AACpF,cAAc,mCAAmC,CAAC","sourcesContent":["// This file is autogenerated. Any changes will be overwritten.\nexport { default as DragDropList } from './components/DragDropList';\nexport * from './components/DragDropList';\nexport { default as DragDropManager } from './components/DragDropManager';\nexport * from './components/DragDropManager';\nexport { default as Draggable } from './components/Draggable';\nexport * from './components/Draggable';\nexport { default as Droppable } from './components/Droppable';\nexport * from './components/Droppable';\nexport { default as StandardDragDropList } from './components/StandardDragDropList';\nexport * from './components/StandardDragDropList';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,+DAA+D;AAC/D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACpE,cAAc,2BAA2B,CAAC;AAC1C,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAC1E,cAAc,8BAA8B,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAC9D,cAAc,wBAAwB,CAAC;AACvC,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAChE,cAAc,yBAAyB,CAAC;AACxC,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAC9D,cAAc,wBAAwB,CAAC;AACvC,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,mCAAmC,CAAC;AACpF,cAAc,mCAAmC,CAAC","sourcesContent":["// This file is autogenerated. Any changes will be overwritten.\nexport { default as DragDropList } from './components/DragDropList';\nexport * from './components/DragDropList';\nexport { default as DragDropManager } from './components/DragDropManager';\nexport * from './components/DragDropManager';\nexport { default as Draggable } from './components/Draggable';\nexport * from './components/Draggable';\nexport { default as DragHandle } from './components/DragHandle';\nexport * from './components/DragHandle';\nexport { default as Droppable } from './components/Droppable';\nexport * from './components/Droppable';\nexport { default as StandardDragDropList } from './components/StandardDragDropList';\nexport * from './components/StandardDragDropList';\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/cosmos-react-dnd",
-  "version": "7.0.0-build.9.2",
+  "version": "7.0.0-rc.1",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/pegasystems/cosmos-react.git",
@@ -19,22 +19,23 @@
     "build": "tsc -b tsconfig.build.json"
   },
   "dependencies": {
-    "@pega/cosmos-react-core": "7.0.0-build.9.2",
+    "@pega/cosmos-react-core": "7.0.0-rc.1",
     "@types/react": "^17.0.62",
     "@types/react-dom": "^17.0.20",
     "@types/styled-components": "^5.1.26",
     "dnd-core": "14.0.1",
     "polished": "^4.1.0",
+    "rdndmb-html5-to-touch": "^7.1.3",
     "react": "^17.0.0",
     "react-dnd": "^14.0.4",
-    "react-dnd-html5-backend": "^14.0.2",
+    "react-dnd-multi-backend": "^7.1.3",
     "react-dom": "^17.0.0",
     "styled-components": "^5.2.0"
   },
   "devDependencies": {
-    "@storybook/addon-actions": "~7.5.3",
-    "@storybook/react": "~7.5.3",
-    "@storybook/theming": "~7.5.3",
+    "@storybook/addon-actions": "~8.2.9",
+    "@storybook/react": "~8.2.9",
+    "@storybook/theming": "~8.2.9",
     "@testing-library/dom": "^8.13.0",
     "@testing-library/react": "^12.1.3",
     "@testing-library/user-event": "^14.5.1",