@televet/kibble-ui 5.1.1 → 5.2.0

package/dist/chunks/notificationCounter.component-DikPb9gS.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"notificationCounter.component-DikPb9gS.js","sources":["../../src/components/NotificationCounter/notificationCounter.recipe.ts","../../src/components/NotificationCounter/notificationCounter.records.ts","../../src/components/NotificationCounter/notificationCounter.component.tsx"],"sourcesContent":["import { defineSlotRecipe, SystemStyleObject } from '@chakra-ui/react/styled-system';\nimport { NotificationCounterSize, NotificationCounterVariant } from './notificationCounter.types';\n\nconst notificationCounterSlots = ['root', 'maxElement'] as const;\ntype NotificationCounterSlot = (typeof notificationCounterSlots)[number];\n\nconst notificationCounterVariantStyles: Record<\n  NotificationCounterVariant,\n  Record<NotificationCounterSlot, SystemStyleObject>\n> = {\n  blue: {\n    root: {\n      bgColor: 'background.accent',\n      color: 'text.contrast',\n    },\n    maxElement: {\n      bgColor: 'text.contrast',\n    },\n  },\n  green: {\n    root: {\n      bgColor: 'background.success.contrast',\n      color: 'text.contrast',\n    },\n    maxElement: {\n      bgColor: 'text.contrast',\n    },\n  },\n  neutral: {\n    root: {\n      bgColor: 'background.subtle.less',\n      color: 'text',\n    },\n    maxElement: {\n      bgColor: 'text',\n    },\n  },\n  red: {\n    root: {\n      bgColor: 'background.danger.contrast',\n      color: 'text.contrast',\n    },\n    maxElement: {\n      bgColor: 'text.contrast',\n    },\n  },\n};\n\nconst notificationCounterSizeStyles: Record<\n  NotificationCounterSize,\n  Record<NotificationCounterSlot, SystemStyleObject>\n> = {\n  xs: {\n    root: {\n      fontSize: '8px',\n      height: 3,\n      width: 3,\n    },\n    maxElement: {\n      height: '1px',\n      width: '1px',\n    },\n  },\n  sm: {\n    root: { fontSize: '10px', height: 4, width: 4 },\n    maxElement: {\n      height: '2px',\n      width: '2px',\n    },\n  },\n  md: {\n    root: {\n      fontSize: 'xs',\n      height: 5,\n      width: 5,\n    },\n    maxElement: {\n      height: '3px',\n      width: '3px',\n    },\n  },\n  lg: {\n    root: {\n      fontSize: 'sm',\n      height: 6,\n      width: 6,\n    },\n    maxElement: {\n      height: 1,\n      width: 1,\n    },\n  },\n};\n\nexport const notificationCounterRecipe = defineSlotRecipe({\n  slots: notificationCounterSlots,\n  base: {\n    root: {\n      alignItems: 'center',\n      border: '1px',\n      borderColor: 'background',\n      borderRadius: 'full',\n      fontWeight: 'semibold',\n      justifyContent: 'center',\n    },\n    maxElement: {\n      borderRadius: 'full',\n    },\n  },\n  variants: {\n    size: notificationCounterSizeStyles,\n    variant: notificationCounterVariantStyles,\n  },\n  defaultVariants: {\n    size: 'md',\n    variant: 'red',\n  },\n});\n","import { SpinnerSize } from 'components/Spinner/spinner.types';\nimport { NotificationCounterSize, NotificationCounterVariant } from './notificationCounter.types';\nimport { TypographyVariant } from 'shared/types';\n\nexport const MAX_COUNT = 99;\n\nexport const notificationCounterSpinnerSize: Record<NotificationCounterSize, SpinnerSize | null> = {\n  xs: null, // The xs size doesn't show a spinner\n  sm: 'xs',\n  md: 'xs',\n  lg: 'sm',\n};\n\nexport const spinnerVariantToNotificationCounterVariant: Record<NotificationCounterVariant, TypographyVariant> = {\n  red: 'dangerOnContrast',\n  blue: 'interactiveOnContrast',\n  green: 'brandOnContrast',\n  neutral: 'subtleOnContrast',\n};\n","import React, { useMemo } from 'react';\nimport { Flex, FlexProps } from '@chakra-ui/react/flex';\nimport { NotificationCounterSize, NotificationCounterVariant } from './notificationCounter.types';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { notificationCounterRecipe } from './notificationCounter.recipe';\nimport {\n  MAX_COUNT,\n  notificationCounterSpinnerSize,\n  spinnerVariantToNotificationCounterVariant,\n} from './notificationCounter.records';\nimport { Spinner } from 'components/Spinner/spinner.component';\nimport { Box } from '@chakra-ui/react/box';\n\nexport interface NotificationCounterProps extends FlexProps {\n  /** Value of the notification counter. If count is greater than 99, the count will be hidden and a special indicator will take its place. */\n  count?: number;\n  /** If true, the notification counter will show a spinner.\n   * @default false\n   */\n  loading?: boolean;\n  /** Whether or not to show the counter label. If the size is xs, by default the count label won't be shown.\n   * @default true\n   */\n  showCount?: boolean;\n  /** Size of the notification counter\n   * @default md\n   */\n  size?: NotificationCounterSize;\n  /** Color variant for the notification counter\n   * @default red\n   */\n  variant?: NotificationCounterVariant;\n  /** Data test id for the notification counter.\n   * @default kibble-notification-counter\n   */\n  'data-testid'?: string;\n}\n\nexport const NotificationCounter = ({\n  count,\n  loading = false,\n  showCount = true,\n  size = 'md',\n  variant = 'red',\n  ['data-testid']: dataTestId = 'kibble-notification-counter',\n  ...rest\n}: NotificationCounterProps): React.JSX.Element => {\n  const recipe = useSlotRecipe({ recipe: notificationCounterRecipe });\n  const styles = recipe({ size, variant });\n  const shouldShowCount = size !== 'xs' && showCount;\n\n  const counterContent = useMemo(() => {\n    const _spinnerSize = notificationCounterSpinnerSize[size];\n    const _spinnerVariant = spinnerVariantToNotificationCounterVariant[variant];\n\n    if (loading && !!_spinnerSize) return <Spinner variant={_spinnerVariant} size={_spinnerSize} />;\n\n    if (count == null) return null; // Handle undefined or null count\n\n    if (count > MAX_COUNT) return <Box css={styles.maxElement} />;\n\n    return count;\n  }, [size, variant, loading, count, styles.maxElement]);\n\n  return (\n    <Flex className=\"NotificationCounter\" data-testid={dataTestId} css={styles.root} {...rest}>\n      {shouldShowCount && counterContent}\n    </Flex>\n  );\n};\n"],"names":["notificationCounterSlots","notificationCounterVariantStyles","notificationCounterSizeStyles","notificationCounterRecipe","defineSlotRecipe","MAX_COUNT","notificationCounterSpinnerSize","spinnerVariantToNotificationCounterVariant","NotificationCounter","count","loading","showCount","size","variant","dataTestId","rest","styles","useSlotRecipe","shouldShowCount","counterContent","useMemo","_spinnerSize","_spinnerVariant","Spinner","Box","jsx","Flex"],"mappings":"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"}