@charcoal-ui/react 4.0.0-beta.7 → 4.0.0-beta.8

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/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.tsx

@@ -1,6 +1,7 @@
+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'
 
@@ -58,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;
-`