@pega/cosmos-react-core 7.0.0-build.22.2 → 7.0.0-build.22.20

package/lib/components/Button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useRef, useEffect, forwardRef } from 'react';\nimport type {\n  FunctionComponent,\n  ReactNode,\n  PropsWithoutRef,\n  Ref,\n  MouseEvent,\n  MouseEventHandler\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport type { DefaultTheme } from 'styled-components';\nimport { meetsContrastGuidelines, mix } from 'polished';\n\nimport type { BaseProps, ForwardProps, PropsWithDefaults, AsProp } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch } from '../../utils';\nimport {\n  getActiveColors,\n  getHoverColors,\n  omitProps,\n  readableColor,\n  readableHue\n} from '../../styles';\nimport { useElement, useConsolidatedRef } from '../../hooks';\nimport Tooltip from '../Tooltip';\nimport Progress, { StyledProgressRing } from '../Progress';\nimport { StyledBackdrop } from '../Backdrop';\nimport { StyledIcon } from '../Icon';\nimport { StyledPopover } from '../Popover';\n\nexport interface ButtonProps extends BaseProps, AsProp {\n  /** Text or content for the Button. */\n  children: ReactNode;\n  /**\n   * Determines if the Button will be disabled.\n   * @default false\n   */\n  disabled?: boolean;\n  /** A location to navigate to. Passing an href will render an anchor styled as a Button. */\n  href?: string;\n  /**\n   * Controls the styling of the Button.\n   * @default 'secondary'\n   */\n  variant?: 'primary' | 'secondary' | 'simple' | 'link' | 'text';\n  /**\n   * Controls the behavior of a Button within a Form.\n   * @default 'button'\n   */\n  type?: 'button' | 'reset' | 'submit';\n  /**\n   * Set the Icon prop to `true` if you're using just an Icon in your Button. Make sure to pass an Icon as children if `true`.\n   * @default false\n   */\n  icon?: boolean;\n  /**\n   * Used for a smaller sized button.\n   * @default false\n   */\n  compact?: boolean;\n  /** The label text will be used inside a Tooltip. */\n  label?: string;\n  /** The aria label text will be inserted as the aria-label on the Button. */\n  'aria-label'?: string;\n  /**\n   * Optionally renders an indeterminate progress indicator in a button.\n   * @default false\n   */\n  loading?: boolean;\n  /** Ref forwarded to the wrapping element. */\n  ref?: Ref<HTMLButtonElement>;\n}\n\ntype ButtonPropsWithDefaults = PropsWithDefaults<\n  ButtonProps,\n  'variant' | 'type' | 'disabled' | 'icon' | 'loading'\n>;\n\nconst baseStyles = (theme: DefaultTheme) => {\n  const {\n    base: {\n      spacing,\n      animation: {\n        speed,\n        timing: { ease }\n      },\n      'disabled-opacity': disabledOpacity\n    },\n    components: {\n      button: { 'focus-shadow': focusShadow }\n    }\n  } = theme;\n\n  return css`\n    outline: none;\n    text-decoration: none;\n    transition-property: background-color, color, border-color, box-shadow, translate;\n    transition-duration: calc(0.5 * ${speed});\n    transition-timing-function: ${ease};\n    cursor: pointer;\n\n    & + & {\n      margin-inline-start: ${spacing};\n    }\n\n    /* Not able to combine with selector above. Stylis bug? */\n    & + ${StyledPopover} + & {\n      margin-inline-start: ${spacing};\n    }\n\n    &:disabled,\n    &[disabled] {\n      opacity: ${disabledOpacity};\n      cursor: not-allowed;\n      pointer-events: none;\n    }\n\n    &:enabled:focus,\n    &:not([disabled]):focus {\n      box-shadow: ${focusShadow};\n    }\n  `;\n};\n\nexport const StyledButton = styled.button.withConfig<ButtonPropsWithDefaults>(omitProps('loading'))(\n  ({ variant, icon, loading, compact, theme }) => {\n    const {\n      base: {\n        spacing,\n        'border-radius': baseBorderRadius,\n        palette: { 'primary-background': backgroundColor },\n        'hit-area': {\n          'mouse-min': hitAreaMouse,\n          'finger-min': hitAreaFinger,\n          'compact-min': hitAreaCompact\n        },\n        animation: {\n          speed,\n          timing: { ease }\n        }\n      },\n      components: {\n        button: {\n          color,\n          'secondary-color': secondaryColor,\n          padding,\n          'border-radius': borderRadius,\n          'border-width': borderWidth,\n          touch: { padding: touchPadding }\n        }\n      }\n    } = theme;\n    const contrastColor = tryCatch(() => readableColor(color));\n\n    // Base\n    const base = baseStyles(theme);\n\n    // Non-text base\n    const nonTextual = css`\n      position: relative;\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      min-height: ${hitAreaMouse};\n      min-width: ${hitAreaMouse};\n      border: ${borderWidth} solid transparent;\n      border-radius: calc(${baseBorderRadius} * ${borderRadius});\n      -webkit-user-select: none;\n      user-select: none;\n\n      ${!icon &&\n      css`\n        padding: ${padding};\n      `}\n\n      ${icon &&\n      css`\n        border-radius: calc(${baseBorderRadius} * ${borderRadius});\n\n        > svg {\n          display: block;\n        }\n      `}\n\n      ${compact &&\n      css`\n        min-height: ${hitAreaCompact};\n        min-width: ${hitAreaCompact};\n      `}\n\n      @media (pointer: coarse) {\n        border-radius: calc(${baseBorderRadius} * ${borderRadius});\n\n        ${!compact &&\n        css`\n          min-height: ${hitAreaFinger};\n          min-width: ${hitAreaFinger};\n        `}\n\n        ${!icon &&\n        css`\n          padding: ${touchPadding};\n        `}\n      }\n\n      &:active {\n        translate: 0 0.0625rem;\n      }\n\n      &::after {\n        content: '';\n        position: absolute;\n        inset: calc(-1 * ${borderWidth});\n        border-radius: calc(${baseBorderRadius} * ${borderRadius});\n        transition: translate calc(0.5 * ${speed}) ${ease};\n      }\n\n      &:active::after {\n        translate: 0 -0.0625rem;\n      }\n    `;\n\n    // Primary\n    const hoverColors = getHoverColors(color);\n    const activeColors = getActiveColors(color);\n    const primary = css`\n      --button-background-color: ${color};\n      color: ${contrastColor};\n      background-color: ${color};\n\n      @media (hover: hover) {\n        &:hover {\n          background-color: ${hoverColors.background};\n          color: ${hoverColors.foreground};\n          text-decoration: none;\n        }\n      }\n\n      &:active {\n        background-color: ${activeColors.background};\n        color: ${activeColors.foreground};\n        text-decoration: none;\n      }\n    `;\n\n    // Secondary\n    const backgroundUsable = meetsContrastGuidelines(color, secondaryColor).AA;\n    const usableColor = backgroundUsable ? color : readableHue(color, secondaryColor);\n    const secondaryHoverBackgroundColor = tryCatch(() => mix(0.9, secondaryColor, usableColor));\n    const secondaryHoverForegroundColor = readableHue(\n      usableColor,\n      secondaryHoverBackgroundColor ?? 'transparent'\n    );\n    const secondaryActiveBackgroundColor = tryCatch(() => mix(0.8, secondaryColor, usableColor));\n    const secondaryActiveForegroundColor = readableHue(\n      usableColor,\n      secondaryActiveBackgroundColor ?? 'transparent'\n    );\n    const secondary = css`\n      --button-background-color: ${secondaryColor};\n      color: ${usableColor};\n      background-color: ${secondaryColor};\n      border-color: ${usableColor};\n\n      @media (hover: hover) {\n        &:hover {\n          color: ${secondaryHoverForegroundColor};\n          background-color: ${secondaryHoverBackgroundColor};\n          text-decoration: none;\n          border-color: ${secondaryHoverForegroundColor};\n        }\n      }\n\n      &:active {\n        color: ${secondaryActiveForegroundColor};\n        background-color: ${secondaryActiveBackgroundColor};\n        border-color: ${secondaryActiveForegroundColor};\n        text-decoration: none;\n      }\n    `;\n\n    // Simple\n    const simple = css`\n      --button-background-color: ${icon ? 'transparent' : backgroundColor};\n      color: ${icon ? 'currentColor' : usableColor};\n      background-color: ${icon ? 'transparent' : backgroundColor};\n\n      @media (hover: hover) {\n        &:hover {\n          ${icon &&\n          css`\n            ::before {\n              content: '';\n              position: absolute;\n              top: calc(${borderWidth} * -1);\n              bottom: calc(${borderWidth} * -1);\n              left: calc(${borderWidth} * -1);\n              right: calc(${borderWidth} * -1);\n              border-radius: inherit;\n              background-color: currentColor;\n              opacity: 0.1;\n            }\n          `}\n\n          ${!icon &&\n          css`\n            background-color: ${secondaryHoverBackgroundColor};\n            color: ${secondaryHoverForegroundColor};\n            border-color: ${secondaryHoverForegroundColor};\n            text-decoration: none;\n          `}\n        }\n\n        &:active {\n          ${icon &&\n          css`\n            ::before {\n              content: '';\n              position: absolute;\n              top: calc(${borderWidth} * -1);\n              bottom: calc(${borderWidth} * -1);\n              left: calc(${borderWidth} * -1);\n              right: calc(${borderWidth} * -1);\n              border-radius: inherit;\n              background-color: currentColor;\n              opacity: 0.2;\n            }\n          `}\n\n          ${!icon &&\n          css`\n            background-color: ${secondaryActiveBackgroundColor};\n            color: ${secondaryActiveForegroundColor};\n            border-color: ${secondaryActiveForegroundColor};\n            text-decoration: none;\n          `}\n        }\n      }\n    `;\n\n    return css`\n      ${base}\n      ${nonTextual}\n      ${variant === 'primary' && primary}\n      ${variant === 'secondary' && secondary}\n      ${variant === 'simple' && simple}\n\n      ${loading &&\n      css`\n        ${StyledBackdrop} {\n          background-color: var(--button-background-color);\n          border-radius: inherit;\n        }\n\n        ${StyledProgressRing} {\n          width: 1em;\n          height: 1em;\n\n          ${!icon &&\n          css`\n            margin-inline-end: calc(${spacing} / 2);\n          `}\n\n          circle:nth-child(2) {\n            animation-duration: calc(${speed} * 2);\n          }\n        }\n      `}\n    `;\n  }\n);\n\nStyledButton.defaultProps = defaultThemeProp;\n\nexport const StyledButtonLink = styled.a.withConfig<\n  Pick<ButtonPropsWithDefaults, 'variant'> &\n    // Needed for omitProps\n    Pick<ButtonProps, 'loading'>\n>(omitProps('loading'))(({ theme, variant }) => {\n  const {\n    base: {\n      palette: { 'foreground-color': textColor }\n    },\n    components: {\n      link: { color: linkColor }\n    }\n  } = theme;\n\n  const base = baseStyles(theme);\n\n  const textual = css`\n    background-color: transparent;\n    display: inline;\n    text-align: start;\n    border: none;\n\n    @media (hover: hover) {\n      &:hover {\n        text-decoration: underline;\n      }\n    }\n\n    > ${StyledIcon} {\n      vertical-align: bottom;\n    }\n  `;\n\n  const { background: activeColor } = getActiveColors(linkColor);\n  const link = css`\n    color: ${linkColor};\n\n    &:active {\n      color: ${activeColor};\n    }\n  `;\n\n  const text = css`\n    color: ${textColor};\n  `;\n\n  return css`\n    ${base}\n    ${textual}\n      ${variant === 'link' && link}\n      ${variant === 'text' && text}\n  `;\n});\n\nStyledButtonLink.defaultProps = defaultThemeProp;\n\nconst Button: FunctionComponent<ButtonProps & ForwardProps> = forwardRef(function Button(\n  {\n    variant = 'secondary',\n    type = 'button',\n    disabled = false,\n    icon = false,\n    compact = false,\n    href,\n    as,\n    forwardedAs,\n    label,\n    'aria-label': ariaLabel,\n    loading = false,\n    children,\n    ...restProps\n  }: PropsWithoutRef<ButtonProps> & ForwardProps,\n  ref: Ref<HTMLButtonElement>\n) {\n  const [buttonEl, setButtonEl] = useElement();\n  const mouseDownEvent = useRef<MouseEvent>();\n  const buttonRef = useConsolidatedRef<HTMLButtonElement>(ref, setButtonEl);\n  const isTextual = ['link', 'text'].includes(variant);\n  const showProgress = loading && !isTextual;\n  const StyledComp: React.ElementType = isTextual ? StyledButtonLink : StyledButton;\n\n  useEffect(() => {\n    return () => {\n      mouseDownEvent.current = undefined;\n    };\n  }, []);\n\n  return (\n    <>\n      <StyledComp\n        {...restProps}\n        ref={buttonRef}\n        as={as || (href ? 'a' : 'button')}\n        forwardedAs={forwardedAs || (href ? 'a' : 'button')}\n        variant={variant}\n        icon={icon}\n        compact={compact}\n        type={href ? undefined : type}\n        href={href}\n        disabled={disabled && !href}\n        loading={showProgress}\n        aria-label={ariaLabel || label}\n        onMouseDown={(e: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n          (restProps.onMouseDown as MouseEventHandler | undefined)?.(e);\n          e.persist();\n          mouseDownEvent.current = e;\n        }}\n        onMouseUp={(e: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n          const shouldFocus = mouseDownEvent.current && !mouseDownEvent.current.defaultPrevented;\n          mouseDownEvent.current = undefined;\n\n          if (shouldFocus && buttonRef.current !== document.activeElement) {\n            buttonRef.current?.focus();\n          }\n\n          return (restProps.onMouseUp as MouseEventHandler | undefined)?.(e);\n        }}\n      >\n        {showProgress && <Progress variant='ring' placement='inline' />}\n        {!icon || !showProgress ? children : null}\n      </StyledComp>\n\n      {buttonEl && label && (\n        <Tooltip target={buttonEl} showDelay='none' hideDelay='none' describeTarget={false}>\n          {label}\n        </Tooltip>\n      )}\n    </>\n  );\n});\n\nexport default Button;\n"]}
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useRef, useEffect, forwardRef } from 'react';\nimport type {\n  FunctionComponent,\n  ReactNode,\n  PropsWithoutRef,\n  Ref,\n  MouseEvent,\n  MouseEventHandler\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport type { DefaultTheme } from 'styled-components';\nimport { meetsContrastGuidelines, mix } from 'polished';\n\nimport type { BaseProps, ForwardProps, PropsWithDefaults, AsProp } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch } from '../../utils';\nimport {\n  getActiveColors,\n  getHoverColors,\n  omitProps,\n  readableColor,\n  readableHue\n} from '../../styles';\nimport { useElement, useConsolidatedRef } from '../../hooks';\nimport Tooltip from '../Tooltip';\nimport Progress, { StyledProgressRing } from '../Progress';\nimport { StyledBackdrop } from '../Backdrop';\nimport { StyledIcon } from '../Icon';\nimport { StyledPopover } from '../Popover';\n\nexport interface ButtonProps extends BaseProps, AsProp {\n  /** Text or content for the Button. */\n  children: ReactNode;\n  /**\n   * Determines if the Button will be disabled.\n   * @default false\n   */\n  disabled?: boolean;\n  /** A location to navigate to. Passing an href will render an anchor styled as a Button. */\n  href?: string;\n  /**\n   * Controls the styling of the Button.\n   * @default 'secondary'\n   */\n  variant?: 'primary' | 'secondary' | 'simple' | 'link' | 'text';\n  /**\n   * Controls the behavior of a Button within a Form.\n   * @default 'button'\n   */\n  type?: 'button' | 'reset' | 'submit';\n  /**\n   * Set the Icon prop to `true` if you're using just an Icon in your Button. Make sure to pass an Icon as children if `true`.\n   * @default false\n   */\n  icon?: boolean;\n  /**\n   * Used for a smaller sized button.\n   * @default false\n   */\n  compact?: boolean;\n  /** The label text will be used inside a Tooltip. */\n  label?: string;\n  /** The aria label text will be inserted as the aria-label on the Button. */\n  'aria-label'?: string;\n  /**\n   * Optionally renders an indeterminate progress indicator in a button.\n   * @default false\n   */\n  loading?: boolean;\n  /** Ref forwarded to the wrapping element. */\n  ref?: Ref<HTMLButtonElement>;\n}\n\ntype ButtonPropsWithDefaults = PropsWithDefaults<\n  ButtonProps,\n  'variant' | 'type' | 'disabled' | 'icon' | 'loading'\n>;\n\nconst baseStyles = (theme: DefaultTheme) => {\n  const {\n    base: {\n      spacing,\n      animation: {\n        speed,\n        timing: { ease }\n      },\n      'disabled-opacity': disabledOpacity\n    },\n    components: {\n      button: { 'focus-shadow': focusShadow }\n    }\n  } = theme;\n\n  return css`\n    outline: none;\n    text-decoration: none;\n    transition-property: background-color, color, border-color, box-shadow, translate;\n    transition-duration: calc(0.5 * ${speed});\n    transition-timing-function: ${ease};\n    cursor: pointer;\n\n    & + & {\n      margin-inline-start: ${spacing};\n    }\n\n    /* Not able to combine with selector above. Stylis bug? */\n    & + ${StyledPopover} + & {\n      margin-inline-start: ${spacing};\n    }\n\n    &:disabled,\n    &[disabled] {\n      opacity: ${disabledOpacity};\n      cursor: not-allowed;\n      pointer-events: none;\n    }\n\n    &:enabled:focus,\n    &:not([disabled]):focus {\n      box-shadow: ${focusShadow};\n    }\n  `;\n};\n\nconst getFilledButtonStyles = (color: string) => ({\n  contrastColor: tryCatch(() => readableColor(color)),\n  hoverColors: getHoverColors(color),\n  activeColors: getActiveColors(color)\n});\n\nconst getOutlinedButtonStyles = (color: string, backgroundColor: string) => {\n  const backgroundUsable = meetsContrastGuidelines(color, backgroundColor).AA;\n  const usableColor = backgroundUsable ? color : readableHue(color, backgroundColor);\n  const hoverBackgroundColor = tryCatch(() => mix(0.9, backgroundColor, usableColor));\n  const activeBackgroundColor = tryCatch(() => mix(0.8, backgroundColor, usableColor));\n\n  return {\n    textColor: backgroundUsable ? color : readableColor(color),\n    hoverBg: hoverBackgroundColor,\n    hoverFg: readableHue(usableColor, hoverBackgroundColor ?? 'transparent'),\n    activeBg: tryCatch(() => mix(0.8, backgroundColor, usableColor)),\n    activeFg: readableHue(usableColor, activeBackgroundColor ?? 'transparent')\n  };\n};\n\nexport const StyledButton = styled.button.withConfig<ButtonPropsWithDefaults>(omitProps('loading'))(\n  ({ variant, icon, loading, compact, theme }) => {\n    const {\n      base: {\n        spacing,\n        'border-radius': baseBorderRadius,\n        palette: { 'primary-background': backgroundColor },\n        'hit-area': {\n          'mouse-min': hitAreaMouse,\n          'finger-min': hitAreaFinger,\n          'compact-min': hitAreaCompact\n        },\n        animation: {\n          speed,\n          timing: { ease }\n        }\n      },\n      components: {\n        button: {\n          color,\n          'secondary-color': secondaryColor,\n          'secondary-fill-style': fillStyle,\n          padding,\n          'border-radius': borderRadius,\n          'border-width': borderWidth,\n          touch: { padding: touchPadding }\n        }\n      }\n    } = theme;\n\n    // Base\n    const base = baseStyles(theme);\n\n    // Non-text base\n    const nonTextual = css`\n      position: relative;\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      min-height: ${hitAreaMouse};\n      min-width: ${hitAreaMouse};\n      border: ${borderWidth} solid transparent;\n      border-radius: calc(${baseBorderRadius} * ${borderRadius});\n      -webkit-user-select: none;\n      user-select: none;\n\n      ${!icon &&\n      css`\n        padding: ${padding};\n      `}\n\n      ${icon &&\n      css`\n        border-radius: calc(${baseBorderRadius} * ${borderRadius});\n\n        > svg {\n          display: block;\n        }\n      `}\n\n      ${compact &&\n      css`\n        min-height: ${hitAreaCompact};\n        min-width: ${hitAreaCompact};\n      `}\n\n      @media (pointer: coarse) {\n        border-radius: calc(${baseBorderRadius} * ${borderRadius});\n\n        ${!compact &&\n        css`\n          min-height: ${hitAreaFinger};\n          min-width: ${hitAreaFinger};\n        `}\n\n        ${!icon &&\n        css`\n          padding: ${touchPadding};\n        `}\n      }\n\n      &:active {\n        translate: 0 0.0625rem;\n      }\n\n      &::after {\n        content: '';\n        position: absolute;\n        inset: calc(-1 * ${borderWidth});\n        border-radius: calc(${baseBorderRadius} * ${borderRadius});\n        transition: translate calc(0.5 * ${speed}) ${ease};\n      }\n\n      &:active::after {\n        translate: 0 -0.0625rem;\n      }\n    `;\n\n    // Primary and Secondary-filled\n    const { contrastColor, hoverColors, activeColors } = getFilledButtonStyles(\n      variant === 'primary' ? color : secondaryColor\n    );\n    const solidButtonStyles = css`\n      --button-background-color: ${variant === 'primary' ? color : secondaryColor};\n      color: ${contrastColor};\n      background-color: ${variant === 'primary' ? color : secondaryColor};\n\n      @media (hover: hover) {\n        &:hover {\n          background-color: ${hoverColors.background};\n          color: ${hoverColors.foreground};\n          text-decoration: none;\n        }\n      }\n\n      &:active {\n        background-color: ${activeColors.background};\n        color: ${activeColors.foreground};\n        text-decoration: none;\n      }\n    `;\n\n    // Secondary-outline\n    const secondaryOutlineButtonStyles = getOutlinedButtonStyles(secondaryColor, backgroundColor);\n    const secondary = css`\n      --button-background-color: ${backgroundColor};\n      color: ${secondaryOutlineButtonStyles.textColor};\n      background-color: ${backgroundColor};\n      border-color: ${secondaryColor};\n\n      @media (hover: hover) {\n        &:hover {\n          color: ${secondaryOutlineButtonStyles.hoverFg};\n          background-color: ${secondaryOutlineButtonStyles.hoverBg};\n          text-decoration: none;\n          border-color: ${secondaryOutlineButtonStyles.hoverFg};\n        }\n      }\n\n      &:active {\n        color: ${secondaryOutlineButtonStyles.activeFg};\n        background-color: ${secondaryOutlineButtonStyles.activeBg};\n        border-color: ${secondaryOutlineButtonStyles.activeFg};\n        text-decoration: none;\n      }\n    `;\n\n    // Simple\n    const simpleButtonStyles = getOutlinedButtonStyles(\n      fillStyle === 'outline' ? secondaryColor : color,\n      backgroundColor\n    );\n    const simple = css`\n      --button-background-color: ${icon ? 'transparent' : backgroundColor};\n      color: ${icon ? 'currentColor' : simpleButtonStyles.textColor};\n      background-color: ${icon ? 'transparent' : backgroundColor};\n\n      @media (hover: hover) {\n        &:hover {\n          ${icon &&\n          css`\n            ::before {\n              content: '';\n              position: absolute;\n              top: calc(${borderWidth} * -1);\n              bottom: calc(${borderWidth} * -1);\n              left: calc(${borderWidth} * -1);\n              right: calc(${borderWidth} * -1);\n              border-radius: inherit;\n              background-color: currentColor;\n              opacity: 0.1;\n            }\n          `}\n\n          ${!icon &&\n          css`\n            background-color: ${simpleButtonStyles.hoverBg};\n            color: ${simpleButtonStyles.hoverFg};\n            border-color: ${simpleButtonStyles.hoverFg};\n            text-decoration: none;\n          `}\n        }\n\n        &:active {\n          ${icon &&\n          css`\n            ::before {\n              content: '';\n              position: absolute;\n              top: calc(${borderWidth} * -1);\n              bottom: calc(${borderWidth} * -1);\n              left: calc(${borderWidth} * -1);\n              right: calc(${borderWidth} * -1);\n              border-radius: inherit;\n              background-color: currentColor;\n              opacity: 0.2;\n            }\n          `}\n\n          ${!icon &&\n          css`\n            background-color: ${simpleButtonStyles.activeBg};\n            color: ${simpleButtonStyles.activeFg};\n            border-color: ${simpleButtonStyles.activeFg};\n            text-decoration: none;\n          `}\n        }\n      }\n    `;\n\n    return css`\n      ${base}\n      ${nonTextual}\n      ${(variant === 'primary' || (variant === 'secondary' && fillStyle === 'fill')) &&\n      solidButtonStyles}\n      ${variant === 'secondary' && fillStyle === 'outline' && secondary}\n      ${variant === 'simple' && simple}\n\n      ${loading &&\n      css`\n        ${StyledBackdrop} {\n          background-color: var(--button-background-color);\n          border-radius: inherit;\n        }\n\n        ${StyledProgressRing} {\n          width: 1em;\n          height: 1em;\n\n          ${!icon &&\n          css`\n            margin-inline-end: calc(${spacing} / 2);\n          `}\n\n          circle:nth-child(2) {\n            animation-duration: calc(${speed} * 2);\n          }\n        }\n      `}\n    `;\n  }\n);\n\nStyledButton.defaultProps = defaultThemeProp;\n\nexport const StyledButtonLink = styled.a.withConfig<\n  Pick<ButtonPropsWithDefaults, 'variant'> &\n    // Needed for omitProps\n    Pick<ButtonProps, 'loading'>\n>(omitProps('loading'))(({ theme, variant }) => {\n  const {\n    base: {\n      palette: { 'foreground-color': textColor }\n    },\n    components: {\n      link: { color: linkColor }\n    }\n  } = theme;\n\n  const base = baseStyles(theme);\n\n  const textual = css`\n    background-color: transparent;\n    display: inline;\n    text-align: start;\n    border: none;\n\n    @media (hover: hover) {\n      &:hover {\n        text-decoration: underline;\n      }\n    }\n\n    > ${StyledIcon} {\n      vertical-align: bottom;\n    }\n  `;\n\n  const { background: activeColor } = getActiveColors(linkColor);\n  const link = css`\n    color: ${linkColor};\n\n    &:active {\n      color: ${activeColor};\n    }\n  `;\n\n  const text = css`\n    color: ${textColor};\n  `;\n\n  return css`\n    ${base}\n    ${textual}\n      ${variant === 'link' && link}\n      ${variant === 'text' && text}\n  `;\n});\n\nStyledButtonLink.defaultProps = defaultThemeProp;\n\nconst Button: FunctionComponent<ButtonProps & ForwardProps> = forwardRef(function Button(\n  {\n    variant = 'secondary',\n    type = 'button',\n    disabled = false,\n    icon = false,\n    compact = false,\n    href,\n    as,\n    forwardedAs,\n    label,\n    'aria-label': ariaLabel,\n    loading = false,\n    children,\n    ...restProps\n  }: PropsWithoutRef<ButtonProps> & ForwardProps,\n  ref: Ref<HTMLButtonElement>\n) {\n  const [buttonEl, setButtonEl] = useElement();\n  const mouseDownEvent = useRef<MouseEvent>();\n  const buttonRef = useConsolidatedRef<HTMLButtonElement>(ref, setButtonEl);\n  const isTextual = ['link', 'text'].includes(variant);\n  const showProgress = loading && !isTextual;\n  const StyledComp: React.ElementType = isTextual ? StyledButtonLink : StyledButton;\n\n  useEffect(() => {\n    return () => {\n      mouseDownEvent.current = undefined;\n    };\n  }, []);\n\n  return (\n    <>\n      <StyledComp\n        {...restProps}\n        ref={buttonRef}\n        as={as || (href ? 'a' : 'button')}\n        forwardedAs={forwardedAs || (href ? 'a' : 'button')}\n        variant={variant}\n        icon={icon}\n        compact={compact}\n        type={href ? undefined : type}\n        href={href}\n        disabled={disabled && !href}\n        loading={showProgress}\n        aria-label={ariaLabel || label}\n        onMouseDown={(e: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n          (restProps.onMouseDown as MouseEventHandler | undefined)?.(e);\n          e.persist();\n          mouseDownEvent.current = e;\n        }}\n        onMouseUp={(e: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n          const shouldFocus = mouseDownEvent.current && !mouseDownEvent.current.defaultPrevented;\n          mouseDownEvent.current = undefined;\n\n          if (shouldFocus && buttonRef.current !== document.activeElement) {\n            buttonRef.current?.focus();\n          }\n\n          return (restProps.onMouseUp as MouseEventHandler | undefined)?.(e);\n        }}\n      >\n        {showProgress && <Progress variant='ring' placement='inline' />}\n        {!icon || !showProgress ? children : null}\n      </StyledComp>\n\n      {buttonEl && label && (\n        <Tooltip target={buttonEl} showDelay='none' hideDelay='none' describeTarget={false}>\n          {label}\n        </Tooltip>\n      )}\n    </>\n  );\n});\n\nexport default Button;\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../src/components/Card/Card.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,GAAG,EAAmB,SAAS,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAKnG,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAKnE,MAAM,WAAW,SAAU,SAAQ,SAAS,EAAE,MAAM;IAClD,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,kCAAkC;IAClC,OAAO,CAAC,EAAE,iBAAiB,CAAC,WAAW,CAAC,CAAC;IACzC,6CAA6C;IAC7C,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB;AAED,eAAO,MAAM,UAAU,6HAqCrB,CAAC;AAIH,QAAA,MAAM,IAAI,EAAE,iBAAiB,CAAC,SAAS,GAAG,YAAY,CA6BpD,CAAC;AAEH,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../src/components/Card/Card.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,GAAG,EAAmB,SAAS,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAKnG,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAMnE,MAAM,WAAW,SAAU,SAAQ,SAAS,EAAE,MAAM;IAClD,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,kCAAkC;IAClC,OAAO,CAAC,EAAE,iBAAiB,CAAC,WAAW,CAAC,CAAC;IACzC,6CAA6C;IAC7C,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB;AAED,eAAO,MAAM,UAAU,6HA6CrB,CAAC;AAIH,QAAA,MAAM,IAAI,EAAE,iBAAiB,CAAC,SAAS,GAAG,YAAY,CA6BpD,CAAC;AAEH,eAAe,IAAI,CAAC"}

package/lib/components/Card/Card.js

@@ -4,8 +4,10 @@ import styled, { css } from 'styled-components';
 import { defaultThemeProp } from '../../theme';
 import Flex from '../Flex';
 import { StyledPopover } from '../Popover';
+import { useFullscreenContext } from '../Fullscreen';
 import { StyledCardMedia } from './CardMedia';
 export const StyledCard = styled.article(props => {
+    const fullscreen = useFullscreenContext();
     const { 'border-radius': borderRadius, 'border-color': borderColor, background } = props.theme.components.card;
     const interactive = props.interactive
         ? css `
@@ -35,6 +37,12 @@ export const StyledCard = styled.article(props => {
           border-radius: ${borderRadius} ${borderRadius} 0 0;
         }
       }
+
+      ${fullscreen?.[0] &&
+        css `
+        block-size: 100%;
+        border-radius: 0;
+      `}
     }
   `;
 });

package/lib/components/Card/Card.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../../src/components/Card/Card.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,IAAI,MAAM,SAAS,CAAC;AAE3B,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAE3C,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAiB9C,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,OAAO,CAAqB,KAAK,CAAC,EAAE;IACnE,MAAM,EACJ,eAAe,EAAE,YAAY,EAC7B,cAAc,EAAE,WAAW,EAC3B,UAAU,EACX,GAAG,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC;IAChC,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW;QACnC,CAAC,CAAC,GAAG,CAAA;;;wCAG+B,WAAW;;;;uCAIZ,WAAW;;OAE3C;QACH,CAAC,CAAC,SAAS,CAAC;IAEd,OAAO,GAAG,CAAA;MACN,aAAa;0BACO,UAAU;uBACb,YAAY;;;;;;QAM3B,WAAW;;QAEX,eAAe;;2BAEI,YAAY,IAAI,YAAY;;;;GAIpD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,UAAU,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE3C,MAAM,IAAI,GAAgD,UAAU,CAAC,SAAS,IAAI,CAChF,EAAE,QAAQ,EAAE,EAAE,EAAE,OAAO,EAAE,WAAW,GAAG,KAAK,EAAE,GAAG,SAAS,EAA8B,EACxF,GAAqB;IAErB,MAAM,gBAAgB,GAAG;QACvB,GAAG,CAAC,OAAO,IAAI;YACb,OAAO;YACP,QAAQ,EAAE,CAAC;YACX,IAAI,EAAE,QAAQ;SACf,CAAC;QACF,GAAG,CAAC,WAAW,IAAI;YACjB,QAAQ,EAAE,CAAC;SACZ,CAAC;QACF,WAAW;KACZ,CAAC;IAEF,OAAO,CACL,KAAC,IAAI,IACH,IAAI,EAAC,MAAM,EACX,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,EAClC,EAAE,EAAE,UAAU,EACd,WAAW,EAAE,EAAE,EACf,GAAG,EAAE,GAAG,KACJ,gBAAgB,KAChB,SAAS,YAEZ,QAAQ,GACJ,CACR,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,IAAI,CAAC","sourcesContent":["import { forwardRef } from 'react';\nimport type { FunctionComponent, Ref, PropsWithoutRef, ReactNode, MouseEventHandler } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport Flex from '../Flex';\nimport type { ForwardProps, BaseProps, AsProp } from '../../types';\nimport { StyledPopover } from '../Popover';\n\nimport { StyledCardMedia } from './CardMedia';\n\nexport interface CardProps extends BaseProps, AsProp {\n  /** Components and content for the Card. */\n  children?: ReactNode;\n  /**\n   * Enables the focus, hover, and active styles.\n   * @default false\n   * @deprecated\n   */\n  interactive?: boolean;\n  /** Callback for onClick event. */\n  onClick?: MouseEventHandler<HTMLElement>;\n  /** Ref forwarded to the wrapping element. */\n  ref?: Ref<HTMLElement>;\n}\n\nexport const StyledCard = styled.article<Partial<CardProps>>(props => {\n  const {\n    'border-radius': borderRadius,\n    'border-color': borderColor,\n    background\n  } = props.theme.components.card;\n  const interactive = props.interactive\n    ? css`\n        &:hover {\n          border: 0;\n          box-shadow: 0 0 0 0.0625rem ${borderColor};\n        }\n        &:focus {\n          border: 0;\n          box-shadow: 0 0 0 0.125rem ${borderColor};\n        }\n      `\n    : undefined;\n\n  return css`\n    ${StyledPopover} &, &:not(& &) {\n      background-color: ${background};\n      border-radius: ${borderRadius};\n\n      &:focus {\n        outline: none;\n      }\n\n      ${interactive}\n\n      ${StyledCardMedia} {\n        &:first-child img {\n          border-radius: ${borderRadius} ${borderRadius} 0 0;\n        }\n      }\n    }\n  `;\n});\n\nStyledCard.defaultProps = defaultThemeProp;\n\nconst Card: FunctionComponent<CardProps & ForwardProps> = forwardRef(function Card(\n  { children, as, onClick, interactive = false, ...restProps }: PropsWithoutRef<CardProps>,\n  ref: CardProps['ref']\n) {\n  const interactiveProps = {\n    ...(onClick && {\n      onClick,\n      tabIndex: 0,\n      role: 'button'\n    }),\n    ...(interactive && {\n      tabIndex: 0\n    }),\n    interactive\n  };\n\n  return (\n    <Flex\n      role='none'\n      container={{ direction: 'column' }}\n      as={StyledCard}\n      forwardedAs={as}\n      ref={ref}\n      {...interactiveProps}\n      {...restProps}\n    >\n      {children}\n    </Flex>\n  );\n});\n\nexport default Card;\n"]}
+{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../../src/components/Card/Card.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,IAAI,MAAM,SAAS,CAAC;AAE3B,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAC3C,OAAO,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAErD,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAiB9C,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,OAAO,CAAqB,KAAK,CAAC,EAAE;IACnE,MAAM,UAAU,GAAG,oBAAoB,EAAE,CAAC;IAE1C,MAAM,EACJ,eAAe,EAAE,YAAY,EAC7B,cAAc,EAAE,WAAW,EAC3B,UAAU,EACX,GAAG,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC;IAChC,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW;QACnC,CAAC,CAAC,GAAG,CAAA;;;wCAG+B,WAAW;;;;uCAIZ,WAAW;;OAE3C;QACH,CAAC,CAAC,SAAS,CAAC;IAEd,OAAO,GAAG,CAAA;MACN,aAAa;0BACO,UAAU;uBACb,YAAY;;;;;;QAM3B,WAAW;;QAEX,eAAe;;2BAEI,YAAY,IAAI,YAAY;;;;QAI/C,UAAU,EAAE,CAAC,CAAC,CAAC;QACjB,GAAG,CAAA;;;OAGF;;GAEJ,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,UAAU,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE3C,MAAM,IAAI,GAAgD,UAAU,CAAC,SAAS,IAAI,CAChF,EAAE,QAAQ,EAAE,EAAE,EAAE,OAAO,EAAE,WAAW,GAAG,KAAK,EAAE,GAAG,SAAS,EAA8B,EACxF,GAAqB;IAErB,MAAM,gBAAgB,GAAG;QACvB,GAAG,CAAC,OAAO,IAAI;YACb,OAAO;YACP,QAAQ,EAAE,CAAC;YACX,IAAI,EAAE,QAAQ;SACf,CAAC;QACF,GAAG,CAAC,WAAW,IAAI;YACjB,QAAQ,EAAE,CAAC;SACZ,CAAC;QACF,WAAW;KACZ,CAAC;IAEF,OAAO,CACL,KAAC,IAAI,IACH,IAAI,EAAC,MAAM,EACX,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,EAClC,EAAE,EAAE,UAAU,EACd,WAAW,EAAE,EAAE,EACf,GAAG,EAAE,GAAG,KACJ,gBAAgB,KAChB,SAAS,YAEZ,QAAQ,GACJ,CACR,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,IAAI,CAAC","sourcesContent":["import { forwardRef } from 'react';\nimport type { FunctionComponent, Ref, PropsWithoutRef, ReactNode, MouseEventHandler } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport Flex from '../Flex';\nimport type { ForwardProps, BaseProps, AsProp } from '../../types';\nimport { StyledPopover } from '../Popover';\nimport { useFullscreenContext } from '../Fullscreen';\n\nimport { StyledCardMedia } from './CardMedia';\n\nexport interface CardProps extends BaseProps, AsProp {\n  /** Components and content for the Card. */\n  children?: ReactNode;\n  /**\n   * Enables the focus, hover, and active styles.\n   * @default false\n   * @deprecated\n   */\n  interactive?: boolean;\n  /** Callback for onClick event. */\n  onClick?: MouseEventHandler<HTMLElement>;\n  /** Ref forwarded to the wrapping element. */\n  ref?: Ref<HTMLElement>;\n}\n\nexport const StyledCard = styled.article<Partial<CardProps>>(props => {\n  const fullscreen = useFullscreenContext();\n\n  const {\n    'border-radius': borderRadius,\n    'border-color': borderColor,\n    background\n  } = props.theme.components.card;\n  const interactive = props.interactive\n    ? css`\n        &:hover {\n          border: 0;\n          box-shadow: 0 0 0 0.0625rem ${borderColor};\n        }\n        &:focus {\n          border: 0;\n          box-shadow: 0 0 0 0.125rem ${borderColor};\n        }\n      `\n    : undefined;\n\n  return css`\n    ${StyledPopover} &, &:not(& &) {\n      background-color: ${background};\n      border-radius: ${borderRadius};\n\n      &:focus {\n        outline: none;\n      }\n\n      ${interactive}\n\n      ${StyledCardMedia} {\n        &:first-child img {\n          border-radius: ${borderRadius} ${borderRadius} 0 0;\n        }\n      }\n\n      ${fullscreen?.[0] &&\n      css`\n        block-size: 100%;\n        border-radius: 0;\n      `}\n    }\n  `;\n});\n\nStyledCard.defaultProps = defaultThemeProp;\n\nconst Card: FunctionComponent<CardProps & ForwardProps> = forwardRef(function Card(\n  { children, as, onClick, interactive = false, ...restProps }: PropsWithoutRef<CardProps>,\n  ref: CardProps['ref']\n) {\n  const interactiveProps = {\n    ...(onClick && {\n      onClick,\n      tabIndex: 0,\n      role: 'button'\n    }),\n    ...(interactive && {\n      tabIndex: 0\n    }),\n    interactive\n  };\n\n  return (\n    <Flex\n      role='none'\n      container={{ direction: 'column' }}\n      as={StyledCard}\n      forwardedAs={as}\n      ref={ref}\n      {...interactiveProps}\n      {...restProps}\n    >\n      {children}\n    </Flex>\n  );\n});\n\nexport default Card;\n"]}

package/lib/components/Configuration/Configuration.d.ts

@@ -5,6 +5,7 @@ import type { StyleSheetManagerProps } from 'styled-components';
 import '../../init';
 import type { ThemeMachineLike, DefaultSettableTheme, DefaultThemeDefinition } from '../../theme';
 import type { Translation, TranslationPack } from '../../i18n';
+import './connected-watcher';
 export interface ConfigurationProps {
     /** Any components or nodes that should be impacted by the settings applied by this Configuration component. */
     children: ReactNode;

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

@@ -1 +1 @@
-{"version":3,"file":"Configuration.d.ts","sourceRoot":"","sources":["../../../src/components/Configuration/Configuration.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Configuration.d.ts","sourceRoot":"","sources":["../../../src/components/Configuration/Configuration.tsx"],"names":[],"mappings":"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"}

package/lib/components/Configuration/Configuration.js

@@ -1,5 +1,5 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { createContext, useContext, useMemo, useEffect } from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useMemo, useEffect, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { ThemeProvider, StyleSheetManager } from 'styled-components';
 import '../../init';
@@ -9,6 +9,7 @@ import { createTranslationPack, DefaultTranslation, direction as directionOfLoca
 import { documentIsAvailable, navigatorIsAvailable, windowIsAvailable } from '../../utils';
 import pkg from '../../../package.json';
 import useElement from '../../hooks/useElement';
+import './connected-watcher';
 const defaultLocale = navigatorIsAvailable ? navigator.language : 'en';
 export const ConfigurationContext = createContext({
     locale: defaultLocale,
@@ -72,10 +73,24 @@ const Configuration = ({ children, locale, direction, translations: customTransl
         : ctx.themeMachine;
     const translations = useMemo(() => createTranslationPack({ ...ctx.translations, ...customTranslations }), [ctx.translations, customTranslations]);
     const [wrapperEl, setWrapperEl] = useElement();
+    const [connectedWatcherEl, setConnectedWatcherEl] = useElement();
+    // State tracking if the DOM nodes are connected. Only used to trigger rerenders when connected state changes.
+    const [, setConnected] = useState(null);
+    useEffect(() => {
+        if (!connectedWatcherEl)
+            return;
+        const connectDisconnectListener = () => {
+            setConnected(connectedWatcherEl.isConnected);
+        };
+        connectedWatcherEl.addEventListener('connect-disconnect', connectDisconnectListener);
+        return () => {
+            connectedWatcherEl.removeEventListener('connect-disconnect', connectDisconnectListener);
+        };
+    }, [connectedWatcherEl]);
     // Determine valid style sheet and portal target with ShadowDOM handling.
     const [resolvedStyleSheetTarget, resolvedPortalTarget] = useMemo(() => {
         // When rendering on the server, or before the wrapper is in the DOM, just bail.
-        if (!documentIsAvailable || !wrapperEl)
+        if (!documentIsAvailable || !wrapperEl?.isConnected)
             return [undefined, undefined];
         const rootNode = wrapperEl.getRootNode();
         // When within the ShadowDOM, the default target is the ShadowRoot, otherwise default to head/body element.
@@ -91,9 +106,20 @@ const Configuration = ({ children, locale, direction, translations: customTransl
                 : defaultStyleSheetTarget,
             rootNode.contains(requestedPortalTarget ?? null) ? requestedPortalTarget : defaultPortalTarget
         ];
-    }, [wrapperEl, styleSheetTarget, portalTarget, ctx.styleSheetTarget, ctx.portalTarget]);
-    // Reload global fonts and styles if this configuration instance is not within the same root node as the previous configuration instance.
-    const reinitialize = useMemo(() => !!(wrapperEl && wrapperEl.getRootNode() !== ctx.styleSheetTarget?.getRootNode()), [wrapperEl]);
+    }, [
+        wrapperEl,
+        wrapperEl?.isConnected,
+        styleSheetTarget,
+        portalTarget,
+        ctx.styleSheetTarget,
+        ctx.portalTarget
+    ]);
+    // Load global fonts and styles if this configuration instance is...
+    const shouldInitialize = useMemo(() => 
+    // the first configuration instance or...
+    !ctx.initialized ||
+        // is not within the same root node as the previous configuration instance.
+        !!(wrapperEl && wrapperEl.getRootNode() !== ctx.styleSheetTarget?.getRootNode()), [ctx.initialized, wrapperEl]);
     // Check if this StyleSheetManager is mounted above this Configuration.
     const stylesheetManagerMounted = useMemo(() => !!ctx.mountedStyleSheetManagers?.includes(StyleSheetManager), [ctx.mountedStyleSheetManagers]);
     useEffect(() => {
@@ -103,37 +129,39 @@ const Configuration = ({ children, locale, direction, translations: customTransl
             unmountConfig(sym);
         };
     }, [id]);
-    const wrappedChildren = ctx.initialized && !reinitialize ? (_jsx(_Fragment, { children: children })) : (_jsxs(_Fragment, { children: [!disableDefaultFontLoading &&
+    const wrappedChildren = shouldInitialize ? (_jsxs(_Fragment, { children: [!disableDefaultFontLoading &&
                 resolvedStyleSheetTarget &&
-                createPortal(_jsx("link", { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400..700;1,400..700&family=Inter:wght@400..700&display=swap', "data-cosmos-global-style": true }), resolvedStyleSheetTarget), _jsx(GlobalStyle, {}), children] }));
+                createPortal(_jsx("link", { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400..700;1,400..700&family=Inter:wght@400..700&display=swap', "data-cosmos-global-style": true }), resolvedStyleSheetTarget), _jsx(GlobalStyle, {}), children] })) : (_jsx(_Fragment, { children: children }));
     const styledWrappedChildren = stylesheetManagerMounted ? (wrappedChildren) : (_jsx(StyleSheetManager, { disableVendorPrefixes: true, target: 
         // Target must be undefined in a JSDOM environment due to Styled Components server mode handling.
-        navigatorIsAvailable && !navigator.userAgent.includes('jsdom')
+        navigatorIsAvailable &&
+            resolvedStyleSheetTarget?.isConnected &&
+            !navigator.userAgent.includes('jsdom')
             ? resolvedStyleSheetTarget
             : undefined, children: wrappedChildren }));
-    return (_jsx("div", { 
+    return (_jsxs("div", { 
         // Need to use inline styles because the StyleSheetManager is configured within this div.
-        style: { display: 'contents' }, ref: setWrapperEl, children: _jsx(context.Provider
-        // eslint-disable-next-line react/jsx-no-constructed-context-values
-        , { 
+        style: { display: 'contents' }, ref: setWrapperEl, children: [_jsx(context.Provider
             // eslint-disable-next-line react/jsx-no-constructed-context-values
-            value: {
-                locale: locale ?? ctx.locale,
-                direction: direction ?? (locale !== undefined ? directionOfLocale(locale) : ctx.direction),
-                translations,
-                themeMachine,
-                styleSheetTarget: resolvedStyleSheetTarget,
-                portalTarget: resolvedPortalTarget,
-                loadedRef: ctx.loadedRef,
-                renderNativeControls: renderNativeControls ?? ctx.renderNativeControls,
-                testIds: testIds ?? ctx.testIds,
-                mountedStyleSheetManagers: stylesheetManagerMounted
-                    ? ctx.mountedStyleSheetManagers
-                    : [...(ctx.mountedStyleSheetManagers ?? []), StyleSheetManager],
-                initialized: true
-            }, children: _jsxs(ThemeProvider, { theme: themeMachine.theme, children: [styleSheetURLs &&
-                        resolvedStyleSheetTarget &&
-                        createPortal(styleSheetURLs.map(url => (_jsx("link", { rel: 'stylesheet', href: url, "data-cosmos-global-style": true }, url))), resolvedStyleSheetTarget), styledWrappedChildren] }) }) }));
+            , { 
+                // eslint-disable-next-line react/jsx-no-constructed-context-values
+                value: {
+                    locale: locale ?? ctx.locale,
+                    direction: direction ?? (locale !== undefined ? directionOfLocale(locale) : ctx.direction),
+                    translations,
+                    themeMachine,
+                    styleSheetTarget: resolvedStyleSheetTarget,
+                    portalTarget: resolvedPortalTarget,
+                    loadedRef: ctx.loadedRef,
+                    renderNativeControls: renderNativeControls ?? ctx.renderNativeControls,
+                    testIds: testIds ?? ctx.testIds,
+                    mountedStyleSheetManagers: stylesheetManagerMounted
+                        ? ctx.mountedStyleSheetManagers
+                        : [...(ctx.mountedStyleSheetManagers ?? []), StyleSheetManager],
+                    initialized: true
+                }, children: _jsxs(ThemeProvider, { theme: themeMachine.theme, children: [styleSheetURLs &&
+                            resolvedStyleSheetTarget &&
+                            createPortal(styleSheetURLs.map(url => (_jsx("link", { rel: 'stylesheet', href: url, "data-cosmos-global-style": true }, url))), resolvedStyleSheetTarget), styledWrappedChildren] }) }), _jsx("pega-connected-watcher", { ref: setConnectedWatcherEl })] }));
 };
 export default Configuration;
 //# sourceMappingURL=Configuration.js.map

package/lib/components/Configuration/Configuration.js.map

@@ -1 +1 @@
-{"version":3,"file":"Configuration.js","sourceRoot":"","sources":["../../../src/components/Configuration/Configuration.tsx"],"names":[],"mappings":"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","sourcesContent":["import { createContext, useContext, useMemo, useEffect } from 'react';\nimport type { FunctionComponent, ReactNode, Context, MutableRefObject } from 'react';\nimport { createPortal } from 'react-dom';\nimport { ThemeProvider, StyleSheetManager } from 'styled-components';\nimport type { StyleSheetManagerProps } from 'styled-components';\n\nimport '../../init';\nimport { GlobalStyle } from '../../styles';\nimport { ThemeMachine, BaseThemeMachine } from '../../theme';\nimport type { ThemeMachineLike, DefaultSettableTheme, DefaultThemeDefinition } from '../../theme';\nimport {\n  createTranslationPack,\n  DefaultTranslation,\n  direction as directionOfLocale\n} from '../../i18n';\nimport type { Translation, TranslationPack } from '../../i18n';\nimport { documentIsAvailable, navigatorIsAvailable, windowIsAvailable } from '../../utils';\nimport pkg from '../../../package.json';\nimport useElement from '../../hooks/useElement';\n\nexport interface ConfigurationProps {\n  /** Any components or nodes that should be impacted by the settings applied by this Configuration component. */\n  children: ReactNode;\n  /** User locale as defined in [BCP-47](https://www.techonthenet.com/js/language_tags.php). */\n  locale?: string;\n  /** Override rendering direction of the document. Direction will be based on the locale if now provided. */\n  direction?: 'ltr' | 'rtl';\n  /** Object with (partial) translations. */\n  translations?: Translation;\n  /** Theme object used to override any or all Cosmos theme properties. */\n  theme?: DefaultSettableTheme;\n  /** Disables loading Open Sans or Inter from Google Fonts. Only takes effect on the root configuration. */\n  disableDefaultFontLoading?: boolean;\n  /** List of style sheets to inject in style sheet target. */\n  styleSheets?: string[];\n  /**\n   * Target element for loading styles related to `styled-components`.\n   * @deprecated\n   */\n  styleSheetTarget?: StyleSheetManagerProps['target'];\n  /**\n   * Target element for rendering a `ReactDOM` portal.\n   * @deprecated\n   */\n  portalTarget?: Parameters<typeof createPortal>[1];\n  /**\n   * Use native HTML5 controls for inputs instead of rich ones.\n   * @default false\n   */\n  renderNativeControls?: boolean;\n  /** String to identify this configuration instance. */\n  id?: string;\n  /**\n   * Enable/disable testId attribute rendering for all components.\n   * @default true\n   */\n  testIds?: boolean;\n}\n\nexport interface ConfigurationContextValue {\n  locale: string;\n  direction: NonNullable<ConfigurationProps['direction']>;\n  translations: TranslationPack;\n  themeMachine: ThemeMachineLike<DefaultThemeDefinition>;\n  styleSheetTarget: ConfigurationProps['styleSheetTarget'];\n  portalTarget: ConfigurationProps['portalTarget'];\n  loadedRef: MutableRefObject<boolean>;\n  renderNativeControls: boolean;\n  testIds: NonNullable<ConfigurationProps['testIds']>;\n  /** @internal */\n  mountedStyleSheetManagers?: (typeof StyleSheetManager)[];\n  /** @internal */\n  initialized: boolean;\n}\n\nconst defaultLocale = navigatorIsAvailable ? navigator.language : 'en';\n\nexport const ConfigurationContext = createContext<ConfigurationContextValue>({\n  locale: defaultLocale,\n  direction: directionOfLocale(defaultLocale),\n  translations: DefaultTranslation,\n  themeMachine: BaseThemeMachine,\n  styleSheetTarget: documentIsAvailable ? document.head : undefined,\n  portalTarget: documentIsAvailable ? document.body : undefined,\n  loadedRef: { current: false },\n  renderNativeControls: false,\n  testIds: true,\n  mountedStyleSheetManagers: [],\n  initialized: false\n});\n\nconst legacyMetaKey = Symbol.for('@pega/cosmos-react-core.metadata');\n\ninterface LegacyCosmosInstace {\n  version: string;\n}\n\ndeclare global {\n  interface Window {\n    [legacyMetaKey]?: {\n      push: (instance: LegacyCosmosInstace) => void;\n    };\n  }\n}\n\nconst mountedConfigs = new Set<symbol>();\n\ninterface CosmosInstance extends LegacyCosmosInstace {\n  mountedConfigs: string[];\n  mountOrder: string[];\n  mountCount: Record<string, number>;\n}\n\nconst instance: CosmosInstance = {\n  version: pkg.version,\n  mountedConfigs: [],\n  mountOrder: [],\n  mountCount: {}\n};\n\nconst mountConfig = (sym: symbol) => {\n  mountedConfigs.add(sym);\n  instance.mountedConfigs = [...mountedConfigs].map(i => i.description ?? 'Unknown');\n\n  const description = sym.description ?? 'Unknown';\n\n  instance.mountOrder.push(description);\n\n  if (!(description in instance.mountCount)) {\n    instance.mountCount[description] = 0;\n  }\n  instance.mountCount[description] += 1;\n};\n\nconst unmountConfig = (sym: symbol) => {\n  mountedConfigs.delete(sym);\n  instance.mountedConfigs = [...mountedConfigs].map(i => i.description ?? 'Unknown');\n};\n\ndeclare module '../../init' {\n  export interface CosmosGlobals {\n    instances?: (CosmosInstance | LegacyCosmosInstace)[];\n    configurationContext?: Context<ConfigurationContextValue>;\n  }\n}\n\nif (windowIsAvailable) {\n  if (!window.cosmos.instances) {\n    window.cosmos.instances = [];\n  }\n\n  window.cosmos.instances.push(instance);\n\n  if (Array.isArray(window[legacyMetaKey])) {\n    window.cosmos.instances.push(...window[legacyMetaKey]);\n    delete window[legacyMetaKey];\n  }\n\n  if (!window[legacyMetaKey]) {\n    window[legacyMetaKey] = {\n      push: inst => {\n        window.cosmos.instances?.push(inst);\n      }\n    };\n  }\n}\n\nconst Configuration: FunctionComponent<ConfigurationProps> = ({\n  children,\n  locale,\n  direction,\n  translations: customTranslations,\n  theme,\n  disableDefaultFontLoading,\n  styleSheets: styleSheetURLs,\n  styleSheetTarget,\n  portalTarget,\n  renderNativeControls,\n  testIds,\n  id\n}: ConfigurationProps) => {\n  const context = windowIsAvailable\n    ? window.cosmos.configurationContext ?? ConfigurationContext\n    : ConfigurationContext;\n  const ctx = useContext(context);\n  const themeMachine = theme\n    ? new ThemeMachine<DefaultThemeDefinition>({ theme, parent: ctx.themeMachine })\n    : ctx.themeMachine;\n  const translations = useMemo(\n    () => createTranslationPack({ ...ctx.translations, ...customTranslations }),\n    [ctx.translations, customTranslations]\n  );\n\n  const [wrapperEl, setWrapperEl] = useElement<HTMLDivElement>();\n\n  // Determine valid style sheet and portal target with ShadowDOM handling.\n  const [resolvedStyleSheetTarget, resolvedPortalTarget] = useMemo(() => {\n    // When rendering on the server, or before the wrapper is in the DOM, just bail.\n    if (!documentIsAvailable || !wrapperEl) return [undefined, undefined];\n\n    const rootNode = wrapperEl.getRootNode();\n\n    // When within the ShadowDOM, the default target is the ShadowRoot, otherwise default to head/body element.\n    const defaultStyleSheetTarget = rootNode instanceof ShadowRoot ? rootNode : document.head;\n    const defaultPortalTarget = rootNode instanceof ShadowRoot ? rootNode : document.body;\n\n    // Currently passed prop or previous context value\n    const requestedStyleSheetTarget = styleSheetTarget ?? ctx.styleSheetTarget;\n    const requestedPortalTarget = portalTarget ?? ctx.portalTarget;\n\n    // If the \"requested\" target is within the root node, it is valid, so use that, otherwise fallback to the default.\n    return [\n      rootNode.contains(requestedStyleSheetTarget ?? null)\n        ? requestedStyleSheetTarget\n        : defaultStyleSheetTarget,\n      rootNode.contains(requestedPortalTarget ?? null) ? requestedPortalTarget : defaultPortalTarget\n    ];\n  }, [wrapperEl, styleSheetTarget, portalTarget, ctx.styleSheetTarget, ctx.portalTarget]);\n\n  // Reload global fonts and styles if this configuration instance is not within the same root node as the previous configuration instance.\n  const reinitialize = useMemo(\n    () => !!(wrapperEl && wrapperEl.getRootNode() !== ctx.styleSheetTarget?.getRootNode()),\n    [wrapperEl]\n  );\n\n  // Check if this StyleSheetManager is mounted above this Configuration.\n  const stylesheetManagerMounted = useMemo(\n    () => !!ctx.mountedStyleSheetManagers?.includes(StyleSheetManager),\n    [ctx.mountedStyleSheetManagers]\n  );\n\n  useEffect(() => {\n    const sym = Symbol(id);\n    mountConfig(sym);\n\n    return () => {\n      unmountConfig(sym);\n    };\n  }, [id]);\n\n  const wrappedChildren =\n    ctx.initialized && !reinitialize ? (\n      <>{children}</>\n    ) : (\n      <>\n        {!disableDefaultFontLoading &&\n          resolvedStyleSheetTarget &&\n          createPortal(\n            <link\n              rel='stylesheet'\n              href='https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400..700;1,400..700&family=Inter:wght@400..700&display=swap'\n              data-cosmos-global-style\n            />,\n            resolvedStyleSheetTarget\n          )}\n        <GlobalStyle />\n        {children}\n      </>\n    );\n\n  const styledWrappedChildren = stylesheetManagerMounted ? (\n    wrappedChildren\n  ) : (\n    <StyleSheetManager\n      disableVendorPrefixes\n      target={\n        // Target must be undefined in a JSDOM environment due to Styled Components server mode handling.\n        navigatorIsAvailable && !navigator.userAgent.includes('jsdom')\n          ? resolvedStyleSheetTarget\n          : undefined\n      }\n    >\n      {wrappedChildren}\n    </StyleSheetManager>\n  );\n\n  return (\n    <div\n      // Need to use inline styles because the StyleSheetManager is configured within this div.\n      style={{ display: 'contents' }}\n      ref={setWrapperEl}\n    >\n      <context.Provider\n        // eslint-disable-next-line react/jsx-no-constructed-context-values\n        value={{\n          locale: locale ?? ctx.locale,\n          direction:\n            direction ?? (locale !== undefined ? directionOfLocale(locale) : ctx.direction),\n          translations,\n          themeMachine,\n          styleSheetTarget: resolvedStyleSheetTarget,\n          portalTarget: resolvedPortalTarget,\n          loadedRef: ctx.loadedRef,\n          renderNativeControls: renderNativeControls ?? ctx.renderNativeControls,\n          testIds: testIds ?? ctx.testIds,\n          mountedStyleSheetManagers: stylesheetManagerMounted\n            ? ctx.mountedStyleSheetManagers\n            : [...(ctx.mountedStyleSheetManagers ?? []), StyleSheetManager],\n          initialized: true\n        }}\n      >\n        <ThemeProvider theme={themeMachine.theme}>\n          {styleSheetURLs &&\n            resolvedStyleSheetTarget &&\n            createPortal(\n              styleSheetURLs.map(url => (\n                <link rel='stylesheet' href={url} key={url} data-cosmos-global-style />\n              )),\n              resolvedStyleSheetTarget\n            )}\n          {styledWrappedChildren}\n        </ThemeProvider>\n      </context.Provider>\n    </div>\n  );\n};\n\nexport default Configuration;\n"]}
+{"version":3,"file":"Configuration.js","sourceRoot":"","sources":["../../../src/components/Configuration/Configuration.tsx"],"names":[],"mappings":"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","sourcesContent":["import { createContext, useContext, useMemo, useEffect, useState } from 'react';\nimport type { FunctionComponent, ReactNode, Context, MutableRefObject } from 'react';\nimport { createPortal } from 'react-dom';\nimport { ThemeProvider, StyleSheetManager } from 'styled-components';\nimport type { StyleSheetManagerProps } from 'styled-components';\n\nimport '../../init';\nimport { GlobalStyle } from '../../styles';\nimport { ThemeMachine, BaseThemeMachine } from '../../theme';\nimport type { ThemeMachineLike, DefaultSettableTheme, DefaultThemeDefinition } from '../../theme';\nimport {\n  createTranslationPack,\n  DefaultTranslation,\n  direction as directionOfLocale\n} from '../../i18n';\nimport type { Translation, TranslationPack } from '../../i18n';\nimport { documentIsAvailable, navigatorIsAvailable, windowIsAvailable } from '../../utils';\nimport pkg from '../../../package.json';\nimport useElement from '../../hooks/useElement';\n\nimport type PegaConnectedWatcher from './connected-watcher';\nimport './connected-watcher';\n\nexport interface ConfigurationProps {\n  /** Any components or nodes that should be impacted by the settings applied by this Configuration component. */\n  children: ReactNode;\n  /** User locale as defined in [BCP-47](https://www.techonthenet.com/js/language_tags.php). */\n  locale?: string;\n  /** Override rendering direction of the document. Direction will be based on the locale if now provided. */\n  direction?: 'ltr' | 'rtl';\n  /** Object with (partial) translations. */\n  translations?: Translation;\n  /** Theme object used to override any or all Cosmos theme properties. */\n  theme?: DefaultSettableTheme;\n  /** Disables loading Open Sans or Inter from Google Fonts. Only takes effect on the root configuration. */\n  disableDefaultFontLoading?: boolean;\n  /** List of style sheets to inject in style sheet target. */\n  styleSheets?: string[];\n  /**\n   * Target element for loading styles related to `styled-components`.\n   * @deprecated\n   */\n  styleSheetTarget?: StyleSheetManagerProps['target'];\n  /**\n   * Target element for rendering a `ReactDOM` portal.\n   * @deprecated\n   */\n  portalTarget?: Parameters<typeof createPortal>[1];\n  /**\n   * Use native HTML5 controls for inputs instead of rich ones.\n   * @default false\n   */\n  renderNativeControls?: boolean;\n  /** String to identify this configuration instance. */\n  id?: string;\n  /**\n   * Enable/disable testId attribute rendering for all components.\n   * @default true\n   */\n  testIds?: boolean;\n}\n\nexport interface ConfigurationContextValue {\n  locale: string;\n  direction: NonNullable<ConfigurationProps['direction']>;\n  translations: TranslationPack;\n  themeMachine: ThemeMachineLike<DefaultThemeDefinition>;\n  styleSheetTarget: ConfigurationProps['styleSheetTarget'];\n  portalTarget: ConfigurationProps['portalTarget'];\n  loadedRef: MutableRefObject<boolean>;\n  renderNativeControls: boolean;\n  testIds: NonNullable<ConfigurationProps['testIds']>;\n  /** @internal */\n  mountedStyleSheetManagers?: (typeof StyleSheetManager)[];\n  /** @internal */\n  initialized: boolean;\n}\n\nconst defaultLocale = navigatorIsAvailable ? navigator.language : 'en';\n\nexport const ConfigurationContext = createContext<ConfigurationContextValue>({\n  locale: defaultLocale,\n  direction: directionOfLocale(defaultLocale),\n  translations: DefaultTranslation,\n  themeMachine: BaseThemeMachine,\n  styleSheetTarget: documentIsAvailable ? document.head : undefined,\n  portalTarget: documentIsAvailable ? document.body : undefined,\n  loadedRef: { current: false },\n  renderNativeControls: false,\n  testIds: true,\n  mountedStyleSheetManagers: [],\n  initialized: false\n});\n\nconst legacyMetaKey = Symbol.for('@pega/cosmos-react-core.metadata');\n\ninterface LegacyCosmosInstace {\n  version: string;\n}\n\ndeclare global {\n  interface Window {\n    [legacyMetaKey]?: {\n      push: (instance: LegacyCosmosInstace) => void;\n    };\n  }\n}\n\nconst mountedConfigs = new Set<symbol>();\n\ninterface CosmosInstance extends LegacyCosmosInstace {\n  mountedConfigs: string[];\n  mountOrder: string[];\n  mountCount: Record<string, number>;\n}\n\nconst instance: CosmosInstance = {\n  version: pkg.version,\n  mountedConfigs: [],\n  mountOrder: [],\n  mountCount: {}\n};\n\nconst mountConfig = (sym: symbol) => {\n  mountedConfigs.add(sym);\n  instance.mountedConfigs = [...mountedConfigs].map(i => i.description ?? 'Unknown');\n\n  const description = sym.description ?? 'Unknown';\n\n  instance.mountOrder.push(description);\n\n  if (!(description in instance.mountCount)) {\n    instance.mountCount[description] = 0;\n  }\n  instance.mountCount[description] += 1;\n};\n\nconst unmountConfig = (sym: symbol) => {\n  mountedConfigs.delete(sym);\n  instance.mountedConfigs = [...mountedConfigs].map(i => i.description ?? 'Unknown');\n};\n\ndeclare module '../../init' {\n  export interface CosmosGlobals {\n    instances?: (CosmosInstance | LegacyCosmosInstace)[];\n    configurationContext?: Context<ConfigurationContextValue>;\n  }\n}\n\nif (windowIsAvailable) {\n  if (!window.cosmos.instances) {\n    window.cosmos.instances = [];\n  }\n\n  window.cosmos.instances.push(instance);\n\n  if (Array.isArray(window[legacyMetaKey])) {\n    window.cosmos.instances.push(...window[legacyMetaKey]);\n    delete window[legacyMetaKey];\n  }\n\n  if (!window[legacyMetaKey]) {\n    window[legacyMetaKey] = {\n      push: inst => {\n        window.cosmos.instances?.push(inst);\n      }\n    };\n  }\n}\n\nconst Configuration: FunctionComponent<ConfigurationProps> = ({\n  children,\n  locale,\n  direction,\n  translations: customTranslations,\n  theme,\n  disableDefaultFontLoading,\n  styleSheets: styleSheetURLs,\n  styleSheetTarget,\n  portalTarget,\n  renderNativeControls,\n  testIds,\n  id\n}: ConfigurationProps) => {\n  const context = windowIsAvailable\n    ? window.cosmos.configurationContext ?? ConfigurationContext\n    : ConfigurationContext;\n  const ctx = useContext(context);\n  const themeMachine = theme\n    ? new ThemeMachine<DefaultThemeDefinition>({ theme, parent: ctx.themeMachine })\n    : ctx.themeMachine;\n  const translations = useMemo(\n    () => createTranslationPack({ ...ctx.translations, ...customTranslations }),\n    [ctx.translations, customTranslations]\n  );\n\n  const [wrapperEl, setWrapperEl] = useElement<HTMLDivElement>();\n  const [connectedWatcherEl, setConnectedWatcherEl] = useElement<PegaConnectedWatcher>();\n  // State tracking if the DOM nodes are connected. Only used to trigger rerenders when connected state changes.\n  const [, setConnected] = useState<boolean | null>(null);\n\n  useEffect(() => {\n    if (!connectedWatcherEl) return;\n\n    const connectDisconnectListener = () => {\n      setConnected(connectedWatcherEl.isConnected);\n    };\n\n    connectedWatcherEl.addEventListener('connect-disconnect', connectDisconnectListener);\n\n    return () => {\n      connectedWatcherEl.removeEventListener('connect-disconnect', connectDisconnectListener);\n    };\n  }, [connectedWatcherEl]);\n\n  // Determine valid style sheet and portal target with ShadowDOM handling.\n  const [resolvedStyleSheetTarget, resolvedPortalTarget] = useMemo(() => {\n    // When rendering on the server, or before the wrapper is in the DOM, just bail.\n    if (!documentIsAvailable || !wrapperEl?.isConnected) return [undefined, undefined];\n\n    const rootNode = wrapperEl.getRootNode();\n\n    // When within the ShadowDOM, the default target is the ShadowRoot, otherwise default to head/body element.\n    const defaultStyleSheetTarget = rootNode instanceof ShadowRoot ? rootNode : document.head;\n    const defaultPortalTarget = rootNode instanceof ShadowRoot ? rootNode : document.body;\n\n    // Currently passed prop or previous context value\n    const requestedStyleSheetTarget = styleSheetTarget ?? ctx.styleSheetTarget;\n    const requestedPortalTarget = portalTarget ?? ctx.portalTarget;\n\n    // If the \"requested\" target is within the root node, it is valid, so use that, otherwise fallback to the default.\n    return [\n      rootNode.contains(requestedStyleSheetTarget ?? null)\n        ? requestedStyleSheetTarget\n        : defaultStyleSheetTarget,\n      rootNode.contains(requestedPortalTarget ?? null) ? requestedPortalTarget : defaultPortalTarget\n    ];\n  }, [\n    wrapperEl,\n    wrapperEl?.isConnected,\n    styleSheetTarget,\n    portalTarget,\n    ctx.styleSheetTarget,\n    ctx.portalTarget\n  ]);\n\n  // Load global fonts and styles if this configuration instance is...\n  const shouldInitialize = useMemo(\n    () =>\n      // the first configuration instance or...\n      !ctx.initialized ||\n      // is not within the same root node as the previous configuration instance.\n      !!(wrapperEl && wrapperEl.getRootNode() !== ctx.styleSheetTarget?.getRootNode()),\n    [ctx.initialized, wrapperEl]\n  );\n\n  // Check if this StyleSheetManager is mounted above this Configuration.\n  const stylesheetManagerMounted = useMemo(\n    () => !!ctx.mountedStyleSheetManagers?.includes(StyleSheetManager),\n    [ctx.mountedStyleSheetManagers]\n  );\n\n  useEffect(() => {\n    const sym = Symbol(id);\n    mountConfig(sym);\n\n    return () => {\n      unmountConfig(sym);\n    };\n  }, [id]);\n\n  const wrappedChildren = shouldInitialize ? (\n    <>\n      {!disableDefaultFontLoading &&\n        resolvedStyleSheetTarget &&\n        createPortal(\n          <link\n            rel='stylesheet'\n            href='https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400..700;1,400..700&family=Inter:wght@400..700&display=swap'\n            data-cosmos-global-style\n          />,\n          resolvedStyleSheetTarget\n        )}\n      <GlobalStyle />\n      {children}\n    </>\n  ) : (\n    <>{children}</>\n  );\n\n  const styledWrappedChildren = stylesheetManagerMounted ? (\n    wrappedChildren\n  ) : (\n    <StyleSheetManager\n      disableVendorPrefixes\n      target={\n        // Target must be undefined in a JSDOM environment due to Styled Components server mode handling.\n        navigatorIsAvailable &&\n        resolvedStyleSheetTarget?.isConnected &&\n        !navigator.userAgent.includes('jsdom')\n          ? resolvedStyleSheetTarget\n          : undefined\n      }\n    >\n      {wrappedChildren}\n    </StyleSheetManager>\n  );\n\n  return (\n    <div\n      // Need to use inline styles because the StyleSheetManager is configured within this div.\n      style={{ display: 'contents' }}\n      ref={setWrapperEl}\n    >\n      <context.Provider\n        // eslint-disable-next-line react/jsx-no-constructed-context-values\n        value={{\n          locale: locale ?? ctx.locale,\n          direction:\n            direction ?? (locale !== undefined ? directionOfLocale(locale) : ctx.direction),\n          translations,\n          themeMachine,\n          styleSheetTarget: resolvedStyleSheetTarget,\n          portalTarget: resolvedPortalTarget,\n          loadedRef: ctx.loadedRef,\n          renderNativeControls: renderNativeControls ?? ctx.renderNativeControls,\n          testIds: testIds ?? ctx.testIds,\n          mountedStyleSheetManagers: stylesheetManagerMounted\n            ? ctx.mountedStyleSheetManagers\n            : [...(ctx.mountedStyleSheetManagers ?? []), StyleSheetManager],\n          initialized: true\n        }}\n      >\n        <ThemeProvider theme={themeMachine.theme}>\n          {styleSheetURLs &&\n            resolvedStyleSheetTarget &&\n            createPortal(\n              styleSheetURLs.map(url => (\n                <link rel='stylesheet' href={url} key={url} data-cosmos-global-style />\n              )),\n              resolvedStyleSheetTarget\n            )}\n          {styledWrappedChildren}\n        </ThemeProvider>\n      </context.Provider>\n      <pega-connected-watcher ref={setConnectedWatcherEl} />\n    </div>\n  );\n};\n\nexport default Configuration;\n"]}

package/lib/components/Configuration/connected-watcher.d.ts

@@ -0,0 +1,17 @@
+import type { DetailedHTMLProps, HTMLAttributes } from 'react';
+declare global {
+    interface HTMLElementTagNameMap {
+        'pega-connected-watcher': PegaConnectedWatcher;
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            'pega-connected-watcher': DetailedHTMLProps<HTMLAttributes<PegaConnectedWatcher>, PegaConnectedWatcher>;
+        }
+    }
+}
+declare class PegaConnectedWatcher extends HTMLElement {
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+}
+export default PegaConnectedWatcher;
+//# sourceMappingURL=connected-watcher.d.ts.map

package/lib/components/Configuration/connected-watcher.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"connected-watcher.d.ts","sourceRoot":"","sources":["../../../src/components/Configuration/connected-watcher.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE/D,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,wBAAwB,EAAE,oBAAoB,CAAC;KAChD;IAED,UAAU,GAAG,CAAC;QACZ,UAAU,iBAAiB;YACzB,wBAAwB,EAAE,iBAAiB,CACzC,cAAc,CAAC,oBAAoB,CAAC,EACpC,oBAAoB,CACrB,CAAC;SACH;KACF;CACF;AAED,cAAM,oBAAqB,SAAQ,WAAW;IAC5C,iBAAiB;IAIjB,oBAAoB;CAGrB;AAMD,eAAe,oBAAoB,CAAC"}

package/lib/components/Configuration/connected-watcher.js

@@ -0,0 +1,13 @@
+class PegaConnectedWatcher extends HTMLElement {
+    connectedCallback() {
+        this.dispatchEvent(new Event('connect-disconnect', { bubbles: false }));
+    }
+    disconnectedCallback() {
+        this.dispatchEvent(new Event('connect-disconnect', { bubbles: false }));
+    }
+}
+if (!customElements.get('pega-connected-watcher')) {
+    customElements.define('pega-connected-watcher', PegaConnectedWatcher);
+}
+export default PegaConnectedWatcher;
+//# sourceMappingURL=connected-watcher.js.map

package/lib/components/Configuration/connected-watcher.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"connected-watcher.js","sourceRoot":"","sources":["../../../src/components/Configuration/connected-watcher.ts"],"names":[],"mappings":"AAiBA,MAAM,oBAAqB,SAAQ,WAAW;IAC5C,iBAAiB;QACf,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,oBAAoB,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC;IAC1E,CAAC;IAED,oBAAoB;QAClB,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,oBAAoB,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC;IAC1E,CAAC;CACF;AAED,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,wBAAwB,CAAC,EAAE;IACjD,cAAc,CAAC,MAAM,CAAC,wBAAwB,EAAE,oBAAoB,CAAC,CAAC;CACvE;AAED,eAAe,oBAAoB,CAAC","sourcesContent":["import type { DetailedHTMLProps, HTMLAttributes } from 'react';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pega-connected-watcher': PegaConnectedWatcher;\n  }\n\n  namespace JSX {\n    interface IntrinsicElements {\n      'pega-connected-watcher': DetailedHTMLProps<\n        HTMLAttributes<PegaConnectedWatcher>,\n        PegaConnectedWatcher\n      >;\n    }\n  }\n}\n\nclass PegaConnectedWatcher extends HTMLElement {\n  connectedCallback() {\n    this.dispatchEvent(new Event('connect-disconnect', { bubbles: false }));\n  }\n\n  disconnectedCallback() {\n    this.dispatchEvent(new Event('connect-disconnect', { bubbles: false }));\n  }\n}\n\nif (!customElements.get('pega-connected-watcher')) {\n  customElements.define('pega-connected-watcher', PegaConnectedWatcher);\n}\n\nexport default PegaConnectedWatcher;\n"]}

package/lib/components/DateTime/Input/MonthInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MonthInput.d.ts","sourceRoot":"","sources":["../../../../src/components/DateTime/Input/MonthInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAwB,MAAM,OAAO,CAAC;AAIrE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAQnD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAC1D,OAAO,KAAK,aAAa,MAAM,mBAAmB,CAAC;AASnD,MAAM,WAAW,eAAgB,SAAQ,aAAa;IACpD;;;OAGG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,8EAA8E;IAC9E,cAAc,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;CACrD;AAED,eAAO,MAAM,gBAAgB,sHA2B5B,CAAC;;;;AA0NF,wBAA6D"}
+{"version":3,"file":"MonthInput.d.ts","sourceRoot":"","sources":["../../../../src/components/DateTime/Input/MonthInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAwB,MAAM,OAAO,CAAC;AAIrE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAQnD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAC1D,OAAO,KAAK,aAAa,MAAM,mBAAmB,CAAC;AASnD,MAAM,WAAW,eAAgB,SAAQ,aAAa;IACpD;;;OAGG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,8EAA8E;IAC9E,cAAc,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;CACrD;AAED,eAAO,MAAM,gBAAgB,sHAkC5B,CAAC;;;;AAgOF,wBAA6D"}

package/lib/components/DateTime/Input/MonthInput.js

@@ -10,35 +10,42 @@ import { StyledSelect } from '../../Select/Select';
 import Flex from '../../Flex';
 import { StyledFormControl } from '../../FormControl';
 import { getMonthInputTestIds } from '../DateTime.test-ids';
-import { StyledFormField } from '../../FormField/FormField';
+import { StyledFormField, StyledFormFieldInfo } from '../../FormField/FormField';
 import { parseToDate, getLocalizedMonths, getLocalizedYear } from './utils';
 import StyledDateTime from './DateTime.styles';
 export const StyledMonthInput = styled(StyledDateTime) `
   padding: 0;
   border: 0;
+  background-color: transparent;
 
   ${StyledFormField}:enabled > &:focus-within {
     box-shadow: none;
   }
 
-  ${StyledSelect} {
-    min-width: 0;
-
-    &:focus {
+  ${StyledFormField} {
+    > ${StyledSelect}:focus {
       z-index: 1;
     }
 
-    &:first-child {
+    :first-child {
+      flex-grow: 1;
+    }
+
+    :first-child > ${StyledSelect} {
       border-start-end-radius: 0;
       border-end-end-radius: 0;
     }
 
-    &:last-child {
-      max-width: max-content;
+    :last-child > ${StyledSelect} {
+      width: max-content;
       margin-inline-start: -0.0625rem;
       border-start-start-radius: 0;
       border-end-start-radius: 0;
     }
+
+    :first-child > ${StyledFormFieldInfo}, :last-child > ${StyledFormFieldInfo} {
+      display: none;
+    }
   }
 `;
 StyledMonthInput.defaultProps = defaultThemeProp;
@@ -46,6 +53,10 @@ const convertToCallbackParameter = (date, { month, year }) => {
     if ([month, year].every(Boolean)) {
         const resultDate = new Date(date);
         resultDate.setUTCFullYear(Number(year), Number(month));
+        // handle month overflowing
+        if (resultDate.getUTCMonth() !== Number(month)) {
+            resultDate.setUTCDate(0);
+        }
         return {
             valueAsISOString: resultDate.toISOString(),
             valueAsTimestamp: resultDate.getTime()
@@ -118,8 +129,8 @@ const MonthInput = forwardRef(function MonthInput(props, ref) {
         style: 'long',
         type: 'dateTimeField'
     }), [locale]);
-    const Month = (_jsxs(Select, { "data-testid": testIds.controlMonth, label: innerLabelsHidden ? undefined : cap(displayNames.of('month')), ref: monthSelectRef, "aria-label": displayNames.of('month'), readOnly: readOnly, required: required, onChange: onSelectChange, status: status, disabled: disabled, autoFocus: autoFocus, children: [!required && _jsx(Option, { children: " " }, 'null'), monthOptions] }, 'month'));
-    const Year = (_jsxs(Select, { "data-testid": testIds.controlYear, label: innerLabelsHidden ? undefined : cap(displayNames.of('year')), ref: yearSelectRef, "aria-label": displayNames.of('year'), readOnly: readOnly, required: required, onChange: onSelectChange, status: status, disabled: disabled, children: [!required && _jsx(Option, { children: " " }, 'null'), yearOptions] }, 'year'));
+    const Month = (_jsxs(Select, { "data-testid": testIds.controlMonth, label: cap(displayNames.of('month')), labelHidden: innerLabelsHidden, ref: monthSelectRef, "aria-label": displayNames.of('month'), readOnly: readOnly, required: required, onChange: onSelectChange, status: status, disabled: disabled, autoFocus: autoFocus, children: [!required && _jsx(Option, { children: " " }, 'null'), monthOptions] }, 'month'));
+    const Year = (_jsxs(Select, { "data-testid": testIds.controlYear, label: cap(displayNames.of('year')), labelHidden: innerLabelsHidden, ref: yearSelectRef, "aria-label": displayNames.of('year'), readOnly: readOnly, required: required, onChange: onSelectChange, status: status, disabled: disabled, children: [!required && _jsx(Option, { children: " " }, 'null'), yearOptions] }, 'year'));
     const Comp = (_jsxs(Flex, { as: StyledMonthInput, forwardedAs: StyledFormControl, container: { alignItems: 'center', wrap: 'nowrap' }, ref: containerRef, status: status, disabled: disabled, readOnly: readOnly, ...restProps, children: [Month, Year] }));
     return label ? (_jsx(FormField, { testId: testIds, as: 'fieldset', labelAs: 'legend', label: label, labelHidden: labelHidden, id: id, info: info, status: status, required: required, disabled: disabled, additionalInfo: additionalInfo, children: Comp })) : (Comp);
 });