@infonomic/uikit 6.1.0 → 6.2.0

package/src/widgets/drawer/drawer.module.css

@@ -1,84 +1,108 @@
 @layer infonomic-base, infonomic-utilities, infonomic-theme, infonomic-components;
 
 @layer infonomic-components {
+
+  /* Backdrop overlay (replaces previous Overlay component) */
+
+  .backdrop,
+  :global(.infonomic-drawer-backdrop) {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(245, 245, 245, 0.35);
+    transition: opacity 200ms ease;
+  }
+
+  .backdrop[data-starting-style],
+  .backdrop[data-ending-style] {
+    opacity: 0;
+  }
+
+  :global(.dark) .backdrop,
+  :global([data-theme="dark"]) .backdrop,
+  :global(.dark .infonomic-drawer-backdrop),
+  :global([data-theme="dark"] .infonomic-drawer-backdrop) {
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+
+  /* Drawer wrapper / popup — the sliding panel itself */
+
   .drawer-wrapper,
   :global(.infonomic-drawer-wrapper) {
     position: fixed;
     display: flex;
     flex-direction: column;
-    justify-content: end;
     top: 0;
-    left: 0;
     right: 0;
     bottom: 0;
-    z-index: 30;
-    opacity: 1;
+    background-color: var(--surface-panel);
+    box-shadow: var(--shadow-md);
+    overflow: hidden;
+    transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
+  }
+
+  .drawer-wrapper[data-open] {
+    transform: translateX(var(--drawer-swipe-movement-x, 0px));
+  }
+
+  .drawer-wrapper[data-closed],
+  .drawer-wrapper[data-starting-style] {
+    transform: translateX(100%);
   }
 
+  .drawer-wrapper[data-swiping] {
+    transition: none;
+  }
+
+  /* Container (inner wrapper, no longer needs positioning) */
+
   .drawer-container,
   :global(.infonomic-drawer-container) {
-    position: absolute;
-    right: 0;
     height: 100%;
-    background-color: var(--surface-panel);
-    box-shadow: var(--shadow-md);
-    z-index: inherit;
   }
 
-  .drawer-container[aria-hidden="false"],
-  :global(.infonomic-drawer-container[aria-hidden="false"]) {
-    animation: slideIn 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  /* Width variant: narrow */
+
+  .drawer-narrow,
+  :global(.infonomic-drawer-narrow) {
+    width: calc(100% - 32px);
+    max-width: 400px;
   }
 
-  .drawer-depth-0.drawer-medium .drawer-container,
-  .drawer-depth-0.drawer-wide .drawer-container,
-  :global(.infonomic-drawer-depth-0.drawer-medium .drawer-container),
-  :global(.infonomic-drawer-depth-0.drawer-wide .drawer-container) {
+  /* Width variants: medium/wide at different depths */
+
+  .drawer-depth-0.drawer-medium,
+  .drawer-depth-0.drawer-wide {
     width: 90%;
   }
 
-  .drawer-depth-1.drawer-medium .drawer-container,
-  .drawer-depth-1.drawer-wide .drawer-container,
-  :global(.infonomic-drawer-depth-1.drawer-medium .drawer-container),
-  :global(.infonomic-drawer-depth-1.drawer-wide .drawer-container) {
+  .drawer-depth-1.drawer-medium,
+  .drawer-depth-1.drawer-wide {
     width: 88%;
   }
 
-  .drawer-depth-2.drawer- .drawer-container,
-  .drawer-depth-2.drawer-wide .drawer-container,
-  :global(.infonomic-drawer-depth-2.drawer-medium .drawer-container),
-  :global(.infonomic-drawer-depth-2.drawer-wide .drawer-container) {
+  .drawer-depth-2.drawer-medium,
+  .drawer-depth-2.drawer-wide {
     width: 86%;
   }
 
   @media (min-width: 48rem) {
-    .drawer-depth-0.drawer-medium .drawer-container,
-    :global(.infonomic-drawer-depth-0.drawer-medium .drawer-container) {
+    .drawer-depth-0.drawer-medium {
       width: 600px;
     }
 
-    .drawer-depth-1.drawer-medium .drawer-container,
-    :global(.infonomic-drawer-depth-1.drawer-medium .drawer-container) {
+    .drawer-depth-1.drawer-medium {
       width: 580px;
     }
 
-    .drawer-depth-2.drawer- .drawer-container,
-    :global(.infonomic-drawer-depth-2.drawer-medium .drawer-container) {
+    .drawer-depth-2.drawer-medium {
       width: 560px;
     }
   }
 
-  .drawer-narrow .drawer-container,
-  :global(.infonomic-drawer-narrow .infonomic-drawer-container) {
-    width: calc(100% - 32px);
-    max-width: 400px;
-  }
-
-  .drawer-container[aria-hidden="true"],
-  :global(.infonomic-drawer-container[aria-hidden="true"]) {
-    transform: translateX(100%);
-    opacity: 0;
-  }
+  /* Sub-component styles */
 
   .drawer-top-actions,
   :global(.infonomic-drawer-top-actions) {
@@ -115,16 +139,4 @@
   :global(.infonomic-drawer-content) {
     padding: var(--spacing-12);
   }
-
-  @keyframes slideIn {
-    from {
-      transform: translateX(100%);
-      opacity: 0;
-    }
-
-    to {
-      transform: translateX(0);
-      opacity: 1;
-    }
-  }
-}
+}

package/src/widgets/drawer/drawer.stories.tsx

@@ -31,7 +31,53 @@ export const Default = (): React.JSX.Element => {
         isOpen={isOpen}
         onDismiss={() => setIsOpen(false)}
       >
-        <Drawer.Container aria-hidden={!isOpen}>
+        <Drawer.Container>
+          <Drawer.TopActions>
+            <button type="button" tabIndex={0} className="sr-only">
+              no action
+            </button>
+            <IconButton
+              arial-label="Close"
+              size="xs"
+              onClick={() => {
+                setIsOpen(false)
+              }}
+            >
+              <CloseIcon width="14px" height="14px" />
+            </IconButton>
+          </Drawer.TopActions>
+          <Drawer.Header className="flex items-center justify-between mb-4">
+            <h2>Drawer Actions Here</h2>
+          </Drawer.Header>
+          <Drawer.Content>
+            <p>Drawer content here...</p>
+          </Drawer.Content>
+        </Drawer.Container>
+      </Drawer>
+    </>
+  )
+}
+
+export const TopOffset = (): React.JSX.Element => {
+  const [isOpen, setIsOpen] = React.useState(false)
+
+  return (
+    <>
+      <Button
+        onClick={() => {
+          setIsOpen(true)
+        }}
+      >
+        Open Drawer
+      </Button>
+      <Drawer
+        id="top-offset-drawer"
+        topOffset="60px"
+        closeOnOverlayClick={false}
+        isOpen={isOpen}
+        onDismiss={() => setIsOpen(false)}
+      >
+        <Drawer.Container>
           <Drawer.TopActions>
             <button type="button" tabIndex={0} className="sr-only">
               no action
@@ -72,12 +118,12 @@ export const Wide = (): React.JSX.Element => {
       </Button>
       <Drawer
         id="first-drawer"
-        closeOnOverlayClick={true}
+        closeOnOverlayClick={false}
         isOpen={isOpen}
         width="wide"
         onDismiss={() => setIsOpen(false)}
       >
-        <Drawer.Container aria-hidden={!isOpen}>
+        <Drawer.Container>
           <Drawer.TopActions>
             <button type="button" tabIndex={0} className="sr-only">
               no action
@@ -136,7 +182,7 @@ export const Nested = (): React.JSX.Element => {
         isOpen={isOpen1}
         onDismiss={() => setIsOpen1(false)}
       >
-        <Drawer.Container aria-hidden={!isOpen1}>
+        <Drawer.Container>
           <Drawer.TopActions>
             <button type="button" tabIndex={0} className="sr-only">
               no action
@@ -170,7 +216,7 @@ export const Nested = (): React.JSX.Element => {
               isOpen={isOpen2}
               onDismiss={() => setIsOpen2(false)}
             >
-              <Drawer.Container aria-hidden={!isOpen2}>
+              <Drawer.Container>
                 <Drawer.TopActions>
                   <button type="button" tabIndex={0} className="sr-only">
                     no action

package/src/widgets/drawer/drawer.tsx

@@ -3,20 +3,15 @@
 import type { ReactNode } from 'react'
 import { useEffect } from 'react'
 
+import { Drawer as BaseDrawer } from '@base-ui/react/drawer'
 import cx from 'classnames'
-import { AnimatePresence, type FeatureBundle, LazyMotion } from 'motion/react'
-import { createPortal } from 'react-dom'
 
-import { Overlay } from '../../components/overlay'
-import { useMediaQuery } from '../../hooks/use-media-query'
-import { getPortalRoot } from '../../utils/getPortalRoot'
 import styles from './drawer.module.css'
 import { DrawerContainer } from './drawer-container'
 import { DrawerContent } from './drawer-content'
 import { useDrawer } from './drawer-context'
 import { DrawerHeader } from './drawer-header'
 import { DrawerTopActions } from './drawer-top-actions'
-import { DrawerWrapper } from './drawer-wrapper'
 
 type Styles = {
   [key: string]: string
@@ -24,11 +19,6 @@ type Styles = {
 
 const typedStyles: Styles = styles
 
-const DomMax: () => Promise<FeatureBundle> = async () =>
-  await import('./motionDomMax').then((mod) => mod.default)
-const DomAnimation: () => Promise<FeatureBundle> = async () =>
-  await import('./motionDomAnimation').then((mod) => mod.default)
-
 export interface DrawerProps {
   id: string
   isOpen: boolean
@@ -47,20 +37,10 @@ const Drawer = ({
   children,
   width = 'narrow',
   topOffset = '0',
-  ...rest
 }: DrawerProps) => {
-  const isMobile = useMediaQuery('(max-width: 768px)') ?? false
   const { addDrawer, removeDrawer, drawers } = useDrawer()
   const depth = drawers.indexOf(id)
 
-  const handleOverlayDismiss = (e: any): void => {
-    e.stopPropagation()
-    e.preventDefault()
-    if (closeOnOverlayClick === true) {
-      onDismiss?.()
-    }
-  }
-
   useEffect(() => {
     if (isOpen) {
       addDrawer(id)
@@ -70,35 +50,38 @@ const Drawer = ({
     return () => removeDrawer(id)
   }, [isOpen, id, addDrawer, removeDrawer])
 
-  const portal = getPortalRoot()
-
-  if (portal === false) return null
-
-  return createPortal(
-    <LazyMotion features={isMobile ? DomMax : DomAnimation}>
-      <AnimatePresence>
-        {isOpen === true && (
-          <DrawerWrapper
-            style={{ zIndex: 20 + depth, top: topOffset }}
-            transition={{ duration: 0.2 }}
-            onEscapeKey={handleOverlayDismiss}
-            className={cx(
-              typedStyles[`drawer-${width}`],
-              typedStyles[`drawer-depth-${depth.toString()}`]
-            )}
-            {...rest}
-          >
-            <Overlay
-              onClick={handleOverlayDismiss}
-              style={{ top: topOffset }}
-              isUnmounting={!(isOpen ?? false)}
-            />
-            {children}
-          </DrawerWrapper>
-        )}
-      </AnimatePresence>
-    </LazyMotion>,
-    portal
+  const hasTopOffset = topOffset !== '0'
+
+  return (
+    <BaseDrawer.Root
+      open={isOpen}
+      onOpenChange={(open) => {
+        if (!open) {
+          onDismiss()
+        }
+      }}
+      modal={hasTopOffset ? 'trap-focus' : true}
+      swipeDirection="right"
+      disablePointerDismissal={closeOnOverlayClick !== true}
+    >
+      <BaseDrawer.Portal>
+        <BaseDrawer.Backdrop
+          className={cx('infonomic-drawer-backdrop', styles.backdrop)}
+          style={hasTopOffset ? { top: topOffset } : undefined}
+        />
+        <BaseDrawer.Popup
+          className={cx(
+            'infonomic-drawer-wrapper',
+            styles['drawer-wrapper'],
+            typedStyles[`drawer-${width}`],
+            typedStyles[`drawer-depth-${depth.toString()}`]
+          )}
+          style={hasTopOffset ? { top: topOffset } : undefined}
+        >
+          {children}
+        </BaseDrawer.Popup>
+      </BaseDrawer.Portal>
+    </BaseDrawer.Root>
   )
 }
 

package/src/widgets/modal/modal.module.css

@@ -1,33 +1,72 @@
 @layer infonomic-base, infonomic-utilities, infonomic-theme, infonomic-components;
 
 @layer infonomic-components {
+
+  /* Backdrop overlay */
+
+  .backdrop,
+  :global(.infonomic-modal-backdrop) {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(245, 245, 245, 0.35);
+    transition: opacity 200ms ease;
+  }
+
+  .backdrop[data-starting-style],
+  .backdrop[data-ending-style] {
+    opacity: 0;
+  }
+
+  :global(.dark) .backdrop,
+  :global([data-theme="dark"]) .backdrop,
+  :global(.dark .infonomic-modal-backdrop),
+  :global([data-theme="dark"] .infonomic-modal-backdrop) {
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+
+  /* Modal wrapper / popup — the dialog surface */
+
   .modal-wrapper,
-  :global(.infonomic-modal-open) {
+  :global(.infonomic-modal-wrapper) {
     position: fixed;
     display: flex;
     flex-direction: column;
-    justify-content: center;
+    justify-content: flex-end;
     align-items: center;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
-    z-index: 30;
-    opacity: 1;
+    transition: opacity 200ms ease;
+  }
+
+  .modal-wrapper[data-starting-style],
+  .modal-wrapper[data-ending-style] {
+    opacity: 0;
   }
 
+  @media screen and (min-width: 40rem) {
+
+    .modal-wrapper,
+    :global(.infonomic-modal-wrapper) {
+      justify-content: center;
+    }
+  }
+
+  /* Container — the visible dialog box */
+
   .modal-container,
   :global(.infonomic-modal-container) {
-    position: absolute;
     display: flex;
     flex-direction: column;
     box-shadow: var(--shadow-md);
     border-radius: var(--border-radius-md);
-    z-index: 20;
     min-height: 300px;
     max-height: 88vh;
     width: 100%;
-    bottom: 0;
     background-color: var(--surface-panel);
     border: 1px solid var(--border-color);
     margin-left: var(--spacing-8);
@@ -35,15 +74,17 @@
   }
 
   @media screen and (min-width: 40rem) {
+
     .modal-container,
     :global(.infonomic-modal-container) {
       max-height: calc(100vh - 24px);
       min-height: auto;
-      bottom: auto;
       width: auto;
     }
   }
 
+  /* Sub-component styles */
+
   .modal-header,
   :global(.infonomic-modal-header) {
     display: flex;
@@ -86,4 +127,4 @@
     padding-left: var(--spacing-16);
     padding-right: var(--spacing-16);
   }
-}
+}

package/src/widgets/modal/modal.tsx

@@ -1,25 +1,16 @@
 'use client'
 
-/* eslint-disable @typescript-eslint/consistent-type-imports */
 import type React from 'react'
 import { createContext, useCallback, useState } from 'react'
 
-import { AnimatePresence, type FeatureBundle, LazyMotion } from 'motion/react'
-import { createPortal } from 'react-dom'
+import { Dialog } from '@base-ui/react/dialog'
+import cx from 'classnames'
 
-import { Overlay } from '../../components/overlay'
-import { useMediaQuery } from '../../hooks/use-media-query'
-import { getPortalRoot } from '../../utils/getPortalRoot'
+import styles from './modal.module.css'
 import { ModalActions } from './modal-actions'
 import { ModalContainer } from './modal-container'
 import { ModalContent } from './modal-content'
 import { ModalHeader } from './modal-header'
-import { ModalWrapper } from './modal-wrapper'
-
-const DomMax: () => Promise<FeatureBundle> = async () =>
-  await import('./motionDomMax').then((mod) => mod.default)
-const DomAnimation: () => Promise<FeatureBundle> = async () =>
-  await import('./motionDomAnimation').then((mod) => mod.default)
 
 export interface ModalProps {
   isOpen?: boolean
@@ -63,40 +54,31 @@ function Modal({
   onDismiss,
   closeOnOverlayClick,
   children,
-  ...rest
-}: ModalProps): React.ReactPortal | null {
-  const isMobile = useMediaQuery('(max-width: 768px)') ?? false
-
-  const handleOverlayDismiss = (e: any): void => {
-    e.stopPropagation()
-    e.preventDefault()
-    if (closeOnOverlayClick === true) {
-      onDismiss?.()
-    }
-  }
-
-  const portal = getPortalRoot()
-
-  if (portal === false) return null
-
-  return createPortal(
+}: ModalProps): React.JSX.Element {
+  return (
     <ModalContext.Provider value={{ onDismiss }}>
-      <LazyMotion features={isMobile ? DomMax : DomAnimation}>
-        <AnimatePresence>
-          {isOpen === true && (
-            <ModalWrapper
-              transition={{ duration: 0.2 }}
-              onEscapeKey={handleOverlayDismiss}
-              {...rest}
-            >
-              <Overlay onClick={handleOverlayDismiss} isUnmounting={!(isOpen ?? false)} />
-              {children}
-            </ModalWrapper>
-          )}
-        </AnimatePresence>
-      </LazyMotion>
-    </ModalContext.Provider>,
-    portal
+      <Dialog.Root
+        open={isOpen}
+        onOpenChange={(open) => {
+          if (!open) {
+            onDismiss?.()
+          }
+        }}
+        modal
+        disablePointerDismissal={closeOnOverlayClick !== true}
+      >
+        <Dialog.Portal>
+          <Dialog.Backdrop
+            className={cx('infonomic-modal-backdrop', styles.backdrop)}
+          />
+          <Dialog.Popup
+            className={cx('infonomic-modal-wrapper', styles['modal-wrapper'])}
+          >
+            {children}
+          </Dialog.Popup>
+        </Dialog.Portal>
+      </Dialog.Root>
+    </ModalContext.Provider>
   )
 }
 

package/dist/components/overlay/index.d.ts

@@ -1,2 +0,0 @@
-export * from './overlay';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/overlay/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/overlay/index.ts"],"names":[],"mappings":"AACA,cAAc,WAAW,CAAA"}

package/dist/components/overlay/index.js

@@ -1 +0,0 @@
-export * from "./overlay.js";

package/dist/components/overlay/overlay.d.ts

@@ -1,9 +0,0 @@
-import type React from 'react';
-type OverlayIntrinsicProps = React.JSX.IntrinsicElements['div'];
-export interface OverlayProps extends OverlayIntrinsicProps {
-    isUnmounting?: boolean;
-    className?: string;
-}
-export declare function Overlay(props: OverlayProps): React.JSX.Element;
-export {};
-//# sourceMappingURL=overlay.d.ts.map

package/dist/components/overlay/overlay.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"overlay.d.ts","sourceRoot":"","sources":["../../../src/components/overlay/overlay.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAO9B,KAAK,qBAAqB,GAAG,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAA;AAC/D,MAAM,WAAW,YAAa,SAAQ,qBAAqB;IACzD,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAuCD,wBAAgB,OAAO,CAAC,KAAK,EAAE,YAAY,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAiB9D"}

package/dist/components/overlay/overlay.js

@@ -1,51 +0,0 @@
-"use client";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useEffect } from "react";
-import classnames from "classnames";
-import overlay_module from "./overlay.module.js";
-const BodyLock = ()=>{
-    useEffect(()=>{
-        const mediaMatch = window.matchMedia('(min-width: 768px)');
-        let appBar;
-        const classList = document.body.classList;
-        appBar = document.getElementById('app-bar');
-        classList.add('overlay-shown');
-        if (null != appBar) appBar.classList.add('app-bar-overlay-shown');
-        if (mediaMatch.matches) {
-            classList.add('overlay-shown--desktop');
-            if (null != appBar) appBar.classList.add('app-bar-overlay-shown--desktop');
-        } else {
-            classList.add('overlay-shown--mobile');
-            if (null != appBar) appBar.classList.add('app-bar-overlay-shown--mobile');
-        }
-        return ()=>{
-            classList.remove('overlay-shown');
-            if (null != appBar) appBar.classList.remove('app-bar-overlay-shown');
-            if (mediaMatch.matches) {
-                classList.remove('overlay-shown--desktop');
-                if (null != appBar) appBar.classList.remove('app-bar-overlay-shown', 'app-bar-overlay-shown--desktop');
-            } else {
-                classList.remove('overlay-shown--mobile');
-                if (null != appBar) appBar.classList.remove('app-bar-overlay-shown--mobile');
-            }
-        };
-    }, []);
-    return null;
-};
-function Overlay(props) {
-    const { isUnmounting, className, ...rest } = props;
-    const classes = classnames(overlay_module.overlay, 'animate-fade-in', {
-        'animate-fade-out': isUnmounting
-    });
-    return /*#__PURE__*/ jsxs(Fragment, {
-        children: [
-            /*#__PURE__*/ jsx(BodyLock, {}),
-            /*#__PURE__*/ jsx("div", {
-                role: "presentation",
-                className: classnames(classes, className),
-                ...rest
-            })
-        ]
-    });
-}
-export { Overlay };