@grafana/ui/dist/esm/components/Switch/Switch.mjs.map

Grafana Components Library

{"version":3,"file":"Switch.mjs","sources":["../../../../src/components/Switch/Switch.tsx"],"sourcesContent":["import { css, cx } from '@emotion/css';\nimport { uniqueId } from 'lodash';\nimport { forwardRef, HTMLProps, useRef } from 'react';\n\nimport { GrafanaTheme2, deprecationWarning } from '@grafana/data';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\nimport { getFocusStyles, getMouseFocusStyles } from '../../themes/mixins';\nimport { Icon } from '../Icon/Icon';\n\nexport interface Props extends Omit<HTMLProps<HTMLInputElement>, 'value'> {\n  value?: boolean;\n  /** Show an invalid state around the input */\n  invalid?: boolean;\n}\n\n/**\n * Switch is a representation of an on-off state – like a light switch. So you can use Switch to toggle binary states.\n *\n * https://developers.grafana.com/ui/latest/index.html?path=/docs/inputs-switch--docs\n */\nexport const Switch = forwardRef<HTMLInputElement, Props>(\n  ({ value, checked, onChange, id, label, disabled, invalid = false, ...inputProps }, ref) => {\n    if (checked) {\n      deprecationWarning('Switch', 'checked prop', 'value');\n    }\n\n    const styles = useStyles2(getSwitchStyles);\n    const switchIdRef = useRef(id ? id : uniqueId('switch-'));\n\n    return (\n      <div className={cx(styles.switch, invalid && styles.invalid)}>\n        <input\n          type=\"checkbox\"\n          role=\"switch\"\n          disabled={disabled}\n          checked={value}\n          onChange={(event) => {\n            !disabled && onChange?.(event);\n          }}\n          id={switchIdRef.current}\n          {...inputProps}\n          ref={ref}\n        />\n        <label htmlFor={switchIdRef.current} aria-label={label}>\n          <Icon name=\"check\" size=\"xs\" />\n        </label>\n      </div>\n    );\n  }\n);\n\nSwitch.displayName = 'Switch';\n\nexport interface InlineSwitchProps extends Props {\n  /** Label to show next to the switch */\n  showLabel?: boolean;\n  /** Make inline switch's background and border transparent */\n  transparent?: boolean;\n}\n\nexport const InlineSwitch = forwardRef<HTMLInputElement, InlineSwitchProps>(\n  ({ transparent, className, showLabel, label, value, id, invalid, ...props }, ref) => {\n    const styles = useStyles2(getSwitchStyles, transparent);\n\n    return (\n      <div\n        className={cx(styles.inlineContainer, className, props.disabled && styles.disabled, invalid && styles.invalid)}\n      >\n        {showLabel && (\n          <label\n            htmlFor={id}\n            className={cx(styles.inlineLabel, value && styles.inlineLabelEnabled, 'inline-switch-label')}\n          >\n            {label}\n          </label>\n        )}\n        <Switch {...props} id={id} label={label} ref={ref} value={value} />\n      </div>\n    );\n  }\n);\n\nInlineSwitch.displayName = 'Switch';\n\nconst getSwitchStyles = (theme: GrafanaTheme2, transparent?: boolean) => ({\n  switch: css({\n    width: theme.spacing(4),\n    height: theme.spacing(2),\n    position: 'relative',\n    lineHeight: 1,\n\n    input: {\n      height: '100%',\n      width: '100% !important',\n      opacity: 0,\n      zIndex: -1000,\n      position: 'absolute',\n\n      '&:checked + label': {\n        background: theme.colors.primary.main,\n        borderColor: theme.colors.primary.main,\n\n        '&:hover': {\n          background: theme.colors.primary.shade,\n        },\n\n        svg: {\n          transform: `translate3d(${theme.spacing(2.25)}, -50%, 0)`,\n          background: theme.colors.primary.contrastText,\n          color: theme.colors.primary.main,\n        },\n      },\n\n      '&:disabled + label': {\n        background: theme.colors.action.disabledBackground,\n        borderColor: theme.colors.border.weak,\n        cursor: 'not-allowed',\n\n        svg: {\n          background: theme.colors.text.disabled,\n        },\n      },\n\n      '&:disabled:checked + label': {\n        background: theme.colors.primary.transparent,\n\n        svg: {\n          color: theme.colors.primary.contrastText,\n        },\n      },\n\n      '&:focus + label, &:focus-visible + label': getFocusStyles(theme),\n\n      '&:focus:not(:focus-visible) + label': getMouseFocusStyles(theme),\n    },\n\n    label: {\n      width: '100%',\n      height: '100%',\n      cursor: 'pointer',\n      borderRadius: theme.shape.radius.pill,\n      background: theme.components.input.background,\n      border: `1px solid ${theme.components.input.borderColor}`,\n      [theme.transitions.handleMotion('no-preference')]: {\n        transition: 'all 0.3s ease',\n      },\n\n      '&:hover': {\n        borderColor: theme.components.input.borderHover,\n      },\n\n      svg: {\n        position: 'absolute',\n        display: 'block',\n        color: 'transparent',\n        width: theme.spacing(1.5),\n        height: theme.spacing(1.5),\n        borderRadius: theme.shape.radius.circle,\n        background: theme.colors.text.secondary,\n        boxShadow: theme.shadows.z1,\n        left: 0,\n        top: '50%',\n        transform: `translate3d(${theme.spacing(0.25)}, -50%, 0)`,\n        [theme.transitions.handleMotion('no-preference')]: {\n          transition: 'transform 0.2s cubic-bezier(0.19, 1, 0.22, 1)',\n        },\n\n        '@media (forced-colors: active)': {\n          border: `1px solid ${theme.colors.primary.contrastText}`,\n        },\n      },\n    },\n  }),\n  inlineContainer: css({\n    padding: theme.spacing(0, 1),\n    height: theme.spacing(theme.components.height.md),\n    display: 'inline-flex',\n    alignItems: 'center',\n    background: transparent ? 'transparent' : theme.components.input.background,\n    border: `1px solid ${transparent ? 'transparent' : theme.components.input.borderColor}`,\n    borderRadius: theme.shape.radius.default,\n\n    '&:hover': {\n      border: `1px solid ${transparent ? 'transparent' : theme.components.input.borderHover}`,\n\n      '.inline-switch-label': {\n        color: theme.colors.text.primary,\n      },\n    },\n  }),\n  disabled: css({\n    backgroundColor: transparent ? 'transparent' : 'rgba(204, 204, 220, 0.04)',\n    color: 'rgba(204, 204, 220, 0.6)',\n    border: `1px solid ${transparent ? 'transparent' : 'rgba(204, 204, 220, 0.04)'}`,\n  }),\n  inlineLabel: css({\n    cursor: 'pointer',\n    paddingRight: theme.spacing(1),\n    color: theme.colors.text.secondary,\n    whiteSpace: 'nowrap',\n  }),\n  inlineLabelEnabled: css({\n    color: theme.colors.text.primary,\n  }),\n  invalid: css({\n    'input + label, input:checked + label, input:hover + label': {\n      border: `1px solid ${theme.colors.error.border}`,\n    },\n  }),\n});\n"],"names":[],"mappings":"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"}