@pega/cosmos-react-dnd 3.0.0-dev.9.0 → 3.0.0-rc.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/components/DragDropList/DragDropList.d.ts.map +1 -1
- package/lib/components/DragDropList/DragDropList.js +17 -9
- package/lib/components/DragDropList/DragDropList.js.map +1 -1
- package/lib/components/Draggable/Draggable.d.ts +2 -2
- package/lib/components/Draggable/Draggable.d.ts.map +1 -1
- package/lib/components/Draggable/Draggable.js.map +1 -1
- package/lib/components/StandardDragDropList/StandardDragDropList.d.ts +6 -0
- package/lib/components/StandardDragDropList/StandardDragDropList.d.ts.map +1 -0
- package/lib/components/StandardDragDropList/StandardDragDropList.js +155 -0
- package/lib/components/StandardDragDropList/StandardDragDropList.js.map +1 -0
- package/lib/components/StandardDragDropList/StandardDragDropList.styles.d.ts +15 -0
- package/lib/components/StandardDragDropList/StandardDragDropList.styles.d.ts.map +1 -0
- package/lib/components/StandardDragDropList/StandardDragDropList.styles.js +143 -0
- package/lib/components/StandardDragDropList/StandardDragDropList.styles.js.map +1 -0
- package/lib/components/StandardDragDropList/StandardDragDropList.types.d.ts +63 -0
- package/lib/components/StandardDragDropList/StandardDragDropList.types.d.ts.map +1 -0
- package/lib/components/StandardDragDropList/StandardDragDropList.types.js +2 -0
- package/lib/components/StandardDragDropList/StandardDragDropList.types.js.map +1 -0
- package/lib/components/StandardDragDropList/index.d.ts +3 -0
- package/lib/components/StandardDragDropList/index.d.ts.map +1 -0
- package/lib/components/StandardDragDropList/index.js +2 -0
- package/lib/components/StandardDragDropList/index.js.map +1 -0
- package/lib/index.d.ts +2 -0
- package/lib/index.d.ts.map +1 -1
- package/lib/index.js +2 -0
- package/lib/index.js.map +1 -1
- package/package.json +3 -3
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DragDropList.d.ts","sourceRoot":"","sources":["../../../src/components/DragDropList/DragDropList.tsx"],"names":[],"mappings":";AAGA,OAAO,EAIL,YAAY,EAEb,MAAM,yBAAyB,CAAC;AAKjC,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;
|
|
1
|
+
{"version":3,"file":"DragDropList.d.ts","sourceRoot":"","sources":["../../../src/components/DragDropList/DragDropList.tsx"],"names":[],"mappings":";AAGA,OAAO,EAIL,YAAY,EAEb,MAAM,yBAAyB,CAAC;AAKjC,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAczD,QAAA,MAAM,YAAY,yNAyOjB,CAAC;AAEF,eAAe,YAAY,CAAC"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { useCallback, useState, useRef } from 'react';
|
|
3
|
-
import { useElement, useAfterInitialEffect,
|
|
3
|
+
import { useElement, useAfterInitialEffect, useTriggerableEffect } from '@pega/cosmos-react-core';
|
|
4
4
|
import Draggable from '../Draggable';
|
|
5
5
|
import Droppable from '../Droppable';
|
|
6
6
|
const middleYOfRect = ({ top, bottom }) => top + (bottom - top) / 2;
|
|
@@ -18,9 +18,11 @@ const DragDropList = ({ accept, items, itemRenderer: ItemRenderer, emptyRenderer
|
|
|
18
18
|
useAfterInitialEffect(() => {
|
|
19
19
|
setInternalItems(items);
|
|
20
20
|
}, [items]);
|
|
21
|
-
const
|
|
22
|
-
|
|
23
|
-
|
|
21
|
+
const internalItemsRef = useRef(internalItems);
|
|
22
|
+
internalItemsRef.current = internalItems;
|
|
23
|
+
const triggerOnChange = useTriggerableEffect(useCallback((newItems) => {
|
|
24
|
+
onChange(newItems);
|
|
25
|
+
}, [onChange]));
|
|
24
26
|
const getInsertIndex = useCallback((item, monitor) => {
|
|
25
27
|
itemRectsRef.current = getItemRects();
|
|
26
28
|
const { current: itemRects } = itemRectsRef;
|
|
@@ -72,7 +74,7 @@ const DragDropList = ({ accept, items, itemRenderer: ItemRenderer, emptyRenderer
|
|
|
72
74
|
})));
|
|
73
75
|
}, []);
|
|
74
76
|
const positionItems = useCallback((item, monitor) => {
|
|
75
|
-
if (!monitor.canDrop())
|
|
77
|
+
if (!monitor.canDrop() || !monitor.isOver({ shallow: true }))
|
|
76
78
|
return;
|
|
77
79
|
const prevIndex = internalItems.findIndex(({ id }) => id === item.id);
|
|
78
80
|
if (prevIndex === -1) {
|
|
@@ -82,6 +84,7 @@ const DragDropList = ({ accept, items, itemRenderer: ItemRenderer, emptyRenderer
|
|
|
82
84
|
};
|
|
83
85
|
item.normalizeDestination = normalizeItems;
|
|
84
86
|
item.changeDestination = triggerOnChange;
|
|
87
|
+
item.destinationItemsRef = internalItemsRef;
|
|
85
88
|
}
|
|
86
89
|
let insertIndex = 0;
|
|
87
90
|
if (pushMode === 'insert')
|
|
@@ -127,17 +130,22 @@ const DragDropList = ({ accept, items, itemRenderer: ItemRenderer, emptyRenderer
|
|
|
127
130
|
},
|
|
128
131
|
normalizeDestination: normalizeItems,
|
|
129
132
|
changeSource: triggerOnChange,
|
|
130
|
-
|
|
133
|
+
sourceItemsRef: internalItemsRef,
|
|
134
|
+
changeDestination: triggerOnChange,
|
|
135
|
+
destinationItemsRef: internalItemsRef
|
|
131
136
|
};
|
|
132
137
|
}, [internalItems, normalizeItems, triggerOnChange, removeById]);
|
|
133
138
|
const onEnd = useCallback((item, monitor) => {
|
|
134
139
|
if (!item)
|
|
135
140
|
return;
|
|
136
141
|
if (monitor.didDrop()) {
|
|
142
|
+
const sourceItems = item.sourceItemsRef.current;
|
|
143
|
+
const destinationItems = item.destinationItemsRef.current;
|
|
137
144
|
item.normalizeDestination?.();
|
|
138
|
-
if (item.changeSource !== item.changeDestination)
|
|
139
|
-
item.changeSource?.();
|
|
140
|
-
|
|
145
|
+
if (item.changeSource !== item.changeDestination) {
|
|
146
|
+
item.changeSource?.(sourceItems);
|
|
147
|
+
}
|
|
148
|
+
item.changeDestination?.(destinationItems);
|
|
141
149
|
}
|
|
142
150
|
else {
|
|
143
151
|
item.removeFromCurrent?.();
|
|
@@ -1 +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 { DragSourceMonitor, DropTargetMonitor } from 'react-dnd';\n\nimport {\n useElement,\n useAfterInitialEffect,\n useTriggerableLayoutEffect,\n ForwardProps,\n OmitStrict\n} from '@pega/cosmos-react-core';\n\nimport Draggable, { DraggableItem } from '../Draggable';\nimport Droppable from '../Droppable';\n\nimport { 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?: () => void;\n changeDestination?: () => void;\n}\n\nconst middleYOfRect = ({ top, bottom }: DOMRect): number => top + (bottom - top) / 2;\n\nconst DragDropList = <T extends object = object>({\n accept,\n items,\n itemRenderer: ItemRenderer,\n emptyRenderer: EmptyRenderer,\n onChange,\n pullMode = 'remove',\n pushMode = 'insert',\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 [listEl, setListEl] = useElement<HTMLElement>();\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 triggerOnChange = useTriggerableLayoutEffect(\n useCallback(() => {\n onChange(internalItems);\n }, [onChange, internalItems])\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(\n (itemId: DraggableItem<T>['id']): void => {\n if (pullMode === 'remove') {\n setInternalItems(currentItems => currentItems.filter(({ id }) => id !== itemId));\n }\n },\n [pullMode]\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()) 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 item.normalizeDestination = normalizeItems;\n item.changeDestination = triggerOnChange;\n }\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, 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, item);\n\n if (typeof pushMode === 'function') setInternalItems(newItems.sort(pushMode));\n else setInternalItems(newItems);\n }\n },\n [internalItems, pushMode, getInsertIndex, normalizeItems, triggerOnChange, removeById]\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 removeFromCurrent: () => {\n removeById(itemId);\n },\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: triggerOnChange,\n changeDestination: triggerOnChange\n };\n },\n [internalItems, normalizeItems, triggerOnChange, removeById]\n );\n\n const onEnd = useCallback((item: DragDropListItem<T> | undefined, monitor: DragSourceMonitor) => {\n if (!item) return;\n\n if (monitor.didDrop()) {\n item.normalizeDestination?.();\n if (item.changeSource !== item.changeDestination) item.changeSource?.();\n item.changeDestination?.();\n } else {\n item.removeFromCurrent?.();\n item.returnToSource?.(item);\n }\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 {...{\n ...item,\n dragRef,\n previewRef,\n ...collected,\n isDragging: collected.isDragging || !!item.removeFromCurrent\n }}\n />\n );\n }}\n </Draggable>\n );\n })}\n </Component>\n );\n }}\n </Droppable>\n );\n};\n\nexport default DragDropList;\n"]}
|
|
1
|
+
{"version":3,"file":"DragDropList.js","sourceRoot":"","sources":["../../../src/components/DragDropList/DragDropList.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useCallback, useState, useRef, RefObject } from 'react';\nimport { DragSourceMonitor, DropTargetMonitor } from 'react-dnd';\n\nimport {\n useElement,\n useAfterInitialEffect,\n useTriggerableEffect,\n ForwardProps,\n OmitStrict\n} from '@pega/cosmos-react-core';\n\nimport Draggable, { DraggableItem } from '../Draggable';\nimport Droppable from '../Droppable';\n\nimport { 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?: (items: DragDropListItem<T>[]) => void;\n sourceItemsRef?: RefObject<DragDropListItem<T>[]>;\n changeDestination?: (items: DragDropListItem<T>[]) => void;\n destinationItemsRef?: RefObject<DragDropListItem<T>[]>;\n}\n\nconst middleYOfRect = ({ top, bottom }: DOMRect): number => top + (bottom - top) / 2;\n\nconst DragDropList = <T extends object = object>({\n accept,\n items,\n itemRenderer: ItemRenderer,\n emptyRenderer: EmptyRenderer,\n onChange,\n pullMode = 'remove',\n pushMode = 'insert',\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 [listEl, setListEl] = useElement<HTMLElement>();\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>[]) => {\n onChange(newItems);\n },\n [onChange]\n )\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(\n (itemId: DraggableItem<T>['id']): void => {\n if (pullMode === 'remove') {\n setInternalItems(currentItems => currentItems.filter(({ id }) => id !== itemId));\n }\n },\n [pullMode]\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 item.normalizeDestination = normalizeItems;\n item.changeDestination = triggerOnChange;\n item.destinationItemsRef = internalItemsRef;\n }\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, 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, item);\n\n if (typeof pushMode === 'function') setInternalItems(newItems.sort(pushMode));\n else setInternalItems(newItems);\n }\n },\n [internalItems, pushMode, getInsertIndex, normalizeItems, triggerOnChange, removeById]\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 removeFromCurrent: () => {\n removeById(itemId);\n },\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: triggerOnChange,\n sourceItemsRef: internalItemsRef,\n changeDestination: triggerOnChange,\n destinationItemsRef: internalItemsRef\n };\n },\n [internalItems, normalizeItems, triggerOnChange, removeById]\n );\n\n const onEnd = useCallback((item: DragDropListItem<T> | undefined, monitor: DragSourceMonitor) => {\n if (!item) return;\n\n if (monitor.didDrop()) {\n const sourceItems = item.sourceItemsRef!.current!;\n const destinationItems = item.destinationItemsRef!.current!;\n\n item.normalizeDestination?.();\n if (item.changeSource !== item.changeDestination) {\n item.changeSource?.(sourceItems);\n }\n item.changeDestination?.(destinationItems);\n } else {\n item.removeFromCurrent?.();\n item.returnToSource?.(item);\n }\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 {...{\n ...item,\n dragRef,\n previewRef,\n ...collected,\n isDragging: collected.isDragging || !!item.removeFromCurrent\n }}\n />\n );\n }}\n </Draggable>\n );\n })}\n </Component>\n );\n }}\n </Droppable>\n );\n};\n\nexport default DragDropList;\n"]}
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import { RefCallback, ReactElement } from 'react';
|
|
2
2
|
import { DragSourceMonitor } from 'react-dnd';
|
|
3
3
|
import { SourceType } from 'dnd-core';
|
|
4
|
-
export interface DraggableItem<T extends object = object> {
|
|
4
|
+
export interface DraggableItem<T extends object | undefined = object | undefined> {
|
|
5
5
|
/** Draggable item id */
|
|
6
6
|
id: string;
|
|
7
7
|
/** Draggable item type */
|
|
8
8
|
type: SourceType;
|
|
9
9
|
/** Arbitrary data associated with this drag item */
|
|
10
|
-
data
|
|
10
|
+
data: T;
|
|
11
11
|
}
|
|
12
12
|
export interface DraggableCollectedProps {
|
|
13
13
|
isDragging: boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Draggable.d.ts","sourceRoot":"","sources":["../../../src/components/Draggable/Draggable.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,WAAW,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAC5E,OAAO,EAAW,iBAAiB,EAAE,MAAM,WAAW,CAAC;AACvD,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAEtC,MAAM,WAAW,aAAa,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM;
|
|
1
|
+
{"version":3,"file":"Draggable.d.ts","sourceRoot":"","sources":["../../../src/components/Draggable/Draggable.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,WAAW,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAC5E,OAAO,EAAW,iBAAiB,EAAE,MAAM,WAAW,CAAC;AACvD,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAEtC,MAAM,WAAW,aAAa,CAAC,CAAC,SAAS,MAAM,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS;IAC9E,wBAAwB;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,0BAA0B;IAC1B,IAAI,EAAE,UAAU,CAAC;IACjB,oDAAoD;IACpD,IAAI,EAAE,CAAC,CAAC;CACT;AAED,MAAM,WAAW,uBAAuB;IACtC,UAAU,EAAE,OAAO,CAAC;IACpB,MAAM,EAAE,WAAW,GAAG,IAAI,CAAC;CAC5B;AAED,MAAM,WAAW,cAAc,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,CAAE,SAAQ,aAAa,CAAC,CAAC,CAAC;IACjF,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,iBAAiB,KAAK,MAAM,CAAC;IACjD,8DAA8D;IAC9D,KAAK,CAAC,EAAE,CAAC,IAAI,EAAE,aAAa,CAAC,CAAC,CAAC,GAAG,SAAS,EAAE,OAAO,EAAE,iBAAiB,KAAK,IAAI,CAAC;IACjF,QAAQ,EAAE,CAAC,KAAK,EAAE;QAChB,OAAO,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;QAClC,UAAU,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;QACrC,SAAS,EAAE,uBAAuB,CAAC;KACpC,KAAK,YAAY,CAAC;CACpB;AAED,QAAA,MAAM,SAAS,wKA+Bd,CAAC;AAEF,eAAe,SAAS,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Draggable.js","sourceRoot":"","sources":["../../../src/components/Draggable/Draggable.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAA+C,MAAM,OAAO,CAAC;AAC5E,OAAO,EAAE,OAAO,EAAqB,MAAM,WAAW,CAAC;AA4BvD,MAAM,SAAS,GAAG,CAA4B,EAC5C,EAAE,EACF,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,KAAK,EACL,QAAQ,EACU,EAAE,EAAE;IACtB,MAAM,SAAS,GAAyC,MAAM,CAAc,IAAI,CAAC,CAAC;IAElF,MAAM,CAAC,SAAS,EAAE,OAAO,EAAE,UAAU,CAAC,GAAG,OAAO,CAC9C,GAAG,EAAE,CAAC,CAAC;QACL,IAAI;QACJ,IAAI,EAAE,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,OAAO,EAAE,CAAC,OAAO,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;QAC5D,GAAG,EAAE,KAAK;QACV,OAAO,EAAE,OAAO,CAAC,EAAE,CAAC,CAAC;YACnB,UAAU,EAAE,OAAO,CAAC,UAAU,EAAE;YAChC,MAAM,EAAE,SAAS,CAAC,OAAO;SAC1B,CAAC;KACH,CAAC,EACF,CAAC,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,CAAC,CACjC,CAAC;IAEF,OAAO,QAAQ,CAAC;QACd,OAAO,EAAE,CAAC,EAAe,EAAE,EAAE;YAC3B,SAAS,CAAC,OAAO,GAAG,EAAE,CAAC;YACvB,OAAO,CAAC,EAAE,CAAC,CAAC;QACd,CAAC;QACD,UAAU;QACV,SAAS;KACV,CAAC,CAAC;AACL,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["import { useRef, MutableRefObject, RefCallback, ReactElement } from 'react';\nimport { useDrag, DragSourceMonitor } from 'react-dnd';\nimport { SourceType } from 'dnd-core';\n\nexport interface DraggableItem<T extends object = object> {\n /** Draggable item id */\n id: string;\n /** Draggable item type */\n type: SourceType;\n /** Arbitrary data associated with this drag item */\n data
|
|
1
|
+
{"version":3,"file":"Draggable.js","sourceRoot":"","sources":["../../../src/components/Draggable/Draggable.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAA+C,MAAM,OAAO,CAAC;AAC5E,OAAO,EAAE,OAAO,EAAqB,MAAM,WAAW,CAAC;AA4BvD,MAAM,SAAS,GAAG,CAA4B,EAC5C,EAAE,EACF,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,KAAK,EACL,QAAQ,EACU,EAAE,EAAE;IACtB,MAAM,SAAS,GAAyC,MAAM,CAAc,IAAI,CAAC,CAAC;IAElF,MAAM,CAAC,SAAS,EAAE,OAAO,EAAE,UAAU,CAAC,GAAG,OAAO,CAC9C,GAAG,EAAE,CAAC,CAAC;QACL,IAAI;QACJ,IAAI,EAAE,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,OAAO,EAAE,CAAC,OAAO,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;QAC5D,GAAG,EAAE,KAAK;QACV,OAAO,EAAE,OAAO,CAAC,EAAE,CAAC,CAAC;YACnB,UAAU,EAAE,OAAO,CAAC,UAAU,EAAE;YAChC,MAAM,EAAE,SAAS,CAAC,OAAO;SAC1B,CAAC;KACH,CAAC,EACF,CAAC,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,CAAC,CACjC,CAAC;IAEF,OAAO,QAAQ,CAAC;QACd,OAAO,EAAE,CAAC,EAAe,EAAE,EAAE;YAC3B,SAAS,CAAC,OAAO,GAAG,EAAE,CAAC;YACvB,OAAO,CAAC,EAAE,CAAC,CAAC;QACd,CAAC;QACD,UAAU;QACV,SAAS;KACV,CAAC,CAAC;AACL,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["import { useRef, MutableRefObject, RefCallback, ReactElement } from 'react';\nimport { useDrag, DragSourceMonitor } from 'react-dnd';\nimport { SourceType } from 'dnd-core';\n\nexport interface DraggableItem<T extends object | undefined = object | undefined> {\n /** Draggable item id */\n id: string;\n /** Draggable item type */\n type: SourceType;\n /** Arbitrary data associated with this drag item */\n data: T;\n}\n\nexport interface DraggableCollectedProps {\n isDragging: boolean;\n dragEl: HTMLElement | null;\n}\n\nexport interface DraggableProps<T extends object = object> extends DraggableItem<T> {\n onBegin?: (monitor: DragSourceMonitor) => object;\n /** Called when drag item is dropped on a valid drop target */\n onEnd?: (item: DraggableItem<T> | undefined, monitor: DragSourceMonitor) => void;\n children: (props: {\n dragRef: RefCallback<HTMLElement>;\n previewRef: RefCallback<HTMLElement>;\n collected: DraggableCollectedProps;\n }) => ReactElement;\n}\n\nconst Draggable = <T extends object = object>({\n id,\n type,\n data,\n onBegin,\n onEnd,\n children\n}: DraggableProps<T>) => {\n const dragElRef: MutableRefObject<HTMLElement | null> = useRef<HTMLElement>(null);\n\n const [collected, dragRef, previewRef] = useDrag(\n () => ({\n type,\n item: monitor => ({ ...onBegin?.(monitor), id, type, data }),\n end: onEnd,\n collect: monitor => ({\n isDragging: monitor.isDragging(),\n dragEl: dragElRef.current\n })\n }),\n [id, type, data, onBegin, onEnd]\n );\n\n return children({\n dragRef: (el: HTMLElement) => {\n dragElRef.current = el;\n dragRef(el);\n },\n previewRef,\n collected\n });\n};\n\nexport default Draggable;\n"]}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { FunctionComponent } from 'react';
|
|
2
|
+
import { type ForwardProps } from '@pega/cosmos-react-core';
|
|
3
|
+
import { StandardDragDropListProps } from './StandardDragDropList.types';
|
|
4
|
+
declare let StandardDragDropList: FunctionComponent<StandardDragDropListProps & ForwardProps>;
|
|
5
|
+
export default StandardDragDropList;
|
|
6
|
+
//# sourceMappingURL=StandardDragDropList.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"StandardDragDropList.d.ts","sourceRoot":"","sources":["../../../src/components/StandardDragDropList/StandardDragDropList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAOlB,MAAM,OAAO,CAAC;AAEf,OAAO,EACL,KAAK,YAAY,EAYlB,MAAM,yBAAyB,CAAC;AAmBjC,OAAO,EACL,yBAAyB,EAE1B,MAAM,8BAA8B,CAAC;AAmBtC,QAAA,IAAI,oBAAoB,EAAE,iBAAiB,CAAC,yBAAyB,GAAG,YAAY,CAAC,CAAC;AA+WtF,eAAe,oBAAoB,CAAC"}
|
|
@@ -0,0 +1,155 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef, useCallback, useMemo, useRef, useState } from 'react';
|
|
3
|
+
import { Flex, registerIcon, Icon, Text, Button, useI18n, EmptyState, ExpandCollapse, useUID, Tooltip, useElement } from '@pega/cosmos-react-core';
|
|
4
|
+
import * as DragIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/drag.icon';
|
|
5
|
+
import * as PlusIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/plus.icon';
|
|
6
|
+
import * as CaretDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-down.icon';
|
|
7
|
+
import DragDropList from '../DragDropList';
|
|
8
|
+
import { StyledStandardDragDropList, StyledStandardDragDropListItem, StyledDragHandle, StyledExpandCollapseToggle, StyledItemActions, StyledItemContent, StyledItemStatus, StyledListItemInner, StyledSecondary } from './StandardDragDropList.styles';
|
|
9
|
+
registerIcon(DragIcon, PlusIcon, CaretDownIcon);
|
|
10
|
+
// eslint-disable-next-line import/no-mutable-exports
|
|
11
|
+
let StandardDragDropList;
|
|
12
|
+
const ItemStatus = ({ message, type }) => {
|
|
13
|
+
const [ttt, setTTT] = useElement(null);
|
|
14
|
+
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 })] }) })) }));
|
|
15
|
+
};
|
|
16
|
+
const getFlattenedIds = (items) => {
|
|
17
|
+
return items.flatMap(item => {
|
|
18
|
+
return item.items ? [item.id, ...item.items.map(({ id }) => id)] : [item.id];
|
|
19
|
+
});
|
|
20
|
+
};
|
|
21
|
+
const ItemRenderer = ({ dragRef, previewRef, isDragging, data: { id,
|
|
22
|
+
// Remove type for DOM restProps
|
|
23
|
+
type, accept, primary, secondary, draggable = true, status, items, onConfigure, onRemove, onAddTo, onChange, ...restProps }, data }) => {
|
|
24
|
+
const t = useI18n();
|
|
25
|
+
const [collapsed, setCollapsed] = useState(false);
|
|
26
|
+
const expandCollpaseId = useUID();
|
|
27
|
+
const hasActions = !!(onConfigure ?? onRemove ?? onAddTo);
|
|
28
|
+
const primaryEl = useMemo(() => {
|
|
29
|
+
if (items) {
|
|
30
|
+
return (_jsx(StyledExpandCollapseToggle, { 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 })] }) }));
|
|
31
|
+
}
|
|
32
|
+
if (typeof primary === 'string') {
|
|
33
|
+
return _jsx("span", { children: primary });
|
|
34
|
+
}
|
|
35
|
+
return (_jsx(Button, { variant: 'link', onClick: primary.onClick, href: primary.href, children: _jsx("span", { children: primary.text }) }));
|
|
36
|
+
}, [t, items, primary, collapsed, expandCollpaseId]);
|
|
37
|
+
return (_jsxs(Flex, { ...restProps, container: { direction: 'column' }, as: StyledStandardDragDropListItem, ref: previewRef, isDragging: isDragging, children: [_jsxs(Flex, { container: { alignItems: 'center' }, as: StyledListItemInner, children: [draggable && (_jsx(StyledDragHandle, { ref: dragRef, 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, { icon: true, variant: 'simple', label: t('add'), onClick: (e) => {
|
|
38
|
+
onAddTo?.(id, e);
|
|
39
|
+
}, children: _jsx(Icon, { name: 'plus' }) }) })), onConfigure && (_jsx("span", { children: _jsx(Button, { icon: true, variant: 'simple', label: t('configure'), onClick: (e) => {
|
|
40
|
+
onConfigure?.(id, e);
|
|
41
|
+
}, children: _jsx(Icon, { name: 'gear' }) }) })), onRemove && (_jsx("span", { children: _jsx(Button, { icon: true, variant: 'simple', label: t('remove'), onClick: (e) => {
|
|
42
|
+
onRemove?.(id, e);
|
|
43
|
+
}, 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 }) }))] }));
|
|
44
|
+
};
|
|
45
|
+
StandardDragDropList = forwardRef(({ accept, items: itemsProp, heading: title, footer, onChange: onChangeProp, pushMode, pullMode, ...restProps }, ref) => {
|
|
46
|
+
const flatIds = useMemo(() => getFlattenedIds(itemsProp), [itemsProp]);
|
|
47
|
+
const timerRef = useRef();
|
|
48
|
+
const newItemsRef = useRef();
|
|
49
|
+
const mergeChangeHandler = useCallback((newItems) => {
|
|
50
|
+
if (typeof timerRef.current === 'number' && newItemsRef.current) {
|
|
51
|
+
clearTimeout(timerRef.current);
|
|
52
|
+
timerRef.current = undefined;
|
|
53
|
+
const refedItems = newItemsRef.current;
|
|
54
|
+
newItemsRef.current = undefined;
|
|
55
|
+
const reffedItemsCount = getFlattenedIds(refedItems).length;
|
|
56
|
+
const newItemsCount = getFlattenedIds(newItems).length;
|
|
57
|
+
// Item moved between the top level list and nested list.
|
|
58
|
+
if (Math.abs(reffedItemsCount - newItemsCount) === 2) {
|
|
59
|
+
const itemsWithDuplicate = reffedItemsCount > newItemsCount ? refedItems : newItems;
|
|
60
|
+
const flatItemsWithDuplicate = getFlattenedIds(itemsWithDuplicate);
|
|
61
|
+
const duplicateItemId = flatItemsWithDuplicate.find((id, idx) => flatItemsWithDuplicate.indexOf(id) !== idx);
|
|
62
|
+
// Should never happen.
|
|
63
|
+
if (!duplicateItemId)
|
|
64
|
+
return;
|
|
65
|
+
// The duplicate was top level before.
|
|
66
|
+
if (itemsProp.some(({ id }) => id === duplicateItemId)) {
|
|
67
|
+
onChangeProp(itemsWithDuplicate.filter(({ id }) => id !== duplicateItemId));
|
|
68
|
+
}
|
|
69
|
+
// The duplicate was nested before.
|
|
70
|
+
else {
|
|
71
|
+
onChangeProp(itemsWithDuplicate.map(innerItem => {
|
|
72
|
+
if (!innerItem.items)
|
|
73
|
+
return innerItem;
|
|
74
|
+
if (itemsProp
|
|
75
|
+
.find(({ id }) => id === innerItem.id)
|
|
76
|
+
?.items?.some(({ id: subItemId }) => subItemId === duplicateItemId)) {
|
|
77
|
+
return {
|
|
78
|
+
...innerItem,
|
|
79
|
+
items: innerItem.items.filter(({ id }) => id !== duplicateItemId)
|
|
80
|
+
};
|
|
81
|
+
}
|
|
82
|
+
return innerItem;
|
|
83
|
+
}));
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
else {
|
|
87
|
+
// Failsafe for two unrelated change events within 100ms.
|
|
88
|
+
onChangeProp(refedItems);
|
|
89
|
+
onChangeProp(newItems);
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
else {
|
|
93
|
+
newItemsRef.current = newItems;
|
|
94
|
+
timerRef.current = window.setTimeout(() => {
|
|
95
|
+
onChangeProp(newItems);
|
|
96
|
+
}, 100);
|
|
97
|
+
}
|
|
98
|
+
}, [onChangeProp, itemsProp]);
|
|
99
|
+
const itemsToRender = useMemo(() => itemsProp.map(item => {
|
|
100
|
+
const newItem = {
|
|
101
|
+
id: item.id,
|
|
102
|
+
type: item.type,
|
|
103
|
+
data: item
|
|
104
|
+
};
|
|
105
|
+
if (!item.items)
|
|
106
|
+
return newItem;
|
|
107
|
+
return {
|
|
108
|
+
...newItem,
|
|
109
|
+
data: {
|
|
110
|
+
...item,
|
|
111
|
+
accept: item.accept ?? accept,
|
|
112
|
+
onChange: (newItems) => {
|
|
113
|
+
const newContentItems = itemsProp.map(topLevelItem => topLevelItem.id === item.id && topLevelItem.items
|
|
114
|
+
? { ...topLevelItem, items: newItems }
|
|
115
|
+
: topLevelItem);
|
|
116
|
+
const flatNewItems = getFlattenedIds(newContentItems);
|
|
117
|
+
if (itemsProp.some(propItem => !!propItem.items) &&
|
|
118
|
+
flatIds.length !== flatNewItems.length) {
|
|
119
|
+
// An item may be "removed" or "duplicated".
|
|
120
|
+
mergeChangeHandler(newContentItems);
|
|
121
|
+
}
|
|
122
|
+
else {
|
|
123
|
+
onChangeProp(newContentItems);
|
|
124
|
+
}
|
|
125
|
+
}
|
|
126
|
+
}
|
|
127
|
+
};
|
|
128
|
+
}), [accept, itemsProp, onChangeProp, flatIds, mergeChangeHandler]);
|
|
129
|
+
const onChange = useCallback((newItems) => {
|
|
130
|
+
const newContentItems = newItems.map(({ data: { onChange: _, ...data } }) => {
|
|
131
|
+
return data;
|
|
132
|
+
});
|
|
133
|
+
const flatNewItems = getFlattenedIds(newContentItems);
|
|
134
|
+
if (itemsProp.some(propItem => !!propItem.items) &&
|
|
135
|
+
flatIds.length !== flatNewItems.length) {
|
|
136
|
+
// An item may be "removed" or "duplicated".
|
|
137
|
+
mergeChangeHandler(newContentItems);
|
|
138
|
+
}
|
|
139
|
+
else {
|
|
140
|
+
onChangeProp(newContentItems);
|
|
141
|
+
}
|
|
142
|
+
}, [onChangeProp, flatIds, mergeChangeHandler]);
|
|
143
|
+
return (_jsxs(StyledStandardDragDropList, { ref: ref, ...restProps, children: [title && (_jsx(Flex, { container: {
|
|
144
|
+
justify: 'between',
|
|
145
|
+
alignItems: 'center',
|
|
146
|
+
gap: 1,
|
|
147
|
+
pad: 1
|
|
148
|
+
}, as: 'header', children: _jsx(Text, { variant: 'h2', children: title }) })), _jsx(DragDropList, { accept: accept, items: itemsToRender, pushMode: pushMode, pullMode: pullMode, itemRenderer: ItemRenderer, emptyRenderer: EmptyState, onChange: onChange }), footer && (_jsx(Flex, { container: {
|
|
149
|
+
alignItems: 'center',
|
|
150
|
+
itemGap: 1,
|
|
151
|
+
pad: 1
|
|
152
|
+
}, as: 'footer', children: footer }))] }));
|
|
153
|
+
});
|
|
154
|
+
export default StandardDragDropList;
|
|
155
|
+
//# sourceMappingURL=StandardDragDropList.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"StandardDragDropList.js","sourceRoot":"","sources":["../../../src/components/StandardDragDropList/StandardDragDropList.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,UAAU,EAIV,WAAW,EACX,OAAO,EACP,MAAM,EACN,QAAQ,EACT,MAAM,OAAO,CAAC;AAEf,OAAO,EAEL,IAAI,EACJ,YAAY,EACZ,IAAI,EACJ,IAAI,EACJ,MAAM,EACN,OAAO,EACP,UAAU,EACV,cAAc,EACd,MAAM,EACN,OAAO,EACP,UAAU,EACX,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,QAAQ,MAAM,6DAA6D,CAAC;AACxF,OAAO,KAAK,QAAQ,MAAM,6DAA6D,CAAC;AACxF,OAAO,KAAK,aAAa,MAAM,mEAAmE,CAAC;AAEnG,OAAO,YAAmC,MAAM,iBAAiB,CAAC;AAGlE,OAAO,EACL,0BAA0B,EAC1B,8BAA8B,EAC9B,gBAAgB,EAChB,0BAA0B,EAC1B,iBAAiB,EACjB,iBAAiB,EACjB,gBAAgB,EAChB,mBAAmB,EACnB,eAAe,EAChB,MAAM,+BAA+B,CAAC;AAMvC,YAAY,CAAC,QAAQ,EAAE,QAAQ,EAAE,aAAa,CAAC,CAAC;AAgBhD,qDAAqD;AACrD,IAAI,oBAAiF,CAAC;AAEtF,MAAM,UAAU,GAAG,CAAC,EAClB,OAAO,EACP,IAAI,EAC0D,EAAE,EAAE;IAClE,MAAM,CAAC,GAAG,EAAE,MAAM,CAAC,GAAG,UAAU,CAAC,IAAI,CAAC,CAAC;IAEvC,OAAO,CACL,KAAC,gBAAgB,iBAAW,QAAQ,EAAC,IAAI,EAAC,QAAQ,YAC/C,OAAO,IAAI,CACV,KAAC,IAAI,IAAC,OAAO,EAAC,WAAW,EAAC,MAAM,EAAC,OAAO,YACtC,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,aAC3B,KAAC,IAAI,IAAC,GAAG,EAAE,MAAM,EAAE,IAAI,EAAC,YAAY,EAAC,IAAI,EAAC,QAAQ,EAAC,QAAQ,EAAC,GAAG,gBAAa,IAAI,GAAI,EACpF,KAAC,OAAO,IAAC,MAAM,EAAE,GAAG,uBAAc,SAAS,EAAC,MAAM,EAAC,SAAS,EAAC,MAAM,YAChE,OAAO,GACA,IACL,GACF,CACR,GACgB,CACpB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,eAAe,GAAG,CACtB,KAAsC,EACC,EAAE;IACzC,OAAO,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;QAC1B,OAAO,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IAC/E,CAAC,CAAC,CAAC;AACL,CAAC,CAAC;AAEF,MAAM,YAAY,GAAG,CAAC,EACpB,OAAO,EACP,UAAU,EACV,UAAU,EACV,IAAI,EAAE,EACJ,EAAE;AACF,gCAAgC;AAChC,IAAI,EACJ,MAAM,EACN,OAAO,EACP,SAAS,EACT,SAAS,GAAG,IAAI,EAChB,MAAM,EACN,KAAK,EACL,WAAW,EACX,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,GAAG,SAAS,EACb,EACD,IAAI,EACqD,EAAE,EAAE;IAC7D,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAClD,MAAM,gBAAgB,GAAG,MAAM,EAAE,CAAC;IAElC,MAAM,UAAU,GAAG,CAAC,CAAC,CAAC,WAAW,IAAI,QAAQ,IAAI,OAAO,CAAC,CAAC;IAE1D,MAAM,SAAS,GAAG,OAAO,CAAC,GAAG,EAAE;QAC7B,IAAI,KAAK,EAAE;YACT,OAAO,CACL,KAAC,0BAA0B,IACzB,OAAO,EAAC,MAAM,gBACF,GAAG,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,GAAG,EACrE,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,eAC7B,gBAAgB,mBACZ,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,YAE3C,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,EAAE,aAC/D,KAAC,IAAI,IAAC,IAAI,EAAC,YAAY,GAAG,EAC1B,yBAAO,OAAO,GAAQ,IACjB,GACoB,CAC9B,CAAC;SACH;QAED,IAAI,OAAO,OAAO,KAAK,QAAQ,EAAE;YAC/B,OAAO,yBAAO,OAAO,GAAQ,CAAC;SAC/B;QAED,OAAO,CACL,KAAC,MAAM,IAAC,OAAO,EAAC,MAAM,EAAC,OAAO,EAAE,OAAO,CAAC,OAAO,EAAE,IAAI,EAAE,OAAO,CAAC,IAAI,YACjE,yBAAO,OAAO,CAAC,IAAI,GAAQ,GACpB,CACV,CAAC;IACJ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,gBAAgB,CAAC,CAAC,CAAC;IAErD,OAAO,CACL,MAAC,IAAI,OACC,SAAS,EACb,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,EAClC,EAAE,EAAE,8BAA8B,EAClC,GAAG,EAAE,UAAU,EACf,UAAU,EAAE,UAAU,aAEtB,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAE,EAAE,EAAE,mBAAmB,aAC/D,SAAS,IAAI,CACZ,KAAC,gBAAgB,IAAC,GAAG,EAAE,OAAO,YAC5B,KAAC,IAAI,IAAC,IAAI,EAAC,MAAM,GAAG,GACH,CACpB,EAED,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,EAAE,EAAE,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,YACpE,MAAC,IAAI,IACH,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,SAAS,EAAE,GAAG,EAAE,IAAI,EAAE,EAC7E,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,EACjB,EAAE,EAAE,iBAAiB,aAErB,KAAC,UAAU,IAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,GAAI,EAE3D,SAAS,IACL,GACF,EAEN,CAAC,SAAS,IAAI,UAAU,CAAC,IAAI,CAC5B,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,EAAE,aAChD,SAAS,IAAI,KAAC,eAAe,IAAC,OAAO,EAAC,WAAW,YAAE,SAAS,GAAmB,EAE/E,UAAU,IAAI,CACb,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,EAAE,EAAE,EAAE,EAAE,iBAAiB,aACvE,OAAO,IAAI,CACV,yBACE,KAAC,MAAM,IACL,IAAI,QACJ,OAAO,EAAC,QAAQ,EAChB,KAAK,EAAE,CAAC,CAAC,KAAK,CAAC,EACf,OAAO,EAAE,CAAC,CAAgC,EAAE,EAAE;gDAC5C,OAAO,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC;4CACnB,CAAC,YAED,KAAC,IAAI,IAAC,IAAI,EAAC,MAAM,GAAG,GACb,GACJ,CACR,EAEA,WAAW,IAAI,CACd,yBACE,KAAC,MAAM,IACL,IAAI,QACJ,OAAO,EAAC,QAAQ,EAChB,KAAK,EAAE,CAAC,CAAC,WAAW,CAAC,EACrB,OAAO,EAAE,CAAC,CAAgC,EAAE,EAAE;gDAC5C,WAAW,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC;4CACvB,CAAC,YAED,KAAC,IAAI,IAAC,IAAI,EAAC,MAAM,GAAG,GACb,GACJ,CACR,EAEA,QAAQ,IAAI,CACX,yBACE,KAAC,MAAM,IACL,IAAI,QACJ,OAAO,EAAC,QAAQ,EAChB,KAAK,EAAE,CAAC,CAAC,QAAQ,CAAC,EAClB,OAAO,EAAE,CAAC,CAAgC,EAAE,EAAE;gDAC5C,QAAQ,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC;4CACpB,CAAC,YAED,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,GAAG,GACd,GACJ,CACR,IACI,CACR,IACI,CACR,IACI,EAGN,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,IAAI,CACtC,KAAC,cAAc,IAAC,SAAS,EAAE,SAAS,EAAE,EAAE,EAAE,gBAAgB,YACxD,KAAC,oBAAoB,IAAC,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAI,GAC1E,CAClB,IACI,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,oBAAoB,GAAG,UAAU,CAC/B,CACE,EACE,MAAM,EACN,KAAK,EAAE,SAAS,EAChB,OAAO,EAAE,KAAK,EACd,MAAM,EACN,QAAQ,EAAE,YAAY,EACtB,QAAQ,EACR,QAAQ,EACR,GAAG,SAAS,EAC+B,EAC7C,GAAqC,EACrC,EAAE;IACF,MAAM,OAAO,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,eAAe,CAAC,SAAS,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEvE,MAAM,QAAQ,GAAG,MAAM,EAAU,CAAC;IAClC,MAAM,WAAW,GAAG,MAAM,EAAmC,CAAC;IAE9D,MAAM,kBAAkB,GAAG,WAAW,CACpC,CAAC,QAAyC,EAAE,EAAE;QAC5C,IAAI,OAAO,QAAQ,CAAC,OAAO,KAAK,QAAQ,IAAI,WAAW,CAAC,OAAO,EAAE;YAC/D,YAAY,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;YAC/B,QAAQ,CAAC,OAAO,GAAG,SAAS,CAAC;YAC7B,MAAM,UAAU,GAAG,WAAW,CAAC,OAAO,CAAC;YACvC,WAAW,CAAC,OAAO,GAAG,SAAS,CAAC;YAEhC,MAAM,gBAAgB,GAAG,eAAe,CAAC,UAAU,CAAC,CAAC,MAAM,CAAC;YAC5D,MAAM,aAAa,GAAG,eAAe,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC;YAEvD,yDAAyD;YACzD,IAAI,IAAI,CAAC,GAAG,CAAC,gBAAgB,GAAG,aAAa,CAAC,KAAK,CAAC,EAAE;gBACpD,MAAM,kBAAkB,GAAG,gBAAgB,GAAG,aAAa,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC;gBAEpF,MAAM,sBAAsB,GAAG,eAAe,CAAC,kBAAkB,CAAC,CAAC;gBAEnE,MAAM,eAAe,GAAG,sBAAsB,CAAC,IAAI,CACjD,CAAC,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,sBAAsB,CAAC,OAAO,CAAC,EAAE,CAAC,KAAK,GAAG,CACxD,CAAC;gBAEF,uBAAuB;gBACvB,IAAI,CAAC,eAAe;oBAAE,OAAO;gBAE7B,sCAAsC;gBACtC,IAAI,SAAS,CAAC,IAAI,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,KAAK,eAAe,CAAC,EAAE;oBACtD,YAAY,CAAC,kBAAkB,CAAC,MAAM,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,KAAK,eAAe,CAAC,CAAC,CAAC;iBAC7E;gBAED,mCAAmC;qBAC9B;oBACH,YAAY,CACV,kBAAkB,CAAC,GAAG,CAAC,SAAS,CAAC,EAAE;wBACjC,IAAI,CAAC,SAAS,CAAC,KAAK;4BAAE,OAAO,SAAS,CAAC;wBAEvC,IACE,SAAS;6BACN,IAAI,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,KAAK,SAAS,CAAC,EAAE,CAAC;4BACtC,EAAE,KAAK,EAAE,IAAI,CAAC,CAAC,EAAE,EAAE,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,SAAS,KAAK,eAAe,CAAC,EACrE;4BACA,OAAO;gCACL,GAAG,SAAS;gCACZ,KAAK,EAAE,SAAS,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,KAAK,eAAe,CAAC;6BAClE,CAAC;yBACH;wBAED,OAAO,SAAS,CAAC;oBACnB,CAAC,CAAC,CACH,CAAC;iBACH;aACF;iBAAM;gBACL,yDAAyD;gBACzD,YAAY,CAAC,UAAU,CAAC,CAAC;gBACzB,YAAY,CAAC,QAAQ,CAAC,CAAC;aACxB;SACF;aAAM;YACL,WAAW,CAAC,OAAO,GAAG,QAAQ,CAAC;YAC/B,QAAQ,CAAC,OAAO,GAAG,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE;gBACxC,YAAY,CAAC,QAAQ,CAAC,CAAC;YACzB,CAAC,EAAE,GAAG,CAAC,CAAC;SACT;IACH,CAAC,EACD,CAAC,YAAY,EAAE,SAAS,CAAC,CAC1B,CAAC;IAEF,MAAM,aAAa,GAA2D,OAAO,CACnF,GAAG,EAAE,CACH,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;QACnB,MAAM,OAAO,GAAG;YACd,EAAE,EAAE,IAAI,CAAC,EAAE;YACX,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,IAAI,EAAE,IAA6C;SACpD,CAAC;QACF,IAAI,CAAC,IAAI,CAAC,KAAK;YAAE,OAAO,OAAO,CAAC;QAEhC,OAAO;YACL,GAAG,OAAO;YACV,IAAI,EAAE;gBACJ,GAAG,IAAI;gBACP,MAAM,EAAE,IAAI,CAAC,MAAM,IAAI,MAAM;gBAC7B,QAAQ,EAAE,CAAC,QAAiD,EAAE,EAAE;oBAC9D,MAAM,eAAe,GAAG,SAAS,CAAC,GAAG,CAAC,YAAY,CAAC,EAAE,CACnD,YAAY,CAAC,EAAE,KAAK,IAAI,CAAC,EAAE,IAAI,YAAY,CAAC,KAAK;wBAC/C,CAAC,CAAC,EAAE,GAAG,YAAY,EAAE,KAAK,EAAE,QAAQ,EAAE;wBACtC,CAAC,CAAC,YAAY,CACjB,CAAC;oBAEF,MAAM,YAAY,GAAG,eAAe,CAAC,eAAe,CAAC,CAAC;oBAEtD,IACE,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC;wBAC5C,OAAO,CAAC,MAAM,KAAK,YAAY,CAAC,MAAM,EACtC;wBACA,4CAA4C;wBAC5C,kBAAkB,CAAC,eAAe,CAAC,CAAC;qBACrC;yBAAM;wBACL,YAAY,CAAC,eAAe,CAAC,CAAC;qBAC/B;gBACH,CAAC;aACuC;SAC3C,CAAC;IACJ,CAAC,CAAC,EACJ,CAAC,MAAM,EAAE,SAAS,EAAE,YAAY,EAAE,OAAO,EAAE,kBAAkB,CAAC,CAC/D,CAAC;IAEF,MAAM,QAAQ,GAAG,WAAW,CAC1B,CAAC,QAAgE,EAAE,EAAE;QACnE,MAAM,eAAe,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,EAAE,EAAE,QAAQ,EAAE,CAAC,EAAE,GAAG,IAAI,EAAE,EAAE,EAAE,EAAE;YAC1E,OAAO,IAAI,CAAC;QACd,CAAC,CAAC,CAAC;QACH,MAAM,YAAY,GAAG,eAAe,CAAC,eAAe,CAAC,CAAC;QAEtD,IACE,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC;YAC5C,OAAO,CAAC,MAAM,KAAK,YAAY,CAAC,MAAM,EACtC;YACA,4CAA4C;YAC5C,kBAAkB,CAAC,eAAe,CAAC,CAAC;SACrC;aAAM;YACL,YAAY,CAAC,eAAe,CAAC,CAAC;SAC/B;IACH,CAAC,EACD,CAAC,YAAY,EAAE,OAAO,EAAE,kBAAkB,CAAC,CAC5C,CAAC;IAEF,OAAO,CACL,MAAC,0BAA0B,IAAC,GAAG,EAAE,GAAG,KAAM,SAAS,aAChD,KAAK,IAAI,CACR,KAAC,IAAI,IACH,SAAS,EAAE;oBACT,OAAO,EAAE,SAAS;oBAClB,UAAU,EAAE,QAAQ;oBACpB,GAAG,EAAE,CAAC;oBACN,GAAG,EAAE,CAAC;iBACP,EACD,EAAE,EAAC,QAAQ,YAEX,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,KAAK,GAAQ,GAC5B,CACR,EACD,KAAC,YAAY,IACX,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,aAAa,EACpB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAE,YAAY,EAC1B,aAAa,EAAE,UAAU,EACzB,QAAQ,EAAE,QAAQ,GAClB,EACD,MAAM,IAAI,CACT,KAAC,IAAI,IACH,SAAS,EAAE;oBACT,UAAU,EAAE,QAAQ;oBACpB,OAAO,EAAE,CAAC;oBACV,GAAG,EAAE,CAAC;iBACP,EACD,EAAE,EAAC,QAAQ,YAEV,MAAM,GACF,CACR,IAC0B,CAC9B,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,oBAAoB,CAAC","sourcesContent":["import {\n forwardRef,\n FunctionComponent,\n MouseEvent,\n PropsWithoutRef,\n useCallback,\n useMemo,\n useRef,\n useState\n} from 'react';\n\nimport {\n type ForwardProps,\n Flex,\n registerIcon,\n Icon,\n Text,\n Button,\n useI18n,\n EmptyState,\n ExpandCollapse,\n useUID,\n Tooltip,\n useElement\n} 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, { ItemRendererProps } from '../DragDropList';\nimport { 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 {\n StandardDragDropListProps,\n StandardDragDropListItemProps\n} from './StandardDragDropList.types';\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\n// eslint-disable-next-line import/no-mutable-exports\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 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\n const hasActions = !!(onConfigure ?? onRemove ?? onAddTo);\n\n const primaryEl = useMemo(() => {\n if (items) {\n return (\n <StyledExpandCollapseToggle\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 {...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}>\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 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 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 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\nStandardDragDropList = forwardRef(\n (\n {\n accept,\n items: itemsProp,\n heading: title,\n footer,\n onChange: onChangeProp,\n pushMode,\n pullMode,\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 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 (\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 [onChangeProp, flatIds, mergeChangeHandler]\n );\n\n return (\n <StyledStandardDragDropList ref={ref} {...restProps}>\n {title && (\n <Flex\n container={{\n justify: 'between',\n alignItems: 'center',\n gap: 1,\n pad: 1\n }}\n as='header'\n >\n <Text variant='h2'>{title}</Text>\n </Flex>\n )}\n <DragDropList\n accept={accept}\n items={itemsToRender}\n pushMode={pushMode}\n pullMode={pullMode}\n itemRenderer={ItemRenderer}\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);\n\nexport default StandardDragDropList;\n"]}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { Button } from '@pega/cosmos-react-core';
|
|
3
|
+
export declare const StyledExpandCollapseToggle: typeof Button;
|
|
4
|
+
export declare const StyledItemStatus: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
5
|
+
export declare const StyledDragHandle: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
6
|
+
export declare const StyledItemContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
7
|
+
export declare const StyledItemActions: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
8
|
+
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>;
|
|
9
|
+
export declare const StyledListItemInner: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
10
|
+
export declare const StyledStandardDragDropListItem: import("styled-components").StyledComponent<"li", import("styled-components").DefaultTheme, {
|
|
11
|
+
isDragging?: boolean | undefined;
|
|
12
|
+
empty?: boolean | undefined;
|
|
13
|
+
}, never>;
|
|
14
|
+
export declare const StyledStandardDragDropList: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
15
|
+
//# sourceMappingURL=StandardDragDropList.styles.d.ts.map
|
|
@@ -0,0 +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;;;SAmE1C,CAAC;AAIF,eAAO,MAAM,0BAA0B,yGAqBrC,CAAC"}
|
|
@@ -0,0 +1,143 @@
|
|
|
1
|
+
import styled, { css } from 'styled-components';
|
|
2
|
+
import { Button, defaultThemeProp, StyledIcon, Text, useDirection } from '@pega/cosmos-react-core';
|
|
3
|
+
export const StyledExpandCollapseToggle = styled(Button)(({ theme }) => {
|
|
4
|
+
const { ltr } = useDirection();
|
|
5
|
+
return css `
|
|
6
|
+
& > div {
|
|
7
|
+
vertical-align: middle;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
& ${StyledIcon} {
|
|
11
|
+
transition: transform ${theme.base.animation.speed} ${theme.base.animation.timing.ease};
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
&[aria-expanded='false'] ${StyledIcon} {
|
|
15
|
+
transform: rotateZ(${ltr ? '-' : ''}90deg);
|
|
16
|
+
}
|
|
17
|
+
`;
|
|
18
|
+
});
|
|
19
|
+
export const StyledItemStatus = styled.div(({ theme }) => {
|
|
20
|
+
return css `
|
|
21
|
+
${StyledIcon} {
|
|
22
|
+
outline: none;
|
|
23
|
+
|
|
24
|
+
&:focus {
|
|
25
|
+
box-shadow: inset ${theme.base.shadow.focus};
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
`;
|
|
29
|
+
});
|
|
30
|
+
StyledItemStatus.defaultProps = defaultThemeProp;
|
|
31
|
+
export const StyledDragHandle = styled.div `
|
|
32
|
+
padding: 0 ${({ theme }) => theme.base.spacing} 0 0;
|
|
33
|
+
cursor: move;
|
|
34
|
+
> svg {
|
|
35
|
+
display: block;
|
|
36
|
+
}
|
|
37
|
+
`;
|
|
38
|
+
StyledDragHandle.defaultProps = defaultThemeProp;
|
|
39
|
+
export const StyledItemContent = styled.div `
|
|
40
|
+
& > :nth-child(2) {
|
|
41
|
+
overflow: hidden;
|
|
42
|
+
text-overflow: ellipsis;
|
|
43
|
+
}
|
|
44
|
+
`;
|
|
45
|
+
StyledItemContent.defaultProps = defaultThemeProp;
|
|
46
|
+
export const StyledItemActions = styled.div ``;
|
|
47
|
+
export const StyledSecondary = styled(Text) ``;
|
|
48
|
+
export const StyledListItemInner = styled.div(({ theme }) => {
|
|
49
|
+
return css `
|
|
50
|
+
padding-inline: calc(${theme.base.spacing} / 2);
|
|
51
|
+
white-space: nowrap;
|
|
52
|
+
`;
|
|
53
|
+
});
|
|
54
|
+
StyledListItemInner.defaultProps = defaultThemeProp;
|
|
55
|
+
export const StyledStandardDragDropListItem = styled.li(({ theme, isDragging, empty }) => {
|
|
56
|
+
const bdrColor = theme.base.palette['border-line'];
|
|
57
|
+
const bdr = `0.0625rem dashed ${isDragging || empty ? bdrColor : 'transparent'}`;
|
|
58
|
+
if (empty) {
|
|
59
|
+
return css `
|
|
60
|
+
text-align: center;
|
|
61
|
+
padding: ${theme.base.spacing};
|
|
62
|
+
border: ${bdr};
|
|
63
|
+
font-style: italic;
|
|
64
|
+
`;
|
|
65
|
+
}
|
|
66
|
+
return css `
|
|
67
|
+
position: relative;
|
|
68
|
+
background: ${theme.base.palette['primary-background']};
|
|
69
|
+
|
|
70
|
+
${isDragging &&
|
|
71
|
+
css `
|
|
72
|
+
z-index: 1;
|
|
73
|
+
|
|
74
|
+
& > div,
|
|
75
|
+
span {
|
|
76
|
+
/* visibility: hidden; */
|
|
77
|
+
opacity: 0.5;
|
|
78
|
+
}
|
|
79
|
+
`}
|
|
80
|
+
|
|
81
|
+
&::before,
|
|
82
|
+
&::after {
|
|
83
|
+
content: '';
|
|
84
|
+
display: block;
|
|
85
|
+
position: absolute;
|
|
86
|
+
height: 0.0625rem;
|
|
87
|
+
left: 0;
|
|
88
|
+
right: 0;
|
|
89
|
+
background: ${isDragging ? theme.base.palette['primary-background'] : bdrColor};
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
&::before {
|
|
93
|
+
top: 0;
|
|
94
|
+
border-top: ${bdr};
|
|
95
|
+
${isDragging &&
|
|
96
|
+
css `
|
|
97
|
+
box-shadow: 0 0.0625rem 0 ${theme.base.palette.interactive};
|
|
98
|
+
`}
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
&::after {
|
|
102
|
+
bottom: -0.0625rem;
|
|
103
|
+
border-bottom: ${bdr};
|
|
104
|
+
${isDragging &&
|
|
105
|
+
css `
|
|
106
|
+
box-shadow: 0 -0.0625rem 0 ${theme.base.palette.interactive};
|
|
107
|
+
`}
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
& > ${StyledListItemInner} {
|
|
111
|
+
min-height: calc(${theme.base['hit-area'].mouse} + ${theme.base.spacing});
|
|
112
|
+
|
|
113
|
+
@media (pointer: coarse) {
|
|
114
|
+
min-height: calc(${theme.base['hit-area']['finger-min']} + ${theme.base.spacing});
|
|
115
|
+
}
|
|
116
|
+
}
|
|
117
|
+
`;
|
|
118
|
+
});
|
|
119
|
+
StyledStandardDragDropListItem.defaultProps = defaultThemeProp;
|
|
120
|
+
export const StyledStandardDragDropList = styled.div(({ theme }) => {
|
|
121
|
+
return css `
|
|
122
|
+
flex-grow: 1;
|
|
123
|
+
background-color: ${theme.base.palette['primary-background']};
|
|
124
|
+
|
|
125
|
+
ul {
|
|
126
|
+
list-style: none;
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
& & {
|
|
130
|
+
padding-inline: calc(3.5 * ${theme.base.spacing}) 0;
|
|
131
|
+
|
|
132
|
+
${StyledStandardDragDropListItem} {
|
|
133
|
+
&:last-child {
|
|
134
|
+
&::after {
|
|
135
|
+
display: none;
|
|
136
|
+
}
|
|
137
|
+
}
|
|
138
|
+
}
|
|
139
|
+
}
|
|
140
|
+
`;
|
|
141
|
+
});
|
|
142
|
+
StyledStandardDragDropList.defaultProps = defaultThemeProp;
|
|
143
|
+
//# sourceMappingURL=StandardDragDropList.styles.js.map
|
|
@@ -0,0 +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: inset ${theme.base.shadow.focus};\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 /* visibility: hidden; */\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"]}
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
import { MouseEvent, MouseEventHandler, ReactNode, Ref } from 'react';
|
|
2
|
+
import { OmitStrict, BaseProps, NoChildrenProp, ForwardProps } from '@pega/cosmos-react-core';
|
|
3
|
+
import { DragDropListProps } from '../DragDropList';
|
|
4
|
+
export interface StandardDragDropListProps extends OmitStrict<DragDropListProps<StandardDragDropListItemProps>, 'dragHandles' | 'itemRenderer' | 'emptyRenderer' | 'items' | 'onChange'>, BaseProps, NoChildrenProp {
|
|
5
|
+
/** The contents of the list. */
|
|
6
|
+
items: StandardDragDropListItemProps[];
|
|
7
|
+
/** A title for the list. */
|
|
8
|
+
heading?: string;
|
|
9
|
+
/** A region for various list level actions */
|
|
10
|
+
footer?: ReactNode;
|
|
11
|
+
/**
|
|
12
|
+
* Called when the list's content changes by way of drag for reorder, add or remove.
|
|
13
|
+
* The handler is provided an array of items representing the new state.
|
|
14
|
+
*/
|
|
15
|
+
onChange: (items: StandardDragDropListProps['items']) => void;
|
|
16
|
+
/** A ref to the root HTMLElement for the component. */
|
|
17
|
+
ref?: Ref<HTMLDivElement>;
|
|
18
|
+
}
|
|
19
|
+
declare type ItemAction = (id: StandardDragDropListItemProps['id'], e: MouseEvent<HTMLButtonElement>) => void;
|
|
20
|
+
export declare type StandardDragDropListItemProps = ForwardProps & {
|
|
21
|
+
/** An identifier unique within the entire list hierarchy. */
|
|
22
|
+
id: string;
|
|
23
|
+
/** Indicates the type of item for determining drop acceptance by a target list. */
|
|
24
|
+
type: string;
|
|
25
|
+
/** The primary textual representation for the item or props for a linkable resource. */
|
|
26
|
+
primary: string | ({
|
|
27
|
+
text: string;
|
|
28
|
+
onClick: MouseEventHandler;
|
|
29
|
+
href?: string;
|
|
30
|
+
} & ForwardProps);
|
|
31
|
+
/** An additional textual representation for the item e.g. metadata. */
|
|
32
|
+
secondary?: string;
|
|
33
|
+
/** Presents the item as being in an invalidate state. */
|
|
34
|
+
status?: {
|
|
35
|
+
type: 'error';
|
|
36
|
+
message: string;
|
|
37
|
+
};
|
|
38
|
+
/** Whether or not the item can be reordered with drag. */
|
|
39
|
+
draggable?: boolean;
|
|
40
|
+
/**
|
|
41
|
+
* If the item is configurable pass a callback to render a button.
|
|
42
|
+
* The item's id and an event argument provides access to the underlying HTMLButtonElement.
|
|
43
|
+
*/
|
|
44
|
+
onConfigure?: ItemAction;
|
|
45
|
+
/**
|
|
46
|
+
* If the item can be removed form the list pass a callback to render a button.
|
|
47
|
+
* The handler's event argument provides access to the underlying HTMLButtonElement.
|
|
48
|
+
*/
|
|
49
|
+
onRemove?: ItemAction;
|
|
50
|
+
} & ({
|
|
51
|
+
/** If the item can possess a nested list of items. */
|
|
52
|
+
items: StandardDragDropListItemProps[];
|
|
53
|
+
/** Type of items allowed to be dropped on the list. If not passed it will inherit accept from the parent list. */
|
|
54
|
+
accept?: StandardDragDropListProps['accept'];
|
|
55
|
+
/** Optionally render an add button for parent item types. */
|
|
56
|
+
onAddTo?: ItemAction;
|
|
57
|
+
} | {
|
|
58
|
+
items?: undefined;
|
|
59
|
+
accept?: never;
|
|
60
|
+
onAddTo?: never;
|
|
61
|
+
});
|
|
62
|
+
export {};
|
|
63
|
+
//# sourceMappingURL=StandardDragDropList.types.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"StandardDragDropList.types.d.ts","sourceRoot":"","sources":["../../../src/components/StandardDragDropList/StandardDragDropList.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,iBAAiB,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAEtE,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAE9F,OAAO,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAEpD,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;IAChB,gCAAgC;IAChC,KAAK,EAAE,6BAA6B,EAAE,CAAC;IACvC,4BAA4B;IAC5B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,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,aAAK,UAAU,GAAG,CAChB,EAAE,EAAE,6BAA6B,CAAC,IAAI,CAAC,EACvC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAC7B,IAAI,CAAC;AAEV,oBAAY,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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"StandardDragDropList.types.js","sourceRoot":"","sources":["../../../src/components/StandardDragDropList/StandardDragDropList.types.ts"],"names":[],"mappings":"","sourcesContent":["import { MouseEvent, MouseEventHandler, ReactNode, Ref } from 'react';\n\nimport { OmitStrict, BaseProps, NoChildrenProp, ForwardProps } from '@pega/cosmos-react-core';\n\nimport { 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 /** The contents of the list. */\n items: StandardDragDropListItemProps[];\n /** A title for the list. */\n heading?: string;\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"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/StandardDragDropList/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACjD,OAAO,EACL,yBAAyB,EACzB,6BAA6B,EAC9B,MAAM,8BAA8B,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/StandardDragDropList/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC","sourcesContent":["export { default } from './StandardDragDropList';\nexport {\n StandardDragDropListProps,\n StandardDragDropListItemProps\n} from './StandardDragDropList.types';\n"]}
|
package/lib/index.d.ts
CHANGED
|
@@ -6,4 +6,6 @@ export { default as Draggable } from './components/Draggable';
|
|
|
6
6
|
export * from './components/Draggable';
|
|
7
7
|
export { default as Droppable } from './components/Droppable';
|
|
8
8
|
export * from './components/Droppable';
|
|
9
|
+
export { default as StandardDragDropList } from './components/StandardDragDropList';
|
|
10
|
+
export * from './components/StandardDragDropList';
|
|
9
11
|
//# sourceMappingURL=index.d.ts.map
|
package/lib/index.d.ts.map
CHANGED
|
@@ -1 +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"}
|
|
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"}
|
package/lib/index.js
CHANGED
|
@@ -7,4 +7,6 @@ export { default as Draggable } from './components/Draggable';
|
|
|
7
7
|
export * from './components/Draggable';
|
|
8
8
|
export { default as Droppable } from './components/Droppable';
|
|
9
9
|
export * from './components/Droppable';
|
|
10
|
+
export { default as StandardDragDropList } from './components/StandardDragDropList';
|
|
11
|
+
export * from './components/StandardDragDropList';
|
|
10
12
|
//# sourceMappingURL=index.js.map
|
package/lib/index.js.map
CHANGED
|
@@ -1 +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","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';\n"]}
|
|
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"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pega/cosmos-react-dnd",
|
|
3
|
-
"version": "3.0.0-
|
|
3
|
+
"version": "3.0.0-rc.2",
|
|
4
4
|
"author": "Pegasystems",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE",
|
|
6
6
|
"repository": {
|
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
"build": "tsc -b"
|
|
21
21
|
},
|
|
22
22
|
"dependencies": {
|
|
23
|
-
"@pega/cosmos-react-core": "3.0.0-
|
|
23
|
+
"@pega/cosmos-react-core": "3.0.0-rc.2",
|
|
24
24
|
"@types/react": "^16.14.24 || ^17.0.38",
|
|
25
25
|
"@types/react-dom": "^16.9.14 || ^17.0.11",
|
|
26
26
|
"@types/styled-components": "^5.1.7",
|
|
@@ -41,6 +41,6 @@
|
|
|
41
41
|
"@storybook/react": "^6.4.19",
|
|
42
42
|
"@storybook/theming": "^6.4.19",
|
|
43
43
|
"enzyme": "^3.11.0",
|
|
44
|
-
"typescript": "~4.
|
|
44
|
+
"typescript": "~4.7.2"
|
|
45
45
|
}
|
|
46
46
|
}
|