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

package/src/components/TextField/index.tsx

@@ -1,331 +1,176 @@
 import { useTextField } from '@react-aria/textfield'
 import { useVisuallyHidden } from '@react-aria/visually-hidden'
-import React, {
-  ReactNode,
-  useCallback,
-  useEffect,
-  useRef,
-  useState,
-} from 'react'
-import styled, { css } from 'styled-components'
+import { ReactNode, useCallback, useEffect, useRef, useState } from 'react'
+import * as React from 'react'
+import styled from 'styled-components'
 import FieldLabel, { FieldLabelProps } from '../FieldLabel'
-import { createTheme } from '@charcoal-ui/styled'
-
-const theme = createTheme(styled)
+import { countCodePointsInString, mergeRefs } from '../../_lib'
+import { theme } from '../../styled'
+import { ReactAreaUseTextFieldCompat } from '../../_lib/compat'
+
+type DOMProps = Omit<
+  React.InputHTMLAttributes<HTMLInputElement>,
+  // react-ariaのhookは、onChangeが`(v: string) => void`想定
+  | 'onChange'
+
+  // RDFa Attributeとかぶる
+  // https://github.com/DefinitelyTyped/DefinitelyTyped/blob/58d57ca87ac7be0d306c0844dc254e90c150bd0d/types/react/index.d.ts#L1951
+  | 'prefix'
+
+  // ReactAreaUseTextFieldCompatに書いてあるような事情で、ここにあるイベントハンドラの型をゆるめる
+  | keyof ReactAreaUseTextFieldCompat
+>
+
+export interface TextFieldProps
+  extends Pick<FieldLabelProps, 'label' | 'requiredText' | 'subLabel'>,
+    DOMProps,
+    ReactAreaUseTextFieldCompat {
+  readonly prefix?: ReactNode
+  readonly suffix?: ReactNode
 
-interface TextFieldBaseProps
-  extends Pick<FieldLabelProps, 'label' | 'requiredText' | 'subLabel'> {
-  readonly className?: string
+  // <input> 要素は number とか string[] もありうるが、今はこれしか想定してない
   readonly defaultValue?: string
   readonly value?: string
   readonly onChange?: (value: string) => void
+
+  // react-ariaの型定義のせいでHTMLInputElementにできない
   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 placeholder?: string
   readonly assistiveText?: string
-  readonly disabled?: boolean
-  readonly required?: boolean
   readonly invalid?: boolean
-  readonly maxLength?: number
-  /**
-   * tab-indexがｰ1かどうか
-   */
-  readonly excludeFromTabOrder?: boolean
-}
-
-export interface SingleLineTextFieldProps extends TextFieldBaseProps {
-  readonly autoHeight?: never
-  readonly multiline?: false
-  readonly rows?: never
-  readonly type?: string
-  readonly prefix?: ReactNode
-  readonly suffix?: ReactNode
-}
-
-export interface MultiLineTextFieldProps extends TextFieldBaseProps {
-  readonly autoHeight?: boolean
-  readonly multiline: true
-  readonly rows?: number
-  readonly type?: never
-  readonly prefix?: never
-  readonly suffix?: never
-}
-
-export type TextFieldProps = SingleLineTextFieldProps | MultiLineTextFieldProps
-type TextFieldElement = HTMLInputElement & HTMLTextAreaElement
-
-function mergeRefs<T>(...refs: React.Ref<T>[]): React.RefCallback<T> {
-  return (value) => {
-    for (const ref of refs) {
-      if (typeof ref === 'function') {
-        ref(value)
-      } else if (ref !== null) {
-        ;(ref as React.MutableRefObject<T | null>).current = value
-      }
-    }
-  }
-}
-
-function countCodePointsInString(string: string) {
-  // [...string] とするとproduction buildで動かなくなる
-  // cf. https://twitter.com/f_subal/status/1497214727511891972
-  return Array.from(string).length
 }
 
-const TextField = React.forwardRef<TextFieldElement, TextFieldProps>(
-  function TextField(props, ref) {
-    return props.multiline !== undefined && props.multiline ? (
-      <MultiLineTextField ref={ref} {...props} />
-    ) : (
-      <SingleLineTextField ref={ref} {...props} />
+const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(
+  function SingleLineTextFieldInner({ onChange, ...props }, forwardRef) {
+    const {
+      className,
+      showLabel = false,
+      showCount = false,
+      label,
+      requiredText,
+      subLabel,
+      disabled = false,
+      required,
+      invalid = false,
+      assistiveText,
+      maxLength,
+      prefix = null,
+      suffix = null,
+    } = props
+
+    const { visuallyHiddenProps } = useVisuallyHidden()
+    const ariaRef = useRef<HTMLInputElement>(null)
+    const prefixRef = useRef<HTMLSpanElement>(null)
+    const suffixRef = useRef<HTMLSpanElement>(null)
+    const [count, setCount] = useState(
+      countCodePointsInString(props.value ?? '')
     )
-  }
-)
-
-export default TextField
-
-const SingleLineTextField = React.forwardRef<
-  HTMLInputElement,
-  SingleLineTextFieldProps
->(function SingleLineTextFieldInner({ onChange, ...props }, forwardRef) {
-  const {
-    className,
-    showLabel = false,
-    showCount = false,
-    label,
-    requiredText,
-    subLabel,
-    disabled = false,
-    required,
-    invalid = false,
-    assistiveText,
-    maxLength,
-    prefix = null,
-    suffix = null,
-  } = props
-
-  const { visuallyHiddenProps } = useVisuallyHidden()
-  const ariaRef = useRef<HTMLInputElement>(null)
-  const prefixRef = useRef<HTMLSpanElement>(null)
-  const suffixRef = useRef<HTMLSpanElement>(null)
-  const [count, setCount] = useState(countCodePointsInString(props.value ?? ''))
-  const [prefixWidth, setPrefixWidth] = useState(0)
-  const [suffixWidth, setSuffixWidth] = useState(0)
-
-  const nonControlled = props.value === undefined
-  const handleChange = useCallback(
-    (value: string) => {
-      const count = countCodePointsInString(value)
-      if (maxLength !== undefined && count > maxLength) {
-        return
-      }
-      if (nonControlled) {
-        setCount(count)
-      }
-      onChange?.(value)
-    },
-    [maxLength, nonControlled, onChange]
-  )
-
-  useEffect(() => {
-    setCount(countCodePointsInString(props.value ?? ''))
-  }, [props.value])
-
-  const { inputProps, labelProps, descriptionProps, errorMessageProps } =
-    useTextField(
-      {
-        inputElementType: 'input',
-        isDisabled: disabled,
-        isRequired: required,
-        validationState: invalid ? 'invalid' : 'valid',
-        description: !invalid && assistiveText,
-        errorMessage: invalid && assistiveText,
-        onChange: handleChange,
-        ...props,
+    const [prefixWidth, setPrefixWidth] = useState(0)
+    const [suffixWidth, setSuffixWidth] = useState(0)
+
+    const nonControlled = props.value === undefined
+    const handleChange = useCallback(
+      (value: string) => {
+        const count = countCodePointsInString(value)
+        if (maxLength !== undefined && count > maxLength) {
+          return
+        }
+        if (nonControlled) {
+          setCount(count)
+        }
+        onChange?.(value)
       },
-      ariaRef
+      [maxLength, nonControlled, onChange]
     )
 
-  useEffect(() => {
-    const prefixObserver = new ResizeObserver((entries) => {
-      setPrefixWidth(entries[0].contentRect.width)
-    })
-    const suffixObserver = new ResizeObserver((entries) => {
-      setSuffixWidth(entries[0].contentRect.width)
-    })
-
-    if (prefixRef.current !== null) {
-      prefixObserver.observe(prefixRef.current)
-    }
-    if (suffixRef.current !== null) {
-      suffixObserver.observe(suffixRef.current)
-    }
-
-    return () => {
-      suffixObserver.disconnect()
-      prefixObserver.disconnect()
-    }
-  }, [])
-
-  return (
-    <TextFieldRoot className={className} isDisabled={disabled}>
-      <TextFieldLabel
-        label={label}
-        requiredText={requiredText}
-        required={required}
-        subLabel={subLabel}
-        {...labelProps}
-        {...(!showLabel ? visuallyHiddenProps : {})}
-      />
-      <StyledInputContainer>
-        <PrefixContainer ref={prefixRef}>
-          <Affix>{prefix}</Affix>
-        </PrefixContainer>
-        <StyledInput
-          ref={mergeRefs(forwardRef, ariaRef)}
-          invalid={invalid}
-          extraLeftPadding={prefixWidth}
-          extraRightPadding={suffixWidth}
-          {...inputProps}
-        />
-        <SuffixContainer ref={suffixRef}>
-          <Affix>{suffix}</Affix>
-          {showCount && (
-            <SingleLineCounter>
-              {maxLength !== undefined ? `${count}/${maxLength}` : count}
-            </SingleLineCounter>
-          )}
-        </SuffixContainer>
-      </StyledInputContainer>
-      {assistiveText != null && assistiveText.length !== 0 && (
-        <AssistiveText
-          invalid={invalid}
-          {...(invalid ? errorMessageProps : descriptionProps)}
-        >
-          {assistiveText}
-        </AssistiveText>
-      )}
-    </TextFieldRoot>
-  )
-})
-
-const MultiLineTextField = React.forwardRef<
-  HTMLTextAreaElement,
-  MultiLineTextFieldProps
->(function MultiLineTextFieldInner({ 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)
+    useEffect(() => {
+      setCount(countCodePointsInString(props.value ?? ''))
+    }, [props.value])
+
+    const { inputProps, labelProps, descriptionProps, errorMessageProps } =
+      useTextField(
+        {
+          inputElementType: 'input',
+          isDisabled: disabled,
+          isRequired: required,
+          validationState: invalid ? 'invalid' : 'valid',
+          description: !invalid && assistiveText,
+          errorMessage: invalid && assistiveText,
+          onChange: handleChange,
+          ...props,
+        },
+        ariaRef
+      )
+
+    useEffect(() => {
+      const prefixObserver = new ResizeObserver((entries) => {
+        setPrefixWidth(entries[0].contentRect.width)
+      })
+      const suffixObserver = new ResizeObserver((entries) => {
+        setSuffixWidth(entries[0].contentRect.width)
+      })
+
+      if (prefixRef.current !== null) {
+        prefixObserver.observe(prefixRef.current)
       }
-      if (autoHeight && textareaRef.current !== null) {
-        syncHeight(textareaRef.current)
+      if (suffixRef.current !== null) {
+        suffixObserver.observe(suffixRef.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}
+      return () => {
+        suffixObserver.disconnect()
+        prefixObserver.disconnect()
+      }
+    }, [])
+
+    return (
+      <TextFieldRoot className={className} isDisabled={disabled}>
+        <TextFieldLabel
+          label={label}
+          requiredText={requiredText}
+          required={required}
+          subLabel={subLabel}
+          {...labelProps}
+          {...(!showLabel ? visuallyHiddenProps : {})}
         />
-        {showCount && (
-          <MultiLineCounter>
-            {maxLength !== undefined ? `${count}/${maxLength}` : count}
-          </MultiLineCounter>
+        <StyledInputContainer>
+          <PrefixContainer ref={prefixRef}>
+            <Affix>{prefix}</Affix>
+          </PrefixContainer>
+          <StyledInput
+            ref={mergeRefs(forwardRef, ariaRef)}
+            invalid={invalid}
+            extraLeftPadding={prefixWidth}
+            extraRightPadding={suffixWidth}
+            {...inputProps}
+          />
+          <SuffixContainer ref={suffixRef}>
+            <Affix>{suffix}</Affix>
+            {showCount && (
+              <SingleLineCounter>
+                {maxLength !== undefined ? `${count}/${maxLength}` : count}
+              </SingleLineCounter>
+            )}
+          </SuffixContainer>
+        </StyledInputContainer>
+        {assistiveText != null && assistiveText.length !== 0 && (
+          <AssistiveText
+            invalid={invalid}
+            {...(invalid ? errorMessageProps : descriptionProps)}
+          >
+            {assistiveText}
+          </AssistiveText>
         )}
-      </StyledTextareaContainer>
-      {assistiveText != null && assistiveText.length !== 0 && (
-        <AssistiveText
-          invalid={invalid}
-          {...(invalid ? errorMessageProps : descriptionProps)}
-        >
-          {assistiveText}
-        </AssistiveText>
-      )}
-    </TextFieldRoot>
-  )
-})
+      </TextFieldRoot>
+    )
+  }
+)
+
+export default TextField
 
 const TextFieldRoot = styled.div<{ isDisabled: boolean }>`
   display: flex;
@@ -405,85 +250,10 @@ const StyledInput = styled.input<{
   }
 `
 
-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),
-    ])}
-
-  /**
-   * FIXME: o.outline.default を &:focus-within 内に書いてると、外れるときに transition が効かない
-   * 本来 o.outline.default.focus と書けば足してくれるような transition の内容を一旦明示している
-   * o.outline.default.focusWithin のようなものがあればこの行は不要になるはず
-   */
-  transition: box-shadow 0.2s;
-
-  &: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 SingleLineCounter = styled.span`
   ${theme((o) => [o.typography(14).preserveHalfLeading, o.font.text3])}
 `
 
-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) => [

package/src/components/a11y.test.tsx

@@ -1,7 +1,6 @@
 import path from 'path'
 import glob from 'glob'
 import { axe, toHaveNoViolations } from 'jest-axe'
-import React from 'react'
 import { render } from '@testing-library/react'
 import { ThemeProvider } from 'styled-components'
 import { Story } from '../_lib/compat'

package/src/core/CharcoalProvider.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { ThemeProvider } from 'styled-components'
 import ComponentAbstraction, { Components } from './ComponentAbstraction'
 import { TokenInjector } from '@charcoal-ui/styled'

package/src/core/ComponentAbstraction.tsx

@@ -1,4 +1,5 @@
-import React, { useContext } from 'react'
+import { useContext } from 'react'
+import * as React from 'react'
 
 export type LinkProps = {
   /**

package/src/index.ts

@@ -35,9 +35,8 @@ export { default as Switch, type SwitchProps } from './components/Switch'
 export {
   default as TextField,
   type TextFieldProps,
-  type SingleLineTextFieldProps,
-  type MultiLineTextFieldProps,
 } from './components/TextField'
+export { default as TextArea, type TextAreaProps } from './components/TextArea'
 export { default as Icon, type IconProps } from './components/Icon'
 export { default as Modal, type ModalProps } from './components/Modal'
 export {
@@ -52,13 +51,16 @@ export {
 } from './components/LoadingSpinner'
 export {
   default as DropdownSelector,
-  type DropdownSelectorOption,
   type DropdownSelectorProps,
 } from './components/DropdownSelector'
 export {
-  OptionItem,
-  type OptionItemProps,
-} from './components/DropdownSelector/OptionItem'
+  default as DropdownMenuItem,
+  type DropdownMenuItemProps,
+} from './components/DropdownSelector/DropdownMenuItem'
+export {
+  default as MenuItemGroup,
+  type MenuItemGroupProps,
+} from './components/DropdownSelector/MenuItemGroup'
 export {
   default as SegmentedControl,
   type SegmentedControlProps,

package/dist/components/DropdownSelector/OptionItem.d.ts

@@ -1,7 +0,0 @@
-import { ReactNode } from 'react';
-export type OptionItemProps = {
-    children?: ReactNode;
-    value: string;
-};
-export declare function OptionItem(props: OptionItemProps): JSX.Element;
-//# sourceMappingURL=OptionItem.d.ts.map

package/dist/components/DropdownSelector/OptionItem.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"OptionItem.d.ts","sourceRoot":"","sources":["../../../src/components/DropdownSelector/OptionItem.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,SAAS,EAAc,MAAM,OAAO,CAAA;AAQpD,MAAM,MAAM,eAAe,GAAG;IAC5B,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,eA2ChD"}

package/dist/components/DropdownSelector/utils/focusIfHTMLLIElement.d.ts

@@ -1,6 +0,0 @@
-/**
- * li要素ならフォーカスしてスクロールスクロール領域に見えるように親要素をスクロールする
- * @param element
- */
-export declare function focusIfHTMLLIElement(element: Node | null | undefined): void;
-//# sourceMappingURL=focusIfHTMLLIElement.d.ts.map

package/dist/components/DropdownSelector/utils/focusIfHTMLLIElement.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"focusIfHTMLLIElement.d.ts","sourceRoot":"","sources":["../../../../src/components/DropdownSelector/utils/focusIfHTMLLIElement.tsx"],"names":[],"mappings":"AAEA;;;GAGG;AACH,wBAAgB,oBAAoB,CAAC,OAAO,EAAE,IAAI,GAAG,IAAI,GAAG,SAAS,QAKpE"}

package/dist/components/DropdownSelector/utils/handleFocusByKeyBoard.d.ts

@@ -1,6 +0,0 @@
-/**
- * スクロールスクロール領域に見えるように親要素をスクロールする
- * @param element
- */
-export declare function handleFocusByKeyBoard(element: HTMLElement): void;
-//# sourceMappingURL=handleFocusByKeyBoard.d.ts.map

package/dist/components/DropdownSelector/utils/handleFocusByKeyBoard.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"handleFocusByKeyBoard.d.ts","sourceRoot":"","sources":["../../../../src/components/DropdownSelector/utils/handleFocusByKeyBoard.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,wBAAgB,qBAAqB,CAAC,OAAO,EAAE,WAAW,QAczD"}