{"version":3,"file":"UsersIndicator.cjs","sources":["../../../../src/components/UsersIndicator/UsersIndicator.tsx"],"sourcesContent":["import { css } from '@emotion/css';\n\nimport { GrafanaTheme2 } from '@grafana/data';\nimport { t } from '@grafana/i18n';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\n\nimport { UserIcon } from './UserIcon';\nimport { UserView } from './types';\n\nexport interface UsersIndicatorProps {\n  /** An object that contains the user's details and an optional 'lastActiveAt' status */\n  users: UserView[];\n  /** A limit of how many user icons to show before collapsing them and showing a number of users instead */\n  limit?: number;\n  /** onClick handler for the user number indicator */\n  onClick?: () => void;\n}\n\n/**\n * A component that displays a set of user icons indicating which users are currently active. If there are too many users to display all the icons, it will collapse the icons into a single icon with a number indicating the number of additional users.\n *\n * https://developers.grafana.com/ui/latest/index.html?path=/docs/iconography-usersindicator--docs\n */\nexport const UsersIndicator = ({ users, onClick, limit = 4 }: UsersIndicatorProps) => {\n  const styles = useStyles2(getStyles, limit);\n  if (!users.length) {\n    return null;\n  }\n  // Make sure limit is never negative\n  limit = limit > 0 ? limit : 4;\n  const limitReached = users.length > limit;\n  const extraUsers = users.length - limit;\n  // Prevent breaking the layout when there's more than 99 users\n  const tooManyUsers = extraUsers > 99;\n\n  return (\n    <div\n      className={styles.container}\n      aria-label={t('grafana-ui.users-indicator.container-label', 'Users indicator container')}\n    >\n      {users.slice(0, limitReached ? limit : limit + 1).map((userView, idx, arr) => (\n        <UserIcon key={userView.user.name} userView={userView} />\n      ))}\n      {limitReached && (\n        <UserIcon onClick={onClick} userView={{ user: { name: 'Extra users' } }} showTooltip={false}>\n          {tooManyUsers\n            ? // eslint-disable-next-line @grafana/i18n/no-untranslated-strings\n              '...'\n            : `+${extraUsers}`}\n        </UserIcon>\n      )}\n    </div>\n  );\n};\n\nconst getStyles = (theme: GrafanaTheme2, limit: number) => {\n  return {\n    container: css({\n      display: 'flex',\n      justifyContent: 'center',\n      marginLeft: theme.spacing(1),\n      isolation: 'isolate',\n\n      '& > button': {\n        marginLeft: theme.spacing(-1), // Overlay the elements a bit on top of each other\n\n        // Ensure overlaying user icons are stacked correctly with z-index on each element\n        ...Object.fromEntries(\n          Array.from({ length: limit }).map((_, idx) => [\n            `&:nth-of-type(${idx + 1})`,\n            {\n              zIndex: limit - idx,\n            },\n          ])\n        ),\n      },\n    }),\n    dots: css({\n      marginBottom: '3px',\n    }),\n  };\n};\n"],"names":["useStyles2","jsxs","t","jsx","UserIcon","css"],"mappings":";;;;;;;;;;;AAwBO,MAAM,iBAAiB,CAAC,EAAE,OAAO,OAAA,EAAS,KAAA,GAAQ,GAAE,KAA2B;AACpF,EAAA,MAAM,MAAA,GAASA,uBAAA,CAAW,SAAA,EAAW,KAAK,CAAA;AAC1C,EAAA,IAAI,CAAC,MAAM,MAAA,EAAQ;AACjB,IAAA,OAAO,IAAA;AAAA,EACT;AAEA,EAAA,KAAA,GAAQ,KAAA,GAAQ,IAAI,KAAA,GAAQ,CAAA;AAC5B,EAAA,MAAM,YAAA,GAAe,MAAM,MAAA,GAAS,KAAA;AACpC,EAAA,MAAM,UAAA,GAAa,MAAM,MAAA,GAAS,KAAA;AAElC,EAAA,MAAM,eAAe,UAAA,GAAa,EAAA;AAElC,EAAA,uBACEC,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAW,MAAA,CAAO,SAAA;AAAA,MAClB,YAAA,EAAYC,MAAA,CAAE,4CAAA,EAA8C,2BAA2B,CAAA;AAAA,MAEtF,QAAA,EAAA;AAAA,QAAA,KAAA,CAAM,MAAM,CAAA,EAAG,YAAA,GAAe,QAAQ,KAAA,GAAQ,CAAC,EAAE,GAAA,CAAI,CAAC,QAAA,EAAU,GAAA,EAAK,wBACpEC,cAAA,CAACC,iBAAA,EAAA,EAAkC,YAApB,QAAA,CAAS,IAAA,CAAK,IAA0B,CACxD,CAAA;AAAA,QACA,YAAA,oBACCD,cAAA,CAACC,iBAAA,EAAA,EAAS,OAAA,EAAkB,QAAA,EAAU,EAAE,IAAA,EAAM,EAAE,IAAA,EAAM,aAAA,EAAc,EAAE,EAAG,aAAa,KAAA,EACnF,QAAA,EAAA,YAAA;AAAA;AAAA,UAEG;AAAA,YACA,CAAA,CAAA,EAAI,UAAU,CAAA,CAAA,EACpB;AAAA;AAAA;AAAA,GAEJ;AAEJ;AAEA,MAAM,SAAA,GAAY,CAAC,KAAA,EAAsB,KAAA,KAAkB;AACzD,EAAA,OAAO;AAAA,IACL,WAAWC,OAAA,CAAI;AAAA,MACb,OAAA,EAAS,MAAA;AAAA,MACT,cAAA,EAAgB,QAAA;AAAA,MAChB,UAAA,EAAY,KAAA,CAAM,OAAA,CAAQ,CAAC,CAAA;AAAA,MAC3B,SAAA,EAAW,SAAA;AAAA,MAEX,YAAA,EAAc;AAAA,QACZ,UAAA,EAAY,KAAA,CAAM,OAAA,CAAQ,CAAA,CAAE,CAAA;AAAA;AAAA;AAAA,QAG5B,GAAG,MAAA,CAAO,WAAA;AAAA,UACR,KAAA,CAAM,IAAA,CAAK,EAAE,MAAA,EAAQ,KAAA,EAAO,CAAA,CAAE,GAAA,CAAI,CAAC,CAAA,EAAG,GAAA,KAAQ;AAAA,YAC5C,CAAA,cAAA,EAAiB,MAAM,CAAC,CAAA,CAAA,CAAA;AAAA,YACxB;AAAA,cACE,QAAQ,KAAA,GAAQ;AAAA;AAClB,WACD;AAAA;AACH;AACF,KACD,CAAA;AAAA,IACD,MAAMA,OAAA,CAAI;AAAA,MACR,YAAA,EAAc;AAAA,KACf;AAAA,GACH;AACF,CAAA;;;;"}