@basic-ui/core 0.0.54 → 0.0.56

package/src/Modal/ModalBackdrop.tsx

@@ -1,78 +1,78 @@
-import type {
-  HTMLAttributes,
-  ElementType,
-  CSSProperties,
-  MouseEvent,
-  KeyboardEvent,
-} from 'react';
-import { useRef, forwardRef } from 'react';
-
-import { assignMultipleRefs } from '../utils/assign-ref';
-import { wrapEvent } from '../utils/wrap-event';
-
-export interface ModalBackdropProps extends HTMLAttributes<HTMLDivElement> {
-  as?: ElementType<any>;
-  innerAs?: ElementType<any>;
-  onClose?: () => void;
-  style?: 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: 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: MouseEvent<HTMLDivElement>) => {
-      mouseDownTargetRef.current = e.target;
-    };
-
-    const handleKeyDown = (e: 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}
-      />
-    );
-  }
-);
+import type {
+  HTMLAttributes,
+  ElementType,
+  CSSProperties,
+  MouseEvent,
+  KeyboardEvent,
+} from 'react';
+import { useRef, forwardRef } from 'react';
+
+import { assignMultipleRefs } from '../utils/assign-ref';
+import { wrapEvent } from '../utils/wrap-event';
+
+export interface ModalBackdropProps extends HTMLAttributes<HTMLDivElement> {
+  as?: ElementType<any>;
+  innerAs?: ElementType<any>;
+  onClose?: () => void;
+  style?: 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(null);
+    const mouseDownTargetRef = useRef<EventTarget | null>(null);
+
+    const handleClick = (e: 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: MouseEvent<HTMLDivElement>) => {
+      mouseDownTargetRef.current = e.target;
+    };
+
+    const handleKeyDown = (e: 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

@@ -1,158 +1,161 @@
-import { useState } from 'react';
-import { useSpring, animated } from 'react-spring';
-
-import { Modal, ModalBackdrop } from './';
-import { Portal } from '../Portal';
-import './styles.css';
-
-export default {
-  title: 'components/Modal/NavDrawer',
-};
-
-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>
-      )}
-    </>
-  );
-};
-
-export const ControlledAnimated = () => (
-  <Wrapper>
-    <SimpleModalControlledAnimated />
-  </Wrapper>
-);
+import type { CSSProperties, ReactNode } from 'react';
+import { useState } from 'react';
+import { useSpring, animated } from 'react-spring';
+
+import { Modal, ModalBackdrop } from './';
+import { Portal } from '../Portal';
+import './styles.css';
+
+export default {
+  title: 'components/Modal/NavDrawer',
+};
+
+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 }: { children: ReactNode }) => {
+  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<CSSProperties['pointerEvents']>('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,
+                } as any
+              }
+            >
+              <button>This is a cool button</button>
+              Hello world
+              <LoremIpsum />
+            </Modal>
+          </ModalBackdrop>
+        </Portal>
+      )}
+    </>
+  );
+};
+
+export const ControlledAnimated = () => (
+  <Wrapper>
+    <SimpleModalControlledAnimated />
+  </Wrapper>
+);

package/src/Modal/index.ts

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

package/src/Modal/styles.css

@@ -1,46 +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;
-}
+[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;
+}