@react-spectrum/s2/dist/NotificationBadge.css.map

Spectrum 2 UI components in React

{"mappings":"AAgDc;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAAA;EAAA;;;;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA","sources":["packages/@react-spectrum/s2/src/NotificationBadge.tsx"],"sourcesContent":["/*\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaLabelingProps, DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';\nimport {ContextValue, SlotProps} from 'react-aria-components';\nimport {filterDOMProps} from '@react-aria/utils';\nimport {fontRelative, style} from '../style' with {type: 'macro'};\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {NumberFormatter} from '@internationalized/number';\nimport React, {createContext, forwardRef} from 'react';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface NotificationBadgeStyleProps {\n  /**\n   * The size of the notification badge.\n   *\n   * @default 'S'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL'\n}\n\nexport interface NotificationBadgeProps extends DOMProps, AriaLabelingProps, StyleProps, NotificationBadgeStyleProps, SlotProps {\n  /**\n   * The value to be displayed in the notification badge.\n   */\n  value?: number | null\n}\n\ninterface NotificationBadgeContextProps extends Partial<NotificationBadgeProps> {\n  isDisabled?: boolean,\n  staticColor?: 'black' | 'white' | 'auto'\n}\n\nexport const NotificationBadgeContext = createContext<ContextValue<Partial<NotificationBadgeContextProps>, DOMRefValue<HTMLDivElement>>>(null);\n\nconst badge = style({\n  display: {\n    default: 'flex',\n    isDisabled: 'none'\n  },\n  font: 'ui',\n  color: {\n    default: 'white',\n    isStaticColor: 'auto',\n    forcedColors: 'ButtonText'\n  },\n  fontSize: {\n    size: {\n      S: 'ui-xs',\n      M: 'ui-xs',\n      L: 'ui-sm',\n      XL: 'ui'\n    }\n  },\n  borderStyle: {\n    forcedColors: 'solid'\n  },\n  borderWidth: {\n    forcedColors: '[1px]'\n  },\n  borderColor: {\n    forcedColors: 'ButtonBorder'\n  },\n  justifyContent: 'center',\n  alignItems: 'center',\n  backgroundColor: {\n    default: 'accent',\n    isStaticColor: 'transparent-overlay-1000',\n    forcedColors: 'ButtonFace'\n  },\n  height: {\n    size: {\n      S: {\n        default: 12,\n        isIndicatorOnly: 8\n      },\n      M: {\n        default: fontRelative(18), // sort of arbitrary? tried to get as close to the figma designs as possible\n        isIndicatorOnly: 8\n      },\n      L: {\n        default: 16,\n        isIndicatorOnly: fontRelative(12)\n      },\n      XL: {\n        default: 18,\n        isIndicatorOnly: fontRelative(12)\n      }\n    }\n  },\n  aspectRatio: {\n    isIndicatorOnly: 'square',\n    isSingleDigit: 'square'\n  },\n  width: 'max',\n  paddingX: {\n    isDoubleDigit: 'edge-to-text'\n  },\n  borderRadius: 'pill'\n}, getAllowedOverrides());\n\n/**\n * Notification badges are used to indicate new or pending activity .\n */\nexport const NotificationBadge = forwardRef(function Badge(props: NotificationBadgeProps, ref: DOMRef<HTMLDivElement>) {\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n  [props, ref] = useSpectrumContextProps(props, ref, NotificationBadgeContext);\n  let {\n    size = 'S',\n    value,\n    isDisabled = false,\n    staticColor,\n    ...otherProps\n  } = props as NotificationBadgeContextProps;\n  let domRef = useDOMRef(ref);\n  let {locale} = useLocale();\n  let formattedValue = '';\n\n  let isIndicatorOnly = false;\n  let isSingleDigit = false;\n  let isDoubleDigit = false;\n\n  if (value == null) {\n    isIndicatorOnly = true;\n  } else if (value <= 0) {\n    throw new Error('Value cannot be negative or zero');\n  } else if (!Number.isInteger(value)) {\n    throw new Error('Value must be a positive integer');\n  } else {\n    formattedValue = new NumberFormatter(locale).format(Math.min(value, 99));\n    let length = Math.log(value <= 99 ? value : 99) * Math.LOG10E + 1 | 0;  // for positive integers (https://stackoverflow.com/questions/14879691/get-number-of-digits-with-javascript)\n    if (length === 1) {\n      isSingleDigit = true;\n    } else if (length === 2) {\n      isDoubleDigit = true;\n    }\n\n    if (value > 99) {\n      formattedValue = stringFormatter.format('notificationbadge.plus', {notifications: formattedValue});\n    }\n  }\n\n  let ariaLabel = props['aria-label'] || undefined;\n  if (ariaLabel === undefined && isIndicatorOnly) {\n    ariaLabel = stringFormatter.format('notificationbadge.indicatorOnly');\n  }\n\n  return (\n    <span\n      {...filterDOMProps(otherProps, {labelable: true})}\n      role={ariaLabel && 'img'}\n      aria-label={ariaLabel}\n      className={(props.UNSAFE_className || '') + badge({size, isIndicatorOnly, isSingleDigit, isDoubleDigit, isDisabled, isStaticColor: !!staticColor}, props.styles)}\n      style={props.UNSAFE_style}\n      ref={domRef}>\n      {formattedValue}\n    </span>\n  );\n});\n"],"names":[],"version":3,"file":"NotificationBadge.css.map"}