npm - @pega/cosmos-react-demos - Versions diffs - 4.0.0-dev.2.0 → 4.0.0-dev.21.0 - Mend

@pega/cosmos-react-demos 4.0.0-dev.2.0 → 4.0.0-dev.21.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.

Files changed (1465) hide show

package/jsx/cs/TaskManager/TaskManager.stories.jsx.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TaskManager.stories.jsx","sourceRoot":"","sources":["../../../src/cs/TaskManager/TaskManager.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { ReactNode, useEffect, useRef, useState, MouseEvent } from 'react';\nimport { action } from '@storybook/addon-actions';\nimport { Meta, Story } from '@storybook/react';\n\nimport {\n Button,\n createUID,\n DateInput,\n DateTimeInput,\n Flex,\n Form,\n Grid,\n Input,\n MenuButton,\n MenuItemProps,\n StatusProps,\n Text,\n TimeInput\n} from '@pega/cosmos-react-core';\nimport { Timeline } from '@pega/cosmos-react-work';\nimport {\n DialogueProps,\n TaskManager,\n TaskManagerProps,\n TaskProps,\n TaskView\n} from '@pega/cosmos-react-cs';\nimport { EntityList, EntityListProps } from '@pega/cosmos-react-social';\nimport { HandleValue } from '@pega/cosmos-react-cs/lib/components/TaskManager/TaskManager.types';\nimport { ContextMenuProps } from '@pega/cosmos-react-social/lib/components/Email/Email.types';\n\nimport { activity } from '../../work/Timeline/Timeline.mocks';\n\nimport { TaskPickerMockData, WrapUpTask, EntityListMock } from './TaskManager.mocks';\nimport { StyledStatus } from './TaskManager.styles';\n\nexport default {\n title: 'Customer Service/TaskManager',\n component: TaskManager\n} as Meta;\n\ntype TaskActions = 'cancel' \| 'launch' \| 'dismiss' \| 'submit';\n\nexport interface TaskManagerStoryProps extends TaskManagerProps {\n initialTasks?: TaskProps[];\n main?: ReactNode;\n serviceTasksEmpty?: boolean;\n colGap?: number;\n rowGap?: number;\n verbatimStatus?: DialogueProps['verbatimStatus'];\n}\n\nexport const TaskManagerDemo: Story<TaskManagerStoryProps> = (args: TaskManagerStoryProps) => {\n const [serviceTasks, setServiceTasks] = useState<TaskProps[]>(args.initialTasks \|\| []);\n const [isWrapUpTabVisible, setIsWrapUpTabVisible] = useState<boolean>(false);\n const [disableWrapUp, setDisableWrapUp] = useState<boolean>(false);\n\n const formActionsElemRef = useRef<HTMLButtonElement>(null);\n const taskManagerRef = useRef<HTMLDivElement>(null);\n const handle = useRef<HandleValue>(null);\n const entityListTimeout = useRef<number>();\n const [activeTaskId, setActiveTaskId] = useState<string \| undefined>(undefined);\n\n useEffect(() => {\n handle.current?.nudge();\n return () => {\n window.clearTimeout(entityListTimeout.current);\n };\n }, []);\n\n const switchTab = (taskList: TaskProps[], taskId?: TaskProps['id']) => {\n if (taskList.filter(task => !task.hideFromTab).length <= 1) {\n return isWrapUpTabVisible ? setActiveTaskId(WrapUpTask.id) : setActiveTaskId(undefined);\n }\n const taskIndex = taskList.findIndex(task => {\n return task.id === taskId;\n });\n\n let nextTaskIndex = taskList.findIndex((task, i) => {\n return i > taskIndex && !task.hideFromTab;\n });\n\n if (nextTaskIndex === -1) nextTaskIndex = taskList.findIndex(task => !task.hideFromTab);\n setActiveTaskId(taskList[nextTaskIndex].id);\n };\n\n const performTaskAction = (taskId: string \| undefined, taskAction: TaskActions) => {\n if (taskId === WrapUpTask.id) {\n if (taskAction === 'cancel') {\n setIsWrapUpTabVisible(false);\n const openTasks = serviceTasks.filter(task => !task.hideFromTab);\n const lastTask = openTasks[openTasks.length - 1];\n if (lastTask?.status?.text === 'Queued') {\n setServiceTasks(prevTasks => {\n return [\n ...prevTasks.filter(task => task.id !== lastTask.id),\n {\n ...lastTask,\n variant: 'In progress',\n icon: 'clipboard',\n status: {\n variant: 'pending',\n text: 'In progress'\n }\n }\n ];\n });\n }\n if (lastTask) {\n setActiveTaskId(lastTask.id);\n } else {\n setActiveTaskId(undefined);\n }\n setDisableWrapUp(false);\n } else if (taskAction === 'submit') {\n setServiceTasks(prevTasks => {\n return prevTasks\n .filter(task => task?.status?.text !== 'Queued')\n .map(task => {\n if (task?.status?.text !== 'cancelled') {\n return {\n ...task,\n isResolved: true,\n icon: 'check',\n hideFromTab: true,\n status: {\n variant: 'success' as StatusProps['variant'],\n text: 'Resolve-Completed'\n }\n };\n }\n return task;\n });\n });\n setIsWrapUpTabVisible(false);\n setActiveTaskId(undefined);\n } else if (taskAction === 'launch') {\n setActiveTaskId(WrapUpTask.id);\n setIsWrapUpTabVisible(true);\n }\n } else if (taskAction === 'launch') {\n setActiveTaskId(taskId);\n setServiceTasks(prevTasks => {\n return prevTasks.map(task => {\n if (task.id === taskId) {\n const status = task?.status?.text === 'Queued' ? 'In progress' : task?.status?.text;\n return {\n ...task,\n icon:\n task.status?.text === 'Resolve-Completed' \|\|\n task.status?.text === 'Resolve-Cancelled'\n ? 'check'\n : 'clipboard',\n hideFromTab: false,\n status: {\n variant:\n (status === 'In progress'\n ? ('pending' as StatusProps['variant'])\n : task.status?.variant) \|\| ('info' as StatusProps['variant']),\n text: (status === 'In progress' ? 'In progress' : task.status?.text) \|\| ''\n }\n };\n }\n return task;\n });\n });\n } else if (taskAction === 'cancel') {\n switchTab(serviceTasks, taskId);\n const taskIndex = serviceTasks.findIndex(task => {\n return task.id === taskId;\n });\n const nextTaskId =\n taskIndex >= 0 && taskIndex < serviceTasks.length - 1 && serviceTasks[taskIndex + 1].id;\n setServiceTasks(prevTasks => {\n return prevTasks.map(task => {\n if (task.id === taskId) {\n return {\n ...task,\n hideFromTab: true\n };\n }\n\n if (\n task.id === nextTaskId &&\n task?.status?.text !== 'Resolve-Completed' &&\n task?.status?.text !== 'Resolve-Cancelled'\n ) {\n return {\n ...task,\n icon: 'clipboard',\n status: {\n variant: 'pending' as StatusProps['variant'],\n text: 'In Progress'\n }\n };\n }\n\n return task;\n });\n });\n } else if (taskAction === 'submit') {\n const taskIndex = serviceTasks.findIndex(task => {\n return task.id === taskId;\n });\n const nextTaskId =\n taskIndex >= 0 && taskIndex < serviceTasks.length - 1 && serviceTasks[taskIndex + 1].id;\n setServiceTasks(prevTasks => {\n return prevTasks.map(task => {\n if (task.id === taskId) {\n return {\n ...task,\n icon: 'check',\n isResolved: true,\n hideFromTab: true,\n status: {\n variant: 'success' as StatusProps['variant'],\n text: 'Resolve-Completed'\n }\n };\n }\n if (\n task.id === nextTaskId &&\n task?.status?.text !== 'Resolve-Completed' &&\n task?.status?.text !== 'Resolve-Cancelled'\n ) {\n return {\n ...task,\n icon: 'clipboard',\n status: {\n variant: 'pending' as StatusProps['variant'],\n text: 'In Progress'\n }\n };\n }\n return task;\n });\n });\n switchTab(serviceTasks, taskId);\n } else if (taskAction === 'dismiss') {\n setServiceTasks(prevTasks => {\n return prevTasks.filter(task => task.id !== taskId);\n });\n }\n };\n\n const renderTasks = (selections: MenuItemProps[]) => {\n const newTasks: TaskProps[] = selections.map((selection, i) => {\n const taskId = createUID();\n if (i === 0) {\n return {\n id: taskId,\n icon: 'nothing',\n name: selection.primary,\n secondary: [`S-${Math.floor(1000 + Math.random() * 9000)}`],\n isResolved: false,\n status: {\n variant: 'pending' as StatusProps['variant'],\n text: 'In Progress'\n }\n };\n }\n return {\n id: taskId,\n icon: 'clipboard',\n name: selection.primary,\n secondary: [`S-${Math.floor(1000 + Math.random() * 9000)}`],\n isResolved: false,\n status: {\n variant: 'info' as StatusProps['variant'],\n text: 'Queued'\n }\n };\n });\n setServiceTasks(prevTasks => {\n return [...newTasks, ...prevTasks];\n });\n if (newTasks.length > 0) {\n performTaskAction(newTasks[0].id, 'launch');\n }\n setDisableWrapUp(false);\n };\n const activeServiceTask: TaskProps =\n (serviceTasks.find(task => task.id === activeTaskId) as TaskProps) \|\| {};\n\n /* Preparing form fields from added task /\n\n const taskFields =\n TaskPickerMockData.tasks\n .flatMap(task => task.items ?? [])\n .find(({ primary }) => primary === activeServiceTask?.name)?.fields ?? [];\n\n const getFormElements = (readOnly: boolean) => {\n const formElements = taskFields.map((field, i) => {\n const lowerFieldName = field.toLocaleLowerCase();\n if (lowerFieldName.includes('date') && lowerFieldName.includes('time')) {\n / eslint-disable react/no-array-index-key /\n return <DateTimeInput readOnly={readOnly} label={field} key={i} />;\n }\n if (lowerFieldName.includes('date')) {\n return <DateInput readOnly={readOnly} label={field} key={i} />;\n }\n if (lowerFieldName.includes('time')) {\n return <TimeInput readOnly={readOnly} label={field} key={i} />;\n }\n return <Input readOnly={readOnly} label={field} key={i} />;\n / eslint-enable react/no-array-index-key */\n });\n\n return formElements.length <= 3 ? (\n <>{formElements}</>\n ) : (\n <Grid\n container={{\n cols: 'repeat(2, 1fr)',\n colGap: args.colGap,\n rowGap: args.rowGap\n }}\n >\n {formElements}\n </Grid>\n );\n };\n\n const handleLaunch = (id: string) => {\n performTaskAction(id, 'launch');\n };\n\n const handleDismiss = (id: string) => {\n performTaskAction(id, 'dismiss');\n };\n\n const getTaskName = (taskName: TaskProps['name']) => {\n return taskName === 'Address change' ? 'Address change details' : taskName;\n };\n\n const entityListCtxMenuHandle: ContextMenuProps['handle'] = useRef(null);\n\n const handleRightClick = (e: MouseEvent) => {\n e.preventDefault();\n entityListCtxMenuHandle.current?.setItems([]);\n entityListCtxMenuHandle.current?.setLoading(true);\n entityListCtxMenuHandle.current?.setOpen(true);\n entityListTimeout.current = window.setTimeout(() => {\n entityListCtxMenuHandle.current?.setLoading(false);\n entityListCtxMenuHandle.current?.setItems([\n {\n id: 'item_0',\n primary: 'Field 1',\n selected: true\n },\n {\n id: 'item_1',\n primary: 'Field 2',\n selected: true\n },\n {\n id: 'item_2',\n primary: 'Field 3',\n selected: true\n },\n {\n id: 'item_3',\n primary: 'Field 4',\n selected: true\n }\n ]);\n }, 3000);\n };\n\n const [entityListMockData, setEntityListMock] = useState<EntityListProps['content']>([]);\n const [count, setCount] = useState(0);\n const entityListMock = (\n <EntityList\n content={entityListMockData}\n contextMenu={{\n onItemClick: action('onItemClick'),\n onContextMenu: handleRightClick,\n handle: entityListCtxMenuHandle\n }}\n />\n );\n\n const tasks = serviceTasks.map(task => {\n if (task.id === activeTaskId) {\n return {\n ...task,\n active: true\n };\n }\n return task;\n });\n\n const wrapUp = {\n disable: disableWrapUp,\n onClick: () => {\n performTaskAction(WrapUpTask.id, 'launch');\n setDisableWrapUp(true);\n },\n active: activeTaskId === WrapUpTask.id,\n showTab: isWrapUpTabVisible\n };\n\n const hasActiveTask = tasks.filter(task => task.active).length > 0 \|\| !!wrapUp?.active;\n\n useEffect(() => {\n if (hasActiveTask) {\n const interval = setInterval(() => {\n setCount(prev => {\n if (prev === EntityListMock.length - 1) {\n clearInterval(interval);\n return prev;\n }\n return prev + 1;\n });\n }, 3000);\n return () => clearInterval(interval);\n }\n }, [hasActiveTask]);\n\n useEffect(() => {\n if (count > 0) setEntityListMock([...entityListMockData, EntityListMock[count - 1]]);\n }, [count]);\n\n return (\n <TaskManager\n conversationAI={\n hasActiveTask\n ? {\n content: entityListMock,\n entityCount: count\n }\n : undefined\n }\n ref={taskManagerRef}\n handle={handle}\n tasks={args.serviceTasksEmpty ? [] : tasks}\n emptyText='No tasks added'\n banner={{\n icon: 'script',\n content:\n 'Hi Ms. Ventura, I see that you are interested in changing your monthly due date, is that correct?',\n verbatimStatus: args.verbatimStatus\n }}\n onTaskLaunch={args.onTaskLaunch \|\| handleLaunch}\n onTaskDismiss={args.onTaskDismiss \|\| handleDismiss}\n addTask={{\n items: TaskPickerMockData.tasks,\n onAdd: renderTasks\n }}\n wrapUp={args.wrapUp \|\| wrapUp}\n main={\n args.main \|\| (\n <TaskView\n header={\n <Flex container={{ justify: 'start', gap: 1, alignItems: 'center' }}>\n <Text variant='h3'>\n {activeTaskId === WrapUpTask.id\n ? WrapUpTask.name\n : getTaskName(activeServiceTask?.name as TaskProps['name'])}\n </Text>\n <StyledStatus\n variant={\n activeTaskId === WrapUpTask.id\n ? WrapUpTask.variant\n : (activeServiceTask.status &&\n (activeServiceTask.status?.variant as StatusProps['variant'])) \|\|\n 'info'\n }\n >\n {activeTaskId === WrapUpTask.id\n ? WrapUpTask.status\n : activeServiceTask.status && activeServiceTask!.status!.text}\n </StyledStatus>\n </Flex>\n }\n actions={\n <MenuButton\n ref={formActionsElemRef}\n menu={{\n items: ['Close task', 'Dismiss task', 'Resolve task'].map(name => ({\n primary: name,\n id: name,\n onClick: action(`Clicked ${name}`)\n }))\n }}\n text='Actions'\n />\n }\n >\n <Form\n id='forming'\n actions={\n activeServiceTask?.isResolved ? (\n <Flex container={{ justify: 'end' }} item={{ grow: 1 }}>\n <Button\n name='Close'\n variant='primary'\n onClick={() => {\n performTaskAction(activeTaskId, 'cancel');\n }}\n >\n Close\n </Button>\n </Flex>\n ) : (\n <>\n <Button\n name='Cancel'\n onClick={() => {\n performTaskAction(activeTaskId, 'cancel');\n }}\n >\n Cancel\n </Button>\n <div>\n <Button\n name='Submit'\n variant='primary'\n onClick={() => {\n performTaskAction(activeTaskId, 'submit');\n }}\n >\n Submit\n </Button>\n </div>\n </>\n )\n }\n >\n <Grid container={{ rowGap: 2 }}>\n {activeTaskId === WrapUpTask.id ? (\n <Timeline activity={activity} currentTime={new Date()} />\n ) : (\n getFormElements(activeServiceTask?.isResolved \|\| false)\n )}\n </Grid>\n </Form>\n </TaskView>\n )\n }\n />\n );\n};\n\nTaskManagerDemo.args = {\n serviceTasksEmpty: false,\n colGap: 2,\n rowGap: 2,\n verbatimStatus: 'pending'\n};\n\nTaskManagerDemo.argTypes = {\n serviceTasksEmpty: { control: { type: 'boolean' } },\n colGap: { control: { type: 'number' } },\n rowGap: { control: { type: 'number' } },\n verbatimStatus: {\n options: ['pending', 'spoken', undefined],\n control: { type: 'select' }\n }\n};\n"]}
1	+ {"version":3,"file":"TaskManager.stories.jsx","sourceRoot":"","sources":["../../../src/cs/TaskManager/TaskManager.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useRef, useState } from 'react';\nimport type { ReactNode, MouseEvent } from 'react';\nimport { action } from '@storybook/addon-actions';\nimport type { Meta, StoryFn } from '@storybook/react';\n\nimport {\n Button,\n createUID,\n DateInput,\n DateTimeInput,\n Flex,\n Form,\n Grid,\n Input,\n MenuButton,\n Text,\n TimeInput\n} from '@pega/cosmos-react-core';\nimport type { MenuItemProps, StatusProps } from '@pega/cosmos-react-core';\nimport { Timeline } from '@pega/cosmos-react-work';\nimport { TaskManager, TaskView } from '@pega/cosmos-react-cs';\nimport type { DialogueProps, TaskManagerProps, TaskProps } from '@pega/cosmos-react-cs';\nimport { EntityList } from '@pega/cosmos-react-social';\nimport type { EntityListProps } from '@pega/cosmos-react-social';\nimport type { HandleValue } from '@pega/cosmos-react-cs/lib/components/TaskManager/TaskManager.types';\nimport type { ContextMenuProps } from '@pega/cosmos-react-social/lib/components/Email/Email.types';\n\nimport { activity } from '../../work/Timeline/Timeline.mocks';\n\nimport { TaskPickerMockData, WrapUpTask, EntityListMock } from './TaskManager.mocks';\nimport { StyledStatus } from './TaskManager.styles';\n\nexport default {\n title: 'Customer Service/TaskManager',\n component: TaskManager\n} as Meta;\n\ntype TaskActions = 'cancel' \| 'launch' \| 'dismiss' \| 'submit';\n\nexport interface TaskManagerStoryProps extends TaskManagerProps {\n initialTasks?: TaskProps[];\n main?: ReactNode;\n serviceTasksEmpty?: boolean;\n colGap?: number;\n rowGap?: number;\n verbatimStatus?: DialogueProps['verbatimStatus'];\n}\n\nexport const TaskManagerDemo: StoryFn<TaskManagerStoryProps> = (args: TaskManagerStoryProps) => {\n const [serviceTasks, setServiceTasks] = useState<TaskProps[]>(args.initialTasks \|\| []);\n const [isWrapUpTabVisible, setIsWrapUpTabVisible] = useState<boolean>(false);\n const [disableWrapUp, setDisableWrapUp] = useState<boolean>(false);\n\n const formActionsElemRef = useRef<HTMLButtonElement>(null);\n const taskManagerRef = useRef<HTMLDivElement>(null);\n const handle = useRef<HandleValue>(null);\n const entityListTimeout = useRef<number>();\n const [activeTaskId, setActiveTaskId] = useState<string \| undefined>(undefined);\n\n useEffect(() => {\n handle.current?.nudge();\n return () => {\n window.clearTimeout(entityListTimeout.current);\n };\n }, []);\n\n const switchTab = (taskList: TaskProps[], taskId?: TaskProps['id']) => {\n if (taskList.filter(task => !task.hideFromTab).length <= 1) {\n return isWrapUpTabVisible ? setActiveTaskId(WrapUpTask.id) : setActiveTaskId(undefined);\n }\n const taskIndex = taskList.findIndex(task => {\n return task.id === taskId;\n });\n\n let nextTaskIndex = taskList.findIndex((task, i) => {\n return i > taskIndex && !task.hideFromTab;\n });\n\n if (nextTaskIndex === -1) nextTaskIndex = taskList.findIndex(task => !task.hideFromTab);\n setActiveTaskId(taskList[nextTaskIndex].id);\n };\n\n const performTaskAction = (taskId: string \| undefined, taskAction: TaskActions) => {\n if (taskId === WrapUpTask.id) {\n if (taskAction === 'cancel') {\n setIsWrapUpTabVisible(false);\n const openTasks = serviceTasks.filter(task => !task.hideFromTab);\n const lastTask = openTasks[openTasks.length - 1];\n if (lastTask?.status?.text === 'Queued') {\n setServiceTasks(prevTasks => {\n return [\n ...prevTasks.filter(task => task.id !== lastTask.id),\n {\n ...lastTask,\n variant: 'In progress',\n icon: 'clipboard',\n status: {\n variant: 'pending',\n text: 'In progress'\n }\n }\n ];\n });\n }\n if (lastTask) {\n setActiveTaskId(lastTask.id);\n } else {\n setActiveTaskId(undefined);\n }\n setDisableWrapUp(false);\n } else if (taskAction === 'submit') {\n setServiceTasks(prevTasks => {\n return prevTasks\n .filter(task => task?.status?.text !== 'Queued')\n .map(task => {\n if (task?.status?.text !== 'cancelled') {\n return {\n ...task,\n isResolved: true,\n icon: 'check',\n hideFromTab: true,\n status: {\n variant: 'success' as StatusProps['variant'],\n text: 'Resolve-Completed'\n }\n };\n }\n return task;\n });\n });\n setIsWrapUpTabVisible(false);\n setActiveTaskId(undefined);\n } else if (taskAction === 'launch') {\n setActiveTaskId(WrapUpTask.id);\n setIsWrapUpTabVisible(true);\n }\n } else if (taskAction === 'launch') {\n setActiveTaskId(taskId);\n setServiceTasks(prevTasks => {\n return prevTasks.map(task => {\n if (task.id === taskId) {\n const status = task?.status?.text === 'Queued' ? 'In progress' : task?.status?.text;\n return {\n ...task,\n icon:\n task.status?.text === 'Resolve-Completed' \|\|\n task.status?.text === 'Resolve-Cancelled'\n ? 'check'\n : 'clipboard',\n hideFromTab: false,\n status: {\n variant:\n (status === 'In progress'\n ? ('pending' as StatusProps['variant'])\n : task.status?.variant) \|\| ('info' as StatusProps['variant']),\n text: (status === 'In progress' ? 'In progress' : task.status?.text) \|\| ''\n }\n };\n }\n return task;\n });\n });\n } else if (taskAction === 'cancel') {\n switchTab(serviceTasks, taskId);\n const taskIndex = serviceTasks.findIndex(task => {\n return task.id === taskId;\n });\n const nextTaskId =\n taskIndex >= 0 && taskIndex < serviceTasks.length - 1 && serviceTasks[taskIndex + 1].id;\n setServiceTasks(prevTasks => {\n return prevTasks.map(task => {\n if (task.id === taskId) {\n return {\n ...task,\n hideFromTab: true\n };\n }\n\n if (\n task.id === nextTaskId &&\n task?.status?.text !== 'Resolve-Completed' &&\n task?.status?.text !== 'Resolve-Cancelled'\n ) {\n return {\n ...task,\n icon: 'clipboard',\n status: {\n variant: 'pending' as StatusProps['variant'],\n text: 'In Progress'\n }\n };\n }\n\n return task;\n });\n });\n } else if (taskAction === 'submit') {\n const taskIndex = serviceTasks.findIndex(task => {\n return task.id === taskId;\n });\n const nextTaskId =\n taskIndex >= 0 && taskIndex < serviceTasks.length - 1 && serviceTasks[taskIndex + 1].id;\n setServiceTasks(prevTasks => {\n return prevTasks.map(task => {\n if (task.id === taskId) {\n return {\n ...task,\n icon: 'check',\n isResolved: true,\n hideFromTab: true,\n status: {\n variant: 'success' as StatusProps['variant'],\n text: 'Resolve-Completed'\n }\n };\n }\n if (\n task.id === nextTaskId &&\n task?.status?.text !== 'Resolve-Completed' &&\n task?.status?.text !== 'Resolve-Cancelled'\n ) {\n return {\n ...task,\n icon: 'clipboard',\n status: {\n variant: 'pending' as StatusProps['variant'],\n text: 'In Progress'\n }\n };\n }\n return task;\n });\n });\n switchTab(serviceTasks, taskId);\n } else if (taskAction === 'dismiss') {\n setServiceTasks(prevTasks => {\n return prevTasks.filter(task => task.id !== taskId);\n });\n }\n };\n\n const renderTasks = (selections: MenuItemProps[]) => {\n const newTasks: TaskProps[] = selections.map((selection, i) => {\n const taskId = createUID();\n if (i === 0) {\n return {\n id: taskId,\n icon: 'nothing',\n name: selection.primary,\n secondary: [`S-${Math.floor(1000 + Math.random() * 9000)}`],\n isResolved: false,\n status: {\n variant: 'pending' as StatusProps['variant'],\n text: 'In Progress'\n }\n };\n }\n return {\n id: taskId,\n icon: 'clipboard',\n name: selection.primary,\n secondary: [`S-${Math.floor(1000 + Math.random() * 9000)}`],\n isResolved: false,\n status: {\n variant: 'info' as StatusProps['variant'],\n text: 'Queued'\n }\n };\n });\n setServiceTasks(prevTasks => {\n return [...newTasks, ...prevTasks];\n });\n if (newTasks.length > 0) {\n performTaskAction(newTasks[0].id, 'launch');\n }\n setDisableWrapUp(false);\n };\n const activeServiceTask: TaskProps =\n (serviceTasks.find(task => task.id === activeTaskId) as TaskProps) \|\| {};\n\n // Preparing form fields from added task\n const taskFields =\n TaskPickerMockData.tasks\n .flatMap(task => task.items ?? [])\n .find(({ primary }) => primary === activeServiceTask?.name)?.fields ?? [];\n\n const getFormElements = (readOnly: boolean) => {\n const formElements = taskFields.map((field, i) => {\n const lowerFieldName = field.toLocaleLowerCase();\n /* eslint-disable react/no-array-index-key /\n if (lowerFieldName.includes('date') && lowerFieldName.includes('time')) {\n return <DateTimeInput readOnly={readOnly} label={field} key={i} />;\n }\n if (lowerFieldName.includes('date')) {\n return <DateInput readOnly={readOnly} label={field} key={i} />;\n }\n if (lowerFieldName.includes('time')) {\n return <TimeInput readOnly={readOnly} label={field} key={i} />;\n }\n return <Input readOnly={readOnly} label={field} key={i} />;\n / eslint-enable react/no-array-index-key */\n });\n\n return formElements.length <= 3 ? (\n <>{formElements}</>\n ) : (\n <Grid\n container={{\n cols: 'repeat(2, 1fr)',\n colGap: args.colGap,\n rowGap: args.rowGap\n }}\n >\n {formElements}\n </Grid>\n );\n };\n\n const handleLaunch = (id: string) => {\n performTaskAction(id, 'launch');\n };\n\n const handleDismiss = (id: string) => {\n performTaskAction(id, 'dismiss');\n };\n\n const getTaskName = (taskName: TaskProps['name']) => {\n return taskName === 'Address change' ? 'Address change details' : taskName;\n };\n\n const entityListCtxMenuHandle: ContextMenuProps['handle'] = useRef(null);\n\n const handleRightClick = (e: MouseEvent) => {\n e.preventDefault();\n entityListCtxMenuHandle.current?.setItems([]);\n entityListCtxMenuHandle.current?.setLoading(true);\n entityListCtxMenuHandle.current?.setOpen(true);\n entityListTimeout.current = window.setTimeout(() => {\n entityListCtxMenuHandle.current?.setLoading(false);\n entityListCtxMenuHandle.current?.setItems([\n {\n id: 'item_0',\n primary: 'Field 1',\n selected: true\n },\n {\n id: 'item_1',\n primary: 'Field 2',\n selected: true\n },\n {\n id: 'item_2',\n primary: 'Field 3',\n selected: true\n },\n {\n id: 'item_3',\n primary: 'Field 4',\n selected: true\n }\n ]);\n }, 3000);\n };\n\n const [entityListMockData, setEntityListMock] = useState<EntityListProps['content']>([]);\n const [count, setCount] = useState(0);\n const entityListMock = (\n <EntityList\n content={entityListMockData}\n contextMenu={{\n onItemClick: action('onItemClick'),\n onContextMenu: handleRightClick,\n handle: entityListCtxMenuHandle\n }}\n />\n );\n\n const tasks = serviceTasks.map(task => {\n if (task.id === activeTaskId) {\n return {\n ...task,\n active: true\n };\n }\n return task;\n });\n\n const wrapUp = {\n disable: disableWrapUp,\n onClick: () => {\n performTaskAction(WrapUpTask.id, 'launch');\n setDisableWrapUp(true);\n },\n active: activeTaskId === WrapUpTask.id,\n showTab: isWrapUpTabVisible\n };\n\n const hasActiveTask = tasks.filter(task => task.active).length > 0 \|\| !!wrapUp?.active;\n\n useEffect(() => {\n if (hasActiveTask) {\n const interval = setInterval(() => {\n setCount(prev => {\n if (prev === EntityListMock.length - 1) {\n clearInterval(interval);\n return prev;\n }\n return prev + 1;\n });\n }, 3000);\n return () => clearInterval(interval);\n }\n }, [hasActiveTask]);\n\n useEffect(() => {\n if (count > 0) setEntityListMock([...entityListMockData, EntityListMock[count - 1]]);\n }, [count]);\n\n return (\n <TaskManager\n conversationAI={\n hasActiveTask\n ? {\n content: entityListMock,\n entityCount: count\n }\n : undefined\n }\n ref={taskManagerRef}\n handle={handle}\n tasks={args.serviceTasksEmpty ? [] : tasks}\n emptyText='No tasks added'\n banner={{\n icon: 'script',\n content:\n 'Hi Ms. Ventura, I see that you are interested in changing your monthly due date, is that correct?',\n verbatimStatus: args.verbatimStatus\n }}\n onTaskLaunch={args.onTaskLaunch \|\| handleLaunch}\n onTaskDismiss={args.onTaskDismiss \|\| handleDismiss}\n addTask={\n args.addTask \|\| {\n items: TaskPickerMockData.tasks,\n onAdd: renderTasks\n }\n }\n wrapUp={args.wrapUp \|\| wrapUp}\n main={\n args.main \|\| (\n <TaskView\n header={\n <Flex container={{ justify: 'start', gap: 1, alignItems: 'center' }}>\n <Text variant='h3'>\n {activeTaskId === WrapUpTask.id\n ? WrapUpTask.name\n : getTaskName(activeServiceTask?.name as TaskProps['name'])}\n </Text>\n <StyledStatus\n variant={\n activeTaskId === WrapUpTask.id\n ? WrapUpTask.variant\n : (activeServiceTask.status &&\n (activeServiceTask.status?.variant as StatusProps['variant'])) \|\|\n 'info'\n }\n >\n {activeTaskId === WrapUpTask.id\n ? WrapUpTask.status\n : activeServiceTask.status && activeServiceTask!.status!.text}\n </StyledStatus>\n </Flex>\n }\n actions={\n <MenuButton\n ref={formActionsElemRef}\n menu={{\n items: ['Close task', 'Dismiss task', 'Resolve task'].map(name => ({\n primary: name,\n id: name,\n onClick: action(`Clicked ${name}`)\n }))\n }}\n text='Actions'\n />\n }\n >\n <Form\n id='forming'\n actions={\n activeServiceTask?.isResolved ? (\n <Flex container={{ justify: 'end' }} item={{ grow: 1 }}>\n <Button\n name='Close'\n variant='primary'\n onClick={() => {\n performTaskAction(activeTaskId, 'cancel');\n }}\n >\n Close\n </Button>\n </Flex>\n ) : (\n <>\n <Button\n name='Cancel'\n onClick={() => {\n performTaskAction(activeTaskId, 'cancel');\n }}\n >\n Cancel\n </Button>\n <div>\n <Button\n name='Submit'\n variant='primary'\n onClick={() => {\n performTaskAction(activeTaskId, 'submit');\n }}\n >\n Submit\n </Button>\n </div>\n </>\n )\n }\n >\n <Grid container={{ rowGap: 2 }}>\n {activeTaskId === WrapUpTask.id ? (\n <Timeline activity={activity} currentTime={new Date()} />\n ) : (\n getFormElements(activeServiceTask?.isResolved \|\| false)\n )}\n </Grid>\n </Form>\n </TaskView>\n )\n }\n />\n );\n};\n\nTaskManagerDemo.args = {\n serviceTasksEmpty: false,\n colGap: 2,\n rowGap: 2,\n verbatimStatus: 'pending'\n};\n\nTaskManagerDemo.argTypes = {\n serviceTasksEmpty: { control: { type: 'boolean' } },\n colGap: { control: { type: 'number' } },\n rowGap: { control: { type: 'number' } },\n verbatimStatus: {\n options: ['pending', 'spoken', undefined],\n control: { type: 'select' }\n }\n};\n"]}

package/jsx/dnd/DragDropList/DragDropList.stories.d.ts CHANGED Viewed

@@ -1,10 +1,10 @@
-import { Meta, Story } from '@storybook/react';
-import { DragDropListProps } from '@pega/cosmos-react-dnd';
-declare const _default: Meta<import("@storybook/react").Args>;
+import type { StoryFn } from '@storybook/react';
+import type { DragDropListProps } from '@pega/cosmos-react-dnd';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
 export default _default;
 interface DragDropListDemoProps {
     pullMode?: DragDropListProps['pullMode'];
     pushMode?: DragDropListProps['pushMode'] | 'sort';
 }
-export declare const DragDropListDemo: Story<DragDropListDemoProps>;
+export declare const DragDropListDemo: StoryFn<DragDropListDemoProps>;
 //# sourceMappingURL=DragDropList.stories.d.ts.map

package/jsx/dnd/DragDropList/DragDropList.stories.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DragDropList.stories.d.ts","sourceRoot":"","sources":["../../../src/dnd/DragDropList/DragDropList.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,~~EAAE~~,~~IAAI~~,~~EAAE~~,~~KAAK,~~EAAE,MAAM,kBAAkB,CAAC;~~AAG/C~~,OAAO,~~EAAiC~~,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;;~~AAa1F~~,wBAMU;AAEV,UAAU,qBAAqB;IAC7B,QAAQ,CAAC,EAAE,iBAAiB,CAAC,UAAU,CAAC,CAAC;IACzC,QAAQ,CAAC,EAAE,iBAAiB,CAAC,UAAU,CAAC,GAAG,MAAM,CAAC;CACnD;AAED,eAAO,MAAM,gBAAgB,EAAE,~~KAAK~~,CAAC,qBAAqB,~~CA6DzD~~,CAAC"}
1	+ {"version":3,"file":"DragDropList.stories.d.ts","sourceRoot":"","sources":["../../../src/dnd/DragDropList/DragDropList.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAItD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;;AAahE,wBAMU;AAEV,UAAU,qBAAqB;IAC7B,QAAQ,CAAC,EAAE,iBAAiB,CAAC,UAAU,CAAC,CAAC;IACzC,QAAQ,CAAC,EAAE,iBAAiB,CAAC,UAAU,CAAC,GAAG,MAAM,CAAC;CACnD;AAED,eAAO,MAAM,gBAAgB,EAAE,OAAO,CAAC,qBAAqB,CA6D3D,CAAC"}

package/jsx/dnd/DragDropList/DragDropList.stories.jsx.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DragDropList.stories.jsx","sourceRoot":"","sources":["../../../src/dnd/DragDropList/DragDropList.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC9C,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAGlD,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AACvD,OAAO,EAAE,eAAe,EAAE,YAAY,~~EAAqB~~,MAAM,wBAAwB,CAAC;~~AAE1F~~,OAAO,EAAE,sBAAsB,EAAE,MAAM,uBAAuB,CAAC;AAC/D,OAAO,EACL,mBAAmB,EACnB,YAAY,EACZ,SAAS,EACT,QAAQ,EACR,cAAc,EACd,cAAc,EACd,IAAI,EACL,MAAM,sBAAsB,CAAC;AAE9B,eAAe;IACb,KAAK,EAAE,kBAAkB;IACzB,SAAS,EAAE,YAAY;IACvB,UAAU,EAAE;QACV,MAAM,EAAE,YAAY;KACrB;CACM,CAAC;AAOV,MAAM,CAAC,MAAM,gBAAgB,~~GAAiC~~,CAAC,IAA2B,EAAE,EAAE;~~IAC5F~~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","sourcesContent":["import { useCallback, useState } from 'react';\nimport { action } from '@storybook/addon-actions';\nimport { Meta, ~~Story~~ } from '@storybook/react';\n\nimport { Button, Flex } from '@pega/cosmos-react-core';\nimport { DragDropManager, DragDropList, DragDropListProps } from '@pega/cosmos-react-dnd';\n\nimport { StyledDemoDragDropList } from './DragDropList.styles';\nimport {\n createMockDataArray,\n DemoListItem,\n EmptyItem,\n itemType,\n mockDataArrayA,\n mockDataArrayB,\n sort\n} from './DragDropList.mocks';\n\nexport default {\n title: 'DnD/DragDropList',\n component: DragDropList,\n parameters: {\n layout: 'fullscreen'\n }\n} as Meta;\n\ninterface DragDropListDemoProps {\n pullMode?: DragDropListProps['pullMode'];\n pushMode?: DragDropListProps['pushMode'] \| 'sort';\n}\n\nexport const DragDropListDemo: ~~Story~~<DragDropListDemoProps> = (args: DragDropListDemoProps) => {\n const [arrayA, setArrayA] = useState(mockDataArrayA);\n const [arrayB, setArrayB] = useState(mockDataArrayB);\n\n return (\n <>\n <Button\n onClick={useCallback(() => {\n setArrayA(items => {\n return [...items, ...createMockDataArray(1, itemType, 'A-new')];\n });\n }, [])}\n >\n Add to List A\n </Button>\n <Button\n onClick={useCallback(() => {\n setArrayB(items => {\n return [...items, ...createMockDataArray(1, itemType, 'B-new')];\n });\n }, [])}\n >\n Add to List B\n </Button>\n <DragDropManager>\n <Flex container style={{ minHeight: '100vh' }}>\n <DragDropList\n as={StyledDemoDragDropList}\n id='list1'\n accept={itemType}\n pullMode={args.pullMode}\n pushMode={args.pushMode === 'sort' ? sort : args.pushMode}\n items={arrayA}\n itemRenderer={DemoListItem}\n emptyRenderer={EmptyItem}\n onChange={newArray => {\n setArrayA(newArray);\n action('List A changed')(newArray);\n }}\n style={{ background: 'palegreen' }}\n />\n\n <DragDropList\n as={StyledDemoDragDropList}\n id='list2'\n accept={itemType}\n pullMode={args.pullMode}\n pushMode={args.pushMode === 'sort' ? sort : args.pushMode}\n items={arrayB}\n itemRenderer={DemoListItem}\n emptyRenderer={EmptyItem}\n onChange={newArray => {\n setArrayB(newArray);\n action('List B changed')(newArray);\n }}\n style={{ background: 'lightblue' }}\n />\n </Flex>\n </DragDropManager>\n </>\n );\n};\n\nDragDropListDemo.args = {\n pullMode: 'remove',\n pushMode: 'insert'\n};\n\nDragDropListDemo.argTypes = {\n pullMode: { options: ['remove', 'clone'], control: { type: 'select' } },\n pushMode: { options: ['insert', 'prepend', 'append', 'sort'], control: { type: 'select' } }\n};\n"]}
1	+ {"version":3,"file":"DragDropList.stories.jsx","sourceRoot":"","sources":["../../../src/dnd/DragDropList/DragDropList.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useCallback, useState } from 'react';\nimport { action } from '@storybook/addon-actions';\nimport type { Meta, StoryFn } from '@storybook/react';\n\nimport { Button, Flex } from '@pega/cosmos-react-core';\nimport { DragDropManager, DragDropList } from '@pega/cosmos-react-dnd';\nimport type { DragDropListProps } from '@pega/cosmos-react-dnd';\n\nimport { StyledDemoDragDropList } from './DragDropList.styles';\nimport {\n createMockDataArray,\n DemoListItem,\n EmptyItem,\n itemType,\n mockDataArrayA,\n mockDataArrayB,\n sort\n} from './DragDropList.mocks';\n\nexport default {\n title: 'DnD/DragDropList',\n component: DragDropList,\n parameters: {\n layout: 'fullscreen'\n }\n} as Meta;\n\ninterface DragDropListDemoProps {\n pullMode?: DragDropListProps['pullMode'];\n pushMode?: DragDropListProps['pushMode'] \| 'sort';\n}\n\nexport const DragDropListDemo: StoryFn<DragDropListDemoProps> = (args: DragDropListDemoProps) => {\n const [arrayA, setArrayA] = useState(mockDataArrayA);\n const [arrayB, setArrayB] = useState(mockDataArrayB);\n\n return (\n <>\n <Button\n onClick={useCallback(() => {\n setArrayA(items => {\n return [...items, ...createMockDataArray(1, itemType, 'A-new')];\n });\n }, [])}\n >\n Add to List A\n </Button>\n <Button\n onClick={useCallback(() => {\n setArrayB(items => {\n return [...items, ...createMockDataArray(1, itemType, 'B-new')];\n });\n }, [])}\n >\n Add to List B\n </Button>\n <DragDropManager>\n <Flex container style={{ minHeight: '100vh' }}>\n <DragDropList\n as={StyledDemoDragDropList}\n id='list1'\n accept={itemType}\n pullMode={args.pullMode}\n pushMode={args.pushMode === 'sort' ? sort : args.pushMode}\n items={arrayA}\n itemRenderer={DemoListItem}\n emptyRenderer={EmptyItem}\n onChange={newArray => {\n setArrayA(newArray);\n action('List A changed')(newArray);\n }}\n style={{ background: 'palegreen' }}\n />\n\n <DragDropList\n as={StyledDemoDragDropList}\n id='list2'\n accept={itemType}\n pullMode={args.pullMode}\n pushMode={args.pushMode === 'sort' ? sort : args.pushMode}\n items={arrayB}\n itemRenderer={DemoListItem}\n emptyRenderer={EmptyItem}\n onChange={newArray => {\n setArrayB(newArray);\n action('List B changed')(newArray);\n }}\n style={{ background: 'lightblue' }}\n />\n </Flex>\n </DragDropManager>\n </>\n );\n};\n\nDragDropListDemo.args = {\n pullMode: 'remove',\n pushMode: 'insert'\n};\n\nDragDropListDemo.argTypes = {\n pullMode: { options: ['remove', 'clone'], control: { type: 'select' } },\n pushMode: { options: ['insert', 'prepend', 'append', 'sort'], control: { type: 'select' } }\n};\n"]}

package/jsx/dnd/StandardDragDropList/Demo.d.ts CHANGED Viewed

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { MockRawItem } from './mockData';
 interface StandardDragDropListDemoProps {
     items: MockRawItem[];

package/jsx/dnd/StandardDragDropList/Demo.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Demo.d.ts","sourceRoot":"","sources":["../../../src/dnd/StandardDragDropList/Demo.tsx"],"names":[],"mappings":"AAWA,OAAO,EAEL,WAAW,EAKZ,MAAM,YAAY,CAAC;AAIpB,UAAU,6BAA6B;IACrC,KAAK,EAAE,WAAW,EAAE,CAAC;CACtB;oCAE0B,6BAA6B,KAAG,WAAW;AAAtE,~~wBAoOE~~"}
1	+ {"version":3,"file":"Demo.d.ts","sourceRoot":"","sources":["../../../src/dnd/StandardDragDropList/Demo.tsx"],"names":[],"mappings":";AAWA,OAAO,EAEL,WAAW,EAKZ,MAAM,YAAY,CAAC;AAIpB,UAAU,6BAA6B;IACrC,KAAK,EAAE,WAAW,EAAE,CAAC;CACtB;oCAE0B,6BAA6B,KAAG,WAAW;AAAtE,wBAkOE"}

package/jsx/dnd/StandardDragDropList/Demo.jsx CHANGED Viewed

@@ -123,14 +123,12 @@ export default ({ items }) => {
     }, [mockRawItems, onAddToGroup, createListItems]);
     return (<>
       <DragDropManager>
-        {useMemo(() => (<StandardDragDropList accept={[...contentTypes, 'Field', 'View', 'Group']} heading='Mock view' items={itemsToRender} onChange={onChange} footer={<>
-                  <Button onClick={showSelectionMenu} variant='link'>
-                    <Flex container={{ inline: true, alignItems: 'center', gap: 1 }}>
-                      <Icon name='plus'/>
-                      <span>Add</span>
-                    </Flex>
-                  </Button>
-                </>}/>), [itemsToRender, showSelectionMenu, onChange])}
+        {useMemo(() => (<StandardDragDropList accept={[...contentTypes, 'Field', 'View', 'Group']} heading='Mock view' items={itemsToRender} onChange={onChange} footer={<Button onClick={showSelectionMenu} variant='link'>
+                  <Flex container={{ inline: true, alignItems: 'center', gap: 1 }}>
+                    <Icon name='plus'/>
+                    <span>Add</span>
+                  </Flex>
+                </Button>}/>), [itemsToRender, showSelectionMenu, onChange])}
       </DragDropManager>
       {configTarget && configItemId && (<ItemConfig itemId={configItemId} target={configTarget} onCancel={() => {
                 setConfigTarget(null);

package/jsx/dnd/StandardDragDropList/Demo.jsx.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Demo.jsx","sourceRoot":"","sources":["../../../src/dnd/StandardDragDropList/Demo.tsx"],"names":[],"mappings":"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","sourcesContent":["import { MouseEvent, useCallback, useMemo, useState } from 'react';\n\nimport {\n StandardDragDropList,\n type StandardDragDropListItemProps,\n StandardDragDropListProps,\n DragDropManager\n} from '@pega/cosmos-react-dnd';\nimport { Button, Flex, Icon, useElement } from '@pega/cosmos-react-core';\nimport { MultiSelectInputProps } from '@pega/cosmos-react-core/lib/components/ComboBox/MultiSelectInput/MultiSelectInput.types';\n\nimport {\n contentTypes,\n MockRawItem,\n mockQuery,\n mockFields,\n mockGroups,\n mockViews\n} from './mockData';\nimport ItemConfig from './ItemConfig';\nimport SelectionMenu, { SelectionMenuProps } from './SelectionMenu';\n\ninterface StandardDragDropListDemoProps {\n items: MockRawItem[];\n}\n\nexport default ({ items }: StandardDragDropListDemoProps): JSX.Element => {\n // The state of the list's content is maintained here and the raw item objects are transformed below prior to render.\n const [mockRawItems, setMockRawItems] = useState<MockRawItem[]>(items);\n\n const [configItemId, setConfigItemId] = useState<MockRawItem['id'] \| null>(null);\n\n const [configTarget, setConfigTarget] = useElement(null);\n\n const [selectionMenuTarget, setSelectionMenuTarget] = useElement(null);\n\n const [selectionConstraint, setSelectionConstraint] =\n useState<SelectionMenuProps['constraint']>();\n\n const [addToItemId, setAddToItemId] = useState<MockRawItem['id'] \| null>(null);\n\n const [errors, setErrors] = useState<{ rawItemId: MockRawItem['id']; message: string }[]>([]);\n\n const onAddContent = useCallback(\n async (selected: NonNullable<MultiSelectInputProps['selected']>) => {\n setSelectionMenuTarget(null);\n setSelectionConstraint(undefined);\n\n if (selected.length === 0) return;\n\n const addedItems = await mockQuery({ id: selected.map(({ id }) => id) });\n\n setMockRawItems(cur => {\n if (addToItemId) {\n return cur.map(item => {\n if (item.id === addToItemId && item.items) {\n return {\n ...item,\n items: [\n ...item.items,\n ...addedItems.map(nestedItem => ({\n ...nestedItem,\n id: `${addToItemId}:${nestedItem.id}`\n }))\n ]\n };\n }\n return item;\n });\n }\n\n return [...cur, ...addedItems.filter(newItem => !cur.find(({ id }) => id === newItem.id))];\n });\n },\n [addToItemId, setSelectionMenuTarget]\n );\n\n const onItemConfigure = useCallback(\n (id: StandardDragDropListItemProps['id'], e: MouseEvent<HTMLButtonElement>) => {\n setConfigTarget(e.currentTarget);\n setConfigItemId(id);\n },\n [setConfigTarget]\n );\n\n const onItemRemove = useCallback((id: StandardDragDropListItemProps['id']) => {\n setMockRawItems(cur =>\n cur.filter(rawItem => {\n if (rawItem.id === id) return false;\n // See if it's there before setting a new array instance.\n if (rawItem.items && rawItem.items.find(ri => ri.id === id)) {\n rawItem.items = rawItem.items.filter(ri => ri.id !== id);\n }\n return true;\n })\n );\n }, []);\n\n const onAddToGroup = useCallback(\n (groupId: StandardDragDropListItemProps['id'], e: MouseEvent<Element>) => {\n setAddToItemId(groupId);\n setSelectionMenuTarget(e.currentTarget);\n setSelectionConstraint({ types: ['Field'] });\n },\n [setSelectionMenuTarget]\n );\n\n const showSelectionMenu = useCallback(\n (e: MouseEvent<HTMLButtonElement>) => {\n setSelectionMenuTarget(e.currentTarget);\n },\n [setSelectionMenuTarget]\n );\n\n const onChange: StandardDragDropListProps['onChange'] = useCallback(updatedItems => {\n setMockRawItems(cur => {\n const findRawItem = (id: string) => {\n for (let i = 0; i < cur.length; i += 1) {\n if (cur[i].id === id) return cur[i];\n\n if (cur[i].items) {\n const subItem = cur[i].items!.find(s => s.id === id);\n if (subItem) return subItem;\n }\n }\n\n return [...mockFields, ...mockViews, ...mockGroups].find(rawItem => rawItem.id === id)!;\n };\n\n return updatedItems.map(item => {\n const rawItem = findRawItem(item.id);\n\n if (item.items) {\n const rawSubItems = item.items.map(subItem => {\n return findRawItem(subItem.id);\n });\n\n return { ...rawItem, items: rawSubItems };\n }\n\n return rawItem;\n });\n });\n }, []);\n\n const createListItems = useCallback(\n (mci: MockRawItem[], onATG: typeof onAddToGroup): StandardDragDropListProps['items'] => {\n return mci.map(rawItem => {\n const itemError = errors?.find(error => error.rawItemId === rawItem.id);\n\n const primary =\n rawItem.type === 'View'\n ? {\n text: rawItem.label,\n href: '/some-url',\n onClick: (e: MouseEvent) => {\n e.preventDefault();\n // Navigate or present a dialog/panel for clicked item...\n }\n }\n : rawItem.label;\n\n const baseItem: StandardDragDropListItemProps = {\n // type property is being spread in via the mock content item.\n ...rawItem,\n primary,\n secondary: rawItem.subType ?? rawItem.type,\n status: itemError ? { type: 'error', message: itemError.message } : undefined,\n onConfigure: onItemConfigure,\n onRemove: onItemRemove,\n items: undefined\n };\n\n return rawItem.type === 'Group'\n ? {\n ...baseItem,\n items: rawItem.items ? createListItems(rawItem.items, onATG) : [],\n accept: 'Field',\n onAddTo: onATG\n }\n : baseItem;\n });\n },\n [errors, onItemConfigure, onItemRemove]\n );\n\n // Here we transform MockRawItems -> StandardDragDropListProps['items']\n const itemsToRender: StandardDragDropListProps['items'] = useMemo(() => {\n return createListItems(mockRawItems, onAddToGroup);\n }, [mockRawItems, onAddToGroup, createListItems]);\n\n return (\n <>\n <DragDropManager>\n {useMemo(\n () => (\n <StandardDragDropList\n accept={[...contentTypes, 'Field', 'View', 'Group']}\n heading='Mock view'\n items={itemsToRender}\n onChange={onChange}\n footer={\n <>\n <Button onClick={showSelectionMenu} variant='link'>\n <Flex container={{ inline: true, alignItems: 'center', gap: 1 }}>\n <Icon name='plus' />\n <span>Add</span>\n </Flex>\n </Button>\n </>\n }\n />\n ),\n [itemsToRender, showSelectionMenu, onChange]\n )}\n </DragDropManager>\n {configTarget && configItemId && (\n <ItemConfig\n itemId={configItemId}\n target={configTarget}\n onCancel={() => {\n setConfigTarget(null);\n setConfigItemId(null);\n setErrors(currentErrors => {\n const currentItemError = currentErrors?.find(err => err.rawItemId === configItemId);\n\n return currentItemError\n ? currentErrors.filter(err => err.rawItemId !== configItemId)\n : [\n ...currentErrors,\n { rawItemId: configItemId, message: 'Misconfiguration detected' }\n ];\n });\n }}\n onSubmit={() => {\n setConfigTarget(null);\n setConfigItemId(null);\n }}\n />\n )}\n {selectionMenuTarget && (\n <SelectionMenu\n target={selectionMenuTarget}\n constraint={selectionConstraint}\n onCancel={() => {\n setSelectionMenuTarget(null);\n setAddToItemId(null);\n setSelectionConstraint(undefined);\n }}\n onSubmit={onAddContent}\n />\n )}\n </>\n );\n};\n"]}
1	+ {"version":3,"file":"Demo.jsx","sourceRoot":"","sources":["../../../src/dnd/StandardDragDropList/Demo.tsx"],"names":[],"mappings":"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","sourcesContent":["import { MouseEvent, useCallback, useMemo, useState } from 'react';\n\nimport {\n StandardDragDropList,\n type StandardDragDropListItemProps,\n StandardDragDropListProps,\n DragDropManager\n} from '@pega/cosmos-react-dnd';\nimport { Button, Flex, Icon, useElement } from '@pega/cosmos-react-core';\nimport { MultiSelectInputProps } from '@pega/cosmos-react-core/lib/components/ComboBox/MultiSelectInput/MultiSelectInput.types';\n\nimport {\n contentTypes,\n MockRawItem,\n mockQuery,\n mockFields,\n mockGroups,\n mockViews\n} from './mockData';\nimport ItemConfig from './ItemConfig';\nimport SelectionMenu, { SelectionMenuProps } from './SelectionMenu';\n\ninterface StandardDragDropListDemoProps {\n items: MockRawItem[];\n}\n\nexport default ({ items }: StandardDragDropListDemoProps): JSX.Element => {\n // The state of the list's content is maintained here and the raw item objects are transformed below prior to render.\n const [mockRawItems, setMockRawItems] = useState<MockRawItem[]>(items);\n\n const [configItemId, setConfigItemId] = useState<MockRawItem['id'] \| null>(null);\n\n const [configTarget, setConfigTarget] = useElement(null);\n\n const [selectionMenuTarget, setSelectionMenuTarget] = useElement(null);\n\n const [selectionConstraint, setSelectionConstraint] =\n useState<SelectionMenuProps['constraint']>();\n\n const [addToItemId, setAddToItemId] = useState<MockRawItem['id'] \| null>(null);\n\n const [errors, setErrors] = useState<{ rawItemId: MockRawItem['id']; message: string }[]>([]);\n\n const onAddContent = useCallback(\n async (selected: NonNullable<MultiSelectInputProps['selected']>) => {\n setSelectionMenuTarget(null);\n setSelectionConstraint(undefined);\n\n if (selected.length === 0) return;\n\n const addedItems = await mockQuery({ id: selected.map(({ id }) => id) });\n\n setMockRawItems(cur => {\n if (addToItemId) {\n return cur.map(item => {\n if (item.id === addToItemId && item.items) {\n return {\n ...item,\n items: [\n ...item.items,\n ...addedItems.map(nestedItem => ({\n ...nestedItem,\n id: `${addToItemId}:${nestedItem.id}`\n }))\n ]\n };\n }\n return item;\n });\n }\n\n return [...cur, ...addedItems.filter(newItem => !cur.find(({ id }) => id === newItem.id))];\n });\n },\n [addToItemId, setSelectionMenuTarget]\n );\n\n const onItemConfigure = useCallback(\n (id: StandardDragDropListItemProps['id'], e: MouseEvent<HTMLButtonElement>) => {\n setConfigTarget(e.currentTarget);\n setConfigItemId(id);\n },\n [setConfigTarget]\n );\n\n const onItemRemove = useCallback((id: StandardDragDropListItemProps['id']) => {\n setMockRawItems(cur =>\n cur.filter(rawItem => {\n if (rawItem.id === id) return false;\n // See if it's there before setting a new array instance.\n if (rawItem.items && rawItem.items.find(ri => ri.id === id)) {\n rawItem.items = rawItem.items.filter(ri => ri.id !== id);\n }\n return true;\n })\n );\n }, []);\n\n const onAddToGroup = useCallback(\n (groupId: StandardDragDropListItemProps['id'], e: MouseEvent<Element>) => {\n setAddToItemId(groupId);\n setSelectionMenuTarget(e.currentTarget);\n setSelectionConstraint({ types: ['Field'] });\n },\n [setSelectionMenuTarget]\n );\n\n const showSelectionMenu = useCallback(\n (e: MouseEvent<HTMLButtonElement>) => {\n setSelectionMenuTarget(e.currentTarget);\n },\n [setSelectionMenuTarget]\n );\n\n const onChange: StandardDragDropListProps['onChange'] = useCallback(updatedItems => {\n setMockRawItems(cur => {\n const findRawItem = (id: string) => {\n for (let i = 0; i < cur.length; i += 1) {\n if (cur[i].id === id) return cur[i];\n\n if (cur[i].items) {\n const subItem = cur[i].items!.find(s => s.id === id);\n if (subItem) return subItem;\n }\n }\n\n return [...mockFields, ...mockViews, ...mockGroups].find(rawItem => rawItem.id === id)!;\n };\n\n return updatedItems.map(item => {\n const rawItem = findRawItem(item.id);\n\n if (item.items) {\n const rawSubItems = item.items.map(subItem => {\n return findRawItem(subItem.id);\n });\n\n return { ...rawItem, items: rawSubItems };\n }\n\n return rawItem;\n });\n });\n }, []);\n\n const createListItems = useCallback(\n (mci: MockRawItem[], onATG: typeof onAddToGroup): StandardDragDropListProps['items'] => {\n return mci.map(rawItem => {\n const itemError = errors?.find(error => error.rawItemId === rawItem.id);\n\n const primary =\n rawItem.type === 'View'\n ? {\n text: rawItem.label,\n href: '/some-url',\n onClick: (e: MouseEvent) => {\n e.preventDefault();\n // Navigate or present a dialog/panel for clicked item...\n }\n }\n : rawItem.label;\n\n const baseItem: StandardDragDropListItemProps = {\n // type property is being spread in via the mock content item.\n ...rawItem,\n primary,\n secondary: rawItem.subType ?? rawItem.type,\n status: itemError ? { type: 'error', message: itemError.message } : undefined,\n onConfigure: onItemConfigure,\n onRemove: onItemRemove,\n items: undefined\n };\n\n return rawItem.type === 'Group'\n ? {\n ...baseItem,\n items: rawItem.items ? createListItems(rawItem.items, onATG) : [],\n accept: 'Field',\n onAddTo: onATG\n }\n : baseItem;\n });\n },\n [errors, onItemConfigure, onItemRemove]\n );\n\n // Here we transform MockRawItems -> StandardDragDropListProps['items']\n const itemsToRender: StandardDragDropListProps['items'] = useMemo(() => {\n return createListItems(mockRawItems, onAddToGroup);\n }, [mockRawItems, onAddToGroup, createListItems]);\n\n return (\n <>\n <DragDropManager>\n {useMemo(\n () => (\n <StandardDragDropList\n accept={[...contentTypes, 'Field', 'View', 'Group']}\n heading='Mock view'\n items={itemsToRender}\n onChange={onChange}\n footer={\n <Button onClick={showSelectionMenu} variant='link'>\n <Flex container={{ inline: true, alignItems: 'center', gap: 1 }}>\n <Icon name='plus' />\n <span>Add</span>\n </Flex>\n </Button>\n }\n />\n ),\n [itemsToRender, showSelectionMenu, onChange]\n )}\n </DragDropManager>\n {configTarget && configItemId && (\n <ItemConfig\n itemId={configItemId}\n target={configTarget}\n onCancel={() => {\n setConfigTarget(null);\n setConfigItemId(null);\n setErrors(currentErrors => {\n const currentItemError = currentErrors?.find(err => err.rawItemId === configItemId);\n\n return currentItemError\n ? currentErrors.filter(err => err.rawItemId !== configItemId)\n : [\n ...currentErrors,\n { rawItemId: configItemId, message: 'Misconfiguration detected' }\n ];\n });\n }}\n onSubmit={() => {\n setConfigTarget(null);\n setConfigItemId(null);\n }}\n />\n )}\n {selectionMenuTarget && (\n <SelectionMenu\n target={selectionMenuTarget}\n constraint={selectionConstraint}\n onCancel={() => {\n setSelectionMenuTarget(null);\n setAddToItemId(null);\n setSelectionConstraint(undefined);\n }}\n onSubmit={onAddContent}\n />\n )}\n </>\n );\n};\n"]}

package/jsx/dnd/StandardDragDropList/Popover.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 import { PopoverProps as CorePopoverProps } from '@pega/cosmos-react-core';
-declare type PopoverProps = {
+type PopoverProps = {
     target: NonNullable<CorePopoverProps['target']>;
     loading?: boolean;
     heading: string;

package/jsx/dnd/StandardDragDropList/Popover.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../../../src/dnd/StandardDragDropList/Popover.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAA8B,MAAM,OAAO,CAAC;AAG9D,OAAO,EAKL,YAAY,IAAI,gBAAgB,EAYjC,MAAM,yBAAyB,CAAC;AAEjC,~~aAAK~~,YAAY,GAAG;IAClB,MAAM,EAAE,WAAW,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC,CAAC;IAChD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAaF,QAAA,MAAM,OAAO,+EAQV,YAAY,gBAyDd,CAAC;AAEF,eAAe,OAAO,CAAC"}
1	+ {"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../../../src/dnd/StandardDragDropList/Popover.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAA8B,MAAM,OAAO,CAAC;AAG9D,OAAO,EAKL,YAAY,IAAI,gBAAgB,EAYjC,MAAM,yBAAyB,CAAC;AAEjC,KAAK,YAAY,GAAG;IAClB,MAAM,EAAE,WAAW,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC,CAAC;IAChD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAaF,QAAA,MAAM,OAAO,+EAQV,YAAY,gBAyDd,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/jsx/dnd/StandardDragDropList/StandardDragDropList.stories.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
-import { Meta, Story } from '@storybook/react';
-declare const _default: Meta<import("@storybook/react").Args>;
+import type { StoryFn } from '@storybook/react';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
 export default _default;
-export declare const StandardDragDropListDemo: Story;
+export declare const StandardDragDropListDemo: StoryFn;
 //# sourceMappingURL=StandardDragDropList.stories.d.ts.map

package/jsx/dnd/StandardDragDropList/StandardDragDropList.stories.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"StandardDragDropList.stories.d.ts","sourceRoot":"","sources":["../../../src/dnd/StandardDragDropList/StandardDragDropList.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,~~EAAE~~,~~IAAI~~,~~EAAE~~,~~KAAK,~~EAAE,MAAM,kBAAkB,CAAC;;~~AAQ/C~~,wBAGU;AAEV,eAAO,MAAM,wBAAwB,EAAE,~~KAWtC~~,CAAC"}
1	+ {"version":3,"file":"StandardDragDropList.stories.d.ts","sourceRoot":"","sources":["../../../src/dnd/StandardDragDropList/StandardDragDropList.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;;AAQtD,wBAGU;AAEV,eAAO,MAAM,wBAAwB,EAAE,OAWtC,CAAC"}

package/jsx/dnd/StandardDragDropList/StandardDragDropList.stories.jsx.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"StandardDragDropList.stories.jsx","sourceRoot":"","sources":["../../../src/dnd/StandardDragDropList/StandardDragDropList.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAE/C,OAAO,oBAAoB,MAAM,QAAQ,CAAC;AAC1C,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAE/D,eAAe;IACb,KAAK,EAAE,0BAA0B;IACjC,SAAS,EAAE,oBAAoB;CACxB,CAAC;AAEV,MAAM,CAAC,MAAM,wBAAwB,~~GAAU~~,GAAG,EAAE;~~IAClD~~,OAAO,CACL,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC,CAC/C;MAAA,CAAC,oBAAoB,CACnB,KAAK,CAAC,CAAC,CAAC,GAAG,UAAU,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,SAAS,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,EAE9E;MAAA,CAAC,oBAAoB,CACnB,KAAK,CAAC,CAAC,CAAC,GAAG,UAAU,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,SAAS,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,EAE/F;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { Meta, ~~Story~~ } from '@storybook/react';\n\nimport { StandardDragDropList } from '@pega/cosmos-react-dnd';\nimport { Flex } from '@pega/cosmos-react-core';\n\nimport StandardListDemoComp from './Demo';\nimport { mockFields, mockViews, mockGroups } from './mockData';\n\nexport default {\n title: 'DnD/StandardDragDropList',\n component: StandardDragDropList\n} as Meta;\n\nexport const StandardDragDropListDemo: ~~Story~~ = () => {\n return (\n <Flex container={{ direction: 'column', gap: 2 }}>\n <StandardListDemoComp\n items={[...mockFields.slice(0, 3), ...mockViews.slice(0, 2), mockGroups[0]]}\n />\n <StandardListDemoComp\n items={[...mockFields.slice(3, 6), ...mockViews.slice(2, 4), mockGroups[1], mockGroups[2]]}\n />\n </Flex>\n );\n};\n"]}
1	+ {"version":3,"file":"StandardDragDropList.stories.jsx","sourceRoot":"","sources":["../../../src/dnd/StandardDragDropList/StandardDragDropList.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAE/C,OAAO,oBAAoB,MAAM,QAAQ,CAAC;AAC1C,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAE/D,eAAe;IACb,KAAK,EAAE,0BAA0B;IACjC,SAAS,EAAE,oBAAoB;CACxB,CAAC;AAEV,MAAM,CAAC,MAAM,wBAAwB,GAAY,GAAG,EAAE;IACpD,OAAO,CACL,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC,CAC/C;MAAA,CAAC,oBAAoB,CACnB,KAAK,CAAC,CAAC,CAAC,GAAG,UAAU,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,SAAS,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,EAE9E;MAAA,CAAC,oBAAoB,CACnB,KAAK,CAAC,CAAC,CAAC,GAAG,UAAU,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,SAAS,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,EAE/F;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\n\nimport { StandardDragDropList } from '@pega/cosmos-react-dnd';\nimport { Flex } from '@pega/cosmos-react-core';\n\nimport StandardListDemoComp from './Demo';\nimport { mockFields, mockViews, mockGroups } from './mockData';\n\nexport default {\n title: 'DnD/StandardDragDropList',\n component: StandardDragDropList\n} as Meta;\n\nexport const StandardDragDropListDemo: StoryFn = () => {\n return (\n <Flex container={{ direction: 'column', gap: 2 }}>\n <StandardListDemoComp\n items={[...mockFields.slice(0, 3), ...mockViews.slice(0, 2), mockGroups[0]]}\n />\n <StandardListDemoComp\n items={[...mockFields.slice(3, 6), ...mockViews.slice(2, 4), mockGroups[1], mockGroups[2]]}\n />\n </Flex>\n );\n};\n"]}

package/jsx/dnd/StandardDragDropList/mockData.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
-export declare type ContentType = 'Field' | 'View' | 'Group';
-export declare type FieldType = typeof fieldTypes[number];
+export type ContentType = 'Field' | 'View' | 'Group';
+export type FieldType = (typeof fieldTypes)[number];
 export interface MockRawItem {
     id: string;
     label: string;

package/jsx/dnd/StandardDragDropList/mockData.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"mockData.d.ts","sourceRoot":"","sources":["../../../src/dnd/StandardDragDropList/mockData.ts"],"names":[],"mappings":"AAEA,~~oBAAY~~,WAAW,GAAG,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC;AACrD,~~oBAAY~~,SAAS,GAAG,OAAO,UAAU,CAAC,MAAM,CAAC,CAAC;~~AAGlD~~,MAAM,WAAW,WAAW;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,WAAW,CAAC;IAClB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,WAAW,EAAE,CAAC;CACvB;AAGD,MAAM,WAAW,eAAe;IAC9B,EAAE,CAAC,EAAE,WAAW,CAAC,IAAI,CAAC,GAAG,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC;IAC7C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAQD,QAAA,MAAM,UAAU,gLAcN,CAAC;AAEX,eAAO,MAAM,YAAY,iMAA4C,CAAC;AAEtE,eAAO,MAAM,UAAU,EAAE,WAAW,EAOlC,CAAC;AAEH,eAAO,MAAM,SAAS,EAAE,WAAW,EAMjC,CAAC;AAEH,eAAO,MAAM,UAAU,EAAE,WAAW,EAOlC,CAAC;AAGH,eAAO,MAAM,SAAS,yDAQnB,eAAe,KAAQ,QAAQ,WAAW,EAAE,CAiC9C,CAAC"}
1	+ {"version":3,"file":"mockData.d.ts","sourceRoot":"","sources":["../../../src/dnd/StandardDragDropList/mockData.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC;AACrD,MAAM,MAAM,SAAS,GAAG,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,CAAC,CAAC;AAGpD,MAAM,WAAW,WAAW;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,WAAW,CAAC;IAClB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,WAAW,EAAE,CAAC;CACvB;AAGD,MAAM,WAAW,eAAe;IAC9B,EAAE,CAAC,EAAE,WAAW,CAAC,IAAI,CAAC,GAAG,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC;IAC7C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAQD,QAAA,MAAM,UAAU,gLAcN,CAAC;AAEX,eAAO,MAAM,YAAY,iMAA4C,CAAC;AAEtE,eAAO,MAAM,UAAU,EAAE,WAAW,EAOlC,CAAC;AAEH,eAAO,MAAM,SAAS,EAAE,WAAW,EAMjC,CAAC;AAEH,eAAO,MAAM,UAAU,EAAE,WAAW,EAOlC,CAAC;AAGH,eAAO,MAAM,SAAS,yDAQnB,eAAe,KAAQ,QAAQ,WAAW,EAAE,CAiC9C,CAAC"}

package/jsx/dnd/StandardDragDropList/mockData.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"mockData.js","sourceRoot":"","sources":["../../../src/dnd/StandardDragDropList/mockData.ts"],"names":[],"mappings":"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","sourcesContent":["import { createUID } from '@pega/cosmos-react-core';\n\nexport type ContentType = 'Field' \| 'View' \| 'Group';\nexport type FieldType = typeof fieldTypes[number];\n\n// A simple mock of an object type before it is transformed to a ContentItem\nexport interface MockRawItem {\n id: string;\n label: string;\n type: ContentType;\n subType?: FieldType;\n items?: MockRawItem[];\n}\n\n// Used as the arg type to the simulated query function.\nexport interface MockQueryParams {\n id?: MockRawItem['id'] \| MockRawItem['id'][];\n filter?: string;\n type?: ContentType;\n subType?: FieldType;\n limit?: number;\n offset?: number;\n delay?: number;\n}\n\nconst getRandomInt = (min: number, max: number) => {\n min = Math.ceil(min);\n max = Math.floor(max);\n return Math.floor(Math.random() * (max - min + 1)) + min;\n};\n\nconst fieldTypes = [\n 'Text (single line)',\n 'Text (paragraph)',\n 'Integer',\n 'Decimal',\n 'Currency',\n 'Boolean',\n 'Date & time',\n 'Date only',\n 'Time only',\n 'Email',\n 'Phone',\n 'URL',\n 'Picklist'\n] as const;\n\nexport const contentTypes = [...fieldTypes, 'View', 'Group'] as const;\n\nexport const mockFields: MockRawItem[] = Array.from({ length: 500 }, (_, i) => {\n return {\n id: createUID(),\n label: `Field-${i + 1}`,\n type: 'Field',\n subType: fieldTypes[getRandomInt(0, fieldTypes.length - 1)]\n };\n});\n\nexport const mockViews: MockRawItem[] = Array.from({ length: 50 }, (_, i) => {\n return {\n id: createUID(),\n label: `View-${i + 1}`,\n type: 'View'\n };\n});\n\nexport const mockGroups: MockRawItem[] = Array.from({ length: 3 }, (_, i) => {\n return {\n id: createUID(),\n label: `Group-${i + 1}`,\n type: 'Group',\n items: i === 0 ? mockFields.slice(-3) : mockFields.slice((i + 1) * -3, i * -3)\n };\n});\n\n// Simulated query functionality to assist with loading states and fetching specifc content item types.\nexport const mockQuery = ({\n id,\n filter,\n type,\n subType,\n limit = 100,\n offset = 0,\n delay = 0\n}: MockQueryParams = {}): Promise<MockRawItem[]> => {\n return new Promise(resolve => {\n setTimeout(() => {\n let contentItems: MockRawItem[] = [];\n\n if (id) {\n resolve(\n [...mockFields, ...mockViews, ...mockGroups].filter(item => {\n return Array.isArray(id) ? id.includes(item.id) : item.id === id;\n })\n );\n return;\n }\n\n if (type) {\n if (type === 'Field') {\n contentItems = subType ? mockFields.filter(f => f.subType === subType) : mockFields;\n } else if (type === 'View') {\n contentItems = mockViews;\n } else if (type === 'Group') {\n contentItems = mockGroups;\n }\n } else {\n contentItems = [...mockFields, ...mockViews, ...mockGroups];\n }\n\n if (filter) {\n contentItems = contentItems.filter(item => item.label.includes(filter));\n }\n\n resolve(contentItems.slice(offset, limit));\n }, delay);\n });\n};\n"]}
1	+ {"version":3,"file":"mockData.js","sourceRoot":"","sources":["../../../src/dnd/StandardDragDropList/mockData.ts"],"names":[],"mappings":"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","sourcesContent":["import { createUID } from '@pega/cosmos-react-core';\n\nexport type ContentType = 'Field' \| 'View' \| 'Group';\nexport type FieldType = (typeof fieldTypes)[number];\n\n// A simple mock of an object type before it is transformed to a ContentItem\nexport interface MockRawItem {\n id: string;\n label: string;\n type: ContentType;\n subType?: FieldType;\n items?: MockRawItem[];\n}\n\n// Used as the arg type to the simulated query function.\nexport interface MockQueryParams {\n id?: MockRawItem['id'] \| MockRawItem['id'][];\n filter?: string;\n type?: ContentType;\n subType?: FieldType;\n limit?: number;\n offset?: number;\n delay?: number;\n}\n\nconst getRandomInt = (min: number, max: number) => {\n min = Math.ceil(min);\n max = Math.floor(max);\n return Math.floor(Math.random() * (max - min + 1)) + min;\n};\n\nconst fieldTypes = [\n 'Text (single line)',\n 'Text (paragraph)',\n 'Integer',\n 'Decimal',\n 'Currency',\n 'Boolean',\n 'Date & time',\n 'Date only',\n 'Time only',\n 'Email',\n 'Phone',\n 'URL',\n 'Picklist'\n] as const;\n\nexport const contentTypes = [...fieldTypes, 'View', 'Group'] as const;\n\nexport const mockFields: MockRawItem[] = Array.from({ length: 500 }, (_, i) => {\n return {\n id: createUID(),\n label: `Field-${i + 1}`,\n type: 'Field',\n subType: fieldTypes[getRandomInt(0, fieldTypes.length - 1)]\n };\n});\n\nexport const mockViews: MockRawItem[] = Array.from({ length: 50 }, (_, i) => {\n return {\n id: createUID(),\n label: `View-${i + 1}`,\n type: 'View'\n };\n});\n\nexport const mockGroups: MockRawItem[] = Array.from({ length: 3 }, (_, i) => {\n return {\n id: createUID(),\n label: `Group-${i + 1}`,\n type: 'Group',\n items: i === 0 ? mockFields.slice(-3) : mockFields.slice((i + 1) * -3, i * -3)\n };\n});\n\n// Simulated query functionality to assist with loading states and fetching specifc content item types.\nexport const mockQuery = ({\n id,\n filter,\n type,\n subType,\n limit = 100,\n offset = 0,\n delay = 0\n}: MockQueryParams = {}): Promise<MockRawItem[]> => {\n return new Promise(resolve => {\n setTimeout(() => {\n let contentItems: MockRawItem[] = [];\n\n if (id) {\n resolve(\n [...mockFields, ...mockViews, ...mockGroups].filter(item => {\n return Array.isArray(id) ? id.includes(item.id) : item.id === id;\n })\n );\n return;\n }\n\n if (type) {\n if (type === 'Field') {\n contentItems = subType ? mockFields.filter(f => f.subType === subType) : mockFields;\n } else if (type === 'View') {\n contentItems = mockViews;\n } else if (type === 'Group') {\n contentItems = mockGroups;\n }\n } else {\n contentItems = [...mockFields, ...mockViews, ...mockGroups];\n }\n\n if (filter) {\n contentItems = contentItems.filter(item => item.label.includes(filter));\n }\n\n resolve(contentItems.slice(offset, limit));\n }, delay);\n });\n};\n"]}

package/jsx/rte/DynamicContentEditor/DynamicContentEditor.stories.d.ts ADDED Viewed

@@ -0,0 +1,8 @@
+import { StoryFn } from '@storybook/react';
+import { DynamicContentEditorProps } from '@pega/cosmos-react-rte';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
+export default _default;
+export interface DynamicContentEditorStoryProps extends DynamicContentEditorProps {
+}
+export declare const DynamicContentEditorDemo: StoryFn<Partial<DynamicContentEditorStoryProps>>;
+//# sourceMappingURL=DynamicContentEditor.stories.d.ts.map

package/jsx/rte/DynamicContentEditor/DynamicContentEditor.stories.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"DynamicContentEditor.stories.d.ts","sourceRoot":"","sources":["../../../src/rte/DynamicContentEditor/DynamicContentEditor.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAejD,OAAO,EAAwB,yBAAyB,EAAE,MAAM,wBAAwB,CAAC;;AAMzF,wBAGU;AAEV,MAAM,WAAW,8BAA+B,SAAQ,yBAAyB;CAAG;AAEpF,eAAO,MAAM,wBAAwB,EAAE,OAAO,CAAC,OAAO,CAAC,8BAA8B,CAAC,CAkIrF,CAAC"}

package/jsx/rte/DynamicContentEditor/DynamicContentEditor.stories.jsx ADDED Viewed

@@ -0,0 +1,101 @@
+import { useRef, useState, useCallback } from 'react';
+import { action } from '@storybook/addon-actions';
+import { Button, Card, CardContent, CardFooter, Flex, TextArea, useAutoResize, useConsolidatedRef, useI18n } from '@pega/cosmos-react-core';
+import { DynamicContentEditor } from '@pega/cosmos-react-rte';
+import FieldSelector from './FieldSelector';
+export default {
+    title: 'RTE/DynamicContentEditor',
+    component: DynamicContentEditor
+};
+export const DynamicContentEditorDemo = (args) => {
+    const [html, setHtml] = useState('<p>Hi <pega-reference role="button" contenteditable="false" data-rule-type="field" data-rule-id="CustomerName">CustomerName</pega-reference><p>please check this <a href="https://google.com">link</a></p></p>');
+    const rteRef = useRef(null);
+    const fieldItems = [
+        {
+            id: 'CustomerName',
+            primary: 'CustomerName',
+            items: [
+                {
+                    id: '1-2',
+                    primary: 'Locale'
+                },
+                {
+                    id: '1-1',
+                    primary: 'Response Type',
+                    items: [
+                        {
+                            id: 'group-1-1-b',
+                            label: 'B',
+                            items: [{ id: '1-1-1', primary: 'Reply to' }]
+                        },
+                        { id: '1-1-4', primary: 'Forward to' }
+                    ]
+                }
+            ]
+        },
+        { id: 'Address', primary: 'Address' },
+        { id: 'Locality', primary: 'Locality' },
+        { id: 'Country', primary: 'Country' },
+        { id: 'Region', primary: 'Region' },
+        { id: 'Occupation', primary: 'Occupation' },
+        { id: 'City', primary: 'City' },
+        { id: 'Colony', primary: 'Colony' },
+        { id: 'Lastname', primary: 'Lastname' },
+        { id: 'Preference', primary: 'Preference' },
+        { id: 'Currency', primary: 'Currency' },
+        { id: 'Iconname', primary: 'Iconname' }
+    ];
+    const onImageAdded = (image, id) => {
+        const src = URL.createObjectURL(image);
+        rteRef.current?.appendImage({ src, alt: image.name }, id);
+    };
+    const [textAreaRef, resizeTextArea] = useAutoResize(undefined, 100);
+    const ref = useRef(null);
+    const consolidatedRef = useConsolidatedRef(textAreaRef, ref);
+    const handleShowHtml = () => {
+        resizeTextArea();
+        setHtml(rteRef.current?.getHtml() || '');
+    };
+    const t = useI18n();
+    const [selectedField, setSelectedField] = useState({
+        id: '',
+        text: ''
+    });
+    const updateSelection = (selectedItem) => {
+        setSelectedField(selectedItem);
+    };
+    const onSubmit = useCallback((insertField) => {
+        insertField(selectedField);
+    }, [selectedField]);
+    const dynamicContentPicker = (<Flex container={{
+            gap: 2,
+            direction: 'column'
+        }}>
+      <FieldSelector itemList={[
+            { id: 'CustomerName', text: 'CustomerName' },
+            { id: 'Address', text: 'Address' },
+            { id: 'Locality', text: 'Locality' },
+            { id: 'Country', text: 'Country' },
+            { id: 'Region', text: 'Region' },
+            { id: 'Occupation', text: 'Occupation' }
+        ]} key={selectedField?.id} label='Field' updateSelection={updateSelection} placeholder={t('select')} defaultSelection={selectedField}/>
+    </Flex>);
+    const onActiveFieldChange = (field) => setSelectedField(field);
+    return (<Flex container={{ direction: 'column', gap: 2 }}>
+      <Card>
+        <CardContent>
+          <TextArea value={html} onChange={e => setHtml(e.target.value)} autoResize ref={consolidatedRef}/>
+        </CardContent>
+        <CardFooter>
+          <Button onClick={() => rteRef.current?.insertHtml(html.trim(), true)}>
+            Overwrite RTE with new HTML
+          </Button>
+        </CardFooter>
+      </Card>
+      <DynamicContentEditor defaultValue={args.defaultValue || html} onImageAdded={onImageAdded} ref={rteRef} label='Dynamic content editor' toolbar={['inline-styling', 'lists', 'indentation', 'links', 'images']} form={args.form || { onSubmit, dynamicContentPicker }} onActiveFieldChange={args.onActiveFieldChange || onActiveFieldChange} fieldItems={args.fieldItems || fieldItems} onBlur={action('Editor onBlur')}/>
+      <Flex container={{ gap: 1 }}>
+        <Button onClick={() => handleShowHtml()}>Show HTML</Button>
+      </Flex>
+    </Flex>);
+};
+//# sourceMappingURL=DynamicContentEditor.stories.jsx.map

package/jsx/rte/DynamicContentEditor/DynamicContentEditor.stories.jsx.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"DynamicContentEditor.stories.jsx","sourceRoot":"","sources":["../../../src/rte/DynamicContentEditor/DynamicContentEditor.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, StoryFn } from '@storybook/react';\nimport { useRef, useState, useCallback } from 'react';\nimport { action } from '@storybook/addon-actions';\n\nimport {\n Button,\n Card,\n CardContent,\n CardFooter,\n Flex,\n TextArea,\n useAutoResize,\n useConsolidatedRef,\n useI18n\n} from '@pega/cosmos-react-core';\nimport { DynamicContentEditor, DynamicContentEditorProps } from '@pega/cosmos-react-rte';\nimport type { EditorState, ItemType } from '@pega/cosmos-react-rte';\n\nimport FieldSelector from './FieldSelector';\nimport type { FieldSelectorProps } from './FieldSelector';\n\nexport default {\n title: 'RTE/DynamicContentEditor',\n component: DynamicContentEditor\n} as Meta;\n\nexport interface DynamicContentEditorStoryProps extends DynamicContentEditorProps {}\n\nexport const DynamicContentEditorDemo: StoryFn<Partial<DynamicContentEditorStoryProps>> = (\n args: Partial<DynamicContentEditorStoryProps>\n) => {\n const [html, setHtml] = useState(\n '<p>Hi <pega-reference role=\"button\" contenteditable=\"false\" data-rule-type=\"field\" data-rule-id=\"CustomerName\">CustomerName</pega-reference><p>please check this <a href=\"https://google.com\">link</a></p></p>'\n );\n const rteRef = useRef<EditorState>(null);\n\n const fieldItems: DynamicContentEditorProps['fieldItems'] = [\n {\n id: 'CustomerName',\n primary: 'CustomerName',\n items: [\n {\n id: '1-2',\n primary: 'Locale'\n },\n {\n id: '1-1',\n primary: 'Response Type',\n items: [\n {\n id: 'group-1-1-b',\n label: 'B',\n items: [{ id: '1-1-1', primary: 'Reply to' }]\n },\n { id: '1-1-4', primary: 'Forward to' }\n ]\n }\n ]\n },\n { id: 'Address', primary: 'Address' },\n { id: 'Locality', primary: 'Locality' },\n { id: 'Country', primary: 'Country' },\n { id: 'Region', primary: 'Region' },\n { id: 'Occupation', primary: 'Occupation' },\n { id: 'City', primary: 'City' },\n { id: 'Colony', primary: 'Colony' },\n { id: 'Lastname', primary: 'Lastname' },\n { id: 'Preference', primary: 'Preference' },\n { id: 'Currency', primary: 'Currency' },\n { id: 'Iconname', primary: 'Iconname' }\n ];\n\n const onImageAdded = (image: File, id: string) => {\n const src = URL.createObjectURL(image);\n rteRef.current?.appendImage({ src, alt: image.name }, id);\n };\n const [textAreaRef, resizeTextArea] = useAutoResize<HTMLTextAreaElement>(undefined, 100);\n const ref = useRef(null);\n const consolidatedRef = useConsolidatedRef(textAreaRef, ref);\n const handleShowHtml = () => {\n resizeTextArea();\n setHtml(rteRef.current?.getHtml() || '');\n };\n const t = useI18n();\n const [selectedField, setSelectedField] = useState<ItemType>({\n id: '',\n text: ''\n });\n\n const updateSelection: FieldSelectorProps['updateSelection'] = (selectedItem: ItemType) => {\n setSelectedField(selectedItem);\n };\n const onSubmit = useCallback(\n (insertField: (selectedField: ItemType) => void) => {\n insertField(selectedField);\n },\n [selectedField]\n );\n\n const dynamicContentPicker = (\n <Flex\n container={{\n gap: 2,\n direction: 'column'\n }}\n >\n <FieldSelector\n itemList={[\n { id: 'CustomerName', text: 'CustomerName' },\n { id: 'Address', text: 'Address' },\n { id: 'Locality', text: 'Locality' },\n { id: 'Country', text: 'Country' },\n { id: 'Region', text: 'Region' },\n { id: 'Occupation', text: 'Occupation' }\n ]}\n key={selectedField?.id}\n label='Field'\n updateSelection={updateSelection}\n placeholder={t('select')}\n defaultSelection={selectedField}\n />\n </Flex>\n );\n const onActiveFieldChange = (field: ItemType) => setSelectedField(field);\n\n return (\n <Flex container={{ direction: 'column', gap: 2 }}>\n <Card>\n <CardContent>\n <TextArea\n value={html}\n onChange={e => setHtml(e.target.value)}\n autoResize\n ref={consolidatedRef}\n />\n </CardContent>\n <CardFooter>\n <Button onClick={() => rteRef.current?.insertHtml(html.trim(), true)}>\n Overwrite RTE with new HTML\n </Button>\n </CardFooter>\n </Card>\n <DynamicContentEditor\n defaultValue={args.defaultValue || html}\n onImageAdded={onImageAdded}\n ref={rteRef}\n label='Dynamic content editor'\n toolbar={['inline-styling', 'lists', 'indentation', 'links', 'images']}\n form={args.form || { onSubmit, dynamicContentPicker }}\n onActiveFieldChange={args.onActiveFieldChange || onActiveFieldChange}\n fieldItems={args.fieldItems || fieldItems}\n onBlur={action('Editor onBlur')}\n />\n <Flex container={{ gap: 1 }}>\n <Button onClick={() => handleShowHtml()}>Show HTML</Button>\n </Flex>\n </Flex>\n );\n};\n"]}

package/jsx/rte/DynamicContentEditor/FieldSelector.d.ts ADDED Viewed

@@ -0,0 +1,11 @@
+import { FunctionComponent } from 'react';
+import { ComboBoxProps, NoChildrenProp } from '@pega/cosmos-react-core';
+import { ItemType } from '@pega/cosmos-react-rte/lib/components/DynamicContentEditor/DynamicContentEditor.types';
+export interface FieldSelectorProps extends NoChildrenProp {
+    itemList: ItemType[];
+    updateSelection: (selectedItem: ItemType, label: ComboBoxProps['label']) => void;
+    defaultSelection?: ItemType;
+}
+declare const FieldSelector: FunctionComponent<FieldSelectorProps & Pick<ComboBoxProps, 'label' | 'mode' | 'required' | 'placeholder'>>;
+export default FieldSelector;
+//# sourceMappingURL=FieldSelector.d.ts.map

package/jsx/rte/DynamicContentEditor/FieldSelector.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"FieldSelector.d.ts","sourceRoot":"","sources":["../../../src/rte/DynamicContentEditor/FieldSelector.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,iBAAiB,EAAkC,MAAM,OAAO,CAAC;AAEvF,OAAO,EAEL,aAAa,EAGb,cAAc,EAEf,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,QAAQ,EAAE,MAAM,uFAAuF,CAAC;AAEjH,MAAM,WAAW,kBAAmB,SAAQ,cAAc;IAExD,QAAQ,EAAE,QAAQ,EAAE,CAAC;IAErB,eAAe,EAAE,CAAC,YAAY,EAAE,QAAQ,EAAE,KAAK,EAAE,aAAa,CAAC,OAAO,CAAC,KAAK,IAAI,CAAC;IAEjF,gBAAgB,CAAC,EAAE,QAAQ,CAAC;CAC7B;AAED,QAAA,MAAM,aAAa,EAAE,iBAAiB,CACpC,kBAAkB,GAAG,IAAI,CAAC,aAAa,EAAE,OAAO,GAAG,MAAM,GAAG,UAAU,GAAG,aAAa,CAAC,CAiGxF,CAAC;AAEF,eAAe,aAAa,CAAC"}