@morphemecms/cms 0.1.0 → 0.2.0-next-20261104150211

package/theme/ui/Search.tsx

@@ -1,129 +1,129 @@
-// A search (m3.material.io/components/search, .search in ../styles/ui.css): the search bar (its leading icon,
-// `leadingIcon`, the theme's magnifying glass if it has none, the placeholder, `label`, and what stands after it,
-// `trailing`: icon buttons, an avatar) and the search view it opens (a <dialog>: over the whole screen on a phone, docked
-// where the bar is from 48rem), with the button back (`backLabel`), the field (a role="combobox"), the button that
-// empties it (`clearLabel`), and the results (`results`, the theme's list, List and ListItem, as a role="listbox" of
-// links, each its headline, evt. its supporting text and its icon) or, when none fits, `emptyText`. On the site
-// search.script.ts opens and closes it (the back button, Escape, a tap outside), narrows the results to what is
-// written, and moves through them with the arrow keys (Enter follows the one it is on). In the editor only drawn:
-// `open` draws the view (as docked) with `query` in the field instead of the bar. How it looks is the theme's.
-import { useId, type ReactNode } from 'react';
-import { Svg } from '@morphemecms/cms/src/icon';
-import IconButton from '@theme/ui/IconButton';
-import List, { ListItem } from '@theme/ui/List';
-
-export type SearchResult = { href: string; headline: ReactNode; supporting?: ReactNode; icon?: string };
-
-/** The class of a search (the bar and its view). */
-export const searchClass = 'search';
-
-export default function Search({
-  label,
-  backLabel,
-  clearLabel,
-  emptyText,
-  results,
-  leadingIcon = 'magnifying-glass',
-  trailing,
-  open,
-  query,
-  className,
-  ...rest
-}: {
-  label: string;
-  backLabel: string;
-  clearLabel: string;
-  emptyText: string;
-  results: SearchResult[];
-  leadingIcon?: string;
-  trailing?: ReactNode;
-  open?: boolean;
-  query?: string;
-  className?: string;
-} & Record<string, unknown>) {
-  const id = useId();
-  const view = `${id}-view`;
-  const list = `${id}-results`;
-  return (
-    <div className={[searchClass, className].filter(Boolean).join(' ')} data-search="" {...rest}>
-      {!open && (
-        <div className="search-bar">
-          <button
-            type="button"
-            className="search-bar-field"
-            aria-haspopup="dialog"
-            aria-expanded="false"
-            aria-controls={view}
-            data-search-open=""
-          >
-            <span className="search-bar-leading">
-              <Svg name={leadingIcon} size={24} />
-            </span>
-            <span className="search-bar-placeholder">{label}</span>
-          </button>
-          {trailing && <span className="search-bar-trailing">{trailing}</span>}
-        </div>
-      )}
-      <dialog id={view} className="search-view" aria-label={label} open={open} data-search-view="">
-        <div className="search-view-header">
-          <IconButton icon="arrow-left" label={backLabel} data-search-close="" />
-          <input
-            type="search"
-            className="search-view-input"
-            role="combobox"
-            aria-label={label}
-            aria-expanded="true"
-            aria-controls={list}
-            aria-autocomplete="list"
-            autoComplete="off"
-            enterKeyHint="search"
-            placeholder={label}
-            defaultValue={query}
-            data-search-input=""
-          />
-          <IconButton icon="x" label={clearLabel} className="search-view-clear" data-search-clear="" />
-        </div>
-        <List id={list} role="listbox" aria-label={label} className="search-view-results">
-          {results.map((r, i) => (
-            <ListItem
-              key={i}
-              href={r.href}
-              leading={r.icon ? <Svg name={r.icon} size={24} /> : undefined}
-              headline={r.headline}
-              supporting={r.supporting}
-              presentation
-              role="option"
-              id={`${list}-${i}`}
-              aria-selected="false"
-              data-search-option=""
-            />
-          ))}
-        </List>
-        <p className="search-view-empty" hidden data-search-empty="">
-          {emptyText}
-        </p>
-      </dialog>
-    </div>
-  );
-}
-
-/** The search bar alone, searching in place (the editor's lists, narrowed as it is written in): the bar with its
- * leading icon and a field (an <input type="search">, `label` its name and placeholder) instead of the button that opens
- * the view. Other attributes (`value`, `onChange`, `ref`) go on the <input>, and `className` on the bar. */
-export function SearchBar({
-  label,
-  leadingIcon = 'magnifying-glass',
-  className,
-  ...rest
-}: { label: string; leadingIcon?: string; className?: string } & Record<string, unknown>) {
-  return (
-    <label className={['search-bar', className].filter(Boolean).join(' ')}>
-      <span className="search-bar-field">
-        <span className="search-bar-leading">
-          <Svg name={leadingIcon} size={24} />
-        </span>
-        <input type="search" className="search-bar-input" aria-label={label} placeholder={label} {...rest} />
-      </span>
-    </label>
-  );
-}
+// A search (m3.material.io/components/search, .search in ../styles/ui.css): the search bar (its leading icon,
+// `leadingIcon`, the theme's magnifying glass if it has none, the placeholder, `label`, and what stands after it,
+// `trailing`: icon buttons, an avatar) and the search view it opens (a <dialog>: over the whole screen on a phone, docked
+// where the bar is from 48rem), with the button back (`backLabel`), the field (a role="combobox"), the button that
+// empties it (`clearLabel`), and the results (`results`, the theme's list, List and ListItem, as a role="listbox" of
+// links, each its headline, evt. its supporting text and its icon) or, when none fits, `emptyText`. On the site
+// search.script.ts opens and closes it (the back button, Escape, a tap outside), narrows the results to what is
+// written, and moves through them with the arrow keys (Enter follows the one it is on). In the editor only drawn:
+// `open` draws the view (as docked) with `query` in the field instead of the bar. How it looks is the theme's.
+import { useId, type ReactNode } from 'react';
+import { Svg } from '@morphemecms/cms/src/icon';
+import IconButton from '@theme/ui/IconButton';
+import List, { ListItem } from '@theme/ui/List';
+
+export type SearchResult = { href: string; headline: ReactNode; supporting?: ReactNode; icon?: string };
+
+/** The class of a search (the bar and its view). */
+export const searchClass = 'search';
+
+export default function Search({
+  label,
+  backLabel,
+  clearLabel,
+  emptyText,
+  results,
+  leadingIcon = 'magnifying-glass',
+  trailing,
+  open,
+  query,
+  className,
+  ...rest
+}: {
+  label: string;
+  backLabel: string;
+  clearLabel: string;
+  emptyText: string;
+  results: SearchResult[];
+  leadingIcon?: string;
+  trailing?: ReactNode;
+  open?: boolean;
+  query?: string;
+  className?: string;
+} & Record<string, unknown>) {
+  const id = useId();
+  const view = `${id}-view`;
+  const list = `${id}-results`;
+  return (
+    <div className={[searchClass, className].filter(Boolean).join(' ')} data-search="" {...rest}>
+      {!open && (
+        <div className="search-bar">
+          <button
+            type="button"
+            className="search-bar-field"
+            aria-haspopup="dialog"
+            aria-expanded="false"
+            aria-controls={view}
+            data-search-open=""
+          >
+            <span className="search-bar-leading">
+              <Svg name={leadingIcon} size={24} />
+            </span>
+            <span className="search-bar-placeholder">{label}</span>
+          </button>
+          {trailing && <span className="search-bar-trailing">{trailing}</span>}
+        </div>
+      )}
+      <dialog id={view} className="search-view" aria-label={label} open={open} data-search-view="">
+        <div className="search-view-header">
+          <IconButton icon="arrow-left" label={backLabel} data-search-close="" />
+          <input
+            type="search"
+            className="search-view-input"
+            role="combobox"
+            aria-label={label}
+            aria-expanded="true"
+            aria-controls={list}
+            aria-autocomplete="list"
+            autoComplete="off"
+            enterKeyHint="search"
+            placeholder={label}
+            defaultValue={query}
+            data-search-input=""
+          />
+          <IconButton icon="x" label={clearLabel} className="search-view-clear" data-search-clear="" />
+        </div>
+        <List id={list} role="listbox" aria-label={label} className="search-view-results">
+          {results.map((r, i) => (
+            <ListItem
+              key={i}
+              href={r.href}
+              leading={r.icon ? <Svg name={r.icon} size={24} /> : undefined}
+              headline={r.headline}
+              supporting={r.supporting}
+              presentation
+              role="option"
+              id={`${list}-${i}`}
+              aria-selected="false"
+              data-search-option=""
+            />
+          ))}
+        </List>
+        <p className="search-view-empty" hidden data-search-empty="">
+          {emptyText}
+        </p>
+      </dialog>
+    </div>
+  );
+}
+
+/** The search bar alone, searching in place (the editor's lists, narrowed as it is written in): the bar with its
+ * leading icon and a field (an <input type="search">, `label` its name and placeholder) instead of the button that opens
+ * the view. Other attributes (`value`, `onChange`, `ref`) go on the <input>, and `className` on the bar. */
+export function SearchBar({
+  label,
+  leadingIcon = 'magnifying-glass',
+  className,
+  ...rest
+}: { label: string; leadingIcon?: string; className?: string } & Record<string, unknown>) {
+  return (
+    <label className={['search-bar', className].filter(Boolean).join(' ')}>
+      <span className="search-bar-field">
+        <span className="search-bar-leading">
+          <Svg name={leadingIcon} size={24} />
+        </span>
+        <input type="search" className="search-bar-input" aria-label={label} placeholder={label} {...rest} />
+      </span>
+    </label>
+  );
+}

package/theme/ui/SegmentedButton.tsx

@@ -1,49 +1,49 @@
-// A segmented button (m3.material.io/components/segmented-buttons, .segmented-button in ../styles/ui.css): a few
-// choices side by side in one frame (`segments`), each a button with its label and evt. an icon, the chosen ones with
-// aria-pressed="true" and a check before the label (in the icon's place when it has one; the theme shows it or not).
-// Single-select (one chosen) or multi-select (`multiple`: any of them, data-multiple); the group has its name (`label`,
-// read by screen readers). Which one is chosen, and what that does, is the script of the block that shows it (by a
-// segment's `value`, data-value), or, in the editor, the segment's own attributes (onClick), which go on its button.
-// Other attributes (data-…) go on the group, and `className` after its own class. An
-// Astro component gives its elements the same classes with segmentedButtonClass and segmentedButtonSegmentClass.
-import { Glyph, Svg, type IconRef } from '@morphemecms/cms/src/icon';
-
-export type Segment = { label: string; icon?: IconRef; value?: string; selected?: boolean; disabled?: boolean } & Record<string, unknown>;
-
-/** A segmented button's class, and its segments'. */
-export const segmentedButtonClass = 'segmented-button';
-export const segmentedButtonSegmentClass = 'segmented-button-segment';
-
-export default function SegmentedButton({
-  label,
-  segments,
-  multiple,
-  className,
-  ...rest
-}: { label: string; segments: Segment[]; multiple?: boolean; className?: string } & Record<string, unknown>) {
-  return (
-    <div
-      role="group"
-      aria-label={label}
-      className={[segmentedButtonClass, className].filter(Boolean).join(' ')}
-      data-multiple={multiple || undefined}
-      {...rest}
-    >
-      {segments.map(({ label: name, icon, value, selected, disabled, ...own }) => (
-        <button
-          key={value ?? name}
-          type="button"
-          className={segmentedButtonSegmentClass}
-          aria-pressed={Boolean(selected)}
-          disabled={disabled}
-          data-value={value}
-          {...own}
-        >
-          <Svg name="check" size={18} className="segmented-button-check" />
-          {icon && <Glyph icon={icon} size={18} className="segmented-button-icon" />}
-          <span className="segmented-button-label">{name}</span>
-        </button>
-      ))}
-    </div>
-  );
-}
+// A segmented button (m3.material.io/components/segmented-buttons, .segmented-button in ../styles/ui.css): a few
+// choices side by side in one frame (`segments`), each a button with its label and evt. an icon, the chosen ones with
+// aria-pressed="true" and a check before the label (in the icon's place when it has one; the theme shows it or not).
+// Single-select (one chosen) or multi-select (`multiple`: any of them, data-multiple); the group has its name (`label`,
+// read by screen readers). Which one is chosen, and what that does, is the script of the block that shows it (by a
+// segment's `value`, data-value), or, in the editor, the segment's own attributes (onClick), which go on its button.
+// Other attributes (data-…) go on the group, and `className` after its own class. An
+// Astro component gives its elements the same classes with segmentedButtonClass and segmentedButtonSegmentClass.
+import { Glyph, Svg, type IconRef } from '@morphemecms/cms/src/icon';
+
+export type Segment = { label: string; icon?: IconRef; value?: string; selected?: boolean; disabled?: boolean } & Record<string, unknown>;
+
+/** A segmented button's class, and its segments'. */
+export const segmentedButtonClass = 'segmented-button';
+export const segmentedButtonSegmentClass = 'segmented-button-segment';
+
+export default function SegmentedButton({
+  label,
+  segments,
+  multiple,
+  className,
+  ...rest
+}: { label: string; segments: Segment[]; multiple?: boolean; className?: string } & Record<string, unknown>) {
+  return (
+    <div
+      role="group"
+      aria-label={label}
+      className={[segmentedButtonClass, className].filter(Boolean).join(' ')}
+      data-multiple={multiple || undefined}
+      {...rest}
+    >
+      {segments.map(({ label: name, icon, value, selected, disabled, ...own }) => (
+        <button
+          key={value ?? name}
+          type="button"
+          className={segmentedButtonSegmentClass}
+          aria-pressed={Boolean(selected)}
+          disabled={disabled}
+          data-value={value}
+          {...own}
+        >
+          <Svg name="check" size={18} className="segmented-button-check" />
+          {icon && <Glyph icon={icon} size={18} className="segmented-button-icon" />}
+          <span className="segmented-button-label">{name}</span>
+        </button>
+      ))}
+    </div>
+  );
+}

package/theme/ui/SideSheet.tsx

@@ -1,54 +1,54 @@
-// A side sheet (m3.material.io/components/side-sheets, .side-sheet in ../styles/ui.css): more about what is on the
-// screen, at its side. Its container, with the header (the headline, `headline` with its id `headlineId`, and the
-// close button, `closeLabel`, and what it does in the editor, `onClose`; none without it), what it shows (`children`, scrolling when it is long) and evt. its
-// actions at the bottom (`actions`: buttons). Its kind (`kind`): 'standard', beside what it is about on the page, an
-// <aside> named by its headline, its place the page's; or 'modal', over the page in a <dialog> with sideSheetClass over
-// the scrim, which sideSheet() in sideSheet.ts opens, closes and lets slide in from the side (the <dialog> gets
-// aria-labelledby with `headlineId`). How it looks is the theme's (--side-sheet-*). In the editor only drawn, as high as
-// its place.
-import type { ReactNode } from 'react';
-import IconButton from '@theme/ui/IconButton';
-
-export type SideSheetKind = 'standard' | 'modal';
-
-/** The class of the <dialog> a modal side sheet is in, and a side sheet's container's classes. */
-export const sideSheetClass = 'side-sheet';
-export const sideSheetContainerClass = (kind: SideSheetKind = 'standard') => `side-sheet-container side-sheet-${kind}`;
-
-export default function SideSheet({
-  kind = 'standard',
-  headline,
-  headlineId,
-  closeLabel,
-  onClose,
-  actions,
-  className,
-  children,
-}: {
-  kind?: SideSheetKind;
-  headline: ReactNode;
-  headlineId?: string;
-  closeLabel?: string;
-  onClose?: () => void;
-  actions?: ReactNode;
-  className?: string;
-  children: ReactNode;
-}) {
-  const Container = kind === 'standard' ? 'aside' : 'div';
-  return (
-    <Container
-      className={[sideSheetContainerClass(kind), className].filter(Boolean).join(' ')}
-      aria-labelledby={kind === 'standard' ? headlineId : undefined}
-      data-side-sheet-container=""
-    >
-      <div className="side-sheet-header">
-        <h2 id={headlineId} className="side-sheet-headline">
-          {headline}
-        </h2>
-        {closeLabel && <IconButton icon="x" label={closeLabel} data-side-sheet-close="" onClick={onClose} />}
-      </div>
-      <div className="side-sheet-content">{children}</div>
-      {actions && <div className="side-sheet-actions">{actions}</div>}
-    </Container>
-  );
-}
+// A side sheet (m3.material.io/components/side-sheets, .side-sheet in ../styles/ui.css): more about what is on the
+// screen, at its side. Its container, with the header (the headline, `headline` with its id `headlineId`, and the
+// close button, `closeLabel`, and what it does in the editor, `onClose`; none without it), what it shows (`children`, scrolling when it is long) and evt. its
+// actions at the bottom (`actions`: buttons). Its kind (`kind`): 'standard', beside what it is about on the page, an
+// <aside> named by its headline, its place the page's; or 'modal', over the page in a <dialog> with sideSheetClass over
+// the scrim, which sideSheet() in sideSheetControl.ts opens, closes and lets slide in from the side (the <dialog> gets
+// aria-labelledby with `headlineId`). How it looks is the theme's (--side-sheet-*). In the editor only drawn, as high as
+// its place.
+import type { ReactNode } from 'react';
+import IconButton from '@theme/ui/IconButton';
+
+export type SideSheetKind = 'standard' | 'modal';
+
+/** The class of the <dialog> a modal side sheet is in, and a side sheet's container's classes. */
+export const sideSheetClass = 'side-sheet';
+export const sideSheetContainerClass = (kind: SideSheetKind = 'standard') => `side-sheet-container side-sheet-${kind}`;
+
+export default function SideSheet({
+  kind = 'standard',
+  headline,
+  headlineId,
+  closeLabel,
+  onClose,
+  actions,
+  className,
+  children,
+}: {
+  kind?: SideSheetKind;
+  headline: ReactNode;
+  headlineId?: string;
+  closeLabel?: string;
+  onClose?: () => void;
+  actions?: ReactNode;
+  className?: string;
+  children: ReactNode;
+}) {
+  const Container = kind === 'standard' ? 'aside' : 'div';
+  return (
+    <Container
+      className={[sideSheetContainerClass(kind), className].filter(Boolean).join(' ')}
+      aria-labelledby={kind === 'standard' ? headlineId : undefined}
+      data-side-sheet-container=""
+    >
+      <div className="side-sheet-header">
+        <h2 id={headlineId} className="side-sheet-headline">
+          {headline}
+        </h2>
+        {closeLabel && <IconButton icon="x" label={closeLabel} data-side-sheet-close="" onClick={onClose} />}
+      </div>
+      <div className="side-sheet-content">{children}</div>
+      {actions && <div className="side-sheet-actions">{actions}</div>}
+    </Container>
+  );
+}