@trackunit/react-components 1.24.1 → 1.24.3

package/index.cjs.js

@@ -2799,10 +2799,10 @@ const cvaPopoverTitleText = cssClassVarianceUtilities.cvaMerge(["flex-1", "text-
  * @param {PopoverContentProps} props - The props for the PopoverContent component
  * @returns {ReactElement} The popover content element
  */
-const PopoverContent = function PopoverContent({ className, "data-testid": dataTestId, children, portalId, ref: propRef, ...props }) {
+const PopoverContent = function PopoverContent({ className, "data-testid": dataTestId, children, portalId, initialFocus, ref: propRef, ...props }) {
     const { context: floatingContext, customProps, ...context } = usePopoverContext();
     const ref = react$1.useMergeRefs([context.refs.setFloating, propRef]);
-    return (jsxRuntime.jsx(Portal, { id: portalId, children: context.isOpen === true ? (jsxRuntime.jsx(react$1.FloatingFocusManager, { closeOnFocusOut: false, context: floatingContext, guards: true, modal: context.isModal, order: ["reference", "content"], returnFocus: true, children: jsxRuntime.jsx("div", { "aria-describedby": context.descriptionId, "aria-labelledby": context.labelId, className: cvaPopoverContainer({ className: className ?? customProps.className }), "data-testid": dataTestId ?? customProps["data-testid"] ?? "popover-content", ref: ref, style: {
+    return (jsxRuntime.jsx(Portal, { id: portalId, children: context.isOpen === true ? (jsxRuntime.jsx(react$1.FloatingFocusManager, { closeOnFocusOut: false, context: floatingContext, guards: true, initialFocus: initialFocus, modal: context.isModal, order: ["reference", "content"], returnFocus: true, children: jsxRuntime.jsx("div", { "aria-describedby": context.descriptionId, "aria-labelledby": context.labelId, className: cvaPopoverContainer({ className: className ?? customProps.className }), "data-testid": dataTestId ?? customProps["data-testid"] ?? "popover-content", ref: ref, style: {
                     position: context.strategy,
                     top: context.y,
                     left: context.x,
@@ -11513,12 +11513,15 @@ const useContainerBreakpoints = (ref, options = {}) => {
     const { skip = false } = options;
     const [containerSize, setContainerSize] = react.useState(() => defaultBreakpointState);
     react.useEffect(() => {
+        if (skip) {
+            return;
+        }
         if (process.env.NODE_ENV === "development" && !ref.current) {
             // eslint-disable-next-line no-console
             console.warn("useContainerBreakpoints: The provided ref is not attached to any element. " +
                 "Make sure to pass the ref to an element using the ref prop, like: <div ref={myRef}>", "\nComponent:", ref.current);
         }
-    }, [ref]);
+    }, [ref, skip]);
     const updateContainerSize = react.useCallback(() => {
         if (!ref.current) {
             return;

package/index.esm.js

@@ -2797,10 +2797,10 @@ const cvaPopoverTitleText = cvaMerge(["flex-1", "text-neutral-500"]);
  * @param {PopoverContentProps} props - The props for the PopoverContent component
  * @returns {ReactElement} The popover content element
  */
-const PopoverContent = function PopoverContent({ className, "data-testid": dataTestId, children, portalId, ref: propRef, ...props }) {
+const PopoverContent = function PopoverContent({ className, "data-testid": dataTestId, children, portalId, initialFocus, ref: propRef, ...props }) {
     const { context: floatingContext, customProps, ...context } = usePopoverContext();
     const ref = useMergeRefs$1([context.refs.setFloating, propRef]);
-    return (jsx(Portal, { id: portalId, children: context.isOpen === true ? (jsx(FloatingFocusManager, { closeOnFocusOut: false, context: floatingContext, guards: true, modal: context.isModal, order: ["reference", "content"], returnFocus: true, children: jsx("div", { "aria-describedby": context.descriptionId, "aria-labelledby": context.labelId, className: cvaPopoverContainer({ className: className ?? customProps.className }), "data-testid": dataTestId ?? customProps["data-testid"] ?? "popover-content", ref: ref, style: {
+    return (jsx(Portal, { id: portalId, children: context.isOpen === true ? (jsx(FloatingFocusManager, { closeOnFocusOut: false, context: floatingContext, guards: true, initialFocus: initialFocus, modal: context.isModal, order: ["reference", "content"], returnFocus: true, children: jsx("div", { "aria-describedby": context.descriptionId, "aria-labelledby": context.labelId, className: cvaPopoverContainer({ className: className ?? customProps.className }), "data-testid": dataTestId ?? customProps["data-testid"] ?? "popover-content", ref: ref, style: {
                     position: context.strategy,
                     top: context.y,
                     left: context.x,
@@ -11511,12 +11511,15 @@ const useContainerBreakpoints = (ref, options = {}) => {
     const { skip = false } = options;
     const [containerSize, setContainerSize] = useState(() => defaultBreakpointState);
     useEffect(() => {
+        if (skip) {
+            return;
+        }
         if (process.env.NODE_ENV === "development" && !ref.current) {
             // eslint-disable-next-line no-console
             console.warn("useContainerBreakpoints: The provided ref is not attached to any element. " +
                 "Make sure to pass the ref to an element using the ref prop, like: <div ref={myRef}>", "\nComponent:", ref.current);
         }
-    }, [ref]);
+    }, [ref, skip]);
     const updateContainerSize = useCallback(() => {
         if (!ref.current) {
             return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "1.24.1",
+  "version": "1.24.3",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "migrations": "./migrations.json",

package/src/components/Popover/PopoverContent.d.ts

@@ -1,4 +1,4 @@
-import { HTMLProps, ReactElement, ReactNode, Ref } from "react";
+import { HTMLProps, MutableRefObject, ReactElement, ReactNode, Ref } from "react";
 import { CommonProps } from "../../common/CommonProps";
 export type PopoverContentChildren = ((close: () => void) => ReactNode) | ReactNode;
 export interface PopoverContentProps extends Omit<HTMLProps<HTMLDivElement>, "children">, CommonProps {
@@ -31,6 +31,18 @@ export interface PopoverContentProps extends Omit<HTMLProps<HTMLDivElement>, "ch
      * Custom dom id to use for portalling the popover content
      */
     portalId?: string;
+    /**
+     * Controls which element receives focus when the popover opens.
+     *
+     * - **number** (default `0`): index into the FloatingFocusManager focus order. With the
+     *   default `order` of `["reference", "content"]`, `0` keeps focus on the trigger reference
+     *   and `1` moves focus to the first tabbable element inside the popover content.
+     * - **ref**: focuses the specific element pointed to by the ref when the popover opens.
+     *
+     * Use this when you want the popover to capture keyboard focus on open (for example,
+     * dialog-like menus or pickers) instead of leaving focus on the trigger.
+     */
+    initialFocus?: number | MutableRefObject<HTMLElement | null>;
     /**
      * A ref for the component
      */
@@ -71,4 +83,4 @@ export interface PopoverContentProps extends Omit<HTMLProps<HTMLDivElement>, "ch
  * @param {PopoverContentProps} props - The props for the PopoverContent component
  * @returns {ReactElement} The popover content element
  */
-export declare const PopoverContent: ({ className, "data-testid": dataTestId, children, portalId, ref: propRef, ...props }: PopoverContentProps) => ReactElement;
+export declare const PopoverContent: ({ className, "data-testid": dataTestId, children, portalId, initialFocus, ref: propRef, ...props }: PopoverContentProps) => ReactElement;