@pega/cosmos-react-dnd 7.1.1 → 8.0.0-build.10.0

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.
@@ -1,4 +1,3 @@
1
- /// <reference types="react" />
2
1
  import type { ForwardProps } from '@pega/cosmos-react-core';
3
2
  import type { DragDropListProps } from './DragDropList.types';
4
3
  declare const DragDropList: <T extends object = object>({ testId, id: idProp, accept, items, itemRenderer: ItemRenderer, emptyRenderer: EmptyRenderer, onChange, onEnter, pullMode, pushMode, dragToRemove, as: Component, ...restProps }: DragDropListProps<T> & ForwardProps) => JSX.Element;
@@ -1 +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;AAQxE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAgB9D,QAAA,MAAM,YAAY,oQA0TjB,CAAC;AAEF,eAAe,YAAY,CAAC"}
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;AAQxE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAgB9D,QAAA,MAAM,YAAY,GAAI,CAAC,SAAS,MAAM,8LAcnC,iBAAiB,CAAC,CAAC,CAAC,GAAG,YAAY,gBA4SrC,CAAC;AAEF,eAAe,YAAY,CAAC"}
@@ -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, 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 { DragDropListContextValue } 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 } else if (item.destinationItemsRef !== internalItemsRef) {\n item.removeFromCurrent = () => {\n // Reverts destination list back to values before temporary hover over list to modify position of existing item\n setInternalItems(internalItems);\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 contextValue: DragDropListContextValue = useMemo(\n () => ({\n keyboardReorderItem: (itemId, direction) => {\n const index = internalItems.findIndex(({ id }) => id === itemId);\n\n if (index === -1) return;\n\n if (direction === 'prev' && index !== 0) {\n triggerOnChange([\n ...internalItems.slice(0, index - 1),\n internalItems[index],\n internalItems[index - 1],\n ...internalItems.slice(index + 1, internalItems.length)\n ]);\n } else if (direction === 'next' && index !== internalItems.length - 1) {\n triggerOnChange([\n ...internalItems.slice(0, index),\n internalItems[index + 1],\n internalItems[index],\n ...internalItems.slice(index + 2, internalItems.length)\n ]);\n }\n }\n }),\n [internalItems, triggerOnChange]\n );\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"]}
1
+ {"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 { DragDropListContextValue } 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 } else if (item.destinationItemsRef !== internalItemsRef) {\n item.removeFromCurrent = () => {\n // Reverts destination list back to values before temporary hover over list to modify position of existing item\n setInternalItems(internalItems);\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 contextValue: DragDropListContextValue = useMemo(\n () => ({\n keyboardReorderItem: (itemId, direction) => {\n const index = internalItems.findIndex(({ id }) => id === itemId);\n\n if (index === -1) return;\n\n if (direction === 'prev' && index !== 0) {\n triggerOnChange([\n ...internalItems.slice(0, index - 1),\n internalItems[index],\n internalItems[index - 1],\n ...internalItems.slice(index + 1, internalItems.length)\n ]);\n } else if (direction === 'next' && index !== internalItems.length - 1) {\n triggerOnChange([\n ...internalItems.slice(0, index),\n internalItems[index + 1],\n internalItems[index],\n ...internalItems.slice(index + 2, internalItems.length)\n ]);\n }\n }\n }),\n [internalItems, triggerOnChange]\n );\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"]}
@@ -1,4 +1,3 @@
1
- /// <reference types="react" />
2
1
  import type { DraggableItem } from '../Draggable';
3
2
  export interface DragDropListContextValue {
4
3
  keyboardReorderItem: (itemId: DraggableItem['id'], direction: 'prev' | 'next') => void;
@@ -1 +1 @@
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,MAAM,WAAW,wBAAwB;IACvC,mBAAmB,EAAE,CAAC,MAAM,EAAE,aAAa,CAAC,IAAI,CAAC,EAAE,SAAS,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC;CACxF;AAED,QAAA,MAAM,mBAAmB,mDAEvB,CAAC;AAEH,eAAe,mBAAmB,CAAC"}
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,MAAM,WAAW,wBAAwB;IACvC,mBAAmB,EAAE,CAAC,MAAM,EAAE,aAAa,CAAC,IAAI,CAAC,EAAE,SAAS,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC;CACxF;AAED,QAAA,MAAM,mBAAmB,mDAEvB,CAAC;AAEH,eAAe,mBAAmB,CAAC"}
@@ -1,4 +1,3 @@
1
- /// <reference types="react" />
2
1
  import { type WithAttributes } from '@pega/cosmos-react-core';
3
2
  import type { DraggableItem } from '../Draggable';
4
3
  export interface DragHandleProps extends WithAttributes<'div', {
@@ -1 +1 @@
1
- {"version":3,"file":"DragHandle.d.ts","sourceRoot":"","sources":["../../../src/components/DragHandle/DragHandle.tsx"],"names":[],"mappings":";AAUA,OAAO,EAQL,KAAK,cAAc,EACpB,MAAM,yBAAyB,CAAC;AAGjC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAElD,MAAM,WAAW,eACf,SAAQ,cAAc,CACpB,KAAK,EACL;IACE,wEAAwE;IACxE,MAAM,EAAE,aAAa,CAAC,IAAI,CAAC,CAAC;IAC5B,iFAAiF;IACjF,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B,CACF;CAAG;AAEN,eAAO,MAAM,gBAAgB,qOAM5B,CAAC;AAEF,QAAA,MAAM,UAAU,yHA0Ef,CAAC;AAEF,eAAe,UAAU,CAAC"}
1
+ {"version":3,"file":"DragHandle.d.ts","sourceRoot":"","sources":["../../../src/components/DragHandle/DragHandle.tsx"],"names":[],"mappings":"AAUA,OAAO,EAQL,KAAK,cAAc,EACpB,MAAM,yBAAyB,CAAC;AAGjC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAElD,MAAM,WAAW,eACf,SAAQ,cAAc,CACpB,KAAK,EACL;IACE,wEAAwE;IACxE,MAAM,EAAE,aAAa,CAAC,IAAI,CAAC,CAAC;IAC5B,iFAAiF;IACjF,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B,CACF;CAAG;AAEN,eAAO,MAAM,gBAAgB,qOAM5B,CAAC;AAEF,QAAA,MAAM,UAAU,yHA0Ef,CAAC;AAEF,eAAe,UAAU,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"DragHandle.js","sourceRoot":"","sources":["../../../src/components/DragHandle/DragHandle.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n forwardRef,\n useContext,\n useEffect,\n useState,\n type KeyboardEvent,\n type PropsWithoutRef\n} from 'react';\nimport styled from 'styled-components';\n\nimport {\n Icon,\n Button,\n useI18n,\n useUID,\n useConsolidatedRef,\n HiddenText,\n type RefElement,\n type WithAttributes\n} from '@pega/cosmos-react-core';\n\nimport DragDropListContext from '../DragDropList/DragDropListContext';\nimport type { DraggableItem } from '../Draggable';\n\nexport interface DragHandleProps\n extends WithAttributes<\n 'div',\n {\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 }\n > {}\n\nexport const StyledDragHandle = styled(Button)`\n cursor: grab;\n\n &[aria-grabbed='true'] {\n cursor: grabbing;\n }\n`;\n\nconst DragHandle = forwardRef<RefElement<DragHandleProps>, PropsWithoutRef<DragHandleProps>>(\n function DragHandle({ itemId, contextualLabel, ...restProps }, ref) {\n const [grabbed, setGrabbed] = useState(false);\n const [keyboardGrabbed, setKeyboardGrabbed] = useState(false);\n const context = useContext(DragDropListContext);\n const descriptionId = useUID();\n const t = useI18n();\n const dragHandleRef = useConsolidatedRef(ref);\n\n const handleKeyDown = (e: KeyboardEvent<HTMLButtonElement>) => {\n // Limit preventDefault and stopPropagation to these codes to not interfere with tab key behavior\n if (['Enter', 'Space', 'ArrowUp', 'ArrowDown'].includes(e.code)) {\n e.preventDefault();\n e.stopPropagation();\n }\n\n if (e.code === 'Enter' || e.code === 'Space') {\n setGrabbed(prev => !prev);\n setKeyboardGrabbed(prev => !prev);\n } else if (grabbed)\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 setKeyboardGrabbed(false);\n };\n\n document.addEventListener('dragend', removeGrabbed);\n\n return () => {\n document.removeEventListener('dragend', removeGrabbed);\n };\n }, [grabbed]);\n\n const dragText = t('drag');\n\n return (\n <StyledDragHandle\n {...restProps}\n forwardedAs='div'\n role='button'\n tabIndex={0}\n label={grabbed ? undefined : dragText}\n aria-label={contextualLabel ? `${dragText} - ${contextualLabel}` : dragText}\n aria-describedby={descriptionId}\n ref={dragHandleRef}\n icon\n variant='simple'\n compact\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={keyboardGrabbed ? 'arrow-micro-up-down' : 'drag'} />\n <HiddenText id={descriptionId}>{t('drag_handle_description')}</HiddenText>\n </StyledDragHandle>\n );\n }\n);\n\nexport default DragHandle;\n"]}
1
+ {"version":3,"file":"DragHandle.js","sourceRoot":"","sources":["../../../src/components/DragHandle/DragHandle.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n forwardRef,\n useContext,\n useEffect,\n useState,\n type KeyboardEvent,\n type PropsWithoutRef\n} from 'react';\nimport styled from 'styled-components';\n\nimport {\n Icon,\n Button,\n useI18n,\n useUID,\n useConsolidatedRef,\n HiddenText,\n type RefElement,\n type WithAttributes\n} from '@pega/cosmos-react-core';\n\nimport DragDropListContext from '../DragDropList/DragDropListContext';\nimport type { DraggableItem } from '../Draggable';\n\nexport interface DragHandleProps\n extends WithAttributes<\n 'div',\n {\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 }\n > {}\n\nexport const StyledDragHandle = styled(Button)`\n cursor: grab;\n\n &[aria-grabbed='true'] {\n cursor: grabbing;\n }\n`;\n\nconst DragHandle = forwardRef<RefElement<DragHandleProps>, PropsWithoutRef<DragHandleProps>>(\n function DragHandle({ itemId, contextualLabel, ...restProps }, ref) {\n const [grabbed, setGrabbed] = useState(false);\n const [keyboardGrabbed, setKeyboardGrabbed] = useState(false);\n const context = useContext(DragDropListContext);\n const descriptionId = useUID();\n const t = useI18n();\n const dragHandleRef = useConsolidatedRef(ref);\n\n const handleKeyDown = (e: KeyboardEvent<HTMLButtonElement>) => {\n // Limit preventDefault and stopPropagation to these codes to not interfere with tab key behavior\n if (['Enter', 'Space', 'ArrowUp', 'ArrowDown'].includes(e.code)) {\n e.preventDefault();\n e.stopPropagation();\n }\n\n if (e.code === 'Enter' || e.code === 'Space') {\n setGrabbed(prev => !prev);\n setKeyboardGrabbed(prev => !prev);\n } else if (grabbed)\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 setKeyboardGrabbed(false);\n };\n\n document.addEventListener('dragend', removeGrabbed);\n\n return () => {\n document.removeEventListener('dragend', removeGrabbed);\n };\n }, [grabbed]);\n\n const dragText = t('drag');\n\n return (\n <StyledDragHandle\n {...restProps}\n forwardedAs='div'\n role='button'\n tabIndex={0}\n label={grabbed ? undefined : dragText}\n aria-label={contextualLabel ? `${dragText} - ${contextualLabel}` : dragText}\n aria-describedby={descriptionId}\n ref={dragHandleRef}\n icon\n variant='simple'\n compact\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={keyboardGrabbed ? 'arrow-micro-up-down' : 'drag'} />\n <HiddenText id={descriptionId}>{t('drag_handle_description')}</HiddenText>\n </StyledDragHandle>\n );\n }\n);\n\nexport default DragHandle;\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"Draggable.d.ts","sourceRoot":"","sources":["../../../src/components/Draggable/Draggable.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAoB,WAAW,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAEzE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAC;AACnD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAE3C,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
+ {"version":3,"file":"Draggable.d.ts","sourceRoot":"","sources":["../../../src/components/Draggable/Draggable.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAoB,WAAW,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAEzE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAC;AACnD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAE3C,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,GAAI,CAAC,SAAS,MAAM,yDAOhC,cAAc,CAAC,CAAC,CAAC,2EAwBnB,CAAC;AAEF,eAAe,SAAS,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"Droppable.d.ts","sourceRoot":"","sources":["../../../src/components/Droppable/Droppable.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAEvD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAC;AACnD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAE3C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAElD,MAAM,WAAW,cAAc,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM;IACvD,6DAA6D;IAC7D,MAAM,EAAE,UAAU,CAAC;IACnB,mEAAmE;IACnE,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,aAAa,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,iBAAiB,KAAK,IAAI,CAAC;IACvE,8DAA8D;IAC9D,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,aAAa,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,iBAAiB,KAAK,IAAI,CAAC;IACtE,sDAAsD;IACtD,QAAQ,EAAE,CAAC,IAAI,EAAE;QACf,OAAO,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;QAClC,SAAS,EAAE;YAAE,OAAO,EAAE,OAAO,CAAC;YAAC,MAAM,EAAE,OAAO,CAAA;SAAE,CAAC;KAClD,KAAK,YAAY,CAAC;CACpB;AAED,QAAA,MAAM,SAAS,iKAoBd,CAAC;AAEF,eAAe,SAAS,CAAC"}
1
+ {"version":3,"file":"Droppable.d.ts","sourceRoot":"","sources":["../../../src/components/Droppable/Droppable.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAEvD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAC;AACnD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAE3C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAElD,MAAM,WAAW,cAAc,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM;IACvD,6DAA6D;IAC7D,MAAM,EAAE,UAAU,CAAC;IACnB,mEAAmE;IACnE,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,aAAa,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,iBAAiB,KAAK,IAAI,CAAC;IACvE,8DAA8D;IAC9D,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,aAAa,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,iBAAiB,KAAK,IAAI,CAAC;IACtE,sDAAsD;IACtD,QAAQ,EAAE,CAAC,IAAI,EAAE;QACf,OAAO,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;QAClC,SAAS,EAAE;YAAE,OAAO,EAAE,OAAO,CAAC;YAAC,MAAM,EAAE,OAAO,CAAA;SAAE,CAAC;KAClD,KAAK,YAAY,CAAC;CACpB;AAED,QAAA,MAAM,SAAS,GAAI,CAAC,SAAS,MAAM,kDAKhC,cAAc,CAAC,CAAC,CAAC,2EAenB,CAAC;AAEF,eAAe,SAAS,CAAC"}
@@ -2,7 +2,7 @@ import type { FunctionComponent } from 'react';
2
2
  import type { ForwardProps } from '@pega/cosmos-react-core';
3
3
  import type { StandardDragDropListProps } from './StandardDragDropList.types';
4
4
  declare const _default: FunctionComponent<StandardDragDropListProps & ForwardProps> & {
5
- getTestIds: (testIdProp?: string | null | undefined) => import("@pega/cosmos-react-core").TestIdsRecord<readonly ["header"]>;
5
+ getTestIds: (testIdProp?: import("@pega/cosmos-react-core").TestIdProp["testId"]) => import("@pega/cosmos-react-core").TestIdsRecord<readonly ["header"]>;
6
6
  };
7
7
  export default _default;
8
8
  //# sourceMappingURL=StandardDragDropList.d.ts.map
@@ -1 +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;AAkB5E,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAsB5D,OAAO,KAAK,EACV,yBAAyB,EAE1B,MAAM,8BAA8B,CAAC;;;;AAibtC,wBAAiF"}
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;AAkB5E,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAuB5D,OAAO,KAAK,EACV,yBAAyB,EAE1B,MAAM,8BAA8B,CAAC;;;;AA2ctC,wBAAiF"}
@@ -1,4 +1,4 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
1
+ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
2
2
  import { forwardRef, useCallback, useMemo, useRef, useState } from 'react';
3
3
  import { Flex, registerIcon, Icon, Text, Button, useI18n, EmptyState, ExpandCollapse, useUID, Tooltip, useElement, useTestIds, withTestIds, AdditionalInfo } from '@pega/cosmos-react-core';
4
4
  import * as DragIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/drag.icon';
@@ -7,7 +7,8 @@ import * as CaretDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icon
7
7
  import * as FlagWaveSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/flag-wave-solid.icon';
8
8
  import * as WarnSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/warn-solid.icon';
9
9
  import DragDropList from '../DragDropList';
10
- import { StyledStandardDragDropList, StyledStandardDragDropListItem, StyledDragHandle, StyledExpandCollapseToggle, StyledItemActions, StyledItemContent, StyledItemStatus, StyledSecondary, StyledListItemInner } from './StandardDragDropList.styles';
10
+ import DragHandle from '../DragHandle';
11
+ import { StyledStandardDragDropList, StyledStandardDragDropListItem, StyledExpandCollapseToggle, StyledItemActions, StyledItemContent, StyledItemStatus, StyledPrimary, StyledSecondary, StyledListItemInner } from './StandardDragDropList.styles';
11
12
  import { getItemRendererTestIds, getStandardDragDropListTestIds } from './StandardDragDropList.test-ids';
12
13
  registerIcon(DragIcon, PlusIcon, CaretDownIcon, FlagWaveSolidIcon, WarnSolidIcon);
13
14
  let StandardDragDropList;
@@ -29,16 +30,20 @@ type, accept, primary, secondary, draggable = true, status, items, icon, onConfi
29
30
  const expandCollpaseId = useUID();
30
31
  const testIds = useTestIds(testId, getItemRendererTestIds);
31
32
  const hasActions = !!(onConfigure ?? onRemove ?? onAddTo);
33
+ const [primaryTextEl, setPrimaryTextEl] = useElement(null);
34
+ const [secondaryTextEl, setSecondaryTextEl] = useElement(null);
32
35
  const primaryEl = useMemo(() => {
36
+ const tooltip = (_jsx(Tooltip, { smart: true, target: primaryTextEl, showDelay: 'none', hideDelay: 'none', children: typeof primary === 'string' ? primary : primary.text }));
37
+ const labelText = collapsed ? t('expand') : t('collapse');
33
38
  if (items) {
34
- 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 })] }) }));
39
+ return (_jsxs(_Fragment, { children: [_jsx(StyledExpandCollapseToggle, { "data-testid": testIds.expandCollapseButton, variant: 'simple', icon: true, label: labelText, "aria-label": `${labelText} - ${primary}`, onClick: () => setCollapsed(cur => !cur), "aria-owns": expandCollpaseId, "aria-expanded": !collapsed, children: _jsx(Icon, { name: 'caret-down' }) }), _jsxs("span", { ref: setPrimaryTextEl, children: [primary, tooltip] })] }));
35
40
  }
36
41
  if (typeof primary === 'string') {
37
- return _jsx("span", { children: primary });
42
+ return (_jsxs("span", { ref: setPrimaryTextEl, children: [primary, tooltip] }));
38
43
  }
39
- return (_jsx(Button, { variant: 'link', onClick: primary.onClick, href: primary.href, children: _jsx("span", { children: primary.text }) }));
40
- }, [t, items, primary, collapsed, expandCollpaseId]);
41
- 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) => {
44
+ return (_jsx(Button, { variant: 'link', onClick: primary.onClick, href: primary.href, ref: setPrimaryTextEl, children: _jsxs(StyledPrimary, { children: [primary.text, tooltip] }) }));
45
+ }, [t, items, primary, collapsed, expandCollpaseId, primaryTextEl]);
46
+ 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(DragHandle, { itemId: id, ref: dragRef, "data-testid": testIds.dragHandle }), _jsx(Flex, { container: { alignItems: 'center', gap: 0.5 }, item: { grow: 1 }, children: _jsxs(Flex, { container: { alignItems: 'center', gap: status || icon ? 1 : undefined, pad: 0.5 }, item: { grow: 1 }, as: StyledItemContent, children: [status && _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', justify: 'end', gap: 0.5 }, children: [secondary && (_jsxs(StyledSecondary, { variant: 'secondary', ref: setSecondaryTextEl, children: [secondary, _jsx(Tooltip, { smart: true, target: secondaryTextEl, showDelay: 'none', hideDelay: 'none', 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) => {
42
47
  onAddTo?.(id, e);
43
48
  }, children: _jsx(Icon, { name: 'plus' }) }) })), onConfigure && (_jsx("span", { children: _jsx(Button, { "data-testid": testIds.configureButton, icon: true, variant: 'simple', label: t('configure'), onClick: (e) => {
44
49
  onConfigure?.(id, e);
@@ -152,15 +157,15 @@ StandardDragDropList = forwardRef(function StandardDragDropListFunction({ testId
152
157
  }
153
158
  }, [onChangeProp, flatIds, mergeChangeHandler]);
154
159
  const heading = title ? _jsx(Text, { variant: headingTag, children: title }) : null;
155
- return (_jsxs(StyledStandardDragDropList, { ref: ref, ...restProps, children: [heading && (_jsx(Flex, { "data-testid": testIds.header, container: {
160
+ return (_jsxs(StyledStandardDragDropList, { ref: ref, "data-testid": testIds.root, ...restProps, children: [heading && (_jsx(Flex, { "data-testid": testIds.header, container: {
156
161
  justify: 'between',
157
162
  alignItems: 'center',
158
163
  gap: 1,
159
- pad: 1
164
+ pad: [1, undefined]
160
165
  }, 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: {
161
166
  alignItems: 'center',
162
167
  itemGap: 1,
163
- pad: 1
168
+ pad: [1, undefined]
164
169
  }, as: 'footer', children: footer }))] }));
165
170
  });
166
171
  export default withTestIds(StandardDragDropList, getStandardDragDropListTestIds);
@@ -1 +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 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"]}
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 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';\nimport DragHandle from '../DragHandle';\n\nimport {\n StyledStandardDragDropList,\n StyledStandardDragDropListItem,\n StyledExpandCollapseToggle,\n StyledItemActions,\n StyledItemContent,\n StyledItemStatus,\n StyledPrimary,\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 [primaryTextEl, setPrimaryTextEl] = useElement<\n HTMLSpanElement | HTMLAnchorElement | HTMLButtonElement\n >(null);\n const [secondaryTextEl, setSecondaryTextEl] = useElement<HTMLSpanElement>(null);\n\n const primaryEl = useMemo(() => {\n const tooltip = (\n <Tooltip smart target={primaryTextEl} showDelay='none' hideDelay='none'>\n {typeof primary === 'string' ? primary : primary.text}\n </Tooltip>\n );\n\n const labelText = collapsed ? t('expand') : t('collapse');\n\n if (items) {\n return (\n <>\n <StyledExpandCollapseToggle\n data-testid={testIds.expandCollapseButton}\n variant='simple'\n icon\n label={labelText}\n aria-label={`${labelText} - ${primary}`}\n onClick={() => setCollapsed(cur => !cur)}\n aria-owns={expandCollpaseId}\n aria-expanded={!collapsed}\n >\n <Icon name='caret-down' />\n </StyledExpandCollapseToggle>\n <span ref={setPrimaryTextEl}>\n {primary}\n {tooltip}\n </span>\n </>\n );\n }\n\n if (typeof primary === 'string') {\n return (\n <span ref={setPrimaryTextEl}>\n {primary}\n {tooltip}\n </span>\n );\n }\n\n return (\n <Button variant='link' onClick={primary.onClick} href={primary.href} ref={setPrimaryTextEl}>\n <StyledPrimary>\n {primary.text}\n {tooltip}\n </StyledPrimary>\n </Button>\n );\n }, [t, items, primary, collapsed, expandCollpaseId, primaryTextEl]);\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 && <DragHandle itemId={id} ref={dragRef} data-testid={testIds.dragHandle} />}\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.5 }}\n item={{ grow: 1 }}\n as={StyledItemContent}\n >\n {status && <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', justify: 'end', gap: 0.5 }}>\n {secondary && (\n <StyledSecondary variant='secondary' ref={setSecondaryTextEl}>\n {secondary}\n <Tooltip smart target={secondaryTextEl} showDelay='none' hideDelay='none'>\n {secondary}\n </Tooltip>\n </StyledSecondary>\n )}\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} data-testid={testIds.root} {...restProps}>\n {heading && (\n <Flex\n data-testid={testIds.header}\n container={{\n justify: 'between',\n alignItems: 'center',\n gap: 1,\n pad: [1, undefined]\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\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\n {footer && (\n <Flex\n container={{\n alignItems: 'center',\n itemGap: 1,\n pad: [1, undefined]\n }}\n as='footer'\n >\n {footer}\n </Flex>\n )}\n </StyledStandardDragDropList>\n );\n});\n\nexport default withTestIds(StandardDragDropList, getStandardDragDropListTestIds);\n"]}
@@ -1,21 +1,18 @@
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, {
6
- hasVisual: boolean;
1
+ import { type DefaultTheme, type StyledComponent } from 'styled-components';
2
+ export declare const StyledExpandCollapseToggle: StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").ButtonProps & import("@pega/cosmos-react-core").ForwardProps>, DefaultTheme, {}, never>;
3
+ export declare const StyledItemStatus: StyledComponent<"div", DefaultTheme, {}, never>;
4
+ export declare const StyledItemContent: StyledComponent<"div", DefaultTheme, {}, never>;
5
+ export declare const StyledItemActions: StyledComponent<"div", DefaultTheme, {}, never>;
6
+ export declare const StyledPrimary: StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").TextProps & import("@pega/cosmos-react-core").ForwardProps>, DefaultTheme, {}, never>;
7
+ export declare const StyledSecondary: StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").TextProps & import("@pega/cosmos-react-core").ForwardProps>, DefaultTheme, {}, never>;
8
+ export declare const StyledListItemInner: StyledComponent<"div", DefaultTheme, {
9
+ isDraggable?: boolean;
10
+ hasActions?: boolean;
11
+ hasVisual?: boolean;
7
12
  }, never>;
8
- export declare const StyledItemContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
9
- export declare const StyledItemActions: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
10
- 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>;
11
- export declare const StyledListItemInner: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
12
- isDraggable?: boolean | undefined;
13
- hasActions?: boolean | undefined;
14
- hasVisual?: boolean | undefined;
13
+ export declare const StyledStandardDragDropListItem: StyledComponent<"li", DefaultTheme, {
14
+ isDragging?: boolean;
15
+ empty?: boolean;
15
16
  }, never>;
16
- export declare const StyledStandardDragDropListItem: import("styled-components").StyledComponent<"li", import("styled-components").DefaultTheme, {
17
- isDragging?: boolean | undefined;
18
- empty?: boolean | undefined;
19
- }, never>;
20
- export declare const StyledStandardDragDropList: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
17
+ export declare const StyledStandardDragDropList: StyledComponent<'div', DefaultTheme, object, never>;
21
18
  //# sourceMappingURL=StandardDragDropList.styles.d.ts.map
@@ -1 +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;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"}
1
+ {"version":3,"file":"StandardDragDropList.styles.d.ts","sourceRoot":"","sources":["../../../src/components/StandardDragDropList/StandardDragDropList.styles.ts"],"names":[],"mappings":"AAAA,OAAe,EAAO,KAAK,YAAY,EAAE,KAAK,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAOzF,eAAO,MAAM,0BAA0B,6KAerC,CAAC;AAIH,eAAO,MAAM,gBAAgB,iDAU3B,CAAC;AAIH,eAAO,MAAM,iBAAiB,iDAW5B,CAAC;AAIH,eAAO,MAAM,iBAAiB,iDAAe,CAAC;AAE9C,eAAO,MAAM,aAAa,2KAGzB,CAAC;AAEF,eAAO,MAAM,eAAe,2KAG3B,CAAC;AAEF,eAAO,MAAM,mBAAmB;kBAChB,OAAO;iBACR,OAAO;gBACR,OAAO;SAgCnB,CAAC;AAIH,eAAO,MAAM,8BAA8B;iBAC5B,OAAO;YACZ,OAAO;SAiEf,CAAC;AAIH,eAAO,MAAM,0BAA0B,EAAE,eAAe,CAAC,KAAK,EAAE,YAAY,EAAE,MAAM,EAAE,KAAK,CAyFvF,CAAC"}
@@ -1,5 +1,7 @@
1
1
  import styled, { css } from 'styled-components';
2
2
  import { Button, defaultThemeProp, StyledIcon, Text, useDirection } from '@pega/cosmos-react-core';
3
+ import { elipsisOverflow } from '@pega/cosmos-react-core/lib/styles/mixins';
4
+ import { StyledDragHandle } from '../DragHandle';
3
5
  export const StyledExpandCollapseToggle = styled(Button)(({ theme }) => {
4
6
  const { ltr } = useDirection();
5
7
  return css `
@@ -16,6 +18,7 @@ export const StyledExpandCollapseToggle = styled(Button)(({ theme }) => {
16
18
  }
17
19
  `;
18
20
  });
21
+ StyledExpandCollapseToggle.defaultProps = defaultThemeProp;
19
22
  export const StyledItemStatus = styled.div(({ theme }) => {
20
23
  return css `
21
24
  ${StyledIcon} {
@@ -28,29 +31,28 @@ export const StyledItemStatus = styled.div(({ theme }) => {
28
31
  `;
29
32
  });
30
33
  StyledItemStatus.defaultProps = defaultThemeProp;
31
- export const StyledDragHandle = styled.div(({ hasVisual, theme }) => {
34
+ export const StyledItemContent = styled.div(({ theme }) => {
32
35
  return css `
33
- padding-inline-end: ${!hasVisual &&
34
- css `
35
- ${theme.base.spacing};
36
- `};
37
- cursor: move;
36
+ &,
37
+ & > :nth-child(2) {
38
+ ${elipsisOverflow}
39
+ }
38
40
 
39
- > svg {
40
- display: block;
41
+ & > ${StyledIcon} {
42
+ margin-inline: ${theme.base.spacing};
41
43
  }
42
44
  `;
43
45
  });
44
- StyledDragHandle.defaultProps = defaultThemeProp;
45
- export const StyledItemContent = styled.div `
46
- & > :nth-child(2) {
47
- overflow: hidden;
48
- text-overflow: ellipsis;
49
- }
50
- `;
51
46
  StyledItemContent.defaultProps = defaultThemeProp;
52
47
  export const StyledItemActions = styled.div ``;
53
- export const StyledSecondary = styled(Text) ``;
48
+ export const StyledPrimary = styled(Text) `
49
+ display: inline;
50
+ ${elipsisOverflow};
51
+ `;
52
+ export const StyledSecondary = styled(Text) `
53
+ max-width: 14ch;
54
+ ${elipsisOverflow}
55
+ `;
54
56
  export const StyledListItemInner = styled.div(({ theme, isDraggable, hasActions, hasVisual }) => {
55
57
  return css `
56
58
  white-space: nowrap;
@@ -69,6 +71,18 @@ export const StyledListItemInner = styled.div(({ theme, isDraggable, hasActions,
69
71
  css `
70
72
  padding-inline-start: 0;
71
73
  `}
74
+
75
+ &:has(${StyledExpandCollapseToggle}) {
76
+ padding-inline-start: calc(${theme.base.spacing} * 0.5);
77
+
78
+ &:not(:has(${StyledDragHandle})) {
79
+ padding-inline-start: 0;
80
+ }
81
+
82
+ & > ${StyledDragHandle} {
83
+ padding-inline-end: 0;
84
+ }
85
+ }
72
86
  `;
73
87
  });
74
88
  StyledListItemInner.defaultProps = defaultThemeProp;
@@ -137,26 +151,83 @@ export const StyledStandardDragDropListItem = styled.li(({ theme, isDragging, em
137
151
  });
138
152
  StyledStandardDragDropListItem.defaultProps = defaultThemeProp;
139
153
  export const StyledStandardDragDropList = styled.div(({ theme }) => {
154
+ const { base: { palette: { 'border-line': borderColor }, 'border-radius': baseBorderRadius }, components: { 'form-control': { 'border-radius': borderRadiusMultiplier, 'border-width': borderWidth } } } = theme;
155
+ const matchBottomBorderRadius = css `
156
+ border-end-start-radius: calc(${baseBorderRadius} * ${borderRadiusMultiplier});
157
+ border-end-end-radius: calc(${baseBorderRadius} * ${borderRadiusMultiplier});
158
+ `;
140
159
  return css `
141
- flex-grow: 1;
142
- background-color: ${theme.base.palette['primary-background']};
160
+ flex-grow: 1;
161
+ background-color: ${theme.base.palette['primary-background']};
143
162
 
144
- ul {
145
- list-style: none;
146
- }
163
+ ul {
164
+ list-style: none;
165
+ border: ${borderWidth} solid ${borderColor};
166
+ border-radius: calc(${baseBorderRadius} * ${borderRadiusMultiplier});
167
+
168
+ > ${StyledStandardDragDropListItem} {
169
+ &:first-child {
170
+ border-start-start-radius: calc(${baseBorderRadius} * ${borderRadiusMultiplier});
171
+ border-start-end-radius: calc(${baseBorderRadius} * ${borderRadiusMultiplier});
172
+
173
+ &::before {
174
+ display: none;
175
+ }
176
+ }
177
+
178
+ &:last-child,
179
+ &:last-child ${StyledStandardDragDropListItem}:last-child {
180
+ ${matchBottomBorderRadius}
147
181
 
148
- & & {
149
- padding-inline: calc(3.5 * ${theme.base.spacing}) 0;
182
+ &::after {
183
+ display: none;
184
+ }
185
+ }
150
186
 
151
- ${StyledStandardDragDropListItem} {
152
- &:last-child {
153
- &::after {
154
- display: none;
187
+ &:last-child ${StyledStandardDragDropList} {
188
+ ${matchBottomBorderRadius}
189
+ }
190
+ }
191
+
192
+ ul {
193
+ border: none;
194
+
195
+ > ${StyledStandardDragDropListItem} {
196
+ &:first-child {
197
+ border-radius: 0;
198
+ }
199
+
200
+ &:first-child::before {
201
+ display: block;
202
+ }
203
+
204
+ &:last-child {
205
+ border-radius: 0;
206
+ }
207
+
208
+ &:last-child::after {
209
+ display: block;
210
+ }
155
211
  }
156
212
  }
157
213
  }
158
- }
159
- `;
214
+
215
+ & & {
216
+ padding-inline: calc(3.5 * ${theme.base.spacing}) 0;
217
+
218
+ ${StyledStandardDragDropListItem} {
219
+ ${StyledListItemInner} {
220
+ padding-inline-start: calc(${theme.base.spacing} * 1);
221
+ }
222
+
223
+ &:last-child {
224
+ &::after {
225
+ display: none;
226
+ }
227
+ }
228
+ }
229
+ }
230
+ `;
160
231
  });
161
232
  StyledStandardDragDropList.defaultProps = defaultThemeProp;
162
233
  //# sourceMappingURL=StandardDragDropList.styles.js.map
@@ -1 +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}: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"]}
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, type DefaultTheme, type StyledComponent } from 'styled-components';\n\nimport { Button, defaultThemeProp, StyledIcon, Text, useDirection } from '@pega/cosmos-react-core';\nimport { elipsisOverflow } from '@pega/cosmos-react-core/lib/styles/mixins';\n\nimport { StyledDragHandle } from '../DragHandle';\n\nexport const StyledExpandCollapseToggle = 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\nStyledExpandCollapseToggle.defaultProps = defaultThemeProp;\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 StyledItemContent = styled.div(({ theme }) => {\n return css`\n &,\n & > :nth-child(2) {\n ${elipsisOverflow}\n }\n\n & > ${StyledIcon} {\n margin-inline: ${theme.base.spacing};\n }\n `;\n});\n\nStyledItemContent.defaultProps = defaultThemeProp;\n\nexport const StyledItemActions = styled.div``;\n\nexport const StyledPrimary = styled(Text)`\n display: inline;\n ${elipsisOverflow};\n`;\n\nexport const StyledSecondary = styled(Text)`\n max-width: 14ch;\n ${elipsisOverflow}\n`;\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 &:has(${StyledExpandCollapseToggle}) {\n padding-inline-start: calc(${theme.base.spacing} * 0.5);\n\n &:not(:has(${StyledDragHandle})) {\n padding-inline-start: 0;\n }\n\n & > ${StyledDragHandle} {\n padding-inline-end: 0;\n }\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: StyledComponent<'div', DefaultTheme, object, never> =\n styled.div(({ theme }) => {\n const {\n base: {\n palette: { 'border-line': borderColor },\n 'border-radius': baseBorderRadius\n },\n components: {\n 'form-control': { 'border-radius': borderRadiusMultiplier, 'border-width': borderWidth }\n }\n } = theme;\n\n const matchBottomBorderRadius = css`\n border-end-start-radius: calc(${baseBorderRadius} * ${borderRadiusMultiplier});\n border-end-end-radius: calc(${baseBorderRadius} * ${borderRadiusMultiplier});\n `;\n\n return css`\n flex-grow: 1;\n background-color: ${theme.base.palette['primary-background']};\n\n ul {\n list-style: none;\n border: ${borderWidth} solid ${borderColor};\n border-radius: calc(${baseBorderRadius} * ${borderRadiusMultiplier});\n\n > ${StyledStandardDragDropListItem} {\n &:first-child {\n border-start-start-radius: calc(${baseBorderRadius} * ${borderRadiusMultiplier});\n border-start-end-radius: calc(${baseBorderRadius} * ${borderRadiusMultiplier});\n\n &::before {\n display: none;\n }\n }\n\n &:last-child,\n &:last-child ${StyledStandardDragDropListItem}:last-child {\n ${matchBottomBorderRadius}\n\n &::after {\n display: none;\n }\n }\n\n &:last-child ${StyledStandardDragDropList} {\n ${matchBottomBorderRadius}\n }\n }\n\n ul {\n border: none;\n\n > ${StyledStandardDragDropListItem} {\n &:first-child {\n border-radius: 0;\n }\n\n &:first-child::before {\n display: block;\n }\n\n &:last-child {\n border-radius: 0;\n }\n\n &:last-child::after {\n display: block;\n }\n }\n }\n }\n\n & & {\n padding-inline: calc(3.5 * ${theme.base.spacing}) 0;\n\n ${StyledStandardDragDropListItem} {\n ${StyledListItemInner} {\n padding-inline-start: calc(${theme.base.spacing} * 1);\n }\n\n &:last-child {\n &::after {\n display: none;\n }\n }\n }\n }\n `;\n });\n\nStyledStandardDragDropList.defaultProps = defaultThemeProp;\n"]}
@@ -1,3 +1,3 @@
1
- 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"]>;
2
- export declare const getStandardDragDropListTestIds: (testIdProp?: string | null | undefined) => import("@pega/cosmos-react-core").TestIdsRecord<readonly ["header"]>;
1
+ export declare const getItemRendererTestIds: (testIdProp?: import("@pega/cosmos-react-core").TestIdProp["testId"]) => import("@pega/cosmos-react-core").TestIdsRecord<readonly ["expand-collapse-button", "add-button", "configure-button", "remove-button", "drag-handle", "icon"]>;
2
+ export declare const getStandardDragDropListTestIds: (testIdProp?: import("@pega/cosmos-react-core").TestIdProp["testId"]) => import("@pega/cosmos-react-core").TestIdsRecord<readonly ["header"]>;
3
3
  //# sourceMappingURL=StandardDragDropList.test-ids.d.ts.map
@@ -1 +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,4MAOxB,CAAC;AAEZ,eAAO,MAAM,8BAA8B,kHAEhC,CAAC"}
1
+ {"version":3,"file":"StandardDragDropList.test-ids.d.ts","sourceRoot":"","sources":["../../../src/components/StandardDragDropList/StandardDragDropList.test-ids.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,sBAAsB,yOAOxB,CAAC;AAEZ,eAAO,MAAM,8BAA8B,+IAEhC,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pega/cosmos-react-dnd",
3
- "version": "7.1.1",
3
+ "version": "8.0.0-build.10.0",
4
4
  "repository": {
5
5
  "type": "git",
6
6
  "url": "git+https://github.com/pegasystems/cosmos-react.git",
@@ -19,7 +19,7 @@
19
19
  "build": "tsc -b tsconfig.build.json"
20
20
  },
21
21
  "dependencies": {
22
- "@pega/cosmos-react-core": "7.1.1",
22
+ "@pega/cosmos-react-core": "8.0.0-build.10.0",
23
23
  "@types/react": "^17.0.62",
24
24
  "@types/react-dom": "^17.0.20",
25
25
  "@types/styled-components": "^5.1.26",
@@ -39,6 +39,6 @@
39
39
  "@testing-library/dom": "^8.13.0",
40
40
  "@testing-library/react": "^12.1.3",
41
41
  "@testing-library/user-event": "^14.5.1",
42
- "typescript": "~5.2.2"
42
+ "typescript": "~5.5.4"
43
43
  }
44
44
  }