{"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';\nimport { getFocusStyles, getMouseFocusStyles } from '../../themes/mixins';\n\nimport { getLabelStyles } from './Label';\n\nexport interface CheckboxProps extends Omit, '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(\n (\n { label, description, value, htmlValue, onChange, disabled, className, indeterminate, invalid, ...inputProps },\n ref\n ) => {\n const handleOnChange = useCallback(\n (e: React.ChangeEvent) => {\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 \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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"}