@storybook/components 6.5.0-alpha.9 → 6.5.0-beta.2

package/dist/modern/blocks/ArgsTable/ArgsTable.js

@@ -1,394 +0,0 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-import "core-js/modules/es.array.reduce.js";
-import React from 'react';
-import pickBy from 'lodash/pickBy';
-import { styled, ignoreSsrWarning } from '@storybook/theming';
-import { opacify, transparentize, darken, lighten } from 'polished';
-import { Icons } from '../../icon/icon';
-import { ArgRow } from './ArgRow';
-import { SectionRow } from './SectionRow';
-import { EmptyBlock } from '../EmptyBlock';
-import { Link } from '../../typography/link/link';
-import { ResetWrapper } from '../../typography/DocumentFormatting';
-export const TableWrapper = styled.table(({
-  theme,
-  compact,
-  inAddonPanel
-}) => ({
-  '&&': {
-    // Resets for cascading/system styles
-    borderCollapse: 'collapse',
-    borderSpacing: 0,
-    color: theme.color.defaultText,
-    'td, th': {
-      padding: 0,
-      border: 'none',
-      verticalAlign: 'top',
-      textOverflow: 'ellipsis'
-    },
-    // End Resets
-    fontSize: theme.typography.size.s2 - 1,
-    lineHeight: '20px',
-    textAlign: 'left',
-    width: '100%',
-    // Margin collapse
-    marginTop: inAddonPanel ? 0 : 25,
-    marginBottom: inAddonPanel ? 0 : 40,
-    'thead th:first-of-type, td:first-of-type': {
-      // intentionally specify thead here
-      width: '25%'
-    },
-    'th:first-of-type, td:first-of-type': {
-      paddingLeft: 20
-    },
-    'th:nth-of-type(2), td:nth-of-type(2)': Object.assign({}, compact ? null : {
-      // Description column
-      width: '35%'
-    }),
-    'td:nth-of-type(3)': Object.assign({}, compact ? null : {
-      // Defaults column
-      width: '15%'
-    }),
-    'th:last-of-type, td:last-of-type': Object.assign({
-      paddingRight: 20
-    }, compact ? null : {
-      // Controls column
-      width: '25%'
-    }),
-    th: {
-      color: theme.base === 'light' ? transparentize(0.25, theme.color.defaultText) : transparentize(0.45, theme.color.defaultText),
-      paddingTop: 10,
-      paddingBottom: 10,
-      paddingLeft: 15,
-      paddingRight: 15
-    },
-    td: {
-      paddingTop: '10px',
-      paddingBottom: '10px',
-      '&:not(:first-of-type)': {
-        paddingLeft: 15,
-        paddingRight: 15
-      },
-      '&:last-of-type': {
-        paddingRight: 20
-      }
-    },
-    // Table "block" styling
-    // Emphasize tbody's background and set borderRadius
-    // Calling out because styling tables is finicky
-    // Makes border alignment consistent w/other DocBlocks
-    marginLeft: inAddonPanel ? 0 : 1,
-    marginRight: inAddonPanel ? 0 : 1,
-    [`tr:first-child${ignoreSsrWarning}`]: {
-      [`td:first-child${ignoreSsrWarning}, th:first-child${ignoreSsrWarning}`]: {
-        borderTopLeftRadius: inAddonPanel ? 0 : theme.appBorderRadius
-      },
-      [`td:last-child${ignoreSsrWarning}, th:last-child${ignoreSsrWarning}`]: {
-        borderTopRightRadius: inAddonPanel ? 0 : theme.appBorderRadius
-      }
-    },
-    [`tr:last-child${ignoreSsrWarning}`]: {
-      [`td:first-child${ignoreSsrWarning}, th:first-child${ignoreSsrWarning}`]: {
-        borderBottomLeftRadius: inAddonPanel ? 0 : theme.appBorderRadius
-      },
-      [`td:last-child${ignoreSsrWarning}, th:last-child${ignoreSsrWarning}`]: {
-        borderBottomRightRadius: inAddonPanel ? 0 : theme.appBorderRadius
-      }
-    },
-    tbody: {
-      // slightly different than the other DocBlock shadows to account for table styling gymnastics
-      boxShadow: !inAddonPanel && (theme.base === 'light' ? `rgba(0, 0, 0, 0.10) 0 1px 3px 1px,
-          ${transparentize(0.035, theme.appBorderColor)} 0 0 0 1px` : `rgba(0, 0, 0, 0.20) 0 2px 5px 1px,
-          ${opacify(0.05, theme.appBorderColor)} 0 0 0 1px`),
-      borderRadius: theme.appBorderRadius,
-      // for safari only
-      // CSS hack courtesy of https://stackoverflow.com/questions/16348489/is-there-a-css-hack-for-safari-only-not-chrome
-      '@media not all and (min-resolution:.001dpcm)': {
-        '@supports (-webkit-appearance:none)': Object.assign({
-          borderWidth: 1,
-          borderStyle: 'solid'
-        }, inAddonPanel && {
-          borderColor: 'transparent'
-        }, !inAddonPanel && {
-          borderColor: theme.base === 'light' ? transparentize(0.035, theme.appBorderColor) : opacify(0.05, theme.appBorderColor)
-        })
-      },
-      tr: Object.assign({
-        background: 'transparent',
-        overflow: 'hidden'
-      }, inAddonPanel ? {
-        borderTopWidth: 1,
-        borderTopStyle: 'solid',
-        borderTopColor: theme.base === 'light' ? darken(0.1, theme.background.content) : lighten(0.05, theme.background.content)
-      } : {
-        [`&:not(:first-child${ignoreSsrWarning})`]: {
-          borderTopWidth: 1,
-          borderTopStyle: 'solid',
-          borderTopColor: theme.base === 'light' ? darken(0.1, theme.background.content) : lighten(0.05, theme.background.content)
-        }
-      }),
-      td: {
-        background: theme.background.content
-      }
-    } // End finicky table styling
-
-  }
-}), ({
-  isLoading,
-  theme
-}) => isLoading ? {
-  'th span, td span, td button': {
-    display: 'inline',
-    backgroundColor: theme.appBorderColor,
-    animation: `${theme.animation.glow} 1.5s ease-in-out infinite`,
-    color: 'transparent',
-    boxShadow: 'none',
-    borderRadius: 0
-  }
-} : {});
-const ResetButton = styled.button(({
-  theme
-}) => ({
-  border: 0,
-  borderRadius: '3em',
-  cursor: 'pointer',
-  display: 'inline-block',
-  overflow: 'hidden',
-  padding: '3px 8px',
-  transition: 'all 150ms ease-out',
-  verticalAlign: 'top',
-  userSelect: 'none',
-  margin: 0,
-  backgroundColor: theme.base === 'light' ? '#EAF3FC' : theme.color.border,
-  boxShadow: theme.base === 'light' ? `${theme.color.border} 0 0 0 1px inset` : `${theme.color.darker}  0 0 0 1px inset`,
-  color: theme.color.secondary,
-  '&:hover': {
-    background: theme.base === 'light' ? darken(0.03, '#EAF3FC') : opacify(0.1, theme.color.border)
-  },
-  '&:focus': {
-    boxShadow: `${theme.color.secondary} 0 0 0 1px inset`,
-    outline: 'none'
-  },
-  svg: {
-    display: 'block',
-    height: 14,
-    width: 14
-  }
-}));
-const ControlHeadingWrapper = styled.span({
-  display: 'flex',
-  justifyContent: 'space-between'
-});
-export let ArgsTableError;
-
-(function (ArgsTableError) {
-  ArgsTableError["NO_COMPONENT"] = "No component found.";
-  ArgsTableError["ARGS_UNSUPPORTED"] = "Args unsupported. See Args documentation for your framework.";
-})(ArgsTableError || (ArgsTableError = {}));
-
-const sortFns = {
-  alpha: (a, b) => a.name.localeCompare(b.name),
-  requiredFirst: (a, b) => {
-    var _b$type, _a$type;
-
-    return Number(!!((_b$type = b.type) !== null && _b$type !== void 0 && _b$type.required)) - Number(!!((_a$type = a.type) !== null && _a$type !== void 0 && _a$type.required)) || a.name.localeCompare(b.name);
-  },
-  none: undefined
-};
-
-const rowLoadingData = key => ({
-  key,
-  name: 'propertyName',
-  description: 'This is a short description',
-  control: {
-    type: 'text'
-  },
-  table: {
-    type: {
-      summary: 'summary'
-    },
-    defaultValue: {
-      summary: 'defaultValue'
-    }
-  }
-});
-
-export const argsTableLoadingData = {
-  rows: {
-    row1: rowLoadingData('row1'),
-    row2: rowLoadingData('row2'),
-    row3: rowLoadingData('row3')
-  }
-};
-
-const groupRows = (rows, sort) => {
-  const sections = {
-    ungrouped: [],
-    ungroupedSubsections: {},
-    sections: {}
-  };
-  if (!rows) return sections;
-  Object.entries(rows).forEach(([key, row]) => {
-    const {
-      category,
-      subcategory
-    } = (row === null || row === void 0 ? void 0 : row.table) || {};
-
-    if (category) {
-      const section = sections.sections[category] || {
-        ungrouped: [],
-        subsections: {}
-      };
-
-      if (!subcategory) {
-        section.ungrouped.push(Object.assign({
-          key
-        }, row));
-      } else {
-        const subsection = section.subsections[subcategory] || [];
-        subsection.push(Object.assign({
-          key
-        }, row));
-        section.subsections[subcategory] = subsection;
-      }
-
-      sections.sections[category] = section;
-    } else if (subcategory) {
-      const subsection = sections.ungroupedSubsections[subcategory] || [];
-      subsection.push(Object.assign({
-        key
-      }, row));
-      sections.ungroupedSubsections[subcategory] = subsection;
-    } else {
-      sections.ungrouped.push(Object.assign({
-        key
-      }, row));
-    }
-  }); // apply sort
-
-  const sortFn = sortFns[sort];
-
-  const sortSubsection = record => {
-    if (!sortFn) return record;
-    return Object.keys(record).reduce((acc, cur) => Object.assign({}, acc, {
-      [cur]: record[cur].sort(sortFn)
-    }), {});
-  };
-
-  const sorted = {
-    ungrouped: sections.ungrouped.sort(sortFn),
-    ungroupedSubsections: sortSubsection(sections.ungroupedSubsections),
-    sections: Object.keys(sections.sections).reduce((acc, cur) => Object.assign({}, acc, {
-      [cur]: {
-        ungrouped: sections.sections[cur].ungrouped.sort(sortFn),
-        subsections: sortSubsection(sections.sections[cur].subsections)
-      }
-    }), {})
-  };
-  return sorted;
-};
-/**
- * Display the props for a component as a props table. Each row is a collection of
- * ArgDefs, usually derived from docgen info for the component.
- */
-
-
-export const ArgsTable = props => {
-  if ('error' in props) {
-    return /*#__PURE__*/React.createElement(EmptyBlock, null, props.error, "\xA0", /*#__PURE__*/React.createElement(Link, {
-      href: "http://storybook.js.org/docs/",
-      target: "_blank",
-      withArrow: true
-    }, "Read the docs"));
-  }
-
-  const {
-    updateArgs,
-    resetArgs,
-    compact,
-    inAddonPanel,
-    initialExpandedArgs,
-    sort = 'none'
-  } = props;
-  const isLoading = ('isLoading' in props);
-  const {
-    rows,
-    args
-  } = 'rows' in props ? props : argsTableLoadingData;
-  const groups = groupRows(pickBy(rows, row => {
-    var _row$table;
-
-    return !(row !== null && row !== void 0 && (_row$table = row.table) !== null && _row$table !== void 0 && _row$table.disable);
-  }), sort);
-
-  if (groups.ungrouped.length === 0 && Object.entries(groups.sections).length === 0 && Object.entries(groups.ungroupedSubsections).length === 0) {
-    return /*#__PURE__*/React.createElement(EmptyBlock, null, "No inputs found for this component.\xA0", /*#__PURE__*/React.createElement(Link, {
-      href: "http://storybook.js.org/docs/",
-      target: "_blank",
-      withArrow: true
-    }, "Read the docs"));
-  }
-
-  let colSpan = 1;
-  if (updateArgs) colSpan += 1;
-  if (!compact) colSpan += 2;
-  const expandable = Object.keys(groups.sections).length > 0;
-  const common = {
-    updateArgs,
-    compact,
-    inAddonPanel,
-    initialExpandedArgs
-  };
-  return /*#__PURE__*/React.createElement(ResetWrapper, null, /*#__PURE__*/React.createElement(TableWrapper, {
-    "aria-hidden": isLoading,
-    compact,
-    inAddonPanel,
-    isLoading,
-    className: "docblock-argstable"
-  }, /*#__PURE__*/React.createElement("thead", {
-    className: "docblock-argstable-head"
-  }, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("th", null, /*#__PURE__*/React.createElement("span", null, "Name")), compact ? null : /*#__PURE__*/React.createElement("th", null, /*#__PURE__*/React.createElement("span", null, "Description")), compact ? null : /*#__PURE__*/React.createElement("th", null, /*#__PURE__*/React.createElement("span", null, "Default")), updateArgs ? /*#__PURE__*/React.createElement("th", null, /*#__PURE__*/React.createElement(ControlHeadingWrapper, null, "Control", ' ', !isLoading && resetArgs && /*#__PURE__*/React.createElement(ResetButton, {
-    onClick: () => resetArgs(),
-    title: "Reset controls"
-  }, /*#__PURE__*/React.createElement(Icons, {
-    icon: "undo",
-    "aria-hidden": true
-  })))) : null)), /*#__PURE__*/React.createElement("tbody", {
-    className: "docblock-argstable-body"
-  }, groups.ungrouped.map(row => /*#__PURE__*/React.createElement(ArgRow, _extends({
-    key: row.key,
-    row: row,
-    arg: args && args[row.key]
-  }, common))), Object.entries(groups.ungroupedSubsections).map(([subcategory, subsection]) => /*#__PURE__*/React.createElement(SectionRow, {
-    key: subcategory,
-    label: subcategory,
-    level: "subsection",
-    colSpan: colSpan
-  }, subsection.map(row => /*#__PURE__*/React.createElement(ArgRow, _extends({
-    key: row.key,
-    row: row,
-    arg: args && args[row.key],
-    expandable: expandable
-  }, common))))), Object.entries(groups.sections).map(([category, section]) => /*#__PURE__*/React.createElement(SectionRow, {
-    key: category,
-    label: category,
-    level: "section",
-    colSpan: colSpan
-  }, section.ungrouped.map(row => /*#__PURE__*/React.createElement(ArgRow, _extends({
-    key: row.key,
-    row: row,
-    arg: args && args[row.key]
-  }, common))), Object.entries(section.subsections).map(([subcategory, subsection]) => /*#__PURE__*/React.createElement(SectionRow, {
-    key: subcategory,
-    label: subcategory,
-    level: "subsection",
-    colSpan: colSpan
-  }, subsection.map(row => /*#__PURE__*/React.createElement(ArgRow, _extends({
-    key: row.key,
-    row: row,
-    arg: args && args[row.key],
-    expandable: expandable
-  }, common))))))))));
-};
-ArgsTable.displayName = "ArgsTable";

package/dist/modern/blocks/ArgsTable/ArgsTable.stories.js

@@ -1,151 +0,0 @@
-import React from 'react';
-import { action } from '@storybook/addon-actions';
-import { styled } from '@storybook/theming';
-import { ArgsTable, ArgsTableError } from './ArgsTable';
-import { NoControlsWarning } from './NoControlsWarning';
-import * as ArgRow from './ArgRow.stories';
-export default {
-  component: ArgsTable,
-  title: 'Docs/ArgsTable',
-  args: {
-    updateArgs: action('updateArgs'),
-    resetArgs: action('resetArgs')
-  }
-};
-const propsSection = {
-  category: 'props '
-};
-const eventsSection = {
-  category: 'events '
-};
-const componentSubsection = {
-  subcategory: 'MyComponent '
-};
-const htmlElementSubsection = {
-  subcategory: 'HTMLElement'
-};
-const stringType = ArgRow.String.args.row;
-const numberType = ArgRow.Number.args.row;
-const longEnumType = ArgRow.LongEnum.args.row;
-
-const Template = args => /*#__PURE__*/React.createElement(ArgsTable, args);
-
-Template.displayName = "Template";
-export const Loading = Template.bind({});
-Loading.args = {
-  isLoading: true
-};
-export const Normal = Template.bind({});
-Normal.args = {
-  rows: {
-    stringType,
-    numberType
-  }
-};
-export const Compact = Template.bind({});
-Compact.args = Object.assign({}, Normal.args, {
-  compact: true
-});
-const AddonPanelLayout = styled.div(({
-  theme
-}) => ({
-  fontSize: theme.typography.size.s2 - 1,
-  background: theme.background.content
-}));
-export const InAddonPanel = Template.bind({});
-InAddonPanel.args = Object.assign({}, Normal.args, {
-  inAddonPanel: true
-});
-InAddonPanel.decorators = [storyFn => /*#__PURE__*/React.createElement(AddonPanelLayout, null, storyFn())];
-export const InAddonPanelWithWarning = args => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(NoControlsWarning, null), /*#__PURE__*/React.createElement(ArgsTable, args));
-InAddonPanelWithWarning.args = Object.assign({}, InAddonPanel.args, {
-  updateArgs: null
-});
-InAddonPanelWithWarning.decorators = InAddonPanel.decorators;
-export const Sections = Template.bind({});
-Sections.args = {
-  rows: {
-    a: Object.assign({}, stringType, {
-      table: Object.assign({}, stringType.table, propsSection)
-    }),
-    b: Object.assign({}, numberType, {
-      table: Object.assign({}, stringType.table, propsSection)
-    }),
-    c: Object.assign({}, stringType, {
-      table: Object.assign({}, stringType.table, eventsSection)
-    })
-  }
-};
-export const SectionsCompact = Template.bind({});
-SectionsCompact.args = Object.assign({}, Sections.args, {
-  compact: true
-});
-export const SectionsAndSubsections = Template.bind({});
-SectionsAndSubsections.args = {
-  rows: {
-    a: Object.assign({}, stringType, {
-      table: Object.assign({}, stringType.table, propsSection, componentSubsection)
-    }),
-    b: Object.assign({}, numberType, {
-      table: Object.assign({}, stringType.table, propsSection, componentSubsection)
-    }),
-    c: Object.assign({}, stringType, {
-      table: Object.assign({}, stringType.table, eventsSection, componentSubsection)
-    }),
-    d: Object.assign({}, stringType, {
-      table: Object.assign({}, stringType.table, eventsSection, htmlElementSubsection)
-    })
-  }
-};
-export const SubsectionsOnly = Template.bind({});
-SubsectionsOnly.args = {
-  rows: {
-    a: Object.assign({}, stringType, {
-      table: Object.assign({}, stringType.table, componentSubsection)
-    }),
-    b: Object.assign({}, numberType, {
-      table: Object.assign({}, stringType.table, componentSubsection)
-    }),
-    c: Object.assign({}, stringType, {
-      table: Object.assign({}, stringType.table, componentSubsection)
-    }),
-    d: Object.assign({}, stringType, {
-      table: Object.assign({}, stringType.table, htmlElementSubsection)
-    })
-  }
-};
-export const AllControls = Template.bind({});
-AllControls.args = {
-  rows: {
-    array: ArgRow.ArrayOf.args.row,
-    boolean: ArgRow.Boolean.args.row,
-    color: ArgRow.Color.args.row,
-    date: ArgRow.Date.args.row,
-    string: ArgRow.String.args.row,
-    number: ArgRow.Number.args.row,
-    range: ArgRow.Number.args.row,
-    radio: ArgRow.Radio.args.row,
-    inlineRadio: ArgRow.InlineRadio.args.row,
-    check: ArgRow.Check.args.row,
-    inlineCheck: ArgRow.InlineCheck.args.row,
-    select: ArgRow.Select.args.row,
-    multiSelect: ArgRow.MultiSelect.args.row,
-    object: ArgRow.ObjectOf.args.row,
-    func: ArgRow.Func.args.row
-  }
-};
-export const Error = Template.bind({});
-Error.args = {
-  error: ArgsTableError.NO_COMPONENT
-};
-export const Empty = Template.bind({});
-Empty.args = {
-  rows: {}
-};
-export const WithDefaultExpandedArgs = Template.bind({});
-WithDefaultExpandedArgs.args = {
-  rows: {
-    longEnumType
-  },
-  initialExpandedArgs: true
-};

package/dist/modern/blocks/ArgsTable/NoControlsWarning.js

@@ -1,19 +0,0 @@
-import React from 'react';
-import { styled } from '@storybook/theming';
-import { Link } from '../../typography/link/link';
-const NoControlsWrapper = styled.div(({
-  theme
-}) => ({
-  background: theme.background.warning,
-  color: theme.color.darkest,
-  padding: '10px 15px',
-  lineHeight: '20px',
-  boxShadow: `${theme.appBorderColor} 0 -1px 0 0 inset`
-}));
-export const NoControlsWarning = () => /*#__PURE__*/React.createElement(NoControlsWrapper, null, "This story is not configured to handle controls.", ' ', /*#__PURE__*/React.createElement(Link, {
-  href: "https://storybook.js.org/docs/react/essentials/controls",
-  target: "_blank",
-  cancel: false,
-  withArrow: true
-}, "Learn how to add controls"));
-NoControlsWarning.displayName = "NoControlsWarning";

package/dist/modern/blocks/ArgsTable/SectionRow.js

@@ -1,110 +0,0 @@
-import React, { useState } from 'react';
-import { transparentize } from 'polished';
-import { styled } from '@storybook/theming';
-import { Icons } from '../../icon/icon';
-const ExpanderIcon = styled(Icons)(({
-  theme
-}) => ({
-  marginRight: 8,
-  marginLeft: -10,
-  marginTop: -2,
-  // optical alignment
-  height: 12,
-  width: 12,
-  color: theme.base === 'light' ? transparentize(0.25, theme.color.defaultText) : transparentize(0.3, theme.color.defaultText),
-  border: 'none',
-  display: 'inline-block'
-}));
-const FlexWrapper = styled.span(({
-  theme
-}) => ({
-  display: 'flex',
-  lineHeight: '20px',
-  alignItems: 'center'
-}));
-const Section = styled.td(({
-  theme
-}) => ({
-  position: 'relative',
-  letterSpacing: '0.35em',
-  textTransform: 'uppercase',
-  fontWeight: theme.typography.weight.black,
-  fontSize: theme.typography.size.s1 - 1,
-  color: theme.base === 'light' ? transparentize(0.4, theme.color.defaultText) : transparentize(0.6, theme.color.defaultText),
-  background: `${theme.background.app} !important`,
-  '& ~ td': {
-    background: `${theme.background.app} !important`
-  }
-}));
-const Subsection = styled.td(({
-  theme
-}) => ({
-  position: 'relative',
-  fontWeight: theme.typography.weight.bold,
-  fontSize: theme.typography.size.s2 - 1,
-  background: theme.background.content
-}));
-const StyledTd = styled.td(({
-  theme
-}) => ({
-  position: 'relative'
-}));
-const StyledTr = styled.tr(({
-  theme
-}) => ({
-  '&:hover > td': {
-    backgroundColor: `${theme.background.hoverable} !important`,
-    boxShadow: `${theme.color.mediumlight} 0 - 1px 0 0 inset`,
-    cursor: 'row-resize'
-  }
-}));
-const ClickIntercept = styled.button(() => ({
-  // reset button style
-  background: 'none',
-  border: 'none',
-  padding: '0',
-  font: 'inherit',
-  // add custom style
-  position: 'absolute',
-  top: 0,
-  bottom: 0,
-  left: 0,
-  right: 0,
-  height: '100%',
-  width: '100%',
-  color: 'transparent',
-  cursor: 'row-resize !important'
-}));
-export const SectionRow = ({
-  level = 'section',
-  label,
-  children,
-  initialExpanded = true,
-  colSpan = 3
-}) => {
-  const [expanded, setExpanded] = useState(initialExpanded);
-  const Level = level === 'subsection' ? Subsection : Section; // @ts-ignore
-
-  const itemCount = (children === null || children === void 0 ? void 0 : children.length) || 0;
-  const caption = level === 'subsection' ? `${itemCount} item${itemCount !== 1 ? 's' : ''}` : '';
-  const icon = expanded ? 'arrowdown' : 'arrowright';
-  const helperText = `${expanded ? 'Hide' : 'Side'} ${level === 'subsection' ? itemCount : label} item${itemCount !== 1 ? 's' : ''}`;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledTr, {
-    title: helperText
-  }, /*#__PURE__*/React.createElement(Level, {
-    colSpan: 1
-  }, /*#__PURE__*/React.createElement(ClickIntercept, {
-    onClick: e => setExpanded(!expanded),
-    tabIndex: 0
-  }, helperText), /*#__PURE__*/React.createElement(FlexWrapper, null, /*#__PURE__*/React.createElement(ExpanderIcon, {
-    icon: icon
-  }), label)), /*#__PURE__*/React.createElement(StyledTd, {
-    colSpan: colSpan - 1
-  }, /*#__PURE__*/React.createElement(ClickIntercept, {
-    onClick: e => setExpanded(!expanded),
-    tabIndex: -1,
-    style: {
-      outline: 'none'
-    }
-  }, helperText), expanded ? null : caption)), expanded ? children : null);
-};