npm - @pega/cosmos-react-work - Versions diffs - 2.0.0-dev.2.1 → 2.0.0-dev.20.0 - Mend

@pega/cosmos-react-work 2.0.0-dev.2.1 → 2.0.0-dev.20.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 (180) 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":"AAAA,OAAO,KAAK,EAAE,EAEZ,QAAQ,EACR,MAAM,EACN,SAAS,EACT,UAAU,EACV,WAAW,EACZ,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AAEnC,OAAO,EACL,IAAI,EACJ,IAAI,EAEJ,UAAU,EACV,aAAa,EACb,OAAO,EACP,OAAO,EACP,MAAM,EACN,mBAAmB,EAEnB,KAAK,EACL,aAAa,EACb,aAAa,EACb,QAAQ,EACR,QAAQ,EACT,MAAM,yBAAyB,CAAC;AAGjC,OAAO,cAAc,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,kBAAkB,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAElG,MAAM,MAAM,GAAkD,CAAC,KAAkB,EAAE,EAAE;IACnF,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAC3D,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,UAAU,EAAkB,CAAC;IAC7D,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,GAAG,UAAU,EAAmB,CAAC;IAClF,MAAM,CAAC,oBAAoB,EAAE,uBAAuB,CAAC,GAAG,UAAU,EAAqB,CAAC;IAExF,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAAS,CAAC,CAAC,CAAC;IACpE,MAAM,cAAc,GAAG,MAAM,CAAC,gBAAgB,CAAC,CAAC;IAChD,MAAM,UAAU,GAAG,MAAM,CAAgB,EAAE,CAAC,CAAC;IAC7C,MAAM,aAAa,GAAG,UAAU,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC;IAC3D,MAAM,EAAE,MAAM,EAAE,GAAG,UAAU,CAAC,mBAAmB,CAAC,CAAC;IACnD,MAAM,CAAC,SAAS,EAAE,aAAa,CAAC,GAAG,UAAU,EAAe,CAAC;IAC7D,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACtD,MAAM,iBAAiB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IACvC,MAAM,cAAc,GAAG,aAAa,CAAC,IAAI,CAAC,CAAC;IAC3C,MAAM,iBAAiB,GAAG,aAAa,CAAC,iBAAiB,CAAC,CAAC;IAE3D,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC5D,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAE5D,MAAM,cAAc,GAAG,IAAI,cAAc,CACvC,QAAQ,CAAC,OAAO,CAAC,EAAE;QACjB,IAAI,OAAO,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,KAAK,GAAG,gBAAgB;YAAE,iBAAiB,CAAC,KAAK,CAAC,CAAC;IAChF,CAAC,EAAE,GAAG,CAAC,CACR,CAAC;IAEF,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IAEzB,MAAM,oBAAoB,GAAG,IAAI,oBAAoB,CACnD,OAAO,CAAC,EAAE;QACR,IAAI,OAAO,CAAC,CAAC,CAAC,CAAC,iBAAiB,GAAG,CAAC,EAAE;YACpC,IAAI,QAAQ;gBAAE,mBAAmB,CAAC,IAAI,CAAC,GAAG,CAAC,gBAAgB,EAAE,QAAQ,CAAC,WAAW,GAAG,CAAC,CAAC,CAAC,CAAC;YACxF,iBAAiB,CAAC,IAAI,CAAC,CAAC;SACzB;IACH,CAAC,EACD,EAAE,IAAI,EAAE,oBAAoB,EAAE,UAAU,EAAE,QAAQ,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE,EAAE,SAAS,EAAE,CAAC,EAAE,CAChG,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,QAAQ,IAAI,kBAAkB,EAAE;YAClC,oBAAoB,CAAC,OAAO,CAAC,kBAA6B,CAAC,CAAC;YAC5D,cAAc,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;YAEjC,OAAO,GAAG,EAAE;gBACV,oBAAoB,CAAC,UAAU,EAAE,CAAC;gBAClC,cAAc,CAAC,UAAU,EAAE,CAAC;YAC9B,CAAC,CAAC;SACH;IACH,CAAC,EAAE,CAAC,QAAQ,EAAE,kBAAkB,EAAE,cAAc,CAAC,CAAC,CAAC;IAEnD,aAAa,CAAC,WAAW,EAAE,CAAC,SAAS,EAAE,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE;QACzD,IAAI,WAAW,EAAE;YACf,cAAc,CAAC,KAAK,CAAC,CAAC;YACtB,CAAC,CAAC,cAAc,EAAE,CAAC;SACpB;IACH,CAAC,CAAC,CAAC;IAEH,MAAM,WAAW,GAAG,CAAC,EAAiC,EAAE,EAAE;QACxD,IAAI,CAAC,WAAW;YAAE,EAAE,CAAC,cAAc,EAAE,CAAC;IACxC,CAAC,CAAC;IAEF,MAAM,SAAS,GAAG,WAAW,CAC3B,CAAC,EAAE,GAAG,EAAiB,EAAE,EAAE;QACzB,IAAI,GAAG,KAAK,QAAQ,EAAE;YACpB,cAAc,CAAC,KAAK,CAAC,CAAC;YACtB,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,KAAK,EAAE,CAAC;SACxB;IACH,CAAC,EACD,CAAC,aAAa,CAAC,CAChB,CAAC;IAEF,MAAM,gBAAgB,GAAG,WAAW,CAClC,CAAC,KAAoB,EAAE,EAAE;;QACvB,IAAI,KAAK,CAAC,GAAG,KAAK,KAAK,IAAI,KAAK,CAAC,QAAQ,EAAE;YACzC,MAAM,cAAc,GAAG,iBAAiB,CAAC,CAAC,CAAC,CAAC;YAE5C,IAAI,QAAQ,CAAC,aAAa,KAAK,cAAc,EAAE;gBAC7C,MAAA,UAAU,CAAC,OAAO,CAAC,gBAAgB,GAAG,CAAC,CAAC,0CAAE,KAAK,EAAE,CAAC;gBAClD,cAAc,CAAC,KAAK,CAAC,CAAC;aACvB;SACF;QAED,IAAI,KAAK,CAAC,GAAG,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE;YAC1C,MAAM,aAAa,GAAG,iBAAiB,CAAC,iBAAiB,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;YAEtE,IAAI,QAAQ,CAAC,aAAa,KAAK,aAAa,EAAE;gBAC5C,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,KAAK,EAAE,CAAC;gBACvB,cAAc,CAAC,KAAK,CAAC,CAAC;aACvB;SACF;IACH,CAAC,EACD,CAAC,aAAa,EAAE,iBAAiB,EAAE,gBAAgB,CAAC,CACrD,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;QAChD,OAAO,GAAG,EAAE;YACV,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;QACrD,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,iBAAiB,CAAC,MAAM;YAAE,iBAAiB,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;IAC7D,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE5D,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,cAAc,EAAE;YAClB,cAAc,CAAC,KAAK,CAAC,CAAC;YACtB,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,KAAK,EAAE,CAAC;YACvB,iBAAiB,CAAC,KAAK,CAAC,CAAC;SAC1B;IACH,CAAC,EAAE,CAAC,aAAa,EAAE,cAAc,CAAC,CAAC,CAAC;IAEpC,MAAM,WAAW,GAAG,CAAC,EAAE,OAAO,GAAG,CAAC,CAAC,WAAW,EAAE,SAAS,IAAI,MAAM,CAAC,EAAuB,EAAE,EAAE;QAC7F,OAAO,CACL,oBAAC,KAAK,OAAK,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,gBAAgB,EAAE,GAAG,EAAE,CAAC,iBAAiB,CAAC,IAAI,CAAC,IACpF,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,EAAE,EAAE,CAAC,CACzB,oBAAC,cAAc,IAAC,YAAY,EAAE,CAAC,KAAK,CAAC,EAAE,GAAG,EAAE,EAAE,CAAC,QAAQ,EAAE,GAAI,CAC9D,CAAC,CACI,CACT,CAAC;IACJ,CAAC,CAAC;IAEF,MAAM,SAAS,GAAG,GAAG,EAAE;QACrB,cAAc,CAAC,KAAK,CAAC,CAAC;QACtB,MAAM,CAAC,WAAW,CAAC,CAAC;IACtB,CAAC,CAAC;IAEF,MAAM,SAAS,GAAG,CAAC,OAAe,EAAE,EAAE,CAAC,OAAO,KAAK,OAAO,CAAC;IAE3D,OAAO,CACL;QACE,oBAAC,IAAI,IAAC,SAAS,QAAC,EAAE,EAAE,YAAY,EAAE,GAAG,EAAE,WAAW,KAAM,SAAS,IAC9D,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,CAC5B,oBAAC,IAAI,IACH,SAAS,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,EACtD,EAAE,EAAE,WAAW,EACf,IAAI,EAAE,EAAE,IAAI,EAAE,cAAc,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,kBAC3D,SAAS,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,gBAC1C,SAAS,KAAK,CAAC,IAAI,EAAE,EACjC,GAAG,EAAE,SAAS,KAAK,CAAC,EAAE,EAAE,EACxB,GAAG,EAAE,CAAC,EAAqB,EAAE,EAAE;gBAC7B,UAAU,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC;gBAC/B,IAAI,SAAS,CAAC,KAAK,CAAC,EAAE,CAAC;oBAAE,uBAAuB,CAAC,EAAE,CAAC,CAAC;YACvD,CAAC,EACD,WAAW,EAAE,WAAW,EACxB,OAAO,EAAE,GAAG,EAAE;gBACZ,mBAAmB,CAAC,KAAK,CAAC,CAAC;gBAC3B,IAAI,cAAc,EAAE;oBAClB,cAAc,CAAC,CAAC,WAAW,CAAC,CAAC;iBAC9B;qBAAM;oBACL,SAAS,EAAE,CAAC;iBACb;YACH,CAAC;YAEA,KAAK,CAAC,QAAQ,IAAI,oBAAC,IAAI,IAAC,IAAI,EAAC,OAAO,GAAG;YACvC,CAAC,CAAC,KAAK,CAAC,QAAQ,IAAI,cAAc,CAAC,IAAI,CACtC,oBAAC,gBAAgB,IACf,GAAG,EAAE,SAAS,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,SAAS,EAC5D,QAAQ,EAAE,SAAS,CAAC,KAAK,CAAC,EAAE,CAAC,IAAI,cAAc,IAE9C,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE,CAAC,IAAI,cAAc,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAC/C,CACpB,CACI,CACR,CAAC,CACG;QACP,oBAAC,IAAI,IAAC,GAAG,EAAE,iBAAiB;YAC1B,oBAAC,OAAO,IACN,EAAE,EAAE,kBAAkB,EACtB,IAAI,EAAE,WAAW,IAAI,cAAc,EACnC,MAAM,EAAE,UAAU,CAAC,OAAO,CAAC,gBAAgB,CAAC,EAC5C,EAAE,EAAC,IAAI,EACP,GAAG,EAAE,aAAa,EAClB,KAAK,QACL,SAAS,EAAC,cAAc,EACxB,SAAS,EAAE,gBAAgB,EAC3B,SAAS,EAAE;oBACT;wBACE,IAAI,EAAE,MAAM;wBACZ,OAAO,EAAE;4BACP,kBAAkB,EAAE,CAAC,YAAY,EAAE,OAAO,EAAE,MAAM,CAAC;yBACpD;qBACF;iBACF;gBAED,oBAAC,cAAc,IAAC,YAAY,EAAE,CAAC,cAAc,CAAC,GAAI;gBAClD,oBAAC,MAAM,IAAC,OAAO,EAAC,WAAW,EAAC,OAAO,EAAE,SAAS,IAC3C,CAAC,CAAC,0BAA0B,CAAC,CACvB,CACD,CACL,CACN,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,MAAM,CAAC","sourcesContent":["import React, {\n FunctionComponent,\n useState,\n useRef,\n useEffect,\n useContext,\n useCallback\n} from 'react';\nimport { remToPx } from 'polished';\n\nimport {\n Icon,\n Flex,\n ForwardProps,\n useElement,\n useOuterEvent,\n Popover,\n useI18n,\n Button,\n ModalManagerContext,\n ModalProps,\n Modal,\n getFocusables,\n useBreakpoint,\n debounce,\n useTheme\n} from '@pega/cosmos-react-core';\n\nimport { StagesProps } from './Stages.types';\nimport StepsContainer from './StepsContainer';\nimport { StyledInnerStage, StyledStage, StyledStagePopover, StyledStages } from './Stages.styles';\n\nconst Stages: FunctionComponent<StagesProps & ForwardProps> = (props: StagesProps) => {\n const { current, stages, caseTitle, ...restProps } = props;\n const t = useI18n();\n\n const [stagesEl, setStagesEl] = useElement<HTMLDivElement>();\n const [currentStageNameEl, setCurrentStageNameEl] = useElement<HTMLSpanElement>();\n const [currentStageButtonEl, setCurrentStageButtonEl] = useElement<HTMLButtonElement>();\n\n const [activeStageIndex, setActiveStageIndex] = useState<number>(0);\n const activeStageObj = stages[activeStageIndex];\n const stagesRefs = useRef<HTMLElement[]>([]);\n const activeStageEl = stagesRefs.current[activeStageIndex];\n const { create } = useContext(ModalManagerContext);\n const [popoverEl, setPopoverRef] = useElement<HTMLElement>();\n const [showPopover, setShowPopover] = useState(false);\n const popoverContentRef = useRef(null);\n const isSmallOrAbove = useBreakpoint('sm');\n const focusableElements = getFocusables(popoverContentRef);\n\n const [compressedView, setCompressedView] = useState(false);\n const [minExpandedWidth, setMinExpandedWidth] = useState(0);\n\n const resizeObserver = new ResizeObserver(\n debounce(entries => {\n if (entries[0].contentRect.width > minExpandedWidth) setCompressedView(false);\n }, 100)\n );\n\n const theme = useTheme();\n\n const intersectionObserver = new IntersectionObserver(\n entries => {\n if (entries[0].intersectionRatio < 1) {\n if (stagesEl) setMinExpandedWidth(Math.max(minExpandedWidth, stagesEl.offsetWidth + 1));\n setCompressedView(true);\n }\n },\n { root: currentStageButtonEl, rootMargin: `0px -${remToPx(theme.base.spacing)}`, threshold: 1 }\n );\n\n useEffect(() => {\n if (stagesEl && currentStageNameEl) {\n intersectionObserver.observe(currentStageNameEl as Element);\n resizeObserver.observe(stagesEl);\n\n return () => {\n intersectionObserver.disconnect();\n resizeObserver.disconnect();\n };\n }\n }, [stagesEl, currentStageNameEl, compressedView]);\n\n useOuterEvent('mousedown', [popoverEl, activeStageEl], e => {\n if (showPopover) {\n setShowPopover(false);\n e.preventDefault();\n }\n });\n\n const onMouseDown = (ev: React.MouseEvent<HTMLElement>) => {\n if (!showPopover) ev.preventDefault();\n };\n\n const onKeyDown = useCallback(\n ({ key }: KeyboardEvent) => {\n if (key === 'Escape') {\n setShowPopover(false);\n activeStageEl?.focus();\n }\n },\n [activeStageEl]\n );\n\n const onKeyDownPopover = useCallback(\n (event: KeyboardEvent) => {\n if (event.key === 'Tab' && event.shiftKey) {\n const firstFocusable = focusableElements[0];\n\n if (document.activeElement === firstFocusable) {\n stagesRefs.current[activeStageIndex + 1]?.focus();\n setShowPopover(false);\n }\n }\n\n if (event.key === 'Tab' && !event.shiftKey) {\n const lastFocusable = focusableElements[focusableElements.length - 1];\n\n if (document.activeElement === lastFocusable) {\n activeStageEl?.focus();\n setShowPopover(false);\n }\n }\n },\n [activeStageEl, focusableElements, activeStageIndex]\n );\n\n useEffect(() => {\n document.addEventListener('keydown', onKeyDown);\n return () => {\n document.removeEventListener('keydown', onKeyDown);\n };\n }, [onKeyDown]);\n\n useEffect(() => {\n if (focusableElements.length) focusableElements[0].focus();\n }, [popoverEl]);\n\n const [requestDismiss, setRequestDismiss] = useState(false);\n\n useEffect(() => {\n if (requestDismiss) {\n setShowPopover(false);\n activeStageEl?.focus();\n setRequestDismiss(false);\n }\n }, [activeStageEl, requestDismiss]);\n\n const RenderModal = ({ heading = t('lifecycle', caseTitle \|\| 'Case') }: Partial<ModalProps>) => {\n return (\n <Modal {...restProps} heading={heading} onRequestDismiss={() => setRequestDismiss(true)}>\n {stages.map((stage, id) => (\n <StepsContainer currentStage={[stage]} key={id.toString()} />\n ))}\n </Modal>\n );\n };\n\n const openModal = () => {\n setShowPopover(false);\n create(RenderModal);\n };\n\n const isCurrent = (stageId: string) => current === stageId;\n\n return (\n <>\n <Flex container as={StyledStages} ref={setStagesEl} {...restProps}>\n {stages.map((stage, index) => (\n <Flex\n container={{ justify: 'center', alignItems: 'center' }}\n as={StyledStage}\n item={{ grow: compressedView && !isCurrent(stage.id) ? 0 : 1, shrink: 1 }}\n aria-current={isCurrent(stage.id) ? 'step' : undefined}\n aria-label={`Stage ${stage.name}`}\n key={`stage-${stage.id}`}\n ref={(el: HTMLButtonElement) => {\n stagesRefs.current[index] = el;\n if (isCurrent(stage.id)) setCurrentStageButtonEl(el);\n }}\n onMouseDown={onMouseDown}\n onClick={() => {\n setActiveStageIndex(index);\n if (isSmallOrAbove) {\n setShowPopover(!showPopover);\n } else {\n openModal();\n }\n }}\n >\n {stage.complete && <Icon name='check' />}\n {!(stage.complete && compressedView) && (\n <StyledInnerStage\n ref={isCurrent(stage.id) ? setCurrentStageNameEl : undefined}\n ellipsis={isCurrent(stage.id) && compressedView}\n >\n {!isCurrent(stage.id) && compressedView ? index + 1 : stage.name}\n </StyledInnerStage>\n )}\n </Flex>\n ))}\n </Flex>\n <Flex ref={popoverContentRef}>\n <Popover\n as={StyledStagePopover}\n show={showPopover && isSmallOrAbove}\n target={stagesRefs.current[activeStageIndex]}\n id='id'\n ref={setPopoverRef}\n arrow\n placement='bottom-start'\n onKeyDown={onKeyDownPopover}\n modifiers={[\n {\n name: 'flip',\n options: {\n fallbackPlacements: ['bottom-end', 'right', 'left']\n }\n }\n ]}\n >\n <StepsContainer currentStage={[activeStageObj]} />\n <Button variant='secondary' onClick={openModal}>\n {t('stage_see_full_lifecycle')}\n </Button>\n </Popover>\n </Flex>\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 { FunctionComponent, useState, useRef, useEffect, useContext, useCallback } from 'react';\nimport { remToPx } from 'polished';\n\nimport {\n Icon,\n registerIcon,\n Flex,\n ForwardProps,\n useElement,\n useOuterEvent,\n Popover,\n useI18n,\n Button,\n ModalManagerContext,\n ModalProps,\n Modal,\n getFocusables,\n useBreakpoint,\n debounce,\n useTheme\n} from '@pega/cosmos-react-core';\nimport * as checkIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/check.icon';\n\nimport { StagesProps } from './Stages.types';\nimport StepsContainer from './StepsContainer';\nimport { StyledInnerStage, StyledStage, StyledStagePopover, StyledStages } from './Stages.styles';\n\nregisterIcon(checkIcon);\n\nconst Stages: FunctionComponent<StagesProps & ForwardProps> = (props: StagesProps) => {\n const { current, stages, caseTitle, ...restProps } = props;\n const t = useI18n();\n\n const [stagesEl, setStagesEl] = useElement<HTMLDivElement>();\n const [currentStageNameEl, setCurrentStageNameEl] = useElement<HTMLSpanElement>();\n const [currentStageButtonEl, setCurrentStageButtonEl] = useElement<HTMLButtonElement>();\n\n const [activeStageIndex, setActiveStageIndex] = useState<number>(0);\n const activeStageObj = stages[activeStageIndex];\n const stagesRefs = useRef<HTMLElement[]>([]);\n const activeStageEl = stagesRefs.current[activeStageIndex];\n const { create } = useContext(ModalManagerContext);\n const [popoverEl, setPopoverRef] = useElement<HTMLElement>();\n const [showPopover, setShowPopover] = useState(false);\n const popoverContentRef = useRef(null);\n const isSmallOrAbove = useBreakpoint('sm');\n const focusableElements = getFocusables(popoverContentRef);\n\n const [compressedView, setCompressedView] = useState(false);\n const [minExpandedWidth, setMinExpandedWidth] = useState(0);\n\n const resizeObserver = new ResizeObserver(\n debounce((entries: ResizeObserverEntry[]) => {\n if (entries[0].contentRect.width > minExpandedWidth) setCompressedView(false);\n }, 100)\n );\n\n const theme = useTheme();\n\n const intersectionObserver = new IntersectionObserver(\n entries => {\n if (entries[0].intersectionRatio < 1) {\n if (stagesEl) setMinExpandedWidth(Math.max(minExpandedWidth, stagesEl.offsetWidth + 1));\n setCompressedView(true);\n }\n },\n { root: currentStageButtonEl, rootMargin: `0px -${remToPx(theme.base.spacing)}`, threshold: 1 }\n );\n\n useEffect(() => {\n if (stagesEl && currentStageNameEl) {\n intersectionObserver.observe(currentStageNameEl as Element);\n resizeObserver.observe(stagesEl);\n\n return () => {\n intersectionObserver.disconnect();\n resizeObserver.disconnect();\n };\n }\n }, [stagesEl, currentStageNameEl, compressedView]);\n\n useOuterEvent('mousedown', [popoverEl, activeStageEl], e => {\n if (showPopover) {\n setShowPopover(false);\n e.preventDefault();\n }\n });\n\n const onMouseDown = (ev: React.MouseEvent<HTMLElement>) => {\n if (!showPopover) ev.preventDefault();\n };\n\n const onKeyDown = useCallback(\n ({ key }: KeyboardEvent) => {\n if (key === 'Escape') {\n setShowPopover(false);\n activeStageEl?.focus();\n }\n },\n [activeStageEl]\n );\n\n const onKeyDownPopover = useCallback(\n (event: KeyboardEvent) => {\n if (event.key === 'Tab' && event.shiftKey) {\n const firstFocusable = focusableElements[0];\n\n if (document.activeElement === firstFocusable) {\n stagesRefs.current[activeStageIndex + 1]?.focus();\n setShowPopover(false);\n }\n }\n\n if (event.key === 'Tab' && !event.shiftKey) {\n const lastFocusable = focusableElements[focusableElements.length - 1];\n\n if (document.activeElement === lastFocusable) {\n activeStageEl?.focus();\n setShowPopover(false);\n }\n }\n },\n [activeStageEl, focusableElements, activeStageIndex]\n );\n\n useEffect(() => {\n document.addEventListener('keydown', onKeyDown);\n return () => {\n document.removeEventListener('keydown', onKeyDown);\n };\n }, [onKeyDown]);\n\n useEffect(() => {\n if (focusableElements.length) focusableElements[0].focus();\n }, [popoverEl]);\n\n const [requestDismiss, setRequestDismiss] = useState(false);\n\n useEffect(() => {\n if (requestDismiss) {\n setShowPopover(false);\n activeStageEl?.focus();\n setRequestDismiss(false);\n }\n }, [activeStageEl, requestDismiss]);\n\n const RenderModal = ({\n heading = t('lifecycle', [caseTitle \|\| 'Case'])\n }: Partial<ModalProps>) => {\n return (\n <Modal {...restProps} heading={heading} onRequestDismiss={() => setRequestDismiss(true)}>\n {stages.map((stage, id) => (\n <StepsContainer currentStage={[stage]} key={id.toString()} />\n ))}\n </Modal>\n );\n };\n\n const openModal = () => {\n setShowPopover(false);\n create(RenderModal);\n };\n\n const isCurrent = (stageId: string) => current === stageId;\n\n return (\n <>\n <Flex container as={StyledStages} ref={setStagesEl} {...restProps}>\n {stages.map((stage, index) => (\n <Flex\n container={{ justify: 'center', alignItems: 'center' }}\n as={StyledStage}\n item={{ grow: compressedView && !isCurrent(stage.id) ? 0 : 1, shrink: 1 }}\n aria-current={isCurrent(stage.id) ? 'step' : undefined}\n aria-label={`Stage ${stage.name}`}\n key={`stage-${stage.id}`}\n ref={(el: HTMLButtonElement) => {\n stagesRefs.current[index] = el;\n if (isCurrent(stage.id)) setCurrentStageButtonEl(el);\n }}\n onMouseDown={onMouseDown}\n onClick={() => {\n setActiveStageIndex(index);\n if (isSmallOrAbove) {\n setShowPopover(!showPopover);\n } else {\n openModal();\n }\n }}\n >\n {stage.complete && <Icon name='check' />}\n {!(stage.complete && compressedView) && (\n <StyledInnerStage\n ref={isCurrent(stage.id) ? setCurrentStageNameEl : undefined}\n ellipsis={isCurrent(stage.id) && compressedView}\n >\n {!isCurrent(stage.id) && compressedView ? index + 1 : stage.name}\n </StyledInnerStage>\n )}\n </Flex>\n ))}\n </Flex>\n <Flex ref={popoverContentRef}>\n <Popover\n as={StyledStagePopover}\n show={showPopover && isSmallOrAbove}\n target={stagesRefs.current[activeStageIndex]}\n id='id'\n ref={setPopoverRef}\n arrow\n placement='bottom-start'\n onKeyDown={onKeyDownPopover}\n modifiers={[\n {\n name: 'flip',\n options: {\n fallbackPlacements: ['bottom-end', 'right', 'left']\n }\n }\n ]}\n >\n <StepsContainer currentStage={[activeStageObj]} />\n <Button variant='secondary' onClick={openModal}>\n {t('stage_see_full_lifecycle')}\n </Button>\n </Popover>\n </Flex>\n </>\n );\n};\n\nexport default Stages;\n"]}

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":"~~AASA~~,eAAO,MAAM,YAAY,yGAMvB,CAAC;AAIH,eAAO,MAAM,gBAAgB;;SAW3B,CAAC;AAEH,eAAO,MAAM,WAAW,~~4GAqLtB~~,CAAC;~~AAIH~~,eAAO,MAAM,kBAAkB,yGAM7B,CAAC;AAIH,eAAO,MAAM,oBAAoB,wGAU/B,CAAC;AAIH,eAAO,MAAM,UAAU;cAAyB,OAAO;SA0BrD,CAAC;AAIH,eAAO,MAAM,WAAW,yGAGvB,CAAC;AAIF,eAAO,MAAM,eAAe;cAA2B,OAAO;SAmB5D,CAAC;AAIH,eAAO,MAAM,qBAAqB,0GAMhC,CAAC"}
1	+ {"version":3,"file":"Stages.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Stages/Stages.styles.ts"],"names":[],"mappings":"AAUA,eAAO,MAAM,YAAY,yGAMvB,CAAC;AAIH,eAAO,MAAM,gBAAgB;;SAW3B,CAAC;AAEH,eAAO,MAAM,WAAW,4GA4LvB,CAAC;AAIF,eAAO,MAAM,kBAAkB,yGAM7B,CAAC;AAIH,eAAO,MAAM,oBAAoB,wGAU/B,CAAC;AAIH,eAAO,MAAM,UAAU;cAAyB,OAAO;SA0BrD,CAAC;AAIH,eAAO,MAAM,WAAW,yGAGvB,CAAC;AAIF,eAAO,MAAM,eAAe;cAA2B,OAAO;SAmB5D,CAAC;AAIH,eAAO,MAAM,qBAAqB,0GAMhC,CAAC"}

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

@@ -1,5 +1,5 @@
 import styled, { css } from 'styled-components';
-import { calculateFontSize, defaultThemeProp, StyledIcon, StyledText } from '@pega/cosmos-react-core';
+import { calculateFontSize, defaultThemeProp, StyledIcon, StyledText, useDirection } from '@pega/cosmos-react-core';
 export const StyledStages = styled.div(props => {
     return css `
     background-color: ${props.theme.base.palette['primary-background']};
@@ -20,19 +20,17 @@ export const StyledInnerStage = styled.span(props => {
     `}
   `;
 });
-export const StyledStage = styled.button(props => {
-    const spacing = props.theme.base.spacing;
-    const activeColor = props.theme.base.palette.interactive;
-    const baseBorderColor = props.theme.base.palette['border-line'];
-    const borderRadius = props.theme.base['border-radius'];
+export const StyledStage = styled.button(({ theme: { base: { spacing, palette, 'hit-area': hitArea, shadow, transparency, 'border-radius': borderRadius } } }) => {
+    const activeColor = palette.interactive;
+    const baseBorderColor = palette['border-line'];
     const thinBorderWidth = '0.0625rem';
     const thickBorderWidth = '0.125rem';
-    const baseTransparency = props.theme.base.transparency['transparent-2'];
-    const isRTL = props.theme.base.rtl;
+    const baseTransparency = transparency['transparent-2'];
+    const { rtl, start, end } = useDirection();
     return css `
     /* stylelint-disable no-descending-specificity */
     background-color: inherit;
-    color: ${props.theme.base.palette['foreground-color']};
+    color: ${palette['foreground-color']};
     outline: none;
     border-color: transparent;
     border-width: ${thinBorderWidth} 0;
@@ -44,13 +42,13 @@ export const StyledStage = styled.button(props => {
     padding-inline-end: ${spacing};
     @media (pointer: coarse) {
-      height: ${props.theme.base.sizes['touch-finger']};
+      height: ${hitArea['finger-min']};
       padding-inline-start: calc(2.25 * ${spacing});
     }
     ${StyledIcon} {
       margin-inline-end: 0.25rem;
-      color: ${props.theme.base.palette.success};
+      color: ${palette.success};
       &:last-child {
         margin-inline-end: 0;
@@ -62,19 +60,15 @@ export const StyledStage = styled.button(props => {
     }
     &:first-child {
-      border-top-left-radius: ${isRTL ? 0 : borderRadius};
-      border-top-right-radius: ${isRTL ? borderRadius : 0};
-      border-bottom-left-radius: ${isRTL ? 0 : borderRadius};
-      border-bottom-right-radius: ${isRTL ? borderRadius : 0};
+      border-top-${start}-radius: ${borderRadius};
+      border-bottom-${start}-radius: ${borderRadius};
       border-inline-start-width: ${thinBorderWidth};
       padding-inline-start: calc(${spacing});
     }
     &:last-child {
-      border-top-left-radius: ${isRTL ? borderRadius : 0};
-      border-top-right-radius: ${isRTL ? 0 : borderRadius};
-      border-bottom-left-radius: ${isRTL ? borderRadius : 0};
-      border-bottom-right-radius: ${isRTL ? 0 : borderRadius};
+      border-top-${end}-radius: ${borderRadius};
+      border-bottom-${end}-radius: ${borderRadius};
       border-inline-end-width: ${thinBorderWidth};
       padding-inline-end: calc(${spacing});
       min-width: calc(6.25 * ${spacing});
@@ -93,8 +87,8 @@ export const StyledStage = styled.button(props => {
       border-color: ${baseBorderColor};
       border-inline-end-width: ${thinBorderWidth};
       border-inline-start-width: 0;
-      border-top-width: ${isRTL ? 0 : thinBorderWidth};
-      border-bottom-width: ${isRTL ? thinBorderWidth : 0};
+      border-top-width: ${rtl ? 0 : thinBorderWidth};
+      border-bottom-width: ${rtl ? thinBorderWidth : 0};
       transform: rotateZ(45deg) skew(15deg, 15deg);
       @media (pointer: coarse) {
@@ -133,8 +127,8 @@ export const StyledStage = styled.button(props => {
     &:focus::before,
     &:focus + &::before {
       border-inline-end-width: ${thickBorderWidth};
-      border-top-width: ${isRTL ? 0 : thickBorderWidth};
-      border-bottom-width: ${isRTL ? thickBorderWidth : 0};
+      border-top-width: ${rtl ? 0 : thickBorderWidth};
+      border-bottom-width: ${rtl ? thickBorderWidth : 0};
     }
     &:first-child:focus {
@@ -151,15 +145,15 @@ export const StyledStage = styled.button(props => {
       border-width: ${thinBorderWidth} 0;
       ${StyledInnerStage} {
-        opacity: ${props.theme.base.transparency['transparent-3']};
+        opacity: ${transparency['transparent-3']};
       }
     }
     &:active::before,
     &:active + &::before {
       border-inline-end-width: ${thinBorderWidth};
-      border-top-width: ${isRTL ? 0 : thinBorderWidth};
-      border-bottom-width: ${isRTL ? thinBorderWidth : 0};
+      border-top-width: ${rtl ? 0 : thinBorderWidth};
+      border-bottom-width: ${rtl ? thinBorderWidth : 0};
     }
     &:first-child:active {
@@ -187,13 +181,13 @@ export const StyledStage = styled.button(props => {
       }
       &:active {
         ${StyledInnerStage} {
-          opacity: ${props.theme.base.transparency['transparent-3']};
+          opacity: ${transparency['transparent-3']};
         }
       }
     }
     &[aria-current] + &::before {
-      box-shadow: ${props.theme.base.shadow.low};
+      box-shadow: ${shadow.low};
     }
     &[aria-current] + &:focus::before {

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":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,iBAAiB,EACjB,gBAAgB,EAChB,UAAU,EACV,UAAU,EACX,MAAM,yBAAyB,CAAC;AAEjC,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE;IAC7C,OAAO,GAAG,CAAA;wBACY,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC;qBACjD,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;;GAEnD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,YAAY,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE7C,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,IAAI,CAAyB,KAAK,CAAC,EAAE;IAC1E,OAAO,GAAG,CAAA;;;;MAIN,KAAK,CAAC,QAAQ;QAChB,GAAG,CAAA;;;KAGF;GACF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE;IAC/C,MAAM,OAAO,GAAG,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC;IACzC,MAAM,WAAW,GAAG,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC;IACzD,MAAM,eAAe,GAAG,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC;IAChE,MAAM,YAAY,GAAG,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;IACvD,MAAM,eAAe,GAAG,WAAW,CAAC;IACpC,MAAM,gBAAgB,GAAG,UAAU,CAAC;IACpC,MAAM,gBAAgB,GAAG,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,eAAe,CAAC,CAAC;IACxE,MAAM,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC;IAEnC,OAAO,GAAG,CAAA;;;aAGC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,kBAAkB,CAAC;;;oBAGrC,eAAe;;;uBAGZ,OAAO;6BACD,OAAO;qCACC,OAAO;0BAClB,OAAO;;;gBAGjB,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC;0CACZ,OAAO;;;MAG3C,UAAU;;eAED,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO;;;;;;;MAOzC,gBAAgB;iBACL,gBAAgB;;;;gCAID,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,YAAY;iCACvB,KAAK,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;mCACtB,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,YAAY;oCACvB,KAAK,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;mCACzB,eAAe;mCACf,OAAO;;;;gCAIV,KAAK,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;iCACvB,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,YAAY;mCACtB,KAAK,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;oCACvB,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,YAAY;iCAC3B,eAAe;iCACf,OAAO;+BACT,OAAO;;;;;;;2BAOX,OAAO;4BACN,OAAO;4BACP,OAAO;6BACN,OAAO;;;sBAGd,eAAe;iCACJ,eAAe;;0BAEtB,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,eAAe;6BACxB,KAAK,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC;;;;8BAI1B,OAAO;+BACN,OAAO;8BACR,OAAO;+BACN,OAAO;;;;;;;sBAOhB,eAAe;;;;QAI7B,gBAAgB;;;;;;;;;;;sBAWF,WAAW;;;;sBAIX,gBAAgB;;;;;iCAKL,gBAAgB;0BACvB,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,gBAAgB;6BACzB,KAAK,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC;;;;mCAItB,gBAAgB;mCAChB,OAAO,MAAM,gBAAgB,MAAM,eAAe;;;;iCAIpD,gBAAgB;iCAChB,OAAO,MAAM,eAAe;;;;sBAIvC,eAAe;;QAE7B,gBAAgB;mBACL,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,eAAe,CAAC;;;;;;iCAMhC,eAAe;0BACtB,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,eAAe;6BACxB,KAAK,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC;;;;mCAIrB,eAAe;mCACf,OAAO;;;;iCAIT,eAAe;iCACf,OAAO;;;;;;QAMhC,gBAAgB;;;;;;UAMd,gBAAgB;qBACL,gBAAgB;;;;UAI3B,gBAAgB;qBACL,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,eAAe,CAAC;;;;;;oBAM/C,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG;;;;;;GAM5C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,WAAW,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE5C,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACzD,OAAO,GAAG,CAAA;wBACY,KAAK,CAAC,IAAI,CAAC,OAAO;;;GAGvC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC1D,OAAO,GAAG,CAAA;;6BAEiB,KAAK,CAAC,IAAI,CAAC,OAAO;gCACf,KAAK,CAAC,IAAI,CAAC,OAAO;;;;;GAK/C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,oBAAoB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAErD,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,EAAE,CAAwB,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,EAAE;IACjF,MAAM,SAAS,GAAG,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAAC;IACjG,MAAM,SAAS,GAAG,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC;IACnD,MAAM,UAAU,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC;IAC3C,MAAM,WAAW,GAAG,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAE5E,OAAO,GAAG,CAAA;;0BAEc,KAAK,CAAC,IAAI,CAAC,OAAO;aAC/B,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,kBAAkB,CAAC;;;;;;MAM7C,UAAU;gCACgB,KAAK,CAAC,IAAI,CAAC,OAAO;eACnC,SAAS;eACT,SAAS;6BACK,UAAU;;;MAGjC,UAAU;iBACC,WAAW;;GAEzB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,UAAU,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE3C,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,GAAG,CAAA;sBACf,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,UAAU;;CAEpE,CAAC;AAEF,WAAW,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE5C,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,IAAI,CAAwB,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,EAAE;IACxF,MAAM,WAAW,GAAG,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAC5E,OAAO,GAAG,CAAA;;;;;;;;MAQN,UAAU;eACD,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO;2BACd,KAAK,CAAC,IAAI,CAAC,OAAO;;;MAGvC,UAAU;iBACC,WAAW;;GAEzB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEhD,MAAM,CAAC,MAAM,qBAAqB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC7D,MAAM,QAAQ,GAAG,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;IACtF,OAAO,GAAG,CAAA;iBACK,QAAQ,CAAC,EAAE;eACb,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,eAAe,CAAC;GACpD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,qBAAqB,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport {\n calculateFontSize,\n defaultThemeProp,\n StyledIcon,\n StyledText\n} from '@pega/cosmos-react-core';\n\nexport const StyledStages = styled.div(props => {\n return css`\n background-color: ${props.theme.base.palette['primary-background']};\n border-radius: ${props.theme.base['border-radius']};\n width: 100%;\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(props => {\n const spacing = props.theme.base.spacing;\n const activeColor = props.theme.base.palette.interactive;\n const baseBorderColor = props.theme.base.palette['border-line'];\n const borderRadius = props.theme.base['border-radius'];\n const thinBorderWidth = '0.0625rem';\n const thickBorderWidth = '0.125rem';\n const baseTransparency = props.theme.base.transparency['transparent-2'];\n const isRTL = props.theme.base.rtl;\n\n return css`\n /* stylelint-disable no-descending-specificity /\n background-color: inherit;\n color: ${props.theme.base.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 min-width: calc(5.25 * ${spacing});\n padding-inline-start: calc(2 * ${spacing});\n padding-inline-end: ${spacing};\n\n @media (pointer: coarse) {\n height: ${props.theme.base.sizes['touch-finger']};\n padding-inline-start: calc(2.25 * ${spacing});\n }\n\n ${StyledIcon} {\n margin-inline-end: 0.25rem;\n color: ${props.theme.base.palette.success};\n\n &:last-child {\n margin-inline-end: 0;\n }\n }\n\n ${StyledInnerStage} {\n opacity: ${baseTransparency};\n }\n\n &:first-child {\n border-top-left-radius: ${isRTL ? 0 : borderRadius};\n border-top-right-radius: ${isRTL ? borderRadius : 0};\n border-bottom-left-radius: ${isRTL ? 0 : borderRadius};\n border-bottom-right-radius: ${isRTL ? borderRadius : 0};\n border-inline-start-width: ${thinBorderWidth};\n padding-inline-start: calc(${spacing});\n }\n\n &:last-child {\n border-top-left-radius: ${isRTL ? borderRadius : 0};\n border-top-right-radius: ${isRTL ? 0 : borderRadius};\n border-bottom-left-radius: ${isRTL ? borderRadius : 0};\n border-bottom-right-radius: ${isRTL ? 0 : borderRadius};\n border-inline-end-width: ${thinBorderWidth};\n padding-inline-end: calc(${spacing});\n min-width: calc(6.25 * ${spacing});\n }\n\n &:not(:first-child)::before {\n content: '';\n position: absolute;\n display: block;\n width: calc(2.25 * ${spacing});\n height: calc(2.25 * ${spacing});\n left: calc(-1.125 * ${spacing});\n right: calc(-1.125 * ${spacing});\n background-color: transparent;\n border-style: solid;\n border-color: ${baseBorderColor};\n border-inline-end-width: ${thinBorderWidth};\n border-inline-start-width: 0;\n border-top-width: ${isRTL ? 0 : thinBorderWidth};\n border-bottom-width: ${isRTL ? 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 left: calc(-1.375 * ${spacing});\n right: calc(-1.375 * ${spacing});\n transform: rotateZ(45deg) skew(20deg, 20deg);\n }\n }\n\n &:hover,\n &:hover::before {\n border-color: ${baseBorderColor};\n }\n\n &:hover {\n ${StyledInnerStage} {\n opacity: 1;\n }\n }\n\n &:focus,\n &:active,\n &:focus::before,\n &:active::before,\n &:focus + &::before,\n &:active + &::before {\n border-color: ${activeColor};\n }\n\n &:focus {\n border-width: ${thickBorderWidth} 0;\n }\n\n &:focus::before,\n &:focus + &::before {\n border-inline-end-width: ${thickBorderWidth};\n border-top-width: ${isRTL ? 0 : thickBorderWidth};\n border-bottom-width: ${isRTL ? thickBorderWidth : 0};\n }\n\n &:first-child:focus {\n border-inline-start-width: ${thickBorderWidth};\n padding-inline-start: calc(${spacing} - ${thickBorderWidth} + ${thinBorderWidth});\n }\n\n &:last-child:focus {\n border-inline-end-width: ${thickBorderWidth};\n padding-inline-end: calc(${spacing} - ${thinBorderWidth});\n }\n\n &:active {\n border-width: ${thinBorderWidth} 0;\n\n ${StyledInnerStage} {\n opacity: ${props.theme.base.transparency['transparent-3']};\n }\n }\n\n &:active::before,\n &:active + &::before {\n border-inline-end-width: ${thinBorderWidth};\n border-top-width: ${isRTL ? 0 : thinBorderWidth};\n border-bottom-width: ${isRTL ? thinBorderWidth : 0};\n }\n\n &:first-child:active {\n border-inline-start-width: ${thinBorderWidth};\n padding-inline-start: calc(${spacing});\n }\n\n &:last-child:active {\n border-inline-end-width: ${thinBorderWidth};\n padding-inline-end: calc(${spacing});\n }\n\n &[aria-current] {\n z-index: 2;\n\n ${StyledInnerStage} {\n font-weight: bold;\n opacity: 1;\n }\n\n &:hover {\n ${StyledInnerStage} {\n opacity: ${baseTransparency};\n }\n }\n &:active {\n ${StyledInnerStage} {\n opacity: ${props.theme.base.transparency['transparent-3']};\n }\n }\n }\n\n &[aria-current] + &::before {\n box-shadow: ${props.theme.base.shadow.low};\n }\n\n &[aria-current] + &:focus::before {\n box-shadow: none;\n }\n `;\n});\n\nStyledStage.defaultProps = defaultThemeProp;\n\nexport const StyledStagePopover = styled.div(({ theme }) => {\n return css`\n padding: calc(2 * ${theme.base.spacing});\n white-space: pre-line;\n width: 18rem;\n `;\n});\n\nStyledStagePopover.defaultProps = defaultThemeProp;\n\nexport const StyledStepsContainer = styled.ol(({ theme }) => {\n return css`\n list-style-type: none;\n margin-top: calc(1.5 * ${theme.base.spacing});\n margin-bottom: calc(2.5 * ${theme.base.spacing});\n\n &:empty {\n margin-bottom: 0;\n }\n `;\n});\n\nStyledStepsContainer.defaultProps = defaultThemeProp;\n\nexport const StyledStep = styled.li<{ complete: boolean }>(({ complete, theme }) => {\n const iconColor = complete ? theme.base.palette.success : theme.base.palette['foreground-color'];\n const iconWidth = complete ? '1.125rem' : '0.3rem';\n const iconMargin = complete ? 0 : '0.3rem';\n const textOpacity = complete ? theme.base.transparency['transparent-3'] : 1;\n\n return css`\n border-radius: 0;\n margin-bottom: calc(${theme.base.spacing});\n color: ${theme.base.palette['foreground-color']};\n\n &:last-child {\n margin-bottom: 0;\n }\n\n ${StyledIcon} {\n margin-inline-end: calc(${theme.base.spacing});\n color: ${iconColor};\n width: ${iconWidth};\n margin-inline-start: ${iconMargin};\n }\n\n ${StyledText} {\n opacity: ${textOpacity};\n }\n `;\n});\n\nStyledStep.defaultProps = defaultThemeProp;\n\nexport const StyledSteps = styled.div`\n background-color: ${props => props.theme.components.card.background};\n position: relative;\n`;\n\nStyledSteps.defaultProps = defaultThemeProp;\n\nexport const StyledInnerStep = styled.span<{ complete: boolean }>(({ complete, theme }) => {\n const textOpacity = complete ? theme.base.transparency['transparent-2'] : 1;\n return css`\n display: flex;\n width: 100%;\n text-align: start;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n\n ${StyledIcon} {\n color: ${theme.base.palette.success};\n margin-inline-end: ${theme.base.spacing};\n }\n\n ${StyledText} {\n opacity: ${textOpacity};\n }\n `;\n});\n\nStyledInnerStep.defaultProps = defaultThemeProp;\n\nexport const StyledDateTimeDisplay = styled.span(({ 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"]}
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';\n\nimport {\n calculateFontSize,\n defaultThemeProp,\n StyledIcon,\n StyledText,\n useDirection\n} from '@pega/cosmos-react-core';\n\nexport const StyledStages = styled.div(props => {\n return css`\n background-color: ${props.theme.base.palette['primary-background']};\n border-radius: ${props.theme.base['border-radius']};\n width: 100%;\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: {\n spacing,\n palette,\n 'hit-area': hitArea,\n shadow,\n transparency,\n 'border-radius': borderRadius\n }\n }\n }) => {\n const activeColor = palette.interactive;\n const baseBorderColor = palette['border-line'];\n const thinBorderWidth = '0.0625rem';\n const thickBorderWidth = '0.125rem';\n const baseTransparency = transparency['transparent-2'];\n const { rtl, start, end } = useDirection();\n\n return css`\n /* stylelint-disable no-descending-specificity /\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 min-width: calc(5.25 * ${spacing});\n padding-inline-start: calc(2 * ${spacing});\n padding-inline-end: ${spacing};\n\n @media (pointer: coarse) {\n height: ${hitArea['finger-min']};\n padding-inline-start: calc(2.25 * ${spacing});\n }\n\n ${StyledIcon} {\n margin-inline-end: 0.25rem;\n color: ${palette.success};\n\n &:last-child {\n margin-inline-end: 0;\n }\n }\n\n ${StyledInnerStage} {\n opacity: ${baseTransparency};\n }\n\n &:first-child {\n border-top-${start}-radius: ${borderRadius};\n border-bottom-${start}-radius: ${borderRadius};\n border-inline-start-width: ${thinBorderWidth};\n padding-inline-start: calc(${spacing});\n }\n\n &:last-child {\n border-top-${end}-radius: ${borderRadius};\n border-bottom-${end}-radius: ${borderRadius};\n border-inline-end-width: ${thinBorderWidth};\n padding-inline-end: calc(${spacing});\n min-width: calc(6.25 * ${spacing});\n }\n\n &:not(:first-child)::before {\n content: '';\n position: absolute;\n display: block;\n width: calc(2.25 * ${spacing});\n height: calc(2.25 * ${spacing});\n left: calc(-1.125 * ${spacing});\n right: calc(-1.125 * ${spacing});\n background-color: transparent;\n border-style: solid;\n border-color: ${baseBorderColor};\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 left: calc(-1.375 * ${spacing});\n right: calc(-1.375 * ${spacing});\n transform: rotateZ(45deg) skew(20deg, 20deg);\n }\n }\n\n &:hover,\n &:hover::before {\n border-color: ${baseBorderColor};\n }\n\n &:hover {\n ${StyledInnerStage} {\n opacity: 1;\n }\n }\n\n &:focus,\n &:active,\n &:focus::before,\n &:active::before,\n &:focus + &::before,\n &:active + &::before {\n border-color: ${activeColor};\n }\n\n &:focus {\n border-width: ${thickBorderWidth} 0;\n }\n\n &:focus::before,\n &:focus + &::before {\n border-inline-end-width: ${thickBorderWidth};\n border-top-width: ${rtl ? 0 : thickBorderWidth};\n border-bottom-width: ${rtl ? thickBorderWidth : 0};\n }\n\n &:first-child:focus {\n border-inline-start-width: ${thickBorderWidth};\n padding-inline-start: calc(${spacing} - ${thickBorderWidth} + ${thinBorderWidth});\n }\n\n &:last-child:focus {\n border-inline-end-width: ${thickBorderWidth};\n padding-inline-end: calc(${spacing} - ${thinBorderWidth});\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 + &::before {\n border-inline-end-width: ${thinBorderWidth};\n border-top-width: ${rtl ? 0 : thinBorderWidth};\n border-bottom-width: ${rtl ? thinBorderWidth : 0};\n }\n\n &:first-child:active {\n border-inline-start-width: ${thinBorderWidth};\n padding-inline-start: calc(${spacing});\n }\n\n &:last-child:active {\n border-inline-end-width: ${thinBorderWidth};\n padding-inline-end: calc(${spacing});\n }\n\n &[aria-current] {\n z-index: 2;\n\n ${StyledInnerStage} {\n font-weight: bold;\n opacity: 1;\n }\n\n &:hover {\n ${StyledInnerStage} {\n opacity: ${baseTransparency};\n }\n }\n &:active {\n ${StyledInnerStage} {\n opacity: ${transparency['transparent-3']};\n }\n }\n }\n\n &[aria-current] + &::before {\n box-shadow: ${shadow.low};\n }\n\n &[aria-current] + &:focus::before {\n box-shadow: none;\n }\n `;\n }\n);\n\nStyledStage.defaultProps = defaultThemeProp;\n\nexport const StyledStagePopover = styled.div(({ theme }) => {\n return css`\n padding: calc(2 * ${theme.base.spacing});\n white-space: pre-line;\n width: 18rem;\n `;\n});\n\nStyledStagePopover.defaultProps = defaultThemeProp;\n\nexport const StyledStepsContainer = styled.ol(({ theme }) => {\n return css`\n list-style-type: none;\n margin-top: calc(1.5 * ${theme.base.spacing});\n margin-bottom: calc(2.5 * ${theme.base.spacing});\n\n &:empty {\n margin-bottom: 0;\n }\n `;\n});\n\nStyledStepsContainer.defaultProps = defaultThemeProp;\n\nexport const StyledStep = styled.li<{ complete: boolean }>(({ complete, theme }) => {\n const iconColor = complete ? theme.base.palette.success : theme.base.palette['foreground-color'];\n const iconWidth = complete ? '1.125rem' : '0.3rem';\n const iconMargin = complete ? 0 : '0.3rem';\n const textOpacity = complete ? theme.base.transparency['transparent-3'] : 1;\n\n return css`\n border-radius: 0;\n margin-bottom: calc(${theme.base.spacing});\n color: ${theme.base.palette['foreground-color']};\n\n &:last-child {\n margin-bottom: 0;\n }\n\n ${StyledIcon} {\n margin-inline-end: calc(${theme.base.spacing});\n color: ${iconColor};\n width: ${iconWidth};\n margin-inline-start: ${iconMargin};\n }\n\n ${StyledText} {\n opacity: ${textOpacity};\n }\n `;\n});\n\nStyledStep.defaultProps = defaultThemeProp;\n\nexport const StyledSteps = styled.div`\n background-color: ${props => props.theme.components.card.background};\n position: relative;\n`;\n\nStyledSteps.defaultProps = defaultThemeProp;\n\nexport const StyledInnerStep = styled.span<{ complete: boolean }>(({ complete, theme }) => {\n const textOpacity = complete ? theme.base.transparency['transparent-2'] : 1;\n return css`\n display: flex;\n width: 100%;\n text-align: start;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n\n ${StyledIcon} {\n color: ${theme.base.palette.success};\n margin-inline-end: ${theme.base.spacing};\n }\n\n ${StyledText} {\n opacity: ${textOpacity};\n }\n `;\n});\n\nStyledInnerStep.defaultProps = defaultThemeProp;\n\nexport const StyledDateTimeDisplay = styled.span(({ 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"]}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Steps.d.ts","sourceRoot":"","sources":["../../../src/components/Stages/Steps.tsx"],"names":[],"mappings":"AAAA,~~OAAc~~,EAAmB,iBAAiB,EAAE,MAAM,OAAO,CAAC;~~AAIlE~~,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;~~AAG3C~~,UAAU,UAAU;IAClB,KAAK,CAAC,EAAE,SAAS,EAAE,CAAC;CACrB;AAED,QAAA,MAAM,KAAK,EAAE,iBAAiB,CAAC,UAAU,CAcxC,CAAC;AAEF,eAAe,KAAK,CAAC"}
1	+ {"version":3,"file":"Steps.d.ts","sourceRoot":"","sources":["../../../src/components/Stages/Steps.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAmB,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAM3D,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAK3C,UAAU,UAAU;IAClB,KAAK,CAAC,EAAE,SAAS,EAAE,CAAC;CACrB;AAED,QAAA,MAAM,KAAK,EAAE,iBAAiB,CAAC,UAAU,CAcxC,CAAC;AAEF,eAAe,KAAK,CAAC"}

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

@@ -1,12 +1,12 @@
-import React from 'react';
-import { Icon, Text, Grid } from '@pega/cosmos-react-core';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Icon, registerIcon, Text, Grid } from '@pega/cosmos-react-core';
+import * as checkIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/check.icon';
+import * as circleSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/circle-solid.icon';
 import { StyledStep, StyledStepsContainer } from './Stages.styles';
+registerIcon(checkIcon, circleSolidIcon);
 const Steps = ({ steps }) => {
-    return (React.createElement(StyledStepsContainer, null, steps &&
-        steps.map(({ id, name, complete }) => (React.createElement(StyledStep, { key: id, complete: complete },
-            React.createElement(Grid, { container: { cols: '1.625rem 1fr' } },
-                React.createElement(Icon, { name: complete ? 'check' : 'circle-solid' }),
-                React.createElement(Text, null, name)))))));
+    return (_jsx(StyledStepsContainer, { children: steps &&
+            steps.map(({ id, name, complete }) => (_jsx(StyledStep, { complete: complete, children: _jsxs(Grid, { container: { cols: '1.625rem 1fr' }, children: [_jsx(Icon, { name: complete ? 'check' : 'circle-solid' }, void 0), _jsx(Text, { children: name }, void 0)] }, void 0) }, id))) }, void 0));
 };
 export default Steps;
 //# sourceMappingURL=Steps.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Steps.js","sourceRoot":"","sources":["../../../src/components/Stages/Steps.tsx"],"names":[],"mappings":"~~AAAA,OAAO,KAA6C,MAAM,OAAO,CAAC~~;~~AAElE~~,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;~~AAG3D~~,OAAO,EAAE,UAAU,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;~~AAMnE~~,MAAM,KAAK,GAAkC,CAAC,EAAE,KAAK,EAA+B,EAAE,EAAE;IACtF,OAAO,CACL,~~oBAAC~~,oBAAoB,~~QAClB~~,KAAK;~~QACJ~~,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CACpC,~~oBAAC~~,UAAU,~~IAAC~~,~~GAAG~~,EAAE,~~EAAE,EAAE,~~QAAQ,~~EAAE,QAAQ;~~YACrC,~~oBAAC~~,IAAI,IAAC,SAAS,EAAE,EAAE,IAAI,EAAE,cAAc,EAAE~~;gBACvC~~,~~oBAAC~~,IAAI,IAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,cAAc,~~GAAI;gBACnD~~,~~oBAAC~~,IAAI,~~QAAE~~,IAAI,~~CAAQ~~,~~CACd~~,~~CACI~~,CACd,CAAC,~~CACiB~~,CACxB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,KAAK,CAAC","sourcesContent":["import ~~React,~~ { PropsWithoutRef, FunctionComponent } from 'react';\n\nimport { Icon, Text, Grid } from '@pega/cosmos-react-core';\n\nimport { StepProps } from './Stages.types';\nimport { StyledStep, StyledStepsContainer } from './Stages.styles';\n\ninterface StepsProps {\n steps?: StepProps[];\n}\n\nconst Steps: FunctionComponent<StepsProps> = ({ steps }: PropsWithoutRef<StepsProps>) => {\n return (\n <StyledStepsContainer>\n {steps &&\n steps.map(({ id, name, complete }) => (\n <StyledStep key={id} complete={complete}>\n <Grid container={{ cols: '1.625rem 1fr' }}>\n <Icon name={complete ? 'check' : 'circle-solid'} />\n <Text>{name}</Text>\n </Grid>\n </StyledStep>\n ))}\n </StyledStepsContainer>\n );\n};\n\nexport default Steps;\n"]}
1	+ {"version":3,"file":"Steps.js","sourceRoot":"","sources":["../../../src/components/Stages/Steps.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AACzE,OAAO,KAAK,SAAS,MAAM,8DAA8D,CAAC;AAC1F,OAAO,KAAK,eAAe,MAAM,qEAAqE,CAAC;AAGvG,OAAO,EAAE,UAAU,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAEnE,YAAY,CAAC,SAAS,EAAE,eAAe,CAAC,CAAC;AAMzC,MAAM,KAAK,GAAkC,CAAC,EAAE,KAAK,EAA+B,EAAE,EAAE;IACtF,OAAO,CACL,KAAC,oBAAoB,cAClB,KAAK;YACJ,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CACpC,KAAC,UAAU,IAAU,QAAQ,EAAE,QAAQ,YACrC,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,IAAI,EAAE,cAAc,EAAE,aACvC,KAAC,IAAI,IAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,cAAc,WAAI,EACnD,KAAC,IAAI,cAAE,IAAI,WAAQ,YACd,IAJQ,EAAE,CAKN,CACd,CAAC,WACiB,CACxB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,KAAK,CAAC","sourcesContent":["import { PropsWithoutRef, FunctionComponent } from 'react';\n\nimport { Icon, registerIcon, Text, Grid } from '@pega/cosmos-react-core';\nimport * as checkIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/check.icon';\nimport * as circleSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/circle-solid.icon';\n\nimport { StepProps } from './Stages.types';\nimport { StyledStep, StyledStepsContainer } from './Stages.styles';\n\nregisterIcon(checkIcon, circleSolidIcon);\n\ninterface StepsProps {\n steps?: StepProps[];\n}\n\nconst Steps: FunctionComponent<StepsProps> = ({ steps }: PropsWithoutRef<StepsProps>) => {\n return (\n <StyledStepsContainer>\n {steps &&\n steps.map(({ id, name, complete }) => (\n <StyledStep key={id} complete={complete}>\n <Grid container={{ cols: '1.625rem 1fr' }}>\n <Icon name={complete ? 'check' : 'circle-solid'} />\n <Text>{name}</Text>\n </Grid>\n </StyledStep>\n ))}\n </StyledStepsContainer>\n );\n};\n\nexport default Steps;\n"]}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"StepsContainer.d.ts","sourceRoot":"","sources":["../../../src/components/Stages/StepsContainer.tsx"],"names":[],"mappings":"AAAA,~~OAAc~~,EAAE,iBAAiB,EAAmB,MAAM,OAAO,CAAC;~~AAKlE~~,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;~~AAG7C~~,MAAM,WAAW,mBAAmB;IAClC,YAAY,EAAE,WAAW,CAAC,QAAQ,CAAC,CAAC;CACrC;AAED,QAAA,MAAM,cAAc,EAAE,iBAAiB,CAAC,mBAAmB,~~CAmB1D~~,CAAC;AAEF,eAAe,cAAc,CAAC"}
1	+ {"version":3,"file":"StepsContainer.d.ts","sourceRoot":"","sources":["../../../src/components/Stages/StepsContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAmB,MAAM,OAAO,CAAC;AAM3D,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAK7C,MAAM,WAAW,mBAAmB;IAClC,YAAY,EAAE,WAAW,CAAC,QAAQ,CAAC,CAAC;CACrC;AAED,QAAA,MAAM,cAAc,EAAE,iBAAiB,CAAC,mBAAmB,CAqB1D,CAAC;AAEF,eAAe,cAAc,CAAC"}

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

@@ -1,15 +1,11 @@
-import React from 'react';
-import { Flex, Icon, DateTimeDisplay, Text } from '@pega/cosmos-react-core';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Flex, Icon, registerIcon, DateTimeDisplay, Text } from '@pega/cosmos-react-core';
+import * as checkIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/check.icon';
 import Steps from './Steps';
 import { StyledDateTimeDisplay, StyledInnerStep, StyledSteps } from './Stages.styles';
+registerIcon(checkIcon);
 const StepsContainer = ({ currentStage }) => {
-    var _a, _b, _c, _d;
-    return (React.createElement(Flex, { as: StyledSteps, container: { direction: 'column' }, item: { grow: 1 } },
-        React.createElement(StyledInnerStep, { complete: (_a = currentStage[0]) === null || _a === void 0 ? void 0 : _a.complete },
-            ((_b = currentStage[0]) === null || _b === void 0 ? void 0 : _b.complete) && React.createElement(Icon, { name: 'check' }),
-            React.createElement(Text, { variant: 'h2' }, (_c = currentStage[0]) === null || _c === void 0 ? void 0 : _c.name)),
-        React.createElement(DateTimeDisplay, { as: StyledDateTimeDisplay, value: (_d = currentStage[0]) === null || _d === void 0 ? void 0 : _d.date, variant: 'relative', format: 'short' }),
-        React.createElement(Steps, { steps: currentStage[0].steps })));
+    return (_jsxs(Flex, { as: StyledSteps, container: { direction: 'column' }, item: { grow: 1 }, children: [_jsxs(StyledInnerStep, { complete: currentStage[0]?.complete, children: [currentStage[0]?.complete && _jsx(Icon, { name: 'check' }, void 0), _jsx(Text, { variant: 'h2', children: currentStage[0]?.name }, void 0)] }, void 0), currentStage[0]?.date && (_jsx(DateTimeDisplay, { as: StyledDateTimeDisplay, value: currentStage[0]?.date, variant: 'relative', format: 'short' }, void 0)), _jsx(Steps, { steps: currentStage[0].steps }, void 0)] }, void 0));
 };
 export default StepsContainer;
 //# sourceMappingURL=StepsContainer.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"StepsContainer.js","sourceRoot":"","sources":["../../../src/components/Stages/StepsContainer.tsx"],"names":[],"mappings":"~~AAAA,OAAO,KAA6C,MAAM,OAAO,CAAC~~;~~AAElE~~,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,eAAe,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;~~AAE5E~~,OAAO,KAAK,MAAM,SAAS,CAAC;AAE5B,OAAO,EAAE,qBAAqB,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;~~AAMtF~~,MAAM,cAAc,GAA2C,CAAC,EAC9D,YAAY,EACyB,EAAE,EAAE;;IACzC,OAAO,CACL,~~oBAAC~~,IAAI,IAAC,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE~~;QAC1E~~,~~oBAAC~~,eAAe,IAAC,QAAQ,EAAE,~~MAAA,~~YAAY,CAAC,CAAC,CAAC,~~0CAAE~~,QAAQ~~;YACjD~~,~~CAAA~~,~~MAAA,~~YAAY,CAAC,CAAC,CAAC,~~0CAAE~~,QAAQ,~~KAAI~~,~~oBAAC~~,IAAI,IAAC,IAAI,EAAC,OAAO,~~GAAG;YACnD~~,~~oBAAC~~,IAAI,IAAC,OAAO,EAAC,IAAI,~~IAAE~~,~~MAAA~~,YAAY,CAAC,CAAC,CAAC,~~0CAAE~~,IAAI,~~CAAQ~~,~~CACjC;QAClB~~,~~oBAAC~~,eAAe,IACd,EAAE,EAAE,qBAAqB,EACzB,KAAK,EAAE,~~MAAA,~~YAAY,CAAC,CAAC,CAAC,~~0CAAE~~,IAAI,EAC5B,OAAO,EAAC,UAAU,EAClB,MAAM,EAAC,OAAO,~~GACd;QAEF~~,~~oBAAC~~,KAAK,IAAC,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC,KAAK,~~GAAI~~,~~CAClC~~,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["import ~~React,~~ { FunctionComponent, PropsWithoutRef } from 'react';\n\nimport { Flex, Icon, DateTimeDisplay, Text } from '@pega/cosmos-react-core';\n\nimport Steps from './Steps';\nimport { StagesProps } from './Stages.types';\nimport { StyledDateTimeDisplay, StyledInnerStep, StyledSteps } from './Stages.styles';\n\nexport interface StepsContainerProps {\n currentStage: StagesProps['stages'];\n}\n\nconst StepsContainer: FunctionComponent<StepsContainerProps> = ({\n currentStage\n}: PropsWithoutRef<StepsContainerProps>) => {\n return (\n <Flex as={StyledSteps} container={{ direction: 'column' }} item={{ grow: 1 }}>\n <StyledInnerStep complete={currentStage[0]?.complete}>\n {currentStage[0]?.complete && <Icon name='check' />}\n <Text variant='h2'>{currentStage[0]?.name}</Text>\n </StyledInnerStep>\n <DateTimeDisplay\n as={StyledDateTimeDisplay}\n value={currentStage[0]?.date}\n variant='relative'\n format='short'\n />\n\n <Steps steps={currentStage[0].steps} />\n </Flex>\n );\n};\n\nexport default StepsContainer;\n"]}
1	+ {"version":3,"file":"StepsContainer.js","sourceRoot":"","sources":["../../../src/components/Stages/StepsContainer.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,YAAY,EAAE,eAAe,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC1F,OAAO,KAAK,SAAS,MAAM,8DAA8D,CAAC;AAE1F,OAAO,KAAK,MAAM,SAAS,CAAC;AAE5B,OAAO,EAAE,qBAAqB,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAEtF,YAAY,CAAC,SAAS,CAAC,CAAC;AAMxB,MAAM,cAAc,GAA2C,CAAC,EAC9D,YAAY,EACyB,EAAE,EAAE;IACzC,OAAO,CACL,MAAC,IAAI,IAAC,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,aAC1E,MAAC,eAAe,IAAC,QAAQ,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,QAAQ,aACjD,YAAY,CAAC,CAAC,CAAC,EAAE,QAAQ,IAAI,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,WAAG,EACnD,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,YAAY,CAAC,CAAC,CAAC,EAAE,IAAI,WAAQ,YACjC,EACjB,YAAY,CAAC,CAAC,CAAC,EAAE,IAAI,IAAI,CACxB,KAAC,eAAe,IACd,EAAE,EAAE,qBAAqB,EACzB,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,IAAI,EAC5B,OAAO,EAAC,UAAU,EAClB,MAAM,EAAC,OAAO,WACd,CACH,EAED,KAAC,KAAK,IAAC,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC,KAAK,WAAI,YAClC,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["import { FunctionComponent, PropsWithoutRef } from 'react';\n\nimport { Flex, Icon, registerIcon, DateTimeDisplay, Text } from '@pega/cosmos-react-core';\nimport * as checkIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/check.icon';\n\nimport Steps from './Steps';\nimport { StagesProps } from './Stages.types';\nimport { StyledDateTimeDisplay, StyledInnerStep, StyledSteps } from './Stages.styles';\n\nregisterIcon(checkIcon);\n\nexport interface StepsContainerProps {\n currentStage: StagesProps['stages'];\n}\n\nconst StepsContainer: FunctionComponent<StepsContainerProps> = ({\n currentStage\n}: PropsWithoutRef<StepsContainerProps>) => {\n return (\n <Flex as={StyledSteps} container={{ direction: 'column' }} item={{ grow: 1 }}>\n <StyledInnerStep complete={currentStage[0]?.complete}>\n {currentStage[0]?.complete && <Icon name='check' />}\n <Text variant='h2'>{currentStage[0]?.name}</Text>\n </StyledInnerStep>\n {currentStage[0]?.date && (\n <DateTimeDisplay\n as={StyledDateTimeDisplay}\n value={currentStage[0]?.date}\n variant='relative'\n format='short'\n />\n )}\n\n <Steps steps={currentStage[0].steps} />\n </Flex>\n );\n};\n\nexport default StepsContainer;\n"]}

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

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

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

	@@ -0,0 +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,SAAU,SAAQ,IAAI,CAAC,iBAAiB,CAAC,MAAM,CAAC,EAAE,OAAO,GAAG,aAAa,GAAG,UAAU,CAAC;IAC/F,sBAAsB,EAAE,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;CACzE;6FAEmF,SAAS;AAA7F,wBA4EE"}

package/lib/components/Stakeholders/StakeholderForm.js ADDED Viewed

@@ -0,0 +1,47 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { ComboBox, RadioButtonGroup, RadioButton, Flex, useI18n, Input, getFocusables } from '@pega/cosmos-react-core';
+export default ({ roles, currentRole, renderer: Renderer, setSelectedRoleNameRef }) => {
+    const contentRef = useRef(null);
+    const t = useI18n();
+    const [selectedRoleName, setSelectedRoleName] = useState(() => {
+        if (roles) {
+            return (currentRole ? roles.find(role => role.name === currentRole.name) : roles[0])?.name;
+        }
+    });
+    let control = null;
+    if (roles) {
+        const label = t('role');
+        if (roles.length > 3) {
+            const items = roles.map(role => {
+                return {
+                    id: role.name,
+                    primary: role.name,
+                    selected: role.name === selectedRoleName
+                };
+            });
+            const selected = items.find(item => item.selected);
+            control = (_jsx(ComboBox, { label: label, selected: selected ? { items: { id: selected.id, text: selected.primary } } : undefined, menu: {
+                    mode: 'single-select',
+                    items,
+                    onItemClick: setSelectedRoleName
+                } }, void 0));
+        }
+        else {
+            control = (_jsx(RadioButtonGroup, { label: label, name: 'role', inline: true, onChange: e => {
+                    setSelectedRoleName(e.target.value);
+                }, children: roles.map(role => (_jsx(RadioButton, { label: role.name, value: role.name, checked: role.name === selectedRoleName }, role.name))) }, void 0));
+        }
+    }
+    else if (currentRole) {
+        _jsx(Input, { label: t('role'), value: currentRole.name, info: currentRole.description }, void 0);
+    }
+    useEffect(() => {
+        getFocusables(contentRef)[0].focus();
+    }, []);
+    useEffect(() => {
+        setSelectedRoleNameRef(selectedRoleName);
+    }, [selectedRoleName]);
+    return (_jsxs(Flex, { container: { direction: 'column', gap: 2 }, ref: contentRef, children: [control, _jsx(Renderer, { selectedRoleName: selectedRoleName }, void 0)] }, void 0));
+};
+//# sourceMappingURL=StakeholderForm.js.map

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

@@ -0,0 +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 extends Pick<StakeholdersProps['form'], 'roles' | 'currentRole' | 'renderer'> {\n setSelectedRoleNameRef: (selectedRoleName?: string | undefined) => void;\n}\n\nexport default ({ roles, currentRole, renderer: Renderer, setSelectedRoleNameRef }: 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('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 <Input label={t('role')} value={currentRole.name} info={currentRole.description} />;\n }\n\n useEffect(() => {\n getFocusables(contentRef)[0].focus();\n }, []);\n\n useEffect(() => {\n setSelectedRoleNameRef(selectedRoleName);\n }, [selectedRoleName]);\n\n return (\n <Flex container={{ direction: 'column', gap: 2 }} ref={contentRef}>\n {control}\n <Renderer selectedRoleName={selectedRoleName} />\n </Flex>\n );\n};\n"]}

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

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

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

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"Stakeholders.d.ts","sourceRoot":"","sources":["../../../src/components/Stakeholders/Stakeholders.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EASlB,MAAM,OAAO,CAAC;AAoBf,OAAO,KAAK,EAAU,YAAY,EAA0B,MAAM,yBAAyB,CAAC;AAE5F,OAAO,KAAK,EAAQ,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAmBpE,QAAA,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,GAAG,YAAY,CAyTrE,CAAC;AAEF,eAAe,YAAY,CAAC"}