@basic-ui/core 0.0.28 → 0.0.32

package/src/Menu/context.ts

@@ -0,0 +1,32 @@
+import { createContext, useContext, MutableRefObject } from 'react';
+
+export type ItemObject = { text: string; value: any; id: string | undefined };
+
+// MenuRoot
+export interface MenuContextProps {
+  buttonRef: MutableRefObject<HTMLButtonElement | null>;
+  menuListIdRef: MutableRefObject<undefined | string>;
+  openWithArrowKeyRef: MutableRefObject<string | null>;
+  onChange?: (
+    e:
+      | React.KeyboardEvent<HTMLElement>
+      | React.MouseEvent<HTMLElement>
+      | React.PointerEvent<HTMLElement>,
+    isOpen: boolean
+  ) => void;
+  open: boolean;
+}
+
+const menuContext = createContext<MenuContextProps>(null as any);
+export const { Provider: MenuProvider } = menuContext;
+export const useMenuContext = () => useContext(menuContext);
+
+// MenuList
+export interface MenuListContextProps {
+  navigationItem: HTMLElement | undefined;
+  onNavigate: undefined | ((idx: HTMLElement) => void);
+}
+
+const menuListContext = createContext<MenuListContextProps>(null as any);
+export const MenuListProvider = menuListContext.Provider;
+export const useMenuListContext = () => useContext(menuListContext);

package/src/Menu/index.ts

@@ -0,0 +1,5 @@
+export * from './Menu';
+export * from './MenuButton';
+export * from './MenuItem';
+export * from './MenuList';
+export * from './MenuPopover';

package/src/Menu/scope.ts

@@ -0,0 +1,7 @@
+export function queryScope(type: string, props: Record<string, unknown>) {
+  return (
+    props['data-menu-item'] === '' &&
+    props['data-disabled'] !== '' &&
+    props['data-disabled'] !== true
+  );
+}

package/src/Menu/styles.css

@@ -0,0 +1,42 @@
+[data-menu-item] {
+  padding: 8px;
+  list-style: none;
+  cursor: pointer;
+}
+
+[data-menu-item][data-highlighted] {
+  background-color: #e7e7e7;
+}
+
+[data-menu-item][data-highlighted]:hover {
+  background-color: #d7d7d7;
+}
+
+[data-menu-item]:hover {
+  background-color: #f3f3f3;
+}
+
+[data-menu-item][data-disabled] {
+  background-color: #ffffff;
+  color: #777;
+  cursor: not-allowed;
+}
+
+[data-menu-list] {
+  margin: 0;
+  padding: 0;
+  box-shadow: 0px 2px 6px hsla(0, 0%, 0%, 0.15);
+  border-radius: 3px;
+}
+
+[data-popper-placement='top'] [data-menu-list] {
+  transform-origin: bottom center;
+}
+
+[data-popper-placement='bottom'] [data-menu-list] {
+  transform-origin: top center;
+}
+
+[data-menu-list]:focus {
+  outline: none;
+}

package/src/Modal/Modal.story.tsx

@@ -0,0 +1,242 @@
+import { useState } from 'react';
+import { storiesOf } from '@storybook/react';
+import { useSpring, animated } from 'react-spring';
+import { Modal, ModalBackdrop } from './';
+import { Portal } from '../Portal';
+import './styles.css';
+
+const stories = storiesOf('Components/Modal', module);
+
+const LoremIpsum = ({ numOfParagraphs = 20 }) => {
+  const content = [];
+
+  for (let i = 0; i < numOfParagraphs; i++) {
+    content.push(
+      <p key={`paragraph_${i}`}>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
+        vestibulum sapien nec mauris placerat, et facilisis massa placerat.
+        Curabitur sagittis condimentum lectus vel aliquam. Sed ultrices, metus
+        sed suscipit venenatis, metus lectus vestibulum neque, eget sodales
+        justo sapien in ante. In a neque mollis, volutpat est a, vehicula lacus.
+        Praesent lectus justo, tempor a laoreet in, consectetur nec sapien.
+        Phasellus non venenatis erat. Maecenas eget mi sodales, euismod tortor
+        vitae, ultricies quam. Sed varius nunc id tincidunt porttitor. Morbi
+        lectus massa, malesuada at lorem ut, semper volutpat orci. Donec mauris
+        eros, faucibus ut egestas a, ultricies vel tortor. Phasellus mi lectus,
+        consectetur a risus at, faucibus porttitor ligula. Maecenas felis eros,
+        porttitor vel placerat eget, malesuada ac leo. Cras a eros id dui
+        porttitor ullamcorper sit amet quis lorem.
+      </p>
+    );
+  }
+
+  return <>{content}</>;
+};
+
+const Wrapper = ({ children }) => {
+  return (
+    <div style={{ maxWidth: 900, margin: '0 auto' }}>
+      <div
+        style={{
+          boxSizing: 'border-box',
+          display: 'flex',
+          alignItems: 'flex-start',
+          padding: '96px 48px',
+          justifyContent: 'space-around',
+          width: '100%',
+          position: 'relative',
+        }}
+      >
+        <a href="#" onClick={(e) => e.preventDefault()}>
+          Link
+        </a>
+        <div style={{ minHeight: 120, width: 100 }}>{children}</div>
+        <a href="#" onClick={(e) => e.preventDefault()}>
+          Link
+        </a>
+      </div>
+      <div>
+        <LoremIpsum />
+      </div>
+      <div
+        style={{
+          boxSizing: 'border-box',
+          display: 'flex',
+          alignItems: 'flex-start',
+          padding: '96px 48px',
+          justifyContent: 'space-around',
+          width: '100%',
+          position: 'relative',
+        }}
+      >
+        <a href="#" onClick={(e) => e.preventDefault()}>
+          Link
+        </a>
+        <div style={{ minHeight: 120, width: 100 }}>{children}</div>
+        <a href="#" onClick={(e) => e.preventDefault()}>
+          Link
+        </a>
+      </div>
+    </div>
+  );
+};
+
+const SimpleModalControlled = () => {
+  const [open, setOpen] = useState(false);
+
+  const handleClose = () => {
+    setOpen(false);
+  };
+
+  return (
+    <>
+      <button onClick={() => setOpen(!open)}>Open modal</button>
+      {open && (
+        <Portal>
+          <ModalBackdrop onClose={handleClose}>
+            <Modal trapFocus={true}>
+              <button>Start button</button>
+              <LoremIpsum />
+              <button>End button</button>
+            </Modal>
+          </ModalBackdrop>
+        </Portal>
+      )}
+    </>
+  );
+};
+
+const NestedModalControlled = () => {
+  const [open, setOpen] = useState(false);
+  const [open2, setOpen2] = useState(false);
+
+  return (
+    <>
+      <button onClick={() => setOpen(!open)}>Open modal</button>
+      {open && (
+        <Portal>
+          <ModalBackdrop onClose={() => setOpen(false)}>
+            <Modal trapFocus={true}>
+              <button onClick={() => setOpen2(true)}>Open another modal</button>
+              {open2 && (
+                <Portal>
+                  <ModalBackdrop onClose={() => setOpen2(false)}>
+                    <Modal trapFocus={true}>
+                      <LoremIpsum numOfParagraphs={1} />
+                      <button onClick={() => setOpen2(false)}>Close</button>
+                    </Modal>
+                  </ModalBackdrop>
+                </Portal>
+              )}
+              <LoremIpsum numOfParagraphs={1} />
+              <button onClick={() => setOpen(false)}>Close</button>
+            </Modal>
+          </ModalBackdrop>
+        </Portal>
+      )}
+    </>
+  );
+};
+
+const SimpleModalControlledAnimated = () => {
+  const [open, setOpen] = useState(false);
+  const [pointerEvents, setPointerEvents] = useState('none');
+  const [{ scale, opacity }, set] = useSpring(() => ({
+    scale: 0.97,
+    opacity: 0,
+  }));
+
+  const handleClose = () => {
+    const t = Date.now();
+    setPointerEvents('none');
+    set({
+      scale: 0.97,
+      opacity: 0,
+      config: {
+        mass: 1,
+        tension: 1600,
+        friction: 50,
+        clamp: true,
+      },
+      onRest: () => {
+        console.log('Close in: ', Date.now() - t);
+        setOpen(false);
+      },
+    });
+  };
+
+  const handleOpen = () => {
+    const t = Date.now();
+    setOpen(true);
+    setPointerEvents('auto');
+    set({
+      scale: 1,
+      opacity: 1,
+      config: {
+        mass: 1,
+        tension: 1050,
+        friction: 50,
+        clamp: true,
+      },
+      onRest: () => {
+        console.log('Opened in: ', Date.now() - t);
+      },
+    });
+  };
+
+  return (
+    <>
+      <button onClick={handleOpen}>Open modal</button>
+      {open && (
+        <Portal>
+          <animated.div
+            style={{
+              opacity,
+              position: 'fixed',
+              boxSizing: 'border-box',
+              top: '0',
+              left: '0',
+              right: '0',
+              bottom: '0',
+              backgroundColor: 'rgba(0, 0, 0, 0.3)',
+              pointerEvents: 'none',
+            }}
+          />
+          <ModalBackdrop onClose={handleClose} style={{ pointerEvents }}>
+            <Modal
+              as={animated.div}
+              style={{
+                transform: scale.to((x: number) => `scale(${x}, ${x * x})`),
+                opacity,
+                transformOrigin: 'center top',
+              }}
+            >
+              <button>Start button</button>
+              Hello world
+              <LoremIpsum />
+              <button>End button</button>
+            </Modal>
+          </ModalBackdrop>
+        </Portal>
+      )}
+    </>
+  );
+};
+
+stories.add('Simple modal, controlled', () => (
+  <Wrapper>
+    <SimpleModalControlled />
+  </Wrapper>
+));
+
+stories.add('Nested modal, controlled', () => (
+  <Wrapper>
+    <NestedModalControlled />
+  </Wrapper>
+));
+
+stories.add('Simple modal, controlled, animated', () => (
+  <Wrapper>
+    <SimpleModalControlledAnimated />
+  </Wrapper>
+));

package/src/Modal/Modal.tsx

@@ -0,0 +1,42 @@
+import { ReactNode, forwardRef, useRef } from 'react';
+import type * as React from 'react';
+import { useAutoFocus, useFocusReturn, useRemoveBodyScroll } from '../hooks';
+import { FocusLock } from '../FocusLock';
+import { assignMultipleRefs } from '../utils';
+
+export interface ModalProps extends React.HTMLAttributes<HTMLDivElement> {
+  as?: React.ElementType<any>;
+  innerAs?: React.ElementType<any>;
+  children?: ReactNode;
+  style?: React.CSSProperties;
+  trapFocus?: boolean;
+}
+
+export const Modal = forwardRef<HTMLDivElement, ModalProps>(
+  (
+    { as: Comp = 'div', children, trapFocus = true, style = {}, ...otherProps },
+    ref
+  ) => {
+    const modalRef = useRef<HTMLDivElement>(null);
+
+    useFocusReturn(trapFocus);
+    useRemoveBodyScroll(trapFocus);
+    useAutoFocus(trapFocus, modalRef);
+
+    return (
+      <FocusLock childRef={modalRef} enabled={trapFocus}>
+        <Comp
+          ref={assignMultipleRefs(ref, modalRef)}
+          data-modal-container=""
+          role="dialog"
+          aria-modal="true"
+          style={style}
+          tabIndex={0}
+          {...otherProps}
+        >
+          {children}
+        </Comp>
+      </FocusLock>
+    );
+  }
+);

package/src/Modal/ModalBackdrop.tsx

@@ -0,0 +1,72 @@
+import { useRef, forwardRef } from 'react';
+import type * as React from 'react';
+import { assignMultipleRefs } from '../utils/assignRef';
+import { wrapEvent } from '../utils/wrapEvent';
+
+export interface ModalBackdropProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  as?: React.ElementType<any>;
+  innerAs?: React.ElementType<any>;
+  onClose?: () => void;
+  style?: React.CSSProperties;
+  disableCloseOnClick?: boolean;
+  disableEscapeKeyDown?: boolean;
+}
+
+export const ModalBackdrop = forwardRef<HTMLDivElement, ModalBackdropProps>(
+  (
+    {
+      as: Comp = 'div',
+      onClose,
+      onClick,
+      onMouseDown,
+      onKeyDown,
+      disableCloseOnClick = false,
+      disableEscapeKeyDown = false,
+      ...otherProps
+    },
+    forwardedRef
+  ) => {
+    const ref = useRef();
+    const mouseDownTargetRef = useRef<EventTarget | null>(null);
+
+    const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
+      // Ignore the events not coming from the "backdrop"
+      // We don't want to close the dialog when clicking the dialog content.
+      if (e.target !== e.currentTarget) {
+        return;
+      }
+
+      // Make sure the event starts and ends on the same DOM element.
+      if (e.target !== mouseDownTargetRef.current) {
+        return;
+      }
+
+      mouseDownTargetRef.current = null;
+      !disableCloseOnClick && onClose?.();
+      e.stopPropagation();
+    };
+
+    const handleMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {
+      mouseDownTargetRef.current = e.target;
+    };
+
+    const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
+      if (e.key === 'Escape') {
+        !disableEscapeKeyDown && onClose?.();
+        e.stopPropagation();
+      }
+    };
+
+    return (
+      <Comp
+        ref={assignMultipleRefs(ref, forwardedRef)}
+        data-modal-root=""
+        onClick={wrapEvent(onClick, handleClick)}
+        onMouseDown={wrapEvent(onMouseDown, handleMouseDown)}
+        onKeyDown={wrapEvent(onKeyDown, handleKeyDown)}
+        {...otherProps}
+      />
+    );
+  }
+);

package/src/Modal/NavDrawer.story.tsx

@@ -0,0 +1,157 @@
+import { useState } from 'react';
+import { storiesOf } from '@storybook/react';
+import { useSpring, animated } from 'react-spring';
+import { Modal, ModalBackdrop } from './';
+import { Portal } from '../Portal';
+import './styles.css';
+
+const stories = storiesOf('Components/Modal/NavDrawer', module);
+
+const LoremIpsum = ({ numOfParagraphs = 20 }) => {
+  const content = [];
+
+  for (let i = 0; i < numOfParagraphs; i++) {
+    content.push(
+      <p key={`paragraph_${i}`}>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
+        vestibulum sapien nec mauris placerat, et facilisis massa placerat.
+        Curabitur sagittis condimentum lectus vel aliquam. Sed ultrices, metus
+        sed suscipit venenatis, metus lectus vestibulum neque, eget sodales
+        justo sapien in ante. In a neque mollis, volutpat est a, vehicula lacus.
+        Praesent lectus justo, tempor a laoreet in, consectetur nec sapien.
+        Phasellus non venenatis erat. Maecenas eget mi sodales, euismod tortor
+        vitae, ultricies quam. Sed varius nunc id tincidunt porttitor. Morbi
+        lectus massa, malesuada at lorem ut, semper volutpat orci. Donec mauris
+        eros, faucibus ut egestas a, ultricies vel tortor. Phasellus mi lectus,
+        consectetur a risus at, faucibus porttitor ligula. Maecenas felis eros,
+        porttitor vel placerat eget, malesuada ac leo. Cras a eros id dui
+        porttitor ullamcorper sit amet quis lorem.
+      </p>
+    );
+  }
+
+  return <>{content}</>;
+};
+
+const Wrapper = ({ children }) => {
+  return (
+    <div style={{ maxWidth: 900, margin: '0 auto' }}>
+      <div
+        style={{
+          boxSizing: 'border-box',
+          display: 'flex',
+          alignItems: 'flex-start',
+          padding: '96px 48px',
+          justifyContent: 'space-around',
+          width: '100%',
+          position: 'relative',
+        }}
+      >
+        <a href="#" onClick={(e) => e.preventDefault()}>
+          Link
+        </a>
+        <div style={{ minHeight: 120, width: 100 }}>{children}</div>
+        <a href="#" onClick={(e) => e.preventDefault()}>
+          Link
+        </a>
+      </div>
+      <div>
+        <LoremIpsum />
+      </div>
+    </div>
+  );
+};
+
+const SimpleModalControlledAnimated = () => {
+  const [open, setOpen] = useState(false);
+  const [pointerEvents, setPointerEvents] = useState<PointerEventsProperty>(
+    'none'
+  );
+  const [{ transformX, opacity }, set] = useSpring(() => ({
+    transformX: -120,
+    opacity: 0,
+  }));
+
+  const handleClose = () => {
+    const t = Date.now();
+    setPointerEvents('none');
+    set({
+      transformX: -120,
+      opacity: 0,
+      config: {
+        mass: 1,
+        tension: 820,
+        friction: 50,
+        clamp: true,
+      },
+      onRest: () => {
+        console.log('Close in: ', Date.now() - t);
+        setOpen(false);
+      },
+    });
+  };
+
+  const handleOpen = () => {
+    const t = Date.now();
+    setOpen(true);
+    setPointerEvents('auto');
+    set({
+      transformX: 0,
+      opacity: 1,
+      config: {
+        mass: 1,
+        tension: 770,
+        friction: 50,
+        clamp: true,
+      },
+      onRest: () => {
+        console.log('Opened in: ', Date.now() - t);
+      },
+    });
+  };
+
+  const trans = (x: number) => `translateX(${x}%)`;
+
+  return (
+    <>
+      <button onClick={handleOpen}>Open modal</button>
+      {open && (
+        <Portal>
+          <animated.div
+            style={{
+              opacity,
+              position: 'fixed',
+              boxSizing: 'border-box',
+              top: '0',
+              left: '0',
+              right: '0',
+              bottom: '0',
+              backgroundColor: 'rgba(0, 0, 0, 0.3)',
+              pointerEvents: 'none',
+            }}
+          />
+          <ModalBackdrop onClose={handleClose} style={{ pointerEvents }}>
+            <Modal
+              as={animated.div}
+              className="nav-drawer-left"
+              style={{
+                transform: transformX.to(trans),
+                opacity,
+              }}
+            >
+              <button>This is a cool button</button>
+              Hello world
+              <LoremIpsum />
+            </Modal>
+          </ModalBackdrop>
+        </Portal>
+      )}
+    </>
+  );
+};
+
+stories.add('NavDrawer, controlled, animated', () => (
+  <Wrapper>
+    <SimpleModalControlledAnimated />
+  </Wrapper>
+));

package/src/Modal/index.ts

@@ -0,0 +1,2 @@
+export * from './Modal';
+export * from './ModalBackdrop';

package/src/Modal/styles.css

@@ -0,0 +1,46 @@
+[data-modal-root] {
+  position: fixed;
+  box-sizing: border-box;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  overflow-y: auto;
+}
+
+[data-modal-container] {
+  position: relative;
+  left: 0;
+  right: 0;
+  margin: 96px auto;
+  width: 100%;
+  max-width: 600px;
+  background-color: #fff;
+  box-shadow: 0px 2px 6px hsla(0, 0%, 0%, 0.15);
+  border-radius: 3px;
+  overflow-y: auto;
+}
+
+[data-modal-backdrop] {
+  position: fixed;
+  box-sizing: border-box;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.3);
+  pointer-events: none;
+}
+
+.nav-drawer-left {
+  position: relative;
+  left: 0;
+  right: 0;
+  margin: 0;
+  width: 260px;
+  background-color: #fff;
+  box-shadow: 0px 2px 6px hsla(0, 0%, 0%, 0.15);
+  border-radius: 0px;
+  max-height: 100%;
+  overflow-y: auto;
+}