@pexip/components 20.2.0 → 20.3.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # Changelog
 
+## 20.3.0
+
+### Minor Changes
+
+- f0569ae: Adds support for custom focus styles to `InteractiveElement`.
+
+### Patch Changes
+
+- 3f7ea58: Describe the microphone test before it starts, and announce
+  countdowns, recording completion, and sound-test label changes without
+  competing modal refocus.
+- 8d38605: Fix keyboard focus order across interactive components:
+
+  - Place `NotificationTooltip` actions after their trigger and restore focus
+    when dismissed
+  - Close `AriaMenu` when Tab is pressed on a menu item
+  - Allow focused drag handles to move `Draggable` elements with arrow keys
+  - Remove single-item `CondensedTabs` from the tab order
+
 ## 20.2.0
 
 ### Minor Changes

package/api-docs/variables/CircleCountDown.mdx

@@ -1,5 +1,6 @@
 ```ts
 const CircleCountDown: React.FC<{
+  currentCount?: number;
   startCountFrom?: number;
   msInterval?: number;
   shouldStartCountDown?: boolean;

package/api-docs/variables/Draggable.mdx

@@ -20,7 +20,8 @@ whole element should be draggable.
 - data-drag-handle: Marks a descendant that *can* initiate a drag even
 ```
   when it sits inside a `data-no-drag` region. Use it to expose a dedicated
-  grab handle within an otherwise non-draggable area.
+  grab handle within an otherwise non-draggable area. A focusable handle can also
+  move the Draggable with arrow keys when `isMoveableWithArrowKeys` is set.
 
 Both attributes are resolved with `Element.closest`, so they apply to the
 tagged element and everything nested within it.

package/api-docs/variables/InteractiveElement.mdx

@@ -1,3 +1,3 @@
 ```ts
-const InteractiveElement: React.FC<React.ComponentPropsWithoutRef<InteractiveElementHTMLTag> & object>;
+const InteractiveElement: React.FC<InteractiveElementBaseProps>;
 ```

package/api-docs/variables/RefButton.mdx

@@ -1,3 +1,3 @@
 ```ts
-const RefButton: ForwardRefExoticComponent<((((Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> | Omit<...> | Omit<...> | Omit<...>) & { ...; }) & { ...; }) & EnhancerProps) & LoadingBoxProps & Pick<...> & { ...; } & RefAttributes<HTMLDivElement | HTMLButtonElement | HTMLAnchorElement>>;
+const RefButton: ForwardRefExoticComponent<((InteractiveElementBaseProps & { colorScheme?: "dark" | "light" | undefined; isActive?: boolean | undefined; isDisabled?: boolean | undefined; ... 5 more ...; backgroundTransparency?: number | undefined; }) & EnhancerProps) & LoadingBoxProps & Pick<...> & { ...; } & RefAttributes<HTMLDivElement | HTMLButtonElement | HTMLAnchorElement>>;
 ```

package/api-docs/variables/RefInteractiveElement.mdx

@@ -1,3 +1,3 @@
 ```ts
-const RefInteractiveElement: ForwardRefExoticComponent<(Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> | Omit<DetailedHTMLProps<HTMLAttributes<...>, HTMLElement>, "ref"> | Omit<...> | Omit<...>) & { ...; } & RefAttributes<HTMLDivElement | HTMLButtonElement | HTMLAnchorElement>>;
+const RefInteractiveElement: ForwardRefExoticComponent<InteractiveElementBaseProps & RefAttributes<HTMLDivElement | HTMLButtonElement | HTMLAnchorElement>>;
 ```

package/api-docs/variables/RefSimpleButton.mdx

@@ -1,3 +1,3 @@
 ```ts
-const RefSimpleButton: ForwardRefExoticComponent<((Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> | Omit<DetailedHTMLProps<...>, "ref"> | Omit<...> | Omit<...>) & { ...; }) & { ...; } & RefAttributes<HTMLDivElement | HTMLButtonElement | HTMLAnchorElement>>;
+const RefSimpleButton: ForwardRefExoticComponent<InteractiveElementBaseProps & { colorScheme?: "dark" | "light" | undefined; isActive?: boolean | undefined; isDisabled?: boolean | undefined; modifier?: "fullWidth" | ... 3 more ... | undefined; noBorderRadius?: boolean | undefined; noHover?: boolean | undefined; size?: "small" | ... 4 more ... | undefined; variant?... & RefAttributes<HTMLDivElement | HTMLButtonElement | HTMLAnchorElement>>;
 ```

package/design-tokens/tokens/zIndex.tokens.scss

@@ -17,7 +17,8 @@
     @include create-token(components-z-index-drop-content, 99);
     @include create-token(components-z-index-table-sticky-pagination, 98);
     @include create-token(components-z-index-checkbox-input, 1);
-    @include create-token(components-z-index-tooltip, 1);
+    // Tooltips portal to react-aria's top layer; keep the default there.
+    @include create-token(components-z-index-tooltip, 100000);
     @include create-token(components-z-index-line-heading-text, 1);
     @include create-token(components-z-index-line-heading-visual-line, 0);
     @include create-token(components-z-index-file-upload-input, -1);