@pega/cosmos-react-cs - npm Package Compare versions

Comparing version 0.10.4 to 0.10.5

lib/components/TaskManager/TaskDrawer.js

@@ -1,5 +0,6 @@
-import React, { forwardRef, useContext, createRef } from 'react';
-import { Icon, Status, useI18n, Text, SummaryItem } from '@pega/cosmos-react-core';
+import React, { forwardRef, useContext, createRef, useState, useRef } from 'react';
+import { Icon, Status, useI18n, Text, SummaryItem, useElement, Popover, useOuterEvent, useAfterInitialEffect, useConsolidatedRef } from '@pega/cosmos-react-core';
 import { StyledTaskDrawer, StyledTaskDrawerWrapper, StyledTaskDrawerSummaryItem, StyledTasksTabList, StyledTaskDrawerBareButton } from './TaskManager.styles';
 import TaskManagerContext from './TaskManager.context';
+import TaskPicker from './TaskPicker';
 // Handles arrow keypresses for changing the focus
@@ -26,9 +27,30 @@ const changeTabFocus = (event, index, tabRefs) => {
     const { addTask, tasks = [], onLaunchTask } = useContext(TaskManagerContext);
+    const [isOpen, setIsOpen] = useState(false);
+    const [buttonEl, setButtonEl] = useElement(null);
+    const [popoverEl, setPopoverEl] = useElement(null);
     // Used to keep a reference for every tab in order to focus them with key presses
     const tabRefs = tasks.map(() => createRef());
+    useOuterEvent('mousedown', [popoverEl, buttonEl], () => {
+        setIsOpen(false);
+    });
     const t = useI18n();
+    const taskPickerImperativeHandleRef = useRef(null);
+    const taskPickerConsolidatedRef = useConsolidatedRef(addTask === null || addTask === void 0 ? void 0 : addTask.ref, taskPickerImperativeHandleRef);
+    useAfterInitialEffect(() => {
+        var _a, _b;
+        (_b = (_a = taskPickerImperativeHandleRef.current) === null || _a === void 0 ? void 0 : _a.searchInputRef.current) === null || _b === void 0 ? void 0 : _b.focus();
+    }, [taskPickerImperativeHandleRef.current]);
     return (React.createElement(StyledTaskDrawerWrapper, null,
         React.createElement(StyledTaskDrawer, { ref: ref },
-            addTask && (React.createElement(StyledTaskDrawerBareButton, { onClick: addTask.onClick, ref: addTask.ref, variant: 'action' },
-                React.createElement(SummaryItem, { as: StyledTaskDrawerSummaryItem, primary: React.createElement(Text, { variant: 'h4', as: 'span' }, t('task_manager_add_task')), visual: React.createElement(Icon, { name: 'plus' }) }))),
+            addTask && (React.createElement(React.Fragment, null,
+                React.createElement(StyledTaskDrawerBareButton, { onClick: () => setIsOpen(cur => !cur), variant: 'action' },
+                    React.createElement(SummaryItem, { as: StyledTaskDrawerSummaryItem, primary: React.createElement(Text, { variant: 'h4', as: 'span' }, t('task_manager_add_task')), visual: React.createElement(Icon, { name: 'plus' }), ref: setButtonEl })),
+                React.createElement(Popover, { show: isOpen, target: buttonEl, ref: setPopoverEl, style: { width: '25%' }, portal: true },
+                    React.createElement(TaskPicker, { accent: addTask.accent, value: addTask.value, emptyText: addTask.emptyText, tasks: addTask.tasks, onItemClick: addTask.onItemClick, onAdd: (selectedItems) => {
+                            setIsOpen(false);
+                            addTask.onAdd(selectedItems);
+                        }, onChange: addTask.onChange, onRemove: addTask.onRemove, onCancel: () => {
+                            setIsOpen(false);
+                            addTask.onCancel();
+                        }, ref: taskPickerConsolidatedRef })))),
             tasks.length > 0 && (React.createElement(StyledTasksTabList, { role: 'tablist' }, tasks.map((task, i) => {
@@ -35,0 +57,0 @@ const { id, active = false, variant, status, icon, meta, ...restProps } = task;

lib/components/TaskManager/TaskManager.js

@@ -1,3 +0,3 @@
-import React, { forwardRef, useRef, useEffect } from 'react';
-import { Flex, Icon, Text, Status, useI18n, useConsolidatedRef, Button, Grid, SummaryItem } from '@pega/cosmos-react-core';
+import React, { forwardRef, useRef, useEffect, useState } from 'react';
+import { Flex, Icon, Text, Status, useI18n, useConsolidatedRef, useElement, Button, Grid, Popover, SummaryItem, useOuterEvent, useAfterInitialEffect } from '@pega/cosmos-react-core';
 import { StyledTaskManager, StyledTaskIcon, StyledTaskManagerBanner, StyledTaskSummaryItem } from './TaskManager.styles';
@@ -7,2 +7,3 @@ import TaskManagerContext from './TaskManager.context';
 import TaskView from './TaskView';
+import TaskPicker from './TaskPicker';
 const TaskManager = forwardRef((props, ref) => {
@@ -14,2 +15,11 @@ const { tasks = [], onLaunchTask, addTask, main, banner, ...restProps } = props;
     const hasDrawer = tasks.filter(task => task.active).length > 0;
+    const [isOpen, setIsOpen] = useState(false);
+    const [buttonEl, setButtonEl] = useElement(null);
+    const [popoverEl, setPopoverEl] = useElement(null);
+    const taskPickerImperativeHandleRef = useRef(null);
+    const taskPickerConsolidatedRef = useConsolidatedRef(addTask === null || addTask === void 0 ? void 0 : addTask.ref, taskPickerImperativeHandleRef);
+    useAfterInitialEffect(() => {
+        var _a, _b;
+        (_b = (_a = taskPickerImperativeHandleRef.current) === null || _a === void 0 ? void 0 : _a.searchInputRef.current) === null || _b === void 0 ? void 0 : _b.focus();
+    }, [taskPickerImperativeHandleRef.current]);
     useEffect(() => {
@@ -23,2 +33,5 @@ if (taskDrawerRef.current && consolidatedRef.current) {
     }, [tasks, addTask]);
+    useOuterEvent('mousedown', [popoverEl, buttonEl], () => {
+        setIsOpen(false);
+    });
     return (React.createElement(TaskManagerContext.Provider, { value: {
@@ -36,11 +49,20 @@ addTask,
         React.createElement(StyledTaskManager, Object.assign({}, restProps, { ref: consolidatedRef, hasDrawer: hasDrawer }),
-            hasDrawer && React.createElement(TaskDrawer, { ref: taskDrawerRef }),
+            hasDrawer && React.createElement(TaskDrawer, { ref: taskDrawerRef, addTask: addTask }),
             hasDrawer && main,
-            !hasDrawer && (React.createElement(TaskView, { header: React.createElement(Text, { variant: 'h2' }, t('task_manager_tasks')), actions: addTask && (React.createElement(Button, { variant: 'primary', onClick: addTask.onClick, ref: addTask.ref },
-                    React.createElement(Flex, { container: {
-                            itemGap: 1,
-                            alignItems: 'center'
-                        } },
-                        React.createElement(Icon, { name: 'plus' }),
-                        React.createElement("span", null, t('task_manager_add_task'))))) },
+            !hasDrawer && (React.createElement(TaskView, { header: React.createElement(Text, { variant: 'h2' }, t('task_manager_tasks')), actions: addTask && (React.createElement(React.Fragment, null,
+                    React.createElement(Button, { variant: 'primary', onClick: () => setIsOpen(cur => !cur), ref: setButtonEl },
+                        React.createElement(Flex, { container: {
+                                itemGap: 1,
+                                alignItems: 'center'
+                            } },
+                            React.createElement(Icon, { name: 'plus' }),
+                            React.createElement("span", null, t('task_manager_add_task')))),
+                    React.createElement(Popover, { show: isOpen, ref: setPopoverEl, target: buttonEl, style: { width: '25%' } },
+                        React.createElement(TaskPicker, { accent: addTask.accent, value: addTask.value, emptyText: addTask.emptyText, tasks: addTask.tasks, onItemClick: addTask.onItemClick, onAdd: (selectedItems) => {
+                                setIsOpen(false);
+                                addTask.onAdd(selectedItems);
+                            }, onChange: addTask.onChange, onRemove: addTask.onRemove, onCancel: () => {
+                                setIsOpen(false);
+                                addTask.onCancel();
+                            }, ref: taskPickerConsolidatedRef })))) },
                 React.createElement(Grid, { as: 'ul', container: { rowGap: 1.5 } }, tasks.map(({ name, id, status, variant = 'in-progress', meta, icon, ...restTaskProps }) => {
@@ -47,0 +69,0 @@ return (React.createElement(SummaryItem, Object.assign({}, restTaskProps, { key: id, as: StyledTaskSummaryItem, variant: variant, primary: React.createElement(Text, { variant: 'h4' }, name), secondary: React.createElement(React.Fragment, null,

lib/components/TaskManager/TaskManager.types.d.ts

@@ -1,3 +0,5 @@
-import { ReactNode, Ref } from 'react';
-import { BaseProps, StatusProps } from '@pega/cosmos-react-core';
+import { ReactNode, Ref, RefObject } from 'react';
+import { BaseProps, StatusProps, ComboBoxProps } from '@pega/cosmos-react-core';
+import { MenuItemProps } from '@pega/cosmos-react-core/lib/components/Menu/Menu.types';
+import { Selected } from '@pega/cosmos-react-core/lib/components/ComboBox/ComboBox.types';
 export interface TaskManagerProps extends BaseProps {
@@ -10,8 +12,3 @@ ref?: Ref<HTMLDivElement>;
     /** Add task utility */
-    addTask?: {
-        /** Callback when add task is clicked */
-        onClick: () => void;
-        /** Ref of the add task button */
-        ref?: Ref<HTMLButtonElement>;
-    };
+    addTask?: TaskPickerProps;
     /** Banner for the task manager */
@@ -62,2 +59,41 @@ banner?: {
 }
+export interface TaskPickerProps extends BaseProps, Pick<ComboBoxProps, 'id' | 'placeholder' | 'value' | 'onChange' | 'onFocus' | 'onBlur' | 'autoFocus' | 'onClick'> {
+    /** Returns TaskPicker ref and SearchInput ref . */
+    ref?: Ref<TaskPickerImperativeHandleProps>;
+    /** An array of service tasks. */
+    tasks: MenuItemProps[];
+    /** A simple message to display when there are no items. */
+    emptyText?: string;
+    /**
+     * A top level handler for all item clicks.
+     * This is convenient way to detect which item was clicked to react by updating state or performing an action.
+     * Both an item's onClick and this will be called if both are passed.
+     * */
+    onItemClick?: MenuItemProps['onClick'];
+    /**
+     * Use to accent(make bold) portions of the primary text.
+     * Useful for filter/search results.
+     * If passed a function, that function will be passed each items primary text.
+     * */
+    accent?: RegExp | ((primary: string) => RegExp);
+    /**
+     * A top level handler for clicks on parent items to expand their child items.
+     * This is convenient way to detect when an item is expanded.
+     * For lazy loading this would be a good time to set an item's items.
+     * Both an item's onExpand and this will be called if both are passed.
+     * */
+    onItemExpand?: MenuItemProps['onClick'];
+    /** Show a Progress indicator at the end of a list where newly loaded items will be appended. */
+    loading?: boolean;
+    /** Callback when cancel button is clicked */
+    onCancel: () => void;
+    /** Callback when add button is clicked */
+    onAdd: (selections: Selected[]) => void;
+    /** Callback fired when close is clicked on the selected item in the input */
+    onRemove?: (id: string, index: number) => void;
+}
+export interface TaskPickerImperativeHandleProps {
+    taskPickerContainerRef: RefObject<HTMLDivElement | undefined>;
+    searchInputRef: RefObject<HTMLInputElement | undefined>;
+}
 //# sourceMappingURL=TaskManager.types.d.ts.map

package.json

 {
   "name": "@pega/cosmos-react-cs",
-  "version": "0.10.4",
+  "version": "0.10.5",
   "author": "Pegasystems",
@@ -23,3 +23,3 @@ "license": "SEE LICENSE IN LICENSE",
   "dependencies": {
-    "@pega/cosmos-react-core": "0.10.4",
+    "@pega/cosmos-react-core": "0.10.5",
     "polished": "^4.0.5",
@@ -26,0 +26,0 @@ "react": "^16.13.1 || ^17.0.0",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

107241

increased by16.35%

Number of package files

82

increased by5.13%

Lines of code

1043

increased by14.11%

Dependency changes

• + Added@pega/cosmos-react-core@0.10.5(transitive)

• - Removed@pega/cosmos-react-core@0.10.4(transitive)

• Updated@pega/cosmos-react-core@0.10.5