npm - @pega/cosmos-react-core - Versions diffs - 9.11.0 → 9.12.0 - Mend

@pega/cosmos-react-core 9.11.0 → 9.12.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 (32) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"MultiStepForm.js","sourceRoot":"","sources":["../../../src/components/MultiStepForm/MultiStepForm.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useRef, useEffect } from 'react';\nimport type { PropsWithoutRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n useAfterInitialEffect,\n useUID,\n useI18n,\n usePrevious,\n useBreakpoint,\n useTheme,\n useConsolidatedRef,\n useConfiguration\n} from '../../hooks';\nimport type { ForwardRefForwardPropsComponent } from '../../types';\nimport { focusNonInteractiveElement, isInstance } from '../../utils';\nimport { calculateFontSize } from '../../styles';\nimport Text from '../Text';\nimport HTML from '../HTML';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\nimport Grid, { StyledGrid } from '../Grid';\nimport { defaultThemeProp } from '../../theme';\nimport Progress from '../Progress';\nimport ResponsiveActions from '../ResponsiveActions';\n\nimport type { MultiStepFormProps } from './MultiStepForm.types';\nimport VerticalFormProgress from './VerticalFormProgress';\nimport HorizontalFormProgress from './HorizontalFormProgress';\n\nexport const StyledForm = styled.form<{ actions?: boolean; heading?: boolean }>(\n ({ actions, heading, theme }) => {\n return css`\n & > ${StyledGrid} {\n position: relative;\n\n ${actions &&\n css`\n padding-block-end: calc(2 * ${theme.base.spacing});\n `}\n\n ${heading &&\n css`\n padding-block-start: calc(2 * ${theme.base.spacing});\n `}\n }\n\n &:focus-visible {\n outline: none;\n box-shadow: ${theme.base.shadow.focus};\n }\n `;\n }\n);\n\nStyledForm.defaultProps = defaultThemeProp;\n\nexport const StyledFormContent = styled.div``;\n\nexport const StyledInstructionText = styled(Grid)`\n /* Prevent instruction text from contributing to modal width calculation /\n width: 0;\n min-width: 100%;\n`;\n\nexport const StyledRequiredFieldLegend = styled(Text)(({ theme }) => {\n const {\n base: {\n 'font-size': fontSize,\n 'font-scale': fontScale,\n palette: { urgent }\n }\n } = theme;\n const { xxs: infoFontSize } = calculateFontSize(fontSize, fontScale);\n\n return css`\n font-size: ${infoFontSize};\n font-style: italic;\n\n &::before {\n display: 'inline';\n content: '\\\\00a0';\n vertical-align: top;\n color: ${urgent};\n }\n `;\n});\n\nStyledRequiredFieldLegend.defaultProps = defaultThemeProp;\n\nconst MultiStepForm: ForwardRefForwardPropsComponent<MultiStepFormProps> = forwardRef(\n function MultiStepForm(\n {\n currentStepId,\n steps,\n heading,\n progress,\n stepIndicator: stepIndicatorProp,\n showStepNames = false,\n ...restProps\n }: PropsWithoutRef<MultiStepFormProps>,\n ref: MultiStepFormProps['ref']\n ) {\n const showHorizontalStepNames = stepIndicatorProp === 'horizontal' ? showStepNames : undefined;\n\n const multiStepRef = useConsolidatedRef<HTMLFormElement>(ref);\n const headingRef = useRef<HTMLHeadingElement>(null);\n const progressIndicatorRef = useRef<HTMLDivElement>(null);\n const multiStepFormContentRef = useRef<HTMLDivElement>(null);\n const multiStepActionsRef = useRef<HTMLDivElement>(null);\n\n const { loadedRef } = useConfiguration();\n const previousId = usePrevious(currentStepId);\n const currentStep = steps.find(step => step.id === currentStepId)!;\n const headingId = useUID();\n const descriptionId = useUID();\n const t = useI18n();\n const {\n base: { 'content-width': contentWidth }\n } = useTheme();\n\n const isSmallOrAbove = useBreakpoint('sm', { breakpointRef: multiStepRef });\n\n const stepIndicator = (() => {\n if (stepIndicatorProp === 'none' \|\| steps.length < 2) return 'none';\n\n if (!isSmallOrAbove) return 'horizontal';\n\n return stepIndicatorProp ?? 'horizontal';\n })();\n\n const setFocus = () => {\n if (!loadedRef.current) {\n loadedRef.current = true;\n return;\n }\n\n if (progress) return;\n\n if (stepIndicator !== 'none' && progressIndicatorRef.current) {\n const focusables = [\n ...progressIndicatorRef.current.querySelectorAll(`[id=\"${currentStepId}\"]`)\n ] as HTMLElement[];\n focusables[0]?.focus();\n } else if (headingRef.current) {\n focusNonInteractiveElement(headingRef.current);\n } else if (multiStepRef.current) {\n const containerEl = multiStepRef.current.closest('[data-focusable-form-container]');\n const headingEl = containerEl?.querySelector('[data-focusable-form-heading]');\n if (isInstance(headingEl, HTMLElement)) {\n focusNonInteractiveElement(headingEl);\n } else {\n let label: string \| undefined;\n if (heading && currentStep.name) {\n label = `${heading} - ${currentStep.name}`;\n } else if (currentStep.name) {\n label = currentStep.name;\n } else if (heading) {\n label = heading;\n }\n\n focusNonInteractiveElement(multiStepRef.current, label);\n }\n }\n };\n\n // Set focus if the current step id updates\n useEffect(() => {\n if (previousId !== currentStepId) {\n setFocus();\n }\n }, [currentStepId, previousId]);\n\n // Set focus if the form content updates while focus is within the actions region of the form\n useAfterInitialEffect(() => {\n if (\n multiStepActionsRef.current &&\n multiStepActionsRef.current.contains(document.activeElement)\n ) {\n setFocus();\n }\n }, [currentStep.content]);\n\n // Set focus if a progress state resolves\n useAfterInitialEffect(() => {\n if (!progress) {\n setFocus();\n }\n }, [progress]);\n\n let areaDef = '';\n let rowDef = '';\n let colDef = '';\n switch (stepIndicator) {\n case 'horizontal':\n areaDef += '\"stepIndicator\" ';\n if (currentStep.banners) areaDef += '\"banners\" ';\n if (currentStep.description) areaDef += '\"description\" ';\n areaDef += '\"content\"';\n colDef = 'minmax(0, 1fr)';\n break;\n case 'vertical':\n if (currentStep.banners) {\n areaDef += '\"banners stepIndicator\" ';\n rowDef += 'auto ';\n }\n if (currentStep.description) {\n areaDef += '\"description stepIndicator\" ';\n rowDef += 'auto ';\n }\n areaDef += '\"content stepIndicator\"';\n rowDef += 'minmax(0px, 1fr)';\n colDef = `2fr minmax(${contentWidth.xs}, 1fr)`;\n break;\n case 'vertical-start':\n if (currentStep.banners) areaDef += '\"stepIndicator banners\" ';\n if (currentStep.description) areaDef += '\"stepIndicator description\" ';\n areaDef += '\"stepIndicator content\"';\n colDef = 'fit-content(clamp(10ch, calc(100% / 3), 40ch)) 2fr';\n break;\n default:\n if (currentStep.banners) areaDef += '\"banners\" ';\n if (currentStep.description) areaDef += '\"description\" ';\n areaDef += '\"content\"';\n colDef = 'minmax(0, 1fr)';\n }\n\n return (\n <StyledForm\n ref={multiStepRef}\n {...restProps}\n aria-labelledby={heading ? headingId : undefined}\n aria-describedby={currentStep.description ? descriptionId : undefined}\n heading={!!heading}\n actions={!!currentStep.actions}\n >\n {heading && (\n <Text ref={headingRef} id={headingId} variant='h3'>\n {heading}\n </Text>\n )}\n\n <Grid\n container={{\n cols: colDef,\n rows: rowDef,\n areas: areaDef,\n rowGap: 2,\n colGap: stepIndicator.startsWith('vertical') ? 4 : 2\n }}\n inert={progress ? '' : undefined}\n >\n {steps.length > 1 && (\n <Grid ref={progressIndicatorRef} item={{ area: 'stepIndicator' }}>\n {stepIndicator === 'horizontal' && (\n <Grid\n item={{ area: 'stepIndicator' }}\n as={HorizontalFormProgress}\n steps={steps}\n currentStepId={currentStepId}\n showStepNames={showHorizontalStepNames}\n />\n )}\n {stepIndicator.startsWith('vertical') && (\n <Grid\n item={{ area: 'stepIndicator' }}\n as={VerticalFormProgress}\n steps={steps}\n currentStepId={currentStepId}\n />\n )}\n <VisuallyHiddenText aria-live='polite'>\n {previousId !== undefined && previousId !== currentStepId\n ? t('step_changed_to_name', [currentStep.name])\n : ''}\n </VisuallyHiddenText>\n </Grid>\n )}\n\n {currentStep.banners && <Grid item={{ area: 'banners' }}>{currentStep.banners}</Grid>}\n\n {currentStep.description && (\n <StyledInstructionText item={{ area: 'description' }}>\n <HTML id={descriptionId} as='p' content={currentStep.description} />\n </StyledInstructionText>\n )}\n\n <Grid item={{ area: 'content' }} as={StyledFormContent} ref={multiStepFormContentRef}>\n {currentStep.content}\n </Grid>\n\n <Progress\n visible={!!progress}\n focusOnVisible\n placement='local'\n message={typeof progress === 'string' ? progress : undefined}\n />\n </Grid>\n {currentStep.actions && (\n <ResponsiveActions actionsRef={multiStepActionsRef} actionsEl={currentStep.actions} />\n )}\n </StyledForm>\n );\n }\n);\n\nexport default MultiStepForm;\n"]}
1	+ {"version":3,"file":"MultiStepForm.js","sourceRoot":"","sources":["../../../src/components/MultiStepForm/MultiStepForm.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useRef, useEffect } from 'react';\nimport type { PropsWithoutRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n useAfterInitialEffect,\n useUID,\n useI18n,\n usePrevious,\n useBreakpoint,\n useTheme,\n useConsolidatedRef,\n useConfiguration\n} from '../../hooks';\nimport type { ForwardRefForwardPropsComponent } from '../../types';\nimport { focusNonInteractiveElement, isInstance } from '../../utils';\nimport { calculateFontSize } from '../../styles';\nimport Text from '../Text';\nimport HTML from '../HTML';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\nimport Grid, { StyledGrid } from '../Grid';\nimport { defaultThemeProp } from '../../theme';\nimport Progress from '../Progress';\nimport ResponsiveActions from '../ResponsiveActions';\n\nimport type { MultiStepFormProps } from './MultiStepForm.types';\nimport VerticalFormProgress from './VerticalFormProgress';\nimport HorizontalFormProgress from './HorizontalFormProgress';\n\nexport const StyledForm = styled.form<{ actions?: boolean; heading?: boolean }>(\n ({ actions, heading, theme }) => {\n return css`\n & > ${StyledGrid} {\n position: relative;\n\n ${actions &&\n css`\n padding-block-end: calc(2 * ${theme.base.spacing});\n `}\n\n ${heading &&\n css`\n padding-block-start: calc(2 * ${theme.base.spacing});\n `}\n }\n\n &:focus-visible {\n outline: none;\n box-shadow: ${theme.base.shadow.focus};\n }\n `;\n }\n);\n\nStyledForm.defaultProps = defaultThemeProp;\n\nexport const StyledFormContent = styled.div``;\n\nexport const StyledInstructionText = styled(Grid)`\n /* Prevent instruction text from contributing to modal width calculation /\n width: 0;\n min-width: 100%;\n`;\n\nexport const StyledRequiredFieldLegend = styled(Text)(({ theme }) => {\n const {\n base: {\n 'font-size': fontSize,\n 'font-scale': fontScale,\n palette: { urgent }\n }\n } = theme;\n const { xxs: infoFontSize } = calculateFontSize(fontSize, fontScale);\n\n return css`\n font-size: ${infoFontSize};\n font-style: italic;\n\n &::before {\n display: 'inline';\n content: '\\\\00a0';\n vertical-align: top;\n color: ${urgent};\n }\n `;\n});\n\nStyledRequiredFieldLegend.defaultProps = defaultThemeProp;\n\nconst MultiStepForm: ForwardRefForwardPropsComponent<MultiStepFormProps> = forwardRef(\n function MultiStepForm(\n {\n currentStepId,\n steps,\n heading,\n progress,\n stepIndicator: stepIndicatorProp,\n showStepNames = false,\n variant = 'dot',\n ...restProps\n }: PropsWithoutRef<MultiStepFormProps>,\n ref: MultiStepFormProps['ref']\n ) {\n const showHorizontalStepNames = stepIndicatorProp === 'horizontal' ? showStepNames : undefined;\n\n const multiStepRef = useConsolidatedRef<HTMLFormElement>(ref);\n const headingRef = useRef<HTMLHeadingElement>(null);\n const progressIndicatorRef = useRef<HTMLDivElement>(null);\n const multiStepFormContentRef = useRef<HTMLDivElement>(null);\n const multiStepActionsRef = useRef<HTMLDivElement>(null);\n\n const { loadedRef } = useConfiguration();\n const previousId = usePrevious(currentStepId);\n const currentStep = steps.find(step => step.id === currentStepId)!;\n const headingId = useUID();\n const descriptionId = useUID();\n const t = useI18n();\n const {\n base: { 'content-width': contentWidth }\n } = useTheme();\n\n const isSmallOrAbove = useBreakpoint('sm', { breakpointRef: multiStepRef });\n\n const stepIndicator = (() => {\n if (stepIndicatorProp === 'none' \|\| steps.length < 2) return 'none';\n\n if (!isSmallOrAbove) return 'horizontal';\n\n return stepIndicatorProp ?? 'horizontal';\n })();\n\n const setFocus = () => {\n if (!loadedRef.current) {\n loadedRef.current = true;\n return;\n }\n\n if (progress) return;\n\n if (stepIndicator !== 'none' && progressIndicatorRef.current) {\n const focusables = [\n ...progressIndicatorRef.current.querySelectorAll(`[id=\"${currentStepId}\"]`)\n ] as HTMLElement[];\n focusables[0]?.focus();\n } else if (headingRef.current) {\n focusNonInteractiveElement(headingRef.current);\n } else if (multiStepRef.current) {\n const containerEl = multiStepRef.current.closest('[data-focusable-form-container]');\n const headingEl = containerEl?.querySelector('[data-focusable-form-heading]');\n if (isInstance(headingEl, HTMLElement)) {\n focusNonInteractiveElement(headingEl);\n } else {\n let label: string \| undefined;\n if (heading && currentStep.name) {\n label = `${heading} - ${currentStep.name}`;\n } else if (currentStep.name) {\n label = currentStep.name;\n } else if (heading) {\n label = heading;\n }\n\n focusNonInteractiveElement(multiStepRef.current, label);\n }\n }\n };\n\n // Set focus if the current step id updates\n useEffect(() => {\n if (previousId !== currentStepId) {\n setFocus();\n }\n }, [currentStepId, previousId]);\n\n // Set focus if the form content updates while focus is within the actions region of the form\n useAfterInitialEffect(() => {\n if (\n multiStepActionsRef.current &&\n multiStepActionsRef.current.contains(document.activeElement)\n ) {\n setFocus();\n }\n }, [currentStep.content]);\n\n // Set focus if a progress state resolves\n useAfterInitialEffect(() => {\n if (!progress) {\n setFocus();\n }\n }, [progress]);\n\n let areaDef = '';\n let rowDef = '';\n let colDef = '';\n switch (stepIndicator) {\n case 'horizontal':\n areaDef += '\"stepIndicator\" ';\n if (currentStep.banners) areaDef += '\"banners\" ';\n if (currentStep.description) areaDef += '\"description\" ';\n areaDef += '\"content\"';\n colDef = 'minmax(0, 1fr)';\n break;\n case 'vertical':\n if (currentStep.banners) {\n areaDef += '\"banners stepIndicator\" ';\n rowDef += 'auto ';\n }\n if (currentStep.description) {\n areaDef += '\"description stepIndicator\" ';\n rowDef += 'auto ';\n }\n areaDef += '\"content stepIndicator\"';\n rowDef += 'minmax(0px, 1fr)';\n colDef = `2fr minmax(${contentWidth.xs}, 1fr)`;\n break;\n case 'vertical-start':\n if (currentStep.banners) areaDef += '\"stepIndicator banners\" ';\n if (currentStep.description) areaDef += '\"stepIndicator description\" ';\n areaDef += '\"stepIndicator content\"';\n colDef = 'fit-content(clamp(10ch, calc(100% / 3), 40ch)) 2fr';\n break;\n default:\n if (currentStep.banners) areaDef += '\"banners\" ';\n if (currentStep.description) areaDef += '\"description\" ';\n areaDef += '\"content\"';\n colDef = 'minmax(0, 1fr)';\n }\n\n return (\n <StyledForm\n ref={multiStepRef}\n {...restProps}\n aria-labelledby={heading ? headingId : undefined}\n aria-describedby={currentStep.description ? descriptionId : undefined}\n heading={!!heading}\n actions={!!currentStep.actions}\n >\n {heading && (\n <Text ref={headingRef} id={headingId} variant='h3'>\n {heading}\n </Text>\n )}\n\n <Grid\n container={{\n cols: colDef,\n rows: rowDef,\n areas: areaDef,\n rowGap: 2,\n colGap: stepIndicator.startsWith('vertical') ? 4 : 2\n }}\n inert={progress ? '' : undefined}\n >\n {steps.length > 1 && (\n <Grid ref={progressIndicatorRef} item={{ area: 'stepIndicator' }}>\n {stepIndicator === 'horizontal' && (\n <Grid\n item={{ area: 'stepIndicator' }}\n as={HorizontalFormProgress}\n steps={steps}\n currentStepId={currentStepId}\n showStepNames={showHorizontalStepNames}\n variant={variant}\n />\n )}\n {stepIndicator.startsWith('vertical') && (\n <Grid\n item={{ area: 'stepIndicator' }}\n as={VerticalFormProgress}\n steps={steps}\n currentStepId={currentStepId}\n variant={variant}\n />\n )}\n <VisuallyHiddenText aria-live='polite'>\n {previousId !== undefined && previousId !== currentStepId\n ? t('step_changed_to_name', [currentStep.name])\n : ''}\n </VisuallyHiddenText>\n </Grid>\n )}\n\n {currentStep.banners && <Grid item={{ area: 'banners' }}>{currentStep.banners}</Grid>}\n\n {currentStep.description && (\n <StyledInstructionText item={{ area: 'description' }}>\n <HTML id={descriptionId} as='p' content={currentStep.description} />\n </StyledInstructionText>\n )}\n\n <Grid item={{ area: 'content' }} as={StyledFormContent} ref={multiStepFormContentRef}>\n {currentStep.content}\n </Grid>\n\n <Progress\n visible={!!progress}\n focusOnVisible\n placement='local'\n message={typeof progress === 'string' ? progress : undefined}\n />\n </Grid>\n {currentStep.actions && (\n <ResponsiveActions actionsRef={multiStepActionsRef} actionsEl={currentStep.actions} />\n )}\n </StyledForm>\n );\n }\n);\n\nexport default MultiStepForm;\n"]}

package/lib/components/MultiStepForm/MultiStepForm.types.d.ts CHANGED Viewed

@@ -52,6 +52,11 @@ interface BaseMultiStepFormProps {
     progress?: BaseFormProps['progress'];
     /** The heading of the form. */
     heading?: BaseFormProps['heading'];
+    /**
+     * The visual style of the step indicator.
+     * @default 'dot'
+     */
+    variant?: 'dot' | 'bar';
     /** Ref forwarded to the form element. */
     ref?: BaseFormProps['ref'];
 }

package/lib/components/MultiStepForm/MultiStepForm.types.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MultiStepForm.types.d.ts","sourceRoot":"","sources":["../../../src/components/MultiStepForm/MultiStepForm.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,GAAG,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE/D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAC7C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAEjD,MAAM,WAAW,aAAc,SAAQ,SAAS;IAC9C,4BAA4B;IAC5B,OAAO,EAAE,SAAS,CAAC;IACnB,+BAA+B;IAC/B,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,sIAAsI;IACtI,QAAQ,CAAC,EAAE,OAAO,GAAG,aAAa,CAAC,SAAS,CAAC,CAAC;IAC9C,yCAAyC;IACzC,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,oEAAoE;IACpE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,+BAA+B;IAC/B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,yCAAyC;IACzC,GAAG,CAAC,EAAE,GAAG,CAAC,eAAe,CAAC,CAAC;CAC5B;AAED,MAAM,WAAW,IAAI;IACnB,sEAAsE;IACtE,EAAE,EAAE,MAAM,CAAC;IACX,sCAAsC;IACtC,IAAI,EAAE,MAAM,CAAC;IACb,sDAAsD;IACtD,OAAO,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IACnC,qCAAqC;IACrC,OAAO,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IACnC,sCAAsC;IACtC,OAAO,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IACnC;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;IACd,oEAAoE;IACpE,WAAW,CAAC,EAAE,aAAa,CAAC,aAAa,CAAC,CAAC;IAC3C,sEAAsE;IACtE,aAAa,CAAC,EAAE,iBAAiB,CAAC;CACnC;AAED,UAAU,sBAAsB;IAC9B,6BAA6B;IAC7B,aAAa,EAAE,MAAM,CAAC;IACtB,kDAAkD;IAClD,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,mCAAmC;IACnC,QAAQ,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IACrC,+BAA+B;IAC/B,OAAO,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IACnC,yCAAyC;IACzC,GAAG,CAAC,EAAE,aAAa,CAAC,KAAK,CAAC,CAAC;CAC5B;AAED,MAAM,MAAM,kBAAkB,GAAG,sBAAsB,GACrD,CACI;IACE,qDAAqD;IACrD,aAAa,CAAC,EAAE,YAAY,CAAC;IAC7B;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,GACD;IACE,wCAAwC;IACxC,aAAa,EAAE,UAAU,GAAG,gBAAgB,GAAG,MAAM,CAAC;IACtD,aAAa,CAAC,EAAE,KAAK,CAAC;CACvB,CACJ,CAAC"}
1	+ {"version":3,"file":"MultiStepForm.types.d.ts","sourceRoot":"","sources":["../../../src/components/MultiStepForm/MultiStepForm.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,GAAG,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE/D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAC7C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAEjD,MAAM,WAAW,aAAc,SAAQ,SAAS;IAC9C,4BAA4B;IAC5B,OAAO,EAAE,SAAS,CAAC;IACnB,+BAA+B;IAC/B,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,sIAAsI;IACtI,QAAQ,CAAC,EAAE,OAAO,GAAG,aAAa,CAAC,SAAS,CAAC,CAAC;IAC9C,yCAAyC;IACzC,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,oEAAoE;IACpE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,+BAA+B;IAC/B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,yCAAyC;IACzC,GAAG,CAAC,EAAE,GAAG,CAAC,eAAe,CAAC,CAAC;CAC5B;AAED,MAAM,WAAW,IAAI;IACnB,sEAAsE;IACtE,EAAE,EAAE,MAAM,CAAC;IACX,sCAAsC;IACtC,IAAI,EAAE,MAAM,CAAC;IACb,sDAAsD;IACtD,OAAO,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IACnC,qCAAqC;IACrC,OAAO,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IACnC,sCAAsC;IACtC,OAAO,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IACnC;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;IACd,oEAAoE;IACpE,WAAW,CAAC,EAAE,aAAa,CAAC,aAAa,CAAC,CAAC;IAC3C,sEAAsE;IACtE,aAAa,CAAC,EAAE,iBAAiB,CAAC;CACnC;AAED,UAAU,sBAAsB;IAC9B,6BAA6B;IAC7B,aAAa,EAAE,MAAM,CAAC;IACtB,kDAAkD;IAClD,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,mCAAmC;IACnC,QAAQ,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IACrC,+BAA+B;IAC/B,OAAO,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IACnC;;;OAGG;IACH,OAAO,CAAC,EAAE,KAAK,GAAG,KAAK,CAAC;IACxB,yCAAyC;IACzC,GAAG,CAAC,EAAE,aAAa,CAAC,KAAK,CAAC,CAAC;CAC5B;AAED,MAAM,MAAM,kBAAkB,GAAG,sBAAsB,GACrD,CACI;IACE,qDAAqD;IACrD,aAAa,CAAC,EAAE,YAAY,CAAC;IAC7B;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,GACD;IACE,wCAAwC;IACxC,aAAa,EAAE,UAAU,GAAG,gBAAgB,GAAG,MAAM,CAAC;IACtD,aAAa,CAAC,EAAE,KAAK,CAAC;CACvB,CACJ,CAAC"}

package/lib/components/MultiStepForm/MultiStepForm.types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MultiStepForm.types.js","sourceRoot":"","sources":["../../../src/components/MultiStepForm/MultiStepForm.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ReactNode, Ref, MouseEventHandler } from 'react';\n\nimport type { BaseProps } from '../../types';\nimport type { ProgressProps } from '../Progress';\n\nexport interface BaseFormProps extends BaseProps {\n /** Primary content area. /\n content: ReactNode;\n /* Region for Form Actions. /\n actions?: ReactNode;\n /* If there is a progress state either on load, or after submit, you must indicate as such. A custom message is supported as well. /\n progress?: boolean \| ProgressProps['message'];\n /* Region for Banners above the Form. /\n banners?: ReactNode;\n /* A description of the form to be displayed above the controls. /\n description?: string;\n /* The heading of the form. /\n heading?: string;\n /* Ref forwarded to the form element. /\n ref?: Ref<HTMLFormElement>;\n}\n\nexport interface Step {\n /* The id that is referenced by the Multi Step currentStepId prop. /\n id: string;\n /* The displayed name of the step. /\n name: string;\n /* A set of Action Buttons to render for the step. /\n actions?: BaseFormProps['actions'];\n /* Banners to render for the step /\n banners?: BaseFormProps['banners'];\n /* Content to render for the step. /\n content?: BaseFormProps['content'];\n /\n Indicates whether the step has been completed\n * @default false\n /\n completed?: boolean;\n /\n Determines the size of the step indicator. Depth 0 is larger than depth 1.\n * @default 0\n /\n depth?: 0 \| 1;\n /* A description of the form to be displayed above the controls. /\n description?: BaseFormProps['description'];\n /* Callback function that is called when a step marker is clicked. /\n onMarkerClick?: MouseEventHandler;\n}\n\ninterface BaseMultiStepFormProps {\n /* Sets the current step. /\n currentStepId: string;\n /* Flat array of objects describing each step. /\n steps: Step[];\n /* Progress state for the form. /\n progress?: BaseFormProps['progress'];\n /* The heading of the form. /\n heading?: BaseFormProps['heading'];\n /* Ref forwarded to the form element. /\n ref?: BaseFormProps['ref'];\n}\n\nexport type MultiStepFormProps = BaseMultiStepFormProps &\n (\n \| {\n /* MultiStepForm step indicator type - horizontal /\n stepIndicator?: 'horizontal';\n /\n Whether to show all step names in the horizontal step indicator.\n * @default false\n /\n showStepNames?: boolean;\n }\n \| {\n /* MultiStepForm step indicator type */\n stepIndicator: 'vertical' \| 'vertical-start' \| 'none';\n showStepNames?: never;\n }\n );\n"]}
1	+ {"version":3,"file":"MultiStepForm.types.js","sourceRoot":"","sources":["../../../src/components/MultiStepForm/MultiStepForm.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ReactNode, Ref, MouseEventHandler } from 'react';\n\nimport type { BaseProps } from '../../types';\nimport type { ProgressProps } from '../Progress';\n\nexport interface BaseFormProps extends BaseProps {\n /** Primary content area. /\n content: ReactNode;\n /* Region for Form Actions. /\n actions?: ReactNode;\n /* If there is a progress state either on load, or after submit, you must indicate as such. A custom message is supported as well. /\n progress?: boolean \| ProgressProps['message'];\n /* Region for Banners above the Form. /\n banners?: ReactNode;\n /* A description of the form to be displayed above the controls. /\n description?: string;\n /* The heading of the form. /\n heading?: string;\n /* Ref forwarded to the form element. /\n ref?: Ref<HTMLFormElement>;\n}\n\nexport interface Step {\n /* The id that is referenced by the Multi Step currentStepId prop. /\n id: string;\n /* The displayed name of the step. /\n name: string;\n /* A set of Action Buttons to render for the step. /\n actions?: BaseFormProps['actions'];\n /* Banners to render for the step /\n banners?: BaseFormProps['banners'];\n /* Content to render for the step. /\n content?: BaseFormProps['content'];\n /\n Indicates whether the step has been completed\n * @default false\n /\n completed?: boolean;\n /\n Determines the size of the step indicator. Depth 0 is larger than depth 1.\n * @default 0\n /\n depth?: 0 \| 1;\n /* A description of the form to be displayed above the controls. /\n description?: BaseFormProps['description'];\n /* Callback function that is called when a step marker is clicked. /\n onMarkerClick?: MouseEventHandler;\n}\n\ninterface BaseMultiStepFormProps {\n /* Sets the current step. /\n currentStepId: string;\n /* Flat array of objects describing each step. /\n steps: Step[];\n /* Progress state for the form. /\n progress?: BaseFormProps['progress'];\n /* The heading of the form. /\n heading?: BaseFormProps['heading'];\n /\n The visual style of the step indicator.\n * @default 'dot'\n /\n variant?: 'dot' \| 'bar';\n /* Ref forwarded to the form element. /\n ref?: BaseFormProps['ref'];\n}\n\nexport type MultiStepFormProps = BaseMultiStepFormProps &\n (\n \| {\n /* MultiStepForm step indicator type - horizontal /\n stepIndicator?: 'horizontal';\n /\n Whether to show all step names in the horizontal step indicator.\n * @default false\n /\n showStepNames?: boolean;\n }\n \| {\n /* MultiStepForm step indicator type */\n stepIndicator: 'vertical' \| 'vertical-start' \| 'none';\n showStepNames?: never;\n }\n );\n"]}

package/lib/components/MultiStepForm/VerticalFormProgress.d.ts CHANGED Viewed

@@ -1,10 +1,10 @@
-import type { FunctionComponent } from 'react';
 import type { ForwardProps } from '../../types';
 import type { MultiStepFormProps } from './MultiStepForm.types';
 interface FormProgressProps {
     steps: MultiStepFormProps['steps'];
     currentStepId: MultiStepFormProps['currentStepId'];
+    variant?: MultiStepFormProps['variant'];
 }
-declare const VerticalFormProgress: FunctionComponent<FormProgressProps & ForwardProps>;
+declare const VerticalFormProgress: ({ steps, currentStepId, variant, ...restProps }: FormProgressProps & ForwardProps) => import("react/jsx-runtime").JSX.Element;
 export default VerticalFormProgress;
 //# sourceMappingURL=VerticalFormProgress.d.ts.map

package/lib/components/MultiStepForm/VerticalFormProgress.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"VerticalFormProgress.d.ts","sourceRoot":"","sources":["../../../src/components/MultiStepForm/VerticalFormProgress.tsx"],"names":[],"mappings":"~~AACA~~,OAAO,KAAK,EAAE,~~iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE/C,OAAO,KAAK,EAAE,~~YAAY,EAAE,MAAM,aAAa,CAAC;~~AAahD~~,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAEhE,UAAU,iBAAiB;IACzB,KAAK,EAAE,kBAAkB,CAAC,OAAO,CAAC,CAAC;IACnC,aAAa,EAAE,kBAAkB,CAAC,eAAe,CAAC,CAAC;~~CACpD~~;AAED,QAAA,MAAM,oBAAoB,~~EAAE~~,~~iBAAiB~~,~~CAAC,~~iBAAiB,GAAG,YAAY,~~CA4F7E~~,CAAC;AAEF,eAAe,oBAAoB,CAAC"}
1	+ {"version":3,"file":"VerticalFormProgress.d.ts","sourceRoot":"","sources":["../../../src/components/MultiStepForm/VerticalFormProgress.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAehD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAEhE,UAAU,iBAAiB;IACzB,KAAK,EAAE,kBAAkB,CAAC,OAAO,CAAC,CAAC;IACnC,aAAa,EAAE,kBAAkB,CAAC,eAAe,CAAC,CAAC;IACnD,OAAO,CAAC,EAAE,kBAAkB,CAAC,SAAS,CAAC,CAAC;CACzC;AAED,QAAA,MAAM,oBAAoB,GAAI,iDAK3B,iBAAiB,GAAG,YAAY,4CA+HlC,CAAC;AAEF,eAAe,oBAAoB,CAAC"}

package/lib/components/MultiStepForm/VerticalFormProgress.js CHANGED Viewed

@@ -5,14 +5,56 @@ import Text from '../Text';
 import { useArrows, useElement, useI18n } from '../../hooks';
 import Button from '../Button';
 import Flex from '../Flex';
-import { StepMarker, StyledBulletWrapper, StyledStepText, StyledVerticalStepMarkers } from './FormProgress.styles';
-const VerticalFormProgress = ({ steps, currentStepId, ...restProps }) => {
+import { StepMarker, StyledBulletWrapper, StyledStepText, StyledVerticalBarSegment, StyledVerticalBarWrapper, StyledVerticalStepMarkers } from './FormProgress.styles';
+const VerticalFormProgress = ({ steps, currentStepId, variant = 'dot', ...restProps }) => {
     const t = useI18n();
+    const isBarsMode = variant === 'bar';
     const curIdx = steps.findIndex(step => step.id === currentStepId);
     const curStep = steps[curIdx];
     const [currentStepEl, setCurrentStepEl] = useElement();
     const [stepEls, setStepEls] = useState({});
     const stepsRef = useRef(null);
+    const setStepElement = (stepId) => (el) => {
+        setStepEls(curr => {
+            const newEls = { ...curr };
+            if (!el && newEls[stepId]) {
+                delete newEls[stepId];
+                return newEls;
+            }
+            if (el)
+                return { ...newEls, [stepId]: el };
+            return newEls;
+        });
+    };
+    const renderStepName = ({ isCurrent, stepName, onMarkerClick }) => {
+        if (!!onMarkerClick && !isCurrent) {
+            return (_jsx(Button, { variant: 'link', onClick: onMarkerClick, as: StyledStepText, tabIndex: -1, children: stepName }));
+        }
+        return (_jsx(Text, { variant: isCurrent ? 'h3' : undefined, as: StyledStepText, children: stepName }));
+    };
+    const renderStepItem = (step, index) => {
+        const isCurrent = index === curIdx;
+        const isPrior = index < curIdx;
+        const commonMarkerProps = {
+            ref: setStepElement(step.id),
+            id: step.id,
+            'aria-label': `${step.name} - ${t('step_num', [index + 1, steps.length])}`,
+            'aria-current': isCurrent ? 'step' : undefined,
+            tabIndex: isCurrent ? 0 : -1,
+            current: isCurrent,
+            completed: step.completed,
+            onClick: step.onMarkerClick,
+            clickable: !!step.onMarkerClick && !isCurrent
+        };
+        return (_jsxs(Grid, { as: 'li', container: {
+                cols: '2rem minmax(0, 1fr)',
+                colGap: 1
+            }, children: [isBarsMode ? (_jsx(Flex, { container: { direction: 'column', alignItems: 'center' }, as: StyledVerticalBarWrapper, children: _jsx(StyledVerticalBarSegment, { ...commonMarkerProps }) })) : (_jsx(Flex, { container: { alignItems: 'center', justify: 'center' }, as: StyledBulletWrapper, hasNext: index !== steps.length - 1, prior: isPrior, children: _jsx(StepMarker, { prior: isPrior, depth: step.depth, ...commonMarkerProps }) })), renderStepName({
+                    isCurrent,
+                    stepName: step.name,
+                    onMarkerClick: step.onMarkerClick
+                })] }, step.id));
+    };
     useArrows(stepsRef, {
         selector: 'button[aria-label]',
         cycle: false,
@@ -30,24 +72,7 @@ const VerticalFormProgress = ({ steps, currentStepId, ...restProps }) => {
             setCurrentStepEl(stepEls[curStep.id]);
         }
     }, [Object.keys(stepEls), curStep]);
-    return (_jsx(StyledVerticalStepMarkers, { ref: stepsRef, ...restProps, children: steps.map((step, index) => {
-            const isCurrent = index === curIdx;
-            return (_jsxs(Grid, { as: 'li', container: {
-                    cols: '2rem minmax(0, 1fr)',
-                    colGap: 1
-                }, children: [_jsx(Flex, { container: { alignItems: 'center', justify: 'center' }, as: StyledBulletWrapper, hasNext: index !== steps.length - 1, prior: index < curIdx, children: _jsx(StepMarker, { ref: (el) => {
-                                setStepEls(curr => {
-                                    const newEls = { ...curr };
-                                    if (!el && newEls[step.id]) {
-                                        delete newEls[step.id];
-                                        return newEls;
-                                    }
-                                    if (el)
-                                        return { ...newEls, [step.id]: el };
-                                    return newEls;
-                                });
-                            }, id: step.id, "aria-label": `${step.name} - ${t('step_num', [index + 1, steps.length])}`, "aria-current": isCurrent ? 'step' : undefined, tabIndex: isCurrent ? 0 : -1, current: isCurrent, completed: step.completed, prior: index < curIdx, depth: step.depth, onClick: step.onMarkerClick, clickable: !!step.onMarkerClick && !isCurrent }) }), !!step.onMarkerClick && !isCurrent ? (_jsx(Button, { variant: 'link', onClick: step.onMarkerClick, as: StyledStepText, tabIndex: -1, children: step.name })) : (_jsx(Text, { variant: isCurrent ? 'h3' : undefined, as: StyledStepText, children: step.name }))] }, step.id));
-        }) }));
+    return (_jsx(StyledVerticalStepMarkers, { ref: stepsRef, ...restProps, children: steps.map(renderStepItem) }));
 };
 export default VerticalFormProgress;
 //# sourceMappingURL=VerticalFormProgress.js.map

package/lib/components/MultiStepForm/VerticalFormProgress.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"VerticalFormProgress.js","sourceRoot":"","sources":["../../../src/components/MultiStepForm/VerticalFormProgress.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;~~AAIpD~~,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAC7D,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,IAAI,MAAM,SAAS,CAAC;AAE3B,OAAO,EACL,UAAU,EACV,mBAAmB,EACnB,cAAc,EACd,yBAAyB,EAC1B,MAAM,uBAAuB,CAAC;~~AAQ~~/B,MAAM,oBAAoB,~~GAAwD~~,CAAC,~~EACjF~~,KAAK,EACL,aAAa,EACb,GAAG,SAAS,~~EACb~~,EAAE,EAAE;~~IACH~~,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;~~IAEpB~~,MAAM,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,KAAK,aAAa,CAAC,CAAC;IAClE,MAAM,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;IAE9B,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,UAAU,EAAE,CAAC;IACvD,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAA8B,EAAE,CAAC,CAAC;IACxE,MAAM,QAAQ,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IAE9B,~~SAAS~~,CAAC,~~QAAQ~~,EAAE~~;QAClB~~,~~QAAQ,~~EAAE,~~oBAAoB;QAC9B~~,~~KAAK~~,~~EAAE~~,~~KAAK;QACZ,GAAG,~~EAAE,~~YAAY;QACjB,mBAAmB,~~EAAE~~,aAAa~~;~~KACnC~~,~~CAAC~~,CAAC~~;IAEH~~,~~SAAS~~,CAAC,~~QAAQ,~~EAAE;~~QAClB~~,~~QAAQ~~,~~EAAE~~,~~oBAAoB;QAC9B~~,~~KAAK,~~EAAE,~~KAAK;QACZ,~~GAAG,EAAE,~~SAAS~~;~~QACd~~,~~mBAAmB~~,EAAE,~~aAAa;KACnC~~,~~CAAC~~,CAAC~~;IAEH~~,~~SAAS~~,CAAC,~~GAAG~~,~~EAAE~~;~~QACb~~,~~IAAI,~~OAAO,CAAC,~~OAAO~~,CAAC,~~EAAE,~~CAAC,~~IAAI,~~OAAO,CAAC,~~OAAO,~~CAAC,EAAE,~~CAAC~~,~~KAAK~~,~~aAAa~~,EAAE,CAAC~~;YACjE~~,~~gBAAgB~~,CAAC,~~OAAO~~,CAAC,OAAO,~~CAAC~~,~~EAAE,~~CAAC,CAAC,CAAC~~;QACxC~~,CAAC;~~IACH~~,CAAC,~~EAAE,~~CAAC,MAAM,~~CAAC~~,~~IAAI~~,CAAC,~~OAAO~~,~~CAAC~~,EAAE,~~OAAO~~,CAAC,CAAC,CAAC;~~IAEpC~~,OAAO,CACL,KAAC,~~yBAAyB~~,IAAC,~~GAAG~~,~~EAAE~~,~~QAAQ~~,~~KAAM~~,~~SAAS~~,~~YACpD~~,~~KAAK~~,~~CAAC~~,~~GAAG~~,~~CAAC~~,~~CAAC~~,~~IAAI,~~EAAE,~~KAAK~~,EAAE,~~EAAE;YACzB~~,~~MAAM~~,~~SAAS~~,~~GAAG~~,~~KAAK~~,~~KAAK~~,~~MAAM~~,CAAC;~~YACnC~~,OAAO,CACL,~~MAAC~~,IAAI,~~IAEH~~,EAAE,~~EAAC~~,~~IAAI~~,~~EACP~~,~~SAAS~~,~~EAAE;oBACT,~~IAAI,~~EAAE~~,~~qBAAqB;oBAC3B~~,~~MAAM~~,EAAE,~~CAAC;iBACV~~,~~aAED~~,~~KAAC~~,~~IAAI~~,~~IACH~~,~~SAAS~~,~~EAAE~~,~~EAAE~~,~~UAAU~~,~~EAAE~~,~~QAAQ~~,~~EAAE~~,~~OAAO~~,~~EAAE~~,~~QAAQ~~,EAAE,~~EACtD~~,EAAE,EAAE,~~mBAAmB~~,~~EACvB~~,~~OAAO~~,~~EAAE,~~KAAK,KAAK,~~KAAK~~,CAAC,MAAM,GAAG,~~CAAC,EACnC,~~KAAK,~~EAAE,KAAK,~~GAAG,MAAM,~~YAErB~~,~~KAAC~~,~~UAAU~~,~~IACT~~,GAAG,EAAE,CAAC,~~EAAsB~~,EAAE,~~EAAE~~;~~gCAC9B~~,~~UAAU~~,~~CAAC~~,IAAI,CAAC,EAAE;~~oCAChB~~,~~MAAM~~,~~MAAM~~,GAAG,~~EAAE~~,~~GAAG~~,IAAI,EAAE,CAAC~~;oCAC3B~~,~~IAAI~~,CAAC,EAAE,~~IAAI~~,MAAM,CAAC,~~IAAI,~~CAAC,EAAE,~~CAAC~~,EAAE,CAAC~~;wCAC3B~~,~~OAAO~~,~~MAAM~~,CAAC,~~IAAI~~,CAAC,EAAE,CAAC,CAAC~~;wCACvB~~,~~OAAO~~,~~MAAM~~,CAAC~~;oCAChB~~,CAAC~~;oCACD~~,~~IAAI~~,~~EAAE~~;~~wCAAE~~,OAAO,EAAE,~~GAAG~~,~~MAAM~~,EAAE,~~CAAC,~~IAAI,CAAC,EAAE,CAAC,~~EAAE~~,~~EAAE~~,EAAE,CAAC~~;oCAC5C~~,~~OAAO~~,~~MAAM~~,CAAC~~;gCAChB~~,~~CAAC~~,CAAC,~~CAAC~~;~~4BACL~~,CAAC,~~EACD~~,~~EAAE~~,~~EAAE~~,IAAI,~~CAAC~~,EAAE,~~gBACC~~,~~GAAG,~~IAAI,~~CAAC~~,IAAI,MAAM,~~CAAC~~,CAAC,UAAU,~~EAAE~~,CAAC,~~KAAK~~,~~GAAG~~,~~CAAC~~,EAAE,~~KAAK~~,~~CAAC~~,~~MAAM~~,~~CAAC~~,~~CAAC~~,EAAE,~~kBAC1D~~,~~SAAS~~,~~CAAC~~,~~CAAC~~,~~CAAC~~,~~MAAM~~,~~CAAC~~,~~CAAC~~,~~CAAC~~,~~SAAS~~,~~EAC5C~~,~~QAAQ~~,~~EAAE~~,~~SAAS~~,CAAC,CAAC,CAAC,~~CAAC~~,~~CAAC~~,~~CAAC~~,~~CAAC~~,~~CAAC~~,~~CAAC~~,~~EAC5B~~,OAAO,EAAE,~~SAAS~~,~~EAClB~~,~~SAAS~~,EAAE,~~IAAI~~,~~CAAC~~,~~SAAS~~,~~EACzB~~,KAAK,~~EAAE~~,KAAK,~~GAAG~~,MAAM,~~EACrB~~,KAAK,EAAE,~~IAAI~~,~~CAAC~~,KAAK,~~EACjB~~,OAAO,EAAE,IAAI,CAAC,~~aAAa~~,~~EAC3B~~,~~SAAS~~,~~EAAE~~,~~CAAC~~,~~CAAC~~,~~IAAI~~,CAAC,~~aAAa~~,IAAI,CAAC,~~SAAS~~,~~GAC7C~~,~~GACG~~,~~EAEN~~,CAAC,CAAC,IAAI,CAAC,~~aAAa~~,~~IAAI~~,CAAC,~~SAAS,~~CAAC,CAAC,CAAC,~~CACpC~~,~~KAAC~~,~~MAAM~~,~~IAAC~~,~~OAAO~~,~~EAAC~~,~~MAAM~~,~~EAAC~~,~~OAAO~~,EAAE,~~IAAI~~,~~CAAC~~,aAAa,EAAE,EAAE,EAAE,~~cAAc~~,EAAE,~~QAAQ~~,EAAE,CAAC,CAAC,~~YACjF~~,~~IAAI,~~CAAC,~~IAAI~~,~~GACH~~,~~CACV~~,~~CAAC~~,CAAC,CAAC,~~CACF~~,~~KAAC~~,IAAI,~~IAAC~~,OAAO,EAAE,~~SAAS~~,CAAC,CAAC,CAAC,~~IAAI~~,CAAC,CAAC,CAAC,~~SAAS~~,~~EAAE~~,~~EAAE~~,EAAE,~~cAAc~~,~~YAC5D~~,IAAI,CAAC,~~IAAI~~,~~GACL~~,~~CACR~~,~~KA9CI~~,~~IAAI~~,CAAC,EAAE,~~CA+CP~~,~~CACR~~,CAAC~~;QACJ~~,CAAC,CAAC,~~GACwB~~,CAC7B,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,oBAAoB,CAAC","sourcesContent":["import { useEffect, useRef, useState } from 'react';\~~nimport type { FunctionComponent } from 'react';\~~n\nimport type { ForwardProps } from '../../types';\nimport Grid from '../Grid';\nimport Text from '../Text';\nimport { useArrows, useElement, useI18n } from '../../hooks';\nimport Button from '../Button';\nimport Flex from '../Flex';\n\nimport {\n StepMarker,\n StyledBulletWrapper,\n StyledStepText,\n StyledVerticalStepMarkers\n} from './FormProgress.styles';\nimport type { MultiStepFormProps } from './MultiStepForm.types';\n\ninterface FormProgressProps {\n steps: MultiStepFormProps['steps'];\n currentStepId: MultiStepFormProps['currentStepId'];\n}\n\nconst VerticalFormProgress: ~~FunctionComponent<FormProgressProps & ForwardProps>~~ = ({\n steps,\n currentStepId,\n ...restProps\n}) => {\n const t = useI18n();\n\n const curIdx = steps.findIndex(step => step.id === currentStepId);\n const curStep = steps[curIdx];\n\n const [currentStepEl, setCurrentStepEl] = useElement();\n const [stepEls, setStepEls] = useState<Record<string, HTMLElement>>({});\n const stepsRef = useRef(null);\n\n ~~useArrows~~(~~stepsRef,~~ {\n ~~selector:~~ ~~'button~~[~~aria-label~~]~~',\~~n ~~cycle:~~ ~~false,\~~n ~~dir:~~ ~~'left-right',\~~n ~~initialFocusElement~~: ~~currentStepEl~~\n });\n\n ~~useArrows~~(~~stepsRef,~~ {\n ~~selector: 'button[aria-label]'~~,\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 return (\n <~~StyledVerticalStepMarkers~~ ~~ref~~={~~stepsRef~~} {~~...restProps~~}>\n ~~{steps.map~~((step, index) => {\n const isCurrent = index === curIdx;\n return (\n <Grid\n key={step.id}\n as='li'\n container={{\n cols: '2rem minmax(0, 1fr)',\n colGap: 1\n }}\n >\n <Flex\n container={{ alignItems: 'center', justify: 'center' }}\n as={StyledBulletWrapper}\n hasNext={index !== steps.length - 1}\n prior={~~index < curIdx~~}\n >\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 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 ~~completed={step.completed}~~\n ~~prior={index~~ < ~~curIdx}\n depth=~~{~~step.depth}~~\n ~~onClick={step~~.~~onMarkerClick}\n clickable={!!step.onMarkerClick~~ && ~~!isCurrent}\n />\n </Flex>\n\n {!!step~~.~~onMarkerClick~~ && ~~!isCurrent~~ ? (\n ~~<Button~~ ~~variant='link' onClick={step~~.~~onMarkerClick}~~ ~~as={StyledStepText} tabIndex={-1}>\~~n ~~{step.name}~~\n ~~</Button>\n )~~ : (\n <~~Text~~ ~~variant~~={~~isCurrent ? 'h3' : undefined~~} ~~as=~~{~~StyledStepText~~}>\n {~~step~~.~~name}\n </Text>\n~~ )}\n ~~</Grid>\n );\n })}\n~~ </StyledVerticalStepMarkers>\n );\n};\n\nexport default VerticalFormProgress;\n"]}
1	+ {"version":3,"file":"VerticalFormProgress.js","sourceRoot":"","sources":["../../../src/components/MultiStepForm/VerticalFormProgress.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport type { ForwardProps } from '../../types';\nimport Grid from '../Grid';\nimport Text from '../Text';\nimport { useArrows, useElement, useI18n } from '../../hooks';\nimport Button from '../Button';\nimport Flex from '../Flex';\n\nimport {\n StepMarker,\n StyledBulletWrapper,\n StyledStepText,\n StyledVerticalBarSegment,\n StyledVerticalBarWrapper,\n StyledVerticalStepMarkers\n} from './FormProgress.styles';\nimport type { MultiStepFormProps } from './MultiStepForm.types';\n\ninterface FormProgressProps {\n steps: MultiStepFormProps['steps'];\n currentStepId: MultiStepFormProps['currentStepId'];\n variant?: MultiStepFormProps['variant'];\n}\n\nconst VerticalFormProgress = ({\n steps,\n currentStepId,\n variant = 'dot',\n ...restProps\n}: FormProgressProps & ForwardProps) => {\n const t = useI18n();\n const isBarsMode = variant === 'bar';\n\n const curIdx = steps.findIndex(step => step.id === currentStepId);\n const curStep = steps[curIdx];\n\n const [currentStepEl, setCurrentStepEl] = useElement();\n const [stepEls, setStepEls] = useState<Record<string, HTMLElement>>({});\n const stepsRef = useRef(null);\n\n const setStepElement = (stepId: string) => (el: HTMLElement \| null) => {\n setStepEls(curr => {\n const newEls = { ...curr };\n\n if (!el && newEls[stepId]) {\n delete newEls[stepId];\n return newEls;\n }\n\n if (el) return { ...newEls, [stepId]: el };\n\n return newEls;\n });\n };\n\n const renderStepName = ({\n isCurrent,\n stepName,\n onMarkerClick\n }: {\n isCurrent: boolean;\n stepName: string;\n onMarkerClick?: MultiStepFormProps['steps'][number]['onMarkerClick'];\n }) => {\n if (!!onMarkerClick && !isCurrent) {\n return (\n <Button variant='link' onClick={onMarkerClick} as={StyledStepText} tabIndex={-1}>\n {stepName}\n </Button>\n );\n }\n\n return (\n <Text variant={isCurrent ? 'h3' : undefined} as={StyledStepText}>\n {stepName}\n </Text>\n );\n };\n\n const renderStepItem = (step: MultiStepFormProps['steps'][number], index: number) => {\n const isCurrent = index === curIdx;\n const isPrior = index < curIdx;\n\n const commonMarkerProps = {\n ref: setStepElement(step.id),\n id: step.id,\n 'aria-label': `${step.name} - ${t('step_num', [index + 1, steps.length])}`,\n 'aria-current': isCurrent ? ('step' as const) : undefined,\n tabIndex: isCurrent ? 0 : -1,\n current: isCurrent,\n completed: step.completed,\n onClick: step.onMarkerClick,\n clickable: !!step.onMarkerClick && !isCurrent\n };\n\n return (\n <Grid\n key={step.id}\n as='li'\n container={{\n cols: '2rem minmax(0, 1fr)',\n colGap: 1\n }}\n >\n {isBarsMode ? (\n <Flex\n container={{ direction: 'column', alignItems: 'center' }}\n as={StyledVerticalBarWrapper}\n >\n <StyledVerticalBarSegment {...commonMarkerProps} />\n </Flex>\n ) : (\n <Flex\n container={{ alignItems: 'center', justify: 'center' }}\n as={StyledBulletWrapper}\n hasNext={index !== steps.length - 1}\n prior={isPrior}\n >\n <StepMarker prior={isPrior} depth={step.depth} {...commonMarkerProps} />\n </Flex>\n )}\n\n {renderStepName({\n isCurrent,\n stepName: step.name,\n onMarkerClick: step.onMarkerClick\n })}\n </Grid>\n );\n };\n\n useArrows(stepsRef, {\n selector: 'button[aria-label]',\n cycle: false,\n dir: 'left-right',\n initialFocusElement: currentStepEl\n });\n\n useArrows(stepsRef, {\n selector: 'button[aria-label]',\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 return (\n <StyledVerticalStepMarkers ref={stepsRef} {...restProps}>\n {steps.map(renderStepItem)}\n </StyledVerticalStepMarkers>\n );\n};\n\nexport default VerticalFormProgress;\n"]}

package/lib/components/MultiStepForm/useFormProgressOverflow.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-export declare const useFormProgressOverflow: (numberOfSteps: number, withLabels?: boolean) => {
+export declare const useFormProgressOverflow: (numberOfSteps: number, withLabels?: boolean, barMode?: boolean) => {
     ref: import("react").RefObject<HTMLOListElement>;
     state: boolean | undefined;
 };

package/lib/components/MultiStepForm/useFormProgressOverflow.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useFormProgressOverflow.d.ts","sourceRoot":"","sources":["../../../src/components/MultiStepForm/useFormProgressOverflow.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,uBAAuB,~~GAAI~~,eAAe,MAAM,~~EAAE~~,aAAa,OAAO;;;~~CA0ClF~~,CAAC;AAEF,eAAe,uBAAuB,CAAC"}
1	+ {"version":3,"file":"useFormProgressOverflow.d.ts","sourceRoot":"","sources":["../../../src/components/MultiStepForm/useFormProgressOverflow.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,uBAAuB,GAClC,eAAe,MAAM,EACrB,aAAa,OAAO,EACpB,UAAU,OAAO;;;CAoDlB,CAAC;AAEF,eAAe,uBAAuB,CAAC"}

package/lib/components/MultiStepForm/useFormProgressOverflow.js CHANGED Viewed

@@ -2,14 +2,14 @@ import { useLayoutEffect, useRef, useState } from 'react';
 import { remToPx, stripUnit } from 'polished';
 import { useChToPxConversionFactor, useTheme } from '../../hooks';
 import { tryCatch } from '../../utils';
-import { stepItemMinWidth, stepMarkerMinWidth } from './FormProgress.styles';
-export const useFormProgressOverflow = (numberOfSteps, withLabels) => {
+import { stepBarMinWidth, stepItemMinWidth, stepMarkerMinWidth } from './FormProgress.styles';
+export const useFormProgressOverflow = (numberOfSteps, withLabels, barMode) => {
     const ref = useRef(null);
     const [state, setState] = useState(undefined);
     const chToPxConversionFactor = useChToPxConversionFactor();
     const itemWidth = withLabels
         ? chToPxConversionFactor * stepItemMinWidth
-        : chToPxConversionFactor * stepMarkerMinWidth;
+        : chToPxConversionFactor * (barMode ? stepBarMinWidth : stepMarkerMinWidth);
     const theme = useTheme();
     const itemSpacing = Number(stripUnit(tryCatch(() => remToPx(theme.base.spacing), () => '16px')));
     useLayoutEffect(() => {
@@ -18,17 +18,25 @@ export const useFormProgressOverflow = (numberOfSteps, withLabels) => {
             return;
         const ro = new ResizeObserver(() => {
             const olWidth = ol.offsetWidth ?? 0;
-            // Adding 1 to maxVisibleItems to account for the fact that the first and last item are half size,
-            // so their overall width is equal to itemWidth, but need to be counted as 2 items
-            const maxVisibleItems = Math.floor(olWidth / (itemWidth + itemSpacing) + 1);
-            const itemsOverflowing = numberOfSteps > maxVisibleItems;
-            setState(itemsOverflowing);
+            let maxVisibleItems;
+            if (barMode) {
+                // All bar segments are equal size; gap is the spacing between them.
+                // Min total width = N * minWidth + (N-1) * gap
+                // Overflow when N > (olWidth + gap) / (minWidth + gap)
+                maxVisibleItems = Math.floor((olWidth + itemSpacing) / (itemWidth + itemSpacing));
+            }
+            else {
+                // Adding 1 to maxVisibleItems to account for the fact that the first and last item are half size,
+                // so their overall width is equal to itemWidth, but need to be counted as 2 items
+                maxVisibleItems = Math.floor(olWidth / (itemWidth + itemSpacing) + 1);
+            }
+            setState(numberOfSteps > maxVisibleItems);
         });
         ro.observe(ol);
         return () => {
             ro.disconnect();
         };
-    }, [itemWidth, itemSpacing, numberOfSteps]);
+    }, [itemWidth, itemSpacing, numberOfSteps, barMode]);
     return { ref, state };
 };
 export default useFormProgressOverflow;

package/lib/components/MultiStepForm/useFormProgressOverflow.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useFormProgressOverflow.js","sourceRoot":"","sources":["../../../src/components/MultiStepForm/useFormProgressOverflow.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC1D,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAE9C,OAAO,EAAE,yBAAyB,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAClE,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAEvC,OAAO,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;~~AAE7E~~,MAAM,CAAC,MAAM,uBAAuB,GAAG,~~CAAC~~,aAAqB,~~EAAE~~,UAAoB,~~EAAE~~,EAAE;~~IACrF~~,MAAM,GAAG,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IAC3C,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAsB,SAAS,CAAC,CAAC;IAEnE,MAAM,sBAAsB,GAAG,yBAAyB,EAAE,CAAC;IAC3D,MAAM,SAAS,GAAG,UAAU;QAC1B,CAAC,CAAC,sBAAsB,GAAG,gBAAgB;QAC3C,CAAC,CAAC,sBAAsB,GAAG,kBAAkB,CAAC;~~IAEhD~~,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IAEzB,MAAM,WAAW,GAAG,MAAM,CACxB,SAAS,CACP,QAAQ,CACN,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,EACjC,GAAG,EAAE,CAAC,MAAM,CACb,CACF,CACF,CAAC;IAEF,eAAe,CAAC,GAAG,EAAE;QACnB,MAAM,EAAE,GAAG,GAAG,CAAC,OAAO,CAAC;QACvB,IAAI,CAAC,EAAE;YAAE,OAAO;QAEhB,MAAM,EAAE,GAAG,IAAI,cAAc,CAAC,GAAG,EAAE;YACjC,MAAM,OAAO,GAAG,EAAE,CAAC,WAAW,IAAI,CAAC,CAAC;YACpC,~~kGAAkG~~;~~YAClG~~,~~kFAAkF~~;~~YAClF~~,~~MAAM~~,eAAe,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,CAAC,SAAS,GAAG,WAAW,CAAC,~~GAAG~~,CAAC,CAAC,CAAC;~~YAC5E~~,~~MAAM~~,~~gBAAgB~~,GAAG,~~aAAa~~,GAAG,~~eAAe~~,CAAC;~~YAEzD~~,QAAQ,CAAC,~~gBAAgB~~,CAAC,CAAC;~~QAC7B~~,CAAC,CAAC,CAAC;QAEH,EAAE,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;QAEf,OAAO,GAAG,EAAE;YACV,EAAE,CAAC,UAAU,EAAE,CAAC;QAClB,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,SAAS,EAAE,WAAW,EAAE,aAAa,CAAC,CAAC,CAAC;~~IAE5C~~,OAAO,EAAE,GAAG,EAAE,KAAK,EAAE,CAAC;AACxB,CAAC,CAAC;AAEF,eAAe,uBAAuB,CAAC","sourcesContent":["import { useLayoutEffect, useRef, useState } from 'react';\nimport { remToPx, stripUnit } from 'polished';\n\nimport { useChToPxConversionFactor, useTheme } from '../../hooks';\nimport { tryCatch } from '../../utils';\n\nimport { stepItemMinWidth, stepMarkerMinWidth } from './FormProgress.styles';\n\nexport const useFormProgressOverflow = (numberOfSteps: number, withLabels?: boolean) => {\n const ref = useRef<HTMLOListElement>(null);\n const [state, setState] = useState<boolean \| undefined>(undefined);\n\n const chToPxConversionFactor = useChToPxConversionFactor();\n const itemWidth = withLabels\n ? chToPxConversionFactor * stepItemMinWidth\n : chToPxConversionFactor * stepMarkerMinWidth;\n\n const theme = useTheme();\n\n const itemSpacing = Number(\n stripUnit(\n tryCatch(\n () => remToPx(theme.base.spacing),\n () => '16px'\n )\n )\n );\n\n useLayoutEffect(() => {\n const ol = ref.current;\n if (!ol) return;\n\n const ro = new ResizeObserver(() => {\n const olWidth = ol.offsetWidth ?? 0;\n // Adding 1 to maxVisibleItems to account for the fact that the first and last item are half size,\n // so their overall width is equal to itemWidth, but need to be counted as 2 items\n ~~const~~ maxVisibleItems = Math.floor(olWidth / (itemWidth + itemSpacing) + 1);\n ~~const itemsOverflowing = numberOfSteps > maxVisibleItems;\~~n\n setState(~~itemsOverflowing~~);\n });\n\n ro.observe(ol);\n\n return () => {\n ro.disconnect();\n };\n }, [itemWidth, itemSpacing, numberOfSteps]);\n\n return { ref, state };\n};\n\nexport default useFormProgressOverflow;\n"]}
1	+ {"version":3,"file":"useFormProgressOverflow.js","sourceRoot":"","sources":["../../../src/components/MultiStepForm/useFormProgressOverflow.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC1D,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAE9C,OAAO,EAAE,yBAAyB,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAClE,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAEvC,OAAO,EAAE,eAAe,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAE9F,MAAM,CAAC,MAAM,uBAAuB,GAAG,CACrC,aAAqB,EACrB,UAAoB,EACpB,OAAiB,EACjB,EAAE;IACF,MAAM,GAAG,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IAC3C,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAsB,SAAS,CAAC,CAAC;IAEnE,MAAM,sBAAsB,GAAG,yBAAyB,EAAE,CAAC;IAC3D,MAAM,SAAS,GAAG,UAAU;QAC1B,CAAC,CAAC,sBAAsB,GAAG,gBAAgB;QAC3C,CAAC,CAAC,sBAAsB,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC;IAE9E,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IAEzB,MAAM,WAAW,GAAG,MAAM,CACxB,SAAS,CACP,QAAQ,CACN,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,EACjC,GAAG,EAAE,CAAC,MAAM,CACb,CACF,CACF,CAAC;IAEF,eAAe,CAAC,GAAG,EAAE;QACnB,MAAM,EAAE,GAAG,GAAG,CAAC,OAAO,CAAC;QACvB,IAAI,CAAC,EAAE;YAAE,OAAO;QAEhB,MAAM,EAAE,GAAG,IAAI,cAAc,CAAC,GAAG,EAAE;YACjC,MAAM,OAAO,GAAG,EAAE,CAAC,WAAW,IAAI,CAAC,CAAC;YACpC,IAAI,eAAuB,CAAC;YAE5B,IAAI,OAAO,EAAE,CAAC;gBACZ,oEAAoE;gBACpE,+CAA+C;gBAC/C,uDAAuD;gBAEvD,eAAe,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,OAAO,GAAG,WAAW,CAAC,GAAG,CAAC,SAAS,GAAG,WAAW,CAAC,CAAC,CAAC;YACpF,CAAC;iBAAM,CAAC;gBACN,kGAAkG;gBAClG,kFAAkF;gBAClF,eAAe,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,CAAC,SAAS,GAAG,WAAW,CAAC,GAAG,CAAC,CAAC,CAAC;YACxE,CAAC;YAED,QAAQ,CAAC,aAAa,GAAG,eAAe,CAAC,CAAC;QAC5C,CAAC,CAAC,CAAC;QAEH,EAAE,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;QAEf,OAAO,GAAG,EAAE;YACV,EAAE,CAAC,UAAU,EAAE,CAAC;QAClB,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,SAAS,EAAE,WAAW,EAAE,aAAa,EAAE,OAAO,CAAC,CAAC,CAAC;IAErD,OAAO,EAAE,GAAG,EAAE,KAAK,EAAE,CAAC;AACxB,CAAC,CAAC;AAEF,eAAe,uBAAuB,CAAC","sourcesContent":["import { useLayoutEffect, useRef, useState } from 'react';\nimport { remToPx, stripUnit } from 'polished';\n\nimport { useChToPxConversionFactor, useTheme } from '../../hooks';\nimport { tryCatch } from '../../utils';\n\nimport { stepBarMinWidth, stepItemMinWidth, stepMarkerMinWidth } from './FormProgress.styles';\n\nexport const useFormProgressOverflow = (\n numberOfSteps: number,\n withLabels?: boolean,\n barMode?: boolean\n) => {\n const ref = useRef<HTMLOListElement>(null);\n const [state, setState] = useState<boolean \| undefined>(undefined);\n\n const chToPxConversionFactor = useChToPxConversionFactor();\n const itemWidth = withLabels\n ? chToPxConversionFactor * stepItemMinWidth\n : chToPxConversionFactor * (barMode ? stepBarMinWidth : stepMarkerMinWidth);\n\n const theme = useTheme();\n\n const itemSpacing = Number(\n stripUnit(\n tryCatch(\n () => remToPx(theme.base.spacing),\n () => '16px'\n )\n )\n );\n\n useLayoutEffect(() => {\n const ol = ref.current;\n if (!ol) return;\n\n const ro = new ResizeObserver(() => {\n const olWidth = ol.offsetWidth ?? 0;\n let maxVisibleItems: number;\n\n if (barMode) {\n // All bar segments are equal size; gap is the spacing between them.\n // Min total width = N * minWidth + (N-1) * gap\n // Overflow when N > (olWidth + gap) / (minWidth + gap)\n\n maxVisibleItems = Math.floor((olWidth + itemSpacing) / (itemWidth + itemSpacing));\n } else {\n // Adding 1 to maxVisibleItems to account for the fact that the first and last item are half size,\n // so their overall width is equal to itemWidth, but need to be counted as 2 items\n maxVisibleItems = Math.floor(olWidth / (itemWidth + itemSpacing) + 1);\n }\n\n setState(numberOfSteps > maxVisibleItems);\n });\n\n ro.observe(ol);\n\n return () => {\n ro.disconnect();\n };\n }, [itemWidth, itemSpacing, numberOfSteps, barMode]);\n\n return { ref, state };\n};\n\nexport default useFormProgressOverflow;\n"]}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"SummaryList.d.ts","sourceRoot":"","sources":["../../../src/components/SummaryList/SummaryList.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAmB,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAI7D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAI/C,OAAa,EAAE,KAAK,SAAS,EAAE,MAAM,SAAS,CAAC;AAG/C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AACrD,OAAO,KAAK,EACV,YAAY,EACZ,+BAA+B,EAC/B,cAAc,EACd,UAAU,EACV,MAAM,EACN,UAAU,EACX,MAAM,aAAa,CAAC;AAKrB,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAIvD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAGrD,MAAM,WAAW,gBAAiB,SAAQ,cAAc;IACtD,uGAAuG;IACvG,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,iDAAiD;IACjD,IAAI,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,GAAG,SAAS,CAAC;IACrC,gFAAgF;IAChF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wHAAwH;IACxH,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,qDAAqD;IACrD,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC3B,qKAAqK;IACrK,KAAK,EAAE,eAAe,EAAE,CAAC;IACzB,4KAA4K;IAC5K,SAAS,CAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,KAAK,IAAI,CAAC;IACzC,2DAA2D;IAC3D,WAAW,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,CAAC;IACzC;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,eAAe,CAAC;IAClC,gGAAgG;IAChG,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,+FAA+F;IAC/F,qBAAqB,CAAC,EAAE,MAAM,IAAI,CAAC;IACnC,yGAAyG;IACzG,gBAAgB,CAAC,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IACjD,8CAA8C;IAC9C,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB;AAED,MAAM,WAAW,eACf,SAAQ,UAAU,CAAC,gBAAgB,EAAE,SAAS,CAAC,EAC7C,IAAI,CAAC,YAAY,EAAE,iBAAiB,CAAC,EACrC,YAAY;IACd,yCAAyC;IACzC,EAAE,EAAE,MAAM,CAAC;IACX,oIAAoI;IACpI,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,8CAA8C;IAC9C,UAAU,CAAC,EAAE,YAAY,CAAC,KAAK,CAAC,CAAC;CAClC;AAED,eAAO,MAAM,uBAAuB;;6IAMnC,CAAC;AAIF,eAAO,MAAM,wBAAwB;cACzB,OAAO,GAAG,MAAM;wJAoB3B,CAAC;AAIF,eAAO,MAAM,qBAAqB;;;;~~iDAQjC~~,CAAC;AAIF,eAAO,MAAM,gBAAgB,GAAI,iBAAiB,IAAI,CAAC,gBAAgB,EAAE,OAAO,GAAG,MAAM,CAAC,4CAqCzF,CAAC;AAEF,QAAA,MAAM,WAAW,EAAE,+BAA+B,CAAC,gBAAgB,CAsHlE,CAAC;AAEF,eAAe,WAAW,CAAC"}
1	+ {"version":3,"file":"SummaryList.d.ts","sourceRoot":"","sources":["../../../src/components/SummaryList/SummaryList.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAmB,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAI7D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAI/C,OAAa,EAAE,KAAK,SAAS,EAAE,MAAM,SAAS,CAAC;AAG/C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AACrD,OAAO,KAAK,EACV,YAAY,EACZ,+BAA+B,EAC/B,cAAc,EACd,UAAU,EACV,MAAM,EACN,UAAU,EACX,MAAM,aAAa,CAAC;AAKrB,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAIvD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAGrD,MAAM,WAAW,gBAAiB,SAAQ,cAAc;IACtD,uGAAuG;IACvG,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,iDAAiD;IACjD,IAAI,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,GAAG,SAAS,CAAC;IACrC,gFAAgF;IAChF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wHAAwH;IACxH,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,qDAAqD;IACrD,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC3B,qKAAqK;IACrK,KAAK,EAAE,eAAe,EAAE,CAAC;IACzB,4KAA4K;IAC5K,SAAS,CAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,KAAK,IAAI,CAAC;IACzC,2DAA2D;IAC3D,WAAW,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,CAAC;IACzC;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,eAAe,CAAC;IAClC,gGAAgG;IAChG,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,+FAA+F;IAC/F,qBAAqB,CAAC,EAAE,MAAM,IAAI,CAAC;IACnC,yGAAyG;IACzG,gBAAgB,CAAC,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IACjD,8CAA8C;IAC9C,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB;AAED,MAAM,WAAW,eACf,SAAQ,UAAU,CAAC,gBAAgB,EAAE,SAAS,CAAC,EAC7C,IAAI,CAAC,YAAY,EAAE,iBAAiB,CAAC,EACrC,YAAY;IACd,yCAAyC;IACzC,EAAE,EAAE,MAAM,CAAC;IACX,oIAAoI;IACpI,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,8CAA8C;IAC9C,UAAU,CAAC,EAAE,YAAY,CAAC,KAAK,CAAC,CAAC;CAClC;AAED,eAAO,MAAM,uBAAuB;;6IAMnC,CAAC;AAIF,eAAO,MAAM,wBAAwB;cACzB,OAAO,GAAG,MAAM;wJAoB3B,CAAC;AAIF,eAAO,MAAM,qBAAqB;;;;iDAmBjC,CAAC;AAIF,eAAO,MAAM,gBAAgB,GAAI,iBAAiB,IAAI,CAAC,gBAAgB,EAAE,OAAO,GAAG,MAAM,CAAC,4CAqCzF,CAAC;AAEF,QAAA,MAAM,WAAW,EAAE,+BAA+B,CAAC,gBAAgB,CAsHlE,CAAC;AAEF,eAAe,WAAW,CAAC"}

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

@@ -11,7 +11,7 @@ import EmptyState from '../EmptyState';
 import { omitProps } from '../../styles';
 import { useI18n, usePrevious, useRefMap } from '../../hooks';
 import { defaultThemeProp } from '../../theme';
-import SummaryItem from '../SummaryItem';
+import SummaryItem, { StyledSecondary } from '../SummaryItem';
 import Progress from '../Progress';
 import Button from '../Button';
 import ErrorState from '../ErrorState';
@@ -41,11 +41,15 @@ export const StyledSummaryListContent = styled(CardContent).withConfig(omitProps
     }
   `);
 StyledSummaryListContent.defaultProps = defaultThemeProp;
-export const StyledSummaryListItem = styled(SummaryItem)(({ theme }) => css `
-    padding-block: ${theme.base.spacing};
+export const StyledSummaryListItem = styled(SummaryItem)(({ theme: { base: { spacing, palette }, components: { 'summary-item': { 'vertical-gap': verticalGap } } } }) => css `
+    padding-block: ${spacing};
+    ${StyledSecondary} {
+      margin-block-start: ${verticalGap};
+    }
     &:not(:last-child) {
-      border-block-end: 0.0625rem solid ${theme.base.palette['border-line']};
+      border-block-end: 0.0625rem solid ${palette['border-line']};
     }
   `);
 StyledSummaryListItem.defaultProps = defaultThemeProp;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"SummaryList.js","sourceRoot":"","sources":["../../../src/components/SummaryList/SummaryList.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useEffect, useMemo, useRef } from 'react';\nimport type { PropsWithoutRef, Ref, RefObject } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Actions from '../Actions';\nimport type { ActionsProps } from '../Actions';\nimport Flex from '../Flex';\nimport Text from '../Text';\nimport Count from '../Badges/Count';\nimport Icon, { type IconProps } from '../Icon';\nimport Card, { CardHeader, CardContent, CardFooter, StyledCard } from '../Card';\nimport EmptyState from '../EmptyState';\nimport type { EmptyStateProps } from '../EmptyState';\nimport type {\n ForwardProps,\n ForwardRefForwardPropsComponent,\n NoChildrenProp,\n OmitStrict,\n Action,\n HeadingTag\n} from '../../types';\nimport { omitProps } from '../../styles';\nimport { useI18n, usePrevious, useRefMap } from '../../hooks';\nimport { defaultThemeProp } from '../../theme';\nimport SummaryItem from '../SummaryItem';\nimport type { SummaryItemProps } from '../SummaryItem';\nimport Progress from '../Progress';\nimport Button from '../Button';\nimport ErrorState from '../ErrorState';\nimport type { ErrorStateProps } from '../ErrorState';\nimport { StyledCardFooter } from '../Card/CardFooter';\n\nexport interface SummaryListProps extends NoChildrenProp {\n /** Name of the utility to be used as its heading along with associated actions and aria attributes. /\n name?: string;\n /\n The heading tag to render the provided name as with.\n * @default 'h2'\n /\n headingTag?: HeadingTag;\n /\n Hides the header while still allowing 'name' prop to supply aria attributes\n * @default false\n /\n hideHeader?: boolean;\n /* Identifier for the icon within Pega icons. /\n icon?: IconProps['name'] \| IconProps;\n /* Integer representing the total count of items for a list utility dataset. /\n count?: number;\n /* Top level actions for the utility. If more than one action is passed a consolidated ActionMenu will be generated. /\n actions?: Action[];\n /* If the utility is in a state of fetching data. /\n loading?: boolean \| string;\n /* An array of SummaryListItem objects to render. Pass an appropriately limited length array with a desired sort order based on design system defaults or config. /\n items: SummaryListItem[];\n /* User click initiated callback for when to show view all modal. List lengths less than the count prop will display a \"View all\" button with this function is bound to. /\n onViewAll?: (callback: Function) => void;\n /* A simple message to display when there are no items. /\n noItemsText?: EmptyStateProps['message'];\n /\n Indicate an error occurred while acquiring data for the list.\n * The default error state may be overridden with custom props.\n /\n error?: boolean \| ErrorStateProps;\n /* ID of the item that was just deleted. Setting this triggers post-delete focus management. /\n deletedItemId?: string;\n /* Called after focus has been managed post-delete so the consumer can clear deletedItemId. /\n onDeleteFocusComplete?: () => void;\n /* Ref to the fallback element (e.g. Add button) to focus when the list becomes empty after deletion. /\n fallbackFocusRef?: RefObject<HTMLElement \| null>;\n /* Ref for the SummaryList's root element. /\n ref?: Ref<HTMLElement>;\n}\n\nexport interface SummaryListItem\n extends OmitStrict<SummaryItemProps, 'actions'>,\n Pick<ActionsProps, 'contextualLabel'>,\n ForwardProps {\n /* A unique id to represent the item. /\n id: string;\n /* A set of Actions to render alongside the item. If more than one action is passed a consolidated ActionMenu will be generated. /\n actions?: Action[];\n /* Ref for the action menu button element. */\n actionsRef?: ActionsProps['ref'];\n}\n\nexport const StyledSummaryListHeader = styled(CardHeader)(\n ({ theme }) => css`\n &:not(${StyledCard} ${StyledCard} > &) {\n padding-block-end: calc(${theme.base.spacing} / 2);\n }\n `\n);\n\nStyledSummaryListHeader.defaultProps = defaultThemeProp;\n\nexport const StyledSummaryListContent = styled(CardContent).withConfig(omitProps('loading'))<{\n loading?: boolean \| string;\n}>(\n ({ theme, loading }) => css`\n ${loading &&\n css`\n min-height: 4rem;\n `}\n\n &:not(:last-child) > ul > li:last-child {\n border-block-end: 0.0625rem solid ${theme.base.palette['border-line']};\n }\n\n &:not(${StyledCard} ${StyledCard} > &) {\n padding-block-end: calc(${theme.base.spacing} / 2);\n\n & + ${StyledCardFooter} {\n padding-block-start: ${theme.base.spacing};\n }\n }\n `\n);\n\nStyledSummaryListContent.defaultProps = defaultThemeProp;\n\nexport const StyledSummaryListItem = styled(SummaryItem)(\n ({ theme }) => css`\n padding-block: ${theme.base.spacing};\n\n &:not(:last-child) {\n border-block-end: 0.0625rem solid ${theme.base.palette['border-line']};\n }\n `\n);\n\nStyledSummaryListItem.defaultProps = defaultThemeProp;\n\nexport const SummaryListItems = ({ name, items }: Pick<SummaryListProps, 'items' \| 'name'>) => {\n const t = useI18n();\n return (\n <ul>\n {items.map(\n ({\n id,\n actions: itemActions,\n actionsRef,\n contextualLabel,\n iconColor,\n ...restItemProps\n }) => {\n return (\n <StyledSummaryListItem\n key={id}\n {...restItemProps}\n forwardedAs='li'\n actions={\n itemActions && (\n <Actions\n ref={actionsRef}\n items={itemActions}\n contextualLabel={\n name && contextualLabel\n ? t('action_from_summarylist_heading', [contextualLabel, name])\n : contextualLabel\n }\n />\n )\n }\n />\n );\n }\n )}\n </ul>\n );\n};\n\nconst SummaryList: ForwardRefForwardPropsComponent<SummaryListProps> = forwardRef(\n function SummaryList(\n {\n icon,\n name,\n headingTag = 'h2',\n hideHeader,\n count,\n actions,\n items,\n onViewAll,\n loading,\n noItemsText,\n error,\n deletedItemId,\n onDeleteFocusComplete,\n fallbackFocusRef,\n ...restProps\n }: PropsWithoutRef<SummaryListProps>,\n ref: SummaryListProps['ref']\n ) {\n const t = useI18n();\n\n // Delete focus management\n const [actionRefMap, getActionRefCb] = useRefMap<HTMLButtonElement>();\n const prevItems = usePrevious(items);\n const hasProcessedDeleteRef = useRef(false);\n const headerActionsRef = useRef<HTMLButtonElement>(null);\n\n const processedItems = useMemo(() => {\n return items.map(item => {\n const refCb = getActionRefCb(item.id);\n return {\n ...item,\n actionsRef(el: HTMLButtonElement \| null) {\n refCb(el);\n if (typeof item.actionsRef === 'function') item.actionsRef(el);\n }\n };\n });\n }, [items]);\n\n useEffect(() => {\n if (!deletedItemId) {\n hasProcessedDeleteRef.current = false;\n return;\n }\n if (hasProcessedDeleteRef.current) return;\n\n const stillPresent = items.some(item => item.id === deletedItemId);\n if (stillPresent) return;\n\n hasProcessedDeleteRef.current = true;\n\n if (items.length === 0) {\n const fallbackEl = fallbackFocusRef?.current ?? headerActionsRef.current;\n fallbackEl?.focus();\n } else {\n const prevIndex = prevItems?.findIndex(item => item.id === deletedItemId) ?? -1;\n let targetIndex = Math.min(prevIndex, items.length - 1);\n if (targetIndex < 0) targetIndex = 0;\n\n const targetId = items[targetIndex]?.id;\n if (targetId) {\n actionRefMap.get(targetId)?.focus();\n }\n }\n\n onDeleteFocusComplete?.();\n }, [deletedItemId, items]);\n\n const content = useMemo(() => {\n if (loading) {\n return (\n <Progress placement='local' message={typeof loading === 'string' ? loading : undefined} />\n );\n }\n\n if (error) {\n return <ErrorState {...(error === true ? {} : error)} />;\n }\n\n return items.length > 0 ? (\n <SummaryListItems name={name} items={processedItems} />\n ) : (\n <EmptyState message={noItemsText} />\n );\n }, [loading, items, processedItems, noItemsText, error]);\n\n return (\n <Card ref={ref} {...restProps}>\n {!hideHeader && (icon \|\| name \|\| typeof count === 'number' \|\| actions) && (\n <StyledSummaryListHeader>\n <Flex container={{ alignItems: 'center', gap: 1 }}>\n {icon && (typeof icon === 'string' ? <Icon name={icon} /> : <Icon {...icon} />)}\n {name && <Text variant={headingTag}>{name}</Text>}\n {typeof count === 'number' && <Count>{count}</Count>}\n </Flex>\n {actions && <Actions ref={headerActionsRef} items={actions} contextualLabel={name} />}\n </StyledSummaryListHeader>\n )}\n\n <StyledSummaryListContent loading={loading}>{content}</StyledSummaryListContent>\n\n {!error && typeof count === 'number' && count > items.length && onViewAll && (\n <CardFooter justify='center'>\n <Button\n variant='link'\n aria-label={name ? t('view_all_noun', [name.toLowerCase()]) : t('view_all')}\n onClick={onViewAll}\n >\n {t('view_all')}\n </Button>\n </CardFooter>\n )}\n </Card>\n );\n }\n);\n\nexport default SummaryList;\n"]}
1	+ {"version":3,"file":"SummaryList.js","sourceRoot":"","sources":["../../../src/components/SummaryList/SummaryList.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useEffect, useMemo, useRef } from 'react';\nimport type { PropsWithoutRef, Ref, RefObject } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Actions from '../Actions';\nimport type { ActionsProps } from '../Actions';\nimport Flex from '../Flex';\nimport Text from '../Text';\nimport Count from '../Badges/Count';\nimport Icon, { type IconProps } from '../Icon';\nimport Card, { CardHeader, CardContent, CardFooter, StyledCard } from '../Card';\nimport EmptyState from '../EmptyState';\nimport type { EmptyStateProps } from '../EmptyState';\nimport type {\n ForwardProps,\n ForwardRefForwardPropsComponent,\n NoChildrenProp,\n OmitStrict,\n Action,\n HeadingTag\n} from '../../types';\nimport { omitProps } from '../../styles';\nimport { useI18n, usePrevious, useRefMap } from '../../hooks';\nimport { defaultThemeProp } from '../../theme';\nimport SummaryItem, { StyledSecondary } from '../SummaryItem';\nimport type { SummaryItemProps } from '../SummaryItem';\nimport Progress from '../Progress';\nimport Button from '../Button';\nimport ErrorState from '../ErrorState';\nimport type { ErrorStateProps } from '../ErrorState';\nimport { StyledCardFooter } from '../Card/CardFooter';\n\nexport interface SummaryListProps extends NoChildrenProp {\n /** Name of the utility to be used as its heading along with associated actions and aria attributes. /\n name?: string;\n /\n The heading tag to render the provided name as with.\n * @default 'h2'\n /\n headingTag?: HeadingTag;\n /\n Hides the header while still allowing 'name' prop to supply aria attributes\n * @default false\n /\n hideHeader?: boolean;\n /* Identifier for the icon within Pega icons. /\n icon?: IconProps['name'] \| IconProps;\n /* Integer representing the total count of items for a list utility dataset. /\n count?: number;\n /* Top level actions for the utility. If more than one action is passed a consolidated ActionMenu will be generated. /\n actions?: Action[];\n /* If the utility is in a state of fetching data. /\n loading?: boolean \| string;\n /* An array of SummaryListItem objects to render. Pass an appropriately limited length array with a desired sort order based on design system defaults or config. /\n items: SummaryListItem[];\n /* User click initiated callback for when to show view all modal. List lengths less than the count prop will display a \"View all\" button with this function is bound to. /\n onViewAll?: (callback: Function) => void;\n /* A simple message to display when there are no items. /\n noItemsText?: EmptyStateProps['message'];\n /\n Indicate an error occurred while acquiring data for the list.\n * The default error state may be overridden with custom props.\n /\n error?: boolean \| ErrorStateProps;\n /* ID of the item that was just deleted. Setting this triggers post-delete focus management. /\n deletedItemId?: string;\n /* Called after focus has been managed post-delete so the consumer can clear deletedItemId. /\n onDeleteFocusComplete?: () => void;\n /* Ref to the fallback element (e.g. Add button) to focus when the list becomes empty after deletion. /\n fallbackFocusRef?: RefObject<HTMLElement \| null>;\n /* Ref for the SummaryList's root element. /\n ref?: Ref<HTMLElement>;\n}\n\nexport interface SummaryListItem\n extends OmitStrict<SummaryItemProps, 'actions'>,\n Pick<ActionsProps, 'contextualLabel'>,\n ForwardProps {\n /* A unique id to represent the item. /\n id: string;\n /* A set of Actions to render alongside the item. If more than one action is passed a consolidated ActionMenu will be generated. /\n actions?: Action[];\n /* Ref for the action menu button element. */\n actionsRef?: ActionsProps['ref'];\n}\n\nexport const StyledSummaryListHeader = styled(CardHeader)(\n ({ theme }) => css`\n &:not(${StyledCard} ${StyledCard} > &) {\n padding-block-end: calc(${theme.base.spacing} / 2);\n }\n `\n);\n\nStyledSummaryListHeader.defaultProps = defaultThemeProp;\n\nexport const StyledSummaryListContent = styled(CardContent).withConfig(omitProps('loading'))<{\n loading?: boolean \| string;\n}>(\n ({ theme, loading }) => css`\n ${loading &&\n css`\n min-height: 4rem;\n `}\n\n &:not(:last-child) > ul > li:last-child {\n border-block-end: 0.0625rem solid ${theme.base.palette['border-line']};\n }\n\n &:not(${StyledCard} ${StyledCard} > &) {\n padding-block-end: calc(${theme.base.spacing} / 2);\n\n & + ${StyledCardFooter} {\n padding-block-start: ${theme.base.spacing};\n }\n }\n `\n);\n\nStyledSummaryListContent.defaultProps = defaultThemeProp;\n\nexport const StyledSummaryListItem = styled(SummaryItem)(\n ({\n theme: {\n base: { spacing, palette },\n components: {\n 'summary-item': { 'vertical-gap': verticalGap }\n }\n }\n }) => css`\n padding-block: ${spacing};\n\n ${StyledSecondary} {\n margin-block-start: ${verticalGap};\n }\n\n &:not(:last-child) {\n border-block-end: 0.0625rem solid ${palette['border-line']};\n }\n `\n);\n\nStyledSummaryListItem.defaultProps = defaultThemeProp;\n\nexport const SummaryListItems = ({ name, items }: Pick<SummaryListProps, 'items' \| 'name'>) => {\n const t = useI18n();\n return (\n <ul>\n {items.map(\n ({\n id,\n actions: itemActions,\n actionsRef,\n contextualLabel,\n iconColor,\n ...restItemProps\n }) => {\n return (\n <StyledSummaryListItem\n key={id}\n {...restItemProps}\n forwardedAs='li'\n actions={\n itemActions && (\n <Actions\n ref={actionsRef}\n items={itemActions}\n contextualLabel={\n name && contextualLabel\n ? t('action_from_summarylist_heading', [contextualLabel, name])\n : contextualLabel\n }\n />\n )\n }\n />\n );\n }\n )}\n </ul>\n );\n};\n\nconst SummaryList: ForwardRefForwardPropsComponent<SummaryListProps> = forwardRef(\n function SummaryList(\n {\n icon,\n name,\n headingTag = 'h2',\n hideHeader,\n count,\n actions,\n items,\n onViewAll,\n loading,\n noItemsText,\n error,\n deletedItemId,\n onDeleteFocusComplete,\n fallbackFocusRef,\n ...restProps\n }: PropsWithoutRef<SummaryListProps>,\n ref: SummaryListProps['ref']\n ) {\n const t = useI18n();\n\n // Delete focus management\n const [actionRefMap, getActionRefCb] = useRefMap<HTMLButtonElement>();\n const prevItems = usePrevious(items);\n const hasProcessedDeleteRef = useRef(false);\n const headerActionsRef = useRef<HTMLButtonElement>(null);\n\n const processedItems = useMemo(() => {\n return items.map(item => {\n const refCb = getActionRefCb(item.id);\n return {\n ...item,\n actionsRef(el: HTMLButtonElement \| null) {\n refCb(el);\n if (typeof item.actionsRef === 'function') item.actionsRef(el);\n }\n };\n });\n }, [items]);\n\n useEffect(() => {\n if (!deletedItemId) {\n hasProcessedDeleteRef.current = false;\n return;\n }\n if (hasProcessedDeleteRef.current) return;\n\n const stillPresent = items.some(item => item.id === deletedItemId);\n if (stillPresent) return;\n\n hasProcessedDeleteRef.current = true;\n\n if (items.length === 0) {\n const fallbackEl = fallbackFocusRef?.current ?? headerActionsRef.current;\n fallbackEl?.focus();\n } else {\n const prevIndex = prevItems?.findIndex(item => item.id === deletedItemId) ?? -1;\n let targetIndex = Math.min(prevIndex, items.length - 1);\n if (targetIndex < 0) targetIndex = 0;\n\n const targetId = items[targetIndex]?.id;\n if (targetId) {\n actionRefMap.get(targetId)?.focus();\n }\n }\n\n onDeleteFocusComplete?.();\n }, [deletedItemId, items]);\n\n const content = useMemo(() => {\n if (loading) {\n return (\n <Progress placement='local' message={typeof loading === 'string' ? loading : undefined} />\n );\n }\n\n if (error) {\n return <ErrorState {...(error === true ? {} : error)} />;\n }\n\n return items.length > 0 ? (\n <SummaryListItems name={name} items={processedItems} />\n ) : (\n <EmptyState message={noItemsText} />\n );\n }, [loading, items, processedItems, noItemsText, error]);\n\n return (\n <Card ref={ref} {...restProps}>\n {!hideHeader && (icon \|\| name \|\| typeof count === 'number' \|\| actions) && (\n <StyledSummaryListHeader>\n <Flex container={{ alignItems: 'center', gap: 1 }}>\n {icon && (typeof icon === 'string' ? <Icon name={icon} /> : <Icon {...icon} />)}\n {name && <Text variant={headingTag}>{name}</Text>}\n {typeof count === 'number' && <Count>{count}</Count>}\n </Flex>\n {actions && <Actions ref={headerActionsRef} items={actions} contextualLabel={name} />}\n </StyledSummaryListHeader>\n )}\n\n <StyledSummaryListContent loading={loading}>{content}</StyledSummaryListContent>\n\n {!error && typeof count === 'number' && count > items.length && onViewAll && (\n <CardFooter justify='center'>\n <Button\n variant='link'\n aria-label={name ? t('view_all_noun', [name.toLowerCase()]) : t('view_all')}\n onClick={onViewAll}\n >\n {t('view_all')}\n </Button>\n </CardFooter>\n )}\n </Card>\n );\n }\n);\n\nexport default SummaryList;\n"]}

package/lib/theme/theme.d.ts CHANGED Viewed

@@ -1438,6 +1438,12 @@ export declare const BaseThemeMachine: ThemeMachine<{
                 $value: string;
             };
         };
+        "multi-step-form": {
+            "bar-indicator-border-radius": {
+                $type: string;
+                $value: string;
+            };
+        };
         progress: {
             "progress-color": {
                 $type: string;
@@ -1562,6 +1568,12 @@ export declare const BaseThemeMachine: ThemeMachine<{
                 };
             };
         };
+        "summary-item": {
+            "vertical-gap": {
+                $type: string;
+                $value: string;
+            };
+        };
         switch: {
             height: {
                 $type: string;
@@ -1798,6 +1810,12 @@ export declare const BaseThemeMachine: ThemeMachine<{
                 };
             };
         };
+        tasks: {
+            "button-style": {
+                $type: string;
+                $value: string;
+            };
+        };
         text: {
             primary: {
                 "font-size": {
@@ -2545,6 +2563,9 @@ export declare const WorkTheme: {
             readonly "background-color": string;
             readonly "font-weight": string;
         };
+        readonly "multi-step-form": {
+            readonly "bar-indicator-border-radius": string;
+        };
         readonly progress: {
             readonly "progress-color": string;
         };
@@ -2597,6 +2618,9 @@ export declare const WorkTheme: {
                 readonly foreground: string;
             };
         };
+        readonly "summary-item": {
+            readonly "vertical-gap": string;
+        };
         readonly switch: {
             readonly height: string;
             readonly width: string;
@@ -2686,6 +2710,9 @@ export declare const WorkTheme: {
                 };
             };
         };
+        readonly tasks: {
+            readonly "button-style": string;
+        };
         readonly text: {
             readonly primary: {
                 readonly "font-size": string;
@@ -3288,6 +3315,9 @@ export declare const defaultThemeProp: Readonly<{
                 readonly "background-color": string;
                 readonly "font-weight": string;
             };
+            readonly "multi-step-form": {
+                readonly "bar-indicator-border-radius": string;
+            };
             readonly progress: {
                 readonly "progress-color": string;
             };
@@ -3340,6 +3370,9 @@ export declare const defaultThemeProp: Readonly<{
                     readonly foreground: string;
                 };
             };
+            readonly "summary-item": {
+                readonly "vertical-gap": string;
+            };
             readonly switch: {
                 readonly height: string;
                 readonly width: string;
@@ -3429,6 +3462,9 @@ export declare const defaultThemeProp: Readonly<{
                     };
                 };
             };
+            readonly tasks: {
+                readonly "button-style": string;
+            };
             readonly text: {
                 readonly primary: {
                     readonly "font-size": string;