npm - @pega/cosmos-react-core - Versions diffs - 10.0.0-build.4.2 → 10.0.0-build.4.21 - Mend

@pega/cosmos-react-core 10.0.0-build.4.2 → 10.0.0-build.4.21

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 (253) 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/Number/utils.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import BigNumber from 'bignumber.js';
 export function getDecimalSign(locale, options) {
     return (new Intl.NumberFormat(locale, options)
-        .formatToParts(0.1)
+        .formatToParts(1.1)
         .filter((part) => part.type === 'decimal')[0]?.value || '');
 }
 export function getFraction(value) {

package/lib/components/Number/utils.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/components/Number/utils.ts"],"names":[],"mappings":"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","sourcesContent":["import BigNumber from 'bignumber.js';\n\nexport function getDecimalSign(\n locale: Intl.UnicodeBCP47LocaleIdentifier,\n options?: Intl.NumberFormatOptions\n): string {\n return (\n new Intl.NumberFormat(locale, options)\n .formatToParts(0.1)\n .filter((part: { type: string; value: string }) => part.type === 'decimal')[0]?.value \|\| ''\n );\n}\n\nexport function getFraction(value: string) {\n const decPos = value.indexOf('.');\n const substrLength = decPos === -1 ? value.length : decPos;\n return value.substring(substrLength);\n}\n\nexport function getCleanedValue(\n value: string,\n decimalSign: string,\n maximumFractionDigits: number\n): string {\n let rawValue = value.replace(new RegExp(`[^${decimalSign}\\\\d-]+`, 'gu'), '');\n if (decimalSign && decimalSign !== '.') rawValue = rawValue.replace(decimalSign, '.');\n const match = rawValue.match(new RegExp(`-?\\\\d*(\\\\.\\\\d{0,${maximumFractionDigits}})?`));\n if (match && match.length > 0) {\n rawValue = match[0];\n }\n return rawValue;\n}\n\nconst isValidUnit = (unit: string) => {\n try {\n // eslint-disable-next-line no-new\n new Intl.NumberFormat(undefined, { style: 'unit', unit });\n return true;\n } catch {\n return false;\n }\n};\n\nexport const getFormattedValue = (\n value: string,\n locale: string,\n unit?: string,\n {\n notation = 'standard',\n useGrouping = false,\n maximumFractionDigits,\n minimumFractionDigits,\n negative = 'minus-sign'\n }: Pick<\n Intl.NumberFormatOptions,\n 'notation' \| 'useGrouping' \| 'maximumFractionDigits' \| 'minimumFractionDigits'\n > & { negative?: 'minus-sign' \| 'parentheses' } = {}\n) => {\n const isUnit = unit ? isValidUnit(unit) : false;\n const isNegative = value.startsWith('-');\n const formattingValue = negative === 'parentheses' && isNegative ? value.slice(1) : value;\n const [integer = '0', fractionPart] = formattingValue.split('.', 2);\n\n const formatter = new Intl.NumberFormat(locale, {\n notation,\n useGrouping,\n minimumFractionDigits:\n minimumFractionDigits ?? Math.min(maximumFractionDigits ?? 0, fractionPart?.length ?? 0),\n maximumFractionDigits,\n style: isUnit ? 'unit' : undefined,\n unit: isUnit ? unit : undefined,\n numberingSystem: 'latn'\n });\n\n let formatted = formattingValue;\n\n if (formattingValue && !Number.isNaN(parseFloat(integer))) {\n const endsWithDot = fractionPart === '';\n const valueNumber = endsWithDot ? `${formattingValue}1` : formattingValue;\n formatted =\n formatter\n .formatToParts(valueNumber as `${number}`)\n .reduce((result, { type, value: part }) => {\n if (type === 'fraction' && endsWithDot) return result;\n return result + part;\n }, '') + (!isUnit && unit ? `\\u00a0${unit}` : '');\n } else if (unit) {\n if (isUnit)\n formatted = formatter\n .formatToParts(formattingValue.startsWith('-') ? -1 : 1)\n .reduce(\n (result, { type, value: part }) =>\n ['unit', 'minusSign'].includes(type) ? result + part : result,\n ''\n );\n else formatted = formattingValue.startsWith('-') ? `- ${unit}` : unit;\n }\n\n return negative === 'parentheses' && isNegative ? `(${formatted})` : formatted;\n};\n\nexport function isValueInRange(value: number, min?: number, max?: number): boolean {\n return !((min !== undefined && value < min) \|\| (max !== undefined && value > max));\n}\n\nexport function getIncrementedValue(value: string, min: number, max: number, step: number): string {\n const numberValue = parseFloat(value) \|\| 0;\n const newValue = new BigNumber(numberValue).plus(step);\n if (isValueInRange(newValue.toNumber(), min, max)) {\n return newValue.toFixed();\n }\n if (min !== undefined && newValue.toNumber() < min) {\n return min.toString();\n }\n return value;\n}\n\nexport function getDecrementedValue(value: string, min: number, max: number, step: number): string {\n const numberValue = parseFloat(value) \|\| 0;\n const newValue = new BigNumber(numberValue).minus(step);\n if (isValueInRange(newValue.toNumber(), min, max)) {\n return newValue.toFixed();\n }\n if (max !== undefined && newValue.toNumber() > max) {\n return max.toString();\n }\n return value;\n}\n\ninterface NumberFormatOptions {\n locale: string;\n options?: Intl.NumberFormatOptions;\n}\n\nexport function formatNumber(value: number \| bigint, { locale, options }: NumberFormatOptions) {\n const formatter = new Intl.NumberFormat(locale, options);\n\n return formatter.format(value);\n}\n"]}
1	+ {"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/components/Number/utils.ts"],"names":[],"mappings":"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","sourcesContent":["import BigNumber from 'bignumber.js';\n\nexport function getDecimalSign(\n locale: Intl.UnicodeBCP47LocaleIdentifier,\n options?: Intl.NumberFormatOptions\n): string {\n return (\n new Intl.NumberFormat(locale, options)\n .formatToParts(1.1)\n .filter((part: { type: string; value: string }) => part.type === 'decimal')[0]?.value \|\| ''\n );\n}\n\nexport function getFraction(value: string) {\n const decPos = value.indexOf('.');\n const substrLength = decPos === -1 ? value.length : decPos;\n return value.substring(substrLength);\n}\n\nexport function getCleanedValue(\n value: string,\n decimalSign: string,\n maximumFractionDigits: number\n): string {\n let rawValue = value.replace(new RegExp(`[^${decimalSign}\\\\d-]+`, 'gu'), '');\n if (decimalSign && decimalSign !== '.') rawValue = rawValue.replace(decimalSign, '.');\n const match = rawValue.match(new RegExp(`-?\\\\d*(\\\\.\\\\d{0,${maximumFractionDigits}})?`));\n if (match && match.length > 0) {\n rawValue = match[0];\n }\n return rawValue;\n}\n\nconst isValidUnit = (unit: string) => {\n try {\n // eslint-disable-next-line no-new\n new Intl.NumberFormat(undefined, { style: 'unit', unit });\n return true;\n } catch {\n return false;\n }\n};\n\nexport const getFormattedValue = (\n value: string,\n locale: string,\n unit?: string,\n {\n notation = 'standard',\n useGrouping = false,\n maximumFractionDigits,\n minimumFractionDigits,\n negative = 'minus-sign'\n }: Pick<\n Intl.NumberFormatOptions,\n 'notation' \| 'useGrouping' \| 'maximumFractionDigits' \| 'minimumFractionDigits'\n > & { negative?: 'minus-sign' \| 'parentheses' } = {}\n) => {\n const isUnit = unit ? isValidUnit(unit) : false;\n const isNegative = value.startsWith('-');\n const formattingValue = negative === 'parentheses' && isNegative ? value.slice(1) : value;\n const [integer = '0', fractionPart] = formattingValue.split('.', 2);\n\n const formatter = new Intl.NumberFormat(locale, {\n notation,\n useGrouping,\n minimumFractionDigits:\n minimumFractionDigits ?? Math.min(maximumFractionDigits ?? 0, fractionPart?.length ?? 0),\n maximumFractionDigits,\n style: isUnit ? 'unit' : undefined,\n unit: isUnit ? unit : undefined,\n numberingSystem: 'latn'\n });\n\n let formatted = formattingValue;\n\n if (formattingValue && !Number.isNaN(parseFloat(integer))) {\n const endsWithDot = fractionPart === '';\n const valueNumber = endsWithDot ? `${formattingValue}1` : formattingValue;\n formatted =\n formatter\n .formatToParts(valueNumber as `${number}`)\n .reduce((result, { type, value: part }) => {\n if (type === 'fraction' && endsWithDot) return result;\n return result + part;\n }, '') + (!isUnit && unit ? `\\u00a0${unit}` : '');\n } else if (unit) {\n if (isUnit)\n formatted = formatter\n .formatToParts(formattingValue.startsWith('-') ? -1 : 1)\n .reduce(\n (result, { type, value: part }) =>\n ['unit', 'minusSign'].includes(type) ? result + part : result,\n ''\n );\n else formatted = formattingValue.startsWith('-') ? `- ${unit}` : unit;\n }\n\n return negative === 'parentheses' && isNegative ? `(${formatted})` : formatted;\n};\n\nexport function isValueInRange(value: number, min?: number, max?: number): boolean {\n return !((min !== undefined && value < min) \|\| (max !== undefined && value > max));\n}\n\nexport function getIncrementedValue(value: string, min: number, max: number, step: number): string {\n const numberValue = parseFloat(value) \|\| 0;\n const newValue = new BigNumber(numberValue).plus(step);\n if (isValueInRange(newValue.toNumber(), min, max)) {\n return newValue.toFixed();\n }\n if (min !== undefined && newValue.toNumber() < min) {\n return min.toString();\n }\n return value;\n}\n\nexport function getDecrementedValue(value: string, min: number, max: number, step: number): string {\n const numberValue = parseFloat(value) \|\| 0;\n const newValue = new BigNumber(numberValue).minus(step);\n if (isValueInRange(newValue.toNumber(), min, max)) {\n return newValue.toFixed();\n }\n if (max !== undefined && newValue.toNumber() > max) {\n return max.toString();\n }\n return value;\n}\n\ninterface NumberFormatOptions {\n locale: string;\n options?: Intl.NumberFormatOptions;\n}\n\nexport function formatNumber(value: number \| bigint, { locale, options }: NumberFormatOptions) {\n const formatter = new Intl.NumberFormat(locale, options);\n\n return formatter.format(value);\n}\n"]}

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

@@ -234,7 +234,7 @@ const PageLayout = forwardRef(function PageLayout({ regions, cols = `repeat(${re
             content: utilities
         }
     ];
-    const pageHeader = !!path || !!icon || !!actions || !!title || !!banners || !!tabs || !!header ? (_jsxs(Flex, { container: { direction: 'column', pad: [1.5, 0.75, 0] }, sm: { container: { pad: [1.5, 2, 0] } }, item: { grow: 0, shrink: 0 }, as: StyledPageHeader, children: [path && path.length > 0 && _jsx(Breadcrumbs, { path: path }), header || (_jsx(SummaryItem, { visual: icon && (_jsx(StyledPageIcon, { container: { alignItems: 'center', justify: 'center' }, children: _jsx(Icon, { name: icon }) })), primary: _jsx(Text, { variant: 'h1', children: title }), actions: actions })), banners, tabs] })) : null;
+    const pageHeader = !!path || !!icon || !!actions || !!title || !!banners || !!tabs || !!header ? (_jsxs(Flex, { container: { direction: 'column', pad: [1.5, 0.75, 0] }, sm: { container: { pad: [1.5, 2, 0] } }, item: { grow: 0, shrink: 0 }, as: StyledPageHeader, children: [path && path.length > 0 && _jsx(Breadcrumbs, { path: path }), header || (_jsx(SummaryItem, { visual: icon && (_jsx(StyledPageIcon, { container: { alignItems: 'center', justify: 'center' }, children: _jsx(Icon, { name: icon, emphasized: true }) })), primary: _jsx(Text, { variant: 'h1', children: title }), actions: actions })), banners, tabs] })) : null;
     const handleTabChange = (id) => {
         setPanel(id);
     };