tesseract/categories/information/react/src/components/KeyValueTable/index.tsx

import * as React from 'react';
import clsx from 'clsx';

/**
 * Derived HTML element of the {@link KeyValueTable} component.
 */
export type KeyValueTableDerivedElement = HTMLDListElement;

/**
 * Individual property of the {@link KeyValueTable} component.
 */
export interface KeyValueTableProperty {
  /**
   * Key of the property.
   */
  key: string;
  /**
   * Class name of the property.
   */
  className?: string;
  /**
   * Value of the property.
   */
  valueProps?: React.HTMLProps<HTMLElement>;
}

/**
 * Props of the {@link KeyValueTable} component.
 */
export interface KeyValueTableProps extends Omit<React.HTMLProps<KeyValueTableDerivedElement>, 'children'> {
  /**
   * Should the keys be hidden?
   */
  hiddenKeys?: boolean;
  /**
   * Properties displayed on the component.
   */
  properties?: (KeyValueTableProperty | boolean | null | undefined)[];
}

/**
 * Component for displaying key-value pairs.
 */
export const KeyValueTable = React.forwardRef<KeyValueTableDerivedElement, KeyValueTableProps>((
  {
    hiddenKeys = false,
    properties = [],
    className,
    style,
    ...etcProps
  },
  forwardedRef,
) => (
  <dl
    {...etcProps}
    className={clsx(
      'grid gap-y-1 grid-cols-3',
      className,
    )}
    ref={forwardedRef}
    style={style}
  >
    {properties.map((property) => typeof property === 'object' && property && (
      <div
        key={property.key}
        className={clsx('contents', property.className)}
      >
        <dt
          className={clsx(hiddenKeys && 'sr-only', 'pr-4')}
        >
          {property.key}
        </dt>
        <dd
          {...(property.valueProps ?? {})}
          className={clsx(
            'm-0 text-ellipsis overflow-hidden',
            !hiddenKeys && 'col-span-2',
            hiddenKeys && 'col-span-3',
            property.valueProps?.className,
          )}
        >
          {property.valueProps?.children}
        </dd>
      </div>
    ))}
  </dl>
));

KeyValueTable.displayName = 'KeyValueTable';

KeyValueTable.defaultProps = {
  hiddenKeys: false,
  properties: [],
};