@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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"}