@pega/cosmos-react-work 2.0.0-dev.9.2 → 2.0.0-rc.2

package/lib/components/CaseSummaryFields/CaseSummaryFields.js

@@ -1,23 +1,25 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
-import { Grid, FieldValueList, StyledFieldValueList, Text, defaultThemeProp } from '@pega/cosmos-react-core';
-export const StyledCaseSummaryFields = styled.div(({ theme }) => css `
+import { Grid, FieldValueList, StyledFieldValueList, StyledFieldValue, calculateFontSize, defaultThemeProp } from '@pega/cosmos-react-core';
+export const StyledCaseSummaryFields = styled.div(({ theme }) => {
+    const fontSizes = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
+    return css `
     padding: calc(2 * ${theme.base.spacing});
 
     > ${StyledFieldValueList}:first-child {
       grid-template-columns: 16ch auto;
+
+      ${StyledFieldValue} {
+        font-size: ${fontSizes[theme.components.text.h1['font-size']]};
+        font-weight: ${theme.components.text.h1['font-weight']};
+      }
     }
-  `);
+  `;
+});
 StyledCaseSummaryFields.defaultProps = defaultThemeProp;
 const CaseSummaryFields = forwardRef(({ primaryFields, secondaryFields, ...restProps }, ref) => {
-    return (_jsxs(Grid, Object.assign({}, restProps, { as: StyledCaseSummaryFields, ref: ref, container: { rowGap: 2 } }, { children: [_jsx(FieldValueList, { variant: 'stacked', fields: primaryFields.map(field => typeof field.value === 'string'
-                    ? {
-                        ...field,
-                        value: (_jsx(Text, Object.assign({ variant: 'h1', as: 'span' }, { children: field.value }), void 0))
-                    }
-                    : field) }, void 0),
-            _jsx(FieldValueList, { variant: 'inline', fields: secondaryFields }, void 0)] }), void 0));
+    return (_jsxs(Grid, { ...restProps, as: StyledCaseSummaryFields, ref: ref, container: { rowGap: 2 }, children: [_jsx(FieldValueList, { variant: 'stacked', fields: primaryFields }, void 0), _jsx(FieldValueList, { variant: 'inline', fields: secondaryFields }, void 0)] }, void 0));
 });
 export default CaseSummaryFields;
 //# sourceMappingURL=CaseSummaryFields.js.map

package/lib/components/CaseSummaryFields/CaseSummaryFields.js.map

@@ -1 +1 @@
-{"version":3,"file":"CaseSummaryFields.js","sourceRoot":"","sources":["../../../src/components/CaseSummaryFields/CaseSummaryFields.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAa,UAAU,EAA2C,MAAM,OAAO,CAAC;AACvF,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,IAAI,EACJ,cAAc,EACd,oBAAoB,EACpB,IAAI,EACJ,gBAAgB,EAEjB,MAAM,yBAAyB,CAAC;AAEjC,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,GAAG,CAC/C,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;wBACI,KAAK,CAAC,IAAI,CAAC,OAAO;;QAElC,oBAAoB;;;GAGzB,CACF,CAAC;AAEF,uBAAuB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAmBxD,MAAM,iBAAiB,GAA6D,UAAU,CAC5F,CACE,EAAE,aAAa,EAAE,eAAe,EAAE,GAAG,SAAS,EAA2C,EACzF,GAAkC,EAClC,EAAE;IACF,OAAO,CACL,MAAC,IAAI,oBAAK,SAAS,IAAE,EAAE,EAAE,uBAAuB,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,iBAClF,KAAC,cAAc,IACb,OAAO,EAAC,SAAS,EACjB,MAAM,EAAE,aAAa,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAChC,OAAO,KAAK,CAAC,KAAK,KAAK,QAAQ;oBAC7B,CAAC,CAAC;wBACE,GAAG,KAAK;wBACR,KAAK,EAAE,CACL,KAAC,IAAI,kBAAC,OAAO,EAAC,IAAI,EAAC,EAAE,EAAC,MAAM,gBACzB,KAAK,CAAC,KAAK,YACP,CACR;qBACF;oBACH,CAAC,CAAC,KAAK,CACV,WACD;YACF,KAAC,cAAc,IAAC,OAAO,EAAC,QAAQ,EAAC,MAAM,EAAE,eAAe,WAAI,aACvD,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,iBAAiB,CAAC","sourcesContent":["import { ReactNode, forwardRef, FunctionComponent, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Grid,\n  FieldValueList,\n  StyledFieldValueList,\n  Text,\n  defaultThemeProp,\n  ForwardProps\n} from '@pega/cosmos-react-core';\n\nexport const StyledCaseSummaryFields = styled.div(\n  ({ theme }) => css`\n    padding: calc(2 * ${theme.base.spacing});\n\n    > ${StyledFieldValueList}:first-child {\n      grid-template-columns: 16ch auto;\n    }\n  `\n);\n\nStyledCaseSummaryFields.defaultProps = defaultThemeProp;\n\nexport interface CaseSummaryFieldsProps {\n  /** The primary summary fields to display above secondary fields. */\n  primaryFields: {\n    id?: string;\n    name: string;\n    value: ReactNode;\n  }[];\n  /** The secondary summary fields to display below primary fields. */\n  secondaryFields: {\n    id?: string;\n    name: string;\n    value: ReactNode;\n  }[];\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst CaseSummaryFields: FunctionComponent<CaseSummaryFieldsProps & ForwardProps> = forwardRef(\n  (\n    { primaryFields, secondaryFields, ...restProps }: PropsWithoutRef<CaseSummaryFieldsProps>,\n    ref: CaseSummaryFieldsProps['ref']\n  ) => {\n    return (\n      <Grid {...restProps} as={StyledCaseSummaryFields} ref={ref} container={{ rowGap: 2 }}>\n        <FieldValueList\n          variant='stacked'\n          fields={primaryFields.map(field =>\n            typeof field.value === 'string'\n              ? {\n                  ...field,\n                  value: (\n                    <Text variant='h1' as='span'>\n                      {field.value}\n                    </Text>\n                  )\n                }\n              : field\n          )}\n        />\n        <FieldValueList variant='inline' fields={secondaryFields} />\n      </Grid>\n    );\n  }\n);\n\nexport default CaseSummaryFields;\n"]}
+{"version":3,"file":"CaseSummaryFields.js","sourceRoot":"","sources":["../../../src/components/CaseSummaryFields/CaseSummaryFields.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAa,UAAU,EAA2C,MAAM,OAAO,CAAC;AACvF,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,IAAI,EACJ,cAAc,EACd,oBAAoB,EACpB,gBAAgB,EAChB,iBAAiB,EACjB,gBAAgB,EAGjB,MAAM,yBAAyB,CAAC;AAEjC,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC9D,MAAM,SAAS,GAAG,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;IAEvF,OAAO,GAAG,CAAA;wBACY,KAAK,CAAC,IAAI,CAAC,OAAO;;QAElC,oBAAoB;;;QAGpB,gBAAgB;qBACH,SAAS,CAAC,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC,WAAW,CAAa,CAAC;uBAC1D,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC;;;GAG3D,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,uBAAuB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAmBxD,MAAM,iBAAiB,GAA6D,UAAU,CAC5F,CACE,EAAE,aAAa,EAAE,eAAe,EAAE,GAAG,SAAS,EAA2C,EACzF,GAAkC,EAClC,EAAE;IACF,OAAO,CACL,MAAC,IAAI,OAAK,SAAS,EAAE,EAAE,EAAE,uBAAuB,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,aAClF,KAAC,cAAc,IAAC,OAAO,EAAC,SAAS,EAAC,MAAM,EAAE,aAAa,WAAI,EAC3D,KAAC,cAAc,IAAC,OAAO,EAAC,QAAQ,EAAC,MAAM,EAAE,eAAe,WAAI,YACvD,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,iBAAiB,CAAC","sourcesContent":["import { ReactNode, forwardRef, FunctionComponent, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Grid,\n  FieldValueList,\n  StyledFieldValueList,\n  StyledFieldValue,\n  calculateFontSize,\n  defaultThemeProp,\n  ForwardProps,\n  FontSize\n} from '@pega/cosmos-react-core';\n\nexport const StyledCaseSummaryFields = styled.div(({ theme }) => {\n  const fontSizes = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n  return css`\n    padding: calc(2 * ${theme.base.spacing});\n\n    > ${StyledFieldValueList}:first-child {\n      grid-template-columns: 16ch auto;\n\n      ${StyledFieldValue} {\n        font-size: ${fontSizes[theme.components.text.h1['font-size'] as FontSize]};\n        font-weight: ${theme.components.text.h1['font-weight']};\n      }\n    }\n  `;\n});\n\nStyledCaseSummaryFields.defaultProps = defaultThemeProp;\n\nexport interface CaseSummaryFieldsProps {\n  /** The primary summary fields to display above secondary fields. */\n  primaryFields: {\n    id?: string;\n    name: string;\n    value: ReactNode;\n  }[];\n  /** The secondary summary fields to display below primary fields. */\n  secondaryFields: {\n    id?: string;\n    name: string;\n    value: ReactNode;\n  }[];\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst CaseSummaryFields: FunctionComponent<CaseSummaryFieldsProps & ForwardProps> = forwardRef(\n  (\n    { primaryFields, secondaryFields, ...restProps }: PropsWithoutRef<CaseSummaryFieldsProps>,\n    ref: CaseSummaryFieldsProps['ref']\n  ) => {\n    return (\n      <Grid {...restProps} as={StyledCaseSummaryFields} ref={ref} container={{ rowGap: 2 }}>\n        <FieldValueList variant='stacked' fields={primaryFields} />\n        <FieldValueList variant='inline' fields={secondaryFields} />\n      </Grid>\n    );\n  }\n);\n\nexport default CaseSummaryFields;\n"]}

package/lib/components/CaseView/CaseView.d.ts

@@ -11,6 +11,8 @@ export interface CaseViewProps extends CaseSummaryProps {
     utilities?: ReactNode;
     /** The utilities summary array will be used to render the minimized the utilities card. */
     utilitiesSummaryItems?: UtilitiesSummaryProps['items'];
+    /** Collapses the utilities by default on load */
+    defaultCollapsedUtilities?: boolean;
     /** A region above the center column to display banners. */
     banners?: ReactNode;
     /** A region to the right reserved for persistent utilities. */
@@ -19,30 +21,11 @@ export interface CaseViewProps extends CaseSummaryProps {
         title: string;
     };
     /** A region within the center column that is controlled by tabs in CaseSummary. */
-    tabContent?: ReactNode;
+    tabContent?: {
+        content: ReactNode;
+        id: string;
+    }[];
 }
-export declare const StyledCaseViewContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
-    forceMobile?: boolean | undefined;
-    isMediumOrAbove?: boolean | undefined;
-}, never>;
-export declare const StyledMobileTabs: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledCaseViewUtilities: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
-    utilitiesShown: boolean;
-}, never>;
-export declare const StyledCaseView: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
-    forceMobile?: boolean | undefined;
-    isMediumOrAbove?: boolean | undefined;
-}, never>;
-export declare const StyledSummaryRegion: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
-    forceMobile?: boolean | undefined;
-    isMediumOrAbove?: boolean | undefined;
-}, never>;
-export declare const StyledCaseDrawer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
-    hasPersistentUtility?: boolean | undefined;
-}, never>;
-export declare const StyledCaseDrawerContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledPersistentUtility: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const ScrollStick: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 declare const CaseView: FC<CaseViewProps & ForwardProps>;
 export default CaseView;
 //# sourceMappingURL=CaseView.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"CaseView.d.ts","sourceRoot":"","sources":["../../../src/components/CaseView/CaseView.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,EAAE,EASH,MAAM,OAAO,CAAC;AAGf,OAAO,EASL,YAAY,EAMb,MAAM,yBAAyB,CAAC;AAGjC,OAAoB,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAE/D,OAAyB,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAE7E,MAAM,WAAW,aAAc,SAAQ,gBAAgB;IACrD,2CAA2C;IAC3C,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,0CAA0C;IAC1C,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,gFAAgF;IAChF,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,2FAA2F;IAC3F,qBAAqB,CAAC,EAAE,qBAAqB,CAAC,OAAO,CAAC,CAAC;IACvD,2DAA2D;IAC3D,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,+DAA+D;IAC/D,iBAAiB,CAAC,EAAE;QAAE,OAAO,EAAE,SAAS,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;IAC1D,mFAAmF;IACnF,UAAU,CAAC,EAAE,SAAS,CAAC;CAMxB;AAID,eAAO,MAAM,qBAAqB;;;SAahC,CAAC;AAEH,eAAO,MAAM,gBAAgB,yGAK3B,CAAC;AAcH,eAAO,MAAM,uBAAuB;oBAAgC,OAAO;SAQ1E,CAAC;AAIF,eAAO,MAAM,cAAc;;;SAgB1B,CAAC;AAIF,eAAO,MAAM,mBAAmB;;;SAqB/B,CAAC;AAIF,eAAO,MAAM,gBAAgB;;SAiB5B,CAAC;AAIF,eAAO,MAAM,uBAAuB,yGAOlC,CAAC;AAIH,eAAO,MAAM,uBAAuB,yGAIlC,CAAC;AAIH,eAAO,MAAM,WAAW,yGAGvB,CAAC;AAEF,QAAA,MAAM,QAAQ,EAAE,EAAE,CAAC,aAAa,GAAG,YAAY,CAiS9C,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"CaseView.d.ts","sourceRoot":"","sources":["../../../src/components/CaseView/CaseView.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,EAAE,EAWH,MAAM,OAAO,CAAC;AAEf,OAAO,EAUL,YAAY,EAOb,MAAM,yBAAyB,CAAC;AAMjC,OAAoB,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAE/D,OAAyB,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAe7E,MAAM,WAAW,aAAc,SAAQ,gBAAgB;IACrD,2CAA2C;IAC3C,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,0CAA0C;IAC1C,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,gFAAgF;IAChF,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,2FAA2F;IAC3F,qBAAqB,CAAC,EAAE,qBAAqB,CAAC,OAAO,CAAC,CAAC;IACvD,iDAAiD;IACjD,yBAAyB,CAAC,EAAE,OAAO,CAAC;IACpC,2DAA2D;IAC3D,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,+DAA+D;IAC/D,iBAAiB,CAAC,EAAE;QAAE,OAAO,EAAE,SAAS,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;IAC1D,mFAAmF;IACnF,UAAU,CAAC,EAAE;QAAE,OAAO,EAAE,SAAS,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;CAMnD;AAED,QAAA,MAAM,QAAQ,EAAE,EAAE,CAAC,aAAa,GAAG,YAAY,CAoc9C,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/lib/components/CaseView/CaseView.js

@@ -1,138 +1,54 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState, useCallback, useMemo, useRef } from 'react';
-import styled, { css } from 'styled-components';
-import { Button, Flex, Grid, Icon, TabPanel, useBreakpoint, useScrollStick, defaultThemeProp, Card, Drawer, useI18n, useDirection, Tabs } from '@pega/cosmos-react-core';
+import { useContext, useEffect, useState, useCallback, useMemo, useRef, useLayoutEffect } from 'react';
+import { Button, Flex, Grid, Icon, registerIcon, TabPanel, useBreakpoint, useScrollStick, useElement, Card, Drawer, useI18n, useDirection, useConsolidatedRef } from '@pega/cosmos-react-core';
+import AppShellContext from '@pega/cosmos-react-core/lib/components/AppShell/AppShellContext';
+import * as moveRightSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/move-right-solid.icon';
+import * as moveLeftSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/move-left-solid.icon';
 import CaseSummary from '../CaseSummary';
 import UtilitiesSummary from './UtilitiesSummary';
-const persistentUtilityWidth = '60ch';
-export const StyledCaseViewContent = styled.div(({ theme, forceMobile, isMediumOrAbove }) => {
-    return css `
-    padding: calc(2 * ${theme.base.spacing});
-
-    ${!forceMobile &&
-        isMediumOrAbove &&
-        css `
-      padding: calc(2 * ${theme.base.spacing}) 0;
-    `}
-  `;
-});
-export const StyledMobileTabs = styled.div(({ theme }) => {
-    return css `
-    border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};
-    margin: 0 calc(-2 * ${theme.base.spacing});
-  `;
-});
-StyledCaseViewContent.defaultProps = defaultThemeProp;
-const StyledUtilToggle = styled.button(({ theme }) => {
-    return css `
-    align-self: flex-end;
-    color: ${theme.base.palette['foreground-color']};
-    margin-inline-end: 0.375rem;
-  `;
-});
-StyledUtilToggle.defaultProps = defaultThemeProp;
-export const StyledCaseViewUtilities = styled.div(({ utilitiesShown, theme }) => {
-    return css `
-      width: ${utilitiesShown ? '25rem' : 'auto'};
-      height: max-content;
-      padding: calc(2 * ${theme.base.spacing}) 0 calc(2 * ${theme.base.spacing});
-    `;
-});
-StyledCaseViewUtilities.defaultProps = defaultThemeProp;
-export const StyledCaseView = styled.div(({ theme, forceMobile, isMediumOrAbove }) => {
-    return css `
-      min-height: 100vh;
-      position: relative;
-      background-color: ${theme.base.palette['app-background']};
-
-      > :last-child {
-        ${!forceMobile &&
-        isMediumOrAbove &&
-        css `
-          margin-inline-end: calc(2 * ${theme.base.spacing});
-        `}
-      }
-    `;
-});
-StyledCaseView.defaultProps = defaultThemeProp;
-export const StyledSummaryRegion = styled.div(({ theme, forceMobile, isMediumOrAbove }) => {
-    return css `
-      position: sticky;
-      top: 0;
-      width: 100%;
-      background-color: ${theme.base.palette['primary-background']};
-      overflow: auto;
-
-      ${(forceMobile || !isMediumOrAbove) &&
-        css `
-        z-index: ${theme.base['z-index'].popover + 1};
-      `}
-
-      ${!forceMobile &&
-        isMediumOrAbove &&
-        css `
-        height: 100vh;
-      `}
-    `;
-});
-StyledSummaryRegion.defaultProps = defaultThemeProp;
-export const StyledCaseDrawer = styled.div(({ hasPersistentUtility, theme }) => {
-    return css `
-      min-width: 21.875rem;
-      max-width: 31.25rem;
-      width: calc((100vw - 31.25rem) / 10 + 21.875rem);
-      background-color: ${theme.base.palette['primary-background']};
-      height: 100vh;
-
-      ${hasPersistentUtility &&
-        css `
-        @media (min-width: ${theme.base.breakpoints.md}) {
-          inset-inline-end: ${persistentUtilityWidth};
-        }
-      `}
-    `;
-});
-StyledCaseDrawer.defaultProps = defaultThemeProp;
-export const StyledCaseDrawerContent = styled.div(({ theme }) => {
-    return css `
-    background-color: ${theme.base.palette['app-background']};
-    padding: calc(2 * ${theme.base.spacing});
-    height: 100%;
-    overflow: auto;
-  `;
-});
-StyledCaseDrawerContent.defaultProps = defaultThemeProp;
-export const StyledPersistentUtility = styled.div(({ theme }) => {
-    return css `
-    z-index: calc(${theme.base['z-index'].drawer} + 400);
-  `;
-});
-StyledPersistentUtility.defaultProps = defaultThemeProp;
-export const ScrollStick = styled.div `
-  position: sticky;
-  top: 0;
-`;
+import { StyledCaseDrawer, StyledCaseDrawerContent, StyledCaseView, StyledCaseViewContent, StyledPersistentUtility, StyledSummaryRegion, StyledCaseViewUtilities, StyledMobileTabs, StyledUtilToggle } from './CaseView.styles';
+registerIcon(moveRightSolidIcon, moveLeftSolidIcon);
 const CaseView = (props) => {
-    const { caseId, parentCases, heading, caseLink, icon, followed, onFollowedChange, summary, caseSummaryRef, tabs: { currentTabId, items: tabItemsProp, onClick: onTabClick }, stages, tasks, tabContent: tabContentProp, utilities, utilitiesSummaryItems, actions, onEdit, banners, persistentUtility, forceMobile, ...restProps } = props;
+    const { caseId, parentCases, heading, caseLink, icon, followed, onFollowedChange, summary, caseSummaryRef, tabs: { currentTabId, items: tabItemsProp, onClick: onTabClick }, stages, tasks, tabContent: tabContentProp = [], utilities, utilitiesSummaryItems, defaultCollapsedUtilities = false, actions, onEdit, banners, persistentUtility, forceMobile, ...restProps } = props;
     const t = useI18n();
     const caseViewRef = useRef(null);
+    const caseViewSummaryRef = useConsolidatedRef(caseSummaryRef);
+    const caseSummaryHeaderRef = useRef(null);
+    const caseViewSummaryContainerRef = useRef(null);
+    const [tabContentEl, setTabContentEl] = useElement(null);
+    let isExtraLargeOrAbove = useBreakpoint('xl', { breakpointRef: caseViewRef });
     let isLargeOrAbove = useBreakpoint('lg', { breakpointRef: caseViewRef });
     let isMediumOrAbove = useBreakpoint('md', { breakpointRef: caseViewRef });
-    const isViewPortMediumOrAbove = useBreakpoint('md');
     if (forceMobile) {
+        isExtraLargeOrAbove = false;
         isLargeOrAbove = false;
         isMediumOrAbove = false;
     }
+    const { headerEl } = useContext(AppShellContext);
+    const [summaryAnimationState, setSummaryAnimationState] = useState('expanded');
     const summaryTabId = `summary-${caseId}`;
     const utilitiesTabId = `utilities-${caseId}`;
     const persistentUtilityTabId = `persistent-utility-${caseId}`;
-    const [utilitiesShown, setUtilitiesShown] = useState(isLargeOrAbove);
-    const [userUtilState, setUserUtilState] = useState();
+    const [utilitiesShown, setUtilitiesShown] = useState(isLargeOrAbove && !defaultCollapsedUtilities);
+    const initialUserUtilState = defaultCollapsedUtilities ? 'hidden' : undefined;
+    const [userUtilState, setUserUtilState] = useState(initialUserUtilState);
+    const [summaryPanelCollapsed, setSummaryPanelCollapsed] = useState(false);
     const hasSideBySideColumns = isMediumOrAbove;
     const scrollStickOptions = useRef({
         elements: []
     });
-    useScrollStick(hasSideBySideColumns ? scrollStickOptions.current : undefined);
+    const getOffsets = () => {
+        const appshellHeaderHeight = headerEl?.offsetHeight || 0;
+        const summaryHeight = !isMediumOrAbove || (persistentUtility && !isExtraLargeOrAbove) || summaryPanelCollapsed
+            ? caseViewSummaryRef?.current?.offsetHeight || 0
+            : 0;
+        return {
+            sticky: appshellHeaderHeight + summaryHeight,
+            summary: summaryHeight
+        };
+    };
+    const [offsets, setOffsets] = useState(getOffsets);
+    useScrollStick(hasSideBySideColumns ? { ...scrollStickOptions.current, offset: offsets.sticky } : undefined);
     const toggleUtilities = useCallback((e) => {
         if (e.type === 'keydown' && e.key !== 'Enter') {
             return;
@@ -142,6 +58,9 @@ const CaseView = (props) => {
             return !shown;
         });
     }, []);
+    useLayoutEffect(() => {
+        setOffsets(getOffsets());
+    }, [isExtraLargeOrAbove, isLargeOrAbove, isMediumOrAbove, headerEl, summaryPanelCollapsed]);
     useEffect(() => {
         if (isLargeOrAbove) {
             setUtilitiesShown(userUtilState !== 'hidden');
@@ -151,51 +70,88 @@ const CaseView = (props) => {
         }
     }, [isLargeOrAbove]);
     useEffect(() => {
-        var _a;
-        if (isMediumOrAbove) {
-            if (currentTabId === summaryTabId || currentTabId === utilitiesTabId)
-                onTabClick((_a = tabItemsProp[0]) === null || _a === void 0 ? void 0 : _a.id);
+        if (isMediumOrAbove &&
+            !summaryPanelCollapsed &&
+            !persistentUtility &&
+            (currentTabId === summaryTabId || currentTabId === utilitiesTabId)) {
+            onTabClick(tabItemsProp[0]?.id);
         }
-    }, [isMediumOrAbove, onTabClick, currentTabId, summaryTabId, utilitiesTabId]);
+    }, [
+        isMediumOrAbove,
+        onTabClick,
+        currentTabId,
+        summaryTabId,
+        utilitiesTabId,
+        summaryPanelCollapsed
+    ]);
     useEffect(() => {
-        if (isMediumOrAbove && !isLargeOrAbove && utilities)
+        if ((isMediumOrAbove && !isLargeOrAbove && utilities) || persistentUtility)
             setUtilitiesShown(false);
     }, [isMediumOrAbove, utilities]);
     useEffect(() => {
-        if (isViewPortMediumOrAbove && persistentUtility) {
-            if (currentTabId === persistentUtilityTabId)
-                onTabClick(summaryTabId);
-        }
-    }, [isViewPortMediumOrAbove, persistentUtility]);
+        if (persistentUtility && currentTabId === persistentUtilityTabId)
+            onTabClick(summaryTabId);
+    }, [persistentUtility]);
     const tabItems = useMemo(() => {
+        const summaryTab = { id: summaryTabId, name: 'Summary' };
         if (isMediumOrAbove)
-            return tabItemsProp;
+            return summaryPanelCollapsed || (persistentUtility && !isExtraLargeOrAbove)
+                ? [summaryTab, ...tabItemsProp]
+                : tabItemsProp;
         const utilityTabs = [];
         if (utilities)
             utilityTabs.push({ id: utilitiesTabId, name: 'Utilities' });
-        if (persistentUtility && !isViewPortMediumOrAbove)
+        if (persistentUtility && !isMediumOrAbove)
             utilityTabs.push({ id: persistentUtilityTabId, name: persistentUtility.title });
-        return [{ id: summaryTabId, name: 'Summary' }, ...tabItemsProp, ...utilityTabs];
+        return [summaryTab, ...tabItemsProp, ...utilityTabs];
     }, [
         isMediumOrAbove,
-        isViewPortMediumOrAbove,
+        isExtraLargeOrAbove,
         summaryTabId,
         utilitiesTabId,
         persistentUtilityTabId,
         utilities,
         persistentUtility,
-        tabItemsProp
+        tabItemsProp,
+        summaryPanelCollapsed
     ]);
-    const tabContent = useMemo(() => {
-        if (currentTabId === summaryTabId)
-            return _jsx(Card, { children: summary }, void 0);
-        if (currentTabId === utilitiesTabId) {
-            return _jsx(Flex, Object.assign({ container: { direction: 'column', gap: 2 } }, { children: utilities }), void 0);
+    useEffect(() => {
+        if (!tabContentEl)
+            return;
+        const scrollPos = window.scrollY;
+        const windowHeight = document.documentElement.clientHeight;
+        const bottomPos = scrollPos + windowHeight * 0.8;
+        const tabContentPos = tabContentEl.offsetTop;
+        if (tabContentPos > bottomPos) {
+            const top = tabContentPos - windowHeight * 0.2;
+            window.scrollTo({ top, behavior: 'smooth' });
         }
-        if (currentTabId === persistentUtilityTabId)
-            return persistentUtility === null || persistentUtility === void 0 ? void 0 : persistentUtility.content;
-        return tabContentProp;
-    }, [currentTabId, tabContentProp, summary, summaryTabId, utilities, utilitiesTabId]);
+    }, [currentTabId]);
+    const tabContent = useMemo(() => {
+        const summaryTabContent = { id: summaryTabId, content: _jsx(Card, { children: summary }, void 0) };
+        if (isMediumOrAbove)
+            return summaryPanelCollapsed || (persistentUtility && !isExtraLargeOrAbove)
+                ? [summaryTabContent, ...tabContentProp]
+                : tabContentProp;
+        const utilityTabs = [];
+        if (utilities)
+            utilityTabs.push({
+                id: utilitiesTabId,
+                content: _jsx(Flex, { container: { direction: 'column', gap: 2 }, children: utilities }, void 0)
+            });
+        if (persistentUtility)
+            utilityTabs.push({ id: persistentUtilityTabId, content: persistentUtility?.content });
+        return [summaryTabContent, ...tabContentProp, ...utilityTabs];
+    }, [
+        currentTabId,
+        tabContentProp,
+        summary,
+        summaryTabId,
+        utilities,
+        utilitiesTabId,
+        isMediumOrAbove,
+        isExtraLargeOrAbove
+    ]);
     const direction = useDirection();
     const utilitiesIcon = utilitiesShown
         ? `move-${direction.end}-solid`
@@ -206,57 +162,98 @@ const CaseView = (props) => {
         rows: 'minmax(0, max-content) auto',
         areas: '"case-nav" "content"'
     };
-    if (!forceMobile) {
-        if (isLargeOrAbove) {
+    let fixedSummaryWidth = '100%';
+    if (!forceMobile && !persistentUtility && !summaryPanelCollapsed) {
+        fixedSummaryWidth = isLargeOrAbove ? '25rem' : '22rem';
+        if (isLargeOrAbove || isMediumOrAbove) {
             caseViewGridContainer = {
-                cols: '25rem minmax(0, 1fr) minmax(0, max-content)',
+                cols: 'minmax(0, max-content) minmax(0, 1fr) minmax(0, max-content)',
                 colGap: 2,
-                rows: 'minmax(0, max-content) auto',
+                rows: caseViewGridContainer.rows,
                 areas: '"case-nav content utilities"'
             };
         }
-        else if (isMediumOrAbove) {
+    }
+    else if (summaryPanelCollapsed) {
+        if (isLargeOrAbove || isMediumOrAbove) {
             caseViewGridContainer = {
-                cols: '22rem minmax(0, 1fr) minmax(0, max-content)',
+                cols: 'minmax(0, 1fr) minmax(0, max-content)',
                 colGap: 2,
-                rows: 'minmax(0, max-content) auto',
-                areas: '"case-nav content utilities"'
+                rows: caseViewGridContainer.rows,
+                areas: '"case-nav case-nav" "content utilities"'
+            };
+        }
+    }
+    else if (persistentUtility) {
+        if (isExtraLargeOrAbove) {
+            fixedSummaryWidth = '25rem';
+            caseViewGridContainer = {
+                cols: 'minmax(0, max-content) minmax(0, 1fr) repeat(2, minmax(0, max-content))',
+                colGap: 2,
+                rows: caseViewGridContainer.rows,
+                areas: '"case-nav content persistentUtility utilities"'
+            };
+        }
+        else if (isLargeOrAbove || isMediumOrAbove) {
+            caseViewGridContainer = {
+                cols: 'minmax(0, 1fr) repeat(2, minmax(0, max-content))',
+                colGap: 2,
+                rows: caseViewGridContainer.rows,
+                areas: '"case-nav case-nav case-nav" "content persistentUtility utilities"'
             };
         }
     }
-    return (_jsxs(Grid, Object.assign({ as: StyledCaseView, ref: caseViewRef, container: caseViewGridContainer, item: { area: 'caseView' }, forceMobile: forceMobile, isMediumOrAbove: isMediumOrAbove }, restProps, { children: [_jsx(Grid, Object.assign({ as: StyledSummaryRegion, item: { area: 'case-nav' }, col: true, forceMobile: forceMobile, isMediumOrAbove: isMediumOrAbove }, { children: _jsx(CaseSummary, { ref: caseSummaryRef, caseId: caseId, heading: heading, caseLink: caseLink, icon: icon, followed: followed, onFollowedChange: onFollowedChange, parentCases: parentCases, summary: summary, actions: actions, onEdit: onEdit, tabs: {
+    const animateSummaryPanel = (type) => {
+        if (type === 'close') {
+            const animation = [{ width: fixedSummaryWidth }, { width: 0 }];
+            caseViewSummaryContainerRef.current?.animate(animation, 250);
+        }
+        else {
+            const animation = [{ width: 0 }, { width: isLargeOrAbove ? '25rem' : '22rem' }];
+            caseViewSummaryContainerRef.current?.animate(animation, 250);
+        }
+    };
+    return (_jsxs(Grid, { as: StyledCaseView, stickyOffset: offsets.sticky, ref: caseViewRef, container: caseViewGridContainer, item: { area: 'caseView' }, forceMobile: forceMobile, isMediumOrAbove: isMediumOrAbove, ...restProps, children: [_jsx(Grid, { as: StyledSummaryRegion, item: { area: 'case-nav' }, forceMobile: forceMobile, desktop: isMediumOrAbove && (!persistentUtility || isExtraLargeOrAbove) && !summaryPanelCollapsed, isLargeOrAbove: isLargeOrAbove, ref: caseViewSummaryContainerRef, style: ['collapsing', 'expanding'].includes(summaryAnimationState)
+                    ? {
+                        overflow: 'hidden'
+                    }
+                    : undefined, children: _jsx(CaseSummary, { ref: caseViewSummaryRef, headerRef: caseSummaryHeaderRef, caseId: caseId, heading: heading, caseLink: caseLink, icon: icon, followed: followed, onFollowedChange: onFollowedChange, parentCases: parentCases, summary: summary, actions: actions, onEdit: onEdit, tabs: {
                         items: tabItems,
                         onClick: onTabClick,
                         currentTabId
-                    }, forceMobile: forceMobile, isMediumOrAbove: isMediumOrAbove }, void 0) }), void 0),
-            _jsxs(Grid, Object.assign({ container: {
+                    }, forceMobile: forceMobile, desktop: ((isMediumOrAbove && !persistentUtility) || isExtraLargeOrAbove) &&
+                        !summaryPanelCollapsed, fixedWidth: isMediumOrAbove ? fixedSummaryWidth : undefined, collapsible: isMediumOrAbove && !persistentUtility, collapsed: summaryPanelCollapsed, onBeforeCollapse: () => {
+                        animateSummaryPanel('close');
+                    }, onAfterCollapse: () => setSummaryPanelCollapsed(true), onBeforeExpand: () => {
+                        animateSummaryPanel('open');
+                        setSummaryPanelCollapsed(false);
+                    }, onAnimationStateChange: setSummaryAnimationState }, void 0) }, void 0), _jsxs(Grid, { container: {
                     cols: 'minmax(0, 1fr)',
                     alignContent: 'start',
                     rowGap: 2
-                }, item: { area: 'content' }, as: StyledCaseViewContent, forceMobile: forceMobile, isMediumOrAbove: isMediumOrAbove }, { children: [banners && _jsx("div", { children: banners }, void 0),
-                    stages && _jsx("div", { children: stages }, void 0),
-                    tasks && _jsx("div", { children: tasks }, void 0),
-                    !isMediumOrAbove && (_jsx(Tabs, { forwardedAs: StyledMobileTabs, type: 'horizontal', tabs: tabItems, onTabClick: onTabClick, currentTabId: currentTabId }, void 0)),
-                    currentTabId ? _jsx(TabPanel, Object.assign({ tabId: currentTabId }, { children: tabContent }), void 0) : tabContent] }), void 0),
-            persistentUtility && isViewPortMediumOrAbove && (_jsx(Grid, Object.assign({ as: StyledPersistentUtility, item: { area: 'persistentUtility' } }, { children: _jsx(ScrollStick, { children: persistentUtility.content }, void 0) }), void 0)),
-            !isLargeOrAbove && (_jsx(Drawer, Object.assign({ as: StyledCaseDrawer, open: utilitiesShown && isMediumOrAbove, position: 'fixed', placement: direction.end, shadow: true, nullWhenClosed: true, hasPersistentUtility: !!persistentUtility }, { children: _jsxs(Flex, Object.assign({ as: StyledCaseDrawerContent, container: { direction: 'column', gap: 2 } }, { children: [_jsx(Flex, Object.assign({ container: { justify: 'end' } }, { children: _jsx(Button, Object.assign({ variant: 'simple', icon: true, onClick: toggleUtilities, as: StyledUtilToggle, "aria-label": t('collapse_noun', t('utilities_panel')) }, { children: _jsx(Icon, { name: `move-${direction.end}-solid` }, void 0) }), void 0) }), void 0),
-                        utilities] }), void 0) }), void 0)),
-            utilities && isMediumOrAbove && (_jsxs(Grid, Object.assign({ ref: (el) => {
-                    var _a;
+                }, item: { area: 'content' }, as: StyledCaseViewContent, forceMobile: forceMobile, isMediumOrAbove: isMediumOrAbove, persistentUtility: Boolean(persistentUtility), style: {
+                    transform: ['collapsing', 'expanding'].includes(summaryAnimationState)
+                        ? `translate(0, ${caseSummaryHeaderRef.current?.offsetHeight}px) `
+                        : undefined,
+                    marginInlineStart: (summaryPanelCollapsed && isMediumOrAbove) ||
+                        (persistentUtility && !isExtraLargeOrAbove)
+                        ? '1rem'
+                        : 0
+                }, children: [banners && _jsx("div", { children: banners }, void 0), stages && _jsx("div", { children: stages }, void 0), tasks && _jsx("div", { children: tasks }, void 0), (!isMediumOrAbove ||
+                        (persistentUtility && !isExtraLargeOrAbove) ||
+                        summaryPanelCollapsed) && (_jsx(StyledMobileTabs, { type: 'horizontal', tabs: tabItems, onTabClick: onTabClick, currentTabId: currentTabId }, void 0)), _jsx("div", { ref: setTabContentEl, children: tabContent?.map(({ id, content }) => (_jsx(TabPanel, { currentTabId: currentTabId, tabId: id, children: content }, id))) }, void 0)] }, void 0), persistentUtility && isMediumOrAbove && (_jsx(Grid, { as: StyledPersistentUtility, item: { area: 'persistentUtility' }, children: persistentUtility.content }, void 0)), !isLargeOrAbove && (_jsx(Drawer, { as: StyledCaseDrawer, open: utilitiesShown && isMediumOrAbove, position: 'fixed', placement: direction.end, shadow: true, nullWhenClosed: true, hasPersistentUtility: !!persistentUtility, children: _jsxs(Flex, { as: StyledCaseDrawerContent, container: { direction: 'column', gap: 2 }, children: [_jsx(Flex, { container: { justify: 'end' }, children: _jsx(Button, { variant: 'simple', icon: true, onClick: toggleUtilities, as: StyledUtilToggle, label: t('collapse_utilities_panel'), children: _jsx(Icon, { name: `move-${direction.end}-solid` }, void 0) }, void 0) }, void 0), utilities] }, void 0) }, void 0)), utilities && isMediumOrAbove && (_jsxs(Grid, { ref: (el) => {
                     if (el)
-                        ((_a = scrollStickOptions.current) === null || _a === void 0 ? void 0 : _a.elements).push(el);
+                        (scrollStickOptions.current?.elements).push(el);
                 }, as: StyledCaseViewUtilities, container: {
                     cols: 'minmax(0, 1fr)',
                     rowGap: 2
                 }, item: {
                     area: 'utilities'
-                }, utilitiesShown: utilitiesShown && isLargeOrAbove }, { children: [_jsx(Flex, Object.assign({ container: { justify: utilitiesShown ? 'end' : 'center' } }, { children: _jsx(Button, Object.assign({ variant: 'simple', icon: true, onClick: toggleUtilities, as: StyledUtilToggle, label: t(utilitiesShown ? 'collapse_noun' : 'expand_noun', t('utilities_panel')) }, { children: _jsx(Icon, { name: utilitiesIcon }, void 0) }), void 0) }), void 0),
-                    _jsx(Flex, Object.assign({ ref: (el) => {
-                            var _a;
-                            if (el)
-                                ((_a = scrollStickOptions.current) === null || _a === void 0 ? void 0 : _a.elements).push(el);
-                        }, container: utilitiesShown && isLargeOrAbove ? { direction: 'column', gap: 2 } : false, hidden: !utilitiesShown || !isLargeOrAbove }, { children: utilities }), void 0),
-                    (!utilitiesShown || (isMediumOrAbove && !isLargeOrAbove)) && (_jsx(UtilitiesSummary, { items: utilitiesSummaryItems || [], onClick: toggleUtilities, onKeyDown: toggleUtilities }, void 0))] }), void 0))] }), void 0));
+                }, utilitiesShown: utilitiesShown && isLargeOrAbove, style: ['collapsing', 'expanding'].includes(summaryAnimationState)
+                    ? {
+                        transform: `translate(0, ${caseSummaryHeaderRef.current?.offsetHeight}px) `
+                    }
+                    : undefined, children: [_jsx(Flex, { container: { justify: utilitiesShown ? 'end' : 'center' }, children: _jsx(Button, { variant: 'simple', icon: true, onClick: toggleUtilities, as: StyledUtilToggle, label: t(utilitiesShown ? 'collapse_utilities_panel' : 'expand_utilities_panel'), children: _jsx(Icon, { name: utilitiesIcon }, void 0) }, void 0) }, void 0), _jsx(Flex, { container: utilitiesShown && isLargeOrAbove ? { direction: 'column', gap: 2 } : undefined, hidden: !utilitiesShown || !isLargeOrAbove, children: utilities }, void 0), (!utilitiesShown || (isMediumOrAbove && !isLargeOrAbove)) && (_jsx(UtilitiesSummary, { items: utilitiesSummaryItems || [], onClick: toggleUtilities, onKeyDown: toggleUtilities }, void 0))] }, void 0))] }, void 0));
 };
 export default CaseView;
 //# sourceMappingURL=CaseView.js.map