@basic-ui/core 0.0.50 → 0.0.52

package/src/Menu/ContextMenu.story.tsx

@@ -1,73 +1,73 @@
-import type { MouseEvent, ReactNode } from 'react';
-
-import { Menu, MenuItem, MenuList, MenuPopover, ContextMenuTrigger } from '.';
-import './styles.css';
-
-export default {
-  title: 'components/Menu/ContextMenu',
-};
-
-const Wrapper = ({ children }: { children: ReactNode }) => {
-  const handleLinkClick = (e: MouseEvent<HTMLAnchorElement>) => {
-    console.log('Clicked ' + e.currentTarget.innerText);
-    e.preventDefault();
-  };
-
-  return (
-    <div
-      style={{
-        boxSizing: 'border-box',
-        display: 'flex',
-        alignItems: 'flex-start',
-        justifyContent: 'space-around',
-        width: '100%',
-        position: 'relative',
-      }}
-    >
-      <a href="#" onClick={handleLinkClick}>
-        Link 1
-      </a>
-      <div style={{ minHeight: 120, width: 100 }}>{children}</div>
-      <a href="#" onClick={handleLinkClick}>
-        Link 2
-      </a>
-    </div>
-  );
-};
-
-const ContextMenuUncontrolled = () => {
-  return (
-    <Menu>
-      <ContextMenuTrigger
-        style={{
-          height: '200px',
-          width: '300px',
-          display: 'flex',
-          justifyContent: 'center',
-          alignItems: 'center',
-          borderStyle: 'dashed',
-          borderColor: 'blue',
-          borderWidth: '1px',
-        }}
-      >
-        Right click me
-      </ContextMenuTrigger>
-      <MenuPopover usePortal>
-        <MenuList>
-          <MenuItem>Dog</MenuItem>
-          <MenuItem>Lion</MenuItem>
-          <MenuItem>Tiger</MenuItem>
-          <MenuItem disabled>Cat</MenuItem>
-          <hr />
-          <MenuItem>Bear</MenuItem>
-        </MenuList>
-      </MenuPopover>
-    </Menu>
-  );
-};
-
-export const Controlled = () => (
-  <Wrapper>
-    <ContextMenuUncontrolled />
-  </Wrapper>
-);
+import type { MouseEvent, ReactNode } from 'react';
+
+import { Menu, MenuItem, MenuList, MenuPopover, ContextMenuTrigger } from '.';
+import './styles.css';
+
+export default {
+  title: 'components/Menu/ContextMenu',
+};
+
+const Wrapper = ({ children }: { children: ReactNode }) => {
+  const handleLinkClick = (e: MouseEvent<HTMLAnchorElement>) => {
+    console.log('Clicked ' + e.currentTarget.innerText);
+    e.preventDefault();
+  };
+
+  return (
+    <div
+      style={{
+        boxSizing: 'border-box',
+        display: 'flex',
+        alignItems: 'flex-start',
+        justifyContent: 'space-around',
+        width: '100%',
+        position: 'relative',
+      }}
+    >
+      <a href="#" onClick={handleLinkClick}>
+        Link 1
+      </a>
+      <div style={{ minHeight: 120, width: 100 }}>{children}</div>
+      <a href="#" onClick={handleLinkClick}>
+        Link 2
+      </a>
+    </div>
+  );
+};
+
+const ContextMenuUncontrolled = () => {
+  return (
+    <Menu>
+      <ContextMenuTrigger
+        style={{
+          height: '200px',
+          width: '300px',
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          borderStyle: 'dashed',
+          borderColor: 'blue',
+          borderWidth: '1px',
+        }}
+      >
+        Right click me
+      </ContextMenuTrigger>
+      <MenuPopover usePortal>
+        <MenuList>
+          <MenuItem>Dog</MenuItem>
+          <MenuItem>Lion</MenuItem>
+          <MenuItem>Tiger</MenuItem>
+          <MenuItem disabled>Cat</MenuItem>
+          <hr />
+          <MenuItem>Bear</MenuItem>
+        </MenuList>
+      </MenuPopover>
+    </Menu>
+  );
+};
+
+export const Controlled = () => (
+  <Wrapper>
+    <ContextMenuUncontrolled />
+  </Wrapper>
+);

package/src/Menu/ContextMenuTrigger.tsx

@@ -1,76 +1,76 @@
-import type {
-  ElementType,
-  HTMLAttributes,
-  MouseEvent as ReactMouseEvent,
-} from 'react';
-import { forwardRef, useId } from 'react';
-
-import { useMenuContext } from './context';
-import { wrapEvent } from '../utils/wrap-event';
-import type { OffsetsFunction } from '../Popper';
-
-export type ContextMenuTriggerProps = HTMLAttributes<HTMLElement> & {
-  as?: ElementType<any>;
-  innerAs?: ElementType<any>;
-  disabled?: boolean;
-};
-
-export const ContextMenuTrigger = forwardRef<
-  HTMLElement,
-  ContextMenuTriggerProps
->(function ContextMenuTrigger(props, forwardedRef) {
-  const {
-    as: Comp = 'div',
-    innerAs,
-    id: preferredId,
-    onContextMenu,
-    disabled,
-    ...otherProps
-  } = props;
-  const {
-    menuListIdRef,
-    open,
-    buttonRef,
-    onChange,
-    setOffsetFn,
-    isContextMenu,
-  } = useMenuContext();
-
-  const idGenerated = useId();
-  const id = preferredId || idGenerated;
-
-  const handleContextMenu = (e: ReactMouseEvent<HTMLElement>) => {
-    if (disabled) {
-      return;
-    }
-    const rect = e.currentTarget.getBoundingClientRect();
-    isContextMenu.current = true;
-
-    buttonRef.current = e.currentTarget;
-    onChange(e, true);
-
-    const mouseX = e.nativeEvent.x;
-    const mouseY = e.nativeEvent.y;
-    setOffsetFn(
-      (): OffsetsFunction =>
-        ({ reference }) =>
-          [mouseX - rect.x, mouseY - rect.y - reference.height]
-    );
-    e.preventDefault();
-  };
-
-  return (
-    <Comp
-      ref={forwardedRef}
-      as={innerAs}
-      id={id}
-      aria-haspopup={true}
-      aria-controls={menuListIdRef.current}
-      aria-expanded={open ? true : undefined}
-      data-menu-trigger=""
-      onContextMenu={wrapEvent(onContextMenu, handleContextMenu)}
-      disabled={disabled}
-      {...otherProps}
-    />
-  );
-});
+import type {
+  ElementType,
+  HTMLAttributes,
+  MouseEvent as ReactMouseEvent,
+} from 'react';
+import { forwardRef, useId } from 'react';
+
+import { useMenuContext } from './context';
+import { wrapEvent } from '../utils/wrap-event';
+import type { OffsetsFunction } from '../Popper';
+
+export type ContextMenuTriggerProps = HTMLAttributes<HTMLElement> & {
+  as?: ElementType<any>;
+  innerAs?: ElementType<any>;
+  disabled?: boolean;
+};
+
+export const ContextMenuTrigger = forwardRef<
+  HTMLElement,
+  ContextMenuTriggerProps
+>(function ContextMenuTrigger(props, forwardedRef) {
+  const {
+    as: Comp = 'div',
+    innerAs,
+    id: preferredId,
+    onContextMenu,
+    disabled,
+    ...otherProps
+  } = props;
+  const {
+    menuListIdRef,
+    open,
+    buttonRef,
+    onChange,
+    setOffsetFn,
+    isContextMenu,
+  } = useMenuContext();
+
+  const idGenerated = useId();
+  const id = preferredId || idGenerated;
+
+  const handleContextMenu = (e: ReactMouseEvent<HTMLElement>) => {
+    if (disabled) {
+      return;
+    }
+    const rect = e.currentTarget.getBoundingClientRect();
+    isContextMenu.current = true;
+
+    buttonRef.current = e.currentTarget;
+    onChange(e, true);
+
+    const mouseX = e.nativeEvent.x;
+    const mouseY = e.nativeEvent.y;
+    setOffsetFn(
+      (): OffsetsFunction =>
+        ({ reference }) =>
+          [mouseX - rect.x, mouseY - rect.y - reference.height]
+    );
+    e.preventDefault();
+  };
+
+  return (
+    <Comp
+      ref={forwardedRef}
+      as={innerAs}
+      id={id}
+      aria-haspopup={true}
+      aria-controls={menuListIdRef.current}
+      aria-expanded={open ? true : undefined}
+      data-menu-trigger=""
+      onContextMenu={wrapEvent(onContextMenu, handleContextMenu)}
+      disabled={disabled}
+      {...otherProps}
+    />
+  );
+});

package/src/Menu/Menu.story.tsx

@@ -1,160 +1,160 @@
-import type { MouseEvent, ReactNode } from 'react';
-import { useState } from 'react';
-import { animated, useSpring } from 'react-spring';
-
-import { Menu, MenuButton, MenuItem, MenuList, MenuPopover } from './';
-import './styles.css';
-
-export default {
-  title: 'components/Menu',
-};
-
-const noop = () => {
-  // noop function to be used on onRest, as a cleanup
-};
-
-const Wrapper = ({ children }: { children: ReactNode }) => {
-  const handleLinkClick = (e: MouseEvent<HTMLAnchorElement>) => {
-    console.log('Clicked ' + e.currentTarget.innerText);
-    e.preventDefault();
-  };
-
-  return (
-    <div
-      style={{
-        boxSizing: 'border-box',
-        display: 'flex',
-        alignItems: 'flex-start',
-        padding: '85% 48px',
-        height: '150vh',
-        justifyContent: 'space-around',
-        width: '100%',
-        position: 'relative',
-      }}
-    >
-      <a href="#" onClick={handleLinkClick}>
-        Link 1
-      </a>
-      <div style={{ minHeight: 120, width: 100 }}>{children}</div>
-      <a href="#" onClick={handleLinkClick}>
-        Link 2
-      </a>
-    </div>
-  );
-};
-
-const MenuControlled = () => {
-  return (
-    <Menu>
-      <MenuButton>Click me</MenuButton>
-      <MenuPopover>
-        <MenuList>
-          <MenuItem>Dog</MenuItem>
-          <MenuItem>Lion</MenuItem>
-          <MenuItem>Tiger</MenuItem>
-          <MenuItem disabled>Cat</MenuItem>
-          <hr />
-          <MenuItem>Bear</MenuItem>
-        </MenuList>
-      </MenuPopover>
-    </Menu>
-  );
-};
-
-const MenuControlledWithAnimation = () => {
-  const [open, setOpen] = useState(false);
-
-  const [{ scale, opacity }, set] = useSpring(() => ({
-    scale: 0.75,
-    opacity: 0,
-    config: { mass: 1, tension: 750, friction: 50, clamp: true },
-  }));
-
-  const handleChange = (e: any, isOpen: boolean) => {
-    if (isOpen) {
-      set({ scale: 1, opacity: 1, onRest: noop });
-      setOpen(true);
-    } else {
-      set({
-        scale: 0.75,
-        opacity: 0,
-        onRest: () => {
-          setOpen(false);
-        },
-      });
-    }
-  };
-
-  return (
-    <Menu onChange={handleChange} open={open}>
-      <MenuButton>Click me</MenuButton>
-      <MenuPopover>
-        <MenuList
-          as={animated.ul}
-          style={{
-            opacity: opacity as unknown as number,
-            transform: scale.to(
-              (x) => `scale(${x}, ${x * x})`
-            ) as unknown as string,
-          }}
-        >
-          <MenuItem>Dog</MenuItem>
-          <MenuItem>Lion</MenuItem>
-          <MenuItem>Tiger</MenuItem>
-          <MenuItem disabled>Cat</MenuItem>
-          <hr />
-          <MenuItem>Bear</MenuItem>
-        </MenuList>
-      </MenuPopover>
-    </Menu>
-  );
-};
-
-const MenuWithMultipleButtons = () => {
-  return (
-    <Menu>
-      <div style={{ display: 'flex', gap: 32 }}>
-        <MenuButton>
-          <span>Click me</span>
-        </MenuButton>
-        <MenuButton>
-          <span>Click me</span>
-        </MenuButton>
-        <MenuButton>
-          <span>Click me</span>
-        </MenuButton>
-        <MenuButton>
-          <span>Click me</span>
-        </MenuButton>
-      </div>
-      <MenuPopover>
-        <MenuList>
-          <MenuItem>Dog</MenuItem>
-          <MenuItem>Lion</MenuItem>
-          <MenuItem>Tiger</MenuItem>
-          <MenuItem disabled>Cat</MenuItem>
-          <hr />
-          <MenuItem>Bear</MenuItem>
-        </MenuList>
-      </MenuPopover>
-    </Menu>
-  );
-};
-
-export const Controlled = () => (
-  <Wrapper>
-    <MenuControlled />
-  </Wrapper>
-);
-
-export const WithAnimationControlled = () => (
-  <Wrapper>
-    <MenuControlledWithAnimation />
-  </Wrapper>
-);
-
-export const WithMultipleButtons = () => (
-  <Wrapper>
-    <MenuWithMultipleButtons />
-  </Wrapper>
-);
+import type { MouseEvent, ReactNode } from 'react';
+import { useState } from 'react';
+import { animated, useSpring } from 'react-spring';
+
+import { Menu, MenuButton, MenuItem, MenuList, MenuPopover } from './';
+import './styles.css';
+
+export default {
+  title: 'components/Menu',
+};
+
+const noop = () => {
+  // noop function to be used on onRest, as a cleanup
+};
+
+const Wrapper = ({ children }: { children: ReactNode }) => {
+  const handleLinkClick = (e: MouseEvent<HTMLAnchorElement>) => {
+    console.log('Clicked ' + e.currentTarget.innerText);
+    e.preventDefault();
+  };
+
+  return (
+    <div
+      style={{
+        boxSizing: 'border-box',
+        display: 'flex',
+        alignItems: 'flex-start',
+        padding: '85% 48px',
+        height: '150vh',
+        justifyContent: 'space-around',
+        width: '100%',
+        position: 'relative',
+      }}
+    >
+      <a href="#" onClick={handleLinkClick}>
+        Link 1
+      </a>
+      <div style={{ minHeight: 120, width: 100 }}>{children}</div>
+      <a href="#" onClick={handleLinkClick}>
+        Link 2
+      </a>
+    </div>
+  );
+};
+
+const MenuControlled = () => {
+  return (
+    <Menu>
+      <MenuButton>Click me</MenuButton>
+      <MenuPopover>
+        <MenuList>
+          <MenuItem>Dog</MenuItem>
+          <MenuItem>Lion</MenuItem>
+          <MenuItem>Tiger</MenuItem>
+          <MenuItem disabled>Cat</MenuItem>
+          <hr />
+          <MenuItem>Bear</MenuItem>
+        </MenuList>
+      </MenuPopover>
+    </Menu>
+  );
+};
+
+const MenuControlledWithAnimation = () => {
+  const [open, setOpen] = useState(false);
+
+  const [{ scale, opacity }, set] = useSpring(() => ({
+    scale: 0.75,
+    opacity: 0,
+    config: { mass: 1, tension: 750, friction: 50, clamp: true },
+  }));
+
+  const handleChange = (e: any, isOpen: boolean) => {
+    if (isOpen) {
+      set({ scale: 1, opacity: 1, onRest: noop });
+      setOpen(true);
+    } else {
+      set({
+        scale: 0.75,
+        opacity: 0,
+        onRest: () => {
+          setOpen(false);
+        },
+      });
+    }
+  };
+
+  return (
+    <Menu onChange={handleChange} open={open}>
+      <MenuButton>Click me</MenuButton>
+      <MenuPopover>
+        <MenuList
+          as={animated.ul}
+          style={{
+            opacity: opacity as unknown as number,
+            transform: scale.to(
+              (x) => `scale(${x}, ${x * x})`
+            ) as unknown as string,
+          }}
+        >
+          <MenuItem>Dog</MenuItem>
+          <MenuItem>Lion</MenuItem>
+          <MenuItem>Tiger</MenuItem>
+          <MenuItem disabled>Cat</MenuItem>
+          <hr />
+          <MenuItem>Bear</MenuItem>
+        </MenuList>
+      </MenuPopover>
+    </Menu>
+  );
+};
+
+const MenuWithMultipleButtons = () => {
+  return (
+    <Menu>
+      <div style={{ display: 'flex', gap: 32 }}>
+        <MenuButton>
+          <span>Click me</span>
+        </MenuButton>
+        <MenuButton>
+          <span>Click me</span>
+        </MenuButton>
+        <MenuButton>
+          <span>Click me</span>
+        </MenuButton>
+        <MenuButton>
+          <span>Click me</span>
+        </MenuButton>
+      </div>
+      <MenuPopover>
+        <MenuList>
+          <MenuItem>Dog</MenuItem>
+          <MenuItem>Lion</MenuItem>
+          <MenuItem>Tiger</MenuItem>
+          <MenuItem disabled>Cat</MenuItem>
+          <hr />
+          <MenuItem>Bear</MenuItem>
+        </MenuList>
+      </MenuPopover>
+    </Menu>
+  );
+};
+
+export const Controlled = () => (
+  <Wrapper>
+    <MenuControlled />
+  </Wrapper>
+);
+
+export const WithAnimationControlled = () => (
+  <Wrapper>
+    <MenuControlledWithAnimation />
+  </Wrapper>
+);
+
+export const WithMultipleButtons = () => (
+  <Wrapper>
+    <MenuWithMultipleButtons />
+  </Wrapper>
+);