@pega/cosmos-react-core 8.8.0 → 9.0.0-build.10.0

package/lib/theme/themes/studioDarkTheme.json

@@ -0,0 +1,240 @@
+{
+    "base": {
+        "palette": {
+            "ai": "#993CF0",
+            "app-background": "url(https://pegasystems.github.io/uplus-wss/img/studio-dark-bg.jpg) no-repeat center / cover",
+            "primary-background": "#161E33",
+            "secondary-background": "#283B67",
+            "foreground-color": "#F5F7FA",
+            "brand-primary": "#75D7CD",
+            "urgent": "#FF4D4F",
+            "warn": "#F68E5E",
+            "success": "#3FDF78",
+            "info": "#3AB4FD",
+            "interactive": "#75D7CD",
+            "pending": "#A986F1",
+            "border-line": "#3B3F4C",
+            "skeleton": "#AAB0C0",
+            "app-foreground": "#F5F7FA"
+        },
+        "shadow": {
+            "focus": "0 0 0 0.11rem #161E33, 0 0 0 0.14rem #ffffff80     , 0 0 0 0.18rem #75D7CD, 0 0 0 0.3rem #0A0A0A1A",
+            "focus-inset": "inset 0 0 0 0.11rem #161E33     , inset 0 0 0 0.18rem #75D7CD, inset 0 0 0 0.3rem #75D7CD1a",
+            "focus-group": "0 0 0 0.125rem #75D7CD99",
+            "focus-group-inset": "inset 0 0 0 0.125rem #75D7CD99"
+        },
+        "font-family": "'Noto Sans', sans-serif",
+        "font-stretch": "100%",
+        "font-scale": "minorThird",
+        "border-radius": "0.5rem"
+    },
+    "components": {
+        "icon": {
+            "size": {
+                "s": "1.125rem",
+                "m": "1.5rem",
+                "l": "2rem"
+            }
+        },
+        "avatar": {
+            "background-color": "#30314D"
+        },
+        "app-shell": {
+            "nav": {
+                "background": "#283B6780",
+                "foreground-color": "#ffffff",
+                "border-color": "transparent",
+                "detached": false
+            },
+            "header": {
+                "background": "#000000",
+                "border-color": "transparent"
+            }
+        },
+        "button": {
+            "border-radius": 0.5,
+            "color": "#75D7CD",
+            "secondary-color": "#75D7CD"
+        },
+        "form-control": {
+            "border-radius": 0.5,
+            ":hover": {
+                "border-color": "#7382A3"
+            },
+            ":disabled": {
+                "background-color": "#2a354e"
+            },
+            ":read-only": {
+                "background-color": "#2a354e"
+            },
+            "border-color": "#324155"
+        },
+        "tabs": {
+            "detached": false
+        },
+        "table": {
+            "typography": {
+                "font-stretch": "70%"
+            },
+            "header": {
+                "background-color": "#283B67",
+                "foreground-color": "#ffffff"
+            },
+            "striped-rows": true
+        },
+        "tooltip": {
+            "foreground-color": "#3f3f3f",
+            "background-color": "#fafafa"
+        },
+        "badges": {
+            "font-stretch": "70%",
+            "count": {
+                "default": {
+                    "background": "#E5E2FF1a",
+                    "foreground": "#E5E2FF"
+                }
+            },
+            "keyboard": {
+                "background-color": "#676767",
+                "border-color": "#9E9E9E"
+            },
+            "status": {
+                "success": {
+                    "background": "#3FDF78",
+                    "foreground": "#1F351F"
+                },
+                "warn": {
+                    "background": "#F68E5E",
+                    "foreground": "#37281E"
+                },
+                "urgent": {
+                    "background": "#FF4D4F",
+                    "foreground": "#1F1112"
+                },
+                "pending": {
+                    "background": "#8B6EC3",
+                    "foreground": "#1B1425"
+                },
+                "info": {
+                    "background": "#8D8E9933",
+                    "foreground": "#e9eef3"
+                }
+            }
+        },
+        "announcement": {
+            "background": "#75D7CD"
+        },
+        "case-view": {
+            "header": {
+                "background": "#283B6780",
+                "foreground-color": "#ffffff"
+            },
+            "summary": {
+                "detached": true
+            },
+            "utilities": {
+                "detached": false,
+                "background": "#283B6780"
+            },
+            "assignments": {
+                "detached": true,
+                "background": "#283B6780",
+                "foreground-color": "auto"
+            },
+            "stages": {
+                "status": {
+                    "completed": {
+                        "background": "#156f35",
+                        "foreground-color": "#d4f7d5"
+                    },
+                    "current": {
+                        "background": "#75D7CD",
+                        "foreground-color": "#314054"
+                    },
+                    "pending": {
+                        "background": "#3b5081"
+                    }
+                }
+            }
+        },
+        "field-value-list": {
+            "inline": {
+                "detached": true
+            }
+        },
+        "card": {
+            "background": "#283B6780",
+            "border-radius": "0.5rem",
+            "foreground-color": "#fff"
+        },
+        "text": {
+            "primary": {
+                "font-family": "'Noto Sans', sans-serif",
+                "font-size": "s"
+            },
+            "secondary": {
+                "font-family": "'Noto Sans', sans-serif",
+                "font-size": "s"
+            },
+            "h1": {
+                "font-family": "'Saira', sans-serif",
+                "font-size": "xxxl",
+                "font-weight": "500"
+            },
+            "h2": {
+                "font-family": "'Saira', sans-serif"
+            },
+            "h3": {
+                "font-family": "'Noto Sans', sans-serif"
+            },
+            "h4": {
+                "font-family": "'Noto Sans', sans-serif"
+            },
+            "h5": {
+                "font-family": "'Noto Sans', sans-serif"
+            },
+            "h6": {
+                "font-family": "'Noto Sans', sans-serif"
+            },
+            "brand-primary": {
+                "font-family": "'Saira', sans-serif"
+            }
+        },
+        "link": {
+            "color": "#75D7CD"
+        },
+        "modal": {
+            "background": "#192645"
+        },
+        "popover": {
+            "background": "#192645"
+        },
+        "lifecycle": {
+            "background": "none",
+            "task": {
+                "background": "#1A2642"
+            },
+            "stage": {
+                "background": "#161E33",
+                "foreground-color": "#FFFFFF",
+                "start": {
+                    "background": "#02468F",
+                    "hover-color": "#02468F"
+                },
+                "default": {
+                    "background": "#26628D",
+                    "hover-color": "#26628D"
+                },
+                "resolution": {
+                    "background": "#097359",
+                    "hover-color": "#097359"
+                },
+                "alternate": {
+                    "background": "#574F6F",
+                    "hover-color": "#574F6F",
+                    "resolution-highlight": "#097359"
+                }
+            }
+        }
+    }
+}

package/lib/theme/themes/studioTheme.json

@@ -0,0 +1,240 @@
+{
+    "base": {
+        "palette": {
+            "ai": "#8C2EEB",
+            "app-background": "radial-gradient(circle at top center, #FFFFFF,#EDEDF2)",
+            "primary-background": "#FFFFFF",
+            "secondary-background": "#F4F6FA",
+            "foreground-color": "#333333",
+            "brand-primary": "#504cd5",
+            "urgent": "#D32F2F",
+            "warn": "#ED6C02",
+            "success": "#2E7D32",
+            "info": "#0288D1",
+            "interactive": "#504cd5",
+            "pending": "#7E57C2",
+            "border-line": "#D0D4DC",
+            "skeleton": "#DADDE5",
+            "app-foreground": "#333333"
+        },
+        "shadow": {
+            "focus": "0 0 0 0.11rem #FFFFFF, 0 0 0 0.14rem #00000033, 0 0 0 0.18rem #504cd5, 0 0 0 0.3rem #0000001A",
+            "focus-inset": "inset 0 0 0 0.11rem #FFFFFF, inset 0 0 0 0.18rem #504cd5, inset 0 0 0 0.3rem #504cd51a",
+            "focus-group": "0 0 0 0.125rem #504cd599",
+            "focus-group-inset": "inset 0 0 0 0.125rem #504cd599"
+        },
+        "font-family": "'Noto Sans', sans-serif",
+        "font-stretch": "100%",
+        "font-scale": "minorThird",
+        "border-radius": "0.5rem"
+    },
+    "components": {
+        "icon": {
+            "size": {
+                "s": "1.125rem",
+                "m": "1.5rem",
+                "l": "2rem"
+            }
+        },
+        "avatar": {
+            "background-color": "#E0E3EF"
+        },
+        "app-shell": {
+            "nav": {
+                "background": "linear-gradient(to bottom, #F4F6FA 0%, #EDEDF2 50%, #F4F6FA 100%)",
+                "foreground-color": "#333333",
+                "border-color": "transparent",
+                "detached": false
+            },
+            "header": {
+                "background": "#F4F6FA",
+                "border-color": "transparent"
+            }
+        },
+        "button": {
+            "border-radius": 0.5,
+            "color": "#504cd5",
+            "secondary-color": "#504cd5"
+        },
+        "form-control": {
+            "border-radius": 0.5,
+            ":hover": {
+                "border-color": "#9EA7B8"
+            },
+            ":disabled": {
+                "background-color": "#F3F4F7"
+            },
+            ":read-only": {
+                "background-color": "#F3F4F7"
+            },
+            "border-color": "#C8CFDA"
+        },
+        "tabs": {
+            "detached": false
+        },
+        "table": {
+            "typography": {
+                "font-stretch": "70%"
+            },
+            "header": {
+                "background-color": "#F4F6FA",
+                "foreground-color": "#333333"
+            },
+            "striped-rows": true
+        },
+        "tooltip": {
+            "foreground-color": "#FFFFFF",
+            "background-color": "#3F3F3F"
+        },
+        "badges": {
+            "font-stretch": "70%",
+            "count": {
+                "default": {
+                    "background": "#E5E2FF80",
+                    "foreground": "#3F3D56"
+                }
+            },
+            "keyboard": {
+                "background-color": "#E0E0E0",
+                "border-color": "#BDBDBD"
+            },
+            "status": {
+                "success": {
+                    "background": "#C8E6C9",
+                    "foreground": "#1F351F"
+                },
+                "warn": {
+                    "background": "#FFE0B2",
+                    "foreground": "#37281E"
+                },
+                "urgent": {
+                    "background": "#FFCDD2",
+                    "foreground": "#1F1112"
+                },
+                "pending": {
+                    "background": "#D1C4E9",
+                    "foreground": "#1B1425"
+                },
+                "info": {
+                    "background": "#E3F2FD",
+                    "foreground": "#333333"
+                }
+            }
+        },
+        "announcement": {
+            "background": "#504cd5"
+        },
+        "case-view": {
+            "header": {
+                "background": "#FFFFFFE0",
+                "foreground-color": "#333333"
+            },
+            "summary": {
+                "detached": true
+            },
+            "utilities": {
+                "detached": false,
+                "background": "#FFFFFFE0"
+            },
+            "assignments": {
+                "detached": true,
+                "background": "#FFFFFFE0",
+                "foreground-color": "auto"
+            },
+            "stages": {
+                "status": {
+                    "completed": {
+                        "background": "#C8E6C9",
+                        "foreground-color": "#1F351F"
+                    },
+                    "current": {
+                        "background": "#504cd5",
+                        "foreground-color": "#FFFFFF"
+                    },
+                    "pending": {
+                        "background": "#E0E3EF"
+                    }
+                }
+            }
+        },
+        "field-value-list": {
+            "inline": {
+                "detached": true
+            }
+        },
+        "card": {
+            "background": "#FFFFFFE0",
+            "border-radius": "0.5rem",
+            "foreground-color": "#333333"
+        },
+        "text": {
+            "primary": {
+                "font-family": "'Noto Sans', sans-serif",
+                "font-size": "s"
+            },
+            "secondary": {
+                "font-family": "'Noto Sans', sans-serif",
+                "font-size": "s"
+            },
+            "h1": {
+                "font-family": "'Saira', sans-serif",
+                "font-size": "xxxl",
+                "font-weight": "500"
+            },
+            "h2": {
+                "font-family": "'Saira', sans-serif"
+            },
+            "h3": {
+                "font-family": "'Noto Sans', sans-serif"
+            },
+            "h4": {
+                "font-family": "'Noto Sans', sans-serif"
+            },
+            "h5": {
+                "font-family": "'Noto Sans', sans-serif"
+            },
+            "h6": {
+                "font-family": "'Noto Sans', sans-serif"
+            },
+            "brand-primary": {
+                "font-family": "'Saira', sans-serif"
+            }
+        },
+        "link": {
+            "color": "#504cd5"
+        },
+        "modal": {
+            "background": "#FFFFFF"
+        },
+        "popover": {
+            "background": "#FFFFFF"
+        },
+        "lifecycle": {
+            "background": "transparent",
+            "task": {
+                "background": "#FFFFFF"
+            },
+            "stage": {
+                "background": "#FFFFFF",
+                "foreground-color": "#333333",
+                "start": {
+                    "background": "#90CAF9",
+                    "hover-color": "#64B5F6"
+                },
+                "default": {
+                    "background": "#BBDEFB",
+                    "hover-color": "#90CAF9"
+                },
+                "resolution": {
+                    "background": "#A5D6A7",
+                    "hover-color": "#81C784"
+                },
+                "alternate": {
+                    "background": "#C7C5C5",
+                    "hover-color": "#B9B7B7",
+                    "resolution-highlight": "#81C784"
+                }
+            }
+        }
+    }
+}

package/lib/utils/debounce.d.ts

@@ -1,4 +1,7 @@
 /** @returns Debounced function that runs only after waitTime(ms) has elapsed since the last time it was last invoked. */
-declare const debounce: <F extends (...args: any[]) => any>(fn: F, waitTime: number) => ((...args: Parameters<F>) => void);
+declare const debounce: <F extends (...args: any[]) => any>(fn: F, waitTime: number) => ((...args: Parameters<F>) => void) & {
+    cancel: () => void;
+    flush: () => void;
+};
 export default debounce;
 //# sourceMappingURL=debounce.d.ts.map

package/lib/utils/debounce.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"debounce.d.ts","sourceRoot":"","sources":["../../src/utils/debounce.ts"],"names":[],"mappings":"AAAA,yHAAyH;AACzH,QAAA,MAAM,QAAQ,GAAI,CAAC,SAAS,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,EACjD,IAAI,CAAC,EACL,UAAU,MAAM,KACf,CAAC,CAAC,GAAG,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,KAAK,IAAI,CAWnC,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"debounce.d.ts","sourceRoot":"","sources":["../../src/utils/debounce.ts"],"names":[],"mappings":"AAAA,yHAAyH;AACzH,QAAA,MAAM,QAAQ,GAAI,CAAC,SAAS,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,EACjD,IAAI,CAAC,EACL,UAAU,MAAM,KACf,CAAC,CAAC,GAAG,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC,GAAG;IACtC,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,KAAK,EAAE,MAAM,IAAI,CAAC;CAgCnB,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/lib/utils/debounce.js

@@ -1,13 +1,29 @@
 /** @returns Debounced function that runs only after waitTime(ms) has elapsed since the last time it was last invoked. */
 const debounce = (fn, waitTime) => {
     let timeout;
-    return function debounced(...args) {
+    let lastArgs;
+    let lastThis;
+    function debounced(...args) {
+        lastArgs = args;
+        lastThis = this;
         window.clearTimeout(timeout);
         timeout = window.setTimeout(() => {
             timeout = undefined;
-            fn.apply(this, args);
+            fn.apply(lastThis, lastArgs);
         }, waitTime);
+    }
+    debounced.cancel = () => {
+        window.clearTimeout(timeout);
+        timeout = undefined;
+    };
+    debounced.flush = () => {
+        if (timeout !== undefined) {
+            window.clearTimeout(timeout);
+            timeout = undefined;
+            fn.apply(lastThis, lastArgs);
+        }
     };
+    return debounced;
 };
 export default debounce;
 //# sourceMappingURL=debounce.js.map

package/lib/utils/debounce.js.map

@@ -1 +1 @@
-{"version":3,"file":"debounce.js","sourceRoot":"","sources":["../../src/utils/debounce.ts"],"names":[],"mappings":"AAAA,yHAAyH;AACzH,MAAM,QAAQ,GAAG,CACf,EAAK,EACL,QAAgB,EACoB,EAAE;IACtC,IAAI,OAA2B,CAAC;IAEhC,OAAO,SAAS,SAAS,CAAY,GAAG,IAAI;QAC1C,MAAM,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;QAE7B,OAAO,GAAG,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE;YAC/B,OAAO,GAAG,SAAS,CAAC;YACpB,EAAE,CAAC,KAAK,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;QACvB,CAAC,EAAE,QAAQ,CAAC,CAAC;IACf,CAAC,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,QAAQ,CAAC","sourcesContent":["/** @returns Debounced function that runs only after waitTime(ms) has elapsed since the last time it was last invoked. */\nconst debounce = <F extends (...args: any[]) => any>(\n  fn: F,\n  waitTime: number\n): ((...args: Parameters<F>) => void) => {\n  let timeout: number | undefined;\n\n  return function debounced(this: any, ...args) {\n    window.clearTimeout(timeout);\n\n    timeout = window.setTimeout(() => {\n      timeout = undefined;\n      fn.apply(this, args);\n    }, waitTime);\n  };\n};\n\nexport default debounce;\n"]}
+{"version":3,"file":"debounce.js","sourceRoot":"","sources":["../../src/utils/debounce.ts"],"names":[],"mappings":"AAAA,yHAAyH;AACzH,MAAM,QAAQ,GAAG,CACf,EAAK,EACL,QAAgB,EAIhB,EAAE;IACF,IAAI,OAA2B,CAAC;IAChC,IAAI,QAAmC,CAAC;IACxC,IAAI,QAA8B,CAAC;IAEnC,SAAS,SAAS,CAA6B,GAAG,IAAmB;QACnE,QAAQ,GAAG,IAAI,CAAC;QAChB,QAAQ,GAAG,IAAI,CAAC;QAChB,MAAM,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;QAE7B,OAAO,GAAG,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE;YAC/B,OAAO,GAAG,SAAS,CAAC;YACpB,EAAE,CAAC,KAAK,CAAC,QAAQ,EAAE,QAAyB,CAAC,CAAC;QAChD,CAAC,EAAE,QAAQ,CAAC,CAAC;IACf,CAAC;IACD,SAAS,CAAC,MAAM,GAAG,GAAG,EAAE;QACtB,MAAM,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;QAC7B,OAAO,GAAG,SAAS,CAAC;IACtB,CAAC,CAAC;IAEF,SAAS,CAAC,KAAK,GAAG,GAAG,EAAE;QACrB,IAAI,OAAO,KAAK,SAAS,EAAE,CAAC;YAC1B,MAAM,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;YAC7B,OAAO,GAAG,SAAS,CAAC;YACpB,EAAE,CAAC,KAAK,CAAC,QAAQ,EAAE,QAAyB,CAAC,CAAC;QAChD,CAAC;IACH,CAAC,CAAC;IACF,OAAO,SAGN,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,QAAQ,CAAC","sourcesContent":["/** @returns Debounced function that runs only after waitTime(ms) has elapsed since the last time it was last invoked. */\nconst debounce = <F extends (...args: any[]) => any>(\n  fn: F,\n  waitTime: number\n): ((...args: Parameters<F>) => void) & {\n  cancel: () => void;\n  flush: () => void;\n} => {\n  let timeout: number | undefined;\n  let lastArgs: Parameters<F> | undefined;\n  let lastThis: ThisParameterType<F>;\n\n  function debounced(this: ThisParameterType<F>, ...args: Parameters<F>) {\n    lastArgs = args;\n    lastThis = this;\n    window.clearTimeout(timeout);\n\n    timeout = window.setTimeout(() => {\n      timeout = undefined;\n      fn.apply(lastThis, lastArgs as Parameters<F>);\n    }, waitTime);\n  }\n  debounced.cancel = () => {\n    window.clearTimeout(timeout);\n    timeout = undefined;\n  };\n\n  debounced.flush = () => {\n    if (timeout !== undefined) {\n      window.clearTimeout(timeout);\n      timeout = undefined;\n      fn.apply(lastThis, lastArgs as Parameters<F>);\n    }\n  };\n  return debounced as ((...args: Parameters<F>) => void) & {\n    cancel: () => void;\n    flush: () => void;\n  };\n};\n\nexport default debounce;\n"]}

package/lib/utils/getFocusables.d.ts

@@ -1,14 +1,16 @@
 import type { RefObject } from 'react';
-export declare const focusableSelector = "a[href], button, input, textarea, select, details, video[controls], audio[controls], [tabindex]:not([tabindex=\"-1\"])";
+export declare const focusableSelector = "a[href], button, input, textarea, select, details, video[controls], audio[controls], [tabindex]";
 /**
  * Returns all valid focusable elements within a given ref.
  * @param container The container element, or reference to the container element, to search for focusable elements within.
  * @param options
  * @param options.includeActiveEl If true, the active element will be included in the list, even if it does not match focusable criteria.
+ * @param options.includeNegativeTabIndex If true, elements with negative tabindex will be included in the list.
  * @returns A list of valid focusable elements within the given ref.
  */
-declare const getFocusables: (container: RefObject<ParentNode> | ParentNode, { includeActiveEl }?: {
+declare const getFocusables: (container: RefObject<ParentNode> | ParentNode, { includeActiveEl, includeNegativeTabIndex }?: {
     includeActiveEl?: boolean;
+    includeNegativeTabIndex?: boolean;
 }) => HTMLElement[];
 export default getFocusables;
 //# sourceMappingURL=getFocusables.d.ts.map

package/lib/utils/getFocusables.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"getFocusables.d.ts","sourceRoot":"","sources":["../../src/utils/getFocusables.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMvC,eAAO,MAAM,iBAAiB,2HAC0F,CAAC;AAEzH;;;;;;GAMG;AACH,QAAA,MAAM,aAAa,GACjB,WAAW,SAAS,CAAC,UAAU,CAAC,GAAG,UAAU,EAC7C,sBAEG;IACD,eAAe,CAAC,EAAE,OAAO,CAAC;CACtB,KACL,WAAW,EAiCb,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"getFocusables.d.ts","sourceRoot":"","sources":["../../src/utils/getFocusables.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMvC,eAAO,MAAM,iBAAiB,oGACqE,CAAC;AAEpG;;;;;;;GAOG;AACH,QAAA,MAAM,aAAa,GACjB,WAAW,SAAS,CAAC,UAAU,CAAC,GAAG,UAAU,EAC7C,+CAGG;IACD,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,uBAAuB,CAAC,EAAE,OAAO,CAAC;CAC9B,KACL,WAAW,EAmCb,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/lib/utils/getFocusables.js

@@ -1,15 +1,16 @@
 import hasProp from './hasProp';
 import getActiveElement from './getActiveElement';
 import createUID from './createUID';
-export const focusableSelector = 'a[href], button, input, textarea, select, details, video[controls], audio[controls], [tabindex]:not([tabindex="-1"])';
+export const focusableSelector = 'a[href], button, input, textarea, select, details, video[controls], audio[controls], [tabindex]';
 /**
  * Returns all valid focusable elements within a given ref.
  * @param container The container element, or reference to the container element, to search for focusable elements within.
  * @param options
  * @param options.includeActiveEl If true, the active element will be included in the list, even if it does not match focusable criteria.
+ * @param options.includeNegativeTabIndex If true, elements with negative tabindex will be included in the list.
  * @returns A list of valid focusable elements within the given ref.
  */
-const getFocusables = (container, { includeActiveEl = false } = {}) => {
+const getFocusables = (container, { includeActiveEl = false, includeNegativeTabIndex = false } = {}) => {
     const uid = createUID();
     let activeId = uid;
     let activeEl = null;
@@ -25,11 +26,12 @@ const getFocusables = (container, { includeActiveEl = false } = {}) => {
             selector = `${selector}, [id="${activeId}"]`;
         }
     }
-    const focusableElements = [...containerEl.querySelectorAll(selector)].filter(el => el instanceof HTMLElement &&
-        (el.id === activeId ||
-            (!el.hasAttribute('disabled') &&
-                el.getAttribute('tabindex') !== '-1' &&
-                !el.closest('[inert]'))));
+    const focusableElements = [...containerEl.querySelectorAll(selector)].filter(el => {
+        const passesTabIndex = includeNegativeTabIndex || el.getAttribute('tabindex') !== '-1';
+        return (el instanceof HTMLElement &&
+            (el.id === activeId ||
+                (!el.hasAttribute('disabled') && !el.closest('[inert]') && passesTabIndex)));
+    });
     if (activeEl?.id === uid) {
         activeEl.removeAttribute('id');
     }

package/lib/utils/getFocusables.js.map

@@ -1 +1 @@
-{"version":3,"file":"getFocusables.js","sourceRoot":"","sources":["../../src/utils/getFocusables.ts"],"names":[],"mappings":"AAEA,OAAO,OAAO,MAAM,WAAW,CAAC;AAChC,OAAO,gBAAgB,MAAM,oBAAoB,CAAC;AAClD,OAAO,SAAS,MAAM,aAAa,CAAC;AAEpC,MAAM,CAAC,MAAM,iBAAiB,GAC5B,sHAAsH,CAAC;AAEzH;;;;;;GAMG;AACH,MAAM,aAAa,GAAG,CACpB,SAA6C,EAC7C,EACE,eAAe,GAAG,KAAK,KAGrB,EAAE,EACS,EAAE;IACjB,MAAM,GAAG,GAAG,SAAS,EAAE,CAAC;IACxB,IAAI,QAAQ,GAAG,GAAG,CAAC;IACnB,IAAI,QAAQ,GAAwC,IAAI,CAAC;IAEzD,MAAM,WAAW,GAAG,OAAO,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC;IAClF,IAAI,CAAC,WAAW;QAAE,OAAO,EAAE,CAAC;IAE5B,IAAI,QAAQ,GAAG,iBAAiB,CAAC;IAEjC,IAAI,eAAe,EAAE,CAAC;QACpB,QAAQ,GAAG,gBAAgB,EAAE,CAAC;QAC9B,IAAI,QAAQ,EAAE,CAAC;YACb,QAAQ,GAAG,QAAQ,CAAC,EAAE,IAAI,GAAG,CAAC;YAC9B,QAAQ,CAAC,EAAE,GAAG,QAAQ,CAAC;YACvB,QAAQ,GAAG,GAAG,QAAQ,UAAU,QAAQ,IAAI,CAAC;QAC/C,CAAC;IACH,CAAC;IAED,MAAM,iBAAiB,GAAI,CAAC,GAAG,WAAW,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAmB,CAAC,MAAM,CAC7F,EAAE,CAAC,EAAE,CACH,EAAE,YAAY,WAAW;QACzB,CAAC,EAAE,CAAC,EAAE,KAAK,QAAQ;YACjB,CAAC,CAAC,EAAE,CAAC,YAAY,CAAC,UAAU,CAAC;gBAC3B,EAAE,CAAC,YAAY,CAAC,UAAU,CAAC,KAAK,IAAI;gBACpC,CAAC,EAAE,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,CAC/B,CAAC;IAEF,IAAI,QAAQ,EAAE,EAAE,KAAK,GAAG,EAAE,CAAC;QACzB,QAAQ,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC;IACjC,CAAC;IAED,OAAO,iBAAiB,CAAC;AAC3B,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import type { RefObject } from 'react';\n\nimport hasProp from './hasProp';\nimport getActiveElement from './getActiveElement';\nimport createUID from './createUID';\n\nexport const focusableSelector =\n  'a[href], button, input, textarea, select, details, video[controls], audio[controls], [tabindex]:not([tabindex=\"-1\"])';\n\n/**\n * Returns all valid focusable elements within a given ref.\n * @param container The container element, or reference to the container element, to search for focusable elements within.\n * @param options\n * @param options.includeActiveEl If true, the active element will be included in the list, even if it does not match focusable criteria.\n * @returns A list of valid focusable elements within the given ref.\n */\nconst getFocusables = (\n  container: RefObject<ParentNode> | ParentNode,\n  {\n    includeActiveEl = false\n  }: {\n    includeActiveEl?: boolean;\n  } = {}\n): HTMLElement[] => {\n  const uid = createUID();\n  let activeId = uid;\n  let activeEl: ReturnType<typeof getActiveElement> = null;\n\n  const containerEl = hasProp(container, 'current') ? container.current : container;\n  if (!containerEl) return [];\n\n  let selector = focusableSelector;\n\n  if (includeActiveEl) {\n    activeEl = getActiveElement();\n    if (activeEl) {\n      activeId = activeEl.id || uid;\n      activeEl.id = activeId;\n      selector = `${selector}, [id=\"${activeId}\"]`;\n    }\n  }\n\n  const focusableElements = ([...containerEl.querySelectorAll(selector)] as HTMLElement[]).filter(\n    el =>\n      el instanceof HTMLElement &&\n      (el.id === activeId ||\n        (!el.hasAttribute('disabled') &&\n          el.getAttribute('tabindex') !== '-1' &&\n          !el.closest('[inert]')))\n  );\n\n  if (activeEl?.id === uid) {\n    activeEl.removeAttribute('id');\n  }\n\n  return focusableElements;\n};\n\nexport default getFocusables;\n"]}
+{"version":3,"file":"getFocusables.js","sourceRoot":"","sources":["../../src/utils/getFocusables.ts"],"names":[],"mappings":"AAEA,OAAO,OAAO,MAAM,WAAW,CAAC;AAChC,OAAO,gBAAgB,MAAM,oBAAoB,CAAC;AAClD,OAAO,SAAS,MAAM,aAAa,CAAC;AAEpC,MAAM,CAAC,MAAM,iBAAiB,GAC5B,iGAAiG,CAAC;AAEpG;;;;;;;GAOG;AACH,MAAM,aAAa,GAAG,CACpB,SAA6C,EAC7C,EACE,eAAe,GAAG,KAAK,EACvB,uBAAuB,GAAG,KAAK,KAI7B,EAAE,EACS,EAAE;IACjB,MAAM,GAAG,GAAG,SAAS,EAAE,CAAC;IACxB,IAAI,QAAQ,GAAG,GAAG,CAAC;IACnB,IAAI,QAAQ,GAAwC,IAAI,CAAC;IAEzD,MAAM,WAAW,GAAG,OAAO,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC;IAClF,IAAI,CAAC,WAAW;QAAE,OAAO,EAAE,CAAC;IAE5B,IAAI,QAAQ,GAAG,iBAAiB,CAAC;IAEjC,IAAI,eAAe,EAAE,CAAC;QACpB,QAAQ,GAAG,gBAAgB,EAAE,CAAC;QAC9B,IAAI,QAAQ,EAAE,CAAC;YACb,QAAQ,GAAG,QAAQ,CAAC,EAAE,IAAI,GAAG,CAAC;YAC9B,QAAQ,CAAC,EAAE,GAAG,QAAQ,CAAC;YACvB,QAAQ,GAAG,GAAG,QAAQ,UAAU,QAAQ,IAAI,CAAC;QAC/C,CAAC;IACH,CAAC;IAED,MAAM,iBAAiB,GAAI,CAAC,GAAG,WAAW,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAmB,CAAC,MAAM,CAC7F,EAAE,CAAC,EAAE;QACH,MAAM,cAAc,GAAG,uBAAuB,IAAI,EAAE,CAAC,YAAY,CAAC,UAAU,CAAC,KAAK,IAAI,CAAC;QACvF,OAAO,CACL,EAAE,YAAY,WAAW;YACzB,CAAC,EAAE,CAAC,EAAE,KAAK,QAAQ;gBACjB,CAAC,CAAC,EAAE,CAAC,YAAY,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI,cAAc,CAAC,CAAC,CAC9E,CAAC;IACJ,CAAC,CACF,CAAC;IAEF,IAAI,QAAQ,EAAE,EAAE,KAAK,GAAG,EAAE,CAAC;QACzB,QAAQ,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC;IACjC,CAAC;IAED,OAAO,iBAAiB,CAAC;AAC3B,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import type { RefObject } from 'react';\n\nimport hasProp from './hasProp';\nimport getActiveElement from './getActiveElement';\nimport createUID from './createUID';\n\nexport const focusableSelector =\n  'a[href], button, input, textarea, select, details, video[controls], audio[controls], [tabindex]';\n\n/**\n * Returns all valid focusable elements within a given ref.\n * @param container The container element, or reference to the container element, to search for focusable elements within.\n * @param options\n * @param options.includeActiveEl If true, the active element will be included in the list, even if it does not match focusable criteria.\n * @param options.includeNegativeTabIndex If true, elements with negative tabindex will be included in the list.\n * @returns A list of valid focusable elements within the given ref.\n */\nconst getFocusables = (\n  container: RefObject<ParentNode> | ParentNode,\n  {\n    includeActiveEl = false,\n    includeNegativeTabIndex = false\n  }: {\n    includeActiveEl?: boolean;\n    includeNegativeTabIndex?: boolean;\n  } = {}\n): HTMLElement[] => {\n  const uid = createUID();\n  let activeId = uid;\n  let activeEl: ReturnType<typeof getActiveElement> = null;\n\n  const containerEl = hasProp(container, 'current') ? container.current : container;\n  if (!containerEl) return [];\n\n  let selector = focusableSelector;\n\n  if (includeActiveEl) {\n    activeEl = getActiveElement();\n    if (activeEl) {\n      activeId = activeEl.id || uid;\n      activeEl.id = activeId;\n      selector = `${selector}, [id=\"${activeId}\"]`;\n    }\n  }\n\n  const focusableElements = ([...containerEl.querySelectorAll(selector)] as HTMLElement[]).filter(\n    el => {\n      const passesTabIndex = includeNegativeTabIndex || el.getAttribute('tabindex') !== '-1';\n      return (\n        el instanceof HTMLElement &&\n        (el.id === activeId ||\n          (!el.hasAttribute('disabled') && !el.closest('[inert]') && passesTabIndex))\n      );\n    }\n  );\n\n  if (activeEl?.id === uid) {\n    activeEl.removeAttribute('id');\n  }\n\n  return focusableElements;\n};\n\nexport default getFocusables;\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/cosmos-react-core",
-  "version": "8.8.0",
+  "version": "9.0.0-build.10.0",
   "description": "Cosmos is a visual design system and UI component collection. Its goal is to empower application developers in their pursuit to create engaging and rewarding user experiences.",
   "license": "SEE LICENSE IN LICENSE",
   "author": "Pegasystems",
@@ -27,7 +27,7 @@
     "@types/dompurify": "^3.0.5",
     "@types/emoji-mart": "^3.0.14",
     "@types/emoji-regex": "^8.0.0",
-    "@types/google.maps": "^3.55.8",
+    "@types/google.maps": "^3.58.1",
     "@types/qrcode": "^1.5.0",
     "@types/react": "^17.0.62 || ^18.3.3",
     "@types/react-dom": "^17.0.20 || ^18.3.0",