@charcoal-ui/react 4.2.0 → 4.3.0-beta.0

package/src/components/TagItem/index.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, memo, useMemo, ForwardedRef } from 'react'
+import React, { forwardRef, memo, useMemo, ForwardedRef, type JSX } from 'react'
 import { useObjectRef } from '@react-aria/utils'
 import Icon from '../Icon'
 import { useClassNames } from '../../_lib/useClassNames'
@@ -24,66 +24,66 @@ export type TagItemProps<T extends React.ElementType = 'button'> = {
   component?: T
 } & Omit<React.ComponentPropsWithRef<T>, 'children'>
 
-const TagItem = forwardRef(function TagItemInner<T extends React.ElementType>(
-  {
-    component,
-    label,
-    translatedLabel,
-    bgColor = '#7ACCB1',
-    bgImage,
-    size = 'M',
-    status = 'default',
-    ...props
-  }: TagItemProps<T>,
-  _ref: ForwardedRef<HTMLButtonElement>
-) {
-  const ref = useObjectRef(_ref)
+const TagItem = forwardRef<HTMLButtonElement, TagItemProps>(
+  function TagItemInner<T extends React.ElementType>(
+    {
+      component,
+      label,
+      translatedLabel,
+      bgColor = '#7ACCB1',
+      bgImage,
+      size = 'M',
+      status = 'default',
+      ...props
+    }: TagItemProps<T>,
+    _ref: ForwardedRef<HTMLButtonElement>
+  ) {
+    const ref = useObjectRef(_ref)
 
-  const hasTranslatedLabel =
-    translatedLabel !== undefined && translatedLabel.length > 0
-  const className = useClassNames(
-    'charcoal-tag-item',
-    'charcoal-tag-item__bg',
-    props.className
-  )
+    const hasTranslatedLabel =
+      translatedLabel !== undefined && translatedLabel.length > 0
+    const className = useClassNames(
+      'charcoal-tag-item',
+      'charcoal-tag-item__bg',
+      props.className
+    )
 
-  const bgVariant =
-    bgImage !== undefined && bgImage.length > 0 ? 'image' : 'color'
-  const bg = bgVariant === 'color' ? bgColor : `url(${bgImage ?? ''})`
+    const bgVariant =
+      bgImage !== undefined && bgImage.length > 0 ? 'image' : 'color'
+    const bg = bgVariant === 'color' ? bgColor : `url(${bgImage ?? ''})`
 
-  const Component = useMemo(() => component ?? 'button', [component])
+    const Component = useMemo(() => component ?? 'button', [component])
 
-  return (
-    <Component
-      {...props}
-      ref={ref}
-      className={className}
-      data-state={status}
-      data-bg-variant={bgVariant}
-      data-size={hasTranslatedLabel ? 'M' : size}
-      style={{ '--charcoal-tag-item-bg': bg }}
-    >
-      <div
-        className="charcoal-tag-item__label"
-        data-has-translate={hasTranslatedLabel}
+    return (
+      <Component
+        {...props}
+        ref={ref}
+        className={className}
+        data-state={status}
+        data-bg-variant={bgVariant}
+        data-size={hasTranslatedLabel ? 'M' : size}
+        style={{ '--charcoal-tag-item-bg': bg }}
       >
-        {hasTranslatedLabel && (
-          <span className="charcoal-tag-item__label__translated">
-            {translatedLabel}
-          </span>
-        )}
-        <span
-          className="charcoal-tag-item__label__text"
+        <div
+          className="charcoal-tag-item__label"
           data-has-translate={hasTranslatedLabel}
         >
-          {label}
-        </span>
-      </div>
-      {status === 'active' && <Icon name="16/Remove" />}
-    </Component>
-  )
-}) as <T extends React.ElementType = 'button'>(
-  p: TagItemProps<T>
-) => JSX.Element
+          {hasTranslatedLabel && (
+            <span className="charcoal-tag-item__label__translated">
+              {translatedLabel}
+            </span>
+          )}
+          <span
+            className="charcoal-tag-item__label__text"
+            data-has-translate={hasTranslatedLabel}
+          >
+            {label}
+          </span>
+        </div>
+        {status === 'active' && <Icon name="16/Remove" />}
+      </Component>
+    )
+  }
+) as <T extends React.ElementType = 'button'>(p: TagItemProps<T>) => JSX.Element
 
 export default memo(TagItem)

package/src/components/TextArea/index.css

@@ -28,7 +28,7 @@
   box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
 }
 
-.charcoal-text-area-container:not(aria-disabled='true'):hover {
+.charcoal-text-area-container:not([aria-disabled='true']):hover {
   background-color: var(--charcoal-surface3-hover);
 }
 

package/src/components/TextField/index.tsx

@@ -108,9 +108,7 @@ const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(
           data-invalid={invalid === true}
           ref={containerRef}
         >
-          {prefix !== null && (
-            <div className="charcoal-text-field-prefix">{prefix}</div>
-          )}
+          {prefix && <div className="charcoal-text-field-prefix">{prefix}</div>}
           <input
             className="charcoal-text-field-input"
             aria-describedby={showAssistiveText ? describedbyId : undefined}
@@ -126,7 +124,7 @@ const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(
             value={value}
             {...props}
           />
-          {(suffix !== null || showCount) && (
+          {(suffix || showCount) && (
             <div className="charcoal-text-field-suffix">
               {suffix}
               {showCount && (

package/src/components/TextField/text-field.test.tsx

@@ -0,0 +1,72 @@
+import { render } from '@testing-library/react'
+import TextField from '.'
+
+import '@testing-library/jest-dom'
+
+describe('TextField component', () => {
+  it('should not render prefix and suffix when not provided', () => {
+    const { container } = render(<TextField />)
+
+    // prefix and suffix elements should not be rendered
+    const prefixElement = container.querySelector('.charcoal-text-field-prefix')
+    const suffixElement = container.querySelector('.charcoal-text-field-suffix')
+
+    expect(prefixElement).toBeNull()
+    expect(suffixElement).toBeNull()
+  })
+
+  test.each([
+    [null, 'null'],
+    [undefined, 'undefined'],
+    ['', 'empty string'],
+    [false, 'boolean false'],
+    [0, 'zero'],
+  ])(
+    'should not render prefix when value is falsy (%s: %s)',
+    (prefixValue, _desc) => {
+      const { container } = render(<TextField prefix={prefixValue} />)
+      const prefixElement = container.querySelector('.charcoal-text-prefix')
+      expect(prefixElement).toBeNull()
+    }
+  )
+
+  test.each([
+    [null, 'null'],
+    [undefined, 'undefined'],
+    ['', 'empty string'],
+    [false, 'boolean false'],
+    [0, 'zero'],
+  ])(
+    'should not render suffix when value is falsy (%s: %s) and showCount is false',
+    (suffixValue, _desc) => {
+      const { container } = render(
+        <TextField suffix={suffixValue} showCount={false} />
+      )
+      const suffixElement = container.querySelector(
+        '.charcoal-text-field-suffix'
+      )
+      expect(suffixElement).toBeNull()
+    }
+  )
+
+  it('should render prefix and suffix when provided as truthy values', () => {
+    const prefixContent = 'Test Prefix'
+    const suffixContent = 'Test Suffix'
+    const { container, getByText } = render(
+      <TextField
+        prefix={<span>{prefixContent}</span>}
+        suffix={<span>{suffixContent}</span>}
+      />
+    )
+
+    const prefixElement = container.querySelector('.charcoal-text-field-prefix')
+    const suffixElement = container.querySelector('.charcoal-text-field-suffix')
+
+    expect(prefixElement).not.toBeNull()
+    expect(suffixElement).not.toBeNull()
+
+    // Verify text content
+    expect(getByText(prefixContent)).toBeInTheDocument()
+    expect(getByText(suffixContent)).toBeInTheDocument()
+  })
+})

package/src/components/TextField/useFocusWithClick.tsx

@@ -2,8 +2,8 @@ import { useEffect } from 'react'
 import * as React from 'react'
 
 export function useFocusWithClick(
-  containerRef: React.RefObject<HTMLDivElement>,
-  inputRef: React.RefObject<HTMLInputElement | HTMLTextAreaElement>
+  containerRef: React.RefObject<HTMLDivElement | null>,
+  inputRef: React.RefObject<HTMLInputElement | HTMLTextAreaElement | null>
 ) {
   useEffect(() => {
     const el = containerRef.current

package/src/core/SetThemeScript.tsx

@@ -0,0 +1,57 @@
+import {
+  assertKeyString,
+  DEFAULT_ROOT_ATTRIBUTE,
+  LOCAL_STORAGE_KEY,
+} from './themeHelper'
+
+interface Props {
+  localStorageKey: string
+  rootAttribute: string
+}
+
+/**
+ * 同期的にテーマをローカルストレージから取得してhtmlの属性に設定するコードを取得する
+ * @param props localStorageのキー、htmlのdataになる属性のキーを含むオブジェクト
+ * @returns ソースコードの文字列
+ */
+export function makeSetThemeScriptCode({
+  localStorageKey = defaultProps.localStorageKey,
+  rootAttribute = defaultProps.rootAttribute,
+}: Partial<Props> = defaultProps) {
+  assertKeyString(localStorageKey)
+  assertKeyString(rootAttribute)
+  return `'use strict';
+(function () {
+    var localStorageKey = '${localStorageKey}'
+    var rootAttribute = '${rootAttribute}'
+    var currentTheme = localStorage.getItem(localStorageKey);
+    if (currentTheme) {
+        document.documentElement.dataset[rootAttribute] = currentTheme;
+    }
+})();
+`
+}
+
+/**
+ * 同期的にテーマをローカルストレージから取得してhtmlの属性に設定するスクリプトタグ
+ * @param props localStorageのキー、htmlのdataになる属性のキーを含むオブジェクト
+ * @returns
+ */
+export function SetThemeScript({
+  localStorageKey = defaultProps.localStorageKey,
+  rootAttribute = defaultProps.rootAttribute,
+}: Props) {
+  const src = makeSetThemeScriptCode({ localStorageKey, rootAttribute })
+  return (
+    <script
+      dangerouslySetInnerHTML={{
+        __html: src,
+      }}
+    />
+  )
+}
+
+const defaultProps: Props = {
+  localStorageKey: LOCAL_STORAGE_KEY,
+  rootAttribute: DEFAULT_ROOT_ATTRIBUTE,
+}

package/src/core/themeHelper.ts

@@ -0,0 +1,180 @@
+import { useEffect, useMemo, useState } from 'react'
+
+export const LOCAL_STORAGE_KEY = 'charcoal-theme'
+export const DEFAULT_ROOT_ATTRIBUTE = 'theme'
+
+const keyStringRegExp = new RegExp(/^(\w|-)+$/)
+
+/**
+ * 文字列が英数字_-のみで構成されているか検証する。不正な文字列ならエラーを投げる
+ * @param key 検証するキー
+ */
+export function assertKeyString(key: string) {
+  if (!keyStringRegExp.test(key)) {
+    throw new Error(`Unexpected key :${key}, expect: /^(\\w|-)+$/`)
+  }
+}
+
+/**
+ * `<html data-theme="dark">` のような設定を行うデフォルトのセッター
+ */
+export const themeSetter =
+  (attr: string = DEFAULT_ROOT_ATTRIBUTE) =>
+  (theme: string | undefined) => {
+    assertKeyString(attr)
+    if (theme !== undefined) {
+      document.documentElement.dataset[attr] = theme
+    } else {
+      delete document.documentElement.dataset[attr]
+    }
+  }
+
+/**
+ * `<html data-theme="dark">` にマッチするセレクタを生成する
+ */
+export function themeSelector<
+  T extends string,
+  S extends string = typeof DEFAULT_ROOT_ATTRIBUTE
+>(theme: T, attr?: S) {
+  return `:root[data-${attr ?? DEFAULT_ROOT_ATTRIBUTE}='${theme}']` as const
+}
+
+/**
+ * prefers-color-scheme を利用する media クエリを生成する
+ */
+export function prefersColorScheme<T extends 'light' | 'dark'>(theme: T) {
+  return `@media (prefers-color-scheme: ${theme})` as const
+}
+
+/**
+ * LocalStorageからテーマの情報を取得して、変化時にテーマをセットするhooks
+ */
+export function useThemeSetter({
+  key = LOCAL_STORAGE_KEY,
+  setter = themeSetter(),
+}: { key?: string; setter?: (theme: string | undefined) => void } = {}) {
+  const [theme, , system] = useTheme(key)
+
+  useEffect(() => {
+    if (theme === undefined) {
+      return
+    }
+    // prefers-color-scheme から値を取っている場合にはcssのみで処理したいのでアンセットする
+    setter(system ? undefined : theme)
+  }, [setter, system, theme])
+}
+
+/**
+ * 同期的にLocalStorageからテーマを取得するヘルパ
+ */
+export function getThemeSync(key: string = LOCAL_STORAGE_KEY) {
+  const theme = localStorage.getItem(key)
+  return theme
+}
+
+/**
+ * LocalStorage, prefers-color-scheme からテーマの情報を取得して、現在のテーマを返すhooks
+ *
+ * `dark` `light` という名前だけは特別扱いされていて、prefers-color-schemeにマッチした場合に返ります
+ */
+export const useTheme = (localStorageKey: string = LOCAL_STORAGE_KEY) => {
+  assertKeyString(localStorageKey)
+  const isDark = useMedia('(prefers-color-scheme: dark)')
+  const media = isDark !== undefined ? (isDark ? 'dark' : 'light') : undefined
+  const [local, setTheme, ready] =
+    useLocalStorage<typeof media>(localStorageKey)
+  const theme = !ready || media === undefined ? undefined : local ?? media
+  const system = local === undefined
+  return [theme, setTheme, system] as const
+}
+
+export function useLocalStorage<T>(key: string, defaultValue?: () => T) {
+  const [ready, setReady] = useState(false)
+  const [state, setState] = useState<T>()
+  const defaultValueMemo = useMemo(() => defaultValue?.(), [defaultValue])
+
+  useEffect(() => {
+    fetch()
+    window.addEventListener('storage', handleStorage)
+    return () => {
+      window.removeEventListener('storage', handleStorage)
+    }
+  })
+
+  const handleStorage = (e: StorageEvent) => {
+    if (e.storageArea !== localStorage) {
+      return
+    }
+    if (e.key !== key) {
+      return
+    }
+    fetch()
+  }
+
+  const fetch = () => {
+    const raw = localStorage.getItem(key)
+    setState((raw !== null ? deserialize(raw) : null) ?? defaultValueMemo)
+    setReady(true)
+  }
+
+  const set = (value: T | undefined) => {
+    if (value === undefined) {
+      // undefinedがセットされる場合にはkeyごと削除
+      localStorage.removeItem(key)
+    } else {
+      const raw = serialize(value)
+      localStorage.setItem(key, raw)
+    }
+
+    // 同一ウィンドウではstorageイベントが発火しないので、手動で発火させる
+    const event = new StorageEvent('storage', {
+      bubbles: true,
+      cancelable: false,
+      key,
+      url: location.href,
+      storageArea: localStorage,
+    })
+    dispatchEvent(event)
+  }
+
+  return [state ?? defaultValueMemo, set, ready] as const
+}
+
+function deserialize<T>(raw: string): T {
+  try {
+    return JSON.parse(raw) as T
+  } catch {
+    // syntax error はすべて文字列として扱う
+    return raw as unknown as T
+  }
+}
+
+function serialize(value: unknown): string {
+  if (typeof value === 'string') {
+    return value
+  } else {
+    return JSON.stringify(value)
+  }
+}
+
+export function useMedia(query: string) {
+  const [match, setState] = useState<boolean>()
+
+  useEffect(() => {
+    const matcher = window.matchMedia(query)
+
+    const onChange = () => {
+      setState(matcher.matches)
+    }
+
+    matcher.addEventListener('change', onChange)
+
+    setState(matcher.matches)
+
+    return () => {
+      matcher.removeEventListener('change', onChange)
+    }
+  }, [query])
+
+  return match
+}

package/src/index.ts

@@ -4,6 +4,17 @@ export {
   CharcoalProvider,
   type CharcoalProviderProps,
 } from './core/CharcoalProvider'
+export { makeSetThemeScriptCode, SetThemeScript } from './core/SetThemeScript'
+export {
+  getThemeSync,
+  themeSetter,
+  themeSelector,
+  prefersColorScheme,
+  useTheme,
+  useThemeSetter,
+  useLocalStorage,
+  useMedia,
+} from './core/themeHelper'
 export { default as Button, type ButtonProps } from './components/Button'
 export {
   default as Clickable,