@pega/cosmos-react-work 5.0.0-dev.4.9 → 5.0.0-dev.5.0

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

@@ -0,0 +1,98 @@
+import { ReactNode, MouseEvent, MouseEventHandler } from 'react';
+import { Tab, NoChildrenProp, FieldValueListItemProps, ForwardProps, MenuItemProps, Action, BaseProps, TestIdProp } from '@pega/cosmos-react-core';
+import type { getCaseViewTestIds } from './CaseView.test-ids';
+export type CaseSummaryFieldsProps = {
+    primary?: SummaryField[];
+    secondary?: SummaryField[];
+    inSummaryPanel?: boolean;
+};
+export type SummaryField = {
+    name: FieldValueListItemProps['name'];
+    value: FieldValueListItemProps['value'];
+    simpleValue?: string | number | ReactNode;
+    variant?: FieldValueListItemProps['variant'];
+};
+export type UtilitySummaryItem = {
+    iconName: string;
+    name: string;
+    count?: number;
+    onClick?: MouseEventHandler<HTMLButtonElement>;
+};
+export interface CaseViewProps extends NoChildrenProp, BaseProps, TestIdProp {
+    /** A unique identifier for the case instance. */
+    caseId: string;
+    /** Text to quickly identify a case instance. */
+    heading: string;
+    /** Supplemental text to identify a case instance. */
+    subheading?: string;
+    /** A set of Link props representing the case parents, rendered as Breadcrumbs. */
+    parentCases?: MenuItemProps[];
+    /** An icon name to render as a visual in the case view header. */
+    icon?: string;
+    /** Indicates if the current user is following the case. This should be updated based on onFollowedChange. */
+    followed?: boolean;
+    /** Called when user chooses to follow or unfollow the case. Use this to update followed. */
+    onFollowedChange?: (following: boolean) => void;
+    /** Case level actions available in an action menu. */
+    actions?: Action[];
+    /** Visually promoted case level actions available outside the menu. */
+    promotedActions?: Action[];
+    /** A callback for when the edit button is clicked */
+    onEdit?: () => void;
+    /** Field data to render in summary areas. */
+    summaryFields: CaseSummaryFieldsProps;
+    /**
+     * Determines the layout state of the summary region.
+     * @default true
+     */
+    summaryExpanded?: boolean;
+    /** Callback to toggle the case summary's layout. */
+    onToggleSummary?: () => void;
+    /** An object handling the rendering and functionality of the Tabs in CaseSummary. */
+    tabs: {
+        items: Tab[];
+        onClick: (id: string, event?: MouseEvent<HTMLAnchorElement | HTMLButtonElement>) => void;
+        currentTabId: string;
+    };
+    /** A region within the center column that is controlled by tabs in CaseSummary. */
+    tabContent?: {
+        content: ReactNode;
+        id: string;
+    }[];
+    /** A region to hold a Stages component. */
+    stages?: ReactNode;
+    /** A region to hold a Tasks component. */
+    tasks?: ReactNode;
+    /** 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;
+    };
+    /** Provide an instance of IntelligentGuidance to be rendered for a case. */
+    intelligentGuidance?: ReactNode;
+    /** A region for case widgets. */
+    utilities?: ReactNode;
+    /** An indicator of case widgets when the utilities are collapsed. */
+    utilitiesSummaryItems?: UtilitySummaryItem[];
+    /**
+     * Determines the layout state of the utilities.
+     * @default true
+     */
+    utilitiesExpanded?: boolean;
+    /** Callback to toggle the utilities. */
+    onToggleUtilities?: () => void;
+}
+export interface CaseViewContextValue extends Pick<CaseViewProps, 'caseId' | 'heading' | 'subheading' | 'parentCases' | 'icon' | 'followed' | 'onFollowedChange' | 'actions' | 'promotedActions' | 'onEdit' | 'tabs' | 'summaryExpanded' | 'summaryFields' | 'onToggleSummary' | 'utilitiesExpanded' | 'stages' | 'tasks' | 'persistentUtility' | 'intelligentGuidance'> {
+    testIds: Partial<ReturnType<typeof getCaseViewTestIds>>;
+    aboveSM: boolean;
+    aboveMD: boolean;
+    aboveLG: boolean;
+    aboveXL: boolean;
+    isPreview: boolean;
+    caseLink?: {
+        href: string;
+    } & ForwardProps;
+}
+//# sourceMappingURL=CaseView.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CaseView.types.d.ts","sourceRoot":"","sources":["../../../src/components/CaseView/CaseView.types.ts"],"names":[],"mappings":"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"}

package/lib/components/CaseView/CaseView.types.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"CaseView.types.js","sourceRoot":"","sources":["../../../src/components/CaseView/CaseView.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ReactNode, MouseEvent, MouseEventHandler } from 'react';\n\nimport {\n  Tab,\n  NoChildrenProp,\n  FieldValueListItemProps,\n  ForwardProps,\n  MenuItemProps,\n  Action,\n  BaseProps,\n  TestIdProp\n} from '@pega/cosmos-react-core';\n\nimport type { getCaseViewTestIds } from './CaseView.test-ids';\n\nexport type CaseSummaryFieldsProps = {\n  primary?: SummaryField[];\n  secondary?: SummaryField[];\n  inSummaryPanel?: boolean;\n};\n\nexport type SummaryField = {\n  name: FieldValueListItemProps['name'];\n  value: FieldValueListItemProps['value'];\n  simpleValue?: string | number | ReactNode;\n  variant?: FieldValueListItemProps['variant'];\n};\n\nexport type UtilitySummaryItem = {\n  iconName: string;\n  name: string;\n  count?: number;\n  onClick?: MouseEventHandler<HTMLButtonElement>;\n};\n\nexport interface CaseViewProps extends NoChildrenProp, BaseProps, TestIdProp {\n  /** A unique identifier for the case instance. */\n  caseId: string;\n\n  /** Text to quickly identify a case instance. */\n  heading: string;\n\n  /** Supplemental text to identify a case instance. */\n  subheading?: string;\n\n  /** @internal */\n  caseLink?: CaseViewContextValue['caseLink'];\n\n  /** A set of Link props representing the case parents, rendered as Breadcrumbs. */\n  parentCases?: MenuItemProps[];\n\n  /** An icon name to render as a visual in the case view header. */\n  icon?: string;\n\n  /** Indicates if the current user is following the case. This should be updated based on onFollowedChange. */\n  followed?: boolean;\n\n  /** Called when user chooses to follow or unfollow the case. Use this to update followed. */\n  onFollowedChange?: (following: boolean) => void;\n\n  /** Case level actions available in an action menu. */\n  actions?: Action[];\n\n  /** Visually promoted case level actions available outside the menu. */\n  promotedActions?: Action[];\n\n  /** A callback for when the edit button is clicked */\n  onEdit?: () => void;\n\n  /** Field data to render in summary areas. */\n  summaryFields: CaseSummaryFieldsProps;\n\n  /**\n   * Determines the layout state of the summary region.\n   * @default true\n   */\n  summaryExpanded?: boolean;\n\n  /** Callback to toggle the case summary's layout. */\n  onToggleSummary?: () => void;\n\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  /** A region within the center column that is controlled by tabs in CaseSummary. */\n  tabContent?: { content: ReactNode; id: string }[];\n\n  /** A region to hold a Stages component. */\n  stages?: ReactNode;\n\n  /** A region to hold a Tasks component. */\n  tasks?: ReactNode;\n\n  /** A region above the center column to display banners. */\n  banners?: ReactNode;\n\n  /** A region to the right reserved for persistent utilities. */\n  persistentUtility?: { content: ReactNode; title: string };\n\n  /** Provide an instance of IntelligentGuidance to be rendered for a case. */\n  intelligentGuidance?: ReactNode;\n\n  /** A region for case widgets. */\n  utilities?: ReactNode;\n\n  /** An indicator of case widgets when the utilities are collapsed. */\n  utilitiesSummaryItems?: UtilitySummaryItem[];\n\n  /**\n   * Determines the layout state of the utilities.\n   * @default true\n   */\n  utilitiesExpanded?: boolean;\n\n  /** Callback to toggle the utilities. */\n  onToggleUtilities?: () => void;\n\n  /**\n   * Indicates CaseView is rendered within a CasePreview.\n   * @internal\n   */\n  isPreview?: boolean;\n}\n\nexport interface CaseViewContextValue\n  extends Pick<\n    CaseViewProps,\n    | 'caseId'\n    | 'heading'\n    | 'subheading'\n    | 'parentCases'\n    | 'icon'\n    | 'followed'\n    | 'onFollowedChange'\n    | 'actions'\n    | 'promotedActions'\n    | 'onEdit'\n    | 'tabs'\n    | 'summaryExpanded'\n    | 'summaryFields'\n    | 'onToggleSummary'\n    | 'utilitiesExpanded'\n    | 'stages'\n    | 'tasks'\n    | 'persistentUtility'\n    | 'intelligentGuidance'\n  > {\n  testIds: Partial<ReturnType<typeof getCaseViewTestIds>>;\n  aboveSM: boolean;\n  aboveMD: boolean;\n  aboveLG: boolean;\n  aboveXL: boolean;\n  isPreview: boolean;\n  caseLink?: { href: string } & ForwardProps;\n}\n"]}

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

@@ -0,0 +1,9 @@
+import { FunctionComponent } from 'react';
+import { CaseViewProps } from './CaseView.types';
+export interface UtilitiesSummaryProps {
+    items?: CaseViewProps['utilitiesSummaryItems'];
+}
+export declare const StyledUtilitiesSummary: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+declare const UtilitiesSummary: FunctionComponent<UtilitiesSummaryProps>;
+export default UtilitiesSummary;
+//# sourceMappingURL=UtilitiesSummary.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"UtilitiesSummary.d.ts","sourceRoot":"","sources":["../../../src/components/CaseView/UtilitiesSummary.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAe1C,OAAO,EAAE,aAAa,EAAsB,MAAM,kBAAkB,CAAC;AAErE,MAAM,WAAW,qBAAqB;IACpC,KAAK,CAAC,EAAE,aAAa,CAAC,uBAAuB,CAAC,CAAC;CAChD;AAED,eAAO,MAAM,sBAAsB,yGAIjC,CAAC;AAkEH,QAAA,MAAM,gBAAgB,EAAE,iBAAiB,CAAC,qBAAqB,CAe9D,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/lib/components/CaseView/UtilitiesSummary.js

@@ -0,0 +1,53 @@
+import { createElement as _createElement } from "react";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import styled, { css } from 'styled-components';
+import { Button, Card, Count, Flex, Icon, Tooltip, useI18n, VisuallyHiddenText, useElement } from '@pega/cosmos-react-core';
+export const StyledUtilitiesSummary = styled.div(() => {
+    return css `
+    width: 2.75rem;
+  `;
+});
+const StyledUtilitySummaryButton = styled(Button)(({ theme }) => css `
+    padding-block: ${theme.base.spacing};
+    padding-inline: 0;
+    width: 100%;
+    color: currentColor;
+    border-radius: unset;
+    border: none;
+
+    &:hover {
+      color: currentColor;
+    }
+
+    &:focus {
+      z-index: 1;
+    }
+
+    &:first-child {
+      border-start-start-radius: inherit;
+      border-start-end-radius: inherit;
+    }
+
+    &:last-child {
+      border-end-start-radius: inherit;
+      border-end-end-radius: inherit;
+    }
+
+    & + & {
+      margin: 0;
+    }
+  `);
+const UtilitySummary = ({ name, iconName, count, onClick }) => {
+    const [utilSummaryTooltip, setUtilSummaryTooltip] = useElement();
+    return (_jsxs(_Fragment, { children: [_jsxs(Flex, { container: {
+                    direction: 'column',
+                    alignItems: 'center',
+                    gap: 0.5
+                }, onClick: onClick, ref: setUtilSummaryTooltip, as: StyledUtilitySummaryButton, children: [_jsx(Icon, { name: iconName }), count !== undefined && _jsx(Count, { "aria-hidden": true, children: count }), _jsx(VisuallyHiddenText, { role: 'listitem', children: `${count ?? ''} ${name}` })] }), _jsx(Tooltip, { target: utilSummaryTooltip, showDelay: 'none', hideDelay: 'none', children: name })] }));
+};
+const UtilitiesSummary = ({ items = [] }) => {
+    const t = useI18n();
+    return (_jsx(Card, { container: { direction: 'column', alignItems: 'center' }, as: StyledUtilitiesSummary, "aria-label": t('utilities_summary'), role: 'list', children: items.map(item => (_createElement(UtilitySummary, { ...item, key: item.iconName }))) }));
+};
+export default UtilitiesSummary;
+//# sourceMappingURL=UtilitiesSummary.js.map

package/lib/components/CaseView/UtilitiesSummary.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UtilitiesSummary.js","sourceRoot":"","sources":["../../../src/components/CaseView/UtilitiesSummary.tsx"],"names":[],"mappings":";;AACA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,MAAM,EACN,IAAI,EACJ,KAAK,EACL,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,OAAO,EACP,kBAAkB,EAClB,UAAU,EACX,MAAM,yBAAyB,CAAC;AAQjC,MAAM,CAAC,MAAM,sBAAsB,GAAG,MAAM,CAAC,GAAG,CAAC,GAAG,EAAE;IACpD,OAAO,GAAG,CAAA;;GAET,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,0BAA0B,GAAG,MAAM,CAAC,MAAM,CAAC,CAC/C,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;qBACC,KAAK,CAAC,IAAI,CAAC,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BpC,CACF,CAAC;AAEF,MAAM,cAAc,GAA0C,CAAC,EAC7D,IAAI,EACJ,QAAQ,EACR,KAAK,EACL,OAAO,EACR,EAAE,EAAE;IACH,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,GAAG,UAAU,EAAe,CAAC;IAC9E,OAAO,CACL,8BACE,MAAC,IAAI,IACH,SAAS,EAAE;oBACT,SAAS,EAAE,QAAQ;oBACnB,UAAU,EAAE,QAAQ;oBACpB,GAAG,EAAE,GAAG;iBACT,EACD,OAAO,EAAE,OAAO,EAChB,GAAG,EAAE,qBAAqB,EAC1B,EAAE,EAAE,0BAA0B,aAE9B,KAAC,IAAI,IAAC,IAAI,EAAE,QAAQ,GAAI,EACvB,KAAK,KAAK,SAAS,IAAI,KAAC,KAAK,mCAAc,KAAK,GAAS,EAC1D,KAAC,kBAAkB,IAAC,IAAI,EAAC,UAAU,YAAE,GAAG,KAAK,IAAI,EAAE,IAAI,IAAI,EAAE,GAAsB,IAC9E,EAEP,KAAC,OAAO,IAAC,MAAM,EAAE,kBAAkB,EAAE,SAAS,EAAC,MAAM,EAAC,SAAS,EAAC,MAAM,YACnE,IAAI,GACG,IACT,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,gBAAgB,GAA6C,CAAC,EAAE,KAAK,GAAG,EAAE,EAAE,EAAE,EAAE;IACpF,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,OAAO,CACL,KAAC,IAAI,IACH,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,EACxD,EAAE,EAAE,sBAAsB,gBACd,CAAC,CAAC,mBAAmB,CAAC,EAClC,IAAI,EAAC,MAAM,YAEV,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CACjB,eAAC,cAAc,OAAK,IAAI,EAAE,GAAG,EAAE,IAAI,CAAC,QAAQ,GAAI,CACjD,CAAC,GACG,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,gBAAgB,CAAC","sourcesContent":["import { FunctionComponent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Button,\n  Card,\n  Count,\n  Flex,\n  Icon,\n  Tooltip,\n  useI18n,\n  VisuallyHiddenText,\n  useElement\n} from '@pega/cosmos-react-core';\n\nimport { CaseViewProps, UtilitySummaryItem } from './CaseView.types';\n\nexport interface UtilitiesSummaryProps {\n  items?: CaseViewProps['utilitiesSummaryItems'];\n}\n\nexport const StyledUtilitiesSummary = styled.div(() => {\n  return css`\n    width: 2.75rem;\n  `;\n});\n\nconst StyledUtilitySummaryButton = styled(Button)(\n  ({ theme }) => css`\n    padding-block: ${theme.base.spacing};\n    padding-inline: 0;\n    width: 100%;\n    color: currentColor;\n    border-radius: unset;\n    border: none;\n\n    &:hover {\n      color: currentColor;\n    }\n\n    &:focus {\n      z-index: 1;\n    }\n\n    &:first-child {\n      border-start-start-radius: inherit;\n      border-start-end-radius: inherit;\n    }\n\n    &:last-child {\n      border-end-start-radius: inherit;\n      border-end-end-radius: inherit;\n    }\n\n    & + & {\n      margin: 0;\n    }\n  `\n);\n\nconst UtilitySummary: FunctionComponent<UtilitySummaryItem> = ({\n  name,\n  iconName,\n  count,\n  onClick\n}) => {\n  const [utilSummaryTooltip, setUtilSummaryTooltip] = useElement<HTMLElement>();\n  return (\n    <>\n      <Flex\n        container={{\n          direction: 'column',\n          alignItems: 'center',\n          gap: 0.5\n        }}\n        onClick={onClick}\n        ref={setUtilSummaryTooltip}\n        as={StyledUtilitySummaryButton}\n      >\n        <Icon name={iconName} />\n        {count !== undefined && <Count aria-hidden>{count}</Count>}\n        <VisuallyHiddenText role='listitem'>{`${count ?? ''} ${name}`}</VisuallyHiddenText>\n      </Flex>\n\n      <Tooltip target={utilSummaryTooltip} showDelay='none' hideDelay='none'>\n        {name}\n      </Tooltip>\n    </>\n  );\n};\n\nconst UtilitiesSummary: FunctionComponent<UtilitiesSummaryProps> = ({ items = [] }) => {\n  const t = useI18n();\n\n  return (\n    <Card\n      container={{ direction: 'column', alignItems: 'center' }}\n      as={StyledUtilitiesSummary}\n      aria-label={t('utilities_summary')}\n      role='list'\n    >\n      {items.map(item => (\n        <UtilitySummary {...item} key={item.iconName} />\n      ))}\n    </Card>\n  );\n};\n\nexport default UtilitiesSummary;\n"]}

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

@@ -0,0 +1,9 @@
+import type { WithAttributes } from '@pega/cosmos-react-core';
+import type { BaseDialogProps } from '@pega/cosmos-react-core/lib/components/Dialog/Dialog.types';
+type UtilitySummaryItemDialogProps = WithAttributes<'div', {
+    target: BaseDialogProps['target'];
+    onDismiss?: () => void;
+}>;
+declare const UtilitySummaryItemDialog: import("react").ForwardRefExoticComponent<Omit<UtilitySummaryItemDialogProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export default UtilitySummaryItemDialog;
+//# sourceMappingURL=UtilitySummaryItemDialog.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"UtilitySummaryItemDialog.d.ts","sourceRoot":"","sources":["../../../src/components/CaseView/UtilitySummaryItemDialog.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAc,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAE1E,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,4DAA4D,CAAC;AAQlG,KAAK,6BAA6B,GAAG,cAAc,CACjD,KAAK,EACL;IACE,MAAM,EAAE,eAAe,CAAC,QAAQ,CAAC,CAAC;IAClC,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB,CACF,CAAC;AAEF,QAAA,MAAM,wBAAwB,uIAmC5B,CAAC;AAEH,eAAe,wBAAwB,CAAC"}

package/lib/components/CaseView/UtilitySummaryItemDialog.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useEffect } from 'react';
+import styled from 'styled-components';
+import { defaultThemeProp, getFocusables, useConsolidatedRef, useDirection, useFocusTrap, useEscape, useOuterEvent } from '@pega/cosmos-react-core';
+import Dialog from '@pega/cosmos-react-core/lib/components/Dialog/Dialog';
+const StyledUtilitySummaryItemDialog = styled(Dialog) `
+  width: 25rem;
+`;
+StyledUtilitySummaryItemDialog.defaultProps = defaultThemeProp;
+const UtilitySummaryItemDialog = forwardRef(function UtilitySummaryItemDialog({ children, target, onDismiss }, ref) {
+    const dialogRef = useConsolidatedRef(ref);
+    useOuterEvent('mousedown', [dialogRef], () => {
+        onDismiss?.();
+        target.focus();
+    });
+    useEscape(() => {
+        onDismiss?.();
+        target.focus();
+    }, dialogRef);
+    useFocusTrap(dialogRef, false);
+    useEffect(() => {
+        const focusables = getFocusables(dialogRef);
+        focusables[0]?.focus();
+    }, []);
+    const { start } = useDirection();
+    return (_jsx(StyledUtilitySummaryItemDialog, { ref: dialogRef, target: target, arrow: true, placement: `${start}-start`, children: children }));
+});
+export default UtilitySummaryItemDialog;
+//# sourceMappingURL=UtilitySummaryItemDialog.js.map

package/lib/components/CaseView/UtilitySummaryItemDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UtilitySummaryItemDialog.js","sourceRoot":"","sources":["../../../src/components/CaseView/UtilitySummaryItemDialog.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE9C,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EACL,gBAAgB,EAChB,aAAa,EACb,kBAAkB,EAClB,YAAY,EACZ,YAAY,EACZ,SAAS,EACT,aAAa,EACd,MAAM,yBAAyB,CAAC;AAEjC,OAAO,MAAM,MAAM,sDAAsD,CAAC;AAG1E,MAAM,8BAA8B,GAAG,MAAM,CAAC,MAAM,CAAC,CAAA;;CAEpD,CAAC;AAEF,8BAA8B,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAU/D,MAAM,wBAAwB,GAAG,UAAU,CAGzC,SAAS,wBAAwB,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,GAAG;IACtE,MAAM,SAAS,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC;IAE1C,aAAa,CAAC,WAAW,EAAE,CAAC,SAAS,CAAC,EAAE,GAAG,EAAE;QAC3C,SAAS,EAAE,EAAE,CAAC;QACd,MAAM,CAAC,KAAK,EAAE,CAAC;IACjB,CAAC,CAAC,CAAC;IAEH,SAAS,CAAC,GAAG,EAAE;QACb,SAAS,EAAE,EAAE,CAAC;QACd,MAAM,CAAC,KAAK,EAAE,CAAC;IACjB,CAAC,EAAE,SAAS,CAAC,CAAC;IAEd,YAAY,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;IAE/B,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,UAAU,GAAG,aAAa,CAAC,SAAS,CAAC,CAAC;QAC5C,UAAU,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC;IACzB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,EAAE,KAAK,EAAE,GAAG,YAAY,EAAE,CAAC;IAEjC,OAAO,CACL,KAAC,8BAA8B,IAC7B,GAAG,EAAE,SAAS,EACd,MAAM,EAAE,MAAM,EACd,KAAK,QACL,SAAS,EAAE,GAAG,KAAK,QAAQ,YAE1B,QAAQ,GACsB,CAClC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,wBAAwB,CAAC","sourcesContent":["import { forwardRef, useEffect } from 'react';\nimport type { PropsWithoutRef } from 'react';\nimport styled from 'styled-components';\n\nimport {\n  defaultThemeProp,\n  getFocusables,\n  useConsolidatedRef,\n  useDirection,\n  useFocusTrap,\n  useEscape,\n  useOuterEvent\n} from '@pega/cosmos-react-core';\nimport type { RefElement, WithAttributes } from '@pega/cosmos-react-core';\nimport Dialog from '@pega/cosmos-react-core/lib/components/Dialog/Dialog';\nimport type { BaseDialogProps } from '@pega/cosmos-react-core/lib/components/Dialog/Dialog.types';\n\nconst StyledUtilitySummaryItemDialog = styled(Dialog)`\n  width: 25rem;\n`;\n\nStyledUtilitySummaryItemDialog.defaultProps = defaultThemeProp;\n\ntype UtilitySummaryItemDialogProps = WithAttributes<\n  'div',\n  {\n    target: BaseDialogProps['target'];\n    onDismiss?: () => void;\n  }\n>;\n\nconst UtilitySummaryItemDialog = forwardRef<\n  RefElement<UtilitySummaryItemDialogProps>,\n  PropsWithoutRef<UtilitySummaryItemDialogProps>\n>(function UtilitySummaryItemDialog({ children, target, onDismiss }, ref) {\n  const dialogRef = useConsolidatedRef(ref);\n\n  useOuterEvent('mousedown', [dialogRef], () => {\n    onDismiss?.();\n    target.focus();\n  });\n\n  useEscape(() => {\n    onDismiss?.();\n    target.focus();\n  }, dialogRef);\n\n  useFocusTrap(dialogRef, false);\n\n  useEffect(() => {\n    const focusables = getFocusables(dialogRef);\n    focusables[0]?.focus();\n  }, []);\n\n  const { start } = useDirection();\n\n  return (\n    <StyledUtilitySummaryItemDialog\n      ref={dialogRef}\n      target={target}\n      arrow\n      placement={`${start}-start`}\n    >\n      {children}\n    </StyledUtilitySummaryItemDialog>\n  );\n});\n\nexport default UtilitySummaryItemDialog;\n"]}

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

@@ -0,0 +1,5 @@
+export { default } from './CaseView';
+export type { CaseViewProps } from './CaseView.types';
+export { StyledCaseView, StyledWorkArea as StyledCaseViewContent, StyledCaseDrawer, StyledCaseDrawerContent, StyledSummary as StyledSummaryRegion } from './CaseView.styles';
+export { default as UtilitySummaryItemDialog } from './UtilitySummaryItemDialog';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/CaseView/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,YAAY,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EACL,cAAc,EACd,cAAc,IAAI,qBAAqB,EACvC,gBAAgB,EAChB,uBAAuB,EACvB,aAAa,IAAI,mBAAmB,EACrC,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,OAAO,IAAI,wBAAwB,EAAE,MAAM,4BAA4B,CAAC"}

package/lib/components/CaseView/index.js

@@ -0,0 +1,4 @@
+export { default } from './CaseView';
+export { StyledCaseView, StyledWorkArea as StyledCaseViewContent, StyledCaseDrawer, StyledCaseDrawerContent, StyledSummary as StyledSummaryRegion } from './CaseView.styles';
+export { default as UtilitySummaryItemDialog } from './UtilitySummaryItemDialog';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/CaseView/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAErC,OAAO,EACL,cAAc,EACd,cAAc,IAAI,qBAAqB,EACvC,gBAAgB,EAChB,uBAAuB,EACvB,aAAa,IAAI,mBAAmB,EACrC,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,OAAO,IAAI,wBAAwB,EAAE,MAAM,4BAA4B,CAAC","sourcesContent":["export { default } from './CaseView';\nexport type { CaseViewProps } from './CaseView.types';\nexport {\n  StyledCaseView,\n  StyledWorkArea as StyledCaseViewContent,\n  StyledCaseDrawer,\n  StyledCaseDrawerContent,\n  StyledSummary as StyledSummaryRegion\n} from './CaseView.styles';\nexport { default as UtilitySummaryItemDialog } from './UtilitySummaryItemDialog';\n"]}

package/lib/components/ConfigurableLayout/ConfigurableLayout.d.ts

@@ -0,0 +1,4 @@
+import type { ConfigurableLayoutProps } from './ConfigurableLayout.types';
+declare const ConfigurableLayout: import("react").ForwardRefExoticComponent<ConfigurableLayoutProps & import("react").RefAttributes<HTMLElement>>;
+export default ConfigurableLayout;
+//# sourceMappingURL=ConfigurableLayout.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ConfigurableLayout.d.ts","sourceRoot":"","sources":["../../../src/components/ConfigurableLayout/ConfigurableLayout.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,4BAA4B,CAAC;AA+B1E,QAAA,MAAM,kBAAkB,iHA+EtB,CAAC;AAEH,eAAe,kBAAkB,CAAC"}

package/lib/components/ConfigurableLayout/ConfigurableLayout.js

@@ -0,0 +1,86 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useRef, useMemo } from 'react';
+import styled, { css } from 'styled-components';
+import { Flex, defaultThemeProp } from '@pega/cosmos-react-core';
+import { containerMinWidth, cellGap } from './defaults';
+import LayoutCell from './LayoutCell';
+const StyledConfigurableLayout = styled.div(() => {
+    return css `
+    overflow: hidden;
+  `;
+});
+const StyledCellGrid = styled.div(({ theme }) => {
+    return css `
+    /* Note: inset position used to negate "column" inline margin on items */
+    position: relative;
+    width: calc(100% + ${cellGap * 2} * ${theme.base.spacing});
+    max-width: calc(100% + ${cellGap * 2} * ${theme.base.spacing});
+    inset-inline: calc(-${cellGap} * ${theme.base.spacing});
+    margin-block-end: calc(-2 * ${cellGap} * ${theme.base.spacing});
+  `;
+});
+StyledCellGrid.defaultProps = defaultThemeProp;
+const StyledContainerRuler = styled.div(({ theme }) => {
+    return css `
+    margin-inline: calc(${cellGap} * ${theme.base.spacing});
+    width: calc(100% - ${cellGap * 2} * ${theme.base.spacing});
+  `;
+});
+StyledContainerRuler.defaultProps = defaultThemeProp;
+const ConfigurableLayout = forwardRef(function ConfigurableLayout({ items, arrangement }, ref) {
+    const containerRulerRef = useRef(null);
+    const renderMode = useMemo(() => {
+        const activeArrangement = arrangement?.hasWrapped !== undefined && !arrangement.hasWrapped;
+        if (activeArrangement) {
+            switch (arrangement.size) {
+                case 'main':
+                    return 'direct';
+                case 'half':
+                    return 'double';
+                case 'narrow':
+                    return 'full';
+                default:
+                    return 'direct';
+            }
+        }
+        // Use direct by default
+        return 'direct';
+    }, [arrangement]);
+    const content = useMemo(() => {
+        if (items && !!items.length) {
+            return items.map(itemConfig => {
+                const config = {
+                    ...itemConfig,
+                    layoutConfig: { ...itemConfig.layoutConfig }
+                };
+                if (renderMode !== 'direct') {
+                    switch (renderMode) {
+                        case 'double': {
+                            const doubleWidth = {
+                                '1/4': '1/2',
+                                '1/3': '2/3',
+                                '1/2': 'full',
+                                '2/3': 'full',
+                                '3/4': 'full',
+                                full: 'full'
+                            };
+                            config.layoutConfig.width = doubleWidth[config.layoutConfig.width];
+                            break;
+                        }
+                        case 'full':
+                            config.layoutConfig.width = 'full';
+                            break;
+                        default:
+                            config.layoutConfig.width = 'full';
+                            break;
+                    }
+                }
+                return _jsx(LayoutCell, { config: config }, `${itemConfig.id}`);
+            });
+        }
+        return null;
+    }, [items, renderMode]);
+    return (_jsx(StyledConfigurableLayout, { children: _jsxs(Flex, { as: StyledCellGrid, container: { wrap: 'wrap', justify: 'stretch', alignItems: 'stretch' }, item: { basis: containerMinWidth, grow: 1 }, ref: ref, children: [_jsx(StyledContainerRuler, { ref: containerRulerRef }), content] }) }));
+});
+export default ConfigurableLayout;
+//# sourceMappingURL=ConfigurableLayout.js.map

package/lib/components/ConfigurableLayout/ConfigurableLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfigurableLayout.js","sourceRoot":"","sources":["../../../src/components/ConfigurableLayout/ConfigurableLayout.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, PropsWithoutRef, Ref, useRef, useMemo } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Flex, defaultThemeProp } from '@pega/cosmos-react-core';\n\nimport type { ConfigurableLayoutProps } from './ConfigurableLayout.types';\nimport { containerMinWidth, cellGap } from './defaults';\nimport widthConfigOptions from './options';\nimport LayoutCell from './LayoutCell';\n\nconst StyledConfigurableLayout = styled.div(() => {\n  return css`\n    overflow: hidden;\n  `;\n});\n\nconst StyledCellGrid = styled.div(({ theme }) => {\n  return css`\n    /* Note: inset position used to negate \"column\" inline margin on items */\n    position: relative;\n    width: calc(100% + ${cellGap * 2} * ${theme.base.spacing});\n    max-width: calc(100% + ${cellGap * 2} * ${theme.base.spacing});\n    inset-inline: calc(-${cellGap} * ${theme.base.spacing});\n    margin-block-end: calc(-2 * ${cellGap} * ${theme.base.spacing});\n  `;\n});\nStyledCellGrid.defaultProps = defaultThemeProp;\n\nconst StyledContainerRuler = styled.div(({ theme }) => {\n  return css`\n    margin-inline: calc(${cellGap} * ${theme.base.spacing});\n    width: calc(100% - ${cellGap * 2} * ${theme.base.spacing});\n  `;\n});\nStyledContainerRuler.defaultProps = defaultThemeProp;\n\nconst ConfigurableLayout = forwardRef(function ConfigurableLayout(\n  { items, arrangement }: PropsWithoutRef<ConfigurableLayoutProps>,\n  ref: Ref<HTMLElement>\n) {\n  const containerRulerRef = useRef<HTMLDivElement>(null);\n\n  const renderMode = useMemo(() => {\n    const activeArrangement = arrangement?.hasWrapped !== undefined && !arrangement.hasWrapped;\n\n    if (activeArrangement) {\n      switch (arrangement.size) {\n        case 'main':\n          return 'direct';\n        case 'half':\n          return 'double';\n        case 'narrow':\n          return 'full';\n        default:\n          return 'direct';\n      }\n    }\n\n    // Use direct by default\n    return 'direct';\n  }, [arrangement]);\n\n  const content = useMemo(() => {\n    if (items && !!items.length) {\n      return items.map(itemConfig => {\n        const config = {\n          ...itemConfig,\n          layoutConfig: { ...itemConfig.layoutConfig }\n        };\n\n        if (renderMode !== 'direct') {\n          switch (renderMode) {\n            case 'double': {\n              const doubleWidth: { [key: string]: keyof typeof widthConfigOptions } = {\n                '1/4': '1/2',\n                '1/3': '2/3',\n                '1/2': 'full',\n                '2/3': 'full',\n                '3/4': 'full',\n                full: 'full'\n              };\n\n              config.layoutConfig.width = doubleWidth[config.layoutConfig.width];\n\n              break;\n            }\n            case 'full':\n              config.layoutConfig.width = 'full';\n              break;\n            default:\n              config.layoutConfig.width = 'full';\n              break;\n          }\n        }\n\n        return <LayoutCell key={`${itemConfig.id}`} config={config} />;\n      });\n    }\n\n    return null;\n  }, [items, renderMode]);\n\n  return (\n    <StyledConfigurableLayout>\n      <Flex\n        as={StyledCellGrid}\n        container={{ wrap: 'wrap', justify: 'stretch', alignItems: 'stretch' }}\n        item={{ basis: containerMinWidth, grow: 1 }}\n        ref={ref}\n      >\n        <StyledContainerRuler ref={containerRulerRef} />\n        {content}\n      </Flex>\n    </StyledConfigurableLayout>\n  );\n});\n\nexport default ConfigurableLayout;\n"]}

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

@@ -0,0 +1,41 @@
+import type widthConfigOptions from './options';
+/** Type for config of a single ConfigurableLayout item. */
+export interface Config {
+    /** Unique identifier in render region */
+    id: string;
+    /** Element to render */
+    content: JSX.Element;
+    /** Config for element */
+    layoutConfig: {
+        /** Responsive width option */
+        width: keyof typeof widthConfigOptions;
+        /**
+         * Fills remaining space if true, else does not grow beyond `width` value.
+         * @default true
+         */
+        fillAvailable?: boolean;
+        /** Flex basis (minimum fixed width) of element as:
+         *  - a numeric value to be applied in __pixels__
+         *  - a tuple of a numeric value and string unit
+         */
+        minWidth?: number | [number, 'px' | 'ch' | 'rem' | 'em'];
+    };
+}
+export interface ConfigurableLayoutProps {
+    /** Array of configs for individual layout cells */
+    items: Config[];
+    /** Arrangement properties */
+    arrangement?: {
+        /** Defines the arrangement size of the given ConfigurableLayout.
+         * Used to determine what width to apply to the given item when the arrangement is applied,
+         * with the following mapping:
+         * - 'narrow' --> applies 'full' width
+         * - 'main' --> applies configured width
+         * - 'half' --> applies double the configured width, or 'full' width (whichever is smaller)
+         */
+        size: 'narrow' | 'main' | 'half';
+        /** Indicates when the ConfigurableLayout has wrapped to the full width of it's container */
+        hasWrapped: boolean;
+    };
+}
+//# sourceMappingURL=ConfigurableLayout.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ConfigurableLayout.types.d.ts","sourceRoot":"","sources":["../../../src/components/ConfigurableLayout/ConfigurableLayout.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,kBAAkB,MAAM,WAAW,CAAC;AAEhD,2DAA2D;AAC3D,MAAM,WAAW,MAAM;IACrB,yCAAyC;IACzC,EAAE,EAAE,MAAM,CAAC;IACX,wBAAwB;IACxB,OAAO,EAAE,GAAG,CAAC,OAAO,CAAC;IACrB,yBAAyB;IACzB,YAAY,EAAE;QACZ,8BAA8B;QAC9B,KAAK,EAAE,MAAM,OAAO,kBAAkB,CAAC;QACvC;;;WAGG;QACH,aAAa,CAAC,EAAE,OAAO,CAAC;QACxB;;;WAGG;QACH,QAAQ,CAAC,EAAE,MAAM,GAAG,CAAC,MAAM,EAAE,IAAI,GAAG,IAAI,GAAG,KAAK,GAAG,IAAI,CAAC,CAAC;KAC1D,CAAC;CACH;AAED,MAAM,WAAW,uBAAuB;IACtC,mDAAmD;IACnD,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,6BAA6B;IAC7B,WAAW,CAAC,EAAE;QACZ;;;;;;WAMG;QACH,IAAI,EAAE,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;QACjC,4FAA4F;QAC5F,UAAU,EAAE,OAAO,CAAC;KACrB,CAAC;CACH"}

package/lib/components/ConfigurableLayout/ConfigurableLayout.types.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"ConfigurableLayout.types.js","sourceRoot":"","sources":["../../../src/components/ConfigurableLayout/ConfigurableLayout.types.ts"],"names":[],"mappings":"","sourcesContent":["import type widthConfigOptions from './options';\n\n/** Type for config of a single ConfigurableLayout item. */\nexport interface Config {\n  /** Unique identifier in render region */\n  id: string;\n  /** Element to render */\n  content: JSX.Element;\n  /** Config for element */\n  layoutConfig: {\n    /** Responsive width option */\n    width: keyof typeof widthConfigOptions;\n    /**\n     * Fills remaining space if true, else does not grow beyond `width` value.\n     * @default true\n     */\n    fillAvailable?: boolean;\n    /** Flex basis (minimum fixed width) of element as:\n     *  - a numeric value to be applied in __pixels__\n     *  - a tuple of a numeric value and string unit\n     */\n    minWidth?: number | [number, 'px' | 'ch' | 'rem' | 'em'];\n  };\n}\n\nexport interface ConfigurableLayoutProps {\n  /** Array of configs for individual layout cells */\n  items: Config[];\n  /** Arrangement properties */\n  arrangement?: {\n    /** Defines the arrangement size of the given ConfigurableLayout.\n     * Used to determine what width to apply to the given item when the arrangement is applied,\n     * with the following mapping:\n     * - 'narrow' --> applies 'full' width\n     * - 'main' --> applies configured width\n     * - 'half' --> applies double the configured width, or 'full' width (whichever is smaller)\n     */\n    size: 'narrow' | 'main' | 'half';\n    /** Indicates when the ConfigurableLayout has wrapped to the full width of it's container */\n    hasWrapped: boolean;\n  };\n}\n"]}

package/lib/components/ConfigurableLayout/LayoutCell.d.ts

@@ -0,0 +1,6 @@
+import type { Config } from './ConfigurableLayout.types';
+declare const LayoutCell: ({ config }: {
+    config: Config;
+}) => JSX.Element | null;
+export default LayoutCell;
+//# sourceMappingURL=LayoutCell.d.ts.map

package/lib/components/ConfigurableLayout/LayoutCell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LayoutCell.d.ts","sourceRoot":"","sources":["../../../src/components/ConfigurableLayout/LayoutCell.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAoDzD,QAAA,MAAM,UAAU;YAA0B,MAAM;wBAoC/C,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/lib/components/ConfigurableLayout/LayoutCell.js

@@ -0,0 +1,64 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import styled, { css } from 'styled-components';
+import { Flex, defaultThemeProp } from '@pega/cosmos-react-core';
+import { StyledAppAnnouncement } from '../AppAnnouncement/AppAnnouncement';
+import widthConfigOptions from './options';
+import { itemMinWidth, cellGap } from './defaults';
+const StyledCell = styled.div(({ fillAvailable = true, percentageWidth, minWidth, theme }) => {
+    return css `
+      /* variables */
+      --marginGap: calc(${cellGap} * ${theme.base.spacing});
+      --totalMargin: calc(2 * var(--marginGap));
+      --percentageBasis: calc(${percentageWidth} - var(--totalMargin));
+      --maxWidth: calc(100% - var(--totalMargin));
+
+      /* styles */
+      flex-wrap: wrap;
+      flex-basis: var(--percentageBasis);
+      min-width: min(var(--maxWidth), ${minWidth || itemMinWidth});
+      max-width: var(--maxWidth);
+      margin-block-end: var(--totalMargin);
+      margin-inline: var(--marginGap);
+
+      ${!fillAvailable &&
+        css `
+        flex-grow: 0;
+      `}
+
+      ${StyledAppAnnouncement} {
+        align-self: stretch;
+      }
+
+      > * {
+        width: 100%;
+        height: auto;
+        overflow-x: auto;
+      }
+    `;
+});
+StyledCell.defaultProps = defaultThemeProp;
+const validWidthUnits = ['px', 'ch', 'rem', 'em'];
+const LayoutCell = ({ config }) => {
+    const layoutConfig = useMemo(() => config.layoutConfig, [config]);
+    const percentageWidth = useMemo(() => {
+        return widthConfigOptions[layoutConfig.width] || '100%';
+    }, [layoutConfig.width]);
+    const minWidth = useMemo(() => {
+        const value = layoutConfig.minWidth;
+        if (typeof value === 'number') {
+            return `${value}px`;
+        }
+        if (Array.isArray(value) &&
+            value.length >= 2 &&
+            typeof value[0] === 'number' &&
+            validWidthUnits.includes(value[1])) {
+            return `${value[0]}${value[1]}`;
+        }
+    }, [layoutConfig.minWidth]);
+    return config?.content ? (_jsx(Flex, { as: StyledCell, item: {
+            grow: 1
+        }, container: { justify: 'stretch', alignItems: 'start' }, fillAvailable: layoutConfig.fillAvailable, percentageWidth: percentageWidth, minWidth: minWidth, children: config.content })) : null;
+};
+export default LayoutCell;
+//# sourceMappingURL=LayoutCell.js.map

package/lib/components/ConfigurableLayout/LayoutCell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LayoutCell.js","sourceRoot":"","sources":["../../../src/components/ConfigurableLayout/LayoutCell.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAChC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAgB,MAAM,mBAAmB,CAAC;AAE9D,OAAO,EAAE,IAAI,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAEjE,OAAO,EAAE,qBAAqB,EAAE,MAAM,oCAAoC,CAAC;AAG3E,OAAO,kBAAkB,MAAM,WAAW,CAAC;AAC3C,OAAO,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAEnD,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAC3B,CAAC,EACC,aAAa,GAAG,IAAI,EACpB,eAAe,EACf,QAAQ,EACR,KAAK,EAMN,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;;0BAEY,OAAO,MAAM,KAAK,CAAC,IAAI,CAAC,OAAO;;gCAEzB,eAAe;;;;;;wCAMP,QAAQ,IAAI,YAAY;;;;;QAKxD,CAAC,aAAa;QAChB,GAAG,CAAA;;OAEF;;QAEC,qBAAqB;;;;;;;;;KASxB,CAAC;AACJ,CAAC,CACF,CAAC;AACF,UAAU,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE3C,MAAM,eAAe,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,CAAC;AAElD,MAAM,UAAU,GAAG,CAAC,EAAE,MAAM,EAAsB,EAAE,EAAE;IACpD,MAAM,YAAY,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,YAAY,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAClE,MAAM,eAAe,GAAG,OAAO,CAAC,GAAG,EAAE;QACnC,OAAO,kBAAkB,CAAC,YAAY,CAAC,KAAwC,CAAC,IAAI,MAAM,CAAC;IAC7F,CAAC,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC;IACzB,MAAM,QAAQ,GAAG,OAAO,CAAC,GAAG,EAAE;QAC5B,MAAM,KAAK,GAAG,YAAY,CAAC,QAAQ,CAAC;QAEpC,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;YAC7B,OAAO,GAAG,KAAK,IAAI,CAAC;SACrB;QAED,IACE,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC;YACpB,KAAK,CAAC,MAAM,IAAI,CAAC;YACjB,OAAO,KAAK,CAAC,CAAC,CAAC,KAAK,QAAQ;YAC5B,eAAe,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAClC;YACA,OAAO,GAAG,KAAK,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC;SACjC;IACH,CAAC,EAAE,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,CAAC;IAE5B,OAAO,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,CACvB,KAAC,IAAI,IACH,EAAE,EAAE,UAAU,EACd,IAAI,EAAE;YACJ,IAAI,EAAE,CAAC;SACR,EACD,SAAS,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,OAAO,EAAE,EACtD,aAAa,EAAE,YAAY,CAAC,aAAa,EACzC,eAAe,EAAE,eAAe,EAChC,QAAQ,EAAE,QAAQ,YAEjB,MAAM,CAAC,OAAO,GACV,CACR,CAAC,CAAC,CAAC,IAAI,CAAC;AACX,CAAC,CAAC;AAEF,eAAe,UAAU,CAAC","sourcesContent":["import { useMemo } from 'react';\nimport styled, { css, DefaultTheme } from 'styled-components';\n\nimport { Flex, defaultThemeProp } from '@pega/cosmos-react-core';\n\nimport { StyledAppAnnouncement } from '../AppAnnouncement/AppAnnouncement';\n\nimport type { Config } from './ConfigurableLayout.types';\nimport widthConfigOptions from './options';\nimport { itemMinWidth, cellGap } from './defaults';\n\nconst StyledCell = styled.div(\n  ({\n    fillAvailable = true,\n    percentageWidth,\n    minWidth,\n    theme\n  }: {\n    fillAvailable: boolean;\n    percentageWidth?: string;\n    minWidth?: string | undefined;\n    theme: DefaultTheme;\n  }) => {\n    return css`\n      /* variables */\n      --marginGap: calc(${cellGap} * ${theme.base.spacing});\n      --totalMargin: calc(2 * var(--marginGap));\n      --percentageBasis: calc(${percentageWidth} - var(--totalMargin));\n      --maxWidth: calc(100% - var(--totalMargin));\n\n      /* styles */\n      flex-wrap: wrap;\n      flex-basis: var(--percentageBasis);\n      min-width: min(var(--maxWidth), ${minWidth || itemMinWidth});\n      max-width: var(--maxWidth);\n      margin-block-end: var(--totalMargin);\n      margin-inline: var(--marginGap);\n\n      ${!fillAvailable &&\n      css`\n        flex-grow: 0;\n      `}\n\n      ${StyledAppAnnouncement} {\n        align-self: stretch;\n      }\n\n      > * {\n        width: 100%;\n        height: auto;\n        overflow-x: auto;\n      }\n    `;\n  }\n);\nStyledCell.defaultProps = defaultThemeProp;\n\nconst validWidthUnits = ['px', 'ch', 'rem', 'em'];\n\nconst LayoutCell = ({ config }: { config: Config }) => {\n  const layoutConfig = useMemo(() => config.layoutConfig, [config]);\n  const percentageWidth = useMemo(() => {\n    return widthConfigOptions[layoutConfig.width as keyof typeof widthConfigOptions] || '100%';\n  }, [layoutConfig.width]);\n  const minWidth = useMemo(() => {\n    const value = layoutConfig.minWidth;\n\n    if (typeof value === 'number') {\n      return `${value}px`;\n    }\n\n    if (\n      Array.isArray(value) &&\n      value.length >= 2 &&\n      typeof value[0] === 'number' &&\n      validWidthUnits.includes(value[1])\n    ) {\n      return `${value[0]}${value[1]}`;\n    }\n  }, [layoutConfig.minWidth]);\n\n  return config?.content ? (\n    <Flex\n      as={StyledCell}\n      item={{\n        grow: 1\n      }}\n      container={{ justify: 'stretch', alignItems: 'start' }}\n      fillAvailable={layoutConfig.fillAvailable}\n      percentageWidth={percentageWidth}\n      minWidth={minWidth}\n    >\n      {config.content}\n    </Flex>\n  ) : null;\n};\n\nexport default LayoutCell;\n"]}

package/lib/components/ConfigurableLayout/defaults.d.ts

@@ -0,0 +1,4 @@
+export declare const cellGap = 1;
+export declare const containerMinWidth = "450px";
+export declare const itemMinWidth = "225px";
+//# sourceMappingURL=defaults.d.ts.map

package/lib/components/ConfigurableLayout/defaults.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"defaults.d.ts","sourceRoot":"","sources":["../../../src/components/ConfigurableLayout/defaults.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO,IAAI,CAAC;AACzB,eAAO,MAAM,iBAAiB,UAAU,CAAC;AACzC,eAAO,MAAM,YAAY,UAAU,CAAC"}

package/lib/components/ConfigurableLayout/defaults.js

@@ -0,0 +1,4 @@
+export const cellGap = 1;
+export const containerMinWidth = '450px';
+export const itemMinWidth = '225px';
+//# sourceMappingURL=defaults.js.map

package/lib/components/ConfigurableLayout/defaults.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"defaults.js","sourceRoot":"","sources":["../../../src/components/ConfigurableLayout/defaults.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,CAAC;AACzB,MAAM,CAAC,MAAM,iBAAiB,GAAG,OAAO,CAAC;AACzC,MAAM,CAAC,MAAM,YAAY,GAAG,OAAO,CAAC","sourcesContent":["export const cellGap = 1;\nexport const containerMinWidth = '450px';\nexport const itemMinWidth = '225px';\n"]}

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

@@ -0,0 +1,4 @@
+export { default } from './ConfigurableLayout';
+export { default as useTrackWrappedRegions } from './useTrackWrappedRegions';
+export type { ConfigurableLayoutProps } from './ConfigurableLayout.types';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ConfigurableLayout/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAC7E,YAAY,EAAE,uBAAuB,EAAE,MAAM,4BAA4B,CAAC"}

package/lib/components/ConfigurableLayout/index.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ConfigurableLayout/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,0BAA0B,CAAC","sourcesContent":["export { default } from './ConfigurableLayout';\nexport { default as useTrackWrappedRegions } from './useTrackWrappedRegions';\nexport type { ConfigurableLayoutProps } from './ConfigurableLayout.types';\n"]}

package/lib/components/ConfigurableLayout/options.d.ts

@@ -0,0 +1,10 @@
+declare const widthConfigOptions: {
+    readonly '1/4': "25%";
+    readonly '1/3': "33.3%";
+    readonly '1/2': "50%";
+    readonly '2/3': "66.6%";
+    readonly '3/4': "75%";
+    readonly full: "100%";
+};
+export default widthConfigOptions;
+//# sourceMappingURL=options.d.ts.map

package/lib/components/ConfigurableLayout/options.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"options.d.ts","sourceRoot":"","sources":["../../../src/components/ConfigurableLayout/options.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,kBAAkB;;;;;;;CAOd,CAAC;AAEX,eAAe,kBAAkB,CAAC"}

package/lib/components/ConfigurableLayout/options.js

@@ -0,0 +1,10 @@
+const widthConfigOptions = {
+    '1/4': '25%',
+    '1/3': '33.3%',
+    '1/2': '50%',
+    '2/3': '66.6%',
+    '3/4': '75%',
+    full: '100%'
+};
+export default widthConfigOptions;
+//# sourceMappingURL=options.js.map

package/lib/components/ConfigurableLayout/options.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"options.js","sourceRoot":"","sources":["../../../src/components/ConfigurableLayout/options.ts"],"names":[],"mappings":"AAAA,MAAM,kBAAkB,GAAG;IACzB,KAAK,EAAE,KAAK;IACZ,KAAK,EAAE,OAAO;IACd,KAAK,EAAE,KAAK;IACZ,KAAK,EAAE,OAAO;IACd,KAAK,EAAE,KAAK;IACZ,IAAI,EAAE,MAAM;CACJ,CAAC;AAEX,eAAe,kBAAkB,CAAC","sourcesContent":["const widthConfigOptions = {\n  '1/4': '25%',\n  '1/3': '33.3%',\n  '1/2': '50%',\n  '2/3': '66.6%',\n  '3/4': '75%',\n  full: '100%'\n} as const;\n\nexport default widthConfigOptions;\n"]}