@pega/cosmos-react-core 4.0.0-dev.16.0 → 4.0.0-dev.16.2

package/lib/components/FieldGroup/FieldGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"FieldGroup.js","sourceRoot":"","sources":["../../../src/components/FieldGroup/FieldGroup.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Text from '../Text';\nimport Button from '../Button';\nimport ExpandCollapse from '../ExpandCollapse';\nimport Flex from '../Flex';\nimport Grid from '../Grid';\nimport HTML from '../HTML';\nimport Icon, { StyledIcon, registerIcon } from '../Icon';\nimport * as caretRightIcon from '../Icon/icons/caret-right.icon';\nimport Actions, { ActionsProps } from '../Actions';\nimport { defaultThemeProp } from '../../theme';\nimport { BaseProps, ForwardProps } from '../../types';\nimport { useDirection, useI18n, useUID } from '../../hooks';\nimport { calculateFontSize, FontSize, omitProps } from '../../styles';\nimport AdditionalInfo, { AdditionalInfoProps } from '../AdditionalInfo';\n\nregisterIcon(caretRightIcon);\n\nexport interface FieldGroupProps extends BaseProps {\n  /** The content of the Field Group. */\n  children: ReactNode;\n  /** A description of the field group to be displayed above the controls. */\n  description?: string;\n  /**\n   * Controls the collapsed state of the field group.\n   * Passing undefined will render the field group as non-collapsible.\n   * @default false\n   */\n  collapsed?: boolean;\n  /**\n   * Called when user clicks the toggle button.\n   */\n  onToggleCollapsed?: () => void;\n  /** Select the heading tag for header */\n  headingTag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n  /** The name associated with the Field Group. */\n  name?: string;\n  /** Provides additional info relevant to the field group. */\n  additionalInfo?: {\n    heading: AdditionalInfoProps['heading'];\n    content: AdditionalInfoProps['children'];\n  };\n  /** An array of actions to add to the header. */\n  actions?: ActionsProps['items'];\n  /** A reference to the wrapping element. */\n  ref?: Ref<HTMLFieldSetElement>;\n}\n\ninterface FieldGroupLegendProps extends Pick<FieldGroupProps, 'collapsed'> {\n  actions?: ActionsProps['items'];\n  children?: ReactNode;\n  additionalInfo?: FieldGroupProps['additionalInfo'];\n}\n\nconst StyledExpandButton = styled(Button)(\n  ({\n    theme: {\n      base: { animation }\n    }\n  }) => {\n    const { rtl } = useDirection();\n    return css`\n      ${StyledIcon} {\n        transition: transform ${animation.speed} ${animation.timing.ease};\n      }\n      &[aria-expanded='true'] ${StyledIcon} {\n        transform: rotate(90deg);\n      }\n      &[aria-expanded='false'] ${StyledIcon} {\n        transform: rotate(${rtl ? 180 : 0}deg);\n      }\n    `;\n  }\n);\n\nStyledExpandButton.defaultProps = defaultThemeProp;\n\nexport const StyledFieldGroupName = styled.span``;\n\nexport const StyledFieldGroupLegend = styled.legend.withConfig<Pick<FieldGroupProps, 'collapsed'>>(\n  omitProps('collapsed')\n)(\n  ({\n    collapsed,\n    theme: {\n      base: {\n        spacing,\n        animation,\n        'hit-area': { 'mouse-min': hitAreaMouse, 'finger-min': hitAreaFinger }\n      }\n    }\n  }) => {\n    return css`\n      width: 100%;\n      margin-bottom: 0;\n      ${!collapsed &&\n      css`\n        margin-block-end: calc(1.5 * ${spacing});\n      `}\n      transition: margin-block-end ${animation.speed} ${animation.timing.ease};\n\n      > ${StyledExpandButton} {\n        min-height: ${hitAreaMouse};\n\n        @media (pointer: 'coarse') {\n          min-height: ${hitAreaFinger};\n        }\n      }\n    `;\n  }\n);\n\nStyledFieldGroupLegend.defaultProps = defaultThemeProp;\n\nexport const StyledFieldGroup = styled.fieldset(\n  ({\n    theme: {\n      base: { 'font-size': fontSize, 'font-scale': fontScale },\n      components: { text }\n    }\n  }) => {\n    const fontSizes = calculateFontSize(fontSize, fontScale);\n\n    return css`\n      border: none;\n\n      & ${StyledFieldGroupName} {\n        font-size: ${fontSizes[text.h3['font-size'] as FontSize]};\n        font-weight: ${text.h3['font-weight']};\n      }\n\n      & & ${StyledFieldGroupName} {\n        font-size: ${fontSizes[text.h4['font-size'] as FontSize]};\n        font-weight: ${text.h4['font-weight']};\n      }\n\n      & & & ${StyledFieldGroupName} {\n        font-size: ${fontSizes[text.h5['font-size'] as FontSize]};\n        font-weight: ${text.h5['font-weight']};\n      }\n\n      & & & & ${StyledFieldGroupName} {\n        font-size: ${fontSizes[text.h6['font-size'] as FontSize]};\n        font-weight: ${text.h6['font-weight']};\n      }\n    `;\n  }\n);\n\nStyledFieldGroup.defaultProps = defaultThemeProp;\n\nconst FieldGroupLegend: FunctionComponent<FieldGroupLegendProps> = ({\n  children,\n  collapsed,\n  actions,\n  additionalInfo,\n  ...restProps\n}) => {\n  return (\n    <StyledFieldGroupLegend collapsed={collapsed} {...restProps}>\n      <Flex container={{ alignItems: 'center', justify: 'between', gap: 0.5 }}>\n        <Flex container={{ alignItems: 'center', gap: 0.5 }}>\n          {children}\n          {additionalInfo && (\n            <AdditionalInfo heading={additionalInfo.heading}>\n              {additionalInfo.content}\n            </AdditionalInfo>\n          )}\n        </Flex>\n        {actions && <Actions items={actions} />}\n      </Flex>\n    </StyledFieldGroupLegend>\n  );\n};\n\nconst FieldGroup: FunctionComponent<FieldGroupProps & ForwardProps> = forwardRef(\n  (\n    {\n      children,\n      description,\n      name,\n      additionalInfo,\n      actions,\n      collapsed = false,\n      headingTag,\n      onToggleCollapsed,\n      ...restProps\n    }: PropsWithoutRef<FieldGroupProps>,\n    ref: FieldGroupProps['ref']\n  ) => {\n    const t = useI18n();\n    const uid = useUID();\n\n    const descAndChildren = (\n      <Grid container={{ cols: 'minmax(0, 1fr)', gap: 3 }}>\n        {description && <HTML id={`${uid}-description`} as='p' content={description} />}\n        <div>{children}</div>\n      </Grid>\n    );\n\n    return (\n      <StyledFieldGroup\n        aria-label={name}\n        aria-describedby={description ? `${uid}-description` : undefined}\n        {...restProps}\n        ref={ref}\n      >\n        {name && (\n          <FieldGroupLegend collapsed={collapsed} actions={actions} additionalInfo={additionalInfo}>\n            {typeof collapsed === 'boolean' ? (\n              <StyledExpandButton\n                type='button'\n                variant='text'\n                onClick={() => {\n                  onToggleCollapsed?.();\n                }}\n                aria-expanded={collapsed ? 'false' : 'true'}\n                aria-label={t(collapsed ? 'expand_noun' : 'collapse_noun', [name])}\n              >\n                <Flex\n                  container={{ direction: 'row', alignItems: 'center', gap: 0.5 }}\n                  forwardedAs='span'\n                >\n                  <Icon name='caret-right' />\n                  {headingTag ? (\n                    <Text variant={headingTag}>{name}</Text>\n                  ) : (\n                    <StyledFieldGroupName>{name}</StyledFieldGroupName>\n                  )}\n                </Flex>\n              </StyledExpandButton>\n            ) : (\n              <>\n                {headingTag ? (\n                  <Text variant={headingTag}>{name}</Text>\n                ) : (\n                  <StyledFieldGroupName>{name}</StyledFieldGroupName>\n                )}\n              </>\n            )}\n          </FieldGroupLegend>\n        )}\n        {typeof collapsed === 'boolean' ? (\n          <ExpandCollapse collapsed={collapsed}>{descAndChildren}</ExpandCollapse>\n        ) : (\n          descAndChildren\n        )}\n      </StyledFieldGroup>\n    );\n  }\n);\n\nexport default FieldGroup;\n"]}
+{"version":3,"file":"FieldGroup.js","sourceRoot":"","sources":["../../../src/components/FieldGroup/FieldGroup.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Text from '../Text';\nimport Button from '../Button';\nimport ExpandCollapse from '../ExpandCollapse';\nimport Flex from '../Flex';\nimport Grid from '../Grid';\nimport HTML from '../HTML';\nimport Icon, { StyledIcon, registerIcon } from '../Icon';\nimport * as caretRightIcon from '../Icon/icons/caret-right.icon';\nimport Actions, { ActionsProps } from '../Actions';\nimport { defaultThemeProp } from '../../theme';\nimport { BaseProps, ForwardProps } from '../../types';\nimport { useDirection, useI18n, useUID } from '../../hooks';\nimport { calculateFontSize, FontSize, omitProps } from '../../styles';\nimport AdditionalInfo, { AdditionalInfoProps } from '../AdditionalInfo';\n\nregisterIcon(caretRightIcon);\n\nexport interface FieldGroupProps extends BaseProps {\n  /** The content of the Field Group. */\n  children: ReactNode;\n  /** A description of the field group to be displayed above the controls. */\n  description?: string;\n  /**\n   * Controls the collapsed state of the field group.\n   * Passing undefined will render the field group as non-collapsible.\n   * @default false\n   */\n  collapsed?: boolean;\n  /**\n   * Called when user clicks the toggle button.\n   */\n  onToggleCollapsed?: () => void;\n  /** Select the heading tag for header */\n  headingTag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n  /** The name associated with the Field Group. */\n  name?: string;\n  /** Provides additional info relevant to the field group. */\n  additionalInfo?: {\n    heading: AdditionalInfoProps['heading'];\n    content: AdditionalInfoProps['children'];\n  };\n  /** An array of actions to add to the header. */\n  actions?: ActionsProps['items'];\n  /** A reference to the wrapping element. */\n  ref?: Ref<HTMLFieldSetElement>;\n}\n\ninterface FieldGroupLegendProps extends Pick<FieldGroupProps, 'collapsed'> {\n  actions?: ActionsProps['items'];\n  children?: ReactNode;\n  additionalInfo?: FieldGroupProps['additionalInfo'];\n}\n\nconst StyledExpandButton = styled(Button)(\n  ({\n    theme: {\n      base: { animation }\n    }\n  }) => {\n    const { rtl } = useDirection();\n    return css`\n      ${StyledIcon} {\n        transition: transform ${animation.speed} ${animation.timing.ease};\n      }\n      &[aria-expanded='true'] ${StyledIcon} {\n        transform: rotate(90deg);\n      }\n      &[aria-expanded='false'] ${StyledIcon} {\n        transform: rotate(${rtl ? 180 : 0}deg);\n      }\n    `;\n  }\n);\n\nStyledExpandButton.defaultProps = defaultThemeProp;\n\nexport const StyledFieldGroupName = styled.span``;\n\nexport const StyledFieldGroupLegend = styled.legend.withConfig<Pick<FieldGroupProps, 'collapsed'>>(\n  omitProps('collapsed')\n)(\n  ({\n    collapsed,\n    theme: {\n      base: {\n        spacing,\n        animation,\n        'hit-area': { 'mouse-min': hitAreaMouse, 'finger-min': hitAreaFinger }\n      }\n    }\n  }) => {\n    return css`\n      width: 100%;\n      margin-bottom: 0;\n      ${!collapsed &&\n      css`\n        margin-block-end: calc(1.5 * ${spacing});\n      `}\n      transition: margin-block-end ${animation.speed} ${animation.timing.ease};\n\n      > ${StyledExpandButton} {\n        min-height: ${hitAreaMouse};\n\n        @media (pointer: 'coarse') {\n          min-height: ${hitAreaFinger};\n        }\n      }\n    `;\n  }\n);\n\nStyledFieldGroupLegend.defaultProps = defaultThemeProp;\n\nexport const StyledFieldGroup = styled.fieldset(\n  ({\n    theme: {\n      base: { 'font-size': fontSize, 'font-scale': fontScale },\n      components: { text }\n    }\n  }) => {\n    const fontSizes = calculateFontSize(fontSize, fontScale);\n\n    return css`\n      border: none;\n\n      & ${StyledFieldGroupName} {\n        font-size: ${fontSizes[text.h3['font-size'] as FontSize]};\n        font-weight: ${text.h3['font-weight']};\n      }\n\n      & & ${StyledFieldGroupName} {\n        font-size: ${fontSizes[text.h4['font-size'] as FontSize]};\n        font-weight: ${text.h4['font-weight']};\n      }\n\n      & & & ${StyledFieldGroupName} {\n        font-size: ${fontSizes[text.h5['font-size'] as FontSize]};\n        font-weight: ${text.h5['font-weight']};\n      }\n\n      & & & & ${StyledFieldGroupName} {\n        font-size: ${fontSizes[text.h6['font-size'] as FontSize]};\n        font-weight: ${text.h6['font-weight']};\n      }\n    `;\n  }\n);\n\nStyledFieldGroup.defaultProps = defaultThemeProp;\n\nconst FieldGroupLegend: FunctionComponent<FieldGroupLegendProps> = ({\n  children,\n  collapsed,\n  actions,\n  additionalInfo,\n  ...restProps\n}) => {\n  return (\n    <StyledFieldGroupLegend collapsed={collapsed} {...restProps}>\n      <Flex container={{ alignItems: 'center', justify: 'between', gap: 0.5 }}>\n        <Flex container={{ alignItems: 'center', gap: 0.5 }}>\n          {children}\n          {additionalInfo && (\n            <AdditionalInfo heading={additionalInfo.heading}>\n              {additionalInfo.content}\n            </AdditionalInfo>\n          )}\n        </Flex>\n        {actions && <Actions items={actions} />}\n      </Flex>\n    </StyledFieldGroupLegend>\n  );\n};\n\nconst FieldGroup: FunctionComponent<FieldGroupProps & ForwardProps> = forwardRef(\n  (\n    {\n      children,\n      description,\n      name,\n      additionalInfo,\n      actions,\n      collapsed,\n      headingTag,\n      onToggleCollapsed,\n      ...restProps\n    }: PropsWithoutRef<FieldGroupProps>,\n    ref: FieldGroupProps['ref']\n  ) => {\n    const t = useI18n();\n    const uid = useUID();\n\n    const descAndChildren = (\n      <Grid container={{ cols: 'minmax(0, 1fr)', gap: 3 }}>\n        {description && <HTML id={`${uid}-description`} as='p' content={description} />}\n        <div>{children}</div>\n      </Grid>\n    );\n\n    return (\n      <StyledFieldGroup\n        aria-label={name}\n        aria-describedby={description ? `${uid}-description` : undefined}\n        {...restProps}\n        ref={ref}\n      >\n        {name && (\n          <FieldGroupLegend collapsed={collapsed} actions={actions} additionalInfo={additionalInfo}>\n            {typeof collapsed === 'boolean' ? (\n              <StyledExpandButton\n                type='button'\n                variant='text'\n                onClick={() => {\n                  onToggleCollapsed?.();\n                }}\n                aria-expanded={collapsed ? 'false' : 'true'}\n                aria-label={t(collapsed ? 'expand_noun' : 'collapse_noun', [name])}\n              >\n                <Flex\n                  container={{ direction: 'row', alignItems: 'center', gap: 0.5 }}\n                  forwardedAs='span'\n                >\n                  <Icon name='caret-right' />\n                  {headingTag ? (\n                    <Text variant={headingTag}>{name}</Text>\n                  ) : (\n                    <StyledFieldGroupName>{name}</StyledFieldGroupName>\n                  )}\n                </Flex>\n              </StyledExpandButton>\n            ) : (\n              <>\n                {headingTag ? (\n                  <Text variant={headingTag}>{name}</Text>\n                ) : (\n                  <StyledFieldGroupName>{name}</StyledFieldGroupName>\n                )}\n              </>\n            )}\n          </FieldGroupLegend>\n        )}\n        {typeof collapsed === 'boolean' ? (\n          <ExpandCollapse collapsed={collapsed}>{descAndChildren}</ExpandCollapse>\n        ) : (\n          descAndChildren\n        )}\n      </StyledFieldGroup>\n    );\n  }\n);\n\nexport default FieldGroup;\n"]}

package/lib/components/Menu/MenuItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MenuItem.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/MenuItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,iBAAiB,EAAgD,MAAM,OAAO,CAAC;AAIlG,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAgB3C,OAAO,EAA6B,aAAa,EAAE,MAAM,cAAc,CAAC;AAgExE,QAAA,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,GAAG,YAAY,CAyM7D,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"MenuItem.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/MenuItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,iBAAiB,EAAgD,MAAM,OAAO,CAAC;AAIlG,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAgB3C,OAAO,EAA6B,aAAa,EAAE,MAAM,cAAc,CAAC;AAgExE,QAAA,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,GAAG,YAAY,CA4M7D,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/lib/components/Menu/MenuItem.js

@@ -112,9 +112,12 @@ const MenuItem = ({ testId, id, primary, secondary, ancestors, visual, count, it
             idString = '';
         return idString;
     }, [items, secondary, itemCountId, secondaryId]);
-    return (_jsxs(Flex, { "data-testid": testIds.root, ...restProps, container: { alignItems: 'center', justify: 'between', gap: 1 }, id: itemId, as: StyledMenuItem, "aria-label": itemLabel, "aria-describedby": ariaDescribedBy, role: role, "aria-disabled": disabled, "data-expand": !!items, tabIndex: '-1', disabled: disabled, onMouseDown: (e) => {
+    return (_jsxs(Flex, { "data-testid": testIds.root, ...restProps, container: { alignItems: 'center', justify: 'between', gap: 1 }, id: itemId, as: StyledMenuItem, "aria-label": itemLabel, "aria-describedby": ariaDescribedBy, role: role, "aria-disabled": disabled, "data-expand": !!items, tabIndex: -1, disabled: disabled, onMouseDown: (e) => {
             e.preventDefault();
         }, onClick: (e) => {
+            if (disabled) {
+                return;
+            }
             /** Announce only on keyboard selection since mouse selection will automatically detect and act on the DOM aria attribute changes */
             if (e.detail === 0 && selected !== undefined) {
                 announcePolite({

package/lib/components/Menu/MenuItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuItem.js","sourceRoot":"","sources":["../../../src/components/Menu/MenuItem.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Fragment, FunctionComponent, MouseEvent, useCallback, useContext, useMemo } from 'react';\n\nimport MetaList from '../MetaList';\nimport SummaryItem from '../SummaryItem';\nimport { ForwardProps } from '../../types';\nimport Flex from '../Flex';\nimport Icon, { registerIcon } from '../Icon';\nimport * as caretLeftIcon from '../Icon/icons/caret-left.icon';\nimport * as caretRightIcon from '../Icon/icons/caret-right.icon';\nimport * as checkIcon from '../Icon/icons/check.icon';\nimport Text from '../Text';\nimport { Count } from '../Badges';\nimport BareButton from '../Button/BareButton';\nimport { replaceMatchWithElement } from '../../utils';\nimport { useElement, useI18n, useDirection, useLiveLog, useTestIds } from '../../hooks';\nimport Tooltip from '../Tooltip';\nimport Mark from '../Mark';\nimport Button from '../Button';\n\nimport menuHelpers from './helpers';\nimport { AcceptedMouseEventElement, MenuItemProps } from './Menu.types';\nimport MenuContext from './Menu.context';\nimport { StyledAncestors, StyledCheckMarkIcon, StyledMenuItem } from './Menu.styles';\nimport { getMenuItemTestIds } from './Menu.test-ids';\n\nregisterIcon(caretLeftIcon, caretRightIcon, checkIcon);\n\nconst DrillDown = ({\n  expandHandler\n}: {\n  expandHandler?: (e: MouseEvent<AcceptedMouseEventElement>) => void;\n}) => {\n  const { end } = useDirection();\n\n  const icon = <Icon name={`caret-${end}`} />;\n\n  return expandHandler ? (\n    <Button as='span' icon variant='simple' aria-hidden onClick={expandHandler}>\n      {icon}\n    </Button>\n  ) : (\n    icon\n  );\n};\n\nconst AncestorPath = ({ ancestors = [] }: Pick<MenuItemProps, 'ancestors'>) => {\n  const truncatedPath = ancestors.length > 2;\n  const pathParts = truncatedPath ? [ancestors[0], ancestors[ancestors.length - 1]] : ancestors;\n\n  const { end } = useDirection();\n\n  return (\n    <Flex\n      container={{ gap: 0.5, alignItems: 'center' }}\n      as={StyledAncestors}\n      title={ancestors.map(a => (menuHelpers.isItem(a) ? a.primary : a.label)).join(' > ')}\n    >\n      {pathParts.map((ancestor, i, arr) => {\n        const label = menuHelpers.isItem(ancestor) ? ancestor.primary : ancestor.label;\n        return (\n          <Fragment key={label}>\n            <Text variant='secondary'>{label}</Text>\n            {i < arr.length - 1 && (\n              <>\n                <Text variant='secondary'>\n                  <Icon name={`caret-${end}`} />\n                </Text>\n                {truncatedPath && (\n                  <>\n                    <Text variant='secondary'>…</Text>\n                    <Text variant='secondary'>\n                      <Icon name={`caret-${end}`} />\n                    </Text>\n                  </>\n                )}\n              </>\n            )}\n          </Fragment>\n        );\n      })}\n    </Flex>\n  );\n};\n\nconst MenuItem: FunctionComponent<MenuItemProps & ForwardProps> = ({\n  testId,\n  id,\n  primary,\n  secondary,\n  ancestors,\n  visual,\n  count,\n  items,\n  selected,\n  partial,\n  href,\n  tooltip,\n  onClick,\n  onExpand,\n  disabled,\n  role = 'menuitem',\n  ...restProps\n}: MenuItemProps & ForwardProps) => {\n  const t = useI18n();\n  const {\n    mode,\n    onItemClick,\n    accent,\n    variant: menuVariant,\n    setFocusDescendant,\n    getScopedItemId,\n    arrowNavigationUnsupported\n  } = useContext(MenuContext);\n\n  const testIds = useTestIds(testId, getMenuItemTestIds);\n\n  const { announcePolite } = useLiveLog();\n\n  const selectionMode = mode === 'single-select' || mode === 'multi-select';\n  const selectableParent = items && typeof selected === 'boolean';\n  const itemId = useMemo(() => getScopedItemId(id), [id, getScopedItemId]);\n\n  const itemCountId = `${id}-count`;\n  const secondaryId = `${id}-secondary`;\n\n  const clickHandler = useCallback(\n    (e: MouseEvent<AcceptedMouseEventElement>) => {\n      const mouseClick = e.detail !== 0;\n\n      if (mouseClick) {\n        const target = e.target as HTMLElement;\n        const focusAtEl =\n          target.getAttribute('role') === role ? target : target.closest(`li[role=\"${role}\"]`);\n\n        if (focusAtEl) setFocusDescendant(focusAtEl as HTMLElement);\n      }\n      onClick?.(id, e);\n      onItemClick?.(id, e);\n    },\n    [onClick, onItemClick, id]\n  );\n\n  const expandHandler = useCallback(\n    (e: MouseEvent<AcceptedMouseEventElement>) => {\n      onExpand?.(id, e);\n      e.stopPropagation();\n    },\n    [onExpand, id]\n  );\n\n  let accentedPrimary;\n  if (accent && !items) {\n    const accentRegex = typeof accent === 'function' ? accent(primary) : accent;\n    accentedPrimary = replaceMatchWithElement(primary, accentRegex, str => {\n      return <Mark>{str}</Mark>;\n    });\n  }\n\n  const secondaryContent = ancestors ? (\n    <AncestorPath ancestors={ancestors} />\n  ) : (\n    secondary && <MetaList items={secondary} id={secondaryId} />\n  );\n\n  const [summaryItemRef, setSummaryItemRef] = useElement();\n\n  const summaryItem = (\n    <>\n      <SummaryItem\n        ref={setSummaryItemRef}\n        primary={accentedPrimary || (!items ? <Text>{primary}</Text> : primary)}\n        secondary={secondaryContent}\n        visual={visual}\n        actions={\n          items || count ? (\n            <Flex container={{ gap: 1, alignItems: 'center' }}>\n              {count !== undefined && (\n                <Count id={itemCountId} aria-label={t('menu_item_count', [count])}>\n                  {count}\n                </Count>\n              )}\n              {items && <DrillDown expandHandler={selectableParent ? expandHandler : undefined} />}\n            </Flex>\n          ) : undefined\n        }\n        container={{\n          colGap: 1\n        }}\n      />\n      {tooltip && (\n        <Tooltip target={summaryItemRef} hideDelay='none' showDelay='none' portal>\n          {tooltip}\n        </Tooltip>\n      )}\n    </>\n  );\n\n  const itemLabel = useMemo(() => {\n    let label = '';\n    let collapsedLabel = '';\n    if (selectableParent && selectionMode) {\n      const selectedParentItemLabel = selected\n        ? t('selected_noun', [primary])\n        : t('unselected_noun', [primary]);\n      collapsedLabel = t('menu_collapsed', [selectedParentItemLabel]);\n    } else {\n      collapsedLabel = t('menu_collapsed', [primary]);\n    }\n    if (selectionMode && !items) {\n      label = selected ? t('selected_noun', [primary]) : t('unselected_noun', [primary]);\n    } else {\n      label = primary;\n    }\n    if (items) {\n      return arrowNavigationUnsupported\n        ? t('menu_item_shift_space_expand_collapse', [collapsedLabel])\n        : t('menu_item_expand_arrow', [collapsedLabel]);\n    }\n    return label;\n  }, [selected, primary, items]);\n\n  const ariaDescribedBy = useMemo(() => {\n    const hasSecondary = !!secondary;\n    let idString: string;\n\n    if (hasSecondary) {\n      idString = secondaryId;\n      if (count !== undefined && count >= 0) {\n        idString = `${idString} ${itemCountId}`;\n      }\n    } else if (count !== undefined && count >= 0) {\n      idString = itemCountId;\n    } else idString = '';\n\n    return idString;\n  }, [items, secondary, itemCountId, secondaryId]);\n\n  return (\n    <Flex\n      data-testid={testIds.root}\n      {...restProps}\n      container={{ alignItems: 'center', justify: 'between', gap: 1 }}\n      id={itemId}\n      as={StyledMenuItem}\n      aria-label={itemLabel}\n      aria-describedby={ariaDescribedBy}\n      role={role}\n      aria-disabled={disabled}\n      data-expand={!!items}\n      tabIndex='-1'\n      disabled={disabled}\n      onMouseDown={(e: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n        e.preventDefault();\n      }}\n      onClick={(e: MouseEvent<AcceptedMouseEventElement>) => {\n        /** Announce only on keyboard selection since mouse selection will automatically detect and act on the DOM aria attribute changes */\n        if (e.detail === 0 && selected !== undefined) {\n          announcePolite({\n            /** selected is still not updated so putting the reverse logic. */\n            message: !selected ? t('selected_noun', [primary]) : t('unselected_noun', [primary]),\n            type: 'acknowledgement'\n          });\n        }\n        return items && typeof selected !== 'boolean' ? expandHandler(e) : clickHandler(e);\n      }}\n      onMouseEnter={menuVariant === 'flyout' ? expandHandler : undefined}\n      href={href}\n      mode={mode}\n      isParentItem={!!items}\n      aria-selected={!!selected}\n      selectableParent={selectableParent}\n    >\n      {selectionMode && (!items || selectableParent) && (\n        <Icon as={StyledCheckMarkIcon} name='check' />\n      )}\n\n      {href && !selectionMode ? (\n        <BareButton href={href} tabIndex='-1'>\n          {summaryItem}\n        </BareButton>\n      ) : (\n        summaryItem\n      )}\n    </Flex>\n  );\n};\n\nexport default MenuItem;\n"]}
+{"version":3,"file":"MenuItem.js","sourceRoot":"","sources":["../../../src/components/Menu/MenuItem.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Fragment, FunctionComponent, MouseEvent, useCallback, useContext, useMemo } from 'react';\n\nimport MetaList from '../MetaList';\nimport SummaryItem from '../SummaryItem';\nimport { ForwardProps } from '../../types';\nimport Flex from '../Flex';\nimport Icon, { registerIcon } from '../Icon';\nimport * as caretLeftIcon from '../Icon/icons/caret-left.icon';\nimport * as caretRightIcon from '../Icon/icons/caret-right.icon';\nimport * as checkIcon from '../Icon/icons/check.icon';\nimport Text from '../Text';\nimport { Count } from '../Badges';\nimport BareButton from '../Button/BareButton';\nimport { replaceMatchWithElement } from '../../utils';\nimport { useElement, useI18n, useDirection, useLiveLog, useTestIds } from '../../hooks';\nimport Tooltip from '../Tooltip';\nimport Mark from '../Mark';\nimport Button from '../Button';\n\nimport menuHelpers from './helpers';\nimport { AcceptedMouseEventElement, MenuItemProps } from './Menu.types';\nimport MenuContext from './Menu.context';\nimport { StyledAncestors, StyledCheckMarkIcon, StyledMenuItem } from './Menu.styles';\nimport { getMenuItemTestIds } from './Menu.test-ids';\n\nregisterIcon(caretLeftIcon, caretRightIcon, checkIcon);\n\nconst DrillDown = ({\n  expandHandler\n}: {\n  expandHandler?: (e: MouseEvent<AcceptedMouseEventElement>) => void;\n}) => {\n  const { end } = useDirection();\n\n  const icon = <Icon name={`caret-${end}`} />;\n\n  return expandHandler ? (\n    <Button as='span' icon variant='simple' aria-hidden onClick={expandHandler}>\n      {icon}\n    </Button>\n  ) : (\n    icon\n  );\n};\n\nconst AncestorPath = ({ ancestors = [] }: Pick<MenuItemProps, 'ancestors'>) => {\n  const truncatedPath = ancestors.length > 2;\n  const pathParts = truncatedPath ? [ancestors[0], ancestors[ancestors.length - 1]] : ancestors;\n\n  const { end } = useDirection();\n\n  return (\n    <Flex\n      container={{ gap: 0.5, alignItems: 'center' }}\n      as={StyledAncestors}\n      title={ancestors.map(a => (menuHelpers.isItem(a) ? a.primary : a.label)).join(' > ')}\n    >\n      {pathParts.map((ancestor, i, arr) => {\n        const label = menuHelpers.isItem(ancestor) ? ancestor.primary : ancestor.label;\n        return (\n          <Fragment key={label}>\n            <Text variant='secondary'>{label}</Text>\n            {i < arr.length - 1 && (\n              <>\n                <Text variant='secondary'>\n                  <Icon name={`caret-${end}`} />\n                </Text>\n                {truncatedPath && (\n                  <>\n                    <Text variant='secondary'>…</Text>\n                    <Text variant='secondary'>\n                      <Icon name={`caret-${end}`} />\n                    </Text>\n                  </>\n                )}\n              </>\n            )}\n          </Fragment>\n        );\n      })}\n    </Flex>\n  );\n};\n\nconst MenuItem: FunctionComponent<MenuItemProps & ForwardProps> = ({\n  testId,\n  id,\n  primary,\n  secondary,\n  ancestors,\n  visual,\n  count,\n  items,\n  selected,\n  partial,\n  href,\n  tooltip,\n  onClick,\n  onExpand,\n  disabled,\n  role = 'menuitem',\n  ...restProps\n}: MenuItemProps & ForwardProps) => {\n  const t = useI18n();\n  const {\n    mode,\n    onItemClick,\n    accent,\n    variant: menuVariant,\n    setFocusDescendant,\n    getScopedItemId,\n    arrowNavigationUnsupported\n  } = useContext(MenuContext);\n\n  const testIds = useTestIds(testId, getMenuItemTestIds);\n\n  const { announcePolite } = useLiveLog();\n\n  const selectionMode = mode === 'single-select' || mode === 'multi-select';\n  const selectableParent = items && typeof selected === 'boolean';\n  const itemId = useMemo(() => getScopedItemId(id), [id, getScopedItemId]);\n\n  const itemCountId = `${id}-count`;\n  const secondaryId = `${id}-secondary`;\n\n  const clickHandler = useCallback(\n    (e: MouseEvent<AcceptedMouseEventElement>) => {\n      const mouseClick = e.detail !== 0;\n\n      if (mouseClick) {\n        const target = e.target as HTMLElement;\n        const focusAtEl =\n          target.getAttribute('role') === role ? target : target.closest(`li[role=\"${role}\"]`);\n\n        if (focusAtEl) setFocusDescendant(focusAtEl as HTMLElement);\n      }\n      onClick?.(id, e);\n      onItemClick?.(id, e);\n    },\n    [onClick, onItemClick, id]\n  );\n\n  const expandHandler = useCallback(\n    (e: MouseEvent<AcceptedMouseEventElement>) => {\n      onExpand?.(id, e);\n      e.stopPropagation();\n    },\n    [onExpand, id]\n  );\n\n  let accentedPrimary;\n  if (accent && !items) {\n    const accentRegex = typeof accent === 'function' ? accent(primary) : accent;\n    accentedPrimary = replaceMatchWithElement(primary, accentRegex, str => {\n      return <Mark>{str}</Mark>;\n    });\n  }\n\n  const secondaryContent = ancestors ? (\n    <AncestorPath ancestors={ancestors} />\n  ) : (\n    secondary && <MetaList items={secondary} id={secondaryId} />\n  );\n\n  const [summaryItemRef, setSummaryItemRef] = useElement();\n\n  const summaryItem = (\n    <>\n      <SummaryItem\n        ref={setSummaryItemRef}\n        primary={accentedPrimary || (!items ? <Text>{primary}</Text> : primary)}\n        secondary={secondaryContent}\n        visual={visual}\n        actions={\n          items || count ? (\n            <Flex container={{ gap: 1, alignItems: 'center' }}>\n              {count !== undefined && (\n                <Count id={itemCountId} aria-label={t('menu_item_count', [count])}>\n                  {count}\n                </Count>\n              )}\n              {items && <DrillDown expandHandler={selectableParent ? expandHandler : undefined} />}\n            </Flex>\n          ) : undefined\n        }\n        container={{\n          colGap: 1\n        }}\n      />\n      {tooltip && (\n        <Tooltip target={summaryItemRef} hideDelay='none' showDelay='none' portal>\n          {tooltip}\n        </Tooltip>\n      )}\n    </>\n  );\n\n  const itemLabel = useMemo(() => {\n    let label = '';\n    let collapsedLabel = '';\n    if (selectableParent && selectionMode) {\n      const selectedParentItemLabel = selected\n        ? t('selected_noun', [primary])\n        : t('unselected_noun', [primary]);\n      collapsedLabel = t('menu_collapsed', [selectedParentItemLabel]);\n    } else {\n      collapsedLabel = t('menu_collapsed', [primary]);\n    }\n    if (selectionMode && !items) {\n      label = selected ? t('selected_noun', [primary]) : t('unselected_noun', [primary]);\n    } else {\n      label = primary;\n    }\n    if (items) {\n      return arrowNavigationUnsupported\n        ? t('menu_item_shift_space_expand_collapse', [collapsedLabel])\n        : t('menu_item_expand_arrow', [collapsedLabel]);\n    }\n    return label;\n  }, [selected, primary, items]);\n\n  const ariaDescribedBy = useMemo(() => {\n    const hasSecondary = !!secondary;\n    let idString: string;\n\n    if (hasSecondary) {\n      idString = secondaryId;\n      if (count !== undefined && count >= 0) {\n        idString = `${idString} ${itemCountId}`;\n      }\n    } else if (count !== undefined && count >= 0) {\n      idString = itemCountId;\n    } else idString = '';\n\n    return idString;\n  }, [items, secondary, itemCountId, secondaryId]);\n\n  return (\n    <Flex\n      data-testid={testIds.root}\n      {...restProps}\n      container={{ alignItems: 'center', justify: 'between', gap: 1 }}\n      id={itemId}\n      as={StyledMenuItem}\n      aria-label={itemLabel}\n      aria-describedby={ariaDescribedBy}\n      role={role}\n      aria-disabled={disabled}\n      data-expand={!!items}\n      tabIndex={-1}\n      disabled={disabled}\n      onMouseDown={(e: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n        e.preventDefault();\n      }}\n      onClick={(e: MouseEvent<AcceptedMouseEventElement>) => {\n        if (disabled) {\n          return;\n        }\n        /** Announce only on keyboard selection since mouse selection will automatically detect and act on the DOM aria attribute changes */\n        if (e.detail === 0 && selected !== undefined) {\n          announcePolite({\n            /** selected is still not updated so putting the reverse logic. */\n            message: !selected ? t('selected_noun', [primary]) : t('unselected_noun', [primary]),\n            type: 'acknowledgement'\n          });\n        }\n        return items && typeof selected !== 'boolean' ? expandHandler(e) : clickHandler(e);\n      }}\n      onMouseEnter={menuVariant === 'flyout' ? expandHandler : undefined}\n      href={href}\n      mode={mode}\n      isParentItem={!!items}\n      aria-selected={!!selected}\n      selectableParent={selectableParent}\n    >\n      {selectionMode && (!items || selectableParent) && (\n        <Icon as={StyledCheckMarkIcon} name='check' />\n      )}\n\n      {href && !selectionMode ? (\n        <BareButton href={href} tabIndex='-1'>\n          {summaryItem}\n        </BareButton>\n      ) : (\n        summaryItem\n      )}\n    </Flex>\n  );\n};\n\nexport default MenuItem;\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"MultiStepForm.d.ts","sourceRoot":"","sources":["../../../src/components/MultiStepForm/MultiStepForm.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAsC,MAAM,OAAO,CAAC;AAI1F,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAU3C,OAAO,kBAAkB,MAAM,uBAAuB,CAAC;AAIvD,eAAO,MAAM,UAAU,0GAWrB,CAAC;AAEH,eAAO,MAAM,iBAAiB,yGAAe,CAAC;AAE9C,eAAO,MAAM,yBAAyB,iKAqBpC,CAAC;AAIH,eAAO,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,GAAG,YAAY,CA4H9E,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"MultiStepForm.d.ts","sourceRoot":"","sources":["../../../src/components/MultiStepForm/MultiStepForm.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAsC,MAAM,OAAO,CAAC;AAI1F,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAU3C,OAAO,kBAAkB,MAAM,uBAAuB,CAAC;AAIvD,eAAO,MAAM,UAAU,0GAAgB,CAAC;AAExC,eAAO,MAAM,iBAAiB,yGAAe,CAAC;AAE9C,eAAO,MAAM,yBAAyB,iKAqBpC,CAAC;AAIH,eAAO,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,GAAG,YAAY,CA4H9E,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/lib/components/MultiStepForm/MultiStepForm.js

@@ -12,16 +12,7 @@ import Grid from '../Grid';
 import { defaultThemeProp } from '../../theme';
 import VerticalFormProgress from './VerticalFormProgress';
 import HorizontalFormProgress from './HorizontalFormProgress';
-export const StyledForm = styled.form(({ theme }) => {
-    const { base: { spacing } } = theme;
-    return css `
-    height: 100%;
-    width: 100%;
-    flex-grow: 1;
-    overflow-y: auto;
-    padding: ${spacing};
-  `;
-});
+export const StyledForm = styled.form ``;
 export const StyledFormContent = styled.div ``;
 export const StyledRequiredFieldLegend = styled(Text)(({ theme }) => {
     const { base: { 'font-size': fontSize, 'font-scale': fontScale, palette: { urgent } } } = theme;

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, FunctionComponent, PropsWithoutRef, useRef, useEffect } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { useUID, useI18n, usePrevious, useBreakpoint, useTheme } from '../../hooks';\nimport { ForwardProps } from '../../types';\nimport { getFocusables } from '../../utils';\nimport { calculateFontSize } from '../../styles';\nimport Flex from '../Flex';\nimport Text from '../Text';\nimport HTML from '../HTML';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\nimport Grid from '../Grid';\nimport { defaultThemeProp } from '../../theme';\n\nimport MultiStepFormProps from './MultiStepForm.types';\nimport VerticalFormProgress from './VerticalFormProgress';\nimport HorizontalFormProgress from './HorizontalFormProgress';\n\nexport const StyledForm = styled.form(({ theme }) => {\n  const {\n    base: { spacing }\n  } = theme;\n  return css`\n    height: 100%;\n    width: 100%;\n    flex-grow: 1;\n    overflow-y: auto;\n    padding: ${spacing};\n  `;\n});\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: FunctionComponent<MultiStepFormProps & ForwardProps> = forwardRef(\n  (\n    {\n      currentStepId,\n      steps,\n      heading,\n      stepIndicator: stepIndicatorProp = steps.length < 2 ? 'none' : 'horizontal',\n      ...restProps\n    }: PropsWithoutRef<MultiStepFormProps>,\n    ref: MultiStepFormProps['ref']\n  ) => {\n    const multiStepContentRef = useRef(null);\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    useEffect(() => {\n      if (previousId === undefined) return;\n\n      if (previousId !== currentStepId) {\n        const focusableElements = getFocusables(multiStepContentRef);\n\n        if (focusableElements.length) focusableElements[0].focus();\n      }\n    }, [currentStepId, previousId]);\n\n    const isSmallOrAbove = useBreakpoint('sm');\n\n    const stepIndicator =\n      stepIndicatorProp === 'vertical' && !isSmallOrAbove ? 'horizontal' : stepIndicatorProp;\n\n    let areaDef = '';\n    switch (stepIndicator) {\n      case 'horizontal':\n        if (heading) areaDef += '\"heading\" ';\n        areaDef += '\"stepIndicator\" \"content\"';\n        if (currentStep.actions) areaDef += ' \"actions\"';\n        break;\n      case 'vertical':\n        if (heading) areaDef += '\"heading stepIndicator\" ';\n        areaDef += '\"content stepIndicator\"';\n        if (currentStep.actions) areaDef += ' \"actions actions\"';\n        break;\n      default:\n        if (heading) areaDef += '\"heading\" ';\n        areaDef += '\"content\"';\n        if (currentStep.actions) areaDef += ' \"actions\"';\n    }\n\n    return (\n      <Grid\n        ref={ref}\n        as={StyledForm}\n        {...restProps}\n        container={{\n          cols:\n            stepIndicator === 'vertical' ? `2fr minmax(${contentWidth.xs}, 1fr)` : 'minmax(0, 1fr)',\n          areas: areaDef,\n          gap: 3\n        }}\n        aria-labelledby={heading ? headingId : undefined}\n        aria-describedby={currentStep.description ? descriptionId : undefined}\n      >\n        {(heading || steps.length > 1) && (\n          <>\n            {heading && (\n              <Grid item={{ area: 'heading' }}>\n                <Text id={headingId} variant='h3'>\n                  {heading}\n                </Text>\n              </Grid>\n            )}\n            {steps.length > 1 && (\n              <>\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              </>\n            )}\n          </>\n        )}\n\n        <Grid item={{ area: 'content' }} container={{ gap: 3 }}>\n          {currentStep.banners}\n\n          {currentStep.description && (\n            <HTML id={descriptionId} as='p' content={currentStep.description} />\n          )}\n\n          <StyledFormContent ref={multiStepContentRef}>{currentStep.content}</StyledFormContent>\n        </Grid>\n        {currentStep.actions && (\n          <Grid item={{ area: 'actions' }}>\n            <Flex container={{ justify: 'between', alignItems: 'center' }}>\n              {currentStep.actions}\n            </Flex>\n          </Grid>\n        )}\n      </Grid>\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, FunctionComponent, PropsWithoutRef, useRef, useEffect } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { useUID, useI18n, usePrevious, useBreakpoint, useTheme } from '../../hooks';\nimport { ForwardProps } from '../../types';\nimport { getFocusables } from '../../utils';\nimport { calculateFontSize } from '../../styles';\nimport Flex from '../Flex';\nimport Text from '../Text';\nimport HTML from '../HTML';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\nimport Grid from '../Grid';\nimport { defaultThemeProp } from '../../theme';\n\nimport MultiStepFormProps from './MultiStepForm.types';\nimport VerticalFormProgress from './VerticalFormProgress';\nimport HorizontalFormProgress from './HorizontalFormProgress';\n\nexport const StyledForm = styled.form``;\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: FunctionComponent<MultiStepFormProps & ForwardProps> = forwardRef(\n  (\n    {\n      currentStepId,\n      steps,\n      heading,\n      stepIndicator: stepIndicatorProp = steps.length < 2 ? 'none' : 'horizontal',\n      ...restProps\n    }: PropsWithoutRef<MultiStepFormProps>,\n    ref: MultiStepFormProps['ref']\n  ) => {\n    const multiStepContentRef = useRef(null);\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    useEffect(() => {\n      if (previousId === undefined) return;\n\n      if (previousId !== currentStepId) {\n        const focusableElements = getFocusables(multiStepContentRef);\n\n        if (focusableElements.length) focusableElements[0].focus();\n      }\n    }, [currentStepId, previousId]);\n\n    const isSmallOrAbove = useBreakpoint('sm');\n\n    const stepIndicator =\n      stepIndicatorProp === 'vertical' && !isSmallOrAbove ? 'horizontal' : stepIndicatorProp;\n\n    let areaDef = '';\n    switch (stepIndicator) {\n      case 'horizontal':\n        if (heading) areaDef += '\"heading\" ';\n        areaDef += '\"stepIndicator\" \"content\"';\n        if (currentStep.actions) areaDef += ' \"actions\"';\n        break;\n      case 'vertical':\n        if (heading) areaDef += '\"heading stepIndicator\" ';\n        areaDef += '\"content stepIndicator\"';\n        if (currentStep.actions) areaDef += ' \"actions actions\"';\n        break;\n      default:\n        if (heading) areaDef += '\"heading\" ';\n        areaDef += '\"content\"';\n        if (currentStep.actions) areaDef += ' \"actions\"';\n    }\n\n    return (\n      <Grid\n        ref={ref}\n        as={StyledForm}\n        {...restProps}\n        container={{\n          cols:\n            stepIndicator === 'vertical' ? `2fr minmax(${contentWidth.xs}, 1fr)` : 'minmax(0, 1fr)',\n          areas: areaDef,\n          gap: 3\n        }}\n        aria-labelledby={heading ? headingId : undefined}\n        aria-describedby={currentStep.description ? descriptionId : undefined}\n      >\n        {(heading || steps.length > 1) && (\n          <>\n            {heading && (\n              <Grid item={{ area: 'heading' }}>\n                <Text id={headingId} variant='h3'>\n                  {heading}\n                </Text>\n              </Grid>\n            )}\n            {steps.length > 1 && (\n              <>\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              </>\n            )}\n          </>\n        )}\n\n        <Grid item={{ area: 'content' }} container={{ gap: 3 }}>\n          {currentStep.banners}\n\n          {currentStep.description && (\n            <HTML id={descriptionId} as='p' content={currentStep.description} />\n          )}\n\n          <StyledFormContent ref={multiStepContentRef}>{currentStep.content}</StyledFormContent>\n        </Grid>\n        {currentStep.actions && (\n          <Grid item={{ area: 'actions' }}>\n            <Flex container={{ justify: 'between', alignItems: 'center' }}>\n              {currentStep.actions}\n            </Flex>\n          </Grid>\n        )}\n      </Grid>\n    );\n  }\n);\n\nexport default MultiStepForm;\n"]}

package/lib/components/SummaryList/SummaryList.js

@@ -53,7 +53,7 @@ const SummaryList = forwardRef(({ icon, name, count, actions, items, onViewAll,
         }
         return items.length > 0 ? (_jsx(SummaryListItems, { name: name, items: items })) : (_jsx(EmptyState, { message: noItemsText }));
     }, [loading, items, noItemsText, error]);
-    return (_jsxs(Card, { ref: ref, ...restProps, children: [(icon || name || typeof count === 'number' || actions) && (_jsxs(CardHeader, { children: [_jsxs(Flex, { container: { alignItems: 'center', gap: 1 }, children: [icon && _jsx(Icon, { name: icon }), name && _jsx(Text, { variant: 'h2', children: name }), typeof count === 'number' && _jsx(Count, { children: count })] }), actions && _jsx(Actions, { items: actions })] })), _jsx(StyledSummaryListContent, { loading: loading, children: content }), !error && typeof count === 'number' && count > items.length && onViewAll && (_jsx(CardFooter, { justify: 'center', children: _jsx(Button, { variant: 'link', "aria-label": name ? t('view_all_noun', [name.toLowerCase()]) : t('view_all'), onClick: onViewAll, children: t('view_all') }) }))] }));
+    return (_jsxs(Card, { ref: ref, ...restProps, children: [(icon || name || typeof count === 'number' || actions) && (_jsxs(CardHeader, { children: [_jsxs(Flex, { container: { alignItems: 'center', gap: 1 }, children: [icon && _jsx(Icon, { name: icon }), name && _jsx(Text, { variant: 'h2', children: name }), typeof count === 'number' && _jsx(Count, { children: count })] }), actions && _jsx(Actions, { items: actions, contextualLabel: name })] })), _jsx(StyledSummaryListContent, { loading: loading, children: content }), !error && typeof count === 'number' && count > items.length && onViewAll && (_jsx(CardFooter, { justify: 'center', children: _jsx(Button, { variant: 'link', "aria-label": name ? t('view_all_noun', [name.toLowerCase()]) : t('view_all'), onClick: onViewAll, children: t('view_all') }) }))] }));
 });
 export default SummaryList;
 //# sourceMappingURL=SummaryList.js.map

package/lib/components/SummaryList/SummaryList.js.map

@@ -1 +1 @@
-{"version":3,"file":"SummaryList.js","sourceRoot":"","sources":["../../../src/components/SummaryList/SummaryList.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, PropsWithoutRef, Ref, FC, useMemo } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Actions, { ActionsProps } from '../Actions';\nimport Flex from '../Flex';\nimport Text from '../Text';\nimport Count from '../Badges/Count';\nimport Icon from '../Icon';\nimport Card, { CardHeader, CardContent, CardFooter } from '../Card';\nimport EmptyState, { EmptyStateProps } from '../EmptyState';\nimport { ForwardProps, NoChildrenProp, OmitStrict, Action } from '../../types';\nimport { omitProps } from '../../styles';\nimport { useI18n } from '../../hooks';\nimport { defaultThemeProp } from '../../theme';\nimport SummaryItem, { SummaryItemProps } from '../SummaryItem';\nimport Progress from '../Progress';\nimport Button from '../Button';\nimport ErrorState from '../ErrorState';\nimport type { ErrorStateProps } from '../ErrorState';\n\nexport interface SummaryListProps extends NoChildrenProp {\n  /** Name of the utility to be used as its heading along with associated actions and aria attributes. */\n  name?: string;\n  /** Identifier for the icon within Pega icons. */\n  icon?: string;\n  /** Integer representing the total count of items for a list utility dataset. */\n  count?: number;\n  /** Top level actions for the utility. If more than one action is passed a consolidated ActionMenu will be generated. */\n  actions?: Action[];\n  /** If the utility is in a state of fetching data. */\n  loading?: boolean | string;\n  /** An array of SummaryListItem objects to render. Pass an appropriately limited length array with a desired sort order based on design system defaults or config. */\n  items: SummaryListItem[];\n  /** User click initiated callback for when to show view all modal. List lengths less than the count prop will display a \"View all\" button with this function is bound to. */\n  onViewAll?: (callback: Function) => void;\n  /** A simple message to display when there are no items. */\n  noItemsText?: EmptyStateProps['message'];\n  /**\n   * Indicate an error occurred while acquiring data for the list.\n   * The default error state may be overridden with custom props.\n   */\n  error?: boolean | ErrorStateProps;\n  /** Ref for the SummaryList's root element. */\n  ref?: Ref<HTMLElement>;\n}\n\nexport interface SummaryListItem\n  extends OmitStrict<SummaryItemProps, 'actions'>,\n    Pick<ActionsProps, 'contextualLabel'>,\n    ForwardProps {\n  /** A unique id to represent the item. */\n  id: string;\n  /** A set of Actions to render alongside the item. If more than one action is passed a consolidated ActionMenu will be generated. */\n  actions?: Action[];\n}\n\nexport const StyledSummaryListContent = styled(CardContent).withConfig<{ loading?: boolean }>(\n  omitProps('loading')\n)(\n  ({ theme, loading }) => css`\n    ${loading &&\n    css`\n      min-height: 4rem;\n    `}\n\n    &:not(:last-child) > ul > li:last-child {\n      border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};\n    }\n  `\n);\n\nStyledSummaryListContent.defaultProps = defaultThemeProp;\n\nexport const StyledSummaryListItem: typeof SummaryItem = styled(SummaryItem)(\n  ({ theme }) =>\n    css`\n      padding: ${theme.base.spacing} 0;\n\n      &:not(:last-child) {\n        border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};\n      }\n    `\n);\n\nStyledSummaryListItem.defaultProps = defaultThemeProp;\n\nexport const SummaryListItems = ({ name, items }: Pick<SummaryListProps, 'items' | 'name'>) => {\n  const t = useI18n();\n  return (\n    <ul>\n      {items.map(({ id, actions: itemActions, contextualLabel, ...restItemProps }) => {\n        return (\n          <StyledSummaryListItem\n            key={id}\n            {...restItemProps}\n            forwardedAs='li'\n            actions={\n              itemActions && (\n                <Actions\n                  items={itemActions}\n                  contextualLabel={\n                    name && contextualLabel\n                      ? t('action_from_summarylist_heading', [contextualLabel, name])\n                      : contextualLabel\n                  }\n                />\n              )\n            }\n          />\n        );\n      })}\n    </ul>\n  );\n};\n\nconst SummaryList: FC<SummaryListProps & ForwardProps> = forwardRef(\n  (\n    {\n      icon,\n      name,\n      count,\n      actions,\n      items,\n      onViewAll,\n      loading,\n      noItemsText,\n      error,\n      ...restProps\n    }: PropsWithoutRef<SummaryListProps>,\n    ref: SummaryListProps['ref']\n  ) => {\n    const t = useI18n();\n\n    const content = useMemo(() => {\n      if (loading) {\n        return (\n          <Progress placement='local' message={typeof loading === 'string' ? loading : undefined} />\n        );\n      }\n\n      if (error) {\n        return <ErrorState {...(error === true ? {} : error)} />;\n      }\n\n      return items.length > 0 ? (\n        <SummaryListItems name={name} items={items} />\n      ) : (\n        <EmptyState message={noItemsText} />\n      );\n    }, [loading, items, noItemsText, error]);\n\n    return (\n      <Card ref={ref} {...restProps}>\n        {(icon || name || typeof count === 'number' || actions) && (\n          <CardHeader>\n            <Flex container={{ alignItems: 'center', gap: 1 }}>\n              {icon && <Icon name={icon} />}\n              {name && <Text variant='h2'>{name}</Text>}\n              {typeof count === 'number' && <Count>{count}</Count>}\n            </Flex>\n            {actions && <Actions items={actions} />}\n          </CardHeader>\n        )}\n\n        <StyledSummaryListContent loading={loading}>{content}</StyledSummaryListContent>\n\n        {!error && typeof count === 'number' && count > items.length && onViewAll && (\n          <CardFooter justify='center'>\n            <Button\n              variant='link'\n              aria-label={name ? t('view_all_noun', [name.toLowerCase()]) : t('view_all')}\n              onClick={onViewAll}\n            >\n              {t('view_all')}\n            </Button>\n          </CardFooter>\n        )}\n      </Card>\n    );\n  }\n);\n\nexport default SummaryList;\n"]}
+{"version":3,"file":"SummaryList.js","sourceRoot":"","sources":["../../../src/components/SummaryList/SummaryList.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, PropsWithoutRef, Ref, FC, useMemo } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Actions, { ActionsProps } from '../Actions';\nimport Flex from '../Flex';\nimport Text from '../Text';\nimport Count from '../Badges/Count';\nimport Icon from '../Icon';\nimport Card, { CardHeader, CardContent, CardFooter } from '../Card';\nimport EmptyState, { EmptyStateProps } from '../EmptyState';\nimport { ForwardProps, NoChildrenProp, OmitStrict, Action } from '../../types';\nimport { omitProps } from '../../styles';\nimport { useI18n } from '../../hooks';\nimport { defaultThemeProp } from '../../theme';\nimport SummaryItem, { SummaryItemProps } from '../SummaryItem';\nimport Progress from '../Progress';\nimport Button from '../Button';\nimport ErrorState from '../ErrorState';\nimport type { ErrorStateProps } from '../ErrorState';\n\nexport interface SummaryListProps extends NoChildrenProp {\n  /** Name of the utility to be used as its heading along with associated actions and aria attributes. */\n  name?: string;\n  /** Identifier for the icon within Pega icons. */\n  icon?: string;\n  /** Integer representing the total count of items for a list utility dataset. */\n  count?: number;\n  /** Top level actions for the utility. If more than one action is passed a consolidated ActionMenu will be generated. */\n  actions?: Action[];\n  /** If the utility is in a state of fetching data. */\n  loading?: boolean | string;\n  /** An array of SummaryListItem objects to render. Pass an appropriately limited length array with a desired sort order based on design system defaults or config. */\n  items: SummaryListItem[];\n  /** User click initiated callback for when to show view all modal. List lengths less than the count prop will display a \"View all\" button with this function is bound to. */\n  onViewAll?: (callback: Function) => void;\n  /** A simple message to display when there are no items. */\n  noItemsText?: EmptyStateProps['message'];\n  /**\n   * Indicate an error occurred while acquiring data for the list.\n   * The default error state may be overridden with custom props.\n   */\n  error?: boolean | ErrorStateProps;\n  /** Ref for the SummaryList's root element. */\n  ref?: Ref<HTMLElement>;\n}\n\nexport interface SummaryListItem\n  extends OmitStrict<SummaryItemProps, 'actions'>,\n    Pick<ActionsProps, 'contextualLabel'>,\n    ForwardProps {\n  /** A unique id to represent the item. */\n  id: string;\n  /** A set of Actions to render alongside the item. If more than one action is passed a consolidated ActionMenu will be generated. */\n  actions?: Action[];\n}\n\nexport const StyledSummaryListContent = styled(CardContent).withConfig<{ loading?: boolean }>(\n  omitProps('loading')\n)(\n  ({ theme, loading }) => css`\n    ${loading &&\n    css`\n      min-height: 4rem;\n    `}\n\n    &:not(:last-child) > ul > li:last-child {\n      border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};\n    }\n  `\n);\n\nStyledSummaryListContent.defaultProps = defaultThemeProp;\n\nexport const StyledSummaryListItem: typeof SummaryItem = styled(SummaryItem)(\n  ({ theme }) =>\n    css`\n      padding: ${theme.base.spacing} 0;\n\n      &:not(:last-child) {\n        border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};\n      }\n    `\n);\n\nStyledSummaryListItem.defaultProps = defaultThemeProp;\n\nexport const SummaryListItems = ({ name, items }: Pick<SummaryListProps, 'items' | 'name'>) => {\n  const t = useI18n();\n  return (\n    <ul>\n      {items.map(({ id, actions: itemActions, contextualLabel, ...restItemProps }) => {\n        return (\n          <StyledSummaryListItem\n            key={id}\n            {...restItemProps}\n            forwardedAs='li'\n            actions={\n              itemActions && (\n                <Actions\n                  items={itemActions}\n                  contextualLabel={\n                    name && contextualLabel\n                      ? t('action_from_summarylist_heading', [contextualLabel, name])\n                      : contextualLabel\n                  }\n                />\n              )\n            }\n          />\n        );\n      })}\n    </ul>\n  );\n};\n\nconst SummaryList: FC<SummaryListProps & ForwardProps> = forwardRef(\n  (\n    {\n      icon,\n      name,\n      count,\n      actions,\n      items,\n      onViewAll,\n      loading,\n      noItemsText,\n      error,\n      ...restProps\n    }: PropsWithoutRef<SummaryListProps>,\n    ref: SummaryListProps['ref']\n  ) => {\n    const t = useI18n();\n\n    const content = useMemo(() => {\n      if (loading) {\n        return (\n          <Progress placement='local' message={typeof loading === 'string' ? loading : undefined} />\n        );\n      }\n\n      if (error) {\n        return <ErrorState {...(error === true ? {} : error)} />;\n      }\n\n      return items.length > 0 ? (\n        <SummaryListItems name={name} items={items} />\n      ) : (\n        <EmptyState message={noItemsText} />\n      );\n    }, [loading, items, noItemsText, error]);\n\n    return (\n      <Card ref={ref} {...restProps}>\n        {(icon || name || typeof count === 'number' || actions) && (\n          <CardHeader>\n            <Flex container={{ alignItems: 'center', gap: 1 }}>\n              {icon && <Icon name={icon} />}\n              {name && <Text variant='h2'>{name}</Text>}\n              {typeof count === 'number' && <Count>{count}</Count>}\n            </Flex>\n            {actions && <Actions items={actions} contextualLabel={name} />}\n          </CardHeader>\n        )}\n\n        <StyledSummaryListContent loading={loading}>{content}</StyledSummaryListContent>\n\n        {!error && typeof count === 'number' && count > items.length && onViewAll && (\n          <CardFooter justify='center'>\n            <Button\n              variant='link'\n              aria-label={name ? t('view_all_noun', [name.toLowerCase()]) : t('view_all')}\n              onClick={onViewAll}\n            >\n              {t('view_all')}\n            </Button>\n          </CardFooter>\n        )}\n      </Card>\n    );\n  }\n);\n\nexport default SummaryList;\n"]}

package/lib/i18n/default.js

@@ -19,7 +19,7 @@ export default {
     opens_in_a_new_tab: 'Opens in a new tab',
     summary: 'Summary',
     utilities: 'Utilities',
-    search: 'search',
+    search: 'Search',
     menu: 'menu',
     new: 'New',
     info: 'info',