@charcoal-ui/react 2.2.1 → 2.4.0

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

@@ -1,5 +1,5 @@
 import { action } from '@storybook/addon-actions'
-import React from 'react'
+import React, { useState } from 'react'
 import DropdownSelector, {
   DropdownSelectorItem,
   DropdownSelectorProps,
@@ -18,16 +18,18 @@ type Props = Omit<
 >
 export const Default: Story<Props> = (props) => {
   return (
-    <DropdownSelector
-      {...props}
-      placeholder={props.placeholder ?? 'Drop Down menu'}
-      onChange={action('change')}
-      onOpenChange={action('open')}
-    >
-      <DropdownSelectorItem key="k:1">選択肢1</DropdownSelectorItem>
-      <DropdownSelectorItem key="k:2">選択肢2</DropdownSelectorItem>
-      <DropdownSelectorItem key="k:3">選択肢3</DropdownSelectorItem>
-    </DropdownSelector>
+    <div style={{ width: 288 }}>
+      <DropdownSelector
+        {...props}
+        placeholder={props.placeholder ?? 'Drop Down menu'}
+        onChange={action('change')}
+        onOpenChange={action('open')}
+      >
+        <DropdownSelectorItem key="k:1">選択肢1</DropdownSelectorItem>
+        <DropdownSelectorItem key="k:2">選択肢2</DropdownSelectorItem>
+        <DropdownSelectorItem key="k:3">選択肢3</DropdownSelectorItem>
+      </DropdownSelector>
+    </div>
   )
 }
 Default.args = {
@@ -39,6 +41,76 @@ Default.args = {
   disabled: false,
 }
 
+export const Multiple: Story<DropdownSelectorProps> = (props) => {
+  return (
+    <div>
+      <DropdownSelector
+        {...props}
+        placeholder={'Drop Down menu'}
+        onChange={action('change')}
+        onOpenChange={action('open')}
+      >
+        <DropdownSelectorItem key="1">選択肢1</DropdownSelectorItem>
+        <DropdownSelectorItem key="2">選択肢2</DropdownSelectorItem>
+        <DropdownSelectorItem key="3">選択肢3</DropdownSelectorItem>
+      </DropdownSelector>
+      <DropdownSelector
+        {...props}
+        placeholder={'Drop Down menu'}
+        onChange={action('change')}
+        onOpenChange={action('open')}
+      >
+        <DropdownSelectorItem key="1">選択肢1</DropdownSelectorItem>
+        <DropdownSelectorItem key="2">選択肢2</DropdownSelectorItem>
+        <DropdownSelectorItem key="3">選択肢3</DropdownSelectorItem>
+      </DropdownSelector>
+    </div>
+  )
+}
+
+export const Bottom: Story<DropdownSelectorProps> = (props) => {
+  return (
+    <div style={{ marginTop: '1000px' }}>
+      <DropdownSelector
+        {...props}
+        placeholder={'Drop Down menu'}
+        onChange={action('change')}
+        onOpenChange={action('open')}
+      >
+        <DropdownSelectorItem key="1">選択肢1</DropdownSelectorItem>
+        <DropdownSelectorItem key="2">選択肢2</DropdownSelectorItem>
+        <DropdownSelectorItem key="3">選択肢3</DropdownSelectorItem>
+      </DropdownSelector>
+    </div>
+  )
+}
+
+export const Many: Story<DropdownSelectorProps> = (props) => {
+  const [value, setValue] = useState('50')
+  return (
+    <div style={{ padding: '300px 100px' }}>
+      <DropdownSelector
+        {...props}
+        placeholder={'Drop Down menu'}
+        onChange={(v) => {
+          setValue(v.toString())
+          action('change')
+        }}
+        onOpenChange={action('open')}
+        value={value}
+      >
+        {[...(Array(100) as undefined[])].map((_, i) => {
+          return (
+            <DropdownSelectorItem textValue={i.toString()} key={i}>
+              選択肢{i}
+            </DropdownSelectorItem>
+          )
+        })}
+      </DropdownSelector>
+    </div>
+  )
+}
+
 type HasLabelProps = {
   disabled?: boolean
 }
@@ -52,17 +124,19 @@ export const HasLabel: Story<HasLabelProps> = ({ disabled }) => {
     assertiveText: 'Hint',
   }
   return (
-    <DropdownSelector
-      {...defaultProps}
-      disabled={disabled}
-      placeholder={'Drop Down menu'}
-      onChange={action('change')}
-      onOpenChange={action('open')}
-    >
-      <DropdownSelectorItem key="1">選択肢1</DropdownSelectorItem>
-      <DropdownSelectorItem key="2">選択肢2</DropdownSelectorItem>
-      <DropdownSelectorItem key="3">選択肢3</DropdownSelectorItem>
-    </DropdownSelector>
+    <div style={{ width: 288 }}>
+      <DropdownSelector
+        {...defaultProps}
+        disabled={disabled}
+        placeholder={'Drop Down menu'}
+        onChange={action('change')}
+        onOpenChange={action('open')}
+      >
+        <DropdownSelectorItem key="1">選択肢1</DropdownSelectorItem>
+        <DropdownSelectorItem key="2">選択肢2</DropdownSelectorItem>
+        <DropdownSelectorItem key="3">選択肢3</DropdownSelectorItem>
+      </DropdownSelector>
+    </div>
   )
 }
 
@@ -86,18 +160,20 @@ export const WithSeparator: Story<WithSeparatorProps> = ({
     assertiveText: 'Hint',
   }
   return (
-    <DropdownSelector
-      {...defaultProps}
-      mode={mode}
-      placeholder={'Drop Down menu'}
-      onChange={action('change')}
-      onOpenChange={action('open')}
-      {...props}
-    >
-      <DropdownSelectorItem key="1">選択肢1</DropdownSelectorItem>
-      <DropdownSelectorItem key="2">選択肢2</DropdownSelectorItem>
-      <DropdownSelectorItem key="3">選択肢3</DropdownSelectorItem>
-    </DropdownSelector>
+    <div style={{ width: 288 }}>
+      <DropdownSelector
+        {...defaultProps}
+        mode={mode}
+        placeholder={'Drop Down menu'}
+        onChange={action('change')}
+        onOpenChange={action('open')}
+        {...props}
+      >
+        <DropdownSelectorItem key="1">選択肢1</DropdownSelectorItem>
+        <DropdownSelectorItem key="2">選択肢2</DropdownSelectorItem>
+        <DropdownSelectorItem key="3">選択肢3</DropdownSelectorItem>
+      </DropdownSelector>
+    </div>
   )
 }
 
@@ -115,17 +191,19 @@ export const Invalid: Story<InvalidProps> = ({ disabled }) => {
     invalid: true,
   }
   return (
-    <DropdownSelector
-      {...props}
-      disabled={disabled}
-      placeholder={'Drop Down menu'}
-      onChange={action('change')}
-      onOpenChange={action('open')}
-    >
-      <DropdownSelectorItem key="1">選択肢1</DropdownSelectorItem>
-      <DropdownSelectorItem key="2">選択肢2</DropdownSelectorItem>
-      <DropdownSelectorItem key="3">選択肢3</DropdownSelectorItem>
-    </DropdownSelector>
+    <div style={{ width: 288 }}>
+      <DropdownSelector
+        {...props}
+        disabled={disabled}
+        placeholder={'Drop Down menu'}
+        onChange={action('change')}
+        onOpenChange={action('open')}
+      >
+        <DropdownSelectorItem key="1">選択肢1</DropdownSelectorItem>
+        <DropdownSelectorItem key="2">選択肢2</DropdownSelectorItem>
+        <DropdownSelectorItem key="3">選択肢3</DropdownSelectorItem>
+      </DropdownSelector>
+    </div>
   )
 }
 

package/src/components/DropdownSelector/index.tsx

@@ -7,13 +7,13 @@ import { useSelect, HiddenSelect } from '@react-aria/select'
 import { useButton } from '@react-aria/button'
 import { SelectProps } from '@react-types/select'
 import Listbox, { ListboxProps } from './Listbox'
-import Popover from './Popover'
 import Icon from '../Icon'
 import FieldLabel from '../FieldLabel'
 import { theme } from '../../styled'
 
 import type { CollectionBase } from '@react-types/shared'
 import type { ReactNode } from 'react'
+import { DropdownPopover } from './DropdownPopover'
 
 type LabelProps = {
   readonly showLabel?: boolean
@@ -124,7 +124,11 @@ const DropdownSelector = <T extends Record<string, unknown>>({
           <DropdownButtonIcon name="16/Menu" />
         </DropdownButton>
         {state.isOpen && (
-          <DropdownPopover open={state.isOpen} onClose={() => state.close()}>
+          <DropdownPopover
+            state={state}
+            triggerRef={triggerRef}
+            value={props.value ?? props.defaultValue}
+          >
             <Listbox {...menuProps} state={state} mode={mode} />
           </DropdownPopover>
         )}
@@ -148,6 +152,7 @@ export const DropdownSelectorItem = Item
 const DropdownSelectorRoot = styled.div`
   position: relative;
   display: inline-block;
+  width: 100%;
 
   ${disabledSelector} {
     cursor: default;
@@ -171,7 +176,7 @@ const DropdownButton = styled.button<{ invalid: boolean }>`
   align-items: center;
 
   height: 40px;
-  width: 288px;
+  width: 100%;
   box-sizing: border-box;
   cursor: pointer;
 
@@ -208,11 +213,3 @@ const AssertiveText = styled.div<{ invalid: boolean }>`
       invalid ? o.font.assertive : o.font.text2,
     ])}
 `
-
-const DropdownPopover = styled(Popover)`
-  position: absolute;
-  width: 100%;
-
-  top: 100%;
-  margin-top: 2px;
-`

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,

package/dist/components/DropdownSelector/Popover.d.ts

@@ -1,10 +0,0 @@
-import React, { PropsWithChildren, CSSProperties } from 'react';
-declare type Props = PropsWithChildren<{
-    open?: boolean;
-    onClose?: () => void;
-    style?: CSSProperties;
-    className?: string;
-}>;
-declare const _default: React.NamedExoticComponent<Props>;
-export default _default;
-//# sourceMappingURL=Popover.d.ts.map

package/dist/components/DropdownSelector/Popover.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../../../src/components/DropdownSelector/Popover.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAIZ,iBAAiB,EAEjB,aAAa,EACd,MAAM,OAAO,CAAA;AAGd,aAAK,KAAK,GAAG,iBAAiB,CAAC;IAC7B,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,KAAK,CAAC,EAAE,aAAa,CAAA;IACrB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAC,CAAA;;AA4BF,wBAA4B"}