@pega/cosmos-react-work 2.1.6 → 2.1.7

package/lib/components/CaseSummary/CaseSummary.js

@@ -0,0 +1,130 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useState, useEffect, useRef } from 'react';
+import styled, { css } from 'styled-components';
+import { Flex, Tabs, ExpandCollapse, defaultThemeProp, useConsolidatedRef, Icon, registerIcon, useI18n, useFocusWithin, Button, StyledIcon } from '@pega/cosmos-react-core';
+import * as arrowMicroLeftIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/arrow-micro-left.icon';
+import CaseHeader from '../CaseHeader';
+registerIcon(arrowMicroLeftIcon);
+export const StyledCaseSummary = styled.div(({ theme, expanded, fixedWidth }) => {
+    return css `
+      position: relative;
+      width: ${fixedWidth || 'auto'};
+      max-width: ${fixedWidth ? 'none' : '100%'};
+      height: 100%;
+
+      ${expanded &&
+        css `
+        @media (min-width: ${theme.base.breakpoints.md}) {
+          &:hover {
+            &::after {
+              content: '';
+              position: absolute;
+              top: 0;
+              bottom: 0;
+              inset-inline-start: 100%;
+              width: 0.75rem;
+            }
+          }
+        }
+      `}
+    `;
+});
+export const StyledCaseSummaryInfo = styled.div `
+  overflow: auto;
+  flex: 1;
+`;
+const StyledExpandCollapse = styled.div(({ animationState }) => {
+    const expandingOrCollapsing = ['expanding', 'collapsing'].includes(animationState);
+    return css `
+      position: ${expandingOrCollapsing ? 'fixed' : 'relative'};
+      top: ${expandingOrCollapsing ? 'var(--appshell-offset, 0)' : 0};
+    `;
+});
+const StyledExpandCollapseButton = styled(Button)(({ theme, expanded, headerHeight, animationState, visible }) => {
+    return css `
+    border-radius: ${expanded ? '1.5rem' : '0 1.5rem 1.5rem 0'};
+    box-shadow: ${theme.base.shadow.low};
+    border: none;
+    opacity: ${visible ? '1' : '0'};
+    position: ${animationState === 'collapsing' ? 'fixed' : 'absolute'};
+    inset-inline-start: ${expanded ? 'calc(100% - 0.75rem)' : 0};
+    top: calc(calc(${headerHeight}px / 2) - 0.75rem);
+    z-index: 1;
+
+    ${StyledIcon} {
+      width: 1.5rem;
+      height: 1.5rem;
+      transform: rotate(${expanded ? '0' : '180deg'});
+    }
+  `;
+});
+StyledExpandCollapseButton.defaultProps = defaultThemeProp;
+const CaseSummary = forwardRef((props, ref) => {
+    const { icon, heading, caseId, caseLink, parentCases, followed, onFollowedChange, actions, onEdit, summary, tabs, forceMobile, collapsible = false, desktop = true, fixedWidth, onBeforeCollapse, onAfterCollapse, onBeforeExpand, onAfterExpand, onAnimationStateChange, headerRef: caseSummaryHeaderRef, ...restProps } = props;
+    const [showExpandCollapse, setShowExpandCollapse] = useState(false);
+    const expandCollapseBtnRef = useRef(null);
+    const [expanded, setExpanded] = useState(true);
+    const isMediumOrAbove = !forceMobile && desktop;
+    const [animationState, setAnimationState] = useState('expanded');
+    const [collapsedHeight, setCollapsedHeight] = useState(0);
+    const caseSummaryRef = useConsolidatedRef(ref);
+    const focusWithin = useFocusWithin([caseSummaryRef.current]);
+    const t = useI18n();
+    const setAnimStateAndUpdateParent = (state) => {
+        setAnimationState(state);
+        onAnimationStateChange?.(state);
+    };
+    const headerRef = useConsolidatedRef(caseSummaryHeaderRef);
+    const showTabs = (isMediumOrAbove && tabs.items.length > 1) || !isMediumOrAbove;
+    const caseHeaderProps = {
+        actions,
+        onEdit,
+        isMediumOrAbove,
+        caseId,
+        parentCases,
+        heading,
+        caseLink,
+        icon,
+        followed,
+        onFollowedChange,
+        style: {
+            maxHeight: ['expanding', 'collapsed', 'collapsing'].includes(animationState)
+                ? `${collapsedHeight}px`
+                : 'auto'
+        }
+    };
+    useEffect(() => {
+        if (['expanded'].includes(animationState)) {
+            setCollapsedHeight(headerRef.current?.offsetHeight || 0);
+        }
+    }, [animationState, headerRef.current]);
+    const expandOrCollapseLabel = expanded ? t('collapse') : t('expand');
+    const expandOrCollapseA11y = expanded ? t('collapse_summary_panel') : t('expand_summary_panel');
+    return (_jsxs(Flex, { as: StyledCaseSummary, expanded: expanded, fixedWidth: fixedWidth, container: { direction: 'column' }, item: { shrink: 0 }, ref: caseSummaryRef, style: {
+            marginTop: ['collapsing', 'expanding'].includes(animationState)
+                ? `${collapsedHeight}px`
+                : 0
+        }, onMouseEnter: () => {
+            setShowExpandCollapse(true);
+        }, onMouseLeave: () => {
+            setShowExpandCollapse(false);
+        }, ...restProps, children: [collapsible ? (_jsxs(_Fragment, { children: [_jsx(StyledExpandCollapseButton, { onClick: () => setExpanded(!expanded), expanded: expanded, headerHeight: collapsedHeight, animationState: animationState, label: ['expanded', 'collapsed'].includes(animationState)
+                            ? expandOrCollapseLabel
+                            : undefined, "aria-label": ['expanding', 'collapsing'].includes(animationState)
+                            ? expandOrCollapseA11y
+                            : undefined, visible: showExpandCollapse || !expanded || focusWithin, tabIndex: 0, icon: true, compact: true, ref: expandCollapseBtnRef, children: _jsx(Icon, { name: 'arrow-micro-left' }, void 0) }, void 0), _jsx(ExpandCollapse, { dimension: 'width', min: isMediumOrAbove || !expanded ? fixedWidth : '100%', max: '100%', collapsed: expanded, onBeforeExpand: () => {
+                            setAnimStateAndUpdateParent('collapsing');
+                            onBeforeCollapse?.();
+                        }, onAfterExpand: () => {
+                            setAnimStateAndUpdateParent('collapsed');
+                            onAfterCollapse?.();
+                        }, onBeforeCollapse: () => {
+                            setAnimStateAndUpdateParent('expanding');
+                            onBeforeExpand?.();
+                        }, onAfterCollapse: () => {
+                            setAnimStateAndUpdateParent('expanded');
+                            onAfterExpand?.();
+                        }, as: StyledExpandCollapse, animationState: animationState, ref: headerRef, children: _jsx(CaseHeader, { ...caseHeaderProps }, void 0) }, void 0)] }, void 0)) : (_jsx(CaseHeader, { ...caseHeaderProps }, void 0)), _jsxs(StyledCaseSummaryInfo, { children: [isMediumOrAbove && summary, showTabs && isMediumOrAbove && (_jsx(Tabs, { type: 'vertical', tabs: tabs.items, onTabClick: tabs.onClick, currentTabId: tabs.currentTabId }, void 0))] }, void 0)] }, void 0));
+});
+export default CaseSummary;
+//# sourceMappingURL=CaseSummary.js.map

package/lib/components/CaseSummary/CaseSummary.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CaseSummary.js","sourceRoot":"","sources":["../../../src/components/CaseSummary/CaseSummary.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  FunctionComponent,\n  PropsWithoutRef,\n  ReactNode,\n  Ref,\n  MouseEvent,\n  useState,\n  useEffect,\n  useRef\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Flex,\n  Tabs,\n  Tab,\n  ForwardProps,\n  ExpandCollapse,\n  defaultThemeProp,\n  useConsolidatedRef,\n  Icon,\n  registerIcon,\n  useI18n,\n  useFocusWithin,\n  Button,\n  StyledIcon\n} from '@pega/cosmos-react-core';\nimport * as arrowMicroLeftIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/arrow-micro-left.icon';\n\nimport CaseHeader, { CaseHeaderProps } from '../CaseHeader';\n\nregisterIcon(arrowMicroLeftIcon);\n\nexport interface CaseSummaryProps extends CaseHeaderProps {\n  /** A region to display any summary information about the CaseView. */\n  summary: ReactNode;\n  /** An object handling the rendering and functionality of the Tabs in CaseSummary. */\n  tabs: {\n    items: Tab[];\n    onClick: (id: string, event?: MouseEvent<HTMLAnchorElement | HTMLButtonElement>) => void;\n    currentTabId: string;\n  };\n  /**\n   * Forces rendering in the mobile layout, regardless of screen size.\n   * @internal\n   */\n  forceMobile?: boolean;\n  /**\n   * Indicator for a desktop size.\n   * @internal\n   */\n  desktop?: boolean;\n  /** The fixed width string is needed for the expandable and collapsible header. */\n  fixedWidth?: string;\n  /** A boolean that toggles the collapsible feature of the case summary. */\n  collapsible?: boolean;\n  onBeforeCollapse?: () => void;\n  onAfterCollapse?: () => void;\n  onBeforeExpand?: () => void;\n  onAfterExpand?: () => void;\n  /** A callback that will return the animation state of the case summary. */\n  onAnimationStateChange?: (state: AnimationState) => void;\n  /** Ref for the header element inside the Case Summary */\n  headerRef?: Ref<HTMLDivElement>;\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLDivElement>;\n}\n\ntype AnimationState = 'expanding' | 'expanded' | 'collapsing' | 'collapsed';\n\nexport const StyledCaseSummary = styled.div<{ expanded?: boolean; fixedWidth?: string }>(\n  ({ theme, expanded, fixedWidth }) => {\n    return css`\n      position: relative;\n      width: ${fixedWidth || 'auto'};\n      max-width: ${fixedWidth ? 'none' : '100%'};\n      height: 100%;\n\n      ${expanded &&\n      css`\n        @media (min-width: ${theme.base.breakpoints.md}) {\n          &:hover {\n            &::after {\n              content: '';\n              position: absolute;\n              top: 0;\n              bottom: 0;\n              inset-inline-start: 100%;\n              width: 0.75rem;\n            }\n          }\n        }\n      `}\n    `;\n  }\n);\n\nexport const StyledCaseSummaryInfo = styled.div`\n  overflow: auto;\n  flex: 1;\n`;\n\nconst StyledExpandCollapse = styled.div<{ animationState: AnimationState }>(\n  ({ animationState }) => {\n    const expandingOrCollapsing = ['expanding', 'collapsing'].includes(animationState);\n    return css`\n      position: ${expandingOrCollapsing ? 'fixed' : 'relative'};\n      top: ${expandingOrCollapsing ? 'var(--appshell-offset, 0)' : 0};\n    `;\n  }\n);\n\nconst StyledExpandCollapseButton = styled(Button)<{\n  expanded: boolean;\n  headerHeight: number;\n  animationState: AnimationState;\n  visible: boolean;\n}>(({ theme, expanded, headerHeight, animationState, visible }) => {\n  return css`\n    border-radius: ${expanded ? '1.5rem' : '0 1.5rem 1.5rem 0'};\n    box-shadow: ${theme.base.shadow.low};\n    border: none;\n    opacity: ${visible ? '1' : '0'};\n    position: ${animationState === 'collapsing' ? 'fixed' : 'absolute'};\n    inset-inline-start: ${expanded ? 'calc(100% - 0.75rem)' : 0};\n    top: calc(calc(${headerHeight}px / 2) - 0.75rem);\n    z-index: 1;\n\n    ${StyledIcon} {\n      width: 1.5rem;\n      height: 1.5rem;\n      transform: rotate(${expanded ? '0' : '180deg'});\n    }\n  `;\n});\n\nStyledExpandCollapseButton.defaultProps = defaultThemeProp;\n\nconst CaseSummary: FunctionComponent<CaseSummaryProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<CaseSummaryProps>, ref: CaseSummaryProps['ref']) => {\n    const {\n      icon,\n      heading,\n      caseId,\n      caseLink,\n      parentCases,\n      followed,\n      onFollowedChange,\n      actions,\n      onEdit,\n      summary,\n      tabs,\n      forceMobile,\n      collapsible = false,\n      desktop = true,\n      fixedWidth,\n      onBeforeCollapse,\n      onAfterCollapse,\n      onBeforeExpand,\n      onAfterExpand,\n      onAnimationStateChange,\n      headerRef: caseSummaryHeaderRef,\n      ...restProps\n    } = props;\n\n    const [showExpandCollapse, setShowExpandCollapse] = useState(false);\n    const expandCollapseBtnRef = useRef<HTMLButtonElement>(null);\n    const [expanded, setExpanded] = useState(true);\n    const isMediumOrAbove = !forceMobile && desktop;\n    const [animationState, setAnimationState] = useState('expanded');\n    const [collapsedHeight, setCollapsedHeight] = useState(0);\n    const caseSummaryRef = useConsolidatedRef(ref);\n    const focusWithin = useFocusWithin<HTMLDivElement>([caseSummaryRef.current]);\n    const t = useI18n();\n\n    const setAnimStateAndUpdateParent = (state: AnimationState) => {\n      setAnimationState(state);\n      onAnimationStateChange?.(state);\n    };\n\n    const headerRef = useConsolidatedRef<HTMLDivElement>(caseSummaryHeaderRef);\n\n    const showTabs = (isMediumOrAbove && tabs.items.length > 1) || !isMediumOrAbove;\n\n    const caseHeaderProps = {\n      actions,\n      onEdit,\n      isMediumOrAbove,\n      caseId,\n      parentCases,\n      heading,\n      caseLink,\n      icon,\n      followed,\n      onFollowedChange,\n      style: {\n        maxHeight: ['expanding', 'collapsed', 'collapsing'].includes(animationState)\n          ? `${collapsedHeight}px`\n          : 'auto'\n      }\n    };\n\n    useEffect(() => {\n      if (['expanded'].includes(animationState)) {\n        setCollapsedHeight(headerRef.current?.offsetHeight || 0);\n      }\n    }, [animationState, headerRef.current]);\n\n    const expandOrCollapseLabel = expanded ? t('collapse') : t('expand');\n    const expandOrCollapseA11y = expanded ? t('collapse_summary_panel') : t('expand_summary_panel');\n\n    return (\n      <Flex\n        as={StyledCaseSummary}\n        expanded={expanded}\n        fixedWidth={fixedWidth}\n        container={{ direction: 'column' }}\n        item={{ shrink: 0 }}\n        ref={caseSummaryRef}\n        style={{\n          marginTop: ['collapsing', 'expanding'].includes(animationState)\n            ? `${collapsedHeight}px`\n            : 0\n        }}\n        onMouseEnter={() => {\n          setShowExpandCollapse(true);\n        }}\n        onMouseLeave={() => {\n          setShowExpandCollapse(false);\n        }}\n        {...restProps}\n      >\n        {collapsible ? (\n          <>\n            <StyledExpandCollapseButton\n              onClick={() => setExpanded(!expanded)}\n              expanded={expanded}\n              headerHeight={collapsedHeight}\n              animationState={animationState}\n              label={\n                ['expanded', 'collapsed'].includes(animationState)\n                  ? expandOrCollapseLabel\n                  : undefined\n              }\n              aria-label={\n                ['expanding', 'collapsing'].includes(animationState)\n                  ? expandOrCollapseA11y\n                  : undefined\n              }\n              visible={showExpandCollapse || !expanded || focusWithin}\n              tabIndex={0}\n              icon\n              compact\n              ref={expandCollapseBtnRef}\n            >\n              <Icon name='arrow-micro-left' />\n            </StyledExpandCollapseButton>\n            <ExpandCollapse\n              dimension='width'\n              min={isMediumOrAbove || !expanded ? fixedWidth : '100%'}\n              max='100%'\n              collapsed={expanded}\n              onBeforeExpand={() => {\n                setAnimStateAndUpdateParent('collapsing');\n                onBeforeCollapse?.();\n              }}\n              onAfterExpand={() => {\n                setAnimStateAndUpdateParent('collapsed');\n                onAfterCollapse?.();\n              }}\n              onBeforeCollapse={() => {\n                setAnimStateAndUpdateParent('expanding');\n                onBeforeExpand?.();\n              }}\n              onAfterCollapse={() => {\n                setAnimStateAndUpdateParent('expanded');\n                onAfterExpand?.();\n              }}\n              as={StyledExpandCollapse}\n              animationState={animationState}\n              ref={headerRef}\n            >\n              <CaseHeader {...caseHeaderProps} />\n            </ExpandCollapse>\n          </>\n        ) : (\n          <CaseHeader {...caseHeaderProps} />\n        )}\n        <StyledCaseSummaryInfo>\n          {isMediumOrAbove && summary}\n\n          {showTabs && isMediumOrAbove && (\n            <Tabs\n              type='vertical'\n              tabs={tabs.items}\n              onTabClick={tabs.onClick}\n              currentTabId={tabs.currentTabId}\n            />\n          )}\n        </StyledCaseSummaryInfo>\n      </Flex>\n    );\n  }\n);\n\nexport default CaseSummary;\n"]}

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

@@ -0,0 +1,4 @@
+export { default } from './CaseSummary';
+export { CaseSummaryProps } from './CaseSummary';
+export { StyledCaseSummary } from './CaseSummary';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/CaseSummary/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACjD,OAAO,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC"}

package/lib/components/CaseSummary/index.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/CaseSummary/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAExC,OAAO,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC","sourcesContent":["export { default } from './CaseSummary';\nexport { CaseSummaryProps } from './CaseSummary';\nexport { StyledCaseSummary } from './CaseSummary';\n"]}

package/lib/components/CaseSummaryFields/CaseSummaryFields.d.ts

@@ -0,0 +1,22 @@
+import { ReactNode, FunctionComponent, Ref } from 'react';
+import { ForwardProps } from '@pega/cosmos-react-core';
+export declare const StyledCaseSummaryFields: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export interface CaseSummaryFieldsProps {
+    /** The primary summary fields to display above secondary fields. */
+    primaryFields: {
+        id?: string;
+        name: string;
+        value: ReactNode;
+    }[];
+    /** The secondary summary fields to display below primary fields. */
+    secondaryFields: {
+        id?: string;
+        name: string;
+        value: ReactNode;
+    }[];
+    /** Ref for the wrapping element. */
+    ref?: Ref<HTMLDivElement>;
+}
+declare const CaseSummaryFields: FunctionComponent<CaseSummaryFieldsProps & ForwardProps>;
+export default CaseSummaryFields;
+//# sourceMappingURL=CaseSummaryFields.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CaseSummaryFields.d.ts","sourceRoot":"","sources":["../../../src/components/CaseSummaryFields/CaseSummaryFields.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAc,iBAAiB,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAGvF,OAAO,EAOL,YAAY,EAEb,MAAM,yBAAyB,CAAC;AAEjC,eAAO,MAAM,uBAAuB,yGAelC,CAAC;AAIH,MAAM,WAAW,sBAAsB;IACrC,oEAAoE;IACpE,aAAa,EAAE;QACb,EAAE,CAAC,EAAE,MAAM,CAAC;QACZ,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE,SAAS,CAAC;KAClB,EAAE,CAAC;IACJ,oEAAoE;IACpE,eAAe,EAAE;QACf,EAAE,CAAC,EAAE,MAAM,CAAC;QACZ,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE,SAAS,CAAC;KAClB,EAAE,CAAC;IACJ,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,QAAA,MAAM,iBAAiB,EAAE,iBAAiB,CAAC,sBAAsB,GAAG,YAAY,CAY/E,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/lib/components/CaseSummaryFields/CaseSummaryFields.js

@@ -0,0 +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, 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, { ...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

@@ -0,0 +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,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/CaseSummaryFields/index.d.ts

@@ -0,0 +1,4 @@
+export { default } from './CaseSummaryFields';
+export { CaseSummaryFieldsProps } from './CaseSummaryFields';
+export { StyledCaseSummaryFields } from './CaseSummaryFields';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/CaseSummaryFields/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAC;AAC7D,OAAO,EAAE,uBAAuB,EAAE,MAAM,qBAAqB,CAAC"}

package/lib/components/CaseSummaryFields/index.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/CaseSummaryFields/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAE9C,OAAO,EAAE,uBAAuB,EAAE,MAAM,qBAAqB,CAAC","sourcesContent":["export { default } from './CaseSummaryFields';\nexport { CaseSummaryFieldsProps } from './CaseSummaryFields';\nexport { StyledCaseSummaryFields } from './CaseSummaryFields';\n"]}

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

@@ -0,0 +1,31 @@
+import { ReactNode, FC } from 'react';
+import { ForwardProps } from '@pega/cosmos-react-core';
+import { CaseSummaryProps } from '../CaseSummary';
+import { UtilitiesSummaryProps } from './UtilitiesSummary';
+export interface CaseViewProps extends CaseSummaryProps {
+    /** A region to hold a Stages component. */
+    stages?: ReactNode;
+    /** A region to hold a Tasks component. */
+    tasks?: ReactNode;
+    /** A region that is used to hold Utility components for example SummaryList. */
+    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. */
+    persistentUtility?: {
+        content: ReactNode;
+        title: string;
+    };
+    /** A region within the center column that is controlled by tabs in CaseSummary. */
+    tabContent?: {
+        content: ReactNode;
+        id: string;
+    }[];
+}
+declare const CaseView: FC<CaseViewProps & ForwardProps>;
+export default CaseView;
+//# sourceMappingURL=CaseView.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CaseView.d.ts","sourceRoot":"","sources":["../../../src/components/CaseView/CaseView.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,EAAE,EAUH,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;AAc7E,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;CACnD;AAED,QAAA,MAAM,QAAQ,EAAE,EAAE,CAAC,aAAa,GAAG,YAAY,CA6b9C,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/lib/components/CaseView/CaseView.js

@@ -0,0 +1,259 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext, useEffect, useState, useCallback, useMemo, useRef, useLayoutEffect } from 'react';
+import { Button, Flex, Grid, Icon, registerIcon, TabPanel, useBreakpoint, useScrollStick, useElement, Card, Drawer, useI18n, useDirection, Tabs } 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';
+import { StyledCaseDrawer, StyledCaseDrawerContent, StyledCaseView, StyledCaseViewContent, StyledPersistentUtility, StyledSummaryRegion, StyledCaseViewUtilities, StyledUtilToggle } from './CaseView.styles';
+registerIcon(moveRightSolidIcon, moveLeftSolidIcon);
+const CaseView = (props) => {
+    const { caseId, parentCases, heading, caseLink, icon, followed, onFollowedChange, summary, 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 = useRef(null);
+    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 });
+    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 && !defaultCollapsedUtilities);
+    const initialUserUtilState = defaultCollapsedUtilities ? 'hidden' : undefined;
+    const [userUtilState, setUserUtilState] = useState(initialUserUtilState);
+    const [summaryPanelCollapsed, setSummaryPanelCollapsed] = useState(false);
+    const hasSideBySideColumns = isMediumOrAbove;
+    const scrollStickOptions = useRef({
+        elements: []
+    });
+    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;
+        }
+        setUtilitiesShown(shown => {
+            setUserUtilState(shown ? 'hidden' : 'shown');
+            return !shown;
+        });
+    }, []);
+    useLayoutEffect(() => {
+        setOffsets(getOffsets());
+    }, [isExtraLargeOrAbove, isLargeOrAbove, isMediumOrAbove, headerEl, summaryPanelCollapsed]);
+    useEffect(() => {
+        if (isLargeOrAbove) {
+            setUtilitiesShown(userUtilState !== 'hidden');
+        }
+        else {
+            setUtilitiesShown(false);
+        }
+    }, [isLargeOrAbove]);
+    useEffect(() => {
+        if (isMediumOrAbove &&
+            !summaryPanelCollapsed &&
+            !persistentUtility &&
+            (currentTabId === summaryTabId || currentTabId === utilitiesTabId)) {
+            onTabClick(tabItemsProp[0]?.id);
+        }
+    }, [
+        isMediumOrAbove,
+        onTabClick,
+        currentTabId,
+        summaryTabId,
+        utilitiesTabId,
+        summaryPanelCollapsed
+    ]);
+    useEffect(() => {
+        if ((isMediumOrAbove && !isLargeOrAbove && utilities) || persistentUtility)
+            setUtilitiesShown(false);
+    }, [isMediumOrAbove, utilities]);
+    useEffect(() => {
+        if (persistentUtility && currentTabId === persistentUtilityTabId)
+            onTabClick(summaryTabId);
+    }, [persistentUtility]);
+    const tabItems = useMemo(() => {
+        const summaryTab = { id: summaryTabId, name: 'Summary' };
+        if (isMediumOrAbove)
+            return summaryPanelCollapsed || (persistentUtility && !isExtraLargeOrAbove)
+                ? [summaryTab, ...tabItemsProp]
+                : tabItemsProp;
+        const utilityTabs = [];
+        if (utilities)
+            utilityTabs.push({ id: utilitiesTabId, name: 'Utilities' });
+        if (persistentUtility && !isMediumOrAbove)
+            utilityTabs.push({ id: persistentUtilityTabId, name: persistentUtility.title });
+        return [summaryTab, ...tabItemsProp, ...utilityTabs];
+    }, [
+        isMediumOrAbove,
+        isExtraLargeOrAbove,
+        summaryTabId,
+        utilitiesTabId,
+        persistentUtilityTabId,
+        utilities,
+        persistentUtility,
+        tabItemsProp,
+        summaryPanelCollapsed
+    ]);
+    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' });
+        }
+    }, [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`
+        : `move-${direction.start}-solid`;
+    let caseViewGridContainer = {
+        cols: 'minmax(0, 1fr)',
+        colGap: 0,
+        rows: 'minmax(0, max-content) auto',
+        areas: '"case-nav" "content"'
+    };
+    let fixedSummaryWidth = '100%';
+    if (!forceMobile && !persistentUtility && !summaryPanelCollapsed) {
+        fixedSummaryWidth = isLargeOrAbove ? '25rem' : '22rem';
+        if (isLargeOrAbove || isMediumOrAbove) {
+            caseViewGridContainer = {
+                cols: 'minmax(0, max-content) minmax(0, 1fr) minmax(0, max-content)',
+                colGap: 2,
+                rows: caseViewGridContainer.rows,
+                areas: '"case-nav content utilities"'
+            };
+        }
+    }
+    else if (summaryPanelCollapsed) {
+        if (isLargeOrAbove || isMediumOrAbove) {
+            caseViewGridContainer = {
+                cols: 'minmax(0, 1fr) minmax(0, max-content)',
+                colGap: 2,
+                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"'
+            };
+        }
+    }
+    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, 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(Flex, { container: {
+                    direction: 'column',
+                    alignContent: 'start',
+                    rowGap: 2
+                }, 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(Tabs, { 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)
+                        (scrollStickOptions.current?.elements).push(el);
+                }, as: StyledCaseViewUtilities, container: {
+                    cols: 'minmax(0, 1fr)',
+                    rowGap: 2
+                }, item: {
+                    area: 'utilities'
+                }, 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