npm - @pexip/components - Versions diffs - 20.2.0 → 20.4.0 - Mend

@pexip/components 20.2.0 → 20.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (37) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -1,5 +1,55 @@
 # Changelog
+## 20.4.0
+### Minor Changes
+- b72433f: Stop in-meeting notification tooltips painting over the panels.
+  - The meeting was wrapped in two `position: fixed` elements, which establish a
+    stacking context around the whole app. Everything portalled to `<body>` —
+    tooltips, modals — landed outside it, so no `z-index` could order them
+    against anything inside, such as the side panels. Both wrappers are now
+    `position: absolute`, leaving the page in a single stacking context where
+    the design tokens actually govern the order.
+  - `NotificationTooltip` takes a `zIndex` prop to override where it stacks and
+    defaults it to the `components-z-index-tooltip` token, whose base value is
+    react-aria's top layer (`100000`) so ordinary tooltips float above content
+    while apps can still tune stacking via the token (e.g. trieste). The
+    in-meeting controls, the folded selfview, the input control balloon and the
+    user menu pass `TOOLTIP_Z_INDEX_BELOW_OVERLAYS` so they sit just under the
+    panels and modals that cover their triggers.
+  - Fix the preflight "no audio detected" tooltip painting over modals.
+  - The permissions help-video modal stacks one above the tooltip token so it
+    opens above the (top-layer) tooltip it is launched from.
+- eb69d83: `DropContent` supports `anchorRef` prop.
+### Patch Changes
+- Updated dependencies [8b563f5]
+  - @pexip/utils@17.5.0
+  - @pexip/hooks@21.0.10
+## 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 CHANGED Viewed

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

package/api-docs/variables/Draggable.mdx CHANGED Viewed

@@ -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 CHANGED Viewed

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

package/api-docs/variables/RefButton.mdx CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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);