@pega/cosmos-react-build 4.0.0-dev.9.1 → 4.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (164) hide show
  1. package/lib/components/AppShell/AppShell.d.ts.map +1 -1
  2. package/lib/components/AppShell/AppShell.js +2 -2
  3. package/lib/components/AppShell/AppShell.js.map +1 -1
  4. package/lib/components/AppShell/AppShell.styles.d.ts +4 -4
  5. package/lib/components/AppShell/AppShell.styles.d.ts.map +1 -1
  6. package/lib/components/AppShell/AppShell.styles.js +55 -57
  7. package/lib/components/AppShell/AppShell.styles.js.map +1 -1
  8. package/lib/components/AppShell/AppShell.types.d.ts +3 -3
  9. package/lib/components/AppShell/AppShell.types.d.ts.map +1 -1
  10. package/lib/components/AppShell/AppShell.types.js.map +1 -1
  11. package/lib/components/AppShell/Header/AppHeader.d.ts.map +1 -1
  12. package/lib/components/AppShell/Header/AppHeader.js +10 -14
  13. package/lib/components/AppShell/Header/AppHeader.js.map +1 -1
  14. package/lib/components/AppShell/Header/AppHeader.styles.d.ts +1 -2
  15. package/lib/components/AppShell/Header/AppHeader.styles.d.ts.map +1 -1
  16. package/lib/components/AppShell/Header/AppHeader.styles.js +1 -16
  17. package/lib/components/AppShell/Header/AppHeader.styles.js.map +1 -1
  18. package/lib/components/AppShell/Header/AppHeader.types.d.ts +6 -5
  19. package/lib/components/AppShell/Header/AppHeader.types.d.ts.map +1 -1
  20. package/lib/components/AppShell/Header/AppHeader.types.js.map +1 -1
  21. package/lib/components/AppShell/NavigationList.d.ts.map +1 -1
  22. package/lib/components/AppShell/NavigationList.js +9 -4
  23. package/lib/components/AppShell/NavigationList.js.map +1 -1
  24. package/lib/components/AppShell/index.d.ts +3 -3
  25. package/lib/components/AppShell/index.d.ts.map +1 -1
  26. package/lib/components/AppShell/index.js.map +1 -1
  27. package/lib/components/DynamicContentEditor/DynamicContentEditor.d.ts +1 -0
  28. package/lib/components/DynamicContentEditor/DynamicContentEditor.d.ts.map +1 -1
  29. package/lib/components/DynamicContentEditor/DynamicContentEditor.js +26 -26
  30. package/lib/components/DynamicContentEditor/DynamicContentEditor.js.map +1 -1
  31. package/lib/components/DynamicContentEditor/DynamicContentEditor.types.d.ts +1 -1
  32. package/lib/components/DynamicContentEditor/DynamicContentEditor.types.d.ts.map +1 -1
  33. package/lib/components/DynamicContentEditor/PegaCustomElement.d.ts +41 -27
  34. package/lib/components/DynamicContentEditor/PegaCustomElement.d.ts.map +1 -1
  35. package/lib/components/DynamicContentEditor/index.d.ts +1 -1
  36. package/lib/components/DynamicContentEditor/index.d.ts.map +1 -1
  37. package/lib/components/DynamicContentEditor/index.js.map +1 -1
  38. package/lib/components/ExpressionBuilder/CodeEditor/CodeEditor.d.ts.map +1 -1
  39. package/lib/components/ExpressionBuilder/CodeEditor/CodeEditor.js +10 -11
  40. package/lib/components/ExpressionBuilder/CodeEditor/CodeEditor.js.map +1 -1
  41. package/lib/components/ExpressionBuilder/CodeEditor/CodeEditor.styles.js +6 -6
  42. package/lib/components/ExpressionBuilder/CodeEditor/CodeEditor.styles.js.map +1 -1
  43. package/lib/components/ExpressionBuilder/CodeEditor/CodeEditor.types.d.ts +3 -3
  44. package/lib/components/ExpressionBuilder/CodeEditor/CodeEditor.types.d.ts.map +1 -1
  45. package/lib/components/ExpressionBuilder/ExpressionBuilder.js +1 -1
  46. package/lib/components/ExpressionBuilder/ExpressionBuilder.js.map +1 -1
  47. package/lib/components/ExpressionBuilder/ExpressionDetails.d.ts.map +1 -1
  48. package/lib/components/ExpressionBuilder/ExpressionDetails.js +1 -1
  49. package/lib/components/ExpressionBuilder/ExpressionDetails.js.map +1 -1
  50. package/lib/components/ExpressionBuilder/ExpressionList.js +1 -1
  51. package/lib/components/ExpressionBuilder/ExpressionList.js.map +1 -1
  52. package/lib/components/ExpressionBuilder/index.d.ts +2 -2
  53. package/lib/components/ExpressionBuilder/index.d.ts.map +1 -1
  54. package/lib/components/ExpressionBuilder/index.js.map +1 -1
  55. package/lib/components/FlowModeller/AddNode.d.ts.map +1 -1
  56. package/lib/components/FlowModeller/AddNode.js +3 -4
  57. package/lib/components/FlowModeller/AddNode.js.map +1 -1
  58. package/lib/components/FlowModeller/Connector.d.ts +2 -2
  59. package/lib/components/FlowModeller/Connector.d.ts.map +1 -1
  60. package/lib/components/FlowModeller/Connector.js +2 -4
  61. package/lib/components/FlowModeller/Connector.js.map +1 -1
  62. package/lib/components/FlowModeller/DeletePopover.d.ts +3 -3
  63. package/lib/components/FlowModeller/DeletePopover.d.ts.map +1 -1
  64. package/lib/components/FlowModeller/DeletePopover.js +1 -1
  65. package/lib/components/FlowModeller/DeletePopover.js.map +1 -1
  66. package/lib/components/FlowModeller/FlowModeller.d.ts.map +1 -1
  67. package/lib/components/FlowModeller/FlowModeller.js +1 -3
  68. package/lib/components/FlowModeller/FlowModeller.js.map +1 -1
  69. package/lib/components/FlowModeller/Node/Node.types.d.ts +5 -0
  70. package/lib/components/FlowModeller/Node/Node.types.d.ts.map +1 -1
  71. package/lib/components/FlowModeller/Node/Node.types.js.map +1 -1
  72. package/lib/components/FlowModeller/Node/NodeTemplates.d.ts.map +1 -1
  73. package/lib/components/FlowModeller/Node/NodeTemplates.js +3 -3
  74. package/lib/components/FlowModeller/Node/NodeTemplates.js.map +1 -1
  75. package/lib/components/FlowModeller/Renderer/Utils/Graph.js.map +1 -1
  76. package/lib/components/FlowModeller/Renderer/Utils/GraphLayout.js +3 -3
  77. package/lib/components/FlowModeller/Renderer/Utils/GraphLayout.js.map +1 -1
  78. package/lib/components/FlowModeller/index.d.ts +13 -8
  79. package/lib/components/FlowModeller/index.d.ts.map +1 -1
  80. package/lib/components/FlowModeller/index.js.map +1 -1
  81. package/lib/components/ItemLibrary/ItemLibrary.d.ts.map +1 -1
  82. package/lib/components/ItemLibrary/ItemLibrary.js +3 -3
  83. package/lib/components/ItemLibrary/ItemLibrary.js.map +1 -1
  84. package/lib/components/LifeCycle/Category.d.ts.map +1 -1
  85. package/lib/components/LifeCycle/Category.js +3 -3
  86. package/lib/components/LifeCycle/Category.js.map +1 -1
  87. package/lib/components/LifeCycle/LifeCycle.d.ts.map +1 -1
  88. package/lib/components/LifeCycle/LifeCycle.js +1 -1
  89. package/lib/components/LifeCycle/LifeCycle.js.map +1 -1
  90. package/lib/components/LifeCycle/LifeCycle.types.d.ts +22 -1
  91. package/lib/components/LifeCycle/LifeCycle.types.d.ts.map +1 -1
  92. package/lib/components/LifeCycle/LifeCycle.types.js.map +1 -1
  93. package/lib/components/LifeCycle/LifeCycleList.d.ts +11 -0
  94. package/lib/components/LifeCycle/LifeCycleList.d.ts.map +1 -1
  95. package/lib/components/LifeCycle/LifeCycleList.js +2 -2
  96. package/lib/components/LifeCycle/LifeCycleList.js.map +1 -1
  97. package/lib/components/LifeCycle/Stage.d.ts +2 -0
  98. package/lib/components/LifeCycle/Stage.d.ts.map +1 -1
  99. package/lib/components/LifeCycle/Stage.js +2 -2
  100. package/lib/components/LifeCycle/Stage.js.map +1 -1
  101. package/lib/components/LifeCycle/Step.d.ts +3 -0
  102. package/lib/components/LifeCycle/Step.d.ts.map +1 -1
  103. package/lib/components/LifeCycle/Step.js +6 -5
  104. package/lib/components/LifeCycle/Step.js.map +1 -1
  105. package/lib/components/LifeCycle/Task.d.ts +1 -0
  106. package/lib/components/LifeCycle/Task.d.ts.map +1 -1
  107. package/lib/components/LifeCycle/Task.js +1 -1
  108. package/lib/components/LifeCycle/Task.js.map +1 -1
  109. package/lib/components/LifeCycle/index.d.ts +1 -1
  110. package/lib/components/LifeCycle/index.d.ts.map +1 -1
  111. package/lib/components/LifeCycle/index.js.map +1 -1
  112. package/lib/components/MobileBuildSummary/MobileBuildSummary.js +1 -1
  113. package/lib/components/MobileBuildSummary/MobileBuildSummary.js.map +1 -1
  114. package/lib/components/MobileBuildSummary/MobileBuildSummary.types.d.ts +2 -1
  115. package/lib/components/MobileBuildSummary/MobileBuildSummary.types.d.ts.map +1 -1
  116. package/lib/components/MobileBuildSummary/MobileBuildSummary.types.js.map +1 -1
  117. package/lib/components/MobileBuildSummary/index.d.ts +1 -1
  118. package/lib/components/MobileBuildSummary/index.d.ts.map +1 -1
  119. package/lib/components/MobileBuildSummary/index.js.map +1 -1
  120. package/lib/components/ObjectPreview/ObjectPreview.d.ts +2 -2
  121. package/lib/components/ObjectPreview/ObjectPreview.d.ts.map +1 -1
  122. package/lib/components/ObjectPreview/ObjectPreview.js +2 -2
  123. package/lib/components/ObjectPreview/ObjectPreview.js.map +1 -1
  124. package/lib/components/ObjectSelect/ObjectPicker.d.ts.map +1 -1
  125. package/lib/components/ObjectSelect/ObjectPicker.js +1 -1
  126. package/lib/components/ObjectSelect/ObjectPicker.js.map +1 -1
  127. package/lib/components/ObjectSelect/ObjectSelect.d.ts.map +1 -1
  128. package/lib/components/ObjectSelect/ObjectSelect.js +1 -1
  129. package/lib/components/ObjectSelect/ObjectSelect.js.map +1 -1
  130. package/lib/components/ObjectSelect/ObjectSummary.d.ts +5 -4
  131. package/lib/components/ObjectSelect/ObjectSummary.d.ts.map +1 -1
  132. package/lib/components/ObjectSelect/ObjectSummary.js +15 -13
  133. package/lib/components/ObjectSelect/ObjectSummary.js.map +1 -1
  134. package/lib/components/ObjectSelect/index.d.ts +1 -1
  135. package/lib/components/ObjectSelect/index.d.ts.map +1 -1
  136. package/lib/components/ObjectSelect/index.js.map +1 -1
  137. package/lib/components/ObjectSelect/useCreateModal.d.ts +6 -13
  138. package/lib/components/ObjectSelect/useCreateModal.d.ts.map +1 -1
  139. package/lib/components/ObjectSelect/useCreateModal.js.map +1 -1
  140. package/lib/components/PageTemplates/GalleryPage.d.ts.map +1 -1
  141. package/lib/components/PageTemplates/GalleryPage.js +1 -1
  142. package/lib/components/PageTemplates/GalleryPage.js.map +1 -1
  143. package/lib/components/PageTemplates/PageTemplates.d.ts +1 -1
  144. package/lib/components/PageTemplates/PageTemplates.d.ts.map +1 -1
  145. package/lib/components/PageTemplates/PageTemplates.js +2 -2
  146. package/lib/components/PageTemplates/PageTemplates.js.map +1 -1
  147. package/lib/components/PageTemplates/ShowcasePage.d.ts.map +1 -1
  148. package/lib/components/PageTemplates/ShowcasePage.js +1 -1
  149. package/lib/components/PageTemplates/ShowcasePage.js.map +1 -1
  150. package/lib/components/PageTemplates/index.d.ts +3 -4
  151. package/lib/components/PageTemplates/index.d.ts.map +1 -1
  152. package/lib/components/PageTemplates/index.js +1 -2
  153. package/lib/components/PageTemplates/index.js.map +1 -1
  154. package/lib/components/SummaryCard/SummaryCard.d.ts.map +1 -1
  155. package/lib/components/SummaryCard/SummaryCard.js +1 -5
  156. package/lib/components/SummaryCard/SummaryCard.js.map +1 -1
  157. package/lib/components/Workbench/Workbench.d.ts.map +1 -1
  158. package/lib/components/Workbench/Workbench.js +1 -1
  159. package/lib/components/Workbench/Workbench.js.map +1 -1
  160. package/lib/components/Workbench/Workbench.types.d.ts +2 -2
  161. package/lib/components/Workbench/Workbench.types.d.ts.map +1 -1
  162. package/lib/utils/utils.d.ts +1 -1
  163. package/lib/utils/utils.d.ts.map +1 -1
  164. package/package.json +17 -18
@@ -1 +1 @@
1
- {"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"]}
1
+ {"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(function ObjectSelect<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}) as <P extends object = object>(props: ObjectSelectProps<P> & ForwardProps) => JSX.Element | null;\n\nexport default ObjectSelect;\n"]}
@@ -1,20 +1,21 @@
1
1
  import { FC, Ref, PropsWithoutRef, MouseEvent } from 'react';
2
- import { BaseProps, ForwardProps, FormControlProps, MenuItemProps, FormDialogProps } from '@pega/cosmos-react-core';
3
- import { BaseDialogProps } from '@pega/cosmos-react-core/lib/components/Dialog/Dialog.types';
2
+ import { BaseProps, ForwardProps, FormControlProps, MenuItemProps } from '@pega/cosmos-react-core';
3
+ import { BaseDialogProps, FormDialogProps } from '@pega/cosmos-react-core/lib/components/Dialog/Dialog.types';
4
4
  interface ObjectSummaryValueProps {
5
5
  id: MenuItemProps['id'];
6
6
  primary: MenuItemProps['primary'];
7
7
  href?: string;
8
8
  meta?: string;
9
9
  }
10
- interface ObjectConfigProps extends Pick<BaseDialogProps, 'heading' | 'placement' | 'children' | 'ref'> {
10
+ interface ObjectConfigProps extends Pick<BaseDialogProps, 'children' | 'ref'> {
11
+ heading: NonNullable<FormDialogProps['heading']>;
11
12
  label: string;
12
13
  onOpen?: () => void;
13
14
  onClose?: () => void;
14
15
  onSubmit: (arg: {
15
16
  close: () => void;
16
17
  }) => void;
17
- loading?: FormDialogProps['progress'];
18
+ loading?: BaseDialogProps['progress'];
18
19
  }
19
20
  export interface ObjectSummaryProps extends BaseProps, Omit<FormControlProps, 'value'> {
20
21
  value: ObjectSummaryValueProps;
@@ -1 +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,EAAE,UAAU,EAAsB,MAAM,OAAO,CAAC;AAG7F,OAAO,EACL,SAAS,EAIT,YAAY,EAGZ,gBAAgB,EAChB,aAAa,EAUb,eAAe,EAGhB,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EAAE,eAAe,EAAE,MAAM,4DAA4D,CAAC;AAI7F,UAAU,uBAAuB;IAC/B,EAAE,EAAE,aAAa,CAAC,IAAI,CAAC,CAAC;IACxB,OAAO,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IAClC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,UAAU,iBACR,SAAQ,IAAI,CAAC,eAAe,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,KAAK,CAAC;IAC3E,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,EAAE,CAAC,GAAG,EAAE;QAAE,KAAK,EAAE,MAAM,IAAI,CAAA;KAAE,KAAK,IAAI,CAAC;IAC/C,OAAO,CAAC,EAAE,eAAe,CAAC,UAAU,CAAC,CAAC;CACvC;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,CAkIzE,CAAC;AAEF,eAAe,aAAa,CAAC"}
1
+ {"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,EAAsB,MAAM,OAAO,CAAC;AAG7F,OAAO,EACL,SAAS,EAIT,YAAY,EAGZ,gBAAgB,EAChB,aAAa,EAad,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EACL,eAAe,EACf,eAAe,EAChB,MAAM,4DAA4D,CAAC;AAIpE,UAAU,uBAAuB;IAC/B,EAAE,EAAE,aAAa,CAAC,IAAI,CAAC,CAAC;IACxB,OAAO,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IAClC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,UAAU,iBAAkB,SAAQ,IAAI,CAAC,eAAe,EAAE,UAAU,GAAG,KAAK,CAAC;IAC3E,OAAO,EAAE,WAAW,CAAC,eAAe,CAAC,SAAS,CAAC,CAAC,CAAC;IACjD,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,EAAE,CAAC,GAAG,EAAE;QAAE,KAAK,EAAE,MAAM,IAAI,CAAA;KAAE,KAAK,IAAI,CAAC;IAC/C,OAAO,CAAC,EAAE,eAAe,CAAC,UAAU,CAAC,CAAC;CACvC;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;AAoDD,QAAA,MAAM,aAAa,EAAE,EAAE,CAAC,eAAe,CAAC,kBAAkB,CAAC,GAAG,YAAY,CA+HzE,CAAC;AAEF,eAAe,aAAa,CAAC"}
@@ -1,11 +1,11 @@
1
1
  import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import { forwardRef, useEffect, useMemo } from 'react';
3
3
  import styled, { css } from 'styled-components';
4
- import { SummaryItem, Button, Icon, StyledFormControl, FormField, useI18n, registerIcon, Text, useElement, Link, defaultThemeProp, StyledLink, useUID, FormDialog, InfoDialog } from '@pega/cosmos-react-core';
4
+ import { SummaryItem, Button, Icon, StyledFormControl, FormField, useI18n, registerIcon, Text, useElement, Link, defaultThemeProp, StyledLink, useUID, FormDialog, InfoDialog, StyledButton, StyledSummaryItemActions } from '@pega/cosmos-react-core';
5
5
  import * as times from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';
6
6
  import * as gear from '@pega/cosmos-react-core/lib/components/Icon/icons/gear.icon';
7
7
  registerIcon(times, gear);
8
- const StyledObjectSummary = styled(StyledFormControl)(({ theme: { base: { spacing, 'hit-area': { 'mouse-min': hitAreaMouse, 'finger-min': hitAreaFinger }, shadow: { 'focus-inset': focusInset } } }, meta }) => {
8
+ const StyledObjectSummary = styled(StyledFormControl)(({ theme: { base: { spacing, 'hit-area': { 'mouse-min': hitAreaMouse, 'finger-min': hitAreaFinger }, shadow: { 'focus-inset': focusInset } }, components: { 'form-control': { 'border-width': borderWidth } } }, meta }) => {
9
9
  return css `
10
10
  padding-block: ${meta ? spacing : '0'};
11
11
  padding-inline-start: ${spacing};
@@ -15,8 +15,19 @@ const StyledObjectSummary = styled(StyledFormControl)(({ theme: { base: { spacin
15
15
  box-shadow: ${focusInset};
16
16
  }
17
17
 
18
+ ${StyledSummaryItemActions} > ${StyledButton} {
19
+ margin-block: calc(-1 * ${borderWidth});
20
+ min-width: calc(${hitAreaMouse} - 2 * ${borderWidth});
21
+ min-height: calc(${hitAreaMouse} - 2 * ${borderWidth});
22
+ }
23
+
18
24
  @media (pointer: coarse) {
19
25
  min-height: ${hitAreaFinger};
26
+
27
+ ${StyledSummaryItemActions} > ${StyledButton} {
28
+ min-width: calc(${hitAreaFinger} - 2 * ${borderWidth});
29
+ min-height: calc(${hitAreaFinger} - 2 * ${borderWidth});
30
+ }
20
31
  }
21
32
  `;
22
33
  });
@@ -27,15 +38,7 @@ const StyledMetaText = styled(Text) `
27
38
  -webkit-line-clamp: 2;
28
39
  overflow: hidden;
29
40
  `;
30
- const ScrollContainer = styled.div(({ theme: { base: { spacing } } }) => {
31
- return css `
32
- max-height: 12rem;
33
- overflow: auto;
34
- padding: calc(0.25 * ${spacing});
35
- `;
36
- });
37
- ScrollContainer.defaultProps = defaultThemeProp;
38
- const ObjectSummary = forwardRef(({ value, configuration, label, disabled, status, readOnly, onDelete, onPreview, onLinkClick, ...restProps }, ref) => {
41
+ const ObjectSummary = forwardRef(function ObjectSummary({ value, configuration, label, disabled, status, readOnly, onDelete, onPreview, onLinkClick, ...restProps }, ref) {
39
42
  const [configTarget, setConfigTarget] = useElement();
40
43
  const t = useI18n();
41
44
  const describedById = useUID();
@@ -48,11 +51,10 @@ const ObjectSummary = forwardRef(({ value, configuration, label, disabled, statu
48
51
  return null;
49
52
  const commonProps = {
50
53
  heading: configuration.heading,
51
- placement: 'auto',
52
54
  target: configTarget,
53
55
  progress: configuration.loading,
54
56
  ref: configuration.ref,
55
- children: _jsx(ScrollContainer, { children: configuration.children })
57
+ children: configuration.children
56
58
  };
57
59
  if (readOnly) {
58
60
  return (_jsx(InfoDialog, { ...commonProps, onDismiss: () => {
@@ -1 +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, MouseEvent, useEffect, useMemo } 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 useElement,\n Link,\n defaultThemeProp,\n StyledLink,\n useUID,\n FormDialog,\n FormDialogProps,\n InfoDialog,\n InfoDialogProps\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';\nimport { BaseDialogProps } from '@pega/cosmos-react-core/lib/components/Dialog/Dialog.types';\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\n extends Pick<BaseDialogProps, 'heading' | 'placement' | 'children' | 'ref'> {\n label: string;\n onOpen?: () => void;\n onClose?: () => void;\n onSubmit: (arg: { close: () => void }) => void;\n loading?: FormDialogProps['progress'];\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-inset': focusInset }\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: ${focusInset};\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 [configTarget, setConfigTarget] = useElement<HTMLButtonElement>();\n const t = useI18n();\n const describedById = useUID();\n\n useEffect(() => {\n if (configTarget) configuration?.onOpen?.();\n }, [configTarget]);\n\n const configDialog = useMemo(() => {\n if (!configuration || !configTarget || disabled) return null;\n\n const commonProps: Pick<\n InfoDialogProps & FormDialogProps,\n 'heading' | 'placement' | 'target' | 'progress' | 'ref' | 'children'\n > = {\n heading: configuration.heading,\n placement: 'auto',\n target: configTarget,\n progress: configuration.loading,\n ref: configuration.ref,\n children: <ScrollContainer>{configuration.children}</ScrollContainer>\n };\n\n if (readOnly) {\n return (\n <InfoDialog\n {...commonProps}\n onDismiss={() => {\n setConfigTarget(null);\n configuration.onClose?.();\n }}\n />\n );\n }\n\n return (\n <FormDialog\n {...commonProps}\n onCancel={() => {\n setConfigTarget(null);\n configuration.onClose?.();\n }}\n onSubmit={() => {\n configuration.onSubmit({\n close: () => {\n setConfigTarget(null);\n }\n });\n }}\n />\n );\n }, [configTarget, configuration, disabled, readOnly]);\n\n return (\n <FormField {...restProps} ref={ref} label={label} status={status} disabled={disabled}>\n <SummaryItem\n as={StyledObjectSummary}\n status={status}\n meta={value.meta}\n readOnly={readOnly}\n overflowStrategy='ellipsis'\n primary={\n disabled || !value.href ? (\n <Text id={describedById}>{value.primary}</Text>\n ) : (\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 }\n secondary={\n value.meta && <StyledMetaText variant='secondary'>{value.meta}</StyledMetaText>\n }\n actions={\n <>\n {configuration && (\n <Button\n disabled={disabled}\n label={configuration?.label}\n icon\n variant='simple'\n onClick={(e: MouseEvent<HTMLButtonElement>) => {\n setConfigTarget(e.currentTarget);\n }}\n aria-describedby={describedById}\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 aria-describedby={describedById}\n >\n <Icon name='times' />\n </Button>\n )}\n {configDialog}\n </>\n }\n />\n </FormField>\n );\n }\n);\n\nexport default ObjectSummary;\n"]}
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, MouseEvent, useEffect, useMemo } 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 useElement,\n Link,\n defaultThemeProp,\n StyledLink,\n useUID,\n FormDialog,\n InfoDialog,\n StyledButton,\n StyledSummaryItemActions\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';\nimport {\n BaseDialogProps,\n FormDialogProps\n} from '@pega/cosmos-react-core/lib/components/Dialog/Dialog.types';\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 Pick<BaseDialogProps, 'children' | 'ref'> {\n heading: NonNullable<FormDialogProps['heading']>;\n label: string;\n onOpen?: () => void;\n onClose?: () => void;\n onSubmit: (arg: { close: () => void }) => void;\n loading?: BaseDialogProps['progress'];\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-inset': focusInset }\n },\n components: {\n 'form-control': { 'border-width': borderWidth }\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: ${focusInset};\n }\n\n ${StyledSummaryItemActions} > ${StyledButton} {\n margin-block: calc(-1 * ${borderWidth});\n min-width: calc(${hitAreaMouse} - 2 * ${borderWidth});\n min-height: calc(${hitAreaMouse} - 2 * ${borderWidth});\n }\n\n @media (pointer: coarse) {\n min-height: ${hitAreaFinger};\n\n ${StyledSummaryItemActions} > ${StyledButton} {\n min-width: calc(${hitAreaFinger} - 2 * ${borderWidth});\n min-height: calc(${hitAreaFinger} - 2 * ${borderWidth});\n }\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 ObjectSummary: FC<PropsWithoutRef<ObjectSummaryProps> & ForwardProps> = forwardRef(\n function ObjectSummary(\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 [configTarget, setConfigTarget] = useElement<HTMLButtonElement>();\n const t = useI18n();\n const describedById = useUID();\n\n useEffect(() => {\n if (configTarget) configuration?.onOpen?.();\n }, [configTarget]);\n\n const configDialog = useMemo(() => {\n if (!configuration || !configTarget || disabled) return null;\n\n const commonProps: Pick<BaseDialogProps, 'target' | 'progress' | 'ref' | 'children'> &\n Pick<ObjectConfigProps, 'heading'> = {\n heading: configuration.heading,\n target: configTarget,\n progress: configuration.loading,\n ref: configuration.ref,\n children: configuration.children\n };\n\n if (readOnly) {\n return (\n <InfoDialog\n {...commonProps}\n onDismiss={() => {\n setConfigTarget(null);\n configuration.onClose?.();\n }}\n />\n );\n }\n\n return (\n <FormDialog\n {...commonProps}\n onCancel={() => {\n setConfigTarget(null);\n configuration.onClose?.();\n }}\n onSubmit={() => {\n configuration.onSubmit({\n close: () => {\n setConfigTarget(null);\n }\n });\n }}\n />\n );\n }, [configTarget, configuration, disabled, readOnly]);\n\n return (\n <FormField {...restProps} ref={ref} label={label} status={status} disabled={disabled}>\n <SummaryItem\n as={StyledObjectSummary}\n status={status}\n meta={value.meta}\n readOnly={readOnly}\n overflowStrategy='ellipsis'\n primary={\n disabled || !value.href ? (\n <Text id={describedById}>{value.primary}</Text>\n ) : (\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 }\n secondary={\n value.meta && <StyledMetaText variant='secondary'>{value.meta}</StyledMetaText>\n }\n actions={\n <>\n {configuration && (\n <Button\n disabled={disabled}\n label={configuration?.label}\n icon\n variant='simple'\n onClick={(e: MouseEvent<HTMLButtonElement>) => {\n setConfigTarget(e.currentTarget);\n }}\n aria-describedby={describedById}\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 aria-describedby={describedById}\n >\n <Icon name='times' />\n </Button>\n )}\n {configDialog}\n </>\n }\n />\n </FormField>\n );\n }\n);\n\nexport default ObjectSummary;\n"]}
@@ -1,3 +1,3 @@
1
1
  export { default } from './ObjectSelect';
2
- export { ObjectSelectProps } from './ObjectSelect';
2
+ export type { ObjectSelectProps } from './ObjectSelect';
3
3
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ObjectSelect/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AACzC,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ObjectSelect/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AACzC,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ObjectSelect/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC","sourcesContent":["export { default } from './ObjectSelect';\nexport { ObjectSelectProps } from './ObjectSelect';\n"]}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ObjectSelect/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC","sourcesContent":["export { default } from './ObjectSelect';\nexport type { ObjectSelectProps } from './ObjectSelect';\n"]}
@@ -3,29 +3,22 @@ import { ModalProps } from '@pega/cosmos-react-core';
3
3
  export interface UseCreateModalConfig<P extends object = object> {
4
4
  /**
5
5
  * Heading for the Modal.
6
- * @default "Create new"
6
+ * @default 'Create new'
7
7
  */
8
8
  heading?: string;
9
+ /** A component to render the add new form. */
9
10
  renderer: ComponentType<P>;
10
- /**
11
- * Called when a user submits a form.
12
- */
11
+ /** Called when a user submits a form. */
13
12
  onSubmit: ({ close }: {
14
13
  close: () => void;
15
14
  }) => void;
16
- /**
17
- * Called when a user cancels a form.
18
- */
15
+ /** Called when a user cancels a form. */
19
16
  onDismiss: ({ close }: {
20
17
  close: () => void;
21
18
  }) => void;
22
- /**
23
- * Called before the modal opens.
24
- */
19
+ /** Called before the modal opens. */
25
20
  onBeforeOpen?: ModalProps['onBeforeOpen'];
26
- /**
27
- * Called after the modal closes.
28
- */
21
+ /** Called after the modal closes. */
29
22
  onAfterClose?: ModalProps['onAfterClose'];
30
23
  }
31
24
  export interface CreateModalActionProps<P extends object = object> {
@@ -1 +1 @@
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;IAC7D;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAIjB,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;;CA0FnB,CAAC;AAEF,eAAe,cAAc,CAAC"}
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;IAC7D;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,8CAA8C;IAC9C,QAAQ,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC;IAC3B,yCAAyC;IACzC,QAAQ,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE;QAAE,KAAK,EAAE,MAAM,IAAI,CAAA;KAAE,KAAK,IAAI,CAAC;IACrD,yCAAyC;IACzC,SAAS,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE;QAAE,KAAK,EAAE,MAAM,IAAI,CAAA;KAAE,KAAK,IAAI,CAAC;IACtD,qCAAqC;IACrC,YAAY,CAAC,EAAE,UAAU,CAAC,cAAc,CAAC,CAAC;IAC1C,qCAAqC;IACrC,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;;CA0FnB,CAAC;AAEF,eAAe,cAAc,CAAC"}
@@ -1 +1 @@
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 * Heading for the Modal.\n * @default \"Create new\"\n */\n heading?: string;\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 {\n renderer: Renderer,\n onSubmit,\n onDismiss,\n onBeforeOpen,\n onAfterClose,\n heading = t('create_new')\n } = config;\n const renderModal = ({ rendererProps, loading = false }: CreateModalActionProps<P>) => {\n const modalContent: ReactNode = <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(\n Modal,\n {\n ...modalProps,\n heading,\n onBeforeOpen,\n onAfterClose: () => {\n onAfterClose?.();\n submittingRef.current = false;\n }\n },\n {\n dismissible: false\n }\n );\n }\n };\n\n return {\n renderModal\n };\n }\n\n return {\n renderModal: () => {}\n };\n};\n\nexport default useCreateModal;\n"]}
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 * Heading for the Modal.\n * @default 'Create new'\n */\n heading?: string;\n /** A component to render the add new form. */\n renderer: ComponentType<P>;\n /** Called when a user submits a form. */\n onSubmit: ({ close }: { close: () => void }) => void;\n /** Called when a user cancels a form. */\n onDismiss: ({ close }: { close: () => void }) => void;\n /** Called before the modal opens. */\n onBeforeOpen?: ModalProps['onBeforeOpen'];\n /** Called after the modal closes. */\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 {\n renderer: Renderer,\n onSubmit,\n onDismiss,\n onBeforeOpen,\n onAfterClose,\n heading = t('create_new')\n } = config;\n const renderModal = ({ rendererProps, loading = false }: CreateModalActionProps<P>) => {\n const modalContent: ReactNode = <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(\n Modal,\n {\n ...modalProps,\n heading,\n onBeforeOpen,\n onAfterClose: () => {\n onAfterClose?.();\n submittingRef.current = false;\n }\n },\n {\n dismissible: false\n }\n );\n }\n };\n\n return {\n renderModal\n };\n }\n\n return {\n renderModal: () => {}\n };\n};\n\nexport default useCreateModal;\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"GalleryPage.d.ts","sourceRoot":"","sources":["../../../src/components/PageTemplates/GalleryPage.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAA+B,GAAG,EAAE,UAAU,EAAa,MAAM,OAAO,CAAC;AAGpF,OAAO,EAIL,cAAc,EAOf,MAAM,yBAAyB,CAAC;AAEjC,OAAoB,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAC/D,OAAmB,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAE5D,UAAU,eAAe;IACvB,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,gBAAiB,SAAQ,cAAc,EAAE,eAAe;IACvE,+CAA+C;IAC/C,UAAU,EAAE,eAAe,CAAC;IAC5B,2CAA2C;IAC3C,KAAK,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC3B,+DAA+D;IAC/D,WAAW,EAAE,CAAC,EAAE,EAAE,gBAAgB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,UAAU,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IACjF,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,eAAO,MAAM,iBAAiB,yGAE7B,CAAC;AAEF,eAAO,MAAM,aAAa,yGAMxB,CAAC;AA+CH,QAAA,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,CAiDrC,CAAC;AAEF,eAAe,WAAW,CAAC"}
1
+ {"version":3,"file":"GalleryPage.d.ts","sourceRoot":"","sources":["../../../src/components/PageTemplates/GalleryPage.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAA+B,GAAG,EAAE,UAAU,EAAa,MAAM,OAAO,CAAC;AAGpF,OAAO,EAIL,cAAc,EAOf,MAAM,yBAAyB,CAAC;AAEjC,OAAoB,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAC/D,OAAmB,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAE5D,UAAU,eAAe;IACvB,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,gBAAiB,SAAQ,cAAc,EAAE,eAAe;IACvE,+CAA+C;IAC/C,UAAU,EAAE,eAAe,CAAC;IAC5B,2CAA2C;IAC3C,KAAK,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC3B,+DAA+D;IAC/D,WAAW,EAAE,CAAC,EAAE,EAAE,gBAAgB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,UAAU,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IACjF,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,eAAO,MAAM,iBAAiB,yGAE7B,CAAC;AAEF,eAAO,MAAM,aAAa,yGAMxB,CAAC;AA+CH,QAAA,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,CA+CpC,CAAC;AAEH,eAAe,WAAW,CAAC"}
@@ -26,7 +26,7 @@ const EmptyState = ({ heading, description, actions }) => {
26
26
  return (_jsxs(Flex, { container: { direction: 'column', alignItems: 'center', justify: 'center', rowGap: 2 }, item: { grow: 1 }, children: [_jsx(Text, { variant: 'h2', children: heading }), description && (_jsx(ShowMoreLess, { lines: 2, children: _jsx(Text, { as: 'p', children: description }) })), !!actions?.length &&
27
27
  actions.map(action => (_jsx(Button, { variant: 'primary', onClick: action.onClick, children: action.label }, action.label)))] }));
28
28
  };
29
- const GalleryPage = forwardRef(({ title, description, image, items, onItemClick, emptyState, actions, link }, ref) => {
29
+ const GalleryPage = forwardRef(function GalleryPage({ title, description, image, items, onItemClick, emptyState, actions, link }, ref) {
30
30
  const { loadedRef } = useConfiguration();
31
31
  const pageRef = useConsolidatedRef(ref);
32
32
  // Focus heading on initial mount
@@ -1 +1 @@
1
- {"version":3,"file":"GalleryPage.js","sourceRoot":"","sources":["../../../src/components/PageTemplates/GalleryPage.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC, PropsWithoutRef, forwardRef, Ref, MouseEvent, useEffect } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n Flex,\n Grid,\n Button,\n NoChildrenProp,\n ShowMoreLess,\n Text,\n defaultThemeProp,\n useConfiguration,\n focusHeadingOrContainer,\n useConsolidatedRef\n} from '@pega/cosmos-react-core';\n\nimport SummaryCard, { SummaryCardProps } from '../SummaryCard';\nimport PageBanner, { PageBannerProps } from '../PageBanner';\n\ninterface EmptyStateProps {\n heading: string;\n description?: string;\n}\n\nexport interface GalleryPageProps extends NoChildrenProp, PageBannerProps {\n /** Props to render the empty state content. */\n emptyState: EmptyStateProps;\n /** A list of cards to render as a grid. */\n items?: SummaryCardProps[];\n /** Callback function that is fired when an item is clicked. */\n onItemClick: (id: SummaryCardProps['id'], e: MouseEvent<HTMLDivElement>) => void;\n /** Ref for the wrapping element. */\n ref?: Ref<HTMLDivElement>;\n}\n\nexport const StyledGalleryPage = styled.div`\n min-height: inherit;\n`;\n\nexport const StyledContent = styled.div(({ theme }) => {\n return css`\n padding-block: calc(3 * ${theme.base.spacing});\n padding-inline: calc(4 * ${theme.base.spacing});\n min-height: 100%;\n `;\n});\n\nStyledContent.defaultProps = defaultThemeProp;\n\nconst SummaryCardList: FC<{\n items: GalleryPageProps['items'];\n onItemClick: GalleryPageProps['onItemClick'];\n}> = ({ items, onItemClick }) => {\n return (\n <Grid\n container={{\n cols: 'repeat(auto-fill, minmax(18.75rem, 1fr))',\n autoRows: '10rem',\n gap: 2\n }}\n >\n {items && items.map(item => <SummaryCard key={item.id} {...item} onClick={onItemClick} />)}\n </Grid>\n );\n};\n\nconst EmptyState: FC<EmptyStateProps & Pick<GalleryPageProps, 'actions'>> = ({\n heading,\n description,\n actions\n}) => {\n return (\n <Flex\n container={{ direction: 'column', alignItems: 'center', justify: 'center', rowGap: 2 }}\n item={{ grow: 1 }}\n >\n <Text variant='h2'>{heading}</Text>\n {description && (\n <ShowMoreLess lines={2}>\n <Text as='p'>{description}</Text>\n </ShowMoreLess>\n )}\n {!!actions?.length &&\n actions.map(action => (\n <Button key={action.label} variant='primary' onClick={action.onClick}>\n {action.label}\n </Button>\n ))}\n </Flex>\n );\n};\n\nconst GalleryPage: FC<GalleryPageProps> = forwardRef(\n (\n {\n title,\n description,\n image,\n items,\n onItemClick,\n emptyState,\n actions,\n link\n }: PropsWithoutRef<GalleryPageProps>,\n ref: GalleryPageProps['ref']\n ) => {\n const { loadedRef } = useConfiguration();\n const pageRef = useConsolidatedRef(ref);\n\n // Focus heading on initial mount\n useEffect(() => {\n if (!pageRef.current) return;\n\n if (loadedRef.current) {\n focusHeadingOrContainer(pageRef.current, title);\n } else {\n loadedRef.current = true;\n }\n }, [title]);\n\n const noItems = !items || items.length === 0;\n\n return (\n <StyledGalleryPage ref={pageRef}>\n <PageBanner\n title={title}\n description={description}\n actions={noItems ? undefined : actions}\n link={link}\n image={image}\n />\n <StyledContent>\n {noItems ? (\n <EmptyState {...emptyState} actions={actions} />\n ) : (\n <SummaryCardList items={items} onItemClick={onItemClick} />\n )}\n </StyledContent>\n </StyledGalleryPage>\n );\n }\n);\n\nexport default GalleryPage;\n"]}
1
+ {"version":3,"file":"GalleryPage.js","sourceRoot":"","sources":["../../../src/components/PageTemplates/GalleryPage.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC, PropsWithoutRef, forwardRef, Ref, MouseEvent, useEffect } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n Flex,\n Grid,\n Button,\n NoChildrenProp,\n ShowMoreLess,\n Text,\n defaultThemeProp,\n useConfiguration,\n focusHeadingOrContainer,\n useConsolidatedRef\n} from '@pega/cosmos-react-core';\n\nimport SummaryCard, { SummaryCardProps } from '../SummaryCard';\nimport PageBanner, { PageBannerProps } from '../PageBanner';\n\ninterface EmptyStateProps {\n heading: string;\n description?: string;\n}\n\nexport interface GalleryPageProps extends NoChildrenProp, PageBannerProps {\n /** Props to render the empty state content. */\n emptyState: EmptyStateProps;\n /** A list of cards to render as a grid. */\n items?: SummaryCardProps[];\n /** Callback function that is fired when an item is clicked. */\n onItemClick: (id: SummaryCardProps['id'], e: MouseEvent<HTMLDivElement>) => void;\n /** Ref for the wrapping element. */\n ref?: Ref<HTMLDivElement>;\n}\n\nexport const StyledGalleryPage = styled.div`\n min-height: inherit;\n`;\n\nexport const StyledContent = styled.div(({ theme }) => {\n return css`\n padding-block: calc(3 * ${theme.base.spacing});\n padding-inline: calc(4 * ${theme.base.spacing});\n min-height: 100%;\n `;\n});\n\nStyledContent.defaultProps = defaultThemeProp;\n\nconst SummaryCardList: FC<{\n items: GalleryPageProps['items'];\n onItemClick: GalleryPageProps['onItemClick'];\n}> = ({ items, onItemClick }) => {\n return (\n <Grid\n container={{\n cols: 'repeat(auto-fill, minmax(18.75rem, 1fr))',\n autoRows: '10rem',\n gap: 2\n }}\n >\n {items && items.map(item => <SummaryCard key={item.id} {...item} onClick={onItemClick} />)}\n </Grid>\n );\n};\n\nconst EmptyState: FC<EmptyStateProps & Pick<GalleryPageProps, 'actions'>> = ({\n heading,\n description,\n actions\n}) => {\n return (\n <Flex\n container={{ direction: 'column', alignItems: 'center', justify: 'center', rowGap: 2 }}\n item={{ grow: 1 }}\n >\n <Text variant='h2'>{heading}</Text>\n {description && (\n <ShowMoreLess lines={2}>\n <Text as='p'>{description}</Text>\n </ShowMoreLess>\n )}\n {!!actions?.length &&\n actions.map(action => (\n <Button key={action.label} variant='primary' onClick={action.onClick}>\n {action.label}\n </Button>\n ))}\n </Flex>\n );\n};\n\nconst GalleryPage: FC<GalleryPageProps> = forwardRef(function GalleryPage(\n {\n title,\n description,\n image,\n items,\n onItemClick,\n emptyState,\n actions,\n link\n }: PropsWithoutRef<GalleryPageProps>,\n ref: GalleryPageProps['ref']\n) {\n const { loadedRef } = useConfiguration();\n const pageRef = useConsolidatedRef(ref);\n\n // Focus heading on initial mount\n useEffect(() => {\n if (!pageRef.current) return;\n\n if (loadedRef.current) {\n focusHeadingOrContainer(pageRef.current, title);\n } else {\n loadedRef.current = true;\n }\n }, [title]);\n\n const noItems = !items || items.length === 0;\n\n return (\n <StyledGalleryPage ref={pageRef}>\n <PageBanner\n title={title}\n description={description}\n actions={noItems ? undefined : actions}\n link={link}\n image={image}\n />\n <StyledContent>\n {noItems ? (\n <EmptyState {...emptyState} actions={actions} />\n ) : (\n <SummaryCardList items={items} onItemClick={onItemClick} />\n )}\n </StyledContent>\n </StyledGalleryPage>\n );\n});\n\nexport default GalleryPage;\n"]}
@@ -14,7 +14,7 @@ export interface PageHeaderProps extends Pick<PageTemplateProps, 'title' | 'acti
14
14
  onEdit?: (e: MouseEvent<HTMLButtonElement>) => void;
15
15
  };
16
16
  }
17
- declare type OmittedPageProps = 'header' | 'scrollContent';
17
+ type OmittedPageProps = 'header' | 'scrollContent';
18
18
  export interface OneColumnPageProps extends OmitStrict<CoreOneColumnPageProps, OmittedPageProps>, PageHeaderProps {
19
19
  }
20
20
  export interface TabbedPageProps extends OmitStrict<CoreTabbedPageProps, OmittedPageProps>, PageHeaderProps {
@@ -1 +1 @@
1
- {"version":3,"file":"PageTemplates.d.ts","sourceRoot":"","sources":["../../../src/components/PageTemplates/PageTemplates.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,iBAAiB,EAEjB,UAAU,EAGX,MAAM,OAAO,CAAC;AAGf,OAAO,EAEL,kBAAkB,IAAI,sBAAsB,EAE5C,eAAe,IAAI,mBAAmB,EACtC,mBAAmB,EAQnB,YAAY,EAGZ,iBAAiB,EACjB,UAAU,EAEV,WAAW,EAQZ,MAAM,yBAAyB,CAAC;AAWjC,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;AA+BtB,eAAO,MAAM,UAAU,yGAiCtB,CAAC;AAIF,eAAO,MAAM,UAAU,mEAOpB,eAAe,gBAkDjB,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"}
1
+ {"version":3,"file":"PageTemplates.d.ts","sourceRoot":"","sources":["../../../src/components/PageTemplates/PageTemplates.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,iBAAiB,EAEjB,UAAU,EAGX,MAAM,OAAO,CAAC;AAGf,OAAO,EAEL,kBAAkB,IAAI,sBAAsB,EAE5C,eAAe,IAAI,mBAAmB,EACtC,mBAAmB,EAQnB,YAAY,EAGZ,iBAAiB,EACjB,UAAU,EAEV,WAAW,EAQZ,MAAM,yBAAyB,CAAC;AAWjC,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,KAAK,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;AA+BtB,eAAO,MAAM,UAAU,yGAiCtB,CAAC;AAIF,eAAO,MAAM,UAAU,mEAOpB,eAAe,gBAkDjB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,GAAG,YAAY,CAgBxE,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,GAAG,YAAY,CAoB9E,CAAC"}
@@ -63,10 +63,10 @@ export const PageHeader = ({ title, metadata, additionalInfo, actions, status, t
63
63
  additionalInfo.onEdit?.(e);
64
64
  }, children: t('edit_details') }))] }) }))] }), status && _jsx(Status, { variant: status.type, children: status.label })] }), secondary: metaListItems && _jsx(MetaList, { items: metaListItems }), actions: actions }));
65
65
  };
66
- export const TabbedPage = forwardRef(({ tabs, ...restProps }, ref) => {
66
+ export const TabbedPage = forwardRef(function TabbedPage({ tabs, ...restProps }, ref) {
67
67
  return (_jsx(CoreTabbedPage, { ...restProps, as: StyledPage, header: _jsx(PageHeader, { ...restProps }), tabs: tabs, ref: ref, scrollContent: true }));
68
68
  });
69
- export const OneColumnPage = forwardRef(({ a, ...restProps }, ref) => {
69
+ export const OneColumnPage = forwardRef(function OneColumnPage({ a, ...restProps }, ref) {
70
70
  return (_jsx(CoreOneColumnPage, { ...restProps, as: StyledPage, header: _jsx(PageHeader, { ...restProps }), scrollContent: true, a: a, ref: ref }));
71
71
  });
72
72
  //# sourceMappingURL=PageTemplates.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"PageTemplates.js","sourceRoot":"","sources":["../../../src/components/PageTemplates/PageTemplates.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n PropsWithoutRef,\n Ref,\n FunctionComponent,\n forwardRef,\n MouseEvent,\n useMemo,\n useRef\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n OneColumnPage as CoreOneColumnPage,\n OneColumnPageProps as CoreOneColumnPageProps,\n TabbedPage as CoreTabbedPage,\n TabbedPageProps as CoreTabbedPageProps,\n FieldValueListProps,\n Flex,\n Status,\n SummaryItem,\n Text,\n Button,\n Popover,\n FieldValueList,\n ForwardProps,\n defaultThemeProp,\n useI18n,\n PageTemplateProps,\n OmitStrict,\n StyledSummaryItemActions,\n StatusProps,\n registerIcon,\n StyledRegion,\n MetaList,\n StyledBreadcrumbs,\n StyledPageHeader,\n AdditionalInfo,\n DialogHandleValue\n} from '@pega/cosmos-react-core';\nimport * as nodesDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/nodes-down.icon';\nimport * as informationIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/information.icon';\nimport { StyledForm } from '@pega/cosmos-react-core/lib/components/MultiStepForm/MultiStepForm';\nimport { StyledBanner } from '@pega/cosmos-react-core/lib/components/Banner/Banner';\nimport { StyledTabs } from '@pega/cosmos-react-core/lib/components/Tabs/Tabs';\n\nimport { StyledWorkbench } from '../Workbench/Workbench.styles';\n\nregisterIcon(nodesDownIcon, informationIcon);\n\nexport interface PageHeaderProps extends Pick<PageTemplateProps, 'title' | 'actions'> {\n metadata?: FieldValueListProps['fields'];\n status?: { type: StatusProps['variant']; label: string };\n titleTag?: 'h1' | 'h2';\n additionalInfo?: {\n title: string;\n description?: string;\n fields: FieldValueListProps['fields'];\n onEdit?: (e: MouseEvent<HTMLButtonElement>) => void;\n };\n}\n\ntype OmittedPageProps = 'header' | 'scrollContent';\n\nexport interface OneColumnPageProps\n extends OmitStrict<CoreOneColumnPageProps, OmittedPageProps>,\n PageHeaderProps {}\n\nexport interface TabbedPageProps\n extends OmitStrict<CoreTabbedPageProps, OmittedPageProps>,\n PageHeaderProps {}\n\nconst StyledTextWithEllipsis: typeof Text = styled(Text)`\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n line-height: 1.15;\n`;\n\nconst StyledInfoPopover = styled(Popover)(\n ({\n theme: {\n base: { 'content-width': contentWidth }\n }\n }) => {\n return css`\n min-width: ${contentWidth.sm};\n max-width: ${contentWidth.md};\n overflow-wrap: break-word;\n `;\n }\n);\n\nStyledInfoPopover.defaultProps = defaultThemeProp;\n\nconst StyledHeaderContent = styled(SummaryItem)`\n ${StyledSummaryItemActions} {\n align-self: start;\n }\n`;\n\nexport const StyledPage = styled.div(\n ({\n theme: {\n base: {\n spacing,\n palette: { 'primary-background': primaryBackground }\n }\n }\n }) => {\n return css`\n background: ${primaryBackground};\n height: 100%;\n\n ${StyledBanner},\n ${StyledTabs} {\n margin-block-start: calc(1.5 * ${spacing});\n }\n\n ${StyledRegion} ${StyledWorkbench} {\n position: absolute;\n width: 100%;\n margin: 0 calc(-2 * ${spacing});\n }\n\n ${StyledRegion} ${StyledForm} {\n max-width: 80ch;\n }\n\n ${StyledPageHeader} > ${StyledBreadcrumbs} {\n margin-block-end: 0;\n }\n `;\n }\n);\n\nStyledPage.defaultProps = defaultThemeProp;\n\nexport const PageHeader = ({\n title,\n metadata,\n additionalInfo,\n actions,\n status,\n titleTag\n}: PageHeaderProps) => {\n const t = useI18n();\n\n const metaListItems = useMemo(\n () => metadata?.map(({ name, value }) => `${name}: ${value}`),\n [metadata]\n );\n\n const infoDialogHandle = useRef<DialogHandleValue>(null);\n\n return (\n <StyledHeaderContent\n container\n primary={\n <Flex container={{ alignItems: 'center', gap: 0.5, wrap: 'wrap' }}>\n <Flex container={{ gap: 0.5, alignItems: 'end' }} item={{ shrink: 0 }}>\n <StyledTextWithEllipsis variant='h1' forwardedAs={titleTag}>\n {title}\n </StyledTextWithEllipsis>\n {additionalInfo && (\n <AdditionalInfo heading={additionalInfo.title} dialogHandle={infoDialogHandle}>\n <Flex container={{ direction: 'column', alignItems: 'start', gap: 2 }}>\n <Flex\n container={{ direction: 'column', gap: 1 }}\n item={{ grow: 1, alignSelf: 'stretch' }}\n >\n {additionalInfo.description && <Text as='p'>{additionalInfo.description}</Text>}\n <FieldValueList variant='inline' fields={additionalInfo.fields} />\n </Flex>\n {additionalInfo.onEdit && (\n <Button\n onClick={(e: MouseEvent<HTMLButtonElement>) => {\n infoDialogHandle.current?.close();\n additionalInfo.onEdit?.(e);\n }}\n >\n {t('edit_details')}\n </Button>\n )}\n </Flex>\n </AdditionalInfo>\n )}\n </Flex>\n {status && <Status variant={status.type}>{status.label}</Status>}\n </Flex>\n }\n secondary={metaListItems && <MetaList items={metaListItems} />}\n actions={actions}\n />\n );\n};\n\nexport const TabbedPage: FunctionComponent<TabbedPageProps & ForwardProps> = forwardRef(\n ({ tabs, ...restProps }: PropsWithoutRef<TabbedPageProps>, ref: Ref<HTMLDivElement>) => {\n return (\n <CoreTabbedPage\n {...restProps}\n as={StyledPage}\n header={<PageHeader {...restProps} />}\n tabs={tabs}\n ref={ref}\n scrollContent\n />\n );\n }\n);\n\nexport const OneColumnPage: FunctionComponent<OneColumnPageProps & ForwardProps> = forwardRef(\n (\n {\n a,\n\n ...restProps\n }: PropsWithoutRef<OneColumnPageProps>,\n ref: Ref<HTMLDivElement>\n ) => {\n return (\n <CoreOneColumnPage\n {...restProps}\n as={StyledPage}\n header={<PageHeader {...restProps} />}\n scrollContent\n a={a}\n ref={ref}\n />\n );\n }\n);\n"]}
1
+ {"version":3,"file":"PageTemplates.js","sourceRoot":"","sources":["../../../src/components/PageTemplates/PageTemplates.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n PropsWithoutRef,\n Ref,\n FunctionComponent,\n forwardRef,\n MouseEvent,\n useMemo,\n useRef\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n OneColumnPage as CoreOneColumnPage,\n OneColumnPageProps as CoreOneColumnPageProps,\n TabbedPage as CoreTabbedPage,\n TabbedPageProps as CoreTabbedPageProps,\n FieldValueListProps,\n Flex,\n Status,\n SummaryItem,\n Text,\n Button,\n Popover,\n FieldValueList,\n ForwardProps,\n defaultThemeProp,\n useI18n,\n PageTemplateProps,\n OmitStrict,\n StyledSummaryItemActions,\n StatusProps,\n registerIcon,\n StyledRegion,\n MetaList,\n StyledBreadcrumbs,\n StyledPageHeader,\n AdditionalInfo,\n DialogHandleValue\n} from '@pega/cosmos-react-core';\nimport * as nodesDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/nodes-down.icon';\nimport * as informationIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/information.icon';\nimport { StyledForm } from '@pega/cosmos-react-core/lib/components/MultiStepForm/MultiStepForm';\nimport { StyledBanner } from '@pega/cosmos-react-core/lib/components/Banner/Banner';\nimport { StyledTabs } from '@pega/cosmos-react-core/lib/components/Tabs/Tabs';\n\nimport { StyledWorkbench } from '../Workbench/Workbench.styles';\n\nregisterIcon(nodesDownIcon, informationIcon);\n\nexport interface PageHeaderProps extends Pick<PageTemplateProps, 'title' | 'actions'> {\n metadata?: FieldValueListProps['fields'];\n status?: { type: StatusProps['variant']; label: string };\n titleTag?: 'h1' | 'h2';\n additionalInfo?: {\n title: string;\n description?: string;\n fields: FieldValueListProps['fields'];\n onEdit?: (e: MouseEvent<HTMLButtonElement>) => void;\n };\n}\n\ntype OmittedPageProps = 'header' | 'scrollContent';\n\nexport interface OneColumnPageProps\n extends OmitStrict<CoreOneColumnPageProps, OmittedPageProps>,\n PageHeaderProps {}\n\nexport interface TabbedPageProps\n extends OmitStrict<CoreTabbedPageProps, OmittedPageProps>,\n PageHeaderProps {}\n\nconst StyledTextWithEllipsis: typeof Text = styled(Text)`\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n line-height: 1.15;\n`;\n\nconst StyledInfoPopover = styled(Popover)(\n ({\n theme: {\n base: { 'content-width': contentWidth }\n }\n }) => {\n return css`\n min-width: ${contentWidth.sm};\n max-width: ${contentWidth.md};\n overflow-wrap: break-word;\n `;\n }\n);\n\nStyledInfoPopover.defaultProps = defaultThemeProp;\n\nconst StyledHeaderContent = styled(SummaryItem)`\n ${StyledSummaryItemActions} {\n align-self: start;\n }\n`;\n\nexport const StyledPage = styled.div(\n ({\n theme: {\n base: {\n spacing,\n palette: { 'primary-background': primaryBackground }\n }\n }\n }) => {\n return css`\n background: ${primaryBackground};\n height: 100%;\n\n ${StyledBanner},\n ${StyledTabs} {\n margin-block-start: calc(1.5 * ${spacing});\n }\n\n ${StyledRegion} ${StyledWorkbench} {\n position: absolute;\n width: 100%;\n margin: 0 calc(-2 * ${spacing});\n }\n\n ${StyledRegion} ${StyledForm} {\n max-width: 80ch;\n }\n\n ${StyledPageHeader} > ${StyledBreadcrumbs} {\n margin-block-end: 0;\n }\n `;\n }\n);\n\nStyledPage.defaultProps = defaultThemeProp;\n\nexport const PageHeader = ({\n title,\n metadata,\n additionalInfo,\n actions,\n status,\n titleTag\n}: PageHeaderProps) => {\n const t = useI18n();\n\n const metaListItems = useMemo(\n () => metadata?.map(({ name, value }) => `${name}: ${value}`),\n [metadata]\n );\n\n const infoDialogHandle = useRef<DialogHandleValue>(null);\n\n return (\n <StyledHeaderContent\n container\n primary={\n <Flex container={{ alignItems: 'center', gap: 0.5, wrap: 'wrap' }}>\n <Flex container={{ gap: 0.5, alignItems: 'end' }} item={{ shrink: 0 }}>\n <StyledTextWithEllipsis variant='h1' forwardedAs={titleTag}>\n {title}\n </StyledTextWithEllipsis>\n {additionalInfo && (\n <AdditionalInfo heading={additionalInfo.title} dialogHandle={infoDialogHandle}>\n <Flex container={{ direction: 'column', alignItems: 'start', gap: 2 }}>\n <Flex\n container={{ direction: 'column', gap: 1 }}\n item={{ grow: 1, alignSelf: 'stretch' }}\n >\n {additionalInfo.description && <Text as='p'>{additionalInfo.description}</Text>}\n <FieldValueList variant='inline' fields={additionalInfo.fields} />\n </Flex>\n {additionalInfo.onEdit && (\n <Button\n onClick={(e: MouseEvent<HTMLButtonElement>) => {\n infoDialogHandle.current?.close();\n additionalInfo.onEdit?.(e);\n }}\n >\n {t('edit_details')}\n </Button>\n )}\n </Flex>\n </AdditionalInfo>\n )}\n </Flex>\n {status && <Status variant={status.type}>{status.label}</Status>}\n </Flex>\n }\n secondary={metaListItems && <MetaList items={metaListItems} />}\n actions={actions}\n />\n );\n};\n\nexport const TabbedPage: FunctionComponent<TabbedPageProps & ForwardProps> = forwardRef(\n function TabbedPage(\n { tabs, ...restProps }: PropsWithoutRef<TabbedPageProps>,\n ref: Ref<HTMLDivElement>\n ) {\n return (\n <CoreTabbedPage\n {...restProps}\n as={StyledPage}\n header={<PageHeader {...restProps} />}\n tabs={tabs}\n ref={ref}\n scrollContent\n />\n );\n }\n);\n\nexport const OneColumnPage: FunctionComponent<OneColumnPageProps & ForwardProps> = forwardRef(\n function OneColumnPage(\n {\n a,\n\n ...restProps\n }: PropsWithoutRef<OneColumnPageProps>,\n ref: Ref<HTMLDivElement>\n ) {\n return (\n <CoreOneColumnPage\n {...restProps}\n as={StyledPage}\n header={<PageHeader {...restProps} />}\n scrollContent\n a={a}\n ref={ref}\n />\n );\n }\n);\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"ShowcasePage.d.ts","sourceRoot":"","sources":["../../../src/components/PageTemplates/ShowcasePage.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAA+B,GAAG,EAAE,SAAS,EAAa,MAAM,OAAO,CAAC;AAGnF,OAAO,EAEL,cAAc,EAIf,MAAM,yBAAyB,CAAC;AAEjC,OAAmB,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAE5D,MAAM,WAAW,iBAAkB,SAAQ,cAAc,EAAE,eAAe;IACxE,wDAAwD;IACxD,OAAO,EAAE,SAAS,CAAC;IACnB,uEAAuE;IACvE,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,eAAO,MAAM,kBAAkB,yGAE9B,CAAC;AAEF,eAAO,MAAM,aAAa,yGAEzB,CAAC;AAEF,QAAA,MAAM,YAAY,EAAE,EAAE,CAAC,iBAAiB,CA2CvC,CAAC;AAEF,eAAe,YAAY,CAAC"}
1
+ {"version":3,"file":"ShowcasePage.d.ts","sourceRoot":"","sources":["../../../src/components/PageTemplates/ShowcasePage.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAA+B,GAAG,EAAE,SAAS,EAAa,MAAM,OAAO,CAAC;AAGnF,OAAO,EAEL,cAAc,EAIf,MAAM,yBAAyB,CAAC;AAEjC,OAAmB,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAE5D,MAAM,WAAW,iBAAkB,SAAQ,cAAc,EAAE,eAAe;IACxE,wDAAwD;IACxD,OAAO,EAAE,SAAS,CAAC;IACnB,uEAAuE;IACvE,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,eAAO,MAAM,kBAAkB,yGAE9B,CAAC;AAEF,eAAO,MAAM,aAAa,yGAEzB,CAAC;AAEF,QAAA,MAAM,YAAY,EAAE,EAAE,CAAC,iBAAiB,CAyCtC,CAAC;AAEH,eAAe,YAAY,CAAC"}
@@ -9,7 +9,7 @@ export const StyledShowcasePage = styled.div `
9
9
  export const StyledContent = styled.div `
10
10
  min-height: 100%;
11
11
  `;
12
- const ShowcasePage = forwardRef(({ title, description, image, actions, link, content, banners }, ref) => {
12
+ const ShowcasePage = forwardRef(function ShowcasePage({ title, description, image, actions, link, content, banners }, ref) {
13
13
  const { loadedRef } = useConfiguration();
14
14
  const pageRef = useConsolidatedRef(ref);
15
15
  // Focus heading on initial mount
@@ -1 +1 @@
1
- {"version":3,"file":"ShowcasePage.js","sourceRoot":"","sources":["../../../src/components/PageTemplates/ShowcasePage.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAuB,UAAU,EAAkB,SAAS,EAAE,MAAM,OAAO,CAAC;AACnF,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EACL,IAAI,EAEJ,uBAAuB,EACvB,gBAAgB,EAChB,kBAAkB,EACnB,MAAM,yBAAyB,CAAC;AAEjC,OAAO,UAA+B,MAAM,eAAe,CAAC;AAW5D,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAAA;;CAE3C,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAA;;CAEtC,CAAC;AAEF,MAAM,YAAY,GAA0B,UAAU,CACpD,CACE,EACE,KAAK,EACL,WAAW,EACX,KAAK,EACL,OAAO,EACP,IAAI,EACJ,OAAO,EACP,OAAO,EAC4B,EACrC,GAA6B,EAC7B,EAAE;IACF,MAAM,EAAE,SAAS,EAAE,GAAG,gBAAgB,EAAE,CAAC;IACzC,MAAM,OAAO,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC;IAExC,iCAAiC;IACjC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,OAAO,CAAC,OAAO;YAAE,OAAO;QAE7B,IAAI,SAAS,CAAC,OAAO,EAAE;YACrB,uBAAuB,CAAC,OAAO,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;SACjD;aAAM;YACL,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC;SAC1B;IACH,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,OAAO,CACL,MAAC,kBAAkB,IAAC,GAAG,EAAE,OAAO,aAC9B,KAAC,UAAU,IACT,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EACxB,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,GACZ,EACF,MAAC,IAAI,IAAC,EAAE,EAAE,aAAa,EAAE,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,aAC7E,OAAO,EACP,OAAO,IACH,IACY,CACtB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import { FC, PropsWithoutRef, forwardRef, Ref, ReactNode, useEffect } from 'react';\nimport styled from 'styled-components';\n\nimport {\n Flex,\n NoChildrenProp,\n focusHeadingOrContainer,\n useConfiguration,\n useConsolidatedRef\n} from '@pega/cosmos-react-core';\n\nimport PageBanner, { PageBannerProps } from '../PageBanner';\n\nexport interface ShowcasePageProps extends NoChildrenProp, PageBannerProps {\n /** Content to render in the main region of the page. */\n content: ReactNode;\n /** Banners will render above the main content if they are provided. */\n banners?: ReactNode;\n /** Ref for the wrapping element. */\n ref?: Ref<HTMLDivElement>;\n}\n\nexport const StyledShowcasePage = styled.div`\n min-height: inherit;\n`;\n\nexport const StyledContent = styled.div`\n min-height: 100%;\n`;\n\nconst ShowcasePage: FC<ShowcasePageProps> = forwardRef(\n (\n {\n title,\n description,\n image,\n actions,\n link,\n content,\n banners\n }: PropsWithoutRef<ShowcasePageProps>,\n ref: ShowcasePageProps['ref']\n ) => {\n const { loadedRef } = useConfiguration();\n const pageRef = useConsolidatedRef(ref);\n\n // Focus heading on initial mount\n useEffect(() => {\n if (!pageRef.current) return;\n\n if (loadedRef.current) {\n focusHeadingOrContainer(pageRef.current, title);\n } else {\n loadedRef.current = true;\n }\n }, [title]);\n\n return (\n <StyledShowcasePage ref={pageRef}>\n <PageBanner\n title={title}\n description={description}\n actions={actions}\n link={link}\n image={image}\n />\n <Flex as={StyledContent} container={{ direction: 'column', pad: [2, 4], gap: 2 }}>\n {banners}\n {content}\n </Flex>\n </StyledShowcasePage>\n );\n }\n);\n\nexport default ShowcasePage;\n"]}
1
+ {"version":3,"file":"ShowcasePage.js","sourceRoot":"","sources":["../../../src/components/PageTemplates/ShowcasePage.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAuB,UAAU,EAAkB,SAAS,EAAE,MAAM,OAAO,CAAC;AACnF,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EACL,IAAI,EAEJ,uBAAuB,EACvB,gBAAgB,EAChB,kBAAkB,EACnB,MAAM,yBAAyB,CAAC;AAEjC,OAAO,UAA+B,MAAM,eAAe,CAAC;AAW5D,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAAA;;CAE3C,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAA;;CAEtC,CAAC;AAEF,MAAM,YAAY,GAA0B,UAAU,CAAC,SAAS,YAAY,CAC1E,EACE,KAAK,EACL,WAAW,EACX,KAAK,EACL,OAAO,EACP,IAAI,EACJ,OAAO,EACP,OAAO,EAC4B,EACrC,GAA6B;IAE7B,MAAM,EAAE,SAAS,EAAE,GAAG,gBAAgB,EAAE,CAAC;IACzC,MAAM,OAAO,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC;IAExC,iCAAiC;IACjC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,OAAO,CAAC,OAAO;YAAE,OAAO;QAE7B,IAAI,SAAS,CAAC,OAAO,EAAE;YACrB,uBAAuB,CAAC,OAAO,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;SACjD;aAAM;YACL,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC;SAC1B;IACH,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,OAAO,CACL,MAAC,kBAAkB,IAAC,GAAG,EAAE,OAAO,aAC9B,KAAC,UAAU,IACT,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EACxB,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,GACZ,EACF,MAAC,IAAI,IAAC,EAAE,EAAE,aAAa,EAAE,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,aAC7E,OAAO,EACP,OAAO,IACH,IACY,CACtB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,YAAY,CAAC","sourcesContent":["import { FC, PropsWithoutRef, forwardRef, Ref, ReactNode, useEffect } from 'react';\nimport styled from 'styled-components';\n\nimport {\n Flex,\n NoChildrenProp,\n focusHeadingOrContainer,\n useConfiguration,\n useConsolidatedRef\n} from '@pega/cosmos-react-core';\n\nimport PageBanner, { PageBannerProps } from '../PageBanner';\n\nexport interface ShowcasePageProps extends NoChildrenProp, PageBannerProps {\n /** Content to render in the main region of the page. */\n content: ReactNode;\n /** Banners will render above the main content if they are provided. */\n banners?: ReactNode;\n /** Ref for the wrapping element. */\n ref?: Ref<HTMLDivElement>;\n}\n\nexport const StyledShowcasePage = styled.div`\n min-height: inherit;\n`;\n\nexport const StyledContent = styled.div`\n min-height: 100%;\n`;\n\nconst ShowcasePage: FC<ShowcasePageProps> = forwardRef(function ShowcasePage(\n {\n title,\n description,\n image,\n actions,\n link,\n content,\n banners\n }: PropsWithoutRef<ShowcasePageProps>,\n ref: ShowcasePageProps['ref']\n) {\n const { loadedRef } = useConfiguration();\n const pageRef = useConsolidatedRef(ref);\n\n // Focus heading on initial mount\n useEffect(() => {\n if (!pageRef.current) return;\n\n if (loadedRef.current) {\n focusHeadingOrContainer(pageRef.current, title);\n } else {\n loadedRef.current = true;\n }\n }, [title]);\n\n return (\n <StyledShowcasePage ref={pageRef}>\n <PageBanner\n title={title}\n description={description}\n actions={actions}\n link={link}\n image={image}\n />\n <Flex as={StyledContent} container={{ direction: 'column', pad: [2, 4], gap: 2 }}>\n {banners}\n {content}\n </Flex>\n </StyledShowcasePage>\n );\n});\n\nexport default ShowcasePage;\n"]}
@@ -1,7 +1,6 @@
1
- export { OneColumnPage } from './PageTemplates';
2
- export { TabbedPage } from './PageTemplates';
1
+ export { OneColumnPage, TabbedPage } from './PageTemplates';
3
2
  export { default as GalleryPage, StyledGalleryPage } from './GalleryPage';
4
- export { GalleryPageProps } from './GalleryPage';
3
+ export type { GalleryPageProps } from './GalleryPage';
5
4
  export { default as ShowcasePage, StyledShowcasePage } from './ShowcasePage';
6
- export { ShowcasePageProps } from './ShowcasePage';
5
+ export type { ShowcasePageProps } from './ShowcasePage';
7
6
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/PageTemplates/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAC1E,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AAC7E,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/PageTemplates/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAC1E,YAAY,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AAC7E,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC"}
@@ -1,5 +1,4 @@
1
- export { OneColumnPage } from './PageTemplates';
2
- export { TabbedPage } from './PageTemplates';
1
+ export { OneColumnPage, TabbedPage } from './PageTemplates';
3
2
  export { default as GalleryPage, StyledGalleryPage } from './GalleryPage';
4
3
  export { default as ShowcasePage, StyledShowcasePage } from './ShowcasePage';
5
4
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/PageTemplates/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAE1E,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC","sourcesContent":["export { OneColumnPage } from './PageTemplates';\nexport { TabbedPage } from './PageTemplates';\nexport { default as GalleryPage, StyledGalleryPage } from './GalleryPage';\nexport { GalleryPageProps } from './GalleryPage';\nexport { default as ShowcasePage, StyledShowcasePage } from './ShowcasePage';\nexport { ShowcasePageProps } from './ShowcasePage';\n"]}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/PageTemplates/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAE1E,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC","sourcesContent":["export { OneColumnPage, TabbedPage } from './PageTemplates';\nexport { default as GalleryPage, StyledGalleryPage } from './GalleryPage';\nexport type { GalleryPageProps } from './GalleryPage';\nexport { default as ShowcasePage, StyledShowcasePage } from './ShowcasePage';\nexport type { ShowcasePageProps } from './ShowcasePage';\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"SummaryCard.d.ts","sourceRoot":"","sources":["../../../src/components/SummaryCard/SummaryCard.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,EACL,IAAI,EAGJ,IAAI,EAGJ,aAAa,EACb,cAAc,EACd,UAAU,EACV,WAAW,EAGZ,MAAM,yBAAyB,CAAC;AAGjC,MAAM,WAAW,gBAAiB,SAAQ,cAAc;IACtD,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,UAAU,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IAC9D,IAAI,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAC7B,MAAM,CAAC,EAAE,UAAU,CAAC,WAAW,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC,CAAC;CACxE;AAED,eAAO,MAAM,WAAW,EAAE,OAAO,IAIhC,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,OAAO,IAerC,CAAC;AAIH,QAAA,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,CAkBrC,CAAC;AAEF,eAAe,WAAW,CAAC"}
1
+ {"version":3,"file":"SummaryCard.d.ts","sourceRoot":"","sources":["../../../src/components/SummaryCard/SummaryCard.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,EACL,IAAI,EAGJ,IAAI,EAGJ,aAAa,EACb,cAAc,EACd,UAAU,EACV,WAAW,EAEZ,MAAM,yBAAyB,CAAC;AAGjC,MAAM,WAAW,gBAAiB,SAAQ,cAAc;IACtD,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,UAAU,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IAC9D,IAAI,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAC7B,MAAM,CAAC,EAAE,UAAU,CAAC,WAAW,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC,CAAC;CACxE;AAED,eAAO,MAAM,WAAW,EAAE,OAAO,IAIhC,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,OAAO,IAWrC,CAAC;AAIH,QAAA,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,CAkBrC,CAAC;AAEF,eAAe,WAAW,CAAC"}
@@ -1,6 +1,6 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import styled, { css } from 'styled-components';
3
- import { Text, Flex, MetaList, Card, Avatar, defaultThemeProp, StyledAvatar, ShowMoreLess } from '@pega/cosmos-react-core';
3
+ import { Text, Flex, MetaList, Card, Avatar, defaultThemeProp, ShowMoreLess } from '@pega/cosmos-react-core';
4
4
  import BareRoleButton from '@pega/cosmos-react-core/lib/components/Button/BareRoleButton';
5
5
  export const StyledTitle = styled(Text) `
6
6
  overflow: hidden;
@@ -17,10 +17,6 @@ export const StyledSummaryCard = styled(Card)(({ theme }) => {
17
17
  cursor: pointer;
18
18
  box-shadow: ${theme.base.shadow.focus};
19
19
  }
20
-
21
- ${StyledAvatar} {
22
- flex-shrink: 0;
23
- }
24
20
  `;
25
21
  });
26
22
  StyledSummaryCard.defaultProps = defaultThemeProp;
@@ -1 +1 @@
1
- {"version":3,"file":"SummaryCard.js","sourceRoot":"","sources":["../../../src/components/SummaryCard/SummaryCard.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,IAAI,EACJ,MAAM,EACN,gBAAgB,EAKhB,YAAY,EACZ,YAAY,EACb,MAAM,yBAAyB,CAAC;AACjC,OAAO,cAAc,MAAM,8DAA8D,CAAC;AAW1F,MAAM,CAAC,MAAM,WAAW,GAAgB,MAAM,CAAC,IAAI,CAAC,CAAA;;;;CAInD,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAgB,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACvE,OAAO,GAAG,CAAA;wBACY,KAAK,CAAC,IAAI,CAAC,OAAO;;;;;;oBAMtB,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;;;MAGrC,YAAY;;;GAGf,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAElD,MAAM,WAAW,GAAyB,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE;IAC9F,OAAO,CACL,MAAC,cAAc,IACb,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,EACjE,EAAE,EAAE,iBAAiB,EAErB,OAAO,EAAE,CAAC,CAA6B,EAAE,EAAE,CAAC,OAAO,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,aAE5D,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,EAAE,CAAC,EAAE,aACjD,MAAM,IAAI,KAAC,MAAM,OAAK,MAAM,EAAE,KAAK,EAAC,UAAU,EAAC,IAAI,EAAE,KAAK,GAAI,EAC/D,KAAC,WAAW,IAAC,OAAO,EAAC,IAAI,YAAE,KAAK,GAAe,IAC1C,EACP,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,YACrB,KAAC,YAAY,IAAC,KAAK,EAAE,CAAC,YAAG,WAAW,GAAgB,GAC/C,EACP,KAAC,QAAQ,IAAC,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,GAAI,KAVtC,EAAE,CAWQ,CAClB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import { FC, MouseEvent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n Text,\n Flex,\n MetaList,\n Card,\n Avatar,\n defaultThemeProp,\n MetaListProps,\n NoChildrenProp,\n OmitStrict,\n AvatarProps,\n StyledAvatar,\n ShowMoreLess\n} from '@pega/cosmos-react-core';\nimport BareRoleButton from '@pega/cosmos-react-core/lib/components/Button/BareRoleButton';\n\nexport interface SummaryCardProps extends NoChildrenProp {\n id: string;\n title: string;\n description?: string;\n onClick?: (id: string, e: MouseEvent<HTMLDivElement>) => void;\n meta: MetaListProps['items'];\n visual?: OmitStrict<AvatarProps, 'name' | 'shape' | 'size' | 'status'>;\n}\n\nexport const StyledTitle: typeof Text = styled(Text)`\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n`;\n\nexport const StyledSummaryCard: typeof Card = styled(Card)(({ theme }) => {\n return css`\n padding: calc(2 * ${theme.base.spacing});\n overflow-y: auto;\n\n &:hover,\n &:focus {\n cursor: pointer;\n box-shadow: ${theme.base.shadow.focus};\n }\n\n ${StyledAvatar} {\n flex-shrink: 0;\n }\n `;\n});\n\nStyledSummaryCard.defaultProps = defaultThemeProp;\n\nconst SummaryCard: FC<SummaryCardProps> = ({ id, title, description, visual, meta, onClick }) => {\n return (\n <BareRoleButton\n container={{ direction: 'column', rowGap: 2, justify: 'between' }}\n as={StyledSummaryCard}\n key={id}\n onClick={(e: MouseEvent<HTMLDivElement>) => onClick?.(id, e)}\n >\n <Flex container={{ alignItems: 'center', colGap: 1 }}>\n {visual && <Avatar {...visual} shape='squircle' name={title} />}\n <StyledTitle variant='h3'>{title}</StyledTitle>\n </Flex>\n <Flex item={{ grow: 1 }}>\n <ShowMoreLess lines={1}>{description}</ShowMoreLess>\n </Flex>\n <MetaList items={meta} wrapItems={false} />\n </BareRoleButton>\n );\n};\n\nexport default SummaryCard;\n"]}
1
+ {"version":3,"file":"SummaryCard.js","sourceRoot":"","sources":["../../../src/components/SummaryCard/SummaryCard.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,IAAI,EACJ,MAAM,EACN,gBAAgB,EAKhB,YAAY,EACb,MAAM,yBAAyB,CAAC;AACjC,OAAO,cAAc,MAAM,8DAA8D,CAAC;AAW1F,MAAM,CAAC,MAAM,WAAW,GAAgB,MAAM,CAAC,IAAI,CAAC,CAAA;;;;CAInD,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAgB,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACvE,OAAO,GAAG,CAAA;wBACY,KAAK,CAAC,IAAI,CAAC,OAAO;;;;;;oBAMtB,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;;GAExC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAElD,MAAM,WAAW,GAAyB,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE;IAC9F,OAAO,CACL,MAAC,cAAc,IACb,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,EACjE,EAAE,EAAE,iBAAiB,EAErB,OAAO,EAAE,CAAC,CAA6B,EAAE,EAAE,CAAC,OAAO,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,aAE5D,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,EAAE,CAAC,EAAE,aACjD,MAAM,IAAI,KAAC,MAAM,OAAK,MAAM,EAAE,KAAK,EAAC,UAAU,EAAC,IAAI,EAAE,KAAK,GAAI,EAC/D,KAAC,WAAW,IAAC,OAAO,EAAC,IAAI,YAAE,KAAK,GAAe,IAC1C,EACP,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,YACrB,KAAC,YAAY,IAAC,KAAK,EAAE,CAAC,YAAG,WAAW,GAAgB,GAC/C,EACP,KAAC,QAAQ,IAAC,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,GAAI,KAVtC,EAAE,CAWQ,CAClB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import { FC, MouseEvent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n Text,\n Flex,\n MetaList,\n Card,\n Avatar,\n defaultThemeProp,\n MetaListProps,\n NoChildrenProp,\n OmitStrict,\n AvatarProps,\n ShowMoreLess\n} from '@pega/cosmos-react-core';\nimport BareRoleButton from '@pega/cosmos-react-core/lib/components/Button/BareRoleButton';\n\nexport interface SummaryCardProps extends NoChildrenProp {\n id: string;\n title: string;\n description?: string;\n onClick?: (id: string, e: MouseEvent<HTMLDivElement>) => void;\n meta: MetaListProps['items'];\n visual?: OmitStrict<AvatarProps, 'name' | 'shape' | 'size' | 'status'>;\n}\n\nexport const StyledTitle: typeof Text = styled(Text)`\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n`;\n\nexport const StyledSummaryCard: typeof Card = styled(Card)(({ theme }) => {\n return css`\n padding: calc(2 * ${theme.base.spacing});\n overflow-y: auto;\n\n &:hover,\n &:focus {\n cursor: pointer;\n box-shadow: ${theme.base.shadow.focus};\n }\n `;\n});\n\nStyledSummaryCard.defaultProps = defaultThemeProp;\n\nconst SummaryCard: FC<SummaryCardProps> = ({ id, title, description, visual, meta, onClick }) => {\n return (\n <BareRoleButton\n container={{ direction: 'column', rowGap: 2, justify: 'between' }}\n as={StyledSummaryCard}\n key={id}\n onClick={(e: MouseEvent<HTMLDivElement>) => onClick?.(id, e)}\n >\n <Flex container={{ alignItems: 'center', colGap: 1 }}>\n {visual && <Avatar {...visual} shape='squircle' name={title} />}\n <StyledTitle variant='h3'>{title}</StyledTitle>\n </Flex>\n <Flex item={{ grow: 1 }}>\n <ShowMoreLess lines={1}>{description}</ShowMoreLess>\n </Flex>\n <MetaList items={meta} wrapItems={false} />\n </BareRoleButton>\n );\n};\n\nexport default SummaryCard;\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"Workbench.d.ts","sourceRoot":"","sources":["../../../src/components/Workbench/Workbench.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAiD,MAAM,OAAO,CAAC;AAE1E,OAAO,EAAQ,YAAY,EAAQ,MAAM,yBAAyB,CAAC;AAInE,OAAO,EAAqB,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAItE,QAAA,MAAM,SAAS,EAAE,EAAE,CAAC,cAAc,GAAG,YAAY,CA2DhD,CAAC;AAEF,eAAe,SAAS,CAAC"}
1
+ {"version":3,"file":"Workbench.d.ts","sourceRoot":"","sources":["../../../src/components/Workbench/Workbench.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAiD,MAAM,OAAO,CAAC;AAE1E,OAAO,EAAQ,YAAY,EAAQ,MAAM,yBAAyB,CAAC;AAInE,OAAO,EAAqB,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAItE,QAAA,MAAM,SAAS,EAAE,EAAE,CAAC,cAAc,GAAG,YAAY,CAyD/C,CAAC;AAEH,eAAe,SAAS,CAAC"}
@@ -5,7 +5,7 @@ import Toolbar from './Toolbar';
5
5
  import { StyledMain, StyledWorkbench } from './Workbench.styles';
6
6
  import ConfigurationPanel from './ConfigurationPanel';
7
7
  import UtilityPanel from './UtilityPanel';
8
- const Workbench = forwardRef(({ children, utilityPanels = [], configurationPanel, toolbar, initiallyVisiblePanelId }, ref) => {
8
+ const Workbench = forwardRef(function Workbench({ children, utilityPanels = [], configurationPanel, toolbar, initiallyVisiblePanelId }, ref) {
9
9
  const [currentlyOpenPanelId, setCurrentlyOpenPanelId] = useState(initiallyVisiblePanelId);
10
10
  const panelContentRef = useRef(utilityPanels.find(panel => panel.id === initiallyVisiblePanelId));
11
11
  const onToggle = (panelId) => {