@basic-ui/core 0.0.54 → 0.0.56

package/src/Modal/Modal.story.tsx

@@ -1,258 +1,262 @@
-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',
-};
-
-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 SimpleModalControlledExample = () => {
-  const [open, setOpen] = useState(false);
-
-  const handleClose = () => {
-    setOpen(false);
-  };
-
-  return (
-    <>
-      <button id="open-modal" 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 NestedModalControlledExample = () => {
-  const [open, setOpen] = useState(false);
-  const [open2, setOpen2] = useState(false);
-
-  return (
-    <>
-      <button id="open-modal" onClick={() => setOpen(!open)}>
-        Open modal
-      </button>
-      {open && (
-        <Portal>
-          <ModalBackdrop onClose={() => setOpen(false)}>
-            <Modal trapFocus={true}>
-              <button id="open-another-modal" 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
-                autoFocus
-                id="close-button"
-                onClick={() => setOpen(false)}
-              >
-                Close
-              </button>
-            </Modal>
-          </ModalBackdrop>
-        </Portal>
-      )}
-    </>
-  );
-};
-
-const SimpleModalControlledAnimatedExample = () => {
-  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 id="open-modal" 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>
-      )}
-    </>
-  );
-};
-
-export const SimpleModalControlled = () => (
-  <Wrapper>
-    <SimpleModalControlledExample />
-  </Wrapper>
-);
-
-export const NestedModalControlled = () => (
-  <Wrapper>
-    <NestedModalControlledExample />
-  </Wrapper>
-);
-
-export const SimpleModalControlledAnimated = () => (
-  <Wrapper>
-    <SimpleModalControlledAnimatedExample />
-  </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',
+};
+
+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
+        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 SimpleModalControlledExample = () => {
+  const [open, setOpen] = useState(false);
+
+  const handleClose = () => {
+    setOpen(false);
+  };
+
+  return (
+    <>
+      <button id="open-modal" 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 NestedModalControlledExample = () => {
+  const [open, setOpen] = useState(false);
+  const [open2, setOpen2] = useState(false);
+
+  return (
+    <>
+      <button id="open-modal" onClick={() => setOpen(!open)}>
+        Open modal
+      </button>
+      {open && (
+        <Portal>
+          <ModalBackdrop onClose={() => setOpen(false)}>
+            <Modal trapFocus={true}>
+              <button id="open-another-modal" 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
+                autoFocus
+                id="close-button"
+                onClick={() => setOpen(false)}
+              >
+                Close
+              </button>
+            </Modal>
+          </ModalBackdrop>
+        </Portal>
+      )}
+    </>
+  );
+};
+
+const SimpleModalControlledAnimatedExample = () => {
+  const [open, setOpen] = useState(false);
+  const [pointerEvents, setPointerEvents] =
+    useState<CSSProperties['pointerEvents']>('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 id="open-modal" 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',
+                } as any
+              }
+            >
+              <button>Start button</button>
+              Hello world
+              <LoremIpsum />
+              <button>End button</button>
+            </Modal>
+          </ModalBackdrop>
+        </Portal>
+      )}
+    </>
+  );
+};
+
+export const SimpleModalControlled = () => (
+  <Wrapper>
+    <SimpleModalControlledExample />
+  </Wrapper>
+);
+
+export const NestedModalControlled = () => (
+  <Wrapper>
+    <NestedModalControlledExample />
+  </Wrapper>
+);
+
+export const SimpleModalControlledAnimated = () => (
+  <Wrapper>
+    <SimpleModalControlledAnimatedExample />
+  </Wrapper>
+);

package/src/Modal/Modal.tsx

@@ -1,48 +1,48 @@
-import type {
-  CSSProperties,
-  ElementType,
-  HTMLAttributes,
-  ReactNode,
-} from 'react';
-import { forwardRef, useRef } from 'react';
-
-import { useAutoFocus, useFocusReturn, useRemoveBodyScroll } from '../hooks';
-import { FocusLock } from '../FocusLock';
-import { assignMultipleRefs } from '../utils';
-
-export interface ModalProps extends HTMLAttributes<HTMLDivElement> {
-  as?: ElementType<any>;
-  innerAs?: ElementType<any>;
-  children?: ReactNode;
-  style?: 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, modalRef);
-    useRemoveBodyScroll(trapFocus, modalRef);
-    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={-1}
-          {...otherProps}
-        >
-          {children}
-        </Comp>
-      </FocusLock>
-    );
-  }
-);
+import type {
+  CSSProperties,
+  ElementType,
+  HTMLAttributes,
+  ReactNode,
+} from 'react';
+import { forwardRef, useRef } from 'react';
+
+import { useAutoFocus, useFocusReturn, useRemoveBodyScroll } from '../hooks';
+import { FocusLock } from '../FocusLock';
+import { assignMultipleRefs } from '../utils';
+
+export interface ModalProps extends HTMLAttributes<HTMLDivElement> {
+  as?: ElementType<any>;
+  innerAs?: ElementType<any>;
+  children?: ReactNode;
+  style?: 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, modalRef);
+    useRemoveBodyScroll(trapFocus, modalRef);
+    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={-1}
+          {...otherProps}
+        >
+          {children}
+        </Comp>
+      </FocusLock>
+    );
+  }
+);