@grafana/ui/dist/cjs/components/Switch/Switch.cjs.map

Grafana Components Library

{"version":3,"file":"Switch.cjs","sources":["../../../../src/components/Switch/Switch.tsx"],"sourcesContent":["import { css, cx } from '@emotion/css';\nimport { forwardRef, type HTMLProps, useId } from 'react';\n\nimport { type GrafanaTheme2, deprecationWarning } from '@grafana/data';\nimport { selectors } from '@grafana/e2e-selectors';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\nimport { getFocusStyles, getMouseFocusStyles } from '../../themes/mixins';\nimport { useFieldContext } from '../Forms/FieldContext';\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  (\n    {\n      value,\n      checked,\n      onChange,\n      id: idProp,\n      label,\n      disabled: disabledProp,\n      invalid: invalidProp = false,\n      ...inputProps\n    },\n    ref\n  ) => {\n    if (checked) {\n      deprecationWarning('Switch', 'checked prop', 'value');\n    }\n\n    const styles = useStyles2(getSwitchStyles);\n    const generatedId = useId();\n    const fieldContext = useFieldContext();\n    const invalid = invalidProp ?? fieldContext.invalid;\n    const disabled = disabledProp ?? fieldContext.disabled;\n    const switchId = idProp ?? fieldContext.id ?? generatedId;\n\n    return (\n      <div className={cx(styles.switch, invalid && styles.invalid)} data-testid={selectors.components.Switch.container}>\n        <input\n          type=\"checkbox\"\n          role=\"switch\"\n          disabled={disabled}\n          checked={value}\n          onChange={(event) => {\n            !disabled && onChange?.(event);\n          }}\n          id={switchId}\n          aria-invalid={!!invalid}\n          {...inputProps}\n          ref={ref}\n        />\n        <label htmlFor={switchId} aria-label={label} />\n        <Icon name=\"check\" size=\"xs\" />\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  (\n    {\n      transparent,\n      className,\n      showLabel,\n      label,\n      value,\n      disabled: disabledProp,\n      id: idProp,\n      invalid: invalidProp,\n      ...props\n    },\n    ref\n  ) => {\n    const styles = useStyles2(getSwitchStyles, transparent);\n    const defaultId = useId();\n    const fieldContext = useFieldContext();\n    const invalid = invalidProp ?? fieldContext.invalid;\n    const disabled = disabledProp ?? fieldContext.disabled;\n    const id = idProp ?? fieldContext.id ?? defaultId;\n\n    return (\n      <div className={cx(styles.inlineContainer, className, disabled && styles.disabled, invalid && styles.invalid)}>\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\n          {...props}\n          disabled={disabled}\n          invalid={invalid}\n          id={id}\n          label={showLabel ? undefined : label}\n          ref={ref}\n          value={value}\n        />\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': {\n        '~ label': {\n          background: theme.colors.accent.main,\n          borderColor: theme.colors.accent.main,\n\n          '&:hover': {\n            background: theme.colors.accent.shade,\n          },\n        },\n\n        '~ svg': {\n          transform: `translate3d(${theme.spacing(2.25)}, -50%, 0)`,\n          background: theme.colors.accent.contrastText,\n          color: theme.colors.accent.main,\n        },\n      },\n\n      '&:disabled': {\n        '~ label': {\n          background: theme.colors.action.disabledBackground,\n          borderColor: theme.colors.border.weak,\n          cursor: 'not-allowed',\n        },\n\n        '~ svg': {\n          background: theme.colors.text.disabled,\n        },\n      },\n\n      '&:disabled:checked': {\n        '~ label': {\n          background: theme.colors.accent.transparent,\n        },\n\n        '~ svg': {\n          color: theme.colors.accent.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      pointerEvents: 'none',\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.accent.contrastText}`,\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":["forwardRef","deprecationWarning","useStyles2","useId","useFieldContext","jsxs","cx","selectors","jsx","Icon","css","getFocusStyles","getMouseFocusStyles"],"mappings":"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"}