@tonycodes-ui/mortar 0.12.0 → 0.13.0

package/src/marketing.tsx

@@ -3,17 +3,9 @@ import {
   KitLink,
   type IconLink,
   type ItemGroup,
-  type LinkItem,
 } from "./navigation.js";
 import { useId, useState, type CSSProperties, type ReactNode } from "react";
-import {
-  CloseButton,
-  DialogPanel,
-  DialogTitle,
-  Popover,
-  PopoverButton,
-  PopoverPanel,
-} from "@headlessui/react";
+import { DialogPanel, DialogTitle } from "@headlessui/react";
 import { ActionLink, Button, type LinkAction } from "./primitives.js";
 import { BrandMark, Prose, type SectionTone } from "./layout.js";
 import { SegmentedControl } from "./inspection.js";
@@ -23,6 +15,8 @@ import { childLevel, headingTag, type HeadingLevel } from "./heading.js";
 import {
   ActionLinks,
   DialogFrame,
+  Flyout,
+  type FlyoutItem,
   TermList,
   TitledIntro,
   cx,
@@ -32,10 +26,7 @@ import {
   useDomId,
 } from "./internal.js";
 
-export type FlyoutItem = Pick<
-  LinkItem,
-  "label" | "href" | "description" | "icon"
->;
+export type { FlyoutItem } from "./internal.js";
 /** A header link, or a labelled group that opens a flyout panel. */
 export type HeaderLink =
   | LinkAction
@@ -45,67 +36,6 @@ export type HeaderLink =
       layout?: "list" | "columns" | "full";
     });
 
-function Flyout({
-  label,
-  items,
-  footer = [],
-  layout = "list",
-  onNavigate,
-}: {
-  label: string;
-  items: FlyoutItem[];
-  footer?: LinkAction[];
-  layout?: "list" | "columns" | "full";
-  onNavigate: () => void;
-}) {
-  const dataLayout = layout === "list" ? undefined : layout;
-  return (
-    <Popover className="m-flyout" data-layout={dataLayout}>
-      <PopoverButton className="m-flyout-trigger">
-        {label}
-        <ChevronDown />
-      </PopoverButton>
-      {/* Anchored panels render in a portal, so headers inside clipped containers never cut them off. */}
-      <PopoverPanel
-        anchor="bottom"
-        className="m-flyout-panel"
-        data-layout={dataLayout}
-      >
-        <ul>
-          {items.map((item, index) => (
-            <li key={`${item.label}:${item.href}:${index}`}>
-              <CloseButton as={KitLink} href={item.href} onClick={onNavigate}>
-                {item.icon && (
-                  <span className="m-flyout-icon" aria-hidden="true">
-                    {item.icon}
-                  </span>
-                )}
-                <span className="m-flyout-text">
-                  <strong>{item.label}</strong>
-                  {item.description && <span>{item.description}</span>}
-                </span>
-              </CloseButton>
-            </li>
-          ))}
-        </ul>
-        {footer.length > 0 && (
-          <div className="m-flyout-footer">
-            {footer.map((link, index) => (
-              <CloseButton
-                as={KitLink}
-                key={`${link.label}:${link.href}:${index}`}
-                href={link.href}
-                onClick={onNavigate}
-              >
-                {link.label}
-              </CloseButton>
-            ))}
-          </div>
-        )}
-      </PopoverPanel>
-    </Popover>
-  );
-}
 export function MarketingHeader({
   brand,
   tagline,

package/src/primitives.tsx

@@ -444,6 +444,31 @@ function DescribedChoice({
     </div>
   );
 }
+/**
+ * Keeps a choice in the described layout once it has had a description or
+ * error. Switching back to the plain label would remount the input and drop
+ * focus mid-interaction (for example a description that changes with the
+ * value). If the layout changes while the input has focus, focus follows it.
+ */
+function useDescribedLayout(
+  active: boolean,
+  input: { current: HTMLInputElement | null },
+) {
+  const [described, setDescribed] = useState(false);
+  const refocus = useRef(false);
+  if (active && !described) {
+    refocus.current =
+      typeof document !== "undefined" &&
+      !!input.current &&
+      input.current === document.activeElement;
+    setDescribed(true);
+  }
+  useLayoutEffect(() => {
+    if (refocus.current) input.current?.focus();
+    refocus.current = false;
+  }, [described, input]);
+  return described;
+}
 export function Checkbox({
   label,
   description,
@@ -458,23 +483,8 @@ export function Checkbox({
   error?: string;
 }) {
   const input = useRef<HTMLInputElement>(null);
-  // Once an error has shown, keep the described layout: switching back to the
-  // plain label would remount the input and drop focus while the person fixes
-  // it. If the layout changes while the input has focus, focus follows it.
-  const [described, setDescribed] = useState(false);
-  const refocus = useRef(false);
-  if (error && !described) {
-    refocus.current =
-      typeof document !== "undefined" &&
-      !!input.current &&
-      input.current === document.activeElement;
-    setDescribed(true);
-  }
-  useLayoutEffect(() => {
-    if (refocus.current) input.current?.focus();
-    refocus.current = false;
-  }, [described]);
-  if (description || error || described)
+  const described = useDescribedLayout(!!(description || error), input);
+  if (described)
     return (
       <DescribedChoice
         component="Checkbox"
@@ -514,7 +524,9 @@ export function Switch({
   /** Secondary line under the label, announced as the description. */
   description?: ReactNode;
 }) {
-  if (description)
+  const input = useRef<HTMLInputElement>(null);
+  const described = useDescribedLayout(!!description, input);
+  if (described)
     return (
       <DescribedChoice
         component="Switch"
@@ -526,6 +538,7 @@ export function Switch({
           <input
             {...props}
             {...attrs}
+            ref={input}
             type="checkbox"
             role="switch"
             className="m-switch"
@@ -535,7 +548,13 @@ export function Switch({
     );
   return (
     <label {...componentRoot("Switch")} className={cx("m-choice", className)}>
-      <input {...props} type="checkbox" role="switch" className="m-switch" />
+      <input
+        {...props}
+        ref={input}
+        type="checkbox"
+        role="switch"
+        className="m-switch"
+      />
       {label}
     </label>
   );