@pega/cosmos-react-core 9.0.0-build.29.13 → 9.0.0-build.29.15
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.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HorizontalFormProgress.d.ts","sourceRoot":"","sources":["../../../src/components/MultiStepForm/HorizontalFormProgress.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,iBAAiB,EAAiB,MAAM,OAAO,CAAC;AAG9D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAiBhD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAIhE,UAAU,iBAAiB;IACzB,KAAK,EAAE,kBAAkB,CAAC,OAAO,CAAC,CAAC;IACnC,aAAa,EAAE,kBAAkB,CAAC,eAAe,CAAC,CAAC;IACnD,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,QAAA,MAAM,sBAAsB,EAAE,iBAAiB,CAAC,iBAAiB,GAAG,YAAY,
|
|
1
|
+
{"version":3,"file":"HorizontalFormProgress.d.ts","sourceRoot":"","sources":["../../../src/components/MultiStepForm/HorizontalFormProgress.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,iBAAiB,EAAiB,MAAM,OAAO,CAAC;AAG9D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAiBhD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAIhE,UAAU,iBAAiB;IACzB,KAAK,EAAE,kBAAkB,CAAC,OAAO,CAAC,CAAC;IACnC,aAAa,EAAE,kBAAkB,CAAC,eAAe,CAAC,CAAC;IACnD,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,QAAA,MAAM,sBAAsB,EAAE,iBAAiB,CAAC,iBAAiB,GAAG,YAAY,CAyM/E,CAAC;AAEF,eAAe,sBAAsB,CAAC"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
2
|
import { remToPx, stripUnit } from 'polished';
|
|
3
3
|
import { useEffect, useRef, useState } from 'react';
|
|
4
|
-
import { useArrows, useElement, useI18n, useTheme } from '../../hooks';
|
|
4
|
+
import { useArrows, useDirection, useElement, useI18n, useTheme } from '../../hooks';
|
|
5
5
|
import { tryCatch } from '../../utils';
|
|
6
6
|
import Flex from '../Flex';
|
|
7
7
|
import Text from '../Text';
|
|
@@ -23,11 +23,12 @@ const HorizontalFormProgress = ({ steps, currentStepId, showStepNames = false, .
|
|
|
23
23
|
const [stepEls, setStepEls] = useState({});
|
|
24
24
|
const stepsRef = useRef(null);
|
|
25
25
|
const theme = useTheme();
|
|
26
|
+
const { rtl } = useDirection();
|
|
26
27
|
let popoverPlacement = 'bottom';
|
|
27
28
|
if (curIdx === 0)
|
|
28
|
-
popoverPlacement = 'bottom-start';
|
|
29
|
+
popoverPlacement = rtl ? 'bottom-end' : 'bottom-start';
|
|
29
30
|
else if (curIdx === steps.length - 1)
|
|
30
|
-
popoverPlacement = 'bottom-end';
|
|
31
|
+
popoverPlacement = rtl ? 'bottom-start' : 'bottom-end';
|
|
31
32
|
useArrows(stepsRef, {
|
|
32
33
|
selector: '[data-step-marker]',
|
|
33
34
|
dir: 'left-right',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HorizontalFormProgress.js","sourceRoot":"","sources":["../../../src/components/MultiStepForm/HorizontalFormProgress.tsx"],"names":[],"mappings":"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","sourcesContent":["import { remToPx, stripUnit } from 'polished';\nimport { useEffect, useRef, useState } from 'react';\nimport type { FunctionComponent, CSSProperties } from 'react';\n\nimport { useArrows, useElement, useI18n, useTheme } from '../../hooks';\nimport type { ForwardProps } from '../../types';\nimport { tryCatch } from '../../utils';\nimport Flex from '../Flex';\nimport Text from '../Text';\nimport Tooltip from '../Tooltip';\nimport Button from '../Button';\nimport InfoDialog from '../Dialog/InfoDialog';\n\nimport {\n CurrentStepPopover,\n StepMarker,\n StyledBar,\n StyledFill,\n StyledFormProgress,\n StyledHorizontalStepText,\n StyleHorizontalStepMarkers\n} from './FormProgress.styles';\nimport type { MultiStepFormProps } from './MultiStepForm.types';\nimport VerticalFormProgress from './VerticalFormProgress';\nimport { useFormProgressOverflow } from './useFormProgressOverflow';\n\ninterface FormProgressProps {\n steps: MultiStepFormProps['steps'];\n currentStepId: MultiStepFormProps['currentStepId'];\n showStepNames?: boolean;\n}\n\nconst HorizontalFormProgress: FunctionComponent<FormProgressProps & ForwardProps> = ({\n steps,\n currentStepId,\n showStepNames = false,\n ...restProps\n}) => {\n const t = useI18n();\n\n const [stepsDialogButtonEl, setStepsDialogButtonEl] = useElement<HTMLButtonElement>();\n const [showStepsDialog, setShowStepsDialog] = useState(false);\n\n const { ref: formProgressRef, state: stepsAreOverflowing } = useFormProgressOverflow(\n steps.length,\n showStepNames\n );\n\n const curIdx = steps.findIndex(step => step.id === currentStepId);\n const curStep = steps[curIdx];\n const fillScale = curIdx / (steps.length - 1);\n\n const [currentStepEl, setCurrentStepEl] = useElement();\n const [stepEls, setStepEls] = useState<Record<string, HTMLElement>>({});\n const stepsRef = useRef(null);\n const theme = useTheme();\n\n let popoverPlacement: 'bottom' | 'bottom-start' | 'bottom-end' = 'bottom';\n if (curIdx === 0) popoverPlacement = 'bottom-start';\n else if (curIdx === steps.length - 1) popoverPlacement = 'bottom-end';\n\n useArrows(stepsRef, {\n selector: '[data-step-marker]',\n dir: 'left-right',\n initialFocusElement: currentStepEl\n });\n\n useArrows(stepsRef, {\n selector: '[data-step-marker]',\n cycle: false,\n dir: 'up-down',\n initialFocusElement: currentStepEl\n });\n\n useEffect(() => {\n if (stepEls[curStep.id] && stepEls[curStep.id] !== currentStepEl) {\n setCurrentStepEl(stepEls[curStep.id]);\n }\n }, [Object.keys(stepEls), curStep]);\n\n useEffect(() => {\n if (!stepsAreOverflowing) {\n setShowStepsDialog(false);\n }\n }, [stepsAreOverflowing]);\n\n const numberOfSteps = steps.length;\n\n return (\n <StyledFormProgress\n ref={formProgressRef}\n {...restProps}\n container={{ alignItems: 'center' }}\n showStepNames={showStepNames}\n >\n <CurrentStepPopover\n show={!showStepNames}\n target={currentStepEl}\n placement={popoverPlacement}\n strategy='absolute'\n portal={false}\n hideOnTargetHidden\n modifiers={[\n {\n name: 'offset',\n options: {\n offset: [\n 0,\n tryCatch(\n () => stripUnit(remToPx(theme.base.spacing)),\n () => 8\n )\n ]\n }\n },\n {\n name: 'placeAndContain',\n enabled: false\n },\n {\n name: 'flip',\n enabled: false\n },\n {\n name: 'preventOverflow',\n options: {\n padding: 0\n }\n }\n ]}\n >\n <Text variant='h4'>{curStep.name}</Text>\n </CurrentStepPopover>\n\n {stepsAreOverflowing ? (\n <div>\n <Button\n ref={setStepsDialogButtonEl}\n variant='link'\n onClick={() => {\n setShowStepsDialog(true);\n }}\n >\n {t('step_num', [curIdx + 1, numberOfSteps])}\n </Button>\n <Text variant='h4'>{curStep.name}</Text>\n {stepsDialogButtonEl && showStepsDialog && (\n <InfoDialog\n heading={t('steps')}\n target={stepsDialogButtonEl}\n onDismiss={() => {\n setShowStepsDialog(false);\n }}\n placement='bottom-start'\n >\n <VerticalFormProgress steps={steps} currentStepId={currentStepId} />\n </InfoDialog>\n )}\n </div>\n ) : (\n <>\n <Flex\n ref={stepsRef}\n as={StyleHorizontalStepMarkers}\n container={{ justify: 'between', alignItems: 'start' }}\n item={{ grow: 1 }}\n showStepNames={showStepNames}\n >\n {steps.map((step, index) => {\n const isCurrent = index === curIdx;\n return (\n <li key={step.id}>\n <StepMarker\n ref={(el: HTMLElement | null) => {\n setStepEls(curr => {\n const newEls = { ...curr };\n if (!el && newEls[step.id]) {\n delete newEls[step.id];\n return newEls;\n }\n if (el) return { ...newEls, [step.id]: el };\n return newEls;\n });\n }}\n id={step.id}\n data-step-marker=''\n aria-label={`${step.name} - ${t('step_num', [index + 1, steps.length])}`}\n aria-current={isCurrent ? 'step' : undefined}\n tabIndex={isCurrent ? 0 : -1}\n current={isCurrent}\n depth={step.depth}\n completed={step.completed}\n onClick={step.onMarkerClick}\n clickable={!!step.onMarkerClick && !isCurrent}\n >\n {!showStepNames && !isCurrent && (\n <Tooltip\n target={stepEls[step.id]}\n showDelay='none'\n hideDelay='short'\n describeTarget={false}\n >\n {step.name}\n </Tooltip>\n )}\n </StepMarker>\n {showStepNames &&\n (!!step.onMarkerClick && !isCurrent ? (\n <Button\n variant='link'\n onClick={step.onMarkerClick}\n as={StyledHorizontalStepText}\n tabIndex={-1}\n >\n {step.name}\n </Button>\n ) : (\n <Text variant={isCurrent ? 'h3' : undefined} as={StyledHorizontalStepText}>\n {step.name}\n </Text>\n ))}\n </li>\n );\n })}\n </Flex>\n <StyledBar shifted={showStepNames}>\n <StyledFill style={{ '--fillScale': fillScale } as CSSProperties} />\n </StyledBar>\n </>\n )}\n </StyledFormProgress>\n );\n};\n\nexport default HorizontalFormProgress;\n"]}
|
|
1
|
+
{"version":3,"file":"HorizontalFormProgress.js","sourceRoot":"","sources":["../../../src/components/MultiStepForm/HorizontalFormProgress.tsx"],"names":[],"mappings":"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","sourcesContent":["import { remToPx, stripUnit } from 'polished';\nimport { useEffect, useRef, useState } from 'react';\nimport type { FunctionComponent, CSSProperties } from 'react';\n\nimport { useArrows, useDirection, useElement, useI18n, useTheme } from '../../hooks';\nimport type { ForwardProps } from '../../types';\nimport { tryCatch } from '../../utils';\nimport Flex from '../Flex';\nimport Text from '../Text';\nimport Tooltip from '../Tooltip';\nimport Button from '../Button';\nimport InfoDialog from '../Dialog/InfoDialog';\n\nimport {\n CurrentStepPopover,\n StepMarker,\n StyledBar,\n StyledFill,\n StyledFormProgress,\n StyledHorizontalStepText,\n StyleHorizontalStepMarkers\n} from './FormProgress.styles';\nimport type { MultiStepFormProps } from './MultiStepForm.types';\nimport VerticalFormProgress from './VerticalFormProgress';\nimport { useFormProgressOverflow } from './useFormProgressOverflow';\n\ninterface FormProgressProps {\n steps: MultiStepFormProps['steps'];\n currentStepId: MultiStepFormProps['currentStepId'];\n showStepNames?: boolean;\n}\n\nconst HorizontalFormProgress: FunctionComponent<FormProgressProps & ForwardProps> = ({\n steps,\n currentStepId,\n showStepNames = false,\n ...restProps\n}) => {\n const t = useI18n();\n\n const [stepsDialogButtonEl, setStepsDialogButtonEl] = useElement<HTMLButtonElement>();\n const [showStepsDialog, setShowStepsDialog] = useState(false);\n\n const { ref: formProgressRef, state: stepsAreOverflowing } = useFormProgressOverflow(\n steps.length,\n showStepNames\n );\n\n const curIdx = steps.findIndex(step => step.id === currentStepId);\n const curStep = steps[curIdx];\n const fillScale = curIdx / (steps.length - 1);\n\n const [currentStepEl, setCurrentStepEl] = useElement();\n const [stepEls, setStepEls] = useState<Record<string, HTMLElement>>({});\n const stepsRef = useRef(null);\n const theme = useTheme();\n const { rtl } = useDirection();\n\n let popoverPlacement: 'bottom' | 'bottom-start' | 'bottom-end' = 'bottom';\n if (curIdx === 0) popoverPlacement = rtl ? 'bottom-end' : 'bottom-start';\n else if (curIdx === steps.length - 1) popoverPlacement = rtl ? 'bottom-start' : 'bottom-end';\n\n useArrows(stepsRef, {\n selector: '[data-step-marker]',\n dir: 'left-right',\n initialFocusElement: currentStepEl\n });\n\n useArrows(stepsRef, {\n selector: '[data-step-marker]',\n cycle: false,\n dir: 'up-down',\n initialFocusElement: currentStepEl\n });\n\n useEffect(() => {\n if (stepEls[curStep.id] && stepEls[curStep.id] !== currentStepEl) {\n setCurrentStepEl(stepEls[curStep.id]);\n }\n }, [Object.keys(stepEls), curStep]);\n\n useEffect(() => {\n if (!stepsAreOverflowing) {\n setShowStepsDialog(false);\n }\n }, [stepsAreOverflowing]);\n\n const numberOfSteps = steps.length;\n\n return (\n <StyledFormProgress\n ref={formProgressRef}\n {...restProps}\n container={{ alignItems: 'center' }}\n showStepNames={showStepNames}\n >\n <CurrentStepPopover\n show={!showStepNames}\n target={currentStepEl}\n placement={popoverPlacement}\n strategy='absolute'\n portal={false}\n hideOnTargetHidden\n modifiers={[\n {\n name: 'offset',\n options: {\n offset: [\n 0,\n tryCatch(\n () => stripUnit(remToPx(theme.base.spacing)),\n () => 8\n )\n ]\n }\n },\n {\n name: 'placeAndContain',\n enabled: false\n },\n {\n name: 'flip',\n enabled: false\n },\n {\n name: 'preventOverflow',\n options: {\n padding: 0\n }\n }\n ]}\n >\n <Text variant='h4'>{curStep.name}</Text>\n </CurrentStepPopover>\n\n {stepsAreOverflowing ? (\n <div>\n <Button\n ref={setStepsDialogButtonEl}\n variant='link'\n onClick={() => {\n setShowStepsDialog(true);\n }}\n >\n {t('step_num', [curIdx + 1, numberOfSteps])}\n </Button>\n <Text variant='h4'>{curStep.name}</Text>\n {stepsDialogButtonEl && showStepsDialog && (\n <InfoDialog\n heading={t('steps')}\n target={stepsDialogButtonEl}\n onDismiss={() => {\n setShowStepsDialog(false);\n }}\n placement='bottom-start'\n >\n <VerticalFormProgress steps={steps} currentStepId={currentStepId} />\n </InfoDialog>\n )}\n </div>\n ) : (\n <>\n <Flex\n ref={stepsRef}\n as={StyleHorizontalStepMarkers}\n container={{ justify: 'between', alignItems: 'start' }}\n item={{ grow: 1 }}\n showStepNames={showStepNames}\n >\n {steps.map((step, index) => {\n const isCurrent = index === curIdx;\n return (\n <li key={step.id}>\n <StepMarker\n ref={(el: HTMLElement | null) => {\n setStepEls(curr => {\n const newEls = { ...curr };\n if (!el && newEls[step.id]) {\n delete newEls[step.id];\n return newEls;\n }\n if (el) return { ...newEls, [step.id]: el };\n return newEls;\n });\n }}\n id={step.id}\n data-step-marker=''\n aria-label={`${step.name} - ${t('step_num', [index + 1, steps.length])}`}\n aria-current={isCurrent ? 'step' : undefined}\n tabIndex={isCurrent ? 0 : -1}\n current={isCurrent}\n depth={step.depth}\n completed={step.completed}\n onClick={step.onMarkerClick}\n clickable={!!step.onMarkerClick && !isCurrent}\n >\n {!showStepNames && !isCurrent && (\n <Tooltip\n target={stepEls[step.id]}\n showDelay='none'\n hideDelay='short'\n describeTarget={false}\n >\n {step.name}\n </Tooltip>\n )}\n </StepMarker>\n {showStepNames &&\n (!!step.onMarkerClick && !isCurrent ? (\n <Button\n variant='link'\n onClick={step.onMarkerClick}\n as={StyledHorizontalStepText}\n tabIndex={-1}\n >\n {step.name}\n </Button>\n ) : (\n <Text variant={isCurrent ? 'h3' : undefined} as={StyledHorizontalStepText}>\n {step.name}\n </Text>\n ))}\n </li>\n );\n })}\n </Flex>\n <StyledBar shifted={showStepNames}>\n <StyledFill style={{ '--fillScale': fillScale } as CSSProperties} />\n </StyledBar>\n </>\n )}\n </StyledFormProgress>\n );\n};\n\nexport default HorizontalFormProgress;\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pega/cosmos-react-core",
|
|
3
|
-
"version": "9.0.0-build.29.
|
|
3
|
+
"version": "9.0.0-build.29.15",
|
|
4
4
|
"description": "Cosmos is a visual design system and UI component collection. Its goal is to empower application developers in their pursuit to create engaging and rewarding user experiences.",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE",
|
|
6
6
|
"author": "Pegasystems",
|