{"version":3,"file":"KeyValueItem.mjs","sources":["../../../../src/components/KeyValueItem/KeyValueItem.tsx"],"sourcesContent":["'use client'\nimport { forwardRef } from 'react'\nimport * as React from 'react'\n\nimport { isBezierIcon } from '@channel.io/bezier-icons'\nimport classNames from 'classnames'\n\nimport { isArray, isEmpty, isNil } from '~/src/utils/type'\n\nimport { Button } from '~/src/components/Button'\nimport { Icon } from '~/src/components/Icon'\nimport { Text, type TextProps } from '~/src/components/Text'\nimport { Tooltip } from '~/src/components/Tooltip'\n\nimport {\n  type ItemActionWithIcon,\n  type KeyValueItemAction,\n  type KeyValueItemProps,\n} from './KeyValueItem.types'\n\nimport styles from './KeyValueItem.module.scss'\n\nexport const KEY_VALUE_ITEM_TEST_ID = 'bezier-key-value-item'\nexport const KEY_VALUE_ITEM_KEY_ICON_TEST_ID = 'bezier-key-value-item-key-icon'\n\nfunction KeyItem({\n  icon,\n  children,\n}: {\n  icon: KeyValueItemProps['keyIcon']\n  children: React.ReactNode\n}) {\n  return (\n    <div className={styles.KeyItem}>\n      {isBezierIcon(icon) ? (\n        <Icon\n          size=\"s\"\n          source={icon}\n          color=\"text-neutral-lighter\"\n          data-testid={KEY_VALUE_ITEM_KEY_ICON_TEST_ID}\n        />\n      ) : (\n        icon\n      )}\n\n      <Text\n        className={styles.KeyText}\n        bold\n        typo=\"12\"\n        color=\"text-neutral-lighter\"\n        truncated\n      >\n        {children}\n      </Text>\n    </div>\n  )\n}\n\nfunction ValueItem({ truncated, children }: TextProps) {\n  return (\n    <Text\n      className={styles.ValueItem}\n      typo=\"14\"\n      truncated={truncated}\n    >\n      {children}\n    </Text>\n  )\n}\n\nfunction isItemActionWithIcon(args: object): args is ItemActionWithIcon {\n  return 'icon' in args\n}\n\nfunction ActionButton({ children }: { children: KeyValueItemAction }) {\n  if (!isItemActionWithIcon(children)) {\n    return children\n  }\n\n  const withTooltip = !isEmpty(children.tooltip)\n  const Wrapper = withTooltip ? Tooltip : React.Fragment\n\n  return (\n    <Wrapper {...(withTooltip ? { content: children.tooltip } : {})}>\n      <Button\n        size=\"xs\"\n        leftContent={children.icon}\n        styleVariant=\"tertiary\"\n        colorVariant=\"monochrome-light\"\n        onClick={children.onClick}\n      />\n    </Wrapper>\n  )\n}\n\nfunction ActionButtonGroup({\n  children,\n}: {\n  children: KeyValueItemProps['actions']\n}) {\n  if (isNil(children) || isEmpty(children)) {\n    return null\n  }\n\n  return (\n    <div className={styles.ItemAction}>\n      {isArray(children) ? (\n        children.map((action, index) => (\n          // eslint-disable-next-line react/no-array-index-key\n          <ActionButton key={index}>{action}</ActionButton>\n        ))\n      ) : (\n        <ActionButton>{children}</ActionButton>\n      )}\n    </div>\n  )\n}\n\nexport const KeyValueItem = forwardRef<HTMLDivElement, KeyValueItemProps>(\n  function KeyValueListItem(\n    {\n      className,\n      keyIcon,\n      keyContent,\n      actions,\n      children,\n      onClickKey,\n      onClickValue,\n      ...rest\n    },\n    forwardedRef\n  ) {\n    return (\n      <div\n        className={classNames(\n          styles.KeyValueItem,\n          styles.singleline,\n          className\n        )}\n        ref={forwardedRef}\n        data-testid={KEY_VALUE_ITEM_TEST_ID}\n        {...rest}\n      >\n        {/* Since it allows for click interaction, it should be interactive content,\n        but since it has a button element nested inside it, this is bad HTML markup.\n        It's difficult to fix this without changing the design,\n        so we keep the legacy code that uses the div element. */}\n        {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}\n        <div\n          className={classNames(\n            styles.ItemWrapper,\n            styles.KeyItemWrapper,\n            onClickKey && styles.clickable\n          )}\n          onClick={onClickKey}\n        >\n          <KeyItem icon={keyIcon}>{keyContent}</KeyItem>\n        </div>\n\n        {/* Since it allows for click interaction, it should be interactive content,\n        but since it has a button element nested inside it, this is bad HTML markup.\n        It's difficult to fix this without changing the design,\n        so we keep the legacy code that uses the div element. */}\n        {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}\n        <div\n          className={classNames(\n            styles.ItemWrapper,\n            styles.ValueItemWrapper,\n            onClickValue && styles.clickable\n          )}\n          onClick={onClickValue}\n        >\n          <ValueItem truncated>{children}</ValueItem>\n\n          <ActionButtonGroup>{actions}</ActionButtonGroup>\n        </div>\n      </div>\n    )\n  }\n)\n\nexport const KeyValueMultiLineItem = forwardRef<\n  HTMLDivElement,\n  KeyValueItemProps\n>(function KeyValueMultiLineListItem(\n  {\n    children,\n    className,\n    keyIcon,\n    keyContent,\n    actions,\n    onClickKey,\n    onClickValue,\n    ...rest\n  },\n  forwardedRef\n) {\n  return (\n    <div\n      className={classNames(styles.KeyValueItem, styles.multiline, className)}\n      ref={forwardedRef}\n      data-testid={KEY_VALUE_ITEM_TEST_ID}\n      {...rest}\n    >\n      {/* Since it allows for click interaction, it should be interactive content,\n        but since it has a button element nested inside it, this is bad HTML markup.\n        It's difficult to fix this without changing the design,\n        so we keep the legacy code that uses the div element. */}\n      {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}\n      <div\n        className={classNames(\n          styles.ItemWrapper,\n          styles.KeyItemWrapper,\n          onClickKey && styles.clickable\n        )}\n        onClick={onClickKey}\n      >\n        <KeyItem icon={keyIcon}>{keyContent}</KeyItem>\n\n        <ActionButtonGroup>{actions}</ActionButtonGroup>\n      </div>\n\n      {/* Since it allows for click interaction, it should be interactive content,\n        but since it has a button element nested inside it, this is bad HTML markup.\n        It's difficult to fix this without changing the design,\n        so we keep the legacy code that uses the div element. */}\n      {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}\n      <div\n        className={classNames(\n          styles.ItemWrapper,\n          styles.ValueItemWrapper,\n          onClickValue && styles.clickable\n        )}\n        onClick={onClickValue}\n      >\n        <ValueItem>{children}</ValueItem>\n      </div>\n    </div>\n  )\n})\n"],"names":["KEY_VALUE_ITEM_TEST_ID","KEY_VALUE_ITEM_KEY_ICON_TEST_ID","KeyItem","icon","children","_jsxs","className","styles","isBezierIcon","_jsx","Icon","size","source","color","Text","KeyText","bold","typo","truncated","ValueItem","isItemActionWithIcon","args","ActionButton","withTooltip","isEmpty","tooltip","Wrapper","Tooltip","React","Fragment","content","Button","leftContent","styleVariant","colorVariant","onClick","ActionButtonGroup","isNil","ItemAction","isArray","map","action","index","KeyValueItem","forwardRef","KeyValueListItem","keyIcon","keyContent","actions","onClickKey","onClickValue","rest","forwardedRef","classNames","singleline","ref","ItemWrapper","KeyItemWrapper","clickable","ValueItemWrapper","KeyValueMultiLineItem","KeyValueMultiLineListItem","multiline"],"mappings":"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"}