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

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

@@ -1,5 +1,4 @@
 import { action } from '@storybook/addon-actions'
-import React from 'react'
 import SegmentedControl, { SegmentedControlProps } from '.'
 import { Story } from '../../_lib/compat'
 

package/src/components/SegmentedControl/index.tsx

@@ -1,4 +1,5 @@
-import React, { forwardRef, memo, useMemo, useRef } from 'react'
+import { ReactNode, forwardRef, memo, useMemo, useRef } from 'react'
+import * as React from 'react'
 import { useRadioGroupState } from 'react-stately'
 import {
   AriaRadioGroupProps,
@@ -24,6 +25,7 @@ export type SegmentedControlProps = {
   readonly disabled?: boolean
   readonly readonly?: boolean
   readonly required?: boolean
+  readonly className?: string
 
   readonly value?: string
   readonly defaultValue?: string
@@ -54,7 +56,11 @@ const SegmentedControl = forwardRef<HTMLDivElement, SegmentedControlProps>(
     }, [props.data])
 
     return (
-      <SegmentedControlRoot ref={ref} {...radioGroupProps}>
+      <SegmentedControlRoot
+        ref={ref}
+        {...radioGroupProps}
+        className={props.className}
+      >
         <RadioProvider value={state}>
           {segmentedControlItems.map((item) => (
             <Segmented
@@ -76,13 +82,18 @@ export default memo(SegmentedControl)
 type RadioProps = {
   value: string
   disabled?: boolean
+  children?: ReactNode
 }
 
-const Segmented: React.FC<RadioProps> = ({ children, ...props }) => {
+const Segmented = (props: RadioProps) => {
   const state = useRadioContext()
   const ref = useRef<HTMLInputElement>(null)
   const ariaRadioProps = useMemo<AriaRadioProps>(
-    () => ({ ...props, isDisabled: props.disabled }),
+    () => ({
+      value: props.value,
+      isDisabled: props.disabled,
+      children: props.children,
+    }),
     [props]
   )
 
@@ -99,7 +110,7 @@ const Segmented: React.FC<RadioProps> = ({ children, ...props }) => {
     >
       <SegmentedInput {...inputProps} ref={ref} />
       <RadioLabel>
-        <SegmentedLabelInner>{children}</SegmentedLabelInner>
+        <SegmentedLabelInner>{props.children}</SegmentedLabelInner>
       </RadioLabel>
     </SegmentedRoot>
   )

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

@@ -1,5 +1,5 @@
 import { action } from '@storybook/addon-actions'
-import React, { useState } from 'react'
+import { useState } from 'react'
 import { Story } from '../../_lib/compat'
 import Switch from '.'
 

package/src/components/Switch/index.tsx

@@ -1,10 +1,12 @@
 import { useSwitch } from '@react-aria/switch'
 import type { AriaSwitchProps } from '@react-types/switch'
-import React, { useRef, useMemo } from 'react'
+import { useMemo, memo, forwardRef } from 'react'
+import * as React from 'react'
 import { useToggleState } from 'react-stately'
 import styled from 'styled-components'
 import { theme } from '../../styled'
 import { disabledSelector } from '@charcoal-ui/utils'
+import { useObjectRef } from '@react-aria/utils'
 
 export type SwitchProps = {
   name: string
@@ -23,37 +25,41 @@ export type SwitchProps = {
     }
 )
 
-export default function SwitchCheckbox(props: SwitchProps) {
-  const { disabled, className } = props
-
-  const ariaSwitchProps: AriaSwitchProps = useMemo(
-    () => ({
-      ...props,
-
-      // children がいない場合は aria-label をつけないといけない
-      'aria-label': 'children' in props ? undefined : props.label,
-      isDisabled: props.disabled,
-      isSelected: props.checked,
-    }),
-    [props]
-  )
-
-  const state = useToggleState(ariaSwitchProps)
-  const ref = useRef<HTMLInputElement>(null)
-  const {
-    inputProps: { className: _className, type: _type, ...rest },
-  } = useSwitch(ariaSwitchProps, state, ref)
-
-  return (
-    <Label className={className} aria-disabled={disabled}>
-      <SwitchInput {...rest} ref={ref} />
-      {'children' in props ? (
-        // eslint-disable-next-line react/destructuring-assignment
-        <LabelInner>{props.children}</LabelInner>
-      ) : undefined}
-    </Label>
-  )
-}
+const SwitchCheckbox = forwardRef<HTMLInputElement, SwitchProps>(
+  function SwitchCheckboxInner(props, external) {
+    const { disabled, className } = props
+
+    const ariaSwitchProps: AriaSwitchProps = useMemo(
+      () => ({
+        ...props,
+
+        // children がいない場合は aria-label をつけないといけない
+        'aria-label': 'children' in props ? undefined : props.label,
+        isDisabled: props.disabled,
+        isSelected: props.checked,
+      }),
+      [props]
+    )
+
+    const state = useToggleState(ariaSwitchProps)
+    const ref = useObjectRef<HTMLInputElement>(external)
+    const {
+      inputProps: { className: _className, type: _type, ...rest },
+    } = useSwitch(ariaSwitchProps, state, ref)
+
+    return (
+      <Label className={className} aria-disabled={disabled}>
+        <SwitchInput {...rest} ref={ref} />
+        {'children' in props ? (
+          // eslint-disable-next-line react/destructuring-assignment
+          <LabelInner>{props.children}</LabelInner>
+        ) : undefined}
+      </Label>
+    )
+  }
+)
+
+export default memo(SwitchCheckbox)
 
 const Label = styled.label`
   display: inline-grid;

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

@@ -1,5 +1,4 @@
 import { action } from '@storybook/addon-actions'
-import React from 'react'
 import styled from 'styled-components'
 import TagItem, { TagItemProps } from '.'
 import { Story } from '../../_lib/compat'

package/src/components/TagItem/index.tsx

@@ -1,9 +1,4 @@
-import React, {
-  forwardRef,
-  memo,
-  useMemo,
-  ComponentPropsWithoutRef,
-} from 'react'
+import { forwardRef, memo, useMemo, ComponentPropsWithoutRef } from 'react'
 import { useObjectRef } from '@react-aria/utils'
 import styled, { css } from 'styled-components'
 import { theme } from '../../styled'

package/src/components/TextArea/TextArea.story.tsx

@@ -0,0 +1,61 @@
+import { action } from '@storybook/addon-actions'
+import styled from 'styled-components'
+import { Story } from '../../_lib/compat'
+import Clickable from '../Clickable'
+import TextArea, { TextAreaProps } from '.'
+import { px } from '@charcoal-ui/utils'
+
+export default {
+  title: 'TextArea',
+  component: TextArea,
+  argTypes: {},
+  args: {
+    showLabel: false,
+    label: 'Label',
+    assistiveText: '',
+    disabled: false,
+    required: false,
+    invalid: false,
+  },
+}
+
+const Container = styled.div`
+  display: grid;
+  gap: ${({ theme }) => px(theme.spacing[24])};
+`
+
+const Template: Story<Partial<TextAreaProps>> = (args) => (
+  <Container>
+    <TextArea
+      label="Label"
+      requiredText="*必須"
+      subLabel={
+        <Clickable onClick={action('label-click')}>Text Link</Clickable>
+      }
+      placeholder="Text Area"
+      {...args}
+    />
+  </Container>
+)
+
+export const Default = Template.bind({})
+
+export const HasLabel = Template.bind({})
+HasLabel.args = {
+  showLabel: true,
+  assistiveText: 'Assistive text',
+  required: true,
+}
+
+export const HasCount = Template.bind({})
+HasCount.args = {
+  showCount: true,
+  maxLength: 100,
+}
+
+export const AutoHeight: Story<Partial<TextAreaProps>> = (args) => (
+  <TextArea label="Label" placeholder="TextArea" {...args} />
+)
+AutoHeight.args = {
+  autoHeight: true,
+}

package/src/components/TextArea/index.tsx

@@ -0,0 +1,246 @@
+import { useTextField } from '@react-aria/textfield'
+import { useVisuallyHidden } from '@react-aria/visually-hidden'
+import { forwardRef, useCallback, useEffect, useRef, useState } from 'react'
+import styled, { css } from 'styled-components'
+import FieldLabel, { FieldLabelProps } from '../FieldLabel'
+import { countCodePointsInString, mergeRefs } from '../../_lib'
+import { ReactAreaUseTextFieldCompat } from '../../_lib/compat'
+import { theme } from '../../styled'
+
+type DOMProps = Omit<
+  React.TextareaHTMLAttributes<HTMLTextAreaElement>,
+  // react-ariaのhookは、onChangeが`(v: string) => void`想定
+  | 'onChange'
+  // ReactAreaUseTextFieldCompatに書いてあるような事情で、ここにあるイベントハンドラの型をゆるめる
+  | keyof ReactAreaUseTextFieldCompat
+>
+
+export interface TextAreaProps
+  extends Pick<FieldLabelProps, 'label' | 'requiredText' | 'subLabel'>,
+    DOMProps,
+    ReactAreaUseTextFieldCompat {
+  readonly autoHeight?: boolean
+  readonly rows?: number
+
+  // <input> 要素は number とか string[] もありうるが、今はこれしか想定してない
+  readonly defaultValue?: string
+  readonly value?: string
+  readonly onChange?: (value: string) => void
+
+  // react-ariaの型定義のせいでHTMLTextAreaElementにできない
+  readonly onKeyDown?: (event: React.KeyboardEvent<Element>) => void
+  readonly onFocus?: (event: React.FocusEvent<Element>) => void
+  readonly onBlur?: (event: React.FocusEvent<Element>) => void
+
+  readonly showCount?: boolean
+  readonly showLabel?: boolean
+  readonly assistiveText?: string
+  readonly invalid?: boolean
+}
+
+const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
+  function TextAreaInner({ onChange, ...props }, forwardRef) {
+    const {
+      className,
+      showCount = false,
+      showLabel = false,
+      label,
+      requiredText,
+      subLabel,
+      disabled = false,
+      required,
+      invalid = false,
+      assistiveText,
+      maxLength,
+      autoHeight = false,
+      rows: initialRows = 4,
+    } = props
+
+    const { visuallyHiddenProps } = useVisuallyHidden()
+    const textareaRef = useRef<HTMLTextAreaElement>(null)
+    const ariaRef = useRef<HTMLTextAreaElement>(null)
+    const [count, setCount] = useState(
+      countCodePointsInString(props.value ?? '')
+    )
+    const [rows, setRows] = useState(initialRows)
+
+    const syncHeight = useCallback(
+      (textarea: HTMLTextAreaElement) => {
+        const rows = (`${textarea.value}\n`.match(/\n/gu)?.length ?? 0) || 1
+        setRows(initialRows <= rows ? rows : initialRows)
+      },
+      [initialRows]
+    )
+
+    const nonControlled = props.value === undefined
+    const handleChange = useCallback(
+      (value: string) => {
+        const count = countCodePointsInString(value)
+        if (maxLength !== undefined && count > maxLength) {
+          return
+        }
+        if (nonControlled) {
+          setCount(count)
+        }
+        if (autoHeight && textareaRef.current !== null) {
+          syncHeight(textareaRef.current)
+        }
+        onChange?.(value)
+      },
+      [autoHeight, maxLength, nonControlled, onChange, syncHeight]
+    )
+
+    useEffect(() => {
+      setCount(countCodePointsInString(props.value ?? ''))
+    }, [props.value])
+
+    const { inputProps, labelProps, descriptionProps, errorMessageProps } =
+      useTextField(
+        {
+          inputElementType: 'textarea',
+          isDisabled: disabled,
+          isRequired: required,
+          validationState: invalid ? 'invalid' : 'valid',
+          description: !invalid && assistiveText,
+          errorMessage: invalid && assistiveText,
+          onChange: handleChange,
+          ...props,
+        },
+        ariaRef
+      )
+
+    useEffect(() => {
+      if (autoHeight && textareaRef.current !== null) {
+        syncHeight(textareaRef.current)
+      }
+    }, [autoHeight, syncHeight])
+
+    return (
+      <TextFieldRoot className={className} isDisabled={disabled}>
+        <TextFieldLabel
+          label={label}
+          requiredText={requiredText}
+          required={required}
+          subLabel={subLabel}
+          {...labelProps}
+          {...(!showLabel ? visuallyHiddenProps : {})}
+        />
+        <StyledTextareaContainer
+          invalid={invalid}
+          rows={showCount ? rows + 1 : rows}
+        >
+          <StyledTextarea
+            ref={mergeRefs(textareaRef, forwardRef, ariaRef)}
+            rows={rows}
+            noBottomPadding={showCount}
+            {...inputProps}
+          />
+          {showCount && (
+            <MultiLineCounter>
+              {maxLength !== undefined ? `${count}/${maxLength}` : count}
+            </MultiLineCounter>
+          )}
+        </StyledTextareaContainer>
+        {assistiveText != null && assistiveText.length !== 0 && (
+          <AssistiveText
+            invalid={invalid}
+            {...(invalid ? errorMessageProps : descriptionProps)}
+          >
+            {assistiveText}
+          </AssistiveText>
+        )}
+      </TextFieldRoot>
+    )
+  }
+)
+
+export default TextArea
+
+const TextFieldRoot = styled.div<{ isDisabled: boolean }>`
+  display: flex;
+  flex-direction: column;
+
+  ${(p) => p.isDisabled && { opacity: p.theme.elementEffect.disabled.opacity }}
+`
+
+const TextFieldLabel = styled(FieldLabel)`
+  ${theme((o) => o.margin.bottom(8))}
+`
+
+const StyledTextareaContainer = styled.div<{ rows: number; invalid: boolean }>`
+  position: relative;
+  overflow: hidden;
+  padding: 0 8px;
+
+  ${(p) =>
+    theme((o) => [
+      o.bg.surface3.hover,
+      p.invalid && o.outline.assertive,
+      o.font.text2,
+      o.borderRadius(4),
+    ])}
+
+  &:focus-within {
+    ${(p) =>
+      theme((o) => (p.invalid ? o.outline.assertive : o.outline.default))}
+  }
+
+  ${({ rows }) => css`
+    height: calc(22px * ${rows} + 18px);
+  `};
+`
+
+const StyledTextarea = styled.textarea<{ noBottomPadding: boolean }>`
+  border: none;
+  outline: none;
+  resize: none;
+  font-family: inherit;
+  color: inherit;
+
+  /* Prevent zooming for iOS Safari */
+  transform-origin: top left;
+  transform: scale(0.875);
+  width: calc(100% / 0.875);
+  font-size: calc(14px / 0.875);
+  line-height: calc(22px / 0.875);
+  padding: calc(9px / 0.875) 0 ${(p) => (p.noBottomPadding ? 0 : '')};
+
+  ${({ rows = 1 }) => css`
+    height: calc(22px / 0.875 * ${rows});
+  `};
+
+  /* Display box-shadow for iOS Safari */
+  appearance: none;
+
+  background: none;
+
+  &::placeholder {
+    ${theme((o) => o.font.text3)}
+  }
+
+  /* Hide scrollbar for Chrome, Safari and Opera */
+  &::-webkit-scrollbar {
+    display: none;
+  }
+  /* Hide scrollbar for IE, Edge and Firefox */
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+`
+
+const MultiLineCounter = styled.span`
+  position: absolute;
+  bottom: 9px;
+  right: 8px;
+
+  ${theme((o) => [o.typography(14).preserveHalfLeading, o.font.text3])}
+`
+
+const AssistiveText = styled.p<{ invalid: boolean }>`
+  ${(p) =>
+    theme((o) => [
+      o.typography(14),
+      o.margin.top(8),
+      o.margin.bottom(0),
+      o.font[p.invalid ? 'assertive' : 'text1'],
+    ])}
+`

package/src/components/TextField/{index.story.tsx → TextField.story.tsx}

@@ -1,13 +1,8 @@
 import { action } from '@storybook/addon-actions'
-import React from 'react'
 import styled from 'styled-components'
 import { Story } from '../../_lib/compat'
 import Clickable from '../Clickable'
-import TextField, {
-  MultiLineTextFieldProps,
-  SingleLineTextFieldProps,
-  TextFieldProps,
-} from '.'
+import TextField, { TextFieldProps } from '.'
 import { px } from '@charcoal-ui/utils'
 import IconButton from '../IconButton'
 
@@ -38,19 +33,8 @@ const Template: Story<Partial<TextFieldProps>> = (args) => (
       subLabel={
         <Clickable onClick={action('label-click')}>Text Link</Clickable>
       }
-      placeholder="Single Line"
-      {...(args as Partial<SingleLineTextFieldProps>)}
-      multiline={false}
-    />
-    <TextField
-      label="Label"
-      requiredText="*必須"
-      subLabel={
-        <Clickable onClick={action('label-click')}>Text Link</Clickable>
-      }
-      placeholder="Multi Line"
-      {...(args as Partial<MultiLineTextFieldProps>)}
-      multiline
+      placeholder="TextField"
+      {...args}
     />
   </Container>
 )
@@ -70,7 +54,7 @@ HasCount.args = {
   maxLength: 100,
 }
 
-export const HasAffix: Story<Partial<SingleLineTextFieldProps>> = (args) => (
+export const HasAffix: Story<Partial<TextFieldProps>> = (args) => (
   <TextField label="Label" placeholder="path/to/your/file" {...args} />
 )
 HasAffix.args = {
@@ -80,14 +64,7 @@ HasAffix.args = {
   suffix: '.png',
 }
 
-export const AutoHeight: Story<Partial<MultiLineTextFieldProps>> = (args) => (
-  <TextField label="Label" placeholder="Multi Line" {...args} multiline />
-)
-AutoHeight.args = {
-  autoHeight: true,
-}
-
-export const PrefixIcon: Story<Partial<SingleLineTextFieldProps>> = (args) => (
+export const PrefixIcon: Story<Partial<TextFieldProps>> = (args) => (
   <TextField
     label="Label"
     placeholder="Icon prefix"
@@ -102,7 +79,7 @@ export const PrefixIcon: Story<Partial<SingleLineTextFieldProps>> = (args) => (
 )
 
 const PrefixIconWrap = styled.div`
-  color: ${({ theme }) => theme.color.text4};
+  color: ${({ theme }) => theme.color.text3};
   margin-top: 2px;
   margin-right: 4px;
 `