@basic-ui/material 1.0.0-alpha.45 → 1.0.0-alpha.46

package/src/Menu/Menu.story.tsx

@@ -1,54 +1,54 @@
-import { Menu, MenuButton, MenuList, MenuItem, MenuPopover } from '.';
-import { Divider } from '../Divider';
-import { Box } from '../Box';
-// import './styles.css';
-
-export default {
-  title: 'components/Menu',
-};
-
-const MenuUncontrolled = ({ disabled }) => {
-  return (
-    <Box px={5}>
-      <Menu>
-        <MenuButton disabled={disabled}> Click me</MenuButton>
-        <MenuPopover>
-          <MenuList>
-            <MenuItem>Dog</MenuItem>
-            <MenuItem>Lion</MenuItem>
-            <MenuItem disabled={true}>Cat</MenuItem>
-            <Divider />
-            <MenuItem>Bear</MenuItem>
-          </MenuList>
-        </MenuPopover>
-      </Menu>
-    </Box>
-  );
-};
-
-const MenuUncontrolledWithLinks = ({ disabled }) => {
-  return (
-    <Box px={5}>
-      <Menu>
-        <MenuButton disabled={disabled}> Click me</MenuButton>
-        <MenuPopover>
-          <MenuList>
-            <MenuItem as="a" href="/">
-              Dog
-            </MenuItem>
-            <MenuItem>Lion</MenuItem>
-            <MenuItem disabled={true}>Cat</MenuItem>
-            <Divider />
-            <MenuItem>Bear</MenuItem>
-          </MenuList>
-        </MenuPopover>
-      </Menu>
-    </Box>
-  );
-};
-
-export const Uncontrolled = () => <MenuUncontrolled disabled={undefined} />;
-export const UncontrolledWithLinks = () => (
-  <MenuUncontrolledWithLinks disabled={undefined} />
-);
-export const Disabled = () => <MenuUncontrolled disabled={true} />;
+import { Menu, MenuButton, MenuList, MenuItem, MenuPopover } from '.';
+import { Divider } from '../Divider';
+import { Box } from '../Box';
+// import './styles.css';
+
+export default {
+  title: 'components/Menu',
+};
+
+const MenuUncontrolled = ({ disabled }) => {
+  return (
+    <Box px={5}>
+      <Menu>
+        <MenuButton disabled={disabled}> Click me</MenuButton>
+        <MenuPopover>
+          <MenuList>
+            <MenuItem>Dog</MenuItem>
+            <MenuItem>Lion</MenuItem>
+            <MenuItem disabled={true}>Cat</MenuItem>
+            <Divider />
+            <MenuItem>Bear</MenuItem>
+          </MenuList>
+        </MenuPopover>
+      </Menu>
+    </Box>
+  );
+};
+
+const MenuUncontrolledWithLinks = ({ disabled }) => {
+  return (
+    <Box px={5}>
+      <Menu>
+        <MenuButton disabled={disabled}> Click me</MenuButton>
+        <MenuPopover>
+          <MenuList>
+            <MenuItem as="a" href="/">
+              Dog
+            </MenuItem>
+            <MenuItem>Lion</MenuItem>
+            <MenuItem disabled={true}>Cat</MenuItem>
+            <Divider />
+            <MenuItem>Bear</MenuItem>
+          </MenuList>
+        </MenuPopover>
+      </Menu>
+    </Box>
+  );
+};
+
+export const Uncontrolled = () => <MenuUncontrolled disabled={undefined} />;
+export const UncontrolledWithLinks = () => (
+  <MenuUncontrolledWithLinks disabled={undefined} />
+);
+export const Disabled = () => <MenuUncontrolled disabled={true} />;

package/src/Menu/Menu.tsx

@@ -1,124 +1,124 @@
-import type { FC, HTMLAttributes } from 'react';
-import { forwardRef } from 'react';
-import type {
-  MenuButtonProps as MenuButtonPropsCore,
-  MenuListProps as MenuListPropsCore,
-  MenuItemProps as MenuItemPropsCore,
-  MenuPopoverProps as MenuPopoverPropsCore,
-  MenuProps as MenuPropsCore,
-  ContextMenuTriggerProps as ContextMenuTriggerPropsCore,
-} from '@basic-ui/core';
-import {
-  MenuButton as MenuButtonCore,
-  MenuList as _MenuListCore,
-  MenuItem as MenuItemCore,
-  MenuPopover as _MenuPopoverCore,
-  ContextMenuTrigger as ContextMenuTriggerCore,
-} from '@basic-ui/core';
-import { rem } from 'polished';
-
-import { List } from '../List';
-import type { ListItemProps } from '../ListItem';
-import { ListItem } from '../ListItem';
-import type { ButtonProps } from '../Button';
-import { Button } from '../Button';
-import type { BoxProps } from '../Box';
-import { Box } from '../Box';
-import { growAnimation } from './animation';
-import type { PaperProps } from '../Paper';
-import { EASING_STANDARD } from '../motion';
-
-/////////////////////////////////////////////////////
-// MenuList
-
-export type MenuListProps = MenuListPropsCore &
-  PaperProps &
-  BoxProps<HTMLUListElement, HTMLAttributes<HTMLUListElement>>;
-
-const MenuListCore: FC<MenuListProps> = _MenuListCore as any;
-
-export const MenuList = forwardRef<HTMLUListElement, MenuListProps>(
-  ({ as = 'ul', __css, ...props }, ref) => (
-    <MenuListCore
-      as={List}
-      innerAs={as}
-      ref={ref as any}
-      elevation={2}
-      darkThemeBackgroundOverlay={2}
-      outlined={false}
-      variant="default"
-      __css={{
-        minWidth: rem(112),
-        maxWidth: rem(280),
-        maxHeight: rem(300),
-        borderRadius: 'extra-small',
-        overflowY: 'auto',
-        '[data-popper-placement="top"] &': {
-          transformOrigin: 'bottom center',
-        },
-        '[data-popper-placement="bottom"] &': {
-          transformOrigin: 'top center',
-        },
-        animation: `${growAnimation} .12s ${EASING_STANDARD}`,
-        ...__css,
-      }}
-      {...props}
-    />
-  )
-);
-
-/////////////////////////////////////////////////////
-// MenuItem
-
-export type MenuItemProps = MenuItemPropsCore & ListItemProps;
-
-export const MenuItem = forwardRef<HTMLLIElement, MenuItemProps>(
-  ({ as = 'li', ...props }, ref) => (
-    <MenuItemCore as={ListItem} innerAs={as} ref={ref} {...props} />
-  )
-);
-
-/////////////////////////////////////////////////////
-// MenuButton
-
-export type MenuButtonProps = ButtonProps & MenuButtonPropsCore;
-
-export const MenuButton = forwardRef<HTMLButtonElement, MenuButtonProps>(
-  ({ as = 'button', ...props }, ref) => (
-    <MenuButtonCore as={Button} innerAs={as} ref={ref} {...props} />
-  )
-);
-
-/////////////////////////////////////////////////////
-// ContextMenuTrigger
-
-export type ContextMenuTriggerProps = BoxProps & ContextMenuTriggerPropsCore;
-
-export const ContextMenuTrigger = forwardRef<
-  HTMLElement,
-  ContextMenuTriggerProps
->(({ as = 'div', ...props }, ref) => (
-  <ContextMenuTriggerCore as={Box} innerAs={as} ref={ref} {...props} />
-));
-
-/////////////////////////////////////////////////////
-// MenuPopover
-
-export type MenuPopoverProps = BoxProps & MenuPopoverPropsCore;
-
-const MenuPopoverCore: FC<MenuPopoverProps> = _MenuPopoverCore as any;
-
-export const MenuPopover = forwardRef<HTMLDivElement, MenuPopoverProps>(
-  ({ as, __css, ...props }, ref) => (
-    <MenuPopoverCore
-      as={Box}
-      innerAs={as}
-      ref={ref}
-      __css={{ zIndex: 'tooltip', ...__css }}
-      {...props}
-    />
-  )
-);
-
-export type MenuProps = MenuPropsCore;
-export { Menu } from '@basic-ui/core';
+import type { FC, HTMLAttributes } from 'react';
+import { forwardRef } from 'react';
+import type {
+  MenuButtonProps as MenuButtonPropsCore,
+  MenuListProps as MenuListPropsCore,
+  MenuItemProps as MenuItemPropsCore,
+  MenuPopoverProps as MenuPopoverPropsCore,
+  MenuProps as MenuPropsCore,
+  ContextMenuTriggerProps as ContextMenuTriggerPropsCore,
+} from '@basic-ui/core';
+import {
+  MenuButton as MenuButtonCore,
+  MenuList as _MenuListCore,
+  MenuItem as MenuItemCore,
+  MenuPopover as _MenuPopoverCore,
+  ContextMenuTrigger as ContextMenuTriggerCore,
+} from '@basic-ui/core';
+import { rem } from 'polished';
+
+import { List } from '../List';
+import type { ListItemProps } from '../ListItem';
+import { ListItem } from '../ListItem';
+import type { ButtonProps } from '../Button';
+import { Button } from '../Button';
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
+import { growAnimation } from './animation';
+import type { PaperProps } from '../Paper';
+import { EASING_STANDARD } from '../motion';
+
+/////////////////////////////////////////////////////
+// MenuList
+
+export type MenuListProps = MenuListPropsCore &
+  PaperProps &
+  BoxProps<HTMLUListElement, HTMLAttributes<HTMLUListElement>>;
+
+const MenuListCore: FC<MenuListProps> = _MenuListCore as any;
+
+export const MenuList = forwardRef<HTMLUListElement, MenuListProps>(
+  ({ as = 'ul', __css, ...props }, ref) => (
+    <MenuListCore
+      as={List}
+      innerAs={as}
+      ref={ref as any}
+      elevation={2}
+      darkThemeBackgroundOverlay={2}
+      outlined={false}
+      variant="default"
+      __css={{
+        minWidth: rem(112),
+        maxWidth: rem(280),
+        maxHeight: rem(300),
+        borderRadius: 'extra-small',
+        overflowY: 'auto',
+        '[data-popper-placement="top"] &': {
+          transformOrigin: 'bottom center',
+        },
+        '[data-popper-placement="bottom"] &': {
+          transformOrigin: 'top center',
+        },
+        animation: `${growAnimation} .12s ${EASING_STANDARD}`,
+        ...__css,
+      }}
+      {...props}
+    />
+  )
+);
+
+/////////////////////////////////////////////////////
+// MenuItem
+
+export type MenuItemProps = MenuItemPropsCore & ListItemProps;
+
+export const MenuItem = forwardRef<HTMLLIElement, MenuItemProps>(
+  ({ as = 'li', ...props }, ref) => (
+    <MenuItemCore as={ListItem} innerAs={as} ref={ref} {...props} />
+  )
+);
+
+/////////////////////////////////////////////////////
+// MenuButton
+
+export type MenuButtonProps = ButtonProps & MenuButtonPropsCore;
+
+export const MenuButton = forwardRef<HTMLButtonElement, MenuButtonProps>(
+  ({ as = 'button', ...props }, ref) => (
+    <MenuButtonCore as={Button} innerAs={as} ref={ref} {...props} />
+  )
+);
+
+/////////////////////////////////////////////////////
+// ContextMenuTrigger
+
+export type ContextMenuTriggerProps = BoxProps & ContextMenuTriggerPropsCore;
+
+export const ContextMenuTrigger = forwardRef<
+  HTMLElement,
+  ContextMenuTriggerProps
+>(({ as = 'div', ...props }, ref) => (
+  <ContextMenuTriggerCore as={Box} innerAs={as} ref={ref} {...props} />
+));
+
+/////////////////////////////////////////////////////
+// MenuPopover
+
+export type MenuPopoverProps = BoxProps & MenuPopoverPropsCore;
+
+const MenuPopoverCore: FC<MenuPopoverProps> = _MenuPopoverCore as any;
+
+export const MenuPopover = forwardRef<HTMLDivElement, MenuPopoverProps>(
+  ({ as, __css, ...props }, ref) => (
+    <MenuPopoverCore
+      as={Box}
+      innerAs={as}
+      ref={ref}
+      __css={{ zIndex: 'tooltip', ...__css }}
+      {...props}
+    />
+  )
+);
+
+export type MenuProps = MenuPropsCore;
+export { Menu } from '@basic-ui/core';

package/src/Menu/animation.ts

@@ -1,16 +1,16 @@
-import { keyframes } from '@emotion/react';
-import type { Keyframes } from '@emotion/serialize';
-
-export const growAnimation: Keyframes = keyframes({
-  '0%': {
-    opacity: 0,
-    transform: `scale(0.8)`,
-  },
-  '30%': {
-    opacity: 1,
-  },
-  '100%': {
-    opacity: 1,
-    transform: `scale(1)`,
-  },
-});
+import { keyframes } from '@emotion/react';
+import type { Keyframes } from '@emotion/serialize';
+
+export const growAnimation: Keyframes = keyframes({
+  '0%': {
+    opacity: 0,
+    transform: `scale(0.8)`,
+  },
+  '30%': {
+    opacity: 1,
+  },
+  '100%': {
+    opacity: 1,
+    transform: `scale(1)`,
+  },
+});

package/src/Menu/index.ts

@@ -1,2 +1,2 @@
-export * from './Menu';
-export * from './animation';
+export * from './Menu';
+export * from './animation';