@charcoal-ui/react-sandbox 4.0.1 → 4.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@charcoal-ui/react-sandbox",
-  "version": "4.0.1",
+  "version": "4.2.0",
   "license": "Apache-2.0",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.esm.js",
@@ -21,30 +21,26 @@
     "test": "vitest run --passWithNoTests"
   },
   "devDependencies": {
-    "@charcoal-ui/esbuild-plugin-styled-components": "^4.0.1",
+    "@charcoal-ui/esbuild-plugin-styled-components": "^4.2.0",
     "@storybook/addon-actions": "^7.4.1",
     "@storybook/addon-knobs": "^7.0.2",
     "@storybook/addons": "^7.4.1",
     "@storybook/api": "^7.4.1",
     "@storybook/components": "^7.4.1",
     "@storybook/core-events": "^7.4.1",
-    "@storybook/react": "^7.4.1",
-    "@storybook/theming": "^7.4.1",
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^13.5.0",
-    "@types/jest": "^27.4.0",
-    "@types/jest-axe": "^3.5.3",
-    "@types/react": "^17.0.38",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
     "@types/react-router-dom": "^5.3.3",
     "@types/styled-components": "^5.1.21",
     "@types/warning": "^3.0.0",
     "@vitejs/plugin-react": "^4.3.1",
-    "jest-axe": "^5.0.1",
     "jsdom": "^24.1.0",
     "npm-run-all": "^4.1.5",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-router-dom": "^6.2.1",
     "rimraf": "^3.0.2",
     "styled-components": "^5.3.3",
@@ -54,18 +50,18 @@
     "vitest": "^2.0.2"
   },
   "dependencies": {
-    "@charcoal-ui/foundation": "^4.0.1",
-    "@charcoal-ui/react": "^4.0.1",
-    "@charcoal-ui/styled": "^4.0.1",
-    "@charcoal-ui/theme": "^4.0.1",
-    "@charcoal-ui/utils": "^4.0.1",
+    "@charcoal-ui/foundation": "^4.2.0",
+    "@charcoal-ui/react": "^4.2.0",
+    "@charcoal-ui/styled": "^4.2.0",
+    "@charcoal-ui/theme": "^4.2.0",
+    "@charcoal-ui/utils": "^4.2.0",
     "polished": "^4.1.4",
     "react-spring": "^9.0.0",
     "warning": "^4.0.3"
   },
   "peerDependencies": {
     "react": ">=17.0.0",
-    "react-dom": ">=16.13.1",
+    "react-dom": ">=17.0.0",
     "styled-components": ">=5.1.1"
   },
   "files": [
@@ -80,5 +76,5 @@
     "url": "https://github.com/pixiv/charcoal.git",
     "directory": "packages/react-sandbox"
   },
-  "gitHead": "42466af3a62cb99358f735a2ce16b237591a2579"
+  "gitHead": "45c93231d4b0feffe8f3a6bef2cdab96302c8eb4"
 }

package/src/_lib/ComponentAbstraction.tsx

@@ -18,8 +18,9 @@ export const DefaultLink = React.forwardRef<HTMLAnchorElement, LinkProps>(
   }
 )
 
+type DefaultLinkProps = LinkProps & React.RefAttributes<HTMLAnchorElement>
 export interface Components {
-  Link: React.ComponentType<React.ComponentPropsWithRef<typeof DefaultLink>>
+  Link: React.ComponentType<React.PropsWithoutRef<DefaultLinkProps>>
 }
 
 const DefaultValue: Components = {

package/src/components/Carousel/index.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState, useCallback, useRef } from 'react'
 import * as React from 'react'
-import { animated, useSpring } from 'react-spring'
+import { animated, AnimatedComponent, useSpring } from 'react-spring'
 import styled, { css } from 'styled-components'
 import { useDebounceAnimationState } from '../../foundation/hooks'
 import { passiveEvents, isEdge } from '../../foundation/support'
@@ -281,8 +281,6 @@ export default function Carousel({
   return (
     <Container ref={visibleAreaRef}>
       <ScrollArea
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-expect-error
         ref={ref}
         scrollLeft={styles.scroll}
         onScroll={handleScrollMove}
@@ -360,7 +358,9 @@ const ScrollArea = styled(animated.div)`
   }
 
   scrollbar-width: none;
-`
+` as unknown as React.ComponentType<
+  Omit<React.ComponentProps<AnimatedComponent<'div'>>, 'css'>
+>
 
 const GradientContainer = styled.div<{ fadeInGradient: boolean }>`
   /* NOTE: LeftGradientがはみ出るためhidden */

package/src/components/Filter/index.tsx

@@ -109,7 +109,7 @@ interface ButtonCssProps {
   reactive?: boolean
 }
 
-const buttonCss = css`
+const buttonCss = css<ButtonCssProps>`
   display: block;
   outline: none;
   border: none;
@@ -128,13 +128,13 @@ const buttonCss = css`
     color: ${({ theme }) => theme.color.text2};
   }
 
-  ${({ hover = false }: ButtonCssProps) =>
+  ${({ hover = false }) =>
     hover &&
     css`
       color: ${({ theme }) => theme.color.text2};
     `}
 
-  ${({ active = false }: ButtonCssProps) =>
+  ${({ active = false }) =>
     active &&
     css`
       background-color: ${({ theme }) => theme.color.surface3};
@@ -161,18 +161,19 @@ const padding0Css = css`
   }
 `
 
-const ButtonLike = styled.button`
+const ButtonLike = styled.button<ButtonCssProps>`
   ${buttonCss}
 `
 
-const PlainElement = styled.span`
+const PlainElement = styled.span<ButtonCssProps>`
   ${buttonCss}
 `
 
-const StyledButtonLike = styled(ButtonLike)<{
+type StyledButtonLikeProps = {
   buttonWidth: number | undefined
   buttonHeight: number | undefined
-}>`
+}
+const StyledButtonLike = styled(ButtonLike)<StyledButtonLikeProps>`
   ${padding0Css};
   ${(p) => p.buttonWidth !== undefined && `width: ${p.buttonWidth}px;`}
   ${(p) => p.buttonHeight !== undefined && `height: ${p.buttonHeight}px;`}

package/src/components/HintText/index.tsx

@@ -13,7 +13,10 @@ interface Props {
 
 export default function HintText({ children, context, className }: Props) {
   return (
-    <Container className={className} context={context}>
+    <Container
+      className={className}
+      {...styledProps({ children, context, className })}
+    >
       <IconWrap>
         <InfoIcon />
       </IconWrap>
@@ -22,9 +25,7 @@ export default function HintText({ children, context, className }: Props) {
   )
 }
 
-const Container = styled.div.attrs<Props, ReturnType<typeof styledProps>>(
-  styledProps
-)`
+const Container = styled.div<ReturnType<typeof styledProps>>`
   ${(p) =>
     theme((o) => [
       o.bg.surface3,

package/src/components/Pager/index.tsx

@@ -197,7 +197,7 @@ const PagerContainer = styled.nav`
   align-items: center;
 `
 
-const CircleButton = styled.button`
+const CircleButton = styled.button<{ noBackground?: boolean }>`
   font-size: 1rem;
   line-height: calc(1em + 8px);
   text-decoration: none;
@@ -249,7 +249,7 @@ const CircleButton = styled.button`
     color: ${({ theme }) => theme.color.text5};
   }
 
-  ${({ noBackground = false }: { noBackground?: boolean }) =>
+  ${({ noBackground = false }) =>
     noBackground &&
     css`
       /* stylelint-disable-next-line no-duplicate-selectors */

package/src/components/WithIcon/index.tsx

@@ -103,8 +103,13 @@ const forceCenteringCss = css`
   }
 `
 
-const iconAnchorCss = css`
-  ${(p: { show: boolean | 'collapse'; pre: boolean }) =>
+type IconAnchorProps = {
+  show: boolean | 'collapse'
+  pre: boolean
+}
+
+const iconAnchorCss = css<IconAnchorProps>`
+  ${(p) =>
     p.show === 'collapse'
       ? css`
           display: none;
@@ -122,7 +127,7 @@ const iconAnchorCss = css`
         `}
 `
 
-const IconAnchorNaive = styled.div`
+const IconAnchorNaive = styled.div<IconAnchorProps>`
   display: flex;
   align-items: center;
 

package/src/type.d.ts

@@ -1,6 +1,6 @@
 import { ThemeProp } from '@charcoal-ui/styled'
 import { CharcoalTheme } from '@charcoal-ui/theme'
-import { CSSProp, DefaultTheme } from 'styled-components'
+import type { CSSProp, DefaultTheme } from 'styled-components'
 
 declare module 'react' {
   interface Attributes {