@instructure/ui-checkbox 11.6.0 → 11.6.1-snapshot-129

package/lib/Checkbox/v2/ToggleFacade/styles.js

@@ -0,0 +1,238 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _uiThemes = require("@instructure/ui-themes");
+var _emotion = require("@instructure/emotion");
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+/**
+ * ---
+ * private: true
+ * ---
+ * Generates the style object from the theme and provided additional information
+ * @param  {Object} componentTheme The theme variable object.
+ * @param  {Object} props the props of the component, the style is applied to
+ * @param  {Object} sharedTokens Shared theme token object
+ * @param  {Object} state the state of the component, the style is applied to
+ * @return {Object} The final style object, which will be used in the component
+ */
+const generateStyle = (componentTheme, props, sharedTokens) => {
+  var _labelPlacementVarian, _labelSizeVariants;
+  const disabled = props.disabled,
+    size = props.size,
+    checked = props.checked,
+    readOnly = props.readOnly,
+    focused = props.focused,
+    hovered = props.hovered,
+    labelPlacement = props.labelPlacement,
+    invalid = props.invalid;
+  const labelPlacementVariants = {
+    start: {
+      facade: {
+        marginInlineEnd: componentTheme.marginEnd,
+        marginInlineStart: componentTheme.marginStart
+      },
+      label: {
+        textAlign: 'end'
+      }
+    },
+    end: {
+      facade: {
+        marginInlineEnd: componentTheme.marginEnd
+      },
+      label: {}
+    },
+    top: {
+      facade: {
+        marginTop: componentTheme.marginVertical
+      },
+      label: {
+        display: 'block'
+      }
+    }
+  };
+  const labelPlacementVariant = (_labelPlacementVarian = labelPlacementVariants[labelPlacement]) !== null && _labelPlacementVarian !== void 0 ? _labelPlacementVarian : labelPlacementVariants.end;
+  const labelSizeVariants = {
+    small: {
+      fontSize: componentTheme.labelFontSizeSm,
+      lineHeight: componentTheme.labelLineHeightSm
+    },
+    medium: {
+      fontSize: componentTheme.labelFontSizeMd,
+      lineHeight: componentTheme.labelLineHeightMd
+    },
+    large: {
+      fontSize: componentTheme.labelFontSizeLg,
+      lineHeight: componentTheme.labelLineHeightLg
+    }
+  };
+  const sizeVariant = (_labelSizeVariants = labelSizeVariants[size]) !== null && _labelSizeVariants !== void 0 ? _labelSizeVariants : labelSizeVariants.medium;
+  const getIconBorderColor = () => {
+    if (disabled) {
+      return checked ? componentTheme.checkedIconBorderDisabledColor : componentTheme.uncheckedIconBorderDisabledColor;
+    }
+    if (readOnly) {
+      return checked ? componentTheme.checkedIconBorderReadonlyColor : componentTheme.uncheckedIconBorderReadonlyColor;
+    }
+    if (invalid && !checked) {
+      return hovered ? componentTheme.uncheckedIconBorderHoverColor : componentTheme.uncheckedIconErrorBorderColor;
+    }
+    if (checked) {
+      return hovered ? componentTheme.checkedIconBorderHoverColor : componentTheme.checkedIconBorderColor;
+    }
+
+    // DEFAULT (unchecked) state
+    return hovered ? componentTheme.uncheckedIconBorderHoverColor : componentTheme.uncheckedIconBorderColor;
+  };
+  const getFacadeStyles = () => {
+    const baseStyles = {
+      display: 'inline-block',
+      userSelect: 'none',
+      position: 'relative',
+      borderRadius: componentTheme.borderRadius,
+      verticalAlign: 'middle',
+      height: componentTheme.toggleSize,
+      width: componentTheme.toggleWidth,
+      ...labelPlacementVariant.facade
+    };
+    if (disabled) {
+      return {
+        ...baseStyles,
+        background: checked ? componentTheme.checkedBackgroundDisabledColor : componentTheme.backgroundDisabledColor,
+        boxShadow: `inset 0 0 0 ${componentTheme.borderWidth} ${checked ? componentTheme.checkedBorderDisabledColor : componentTheme.borderDisabledColor}`,
+        opacity: componentTheme.disabledOpacity
+      };
+    }
+    if (readOnly) {
+      return {
+        ...baseStyles,
+        background: checked ? componentTheme.checkedBackgroundReadonlyColor : componentTheme.backgroundReadonlyColor,
+        boxShadow: `inset 0 0 0 ${componentTheme.borderWidth} ${checked ? componentTheme.checkedBorderReadonlyColor : componentTheme.borderReadonlyColor}`,
+        pointerEvents: 'none'
+      };
+    }
+    if (invalid) {
+      return {
+        ...baseStyles,
+        ...(checked && {
+          background: hovered ? componentTheme.checkedBackgroundHoverColor : componentTheme.checkedBackgroundColor,
+          boxShadow: `inset 0 0 0 ${componentTheme.borderWidth} ${componentTheme.errorBorderColor}`
+        }),
+        ...(!checked && {
+          background: hovered ? componentTheme.errorBackgroundHoverColor : componentTheme.errorBackgroundColor,
+          boxShadow: `inset 0 0 0 ${componentTheme.borderWidth} ${componentTheme.errorBorderColor}`
+        })
+      };
+    }
+    if (checked) {
+      return {
+        ...baseStyles,
+        background: hovered ? componentTheme.checkedBackgroundHoverColor : componentTheme.checkedBackgroundColor,
+        boxShadow: `inset 0 0 0 ${componentTheme.borderWidth} ${hovered ? componentTheme.checkedBorderHoverColor : componentTheme.checkedBorderColor}`
+      };
+    }
+
+    // DEFAULT (unchecked) state
+    return {
+      ...baseStyles,
+      background: hovered ? componentTheme.backgroundHoverColor : componentTheme.backgroundColor,
+      boxShadow: `inset 0 0 0 ${componentTheme.borderWidth} ${hovered ? componentTheme.borderHoverColor : componentTheme.borderColor}`
+    };
+  };
+  return {
+    toggleFacade: {
+      label: 'toggleFacade',
+      display: 'flex',
+      alignItems: 'center',
+      cursor: disabled ? 'not-allowed' : readOnly ? 'default' : 'pointer',
+      ...(labelPlacement === 'top' && {
+        display: 'block'
+      })
+    },
+    facade: {
+      label: 'toggleFacade__facade',
+      ...getFacadeStyles(),
+      ...(sharedTokens !== null && sharedTokens !== void 0 && sharedTokens.focusOutline ? (0, _emotion.calcFocusOutlineStyles)(sharedTokens.focusOutline, {
+        withFocusOutline: focused
+      }) : {})
+    },
+    icon: {
+      label: 'toggleFacade__icon',
+      display: 'block',
+      textAlign: 'center',
+      position: 'absolute',
+      top: '0',
+      insetInlineStart: '0',
+      insetInlineEnd: 'auto',
+      transition: 'all 0.2s',
+      transform: 'translate3d(0, 0, 0)',
+      height: componentTheme.toggleSize,
+      width: componentTheme.toggleSize,
+      ...(checked && {
+        transform: `translateX(calc(${componentTheme.toggleWidth} - ${componentTheme.toggleSize}))`,
+        '[dir="rtl"] &': {
+          transform: `translateX(calc(-1 * (${componentTheme.toggleWidth} - ${componentTheme.toggleSize})))`
+        }
+      })
+    },
+    iconToggle: {
+      label: 'toggleFacade__iconToggle',
+      position: 'relative',
+      height: '100%',
+      width: '100%',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      '&::before': {
+        content: '""',
+        position: 'absolute',
+        height: `calc(100% - (${componentTheme.borderWidth} * 6))`,
+        width: `calc(100% - (${componentTheme.borderWidth} * 6))`,
+        background: componentTheme.toggleBackground,
+        boxShadow: (0, _uiThemes.boxShadowObjectsToCSSString)(componentTheme.toggleShadow),
+        borderRadius: '100%',
+        border: `${componentTheme.borderWidth} solid ${getIconBorderColor()}`
+      },
+      '& [class*="lucideIcon"] svg': {
+        position: 'relative',
+        zIndex: 1
+      }
+    },
+    label: {
+      label: 'toggleFacade__label',
+      flex: 1,
+      minWidth: '0.0625rem',
+      color: disabled ? componentTheme.labelDisabledColor : componentTheme.labelColor,
+      fontFamily: componentTheme.labelFontFamily,
+      fontWeight: componentTheme.labelFontWeight,
+      ...sizeVariant,
+      ...labelPlacementVariant.label
+    }
+  };
+};
+var _default = exports.default = generateStyle;

package/lib/Checkbox/v2/index.js

@@ -0,0 +1,308 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Checkbox = void 0;
+Object.defineProperty(exports, "CheckboxFacade", {
+  enumerable: true,
+  get: function () {
+    return _CheckboxFacade.CheckboxFacade;
+  }
+});
+Object.defineProperty(exports, "ToggleFacade", {
+  enumerable: true,
+  get: function () {
+    return _ToggleFacade.ToggleFacade;
+  }
+});
+exports.default = void 0;
+var _react = require("react");
+var _keycode = _interopRequireDefault(require("keycode"));
+var _latest = require("@instructure/ui-form-field/latest");
+var _createChainedFunction = require("@instructure/ui-utils/lib/createChainedFunction.js");
+var _console = require("@instructure/console");
+var _isActiveElement = require("@instructure/ui-dom-utils/lib/isActiveElement.js");
+var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
+var _withDeterministicId = require("@instructure/ui-react-utils/lib/DeterministicIdContext/withDeterministicId.js");
+var _latest2 = require("@instructure/ui-view/latest");
+var _emotion = require("@instructure/emotion");
+var _CheckboxFacade = require("./CheckboxFacade");
+var _ToggleFacade = require("./ToggleFacade");
+var _styles = _interopRequireDefault(require("./styles"));
+var _props = require("./props");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
+var _dec, _dec2, _class, _Checkbox;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+/**
+---
+category: components
+tags: toggle, switch
+---
+**/
+let Checkbox = exports.Checkbox = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _emotion.withStyle)(_styles.default), _dec(_class = _dec2(_class = (_Checkbox = class Checkbox extends _react.Component {
+  constructor(props) {
+    super(props);
+    this._defaultId = void 0;
+    this._input = null;
+    this.ref = null;
+    this.handleRef = el => {
+      this.ref = el;
+    };
+    this.handleInputRef = el => {
+      this._input = el;
+      if (typeof this.props.inputRef === 'function') {
+        this.props.inputRef(el);
+      }
+    };
+    this.handleChange = e => {
+      const _this$props = this.props,
+        onChange = _this$props.onChange,
+        disabled = _this$props.disabled,
+        checked = _this$props.checked,
+        readOnly = _this$props.readOnly;
+      if (disabled || readOnly) {
+        e.preventDefault();
+        return;
+      }
+      if (typeof checked === 'undefined') {
+        this.setState({
+          checked: !this.state.checked
+        });
+      }
+      if (typeof onChange === 'function') {
+        onChange(e);
+      }
+    };
+    this.handleKeyDown = e => {
+      if (this.props.variant === 'toggle' && e.keyCode === _keycode.default.codes.enter) {
+        this._input && this._input.click();
+        e.preventDefault();
+      }
+    };
+    this.handleFocus = () => {
+      this.setState({
+        focused: true
+      });
+    };
+    this.handleBlur = () => {
+      this.setState({
+        focused: false
+      });
+    };
+    this.handleMouseOver = () => {
+      !this.props.disabled && this.setState({
+        hovered: true
+      });
+    };
+    this.handleMouseOut = () => {
+      this.setState({
+        hovered: false
+      });
+    };
+    this.state = {
+      focused: false,
+      hovered: false,
+      checked: typeof props.checked === 'undefined' ? !!props.defaultChecked : void 0
+    };
+    if (typeof props.checked === 'undefined') {
+      // @ts-expect-error ts-migrate(2339) FIXME: Property 'checked' does not exist on type 'Readonl... Remove this comment to see the full error message
+      this.state.checked = !!props.defaultChecked;
+    }
+    this._defaultId = props.deterministicId();
+  }
+  componentDidMount() {
+    var _this$props$makeStyle, _this$props2;
+    if (this._input) {
+      this._input.indeterminate = this.props.indeterminate;
+    }
+    (_this$props$makeStyle = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props2);
+  }
+  componentDidUpdate(prevProps) {
+    var _this$props$makeStyle2, _this$props3;
+    if (prevProps.indeterminate !== this.props.indeterminate && this._input) {
+      this._input.indeterminate = this.props.indeterminate || false;
+    }
+    (_this$props$makeStyle2 = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props3);
+  }
+  get id() {
+    return this.props.id || this._defaultId;
+  }
+  get checked() {
+    return typeof this.props.checked === 'undefined' ? this.state.checked : this.props.checked;
+  }
+  get focused() {
+    return (0, _isActiveElement.isActiveElement)(this._input);
+  }
+  get isError() {
+    var _this$props$messages;
+    return !!((_this$props$messages = this.props.messages) !== null && _this$props$messages !== void 0 && _this$props$messages.find(m => m.type === 'error' || m.type === 'newError'));
+  }
+  get invalid() {
+    var _this$props$messages2;
+    return !!((_this$props$messages2 = this.props.messages) !== null && _this$props$messages2 !== void 0 && _this$props$messages2.find(m => m.type === 'newError' || m.type === 'error'));
+  }
+  focus() {
+    this._input && this._input.focus();
+  }
+  renderFacade() {
+    const _this$props4 = this.props,
+      size = _this$props4.size,
+      disabled = _this$props4.disabled,
+      variant = _this$props4.variant,
+      label = _this$props4.label,
+      readOnly = _this$props4.readOnly,
+      indeterminate = _this$props4.indeterminate,
+      labelPlacement = _this$props4.labelPlacement,
+      themeOverride = _this$props4.themeOverride,
+      isRequired = _this$props4.isRequired,
+      styles = _this$props4.styles;
+    const _this$state = this.state,
+      hovered = _this$state.hovered,
+      focused = _this$state.focused;
+    (0, _console.logError)(!(variant === 'simple' && labelPlacement !== 'end'), `[Checkbox] The \`simple\` variant does not support the \`labelPlacement\` property.  Use the \`toggle\` variant instead.`);
+    if (variant === 'toggle') {
+      return (0, _jsxRuntime.jsxs)(_ToggleFacade.ToggleFacade, {
+        disabled: disabled,
+        size: size,
+        hovered: hovered,
+        focused: focused,
+        checked: this.checked,
+        readOnly: readOnly,
+        labelPlacement: labelPlacement,
+        themeOverride: themeOverride,
+        invalid: this.invalid,
+        children: [label, isRequired && label && (0, _jsxRuntime.jsxs)("span", {
+          css: this.invalid ? styles === null || styles === void 0 ? void 0 : styles.requiredInvalid : {},
+          "aria-hidden": true,
+          children: [' ', "*"]
+        })]
+      });
+    } else {
+      return (0, _jsxRuntime.jsxs)(_CheckboxFacade.CheckboxFacade, {
+        disabled: disabled,
+        size: size,
+        hovered: hovered,
+        focused: focused,
+        checked: this.checked,
+        readOnly: readOnly,
+        indeterminate: indeterminate,
+        themeOverride: themeOverride,
+        invalid: this.invalid,
+        children: [label, isRequired && label && (0, _jsxRuntime.jsxs)("span", {
+          css: this.invalid ? styles === null || styles === void 0 ? void 0 : styles.requiredInvalid : {},
+          "aria-hidden": true,
+          children: [' ', "*"]
+        })]
+      });
+    }
+  }
+  renderMessages() {
+    const _this$props5 = this.props,
+      messages = _this$props5.messages,
+      styles = _this$props5.styles,
+      variant = _this$props5.variant;
+    return messages && messages.length > 0 ? (0, _jsxRuntime.jsx)(_latest2.View, {
+      display: "block",
+      margin: "small 0 0",
+      css: this.isError && (variant === 'toggle' ? styles === null || styles === void 0 ? void 0 : styles.indentedToggleError : styles === null || styles === void 0 ? void 0 : styles.indentedError),
+      children: (0, _jsxRuntime.jsx)(_latest.FormFieldMessages, {
+        messages: messages
+      })
+    }) : null;
+  }
+  render() {
+    const _this$props6 = this.props,
+      disabled = _this$props6.disabled,
+      readOnly = _this$props6.readOnly,
+      value = _this$props6.value,
+      onKeyDown = _this$props6.onKeyDown,
+      onFocus = _this$props6.onFocus,
+      onBlur = _this$props6.onBlur,
+      onMouseOver = _this$props6.onMouseOver,
+      onMouseOut = _this$props6.onMouseOut,
+      indeterminate = _this$props6.indeterminate,
+      variant = _this$props6.variant,
+      styles = _this$props6.styles,
+      isRequired = _this$props6.isRequired;
+    const props = (0, _omitProps.omitProps)(this.props, Checkbox.allowedProps);
+    (0, _console.logError)(!(variant === 'toggle' && indeterminate), `[Checkbox] The \`toggle\` variant does not support the \`indeterminate\` property. Use the \`simple\` variant instead.`);
+    return (0, _jsxRuntime.jsx)("div", {
+      css: styles === null || styles === void 0 ? void 0 : styles.checkbox
+      /* eslint-disable-next-line jsx-a11y/mouse-events-have-key-events */,
+      onMouseOver: (0, _createChainedFunction.createChainedFunction)(onMouseOver, this.handleMouseOver)
+      /* eslint-disable-next-line jsx-a11y/mouse-events-have-key-events */,
+      onMouseOut: (0, _createChainedFunction.createChainedFunction)(onMouseOut, this.handleMouseOut),
+      ref: this.handleRef,
+      "data-cid": "Checkbox",
+      children: (0, _jsxRuntime.jsxs)("div", {
+        css: styles === null || styles === void 0 ? void 0 : styles.container,
+        children: [(0, _jsxRuntime.jsx)("input", {
+          ...props,
+          id: this.id,
+          value: value,
+          type: "checkbox",
+          ref: this.handleInputRef,
+          required: isRequired,
+          disabled: disabled,
+          readOnly: readOnly,
+          "aria-readonly": readOnly ? true : void 0,
+          "aria-checked": indeterminate ? 'mixed' : void 0,
+          css: styles === null || styles === void 0 ? void 0 : styles.input,
+          onClickCapture: e => {
+            if (readOnly) {
+              e.stopPropagation();
+              e.preventDefault();
+            }
+          },
+          onChange: this.handleChange,
+          onKeyDown: (0, _createChainedFunction.createChainedFunction)(onKeyDown, this.handleKeyDown),
+          onFocus: (0, _createChainedFunction.createChainedFunction)(onFocus, this.handleFocus),
+          onBlur: (0, _createChainedFunction.createChainedFunction)(onBlur, this.handleBlur),
+          checked: this.checked
+        }), (0, _jsxRuntime.jsxs)("label", {
+          htmlFor: this.id,
+          css: styles === null || styles === void 0 ? void 0 : styles.control,
+          onMouseDown: e => {
+            var _this$_input;
+            e.preventDefault();
+            (_this$_input = this._input) === null || _this$_input === void 0 ? void 0 : _this$_input.focus();
+          },
+          children: [this.renderFacade(), this.renderMessages()]
+        })]
+      })
+    });
+  }
+}, _Checkbox.displayName = "Checkbox", _Checkbox.componentId = 'Checkbox', _Checkbox.allowedProps = _props.allowedProps, _Checkbox.defaultProps = {
+  size: 'medium',
+  variant: 'simple',
+  disabled: false,
+  inline: false,
+  indeterminate: false,
+  readOnly: false,
+  labelPlacement: 'end'
+}, _Checkbox)) || _class) || _class);
+var _default = exports.default = Checkbox;

package/lib/Checkbox/v2/props.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.allowedProps = void 0;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+const allowedProps = exports.allowedProps = ['label', 'id', 'value', 'messages', 'defaultChecked', 'checked', 'onChange', 'onKeyDown', 'onFocus', 'onBlur', 'onMouseOver', 'onMouseOut', 'disabled', 'readOnly', 'indeterminate', 'size', 'variant', 'inline', 'labelPlacement', 'isRequired', 'inputRef'];

package/lib/Checkbox/v2/styles.js

@@ -0,0 +1,108 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+/**
+ * ---
+ * private: true
+ * ---
+ * Generates the style object from the theme and provided additional information
+ * @param  {Object} componentTheme The theme variable object.
+ * @param  {Object} props the props of the component, the style is applied to
+ * @param  {Object} sharedTokens Shared theme token object
+ * @param  {Object} state the state of the component, the style is applied to
+ * @return {Object} The final style object, which will be used in the component
+ */
+const generateStyle = (componentTheme, props) => {
+  var _sizeVariants;
+  const inline = props.inline,
+    size = props.size,
+    variant = props.variant;
+
+  // toggleFullWidth calculation based on Toggle facade width (1.625rem * 1.5) and the marginInlineEnd (0.75rem)
+  const toggleFullWidth = `calc(1.625rem * 1.5 + 0.75rem)`;
+  const sizeVariants = {
+    small: {
+      paddingLeft: variant === 'toggle' ? toggleFullWidth : `calc(${componentTheme.gap} + ${componentTheme.controlSizeSm})`
+    },
+    medium: {
+      paddingLeft: variant === 'toggle' ? toggleFullWidth : `calc(${componentTheme.gap} + ${componentTheme.controlSizeMd})`
+    },
+    large: {
+      paddingLeft: variant === 'toggle' ? toggleFullWidth : `calc(${componentTheme.gap} + ${componentTheme.controlSizeLg})`
+    }
+  };
+  const sizeVariant = (_sizeVariants = sizeVariants[size]) !== null && _sizeVariants !== void 0 ? _sizeVariants : sizeVariants.medium;
+  return {
+    requiredInvalid: {
+      color: componentTheme.asteriskColor
+    },
+    indentedError: {
+      paddingLeft: sizeVariant.paddingLeft
+    },
+    indentedToggleError: {
+      paddingLeft: sizeVariant.paddingLeft
+    },
+    checkbox: {
+      label: 'checkbox',
+      position: 'relative',
+      width: '100%',
+      ...(inline && {
+        display: 'inline-block',
+        verticalAlign: 'middle',
+        width: 'auto'
+      })
+    },
+    // this container is added to reduce the clickable area of the checkbox to the actual checkbox and label
+    container: {
+      width: 'fit-content'
+    },
+    input: {
+      label: 'checkbox__input',
+      padding: 0,
+      margin: 0,
+      fontSize: 'inherit',
+      lineHeight: 'inherit',
+      width: 'auto',
+      position: 'absolute',
+      top: 0,
+      insetInlineStart: 0,
+      insetInlineEnd: 'auto',
+      opacity: 0.0001 /* selenium cannot find fully transparent elements */
+    },
+    control: {
+      label: 'checkbox__control',
+      all: 'initial',
+      display: 'block',
+      direction: 'inherit',
+      textAlign: 'start'
+    }
+  };
+};
+var _default = exports.default = generateStyle;