action-bar

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