@ariakit/react-core 0.0.1 → 0.1.1

package/esm/tab/tab.js

@@ -0,0 +1,92 @@
+import {
+  TabContext
+} from "../__chunks/UZKBEGMB.js";
+import {
+  useCompositeItem
+} from "../__chunks/WHN4PCW7.js";
+import "../__chunks/SAVDGYCC.js";
+import "../__chunks/OJNRBQKS.js";
+import "../__chunks/T3DJZG63.js";
+import "../__chunks/STKLF26R.js";
+import "../__chunks/5TGAWEHD.js";
+import "../__chunks/Z3X3QN6P.js";
+import {
+  createElement,
+  createHook,
+  createMemoComponent
+} from "../__chunks/JE5NWDDX.js";
+import {
+  useEvent,
+  useId
+} from "../__chunks/B7MIN7YT.js";
+import "../__chunks/SXC6BPOF.js";
+
+// src/tab/tab.ts
+import { useCallback, useContext } from "react";
+import { invariant } from "@ariakit/core/utils/misc";
+var useTab = createHook(
+  ({
+    store,
+    accessibleWhenDisabled = true,
+    getItem: getItemProp,
+    ...props
+  }) => {
+    const context = useContext(TabContext);
+    store = store || context;
+    invariant(
+      store,
+      process.env.NODE_ENV !== "production" && "Tab must be wrapped in a TabList component"
+    );
+    const defaultId = useId();
+    const id = props.id || defaultId;
+    const dimmed = props.disabled;
+    const getItem = useCallback(
+      (item) => {
+        const nextItem = { ...item, dimmed };
+        if (getItemProp) {
+          return getItemProp(nextItem);
+        }
+        return nextItem;
+      },
+      [dimmed, getItemProp]
+    );
+    const onClickProp = props.onClick;
+    const onClick = useEvent((event) => {
+      onClickProp?.(event);
+      if (event.defaultPrevented)
+        return;
+      store?.setSelectedId(id);
+    });
+    const panelId = store.panels.useState(
+      (state) => state.items.find((item) => item.tabId === id)?.id
+    );
+    const selected = store.useState((state) => !!id && state.selectedId === id);
+    props = {
+      id,
+      role: "tab",
+      "aria-selected": selected,
+      "aria-controls": panelId || void 0,
+      ...props,
+      onClick
+    };
+    props = useCompositeItem({
+      store,
+      ...props,
+      accessibleWhenDisabled,
+      getItem,
+      shouldRegisterItem: !!defaultId ? props.shouldRegisterItem : false
+    });
+    return props;
+  }
+);
+var Tab = createMemoComponent((props) => {
+  const htmlProps = useTab(props);
+  return createElement("button", htmlProps);
+});
+if (process.env.NODE_ENV !== "production") {
+  Tab.displayName = "Tab";
+}
+export {
+  Tab,
+  useTab
+};

package/esm/toolbar/toolbar-container.d.ts

@@ -0,0 +1,35 @@
+import type { CompositeContainerOptions } from "../composite/composite-container.js";
+import type { As, Props } from "../utils/types.js";
+import type { ToolbarItemOptions } from "./toolbar-item.js";
+/**
+ * Returns props to create a `ToolbarContainer` component.
+ * @see https://ariakit.org/components/toolbar
+ * @example
+ * ```jsx
+ * const store = useToolbarStore();
+ * const props = useToolbarContainer({ store });
+ * <Toolbar store={store}>
+ *   <Role {...props}>
+ *     <input type="text" />
+ *   </Role>
+ * </Toolbar>
+ * ```
+ */
+export declare const useToolbarContainer: import("../utils/types.js").Hook<ToolbarContainerOptions<"div">>;
+/**
+ * Renders a container for interactive widgets inside toolbar items.
+ * @see https://ariakit.org/components/toolbar
+ * @example
+ * ```jsx
+ * const toolbar = useToolbarStore();
+ * <Toolbar store={toolbar}>
+ *   <ToolbarContainer>
+ *     <input type="text" />
+ *   </ToolbarContainer>
+ * </Toolbar>
+ * ```
+ */
+export declare const ToolbarContainer: import("../utils/types.js").Component<ToolbarContainerOptions<"div">>;
+export interface ToolbarContainerOptions<T extends As = "div"> extends ToolbarItemOptions<T>, CompositeContainerOptions<T> {
+}
+export type ToolbarContainerProps<T extends As = "div"> = Props<ToolbarContainerOptions<T>>;

package/esm/toolbar/toolbar-container.js

@@ -0,0 +1,43 @@
+import {
+  useCompositeContainer
+} from "../__chunks/IACKFX3D.js";
+import {
+  useToolbarItem
+} from "../__chunks/CWHDUB4A.js";
+import "../__chunks/WHN4PCW7.js";
+import "../__chunks/SAVDGYCC.js";
+import "../__chunks/OJNRBQKS.js";
+import "../__chunks/T3DJZG63.js";
+import "../__chunks/STKLF26R.js";
+import "../__chunks/5TGAWEHD.js";
+import "../__chunks/Z3X3QN6P.js";
+import {
+  createElement,
+  createHook,
+  createMemoComponent
+} from "../__chunks/JE5NWDDX.js";
+import "../__chunks/6DAEYZ43.js";
+import "../__chunks/B7MIN7YT.js";
+import "../__chunks/SXC6BPOF.js";
+
+// src/toolbar/toolbar-container.ts
+var useToolbarContainer = createHook(
+  ({ store, ...props }) => {
+    props = useCompositeContainer({ store, ...props });
+    props = useToolbarItem({ store, ...props });
+    return props;
+  }
+);
+var ToolbarContainer = createMemoComponent(
+  (props) => {
+    const htmlProps = useToolbarContainer(props);
+    return createElement("div", htmlProps);
+  }
+);
+if (process.env.NODE_ENV !== "production") {
+  ToolbarContainer.displayName = "ToolbarContainer";
+}
+export {
+  ToolbarContainer,
+  useToolbarContainer
+};

package/esm/toolbar/toolbar-context.d.ts

@@ -0,0 +1,2 @@
+import type { ToolbarStore } from "./toolbar-store.js";
+export declare const ToolbarContext: import("react").Context<ToolbarStore | undefined>;

package/esm/toolbar/toolbar-context.js

@@ -0,0 +1,6 @@
+import {
+  ToolbarContext
+} from "../__chunks/DFUIIKXE.js";
+export {
+  ToolbarContext
+};

package/esm/toolbar/toolbar-input.d.ts

@@ -0,0 +1,31 @@
+import type { CompositeInputOptions } from "../composite/composite-input.js";
+import type { As, Props } from "../utils/types.js";
+import type { ToolbarItemOptions } from "./toolbar-item.js";
+/**
+ * Returns props to create a `ToolbarInput` component.
+ * @see https://ariakit.org/components/toolbar
+ * @example
+ * ```jsx
+ * const store = useToolbarStore();
+ * const props = useToolbarInput({ store });
+ * <Toolbar store={store}>
+ *   <Role {...props} />
+ * </Toolbar>
+ * ```
+ */
+export declare const useToolbarInput: import("../utils/types.js").Hook<ToolbarInputOptions<"input">>;
+/**
+ * Renders an input as a toolbar item.
+ * @see https://ariakit.org/components/toolbar
+ * @example
+ * ```jsx
+ * const toolbar = useToolbarStore();
+ * <Toolbar store={toolbar}>
+ *   <ToolbarInput />
+ * </Toolbar>
+ * ```
+ */
+export declare const ToolbarInput: import("../utils/types.js").Component<ToolbarInputOptions<"input">>;
+export interface ToolbarInputOptions<T extends As = "input"> extends ToolbarItemOptions<T>, CompositeInputOptions<T> {
+}
+export type ToolbarInputProps<T extends As = "input"> = Props<ToolbarInputOptions<T>>;

package/esm/toolbar/toolbar-input.js

@@ -0,0 +1,42 @@
+import {
+  useCompositeInput
+} from "../__chunks/VDIWPJGE.js";
+import {
+  useToolbarItem
+} from "../__chunks/CWHDUB4A.js";
+import "../__chunks/WHN4PCW7.js";
+import "../__chunks/SAVDGYCC.js";
+import "../__chunks/OJNRBQKS.js";
+import "../__chunks/T3DJZG63.js";
+import "../__chunks/STKLF26R.js";
+import "../__chunks/5TGAWEHD.js";
+import "../__chunks/Z3X3QN6P.js";
+import {
+  createElement,
+  createHook,
+  createMemoComponent
+} from "../__chunks/JE5NWDDX.js";
+import "../__chunks/B7MIN7YT.js";
+import "../__chunks/SXC6BPOF.js";
+
+// src/toolbar/toolbar-input.ts
+var useToolbarInput = createHook(
+  ({ store, ...props }) => {
+    props = useCompositeInput({ store, ...props });
+    props = useToolbarItem({ store, ...props });
+    return props;
+  }
+);
+var ToolbarInput = createMemoComponent(
+  (props) => {
+    const htmlProps = useToolbarInput(props);
+    return createElement("input", htmlProps);
+  }
+);
+if (process.env.NODE_ENV !== "production") {
+  ToolbarInput.displayName = "ToolbarInput";
+}
+export {
+  ToolbarInput,
+  useToolbarInput
+};

package/esm/toolbar/toolbar-item.d.ts

@@ -0,0 +1,36 @@
+import type { CompositeItemOptions } from "../composite/composite-item.js";
+import type { As, Props } from "../utils/types.js";
+import type { ToolbarStore } from "./toolbar-store.js";
+/**
+ * Returns props to create a `ToolbarItem` component.
+ * @see https://ariakit.org/components/toolbar
+ * @example
+ * ```jsx
+ * const store = useToolbarStore();
+ * const props = useToolbarItem({ store });
+ * <Toolbar store={store}>
+ *   <Role {...props}>Item</Role>
+ * </Toolbar>
+ * ```
+ */
+export declare const useToolbarItem: import("../utils/types.js").Hook<ToolbarItemOptions<"button">>;
+/**
+ * Renders an interactive element in a toolbar.
+ * @see https://ariakit.org/components/toolbar
+ * @example
+ * ```jsx
+ * const toolbar = useToolbarStore();
+ * <Toolbar store={toolbar}>
+ *   <ToolbarItem>Item</ToolbarItem>
+ * </Toolbar>
+ * ```
+ */
+export declare const ToolbarItem: import("../utils/types.js").Component<ToolbarItemOptions<"button">>;
+export interface ToolbarItemOptions<T extends As = "button"> extends CompositeItemOptions<T> {
+    /**
+     * Object returned by the `useToolbarStore` hook. If not provided, the parent
+     * `Toolbar` component's context will be used.
+     */
+    store?: ToolbarStore;
+}
+export type ToolbarItemProps<T extends As = "button"> = Props<ToolbarItemOptions<T>>;

package/esm/toolbar/toolbar-item.js

@@ -0,0 +1,18 @@
+import {
+  ToolbarItem,
+  useToolbarItem
+} from "../__chunks/CWHDUB4A.js";
+import "../__chunks/WHN4PCW7.js";
+import "../__chunks/SAVDGYCC.js";
+import "../__chunks/OJNRBQKS.js";
+import "../__chunks/T3DJZG63.js";
+import "../__chunks/STKLF26R.js";
+import "../__chunks/5TGAWEHD.js";
+import "../__chunks/Z3X3QN6P.js";
+import "../__chunks/JE5NWDDX.js";
+import "../__chunks/B7MIN7YT.js";
+import "../__chunks/SXC6BPOF.js";
+export {
+  ToolbarItem,
+  useToolbarItem
+};

package/esm/toolbar/toolbar-separator.d.ts

@@ -0,0 +1,40 @@
+import type { CompositeSeparatorOptions } from "../composite/composite-separator.js";
+import type { As, Props } from "../utils/types.js";
+import type { ToolbarStore } from "./toolbar-store.js";
+/**
+ * Returns props to create a `ToolbarSeparator` component.
+ * @see https://ariakit.org/components/toolbar
+ * @example
+ * ```jsx
+ * const store = useToolbarStore();
+ * const props = useToolbarSeparator({ store });
+ * <Toolbar store={store}>
+ *   <ToolbarItem>Item 1</ToolbarItem>
+ *   <Role {...props} />
+ *   <ToolbarItem>Item 2</ToolbarItem>
+ * </Toolbar>
+ * ```
+ */
+export declare const useToolbarSeparator: import("../utils/types.js").Hook<ToolbarSeparatorOptions<"hr">>;
+/**
+ * Renders a separator for toolbar items.
+ * @see https://ariakit.org/components/toolbar
+ * @example
+ * ```jsx
+ * const toolbar = useToolbarStore();
+ * <Toolbar store={toolbar}>
+ *   <ToolbarItem>Item 1</ToolbarItem>
+ *   <ToolbarSeparator />
+ *   <ToolbarItem>Item 2</ToolbarItem>
+ * </Toolbar>
+ * ```
+ */
+export declare const ToolbarSeparator: import("../utils/types.js").Component<ToolbarSeparatorOptions<"hr">>;
+export interface ToolbarSeparatorOptions<T extends As = "hr"> extends CompositeSeparatorOptions<T> {
+    /**
+     * Object returned by the `useToolbarStore` hook. If not provided, the parent
+     * `Toolbar` component's context will be used.
+     */
+    store?: ToolbarStore;
+}
+export type ToolbarSeparatorProps<T extends As = "hr"> = Props<ToolbarSeparatorOptions<T>>;

package/esm/toolbar/toolbar-separator.js

@@ -0,0 +1,31 @@
+import {
+  useCompositeSeparator
+} from "../__chunks/NMA53LJC.js";
+import "../__chunks/HOVZF3TA.js";
+import "../__chunks/Z3X3QN6P.js";
+import {
+  createComponent,
+  createElement,
+  createHook
+} from "../__chunks/JE5NWDDX.js";
+
+// src/toolbar/toolbar-separator.ts
+var useToolbarSeparator = createHook(
+  (props) => {
+    props = useCompositeSeparator(props);
+    return props;
+  }
+);
+var ToolbarSeparator = createComponent(
+  (props) => {
+    const htmlProps = useToolbarSeparator(props);
+    return createElement("hr", htmlProps);
+  }
+);
+if (process.env.NODE_ENV !== "production") {
+  ToolbarSeparator.displayName = "ToolbarSeparator";
+}
+export {
+  ToolbarSeparator,
+  useToolbarSeparator
+};

package/esm/toolbar/toolbar-store.d.ts

@@ -0,0 +1,34 @@
+import * as Core from "@ariakit/core/toolbar/toolbar-store";
+import type { CompositeStoreFunctions, CompositeStoreOptions, CompositeStoreState } from "../composite/composite-store.js";
+import type { Store } from "../utils/store.js";
+export declare function useToolbarStoreOptions(props: ToolbarStoreProps): Partial<import("../collection/collection-store.js").CollectionStoreOptions<{
+    id: string;
+    element?: HTMLElement | null | undefined;
+} & {
+    rowId?: string | undefined;
+    disabled?: boolean | undefined;
+    children?: string | undefined;
+}>>;
+export declare function useToolbarStoreProps<T extends ToolbarStore>(store: T, props: ToolbarStoreProps): T;
+/**
+ * Creates a toolbar store.
+ * @see https://ariakit.org/components/toolbar
+ * @example
+ * ```jsx
+ * const toolbar = useToolbarStore();
+ * <Toolbar store={toolbar}>
+ *   <ToolbarItem>Item 1</ToolbarItem>
+ *   <ToolbarItem>Item 2</ToolbarItem>
+ *   <ToolbarItem>Item 3</ToolbarItem>
+ * </Toolbar>
+ * ```
+ */
+export declare function useToolbarStore(props?: ToolbarStoreProps): ToolbarStore;
+export interface ToolbarStoreState extends Core.ToolbarStoreState, CompositeStoreState {
+}
+export interface ToolbarStoreFunctions extends Core.ToolbarStoreFunctions, CompositeStoreFunctions {
+}
+export interface ToolbarStoreOptions extends Core.ToolbarStoreOptions, CompositeStoreOptions {
+}
+export type ToolbarStoreProps = ToolbarStoreOptions & Core.ToolbarStoreProps;
+export type ToolbarStore = ToolbarStoreFunctions & Store<Core.ToolbarStore>;

package/esm/toolbar/toolbar-store.js

@@ -0,0 +1,31 @@
+import {
+  useCompositeStoreOptions,
+  useCompositeStoreProps
+} from "../__chunks/2EP53RLR.js";
+import "../__chunks/56XURSTF.js";
+import {
+  useStore
+} from "../__chunks/6DAEYZ43.js";
+import "../__chunks/B7MIN7YT.js";
+import "../__chunks/SXC6BPOF.js";
+
+// src/toolbar/toolbar-store.ts
+import * as Core from "@ariakit/core/toolbar/toolbar-store";
+function useToolbarStoreOptions(props) {
+  return useCompositeStoreOptions(props);
+}
+function useToolbarStoreProps(store, props) {
+  return useCompositeStoreProps(store, props);
+}
+function useToolbarStore(props = {}) {
+  const options = useToolbarStoreOptions(props);
+  const store = useStore(
+    () => Core.createToolbarStore({ ...props, ...options })
+  );
+  return useToolbarStoreProps(store, props);
+}
+export {
+  useToolbarStore,
+  useToolbarStoreOptions,
+  useToolbarStoreProps
+};

package/esm/toolbar/toolbar.d.ts

@@ -0,0 +1,37 @@
+import type { CompositeOptions } from "../composite/composite.js";
+import type { As, Props } from "../utils/types.js";
+import type { ToolbarStore } from "./toolbar-store.js";
+/**
+ * Returns props to create a `Toolbar` component.
+ * @see https://ariakit.org/components/toolbar
+ * @example
+ * ```jsx
+ * const store = useToolbarStore();
+ * const props = useToolbar({ store });
+ * <Role {...props}>
+ *   <ToolbarItem>Item 1</ToolbarItem>
+ *   <ToolbarItem>Item 2</ToolbarItem>
+ * </Role>
+ * ```
+ */
+export declare const useToolbar: import("../utils/types.js").Hook<ToolbarOptions<"div">>;
+/**
+ * Renders a toolbar element that groups interactive elements together.
+ * @see https://ariakit.org/components/toolbar
+ * @example
+ * ```jsx
+ * const toolbar = useToolbarStore();
+ * <Toolbar store={toolbar}>
+ *   <ToolbarItem>Item 1</ToolbarItem>
+ *   <ToolbarItem>Item 2</ToolbarItem>
+ * </Toolbar>
+ * ```
+ */
+export declare const Toolbar: import("../utils/types.js").Component<ToolbarOptions<"div">>;
+export interface ToolbarOptions<T extends As = "div"> extends CompositeOptions<T> {
+    /**
+     * Object returned by the `useToolbarStore` hook.
+     */
+    store: ToolbarStore;
+}
+export type ToolbarProps<T extends As = "div"> = Props<ToolbarOptions<T>>;

package/esm/toolbar/toolbar.js

@@ -0,0 +1,49 @@
+import {
+  ToolbarContext
+} from "../__chunks/DFUIIKXE.js";
+import {
+  useComposite
+} from "../__chunks/FXC76SFN.js";
+import "../__chunks/STKLF26R.js";
+import "../__chunks/5TGAWEHD.js";
+import "../__chunks/Z3X3QN6P.js";
+import {
+  createComponent,
+  createElement,
+  createHook
+} from "../__chunks/JE5NWDDX.js";
+import {
+  useWrapElement
+} from "../__chunks/B7MIN7YT.js";
+import "../__chunks/SXC6BPOF.js";
+
+// src/toolbar/toolbar.tsx
+import { jsx } from "react/jsx-runtime";
+var useToolbar = createHook(({ store, ...props }) => {
+  const orientation = store.useState(
+    (state) => state.orientation === "both" ? void 0 : state.orientation
+  );
+  props = useWrapElement(
+    props,
+    (element) => /* @__PURE__ */ jsx(ToolbarContext.Provider, { value: store, children: element }),
+    [store]
+  );
+  props = {
+    role: "toolbar",
+    "aria-orientation": orientation,
+    ...props
+  };
+  props = useComposite({ store, ...props });
+  return props;
+});
+var Toolbar = createComponent((props) => {
+  const htmlProps = useToolbar(props);
+  return createElement("div", htmlProps);
+});
+if (process.env.NODE_ENV !== "production") {
+  Toolbar.displayName = "Toolbar";
+}
+export {
+  Toolbar,
+  useToolbar
+};

package/esm/tooltip/tooltip-anchor.d.ts

@@ -0,0 +1,51 @@
+import type { PopoverAnchorOptions } from "../popover/popover-anchor.js";
+import type { As, Props } from "../utils/types.js";
+import type { TooltipStore } from "./tooltip-store.js";
+/**
+ * Returns props to create a `TooltipAnchor` component.
+ * @see https://ariakit.org/components/tooltip
+ * @example
+ * ```jsx
+ * const store = useToolTipStore();
+ * const props = useTooltipAnchor({ store });
+ * <Role {...props}>Anchor</Role>
+ * <Tooltip store={store}>Tooltip</Tooltip>
+ * ```
+ */
+export declare const useTooltipAnchor: import("../utils/types.js").Hook<TooltipAnchorOptions<"div">>;
+/**
+ * Renders an element that will be labelled or described by a `Tooltip`
+ * component. This component will also be used as the reference to position the
+ * tooltip on the screen.
+ * @see https://ariakit.org/components/tooltip
+ * @example
+ * ```jsx
+ * const tooltip = useTooltipStore();
+ * <TooltipAnchor store={tooltip}>Anchor</TooltipAnchor>
+ * <Tooltip store={tooltip}>Tooltip</Tooltip>
+ * ```
+ */
+export declare const TooltipAnchor: import("../utils/types.js").Component<TooltipAnchorOptions<"div">>;
+export interface TooltipAnchorOptions<T extends As = "div"> extends PopoverAnchorOptions<T> {
+    /**
+     * Object returned by the `useTooltipStore` hook.
+     */
+    store: TooltipStore;
+    /**
+     * Determines wether the tooltip anchor is described or labelled by the
+     * tooltip. If `true`, the tooltip id will be set as the `aria-describedby`
+     * attribute on the anchor element, and not as the `aria-labelledby`
+     * attribute.
+     * @default false
+     * @example
+     * ```jsx
+     * const tooltip = useTooltipStore();
+     * <TooltipAnchor store={tooltip} described>
+     *   This is an element with a visible label.
+     * </TooltipAnchor>
+     * <Tooltip store={tooltip}>Description</Tooltip>
+     * ```
+     */
+    described?: boolean;
+}
+export type TooltipAnchorProps<T extends As = "div"> = Props<TooltipAnchorOptions<T>>;

package/esm/tooltip/tooltip-anchor.js

@@ -0,0 +1,72 @@
+import {
+  usePopoverAnchor
+} from "../__chunks/RNWB46DZ.js";
+import {
+  createComponent,
+  createElement,
+  createHook
+} from "../__chunks/JE5NWDDX.js";
+import {
+  useEvent
+} from "../__chunks/B7MIN7YT.js";
+import "../__chunks/SXC6BPOF.js";
+
+// src/tooltip/tooltip-anchor.ts
+var useTooltipAnchor = createHook(
+  ({ store, described, ...props }) => {
+    const onFocusProp = props.onFocus;
+    const onFocus = useEvent((event) => {
+      onFocusProp?.(event);
+      if (event.defaultPrevented)
+        return;
+      store.setAnchorElement(event.currentTarget);
+      store.show();
+    });
+    const onBlurProp = props.onBlur;
+    const onBlur = useEvent((event) => {
+      onBlurProp?.(event);
+      if (event.defaultPrevented)
+        return;
+      store.hide();
+    });
+    const onMouseEnterProp = props.onMouseEnter;
+    const onMouseEnter = useEvent((event) => {
+      onMouseEnterProp?.(event);
+      if (event.defaultPrevented)
+        return;
+      store.setAnchorElement(event.currentTarget);
+      store.show();
+    });
+    const onMouseLeaveProp = props.onMouseLeave;
+    const onMouseLeave = useEvent((event) => {
+      onMouseLeaveProp?.(event);
+      if (event.defaultPrevented)
+        return;
+      store.hide();
+    });
+    const contentElement = store.useState("contentElement");
+    props = {
+      tabIndex: 0,
+      "aria-labelledby": !described ? contentElement?.id : void 0,
+      "aria-describedby": described ? contentElement?.id : void 0,
+      ...props,
+      onFocus,
+      onBlur,
+      onMouseEnter,
+      onMouseLeave
+    };
+    props = usePopoverAnchor({ store, ...props });
+    return props;
+  }
+);
+var TooltipAnchor = createComponent((props) => {
+  const htmlProps = useTooltipAnchor(props);
+  return createElement("div", htmlProps);
+});
+if (process.env.NODE_ENV !== "production") {
+  TooltipAnchor.displayName = "TooltipAnchor";
+}
+export {
+  TooltipAnchor,
+  useTooltipAnchor
+};