@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\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      transition: 'all 0.3s ease',\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        transition: 'transform 0.2s cubic-bezier(0.19, 1, 0.22, 1)',\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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"}