@primer/react/dist/ToggleSwitch/ToggleSwitch.js

An implementation of GitHub's Primer Design System using React

import { c } from 'react-compiler-runtime';
import React, { useEffect } from 'react';
import { clsx } from 'clsx';
import VisuallyHidden from '../_VisuallyHidden.js';
import useSafeTimeout from '../hooks/useSafeTimeout.js';
import classes from './ToggleSwitch.module.css.js';
import { jsxs, jsx } from 'react/jsx-runtime';
import { useProvidedStateOrCreate } from '../hooks/useProvidedStateOrCreate.js';
import { useId } from '../hooks/useId.js';
import { AriaStatus } from '../live-region/AriaStatus.js';
import Spinner from '../Spinner/Spinner.js';

const CircleIcon = t0 => {
  const $ = c(4);
  const {
    size
  } = t0;
  const t1 = size === "small" ? "12" : "16";
  const t2 = size === "small" ? "12" : "16";
  let t3;
  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
    t3 = /*#__PURE__*/jsx("path", {
      fillRule: "evenodd",
      d: "M8 12.5a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9ZM8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12Z"
    });
    $[0] = t3;
  } else {
    t3 = $[0];
  }
  let t4;
  if ($[1] !== t1 || $[2] !== t2) {
    t4 = /*#__PURE__*/jsx("svg", {
      "aria-hidden": "true",
      width: t1,
      height: t2,
      viewBox: "0 0 16 16",
      fill: "currentColor",
      xmlns: "http://www.w3.org/2000/svg",
      children: t3
    });
    $[1] = t1;
    $[2] = t2;
    $[3] = t4;
  } else {
    t4 = $[3];
  }
  return t4;
};
const LineIcon = t0 => {
  const $ = c(4);
  const {
    size
  } = t0;
  const t1 = size === "small" ? "12" : "16";
  const t2 = size === "small" ? "12" : "16";
  let t3;
  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
    t3 = /*#__PURE__*/jsx("path", {
      fillRule: "evenodd",
      d: "M8 2a.75.75 0 0 1 .75.75v11.5a.75.75 0 0 1-1.5 0V2.75A.75.75 0 0 1 8 2Z"
    });
    $[0] = t3;
  } else {
    t3 = $[0];
  }
  let t4;
  if ($[1] !== t1 || $[2] !== t2) {
    t4 = /*#__PURE__*/jsx("svg", {
      "aria-hidden": "true",
      width: t1,
      height: t2,
      viewBox: "0 0 16 16",
      fill: "currentColor",
      xmlns: "http://www.w3.org/2000/svg",
      children: t3
    });
    $[1] = t1;
    $[2] = t2;
    $[3] = t4;
  } else {
    t4 = $[3];
  }
  return t4;
};
const ToggleSwitch = /*#__PURE__*/React.forwardRef(function ToggleSwitch(props, ref) {
  var _buttonLabelOn, _buttonLabelOff;
  const $ = c(95);
  let ariaDescribedby;
  let ariaLabelledby;
  let buttonLabelOff;
  let buttonLabelOn;
  let checked;
  let className;
  let defaultChecked;
  let disabled;
  let loading;
  let onChange;
  let onClick;
  let rest;
  let t0;
  let t1;
  let t2;
  let t3;
  let t4;
  if ($[0] !== props) {
    ({
      "aria-labelledby": ariaLabelledby,
      "aria-describedby": ariaDescribedby,
      defaultChecked,
      disabled,
      loading,
      checked,
      onChange,
      onClick,
      buttonType: t0,
      size: t1,
      statusLabelPosition: t2,
      loadingLabelDelay: t3,
      loadingLabel: t4,
      className,
      buttonLabelOn,
      buttonLabelOff,
      ...rest
    } = props);
    $[0] = props;
    $[1] = ariaDescribedby;
    $[2] = ariaLabelledby;
    $[3] = buttonLabelOff;
    $[4] = buttonLabelOn;
    $[5] = checked;
    $[6] = className;
    $[7] = defaultChecked;
    $[8] = disabled;
    $[9] = loading;
    $[10] = onChange;
    $[11] = onClick;
    $[12] = rest;
    $[13] = t0;
    $[14] = t1;
    $[15] = t2;
    $[16] = t3;
    $[17] = t4;
  } else {
    ariaDescribedby = $[1];
    ariaLabelledby = $[2];
    buttonLabelOff = $[3];
    buttonLabelOn = $[4];
    checked = $[5];
    className = $[6];
    defaultChecked = $[7];
    disabled = $[8];
    loading = $[9];
    onChange = $[10];
    onClick = $[11];
    rest = $[12];
    t0 = $[13];
    t1 = $[14];
    t2 = $[15];
    t3 = $[16];
    t4 = $[17];
  }
  const buttonType = t0 === undefined ? "button" : t0;
  const size = t1 === undefined ? "medium" : t1;
  const statusLabelPosition = t2 === undefined ? "start" : t2;
  const loadingLabelDelay = t3 === undefined ? 2000 : t3;
  const loadingLabel = t4 === undefined ? "Loading" : t4;
  const isControlled = typeof checked !== "undefined";
  const [isOn, setIsOn] = useProvidedStateOrCreate(checked, onChange, Boolean(defaultChecked));
  const acceptsInteraction = !disabled && !loading;
  const [isLoadingLabelVisible, setIsLoadingLabelVisible] = React.useState(false);
  const loadingLabelId = useId("loadingLabel");
  const {
    safeSetTimeout
  } = useSafeTimeout();
  let t5;
  if ($[18] !== disabled || $[19] !== isControlled || $[20] !== isOn || $[21] !== loading || $[22] !== onClick || $[23] !== setIsOn) {
    t5 = e => {
      if (disabled || loading) {
        return;
      }
      if (!isControlled) {
        setIsOn(!isOn);
      }
      onClick && onClick(e);
    };
    $[18] = disabled;
    $[19] = isControlled;
    $[20] = isOn;
    $[21] = loading;
    $[22] = onClick;
    $[23] = setIsOn;
    $[24] = t5;
  } else {
    t5 = $[24];
  }
  const handleToggleClick = t5;
  let t6;
  let t7;
  if ($[25] !== checked || $[26] !== disabled || $[27] !== isControlled || $[28] !== onChange) {
    t6 = () => {
      if (onChange && isControlled && !disabled) {
        onChange(Boolean(checked));
      }
    };
    t7 = [onChange, checked, isControlled, disabled];
    $[25] = checked;
    $[26] = disabled;
    $[27] = isControlled;
    $[28] = onChange;
    $[29] = t6;
    $[30] = t7;
  } else {
    t6 = $[29];
    t7 = $[30];
  }
  useEffect(t6, t7);
  let t8;
  let t9;
  if ($[31] !== isLoadingLabelVisible || $[32] !== loading || $[33] !== loadingLabelDelay || $[34] !== safeSetTimeout) {
    t8 = () => {
      if (!loading && isLoadingLabelVisible) {
        setIsLoadingLabelVisible(false);
      } else {
        if (loading && !isLoadingLabelVisible) {
          safeSetTimeout(() => {
            setIsLoadingLabelVisible(true);
          }, loadingLabelDelay);
        }
      }
    };
    t9 = [loading, isLoadingLabelVisible, loadingLabelDelay, safeSetTimeout];
    $[31] = isLoadingLabelVisible;
    $[32] = loading;
    $[33] = loadingLabelDelay;
    $[34] = safeSetTimeout;
    $[35] = t8;
    $[36] = t9;
  } else {
    t8 = $[35];
    t9 = $[36];
  }
  useEffect(t8, t9);
  let switchButtonDescribedBy = loadingLabelId;
  if (ariaDescribedby) {
    switchButtonDescribedBy = `${switchButtonDescribedBy} ${ariaDescribedby}`;
  }
  let t10;
  if ($[37] !== className) {
    t10 = clsx(classes.ToggleSwitch, className);
    $[37] = className;
    $[38] = t10;
  } else {
    t10 = $[38];
  }
  const t11 = isLoadingLabelVisible && loadingLabel;
  let t12;
  if ($[39] !== loadingLabelId || $[40] !== t11) {
    t12 = /*#__PURE__*/jsx(VisuallyHidden, {
      children: /*#__PURE__*/jsx(AriaStatus, {
        announceOnShow: true,
        id: loadingLabelId,
        children: t11
      })
    });
    $[39] = loadingLabelId;
    $[40] = t11;
    $[41] = t12;
  } else {
    t12 = $[41];
  }
  let t13;
  if ($[42] !== loading || $[43] !== statusLabelPosition) {
    t13 = loading ? /*#__PURE__*/jsx("div", {
      className: classes.LoadingSpinner,
      "data-status-label-position": statusLabelPosition,
      children: /*#__PURE__*/jsx(Spinner, {
        size: "small",
        srText: null
      })
    }) : null;
    $[42] = loading;
    $[43] = statusLabelPosition;
    $[44] = t13;
  } else {
    t13 = $[44];
  }
  const t14 = !acceptsInteraction;
  const t15 = !isOn;
  const t16 = (_buttonLabelOn = buttonLabelOn) !== null && _buttonLabelOn !== void 0 ? _buttonLabelOn : "On";
  let t17;
  if ($[45] !== t15 || $[46] !== t16) {
    t17 = /*#__PURE__*/jsx("span", {
      className: classes.StatusTextItem,
      "data-hidden": t15,
      children: t16
    });
    $[45] = t15;
    $[46] = t16;
    $[47] = t17;
  } else {
    t17 = $[47];
  }
  const t18 = (_buttonLabelOff = buttonLabelOff) !== null && _buttonLabelOff !== void 0 ? _buttonLabelOff : "Off";
  let t19;
  if ($[48] !== isOn || $[49] !== t18) {
    t19 = /*#__PURE__*/jsx("span", {
      className: classes.StatusTextItem,
      "data-hidden": isOn,
      children: t18
    });
    $[48] = isOn;
    $[49] = t18;
    $[50] = t19;
  } else {
    t19 = $[50];
  }
  let t20;
  if ($[51] !== handleToggleClick || $[52] !== size || $[53] !== t14 || $[54] !== t17 || $[55] !== t19) {
    t20 = /*#__PURE__*/jsxs("span", {
      className: classes.StatusText,
      "data-size": size,
      "data-disabled": t14,
      "aria-hidden": "true",
      onClick: handleToggleClick,
      children: [t17, t19]
    });
    $[51] = handleToggleClick;
    $[52] = size;
    $[53] = t14;
    $[54] = t17;
    $[55] = t19;
    $[56] = t20;
  } else {
    t20 = $[56];
  }
  const t21 = !acceptsInteraction;
  const t22 = isLoadingLabelVisible || ariaDescribedby ? switchButtonDescribedBy : undefined;
  const t23 = !acceptsInteraction;
  const t24 = !acceptsInteraction;
  let t25;
  if ($[57] !== size) {
    t25 = /*#__PURE__*/jsx(LineIcon, {
      size: size
    });
    $[57] = size;
    $[58] = t25;
  } else {
    t25 = $[58];
  }
  let t26;
  if ($[59] !== isOn || $[60] !== t24 || $[61] !== t25) {
    t26 = /*#__PURE__*/jsx("div", {
      className: `${classes.IconContainer} ${classes.LineIconContainer}`,
      "data-checked": isOn,
      "data-disabled": t24,
      children: t25
    });
    $[59] = isOn;
    $[60] = t24;
    $[61] = t25;
    $[62] = t26;
  } else {
    t26 = $[62];
  }
  const t27 = !acceptsInteraction;
  let t28;
  if ($[63] !== size) {
    t28 = /*#__PURE__*/jsx(CircleIcon, {
      size: size
    });
    $[63] = size;
    $[64] = t28;
  } else {
    t28 = $[64];
  }
  let t29;
  if ($[65] !== isOn || $[66] !== t27 || $[67] !== t28) {
    t29 = /*#__PURE__*/jsx("div", {
      className: `${classes.IconContainer} ${classes.CircleIconContainer}`,
      "data-checked": isOn,
      "data-disabled": t27,
      children: t28
    });
    $[65] = isOn;
    $[66] = t27;
    $[67] = t28;
    $[68] = t29;
  } else {
    t29 = $[68];
  }
  let t30;
  if ($[69] !== t26 || $[70] !== t29) {
    t30 = /*#__PURE__*/jsxs("div", {
      className: classes.SwitchButtonContent,
      "aria-hidden": "true",
      children: [t26, t29]
    });
    $[69] = t26;
    $[70] = t29;
    $[71] = t30;
  } else {
    t30 = $[71];
  }
  const t31 = !acceptsInteraction;
  let t32;
  if ($[72] !== isOn || $[73] !== t31) {
    t32 = /*#__PURE__*/jsx("div", {
      className: classes.ToggleKnob,
      "data-checked": isOn,
      "data-disabled": t31,
      "aria-hidden": "true"
    });
    $[72] = isOn;
    $[73] = t31;
    $[74] = t32;
  } else {
    t32 = $[74];
  }
  let t33;
  if ($[75] !== ariaLabelledby || $[76] !== buttonType || $[77] !== handleToggleClick || $[78] !== isOn || $[79] !== ref || $[80] !== size || $[81] !== t21 || $[82] !== t22 || $[83] !== t23 || $[84] !== t30 || $[85] !== t32) {
    t33 = /*#__PURE__*/jsxs("button", {
      ref: ref,
      type: buttonType,
      className: classes.SwitchButton,
      "data-size": size,
      "data-checked": isOn,
      "data-disabled": t21,
      onClick: handleToggleClick,
      "aria-labelledby": ariaLabelledby,
      "aria-describedby": t22,
      "aria-pressed": isOn,
      "aria-disabled": t23,
      children: [t30, t32]
    });
    $[75] = ariaLabelledby;
    $[76] = buttonType;
    $[77] = handleToggleClick;
    $[78] = isOn;
    $[79] = ref;
    $[80] = size;
    $[81] = t21;
    $[82] = t22;
    $[83] = t23;
    $[84] = t30;
    $[85] = t32;
    $[86] = t33;
  } else {
    t33 = $[86];
  }
  let t34;
  if ($[87] !== rest || $[88] !== statusLabelPosition || $[89] !== t10 || $[90] !== t12 || $[91] !== t13 || $[92] !== t20 || $[93] !== t33) {
    t34 = /*#__PURE__*/jsxs("div", {
      className: t10,
      "data-status-label-position": statusLabelPosition,
      ...rest,
      children: [t12, t13, t20, t33]
    });
    $[87] = rest;
    $[88] = statusLabelPosition;
    $[89] = t10;
    $[90] = t12;
    $[91] = t13;
    $[92] = t20;
    $[93] = t33;
    $[94] = t34;
  } else {
    t34 = $[94];
  }
  return t34;
});
if (process.env.NODE_ENV !== "production") {
  ToggleSwitch.displayName = 'ToggleSwitch';
}

export { ToggleSwitch as default };