npm - @pega/cosmos-react-core - Versions diffs - 10.0.0-build.4.4 → 10.0.0-build.4.6 - Mend

@pega/cosmos-react-core 10.0.0-build.4.4 → 10.0.0-build.4.6

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 (94) 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/RadioCheckGroup/RadioCheckGroup.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RadioCheckGroup.d.ts","sourceRoot":"","sources":["../../../src/components/RadioCheckGroup/RadioCheckGroup.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,GAAG,EAEH,YAAY,EACZ,WAAW,EAEZ,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EAAc,UAAU,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAE1E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAEnD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AACvD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAUrD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAMhE,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAC/C,UAAU,EACV,UAAU,CAAC,OAAO,QAAQ,CAAC,GACzB,IAAI,CAAC,gBAAgB,EAAE,YAAY,CAAC,GAAG;IACrC,sDAAsD;IACtD,QAAQ,CAAC,EAAE,YAAY,GAAG,YAAY,EAAE,CAAC;IACzC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACtD,mGAAmG;IACnG,OAAO,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC,CAAC;IACpC,oDAAoD;IACpD,MAAM,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACpC,2DAA2D;IAC3D,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC,uCAAuC;IACvC,WAAW,CAAC,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAC9C,6GAA6G;IAC7G,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,wEAAwE;IACxE,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,qFAAqF;IACrF,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC;;;OAGG;IACH,MAAM,CAAC,EAAE,cAAc,CAAC,QAAQ,CAAC,CAAC;IAClC;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,+FAA+F;IAC/F,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC;;;OAGG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,GAAG,WAAW,CAAC;IACnD,8EAA8E;IAC9E,cAAc,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;IACpD;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,6CAA6C;IAC7C,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB,CACJ,CAAC;AAEF,eAAO,MAAM,qBAAqB,+OA8BhC,CAAC;;;;~~AAuNH~~,wBAAuE"}
1	+ {"version":3,"file":"RadioCheckGroup.d.ts","sourceRoot":"","sources":["../../../src/components/RadioCheckGroup/RadioCheckGroup.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,GAAG,EAEH,YAAY,EACZ,WAAW,EAEZ,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EAAc,UAAU,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAE1E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAEnD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AACvD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAUrD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAMhE,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAC/C,UAAU,EACV,UAAU,CAAC,OAAO,QAAQ,CAAC,GACzB,IAAI,CAAC,gBAAgB,EAAE,YAAY,CAAC,GAAG;IACrC,sDAAsD;IACtD,QAAQ,CAAC,EAAE,YAAY,GAAG,YAAY,EAAE,CAAC;IACzC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACtD,mGAAmG;IACnG,OAAO,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC,CAAC;IACpC,oDAAoD;IACpD,MAAM,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACpC,2DAA2D;IAC3D,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC,uCAAuC;IACvC,WAAW,CAAC,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAC9C,6GAA6G;IAC7G,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,wEAAwE;IACxE,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,qFAAqF;IACrF,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC;;;OAGG;IACH,MAAM,CAAC,EAAE,cAAc,CAAC,QAAQ,CAAC,CAAC;IAClC;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,+FAA+F;IAC/F,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC;;;OAGG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,GAAG,WAAW,CAAC;IACnD,8EAA8E;IAC9E,cAAc,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;IACpD;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,6CAA6C;IAC7C,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB,CACJ,CAAC;AAEF,eAAO,MAAM,qBAAqB,+OA8BhC,CAAC;;;;AAwNH,wBAAuE"}

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

@@ -155,7 +155,7 @@ const RadioCheckGroup = forwardRef(function RadioCheckGroup(props, ref) {
             });
         });
     }, [children, name, disabled, readOnly, variant, onChange]);
-    return (_jsx(FormField, { testId: testIds, as: StyledRadioCheckGroup, ref: containerRef, name: name, disabled: disabled, required: required, ...restProps, inline: false, suggestion: suggestion, isRadioCheck: true, onClear: onClear,
+    return (_jsx(FormField, { testId: testIds, as: StyledRadioCheckGroup, ref: containerRef, name: name, disabled: disabled, required: required, ...restProps, inline: false, suggestion: suggestion, isRadioCheck: true, labelVariant: variant === 'card-grid' ? 'h3' : undefined, onClear: onClear,
         // Prevents blur when any input within the group is actively focused.
         onMouseDown: (e) => {
             restProps.onMouseDown?.(e);

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

	@@ -1 +1 @@
1	- {"version":3,"file":"RadioCheckGroup.js","sourceRoot":"","sources":["../../../src/components/RadioCheckGroup/RadioCheckGroup.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, Children, cloneElement, useState, useEffect, useRef, useMemo } from 'react';\nimport type {\n Ref,\n PropsWithoutRef,\n ReactElement,\n ChangeEvent,\n MouseEvent as ReactMouseEvent\n} from 'react';\nimport styled, { css, type DefaultTheme } from 'styled-components';\n\nimport type { RefElement, TestIdProp, WithAttributes } from '../../types';\nimport FormField from '../FormField';\nimport type { FormFieldProps } from '../FormField';\nimport { StyledFormField, StyledFormFieldInfo } from '../FormField/FormField';\nimport type { FormControlProps } from '../FormControl';\nimport type { RadioCheckProps } from '../RadioCheck';\nimport Flex from '../Flex';\nimport { defaultThemeProp } from '../../theme';\nimport { useArrows, useConsolidatedRef, useElement, useTestIds, useUID } from '../../hooks';\nimport {\n StyledImageContainer,\n StyledSelectionCard,\n StyledSelectionCardInline\n} from '../SelectionCard/SelectionCard.styles';\nimport { getActiveElement, withTestIds } from '../../utils';\nimport type { elements } from '../FormField/FormField.test-ids';\nimport { StyledRadioCheck } from '../RadioCheck/RadioCheck';\nimport EmptyState, { StyledEmptyState } from '../EmptyState';\n\nimport { getRadioCheckGroupTestIds } from './RadioCheckGroup.test-ids';\n\nexport type RadioCheckGroupProps = WithAttributes<\n 'fieldset',\n TestIdProp<typeof elements> &\n Pick<FormControlProps, 'suggestion'> & {\n /** Accepts Checkboxes or RadioButtons as children. /\n children?: ReactElement \| ReactElement[];\n /\n Conveniently pass an onChange handler to the group to be notified when any of the inputs change.\n * Additionally, onChange can be passed to individual children.\n * Both handlers will be called, child followed by group.\n /\n onChange?: (e: ChangeEvent<HTMLInputElement>) => void;\n /* Callback invoked when the clear button is clicked. If provided will render the clear button. /\n onClear?: FormFieldProps['onClear'];\n /* Set visual state based on a validation state. /\n status?: FormControlProps['status'];\n /* Pass a string or a fragment with an Icon and string. /\n label?: FormControlProps['label'];\n /* Visually hides the label region. /\n labelHidden?: FormControlProps['labelHidden'];\n /* It is recommended to pass a simple string to offer guidance. Text will be styled based on status prop. /\n info?: FormControlProps['info'];\n /* Indicate if the field is required. The browser defaults to false. /\n required?: FormControlProps['required'];\n /* Disable the control. The browser defaults to false. /\n disabled?: FormControlProps['disabled'];\n /* Makes the input non editable and non clickable. The browser defaults to false. /\n readOnly?: FormControlProps['readOnly'];\n /\n Layout field elements inline in a row.\n * @default false\n /\n inline?: FormFieldProps['inline'];\n /* Used to toggle the auto stacking feature of an inlined group.\n * @default true\n /\n autoStack?: boolean;\n /* Sets html name attribute for the underlying control. Useful for mapping to a data field. /\n name?: FormControlProps['name'];\n /\n Controls the styling of the child RadioChecks.\n * @default 'simple'\n /\n variant?: RadioCheckProps['variant'] \| 'card-grid';\n /* Pass a heading and content to show additional information on the field. /\n additionalInfo?: FormControlProps['additionalInfo'];\n /\n Enables arrow key navigation between options in the group.\n * Disable for checkbox groups where each option is independently selectable.\n * @default true\n /\n arrowNavigation?: boolean;\n /* Ref forwarded to the wrapping element. /\n ref?: Ref<HTMLElement>;\n }\n>;\n\nexport const StyledRadioCheckGroup = styled.fieldset(({ theme }) => {\n return css`\n container-type: inline-size;\n flex-wrap: nowrap;\n\n &[disabled] {\n > ${StyledFormField} {\n opacity: unset;\n }\n }\n\n ${StyledSelectionCard} {\n max-width: 100%;\n }\n\n ${StyledSelectionCardInline} ${StyledImageContainer} {\n / To enlarge the image containers to the size of the biggest one /\n min-height: 100%;\n }\n\n ${StyledRadioCheck} > ${StyledFormFieldInfo} {\n display: none;\n }\n\n ${StyledEmptyState} {\n border: 0.0625rem solid ${theme.base.palette['border-line']};\n border-radius: ${theme.components.card['border-radius']};\n padding: calc(2 ${theme.base.spacing});\n }\n `;\n});\n\nStyledRadioCheckGroup.defaultProps = defaultThemeProp;\n\nconst getCardGridColumns = (cardWidth: string) => css`\n @container (min-width: calc(2 * ${cardWidth})) {\n grid-template-columns: repeat(2, 1fr);\n }\n\n @container (min-width: calc(3 * ${cardWidth})) {\n grid-template-columns: repeat(3, 1fr);\n }\n\n @container (min-width: calc(4 * ${cardWidth})) {\n grid-template-columns: repeat(4, 1fr);\n }\n`;\n\nconst getCardGridContainerStyles = (theme: DefaultTheme) => {\n const defaultCardWidth = theme.base['content-width'].sm;\n const inlineImageCardWidth = theme.base['content-width'].md;\n return css`\n display: grid;\n gap: ${theme.base.spacing};\n grid-template-columns: 1fr;\n grid-auto-rows: 1fr;\n\n ${getCardGridColumns(defaultCardWidth)}\n\n &:has(${StyledSelectionCardInline}) {\n ${getCardGridColumns(inlineImageCardWidth)}\n }\n `;\n};\n\nconst StyledCardGrid = styled.div<{\n renderInline: boolean;\n autoStack: boolean;\n childCount: number;\n}>(({ theme, renderInline, autoStack, childCount }) => {\n if (!renderInline) {\n return css`\n display: grid;\n gap: ${theme.base.spacing};\n grid-template-columns: minmax(min-content, max-content);\n grid-auto-rows: 1fr;\n `;\n }\n\n return autoStack\n ? getCardGridContainerStyles(theme)\n : css`\n display: grid;\n gap: ${theme.base.spacing};\n grid-template-columns: repeat(${childCount}, 1fr);\n grid-auto-rows: 1fr;\n `;\n});\n\nStyledCardGrid.defaultProps = defaultThemeProp;\n\nconst RadioCheckGroup = forwardRef<\n RefElement<RadioCheckGroupProps>,\n PropsWithoutRef<RadioCheckGroupProps>\n>(function RadioCheckGroup(props, ref) {\n const uid = useUID();\n const {\n testId,\n children,\n name = uid,\n disabled = false,\n required = false,\n onChange,\n readOnly,\n inline = false,\n autoStack = true,\n variant = 'simple',\n arrowNavigation = true,\n onClear,\n suggestion,\n ...restProps\n } = props;\n\n const testIds = useTestIds(testId, getRadioCheckGroupTestIds);\n const [optionsEl, setOptionsEl] = useElement<HTMLDivElement>();\n\n const [renderInline, setRenderInline] = useState(inline);\n const renderInlineRef = useRef(inline);\n const minInlineWidth = useRef(0);\n const containerRef = useConsolidatedRef(ref);\n const skipRef = useRef<HTMLElement>(null);\n\n useArrows(\n arrowNavigation ? containerRef : skipRef,\n {\n selector: '[data-main-focus]',\n cycle: false,\n dir: 'both'\n },\n [children]\n );\n\n useEffect(() => {\n setRenderInline(inline);\n if (inline && optionsEl && optionsEl.lastChild && autoStack) {\n const intersectionObserver = new IntersectionObserver(\n entries => {\n if (entries[0].intersectionRatio < 1) {\n if (entries[0].rootBounds) minInlineWidth.current = entries[0].rootBounds.width + 1;\n renderInlineRef.current = false;\n setRenderInline(false);\n }\n },\n { root: optionsEl, threshold: 1 }\n );\n\n const resizeObserver = new ResizeObserver(entries => {\n if (!renderInlineRef.current && entries[0].contentRect.width > minInlineWidth.current) {\n renderInlineRef.current = true;\n setRenderInline(true);\n }\n });\n\n intersectionObserver.observe(optionsEl.lastChild as Element);\n resizeObserver.observe(optionsEl);\n\n return () => {\n intersectionObserver.disconnect();\n resizeObserver.disconnect();\n };\n }\n }, [optionsEl, inline, autoStack]);\n\n const mapChildren = useMemo(() => {\n if (!children \|\| Children.toArray(children).filter(Boolean).length === 0) return;\n\n return Children.map(children, child => {\n if (!child) return null;\n return cloneElement(child, {\n name,\n status: restProps.status,\n disabled: disabled \|\| child.props.disabled,\n readOnly: readOnly \|\| child.props.readOnly,\n variant: variant === 'card-grid' ? 'card' : variant,\n suppressAnnouncements: true,\n onChange: onChange\n ? (e: ChangeEvent<HTMLInputElement>) => {\n if (!(readOnly \|\| child.props.readOnly)) {\n child.props.onChange?.(e);\n onChange(e);\n }\n }\n : child.props.onChange\n });\n });\n }, [children, name, disabled, readOnly, variant, onChange]);\n\n return (\n <FormField\n testId={testIds}\n as={StyledRadioCheckGroup}\n ref={containerRef}\n name={name}\n disabled={disabled}\n required={required}\n {...restProps}\n inline={false}\n suggestion={suggestion}\n isRadioCheck\n onClear={onClear}\n // Prevents blur when any input within the group is actively focused.\n onMouseDown={(e: ReactMouseEvent<HTMLFieldSetElement>) => {\n restProps.onMouseDown?.(e);\n\n if (!containerRef.current) return;\n\n if (!containerRef.current.contains(getActiveElement())) return;\n\n if (!(e.target instanceof Element) \|\| !e.target.closest('label')) return;\n\n e.preventDefault();\n }}\n >\n {(() => {\n if (!mapChildren) {\n return <EmptyState variant='bordered' />;\n }\n\n return variant === 'card-grid' ? (\n <StyledCardGrid\n ref={setOptionsEl}\n renderInline={renderInline}\n autoStack={autoStack}\n childCount={Children.count(children)}\n >\n {mapChildren}\n </StyledCardGrid>\n ) : (\n <Flex\n ref={setOptionsEl}\n container={{\n direction: renderInline ? 'row' : 'column',\n colGap: renderInline ? 1.5 : 2,\n rowGap: variant === 'card' ? 1 : 0,\n wrap: 'wrap'\n }}\n >\n {mapChildren}\n </Flex>\n );\n })()}\n </FormField>\n );\n});\n\nexport default withTestIds(RadioCheckGroup, getRadioCheckGroupTestIds);\n"]}
1	+ {"version":3,"file":"RadioCheckGroup.js","sourceRoot":"","sources":["../../../src/components/RadioCheckGroup/RadioCheckGroup.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, Children, cloneElement, useState, useEffect, useRef, useMemo } from 'react';\nimport type {\n Ref,\n PropsWithoutRef,\n ReactElement,\n ChangeEvent,\n MouseEvent as ReactMouseEvent\n} from 'react';\nimport styled, { css, type DefaultTheme } from 'styled-components';\n\nimport type { RefElement, TestIdProp, WithAttributes } from '../../types';\nimport FormField from '../FormField';\nimport type { FormFieldProps } from '../FormField';\nimport { StyledFormField, StyledFormFieldInfo } from '../FormField/FormField';\nimport type { FormControlProps } from '../FormControl';\nimport type { RadioCheckProps } from '../RadioCheck';\nimport Flex from '../Flex';\nimport { defaultThemeProp } from '../../theme';\nimport { useArrows, useConsolidatedRef, useElement, useTestIds, useUID } from '../../hooks';\nimport {\n StyledImageContainer,\n StyledSelectionCard,\n StyledSelectionCardInline\n} from '../SelectionCard/SelectionCard.styles';\nimport { getActiveElement, withTestIds } from '../../utils';\nimport type { elements } from '../FormField/FormField.test-ids';\nimport { StyledRadioCheck } from '../RadioCheck/RadioCheck';\nimport EmptyState, { StyledEmptyState } from '../EmptyState';\n\nimport { getRadioCheckGroupTestIds } from './RadioCheckGroup.test-ids';\n\nexport type RadioCheckGroupProps = WithAttributes<\n 'fieldset',\n TestIdProp<typeof elements> &\n Pick<FormControlProps, 'suggestion'> & {\n /** Accepts Checkboxes or RadioButtons as children. /\n children?: ReactElement \| ReactElement[];\n /\n Conveniently pass an onChange handler to the group to be notified when any of the inputs change.\n * Additionally, onChange can be passed to individual children.\n * Both handlers will be called, child followed by group.\n /\n onChange?: (e: ChangeEvent<HTMLInputElement>) => void;\n /* Callback invoked when the clear button is clicked. If provided will render the clear button. /\n onClear?: FormFieldProps['onClear'];\n /* Set visual state based on a validation state. /\n status?: FormControlProps['status'];\n /* Pass a string or a fragment with an Icon and string. /\n label?: FormControlProps['label'];\n /* Visually hides the label region. /\n labelHidden?: FormControlProps['labelHidden'];\n /* It is recommended to pass a simple string to offer guidance. Text will be styled based on status prop. /\n info?: FormControlProps['info'];\n /* Indicate if the field is required. The browser defaults to false. /\n required?: FormControlProps['required'];\n /* Disable the control. The browser defaults to false. /\n disabled?: FormControlProps['disabled'];\n /* Makes the input non editable and non clickable. The browser defaults to false. /\n readOnly?: FormControlProps['readOnly'];\n /\n Layout field elements inline in a row.\n * @default false\n /\n inline?: FormFieldProps['inline'];\n /* Used to toggle the auto stacking feature of an inlined group.\n * @default true\n /\n autoStack?: boolean;\n /* Sets html name attribute for the underlying control. Useful for mapping to a data field. /\n name?: FormControlProps['name'];\n /\n Controls the styling of the child RadioChecks.\n * @default 'simple'\n /\n variant?: RadioCheckProps['variant'] \| 'card-grid';\n /* Pass a heading and content to show additional information on the field. /\n additionalInfo?: FormControlProps['additionalInfo'];\n /\n Enables arrow key navigation between options in the group.\n * Disable for checkbox groups where each option is independently selectable.\n * @default true\n /\n arrowNavigation?: boolean;\n /* Ref forwarded to the wrapping element. /\n ref?: Ref<HTMLElement>;\n }\n>;\n\nexport const StyledRadioCheckGroup = styled.fieldset(({ theme }) => {\n return css`\n container-type: inline-size;\n flex-wrap: nowrap;\n\n &[disabled] {\n > ${StyledFormField} {\n opacity: unset;\n }\n }\n\n ${StyledSelectionCard} {\n max-width: 100%;\n }\n\n ${StyledSelectionCardInline} ${StyledImageContainer} {\n / To enlarge the image containers to the size of the biggest one /\n min-height: 100%;\n }\n\n ${StyledRadioCheck} > ${StyledFormFieldInfo} {\n display: none;\n }\n\n ${StyledEmptyState} {\n border: 0.0625rem solid ${theme.base.palette['border-line']};\n border-radius: ${theme.components.card['border-radius']};\n padding: calc(2 ${theme.base.spacing});\n }\n `;\n});\n\nStyledRadioCheckGroup.defaultProps = defaultThemeProp;\n\nconst getCardGridColumns = (cardWidth: string) => css`\n @container (min-width: calc(2 * ${cardWidth})) {\n grid-template-columns: repeat(2, 1fr);\n }\n\n @container (min-width: calc(3 * ${cardWidth})) {\n grid-template-columns: repeat(3, 1fr);\n }\n\n @container (min-width: calc(4 * ${cardWidth})) {\n grid-template-columns: repeat(4, 1fr);\n }\n`;\n\nconst getCardGridContainerStyles = (theme: DefaultTheme) => {\n const defaultCardWidth = theme.base['content-width'].sm;\n const inlineImageCardWidth = theme.base['content-width'].md;\n return css`\n display: grid;\n gap: ${theme.base.spacing};\n grid-template-columns: 1fr;\n grid-auto-rows: 1fr;\n\n ${getCardGridColumns(defaultCardWidth)}\n\n &:has(${StyledSelectionCardInline}) {\n ${getCardGridColumns(inlineImageCardWidth)}\n }\n `;\n};\n\nconst StyledCardGrid = styled.div<{\n renderInline: boolean;\n autoStack: boolean;\n childCount: number;\n}>(({ theme, renderInline, autoStack, childCount }) => {\n if (!renderInline) {\n return css`\n display: grid;\n gap: ${theme.base.spacing};\n grid-template-columns: minmax(min-content, max-content);\n grid-auto-rows: 1fr;\n `;\n }\n\n return autoStack\n ? getCardGridContainerStyles(theme)\n : css`\n display: grid;\n gap: ${theme.base.spacing};\n grid-template-columns: repeat(${childCount}, 1fr);\n grid-auto-rows: 1fr;\n `;\n});\n\nStyledCardGrid.defaultProps = defaultThemeProp;\n\nconst RadioCheckGroup = forwardRef<\n RefElement<RadioCheckGroupProps>,\n PropsWithoutRef<RadioCheckGroupProps>\n>(function RadioCheckGroup(props, ref) {\n const uid = useUID();\n const {\n testId,\n children,\n name = uid,\n disabled = false,\n required = false,\n onChange,\n readOnly,\n inline = false,\n autoStack = true,\n variant = 'simple',\n arrowNavigation = true,\n onClear,\n suggestion,\n ...restProps\n } = props;\n\n const testIds = useTestIds(testId, getRadioCheckGroupTestIds);\n const [optionsEl, setOptionsEl] = useElement<HTMLDivElement>();\n\n const [renderInline, setRenderInline] = useState(inline);\n const renderInlineRef = useRef(inline);\n const minInlineWidth = useRef(0);\n const containerRef = useConsolidatedRef(ref);\n const skipRef = useRef<HTMLElement>(null);\n\n useArrows(\n arrowNavigation ? containerRef : skipRef,\n {\n selector: '[data-main-focus]',\n cycle: false,\n dir: 'both'\n },\n [children]\n );\n\n useEffect(() => {\n setRenderInline(inline);\n if (inline && optionsEl && optionsEl.lastChild && autoStack) {\n const intersectionObserver = new IntersectionObserver(\n entries => {\n if (entries[0].intersectionRatio < 1) {\n if (entries[0].rootBounds) minInlineWidth.current = entries[0].rootBounds.width + 1;\n renderInlineRef.current = false;\n setRenderInline(false);\n }\n },\n { root: optionsEl, threshold: 1 }\n );\n\n const resizeObserver = new ResizeObserver(entries => {\n if (!renderInlineRef.current && entries[0].contentRect.width > minInlineWidth.current) {\n renderInlineRef.current = true;\n setRenderInline(true);\n }\n });\n\n intersectionObserver.observe(optionsEl.lastChild as Element);\n resizeObserver.observe(optionsEl);\n\n return () => {\n intersectionObserver.disconnect();\n resizeObserver.disconnect();\n };\n }\n }, [optionsEl, inline, autoStack]);\n\n const mapChildren = useMemo(() => {\n if (!children \|\| Children.toArray(children).filter(Boolean).length === 0) return;\n\n return Children.map(children, child => {\n if (!child) return null;\n return cloneElement(child, {\n name,\n status: restProps.status,\n disabled: disabled \|\| child.props.disabled,\n readOnly: readOnly \|\| child.props.readOnly,\n variant: variant === 'card-grid' ? 'card' : variant,\n suppressAnnouncements: true,\n onChange: onChange\n ? (e: ChangeEvent<HTMLInputElement>) => {\n if (!(readOnly \|\| child.props.readOnly)) {\n child.props.onChange?.(e);\n onChange(e);\n }\n }\n : child.props.onChange\n });\n });\n }, [children, name, disabled, readOnly, variant, onChange]);\n\n return (\n <FormField\n testId={testIds}\n as={StyledRadioCheckGroup}\n ref={containerRef}\n name={name}\n disabled={disabled}\n required={required}\n {...restProps}\n inline={false}\n suggestion={suggestion}\n isRadioCheck\n labelVariant={variant === 'card-grid' ? 'h3' : undefined}\n onClear={onClear}\n // Prevents blur when any input within the group is actively focused.\n onMouseDown={(e: ReactMouseEvent<HTMLFieldSetElement>) => {\n restProps.onMouseDown?.(e);\n\n if (!containerRef.current) return;\n\n if (!containerRef.current.contains(getActiveElement())) return;\n\n if (!(e.target instanceof Element) \|\| !e.target.closest('label')) return;\n\n e.preventDefault();\n }}\n >\n {(() => {\n if (!mapChildren) {\n return <EmptyState variant='bordered' />;\n }\n\n return variant === 'card-grid' ? (\n <StyledCardGrid\n ref={setOptionsEl}\n renderInline={renderInline}\n autoStack={autoStack}\n childCount={Children.count(children)}\n >\n {mapChildren}\n </StyledCardGrid>\n ) : (\n <Flex\n ref={setOptionsEl}\n container={{\n direction: renderInline ? 'row' : 'column',\n colGap: renderInline ? 1.5 : 2,\n rowGap: variant === 'card' ? 1 : 0,\n wrap: 'wrap'\n }}\n >\n {mapChildren}\n </Flex>\n );\n })()}\n </FormField>\n );\n});\n\nexport default withTestIds(RadioCheckGroup, getRadioCheckGroupTestIds);\n"]}

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

@@ -1,5 +1,5 @@
 import type { SelectionCardProps } from './SelectionCard.types';
-export declare const focusableSelector = "a[href], button, input, textarea, select, details, video[controls], audio[controls]";
+export declare const focusableSelector = "a[href], button, input, textarea, select, details, video[controls], audio[controls], div[role=\"button\"]";
 declare const _default: import("react").ForwardRefExoticComponent<Omit<SelectionCardProps, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
     getTestIds: (testIdProp?: import("../..").TestIdProp["testId"]) => import("../..").TestIdsRecord<readonly ["content", "image", "label", "actions"]>;
 };

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

	@@ -1 +1 @@
1	- {"version":3,"file":"SelectionCard.d.ts","sourceRoot":"","sources":["../../../src/components/SelectionCard/SelectionCard.tsx"],"names":[],"mappings":"AAmDA,OAAO,KAAK,EAIV,kBAAkB,EAEnB,MAAM,uBAAuB,CAAC;AAW/B,eAAO,MAAM,iBAAiB,~~wFACyD~~,CAAC;;;;~~AAuSxF~~,wBAAmE"}
1	+ {"version":3,"file":"SelectionCard.d.ts","sourceRoot":"","sources":["../../../src/components/SelectionCard/SelectionCard.tsx"],"names":[],"mappings":"AAmDA,OAAO,KAAK,EAIV,kBAAkB,EAEnB,MAAM,uBAAuB,CAAC;AAW/B,eAAO,MAAM,iBAAiB,8GAC6E,CAAC;;;;AAyS5G,wBAAmE"}

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

@@ -17,7 +17,7 @@ registerIcon(pictureIcon);
 const isTileContent = (img) => {
     return 'foregroundColor' in img;
 };
-export const focusableSelector = 'a[href], button, input, textarea, select, details, video[controls], audio[controls]';
+export const focusableSelector = 'a[href], button, input, textarea, select, details, video[controls], audio[controls], div[role="button"]';
 const SingleField = ({ id, 'data-testid': testId, truncate, value }) => {
     const [el, setEl] = useElement(null);
     return (_jsxs(_Fragment, { children: [_jsx(StyledSingleField, { ref: setEl, id: id, "data-testid": testId, truncate: truncate, children: value }), truncate && el && (_jsx(Tooltip, { target: el, smart: true, children: value }))] }));
@@ -58,13 +58,13 @@ const SelectionCard = forwardRef(function SelectionCard(props, ref) {
         setHasInteractiveElements(focusables?.length || 0);
         setFocusOnInput(focusables?.length === 1 && focusables?.[0] instanceof HTMLInputElement);
         focusables?.forEach(el => el.hasAttribute('data-main-focus')
-            ? el.removeAttribute('tabindex')
+            ? el.setAttribute('tabindex', '0')
             : el.setAttribute('tabindex', '-1'));
     }, [additionalInfo, fields, actions]);
     useFocusTrap(focusOnInput ? null : contentRef, false, [contentRef]);
     useFocusWithin([focusOnInput ? null : contentRef], focused => contentRef.current
         ?.querySelectorAll(focusableSelector)
-        .forEach(el => (focused ? el.removeAttribute('tabindex') : el.setAttribute('tabindex', '-1'))));
+        .forEach(el => focused ? el.setAttribute('tabindex', '0') : el.setAttribute('tabindex', '-1')));
     useEscape(() => containerRef.current?.focus(), focusOnInput ? null : containerRef, [
         containerRef
     ]);