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

package/src/Checkbox/v2/ToggleFacade/styles.ts

@@ -0,0 +1,301 @@
+/*
+ * 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.
+ */
+
+import type { NewComponentTypes, SharedTokens } from '@instructure/ui-themes'
+import { boxShadowObjectsToCSSString } from '@instructure/ui-themes'
+import { calcFocusOutlineStyles } from '@instructure/emotion'
+import type { ToggleFacadeProps, ToggleFacadeStyle } from './props'
+
+/**
+ * ---
+ * 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: NewComponentTypes['Toggle'],
+  props: ToggleFacadeProps,
+  sharedTokens: SharedTokens
+): ToggleFacadeStyle => {
+  const {
+    disabled,
+    size,
+    checked,
+    readOnly,
+    focused,
+    hovered,
+    labelPlacement,
+    invalid
+  } = props
+
+  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 =
+    labelPlacementVariants[
+      labelPlacement as keyof typeof labelPlacementVariants
+    ] ?? 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[size as keyof typeof 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?.focusOutline
+        ? 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: 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
+    }
+  }
+}
+
+export default generateStyle

package/src/Checkbox/v2/index.tsx

@@ -0,0 +1,376 @@
+/*
+ * 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.
+ */
+
+import { Component } from 'react'
+import keycode from 'keycode'
+
+import { FormFieldMessages } from '@instructure/ui-form-field/latest'
+import { createChainedFunction } from '@instructure/ui-utils'
+import { logError as error } from '@instructure/console'
+import { isActiveElement } from '@instructure/ui-dom-utils'
+import { omitProps, withDeterministicId } from '@instructure/ui-react-utils'
+import { View } from '@instructure/ui-view/latest'
+
+import { withStyle } from '@instructure/emotion'
+
+import { CheckboxFacade } from './CheckboxFacade'
+import { ToggleFacade } from './ToggleFacade'
+
+import generateStyle from './styles'
+
+import { allowedProps } from './props'
+import type { CheckboxProps, CheckboxState } from './props'
+
+import type {
+  CheckboxFacadeTheme,
+  ToggleFacadeTheme
+} from '@instructure/shared-types'
+
+/**
+---
+category: components
+tags: toggle, switch
+---
+**/
+
+@withDeterministicId()
+@withStyle(generateStyle)
+class Checkbox extends Component<CheckboxProps, CheckboxState> {
+  static readonly componentId = 'Checkbox'
+
+  static allowedProps = allowedProps
+  static defaultProps = {
+    size: 'medium',
+    variant: 'simple',
+    disabled: false,
+    inline: false,
+    indeterminate: false,
+    readOnly: false,
+    labelPlacement: 'end'
+  }
+
+  constructor(props: CheckboxProps) {
+    super(props)
+
+    this.state = {
+      focused: false,
+      hovered: false,
+      checked:
+        typeof props.checked === 'undefined'
+          ? !!props.defaultChecked
+          : undefined
+    }
+
+    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!()
+  }
+  private readonly _defaultId: string
+  private _input: HTMLInputElement | null = null
+
+  ref: Element | null = null
+
+  handleRef = (el: Element | null) => {
+    this.ref = el
+  }
+
+  handleInputRef = (el: HTMLInputElement | null) => {
+    this._input = el
+    if (typeof this.props.inputRef === 'function') {
+      this.props.inputRef(el)
+    }
+  }
+
+  componentDidMount() {
+    if (this._input) {
+      this._input.indeterminate = this.props.indeterminate!
+    }
+
+    this.props.makeStyles?.()
+  }
+
+  componentDidUpdate(prevProps: CheckboxProps) {
+    if (prevProps.indeterminate !== this.props.indeterminate && this._input) {
+      this._input.indeterminate = this.props.indeterminate || false
+    }
+
+    this.props.makeStyles?.()
+  }
+
+  handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { onChange, disabled, checked, readOnly } = this.props
+
+    if (disabled || readOnly) {
+      e.preventDefault()
+      return
+    }
+
+    if (typeof checked === 'undefined') {
+      this.setState({ checked: !this.state.checked })
+    }
+
+    if (typeof onChange === 'function') {
+      onChange(e)
+    }
+  }
+
+  handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (this.props.variant === 'toggle' && e.keyCode === keycode.codes.enter) {
+      this._input && this._input.click()
+      e.preventDefault()
+    }
+  }
+
+  handleFocus = () => {
+    this.setState({
+      focused: true
+    })
+  }
+
+  handleBlur = () => {
+    this.setState({
+      focused: false
+    })
+  }
+
+  handleMouseOver = () => {
+    !this.props.disabled &&
+      this.setState({
+        hovered: true
+      })
+  }
+
+  handleMouseOut = () => {
+    this.setState({
+      hovered: false
+    })
+  }
+
+  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 isActiveElement(this._input)
+  }
+
+  get isError() {
+    return !!this.props.messages?.find(
+      (m) => m.type === 'error' || m.type === 'newError'
+    )
+  }
+
+  get invalid() {
+    return !!this.props.messages?.find(
+      (m) => m.type === 'newError' || m.type === 'error'
+    )
+  }
+
+  focus() {
+    this._input && this._input.focus()
+  }
+
+  renderFacade() {
+    const {
+      size,
+      disabled,
+      variant,
+      label,
+      readOnly,
+      indeterminate,
+      labelPlacement,
+      themeOverride,
+      isRequired,
+      styles
+    } = this.props
+
+    const { hovered, focused } = this.state
+
+    error(
+      !(variant === 'simple' && labelPlacement !== 'end'),
+      `[Checkbox] The \`simple\` variant does not support the \`labelPlacement\` property.  Use the \`toggle\` variant instead.`
+    )
+
+    if (variant === 'toggle') {
+      return (
+        <ToggleFacade
+          disabled={disabled}
+          size={size}
+          hovered={hovered}
+          focused={focused}
+          checked={this.checked}
+          readOnly={readOnly}
+          labelPlacement={labelPlacement}
+          themeOverride={themeOverride as Partial<ToggleFacadeTheme>}
+          invalid={this.invalid}
+        >
+          {label}
+          {isRequired && label && (
+            <span
+              css={this.invalid ? styles?.requiredInvalid : {}}
+              aria-hidden={true}
+            >
+              {' '}
+              *
+            </span>
+          )}
+        </ToggleFacade>
+      )
+    } else {
+      return (
+        <CheckboxFacade
+          disabled={disabled}
+          size={size}
+          hovered={hovered}
+          focused={focused}
+          checked={this.checked}
+          readOnly={readOnly}
+          indeterminate={indeterminate}
+          themeOverride={themeOverride as Partial<CheckboxFacadeTheme>}
+          invalid={this.invalid}
+        >
+          {label}
+          {isRequired && label && (
+            <span
+              css={this.invalid ? styles?.requiredInvalid : {}}
+              aria-hidden={true}
+            >
+              {' '}
+              *
+            </span>
+          )}
+        </CheckboxFacade>
+      )
+    }
+  }
+
+  renderMessages() {
+    const { messages, styles, variant } = this.props
+
+    return messages && messages.length > 0 ? (
+      <View
+        display="block"
+        margin="small 0 0"
+        css={
+          this.isError &&
+          (variant === 'toggle'
+            ? styles?.indentedToggleError
+            : styles?.indentedError)
+        }
+      >
+        <FormFieldMessages messages={messages} />
+      </View>
+    ) : null
+  }
+
+  render() {
+    const {
+      disabled,
+      readOnly,
+      value,
+      onKeyDown,
+      onFocus,
+      onBlur,
+      onMouseOver,
+      onMouseOut,
+      indeterminate,
+      variant,
+      styles,
+      isRequired
+    } = this.props
+
+    const props = omitProps(this.props, Checkbox.allowedProps)
+
+    error(
+      !(variant === 'toggle' && indeterminate),
+      `[Checkbox] The \`toggle\` variant does not support the \`indeterminate\` property. Use the \`simple\` variant instead.`
+    )
+
+    return (
+      <div
+        css={styles?.checkbox}
+        /* eslint-disable-next-line jsx-a11y/mouse-events-have-key-events */
+        onMouseOver={createChainedFunction(onMouseOver, this.handleMouseOver)}
+        /* eslint-disable-next-line jsx-a11y/mouse-events-have-key-events */
+        onMouseOut={createChainedFunction(onMouseOut, this.handleMouseOut)}
+        ref={this.handleRef}
+        data-cid="Checkbox"
+      >
+        <div css={styles?.container}>
+          <input
+            {...props}
+            id={this.id}
+            value={value}
+            type="checkbox"
+            ref={this.handleInputRef}
+            required={isRequired}
+            disabled={disabled}
+            readOnly={readOnly}
+            aria-readonly={readOnly ? true : undefined}
+            aria-checked={indeterminate ? 'mixed' : undefined}
+            css={styles?.input}
+            onClickCapture={(e) => {
+              if (readOnly) {
+                e.stopPropagation()
+                e.preventDefault()
+              }
+            }}
+            onChange={this.handleChange}
+            onKeyDown={createChainedFunction(onKeyDown, this.handleKeyDown)}
+            onFocus={createChainedFunction(onFocus, this.handleFocus)}
+            onBlur={createChainedFunction(onBlur, this.handleBlur)}
+            checked={this.checked}
+          />
+          {/* Prevent the browser from firing a blur on the hidden input during
+              mousedown on the label, which would cause Focusable to lose focus
+              before the click event is processed. Manually restore focus instead. */}
+          {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */}
+          <label
+            htmlFor={this.id}
+            css={styles?.control}
+            onMouseDown={(e) => {
+              e.preventDefault()
+              this._input?.focus()
+            }}
+          >
+            {this.renderFacade()}
+            {this.renderMessages()}
+          </label>
+        </div>
+      </div>
+    )
+  }
+}
+
+export default Checkbox
+export { Checkbox, CheckboxFacade, ToggleFacade }