@pega/cosmos-react-core 5.0.0-dev.9.2 → 6.0.0

package/lib/hooks/useArrows.js

@@ -16,28 +16,31 @@ cycle = true,
 /** A query selector that will determine which elements to cycle through with the arrow keys. The selector will be used in conjunction with [querySelectorAll](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll#selectors). */
 selector = focusable, 
 /** Which keys are used to navigate through the list */
-dir = 'up-down', allowTabFocus = true, updateTabIndex = true } = {}, 
+dir = 'up-down', allowTabFocus = true, updateTabIndex = true, 
+/** When focus enters the ref, which element should receive focus first if available */
+initialFocusElement } = {}, 
 /** Pass this prop in the internal dependencies when list is dynamic */
 dependencies = []) => {
     const [NextKey, PrevKey] = dir === 'up-down' ? ['ArrowDown', 'ArrowUp'] : ['ArrowRight', 'ArrowLeft'];
     const setTabIndexes = useCallback((el) => {
-        // don't set tabindex -1 for first element, or an element with a checked input inside of it to be able to focus it
-        // 0 second timeout added because DOM needs to be up to date after list is updated before running query
-        setTimeout(() => {
-            const focusableElements = Array.from(el.querySelectorAll(selector));
-            if (focusableElements.length > 0) {
-                if (allowTabFocus)
-                    focusableElements[0].tabIndex = 0;
-                focusableElements.slice(1).forEach(item => {
-                    if (item instanceof HTMLElement) {
-                        const checked = item.checked;
-                        if (!checked)
-                            item.tabIndex = -1;
-                    }
-                });
-            }
-        }, 0);
-    }, [selector, ...dependencies]);
+        // don't set tabindex -1 for first element, or the initialFocusElement, or an element with a checked input inside of it to be able to focus it
+        const focusableElements = Array.from(el.querySelectorAll(selector));
+        if (focusableElements.length > 0) {
+            let focusIndex = focusableElements.findIndex(focusEl => focusEl === initialFocusElement);
+            if (focusIndex === -1)
+                focusIndex = 0;
+            if (allowTabFocus)
+                focusableElements[focusIndex].tabIndex = 0;
+            focusableElements.splice(focusIndex, 1);
+            focusableElements.forEach(item => {
+                if (item instanceof HTMLElement) {
+                    const checked = item.checked;
+                    if (!checked)
+                        item.tabIndex = -1;
+                }
+            });
+        }
+    }, [selector, initialFocusElement, ...dependencies]);
     const listener = useCallback((e) => {
         const el = ref.current;
         if (!el)
@@ -56,7 +59,9 @@ dependencies = []) => {
         const lastIdx = items.length - 1;
         let newFocusIdx;
         if (e.key === 'Home' || (e.key === NextKey && focusIdx === -1)) {
-            newFocusIdx = 0;
+            const focusableElements = Array.from(el.querySelectorAll(selector));
+            const focusIndex = focusableElements.findIndex(focusEl => focusEl === initialFocusElement);
+            newFocusIdx = focusIndex === -1 ? 0 : focusIndex;
         }
         else if (e.key === 'End' || (e.key === PrevKey && focusIdx === -1)) {
             newFocusIdx = lastIdx;
@@ -87,23 +92,43 @@ dependencies = []) => {
                 newFocusIdx = focusIdx - 1;
             }
         }
+        else if (e.key === 'Tab' && initialFocusElement) {
+            // We need to reset the tabIndex for the initial focused element when leaving the group. 0 second timeout necessary to avoid focusing this element instad of leaving the group.
+            setTimeout(() => {
+                initialFocusElement.tabIndex = 0;
+            }, 0);
+            return;
+        }
         else {
             return;
         }
+        // If there is an initial focused element other than the default, the tabIndex must be set to -1 the moment arrow keys are used to prevent that element from being tabbable while within the group focus.
+        if ((e.key === PrevKey || e.key === NextKey) && initialFocusElement) {
+            initialFocusElement.tabIndex = -1;
+        }
         items[newFocusIdx].focus();
-    }, [ref.current, cycle, selector, ...dependencies]);
+    }, [ref.current, cycle, selector, initialFocusElement, ...dependencies]);
     useEffect(() => {
         const el = ref.current;
         if (!el)
             return;
         if (updateTabIndex) {
-            setTabIndexes(el);
+            if (initialFocusElement) {
+                // If there is an element defined that should receive default focus, no timeout is necessary
+                setTabIndexes(el);
+            }
+            else {
+                // 0 second timeout added because DOM needs to be up to date after list is updated before running query
+                setTimeout(() => {
+                    setTabIndexes(el);
+                }, 0);
+            }
         }
         el.addEventListener('keydown', listener);
         return () => {
             el.removeEventListener('keydown', listener);
         };
-    }, [ref.current, selector, listener, ...dependencies]);
+    }, [ref.current, selector, listener, initialFocusElement, ...dependencies]);
 };
 export default useArrows;
 //# sourceMappingURL=useArrows.js.map

package/lib/hooks/useArrows.js.map

@@ -1 +1 @@
-{"version":3,"file":"useArrows.js","sourceRoot":"","sources":["../../src/hooks/useArrows.ts"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useCallback } from 'react';\nimport type { RefObject, DependencyList } from 'react';\n\nimport { documentIsAvailable } from '../utils';\n\nconst focusable = `\n  a[href],\n  button:enabled,\n  input[type='checkbox']:enabled,\n  input[type='radio']:enabled\n`;\n\n/**\n * @example useArrows(ref, { cycle, selector });\n * @param ref - A reference to the element that will be navigated through. [React RefObject](https://reactjs.org/docs/refs-and-the-dom.html)\n */\nconst useArrows = (\n  ref: RefObject<HTMLElement>,\n  {\n    /** If true, the down or up arrow key will navigate to the first or last element if the element currently focused is the last or first index of the selected elements. */\n    cycle = true,\n    /** A query selector that will determine which elements to cycle through with the arrow keys. The selector will be used in conjunction with [querySelectorAll](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll#selectors). */\n    selector = focusable,\n    /** Which keys are used to navigate through the list */\n    dir = 'up-down',\n    allowTabFocus = true,\n    updateTabIndex = true\n  }: {\n    cycle?: boolean;\n    selector?: string;\n    dir?: 'up-down' | 'left-right';\n    allowTabFocus?: boolean;\n    updateTabIndex?: boolean;\n  } = {},\n  /** Pass this prop in the internal dependencies when list is dynamic */\n  dependencies: DependencyList = []\n) => {\n  const [NextKey, PrevKey] =\n    dir === 'up-down' ? ['ArrowDown', 'ArrowUp'] : ['ArrowRight', 'ArrowLeft'];\n\n  const setTabIndexes = useCallback(\n    (el: HTMLElement) => {\n      // don't set tabindex -1 for first element, or an element with a checked input inside of it to be able to focus it\n\n      // 0 second timeout added because DOM needs to be up to date after list is updated before running query\n      setTimeout(() => {\n        const focusableElements = Array.from(el.querySelectorAll(selector));\n\n        if (focusableElements.length > 0) {\n          if (allowTabFocus) (focusableElements[0] as HTMLElement).tabIndex = 0;\n          focusableElements.slice(1).forEach(item => {\n            if (item instanceof HTMLElement) {\n              const checked = (item as HTMLInputElement).checked;\n              if (!checked) item.tabIndex = -1;\n            }\n          });\n        }\n      }, 0);\n    },\n    [selector, ...dependencies]\n  );\n\n  const listener = useCallback(\n    (e: KeyboardEvent) => {\n      const el = ref.current;\n      if (!el) return;\n      if (['Home', 'End', NextKey, PrevKey].includes(e.key)) e.preventDefault();\n\n      if (!documentIsAvailable) return;\n\n      const items = Array.from(el.querySelectorAll(selector)).filter(\n        (item): item is HTMLElement => item instanceof HTMLElement\n      );\n\n      if (!items.length) return;\n\n      const rootNode = el.getRootNode();\n\n      if (!(rootNode instanceof Document) && !(rootNode instanceof ShadowRoot)) return;\n\n      const focusIdx = items.indexOf(rootNode.activeElement as HTMLElement);\n      const lastIdx = items.length - 1;\n      let newFocusIdx;\n\n      if (e.key === 'Home' || (e.key === NextKey && focusIdx === -1)) {\n        newFocusIdx = 0;\n      } else if (e.key === 'End' || (e.key === PrevKey && focusIdx === -1)) {\n        newFocusIdx = lastIdx;\n      } else if (e.key === 'Enter') {\n        if (updateTabIndex) {\n          setTabIndexes(el);\n        }\n        return;\n      } else if (e.key === NextKey) {\n        if (focusIdx === lastIdx) {\n          if (!cycle) return;\n          newFocusIdx = 0;\n        } else {\n          newFocusIdx = focusIdx + 1;\n        }\n      } else if (e.key === PrevKey) {\n        if (focusIdx === 0) {\n          if (!cycle) return;\n          newFocusIdx = lastIdx;\n        } else {\n          newFocusIdx = focusIdx - 1;\n        }\n      } else {\n        return;\n      }\n\n      items[newFocusIdx].focus();\n    },\n    [ref.current, cycle, selector, ...dependencies]\n  );\n\n  useEffect(() => {\n    const el = ref.current;\n    if (!el) return;\n    if (updateTabIndex) {\n      setTabIndexes(el);\n    }\n    el.addEventListener('keydown', listener);\n\n    return () => {\n      el.removeEventListener('keydown', listener);\n    };\n  }, [ref.current, selector, listener, ...dependencies]);\n};\n\nexport default useArrows;\n"]}
+{"version":3,"file":"useArrows.js","sourceRoot":"","sources":["../../src/hooks/useArrows.ts"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useCallback } from 'react';\nimport type { RefObject, DependencyList } from 'react';\n\nimport { documentIsAvailable } from '../utils';\n\nconst focusable = `\n  a[href],\n  button:enabled,\n  input[type='checkbox']:enabled,\n  input[type='radio']:enabled\n`;\n\n/**\n * @example useArrows(ref, { cycle, selector });\n * @param ref - A reference to the element that will be navigated through. [React RefObject](https://reactjs.org/docs/refs-and-the-dom.html)\n */\nconst useArrows = (\n  ref: RefObject<HTMLElement>,\n  {\n    /** If true, the down or up arrow key will navigate to the first or last element if the element currently focused is the last or first index of the selected elements. */\n    cycle = true,\n    /** A query selector that will determine which elements to cycle through with the arrow keys. The selector will be used in conjunction with [querySelectorAll](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll#selectors). */\n    selector = focusable,\n    /** Which keys are used to navigate through the list */\n    dir = 'up-down',\n    allowTabFocus = true,\n    updateTabIndex = true,\n    /** When focus enters the ref, which element should receive focus first if available */\n    initialFocusElement\n  }: {\n    cycle?: boolean;\n    selector?: string;\n    dir?: 'up-down' | 'left-right';\n    allowTabFocus?: boolean;\n    updateTabIndex?: boolean;\n    initialFocusElement?: Element | null;\n  } = {},\n  /** Pass this prop in the internal dependencies when list is dynamic */\n  dependencies: DependencyList = []\n) => {\n  const [NextKey, PrevKey] =\n    dir === 'up-down' ? ['ArrowDown', 'ArrowUp'] : ['ArrowRight', 'ArrowLeft'];\n\n  const setTabIndexes = useCallback(\n    (el: HTMLElement) => {\n      // don't set tabindex -1 for first element, or the initialFocusElement, or an element with a checked input inside of it to be able to focus it\n      const focusableElements = Array.from(el.querySelectorAll(selector));\n\n      if (focusableElements.length > 0) {\n        let focusIndex = focusableElements.findIndex(focusEl => focusEl === initialFocusElement);\n        if (focusIndex === -1) focusIndex = 0;\n\n        if (allowTabFocus) (focusableElements[focusIndex] as HTMLElement).tabIndex = 0;\n        focusableElements.splice(focusIndex, 1);\n        focusableElements.forEach(item => {\n          if (item instanceof HTMLElement) {\n            const checked = (item as HTMLInputElement).checked;\n            if (!checked) item.tabIndex = -1;\n          }\n        });\n      }\n    },\n    [selector, initialFocusElement, ...dependencies]\n  );\n\n  const listener = useCallback(\n    (e: KeyboardEvent) => {\n      const el = ref.current;\n      if (!el) return;\n      if (['Home', 'End', NextKey, PrevKey].includes(e.key)) e.preventDefault();\n\n      if (!documentIsAvailable) return;\n\n      const items = Array.from(el.querySelectorAll(selector)).filter(\n        (item): item is HTMLElement => item instanceof HTMLElement\n      );\n\n      if (!items.length) return;\n\n      const rootNode = el.getRootNode();\n\n      if (!(rootNode instanceof Document) && !(rootNode instanceof ShadowRoot)) return;\n\n      const focusIdx = items.indexOf(rootNode.activeElement as HTMLElement);\n      const lastIdx = items.length - 1;\n      let newFocusIdx;\n\n      if (e.key === 'Home' || (e.key === NextKey && focusIdx === -1)) {\n        const focusableElements = Array.from(el.querySelectorAll(selector));\n        const focusIndex = focusableElements.findIndex(focusEl => focusEl === initialFocusElement);\n        newFocusIdx = focusIndex === -1 ? 0 : focusIndex;\n      } else if (e.key === 'End' || (e.key === PrevKey && focusIdx === -1)) {\n        newFocusIdx = lastIdx;\n      } else if (e.key === 'Enter') {\n        if (updateTabIndex) {\n          setTabIndexes(el);\n        }\n        return;\n      } else if (e.key === NextKey) {\n        if (focusIdx === lastIdx) {\n          if (!cycle) return;\n          newFocusIdx = 0;\n        } else {\n          newFocusIdx = focusIdx + 1;\n        }\n      } else if (e.key === PrevKey) {\n        if (focusIdx === 0) {\n          if (!cycle) return;\n          newFocusIdx = lastIdx;\n        } else {\n          newFocusIdx = focusIdx - 1;\n        }\n      } else if (e.key === 'Tab' && initialFocusElement) {\n        // We need to reset the tabIndex for the initial focused element when leaving the group. 0 second timeout necessary to avoid focusing this element instad of leaving the group.\n        setTimeout(() => {\n          (initialFocusElement as HTMLElement).tabIndex = 0;\n        }, 0);\n        return;\n      } else {\n        return;\n      }\n\n      // If there is an initial focused element other than the default, the tabIndex must be set to -1 the moment arrow keys are used to prevent that element from being tabbable while within the group focus.\n      if ((e.key === PrevKey || e.key === NextKey) && initialFocusElement) {\n        (initialFocusElement as HTMLElement).tabIndex = -1;\n      }\n\n      items[newFocusIdx].focus();\n    },\n    [ref.current, cycle, selector, initialFocusElement, ...dependencies]\n  );\n\n  useEffect(() => {\n    const el = ref.current;\n    if (!el) return;\n    if (updateTabIndex) {\n      if (initialFocusElement) {\n        // If there is an element defined that should receive default focus, no timeout is necessary\n        setTabIndexes(el);\n      } else {\n        // 0 second timeout added because DOM needs to be up to date after list is updated before running query\n        setTimeout(() => {\n          setTabIndexes(el);\n        }, 0);\n      }\n    }\n    el.addEventListener('keydown', listener);\n\n    return () => {\n      el.removeEventListener('keydown', listener);\n    };\n  }, [ref.current, selector, listener, initialFocusElement, ...dependencies]);\n};\n\nexport default useArrows;\n"]}

package/lib/hooks/useFocusTrap.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useFocusTrap.d.ts","sourceRoot":"","sources":["../../src/hooks/useFocusTrap.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAMvD;;;;;GAKG;AACH,QAAA,MAAM,YAAY,eACJ,UAAU,WAAW,CAAC,qBAChB,OAAO,wCAyB1B,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"useFocusTrap.d.ts","sourceRoot":"","sources":["../../src/hooks/useFocusTrap.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAMvD;;;;;GAKG;AACH,QAAA,MAAM,YAAY,eACJ,UAAU,WAAW,CAAC,qBAChB,OAAO,wCAgD1B,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/lib/hooks/useFocusTrap.js

@@ -16,13 +16,40 @@ const useFocusTrap = (elementRef, attachToDocument = true, dependencies = []) =>
             const requiresFocus = activeEl === elementRef.current ||
                 !elementRef.current?.contains(activeEl) ||
                 (elementRef.current?.contains(activeEl) && !focusables.includes(activeEl));
-            if (!e.shiftKey && (activeEl === lastFocusable || requiresFocus)) {
-                firstFocusable?.focus();
+            if (requiresFocus) {
                 e.preventDefault();
+                if (activeEl) {
+                    const focusablesWithActiveEl = getFocusables(elementRef, { includeActiveEl: true });
+                    const activeElIndex = focusablesWithActiveEl.findIndex(el => el === activeEl);
+                    if (activeElIndex !== -1) {
+                        if (e.shiftKey) {
+                            focusablesWithActiveEl[(activeElIndex - 1) % focusablesWithActiveEl.length].focus();
+                        }
+                        else {
+                            focusablesWithActiveEl[(activeElIndex + 1) % focusablesWithActiveEl.length].focus();
+                        }
+                    }
+                    else if (e.shiftKey) {
+                        lastFocusable?.focus();
+                    }
+                    else {
+                        firstFocusable?.focus();
+                    }
+                }
+                else if (e.shiftKey) {
+                    lastFocusable?.focus();
+                }
+                else {
+                    firstFocusable?.focus();
+                }
             }
-            else if (e.shiftKey && (activeEl === firstFocusable || requiresFocus)) {
+            else if (e.shiftKey && activeEl === firstFocusable) {
+                e.preventDefault();
                 lastFocusable?.focus();
+            }
+            else if (!e.shiftKey && activeEl === lastFocusable) {
                 e.preventDefault();
+                firstFocusable?.focus();
             }
         }
     }, dependencies);

package/lib/hooks/useFocusTrap.js.map

@@ -1 +1 @@
-{"version":3,"file":"useFocusTrap.js","sourceRoot":"","sources":["../../src/hooks/useFocusTrap.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAGpC,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAE3D,OAAO,QAAQ,MAAM,YAAY,CAAC;AAElC;;;;;GAKG;AACH,MAAM,YAAY,GAAG,CACnB,UAAkC,EAClC,mBAA4B,IAAI,EAChC,eAA+B,EAAE,EACjC,EAAE;IACF,MAAM,SAAS,GAAG,WAAW,CAAC,CAAC,CAAgB,EAAE,EAAE;QACjD,IAAI,CAAC,CAAC,GAAG,KAAK,KAAK,EAAE;YACnB,MAAM,UAAU,GAAG,aAAa,CAAC,UAAU,CAAC,CAAC;YAC7C,MAAM,EAAE,CAAC,EAAE,cAAc,EAAE,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC,CAAC,EAAE,aAAa,EAAE,GAAG,UAAU,CAAC;YACjF,MAAM,QAAQ,GAAG,gBAAgB,EAAE,CAAC;YAEpC,MAAM,aAAa,GACjB,QAAQ,KAAK,UAAU,CAAC,OAAO;gBAC/B,CAAC,UAAU,CAAC,OAAO,EAAE,QAAQ,CAAC,QAAQ,CAAC;gBACvC,CAAC,UAAU,CAAC,OAAO,EAAE,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,QAAuB,CAAC,CAAC,CAAC;YAE5F,IAAI,CAAC,CAAC,CAAC,QAAQ,IAAI,CAAC,QAAQ,KAAK,aAAa,IAAI,aAAa,CAAC,EAAE;gBAChE,cAAc,EAAE,KAAK,EAAE,CAAC;gBACxB,CAAC,CAAC,cAAc,EAAE,CAAC;aACpB;iBAAM,IAAI,CAAC,CAAC,QAAQ,IAAI,CAAC,QAAQ,KAAK,cAAc,IAAI,aAAa,CAAC,EAAE;gBACvE,aAAa,EAAE,KAAK,EAAE,CAAC;gBACvB,CAAC,CAAC,cAAc,EAAE,CAAC;aACpB;SACF;IACH,CAAC,EAAE,YAAY,CAAC,CAAC;IAEjB,QAAQ,CAAC,SAAS,EAAE,SAAS,EAAE,EAAE,MAAM,EAAE,gBAAgB,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,UAAU,EAAE,CAAC,CAAC;AACxF,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import { useCallback } from 'react';\nimport type { RefObject, DependencyList } from 'react';\n\nimport { getFocusables, getActiveElement } from '../utils';\n\nimport useEvent from './useEvent';\n\n/**\n * @example useFocusTrap(elementRef)\n * @param elementRef ref of the element in which focus needs to be retained\n * @param addToDocument boolean value to specify if event to be attached to document or to be taken from elementRef, defaults to true\n * @param dependencies  list of variables or functions that will initiate this hook when they are updated.\n */\nconst useFocusTrap = (\n  elementRef: RefObject<HTMLElement>,\n  attachToDocument: boolean = true,\n  dependencies: DependencyList = []\n) => {\n  const onKeydown = useCallback((e: KeyboardEvent) => {\n    if (e.key === 'Tab') {\n      const focusables = getFocusables(elementRef);\n      const { 0: firstFocusable, [focusables.length - 1]: lastFocusable } = focusables;\n      const activeEl = getActiveElement();\n\n      const requiresFocus =\n        activeEl === elementRef.current ||\n        !elementRef.current?.contains(activeEl) ||\n        (elementRef.current?.contains(activeEl) && !focusables.includes(activeEl as HTMLElement));\n\n      if (!e.shiftKey && (activeEl === lastFocusable || requiresFocus)) {\n        firstFocusable?.focus();\n        e.preventDefault();\n      } else if (e.shiftKey && (activeEl === firstFocusable || requiresFocus)) {\n        lastFocusable?.focus();\n        e.preventDefault();\n      }\n    }\n  }, dependencies);\n\n  useEvent('keydown', onKeydown, { target: attachToDocument ? undefined : elementRef });\n};\n\nexport default useFocusTrap;\n"]}
+{"version":3,"file":"useFocusTrap.js","sourceRoot":"","sources":["../../src/hooks/useFocusTrap.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAGpC,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAE3D,OAAO,QAAQ,MAAM,YAAY,CAAC;AAElC;;;;;GAKG;AACH,MAAM,YAAY,GAAG,CACnB,UAAkC,EAClC,mBAA4B,IAAI,EAChC,eAA+B,EAAE,EACjC,EAAE;IACF,MAAM,SAAS,GAAG,WAAW,CAAC,CAAC,CAAgB,EAAE,EAAE;QACjD,IAAI,CAAC,CAAC,GAAG,KAAK,KAAK,EAAE;YACnB,MAAM,UAAU,GAAG,aAAa,CAAC,UAAU,CAAC,CAAC;YAC7C,MAAM,EAAE,CAAC,EAAE,cAAc,EAAE,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC,CAAC,EAAE,aAAa,EAAE,GAAG,UAAU,CAAC;YACjF,MAAM,QAAQ,GAAG,gBAAgB,EAAE,CAAC;YAEpC,MAAM,aAAa,GACjB,QAAQ,KAAK,UAAU,CAAC,OAAO;gBAC/B,CAAC,UAAU,CAAC,OAAO,EAAE,QAAQ,CAAC,QAAQ,CAAC;gBACvC,CAAC,UAAU,CAAC,OAAO,EAAE,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,QAAuB,CAAC,CAAC,CAAC;YAE5F,IAAI,aAAa,EAAE;gBACjB,CAAC,CAAC,cAAc,EAAE,CAAC;gBAEnB,IAAI,QAAQ,EAAE;oBACZ,MAAM,sBAAsB,GAAG,aAAa,CAAC,UAAU,EAAE,EAAE,eAAe,EAAE,IAAI,EAAE,CAAC,CAAC;oBACpF,MAAM,aAAa,GAAG,sBAAsB,CAAC,SAAS,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,KAAK,QAAQ,CAAC,CAAC;oBAE9E,IAAI,aAAa,KAAK,CAAC,CAAC,EAAE;wBACxB,IAAI,CAAC,CAAC,QAAQ,EAAE;4BACd,sBAAsB,CAAC,CAAC,aAAa,GAAG,CAAC,CAAC,GAAG,sBAAsB,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,CAAC;yBACrF;6BAAM;4BACL,sBAAsB,CAAC,CAAC,aAAa,GAAG,CAAC,CAAC,GAAG,sBAAsB,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,CAAC;yBACrF;qBACF;yBAAM,IAAI,CAAC,CAAC,QAAQ,EAAE;wBACrB,aAAa,EAAE,KAAK,EAAE,CAAC;qBACxB;yBAAM;wBACL,cAAc,EAAE,KAAK,EAAE,CAAC;qBACzB;iBACF;qBAAM,IAAI,CAAC,CAAC,QAAQ,EAAE;oBACrB,aAAa,EAAE,KAAK,EAAE,CAAC;iBACxB;qBAAM;oBACL,cAAc,EAAE,KAAK,EAAE,CAAC;iBACzB;aACF;iBAAM,IAAI,CAAC,CAAC,QAAQ,IAAI,QAAQ,KAAK,cAAc,EAAE;gBACpD,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,aAAa,EAAE,KAAK,EAAE,CAAC;aACxB;iBAAM,IAAI,CAAC,CAAC,CAAC,QAAQ,IAAI,QAAQ,KAAK,aAAa,EAAE;gBACpD,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,cAAc,EAAE,KAAK,EAAE,CAAC;aACzB;SACF;IACH,CAAC,EAAE,YAAY,CAAC,CAAC;IAEjB,QAAQ,CAAC,SAAS,EAAE,SAAS,EAAE,EAAE,MAAM,EAAE,gBAAgB,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,UAAU,EAAE,CAAC,CAAC;AACxF,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import { useCallback } from 'react';\nimport type { RefObject, DependencyList } from 'react';\n\nimport { getFocusables, getActiveElement } from '../utils';\n\nimport useEvent from './useEvent';\n\n/**\n * @example useFocusTrap(elementRef)\n * @param elementRef ref of the element in which focus needs to be retained\n * @param addToDocument boolean value to specify if event to be attached to document or to be taken from elementRef, defaults to true\n * @param dependencies  list of variables or functions that will initiate this hook when they are updated.\n */\nconst useFocusTrap = (\n  elementRef: RefObject<HTMLElement>,\n  attachToDocument: boolean = true,\n  dependencies: DependencyList = []\n) => {\n  const onKeydown = useCallback((e: KeyboardEvent) => {\n    if (e.key === 'Tab') {\n      const focusables = getFocusables(elementRef);\n      const { 0: firstFocusable, [focusables.length - 1]: lastFocusable } = focusables;\n      const activeEl = getActiveElement();\n\n      const requiresFocus =\n        activeEl === elementRef.current ||\n        !elementRef.current?.contains(activeEl) ||\n        (elementRef.current?.contains(activeEl) && !focusables.includes(activeEl as HTMLElement));\n\n      if (requiresFocus) {\n        e.preventDefault();\n\n        if (activeEl) {\n          const focusablesWithActiveEl = getFocusables(elementRef, { includeActiveEl: true });\n          const activeElIndex = focusablesWithActiveEl.findIndex(el => el === activeEl);\n\n          if (activeElIndex !== -1) {\n            if (e.shiftKey) {\n              focusablesWithActiveEl[(activeElIndex - 1) % focusablesWithActiveEl.length].focus();\n            } else {\n              focusablesWithActiveEl[(activeElIndex + 1) % focusablesWithActiveEl.length].focus();\n            }\n          } else if (e.shiftKey) {\n            lastFocusable?.focus();\n          } else {\n            firstFocusable?.focus();\n          }\n        } else if (e.shiftKey) {\n          lastFocusable?.focus();\n        } else {\n          firstFocusable?.focus();\n        }\n      } else if (e.shiftKey && activeEl === firstFocusable) {\n        e.preventDefault();\n        lastFocusable?.focus();\n      } else if (!e.shiftKey && activeEl === lastFocusable) {\n        e.preventDefault();\n        firstFocusable?.focus();\n      }\n    }\n  }, dependencies);\n\n  useEvent('keydown', onKeydown, { target: attachToDocument ? undefined : elementRef });\n};\n\nexport default useFocusTrap;\n"]}

package/lib/hooks/useI18n.d.ts

@@ -187,6 +187,7 @@ declare const useI18n: () => import("../i18n/translate").TranslationFunction<Rea
     app_shell_main_navigation_label: string;
     shortcut_NextRegion: string;
     shortcut_PrevRegion: string;
+    app_shell_user_account: string;
     combobox_open_close: string;
     combobox_search_instructions: string;
     combobox_open_list_button_a11y: string;
@@ -206,6 +207,9 @@ declare const useI18n: () => import("../i18n/translate").TranslationFunction<Rea
     modal_maximize: string;
     modal_dock: string;
     modal_close: string;
+    minimize: string;
+    maximize: string;
+    dock: string;
     selected_date_a11y: string;
     open_calendar_button_a11y: string;
     close_calendar_button_a11y: string;
@@ -260,6 +264,8 @@ declare const useI18n: () => import("../i18n/translate").TranslationFunction<Rea
     enter_a_number: string;
     skip_navigation_menu_label: string;
     tab_error_tooltip: string;
+    non_previewable: string;
+    content_load_error: string;
     assignments: string;
     article_list_label_a11y: string;
     article_list_filter_label_a11y: string;
@@ -272,6 +278,9 @@ declare const useI18n: () => import("../i18n/translate").TranslationFunction<Rea
     disclaimer: string;
     references: string;
     result_available: string;
+    ask: string;
+    error_message: string;
+    add_a_comment: string;
     article_label_a11y: string;
     article_related_links: string;
     article_more_like_this: string;
@@ -349,6 +358,11 @@ declare const useI18n: () => import("../i18n/translate").TranslationFunction<Rea
     shortcut_GoToIncomingInteraction: string;
     shortcut_DismissIncomingInteraction: string;
     rte_heading_style: string;
+    rte_heading_style_normal: string;
+    rte_heading_style_heading_1: string;
+    rte_heading_style_heading_2: string;
+    rte_heading_style_heading_3: string;
+    rte_heading_style_heading_4: string;
     rte_bold: string;
     rte_italic: string;
     rte_strike_through: string;
@@ -488,7 +502,11 @@ declare const useI18n: () => import("../i18n/translate").TranslationFunction<Rea
     collapse_suggested_replies: string;
     replies_count: string;
     no_suggestion: string;
+    suggestion: string;
     suggested_reply_copied_to_input_field: string;
+    dialogue: string;
+    pega_genAI: string;
+    suggest_reply: string;
     unique_entities: {
         zero: string;
         one: string;
@@ -637,10 +655,13 @@ declare const useI18n: () => import("../i18n/translate").TranslationFunction<Rea
     follow_up_tasks: string;
     add_follow_up_task: string;
     agents_utterance: string;
+    due_on: string;
     sentiment_positive: string;
     sentiment_negative: string;
     sentiment_neutral: string;
     no_recommendations: string;
+    items_added_to_previous_list: string;
+    items_added_to_current_list: string;
     condition_builder_advanced_condition_label: string;
     condition_builder_advanced_condition_placeholder: string;
     condition_builder_advanced_mode_button_label: string;

package/lib/hooks/useI18n.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useI18n.d.ts","sourceRoot":"","sources":["../../src/hooks/useI18n.ts"],"names":[],"mappings":"AAMA;;;GAGG;AACH,QAAA,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAGZ,CAAC;AAEF,eAAe,OAAO,CAAC"}
+{"version":3,"file":"useI18n.d.ts","sourceRoot":"","sources":["../../src/hooks/useI18n.ts"],"names":[],"mappings":"AAMA;;;GAGG;AACH,QAAA,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAGZ,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/lib/i18n/default.d.ts

@@ -183,6 +183,7 @@ declare const _default: {
     app_shell_main_navigation_label: string;
     shortcut_NextRegion: string;
     shortcut_PrevRegion: string;
+    app_shell_user_account: string;
     combobox_open_close: string;
     combobox_search_instructions: string;
     combobox_open_list_button_a11y: string;
@@ -202,6 +203,9 @@ declare const _default: {
     modal_maximize: string;
     modal_dock: string;
     modal_close: string;
+    minimize: string;
+    maximize: string;
+    dock: string;
     selected_date_a11y: string;
     open_calendar_button_a11y: string;
     close_calendar_button_a11y: string;
@@ -256,6 +260,8 @@ declare const _default: {
     enter_a_number: string;
     skip_navigation_menu_label: string;
     tab_error_tooltip: string;
+    non_previewable: string;
+    content_load_error: string;
     assignments: string;
     article_list_label_a11y: string;
     article_list_filter_label_a11y: string;
@@ -268,6 +274,9 @@ declare const _default: {
     disclaimer: string;
     references: string;
     result_available: string;
+    ask: string;
+    error_message: string;
+    add_a_comment: string;
     article_label_a11y: string;
     article_related_links: string;
     article_more_like_this: string;
@@ -345,6 +354,11 @@ declare const _default: {
     shortcut_GoToIncomingInteraction: string;
     shortcut_DismissIncomingInteraction: string;
     rte_heading_style: string;
+    rte_heading_style_normal: string;
+    rte_heading_style_heading_1: string;
+    rte_heading_style_heading_2: string;
+    rte_heading_style_heading_3: string;
+    rte_heading_style_heading_4: string;
     rte_bold: string;
     rte_italic: string;
     rte_strike_through: string;
@@ -484,7 +498,11 @@ declare const _default: {
     collapse_suggested_replies: string;
     replies_count: string;
     no_suggestion: string;
+    suggestion: string;
     suggested_reply_copied_to_input_field: string;
+    dialogue: string;
+    pega_genAI: string;
+    suggest_reply: string;
     unique_entities: {
         zero: string;
         one: string;
@@ -633,10 +651,13 @@ declare const _default: {
     follow_up_tasks: string;
     add_follow_up_task: string;
     agents_utterance: string;
+    due_on: string;
     sentiment_positive: string;
     sentiment_negative: string;
     sentiment_neutral: string;
     no_recommendations: string;
+    items_added_to_previous_list: string;
+    items_added_to_current_list: string;
     condition_builder_advanced_condition_label: string;
     condition_builder_advanced_condition_placeholder: string;
     condition_builder_advanced_mode_button_label: string;

package/lib/i18n/default.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"default.d.ts","sourceRoot":"","sources":["../../src/i18n/default.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,wBAqoCE"}
+{"version":3,"file":"default.d.ts","sourceRoot":"","sources":["../../src/i18n/default.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,wBA8pCE"}

package/lib/i18n/default.js

@@ -203,6 +203,7 @@ export default {
     app_shell_main_navigation_label: 'Main',
     shortcut_NextRegion: 'Next region',
     shortcut_PrevRegion: 'Previous region',
+    app_shell_user_account: 'Account',
     /* core:ComboBox */
     combobox_open_close: 'Arrow down to open, press escape to close.',
     combobox_search_instructions: 'Start typing to search',
@@ -223,8 +224,11 @@ export default {
     /* core:Modal */
     modal_minimize: 'Minimize modal',
     modal_maximize: 'Maximize modal',
-    modal_dock: 'Dock Modal',
+    modal_dock: 'Dock modal',
     modal_close: 'Close modal',
+    minimize: 'Minimize',
+    maximize: 'Maximize',
+    dock: 'Dock',
     /* core:Datetime */
     selected_date_a11y: 'Selected date:',
     open_calendar_button_a11y: 'Open calendar',
@@ -293,6 +297,9 @@ export default {
     skip_navigation_menu_label: 'Skip navigation menu',
     /* core:Tabs */
     tab_error_tooltip: '{0} has errors',
+    /* core:LightBox */
+    non_previewable: "{0} file can't be previewed in your browser",
+    content_load_error: 'Error loading content',
     /* work:Assignments */
     assignments: 'Assignments',
     /* work:ArticleList */
@@ -307,6 +314,9 @@ export default {
     disclaimer: 'Disclaimer',
     references: 'References',
     result_available: 'Result available',
+    ask: 'Ask',
+    error_message: 'Unable to retrieve data at the moment. Please try again.',
+    add_a_comment: 'Add a comment',
     /* work:Article */
     article_label_a11y: 'Article',
     article_related_links: 'Related links',
@@ -397,6 +407,11 @@ export default {
     shortcut_DismissIncomingInteraction: 'Dismiss incoming interaction popup.',
     /* rte:RichTextEditor */
     rte_heading_style: 'Heading style',
+    rte_heading_style_normal: 'Normal',
+    rte_heading_style_heading_1: 'Heading 1',
+    rte_heading_style_heading_2: 'Heading 2',
+    rte_heading_style_heading_3: 'Heading 3',
+    rte_heading_style_heading_4: 'Heading 4',
     rte_bold: 'Bold',
     rte_italic: 'Italic',
     rte_strike_through: 'Strike-through',
@@ -539,7 +554,11 @@ export default {
     collapse_suggested_replies: 'Collapse suggested replies',
     replies_count: '{0} of {1}',
     no_suggestion: 'No suggestions',
+    suggestion: 'Suggestion',
     suggested_reply_copied_to_input_field: 'Suggested reply copied to input field',
+    dialogue: 'Dialogue',
+    pega_genAI: 'Pega GenAI',
+    suggest_reply: 'Suggest reply',
     /* cs:Email */
     unique_entities: {
         zero: 'No unique entities',
@@ -691,13 +710,17 @@ export default {
     download_transcript: 'Download transcript',
     follow_up_tasks: 'Follow-up tasks',
     add_follow_up_task: 'Add follow-up task',
-    agents_utterance: "Agent's utterance in context",
+    agents_utterance: "Agent's commitment in context",
+    /* cs:FollowUpTask */
+    due_on: 'Due on {0}',
     /* cs:Sentiment */
     sentiment_positive: 'Positive',
     sentiment_negative: 'Negative',
     sentiment_neutral: 'Neutral',
     /* cs:IntelligentGuidance */
     no_recommendations: 'No recommendations',
+    items_added_to_previous_list: 'Items added to previous list',
+    items_added_to_current_list: 'Items added to current list',
     /* condition-builder:ConditionBuilder */
     condition_builder_advanced_condition_label: 'Advanced condition',
     condition_builder_advanced_condition_placeholder: 'Advanced condition',