@pega/cosmos-react-cs 4.0.0-dev.2.0 → 4.0.0-dev.21.0

package/lib/components/TaskManager/TaskPicker.js

@@ -0,0 +1,89 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useCallback, useEffect, useRef, useState } from 'react';
+import styled, { css } from 'styled-components';
+import { useI18n, useConsolidatedRef, useElement, useUID, useOuterEvent, Flex, Button, Icon, Text, useFocusTrap, useEvent, FormDialog, defaultThemeProp } from '@pega/cosmos-react-core';
+import { StyledChildrenWrap, StyledDialogContent, StyledDialogHeader } from '@pega/cosmos-react-core/lib/components/Dialog/Dialog.styles';
+import Dialog from '@pega/cosmos-react-core/lib/components/Dialog/Dialog';
+import { StyledMenu } from '@pega/cosmos-react-core/lib/components/Menu/Menu.styles';
+import Picker from '../Picker';
+export const StyledSingleTaskDialog = styled(Dialog)(() => {
+    return css `
+    ${StyledMenu} {
+      overflow: auto;
+    }
+  `;
+});
+export const StyledMultiTaskDialog = styled(FormDialog)(({ theme: { base: { spacing } } }) => {
+    return css `
+      ${StyledDialogContent},
+      ${StyledChildrenWrap} {
+        display: flex;
+      }
+
+      ${StyledDialogHeader} {
+        padding-inline: ${spacing};
+      }
+
+      ${StyledDialogContent} {
+        padding-inline: 0;
+      }
+
+      ${StyledMenu} {
+        overflow: auto;
+      }
+    `;
+});
+StyledMultiTaskDialog.defaultProps = defaultThemeProp;
+const TaskPicker = forwardRef(({ items, onAdd, onCancel, target, ...restProps }, ref) => {
+    const t = useI18n();
+    const headingId = useUID();
+    const [selections, setSelections] = useState([]);
+    const [enableMultiSelect, setEnableMultiSelect] = useState(false);
+    const [pickerEl, setPickerEl] = useElement();
+    const pickerRef = useConsolidatedRef(ref, setPickerEl);
+    const initialRender = useRef(true);
+    const toggleHandleRef = useRef(null);
+    const onSelectionChange = (selectedItems) => {
+        setSelections(selectedItems);
+    };
+    useOuterEvent('mousedown', [target, pickerRef], () => {
+        onCancel?.();
+    });
+    const onModeToggle = () => {
+        setSelections([]);
+        setEnableMultiSelect(curr => !curr);
+    };
+    useEffect(() => {
+        if (!enableMultiSelect && selections?.length) {
+            onAdd(selections);
+        }
+    }, [selections, enableMultiSelect]);
+    useEffect(() => {
+        if (initialRender.current) {
+            initialRender.current = false;
+        }
+        else {
+            toggleHandleRef.current?.focusToggleSwitch();
+        }
+    }, [enableMultiSelect]);
+    const onKeydown = useCallback((e) => {
+        const { key } = e;
+        if (key === 'Escape') {
+            onCancel?.();
+        }
+    }, [onCancel]);
+    useFocusTrap(pickerRef, false, [onCancel, pickerEl, enableMultiSelect]);
+    useEvent('keydown', onKeydown, { dependencies: [pickerEl, enableMultiSelect] });
+    const pickerContent = (_jsx(Picker, { ...restProps, contextualLabel: t('task_manager_cases').toLowerCase(), items: items, multiSelect: enableMultiSelect, onModeToggle: onModeToggle, reorderSelections: true, selections: selections, onSelectionChange: onSelectionChange, handle: toggleHandleRef }));
+    return enableMultiSelect ? (_jsx(StyledMultiTaskDialog, { ...restProps, target: target, heading: t('add_cases'), ref: pickerRef, onCancel: () => {
+            onCancel();
+        }, onSubmit: {
+            text: t('add'),
+            disabled: !selections.length,
+            handler: () => {
+                onAdd(selections);
+            }
+        }, children: pickerContent })) : (_jsxs(Flex, { ...restProps, container: { direction: 'column', gap: 1 }, as: StyledSingleTaskDialog, target: target, labelledbyId: headingId, ref: pickerRef, children: [_jsxs(Flex, { container: { justify: 'between', alignItems: 'center', pad: 1 }, children: [_jsx(Text, { id: headingId, variant: 'h2', children: t('task_manager_add_case') }), _jsx(Button, { icon: true, variant: 'simple', onClick: onCancel, label: t('close'), "aria-label": t('close_noun', [t('task_manager_add_case')]), children: _jsx(Icon, { name: 'times' }) })] }), pickerContent] }));
+});
+export default TaskPicker;
+//# sourceMappingURL=TaskPicker.js.map

package/lib/components/TaskManager/TaskPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TaskPicker.js","sourceRoot":"","sources":["../../../src/components/TaskManager/TaskPicker.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  FunctionComponent,\n  PropsWithoutRef,\n  Ref,\n  useCallback,\n  useEffect,\n  useRef,\n  useState\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  ForwardProps,\n  useI18n,\n  useConsolidatedRef,\n  useElement,\n  useUID,\n  useOuterEvent,\n  Flex,\n  Button,\n  Icon,\n  Text,\n  useFocusTrap,\n  useEvent,\n  MenuItemProps,\n  FormDialog,\n  defaultThemeProp,\n  BaseProps,\n  FormDialogProps\n} from '@pega/cosmos-react-core';\nimport {\n  StyledChildrenWrap,\n  StyledDialogContent,\n  StyledDialogHeader\n} from '@pega/cosmos-react-core/lib/components/Dialog/Dialog.styles';\nimport Dialog from '@pega/cosmos-react-core/lib/components/Dialog/Dialog';\nimport { StyledMenu } from '@pega/cosmos-react-core/lib/components/Menu/Menu.styles';\n\nimport { PickerProps, SwitchHandleValue } from '../Picker/Picker.types';\nimport Picker from '../Picker';\n\nexport interface TaskPickerProps extends BaseProps, Pick<PickerProps, 'items'> {\n  /** Callback when add button is clicked */\n  onAdd: (selections: MenuItemProps[]) => void;\n  /** Callback when cancel button is clicked */\n  onCancel: () => void;\n  /** Target for the modal */\n  target: FormDialogProps['target'];\n  /** Picker reference . */\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport const StyledSingleTaskDialog: typeof Dialog = styled(Dialog)(() => {\n  return css`\n    ${StyledMenu} {\n      overflow: auto;\n    }\n  `;\n});\n\nexport const StyledMultiTaskDialog = styled(FormDialog)(\n  ({\n    theme: {\n      base: { spacing }\n    }\n  }) => {\n    return css`\n      ${StyledDialogContent},\n      ${StyledChildrenWrap} {\n        display: flex;\n      }\n\n      ${StyledDialogHeader} {\n        padding-inline: ${spacing};\n      }\n\n      ${StyledDialogContent} {\n        padding-inline: 0;\n      }\n\n      ${StyledMenu} {\n        overflow: auto;\n      }\n    `;\n  }\n);\n\nStyledMultiTaskDialog.defaultProps = defaultThemeProp;\n\nconst TaskPicker: FunctionComponent<TaskPickerProps & ForwardProps> = forwardRef(\n  (\n    { items, onAdd, onCancel, target, ...restProps }: PropsWithoutRef<TaskPickerProps>,\n    ref: TaskPickerProps['ref']\n  ) => {\n    const t = useI18n();\n    const headingId = useUID();\n    const [selections, setSelections] = useState<MenuItemProps[]>([]);\n    const [enableMultiSelect, setEnableMultiSelect] = useState(false);\n    const [pickerEl, setPickerEl] = useElement<HTMLDivElement>();\n    const pickerRef = useConsolidatedRef(ref, setPickerEl);\n    const initialRender = useRef(true);\n    const toggleHandleRef = useRef<SwitchHandleValue>(null);\n\n    const onSelectionChange = (selectedItems: MenuItemProps[]) => {\n      setSelections(selectedItems);\n    };\n\n    useOuterEvent('mousedown', [target, pickerRef], () => {\n      onCancel?.();\n    });\n\n    const onModeToggle = () => {\n      setSelections([]);\n      setEnableMultiSelect(curr => !curr);\n    };\n\n    useEffect(() => {\n      if (!enableMultiSelect && selections?.length) {\n        onAdd(selections);\n      }\n    }, [selections, enableMultiSelect]);\n\n    useEffect(() => {\n      if (initialRender.current) {\n        initialRender.current = false;\n      } else {\n        toggleHandleRef.current?.focusToggleSwitch();\n      }\n    }, [enableMultiSelect]);\n\n    const onKeydown = useCallback(\n      (e: KeyboardEvent) => {\n        const { key } = e;\n        if (key === 'Escape') {\n          onCancel?.();\n        }\n      },\n      [onCancel]\n    );\n\n    useFocusTrap(pickerRef, false, [onCancel, pickerEl, enableMultiSelect]);\n\n    useEvent('keydown', onKeydown, { dependencies: [pickerEl, enableMultiSelect] });\n\n    const pickerContent = (\n      <Picker\n        {...restProps}\n        contextualLabel={t('task_manager_cases').toLowerCase()}\n        items={items}\n        multiSelect={enableMultiSelect}\n        onModeToggle={onModeToggle}\n        reorderSelections\n        selections={selections}\n        onSelectionChange={onSelectionChange}\n        handle={toggleHandleRef}\n      />\n    );\n\n    return enableMultiSelect ? (\n      <StyledMultiTaskDialog\n        {...restProps}\n        target={target}\n        heading={t('add_cases')}\n        ref={pickerRef}\n        onCancel={() => {\n          onCancel();\n        }}\n        onSubmit={{\n          text: t('add'),\n          disabled: !selections.length,\n          handler: () => {\n            onAdd(selections);\n          }\n        }}\n      >\n        {pickerContent}\n      </StyledMultiTaskDialog>\n    ) : (\n      <Flex\n        {...restProps}\n        container={{ direction: 'column', gap: 1 }}\n        as={StyledSingleTaskDialog}\n        target={target}\n        labelledbyId={headingId}\n        ref={pickerRef}\n      >\n        <Flex container={{ justify: 'between', alignItems: 'center', pad: 1 }}>\n          <Text id={headingId} variant='h2'>\n            {t('task_manager_add_case')}\n          </Text>\n          <Button\n            icon\n            variant='simple'\n            onClick={onCancel}\n            label={t('close')}\n            aria-label={t('close_noun', [t('task_manager_add_case')])}\n          >\n            <Icon name='times' />\n          </Button>\n        </Flex>\n        {pickerContent}\n      </Flex>\n    );\n  }\n);\n\nexport default TaskPicker;\n"]}

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

@@ -1,5 +1,5 @@
 export { default } from './TaskManager';
 export { default as TaskView } from './TaskView';
-export { TaskManagerProps, TaskProps, TaskManagerTabsProps, TaskViewProps, DialogueProps } from './TaskManager.types';
-export { default as Picker } from './Picker/Picker';
+export type { TaskManagerProps, TaskProps, TaskManagerTabsProps, TaskViewProps, DialogueProps } from './TaskManager.types';
+export { default as TaskPicker } from './TaskPicker';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/TaskManager/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EACL,gBAAgB,EAChB,SAAS,EACT,oBAAoB,EACpB,aAAa,EACb,aAAa,EACd,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/TaskManager/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,YAAY,EACV,gBAAgB,EAChB,SAAS,EACT,oBAAoB,EACpB,aAAa,EACb,aAAa,EACd,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC"}

package/lib/components/TaskManager/index.js

@@ -1,4 +1,4 @@
 export { default } from './TaskManager';
 export { default as TaskView } from './TaskView';
-export { default as Picker } from './Picker/Picker';
+export { default as TaskPicker } from './TaskPicker';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/TaskManager/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AAQjD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC","sourcesContent":["export { default } from './TaskManager';\nexport { default as TaskView } from './TaskView';\nexport {\n  TaskManagerProps,\n  TaskProps,\n  TaskManagerTabsProps,\n  TaskViewProps,\n  DialogueProps\n} from './TaskManager.types';\nexport { default as Picker } from './Picker/Picker';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/TaskManager/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AAQjD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC","sourcesContent":["export { default } from './TaskManager';\nexport { default as TaskView } from './TaskView';\nexport type {\n  TaskManagerProps,\n  TaskProps,\n  TaskManagerTabsProps,\n  TaskViewProps,\n  DialogueProps\n} from './TaskManager.types';\nexport { default as TaskPicker } from './TaskPicker';\n"]}

package/lib/index.d.ts

@@ -11,6 +11,7 @@ export * from './components/DialPad';
 export { default as InteractionNotification } from './components/InteractionNotification';
 export { default as InteractionTimer } from './components/InteractionTimer';
 export * from './components/InteractionTimer';
+export { default as Picker } from './components/Picker';
 export { default as TaskManager } from './components/TaskManager';
 export * from './components/TaskManager';
 //# sourceMappingURL=index.d.ts.map

package/lib/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC1D,cAAc,sBAAsB,CAAC;AACrC,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAClE,cAAc,0BAA0B,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AAC5E,cAAc,+BAA+B,CAAC;AAC9C,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,cAAc,uBAAuB,CAAC;AACtC,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC1D,cAAc,sBAAsB,CAAC;AACrC,OAAO,EAAE,OAAO,IAAI,uBAAuB,EAAE,MAAM,sCAAsC,CAAC;AAC1F,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AAC5E,cAAc,+BAA+B,CAAC;AAC9C,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAClE,cAAc,0BAA0B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC1D,cAAc,sBAAsB,CAAC;AACrC,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAClE,cAAc,0BAA0B,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AAC5E,cAAc,+BAA+B,CAAC;AAC9C,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,cAAc,uBAAuB,CAAC;AACtC,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC1D,cAAc,sBAAsB,CAAC;AACrC,OAAO,EAAE,OAAO,IAAI,uBAAuB,EAAE,MAAM,sCAAsC,CAAC;AAC1F,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AAC5E,cAAc,+BAA+B,CAAC;AAC9C,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAClE,cAAc,0BAA0B,CAAC"}

package/lib/index.js

@@ -12,6 +12,7 @@ export * from './components/DialPad';
 export { default as InteractionNotification } from './components/InteractionNotification';
 export { default as InteractionTimer } from './components/InteractionTimer';
 export * from './components/InteractionTimer';
+export { default as Picker } from './components/Picker';
 export { default as TaskManager } from './components/TaskManager';
 export * from './components/TaskManager';
 //# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,+DAA+D;AAC/D,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC1D,cAAc,sBAAsB,CAAC;AACrC,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAClE,cAAc,0BAA0B,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AAC5E,cAAc,+BAA+B,CAAC;AAC9C,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,cAAc,uBAAuB,CAAC;AACtC,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC1D,cAAc,sBAAsB,CAAC;AACrC,OAAO,EAAE,OAAO,IAAI,uBAAuB,EAAE,MAAM,sCAAsC,CAAC;AAC1F,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AAC5E,cAAc,+BAA+B,CAAC;AAC9C,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAClE,cAAc,0BAA0B,CAAC","sourcesContent":["// This file is autogenerated. Any changes will be overwritten.\nexport { default as Article } from './components/Article';\nexport * from './components/Article';\nexport { default as ArticleList } from './components/ArticleList';\nexport * from './components/ArticleList';\nexport { default as CallControlPanel } from './components/CallControlPanel';\nexport * from './components/CallControlPanel';\nexport { default as CTIPanel } from './components/CTIPanel';\nexport * from './components/CTIPanel';\nexport { default as DialPad } from './components/DialPad';\nexport * from './components/DialPad';\nexport { default as InteractionNotification } from './components/InteractionNotification';\nexport { default as InteractionTimer } from './components/InteractionTimer';\nexport * from './components/InteractionTimer';\nexport { default as TaskManager } from './components/TaskManager';\nexport * from './components/TaskManager';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,+DAA+D;AAC/D,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC1D,cAAc,sBAAsB,CAAC;AACrC,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAClE,cAAc,0BAA0B,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AAC5E,cAAc,+BAA+B,CAAC;AAC9C,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,cAAc,uBAAuB,CAAC;AACtC,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC1D,cAAc,sBAAsB,CAAC;AACrC,OAAO,EAAE,OAAO,IAAI,uBAAuB,EAAE,MAAM,sCAAsC,CAAC;AAC1F,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AAC5E,cAAc,+BAA+B,CAAC;AAC9C,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAClE,cAAc,0BAA0B,CAAC","sourcesContent":["// This file is autogenerated. Any changes will be overwritten.\nexport { default as Article } from './components/Article';\nexport * from './components/Article';\nexport { default as ArticleList } from './components/ArticleList';\nexport * from './components/ArticleList';\nexport { default as CallControlPanel } from './components/CallControlPanel';\nexport * from './components/CallControlPanel';\nexport { default as CTIPanel } from './components/CTIPanel';\nexport * from './components/CTIPanel';\nexport { default as DialPad } from './components/DialPad';\nexport * from './components/DialPad';\nexport { default as InteractionNotification } from './components/InteractionNotification';\nexport { default as InteractionTimer } from './components/InteractionTimer';\nexport * from './components/InteractionTimer';\nexport { default as Picker } from './components/Picker';\nexport { default as TaskManager } from './components/TaskManager';\nexport * from './components/TaskManager';\n"]}

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "@pega/cosmos-react-cs",
-  "version": "4.0.0-dev.2.0",
-  "author": "Pegasystems",
-  "license": "SEE LICENSE IN LICENSE",
+  "version": "4.0.0-dev.21.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/pegasystems/cosmos-react.git",
     "directory": "packages/cosmos-cs"
   },
+  "license": "SEE LICENSE IN LICENSE",
+  "author": "Pegasystems",
+  "sideEffects": false,
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "files": [
@@ -15,13 +16,12 @@
     "README.md",
     "lib"
   ],
-  "sideEffects": false,
   "scripts": {
     "build": "tsc -b"
   },
   "dependencies": {
-    "@pega/cosmos-react-core": "4.0.0-dev.2.0",
-    "@pega/cosmos-react-dnd": "4.0.0-dev.2.0",
+    "@pega/cosmos-react-core": "4.0.0-dev.21.0",
+    "@pega/cosmos-react-dnd": "4.0.0-dev.21.0",
     "@types/react": "^16.14.24 || ^17.0.38",
     "@types/react-dom": "^16.9.14 || ^17.0.11",
     "@types/styled-components": "^5.1.26",
@@ -31,16 +31,14 @@
     "styled-components": "^5.2.0"
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "^6.4.19",
-    "@storybook/addon-actions": "^6.4.19",
-    "@storybook/addon-storysource": "^6.4.19",
-    "@storybook/addon-toolbars": "^6.4.19",
-    "@storybook/addons": "^6.4.19",
-    "@storybook/react": "^6.4.19",
-    "@storybook/testing-react": "^1.2.4",
-    "@storybook/theming": "^6.4.19",
+    "@storybook/addon-a11y": "^7.0.24",
+    "@storybook/addon-actions": "^7.0.24",
+    "@storybook/addon-storysource": "^7.0.24",
+    "@storybook/addon-toolbars": "^7.0.24",
+    "@storybook/react": "^7.0.24",
+    "@storybook/theming": "^7.0.24",
     "@testing-library/react": "^12.1.3",
     "@testing-library/user-event": "^13.5.0",
-    "typescript": "~4.7.2"
+    "typescript": "~5.0.2"
   }
 }

package/lib/components/Article/ArticleSkeleton.d.ts

@@ -1,8 +0,0 @@
-import { FunctionComponent } from 'react';
-import { BaseProps, ForwardProps } from '@pega/cosmos-react-core';
-export interface ArticleSkeletonProps extends BaseProps {
-}
-export declare const StyledArticleSkeleton: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-declare const ArticleSkeleton: FunctionComponent<ArticleSkeletonProps & ForwardProps>;
-export default ArticleSkeleton;
-//# sourceMappingURL=ArticleSkeleton.d.ts.map

package/lib/components/Article/ArticleSkeleton.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ArticleSkeleton.d.ts","sourceRoot":"","sources":["../../../src/components/Article/ArticleSkeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAG1C,OAAO,EAKL,SAAS,EACT,YAAY,EACb,MAAM,yBAAyB,CAAC;AAEjC,MAAM,WAAW,oBAAqB,SAAQ,SAAS;CAAG;AAE1D,eAAO,MAAM,qBAAqB,yGAAe,CAAC;AAElD,QAAA,MAAM,eAAe,EAAE,iBAAiB,CAAC,oBAAoB,GAAG,YAAY,CAqB3E,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/lib/components/Article/ArticleSkeleton.js

@@ -1,15 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import styled from 'styled-components';
-import { Flex, LineSkeleton, ParagraphSkeleton } from '@pega/cosmos-react-core';
-export const StyledArticleSkeleton = styled.div ``;
-const ArticleSkeleton = (props) => {
-    const numberOfLines = 18;
-    return (_jsx(StyledArticleSkeleton, { ...props, "aria-disabled": 'true', children: _jsx(ParagraphSkeleton, { children: Array.from({ length: numberOfLines }, (_, i) => {
-                const lines = i % 3 === 0 ? ['s', 'm'] : ['s', 's', 's'];
-                return (_jsx(Flex, { container: { alignItems: 'center' }, children: lines.map((size, j) => (
-                    // eslint-disable-next-line react/no-array-index-key
-                    _jsx(LineSkeleton, { width: size }, j))) }, i));
-            }) }) }));
-};
-export default ArticleSkeleton;
-//# sourceMappingURL=ArticleSkeleton.js.map

package/lib/components/Article/ArticleSkeleton.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ArticleSkeleton.js","sourceRoot":"","sources":["../../../src/components/Article/ArticleSkeleton.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EACL,IAAI,EACJ,YAAY,EAEZ,iBAAiB,EAGlB,MAAM,yBAAyB,CAAC;AAIjC,MAAM,CAAC,MAAM,qBAAqB,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AAElD,MAAM,eAAe,GAA2D,CAC9E,KAA2B,EAC3B,EAAE;IACF,MAAM,aAAa,GAAG,EAAE,CAAC;IACzB,OAAO,CACL,KAAC,qBAAqB,OAAK,KAAK,mBAAgB,MAAM,YACpD,KAAC,iBAAiB,cACf,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,aAAa,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;gBAC9C,MAAM,KAAK,GAAiC,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC;gBACvF,OAAO,CACL,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,YACtC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,CAAC;oBACtB,oDAAoD;oBACpD,KAAC,YAAY,IAAC,KAAK,EAAE,IAAI,IAAO,CAAC,CAAI,CACtC,CAAC,IAJ4C,CAAC,CAK1C,CACR,CAAC;YACJ,CAAC,CAAC,GACgB,GACE,CACzB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,eAAe,CAAC","sourcesContent":["import { FunctionComponent } from 'react';\nimport styled from 'styled-components';\n\nimport {\n  Flex,\n  LineSkeleton,\n  LineSkeletonProps,\n  ParagraphSkeleton,\n  BaseProps,\n  ForwardProps\n} from '@pega/cosmos-react-core';\n\nexport interface ArticleSkeletonProps extends BaseProps {}\n\nexport const StyledArticleSkeleton = styled.div``;\n\nconst ArticleSkeleton: FunctionComponent<ArticleSkeletonProps & ForwardProps> = (\n  props: ArticleSkeletonProps\n) => {\n  const numberOfLines = 18;\n  return (\n    <StyledArticleSkeleton {...props} aria-disabled='true'>\n      <ParagraphSkeleton>\n        {Array.from({ length: numberOfLines }, (_, i) => {\n          const lines: LineSkeletonProps['width'][] = i % 3 === 0 ? ['s', 'm'] : ['s', 's', 's'];\n          return (\n            <Flex container={{ alignItems: 'center' }} key={i}>\n              {lines.map((size, j) => (\n                // eslint-disable-next-line react/no-array-index-key\n                <LineSkeleton width={size} key={j} />\n              ))}\n            </Flex>\n          );\n        })}\n      </ParagraphSkeleton>\n    </StyledArticleSkeleton>\n  );\n};\n\nexport default ArticleSkeleton;\n"]}

package/lib/components/ArticleList/SummarySkeleton.d.ts

@@ -1,7 +0,0 @@
-import { FunctionComponent } from 'react';
-import { BaseProps, ForwardProps } from '@pega/cosmos-react-core';
-export interface SummarySkeletonProps extends BaseProps {
-}
-declare const SummarySkeleton: FunctionComponent<SummarySkeletonProps & ForwardProps>;
-export default SummarySkeleton;
-//# sourceMappingURL=SummarySkeleton.d.ts.map

package/lib/components/ArticleList/SummarySkeleton.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"SummarySkeleton.d.ts","sourceRoot":"","sources":["../../../src/components/ArticleList/SummarySkeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,EAIL,SAAS,EACT,YAAY,EACb,MAAM,yBAAyB,CAAC;AAEjC,MAAM,WAAW,oBAAqB,SAAQ,SAAS;CAAG;AAE1D,QAAA,MAAM,eAAe,EAAE,iBAAiB,CAAC,oBAAoB,GAAG,YAAY,CAwB3E,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/lib/components/ArticleList/SummarySkeleton.js

@@ -1,9 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Flex, LineSkeleton, ParagraphSkeleton } from '@pega/cosmos-react-core';
-const SummarySkeleton = (props) => {
-    return (_jsxs(Flex, { as: 'li', container: {
-            direction: 'column'
-        }, ...props, "aria-disabled": 'true', children: [_jsx(LineSkeleton, { variant: 'link', width: 'l' }), _jsxs(ParagraphSkeleton, { children: [_jsx(LineSkeleton, {}), _jsx(LineSkeleton, { width: 's' })] }), _jsxs(Flex, { container: { alignItems: 'center' }, children: [_jsx(LineSkeleton, { width: 's' }), _jsx(LineSkeleton, { width: 's' }), _jsx(LineSkeleton, { width: 's' })] })] }));
-};
-export default SummarySkeleton;
-//# sourceMappingURL=SummarySkeleton.js.map

package/lib/components/ArticleList/SummarySkeleton.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"SummarySkeleton.js","sourceRoot":"","sources":["../../../src/components/ArticleList/SummarySkeleton.tsx"],"names":[],"mappings":";AAEA,OAAO,EACL,IAAI,EACJ,YAAY,EACZ,iBAAiB,EAGlB,MAAM,yBAAyB,CAAC;AAIjC,MAAM,eAAe,GAA2D,CAC9E,KAA2B,EAC3B,EAAE;IACF,OAAO,CACL,MAAC,IAAI,IACH,EAAE,EAAC,IAAI,EACP,SAAS,EAAE;YACT,SAAS,EAAE,QAAQ;SACpB,KACG,KAAK,mBACK,MAAM,aAEpB,KAAC,YAAY,IAAC,OAAO,EAAC,MAAM,EAAC,KAAK,EAAC,GAAG,GAAG,EACzC,MAAC,iBAAiB,eAChB,KAAC,YAAY,KAAG,EAChB,KAAC,YAAY,IAAC,KAAK,EAAC,GAAG,GAAG,IACR,EACpB,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,aACvC,KAAC,YAAY,IAAC,KAAK,EAAC,GAAG,GAAG,EAC1B,KAAC,YAAY,IAAC,KAAK,EAAC,GAAG,GAAG,EAC1B,KAAC,YAAY,IAAC,KAAK,EAAC,GAAG,GAAG,IACrB,IACF,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,eAAe,CAAC","sourcesContent":["import { FunctionComponent } from 'react';\n\nimport {\n  Flex,\n  LineSkeleton,\n  ParagraphSkeleton,\n  BaseProps,\n  ForwardProps\n} from '@pega/cosmos-react-core';\n\nexport interface SummarySkeletonProps extends BaseProps {}\n\nconst SummarySkeleton: FunctionComponent<SummarySkeletonProps & ForwardProps> = (\n  props: SummarySkeletonProps\n) => {\n  return (\n    <Flex\n      as='li'\n      container={{\n        direction: 'column'\n      }}\n      {...props}\n      aria-disabled='true'\n    >\n      <LineSkeleton variant='link' width='l' />\n      <ParagraphSkeleton>\n        <LineSkeleton />\n        <LineSkeleton width='s' />\n      </ParagraphSkeleton>\n      <Flex container={{ alignItems: 'center' }}>\n        <LineSkeleton width='s' />\n        <LineSkeleton width='s' />\n        <LineSkeleton width='s' />\n      </Flex>\n    </Flex>\n  );\n};\n\nexport default SummarySkeleton;\n"]}

package/lib/components/TaskManager/Picker/Picker.d.ts

@@ -1,14 +0,0 @@
-import { FunctionComponent } from 'react';
-import { ForwardProps } from '@pega/cosmos-react-core';
-import { PickerProps } from './Picker.types';
-export declare const StyledPickerHeader: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledAddTasks: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledSelectedTasks: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledSummaryItem: import("styled-components").StyledComponent<FunctionComponent<import("@pega/cosmos-react-core").SummaryItemProps & ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledPickerFooter: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledDDList: import("styled-components").StyledComponent<"ul", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledPicker: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledDragHandle: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-declare const Picker: FunctionComponent<PickerProps & ForwardProps>;
-export default Picker;
-//# sourceMappingURL=Picker.d.ts.map

package/lib/components/TaskManager/Picker/Picker.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Picker.d.ts","sourceRoot":"","sources":["../../../../src/components/TaskManager/Picker/Picker.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAOlB,MAAM,OAAO,CAAC;AAGf,OAAO,EAKL,YAAY,EAeb,MAAM,yBAAyB,CAAC;AAOjC,OAAO,EAA8B,WAAW,EAAqB,MAAM,gBAAgB,CAAC;AAG5F,eAAO,MAAM,kBAAkB,yGAK7B,CAAC;AAGH,eAAO,MAAM,cAAc,yGAO1B,CAAC;AAEF,eAAO,MAAM,mBAAmB,yGAU9B,CAAC;AAGH,eAAO,MAAM,iBAAiB,wLAO5B,CAAC;AAGH,eAAO,MAAM,kBAAkB,yGAK7B,CAAC;AAGH,eAAO,MAAM,YAAY,wGAMvB,CAAC;AAIH,eAAO,MAAM,YAAY,yGAExB,CAAC;AAEF,eAAO,MAAM,gBAAgB,yGAK5B,CAAC;AAiEF,QAAA,MAAM,MAAM,EAAE,iBAAiB,CAAC,WAAW,GAAG,YAAY,CAiQzD,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/lib/components/TaskManager/Picker/Picker.js

@@ -1,229 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import styled, { css } from 'styled-components';
-import { Button, Count, defaultThemeProp, Flex, Icon, Menu, menuHelpers, EmptyState, SearchInput, SummaryItem, Text, useI18n, Switch, useArrows, useConsolidatedRef, useElement, registerIcon, getFocusables } from '@pega/cosmos-react-core';
-import { DragDropList, DragDropManager } from '@pega/cosmos-react-dnd';
-import * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';
-import * as dragIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/drag.icon';
-import * as trashIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/trash.icon';
-registerIcon(timesIcon, dragIcon, trashIcon);
-export const StyledPickerHeader = styled.div(({ theme }) => {
-    return css `
-    padding-inline-start: calc(2 * ${theme.base.spacing});
-    padding-inline-end: calc(1.25 * ${theme.base.spacing});
-  `;
-});
-StyledPickerHeader.defaultProps = defaultThemeProp;
-export const StyledAddTasks = styled.div `
-  width: 17.5rem;
-  max-height: 24rem;
-  header {
-    padding-top: 0;
-    border-bottom: none;
-  }
-`;
-export const StyledSelectedTasks = styled.div(({ theme }) => {
-    return css `
-    width: 17.5rem;
-    max-height: 24rem;
-    padding: ${theme.base.spacing} 0 0 ${theme.base.spacing};
-    border-inline-start: 0.0625rem solid ${theme.base.palette['border-line']};
-    > h3 {
-      padding: 0 0 ${theme.base.spacing} ${theme.base.spacing};
-    }
-  `;
-});
-StyledSelectedTasks.defaultProps = defaultThemeProp;
-export const StyledSummaryItem = styled(SummaryItem)(({ theme }) => {
-    return css `
-    padding: ${theme.base.spacing} 0;
-    &:not(:last-child) {
-      border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};
-    }
-  `;
-});
-StyledSummaryItem.defaultProps = defaultThemeProp;
-export const StyledPickerFooter = styled.div(({ theme }) => {
-    return css `
-    border-top: 0.0625rem solid ${theme.base.palette['border-line']};
-    padding: ${theme.base.spacing};
-  `;
-});
-StyledPickerFooter.defaultProps = defaultThemeProp;
-export const StyledDDList = styled.ul(({ theme }) => {
-    return css `
-    padding-inline-end: calc(0.25 * ${theme.base.spacing});
-    height: 26rem;
-    overflow-y: auto;
-  `;
-});
-StyledDDList.defaultProps = defaultThemeProp;
-export const StyledPicker = styled.div `
-  height: 100%;
-`;
-export const StyledDragHandle = styled.div `
-  cursor: move;
-  > svg {
-    display: block;
-  }
-`;
-const StyledCount = styled(Count)(({ theme }) => {
-    return css `
-    margin-inline-start: calc(0.5 * ${theme.base.spacing});
-  `;
-});
-StyledCount.defaultProps = defaultThemeProp;
-const SelectedItemRenderer = ({ dragRef, previewRef, data }) => {
-    const t = useI18n();
-    return (_jsx("li", { children: _jsx(StyledSummaryItem, { ref: previewRef, visual: _jsx(StyledDragHandle, { ref: dragRef, children: _jsx(Icon, { name: 'drag' }) }), primary: data?.primary, secondary: data?.secondary, actions: _jsx(Button, { variant: 'simple', icon: true, label: t('task_manager_delete_task'), onClick: () => data?.onRemoveSelection?.(data.id), children: _jsx(Icon, { name: 'trash' }) }) }) }));
-};
-const DraggableSelectedList = ({ selectedItems, onChange, itemRenderer }) => {
-    return (_jsx(DragDropManager, { children: _jsx(DragDropList, { as: StyledDDList, accept: 'string', items: selectedItems.map(item => ({
-                id: item.id,
-                type: 'string',
-                data: item
-            })), itemRenderer: itemRenderer, onChange: onChange }) }));
-};
-const Picker = forwardRef(({ id, items, emptyText, title, placeholder, onAdd, onCancel, ...restProps }, ref) => {
-    const t = useI18n();
-    const [initialItems, setItems] = useState(items);
-    const [searchInput, setSearchInput] = useState('');
-    const [selectMultipleToggle, setSelectMultipleToggle] = useState(false);
-    const filterRegex = new RegExp(searchInput.replace(/[.*+\-?^${}()|[\]\\]/g, '\\$&'), 'i');
-    const [selections, setSelections] = useState([]);
-    const searchEleRef = useRef(null);
-    const selectedTasksWrapperRef = useRef(null);
-    const [pickerEl, setPickerEl] = useElement();
-    const pickerRef = useConsolidatedRef(ref, setPickerEl);
-    useEffect(() => {
-        setItems(items);
-    }, [items]);
-    const onKeydown = useCallback((e) => {
-        const { key } = e;
-        if (key === 'Escape') {
-            onCancel?.();
-        }
-        else if (key === 'Tab' && pickerEl) {
-            const focusableContent = getFocusables(pickerRef);
-            if (!focusableContent || focusableContent.length < 2)
-                return;
-            const firstFocusableElement = focusableContent[0];
-            const lastFocusableElement = focusableContent[focusableContent.length - 1];
-            if (e.shiftKey) {
-                if (document.activeElement === firstFocusableElement) {
-                    lastFocusableElement.focus();
-                    e.preventDefault();
-                }
-            }
-            else if (document.activeElement === lastFocusableElement) {
-                firstFocusableElement.focus();
-                e.preventDefault();
-            }
-        }
-        // when focus is in the list setting the tabindex of first element as -1 and on focusing out the tabindex to be 0
-        const focusEl = selectedTasksWrapperRef.current;
-        if (!focusEl)
-            return;
-        const focusable = Array.from(focusEl.querySelectorAll('button'));
-        if (focusable.length === 0)
-            return;
-        if (focusEl.contains(document.activeElement))
-            focusable[0].tabIndex = -1;
-        else if (focusable[0].tabIndex === -1)
-            focusable[0].tabIndex = 0;
-    }, [onCancel, pickerEl, selectMultipleToggle]);
-    useEffect(() => {
-        document.addEventListener('keydown', onKeydown);
-        return () => {
-            document.removeEventListener('keydown', onKeydown);
-        };
-    }, [pickerEl, selectMultipleToggle]);
-    const renderItems = useMemo(() => {
-        return menuHelpers.mapTree(searchInput
-            ? menuHelpers
-                .flatten(initialItems)
-                .filter(({ primary, items: childItems }) => {
-                return filterRegex.test(primary) && !childItems?.length;
-            })
-            : initialItems, item => {
-            let selectable = false;
-            if (!item.items) {
-                selectable = true;
-            }
-            return {
-                ...item,
-                selected: selectable ? !!item.selected : undefined
-            };
-        });
-    }, [searchInput, items, filterRegex]);
-    const removeTasks = useCallback((uid) => {
-        setItems((cur) => menuHelpers.toggleSelected(cur, uid, 'multi-select'));
-        setSelections(cur => {
-            const itemToRemove = menuHelpers.getItem(cur, uid);
-            return cur.filter(item => item.id !== itemToRemove?.id);
-        });
-        // 0 second timeout added because DOM needs to be up to date after list is updated before running query
-        // setting the focus to the first element in the list on deletion and if empty then to search input
-        setTimeout(() => {
-            const focusable = getFocusables(selectedTasksWrapperRef);
-            if (focusable.length > 0)
-                focusable[0].focus();
-            else
-                searchEleRef.current.focus();
-        }, 0);
-    }, []);
-    const toggleSelectedRegion = () => {
-        setSelectMultipleToggle(curr => !curr);
-    };
-    useArrows(selectedTasksWrapperRef, {
-        selector: 'button',
-        dir: 'up-down'
-    }, [selections.length]);
-    return (_jsxs(Flex, { as: StyledPicker, container: { direction: 'column' }, ref: pickerRef, id: id, children: [_jsxs(Flex, { as: StyledPickerHeader, container: { justify: 'between', alignItems: 'center', pad: 1 }, children: [_jsx(Text, { variant: 'h3', children: t('add_tasks') }), _jsx(Button, { variant: 'simple', onClick: onCancel, "aria-label": t('task_picker_close'), icon: true, children: _jsx(Icon, { name: 'times' }) })] }), _jsxs(Flex, { container: true, children: [_jsx(StyledAddTasks, { children: _jsx(Menu, { items: renderItems, onItemClick: (uid) => {
-                                const clickedItem = menuHelpers.getItem(renderItems, uid);
-                                const parentItem = clickedItem?.ancestors
-                                    ? clickedItem.ancestors[0]
-                                    : menuHelpers.getParentItem(renderItems, uid);
-                                if (clickedItem) {
-                                    if (selectMultipleToggle) {
-                                        setItems((cur) => menuHelpers.toggleSelected(cur, uid, 'multi-select'));
-                                        if (selections.find(item => item.id === uid)) {
-                                            setSelections(cur => cur.filter(item => item.id !== clickedItem?.id));
-                                        }
-                                        else {
-                                            setSelections(cur => {
-                                                let secondary;
-                                                if (parentItem)
-                                                    secondary = menuHelpers.isItem(parentItem)
-                                                        ? parentItem.primary
-                                                        : parentItem.label;
-                                                return [
-                                                    ...cur,
-                                                    {
-                                                        ...clickedItem,
-                                                        secondary,
-                                                        onRemoveSelection: removeTasks
-                                                    }
-                                                ];
-                                            });
-                                        }
-                                        setSearchInput('');
-                                    }
-                                    else {
-                                        onAdd([clickedItem]);
-                                    }
-                                }
-                            }, focusControlEl: searchEleRef.current || undefined, emptyText: emptyText || t('no_items'), accent: filterRegex, ...restProps, mode: selectMultipleToggle ? 'multi-select' : 'action', header: _jsxs(Flex, { container: { direction: 'column', gap: 1 }, children: [_jsx(SearchInput, { ref: searchEleRef, value: searchInput, onSearchChange: setSearchInput, placeholder: placeholder || t('search_placeholder_default'), autoFocus: true }), _jsx(Switch, { label: t('select_multiple'), on: selectMultipleToggle, onChange: toggleSelectedRegion })] }), arrowNavigationUnsupported: true }) }), selectMultipleToggle && (_jsxs(Flex, { as: StyledSelectedTasks, container: { direction: 'column' }, ref: selectedTasksWrapperRef, children: [_jsx(Text, { variant: 'h3', children: t('selected_tasks') }), selections.length > 0 ? (_jsx(DraggableSelectedList, { selectedItems: selections, onChange: newItems => {
-                                    setSelections(newItems.map(({ type, data }) => ({
-                                        ...data,
-                                        type
-                                    })));
-                                }, itemRenderer: SelectedItemRenderer })) : (_jsx(EmptyState, { message: t('no_selected_tasks') }))] }))] }), selectMultipleToggle && (_jsxs(Flex, { as: StyledPickerFooter, container: { justify: 'between' }, children: [_jsx(Button, { onClick: onCancel, "aria-label": t('cancel'), children: "Cancel" }), _jsxs(Button, { variant: 'primary', disabled: !selections.length, onClick: () => {
-                            onAdd?.(selections);
-                            setItems(initialItems);
-                        }, "aria-label": t('task_manager_picker_add_label', [selections?.length], {
-                            count: selections?.length
-                        }), children: [t('add'), !!selections?.length && _jsx(StyledCount, { children: selections.length })] })] }))] }));
-});
-export default Picker;
-//# sourceMappingURL=Picker.js.map

package/lib/components/TaskManager/Picker/Picker.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Picker.js","sourceRoot":"","sources":["../../../../src/components/TaskManager/Picker/Picker.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  FunctionComponent,\n  PropsWithoutRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Button,\n  Count,\n  defaultThemeProp,\n  Flex,\n  ForwardProps,\n  Icon,\n  Menu,\n  menuHelpers,\n  EmptyState,\n  SearchInput,\n  SummaryItem,\n  Text,\n  useI18n,\n  Switch,\n  useArrows,\n  useConsolidatedRef,\n  useElement,\n  registerIcon,\n  getFocusables\n} from '@pega/cosmos-react-core';\nimport { MenuItemProps } from '@pega/cosmos-react-core/lib/components/Menu/Menu.types';\nimport { DragDropList, DragDropManager, ItemRendererProps } from '@pega/cosmos-react-dnd';\nimport * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';\nimport * as dragIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/drag.icon';\nimport * as trashIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/trash.icon';\n\nimport { DraggableSelectedListProps, PickerProps, SelectedItemProps } from './Picker.types';\n\nregisterIcon(timesIcon, dragIcon, trashIcon);\nexport const StyledPickerHeader = styled.div(({ theme }) => {\n  return css`\n    padding-inline-start: calc(2 * ${theme.base.spacing});\n    padding-inline-end: calc(1.25 * ${theme.base.spacing});\n  `;\n});\nStyledPickerHeader.defaultProps = defaultThemeProp;\n\nexport const StyledAddTasks = styled.div`\n  width: 17.5rem;\n  max-height: 24rem;\n  header {\n    padding-top: 0;\n    border-bottom: none;\n  }\n`;\n\nexport const StyledSelectedTasks = styled.div(({ theme }) => {\n  return css`\n    width: 17.5rem;\n    max-height: 24rem;\n    padding: ${theme.base.spacing} 0 0 ${theme.base.spacing};\n    border-inline-start: 0.0625rem solid ${theme.base.palette['border-line']};\n    > h3 {\n      padding: 0 0 ${theme.base.spacing} ${theme.base.spacing};\n    }\n  `;\n});\nStyledSelectedTasks.defaultProps = defaultThemeProp;\n\nexport const StyledSummaryItem = styled(SummaryItem)(({ theme }) => {\n  return css`\n    padding: ${theme.base.spacing} 0;\n    &:not(:last-child) {\n      border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};\n    }\n  `;\n});\nStyledSummaryItem.defaultProps = defaultThemeProp;\n\nexport const StyledPickerFooter = styled.div(({ theme }) => {\n  return css`\n    border-top: 0.0625rem solid ${theme.base.palette['border-line']};\n    padding: ${theme.base.spacing};\n  `;\n});\nStyledPickerFooter.defaultProps = defaultThemeProp;\n\nexport const StyledDDList = styled.ul(({ theme }) => {\n  return css`\n    padding-inline-end: calc(0.25 * ${theme.base.spacing});\n    height: 26rem;\n    overflow-y: auto;\n  `;\n});\n\nStyledDDList.defaultProps = defaultThemeProp;\n\nexport const StyledPicker = styled.div`\n  height: 100%;\n`;\n\nexport const StyledDragHandle = styled.div`\n  cursor: move;\n  > svg {\n    display: block;\n  }\n`;\n\nconst StyledCount = styled(Count)(({ theme }) => {\n  return css`\n    margin-inline-start: calc(0.5 * ${theme.base.spacing});\n  `;\n});\n\nStyledCount.defaultProps = defaultThemeProp;\n\nconst SelectedItemRenderer = ({\n  dragRef,\n  previewRef,\n  data\n}: ItemRendererProps<SelectedItemProps>) => {\n  const t = useI18n();\n\n  return (\n    <li>\n      <StyledSummaryItem\n        ref={previewRef}\n        visual={\n          <StyledDragHandle ref={dragRef}>\n            <Icon name='drag' />\n          </StyledDragHandle>\n        }\n        primary={data?.primary}\n        secondary={data?.secondary}\n        actions={\n          <Button\n            variant='simple'\n            icon\n            label={t('task_manager_delete_task')}\n            onClick={() => data?.onRemoveSelection?.(data.id)}\n          >\n            <Icon name='trash' />\n          </Button>\n        }\n      />\n    </li>\n  );\n};\n\nconst DraggableSelectedList = ({\n  selectedItems,\n  onChange,\n  itemRenderer\n}: DraggableSelectedListProps) => {\n  return (\n    <DragDropManager>\n      <DragDropList\n        as={StyledDDList}\n        accept='string'\n        items={selectedItems.map(item => ({\n          id: item.id,\n          type: 'string',\n          data: item\n        }))}\n        itemRenderer={itemRenderer}\n        onChange={onChange}\n      />\n    </DragDropManager>\n  );\n};\n\nconst Picker: FunctionComponent<PickerProps & ForwardProps> = forwardRef(\n  (\n    {\n      id,\n      items,\n      emptyText,\n      title,\n      placeholder,\n      onAdd,\n      onCancel,\n      ...restProps\n    }: PropsWithoutRef<PickerProps>,\n    ref: PickerProps['ref']\n  ) => {\n    const t = useI18n();\n\n    const [initialItems, setItems] = useState<PickerProps['items']>(items);\n\n    const [searchInput, setSearchInput] = useState('');\n    const [selectMultipleToggle, setSelectMultipleToggle] = useState(false);\n\n    const filterRegex = new RegExp(searchInput.replace(/[.*+\\-?^${}()|[\\]\\\\]/g, '\\\\$&'), 'i');\n    const [selections, setSelections] = useState<SelectedItemProps[]>([]);\n    const searchEleRef = useRef<HTMLInputElement>(null);\n\n    const selectedTasksWrapperRef = useRef<HTMLDivElement>(null);\n    const [pickerEl, setPickerEl] = useElement<HTMLDivElement>();\n    const pickerRef = useConsolidatedRef(ref, setPickerEl);\n\n    useEffect(() => {\n      setItems(items);\n    }, [items]);\n\n    const onKeydown = useCallback(\n      (e: KeyboardEvent) => {\n        const { key } = e;\n        if (key === 'Escape') {\n          onCancel?.();\n        } else if (key === 'Tab' && pickerEl) {\n          const focusableContent = getFocusables(pickerRef);\n\n          if (!focusableContent || focusableContent.length < 2) return;\n\n          const firstFocusableElement = focusableContent[0];\n          const lastFocusableElement = focusableContent[focusableContent.length - 1];\n\n          if (e.shiftKey) {\n            if (document.activeElement === firstFocusableElement) {\n              lastFocusableElement.focus();\n              e.preventDefault();\n            }\n          } else if (document.activeElement === lastFocusableElement) {\n            firstFocusableElement.focus();\n            e.preventDefault();\n          }\n        }\n\n        // when focus is in the list setting the tabindex of first element as -1 and on focusing out the tabindex to be 0\n        const focusEl = selectedTasksWrapperRef.current;\n        if (!focusEl) return;\n\n        const focusable = Array.from(focusEl.querySelectorAll('button'));\n        if (focusable.length === 0) return;\n\n        if (focusEl.contains(document.activeElement)) focusable[0].tabIndex = -1;\n        else if (focusable[0].tabIndex === -1) focusable[0].tabIndex = 0;\n      },\n      [onCancel, pickerEl, selectMultipleToggle]\n    );\n\n    useEffect(() => {\n      document.addEventListener('keydown', onKeydown);\n      return () => {\n        document.removeEventListener('keydown', onKeydown);\n      };\n    }, [pickerEl, selectMultipleToggle]);\n\n    const renderItems = useMemo(() => {\n      return menuHelpers.mapTree(\n        searchInput\n          ? menuHelpers\n              .flatten(initialItems)\n              .filter(({ primary, items: childItems }: MenuItemProps) => {\n                return filterRegex.test(primary) && !childItems?.length;\n              })\n          : initialItems,\n        item => {\n          let selectable = false;\n\n          if (!item.items) {\n            selectable = true;\n          }\n\n          return {\n            ...item,\n            selected: selectable ? !!item.selected : undefined\n          };\n        }\n      );\n    }, [searchInput, items, filterRegex]);\n\n    const removeTasks = useCallback((uid: string) => {\n      setItems((cur: PickerProps['items']) => menuHelpers.toggleSelected(cur, uid, 'multi-select'));\n      setSelections(cur => {\n        const itemToRemove = menuHelpers.getItem(cur, uid);\n        return cur.filter(item => item.id !== itemToRemove?.id);\n      });\n\n      // 0 second timeout added because DOM needs to be up to date after list is updated before running query\n      // setting the focus to the first element in the list on deletion and if empty then to search input\n      setTimeout(() => {\n        const focusable = getFocusables(selectedTasksWrapperRef);\n        if (focusable.length > 0) focusable[0].focus();\n        else searchEleRef.current!.focus();\n      }, 0);\n    }, []);\n\n    const toggleSelectedRegion = () => {\n      setSelectMultipleToggle(curr => !curr);\n    };\n\n    useArrows(\n      selectedTasksWrapperRef,\n      {\n        selector: 'button',\n        dir: 'up-down'\n      },\n      [selections.length]\n    );\n\n    return (\n      <Flex as={StyledPicker} container={{ direction: 'column' }} ref={pickerRef} id={id}>\n        <Flex\n          as={StyledPickerHeader}\n          container={{ justify: 'between', alignItems: 'center', pad: 1 }}\n        >\n          <Text variant='h3'>{t('add_tasks')}</Text>\n          <Button variant='simple' onClick={onCancel} aria-label={t('task_picker_close')} icon>\n            <Icon name='times' />\n          </Button>\n        </Flex>\n        <Flex container>\n          <StyledAddTasks>\n            <Menu\n              items={renderItems}\n              onItemClick={(uid: string) => {\n                const clickedItem = menuHelpers.getItem(renderItems, uid);\n                const parentItem = clickedItem?.ancestors\n                  ? clickedItem.ancestors[0]\n                  : menuHelpers.getParentItem(renderItems, uid);\n\n                if (clickedItem) {\n                  if (selectMultipleToggle) {\n                    setItems((cur: PickerProps['items']) =>\n                      menuHelpers.toggleSelected(cur, uid, 'multi-select')\n                    );\n\n                    if (selections.find(item => item.id === uid)) {\n                      setSelections(cur => cur.filter(item => item.id !== clickedItem?.id));\n                    } else {\n                      setSelections(cur => {\n                        let secondary;\n                        if (parentItem)\n                          secondary = menuHelpers.isItem(parentItem)\n                            ? parentItem.primary\n                            : parentItem.label;\n                        return [\n                          ...cur,\n                          {\n                            ...clickedItem,\n                            secondary,\n                            onRemoveSelection: removeTasks\n                          } as SelectedItemProps\n                        ];\n                      });\n                    }\n                    setSearchInput('');\n                  } else {\n                    onAdd([clickedItem]);\n                  }\n                }\n              }}\n              focusControlEl={searchEleRef.current || undefined}\n              emptyText={emptyText || t('no_items')}\n              accent={filterRegex}\n              {...restProps}\n              mode={selectMultipleToggle ? 'multi-select' : 'action'}\n              header={\n                <Flex container={{ direction: 'column', gap: 1 }}>\n                  <SearchInput\n                    ref={searchEleRef}\n                    value={searchInput}\n                    onSearchChange={setSearchInput}\n                    placeholder={placeholder || t('search_placeholder_default')}\n                    autoFocus\n                  />\n                  <Switch\n                    label={t('select_multiple')}\n                    on={selectMultipleToggle}\n                    onChange={toggleSelectedRegion}\n                  />\n                </Flex>\n              }\n              arrowNavigationUnsupported\n            />\n          </StyledAddTasks>\n          {selectMultipleToggle && (\n            <Flex\n              as={StyledSelectedTasks}\n              container={{ direction: 'column' }}\n              ref={selectedTasksWrapperRef}\n            >\n              <Text variant='h3'>{t('selected_tasks')}</Text>\n\n              {selections.length > 0 ? (\n                <DraggableSelectedList\n                  selectedItems={selections}\n                  onChange={newItems => {\n                    setSelections(\n                      newItems.map(({ type, data }) => ({\n                        ...data,\n                        type\n                      })) as SelectedItemProps[]\n                    );\n                  }}\n                  itemRenderer={SelectedItemRenderer}\n                />\n              ) : (\n                <EmptyState message={t('no_selected_tasks')} />\n              )}\n            </Flex>\n          )}\n        </Flex>\n        {selectMultipleToggle && (\n          <Flex as={StyledPickerFooter} container={{ justify: 'between' }}>\n            <Button onClick={onCancel} aria-label={t('cancel')}>\n              Cancel\n            </Button>\n            <Button\n              variant='primary'\n              disabled={!selections.length}\n              onClick={() => {\n                onAdd?.(selections);\n                setItems(initialItems);\n              }}\n              aria-label={t('task_manager_picker_add_label', [selections?.length], {\n                count: selections?.length\n              })}\n            >\n              {t('add')}\n              {!!selections?.length && <StyledCount>{selections.length}</StyledCount>}\n            </Button>\n          </Flex>\n        )}\n      </Flex>\n    );\n  }\n);\n\nexport default Picker;\n"]}