@grafana/ui/dist/esm/components/Forms/Checkbox.mjs.map

Grafana Components Library

{"version":3,"file":"Checkbox.mjs","sources":["../../../../src/components/Forms/Checkbox.tsx"],"sourcesContent":["import { css, cx } from '@emotion/css';\nimport { HTMLProps, useCallback } from 'react';\nimport * as React from 'react';\n\nimport { GrafanaTheme2 } from '@grafana/data';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\nimport { getFocusStyles, getMouseFocusStyles } from '../../themes/mixins';\n\nimport { getLabelStyles } from './Label';\n\nexport interface CheckboxProps extends Omit<HTMLProps<HTMLInputElement>, 'value'> {\n  /** Label to display next to checkbox */\n  label?: string;\n  /** Description to display under the label */\n  description?: string | React.ReactElement;\n  /** Current value of the checkbox */\n  value?: boolean;\n  /** htmlValue allows to specify the input \"value\" attribute */\n  htmlValue?: string | number;\n  /** Sets the checkbox into a \"mixed\" state. This is only a visual change and does not affect the value. */\n  indeterminate?: boolean;\n  /** Show an invalid state around the input */\n  invalid?: boolean;\n}\n\nexport const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(\n  (\n    { label, description, value, htmlValue, onChange, disabled, className, indeterminate, invalid, ...inputProps },\n    ref\n  ) => {\n    const handleOnChange = useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        if (onChange) {\n          onChange(e);\n        }\n      },\n      [onChange]\n    );\n    const styles = useStyles2(getCheckboxStyles, invalid);\n\n    const ariaChecked = indeterminate ? 'mixed' : undefined;\n\n    return (\n      <label className={cx(styles.wrapper, className)}>\n        <div className={styles.checkboxWrapper}>\n          <input\n            type=\"checkbox\"\n            className={cx(styles.input, indeterminate && styles.inputIndeterminate)}\n            checked={value}\n            disabled={disabled}\n            onChange={handleOnChange}\n            value={htmlValue}\n            aria-checked={ariaChecked}\n            {...inputProps}\n            ref={ref}\n          />\n          <span className={styles.checkmark} />\n        </div>\n        {label && <span className={styles.label}>{label}</span>}\n        {description && <span className={styles.description}>{description}</span>}\n      </label>\n    );\n  }\n);\n\nexport const getCheckboxStyles = (theme: GrafanaTheme2, invalid = false) => {\n  const labelStyles = getLabelStyles(theme);\n  const checkboxSize = 2;\n  const labelPadding = 1;\n\n  const getBorderColor = (color: string) => {\n    return invalid ? theme.colors.error.border : color;\n  };\n\n  return {\n    wrapper: css({\n      display: 'inline-grid',\n      alignItems: 'center',\n      columnGap: theme.spacing(labelPadding),\n      // gridAutoRows is needed to prevent https://github.com/grafana/grafana/issues/68570 in safari\n      gridAutoRows: 'max-content',\n      position: 'relative',\n      verticalAlign: 'middle',\n    }),\n    input: css({\n      position: 'absolute',\n      zIndex: 1,\n      top: 0,\n      left: 0,\n      width: '100% !important', // global styles unset this\n      height: '100%',\n      opacity: 0,\n\n      '&:focus + span, &:focus-visible + span': getFocusStyles(theme),\n\n      '&:focus:not(:focus-visible) + span': getMouseFocusStyles(theme),\n\n      /**\n       * Using adjacent sibling selector to style checked state.\n       * Primarily to limit the classes necessary to use when these classes will be used\n       * for angular components styling\n       * */\n      '&:checked + span': {\n        background: theme.colors.primary.main,\n        border: `1px solid ${getBorderColor(theme.colors.primary.main)}`,\n\n        '&:hover': {\n          background: theme.colors.primary.shade,\n        },\n\n        '&:after': {\n          content: '\"\"',\n          position: 'absolute',\n          zIndex: 2,\n          left: theme.spacing(0.5),\n          top: 0,\n          width: theme.spacing(0.75),\n          height: theme.spacing(1.5),\n          border: `solid ${theme.colors.primary.contrastText}`,\n          borderWidth: '0 3px 3px 0',\n          transform: 'rotate(45deg)',\n        },\n      },\n\n      '&:disabled + span': {\n        backgroundColor: theme.colors.action.disabledBackground,\n        cursor: 'not-allowed',\n        border: `1px solid ${getBorderColor(theme.colors.action.disabledBackground)}`,\n\n        '&:hover': {\n          backgroundColor: theme.colors.action.disabledBackground,\n        },\n\n        '&:after': {\n          borderColor: theme.colors.action.disabledText,\n        },\n      },\n    }),\n\n    inputIndeterminate: css({\n      \"&[aria-checked='mixed'] + span\": {\n        border: `1px solid ${getBorderColor(theme.colors.primary.main)}`,\n        background: theme.colors.primary.main,\n\n        '&:hover': {\n          background: theme.colors.primary.shade,\n        },\n\n        '&:after': {\n          content: '\"\"',\n          position: 'absolute',\n          zIndex: 2,\n          left: '2px',\n          right: '2px',\n          top: 'calc(50% - 1.5px)',\n          height: '3px',\n          border: `1.5px solid ${theme.colors.primary.contrastText}`,\n          backgroundColor: theme.colors.primary.contrastText,\n          width: 'auto',\n          transform: 'none',\n        },\n      },\n      \"&:disabled[aria-checked='mixed'] + span\": {\n        backgroundColor: theme.colors.action.disabledBackground,\n        border: `1px solid ${getBorderColor(theme.colors.error.transparent)}`,\n\n        '&:after': {\n          borderColor: theme.colors.action.disabledText,\n        },\n      },\n    }),\n\n    checkboxWrapper: css({\n      display: 'flex',\n      alignItems: 'center',\n      gridColumnStart: 1,\n      gridRowStart: 1,\n    }),\n    checkmark: css({\n      position: 'relative' /* Checkbox should be layered on top of the invisible input so it recieves :hover */,\n      zIndex: 2,\n      display: 'inline-block',\n      width: theme.spacing(checkboxSize),\n      height: theme.spacing(checkboxSize),\n      borderRadius: theme.shape.radius.default,\n      background: theme.components.input.background,\n      border: `1px solid ${getBorderColor(theme.components.input.borderColor)}`,\n\n      '&:hover': {\n        cursor: 'pointer',\n        borderColor: getBorderColor(theme.components.input.borderHover),\n      },\n    }),\n    label: cx(\n      labelStyles.label,\n      css({\n        gridColumnStart: 2,\n        gridRowStart: 1,\n        position: 'relative',\n        zIndex: 2,\n        cursor: 'pointer',\n        maxWidth: 'fit-content',\n        lineHeight: theme.typography.bodySmall.lineHeight,\n        marginBottom: 0,\n      })\n    ),\n    description: cx(\n      labelStyles.description,\n      css({\n        gridColumnStart: 2,\n        gridRowStart: 2,\n        lineHeight: theme.typography.bodySmall.lineHeight,\n        marginTop: 0 /* The margin effectively comes from the top: -2px on the label above it */,\n        // Enable interacting with description when checkbox is disabled\n        zIndex: 1,\n      })\n    ),\n  };\n};\n\nCheckbox.displayName = 'Checkbox';\n"],"names":[],"mappings":"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"}