@charcoal-ui/react 5.0.0-beta.4 → 5.0.0-beta.6

package/src/components/Button/styledButtonTypeTest.d.tsx

@@ -17,11 +17,11 @@ const StyledButtonAsButton = styled(Button<'button'>)``
 const StyledButtonA = styled(Button<'a'>)``
 const StyledButtonCustom = styled(Button<typeof Custom>)``
 const StyledButtonCustomAsButton = styled(
-  Button<typeof Custom>
+  Button<typeof Custom>,
 )`` as typeof Button
 const StyledButtonCustomGeneric = styled(Button<typeof CustomGeneric>)``
 const StyledButtonCustomGenericFoo = styled(
-  Button<typeof CustomGeneric<'foo'>>
+  Button<typeof CustomGeneric<'foo'>>,
 )``
 
 // for type test only

package/src/components/Checkbox/CheckboxInput/index.css

@@ -6,7 +6,9 @@
   width: 20px;
   height: 20px;
   border-radius: 4px;
-  transition: 0.2s box-shadow, 0.2s background-color;
+  transition:
+    0.2s box-shadow,
+    0.2s background-color;
   position: relative;
   box-sizing: border-box;
 }

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

@@ -17,14 +17,14 @@ export type CheckboxInputProps = CharcoalCheckboxInputProps &
 const CheckboxInput = forwardRef<HTMLInputElement, CheckboxInputProps>(
   function CheckboxInput(
     { onChange, checked, invalid, className, rounded, ...props },
-    ref
+    ref,
   ) {
     const handleChange = useCallback(
       (e: React.ChangeEvent<HTMLInputElement>) => {
         const el = e.currentTarget
         onChange?.(el.checked)
       },
-      [onChange]
+      [onChange],
     )
 
     const classNames = useClassNames('charcoal-checkbox-input', className)
@@ -41,7 +41,7 @@ const CheckboxInput = forwardRef<HTMLInputElement, CheckboxInputProps>(
         {...props}
       />
     )
-  }
+  },
 )
 
 export default memo(CheckboxInput)

package/src/components/Checkbox/index.tsx

@@ -33,7 +33,7 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxInputProps>(
         {children}
       </CheckboxWithLabel>
     )
-  }
+  },
 )
 
 export default memo(Checkbox)

package/src/components/Clickable/index.tsx

@@ -13,7 +13,7 @@ export type ClickableProps<T extends React.ElementType = 'button'> = {
 
 const Clickable = forwardRef(function Clickable<T extends React.ElementType>(
   { component, ...props }: ClickableProps<T>,
-  ref: React.ForwardedRef<HTMLButtonElement>
+  ref: React.ForwardedRef<HTMLButtonElement>,
 ) {
   const className = useClassNames('charcoal-clickable', props.className)
 
@@ -21,7 +21,7 @@ const Clickable = forwardRef(function Clickable<T extends React.ElementType>(
 
   return <Component {...props} ref={ref} className={className} />
 }) as <T extends React.ElementType = 'button'>(
-  p: ClickableProps<T>
+  p: ClickableProps<T>,
 ) => JSX.Element
 export default Clickable
 

package/src/components/DropdownSelector/DropdownPopover.tsx

@@ -25,7 +25,7 @@ export function DropdownPopover({ children, ...props }: DropdownPopoverProps) {
         const windowScrollY = window.scrollY
         const windowScrollX = window.scrollX
         const selectedElement = document.querySelector(
-          `[data-key="${props.value.toString()}"]`
+          `[data-key="${props.value.toString()}"]`,
         ) as HTMLElement | undefined
         selectedElement?.focus()
         window.scrollTo(windowScrollX, windowScrollY)

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

@@ -15,7 +15,7 @@ export type ListItemProps<T extends React.ElementType = 'li'> = {
 
 const ListItem = forwardRef(function ListItem<T extends React.ElementType>(
   { as, className, ...props }: ListItemProps<T>,
-  ref: ForwardedRef<HTMLLIElement>
+  ref: ForwardedRef<HTMLLIElement>,
 ) {
   const Component = useMemo(() => as ?? 'li', [as])
   const classNames = useClassNames('charcoal-list-item', className)

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

@@ -12,10 +12,10 @@ export type MenuItemProps<T extends React.ElementType = 'li'> = {
  * 基本的に`<MenuList>`, `<MenuGroup>`と合わせて使用する
  */
 const MenuItem = forwardRef(function MenuItem<
-  T extends React.ElementType = 'li'
+  T extends React.ElementType = 'li',
 >(
   { className: _, value, disabled, ...props }: MenuItemProps<T>,
-  ref: ForwardedRef<HTMLLIElement>
+  ref: ForwardedRef<HTMLLIElement>,
 ) {
   const [handleKeyDown, setContextValue] = useMenuItemHandleKeyDown(value)
   return (

package/src/components/DropdownSelector/MenuItem/internals/useMenuItemHandleKeyDown.tsx

@@ -10,7 +10,7 @@ import { MenuListContext } from '../../MenuList/MenuListContext'
  * @returns
  */
 export function useMenuItemHandleKeyDown(
-  value?: string
+  value?: string,
 ): [(e: React.KeyboardEvent<HTMLElement>) => void, () => void] {
   const { setValue, root, propsArray } = useContext(MenuListContext)
   const setContextValue = useCallback(() => {
@@ -39,11 +39,11 @@ export function useMenuItemHandleKeyDown(
               ? values[0]
               : values[index + 1]
             : // next or first
-            index - 1 < 0
-            ? values[values.length - 1]
-            : values[index - 1]
+              index - 1 < 0
+              ? values[values.length - 1]
+              : values[index - 1]
           const next = root?.current?.querySelector(
-            `[data-key='${focusValue}']`
+            `[data-key='${focusValue}']`,
           )
 
           if (next instanceof HTMLElement) {
@@ -60,7 +60,7 @@ export function useMenuItemHandleKeyDown(
         }
       }
     },
-    [setContextValue, propsArray, value, root]
+    [setContextValue, propsArray, value, root],
   )
   return [handleKeyDown, setContextValue]
 }

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

@@ -23,7 +23,7 @@ export default function MenuList(props: MenuListProps) {
   const root = useRef(null)
   const propsArray = useMemo(
     () => getValuesRecursive(props.children),
-    [props.children]
+    [props.children],
   )
 
   return (

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

@@ -38,7 +38,7 @@ export default function Popover(props: PopoverProps) {
       open: _empty,
       setOpen: _empty,
       toggle: _empty,
-    }
+    },
   )
 
   const modalBackground = useContext(ModalBackgroundContext)

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

@@ -3,7 +3,7 @@ import { useEffect } from 'react'
 export function usePreventScroll(
   element: HTMLElement | null,
   isOpen: boolean,
-  useClip = false
+  useClip = false,
 ) {
   useEffect(() => {
     if (isOpen && element) {

package/src/components/DropdownSelector/index.css

@@ -28,7 +28,9 @@
   background-color: var(--charcoal-surface3);
   border-radius: 4px;
 
-  transition: 0.2s box-shadow, 0.2s background-color;
+  transition:
+    0.2s box-shadow,
+    0.2s background-color;
 }
 
 .charcoal-dropdown-selector-button:disabled {

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

@@ -324,7 +324,7 @@ export const InFormTag: StoryObj<typeof DropdownSelector> = {
         onSubmit={(e) => {
           const target = e.target as HTMLFormElement
           const select = target.elements.namedItem(
-            'exampleOption'
+            'exampleOption',
           ) as HTMLSelectElement
           alert(`selected value: Option ${select.value}`)
           e.preventDefault()

package/src/components/DropdownSelector/index.tsx

@@ -43,7 +43,7 @@ export default function DropdownSelector({
 
   const isPlaceholder = useMemo(
     () => props.placeholder !== undefined && preview === undefined,
-    [preview, props.placeholder]
+    [preview, props.placeholder],
   )
 
   const propsArray = getValuesRecursive(props.children)
@@ -54,7 +54,7 @@ export default function DropdownSelector({
     (e: React.ChangeEvent<HTMLSelectElement>) => {
       onChange(e.target.value)
     },
-    [onChange]
+    [onChange],
   )
 
   const labelId = useId()
@@ -62,7 +62,7 @@ export default function DropdownSelector({
 
   const classNames = useClassNames(
     'charcoal-dropdown-selector-root',
-    props.className
+    props.className,
   )
 
   return (

package/src/components/DropdownSelector/utils/findPreviewRecursive.tsx

@@ -12,7 +12,7 @@ import * as React from 'react'
  */
 export function findPreviewRecursive(
   children: ReactNode,
-  value: string
+  value: string,
 ): ReactNode | undefined {
   const childArray = React.Children.toArray(children)
   for (let i = 0; i < childArray.length; i++) {
@@ -28,7 +28,7 @@ export function findPreviewRecursive(
       if ('children' in child.props) {
         const children = findPreviewRecursive(
           (child.props as { children: ReactNode }).children,
-          value
+          value,
         )
         if (children !== undefined) {
           return children

package/src/components/FieldLabel/index.css

@@ -18,7 +18,9 @@
   line-height: 22px;
   display: flow-root;
   color: var(--charcoal-text3);
-  transition: 0.2s color, 0.2s box-shadow;
+  transition:
+    0.2s color,
+    0.2s box-shadow;
 }
 
 .charcoal-field-label-root {

package/src/components/FieldLabel/index.tsx

@@ -24,7 +24,7 @@ const FieldLabel = React.forwardRef<HTMLLabelElement, FieldLabelProps>(
       subLabel,
       ...labelProps
     },
-    ref
+    ref,
   ) {
     const classNames = useClassNames('charcoal-field-label-root', className)
     return (
@@ -42,7 +42,7 @@ const FieldLabel = React.forwardRef<HTMLLabelElement, FieldLabelProps>(
         </div>
       </div>
     )
-  }
+  },
 )
 
 export default FieldLabel

package/src/components/Icon/index.tsx

@@ -16,7 +16,7 @@ export interface IconProps
 
 const Icon = React.forwardRef<PixivIcon, IconProps>(function IconInner(
   { name, scale, unsafeNonGuidelineScale, className, ...rest },
-  ref
+  ref,
 ) {
   return (
     <pixiv-icon

package/src/components/IconButton/index.css

@@ -20,7 +20,9 @@
   align-items: center;
   justify-content: center;
   border-radius: 999999px;
-  transition: 0.2s background-color, 0.2s box-shadow;
+  transition:
+    0.2s background-color,
+    0.2s box-shadow;
 }
 
 .charcoal-icon-button:disabled,

package/src/components/IconButton/index.tsx

@@ -25,7 +25,7 @@ const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
       component,
       ...rest
     }: IconButtonProps<T>,
-    ref: ForwardedRef<HTMLButtonElement>
+    ref: ForwardedRef<HTMLButtonElement>,
   ) {
     validateIconSize(size, icon)
     const Component = useMemo(() => component ?? 'button', [component])
@@ -43,9 +43,9 @@ const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
         <pixiv-icon name={icon} />
       </Component>
     )
-  }
+  },
 ) as <T extends React.ElementType = 'button'>(
-  p: IconButtonProps<T>
+  p: IconButtonProps<T>,
 ) => JSX.Element
 
 export default IconButton
@@ -73,7 +73,7 @@ function validateIconSize(size: Size, icon: keyof KnownIconType) {
   if (iconSize !== requiredIconSize) {
     // eslint-disable-next-line no-console
     console.warn(
-      `IconButton with size "${size}" expect icon size "${requiredIconSize}, but got "${iconSize}"`
+      `IconButton with size "${size}" expect icon size "${requiredIconSize}, but got "${iconSize}"`,
     )
   }
 }

package/src/components/LoadingSpinner/index.tsx

@@ -13,11 +13,11 @@ export type LoadingSpinnerProps = {
 const LoadingSpinner = forwardRef<HTMLDivElement, LoadingSpinnerProps>(
   function LoadingSpinnerInner(
     { size = 48, padding = 16, transparent = false, ...props },
-    ref
+    ref,
   ) {
     const classNames = useClassNames(
       'charcoal-loading-spinner',
-      props.className
+      props.className,
     )
 
     return (
@@ -34,7 +34,7 @@ const LoadingSpinner = forwardRef<HTMLDivElement, LoadingSpinnerProps>(
         <LoadingSpinnerIcon />
       </div>
     )
-  }
+  },
 )
 
 export default memo(LoadingSpinner)
@@ -71,5 +71,5 @@ export const LoadingSpinnerIcon = forwardRef<LoadingSpinnerIconHandler, Props>(
         className="charcoal-loading-spinner-icon"
       />
     )
-  }
+  },
 )

package/src/components/Modal/Dialog/index.tsx

@@ -19,7 +19,7 @@ export const Dialog = forwardRef<
     {
       role: 'dialog',
     },
-    ref
+    ref,
   )
 
   const classNames = useClassNames('charcoal-modal-dialog', className)

package/src/components/Modal/ModalBackgroundContext.tsx

@@ -4,5 +4,5 @@ import * as React from 'react'
  * ModalBackgroundのElementが入ったコンテキスト
  */
 export const ModalBackgroundContext = React.createContext<HTMLElement | null>(
-  null
+  null,
 )

package/src/components/Modal/index.tsx

@@ -68,7 +68,7 @@ const DEFAULT_Z_INDEX = 10
  */
 const Modal = forwardRef<HTMLDivElement, ModalProps>(function ModalInner(
   { children, zIndex = DEFAULT_Z_INDEX, portalContainer, ...props },
-  external
+  external,
 ) {
   const {
     title,
@@ -93,7 +93,7 @@ const Modal = forwardRef<HTMLDivElement, ModalProps>(function ModalInner(
       onClose,
       isOpen,
     },
-    ref
+    ref,
   )
 
   const isMobile = (useWindowWidth() ?? Infinity) < 744
@@ -131,7 +131,7 @@ const Modal = forwardRef<HTMLDivElement, ModalProps>(function ModalInner(
         onClose()
       }
     },
-    [onClose]
+    [onClose],
   )
 
   return transition(
@@ -186,7 +186,7 @@ const Modal = forwardRef<HTMLDivElement, ModalProps>(function ModalInner(
             </ModalBackgroundContext.Provider>
           </animated.div>
         </Overlay>
-      )
+      ),
   )
 })
 

package/src/components/Modal/useCustomModalOverlay.tsx

@@ -19,7 +19,7 @@ export type CharcoalModalOverlayProps = AriaModalOverlayProps & {
 export function useCharcoalModalOverlay(
   props: CharcoalModalOverlayProps,
   state: { isOpen: boolean; onClose: () => void },
-  ref: React.RefObject<HTMLElement | null>
+  ref: React.RefObject<HTMLElement | null>,
 ): ModalOverlayAria {
   const { overlayProps, underlayProps } = useOverlay(
     {
@@ -28,13 +28,13 @@ export function useCharcoalModalOverlay(
       onClose: state.onClose,
       shouldCloseOnInteractOutside: () => false,
     },
-    ref
+    ref,
   )
 
   usePreventScroll(
     typeof document !== 'undefined' ? document.body : null,
     state.isOpen,
-    props.overflowClip
+    props.overflowClip,
   )
 
   useOverlayFocusContain()
@@ -57,7 +57,7 @@ function isWindowDefined() {
 
 export function useWindowWidth() {
   const [width, setWidth] = React.useState(
-    isWindowDefined() ? window.innerWidth : null
+    isWindowDefined() ? window.innerWidth : null,
   )
   React.useEffect(() => {
     const handleResize = () => {

package/src/components/MultiSelect/context.ts

@@ -17,7 +17,7 @@ export const MultiSelectGroupContext = createContext<MultiSelectGroupContext>({
   invalid: false,
   onChange() {
     throw new Error(
-      'Cannot find `onChange()` handler. Perhaps you forgot to wrap it with `<MultiSelectGroup />` ?'
+      'Cannot find `onChange()` handler. Perhaps you forgot to wrap it with `<MultiSelectGroup />` ?',
     )
   },
 })

package/src/components/MultiSelect/index.css

@@ -45,7 +45,9 @@
   margin: 0;
   background-color: var(--charcoal-text3);
   border-radius: 999999px;
-  transition: 0.2s background-color, 0.2s box-shadow;
+  transition:
+    0.2s background-color,
+    0.2s box-shadow;
 }
 
 .charcoal-multi-select-input[type='checkbox']:checked {

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

@@ -19,8 +19,8 @@ describe('MultiSelect', () => {
         // eslint-disable-next-line no-console
         expect(console.error).toHaveBeenCalledWith(
           expect.stringMatching(
-            /Perhaps you forgot to wrap with <MultiSelectGroup>/u
-          )
+            /Perhaps you forgot to wrap with <MultiSelectGroup>/u,
+          ),
         )
       })
     })
@@ -41,7 +41,7 @@ describe('MultiSelect', () => {
           selected={[]}
           childOnChange={childOnChange}
           parentOnChange={parentOnChange}
-        />
+        />,
       )
 
       option1 = screen.getByDisplayValue('option1')
@@ -92,7 +92,7 @@ describe('MultiSelect', () => {
           selected={['option2']}
           childOnChange={childOnChange}
           parentOnChange={parentOnChange}
-        />
+        />,
       )
 
       option1 = screen.getByDisplayValue('option1')
@@ -103,7 +103,7 @@ describe('MultiSelect', () => {
     it('only option2 is selected', () => {
       expect(option2.checked).toBeTruthy()
       ;[option1, option3].forEach((element) =>
-        expect(element.checked).toBeFalsy()
+        expect(element.checked).toBeFalsy(),
       )
     })
 
@@ -187,7 +187,7 @@ describe('MultiSelect', () => {
 
     it('all the options have `aria-invalid="true"`', () => {
       allOptions.forEach((element) =>
-        expect(element.getAttribute('aria-invalid')).toBeTruthy()
+        expect(element.getAttribute('aria-invalid')).toBeTruthy(),
       )
     })
   })

package/src/components/MultiSelect/index.tsx

@@ -25,7 +25,7 @@ const MultiSelect = forwardRef<HTMLInputElement, MultiSelectProps>(
       className,
       children,
     },
-    ref
+    ref,
   ) {
     const {
       name,
@@ -39,7 +39,7 @@ const MultiSelect = forwardRef<HTMLInputElement, MultiSelectProps>(
     warning(
       // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
       name !== undefined,
-      `"name" is not Provided for <MultiSelect>. Perhaps you forgot to wrap with <MultiSelectGroup> ?`
+      `"name" is not Provided for <MultiSelect>. Perhaps you forgot to wrap with <MultiSelectGroup> ?`,
     )
 
     const isSelected = selected.includes(value)
@@ -53,7 +53,7 @@ const MultiSelect = forwardRef<HTMLInputElement, MultiSelectProps>(
         if (onChange) onChange({ value, selected: event.currentTarget.checked })
         parentOnChange({ value, selected: event.currentTarget.checked })
       },
-      [onChange, parentOnChange, value]
+      [onChange, parentOnChange, value],
     )
     const classNames = useClassNames('charcoal-multi-select', className)
     return (
@@ -83,7 +83,7 @@ const MultiSelect = forwardRef<HTMLInputElement, MultiSelectProps>(
         )}
       </label>
     )
-  }
+  },
 )
 
 export default memo(MultiSelect)
@@ -126,7 +126,7 @@ export function MultiSelectGroup({
         }
       }
     },
-    [onChange, selected]
+    [onChange, selected],
   )
 
   return (

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

@@ -37,7 +37,7 @@ export const RadioGroup = forwardRef<HTMLDivElement, RadioGroupProps<string>>(
       'aria-orientation': ariaOrientation = 'vertical',
       ...props
     },
-    ref
+    ref,
   ) {
     const classNames = useClassNames('charcoal-radio-group', props.className)
 
@@ -45,7 +45,7 @@ export const RadioGroup = forwardRef<HTMLDivElement, RadioGroupProps<string>>(
       (next: string) => {
         onChange(next)
       },
-      [onChange]
+      [onChange],
     )
 
     const contextValue = useMemo(
@@ -57,7 +57,7 @@ export const RadioGroup = forwardRef<HTMLDivElement, RadioGroupProps<string>>(
         invalid: invalid ?? false,
         onChange: handleChange,
       }),
-      [disabled, handleChange, invalid, name, readonly, value]
+      [disabled, handleChange, invalid, name, readonly, value],
     )
 
     return (
@@ -76,5 +76,5 @@ export const RadioGroup = forwardRef<HTMLDivElement, RadioGroupProps<string>>(
         </div>
       </RadioGroupContext.Provider>
     )
-  }
+  },
 ) as <Value extends string>(props: RadioGroupProps<Value>) => JSX.Element

package/src/components/Radio/RadioGroupContext.ts

@@ -17,7 +17,7 @@ export const RadioGroupContext = React.createContext<RadioGroupContext>({
   invalid: false,
   onChange() {
     throw new Error(
-      'Cannot find onChange() handler. Perhaps you forgot to wrap with <RadioGroup> ?'
+      'Cannot find onChange() handler. Perhaps you forgot to wrap with <RadioGroup> ?',
     )
   },
 })

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

@@ -11,7 +11,9 @@
   cursor: pointer;
   border-radius: 999999px;
   background-color: var(--charcoal-surface1);
-  transition: 0.2s background-color, 0.2s box-shadow;
+  transition:
+    0.2s background-color,
+    0.2s box-shadow;
 }
 
 .charcoal-radio-input:checked {
@@ -26,7 +28,9 @@
   pointer-events: none;
   background-color: var(--charcoal-text5);
   border-radius: 999999px;
-  transition: 0.2s background-color, 0.2s box-shadow;
+  transition:
+    0.2s background-color,
+    0.2s box-shadow;
 }
 
 .charcoal-radio-input:not(:checked) {

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

@@ -20,7 +20,7 @@ const RadioInput = forwardRef<HTMLInputElement, RadioInputProps>(
         const el = e.currentTarget
         onChange?.(el.value)
       },
-      [onChange]
+      [onChange],
     )
 
     const classNames = useClassNames('charcoal-radio-input', className)
@@ -36,7 +36,7 @@ const RadioInput = forwardRef<HTMLInputElement, RadioInputProps>(
         {...props}
       />
     )
-  }
+  },
 )
 
 export default memo(RadioInput)

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

@@ -20,7 +20,9 @@ describe('Radio', () => {
       it('console.error()', () => {
         // eslint-disable-next-line no-console
         expect(console.error).toHaveBeenCalledWith(
-          expect.stringMatching(/Perhaps you forgot to wrap with <RadioGroup>/u)
+          expect.stringMatching(
+            /Perhaps you forgot to wrap with <RadioGroup>/u,
+          ),
         )
       })
     })