@primer/react/dist/internal/components/TextInputInnerVisualSlot.js

An implementation of GitHub's Primer Design System using React

import { c } from 'react-compiler-runtime';
import { clsx } from 'clsx';
import styles from './TextInputInnerVisualSlot.module.css.js';
import { jsx, jsxs } from 'react/jsx-runtime';
import Spinner from '../../Spinner/Spinner.js';

const TextInputInnerVisualSlot = t0 => {
  const $ = c(21);
  const {
    children,
    hasLoadingIndicator,
    showLoadingIndicator,
    visualPosition,
    id,
    componentPrefix: t1
  } = t0;
  const componentPrefix = t1 === undefined ? "TextInput" : t1;
  const isLeading = visualPosition === "leading";
  if (!children && !hasLoadingIndicator || isLeading && !children && !showLoadingIndicator) {
    return null;
  }
  if (!hasLoadingIndicator) {
    const t2 = isLeading ? `${componentPrefix}.LeadingVisual` : `${componentPrefix}.TrailingVisual`;
    let t3;
    if ($[0] !== children || $[1] !== id || $[2] !== t2) {
      t3 = /*#__PURE__*/jsx("span", {
        className: "TextInput-icon",
        id: id,
        "aria-hidden": "true",
        "data-component": t2,
        children: children
      });
      $[0] = children;
      $[1] = id;
      $[2] = t2;
      $[3] = t3;
    } else {
      t3 = $[3];
    }
    return t3;
  }
  const t2 = isLeading ? `${componentPrefix}.LeadingVisual` : `${componentPrefix}.TrailingVisual`;
  let t3;
  if ($[4] !== children || $[5] !== showLoadingIndicator) {
    t3 = children && /*#__PURE__*/jsx("div", {
      className: clsx(showLoadingIndicator ? styles.SpinnerHidden : styles.SpinnerVisible),
      children: children
    });
    $[4] = children;
    $[5] = showLoadingIndicator;
    $[6] = t3;
  } else {
    t3 = $[6];
  }
  const t4 = showLoadingIndicator ? styles.SpinnerVisible : styles.SpinnerHidden;
  const t5 = children && styles.Spinner;
  const t6 = children && isLeading && styles.SpinnerLeading;
  let t7;
  if ($[7] !== t4 || $[8] !== t5 || $[9] !== t6) {
    t7 = clsx(t4, t5, t6);
    $[7] = t4;
    $[8] = t5;
    $[9] = t6;
    $[10] = t7;
  } else {
    t7 = $[10];
  }
  const t8 = children ? undefined : "small";
  let t9;
  if ($[11] !== t7 || $[12] !== t8) {
    t9 = /*#__PURE__*/jsx(Spinner, {
      srText: null,
      className: t7,
      size: t8
    });
    $[11] = t7;
    $[12] = t8;
    $[13] = t9;
  } else {
    t9 = $[13];
  }
  let t10;
  if ($[14] !== id || $[15] !== t3 || $[16] !== t9) {
    t10 = /*#__PURE__*/jsxs("div", {
      className: styles.Box,
      id: id,
      children: [t3, t9]
    });
    $[14] = id;
    $[15] = t3;
    $[16] = t9;
    $[17] = t10;
  } else {
    t10 = $[17];
  }
  let t11;
  if ($[18] !== t10 || $[19] !== t2) {
    t11 = /*#__PURE__*/jsx("span", {
      className: "TextInput-icon",
      "data-component": t2,
      children: t10
    });
    $[18] = t10;
    $[19] = t2;
    $[20] = t11;
  } else {
    t11 = $[20];
  }
  return t11;
};

export { TextInputInnerVisualSlot as default };