@workday/canvas-kit-react-checkbox/dist/commonjs/lib/Checkbox.js

A Canvas-styled checkbox input

"use strict";
var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
    result["default"] = mod;
    return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = __importStar(require("react"));
var canvas_kit_react_common_1 = require("@workday/canvas-kit-react-common");
var canvas_kit_react_core_1 = __importStar(require("@workday/canvas-kit-react-core"));
var canvas_kit_react_icon_1 = require("@workday/canvas-kit-react-icon");
var canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
var checkboxHeight = 18;
var checkboxTapArea = canvas_kit_react_core_1.spacingNumbers.m;
var checkboxContainerHeight = checkboxTapArea;
var checkboxLabelDistance = canvas_kit_react_core_1.spacingNumbers.xs;
var checkboxWidth = 18;
var rippleRadius = (canvas_kit_react_core_1.spacingNumbers.l - checkboxWidth) / 2;
var CheckboxContainer = canvas_kit_react_common_1.styled('div')({
    display: 'flex',
    alignItems: 'center',
    minHeight: checkboxContainerHeight,
    position: 'relative',
});
var CheckboxInputWrapper = canvas_kit_react_common_1.styled('div')({
    display: 'flex',
    height: checkboxHeight,
    minWidth: checkboxWidth,
    marginTop: '3px',
    alignSelf: 'flex-start',
});
var CheckboxRipple = canvas_kit_react_common_1.styled('span')({
    borderRadius: canvas_kit_react_core_1.borderRadius.circle,
    boxShadow: "0 0 0 0 " + canvas_kit_react_core_1.colors.soap200,
    height: checkboxHeight,
    transition: 'box-shadow 150ms ease-out',
    width: checkboxWidth,
    position: 'absolute',
    pointerEvents: 'none',
    zIndex: -1,
});
var CheckboxInput = canvas_kit_react_common_1.styled('input')(function (_a) {
    var _b = _a.theme.canvas.palette, themePrimary = _b.primary, themeFocusOutline = _b.common.focusOutline;
    return (__assign({ borderRadius: canvas_kit_react_core_1.borderRadius.s, width: checkboxTapArea, height: checkboxTapArea, margin: 0, marginTop: '-3px', marginLeft: '-3px', position: 'absolute', opacity: 0, '&:not(:disabled)': {
            cursor: 'pointer',
        }, '&:not(:checked):not(:disabled):not(:focus):hover, &:not(:checked):not(:disabled):active': {
            '~ div:first-of-type': {
                borderColor: canvas_kit_react_core_1.inputColors.hoverBorder,
            },
        }, '&:checked ~ div:first-of-type': {
            borderColor: themePrimary.main,
            backgroundColor: themePrimary.main,
        }, '&:disabled ~ div:first-of-type': {
            borderColor: canvas_kit_react_core_1.inputColors.disabled.border,
            backgroundColor: canvas_kit_react_core_1.inputColors.disabled.background,
        }, '&:disabled:checked ~ div:first-of-type': {
            borderColor: themePrimary.light,
            backgroundColor: themePrimary.light,
        }, '&:focus, &:active': {
            outline: 'none',
        }, '&:focus ~ div:first-of-type': {
            borderColor: themePrimary.main,
            borderWidth: '2px',
            boxShadow: 'none',
        }, '&:checked:focus ~ div:first-of-type': __assign(__assign({}, canvas_kit_react_common_1.focusRing({ width: 2, separation: 2, animate: false, outerColor: themeFocusOutline })), { '& span': {
                marginLeft: '-7px',
            } }) }, canvas_kit_react_common_1.mouseFocusBehavior({
        '&:focus ~ div:first-of-type': {
            border: "1px solid " + canvas_kit_react_core_1.inputColors.hoverBorder,
            boxShadow: 'none',
            '& span': {
                marginLeft: '-6px',
            },
        },
        '&:checked ~ div:first-of-type': {
            borderColor: themePrimary.main,
        },
        '&:disabled:checked ~ div:first-of-type': {
            borderColor: themePrimary.light,
            backgroundColor: themePrimary.light,
        },
    })));
}, function (_a) {
    var disabled = _a.disabled;
    return ({
        '&:hover ~ span:first-of-type': {
            boxShadow: disabled ? undefined : "0 0 0 " + rippleRadius + "px " + canvas_kit_react_core_1.colors.soap200,
        },
    });
}, function (_a) {
    var theme = _a.theme, error = _a.error;
    var errorColors = canvas_kit_react_common_1.getErrorColors(error, theme);
    if (errorColors.outer === errorColors.inner) {
        errorColors.outer = 'transparent';
    }
    var errorStyles = {
        '& ~ div:first-of-type': {
            border: "1px solid " + errorColors.inner,
            boxShadow: "0 0 0 1px " + errorColors.inner + ", 0 0 0 2px " + errorColors.outer,
        },
        '&:not(:checked):not(:disabled):not(:focus):hover, &:not(:checked):not(:disabled):active': {
            '~ div:first-of-type': {
                borderColor: errorColors.inner,
            },
        },
        '&:checked ~ div:first-of-type': {
            borderColor: theme.canvas.palette.primary.main,
            boxShadow: "\n            0 0 0 2px " + canvas_kit_react_core_1.colors.frenchVanilla100 + ",\n            0 0 0 4px " + errorColors.inner + ",\n            0 0 0 5px " + errorColors.outer,
        },
    };
    return __assign(__assign({}, errorStyles), canvas_kit_react_common_1.mouseFocusBehavior(__assign(__assign({}, errorStyles), { '&:not(:checked):focus ~ div:first-of-type': {
            border: "1px solid " + errorColors.inner,
            boxShadow: "0 0 0 1px " + errorColors.inner + ", 0 0 0 2px " + errorColors.outer,
        } })));
});
var CheckboxBackground = canvas_kit_react_common_1.styled('div')({
    alignItems: 'center',
    backgroundColor: canvas_kit_react_core_1.colors.frenchVanilla100,
    borderRadius: canvas_kit_react_core_1.borderRadius.s,
    border: '1px solid ' + canvas_kit_react_core_1.inputColors.border,
    boxSizing: 'border-box',
    display: 'flex',
    height: checkboxHeight,
    justifyContent: 'center',
    padding: '0px 2px',
    pointerEvents: 'none',
    position: 'absolute',
    transition: 'border 200ms ease, background 200ms',
    width: checkboxWidth,
});
var CheckboxCheck = canvas_kit_react_common_1.styled('div')({
    display: 'flex',
    flexDirection: 'column',
    maxWidth: '100%',
    pointerEvents: 'none',
    transition: 'transform 200ms ease, opacity 200ms ease',
    span: {
        marginLeft: '-6px',
        transition: 'margin 200ms ease',
    },
}, function (_a) {
    var checked = _a.checked;
    return ({
        opacity: checked ? 1 : 0,
        transform: checked ? 'scale(1)' : 'scale(0.5)',
    });
});
var IndeterminateBox = canvas_kit_react_common_1.styled('div')({
    width: '10px',
    height: '2px',
}, function (_a) {
    var theme = _a.theme;
    return ({
        backgroundColor: theme.canvas.palette.primary.contrast,
    });
});
var CheckboxLabel = canvas_kit_react_common_1.styled('label')(__assign(__assign({}, canvas_kit_react_core_1.default.type.body), { paddingLeft: checkboxLabelDistance }), function (_a) {
    var disabled = _a.disabled;
    return (disabled ? { color: canvas_kit_react_core_1.inputColors.disabled.text } : { cursor: 'pointer' });
});
exports.Checkbox = function (_a) {
    var _b = _a.checked, checked = _b === void 0 ? false : _b, _c = _a.label, label = _c === void 0 ? '' : _c, _d = _a.theme, theme = _d === void 0 ? canvas_kit_react_common_1.useTheme() : _d, id = _a.id, disabled = _a.disabled, inputRef = _a.inputRef, onChange = _a.onChange, value = _a.value, error = _a.error, indeterminate = _a.indeterminate, elemProps = __rest(_a, ["checked", "label", "theme", "id", "disabled", "inputRef", "onChange", "value", "error", "indeterminate"]);
    var inputId = canvas_kit_react_common_1.useUniqueId(id);
    return (React.createElement(CheckboxContainer, null,
        React.createElement(CheckboxInputWrapper, { disabled: disabled },
            React.createElement(CheckboxInput, __assign({ checked: checked, disabled: disabled, id: inputId, ref: inputRef, onChange: onChange, type: "checkbox", value: value, error: error, "aria-checked": indeterminate ? 'mixed' : checked }, elemProps)),
            React.createElement(CheckboxRipple, null),
            React.createElement(CheckboxBackground, { checked: checked, disabled: disabled },
                React.createElement(CheckboxCheck, { checked: checked }, indeterminate ? (React.createElement(IndeterminateBox, null)) : (React.createElement(canvas_kit_react_icon_1.SystemIcon, { icon: canvas_system_icons_web_1.checkSmallIcon, color: theme.canvas.palette.primary.contrast }))))),
        label && (React.createElement(CheckboxLabel, { htmlFor: inputId, disabled: disabled }, label))));
};
exports.Checkbox.ErrorType = canvas_kit_react_common_1.ErrorType;
exports.default = exports.Checkbox;