@charcoal-ui/react 3.0.0-beta.2 → 3.0.0-beta.3

package/dist/styled.d.ts

@@ -1,7 +1,7 @@
 export declare const theme: (specFn: (o: Record<string, unknown> & Readonly<{
     bg: Record<string, unknown> & {
-        readonly assertive: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
         readonly border: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
+        readonly assertive: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
         readonly transparent: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
         readonly background1: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
         readonly background2: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
@@ -31,8 +31,8 @@ export declare const theme: (specFn: (o: Record<string, unknown> & Readonly<{
         readonly callToAction: (direction: "to top" | "to bottom" | "to left" | "to right") => import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
     };
     font: {
-        readonly assertive: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
         readonly border: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
+        readonly assertive: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
         readonly transparent: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
         readonly background1: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
         readonly background2: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
@@ -61,35 +61,35 @@ export declare const theme: (specFn: (o: Record<string, unknown> & Readonly<{
 }> & {
     readonly typography: (size: keyof import("@charcoal-ui/theme").Typography) => import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "bold" | "monospace" | "preserveHalfLeading">;
 } & {
-    readonly margin: import("@charcoal-ui/styled/dist/factories/lib").MethodChain<import("@charcoal-ui/styled/dist/internals").Internal, "horizontal" | "vertical" | "all" | "bottom" | "left" | "right" | "top", [0 | "auto" | 4 | 8 | 16 | 24 | 40 | 64 | 104 | 168 | 272 | 440]>;
-    readonly padding: import("@charcoal-ui/styled/dist/factories/lib").MethodChain<import("@charcoal-ui/styled/dist/internals").Internal, "horizontal" | "vertical" | "all" | "bottom" | "left" | "right" | "top", [0 | "auto" | 4 | 8 | 16 | 24 | 40 | 64 | 104 | 168 | 272 | 440]>;
+    readonly margin: import("@charcoal-ui/styled/dist/factories/lib").MethodChain<import("@charcoal-ui/styled/dist/internals").Internal, "horizontal" | "vertical" | "all" | "left" | "right" | "top" | "bottom", [0 | 4 | 8 | 16 | 24 | 40 | 64 | 104 | 168 | 272 | 440 | "auto"]>;
+    readonly padding: import("@charcoal-ui/styled/dist/factories/lib").MethodChain<import("@charcoal-ui/styled/dist/internals").Internal, "horizontal" | "vertical" | "all" | "left" | "right" | "top" | "bottom", [0 | 4 | 8 | 16 | 24 | 40 | 64 | 104 | 168 | 272 | 440 | "auto"]>;
 } & {
-    readonly height: Readonly<{
-        px: (size: 0 | "auto" | 4 | 8 | 16 | 24 | 40 | 64 | 104 | 168 | 272 | 440) => import("@charcoal-ui/styled/dist/internals").Internal;
+    readonly width: Readonly<{
+        px: (size: 0 | 4 | 8 | 16 | 24 | 40 | 64 | 104 | 168 | 272 | 440 | "auto") => import("@charcoal-ui/styled/dist/internals").Internal;
         column: (span: number) => import("@charcoal-ui/styled/dist/internals").Internal;
         auto: import("@charcoal-ui/styled/dist/internals").Internal;
         full: import("@charcoal-ui/styled/dist/internals").Internal;
     }>;
-    readonly width: Readonly<{
-        px: (size: 0 | "auto" | 4 | 8 | 16 | 24 | 40 | 64 | 104 | 168 | 272 | 440) => import("@charcoal-ui/styled/dist/internals").Internal;
+    readonly height: Readonly<{
+        px: (size: 0 | 4 | 8 | 16 | 24 | 40 | 64 | 104 | 168 | 272 | 440 | "auto") => import("@charcoal-ui/styled/dist/internals").Internal;
         column: (span: number) => import("@charcoal-ui/styled/dist/internals").Internal;
         auto: import("@charcoal-ui/styled/dist/internals").Internal;
         full: import("@charcoal-ui/styled/dist/internals").Internal;
     }>;
 } & import("@charcoal-ui/styled/dist/internals").Internal & {
-    readonly hover: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "press" | "disabled">;
-    readonly press: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "disabled">;
+    readonly hover: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "disabled" | "press">;
+    readonly press: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "disabled" | "hover">;
     readonly disabled: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
 } & Readonly<{
     border: {
-        readonly default: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "bottom" | "left" | "right" | "top">;
+        readonly default: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "left" | "right" | "top" | "bottom">;
     };
 }> & Readonly<{
-    borderRadius: (radius: "none" | 4 | 8 | 16 | 24 | "oval") => import("@charcoal-ui/styled/dist/internals").Internal;
+    borderRadius: (radius: 4 | 8 | 16 | 24 | "none" | "oval") => import("@charcoal-ui/styled/dist/internals").Internal;
 }> & Readonly<{
     outline: {
-        readonly assertive: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "focus">;
         readonly default: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "focus">;
+        readonly assertive: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "focus">;
     };
 }>) => import("@charcoal-ui/styled/dist/util").ArrayOrSingle<import("@charcoal-ui/styled/dist/internals").Internal | (false | null | undefined)>) => import("@charcoal-ui/styled").ThemeProp<import("styled-components").DefaultTheme>;
 //# sourceMappingURL=styled.d.ts.map

package/dist/types/CustomJSXElement.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export type CustomJSXElement = keyof JSX.IntrinsicElements | React.JSXElementConstructor<any>;
+//# sourceMappingURL=CustomJSXElement.d.ts.map

package/dist/types/CustomJSXElement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomJSXElement.d.ts","sourceRoot":"","sources":["../../src/types/CustomJSXElement.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,MAAM,MAAM,gBAAgB,GACxB,MAAM,GAAG,CAAC,iBAAiB,GAE3B,KAAK,CAAC,qBAAqB,CAAC,GAAG,CAAC,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@charcoal-ui/react",
-  "version": "3.0.0-beta.2",
+  "version": "3.0.0-beta.3",
   "license": "Apache-2.0",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.esm.js",
@@ -49,10 +49,10 @@
     "typescript": "^4.9.5"
   },
   "dependencies": {
-    "@charcoal-ui/icons": "^3.0.0-beta.2",
-    "@charcoal-ui/styled": "^3.0.0-beta.2",
-    "@charcoal-ui/theme": "^3.0.0-beta.2",
-    "@charcoal-ui/utils": "^3.0.0-beta.2",
+    "@charcoal-ui/icons": "^3.0.0-beta.3",
+    "@charcoal-ui/styled": "^3.0.0-beta.3",
+    "@charcoal-ui/theme": "^3.0.0-beta.3",
+    "@charcoal-ui/utils": "^3.0.0-beta.3",
     "@react-aria/button": "^3.7.0",
     "@react-aria/checkbox": "^3.8.0",
     "@react-aria/dialog": "^3.5.0",
@@ -73,7 +73,7 @@
     "warning": "^4.0.3"
   },
   "peerDependencies": {
-    "react": ">=16.13.1",
+    "react": ">=17.0.0",
     "styled-components": ">=5.1.1"
   },
   "files": [
@@ -88,5 +88,5 @@
     "url": "https://github.com/pixiv/charcoal.git",
     "directory": "packages/react"
   },
-  "gitHead": "dbf33f97e67fc6eabc4283fa38ac9af0b89292f4"
+  "gitHead": "3d302a3e0becea0868d0f020c233ba68fa1d0974"
 }

package/src/_lib/compat.ts

@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 
 /**
  * import { Story } from '@storybook/react/types-6-0'

package/src/components/Button/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,385 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Basic <Button>Hello</Button> 1`] = `
+.c0 {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  background: transparent;
+  padding: 0;
+  border-style: none;
+  outline: none;
+  color: inherit;
+  text-rendering: inherit;
+  -webkit-letter-spacing: inherit;
+  -moz-letter-spacing: inherit;
+  -ms-letter-spacing: inherit;
+  letter-spacing: inherit;
+  word-spacing: inherit;
+  font: inherit;
+  margin: 0;
+  overflow: visible;
+  text-transform: none;
+  cursor: pointer;
+}
+
+.c0:focus {
+  outline: none;
+}
+
+.c0::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+.c0:disabled,
+.c0[aria-disabled]:not([aria-disabled=false]) {
+  cursor: default;
+}
+
+.c1 {
+  width: -webkit-min-content;
+  width: -moz-min-content;
+  width: min-content;
+  display: inline-grid;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  white-space: nowrap;
+  color: var(--charcoal-text2);
+  background-color: var(--charcoal-surface3);
+  font-size: 14px;
+  line-height: 22px;
+  font-weight: bold;
+  padding-right: 24px;
+  padding-left: 24px;
+  border-radius: 999999px;
+  -webkit-transition: 0.2s color,0.2s background-color,0.2s box-shadow;
+  transition: 0.2s color,0.2s background-color,0.2s box-shadow;
+  height: 40px;
+}
+
+.c1:hover:not(:disabled):not([aria-disabled]),
+.c1:hover[aria-disabled=false] {
+  color: var(--charcoal-text2-hover);
+}
+
+.c1:active:not(:disabled):not([aria-disabled]),
+.c1:active[aria-disabled=false] {
+  color: var(--charcoal-text2-press);
+}
+
+.c1:hover:not(:disabled):not([aria-disabled]),
+.c1:hover[aria-disabled=false] {
+  background-color: var(--charcoal-surface3-hover);
+}
+
+.c1:active:not(:disabled):not([aria-disabled]),
+.c1:active[aria-disabled=false] {
+  background-color: var(--charcoal-surface3-press);
+}
+
+.c1:disabled,
+.c1[aria-disabled]:not([aria-disabled=false]) {
+  opacity: 0.32;
+}
+
+.c1:not(:disabled):not([aria-disabled]):focus,
+.c1[aria-disabled=false]:focus,
+.c1:not(:disabled):not([aria-disabled]):active,
+.c1[aria-disabled=false]:active {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
+.c1:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
+.c1[aria-disabled=false]:focus:not(:focus-visible),
+.c1:not(:disabled):not([aria-disabled]):active:not(:focus-visible),
+.c1[aria-disabled=false]:active:not(:focus-visible) {
+  outline: none;
+}
+
+.c1:not(:disabled):not([aria-disabled]):focus-visible,
+.c1[aria-disabled=false]:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
+<button
+  className="c0 c1"
+  disabled={false}
+  height={40}
+  size="M"
+>
+  Hello
+</button>
+`;
+
+exports[`Link <Button to="#">Hello</Button> 1`] = `
+.c0 {
+  color: inherit;
+  cursor: pointer;
+}
+
+.c0:focus {
+  outline: none;
+}
+
+.c0 .text {
+  top: calc(1em + 2em);
+}
+
+.c0:disabled,
+.c0[aria-disabled]:not([aria-disabled=false]) {
+  cursor: default;
+}
+
+.c1 {
+  width: -webkit-min-content;
+  width: -moz-min-content;
+  width: min-content;
+  display: inline-grid;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  white-space: nowrap;
+  color: var(--charcoal-text2);
+  background-color: var(--charcoal-surface3);
+  font-size: 14px;
+  line-height: 22px;
+  font-weight: bold;
+  padding-right: 24px;
+  padding-left: 24px;
+  border-radius: 999999px;
+  -webkit-transition: 0.2s color,0.2s background-color,0.2s box-shadow;
+  transition: 0.2s color,0.2s background-color,0.2s box-shadow;
+  height: 40px;
+}
+
+.c1:hover:not(:disabled):not([aria-disabled]),
+.c1:hover[aria-disabled=false] {
+  color: var(--charcoal-text2-hover);
+}
+
+.c1:active:not(:disabled):not([aria-disabled]),
+.c1:active[aria-disabled=false] {
+  color: var(--charcoal-text2-press);
+}
+
+.c1:hover:not(:disabled):not([aria-disabled]),
+.c1:hover[aria-disabled=false] {
+  background-color: var(--charcoal-surface3-hover);
+}
+
+.c1:active:not(:disabled):not([aria-disabled]),
+.c1:active[aria-disabled=false] {
+  background-color: var(--charcoal-surface3-press);
+}
+
+.c1:disabled,
+.c1[aria-disabled]:not([aria-disabled=false]) {
+  opacity: 0.32;
+}
+
+.c1:not(:disabled):not([aria-disabled]):focus,
+.c1[aria-disabled=false]:focus,
+.c1:not(:disabled):not([aria-disabled]):active,
+.c1[aria-disabled=false]:active {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
+.c1:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
+.c1[aria-disabled=false]:focus:not(:focus-visible),
+.c1:not(:disabled):not([aria-disabled]):active:not(:focus-visible),
+.c1[aria-disabled=false]:active:not(:focus-visible) {
+  outline: none;
+}
+
+.c1:not(:disabled):not([aria-disabled]):focus-visible,
+.c1[aria-disabled=false]:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
+<a
+  aria-disabled={false}
+  background="surface3"
+  className="c0 c1"
+  font="text2"
+  height={40}
+  href="#"
+  padding={24}
+  size="M"
+  theme={
+    Object {
+      "border": Object {
+        "default": Object {
+          "color": "rgba(0,0,0,0.08)",
+        },
+      },
+      "borderRadius": Object {
+        "16": 16,
+        "24": 24,
+        "4": 4,
+        "8": 8,
+        "none": 0,
+        "oval": 999999,
+      },
+      "breakpoint": Object {
+        "screen1": 744,
+        "screen2": 952,
+        "screen3": 1160,
+        "screen4": 1368,
+      },
+      "color": Object {
+        "assertive": "#ff2b00",
+        "background1": "#ffffff",
+        "background2": "#f5f5f5",
+        "border": "rgba(0,0,0,0.08)",
+        "brand": "#0096fa",
+        "icon6": "rgba(255,255,255,0.28)",
+        "link1": "#3d7699",
+        "link2": "rgba(255,255,255,0.36)",
+        "success": "#b1cc29",
+        "surface1": "#ffffff",
+        "surface10": "rgba(0,0,0,0.16)",
+        "surface2": "rgba(0,0,0,0.02)",
+        "surface3": "rgba(0,0,0,0.04)",
+        "surface4": "rgba(0,0,0,0.32)",
+        "surface6": "rgba(0,0,0,0.88)",
+        "surface7": "rgba(0,0,0,0.02)",
+        "surface8": "rgba(0,0,0,0.88)",
+        "surface9": "#ffffff",
+        "text1": "#1f1f1f",
+        "text2": "#474747",
+        "text3": "#858585",
+        "text4": "#adadad",
+        "text5": "#ffffff",
+        "transparent": "rgba(0,0,0,0)",
+        "updatedItem": "rgba(0,150,250,0.04)",
+        "warning": "#ffaf0f",
+      },
+      "effect": Object {
+        "hover": Object {
+          "color": "rgba(0,0,0,0.04)",
+          "type": "alpha",
+        },
+        "press": Object {
+          "color": "rgba(0,0,0,0.16)",
+          "type": "alpha",
+        },
+      },
+      "elementEffect": Object {
+        "disabled": Object {
+          "opacity": 0.32,
+          "type": "opacity",
+        },
+      },
+      "gradientColor": Object {
+        "callToAction": Array [
+          Object {
+            "color": "#d1ff1a",
+            "ratio": 0,
+          },
+          Object {
+            "color": "#1ad1ff",
+            "ratio": 100,
+          },
+        ],
+        "surface5": Array [
+          Object {
+            "color": "rgba(0,0,0,0.32)",
+            "ratio": 0,
+          },
+          Object {
+            "color": "rgba(0,0,0,0)",
+            "ratio": 100,
+          },
+        ],
+      },
+      "grid": Object {
+        "unit": Object {
+          "column": 80,
+          "gutter": 24,
+        },
+      },
+      "outline": Object {
+        "assertive": Object {
+          "color": "rgba(255,43,0,0.32)",
+          "weight": 4,
+        },
+        "default": Object {
+          "color": "rgba(0,150,250,0.32)",
+          "weight": 4,
+        },
+      },
+      "spacing": Object {
+        "0": 0,
+        "104": 104,
+        "16": 16,
+        "168": 168,
+        "24": 24,
+        "272": 272,
+        "4": 4,
+        "40": 40,
+        "440": 440,
+        "64": 64,
+        "8": 8,
+      },
+      "transition": Object {
+        "default": Object {
+          "duration": 0.2,
+        },
+      },
+      "typography": Object {
+        "size": Object {
+          "12": Object {
+            "fontSize": 12,
+            "lineHeight": 20,
+          },
+          "14": Object {
+            "fontSize": 14,
+            "lineHeight": 22,
+          },
+          "16": Object {
+            "fontSize": 16,
+            "lineHeight": 24,
+          },
+          "20": Object {
+            "fontSize": 20,
+            "lineHeight": 28,
+          },
+          "32": Object {
+            "fontSize": 32,
+            "lineHeight": 40,
+          },
+        },
+      },
+    }
+  }
+  variant="Default"
+>
+  Hello
+</a>
+`;

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

@@ -1,5 +1,5 @@
 import { action } from '@storybook/addon-actions'
-import React, { useRef } from 'react'
+import { useRef } from 'react'
 import { Story } from '../../_lib/compat'
 import { ClickableElement } from '../Clickable'
 import Button, { ButtonProps } from '.'

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

@@ -0,0 +1,24 @@
+import 'jest-styled-components'
+
+import Button from '.'
+import renderder from 'react-test-renderer'
+import { ThemeProvider } from 'styled-components'
+import { light } from '@charcoal-ui/theme'
+
+export function render(children: JSX.Element) {
+  return renderder
+    .create(<ThemeProvider theme={light}>{children}</ThemeProvider>)
+    .toJSON()
+}
+
+describe('Basic', () => {
+  test('<Button>Hello</Button>', () => {
+    expect(render(<Button>Hello</Button>)).toMatchSnapshot()
+  })
+})
+
+describe('Link', () => {
+  test('<Button to="#">Hello</Button>', () => {
+    expect(render(<Button to="#">Hello</Button>)).toMatchSnapshot()
+  })
+})

package/src/components/Button/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import { forwardRef } from 'react'
 import styled from 'styled-components'
 import { unreachable } from '../../_lib'
 import { theme } from '../../styled'
@@ -24,7 +24,7 @@ interface StyledProps {
 
 export type ButtonProps = Partial<StyledProps> & ClickableProps
 
-const Button = React.forwardRef<ClickableElement, ButtonProps>(function Button(
+const Button = forwardRef<ClickableElement, ButtonProps>(function Button(
   {
     children,
     variant = 'Default',

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

@@ -1,5 +1,4 @@
 import { action } from '@storybook/addon-actions'
-import React from 'react'
 import Checkbox from '.'
 import { Story } from '../../_lib/compat'
 

package/src/components/Checkbox/index.tsx

@@ -1,4 +1,5 @@
-import React, { forwardRef, memo, useMemo } from 'react'
+import { forwardRef, memo, useMemo } from 'react'
+import * as React from 'react'
 import styled, { css } from 'styled-components'
 import { useCheckbox } from '@react-aria/checkbox'
 import { useObjectRef } from '@react-aria/utils'

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

@@ -1,5 +1,4 @@
 import { action } from '@storybook/addon-actions'
-import React from 'react'
 import Clickable from '.'
 
 export default {

package/src/components/Clickable/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import styled, { css } from 'styled-components'
 import {
   LinkProps,

package/src/components/DropdownSelector/Divider.tsx

@@ -1,5 +1,8 @@
 import styled from 'styled-components'
 
+/**
+ * 水平方向の直線
+ */
 export const Divider = styled.div.attrs({ role: 'separator' })`
   display: flex;
 

package/src/components/DropdownSelector/DropdownMenuItem.tsx

@@ -0,0 +1,40 @@
+import styled from 'styled-components'
+import MenuItem, { MenuItemProps } from './MenuItem'
+import { MenuListContext } from './MenuList/MenuListContext'
+import React, { useContext } from 'react'
+import { theme } from '../../styled'
+import Icon from '../Icon'
+
+export type DropdownMenuItemProps = Omit<MenuItemProps<'div'>, 'as'>
+
+/**
+ * DropdownSelectorの選択肢として使うMenuItem
+ */
+export default function DropdownMenuItem(props: DropdownMenuItemProps) {
+  const { value: ctxValue } = useContext(MenuListContext)
+  const isSelected = props.value === ctxValue
+  const { children, ...rest } = props
+
+  return (
+    <MenuItem {...rest}>
+      {isSelected && <Text2ColorIcon name="16/Check" />}
+      <StyledSpan isSelected={isSelected}>{props.children}</StyledSpan>
+    </MenuItem>
+  )
+}
+
+/**
+ * アイコンがない時を考慮して20px（16pxのwidthと4pxのgap）の余白をとる
+ */
+const StyledSpan = styled.span<{ isSelected?: boolean }>`
+  ${theme((o) => [o.typography(14), o.font.text2])};
+  display: flex;
+  align-items: center;
+  width: 100%;
+  margin-left: ${({ isSelected }) => (isSelected === true ? 0 : 20)}px;
+`
+
+const Text2ColorIcon = styled(Icon)`
+  ${theme((o) => [o.font.text2])}
+  padding-right: 4px;
+`