@pega/cosmos-react-core 4.0.0-dev.16.1 → 4.0.0-dev.17.0

package/lib/components/Banner/Banner.d.ts

@@ -1,5 +1,5 @@
 import { FunctionComponent, Ref, MouseEventHandler } from 'react';
-import { BaseProps, ForwardProps, NoChildrenProp } from '../../types';
+import { BaseProps, ForwardProps, HeadingTag, NoChildrenProp } from '../../types';
 import { UnorderedList } from '../List';
 export interface BannerHandleValue {
     /** Used to apply focus to the banner via an imperative handle. */
@@ -22,7 +22,7 @@ export interface BannerProps extends BaseProps, NoChildrenProp {
      * The heading tag to render the provided heading as. This is agnostic to the styling of the heading.
      * @default 'h2'
      */
-    headingTag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+    headingTag?: HeadingTag;
     /** Pass one or more descriptive messages to inform the user. */
     messages: (string | BannerMessage)[];
     /** Callback when user explicitly dismisses the Banner. */

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

@@ -1 +1 @@
-{"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../../src/components/Banner/Banner.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,iBAAiB,EAEjB,GAAG,EACH,iBAAiB,EAIlB,MAAM,OAAO,CAAC;AAKf,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAc,MAAM,aAAa,CAAC;AAiBlF,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAWxC,MAAM,WAAW,iBAAiB;IAChC,kEAAkE;IAClE,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAED,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE;QACP,IAAI,EAAE,MAAM,CAAC;QACb,OAAO,CAAC,EAAE,iBAAiB,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,CAAC;QACnE,IAAI,CAAC,EAAE,MAAM,CAAC;KACf,CAAC;IACF,KAAK,CAAC,EAAE,CAAC,aAAa,GAAG,MAAM,CAAC,EAAE,CAAC;CACpC;AAED,MAAM,WAAW,WAAY,SAAQ,SAAS,EAAE,cAAc;IAC5D,0CAA0C;IAC1C,OAAO,EAAE,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,CAAC;IACnD;;;OAGG;IACH,UAAU,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACrD,gEAAgE;IAChE,QAAQ,EAAE,CAAC,MAAM,GAAG,aAAa,CAAC,EAAE,CAAC;IACrC,0DAA0D;IAC1D,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAC9B,4DAA4D;IAC5D,MAAM,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAC;IAChC,6CAA6C;IAC7C,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,eAAO,MAAM,YAAY;gBAA4B,WAAW,CAAC,YAAY,CAAC;SAU7E,CAAC;AAIF,eAAO,MAAM,kBAAkB,mIAiB7B,CAAC;AAIH,eAAO,MAAM,kBAAkB,yGAoB7B,CAAC;AAIH,eAAO,MAAM,mBAAmB,yGAY9B,CAAC;AAIH,eAAO,MAAM,uBAAuB,EAAE,OAAO,aAK5C,CAAC;AAIF,eAAO,MAAM,mBAAmB,0GAG/B,CAAC;AAyDF,QAAA,MAAM,MAAM,EAAE,iBAAiB,CAAC,WAAW,GAAG,YAAY,CAuJzD,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../../src/components/Banner/Banner.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,iBAAiB,EAEjB,GAAG,EACH,iBAAiB,EAIlB,MAAM,OAAO,CAAC;AAKf,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,UAAU,EAAE,cAAc,EAAc,MAAM,aAAa,CAAC;AAiB9F,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAWxC,MAAM,WAAW,iBAAiB;IAChC,kEAAkE;IAClE,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAED,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE;QACP,IAAI,EAAE,MAAM,CAAC;QACb,OAAO,CAAC,EAAE,iBAAiB,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,CAAC;QACnE,IAAI,CAAC,EAAE,MAAM,CAAC;KACf,CAAC;IACF,KAAK,CAAC,EAAE,CAAC,aAAa,GAAG,MAAM,CAAC,EAAE,CAAC;CACpC;AAED,MAAM,WAAW,WAAY,SAAQ,SAAS,EAAE,cAAc;IAC5D,0CAA0C;IAC1C,OAAO,EAAE,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,CAAC;IACnD;;;OAGG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,gEAAgE;IAChE,QAAQ,EAAE,CAAC,MAAM,GAAG,aAAa,CAAC,EAAE,CAAC;IACrC,0DAA0D;IAC1D,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAC9B,4DAA4D;IAC5D,MAAM,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAC;IAChC,6CAA6C;IAC7C,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,eAAO,MAAM,YAAY;gBAA4B,WAAW,CAAC,YAAY,CAAC;SAU7E,CAAC;AAIF,eAAO,MAAM,kBAAkB,mIAiB7B,CAAC;AAIH,eAAO,MAAM,kBAAkB,yGAoB7B,CAAC;AAIH,eAAO,MAAM,mBAAmB,yGAY9B,CAAC;AAIH,eAAO,MAAM,uBAAuB,EAAE,OAAO,aAK5C,CAAC;AAIF,eAAO,MAAM,mBAAmB,0GAG/B,CAAC;AAyDF,QAAA,MAAM,MAAM,EAAE,iBAAiB,CAAC,WAAW,GAAG,YAAY,CAuJzD,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/lib/components/Banner/Banner.js.map

@@ -1 +1 @@
-{"version":3,"file":"Banner.js","sourceRoot":"","sources":["../../../src/components/Banner/Banner.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  useState,\n  forwardRef,\n  FunctionComponent,\n  PropsWithoutRef,\n  Ref,\n  MouseEventHandler,\n  useMemo,\n  ReactNode,\n  useImperativeHandle\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport { getContrast, readableColor } from 'polished';\n\nimport { defaultThemeProp } from '../../theme';\nimport { BaseProps, ForwardProps, NoChildrenProp, OmitStrict } from '../../types';\nimport Button, { StyledButton } from '../Button';\nimport { focusHeadingOrContainer, tryCatch } from '../../utils';\nimport { useConsolidatedRef, useDirection, useI18n } from '../../hooks';\nimport Flex from '../Flex';\nimport Text from '../Text';\nimport Grid from '../Grid';\nimport ExpandCollapse from '../ExpandCollapse';\nimport { Count } from '../Badges';\nimport Icon, { StyledIcon, registerIcon } from '../Icon';\nimport * as timesIcon from '../Icon/icons/times.icon';\nimport * as caretRightIcon from '../Icon/icons/caret-right.icon';\nimport * as warnSolidIcon from '../Icon/icons/warn-solid.icon';\nimport * as flagWaveSolidIcon from '../Icon/icons/flag-wave-solid.icon';\nimport * as informationSolidIcon from '../Icon/icons/information-solid.icon';\nimport * as checkIcon from '../Icon/icons/check.icon';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\nimport { UnorderedList } from '../List';\n\nregisterIcon(\n  timesIcon,\n  caretRightIcon,\n  warnSolidIcon,\n  flagWaveSolidIcon,\n  informationSolidIcon,\n  checkIcon\n);\n\nexport interface BannerHandleValue {\n  /** Used to apply focus to the banner via an imperative handle. */\n  focus: () => void;\n}\n\nexport interface BannerMessage {\n  label: string;\n  description?: string;\n  action?: {\n    text: string;\n    onClick?: MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>;\n    href?: string;\n  };\n  items?: (BannerMessage | string)[];\n}\n\nexport interface BannerProps extends BaseProps, NoChildrenProp {\n  /** Controls the styling of the Banner. */\n  variant: 'urgent' | 'warning' | 'success' | 'info';\n  /**\n   * The heading tag to render the provided heading as. This is agnostic to the styling of the heading.\n   * @default 'h2'\n   */\n  headingTag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n  /** Pass one or more descriptive messages to inform the user. */\n  messages: (string | BannerMessage)[];\n  /** Callback when user explicitly dismisses the Banner. */\n  onDismiss?: MouseEventHandler;\n  /** Ref that can be used to access the imperative handle. */\n  handle?: Ref<BannerHandleValue>;\n  /** Ref forwarded to the wrapping element. */\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport const StyledBanner = styled.div<{ headingTag: BannerProps['headingTag'] }>(\n  ({ headingTag, theme }) => {\n    return css`\n      border-radius: ${theme.components.card['border-radius']};\n\n      &:has(${headingTag}:focus) {\n        box-shadow: ${theme.base.shadow.focus};\n      }\n    `;\n  }\n);\n\nStyledBanner.defaultProps = defaultThemeProp;\n\nexport const StyledBannerStatus = styled.div<Pick<BannerProps, 'variant'>>(({ variant, theme }) => {\n  const { background } = theme.components.banner[variant];\n  const color = tryCatch(() =>\n    getContrast(background, theme.base.palette['primary-background']) >= 3\n      ? theme.base.palette['primary-background']\n      : readableColor(background)\n  );\n\n  return css`\n    background-color: ${background};\n    color: ${color};\n    border-start-start-radius: inherit;\n    border-end-start-radius: inherit;\n    border: 0.0625rem solid ${theme.base.palette['border-line']};\n    border-inline-end: none;\n    font-size: 1.25rem;\n  `;\n});\n\nStyledBannerStatus.defaultProps = defaultThemeProp;\n\nexport const StyledBannerHeader = styled.div(({ theme }) => {\n  const { rtl } = useDirection();\n\n  return css`\n    min-height: 2rem;\n\n    ${StyledButton}[aria-expanded] {\n      ${StyledIcon} {\n        transition: rotate ${theme.base.animation.speed} ${theme.base.animation.timing.ease};\n      }\n\n      &[aria-expanded='true'] ${StyledIcon} {\n        rotate: 90deg;\n      }\n\n      &[aria-expanded='false'] ${StyledIcon} {\n        rotate: ${rtl ? 180 : 0}deg;\n      }\n    }\n  `;\n});\n\nStyledBannerHeader.defaultProps = defaultThemeProp;\n\nexport const StyledBannerContent = styled.div(({ theme }) => {\n  return css`\n    height: 100%;\n    background: ${theme.components.card.background};\n    padding-block: calc(0.5 * ${theme.base.spacing});\n    padding-inline-start: calc(2 * ${theme.base.spacing});\n    padding-inline-end: calc(0.5 * ${theme.base.spacing});\n    border: 0.0625rem solid ${theme.base.palette['border-line']};\n    border-inline-start: none;\n    border-start-end-radius: inherit;\n    border-end-end-radius: inherit;\n  `;\n});\n\nStyledBannerContent.defaultProps = defaultThemeProp;\n\nexport const StyledBannerMessageList: typeof UnorderedList = styled(UnorderedList)(\n  ({ theme }) => css`\n    padding-block-end: calc(0.5 * ${theme.base.spacing});\n    padding-inline-end: calc(2 * ${theme.base.spacing});\n  `\n);\n\nStyledBannerMessageList.defaultProps = defaultThemeProp;\n\nexport const StyledBannerMessage = styled.span`\n  overflow-wrap: break-word;\n  list-style: none;\n`;\n\nStyledBannerMessage.defaultProps = defaultThemeProp;\n\nconst BannerMessageItem = forwardRef<\n  HTMLLIElement,\n  OmitStrict<BannerMessage, 'items'> & ForwardProps\n>(({ label, description, action, ...restProps }, ref) => {\n  return (\n    <StyledBannerMessage {...restProps} ref={ref}>\n      <span>{label}</span>\n      {description && (\n        <>\n          {' '}\n          <Text variant='secondary'>{description}</Text>\n        </>\n      )}\n      {action && (\n        <>\n          {' '}\n          <Text variant='secondary'>\n            <Button variant='link' href={action.href} onClick={action.onClick} {...action}>\n              {action.text}\n            </Button>\n          </Text>\n        </>\n      )}\n    </StyledBannerMessage>\n  );\n});\n\nconst prepareMessages = (\n  messages: (string | BannerMessage)[]\n): [messages: ReactNode[], count: number] => {\n  let count = 0;\n\n  return [\n    messages.flatMap(msg => {\n      count += 1;\n\n      if (typeof msg === 'string') {\n        return [<BannerMessageItem label={msg} />];\n      }\n\n      if (msg.items) {\n        const { items, ...restMsg } = msg;\n        const [subMessages, subCount] = prepareMessages(items);\n        count += subCount;\n        return [<BannerMessageItem {...restMsg} />, subMessages];\n      }\n\n      return [<BannerMessageItem {...msg} />];\n    }),\n    count\n  ];\n};\n\nconst Banner: FunctionComponent<BannerProps & ForwardProps> = forwardRef(\n  (\n    {\n      variant,\n      headingTag = 'h2',\n      messages,\n      onDismiss,\n      handle,\n      ...restProps\n    }: PropsWithoutRef<BannerProps>,\n    ref: BannerProps['ref']\n  ) => {\n    const [messagesToRender, count] = useMemo(() => prepareMessages(messages), [messages]);\n\n    const t = useI18n();\n    const [collapsed, setCollapsed] = useState(count > 2);\n\n    const bannerRef = useConsolidatedRef(ref);\n\n    let role: string;\n    let icon: string;\n    let heading: string;\n    let ariaLive: string;\n\n    switch (variant) {\n      case 'urgent':\n        heading = t('error');\n        icon = 'warn-solid';\n        role = 'alert';\n        ariaLive = 'assertive';\n        break;\n      case 'warning':\n        heading = t('warning');\n        icon = 'flag-wave-solid';\n        role = 'alert';\n        ariaLive = 'assertive';\n        break;\n      case 'success':\n        heading = t('success');\n        icon = 'check';\n        role = 'none';\n        ariaLive = 'polite';\n        break;\n      case 'info':\n      default:\n        heading = t('information');\n        icon = 'information-solid';\n        role = 'none';\n        ariaLive = 'polite';\n        break;\n    }\n\n    useImperativeHandle(\n      handle,\n      () => ({\n        focus: () => {\n          if (bannerRef.current) focusHeadingOrContainer(bannerRef.current, heading);\n        }\n      }),\n      []\n    );\n\n    return (\n      <Grid\n        {...restProps}\n        as={StyledBanner}\n        container={{ cols: '2rem minmax(0, 1fr)' }}\n        role={role}\n        aria-live={ariaLive}\n        headingTag={headingTag}\n        ref={bannerRef}\n      >\n        <Flex\n          as={StyledBannerStatus}\n          container={{ justify: 'center', alignItems: 'start', pad: [1.5, 0] }}\n          variant={variant}\n        >\n          <Icon name={icon} />\n        </Flex>\n        {count === 1 ? (\n          <Flex container={{ alignItems: 'start' }} as={StyledBannerContent}>\n            <VisuallyHiddenText as={headingTag}>{`${heading} ${count}`}</VisuallyHiddenText>\n            <Flex item={{ alignSelf: 'center', grow: 1 }} as='ul'>\n              {typeof messages[0] === 'string' ? (\n                <BannerMessageItem label={messages[0]} as='li' />\n              ) : (\n                <BannerMessageItem {...messages[0]} as='li' />\n              )}\n            </Flex>\n            {onDismiss && (\n              <Button\n                onClick={onDismiss}\n                label={t('dismiss')}\n                aria-label={t('banner_dismiss_button_label_a11y')}\n                variant='simple'\n                icon\n              >\n                <Icon name='times' />\n              </Button>\n            )}\n          </Flex>\n        ) : (\n          <StyledBannerContent>\n            <Grid\n              as={StyledBannerHeader}\n              container={{ cols: 'auto 1fr auto', areas: '\"toggle heading dismiss\"', gap: 1 }}\n            >\n              <Grid\n                container={{ cols: 'min-content min-content', gap: 0.5, alignItems: 'center' }}\n                item={{ area: 'heading', alignSelf: 'center' }}\n                as={Text}\n                forwardedAs={headingTag}\n                variant='h2'\n              >\n                {heading} <Count>{count}</Count>\n              </Grid>\n              <Grid item={{ area: 'toggle', alignSelf: 'center' }}>\n                <Button\n                  onClick={() => {\n                    setCollapsed(cur => !cur);\n                  }}\n                  label={t(collapsed ? 'expand' : 'collapse')}\n                  aria-expanded={collapsed ? 'false' : 'true'}\n                  variant='simple'\n                  icon\n                >\n                  <Icon name='caret-right' />\n                </Button>\n              </Grid>\n              <Grid item={{ area: 'dismiss', alignSelf: 'center' }}>\n                {onDismiss && (\n                  <Button\n                    onClick={onDismiss}\n                    label={t('dismiss')}\n                    aria-label={t('banner_dismiss_button_label_a11y')}\n                    variant='simple'\n                    icon\n                  >\n                    <Icon name='times' />\n                  </Button>\n                )}\n              </Grid>\n            </Grid>\n            <ExpandCollapse collapsed={collapsed}>\n              <StyledBannerMessageList items={messagesToRender} />\n            </ExpandCollapse>\n          </StyledBannerContent>\n        )}\n      </Grid>\n    );\n  }\n);\n\nexport default Banner;\n"]}
+{"version":3,"file":"Banner.js","sourceRoot":"","sources":["../../../src/components/Banner/Banner.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  useState,\n  forwardRef,\n  FunctionComponent,\n  PropsWithoutRef,\n  Ref,\n  MouseEventHandler,\n  useMemo,\n  ReactNode,\n  useImperativeHandle\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport { getContrast, readableColor } from 'polished';\n\nimport { defaultThemeProp } from '../../theme';\nimport { BaseProps, ForwardProps, HeadingTag, NoChildrenProp, OmitStrict } from '../../types';\nimport Button, { StyledButton } from '../Button';\nimport { focusHeadingOrContainer, tryCatch } from '../../utils';\nimport { useConsolidatedRef, useDirection, useI18n } from '../../hooks';\nimport Flex from '../Flex';\nimport Text from '../Text';\nimport Grid from '../Grid';\nimport ExpandCollapse from '../ExpandCollapse';\nimport { Count } from '../Badges';\nimport Icon, { StyledIcon, registerIcon } from '../Icon';\nimport * as timesIcon from '../Icon/icons/times.icon';\nimport * as caretRightIcon from '../Icon/icons/caret-right.icon';\nimport * as warnSolidIcon from '../Icon/icons/warn-solid.icon';\nimport * as flagWaveSolidIcon from '../Icon/icons/flag-wave-solid.icon';\nimport * as informationSolidIcon from '../Icon/icons/information-solid.icon';\nimport * as checkIcon from '../Icon/icons/check.icon';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\nimport { UnorderedList } from '../List';\n\nregisterIcon(\n  timesIcon,\n  caretRightIcon,\n  warnSolidIcon,\n  flagWaveSolidIcon,\n  informationSolidIcon,\n  checkIcon\n);\n\nexport interface BannerHandleValue {\n  /** Used to apply focus to the banner via an imperative handle. */\n  focus: () => void;\n}\n\nexport interface BannerMessage {\n  label: string;\n  description?: string;\n  action?: {\n    text: string;\n    onClick?: MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>;\n    href?: string;\n  };\n  items?: (BannerMessage | string)[];\n}\n\nexport interface BannerProps extends BaseProps, NoChildrenProp {\n  /** Controls the styling of the Banner. */\n  variant: 'urgent' | 'warning' | 'success' | 'info';\n  /**\n   * The heading tag to render the provided heading as. This is agnostic to the styling of the heading.\n   * @default 'h2'\n   */\n  headingTag?: HeadingTag;\n  /** Pass one or more descriptive messages to inform the user. */\n  messages: (string | BannerMessage)[];\n  /** Callback when user explicitly dismisses the Banner. */\n  onDismiss?: MouseEventHandler;\n  /** Ref that can be used to access the imperative handle. */\n  handle?: Ref<BannerHandleValue>;\n  /** Ref forwarded to the wrapping element. */\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport const StyledBanner = styled.div<{ headingTag: BannerProps['headingTag'] }>(\n  ({ headingTag, theme }) => {\n    return css`\n      border-radius: ${theme.components.card['border-radius']};\n\n      &:has(${headingTag}:focus) {\n        box-shadow: ${theme.base.shadow.focus};\n      }\n    `;\n  }\n);\n\nStyledBanner.defaultProps = defaultThemeProp;\n\nexport const StyledBannerStatus = styled.div<Pick<BannerProps, 'variant'>>(({ variant, theme }) => {\n  const { background } = theme.components.banner[variant];\n  const color = tryCatch(() =>\n    getContrast(background, theme.base.palette['primary-background']) >= 3\n      ? theme.base.palette['primary-background']\n      : readableColor(background)\n  );\n\n  return css`\n    background-color: ${background};\n    color: ${color};\n    border-start-start-radius: inherit;\n    border-end-start-radius: inherit;\n    border: 0.0625rem solid ${theme.base.palette['border-line']};\n    border-inline-end: none;\n    font-size: 1.25rem;\n  `;\n});\n\nStyledBannerStatus.defaultProps = defaultThemeProp;\n\nexport const StyledBannerHeader = styled.div(({ theme }) => {\n  const { rtl } = useDirection();\n\n  return css`\n    min-height: 2rem;\n\n    ${StyledButton}[aria-expanded] {\n      ${StyledIcon} {\n        transition: rotate ${theme.base.animation.speed} ${theme.base.animation.timing.ease};\n      }\n\n      &[aria-expanded='true'] ${StyledIcon} {\n        rotate: 90deg;\n      }\n\n      &[aria-expanded='false'] ${StyledIcon} {\n        rotate: ${rtl ? 180 : 0}deg;\n      }\n    }\n  `;\n});\n\nStyledBannerHeader.defaultProps = defaultThemeProp;\n\nexport const StyledBannerContent = styled.div(({ theme }) => {\n  return css`\n    height: 100%;\n    background: ${theme.components.card.background};\n    padding-block: calc(0.5 * ${theme.base.spacing});\n    padding-inline-start: calc(2 * ${theme.base.spacing});\n    padding-inline-end: calc(0.5 * ${theme.base.spacing});\n    border: 0.0625rem solid ${theme.base.palette['border-line']};\n    border-inline-start: none;\n    border-start-end-radius: inherit;\n    border-end-end-radius: inherit;\n  `;\n});\n\nStyledBannerContent.defaultProps = defaultThemeProp;\n\nexport const StyledBannerMessageList: typeof UnorderedList = styled(UnorderedList)(\n  ({ theme }) => css`\n    padding-block-end: calc(0.5 * ${theme.base.spacing});\n    padding-inline-end: calc(2 * ${theme.base.spacing});\n  `\n);\n\nStyledBannerMessageList.defaultProps = defaultThemeProp;\n\nexport const StyledBannerMessage = styled.span`\n  overflow-wrap: break-word;\n  list-style: none;\n`;\n\nStyledBannerMessage.defaultProps = defaultThemeProp;\n\nconst BannerMessageItem = forwardRef<\n  HTMLLIElement,\n  OmitStrict<BannerMessage, 'items'> & ForwardProps\n>(({ label, description, action, ...restProps }, ref) => {\n  return (\n    <StyledBannerMessage {...restProps} ref={ref}>\n      <span>{label}</span>\n      {description && (\n        <>\n          {' '}\n          <Text variant='secondary'>{description}</Text>\n        </>\n      )}\n      {action && (\n        <>\n          {' '}\n          <Text variant='secondary'>\n            <Button variant='link' href={action.href} onClick={action.onClick} {...action}>\n              {action.text}\n            </Button>\n          </Text>\n        </>\n      )}\n    </StyledBannerMessage>\n  );\n});\n\nconst prepareMessages = (\n  messages: (string | BannerMessage)[]\n): [messages: ReactNode[], count: number] => {\n  let count = 0;\n\n  return [\n    messages.flatMap(msg => {\n      count += 1;\n\n      if (typeof msg === 'string') {\n        return [<BannerMessageItem label={msg} />];\n      }\n\n      if (msg.items) {\n        const { items, ...restMsg } = msg;\n        const [subMessages, subCount] = prepareMessages(items);\n        count += subCount;\n        return [<BannerMessageItem {...restMsg} />, subMessages];\n      }\n\n      return [<BannerMessageItem {...msg} />];\n    }),\n    count\n  ];\n};\n\nconst Banner: FunctionComponent<BannerProps & ForwardProps> = forwardRef(\n  (\n    {\n      variant,\n      headingTag = 'h2',\n      messages,\n      onDismiss,\n      handle,\n      ...restProps\n    }: PropsWithoutRef<BannerProps>,\n    ref: BannerProps['ref']\n  ) => {\n    const [messagesToRender, count] = useMemo(() => prepareMessages(messages), [messages]);\n\n    const t = useI18n();\n    const [collapsed, setCollapsed] = useState(count > 2);\n\n    const bannerRef = useConsolidatedRef(ref);\n\n    let role: string;\n    let icon: string;\n    let heading: string;\n    let ariaLive: string;\n\n    switch (variant) {\n      case 'urgent':\n        heading = t('error');\n        icon = 'warn-solid';\n        role = 'alert';\n        ariaLive = 'assertive';\n        break;\n      case 'warning':\n        heading = t('warning');\n        icon = 'flag-wave-solid';\n        role = 'alert';\n        ariaLive = 'assertive';\n        break;\n      case 'success':\n        heading = t('success');\n        icon = 'check';\n        role = 'none';\n        ariaLive = 'polite';\n        break;\n      case 'info':\n      default:\n        heading = t('information');\n        icon = 'information-solid';\n        role = 'none';\n        ariaLive = 'polite';\n        break;\n    }\n\n    useImperativeHandle(\n      handle,\n      () => ({\n        focus: () => {\n          if (bannerRef.current) focusHeadingOrContainer(bannerRef.current, heading);\n        }\n      }),\n      []\n    );\n\n    return (\n      <Grid\n        {...restProps}\n        as={StyledBanner}\n        container={{ cols: '2rem minmax(0, 1fr)' }}\n        role={role}\n        aria-live={ariaLive}\n        headingTag={headingTag}\n        ref={bannerRef}\n      >\n        <Flex\n          as={StyledBannerStatus}\n          container={{ justify: 'center', alignItems: 'start', pad: [1.5, 0] }}\n          variant={variant}\n        >\n          <Icon name={icon} />\n        </Flex>\n        {count === 1 ? (\n          <Flex container={{ alignItems: 'start' }} as={StyledBannerContent}>\n            <VisuallyHiddenText as={headingTag}>{`${heading} ${count}`}</VisuallyHiddenText>\n            <Flex item={{ alignSelf: 'center', grow: 1 }} as='ul'>\n              {typeof messages[0] === 'string' ? (\n                <BannerMessageItem label={messages[0]} as='li' />\n              ) : (\n                <BannerMessageItem {...messages[0]} as='li' />\n              )}\n            </Flex>\n            {onDismiss && (\n              <Button\n                onClick={onDismiss}\n                label={t('dismiss')}\n                aria-label={t('banner_dismiss_button_label_a11y')}\n                variant='simple'\n                icon\n              >\n                <Icon name='times' />\n              </Button>\n            )}\n          </Flex>\n        ) : (\n          <StyledBannerContent>\n            <Grid\n              as={StyledBannerHeader}\n              container={{ cols: 'auto 1fr auto', areas: '\"toggle heading dismiss\"', gap: 1 }}\n            >\n              <Grid\n                container={{ cols: 'min-content min-content', gap: 0.5, alignItems: 'center' }}\n                item={{ area: 'heading', alignSelf: 'center' }}\n                as={Text}\n                forwardedAs={headingTag}\n                variant='h2'\n              >\n                {heading} <Count>{count}</Count>\n              </Grid>\n              <Grid item={{ area: 'toggle', alignSelf: 'center' }}>\n                <Button\n                  onClick={() => {\n                    setCollapsed(cur => !cur);\n                  }}\n                  label={t(collapsed ? 'expand' : 'collapse')}\n                  aria-expanded={collapsed ? 'false' : 'true'}\n                  variant='simple'\n                  icon\n                >\n                  <Icon name='caret-right' />\n                </Button>\n              </Grid>\n              <Grid item={{ area: 'dismiss', alignSelf: 'center' }}>\n                {onDismiss && (\n                  <Button\n                    onClick={onDismiss}\n                    label={t('dismiss')}\n                    aria-label={t('banner_dismiss_button_label_a11y')}\n                    variant='simple'\n                    icon\n                  >\n                    <Icon name='times' />\n                  </Button>\n                )}\n              </Grid>\n            </Grid>\n            <ExpandCollapse collapsed={collapsed}>\n              <StyledBannerMessageList items={messagesToRender} />\n            </ExpandCollapse>\n          </StyledBannerContent>\n        )}\n      </Grid>\n    );\n  }\n);\n\nexport default Banner;\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumbs.d.ts","sourceRoot":"","sources":["../../../src/components/Breadcrumbs/Breadcrumbs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAEjB,GAAG,EAKJ,MAAM,OAAO,CAAC;AACf,OAAe,EAAO,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAK9D,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAUtE,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAIxC,MAAM,WAAW,gBAAiB,SAAQ,SAAS,EAAE,cAAc;IACjE,mHAAmH;IACnH,IAAI,EAAE,aAAa,EAAE,CAAC;IACtB,6CAA6C;IAC7C,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAYD,eAAO,MAAM,iBAAiB;sBAAkC,OAAO;SA4BtE,CAAC;AAyBF,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,YAAY,CAuMnE,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"Breadcrumbs.d.ts","sourceRoot":"","sources":["../../../src/components/Breadcrumbs/Breadcrumbs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,iBAAiB,EAEjB,GAAG,EAKJ,MAAM,OAAO,CAAC;AACf,OAAe,EAAO,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAK9D,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAUtE,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAIxC,MAAM,WAAW,gBAAiB,SAAQ,SAAS,EAAE,cAAc;IACjE,mHAAmH;IACnH,IAAI,EAAE,aAAa,EAAE,CAAC;IACtB,6CAA6C;IAC7C,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAYD,eAAO,MAAM,iBAAiB;sBAAkC,OAAO;SA0BtE,CAAC;AAyBF,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,YAAY,CAwHnE,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/lib/components/Breadcrumbs/Breadcrumbs.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useEffect, useRef, useState } from 'react';
+import { forwardRef, Fragment, useEffect, useRef, useState } from 'react';
 import styled, { css } from 'styled-components';
 import { rgba } from 'polished';
-import { useConsolidatedRef, useDirection } from '../../hooks';
+import { useElement, useConsolidatedRef, useDirection } from '../../hooks';
 import { defaultThemeProp } from '../../theme';
-import { getEdge, tryCatch } from '../../utils';
+import { debounce, tryCatch } from '../../utils';
 import Button, { StyledButton } from '../Button';
 import Flex from '../Flex';
 import Link, { StyledLink } from '../Link';
@@ -22,6 +22,8 @@ const StyledSeparator = styled(Icon)(({ theme }) => {
 });
 export const StyledBreadcrumbs = styled.div(({ theme, oneItemRemaining }) => css `
     white-space: nowrap;
+    overflow: visible;
+    visibility: hidden;
 
     ${StyledIcon} {
       width: 1em;
@@ -38,12 +40,8 @@ export const StyledBreadcrumbs = styled.div(({ theme, oneItemRemaining }) => css
     ${oneItemRemaining &&
     css `
       & > :last-child {
+        text-overflow: ellipsis;
         overflow: hidden;
-
-        & > span {
-          text-overflow: ellipsis;
-          overflow: hidden;
-        }
       }
     `}
   `);
@@ -63,110 +61,61 @@ StyledEllipsizedButton.defaultProps = defaultThemeProp;
 const StyledEllipsizedText = styled(Text)(getEllipsisStyles);
 StyledEllipsizedText.defaultProps = defaultThemeProp;
 const Breadcrumbs = forwardRef(({ path, ...restProps }, ref) => {
-    const [displayCount, setDisplayCount] = useState(path.length);
-    const containerRef = useConsolidatedRef(ref);
-    const breadcrumbPathRef = useRef(null);
-    const priorTrailingEdgeStack = useRef([]);
-    const priorAvailableSpace = useRef(null);
-    const { end, ltr } = useDirection();
-    const evalItemAddition = ({ containerEdge }) => {
-        let nextDisplayCount = displayCount;
-        const reversedTrailingEdgeStack = [...priorTrailingEdgeStack.current].reverse();
-        for (let i = 0; i < reversedTrailingEdgeStack.length; i += 1) {
-            const priorEdge = reversedTrailingEdgeStack[i];
-            const shouldRender = ltr ? priorEdge < containerEdge : priorEdge > containerEdge;
-            if (shouldRender) {
-                priorTrailingEdgeStack.current.pop();
-                nextDisplayCount += 1;
-            }
-            else {
-                break;
-            }
-        }
-        return nextDisplayCount;
-    };
-    const evalItemRemoval = ({ pathChildren, availableSpace, containerEdge }) => {
-        let nextDisplayCount = displayCount;
-        let hasAvailableSpace = availableSpace;
-        let lastChildIndex = pathChildren.length - 1;
-        do {
-            const itemTrailingEdge = getEdge({
-                el: pathChildren[lastChildIndex],
-                side: 'trailing',
-                ltr
+    const [breadcrumbsEl, setBreadcrumbsEl] = useElement();
+    const [numMenuItems, setNumMenuItems] = useState(0);
+    const minInlineWidth = useRef(0);
+    const breadcrumbRef = useConsolidatedRef(setBreadcrumbsEl, ref);
+    const debouncedResize = debounce((entries) => {
+        if (entries[0].contentRect.width > minInlineWidth.current) {
+            setNumMenuItems(curr => {
+                if (curr === 0)
+                    return curr;
+                return curr - 1;
             });
-            hasAvailableSpace = Math.floor(ltr ? containerEdge - itemTrailingEdge : itemTrailingEdge - containerEdge);
-            if (hasAvailableSpace < 0) {
-                priorTrailingEdgeStack.current = [...priorTrailingEdgeStack.current, itemTrailingEdge];
-                nextDisplayCount -= 1;
-                lastChildIndex -= 1;
-            }
-        } while (hasAvailableSpace < 0 && lastChildIndex > -1);
-        return nextDisplayCount;
-    };
-    const evaluateBreadcrumbDisplay = () => {
-        const containerEl = containerRef.current;
-        if (!containerEl ||
-            !breadcrumbPathRef.current?.children ||
-            breadcrumbPathRef.current?.children.length < 1)
-            return;
-        const pathChildren = Array.from(breadcrumbPathRef.current?.children);
-        const lastChild = pathChildren[pathChildren.length - 1];
-        const containerEdge = getEdge({
-            el: containerEl,
-            side: 'trailing',
-            ltr
-        });
-        const testEdge = getEdge({ el: lastChild, side: 'trailing', ltr });
-        const availableSpace = Math.floor(ltr ? containerEdge - testEdge : testEdge - containerEdge);
-        if (availableSpace === priorAvailableSpace.current)
-            return;
-        priorAvailableSpace.current = availableSpace;
-        let nextDisplayCount = displayCount;
-        if (availableSpace >= 0 && displayCount !== path.length) {
-            nextDisplayCount = evalItemAddition({ containerEdge });
         }
-        else if (pathChildren && availableSpace < 0 && displayCount > 1) {
-            nextDisplayCount = evalItemRemoval({
-                pathChildren,
-                availableSpace,
-                containerEdge
+    }, 100);
+    const resizeObserver = new ResizeObserver(debouncedResize);
+    const intersectionObserver = new IntersectionObserver(entries => {
+        if (entries[0].intersectionRatio < 1 && numMenuItems < path.length - 1) {
+            if (entries[0].rootBounds)
+                minInlineWidth.current = entries[0].rootBounds.width + 1;
+            setNumMenuItems(curr => {
+                if (curr === path.length - 1)
+                    return curr;
+                return curr + 1;
             });
         }
-        setDisplayCount(nextDisplayCount);
-    };
-    // Initial display evaluation
-    useEffect(() => {
-        evaluateBreadcrumbDisplay();
-    }, []);
-    // Overflow resize observer
+        else if (breadcrumbsEl)
+            breadcrumbsEl.style.visibility = 'visible';
+    }, { root: breadcrumbsEl, threshold: 1 });
     useEffect(() => {
-        const resizeObserver = new ResizeObserver(evaluateBreadcrumbDisplay);
-        if (containerRef.current) {
-            resizeObserver.observe(containerRef.current, { box: 'border-box' });
+        if (breadcrumbsEl && breadcrumbsEl.lastChild) {
+            intersectionObserver.observe(breadcrumbsEl.lastChild);
+            resizeObserver.observe(breadcrumbsEl);
+            return () => {
+                intersectionObserver.disconnect();
+                resizeObserver.disconnect();
+            };
         }
-        return () => {
-            resizeObserver.disconnect();
-        };
-    }, [evaluateBreadcrumbDisplay]);
-    const numMenuItems = path.length - displayCount;
-    return (_jsxs(Flex, { ...restProps, container: { gap: 0.5, alignItems: 'center' }, as: StyledBreadcrumbs, oneItemRemaining: displayCount === 1, ref: containerRef, children: [numMenuItems > 0 && (_jsxs(_Fragment, { children: [_jsx(MenuButton, { text: 'Links', iconOnly: true, variant: 'link', icon: 'folder-hierarchy-solid', menu: { items: path.slice(0, numMenuItems).reverse() } }), _jsx(StyledSeparator, { name: `caret-${end}` })] })), _jsx(Flex, { container: { gap: 0.5, alignItems: 'center' }, ref: breadcrumbPathRef, children: path.slice(numMenuItems).map((crumb, index) => {
-                    const { id, primary, visual, href, onClick, ...restCrumbProps } = crumb;
-                    let Comp;
-                    if (href)
-                        Comp = (_jsxs(Link, { href: href, as: primary.length > 60 ? StyledEllipsizedLink : undefined, onClick: (e) => {
-                                onClick?.(id, e);
-                            }, ...restCrumbProps, children: [visual, " ", primary] }, id));
-                    else if (onClick)
-                        Comp = (_jsxs(Button, { variant: 'link', as: primary.length > 60 ? StyledEllipsizedButton : undefined, onClick: (e) => {
-                                onClick(id, e);
-                            }, ...restCrumbProps, children: [visual, " ", primary] }, id));
-                    else
-                        Comp = (_jsxs(Text, { as: primary.length > 60 ? StyledEllipsizedText : undefined, ...restCrumbProps, children: [visual, " ", primary] }, id));
-                    if (index === path.slice(numMenuItems).length - 1)
-                        return Comp;
-                    return (_jsxs(Flex, { container: { gap: 0.5, alignItems: 'center' }, children: [Comp, _jsx(StyledSeparator, { name: `caret-${end}` })] }, id));
-                }) })] }));
+    }, [breadcrumbsEl, numMenuItems]);
+    const { end } = useDirection();
+    return (_jsxs(Flex, { ...restProps, container: { gap: 0.5, alignItems: 'center' }, as: StyledBreadcrumbs, oneItemRemaining: numMenuItems === path.length - 1, ref: breadcrumbRef, children: [numMenuItems > 0 && (_jsxs(_Fragment, { children: [_jsx(MenuButton, { text: 'Links', iconOnly: true, variant: 'link', icon: 'folder-hierarchy-solid', menu: { items: path.slice(0, numMenuItems).reverse() } }), _jsx(StyledSeparator, { name: `caret-${end}` })] })), path.slice(numMenuItems).map((crumb, index) => {
+                const { id, primary, visual, href, onClick, ...restCrumbProps } = crumb;
+                let Comp;
+                if (href)
+                    Comp = (_jsxs(Link, { href: href, as: primary.length > 60 ? StyledEllipsizedLink : undefined, onClick: (e) => {
+                            onClick?.(id, e);
+                        }, ...restCrumbProps, children: [visual, " ", primary] }, id));
+                else if (onClick)
+                    Comp = (_jsxs(Button, { variant: 'link', as: primary.length > 60 ? StyledEllipsizedButton : undefined, onClick: (e) => {
+                            onClick(id, e);
+                        }, ...restCrumbProps, children: [visual, " ", primary] }, id));
+                else
+                    Comp = (_jsxs(Text, { as: primary.length > 60 ? StyledEllipsizedText : undefined, ...restCrumbProps, children: [visual, " ", primary] }, id));
+                if (index === path.slice(numMenuItems).length - 1)
+                    return Comp;
+                return (_jsxs(Fragment, { children: [Comp, _jsx(StyledSeparator, { name: `caret-${end}` })] }, id));
+            })] }));
 });
 export default Breadcrumbs;
 //# sourceMappingURL=Breadcrumbs.js.map

package/lib/components/Breadcrumbs/Breadcrumbs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumbs.js","sourceRoot":"","sources":["../../../src/components/Breadcrumbs/Breadcrumbs.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  FunctionComponent,\n  PropsWithoutRef,\n  Ref,\n  useEffect,\n  useRef,\n  useState,\n  MouseEvent\n} from 'react';\nimport styled, { css, DefaultTheme } from 'styled-components';\nimport { rgba } from 'polished';\n\nimport { useConsolidatedRef, useDirection } from '../../hooks';\nimport { defaultThemeProp } from '../../theme';\nimport { BaseProps, ForwardProps, NoChildrenProp } from '../../types';\nimport { getEdge, tryCatch } from '../../utils';\nimport Button, { StyledButton } from '../Button';\nimport Flex from '../Flex';\nimport Link, { StyledLink } from '../Link';\nimport Icon, { StyledIcon, registerIcon } from '../Icon';\nimport * as caretLeftIcon from '../Icon/icons/caret-left.icon';\nimport * as caretRightIcon from '../Icon/icons/caret-right.icon';\nimport MenuButton from '../MenuButton';\nimport Text, { StyledText } from '../Text';\nimport { MenuItemProps } from '../Menu';\n\nregisterIcon(caretLeftIcon, caretRightIcon);\n\nexport interface BreadcrumbsProps extends BaseProps, NoChildrenProp {\n  /** A set of actions representing the chronological hierarchy of pages or locations leading to the current view. */\n  path: MenuItemProps[];\n  /** Ref forwarded to the wrapping element. */\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst StyledSeparator: typeof Icon = styled(Icon)(({ theme }) => {\n  const color = tryCatch(() =>\n    rgba(theme.base.palette['foreground-color'], theme.base.transparency['transparent-2'])\n  );\n\n  return css`\n    color: ${color};\n  `;\n});\n\nexport const StyledBreadcrumbs = styled.div<{ oneItemRemaining: boolean }>(\n  ({ theme, oneItemRemaining }) => css`\n    white-space: nowrap;\n\n    ${StyledIcon} {\n      width: 1em;\n      height: 1em;\n      flex-shrink: 0;\n    }\n\n    ${StyledLink},\n    ${StyledButton},\n    ${StyledText} {\n      max-width: ${theme.base['content-width'].md};\n    }\n\n    ${oneItemRemaining &&\n    css`\n      & > :last-child {\n        overflow: hidden;\n\n        & > span {\n          text-overflow: ellipsis;\n          overflow: hidden;\n        }\n      }\n    `}\n  `\n);\n\nStyledBreadcrumbs.defaultProps = defaultThemeProp;\n\nconst getEllipsisStyles = ({ theme }: { theme: DefaultTheme }) => {\n  return css`\n    min-width: ${theme.base['content-width'].xs};\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  `;\n};\n\nconst StyledEllipsizedLink = styled(Link)(getEllipsisStyles);\n\nStyledEllipsizedLink.defaultProps = defaultThemeProp;\n\nconst StyledEllipsizedButton = styled(Button)(getEllipsisStyles);\n\nStyledEllipsizedButton.defaultProps = defaultThemeProp;\n\nconst StyledEllipsizedText = styled(Text)(getEllipsisStyles);\n\nStyledEllipsizedText.defaultProps = defaultThemeProp;\n\nconst Breadcrumbs: FunctionComponent<BreadcrumbsProps & ForwardProps> = forwardRef(\n  ({ path, ...restProps }: PropsWithoutRef<BreadcrumbsProps>, ref: BreadcrumbsProps['ref']) => {\n    const [displayCount, setDisplayCount] = useState(path.length);\n\n    const containerRef = useConsolidatedRef(ref);\n    const breadcrumbPathRef = useRef<HTMLDivElement>(null);\n    const priorTrailingEdgeStack = useRef<number[]>([]);\n    const priorAvailableSpace = useRef<number | null>(null);\n\n    const { end, ltr } = useDirection();\n\n    const evalItemAddition = ({ containerEdge }: { containerEdge: number }): number => {\n      let nextDisplayCount = displayCount;\n\n      const reversedTrailingEdgeStack = [...priorTrailingEdgeStack.current].reverse();\n      for (let i = 0; i < reversedTrailingEdgeStack.length; i += 1) {\n        const priorEdge = reversedTrailingEdgeStack[i];\n\n        const shouldRender = ltr ? priorEdge < containerEdge : priorEdge > containerEdge;\n\n        if (shouldRender) {\n          priorTrailingEdgeStack.current.pop();\n          nextDisplayCount += 1;\n        } else {\n          break;\n        }\n      }\n\n      return nextDisplayCount;\n    };\n\n    const evalItemRemoval = ({\n      pathChildren,\n      availableSpace,\n      containerEdge\n    }: {\n      pathChildren: Element[];\n      availableSpace: number;\n      containerEdge: number;\n    }): number => {\n      let nextDisplayCount = displayCount;\n      let hasAvailableSpace = availableSpace;\n      let lastChildIndex = pathChildren.length - 1;\n\n      do {\n        const itemTrailingEdge = getEdge({\n          el: pathChildren[lastChildIndex],\n          side: 'trailing',\n          ltr\n        });\n        hasAvailableSpace = Math.floor(\n          ltr ? containerEdge - itemTrailingEdge : itemTrailingEdge - containerEdge\n        );\n\n        if (hasAvailableSpace < 0) {\n          priorTrailingEdgeStack.current = [...priorTrailingEdgeStack.current, itemTrailingEdge];\n\n          nextDisplayCount -= 1;\n          lastChildIndex -= 1;\n        }\n      } while (hasAvailableSpace < 0 && lastChildIndex > -1);\n\n      return nextDisplayCount;\n    };\n\n    const evaluateBreadcrumbDisplay = () => {\n      const containerEl = containerRef.current;\n      if (\n        !containerEl ||\n        !breadcrumbPathRef.current?.children ||\n        breadcrumbPathRef.current?.children.length < 1\n      )\n        return;\n\n      const pathChildren = Array.from(breadcrumbPathRef.current?.children);\n      const lastChild = pathChildren[pathChildren.length - 1];\n\n      const containerEdge = getEdge({\n        el: containerEl,\n        side: 'trailing',\n        ltr\n      });\n      const testEdge = getEdge({ el: lastChild, side: 'trailing', ltr });\n\n      const availableSpace = Math.floor(ltr ? containerEdge - testEdge : testEdge - containerEdge);\n      if (availableSpace === priorAvailableSpace.current) return;\n\n      priorAvailableSpace.current = availableSpace;\n      let nextDisplayCount = displayCount;\n\n      if (availableSpace >= 0 && displayCount !== path.length) {\n        nextDisplayCount = evalItemAddition({ containerEdge });\n      } else if (pathChildren && availableSpace < 0 && displayCount > 1) {\n        nextDisplayCount = evalItemRemoval({\n          pathChildren,\n          availableSpace,\n          containerEdge\n        });\n      }\n\n      setDisplayCount(nextDisplayCount);\n    };\n\n    // Initial display evaluation\n    useEffect(() => {\n      evaluateBreadcrumbDisplay();\n    }, []);\n\n    // Overflow resize observer\n    useEffect(() => {\n      const resizeObserver = new ResizeObserver(evaluateBreadcrumbDisplay);\n\n      if (containerRef.current) {\n        resizeObserver.observe(containerRef.current, { box: 'border-box' });\n      }\n\n      return () => {\n        resizeObserver.disconnect();\n      };\n    }, [evaluateBreadcrumbDisplay]);\n\n    const numMenuItems = path.length - displayCount;\n\n    return (\n      <Flex\n        {...restProps}\n        container={{ gap: 0.5, alignItems: 'center' }}\n        as={StyledBreadcrumbs}\n        oneItemRemaining={displayCount === 1}\n        ref={containerRef}\n      >\n        {numMenuItems > 0 && (\n          <>\n            <MenuButton\n              text='Links'\n              iconOnly\n              variant='link'\n              icon='folder-hierarchy-solid'\n              menu={{ items: path.slice(0, numMenuItems).reverse() }}\n            />\n            <StyledSeparator name={`caret-${end}`} />\n          </>\n        )}\n        <Flex container={{ gap: 0.5, alignItems: 'center' }} ref={breadcrumbPathRef}>\n          {path.slice(numMenuItems).map((crumb, index) => {\n            const { id, primary, visual, href, onClick, ...restCrumbProps } = crumb;\n            let Comp;\n            if (href)\n              Comp = (\n                <Link\n                  key={id}\n                  href={href}\n                  as={primary.length > 60 ? StyledEllipsizedLink : undefined}\n                  onClick={(e: MouseEvent<HTMLAnchorElement>) => {\n                    onClick?.(id, e);\n                  }}\n                  {...restCrumbProps}\n                >\n                  {visual} {primary}\n                </Link>\n              );\n            else if (onClick)\n              Comp = (\n                <Button\n                  key={id}\n                  variant='link'\n                  as={primary.length > 60 ? StyledEllipsizedButton : undefined}\n                  onClick={(e: MouseEvent<HTMLButtonElement>) => {\n                    onClick(id, e);\n                  }}\n                  {...restCrumbProps}\n                >\n                  {visual} {primary}\n                </Button>\n              );\n            else\n              Comp = (\n                <Text\n                  key={id}\n                  as={primary.length > 60 ? StyledEllipsizedText : undefined}\n                  {...restCrumbProps}\n                >\n                  {visual} {primary}\n                </Text>\n              );\n\n            if (index === path.slice(numMenuItems).length - 1) return Comp;\n\n            return (\n              <Flex container={{ gap: 0.5, alignItems: 'center' }} key={id}>\n                {Comp}\n                <StyledSeparator name={`caret-${end}`} />\n              </Flex>\n            );\n          })}\n        </Flex>\n      </Flex>\n    );\n  }\n);\n\nexport default Breadcrumbs;\n"]}
+{"version":3,"file":"Breadcrumbs.js","sourceRoot":"","sources":["../../../src/components/Breadcrumbs/Breadcrumbs.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,UAAU,EACV,QAAQ,EAIR,SAAS,EACT,MAAM,EACN,QAAQ,EAET,MAAM,OAAO,CAAC;AACf,OAAO,MAAM,EAAE,EAAE,GAAG,EAAgB,MAAM,mBAAmB,CAAC;AAC9D,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhC,OAAO,EAAE,UAAU,EAAE,kBAAkB,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAC3E,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,MAAM,EAAE,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AACjD,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,IAAI,EAAE,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,IAAI,EAAE,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AACzD,OAAO,KAAK,aAAa,MAAM,+BAA+B,CAAC;AAC/D,OAAO,KAAK,cAAc,MAAM,gCAAgC,CAAC;AACjE,OAAO,UAAU,MAAM,eAAe,CAAC;AACvC,OAAO,IAAI,EAAE,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAG3C,YAAY,CAAC,aAAa,EAAE,cAAc,CAAC,CAAC;AAS5C,MAAM,eAAe,GAAgB,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC9D,MAAM,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CAC1B,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,kBAAkB,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,eAAe,CAAC,CAAC,CACvF,CAAC;IAEF,OAAO,GAAG,CAAA;aACC,KAAK;GACf,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CACzC,CAAC,EAAE,KAAK,EAAE,gBAAgB,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;;;;;MAKhC,UAAU;;;;;;MAMV,UAAU;MACV,YAAY;MACZ,UAAU;mBACG,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,EAAE;;;MAG3C,gBAAgB;IAClB,GAAG,CAAA;;;;;KAKF;GACF,CACF,CAAC;AAEF,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAElD,MAAM,iBAAiB,GAAG,CAAC,EAAE,KAAK,EAA2B,EAAE,EAAE;IAC/D,OAAO,GAAG,CAAA;iBACK,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,EAAE;;;;GAI5C,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,oBAAoB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,iBAAiB,CAAC,CAAC;AAE7D,oBAAoB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAErD,MAAM,sBAAsB,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,iBAAiB,CAAC,CAAC;AAEjE,sBAAsB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEvD,MAAM,oBAAoB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,iBAAiB,CAAC,CAAC;AAE7D,oBAAoB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAErD,MAAM,WAAW,GAAuD,UAAU,CAChF,CAAC,EAAE,IAAI,EAAE,GAAG,SAAS,EAAqC,EAAE,GAA4B,EAAE,EAAE;IAC1F,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,UAAU,EAAkB,CAAC;IACvE,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IACpD,MAAM,cAAc,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC;IAEjC,MAAM,aAAa,GAAG,kBAAkB,CAAC,gBAAgB,EAAE,GAAG,CAAC,CAAC;IAEhE,MAAM,eAAe,GAAG,QAAQ,CAAC,CAAC,OAA8B,EAAE,EAAE;QAClE,IAAI,OAAO,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,KAAK,GAAG,cAAc,CAAC,OAAO,EAAE;YACzD,eAAe,CAAC,IAAI,CAAC,EAAE;gBACrB,IAAI,IAAI,KAAK,CAAC;oBAAE,OAAO,IAAI,CAAC;gBAC5B,OAAO,IAAI,GAAG,CAAC,CAAC;YAClB,CAAC,CAAC,CAAC;SACJ;IACH,CAAC,EAAE,GAAG,CAAC,CAAC;IAER,MAAM,cAAc,GAAG,IAAI,cAAc,CAAC,eAAe,CAAC,CAAC;IAE3D,MAAM,oBAAoB,GAAG,IAAI,oBAAoB,CACnD,OAAO,CAAC,EAAE;QACR,IAAI,OAAO,CAAC,CAAC,CAAC,CAAC,iBAAiB,GAAG,CAAC,IAAI,YAAY,GAAG,IAAI,CAAC,MAAM,GAAG,CAAC,EAAE;YACtE,IAAI,OAAO,CAAC,CAAC,CAAC,CAAC,UAAU;gBAAE,cAAc,CAAC,OAAO,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,KAAK,GAAG,CAAC,CAAC;YACpF,eAAe,CAAC,IAAI,CAAC,EAAE;gBACrB,IAAI,IAAI,KAAK,IAAI,CAAC,MAAM,GAAG,CAAC;oBAAE,OAAO,IAAI,CAAC;gBAC1C,OAAO,IAAI,GAAG,CAAC,CAAC;YAClB,CAAC,CAAC,CAAC;SACJ;aAAM,IAAI,aAAa;YAAE,aAAa,CAAC,KAAK,CAAC,UAAU,GAAG,SAAS,CAAC;IACvE,CAAC,EACD,EAAE,IAAI,EAAE,aAAa,EAAE,SAAS,EAAE,CAAC,EAAE,CACtC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,aAAa,IAAI,aAAa,CAAC,SAAS,EAAE;YAC5C,oBAAoB,CAAC,OAAO,CAAC,aAAa,CAAC,SAAoB,CAAC,CAAC;YACjE,cAAc,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC;YAEtC,OAAO,GAAG,EAAE;gBACV,oBAAoB,CAAC,UAAU,EAAE,CAAC;gBAClC,cAAc,CAAC,UAAU,EAAE,CAAC;YAC9B,CAAC,CAAC;SACH;IACH,CAAC,EAAE,CAAC,aAAa,EAAE,YAAY,CAAC,CAAC,CAAC;IAElC,MAAM,EAAE,GAAG,EAAE,GAAG,YAAY,EAAE,CAAC;IAE/B,OAAO,CACL,MAAC,IAAI,OACC,SAAS,EACb,SAAS,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,UAAU,EAAE,QAAQ,EAAE,EAC7C,EAAE,EAAE,iBAAiB,EACrB,gBAAgB,EAAE,YAAY,KAAK,IAAI,CAAC,MAAM,GAAG,CAAC,EAClD,GAAG,EAAE,aAAa,aAEjB,YAAY,GAAG,CAAC,IAAI,CACnB,8BACE,KAAC,UAAU,IACT,IAAI,EAAC,OAAO,EACZ,QAAQ,QACR,OAAO,EAAC,MAAM,EACd,IAAI,EAAC,wBAAwB,EAC7B,IAAI,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,YAAY,CAAC,CAAC,OAAO,EAAE,EAAE,GACtD,EACF,KAAC,eAAe,IAAC,IAAI,EAAE,SAAS,GAAG,EAAE,GAAI,IACxC,CACJ,EACA,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE;gBAC7C,MAAM,EAAE,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,cAAc,EAAE,GAAG,KAAK,CAAC;gBACxE,IAAI,IAAI,CAAC;gBACT,IAAI,IAAI;oBACN,IAAI,GAAG,CACL,MAAC,IAAI,IAEH,IAAI,EAAE,IAAI,EACV,EAAE,EAAE,OAAO,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,SAAS,EAC1D,OAAO,EAAE,CAAC,CAAgC,EAAE,EAAE;4BAC5C,OAAO,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC;wBACnB,CAAC,KACG,cAAc,aAEjB,MAAM,OAAG,OAAO,KARZ,EAAE,CASF,CACR,CAAC;qBACC,IAAI,OAAO;oBACd,IAAI,GAAG,CACL,MAAC,MAAM,IAEL,OAAO,EAAC,MAAM,EACd,EAAE,EAAE,OAAO,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,SAAS,EAC5D,OAAO,EAAE,CAAC,CAAgC,EAAE,EAAE;4BAC5C,OAAO,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC;wBACjB,CAAC,KACG,cAAc,aAEjB,MAAM,OAAG,OAAO,KARZ,EAAE,CASA,CACV,CAAC;;oBAEF,IAAI,GAAG,CACL,MAAC,IAAI,IAEH,EAAE,EAAE,OAAO,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,SAAS,KACtD,cAAc,aAEjB,MAAM,OAAG,OAAO,KAJZ,EAAE,CAKF,CACR,CAAC;gBAEJ,IAAI,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC,MAAM,GAAG,CAAC;oBAAE,OAAO,IAAI,CAAC;gBAE/D,OAAO,CACL,MAAC,QAAQ,eACN,IAAI,EACL,KAAC,eAAe,IAAC,IAAI,EAAE,SAAS,GAAG,EAAE,GAAI,KAF5B,EAAE,CAGN,CACZ,CAAC;YACJ,CAAC,CAAC,IACG,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import {\n  forwardRef,\n  Fragment,\n  FunctionComponent,\n  PropsWithoutRef,\n  Ref,\n  useEffect,\n  useRef,\n  useState,\n  MouseEvent\n} from 'react';\nimport styled, { css, DefaultTheme } from 'styled-components';\nimport { rgba } from 'polished';\n\nimport { useElement, useConsolidatedRef, useDirection } from '../../hooks';\nimport { defaultThemeProp } from '../../theme';\nimport { BaseProps, ForwardProps, NoChildrenProp } from '../../types';\nimport { debounce, tryCatch } from '../../utils';\nimport Button, { StyledButton } from '../Button';\nimport Flex from '../Flex';\nimport Link, { StyledLink } from '../Link';\nimport Icon, { StyledIcon, registerIcon } from '../Icon';\nimport * as caretLeftIcon from '../Icon/icons/caret-left.icon';\nimport * as caretRightIcon from '../Icon/icons/caret-right.icon';\nimport MenuButton from '../MenuButton';\nimport Text, { StyledText } from '../Text';\nimport { MenuItemProps } from '../Menu';\n\nregisterIcon(caretLeftIcon, caretRightIcon);\n\nexport interface BreadcrumbsProps extends BaseProps, NoChildrenProp {\n  /** A set of actions representing the chronological hierarchy of pages or locations leading to the current view. */\n  path: MenuItemProps[];\n  /** Ref forwarded to the wrapping element. */\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst StyledSeparator: typeof Icon = styled(Icon)(({ theme }) => {\n  const color = tryCatch(() =>\n    rgba(theme.base.palette['foreground-color'], theme.base.transparency['transparent-2'])\n  );\n\n  return css`\n    color: ${color};\n  `;\n});\n\nexport const StyledBreadcrumbs = styled.div<{ oneItemRemaining: boolean }>(\n  ({ theme, oneItemRemaining }) => css`\n    white-space: nowrap;\n    overflow: visible;\n    visibility: hidden;\n\n    ${StyledIcon} {\n      width: 1em;\n      height: 1em;\n      flex-shrink: 0;\n    }\n\n    ${StyledLink},\n    ${StyledButton},\n    ${StyledText} {\n      max-width: ${theme.base['content-width'].md};\n    }\n\n    ${oneItemRemaining &&\n    css`\n      & > :last-child {\n        text-overflow: ellipsis;\n        overflow: hidden;\n      }\n    `}\n  `\n);\n\nStyledBreadcrumbs.defaultProps = defaultThemeProp;\n\nconst getEllipsisStyles = ({ theme }: { theme: DefaultTheme }) => {\n  return css`\n    min-width: ${theme.base['content-width'].xs};\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  `;\n};\n\nconst StyledEllipsizedLink = styled(Link)(getEllipsisStyles);\n\nStyledEllipsizedLink.defaultProps = defaultThemeProp;\n\nconst StyledEllipsizedButton = styled(Button)(getEllipsisStyles);\n\nStyledEllipsizedButton.defaultProps = defaultThemeProp;\n\nconst StyledEllipsizedText = styled(Text)(getEllipsisStyles);\n\nStyledEllipsizedText.defaultProps = defaultThemeProp;\n\nconst Breadcrumbs: FunctionComponent<BreadcrumbsProps & ForwardProps> = forwardRef(\n  ({ path, ...restProps }: PropsWithoutRef<BreadcrumbsProps>, ref: BreadcrumbsProps['ref']) => {\n    const [breadcrumbsEl, setBreadcrumbsEl] = useElement<HTMLDivElement>();\n    const [numMenuItems, setNumMenuItems] = useState(0);\n    const minInlineWidth = useRef(0);\n\n    const breadcrumbRef = useConsolidatedRef(setBreadcrumbsEl, ref);\n\n    const debouncedResize = debounce((entries: ResizeObserverEntry[]) => {\n      if (entries[0].contentRect.width > minInlineWidth.current) {\n        setNumMenuItems(curr => {\n          if (curr === 0) return curr;\n          return curr - 1;\n        });\n      }\n    }, 100);\n\n    const resizeObserver = new ResizeObserver(debouncedResize);\n\n    const intersectionObserver = new IntersectionObserver(\n      entries => {\n        if (entries[0].intersectionRatio < 1 && numMenuItems < path.length - 1) {\n          if (entries[0].rootBounds) minInlineWidth.current = entries[0].rootBounds.width + 1;\n          setNumMenuItems(curr => {\n            if (curr === path.length - 1) return curr;\n            return curr + 1;\n          });\n        } else if (breadcrumbsEl) breadcrumbsEl.style.visibility = 'visible';\n      },\n      { root: breadcrumbsEl, threshold: 1 }\n    );\n\n    useEffect(() => {\n      if (breadcrumbsEl && breadcrumbsEl.lastChild) {\n        intersectionObserver.observe(breadcrumbsEl.lastChild as Element);\n        resizeObserver.observe(breadcrumbsEl);\n\n        return () => {\n          intersectionObserver.disconnect();\n          resizeObserver.disconnect();\n        };\n      }\n    }, [breadcrumbsEl, numMenuItems]);\n\n    const { end } = useDirection();\n\n    return (\n      <Flex\n        {...restProps}\n        container={{ gap: 0.5, alignItems: 'center' }}\n        as={StyledBreadcrumbs}\n        oneItemRemaining={numMenuItems === path.length - 1}\n        ref={breadcrumbRef}\n      >\n        {numMenuItems > 0 && (\n          <>\n            <MenuButton\n              text='Links'\n              iconOnly\n              variant='link'\n              icon='folder-hierarchy-solid'\n              menu={{ items: path.slice(0, numMenuItems).reverse() }}\n            />\n            <StyledSeparator name={`caret-${end}`} />\n          </>\n        )}\n        {path.slice(numMenuItems).map((crumb, index) => {\n          const { id, primary, visual, href, onClick, ...restCrumbProps } = crumb;\n          let Comp;\n          if (href)\n            Comp = (\n              <Link\n                key={id}\n                href={href}\n                as={primary.length > 60 ? StyledEllipsizedLink : undefined}\n                onClick={(e: MouseEvent<HTMLAnchorElement>) => {\n                  onClick?.(id, e);\n                }}\n                {...restCrumbProps}\n              >\n                {visual} {primary}\n              </Link>\n            );\n          else if (onClick)\n            Comp = (\n              <Button\n                key={id}\n                variant='link'\n                as={primary.length > 60 ? StyledEllipsizedButton : undefined}\n                onClick={(e: MouseEvent<HTMLButtonElement>) => {\n                  onClick(id, e);\n                }}\n                {...restCrumbProps}\n              >\n                {visual} {primary}\n              </Button>\n            );\n          else\n            Comp = (\n              <Text\n                key={id}\n                as={primary.length > 60 ? StyledEllipsizedText : undefined}\n                {...restCrumbProps}\n              >\n                {visual} {primary}\n              </Text>\n            );\n\n          if (index === path.slice(numMenuItems).length - 1) return Comp;\n\n          return (\n            <Fragment key={id}>\n              {Comp}\n              <StyledSeparator name={`caret-${end}`} />\n            </Fragment>\n          );\n        })}\n      </Flex>\n    );\n  }\n);\n\nexport default Breadcrumbs;\n"]}

package/lib/components/ColorPicker/ColorPicker.d.ts

@@ -1,5 +1,4 @@
-import { FC, Ref, MouseEventHandler } from 'react';
-import { ColorChangeHandler } from 'react-color';
+import { FC, Ref, MouseEventHandler, ChangeEvent } from 'react';
 import { BaseProps, ForwardProps, NoChildrenProp, TestIdProp } from '../../types';
 import { FormFieldProps } from '../FormField';
 import { FormControlProps } from '../FormControl';
@@ -21,11 +20,6 @@ export interface ColorPickerProps extends BaseProps, NoChildrenProp, TestIdProp
      * @default false
      */
     swatchOnly?: boolean;
-    /**
-     * Enables alpha slider.
-     * @default false
-     */
-    alpha?: boolean;
     /** Indicate if the field is required. The browser defaults to false. */
     required?: FormControlProps['required'];
     /** Disable the control. */
@@ -53,6 +47,24 @@ export interface ColorPickerProps extends BaseProps, NoChildrenProp, TestIdProp
     /** Ref placed on the input element. */
     ref?: Ref<HTMLInputElement>;
 }
-declare const ColorPicker: FC<ColorPickerProps & ForwardProps>;
-export default ColorPicker;
+type RGBColor = {
+    r: number;
+    g: number;
+    b: number;
+};
+type HSLColor = {
+    h: number;
+    s: number;
+    l: number;
+};
+type ColorResult = {
+    hex: string;
+    rgb: RGBColor;
+    hsl: HSLColor;
+};
+type ColorChangeHandler = (color: ColorResult, event: ChangeEvent<HTMLInputElement>) => void;
+declare const _default: FC<ColorPickerProps & ForwardProps> & {
+    getTestIds: (testIdProp?: string | undefined) => import("../../types").TestIdsRecord<readonly ["control", "label", "info", "additional-info", "suggestion-accept", "suggestion-reject"]>;
+};
+export default _default;
 //# sourceMappingURL=ColorPicker.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ColorPicker.d.ts","sourceRoot":"","sources":["../../../src/components/ColorPicker/ColorPicker.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,EAAE,EAEF,GAAG,EAGH,iBAAiB,EAElB,MAAM,OAAO,CAAC;AAGf,OAAO,EAAgB,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAE/D,OAAO,EACL,SAAS,EACT,YAAY,EACZ,cAAc,EAEd,UAAU,EACX,MAAM,aAAa,CAAC;AACrB,OAAkB,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAEzD,OAAO,EAAE,gBAAgB,EAAqB,MAAM,gBAAgB,CAAC;AAOrE,MAAM,WAAW,gBAAiB,SAAQ,SAAS,EAAE,cAAc,EAAE,UAAU;IAC7E,yCAAyC;IACzC,KAAK,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IACjC;;;OAGG;IACH,EAAE,CAAC,EAAE,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAC5B;;;OAGG;IACH,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,wEAAwE;IACxE,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,uCAAuC;IACvC,WAAW,CAAC,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAC9C,6GAA6G;IAC7G,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,oDAAoD;IACpD,MAAM,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACpC,qFAAqF;IACrF,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,+FAA+F;IAC/F,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,6CAA6C;IAC7C,MAAM,CAAC,EAAE,cAAc,CAAC,QAAQ,CAAC,CAAC;IAClC,+EAA+E;IAC/E,cAAc,CAAC,EAAE,cAAc,CAAC,gBAAgB,CAAC,CAAC;IAClD,kEAAkE;IAClE,QAAQ,CAAC,EAAE,kBAAkB,CAAC;IAC9B,wCAAwC;IACxC,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,+FAA+F;IAC/F,OAAO,CAAC,EAAE,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;IAC9C,uCAAuC;IACvC,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B;AA0ED,QAAA,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,GAAG,YAAY,CA6HpD,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"ColorPicker.d.ts","sourceRoot":"","sources":["../../../src/components/ColorPicker/ColorPicker.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,EAAE,EAEF,GAAG,EAGH,iBAAiB,EAEjB,WAAW,EACZ,MAAM,OAAO,CAAC;AAIf,OAAO,EACL,SAAS,EACT,YAAY,EACZ,cAAc,EAEd,UAAU,EACX,MAAM,aAAa,CAAC;AAErB,OAAkB,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAEzD,OAAO,EAAE,gBAAgB,EAAqB,MAAM,gBAAgB,CAAC;AAMrE,MAAM,WAAW,gBAAiB,SAAQ,SAAS,EAAE,cAAc,EAAE,UAAU;IAC7E,yCAAyC;IACzC,KAAK,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IACjC;;;OAGG;IACH,EAAE,CAAC,EAAE,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAC5B;;;OAGG;IACH,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,wEAAwE;IACxE,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,uCAAuC;IACvC,WAAW,CAAC,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAC9C,6GAA6G;IAC7G,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,oDAAoD;IACpD,MAAM,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACpC,qFAAqF;IACrF,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,+FAA+F;IAC/F,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,6CAA6C;IAC7C,MAAM,CAAC,EAAE,cAAc,CAAC,QAAQ,CAAC,CAAC;IAClC,+EAA+E;IAC/E,cAAc,CAAC,EAAE,cAAc,CAAC,gBAAgB,CAAC,CAAC;IAClD,kEAAkE;IAClE,QAAQ,CAAC,EAAE,kBAAkB,CAAC;IAC9B,wCAAwC;IACxC,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,+FAA+F;IAC/F,OAAO,CAAC,EAAE,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;IAC9C,uCAAuC;IACvC,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B;AAED,KAAK,QAAQ,GAAG;IACd,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX,CAAC;AAEF,KAAK,QAAQ,GAAG;IACd,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX,CAAC;AAEF,KAAK,WAAW,GAAG;IACjB,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,QAAQ,CAAC;IACd,GAAG,EAAE,QAAQ,CAAC;CACf,CAAC;AAEF,KAAK,kBAAkB,GAAG,CAAC,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;;;;AAmL7F,wBAA+D"}

package/lib/components/ColorPicker/ColorPicker.js

@@ -1,14 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useState, useEffect } from 'react';
 import styled, { css } from 'styled-components';
-import { hideVisually } from 'polished';
-import { ChromePicker } from 'react-color';
+import { hideVisually, parseToHsl, parseToRgb } from 'polished';
+import { withTestIds } from '../../utils';
 import FormField from '../FormField';
 import { defaultThemeProp } from '../../theme';
 import { StyledFormControl } from '../FormControl';
 import Flex from '../Flex';
-import { useConsolidatedRef, useUID, useElement, useOuterEvent, useTestIds } from '../../hooks';
-import Popover from '../Popover';
+import { useConsolidatedRef, useUID, useOuterEvent, useTestIds } from '../../hooks';
 import { getColorPickerTestIds } from './ColorPicker.test-ids';
 const StyledColorPicker = styled.div(({ theme, swatchOnly }) => {
     const size = theme.components.input.height;
@@ -77,43 +76,34 @@ const StyledColorPicker = styled.div(({ theme, swatchOnly }) => {
 StyledColorPicker.defaultProps = defaultThemeProp;
 const ColorPicker = forwardRef((props, ref) => {
     const uid = useUID();
-    const { testId, id = uid, value = '#000000', label, info, disabled, status, required, readOnly, labelHidden, swatchOnly = false, alpha = false, inline, onClick, onChange, onBeforeClose, additionalInfo, ...restProps } = props;
+    const { testId, id = uid, value = '#000000', label, info, disabled, status, required, readOnly, labelHidden, swatchOnly = false, inline, onClick, onChange, onBeforeClose, additionalInfo, ...restProps } = props;
     const testIds = useTestIds(testId, getColorPickerTestIds);
     const inputRef = useConsolidatedRef(ref);
-    const maskedSwatchRef = useConsolidatedRef();
-    const [popoverEl, setPopoverEl] = useElement(null);
-    const [showPopOver, setShowPopOver] = useState(false);
-    const hidePopover = () => {
-        if (showPopOver) {
+    const [showColorPicker, setShowColorPicker] = useState(false);
+    const hideColorPicker = () => {
+        if (showColorPicker) {
             onBeforeClose?.();
         }
-        setShowPopOver(false);
+        setShowColorPicker(false);
     };
-    const closePopover = (e) => {
-        if (e.key === 'Escape') {
-            e.preventDefault();
-            hidePopover();
-        }
-    };
-    useOuterEvent('mousedown', [popoverEl], hidePopover);
+    useOuterEvent('mousedown', [inputRef], hideColorPicker);
     useEffect(() => {
-        document.addEventListener('keydown', closePopover);
-        popoverEl?.addEventListener('keydown', closePopover);
-        return () => {
-            document.removeEventListener('keydown', closePopover);
-            popoverEl?.removeEventListener('keydown', closePopover);
-        };
-    }, [popoverEl]);
-    useEffect(() => {
-        if (showPopOver) {
-            popoverEl?.focus();
+        if (showColorPicker) {
+            inputRef?.current?.focus();
+            inputRef?.current?.click();
         }
-    }, [showPopOver]);
-    return (_jsx(FormField, { testId: testIds, inline: inline, container: inline ? { justify: 'between' } : undefined, as: StyledColorPicker, id: id, label: label, labelHidden: labelHidden, swatchOnly: swatchOnly, info: info, disabled: disabled, status: status, required: required, additionalInfo: additionalInfo, children: _jsxs(Flex, { container: { alignItems: 'center' }, item: swatchOnly ? { alignSelf: 'start' } : undefined, as: StyledFormControl, disabled: disabled, status: status, required: required, readOnly: readOnly, onClick: readOnly || disabled ? undefined : () => setShowPopOver(true), children: [_jsx("input", { "data-testid": testIds.control, ...restProps, id: id, type: readOnly ? undefined : 'color', ref: inputRef, defaultValue: value, disabled: disabled, required: required, readOnly: readOnly, onClick: e => {
-                        e.preventDefault();
-                    } }), _jsx("div", { style: { backgroundColor: value }, ref: maskedSwatchRef }), !swatchOnly && value, _jsx(Popover, { placement: 'bottom-start', style: { zIndex: '3000' }, show: showPopOver, ref: setPopoverEl, groupId: 'popover', target: maskedSwatchRef.current, children: _jsx(ChromePicker, { disableAlpha: !alpha, color: value, onChange: (color, e) => {
-                            onChange?.(color, e);
-                        } }) })] }) }));
+    }, [showColorPicker]);
+    const onChangeHandler = (e) => {
+        const color = e.target.value;
+        const { red: r, green: g, blue: b } = parseToRgb(color);
+        const { hue: h, saturation: s, lightness: l } = parseToHsl(color);
+        onChange?.({
+            hex: color,
+            rgb: { r, g, b },
+            hsl: { h, s, l }
+        }, e);
+    };
+    return (_jsx(FormField, { testId: testIds, inline: inline, container: inline ? { justify: 'between' } : undefined, as: StyledColorPicker, id: id, label: label, labelHidden: labelHidden, swatchOnly: swatchOnly, info: info, disabled: disabled, status: status, required: required, additionalInfo: additionalInfo, children: _jsxs(Flex, { container: { alignItems: 'center' }, item: swatchOnly ? { alignSelf: 'start' } : undefined, as: StyledFormControl, disabled: disabled, status: status, required: required, readOnly: readOnly, onClick: readOnly || disabled ? undefined : () => setShowColorPicker(true), children: [_jsx("input", { "data-testid": testIds.control, ...restProps, id: id, type: readOnly ? undefined : 'color', ref: inputRef, defaultValue: value, disabled: disabled, required: required, readOnly: readOnly, onChange: onChangeHandler }), _jsx("div", { style: { backgroundColor: value } }), !swatchOnly && value] }) }));
 });
-export default ColorPicker;
+export default withTestIds(ColorPicker, getColorPickerTestIds);
 //# sourceMappingURL=ColorPicker.js.map

package/lib/components/ColorPicker/ColorPicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorPicker.js","sourceRoot":"","sources":["../../../src/components/ColorPicker/ColorPicker.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  FC,\n  forwardRef,\n  Ref,\n  useState,\n  PropsWithoutRef,\n  MouseEventHandler,\n  useEffect\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport { hideVisually } from 'polished';\nimport { ChromePicker, ColorChangeHandler } from 'react-color';\n\nimport {\n  BaseProps,\n  ForwardProps,\n  NoChildrenProp,\n  PropsWithDefaults,\n  TestIdProp\n} from '../../types';\nimport FormField, { FormFieldProps } from '../FormField';\nimport { defaultThemeProp } from '../../theme';\nimport { FormControlProps, StyledFormControl } from '../FormControl';\nimport Flex from '../Flex';\nimport { useConsolidatedRef, useUID, useElement, useOuterEvent, useTestIds } from '../../hooks';\nimport Popover from '../Popover';\n\nimport { getColorPickerTestIds } from './ColorPicker.test-ids';\n\nexport interface ColorPickerProps extends BaseProps, NoChildrenProp, TestIdProp {\n  /** label for the color picker control */\n  label: FormControlProps['label'];\n  /**\n   * Sets DOM id for the control and associates label element via 'for' attribute.\n   * If an id is not passed, a random id will be generated for any render.\n   */\n  id?: FormControlProps['id'];\n  /**\n   * Color picker value in hex\n   * @default '#000000'\n   */\n  value?: FormControlProps['value'];\n  /**\n   * Show color swatch without hex value display.\n   * @default false\n   */\n  swatchOnly?: boolean;\n  /**\n   * Enables alpha slider.\n   * @default false\n   */\n  alpha?: boolean;\n  /** Indicate if the field is required. The browser defaults to false. */\n  required?: FormControlProps['required'];\n  /** Disable the control. */\n  disabled?: FormControlProps['disabled'];\n  /** Visually hides the label region. */\n  labelHidden?: FormControlProps['labelHidden'];\n  /** It is recommended to pass a simple string to offer guidance. Text will be styled based on status prop. */\n  info?: FormControlProps['info'];\n  /** Set visual state based on a validation state. */\n  status?: FormControlProps['status'];\n  /** Makes the input non editable and non clickable. The browser defaults to false. */\n  readOnly?: FormControlProps['readOnly'];\n  /** Sets html name attribute for the underlying control. Useful for mapping to a data field. */\n  name?: FormControlProps['name'];\n  /** Layout field elements inline in a row. */\n  inline?: FormFieldProps['inline'];\n  /** Button when clicked will show additional information on the color picker */\n  additionalInfo?: FormFieldProps['additionalInfo'];\n  /** onChange event handler that gets called on change of value. */\n  onChange?: ColorChangeHandler;\n  /** onBeforeClose of the color picker */\n  onBeforeClose?: () => void;\n  /** Called when the underlying input element is clicked. This should be rarely if ever used. */\n  onClick?: MouseEventHandler<HTMLInputElement>;\n  /** Ref placed on the input element. */\n  ref?: Ref<HTMLInputElement>;\n}\n\ntype ColorPickerPropsWithDefaults = PropsWithDefaults<ColorPickerProps, 'value' | 'swatchOnly'>;\n\nconst StyledColorPicker = styled.div<Pick<ColorPickerPropsWithDefaults, 'swatchOnly'>>(\n  ({ theme, swatchOnly }) => {\n    const size = theme.components.input.height;\n    const borderWidth = theme.components['form-control']['border-width'];\n\n    return css`\n      ${StyledFormControl} {\n        overflow: hidden;\n        text-transform: uppercase;\n        ${!swatchOnly &&\n        css`\n          min-width: 8rem;\n        `}\n\n        ${!swatchOnly &&\n        css`\n          padding-inline-end: ${theme.base.spacing};\n        `}\n\n        &:focus-within {\n          box-shadow: ${theme.base.shadow.focus};\n          border: none;\n        }\n\n        & > input {\n          ${hideVisually}\n\n          & + div {\n            height: calc(${size} - (2 * ${borderWidth}));\n\n            ${swatchOnly\n              ? css`\n                  width: calc(${size} - (2 * ${borderWidth}));\n                `\n              : css`\n                  min-width: calc(${size} - ${borderWidth});\n                  margin-inline-end: ${theme.base.spacing};\n                  border-inline-end: ${borderWidth} solid\n                    ${theme.components['form-control']['border-color']};\n                `}\n          }\n\n          &:focus + div {\n            width: ${size};\n            height: ${size};\n          }\n        }\n\n        & input {\n          height: 2rem !important;\n          min-height: 2rem;\n          color: #000000 !important;\n          background-color: #ffffff !important;\n          font-size: 0.8125rem !important;\n          font-family: ${theme.base['font-family']};\n\n          & + label {\n            font-weight: 600;\n            color: rgba(0, 0, 0, 0.6) !important;\n            font-size: 0.8125rem !important;\n            font-family: ${theme.base['font-family']};\n          }\n        }\n      }\n    `;\n  }\n);\n\nStyledColorPicker.defaultProps = defaultThemeProp;\n\nconst ColorPicker: FC<ColorPickerProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<ColorPickerProps>, ref: ColorPickerProps['ref']) => {\n    const uid = useUID();\n    const {\n      testId,\n      id = uid,\n      value = '#000000',\n      label,\n      info,\n      disabled,\n      status,\n      required,\n      readOnly,\n      labelHidden,\n      swatchOnly = false,\n      alpha = false,\n      inline,\n      onClick,\n      onChange,\n      onBeforeClose,\n      additionalInfo,\n      ...restProps\n    } = props;\n\n    const testIds = useTestIds(testId, getColorPickerTestIds);\n\n    const inputRef = useConsolidatedRef(ref);\n    const maskedSwatchRef = useConsolidatedRef<HTMLDivElement>();\n    const [popoverEl, setPopoverEl] = useElement<HTMLElement>(null);\n    const [showPopOver, setShowPopOver] = useState(false);\n\n    const hidePopover = () => {\n      if (showPopOver) {\n        onBeforeClose?.();\n      }\n\n      setShowPopOver(false);\n    };\n\n    const closePopover = (e: KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        e.preventDefault();\n        hidePopover();\n      }\n    };\n\n    useOuterEvent('mousedown', [popoverEl], hidePopover);\n\n    useEffect(() => {\n      document.addEventListener('keydown', closePopover);\n      popoverEl?.addEventListener('keydown', closePopover);\n      return () => {\n        document.removeEventListener('keydown', closePopover);\n        popoverEl?.removeEventListener('keydown', closePopover);\n      };\n    }, [popoverEl]);\n\n    useEffect(() => {\n      if (showPopOver) {\n        popoverEl?.focus();\n      }\n    }, [showPopOver]);\n\n    return (\n      <FormField\n        testId={testIds}\n        inline={inline}\n        container={inline ? { justify: 'between' } : undefined}\n        as={StyledColorPicker}\n        id={id}\n        label={label}\n        labelHidden={labelHidden}\n        swatchOnly={swatchOnly}\n        info={info}\n        disabled={disabled}\n        status={status}\n        required={required}\n        additionalInfo={additionalInfo}\n      >\n        <Flex\n          container={{ alignItems: 'center' }}\n          item={swatchOnly ? { alignSelf: 'start' } : undefined}\n          as={StyledFormControl}\n          disabled={disabled}\n          status={status}\n          required={required}\n          readOnly={readOnly}\n          onClick={readOnly || disabled ? undefined : () => setShowPopOver(true)}\n        >\n          <input\n            data-testid={testIds.control}\n            {...restProps}\n            id={id}\n            type={readOnly ? undefined : 'color'}\n            ref={inputRef}\n            defaultValue={value}\n            disabled={disabled}\n            required={required}\n            readOnly={readOnly}\n            onClick={e => {\n              e.preventDefault();\n            }}\n          />\n          <div style={{ backgroundColor: value }} ref={maskedSwatchRef} />\n          {!swatchOnly && value}\n          <Popover\n            placement='bottom-start'\n            style={{ zIndex: '3000' }}\n            show={showPopOver}\n            ref={setPopoverEl}\n            groupId='popover'\n            target={maskedSwatchRef.current}\n          >\n            <ChromePicker\n              disableAlpha={!alpha}\n              color={value}\n              onChange={(color, e) => {\n                onChange?.(color, e);\n              }}\n            />\n          </Popover>\n        </Flex>\n      </FormField>\n    );\n  }\n);\n\nexport default ColorPicker;\n"]}
+{"version":3,"file":"ColorPicker.js","sourceRoot":"","sources":["../../../src/components/ColorPicker/ColorPicker.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  FC,\n  forwardRef,\n  Ref,\n  useState,\n  PropsWithoutRef,\n  MouseEventHandler,\n  useEffect,\n  ChangeEvent\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport { hideVisually, parseToHsl, parseToRgb } from 'polished';\n\nimport {\n  BaseProps,\n  ForwardProps,\n  NoChildrenProp,\n  PropsWithDefaults,\n  TestIdProp\n} from '../../types';\nimport { withTestIds } from '../../utils';\nimport FormField, { FormFieldProps } from '../FormField';\nimport { defaultThemeProp } from '../../theme';\nimport { FormControlProps, StyledFormControl } from '../FormControl';\nimport Flex from '../Flex';\nimport { useConsolidatedRef, useUID, useOuterEvent, useTestIds } from '../../hooks';\n\nimport { getColorPickerTestIds } from './ColorPicker.test-ids';\n\nexport interface ColorPickerProps extends BaseProps, NoChildrenProp, TestIdProp {\n  /** label for the color picker control */\n  label: FormControlProps['label'];\n  /**\n   * Sets DOM id for the control and associates label element via 'for' attribute.\n   * If an id is not passed, a random id will be generated for any render.\n   */\n  id?: FormControlProps['id'];\n  /**\n   * Color picker value in hex\n   * @default '#000000'\n   */\n  value?: FormControlProps['value'];\n  /**\n   * Show color swatch without hex value display.\n   * @default false\n   */\n  swatchOnly?: boolean;\n  /** Indicate if the field is required. The browser defaults to false. */\n  required?: FormControlProps['required'];\n  /** Disable the control. */\n  disabled?: FormControlProps['disabled'];\n  /** Visually hides the label region. */\n  labelHidden?: FormControlProps['labelHidden'];\n  /** It is recommended to pass a simple string to offer guidance. Text will be styled based on status prop. */\n  info?: FormControlProps['info'];\n  /** Set visual state based on a validation state. */\n  status?: FormControlProps['status'];\n  /** Makes the input non editable and non clickable. The browser defaults to false. */\n  readOnly?: FormControlProps['readOnly'];\n  /** Sets html name attribute for the underlying control. Useful for mapping to a data field. */\n  name?: FormControlProps['name'];\n  /** Layout field elements inline in a row. */\n  inline?: FormFieldProps['inline'];\n  /** Button when clicked will show additional information on the color picker */\n  additionalInfo?: FormFieldProps['additionalInfo'];\n  /** onChange event handler that gets called on change of value. */\n  onChange?: ColorChangeHandler;\n  /** onBeforeClose of the color picker */\n  onBeforeClose?: () => void;\n  /** Called when the underlying input element is clicked. This should be rarely if ever used. */\n  onClick?: MouseEventHandler<HTMLInputElement>;\n  /** Ref placed on the input element. */\n  ref?: Ref<HTMLInputElement>;\n}\n\ntype RGBColor = {\n  r: number;\n  g: number;\n  b: number;\n};\n\ntype HSLColor = {\n  h: number;\n  s: number;\n  l: number;\n};\n\ntype ColorResult = {\n  hex: string;\n  rgb: RGBColor;\n  hsl: HSLColor;\n};\n\ntype ColorChangeHandler = (color: ColorResult, event: ChangeEvent<HTMLInputElement>) => void;\n\ntype ColorPickerPropsWithDefaults = PropsWithDefaults<ColorPickerProps, 'value' | 'swatchOnly'>;\n\nconst StyledColorPicker = styled.div<Pick<ColorPickerPropsWithDefaults, 'swatchOnly'>>(\n  ({ theme, swatchOnly }) => {\n    const size = theme.components.input.height;\n    const borderWidth = theme.components['form-control']['border-width'];\n\n    return css`\n      ${StyledFormControl} {\n        overflow: hidden;\n        text-transform: uppercase;\n        ${!swatchOnly &&\n        css`\n          min-width: 8rem;\n        `}\n\n        ${!swatchOnly &&\n        css`\n          padding-inline-end: ${theme.base.spacing};\n        `}\n\n        &:focus-within {\n          box-shadow: ${theme.base.shadow.focus};\n          border: none;\n        }\n\n        & > input {\n          ${hideVisually}\n\n          & + div {\n            height: calc(${size} - (2 * ${borderWidth}));\n\n            ${swatchOnly\n              ? css`\n                  width: calc(${size} - (2 * ${borderWidth}));\n                `\n              : css`\n                  min-width: calc(${size} - ${borderWidth});\n                  margin-inline-end: ${theme.base.spacing};\n                  border-inline-end: ${borderWidth} solid\n                    ${theme.components['form-control']['border-color']};\n                `}\n          }\n\n          &:focus + div {\n            width: ${size};\n            height: ${size};\n          }\n        }\n\n        & input {\n          height: 2rem !important;\n          min-height: 2rem;\n          color: #000000 !important;\n          background-color: #ffffff !important;\n          font-size: 0.8125rem !important;\n          font-family: ${theme.base['font-family']};\n\n          & + label {\n            font-weight: 600;\n            color: rgba(0, 0, 0, 0.6) !important;\n            font-size: 0.8125rem !important;\n            font-family: ${theme.base['font-family']};\n          }\n        }\n      }\n    `;\n  }\n);\n\nStyledColorPicker.defaultProps = defaultThemeProp;\n\nconst ColorPicker: FC<ColorPickerProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<ColorPickerProps>, ref: ColorPickerProps['ref']) => {\n    const uid = useUID();\n    const {\n      testId,\n      id = uid,\n      value = '#000000',\n      label,\n      info,\n      disabled,\n      status,\n      required,\n      readOnly,\n      labelHidden,\n      swatchOnly = false,\n      inline,\n      onClick,\n      onChange,\n      onBeforeClose,\n      additionalInfo,\n      ...restProps\n    } = props;\n\n    const testIds = useTestIds(testId, getColorPickerTestIds);\n\n    const inputRef = useConsolidatedRef(ref);\n    const [showColorPicker, setShowColorPicker] = useState(false);\n\n    const hideColorPicker = () => {\n      if (showColorPicker) {\n        onBeforeClose?.();\n      }\n\n      setShowColorPicker(false);\n    };\n\n    useOuterEvent('mousedown', [inputRef], hideColorPicker);\n\n    useEffect(() => {\n      if (showColorPicker) {\n        inputRef?.current?.focus();\n        inputRef?.current?.click();\n      }\n    }, [showColorPicker]);\n\n    const onChangeHandler = (e: ChangeEvent<HTMLInputElement>) => {\n      const color = e.target.value;\n      const { red: r, green: g, blue: b } = parseToRgb(color);\n      const { hue: h, saturation: s, lightness: l } = parseToHsl(color);\n      onChange?.(\n        {\n          hex: color,\n          rgb: { r, g, b },\n          hsl: { h, s, l }\n        },\n        e\n      );\n    };\n\n    return (\n      <FormField\n        testId={testIds}\n        inline={inline}\n        container={inline ? { justify: 'between' } : undefined}\n        as={StyledColorPicker}\n        id={id}\n        label={label}\n        labelHidden={labelHidden}\n        swatchOnly={swatchOnly}\n        info={info}\n        disabled={disabled}\n        status={status}\n        required={required}\n        additionalInfo={additionalInfo}\n      >\n        <Flex\n          container={{ alignItems: 'center' }}\n          item={swatchOnly ? { alignSelf: 'start' } : undefined}\n          as={StyledFormControl}\n          disabled={disabled}\n          status={status}\n          required={required}\n          readOnly={readOnly}\n          onClick={readOnly || disabled ? undefined : () => setShowColorPicker(true)}\n        >\n          <input\n            data-testid={testIds.control}\n            {...restProps}\n            id={id}\n            type={readOnly ? undefined : 'color'}\n            ref={inputRef}\n            defaultValue={value}\n            disabled={disabled}\n            required={required}\n            readOnly={readOnly}\n            onChange={onChangeHandler}\n          />\n          <div style={{ backgroundColor: value }} />\n          {!swatchOnly && value}\n        </Flex>\n      </FormField>\n    );\n  }\n);\n\nexport default withTestIds(ColorPicker, getColorPickerTestIds);\n"]}