@neo-design/mui 1.0.0-rc.6 → 1.0.0-rc.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neo-design/mui",
-  "version": "1.0.0-rc.6",
+  "version": "1.0.0-rc.7",
   "description": "Neo — the Material UI theme and the Neo* React components, on top of @neo-design/foundations.",
   "homepage": "https://github.com/jzamorano-ui/neo-ds/blob/main/docs/dev/INTEGRATION.md",
   "repository": {
@@ -29,7 +29,7 @@
     "theme"
   ],
   "dependencies": {
-    "@neo-design/foundations": "1.0.0-rc.6"
+    "@neo-design/foundations": "1.0.0-rc.7"
   },
   "peerDependencies": {
     "@emotion/react": "^11",

package/theme/components.mjs

@@ -398,6 +398,73 @@ export const components = {
     },
   },
 
+  MuiDrawer: {
+    styleOverrides: {
+      paper: ({ theme }) => ({
+        '&.MuiDrawer-paperAnchorBottom': {
+          backgroundColor: 'var(--surface--base--default)',
+          borderStartStartRadius: 'var(--neo-radius-xl)', borderStartEndRadius: 'var(--neo-radius-xl)',
+          borderEndStartRadius: 0, borderEndEndRadius: 0,
+          maxHeight: '90dvh',
+          display: 'flex', flexDirection: 'column', alignItems: 'flex-start',
+          '& > *': { alignSelf: 'stretch' },
+          '&:focus': { outline: 0 },
+        },
+        '& .NeoBottomSheet-handle': {
+          inlineSize: '40px', blockSize: '4px', borderRadius: 'var(--neo-radius-pill)',
+          backgroundColor: 'var(--fill--base--medium)',
+          marginInline: 'auto', marginBlock: 'var(--neo-space-sm-rem)', flex: '0 0 auto',
+        },
+        '&[data-image="true"] .NeoBottomSheet-handle': { backgroundColor: 'var(--fill--base--default)' },
+
+        '& .NeoBottomSheet-header': {
+          display: 'flex', flexDirection: 'column', flex: '0 0 auto',
+          justifyContent: 'center', alignItems: 'flex-end',
+          '& > *': { alignSelf: 'stretch' },
+          paddingInline: 'var(--neo-space-lg-rem)', paddingBlock: `0 var(--neo-space-xs-rem)`,
+        },
+        '&[data-scroll="top"] .NeoBottomSheet-header, &[data-scroll="mid"] .NeoBottomSheet-header, &[data-scroll="bottom"] .NeoBottomSheet-header': {
+          borderBlockEnd: '1px solid var(--border--base--secondary)',
+        },
+        '& .NeoBottomSheet-headerRow': {
+          display: 'flex', alignItems: 'center', justifyContent: 'flex-end',
+          blockSize: '40px', gap: 'var(--neo-space-none-rem)',
+        },
+        '& .NeoBottomSheet-title': {
+          ...theme.typography.bodyLgBold, color: 'var(--text--base--default)',
+          flex: '1 1 auto', minInlineSize: 0, margin: 0,
+          overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
+        },
+
+        '& .NeoBottomSheet-headerImage': {
+          position: 'relative', blockSize: '160px', flex: '0 0 auto', overflow: 'hidden',
+          '& > img, & > picture, & > video': { inlineSize: '100%', blockSize: '100%', objectFit: 'cover', display: 'block' },
+          '& .NeoBottomSheet-handle': { position: 'absolute', insetInline: 0, insetBlockStart: 0 },
+          '& .NeoBottomSheet-close': {
+            position: 'absolute', insetBlockStart: 'var(--neo-space-lg-rem)', insetInlineEnd: 'var(--neo-space-lg-rem)',
+          },
+        },
+
+        '& .NeoBottomSheet-content': {
+          ...theme.typography.bodyLgRegular, color: 'var(--text--base--default)',
+          flex: '1 1 auto', overflowY: 'auto', minBlockSize: '200px',
+          paddingInline: 'var(--neo-space-lg-rem)', paddingBlock: `0 var(--neo-space-lg-rem)`,
+          '&:focus-visible': { outline: 'none', boxShadow: focusRingInset.boxShadow },
+        },
+
+        '& .NeoBottomSheet-actions': {
+          display: 'flex', flexDirection: 'column', gap: 'var(--neo-space-sm-rem)', flex: '0 0 auto',
+          paddingInline: 'var(--neo-space-lg-rem)',
+          paddingBlock: `var(--neo-space-lg-rem) var(--neo-space-2xl-rem)`,
+          backgroundColor: 'var(--surface--base--default)',
+          '& > div': { display: 'contents' },
+          '& .MuiButton-root': { inlineSize: '100%' },
+          '&[data-scroll="top"], &[data-scroll="mid"]': { borderBlockStart: '1px solid var(--border--base--secondary)' },
+        },
+      }),
+    },
+  },
+
   MuiCheckbox: {
     defaultProps: { disableRipple: true, checkedIcon: _h(CheckboxCheckedIcon), indeterminateIcon: _h(CheckboxIndeterminateIcon) },
     styleOverrides: {

package/ui/BottomSheet.mjs

@@ -0,0 +1,14 @@
+'use client';
+// packages/mui/ui/BottomSheet.mjs — emitted without comments. The reasoning behind each decision lives in Neo's source repository.
+import React from 'react';
+import { withAliases } from './_alias-props.mjs';
+import { BottomSheetBase } from './_sheet-base.mjs';
+const h = React.createElement;
+
+export const NeoBottomSheet = React.forwardRef(function NeoBottomSheet(rawProps, ref) {
+  const { open, onClose, title, image, actions, children, ...rest } = withAliases('NeoBottomSheet', rawProps);
+  return h(BottomSheetBase, {
+    open, onClose, title, image, actions, closable: true,
+    ...rest, ref,
+  }, children);
+});

package/ui/_modal-base.mjs

@@ -4,6 +4,7 @@ import React from 'react';
 import { Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions, useMediaQuery } from '@mui/material';
 import { NeoButtonIcon } from './ButtonIcon.mjs';
 import { renderIcon } from './_icon.mjs';
+import { useScrollState } from './_scroll-state.mjs';
 const h = React.createElement;
 
 const ICON_BY_TYPE = {
@@ -12,9 +13,12 @@ const ICON_BY_TYPE = {
 };
 
 
-const unaPorUna = (acciones) => {
+export const unaPorUna = (acciones) => {
   const lista = React.Children.toArray(acciones);
-  return lista.length === 1 && lista[0].type === React.Fragment ? React.Children.toArray(lista[0].props.children) : lista;
+  if (lista.length !== 1 || !React.isValidElement(lista[0])) return lista;
+  const [unico] = lista;
+  const pelado = unico.type === 'div' && !unico.props.className && !unico.props.style;
+  return unico.type === React.Fragment || pelado ? React.Children.toArray(unico.props.children) : lista;
 };
 
 export const ModalDialogBase = React.forwardRef(function ModalDialogBase({
@@ -27,31 +31,7 @@ export const ModalDialogBase = React.forwardRef(function ModalDialogBase({
   const apiladas = fullScreen ? angosto : size === 'xs';
   const accionesEnOrden = apiladas && actions ? unaPorUna(actions).reverse() : actions;
 
-  const contentRef = React.useRef(null);
-  const [contentNode, setContentNode] = React.useState(null);
-  const setContent = React.useCallback((node) => { contentRef.current = node; setContentNode(node); }, []);
-  const [scroll, setScroll] = React.useState('none');
-  const [overflows, setOverflows] = React.useState(false);
-  const watchScroll = React.useCallback(() => {
-    const el = contentRef.current;
-    if (!el) return;
-    const extra = el.scrollHeight - el.clientHeight;
-    setOverflows(extra > 1);
-    if (extra <= 1) return setScroll('none');
-    if (el.scrollTop <= 1) return setScroll('top');
-    if (el.scrollTop >= extra - 1) return setScroll('bottom');
-    setScroll('mid');
-  }, []);
-  React.useEffect(() => {
-    const el = contentNode;
-    if (!el) return undefined;
-    watchScroll();
-    if (typeof ResizeObserver === 'undefined') return undefined;
-    const ro = new ResizeObserver(watchScroll);
-    ro.observe(el);
-    for (const h of el.children) ro.observe(h);
-    return () => ro.disconnect();
-  }, [watchScroll, open, children, contentNode]);
+  const { setRegion: setContent, watchScroll, scroll, overflows } = useScrollState([open, children]);
   const titleId = `neo-modal-${auto}-title`;
   const descriptionId = description ? `neo-modal-${auto}-description` : undefined;
   const rowId = `neo-modal-${auto}-row`;

package/ui/_scroll-state.mjs

@@ -0,0 +1,35 @@
+'use client';
+// packages/mui/ui/_scroll-state.mjs — emitted without comments. The reasoning behind each decision lives in Neo's source repository.
+import React from 'react';
+
+export function useScrollState(deps = []) {
+  const ref = React.useRef(null);
+  const [node, setNode] = React.useState(null);
+  const setRegion = React.useCallback((n) => { ref.current = n; setNode(n); }, []);
+  const [scroll, setScroll] = React.useState('none');
+  const [overflows, setOverflows] = React.useState(false);
+
+  const watchScroll = React.useCallback(() => {
+    const el = ref.current;
+    if (!el) return;
+    const extra = el.scrollHeight - el.clientHeight;
+    setOverflows(extra > 1);
+    if (extra <= 1) return setScroll('none');
+    if (el.scrollTop <= 1) return setScroll('top');
+    if (el.scrollTop >= extra - 1) return setScroll('bottom');
+    setScroll('mid');
+  }, []);
+
+  React.useEffect(() => {
+    const el = node;
+    if (!el) return undefined;
+    watchScroll();
+    if (typeof ResizeObserver === 'undefined') return undefined;
+    const ro = new ResizeObserver(watchScroll);
+    ro.observe(el);
+    for (const hijo of el.children) ro.observe(hijo);
+    return () => ro.disconnect();
+  }, [watchScroll, node, ...deps]);
+
+  return { setRegion, watchScroll, scroll, overflows };
+}

package/ui/_sheet-base.mjs

@@ -0,0 +1,82 @@
+'use client';
+// packages/mui/ui/_sheet-base.mjs — emitted without comments. The reasoning behind each decision lives in Neo's source repository.
+import React from 'react';
+import { SwipeableDrawer } from '@mui/material';
+import { NeoButtonIcon } from './ButtonIcon.mjs';
+import { renderIcon } from './_icon.mjs';
+import { useScrollState } from './_scroll-state.mjs';
+import { unaPorUna } from './_modal-base.mjs';
+const h = React.createElement;
+
+
+export const BottomSheetBase = React.forwardRef(function BottomSheetBase({
+  open, onClose, onOpen, title, image, actions, children, closable = true,
+  'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, className, ...rest
+}, ref) {
+  const auto = React.useId();
+  const titleId = title && !image ? `neo-sheet-${auto}-title` : undefined;
+
+  if (process.env.NODE_ENV !== 'production') {
+    if (!title && !ariaLabel && !ariaLabelledBy) {
+      console.warn('[Neo] BottomSheet: NeoBottomSheet needs a name: pass `title`, or —when you pass `image`— give the content a heading and point `aria-labelledby` at it.');
+    }
+    if (!onClose) {
+      console.warn('[Neo] BottomSheet: NeoBottomSheet needs `onClose`: without it the sheet has no ✕, no swipe and no way out.');
+    }
+    if (title && image) {
+      console.warn('[Neo] BottomSheet: with `image` the header has no title slot — the master draws one or the other. The `title` will not be shown.');
+    }
+  }
+
+  const { setRegion, watchScroll, scroll, overflows } = useScrollState([open, children]);
+
+  const accionesEnOrden = actions ? unaPorUna(actions).reverse() : actions;
+
+  const close = closable && onClose
+    ? h(NeoButtonIcon, { key: 'x', onClick: onClose, 'aria-label': 'Cerrar',
+                         variant: image ? 'primary' : 'tertiary', surface: image ? 'inverse' : 'default',
+                         size: 'medium', className: 'NeoBottomSheet-close' },
+        renderIcon('system-close'))
+    : null;
+
+  const handle = h('div', { key: 'h', className: 'NeoBottomSheet-handle', 'aria-hidden': 'true' });
+
+  const header = image
+    ? h('div', { key: 'hdr', className: 'NeoBottomSheet-headerImage' }, image, handle, close)
+    : h('header', { key: 'hdr', className: 'NeoBottomSheet-header' },
+        handle,
+        h('div', { className: 'NeoBottomSheet-headerRow' },
+          title ? h('h2', { id: titleId, className: 'NeoBottomSheet-title' }, title) : null,
+          close));
+
+  return h(SwipeableDrawer, {
+    ref,
+    anchor: 'bottom',
+    open: !!open,
+    onClose,
+    onOpen: onOpen || (() => {}),
+    disableSwipeToOpen: true,
+    slotProps: { backdrop: { 'aria-hidden': 'true' } },
+    className,
+    ...rest,
+    PaperProps: {
+      ...rest.PaperProps,
+      className: ['NeoBottomSheet', rest.PaperProps?.className].filter(Boolean).join(' '),
+      'data-image': image ? 'true' : 'false',
+      'data-scroll': scroll,
+      role: 'dialog',
+      'aria-modal': 'true',
+      'aria-labelledby': ariaLabelledBy || titleId,
+      'aria-label': (ariaLabelledBy || titleId) ? undefined : ariaLabel,
+      tabIndex: -1,
+    },
+    ...(rest.slotProps ? { slotProps: { backdrop: { 'aria-hidden': 'true' }, ...rest.slotProps } } : {}),
+  },
+    header,
+    h('div', { key: 'c', className: 'NeoBottomSheet-content', ref: setRegion, onScroll: watchScroll,
+               'data-scroll': scroll,
+               ...(overflows ? { tabIndex: 0, role: 'region', 'aria-labelledby': ariaLabelledBy || titleId } : null) },
+      children),
+    actions ? h('footer', { key: 'a', className: 'NeoBottomSheet-actions', 'data-scroll': scroll }, accionesEnOrden) : null,
+  );
+});

package/ui/index.d.ts

@@ -9,7 +9,7 @@
 /// <reference path="../theme/neo.d.ts" />
 import type { ReactNode, ReactElement, ForwardRefExoticComponent, RefAttributes, Ref, ChangeEvent, SyntheticEvent, MouseEvent, HTMLAttributes } from 'react';
 import type { SxProps, Theme, ThemeOptions } from '@mui/material/styles';
-import type { AlertProps, AutocompleteProps, BadgeProps, ButtonProps, CheckboxProps, ChipProps, CircularProgressProps, DialogProps, IconButtonProps, LinkProps, MenuProps, OutlinedInputProps, RadioProps, RadioGroupProps, SelectProps, SnackbarProps, SwitchProps, TabsProps, TooltipProps } from '@mui/material';
+import type { AlertProps, AutocompleteProps, BadgeProps, ButtonProps, CheckboxProps, ChipProps, CircularProgressProps, DialogProps, IconButtonProps, LinkProps, MenuProps, OutlinedInputProps, RadioProps, RadioGroupProps, SelectProps, SnackbarProps, SwipeableDrawerProps, SwitchProps, TabsProps, TooltipProps } from '@mui/material';
 
 /** A handler checked bivariantly, the way React types its own event handlers: one typed with MUI's type still fits. */
 type NeoHandler<A extends unknown[]> = { bivarianceHack(...args: A): void }['bivarianceHack'];
@@ -103,6 +103,27 @@ export interface NeoBannerProps extends Partial<Omit<HTMLAttributes<HTMLElement>
 }
 export declare const NeoBanner: ForwardRefExoticComponent<NeoBannerProps & ({ title: ReactNode } | { 'aria-label': string } | { 'aria-labelledby': string }) & RefAttributes<HTMLElement>>;
 
+/** Rises from the bottom edge on mobile with complementary content that can wait, or a short task, while the person can still see and return to the page underneath. NO: If the content demands a decision, or reports an error the person has to resolve, it is `modal-dialog`. If it is a long task or dense information, it is `modal-fullscreen`. On desktop the same content moves to a lateral drawer: the sheet is mobile-only. */
+export interface NeoBottomSheetProps extends Partial<Omit<SwipeableDrawerProps, 'open' | 'onClose' | 'title' | 'image' | 'actions' | 'children' | 'className' | 'sx' | 'ref'>> {
+  /** The panel or the bubble, open (controlled). */
+  open?: boolean;
+  /** The close handler. Its presence draws the ✕. */
+  onClose?: (...args: unknown[]) => void;
+  /** The title. It is a prop and not content because `aria-labelledby` anchors to it. */
+  title?: ReactNode;
+  /**  */
+  image?: ReactNode;
+  /** The call to action. One at most (C1). */
+  actions?: ReactNode;
+  /** The content. Whoever uses the component provides it; in the stories it comes from the minimal example. */
+  children?: ReactNode;
+  /** Classes from the consumer. They merge with the component ones; they do not replace them. */
+  className?: string;
+  /** The MUI `sx`: per-instance styles, with access to the theme. */
+  sx?: SxProps<Theme>;
+}
+export declare const NeoBottomSheet: ForwardRefExoticComponent<NeoBottomSheetProps & ({ title: ReactNode } | { 'aria-label': string } | { 'aria-labelledby': string }) & RefAttributes<HTMLElement>>;
+
 /** Runs actions. NO: To navigate it is `link`; for an on/off option it is `toggle`. */
 export interface NeoButtonProps extends Partial<Omit<ButtonProps, 'family' | 'variant' | 'surface' | 'size' | 'label' | 'iconLeft' | 'iconRight' | 'loading' | 'disabled' | 'children' | 'className' | 'sx' | 'color' | 'ref'>> {
   /** semantic family Default: 'system'. */

package/ui/index.mjs

@@ -19,6 +19,7 @@ export { NeoEmptyState } from './EmptyState.mjs';
 export { NeoMenu }      from './Menu.mjs';
 export { NeoModalDialog } from './ModalDialog.mjs';
 export { NeoModalFullscreen } from './ModalFullscreen.mjs';
+export { NeoBottomSheet } from './BottomSheet.mjs';
 export { NeoTabs }      from './Tabs.mjs';
 export { NeoBadge }     from './Badge.mjs';
 export { NeoTag }       from './Tag.mjs';