@pega/cosmos-react-core 9.0.0-build.9.8 → 9.0.0

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

@@ -7,148 +7,267 @@ import { StyledText } from '../Text';
 import { calculateFontSize } from '../../styles';
 import { useDirection } from '../../hooks';
 import Flex from '../Flex';
+import { ellipsisOverflow } from '../../styles/mixins';
+/** Min width of each step item including labels in ch units */
+export const stepItemMinWidth = 15;
+/** Min width of step marker without labels in ch units */
+export const stepMarkerMinWidth = 3;
 export const CurrentStepPopover = styled(Popover) `
   max-width: 100%;
   background-color: transparent;
   z-index: 0;
   box-shadow: none;
+  animation: none;
 
   & > ${StyledText} {
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
+    ${ellipsisOverflow}
   }
 `;
-export const StyledBar = styled.div(({ theme }) => {
-    const { base: { palette: { 'border-line': borderColor } } } = theme;
+const calculateStepMarkerSizes = (fontSize, fontScale) => {
+    const { m: stepMarkerSize } = calculateFontSize(fontSize, fontScale);
+    return {
+        stepMarkerSize,
+        smallStepMarkerSize: `calc(${stepMarkerSize} / 1.5)`,
+        bigStepMarkerSize: `calc(${stepMarkerSize} * 1.5)`
+    };
+};
+const calculateBarTopPadding = (fontSize, fontScale, lineHeight) => {
+    const { bigStepMarkerSize } = calculateStepMarkerSizes(fontSize, fontScale);
+    return {
+        // assuming the step progress always contains current step marker which is the biggest one,
+        // the top padding of the bar should be half of the big step marker size minus line height of the bar
+        // to be vertically centered
+        stepBarTopPadding: `calc((${bigStepMarkerSize} / 2) - (${lineHeight} / 2))`
+    };
+};
+export const StyledBar = styled.div(({ shifted, theme }) => {
+    const { base: { 'font-size': fontSize, 'font-scale': fontScale }, components: { 'form-control': { 'border-color': borderColor } } } = theme;
+    const lineHeight = '0.125rem';
+    const { stepBarTopPadding } = calculateBarTopPadding(fontSize, fontScale, lineHeight);
     return css `
     position: absolute;
+    ${shifted && `inset-block-start: ${stepBarTopPadding};`}
     width: 100%;
-    height: 0.0625rem;
+    height: ${lineHeight};
     background: ${borderColor};
+
+    @media (forced-colors: active) {
+      background: CanvasText;
+    }
   `;
 });
 StyledBar.defaultProps = defaultThemeProp;
 export const StyledFill = styled.div(({ theme }) => {
     const { base: { animation: { speed: animationSpeed, timing: { ease: animationTiming } }, palette: { interactive } } } = theme;
     const { ltr } = useDirection();
+    const markedLineThicknessFactor = 2;
     return css `
     position: absolute;
     width: 100%;
-    height: 100%;
+    height: calc(100% * ${markedLineThicknessFactor});
+
+    /* top position based on line thickness factor to keep the fill centered */
+    top: calc(-50% * (${markedLineThicknessFactor} - 1));
     background: ${interactive};
     transition: all calc(2 * ${animationSpeed}) ${animationTiming};
     transform: scaleX(var(--fillScale));
     transform-origin: ${ltr ? 0 : '100%'} 0;
+
+    @media (forced-colors: active) {
+      background: Highlight;
+    }
   `;
 });
 StyledFill.defaultProps = defaultThemeProp;
-export const StyledFormProgress = styled(Flex)(({ theme }) => {
-    const { base: { spacing, 'font-size': fontSize, 'font-scale': fontScale }, components: { text: { h4: { 'font-size': h4fontSize } } } } = theme;
+export const StyledFormProgress = styled(Flex)(({ showStepNames, theme }) => {
+    const { base: { spacing, 'font-size': fontSize, 'font-scale': fontScale }, components: { text: { h4: { 'font-size': h3fontSize } } } } = theme;
     const fontSizes = calculateFontSize(fontSize, fontScale);
     return css `
     position: relative;
-    padding-block-start: calc(${spacing} + ${fontSizes[h4fontSize]} * 1.35);
+    ${!showStepNames &&
+        `padding-block-end: calc(${spacing} + ${fontSizes[h3fontSize]} * 1.35);`}
   `;
 });
 StyledFormProgress.defaultProps = defaultThemeProp;
-export const StyledStepMarkers = styled.ol(({ theme }) => {
-    return css `
-    list-style-type: none;
-
-    li {
-      display: flex;
+export const StepMarker = styled(BareButton)(({ current, depth, completed, clickable, theme }) => {
+    const { base: { 'font-size': fontSize, 'font-scale': fontScale, animation: { speed: animationSpeed, timing: { ease: animationTiming } }, palette: { interactive, 'primary-background': primaryBackground }, shadow: { focus: focusShadow }, 'hit-area': { 'mouse-min': buttonSize, 'finger-min': touchButtonSize } }, components: { 'form-control': { 'border-color': borderColor, 'border-width': borderWidth } } } = theme;
+    const { stepMarkerSize, smallStepMarkerSize, bigStepMarkerSize } = calculateStepMarkerSizes(fontSize, fontScale);
+    // Determine the actual size for this marker based on its state
+    let markerSize = stepMarkerSize;
+    if (current) {
+        markerSize = bigStepMarkerSize;
     }
-
-    &:has(:focus-visible) {
-      box-shadow: ${theme.base.shadow['focus-group']};
+    else if (depth === 1) {
+        markerSize = smallStepMarkerSize;
     }
-  `;
-});
-StyledStepMarkers.defaultProps = defaultThemeProp;
-export const StyledVerticalStepMarkers = styled.ol `
-  list-style-type: none;
-`;
-export const StepMarker = styled(BareButton)(({ current, depth, prior, theme }) => {
-    const { base: { 'font-size': fontSize, 'font-scale': fontScale, animation: { speed: animationSpeed, timing: { ease: animationTiming } }, palette: { interactive, 'primary-background': primaryBackground }, shadow: { focus: focusShadow }, 'hit-area': { 'mouse-min': buttonSize, 'finger-min': touchButtonSize } }, components: { 'form-control': { 'border-color': borderColor } } } = theme;
-    const { m: stepMarkerSize } = calculateFontSize(fontSize, fontScale);
-    const smallStepMarkerSize = `calc(${stepMarkerSize} / 1.5)`;
     return css `
     position: relative;
     z-index: 1;
-    ${size(depth === 1 ? smallStepMarkerSize : stepMarkerSize)}
-    border-radius: 100%;
-    background: ${primaryBackground};
-    border: 0.0625rem solid ${borderColor};
-    transition: all calc(2 * ${animationSpeed}) ${animationTiming};
 
-    ${current &&
+    /* Fixed container size based on the biggest marker to prevent layout shifts */
+    ${size(bigStepMarkerSize)}
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+
+    ${clickable
+        ? css `
+          border-color: ${interactive};
+        `
+        : css `
+          cursor: default;
+        `}
+
+    &::before {
+      content: '';
+      ${size(markerSize)}
+      position: absolute;
+      border-radius: 100%;
+      transition: all calc(2 * ${animationSpeed}) ${animationTiming};
+    }
+
+    &:focus::before {
+      box-shadow: ${focusShadow};
+
+      @media (forced-colors: active) {
+        outline: 0.125rem solid Highlight;
+        outline-offset: 0.125rem;
+      }
+    }
+
+    ${!current &&
         css `
-      background: ${interactive};
-      border-color: ${interactive};
+      border-color: transparent;
+      background: transparent;
+
+      &::before {
+        background: ${primaryBackground};
+        border: calc(2 * ${borderWidth}) solid ${clickable ? interactive : borderColor};
+
+        ${completed &&
+            css `
+          background: ${interactive};
+          border-color: ${interactive};
+        `}
+
+        @media (forced-colors: active) {
+          background: ${completed ? 'Highlight' : 'Canvas'};
+          border-color: ${clickable ? 'Highlight' : 'CanvasText'};
+        }
+      }
     `}
 
-    ${prior &&
+    ${current &&
         css `
-      border-color: ${interactive};
+      &::before {
+        background: ${interactive};
+
+        @media (forced-colors: active) {
+          background: Highlight;
+        }
+      }
     `}
 
     ::after {
       content: '';
       position: absolute;
-      inset-block-start: ${depth === 1
-        ? `calc((${buttonSize} - ${smallStepMarkerSize}) / -2) `
-        : `calc((${buttonSize} - ${stepMarkerSize}) / -2) `};
-      inset-inline-start: ${depth === 1
-        ? `calc((${buttonSize} - ${smallStepMarkerSize}) / -2) `
-        : `calc((${buttonSize} - ${stepMarkerSize}) / -2) `};
       ${size(buttonSize)}
+      inset-block-start: ${`calc((${buttonSize} - ${bigStepMarkerSize}) / -2) `};
+      inset-inline-start: ${`calc((${buttonSize} - ${bigStepMarkerSize}) / -2) `};
 
       @media (pointer: coarse) {
-        inset-block-start: ${depth === 1
-        ? `calc((${touchButtonSize} - ${smallStepMarkerSize}) / -2) `
-        : `calc((${touchButtonSize} - ${stepMarkerSize}) / -2) `};
-        inset-inline-start: ${depth === 1
-        ? `calc((${touchButtonSize} - ${smallStepMarkerSize}) / -2) `
-        : `calc((${touchButtonSize} - ${stepMarkerSize}) / -2) `};
+        inset-block-start: ${`calc((${touchButtonSize} - ${bigStepMarkerSize}) / -2) `};
+        inset-inline-start: ${`calc((${touchButtonSize} - ${bigStepMarkerSize}) / -2) `};
         ${size(touchButtonSize)}
       }
     }
+  `;
+});
+StepMarker.defaultProps = defaultThemeProp;
+export const StyleHorizontalStepMarkers = styled.ol(({ showStepNames, theme }) => {
+    return css `
+      list-style-type: none;
+      justify-content: space-between;
 
-    &:not(:only-child):first-child::after {
-      inset-inline-start: 0;
-    }
+      li {
+        display: flex;
+        position: relative;
+        flex: 1 1 0;
 
-    &:not(:only-child):last-child::after {
-      inset-inline-start: unset;
-      inset-inline-end: 0;
-    }
+        /* min width changes based on whether step names are shown */
+        min-width: ${`${showStepNames ? stepItemMinWidth : stepMarkerMinWidth}ch`};
+        font-size: small;
+        margin-inline: ${theme.base.spacing};
+        flex-direction: column;
+        align-items: center;
+        text-align: center;
+      }
 
-    :focus {
-      box-shadow: ${focusShadow};
-    }
-  `;
+      li:first-child,
+      li:last-child {
+        flex: 0.5 1 0;
+        /* stylelint-disable-next-line unit-allowed-list */
+        min-width: ${`${showStepNames ? stepItemMinWidth / 2 : stepMarkerMinWidth / 2}ch`};
+      }
+
+      li:first-child {
+        align-items: flex-start;
+        text-align: left;
+        margin-inline-start: 0;
+        padding-inline-start: 0;
+
+        ${StepMarker}::before {
+          inset-inline-start: 0;
+        }
+      }
+
+      li:last-child {
+        align-items: flex-end;
+        text-align: right;
+        margin-inline-end: 0;
+        padding-inline-end: 0;
+
+        ${StepMarker}::before {
+          inset-inline-end: 0;
+        }
+      }
+
+      &:has(:focus-visible) {
+        box-shadow: ${theme.base.shadow['focus-group']};
+      }
+    `;
 });
-StepMarker.defaultProps = defaultThemeProp;
+StyleHorizontalStepMarkers.defaultProps = defaultThemeProp;
+export const StyledVerticalStepMarkers = styled.ol `
+  list-style-type: none;
+`;
 export const StyledBulletWrapper = styled.div(({ theme, hasNext, prior }) => {
-    const { base: { animation: { speed: animationSpeed }, palette: { interactive } }, components: { 'form-control': { 'border-color': borderColor } } } = theme;
+    const { base: { 'font-size': fontSize, 'font-scale': fontScale, animation: { speed: animationSpeed }, palette: { interactive } }, components: { 'form-control': { 'border-color': borderColor } } } = theme;
+    const baseLineWidth = '0.125rem';
+    const lineWidth = prior ? `calc(2 * ${baseLineWidth})` : baseLineWidth;
+    const { bigStepMarkerSize } = calculateStepMarkerSizes(fontSize, fontScale);
     return css `
     position: relative;
-    text-align: center;
     min-width: 2rem;
-    padding-block-start: calc(1.15 * ${theme.base.spacing});
 
     ${hasNext &&
         css `
       &::after {
         content: '';
         position: absolute;
-        margin-block-start: 0.85rem;
-        inset-inline-start: calc(50% - 0.03125rem);
-        width: 0.0625rem;
+
+        /* Center the line horizontally and vertically relative to the step marker */
+        inset-block-start: calc(${bigStepMarkerSize});
+        inset-inline-start: calc(50% - (${lineWidth} / 2));
+        width: ${lineWidth};
         height: 100%;
         background: ${prior ? interactive : borderColor};
         transition: background calc(2 * ${animationSpeed});
+
+        @media (forced-colors: active) {
+          background: ${prior ? 'Highlight' : 'CanvasText'};
+        }
       }
     `}
   `;
@@ -161,4 +280,15 @@ export const StyledStepText = styled.div(({ theme }) => {
   `;
 });
 StyledStepText.defaultProps = defaultThemeProp;
+export const StyledHorizontalStepText = styled.div(({ theme }) => {
+    const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
+    return css `
+    padding-block: ${theme.base.spacing};
+    overflow-wrap: break-word;
+    min-width: inherit;
+    font-size: ${fontSize.xxs};
+    text-align: inherit;
+  `;
+});
+StyledHorizontalStepText.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';\n\nimport type { Step } from './MultiStepForm.types';\n\nexport const CurrentStepPopover = styled(Popover)`\n  max-width: 100%;\n  background-color: transparent;\n  z-index: 0;\n  box-shadow: none;\n\n  & > ${StyledText} {\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n  }\n`;\n\nexport const StyledBar = styled.div(({ theme }) => {\n  const {\n    base: {\n      palette: { 'border-line': borderColor }\n    }\n  } = theme;\n\n  return css`\n    position: absolute;\n    width: 100%;\n    height: 0.0625rem;\n    background: ${borderColor};\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  return css`\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    background: ${interactive};\n    transition: all calc(2 * ${animationSpeed}) ${animationTiming};\n    transform: scaleX(var(--fillScale));\n    transform-origin: ${ltr ? 0 : '100%'} 0;\n  `;\n});\n\nStyledFill.defaultProps = defaultThemeProp;\n\nexport const StyledFormProgress = styled(Flex)(({ theme }) => {\n  const {\n    base: { spacing, 'font-size': fontSize, 'font-scale': fontScale },\n    components: {\n      text: {\n        h4: { 'font-size': h4fontSize }\n      }\n    }\n  } = theme;\n  const fontSizes = calculateFontSize(fontSize, fontScale);\n\n  return css`\n    position: relative;\n    padding-block-start: calc(${spacing} + ${fontSizes[h4fontSize as FontSize]} * 1.35);\n  `;\n});\n\nStyledFormProgress.defaultProps = defaultThemeProp;\n\nexport const StyledStepMarkers = styled.ol(({ theme }) => {\n  return css`\n    list-style-type: none;\n\n    li {\n      display: flex;\n    }\n\n    &:has(:focus-visible) {\n      box-shadow: ${theme.base.shadow['focus-group']};\n    }\n  `;\n});\n\nStyledStepMarkers.defaultProps = defaultThemeProp;\n\nexport const StyledVerticalStepMarkers = styled.ol`\n  list-style-type: none;\n`;\n\nexport const StepMarker = styled(BareButton)<{\n  current: boolean;\n  depth: Step['depth'];\n  prior: boolean;\n}>(({ current, depth, prior, 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 }\n    }\n  } = theme;\n\n  const { m: stepMarkerSize } = calculateFontSize(fontSize, fontScale);\n  const smallStepMarkerSize = `calc(${stepMarkerSize} / 1.5)`;\n\n  return css`\n    position: relative;\n    z-index: 1;\n    ${size(depth === 1 ? smallStepMarkerSize : stepMarkerSize)}\n    border-radius: 100%;\n    background: ${primaryBackground};\n    border: 0.0625rem solid ${borderColor};\n    transition: all calc(2 * ${animationSpeed}) ${animationTiming};\n\n    ${current &&\n    css`\n      background: ${interactive};\n      border-color: ${interactive};\n    `}\n\n    ${prior &&\n    css`\n      border-color: ${interactive};\n    `}\n\n    ::after {\n      content: '';\n      position: absolute;\n      inset-block-start: ${depth === 1\n        ? `calc((${buttonSize} - ${smallStepMarkerSize}) / -2) `\n        : `calc((${buttonSize} - ${stepMarkerSize}) / -2) `};\n      inset-inline-start: ${depth === 1\n        ? `calc((${buttonSize} - ${smallStepMarkerSize}) / -2) `\n        : `calc((${buttonSize} - ${stepMarkerSize}) / -2) `};\n      ${size(buttonSize)}\n\n      @media (pointer: coarse) {\n        inset-block-start: ${depth === 1\n          ? `calc((${touchButtonSize} - ${smallStepMarkerSize}) / -2) `\n          : `calc((${touchButtonSize} - ${stepMarkerSize}) / -2) `};\n        inset-inline-start: ${depth === 1\n          ? `calc((${touchButtonSize} - ${smallStepMarkerSize}) / -2) `\n          : `calc((${touchButtonSize} - ${stepMarkerSize}) / -2) `};\n        ${size(touchButtonSize)}\n      }\n    }\n\n    &:not(:only-child):first-child::after {\n      inset-inline-start: 0;\n    }\n\n    &:not(:only-child):last-child::after {\n      inset-inline-start: unset;\n      inset-inline-end: 0;\n    }\n\n    :focus {\n      box-shadow: ${focusShadow};\n    }\n  `;\n});\n\nStepMarker.defaultProps = defaultThemeProp;\n\nexport const StyledBulletWrapper = styled.div<{\n  hasNext: boolean;\n  prior: boolean;\n}>(({ theme, hasNext, prior }) => {\n  const {\n    base: {\n      animation: { speed: animationSpeed },\n      palette: { interactive }\n    },\n    components: {\n      'form-control': { 'border-color': borderColor }\n    }\n  } = theme;\n  return css`\n    position: relative;\n    text-align: center;\n    min-width: 2rem;\n    padding-block-start: calc(1.15 * ${theme.base.spacing});\n\n    ${hasNext &&\n    css`\n      &::after {\n        content: '';\n        position: absolute;\n        margin-block-start: 0.85rem;\n        inset-inline-start: calc(50% - 0.03125rem);\n        width: 0.0625rem;\n        height: 100%;\n        background: ${prior ? interactive : borderColor};\n        transition: background calc(2 * ${animationSpeed});\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"]}
+{"version":3,"file":"FormProgress.styles.js","sourceRoot":"","sources":["../../../src/components/MultiStepForm/FormProgress.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhC,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,UAAU,MAAM,sBAAsB,CAAC;AAC9C,OAAO,OAAO,MAAM,YAAY,CAAC;AACjC,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AACrC,OAAO,EAAE,iBAAiB,EAAiB,MAAM,cAAc,CAAC;AAChE,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAC3C,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAIvD,+DAA+D;AAC/D,MAAM,CAAC,MAAM,gBAAgB,GAAG,EAAE,CAAC;AAEnC,0DAA0D;AAC1D,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,CAAC;AAEpC,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,OAAO,CAAC,CAAA;;;;;;;QAOzC,UAAU;MACZ,gBAAgB;;CAErB,CAAC;AAEF,MAAM,wBAAwB,GAAG,CAAC,QAAgB,EAAE,SAA0B,EAAE,EAAE;IAChF,MAAM,EAAE,CAAC,EAAE,cAAc,EAAE,GAAG,iBAAiB,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC;IACrE,OAAO;QACL,cAAc;QACd,mBAAmB,EAAE,QAAQ,cAAc,SAAS;QACpD,iBAAiB,EAAE,QAAQ,cAAc,SAAS;KACnD,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,sBAAsB,GAAG,CAC7B,QAAgB,EAChB,SAA0B,EAC1B,UAAkB,EAClB,EAAE;IACF,MAAM,EAAE,iBAAiB,EAAE,GAAG,wBAAwB,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC;IAC5E,OAAO;QACL,2FAA2F;QAC3F,qGAAqG;QACrG,4BAA4B;QAC5B,iBAAiB,EAAE,SAAS,iBAAiB,YAAY,UAAU,QAAQ;KAC5E,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAwB,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,EAAE;IAChF,MAAM,EACJ,IAAI,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,YAAY,EAAE,SAAS,EAAE,EACxD,UAAU,EAAE,EACV,cAAc,EAAE,EAAE,cAAc,EAAE,WAAW,EAAE,EAChD,EACF,GAAG,KAAK,CAAC;IAEV,MAAM,UAAU,GAAG,UAAU,CAAC;IAC9B,MAAM,EAAE,iBAAiB,EAAE,GAAG,sBAAsB,CAAC,QAAQ,EAAE,SAAS,EAAE,UAAU,CAAC,CAAC;IAEtF,OAAO,GAAG,CAAA;;MAEN,OAAO,IAAI,sBAAsB,iBAAiB,GAAG;;cAE7C,UAAU;kBACN,WAAW;;;;;GAK1B,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,SAAS,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE1C,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACjD,MAAM,EACJ,IAAI,EAAE,EACJ,SAAS,EAAE,EACT,KAAK,EAAE,cAAc,EACrB,MAAM,EAAE,EAAE,IAAI,EAAE,eAAe,EAAE,EAClC,EACD,OAAO,EAAE,EAAE,WAAW,EAAE,EACzB,EACF,GAAG,KAAK,CAAC;IAEV,MAAM,EAAE,GAAG,EAAE,GAAG,YAAY,EAAE,CAAC;IAE/B,MAAM,yBAAyB,GAAG,CAAC,CAAC;IAEpC,OAAO,GAAG,CAAA;;;0BAGc,yBAAyB;;;wBAG3B,yBAAyB;kBAC/B,WAAW;+BACE,cAAc,KAAK,eAAe;;wBAEzC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM;;;;;GAKrC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,UAAU,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE3C,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,IAAI,CAAC,CAA8B,CAAC,EAC3E,aAAa,EACb,KAAK,EACN,EAAE,EAAE;IACH,MAAM,EACJ,IAAI,EAAE,EAAE,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,YAAY,EAAE,SAAS,EAAE,EACjE,UAAU,EAAE,EACV,IAAI,EAAE,EACJ,EAAE,EAAE,EAAE,WAAW,EAAE,UAAU,EAAE,EAChC,EACF,EACF,GAAG,KAAK,CAAC;IACV,MAAM,SAAS,GAAG,iBAAiB,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC;IAEzD,OAAO,GAAG,CAAA;;MAEN,CAAC,aAAa;QAChB,2BAA2B,OAAO,MAAM,SAAS,CAAC,UAAsB,CAAC,WAAW;GACrF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC,CAKzC,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,EAAE;IACrD,MAAM,EACJ,IAAI,EAAE,EACJ,WAAW,EAAE,QAAQ,EACrB,YAAY,EAAE,SAAS,EACvB,SAAS,EAAE,EACT,KAAK,EAAE,cAAc,EACrB,MAAM,EAAE,EAAE,IAAI,EAAE,eAAe,EAAE,EAClC,EACD,OAAO,EAAE,EAAE,WAAW,EAAE,oBAAoB,EAAE,iBAAiB,EAAE,EACjE,MAAM,EAAE,EAAE,KAAK,EAAE,WAAW,EAAE,EAC9B,UAAU,EAAE,EAAE,WAAW,EAAE,UAAU,EAAE,YAAY,EAAE,eAAe,EAAE,EACvE,EACD,UAAU,EAAE,EACV,cAAc,EAAE,EAAE,cAAc,EAAE,WAAW,EAAE,cAAc,EAAE,WAAW,EAAE,EAC7E,EACF,GAAG,KAAK,CAAC;IAEV,MAAM,EAAE,cAAc,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,GAAG,wBAAwB,CACzF,QAAQ,EACR,SAAS,CACV,CAAC;IAEF,+DAA+D;IAC/D,IAAI,UAAU,GAAG,cAAc,CAAC;IAChC,IAAI,OAAO,EAAE,CAAC;QACZ,UAAU,GAAG,iBAAiB,CAAC;IACjC,CAAC;SAAM,IAAI,KAAK,KAAK,CAAC,EAAE,CAAC;QACvB,UAAU,GAAG,mBAAmB,CAAC;IACnC,CAAC;IAED,OAAO,GAAG,CAAA;;;;;MAKN,IAAI,CAAC,iBAAiB,CAAC;;;;;;MAMvB,SAAS;QACT,CAAC,CAAC,GAAG,CAAA;0BACe,WAAW;SAC5B;QACH,CAAC,CAAC,GAAG,CAAA;;SAEF;;;;QAID,IAAI,CAAC,UAAU,CAAC;;;iCAGS,cAAc,KAAK,eAAe;;;;oBAI/C,WAAW;;;;;;;;MAQzB,CAAC,OAAO;QACV,GAAG,CAAA;;;;;sBAKe,iBAAiB;2BACZ,WAAW,WAAW,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW;;UAE5E,SAAS;YACX,GAAG,CAAA;wBACa,WAAW;0BACT,WAAW;SAC5B;;;wBAGe,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,QAAQ;0BAChC,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,YAAY;;;KAG3D;;MAEC,OAAO;QACT,GAAG,CAAA;;sBAEe,WAAW;;;;;;KAM5B;;;;;QAKG,IAAI,CAAC,UAAU,CAAC;2BACG,SAAS,UAAU,MAAM,iBAAiB,UAAU;4BACnD,SAAS,UAAU,MAAM,iBAAiB,UAAU;;;6BAGnD,SAAS,eAAe,MAAM,iBAAiB,UAAU;8BACxD,SAAS,eAAe,MAAM,iBAAiB,UAAU;UAC7E,IAAI,CAAC,eAAe,CAAC;;;GAG5B,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,UAAU,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE3C,MAAM,CAAC,MAAM,0BAA0B,GAAG,MAAM,CAAC,EAAE,CACjD,CAAC,EAAE,aAAa,EAAE,KAAK,EAAE,EAAE,EAAE;IAC3B,OAAO,GAAG,CAAA;;;;;;;;;;qBAUO,GAAG,aAAa,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,kBAAkB,IAAI;;yBAExD,KAAK,CAAC,IAAI,CAAC,OAAO;;;;;;;;;;qBAUtB,GAAG,aAAa,CAAC,CAAC,CAAC,gBAAgB,GAAG,CAAC,CAAC,CAAC,CAAC,kBAAkB,GAAG,CAAC,IAAI;;;;;;;;;UAS/E,UAAU;;;;;;;;;;;UAWV,UAAU;;;;;;sBAME,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC;;KAEjD,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,0BAA0B,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE3D,MAAM,CAAC,MAAM,yBAAyB,GAAG,MAAM,CAAC,EAAE,CAAA;;CAEjD,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,GAAG,CAG1C,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,EAAE;IAC/B,MAAM,EACJ,IAAI,EAAE,EACJ,WAAW,EAAE,QAAQ,EACrB,YAAY,EAAE,SAAS,EACvB,SAAS,EAAE,EAAE,KAAK,EAAE,cAAc,EAAE,EACpC,OAAO,EAAE,EAAE,WAAW,EAAE,EACzB,EACD,UAAU,EAAE,EACV,cAAc,EAAE,EAAE,cAAc,EAAE,WAAW,EAAE,EAChD,EACF,GAAG,KAAK,CAAC;IAEV,MAAM,aAAa,GAAG,UAAU,CAAC;IACjC,MAAM,SAAS,GAAG,KAAK,CAAC,CAAC,CAAC,YAAY,aAAa,GAAG,CAAC,CAAC,CAAC,aAAa,CAAC;IAEvE,MAAM,EAAE,iBAAiB,EAAE,GAAG,wBAAwB,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC;IAE5E,OAAO,GAAG,CAAA;;;;MAIN,OAAO;QACT,GAAG,CAAA;;;;;;kCAM2B,iBAAiB;0CACT,SAAS;iBAClC,SAAS;;sBAEJ,KAAK,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW;0CACb,cAAc;;;wBAGhC,KAAK,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,YAAY;;;KAGrD;GACF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,mBAAmB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEpD,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACrD,OAAO,GAAG,CAAA;qBACS,KAAK,CAAC,IAAI,CAAC,OAAO;;GAEpC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE/C,MAAM,CAAC,MAAM,wBAAwB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC/D,MAAM,QAAQ,GAAG,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;IAEtF,OAAO,GAAG,CAAA;qBACS,KAAK,CAAC,IAAI,CAAC,OAAO;;;iBAGtB,QAAQ,CAAC,GAAG;;GAE1B,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,wBAAwB,CAAC,YAAY,GAAG,gBAAgB,CAAC","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::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"]}

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

@@ -1,9 +1,10 @@
 import type { FunctionComponent } from 'react';
 import type { ForwardProps } from '../../types';
-import type MultiStepFormProps from './MultiStepForm.types';
+import type { MultiStepFormProps } from './MultiStepForm.types';
 interface FormProgressProps {
     steps: MultiStepFormProps['steps'];
     currentStepId: MultiStepFormProps['currentStepId'];
+    showStepNames?: boolean;
 }
 declare const HorizontalFormProgress: FunctionComponent<FormProgressProps & ForwardProps>;
 export default HorizontalFormProgress;

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;AAchD,OAAO,KAAK,kBAAkB,MAAM,uBAAuB,CAAC;AAE5D,UAAU,iBAAiB;IACzB,KAAK,EAAE,kBAAkB,CAAC,OAAO,CAAC,CAAC;IACnC,aAAa,EAAE,kBAAkB,CAAC,eAAe,CAAC,CAAC;CACpD;AAED,QAAA,MAAM,sBAAsB,EAAE,iBAAiB,CAAC,iBAAiB,GAAG,YAAY,CAmI/E,CAAC;AAEF,eAAe,sBAAsB,CAAC"}
+{"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"}

package/lib/components/MultiStepForm/HorizontalFormProgress.js

@@ -1,14 +1,21 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { remToPx, stripUnit } from 'polished';
 import { useEffect, useRef, useState } from 'react';
-import { useArrows, useElement, useI18n, useTheme } from '../../hooks';
+import { useArrows, useDirection, useElement, useI18n, useTheme } from '../../hooks';
 import { tryCatch } from '../../utils';
 import Flex from '../Flex';
 import Text from '../Text';
 import Tooltip from '../Tooltip';
-import { CurrentStepPopover, StepMarker, StyledBar, StyledFill, StyledFormProgress, StyledStepMarkers } from './FormProgress.styles';
-const HorizontalFormProgress = ({ steps, currentStepId, ...restProps }) => {
+import Button from '../Button';
+import InfoDialog from '../Dialog/InfoDialog';
+import { CurrentStepPopover, StepMarker, StyledBar, StyledFill, StyledFormProgress, StyledHorizontalStepText, StyleHorizontalStepMarkers } from './FormProgress.styles';
+import VerticalFormProgress from './VerticalFormProgress';
+import { useFormProgressOverflow } from './useFormProgressOverflow';
+const HorizontalFormProgress = ({ steps, currentStepId, showStepNames = false, ...restProps }) => {
     const t = useI18n();
+    const [stepsDialogButtonEl, setStepsDialogButtonEl] = useElement();
+    const [showStepsDialog, setShowStepsDialog] = useState(false);
+    const { ref: formProgressRef, state: stepsAreOverflowing } = useFormProgressOverflow(steps.length, showStepNames);
     const curIdx = steps.findIndex(step => step.id === currentStepId);
     const curStep = steps[curIdx];
     const fillScale = curIdx / (steps.length - 1);
@@ -16,19 +23,19 @@ const HorizontalFormProgress = ({ steps, currentStepId, ...restProps }) => {
     const [stepEls, setStepEls] = useState({});
     const stepsRef = useRef(null);
     const theme = useTheme();
-    let popoverPlacement = 'top';
+    const { rtl } = useDirection();
+    let popoverPlacement = 'bottom';
     if (curIdx === 0)
-        popoverPlacement = 'top-start';
+        popoverPlacement = rtl ? 'bottom-end' : 'bottom-start';
     else if (curIdx === steps.length - 1)
-        popoverPlacement = 'top-end';
+        popoverPlacement = rtl ? 'bottom-start' : 'bottom-end';
     useArrows(stepsRef, {
-        selector: 'button',
-        cycle: false,
+        selector: '[data-step-marker]',
         dir: 'left-right',
         initialFocusElement: currentStepEl
     });
     useArrows(stepsRef, {
-        selector: 'button',
+        selector: '[data-step-marker]',
         cycle: false,
         dir: 'up-down',
         initialFocusElement: currentStepEl
@@ -38,7 +45,13 @@ const HorizontalFormProgress = ({ steps, currentStepId, ...restProps }) => {
             setCurrentStepEl(stepEls[curStep.id]);
         }
     }, [Object.keys(stepEls), curStep]);
-    return (_jsxs(StyledFormProgress, { ...restProps, container: { alignItems: 'center' }, children: [_jsx(CurrentStepPopover, { show: true, target: currentStepEl, placement: popoverPlacement, strategy: 'absolute', portal: false, hideOnTargetHidden: true, modifiers: [
+    useEffect(() => {
+        if (!stepsAreOverflowing) {
+            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',
                         options: {
@@ -62,20 +75,26 @@ const HorizontalFormProgress = ({ steps, currentStepId, ...restProps }) => {
                             padding: 0
                         }
                     }
-                ], children: _jsx(Text, { variant: 'h4', children: curStep.name }) }), _jsx(Flex, { ref: stepsRef, as: StyledStepMarkers, container: { justify: 'between', alignItems: 'center' }, item: { grow: 1 }, children: steps.map((step, index) => {
-                    return (_jsx("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, "aria-label": `${step.name} - ${t('step_num', [index + 1, steps.length])}`, "aria-current": index === curIdx ? 'step' : undefined, tabIndex: index === curIdx ? 0 : -1, current: index === curIdx, depth: step.depth, prior: index < curIdx, onClick: step.onMarkerClick, children: index !== curIdx && (_jsx(Tooltip, { target: stepEls[step.id], showDelay: 'none', hideDelay: 'short', describeTarget: false, children: step.name })) }) }, step.id));
-                }) }), _jsx(StyledBar, { children: _jsx(StyledFill, { style: { '--fillScale': fillScale } }) })] }));
+                ], children: _jsx(Text, { variant: 'h4', children: curStep.name }) }), stepsAreOverflowing ? (_jsxs("div", { children: [_jsx(Button, { ref: setStepsDialogButtonEl, variant: 'link', onClick: () => {
+                            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 } }) })] }))] }));
 };
 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, 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';\n\nimport {\n  CurrentStepPopover,\n  StepMarker,\n  StyledBar,\n  StyledFill,\n  StyledFormProgress,\n  StyledStepMarkers\n} from './FormProgress.styles';\nimport type MultiStepFormProps from './MultiStepForm.types';\n\ninterface FormProgressProps {\n  steps: MultiStepFormProps['steps'];\n  currentStepId: MultiStepFormProps['currentStepId'];\n}\n\nconst HorizontalFormProgress: 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  const fillScale = curIdx / (steps.length - 1);\n\n  const [currentStepEl, setCurrentStepEl] = useElement();\n  const [stepEls, setStepEls] = useState<Record<string, HTMLElement>>({});\n  const stepsRef = useRef(null);\n  const theme = useTheme();\n\n  let popoverPlacement: 'top' | 'top-start' | 'top-end' = 'top';\n  if (curIdx === 0) popoverPlacement = 'top-start';\n  else if (curIdx === steps.length - 1) popoverPlacement = 'top-end';\n\n  useArrows(stepsRef, {\n    selector: 'button',\n    cycle: false,\n    dir: 'left-right',\n    initialFocusElement: currentStepEl\n  });\n\n  useArrows(stepsRef, {\n    selector: 'button',\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    <StyledFormProgress {...restProps} container={{ alignItems: 'center' }}>\n      <CurrentStepPopover\n        show\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      <Flex\n        ref={stepsRef}\n        as={StyledStepMarkers}\n        container={{ justify: 'between', alignItems: 'center' }}\n        item={{ grow: 1 }}\n      >\n        {steps.map((step, index) => {\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                aria-label={`${step.name} - ${t('step_num', [index + 1, steps.length])}`}\n                aria-current={index === curIdx ? 'step' : undefined}\n                tabIndex={index === curIdx ? 0 : -1}\n                current={index === curIdx}\n                depth={step.depth}\n                prior={index < curIdx}\n                onClick={step.onMarkerClick}\n              >\n                {index !== curIdx && (\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            </li>\n          );\n        })}\n      </Flex>\n\n      <StyledBar>\n        <StyledFill style={{ '--fillScale': fillScale } as CSSProperties} />\n      </StyledBar>\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';\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"]}