@charcoal-ui/react 4.0.0-beta.7 → 4.0.0-beta.8

package/src/components/Radio/RadioInput/index.css

@@ -0,0 +1,82 @@
+.charcoal-radio-input {
+  appearance: none;
+  display: block;
+  box-sizing: border-box;
+
+  margin: 0;
+  padding: 6px;
+
+  width: 20px;
+  height: 20px;
+  cursor: pointer;
+  border-radius: 999999px;
+  background-color: var(--charcoal-surface1);
+  transition: 0.2s background-color, 0.2s box-shadow;
+}
+
+.charcoal-radio-input:checked {
+  background-color: var(--charcoal-brand);
+}
+
+.charcoal-radio-input:checked::after {
+  content: '';
+  display: block;
+  width: 8px;
+  height: 8px;
+  pointer-events: none;
+  background-color: var(--charcoal-text5);
+  border-radius: 999999px;
+  transition: 0.2s background-color, 0.2s box-shadow;
+}
+
+.charcoal-radio-input:not(:checked) {
+  border-width: 2px;
+  border-style: solid;
+  border-color: var(--charcoal-text3);
+}
+
+.charcoal-radio-input:disabled {
+  cursor: default;
+}
+
+.charcoal-radio-input:not(:disabled):hover {
+  background-color: var(--charcoal-surface1-hover);
+}
+
+.charcoal-radio-input:not(:disabled):active {
+  background-color: var(--charcoal-surface1-press);
+}
+
+.charcoal-radio-input:not(:disabled):focus {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
+}
+
+.charcoal-radio-input:not(:disabled):focus-visible {
+  box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
+}
+
+.charcoal-radio-input:not(:disabled):focus:not(:focus-visible) {
+  box-shadow: none;
+}
+
+.charcoal-radio-input:not(:disabled)[aria-invalid='true'],
+.charcoal-radio-input:not(:disabled)[aria-invalid='true']:focus {
+  box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
+}
+
+.charcoal-radio-input:checked:not(:disabled):hover {
+  background-color: var(--charcoal-brand-hover);
+}
+
+.charcoal-radio-input:checked:not(:disabled):hover::after {
+  background-color: var(--charcoal-text5-hover);
+}
+
+.charcoal-radio-input:checked:not(:disabled):active {
+  background-color: var(--charcoal-brand-press);
+}
+
+.charcoal-radio-input:checked:not(:disabled):active::after {
+  background-color: var(--charcoal-text5-press);
+}

package/src/components/Radio/RadioInput/index.tsx

@@ -0,0 +1,41 @@
+import './index.css'
+
+import { forwardRef, memo, useCallback } from 'react'
+import { useClassNames } from '../../../_lib/useClassNames'
+
+type CharcoalRadioInputProps = {
+  invalid?: boolean
+  onChange?: (value: string) => void
+}
+
+type InputProps = React.HTMLProps<HTMLInputElement>
+
+export type RadioInputProps = CharcoalRadioInputProps &
+  Omit<InputProps, keyof CharcoalRadioInputProps | 'ref'>
+
+const RadioInput = forwardRef<HTMLInputElement, RadioInputProps>(
+  function RadioInput({ onChange, invalid, className, ...props }, ref) {
+    const handleChange = useCallback(
+      (e: React.ChangeEvent<HTMLInputElement>) => {
+        const el = e.currentTarget
+        onChange?.(el.value)
+      },
+      [onChange]
+    )
+
+    const classNames = useClassNames('charcoal-radio-input', className)
+
+    return (
+      <input
+        className={classNames}
+        ref={ref}
+        type="radio"
+        onChange={handleChange}
+        aria-invalid={invalid}
+        {...props}
+      />
+    )
+  }
+)
+
+export default memo(RadioInput)

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

@@ -19,6 +19,7 @@ exports[`Storybook Tests react/Radio Default 1`] = `
     className="c0"
   >
     <div
+      aria-label="default story"
       aria-orientation="vertical"
       className="charcoal-radio-group"
       role="radiogroup"
@@ -30,9 +31,9 @@ exports[`Storybook Tests react/Radio Default 1`] = `
         <input
           aria-invalid={false}
           checked={true}
-          className="charcoal-radio__input"
+          className="charcoal-radio-input"
           disabled={false}
-          name="name"
+          name="default_story"
           onChange={[Function]}
           type="radio"
           value="1"
@@ -51,9 +52,9 @@ exports[`Storybook Tests react/Radio Default 1`] = `
         <input
           aria-invalid={false}
           checked={false}
-          className="charcoal-radio__input"
+          className="charcoal-radio-input"
           disabled={false}
-          name="name"
+          name="default_story"
           onChange={[Function]}
           type="radio"
           value="2"
@@ -72,9 +73,9 @@ exports[`Storybook Tests react/Radio Default 1`] = `
         <input
           aria-invalid={false}
           checked={false}
-          className="charcoal-radio__input"
+          className="charcoal-radio-input"
           disabled={false}
-          name="name"
+          name="default_story"
           onChange={[Function]}
           type="radio"
           value="3"
@@ -110,6 +111,8 @@ exports[`Storybook Tests react/Radio Disabled 1`] = `
     className="c0"
   >
     <div
+      aria-disabled={true}
+      aria-label="disabled_stroy"
       aria-orientation="vertical"
       className="charcoal-radio-group"
       role="radiogroup"
@@ -121,9 +124,9 @@ exports[`Storybook Tests react/Radio Disabled 1`] = `
         <input
           aria-invalid={false}
           checked={true}
-          className="charcoal-radio__input"
+          className="charcoal-radio-input"
           disabled={true}
-          name="name"
+          name="disabled story"
           onChange={[Function]}
           type="radio"
           value="1"
@@ -142,9 +145,9 @@ exports[`Storybook Tests react/Radio Disabled 1`] = `
         <input
           aria-invalid={false}
           checked={false}
-          className="charcoal-radio__input"
+          className="charcoal-radio-input"
           disabled={true}
-          name="name"
+          name="disabled story"
           onChange={[Function]}
           type="radio"
           value="2"
@@ -163,9 +166,9 @@ exports[`Storybook Tests react/Radio Disabled 1`] = `
         <input
           aria-invalid={false}
           checked={false}
-          className="charcoal-radio__input"
+          className="charcoal-radio-input"
           disabled={true}
-          name="name"
+          name="disabled story"
           onChange={[Function]}
           type="radio"
           value="3"
@@ -202,6 +205,7 @@ exports[`Storybook Tests react/Radio Invalid 1`] = `
   >
     <div
       aria-invalid={true}
+      aria-label="invalid story"
       aria-orientation="vertical"
       className="charcoal-radio-group"
       role="radiogroup"
@@ -213,9 +217,9 @@ exports[`Storybook Tests react/Radio Invalid 1`] = `
         <input
           aria-invalid={true}
           checked={true}
-          className="charcoal-radio__input"
+          className="charcoal-radio-input"
           disabled={false}
-          name="name"
+          name="invalid_story"
           onChange={[Function]}
           type="radio"
           value="1"
@@ -234,9 +238,9 @@ exports[`Storybook Tests react/Radio Invalid 1`] = `
         <input
           aria-invalid={true}
           checked={false}
-          className="charcoal-radio__input"
+          className="charcoal-radio-input"
           disabled={false}
-          name="name"
+          name="invalid_story"
           onChange={[Function]}
           type="radio"
           value="2"
@@ -255,9 +259,9 @@ exports[`Storybook Tests react/Radio Invalid 1`] = `
         <input
           aria-invalid={true}
           checked={false}
-          className="charcoal-radio__input"
+          className="charcoal-radio-input"
           disabled={false}
-          name="name"
+          name="invalid_story"
           onChange={[Function]}
           type="radio"
           value="3"
@@ -293,6 +297,7 @@ exports[`Storybook Tests react/Radio PartialDisabled 1`] = `
     className="c0"
   >
     <div
+      aria-label="partial disabled story"
       aria-orientation="vertical"
       className="charcoal-radio-group"
       role="radiogroup"
@@ -304,9 +309,9 @@ exports[`Storybook Tests react/Radio PartialDisabled 1`] = `
         <input
           aria-invalid={false}
           checked={true}
-          className="charcoal-radio__input"
+          className="charcoal-radio-input"
           disabled={false}
-          name="name"
+          name="partial_disabled_story"
           onChange={[Function]}
           type="radio"
           value="1"
@@ -325,9 +330,9 @@ exports[`Storybook Tests react/Radio PartialDisabled 1`] = `
         <input
           aria-invalid={false}
           checked={false}
-          className="charcoal-radio__input"
+          className="charcoal-radio-input"
           disabled={true}
-          name="name"
+          name="partial_disabled_story"
           onChange={[Function]}
           type="radio"
           value="2"
@@ -346,9 +351,9 @@ exports[`Storybook Tests react/Radio PartialDisabled 1`] = `
         <input
           aria-invalid={false}
           checked={false}
-          className="charcoal-radio__input"
+          className="charcoal-radio-input"
           disabled={false}
-          name="name"
+          name="partial_disabled_story"
           onChange={[Function]}
           type="radio"
           value="3"
@@ -384,6 +389,7 @@ exports[`Storybook Tests react/Radio Readonly 1`] = `
     className="c0"
   >
     <div
+      aria-label="readonly story"
       aria-orientation="vertical"
       className="charcoal-radio-group"
       role="radiogroup"
@@ -395,9 +401,9 @@ exports[`Storybook Tests react/Radio Readonly 1`] = `
         <input
           aria-invalid={false}
           checked={true}
-          className="charcoal-radio__input"
+          className="charcoal-radio-input"
           disabled={false}
-          name="name"
+          name="readonly_story"
           onChange={[Function]}
           type="radio"
           value="1"
@@ -416,9 +422,9 @@ exports[`Storybook Tests react/Radio Readonly 1`] = `
         <input
           aria-invalid={false}
           checked={false}
-          className="charcoal-radio__input"
+          className="charcoal-radio-input"
           disabled={true}
-          name="name"
+          name="readonly_story"
           onChange={[Function]}
           type="radio"
           value="2"
@@ -437,9 +443,9 @@ exports[`Storybook Tests react/Radio Readonly 1`] = `
         <input
           aria-invalid={false}
           checked={false}
-          className="charcoal-radio__input"
+          className="charcoal-radio-input"
           disabled={true}
-          name="name"
+          name="readonly_story"
           onChange={[Function]}
           type="radio"
           value="3"

package/src/components/Radio/index.css

@@ -5,93 +5,14 @@
   align-items: center;
   cursor: pointer;
 }
-.charcoal-radio[aria-disabled]:not([aria-disabled='false']) {
-  opacity: 0.32;
-  cursor: default;
-}
-
-.charcoal-radio__input {
-  appearance: none;
-  display: block;
-  box-sizing: border-box;
 
-  margin: 0;
-  padding: 6px;
-
-  width: 20px;
-  height: 20px;
-  cursor: pointer;
-  border-radius: 999999px;
-  background-color: var(--charcoal-surface1);
-  transition: 0.2s background-color, 0.2s box-shadow;
-}
-.charcoal-radio__input:checked {
-  background-color: var(--charcoal-brand);
-}
-.charcoal-radio__input:checked::after {
-  content: '';
-  display: block;
-  width: 8px;
-  height: 8px;
-  pointer-events: none;
-  background-color: var(--charcoal-text5);
-  border-radius: 999999px;
-  transition: 0.2s background-color, 0.2s box-shadow;
-}
-
-.charcoal-radio__input:not(:checked) {
-  border-width: 2px;
-  border-style: solid;
-  border-color: var(--charcoal-text3);
-}
-.charcoal-radio__input:disabled {
+.charcoal-radio__label[aria-disabled]:not([aria-disabled='false']) {
+  opacity: 0.32;
   cursor: default;
 }
 
-.charcoal-radio__input:not(:disabled):hover {
-  background-color: var(--charcoal-surface1-hover);
-}
-
-.charcoal-radio__input:not(:disabled):active {
-  background-color: var(--charcoal-surface1-press);
-}
-.charcoal-radio__input:not(:disabled):focus {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
-}
-.charcoal-radio__input:not(:disabled):focus-visible {
-  box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
-}
-.charcoal-radio__input:not(:disabled):focus:not(:focus-visible) {
-  box-shadow: none;
-}
-
-.charcoal-radio__input:not(:disabled)[aria-invalid='true'],
-.charcoal-radio__input:not(:disabled)[aria-invalid='true']:focus {
-  box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
-}
-
-.charcoal-radio__input:checked:not(:disabled):hover {
-  background-color: var(--charcoal-brand-hover);
-}
-.charcoal-radio__input:checked:not(:disabled):hover::after {
-  background-color: var(--charcoal-text5-hover);
-}
-.charcoal-radio__input:checked:not(:disabled):active {
-  background-color: var(--charcoal-brand-press);
-}
-.charcoal-radio__input:checked:not(:disabled):active::after {
-  background-color: var(--charcoal-text5-press);
-}
-
 .charcoal-radio__label_div {
   font-size: 14px;
   line-height: 22px;
   color: var(--charcoal-text2);
 }
-
-.charcoal-radio-group {
-  display: grid;
-  grid-template-columns: 1fr;
-  grid-gap: 8px;
-}

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

@@ -1,5 +1,6 @@
 import styled from 'styled-components'
-import Radio, { RadioGroup } from '.'
+import Radio from '.'
+import { RadioGroup } from './RadioGroup'
 import { px } from '@charcoal-ui/utils'
 import { StoryObj } from '@storybook/react'
 import { useState } from 'react'
@@ -27,7 +28,8 @@ export const Default: StoryObj<typeof Radio> = {
     return (
       <LayoutDiv>
         <RadioGroup<Option>
-          name={'name'}
+          name="default_story"
+          label="default story"
           {...args}
           value={value}
           onChange={setValue}
@@ -50,7 +52,8 @@ export const Disabled: StoryObj<typeof Radio> = {
     return (
       <LayoutDiv>
         <RadioGroup<Option>
-          name={'name'}
+          label="disabled_stroy"
+          name="disabled story"
           value={value}
           onChange={setValue}
           disabled
@@ -72,7 +75,12 @@ export const PartialDisabled: StoryObj<typeof Radio> = {
 
     return (
       <LayoutDiv>
-        <RadioGroup<Option> name={'name'} value={value} onChange={setValue}>
+        <RadioGroup<Option>
+          name={'partial_disabled_story'}
+          label={'partial disabled story'}
+          value={value}
+          onChange={setValue}
+        >
           {options.map((option) => (
             <Radio key={option} value={option} disabled={option === '2'}>
               Value {option}
@@ -91,7 +99,8 @@ export const Readonly: StoryObj<typeof Radio> = {
     return (
       <LayoutDiv>
         <RadioGroup<Option>
-          name={'name'}
+          name="readonly_story"
+          label="readonly story"
           value={value}
           onChange={setValue}
           readonly
@@ -114,7 +123,8 @@ export const Invalid: StoryObj<typeof Radio> = {
     return (
       <LayoutDiv>
         <RadioGroup<Option>
-          name={'name'}
+          name="invalid_story"
+          label="invalid story"
           value={value}
           onChange={setValue}
           invalid

package/src/components/Radio/index.test.tsx

@@ -1,6 +1,7 @@
 import { fireEvent, render, screen } from '@testing-library/react'
 import { ThemeProvider } from 'styled-components'
-import Radio, { RadioGroup } from '.'
+import Radio from '.'
+import { RadioGroup } from './RadioGroup'
 import { light } from '@charcoal-ui/theme'
 
 describe('Radio', () => {

package/src/components/Radio/index.tsx

@@ -1,9 +1,12 @@
-import { memo, forwardRef, useCallback, useContext, useMemo } from 'react'
+import './index.css'
+
+import { memo, forwardRef, useContext } from 'react'
 import * as React from 'react'
 import warning from 'warning'
 import { useClassNames } from '../../_lib/useClassNames'
 
-import './index.css'
+import { RadioGroupContext } from './RadioGroupContext'
+import RadioInput from './RadioInput'
 
 export type RadioProps = React.PropsWithChildren<{
   value: string
@@ -36,23 +39,14 @@ const Radio = forwardRef<HTMLInputElement, RadioProps>(function RadioInner(
   const isDisabled = disabled || isParentDisabled
   const isReadonly = readonly && !isSelected
 
-  const handleChange = useCallback(
-    (e: React.ChangeEvent<HTMLInputElement>) => {
-      onChange(e.currentTarget.value)
-    },
-    [onChange]
-  )
-
   return (
     <label aria-disabled={isDisabled || isReadonly} className={classNames}>
-      <input
-        type="radio"
-        className="charcoal-radio__input"
+      <RadioInput
         name={name}
         value={value}
         checked={isSelected}
         aria-invalid={invalid}
-        onChange={handleChange}
+        onChange={onChange}
         disabled={isDisabled || isReadonly}
         ref={ref}
       />
@@ -64,79 +58,3 @@ const Radio = forwardRef<HTMLInputElement, RadioProps>(function RadioInner(
 })
 
 export default memo(Radio)
-
-export type RadioGroupProps<Value extends string = string> =
-  React.PropsWithChildren<{
-    className?: string
-    value?: Value
-    name: string
-    onChange(next: Value): void
-    disabled?: boolean
-    readonly?: boolean
-    invalid?: boolean
-    ref?: React.Ref<HTMLDivElement>
-  }>
-
-interface RadioGroupContext {
-  name: string
-  selected?: string
-  disabled: boolean
-  readonly: boolean
-  invalid: boolean
-  onChange: (next: string) => void
-}
-
-const RadioGroupContext = React.createContext<RadioGroupContext>({
-  name: undefined as never,
-  selected: undefined,
-  disabled: false,
-  readonly: false,
-  invalid: false,
-  onChange() {
-    throw new Error(
-      'Cannot find onChange() handler. Perhaps you forgot to wrap with <RadioGroup> ?'
-    )
-  },
-})
-
-export const RadioGroup = forwardRef<HTMLDivElement, RadioGroupProps<string>>(
-  function RadioGroupInner(
-    { value, name, onChange, disabled, readonly, invalid, children, ...props },
-    ref
-  ) {
-    const classNames = useClassNames('charcoal-radio-group', props.className)
-
-    const handleChange = useCallback(
-      (next: string) => {
-        onChange(next)
-      },
-      [onChange]
-    )
-
-    const contextValue = useMemo(
-      () => ({
-        name,
-        selected: value,
-        disabled: disabled ?? false,
-        readonly: readonly ?? false,
-        invalid: invalid ?? false,
-        onChange: handleChange,
-      }),
-      [disabled, handleChange, invalid, name, readonly, value]
-    )
-
-    return (
-      <RadioGroupContext.Provider value={contextValue}>
-        <div
-          role="radiogroup"
-          aria-orientation="vertical"
-          aria-invalid={invalid}
-          className={classNames}
-          ref={ref}
-        >
-          {children}
-        </div>
-      </RadioGroupContext.Provider>
-    )
-  }
-) as <Value extends string>(props: RadioGroupProps<Value>) => JSX.Element

package/src/index.ts

@@ -18,12 +18,8 @@ export {
   default as IconButton,
   type IconButtonProps,
 } from './components/IconButton'
-export {
-  default as Radio,
-  type RadioProps,
-  RadioGroup,
-  type RadioGroupProps,
-} from './components/Radio'
+export { default as Radio, type RadioProps } from './components/Radio'
+export { RadioGroup, type RadioGroupProps } from './components/Radio/RadioGroup'
 export { default as Switch, type SwitchProps } from './components/Switch'
 export {
   default as TextField,

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

@@ -1,7 +0,0 @@
-/**
- * 水平方向の直線
- */
-export declare const Divider: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
-    role: "separator";
-}, "role">;
-//# sourceMappingURL=Divider.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"Divider.d.ts","sourceRoot":"","sources":["../../../src/components/DropdownSelector/Divider.tsx"],"names":[],"mappings":"AAEA;;GAEG;AACH,eAAO,MAAM,OAAO;;UAUnB,CAAA"}

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

@@ -1,7 +0,0 @@
-import { MenuItemProps } from './MenuItem';
-export type DropdownMenuItemProps = Omit<MenuItemProps<'div'>, 'as'>;
-/**
- * DropdownSelectorの選択肢として使うMenuItem
- */
-export default function DropdownMenuItem(props: DropdownMenuItemProps): JSX.Element;
-//# sourceMappingURL=DropdownMenuItem.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"DropdownMenuItem.d.ts","sourceRoot":"","sources":["../../../src/components/DropdownSelector/DropdownMenuItem.tsx"],"names":[],"mappings":"AACA,OAAiB,EAAE,aAAa,EAAE,MAAM,YAAY,CAAA;AAKpD,MAAM,MAAM,qBAAqB,GAAG,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC,CAAA;AAEpE;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,eAWpE"}

package/src/components/DropdownSelector/Divider.tsx

@@ -1,16 +0,0 @@
-import styled from 'styled-components'
-
-/**
- * 水平方向の直線
- */
-export const Divider = styled.div.attrs({ role: 'separator' })`
-  display: flex;
-
-  &:before {
-    content: '';
-    display: block;
-    width: 100%;
-    height: 1px;
-    background: #00000014;
-  }
-`