@microbit/ui 0.3.0 → 0.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@microbit/ui",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "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",
   "type": "module",

package/src/Input.recipe.ts

@@ -49,11 +49,11 @@ export const input = defineRecipe({
     "&&&:is([data-invalid], :user-invalid)": {
       borderColor: "danger.500",
     },
-    // Modality-tracked: RAC's attribute, or Input.tsx's. Native
+    // Modality-tracked: RAC's attribute, or Input/NativeSelect's. Native
     // :focus-visible is the fallback for a bare element wearing the recipe,
-    // but not text-entry ones — browsers match it there on a pointer click,
-    // which is what the tracking exists to exclude.
-    "&&&:is([data-focus-visible], :focus-visible:not([data-rac], input, textarea))":
+    // but not form controls — browsers match it there on a pointer click
+    // (Chrome includes select), which is what the tracking exists to exclude.
+    "&&&:is([data-focus-visible], :focus-visible:not([data-rac], input, textarea, select))":
       {
         focusRing: "outline",
       },

package/src/NativeSelect.tsx

@@ -4,6 +4,7 @@
  * SPDX-License-Identifier: MIT
  */
 import { forwardRef, SelectHTMLAttributes } from "react";
+import { mergeProps, useFocusRing } from "react-aria";
 import { css, cx } from "styled-system/css";
 import { input, InputVariantProps } from "styled-system/recipes";
 import { SystemStyleObject } from "styled-system/types";
@@ -40,9 +41,14 @@ export const NativeSelect = forwardRef<HTMLSelectElement, NativeSelectProps>(
     { hideChevron = false, size, css: cssProp, wrapperCss, className, ...rest },
     ref,
   ) {
+    // Modality tracked here rather than via the recipe's native
+    // :focus-visible fallback: Chrome matches that on a clicked select (as it
+    // does on text inputs), and this ring is keyboard-only.
+    const { isFocusVisible, focusProps } = useFocusRing();
     const select = (
       <select
         ref={ref}
+        data-focus-visible={isFocusVisible || undefined}
         className={cx(
           input({ size }),
           css(
@@ -59,7 +65,7 @@ export const NativeSelect = forwardRef<HTMLSelectElement, NativeSelectProps>(
           ),
           className,
         )}
-        {...rest}
+        {...mergeProps(rest, focusProps)}
       />
     );
     if (hideChevron) {