action-bar

1"use client";
2 
3import { mergeProps } from "@base-ui/react/merge-props";
4import { useRender } from "@base-ui/react/use-render";
5import * as React from "react";
6import * as ReactDOM from "react-dom";
7import { useComposedRefs } from "@/lib/compose-refs";
8import { cn } from "@/lib/utils";
9import { useAsRef } from "@/registry/bases/base/hooks/use-as-ref";
10import { useIsomorphicLayoutEffect } from "@/registry/bases/base/hooks/use-isomorphic-layout-effect";
11import { Button } from "@/registry/bases/base/ui/button";
12import { useDirection } from "@/registry/bases/base/ui/direction";
13 
14const ROOT_NAME = "ActionBar";
15const GROUP_NAME = "ActionBarGroup";
16const ITEM_NAME = "ActionBarItem";
17const CLOSE_NAME = "ActionBarClose";
18const SEPARATOR_NAME = "ActionBarSeparator";
19const ITEM_SELECT = "actionbar.itemSelect";
20const ENTRY_FOCUS = "actionbarFocusGroup.onEntryFocus";
21const EVENT_OPTIONS = { bubbles: false, cancelable: true };
22 
23type Direction = "ltr" | "rtl";
24type Orientation = "horizontal" | "vertical";
25 
26interface DivProps
27  extends useRender.ComponentProps<"div">,
28    React.ComponentProps<"div"> {}
29 
30type RootElement = React.ComponentRef<typeof ActionBar>;
31type ItemElement = React.ComponentRef<typeof ActionBarItem>;
32 
33function focusFirst(
34  candidates: React.RefObject<HTMLElement | null>[],
35  preventScroll = false,
36) {
37  const PREVIOUSLY_FOCUSED_ELEMENT = document.activeElement;
38  for (const candidateRef of candidates) {
39    const candidate = candidateRef.current;
40    if (!candidate) continue;
41    if (candidate === PREVIOUSLY_FOCUSED_ELEMENT) return;
42    candidate.focus({ preventScroll });
43    if (document.activeElement !== PREVIOUSLY_FOCUSED_ELEMENT) return;
44  }
45}
46 
47function wrapArray<T>(array: T[], startIndex: number) {
48  return array.map<T>(
49    (_, index) => array[(startIndex + index) % array.length] as T,
50  );
51}
52 
53function getDirectionAwareKey(key: string, dir?: Direction) {
54  if (dir !== "rtl") return key;
55  return key === "ArrowLeft"
56    ? "ArrowRight"
57    : key === "ArrowRight"
58      ? "ArrowLeft"
59      : key;
60}
61 
62interface ItemData {
63  id: string;
64  ref: React.RefObject<ItemElement | null>;
65  disabled: boolean;
66}
67 
68interface ActionBarContextValue {
69  onOpenChange?: (open: boolean) => void;
70  dir: Direction;
71  orientation: Orientation;
72  loop: boolean;
73}
74 
75const ActionBarContext = React.createContext<ActionBarContextValue | null>(
76  null,
77);
78 
79function useActionBarContext(consumerName: string) {
80  const context = React.useContext(ActionBarContext);
81  if (!context) {
82// … truncated