@pega/cosmos-react-core 10.0.0-build.4.5 → 10.0.0-build.4.7

package/lib/components/MultiStepForm/FormProgress.styles.js

@@ -1,6 +1,7 @@
 import styled, { css } from 'styled-components';
-import { size } from 'polished';
+import { lighten, size } from 'polished';
 import { defaultThemeProp } from '../../theme';
+import { tryCatch } from '../../utils';
 import BareButton from '../Button/BareButton';
 import Popover from '../Popover';
 import { StyledText } from '../Text';
@@ -12,6 +13,10 @@ import { ellipsisOverflow } from '../../styles/mixins';
 export const stepItemMinWidth = 15;
 /** Min width of step marker without labels in ch units */
 export const stepMarkerMinWidth = 3;
+/** Min width of each bar segment in bars mode in ch units */
+export const stepBarMinWidth = 3;
+/** Min height of each vertical bar segment in bars mode */
+export const stepVerticalBarMinHeight = '2.5rem';
 export const CurrentStepPopover = styled(Popover) `
   max-width: 100%;
   background-color: transparent;
@@ -57,7 +62,7 @@ export const StyledBar = styled.div(({ shifted, theme }) => {
   `;
 });
 StyledBar.defaultProps = defaultThemeProp;
-export const StyledFill = styled.div(({ theme }) => {
+export const StyledFill = styled.div(({ fillScale, theme }) => {
     const { base: { animation: { speed: animationSpeed, timing: { ease: animationTiming } }, palette: { interactive } } } = theme;
     const { ltr } = useDirection();
     const markedLineThicknessFactor = 2;
@@ -70,7 +75,7 @@ export const StyledFill = styled.div(({ theme }) => {
     top: calc(-50% * (${markedLineThicknessFactor} - 1));
     background: ${interactive};
     transition: all calc(2 * ${animationSpeed}) ${animationTiming};
-    transform: scaleX(var(--fillScale));
+    transform: scaleX(${fillScale});
     transform-origin: ${ltr ? 0 : '100%'} 0;
 
     @media (forced-colors: active) {
@@ -213,7 +218,7 @@ export const StyleHorizontalStepMarkers = styled.ol(({ showStepNames, theme }) =
 
       li:first-child {
         align-items: flex-start;
-        text-align: left;
+        text-align: start;
         margin-inline-start: 0;
         padding-inline-start: 0;
 
@@ -224,7 +229,7 @@ export const StyleHorizontalStepMarkers = styled.ol(({ showStepNames, theme }) =
 
       li:last-child {
         align-items: flex-end;
-        text-align: right;
+        text-align: end;
         margin-inline-end: 0;
         padding-inline-end: 0;
 
@@ -291,4 +296,162 @@ export const StyledHorizontalStepText = styled.div(({ theme }) => {
   `;
 });
 StyledHorizontalStepText.defaultProps = defaultThemeProp;
+export const StyleHorizontalBarList = styled.ol(({ showStepNames, theme }) => {
+    return css `
+      list-style-type: none;
+
+      li {
+        display: flex;
+        position: relative;
+        flex: 1 1 0;
+        min-width: ${`${showStepNames ? stepItemMinWidth : stepBarMinWidth}ch`};
+        flex-direction: column;
+        align-items: stretch;
+        text-align: center;
+      }
+
+      li:first-child {
+        text-align: start;
+      }
+
+      li:last-child {
+        text-align: end;
+      }
+
+      &:has(:focus-visible) {
+        box-shadow: ${theme.base.shadow['focus-group']};
+      }
+    `;
+});
+StyleHorizontalBarList.defaultProps = defaultThemeProp;
+export const StyledHorizontalBarSegment = styled(BareButton)(({ current, completed, clickable, theme }) => {
+    const { base: { spacing, animation: { speed: animationSpeed, timing: { ease: animationTiming } }, palette: { interactive, 'primary-background': primaryBackground }, shadow: { focus: focusShadow }, 'hit-area': { 'finger-min': touchButtonSize } }, components: { 'form-control': { 'border-color': borderColor, 'border-width': borderWidth }, 'multi-step-form': { 'bar-indicator-border-radius': barIndicatorBorderRadius } } } = theme;
+    const maxBarHeight = `calc(${spacing} * 1.5)`;
+    const barHeight = current ? maxBarHeight : spacing;
+    const hoverBackground = tryCatch(() => lighten(0.1, interactive), () => interactive);
+    return css `
+    position: relative;
+    display: block;
+    width: 100%;
+    height: ${barHeight};
+    margin-block: calc((${maxBarHeight} - ${barHeight}) / 2);
+    border: ${borderWidth} solid transparent;
+    border-radius: ${barIndicatorBorderRadius};
+    background: ${current || completed ? interactive : primaryBackground};
+    transition:
+      background calc(2 * ${animationSpeed}) ${animationTiming},
+      border-color calc(2 * ${animationSpeed}) ${animationTiming};
+
+    ${!current &&
+        css `
+      border-color: ${clickable ? interactive : borderColor};
+
+      @media (forced-colors: active) {
+        border-color: Highlight;
+      }
+    `}
+
+    ${clickable &&
+        css `
+      cursor: pointer;
+
+      ${!current &&
+            css `
+        &:hover {
+          background: ${hoverBackground};
+        }
+      `}
+    `}
+
+    &:focus-visible {
+      box-shadow: ${focusShadow};
+
+      @media (forced-colors: active) {
+        outline: 0.125rem solid Highlight;
+        outline-offset: 0.125rem;
+      }
+    }
+
+    @media (forced-colors: active) {
+      background: ${current || completed ? 'Highlight' : 'CanvasText'};
+    }
+
+    /* Touch hit-area expansion without affecting layout */
+    &::after {
+      content: '';
+      position: absolute;
+      inset-block: calc((${touchButtonSize} - ${barHeight}) / -2);
+      inset-inline: 0;
+    }
+  `;
+});
+StyledHorizontalBarSegment.defaultProps = defaultThemeProp;
+export const StyledVerticalBarWrapper = styled.div(({ theme }) => {
+    return css `
+    min-width: 2rem;
+    padding-block: calc(${theme.base.spacing} / 2);
+  `;
+});
+StyledVerticalBarWrapper.defaultProps = defaultThemeProp;
+export const StyledVerticalBarSegment = styled(BareButton)(({ current, completed, clickable, theme }) => {
+    const { base: { spacing, animation: { speed: animationSpeed }, palette: { interactive, 'primary-background': primaryBackground }, shadow: { focus: focusShadow }, 'hit-area': { 'finger-min': touchButtonSize } }, components: { 'form-control': { 'border-color': borderColor, 'border-width': borderWidth }, 'multi-step-form': { 'bar-indicator-border-radius': barIndicatorBorderRadius } } } = theme;
+    const barWidth = current ? `calc(${spacing} * 1.5)` : spacing;
+    const hoverBackground = tryCatch(() => lighten(0.1, interactive), () => interactive);
+    return css `
+    position: relative;
+    display: block;
+    width: ${barWidth};
+    min-height: ${stepVerticalBarMinHeight};
+    flex: 1 1 0;
+    border: ${borderWidth} solid transparent;
+    border-radius: ${barIndicatorBorderRadius};
+    background: ${current || completed ? interactive : primaryBackground};
+    transition:
+      background calc(2 * ${animationSpeed}),
+      border-color calc(2 * ${animationSpeed});
+
+    ${!current &&
+        css `
+      border-color: ${clickable ? interactive : borderColor};
+
+      @media (forced-colors: active) {
+        border-color: Highlight;
+      }
+    `}
+
+    ${clickable &&
+        css `
+      cursor: pointer;
+
+      ${!current &&
+            css `
+        &:hover {
+          background: ${hoverBackground};
+        }
+      `}
+    `}
+
+    &:focus-visible {
+      box-shadow: ${focusShadow};
+
+      @media (forced-colors: active) {
+        outline: 0.125rem solid Highlight;
+        outline-offset: 0.125rem;
+      }
+    }
+
+    @media (forced-colors: active) {
+      background: ${current || completed ? 'Highlight' : 'CanvasText'};
+    }
+
+    /* Touch hit-area expansion without affecting layout */
+    &::after {
+      content: '';
+      position: absolute;
+      inset-block: 0;
+      inset-inline: calc((${touchButtonSize} - ${barWidth}) / -2);
+    }
+  `;
+});
+StyledVerticalBarSegment.defaultProps = defaultThemeProp;
 //# sourceMappingURL=FormProgress.styles.js.map

package/lib/components/MultiStepForm/FormProgress.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormProgress.styles.js","sourceRoot":"","sources":["../../../src/components/MultiStepForm/FormProgress.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { size } from 'polished';\n\nimport { defaultThemeProp } from '../../theme';\nimport BareButton from '../Button/BareButton';\nimport Popover from '../Popover';\nimport { StyledText } from '../Text';\nimport { calculateFontSize, type FontSize } from '../../styles';\nimport { useDirection } from '../../hooks';\nimport Flex from '../Flex';\nimport { ellipsisOverflow } from '../../styles/mixins';\n\nimport type { Step } from './MultiStepForm.types';\n\n/** Min width of each step item including labels in ch units */\nexport const stepItemMinWidth = 15;\n\n/** Min width of step marker without labels in ch units */\nexport const stepMarkerMinWidth = 3;\n\nexport const CurrentStepPopover = styled(Popover)`\n  max-width: 100%;\n  background-color: transparent;\n  z-index: 0;\n  box-shadow: none;\n  animation: none;\n\n  & > ${StyledText} {\n    ${ellipsisOverflow}\n  }\n`;\n\nconst calculateStepMarkerSizes = (fontSize: string, fontScale: string | number) => {\n  const { m: stepMarkerSize } = calculateFontSize(fontSize, fontScale);\n  return {\n    stepMarkerSize,\n    smallStepMarkerSize: `calc(${stepMarkerSize} / 1.5)`,\n    bigStepMarkerSize: `calc(${stepMarkerSize} * 1.5)`\n  };\n};\n\nconst calculateBarTopPadding = (\n  fontSize: string,\n  fontScale: string | number,\n  lineHeight: string\n) => {\n  const { bigStepMarkerSize } = calculateStepMarkerSizes(fontSize, fontScale);\n  return {\n    // assuming the step progress always contains current step marker which is the biggest one,\n    // the top padding of the bar should be half of the big step marker size minus line height of the bar\n    // to be vertically centered\n    stepBarTopPadding: `calc((${bigStepMarkerSize} / 2) - (${lineHeight} / 2))`\n  };\n};\n\nexport const StyledBar = styled.div<{ shifted?: boolean }>(({ shifted, theme }) => {\n  const {\n    base: { 'font-size': fontSize, 'font-scale': fontScale },\n    components: {\n      'form-control': { 'border-color': borderColor }\n    }\n  } = theme;\n\n  const lineHeight = '0.125rem';\n  const { stepBarTopPadding } = calculateBarTopPadding(fontSize, fontScale, lineHeight);\n\n  return css`\n    position: absolute;\n    ${shifted && `inset-block-start: ${stepBarTopPadding};`}\n    width: 100%;\n    height: ${lineHeight};\n    background: ${borderColor};\n\n    @media (forced-colors: active) {\n      background: CanvasText;\n    }\n  `;\n});\n\nStyledBar.defaultProps = defaultThemeProp;\n\nexport const StyledFill = styled.div(({ theme }) => {\n  const {\n    base: {\n      animation: {\n        speed: animationSpeed,\n        timing: { ease: animationTiming }\n      },\n      palette: { interactive }\n    }\n  } = theme;\n\n  const { ltr } = useDirection();\n\n  const markedLineThicknessFactor = 2;\n\n  return css`\n    position: absolute;\n    width: 100%;\n    height: calc(100% * ${markedLineThicknessFactor});\n\n    /* top position based on line thickness factor to keep the fill centered */\n    top: calc(-50% * (${markedLineThicknessFactor} - 1));\n    background: ${interactive};\n    transition: all calc(2 * ${animationSpeed}) ${animationTiming};\n    transform: scaleX(var(--fillScale));\n    transform-origin: ${ltr ? 0 : '100%'} 0;\n\n    @media (forced-colors: active) {\n      background: Highlight;\n    }\n  `;\n});\n\nStyledFill.defaultProps = defaultThemeProp;\n\nexport const StyledFormProgress = styled(Flex)<{ showStepNames?: boolean }>(({\n  showStepNames,\n  theme\n}) => {\n  const {\n    base: { spacing, 'font-size': fontSize, 'font-scale': fontScale },\n    components: {\n      text: {\n        h4: { 'font-size': h3fontSize }\n      }\n    }\n  } = theme;\n  const fontSizes = calculateFontSize(fontSize, fontScale);\n\n  return css`\n    position: relative;\n    ${!showStepNames &&\n    `padding-block-end: calc(${spacing} + ${fontSizes[h3fontSize as FontSize]} * 1.35);`}\n  `;\n});\n\nStyledFormProgress.defaultProps = defaultThemeProp;\n\nexport const StepMarker = styled(BareButton)<{\n  current: boolean;\n  depth: Step['depth'];\n  completed?: Step['completed'];\n  clickable?: boolean;\n}>(({ current, depth, completed, clickable, theme }) => {\n  const {\n    base: {\n      'font-size': fontSize,\n      'font-scale': fontScale,\n      animation: {\n        speed: animationSpeed,\n        timing: { ease: animationTiming }\n      },\n      palette: { interactive, 'primary-background': primaryBackground },\n      shadow: { focus: focusShadow },\n      'hit-area': { 'mouse-min': buttonSize, 'finger-min': touchButtonSize }\n    },\n    components: {\n      'form-control': { 'border-color': borderColor, 'border-width': borderWidth }\n    }\n  } = theme;\n\n  const { stepMarkerSize, smallStepMarkerSize, bigStepMarkerSize } = calculateStepMarkerSizes(\n    fontSize,\n    fontScale\n  );\n\n  // Determine the actual size for this marker based on its state\n  let markerSize = stepMarkerSize;\n  if (current) {\n    markerSize = bigStepMarkerSize;\n  } else if (depth === 1) {\n    markerSize = smallStepMarkerSize;\n  }\n\n  return css`\n    position: relative;\n    z-index: 1;\n\n    /* Fixed container size based on the biggest marker to prevent layout shifts */\n    ${size(bigStepMarkerSize)}\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n\n    ${clickable\n      ? css`\n          border-color: ${interactive};\n        `\n      : css`\n          cursor: default;\n        `}\n\n    &::before {\n      content: '';\n      ${size(markerSize)}\n      position: absolute;\n      border-radius: 100%;\n      transition: all calc(2 * ${animationSpeed}) ${animationTiming};\n    }\n\n    &:focus-visible::before {\n      box-shadow: ${focusShadow};\n\n      @media (forced-colors: active) {\n        outline: 0.125rem solid Highlight;\n        outline-offset: 0.125rem;\n      }\n    }\n\n    ${!current &&\n    css`\n      border-color: transparent;\n      background: transparent;\n\n      &::before {\n        background: ${primaryBackground};\n        border: calc(2 * ${borderWidth}) solid ${clickable ? interactive : borderColor};\n\n        ${completed &&\n        css`\n          background: ${interactive};\n          border-color: ${interactive};\n        `}\n\n        @media (forced-colors: active) {\n          background: ${completed ? 'Highlight' : 'Canvas'};\n          border-color: ${clickable ? 'Highlight' : 'CanvasText'};\n        }\n      }\n    `}\n\n    ${current &&\n    css`\n      &::before {\n        background: ${interactive};\n\n        @media (forced-colors: active) {\n          background: Highlight;\n        }\n      }\n    `}\n\n    ::after {\n      content: '';\n      position: absolute;\n      ${size(buttonSize)}\n      inset-block-start: ${`calc((${buttonSize} - ${bigStepMarkerSize}) / -2) `};\n      inset-inline-start: ${`calc((${buttonSize} - ${bigStepMarkerSize}) / -2) `};\n\n      @media (pointer: coarse) {\n        inset-block-start: ${`calc((${touchButtonSize} - ${bigStepMarkerSize}) / -2) `};\n        inset-inline-start: ${`calc((${touchButtonSize} - ${bigStepMarkerSize}) / -2) `};\n        ${size(touchButtonSize)}\n      }\n    }\n  `;\n});\n\nStepMarker.defaultProps = defaultThemeProp;\n\nexport const StyleHorizontalStepMarkers = styled.ol<{ showStepNames?: boolean }>(\n  ({ showStepNames, theme }) => {\n    return css`\n      list-style-type: none;\n      justify-content: space-between;\n\n      li {\n        display: flex;\n        position: relative;\n        flex: 1 1 0;\n\n        /* min width changes based on whether step names are shown */\n        min-width: ${`${showStepNames ? stepItemMinWidth : stepMarkerMinWidth}ch`};\n        font-size: small;\n        margin-inline: ${theme.base.spacing};\n        flex-direction: column;\n        align-items: center;\n        text-align: center;\n      }\n\n      li:first-child,\n      li:last-child {\n        flex: 0.5 1 0;\n        /* stylelint-disable-next-line unit-allowed-list */\n        min-width: ${`${showStepNames ? stepItemMinWidth / 2 : stepMarkerMinWidth / 2}ch`};\n      }\n\n      li:first-child {\n        align-items: flex-start;\n        text-align: left;\n        margin-inline-start: 0;\n        padding-inline-start: 0;\n\n        ${StepMarker}::before {\n          inset-inline-start: 0;\n        }\n      }\n\n      li:last-child {\n        align-items: flex-end;\n        text-align: right;\n        margin-inline-end: 0;\n        padding-inline-end: 0;\n\n        ${StepMarker}::before {\n          inset-inline-end: 0;\n        }\n      }\n\n      &:has(:focus-visible) {\n        box-shadow: ${theme.base.shadow['focus-group']};\n      }\n    `;\n  }\n);\n\nStyleHorizontalStepMarkers.defaultProps = defaultThemeProp;\n\nexport const StyledVerticalStepMarkers = styled.ol`\n  list-style-type: none;\n`;\n\nexport const StyledBulletWrapper = styled.div<{\n  hasNext: boolean;\n  prior: boolean;\n}>(({ theme, hasNext, prior }) => {\n  const {\n    base: {\n      'font-size': fontSize,\n      'font-scale': fontScale,\n      animation: { speed: animationSpeed },\n      palette: { interactive }\n    },\n    components: {\n      'form-control': { 'border-color': borderColor }\n    }\n  } = theme;\n\n  const baseLineWidth = '0.125rem';\n  const lineWidth = prior ? `calc(2 * ${baseLineWidth})` : baseLineWidth;\n\n  const { bigStepMarkerSize } = calculateStepMarkerSizes(fontSize, fontScale);\n\n  return css`\n    position: relative;\n    min-width: 2rem;\n\n    ${hasNext &&\n    css`\n      &::after {\n        content: '';\n        position: absolute;\n\n        /* Center the line horizontally and vertically relative to the step marker */\n        inset-block-start: calc(${bigStepMarkerSize});\n        inset-inline-start: calc(50% - (${lineWidth} / 2));\n        width: ${lineWidth};\n        height: 100%;\n        background: ${prior ? interactive : borderColor};\n        transition: background calc(2 * ${animationSpeed});\n\n        @media (forced-colors: active) {\n          background: ${prior ? 'Highlight' : 'CanvasText'};\n        }\n      }\n    `}\n  `;\n});\n\nStyledBulletWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledStepText = styled.div(({ theme }) => {\n  return css`\n    padding-block: ${theme.base.spacing};\n    overflow-wrap: break-word;\n  `;\n});\n\nStyledStepText.defaultProps = defaultThemeProp;\n\nexport const StyledHorizontalStepText = styled.div(({ theme }) => {\n  const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n  return css`\n    padding-block: ${theme.base.spacing};\n    overflow-wrap: break-word;\n    min-width: inherit;\n    font-size: ${fontSize.xxs};\n    text-align: inherit;\n  `;\n});\n\nStyledHorizontalStepText.defaultProps = defaultThemeProp;\n"]}
+{"version":3,"file":"FormProgress.styles.js","sourceRoot":"","sources":["../../../src/components/MultiStepForm/FormProgress.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { lighten, size } from 'polished';\n\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch } from '../../utils';\nimport BareButton from '../Button/BareButton';\nimport Popover from '../Popover';\nimport { StyledText } from '../Text';\nimport { calculateFontSize, type FontSize } from '../../styles';\nimport { useDirection } from '../../hooks';\nimport Flex from '../Flex';\nimport { ellipsisOverflow } from '../../styles/mixins';\n\nimport type { Step } from './MultiStepForm.types';\n\n/** Min width of each step item including labels in ch units */\nexport const stepItemMinWidth = 15;\n\n/** Min width of step marker without labels in ch units */\nexport const stepMarkerMinWidth = 3;\n\n/** Min width of each bar segment in bars mode in ch units */\nexport const stepBarMinWidth = 3;\n\n/** Min height of each vertical bar segment in bars mode */\nexport const stepVerticalBarMinHeight = '2.5rem';\n\nexport const CurrentStepPopover = styled(Popover)`\n  max-width: 100%;\n  background-color: transparent;\n  z-index: 0;\n  box-shadow: none;\n  animation: none;\n\n  & > ${StyledText} {\n    ${ellipsisOverflow}\n  }\n`;\n\nconst calculateStepMarkerSizes = (fontSize: string, fontScale: string | number) => {\n  const { m: stepMarkerSize } = calculateFontSize(fontSize, fontScale);\n  return {\n    stepMarkerSize,\n    smallStepMarkerSize: `calc(${stepMarkerSize} / 1.5)`,\n    bigStepMarkerSize: `calc(${stepMarkerSize} * 1.5)`\n  };\n};\n\nconst calculateBarTopPadding = (\n  fontSize: string,\n  fontScale: string | number,\n  lineHeight: string\n) => {\n  const { bigStepMarkerSize } = calculateStepMarkerSizes(fontSize, fontScale);\n  return {\n    // assuming the step progress always contains current step marker which is the biggest one,\n    // the top padding of the bar should be half of the big step marker size minus line height of the bar\n    // to be vertically centered\n    stepBarTopPadding: `calc((${bigStepMarkerSize} / 2) - (${lineHeight} / 2))`\n  };\n};\n\nexport const StyledBar = styled.div<{ shifted?: boolean }>(({ shifted, theme }) => {\n  const {\n    base: { 'font-size': fontSize, 'font-scale': fontScale },\n    components: {\n      'form-control': { 'border-color': borderColor }\n    }\n  } = theme;\n\n  const lineHeight = '0.125rem';\n  const { stepBarTopPadding } = calculateBarTopPadding(fontSize, fontScale, lineHeight);\n\n  return css`\n    position: absolute;\n    ${shifted && `inset-block-start: ${stepBarTopPadding};`}\n    width: 100%;\n    height: ${lineHeight};\n    background: ${borderColor};\n\n    @media (forced-colors: active) {\n      background: CanvasText;\n    }\n  `;\n});\n\nStyledBar.defaultProps = defaultThemeProp;\n\nexport const StyledFill = styled.div<{ fillScale: number }>(({ fillScale, theme }) => {\n  const {\n    base: {\n      animation: {\n        speed: animationSpeed,\n        timing: { ease: animationTiming }\n      },\n      palette: { interactive }\n    }\n  } = theme;\n\n  const { ltr } = useDirection();\n\n  const markedLineThicknessFactor = 2;\n\n  return css`\n    position: absolute;\n    width: 100%;\n    height: calc(100% * ${markedLineThicknessFactor});\n\n    /* top position based on line thickness factor to keep the fill centered */\n    top: calc(-50% * (${markedLineThicknessFactor} - 1));\n    background: ${interactive};\n    transition: all calc(2 * ${animationSpeed}) ${animationTiming};\n    transform: scaleX(${fillScale});\n    transform-origin: ${ltr ? 0 : '100%'} 0;\n\n    @media (forced-colors: active) {\n      background: Highlight;\n    }\n  `;\n});\n\nStyledFill.defaultProps = defaultThemeProp;\n\nexport const StyledFormProgress = styled(Flex)<{ showStepNames?: boolean }>(({\n  showStepNames,\n  theme\n}) => {\n  const {\n    base: { spacing, 'font-size': fontSize, 'font-scale': fontScale },\n    components: {\n      text: {\n        h4: { 'font-size': h3fontSize }\n      }\n    }\n  } = theme;\n  const fontSizes = calculateFontSize(fontSize, fontScale);\n\n  return css`\n    position: relative;\n    ${!showStepNames &&\n    `padding-block-end: calc(${spacing} + ${fontSizes[h3fontSize as FontSize]} * 1.35);`}\n  `;\n});\n\nStyledFormProgress.defaultProps = defaultThemeProp;\n\nexport const StepMarker = styled(BareButton)<{\n  current: boolean;\n  depth: Step['depth'];\n  completed?: Step['completed'];\n  clickable?: boolean;\n}>(({ current, depth, completed, clickable, theme }) => {\n  const {\n    base: {\n      'font-size': fontSize,\n      'font-scale': fontScale,\n      animation: {\n        speed: animationSpeed,\n        timing: { ease: animationTiming }\n      },\n      palette: { interactive, 'primary-background': primaryBackground },\n      shadow: { focus: focusShadow },\n      'hit-area': { 'mouse-min': buttonSize, 'finger-min': touchButtonSize }\n    },\n    components: {\n      'form-control': { 'border-color': borderColor, 'border-width': borderWidth }\n    }\n  } = theme;\n\n  const { stepMarkerSize, smallStepMarkerSize, bigStepMarkerSize } = calculateStepMarkerSizes(\n    fontSize,\n    fontScale\n  );\n\n  // Determine the actual size for this marker based on its state\n  let markerSize = stepMarkerSize;\n  if (current) {\n    markerSize = bigStepMarkerSize;\n  } else if (depth === 1) {\n    markerSize = smallStepMarkerSize;\n  }\n\n  return css`\n    position: relative;\n    z-index: 1;\n\n    /* Fixed container size based on the biggest marker to prevent layout shifts */\n    ${size(bigStepMarkerSize)}\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n\n    ${clickable\n      ? css`\n          border-color: ${interactive};\n        `\n      : css`\n          cursor: default;\n        `}\n\n    &::before {\n      content: '';\n      ${size(markerSize)}\n      position: absolute;\n      border-radius: 100%;\n      transition: all calc(2 * ${animationSpeed}) ${animationTiming};\n    }\n\n    &:focus-visible::before {\n      box-shadow: ${focusShadow};\n\n      @media (forced-colors: active) {\n        outline: 0.125rem solid Highlight;\n        outline-offset: 0.125rem;\n      }\n    }\n\n    ${!current &&\n    css`\n      border-color: transparent;\n      background: transparent;\n\n      &::before {\n        background: ${primaryBackground};\n        border: calc(2 * ${borderWidth}) solid ${clickable ? interactive : borderColor};\n\n        ${completed &&\n        css`\n          background: ${interactive};\n          border-color: ${interactive};\n        `}\n\n        @media (forced-colors: active) {\n          background: ${completed ? 'Highlight' : 'Canvas'};\n          border-color: ${clickable ? 'Highlight' : 'CanvasText'};\n        }\n      }\n    `}\n\n    ${current &&\n    css`\n      &::before {\n        background: ${interactive};\n\n        @media (forced-colors: active) {\n          background: Highlight;\n        }\n      }\n    `}\n\n    ::after {\n      content: '';\n      position: absolute;\n      ${size(buttonSize)}\n      inset-block-start: ${`calc((${buttonSize} - ${bigStepMarkerSize}) / -2) `};\n      inset-inline-start: ${`calc((${buttonSize} - ${bigStepMarkerSize}) / -2) `};\n\n      @media (pointer: coarse) {\n        inset-block-start: ${`calc((${touchButtonSize} - ${bigStepMarkerSize}) / -2) `};\n        inset-inline-start: ${`calc((${touchButtonSize} - ${bigStepMarkerSize}) / -2) `};\n        ${size(touchButtonSize)}\n      }\n    }\n  `;\n});\n\nStepMarker.defaultProps = defaultThemeProp;\n\nexport const StyleHorizontalStepMarkers = styled.ol<{ showStepNames?: boolean }>(\n  ({ showStepNames, theme }) => {\n    return css`\n      list-style-type: none;\n      justify-content: space-between;\n\n      li {\n        display: flex;\n        position: relative;\n        flex: 1 1 0;\n\n        /* min width changes based on whether step names are shown */\n        min-width: ${`${showStepNames ? stepItemMinWidth : stepMarkerMinWidth}ch`};\n        font-size: small;\n        margin-inline: ${theme.base.spacing};\n        flex-direction: column;\n        align-items: center;\n        text-align: center;\n      }\n\n      li:first-child,\n      li:last-child {\n        flex: 0.5 1 0;\n        /* stylelint-disable-next-line unit-allowed-list */\n        min-width: ${`${showStepNames ? stepItemMinWidth / 2 : stepMarkerMinWidth / 2}ch`};\n      }\n\n      li:first-child {\n        align-items: flex-start;\n        text-align: start;\n        margin-inline-start: 0;\n        padding-inline-start: 0;\n\n        ${StepMarker}::before {\n          inset-inline-start: 0;\n        }\n      }\n\n      li:last-child {\n        align-items: flex-end;\n        text-align: end;\n        margin-inline-end: 0;\n        padding-inline-end: 0;\n\n        ${StepMarker}::before {\n          inset-inline-end: 0;\n        }\n      }\n\n      &:has(:focus-visible) {\n        box-shadow: ${theme.base.shadow['focus-group']};\n      }\n    `;\n  }\n);\n\nStyleHorizontalStepMarkers.defaultProps = defaultThemeProp;\n\nexport const StyledVerticalStepMarkers = styled.ol`\n  list-style-type: none;\n`;\n\nexport const StyledBulletWrapper = styled.div<{\n  hasNext: boolean;\n  prior: boolean;\n}>(({ theme, hasNext, prior }) => {\n  const {\n    base: {\n      'font-size': fontSize,\n      'font-scale': fontScale,\n      animation: { speed: animationSpeed },\n      palette: { interactive }\n    },\n    components: {\n      'form-control': { 'border-color': borderColor }\n    }\n  } = theme;\n\n  const baseLineWidth = '0.125rem';\n  const lineWidth = prior ? `calc(2 * ${baseLineWidth})` : baseLineWidth;\n\n  const { bigStepMarkerSize } = calculateStepMarkerSizes(fontSize, fontScale);\n\n  return css`\n    position: relative;\n    min-width: 2rem;\n\n    ${hasNext &&\n    css`\n      &::after {\n        content: '';\n        position: absolute;\n\n        /* Center the line horizontally and vertically relative to the step marker */\n        inset-block-start: calc(${bigStepMarkerSize});\n        inset-inline-start: calc(50% - (${lineWidth} / 2));\n        width: ${lineWidth};\n        height: 100%;\n        background: ${prior ? interactive : borderColor};\n        transition: background calc(2 * ${animationSpeed});\n\n        @media (forced-colors: active) {\n          background: ${prior ? 'Highlight' : 'CanvasText'};\n        }\n      }\n    `}\n  `;\n});\n\nStyledBulletWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledStepText = styled.div(({ theme }) => {\n  return css`\n    padding-block: ${theme.base.spacing};\n    overflow-wrap: break-word;\n  `;\n});\n\nStyledStepText.defaultProps = defaultThemeProp;\n\nexport const StyledHorizontalStepText = styled.div(({ theme }) => {\n  const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n  return css`\n    padding-block: ${theme.base.spacing};\n    overflow-wrap: break-word;\n    min-width: inherit;\n    font-size: ${fontSize.xxs};\n    text-align: inherit;\n  `;\n});\n\nStyledHorizontalStepText.defaultProps = defaultThemeProp;\n\nexport const StyleHorizontalBarList = styled.ol<{ showStepNames?: boolean }>(\n  ({ showStepNames, theme }) => {\n    return css`\n      list-style-type: none;\n\n      li {\n        display: flex;\n        position: relative;\n        flex: 1 1 0;\n        min-width: ${`${showStepNames ? stepItemMinWidth : stepBarMinWidth}ch`};\n        flex-direction: column;\n        align-items: stretch;\n        text-align: center;\n      }\n\n      li:first-child {\n        text-align: start;\n      }\n\n      li:last-child {\n        text-align: end;\n      }\n\n      &:has(:focus-visible) {\n        box-shadow: ${theme.base.shadow['focus-group']};\n      }\n    `;\n  }\n);\n\nStyleHorizontalBarList.defaultProps = defaultThemeProp;\n\nexport const StyledHorizontalBarSegment = styled(BareButton)<{\n  current: boolean;\n  completed?: boolean;\n  clickable?: boolean;\n}>(({ current, completed, clickable, theme }) => {\n  const {\n    base: {\n      spacing,\n      animation: {\n        speed: animationSpeed,\n        timing: { ease: animationTiming }\n      },\n      palette: { interactive, 'primary-background': primaryBackground },\n      shadow: { focus: focusShadow },\n      'hit-area': { 'finger-min': touchButtonSize }\n    },\n    components: {\n      'form-control': { 'border-color': borderColor, 'border-width': borderWidth },\n      'multi-step-form': { 'bar-indicator-border-radius': barIndicatorBorderRadius }\n    }\n  } = theme;\n\n  const maxBarHeight = `calc(${spacing} * 1.5)`;\n  const barHeight = current ? maxBarHeight : spacing;\n  const hoverBackground = tryCatch(\n    () => lighten(0.1, interactive),\n    () => interactive\n  );\n\n  return css`\n    position: relative;\n    display: block;\n    width: 100%;\n    height: ${barHeight};\n    margin-block: calc((${maxBarHeight} - ${barHeight}) / 2);\n    border: ${borderWidth} solid transparent;\n    border-radius: ${barIndicatorBorderRadius};\n    background: ${current || completed ? interactive : primaryBackground};\n    transition:\n      background calc(2 * ${animationSpeed}) ${animationTiming},\n      border-color calc(2 * ${animationSpeed}) ${animationTiming};\n\n    ${!current &&\n    css`\n      border-color: ${clickable ? interactive : borderColor};\n\n      @media (forced-colors: active) {\n        border-color: Highlight;\n      }\n    `}\n\n    ${clickable &&\n    css`\n      cursor: pointer;\n\n      ${!current &&\n      css`\n        &:hover {\n          background: ${hoverBackground};\n        }\n      `}\n    `}\n\n    &:focus-visible {\n      box-shadow: ${focusShadow};\n\n      @media (forced-colors: active) {\n        outline: 0.125rem solid Highlight;\n        outline-offset: 0.125rem;\n      }\n    }\n\n    @media (forced-colors: active) {\n      background: ${current || completed ? 'Highlight' : 'CanvasText'};\n    }\n\n    /* Touch hit-area expansion without affecting layout */\n    &::after {\n      content: '';\n      position: absolute;\n      inset-block: calc((${touchButtonSize} - ${barHeight}) / -2);\n      inset-inline: 0;\n    }\n  `;\n});\n\nStyledHorizontalBarSegment.defaultProps = defaultThemeProp;\n\nexport const StyledVerticalBarWrapper = styled.div(({ theme }) => {\n  return css`\n    min-width: 2rem;\n    padding-block: calc(${theme.base.spacing} / 2);\n  `;\n});\n\nStyledVerticalBarWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledVerticalBarSegment = styled(BareButton)<{\n  current: boolean;\n  completed?: boolean;\n  clickable?: boolean;\n}>(({ current, completed, clickable, theme }) => {\n  const {\n    base: {\n      spacing,\n      animation: { speed: animationSpeed },\n      palette: { interactive, 'primary-background': primaryBackground },\n      shadow: { focus: focusShadow },\n      'hit-area': { 'finger-min': touchButtonSize }\n    },\n    components: {\n      'form-control': { 'border-color': borderColor, 'border-width': borderWidth },\n      'multi-step-form': { 'bar-indicator-border-radius': barIndicatorBorderRadius }\n    }\n  } = theme;\n\n  const barWidth = current ? `calc(${spacing} * 1.5)` : spacing;\n  const hoverBackground = tryCatch(\n    () => lighten(0.1, interactive),\n    () => interactive\n  );\n\n  return css`\n    position: relative;\n    display: block;\n    width: ${barWidth};\n    min-height: ${stepVerticalBarMinHeight};\n    flex: 1 1 0;\n    border: ${borderWidth} solid transparent;\n    border-radius: ${barIndicatorBorderRadius};\n    background: ${current || completed ? interactive : primaryBackground};\n    transition:\n      background calc(2 * ${animationSpeed}),\n      border-color calc(2 * ${animationSpeed});\n\n    ${!current &&\n    css`\n      border-color: ${clickable ? interactive : borderColor};\n\n      @media (forced-colors: active) {\n        border-color: Highlight;\n      }\n    `}\n\n    ${clickable &&\n    css`\n      cursor: pointer;\n\n      ${!current &&\n      css`\n        &:hover {\n          background: ${hoverBackground};\n        }\n      `}\n    `}\n\n    &:focus-visible {\n      box-shadow: ${focusShadow};\n\n      @media (forced-colors: active) {\n        outline: 0.125rem solid Highlight;\n        outline-offset: 0.125rem;\n      }\n    }\n\n    @media (forced-colors: active) {\n      background: ${current || completed ? 'Highlight' : 'CanvasText'};\n    }\n\n    /* Touch hit-area expansion without affecting layout */\n    &::after {\n      content: '';\n      position: absolute;\n      inset-block: 0;\n      inset-inline: calc((${touchButtonSize} - ${barWidth}) / -2);\n    }\n  `;\n});\n\nStyledVerticalBarSegment.defaultProps = defaultThemeProp;\n"]}

package/lib/components/MultiStepForm/HorizontalFormProgress.d.ts

@@ -1,11 +1,11 @@
-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'];
     showStepNames?: boolean;
 }
-declare const HorizontalFormProgress: FunctionComponent<FormProgressProps & ForwardProps>;
+declare const HorizontalFormProgress: ({ steps, currentStepId, showStepNames, variant, ...restProps }: FormProgressProps & ForwardProps) => import("react/jsx-runtime").JSX.Element;
 export default HorizontalFormProgress;
 //# sourceMappingURL=HorizontalFormProgress.d.ts.map

package/lib/components/MultiStepForm/HorizontalFormProgress.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HorizontalFormProgress.d.ts","sourceRoot":"","sources":["../../../src/components/MultiStepForm/HorizontalFormProgress.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,iBAAiB,EAAiB,MAAM,OAAO,CAAC;AAG9D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAiBhD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAIhE,UAAU,iBAAiB;IACzB,KAAK,EAAE,kBAAkB,CAAC,OAAO,CAAC,CAAC;IACnC,aAAa,EAAE,kBAAkB,CAAC,eAAe,CAAC,CAAC;IACnD,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,QAAA,MAAM,sBAAsB,EAAE,iBAAiB,CAAC,iBAAiB,GAAG,YAAY,CAyM/E,CAAC;AAEF,eAAe,sBAAsB,CAAC"}
+{"version":3,"file":"HorizontalFormProgress.d.ts","sourceRoot":"","sources":["../../../src/components/MultiStepForm/HorizontalFormProgress.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAmBhD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAIhE,UAAU,iBAAiB;IACzB,KAAK,EAAE,kBAAkB,CAAC,OAAO,CAAC,CAAC;IACnC,aAAa,EAAE,kBAAkB,CAAC,eAAe,CAAC,CAAC;IACnD,OAAO,CAAC,EAAE,kBAAkB,CAAC,SAAS,CAAC,CAAC;IACxC,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,QAAA,MAAM,sBAAsB,GAAI,gEAM7B,iBAAiB,GAAG,YAAY,4CA2OlC,CAAC;AAEF,eAAe,sBAAsB,CAAC"}

package/lib/components/MultiStepForm/HorizontalFormProgress.js

@@ -7,28 +7,70 @@ import Flex from '../Flex';
 import Text from '../Text';
 import Tooltip from '../Tooltip';
 import Button from '../Button';
-import InfoDialog from '../Dialog/InfoDialog';
-import { CurrentStepPopover, StepMarker, StyledBar, StyledFill, StyledFormProgress, StyledHorizontalStepText, StyleHorizontalStepMarkers } from './FormProgress.styles';
+import { InfoDialog } from '../Dialog';
+import { CurrentStepPopover, StepMarker, StyledBar, StyledFill, StyledFormProgress, StyledHorizontalBarSegment, StyledHorizontalStepText, StyleHorizontalBarList, StyleHorizontalStepMarkers } from './FormProgress.styles';
 import VerticalFormProgress from './VerticalFormProgress';
 import { useFormProgressOverflow } from './useFormProgressOverflow';
-const HorizontalFormProgress = ({ steps, currentStepId, showStepNames = false, ...restProps }) => {
+const HorizontalFormProgress = ({ steps, currentStepId, showStepNames = false, variant = 'dot', ...restProps }) => {
     const t = useI18n();
+    const theme = useTheme();
+    const isBarsMode = variant === 'bar';
     const [stepsDialogButtonEl, setStepsDialogButtonEl] = useElement();
     const [showStepsDialog, setShowStepsDialog] = useState(false);
-    const { ref: formProgressRef, state: stepsAreOverflowing } = useFormProgressOverflow(steps.length, showStepNames);
+    const { ref: formProgressRef, state: stepsAreOverflowing } = useFormProgressOverflow(steps.length, showStepNames, isBarsMode);
     const curIdx = steps.findIndex(step => step.id === currentStepId);
     const curStep = steps[curIdx];
     const fillScale = curIdx / (steps.length - 1);
     const [currentStepEl, setCurrentStepEl] = useElement();
     const [stepEls, setStepEls] = useState({});
     const stepsRef = useRef(null);
-    const theme = useTheme();
     const { rtl } = useDirection();
     let popoverPlacement = 'bottom';
     if (curIdx === 0)
         popoverPlacement = rtl ? 'bottom-end' : 'bottom-start';
     else if (curIdx === steps.length - 1)
         popoverPlacement = rtl ? 'bottom-start' : 'bottom-end';
+    const numberOfSteps = steps.length;
+    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 (!showStepNames)
+            return null;
+        if (!!onMarkerClick && !isCurrent) {
+            return (_jsx(Button, { variant: 'link', onClick: onMarkerClick, as: StyledHorizontalStepText, tabIndex: -1, children: stepName }));
+        }
+        return (_jsx(Text, { variant: isCurrent ? 'h3' : undefined, as: StyledHorizontalStepText, children: stepName }));
+    };
+    const renderStepItem = (step, index) => {
+        const isCurrent = index === curIdx;
+        const markerContent = !showStepNames && !isCurrent ? (_jsx(Tooltip, { target: stepEls[step.id], showDelay: 'none', hideDelay: 'short', describeTarget: false, children: step.name })) : null;
+        const commonMarkerProps = {
+            id: step.id,
+            'data-step-marker': '',
+            '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("li", { children: [isBarsMode ? (_jsx(StyledHorizontalBarSegment, { ref: setStepElement(step.id), ...commonMarkerProps, children: markerContent })) : (_jsx(StepMarker, { ref: setStepElement(step.id), depth: step.depth, ...commonMarkerProps, children: markerContent })), renderStepName({
+                    isCurrent,
+                    stepName: step.name,
+                    onMarkerClick: step.onMarkerClick
+                })] }, step.id));
+    };
     useArrows(stepsRef, {
         selector: '[data-step-marker]',
         dir: 'left-right',
@@ -50,7 +92,6 @@ const HorizontalFormProgress = ({ steps, currentStepId, showStepNames = false, .
             setShowStepsDialog(false);
         }
     }, [stepsAreOverflowing]);
-    const numberOfSteps = steps.length;
     return (_jsxs(StyledFormProgress, { ref: formProgressRef, ...restProps, container: { alignItems: 'center' }, showStepNames: showStepNames, children: [_jsx(CurrentStepPopover, { show: !showStepNames, target: currentStepEl, placement: popoverPlacement, strategy: 'absolute', portal: false, hideOnTargetHidden: true, modifiers: [
                     {
                         name: 'offset',
@@ -79,22 +120,7 @@ const HorizontalFormProgress = ({ steps, currentStepId, showStepNames = false, .
                             setShowStepsDialog(true);
                         }, children: t('step_num', [curIdx + 1, numberOfSteps]) }), _jsx(Text, { variant: 'h4', children: curStep.name }), stepsDialogButtonEl && showStepsDialog && (_jsx(InfoDialog, { heading: t('steps'), target: stepsDialogButtonEl, onDismiss: () => {
                             setShowStepsDialog(false);
-                        }, placement: 'bottom-start', children: _jsx(VerticalFormProgress, { steps: steps, currentStepId: currentStepId }) }))] })) : (_jsxs(_Fragment, { children: [_jsx(Flex, { ref: stepsRef, as: StyleHorizontalStepMarkers, container: { justify: 'between', alignItems: 'start' }, item: { grow: 1 }, showStepNames: showStepNames, children: steps.map((step, index) => {
-                            const isCurrent = index === curIdx;
-                            return (_jsxs("li", { 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, "data-step-marker": '', "aria-label": `${step.name} - ${t('step_num', [index + 1, steps.length])}`, "aria-current": isCurrent ? 'step' : undefined, tabIndex: isCurrent ? 0 : -1, current: isCurrent, depth: step.depth, completed: step.completed, onClick: step.onMarkerClick, clickable: !!step.onMarkerClick && !isCurrent, children: !showStepNames && !isCurrent && (_jsx(Tooltip, { target: stepEls[step.id], showDelay: 'none', hideDelay: 'short', describeTarget: false, children: step.name })) }), showStepNames &&
-                                        (!!step.onMarkerClick && !isCurrent ? (_jsx(Button, { variant: 'link', onClick: step.onMarkerClick, as: StyledHorizontalStepText, tabIndex: -1, children: step.name })) : (_jsx(Text, { variant: isCurrent ? 'h3' : undefined, as: StyledHorizontalStepText, children: step.name })))] }, step.id));
-                        }) }), _jsx(StyledBar, { shifted: showStepNames, children: _jsx(StyledFill, { style: { '--fillScale': fillScale } }) })] }))] }));
+                        }, placement: 'bottom-start', children: _jsx(VerticalFormProgress, { steps: steps, currentStepId: currentStepId, variant: variant }) }))] })) : (_jsxs(_Fragment, { children: [_jsx(Flex, { ref: stepsRef, as: isBarsMode ? StyleHorizontalBarList : StyleHorizontalStepMarkers, container: { justify: 'between', alignItems: 'start', gap: 1 }, item: { grow: 1 }, showStepNames: showStepNames, children: steps.map(renderStepItem) }), !isBarsMode && (_jsx(StyledBar, { shifted: showStepNames, children: _jsx(StyledFill, { fillScale: fillScale }) }))] }))] }));
 };
 export default HorizontalFormProgress;
 //# sourceMappingURL=HorizontalFormProgress.js.map

package/lib/components/MultiStepForm/HorizontalFormProgress.js.map

@@ -1 +1 @@
-{"version":3,"file":"HorizontalFormProgress.js","sourceRoot":"","sources":["../../../src/components/MultiStepForm/HorizontalFormProgress.tsx"],"names":[],"mappings":"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","sourcesContent":["import { remToPx, stripUnit } from 'polished';\nimport { useEffect, useRef, useState } from 'react';\nimport type { FunctionComponent, CSSProperties } from 'react';\n\nimport { useArrows, useDirection, useElement, useI18n, useTheme } from '../../hooks';\nimport type { ForwardProps } from '../../types';\nimport { tryCatch } from '../../utils';\nimport Flex from '../Flex';\nimport Text from '../Text';\nimport Tooltip from '../Tooltip';\nimport Button from '../Button';\nimport InfoDialog from '../Dialog/InfoDialog';\n\nimport {\n  CurrentStepPopover,\n  StepMarker,\n  StyledBar,\n  StyledFill,\n  StyledFormProgress,\n  StyledHorizontalStepText,\n  StyleHorizontalStepMarkers\n} from './FormProgress.styles';\nimport type { MultiStepFormProps } from './MultiStepForm.types';\nimport VerticalFormProgress from './VerticalFormProgress';\nimport { useFormProgressOverflow } from './useFormProgressOverflow';\n\ninterface FormProgressProps {\n  steps: MultiStepFormProps['steps'];\n  currentStepId: MultiStepFormProps['currentStepId'];\n  showStepNames?: boolean;\n}\n\nconst HorizontalFormProgress: FunctionComponent<FormProgressProps & ForwardProps> = ({\n  steps,\n  currentStepId,\n  showStepNames = false,\n  ...restProps\n}) => {\n  const t = useI18n();\n\n  const [stepsDialogButtonEl, setStepsDialogButtonEl] = useElement<HTMLButtonElement>();\n  const [showStepsDialog, setShowStepsDialog] = useState(false);\n\n  const { ref: formProgressRef, state: stepsAreOverflowing } = useFormProgressOverflow(\n    steps.length,\n    showStepNames\n  );\n\n  const curIdx = steps.findIndex(step => step.id === currentStepId);\n  const curStep = steps[curIdx];\n  const fillScale = curIdx / (steps.length - 1);\n\n  const [currentStepEl, setCurrentStepEl] = useElement();\n  const [stepEls, setStepEls] = useState<Record<string, HTMLElement>>({});\n  const stepsRef = useRef(null);\n  const theme = useTheme();\n  const { rtl } = useDirection();\n\n  let popoverPlacement: 'bottom' | 'bottom-start' | 'bottom-end' = 'bottom';\n  if (curIdx === 0) popoverPlacement = rtl ? 'bottom-end' : 'bottom-start';\n  else if (curIdx === steps.length - 1) popoverPlacement = rtl ? 'bottom-start' : 'bottom-end';\n\n  useArrows(stepsRef, {\n    selector: '[data-step-marker]',\n    dir: 'left-right',\n    initialFocusElement: currentStepEl\n  });\n\n  useArrows(stepsRef, {\n    selector: '[data-step-marker]',\n    cycle: false,\n    dir: 'up-down',\n    initialFocusElement: currentStepEl\n  });\n\n  useEffect(() => {\n    if (stepEls[curStep.id] && stepEls[curStep.id] !== currentStepEl) {\n      setCurrentStepEl(stepEls[curStep.id]);\n    }\n  }, [Object.keys(stepEls), curStep]);\n\n  useEffect(() => {\n    if (!stepsAreOverflowing) {\n      setShowStepsDialog(false);\n    }\n  }, [stepsAreOverflowing]);\n\n  const numberOfSteps = steps.length;\n\n  return (\n    <StyledFormProgress\n      ref={formProgressRef}\n      {...restProps}\n      container={{ alignItems: 'center' }}\n      showStepNames={showStepNames}\n    >\n      <CurrentStepPopover\n        show={!showStepNames}\n        target={currentStepEl}\n        placement={popoverPlacement}\n        strategy='absolute'\n        portal={false}\n        hideOnTargetHidden\n        modifiers={[\n          {\n            name: 'offset',\n            options: {\n              offset: [\n                0,\n                tryCatch(\n                  () => stripUnit(remToPx(theme.base.spacing)),\n                  () => 8\n                )\n              ]\n            }\n          },\n          {\n            name: 'placeAndContain',\n            enabled: false\n          },\n          {\n            name: 'flip',\n            enabled: false\n          },\n          {\n            name: 'preventOverflow',\n            options: {\n              padding: 0\n            }\n          }\n        ]}\n      >\n        <Text variant='h4'>{curStep.name}</Text>\n      </CurrentStepPopover>\n\n      {stepsAreOverflowing ? (\n        <div>\n          <Button\n            ref={setStepsDialogButtonEl}\n            variant='link'\n            onClick={() => {\n              setShowStepsDialog(true);\n            }}\n          >\n            {t('step_num', [curIdx + 1, numberOfSteps])}\n          </Button>\n          <Text variant='h4'>{curStep.name}</Text>\n          {stepsDialogButtonEl && showStepsDialog && (\n            <InfoDialog\n              heading={t('steps')}\n              target={stepsDialogButtonEl}\n              onDismiss={() => {\n                setShowStepsDialog(false);\n              }}\n              placement='bottom-start'\n            >\n              <VerticalFormProgress steps={steps} currentStepId={currentStepId} />\n            </InfoDialog>\n          )}\n        </div>\n      ) : (\n        <>\n          <Flex\n            ref={stepsRef}\n            as={StyleHorizontalStepMarkers}\n            container={{ justify: 'between', alignItems: 'start' }}\n            item={{ grow: 1 }}\n            showStepNames={showStepNames}\n          >\n            {steps.map((step, index) => {\n              const isCurrent = index === curIdx;\n              return (\n                <li key={step.id}>\n                  <StepMarker\n                    ref={(el: HTMLElement | null) => {\n                      setStepEls(curr => {\n                        const newEls = { ...curr };\n                        if (!el && newEls[step.id]) {\n                          delete newEls[step.id];\n                          return newEls;\n                        }\n                        if (el) return { ...newEls, [step.id]: el };\n                        return newEls;\n                      });\n                    }}\n                    id={step.id}\n                    data-step-marker=''\n                    aria-label={`${step.name} - ${t('step_num', [index + 1, steps.length])}`}\n                    aria-current={isCurrent ? 'step' : undefined}\n                    tabIndex={isCurrent ? 0 : -1}\n                    current={isCurrent}\n                    depth={step.depth}\n                    completed={step.completed}\n                    onClick={step.onMarkerClick}\n                    clickable={!!step.onMarkerClick && !isCurrent}\n                  >\n                    {!showStepNames && !isCurrent && (\n                      <Tooltip\n                        target={stepEls[step.id]}\n                        showDelay='none'\n                        hideDelay='short'\n                        describeTarget={false}\n                      >\n                        {step.name}\n                      </Tooltip>\n                    )}\n                  </StepMarker>\n                  {showStepNames &&\n                    (!!step.onMarkerClick && !isCurrent ? (\n                      <Button\n                        variant='link'\n                        onClick={step.onMarkerClick}\n                        as={StyledHorizontalStepText}\n                        tabIndex={-1}\n                      >\n                        {step.name}\n                      </Button>\n                    ) : (\n                      <Text variant={isCurrent ? 'h3' : undefined} as={StyledHorizontalStepText}>\n                        {step.name}\n                      </Text>\n                    ))}\n                </li>\n              );\n            })}\n          </Flex>\n          <StyledBar shifted={showStepNames}>\n            <StyledFill style={{ '--fillScale': fillScale } as CSSProperties} />\n          </StyledBar>\n        </>\n      )}\n    </StyledFormProgress>\n  );\n};\n\nexport default HorizontalFormProgress;\n"]}
+{"version":3,"file":"HorizontalFormProgress.js","sourceRoot":"","sources":["../../../src/components/MultiStepForm/HorizontalFormProgress.tsx"],"names":[],"mappings":"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","sourcesContent":["import { remToPx, stripUnit } from 'polished';\nimport { useEffect, useRef, useState } from 'react';\n\nimport { useArrows, useDirection, useElement, useI18n, useTheme } from '../../hooks';\nimport type { ForwardProps } from '../../types';\nimport { tryCatch } from '../../utils';\nimport Flex from '../Flex';\nimport Text from '../Text';\nimport Tooltip from '../Tooltip';\nimport Button from '../Button';\nimport { InfoDialog } from '../Dialog';\n\nimport {\n  CurrentStepPopover,\n  StepMarker,\n  StyledBar,\n  StyledFill,\n  StyledFormProgress,\n  StyledHorizontalBarSegment,\n  StyledHorizontalStepText,\n  StyleHorizontalBarList,\n  StyleHorizontalStepMarkers\n} from './FormProgress.styles';\nimport type { MultiStepFormProps } from './MultiStepForm.types';\nimport VerticalFormProgress from './VerticalFormProgress';\nimport { useFormProgressOverflow } from './useFormProgressOverflow';\n\ninterface FormProgressProps {\n  steps: MultiStepFormProps['steps'];\n  currentStepId: MultiStepFormProps['currentStepId'];\n  variant?: MultiStepFormProps['variant'];\n  showStepNames?: boolean;\n}\n\nconst HorizontalFormProgress = ({\n  steps,\n  currentStepId,\n  showStepNames = false,\n  variant = 'dot',\n  ...restProps\n}: FormProgressProps & ForwardProps) => {\n  const t = useI18n();\n  const theme = useTheme();\n  const isBarsMode = variant === 'bar';\n\n  const [stepsDialogButtonEl, setStepsDialogButtonEl] = useElement<HTMLButtonElement>();\n  const [showStepsDialog, setShowStepsDialog] = useState(false);\n\n  const { ref: formProgressRef, state: stepsAreOverflowing } = useFormProgressOverflow(\n    steps.length,\n    showStepNames,\n    isBarsMode\n  );\n\n  const curIdx = steps.findIndex(step => step.id === currentStepId);\n  const curStep = steps[curIdx];\n  const fillScale = curIdx / (steps.length - 1);\n\n  const [currentStepEl, setCurrentStepEl] = useElement();\n  const [stepEls, setStepEls] = useState<Record<string, HTMLElement>>({});\n  const stepsRef = useRef(null);\n  const { rtl } = useDirection();\n\n  let popoverPlacement: 'bottom' | 'bottom-start' | 'bottom-end' = 'bottom';\n  if (curIdx === 0) popoverPlacement = rtl ? 'bottom-end' : 'bottom-start';\n  else if (curIdx === steps.length - 1) popoverPlacement = rtl ? 'bottom-start' : 'bottom-end';\n\n  const numberOfSteps = steps.length;\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 (!showStepNames) return null;\n\n    if (!!onMarkerClick && !isCurrent) {\n      return (\n        <Button variant='link' onClick={onMarkerClick} as={StyledHorizontalStepText} tabIndex={-1}>\n          {stepName}\n        </Button>\n      );\n    }\n\n    return (\n      <Text variant={isCurrent ? 'h3' : undefined} as={StyledHorizontalStepText}>\n        {stepName}\n      </Text>\n    );\n  };\n\n  const renderStepItem = (step: MultiStepFormProps['steps'][number], index: number) => {\n    const isCurrent = index === curIdx;\n    const markerContent =\n      !showStepNames && !isCurrent ? (\n        <Tooltip\n          target={stepEls[step.id]}\n          showDelay='none'\n          hideDelay='short'\n          describeTarget={false}\n        >\n          {step.name}\n        </Tooltip>\n      ) : null;\n\n    const commonMarkerProps = {\n      id: step.id,\n      'data-step-marker': '',\n      'aria-label': `${step.name} - ${t('step_num', [index + 1, steps.length])}`,\n      'aria-current': isCurrent ? ('step' 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      <li key={step.id}>\n        {isBarsMode ? (\n          <StyledHorizontalBarSegment ref={setStepElement(step.id)} {...commonMarkerProps}>\n            {markerContent}\n          </StyledHorizontalBarSegment>\n        ) : (\n          <StepMarker ref={setStepElement(step.id)} depth={step.depth} {...commonMarkerProps}>\n            {markerContent}\n          </StepMarker>\n        )}\n\n        {renderStepName({\n          isCurrent,\n          stepName: step.name,\n          onMarkerClick: step.onMarkerClick\n        })}\n      </li>\n    );\n  };\n\n  useArrows(stepsRef, {\n    selector: '[data-step-marker]',\n    dir: 'left-right',\n    initialFocusElement: currentStepEl\n  });\n\n  useArrows(stepsRef, {\n    selector: '[data-step-marker]',\n    cycle: false,\n    dir: 'up-down',\n    initialFocusElement: currentStepEl\n  });\n\n  useEffect(() => {\n    if (stepEls[curStep.id] && stepEls[curStep.id] !== currentStepEl) {\n      setCurrentStepEl(stepEls[curStep.id]);\n    }\n  }, [Object.keys(stepEls), curStep]);\n\n  useEffect(() => {\n    if (!stepsAreOverflowing) {\n      setShowStepsDialog(false);\n    }\n  }, [stepsAreOverflowing]);\n\n  return (\n    <StyledFormProgress\n      ref={formProgressRef}\n      {...restProps}\n      container={{ alignItems: 'center' }}\n      showStepNames={showStepNames}\n    >\n      <CurrentStepPopover\n        show={!showStepNames}\n        target={currentStepEl}\n        placement={popoverPlacement}\n        strategy='absolute'\n        portal={false}\n        hideOnTargetHidden\n        modifiers={[\n          {\n            name: 'offset',\n            options: {\n              offset: [\n                0,\n                tryCatch(\n                  () => stripUnit(remToPx(theme.base.spacing)),\n                  () => 8\n                )\n              ]\n            }\n          },\n          {\n            name: 'placeAndContain',\n            enabled: false\n          },\n          {\n            name: 'flip',\n            enabled: false\n          },\n          {\n            name: 'preventOverflow',\n            options: {\n              padding: 0\n            }\n          }\n        ]}\n      >\n        <Text variant='h4'>{curStep.name}</Text>\n      </CurrentStepPopover>\n\n      {stepsAreOverflowing ? (\n        <div>\n          <Button\n            ref={setStepsDialogButtonEl}\n            variant='link'\n            onClick={() => {\n              setShowStepsDialog(true);\n            }}\n          >\n            {t('step_num', [curIdx + 1, numberOfSteps])}\n          </Button>\n          <Text variant='h4'>{curStep.name}</Text>\n\n          {stepsDialogButtonEl && showStepsDialog && (\n            <InfoDialog\n              heading={t('steps')}\n              target={stepsDialogButtonEl}\n              onDismiss={() => {\n                setShowStepsDialog(false);\n              }}\n              placement='bottom-start'\n            >\n              <VerticalFormProgress steps={steps} currentStepId={currentStepId} variant={variant} />\n            </InfoDialog>\n          )}\n        </div>\n      ) : (\n        <>\n          <Flex\n            ref={stepsRef}\n            as={isBarsMode ? StyleHorizontalBarList : StyleHorizontalStepMarkers}\n            container={{ justify: 'between', alignItems: 'start', gap: 1 }}\n            item={{ grow: 1 }}\n            showStepNames={showStepNames}\n          >\n            {steps.map(renderStepItem)}\n          </Flex>\n\n          {!isBarsMode && (\n            <StyledBar shifted={showStepNames}>\n              <StyledFill fillScale={fillScale} />\n            </StyledBar>\n          )}\n        </>\n      )}\n    </StyledFormProgress>\n  );\n};\n\nexport default HorizontalFormProgress;\n"]}

package/lib/components/MultiStepForm/MultiStepForm.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MultiStepForm.d.ts","sourceRoot":"","sources":["../../../src/components/MultiStepForm/MultiStepForm.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,+BAA+B,EAAE,MAAM,aAAa,CAAC;AAWnE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAIhE,eAAO,MAAM,UAAU;cAA2B,OAAO;cAAY,OAAO;YAuB3E,CAAC;AAIF,eAAO,MAAM,iBAAiB,6NAAe,CAAC;AAE9C,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oLAIjC,CAAC;AAEF,eAAO,MAAM,yBAAyB;;uIAqBpC,CAAC;AAIH,QAAA,MAAM,aAAa,EAAE,+BAA+B,CAAC,kBAAkB,CAsNtE,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"MultiStepForm.d.ts","sourceRoot":"","sources":["../../../src/components/MultiStepForm/MultiStepForm.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,+BAA+B,EAAE,MAAM,aAAa,CAAC;AAWnE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAIhE,eAAO,MAAM,UAAU;cAA2B,OAAO;cAAY,OAAO;YAuB3E,CAAC;AAIF,eAAO,MAAM,iBAAiB,6NAAe,CAAC;AAE9C,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oLAIjC,CAAC;AAEF,eAAO,MAAM,yBAAyB;;uIAqBpC,CAAC;AAIH,QAAA,MAAM,aAAa,EAAE,+BAA+B,CAAC,kBAAkB,CAyNtE,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/lib/components/MultiStepForm/MultiStepForm.js

@@ -58,7 +58,7 @@ export const StyledRequiredFieldLegend = styled(Text)(({ theme }) => {
   `;
 });
 StyledRequiredFieldLegend.defaultProps = defaultThemeProp;
-const MultiStepForm = forwardRef(function MultiStepForm({ currentStepId, steps, heading, progress, stepIndicator: stepIndicatorProp, showStepNames = false, ...restProps }, ref) {
+const MultiStepForm = forwardRef(function MultiStepForm({ currentStepId, steps, heading, progress, stepIndicator: stepIndicatorProp, showStepNames = false, variant = 'dot', ...restProps }, ref) {
     const showHorizontalStepNames = stepIndicatorProp === 'horizontal' ? showStepNames : undefined;
     const multiStepRef = useConsolidatedRef(ref);
     const headingRef = useRef(null);
@@ -184,7 +184,7 @@ const MultiStepForm = forwardRef(function MultiStepForm({ currentStepId, steps,
                     areas: areaDef,
                     rowGap: 2,
                     colGap: stepIndicator.startsWith('vertical') ? 4 : 2
-                }, inert: progress ? '' : undefined, children: [steps.length > 1 && (_jsxs(Grid, { ref: progressIndicatorRef, item: { area: 'stepIndicator' }, children: [stepIndicator === 'horizontal' && (_jsx(Grid, { item: { area: 'stepIndicator' }, as: HorizontalFormProgress, steps: steps, currentStepId: currentStepId, showStepNames: showHorizontalStepNames })), stepIndicator.startsWith('vertical') && (_jsx(Grid, { item: { area: 'stepIndicator' }, as: VerticalFormProgress, steps: steps, currentStepId: currentStepId })), _jsx(VisuallyHiddenText, { "aria-live": 'polite', children: previousId !== undefined && previousId !== currentStepId
+                }, inert: progress ? '' : undefined, children: [steps.length > 1 && (_jsxs(Grid, { ref: progressIndicatorRef, item: { area: 'stepIndicator' }, children: [stepIndicator === 'horizontal' && (_jsx(Grid, { item: { area: 'stepIndicator' }, as: HorizontalFormProgress, steps: steps, currentStepId: currentStepId, showStepNames: showHorizontalStepNames, variant: variant })), stepIndicator.startsWith('vertical') && (_jsx(Grid, { item: { area: 'stepIndicator' }, as: VerticalFormProgress, steps: steps, currentStepId: currentStepId, variant: variant })), _jsx(VisuallyHiddenText, { "aria-live": 'polite', children: previousId !== undefined && previousId !== currentStepId
                                     ? t('step_changed_to_name', [currentStep.name])
                                     : '' })] })), currentStep.banners && _jsx(Grid, { item: { area: 'banners' }, children: currentStep.banners }), currentStep.description && (_jsx(StyledInstructionText, { item: { area: 'description' }, children: _jsx(HTML, { id: descriptionId, as: 'p', content: currentStep.description }) })), _jsx(Grid, { item: { area: 'content' }, as: StyledFormContent, ref: multiStepFormContentRef, children: currentStep.content }), _jsx(Progress, { visible: !!progress, focusOnVisible: true, placement: 'local', message: typeof progress === 'string' ? progress : undefined })] }), currentStep.actions && (_jsx(ResponsiveActions, { actionsRef: multiStepActionsRef, actionsEl: currentStep.actions }))] }));
 });