@pega/cosmos-react-core 9.0.0-build.19.6 → 9.0.0-build.19.8

package/lib/components/AppShell/NavigationList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationList.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/NavigationList.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAe,EAAE,EAAiC,MAAM,OAAO,CAAC;AA2B5E,OAAO,KAAK,EACV,gBAAgB,EAEhB,YAAY,EAEb,MAAM,kBAAkB,CAAC;AA4F1B,eAAO,MAAM,kBAAkB,EAAE,EAAE,CAAC,gBAAgB,CA2KnD,CAAC;AAEF,QAAA,MAAM,cAAc,EAAE,EAAE,CAAC,YAAY,CA8DpC,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"NavigationList.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/NavigationList.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAe,EAAE,EAAiC,MAAM,OAAO,CAAC;AA2B5E,OAAO,KAAK,EACV,gBAAgB,EAEhB,YAAY,EAEb,MAAM,kBAAkB,CAAC;AA4F1B,eAAO,MAAM,kBAAkB,EAAE,EAAE,CAAC,gBAAgB,CA8KnD,CAAC;AAEF,QAAA,MAAM,cAAc,EAAE,EAAE,CAAC,YAAY,CA8DpC,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/lib/components/AppShell/NavigationList.js

@@ -93,7 +93,10 @@ export const NavigationListItem = ({ visual, primary, secondary, collapsedItemIn
                     'aria-haspopup': 'menu',
                     'aria-expanded': menuState === 'open'
                 }), "aria-current": ariaCurrent, children: [singleSelect && (_jsx(Flex, { container: { justify: 'center', alignItems: 'center' }, as: StyledSingleSelectIconBox, children: selected && _jsx(Icon, { name: 'check' }) })), visual && (_jsxs(Flex, { container: { direction: 'column', gap: 0.5 }, as: StyledNavListItemVisualContainer, isCurrent: ariaCurrent === 'page', navOpen: navOpen, children: [_jsx(StyledNavItemIconBox, { children: visual }), !navOpen && collapsedItemInfo && (_jsx(Text, { variant: 'secondary', children: collapsedItemInfo })), hasItems && navState === 'closed' && (_jsx(StyledNavListItemGroupIndicator, { name: `caret-${end}` }))] })), secondary ? (_jsxs(Flex, { container: { direction: 'column', alignItems: 'start' }, item: { shrink: !navOpen && detached ? 1 : 0 }, as: 'span', children: [_jsx("span", { id: primaryId, children: primary }), _jsx(Text, { variant: 'secondary', children: secondary })] })) : (_jsx("span", { id: primaryId, children: primary })), (hasItems || actions) && navState === 'open' && !mobileNavBar && (_jsx(StyledNavListItemExpandCollapse, { name: `caret-${end}` }))] }) }),
-        onDismiss && navOpen && (_jsx(Button, { icon: true, variant: 'simple', as: StyledCaseClose, onClick: onDismiss, "aria-label": t('dismiss_case'), children: _jsx(Icon, { name: 'times' }) })),
+        onDismiss && navOpen && (_jsx(Button, { icon: true, variant: 'simple', as: StyledCaseClose, onClick: (e) => {
+                e.stopPropagation();
+                onDismiss(e);
+            }, "aria-label": t('dismiss_case'), children: _jsx(Icon, { name: 'times' }) })),
         hasItems && (
         // eslint-disable-next-line @typescript-eslint/no-use-before-define
         _jsx(NavigationList, { nestedList: true, items: actions || items, collapsed: !navOpen || collapseItems }))));

package/lib/components/AppShell/NavigationList.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationList.js","sourceRoot":"","sources":["../../../src/components/AppShell/NavigationList.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useCallback, useContext, useEffect, useRef, useState } from 'react';\nimport type { ElementType, FC, MouseEvent, MouseEventHandler } from 'react';\n\nimport {\n  useTheme,\n  useArrows,\n  useConsolidatedRef,\n  useDirection,\n  useUID,\n  useI18n,\n  useEscape\n} from '../../hooks';\nimport { isValidElement } from '../../utils';\nimport ExpandCollapse from '../ExpandCollapse';\nimport BareButton from '../Button/BareButton';\nimport Flex from '../Flex';\nimport Icon, { registerIcon } from '../Icon';\nimport Text from '../Text';\nimport Button from '../Button';\nimport type { OmitStrict } from '../../types';\nimport type { PopoverProps } from '../Popover';\nimport Link from '../Link';\nimport * as timesIcon from '../Icon/icons/times.icon';\nimport * as checkIcon from '../Icon/icons/check.icon';\nimport * as caretLeftIcon from '../Icon/icons/caret-left.icon';\nimport * as caretRightIcon from '../Icon/icons/caret-right.icon';\n\nimport NavigationListItemWrapper from './NavigationListItemWrapper';\nimport type {\n  NavListItemProps,\n  NavListItemWrapperProps,\n  NavListProps,\n  NavMenuProps\n} from './AppShell.types';\nimport {\n  StyledNavList,\n  StyledNestedNavList,\n  StyledNavItemIconBox,\n  StyledNavListItem,\n  StyledNavListItemExpandCollapse,\n  StyledCaseClose,\n  StyledSingleSelectIconBox,\n  StyledNavListItemVisualContainer,\n  StyledNavListItemGroupIndicator\n} from './AppShell.styles';\nimport AppShellContext from './AppShellContext';\n\nregisterIcon(timesIcon, checkIcon, caretLeftIcon, caretRightIcon);\n\nconst NavigationMenu: FC<NavMenuProps> = props => {\n  const { navOpen } = useContext(AppShellContext);\n  const {\n    visual,\n    primary,\n    secondary,\n    href,\n    onClick,\n    items,\n    onDismiss,\n    actions,\n    forwardedRef,\n    ...restProps\n  } = props;\n\n  const uid = useUID();\n\n  const { navState } = useContext(AppShellContext);\n  const [collapsed, setCollapsed] = useState(true);\n\n  const toggleCollapsed = useCallback(\n    (e: MouseEvent<HTMLButtonElement>) => {\n      e.stopPropagation();\n      setCollapsed(state => !state);\n    },\n    [setCollapsed]\n  );\n\n  const itemRef = useConsolidatedRef(forwardedRef);\n\n  const menuRef = useRef<HTMLLIElement>(null);\n\n  useArrows(menuRef, { selector: '[role=\"menuitem\"]', cycle: true });\n\n  useEscape(() => {\n    setCollapsed(true);\n    itemRef.current?.focus();\n  }, menuRef);\n\n  const { end } = useDirection();\n\n  return (\n    <StyledNavListItem {...restProps} key={primary} nestedListCollapsed={collapsed} ref={menuRef}>\n      <BareButton\n        id={uid}\n        ref={itemRef}\n        aria-expanded={!collapsed}\n        aria-controls={`${uid}-menu`}\n        aria-label={primary}\n        onClick={toggleCollapsed}\n      >\n        {visual && <StyledNavItemIconBox>{visual}</StyledNavItemIconBox>}\n\n        {secondary ? (\n          <Flex container={{ direction: 'column', alignItems: 'start' }}>\n            <span>{primary}</span>\n            <Text variant='secondary'>{secondary}</Text>\n          </Flex>\n        ) : (\n          <span>{primary}</span>\n        )}\n\n        {navState === 'open' && <StyledNavListItemExpandCollapse name={`caret-${end}`} />}\n      </BareButton>\n\n      {/* eslint-disable-next-line @typescript-eslint/no-use-before-define */}\n      <NavigationList\n        id={`${uid}-menu`}\n        nestedList\n        items={items}\n        collapsed={!navOpen || collapsed}\n      />\n    </StyledNavListItem>\n  );\n};\n\nexport const NavigationListItem: FC<NavListItemProps> = ({\n  visual,\n  primary,\n  secondary,\n  collapsedItemInfo,\n  href,\n  onClick,\n  items,\n  collapseItems = false,\n  onDismiss,\n  actions,\n  forwardedRef,\n  isMenuItem,\n  mobileNavBar,\n  count,\n  singleSelect,\n  selected,\n  'aria-labelledby': ariaLabelledBy,\n  'aria-current': ariaCurrent,\n  ...restProps\n}) => {\n  const { navOpen: navOpenValue, navState } = useContext(AppShellContext);\n  const navOpen = mobileNavBar ? false : navOpenValue;\n  const t = useI18n();\n  const listItemRef = useConsolidatedRef(forwardedRef);\n  const [menuState, setMenuState] = useState('');\n  const {\n    components: {\n      'app-shell': {\n        nav: { detached }\n      }\n    }\n  } = useTheme();\n\n  const hasItems =\n    (Array.isArray(items) && items.length > 0) || (Array.isArray(actions) && actions.length > 0);\n  const compProps: {\n    href?: string;\n    onClick?: MouseEventHandler<HTMLAnchorElement | HTMLButtonElement | HTMLDivElement>;\n    actions?: NavListItemProps['actions'];\n    popover?: OmitStrict<PopoverProps, 'show' | 'target' | 'children'>;\n    'aria-label'?: string;\n  } = {\n    onClick: (e: MouseEvent<HTMLAnchorElement | HTMLButtonElement | HTMLDivElement>) => {\n      e.stopPropagation();\n      onClick?.(e);\n    },\n    href\n  };\n\n  let caseItems: NavListItemWrapperProps['items'] | undefined;\n  if (onDismiss) {\n    caseItems = [\n      {\n        primary: t('go_to_noun', [primary]),\n        onClick\n      },\n      {\n        primary: t('dismiss_case'),\n        onClick: onDismiss\n      }\n    ];\n  }\n\n  let Component: ElementType;\n\n  if (href) {\n    Component = Link;\n  } else {\n    Component = BareButton;\n  }\n\n  const shouldShowMenuAttributes = hasItems || (onDismiss && !navOpen);\n\n  useEffect(() => {\n    if (!navOpen && actions) {\n      const node = document.getElementsByTagName('body')[0];\n      const clickEvent = document.createEvent('MouseEvent');\n      clickEvent.initEvent('mousedown', true, true);\n      node.dispatchEvent(clickEvent);\n    }\n    if (navOpen && isMenuItem && listItemRef.current?.parentElement?.matches(':first-child'))\n      listItemRef.current?.focus();\n  }, [navOpen]);\n\n  const { end } = useDirection();\n  const primaryId = useUID();\n\n  return (\n    <StyledNavListItem {...restProps} key={primary} singleSelect={singleSelect} nestedListCollapsed>\n      <NavigationListItemWrapper\n        tooltipLabel={secondary ? `${primary} ${secondary}` : primary}\n        label={primary}\n        childElementRef={listItemRef}\n        items={actions || items || caseItems}\n        onMenuToggle={setMenuState}\n        mobileNavBar={mobileNavBar}\n      >\n        <Component\n          {...compProps}\n          ref={listItemRef}\n          {...(navOpen && isMenuItem ? { tabIndex: -1, role: 'menuitem' } : {})}\n          aria-labelledby={`${primaryId} ${count ? `${primary}-count` : ''} ${ariaLabelledBy ?? ''}`}\n          {...(shouldShowMenuAttributes && {\n            'aria-haspopup': 'menu',\n            'aria-expanded': menuState === 'open'\n          })}\n          aria-current={ariaCurrent}\n        >\n          {singleSelect && (\n            <Flex\n              container={{ justify: 'center', alignItems: 'center' }}\n              as={StyledSingleSelectIconBox}\n            >\n              {selected && <Icon name='check' />}\n            </Flex>\n          )}\n          {visual && (\n            <Flex\n              container={{ direction: 'column', gap: 0.5 }}\n              as={StyledNavListItemVisualContainer}\n              isCurrent={ariaCurrent === 'page'}\n              navOpen={navOpen}\n            >\n              <StyledNavItemIconBox>{visual}</StyledNavItemIconBox>\n              {!navOpen && collapsedItemInfo && (\n                <Text variant='secondary'>{collapsedItemInfo}</Text>\n              )}\n              {hasItems && navState === 'closed' && (\n                <StyledNavListItemGroupIndicator name={`caret-${end}`} />\n              )}\n            </Flex>\n          )}\n\n          {secondary ? (\n            <Flex\n              container={{ direction: 'column', alignItems: 'start' }}\n              item={{ shrink: !navOpen && detached ? 1 : 0 }}\n              as='span'\n            >\n              <span id={primaryId}>{primary}</span>\n              <Text variant='secondary'>{secondary}</Text>\n            </Flex>\n          ) : (\n            <span id={primaryId}>{primary}</span>\n          )}\n\n          {(hasItems || actions) && navState === 'open' && !mobileNavBar && (\n            <StyledNavListItemExpandCollapse name={`caret-${end}`} />\n          )}\n        </Component>\n      </NavigationListItemWrapper>\n\n      {onDismiss && navOpen && (\n        <Button\n          icon\n          variant='simple'\n          as={StyledCaseClose}\n          onClick={onDismiss}\n          aria-label={t('dismiss_case')}\n        >\n          <Icon name='times' />\n        </Button>\n      )}\n\n      {hasItems && (\n        // eslint-disable-next-line @typescript-eslint/no-use-before-define\n        <NavigationList nestedList items={actions || items} collapsed={!navOpen || collapseItems} />\n      )}\n    </StyledNavListItem>\n  );\n};\n\nconst NavigationList: FC<NavListProps> = ({\n  items = [],\n  nestedList,\n  id,\n  collapsed,\n  singleSelect,\n  mobileNavBar\n}) => {\n  let Component: ElementType = StyledNavList;\n  let ItemComponent: ElementType;\n  const { navOpen } = useContext(AppShellContext);\n\n  let fwdProps: {\n    as?: ElementType;\n    forwardedAs?: ElementType;\n    nullWhenCollapsed?: boolean;\n    transitionSpeed?: string;\n    collapsed: boolean;\n  } = {\n    collapsed: !!collapsed\n  };\n\n  const {\n    base: { animation }\n  } = useTheme();\n\n  if (nestedList) {\n    fwdProps = {\n      as: ExpandCollapse,\n      forwardedAs: 'ul',\n      nullWhenCollapsed: true,\n      transitionSpeed: items.length >= 10 ? `calc(2 * ${animation.speed})` : animation.speed,\n      ...fwdProps\n    };\n\n    Component = StyledNestedNavList;\n  }\n\n  return (\n    <Component {...(nestedList ? { role: 'menu', id } : {})} {...fwdProps}>\n      {items.map(item => {\n        if (isValidElement(item)) return item;\n\n        if (item.items && item.items.length > 0 && navOpen && !mobileNavBar) {\n          ItemComponent = NavigationMenu;\n        } else {\n          ItemComponent = NavigationListItem;\n        }\n\n        return (\n          <ItemComponent\n            key={item.id || item.primary}\n            isMenuItem={nestedList}\n            singleSelect={singleSelect}\n            aria-current={item['aria-current']}\n            mobileNavBar={mobileNavBar}\n            {...item}\n          />\n        );\n      })}\n    </Component>\n  );\n};\n\nexport default NavigationList;\n"]}
+{"version":3,"file":"NavigationList.js","sourceRoot":"","sources":["../../../src/components/AppShell/NavigationList.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useCallback, useContext, useEffect, useRef, useState } from 'react';\nimport type { ElementType, FC, MouseEvent, MouseEventHandler } from 'react';\n\nimport {\n  useTheme,\n  useArrows,\n  useConsolidatedRef,\n  useDirection,\n  useUID,\n  useI18n,\n  useEscape\n} from '../../hooks';\nimport { isValidElement } from '../../utils';\nimport ExpandCollapse from '../ExpandCollapse';\nimport BareButton from '../Button/BareButton';\nimport Flex from '../Flex';\nimport Icon, { registerIcon } from '../Icon';\nimport Text from '../Text';\nimport Button from '../Button';\nimport type { OmitStrict } from '../../types';\nimport type { PopoverProps } from '../Popover';\nimport Link from '../Link';\nimport * as timesIcon from '../Icon/icons/times.icon';\nimport * as checkIcon from '../Icon/icons/check.icon';\nimport * as caretLeftIcon from '../Icon/icons/caret-left.icon';\nimport * as caretRightIcon from '../Icon/icons/caret-right.icon';\n\nimport NavigationListItemWrapper from './NavigationListItemWrapper';\nimport type {\n  NavListItemProps,\n  NavListItemWrapperProps,\n  NavListProps,\n  NavMenuProps\n} from './AppShell.types';\nimport {\n  StyledNavList,\n  StyledNestedNavList,\n  StyledNavItemIconBox,\n  StyledNavListItem,\n  StyledNavListItemExpandCollapse,\n  StyledCaseClose,\n  StyledSingleSelectIconBox,\n  StyledNavListItemVisualContainer,\n  StyledNavListItemGroupIndicator\n} from './AppShell.styles';\nimport AppShellContext from './AppShellContext';\n\nregisterIcon(timesIcon, checkIcon, caretLeftIcon, caretRightIcon);\n\nconst NavigationMenu: FC<NavMenuProps> = props => {\n  const { navOpen } = useContext(AppShellContext);\n  const {\n    visual,\n    primary,\n    secondary,\n    href,\n    onClick,\n    items,\n    onDismiss,\n    actions,\n    forwardedRef,\n    ...restProps\n  } = props;\n\n  const uid = useUID();\n\n  const { navState } = useContext(AppShellContext);\n  const [collapsed, setCollapsed] = useState(true);\n\n  const toggleCollapsed = useCallback(\n    (e: MouseEvent<HTMLButtonElement>) => {\n      e.stopPropagation();\n      setCollapsed(state => !state);\n    },\n    [setCollapsed]\n  );\n\n  const itemRef = useConsolidatedRef(forwardedRef);\n\n  const menuRef = useRef<HTMLLIElement>(null);\n\n  useArrows(menuRef, { selector: '[role=\"menuitem\"]', cycle: true });\n\n  useEscape(() => {\n    setCollapsed(true);\n    itemRef.current?.focus();\n  }, menuRef);\n\n  const { end } = useDirection();\n\n  return (\n    <StyledNavListItem {...restProps} key={primary} nestedListCollapsed={collapsed} ref={menuRef}>\n      <BareButton\n        id={uid}\n        ref={itemRef}\n        aria-expanded={!collapsed}\n        aria-controls={`${uid}-menu`}\n        aria-label={primary}\n        onClick={toggleCollapsed}\n      >\n        {visual && <StyledNavItemIconBox>{visual}</StyledNavItemIconBox>}\n\n        {secondary ? (\n          <Flex container={{ direction: 'column', alignItems: 'start' }}>\n            <span>{primary}</span>\n            <Text variant='secondary'>{secondary}</Text>\n          </Flex>\n        ) : (\n          <span>{primary}</span>\n        )}\n\n        {navState === 'open' && <StyledNavListItemExpandCollapse name={`caret-${end}`} />}\n      </BareButton>\n\n      {/* eslint-disable-next-line @typescript-eslint/no-use-before-define */}\n      <NavigationList\n        id={`${uid}-menu`}\n        nestedList\n        items={items}\n        collapsed={!navOpen || collapsed}\n      />\n    </StyledNavListItem>\n  );\n};\n\nexport const NavigationListItem: FC<NavListItemProps> = ({\n  visual,\n  primary,\n  secondary,\n  collapsedItemInfo,\n  href,\n  onClick,\n  items,\n  collapseItems = false,\n  onDismiss,\n  actions,\n  forwardedRef,\n  isMenuItem,\n  mobileNavBar,\n  count,\n  singleSelect,\n  selected,\n  'aria-labelledby': ariaLabelledBy,\n  'aria-current': ariaCurrent,\n  ...restProps\n}) => {\n  const { navOpen: navOpenValue, navState } = useContext(AppShellContext);\n  const navOpen = mobileNavBar ? false : navOpenValue;\n  const t = useI18n();\n  const listItemRef = useConsolidatedRef(forwardedRef);\n  const [menuState, setMenuState] = useState('');\n  const {\n    components: {\n      'app-shell': {\n        nav: { detached }\n      }\n    }\n  } = useTheme();\n\n  const hasItems =\n    (Array.isArray(items) && items.length > 0) || (Array.isArray(actions) && actions.length > 0);\n  const compProps: {\n    href?: string;\n    onClick?: MouseEventHandler<HTMLAnchorElement | HTMLButtonElement | HTMLDivElement>;\n    actions?: NavListItemProps['actions'];\n    popover?: OmitStrict<PopoverProps, 'show' | 'target' | 'children'>;\n    'aria-label'?: string;\n  } = {\n    onClick: (e: MouseEvent<HTMLAnchorElement | HTMLButtonElement | HTMLDivElement>) => {\n      e.stopPropagation();\n      onClick?.(e);\n    },\n    href\n  };\n\n  let caseItems: NavListItemWrapperProps['items'] | undefined;\n  if (onDismiss) {\n    caseItems = [\n      {\n        primary: t('go_to_noun', [primary]),\n        onClick\n      },\n      {\n        primary: t('dismiss_case'),\n        onClick: onDismiss\n      }\n    ];\n  }\n\n  let Component: ElementType;\n\n  if (href) {\n    Component = Link;\n  } else {\n    Component = BareButton;\n  }\n\n  const shouldShowMenuAttributes = hasItems || (onDismiss && !navOpen);\n\n  useEffect(() => {\n    if (!navOpen && actions) {\n      const node = document.getElementsByTagName('body')[0];\n      const clickEvent = document.createEvent('MouseEvent');\n      clickEvent.initEvent('mousedown', true, true);\n      node.dispatchEvent(clickEvent);\n    }\n    if (navOpen && isMenuItem && listItemRef.current?.parentElement?.matches(':first-child'))\n      listItemRef.current?.focus();\n  }, [navOpen]);\n\n  const { end } = useDirection();\n  const primaryId = useUID();\n\n  return (\n    <StyledNavListItem {...restProps} key={primary} singleSelect={singleSelect} nestedListCollapsed>\n      <NavigationListItemWrapper\n        tooltipLabel={secondary ? `${primary} ${secondary}` : primary}\n        label={primary}\n        childElementRef={listItemRef}\n        items={actions || items || caseItems}\n        onMenuToggle={setMenuState}\n        mobileNavBar={mobileNavBar}\n      >\n        <Component\n          {...compProps}\n          ref={listItemRef}\n          {...(navOpen && isMenuItem ? { tabIndex: -1, role: 'menuitem' } : {})}\n          aria-labelledby={`${primaryId} ${count ? `${primary}-count` : ''} ${ariaLabelledBy ?? ''}`}\n          {...(shouldShowMenuAttributes && {\n            'aria-haspopup': 'menu',\n            'aria-expanded': menuState === 'open'\n          })}\n          aria-current={ariaCurrent}\n        >\n          {singleSelect && (\n            <Flex\n              container={{ justify: 'center', alignItems: 'center' }}\n              as={StyledSingleSelectIconBox}\n            >\n              {selected && <Icon name='check' />}\n            </Flex>\n          )}\n          {visual && (\n            <Flex\n              container={{ direction: 'column', gap: 0.5 }}\n              as={StyledNavListItemVisualContainer}\n              isCurrent={ariaCurrent === 'page'}\n              navOpen={navOpen}\n            >\n              <StyledNavItemIconBox>{visual}</StyledNavItemIconBox>\n              {!navOpen && collapsedItemInfo && (\n                <Text variant='secondary'>{collapsedItemInfo}</Text>\n              )}\n              {hasItems && navState === 'closed' && (\n                <StyledNavListItemGroupIndicator name={`caret-${end}`} />\n              )}\n            </Flex>\n          )}\n\n          {secondary ? (\n            <Flex\n              container={{ direction: 'column', alignItems: 'start' }}\n              item={{ shrink: !navOpen && detached ? 1 : 0 }}\n              as='span'\n            >\n              <span id={primaryId}>{primary}</span>\n              <Text variant='secondary'>{secondary}</Text>\n            </Flex>\n          ) : (\n            <span id={primaryId}>{primary}</span>\n          )}\n\n          {(hasItems || actions) && navState === 'open' && !mobileNavBar && (\n            <StyledNavListItemExpandCollapse name={`caret-${end}`} />\n          )}\n        </Component>\n      </NavigationListItemWrapper>\n\n      {onDismiss && navOpen && (\n        <Button\n          icon\n          variant='simple'\n          as={StyledCaseClose}\n          onClick={(e: MouseEvent<HTMLButtonElement>) => {\n            e.stopPropagation();\n            onDismiss(e);\n          }}\n          aria-label={t('dismiss_case')}\n        >\n          <Icon name='times' />\n        </Button>\n      )}\n\n      {hasItems && (\n        // eslint-disable-next-line @typescript-eslint/no-use-before-define\n        <NavigationList nestedList items={actions || items} collapsed={!navOpen || collapseItems} />\n      )}\n    </StyledNavListItem>\n  );\n};\n\nconst NavigationList: FC<NavListProps> = ({\n  items = [],\n  nestedList,\n  id,\n  collapsed,\n  singleSelect,\n  mobileNavBar\n}) => {\n  let Component: ElementType = StyledNavList;\n  let ItemComponent: ElementType;\n  const { navOpen } = useContext(AppShellContext);\n\n  let fwdProps: {\n    as?: ElementType;\n    forwardedAs?: ElementType;\n    nullWhenCollapsed?: boolean;\n    transitionSpeed?: string;\n    collapsed: boolean;\n  } = {\n    collapsed: !!collapsed\n  };\n\n  const {\n    base: { animation }\n  } = useTheme();\n\n  if (nestedList) {\n    fwdProps = {\n      as: ExpandCollapse,\n      forwardedAs: 'ul',\n      nullWhenCollapsed: true,\n      transitionSpeed: items.length >= 10 ? `calc(2 * ${animation.speed})` : animation.speed,\n      ...fwdProps\n    };\n\n    Component = StyledNestedNavList;\n  }\n\n  return (\n    <Component {...(nestedList ? { role: 'menu', id } : {})} {...fwdProps}>\n      {items.map(item => {\n        if (isValidElement(item)) return item;\n\n        if (item.items && item.items.length > 0 && navOpen && !mobileNavBar) {\n          ItemComponent = NavigationMenu;\n        } else {\n          ItemComponent = NavigationListItem;\n        }\n\n        return (\n          <ItemComponent\n            key={item.id || item.primary}\n            isMenuItem={nestedList}\n            singleSelect={singleSelect}\n            aria-current={item['aria-current']}\n            mobileNavBar={mobileNavBar}\n            {...item}\n          />\n        );\n      })}\n    </Component>\n  );\n};\n\nexport default NavigationList;\n"]}

package/lib/components/MultiStepForm/FormProgress.styles.d.ts

@@ -1,18 +1,30 @@
 import type { Step } from './MultiStepForm.types';
+/** Min width of each step item including labels in ch units */
+export declare const stepItemMinWidth = 15;
+/** Min width of step marker without labels in ch units */
+export declare const stepMarkerMinWidth = 3;
 export declare const CurrentStepPopover: import("styled-components").StyledComponent<(<Modifiers extends string = string>(props: import("../Popover").PopoverProps<Modifiers> & import("../..").ForwardProps) => import("react").ReactElement | null), import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledBar: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledBar: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    shifted?: boolean;
+}, never>;
 export declare const StyledFill: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledFormProgress: import("styled-components").StyledComponent<import("../..").ForwardRefForwardPropsComponent<import("../Flex").FlexProps>, import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledStepMarkers: import("styled-components").StyledComponent<"ol", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledVerticalStepMarkers: import("styled-components").StyledComponent<"ol", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledFormProgress: import("styled-components").StyledComponent<import("../..").ForwardRefForwardPropsComponent<import("../Flex").FlexProps>, import("styled-components").DefaultTheme, {
+    showStepNames?: boolean;
+}, never>;
 export declare const StepMarker: import("styled-components").StyledComponent<import("../..").ForwardRefForwardPropsComponent<import("../Button/BareButton").BareButtonProps>, import("styled-components").DefaultTheme, {
     current: boolean;
     depth: Step["depth"];
-    prior: boolean;
+    completed?: Step["completed"];
+    clickable?: boolean;
+}, never>;
+export declare const StyleHorizontalStepMarkers: import("styled-components").StyledComponent<"ol", import("styled-components").DefaultTheme, {
+    showStepNames?: boolean;
 }, never>;
+export declare const StyledVerticalStepMarkers: import("styled-components").StyledComponent<"ol", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledBulletWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
     hasNext: boolean;
     prior: boolean;
 }, never>;
 export declare const StyledStepText: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledHorizontalStepText: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 //# sourceMappingURL=FormProgress.styles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"FormProgress.styles.d.ts","sourceRoot":"","sources":["../../../src/components/MultiStepForm/FormProgress.styles.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAElD,eAAO,MAAM,kBAAkB,oQAY9B,CAAC;AAEF,eAAO,MAAM,SAAS,yGAapB,CAAC;AAIH,eAAO,MAAM,UAAU,yGAsBrB,CAAC;AAIH,eAAO,MAAM,kBAAkB,gLAe7B,CAAC;AAIH,eAAO,MAAM,iBAAiB,wGAY5B,CAAC;AAIH,eAAO,MAAM,yBAAyB,wGAErC,CAAC;AAEF,eAAO,MAAM,UAAU;aACZ,OAAO;WACT,IAAI,CAAC,OAAO,CAAC;WACb,OAAO;SA2Ed,CAAC;AAIH,eAAO,MAAM,mBAAmB;aACrB,OAAO;WACT,OAAO;SA+Bd,CAAC;AAIH,eAAO,MAAM,cAAc,yGAKzB,CAAC"}
+{"version":3,"file":"FormProgress.styles.d.ts","sourceRoot":"","sources":["../../../src/components/MultiStepForm/FormProgress.styles.ts"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAElD,+DAA+D;AAC/D,eAAO,MAAM,gBAAgB,KAAK,CAAC;AAEnC,0DAA0D;AAC1D,eAAO,MAAM,kBAAkB,IAAI,CAAC;AAEpC,eAAO,MAAM,kBAAkB,oQAU9B,CAAC;AAyBF,eAAO,MAAM,SAAS;cAA0B,OAAO;SAkBrD,CAAC;AAIH,eAAO,MAAM,UAAU,yGA2BrB,CAAC;AAIH,eAAO,MAAM,kBAAkB;oBAAkC,OAAO;SAmBtE,CAAC;AAIH,eAAO,MAAM,UAAU;aACZ,OAAO;WACT,IAAI,CAAC,OAAO,CAAC;gBACR,IAAI,CAAC,WAAW,CAAC;gBACjB,OAAO;SAqGnB,CAAC;AAIH,eAAO,MAAM,0BAA0B;oBAA+B,OAAO;SAsD5E,CAAC;AAIF,eAAO,MAAM,yBAAyB,wGAErC,CAAC;AAEF,eAAO,MAAM,mBAAmB;aACrB,OAAO;WACT,OAAO;SAuCd,CAAC;AAIH,eAAO,MAAM,cAAc,yGAKzB,CAAC;AAIH,eAAO,MAAM,wBAAwB,yGAUnC,CAAC"}

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

@@ -7,6 +7,11 @@ 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;
@@ -15,17 +20,35 @@ export const CurrentStepPopover = styled(Popover) `
   animation: none;
 
   & > ${StyledText} {
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
+    ${ellipsisOverflow}
   }
 `;
-export const StyledBar = styled.div(({ theme }) => {
-    const { components: { 'form-control': { 'border-color': 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};
   `;
 });
@@ -33,10 +56,14 @@ 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));
@@ -44,107 +71,174 @@ export const StyledFill = styled.div(({ theme }) => {
   `;
 });
 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};
+    }
+
+    ${!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};
+        `}
+      }
     `}
-    ${prior &&
+
+    ${current &&
         css `
-      border-color: ${interactive};
+      &::before {
+        background: ${interactive};
+      }
     `}
+
     ::after {
       content: '';
       position: absolute;
       ${size(buttonSize)}
-      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) `};
+      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});
@@ -160,4 +254,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  animation: 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    components: {\n      'form-control': { 'border-color': 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    ${prior &&\n    css`\n      border-color: ${interactive};\n    `}\n    ::after {\n      content: '';\n      position: absolute;\n      ${size(buttonSize)}\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\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":"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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});\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});\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\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    `}\n\n    ${current &&\n    css`\n      &::before {\n        background: ${interactive};\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    `}\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,CAwM/E,CAAC;AAEF,eAAe,sBAAsB,CAAC"}