@charcoal-ui/react 4.0.0-beta.1 → 4.0.0-beta.11

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

@@ -5,7 +5,7 @@ import MenuItemGroup from '../MenuItemGroup'
 import { Meta, StoryObj } from '@storybook/react'
 
 export default {
-  title: 'DropdownSelector/MenuList',
+  title: 'react/internals/MenuList',
   component: MenuList,
 } as Meta<typeof MenuList>
 

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

@@ -1,5 +1,6 @@
+import './index.css'
+
 import { useMemo, useRef } from 'react'
-import styled from 'styled-components'
 import { MenuListContext } from './MenuListContext'
 import { getValuesRecursive } from './internals/getValuesRecursive'
 import MenuItem from '../MenuItem'
@@ -18,10 +19,6 @@ export type MenuListProps = {
   onChange?: (v: string) => void
 }
 
-/**
- * 上下キーでフォーカス移動でき、エンターキーで選択できるリストの項目
- * 基本的に`<MenuItem>`, `<MenuGroup>`と合わせて使用する
- */
 export default function MenuList(props: MenuListProps) {
   const root = useRef(null)
   const propsArray = useMemo(
@@ -30,7 +27,7 @@ export default function MenuList(props: MenuListProps) {
   )
 
   return (
-    <StyledUl ref={root}>
+    <ul className="charcoal-menu-list" ref={root}>
       <MenuListContext.Provider
         value={{
           value: props.value ?? '',
@@ -43,11 +40,6 @@ export default function MenuList(props: MenuListProps) {
       >
         {props.children}
       </MenuListContext.Provider>
-    </StyledUl>
+    </ul>
   )
 }
-
-const StyledUl = styled.ul`
-  padding: 0;
-  margin: 0;
-`

package/src/components/DropdownSelector/Popover/__snapshots__/index.story.storyshot

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storybook Tests DropdownSelector/Popover Basic 1`] = `
+exports[`Storybook Tests react/internals/Popover Basic 1`] = `
 <div
   data-dark={false}
 >
@@ -8,7 +8,7 @@ exports[`Storybook Tests DropdownSelector/Popover Basic 1`] = `
     className="charcoal-button"
     onClick={[Function]}
     style={
-      Object {
+      {
         "position": "absolute",
       }
     }
@@ -19,7 +19,7 @@ exports[`Storybook Tests DropdownSelector/Popover Basic 1`] = `
     className="charcoal-button"
     onClick={[Function]}
     style={
-      Object {
+      {
         "position": "absolute",
         "right": 8,
       }
@@ -31,7 +31,7 @@ exports[`Storybook Tests DropdownSelector/Popover Basic 1`] = `
     className="charcoal-button"
     onClick={[Function]}
     style={
-      Object {
+      {
         "bottom": 8,
         "position": "absolute",
       }
@@ -43,7 +43,7 @@ exports[`Storybook Tests DropdownSelector/Popover Basic 1`] = `
     className="charcoal-button"
     onClick={[Function]}
     style={
-      Object {
+      {
         "bottom": 8,
         "position": "absolute",
         "right": 8,

package/src/components/DropdownSelector/Popover/index.css

@@ -0,0 +1,11 @@
+.charcoal-popover {
+  margin: 4px 0;
+  list-style: none;
+  overflow: auto;
+  max-height: inherit;
+  background-color: var(--charcoal-background1);
+  border: solid 1px var(--charcoal-border-default);
+  border-radius: 8px;
+  padding-top: 8px;
+  padding-bottom: 8px;
+}

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

@@ -4,7 +4,7 @@ import Button from '../../Button'
 import { Meta, StoryObj } from '@storybook/react'
 
 export default {
-  title: 'DropdownSelector/Popover',
+  title: 'react/internals/Popover',
   component: Popover,
 } as Meta<typeof Popover>
 

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

@@ -1,7 +1,7 @@
-import { RefObject, useContext, useRef } from 'react'
-import { ReactNode } from 'react'
+import './index.css'
+
+import { RefObject, useContext, useRef, ReactNode } from 'react'
 import { DismissButton, Overlay, usePopover } from '@react-aria/overlays'
-import styled from 'styled-components'
 import { ModalBackgroundContext } from '../../Modal/ModalBackgroundContext'
 import { usePreventScroll } from './usePreventScroll'
 
@@ -59,23 +59,13 @@ export default function Popover(props: PopoverProps) {
           inset: 0,
         }}
       />
-      <DropdownPopoverDiv {...popoverProps} ref={finalPopoverRef}>
+      <div {...popoverProps} ref={finalPopoverRef} className="charcoal-popover">
         <DismissButton onDismiss={() => props.onClose()} />
+        <div tabIndex={0} onFocus={props.onClose} />
         {props.children}
+        <div tabIndex={0} onFocus={props.onClose} />
         <DismissButton onDismiss={() => props.onClose()} />
-      </DropdownPopoverDiv>
+      </div>
     </Overlay>
   )
 }
-
-const DropdownPopoverDiv = styled.div`
-  margin: 4px 0;
-  list-style: none;
-  overflow: auto;
-  max-height: inherit;
-  background-color: var(--charcoal-background1);
-  border: solid 1px var(--charcoal-border-default);
-  border-radius: 8px;
-  padding-top: 8px;
-  padding-bottom: 8px;
-`