@microbit/ui 0.0.0-gray.ramp.90

package/src/Menu.tsx

@@ -0,0 +1,291 @@
+/**
+ * (c) 2026, Micro:bit Educational Foundation and contributors
+ *
+ * SPDX-License-Identifier: MIT
+ */
+import { ReactNode, useCallback, useState } from "react";
+import {
+  Header as RACHeader,
+  Menu as RACMenu,
+  MenuItem as RACMenuItem,
+  MenuItemProps as RACMenuItemProps,
+  MenuSection as RACMenuSection,
+  MenuTrigger as RACMenuTrigger,
+  Popover,
+  PopoverProps,
+  Separator,
+} from "react-aria-components";
+import { RiCheckLine } from "react-icons/ri";
+import { css, cx } from "styled-system/css";
+import { menu } from "styled-system/recipes";
+import { SystemStyleObject } from "styled-system/types";
+import { Icon } from "./Icon";
+import { useOverlayCloseRegistrar } from "./SharedUIProvider";
+
+export interface MenuTriggerProps {
+  /** Called when the menu opens. */
+  onOpen?: () => void;
+  /** Called when the menu closes. */
+  onClose?: () => void;
+  /** The trigger element followed by a `MenuList` (react-aria pattern). */
+  children: ReactNode;
+}
+
+/**
+ * MenuTrigger — react-aria-components' <MenuTrigger>. Its first child is the
+ * trigger (e.g. a Button); the second is a `MenuList`. RAC returns focus to the
+ * trigger when the menu closes.
+ *
+ * When the app installs an overlay-close registrar (e.g. so the Android back
+ * button can close the menu), the trigger runs controlled and registers its
+ * close function while open. Otherwise it's an uncontrolled pass-through.
+ */
+export const MenuTrigger = ({
+  onOpen,
+  onClose,
+  children,
+}: MenuTriggerProps) => {
+  const registerClose = useOverlayCloseRegistrar();
+  const [isOpen, setIsOpen] = useState(false);
+
+  const handleOpenChange = useCallback(
+    (open: boolean) => {
+      setIsOpen(open);
+      if (open) {
+        registerClose?.(() => {
+          setIsOpen(false);
+          registerClose(null);
+        });
+        onOpen?.();
+      } else {
+        registerClose?.(null);
+        onClose?.();
+      }
+    },
+    [registerClose, onOpen, onClose],
+  );
+
+  if (!registerClose) {
+    return (
+      <RACMenuTrigger
+        onOpenChange={(open) => (open ? onOpen?.() : onClose?.())}
+      >
+        {children}
+      </RACMenuTrigger>
+    );
+  }
+
+  return (
+    <RACMenuTrigger isOpen={isOpen} onOpenChange={handleOpenChange}>
+      {children}
+    </RACMenuTrigger>
+  );
+};
+
+export interface MenuListProps {
+  children: ReactNode;
+  /** Placement of the dropdown relative to the trigger. */
+  placement?: PopoverProps["placement"];
+  /** Per-instance style overrides, merged after the recipe. */
+  css?: SystemStyleObject;
+  className?: string;
+}
+
+/**
+ * MenuList — the dropdown surface: RAC's <Popover> (positioned card) wrapping a
+ * RAC <Menu> (the list). Place `MenuItem`s inside.
+ */
+export const MenuList = ({
+  children,
+  // Matches Chakra Menu's default "bottom-start".
+  placement = "bottom start",
+  css: cssProp,
+  className,
+}: MenuListProps) => {
+  const slots = menu();
+  return (
+    <Popover
+      placement={placement}
+      className={cx(
+        slots.content,
+        cssProp ? css(cssProp) : undefined,
+        className,
+      )}
+    >
+      <RACMenu className={slots.list}>{children}</RACMenu>
+    </Popover>
+  );
+};
+
+export interface MenuItemProps
+  extends Omit<RACMenuItemProps, "className" | "children"> {
+  /** Icon rendered before the label, matching Chakra's MenuItem `icon`. */
+  icon?: ReactNode;
+  /** Per-instance style overrides, merged after the recipe. */
+  css?: SystemStyleObject;
+  className?: string;
+  children?: ReactNode;
+}
+
+/**
+ * MenuItem — a RAC <MenuItem> styled with the `menu` recipe's `item` slot.
+ * Use `onAction` for the click behaviour (RAC closes the menu automatically).
+ */
+export const MenuItem = ({
+  icon,
+  css: cssProp,
+  className,
+  children,
+  ...rest
+}: MenuItemProps) => {
+  const slots = menu();
+  return (
+    <RACMenuItem
+      className={cx(slots.item, cssProp ? css(cssProp) : undefined, className)}
+      {...rest}
+    >
+      {icon ? (
+        <>
+          <span className={slots.icon}>{icon}</span>
+          <span className={slots.label}>{children}</span>
+        </>
+      ) : (
+        children
+      )}
+    </RACMenuItem>
+  );
+};
+
+interface MenuOptionGroupBaseProps {
+  /** Group heading shown above the options (Chakra's `title`). */
+  title?: ReactNode;
+  /** `MenuItemOption` children. */
+  children: ReactNode;
+  css?: SystemStyleObject;
+  className?: string;
+}
+
+export interface MenuOptionGroupRadioProps extends MenuOptionGroupBaseProps {
+  type?: "radio";
+  /** The selected `MenuItemOption`'s value. */
+  value?: string;
+  /** Called with the newly selected option's value. */
+  onChange?: (value: string) => void;
+}
+
+export interface MenuOptionGroupCheckboxProps extends MenuOptionGroupBaseProps {
+  type: "checkbox";
+  /** The checked `MenuItemOption`s' values. */
+  value?: string[];
+  /** Called with the full set of checked values after a toggle. */
+  onChange?: (value: string[]) => void;
+}
+
+export type MenuOptionGroupProps =
+  | MenuOptionGroupRadioProps
+  | MenuOptionGroupCheckboxProps;
+
+/**
+ * MenuOptionGroup — a group of checkable `MenuItemOption`s within a menu,
+ * replacing Chakra's `MenuOptionGroup`. `type="radio"` (the default) is
+ * single-select and renders `menuitemradio`; `type="checkbox"` is multi-select
+ * and renders `menuitemcheckbox`, each option toggling independently.
+ *
+ * Selection is section-scoped (RAC MenuSection), so a menu can mix action items
+ * and option groups. An option's own `onAction` still fires on every press,
+ * including the press that deselects it — so a lone toggle can be driven either
+ * by the group's `onChange` or by the item's `onAction`.
+ *
+ * Choosing an option leaves the menu open (a plain `MenuItem` closes it), which
+ * is what Chakra's checkbox groups did. Chakra's *radio* groups closed on
+ * select, so a ported radio group is a deliberate behaviour change.
+ */
+export const MenuOptionGroup = (props: MenuOptionGroupProps) => {
+  const { title, children, css: cssProp, className } = props;
+  const slots = menu();
+  const selectedKeys =
+    props.type === "checkbox"
+      ? props.value ?? []
+      : props.value != null
+        ? [props.value]
+        : [];
+  return (
+    <RACMenuSection
+      className={cx(slots.group, cssProp ? css(cssProp) : undefined, className)}
+      selectionMode={props.type === "checkbox" ? "multiple" : "single"}
+      selectedKeys={selectedKeys}
+      onSelectionChange={(keys) => {
+        if (keys === "all") {
+          return;
+        }
+        const values = [...keys].map(String);
+        if (props.type === "checkbox") {
+          props.onChange?.(values);
+        } else if (values.length > 0) {
+          // Radio: a press that clears the selection reports nothing, matching
+          // Chakra, which had no way to express an empty radio group.
+          props.onChange?.(values[0]);
+        }
+      }}
+    >
+      {title != null && (
+        <RACHeader className={slots.groupTitle}>{title}</RACHeader>
+      )}
+      {children}
+    </RACMenuSection>
+  );
+};
+
+export interface MenuItemOptionProps
+  extends Omit<RACMenuItemProps, "className" | "children" | "id" | "value"> {
+  /** This option's value within its `MenuOptionGroup`. */
+  value: string;
+  css?: SystemStyleObject;
+  className?: string;
+  children?: ReactNode;
+}
+
+/**
+ * MenuItemOption — a selectable option inside a `MenuOptionGroup`, with a
+ * check indicator on the selected item (Chakra's MenuItemOption).
+ */
+export const MenuItemOption = ({
+  value,
+  css: cssProp,
+  className,
+  children,
+  ...rest
+}: MenuItemOptionProps) => {
+  const slots = menu();
+  return (
+    <RACMenuItem
+      id={value}
+      className={cx(slots.item, cssProp ? css(cssProp) : undefined, className)}
+      {...rest}
+    >
+      <span className={slots.itemIndicator} aria-hidden>
+        <Icon as={RiCheckLine} />
+      </span>
+      <span className={slots.label}>{children}</span>
+    </RACMenuItem>
+  );
+};
+
+export interface MenuDividerProps {
+  css?: SystemStyleObject;
+  className?: string;
+}
+
+/** Horizontal rule separating groups of menu items. */
+export const MenuDivider = ({ css: cssProp, className }: MenuDividerProps) => {
+  const slots = menu();
+  return (
+    <Separator
+      className={cx(
+        slots.divider,
+        cssProp ? css(cssProp) : undefined,
+        className,
+      )}
+    />
+  );
+};

package/src/Modal.recipe.ts

@@ -0,0 +1,163 @@
+/**
+ * (c) 2026, Micro:bit Educational Foundation and contributors
+ *
+ * SPDX-License-Identifier: MIT
+ */
+import { defineSlotRecipe } from "@pandacss/dev";
+
+/**
+ * Dialog slot recipe — Chakra's default Modal parts (light mode), plus this
+ * app's overrides: a full-viewport overlay (the iOS WKWebView 100% fix) and a
+ * `full` size with safe-area insets and the brand status-bar gradient.
+ *
+ * A config recipe (rather than an atomic `sva`) so the `size` variant accepts
+ * responsive values, e.g. `{ base: "full", md: "4xl" }`. Consumed by the
+ * shared-ui Modal, which maps the slots onto react-aria-components'
+ * ModalOverlay / Modal / Dialog.
+ *
+ * Registered in the base preset (base-preset.ts).
+ */
+// Appearance of a normal (non-full) modal box. Restated by every non-full size
+// variant so that, when `size` is responsive (e.g. { base: "full", md: "4xl" }),
+// the larger breakpoint fully overrides the `full` variant rather than leaking
+// its margin:0 / border-radius:0 / full-height / gradient into desktop. Panda
+// applies the base-breakpoint variant value unconditionally, so symmetric
+// property sets across size values are required.
+const dialogBox = {
+  my: "16",
+  mx: "2",
+  borderRadius: "md",
+  background: "white",
+  minHeight: "auto",
+  padding: "0",
+};
+
+// The `full` variant also styles these slots; same symmetry requirement.
+const dialogSlots = {
+  header: { pl: "6" },
+  body: { overflowY: "visible" },
+  closeTrigger: { top: "2" },
+};
+
+export const dialog = defineSlotRecipe({
+  className: "dialog",
+  slots: [
+    "overlay",
+    "content",
+    "inner",
+    "header",
+    "body",
+    "footer",
+    "closeTrigger",
+  ],
+  base: {
+    overlay: {
+      position: "fixed",
+      inset: 0,
+      w: "100%",
+      h: "100%",
+      bg: "blackAlpha.600",
+      zIndex: "modal",
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "flex-start",
+      overflow: "auto",
+      overscrollBehaviorY: "none",
+      // Fade the backdrop in/out. RAC toggles data-entering/data-exiting and
+      // waits for the transition before unmounting.
+      opacity: 1,
+      transition: "opacity 0.2s ease-out",
+      "&[data-entering]": { opacity: 0 },
+      "&[data-exiting]": { opacity: 0 },
+      _motionReduce: { transition: "none" },
+    },
+    content: {
+      position: "relative",
+      color: "inherit",
+      boxShadow: "lg",
+      width: "100%",
+      display: "flex",
+      flexDirection: "column",
+      outline: "none",
+      // Approximate Chakra's fade + scale enter/exit.
+      opacity: 1,
+      transform: "scale(1)",
+      transition: "opacity 0.2s ease-out, transform 0.2s ease-out",
+      "&[data-entering]": { opacity: 0, transform: "scale(0.95)" },
+      "&[data-exiting]": { opacity: 0, transform: "scale(0.95)" },
+      _motionReduce: { transition: "none" },
+    },
+    inner: {
+      outline: "none",
+      display: "flex",
+      flexDirection: "column",
+      width: "100%",
+      flex: "1 1 auto",
+    },
+    header: {
+      px: "6",
+      py: "4",
+      fontSize: "xl",
+      fontWeight: "semibold",
+      flexShrink: 0,
+    },
+    body: { px: "6", py: "2", flex: "1" },
+    footer: {
+      px: "6",
+      py: "4",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "flex-end",
+      // Chakra had no footer gap (call sites wrapped buttons in HStacks);
+      // baked in as the house style. Override via css for tighter layouts.
+      gap: "5",
+      flexShrink: 0,
+    },
+    closeTrigger: { position: "absolute", top: "2", insetEnd: "3" },
+  },
+  variants: {
+    // Chakra's `isCentered`: vertically centre the dialog in the viewport
+    // rather than the default top alignment.
+    centered: {
+      true: {
+        overlay: { alignItems: "center" },
+      },
+    },
+    size: {
+      xs: { ...dialogSlots, content: { ...dialogBox, maxWidth: "xs" } },
+      sm: { ...dialogSlots, content: { ...dialogBox, maxWidth: "sm" } },
+      md: { ...dialogSlots, content: { ...dialogBox, maxWidth: "md" } },
+      lg: { ...dialogSlots, content: { ...dialogBox, maxWidth: "lg" } },
+      xl: { ...dialogSlots, content: { ...dialogBox, maxWidth: "xl" } },
+      "2xl": { ...dialogSlots, content: { ...dialogBox, maxWidth: "2xl" } },
+      "3xl": { ...dialogSlots, content: { ...dialogBox, maxWidth: "3xl" } },
+      "4xl": { ...dialogSlots, content: { ...dialogBox, maxWidth: "4xl" } },
+      "5xl": { ...dialogSlots, content: { ...dialogBox, maxWidth: "5xl" } },
+      "6xl": { ...dialogSlots, content: { ...dialogBox, maxWidth: "6xl" } },
+      full: {
+        content: {
+          maxWidth: "100vw",
+          minHeight: "100dvh",
+          my: "0",
+          mx: "0",
+          borderRadius: "0",
+          paddingTop: "env(safe-area-inset-top)",
+          paddingBottom: "env(safe-area-inset-bottom)",
+          paddingLeft: "env(safe-area-inset-left)",
+          paddingRight: "env(safe-area-inset-right)",
+          // brand colour in the status-bar area, white below (matches ActionBar)
+          background:
+            "linear-gradient(to bottom, token(colors.statusBarBg) env(safe-area-inset-top), white env(safe-area-inset-top))",
+        },
+        header: {
+          pl: "calc(var(--window-controls-left, 0px) + token(spacing.6))",
+        },
+        body: { flex: "1", overflowY: "auto" },
+        closeTrigger: {
+          top: "calc(env(safe-area-inset-top) + token(spacing.2))",
+        },
+      },
+    },
+  },
+  defaultVariants: { size: "md" },
+});