@cube-dev/ui-kit 0.182.0 → 0.183.0

package/dist/components/content/InfoBadge/InfoBadge.js.map

@@ -1 +1 @@
-{"version":3,"file":"InfoBadge.js","names":[],"sources":["../../../../src/components/content/InfoBadge/InfoBadge.tsx"],"sourcesContent":["import { FocusableRefValue } from '@react-types/shared';\nimport { BaseProps, mergeStyles, Styles, tasty } from '@tenphi/tasty';\nimport {\n  ForwardedRef,\n  forwardRef,\n  isValidElement,\n  KeyboardEvent,\n  MouseEvent,\n  PointerEvent,\n  ReactNode,\n  useCallback,\n  useMemo,\n} from 'react';\n\nimport { useI18n } from '../../../i18n';\nimport { InfoCircleIcon } from '../../../icons/InfoCircleIcon';\nimport { CubeItemActionProps, ItemAction } from '../../actions/ItemAction';\nimport { CubeUseActionProps } from '../../actions/use-action';\nimport { CubeTooltipProviderProps } from '../../overlays/Tooltip/TooltipProvider';\nimport { ItemBadge } from '../ItemBadge';\n\nexport type CubeInfoBadgeTooltipConfig = Omit<\n  CubeTooltipProviderProps,\n  'children'\n>;\n\nexport interface CubeInfoBadgeProps\n  extends Omit<BaseProps, 'children'>,\n    Partial<\n      Pick<\n        CubeUseActionProps,\n        'to' | 'onPress' | 'navigationOptions' | 'target' | 'label'\n      >\n    > {\n  /**\n   * Tooltip content. Either the content itself or a configuration object\n   * `{ title, ...tooltipProps }` for advanced setups (placement, delay, etc.).\n   */\n  tooltip: ReactNode | CubeInfoBadgeTooltipConfig;\n  /**\n   * Text appended to the tooltip content. Defaults to a \"learn more\" hint when\n   * the badge is interactive (`to` or `onPress` is provided). Pass `null` or an\n   * empty string to opt out.\n   */\n  tooltipSuffix?: ReactNode;\n  /** Icon to render. @default <InfoCircleIcon /> */\n  icon?: ReactNode;\n  /**\n   * Size of the badge. Every size still contributes exactly one line to the\n   * text around it, so the badge stays aligned with adjacent text.\n   * @default \"medium\"\n   */\n  size?: 'small' | 'medium' | 'large';\n  /** @default \"clear\" */\n  type?: 'primary' | 'outline' | 'clear';\n  /** @default \"default\" */\n  theme?: 'default' | 'danger' | 'success';\n  isLoading?: boolean;\n  isDisabled?: boolean;\n  styles?: Styles;\n}\n\nconst SIZES: Record<NonNullable<CubeInfoBadgeProps['size']>, string> = {\n  small: '2x',\n  medium: '2.5x',\n  large: '3x',\n};\n\n/**\n * The info badge is a leaf element that is often placed inside a bigger click\n * target: a field `<label>`, a switch row, a table header, a list item. Neither\n * the tooltip nor the optional navigation should ever activate that container,\n * so the events that would do so are contained here.\n *\n * The guard sits *above* the badge, so the badge's own handlers (including\n * `usePress`, which fires `onPress` from the `click` event) run first and stay\n * intact. `preventDefault` on click is what stops an enclosing `<label>` from\n * forwarding activation to its control — `stopPropagation` alone can't.\n *\n * `pointerup` / `mouseup` are intentionally left alone: `usePress` finishes a\n * press through document-level listeners for those events.\n */\nconst GUARD_HANDLERS = {\n  onClick: (event: MouseEvent) => {\n    event.preventDefault();\n    event.stopPropagation();\n  },\n  onPointerDown: (event: PointerEvent) => event.stopPropagation(),\n  onMouseDown: (event: MouseEvent) => event.stopPropagation(),\n  onKeyDown: (event: KeyboardEvent) => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.stopPropagation();\n    }\n  },\n  onKeyUp: (event: KeyboardEvent) => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.stopPropagation();\n    }\n  },\n};\n\n/**\n * `display: contents` keeps the guard out of the layout entirely while staying\n * in the event path, so the badge remains a direct flex/grid/inline child of\n * whatever contains it.\n */\nconst GuardElement = tasty({\n  as: 'span',\n  styles: { display: 'contents' },\n});\n\n/**\n * Sizing the badge so it aligns with the text beside it.\n *\n * The box is a fixed square, but its *margin* box is padded (or trimmed, for\n * `large` in tight text) to exactly one line. An atomic inline's margin box is\n * what the line box measures, so `vertical-align: top` then lands the badge's\n * center on the line box center — where the adjacent text is optically\n * centered — at every size, in inline and block containers alike.\n *\n * `vertical-align: middle` can't do this: it aligns the box center with the\n * x-height midpoint, ~1.5px below the text center, and inflates the line box,\n * which pushes the badge down again inside a block container (a field's\n * `labelSuffix`, a paragraph).\n *\n * `preset: inherit` is what makes `1lh` mean the line the badge sits on. It\n * also keeps the glyph identical across render paths, since `ItemAction` pins\n * itself to the `t4` preset while `ItemBadge` inherits.\n */\nfunction sizeStyles(size: NonNullable<CubeInfoBadgeProps['size']>): Styles {\n  const box = SIZES[size];\n\n  return {\n    preset: 'inherit',\n    height: box,\n    width: box,\n    // Replaces the base first/last-child margin rules outright, so the badge\n    // doesn't reserve an `Item` action row's side padding as an outer margin.\n    margin: `((1lh - ${box}) / 2) 0`,\n    verticalAlign: 'top',\n    Icon: {\n      height: box,\n      width: box,\n      '$icon-size': `(${box} - .25x)`,\n    },\n  };\n}\n\n// Soft → strong on interaction, mirroring the link styles: the badge reads as a\n// quiet brand-colored hint at rest and gains contrast once it's engaged.\n//\n// A state map with a `''` entry replaces the variant's map outright, so the\n// disabled color has to be restated here (`@inherit` can't reach the variant —\n// it isn't the parent map in this merge) or a disabled badge would keep the\n// brand tint and still read as interactive.\nconst INFO_STYLES: Styles = {\n  color: {\n    '': '#primary-text-soft',\n    'hovered | focused': '#primary-text',\n    pressed: '#primary-text',\n    disabled: '#disabled-surface-text',\n  },\n};\n\nfunction isTooltipConfig(\n  value: ReactNode | CubeInfoBadgeTooltipConfig,\n): value is CubeInfoBadgeTooltipConfig {\n  return (\n    typeof value === 'object' &&\n    value !== null &&\n    !isValidElement(value) &&\n    !Array.isArray(value)\n  );\n}\n\n/**\n * An informational icon with a tooltip. Renders as a plain badge by default and\n * upgrades to a link / button when `to` or `onPress` is provided.\n */\nexport const InfoBadge = forwardRef(function InfoBadge(\n  allProps: CubeInfoBadgeProps,\n  ref: ForwardedRef<HTMLElement>,\n) {\n  const { t } = useI18n();\n\n  const {\n    tooltip,\n    tooltipSuffix,\n    icon = <InfoCircleIcon />,\n    size = 'medium',\n    type = 'clear',\n    theme = 'default',\n    to,\n    onPress,\n    navigationOptions,\n    target,\n    label,\n    qa = 'InfoBadge',\n    styles,\n    ...rest\n  } = allProps;\n\n  const isInteractive = to != null || onPress != null;\n\n  const { title, tooltipProps } = useMemo(() => {\n    if (isTooltipConfig(tooltip)) {\n      const { title, ...tooltipProps } = tooltip;\n\n      return { title, tooltipProps };\n    }\n\n    return { title: tooltip, tooltipProps: {} };\n  }, [tooltip]);\n\n  const suffix =\n    tooltipSuffix === undefined\n      ? isInteractive\n        ? t('infoBadge.learnMore', 'Click to learn more.')\n        : null\n      : tooltipSuffix;\n\n  const finalTooltip = useMemo(\n    () => ({\n      ...tooltipProps,\n      title: suffix ? (\n        <>\n          {title} {suffix}\n        </>\n      ) : (\n        title\n      ),\n    }),\n    [tooltipProps, title, suffix],\n  );\n\n  // The accessible name is the tooltip text itself when it's plain text. Rich\n  // tooltip content can't serve as a label, so fall back to a generic one.\n  const ariaLabel =\n    label ??\n    rest['aria-label'] ??\n    (typeof title === 'string'\n      ? title\n      : t('infoBadge.ariaLabel', 'More information'));\n\n  const finalStyles = useMemo(\n    () =>\n      mergeStyles(\n        sizeStyles(size),\n        // Only the default look is brand-tinted; explicit themes and filled\n        // types bring their own colors.\n        theme === 'default' && type === 'clear' ? INFO_STYLES : null,\n        styles,\n      ),\n    [size, theme, type, styles],\n  );\n\n  // `ItemAction` exposes a react-spectrum focusable ref; unwrap it so that `ref`\n  // points at the DOM node whether or not the badge is interactive.\n  const actionRef = useCallback(\n    (value: FocusableRefValue<HTMLElement> | null) => {\n      const element = value ? value.UNSAFE_getDOMNode() : null;\n\n      if (typeof ref === 'function') {\n        ref(element);\n      } else if (ref) {\n        ref.current = element;\n      }\n    },\n    [ref],\n  );\n\n  const sharedProps = {\n    ...rest,\n    qa,\n    icon,\n    type,\n    theme,\n    styles: finalStyles,\n    'aria-label': ariaLabel,\n    tooltip: finalTooltip as CubeItemActionProps['tooltip'],\n  };\n\n  return (\n    <GuardElement {...GUARD_HANDLERS}>\n      {isInteractive ? (\n        <ItemAction\n          ref={actionRef}\n          to={to}\n          onPress={onPress}\n          navigationOptions={navigationOptions}\n          target={target}\n          {...sharedProps}\n        />\n      ) : (\n        <ItemBadge ref={ref as ForwardedRef<HTMLDivElement>} {...sharedProps} />\n      )}\n    </GuardElement>\n  );\n});\n\nexport type { CubeInfoBadgeProps as InfoBadgeProps };\n"],"mappings":";;;;;;;;;;AA8DA,MAAM,QAAiE;CACrE,OAAO;CACP,QAAQ;CACR,OAAO;CACR;;;;;;;;;;;;;;;AAgBD,MAAM,iBAAiB;CACrB,UAAU,UAAsB;AAC9B,QAAM,gBAAgB;AACtB,QAAM,iBAAiB;;CAEzB,gBAAgB,UAAwB,MAAM,iBAAiB;CAC/D,cAAc,UAAsB,MAAM,iBAAiB;CAC3D,YAAY,UAAyB;AACnC,MAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,IACzC,OAAM,iBAAiB;;CAG3B,UAAU,UAAyB;AACjC,MAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,IACzC,OAAM,iBAAiB;;CAG5B;;;;;;AAOD,MAAM,eAAe,MAAM;CACzB,IAAI;CACJ,QAAQ,EAAE,SAAS,YAAY;CAChC,CAAC;;;;;;;;;;;;;;;;;;;AAoBF,SAAS,WAAW,MAAuD;CACzE,MAAM,MAAM,MAAM;AAElB,QAAO;EACL,QAAQ;EACR,QAAQ;EACR,OAAO;EAGP,QAAQ,WAAW,IAAI;EACvB,eAAe;EACf,MAAM;GACJ,QAAQ;GACR,OAAO;GACP,cAAc,IAAI,IAAI;GACvB;EACF;;AAUH,MAAM,cAAsB,EAC1B,OAAO;CACL,IAAI;CACJ,qBAAqB;CACrB,SAAS;CACT,UAAU;CACX,EACF;AAED,SAAS,gBACP,OACqC;AACrC,QACE,OAAO,UAAU,YACjB,UAAU,QACV,CAAC,eAAe,MAAM,IACtB,CAAC,MAAM,QAAQ,MAAM;;;;;;AAQzB,MAAa,YAAY,WAAW,SAAS,UAC3C,UACA,KACA;CACA,MAAM,EAAE,MAAM,SAAS;CAEvB,MAAM,EACJ,SACA,eACA,OAAO,oBAAC,mBAAiB,EACzB,OAAO,UACP,OAAO,SACP,QAAQ,WACR,IACA,SACA,mBACA,QACA,OACA,KAAK,aACL,QACA,GAAG,SACD;CAEJ,MAAM,gBAAgB,MAAM,QAAQ,WAAW;CAE/C,MAAM,EAAE,OAAO,iBAAiB,cAAc;AAC5C,MAAI,gBAAgB,QAAQ,EAAE;GAC5B,MAAM,EAAE,OAAO,GAAG,iBAAiB;AAEnC,UAAO;IAAE;IAAO;IAAc;;AAGhC,SAAO;GAAE,OAAO;GAAS,cAAc,EAAE;GAAE;IAC1C,CAAC,QAAQ,CAAC;CAEb,MAAM,SACJ,kBAAkB,SACd,gBACE,EAAE,uBAAuB,uBAAuB,GAChD,OACF;CAEN,MAAM,eAAe,eACZ;EACL,GAAG;EACH,OAAO,SACL;GACG;GAAM;GAAE;MACR,GAEH;EAEH,GACD;EAAC;EAAc;EAAO;EAAO,CAC9B;CAID,MAAM,YACJ,SACA,KAAK,kBACJ,OAAO,UAAU,WACd,QACA,EAAE,uBAAuB,mBAAmB;CAElD,MAAM,cAAc,cAEhB,YACE,WAAW,KAAK,EAGhB,UAAU,aAAa,SAAS,UAAU,cAAc,MACxD,OACD,EACH;EAAC;EAAM;EAAO;EAAM;EAAO,CAC5B;CAID,MAAM,YAAY,aACf,UAAiD;EAChD,MAAM,UAAU,QAAQ,MAAM,mBAAmB,GAAG;AAEpD,MAAI,OAAO,QAAQ,WACjB,KAAI,QAAQ;WACH,IACT,KAAI,UAAU;IAGlB,CAAC,IAAI,CACN;CAED,MAAM,cAAc;EAClB,GAAG;EACH;EACA;EACA;EACA;EACA,QAAQ;EACR,cAAc;EACd,SAAS;EACV;AAED,QACE,oBAAC;EAAa,GAAI;YACf,gBACC,oBAAC;GACC,KAAK;GACD;GACK;GACU;GACX;GACR,GAAI;IACJ,GAEF,oBAAC;GAAe;GAAqC,GAAI;IAAe;GAE7D;EAEjB"}
+{"version":3,"file":"InfoBadge.js","names":["FocusableRefValue","BaseProps","mergeStyles","Styles","tasty","ForwardedRef","forwardRef","isValidElement","KeyboardEvent","MouseEvent","PointerEvent","ReactNode","useCallback","useMemo","useI18n","InfoCircleIcon","CubeItemActionProps","ItemAction","CubeUseActionProps","CubeTooltipProviderProps","ItemBadge","CubeInfoBadgeTooltipConfig","Omit","CubeInfoBadgeProps","Partial","Pick","tooltip","tooltipSuffix","icon","size","type","theme","isLoading","isDisabled","styles","SIZES","Record","NonNullable","small","medium","large","GUARD_HANDLERS","onClick","event","preventDefault","stopPropagation","onPointerDown","onMouseDown","onKeyDown","key","onKeyUp","GuardElement","as","display","sizeStyles","box","preset","height","width","margin","verticalAlign","Icon","INFO_STYLES","color","pressed","disabled","isTooltipConfig","value","Array","isArray","InfoBadge","allProps","ref","HTMLElement","t","to","onPress","navigationOptions","target","label","qa","rest","isInteractive","title","tooltipProps","suffix","undefined","finalTooltip","ariaLabel","finalStyles","actionRef","element","UNSAFE_getDOMNode","current","sharedProps","HTMLDivElement","InfoBadgeProps"],"sources":["../../../../src/components/content/InfoBadge/InfoBadge.tsx"],"sourcesContent":["import { FocusableRefValue } from '@react-types/shared';\nimport { BaseProps, mergeStyles, Styles, tasty } from '@tenphi/tasty';\nimport {\n  ForwardedRef,\n  forwardRef,\n  isValidElement,\n  KeyboardEvent,\n  MouseEvent,\n  PointerEvent,\n  ReactNode,\n  useCallback,\n  useMemo,\n} from 'react';\n\nimport { useI18n } from '../../../i18n';\nimport { InfoCircleIcon } from '../../../icons/InfoCircleIcon';\nimport { CubeItemActionProps, ItemAction } from '../../actions/ItemAction';\nimport { CubeUseActionProps } from '../../actions/use-action';\nimport { CubeTooltipProviderProps } from '../../overlays/Tooltip/TooltipProvider';\nimport { ItemBadge } from '../ItemBadge';\n\nexport type CubeInfoBadgeTooltipConfig = Omit<\n  CubeTooltipProviderProps,\n  'children'\n>;\n\nexport interface CubeInfoBadgeProps\n  extends Omit<BaseProps, 'children'>,\n    Partial<\n      Pick<\n        CubeUseActionProps,\n        'to' | 'onPress' | 'navigationOptions' | 'target' | 'label'\n      >\n    > {\n  /**\n   * Tooltip content. Either the content itself or a configuration object\n   * `{ title, ...tooltipProps }` for advanced setups (placement, delay, etc.).\n   */\n  tooltip: ReactNode | CubeInfoBadgeTooltipConfig;\n  /**\n   * Text appended to the tooltip content. Defaults to a \"learn more\" hint when\n   * the badge is interactive (`to` or `onPress` is provided). Pass `null` or an\n   * empty string to opt out.\n   */\n  tooltipSuffix?: ReactNode;\n  /** Icon to render. @default <InfoCircleIcon /> */\n  icon?: ReactNode;\n  /**\n   * Size of the badge. Every size still contributes exactly one line to the\n   * text around it, so the badge stays aligned with adjacent text.\n   * @default \"medium\"\n   */\n  size?: 'small' | 'medium' | 'large';\n  /** @default \"clear\" */\n  type?: 'primary' | 'outline' | 'clear';\n  /** @default \"default\" */\n  theme?: 'default' | 'danger' | 'success';\n  isLoading?: boolean;\n  isDisabled?: boolean;\n  styles?: Styles;\n}\n\nconst SIZES: Record<NonNullable<CubeInfoBadgeProps['size']>, string> = {\n  small: '2x',\n  medium: '2.5x',\n  large: '3x',\n};\n\n/**\n * The info badge is a leaf element that is often placed inside a bigger click\n * target: a field `<label>`, a switch row, a table header, a list item. Neither\n * the tooltip nor the optional navigation should ever activate that container,\n * so the events that would do so are contained here.\n *\n * The guard sits *above* the badge, so the badge's own handlers (including\n * `usePress`, which fires `onPress` from the `click` event) run first and stay\n * intact. `preventDefault` on click is what stops an enclosing `<label>` from\n * forwarding activation to its control — `stopPropagation` alone can't.\n *\n * `pointerup` / `mouseup` are intentionally left alone: `usePress` finishes a\n * press through document-level listeners for those events.\n */\nconst GUARD_HANDLERS = {\n  onClick: (event: MouseEvent) => {\n    event.preventDefault();\n    event.stopPropagation();\n  },\n  onPointerDown: (event: PointerEvent) => event.stopPropagation(),\n  onMouseDown: (event: MouseEvent) => event.stopPropagation(),\n  onKeyDown: (event: KeyboardEvent) => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.stopPropagation();\n    }\n  },\n  onKeyUp: (event: KeyboardEvent) => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.stopPropagation();\n    }\n  },\n};\n\n/**\n * `display: contents` keeps the guard out of the layout entirely while staying\n * in the event path, so the badge remains a direct flex/grid/inline child of\n * whatever contains it.\n */\nconst GuardElement = tasty({\n  as: 'span',\n  styles: { display: 'contents' },\n});\n\n/**\n * Sizing the badge so it aligns with the text beside it.\n *\n * The box is a fixed square, but its *margin* box is padded (or trimmed, for\n * `large` in tight text) to exactly one line. An atomic inline's margin box is\n * what the line box measures, so `vertical-align: top` then lands the badge's\n * center on the line box center — where the adjacent text is optically\n * centered — at every size, in inline and block containers alike.\n *\n * `vertical-align: middle` can't do this: it aligns the box center with the\n * x-height midpoint, ~1.5px below the text center, and inflates the line box,\n * which pushes the badge down again inside a block container (a field's\n * `labelSuffix`, a paragraph).\n *\n * `preset: inherit` is what makes `1lh` mean the line the badge sits on. It\n * also keeps the glyph identical across render paths, since `ItemAction` pins\n * itself to the `t4` preset while `ItemBadge` inherits.\n */\nfunction sizeStyles(size: NonNullable<CubeInfoBadgeProps['size']>): Styles {\n  const box = SIZES[size];\n\n  return {\n    preset: 'inherit',\n    height: box,\n    width: box,\n    // Replaces the base first/last-child margin rules outright, so the badge\n    // doesn't reserve an `Item` action row's side padding as an outer margin.\n    margin: `((1lh - ${box}) / 2) 0`,\n    verticalAlign: 'top',\n    Icon: {\n      height: box,\n      width: box,\n      '$icon-size': `(${box} - .25x)`,\n    },\n  };\n}\n\n// Soft → strong on interaction, mirroring the link styles: the badge reads as a\n// quiet brand-colored hint at rest and gains contrast once it's engaged.\n//\n// A state map with a `''` entry replaces the variant's map outright, so the\n// disabled color has to be restated here (`@inherit` can't reach the variant —\n// it isn't the parent map in this merge) or a disabled badge would keep the\n// brand tint and still read as interactive.\nconst INFO_STYLES: Styles = {\n  color: {\n    '': '#primary-text-soft',\n    'hovered | focused': '#primary-text',\n    pressed: '#primary-text',\n    disabled: '#disabled-surface-text',\n  },\n};\n\nfunction isTooltipConfig(\n  value: ReactNode | CubeInfoBadgeTooltipConfig,\n): value is CubeInfoBadgeTooltipConfig {\n  return (\n    typeof value === 'object' &&\n    value !== null &&\n    !isValidElement(value) &&\n    !Array.isArray(value)\n  );\n}\n\n/**\n * An informational icon with a tooltip. Renders as a plain badge by default and\n * upgrades to a link / button when `to` or `onPress` is provided.\n */\nexport const InfoBadge = forwardRef(function InfoBadge(\n  allProps: CubeInfoBadgeProps,\n  ref: ForwardedRef<HTMLElement>,\n) {\n  const { t } = useI18n();\n\n  const {\n    tooltip,\n    tooltipSuffix,\n    icon = <InfoCircleIcon />,\n    size = 'medium',\n    type = 'clear',\n    theme = 'default',\n    to,\n    onPress,\n    navigationOptions,\n    target,\n    label,\n    qa = 'InfoBadge',\n    styles,\n    ...rest\n  } = allProps;\n\n  const isInteractive = to != null || onPress != null;\n\n  const { title, tooltipProps } = useMemo(() => {\n    if (isTooltipConfig(tooltip)) {\n      const { title, ...tooltipProps } = tooltip;\n\n      return { title, tooltipProps };\n    }\n\n    return { title: tooltip, tooltipProps: {} };\n  }, [tooltip]);\n\n  const suffix =\n    tooltipSuffix === undefined\n      ? isInteractive\n        ? t('infoBadge.learnMore', 'Click to learn more.')\n        : null\n      : tooltipSuffix;\n\n  const finalTooltip = useMemo(\n    () => ({\n      ...tooltipProps,\n      title: suffix ? (\n        <>\n          {title} {suffix}\n        </>\n      ) : (\n        title\n      ),\n    }),\n    [tooltipProps, title, suffix],\n  );\n\n  // The accessible name is the tooltip text itself when it's plain text. Rich\n  // tooltip content can't serve as a label, so fall back to a generic one.\n  const ariaLabel =\n    label ??\n    rest['aria-label'] ??\n    (typeof title === 'string'\n      ? title\n      : t('infoBadge.ariaLabel', 'More information'));\n\n  const finalStyles = useMemo(\n    () =>\n      mergeStyles(\n        sizeStyles(size),\n        // Only the default look is brand-tinted; explicit themes and filled\n        // types bring their own colors.\n        theme === 'default' && type === 'clear' ? INFO_STYLES : null,\n        styles,\n      ),\n    [size, theme, type, styles],\n  );\n\n  // `ItemAction` exposes a react-spectrum focusable ref; unwrap it so that `ref`\n  // points at the DOM node whether or not the badge is interactive.\n  const actionRef = useCallback(\n    (value: FocusableRefValue<HTMLElement> | null) => {\n      const element = value ? value.UNSAFE_getDOMNode() : null;\n\n      if (typeof ref === 'function') {\n        ref(element);\n      } else if (ref) {\n        ref.current = element;\n      }\n    },\n    [ref],\n  );\n\n  const sharedProps = {\n    ...rest,\n    qa,\n    icon,\n    type,\n    theme,\n    styles: finalStyles,\n    'aria-label': ariaLabel,\n    tooltip: finalTooltip as CubeItemActionProps['tooltip'],\n  };\n\n  return (\n    <GuardElement {...GUARD_HANDLERS}>\n      {isInteractive ? (\n        <ItemAction\n          ref={actionRef}\n          to={to}\n          onPress={onPress}\n          navigationOptions={navigationOptions}\n          target={target}\n          {...sharedProps}\n        />\n      ) : (\n        <ItemBadge ref={ref as ForwardedRef<HTMLDivElement>} {...sharedProps} />\n      )}\n    </GuardElement>\n  );\n});\n\nexport type { CubeInfoBadgeProps as InfoBadgeProps };\n"],"mappings":"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"}