npm - @pega/cosmos-react-work - Versions diffs - 8.0.0-build.3.2 → 8.0.0-build.30.1 - Mend

@pega/cosmos-react-work 8.0.0-build.3.2 → 8.0.0-build.30.1

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 (291) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Stages.js","sourceRoot":"","sources":["../../../src/components/Stages/Stages.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState, useRef, useEffect, forwardRef, Fragment } from 'react';\nimport type { FunctionComponent, MouseEvent, PropsWithoutRef } from 'react';\nimport { remToPx } from 'polished';\n\nimport {\n Icon,\n registerIcon,\n Flex,\n useI18n,\n Button,\n Modal,\n useBreakpoint,\n debounce,\n useModalManager,\n useConsolidatedRef,\n useUID,\n InfoDialog,\n useArrows,\n useAfterInitialEffect,\n VisuallyHiddenText\n} from '@pega/cosmos-react-core';\nimport type { ForwardProps, ModalMethods } from '@pega/cosmos-react-core';\nimport * as checkIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/check.icon';\n\nimport type { StagesProps } from './Stages.types';\nimport StageGlimpse from './StageGlimpse';\nimport {\n StyledInnerStage,\n StyledStageCompleteIcon,\n StyledStage,\n StyledStageContainer,\n StyledStageGlimpse,\n StyledStages,\n StyledStagesDescription,\n StyledStageText\n} from './Stages.styles';\n\nregisterIcon(checkIcon);\n\nconst Stages: FunctionComponent<StagesProps & ForwardProps> = forwardRef(function Stages(\n { current, stages, caseTitle, onLoadStage, ...restProps }: PropsWithoutRef<StagesProps>,\n ref: StagesProps['ref']\n) {\n const t = useI18n();\n\n const stagesRef = useConsolidatedRef(ref);\n const stagesRefs = useRef<HTMLButtonElement[]>([]);\n\n const [target, setTarget] = useState<HTMLButtonElement \| null>(null);\n\n const { create: createModal } = useModalManager();\n const modalMethods = useRef<ModalMethods>();\n const [showModal, setShowModal] = useState(false);\n\n const isSmallOrAbove = useBreakpoint('sm');\n const [compressedView, setCompressedView] = useState(false);\n const [minExpandedWidth, setMinExpandedWidth] = useState(0);\n\n useArrows(stagesRef, {\n selector: ':scope > li > button:not([aria-expanded])',\n dir: 'left-right',\n initialFocusElement: stagesRefs.current.find(stage => stage.ariaCurrent)\n });\n\n const dialogId = useUID();\n const descriptionId = useUID();\n\n useEffect(() => {\n if (stagesRef.current) {\n if (compressedView) {\n const resizeObserver = new ResizeObserver(\n debounce((entries: ResizeObserverEntry[]) => {\n if (entries[0].contentRect.width > minExpandedWidth) {\n setCompressedView(false);\n }\n }, 100)\n );\n resizeObserver.observe(stagesRef.current);\n return () => resizeObserver.disconnect();\n }\n\n const intersectionObserver = new IntersectionObserver(\n entries => {\n if (!entries[0].isIntersecting) {\n setCompressedView(true);\n if (entries[0].rootBounds) setMinExpandedWidth(entries[0].rootBounds.width);\n }\n },\n {\n root: stagesRef.current,\n rootMargin: remToPx(0.0625),\n threshold: 1\n }\n );\n\n if (stagesRef.current.lastElementChild) {\n intersectionObserver.observe(stagesRef.current.lastElementChild);\n return () => intersectionObserver.disconnect();\n }\n }\n }, [minExpandedWidth, compressedView, stages.length]);\n\n const stagesToLoad = onLoadStage\n ? stages.filter(stage => !Array.isArray(stage.steps)).map(stage => stage.id)\n : [];\n\n const openModal = () => {\n setShowModal(true);\n if (stagesToLoad.length > 0) onLoadStage?.(stagesToLoad);\n modalMethods.current = createModal(Modal, {\n heading: caseTitle\n ? t('stages_case_lifecycle', [caseTitle])\n : t('stages_default_case_lifecycle'),\n progress: stagesToLoad.length > 0,\n children: stages.map(stage => (\n <Fragment key={stage.id}>\n <Flex container={{ alignItems: 'start', gap: 0.5 }}>\n {stage.completed && <StyledStageCompleteIcon name='check' />}\n <StyledStageText variant='h2' isCurrent={stage.id === current}>\n {stage.name}\n {stage.completed && <VisuallyHiddenText>{`- ${t('completed')}`}</VisuallyHiddenText>}\n </StyledStageText>\n </Flex>\n <StageGlimpse stage={stage} />\n </Fragment>\n )),\n onBeforeClose: () => {\n setShowModal(false);\n target?.focus();\n setTarget(null);\n modalMethods.current = undefined;\n }\n });\n };\n\n useAfterInitialEffect(() => {\n modalMethods.current?.update({\n progress: stagesToLoad.length > 0,\n children: stages.map(stage => (\n <Fragment key={stage.id}>\n <Flex container={{ alignItems: 'start', gap: 0.5 }}>\n {stage.completed && <StyledStageCompleteIcon name='check' />}\n <StyledStageText variant='h2' isCurrent={stage.id === current}>\n {stage.name}\n {stage.completed && <VisuallyHiddenText>{`- ${t('completed')}`}</VisuallyHiddenText>}\n </StyledStageText>\n </Flex>\n <StageGlimpse stage={stage} />\n </Fragment>\n ))\n });\n }, [stagesToLoad.length]);\n\n return (\n <>\n <Flex\n {...restProps}\n container\n as={StyledStages}\n ref={stagesRef}\n aria-label={t('stages_label')}\n aria-describedby={descriptionId}\n >\n {stages.map((stage, index) => {\n const isCurrent = stage.id === current;\n let stageStatusText = t(stage.completed ? 'completed' : 'not_started');\n if (isCurrent) stageStatusText = t('current');\n const hasToLoad = stagesToLoad.includes(stage.id);\n return (\n <Fragment key={stage.id}>\n <Flex as={StyledStageContainer} item={{ grow: 1, shrink: 0 }}>\n <Flex\n container={{ justify: 'center', alignItems: 'center' }}\n as={StyledStage}\n item={{\n grow: compressedView && !isCurrent ? 0 : 1,\n shrink: compressedView && isCurrent ? 1 : 0\n }}\n aria-current={isCurrent ? 'step' : undefined}\n aria-label={t('stages_stage_label', [stage.name, stageStatusText])}\n onClick={(e: MouseEvent<HTMLButtonElement>) => {\n if (isSmallOrAbove) {\n if (hasToLoad) onLoadStage?.([stage.id]);\n setTarget(e.currentTarget);\n } else {\n openModal();\n }\n }}\n ref={(el: HTMLButtonElement) => {\n stagesRefs.current[index] = el;\n }}\n aria-expanded={target && isSmallOrAbove}\n aria-controls={target ? dialogId : undefined}\n aria-haspopup\n >\n {stage.completed && <Icon name='check' />}\n {(!compressedView \|\| isCurrent \|\| !stage.completed) && (\n <StyledInnerStage ellipsis={isCurrent && compressedView}>\n {!isCurrent && compressedView ? index + 1 : stage.name}\n </StyledInnerStage>\n )}\n </Flex>\n </Flex>\n {target && stagesRefs.current[index] === target && isSmallOrAbove && !showModal && (\n <InfoDialog\n heading={stage.name}\n target={target}\n progress={hasToLoad ? t('loading') : undefined}\n onDismiss={() => {\n setTarget(null);\n }}\n placement='bottom-start'\n >\n {!hasToLoad && (\n <StyledStageGlimpse>\n <StageGlimpse stage={stage} />\n <Button variant='secondary' onClick={openModal}>\n {t('stages_see_full_lifecycle')}\n </Button>\n </StyledStageGlimpse>\n )}\n </InfoDialog>\n )}\n </Fragment>\n );\n })}\n </Flex>\n <StyledStagesDescription id={descriptionId}>\n {t('stages_description')}\n </StyledStagesDescription>\n </>\n );\n});\n\nexport default Stages;\n"]}
1	+ {"version":3,"file":"Stages.js","sourceRoot":"","sources":["../../../src/components/Stages/Stages.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState, useRef, useEffect, forwardRef, Fragment } from 'react';\nimport type { MouseEvent, PropsWithoutRef } from 'react';\nimport { remToPx } from 'polished';\n\nimport {\n Icon,\n registerIcon,\n Flex,\n useI18n,\n Button,\n Modal,\n useBreakpoint,\n debounce,\n useModalManager,\n useConsolidatedRef,\n useUID,\n InfoDialog,\n useArrows,\n useAfterInitialEffect,\n VisuallyHiddenText\n} from '@pega/cosmos-react-core';\nimport type { ForwardRefForwardPropsComponent, ModalMethods } from '@pega/cosmos-react-core';\nimport * as checkIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/check.icon';\n\nimport type { StagesProps } from './Stages.types';\nimport StageGlimpse from './StageGlimpse';\nimport {\n StyledInnerStage,\n StyledStageCompleteIcon,\n StyledStage,\n StyledStageContainer,\n StyledStageGlimpse,\n StyledStages,\n StyledStagesDescription,\n StyledStageText\n} from './Stages.styles';\n\nregisterIcon(checkIcon);\n\nconst Stages: ForwardRefForwardPropsComponent<StagesProps> = forwardRef(function Stages(\n { current, stages, caseTitle, onLoadStage, ...restProps }: PropsWithoutRef<StagesProps>,\n ref: StagesProps['ref']\n) {\n const t = useI18n();\n\n const stagesRef = useConsolidatedRef(ref);\n const stagesRefs = useRef<HTMLButtonElement[]>([]);\n\n const [target, setTarget] = useState<HTMLButtonElement \| null>(null);\n\n const { create: createModal } = useModalManager();\n const modalMethods = useRef<ModalMethods>();\n const [showModal, setShowModal] = useState(false);\n\n const isSmallOrAbove = useBreakpoint('sm');\n const [compressedView, setCompressedView] = useState(false);\n const [minExpandedWidth, setMinExpandedWidth] = useState(0);\n\n useArrows(stagesRef, {\n selector: ':scope > li > button:not([aria-expanded])',\n dir: 'left-right',\n initialFocusElement: stagesRefs.current.find(stage => stage.ariaCurrent)\n });\n\n const dialogId = useUID();\n const descriptionId = useUID();\n\n useEffect(() => {\n if (stagesRef.current) {\n if (compressedView) {\n const resizeObserver = new ResizeObserver(\n debounce((entries: ResizeObserverEntry[]) => {\n if (entries[0].contentRect.width > minExpandedWidth) {\n setCompressedView(false);\n }\n }, 100)\n );\n resizeObserver.observe(stagesRef.current);\n return () => resizeObserver.disconnect();\n }\n\n const intersectionObserver = new IntersectionObserver(\n entries => {\n if (!entries[0].isIntersecting) {\n setCompressedView(true);\n if (entries[0].rootBounds) setMinExpandedWidth(entries[0].rootBounds.width);\n }\n },\n {\n root: stagesRef.current,\n rootMargin: remToPx(0.0625),\n threshold: 1\n }\n );\n\n if (stagesRef.current.lastElementChild) {\n intersectionObserver.observe(stagesRef.current.lastElementChild);\n return () => intersectionObserver.disconnect();\n }\n }\n }, [minExpandedWidth, compressedView, stages.length]);\n\n const stagesToLoad = onLoadStage\n ? stages.filter(stage => !Array.isArray(stage.steps)).map(stage => stage.id)\n : [];\n\n const openModal = () => {\n setShowModal(true);\n if (stagesToLoad.length > 0) onLoadStage?.(stagesToLoad);\n modalMethods.current = createModal(Modal, {\n heading: caseTitle\n ? t('stages_case_lifecycle', [caseTitle])\n : t('stages_default_case_lifecycle'),\n progress: stagesToLoad.length > 0,\n children: stages.map(stage => (\n <Fragment key={stage.id}>\n <Flex container={{ alignItems: 'start', gap: 0.5 }}>\n {stage.completed && <StyledStageCompleteIcon name='check' />}\n <StyledStageText variant='h2' isCurrent={stage.id === current}>\n {stage.name}\n {stage.completed && <VisuallyHiddenText>{`- ${t('completed')}`}</VisuallyHiddenText>}\n </StyledStageText>\n </Flex>\n <StageGlimpse stage={stage} />\n </Fragment>\n )),\n onBeforeClose: () => {\n setShowModal(false);\n target?.focus();\n setTarget(null);\n modalMethods.current = undefined;\n }\n });\n };\n\n useAfterInitialEffect(() => {\n modalMethods.current?.update({\n progress: stagesToLoad.length > 0,\n children: stages.map(stage => (\n <Fragment key={stage.id}>\n <Flex container={{ alignItems: 'start', gap: 0.5 }}>\n {stage.completed && <StyledStageCompleteIcon name='check' />}\n <StyledStageText variant='h2' isCurrent={stage.id === current}>\n {stage.name}\n {stage.completed && <VisuallyHiddenText>{`- ${t('completed')}`}</VisuallyHiddenText>}\n </StyledStageText>\n </Flex>\n <StageGlimpse stage={stage} />\n </Fragment>\n ))\n });\n }, [stagesToLoad.length]);\n\n return (\n <>\n <Flex\n {...restProps}\n container\n as={StyledStages}\n ref={stagesRef}\n aria-label={t('stages_label')}\n aria-describedby={descriptionId}\n >\n {stages.map((stage, index) => {\n const isCurrent = stage.id === current;\n let stageStatusText = t(stage.completed ? 'completed' : 'not_started');\n if (isCurrent) stageStatusText = t('current');\n\n const hasToLoad = stagesToLoad.includes(stage.id);\n\n let stageStatus = stage.completed ? 'completed' : 'pending';\n if (isCurrent) stageStatus = 'current';\n\n return (\n <Fragment key={stage.id}>\n <Flex as={StyledStageContainer} item={{ grow: 1, shrink: 0 }}>\n <Flex\n container={{ justify: 'center', alignItems: 'center' }}\n as={StyledStage}\n item={{\n grow: compressedView && !isCurrent ? 0 : 1,\n shrink: compressedView && isCurrent ? 1 : 0\n }}\n status={stageStatus}\n aria-current={isCurrent ? 'step' : undefined}\n aria-label={t('stages_stage_label', [stage.name, stageStatusText])}\n onClick={(e: MouseEvent<HTMLButtonElement>) => {\n if (isSmallOrAbove) {\n if (hasToLoad) onLoadStage?.([stage.id]);\n setTarget(e.currentTarget);\n } else {\n openModal();\n }\n }}\n ref={(el: HTMLButtonElement) => {\n stagesRefs.current[index] = el;\n }}\n aria-expanded={target && isSmallOrAbove}\n aria-controls={target ? dialogId : undefined}\n aria-haspopup\n >\n {stage.completed && <Icon name='check' />}\n {(!compressedView \|\| isCurrent \|\| !stage.completed) && (\n <StyledInnerStage ellipsis={isCurrent && compressedView}>\n {!isCurrent && compressedView ? index + 1 : stage.name}\n </StyledInnerStage>\n )}\n </Flex>\n </Flex>\n {target && stagesRefs.current[index] === target && isSmallOrAbove && !showModal && (\n <InfoDialog\n heading={stage.name}\n target={target}\n progress={hasToLoad ? t('loading') : undefined}\n onDismiss={() => {\n setTarget(null);\n }}\n placement='bottom-start'\n >\n {!hasToLoad && (\n <StyledStageGlimpse>\n <StageGlimpse stage={stage} />\n <Button variant='secondary' onClick={openModal}>\n {t('stages_see_full_lifecycle')}\n </Button>\n </StyledStageGlimpse>\n )}\n </InfoDialog>\n )}\n </Fragment>\n );\n })}\n </Flex>\n <StyledStagesDescription id={descriptionId}>\n {t('stages_description')}\n </StyledStagesDescription>\n </>\n );\n});\n\nexport default Stages;\n"]}

package/lib/components/Stages/Stages.styles.d.ts CHANGED Viewed

@@ -1,19 +1,20 @@
-/// <reference types="react" />
 export declare const StyledStages: import("styled-components").StyledComponent<"ol", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledInnerStage: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {
-    ellipsis?: boolean | undefined;
+    ellipsis?: boolean;
+}, never>;
+export declare const StyledStage: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {
+    status: "completed" | "current" | "pending";
 }, never>;
-export declare const StyledStage: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledStageCompleteIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@pega/cosmos-react-core").IconProps>, import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledStageText: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").TextProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {
-    isCurrent?: boolean | undefined;
+export declare const StyledStageText: import("styled-components").StyledComponent<import("@pega/cosmos-react-core").ForwardRefForwardPropsComponent<import("@pega/cosmos-react-core").TextProps>, import("styled-components").DefaultTheme, {
+    isCurrent?: boolean;
 }, never>;
 export declare const StyledStageContainer: import("styled-components").StyledComponent<"li", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledStepsContainer: import("styled-components").StyledComponent<"ol", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledStep: import("styled-components").StyledComponent<"li", import("styled-components").DefaultTheme, {
     completed: boolean;
 }, never>;
-export declare const StyledDateTimeDisplay: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").DateTimeDisplayProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledDateTimeDisplay: import("styled-components").StyledComponent<import("@pega/cosmos-react-core").ForwardRefForwardPropsComponent<import("@pega/cosmos-react-core").DateTimeDisplayProps>, import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledStageGlimpse: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledStagesDescription: import("styled-components").StyledComponent<"p", import("styled-components").DefaultTheme, {}, never>;
 //# sourceMappingURL=Stages.styles.d.ts.map

package/lib/components/Stages/Stages.styles.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Stages.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Stages/Stages.styles.ts"],"names":[],"mappings":"~~;AAcA~~,eAAO,MAAM,YAAY,wGAYvB,CAAC;AAIH,eAAO,MAAM,gBAAgB~~;;SAW3B~~,CAAC;AAEH,eAAO,MAAM,WAAW,~~4GAgJvB~~,CAAC;AAIF,eAAO,MAAM,uBAAuB,0LAQlC,CAAC;AAEH,eAAO,MAAM,eAAe~~;;SAI3B~~,CAAC;AAMF,eAAO,MAAM,oBAAoB,wGAuDhC,CAAC;AAIF,eAAO,MAAM,oBAAoB,wGAS/B,CAAC;AAIH,eAAO,MAAM,UAAU;eAA0B,OAAO;SAyBtD,CAAC;AAIH,eAAO,MAAM,qBAAqB,~~8OAMhC~~,CAAC;AAIH,eAAO,MAAM,kBAAkB,yGAI7B,CAAC;AAIH,eAAO,MAAM,uBAAuB,uGAEnC,CAAC"}
1	+ {"version":3,"file":"Stages.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Stages/Stages.styles.ts"],"names":[],"mappings":"AAeA,eAAO,MAAM,YAAY,wGAYvB,CAAC;AAIH,eAAO,MAAM,gBAAgB;eAA4B,OAAO;SAW9D,CAAC;AAEH,eAAO,MAAM,WAAW;YAA2B,WAAW,GAAG,SAAS,GAAG,SAAS;SAyJrF,CAAC;AAIF,eAAO,MAAM,uBAAuB,0LAQlC,CAAC;AAEH,eAAO,MAAM,eAAe;gBAA8B,OAAO;SAIhE,CAAC;AAMF,eAAO,MAAM,oBAAoB,wGAuDhC,CAAC;AAIF,eAAO,MAAM,oBAAoB,wGAS/B,CAAC;AAIH,eAAO,MAAM,UAAU;eAA0B,OAAO;SAyBtD,CAAC;AAIH,eAAO,MAAM,qBAAqB,6NAMhC,CAAC;AAIH,eAAO,MAAM,kBAAkB,yGAI7B,CAAC;AAIH,eAAO,MAAM,uBAAuB,uGAEnC,CAAC"}

package/lib/components/Stages/Stages.styles.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import styled, { css } from 'styled-components';
 import { rgba } from 'polished';
-import { calculateFontSize, DateTimeDisplay, defaultThemeProp, Icon, Text, StyledIcon, tryCatch, useDirection } from '@pega/cosmos-react-core';
+import { calculateFontSize, DateTimeDisplay, defaultThemeProp, Icon, Text, StyledIcon, tryCatch, useDirection, calculateForegroundColor } from '@pega/cosmos-react-core';
 export const StyledStages = styled.ol(({ theme }) => {
     return css `
     background-color: ${theme.base.palette['primary-background']};
@@ -27,14 +27,15 @@ export const StyledInnerStage = styled.span(props => {
     `}
   `;
 });
-export const StyledStage = styled.button(({ theme: { base: { spacing, palette, 'hit-area': hitArea, transparency, 'font-weight': fontWeight } } }) => {
+export const StyledStage = styled.button(({ theme: { base: { spacing, palette, 'hit-area': hitArea, transparency, 'font-weight': fontWeight }, components: { 'case-view': { stages } } }, status }) => {
     const thinBorderWidth = '0.0625rem';
     const thickBorderWidth = '0.125rem';
     const { rtl } = useDirection();
-    const borderShadow = tryCatch(() => rgba(palette['border-line'], 1));
+    const borderShadow = tryCatch(() => rgba(stages.status[status].background, 0.5));
+    const stageForeground = calculateForegroundColor(stages.status[status].background, stages.status[status]['foreground-color']);
     return css `
-      background-color: inherit;
-      color: ${palette['foreground-color']};
+      background: ${stages.status[status].background};
+      color: ${stageForeground};
       outline: none;
       border-color: transparent;
       border-width: ${thinBorderWidth} 0;
@@ -78,6 +79,7 @@ export const StyledStage = styled.button(({ theme: { base: { spacing, palette, '
       ::after {
         inset-inline-end: calc(-1.125 * ${spacing});
         z-index: 1;
+        background-color: ${stages.status[status].background};
         @media (pointer: coarse) {
           inset-inline-end: calc(-1.375 * ${spacing});

package/lib/components/Stages/Stages.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Stages.styles.js","sourceRoot":"","sources":["../../../src/components/Stages/Stages.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { rgba } from 'polished';\n\nimport {\n calculateFontSize,\n DateTimeDisplay,\n defaultThemeProp,\n Icon,\n Text,\n StyledIcon,\n tryCatch,\n useDirection\n} from '@pega/cosmos-react-core';\n\nexport const StyledStages = styled.ol(({ theme }) => {\n return css`\n background-color: ${theme.base.palette['primary-background']};\n border-radius: ${theme.components.card['border-radius']};\n width: 100%;\n overflow: hidden;\n list-style: none;\n\n &:has(:focus-visible) {\n box-shadow: ${theme.base.shadow['focus-group']};\n }\n `;\n});\n\nStyledStages.defaultProps = defaultThemeProp;\n\nexport const StyledInnerStage = styled.span<{ ellipsis?: boolean }>(props => {\n return css`\n display: inline-block;\n text-align: center;\n white-space: nowrap;\n ${props.ellipsis &&\n css`\n overflow: hidden;\n text-overflow: ellipsis;\n `}\n `;\n});\n\nexport const StyledStage = styled.button(\n ({\n theme: {\n base: { spacing, palette, 'hit-area': hitArea, transparency, 'font-weight': fontWeight }\n }\n }) => {\n const thinBorderWidth = '0.0625rem';\n const thickBorderWidth = '0.125rem';\n const { rtl } = useDirection();\n const borderShadow = tryCatch(() => rgba(palette['border-line'], 1));\n\n return css`\n background-color: inherit;\n color: ${palette['foreground-color']};\n outline: none;\n border-color: transparent;\n border-width: ${thinBorderWidth} 0;\n border-style: solid;\n position: relative;\n height: calc(4 * ${spacing});\n padding-inline-start: calc(2 * ${spacing});\n padding-inline-end: ${spacing};\n width: 100%;\n\n ::before,\n ::after {\n content: '';\n position: absolute;\n display: block;\n width: calc(2.25 * ${spacing});\n height: calc(2.25 * ${spacing});\n border-style: solid;\n border-color: ${palette['border-line']};\n border-inline-end-width: ${thinBorderWidth};\n border-inline-start-width: 0;\n border-top-width: ${rtl ? 0 : thinBorderWidth};\n border-bottom-width: ${rtl ? thinBorderWidth : 0};\n transform: rotateZ(45deg) skew(15deg, 15deg);\n\n @media (pointer: coarse) {\n width: calc(2.875 * ${spacing});\n height: calc(2.875 * ${spacing});\n transform: rotateZ(45deg) skew(20deg, 20deg);\n }\n }\n\n ::before {\n inset-inline-start: calc(-1.125 * ${spacing});\n\n @media (pointer: coarse) {\n inset-inline-start: calc(-1.375 * ${spacing});\n }\n }\n\n ::after {\n inset-inline-end: calc(-1.125 * ${spacing});\n z-index: 1;\n\n @media (pointer: coarse) {\n inset-inline-end: calc(-1.375 * ${spacing});\n }\n }\n\n &:hover,\n &:hover::before,\n &:hover::after {\n border-color: ${palette['border-line']};\n }\n\n &:focus,\n &:active,\n &:focus::before,\n &:active::before,\n &:focus::after,\n &:active::after {\n border-color: ${palette.interactive};\n }\n\n &:focus {\n border-width: ${thickBorderWidth} 0;\n }\n\n &:focus::before,\n &:focus::after {\n z-index: 1;\n border-inline-end-width: ${thickBorderWidth};\n border-top-width: ${rtl ? 0 : thickBorderWidth};\n border-bottom-width: ${rtl ? thickBorderWidth : 0};\n }\n\n &:focus::before {\n pointer-events: none;\n }\n\n &:active {\n border-width: ${thinBorderWidth} 0;\n\n ${StyledInnerStage} {\n opacity: ${transparency['transparent-3']};\n }\n }\n\n &:active::before,\n &:active::after {\n border-inline-end-width: ${thinBorderWidth};\n border-top-width: ${rtl ? 0 : thinBorderWidth};\n border-bottom-width: ${rtl ? thinBorderWidth : 0};\n }\n\n &[aria-current] {\n ${StyledInnerStage} {\n font-weight: ${fontWeight.bold};\n opacity: 1;\n }\n\n :hover {\n ${StyledInnerStage} {\n opacity: ${transparency['transparent-2']};\n }\n }\n\n ::after {\n filter: drop-shadow(0.0625rem -0.0625rem 0.125rem ${borderShadow});\n }\n }\n\n @media (pointer: coarse) {\n height: ${hitArea['finger-min']};\n padding-inline-start: calc(2.25 * ${spacing});\n }\n\n ${StyledIcon} {\n color: ${palette.success};\n\n & ~ ${StyledInnerStage} {\n margin-inline-start: 0.25rem;\n }\n }\n\n ${StyledInnerStage} {\n opacity: ${transparency['transparent-2']};\n }\n `;\n }\n);\n\nStyledStage.defaultProps = defaultThemeProp;\n\nexport const StyledStageCompleteIcon = styled(Icon)(({\n theme: {\n base: { palette }\n }\n}) => {\n return css`\n color: ${palette.success};\n `;\n});\n\nexport const StyledStageText = styled(Text)<{ isCurrent?: boolean }>(\n ({ theme, isCurrent }) => css`\n font-weight: ${isCurrent ? theme.base['font-weight'].bold : theme.base['font-weight'].normal};\n `\n);\n\nStyledStageText.defaultProps = defaultThemeProp;\n\nStyledStageCompleteIcon.defaultProps = defaultThemeProp;\n\nexport const StyledStageContainer = styled.li(\n ({\n theme: {\n base: { spacing },\n components: {\n card: { 'border-radius': borderRadius }\n }\n }\n }) => {\n const thinBorderWidth = '0.0625rem';\n const thickBorderWidth = '0.125rem';\n\n return css`\n &:first-of-type > ${StyledStage} {\n border-start-start-radius: ${borderRadius};\n border-end-start-radius: ${borderRadius};\n border-inline-start-width: ${thinBorderWidth};\n padding-inline-start: ${spacing};\n\n &:active {\n padding-inline-start: ${spacing};\n }\n\n &:focus {\n border-inline-start-width: ${thickBorderWidth};\n padding-inline-start: calc(${spacing} - ${thickBorderWidth} + ${thinBorderWidth});\n }\n\n ::before {\n display: none;\n }\n }\n\n &:last-of-type > ${StyledStage} {\n border-start-end-radius: ${borderRadius};\n border-end-end-radius: ${borderRadius};\n border-inline-end-width: ${thinBorderWidth};\n padding-inline-end: ${spacing};\n\n &:active {\n border-inline-end-width: ${thinBorderWidth};\n padding-inline-end: ${spacing};\n }\n\n &:focus {\n border-inline-end-width: ${thickBorderWidth};\n padding-inline-end: calc(${spacing} - ${thinBorderWidth});\n }\n\n ::after {\n display: none;\n }\n }\n `;\n }\n);\n\nStyledStageContainer.defaultProps = defaultThemeProp;\n\nexport const StyledStepsContainer = styled.ol(({ theme }) => {\n return css`\n list-style-type: none;\n margin: calc(2 * ${theme.base.spacing}) 0 calc(3 * ${theme.base.spacing});\n\n &:empty {\n margin-block-end: 0;\n }\n `;\n});\n\nStyledStepsContainer.defaultProps = defaultThemeProp;\n\nexport const StyledStep = styled.li<{ completed: boolean }>(({ completed, theme }) => {\n const textOpacity = completed ? theme.base.transparency['transparent-2'] : 1;\n\n return css`\n border-radius: 0;\n margin-block-end: calc(${theme.base.spacing});\n color: ${theme.base.palette['foreground-color']};\n\n &:last-child {\n margin-block-end: 0;\n }\n\n & > ${StyledIcon} {\n text-align: center;\n\n ${completed &&\n css`\n color: ${theme.base.palette.success};\n `}\n }\n\n div {\n opacity: ${textOpacity};\n }\n `;\n});\n\nStyledStep.defaultProps = defaultThemeProp;\n\nexport const StyledDateTimeDisplay = styled(DateTimeDisplay)(({ theme }) => {\n const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n return css`\n font-size: ${fontSize.xs};\n opacity: ${theme.base.transparency['transparent-2']};\n `;\n});\n\nStyledDateTimeDisplay.defaultProps = defaultThemeProp;\n\nexport const StyledStageGlimpse = styled.div(({ theme }) => {\n return css`\n max-width: ${theme.base['content-width'].sm};\n `;\n});\n\nStyledStageGlimpse.defaultProps = defaultThemeProp;\n\nexport const StyledStagesDescription = styled.p`\n display: none;\n`;\n"]}
1	+ {"version":3,"file":"Stages.styles.js","sourceRoot":"","sources":["../../../src/components/Stages/Stages.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { rgba } from 'polished';\n\nimport {\n calculateFontSize,\n DateTimeDisplay,\n defaultThemeProp,\n Icon,\n Text,\n StyledIcon,\n tryCatch,\n useDirection,\n calculateForegroundColor\n} from '@pega/cosmos-react-core';\n\nexport const StyledStages = styled.ol(({ theme }) => {\n return css`\n background-color: ${theme.base.palette['primary-background']};\n border-radius: ${theme.components.card['border-radius']};\n width: 100%;\n overflow: hidden;\n list-style: none;\n\n &:has(:focus-visible) {\n box-shadow: ${theme.base.shadow['focus-group']};\n }\n `;\n});\n\nStyledStages.defaultProps = defaultThemeProp;\n\nexport const StyledInnerStage = styled.span<{ ellipsis?: boolean }>(props => {\n return css`\n display: inline-block;\n text-align: center;\n white-space: nowrap;\n ${props.ellipsis &&\n css`\n overflow: hidden;\n text-overflow: ellipsis;\n `}\n `;\n});\n\nexport const StyledStage = styled.button<{ status: 'completed' \| 'current' \| 'pending' }>(\n ({\n theme: {\n base: { spacing, palette, 'hit-area': hitArea, transparency, 'font-weight': fontWeight },\n components: {\n 'case-view': { stages }\n }\n },\n status\n }) => {\n const thinBorderWidth = '0.0625rem';\n const thickBorderWidth = '0.125rem';\n const { rtl } = useDirection();\n const borderShadow = tryCatch(() => rgba(stages.status[status].background, 0.5));\n const stageForeground = calculateForegroundColor(\n stages.status[status].background,\n stages.status[status]['foreground-color']\n );\n\n return css`\n background: ${stages.status[status].background};\n color: ${stageForeground};\n outline: none;\n border-color: transparent;\n border-width: ${thinBorderWidth} 0;\n border-style: solid;\n position: relative;\n height: calc(4 * ${spacing});\n padding-inline-start: calc(2 * ${spacing});\n padding-inline-end: ${spacing};\n width: 100%;\n\n ::before,\n ::after {\n content: '';\n position: absolute;\n display: block;\n width: calc(2.25 * ${spacing});\n height: calc(2.25 * ${spacing});\n border-style: solid;\n border-color: ${palette['border-line']};\n border-inline-end-width: ${thinBorderWidth};\n border-inline-start-width: 0;\n border-top-width: ${rtl ? 0 : thinBorderWidth};\n border-bottom-width: ${rtl ? thinBorderWidth : 0};\n transform: rotateZ(45deg) skew(15deg, 15deg);\n\n @media (pointer: coarse) {\n width: calc(2.875 * ${spacing});\n height: calc(2.875 * ${spacing});\n transform: rotateZ(45deg) skew(20deg, 20deg);\n }\n }\n\n ::before {\n inset-inline-start: calc(-1.125 * ${spacing});\n\n @media (pointer: coarse) {\n inset-inline-start: calc(-1.375 * ${spacing});\n }\n }\n\n ::after {\n inset-inline-end: calc(-1.125 * ${spacing});\n z-index: 1;\n background-color: ${stages.status[status].background};\n\n @media (pointer: coarse) {\n inset-inline-end: calc(-1.375 * ${spacing});\n }\n }\n\n &:hover,\n &:hover::before,\n &:hover::after {\n border-color: ${palette['border-line']};\n }\n\n &:focus,\n &:active,\n &:focus::before,\n &:active::before,\n &:focus::after,\n &:active::after {\n border-color: ${palette.interactive};\n }\n\n &:focus {\n border-width: ${thickBorderWidth} 0;\n }\n\n &:focus::before,\n &:focus::after {\n z-index: 1;\n border-inline-end-width: ${thickBorderWidth};\n border-top-width: ${rtl ? 0 : thickBorderWidth};\n border-bottom-width: ${rtl ? thickBorderWidth : 0};\n }\n\n &:focus::before {\n pointer-events: none;\n }\n\n &:active {\n border-width: ${thinBorderWidth} 0;\n\n ${StyledInnerStage} {\n opacity: ${transparency['transparent-3']};\n }\n }\n\n &:active::before,\n &:active::after {\n border-inline-end-width: ${thinBorderWidth};\n border-top-width: ${rtl ? 0 : thinBorderWidth};\n border-bottom-width: ${rtl ? thinBorderWidth : 0};\n }\n\n &[aria-current] {\n ${StyledInnerStage} {\n font-weight: ${fontWeight.bold};\n opacity: 1;\n }\n\n :hover {\n ${StyledInnerStage} {\n opacity: ${transparency['transparent-2']};\n }\n }\n\n ::after {\n filter: drop-shadow(0.0625rem -0.0625rem 0.125rem ${borderShadow});\n }\n }\n\n @media (pointer: coarse) {\n height: ${hitArea['finger-min']};\n padding-inline-start: calc(2.25 * ${spacing});\n }\n\n ${StyledIcon} {\n color: ${palette.success};\n\n & ~ ${StyledInnerStage} {\n margin-inline-start: 0.25rem;\n }\n }\n\n ${StyledInnerStage} {\n opacity: ${transparency['transparent-2']};\n }\n `;\n }\n);\n\nStyledStage.defaultProps = defaultThemeProp;\n\nexport const StyledStageCompleteIcon = styled(Icon)(({\n theme: {\n base: { palette }\n }\n}) => {\n return css`\n color: ${palette.success};\n `;\n});\n\nexport const StyledStageText = styled(Text)<{ isCurrent?: boolean }>(\n ({ theme, isCurrent }) => css`\n font-weight: ${isCurrent ? theme.base['font-weight'].bold : theme.base['font-weight'].normal};\n `\n);\n\nStyledStageText.defaultProps = defaultThemeProp;\n\nStyledStageCompleteIcon.defaultProps = defaultThemeProp;\n\nexport const StyledStageContainer = styled.li(\n ({\n theme: {\n base: { spacing },\n components: {\n card: { 'border-radius': borderRadius }\n }\n }\n }) => {\n const thinBorderWidth = '0.0625rem';\n const thickBorderWidth = '0.125rem';\n\n return css`\n &:first-of-type > ${StyledStage} {\n border-start-start-radius: ${borderRadius};\n border-end-start-radius: ${borderRadius};\n border-inline-start-width: ${thinBorderWidth};\n padding-inline-start: ${spacing};\n\n &:active {\n padding-inline-start: ${spacing};\n }\n\n &:focus {\n border-inline-start-width: ${thickBorderWidth};\n padding-inline-start: calc(${spacing} - ${thickBorderWidth} + ${thinBorderWidth});\n }\n\n ::before {\n display: none;\n }\n }\n\n &:last-of-type > ${StyledStage} {\n border-start-end-radius: ${borderRadius};\n border-end-end-radius: ${borderRadius};\n border-inline-end-width: ${thinBorderWidth};\n padding-inline-end: ${spacing};\n\n &:active {\n border-inline-end-width: ${thinBorderWidth};\n padding-inline-end: ${spacing};\n }\n\n &:focus {\n border-inline-end-width: ${thickBorderWidth};\n padding-inline-end: calc(${spacing} - ${thinBorderWidth});\n }\n\n ::after {\n display: none;\n }\n }\n `;\n }\n);\n\nStyledStageContainer.defaultProps = defaultThemeProp;\n\nexport const StyledStepsContainer = styled.ol(({ theme }) => {\n return css`\n list-style-type: none;\n margin: calc(2 * ${theme.base.spacing}) 0 calc(3 * ${theme.base.spacing});\n\n &:empty {\n margin-block-end: 0;\n }\n `;\n});\n\nStyledStepsContainer.defaultProps = defaultThemeProp;\n\nexport const StyledStep = styled.li<{ completed: boolean }>(({ completed, theme }) => {\n const textOpacity = completed ? theme.base.transparency['transparent-2'] : 1;\n\n return css`\n border-radius: 0;\n margin-block-end: calc(${theme.base.spacing});\n color: ${theme.base.palette['foreground-color']};\n\n &:last-child {\n margin-block-end: 0;\n }\n\n & > ${StyledIcon} {\n text-align: center;\n\n ${completed &&\n css`\n color: ${theme.base.palette.success};\n `}\n }\n\n div {\n opacity: ${textOpacity};\n }\n `;\n});\n\nStyledStep.defaultProps = defaultThemeProp;\n\nexport const StyledDateTimeDisplay = styled(DateTimeDisplay)(({ theme }) => {\n const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n return css`\n font-size: ${fontSize.xs};\n opacity: ${theme.base.transparency['transparent-2']};\n `;\n});\n\nStyledDateTimeDisplay.defaultProps = defaultThemeProp;\n\nexport const StyledStageGlimpse = styled.div(({ theme }) => {\n return css`\n max-width: ${theme.base['content-width'].sm};\n `;\n});\n\nStyledStageGlimpse.defaultProps = defaultThemeProp;\n\nexport const StyledStagesDescription = styled.p`\n display: none;\n`;\n"]}

package/lib/components/Stakeholders/StakeholderForm.d.ts CHANGED Viewed

@@ -1,8 +1,7 @@
-/// <reference types="react" />
 import type { StakeholdersProps } from './Stakeholders.types';
 interface FormProps extends Pick<StakeholdersProps['form'], 'roles' | 'currentRole' | 'renderer' | 'rendererProps'> {
     setSelectedRoleNameRef: (selectedRoleName?: string | undefined) => void;
 }
-declare const _default: ({ roles, currentRole, renderer: Renderer, rendererProps, setSelectedRoleNameRef }: FormProps) => JSX.Element;
+declare const _default: ({ roles, currentRole, renderer: Renderer, rendererProps, setSelectedRoleNameRef }: FormProps) => import("react/jsx-runtime").JSX.Element;
 export default _default;
 //# sourceMappingURL=StakeholderForm.d.ts.map

package/lib/components/Stakeholders/StakeholderForm.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"StakeholderForm.d.ts","sourceRoot":"","sources":["../../../src/components/Stakeholders/StakeholderForm.tsx"],"names":[],"mappings":";AAYA,OAAO,KAAK,EAAQ,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAEpE,UAAU,SACR,SAAQ,IAAI,CAAC,iBAAiB,CAAC,MAAM,CAAC,EAAE,OAAO,GAAG,aAAa,GAAG,UAAU,GAAG,eAAe,CAAC;IAC/F,sBAAsB,EAAE,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;CACzE;4GAQE,SAAS;AANZ,wBA0FE"}
1	+ {"version":3,"file":"StakeholderForm.d.ts","sourceRoot":"","sources":["../../../src/components/Stakeholders/StakeholderForm.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAQ,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAEpE,UAAU,SACR,SAAQ,IAAI,CAAC,iBAAiB,CAAC,MAAM,CAAC,EAAE,OAAO,GAAG,aAAa,GAAG,UAAU,GAAG,eAAe,CAAC;IAC/F,sBAAsB,EAAE,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;CACzE;4GAQE,SAAS;AANZ,wBA0FE"}

package/lib/components/Stakeholders/StakeholderForm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"StakeholderForm.js","sourceRoot":"","sources":["../../../src/components/Stakeholders/StakeholderForm.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEpD,OAAO,EACL,QAAQ,EACR,gBAAgB,EAChB,WAAW,EACX,IAAI,EACJ,OAAO,EACP,KAAK,EACL,aAAa,EACd,MAAM,yBAAyB,CAAC;AASjC,eAAe,CAAC,EACd,KAAK,EACL,WAAW,EACX,QAAQ,EAAE,QAAQ,EAClB,aAAa,EACb,sBAAsB,EACZ,EAAE,EAAE;IACd,MAAM,UAAU,GAAG,MAAM,CAAc,IAAI,CAAC,CAAC;IAC7C,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAA2B,GAAG,EAAE;QACtF,IAAI,KAAK,EAAE;~~YACT~~,OAAO,CAAC,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,IAAI,KAAK,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC;~~SAC5F~~;IACH,CAAC,CAAC,CAAC;IAEH,IAAI,OAAO,GAAuB,IAAI,CAAC;IAEvC,IAAI,KAAK,EAAE;~~QACT~~,MAAM,KAAK,GAAG,CAAC,CAAC,mBAAmB,CAAC,CAAC;QAErC,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;~~YACpB~~,MAAM,KAAK,GAAG,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;gBAC7B,OAAO;oBACL,EAAE,EAAE,IAAI,CAAC,IAAI;oBACb,OAAO,EAAE,IAAI,CAAC,IAAI;oBAClB,QAAQ,EAAE,IAAI,CAAC,IAAI,KAAK,gBAAgB;iBACzC,CAAC;YACJ,CAAC,CAAC,CAAC;YAEH,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;YAEnD,OAAO,GAAG,CACR,KAAC,QAAQ,IACP,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE,QAAQ,CAAC,EAAE,EAAE,IAAI,EAAE,QAAQ,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,CAAC,SAAS,EACvF,IAAI,EAAE;oBACJ,IAAI,EAAE,eAAe;oBACrB,KAAK;oBACL,WAAW,EAAE,mBAAmB;iBACjC,GACD,CACH,CAAC;~~SACH~~;aAAM;~~YACL~~,OAAO,GAAG,CACR,KAAC,gBAAgB,IACf,KAAK,EAAE,KAAK,EACZ,IAAI,EAAC,MAAM,EACX,MAAM,QACN,QAAQ,EAAE,CAAC,CAAC,EAAE;oBACZ,mBAAmB,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;gBACtC,CAAC,YAEA,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CACjB,KAAC,WAAW,IAEV,KAAK,EAAE,IAAI,CAAC,IAAI,EAChB,KAAK,EAAE,IAAI,CAAC,IAAI,EAChB,OAAO,EAAE,IAAI,CAAC,IAAI,KAAK,gBAAgB,IAHlC,IAAI,CAAC,IAAI,CAId,CACH,CAAC,GACe,CACpB,CAAC;~~SACH~~;~~KACF~~;SAAM,IAAI,WAAW,EAAE;~~QACtB~~,OAAO,GAAG,CACR,KAAC,KAAK,IACJ,QAAQ,QACR,KAAK,EAAE,CAAC,CAAC,mBAAmB,CAAC,EAC7B,KAAK,EAAE,WAAW,CAAC,IAAI,EACvB,IAAI,EAAE,WAAW,CAAC,WAAW,GAC7B,CACH,CAAC;~~KACH~~;IAED,SAAS,CAAC,GAAG,EAAE;QACb,aAAa,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC;IACxC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,KAAK;YAAE,OAAO;QACnB,sBAAsB,CAAC,gBAAgB,CAAC,CAAC;IAC3C,CAAC,EAAE,CAAC,gBAAgB,CAAC,CAAC,CAAC;IAEvB,OAAO,CACL,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE,GAAG,EAAE,UAAU,aAC9D,OAAO,EACR,KAAC,QAAQ,OAAK,aAAa,EAAE,gBAAgB,EAAE,gBAAgB,GAAI,IAC9D,CACR,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport {\n ComboBox,\n RadioButtonGroup,\n RadioButton,\n Flex,\n useI18n,\n Input,\n getFocusables\n} from '@pega/cosmos-react-core';\n\nimport type { Role, StakeholdersProps } from './Stakeholders.types';\n\ninterface FormProps\n extends Pick<StakeholdersProps['form'], 'roles' \| 'currentRole' \| 'renderer' \| 'rendererProps'> {\n setSelectedRoleNameRef: (selectedRoleName?: string \| undefined) => void;\n}\n\nexport default ({\n roles,\n currentRole,\n renderer: Renderer,\n rendererProps,\n setSelectedRoleNameRef\n}: FormProps) => {\n const contentRef = useRef<HTMLElement>(null);\n const t = useI18n();\n\n const [selectedRoleName, setSelectedRoleName] = useState<Role['name'] \| undefined>(() => {\n if (roles) {\n return (currentRole ? roles.find(role => role.name === currentRole.name) : roles[0])?.name;\n }\n });\n\n let control: JSX.Element \| null = null;\n\n if (roles) {\n const label = t('stakeholders_role');\n\n if (roles.length > 3) {\n const items = roles.map(role => {\n return {\n id: role.name,\n primary: role.name,\n selected: role.name === selectedRoleName\n };\n });\n\n const selected = items.find(item => item.selected);\n\n control = (\n <ComboBox\n label={label}\n selected={selected ? { items: { id: selected.id, text: selected.primary } } : undefined}\n menu={{\n mode: 'single-select',\n items,\n onItemClick: setSelectedRoleName\n }}\n />\n );\n } else {\n control = (\n <RadioButtonGroup\n label={label}\n name='role'\n inline\n onChange={e => {\n setSelectedRoleName(e.target.value);\n }}\n >\n {roles.map(role => (\n <RadioButton\n key={role.name}\n label={role.name}\n value={role.name}\n checked={role.name === selectedRoleName}\n />\n ))}\n </RadioButtonGroup>\n );\n }\n } else if (currentRole) {\n control = (\n <Input\n readOnly\n label={t('stakeholders_role')}\n value={currentRole.name}\n info={currentRole.description}\n />\n );\n }\n\n useEffect(() => {\n getFocusables(contentRef)[0]?.focus();\n }, []);\n\n useEffect(() => {\n if (!roles) return;\n setSelectedRoleNameRef(selectedRoleName);\n }, [selectedRoleName]);\n\n return (\n <Flex container={{ direction: 'column', gap: 2 }} ref={contentRef}>\n {control}\n <Renderer {...rendererProps} selectedRoleName={selectedRoleName} />\n </Flex>\n );\n};\n"]}
1	+ {"version":3,"file":"StakeholderForm.js","sourceRoot":"","sources":["../../../src/components/Stakeholders/StakeholderForm.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport {\n ComboBox,\n RadioButtonGroup,\n RadioButton,\n Flex,\n useI18n,\n Input,\n getFocusables\n} from '@pega/cosmos-react-core';\n\nimport type { Role, StakeholdersProps } from './Stakeholders.types';\n\ninterface FormProps\n extends Pick<StakeholdersProps['form'], 'roles' \| 'currentRole' \| 'renderer' \| 'rendererProps'> {\n setSelectedRoleNameRef: (selectedRoleName?: string \| undefined) => void;\n}\n\nexport default ({\n roles,\n currentRole,\n renderer: Renderer,\n rendererProps,\n setSelectedRoleNameRef\n}: FormProps) => {\n const contentRef = useRef<HTMLElement>(null);\n const t = useI18n();\n\n const [selectedRoleName, setSelectedRoleName] = useState<Role['name'] \| undefined>(() => {\n if (roles) {\n return (currentRole ? roles.find(role => role.name === currentRole.name) : roles[0])?.name;\n }\n });\n\n let control: JSX.Element \| null = null;\n\n if (roles) {\n const label = t('stakeholders_role');\n\n if (roles.length > 3) {\n const items = roles.map(role => {\n return {\n id: role.name,\n primary: role.name,\n selected: role.name === selectedRoleName\n };\n });\n\n const selected = items.find(item => item.selected);\n\n control = (\n <ComboBox\n label={label}\n selected={selected ? { items: { id: selected.id, text: selected.primary } } : undefined}\n menu={{\n mode: 'single-select',\n items,\n onItemClick: setSelectedRoleName\n }}\n />\n );\n } else {\n control = (\n <RadioButtonGroup\n label={label}\n name='role'\n inline\n onChange={e => {\n setSelectedRoleName(e.target.value);\n }}\n >\n {roles.map(role => (\n <RadioButton\n key={role.name}\n label={role.name}\n value={role.name}\n checked={role.name === selectedRoleName}\n />\n ))}\n </RadioButtonGroup>\n );\n }\n } else if (currentRole) {\n control = (\n <Input\n readOnly\n label={t('stakeholders_role')}\n value={currentRole.name}\n info={currentRole.description}\n />\n );\n }\n\n useEffect(() => {\n getFocusables(contentRef)[0]?.focus();\n }, []);\n\n useEffect(() => {\n if (!roles) return;\n setSelectedRoleNameRef(selectedRoleName);\n }, [selectedRoleName]);\n\n return (\n <Flex container={{ direction: 'column', gap: 2 }} ref={contentRef}>\n {control}\n <Renderer {...rendererProps} selectedRoleName={selectedRoleName} />\n </Flex>\n );\n};\n"]}

package/lib/components/Stakeholders/Stakeholders.d.ts CHANGED Viewed

@@ -1,6 +1,5 @@
-import type { FunctionComponent } from 'react';
-import type { ForwardProps } from '@pega/cosmos-react-core';
+import type { ForwardRefForwardPropsComponent } from '@pega/cosmos-react-core';
 import type { StakeholdersProps } from './Stakeholders.types';
-declare const Stakeholders: FunctionComponent<StakeholdersProps & ForwardProps>;
+declare const Stakeholders: ForwardRefForwardPropsComponent<StakeholdersProps>;
 export default Stakeholders;
 //# sourceMappingURL=Stakeholders.d.ts.map

package/lib/components/Stakeholders/Stakeholders.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Stakeholders.d.ts","sourceRoot":"","sources":["../../../src/components/Stakeholders/Stakeholders.tsx"],"names":[],"mappings":"~~AACA~~,OAAO,KAAK,~~EAAE,iBAAiB,EAA8B,MAAM,OAAO,CAAC;AAkB3E,OAAO,KAAK,~~EAEV,~~YAAY~~,~~EAIb,~~MAAM,yBAAyB,CAAC;AAEjC,OAAO,KAAK,EAAQ,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;~~AAsCpE~~,QAAA,MAAM,YAAY,EAAE,~~iBAAiB,~~CAAC,iBAAiB,~~GAAG~~,~~YAAY,CA4UrE,~~CAAC;AAEF,eAAe,YAAY,CAAC"}
1	+ {"version":3,"file":"Stakeholders.d.ts","sourceRoot":"","sources":["../../../src/components/Stakeholders/Stakeholders.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAK,EAEV,+BAA+B,EAIhC,MAAM,yBAAyB,CAAC;AAEjC,OAAO,KAAK,EAAQ,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAiCpE,QAAA,MAAM,YAAY,EAAE,+BAA+B,CAAC,iBAAiB,CA2VpE,CAAC;AAEF,eAAe,YAAY,CAAC"}

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useRef, useEffect, useMemo, useState, useCallback } from 'react';
 import styled, { css } from 'styled-components';
-import { SummaryList, useI18n, Button, ViewAll, Modal, Popover, Flex, Text, useModalManager, useOuterEvent, Progress, useAfterInitialEffect, defaultThemeProp } from '@pega/cosmos-react-core';
+import { SummaryList, useI18n, Button, ViewAll, Modal, Flex, useModalManager, useOuterEvent, Progress, useAfterInitialEffect, defaultThemeProp, FormDialog } from '@pega/cosmos-react-core';
 import StakeholderForm from './StakeholderForm';
 const StyledStakeholders = styled(SummaryList) ``;
 const StyledEditFormWrap = styled.div(({ theme }) => {
@@ -18,10 +18,6 @@ const StyledEditFormWrap = styled.div(({ theme }) => {
   `;
 });
 StyledEditFormWrap.defaultProps = defaultThemeProp;
-const StyledPopover = styled(Popover) `
-  width: 40ch;
-  min-height: 12rem;
-`;
 const StyledContainer = styled(Flex)(({ theme }) => {
     return css `
     max-height: inherit;
@@ -39,7 +35,7 @@ const Stakeholders = forwardRef(function Stakeholders({ items: itemsProp, count,
     const [mode, setMode] = useState();
     const [editing, setEditing] = useState(false);
     const [viewAllSearchValue, setViewAllSearchValue] = useState('');
-    const popoverRef = useRef(null);
+    const dialogRef = useRef(null);
     const progressMsgRef = useRef(t('loading'));
     // Why? Don't think this should trigger a re-render. We just need the value when we invoke callback props.
     const selectedRoleNameRef = useRef();
@@ -47,7 +43,7 @@ const Stakeholders = forwardRef(function Stakeholders({ items: itemsProp, count,
     const setSelectedRoleNameRef = useCallback((selectedRoleName) => {
         selectedRoleNameRef.current = selectedRoleName;
     }, []);
-    const [popoverTarget, setPopoverTarget] = useState(null);
+    const [dialogTarget, setDialogTarget] = useState(null);
     const itemElsRef = useRef({
         itemEls: [],
         viewAllItemEls: []
@@ -65,7 +61,7 @@ const Stakeholders = forwardRef(function Stakeholders({ items: itemsProp, count,
                         icon: 'pencil',
                         onClick: () => {
                             setEditing(true);
-                            setPopoverTarget({
+                            setDialogTarget({
                                 portal: elArray[i],
                                 button: elArray[i].querySelector('button[aria-haspopup="menu"]')
                             });
@@ -96,11 +92,11 @@ const Stakeholders = forwardRef(function Stakeholders({ items: itemsProp, count,
             };
         });
     };
-    const closePopover = () => {
-        if (!popoverTarget || (form.loading && progressMsgRef.current === t('submitting')))
+    const closeFormDialog = () => {
+        if (!dialogTarget || (form.loading && progressMsgRef.current === t('submitting')))
             return;
-        popoverTarget.button?.focus();
-        setPopoverTarget(null);
+        dialogTarget.button?.focus();
+        setDialogTarget(null);
         setEditing(false);
         progressMsgRef.current = t('loading');
     };
@@ -109,7 +105,7 @@ const Stakeholders = forwardRef(function Stakeholders({ items: itemsProp, count,
         (!form.loading || progressMsgRef.current === t('submitting'))) {
         formContent = (_jsx(StakeholderForm, { roles: form.roles, currentRole: form.currentRole, renderer: form.renderer, rendererProps: form.rendererProps, setSelectedRoleNameRef: setSelectedRoleNameRef }));
     }
-    // Actions used for add and edit both in the modal and the popover.
+    // Actions used for add and edit both in the modal and the dialog.
     let formActions = null;
     if ((mode === 'add' || editing) &&
         (!form.loading || progressMsgRef.current === t('submitting'))) {
@@ -118,7 +114,7 @@ const Stakeholders = forwardRef(function Stakeholders({ items: itemsProp, count,
                 modalMethods.current?.dismiss();
             }
             else {
-                closePopover();
+                closeFormDialog();
             }
         };
         formActions = (_jsxs(_Fragment, { children: [_jsx(Button, { disabled: form.loading, onClick: () => {
@@ -131,9 +127,24 @@ const Stakeholders = forwardRef(function Stakeholders({ items: itemsProp, count,
                         });
                     }, children: t('submit') })] }));
     }
-    let editPopover = null;
-    if (popoverTarget) {
-        editPopover = (_jsx(StyledPopover, { ref: popoverRef, target: popoverTarget.button, placement: 'auto', role: 'dialog', children: _jsxs(StyledContainer, { container: { direction: 'column', gap: 2 }, children: [_jsx(Text, { variant: 'h3', children: t('edit_stakeholder') }), _jsxs(StyledEditFormWrap, { "aria-busy": form.loading ? 'true' : 'false', children: [_jsx(Progress, { placement: 'local', visible: form.loading, message: progressMsgRef.current }), (!form.loading || progressMsgRef.current === t('submitting')) && (_jsx(StakeholderForm, { roles: form.roles, currentRole: form.currentRole, renderer: form.renderer, rendererProps: form.rendererProps, setSelectedRoleNameRef: setSelectedRoleNameRef }))] }), formActions && (_jsx(Flex, { container: { justify: 'between', pad: [undefined, 2, 2] }, children: formActions }))] }) }));
+    const closeForm = () => {
+        if (mode === 'add') {
+            modalMethods.current?.dismiss();
+        }
+        else {
+            closeFormDialog();
+        }
+    };
+    const stakeholderFormDialog = (_jsx(StyledContainer, { container: { direction: 'column', gap: 2 }, children: _jsxs(StyledEditFormWrap, { "aria-busy": form.loading ? 'true' : 'false', children: [_jsx(Progress, { placement: 'local', visible: form.loading, message: progressMsgRef.current }), (!form.loading || progressMsgRef.current === t('submitting')) && (_jsx(StakeholderForm, { roles: form.roles, currentRole: form.currentRole, renderer: form.renderer, rendererProps: form.rendererProps, setSelectedRoleNameRef: setSelectedRoleNameRef }))] }) }));
+    let editFormDialog = null;
+    if (dialogTarget?.button) {
+        editFormDialog = (_jsx(FormDialog, { ref: dialogRef, target: dialogTarget.button, heading: t('edit_stakeholder'), onSubmit: () => {
+                progressMsgRef.current = t('submitting');
+                form.onSubmit({
+                    selectedRoleName: selectedRoleNameRef.current,
+                    closeForm
+                });
+            }, onCancel: closeFormDialog, children: stakeholderFormDialog }));
     }
     // Content for the modal either for adding new or viewing all.
     let modalContent = null;
@@ -157,7 +168,7 @@ const Stakeholders = forwardRef(function Stakeholders({ items: itemsProp, count,
                                 viewAll?.onSearch?.(value);
                             }
                         }
-                        : undefined }), editPopover] }));
+                        : undefined }), editFormDialog] }));
     }
     useEffect(() => {
         if (!mode) {
@@ -194,25 +205,25 @@ const Stakeholders = forwardRef(function Stakeholders({ items: itemsProp, count,
             });
         }
     }, [mode, modalContent, form.loading, formActions, count, viewAll.loading]);
-    // Using mousedown instead of click since drag selecting an input's value within the popover, then releasing outside the popover triggers outer click.
-    useOuterEvent('mousedown', [popoverRef], closePopover);
+    // Using mousedown instead of click since drag selecting an input's value within the dialog, then releasing outside the dialog triggers outer click.
+    useOuterEvent('mousedown', [dialogRef], closeFormDialog);
     const onKeydown = (e) => {
         if (e.key === 'Escape') {
-            closePopover();
+            closeFormDialog();
         }
     };
     useEffect(() => {
-        if (!popoverTarget)
+        if (!dialogTarget)
             return;
         document.addEventListener('keydown', onKeydown);
         return () => {
             document.removeEventListener('keydown', onKeydown);
         };
-    }, [popoverTarget]);
+    }, [dialogTarget]);
     useAfterInitialEffect(() => {
-        if (!popoverTarget)
+        if (!dialogTarget)
             form.onAfterClose?.();
-    }, [popoverTarget]);
+    }, [dialogTarget]);
     return (_jsxs(_Fragment, { children: [_jsx(StyledStakeholders, { ...restProps, ref: ref, icon: 'person', name: t('view_stakeholders'), headingTag: 'h3', loading: loading, count: count, error: error, items: useMemo(() => mergeItemActions(itemsProp.slice(0, 3)), [mergeItemActions, itemsProp]), actions: onAddNew
                     ? [
                         {
@@ -230,7 +241,7 @@ const Stakeholders = forwardRef(function Stakeholders({ items: itemsProp, count,
                         setMode('viewAll');
                         onViewAll?.();
                     }
-                    : undefined }), editPopover && mode !== 'viewAll' ? editPopover : null] }));
+                    : undefined }), editFormDialog && mode !== 'viewAll' ? editFormDialog : null] }));
 });
 export default Stakeholders;
 //# sourceMappingURL=Stakeholders.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Stakeholders.js","sourceRoot":"","sources":["../../../src/components/Stakeholders/Stakeholders.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useRef, useEffect, useMemo, useState, useCallback } from 'react';\nimport type { FunctionComponent, PropsWithoutRef, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n SummaryList,\n useI18n,\n Button,\n ViewAll,\n Modal,\n Popover,\n Flex,\n Text,\n useModalManager,\n useOuterEvent,\n Progress,\n useAfterInitialEffect,\n defaultThemeProp\n} from '@pega/cosmos-react-core';\nimport type {\n Action,\n ForwardProps,\n ModalMethods,\n ModalProps,\n OmitStrict\n} from '@pega/cosmos-react-core';\n\nimport type { Role, StakeholdersProps } from './Stakeholders.types';\nimport StakeholderForm from './StakeholderForm';\n\nconst StyledStakeholders = styled(SummaryList)``;\n\nconst StyledEditFormWrap = styled.div(({ theme }) => {\n return css`\n position: relative;\n min-height: 8rem;\n overflow: auto;\n padding-block: calc(${theme.base.spacing} / 2);\n padding-inline: calc(2 * ${theme.base.spacing});\n\n &[aria-busy='true'] > :nth-child(2) {\n visibility: hidden;\n }\n `;\n});\n\nStyledEditFormWrap.defaultProps = defaultThemeProp;\n\nconst StyledPopover = styled(Popover)`\n width: 40ch;\n min-height: 12rem;\n`;\n\nconst StyledContainer = styled(Flex)(({ theme }) => {\n return css`\n max-height: inherit;\n > h3 {\n padding-block-start: calc(2 * ${theme.base.spacing});\n padding-inline: calc(2 * ${theme.base.spacing});\n }\n `;\n});\n\nStyledContainer.defaultProps = defaultThemeProp;\n\nconst Stakeholders: FunctionComponent<StakeholdersProps & ForwardProps> = forwardRef(\n function Stakeholders(\n {\n items: itemsProp,\n count,\n loading,\n onAddNew,\n form,\n onViewAll,\n viewAll,\n error,\n ...restProps\n }: PropsWithoutRef<StakeholdersProps>,\n ref: StakeholdersProps['ref']\n ) {\n const { create: createModal } = useModalManager();\n const t = useI18n();\n const modalMethods = useRef<ModalMethods>();\n const [mode, setMode] = useState<undefined \| 'add' \| 'viewAll'>();\n const [editing, setEditing] = useState(false);\n const [viewAllSearchValue, setViewAllSearchValue] = useState('');\n const popoverRef = useRef<HTMLDivElement>(null);\n const progressMsgRef = useRef(t('loading'));\n\n // Why? Don't think this should trigger a re-render. We just need the value when we invoke callback props.\n const selectedRoleNameRef = useRef<Role['name'] \| undefined>();\n // Setter for the ref. Avoids a re-render.\n const setSelectedRoleNameRef = useCallback((selectedRoleName?: Role['name']) => {\n selectedRoleNameRef.current = selectedRoleName;\n }, []);\n\n const [popoverTarget, setPopoverTarget] = useState<{\n portal: HTMLLIElement;\n button: HTMLButtonElement \| null;\n } \| null>(null);\n\n const itemElsRef = useRef<{ itemEls: HTMLLIElement[]; viewAllItemEls: HTMLLIElement[] }>({\n itemEls: [],\n viewAllItemEls: []\n });\n\n // This function merges the pre-defined actions(add & edit) to the item object.\n const mergeItemActions = (\n items: StakeholdersProps['items'] \| NonNullable<StakeholdersProps['viewAll']>['items']\n ) => {\n return items.map(({ onEdit, onRemove, ...rest }, i) => {\n let itemActions: Action[] = [];\n const elArray = itemElsRef.current[mode === 'viewAll' ? 'viewAllItemEls' : 'itemEls'];\n\n if (onEdit) {\n itemActions = [\n {\n id: 'edit',\n text: t('edit'),\n icon: 'pencil',\n onClick: () => {\n setEditing(true);\n setPopoverTarget({\n portal: elArray[i],\n button: elArray[i].querySelector<HTMLButtonElement>(\n 'button[aria-haspopup=\"menu\"]'\n )\n });\n\n onEdit?.();\n }\n }\n ];\n }\n\n if (onRemove) {\n itemActions = [\n ...itemActions,\n {\n id: 'remove',\n text: t('remove'),\n icon: 'trash',\n onClick: () => {\n onRemove?.();\n }\n }\n ];\n }\n\n return {\n ...rest,\n ref: (el: HTMLLIElement) => {\n elArray[i] = el;\n },\n actions: itemActions\n };\n });\n };\n\n const closePopover = () => {\n if (!popoverTarget \|\| (form.loading && progressMsgRef.current === t('submitting'))) return;\n popoverTarget.button?.focus();\n setPopoverTarget(null);\n setEditing(false);\n progressMsgRef.current = t('loading');\n };\n\n let formContent: ReactNode = null;\n if (\n (mode === 'add' \|\| editing) &&\n (!form.loading \|\| progressMsgRef.current === t('submitting'))\n ) {\n formContent = (\n <StakeholderForm\n roles={form.roles}\n currentRole={form.currentRole}\n renderer={form.renderer}\n rendererProps={form.rendererProps}\n setSelectedRoleNameRef={setSelectedRoleNameRef}\n />\n );\n }\n\n // Actions used for add and edit both in the modal and the popover.\n let formActions: ReactNode = null;\n if (\n (mode === 'add' \|\| editing) &&\n (!form.loading \|\| progressMsgRef.current === t('submitting'))\n ) {\n const closeForm = () => {\n if (mode === 'add') {\n modalMethods.current?.dismiss();\n } else {\n closePopover();\n }\n };\n\n formActions = (\n <>\n <Button\n disabled={form.loading}\n onClick={() => {\n form.onDismiss({ closeForm });\n }}\n >\n {t('cancel')}\n </Button>\n <Button\n disabled={form.loading}\n type='submit'\n variant='primary'\n onClick={() => {\n progressMsgRef.current = t('submitting');\n form.onSubmit({\n selectedRoleName: selectedRoleNameRef.current,\n closeForm\n });\n }}\n >\n {t('submit')}\n </Button>\n </>\n );\n }\n\n let editPopover: ReactNode = null;\n if (popoverTarget) {\n editPopover = (\n <StyledPopover\n ref={popoverRef}\n target={popoverTarget.button}\n placement='auto'\n role='dialog'\n >\n <StyledContainer container={{ direction: 'column', gap: 2 }}>\n <Text variant='h3'>{t('edit_stakeholder')}</Text>\n <StyledEditFormWrap aria-busy={form.loading ? 'true' : 'false'}>\n <Progress placement='local' visible={form.loading} message={progressMsgRef.current} />\n {(!form.loading \|\| progressMsgRef.current === t('submitting')) && (\n <StakeholderForm\n roles={form.roles}\n currentRole={form.currentRole}\n renderer={form.renderer}\n rendererProps={form.rendererProps}\n setSelectedRoleNameRef={setSelectedRoleNameRef}\n />\n )}\n </StyledEditFormWrap>\n {formActions && (\n <Flex container={{ justify: 'between', pad: [undefined, 2, 2] }}>{formActions}</Flex>\n )}\n </StyledContainer>\n </StyledPopover>\n );\n }\n\n // Content for the modal either for adding new or viewing all.\n let modalContent: ReactNode = null;\n if (mode === 'add') modalContent = formContent;\n\n if (!viewAll.loading && (mode === 'viewAll' \|\| (editing && modalMethods.current))) {\n modalContent = (\n <>\n <ViewAll\n items={mergeItemActions(viewAll.items)}\n actions={[\n {\n id: 'addStakeHolder',\n text: 'Add new',\n onClick: () => {\n setMode('add');\n onAddNew?.();\n }\n }\n ]}\n searchInputProps={\n viewAll.onSearch\n ? {\n value: viewAllSearchValue,\n onSearchChange: (value: string) => {\n setViewAllSearchValue(value);\n viewAll?.onSearch?.(value);\n }\n }\n : undefined\n }\n />\n {/* Edit popover triggered from a modal must be rendered within modal content to render in correct DOM position. /}\n {editPopover}\n </>\n );\n }\n\n useEffect(() => {\n if (!mode) {\n modalMethods.current = undefined;\n return;\n }\n\n const modalProps: OmitStrict<ModalProps, 'heading'> = {\n progress:\n (mode === 'add' && form.loading) \|\| viewAll.loading\n ? { message: progressMsgRef.current }\n : undefined,\n count: mode === 'viewAll' ? count : undefined,\n children: modalContent,\n actions: mode === 'add' ? formActions : undefined,\n onRequestDismiss:\n form.loading && progressMsgRef.current === t('submitting') ? () => false : undefined\n };\n\n if (modalMethods.current) {\n modalMethods.current.update(modalProps);\n } else if (mode === 'add' \|\| mode === 'viewAll') {\n modalMethods.current = createModal(Modal, {\n ...modalProps,\n heading: mode === 'add' ? t('add_stakeholders') : t('view_stakeholders'),\n onAfterClose: () => {\n if (mode === 'add') {\n form.onAfterClose?.();\n } else {\n setViewAllSearchValue('');\n viewAll.onAfterClose?.();\n }\n\n progressMsgRef.current = t('loading');\n setMode(undefined);\n }\n });\n }\n }, [mode, modalContent, form.loading, formActions, count, viewAll.loading]);\n\n // Using mousedown instead of click since drag selecting an input's value within the popover, then releasing outside the popover triggers outer click.\n useOuterEvent('mousedown', [popoverRef], closePopover);\n\n const onKeydown = (e: KeyboardEvent) => {\n if (e.key === 'Escape') {\n closePopover();\n }\n };\n\n useEffect(() => {\n if (!popoverTarget) return;\n document.addEventListener('keydown', onKeydown);\n return () => {\n document.removeEventListener('keydown', onKeydown);\n };\n }, [popoverTarget]);\n\n useAfterInitialEffect(() => {\n if (!popoverTarget) form.onAfterClose?.();\n }, [popoverTarget]);\n\n return (\n <>\n <StyledStakeholders\n {...restProps}\n ref={ref}\n icon='person'\n name={t('view_stakeholders')}\n headingTag='h3'\n loading={loading}\n count={count}\n error={error}\n items={useMemo(\n () => mergeItemActions(itemsProp.slice(0, 3)),\n [mergeItemActions, itemsProp]\n )}\n actions={\n onAddNew\n ? [\n {\n text: t('add'),\n id: 'add_new',\n icon: 'plus',\n onClick() {\n setMode('add');\n onAddNew?.();\n }\n }\n ]\n : undefined\n }\n onViewAll={\n onViewAll && count && count > 3\n ? () => {\n setMode('viewAll');\n onViewAll?.();\n }\n : undefined\n }\n />\n {/ When edit is opened outside of the view all modal. */}\n {editPopover && mode !== 'viewAll' ? editPopover : null}\n </>\n );\n }\n);\n\nexport default Stakeholders;\n"]}
1	+ {"version":3,"file":"Stakeholders.js","sourceRoot":"","sources":["../../../src/components/Stakeholders/Stakeholders.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useRef, useEffect, useMemo, useState, useCallback } from 'react';\nimport type { PropsWithoutRef, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n SummaryList,\n useI18n,\n Button,\n ViewAll,\n Modal,\n Flex,\n useModalManager,\n useOuterEvent,\n Progress,\n useAfterInitialEffect,\n defaultThemeProp,\n FormDialog\n} from '@pega/cosmos-react-core';\nimport type {\n Action,\n ForwardRefForwardPropsComponent,\n ModalMethods,\n ModalProps,\n OmitStrict\n} from '@pega/cosmos-react-core';\n\nimport type { Role, StakeholdersProps } from './Stakeholders.types';\nimport StakeholderForm from './StakeholderForm';\n\nconst StyledStakeholders = styled(SummaryList)``;\n\nconst StyledEditFormWrap = styled.div(({ theme }) => {\n return css`\n position: relative;\n min-height: 8rem;\n overflow: auto;\n padding-block: calc(${theme.base.spacing} / 2);\n padding-inline: calc(2 * ${theme.base.spacing});\n\n &[aria-busy='true'] > :nth-child(2) {\n visibility: hidden;\n }\n `;\n});\n\nStyledEditFormWrap.defaultProps = defaultThemeProp;\n\nconst StyledContainer = styled(Flex)(({ theme }) => {\n return css`\n max-height: inherit;\n > h3 {\n padding-block-start: calc(2 * ${theme.base.spacing});\n padding-inline: calc(2 * ${theme.base.spacing});\n }\n `;\n});\n\nStyledContainer.defaultProps = defaultThemeProp;\n\nconst Stakeholders: ForwardRefForwardPropsComponent<StakeholdersProps> = forwardRef(\n function Stakeholders(\n {\n items: itemsProp,\n count,\n loading,\n onAddNew,\n form,\n onViewAll,\n viewAll,\n error,\n ...restProps\n }: PropsWithoutRef<StakeholdersProps>,\n ref: StakeholdersProps['ref']\n ) {\n const { create: createModal } = useModalManager();\n const t = useI18n();\n const modalMethods = useRef<ModalMethods>();\n const [mode, setMode] = useState<undefined \| 'add' \| 'viewAll'>();\n const [editing, setEditing] = useState(false);\n const [viewAllSearchValue, setViewAllSearchValue] = useState('');\n const dialogRef = useRef<HTMLDivElement>(null);\n const progressMsgRef = useRef(t('loading'));\n\n // Why? Don't think this should trigger a re-render. We just need the value when we invoke callback props.\n const selectedRoleNameRef = useRef<Role['name'] \| undefined>();\n // Setter for the ref. Avoids a re-render.\n const setSelectedRoleNameRef = useCallback((selectedRoleName?: Role['name']) => {\n selectedRoleNameRef.current = selectedRoleName;\n }, []);\n\n const [dialogTarget, setDialogTarget] = useState<{\n portal: HTMLLIElement;\n button: HTMLButtonElement \| null;\n } \| null>(null);\n\n const itemElsRef = useRef<{ itemEls: HTMLLIElement[]; viewAllItemEls: HTMLLIElement[] }>({\n itemEls: [],\n viewAllItemEls: []\n });\n\n // This function merges the pre-defined actions(add & edit) to the item object.\n const mergeItemActions = (\n items: StakeholdersProps['items'] \| NonNullable<StakeholdersProps['viewAll']>['items']\n ) => {\n return items.map(({ onEdit, onRemove, ...rest }, i) => {\n let itemActions: Action[] = [];\n const elArray = itemElsRef.current[mode === 'viewAll' ? 'viewAllItemEls' : 'itemEls'];\n\n if (onEdit) {\n itemActions = [\n {\n id: 'edit',\n text: t('edit'),\n icon: 'pencil',\n onClick: () => {\n setEditing(true);\n setDialogTarget({\n portal: elArray[i],\n button: elArray[i].querySelector<HTMLButtonElement>(\n 'button[aria-haspopup=\"menu\"]'\n )\n });\n\n onEdit?.();\n }\n }\n ];\n }\n\n if (onRemove) {\n itemActions = [\n ...itemActions,\n {\n id: 'remove',\n text: t('remove'),\n icon: 'trash',\n onClick: () => {\n onRemove?.();\n }\n }\n ];\n }\n\n return {\n ...rest,\n ref: (el: HTMLLIElement) => {\n elArray[i] = el;\n },\n actions: itemActions\n };\n });\n };\n\n const closeFormDialog = () => {\n if (!dialogTarget \|\| (form.loading && progressMsgRef.current === t('submitting'))) return;\n dialogTarget.button?.focus();\n setDialogTarget(null);\n setEditing(false);\n progressMsgRef.current = t('loading');\n };\n\n let formContent: ReactNode = null;\n if (\n (mode === 'add' \|\| editing) &&\n (!form.loading \|\| progressMsgRef.current === t('submitting'))\n ) {\n formContent = (\n <StakeholderForm\n roles={form.roles}\n currentRole={form.currentRole}\n renderer={form.renderer}\n rendererProps={form.rendererProps}\n setSelectedRoleNameRef={setSelectedRoleNameRef}\n />\n );\n }\n\n // Actions used for add and edit both in the modal and the dialog.\n let formActions: ReactNode = null;\n if (\n (mode === 'add' \|\| editing) &&\n (!form.loading \|\| progressMsgRef.current === t('submitting'))\n ) {\n const closeForm = () => {\n if (mode === 'add') {\n modalMethods.current?.dismiss();\n } else {\n closeFormDialog();\n }\n };\n\n formActions = (\n <>\n <Button\n disabled={form.loading}\n onClick={() => {\n form.onDismiss({ closeForm });\n }}\n >\n {t('cancel')}\n </Button>\n <Button\n disabled={form.loading}\n type='submit'\n variant='primary'\n onClick={() => {\n progressMsgRef.current = t('submitting');\n form.onSubmit({\n selectedRoleName: selectedRoleNameRef.current,\n closeForm\n });\n }}\n >\n {t('submit')}\n </Button>\n </>\n );\n }\n\n const closeForm = () => {\n if (mode === 'add') {\n modalMethods.current?.dismiss();\n } else {\n closeFormDialog();\n }\n };\n\n const stakeholderFormDialog = (\n <StyledContainer container={{ direction: 'column', gap: 2 }}>\n <StyledEditFormWrap aria-busy={form.loading ? 'true' : 'false'}>\n <Progress placement='local' visible={form.loading} message={progressMsgRef.current} />\n {(!form.loading \|\| progressMsgRef.current === t('submitting')) && (\n <StakeholderForm\n roles={form.roles}\n currentRole={form.currentRole}\n renderer={form.renderer}\n rendererProps={form.rendererProps}\n setSelectedRoleNameRef={setSelectedRoleNameRef}\n />\n )}\n </StyledEditFormWrap>\n </StyledContainer>\n );\n\n let editFormDialog: ReactNode = null;\n if (dialogTarget?.button) {\n editFormDialog = (\n <FormDialog\n ref={dialogRef}\n target={dialogTarget.button as HTMLElement}\n heading={t('edit_stakeholder')}\n onSubmit={() => {\n progressMsgRef.current = t('submitting');\n form.onSubmit({\n selectedRoleName: selectedRoleNameRef.current,\n closeForm\n });\n }}\n onCancel={closeFormDialog}\n >\n {stakeholderFormDialog}\n </FormDialog>\n );\n }\n\n // Content for the modal either for adding new or viewing all.\n let modalContent: ReactNode = null;\n if (mode === 'add') modalContent = formContent;\n\n if (!viewAll.loading && (mode === 'viewAll' \|\| (editing && modalMethods.current))) {\n modalContent = (\n <>\n <ViewAll\n items={mergeItemActions(viewAll.items)}\n actions={[\n {\n id: 'addStakeHolder',\n text: 'Add new',\n onClick: () => {\n setMode('add');\n onAddNew?.();\n }\n }\n ]}\n searchInputProps={\n viewAll.onSearch\n ? {\n value: viewAllSearchValue,\n onSearchChange: (value: string) => {\n setViewAllSearchValue(value);\n viewAll?.onSearch?.(value);\n }\n }\n : undefined\n }\n />\n {/* Edit dialog triggered from a modal must be rendered within modal content to render in correct DOM position. /}\n {editFormDialog}\n </>\n );\n }\n\n useEffect(() => {\n if (!mode) {\n modalMethods.current = undefined;\n return;\n }\n\n const modalProps: OmitStrict<ModalProps, 'heading'> = {\n progress:\n (mode === 'add' && form.loading) \|\| viewAll.loading\n ? { message: progressMsgRef.current }\n : undefined,\n count: mode === 'viewAll' ? count : undefined,\n children: modalContent,\n actions: mode === 'add' ? formActions : undefined,\n onRequestDismiss:\n form.loading && progressMsgRef.current === t('submitting') ? () => false : undefined\n };\n\n if (modalMethods.current) {\n modalMethods.current.update(modalProps);\n } else if (mode === 'add' \|\| mode === 'viewAll') {\n modalMethods.current = createModal(Modal, {\n ...modalProps,\n heading: mode === 'add' ? t('add_stakeholders') : t('view_stakeholders'),\n onAfterClose: () => {\n if (mode === 'add') {\n form.onAfterClose?.();\n } else {\n setViewAllSearchValue('');\n viewAll.onAfterClose?.();\n }\n\n progressMsgRef.current = t('loading');\n setMode(undefined);\n }\n });\n }\n }, [mode, modalContent, form.loading, formActions, count, viewAll.loading]);\n\n // Using mousedown instead of click since drag selecting an input's value within the dialog, then releasing outside the dialog triggers outer click.\n useOuterEvent('mousedown', [dialogRef], closeFormDialog);\n\n const onKeydown = (e: KeyboardEvent) => {\n if (e.key === 'Escape') {\n closeFormDialog();\n }\n };\n\n useEffect(() => {\n if (!dialogTarget) return;\n document.addEventListener('keydown', onKeydown);\n return () => {\n document.removeEventListener('keydown', onKeydown);\n };\n }, [dialogTarget]);\n\n useAfterInitialEffect(() => {\n if (!dialogTarget) form.onAfterClose?.();\n }, [dialogTarget]);\n\n return (\n <>\n <StyledStakeholders\n {...restProps}\n ref={ref}\n icon='person'\n name={t('view_stakeholders')}\n headingTag='h3'\n loading={loading}\n count={count}\n error={error}\n items={useMemo(\n () => mergeItemActions(itemsProp.slice(0, 3)),\n [mergeItemActions, itemsProp]\n )}\n actions={\n onAddNew\n ? [\n {\n text: t('add'),\n id: 'add_new',\n icon: 'plus',\n onClick() {\n setMode('add');\n onAddNew?.();\n }\n }\n ]\n : undefined\n }\n onViewAll={\n onViewAll && count && count > 3\n ? () => {\n setMode('viewAll');\n onViewAll?.();\n }\n : undefined\n }\n />\n {/ When edit is opened outside of the view all modal. */}\n {editFormDialog && mode !== 'viewAll' ? editFormDialog : null}\n </>\n );\n }\n);\n\nexport default Stakeholders;\n"]}

package/lib/components/Tags/Tags.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
-import type { FunctionComponent, Ref } from 'react';
-import type { BaseProps, ForwardProps, ErrorStateProps, NoChildrenProp } from '@pega/cosmos-react-core';
+import type { Ref } from 'react';
+import type { BaseProps, ForwardRefForwardPropsComponent, ErrorStateProps, NoChildrenProp } from '@pega/cosmos-react-core';
 export interface SelectedTag {
     text: string;
     newTag?: boolean;
@@ -26,9 +26,9 @@ export interface TagsProps extends BaseProps, NoChildrenProp {
     ref?: Ref<HTMLElement>;
 }
 export declare const StyledTags: import("styled-components").StyledComponent<"article", import("styled-components").DefaultTheme, {
-    isLoading?: boolean | undefined;
-    viewAll?: boolean | undefined;
+    isLoading?: boolean;
+    viewAll?: boolean;
 }, never>;
-declare const Tags: FunctionComponent<TagsProps & ForwardProps>;
+declare const Tags: ForwardRefForwardPropsComponent<TagsProps>;
 export default Tags;
 //# sourceMappingURL=Tags.d.ts.map

package/lib/components/Tags/Tags.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Tags.d.ts","sourceRoot":"","sources":["../../../src/components/Tags/Tags.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,~~EAIV~~,~~iBAAiB,EAEjB,~~GAAG,~~EACJ~~,MAAM,OAAO,CAAC;~~AA6Bf~~,OAAO,KAAK,EACV,SAAS,EACT,~~YAAY~~,~~EAGZ,~~eAAe,EACf,cAAc,EACf,MAAM,yBAAyB,CAAC;AASjC,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,SAAU,SAAQ,SAAS,EAAE,cAAc;IAC1D,sBAAsB;IACtB,IAAI,EAAE,MAAM,EAAE,CAAC;IACf;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;IACzB,0EAA0E;IAC1E,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,8FAA8F;IAC9F,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,eAAe,CAAC;IAC3C,gFAAgF;IAChF,QAAQ,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,gDAAgD;IAChD,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,0EAA0E;IAC1E,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,WAAW,EAAE,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACpD,6BAA6B;IAC7B,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB;AASD,eAAO,MAAM,UAAU~~;;;SA4BtB~~,CAAC;AAoMF,QAAA,MAAM,IAAI,EAAE,~~iBAAiB,~~CAAC,SAAS,~~GAAG~~,~~YAAY,CA8HpD,~~CAAC;AAEH,eAAe,IAAI,CAAC"}
1	+ {"version":3,"file":"Tags.d.ts","sourceRoot":"","sources":["../../../src/components/Tags/Tags.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAA+D,GAAG,EAAE,MAAM,OAAO,CAAC;AA6B9F,OAAO,KAAK,EACV,SAAS,EACT,+BAA+B,EAG/B,eAAe,EACf,cAAc,EACf,MAAM,yBAAyB,CAAC;AASjC,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,SAAU,SAAQ,SAAS,EAAE,cAAc;IAC1D,sBAAsB;IACtB,IAAI,EAAE,MAAM,EAAE,CAAC;IACf;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;IACzB,0EAA0E;IAC1E,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,8FAA8F;IAC9F,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,eAAe,CAAC;IAC3C,gFAAgF;IAChF,QAAQ,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,gDAAgD;IAChD,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,0EAA0E;IAC1E,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,WAAW,EAAE,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACpD,6BAA6B;IAC7B,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB;AASD,eAAO,MAAM,UAAU;gBAAgC,OAAO;cAAY,OAAO;SA4BhF,CAAC;AAoMF,QAAA,MAAM,IAAI,EAAE,+BAA+B,CAAC,SAAS,CA8HnD,CAAC;AAEH,eAAe,IAAI,CAAC"}