preact#JSX TypeScript Examples

export default function Img(props: ImgProps) {
    const { backgroundUrl = '', className = '', classNameModifiers = [], src = '', alt = '', showOnError = false } = props;
    const [loaded, setLoaded] = useState(false);
    const imageRef = useRef(null);

    const handleLoad = () => {
        setLoaded(true);
    };

    const handleError = () => {
        setLoaded(showOnError);
    };

    const classNames = cx(
        [className],
        'adyen-checkout__image',
        { 'adyen-checkout__image--loaded': loaded },
        ...classNameModifiers.map(modifier => `adyen-checkout__image--${modifier}`)
    );

    useEffect(() => {
        const image = backgroundUrl ? new Image() : imageRef.current;
        image.src = backgroundUrl || src;
        image.onload = handleLoad;
        setLoaded(!!image.complete);
    }, []);

    if (backgroundUrl) {
        return <div style={{ backgroundUrl } as JSX.CSSProperties} {...props} className={classNames} />;
    }

    return <img {...props} alt={alt} ref={imageRef} className={classNames} onError={handleError} />;
}

PanasonicLogo = (props: JSX.SVGAttributes<SVGSVGElement>): JSX.Element => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 600 91.7"
    preserveAspectRatio="xMidYMid meet"
    x="0"
    y="0"
    {...props}
  >
    <path d="M43.59 61.96H27.17V40.98h10.67c2.02 0 3.74-.05 5.76-.16a8.78 8.78 0 0 0 6.81-3.67 8.21 8.21 0 0 0 1.6-3.9c.18-1.24.2-2.3.08-3.56a9.01 9.01 0 0 0-9.02-8.17h-15.9v68.02H0V0H44.4c1.77 0 3.26.03 5.03.13C61.22.76 70.93 7.31 75.92 18a30.6 30.6 0 0 1 2.81 17.02A29.06 29.06 0 0 1 55.7 60.65a53.6 53.6 0 0 1-12.1 1.31" />
    <path
      id="a"
      strokeWidth="3.65"
      d="M144.48 84.53c-.36-5.27-.56-9.73-.67-15.02-.14-6.95-.22-12.8-.27-19.75a40.94 40.94 0 0 0-1.38-10.54 16.68 16.68 0 0 0-8.3-10.77A27.03 27.03 0 0 0 126 25.5a66.75 66.75 0 0 0-26.67-.53c-2.6.45-4.77 1.08-7.22 2.1a19.22 19.22 0 0 0-11.38 12.46 15.3 15.3 0 0 0-.61 6.6c.04.42.15.78.34 1.17l21.53.53a9.65 9.65 0 0 1 .58-3.82 6.54 6.54 0 0 1 4.06-4.07 12.57 12.57 0 0 1 8.59-.15 5.88 5.88 0 0 1 3.9 3.95c.36 1.2.18 2.4-.55 3.43a5.12 5.12 0 0 1-2.46 1.92c-.64.25-1.2.42-1.85.6a84.5 84.5 0 0 1-8.6 1.87c-2.42.4-4.46.77-6.86 1.26a76.94 76.94 0 0 0-9.13 2.38 19.15 19.15 0 0 0-7.4 4.32 15.61 15.61 0 0 0-5.12 9.71c-.37 2.61-.28 4.88.3 7.45a17.8 17.8 0 0 0 12.7 13.51 31.1 31.1 0 0 0 21.16-1.07 20.2 20.2 0 0 0 8.38-6.12l-1.52-11a9.3 9.3 0 0 1-4.26 3.63c-1.7.75-3.25 1.15-5.1 1.34-1.55.15-2.89.04-4.39-.38a6.23 6.23 0 0 1-3.03-1.82 5.41 5.41 0 0 1-1.4-2.69 4.28 4.28 0 0 1 1.46-4.23 8.39 8.39 0 0 1 2.7-1.58 94.5 94.5 0 0 1 7.2-2.34c3.09-.87 5.64-1.81 8.57-3.16.28 2.34.27 4.34-.06 6.67-.23 1.71-.76 3.12-1.69 4.56l1.52 11c.47 1.56.9 2.86 1.44 4.4.3.85.7 1.51 1.3 2.18h23.7a10.28 10.28 0 0 1-1.65-5.04"
    />
    <path
      id="b"
      strokeWidth="3.65"
      d="M172.83 32.34a39.66 39.66 0 0 1 9.93-6.45 25.96 25.96 0 0 1 18.9-1.4 20.62 20.62 0 0 1 14.27 13.94 30.88 30.88 0 0 1 1.52 9.83v41.28h-25.4V52.42c0-1.24-.16-2.3-.52-3.48a7.04 7.04 0 0 0-4.13-4.57 9.58 9.58 0 0 0-12.08 4 10.41 10.41 0 0 0-1.5 5.53v35.64h-24.6V25.58h23.07l.54 6.76"
    />
    <use width="100%" height="100%" transform="translate(143.6)" xlinkHref="#a" />
    <path d="M323.58 66.03c1.83.31 3.36.7 5.12 1.28a4.1 4.1 0 0 1 2.8 3.13 4.67 4.67 0 0 1-1.29 4.4 7.33 7.33 0 0 1-4.25 2.17c-2.26.36-4.26.18-6.4-.6a8.64 8.64 0 0 1-2.73-1.55 6.89 6.89 0 0 1-2.23-3.36 10.4 10.4 0 0 1-.48-3.41H290.7v1.36c0 2.2.34 4.07 1.11 6.14 1.18 3.1 2.79 5.5 5.22 7.76a24.87 24.87 0 0 0 10.65 6 56.77 56.77 0 0 0 25.36 1.6 35.03 35.03 0 0 0 11.37-3.7 23 23 0 0 0 4.4-2.95A19.48 19.48 0 0 0 354.97 63a15.54 15.54 0 0 0-4.82-7.29 26.96 26.96 0 0 0-10.6-5.77l-2.56-.73a113.9 113.9 0 0 0-14.48-3.08c-1.38-.2-2.54-.42-3.9-.74a9 9 0 0 1-1.73-.6 2.86 2.86 0 0 1-1.44-3.78l.11-.22a5.58 5.58 0 0 1 3.43-2.72c2.68-.77 5.14-.7 7.77.18a5.81 5.81 0 0 1 3.98 5.83h22.58a22.28 22.28 0 0 0-1.38-7.72 13.73 13.73 0 0 0-4.62-6.4 21.94 21.94 0 0 0-6.03-3.44 32.78 32.78 0 0 0-6.54-1.82 66.63 66.63 0 0 0-16.07-.9c-3.24.18-5.97.58-9.14 1.32-4.26 1-7.7 2.65-11.14 5.35a17.76 17.76 0 0 0-6.07 8.49 17.86 17.86 0 0 0 .42 12.48 17 17 0 0 0 9.85 9.85c2.37.94 4.44 1.56 6.94 2.07 4.93 1.02 9.1 1.81 14.06 2.66M400.3 24.36c-2.53-.4-4.69-.57-7.25-.57-2.56 0-4.71.17-7.25.57a33.22 33.22 0 0 0-18.65 9.25 30.42 30.42 0 0 0-9.6 19.96 36.59 36.59 0 0 0 1.25 13.76c2 7.22 5.78 12.8 11.73 17.35a30.34 30.34 0 0 0 12.63 5.86 43.8 43.8 0 0 0 9.9 1.06c3.5 0 6.46-.3 9.89-1.06a30.35 30.35 0 0 0 12.63-5.86L401.84 69.7a9.63 9.63 0 0 1-12.74 4.83 9.28 9.28 0 0 1-4.83-4.83 22.31 22.31 0 0 1-1.81-6.17c-.68-4.5-.6-8.4.27-12.86.45-2.31 1.23-4.2 2.52-6.18a9.34 9.34 0 0 1 15.6 0 16.43 16.43 0 0 1 2.52 6.18c.87 4.47.96 8.37.28 12.86-.34 2.25-.88 4.1-1.81 6.17l13.74 14.98a31.58 31.58 0 0 0 11.72-17.35c1.31-4.7 1.69-8.9 1.25-13.76a30.4 30.4 0 0 0-9.6-19.96 33.19 33.19 0 0 0-18.65-9.25" />
    <use width="100%" height="100%" transform="translate(282.89)" xlinkHref="#b" />
    <path d="M505.26 0v16.9h23.91V0zm0 25.59v63.96h23.91V25.59zM593.4 81.25a31.2 31.2 0 0 1-17.18 9.49c-4.64.94-8.7 1.14-13.41.65a31.59 31.59 0 0 1-16.44-6.42 34.24 34.24 0 0 1-9.63-10.82 29.79 29.79 0 0 1-3.78-10.58c-.9-5.44-.66-10.22.77-15.54 3.27-12.1 12.36-20.67 24.63-23.22 7-1.45 13.22-1.3 20.15.49a27.84 27.84 0 0 1 12.57 6.89 25.35 25.35 0 0 1 5.5 7.21 19.24 19.24 0 0 1 2.27 10.4h-21.87a10.68 10.68 0 0 0-4.24-7.06 8.9 8.9 0 0 0-10.27-.5 10.15 10.15 0 0 0-4.5 5.79 29.54 29.54 0 0 0-.28 17.56 13.26 13.26 0 0 0 3.83 6.34 9.13 9.13 0 0 0 7.9 2.5 7.35 7.35 0 0 0 4.62-2.48 9.5 9.5 0 0 0 2.4-4.93c.24-1.35.37-2.5.45-3.87h23.05a23.13 23.13 0 0 1-6.54 18.1" />
  </svg>
)

private _createBracket(result: Result): JSX.Element {
    const cols = [
      <div class="bracket-center">
        <div class="bracket-center-items">
          {createCenterItem(this.props.topics, this.props.champions, result, 0)}
          <div class="bracket-center-vs">
            <VS />
          </div>
          {createCenterItem(this.props.topics, this.props.champions, result, 1)}
        </div>
      </div>,
    ];

    for (let i = 0; i < 2; i++) {
      if (typeof result.items[i] === 'string') continue;
      const newCols = this._createBracketColumns(
        [result.items[i] as Result],
        [[i]],
        1,
        i === 0,
      );

      if (i === 0) {
        cols.unshift(...newCols.reverse());
      } else {
        cols.push(...newCols);
      }
    }

    return <div class="bracket">{cols}</div>;
  }

Select: FunctionalComponent<JSX.HTMLAttributes> = props => {
  const { class: className, ...selectProps } = props;

  return (
    <div class={'select' + (className ? ' ' + className : '')}>
      <select {...selectProps}></select>
      <div class="select-icon">
        <svg class="fill-current h-4 w-4" viewBox="0 0 20 20">
          <path d="M9.3 13l.7.7L15.7 8l-1.5-1.4-4.2 4.2-4.2-4.2L4.3 8z" />
        </svg>
      </div>
    </div>
  );
}

changeDirection(e: JSX.TargetedMouseEvent<HTMLButtonElement>): void {
    e.preventDefault();
    e.stopPropagation();

    // to sort two or more columns at the same time
    this.actions.sortToggle(
      this.props.index,
      e.shiftKey === true && this.config.sort.multiColumn,
      this.props.compare,
    );
  }

private handleClick(e: JSX.TargetedMouseEvent<HTMLTableCellElement>): void {
    if (this.props.messageCell) return;
    this.config.eventEmitter.emit(
      'cellClick',
      e,
      this.props.cell,
      this.props.column,
      this.props.row,
    );
  }

Links = (props: LinksProps) => {
  const { layoutRoot, layout } = props
  const linkTheme = useContext(ThemeContext).link
  const model = Model.useContainer()
  const links: JSX.Element[] = []

  layoutRoot.each((node) => {
    node.children?.forEach((child) => {
      links.push(
        linkTheme.render(node, child, {
          layout,
          justify: model.getNodeJustify(child.data.id),
        }),
      )
    })
  })
  return <g className="links">{links}</g>
}

VieraLogo = (props: JSX.SVGAttributes<SVGSVGElement>): JSX.Element => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    version="1.1"
    id="svg4588"
    viewBox="0 0 302.00001 111.97555"
    preserveAspectRatio="xMidYMid meet"
    x="0"
    y="0"
    {...props}
  >
    <defs id="defs4590" />
    <g transform="translate(1243.319,113.58067)" id="layer1">
      <g transform="matrix(1.8851444,0,0,-1.8851444,-1069.3004,-44.136734)" id="g3664">
        <path
          id="path3666"
          style={{ fillOpacity: '1', fillRule: 'nonzero', stroke: 'none' }}
          d="m 0,0 c 0.011,-0.234 0.104,-11.507 0.104,-11.614 -0.087,-0.039 -20.373,-9.349 -20.598,-9.466 0,0.258 -0.287,46.641 -0.293,46.748 0.929,0.482 20.37,9.46 20.573,9.552 l 0.035,0.023 c 0.004,-0.26 0.069,-11.6 0.069,-11.688 l -10.208,-4.969 -0.007,-6.491 c 0,0 9.657,4.433 9.882,4.549 0.006,-0.26 0.071,-9.891 0.071,-9.987 L -10.244,2 l 0.03,-6.436 0.131,0.051 C -9.703,-4.195 -1.061,-0.52 0,0"
        />
      </g>
      <g transform="matrix(1.8851444,0,0,-1.8851444,-1158.3227,-99.62596)" id="g3668">
        <path
          id="path3670"
          style={{ fillOpacity: '1', fillRule: 'nonzero', stroke: 'none' }}
          d="m 0,0 c 0,-0.105 0.405,-50.311 0.41,-50.571 0.22,0.099 11.037,4.702 11.134,4.761 0,0.101 -0.238,50.454 -0.238,50.707 C 11.066,4.78 0.101,0.047 0,0"
        />
      </g>
      <g transform="matrix(1.8851444,0,0,-1.8851444,-961.94147,-112.58067)" id="g3672">
        <path
          id="path3674"
          style={{ fillOpacity: '1', fillRule: 'nonzero', stroke: 'none' }}
          d="m 0,0 c -0.178,-0.135 -9.602,-5.468 -9.665,-5.499 -0.015,-0.076 -8.534,-52.141 -8.597,-52.503 0.302,0.184 11.079,6.831 11.129,6.876 0.121,0.746 2.988,21.225 3.491,24.719 0.087,0.566 0.109,1.673 0.252,1.673 0.154,0 0.2,-0.974 0.322,-1.632 0.645,-2.895 4.156,-18.386 4.462,-19.776 0.2,0.144 8.92,5.433 9.015,5.498 C 10.395,-40.535 0.054,-0.225 0,0"
        />
      </g>
      <g transform="matrix(1.8851444,0,0,-1.8851444,-1042.6088,-74.027584)" id="g3676">
        <path
          id="path3678"
          style={{ fillOpacity: '1', fillRule: 'nonzero', stroke: 'none' }}
          d="m 0,0 c 0,-0.355 0.034,-33.077 0.046,-35.602 0.155,0.109 0.544,0.32 0.544,0.32 l 10.305,5.428 c 0,0.988 -0.122,18.72 -0.122,18.73 l -0.04,3.826 c -0.022,0.854 -0.048,1.646 -0.048,2.407 0,4.188 0.56,7.483 4.495,9.767 0.208,0.119 4.061,2.207 4.494,2.467 0,0.062 0.068,12.477 0.068,12.753 C 18.543,19.457 8.588,14.167 8.588,14.167 3.772,11.421 0.156,5.472 0,0"
        />
      </g>
      <g transform="matrix(1.8851444,0,0,-1.8851444,-1204.8574,-69.454224)" id="g3680">
        <path
          id="path3682"
          style={{ fillOpacity: '1', fillRule: 'nonzero', stroke: 'none' }}
          d="m 0,0 c -0.436,-3.849 -1.08,-8.368 -1.367,-10.55 -0.154,-1.101 0,-1.727 -0.213,-1.727 -0.235,0 -0.158,0.567 -0.475,1.587 -0.364,1.179 -0.839,2.796 -1.483,4.912 -1.766,5.827 -4.962,16.521 -6.05,20.193 -0.166,-0.062 -10.17,-3.043 -10.284,-3.115 0.052,-0.135 14.607,-46.554 14.66,-46.761 0.183,0.108 10.486,5.687 10.566,5.73 0.004,0.089 6.743,50.42 6.788,50.723 C 11.882,20.865 1.982,17.956 1.906,17.905 1.513,15.425 0.795,6.91 0,0"
        />
      </g>
    </g>
  </svg>
)

logosCSS: JSX.CSSProperties = { fill: '#124686', height: '2em' }

private _createBracketColumns(
    results: Result[],
    resultsPaths: string[],
    stage: number,
  ): JSX.Element[] {
    const toCreate = 2 ** stage / 2;
    const mapper = Array(toCreate).fill(undefined);

    const cols = [
      <div
        class={`bracket-column${stage === 1 ? ' bracket-column-semis' : ''}`}
      >
        {mapper.map((_, i) => (
          <div class="bracket-items-container">
            {results[i] && [
              ...results[i].items.map(item => (
                <div
                  class={`bracket-item${
                    typeof item === 'string' ? ' bracket-item-leaf' : ''
                  }`}
                >
                  {this._getResultLabel(item) ||
                    (typeof item === 'string' ? 'Unselected' : 'Undecided')}
                </div>
              )),
              <button
                class="button result-edit-button"
                data-path={resultsPaths[i]}
                onClick={this._onSelectBracketClick}
              >
                ...
              </button>,
            ]}
          </div>
        ))}
      </div>,
    ];

    const nextResults: Result[] = [];
    const nextResultsPaths: string[] = [];

    for (const [i, result] of results.entries()) {
      const path = resultsPaths[i];

      for (let itemI = 0; itemI < 2; itemI++) {
        if (typeof result.items[itemI] === 'string') continue;
        nextResults.push(result.items[itemI] as Result);
        nextResultsPaths.push(path + '/items/' + itemI);
      }
    }

    if (nextResults.length !== 0) {
      cols.push(
        ...this._createBracketColumns(nextResults, nextResultsPaths, stage + 1),
      );
    }

    return cols;
  }

private _createBracket(result: Result): JSX.Element {
    const cols = [
      <div class="bracket-center">
        <div class="bracket-center-items">
          <div class="bracket-center-item">
            {this._getResultLabel(result.items[0]) ||
              (typeof result.items[0] === 'string'
                ? 'Unselected'
                : 'Undecided')}
          </div>
          <div class="bracket-center-vs">
            <button
              class="button"
              data-path="/"
              onClick={this._onSelectBracketClick}
            >
              ...
            </button>
          </div>
          <div class="bracket-center-item">
            {this._getResultLabel(result.items[1]) ||
              (typeof result.items[0] === 'string'
                ? 'Unselected'
                : 'Undecided')}
          </div>
        </div>
      </div>,
    ];

    for (let i = 0; i < 2; i++) {
      if (typeof result.items[i] === 'string') continue;
      const newCols = this._createBracketColumns(
        [result.items[i] as Result],
        ['/items/' + i],
        1,
      );

      if (i === 0) {
        cols.unshift(...newCols.reverse());
      } else {
        cols.push(...newCols);
      }
    }

    return <div class="bracket">{cols}</div>;
  }

private onClick(e: JSX.TargetedMouseEvent<HTMLInputElement>): void {
    e.stopPropagation();

    if (this.isSortable()) {
      this.sortRef.current.changeDirection(e);
    }
  }

private keyDown(e: JSX.TargetedMouseEvent<HTMLInputElement>): void {
    if (this.isSortable() && e.which === 13) {
      this.onClick(e);
    }
  }

private handleClick(e: JSX.TargetedMouseEvent<HTMLTableRowElement>): void {
    if (this.props.messageRow) return;
    this.config.eventEmitter.emit('rowClick', e, this.props.row);
  }

private _createBracketColumns(
    results: Result[],
    resultPaths: number[][],
    stage: number,
    isLeftHandSide: boolean,
  ): JSX.Element[] {
    const toCreate = 2 ** stage / 2;
    const mapper = Array(toCreate).fill(undefined);

    const cols = [
      <div
        class={`bracket-column${stage === 1 ? ' bracket-column-semis' : ''}${
          isLeftHandSide ? ' bracket-column-left' : ''
        }`}
      >
        {mapper.map((_, i) => {
          // lol this needs refactoring
          let topColor = '';
          let bottomColor = '';
          let nextColor = '';

          if (results[i]) {
            const result = results[i];
            const topTopic = getResultTopic(this.props.topics, result.items[0]);
            const bottomTopic = getResultTopic(
              this.props.topics,
              result.items[1],
            );

            if (result.winningIndex === 0 && topTopic) {
              nextColor = topColor = getHexColor(
                getMidColor(
                  palette[topTopic.colorId][0],
                  palette[topTopic.colorId][1],
                ),
              );
            } else if (result.winningIndex === 1 && bottomTopic) {
              nextColor = bottomColor = getHexColor(
                getMidColor(
                  palette[bottomTopic.colorId][0],
                  palette[bottomTopic.colorId][1],
                ),
              );
            }
          }

          return (
            <div class="bracket-items-container">
              {results[i] && [
                ...results[i].items.map((item, itemIndex) => {
                  const topic = getResultTopic(this.props.topics, item);
                  const champImg =
                    this.props.champions[topic?.championId || '']?.picture ||
                    '';
                  const won = results[i].winningIndex === itemIndex;
                  const lost = results[i].winningIndex !== -1 && !won;

                  return (
                    <div class="bracket-item">
                      <div
                        class={`bracket-item-content${lost ? ' lost' : ''}`}
                        data-path={[...resultPaths[i], itemIndex].join('-')}
                      >
                        <div class="bracket-item-box">
                          {topic ? topic.label : 'TBD'}
                          <div
                            class="bracket-item-tbd"
                            style={{ opacity: topic ? 0 : 1 }}
                          >
                            TBD
                          </div>
                          {topic && (
                            <div
                              class="bracket-item-win"
                              style={{
                                opacity: won ? 1 : 0,
                                '--color-from': getHexColor(
                                  palette[topic.colorId][0],
                                ),
                                '--color-to': getHexColor(
                                  palette[topic.colorId][1],
                                ),
                              }}
                            >
                              {topic ? topic.label : 'TBD'}
                            </div>
                          )}
                        </div>
                        <div class="bracket-item-champion">
                          {[
                            topic?.championId && (
                              <img src={champImg || genericAvatarURL} />
                            ),
                            <div
                              class="bracket-item-champion-unknown"
                              style={{ opacity: topic?.championId ? 0 : 1 }}
                            >
                              ?
                            </div>,
                          ]}
                        </div>
                      </div>
                    </div>
                  );
                }),
                stage === 1 ? (
                  <div class="bracket-lines-semi">
                    <div
                      class="bracket-line bracket-line-semi-top"
                      style={{ '--line-color': topColor }}
                    />
                    <div
                      class="bracket-line bracket-line-semi-bottom"
                      style={{ '--line-color': bottomColor }}
                    />
                    <div
                      class="bracket-line-circle bracket-line-circle-top-1"
                      style={{
                        '--line-color': topColor,
                        background: topColor,
                      }}
                    />
                    <div
                      class="bracket-line-circle bracket-line-circle-top-2"
                      style={{
                        '--line-color': topColor,
                        background: topColor,
                      }}
                    />
                    <div
                      class="bracket-line-circle bracket-line-circle-bottom-1"
                      style={{
                        '--line-color': bottomColor,
                        background: bottomColor,
                      }}
                    />
                    <div
                      class="bracket-line-circle bracket-line-circle-bottom-2"
                      style={{
                        '--line-color': bottomColor,
                        background: bottomColor,
                      }}
                    />
                  </div>
                ) : (
                  <div class="bracket-lines">
                    <div
                      class="bracket-line bracket-line-top"
                      style={{ '--line-color': topColor }}
                    />
                    <div
                      class="bracket-line bracket-line-bottom"
                      style={{ '--line-color': bottomColor }}
                    />
                    <div
                      class="bracket-line bracket-line-vertical-1"
                      style={{ '--line-color': topColor }}
                    />
                    <div
                      class="bracket-line bracket-line-vertical-2"
                      style={{ '--line-color': bottomColor }}
                    />
                    <div
                      class="bracket-line bracket-line-next"
                      style={{ '--line-color': nextColor }}
                    />
                    <div
                      class="bracket-line-circle bracket-line-circle-top"
                      style={{ '--line-color': topColor, background: topColor }}
                    />
                    <div
                      class="bracket-line-circle bracket-line-circle-bottom"
                      style={{
                        '--line-color': bottomColor,
                        background: bottomColor,
                      }}
                    />
                    <div
                      class="bracket-line-circle bracket-line-circle-next"
                      style={{
                        '--line-color': nextColor,
                        background: nextColor,
                      }}
                    />
                  </div>
                ),
              ]}
            </div>
          );
        })}
      </div>,
    ];

    const nextResults: Result[] = [];
    const nextResultsPath: number[][] = [];

    for (const [i, result] of results.entries()) {
      for (let itemI = 0; itemI < 2; itemI++) {
        if (typeof result.items[itemI] === 'string') continue;
        nextResults.push(result.items[itemI] as Result);
        nextResultsPath.push([...resultPaths[i], itemI]);
      }
    }

    if (nextResults.length !== 0) {
      cols.push(
        ...this._createBracketColumns(
          nextResults,
          nextResultsPath,
          stage + 1,
          isLeftHandSide,
        ),
      );
    }

    return cols;
  }