@microbit/ui 0.5.1 → 0.5.2

package/README.md

@@ -209,7 +209,8 @@ Panda emits every token as a CSS custom property with its default naming —
 - `fonts.display` → `var(--fonts-display)`
 
 These names are **API** for styling that lives outside React/Panda — e.g.
-CodeMirror highlight styles or xterm themes written as raw CSS. Two rules
+CodeMirror highlight styles, xterm themes, or `@microbit/ui-code-view`'s
+stylesheet, which reads the `code.*` syntax-highlighting colours. Two rules
 keep them stable:
 
 - Never set `hashing` or `prefix` in `panda.config.ts`.

package/lang/ui.es-ES.json

@@ -1,6 +1,6 @@
 {
   "ui.breadcrumb": {
-    "defaultMessage": "Sendero de navegación"
+    "defaultMessage": "Breadcrumb"
   },
   "ui.cancel-action": {
     "defaultMessage": "Cancelar"
@@ -18,13 +18,13 @@
     "defaultMessage": "Cargando"
   },
   "ui.numberfield-decrease": {
-    "defaultMessage": "Reducir {fieldLabel}"
+    "defaultMessage": "Disminuir {fieldLabel}"
   },
   "ui.numberfield-increase": {
     "defaultMessage": "Aumentar {fieldLabel}"
   },
   "ui.select-placeholder": {
-    "defaultMessage": "Seleccionar un artículo"
+    "defaultMessage": "Selecciona un elemento"
   },
   "ui.select-row-action": {
     "defaultMessage": "Seleccionar"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@microbit/ui",
-  "version": "0.5.1",
+  "version": "0.5.2",
   "description": "micro:bit design-system primitives: react-aria-components + Panda CSS with a design language ported from Chakra UI v2. Ships as source; see README for the consumption setup.",
   "license": "MIT",
   "repository": {
@@ -36,7 +36,7 @@
   },
   "peerDependencies": {
     "@pandacss/dev": "^1.11.4",
-    "react": "^18.3.1",
+    "react": "^18.3.1 || ^19.0.0",
     "react-aria": "^3.50.0",
     "react-aria-components": "^1.19.0",
     "react-icons": "^4.12.0 || ^5.0.0",
@@ -47,7 +47,7 @@
     "@storybook/react-vite": "^10.5.2",
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
-    "@types/node": "^26.1.1",
+    "@types/node": "^24.13.3",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react": "^5.2.0",

package/src/ComboBox.tsx

@@ -7,6 +7,7 @@ import {
   ForwardedRef,
   forwardRef,
   ReactNode,
+  useContext,
   useLayoutEffect,
   useRef,
   useState,
@@ -15,6 +16,7 @@ import {
   Button as RACButton,
   ComboBox as RACComboBox,
   ComboBoxProps as RACComboBoxProps,
+  ComboBoxStateContext,
   Input as RACInput,
   ListBox as RACListBox,
   Popover,
@@ -74,9 +76,14 @@ export interface ComboBoxProps<T extends object>
    */
   emptyState?: ReactNode;
   /**
-   * Keep the dropdown shut until this prop is true. For gating on a minimum
+   * Keep the dropdown shut while this prop is true. For gating on a minimum
    * query length — react-aria has no `minLength`, and rendering an empty list
-   * still opens an empty card.
+   * still opens an empty card. Derive it from a controlled `inputValue`, so
+   * the keystroke that clears the gate is the one that opens the list.
+   *
+   * While true, nothing can open the list: the chevron is disabled, and
+   * ArrowUp/ArrowDown are stopped before they reach the input (so an
+   * `onKeyDown` you pass won't see them either).
    */
   isPopoverHidden?: boolean;
   placement?: PopoverProps["placement"];
@@ -98,6 +105,24 @@ export interface ComboBoxProps<T extends object>
   className?: string;
 }
 
+/**
+ * Closes a list left open when `isPopoverHidden` turns on (deleting back
+ * below the minimum query length). Opening is blocked at source — see the
+ * `menuTrigger` override and arrow-key guard below — and this also catches
+ * RAC's rarer open paths, such as the iPad VoiceOver tap on the input.
+ *
+ * Layout effect, not a passive one, so the stale list never reaches a paint.
+ */
+const ClosePopoverWhenHidden = ({ isHidden }: { isHidden?: boolean }) => {
+  const state = useContext(ComboBoxStateContext);
+  useLayoutEffect(() => {
+    if (isHidden && state?.isOpen) {
+      state.setOpen(false);
+    }
+  });
+  return null;
+};
+
 /**
  * ComboBox — a text input that filters a listbox, for choosing one of a known
  * set where typing to narrow it down is the point. Use Select where the list
@@ -117,6 +142,7 @@ const ComboBoxInner = <T extends object>(
     indicator,
     emptyState,
     isPopoverHidden,
+    menuTrigger,
     placement = "bottom start",
     maxHeight,
     helperText,
@@ -167,6 +193,8 @@ const ComboBoxInner = <T extends object>(
       <RACComboBox
         allowsEmptyCollection={emptyState != null}
         {...rest}
+        // "manual" stops typing and focus from opening the list at all.
+        menuTrigger={isPopoverHidden ? "manual" : menuTrigger}
         className={cx(fieldSlots.root, slots.root, className)}
       >
         {label != null && (
@@ -182,6 +210,17 @@ const ComboBoxInner = <T extends object>(
         <div
           ref={triggerRef}
           data-keyboard-modality={isFocusVisible || undefined}
+          // "manual" still lets the arrow keys open the list, and RAC's
+          // handler is on the input, so stop them on the way down.
+          onKeyDownCapture={
+            isPopoverHidden
+              ? (e) => {
+                  if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+                    e.stopPropagation();
+                  }
+                }
+              : undefined
+          }
           className={cx(
             slots.trigger,
             triggerCss ? css(triggerCss) : undefined,
@@ -196,36 +235,45 @@ const ComboBoxInner = <T extends object>(
           {indicator !== null && (
             <RACButton
               aria-label={intl.formatMessage(uiMessage("ui.combobox-trigger"))}
+              isDisabled={isPopoverHidden}
               className={slots.indicator}
             >
               {indicator ?? <Icon as={RiArrowDownSLine} />}
             </RACButton>
           )}
         </div>
-        {!isPopoverHidden && (
-          <Popover
-            triggerRef={triggerRef}
-            placement={placement}
-            maxHeight={maxHeight}
-            style={triggerWidth ? { width: triggerWidth } : undefined}
-            className={cx(
-              slots.content,
-              contentCss ? css(contentCss) : undefined,
-            )}
+        <ClosePopoverWhenHidden isHidden={isPopoverHidden} />
+        {/*
+          Always mounted, even while isPopoverHidden: RAC builds the
+          collection from the ListBox children inside the popover, so
+          unmounting it also empties the collection — and an empty
+          collection can't open (without allowsEmptyCollection), so the next
+          keystroke's open lands before the remounted children have
+          repopulated it and the list never appears. React 18's effect
+          ordering happened to win that race; React 19's does not.
+        */}
+        <Popover
+          triggerRef={triggerRef}
+          placement={placement}
+          maxHeight={maxHeight}
+          style={triggerWidth ? { width: triggerWidth } : undefined}
+          className={cx(
+            slots.content,
+            contentCss ? css(contentCss) : undefined,
+          )}
+        >
+          <RACListBox
+            aria-label={intl.formatMessage(uiMessage("ui.combobox-listbox"))}
+            className={slots.list}
+            renderEmptyState={
+              emptyState
+                ? () => <div className={slots.empty}>{emptyState}</div>
+                : undefined
+            }
           >
-            <RACListBox
-              aria-label={intl.formatMessage(uiMessage("ui.combobox-listbox"))}
-              className={slots.list}
-              renderEmptyState={
-                emptyState
-                  ? () => <div className={slots.empty}>{emptyState}</div>
-                  : undefined
-              }
-            >
-              {children}
-            </RACListBox>
-          </Popover>
-        )}
+            {children}
+          </RACListBox>
+        </Popover>
         <FieldSupport
           helperText={helperText}
           errorMessage={errorMessage}

package/src/ConfirmDialog.tsx

@@ -22,7 +22,7 @@ export interface ConfirmDialogProps {
   confirmText: ReactNode;
   /** Defaults to "Cancel". */
   cancelText?: ReactNode;
-  finalFocusRef?: RefObject<HTMLElement>;
+  finalFocusRef?: RefObject<HTMLElement | null>;
   onCloseComplete?: () => void;
 }
 

package/src/Modal.tsx

@@ -173,7 +173,7 @@ export interface ModalOwnProps {
    * Element to focus when the dialog closes, instead of the element that was
    * focused when it opened.
    */
-  finalFocusRef?: RefObject<HTMLElement>;
+  finalFocusRef?: RefObject<HTMLElement | null>;
   /**
    * Accessible name for dialogs without a ModalHeader (which otherwise
    * provides the label). One of the two is required — react-aria warns in

package/src/Select.recipe.ts

@@ -127,6 +127,9 @@ export const select = defineSlotRecipe({
       background: "transparent",
       border: "none",
       cursor: "pointer",
+      // Disabled only while ComboBox's isPopoverHidden withholds the list:
+      // it should stop looking clickable, not look like a disabled field.
+      "&[data-disabled]": { cursor: "default" },
       // No focus styling, deliberately: react-aria keeps a ComboBox's toggle
       // button out of the tab order (the input owns the keyboard), so a ring
       // here would only ever be reachable programmatically, and would suggest

package/src/base-preset.ts

@@ -170,6 +170,20 @@ export const basePreset = definePreset({
         // Removing the slot is a follow-up needing an ml-trainer lockstep.
         brand: colors.blue,
         brand2: colors.gray,
+        // Syntax-highlighting palette, read as CSS variables by the Python
+        // Editor's CodeMirror theme and by @microbit/ui-code-view's stylesheet
+        // (whose var() fallbacks repeat these values for apps without Panda).
+        // Generic OSS defaults; brand presets set the micro:bit palette.
+        code: {
+          default: { value: "black" },
+          comment: { value: "gray" },
+          keyword: { value: "darkblue" },
+          literal: { value: "darkgreen" },
+          string: { value: "green" },
+          // Below the 4.5:1 text floor (gray.500 meets it); matches the
+          // editor's gutter pending a decision on line-number contrast.
+          lineNumber: { value: "{colors.gray.350}" },
+        },
       },
       spacing: {
         ...spacing,

package/src/hooks/useClipboard.ts

@@ -14,7 +14,9 @@ export function useClipboard(
   timeoutMs = 1500,
 ): { onCopy: () => void; hasCopied: boolean } {
   const [hasCopied, setHasCopied] = useState(false);
-  const timeoutRef = useRef<ReturnType<typeof setTimeout>>();
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | undefined>(
+    undefined,
+  );
   const markCopied = useCallback(() => {
     setHasCopied(true);
     clearTimeout(timeoutRef.current);

package/src/hooks/usePrevious.ts

@@ -7,7 +7,7 @@ import { useEffect, useRef } from "react";
 
 /** The value from the previous render (undefined on the first render). */
 export function usePrevious<T>(value: T): T | undefined {
-  const ref = useRef<T>();
+  const ref = useRef<T | undefined>(undefined);
   useEffect(() => {
     ref.current = value;
   });