@charcoal-ui/react 2.2.0 → 2.3.0

package/dist/styled.d.ts

@@ -61,8 +61,8 @@ export declare const theme: (spec: (o: Record<string, unknown> & Readonly<{
 }> & {
     readonly typography: (size: keyof import("@charcoal-ui/theme").Typography) => import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, "bold" | "monospace" | "preserveHalfLeading">;
 } & {
-    readonly margin: import("@charcoal-ui/styled").ModifiedArgumented<import("@charcoal-ui/styled").Internal, "horizontal" | "vertical" | "all" | "left" | "right" | "top" | "bottom", [0 | "auto" | 4 | 8 | 16 | 24 | 40 | 64 | 104 | 168 | 272 | 440]>;
-    readonly padding: import("@charcoal-ui/styled").ModifiedArgumented<import("@charcoal-ui/styled").Internal, "horizontal" | "vertical" | "all" | "left" | "right" | "top" | "bottom", [0 | "auto" | 4 | 8 | 16 | 24 | 40 | 64 | 104 | 168 | 272 | 440]>;
+    readonly margin: import("@charcoal-ui/styled").ModifiedArgumented<import("@charcoal-ui/styled").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").ModifiedArgumented<import("@charcoal-ui/styled").Internal, "horizontal" | "vertical" | "all" | "bottom" | "left" | "right" | "top", [0 | "auto" | 4 | 8 | 16 | 24 | 40 | 64 | 104 | 168 | 272 | 440]>;
 } & {
     readonly width: Readonly<{
         px: (size: 0 | "auto" | 4 | 8 | 16 | 24 | 40 | 64 | 104 | 168 | 272 | 440) => import("@charcoal-ui/styled").Internal;
@@ -80,7 +80,7 @@ export declare const theme: (spec: (o: Record<string, unknown> & Readonly<{
     readonly disabled: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, never>;
 } & Readonly<{
     border: {
-        readonly default: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, "left" | "right" | "top" | "bottom">;
+        readonly default: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, "bottom" | "left" | "right" | "top">;
     };
 }> & Readonly<{
     borderRadius: (radius: "none" | 4 | 8 | 16 | 24 | "oval") => import("@charcoal-ui/styled").Internal;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@charcoal-ui/react",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "license": "Apache-2.0",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -50,20 +50,22 @@
     "typescript": "^4.5.5"
   },
   "dependencies": {
-    "@charcoal-ui/icons": "^2.2.0",
-    "@charcoal-ui/styled": "^2.2.0",
-    "@charcoal-ui/theme": "^2.2.0",
-    "@charcoal-ui/utils": "^2.2.0",
+    "@charcoal-ui/icons": "^2.3.0",
+    "@charcoal-ui/styled": "^2.3.0",
+    "@charcoal-ui/theme": "^2.3.0",
+    "@charcoal-ui/utils": "^2.3.0",
     "@react-aria/button": "^3.6.3",
     "@react-aria/checkbox": "^3.2.3",
     "@react-aria/dialog": "^3.2.1",
     "@react-aria/focus": "^3.6.1",
+    "@react-aria/listbox": "^3.7.1",
     "@react-aria/overlays": "^3.12.1",
     "@react-aria/radio": "^3.4.0",
     "@react-aria/select": "^3.8.2",
     "@react-aria/ssr": "^3.3.0",
     "@react-aria/switch": "^3.1.3",
     "@react-aria/textfield": "^3.5.0",
+    "@react-aria/utils": "^3.14.2",
     "@react-aria/visually-hidden": "^3.2.3",
     "polished": "^4.1.4",
     "react-spring": "^9.0.0",
@@ -86,5 +88,5 @@
     "url": "https://github.com/pixiv/charcoal.git",
     "directory": "packages/react"
   },
-  "gitHead": "d68878ef133ffc28dd29e0a7dc497594e71da417"
+  "gitHead": "b6b0cd6117cf288735bdcf167098ace9b28e0072"
 }

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

@@ -18,17 +18,35 @@ type Props = {
 export const Labelled: Story<Props> = (props) => {
   return (
     <div>
-      <Checkbox
-        {...props}
-        name="labelled"
-        label="label"
-        onBlur={action('blur')}
-        onClick={action('click')}
-        onChange={action('change')}
-        onFocus={action('focus')}
-      >
-        同意する
-      </Checkbox>
+      <div style={{ marginBottom: '1em' }}>
+        <Checkbox
+          {...props}
+          name="labelled"
+          label="label"
+          onBlur={action('blur')}
+          onClick={action('click')}
+          onChange={action('change')}
+          onFocus={action('focus')}
+        >
+          同意する
+        </Checkbox>
+      </div>
+
+      <div>
+        <Checkbox
+          {...props}
+          name="labelled"
+          label="label"
+          onBlur={action('blur')}
+          onClick={action('click')}
+          onChange={action('change')}
+          onFocus={action('focus')}
+        >
+          <span style={{ width: 200, display: 'block' }}>
+            同意する同意する同意する同意する同意する同意する同意する同意する同意する同意する同意する同意する同意する
+          </span>
+        </Checkbox>
+      </div>
     </div>
   )
 }

package/src/components/Checkbox/index.tsx

@@ -53,10 +53,12 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
 
     return (
       <InputRoot aria-disabled={isDisabled}>
-        <CheckboxInput type="checkbox" {...inputProps} />
-        <CheckboxInputOverlay aria-hidden={true} checked={inputProps.checked}>
-          <Icon name="24/Check" unsafeNonGuidelineScale={2 / 3} />
-        </CheckboxInputOverlay>
+        <CheckboxRoot>
+          <CheckboxInput type="checkbox" {...inputProps} />
+          <CheckboxInputOverlay aria-hidden={true} checked={inputProps.checked}>
+            <Icon name="24/Check" unsafeNonGuidelineScale={2 / 3} />
+          </CheckboxInputOverlay>
+        </CheckboxRoot>
 
         {'children' in props && <InputLabel>{props.children}</InputLabel>}
       </InputRoot>
@@ -73,7 +75,7 @@ const hiddenCss = css`
 const InputRoot = styled.label`
   position: relative;
   display: flex;
-  align-items: center;
+
   cursor: pointer;
   ${disabledSelector} {
     cursor: default;
@@ -83,6 +85,10 @@ const InputRoot = styled.label`
   ${theme((o) => [o.disabled])}
 `
 
+const CheckboxRoot = styled.div`
+  position: relative;
+`
+
 const CheckboxInput = styled.input`
   &[type='checkbox'] {
     appearance: none;
@@ -118,5 +124,9 @@ const CheckboxInputOverlay = styled.div<{ checked?: boolean }>`
 `
 
 const InputLabel = styled.div`
-  ${theme((o) => [o.typography(14), o.font.text2])}
+  ${theme((o) => [o.font.text2])}
+
+  font-size: 14px;
+  /** checkbox の height が 20px なのでcheckbox と text が揃っているように見せるために行ボックスの高さを 20px にしている */
+  line-height: 20px;
 `

package/src/components/Modal/index.tsx

@@ -4,7 +4,6 @@ import {
   Overlay,
   useModalOverlay,
   useOverlay,
-  usePreventScroll,
 } from '@react-aria/overlays'
 import styled, { css, useTheme } from 'styled-components'
 import { theme } from '../../styled'
@@ -29,8 +28,10 @@ export type ModalProps = AriaModalOverlayProps &
     isOpen: boolean
     onClose: () => void
 
-    // NOTICE: デフォルト値を与えてはならない
-    // （たとえば document.body をデフォルト値にすると SSR できなくなる）
+    /**
+     * https://github.com/adobe/react-spectrum/issues/3787
+     * Next.jsで使用する際に発生するエラーの一時的な回避策でdocument.bodyを指定する必要がある
+     */
     portalContainer?: HTMLElement
   }
 
@@ -39,7 +40,7 @@ const DEFAULT_Z_INDEX = 10
 /**
  * モーダルコンポーネント。
  *
- * @example アプリケーションルートで `<OverlayProvider>` で囲った上で利用する
+ * @example アプリケーションルートで `<OverlayProvider>` ないし `<CharcoalProvider>` で囲った上で利用する
  * ```tsx
  * import {
  *   OverlayProvider,
@@ -78,7 +79,6 @@ export default function Modal({
   const ref = useRef<HTMLDivElement>(null)
   const { overlayProps, underlayProps } = useOverlay(props, ref)
 
-  usePreventScroll()
   const { modalProps } = useModalOverlay(
     props,
     {
@@ -126,7 +126,7 @@ export default function Modal({
   return transition(
     ({ backgroundColor, transform }, item) =>
       item && (
-        <Overlay>
+        <Overlay portalContainer={portalContainer}>
           <ModalBackground
             zIndex={zIndex}
             {...underlayProps}

package/src/components/Switch/index.tsx

@@ -4,7 +4,7 @@ import React, { useRef, useMemo } from 'react'
 import { useToggleState } from 'react-stately'
 import styled from 'styled-components'
 import { theme } from '../../styled'
-import { disabledSelector, px } from '@charcoal-ui/utils'
+import { disabledSelector } from '@charcoal-ui/utils'
 
 export type SwitchProps = {
   name: string
@@ -59,7 +59,6 @@ const Label = styled.label`
   display: inline-grid;
   grid-template-columns: auto 1fr;
   align-items: center;
-  gap: ${({ theme }) => px(theme.spacing[4])};
   cursor: pointer;
   outline: 0;
 
@@ -71,7 +70,11 @@ const Label = styled.label`
 `
 
 const LabelInner = styled.div`
-  ${theme((o) => [o.typography(14), o.font.text2])}
+  ${theme((o) => [
+    o.typography(14).preserveHalfLeading,
+    o.font.text2,
+    o.margin.left(4),
+  ])}
 `
 
 const SwitchInput = styled.input.attrs({
@@ -91,6 +94,7 @@ const SwitchInput = styled.input.attrs({
       o.height.px(16),
       o.bg.text4.hover.press,
       o.outline.default.focus,
+      o.margin.all(0),
     ])}
 
     &::after {

package/src/core/CharcoalProvider.tsx

@@ -0,0 +1,35 @@
+import React from 'react'
+import { ThemeProvider } from 'styled-components'
+import ComponentAbstraction, { Components } from './ComponentAbstraction'
+import { TokenInjector } from '@charcoal-ui/styled'
+import { ThemeMap } from '@charcoal-ui/styled/src/TokenInjector'
+import { CharcoalTheme } from '@charcoal-ui/theme'
+
+import { OverlayProvider } from './OverlayProvider'
+import { SSRProvider } from './SSRProvider'
+
+export type CharcoalProviderProps = React.PropsWithChildren<{
+  themeMap: ThemeMap<CharcoalTheme>
+  defaultTheme?: CharcoalTheme
+  injectTokens?: boolean
+  components?: Partial<Components>
+}>
+
+export function CharcoalProvider({
+  themeMap,
+  defaultTheme = themeMap[':root'],
+  components = {},
+  injectTokens = true,
+  children,
+}: CharcoalProviderProps) {
+  return (
+    <SSRProvider>
+      <ThemeProvider theme={defaultTheme}>
+        {injectTokens && <TokenInjector theme={themeMap} />}
+        <ComponentAbstraction components={components}>
+          <OverlayProvider>{children}</OverlayProvider>
+        </ComponentAbstraction>
+      </ThemeProvider>
+    </SSRProvider>
+  )
+}

package/src/core/ComponentAbstraction.tsx

@@ -17,7 +17,7 @@ export const DefaultLink = React.forwardRef<HTMLAnchorElement, LinkProps>(
   }
 )
 
-interface Components {
+export interface Components {
   Link: React.ComponentType<React.ComponentPropsWithRef<typeof DefaultLink>>
 }
 

package/src/index.ts

@@ -5,6 +5,10 @@ export {
 } from './core/ComponentAbstraction'
 export { SSRProvider } from './core/SSRProvider'
 export { OverlayProvider } from './core/OverlayProvider'
+export {
+  CharcoalProvider,
+  type CharcoalProviderProps,
+} from './core/CharcoalProvider'
 export { default as Button, type ButtonProps } from './components/Button'
 export {
   default as Clickable,