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

package/README.md

@@ -14,10 +14,10 @@ entry point.
 
 ## Install
 
-While the version is a release candidate, install it with the `next` tag, together with the font:
+Install it together with the font:
 
 ```sh
-npm i @neo-design/foundations@next @neo-design/mui@next @fontsource/noto-sans
+npm i @neo-design/foundations @neo-design/mui @fontsource/noto-sans
 ```
 
 npm brings React, Material UI and Emotion as peers, in the versions this package supports —the `peerDependencies`
@@ -25,7 +25,7 @@ of [`package.json`](package.json)—. **With pnpm**, which does not let your app
 itself, name them:
 
 ```sh
-pnpm add @neo-design/foundations@next @neo-design/mui@next @fontsource/noto-sans \
+pnpm add @neo-design/foundations @neo-design/mui @fontsource/noto-sans \
   @mui/material@6 @emotion/react @emotion/styled react react-dom
 ```
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neo-design/mui",
-  "version": "1.0.0-rc.7",
+  "version": "1.0.0",
   "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.7"
+    "@neo-design/foundations": "1.0.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11",

package/theme/components.mjs

@@ -461,6 +461,52 @@ export const components = {
           '& .MuiButton-root': { inlineSize: '100%' },
           '&[data-scroll="top"], &[data-scroll="mid"]': { borderBlockStart: '1px solid var(--border--base--secondary)' },
         },
+
+        '&.MuiDrawer-paperAnchorRight': {
+          backgroundColor: 'var(--surface--base--default)',
+          inlineSize: '540px', maxInlineSize: '100vw', blockSize: '100dvh', borderRadius: 0,
+          display: 'flex', flexDirection: 'column', alignItems: 'flex-start',
+          '& > *': { alignSelf: 'stretch' },
+          '&:focus': { outline: 0 },
+        },
+        '& .NeoDrawer-header': {
+          display: 'flex', flexDirection: 'column', flex: '0 0 auto',
+          justifyContent: 'center', alignItems: 'flex-end',
+          '& > *': { alignSelf: 'stretch' },
+          paddingInline: 'var(--neo-space-xl-rem)', paddingBlock: 'var(--neo-space-lg-rem)', gap: 'var(--neo-space-md-rem)',
+        },
+        '&[data-scroll="top"] .NeoDrawer-header, &[data-scroll="mid"] .NeoDrawer-header, &[data-scroll="bottom"] .NeoDrawer-header': {
+          borderBlockEnd: '1px solid var(--border--base--secondary)',
+        },
+        '& .NeoDrawer-headerRow': {
+          display: 'flex', alignItems: 'center', justifyContent: 'center',
+          blockSize: '48px', gap: 'var(--neo-space-none-rem)',
+        },
+        '& .NeoDrawer-title': {
+          ...theme.typography.titleSmBold, color: 'var(--text--base--default)',
+          flex: '1 1 auto', minInlineSize: 0, margin: 0,
+          overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
+        },
+        '& .NeoDrawer-content': {
+          ...theme.typography.bodyLgRegular, color: 'var(--text--base--default)',
+          flex: '1 1 auto', overflowY: 'auto',
+          paddingInline: 'var(--neo-space-xl-rem)', paddingBlock: `0 var(--neo-space-lg-rem)`,
+          '&:focus-visible': { outline: 'none', boxShadow: focusRingInset.boxShadow },
+        },
+        '& .NeoDrawer-image': {
+          blockSize: '224px', overflow: 'hidden',
+          marginInline: 'calc(-1 * var(--neo-space-xl-rem))',
+          '& > img, & > picture, & > video': { inlineSize: '100%', blockSize: '100%', objectFit: 'cover', display: 'block' },
+        },
+        '& .NeoDrawer-actions': {
+          display: 'flex', flexDirection: 'column', gap: 'var(--neo-space-md-rem)', flex: '0 0 auto',
+          paddingInline: 'var(--neo-space-xl-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)' },
+        },
       }),
     },
   },

package/ui/Drawer.mjs

@@ -0,0 +1,14 @@
+'use client';
+// packages/mui/ui/Drawer.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 { DrawerBase } from './_sheet-base.mjs';
+const h = React.createElement;
+
+export const NeoDrawer = React.forwardRef(function NeoDrawer(rawProps, ref) {
+  const { open, onClose, title, image, actions, children, ...rest } = withAliases('NeoDrawer', rawProps);
+  return h(DrawerBase, {
+    open, onClose, title, image, actions, closable: true,
+    ...rest, ref,
+  }, children);
+});

package/ui/_sheet-base.mjs

@@ -1,7 +1,7 @@
 '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 { SwipeableDrawer, Drawer } from '@mui/material';
 import { NeoButtonIcon } from './ButtonIcon.mjs';
 import { renderIcon } from './_icon.mjs';
 import { useScrollState } from './_scroll-state.mjs';
@@ -80,3 +80,60 @@ export const BottomSheetBase = React.forwardRef(function BottomSheetBase({
     actions ? h('footer', { key: 'a', className: 'NeoBottomSheet-actions', 'data-scroll': scroll }, accionesEnOrden) : null,
   );
 });
+
+
+export const DrawerBase = React.forwardRef(function DrawerBase({
+  open, onClose, title, image, actions, children, closable = true,
+  'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, className, ...rest
+}, ref) {
+  const auto = React.useId();
+  const titleId = title ? `neo-drawer-${auto}-title` : undefined;
+
+  if (process.env.NODE_ENV !== 'production') {
+    if (!title) console.warn('[Neo] Drawer: NeoDrawer needs `title`: it is the drawer\'s name for a screen reader, and the header always shows it.');
+    if (!onClose) console.warn('[Neo] Drawer: NeoDrawer needs `onClose`: without it the drawer has no ✕ and no way out.');
+  }
+
+  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: 'tertiary', surface: 'default',
+                         size: 'large', className: 'NeoDrawer-close' },
+        renderIcon('system-close'))
+    : null;
+
+  const header = h('header', { key: 'hdr', className: 'NeoDrawer-header' },
+    h('div', { className: 'NeoDrawer-headerRow' },
+      title ? h('h2', { id: titleId, className: 'NeoDrawer-title' }, title) : null,
+      close));
+
+  return h(Drawer, {
+    ref,
+    anchor: 'right',
+    open: !!open,
+    onClose,
+    slotProps: { backdrop: { 'aria-hidden': 'true' } },
+    className,
+    ...rest,
+    PaperProps: {
+      ...rest.PaperProps,
+      className: ['NeoDrawer', rest.PaperProps?.className].filter(Boolean).join(' '),
+      '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: 'NeoDrawer-content', ref: setRegion, onScroll: watchScroll,
+               'data-scroll': scroll,
+               ...(overflows ? { tabIndex: 0, role: 'region', 'aria-labelledby': ariaLabelledBy || titleId } : null) },
+      image ? h('div', { key: 'img', className: 'NeoDrawer-image' }, image) : null,
+      children),
+    actions ? h('footer', { key: 'a', className: 'NeoDrawer-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, SwipeableDrawerProps, SwitchProps, TabsProps, TooltipProps } from '@mui/material';
+import type { AlertProps, AutocompleteProps, BadgeProps, ButtonProps, CheckboxProps, ChipProps, CircularProgressProps, DialogProps, DrawerProps, 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'];
@@ -274,6 +274,27 @@ export interface NeoComboboxProps<T = string, Multiple extends boolean | undefin
 }
 export declare const NeoCombobox: <T = string, Multiple extends boolean | undefined = false, DisableClearable extends boolean | undefined = false, FreeSolo extends boolean | undefined = false>(props: NeoComboboxProps<T, Multiple, DisableClearable, FreeSolo> & ({ label: ReactNode } | { 'aria-label': string } | { 'aria-labelledby': string }) & RefAttributes<HTMLElement>) => ReactElement | null;
 
+/** Enters from the right edge on the web with complementary or extensive content that the person opens on demand, while the page underneath stays in view. 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 with steps, it is `modal-fullscreen`. On mobile the same content goes in a `bottom-sheet`: the drawer is web-only. */
+export interface NeoDrawerProps extends Partial<Omit<DrawerProps, '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 NeoDrawer: ForwardRefExoticComponent<NeoDrawerProps & RefAttributes<HTMLElement>>;
+
 /** Takes the place of content that does not exist yet and says what can be done about it. NO: To communicate something that just happened, which is `alert`. For the wait while data loads, which is `spinner`: empty and loading are not the same, and mixing them up leaves the person waiting for something that is not coming. */
 export interface NeoEmptyStateProps extends Partial<Omit<HTMLAttributes<HTMLElement>, 'icon' | 'title' | 'description' | 'actions' | 'headingLevel' | 'className' | 'ref'>> {
   /** The icon node. Use the system icons (icons/), not loose SVGs. */

package/ui/index.mjs

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