Skip to content

Commit 95b5a7e

Browse files
GoldGroove06GoldGroove06
committed
sb styles improved
1 parent bc6a2c9 commit 95b5a7e

File tree

5 files changed

+42
-15
lines changed

5 files changed

+42
-15
lines changed

‎src/core/primitives/Menu/fragments/MenuPrimitiveContent.tsx‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,16 @@ import React, { useEffect, useContext } from 'react';
33
import Floater from '~/core/primitives/Floater';
44
import MenuPrimitiveRootContext from '../contexts/MenuPrimitiveRootContext';
55

6-
const MenuPrimitiveContent = ({ children, className }: any) => {
6+
export type MenuPrimitiveContentProps = {
7+
children: React.ReactNode;
8+
className?: string;
9+
};
10+
11+
const MenuPrimitiveContent = ({ children, className }: MenuPrimitiveContentProps) => {
712
const context = useContext(MenuPrimitiveRootContext);
813
if (!context || !context.isOpen) return null;
9-
const { isOpen, refs, floatingStyles, getFloatingProps, elementsRef, labelsRef, nodeId, isNested } = context;
14+
const { isOpen, refs, floatingStyles, getFloatingProps, elementsRef, labelsRef, nodeId, isNested, floatingContext } = context;
1015
return (
11-
1216
<div
1317
ref={refs.setFloating}
1418
style={floatingStyles}

‎src/core/primitives/Menu/fragments/MenuPrimitiveItem.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,12 @@ import React from 'react';
22
import Floater from '~/core/primitives/Floater';
33
import MenuPrimitiveRootContext from '../contexts/MenuPrimitiveRootContext';
44

5-
const MenuPrimitiveItem = ({ children, className }:any) => {
5+
export type MenuPrimitiveItemProps = {
6+
children: React.ReactNode
7+
className?: string
8+
}
9+
10+
const MenuPrimitiveItem = ({ children, className }: MenuPrimitiveItemProps) => {
611
const context = React.useContext(MenuPrimitiveRootContext);
712
const activeIndex = context?.activeIndex;
813
const { ref, index } = Floater.useListItem();

‎src/core/primitives/Menu/fragments/MenuPrimitiveRoot.tsx‎

Lines changed: 15 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,22 @@
11
import React, { useState, useRef } from 'react';
22
import MenuPrimitiveRootContext from '../contexts/MenuPrimitiveRootContext';
33
import Floater from '~/core/primitives/Floater';
4+
import { useControllableState } from '~/core/hooks/useControllableState';
5+
6+
export type MenuPrimitiveRootProps = {
7+
children: React.ReactNode
8+
className?: string
9+
open?: boolean
10+
onOpenChange?: (open: boolean) => void
11+
defaultOpen?: boolean
12+
}
13+
const MenuPrimitiveRoot = ({ children, className, open, onOpenChange, defaultOpen = false }: MenuPrimitiveRootProps) => {
14+
const [isOpen, setIsOpen] = useControllableState(
15+
open,
16+
defaultOpen,
17+
onOpenChange
18+
);
419

5-
const MenuPrimitiveRoot = ({ children, className }: any) => {
6-
const [isOpen, setIsOpen] = useState(false);
720
const [activeIndex, setActiveIndex] = useState<number | null>(null);
821

922
const listRef = useRef([]);
@@ -24,9 +37,7 @@ const MenuPrimitiveRoot = ({ children, className }: any) => {
2437
const listNavigation = Floater.useListNavigation(floatingContext, {
2538
listRef: elementsRef,
2639
activeIndex,
27-
virtualItemRef,
2840
nested: isNested,
29-
3041
onNavigate: setActiveIndex
3142
});
3243
const click = Floater.useClick(floatingContext);

‎src/core/primitives/Menu/fragments/MenuPrimitiveTrigger.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,12 @@ import React, { useState, useContext } from 'react';
22
import Floater from '~/core/primitives/Floater';
33
import MenuPrimitiveRootContext from '../contexts/MenuPrimitiveRootContext';
44

5-
const MenuPrimitiveTrigger = ({ children, className }:any) => {
5+
export type MenuPrimitiveTriggerProps = {
6+
children: React.ReactNode
7+
className?: string
8+
}
9+
10+
const MenuPrimitiveTrigger = ({ children, className }: MenuPrimitiveTriggerProps) => {
611
const context = useContext(MenuPrimitiveRootContext);
712
if (!context) return null;
813
const { isOpen, setIsOpen, activeIndex, refs, floatingStyles, getReferenceProps, isNested } = context;

‎src/core/primitives/Menu/stories/MenuPrimitive.stories.tsx‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -15,27 +15,29 @@ export const Basic: Story = {
1515
render: () => (
1616
<SandboxEditor>
1717
<MenuPrimitive.Root>
18-
<MenuPrimitive.Trigger className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400">Trigger</MenuPrimitive.Trigger>
19-
<MenuPrimitive.Content className="flex flex-col mt-2 bg-white border border-gray-200 rounded shadow-lg min-w-[180px]">
18+
<MenuPrimitive.Trigger className="px-4 py-2 bg-blue-900 text-white rounded hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400">Trigger</MenuPrimitive.Trigger>
19+
<MenuPrimitive.Content className="flex flex-col mt-2 bg-gray-1000 border border-gray-200 rounded shadow-lg min-w-[180px]">
2020
<MenuPrimitive.Item className="px-4 py-2 hover:bg-gray-100 cursor-pointer rounded">item 1</MenuPrimitive.Item>
2121
<MenuPrimitive.Item className="px-4 py-2 hover:bg-gray-100 cursor-pointer rounded">item 1</MenuPrimitive.Item>
2222
<MenuPrimitive.Item className="px-4 py-2 hover:bg-gray-100 cursor-pointer rounded">item 1</MenuPrimitive.Item>
23-
<MenuPrimitive.Root>
23+
<MenuPrimitive.Root className="flex flex-col">
2424
<MenuPrimitive.Trigger className="px-4 py-2 hover:bg-gray-100 cursor-pointer rounded">Trigger</MenuPrimitive.Trigger>
25-
<MenuPrimitive.Content className="flex flex-col mt-2 bg-gray-50 border border-gray-200 rounded shadow min-w-[160px]">
25+
<MenuPrimitive.Content className="flex flex-col mt-2 bg-gray-1000 border border-gray-200 rounded shadow min-w-[160px]">
2626
<MenuPrimitive.Item className="px-4 py-2 hover:bg-gray-100 cursor-pointer rounded">item 1</MenuPrimitive.Item>
2727
<MenuPrimitive.Item className="px-4 py-2 hover:bg-gray-100 cursor-pointer rounded">item 1</MenuPrimitive.Item>
2828
<MenuPrimitive.Item className="px-4 py-2 hover:bg-gray-100 cursor-pointer rounded">item 1</MenuPrimitive.Item>
29-
<MenuPrimitive.Root>
29+
<MenuPrimitive.Root className="flex flex-col">
3030
<MenuPrimitive.Trigger className="px-4 py-2 hover:bg-gray-100 cursor-pointer rounded">Trigger</MenuPrimitive.Trigger>
31-
<MenuPrimitive.Content className="flex flex-col mt-2 bg-gray-100 border border-gray-200 rounded shadow min-w-[140px]">
31+
<MenuPrimitive.Content className="flex flex-col mt-2 bg-gray-1000 border border-gray-200 rounded shadow min-w-[140px]">
3232
<MenuPrimitive.Item className="px-4 py-2 hover:bg-gray-200 cursor-pointer rounded">item 1</MenuPrimitive.Item>
3333
<MenuPrimitive.Item className="px-4 py-2 hover:bg-gray-200 cursor-pointer rounded">item 1</MenuPrimitive.Item>
3434
<MenuPrimitive.Item className="px-4 py-2 hover:bg-gray-200 cursor-pointer rounded">item 1</MenuPrimitive.Item>
3535
</MenuPrimitive.Content>
3636
</MenuPrimitive.Root>
3737
</MenuPrimitive.Content>
3838
</MenuPrimitive.Root>
39+
<MenuPrimitive.Item className="px-4 py-2 hover:bg-gray-100 cursor-pointer rounded">item 1</MenuPrimitive.Item>
40+
<MenuPrimitive.Item className="px-4 py-2 hover:bg-gray-100 cursor-pointer rounded">item 1</MenuPrimitive.Item>
3941
</MenuPrimitive.Content>
4042
</MenuPrimitive.Root>
4143
</SandboxEditor>

0 commit comments

Comments
 (0)