npm - @pega/cosmos-react-build - Versions diffs - 3.0.0-dev.4.2 → 3.0.0-dev.5.0 - Mend

@pega/cosmos-react-build 3.0.0-dev.4.2 → 3.0.0-dev.5.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 (99) hide show

package/lib/components/LifeCycle/Step.js CHANGED Viewed

@@ -3,36 +3,9 @@ import { useState } from 'react';
 import styled, { css } from 'styled-components';
 import { readableColor } from 'polished';
 import { Flex, defaultThemeProp, Icon, Tooltip, useElement, Status, Actions, useI18n, Avatar, StyledTooltip } from '@pega/cosmos-react-core';
+import { colorMap } from '../../utils';
 export const StyledStepType = styled.div(({ theme, color, img }) => {
-    let bgColor = '';
-    switch (color) {
-        case 'magenta':
-            bgColor = '#AC1361';
-            break;
-        case 'studio':
-            bgColor = '#684AAE';
-            break;
-        case 'congressBlue':
-            bgColor = '#0076d1';
-            break;
-        case 'Japaneselaurel':
-            bgColor = '#27813E';
-            break;
-        case 'violet':
-            bgColor = '#8C479F';
-            break;
-        case 'yellow':
-            bgColor = '#f7a801';
-            break;
-        case 'darkyellow':
-            bgColor = '#f7951c';
-            break;
-        case 'orange':
-            bgColor = '#f46c22';
-            break;
-        default:
-            bgColor = '#27813E';
-    }
+    const bgColor = colorMap[color];
     const contrastColor = readableColor(bgColor);
     return img
         ? css `
@@ -48,6 +21,7 @@ export const StyledStepType = styled.div(({ theme, color, img }) => {
           border-radius: calc(0.25 * ${theme.base['border-radius']});
         `;
 });
+StyledStepType.defaultProps = defaultThemeProp;
 export const StyledStepBadge = styled.div(({ theme }) => {
     return css `
     padding: 0 calc(0.5 * ${theme.base.spacing});
@@ -61,6 +35,7 @@ export const StyledStepBadge = styled.div(({ theme }) => {
     }
   `;
 });
+StyledStepBadge.defaultProps = defaultThemeProp;
 const StyledStepValue = styled.div(({ theme, error }) => {
     return css `
     border-radius: calc(0.5 * ${theme.base['border-radius']});
@@ -70,6 +45,7 @@ const StyledStepValue = styled.div(({ theme, error }) => {
     `}
   `;
 });
+StyledStepValue.defaultProps = defaultThemeProp;
 export const StyledStepValueInput = styled.input(({ error, theme }) => {
     return css `
       height: ${theme.components.input.height};
@@ -105,6 +81,7 @@ export const StyledStepValueInput = styled.input(({ error, theme }) => {
           `}
     `;
 });
+StyledStepValueInput.defaultProps = defaultThemeProp;
 export const StyledStepStatus = styled.div(({ theme, badge, error }) => {
     return css `
     border: none;
@@ -126,6 +103,7 @@ export const StyledStepStatus = styled.div(({ theme, badge, error }) => {
     `}
   `;
 });
+StyledStepStatus.defaultProps = defaultThemeProp;
 export const StyledStep = styled.div(({ theme, error }) => {
     return css `
     background: ${theme.base.palette['secondary-background']};
@@ -245,7 +223,7 @@ const Step = ({ value, id, visual, actions, badge, error, onChange, categoryItem
         };
         onBlur?.(actionParam, e);
     };
-    return (_jsxs(Flex, { as: StyledStep, container: { inline: true }, error: error, children: [_jsxs(Flex, { as: StyledStepType, color: visual.color, ref: setIconEl, img: visual.imgurl, children: [visual.imgurl.length > 0 && (_jsx(Avatar, { name: visual.title || '', imageSrc: visual?.imgurl, shape: 'squircle', size: 'm' }, void 0)), !visual.imgurl && _jsx(Icon, { name: visual.icon }, void 0)] }, void 0), _jsx(Tooltip, { target: iconEl, children: visual.title }, void 0), _jsxs(Flex, { as: StyledStepValue, item: { grow: 2 }, error: error, container: { inline: true, alignItems: 'center' }, children: [_jsx(StyledStepValueInput, { value: stepValue, type: 'text', ref: setInputEl, error: error, onChange: onInputChange, "aria-label": stepValue, id: item.id, ...restProps, onFocus: onInputFocus, onBlur: onInputBlur }, void 0), badge?.type && (_jsx(Flex, { as: StyledStepBadge, container: { inline: true, alignItems: 'center' }, children: _jsx(Status, { variant: badge?.type || 'success', children: badge?.label }, void 0) }, void 0))] }, void 0), _jsx(Tooltip, { target: inputEl, hideDelay: 'none', children: error || tooltipValue || 'test' }, void 0), _jsx(Flex, { as: StyledStepStatus, ref: setActionEl, badge: badge?.type, error: error, children: actionsClone && _jsx(Actions, { items: actionsClone, menuAt: 2, iconOnly: true }, void 0) }, void 0), _jsx(Tooltip, { target: actionEl, "aria-hidden": 'true', children: actions && actions?.length > 1 ? actionsLabel : singleActionLabel }, void 0)] }, void 0));
+    return (_jsxs(Flex, { as: StyledStep, container: { inline: true }, error: error, children: [_jsxs(Flex, { as: StyledStepType, color: visual.color, ref: setIconEl, img: visual.imgurl, children: [visual.imgurl.length > 0 && (_jsx(Avatar, { name: visual.title || '', imageSrc: visual?.imgurl, shape: 'squircle', size: 'm' })), !visual.imgurl && _jsx(Icon, { name: visual.icon })] }), _jsx(Tooltip, { target: iconEl, children: visual.title }), _jsxs(Flex, { as: StyledStepValue, item: { grow: 2 }, error: error, container: { inline: true, alignItems: 'center' }, children: [_jsx(StyledStepValueInput, { value: stepValue, type: 'text', ref: setInputEl, error: error, onChange: onInputChange, "aria-label": stepValue, id: item.id, ...restProps, onFocus: onInputFocus, onBlur: onInputBlur }), badge?.type && (_jsx(Flex, { as: StyledStepBadge, container: { inline: true, alignItems: 'center' }, children: _jsx(Status, { variant: badge?.type || 'success', children: badge?.label }) }))] }), _jsx(Tooltip, { target: inputEl, hideDelay: 'none', children: error || tooltipValue || 'test' }), _jsx(Flex, { as: StyledStepStatus, ref: setActionEl, badge: badge?.type, error: error, children: actionsClone && _jsx(Actions, { items: actionsClone, menuAt: 2, iconOnly: true }) }), _jsx(Tooltip, { target: actionEl, "aria-hidden": 'true', children: actions && actions?.length > 1 ? actionsLabel : singleActionLabel })] }));
 };
 export default Step;
 //# sourceMappingURL=Step.js.map

package/lib/components/LifeCycle/Step.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Step.js","sourceRoot":"","sources":["../../../src/components/LifeCycle/Step.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n useState,\n FunctionComponent,\n PropsWithoutRef,\n ChangeEvent,\n FocusEvent,\n MouseEvent\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport { readableColor } from 'polished';\n\nimport {\n Flex,\n defaultThemeProp,\n BaseProps,\n ForwardProps,\n Icon,\n Tooltip,\n useElement,\n Status,\n FormControlProps,\n Actions,\n useI18n,\n Avatar,\n StyledTooltip,\n Action\n} from '@pega/cosmos-react-core';\n\nimport {\n TaskItemProps,\n StepItemProps,\n StageItemProps,\n CategoryItemProps,\n LifeCycleAction,\n LifeCycleActionParam\n} from './LifeCycle.types';\n\nexport interface StepProps extends Omit<FormControlProps, 'status' \| 'id'> {\n /** Pass an array of Action objects to append button(s) inline with the Input. /\n actions?: LifeCycleAction[];\n /* Input Change /\n onChange?: (param: LifeCycleActionParam, e: ChangeEvent<HTMLInputElement>) => void;\n /* callback for Focus of input /\n onFocus?: (param: LifeCycleActionParam, e: FocusEvent<HTMLInputElement>) => void;\n /* callback for Blur of input /\n onBlur?: (param: LifeCycleActionParam, e: FocusEvent<HTMLInputElement>) => void;\n}\n\ninterface StepComponentProps extends BaseProps, StepProps {\n /* Pass text for the step. /\n value?: string;\n /* step data id /\n id?: string;\n /* Determines the visual for icon, color and label to render.\n * This color is passed as a variant and accessible colors are used to display.\n * Icon and label are passed as normal string /\n visual: {\n imgurl: string;\n color:\n \| 'magenta'\n \| 'studio'\n \| 'congressBlue'\n \| 'Japaneselaurel'\n \| 'violet'\n \| 'yellow'\n \| 'orange'\n \| 'darkyellow';\n icon: string;\n title: string;\n };\n / Determines the variant and label for the badges /\n badge?: StepItemProps['status'];\n / The status is used to show the input error status and the info on tooltip in case of error /\n error?: string;\n / Data of the steps which can be used to send the full info back /\n item: StepItemProps;\n stageItem: StageItemProps;\n taskItem: TaskItemProps;\n categoryItem: CategoryItemProps;\n}\n\nexport const StyledStepType = styled.div<{ color: string; ref: HTMLDivElement; img: string }>(\n ({ theme, color, img }) => {\n let bgColor = '';\n switch (color) {\n case 'magenta':\n bgColor = '#AC1361';\n break;\n case 'studio':\n bgColor = '#684AAE';\n break;\n case 'congressBlue':\n bgColor = '#0076d1';\n break;\n case 'Japaneselaurel':\n bgColor = '#27813E';\n break;\n case 'violet':\n bgColor = '#8C479F';\n break;\n case 'yellow':\n bgColor = '#f7a801';\n break;\n case 'darkyellow':\n bgColor = '#f7951c';\n break;\n case 'orange':\n bgColor = '#f46c22';\n break;\n\n default:\n bgColor = '#27813E';\n }\n\n const contrastColor = readableColor(bgColor);\n return img\n ? css`\n height: 2rem;\n padding-inline-end: calc(0.25 ${theme.base.spacing});\n `\n : css`\n background: ${bgColor};\n margin: calc(0.5 * ${theme.base.spacing});\n padding: 0 calc(0.5 * ${theme.base.spacing});\n color: ${contrastColor};\n text-align: center;\n border-radius: calc(0.25 * ${theme.base['border-radius']});\n `;\n }\n);\n\nexport const StyledStepBadge = styled.div(({ theme }) => {\n return css`\n padding: 0 calc(0.5 * ${theme.base.spacing});\n justify-content: flex-end;\n width: auto;\n max-width: calc(50% - ${theme.base.spacing});\n > span {\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n }\n `;\n});\n\nconst StyledStepValue = styled.div<{ error: string }>(({ theme, error }) => {\n return css`\n border-radius: calc(0.5 * ${theme.base['border-radius']});\n ${error &&\n css`\n background: ${theme.base.colors.red['extra-light']};\n `}\n `;\n});\n\nexport const StyledStepValueInput = styled.input<{ error: string \| undefined }>(\n ({ error, theme }) => {\n return css`\n height: ${theme.components.input.height};\n padding: 0 calc(0.5 * ${theme.base.spacing});\n border: none;\n border-inline-start: 0.0625rem solid transparent;\n border-inline-end: 0.0625rem solid transparent;\n text-overflow: ellipsis;\n min-width: 40%;\n outline: none;\n &:hover {\n cursor: pointer;\n }\n &:disabled {\n cursor: not-allowed;\n }\n ${error\n ? css`\n background: ${theme.base.colors.red['extra-light']};\n &:focus:enabled {\n border-color: ${theme.base.colors.red.medium};\n }\n `\n : css`\n background: ${theme.base.palette['secondary-background']};\n &&:hover {\n background: ${theme.base.palette['app-background']};\n }\n &&:focus:enabled {\n background: ${theme.base.palette['primary-background']};\n border-color: ${theme.base.colors.blue.medium};\n }\n `}\n `;\n }\n);\n\nexport const StyledStepStatus = styled.div<{\n badge: string;\n error: string;\n}>(({ theme, badge, error }) => {\n return css`\n border: none;\n ${badge &&\n css`\n display: none;\n `}\n visibility: hidden;\n &:hover {\n cursor: pointer;\n }\n &:focus:not([disabled]) {\n outline: 0.0625rem solid ${theme.base.colors.blue.medium};\n }\n ${error &&\n !badge &&\n css`\n visibility: visible;\n `}\n `;\n});\n\nexport const StyledStep = styled.div<{ error: string }>(({ theme, error }) => {\n return css`\n background: ${theme.base.palette['secondary-background']};\n border: 0.0625rem solid transparent;\n border-radius: calc(0.5 * ${theme.base['border-radius']});\n margin: 0 0 calc(0.5 * ${theme.base.spacing});\n width: 100%;\n ${error &&\n css`\n border-color: ${theme.base.colors.red.medium};\n box-shadow: none;\n `}\n &:hover {\n cursor: pointer;\n ${StyledStepBadge} {\n ${css`\n display: none;\n `}\n }\n ${StyledStepStatus} {\n ${css`\n visibility: visible;\n display: inline-block;\n `}\n }\n }\n &:focus-within {\n ${!error &&\n css`\n border-color: ${theme.base.colors.blue.medium};\n box-shadow: ${theme.components['form-control'][':focus']['box-shadow']};\n `}\n ${StyledStepBadge} {\n ${css`\n display: none;\n `}\n }\n ${StyledStepStatus} {\n ${css`\n display: inline-block;\n visibility: visible;\n `}\n }\n ${StyledTooltip} {\n ${css`\n visibility: hidden;\n `}\n }\n }\n `;\n});\n\nStyledStep.defaultProps = defaultThemeProp;\n\nconst Step: FunctionComponent<StepComponentProps & ForwardProps> = ({\n value,\n id,\n visual,\n actions,\n badge,\n error,\n onChange,\n categoryItem,\n item,\n stageItem,\n taskItem,\n onFocus,\n onBlur,\n ...restProps\n}: PropsWithoutRef<StepComponentProps>) => {\n const t = useI18n();\n const [stepValue, setStepValue] = useState(value);\n const [iconEl, setIconEl] = useElement();\n const [actionEl, setActionEl] = useElement();\n const [inputEl, setInputEl] = useElement();\n const actionsLabel = t('actions');\n const singleActionLabel = (actions?.[0]?.text as string) ?? '';\n const tooltipValue = stepValue \|\| error;\n\n /* Need to check the value with statusProps /\n\n const onActionItemClick = (\n actionId: string,\n e: MouseEvent<HTMLInputElement \| HTMLAnchorElement \| HTMLButtonElement>\n ) => {\n const param: LifeCycleActionParam = {\n task: taskItem,\n stage: stageItem,\n step: item,\n category: categoryItem\n };\n actions?.forEach(actionItem => {\n if (actionItem.id === actionId) {\n actionItem.onClick(param, e);\n }\n });\n };\n / Deep copy of actions is required to provide consistent callback objects on actions */\n const actionsClone: Action[] = [];\n\n if (actions) {\n actions.forEach(actionItem => {\n const actionCloneItem = {} as Action;\n Object.keys(actionItem).forEach((key: string) => {\n actionCloneItem[key] = actionItem[key];\n });\n actionCloneItem.onClick = onActionItemClick;\n actionsClone.push(actionCloneItem);\n return actionItem;\n });\n }\n\n const onInputChange = (e: ChangeEvent<HTMLInputElement>) => {\n setStepValue(e.target.value);\n const actionParam: LifeCycleActionParam = {\n value: e.target.value,\n step: item,\n task: taskItem,\n category: categoryItem,\n stage: stageItem\n };\n onChange?.(actionParam, e);\n };\n\n const onInputFocus = (e: FocusEvent<HTMLInputElement>) => {\n const actionParam: LifeCycleActionParam = {\n value: e.target.value,\n step: item,\n task: taskItem,\n category: categoryItem,\n stage: stageItem\n };\n onFocus?.(actionParam, e);\n };\n\n const onInputBlur = (e: FocusEvent<HTMLInputElement>) => {\n const actionParam: LifeCycleActionParam = {\n value: e.target.value,\n step: item,\n task: taskItem,\n category: categoryItem,\n stage: stageItem\n };\n onBlur?.(actionParam, e);\n };\n\n return (\n <Flex as={StyledStep} container={{ inline: true }} error={error}>\n <Flex as={StyledStepType} color={visual.color} ref={setIconEl} img={visual.imgurl}>\n {visual.imgurl.length > 0 && (\n <Avatar name={visual.title \|\| ''} imageSrc={visual?.imgurl} shape='squircle' size='m' />\n )}\n {!visual.imgurl && <Icon name={visual.icon} />}\n </Flex>\n\n <Tooltip target={iconEl}>{visual.title}</Tooltip>\n\n <Flex\n as={StyledStepValue}\n item={{ grow: 2 }}\n error={error}\n container={{ inline: true, alignItems: 'center' }}\n >\n <StyledStepValueInput\n value={stepValue}\n type='text'\n ref={setInputEl}\n error={error}\n onChange={onInputChange}\n aria-label={stepValue}\n id={item.id}\n {...restProps}\n onFocus={onInputFocus}\n onBlur={onInputBlur}\n />\n {badge?.type && (\n <Flex as={StyledStepBadge} container={{ inline: true, alignItems: 'center' }}>\n <Status variant={badge?.type \|\| 'success'}>{badge?.label}</Status>\n </Flex>\n )}\n </Flex>\n <Tooltip target={inputEl} hideDelay='none'>\n {error \|\| tooltipValue \|\| 'test'}\n </Tooltip>\n <Flex as={StyledStepStatus} ref={setActionEl} badge={badge?.type} error={error}>\n {actionsClone && <Actions items={actionsClone} menuAt={2} iconOnly />}\n </Flex>\n <Tooltip target={actionEl} aria-hidden='true'>\n {actions && actions?.length > 1 ? actionsLabel : singleActionLabel}\n </Tooltip>\n </Flex>\n );\n};\n\nexport default Step;\n"]}
1	+ {"version":3,"file":"Step.js","sourceRoot":"","sources":["../../../src/components/LifeCycle/Step.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n useState,\n FunctionComponent,\n PropsWithoutRef,\n ChangeEvent,\n FocusEvent,\n MouseEvent\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport { readableColor } from 'polished';\n\nimport {\n Flex,\n defaultThemeProp,\n BaseProps,\n ForwardProps,\n Icon,\n Tooltip,\n useElement,\n Status,\n FormControlProps,\n Actions,\n useI18n,\n Avatar,\n StyledTooltip,\n Action\n} from '@pega/cosmos-react-core';\n\nimport { colorMap, ColorName } from '../../utils';\n\nimport {\n TaskItemProps,\n StepItemProps,\n StageItemProps,\n CategoryItemProps,\n LifeCycleAction,\n LifeCycleActionParam\n} from './LifeCycle.types';\n\nexport interface StepProps extends Omit<FormControlProps, 'status' \| 'id'> {\n /** Pass an array of Action objects to append button(s) inline with the Input. /\n actions?: LifeCycleAction[];\n /* Input Change /\n onChange?: (param: LifeCycleActionParam, e: ChangeEvent<HTMLInputElement>) => void;\n /* callback for Focus of input /\n onFocus?: (param: LifeCycleActionParam, e: FocusEvent<HTMLInputElement>) => void;\n /* callback for Blur of input /\n onBlur?: (param: LifeCycleActionParam, e: FocusEvent<HTMLInputElement>) => void;\n}\n\ninterface StepComponentProps extends BaseProps, StepProps {\n /* Pass text for the step. /\n value?: string;\n /* step data id /\n id?: string;\n /* Determines the visual for icon, color and label to render.\n * This color is passed as a variant and accessible colors are used to display.\n * Icon and label are passed as normal string /\n visual: {\n imgurl: string;\n color: ColorName;\n icon: string;\n title: string;\n };\n / Determines the variant and label for the badges /\n badge?: StepItemProps['status'];\n / The status is used to show the input error status and the info on tooltip in case of error /\n error?: string;\n / Data of the steps which can be used to send the full info back /\n item: StepItemProps;\n stageItem: StageItemProps;\n taskItem: TaskItemProps;\n categoryItem: CategoryItemProps;\n}\n\nexport const StyledStepType = styled.div<{ color: ColorName; ref: HTMLDivElement; img: string }>(\n ({ theme, color, img }) => {\n const bgColor = colorMap[color];\n\n const contrastColor = readableColor(bgColor);\n return img\n ? css`\n height: 2rem;\n padding-inline-end: calc(0.25 ${theme.base.spacing});\n `\n : css`\n background: ${bgColor};\n margin: calc(0.5 * ${theme.base.spacing});\n padding: 0 calc(0.5 * ${theme.base.spacing});\n color: ${contrastColor};\n text-align: center;\n border-radius: calc(0.25 * ${theme.base['border-radius']});\n `;\n }\n);\n\nStyledStepType.defaultProps = defaultThemeProp;\n\nexport const StyledStepBadge = styled.div(({ theme }) => {\n return css`\n padding: 0 calc(0.5 * ${theme.base.spacing});\n justify-content: flex-end;\n width: auto;\n max-width: calc(50% - ${theme.base.spacing});\n > span {\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n }\n `;\n});\n\nStyledStepBadge.defaultProps = defaultThemeProp;\n\nconst StyledStepValue = styled.div<{ error: string }>(({ theme, error }) => {\n return css`\n border-radius: calc(0.5 * ${theme.base['border-radius']});\n ${error &&\n css`\n background: ${theme.base.colors.red['extra-light']};\n `}\n `;\n});\n\nStyledStepValue.defaultProps = defaultThemeProp;\n\nexport const StyledStepValueInput = styled.input<{ error: string \| undefined }>(\n ({ error, theme }) => {\n return css`\n height: ${theme.components.input.height};\n padding: 0 calc(0.5 * ${theme.base.spacing});\n border: none;\n border-inline-start: 0.0625rem solid transparent;\n border-inline-end: 0.0625rem solid transparent;\n text-overflow: ellipsis;\n min-width: 40%;\n outline: none;\n &:hover {\n cursor: pointer;\n }\n &:disabled {\n cursor: not-allowed;\n }\n ${error\n ? css`\n background: ${theme.base.colors.red['extra-light']};\n &:focus:enabled {\n border-color: ${theme.base.colors.red.medium};\n }\n `\n : css`\n background: ${theme.base.palette['secondary-background']};\n &&:hover {\n background: ${theme.base.palette['app-background']};\n }\n &&:focus:enabled {\n background: ${theme.base.palette['primary-background']};\n border-color: ${theme.base.colors.blue.medium};\n }\n `}\n `;\n }\n);\n\nStyledStepValueInput.defaultProps = defaultThemeProp;\n\nexport const StyledStepStatus = styled.div<{\n badge: string;\n error: string;\n}>(({ theme, badge, error }) => {\n return css`\n border: none;\n ${badge &&\n css`\n display: none;\n `}\n visibility: hidden;\n &:hover {\n cursor: pointer;\n }\n &:focus:not([disabled]) {\n outline: 0.0625rem solid ${theme.base.colors.blue.medium};\n }\n ${error &&\n !badge &&\n css`\n visibility: visible;\n `}\n `;\n});\n\nStyledStepStatus.defaultProps = defaultThemeProp;\n\nexport const StyledStep = styled.div<{ error: string }>(({ theme, error }) => {\n return css`\n background: ${theme.base.palette['secondary-background']};\n border: 0.0625rem solid transparent;\n border-radius: calc(0.5 * ${theme.base['border-radius']});\n margin: 0 0 calc(0.5 * ${theme.base.spacing});\n width: 100%;\n ${error &&\n css`\n border-color: ${theme.base.colors.red.medium};\n box-shadow: none;\n `}\n &:hover {\n cursor: pointer;\n ${StyledStepBadge} {\n ${css`\n display: none;\n `}\n }\n ${StyledStepStatus} {\n ${css`\n visibility: visible;\n display: inline-block;\n `}\n }\n }\n &:focus-within {\n ${!error &&\n css`\n border-color: ${theme.base.colors.blue.medium};\n box-shadow: ${theme.components['form-control'][':focus']['box-shadow']};\n `}\n ${StyledStepBadge} {\n ${css`\n display: none;\n `}\n }\n ${StyledStepStatus} {\n ${css`\n display: inline-block;\n visibility: visible;\n `}\n }\n ${StyledTooltip} {\n ${css`\n visibility: hidden;\n `}\n }\n }\n `;\n});\n\nStyledStep.defaultProps = defaultThemeProp;\n\nconst Step: FunctionComponent<StepComponentProps & ForwardProps> = ({\n value,\n id,\n visual,\n actions,\n badge,\n error,\n onChange,\n categoryItem,\n item,\n stageItem,\n taskItem,\n onFocus,\n onBlur,\n ...restProps\n}: PropsWithoutRef<StepComponentProps>) => {\n const t = useI18n();\n const [stepValue, setStepValue] = useState(value);\n const [iconEl, setIconEl] = useElement();\n const [actionEl, setActionEl] = useElement();\n const [inputEl, setInputEl] = useElement();\n const actionsLabel = t('actions');\n const singleActionLabel = (actions?.[0]?.text as string) ?? '';\n const tooltipValue = stepValue \|\| error;\n\n /* Need to check the value with statusProps /\n\n const onActionItemClick = (\n actionId: string,\n e: MouseEvent<HTMLInputElement \| HTMLAnchorElement \| HTMLButtonElement>\n ) => {\n const param: LifeCycleActionParam = {\n task: taskItem,\n stage: stageItem,\n step: item,\n category: categoryItem\n };\n actions?.forEach(actionItem => {\n if (actionItem.id === actionId) {\n actionItem.onClick(param, e);\n }\n });\n };\n / Deep copy of actions is required to provide consistent callback objects on actions */\n const actionsClone: Action[] = [];\n\n if (actions) {\n actions.forEach(actionItem => {\n const actionCloneItem = {} as Action;\n Object.keys(actionItem).forEach((key: string) => {\n actionCloneItem[key] = actionItem[key];\n });\n actionCloneItem.onClick = onActionItemClick;\n actionsClone.push(actionCloneItem);\n return actionItem;\n });\n }\n\n const onInputChange = (e: ChangeEvent<HTMLInputElement>) => {\n setStepValue(e.target.value);\n const actionParam: LifeCycleActionParam = {\n value: e.target.value,\n step: item,\n task: taskItem,\n category: categoryItem,\n stage: stageItem\n };\n onChange?.(actionParam, e);\n };\n\n const onInputFocus = (e: FocusEvent<HTMLInputElement>) => {\n const actionParam: LifeCycleActionParam = {\n value: e.target.value,\n step: item,\n task: taskItem,\n category: categoryItem,\n stage: stageItem\n };\n onFocus?.(actionParam, e);\n };\n\n const onInputBlur = (e: FocusEvent<HTMLInputElement>) => {\n const actionParam: LifeCycleActionParam = {\n value: e.target.value,\n step: item,\n task: taskItem,\n category: categoryItem,\n stage: stageItem\n };\n onBlur?.(actionParam, e);\n };\n\n return (\n <Flex as={StyledStep} container={{ inline: true }} error={error}>\n <Flex as={StyledStepType} color={visual.color} ref={setIconEl} img={visual.imgurl}>\n {visual.imgurl.length > 0 && (\n <Avatar name={visual.title \|\| ''} imageSrc={visual?.imgurl} shape='squircle' size='m' />\n )}\n {!visual.imgurl && <Icon name={visual.icon} />}\n </Flex>\n\n <Tooltip target={iconEl}>{visual.title}</Tooltip>\n\n <Flex\n as={StyledStepValue}\n item={{ grow: 2 }}\n error={error}\n container={{ inline: true, alignItems: 'center' }}\n >\n <StyledStepValueInput\n value={stepValue}\n type='text'\n ref={setInputEl}\n error={error}\n onChange={onInputChange}\n aria-label={stepValue}\n id={item.id}\n {...restProps}\n onFocus={onInputFocus}\n onBlur={onInputBlur}\n />\n {badge?.type && (\n <Flex as={StyledStepBadge} container={{ inline: true, alignItems: 'center' }}>\n <Status variant={badge?.type \|\| 'success'}>{badge?.label}</Status>\n </Flex>\n )}\n </Flex>\n <Tooltip target={inputEl} hideDelay='none'>\n {error \|\| tooltipValue \|\| 'test'}\n </Tooltip>\n <Flex as={StyledStepStatus} ref={setActionEl} badge={badge?.type} error={error}>\n {actionsClone && <Actions items={actionsClone} menuAt={2} iconOnly />}\n </Flex>\n <Tooltip target={actionEl} aria-hidden='true'>\n {actions && actions?.length > 1 ? actionsLabel : singleActionLabel}\n </Tooltip>\n </Flex>\n );\n};\n\nexport default Step;\n"]}

package/lib/components/LifeCycle/Task.d.ts CHANGED Viewed

@@ -1,5 +1,6 @@
 import { FunctionComponent, ChangeEvent, FocusEvent } from 'react';
 import { BaseProps, ForwardProps, FormControlProps } from '@pega/cosmos-react-core';
+import { LibraryItem } from '../ItemLibrary';
 import { StepProps } from './Step';
 import { TaskItemProps, StageItemProps, CategoryItemProps, LifeCycleAction, LifeCycleActionParam } from './LifeCycle.types';
 export interface TaskProps extends Omit<FormControlProps, 'status' | 'id'> {
@@ -13,12 +14,14 @@ export interface TaskProps extends Omit<FormControlProps, 'status' | 'id'> {
         showOnce: boolean;
         onAddTask?: LifeCycleAction['onClick'];
     };
-    onAddStep?: LifeCycleAction['onClick'];
+    onAddStep?: (param: LifeCycleActionParam, selectedItem: LibraryItem) => void;
     onChange?: (param: LifeCycleActionParam, e: ChangeEvent<HTMLInputElement>) => void;
     /** callback for Focus of input */
     onFocus?: (param: LifeCycleActionParam, e: FocusEvent<HTMLInputElement>) => void;
     /** callback for Blur of input */
     onBlur?: (param: LifeCycleActionParam, e: FocusEvent<HTMLInputElement>) => void;
+    /** Types of Nodes */
+    nodeLibrary: LibraryItem[];
 }
 interface TaskComponentProps extends BaseProps, TaskProps {
     /** Pass text for the task. */

package/lib/components/LifeCycle/Task.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Task.d.ts","sourceRoot":"","sources":["../../../src/components/LifeCycle/Task.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAEjB,WAAW,EACX,UAAU,~~EAEX~~,MAAM,OAAO,CAAC;AAGf,OAAO,EAGL,SAAS,EACT,YAAY,EAOZ,gBAAgB,~~EAIjB~~,MAAM,yBAAyB,CAAC;AAEjC,OAAa,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACzC,OAAO,EACL,aAAa,EACb,cAAc,EAEd,iBAAiB,EACjB,eAAe,EACf,oBAAoB,EACrB,MAAM,mBAAmB,CAAC;AAE3B,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,gBAAgB,EAAE,QAAQ,GAAG,IAAI,CAAC;IACxE,iFAAiF;IACjF,OAAO,CAAC,EAAE,eAAe,EAAE,CAAC;IAC5B,qDAAqD;IACrD,YAAY,EAAE,MAAM,CAAC;IACrB,2CAA2C;IAC3C,OAAO,EAAE;QACP,KAAK,EAAE,MAAM,CAAC;QACd,QAAQ,EAAE,OAAO,CAAC;QAClB,SAAS,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,CAAC;KACxC,CAAC;IACF,SAAS,CAAC,EAAE,~~eAAe,~~CAAC,~~SAAS~~,~~CAAC~~,CAAC;~~IACvC~~,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,EAAE,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACnF,kCAAkC;IAClC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,EAAE,CAAC,EAAE,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACjF,iCAAiC;IACjC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,EAAE,CAAC,EAAE,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;~~CACjF~~;AAED,UAAU,kBAAmB,SAAQ,SAAS,EAAE,SAAS;IACvD,8BAA8B;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+DAA+D;IAC/D,MAAM,EAAE;QACN,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,qBAAqB;IACrB,IAAI,EAAE,aAAa,CAAC;IAEpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iBAAiB;IACjB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,wCAAwC;IACxC,SAAS,EAAE,cAAc,CAAC;IAC1B,2CAA2C;IAC3C,YAAY,EAAE,iBAAiB,CAAC;IAChC,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,eAAO,MAAM,cAAc,wGAQzB,CAAC;~~AAEH~~,eAAO,MAAM,gBAAgB,4GAK3B,CAAC;~~AAGH~~,eAAO,MAAM,iBAAiB,yGAI5B,CAAC;~~AAGH~~,eAAO,MAAM,WAAW;WAAyB,MAAM,GAAG,SAAS;SA+BjE,CAAC;~~AAGH~~,eAAO,MAAM,iBAAiB;SACvB,cAAc;WACZ,MAAM;SAoBb,CAAC;~~AAGH~~,eAAO,MAAM,UAAU,6GAoBrB,CAAC;~~AAGH~~,eAAO,MAAM,kBAAkB,yGAQ9B,CAAC;AAEF,QAAA,MAAM,IAAI,EAAE,iBAAiB,CAAC,kBAAkB,GAAG,YAAY,~~CAiL9D~~,CAAC;AAEF,eAAe,IAAI,CAAC"}
1	+ {"version":3,"file":"Task.d.ts","sourceRoot":"","sources":["../../../src/components/LifeCycle/Task.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAEjB,WAAW,EACX,UAAU,EAGX,MAAM,OAAO,CAAC;AAGf,OAAO,EAGL,SAAS,EACT,YAAY,EAOZ,gBAAgB,EAMjB,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAE,WAAW,EAAe,MAAM,gBAAgB,CAAC;AAE1D,OAAa,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACzC,OAAO,EACL,aAAa,EACb,cAAc,EAEd,iBAAiB,EACjB,eAAe,EACf,oBAAoB,EACrB,MAAM,mBAAmB,CAAC;AAE3B,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,gBAAgB,EAAE,QAAQ,GAAG,IAAI,CAAC;IACxE,iFAAiF;IACjF,OAAO,CAAC,EAAE,eAAe,EAAE,CAAC;IAC5B,qDAAqD;IACrD,YAAY,EAAE,MAAM,CAAC;IACrB,2CAA2C;IAC3C,OAAO,EAAE;QACP,KAAK,EAAE,MAAM,CAAC;QACd,QAAQ,EAAE,OAAO,CAAC;QAClB,SAAS,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,CAAC;KACxC,CAAC;IACF,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,EAAE,YAAY,EAAE,WAAW,KAAK,IAAI,CAAC;IAC7E,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,EAAE,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACnF,kCAAkC;IAClC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,EAAE,CAAC,EAAE,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACjF,iCAAiC;IACjC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,EAAE,CAAC,EAAE,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAChF,qBAAqB;IACrB,WAAW,EAAE,WAAW,EAAE,CAAC;CAC5B;AAED,UAAU,kBAAmB,SAAQ,SAAS,EAAE,SAAS;IACvD,8BAA8B;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+DAA+D;IAC/D,MAAM,EAAE;QACN,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,qBAAqB;IACrB,IAAI,EAAE,aAAa,CAAC;IAEpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iBAAiB;IACjB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,wCAAwC;IACxC,SAAS,EAAE,cAAc,CAAC;IAC1B,2CAA2C;IAC3C,YAAY,EAAE,iBAAiB,CAAC;IAChC,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,eAAO,MAAM,cAAc,wGAQzB,CAAC;AAIH,eAAO,MAAM,gBAAgB,4GAK3B,CAAC;AAIH,eAAO,MAAM,iBAAiB,yGAI5B,CAAC;AAEH,eAAO,MAAM,WAAW;WAAyB,MAAM,GAAG,SAAS;SA+BjE,CAAC;AAIH,eAAO,MAAM,iBAAiB;SACvB,cAAc;WACZ,MAAM;SAoBb,CAAC;AAEH,eAAO,MAAM,UAAU,6GAoBrB,CAAC;AAIH,eAAO,MAAM,kBAAkB,yGAQ9B,CAAC;AAEF,QAAA,MAAM,IAAI,EAAE,iBAAiB,CAAC,kBAAkB,GAAG,YAAY,CAsM9D,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/lib/components/LifeCycle/Task.js CHANGED Viewed

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
+import { useState, useCallback } from 'react';
 import styled, { css } from 'styled-components';
-import { Flex, defaultThemeProp, Button, Icon, Tooltip, useElement, Actions, useI18n, Avatar, StyledTooltip } from '@pega/cosmos-react-core';
+import { Flex, defaultThemeProp, Button, Icon, Tooltip, useElement, Actions, useI18n, Avatar, StyledTooltip, useOuterEvent, useEscape } from '@pega/cosmos-react-core';
+import { ItemLibrary } from '../ItemLibrary';
 import Step from './Step';
 export const StyledTaskList = styled.li(({ theme }) => {
     return css `
@@ -12,6 +13,7 @@ export const StyledTaskList = styled.li(({ theme }) => {
     }
   `;
 });
+StyledTaskList.defaultProps = defaultThemeProp;
 export const StyledCardHeader = styled.header(({ theme }) => {
     return css `
     padding: 0;
@@ -24,7 +26,6 @@ export const StyledCardContent = styled.div(() => {
     padding: 0;
   `;
 });
-StyledCardContent.defaultProps = defaultThemeProp;
 export const StyledInput = styled.input(({ error, theme }) => {
     return css `
     height: ${theme.components.input.height};
@@ -78,7 +79,6 @@ export const StyledTaskActions = styled.div(({ error }) => {
     }
   `;
 });
-StyledTaskActions.defaultProps = defaultThemeProp;
 export const StyledTask = styled.article(({ theme }) => {
     return css `
     background: ${theme.base.palette['primary-background']};
@@ -110,9 +110,11 @@ export const StyledInputWrapper = styled.div `
     }
   }
 `;
-const Task = ({ value, visual, actions, item, addStepTitle, addTask, stageItem, error, onAddStep, onChange, onFocus, onBlur, categoryItem, id, step: stepProp, ...restProps }) => {
+const Task = ({ value, visual, actions, item, addStepTitle, addTask, stageItem, error, onAddStep, onChange, onFocus, onBlur, categoryItem, id, step: stepProp, nodeLibrary, ...restProps }) => {
     const t = useI18n();
     const [taskValue, setTaskValue] = useState(value);
+    const [showLibrary, setLibrary] = useState(false);
+    const [popoverEl, setPopoverEl] = useElement(null);
     const [actionEl, setActionEl] = useElement();
     const [inputEl, setInputEl] = useElement();
     const [addEl, setAddEl] = useElement();
@@ -171,15 +173,20 @@ const Task = ({ value, visual, actions, item, addStepTitle, addTask, stageItem,
         };
         onBlur?.(param, e);
     };
-    const onAddStepClick = (e) => {
+    const onLibraryItemSelect = useCallback((libItem) => {
         const param = {
             task: item,
             stage: stageItem,
             category: categoryItem
         };
-        onAddStep?.(param, e);
-    };
-    return (_jsx(Flex, { as: StyledTaskList, ...restProps, children: _jsxs(Flex, { as: StyledTask, container: { direction: 'column' }, role: 'region', children: [_jsxs(Flex, { as: StyledCardHeader, container: { itemGap: 0.4 }, children: [visual?.imgurl.length > 0 && _jsx(Avatar, { name: taskValue || '', imageSrc: visual?.imgurl }, void 0), _jsxs(Flex, { item: { grow: 1 }, as: StyledInputWrapper, container: { inline: true, alignItems: 'center' }, children: [_jsx(StyledInput, { value: taskValue, type: 'text', onChange: onInputChange, ref: setInputEl, error: error, id: item.id, "aria-labelledby": categoryItem.categoryId, onFocus: onInputFocus, onBlur: onInputBlur }, void 0), taskValue && (_jsx(Tooltip, { target: inputEl, hideDelay: 'none', children: error || taskValue }, void 0))] }, void 0), _jsxs(Flex, { as: StyledTaskActions, ref: setActionEl, error: error, children: [actionsClone && _jsx(Actions, { items: actionsClone, menuAt: 2, iconOnly: true }, void 0), _jsx(Tooltip, { target: actionEl, "aria-hidden": 'true', children: actions && actions?.length > 1 ? actionsLabel : singleActionLabel }, void 0)] }, void 0)] }, void 0), _jsxs(Flex, { as: StyledCardContent, children: [item?.steps.map((steps) => {
+        onAddStep?.(param, libItem);
+        setLibrary(false);
+    }, [onAddStep]);
+    useEscape(() => {
+        setLibrary(false);
+    });
+    useOuterEvent('mousedown', [addEl, popoverEl], () => setLibrary(false));
+    return (_jsx(Flex, { as: StyledTaskList, ...restProps, children: _jsxs(Flex, { as: StyledTask, container: { direction: 'column' }, role: 'region', children: [_jsxs(Flex, { as: StyledCardHeader, container: { itemGap: 0.4 }, children: [visual?.imgurl.length > 0 && _jsx(Avatar, { name: taskValue || '', imageSrc: visual?.imgurl }), _jsxs(Flex, { item: { grow: 1 }, as: StyledInputWrapper, container: { inline: true, alignItems: 'center' }, children: [_jsx(StyledInput, { value: taskValue, type: 'text', onChange: onInputChange, ref: setInputEl, error: error, id: item.id, "aria-labelledby": categoryItem.categoryId, onFocus: onInputFocus, onBlur: onInputBlur }), taskValue && (_jsx(Tooltip, { target: inputEl, hideDelay: 'none', children: error || taskValue }))] }), _jsxs(Flex, { as: StyledTaskActions, ref: setActionEl, error: error, children: [actionsClone && _jsx(Actions, { items: actionsClone, menuAt: 2, iconOnly: true }), _jsx(Tooltip, { target: actionEl, "aria-hidden": 'true', children: actions && actions?.length > 1 ? actionsLabel : singleActionLabel })] })] }), _jsxs(Flex, { as: StyledCardContent, children: [item?.steps.map((steps) => {
                             const badgeStatus = steps?.status?.type ? steps.status.type : '';
                             const badgeLabel = steps?.status?.label ? steps.status.label : '';
                             return (_jsx(Step, { id: steps.id, value: steps.label, visual: {
@@ -191,7 +198,7 @@ const Task = ({ value, visual, actions, item, addStepTitle, addTask, stageItem,
                                     type: badgeStatus,
                                     label: badgeLabel
                                 }, error: steps.error, categoryItem: categoryItem, ...stepProp }, steps.id));
-                        }), _jsxs(Flex, { children: [_jsx(Button, { variant: 'simple', label: addStepTitle, onClick: onAddStepClick, ref: setAddEl, icon: true, "aria-label": `${t('add')} ${addStepTitle}`, children: _jsx(Icon, { name: 'plus' }, void 0) }, void 0), _jsx(Tooltip, { target: addEl, "aria-hidden": 'true', children: `${t('add')} ${addStepTitle}` }, void 0)] }, void 0)] }, void 0)] }, void 0) }, void 0));
+                        }), _jsxs(Flex, { children: [_jsx(Button, { variant: 'simple', label: addStepTitle, onClick: () => setLibrary(!showLibrary), ref: setAddEl, icon: true, "aria-label": `${t('add')} ${addStepTitle}`, children: _jsx(Icon, { name: 'plus' }) }), _jsx(Tooltip, { target: addEl, "aria-hidden": 'true', children: `${t('add')} ${addStepTitle}` }), _jsx(ItemLibrary, { items: nodeLibrary, show: showLibrary, target: addEl, onClick: onLibraryItemSelect, ref: setPopoverEl, placeholder: t('search_nodes') })] })] })] }) }));
 };
 export default Task;
 //# sourceMappingURL=Task.js.map

package/lib/components/LifeCycle/Task.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Task.js","sourceRoot":"","sources":["../../../src/components/LifeCycle/Task.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n useState,\n FunctionComponent,\n PropsWithChildren,\n ChangeEvent,\n FocusEvent,\n MouseEvent\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n Flex,\n defaultThemeProp,\n BaseProps,\n ForwardProps,\n Button,\n Icon,\n Action,\n Tooltip,\n useElement,\n Actions,\n FormControlProps,\n useI18n,\n Avatar,\n StyledTooltip\n} from '@pega/cosmos-react-core';\n\nimport Step, { StepProps } from './Step';\nimport {\n TaskItemProps,\n StageItemProps,\n StepItemProps,\n CategoryItemProps,\n LifeCycleAction,\n LifeCycleActionParam\n} from './LifeCycle.types';\n\nexport interface TaskProps extends Omit<FormControlProps, 'status' \| 'id'> {\n /** Pass an array of Action objects to append button(s) inline with the Input. /\n actions?: LifeCycleAction[];\n /* Tooltip for adding items to the task component /\n addStepTitle: string;\n /* Region for adding the task component /\n addTask: {\n title: string;\n showOnce: boolean;\n onAddTask?: LifeCycleAction['onClick'];\n };\n onAddStep?: LifeCycleAction['onClick'];\n onChange?: (param: LifeCycleActionParam, e: ChangeEvent<HTMLInputElement>) => void;\n /* callback for Focus of input /\n onFocus?: (param: LifeCycleActionParam, e: FocusEvent<HTMLInputElement>) => void;\n /* callback for Blur of input /\n onBlur?: (param: LifeCycleActionParam, e: FocusEvent<HTMLInputElement>) => void;\n}\n\ninterface TaskComponentProps extends BaseProps, TaskProps {\n /* Pass text for the task. /\n value?: string;\n /* support for an Avatar, Icon, or other supporting visual. /\n visual: {\n imgurl: string;\n };\n /* Pass task data /\n item: TaskItemProps;\n / The status is used to show the input error status and the info on tooltip in case of error /\n error?: string;\n /* Step Props /\n step?: StepProps;\n /* Stage data to pass it as callback /\n stageItem: StageItemProps;\n /* Category data to pass it as callback /\n categoryItem: CategoryItemProps;\n id: string;\n}\n\nexport const StyledTaskList = styled.li(({ theme }) => {\n return css`\n list-style-type: none;\n margin-block-end: ${theme.base.spacing};\n &:last-child > article {\n margin-block-end: 0;\n }\n `;\n});\n\nexport const StyledCardHeader = styled.header(({ theme }) => {\n return css`\n padding: 0;\n margin: 0 0 calc(0.5 ${theme.base.spacing});\n `;\n});\nStyledCardHeader.defaultProps = defaultThemeProp;\n\nexport const StyledCardContent = styled.div(() => {\n return css`\n padding: 0;\n `;\n});\nStyledCardContent.defaultProps = defaultThemeProp;\n\nexport const StyledInput = styled.input<{ error: string \| undefined }>(({ error, theme }) => {\n return css`\n height: ${theme.components.input.height};\n padding: 0 calc(0.5 * ${theme.base.spacing});\n text-overflow: ellipsis;\n border: 0.0625rem solid transparent;\n border-radius: calc(0.5 * ${theme.base['border-radius']});\n width: 100%;\n outline: none;\n &:hover {\n cursor: pointer;\n }\n &:disabled {\n cursor: not-allowed;\n }\n ${error\n ? css`\n background: ${theme.base.colors.red['extra-light']};\n border: 0.0625rem solid ${theme.base.colors.red.medium};\n `\n : css`\n background: ${theme.base.palette['primary-background']};\n &&:hover {\n background: ${theme.base.palette['secondary-background']};\n }\n &&:focus:enabled {\n border: 0.0625rem solid ${theme.base.colors.blue.medium};\n background: ${theme.base.palette['primary-background']};\n }\n `}\n `;\n});\nStyledInput.defaultProps = defaultThemeProp;\n\nexport const StyledTaskActions = styled.div<{\n ref: HTMLDivElement;\n error: string;\n}>(({ error }) => {\n return css`\n border: none;\n visibility: hidden;\n &:hover {\n cursor: pointer;\n }\n ${error &&\n css`\n visibility: visible;\n `}\n &:focus-within {\n ${StyledTooltip} {\n ${css`\n display: none;\n `}\n }\n }\n `;\n});\nStyledTaskActions.defaultProps = defaultThemeProp;\n\nexport const StyledTask = styled.article(({ theme }) => {\n return css`\n background: ${theme.base.palette['primary-background']};\n border-radius: calc(0.5 * ${theme.base['border-radius']});\n padding: ${theme.base.spacing};\n &:focus-within,\n &:hover {\n ${StyledTaskActions} {\n ${css`\n visibility: visible;\n `}\n }\n }\n &:focus-within {\n box-shadow: 0 0 0.2rem 0.0625rem ${theme.base.colors.blue.medium};\n }\n &:hover {\n cursor: pointer;\n }\n `;\n});\nStyledTask.defaultProps = defaultThemeProp;\n\nexport const StyledInputWrapper = styled.div`\n &:focus-within {\n ${StyledTooltip} {\n ${css`\n display: none;\n `}\n }\n }\n`;\n\nconst Task: FunctionComponent<TaskComponentProps & ForwardProps> = ({\n value,\n visual,\n actions,\n item,\n addStepTitle,\n addTask,\n stageItem,\n error,\n onAddStep,\n onChange,\n onFocus,\n onBlur,\n categoryItem,\n id,\n step: stepProp,\n ...restProps\n}: PropsWithChildren<TaskComponentProps>) => {\n const t = useI18n();\n const [taskValue, setTaskValue] = useState(value);\n const [actionEl, setActionEl] = useElement();\n const [inputEl, setInputEl] = useElement();\n const [addEl, setAddEl] = useElement();\n const actionsLabel = t('actions');\n const singleActionLabel = (actions?.[0]?.text as string) \|\| '';\n\n const onActionItemClick = (\n actionId: string,\n e: MouseEvent<HTMLInputElement \| HTMLAnchorElement \| HTMLButtonElement>\n ) => {\n const param: LifeCycleActionParam = {\n task: item,\n stage: stageItem,\n category: categoryItem\n };\n actions?.forEach(actionItem => {\n if (actionItem.id === actionId) {\n actionItem.onClick(param, e);\n }\n });\n };\n /* Deep copy of actions is required to provide consistent callback objects on actions */\n const actionsClone: Action[] = [];\n\n if (actions) {\n actions.forEach(actionItem => {\n const actionCloneItem = {} as Action;\n Object.keys(actionItem).forEach((key: string) => {\n actionCloneItem[key] = actionItem[key];\n });\n actionCloneItem.onClick = onActionItemClick;\n actionsClone.push(actionCloneItem);\n return actionItem;\n });\n }\n\n const onInputChange = (e: ChangeEvent<HTMLInputElement>) => {\n setTaskValue(e.target.value);\n const param: LifeCycleActionParam = {\n value: e.target.value,\n task: item,\n stage: stageItem,\n category: categoryItem\n };\n onChange?.(param, e);\n };\n\n const onInputFocus = (e: FocusEvent<HTMLInputElement>) => {\n const param: LifeCycleActionParam = {\n value: taskValue,\n task: item,\n stage: stageItem,\n category: categoryItem\n };\n onFocus?.(param, e);\n };\n\n const onInputBlur = (e: FocusEvent<HTMLInputElement>) => {\n const param: LifeCycleActionParam = {\n value: taskValue,\n task: item,\n stage: stageItem,\n category: categoryItem\n };\n onBlur?.(param, e);\n };\n\n const onAddStepClick = (e: MouseEvent<HTMLButtonElement>) => {\n const param: LifeCycleActionParam = {\n task: item,\n stage: stageItem,\n category: categoryItem\n };\n onAddStep?.(param, e);\n };\n\n return (\n <Flex as={StyledTaskList} {...restProps}>\n <Flex as={StyledTask} container={{ direction: 'column' }} role='region'>\n <Flex as={StyledCardHeader} container={{ itemGap: 0.4 }}>\n {visual?.imgurl.length > 0 && <Avatar name={taskValue \|\| ''} imageSrc={visual?.imgurl} />}\n <Flex\n item={{ grow: 1 }}\n as={StyledInputWrapper}\n container={{ inline: true, alignItems: 'center' }}\n >\n <StyledInput\n value={taskValue}\n type='text'\n onChange={onInputChange}\n ref={setInputEl}\n error={error}\n id={item.id}\n aria-labelledby={categoryItem.categoryId}\n onFocus={onInputFocus}\n onBlur={onInputBlur}\n />\n {taskValue && (\n <Tooltip target={inputEl} hideDelay='none'>\n {error \|\| taskValue}\n </Tooltip>\n )}\n </Flex>\n <Flex as={StyledTaskActions} ref={setActionEl} error={error}>\n {actionsClone && <Actions items={actionsClone} menuAt={2} iconOnly />}\n <Tooltip target={actionEl} aria-hidden='true'>\n {actions && actions?.length > 1 ? actionsLabel : singleActionLabel}\n </Tooltip>\n </Flex>\n </Flex>\n <Flex as={StyledCardContent}>\n {item?.steps.map((steps: StepItemProps) => {\n const badgeStatus = steps?.status?.type ? steps.status.type : '';\n const badgeLabel = steps?.status?.label ? steps.status.label : '';\n return (\n <Step\n key={steps.id}\n id={steps.id}\n value={steps.label}\n visual={{\n imgurl: steps.visual.imgurl,\n color: steps.visual.color,\n icon: steps.visual.icon,\n title: steps.visual.label\n }}\n item={steps}\n taskItem={item}\n stageItem={stageItem}\n badge={{\n type: badgeStatus,\n label: badgeLabel\n }}\n error={steps.error}\n categoryItem={categoryItem}\n {...stepProp}\n />\n );\n })}\n <Flex>\n <Button\n variant='simple'\n label={addStepTitle}\n onClick={onAddStepClick}\n ref={setAddEl}\n icon\n aria-label={`${t('add')} ${addStepTitle}`}\n >\n <Icon name='plus' />\n </Button>\n <Tooltip target={addEl} aria-hidden='true'>\n {`${t('add')} ${addStepTitle}`}\n </Tooltip>\n </Flex>\n </Flex>\n </Flex>\n </Flex>\n );\n};\n\nexport default Task;\n"]}
1	+ {"version":3,"file":"Task.js","sourceRoot":"","sources":["../../../src/components/LifeCycle/Task.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n useState,\n FunctionComponent,\n PropsWithChildren,\n ChangeEvent,\n FocusEvent,\n MouseEvent,\n useCallback\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n Flex,\n defaultThemeProp,\n BaseProps,\n ForwardProps,\n Button,\n Icon,\n Action,\n Tooltip,\n useElement,\n Actions,\n FormControlProps,\n useI18n,\n Avatar,\n StyledTooltip,\n useOuterEvent,\n useEscape\n} from '@pega/cosmos-react-core';\n\nimport { LibraryItem, ItemLibrary } from '../ItemLibrary';\n\nimport Step, { StepProps } from './Step';\nimport {\n TaskItemProps,\n StageItemProps,\n StepItemProps,\n CategoryItemProps,\n LifeCycleAction,\n LifeCycleActionParam\n} from './LifeCycle.types';\n\nexport interface TaskProps extends Omit<FormControlProps, 'status' \| 'id'> {\n /** Pass an array of Action objects to append button(s) inline with the Input. /\n actions?: LifeCycleAction[];\n /* Tooltip for adding items to the task component /\n addStepTitle: string;\n /* Region for adding the task component /\n addTask: {\n title: string;\n showOnce: boolean;\n onAddTask?: LifeCycleAction['onClick'];\n };\n onAddStep?: (param: LifeCycleActionParam, selectedItem: LibraryItem) => void;\n onChange?: (param: LifeCycleActionParam, e: ChangeEvent<HTMLInputElement>) => void;\n /* callback for Focus of input /\n onFocus?: (param: LifeCycleActionParam, e: FocusEvent<HTMLInputElement>) => void;\n /* callback for Blur of input /\n onBlur?: (param: LifeCycleActionParam, e: FocusEvent<HTMLInputElement>) => void;\n /* Types of Nodes /\n nodeLibrary: LibraryItem[];\n}\n\ninterface TaskComponentProps extends BaseProps, TaskProps {\n /* Pass text for the task. /\n value?: string;\n /* support for an Avatar, Icon, or other supporting visual. /\n visual: {\n imgurl: string;\n };\n /* Pass task data /\n item: TaskItemProps;\n / The status is used to show the input error status and the info on tooltip in case of error /\n error?: string;\n /* Step Props /\n step?: StepProps;\n /* Stage data to pass it as callback /\n stageItem: StageItemProps;\n /* Category data to pass it as callback /\n categoryItem: CategoryItemProps;\n id: string;\n}\n\nexport const StyledTaskList = styled.li(({ theme }) => {\n return css`\n list-style-type: none;\n margin-block-end: ${theme.base.spacing};\n &:last-child > article {\n margin-block-end: 0;\n }\n `;\n});\n\nStyledTaskList.defaultProps = defaultThemeProp;\n\nexport const StyledCardHeader = styled.header(({ theme }) => {\n return css`\n padding: 0;\n margin: 0 0 calc(0.5 ${theme.base.spacing});\n `;\n});\n\nStyledCardHeader.defaultProps = defaultThemeProp;\n\nexport const StyledCardContent = styled.div(() => {\n return css`\n padding: 0;\n `;\n});\n\nexport const StyledInput = styled.input<{ error: string \| undefined }>(({ error, theme }) => {\n return css`\n height: ${theme.components.input.height};\n padding: 0 calc(0.5 * ${theme.base.spacing});\n text-overflow: ellipsis;\n border: 0.0625rem solid transparent;\n border-radius: calc(0.5 * ${theme.base['border-radius']});\n width: 100%;\n outline: none;\n &:hover {\n cursor: pointer;\n }\n &:disabled {\n cursor: not-allowed;\n }\n ${error\n ? css`\n background: ${theme.base.colors.red['extra-light']};\n border: 0.0625rem solid ${theme.base.colors.red.medium};\n `\n : css`\n background: ${theme.base.palette['primary-background']};\n &&:hover {\n background: ${theme.base.palette['secondary-background']};\n }\n &&:focus:enabled {\n border: 0.0625rem solid ${theme.base.colors.blue.medium};\n background: ${theme.base.palette['primary-background']};\n }\n `}\n `;\n});\n\nStyledInput.defaultProps = defaultThemeProp;\n\nexport const StyledTaskActions = styled.div<{\n ref: HTMLDivElement;\n error: string;\n}>(({ error }) => {\n return css`\n border: none;\n visibility: hidden;\n &:hover {\n cursor: pointer;\n }\n ${error &&\n css`\n visibility: visible;\n `}\n &:focus-within {\n ${StyledTooltip} {\n ${css`\n display: none;\n `}\n }\n }\n `;\n});\n\nexport const StyledTask = styled.article(({ theme }) => {\n return css`\n background: ${theme.base.palette['primary-background']};\n border-radius: calc(0.5 * ${theme.base['border-radius']});\n padding: ${theme.base.spacing};\n &:focus-within,\n &:hover {\n ${StyledTaskActions} {\n ${css`\n visibility: visible;\n `}\n }\n }\n &:focus-within {\n box-shadow: 0 0 0.2rem 0.0625rem ${theme.base.colors.blue.medium};\n }\n &:hover {\n cursor: pointer;\n }\n `;\n});\n\nStyledTask.defaultProps = defaultThemeProp;\n\nexport const StyledInputWrapper = styled.div`\n &:focus-within {\n ${StyledTooltip} {\n ${css`\n display: none;\n `}\n }\n }\n`;\n\nconst Task: FunctionComponent<TaskComponentProps & ForwardProps> = ({\n value,\n visual,\n actions,\n item,\n addStepTitle,\n addTask,\n stageItem,\n error,\n onAddStep,\n onChange,\n onFocus,\n onBlur,\n categoryItem,\n id,\n step: stepProp,\n nodeLibrary,\n ...restProps\n}: PropsWithChildren<TaskComponentProps>) => {\n const t = useI18n();\n const [taskValue, setTaskValue] = useState(value);\n const [showLibrary, setLibrary] = useState(false);\n const [popoverEl, setPopoverEl] = useElement<HTMLElement>(null);\n const [actionEl, setActionEl] = useElement();\n const [inputEl, setInputEl] = useElement();\n const [addEl, setAddEl] = useElement();\n const actionsLabel = t('actions');\n const singleActionLabel = (actions?.[0]?.text as string) \|\| '';\n\n const onActionItemClick = (\n actionId: string,\n e: MouseEvent<HTMLInputElement \| HTMLAnchorElement \| HTMLButtonElement>\n ) => {\n const param: LifeCycleActionParam = {\n task: item,\n stage: stageItem,\n category: categoryItem\n };\n actions?.forEach(actionItem => {\n if (actionItem.id === actionId) {\n actionItem.onClick(param, e);\n }\n });\n };\n /* Deep copy of actions is required to provide consistent callback objects on actions */\n const actionsClone: Action[] = [];\n\n if (actions) {\n actions.forEach(actionItem => {\n const actionCloneItem = {} as Action;\n Object.keys(actionItem).forEach((key: string) => {\n actionCloneItem[key] = actionItem[key];\n });\n actionCloneItem.onClick = onActionItemClick;\n actionsClone.push(actionCloneItem);\n return actionItem;\n });\n }\n\n const onInputChange = (e: ChangeEvent<HTMLInputElement>) => {\n setTaskValue(e.target.value);\n const param: LifeCycleActionParam = {\n value: e.target.value,\n task: item,\n stage: stageItem,\n category: categoryItem\n };\n onChange?.(param, e);\n };\n\n const onInputFocus = (e: FocusEvent<HTMLInputElement>) => {\n const param: LifeCycleActionParam = {\n value: taskValue,\n task: item,\n stage: stageItem,\n category: categoryItem\n };\n onFocus?.(param, e);\n };\n\n const onInputBlur = (e: FocusEvent<HTMLInputElement>) => {\n const param: LifeCycleActionParam = {\n value: taskValue,\n task: item,\n stage: stageItem,\n category: categoryItem\n };\n onBlur?.(param, e);\n };\n\n const onLibraryItemSelect = useCallback(\n (libItem: LibraryItem) => {\n const param: LifeCycleActionParam = {\n task: item,\n stage: stageItem,\n category: categoryItem\n };\n onAddStep?.(param, libItem);\n setLibrary(false);\n },\n [onAddStep]\n );\n\n useEscape(() => {\n setLibrary(false);\n });\n\n useOuterEvent('mousedown', [addEl, popoverEl], () => setLibrary(false));\n\n return (\n <Flex as={StyledTaskList} {...restProps}>\n <Flex as={StyledTask} container={{ direction: 'column' }} role='region'>\n <Flex as={StyledCardHeader} container={{ itemGap: 0.4 }}>\n {visual?.imgurl.length > 0 && <Avatar name={taskValue \|\| ''} imageSrc={visual?.imgurl} />}\n <Flex\n item={{ grow: 1 }}\n as={StyledInputWrapper}\n container={{ inline: true, alignItems: 'center' }}\n >\n <StyledInput\n value={taskValue}\n type='text'\n onChange={onInputChange}\n ref={setInputEl}\n error={error}\n id={item.id}\n aria-labelledby={categoryItem.categoryId}\n onFocus={onInputFocus}\n onBlur={onInputBlur}\n />\n {taskValue && (\n <Tooltip target={inputEl} hideDelay='none'>\n {error \|\| taskValue}\n </Tooltip>\n )}\n </Flex>\n <Flex as={StyledTaskActions} ref={setActionEl} error={error}>\n {actionsClone && <Actions items={actionsClone} menuAt={2} iconOnly />}\n <Tooltip target={actionEl} aria-hidden='true'>\n {actions && actions?.length > 1 ? actionsLabel : singleActionLabel}\n </Tooltip>\n </Flex>\n </Flex>\n <Flex as={StyledCardContent}>\n {item?.steps.map((steps: StepItemProps) => {\n const badgeStatus = steps?.status?.type ? steps.status.type : '';\n const badgeLabel = steps?.status?.label ? steps.status.label : '';\n return (\n <Step\n key={steps.id}\n id={steps.id}\n value={steps.label}\n visual={{\n imgurl: steps.visual.imgurl,\n color: steps.visual.color,\n icon: steps.visual.icon,\n title: steps.visual.label\n }}\n item={steps}\n taskItem={item}\n stageItem={stageItem}\n badge={{\n type: badgeStatus,\n label: badgeLabel\n }}\n error={steps.error}\n categoryItem={categoryItem}\n {...stepProp}\n />\n );\n })}\n <Flex>\n <Button\n variant='simple'\n label={addStepTitle}\n onClick={() => setLibrary(!showLibrary)}\n ref={setAddEl}\n icon\n aria-label={`${t('add')} ${addStepTitle}`}\n >\n <Icon name='plus' />\n </Button>\n <Tooltip target={addEl} aria-hidden='true'>\n {`${t('add')} ${addStepTitle}`}\n </Tooltip>\n <ItemLibrary\n items={nodeLibrary}\n show={showLibrary}\n target={addEl as HTMLElement}\n onClick={onLibraryItemSelect}\n ref={setPopoverEl}\n placeholder={t('search_nodes')}\n />\n </Flex>\n </Flex>\n </Flex>\n </Flex>\n );\n};\n\nexport default Task;\n"]}

package/lib/components/LifeCycle/index.d.ts CHANGED Viewed

@@ -1,4 +1,3 @@
-export { default } from './LifeCycle';
-export { LifeCycleProps } from './LifeCycle';
+export { default, LifeCycleProps } from './LifeCycle';
 export { StepItemProps, TaskItemProps, StageItemProps, CategoryItemProps, CategoriesItemProps, LifeCycleActionParam, LifeCycleAction } from './LifeCycle.types';
 //# sourceMappingURL=index.d.ts.map

package/lib/components/LifeCycle/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/LifeCycle/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,~~MAAM,aAAa,CAAC;AACtC,OAAO,EAAE,~~cAAc,EAAE,MAAM,aAAa,CAAC;~~AAC7C~~,OAAO,EACL,aAAa,EACb,aAAa,EACb,cAAc,EACd,iBAAiB,EACjB,mBAAmB,EACnB,oBAAoB,EACpB,eAAe,EAChB,MAAM,mBAAmB,CAAC"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/LifeCycle/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAEtD,OAAO,EACL,aAAa,EACb,aAAa,EACb,cAAc,EACd,iBAAiB,EACjB,mBAAmB,EACnB,oBAAoB,EACpB,eAAe,EAChB,MAAM,mBAAmB,CAAC"}

package/lib/components/LifeCycle/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/LifeCycle/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,~~EAAE~~,MAAM,aAAa,CAAC","sourcesContent":["export { default ~~} from './LifeCycle';\nexport {~~ LifeCycleProps } from './LifeCycle';\nexport {\n StepItemProps,\n TaskItemProps,\n StageItemProps,\n CategoryItemProps,\n CategoriesItemProps,\n LifeCycleActionParam,\n LifeCycleAction\n} from './LifeCycle.types';\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/LifeCycle/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAkB,MAAM,aAAa,CAAC","sourcesContent":["export { default, LifeCycleProps } from './LifeCycle';\n\nexport {\n StepItemProps,\n TaskItemProps,\n StageItemProps,\n CategoryItemProps,\n CategoriesItemProps,\n LifeCycleActionParam,\n LifeCycleAction\n} from './LifeCycle.types';\n"]}

package/lib/components/ObjectSelect/ObjectConfig.js CHANGED Viewed

@@ -2,13 +2,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button, Flex, Icon, Text, useI18n } from '@pega/cosmos-react-core';
 const ObjectConfig = ({ heading, content, primaryAction, secondaryAction, disabled, dismissPopover }) => {
     const t = useI18n();
-    return (_jsxs(Flex, { container: { direction: 'column', pad: 2, gap: 2 }, children: [_jsxs(Flex, { container: { justify: 'between', alignItems: 'center' }, children: [_jsx(Text, { variant: 'h3', children: heading }, void 0), _jsx(Button, { icon: true, variant: 'simple', label: t('close'), onClick: () => dismissPopover(), children: _jsx(Icon, { name: 'times' }, void 0) }, void 0)] }, void 0), content, _jsxs(Flex, { container: { justify: 'between' }, children: [_jsx(Button, { variant: 'secondary', disabled: disabled, onClick: (e) => {
+    return (_jsxs(Flex, { container: { direction: 'column', pad: 2, gap: 2 }, children: [_jsxs(Flex, { container: { justify: 'between', alignItems: 'center' }, children: [_jsx(Text, { variant: 'h3', children: heading }), _jsx(Button, { icon: true, variant: 'simple', label: t('close'), onClick: () => dismissPopover(), children: _jsx(Icon, { name: 'times' }) })] }), content, _jsxs(Flex, { container: { justify: 'between' }, children: [_jsx(Button, { variant: 'secondary', disabled: disabled, onClick: (e) => {
                             secondaryAction.onClick?.(secondaryAction.id, e);
                             dismissPopover(secondaryAction.id);
-                        }, children: secondaryAction.text }, void 0), _jsx(Button, { variant: 'primary', disabled: disabled, onClick: (e) => {
+                        }, children: secondaryAction.text }), _jsx(Button, { variant: 'primary', disabled: disabled, onClick: (e) => {
                             primaryAction.onClick?.(primaryAction.id, e);
                             dismissPopover(primaryAction.id);
-                        }, children: primaryAction.text }, void 0)] }, void 0)] }, void 0));
+                        }, children: primaryAction.text })] })] }));
 };
 export default ObjectConfig;
 //# sourceMappingURL=ObjectConfig.js.map

package/lib/components/ObjectSelect/ObjectConfig.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ObjectConfig.js","sourceRoot":"","sources":["../../../src/components/ObjectSelect/ObjectConfig.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAgB,MAAM,EAAE,IAAI,EAAE,IAAI,EAAU,IAAI,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAalG,MAAM,YAAY,GAEd,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,aAAa,EAAE,eAAe,EAAE,QAAQ,EAAE,cAAc,EAAE,EAAE,EAAE;IACrF,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,OAAO,CACL,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,aACtD,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAE,aAC3D,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,OAAO,~~WAAQ~~,EACnC,KAAC,MAAM,IAAC,IAAI,QAAC,OAAO,EAAC,QAAQ,EAAC,KAAK,EAAE,CAAC,CAAC,OAAO,CAAC,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,cAAc,EAAE,YAC9E,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,~~WAAG~~,~~WACd~~,~~YACJ~~,EACN,OAAO,EACR,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,aACrC,KAAC,MAAM,IACL,OAAO,EAAC,WAAW,EACnB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,CAAC,CAAgC,EAAE,EAAE;4BAC5C,eAAe,CAAC,OAAO,EAAE,CAAC,eAAe,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC;4BACjD,cAAc,CAAC,eAAe,CAAC,EAAE,CAAC,CAAC;wBACrC,CAAC,YAEA,eAAe,CAAC,IAAI,~~WACd~~,EACT,KAAC,MAAM,IACL,OAAO,EAAC,SAAS,EACjB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,CAAC,CAAgC,EAAE,EAAE;4BAC5C,aAAa,CAAC,OAAO,EAAE,CAAC,aAAa,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC;4BAC7C,cAAc,CAAC,aAAa,CAAC,EAAE,CAAC,CAAC;wBACnC,CAAC,YAEA,aAAa,CAAC,IAAI,~~WACZ~~,~~YACJ~~,~~YACF~~,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import { ReactNode, FC, Ref, MouseEvent } from 'react';\n\nimport { ForwardProps, Button, Flex, Icon, Action, Text, useI18n } from '@pega/cosmos-react-core';\n\nexport interface ObjectConfigProps {\n label: string;\n heading: string;\n primaryAction: Action;\n secondaryAction: Action;\n content?: ReactNode;\n onBeforeOpen?: () => void;\n onAfterClose?: (id?: string) => void;\n ref?: Ref<HTMLDivElement>;\n}\n\nconst ObjectConfig: FC<\n ObjectConfigProps & ForwardProps & { disabled?: boolean; dismissPopover: (id?: string) => void }\n> = ({ heading, content, primaryAction, secondaryAction, disabled, dismissPopover }) => {\n const t = useI18n();\n\n return (\n <Flex container={{ direction: 'column', pad: 2, gap: 2 }}>\n <Flex container={{ justify: 'between', alignItems: 'center' }}>\n <Text variant='h3'>{heading}</Text>\n <Button icon variant='simple' label={t('close')} onClick={() => dismissPopover()}>\n <Icon name='times' />\n </Button>\n </Flex>\n {content}\n <Flex container={{ justify: 'between' }}>\n <Button\n variant='secondary'\n disabled={disabled}\n onClick={(e: MouseEvent<HTMLButtonElement>) => {\n secondaryAction.onClick?.(secondaryAction.id, e);\n dismissPopover(secondaryAction.id);\n }}\n >\n {secondaryAction.text}\n </Button>\n <Button\n variant='primary'\n disabled={disabled}\n onClick={(e: MouseEvent<HTMLButtonElement>) => {\n primaryAction.onClick?.(primaryAction.id, e);\n dismissPopover(primaryAction.id);\n }}\n >\n {primaryAction.text}\n </Button>\n </Flex>\n </Flex>\n );\n};\n\nexport default ObjectConfig;\n"]}
1	+ {"version":3,"file":"ObjectConfig.js","sourceRoot":"","sources":["../../../src/components/ObjectSelect/ObjectConfig.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAgB,MAAM,EAAE,IAAI,EAAE,IAAI,EAAU,IAAI,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAalG,MAAM,YAAY,GAEd,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,aAAa,EAAE,eAAe,EAAE,QAAQ,EAAE,cAAc,EAAE,EAAE,EAAE;IACrF,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,OAAO,CACL,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,aACtD,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAE,aAC3D,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,OAAO,GAAQ,EACnC,KAAC,MAAM,IAAC,IAAI,QAAC,OAAO,EAAC,QAAQ,EAAC,KAAK,EAAE,CAAC,CAAC,OAAO,CAAC,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,cAAc,EAAE,YAC9E,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,GAAG,GACd,IACJ,EACN,OAAO,EACR,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,aACrC,KAAC,MAAM,IACL,OAAO,EAAC,WAAW,EACnB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,CAAC,CAAgC,EAAE,EAAE;4BAC5C,eAAe,CAAC,OAAO,EAAE,CAAC,eAAe,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC;4BACjD,cAAc,CAAC,eAAe,CAAC,EAAE,CAAC,CAAC;wBACrC,CAAC,YAEA,eAAe,CAAC,IAAI,GACd,EACT,KAAC,MAAM,IACL,OAAO,EAAC,SAAS,EACjB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,CAAC,CAAgC,EAAE,EAAE;4BAC5C,aAAa,CAAC,OAAO,EAAE,CAAC,aAAa,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC;4BAC7C,cAAc,CAAC,aAAa,CAAC,EAAE,CAAC,CAAC;wBACnC,CAAC,YAEA,aAAa,CAAC,IAAI,GACZ,IACJ,IACF,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import { ReactNode, FC, Ref, MouseEvent } from 'react';\n\nimport { ForwardProps, Button, Flex, Icon, Action, Text, useI18n } from '@pega/cosmos-react-core';\n\nexport interface ObjectConfigProps {\n label: string;\n heading: string;\n primaryAction: Action;\n secondaryAction: Action;\n content?: ReactNode;\n onBeforeOpen?: () => void;\n onAfterClose?: (id?: string) => void;\n ref?: Ref<HTMLDivElement>;\n}\n\nconst ObjectConfig: FC<\n ObjectConfigProps & ForwardProps & { disabled?: boolean; dismissPopover: (id?: string) => void }\n> = ({ heading, content, primaryAction, secondaryAction, disabled, dismissPopover }) => {\n const t = useI18n();\n\n return (\n <Flex container={{ direction: 'column', pad: 2, gap: 2 }}>\n <Flex container={{ justify: 'between', alignItems: 'center' }}>\n <Text variant='h3'>{heading}</Text>\n <Button icon variant='simple' label={t('close')} onClick={() => dismissPopover()}>\n <Icon name='times' />\n </Button>\n </Flex>\n {content}\n <Flex container={{ justify: 'between' }}>\n <Button\n variant='secondary'\n disabled={disabled}\n onClick={(e: MouseEvent<HTMLButtonElement>) => {\n secondaryAction.onClick?.(secondaryAction.id, e);\n dismissPopover(secondaryAction.id);\n }}\n >\n {secondaryAction.text}\n </Button>\n <Button\n variant='primary'\n disabled={disabled}\n onClick={(e: MouseEvent<HTMLButtonElement>) => {\n primaryAction.onClick?.(primaryAction.id, e);\n dismissPopover(primaryAction.id);\n }}\n >\n {primaryAction.text}\n </Button>\n </Flex>\n </Flex>\n );\n};\n\nexport default ObjectConfig;\n"]}

package/lib/components/ObjectSelect/ObjectPicker.js CHANGED Viewed

@@ -19,7 +19,7 @@ const ObjectPicker = forwardRef(({ items, onSelect, ...restProps }, ref) => {
             items: itemsToRender,
             onItemClick: onSelect,
             accent: filterRegex
-        } }, void 0));
+        } }));
 });
 export default ObjectPicker;
 //# sourceMappingURL=ObjectPicker.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ObjectPicker.js","sourceRoot":"","sources":["../../../src/components/ObjectSelect/ObjectPicker.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAM,QAAQ,EAAE,OAAO,EAAoB,MAAM,OAAO,CAAC;AAE5E,OAAO,EAEL,QAAQ,EACR,WAAW,EAIX,mBAAmB,EAGpB,MAAM,yBAAyB,CAAC;AAuBjC,MAAM,YAAY,GAAyC,UAAU,CACnE,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAE,EAAE,GAA6B,EAAE,EAAE;IACnE,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IACnD,MAAM,WAAW,GAAG,WAAW,CAAC,CAAC,CAAC,mBAAmB,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IAE/E,MAAM,aAAa,GAAG,OAAO,CAAC,GAAG,EAAE;QACjC,MAAM,QAAQ,GAAG,WAAW;YAC1B,CAAC,CAAC,WAAW,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,OAAO,EAAiB,EAAE,EAAE;gBAC/D,OAAO,WAAW,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;YACpC,CAAC,CAAC;YACJ,CAAC,CAAC,KAAK,CAAC;QAEV,OAAO,WAAW,CAAC,OAAO,CAAC,QAAQ,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC;YAC5C,GAAG,IAAI;YACP,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ;SACnD,CAAC,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC,CAAC;IAEzB,OAAO,CACL,KAAC,QAAQ,OACH,SAAS,EACb,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,eAAe,EACpB,KAAK,EAAE,WAAW,EAClB,QAAQ,EAAE,CAAC,CAAgC,EAAE,EAAE,CAAC,cAAc,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAC9E,MAAM,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,EAAE,CAAC,EAChC,IAAI,EAAE;YACJ,KAAK,EAAE,aAAa;YACpB,WAAW,EAAE,QAAQ;YACrB,MAAM,EAAE,WAAW;SACpB,~~WACD~~,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import { forwardRef, FC, useState, useMemo, ChangeEvent, Ref } from 'react';\n\nimport {\n BaseProps,\n ComboBox,\n menuHelpers,\n ForwardProps,\n MenuProps,\n MenuItemProps,\n createStringMatcher,\n ComboBoxProps,\n NoChildrenProp\n} from '@pega/cosmos-react-core';\n\ninterface ObjectPickerProps\n extends BaseProps,\n NoChildrenProp,\n Pick<\n ComboBoxProps,\n \| 'id'\n \| 'label'\n \| 'labelHidden'\n \| 'required'\n \| 'disabled'\n \| 'readOnly'\n \| 'name'\n \| 'status'\n \| 'info'\n \| 'placeholder'\n > {\n items: MenuProps['items'];\n onSelect: (id: MenuItemProps['id']) => void;\n ref?: Ref<HTMLDivElement>;\n}\n\nconst ObjectPicker: FC<ObjectPickerProps & ForwardProps> = forwardRef(\n ({ items, onSelect, ...restProps }, ref: ObjectPickerProps['ref']) => {\n const [filterValue, setFilterValue] = useState('');\n const filterRegex = filterValue ? createStringMatcher(filterValue) : undefined;\n\n const itemsToRender = useMemo(() => {\n const newItems = filterValue\n ? menuHelpers.flatten(items).filter(({ primary }: MenuItemProps) => {\n return filterRegex?.test(primary);\n })\n : items;\n\n return menuHelpers.mapTree(newItems, item => ({\n ...item,\n selected: item.items ? undefined : !!item.selected\n }));\n }, [filterValue, items]);\n\n return (\n <ComboBox\n {...restProps}\n ref={ref}\n mode='single-select'\n value={filterValue}\n onChange={(e: ChangeEvent<HTMLInputElement>) => setFilterValue(e.target.value)}\n onBlur={() => setFilterValue('')}\n menu={{\n items: itemsToRender,\n onItemClick: onSelect,\n accent: filterRegex\n }}\n />\n );\n }\n);\n\nexport default ObjectPicker;\n"]}
1	+ {"version":3,"file":"ObjectPicker.js","sourceRoot":"","sources":["../../../src/components/ObjectSelect/ObjectPicker.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAM,QAAQ,EAAE,OAAO,EAAoB,MAAM,OAAO,CAAC;AAE5E,OAAO,EAEL,QAAQ,EACR,WAAW,EAIX,mBAAmB,EAGpB,MAAM,yBAAyB,CAAC;AAuBjC,MAAM,YAAY,GAAyC,UAAU,CACnE,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAE,EAAE,GAA6B,EAAE,EAAE;IACnE,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IACnD,MAAM,WAAW,GAAG,WAAW,CAAC,CAAC,CAAC,mBAAmB,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IAE/E,MAAM,aAAa,GAAG,OAAO,CAAC,GAAG,EAAE;QACjC,MAAM,QAAQ,GAAG,WAAW;YAC1B,CAAC,CAAC,WAAW,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,OAAO,EAAiB,EAAE,EAAE;gBAC/D,OAAO,WAAW,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;YACpC,CAAC,CAAC;YACJ,CAAC,CAAC,KAAK,CAAC;QAEV,OAAO,WAAW,CAAC,OAAO,CAAC,QAAQ,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC;YAC5C,GAAG,IAAI;YACP,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ;SACnD,CAAC,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC,CAAC;IAEzB,OAAO,CACL,KAAC,QAAQ,OACH,SAAS,EACb,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,eAAe,EACpB,KAAK,EAAE,WAAW,EAClB,QAAQ,EAAE,CAAC,CAAgC,EAAE,EAAE,CAAC,cAAc,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAC9E,MAAM,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,EAAE,CAAC,EAChC,IAAI,EAAE;YACJ,KAAK,EAAE,aAAa;YACpB,WAAW,EAAE,QAAQ;YACrB,MAAM,EAAE,WAAW;SACpB,GACD,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import { forwardRef, FC, useState, useMemo, ChangeEvent, Ref } from 'react';\n\nimport {\n BaseProps,\n ComboBox,\n menuHelpers,\n ForwardProps,\n MenuProps,\n MenuItemProps,\n createStringMatcher,\n ComboBoxProps,\n NoChildrenProp\n} from '@pega/cosmos-react-core';\n\ninterface ObjectPickerProps\n extends BaseProps,\n NoChildrenProp,\n Pick<\n ComboBoxProps,\n \| 'id'\n \| 'label'\n \| 'labelHidden'\n \| 'required'\n \| 'disabled'\n \| 'readOnly'\n \| 'name'\n \| 'status'\n \| 'info'\n \| 'placeholder'\n > {\n items: MenuProps['items'];\n onSelect: (id: MenuItemProps['id']) => void;\n ref?: Ref<HTMLDivElement>;\n}\n\nconst ObjectPicker: FC<ObjectPickerProps & ForwardProps> = forwardRef(\n ({ items, onSelect, ...restProps }, ref: ObjectPickerProps['ref']) => {\n const [filterValue, setFilterValue] = useState('');\n const filterRegex = filterValue ? createStringMatcher(filterValue) : undefined;\n\n const itemsToRender = useMemo(() => {\n const newItems = filterValue\n ? menuHelpers.flatten(items).filter(({ primary }: MenuItemProps) => {\n return filterRegex?.test(primary);\n })\n : items;\n\n return menuHelpers.mapTree(newItems, item => ({\n ...item,\n selected: item.items ? undefined : !!item.selected\n }));\n }, [filterValue, items]);\n\n return (\n <ComboBox\n {...restProps}\n ref={ref}\n mode='single-select'\n value={filterValue}\n onChange={(e: ChangeEvent<HTMLInputElement>) => setFilterValue(e.target.value)}\n onBlur={() => setFilterValue('')}\n menu={{\n items: itemsToRender,\n onItemClick: onSelect,\n accent: filterRegex\n }}\n />\n );\n }\n);\n\nexport default ObjectPicker;\n"]}

package/lib/components/ObjectSelect/ObjectSelect.js CHANGED Viewed

@@ -14,7 +14,7 @@ const ObjectSelect = forwardRef(({ items, value, configuration, disabled, onChan
             : objectPickerRef.current?.querySelector('input');
         element?.focus();
     }, [value, disabled]);
-    return (_jsx("div", { ref: ref, children: value ? (_jsx(ObjectSummary, { ...restProps, value: value, disabled: disabled, onDelete: () => onChange(''), ref: objectSummaryRef, configuration: configuration, onPreview: e => onPreview?.(value.id, e) }, void 0)) : (_jsx(ObjectPicker, { ...restProps, disabled: disabled, ref: objectPickerRef, items: items, onSelect: onChange }, void 0)) }, void 0));
+    return (_jsx("div", { ref: ref, children: value ? (_jsx(ObjectSummary, { ...restProps, value: value, disabled: disabled, onDelete: () => onChange(''), ref: objectSummaryRef, configuration: configuration, onPreview: e => onPreview?.(value.id, e) })) : (_jsx(ObjectPicker, { ...restProps, disabled: disabled, ref: objectPickerRef, items: items, onSelect: onChange })) }));
 });
 export default ObjectSelect;
 //# sourceMappingURL=ObjectSelect.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ObjectSelect.js","sourceRoot":"","sources":["../../../src/components/ObjectSelect/ObjectSelect.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA0B,MAAM,EAAE,MAAM,OAAO,CAAC;AAEnE,OAAO,EAGL,qBAAqB,EAKtB,MAAM,yBAAyB,CAAC;AAEjC,OAAO,YAAY,MAAM,gBAAgB,CAAC;AAC1C,OAAO,aAAqC,MAAM,iBAAiB,CAAC;AAoBpE,MAAM,YAAY,GAAwD,UAAU,CAClF,CACE,EAAE,KAAK,EAAE,KAAK,EAAE,aAAa,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,SAAS,EAAE,EAC5E,GAA6B,EAC7B,EAAE;IACF,MAAM,eAAe,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACrD,MAAM,gBAAgB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAEtD,qBAAqB,CAAC,GAAG,EAAE;QACzB,IAAI,QAAQ;YAAE,OAAO;QACrB,MAAM,OAAO,GAAG,KAAK;YACnB,CAAC,CAAC,gBAAgB,CAAC,OAAO,EAAE,aAAa,CAAC,GAAG,CAAC;YAC9C,CAAC,CAAC,eAAe,CAAC,OAAO,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;QACpD,OAAO,EAAE,KAAK,EAAE,CAAC;IACnB,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEtB,OAAO,CACL,cAAK,GAAG,EAAE,GAAG,YACV,KAAK,CAAC,CAAC,CAAC,CACP,KAAC,aAAa,OACR,SAAS,EACb,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,EAC5B,GAAG,EAAE,gBAAgB,EACrB,aAAa,EAAE,aAAa,EAC5B,SAAS,EAAE,CAAC,CAAC,EAAE,CAAC,SAAS,EAAE,CAAC,KAAK,CAAC,EAAE,EAAE,CAAC,CAAC,~~WACxC~~,CACH,CAAC,CAAC,CAAC,CACF,KAAC,YAAY,OACP,SAAS,EACb,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAE,eAAe,EACpB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,~~WAClB~~,CACH,~~WACG~~,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, Ref, useRef } from 'react';\n\nimport {\n BaseProps,\n ForwardProps,\n useAfterInitialEffect,\n FormControlProps,\n MenuItemProps,\n NoChildrenProp,\n MenuProps\n} from '@pega/cosmos-react-core';\n\nimport ObjectPicker from './ObjectPicker';\nimport ObjectSummary, { ObjectSummaryProps } from './ObjectSummary';\n\nexport interface ObjectSelectProps\n extends BaseProps,\n NoChildrenProp,\n Omit<FormControlProps, 'value'> {\n /** An array of MenuItemProps to be shown in the ObjectPicker menu. /\n items: MenuProps['items'];\n /* The value for the ObjectSummary /\n value?: ObjectSummaryProps['value'];\n /* Props for configuration popover /\n configuration?: ObjectSummaryProps['configuration'];\n /* Callback fired when a new item is selected and on clearing the selected item. /\n onChange: (id: MenuItemProps['id']) => void;\n /* Callback fired when the preview in the ObjectSummary link is clicked. /\n onPreview?: (id: MenuItemProps['id'], e: { href: string }) => void;\n /* Ref placed on the element. */\n ref?: Ref<HTMLDivElement>;\n}\n\nconst ObjectSelect: FunctionComponent<ObjectSelectProps & ForwardProps> = forwardRef(\n (\n { items, value, configuration, disabled, onChange, onPreview, ...restProps },\n ref: ObjectSelectProps['ref']\n ) => {\n const objectPickerRef = useRef<HTMLDivElement>(null);\n const objectSummaryRef = useRef<HTMLDivElement>(null);\n\n useAfterInitialEffect(() => {\n if (disabled) return;\n const element = value\n ? objectSummaryRef.current?.querySelector('a')\n : objectPickerRef.current?.querySelector('input');\n element?.focus();\n }, [value, disabled]);\n\n return (\n <div ref={ref}>\n {value ? (\n <ObjectSummary\n {...restProps}\n value={value}\n disabled={disabled}\n onDelete={() => onChange('')}\n ref={objectSummaryRef}\n configuration={configuration}\n onPreview={e => onPreview?.(value.id, e)}\n />\n ) : (\n <ObjectPicker\n {...restProps}\n disabled={disabled}\n ref={objectPickerRef}\n items={items}\n onSelect={onChange}\n />\n )}\n </div>\n );\n }\n);\n\nexport default ObjectSelect;\n"]}
1	+ {"version":3,"file":"ObjectSelect.js","sourceRoot":"","sources":["../../../src/components/ObjectSelect/ObjectSelect.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA0B,MAAM,EAAE,MAAM,OAAO,CAAC;AAEnE,OAAO,EAGL,qBAAqB,EAKtB,MAAM,yBAAyB,CAAC;AAEjC,OAAO,YAAY,MAAM,gBAAgB,CAAC;AAC1C,OAAO,aAAqC,MAAM,iBAAiB,CAAC;AAoBpE,MAAM,YAAY,GAAwD,UAAU,CAClF,CACE,EAAE,KAAK,EAAE,KAAK,EAAE,aAAa,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,SAAS,EAAE,EAC5E,GAA6B,EAC7B,EAAE;IACF,MAAM,eAAe,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACrD,MAAM,gBAAgB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAEtD,qBAAqB,CAAC,GAAG,EAAE;QACzB,IAAI,QAAQ;YAAE,OAAO;QACrB,MAAM,OAAO,GAAG,KAAK;YACnB,CAAC,CAAC,gBAAgB,CAAC,OAAO,EAAE,aAAa,CAAC,GAAG,CAAC;YAC9C,CAAC,CAAC,eAAe,CAAC,OAAO,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;QACpD,OAAO,EAAE,KAAK,EAAE,CAAC;IACnB,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEtB,OAAO,CACL,cAAK,GAAG,EAAE,GAAG,YACV,KAAK,CAAC,CAAC,CAAC,CACP,KAAC,aAAa,OACR,SAAS,EACb,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,EAC5B,GAAG,EAAE,gBAAgB,EACrB,aAAa,EAAE,aAAa,EAC5B,SAAS,EAAE,CAAC,CAAC,EAAE,CAAC,SAAS,EAAE,CAAC,KAAK,CAAC,EAAE,EAAE,CAAC,CAAC,GACxC,CACH,CAAC,CAAC,CAAC,CACF,KAAC,YAAY,OACP,SAAS,EACb,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAE,eAAe,EACpB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,GAClB,CACH,GACG,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, Ref, useRef } from 'react';\n\nimport {\n BaseProps,\n ForwardProps,\n useAfterInitialEffect,\n FormControlProps,\n MenuItemProps,\n NoChildrenProp,\n MenuProps\n} from '@pega/cosmos-react-core';\n\nimport ObjectPicker from './ObjectPicker';\nimport ObjectSummary, { ObjectSummaryProps } from './ObjectSummary';\n\nexport interface ObjectSelectProps\n extends BaseProps,\n NoChildrenProp,\n Omit<FormControlProps, 'value'> {\n /** An array of MenuItemProps to be shown in the ObjectPicker menu. /\n items: MenuProps['items'];\n /* The value for the ObjectSummary /\n value?: ObjectSummaryProps['value'];\n /* Props for configuration popover /\n configuration?: ObjectSummaryProps['configuration'];\n /* Callback fired when a new item is selected and on clearing the selected item. /\n onChange: (id: MenuItemProps['id']) => void;\n /* Callback fired when the preview in the ObjectSummary link is clicked. /\n onPreview?: (id: MenuItemProps['id'], e: { href: string }) => void;\n /* Ref placed on the element. */\n ref?: Ref<HTMLDivElement>;\n}\n\nconst ObjectSelect: FunctionComponent<ObjectSelectProps & ForwardProps> = forwardRef(\n (\n { items, value, configuration, disabled, onChange, onPreview, ...restProps },\n ref: ObjectSelectProps['ref']\n ) => {\n const objectPickerRef = useRef<HTMLDivElement>(null);\n const objectSummaryRef = useRef<HTMLDivElement>(null);\n\n useAfterInitialEffect(() => {\n if (disabled) return;\n const element = value\n ? objectSummaryRef.current?.querySelector('a')\n : objectPickerRef.current?.querySelector('input');\n element?.focus();\n }, [value, disabled]);\n\n return (\n <div ref={ref}>\n {value ? (\n <ObjectSummary\n {...restProps}\n value={value}\n disabled={disabled}\n onDelete={() => onChange('')}\n ref={objectSummaryRef}\n configuration={configuration}\n onPreview={e => onPreview?.(value.id, e)}\n />\n ) : (\n <ObjectPicker\n {...restProps}\n disabled={disabled}\n ref={objectPickerRef}\n items={items}\n onSelect={onChange}\n />\n )}\n </div>\n );\n }\n);\n\nexport default ObjectSelect;\n"]}

package/lib/components/ObjectSelect/ObjectSummary.js CHANGED Viewed

@@ -65,7 +65,7 @@ const ObjectSummary = forwardRef(({ value, configuration, label, disabled, statu
         else
             buttonEl?.focus();
     }, [open, popoverEl]);
-    return (_jsx(FormField, { ...restProps, ref: ref, label: label, status: status, children: _jsx(SummaryItem, { as: StyledObjectSummary, status: status, meta: value.meta, primary: _jsx(Link, { href: value.href, "aria-label": `${label} ${value.primary}`, previewable: true, target: '_blank', onPreview: onPreview, children: value.primary }, void 0), secondary: value.meta && _jsx(StyledMetaText, { variant: 'secondary', children: value.meta }, void 0), actions: _jsxs(_Fragment, { children: [configuration && (_jsx(Button, { ref: setButtonEl, label: configuration?.label, icon: true, variant: 'simple', onClick: openPopover, children: _jsx(Icon, { name: 'gear' }, void 0) }, void 0)), !readOnly && (_jsx(Button, { disabled: disabled, label: t('clear_object_summary', [String(label)]), icon: true, variant: 'simple', onClick: onDelete, children: _jsx(Icon, { name: 'times' }, void 0) }, void 0)), _jsx(Popover, { ref: popoverRef, placement: rtl ? 'bottom-end' : 'bottom-start', hideOnTargetHidden: true, show: open, target: buttonEl, children: configuration && open && (_jsx(ObjectConfig, { ...configuration, disabled: disabled, dismissPopover: dismissPopover }, void 0)) }, void 0)] }, void 0) }, void 0) }, void 0));
+    return (_jsx(FormField, { ...restProps, ref: ref, label: label, status: status, children: _jsx(SummaryItem, { as: StyledObjectSummary, status: status, meta: value.meta, primary: _jsx(Link, { href: value.href, "aria-label": `${label} ${value.primary}`, previewable: true, target: '_blank', onPreview: onPreview, children: value.primary }), secondary: value.meta && _jsx(StyledMetaText, { variant: 'secondary', children: value.meta }), actions: _jsxs(_Fragment, { children: [configuration && (_jsx(Button, { ref: setButtonEl, label: configuration?.label, icon: true, variant: 'simple', onClick: openPopover, children: _jsx(Icon, { name: 'gear' }) })), !readOnly && (_jsx(Button, { disabled: disabled, label: t('clear_object_summary', [String(label)]), icon: true, variant: 'simple', onClick: onDelete, children: _jsx(Icon, { name: 'times' }) })), _jsx(Popover, { ref: popoverRef, placement: rtl ? 'bottom-end' : 'bottom-start', hideOnTargetHidden: true, show: open, target: buttonEl, children: configuration && open && (_jsx(ObjectConfig, { ...configuration, disabled: disabled, dismissPopover: dismissPopover })) })] }) }) }));
 });
 export default ObjectSummary;
 //# sourceMappingURL=ObjectSummary.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ObjectSummary.js","sourceRoot":"","sources":["../../../src/components/ObjectSelect/ObjectSummary.tsx"],"names":[],"mappings":"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~~WACT~~,EAET,SAAS,EACP,KAAK,CAAC,IAAI,IAAI,KAAC,cAAc,IAAC,OAAO,EAAC,WAAW,YAAE,KAAK,CAAC,IAAI,~~WAAkB~~,EAEjF,OAAO,EACL,8BACG,aAAa,IAAI,CAChB,KAAC,MAAM,IACL,GAAG,EAAE,WAAW,EAChB,KAAK,EAAE,aAAa,EAAE,KAAK,EAC3B,IAAI,QACJ,OAAO,EAAC,QAAQ,EAChB,OAAO,EAAE,WAAW,YAEpB,KAAC,IAAI,IAAC,IAAI,EAAC,MAAM,~~WAAG~~,~~WACb~~,CACV,EACA,CAAC,QAAQ,IAAI,CACZ,KAAC,MAAM,IACL,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,CAAC,CAAC,sBAAsB,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,EACjD,IAAI,QACJ,OAAO,EAAC,QAAQ,EAChB,OAAO,EAAE,QAAQ,YAEjB,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,~~WAAG~~,~~WACd~~,CACV,EACD,KAAC,OAAO,IACN,GAAG,EAAE,UAAU,EACf,SAAS,EAAE,GAAG,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,cAAc,EAC9C,kBAAkB,QAClB,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,QAAQ,YAEf,aAAa,IAAI,IAAI,IAAI,CACxB,KAAC,YAAY,OACP,aAAa,EACjB,QAAQ,EAAE,QAAQ,EAClB,cAAc,EAAE,cAAc,~~WAC9B~~,CACH,~~WACO~~,~~YACT~~,~~WAEL~~,~~WACQ~~,CACb,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import { FC, forwardRef, Ref, PropsWithoutRef, useCallback, useEffect, useState } from 'react';\nimport styled from 'styled-components';\n\nimport {\n BaseProps,\n SummaryItem,\n Link,\n Button,\n Icon,\n ForwardProps,\n StyledFormControl,\n FormField,\n FormControlProps,\n MenuItemProps,\n useI18n,\n registerIcon,\n Text,\n Popover,\n getFocusables,\n useAfterInitialEffect,\n useConsolidatedRef,\n useDirection,\n useElement\n} from '@pega/cosmos-react-core';\nimport * as times from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';\nimport * as gear from '@pega/cosmos-react-core/lib/components/Icon/icons/gear.icon';\n\nimport ObjectConfig, { ObjectConfigProps } from './ObjectConfig';\n\nregisterIcon(times, gear);\n\ninterface ObjectSummaryValueProps {\n id: MenuItemProps['id'];\n primary: MenuItemProps['primary'];\n href: string;\n meta?: string;\n}\n\nexport interface ObjectSummaryProps extends BaseProps, Omit<FormControlProps, 'value'> {\n value: ObjectSummaryValueProps;\n configuration?: ObjectConfigProps;\n onDelete: () => void;\n onPreview?: (e: { href: string }) => void;\n ref: Ref<HTMLDivElement>;\n}\n\nconst StyledObjectSummary = styled(StyledFormControl)<{ meta: string }>`\n padding: ${({ meta }) => (meta ? '0.5rem' : '0 0.5rem')};\n`;\n\nconst StyledMetaText = styled(Text)`\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 2;\n overflow: hidden;\n`;\n\nconst ObjectSummary: FC<PropsWithoutRef<ObjectSummaryProps> & ForwardProps> = forwardRef(\n (\n { value, configuration, label, disabled, status, readOnly, onDelete, onPreview, ...restProps },\n ref: ObjectSummaryProps['ref']\n ) => {\n const [open, setOpen] = useState(false);\n const [buttonEl, setButtonEl] = useElement<HTMLButtonElement>();\n const [popoverEl, setPopoverEl] = useElement<HTMLElement>();\n const popoverRef = useConsolidatedRef<HTMLDivElement>(configuration?.ref, setPopoverEl);\n const t = useI18n();\n const { rtl } = useDirection();\n\n const openPopover = () => {\n configuration?.onBeforeOpen?.();\n setOpen(true);\n };\n\n const dismissPopover = (id?: string) => {\n setOpen(false);\n configuration?.onAfterClose?.(id);\n };\n\n const onKeydown = useCallback(\n (e: KeyboardEvent) => {\n const { key } = e;\n if (key === 'Escape') {\n setOpen(false);\n } else if (key === 'Tab' && popoverEl) {\n const focusableContent = getFocusables(popoverRef);\n\n if (!focusableContent) return;\n\n const firstFocusableElement = focusableContent[0];\n const lastFocusableElement = focusableContent[focusableContent.length - 1];\n\n if (e.shiftKey) {\n if (document.activeElement === firstFocusableElement) {\n lastFocusableElement.focus();\n e.preventDefault();\n }\n } else if (document.activeElement === lastFocusableElement) {\n firstFocusableElement.focus();\n e.preventDefault();\n }\n }\n },\n [popoverEl]\n );\n\n useEffect(() => {\n popoverEl?.addEventListener('keydown', onKeydown);\n return () => {\n popoverEl?.removeEventListener('keydown', onKeydown);\n };\n }, [popoverEl]);\n\n useAfterInitialEffect(() => {\n if (open) popoverEl?.querySelector('button')?.focus();\n else buttonEl?.focus();\n }, [open, popoverEl]);\n\n return (\n <FormField {...restProps} ref={ref} label={label} status={status}>\n <SummaryItem\n as={StyledObjectSummary}\n status={status}\n meta={value.meta}\n primary={\n <Link\n href={value.href}\n aria-label={`${label} ${value.primary}`}\n previewable\n target='_blank'\n onPreview={onPreview}\n >\n {value.primary}\n </Link>\n }\n secondary={\n value.meta && <StyledMetaText variant='secondary'>{value.meta}</StyledMetaText>\n }\n actions={\n <>\n {configuration && (\n <Button\n ref={setButtonEl}\n label={configuration?.label}\n icon\n variant='simple'\n onClick={openPopover}\n >\n <Icon name='gear' />\n </Button>\n )}\n {!readOnly && (\n <Button\n disabled={disabled}\n label={t('clear_object_summary', [String(label)])}\n icon\n variant='simple'\n onClick={onDelete}\n >\n <Icon name='times' />\n </Button>\n )}\n <Popover\n ref={popoverRef}\n placement={rtl ? 'bottom-end' : 'bottom-start'}\n hideOnTargetHidden\n show={open}\n target={buttonEl}\n >\n {configuration && open && (\n <ObjectConfig\n {...configuration}\n disabled={disabled}\n dismissPopover={dismissPopover}\n />\n )}\n </Popover>\n </>\n }\n />\n </FormField>\n );\n }\n);\n\nexport default ObjectSummary;\n"]}
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, useCallback, useEffect, useState } from 'react';\nimport styled from 'styled-components';\n\nimport {\n BaseProps,\n SummaryItem,\n Link,\n Button,\n Icon,\n ForwardProps,\n StyledFormControl,\n FormField,\n FormControlProps,\n MenuItemProps,\n useI18n,\n registerIcon,\n Text,\n Popover,\n getFocusables,\n useAfterInitialEffect,\n useConsolidatedRef,\n useDirection,\n useElement\n} from '@pega/cosmos-react-core';\nimport * as times from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';\nimport * as gear from '@pega/cosmos-react-core/lib/components/Icon/icons/gear.icon';\n\nimport ObjectConfig, { ObjectConfigProps } from './ObjectConfig';\n\nregisterIcon(times, gear);\n\ninterface ObjectSummaryValueProps {\n id: MenuItemProps['id'];\n primary: MenuItemProps['primary'];\n href: string;\n meta?: string;\n}\n\nexport interface ObjectSummaryProps extends BaseProps, Omit<FormControlProps, 'value'> {\n value: ObjectSummaryValueProps;\n configuration?: ObjectConfigProps;\n onDelete: () => void;\n onPreview?: (e: { href: string }) => void;\n ref: Ref<HTMLDivElement>;\n}\n\nconst StyledObjectSummary = styled(StyledFormControl)<{ meta: string }>`\n padding: ${({ meta }) => (meta ? '0.5rem' : '0 0.5rem')};\n`;\n\nconst StyledMetaText = styled(Text)`\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 2;\n overflow: hidden;\n`;\n\nconst ObjectSummary: FC<PropsWithoutRef<ObjectSummaryProps> & ForwardProps> = forwardRef(\n (\n { value, configuration, label, disabled, status, readOnly, onDelete, onPreview, ...restProps },\n ref: ObjectSummaryProps['ref']\n ) => {\n const [open, setOpen] = useState(false);\n const [buttonEl, setButtonEl] = useElement<HTMLButtonElement>();\n const [popoverEl, setPopoverEl] = useElement<HTMLElement>();\n const popoverRef = useConsolidatedRef<HTMLDivElement>(configuration?.ref, setPopoverEl);\n const t = useI18n();\n const { rtl } = useDirection();\n\n const openPopover = () => {\n configuration?.onBeforeOpen?.();\n setOpen(true);\n };\n\n const dismissPopover = (id?: string) => {\n setOpen(false);\n configuration?.onAfterClose?.(id);\n };\n\n const onKeydown = useCallback(\n (e: KeyboardEvent) => {\n const { key } = e;\n if (key === 'Escape') {\n setOpen(false);\n } else if (key === 'Tab' && popoverEl) {\n const focusableContent = getFocusables(popoverRef);\n\n if (!focusableContent) return;\n\n const firstFocusableElement = focusableContent[0];\n const lastFocusableElement = focusableContent[focusableContent.length - 1];\n\n if (e.shiftKey) {\n if (document.activeElement === firstFocusableElement) {\n lastFocusableElement.focus();\n e.preventDefault();\n }\n } else if (document.activeElement === lastFocusableElement) {\n firstFocusableElement.focus();\n e.preventDefault();\n }\n }\n },\n [popoverEl]\n );\n\n useEffect(() => {\n popoverEl?.addEventListener('keydown', onKeydown);\n return () => {\n popoverEl?.removeEventListener('keydown', onKeydown);\n };\n }, [popoverEl]);\n\n useAfterInitialEffect(() => {\n if (open) popoverEl?.querySelector('button')?.focus();\n else buttonEl?.focus();\n }, [open, popoverEl]);\n\n return (\n <FormField {...restProps} ref={ref} label={label} status={status}>\n <SummaryItem\n as={StyledObjectSummary}\n status={status}\n meta={value.meta}\n primary={\n <Link\n href={value.href}\n aria-label={`${label} ${value.primary}`}\n previewable\n target='_blank'\n onPreview={onPreview}\n >\n {value.primary}\n </Link>\n }\n secondary={\n value.meta && <StyledMetaText variant='secondary'>{value.meta}</StyledMetaText>\n }\n actions={\n <>\n {configuration && (\n <Button\n ref={setButtonEl}\n label={configuration?.label}\n icon\n variant='simple'\n onClick={openPopover}\n >\n <Icon name='gear' />\n </Button>\n )}\n {!readOnly && (\n <Button\n disabled={disabled}\n label={t('clear_object_summary', [String(label)])}\n icon\n variant='simple'\n onClick={onDelete}\n >\n <Icon name='times' />\n </Button>\n )}\n <Popover\n ref={popoverRef}\n placement={rtl ? 'bottom-end' : 'bottom-start'}\n hideOnTargetHidden\n show={open}\n target={buttonEl}\n >\n {configuration && open && (\n <ObjectConfig\n {...configuration}\n disabled={disabled}\n dismissPopover={dismissPopover}\n />\n )}\n </Popover>\n </>\n }\n />\n </FormField>\n );\n }\n);\n\nexport default ObjectSummary;\n"]}