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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@charcoal-ui/react",
-  "version": "5.0.0-beta.2",
+  "version": "5.0.0-beta.4",
   "license": "Apache-2.0",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -26,7 +26,6 @@
     "*.css"
   ],
   "devDependencies": {
-    "@babel/core": "^7.23.9",
     "@react-types/dialog": "^3.5.15",
     "@react-types/switch": "^3.1.2",
     "@storybook/addon-actions": "^8.0.5",
@@ -42,15 +41,9 @@
     "@vitejs/plugin-react": "^4.3.1",
     "autoprefixer": "^10.4.19",
     "jsdom": "^24.1.0",
-    "npm-run-all": "^4.1.5",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-router-dom": "^6.2.1",
-    "rimraf": "^3.0.2",
-    "tsup": "^6.5.0",
-    "typescript": "^4.9.5",
-    "vitest": "^2.0.1",
-    "@charcoal-ui/esbuild-plugin-styled-components": "5.0.0-beta.2"
+    "react-router-dom": "^6.2.1"
   },
   "dependencies": {
     "@react-aria/button": "^3.9.1",
@@ -68,14 +61,13 @@
     "react-spring": "^9.0.0",
     "react-stately": "^3.26.0",
     "warning": "^4.0.3",
-    "@charcoal-ui/foundation": "5.0.0-beta.2",
-    "@charcoal-ui/icons": "5.0.0-beta.2",
-    "@charcoal-ui/theme": "5.0.0-beta.2",
-    "@charcoal-ui/utils": "5.0.0-beta.2"
+    "@charcoal-ui/icons": "5.0.0-beta.4",
+    "@charcoal-ui/foundation": "5.0.0-beta.4",
+    "@charcoal-ui/theme": "5.0.0-beta.4",
+    "@charcoal-ui/utils": "5.0.0-beta.4"
   },
   "peerDependencies": {
-    "react": ">=17.0.0",
-    "styled-components": ">=5.1.1"
+    "react": ">=17.0.0"
   },
   "files": [
     "src",
@@ -91,9 +83,8 @@
   },
   "gitHead": "e1ece2e43901ae667afdd5c178040607d939dcd5",
   "scripts": {
-    "build": "run-p --print-label 'build:*'",
+    "build": "run-s --print-label 'build:*'",
     "build:tsdown": "tsdown",
-    "build-old:tsup": "tsup",
     "build:dts": "tsc --project tsconfig.build.json --pretty --emitDeclarationOnly",
     "typecheck": "tsc --project tsconfig.build.json --pretty --noEmit",
     "clean": "rimraf dist .tsbuildinfo",

package/src/_lib/useForwardedRef.tsx

@@ -8,6 +8,7 @@ export function useForwardedRef<T>(ref: React.ForwardedRef<T>) {
     if (typeof ref === 'function') {
       ref(innerRef.current)
     } else {
+      // eslint-disable-next-line react-compiler/react-compiler
       ref.current = innerRef.current
     }
   })

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

@@ -143,23 +143,23 @@ export const AriaDisabled: StoryObj<typeof Button> = {
       <h2>{`disabled={true}`}</h2>
       <div style={{ display: 'flex', gap: '8px' }}>
         <div>
-          <Button disabled={true}>属性なし</Button>
+          <Button disabled>属性なし</Button>
         </div>
         <div>
-          <Button aria-disabled disabled={true}>
+          <Button aria-disabled disabled>
             aria-disabled
           </Button>
         </div>
         <div>
           <Button
             aria-disabled="true"
-            disabled={true}
+            disabled
           >{`aria-disabled="true"`}</Button>
         </div>
         <div>
           <Button
             aria-disabled="false"
-            disabled={true}
+            disabled
           >{`aria-disabled="false"`}</Button>
         </div>
       </div>

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

@@ -27,7 +27,7 @@ export default function DropdownMenuItem(props: DropdownMenuItemProps) {
         className="charcoal-dropdown-selector-menu-item"
         data-selected={isSelected}
       >
-        {props.children}
+        {children}
       </span>
     </MenuItem>
   )

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

@@ -19,7 +19,7 @@ const ListItem = forwardRef(function ListItem<T extends React.ElementType>(
 ) {
   const Component = useMemo(() => as ?? 'li', [as])
   const classNames = useClassNames('charcoal-list-item', className)
-  return <Component className={classNames} ref={ref} {...props}></Component>
+  return <Component className={classNames} ref={ref} {...props} />
 }) as <T extends React.ElementType = 'li'>(p: ListItemProps<T>) => JSX.Element
 
 export default ListItem

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

@@ -14,11 +14,12 @@ export type MenuItemProps<T extends React.ElementType = 'li'> = {
 const MenuItem = forwardRef(function MenuItem<
   T extends React.ElementType = 'li'
 >(
-  { className, value, disabled, ...props }: MenuItemProps<T>,
+  { className: _, value, disabled, ...props }: MenuItemProps<T>,
   ref: ForwardedRef<HTMLLIElement>
 ) {
   const [handleKeyDown, setContextValue] = useMenuItemHandleKeyDown(value)
   return (
+    // @ts-expect-error TODO: fix mismatch between MenuItemProps and ListItemProps
     <ListItem
       {...props}
       ref={ref}

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

@@ -9,6 +9,7 @@ export function usePreventScroll(
     if (isOpen && element) {
       const defaultPaddingRight = element.style.paddingRight
       const defaultOverflow = element.style.overflow
+      // eslint-disable-next-line react-compiler/react-compiler
       element.style.paddingRight = `${
         window.innerWidth - element.clientWidth
       }px`

package/src/components/DropdownSelector/index.tsx

@@ -95,6 +95,7 @@ export default function DropdownSelector({
           })}
         </select>
       </div>
+      {/* eslint-disable-next-line jsx-a11y/role-supports-aria-props */}
       <button
         className="charcoal-dropdown-selector-button"
         aria-labelledby={labelId}

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

@@ -68,7 +68,7 @@ const M = (props: ModalProps) => {
             possimus fugiat aspernatur, numquam, commodi repellat.
           </StyledModalText>
           <ModalAlign>
-            <TextField showLabel label="Name" placeholder="Nagisa"></TextField>
+            <TextField showLabel label="Name" placeholder="Nagisa" />
           </ModalAlign>
           <ModalAlign>
             <TextField
@@ -76,7 +76,7 @@ const M = (props: ModalProps) => {
               showLabel
               label="Country"
               placeholder="Tokyo"
-            ></TextField>
+            />
           </ModalAlign>
           <ModalAlign>
             <DropdownSelector
@@ -161,18 +161,10 @@ export const FullBottomSheet: StoryObj<typeof Modal> = {
                 possimus fugiat aspernatur, numquam, commodi repellat.
               </StyledModalText>
               <ModalAlign>
-                <TextField
-                  showLabel
-                  label="Name"
-                  placeholder="Nagisa"
-                ></TextField>
+                <TextField showLabel label="Name" placeholder="Nagisa" />
               </ModalAlign>
               <ModalAlign>
-                <TextField
-                  showLabel
-                  label="Country"
-                  placeholder="Tokyo"
-                ></TextField>
+                <TextField showLabel label="Country" placeholder="Tokyo" />
               </ModalAlign>
             </ModalVStack>
             <ModalButtons>

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

@@ -137,7 +137,7 @@ describe('MultiSelect', () => {
     let allOptions: HTMLInputElement[]
 
     beforeEach(() => {
-      render(<TestComponent selected={['option1']} parentDisabled={true} />)
+      render(<TestComponent selected={['option1']} parentDisabled />)
 
       option1 = screen.getByDisplayValue('option1')
       option2 = screen.getByDisplayValue('option2')
@@ -157,7 +157,7 @@ describe('MultiSelect', () => {
     let allOptions: HTMLInputElement[]
 
     beforeEach(() => {
-      render(<TestComponent selected={['option1']} readonly={true} />)
+      render(<TestComponent selected={['option1']} readonly />)
 
       option1 = screen.getByDisplayValue('option1')
       option2 = screen.getByDisplayValue('option2')
@@ -177,7 +177,7 @@ describe('MultiSelect', () => {
     let allOptions: HTMLInputElement[]
 
     beforeEach(() => {
-      render(<TestComponent selected={['option1']} invalid={true} />)
+      render(<TestComponent selected={['option1']} invalid />)
 
       option1 = screen.getByDisplayValue('option1')
       option2 = screen.getByDisplayValue('option2')
@@ -197,7 +197,7 @@ describe('MultiSelect', () => {
     let option2: HTMLInputElement
 
     beforeEach(() => {
-      render(<TestComponent selected={[]} firstOptionDisabled={true} />)
+      render(<TestComponent selected={[]} firstOptionDisabled />)
 
       option1 = screen.getByDisplayValue('option1')
       option2 = screen.getByDisplayValue('option2')

package/src/components/MultiSelect/index.tsx

@@ -74,7 +74,7 @@ const MultiSelect = forwardRef<HTMLInputElement, MultiSelectProps>(
           className="charcoal-multi-select-overlay"
           data-overlay={variant === 'overlay'}
           aria-invalid={invalid}
-          aria-hidden={true}
+          aria-hidden
         >
           <Icon name="24/Check" unsafe-non-guideline-scale={16 / 24} />
         </div>

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

@@ -26,6 +26,7 @@ const RadioInput = forwardRef<HTMLInputElement, RadioInputProps>(
     const classNames = useClassNames('charcoal-radio-input', className)
 
     return (
+      // eslint-disable-next-line jsx-a11y/role-supports-aria-props
       <input
         className={classNames}
         ref={ref}

package/src/components/TagItem/index.tsx

@@ -5,9 +5,9 @@ import { useClassNames } from '../../_lib/useClassNames'
 
 import './index.css'
 
-const sizeMap = {
-  S: 32,
-  M: 40,
+type SizeMap = {
+  S: 32
+  M: 40
 }
 
 export type TagItemProps<T extends React.ElementType = 'button'> = {
@@ -16,7 +16,7 @@ export type TagItemProps<T extends React.ElementType = 'button'> = {
   bgColor?: string
   bgImage?: string
   status?: 'default' | 'active' | 'inactive'
-  size?: keyof typeof sizeMap
+  size?: keyof SizeMap
   /**
    * The component used for root element.
    * @type T extends React.ElementType = 'button'