@pega/cosmos-react-core 4.0.0-dev.14.2 → 4.0.0-dev.15.0

package/lib/theme/themeDefinition.json

@@ -319,14 +319,14 @@
                 "$type": "literal",
                 "$value": 4000
             },
-            "toast": {
-                "$type": "literal",
-                "$value": 5000
-            },
             "backdrop": {
                 "$type": "literal",
                 "$value": 7000
             },
+            "toast": {
+                "$type": "literal",
+                "$value": 8000
+            },
             "tooltip": {
                 "$type": "literal",
                 "$value": 9000

package/lib/utils/focusHeadingOrContainer.d.ts

@@ -3,6 +3,6 @@
  * @param container Node to query for a heading.
  * @param label Fallback label to apply to the container if focused.
  */
-declare const focusHeadingOrContainer: (container: ParentNode, label: string) => void;
+declare const focusHeadingOrContainer: (container: ParentNode, label: string) => boolean;
 export default focusHeadingOrContainer;
 //# sourceMappingURL=focusHeadingOrContainer.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"focusHeadingOrContainer.d.ts","sourceRoot":"","sources":["../../src/utils/focusHeadingOrContainer.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,QAAA,MAAM,uBAAuB,cAAe,UAAU,SAAS,MAAM,SAkCpE,CAAC;AAEF,eAAe,uBAAuB,CAAC"}
+{"version":3,"file":"focusHeadingOrContainer.d.ts","sourceRoot":"","sources":["../../src/utils/focusHeadingOrContainer.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,QAAA,MAAM,uBAAuB,cAAe,UAAU,SAAS,MAAM,KAAG,OAmCvE,CAAC;AAEF,eAAe,uBAAuB,CAAC"}

package/lib/utils/focusHeadingOrContainer.js

@@ -7,7 +7,7 @@ const focusHeadingOrContainer = (container, label) => {
     const heading = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].reduce((el, tag) => el ?? container.querySelector(tag), null);
     const target = heading ?? container;
     if (!(target instanceof HTMLElement || target instanceof SVGElement))
-        return;
+        return false;
     if (target === container && !target.hasAttribute('aria-label')) {
         target.setAttribute('aria-label', label);
         target.addEventListener('focusout', () => {
@@ -24,6 +24,7 @@ const focusHeadingOrContainer = (container, label) => {
             target.removeAttribute('tabindex');
         }, { once: true });
     }
+    return document.activeElement === target;
 };
 export default focusHeadingOrContainer;
 //# sourceMappingURL=focusHeadingOrContainer.js.map

package/lib/utils/focusHeadingOrContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"focusHeadingOrContainer.js","sourceRoot":"","sources":["../../src/utils/focusHeadingOrContainer.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,MAAM,uBAAuB,GAAG,CAAC,SAAqB,EAAE,KAAa,EAAE,EAAE;IACvE,MAAM,OAAO,GAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAW,CAAC,MAAM,CACpE,CAAC,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,EAAE,IAAI,SAAS,CAAC,aAAa,CAAC,GAAG,CAAC,EAC/C,IAAI,CACL,CAAC;IAEF,MAAM,MAAM,GAAG,OAAO,IAAI,SAAS,CAAC;IAEpC,IAAI,CAAC,CAAC,MAAM,YAAY,WAAW,IAAI,MAAM,YAAY,UAAU,CAAC;QAAE,OAAO;IAE7E,IAAI,MAAM,KAAK,SAAS,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC,YAAY,CAAC,EAAE;QAC9D,MAAM,CAAC,YAAY,CAAC,YAAY,EAAE,KAAK,CAAC,CAAC;QACzC,MAAM,CAAC,gBAAgB,CACrB,UAAU,EACV,GAAG,EAAE;YACH,MAAM,CAAC,eAAe,CAAC,YAAY,CAAC,CAAC;QACvC,CAAC,EACD,EAAE,IAAI,EAAE,IAAI,EAAE,CACf,CAAC;KACH;IAED,IAAI,MAAM,CAAC,YAAY,CAAC,UAAU,CAAC,EAAE;QACnC,MAAM,CAAC,KAAK,EAAE,CAAC;KAChB;SAAM;QACL,MAAM,CAAC,YAAY,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC;QACtC,MAAM,CAAC,KAAK,EAAE,CAAC;QACf,MAAM,CAAC,gBAAgB,CACrB,UAAU,EACV,GAAG,EAAE;YACH,MAAM,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC;QACrC,CAAC,EACD,EAAE,IAAI,EAAE,IAAI,EAAE,CACf,CAAC;KACH;AACH,CAAC,CAAC;AAEF,eAAe,uBAAuB,CAAC","sourcesContent":["/**\n * Focuses the highest level heading element in a container, or the container itself if there are no headings.\n * @param container Node to query for a heading.\n * @param label Fallback label to apply to the container if focused.\n */\nconst focusHeadingOrContainer = (container: ParentNode, label: string) => {\n  const heading = (['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] as const).reduce<HTMLHeadingElement | null>(\n    (el, tag) => el ?? container.querySelector(tag),\n    null\n  );\n\n  const target = heading ?? container;\n\n  if (!(target instanceof HTMLElement || target instanceof SVGElement)) return;\n\n  if (target === container && !target.hasAttribute('aria-label')) {\n    target.setAttribute('aria-label', label);\n    target.addEventListener(\n      'focusout',\n      () => {\n        target.removeAttribute('aria-label');\n      },\n      { once: true }\n    );\n  }\n\n  if (target.hasAttribute('tabindex')) {\n    target.focus();\n  } else {\n    target.setAttribute('tabindex', '-1');\n    target.focus();\n    target.addEventListener(\n      'focusout',\n      () => {\n        target.removeAttribute('tabindex');\n      },\n      { once: true }\n    );\n  }\n};\n\nexport default focusHeadingOrContainer;\n"]}
+{"version":3,"file":"focusHeadingOrContainer.js","sourceRoot":"","sources":["../../src/utils/focusHeadingOrContainer.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,MAAM,uBAAuB,GAAG,CAAC,SAAqB,EAAE,KAAa,EAAW,EAAE;IAChF,MAAM,OAAO,GAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAW,CAAC,MAAM,CACpE,CAAC,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,EAAE,IAAI,SAAS,CAAC,aAAa,CAAC,GAAG,CAAC,EAC/C,IAAI,CACL,CAAC;IAEF,MAAM,MAAM,GAAG,OAAO,IAAI,SAAS,CAAC;IAEpC,IAAI,CAAC,CAAC,MAAM,YAAY,WAAW,IAAI,MAAM,YAAY,UAAU,CAAC;QAAE,OAAO,KAAK,CAAC;IAEnF,IAAI,MAAM,KAAK,SAAS,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC,YAAY,CAAC,EAAE;QAC9D,MAAM,CAAC,YAAY,CAAC,YAAY,EAAE,KAAK,CAAC,CAAC;QACzC,MAAM,CAAC,gBAAgB,CACrB,UAAU,EACV,GAAG,EAAE;YACH,MAAM,CAAC,eAAe,CAAC,YAAY,CAAC,CAAC;QACvC,CAAC,EACD,EAAE,IAAI,EAAE,IAAI,EAAE,CACf,CAAC;KACH;IAED,IAAI,MAAM,CAAC,YAAY,CAAC,UAAU,CAAC,EAAE;QACnC,MAAM,CAAC,KAAK,EAAE,CAAC;KAChB;SAAM;QACL,MAAM,CAAC,YAAY,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC;QACtC,MAAM,CAAC,KAAK,EAAE,CAAC;QACf,MAAM,CAAC,gBAAgB,CACrB,UAAU,EACV,GAAG,EAAE;YACH,MAAM,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC;QACrC,CAAC,EACD,EAAE,IAAI,EAAE,IAAI,EAAE,CACf,CAAC;KACH;IACD,OAAO,QAAQ,CAAC,aAAa,KAAK,MAAM,CAAC;AAC3C,CAAC,CAAC;AAEF,eAAe,uBAAuB,CAAC","sourcesContent":["/**\n * Focuses the highest level heading element in a container, or the container itself if there are no headings.\n * @param container Node to query for a heading.\n * @param label Fallback label to apply to the container if focused.\n */\nconst focusHeadingOrContainer = (container: ParentNode, label: string): boolean => {\n  const heading = (['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] as const).reduce<HTMLHeadingElement | null>(\n    (el, tag) => el ?? container.querySelector(tag),\n    null\n  );\n\n  const target = heading ?? container;\n\n  if (!(target instanceof HTMLElement || target instanceof SVGElement)) return false;\n\n  if (target === container && !target.hasAttribute('aria-label')) {\n    target.setAttribute('aria-label', label);\n    target.addEventListener(\n      'focusout',\n      () => {\n        target.removeAttribute('aria-label');\n      },\n      { once: true }\n    );\n  }\n\n  if (target.hasAttribute('tabindex')) {\n    target.focus();\n  } else {\n    target.setAttribute('tabindex', '-1');\n    target.focus();\n    target.addEventListener(\n      'focusout',\n      () => {\n        target.removeAttribute('tabindex');\n      },\n      { once: true }\n    );\n  }\n  return document.activeElement === target;\n};\n\nexport default focusHeadingOrContainer;\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/cosmos-react-core",
-  "version": "4.0.0-dev.14.2",
+  "version": "4.0.0-dev.15.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.",
   "author": "Pegasystems",
   "license": "SEE LICENSE IN LICENSE",
@@ -47,6 +47,7 @@
     "react-color": "^2.19.3",
     "react-dom": "^16.14.0 || ^17.0.0",
     "react-popper": "^2.2.5",
+    "shortcuts": "^2.0.3",
     "styled-components": "^5.2.0"
   },
   "devDependencies": {