Function GroupedPropTable

packages/dev/s2-docs/src/PropTable.tsx:205–245

({
  properties,
  links,
  propGroups = GROUPS,
  defaultExpanded = DEFAULT_EXPANDED
}: GroupedPropTableProps)

}

export function GroupedPropTable({
  properties,
  links,
  propGroups = GROUPS,
  defaultExpanded = DEFAULT_EXPANDED
}: GroupedPropTableProps) {
  setLinks(links);

  let [props, groups] = groupProps(properties, propGroups);
  // let properties = Object.values(props).filter(prop => prop.type === 'property' && prop.access !== 'private' && prop.access !== 'protected').reverse();

  // properties.sort((a, b) => a.name.localeCompare(b.name));

  let allProps = [...Object.values(props), ...Object.values(groups).flatMap(g => Object.values(g))];
  // Default to showing required indicators if some properties are optional but not all.
  let showRequired = !allProps.every(p => p.optional) && !allProps.every(p => !p.optional);

  // Show default values by default if any of the properties have one defined.
  let showDefault = Object.values(props).some(p => !!p.default);

  return (
    <Table>
      <TableHeader>
        <tr>
          <TableColumn>Name</TableColumn>
          <TableColumn>Type</TableColumn>
          {showDefault && <TableColumn>Default</TableColumn>}
          {/* <TableColumn>Description</TableColumn> */}
        </tr>
      </TableHeader>
      <TableBody>
        <Rows props={props} showDefault={showDefault} showRequired={showRequired} />
      </TableBody>
      {Object.keys(groups).map(group => (
        <DisclosureRow key={group} title={group} defaultExpanded={defaultExpanded?.has(group)}>
          <Rows props={groups[group]} showDefault={showDefault} showRequired={showRequired} />
        </DisclosureRow>
      ))}
    </Table>
  );
}

function Rows({
  props,