@neo-design/mui 1.0.0-rc.4

package/ui/_help.mjs

@@ -0,0 +1,25 @@
+'use client';
+// packages/mui/ui/_help.mjs — emitted without comments. The reasoning behind each decision lives in Neo's source repository.
+import React from 'react';
+import { NeoTooltip } from './Tooltip.mjs';
+import { renderIcon } from './_icon.mjs';
+import { warn } from './_warn.mjs';
+
+const h = React.createElement;
+
+export const HELP_ICON = 'semantic-info';
+
+export const helpIcon = ({ text, name, label, comp, prefix }) => {
+  if (!text) return null;
+  const derived = typeof label === 'string' && label.trim() ? `Ayuda sobre ${label.trim()}` : null;
+  const accessible = name || derived;
+  if (!accessible) {
+    warn(`${comp}: the help ⓘ has no accessible name — its \`label\` is not text and no `
+      + '`tooltipLabel` was passed. The button has no name for a screen reader.');
+  }
+  return h(NeoTooltip, { label: text, describeChild: true },
+    h('button', {
+      type: 'button', className: `${prefix}__icon--tooltip`,
+      'aria-label': accessible || undefined, title: undefined,
+    }, renderIcon(HELP_ICON)));
+};

package/ui/_icon.mjs

@@ -0,0 +1,43 @@
+'use client';
+// packages/mui/ui/_icon.mjs — emitted without comments. The reasoning behind each decision lives in Neo's source repository.
+import React from 'react';
+import { ALIASES as ICON_ALIASES } from '@neo-design/foundations/icon-aliases.mjs';
+
+const warned = new Set();
+const check = (id) => {
+  if (process.env.NODE_ENV === 'production') return;
+  if (typeof document === 'undefined' || warned.has(id)) return;
+  queueMicrotask(() => {
+    if (warned.has(id) || document.getElementById(id)) return;
+    warned.add(id);
+    const hasSprite = !!document.querySelector('symbol[id], svg > defs symbol');
+    console.warn(hasSprite
+      ? `[Neo] icon: '#${id}' is not in the sprite. The 164 ids are in packages/foundations/icons/index.json — an id is <family>-<name>, e.g. #system-mail.`
+      : `[Neo] icon: '#${id}' does not draw and the sprite is not in the document. Inject it once, as high in the tree as possible — docs/dev/INTEGRATION.md §3.`);
+  });
+};
+
+const warnedAliases = new Set();
+const translate = (id) => {
+  const newName = ICON_ALIASES[id];
+  if (!newName || newName === id) return id;
+  if (process.env.NODE_ENV !== 'production') {
+    if (!warnedAliases.has(id)) {
+      warnedAliases.add(id);
+      console.warn(`[Neo] icon: '#${id}' is now called '#${newName}', since the move to English. It still draws in this version and stops in the next one.`);
+    }
+  }
+  return newName;
+};
+
+export const renderIcon = (x, extraClass) => {
+  if (typeof x === 'string' && x) {
+    const id = translate(x.startsWith('#') ? x.slice(1) : x);
+    check(id);
+    return React.createElement('svg', { className: extraClass ? `icon ${extraClass}` : 'icon', 'aria-hidden': 'true' },
+      React.createElement('use', { href: `#${id}` }));
+  }
+  return extraClass && React.isValidElement(x)
+    ? React.cloneElement(x, { className: [x.props.className, extraClass].filter(Boolean).join(' ') })
+    : x;
+};

package/ui/_inner-input.mjs

@@ -0,0 +1,7 @@
+// packages/mui/ui/_inner-input.mjs — emitted without comments. The reasoning behind each decision lives in Neo's source repository.
+import { version as muiVersion } from '@mui/material';
+
+const MAJOR = Number(String(muiVersion).split('.')[0]) || 5;
+
+export const innerInputProps = (attrs) =>
+  MAJOR >= 6 ? { slotProps: { input: attrs } } : { inputProps: attrs };

package/ui/_keyboard-focus.mjs

@@ -0,0 +1,24 @@
+'use client';
+// packages/mui/ui/_keyboard-focus.mjs — emitted without comments. The reasoning behind each decision lives in Neo's source repository.
+import React from 'react';
+
+let keyboard = true;
+let listening = false;
+const listen = () => {
+  if (listening || typeof document === 'undefined') return;
+  listening = true;
+  document.addEventListener('keydown', (e) => { if (!e.metaKey && !e.altKey && !e.ctrlKey) keyboard = true; }, true);
+  for (const type of ['pointerdown', 'mousedown', 'touchstart']) document.addEventListener(type, () => { keyboard = false; }, true);
+};
+const isText = (el) => Boolean(el) && (el.tagName === 'INPUT' || el.tagName === 'TEXTAREA');
+
+export function useKeyboardFocus() {
+  const [active, setActive] = React.useState(false);
+  React.useEffect(listen, []);
+  return {
+    active,
+    onFocus: (e) => { if (isText(e.target)) setActive(keyboard); },
+    onBlur: (e) => { if (isText(e.target)) setActive(false); },
+    onPointerDown: () => setActive(false),
+  };
+}

package/ui/_modal-base.mjs

@@ -0,0 +1,95 @@
+'use client';
+// packages/mui/ui/_modal-base.mjs — emitted without comments. The reasoning behind each decision lives in Neo's source repository.
+import React from 'react';
+import { Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions, useMediaQuery } from '@mui/material';
+import { NeoButtonIcon } from './ButtonIcon.mjs';
+import { renderIcon } from './_icon.mjs';
+const h = React.createElement;
+
+const ICON_BY_TYPE = {
+  info: 'semantic-info', success: 'semantic-success', warning: 'semantic-warning',
+  error: 'semantic-error', brand: 'brand-sparkles',
+};
+
+
+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;
+};
+
+export const ModalDialogBase = React.forwardRef(function ModalDialogBase({
+  open, onClose, title, description, size = 'xs', type = 'default', closable = true,
+  actions, children, back, fullScreen = false, ...rest
+}, ref) {
+  const auto = React.useId();
+
+  const angosto = useMediaQuery('(max-width: 719px)');
+  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 titleId = `neo-modal-${auto}-title`;
+  const descriptionId = description ? `neo-modal-${auto}-description` : undefined;
+  const rowId = `neo-modal-${auto}-row`;
+
+  if (process.env.NODE_ENV !== 'production') {
+    if (!title) console.warn('[Neo] Modal: the title is required — it is the accessible name of the dialog.');
+  }
+
+  const iconNode = ICON_BY_TYPE[type];
+
+  const close = closable && onClose
+    ? h(NeoButtonIcon, { key: 'x', onClick: onClose, 'aria-label': 'Cerrar', variant: 'tertiary',
+                         className: fullScreen ? 'NeoModalFullscreen-close' : 'NeoModalDialog-close',
+                         size: fullScreen ? 'large' : 'medium' },
+        renderIcon('system-close'))
+    : null;
+
+  return h(Dialog, {
+    ref,
+    open: !!open, onClose, fullScreen,
+    PaperProps: { 'data-type': type },
+    maxWidth: fullScreen ? false : size,
+    fullWidth: !fullScreen,
+    slotProps: { backdrop: { 'aria-hidden': 'true' } },
+    'aria-labelledby': titleId,
+    'aria-describedby': descriptionId,
+
+    ...rest,
+  },
+    h(DialogTitle, { key: 't', id: rowId }, iconNode ? renderIcon(iconNode) : null,
+      back || null,
+      h('span', { id: titleId, className: fullScreen ? 'NeoModalFullscreen-title' : 'NeoModalDialog-title' }, title),
+      fullScreen ? close : null),
+    fullScreen ? null : close,
+    h(DialogContent, { key: 'c', ref: setContent, onScroll: watchScroll, 'data-scroll': scroll,
+      ...(overflows ? { tabIndex: 0, role: 'region', 'aria-labelledby': titleId } : null) },
+      description ? h(DialogContentText, { id: descriptionId, key: 'd' }, description) : null,
+      children),
+    actions ? h(DialogActions, { key: 'a', 'data-scroll': scroll }, accionesEnOrden) : null,
+  );
+});

package/ui/_overflow.mjs

@@ -0,0 +1,21 @@
+// packages/mui/ui/_overflow.mjs — emitted without comments. The reasoning behind each decision lives in Neo's source repository.
+export function watchOverflow(root, member) {
+  if (!root || typeof window === 'undefined') return () => {};
+  const item = member ? root.querySelector(member) : null;
+  const recorta = (n) => getComputedStyle(n).overflowX !== 'visible';
+  let row = item ? item.parentElement : null;
+  while (row && row !== root && !recorta(row)) row = row.parentElement;
+  if (!row || !recorta(row)) return () => {};
+  const mark = () => {
+    const start = row.scrollLeft > 1;
+    const end = row.scrollLeft + row.clientWidth < row.scrollWidth - 1;
+    const sides = [start && 'start', end && 'end'].filter(Boolean).join(' ');
+    if (sides) root.setAttribute('data-overflow', sides);
+    else root.removeAttribute('data-overflow');
+  };
+  mark();
+  row.addEventListener('scroll', mark, { passive: true });
+  const ro = typeof ResizeObserver !== 'undefined' ? new ResizeObserver(mark) : null;
+  if (ro) { ro.observe(row); if (item.parentElement !== row) ro.observe(item.parentElement); }
+  return () => { row.removeEventListener('scroll', mark); if (ro) ro.disconnect(); };
+}

package/ui/_reveal.mjs

@@ -0,0 +1,17 @@
+// packages/mui/ui/_reveal.mjs — emitted without comments. The reasoning behind each decision lives in Neo's source repository.
+export function reveal(node, member, { inline = 'center', settle = false } = {}) {
+  const item = node && node.closest ? node.closest(member) : null;
+  let row = item ? item.parentElement : null;
+  while (row && !/auto|scroll/.test(getComputedStyle(row).overflowX)) row = row.parentElement;
+  if (!row || row.scrollWidth <= row.clientWidth) return;
+  if (settle) {
+    const a = item.getBoundingClientRect();
+    const start = row.getBoundingClientRect().left + row.clientLeft;
+    const end = start + row.clientWidth;
+    if (a.right > end) row.scrollLeft += a.right - end + 1;
+    else if (a.left < start) row.scrollLeft -= start - a.left + 1;
+  }
+  const quiet = typeof window !== 'undefined' && window.matchMedia
+    && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+  item.scrollIntoView({ inline, block: 'nearest', behavior: quiet ? 'auto' : 'smooth' });
+}

package/ui/_select-value.mjs

@@ -0,0 +1,18 @@
+'use client';
+// packages/mui/ui/_select-value.mjs — emitted without comments. The reasoning behind each decision lives in Neo's source repository.
+import React from 'react';
+const h = React.createElement;
+
+export const selectValueProps = ({ placeholder, renderValue, children, value, defaultValue }) => ({
+  displayEmpty: !!placeholder,
+  ...(value === undefined && defaultValue === undefined ? { defaultValue: '' } : {}),
+  renderValue: placeholder
+    ? (val) => {
+      if (val === '' || val == null) return h('span', { className: 'NeoSelect-placeholder' }, placeholder);
+      if (renderValue) return renderValue(val);
+      const selectedOption = React.Children.toArray(children)
+        .find((c) => React.isValidElement(c) && c.props.value === val);
+      return selectedOption ? selectedOption.props.children : val;
+    }
+    : renderValue,
+});

package/ui/_warn.mjs

@@ -0,0 +1,13 @@
+// packages/mui/ui/_warn.mjs — emitted without comments. The reasoning behind each decision lives in Neo's source repository.
+
+export const warn = (m) => {
+  if (process.env.NODE_ENV !== 'production') console.warn('[Neo] ' + m);
+};
+
+export const hasAccessibleName = (comp, label, rest = {}) => {
+  const named = (label !== undefined && label !== null && String(label).trim() !== '')
+    || !!rest['aria-label'] || !!rest['aria-labelledby'];
+  if (!named) warn(`${comp}: no visible \`label\` and no \`aria-label\` — the control has NO ACCESSIBLE `
+    + 'NAME. It looks the same and cannot be operated with a screen reader.');
+  return named;
+};