@pega/cosmos-react-work 9.0.0-build.9.9 → 9.0.1

package/lib/components/Shortcuts/Shortcuts.styles.js

@@ -0,0 +1,114 @@
+import styled, { css } from 'styled-components';
+import { mix } from 'polished';
+import { Button, defaultThemeProp, Icon, Text, tryCatch } from '@pega/cosmos-react-core';
+export const StyledShortcutsCardsContainer = styled.ul(({ theme: { base }, isSmallOrAbove, showHeader }) => {
+    return css `
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    gap: ${base.spacing};
+    list-style: none;
+    padding: ${base.spacing} 0;
+    margin: 0;
+
+    ${isSmallOrAbove &&
+        css `
+      grid-auto-rows: 1fr;
+      grid-template-columns: ${showHeader
+            ? 'repeat(auto-fill, minmax(14rem, 1fr))'
+            : 'repeat(auto-fit, minmax(14rem, 14rem))'};
+      justify-content: ${showHeader ? 'start' : 'center'};
+      align-items: stretch;
+      width: 100%;
+    `}
+  `;
+});
+StyledShortcutsCardsContainer.defaultProps = defaultThemeProp;
+export const StyledShortcutsCategoriesContainer = styled.div(({ theme: { base }, isSmallOrAbove }) => {
+    return css `
+      display: grid;
+      grid-template-columns: minmax(0, 1fr);
+      gap: calc(${base.spacing} * 2);
+      width: 100%;
+
+      ${isSmallOrAbove &&
+        css `
+        grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
+        align-items: start;
+      `}
+
+      ${!isSmallOrAbove &&
+        css `
+        padding-inline: calc(${base.spacing} * 0.5);
+        padding-block: ${base.spacing};
+      `}
+    `;
+});
+StyledShortcutsCategoriesContainer.defaultProps = defaultThemeProp;
+export const StyledShortcutsCategoryHeading = styled(Text)(({ theme: { base } }) => {
+    return css `
+    margin-block-end: ${base.spacing};
+  `;
+});
+StyledShortcutsCategoryHeading.defaultProps = defaultThemeProp;
+export const StyledShortcutsCard = styled.li `
+  display: flex;
+  flex-direction: column;
+`;
+export const StyledShortcutsCardButton = styled(Button)(({ theme: { base, components }, layoutVariant }) => {
+    const hoverBackgroundColor = tryCatch(() => mix(0.9, base.palette['primary-background'], components.button['secondary-color']));
+    return css `
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    flex: 1;
+    width: 100%;
+    border: 0.0625rem solid ${base.palette['border-line']};
+    border-radius: ${base['border-radius']};
+    background: ${base.palette['primary-background']};
+    padding-inline: calc(${base.spacing} * 2);
+
+    &:hover {
+      background: ${hoverBackgroundColor};
+    }
+
+    ${layoutVariant === 'stacked' &&
+        css `
+      flex-direction: column;
+      gap: calc(${base.spacing} * 2);
+      padding-block-start: calc(${base.spacing} * 4);
+      padding-block-end: calc(${base.spacing} * 3);
+      text-align: center;
+      min-height: 8rem;
+    `}
+
+    ${layoutVariant === 'inline' &&
+        css `
+      flex-direction: row;
+      gap: calc(${base.spacing} * 1.5);
+      padding-block: calc(${base.spacing} * 1.5);
+      text-align: start;
+    `}
+  `;
+});
+StyledShortcutsCardButton.defaultProps = defaultThemeProp;
+export const StyledShortcutsCardIcon = styled(Icon)(({ layoutVariant }) => css `
+    flex-shrink: 0;
+
+    ${layoutVariant === 'stacked' &&
+    css `
+      width: 3rem;
+      height: 3rem;
+    `}
+  `);
+StyledShortcutsCardIcon.defaultProps = defaultThemeProp;
+export const StyledLabelRow = styled.span(({ theme: { base } }) => css `
+    display: flex;
+    align-items: center;
+    gap: calc(${base.spacing} * 0.5);
+  `);
+StyledLabelRow.defaultProps = defaultThemeProp;
+export const StyledExternalIcon = styled(Icon) `
+  flex-shrink: 0;
+`;
+StyledExternalIcon.defaultProps = defaultThemeProp;
+//# sourceMappingURL=Shortcuts.styles.js.map

package/lib/components/Shortcuts/Shortcuts.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Shortcuts.styles.js","sourceRoot":"","sources":["../../../src/components/Shortcuts/Shortcuts.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAE/B,OAAO,EAAE,MAAM,EAAE,gBAAgB,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAEzF,MAAM,CAAC,MAAM,6BAA6B,GAAG,MAAM,CAAC,EAAE,CAGnD,CAAC,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,cAAc,EAAE,UAAU,EAAE,EAAE,EAAE;IACrD,OAAO,GAAG,CAAA;;;WAGD,IAAI,CAAC,OAAO;;eAER,IAAI,CAAC,OAAO;;;MAGrB,cAAc;QAChB,GAAG,CAAA;;+BAEwB,UAAU;YACjC,CAAC,CAAC,uCAAuC;YACzC,CAAC,CAAC,wCAAwC;yBACzB,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ;;;KAGnD;GACF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,6BAA6B,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE9D,MAAM,CAAC,MAAM,kCAAkC,GAAG,MAAM,CAAC,GAAG,CAC1D,CAAC,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,cAAc,EAAE,EAAE,EAAE;IACtC,OAAO,GAAG,CAAA;;;kBAGI,IAAI,CAAC,OAAO;;;QAGtB,cAAc;QAChB,GAAG,CAAA;;;OAGF;;QAEC,CAAC,cAAc;QACjB,GAAG,CAAA;+BACsB,IAAI,CAAC,OAAO;yBAClB,IAAI,CAAC,OAAO;OAC9B;KACF,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,kCAAkC,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnE,MAAM,CAAC,MAAM,8BAA8B,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,EAAE;IACjF,OAAO,GAAG,CAAA;wBACY,IAAI,CAAC,OAAO;GACjC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,8BAA8B,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE/D,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,EAAE,CAAA;;;CAG3C,CAAC;AAEF,MAAM,CAAC,MAAM,yBAAyB,GAAG,MAAM,CAAC,MAAM,CAAC,CAA0C,CAAC,EAChG,KAAK,EAAE,EAAE,IAAI,EAAE,UAAU,EAAE,EAC3B,aAAa,EACd,EAAE,EAAE;IACH,MAAM,oBAAoB,GAAG,QAAQ,CAAC,GAAG,EAAE,CACzC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC,EAAE,UAAU,CAAC,MAAM,CAAC,iBAAiB,CAAC,CAAC,CACnF,CAAC;IAEF,OAAO,GAAG,CAAA;;;;;;8BAMkB,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;qBACpC,IAAI,CAAC,eAAe,CAAC;kBACxB,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC;2BACzB,IAAI,CAAC,OAAO;;;oBAGnB,oBAAoB;;;MAGlC,aAAa,KAAK,SAAS;QAC7B,GAAG,CAAA;;kBAEW,IAAI,CAAC,OAAO;kCACI,IAAI,CAAC,OAAO;gCACd,IAAI,CAAC,OAAO;;;KAGvC;;MAEC,aAAa,KAAK,QAAQ;QAC5B,GAAG,CAAA;;kBAEW,IAAI,CAAC,OAAO;4BACF,IAAI,CAAC,OAAO;;KAEnC;GACF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,yBAAyB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE1D,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,IAAI,CAAC,CACjD,CAAC,EAAE,aAAa,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;;;MAGtB,aAAa,KAAK,SAAS;IAC7B,GAAG,CAAA;;;KAGF;GACF,CACF,CAAC;AAEF,uBAAuB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAExD,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,IAAI,CACvC,CAAC,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;;;gBAGd,IAAI,CAAC,OAAO;GACzB,CACF,CAAC;AAEF,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE/C,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;CAE7C,CAAC;AAEF,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\nimport { mix } from 'polished';\n\nimport { Button, defaultThemeProp, Icon, Text, tryCatch } from '@pega/cosmos-react-core';\n\nexport const StyledShortcutsCardsContainer = styled.ul<{\n  isSmallOrAbove: boolean;\n  showHeader: boolean;\n}>(({ theme: { base }, isSmallOrAbove, showHeader }) => {\n  return css`\n    display: grid;\n    grid-template-columns: minmax(0, 1fr);\n    gap: ${base.spacing};\n    list-style: none;\n    padding: ${base.spacing} 0;\n    margin: 0;\n\n    ${isSmallOrAbove &&\n    css`\n      grid-auto-rows: 1fr;\n      grid-template-columns: ${showHeader\n        ? 'repeat(auto-fill, minmax(14rem, 1fr))'\n        : 'repeat(auto-fit, minmax(14rem, 14rem))'};\n      justify-content: ${showHeader ? 'start' : 'center'};\n      align-items: stretch;\n      width: 100%;\n    `}\n  `;\n});\n\nStyledShortcutsCardsContainer.defaultProps = defaultThemeProp;\n\nexport const StyledShortcutsCategoriesContainer = styled.div<{ isSmallOrAbove: boolean }>(\n  ({ theme: { base }, isSmallOrAbove }) => {\n    return css`\n      display: grid;\n      grid-template-columns: minmax(0, 1fr);\n      gap: calc(${base.spacing} * 2);\n      width: 100%;\n\n      ${isSmallOrAbove &&\n      css`\n        grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));\n        align-items: start;\n      `}\n\n      ${!isSmallOrAbove &&\n      css`\n        padding-inline: calc(${base.spacing} * 0.5);\n        padding-block: ${base.spacing};\n      `}\n    `;\n  }\n);\n\nStyledShortcutsCategoriesContainer.defaultProps = defaultThemeProp;\n\nexport const StyledShortcutsCategoryHeading = styled(Text)(({ theme: { base } }) => {\n  return css`\n    margin-block-end: ${base.spacing};\n  `;\n});\n\nStyledShortcutsCategoryHeading.defaultProps = defaultThemeProp;\n\nexport const StyledShortcutsCard = styled.li`\n  display: flex;\n  flex-direction: column;\n`;\n\nexport const StyledShortcutsCardButton = styled(Button)<{ layoutVariant: 'stacked' | 'inline' }>(({\n  theme: { base, components },\n  layoutVariant\n}) => {\n  const hoverBackgroundColor = tryCatch(() =>\n    mix(0.9, base.palette['primary-background'], components.button['secondary-color'])\n  );\n\n  return css`\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n    flex: 1;\n    width: 100%;\n    border: 0.0625rem solid ${base.palette['border-line']};\n    border-radius: ${base['border-radius']};\n    background: ${base.palette['primary-background']};\n    padding-inline: calc(${base.spacing} * 2);\n\n    &:hover {\n      background: ${hoverBackgroundColor};\n    }\n\n    ${layoutVariant === 'stacked' &&\n    css`\n      flex-direction: column;\n      gap: calc(${base.spacing} * 2);\n      padding-block-start: calc(${base.spacing} * 4);\n      padding-block-end: calc(${base.spacing} * 3);\n      text-align: center;\n      min-height: 8rem;\n    `}\n\n    ${layoutVariant === 'inline' &&\n    css`\n      flex-direction: row;\n      gap: calc(${base.spacing} * 1.5);\n      padding-block: calc(${base.spacing} * 1.5);\n      text-align: start;\n    `}\n  `;\n});\n\nStyledShortcutsCardButton.defaultProps = defaultThemeProp;\n\nexport const StyledShortcutsCardIcon = styled(Icon)<{ layoutVariant: 'stacked' | 'inline' }>(\n  ({ layoutVariant }) => css`\n    flex-shrink: 0;\n\n    ${layoutVariant === 'stacked' &&\n    css`\n      width: 3rem;\n      height: 3rem;\n    `}\n  `\n);\n\nStyledShortcutsCardIcon.defaultProps = defaultThemeProp;\n\nexport const StyledLabelRow = styled.span(\n  ({ theme: { base } }) => css`\n    display: flex;\n    align-items: center;\n    gap: calc(${base.spacing} * 0.5);\n  `\n);\n\nStyledLabelRow.defaultProps = defaultThemeProp;\n\nexport const StyledExternalIcon = styled(Icon)`\n  flex-shrink: 0;\n`;\n\nStyledExternalIcon.defaultProps = defaultThemeProp;\n"]}

package/lib/components/Shortcuts/Shortcuts.test-ids.d.ts

@@ -0,0 +1,2 @@
+export declare const getShortcutsTestIds: (testIdProp?: import("@pega/cosmos-react-core").TestIdProp["testId"]) => import("@pega/cosmos-react-core").TestIdsRecord<readonly ["list", "emptyState", "categorySection", "categoryHeading"]>;
+//# sourceMappingURL=Shortcuts.test-ids.d.ts.map

package/lib/components/Shortcuts/Shortcuts.test-ids.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Shortcuts.test-ids.d.ts","sourceRoot":"","sources":["../../../src/components/Shortcuts/Shortcuts.test-ids.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,mBAAmB,iMAKrB,CAAC"}

package/lib/components/Shortcuts/Shortcuts.test-ids.js

@@ -0,0 +1,8 @@
+import { createTestIds } from '@pega/cosmos-react-core';
+export const getShortcutsTestIds = createTestIds('shortcuts', [
+    'list',
+    'emptyState',
+    'categorySection',
+    'categoryHeading'
+]);
+//# sourceMappingURL=Shortcuts.test-ids.js.map

package/lib/components/Shortcuts/Shortcuts.test-ids.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Shortcuts.test-ids.js","sourceRoot":"","sources":["../../../src/components/Shortcuts/Shortcuts.test-ids.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAExD,MAAM,CAAC,MAAM,mBAAmB,GAAG,aAAa,CAAC,WAAW,EAAE;IAC5D,MAAM;IACN,YAAY;IACZ,iBAAiB;IACjB,iBAAiB;CACT,CAAC,CAAC","sourcesContent":["import { createTestIds } from '@pega/cosmos-react-core';\n\nexport const getShortcutsTestIds = createTestIds('shortcuts', [\n  'list',\n  'emptyState',\n  'categorySection',\n  'categoryHeading'\n] as const);\n"]}

package/lib/components/Shortcuts/Shortcuts.types.d.ts

@@ -0,0 +1,64 @@
+import type { Ref } from 'react';
+import type { NoChildrenProp, TestIdProp } from '@pega/cosmos-react-core';
+interface ShortcutItemBase {
+    /** Unique identifier for this shortcut. */
+    id: string;
+    /** Display label shown on the shortcut. */
+    label: string;
+    /** Icon name from the registered icon set. */
+    icon: string;
+}
+export interface ShortcutLinkItem extends ShortcutItemBase {
+    /** Discriminant — this item navigates to an external URL. */
+    type: 'external';
+    /** Absolute URL the link navigates to. Opens in a new tab. */
+    href: string;
+}
+export interface ShortcutNavItem extends ShortcutItemBase {
+    /** Discriminant — this item navigates to a portal landing page. */
+    type: 'page';
+    /** Callback invoked when the user activates this shortcut. */
+    onClick: () => void;
+}
+export type ShortcutItem = ShortcutLinkItem | ShortcutNavItem;
+export interface ShortcutCategory {
+    /** Unique identifier for this category. */
+    id: string;
+    /** Display label shown as the category heading. */
+    label: string;
+    /** Shortcut items belonging to this category. */
+    items: ShortcutItem[];
+}
+interface ShortcutsWithItems {
+    /** Shortcut items to render as cards. */
+    items?: ShortcutItem[];
+    categories?: never;
+    /**
+     * Whether to render the outer card shell with a heading.
+     * When `false`, only the card grid is rendered, centered within its container.
+     * @default true
+     */
+    showHeader?: boolean;
+}
+interface ShortcutsWithCategories {
+    items?: never;
+    /** Grouped shortcut items, each rendered as cards under a category heading. */
+    categories: ShortcutCategory[];
+    showHeader?: never;
+}
+interface ShortcutsBaseProps extends NoChildrenProp, TestIdProp {
+    /** Heading displayed above the shortcuts. */
+    heading?: string;
+    /**
+     * Controls the layout variant of each shortcut card.
+     * - `stacked`: large icon above the label (default card style).
+     * - `inline`: small icon inline to the left of the label (list/link style).
+     * @default 'inline'
+     */
+    variant?: 'stacked' | 'inline';
+    /** Ref for the root card element. */
+    ref?: Ref<HTMLDivElement>;
+}
+export type ShortcutsProps = ShortcutsBaseProps & (ShortcutsWithItems | ShortcutsWithCategories);
+export {};
+//# sourceMappingURL=Shortcuts.types.d.ts.map

package/lib/components/Shortcuts/Shortcuts.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Shortcuts.types.d.ts","sourceRoot":"","sources":["../../../src/components/Shortcuts/Shortcuts.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,KAAK,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAE1E,UAAU,gBAAgB;IACxB,2CAA2C;IAC3C,EAAE,EAAE,MAAM,CAAC;IACX,2CAA2C;IAC3C,KAAK,EAAE,MAAM,CAAC;IACd,8CAA8C;IAC9C,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,gBAAiB,SAAQ,gBAAgB;IACxD,6DAA6D;IAC7D,IAAI,EAAE,UAAU,CAAC;IACjB,8DAA8D;IAC9D,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,eAAgB,SAAQ,gBAAgB;IACvD,mEAAmE;IACnE,IAAI,EAAE,MAAM,CAAC;IACb,8DAA8D;IAC9D,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,MAAM,MAAM,YAAY,GAAG,gBAAgB,GAAG,eAAe,CAAC;AAE9D,MAAM,WAAW,gBAAgB;IAC/B,2CAA2C;IAC3C,EAAE,EAAE,MAAM,CAAC;IACX,mDAAmD;IACnD,KAAK,EAAE,MAAM,CAAC;IACd,iDAAiD;IACjD,KAAK,EAAE,YAAY,EAAE,CAAC;CACvB;AAED,UAAU,kBAAkB;IAC1B,yCAAyC;IACzC,KAAK,CAAC,EAAE,YAAY,EAAE,CAAC;IACvB,UAAU,CAAC,EAAE,KAAK,CAAC;IACnB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,UAAU,uBAAuB;IAC/B,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,+EAA+E;IAC/E,UAAU,EAAE,gBAAgB,EAAE,CAAC;IAC/B,UAAU,CAAC,EAAE,KAAK,CAAC;CACpB;AAED,UAAU,kBAAmB,SAAQ,cAAc,EAAE,UAAU;IAC7D,6CAA6C;IAC7C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC/B,qCAAqC;IACrC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,MAAM,MAAM,cAAc,GAAG,kBAAkB,GAAG,CAAC,kBAAkB,GAAG,uBAAuB,CAAC,CAAC"}

package/lib/components/Shortcuts/Shortcuts.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Shortcuts.types.js.map

package/lib/components/Shortcuts/Shortcuts.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Shortcuts.types.js","sourceRoot":"","sources":["../../../src/components/Shortcuts/Shortcuts.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { Ref } from 'react';\n\nimport type { NoChildrenProp, TestIdProp } from '@pega/cosmos-react-core';\n\ninterface ShortcutItemBase {\n  /** Unique identifier for this shortcut. */\n  id: string;\n  /** Display label shown on the shortcut. */\n  label: string;\n  /** Icon name from the registered icon set. */\n  icon: string;\n}\n\nexport interface ShortcutLinkItem extends ShortcutItemBase {\n  /** Discriminant — this item navigates to an external URL. */\n  type: 'external';\n  /** Absolute URL the link navigates to. Opens in a new tab. */\n  href: string;\n}\n\nexport interface ShortcutNavItem extends ShortcutItemBase {\n  /** Discriminant — this item navigates to a portal landing page. */\n  type: 'page';\n  /** Callback invoked when the user activates this shortcut. */\n  onClick: () => void;\n}\n\nexport type ShortcutItem = ShortcutLinkItem | ShortcutNavItem;\n\nexport interface ShortcutCategory {\n  /** Unique identifier for this category. */\n  id: string;\n  /** Display label shown as the category heading. */\n  label: string;\n  /** Shortcut items belonging to this category. */\n  items: ShortcutItem[];\n}\n\ninterface ShortcutsWithItems {\n  /** Shortcut items to render as cards. */\n  items?: ShortcutItem[];\n  categories?: never;\n  /**\n   * Whether to render the outer card shell with a heading.\n   * When `false`, only the card grid is rendered, centered within its container.\n   * @default true\n   */\n  showHeader?: boolean;\n}\n\ninterface ShortcutsWithCategories {\n  items?: never;\n  /** Grouped shortcut items, each rendered as cards under a category heading. */\n  categories: ShortcutCategory[];\n  showHeader?: never;\n}\n\ninterface ShortcutsBaseProps extends NoChildrenProp, TestIdProp {\n  /** Heading displayed above the shortcuts. */\n  heading?: string;\n  /**\n   * Controls the layout variant of each shortcut card.\n   * - `stacked`: large icon above the label (default card style).\n   * - `inline`: small icon inline to the left of the label (list/link style).\n   * @default 'inline'\n   */\n  variant?: 'stacked' | 'inline';\n  /** Ref for the root card element. */\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport type ShortcutsProps = ShortcutsBaseProps & (ShortcutsWithItems | ShortcutsWithCategories);\n"]}

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

@@ -0,0 +1,3 @@
+export { default } from './Shortcuts';
+export type { ShortcutsProps, ShortcutItem, ShortcutLinkItem, ShortcutNavItem, ShortcutCategory } from './Shortcuts.types';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Shortcuts/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACtC,YAAY,EACV,cAAc,EACd,YAAY,EACZ,gBAAgB,EAChB,eAAe,EACf,gBAAgB,EACjB,MAAM,mBAAmB,CAAC"}

package/lib/components/Shortcuts/index.js

@@ -0,0 +1,2 @@
+export { default } from './Shortcuts';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Shortcuts/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC","sourcesContent":["export { default } from './Shortcuts';\nexport type {\n  ShortcutsProps,\n  ShortcutItem,\n  ShortcutLinkItem,\n  ShortcutNavItem,\n  ShortcutCategory\n} from './Shortcuts.types';\n"]}

package/lib/components/Stages/Stages.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Stages.d.ts","sourceRoot":"","sources":["../../../src/components/Stages/Stages.tsx"],"names":[],"mappings":"AAqBA,OAAO,KAAK,EAAE,+BAA+B,EAAgB,MAAM,yBAAyB,CAAC;AAG7F,OAAO,KAAK,EAAE,WAAW,EAAe,MAAM,gBAAgB,CAAC;AAe/D,QAAA,MAAM,MAAM,EAAE,+BAA+B,CAAC,WAAW,CA8MvD,CAAC;AAEH,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Stages.d.ts","sourceRoot":"","sources":["../../../src/components/Stages/Stages.tsx"],"names":[],"mappings":"AAuBA,OAAO,KAAK,EAAE,+BAA+B,EAAgB,MAAM,yBAAyB,CAAC;AAG7F,OAAO,KAAK,EAAE,WAAW,EAAe,MAAM,gBAAgB,CAAC;AAe/D,QAAA,MAAM,MAAM,EAAE,+BAA+B,CAAC,WAAW,CAwOvD,CAAC;AAEH,eAAe,MAAM,CAAC"}

package/lib/components/Stages/Stages.js

@@ -1,26 +1,29 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState, useRef, useEffect, forwardRef, Fragment } from 'react';
 import { remToPx } from 'polished';
-import { Icon, registerIcon, Flex, useI18n, Button, Modal, useBreakpoint, debounce, useModalManager, useConsolidatedRef, useUID, InfoDialog, useArrows, useAfterInitialEffect, VisuallyHiddenText } from '@pega/cosmos-react-core';
+import { Icon, registerIcon, Flex, useI18n, Button, Modal, useBreakpoint, debounce, useModalManager, useConsolidatedRef, useUID, InfoDialog, useArrows, useDirection, useAfterInitialEffect, VisuallyHiddenText, tryCatch } from '@pega/cosmos-react-core';
 import * as checkIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/check.icon';
 import StageGlimpse from './StageGlimpse';
 import { StyledInnerStage, StyledStageCompleteIcon, StyledStage, StyledStageContainer, StyledStageGlimpse, StyledStages, StyledStagesDescription, StyledStageText } from './Stages.styles';
 registerIcon(checkIcon);
-const Stages = forwardRef(function Stages({ current, stages, caseTitle, onLoadStage, ...restProps }, ref) {
+const Stages = forwardRef(function Stages({ current, stages, caseTitle, onLoadStage, readOnly = false, ...restProps }, ref) {
     const t = useI18n();
     const stagesRef = useConsolidatedRef(ref);
-    const stagesRefs = useRef([]);
+    const stagesRefs = useRef(new Map());
     const [target, setTarget] = useState(null);
+    const [targetStageId, setTargetStageId] = useState(null);
     const { create: createModal } = useModalManager();
     const modalMethods = useRef();
     const [showModal, setShowModal] = useState(false);
     const isSmallOrAbove = useBreakpoint('sm');
     const [compressedView, setCompressedView] = useState(false);
     const [minExpandedWidth, setMinExpandedWidth] = useState(0);
+    const { rtl } = useDirection();
     useArrows(stagesRef, {
+        cycle: false,
         selector: ':scope > li > button:not([aria-expanded])',
         dir: 'left-right',
-        initialFocusElement: stagesRefs.current.find(stage => stage.ariaCurrent)
+        initialFocusElement: stagesRefs.current.get(current) ?? null
     });
     const dialogId = useUID();
     const descriptionId = useUID();
@@ -43,7 +46,7 @@ const Stages = forwardRef(function Stages({ current, stages, caseTitle, onLoadSt
                 }
             }, {
                 root: stagesRef.current,
-                rootMargin: remToPx(0.0625),
+                rootMargin: tryCatch(() => remToPx(0.0625), () => '1px'),
                 threshold: 1
             });
             if (stagesRef.current.lastElementChild) {
@@ -55,6 +58,7 @@ const Stages = forwardRef(function Stages({ current, stages, caseTitle, onLoadSt
     const stagesToLoad = onLoadStage
         ? stages.filter(stage => !Array.isArray(stage.steps)).map(stage => stage.id)
         : [];
+    const renderModalStages = () => stages.map(stage => (_jsxs(Fragment, { children: [_jsxs(Flex, { container: { alignItems: 'start', gap: 0.5 }, children: [stage.completed && _jsx(StyledStageCompleteIcon, { name: 'check' }), _jsxs(StyledStageText, { variant: 'h3', isCurrent: stage.id === current, children: [stage.name, stage.completed && _jsx(VisuallyHiddenText, { children: `- ${t('completed')}` })] })] }), _jsx(StageGlimpse, { stage: stage })] }, stage.id)));
     const openModal = () => {
         setShowModal(true);
         if (stagesToLoad.length > 0)
@@ -64,11 +68,12 @@ const Stages = forwardRef(function Stages({ current, stages, caseTitle, onLoadSt
                 ? t('stages_case_lifecycle', [caseTitle])
                 : t('stages_default_case_lifecycle'),
             progress: stagesToLoad.length > 0,
-            children: stages.map(stage => (_jsxs(Fragment, { children: [_jsxs(Flex, { container: { alignItems: 'start', gap: 0.5 }, children: [stage.completed && _jsx(StyledStageCompleteIcon, { name: 'check' }), _jsxs(StyledStageText, { variant: 'h2', isCurrent: stage.id === current, children: [stage.name, stage.completed && _jsx(VisuallyHiddenText, { children: `- ${t('completed')}` })] })] }), _jsx(StageGlimpse, { stage: stage })] }, stage.id))),
+            children: renderModalStages(),
             onBeforeClose: () => {
                 setShowModal(false);
                 target?.focus();
                 setTarget(null);
+                setTargetStageId(null);
                 modalMethods.current = undefined;
             }
         });
@@ -76,10 +81,10 @@ const Stages = forwardRef(function Stages({ current, stages, caseTitle, onLoadSt
     useAfterInitialEffect(() => {
         modalMethods.current?.update({
             progress: stagesToLoad.length > 0,
-            children: stages.map(stage => (_jsxs(Fragment, { children: [_jsxs(Flex, { container: { alignItems: 'start', gap: 0.5 }, children: [stage.completed && _jsx(StyledStageCompleteIcon, { name: 'check' }), _jsxs(StyledStageText, { variant: 'h2', isCurrent: stage.id === current, children: [stage.name, stage.completed && _jsx(VisuallyHiddenText, { children: `- ${t('completed')}` })] })] }), _jsx(StageGlimpse, { stage: stage })] }, stage.id)))
+            children: renderModalStages()
         });
     }, [stagesToLoad.length]);
-    return (_jsxs(_Fragment, { children: [_jsx(Flex, { ...restProps, container: true, as: StyledStages, ref: stagesRef, "aria-label": t('stages_label'), "aria-describedby": descriptionId, children: stages.map((stage, index) => {
+    return (_jsxs(_Fragment, { children: [_jsx(Flex, { ...restProps, container: true, as: StyledStages, ref: stagesRef, dir: rtl ? 'rtl' : 'ltr', "aria-label": t('stages_label'), "aria-describedby": descriptionId, children: stages.map((stage, index) => {
                     const isCurrent = stage.id === current;
                     let stageStatusText = t(stage.completed ? 'completed' : 'not_started');
                     if (isCurrent)
@@ -95,22 +100,42 @@ const Stages = forwardRef(function Stages({ current, stages, caseTitle, onLoadSt
                     else {
                         stageStatus = 'pending';
                     }
-                    return (_jsxs(Fragment, { children: [_jsx(Flex, { as: StyledStageContainer, item: { grow: 1, shrink: 0 }, children: _jsxs(Flex, { container: { justify: 'center', alignItems: 'center' }, as: StyledStage, item: {
+                    return (_jsxs(Fragment, { children: [_jsx(Flex, { as: StyledStageContainer, item: { grow: 1, shrink: 0 }, readOnly: readOnly, children: _jsxs(Flex, { container: { justify: 'center', alignItems: 'center' }, as: StyledStage, item: {
                                         grow: compressedView && !isCurrent ? 0 : 1,
                                         shrink: compressedView && isCurrent ? 1 : 0
-                                    }, status: stageStatus, "aria-current": isCurrent ? 'step' : undefined, "aria-label": t('stages_stage_label', [stage.name, stageStatusText]), onClick: (e) => {
+                                    }, status: stageStatus, readOnly: readOnly, "aria-current": isCurrent ? 'step' : undefined, "aria-label": t('stages_stage_label', [stage.name, stageStatusText]), onClick: (e) => {
                                         if (isSmallOrAbove) {
                                             if (hasToLoad)
                                                 onLoadStage?.([stage.id]);
                                             setTarget(e.currentTarget);
+                                            setTargetStageId(stage.id);
                                         }
                                         else {
                                             openModal();
                                         }
                                     }, ref: (el) => {
-                                        stagesRefs.current[index] = el;
-                                    }, "aria-expanded": target && isSmallOrAbove, "aria-controls": target ? dialogId : undefined, "aria-haspopup": true, children: [stage.completed && _jsx(Icon, { name: 'check' }), (!compressedView || isCurrent || !stage.completed) && (_jsx(StyledInnerStage, { ellipsis: isCurrent && compressedView, children: !isCurrent && compressedView ? index + 1 : stage.name }))] }) }), target && stagesRefs.current[index] === target && isSmallOrAbove && !showModal && (_jsx(InfoDialog, { heading: stage.name, target: target, progress: hasToLoad ? t('loading') : undefined, onDismiss: () => {
+                                        if (el) {
+                                            stagesRefs.current.set(stage.id, el);
+                                        }
+                                        else {
+                                            stagesRefs.current.delete(stage.id);
+                                        }
+                                    }, "aria-expanded": target && isSmallOrAbove, "aria-controls": target ? dialogId : undefined, ...(!readOnly && {
+                                        'aria-haspopup': true,
+                                        onClick: (e) => {
+                                            if (isSmallOrAbove) {
+                                                if (hasToLoad)
+                                                    onLoadStage?.([stage.id]);
+                                                setTarget(e.currentTarget);
+                                                setTargetStageId(stage.id);
+                                            }
+                                            else {
+                                                openModal();
+                                            }
+                                        }
+                                    }), children: [stage.completed && _jsx(Icon, { name: 'check' }), (!compressedView || isCurrent || !stage.completed) && (_jsx(StyledInnerStage, { ellipsis: isCurrent && compressedView, children: !isCurrent && compressedView ? index + 1 : stage.name }))] }) }), target && targetStageId === stage.id && isSmallOrAbove && !showModal && (_jsx(InfoDialog, { heading: stage.name, target: target, progress: hasToLoad ? t('loading') : undefined, onDismiss: () => {
                                     setTarget(null);
+                                    setTargetStageId(null);
                                 }, placement: 'bottom-start', children: !hasToLoad && (_jsxs(StyledStageGlimpse, { children: [_jsx(StageGlimpse, { stage: stage }), _jsx(Button, { variant: 'secondary', onClick: openModal, children: t('stages_see_full_lifecycle') })] })) }))] }, stage.id));
                 }) }), _jsx(StyledStagesDescription, { id: descriptionId, children: t('stages_description') })] }));
 });

package/lib/components/Stages/Stages.js.map

@@ -1 +1 @@
-{"version":3,"file":"Stages.js","sourceRoot":"","sources":["../../../src/components/Stages/Stages.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState, useRef, useEffect, forwardRef, Fragment } from 'react';\nimport type { MouseEvent, PropsWithoutRef } from 'react';\nimport { remToPx } from 'polished';\n\nimport {\n  Icon,\n  registerIcon,\n  Flex,\n  useI18n,\n  Button,\n  Modal,\n  useBreakpoint,\n  debounce,\n  useModalManager,\n  useConsolidatedRef,\n  useUID,\n  InfoDialog,\n  useArrows,\n  useAfterInitialEffect,\n  VisuallyHiddenText\n} from '@pega/cosmos-react-core';\nimport type { ForwardRefForwardPropsComponent, ModalMethods } from '@pega/cosmos-react-core';\nimport * as checkIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/check.icon';\n\nimport type { StagesProps, StageStatus } from './Stages.types';\nimport StageGlimpse from './StageGlimpse';\nimport {\n  StyledInnerStage,\n  StyledStageCompleteIcon,\n  StyledStage,\n  StyledStageContainer,\n  StyledStageGlimpse,\n  StyledStages,\n  StyledStagesDescription,\n  StyledStageText\n} from './Stages.styles';\n\nregisterIcon(checkIcon);\n\nconst Stages: ForwardRefForwardPropsComponent<StagesProps> = forwardRef(function Stages(\n  { current, stages, caseTitle, onLoadStage, ...restProps }: PropsWithoutRef<StagesProps>,\n  ref: StagesProps['ref']\n) {\n  const t = useI18n();\n\n  const stagesRef = useConsolidatedRef(ref);\n  const stagesRefs = useRef<HTMLButtonElement[]>([]);\n\n  const [target, setTarget] = useState<HTMLButtonElement | null>(null);\n\n  const { create: createModal } = useModalManager();\n  const modalMethods = useRef<ModalMethods>();\n  const [showModal, setShowModal] = useState(false);\n\n  const isSmallOrAbove = useBreakpoint('sm');\n  const [compressedView, setCompressedView] = useState(false);\n  const [minExpandedWidth, setMinExpandedWidth] = useState(0);\n\n  useArrows(stagesRef, {\n    selector: ':scope > li > button:not([aria-expanded])',\n    dir: 'left-right',\n    initialFocusElement: stagesRefs.current.find(stage => stage.ariaCurrent)\n  });\n\n  const dialogId = useUID();\n  const descriptionId = useUID();\n\n  useEffect(() => {\n    if (stagesRef.current) {\n      if (compressedView) {\n        const resizeObserver = new ResizeObserver(\n          debounce((entries: ResizeObserverEntry[]) => {\n            if (entries[0].contentRect.width > minExpandedWidth) {\n              setCompressedView(false);\n            }\n          }, 100)\n        );\n        resizeObserver.observe(stagesRef.current);\n        return () => resizeObserver.disconnect();\n      }\n\n      const intersectionObserver = new IntersectionObserver(\n        entries => {\n          if (!entries[0].isIntersecting) {\n            setCompressedView(true);\n            if (entries[0].rootBounds) setMinExpandedWidth(entries[0].rootBounds.width);\n          }\n        },\n        {\n          root: stagesRef.current,\n          rootMargin: remToPx(0.0625),\n          threshold: 1\n        }\n      );\n\n      if (stagesRef.current.lastElementChild) {\n        intersectionObserver.observe(stagesRef.current.lastElementChild);\n        return () => intersectionObserver.disconnect();\n      }\n    }\n  }, [minExpandedWidth, compressedView, stages.length]);\n\n  const stagesToLoad = onLoadStage\n    ? stages.filter(stage => !Array.isArray(stage.steps)).map(stage => stage.id)\n    : [];\n\n  const openModal = () => {\n    setShowModal(true);\n    if (stagesToLoad.length > 0) onLoadStage?.(stagesToLoad);\n    modalMethods.current = createModal(Modal, {\n      heading: caseTitle\n        ? t('stages_case_lifecycle', [caseTitle])\n        : t('stages_default_case_lifecycle'),\n      progress: stagesToLoad.length > 0,\n      children: stages.map(stage => (\n        <Fragment key={stage.id}>\n          <Flex container={{ alignItems: 'start', gap: 0.5 }}>\n            {stage.completed && <StyledStageCompleteIcon name='check' />}\n            <StyledStageText variant='h2' isCurrent={stage.id === current}>\n              {stage.name}\n              {stage.completed && <VisuallyHiddenText>{`- ${t('completed')}`}</VisuallyHiddenText>}\n            </StyledStageText>\n          </Flex>\n          <StageGlimpse stage={stage} />\n        </Fragment>\n      )),\n      onBeforeClose: () => {\n        setShowModal(false);\n        target?.focus();\n        setTarget(null);\n        modalMethods.current = undefined;\n      }\n    });\n  };\n\n  useAfterInitialEffect(() => {\n    modalMethods.current?.update({\n      progress: stagesToLoad.length > 0,\n      children: stages.map(stage => (\n        <Fragment key={stage.id}>\n          <Flex container={{ alignItems: 'start', gap: 0.5 }}>\n            {stage.completed && <StyledStageCompleteIcon name='check' />}\n            <StyledStageText variant='h2' isCurrent={stage.id === current}>\n              {stage.name}\n              {stage.completed && <VisuallyHiddenText>{`- ${t('completed')}`}</VisuallyHiddenText>}\n            </StyledStageText>\n          </Flex>\n          <StageGlimpse stage={stage} />\n        </Fragment>\n      ))\n    });\n  }, [stagesToLoad.length]);\n\n  return (\n    <>\n      <Flex\n        {...restProps}\n        container\n        as={StyledStages}\n        ref={stagesRef}\n        aria-label={t('stages_label')}\n        aria-describedby={descriptionId}\n      >\n        {stages.map((stage, index) => {\n          const isCurrent = stage.id === current;\n          let stageStatusText = t(stage.completed ? 'completed' : 'not_started');\n          if (isCurrent) stageStatusText = t('current');\n\n          const hasToLoad = stagesToLoad.includes(stage.id);\n\n          let stageStatus: StageStatus;\n\n          if (stage.completed) {\n            stageStatus = 'completed';\n          } else if (isCurrent) {\n            stageStatus = 'current';\n          } else {\n            stageStatus = 'pending';\n          }\n\n          return (\n            <Fragment key={stage.id}>\n              <Flex as={StyledStageContainer} item={{ grow: 1, shrink: 0 }}>\n                <Flex\n                  container={{ justify: 'center', alignItems: 'center' }}\n                  as={StyledStage}\n                  item={{\n                    grow: compressedView && !isCurrent ? 0 : 1,\n                    shrink: compressedView && isCurrent ? 1 : 0\n                  }}\n                  status={stageStatus}\n                  aria-current={isCurrent ? 'step' : undefined}\n                  aria-label={t('stages_stage_label', [stage.name, stageStatusText])}\n                  onClick={(e: MouseEvent<HTMLButtonElement>) => {\n                    if (isSmallOrAbove) {\n                      if (hasToLoad) onLoadStage?.([stage.id]);\n                      setTarget(e.currentTarget);\n                    } else {\n                      openModal();\n                    }\n                  }}\n                  ref={(el: HTMLButtonElement) => {\n                    stagesRefs.current[index] = el;\n                  }}\n                  aria-expanded={target && isSmallOrAbove}\n                  aria-controls={target ? dialogId : undefined}\n                  aria-haspopup\n                >\n                  {stage.completed && <Icon name='check' />}\n                  {(!compressedView || isCurrent || !stage.completed) && (\n                    <StyledInnerStage ellipsis={isCurrent && compressedView}>\n                      {!isCurrent && compressedView ? index + 1 : stage.name}\n                    </StyledInnerStage>\n                  )}\n                </Flex>\n              </Flex>\n              {target && stagesRefs.current[index] === target && isSmallOrAbove && !showModal && (\n                <InfoDialog\n                  heading={stage.name}\n                  target={target}\n                  progress={hasToLoad ? t('loading') : undefined}\n                  onDismiss={() => {\n                    setTarget(null);\n                  }}\n                  placement='bottom-start'\n                >\n                  {!hasToLoad && (\n                    <StyledStageGlimpse>\n                      <StageGlimpse stage={stage} />\n                      <Button variant='secondary' onClick={openModal}>\n                        {t('stages_see_full_lifecycle')}\n                      </Button>\n                    </StyledStageGlimpse>\n                  )}\n                </InfoDialog>\n              )}\n            </Fragment>\n          );\n        })}\n      </Flex>\n      <StyledStagesDescription id={descriptionId}>\n        {t('stages_description')}\n      </StyledStagesDescription>\n    </>\n  );\n});\n\nexport default Stages;\n"]}
+{"version":3,"file":"Stages.js","sourceRoot":"","sources":["../../../src/components/Stages/Stages.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState, useRef, useEffect, forwardRef, Fragment } from 'react';\nimport type { MouseEvent, PropsWithoutRef } from 'react';\nimport { remToPx } from 'polished';\n\nimport {\n  Icon,\n  registerIcon,\n  Flex,\n  useI18n,\n  Button,\n  Modal,\n  useBreakpoint,\n  debounce,\n  useModalManager,\n  useConsolidatedRef,\n  useUID,\n  InfoDialog,\n  useArrows,\n  useDirection,\n  useAfterInitialEffect,\n  VisuallyHiddenText,\n  tryCatch\n} from '@pega/cosmos-react-core';\nimport type { ForwardRefForwardPropsComponent, ModalMethods } from '@pega/cosmos-react-core';\nimport * as checkIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/check.icon';\n\nimport type { StagesProps, StageStatus } from './Stages.types';\nimport StageGlimpse from './StageGlimpse';\nimport {\n  StyledInnerStage,\n  StyledStageCompleteIcon,\n  StyledStage,\n  StyledStageContainer,\n  StyledStageGlimpse,\n  StyledStages,\n  StyledStagesDescription,\n  StyledStageText\n} from './Stages.styles';\n\nregisterIcon(checkIcon);\n\nconst Stages: ForwardRefForwardPropsComponent<StagesProps> = forwardRef(function Stages(\n  {\n    current,\n    stages,\n    caseTitle,\n    onLoadStage,\n    readOnly = false,\n    ...restProps\n  }: PropsWithoutRef<StagesProps>,\n  ref: StagesProps['ref']\n) {\n  const t = useI18n();\n\n  const stagesRef = useConsolidatedRef(ref);\n  const stagesRefs = useRef<Map<string, HTMLButtonElement>>(new Map());\n\n  const [target, setTarget] = useState<HTMLButtonElement | null>(null);\n  const [targetStageId, setTargetStageId] = useState<string | null>(null);\n\n  const { create: createModal } = useModalManager();\n  const modalMethods = useRef<ModalMethods>();\n  const [showModal, setShowModal] = useState(false);\n\n  const isSmallOrAbove = useBreakpoint('sm');\n  const [compressedView, setCompressedView] = useState(false);\n  const [minExpandedWidth, setMinExpandedWidth] = useState(0);\n\n  const { rtl } = useDirection();\n\n  useArrows(stagesRef, {\n    cycle: false,\n    selector: ':scope > li > button:not([aria-expanded])',\n    dir: 'left-right',\n    initialFocusElement: stagesRefs.current.get(current) ?? null\n  });\n\n  const dialogId = useUID();\n  const descriptionId = useUID();\n\n  useEffect(() => {\n    if (stagesRef.current) {\n      if (compressedView) {\n        const resizeObserver = new ResizeObserver(\n          debounce((entries: ResizeObserverEntry[]) => {\n            if (entries[0].contentRect.width > minExpandedWidth) {\n              setCompressedView(false);\n            }\n          }, 100)\n        );\n        resizeObserver.observe(stagesRef.current);\n        return () => resizeObserver.disconnect();\n      }\n\n      const intersectionObserver = new IntersectionObserver(\n        entries => {\n          if (!entries[0].isIntersecting) {\n            setCompressedView(true);\n            if (entries[0].rootBounds) setMinExpandedWidth(entries[0].rootBounds.width);\n          }\n        },\n        {\n          root: stagesRef.current,\n          rootMargin: tryCatch(\n            () => remToPx(0.0625),\n            () => '1px'\n          ),\n          threshold: 1\n        }\n      );\n\n      if (stagesRef.current.lastElementChild) {\n        intersectionObserver.observe(stagesRef.current.lastElementChild);\n        return () => intersectionObserver.disconnect();\n      }\n    }\n  }, [minExpandedWidth, compressedView, stages.length]);\n\n  const stagesToLoad = onLoadStage\n    ? stages.filter(stage => !Array.isArray(stage.steps)).map(stage => stage.id)\n    : [];\n\n  const renderModalStages = () =>\n    stages.map(stage => (\n      <Fragment key={stage.id}>\n        <Flex container={{ alignItems: 'start', gap: 0.5 }}>\n          {stage.completed && <StyledStageCompleteIcon name='check' />}\n          <StyledStageText variant='h3' isCurrent={stage.id === current}>\n            {stage.name}\n            {stage.completed && <VisuallyHiddenText>{`- ${t('completed')}`}</VisuallyHiddenText>}\n          </StyledStageText>\n        </Flex>\n        <StageGlimpse stage={stage} />\n      </Fragment>\n    ));\n\n  const openModal = () => {\n    setShowModal(true);\n    if (stagesToLoad.length > 0) onLoadStage?.(stagesToLoad);\n    modalMethods.current = createModal(Modal, {\n      heading: caseTitle\n        ? t('stages_case_lifecycle', [caseTitle])\n        : t('stages_default_case_lifecycle'),\n      progress: stagesToLoad.length > 0,\n      children: renderModalStages(),\n      onBeforeClose: () => {\n        setShowModal(false);\n        target?.focus();\n        setTarget(null);\n        setTargetStageId(null);\n        modalMethods.current = undefined;\n      }\n    });\n  };\n\n  useAfterInitialEffect(() => {\n    modalMethods.current?.update({\n      progress: stagesToLoad.length > 0,\n      children: renderModalStages()\n    });\n  }, [stagesToLoad.length]);\n\n  return (\n    <>\n      <Flex\n        {...restProps}\n        container\n        as={StyledStages}\n        ref={stagesRef}\n        dir={rtl ? 'rtl' : 'ltr'}\n        aria-label={t('stages_label')}\n        aria-describedby={descriptionId}\n      >\n        {stages.map((stage, index) => {\n          const isCurrent = stage.id === current;\n          let stageStatusText = t(stage.completed ? 'completed' : 'not_started');\n          if (isCurrent) stageStatusText = t('current');\n\n          const hasToLoad = stagesToLoad.includes(stage.id);\n\n          let stageStatus: StageStatus;\n\n          if (stage.completed) {\n            stageStatus = 'completed';\n          } else if (isCurrent) {\n            stageStatus = 'current';\n          } else {\n            stageStatus = 'pending';\n          }\n\n          return (\n            <Fragment key={stage.id}>\n              <Flex as={StyledStageContainer} item={{ grow: 1, shrink: 0 }} readOnly={readOnly}>\n                <Flex\n                  container={{ justify: 'center', alignItems: 'center' }}\n                  as={StyledStage}\n                  item={{\n                    grow: compressedView && !isCurrent ? 0 : 1,\n                    shrink: compressedView && isCurrent ? 1 : 0\n                  }}\n                  status={stageStatus}\n                  readOnly={readOnly}\n                  aria-current={isCurrent ? 'step' : undefined}\n                  aria-label={t('stages_stage_label', [stage.name, stageStatusText])}\n                  onClick={(e: MouseEvent<HTMLButtonElement>) => {\n                    if (isSmallOrAbove) {\n                      if (hasToLoad) onLoadStage?.([stage.id]);\n                      setTarget(e.currentTarget);\n                      setTargetStageId(stage.id);\n                    } else {\n                      openModal();\n                    }\n                  }}\n                  ref={(el: HTMLButtonElement | null) => {\n                    if (el) {\n                      stagesRefs.current.set(stage.id, el);\n                    } else {\n                      stagesRefs.current.delete(stage.id);\n                    }\n                  }}\n                  aria-expanded={target && isSmallOrAbove}\n                  aria-controls={target ? dialogId : undefined}\n                  {...(!readOnly && {\n                    'aria-haspopup': true,\n                    onClick: (e: MouseEvent<HTMLButtonElement>) => {\n                      if (isSmallOrAbove) {\n                        if (hasToLoad) onLoadStage?.([stage.id]);\n                        setTarget(e.currentTarget);\n                        setTargetStageId(stage.id);\n                      } else {\n                        openModal();\n                      }\n                    }\n                  })}\n                >\n                  {stage.completed && <Icon name='check' />}\n                  {(!compressedView || isCurrent || !stage.completed) && (\n                    <StyledInnerStage ellipsis={isCurrent && compressedView}>\n                      {!isCurrent && compressedView ? index + 1 : stage.name}\n                    </StyledInnerStage>\n                  )}\n                </Flex>\n              </Flex>\n              {target && targetStageId === stage.id && isSmallOrAbove && !showModal && (\n                <InfoDialog\n                  heading={stage.name}\n                  target={target}\n                  progress={hasToLoad ? t('loading') : undefined}\n                  onDismiss={() => {\n                    setTarget(null);\n                    setTargetStageId(null);\n                  }}\n                  placement='bottom-start'\n                >\n                  {!hasToLoad && (\n                    <StyledStageGlimpse>\n                      <StageGlimpse stage={stage} />\n                      <Button variant='secondary' onClick={openModal}>\n                        {t('stages_see_full_lifecycle')}\n                      </Button>\n                    </StyledStageGlimpse>\n                  )}\n                </InfoDialog>\n              )}\n            </Fragment>\n          );\n        })}\n      </Flex>\n      <StyledStagesDescription id={descriptionId}>\n        {t('stages_description')}\n      </StyledStagesDescription>\n    </>\n  );\n});\n\nexport default Stages;\n"]}

package/lib/components/Stages/Stages.styles.d.ts

@@ -1,20 +1,27 @@
-export declare const StyledStages: import("styled-components").StyledComponent<"ol", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledInnerStage: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {
+export declare const StyledStages: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>, never>> & string;
+export declare const StyledInnerStage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
     ellipsis?: boolean;
-}, never>;
-export declare const StyledStage: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {
+}>> & string;
+export declare const StyledStage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
     status: "completed" | "current" | "pending";
-}, never>;
-export declare const StyledStageCompleteIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@pega/cosmos-react-core").IconProps>, import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledStageText: import("styled-components").StyledComponent<import("@pega/cosmos-react-core").ForwardRefForwardPropsComponent<import("@pega/cosmos-react-core").TextProps>, import("styled-components").DefaultTheme, {
+    readOnly?: boolean;
+}>> & string;
+export declare const StyledStageCompleteIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("@pega/cosmos-react-core").IconProps & import("styled-components/dist/types").BaseObject, import("styled-components/dist/types").BaseObject>> & string & Omit<import("react").ForwardRefExoticComponent<import("@pega/cosmos-react-core").IconProps>, keyof import("react").Component<any, {}, any>>;
+export declare const StyledStageText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<Omit<import("@pega/cosmos-react-core").TextProps, "ref"> & import("react").RefAttributes<HTMLHeadingElement | HTMLSpanElement> & import("@pega/cosmos-react-core").ForwardProps, "ref"> & {
+    ref?: ((instance: HTMLHeadingElement | HTMLSpanElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLHeadingElement | HTMLSpanElement> | null | undefined;
+}, {
     isCurrent?: boolean;
-}, never>;
-export declare const StyledStageContainer: import("styled-components").StyledComponent<"li", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledStepsContainer: import("styled-components").StyledComponent<"ol", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledStep: import("styled-components").StyledComponent<"li", import("styled-components").DefaultTheme, {
+}>> & string & Omit<import("@pega/cosmos-react-core").ForwardRefForwardPropsComponent<import("@pega/cosmos-react-core").TextProps>, keyof import("react").Component<any, {}, any>>;
+export declare const StyledStageContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, {
+    readOnly?: boolean;
+}>> & string;
+export declare const StyledStepsContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>, never>> & string;
+export declare const StyledStep: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, {
     completed: boolean;
-}, never>;
-export declare const StyledDateTimeDisplay: import("styled-components").StyledComponent<import("@pega/cosmos-react-core").ForwardRefForwardPropsComponent<import("@pega/cosmos-react-core").DateTimeDisplayProps>, import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledStageGlimpse: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledStagesDescription: import("styled-components").StyledComponent<"p", import("styled-components").DefaultTheme, {}, never>;
+}>> & string;
+export declare const StyledDateTimeDisplay: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<import("@pega/cosmos-react-core").DateTimeDisplayProps, "ref"> & import("react").RefAttributes<HTMLSpanElement> & import("@pega/cosmos-react-core").ForwardProps, "ref"> & {
+    ref?: ((instance: HTMLSpanElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLSpanElement> | null | undefined;
+}, never>> & string & Omit<import("@pega/cosmos-react-core").ForwardRefForwardPropsComponent<import("@pega/cosmos-react-core").DateTimeDisplayProps>, keyof import("react").Component<any, {}, any>>;
+export declare const StyledStageGlimpse: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledStagesDescription: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never>> & string;
 //# sourceMappingURL=Stages.styles.d.ts.map

package/lib/components/Stages/Stages.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Stages.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Stages/Stages.styles.ts"],"names":[],"mappings":"AAaA,eAAO,MAAM,YAAY,wGAYvB,CAAC;AAIH,eAAO,MAAM,gBAAgB;eAA4B,OAAO;SAW9D,CAAC;AAEH,eAAO,MAAM,WAAW;YAA2B,WAAW,GAAG,SAAS,GAAG,SAAS;SAoJrF,CAAC;AAIF,eAAO,MAAM,uBAAuB,0LAQlC,CAAC;AAEH,eAAO,MAAM,eAAe;gBAA8B,OAAO;SAIhE,CAAC;AAMF,eAAO,MAAM,oBAAoB,wGAuDhC,CAAC;AAIF,eAAO,MAAM,oBAAoB,wGAS/B,CAAC;AAIH,eAAO,MAAM,UAAU;eAA0B,OAAO;SAyBtD,CAAC;AAIH,eAAO,MAAM,qBAAqB,6NAMhC,CAAC;AAIH,eAAO,MAAM,kBAAkB,yGAI7B,CAAC;AAIH,eAAO,MAAM,uBAAuB,uGAEnC,CAAC"}
+{"version":3,"file":"Stages.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Stages/Stages.styles.ts"],"names":[],"mappings":"AAqHA,eAAO,MAAM,YAAY,mOAgBvB,CAAC;AAIH,eAAO,MAAM,gBAAgB;eAA4B,OAAO;YAW9D,CAAC;AAIH,eAAO,MAAM,WAAW;YACd,WAAW,GAAG,SAAS,GAAG,SAAS;eAChC,OAAO;YAwGnB,CAAC;AAIF,eAAO,MAAM,uBAAuB,kaAiBlC,CAAC;AAGH,eAAO,MAAM,eAAe;;;gBAA8B,OAAO;kLAIhE,CAAC;AAIF,eAAO,MAAM,oBAAoB;eACpB,OAAO;YAqLnB,CAAC;AAIF,eAAO,MAAM,oBAAoB,mOAS/B,CAAC;AAIH,eAAO,MAAM,UAAU;eAA0B,OAAO;YAoBtD,CAAC;AAIH,eAAO,MAAM,qBAAqB;;oMAMhC,CAAC;AAIH,eAAO,MAAM,kBAAkB,6NAI7B,CAAC;AAIH,eAAO,MAAM,uBAAuB,yOAEnC,CAAC"}