@pega/cosmos-react-core 8.0.0-build.26.13 → 8.0.0-build.26.14

package/lib/components/Actions/Actions.d.ts

@@ -1,7 +1,8 @@
 import type { Action, NoChildrenProp, WithAttributes } from '../../types';
 import type { ButtonProps } from '../Button';
 import type { MenuButtonProps } from '../MenuButton';
-export type ActionsProps = WithAttributes<'button', NoChildrenProp & Pick<ButtonProps, 'compact' | 'disabled'> & {
+import type { MenuProps } from '../Menu';
+export type ActionsProps = WithAttributes<'button', NoChildrenProp & Pick<ButtonProps, 'compact' | 'disabled'> & Pick<MenuProps, 'scrollAt'> & {
     items: Action[];
     contextualLabel?: string;
     /** @default 2 */

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

@@ -1 +1 @@
-{"version":3,"file":"Actions.d.ts","sourceRoot":"","sources":["../../../src/components/Actions/Actions.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,MAAM,EAAE,cAAc,EAAc,cAAc,EAAE,MAAM,aAAa,CAAC;AAEtF,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAG7C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAErD,MAAM,MAAM,YAAY,GAAG,cAAc,CACvC,QAAQ,EACR,cAAc,GACZ,IAAI,CAAC,WAAW,EAAE,SAAS,GAAG,UAAU,CAAC,GAAG;IAC1C,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,iBAAiB;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,eAAe,CAAC,EAAE;QAChB,OAAO,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,CAAC;QACrC,SAAS,CAAC,EAAE,eAAe,CAAC,WAAW,CAAC,CAAC;KAC1C,CAAC;IACF,oBAAoB;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qBAAqB;IACrB,OAAO,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;CAClC,CACJ,CAAC;;AAEF,wBAsEG"}
+{"version":3,"file":"Actions.d.ts","sourceRoot":"","sources":["../../../src/components/Actions/Actions.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,MAAM,EAAE,cAAc,EAAc,cAAc,EAAE,MAAM,aAAa,CAAC;AAEtF,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAG7C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AACrD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEzC,MAAM,MAAM,YAAY,GAAG,cAAc,CACvC,QAAQ,EACR,cAAc,GACZ,IAAI,CAAC,WAAW,EAAE,SAAS,GAAG,UAAU,CAAC,GACzC,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC,GAAG;IAC5B,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,iBAAiB;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,eAAe,CAAC,EAAE;QAChB,OAAO,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,CAAC;QACrC,SAAS,CAAC,EAAE,eAAe,CAAC,WAAW,CAAC,CAAC;KAC1C,CAAC;IACF,oBAAoB;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qBAAqB;IACrB,OAAO,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;CAClC,CACJ,CAAC;;AAEF,wBAwEG"}

package/lib/components/Actions/Actions.js

@@ -7,13 +7,14 @@ import Icon from '../Icon';
 import MenuButton from '../MenuButton';
 export default forwardRef(function Actions({ 
 // @ts-expect-error
-'data-testid': dataTestId, items, menuAt = 2, iconOnly = true, menuButtonProps, contextualLabel, compact = false, disabled = false, tabIndex }, ref) {
+'data-testid': dataTestId, items, menuAt = 2, scrollAt, iconOnly = true, menuButtonProps, contextualLabel, compact = false, disabled = false, tabIndex }, ref) {
     const t = useI18n();
     const menuButtonRef = useConsolidatedRef(ref);
     if (!items || items.length === 0) {
         return null;
     }
     return items.length >= menuAt ? (_jsx(MenuButton, { ...(dataTestId ? { 'data-testid': dataTestId } : {}), ref: menuButtonRef, text: t('actions'), "aria-label": contextualLabel && t('actions_for', [contextualLabel]), iconOnly: true, icon: 'more', variant: 'simple', compact: compact, onClick: menuButtonProps?.onClick, onKeyDown: menuButtonProps?.onKeyDown, disabled: disabled, tabIndex: tabIndex, menu: {
+            scrollAt,
             items: items.map(({ text, onClick, ...restProps }) => ({
                 ...restProps,
                 primary: text,

package/lib/components/Actions/Actions.js.map

@@ -1 +1 @@
-{"version":3,"file":"Actions.js","sourceRoot":"","sources":["../../../src/components/Actions/Actions.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef } from 'react';\nimport type { PropsWithoutRef, MouseEvent } from 'react';\n\nimport { useConsolidatedRef, useI18n } from '../../hooks';\nimport type { Action, NoChildrenProp, RefElement, WithAttributes } from '../../types';\nimport Button from '../Button';\nimport type { ButtonProps } from '../Button';\nimport Icon from '../Icon';\nimport MenuButton from '../MenuButton';\nimport type { MenuButtonProps } from '../MenuButton';\n\nexport type ActionsProps = WithAttributes<\n  'button',\n  NoChildrenProp &\n    Pick<ButtonProps, 'compact' | 'disabled'> & {\n      items: Action[];\n      contextualLabel?: string;\n      /** @default 2 */\n      menuAt?: number;\n      menuButtonProps?: {\n        onClick?: MenuButtonProps['onClick'];\n        onKeyDown?: MenuButtonProps['onKeyDown'];\n      };\n      /** @default true */\n      iconOnly?: boolean;\n      /** @default false */\n      compact?: ButtonProps['compact'];\n    }\n>;\n\nexport default forwardRef<RefElement<ActionsProps>, PropsWithoutRef<ActionsProps>>(function Actions(\n  {\n    // @ts-expect-error\n    'data-testid': dataTestId,\n    items,\n    menuAt = 2,\n    iconOnly = true,\n    menuButtonProps,\n    contextualLabel,\n    compact = false,\n    disabled = false,\n    tabIndex\n  },\n  ref\n) {\n  const t = useI18n();\n  const menuButtonRef = useConsolidatedRef(ref);\n\n  if (!items || items.length === 0) {\n    return null;\n  }\n\n  return items.length >= menuAt ? (\n    <MenuButton\n      {...(dataTestId ? { 'data-testid': dataTestId } : {})}\n      ref={menuButtonRef}\n      text={t('actions')}\n      aria-label={contextualLabel && t('actions_for', [contextualLabel])}\n      iconOnly\n      icon='more'\n      variant='simple'\n      compact={compact}\n      onClick={menuButtonProps?.onClick}\n      onKeyDown={menuButtonProps?.onKeyDown}\n      disabled={disabled}\n      tabIndex={tabIndex}\n      menu={{\n        items: items.map(({ text, onClick, ...restProps }) => ({\n          ...restProps,\n          primary: text,\n          onClick: onClick\n            ? (id, e) => {\n                onClick(id, e, menuButtonRef.current ?? undefined);\n              }\n            : undefined\n        }))\n      }}\n    />\n  ) : (\n    <>\n      {items.map(({ id, icon, text, onClick, ...restProps }) => {\n        return (\n          <Button\n            {...(dataTestId ? { 'data-testid': dataTestId } : {})}\n            key={id}\n            variant={icon && iconOnly ? 'simple' : undefined}\n            onClick={(event: MouseEvent<HTMLButtonElement>) => onClick?.(id, event)}\n            label={icon ? text : undefined}\n            icon={!!icon && iconOnly}\n            compact={compact}\n            aria-label={contextualLabel ? `${text} - ${contextualLabel}` : text}\n            disabled={disabled}\n            {...restProps}\n          >\n            {icon && iconOnly ? <Icon name={icon} /> : text}\n          </Button>\n        );\n      })}\n    </>\n  );\n});\n"]}
+{"version":3,"file":"Actions.js","sourceRoot":"","sources":["../../../src/components/Actions/Actions.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef } from 'react';\nimport type { PropsWithoutRef, MouseEvent } from 'react';\n\nimport { useConsolidatedRef, useI18n } from '../../hooks';\nimport type { Action, NoChildrenProp, RefElement, WithAttributes } from '../../types';\nimport Button from '../Button';\nimport type { ButtonProps } from '../Button';\nimport Icon from '../Icon';\nimport MenuButton from '../MenuButton';\nimport type { MenuButtonProps } from '../MenuButton';\nimport type { MenuProps } from '../Menu';\n\nexport type ActionsProps = WithAttributes<\n  'button',\n  NoChildrenProp &\n    Pick<ButtonProps, 'compact' | 'disabled'> &\n    Pick<MenuProps, 'scrollAt'> & {\n      items: Action[];\n      contextualLabel?: string;\n      /** @default 2 */\n      menuAt?: number;\n      menuButtonProps?: {\n        onClick?: MenuButtonProps['onClick'];\n        onKeyDown?: MenuButtonProps['onKeyDown'];\n      };\n      /** @default true */\n      iconOnly?: boolean;\n      /** @default false */\n      compact?: ButtonProps['compact'];\n    }\n>;\n\nexport default forwardRef<RefElement<ActionsProps>, PropsWithoutRef<ActionsProps>>(function Actions(\n  {\n    // @ts-expect-error\n    'data-testid': dataTestId,\n    items,\n    menuAt = 2,\n    scrollAt,\n    iconOnly = true,\n    menuButtonProps,\n    contextualLabel,\n    compact = false,\n    disabled = false,\n    tabIndex\n  },\n  ref\n) {\n  const t = useI18n();\n  const menuButtonRef = useConsolidatedRef(ref);\n\n  if (!items || items.length === 0) {\n    return null;\n  }\n\n  return items.length >= menuAt ? (\n    <MenuButton\n      {...(dataTestId ? { 'data-testid': dataTestId } : {})}\n      ref={menuButtonRef}\n      text={t('actions')}\n      aria-label={contextualLabel && t('actions_for', [contextualLabel])}\n      iconOnly\n      icon='more'\n      variant='simple'\n      compact={compact}\n      onClick={menuButtonProps?.onClick}\n      onKeyDown={menuButtonProps?.onKeyDown}\n      disabled={disabled}\n      tabIndex={tabIndex}\n      menu={{\n        scrollAt,\n        items: items.map(({ text, onClick, ...restProps }) => ({\n          ...restProps,\n          primary: text,\n          onClick: onClick\n            ? (id, e) => {\n                onClick(id, e, menuButtonRef.current ?? undefined);\n              }\n            : undefined\n        }))\n      }}\n    />\n  ) : (\n    <>\n      {items.map(({ id, icon, text, onClick, ...restProps }) => {\n        return (\n          <Button\n            {...(dataTestId ? { 'data-testid': dataTestId } : {})}\n            key={id}\n            variant={icon && iconOnly ? 'simple' : undefined}\n            onClick={(event: MouseEvent<HTMLButtonElement>) => onClick?.(id, event)}\n            label={icon ? text : undefined}\n            icon={!!icon && iconOnly}\n            compact={compact}\n            aria-label={contextualLabel ? `${text} - ${contextualLabel}` : text}\n            disabled={disabled}\n            {...restProps}\n          >\n            {icon && iconOnly ? <Icon name={icon} /> : text}\n          </Button>\n        );\n      })}\n    </>\n  );\n});\n"]}

package/lib/components/ComboBox/ComboBox.js

@@ -11,7 +11,7 @@ import Menu from '../Menu';
 import Button from '../Button';
 import { navigatorIsAvailable, withTestIds, getFocusables } from '../../utils';
 import menuHelpers from '../Menu/helpers';
-import { sameWidth } from '../Popover/modifiers';
+import { fitToContent } from '../Popover/modifiers';
 import VisuallyHiddenText from '../VisuallyHiddenText';
 import ComboBoxInput from './ComboBoxInput';
 import { StyledComboBox } from './ComboBox.styles';
@@ -155,7 +155,7 @@ export default withTestIds(forwardRef(function ComboBox(props, ref) {
                     toggleSelectedDescendantsActive(true);
                 }, onSelectedBlur: () => {
                     toggleSelectedDescendantsActive(false);
-                }, ...restProps }), _jsx(Popover, { ref: popoverRef, show: open && menu !== undefined, target: containerRef.current, placement: 'bottom-start', modifiers: [sameWidth], 
+                }, ...restProps }), _jsx(Popover, { ref: popoverRef, show: open && menu !== undefined, target: containerRef.current, placement: 'bottom-start', modifiers: [fitToContent], 
                 // FIXME: Removed absolute strategy for mobile to avoid overflow issues.
                 strategy: 'fixed', onMouseDown: (e) => e.preventDefault(), onKeyDown: (e) => {
                     if (!inputRef.current)

package/lib/components/ComboBox/ComboBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComboBox.js","sourceRoot":"","sources":["../../../src/components/ComboBox/ComboBox.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport type {\n  KeyboardEvent as ReactKeyboardEvent,\n  PropsWithoutRef,\n  MutableRefObject,\n  MouseEvent\n} from 'react';\n\nimport Icon, { registerIcon } from '../Icon';\nimport * as caretDownIcon from '../Icon/icons/caret-down.icon';\nimport * as caretUpIcon from '../Icon/icons/caret-up.icon';\nimport type { RefElement } from '../../types';\nimport {\n  useConsolidatedRef,\n  useFocusWithin,\n  useI18n,\n  useUID,\n  useElement,\n  useDirection,\n  useTestIds,\n  useEscape\n} from '../../hooks';\nimport Popover from '../Popover';\nimport FormField from '../FormField';\nimport { StyledFormControl } from '../FormControl';\nimport Menu from '../Menu';\nimport type { MenuProps } from '../Menu';\nimport Button from '../Button';\nimport { navigatorIsAvailable, withTestIds, getFocusables } from '../../utils';\nimport menuHelpers from '../Menu/helpers';\nimport { sameWidth } from '../Popover/modifiers';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\n\nimport ComboBoxInput from './ComboBoxInput';\nimport type ComboBoxProps from './ComboBox.types';\nimport { StyledComboBox } from './ComboBox.styles';\nimport { getComboBoxTestIds } from './ComboxBox.test-ids';\n\nregisterIcon(caretDownIcon, caretUpIcon);\n\nconst isMobile = navigatorIsAvailable && navigator.userAgent.includes('Mobile');\n\nexport default withTestIds(\n  forwardRef<RefElement<ComboBoxProps>, PropsWithoutRef<ComboBoxProps>>(\n    function ComboBox(props, ref) {\n      const uid = useUID();\n      const {\n        testId,\n        additionalInfo,\n        value,\n        required,\n        id = uid,\n        label,\n        labelHidden,\n        info,\n        status,\n        readOnly,\n        disabled,\n        mode = 'single-select',\n        selected,\n        onChange,\n        actions,\n        onFocus,\n        onBlur,\n        onResolveSuggestion,\n        onDropdownButtonClick: onDropdownButtonClickProp,\n        onMenuOpen,\n        onClick,\n        onKeyDown,\n        menu,\n        ...restProps\n      } = props;\n\n      const testIds = useTestIds(testId, getComboBoxTestIds);\n      const bodyRef = useRef<Element>(document.body);\n\n      const [pauseMenuDescendantEvaluation, setPauseMenuDescendantEvaluation] = useState(true);\n      const [pauseSelectedDescendantEvaluation, setPauseSelectedDescendantEvaluation] =\n        useState(false);\n      const t = useI18n();\n      const listId = `${id}-list`;\n      const inputRef = useRef<HTMLInputElement>(null);\n      const popoverRef = useRef<HTMLDivElement>(null);\n      const [open, setOpen] = useState(false);\n      const menuRef: MenuProps['ref'] = useRef(null);\n      const menuComponentId = `${id}-listbox`;\n      const { start } = useDirection();\n\n      // Force a re-render to make sure useFocusWithin has valid elements to set listeners on.\n      const [, setContainerEl] = useElement();\n      const containerRef = useConsolidatedRef<HTMLDivElement>(ref, setContainerEl);\n\n      const toggleMenuDescendantsActive = useCallback((bool: boolean) => {\n        setPauseMenuDescendantEvaluation(!bool);\n        setPauseSelectedDescendantEvaluation(bool);\n      }, []);\n\n      const toggleSelectedDescendantsActive = useCallback((bool: boolean) => {\n        setPauseSelectedDescendantEvaluation(!bool);\n        setPauseMenuDescendantEvaluation(bool);\n      }, []);\n\n      const focus = useFocusWithin([containerRef, popoverRef], focused => {\n        if (!focused) {\n          setOpen(false);\n          toggleMenuDescendantsActive(false);\n          onBlur?.(selected?.items);\n        } else {\n          onFocus?.(selected?.items);\n          if (isMobile) {\n            setTimeout(() => {\n              containerRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' });\n            }, 150); // delay it to let keyboard expand first\n          }\n        }\n      });\n\n      const handleEscape = useCallback(\n        (e: KeyboardEvent) => {\n          e.preventDefault();\n          if (open) {\n            e.stopPropagation();\n            setOpen(false);\n            toggleMenuDescendantsActive(false);\n          }\n        },\n        [open]\n      );\n\n      useEscape(handleEscape, containerRef, [handleEscape]);\n\n      const onInputKeyDown = useCallback(\n        (e: ReactKeyboardEvent<HTMLInputElement>) => {\n          if (!menu || readOnly) return;\n          if (onKeyDown?.(e) === false) {\n            return;\n          }\n\n          switch (e.key) {\n            case 'ArrowUp':\n              if (e.altKey) {\n                e.preventDefault();\n                if (open) {\n                  setOpen(false);\n                  toggleMenuDescendantsActive(false);\n                }\n              }\n              break;\n            case 'ArrowDown':\n              e.preventDefault();\n              if (!open) {\n                setOpen(true);\n                toggleMenuDescendantsActive(true);\n              }\n              break;\n            case 'Tab': {\n              const forward = !e.shiftKey;\n\n              if (forward) {\n                const popoverFocusables = getFocusables(popoverRef);\n\n                if (popoverFocusables.length) {\n                  e.preventDefault();\n                  popoverFocusables[0].focus();\n                  break;\n                }\n              }\n\n              setOpen(false);\n              toggleMenuDescendantsActive(false);\n\n              break;\n            }\n            default:\n          }\n        },\n        [open, readOnly, menu, value, onKeyDown]\n      );\n\n      const onDropdownButtonClick = useCallback(() => {\n        onDropdownButtonClickProp?.(!open);\n        setOpen(!open);\n      }, [open, onDropdownButtonClickProp]);\n\n      const dropdownButton = useMemo(() => {\n        return (menu?.items || onDropdownButtonClickProp || !onChange) && !readOnly ? (\n          <Button\n            aria-label={t(\n              open ? 'combobox_close_list_button_a11y' : 'combobox_open_list_button_a11y'\n            )}\n            icon\n            variant='simple'\n            onClick={onDropdownButtonClick}\n            onMouseDown={(e: MouseEvent) => {\n              e.preventDefault();\n              inputRef.current?.focus();\n            }}\n            disabled={disabled}\n            tabIndex='-1'\n          >\n            <Icon name={open ? 'caret-up' : 'caret-down'} />\n          </Button>\n        ) : null;\n      }, [onDropdownButtonClick, onChange, readOnly, open, disabled]);\n\n      const ariaDescribedBy = useMemo(() => {\n        let idString = `${id}-inputDescription`;\n\n        if (info) {\n          idString = idString.concat(` ${id}-info`);\n        }\n        if (onChange) {\n          idString = idString.concat(` ${id}-searchDescription`);\n        }\n        if (mode === 'multi-select') {\n          idString = idString.concat(` ${id}-multiselectDescription`);\n        }\n\n        return idString;\n      }, [info, id, mode, onChange]);\n\n      const onInputClick = useCallback(\n        (e: MouseEvent<HTMLInputElement>) => {\n          if (readOnly) return;\n          setOpen(true);\n          toggleMenuDescendantsActive(true);\n          onClick?.(e);\n        },\n        [readOnly, onClick]\n      );\n\n      useEffect(() => {\n        if (focus && menu && value && value.length > 0) {\n          setOpen(true);\n          toggleMenuDescendantsActive(true);\n        }\n      }, [menu, value, focus]);\n\n      useEffect(() => {\n        if (open) onMenuOpen?.();\n      }, [open]);\n\n      // Workaround for the following error from jsx-ast-utils, fixed in version 3.5.0.\n      // The prop value with an expression type of JSXFragment could not be resolved. Please file issue to get this fixed immediately.\n      const inputActions = (\n        <>\n          {dropdownButton}\n          {actions}\n        </>\n      );\n\n      const Comp = (\n        <StyledComboBox\n          ref={containerRef}\n          as={StyledFormControl}\n          id={`${id}-combobox`}\n          data-testid={label ? undefined : testIds.root}\n        >\n          <ComboBoxInput\n            data-testid={testIds.control}\n            ref={inputRef}\n            role='combobox'\n            aria-autocomplete='list'\n            aria-expanded={!readOnly && !disabled && open}\n            aria-controls={\n              open && menu !== undefined && !pauseMenuDescendantEvaluation ? listId : undefined\n            }\n            aria-haspopup='listbox'\n            aria-describedby={ariaDescribedBy}\n            selected={selected?.items}\n            spellCheck={false}\n            id={id}\n            readOnly={readOnly}\n            disabled={disabled}\n            onChange={onChange}\n            value={value}\n            mode={mode}\n            status={status}\n            onResolveSuggestion={onResolveSuggestion}\n            actions={inputActions}\n            onRemove={selected?.onRemove}\n            onClick={onInputClick}\n            onKeyDown={onInputKeyDown}\n            required={required}\n            pauseDescendantEvaluation={pauseSelectedDescendantEvaluation}\n            onSelectedFocus={() => {\n              toggleSelectedDescendantsActive(true);\n            }}\n            onSelectedBlur={() => {\n              toggleSelectedDescendantsActive(false);\n            }}\n            {...restProps}\n          />\n\n          <Popover\n            ref={popoverRef}\n            show={open && menu !== undefined}\n            target={containerRef.current}\n            placement='bottom-start'\n            modifiers={[sameWidth]}\n            // FIXME: Removed absolute strategy for mobile to avoid overflow issues.\n            strategy='fixed'\n            onMouseDown={(e: MouseEvent) => e.preventDefault()}\n            onKeyDown={(e: KeyboardEvent) => {\n              if (!inputRef.current) return;\n\n              if (e.key === 'Tab') {\n                const popoverFocusables = getFocusables(popoverRef);\n                const currentIndex = popoverFocusables.indexOf(e.target as HTMLElement);\n                const forward = !e.shiftKey;\n                const isLast = currentIndex === popoverFocusables.length - 1;\n\n                if (forward && isLast) {\n                  e.preventDefault();\n                  const allFocusable = getFocusables(bodyRef as MutableRefObject<HTMLElement>);\n                  const nextIndex = allFocusable.indexOf(inputRef.current) + 1;\n\n                  allFocusable[nextIndex]?.focus();\n                  setOpen(false);\n                  toggleMenuDescendantsActive(false);\n                } else if (!forward && currentIndex === 0) {\n                  e.preventDefault();\n                  inputRef.current.focus();\n                }\n              }\n              if (e.key === 'Escape') {\n                handleEscape(e);\n                inputRef.current.focus();\n              }\n            }}\n          >\n            {menu && (\n              <Menu\n                ref={menuRef}\n                listId={listId}\n                id={menuComponentId}\n                role='listbox'\n                mode={mode}\n                {...menu}\n                items={menu.items}\n                focusControlEl={inputRef.current || undefined}\n                onItemClick={(itemId, e) => {\n                  if (mode === 'single-select') {\n                    setOpen(false);\n                    toggleMenuDescendantsActive(true);\n                  }\n                  menu.onItemClick?.(itemId, e);\n\n                  const clickedItem = menuHelpers.getItem(menu.items, itemId);\n\n                  if (clickedItem?.primary && !clickedItem?.selected) {\n                    selected?.onNew?.(clickedItem?.primary);\n                  }\n                }}\n                aria-label={t('menu_option_list')}\n                pauseDescendantEvaluation={pauseMenuDescendantEvaluation}\n                arrowNavigationUnsupported\n              />\n            )}\n          </Popover>\n        </StyledComboBox>\n      );\n\n      return (\n        <>\n          {label ? (\n            <FormField\n              testId={testIds}\n              label={label}\n              labelHidden={labelHidden}\n              id={id}\n              info={info}\n              status={status}\n              required={required}\n              disabled={disabled}\n              onResolveSuggestion={onResolveSuggestion}\n              additionalInfo={additionalInfo}\n            >\n              {Comp}\n            </FormField>\n          ) : (\n            Comp\n          )}\n          <VisuallyHiddenText id={`${id}-inputDescription`} aria-hidden>\n            {`${t('combobox_open_close')} `}\n          </VisuallyHiddenText>\n          <VisuallyHiddenText id={`${id}-searchDescription`} aria-hidden>\n            {t('combobox_search_instructions')}\n          </VisuallyHiddenText>\n          <VisuallyHiddenText id={`${id}-multiselectDescription`} aria-hidden>\n            {t('multiselect_instructions', [start])}\n          </VisuallyHiddenText>\n        </>\n      );\n    }\n  ),\n  getComboBoxTestIds\n);\n"]}
+{"version":3,"file":"ComboBox.js","sourceRoot":"","sources":["../../../src/components/ComboBox/ComboBox.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport type {\n  KeyboardEvent as ReactKeyboardEvent,\n  PropsWithoutRef,\n  MutableRefObject,\n  MouseEvent\n} from 'react';\n\nimport Icon, { registerIcon } from '../Icon';\nimport * as caretDownIcon from '../Icon/icons/caret-down.icon';\nimport * as caretUpIcon from '../Icon/icons/caret-up.icon';\nimport type { RefElement } from '../../types';\nimport {\n  useConsolidatedRef,\n  useFocusWithin,\n  useI18n,\n  useUID,\n  useElement,\n  useDirection,\n  useTestIds,\n  useEscape\n} from '../../hooks';\nimport Popover from '../Popover';\nimport FormField from '../FormField';\nimport { StyledFormControl } from '../FormControl';\nimport Menu from '../Menu';\nimport type { MenuProps } from '../Menu';\nimport Button from '../Button';\nimport { navigatorIsAvailable, withTestIds, getFocusables } from '../../utils';\nimport menuHelpers from '../Menu/helpers';\nimport { fitToContent } from '../Popover/modifiers';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\n\nimport ComboBoxInput from './ComboBoxInput';\nimport type ComboBoxProps from './ComboBox.types';\nimport { StyledComboBox } from './ComboBox.styles';\nimport { getComboBoxTestIds } from './ComboxBox.test-ids';\n\nregisterIcon(caretDownIcon, caretUpIcon);\n\nconst isMobile = navigatorIsAvailable && navigator.userAgent.includes('Mobile');\n\nexport default withTestIds(\n  forwardRef<RefElement<ComboBoxProps>, PropsWithoutRef<ComboBoxProps>>(\n    function ComboBox(props, ref) {\n      const uid = useUID();\n      const {\n        testId,\n        additionalInfo,\n        value,\n        required,\n        id = uid,\n        label,\n        labelHidden,\n        info,\n        status,\n        readOnly,\n        disabled,\n        mode = 'single-select',\n        selected,\n        onChange,\n        actions,\n        onFocus,\n        onBlur,\n        onResolveSuggestion,\n        onDropdownButtonClick: onDropdownButtonClickProp,\n        onMenuOpen,\n        onClick,\n        onKeyDown,\n        menu,\n        ...restProps\n      } = props;\n\n      const testIds = useTestIds(testId, getComboBoxTestIds);\n      const bodyRef = useRef<Element>(document.body);\n\n      const [pauseMenuDescendantEvaluation, setPauseMenuDescendantEvaluation] = useState(true);\n      const [pauseSelectedDescendantEvaluation, setPauseSelectedDescendantEvaluation] =\n        useState(false);\n      const t = useI18n();\n      const listId = `${id}-list`;\n      const inputRef = useRef<HTMLInputElement>(null);\n      const popoverRef = useRef<HTMLDivElement>(null);\n      const [open, setOpen] = useState(false);\n      const menuRef: MenuProps['ref'] = useRef(null);\n      const menuComponentId = `${id}-listbox`;\n      const { start } = useDirection();\n\n      // Force a re-render to make sure useFocusWithin has valid elements to set listeners on.\n      const [, setContainerEl] = useElement();\n      const containerRef = useConsolidatedRef<HTMLDivElement>(ref, setContainerEl);\n\n      const toggleMenuDescendantsActive = useCallback((bool: boolean) => {\n        setPauseMenuDescendantEvaluation(!bool);\n        setPauseSelectedDescendantEvaluation(bool);\n      }, []);\n\n      const toggleSelectedDescendantsActive = useCallback((bool: boolean) => {\n        setPauseSelectedDescendantEvaluation(!bool);\n        setPauseMenuDescendantEvaluation(bool);\n      }, []);\n\n      const focus = useFocusWithin([containerRef, popoverRef], focused => {\n        if (!focused) {\n          setOpen(false);\n          toggleMenuDescendantsActive(false);\n          onBlur?.(selected?.items);\n        } else {\n          onFocus?.(selected?.items);\n          if (isMobile) {\n            setTimeout(() => {\n              containerRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' });\n            }, 150); // delay it to let keyboard expand first\n          }\n        }\n      });\n\n      const handleEscape = useCallback(\n        (e: KeyboardEvent) => {\n          e.preventDefault();\n          if (open) {\n            e.stopPropagation();\n            setOpen(false);\n            toggleMenuDescendantsActive(false);\n          }\n        },\n        [open]\n      );\n\n      useEscape(handleEscape, containerRef, [handleEscape]);\n\n      const onInputKeyDown = useCallback(\n        (e: ReactKeyboardEvent<HTMLInputElement>) => {\n          if (!menu || readOnly) return;\n          if (onKeyDown?.(e) === false) {\n            return;\n          }\n\n          switch (e.key) {\n            case 'ArrowUp':\n              if (e.altKey) {\n                e.preventDefault();\n                if (open) {\n                  setOpen(false);\n                  toggleMenuDescendantsActive(false);\n                }\n              }\n              break;\n            case 'ArrowDown':\n              e.preventDefault();\n              if (!open) {\n                setOpen(true);\n                toggleMenuDescendantsActive(true);\n              }\n              break;\n            case 'Tab': {\n              const forward = !e.shiftKey;\n\n              if (forward) {\n                const popoverFocusables = getFocusables(popoverRef);\n\n                if (popoverFocusables.length) {\n                  e.preventDefault();\n                  popoverFocusables[0].focus();\n                  break;\n                }\n              }\n\n              setOpen(false);\n              toggleMenuDescendantsActive(false);\n\n              break;\n            }\n            default:\n          }\n        },\n        [open, readOnly, menu, value, onKeyDown]\n      );\n\n      const onDropdownButtonClick = useCallback(() => {\n        onDropdownButtonClickProp?.(!open);\n        setOpen(!open);\n      }, [open, onDropdownButtonClickProp]);\n\n      const dropdownButton = useMemo(() => {\n        return (menu?.items || onDropdownButtonClickProp || !onChange) && !readOnly ? (\n          <Button\n            aria-label={t(\n              open ? 'combobox_close_list_button_a11y' : 'combobox_open_list_button_a11y'\n            )}\n            icon\n            variant='simple'\n            onClick={onDropdownButtonClick}\n            onMouseDown={(e: MouseEvent) => {\n              e.preventDefault();\n              inputRef.current?.focus();\n            }}\n            disabled={disabled}\n            tabIndex='-1'\n          >\n            <Icon name={open ? 'caret-up' : 'caret-down'} />\n          </Button>\n        ) : null;\n      }, [onDropdownButtonClick, onChange, readOnly, open, disabled]);\n\n      const ariaDescribedBy = useMemo(() => {\n        let idString = `${id}-inputDescription`;\n\n        if (info) {\n          idString = idString.concat(` ${id}-info`);\n        }\n        if (onChange) {\n          idString = idString.concat(` ${id}-searchDescription`);\n        }\n        if (mode === 'multi-select') {\n          idString = idString.concat(` ${id}-multiselectDescription`);\n        }\n\n        return idString;\n      }, [info, id, mode, onChange]);\n\n      const onInputClick = useCallback(\n        (e: MouseEvent<HTMLInputElement>) => {\n          if (readOnly) return;\n          setOpen(true);\n          toggleMenuDescendantsActive(true);\n          onClick?.(e);\n        },\n        [readOnly, onClick]\n      );\n\n      useEffect(() => {\n        if (focus && menu && value && value.length > 0) {\n          setOpen(true);\n          toggleMenuDescendantsActive(true);\n        }\n      }, [menu, value, focus]);\n\n      useEffect(() => {\n        if (open) onMenuOpen?.();\n      }, [open]);\n\n      // Workaround for the following error from jsx-ast-utils, fixed in version 3.5.0.\n      // The prop value with an expression type of JSXFragment could not be resolved. Please file issue to get this fixed immediately.\n      const inputActions = (\n        <>\n          {dropdownButton}\n          {actions}\n        </>\n      );\n\n      const Comp = (\n        <StyledComboBox\n          ref={containerRef}\n          as={StyledFormControl}\n          id={`${id}-combobox`}\n          data-testid={label ? undefined : testIds.root}\n        >\n          <ComboBoxInput\n            data-testid={testIds.control}\n            ref={inputRef}\n            role='combobox'\n            aria-autocomplete='list'\n            aria-expanded={!readOnly && !disabled && open}\n            aria-controls={\n              open && menu !== undefined && !pauseMenuDescendantEvaluation ? listId : undefined\n            }\n            aria-haspopup='listbox'\n            aria-describedby={ariaDescribedBy}\n            selected={selected?.items}\n            spellCheck={false}\n            id={id}\n            readOnly={readOnly}\n            disabled={disabled}\n            onChange={onChange}\n            value={value}\n            mode={mode}\n            status={status}\n            onResolveSuggestion={onResolveSuggestion}\n            actions={inputActions}\n            onRemove={selected?.onRemove}\n            onClick={onInputClick}\n            onKeyDown={onInputKeyDown}\n            required={required}\n            pauseDescendantEvaluation={pauseSelectedDescendantEvaluation}\n            onSelectedFocus={() => {\n              toggleSelectedDescendantsActive(true);\n            }}\n            onSelectedBlur={() => {\n              toggleSelectedDescendantsActive(false);\n            }}\n            {...restProps}\n          />\n\n          <Popover\n            ref={popoverRef}\n            show={open && menu !== undefined}\n            target={containerRef.current}\n            placement='bottom-start'\n            modifiers={[fitToContent]}\n            // FIXME: Removed absolute strategy for mobile to avoid overflow issues.\n            strategy='fixed'\n            onMouseDown={(e: MouseEvent) => e.preventDefault()}\n            onKeyDown={(e: KeyboardEvent) => {\n              if (!inputRef.current) return;\n\n              if (e.key === 'Tab') {\n                const popoverFocusables = getFocusables(popoverRef);\n                const currentIndex = popoverFocusables.indexOf(e.target as HTMLElement);\n                const forward = !e.shiftKey;\n                const isLast = currentIndex === popoverFocusables.length - 1;\n\n                if (forward && isLast) {\n                  e.preventDefault();\n                  const allFocusable = getFocusables(bodyRef as MutableRefObject<HTMLElement>);\n                  const nextIndex = allFocusable.indexOf(inputRef.current) + 1;\n\n                  allFocusable[nextIndex]?.focus();\n                  setOpen(false);\n                  toggleMenuDescendantsActive(false);\n                } else if (!forward && currentIndex === 0) {\n                  e.preventDefault();\n                  inputRef.current.focus();\n                }\n              }\n              if (e.key === 'Escape') {\n                handleEscape(e);\n                inputRef.current.focus();\n              }\n            }}\n          >\n            {menu && (\n              <Menu\n                ref={menuRef}\n                listId={listId}\n                id={menuComponentId}\n                role='listbox'\n                mode={mode}\n                {...menu}\n                items={menu.items}\n                focusControlEl={inputRef.current || undefined}\n                onItemClick={(itemId, e) => {\n                  if (mode === 'single-select') {\n                    setOpen(false);\n                    toggleMenuDescendantsActive(true);\n                  }\n                  menu.onItemClick?.(itemId, e);\n\n                  const clickedItem = menuHelpers.getItem(menu.items, itemId);\n\n                  if (clickedItem?.primary && !clickedItem?.selected) {\n                    selected?.onNew?.(clickedItem?.primary);\n                  }\n                }}\n                aria-label={t('menu_option_list')}\n                pauseDescendantEvaluation={pauseMenuDescendantEvaluation}\n                arrowNavigationUnsupported\n              />\n            )}\n          </Popover>\n        </StyledComboBox>\n      );\n\n      return (\n        <>\n          {label ? (\n            <FormField\n              testId={testIds}\n              label={label}\n              labelHidden={labelHidden}\n              id={id}\n              info={info}\n              status={status}\n              required={required}\n              disabled={disabled}\n              onResolveSuggestion={onResolveSuggestion}\n              additionalInfo={additionalInfo}\n            >\n              {Comp}\n            </FormField>\n          ) : (\n            Comp\n          )}\n          <VisuallyHiddenText id={`${id}-inputDescription`} aria-hidden>\n            {`${t('combobox_open_close')} `}\n          </VisuallyHiddenText>\n          <VisuallyHiddenText id={`${id}-searchDescription`} aria-hidden>\n            {t('combobox_search_instructions')}\n          </VisuallyHiddenText>\n          <VisuallyHiddenText id={`${id}-multiselectDescription`} aria-hidden>\n            {t('multiselect_instructions', [start])}\n          </VisuallyHiddenText>\n        </>\n      );\n    }\n  ),\n  getComboBoxTestIds\n);\n"]}

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

@@ -4,16 +4,12 @@ export declare const StyledBar: import("styled-components").StyledComponent<"div
 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 StepMarker: import("styled-components").StyledComponent<import("../..").ForwardRefForwardPropsComponent<import("../Button/BareButton").BareButtonProps>, import("styled-components").DefaultTheme, {
     current: boolean;
     depth: Step["depth"];
     prior: boolean;
 }, never>;
-export declare const StepMarkerIcon: import("styled-components").StyledComponent<"svg", import("styled-components").DefaultTheme, {
-    current: boolean;
-    depth: Step["depth"];
-    prior: boolean;
-}, never>;
 export declare const StyledBulletWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
     hasNext: boolean;
     prior: boolean;

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,oQAW9B,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,UAAU;aACZ,OAAO;WACT,IAAI,CAAC,OAAO,CAAC;WACb,OAAO;SA6Ed,CAAC;AAIH,eAAO,MAAM,cAAc;aAChB,OAAO;WACT,IAAI,CAAC,OAAO,CAAC;WACb,OAAO;SAkDd,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":"AAWA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAElD,eAAO,MAAM,kBAAkB,oQAW9B,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;SA6Ed,CAAC;AAIH,eAAO,MAAM,mBAAmB;aACrB,OAAO;WACT,OAAO;SA+Bd,CAAC;AAIH,eAAO,MAAM,cAAc,yGAKzB,CAAC"}

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

@@ -66,6 +66,9 @@ export const StyledStepMarkers = styled.ol(({ theme }) => {
   `;
 });
 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);
@@ -127,42 +130,6 @@ export const StepMarker = styled(BareButton)(({ current, depth, prior, theme })
   `;
 });
 StepMarker.defaultProps = defaultThemeProp;
-export const StepMarkerIcon = styled.svg(({ current, depth, prior, theme }) => {
-    const { base: { 'font-size': fontSize, 'font-scale': fontScale, animation: { speed: animationSpeed, timing: { ease: animationTiming } }, palette: { interactive, 'primary-background': primaryBackground } }, 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 &&
-        css `
-      background: ${interactive};
-      border-color: ${interactive};
-    `}
-
-    ${prior &&
-        css `
-      border-color: ${interactive};
-    `}
-
-
-    &:not(:only-child):first-child::after {
-      inset-inline-start: 0;
-    }
-
-    &:not(:only-child):last-child::after {
-      inset-inline-start: unset;
-      inset-inline-end: 0;
-    }
-  `;
-});
-StepMarkerIcon.defaultProps = defaultThemeProp;
 export const StyledBulletWrapper = styled.div(({ theme, hasNext, prior }) => {
     const { base: { animation: { speed: animationSpeed }, palette: { interactive } }, components: { 'form-control': { 'border-color': borderColor } } } = theme;
     return css `

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 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 StepMarkerIcon = styled.svg<{\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    },\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\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});\n\nStepMarkerIcon.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';\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"]}

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,CAsH/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;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"}

package/lib/components/MultiStepForm/HorizontalFormProgress.js

@@ -1,13 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { remToPx, stripUnit } from 'polished';
 import { useEffect, useRef, useState } from 'react';
-import { useArrows, useElement, useTheme } from '../../hooks';
+import { useArrows, 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 }) => {
+    const t = useI18n();
     const curIdx = steps.findIndex(step => step.id === currentStepId);
     const curStep = steps[curIdx];
     const fillScale = curIdx / (steps.length - 1);
@@ -26,6 +27,12 @@ const HorizontalFormProgress = ({ steps, currentStepId, ...restProps }) => {
         dir: 'left-right',
         initialFocusElement: currentStepEl
     });
+    useArrows(stepsRef, {
+        selector: 'button',
+        cycle: false,
+        dir: 'up-down',
+        initialFocusElement: currentStepEl
+    });
     useEffect(() => {
         if (stepEls[curStep.id] && stepEls[curStep.id] !== currentStepEl) {
             setCurrentStepEl(stepEls[curStep.id]);
@@ -67,7 +74,7 @@ const HorizontalFormProgress = ({ steps, currentStepId, ...restProps }) => {
                                         return { ...newEls, [step.id]: el };
                                     return newEls;
                                 });
-                            }, id: step.id, "aria-label": step.name, "aria-describedby": step.id, "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', children: step.name })) }) }, step.id));
+                            }, 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 } }) })] }));
 };
 export default HorizontalFormProgress;

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

@@ -1 +1 @@
-{"version":3,"file":"HorizontalFormProgress.js","sourceRoot":"","sources":["../../../src/components/MultiStepForm/HorizontalFormProgress.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAC9C,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGpD,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAE9D,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,OAAO,MAAM,YAAY,CAAC;AAEjC,OAAO,EACL,kBAAkB,EAClB,UAAU,EACV,SAAS,EACT,UAAU,EACV,kBAAkB,EAClB,iBAAiB,EAClB,MAAM,uBAAuB,CAAC;AAQ/B,MAAM,sBAAsB,GAAwD,CAAC,EACnF,KAAK,EACL,aAAa,EACb,GAAG,SAAS,EACb,EAAE,EAAE;IACH,MAAM,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,KAAK,aAAa,CAAC,CAAC;IAClE,MAAM,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;IAC9B,MAAM,SAAS,GAAG,MAAM,GAAG,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;IAE9C,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,UAAU,EAAE,CAAC;IACvD,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAA8B,EAAE,CAAC,CAAC;IACxE,MAAM,QAAQ,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IAC9B,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IAEzB,IAAI,gBAAgB,GAAoC,KAAK,CAAC;IAC9D,IAAI,MAAM,KAAK,CAAC;QAAE,gBAAgB,GAAG,WAAW,CAAC;SAC5C,IAAI,MAAM,KAAK,KAAK,CAAC,MAAM,GAAG,CAAC;QAAE,gBAAgB,GAAG,SAAS,CAAC;IAEnE,SAAS,CAAC,QAAQ,EAAE;QAClB,QAAQ,EAAE,QAAQ;QAClB,KAAK,EAAE,KAAK;QACZ,GAAG,EAAE,YAAY;QACjB,mBAAmB,EAAE,aAAa;KACnC,CAAC,CAAC;IAEH,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,OAAO,CAAC,OAAO,CAAC,EAAE,CAAC,IAAI,OAAO,CAAC,OAAO,CAAC,EAAE,CAAC,KAAK,aAAa,EAAE,CAAC;YACjE,gBAAgB,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC;QACxC,CAAC;IACH,CAAC,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC;IAEpC,OAAO,CACL,MAAC,kBAAkB,OAAK,SAAS,EAAE,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,aACpE,KAAC,kBAAkB,IACjB,IAAI,QACJ,MAAM,EAAE,aAAa,EACrB,SAAS,EAAE,gBAAgB,EAC3B,QAAQ,EAAC,UAAU,EACnB,MAAM,EAAE,KAAK,EACb,kBAAkB,QAClB,SAAS,EAAE;oBACT;wBACE,IAAI,EAAE,QAAQ;wBACd,OAAO,EAAE;4BACP,MAAM,EAAE;gCACN,CAAC;gCACD,QAAQ,CACN,GAAG,EAAE,CAAC,SAAS,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,EAC5C,GAAG,EAAE,CAAC,CAAC,CACR;6BACF;yBACF;qBACF;oBACD;wBACE,IAAI,EAAE,iBAAiB;wBACvB,OAAO,EAAE,KAAK;qBACf;oBACD;wBACE,IAAI,EAAE,MAAM;wBACZ,OAAO,EAAE,KAAK;qBACf;oBACD;wBACE,IAAI,EAAE,iBAAiB;wBACvB,OAAO,EAAE;4BACP,OAAO,EAAE,CAAC;yBACX;qBACF;iBACF,YAED,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,OAAO,CAAC,IAAI,GAAQ,GACrB,EACrB,KAAC,IAAI,IACH,GAAG,EAAE,QAAQ,EACb,EAAE,EAAE,iBAAiB,EACrB,SAAS,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAE,EACvD,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,YAEhB,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;oBACzB,OAAO,CACL,uBACE,KAAC,UAAU,IACT,GAAG,EAAE,CAAC,EAAsB,EAAE,EAAE;gCAC9B,UAAU,CAAC,IAAI,CAAC,EAAE;oCAChB,MAAM,MAAM,GAAG,EAAE,GAAG,IAAI,EAAE,CAAC;oCAC3B,IAAI,CAAC,EAAE,IAAI,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC;wCAC3B,OAAO,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;wCACvB,OAAO,MAAM,CAAC;oCAChB,CAAC;oCACD,IAAI,EAAE;wCAAE,OAAO,EAAE,GAAG,MAAM,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC;oCAC5C,OAAO,MAAM,CAAC;gCAChB,CAAC,CAAC,CAAC;4BACL,CAAC,EACD,EAAE,EAAE,IAAI,CAAC,EAAE,gBACC,IAAI,CAAC,IAAI,sBACH,IAAI,CAAC,EAAE,kBACX,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EACnD,QAAQ,EAAE,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EACnC,OAAO,EAAE,KAAK,KAAK,MAAM,EACzB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,KAAK,EAAE,KAAK,GAAG,MAAM,EACrB,OAAO,EAAE,IAAI,CAAC,aAAa,YAE1B,KAAK,KAAK,MAAM,IAAI,CACnB,KAAC,OAAO,IAAC,MAAM,EAAE,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,SAAS,EAAC,MAAM,EAAC,SAAS,EAAC,OAAO,YAClE,IAAI,CAAC,IAAI,GACF,CACX,GACU,IA5BN,IAAI,CAAC,EAAE,CA6BX,CACN,CAAC;gBACJ,CAAC,CAAC,GACG,EAEP,KAAC,SAAS,cACR,KAAC,UAAU,IAAC,KAAK,EAAE,EAAE,aAAa,EAAE,SAAS,EAAmB,GAAI,GAC1D,IACO,CACtB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,sBAAsB,CAAC","sourcesContent":["import { remToPx, stripUnit } from 'polished';\nimport { useEffect, useRef, useState } from 'react';\nimport type { FunctionComponent, CSSProperties } from 'react';\n\nimport { useArrows, useElement, 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 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  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}\n                aria-describedby={step.id}\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 target={stepEls[step.id]} showDelay='none' hideDelay='short'>\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, 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"]}

package/lib/components/MultiStepForm/MultiStepForm.js

@@ -65,7 +65,7 @@ export const MultiStepForm = forwardRef(function MultiStepForm({ currentStepId,
         if (progress)
             return;
         let focusables = [];
-        if (stepIndicatorProp === 'horizontal' && progressIndicatorRef.current) {
+        if (stepIndicator !== 'none' && progressIndicatorRef.current) {
             focusables = [
                 ...progressIndicatorRef.current.querySelectorAll(`[id="${currentStepId}"]`)
             ];

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

@@ -1 +1 @@
-{"version":3,"file":"MultiStepForm.js","sourceRoot":"","sources":["../../../src/components/MultiStepForm/MultiStepForm.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useRef, useEffect } from 'react';\nimport type { PropsWithoutRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  useAfterInitialEffect,\n  useUID,\n  useI18n,\n  usePrevious,\n  useBreakpoint,\n  useTheme,\n  useConsolidatedRef\n} from '../../hooks';\nimport type { ForwardRefForwardPropsComponent } from '../../types';\nimport { getFocusables } from '../../utils';\nimport { calculateFontSize } from '../../styles';\nimport Text from '../Text';\nimport HTML from '../HTML';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\nimport Grid, { StyledGrid } from '../Grid';\nimport { defaultThemeProp } from '../../theme';\nimport Progress from '../Progress';\nimport ResponsiveActions from '../ResponsiveActions';\n\nimport type MultiStepFormProps from './MultiStepForm.types';\nimport VerticalFormProgress from './VerticalFormProgress';\nimport HorizontalFormProgress from './HorizontalFormProgress';\n\nexport const StyledForm = styled.form<{ actions?: boolean; heading?: boolean }>(\n  ({ actions, heading, theme }) => {\n    return css`\n      & > ${StyledGrid} {\n        position: relative;\n\n        ${actions &&\n        css`\n          padding-block-end: calc(2 * ${theme.base.spacing});\n        `}\n\n        ${heading &&\n        css`\n          padding-block-start: calc(2 * ${theme.base.spacing});\n        `}\n      }\n    `;\n  }\n);\n\nStyledForm.defaultProps = defaultThemeProp;\n\nexport const StyledFormContent = styled.div``;\n\nexport const StyledRequiredFieldLegend = styled(Text)(({ theme }) => {\n  const {\n    base: {\n      'font-size': fontSize,\n      'font-scale': fontScale,\n      palette: { urgent }\n    }\n  } = theme;\n  const { xxs: infoFontSize } = calculateFontSize(fontSize, fontScale);\n\n  return css`\n    font-size: ${infoFontSize};\n    font-style: italic;\n\n    &::before {\n      display: 'inline';\n      content: '\\\\00a0*';\n      vertical-align: top;\n      color: ${urgent};\n    }\n  `;\n});\n\nStyledRequiredFieldLegend.defaultProps = defaultThemeProp;\n\nexport const MultiStepForm: ForwardRefForwardPropsComponent<MultiStepFormProps> = forwardRef(\n  function MultiStepForm(\n    {\n      currentStepId,\n      steps,\n      heading,\n      stepIndicator: stepIndicatorProp = steps.length < 2 ? 'none' : 'horizontal',\n      progress,\n      ...restProps\n    }: PropsWithoutRef<MultiStepFormProps>,\n    ref: MultiStepFormProps['ref']\n  ) {\n    const multiStepRef = useConsolidatedRef<HTMLFormElement>(ref);\n    const progressIndicatorRef = useRef<HTMLDivElement>(null);\n    const multiStepFormContentRef = useRef<HTMLDivElement>(null);\n    const multiStepActionsRef = useRef<HTMLDivElement>(null);\n\n    const previousId = usePrevious(currentStepId);\n    const currentStep = steps.find(step => step.id === currentStepId)!;\n    const headingId = useUID();\n    const descriptionId = useUID();\n    const t = useI18n();\n    const {\n      base: { 'content-width': contentWidth }\n    } = useTheme();\n\n    const isSmallOrAbove = useBreakpoint('sm');\n\n    const stepIndicator =\n      stepIndicatorProp === 'vertical' && !isSmallOrAbove ? 'horizontal' : stepIndicatorProp;\n\n    const setFocus = () => {\n      if (progress) return;\n\n      let focusables: HTMLElement[] = [];\n      if (stepIndicatorProp === 'horizontal' && progressIndicatorRef.current) {\n        focusables = [\n          ...progressIndicatorRef.current.querySelectorAll(`[id=\"${currentStepId}\"]`)\n        ] as HTMLElement[];\n      } else {\n        focusables = getFocusables(multiStepFormContentRef);\n      }\n      focusables[0]?.focus();\n    };\n\n    // Set focus if the current step id updates\n    useEffect(() => {\n      if (previousId !== currentStepId) {\n        setFocus();\n      }\n    }, [currentStepId, previousId]);\n\n    // Set focus if the form content updates while focus is within the actions region of the form\n    useAfterInitialEffect(() => {\n      if (\n        multiStepActionsRef.current &&\n        multiStepActionsRef.current.contains(document.activeElement)\n      ) {\n        setFocus();\n      }\n    }, [currentStep.content]);\n\n    // Set focus if a progress state resolves\n    useAfterInitialEffect(() => {\n      if (!progress) {\n        setFocus();\n      }\n    }, [progress]);\n\n    let areaDef = '';\n    switch (stepIndicator) {\n      case 'horizontal':\n        areaDef += '\"stepIndicator\" ';\n        if (currentStep.banners) areaDef += '\"banners\" ';\n        if (currentStep.description) areaDef += '\"description\" ';\n        areaDef += '\"content\"';\n        break;\n      case 'vertical':\n        if (currentStep.banners) areaDef += '\"banners stepIndicator\" ';\n        if (currentStep.description) areaDef += '\"description stepIndicator\" ';\n        areaDef += '\"content stepIndicator\"';\n        break;\n      default:\n        if (currentStep.banners) areaDef += '\"banners\" ';\n        if (currentStep.description) areaDef += '\"description\" ';\n        areaDef += '\"content\"';\n    }\n\n    return (\n      <StyledForm\n        ref={multiStepRef}\n        {...restProps}\n        aria-labelledby={heading ? headingId : undefined}\n        aria-describedby={currentStep.description ? descriptionId : undefined}\n        heading={!!heading}\n        actions={!!currentStep.actions}\n      >\n        {heading && (\n          <Text id={headingId} variant='h3'>\n            {heading}\n          </Text>\n        )}\n\n        <Grid\n          ref={progressIndicatorRef}\n          container={{\n            cols:\n              stepIndicator === 'vertical'\n                ? `2fr minmax(${contentWidth.xs}, 1fr)`\n                : 'minmax(0, 1fr)',\n            areas: areaDef,\n            gap: 2\n          }}\n          inert={progress ? '' : undefined}\n        >\n          {steps.length > 1 && (\n            <Grid item={{ area: 'stepIndicator' }}>\n              {stepIndicator === 'horizontal' && (\n                <Grid\n                  item={{ area: 'stepIndicator' }}\n                  as={HorizontalFormProgress}\n                  steps={steps}\n                  currentStepId={currentStepId}\n                />\n              )}\n              {stepIndicator === 'vertical' && (\n                <Grid\n                  item={{ area: 'stepIndicator' }}\n                  as={VerticalFormProgress}\n                  steps={steps}\n                  currentStepId={currentStepId}\n                />\n              )}\n              <VisuallyHiddenText aria-live='polite'>\n                {previousId !== undefined && previousId !== currentStepId\n                  ? t('step_changed_to_name', [currentStep.name])\n                  : ''}\n              </VisuallyHiddenText>\n            </Grid>\n          )}\n\n          {currentStep.banners && <Grid item={{ area: 'banners' }}>{currentStep.banners}</Grid>}\n\n          {currentStep.description && (\n            <Grid item={{ area: 'description' }}>\n              <HTML id={descriptionId} as='p' content={currentStep.description} />\n            </Grid>\n          )}\n\n          <Grid item={{ area: 'content' }} as={StyledFormContent} ref={multiStepFormContentRef}>\n            {currentStep.content}\n          </Grid>\n\n          <Progress\n            visible={!!progress}\n            focusOnVisible\n            placement='local'\n            message={typeof progress === 'string' ? progress : undefined}\n          />\n        </Grid>\n        {currentStep.actions && (\n          <ResponsiveActions actionsRef={multiStepActionsRef} actionsEl={currentStep.actions} />\n        )}\n      </StyledForm>\n    );\n  }\n);\n\nexport default MultiStepForm;\n"]}
+{"version":3,"file":"MultiStepForm.js","sourceRoot":"","sources":["../../../src/components/MultiStepForm/MultiStepForm.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useRef, useEffect } from 'react';\nimport type { PropsWithoutRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  useAfterInitialEffect,\n  useUID,\n  useI18n,\n  usePrevious,\n  useBreakpoint,\n  useTheme,\n  useConsolidatedRef\n} from '../../hooks';\nimport type { ForwardRefForwardPropsComponent } from '../../types';\nimport { getFocusables } from '../../utils';\nimport { calculateFontSize } from '../../styles';\nimport Text from '../Text';\nimport HTML from '../HTML';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\nimport Grid, { StyledGrid } from '../Grid';\nimport { defaultThemeProp } from '../../theme';\nimport Progress from '../Progress';\nimport ResponsiveActions from '../ResponsiveActions';\n\nimport type MultiStepFormProps from './MultiStepForm.types';\nimport VerticalFormProgress from './VerticalFormProgress';\nimport HorizontalFormProgress from './HorizontalFormProgress';\n\nexport const StyledForm = styled.form<{ actions?: boolean; heading?: boolean }>(\n  ({ actions, heading, theme }) => {\n    return css`\n      & > ${StyledGrid} {\n        position: relative;\n\n        ${actions &&\n        css`\n          padding-block-end: calc(2 * ${theme.base.spacing});\n        `}\n\n        ${heading &&\n        css`\n          padding-block-start: calc(2 * ${theme.base.spacing});\n        `}\n      }\n    `;\n  }\n);\n\nStyledForm.defaultProps = defaultThemeProp;\n\nexport const StyledFormContent = styled.div``;\n\nexport const StyledRequiredFieldLegend = styled(Text)(({ theme }) => {\n  const {\n    base: {\n      'font-size': fontSize,\n      'font-scale': fontScale,\n      palette: { urgent }\n    }\n  } = theme;\n  const { xxs: infoFontSize } = calculateFontSize(fontSize, fontScale);\n\n  return css`\n    font-size: ${infoFontSize};\n    font-style: italic;\n\n    &::before {\n      display: 'inline';\n      content: '\\\\00a0*';\n      vertical-align: top;\n      color: ${urgent};\n    }\n  `;\n});\n\nStyledRequiredFieldLegend.defaultProps = defaultThemeProp;\n\nexport const MultiStepForm: ForwardRefForwardPropsComponent<MultiStepFormProps> = forwardRef(\n  function MultiStepForm(\n    {\n      currentStepId,\n      steps,\n      heading,\n      stepIndicator: stepIndicatorProp = steps.length < 2 ? 'none' : 'horizontal',\n      progress,\n      ...restProps\n    }: PropsWithoutRef<MultiStepFormProps>,\n    ref: MultiStepFormProps['ref']\n  ) {\n    const multiStepRef = useConsolidatedRef<HTMLFormElement>(ref);\n    const progressIndicatorRef = useRef<HTMLDivElement>(null);\n    const multiStepFormContentRef = useRef<HTMLDivElement>(null);\n    const multiStepActionsRef = useRef<HTMLDivElement>(null);\n\n    const previousId = usePrevious(currentStepId);\n    const currentStep = steps.find(step => step.id === currentStepId)!;\n    const headingId = useUID();\n    const descriptionId = useUID();\n    const t = useI18n();\n    const {\n      base: { 'content-width': contentWidth }\n    } = useTheme();\n\n    const isSmallOrAbove = useBreakpoint('sm');\n\n    const stepIndicator =\n      stepIndicatorProp === 'vertical' && !isSmallOrAbove ? 'horizontal' : stepIndicatorProp;\n\n    const setFocus = () => {\n      if (progress) return;\n\n      let focusables: HTMLElement[] = [];\n      if (stepIndicator !== 'none' && progressIndicatorRef.current) {\n        focusables = [\n          ...progressIndicatorRef.current.querySelectorAll(`[id=\"${currentStepId}\"]`)\n        ] as HTMLElement[];\n      } else {\n        focusables = getFocusables(multiStepFormContentRef);\n      }\n      focusables[0]?.focus();\n    };\n\n    // Set focus if the current step id updates\n    useEffect(() => {\n      if (previousId !== currentStepId) {\n        setFocus();\n      }\n    }, [currentStepId, previousId]);\n\n    // Set focus if the form content updates while focus is within the actions region of the form\n    useAfterInitialEffect(() => {\n      if (\n        multiStepActionsRef.current &&\n        multiStepActionsRef.current.contains(document.activeElement)\n      ) {\n        setFocus();\n      }\n    }, [currentStep.content]);\n\n    // Set focus if a progress state resolves\n    useAfterInitialEffect(() => {\n      if (!progress) {\n        setFocus();\n      }\n    }, [progress]);\n\n    let areaDef = '';\n    switch (stepIndicator) {\n      case 'horizontal':\n        areaDef += '\"stepIndicator\" ';\n        if (currentStep.banners) areaDef += '\"banners\" ';\n        if (currentStep.description) areaDef += '\"description\" ';\n        areaDef += '\"content\"';\n        break;\n      case 'vertical':\n        if (currentStep.banners) areaDef += '\"banners stepIndicator\" ';\n        if (currentStep.description) areaDef += '\"description stepIndicator\" ';\n        areaDef += '\"content stepIndicator\"';\n        break;\n      default:\n        if (currentStep.banners) areaDef += '\"banners\" ';\n        if (currentStep.description) areaDef += '\"description\" ';\n        areaDef += '\"content\"';\n    }\n\n    return (\n      <StyledForm\n        ref={multiStepRef}\n        {...restProps}\n        aria-labelledby={heading ? headingId : undefined}\n        aria-describedby={currentStep.description ? descriptionId : undefined}\n        heading={!!heading}\n        actions={!!currentStep.actions}\n      >\n        {heading && (\n          <Text id={headingId} variant='h3'>\n            {heading}\n          </Text>\n        )}\n\n        <Grid\n          ref={progressIndicatorRef}\n          container={{\n            cols:\n              stepIndicator === 'vertical'\n                ? `2fr minmax(${contentWidth.xs}, 1fr)`\n                : 'minmax(0, 1fr)',\n            areas: areaDef,\n            gap: 2\n          }}\n          inert={progress ? '' : undefined}\n        >\n          {steps.length > 1 && (\n            <Grid item={{ area: 'stepIndicator' }}>\n              {stepIndicator === 'horizontal' && (\n                <Grid\n                  item={{ area: 'stepIndicator' }}\n                  as={HorizontalFormProgress}\n                  steps={steps}\n                  currentStepId={currentStepId}\n                />\n              )}\n              {stepIndicator === 'vertical' && (\n                <Grid\n                  item={{ area: 'stepIndicator' }}\n                  as={VerticalFormProgress}\n                  steps={steps}\n                  currentStepId={currentStepId}\n                />\n              )}\n              <VisuallyHiddenText aria-live='polite'>\n                {previousId !== undefined && previousId !== currentStepId\n                  ? t('step_changed_to_name', [currentStep.name])\n                  : ''}\n              </VisuallyHiddenText>\n            </Grid>\n          )}\n\n          {currentStep.banners && <Grid item={{ area: 'banners' }}>{currentStep.banners}</Grid>}\n\n          {currentStep.description && (\n            <Grid item={{ area: 'description' }}>\n              <HTML id={descriptionId} as='p' content={currentStep.description} />\n            </Grid>\n          )}\n\n          <Grid item={{ area: 'content' }} as={StyledFormContent} ref={multiStepFormContentRef}>\n            {currentStep.content}\n          </Grid>\n\n          <Progress\n            visible={!!progress}\n            focusOnVisible\n            placement='local'\n            message={typeof progress === 'string' ? progress : undefined}\n          />\n        </Grid>\n        {currentStep.actions && (\n          <ResponsiveActions actionsRef={multiStepActionsRef} actionsEl={currentStep.actions} />\n        )}\n      </StyledForm>\n    );\n  }\n);\n\nexport default MultiStepForm;\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"VerticalFormProgress.d.ts","sourceRoot":"","sources":["../../../src/components/MultiStepForm/VerticalFormProgress.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE/C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAMhD,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,oBAAoB,EAAE,iBAAiB,CAAC,iBAAiB,GAAG,YAAY,CA6C7E,CAAC;AAEF,eAAe,oBAAoB,CAAC"}
+{"version":3,"file":"VerticalFormProgress.d.ts","sourceRoot":"","sources":["../../../src/components/MultiStepForm/VerticalFormProgress.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE/C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAWhD,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,oBAAoB,EAAE,iBAAiB,CAAC,iBAAiB,GAAG,YAAY,CA6E7E,CAAC;AAEF,eAAe,oBAAoB,CAAC"}

package/lib/components/MultiStepForm/VerticalFormProgress.js

@@ -1,18 +1,50 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment } from 'react';
-import Flex from '../Flex';
+import { useEffect, useRef, useState } from 'react';
 import Grid from '../Grid';
 import Text from '../Text';
-import { StepMarkerIcon, StyledBulletWrapper, StyledStepText } from './FormProgress.styles';
+import { useArrows, useElement, useI18n } from '../../hooks';
+import { StepMarker, StyledBulletWrapper, StyledStepText, StyledVerticalStepMarkers } from './FormProgress.styles';
 const VerticalFormProgress = ({ steps, currentStepId, ...restProps }) => {
+    const t = useI18n();
     const curIdx = steps.findIndex(step => step.id === currentStepId);
     const curStep = steps[curIdx];
-    return (_jsx(Flex, { ...restProps, container: { alignItems: 'start' }, role: 'progressbar', "aria-valuenow": curIdx, "aria-valuemin": 0, "aria-valuetext": curStep.name, "aria-valuemax": steps.length, children: _jsx(Grid, { container: {
-                cols: '2rem minmax(0, 1fr)',
-                colGap: 1
-            }, children: steps.map((step, index) => {
-                return (_jsxs(Fragment, { children: [_jsx(StyledBulletWrapper, { hasNext: index !== steps.length - 1, prior: index < curIdx, children: _jsx(StepMarkerIcon, { "aria-label": step.name, "aria-describedby": step.id, current: index === curIdx, prior: index < curIdx, depth: step.depth }) }), _jsx(Text, { variant: 'h4', as: StyledStepText, children: step.name })] }, step.id));
-            }) }) }));
+    const [currentStepEl, setCurrentStepEl] = useElement();
+    const [stepEls, setStepEls] = useState({});
+    const stepsRef = useRef(null);
+    useArrows(stepsRef, {
+        selector: 'button',
+        cycle: false,
+        dir: 'left-right',
+        initialFocusElement: currentStepEl
+    });
+    useArrows(stepsRef, {
+        selector: 'button',
+        cycle: false,
+        dir: 'up-down',
+        initialFocusElement: currentStepEl
+    });
+    useEffect(() => {
+        if (stepEls[curStep.id] && stepEls[curStep.id] !== currentStepEl) {
+            setCurrentStepEl(stepEls[curStep.id]);
+        }
+    }, [Object.keys(stepEls), curStep]);
+    return (_jsx(StyledVerticalStepMarkers, { ref: stepsRef, ...restProps, children: steps.map((step, index) => {
+            return (_jsxs(Grid, { as: 'li', container: {
+                    cols: '2rem minmax(0, 1fr)',
+                    colGap: 1
+                }, children: [_jsx(StyledBulletWrapper, { hasNext: index !== steps.length - 1, prior: index < curIdx, children: _jsx(StepMarker, { ref: (el) => {
+                                setStepEls(curr => {
+                                    const newEls = { ...curr };
+                                    if (!el && newEls[step.id]) {
+                                        delete newEls[step.id];
+                                        return newEls;
+                                    }
+                                    if (el)
+                                        return { ...newEls, [step.id]: el };
+                                    return newEls;
+                                });
+                            }, id: step.id, "aria-label": `${step.name} - ${t('step_num', [index + 1, steps.length])}`, "aria-current": index === curIdx ? 'step' : undefined, tabIndex: index === curIdx ? 0 : -1, current: index === curIdx, prior: index < curIdx, depth: step.depth, onClick: step.onMarkerClick }) }), _jsx(Text, { variant: 'h4', as: StyledStepText, children: step.name })] }, step.id));
+        }) }));
 };
 export default VerticalFormProgress;
 //# sourceMappingURL=VerticalFormProgress.js.map