@atlaskit/toggle/dist/es2019/toggle.js

A toggle is used to view or switch between enabled or disabled states.

/* toggle.tsx generated by @compiled/babel-plugin v0.39.1 */
import _extends from "@babel/runtime/helpers/extends";
import "./toggle.compiled.css";
import { ax, ix } from "@compiled/react/runtime";
import React, { forwardRef, memo, useState } from 'react';
import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
import __noop from '@atlaskit/ds-lib/noop';
import { useId } from '@atlaskit/ds-lib/use-id';
import CheckMarkIcon from '@atlaskit/icon/core/check-mark';
import CloseIcon from '@atlaskit/icon/core/cross';
import { fg } from '@atlaskit/platform-feature-flags';
import Spinner from '@atlaskit/spinner';
import VisuallyHidden from '@atlaskit/visually-hidden';
import IconContainer from './icon-container';
const LOADING_LABEL = ', Loading';
const basicStyles = null;
const sizeStyles = {
  regular: "_2rko1rr0 _4t3ipxbi _1bsbxy5q _kfgtutpp _1mp41crf _p9c41fbe",
  large: "_2rko1rr0 _4t3iv47k _1bsb1jfw _kfgtpxbi _1mp47vkz _p9c4w12q"
};
const atomicBaseStyles = null;
const atomicSizeStyles = {
  regular: "_2rko1rr0 _4t3ipxbi _1bsbxy5q _kfgtutpp _1mp41crf",
  large: "_2rko1rr0 _4t3iv47k _1bsb1jfw _kfgtpxbi _1mp47vkz"
};

/**
 * Slider knob translate transforms per size, applied when checked.
 */
const atomicCheckedSliderStyles = {
  regular: "_7dwz1fbe",
  large: "_7dwzw12q"
};

/**
 * Applied when the toggle is checked
 */
const atomicCheckedStyles = null;

/**
 * Applied when the toggle is checked and not disabled.
 */
const atomicCheckedHoveredStyles = null;

/**
 * Applied when the toggle is unchecked and not disabled.
 */
const atomicUncheckedHoveredStyles = null;

/**
 * Applied when the toggle is disabled.
 */
const atomicDisabledStyles = null;

/**
 * Removes the unnecessary zIndex from the disabled toggle handle (legacy path)
 * that caused it to render above overlapping elements like select menus.
 */
const basicDisabledZIndexFixStyles = null;

/**
 * Removes the unnecessary zIndex from the disabled toggle handle (atomic path)
 * that caused it to render above overlapping elements like select menus.
 */
const atomicDisabledZIndexFixStyles = null;
const atomicInputStyles = null;
const noop = __noop;
const analyticsAttributes = {
  componentName: 'toggle',
  packageName: "@atlaskit/toggle",
  packageVersion: "15.6.1"
};

/**
 * __Toggle__
 *
 * A toggle is used to view or switch between enabled or disabled states.
 *
 * - [Examples](https://atlassian.design/components/toggle/examples)
 * - [Code](https://atlassian.design/components/toggle/code)
 * - [Usage](https://atlassian.design/components/toggle/usage)
 */
const Toggle = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((props, ref) => {
  const {
    defaultChecked = false,
    isDisabled = false,
    onBlur: providedOnBlur = noop,
    onChange: providedChange = noop,
    onFocus: providedFocus = noop,
    size = 'regular',
    name = '',
    value = '',
    isChecked,
    isLoading,
    analyticsContext,
    id,
    testId,
    label,
    descriptionId
  } = props;
  const isControlled = typeof isChecked === 'undefined';
  const [checked, setChecked] = useState(defaultChecked);
  const loadingLabelId = useId();
  const handleBlur = usePlatformLeafEventHandler({
    fn: providedOnBlur,
    action: 'blur',
    analyticsData: analyticsContext,
    ...analyticsAttributes
  });
  const handleFocus = usePlatformLeafEventHandler({
    fn: providedFocus,
    action: 'focus',
    analyticsData: analyticsContext,
    ...analyticsAttributes
  });
  const handleChange = usePlatformLeafEventHandler({
    fn: (event, analyticsEvent) => {
      if (isControlled) {
        setChecked(checked => !checked);
      }
      return providedChange(event, analyticsEvent);
    },
    action: 'change',
    analyticsData: analyticsContext,
    ...analyticsAttributes
  });
  const shouldChecked = isControlled ? checked : isChecked;
  const controlProps = {
    // In the legacy styling path, data-* attributes drive CSS styling via
    // attribute selectors. In the atomic path they are no longer needed.
    ...(!fg('platform-toggle-atomic-styles') && {
      'data-checked': shouldChecked ? shouldChecked : undefined,
      'data-disabled': isDisabled ? isDisabled : undefined,
      'data-size': size
    }),
    'data-testid': testId ? testId : undefined
  };
  const labelId = useId();
  return /*#__PURE__*/React.createElement("label", _extends({}, controlProps, {
    className: ax([!fg('platform-toggle-atomic-styles') && "_v564kete _1h6d1j28 _1dqonqa1 _189e1dm9 _1e0c1o8l _vchh1ntv _kqswh2mm _1y1m1ntv _bfhk1aqn _syaz5w2r _6rthv77o _1pfhv77o _12l2v77o _ahbqv77o _85i5v77o _1q51v77o _y4tiv77o _bozgv77o _1i2uidpf _1i3tidpf _se28idpf _3tunidpf _1423idpf _1hrtidpf _1bz2idpf _rqfvidpf _1yc0glyw _onsr1snc _1vgmagmp _1av610yn _1ulhidpf _rfx31qll _pdykkete _1cs8stnw _1rus5w2r _1kt9b3bt _1fkr1y44 _z5wt1y44 _7dwzglyw _1ys41v1w _krlfnqa1 _ju3ddkaa _1bkiby5v _1fltby5v _3xv2by5v _9471kcmj _ucab5w2r _mqf82sac _3dj22sac _1dl92sac _1div5w2r _1il8kb7n _y54d5w2r _irr31ibz _d0altlke _19ja13gf _8muf13gf _1k1q13gf _1pluy7x8 _1uo81ibz _178cby5v _16rslghj _i5ec1w7i", !fg('platform-toggle-atomic-styles') && sizeStyles[size], fg('platform-toggle-atomic-styles') && "_v564kete _1h6d1j28 _1dqonqa1 _189e1dm9 _1e0c1o8l _vchh1ntv _kqswh2mm _1y1m1ntv _bfhk1aqn _syaz5w2r _80omtlke _6rthv77o _1pfhv77o _12l2v77o _ahbqv77o _85i5v77o _1q51v77o _y4tiv77o _bozgv77o _rfx31qll _pdykkete _1cs8stnw _1rus5w2r _1kt9b3bt _1fkr1y44 _z5wt1y44 _1ys41v1w _ju3ddkaa _16rslghj _i5ec1w7i", fg('platform-toggle-atomic-styles') && atomicSizeStyles[size], shouldChecked && fg('platform-toggle-atomic-styles') && "_bfhkkcmj", shouldChecked && fg('platform-toggle-atomic-styles') && atomicCheckedSliderStyles[size], !isDisabled && shouldChecked && fg('platform-toggle-atomic-styles') && "_irr3y7x8", !isDisabled && !shouldChecked && fg('platform-toggle-atomic-styles') && "_irr31ibz", isDisabled && fg('platform-toggle-atomic-styles') && "_bfhkby5v _syaz2sac _80om13gf _1g0vkb7n", fg('platform-toggle-fix-disabled-zindex') && "_1il8n7od", isDisabled && fg('platform-toggle-fix-disabled-zindex') && "_1g0vn7od"])
  }), label ? /*#__PURE__*/React.createElement("span", {
    id: labelId,
    hidden: true
  }, isLoading ? `${label}${LOADING_LABEL}` : label) : null, /*#__PURE__*/React.createElement("input", {
    ref: ref,
    checked: shouldChecked,
    disabled: isDisabled,
    id: id,
    name: name,
    onBlur: handleBlur,
    onChange: handleChange,
    onFocus: handleFocus,
    type: "checkbox",
    value: value,
    "data-testid": testId && `${testId}--input`,
    "aria-labelledby": isLoading && label ? `${labelId} ${loadingLabelId}` : label ? labelId : undefined,
    "aria-describedby": descriptionId
    // In the atomic styling path, apply input styles directly to the input element
    // rather than via nested styles on the parent label.
    ,
    className: ax([fg('platform-toggle-atomic-styles') && "_19pkidpf _2hwxidpf _otyridpf _18u0idpf _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _19itglyw _tzy4idpf _nt751snc _49pcagmp _1hvw10yn"])
  }), /*#__PURE__*/React.createElement(IconContainer, {
    size: size,
    isHidden: !shouldChecked,
    position: "left"
  }, isLoading && shouldChecked ? /*#__PURE__*/React.createElement(Spinner, {
    size: "xsmall",
    appearance: "invert"
  }) : /*#__PURE__*/React.createElement(CheckMarkIcon, {
    label: "",
    color: "currentColor",
    testId: testId && `${testId}--toggle-check-icon`,
    size: "small"
  })), /*#__PURE__*/React.createElement(IconContainer, {
    size: size,
    isHidden: shouldChecked,
    position: "right"
  }, isLoading && !shouldChecked ? /*#__PURE__*/React.createElement(Spinner, {
    size: "xsmall",
    appearance: "invert"
  }) : /*#__PURE__*/React.createElement(CloseIcon, {
    label: "",
    color: "currentColor",
    testId: testId && `${testId}--toggle-cross-icon`,
    size: "small"
  })), isLoading && !label && /*#__PURE__*/React.createElement(VisuallyHidden, {
    id: loadingLabelId
  }, LOADING_LABEL));
}));
Toggle.displayName = 'Toggle';
export default Toggle;