@charcoal-ui/react 4.0.0-beta.2 → 4.0.0-beta.4

package/src/components/Checkbox/index.css

@@ -0,0 +1,21 @@
+.charcoal-checkbox__label {
+  position: relative;
+  cursor: pointer;
+  display: flex;
+}
+
+.charcoal-checkbox__label[aria-disabled='true'] {
+  cursor: default;
+  opacity: 0.32;
+}
+
+.charcoal-checkbox__label[aria-disabled='true'] > input {
+  opacity: 1;
+}
+
+.charcoal-checkbox__text {
+  color: var(--charcoal-text2);
+  font-size: 14px;
+  line-height: 20px;
+  margin-left: 4px;
+}

package/src/components/Checkbox/index.story.tsx

@@ -1,103 +1,68 @@
-import { action } from '@storybook/addon-actions'
 import Checkbox from '.'
 import { Meta, StoryObj } from '@storybook/react'
+import { useCallback, useState } from 'react'
+import { action } from '@storybook/addon-actions'
 
 export default {
   title: 'Checkbox',
   component: Checkbox,
 } as Meta<typeof Checkbox>
 
-export const Labelled: StoryObj<typeof Checkbox> = {
-  args: {
-    checked: false,
-    defaultChecked: false,
-    disabled: false,
-    readonly: false,
-    invalid: false,
-  },
-  render: (props) => {
-    return (
-      <div>
-        <div style={{ marginBottom: '1em' }}>
-          <Checkbox
-            {...props}
-            name="labelled"
-            label="label"
-            onBlur={action('blur')}
-            onClick={action('click')}
-            onChange={action('change')}
-            onFocus={action('focus')}
-          >
-            同意する
-          </Checkbox>
-        </div>
-
-        <div>
-          <Checkbox
-            {...props}
-            name="labelled"
-            label="label"
-            onBlur={action('blur')}
-            onClick={action('click')}
-            onChange={action('change')}
-            onFocus={action('focus')}
-          >
-            <span style={{ width: 200, display: 'block' }}>
-              同意する同意する同意する同意する同意する同意する同意する同意する同意する同意する同意する同意する同意する
-            </span>
-          </Checkbox>
-        </div>
-      </div>
-    )
-  },
-}
+export const Default: StoryObj<typeof Checkbox> = {
+  render: function Render(props) {
+    const [checked, setChecked] = useState(props.checked)
+    const handleChange = useCallback((isSelected: boolean) => {
+      setChecked(isSelected)
+      action('change')(isSelected)
+    }, [])
 
-export const Invalid: StoryObj<typeof Checkbox> = {
-  args: {
-    checked: false,
-    defaultChecked: false,
-    disabled: false,
-    readonly: false,
-  },
-  render: (props) => {
     return (
       <Checkbox
         {...props}
-        name="labelled"
-        label="label"
-        invalid
+        checked={checked ?? props.checked}
         onBlur={action('blur')}
         onClick={action('click')}
-        onChange={action('change')}
+        onChange={handleChange}
         onFocus={action('focus')}
-      >
-        同意する
-      </Checkbox>
+      />
     )
   },
 }
 
-export const Unlabelled: StoryObj<typeof Checkbox> = {
-  args: {
-    checked: false,
-    defaultChecked: false,
-    disabled: false,
-    readonly: false,
-    invalid: false,
+export const Label: StoryObj<typeof Checkbox> = {
+  render: () => {
+    return <Checkbox>Accelerate creativity.</Checkbox>
+  },
+}
+
+export const Checked: StoryObj<typeof Checkbox> = {
+  render: () => {
+    return <Checkbox checked>Accelerate creativity.</Checkbox>
   },
-  render: (props) => {
+}
+
+export const Disabled: StoryObj<typeof Checkbox> = {
+  render: () => {
+    return <Checkbox disabled>Accelerate creativity.</Checkbox>
+  },
+}
+
+export const ReadOnly: StoryObj<typeof Checkbox> = {
+  render: () => {
     return (
-      <div>
-        <Checkbox
-          {...props}
-          name="unlabelled"
-          label="label"
-          onBlur={action('blur')}
-          onClick={action('click')}
-          onChange={action('change')}
-          onFocus={action('focus')}
-        />
-      </div>
+      <Checkbox name="labelled" readOnly>
+        Accelerate creativity.
+      </Checkbox>
+    )
+  },
+}
+
+export const Invalid: StoryObj<typeof Checkbox> = {
+  render: () => {
+    return (
+      <Checkbox name="labelled" invalid>
+        Accelerate creativity.
+      </Checkbox>
     )
   },
 }

package/src/components/Checkbox/index.tsx

@@ -1,169 +1,31 @@
-import { forwardRef, memo, useMemo } from 'react'
-import * as React from 'react'
-import styled, { css } from 'styled-components'
-import { useCheckbox } from '@react-aria/checkbox'
-import { useObjectRef } from '@react-aria/utils'
-import { useToggleState } from 'react-stately'
+import './index.css'
 
-import type { AriaCheckboxProps } from '@react-types/checkbox'
-import Icon from '../Icon'
-import { focusVisibleFocusRingCss } from '@charcoal-ui/styled'
+import React, { forwardRef, memo } from 'react'
+import { useId } from '@react-aria/utils'
+import CheckboxInput, { CheckboxInputProps } from '../CheckboxInput'
+import { useClassNames } from '../../_lib/useClassNames'
 
-type CheckboxLabelProps =
-  | {
-      children: React.ReactNode
-    }
-  | {
-      label: string
-    }
-
-export type CheckboxProps = CheckboxLabelProps & {
-  readonly id?: string
-  readonly name?: string
-  readonly className?: string
-
-  readonly checked?: boolean
-  readonly defaultChecked?: boolean
-  readonly disabled?: boolean
-  readonly readonly?: boolean
-  readonly invalid?: boolean
-
-  readonly onClick?: () => void
-  readonly onChange?: (isSelected: boolean) => void
-  readonly onBlur?: () => void
-  readonly onFocus?: () => void
+export type CheckboxProps = CheckboxInputProps & {
+  children?: React.ReactNode
 }
 
 const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
-  function CheckboxInner({ invalid = false, ...props }, ref) {
-    const ariaCheckboxProps = useMemo<AriaCheckboxProps>(
-      () => ({
-        ...props,
-        isInValid: invalid,
-        isSelected: props.checked,
-        defaultSelected: props.defaultChecked,
-        validationState: invalid ? 'invalid' : 'valid',
-        // children がいない場合は aria-label をつけないといけない
-        'aria-label': 'children' in props ? undefined : props.label,
-        isDisabled: props.disabled,
-      }),
-      [invalid, props]
+  function CheckboxInner({ disabled, className, id, children, ...props }, ref) {
+    const classNames = useClassNames('charcoal-checkbox__label', className)
+    const htmlId = useId(id)
+    const input = (
+      <CheckboxInput {...props} id={htmlId} disabled={disabled} ref={ref} />
     )
-    const state = useToggleState(ariaCheckboxProps)
-    const objectRef = useObjectRef(ref)
-
-    const { inputProps } = useCheckbox(ariaCheckboxProps, state, objectRef)
-    const isDisabled = (props.disabled ?? false) || (props.readonly ?? false)
-
+    if (children === undefined) {
+      return input
+    }
     return (
-      <InputRoot aria-disabled={isDisabled} className={props.className}>
-        <CheckboxRoot>
-          <CheckboxInput
-            type="checkbox"
-            {...inputProps}
-            readOnly={props.readonly}
-          />
-          <CheckboxInputOverlay aria-hidden={true} checked={inputProps.checked}>
-            <Icon name="24/Check" unsafeNonGuidelineScale={2 / 3} />
-          </CheckboxInputOverlay>
-        </CheckboxRoot>
-
-        {'children' in props && <InputLabel>{props.children}</InputLabel>}
-      </InputRoot>
+      <label htmlFor={htmlId} aria-disabled={disabled} className={classNames}>
+        {input}
+        <div className="charcoal-checkbox__text">{children}</div>
+      </label>
     )
   }
 )
 
 export default memo(Checkbox)
-
-const hiddenCss = css`
-  visibility: hidden;
-`
-
-const InputRoot = styled.label`
-  position: relative;
-  display: flex;
-
-  cursor: pointer;
-
-  gap: 4px;
-  &:disabled,
-  &[aria-disabled]:not([aria-disabled='false']) {
-    cursor: default;
-    opacity: 0.32;
-  }
-`
-
-const CheckboxRoot = styled.div`
-  position: relative;
-`
-
-const CheckboxInput = styled.input`
-  &[type='checkbox'] {
-    appearance: none;
-    display: block;
-    cursor: pointer;
-    margin: 0;
-    width: 20px;
-    height: 20px;
-    border-radius: 4px;
-    transition: 0.2s box-shadow, 0.2s background-color;
-
-    &:disabled {
-      cursor: default;
-    }
-    &:read-only {
-      cursor: default;
-    }
-
-    &:checked {
-      background-color: var(--charcoal-brand);
-
-      &:not(:disabled):not([aria-disabled]),
-      &[aria-disabled='false'] {
-        &:hover {
-          background-color: var(--charcoal-brand-hover);
-        }
-        &:active {
-          background-color: var(--charcoal-brand-press);
-        }
-      }
-    }
-
-    &:not(:disabled):not([aria-disabled]),
-    &[aria-disabled='false'] {
-      ${focusVisibleFocusRingCss}
-      &[aria-invalid='true'] {
-        box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
-      }
-    }
-
-    &:not(:checked) {
-      border-width: 2px;
-      border-style: solid;
-      border-color: var(--charcoal-text4);
-    }
-  }
-`
-
-const CheckboxInputOverlay = styled.div<{ checked?: boolean }>`
-  position: absolute;
-  top: -2px;
-  left: -2px;
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 24px;
-  height: 24px;
-  color: var(--charcoal-text5);
-
-  ${({ checked }) => checked !== true && hiddenCss};
-`
-
-const InputLabel = styled.div`
-  color: var(--charcoal-text2);
-  font-size: 14px;
-  /** checkbox の height が 20px なのでcheckbox と text が揃っているように見せるために行ボックスの高さを 20px にしている */
-  line-height: 20px;
-`

package/src/components/CheckboxInput/__snapshots__/index.story.storyshot

@@ -0,0 +1,109 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storybook Tests React/Internal/CheckboxInput Checked 1`] = `
+<div
+  data-dark={false}
+>
+  <div
+    className="charcoal-checkbox-input__root"
+  >
+    <input
+      checked={true}
+      className="charcoal-checkbox-input__input"
+      onChange={[Function]}
+      type="checkbox"
+    />
+    <div
+      aria-hidden={true}
+      className="charcoal-checkbox-input__overlay"
+      data-checked={true}
+    >
+      <pixiv-icon
+        name="24/Check"
+        unsafe-non-guideline-scale={0.6666666666666666}
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storybook Tests React/Internal/CheckboxInput Default 1`] = `
+<div
+  data-dark={false}
+>
+  <div
+    className="charcoal-checkbox-input__root"
+  >
+    <input
+      className="charcoal-checkbox-input__input"
+      onChange={[Function]}
+      type="checkbox"
+    />
+    <div
+      aria-hidden={true}
+      className="charcoal-checkbox-input__overlay"
+    >
+      <pixiv-icon
+        name="24/Check"
+        unsafe-non-guideline-scale={0.6666666666666666}
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storybook Tests React/Internal/CheckboxInput Disabled 1`] = `
+<div
+  data-dark={false}
+>
+  <div
+    className="charcoal-checkbox-input__root"
+  >
+    <input
+      checked={false}
+      className="charcoal-checkbox-input__input"
+      disabled={true}
+      onChange={[Function]}
+      type="checkbox"
+    />
+    <div
+      aria-hidden={true}
+      className="charcoal-checkbox-input__overlay"
+      data-checked={false}
+    >
+      <pixiv-icon
+        name="24/Check"
+        unsafe-non-guideline-scale={0.6666666666666666}
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storybook Tests React/Internal/CheckboxInput Invalid 1`] = `
+<div
+  data-dark={false}
+>
+  <div
+    className="charcoal-checkbox-input__root"
+  >
+    <input
+      aria-invalid={true}
+      checked={false}
+      className="charcoal-checkbox-input__input"
+      onChange={[Function]}
+      type="checkbox"
+    />
+    <div
+      aria-hidden={true}
+      className="charcoal-checkbox-input__overlay"
+      data-checked={false}
+    >
+      <pixiv-icon
+        name="24/Check"
+        unsafe-non-guideline-scale={0.6666666666666666}
+      />
+    </div>
+  </div>
+</div>
+`;

package/src/components/CheckboxInput/index.css

@@ -0,0 +1,77 @@
+/* root div */
+
+.charcoal-checkbox-input__root {
+  position: relative;
+}
+
+/* input */
+
+.charcoal-checkbox-input__input {
+  appearance: none;
+  display: block;
+  cursor: pointer;
+  margin: 0;
+  width: 20px;
+  height: 20px;
+  border-radius: 4px;
+  transition: 0.2s box-shadow, 0.2s background-color;
+}
+
+.charcoal-checkbox-input__input:disabled,
+.charcoal-checkbox-input__input[readonly] {
+  opacity: 0.32;
+  cursor: default;
+}
+
+.charcoal-checkbox-input__input:checked {
+  background-color: var(--charcoal-brand);
+}
+
+.charcoal-checkbox-input__input:not(:checked) {
+  border-width: 2px;
+  border-style: solid;
+  border-color: var(--charcoal-text4);
+}
+
+.charcoal-checkbox-input__input:not(:disabled):focus {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
+}
+.charcoal-checkbox-input__input:not(:disabled):focus-visible {
+  box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
+}
+.charcoal-checkbox-input__input:not(:disabled):focus:not(:focus-visible) {
+  box-shadow: none;
+}
+
+.charcoal-checkbox-input__input:checked:not(:disabled):hover {
+  background-color: var(--charcoal-brand-hover);
+}
+.charcoal-checkbox-input__input:checked:not(:disabled):active {
+  background-color: var(--charcoal-brand-press);
+}
+
+.charcoal-checkbox-input__input[aria-invalid='true'],
+.charcoal-checkbox-input__input[aria-invalid='true']:not(:disabled):focus {
+  box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
+}
+
+/* overlay div */
+
+.charcoal-checkbox-input__overlay {
+  position: absolute;
+  top: -2px;
+  left: -2px;
+  box-sizing: border-box;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  color: var(--charcoal-text5);
+  display: none;
+  pointer-events: none;
+}
+
+.charcoal-checkbox-input__input:checked + .charcoal-checkbox-input__overlay {
+  display: flex;
+}

package/src/components/CheckboxInput/index.story.tsx

@@ -0,0 +1,35 @@
+import CheckboxInput from '.'
+import { Meta, StoryObj } from '@storybook/react'
+import { useState } from 'react'
+
+export default {
+  title: 'React/Internal/CheckboxInput',
+  component: CheckboxInput,
+} as Meta<typeof CheckboxInput>
+
+export const Default: StoryObj<typeof CheckboxInput> = {
+  render: function Render(args) {
+    return <CheckboxInput {...args} />
+  },
+}
+
+export const Checked: StoryObj<typeof CheckboxInput> = {
+  render: function Render() {
+    const [checked, setChecked] = useState(true)
+    return <CheckboxInput checked={checked} onChange={setChecked} />
+  },
+}
+
+export const Disabled: StoryObj<typeof CheckboxInput> = {
+  render: function Render() {
+    const [checked, setChecked] = useState(false)
+    return <CheckboxInput checked={checked} onChange={setChecked} disabled />
+  },
+}
+
+export const Invalid: StoryObj<typeof CheckboxInput> = {
+  render: function Render() {
+    const [checked, setChecked] = useState(false)
+    return <CheckboxInput checked={checked} onChange={setChecked} invalid />
+  },
+}

package/src/components/CheckboxInput/index.tsx

@@ -0,0 +1,53 @@
+import './index.css'
+
+import { forwardRef, memo, useCallback } from 'react'
+import Icon from '../Icon'
+import { useClassNames } from '../../_lib/useClassNames'
+
+type CharcoalCheckboxInputProps = {
+  invalid?: boolean
+  onChange?: (checked: boolean) => void
+}
+
+export type CheckboxInputProps = CharcoalCheckboxInputProps &
+  Omit<React.ComponentProps<'input'>, keyof CharcoalCheckboxInputProps>
+
+const CheckboxInput = forwardRef<HTMLInputElement, CheckboxInputProps>(
+  function CheckboxInput({ onChange, checked, invalid, ...props }, ref) {
+    const handleChange = useCallback(
+      (e: React.ChangeEvent<HTMLInputElement>) => {
+        const el = e.currentTarget
+        onChange?.(el.checked)
+      },
+      [onChange]
+    )
+
+    const classNames = useClassNames(
+      'charcoal-checkbox-input__root',
+      props.className
+    )
+
+    return (
+      <div className={classNames}>
+        <input
+          ref={ref}
+          className="charcoal-checkbox-input__input"
+          type="checkbox"
+          onChange={handleChange}
+          aria-invalid={invalid}
+          checked={checked}
+          {...props}
+        />
+        <div
+          className="charcoal-checkbox-input__overlay"
+          aria-hidden={true}
+          data-checked={checked}
+        >
+          <Icon name="24/Check" unsafeNonGuidelineScale={2 / 3} />
+        </div>
+      </div>
+    )
+  }
+)
+
+export default memo(CheckboxInput)

package/src/components/DropdownSelector/Popover/index.tsx

@@ -1,5 +1,4 @@
-import { RefObject, useContext, useRef } from 'react'
-import { ReactNode } from 'react'
+import { RefObject, useContext, useRef, ReactNode } from 'react'
 import { DismissButton, Overlay, usePopover } from '@react-aria/overlays'
 import styled from 'styled-components'
 import { ModalBackgroundContext } from '../../Modal/ModalBackgroundContext'