@pega/cosmos-react-build 3.0.0-dev.9.1 → 3.0.0-rc.1

package/lib/components/ObjectSelect/ObjectPicker.d.ts

@@ -1,11 +1,15 @@
-import { FC, Ref } from 'react';
-import { BaseProps, ForwardProps, MenuProps, MenuItemProps, ComboBoxProps, NoChildrenProp } from '@pega/cosmos-react-core';
+import { FunctionComponent, MouseEventHandler } from 'react';
+import { BaseProps, MenuProps, MenuItemProps, ComboBoxProps, NoChildrenProp, ButtonProps } from '@pega/cosmos-react-core';
 export interface ObjectPickerProps extends BaseProps, NoChildrenProp, Pick<ComboBoxProps, 'id' | 'label' | 'labelHidden' | 'required' | 'disabled' | 'readOnly' | 'name' | 'status' | 'info' | 'placeholder'> {
     items: MenuProps['items'];
     loading: MenuProps['loading'];
-    onSelect: (id: MenuItemProps['id']) => void;
-    ref?: Ref<HTMLDivElement>;
+    onSelect: MenuItemProps['onClick'];
+    createProps?: {
+        onClick?: MouseEventHandler<HTMLButtonElement>;
+        href?: ButtonProps['href'];
+    };
+    ref?: ComboBoxProps['ref'];
 }
-declare const ObjectPicker: FC<ObjectPickerProps & ForwardProps>;
+declare const ObjectPicker: FunctionComponent<ObjectPickerProps>;
 export default ObjectPicker;
 //# sourceMappingURL=ObjectPicker.d.ts.map

package/lib/components/ObjectSelect/ObjectPicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ObjectPicker.d.ts","sourceRoot":"","sources":["../../../src/components/ObjectSelect/ObjectPicker.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,EAAE,EAAkC,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5E,OAAO,EACL,SAAS,EAGT,YAAY,EACZ,SAAS,EACT,aAAa,EAEb,aAAa,EACb,cAAc,EACf,MAAM,yBAAyB,CAAC;AAEjC,MAAM,WAAW,iBACf,SAAQ,SAAS,EACf,cAAc,EACd,IAAI,CACF,aAAa,EACX,IAAI,GACJ,OAAO,GACP,aAAa,GACb,UAAU,GACV,UAAU,GACV,UAAU,GACV,MAAM,GACN,QAAQ,GACR,MAAM,GACN,aAAa,CAChB;IACH,KAAK,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;IAC1B,OAAO,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC9B,QAAQ,EAAE,CAAC,EAAE,EAAE,aAAa,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;IAC5C,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,QAAA,MAAM,YAAY,EAAE,EAAE,CAAC,iBAAiB,GAAG,YAAY,CAmCtD,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"ObjectPicker.d.ts","sourceRoot":"","sources":["../../../src/components/ObjectSelect/ObjectPicker.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,iBAAiB,EACjB,iBAAiB,EAClB,MAAM,OAAO,CAAC;AAEf,OAAO,EACL,SAAS,EAGT,SAAS,EACT,aAAa,EAEb,aAAa,EACb,cAAc,EAMd,WAAW,EAEZ,MAAM,yBAAyB,CAAC;AAMjC,MAAM,WAAW,iBACf,SAAQ,SAAS,EACf,cAAc,EACd,IAAI,CACF,aAAa,EACX,IAAI,GACJ,OAAO,GACP,aAAa,GACb,UAAU,GACV,UAAU,GACV,UAAU,GACV,MAAM,GACN,QAAQ,GACR,MAAM,GACN,aAAa,CAChB;IACH,KAAK,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;IAC1B,OAAO,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC9B,QAAQ,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IACnC,WAAW,CAAC,EAAE;QAAE,OAAO,CAAC,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;QAAC,IAAI,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAA;KAAE,CAAC;IAC7F,GAAG,CAAC,EAAE,aAAa,CAAC,KAAK,CAAC,CAAC;CAC5B;AAED,QAAA,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,CA6DtD,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/lib/components/ObjectSelect/ObjectPicker.js

@@ -1,9 +1,14 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useState, useMemo } from 'react';
-import { ComboBox, menuHelpers, createStringMatcher } from '@pega/cosmos-react-core';
-const ObjectPicker = forwardRef(({ items, onSelect, loading, ...restProps }, ref) => {
+import { ComboBox, menuHelpers, createStringMatcher, Flex, Button, Icon, useI18n, useConsolidatedRef, registerIcon } from '@pega/cosmos-react-core';
+import * as openIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/open.icon';
+import * as plusIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/plus.icon';
+registerIcon(openIcon, plusIcon);
+const ObjectPicker = forwardRef(({ items, onSelect, createProps, loading, ...restProps }, ref) => {
     const [filterValue, setFilterValue] = useState('');
     const filterRegex = filterValue ? createStringMatcher(filterValue) : undefined;
+    const t = useI18n();
+    const comboboxRef = useConsolidatedRef(ref);
     const itemsToRender = useMemo(() => {
         const newItems = filterValue
             ? menuHelpers.flatten(items).filter(({ primary }) => {
@@ -15,11 +20,20 @@ const ObjectPicker = forwardRef(({ items, onSelect, loading, ...restProps }, ref
             selected: item.items ? undefined : !!item.selected
         }));
     }, [filterValue, items]);
-    return (_jsx(ComboBox, { ...restProps, ref: ref, mode: 'single-select', value: filterValue, onChange: (e) => setFilterValue(e.target.value), onBlur: () => setFilterValue(''), menu: {
+    return (_jsx(ComboBox, { ...restProps, ref: comboboxRef, mode: 'single-select', value: filterValue, onChange: (e) => setFilterValue(e.target.value), onBlur: () => setFilterValue(''), menu: {
             items: itemsToRender,
             onItemClick: onSelect,
             accent: filterRegex,
-            loading
+            loading,
+            footer: createProps ? (_jsx(Flex, { container: { justify: 'start' }, children: _jsxs(Button, { type: 'button', variant: 'simple', onClick: createProps.onClick, ...(createProps.href && {
+                        href: createProps.href,
+                        target: '_blank',
+                        'aria-label': t('create_in_new_tab')
+                    }), children: [_jsx(Icon, { name: 'plus' }), t('create_new'), createProps.href && _jsx(Icon, { name: 'open' })] }) })) : undefined
+        }, onKeyDown: e => {
+            if (e.key === 'Tab') {
+                return false;
+            }
         } }));
 });
 export default ObjectPicker;

package/lib/components/ObjectSelect/ObjectPicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"ObjectPicker.js","sourceRoot":"","sources":["../../../src/components/ObjectSelect/ObjectPicker.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAM,QAAQ,EAAE,OAAO,EAAoB,MAAM,OAAO,CAAC;AAE5E,OAAO,EAEL,QAAQ,EACR,WAAW,EAIX,mBAAmB,EAGpB,MAAM,yBAAyB,CAAC;AAwBjC,MAAM,YAAY,GAAyC,UAAU,CACnE,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,SAAS,EAAE,EAAE,GAA6B,EAAE,EAAE;IAC5E,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IACnD,MAAM,WAAW,GAAG,WAAW,CAAC,CAAC,CAAC,mBAAmB,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IAE/E,MAAM,aAAa,GAAG,OAAO,CAAC,GAAG,EAAE;QACjC,MAAM,QAAQ,GAAG,WAAW;YAC1B,CAAC,CAAC,WAAW,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,OAAO,EAAiB,EAAE,EAAE;gBAC/D,OAAO,WAAW,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;YACpC,CAAC,CAAC;YACJ,CAAC,CAAC,KAAK,CAAC;QAEV,OAAO,WAAW,CAAC,OAAO,CAAC,QAAQ,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC;YAC5C,GAAG,IAAI;YACP,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ;SACnD,CAAC,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC,CAAC;IAEzB,OAAO,CACL,KAAC,QAAQ,OACH,SAAS,EACb,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,eAAe,EACpB,KAAK,EAAE,WAAW,EAClB,QAAQ,EAAE,CAAC,CAAgC,EAAE,EAAE,CAAC,cAAc,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAC9E,MAAM,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,EAAE,CAAC,EAChC,IAAI,EAAE;YACJ,KAAK,EAAE,aAAa;YACpB,WAAW,EAAE,QAAQ;YACrB,MAAM,EAAE,WAAW;YACnB,OAAO;SACR,GACD,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import { forwardRef, FC, useState, useMemo, ChangeEvent, Ref } from 'react';\n\nimport {\n  BaseProps,\n  ComboBox,\n  menuHelpers,\n  ForwardProps,\n  MenuProps,\n  MenuItemProps,\n  createStringMatcher,\n  ComboBoxProps,\n  NoChildrenProp\n} from '@pega/cosmos-react-core';\n\nexport interface ObjectPickerProps\n  extends BaseProps,\n    NoChildrenProp,\n    Pick<\n      ComboBoxProps,\n      | 'id'\n      | 'label'\n      | 'labelHidden'\n      | 'required'\n      | 'disabled'\n      | 'readOnly'\n      | 'name'\n      | 'status'\n      | 'info'\n      | 'placeholder'\n    > {\n  items: MenuProps['items'];\n  loading: MenuProps['loading'];\n  onSelect: (id: MenuItemProps['id']) => void;\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst ObjectPicker: FC<ObjectPickerProps & ForwardProps> = forwardRef(\n  ({ items, onSelect, loading, ...restProps }, ref: ObjectPickerProps['ref']) => {\n    const [filterValue, setFilterValue] = useState('');\n    const filterRegex = filterValue ? createStringMatcher(filterValue) : undefined;\n\n    const itemsToRender = useMemo(() => {\n      const newItems = filterValue\n        ? menuHelpers.flatten(items).filter(({ primary }: MenuItemProps) => {\n            return filterRegex?.test(primary);\n          })\n        : items;\n\n      return menuHelpers.mapTree(newItems, item => ({\n        ...item,\n        selected: item.items ? undefined : !!item.selected\n      }));\n    }, [filterValue, items]);\n\n    return (\n      <ComboBox\n        {...restProps}\n        ref={ref}\n        mode='single-select'\n        value={filterValue}\n        onChange={(e: ChangeEvent<HTMLInputElement>) => setFilterValue(e.target.value)}\n        onBlur={() => setFilterValue('')}\n        menu={{\n          items: itemsToRender,\n          onItemClick: onSelect,\n          accent: filterRegex,\n          loading\n        }}\n      />\n    );\n  }\n);\n\nexport default ObjectPicker;\n"]}
+{"version":3,"file":"ObjectPicker.js","sourceRoot":"","sources":["../../../src/components/ObjectSelect/ObjectPicker.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  useState,\n  useMemo,\n  ChangeEvent,\n  FunctionComponent,\n  MouseEventHandler\n} from 'react';\n\nimport {\n  BaseProps,\n  ComboBox,\n  menuHelpers,\n  MenuProps,\n  MenuItemProps,\n  createStringMatcher,\n  ComboBoxProps,\n  NoChildrenProp,\n  Flex,\n  Button,\n  Icon,\n  useI18n,\n  useConsolidatedRef,\n  ButtonProps,\n  registerIcon\n} from '@pega/cosmos-react-core';\nimport * as openIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/open.icon';\nimport * as plusIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/plus.icon';\n\nregisterIcon(openIcon, plusIcon);\n\nexport interface ObjectPickerProps\n  extends BaseProps,\n    NoChildrenProp,\n    Pick<\n      ComboBoxProps,\n      | 'id'\n      | 'label'\n      | 'labelHidden'\n      | 'required'\n      | 'disabled'\n      | 'readOnly'\n      | 'name'\n      | 'status'\n      | 'info'\n      | 'placeholder'\n    > {\n  items: MenuProps['items'];\n  loading: MenuProps['loading'];\n  onSelect: MenuItemProps['onClick'];\n  createProps?: { onClick?: MouseEventHandler<HTMLButtonElement>; href?: ButtonProps['href'] };\n  ref?: ComboBoxProps['ref'];\n}\n\nconst ObjectPicker: FunctionComponent<ObjectPickerProps> = forwardRef(\n  ({ items, onSelect, createProps, loading, ...restProps }, ref: ObjectPickerProps['ref']) => {\n    const [filterValue, setFilterValue] = useState('');\n    const filterRegex = filterValue ? createStringMatcher(filterValue) : undefined;\n\n    const t = useI18n();\n    const comboboxRef = useConsolidatedRef(ref);\n\n    const itemsToRender = useMemo(() => {\n      const newItems = filterValue\n        ? menuHelpers.flatten(items).filter(({ primary }: MenuItemProps) => {\n            return filterRegex?.test(primary);\n          })\n        : items;\n\n      return menuHelpers.mapTree(newItems, item => ({\n        ...item,\n        selected: item.items ? undefined : !!item.selected\n      }));\n    }, [filterValue, items]);\n\n    return (\n      <ComboBox\n        {...restProps}\n        ref={comboboxRef}\n        mode='single-select'\n        value={filterValue}\n        onChange={(e: ChangeEvent<HTMLInputElement>) => setFilterValue(e.target.value)}\n        onBlur={() => setFilterValue('')}\n        menu={{\n          items: itemsToRender,\n          onItemClick: onSelect,\n          accent: filterRegex,\n          loading,\n          footer: createProps ? (\n            <Flex container={{ justify: 'start' }}>\n              <Button\n                type='button'\n                variant='simple'\n                onClick={createProps.onClick}\n                {...(createProps.href && {\n                  href: createProps.href,\n                  target: '_blank',\n                  'aria-label': t('create_in_new_tab')\n                })}\n              >\n                <Icon name='plus' />\n                {t('create_new')}\n                {createProps.href && <Icon name='open' />}\n              </Button>\n            </Flex>\n          ) : undefined\n        }}\n        onKeyDown={e => {\n          if (e.key === 'Tab') {\n            return false;\n          }\n        }}\n      />\n    );\n  }\n);\n\nexport default ObjectPicker;\n"]}

package/lib/components/ObjectSelect/ObjectSelect.d.ts

@@ -1,8 +1,9 @@
-import { FunctionComponent, Ref } from 'react';
-import { BaseProps, ForwardProps, FormControlProps, MenuItemProps, NoChildrenProp, MenuProps } from '@pega/cosmos-react-core';
+import { Ref } from 'react';
+import { BaseProps, FormControlProps, MenuItemProps, NoChildrenProp, MenuProps, ForwardProps } from '@pega/cosmos-react-core';
 import { ObjectPickerProps } from './ObjectPicker';
 import { ObjectSummaryProps } from './ObjectSummary';
-export interface ObjectSelectProps extends BaseProps, NoChildrenProp, Omit<FormControlProps, 'value'> {
+import { CreateModalActionProps, UseCreateModalConfig } from './useCreateModal';
+export interface ObjectSelectProps<P extends object = object> extends BaseProps, NoChildrenProp, Omit<FormControlProps, 'value'> {
     /** An array of MenuItemProps to be shown in the ObjectPicker menu. */
     items: MenuProps['items'];
     /** Boolean to trigger loading state for combobox menu */
@@ -12,16 +13,20 @@ export interface ObjectSelectProps extends BaseProps, NoChildrenProp, Omit<FormC
     /** Props for configuration popover */
     configuration?: ObjectSummaryProps['configuration'];
     /** Callback fired when a new item is selected and on clearing the selected item. */
-    onChange: (id: MenuItemProps['id']) => void;
+    onChange: MenuItemProps['onClick'];
     /** Callback fired when the preview in the ObjectSummary link is clicked. */
     onPreview?: (id: MenuItemProps['id'], e: {
         href: string;
     }) => void;
     /** Callback fired on click of the link inside summary item */
     onLinkClick?: ObjectSummaryProps['onLinkClick'];
+    /** New object creation form options or a link */
+    createConfiguration?: (UseCreateModalConfig<P> & CreateModalActionProps<P>) | {
+        href: string;
+    };
     /** Ref placed on the element. */
     ref?: Ref<HTMLDivElement>;
 }
-declare const ObjectSelect: FunctionComponent<ObjectSelectProps & ForwardProps>;
+declare const ObjectSelect: <P extends object = object>(props: ObjectSelectProps<P> & ForwardProps) => JSX.Element | null;
 export default ObjectSelect;
 //# sourceMappingURL=ObjectSelect.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ObjectSelect.d.ts","sourceRoot":"","sources":["../../../src/components/ObjectSelect/ObjectSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAE,GAAG,EAAoB,MAAM,OAAO,CAAC;AAE7E,OAAO,EACL,SAAS,EACT,YAAY,EACZ,gBAAgB,EAChB,aAAa,EACb,cAAc,EAEd,SAAS,EACV,MAAM,yBAAyB,CAAC;AAEjC,OAAqB,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACjE,OAAsB,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAEpE,MAAM,WAAW,iBACf,SAAQ,SAAS,EACf,cAAc,EACd,IAAI,CAAC,gBAAgB,EAAE,OAAO,CAAC;IACjC,sEAAsE;IACtE,KAAK,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;IAC1B,yDAAyD;IACzD,OAAO,CAAC,EAAE,iBAAiB,CAAC,SAAS,CAAC,CAAC;IACvC,sCAAsC;IACtC,KAAK,CAAC,EAAE,kBAAkB,CAAC,OAAO,CAAC,CAAC;IACpC,sCAAsC;IACtC,aAAa,CAAC,EAAE,kBAAkB,CAAC,eAAe,CAAC,CAAC;IACpD,oFAAoF;IACpF,QAAQ,EAAE,CAAC,EAAE,EAAE,aAAa,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;IAC5C,4EAA4E;IAC5E,SAAS,CAAC,EAAE,CAAC,EAAE,EAAE,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACnE,8DAA8D;IAC9D,WAAW,CAAC,EAAE,kBAAkB,CAAC,aAAa,CAAC,CAAC;IAChD,iCAAiC;IACjC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,QAAA,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,GAAG,YAAY,CA2DrE,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"ObjectSelect.d.ts","sourceRoot":"","sources":["../../../src/components/ObjectSelect/ObjectSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+B,GAAG,EAA+B,MAAM,OAAO,CAAC;AAEtF,OAAO,EACL,SAAS,EACT,gBAAgB,EAChB,aAAa,EACb,cAAc,EACd,SAAS,EACT,YAAY,EAGb,MAAM,yBAAyB,CAAC;AAEjC,OAAqB,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACjE,OAAsB,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AACpE,OAAuB,EAAE,sBAAsB,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAEhG,MAAM,WAAW,iBAAiB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,CAC1D,SAAQ,SAAS,EACf,cAAc,EACd,IAAI,CAAC,gBAAgB,EAAE,OAAO,CAAC;IACjC,sEAAsE;IACtE,KAAK,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;IAC1B,yDAAyD;IACzD,OAAO,CAAC,EAAE,iBAAiB,CAAC,SAAS,CAAC,CAAC;IACvC,sCAAsC;IACtC,KAAK,CAAC,EAAE,kBAAkB,CAAC,OAAO,CAAC,CAAC;IACpC,sCAAsC;IACtC,aAAa,CAAC,EAAE,kBAAkB,CAAC,eAAe,CAAC,CAAC;IACpD,oFAAoF;IACpF,QAAQ,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IACnC,4EAA4E;IAC5E,SAAS,CAAC,EAAE,CAAC,EAAE,EAAE,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACnE,8DAA8D;IAC9D,WAAW,CAAC,EAAE,kBAAkB,CAAC,aAAa,CAAC,CAAC;IAChD,iDAAiD;IACjD,mBAAmB,CAAC,EAAE,CAAC,oBAAoB,CAAC,CAAC,CAAC,GAAG,sBAAsB,CAAC,CAAC,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;IAC/F,iCAAiC;IACjC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,QAAA,MAAM,YAAY,6EAmF8D,WAAW,GAAG,IAAI,CAAC;AAEnG,eAAe,YAAY,CAAC"}

package/lib/components/ObjectSelect/ObjectSelect.js

@@ -1,25 +1,41 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef, useRef, useState } from 'react';
-import { useAfterInitialEffect } from '@pega/cosmos-react-core';
+import { forwardRef, useEffect, useRef, useState } from 'react';
+import { useAfterInitialEffect, hasProp } from '@pega/cosmos-react-core';
 import ObjectPicker from './ObjectPicker';
 import ObjectSummary from './ObjectSummary';
-const ObjectSelect = forwardRef(({ items, value, configuration, disabled, onChange, onPreview, onLinkClick, loading, ...restProps }, ref) => {
+import useCreateModal from './useCreateModal';
+const ObjectSelect = forwardRef(({ items, value, configuration, disabled, onChange, onPreview, onLinkClick, loading, createConfiguration, ...restProps }, ref) => {
     const [mode, setMode] = useState(value ? 'summary' : 'picker');
     const objectPickerRef = useRef(null);
     const objectSummaryRef = useRef(null);
+    const isCreateModalConfig = createConfiguration && hasProp(createConfiguration, 'renderer');
     useAfterInitialEffect(() => {
         const element = mode === 'summary'
             ? objectSummaryRef.current?.querySelector('a')
             : objectPickerRef.current?.querySelector('input');
         element?.focus();
     }, [mode]);
-    return (_jsx("div", { ref: ref, children: value ? (_jsx(ObjectSummary, { ...restProps, value: value, disabled: disabled, onDelete: () => {
+    const { renderModal } = useCreateModal(isCreateModalConfig
+        ? {
+            ...createConfiguration,
+            onAfterClose: () => {
+                createConfiguration.onAfterClose?.();
+                setMode('summary');
+            }
+        }
+        : undefined);
+    useEffect(() => {
+        if (mode === 'create' && isCreateModalConfig) {
+            renderModal(createConfiguration);
+        }
+    }, [mode, createConfiguration]);
+    return (_jsx("div", { ref: ref, children: value ? (_jsx(ObjectSummary, { ...restProps, value: value, disabled: disabled, onDelete: e => {
                 setMode('picker');
-                onChange('');
-            }, ref: objectSummaryRef, configuration: configuration, onPreview: e => onPreview?.(value.id, e), onLinkClick: onLinkClick })) : (_jsx(ObjectPicker, { ...restProps, loading: loading, disabled: disabled, ref: objectPickerRef, items: items, onSelect: id => {
+                onChange?.('', e);
+            }, ref: objectSummaryRef, configuration: configuration, onPreview: e => onPreview?.(value.id, e), onLinkClick: onLinkClick })) : (_jsx(ObjectPicker, { ...restProps, loading: loading, disabled: disabled, ref: objectPickerRef, items: items, onSelect: (id, e) => {
                 setMode('summary');
-                onChange(id);
-            } })) }));
+                onChange?.(id, e);
+            }, createProps: isCreateModalConfig ? { onClick: () => setMode('create') } : createConfiguration })) }));
 });
 export default ObjectSelect;
 //# sourceMappingURL=ObjectSelect.js.map

package/lib/components/ObjectSelect/ObjectSelect.js.map

@@ -1 +1 @@
-{"version":3,"file":"ObjectSelect.js","sourceRoot":"","sources":["../../../src/components/ObjectSelect/ObjectSelect.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA0B,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE7E,OAAO,EAML,qBAAqB,EAEtB,MAAM,yBAAyB,CAAC;AAEjC,OAAO,YAAmC,MAAM,gBAAgB,CAAC;AACjE,OAAO,aAAqC,MAAM,iBAAiB,CAAC;AAwBpE,MAAM,YAAY,GAAwD,UAAU,CAClF,CACE,EACE,KAAK,EACL,KAAK,EACL,aAAa,EACb,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,WAAW,EACX,OAAO,EACP,GAAG,SAAS,EACb,EACD,GAA6B,EAC7B,EAAE;IACF,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAuB,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC;IACrF,MAAM,eAAe,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACrD,MAAM,gBAAgB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAEtD,qBAAqB,CAAC,GAAG,EAAE;QACzB,MAAM,OAAO,GACX,IAAI,KAAK,SAAS;YAChB,CAAC,CAAC,gBAAgB,CAAC,OAAO,EAAE,aAAa,CAAC,GAAG,CAAC;YAC9C,CAAC,CAAC,eAAe,CAAC,OAAO,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;QACtD,OAAO,EAAE,KAAK,EAAE,CAAC;IACnB,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX,OAAO,CACL,cAAK,GAAG,EAAE,GAAG,YACV,KAAK,CAAC,CAAC,CAAC,CACP,KAAC,aAAa,OACR,SAAS,EACb,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,GAAG,EAAE;gBACb,OAAO,CAAC,QAAQ,CAAC,CAAC;gBAClB,QAAQ,CAAC,EAAE,CAAC,CAAC;YACf,CAAC,EACD,GAAG,EAAE,gBAAgB,EACrB,aAAa,EAAE,aAAa,EAC5B,SAAS,EAAE,CAAC,CAAC,EAAE,CAAC,SAAS,EAAE,CAAC,KAAK,CAAC,EAAE,EAAE,CAAC,CAAC,EACxC,WAAW,EAAE,WAAW,GACxB,CACH,CAAC,CAAC,CAAC,CACF,KAAC,YAAY,OACP,SAAS,EACb,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAE,eAAe,EACpB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,EAAE,CAAC,EAAE;gBACb,OAAO,CAAC,SAAS,CAAC,CAAC;gBACnB,QAAQ,CAAC,EAAE,CAAC,CAAC;YACf,CAAC,GACD,CACH,GACG,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, Ref, useRef, useState } from 'react';\n\nimport {\n  BaseProps,\n  ForwardProps,\n  FormControlProps,\n  MenuItemProps,\n  NoChildrenProp,\n  useAfterInitialEffect,\n  MenuProps\n} from '@pega/cosmos-react-core';\n\nimport ObjectPicker, { ObjectPickerProps } from './ObjectPicker';\nimport ObjectSummary, { ObjectSummaryProps } from './ObjectSummary';\n\nexport interface ObjectSelectProps\n  extends BaseProps,\n    NoChildrenProp,\n    Omit<FormControlProps, 'value'> {\n  /** An array of MenuItemProps to be shown in the ObjectPicker menu. */\n  items: MenuProps['items'];\n  /** Boolean to trigger loading state for combobox menu */\n  loading?: ObjectPickerProps['loading'];\n  /** The value for the ObjectSummary */\n  value?: ObjectSummaryProps['value'];\n  /** Props for configuration popover */\n  configuration?: ObjectSummaryProps['configuration'];\n  /** Callback fired when a new item is selected and on clearing the selected item. */\n  onChange: (id: MenuItemProps['id']) => void;\n  /** Callback fired when the preview in the ObjectSummary link is clicked. */\n  onPreview?: (id: MenuItemProps['id'], e: { href: string }) => void;\n  /** Callback fired on click of the link inside summary item */\n  onLinkClick?: ObjectSummaryProps['onLinkClick'];\n  /** Ref placed on the element. */\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst ObjectSelect: FunctionComponent<ObjectSelectProps & ForwardProps> = forwardRef(\n  (\n    {\n      items,\n      value,\n      configuration,\n      disabled,\n      onChange,\n      onPreview,\n      onLinkClick,\n      loading,\n      ...restProps\n    },\n    ref: ObjectSelectProps['ref']\n  ) => {\n    const [mode, setMode] = useState<'picker' | 'summary'>(value ? 'summary' : 'picker');\n    const objectPickerRef = useRef<HTMLDivElement>(null);\n    const objectSummaryRef = useRef<HTMLDivElement>(null);\n\n    useAfterInitialEffect(() => {\n      const element =\n        mode === 'summary'\n          ? objectSummaryRef.current?.querySelector('a')\n          : objectPickerRef.current?.querySelector('input');\n      element?.focus();\n    }, [mode]);\n\n    return (\n      <div ref={ref}>\n        {value ? (\n          <ObjectSummary\n            {...restProps}\n            value={value}\n            disabled={disabled}\n            onDelete={() => {\n              setMode('picker');\n              onChange('');\n            }}\n            ref={objectSummaryRef}\n            configuration={configuration}\n            onPreview={e => onPreview?.(value.id, e)}\n            onLinkClick={onLinkClick}\n          />\n        ) : (\n          <ObjectPicker\n            {...restProps}\n            loading={loading}\n            disabled={disabled}\n            ref={objectPickerRef}\n            items={items}\n            onSelect={id => {\n              setMode('summary');\n              onChange(id);\n            }}\n          />\n        )}\n      </div>\n    );\n  }\n);\n\nexport default ObjectSelect;\n"]}
+{"version":3,"file":"ObjectSelect.js","sourceRoot":"","sources":["../../../src/components/ObjectSelect/ObjectSelect.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, PropsWithoutRef, Ref, useEffect, useRef, useState } from 'react';\n\nimport {\n  BaseProps,\n  FormControlProps,\n  MenuItemProps,\n  NoChildrenProp,\n  MenuProps,\n  ForwardProps,\n  useAfterInitialEffect,\n  hasProp\n} from '@pega/cosmos-react-core';\n\nimport ObjectPicker, { ObjectPickerProps } from './ObjectPicker';\nimport ObjectSummary, { ObjectSummaryProps } from './ObjectSummary';\nimport useCreateModal, { CreateModalActionProps, UseCreateModalConfig } from './useCreateModal';\n\nexport interface ObjectSelectProps<P extends object = object>\n  extends BaseProps,\n    NoChildrenProp,\n    Omit<FormControlProps, 'value'> {\n  /** An array of MenuItemProps to be shown in the ObjectPicker menu. */\n  items: MenuProps['items'];\n  /** Boolean to trigger loading state for combobox menu */\n  loading?: ObjectPickerProps['loading'];\n  /** The value for the ObjectSummary */\n  value?: ObjectSummaryProps['value'];\n  /** Props for configuration popover */\n  configuration?: ObjectSummaryProps['configuration'];\n  /** Callback fired when a new item is selected and on clearing the selected item. */\n  onChange: MenuItemProps['onClick'];\n  /** Callback fired when the preview in the ObjectSummary link is clicked. */\n  onPreview?: (id: MenuItemProps['id'], e: { href: string }) => void;\n  /** Callback fired on click of the link inside summary item */\n  onLinkClick?: ObjectSummaryProps['onLinkClick'];\n  /** New object creation form options or a link */\n  createConfiguration?: (UseCreateModalConfig<P> & CreateModalActionProps<P>) | { href: string };\n  /** Ref placed on the element. */\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst ObjectSelect = forwardRef(\n  <P extends object = object>(\n    {\n      items,\n      value,\n      configuration,\n      disabled,\n      onChange,\n      onPreview,\n      onLinkClick,\n      loading,\n      createConfiguration,\n      ...restProps\n    }: PropsWithoutRef<ObjectSelectProps<P>> & ForwardProps,\n    ref: ObjectSelectProps['ref']\n  ) => {\n    const [mode, setMode] = useState<'picker' | 'summary' | 'create'>(value ? 'summary' : 'picker');\n    const objectPickerRef = useRef<HTMLDivElement>(null);\n    const objectSummaryRef = useRef<HTMLDivElement>(null);\n\n    const isCreateModalConfig = createConfiguration && hasProp(createConfiguration, 'renderer');\n\n    useAfterInitialEffect(() => {\n      const element =\n        mode === 'summary'\n          ? objectSummaryRef.current?.querySelector('a')\n          : objectPickerRef.current?.querySelector('input');\n      element?.focus();\n    }, [mode]);\n\n    const { renderModal } = useCreateModal(\n      isCreateModalConfig\n        ? {\n            ...createConfiguration,\n            onAfterClose: () => {\n              createConfiguration.onAfterClose?.();\n              setMode('summary');\n            }\n          }\n        : undefined\n    );\n\n    useEffect(() => {\n      if (mode === 'create' && isCreateModalConfig) {\n        renderModal(createConfiguration);\n      }\n    }, [mode, createConfiguration]);\n\n    return (\n      <div ref={ref}>\n        {value ? (\n          <ObjectSummary\n            {...restProps}\n            value={value}\n            disabled={disabled}\n            onDelete={e => {\n              setMode('picker');\n              onChange?.('', e);\n            }}\n            ref={objectSummaryRef}\n            configuration={configuration}\n            onPreview={e => onPreview?.(value.id, e)}\n            onLinkClick={onLinkClick}\n          />\n        ) : (\n          <ObjectPicker\n            {...restProps}\n            loading={loading}\n            disabled={disabled}\n            ref={objectPickerRef}\n            items={items}\n            onSelect={(id, e) => {\n              setMode('summary');\n              onChange?.(id, e);\n            }}\n            createProps={\n              isCreateModalConfig ? { onClick: () => setMode('create') } : createConfiguration\n            }\n          />\n        )}\n      </div>\n    );\n  }\n) as <P extends object = object>(props: ObjectSelectProps<P> & ForwardProps) => JSX.Element | null;\n\nexport default ObjectSelect;\n"]}

package/lib/components/ObjectSelect/ObjectSummary.d.ts

@@ -1,16 +1,18 @@
-import { FC, Ref, PropsWithoutRef } from 'react';
-import { BaseProps, ForwardProps, FormControlProps, MenuItemProps } from '@pega/cosmos-react-core';
-import { ObjectConfigProps } from './ObjectConfig';
+import { FC, Ref, PropsWithoutRef, MouseEvent } from 'react';
+import { BaseProps, ForwardProps, FormControlProps, MenuItemProps, DialogProps, OmitStrict } from '@pega/cosmos-react-core';
 interface ObjectSummaryValueProps {
     id: MenuItemProps['id'];
     primary: MenuItemProps['primary'];
     href: string;
     meta?: string;
 }
+interface ObjectConfigProps extends OmitStrict<DialogProps, 'target'> {
+    label: string;
+}
 export interface ObjectSummaryProps extends BaseProps, Omit<FormControlProps, 'value'> {
     value: ObjectSummaryValueProps;
     configuration?: ObjectConfigProps;
-    onDelete: () => void;
+    onDelete: (e: MouseEvent<HTMLButtonElement>) => void;
     onPreview?: (e: {
         href: string;
     }) => void;

package/lib/components/ObjectSelect/ObjectSummary.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ObjectSummary.d.ts","sourceRoot":"","sources":["../../../src/components/ObjectSelect/ObjectSummary.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAc,GAAG,EAAE,eAAe,EAAY,MAAM,OAAO,CAAC;AAGvE,OAAO,EACL,SAAS,EAIT,YAAY,EAGZ,gBAAgB,EAChB,aAAa,EAYd,MAAM,yBAAyB,CAAC;AAIjC,OAAqB,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAIjE,UAAU,uBAAuB;IAC/B,EAAE,EAAE,aAAa,CAAC,IAAI,CAAC,CAAC;IACxB,OAAO,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IAClC,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,kBAAmB,SAAQ,SAAS,EAAE,IAAI,CAAC,gBAAgB,EAAE,OAAO,CAAC;IACpF,KAAK,EAAE,uBAAuB,CAAC;IAC/B,aAAa,CAAC,EAAE,iBAAiB,CAAC;IAClC,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC1C,WAAW,CAAC,EAAE,CAAC,EAAE,EAAE,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAC/D,GAAG,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC1B;AAaD,QAAA,MAAM,aAAa,EAAE,EAAE,CAAC,eAAe,CAAC,kBAAkB,CAAC,GAAG,YAAY,CAiHzE,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"ObjectSummary.d.ts","sourceRoot":"","sources":["../../../src/components/ObjectSelect/ObjectSummary.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAc,GAAG,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAGzE,OAAO,EACL,SAAS,EAIT,YAAY,EAGZ,gBAAgB,EAChB,aAAa,EASb,WAAW,EACX,UAAU,EAEX,MAAM,yBAAyB,CAAC;AAMjC,UAAU,uBAAuB;IAC/B,EAAE,EAAE,aAAa,CAAC,IAAI,CAAC,CAAC;IACxB,OAAO,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IAClC,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,UAAU,iBAAkB,SAAQ,UAAU,CAAC,WAAW,EAAE,QAAQ,CAAC;IACnE,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,kBAAmB,SAAQ,SAAS,EAAE,IAAI,CAAC,gBAAgB,EAAE,OAAO,CAAC;IACpF,KAAK,EAAE,uBAAuB,CAAC;IAC/B,aAAa,CAAC,EAAE,iBAAiB,CAAC;IAClC,QAAQ,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IACrD,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC1C,WAAW,CAAC,EAAE,CAAC,EAAE,EAAE,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAC/D,GAAG,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC1B;AAsDD,QAAA,MAAM,aAAa,EAAE,EAAE,CAAC,eAAe,CAAC,kBAAkB,CAAC,GAAG,YAAY,CAgFzE,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/lib/components/ObjectSelect/ObjectSummary.js

@@ -1,50 +1,45 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useState } from 'react';
-import styled from 'styled-components';
-import { SummaryItem, Button, Icon, StyledFormControl, FormField, useI18n, registerIcon, Text, Popover, useAfterInitialEffect, useConsolidatedRef, useDirection, useElement, useFocusTrap, Link, useEvent } from '@pega/cosmos-react-core';
+import { forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+import { SummaryItem, Button, Icon, StyledFormControl, FormField, useI18n, registerIcon, Text, useDirection, useElement, Link, Dialog, defaultThemeProp, StyledLink } from '@pega/cosmos-react-core';
 import * as times from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';
 import * as gear from '@pega/cosmos-react-core/lib/components/Icon/icons/gear.icon';
-import ObjectConfig from './ObjectConfig';
 registerIcon(times, gear);
-const StyledObjectSummary = styled(StyledFormControl) `
-  padding: ${({ meta }) => (meta ? '0.5rem' : '0 0.5rem')};
-`;
+const StyledObjectSummary = styled(StyledFormControl)(({ theme: { base: { spacing, 'hit-area': { 'mouse-min': hitAreaMouse, 'finger-min': hitAreaFinger }, shadow: { focus } } }, meta }) => {
+    return css `
+      padding-block: ${meta ? spacing : '0'};
+      padding-inline-start: ${spacing};
+      min-height: ${hitAreaMouse};
+
+      ${StyledLink}:focus {
+        box-shadow: inset ${focus};
+      }
+
+      @media (pointer: coarse) {
+        min-height: ${hitAreaFinger};
+      }
+    `;
+});
+StyledObjectSummary.defaultProps = defaultThemeProp;
 const StyledMetaText = styled(Text) `
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
   overflow: hidden;
 `;
+const ScrollContainer = styled.div(({ theme: { base: { spacing } } }) => {
+    return css `
+      max-height: 12rem;
+      overflow: auto;
+      padding: calc(0.25 * ${spacing});
+    `;
+});
+ScrollContainer.defaultProps = defaultThemeProp;
 const ObjectSummary = forwardRef(({ value, configuration, label, disabled, status, readOnly, onDelete, onPreview, onLinkClick, ...restProps }, ref) => {
-    const [open, setOpen] = useState(false);
     const [buttonEl, setButtonEl] = useElement();
-    const [popoverEl, setPopoverEl] = useElement();
-    const popoverRef = useConsolidatedRef(configuration?.ref, setPopoverEl);
     const t = useI18n();
     const { rtl } = useDirection();
-    const openPopover = () => {
-        configuration?.onBeforeOpen?.();
-        setOpen(true);
-    };
-    const dismissPopover = (id) => {
-        setOpen(false);
-        configuration?.onAfterClose?.(id);
-    };
-    const onKeydown = (e) => {
-        const { key } = e;
-        if (key === 'Escape') {
-            setOpen(false);
-        }
-    };
-    useEvent('keydown', onKeydown, { target: popoverEl });
-    useFocusTrap(popoverRef);
-    useAfterInitialEffect(() => {
-        if (open)
-            popoverEl?.querySelector('button')?.focus();
-        else
-            buttonEl?.focus();
-    }, [open, popoverEl]);
-    return (_jsx(FormField, { ...restProps, ref: ref, label: label, status: status, children: _jsx(SummaryItem, { as: StyledObjectSummary, status: status, meta: value.meta, primary: _jsx(Link, { href: value.href, "aria-label": `${label} ${value.primary}`, previewable: true, onPreview: onPreview, onClick: onLinkClick ? (e) => onLinkClick(value.id, e) : undefined, children: value.primary }), secondary: value.meta && _jsx(StyledMetaText, { variant: 'secondary', children: value.meta }), actions: _jsxs(_Fragment, { children: [configuration && (_jsx(Button, { ref: setButtonEl, label: configuration?.label, icon: true, variant: 'simple', onClick: openPopover, children: _jsx(Icon, { name: 'gear' }) })), !readOnly && (_jsx(Button, { disabled: disabled, label: t('clear_object_summary', [String(label)]), icon: true, variant: 'simple', onClick: onDelete, children: _jsx(Icon, { name: 'times' }) })), _jsx(Popover, { ref: popoverRef, placement: rtl ? 'bottom-end' : 'bottom-start', hideOnTargetHidden: true, show: open, target: buttonEl, children: configuration && open && (_jsx(ObjectConfig, { ...configuration, disabled: disabled, dismissPopover: dismissPopover })) })] }) }) }));
+    return (_jsx(FormField, { ...restProps, ref: ref, label: label, status: status, children: _jsx(SummaryItem, { as: StyledObjectSummary, status: status, meta: value.meta, readOnly: readOnly, overflowStrategy: 'ellipsis', primary: _jsx(Link, { href: value.href, "aria-label": `${label} ${value.primary}`, previewable: true, onPreview: onPreview, onClick: onLinkClick ? (e) => onLinkClick(value.id, e) : undefined, children: value.primary }), secondary: value.meta && _jsx(StyledMetaText, { variant: 'secondary', children: value.meta }), actions: _jsxs(_Fragment, { children: [configuration && (_jsx(Button, { ref: setButtonEl, label: configuration?.label, icon: true, variant: 'simple', children: _jsx(Icon, { name: 'gear' }) })), !readOnly && (_jsx(Button, { disabled: disabled, label: t('clear_object_summary', [String(label)]), icon: true, variant: 'simple', onClick: onDelete, children: _jsx(Icon, { name: 'times' }) })), configuration && (_jsx(Dialog, { heading: configuration.heading, placement: rtl ? 'bottom-end' : 'bottom-start', target: buttonEl, onOpen: configuration.onOpen, onClose: configuration.onClose, onSubmit: readOnly || disabled ? undefined : configuration?.onSubmit, loading: configuration.loading, ref: configuration.ref, children: _jsx(ScrollContainer, { children: configuration?.children }) }))] }) }) }));
 });
 export default ObjectSummary;
 //# sourceMappingURL=ObjectSummary.js.map

package/lib/components/ObjectSelect/ObjectSummary.js.map

@@ -1 +1 @@
-{"version":3,"file":"ObjectSummary.js","sourceRoot":"","sources":["../../../src/components/ObjectSelect/ObjectSummary.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC, forwardRef, Ref, PropsWithoutRef, useState } from 'react';\nimport styled from 'styled-components';\n\nimport {\n  BaseProps,\n  SummaryItem,\n  Button,\n  Icon,\n  ForwardProps,\n  StyledFormControl,\n  FormField,\n  FormControlProps,\n  MenuItemProps,\n  useI18n,\n  registerIcon,\n  Text,\n  Popover,\n  useAfterInitialEffect,\n  useConsolidatedRef,\n  useDirection,\n  useElement,\n  useFocusTrap,\n  Link,\n  useEvent\n} from '@pega/cosmos-react-core';\nimport * as times from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';\nimport * as gear from '@pega/cosmos-react-core/lib/components/Icon/icons/gear.icon';\n\nimport ObjectConfig, { ObjectConfigProps } from './ObjectConfig';\n\nregisterIcon(times, gear);\n\ninterface ObjectSummaryValueProps {\n  id: MenuItemProps['id'];\n  primary: MenuItemProps['primary'];\n  href: string;\n  meta?: string;\n}\n\nexport interface ObjectSummaryProps extends BaseProps, Omit<FormControlProps, 'value'> {\n  value: ObjectSummaryValueProps;\n  configuration?: ObjectConfigProps;\n  onDelete: () => void;\n  onPreview?: (e: { href: string }) => void;\n  onLinkClick?: (id: MenuItemProps['id'], e: MouseEvent) => void;\n  ref: Ref<HTMLDivElement>;\n}\n\nconst StyledObjectSummary = styled(StyledFormControl)<{ meta: string }>`\n  padding: ${({ meta }) => (meta ? '0.5rem' : '0 0.5rem')};\n`;\n\nconst StyledMetaText = styled(Text)`\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 2;\n  overflow: hidden;\n`;\n\nconst ObjectSummary: FC<PropsWithoutRef<ObjectSummaryProps> & ForwardProps> = forwardRef(\n  (\n    {\n      value,\n      configuration,\n      label,\n      disabled,\n      status,\n      readOnly,\n      onDelete,\n      onPreview,\n      onLinkClick,\n      ...restProps\n    },\n    ref: ObjectSummaryProps['ref']\n  ) => {\n    const [open, setOpen] = useState(false);\n    const [buttonEl, setButtonEl] = useElement<HTMLButtonElement>();\n    const [popoverEl, setPopoverEl] = useElement<HTMLElement>();\n    const popoverRef = useConsolidatedRef<HTMLDivElement>(configuration?.ref, setPopoverEl);\n    const t = useI18n();\n    const { rtl } = useDirection();\n\n    const openPopover = () => {\n      configuration?.onBeforeOpen?.();\n      setOpen(true);\n    };\n\n    const dismissPopover = (id?: string) => {\n      setOpen(false);\n      configuration?.onAfterClose?.(id);\n    };\n\n    const onKeydown = (e: KeyboardEvent) => {\n      const { key } = e;\n      if (key === 'Escape') {\n        setOpen(false);\n      }\n    };\n\n    useEvent('keydown', onKeydown, { target: popoverEl });\n    useFocusTrap(popoverRef);\n\n    useAfterInitialEffect(() => {\n      if (open) popoverEl?.querySelector('button')?.focus();\n      else buttonEl?.focus();\n    }, [open, popoverEl]);\n\n    return (\n      <FormField {...restProps} ref={ref} label={label} status={status}>\n        <SummaryItem\n          as={StyledObjectSummary}\n          status={status}\n          meta={value.meta}\n          primary={\n            <Link\n              href={value.href}\n              aria-label={`${label} ${value.primary}`}\n              previewable\n              onPreview={onPreview}\n              onClick={onLinkClick ? (e: MouseEvent) => onLinkClick(value.id, e) : undefined}\n            >\n              {value.primary}\n            </Link>\n          }\n          secondary={\n            value.meta && <StyledMetaText variant='secondary'>{value.meta}</StyledMetaText>\n          }\n          actions={\n            <>\n              {configuration && (\n                <Button\n                  ref={setButtonEl}\n                  label={configuration?.label}\n                  icon\n                  variant='simple'\n                  onClick={openPopover}\n                >\n                  <Icon name='gear' />\n                </Button>\n              )}\n              {!readOnly && (\n                <Button\n                  disabled={disabled}\n                  label={t('clear_object_summary', [String(label)])}\n                  icon\n                  variant='simple'\n                  onClick={onDelete}\n                >\n                  <Icon name='times' />\n                </Button>\n              )}\n              <Popover\n                ref={popoverRef}\n                placement={rtl ? 'bottom-end' : 'bottom-start'}\n                hideOnTargetHidden\n                show={open}\n                target={buttonEl}\n              >\n                {configuration && open && (\n                  <ObjectConfig\n                    {...configuration}\n                    disabled={disabled}\n                    dismissPopover={dismissPopover}\n                  />\n                )}\n              </Popover>\n            </>\n          }\n        />\n      </FormField>\n    );\n  }\n);\n\nexport default ObjectSummary;\n"]}
+{"version":3,"file":"ObjectSummary.js","sourceRoot":"","sources":["../../../src/components/ObjectSelect/ObjectSummary.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC, forwardRef, Ref, PropsWithoutRef, MouseEvent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  BaseProps,\n  SummaryItem,\n  Button,\n  Icon,\n  ForwardProps,\n  StyledFormControl,\n  FormField,\n  FormControlProps,\n  MenuItemProps,\n  useI18n,\n  registerIcon,\n  Text,\n  useDirection,\n  useElement,\n  Link,\n  Dialog,\n  defaultThemeProp,\n  DialogProps,\n  OmitStrict,\n  StyledLink\n} from '@pega/cosmos-react-core';\nimport * as times from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';\nimport * as gear from '@pega/cosmos-react-core/lib/components/Icon/icons/gear.icon';\n\nregisterIcon(times, gear);\n\ninterface ObjectSummaryValueProps {\n  id: MenuItemProps['id'];\n  primary: MenuItemProps['primary'];\n  href: string;\n  meta?: string;\n}\n\ninterface ObjectConfigProps extends OmitStrict<DialogProps, 'target'> {\n  label: string;\n}\n\nexport interface ObjectSummaryProps extends BaseProps, Omit<FormControlProps, 'value'> {\n  value: ObjectSummaryValueProps;\n  configuration?: ObjectConfigProps;\n  onDelete: (e: MouseEvent<HTMLButtonElement>) => void;\n  onPreview?: (e: { href: string }) => void;\n  onLinkClick?: (id: MenuItemProps['id'], e: MouseEvent) => void;\n  ref: Ref<HTMLDivElement>;\n}\n\nconst StyledObjectSummary = styled(StyledFormControl)<{ meta: string }>(\n  ({\n    theme: {\n      base: {\n        spacing,\n        'hit-area': { 'mouse-min': hitAreaMouse, 'finger-min': hitAreaFinger },\n        shadow: { focus }\n      }\n    },\n    meta\n  }) => {\n    return css`\n      padding-block: ${meta ? spacing : '0'};\n      padding-inline-start: ${spacing};\n      min-height: ${hitAreaMouse};\n\n      ${StyledLink}:focus {\n        box-shadow: inset ${focus};\n      }\n\n      @media (pointer: coarse) {\n        min-height: ${hitAreaFinger};\n      }\n    `;\n  }\n);\n\nStyledObjectSummary.defaultProps = defaultThemeProp;\n\nconst StyledMetaText = styled(Text)`\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 2;\n  overflow: hidden;\n`;\n\nconst ScrollContainer = styled.div(\n  ({\n    theme: {\n      base: { spacing }\n    }\n  }) => {\n    return css`\n      max-height: 12rem;\n      overflow: auto;\n      padding: calc(0.25 * ${spacing});\n    `;\n  }\n);\n\nScrollContainer.defaultProps = defaultThemeProp;\n\nconst ObjectSummary: FC<PropsWithoutRef<ObjectSummaryProps> & ForwardProps> = forwardRef(\n  (\n    {\n      value,\n      configuration,\n      label,\n      disabled,\n      status,\n      readOnly,\n      onDelete,\n      onPreview,\n      onLinkClick,\n      ...restProps\n    },\n    ref: ObjectSummaryProps['ref']\n  ) => {\n    const [buttonEl, setButtonEl] = useElement<HTMLButtonElement>();\n    const t = useI18n();\n    const { rtl } = useDirection();\n\n    return (\n      <FormField {...restProps} ref={ref} label={label} status={status}>\n        <SummaryItem\n          as={StyledObjectSummary}\n          status={status}\n          meta={value.meta}\n          readOnly={readOnly}\n          overflowStrategy='ellipsis'\n          primary={\n            <Link\n              href={value.href}\n              aria-label={`${label} ${value.primary}`}\n              previewable\n              onPreview={onPreview}\n              onClick={onLinkClick ? (e: MouseEvent) => onLinkClick(value.id, e) : undefined}\n            >\n              {value.primary}\n            </Link>\n          }\n          secondary={\n            value.meta && <StyledMetaText variant='secondary'>{value.meta}</StyledMetaText>\n          }\n          actions={\n            <>\n              {configuration && (\n                <Button ref={setButtonEl} label={configuration?.label} icon variant='simple'>\n                  <Icon name='gear' />\n                </Button>\n              )}\n              {!readOnly && (\n                <Button\n                  disabled={disabled}\n                  label={t('clear_object_summary', [String(label)])}\n                  icon\n                  variant='simple'\n                  onClick={onDelete}\n                >\n                  <Icon name='times' />\n                </Button>\n              )}\n              {configuration && (\n                <Dialog\n                  heading={configuration.heading}\n                  placement={rtl ? 'bottom-end' : 'bottom-start'}\n                  target={buttonEl}\n                  onOpen={configuration.onOpen}\n                  onClose={configuration.onClose}\n                  onSubmit={readOnly || disabled ? undefined : configuration?.onSubmit}\n                  loading={configuration.loading}\n                  ref={configuration.ref}\n                >\n                  <ScrollContainer>{configuration?.children}</ScrollContainer>\n                </Dialog>\n              )}\n            </>\n          }\n        />\n      </FormField>\n    );\n  }\n);\n\nexport default ObjectSummary;\n"]}

package/lib/components/ObjectSelect/useCreateModal.d.ts

@@ -0,0 +1,34 @@
+import { ComponentType } from 'react';
+import { ModalProps } from '@pega/cosmos-react-core';
+export interface UseCreateModalConfig<P extends object = object> {
+    renderer: ComponentType<P>;
+    /**
+     * Called when a user submits a form.
+     */
+    onSubmit: ({ close }: {
+        close: () => void;
+    }) => void;
+    /**
+     * Called when a user cancels a form.
+     */
+    onDismiss: ({ close }: {
+        close: () => void;
+    }) => void;
+    /**
+     * Called before the modal opens.
+     */
+    onBeforeOpen?: ModalProps['onBeforeOpen'];
+    /**
+     * Called after the modal closes.
+     */
+    onAfterClose?: ModalProps['onAfterClose'];
+}
+export interface CreateModalActionProps<P extends object = object> {
+    loading?: boolean;
+    rendererProps: P;
+}
+declare const useCreateModal: <P extends object = object>(config: UseCreateModalConfig<P> | undefined) => {
+    renderModal: ({ rendererProps, loading }: CreateModalActionProps<P>) => void;
+};
+export default useCreateModal;
+//# sourceMappingURL=useCreateModal.d.ts.map

package/lib/components/ObjectSelect/useCreateModal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCreateModal.d.ts","sourceRoot":"","sources":["../../../src/components/ObjectSelect/useCreateModal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqB,aAAa,EAAE,MAAM,OAAO,CAAC;AAEzD,OAAO,EAIL,UAAU,EAIX,MAAM,yBAAyB,CAAC;AAEjC,MAAM,WAAW,oBAAoB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM;IAI7D,QAAQ,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC;IAC3B;;OAEG;IACH,QAAQ,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE;QAAE,KAAK,EAAE,MAAM,IAAI,CAAA;KAAE,KAAK,IAAI,CAAC;IACrD;;OAEG;IACH,SAAS,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE;QAAE,KAAK,EAAE,MAAM,IAAI,CAAA;KAAE,KAAK,IAAI,CAAC;IACtD;;OAEG;IACH,YAAY,CAAC,EAAE,UAAU,CAAC,cAAc,CAAC,CAAC;IAC1C;;OAEG;IACH,YAAY,CAAC,EAAE,UAAU,CAAC,cAAc,CAAC,CAAC;CAC3C;AAED,MAAM,WAAW,sBAAsB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM;IAC/D,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,aAAa,EAAE,CAAC,CAAC;CAClB;AAED,QAAA,MAAM,cAAc;;CAgFnB,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/lib/components/ObjectSelect/useCreateModal.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from 'react';
+import { Button, Modal, useModalManager, useI18n } from '@pega/cosmos-react-core';
+const useCreateModal = (config) => {
+    const t = useI18n();
+    const submittingRef = useRef(false);
+    const modalMethods = useRef();
+    const { create: createModal } = useModalManager();
+    if (config) {
+        const { renderer: Renderer, onSubmit, onDismiss, onBeforeOpen, onAfterClose } = config;
+        const renderModal = ({ rendererProps, loading = false }) => {
+            let modalContent = null;
+            if (!loading) {
+                modalContent = _jsx(Renderer, { ...rendererProps });
+            }
+            let formActions = null;
+            if (!loading || submittingRef.current) {
+                const close = () => {
+                    modalMethods.current?.dismiss();
+                    modalMethods.current = undefined;
+                };
+                formActions = (_jsxs(_Fragment, { children: [_jsx(Button, { disabled: loading, onClick: () => {
+                                onDismiss({ close });
+                            }, children: t('cancel') }), _jsx(Button, { disabled: loading, type: 'submit', variant: 'primary', onClick: () => {
+                                submittingRef.current = true;
+                                onSubmit({ close });
+                            }, children: t('submit') })] }));
+            }
+            const modalProps = {
+                progress: loading
+                    ? { message: submittingRef.current ? t('submitting') : t('loading') }
+                    : undefined,
+                children: modalContent,
+                actions: formActions,
+                onRequestDismiss: loading && submittingRef.current ? () => false : undefined
+            };
+            if (modalMethods.current) {
+                modalMethods.current.update(modalProps);
+            }
+            else {
+                modalMethods.current = createModal(Modal, {
+                    ...modalProps,
+                    heading: t('create_new'),
+                    onBeforeOpen,
+                    onAfterClose: () => {
+                        onAfterClose?.();
+                        submittingRef.current = false;
+                    }
+                });
+            }
+        };
+        return {
+            renderModal
+        };
+    }
+    return {
+        renderModal: () => { }
+    };
+};
+export default useCreateModal;
+//# sourceMappingURL=useCreateModal.js.map

package/lib/components/ObjectSelect/useCreateModal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCreateModal.js","sourceRoot":"","sources":["../../../src/components/ObjectSelect/useCreateModal.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useRef, ReactNode, ComponentType } from 'react';\n\nimport {\n  ModalMethods,\n  Button,\n  OmitStrict,\n  ModalProps,\n  Modal,\n  useModalManager,\n  useI18n\n} from '@pega/cosmos-react-core';\n\nexport interface UseCreateModalConfig<P extends object = object> {\n  /*\n   * A component to render the add new form.\n   */\n  renderer: ComponentType<P>;\n  /**\n   * Called when a user submits a form.\n   */\n  onSubmit: ({ close }: { close: () => void }) => void;\n  /**\n   * Called when a user cancels a form.\n   */\n  onDismiss: ({ close }: { close: () => void }) => void;\n  /**\n   * Called before the modal opens.\n   */\n  onBeforeOpen?: ModalProps['onBeforeOpen'];\n  /**\n   * Called after the modal closes.\n   */\n  onAfterClose?: ModalProps['onAfterClose'];\n}\n\nexport interface CreateModalActionProps<P extends object = object> {\n  loading?: boolean;\n  rendererProps: P;\n}\n\nconst useCreateModal = <P extends object = object>(config: UseCreateModalConfig<P> | undefined) => {\n  const t = useI18n();\n\n  const submittingRef = useRef(false);\n  const modalMethods = useRef<ModalMethods>();\n  const { create: createModal } = useModalManager();\n\n  if (config) {\n    const { renderer: Renderer, onSubmit, onDismiss, onBeforeOpen, onAfterClose } = config;\n    const renderModal = ({ rendererProps, loading = false }: CreateModalActionProps<P>) => {\n      let modalContent: ReactNode = null;\n\n      if (!loading) {\n        modalContent = <Renderer {...rendererProps} />;\n      }\n      let formActions: ReactNode = null;\n\n      if (!loading || submittingRef.current) {\n        const close = () => {\n          modalMethods.current?.dismiss();\n          modalMethods.current = undefined;\n        };\n\n        formActions = (\n          <>\n            <Button\n              disabled={loading}\n              onClick={() => {\n                onDismiss({ close });\n              }}\n            >\n              {t('cancel')}\n            </Button>\n            <Button\n              disabled={loading}\n              type='submit'\n              variant='primary'\n              onClick={() => {\n                submittingRef.current = true;\n                onSubmit({ close });\n              }}\n            >\n              {t('submit')}\n            </Button>\n          </>\n        );\n      }\n\n      const modalProps: OmitStrict<ModalProps, 'heading'> = {\n        progress: loading\n          ? { message: submittingRef.current ? t('submitting') : t('loading') }\n          : undefined,\n        children: modalContent,\n        actions: formActions,\n        onRequestDismiss: loading && submittingRef.current ? () => false : undefined\n      };\n\n      if (modalMethods.current) {\n        modalMethods.current.update(modalProps);\n      } else {\n        modalMethods.current = createModal(Modal, {\n          ...modalProps,\n          heading: t('create_new'),\n          onBeforeOpen,\n          onAfterClose: () => {\n            onAfterClose?.();\n            submittingRef.current = false;\n          }\n        });\n      }\n    };\n\n    return {\n      renderModal\n    };\n  }\n\n  return {\n    renderModal: () => {}\n  };\n};\n\nexport default useCreateModal;\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"PageTemplates.d.ts","sourceRoot":"","sources":["../../../src/components/PageTemplates/PageTemplates.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,iBAAiB,EAIjB,UAAU,EAEX,MAAM,OAAO,CAAC;AAGf,OAAO,EAEL,kBAAkB,IAAI,sBAAsB,EAE5C,eAAe,IAAI,mBAAmB,EACtC,mBAAmB,EASnB,YAAY,EAMZ,iBAAiB,EACjB,UAAU,EAEV,WAAW,EAMZ,MAAM,yBAAyB,CAAC;AAUjC,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,iBAAiB,EAAE,OAAO,GAAG,SAAS,CAAC;IACnF,QAAQ,CAAC,EAAE,mBAAmB,CAAC,QAAQ,CAAC,CAAC;IACzC,MAAM,CAAC,EAAE;QAAE,IAAI,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;IACzD,QAAQ,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACvB,cAAc,CAAC,EAAE;QACf,KAAK,EAAE,MAAM,CAAC;QACd,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,MAAM,EAAE,mBAAmB,CAAC,QAAQ,CAAC,CAAC;QACtC,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;KACrD,CAAC;CACH;AAED,aAAK,gBAAgB,GAAG,QAAQ,GAAG,eAAe,CAAC;AAEnD,MAAM,WAAW,kBACf,SAAQ,UAAU,CAAC,sBAAsB,EAAE,gBAAgB,CAAC,EAC1D,eAAe;CAAG;AAEtB,MAAM,WAAW,eACf,SAAQ,UAAU,CAAC,mBAAmB,EAAE,gBAAgB,CAAC,EACvD,eAAe;CAAG;AAoBtB,eAAO,MAAM,UAAU,yGA4BtB,CAAC;AAIF,eAAO,MAAM,UAAU,mEAOpB,eAAe,gBA6FjB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,GAAG,YAAY,CAaxE,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,GAAG,YAAY,CAoB9E,CAAC"}
+{"version":3,"file":"PageTemplates.d.ts","sourceRoot":"","sources":["../../../src/components/PageTemplates/PageTemplates.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,iBAAiB,EAIjB,UAAU,EAGX,MAAM,OAAO,CAAC;AAGf,OAAO,EAEL,kBAAkB,IAAI,sBAAsB,EAE5C,eAAe,IAAI,mBAAmB,EACtC,mBAAmB,EASnB,YAAY,EAMZ,iBAAiB,EACjB,UAAU,EAEV,WAAW,EAOZ,MAAM,yBAAyB,CAAC;AAYjC,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,iBAAiB,EAAE,OAAO,GAAG,SAAS,CAAC;IACnF,QAAQ,CAAC,EAAE,mBAAmB,CAAC,QAAQ,CAAC,CAAC;IACzC,MAAM,CAAC,EAAE;QAAE,IAAI,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;IACzD,QAAQ,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACvB,cAAc,CAAC,EAAE;QACf,KAAK,EAAE,MAAM,CAAC;QACd,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,MAAM,EAAE,mBAAmB,CAAC,QAAQ,CAAC,CAAC;QACtC,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;KACrD,CAAC;CACH;AAED,aAAK,gBAAgB,GAAG,QAAQ,GAAG,eAAe,CAAC;AAEnD,MAAM,WAAW,kBACf,SAAQ,UAAU,CAAC,sBAAsB,EAAE,gBAAgB,CAAC,EAC1D,eAAe;CAAG;AAEtB,MAAM,WAAW,eACf,SAAQ,UAAU,CAAC,mBAAmB,EAAE,gBAAgB,CAAC,EACvD,eAAe;CAAG;AAoBtB,eAAO,MAAM,UAAU,yGAiCtB,CAAC;AAIF,eAAO,MAAM,UAAU,mEAOpB,eAAe,gBA0GjB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,GAAG,YAAY,CAaxE,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,GAAG,YAAY,CAoB9E,CAAC"}

package/lib/components/PageTemplates/PageTemplates.js

@@ -1,11 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { forwardRef, useState, useEffect, useMemo } from 'react';
+import { forwardRef, useState, useEffect, useMemo, useRef } from 'react';
 import styled, { css } from 'styled-components';
-import { OneColumnPage as CoreOneColumnPage, TabbedPage as CoreTabbedPage, Flex, Status, SummaryItem, Text, Button, Popover, FieldValueList, Icon, defaultThemeProp, useI18n, useDirection, useElement, useOuterEvent, StyledSummaryItemActions, registerIcon, StyledRegion, MetaList, StyledBreadcrumbs, StyledPageHeader } from '@pega/cosmos-react-core';
+import { OneColumnPage as CoreOneColumnPage, TabbedPage as CoreTabbedPage, Flex, Status, SummaryItem, Text, Button, Popover, FieldValueList, Icon, defaultThemeProp, useI18n, useDirection, useElement, useOuterEvent, StyledSummaryItemActions, registerIcon, StyledRegion, MetaList, StyledBreadcrumbs, StyledPageHeader, useAfterInitialEffect } from '@pega/cosmos-react-core';
 import * as nodesDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/nodes-down.icon';
 import * as informationIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/information.icon';
-import { StyledTabPanel } from '@pega/cosmos-react-core/lib/components/Tabs/TabPanel';
-import { StyledForm } from '@pega/cosmos-react-core/lib/components/Form/Form';
+import { StyledForm } from '@pega/cosmos-react-core/lib/components/MultiStepForm/MultiStepForm';
+import { StyledBanner } from '@pega/cosmos-react-core/lib/components/Banner/Banner';
+import { StyledTabs } from '@pega/cosmos-react-core/lib/components/Tabs/Tabs';
+import { StyledDialogTitle } from '@pega/cosmos-react-core/lib/components/Dialog/Dialog';
 import { StyledWorkbench } from '../Workbench/Workbench.styles';
 registerIcon(nodesDownIcon, informationIcon);
 const StyledTextWithEllipsis = styled(Text) `
@@ -28,10 +30,15 @@ export const StyledPage = styled.div(({ theme: { base: { spacing, palette: { 'pr
       background: ${primaryBackground};
       height: 100%;
 
-      ${StyledRegion} > ${StyledWorkbench},
-        ${StyledTabPanel} > ${StyledWorkbench} {
+      ${StyledBanner},
+      ${StyledTabs} {
+        margin-block-start: calc(1.5 * ${spacing});
+      }
+
+      ${StyledRegion} ${StyledWorkbench} {
         position: absolute;
-        width: calc(100% - calc(4 * ${spacing}));
+        width: 100%;
+        margin: 0 calc(-2 * ${spacing});
       }
 
       ${StyledRegion} ${StyledForm} {
@@ -50,6 +57,7 @@ export const PageHeader = ({ title, metadata, additionalInfo, actions, status, t
     const [buttonEl, setButtonEl] = useElement();
     const t = useI18n();
     const { rtl } = useDirection();
+    const popoverTitleRef = useRef(null);
     useOuterEvent('mousedown', [popoverEl, buttonEl], () => {
         if (open)
             setOpen(false);
@@ -72,8 +80,18 @@ export const PageHeader = ({ title, metadata, additionalInfo, actions, status, t
             popoverEl?.removeEventListener('keydown', closePopover);
         };
     }, [popoverEl]);
+    useAfterInitialEffect(() => {
+        if (open && popoverEl) {
+            if (popoverTitleRef.current) {
+                popoverTitleRef.current.focus();
+            }
+            else {
+                buttonEl?.focus();
+            }
+        }
+    }, [open, popoverEl]);
     const metaListItems = useMemo(() => metadata?.map(({ name, value }) => `${name}: ${value}`), [metadata]);
-    return (_jsx(StyledHeaderContent, { container: true, primary: _jsxs(Flex, { container: { alignItems: 'center', gap: 0.5, wrap: 'wrap' }, children: [_jsxs(Flex, { container: { gap: 0.5 }, item: { shrink: 0 }, children: [_jsx(StyledTextWithEllipsis, { variant: 'h1', forwardedAs: titleTag, children: title }), additionalInfo && (_jsxs(_Fragment, { children: [_jsx(Button, { label: t('additional_info'), variant: 'simple', icon: true, ref: setButtonEl, onClick: () => setOpen(cur => !cur), children: _jsx(Icon, { name: 'information' }) }), _jsx(StyledInfoPopover, { ref: setPopoverRef, show: open, target: buttonEl, placement: rtl ? 'bottom-end' : 'bottom-start', children: _jsxs(Flex, { container: { direction: 'column', alignItems: 'start', gap: 2, pad: 2 }, children: [_jsxs(Flex, { container: { direction: 'column', gap: 1 }, children: [_jsx(Text, { variant: 'h3', children: additionalInfo.title }), additionalInfo.description && (_jsx(Text, { as: 'p', children: additionalInfo.description })), _jsx(FieldValueList, { variant: 'inline', fields: additionalInfo.fields })] }), additionalInfo.onEdit && (_jsx(Button, { onClick: (e) => {
+    return (_jsx(StyledHeaderContent, { container: true, primary: _jsxs(Flex, { container: { alignItems: 'center', gap: 0.5, wrap: 'wrap' }, children: [_jsxs(Flex, { container: { gap: 0.5 }, item: { shrink: 0 }, children: [_jsx(StyledTextWithEllipsis, { variant: 'h1', forwardedAs: titleTag, children: title }), additionalInfo && (_jsxs(_Fragment, { children: [_jsx(Button, { label: t('additional_info'), variant: 'simple', icon: true, ref: setButtonEl, onClick: () => setOpen(cur => !cur), children: _jsx(Icon, { name: 'information' }) }), _jsx(StyledInfoPopover, { ref: setPopoverRef, show: open, target: buttonEl, placement: rtl ? 'bottom-end' : 'bottom-start', children: _jsxs(Flex, { container: { direction: 'column', alignItems: 'start', gap: 2, pad: 2 }, children: [_jsxs(Flex, { container: { direction: 'column', gap: 1 }, children: [_jsx(StyledDialogTitle, { variant: 'h3', tabIndex: -1, ref: popoverTitleRef, children: additionalInfo.title }), additionalInfo.description && (_jsx(Text, { as: 'p', children: additionalInfo.description })), _jsx(FieldValueList, { variant: 'inline', fields: additionalInfo.fields })] }), additionalInfo.onEdit && (_jsx(Button, { onClick: (e) => {
                                                     setOpen(false);
                                                     additionalInfo.onEdit?.(e);
                                                 }, children: t('edit_details') }))] }) })] }))] }), status && _jsx(Status, { variant: status.type, children: status.label })] }), secondary: metaListItems && _jsx(MetaList, { items: metaListItems }), actions: actions }));