fix: prevent asset conflicts between React and Grid.js versions

Add coexistence checks to all enqueue methods to prevent loading
both React and Grid.js assets simultaneously.

Changes:
- ReactAdmin.php: Only enqueue React assets when ?react=1
- Init.php: Skip Grid.js when React active on admin pages
- Form.php, Coupon.php, Access.php: Restore classic assets when ?react=0
- Customer.php, Product.php, License.php: Add coexistence checks

Now the toggle between Classic and React versions works correctly.

Co-authored-by: Claude Opus 4.7 <noreply@anthropic.com>

node_modules/reakit/src/Popover/Popover.ts

@@ -0,0 +1,49 @@
+import { useWarning } from "reakit-warning";
+import { createComponent } from "reakit-system/createComponent";
+import { useCreateElement } from "reakit-system/useCreateElement";
+import { createHook } from "reakit-system/createHook";
+import { useForkRef } from "reakit-utils/useForkRef";
+import { DialogOptions, DialogHTMLProps, useDialog } from "../Dialog/Dialog";
+import { PopoverStateReturn } from "./PopoverState";
+import { POPOVER_KEYS } from "./__keys";
+
+export type PopoverOptions = DialogOptions &
+  Pick<
+    Partial<PopoverStateReturn>,
+    "unstable_popoverRef" | "unstable_popoverStyles"
+  >;
+
+export type PopoverHTMLProps = DialogHTMLProps;
+
+export type PopoverProps = PopoverOptions & PopoverHTMLProps;
+
+export const usePopover = createHook<PopoverOptions, PopoverHTMLProps>({
+  name: "Popover",
+  compose: useDialog,
+  keys: POPOVER_KEYS,
+
+  useOptions({ modal = false, ...options }) {
+    return { modal, ...options };
+  },
+
+  useProps(options, { ref: htmlRef, style: htmlStyle, ...htmlProps }) {
+    return {
+      ref: useForkRef(options.unstable_popoverRef, htmlRef),
+      style: { ...options.unstable_popoverStyles, ...htmlStyle },
+      ...htmlProps,
+    };
+  },
+});
+
+export const Popover = createComponent({
+  as: "div",
+  useHook: usePopover,
+  useCreateElement: (type, props, children) => {
+    useWarning(
+      !props["aria-label"] && !props["aria-labelledby"],
+      "You should provide either `aria-label` or `aria-labelledby` props.",
+      "See https://reakit.io/docs/popover"
+    );
+    return useCreateElement(type, props, children);
+  },
+});

node_modules/reakit/src/Popover/PopoverArrow.tsx

@@ -0,0 +1,84 @@
+import * as React from "react";
+import { createComponent } from "reakit-system/createComponent";
+import { createHook } from "reakit-system/createHook";
+import { useForkRef } from "reakit-utils/useForkRef";
+import { RoleOptions, RoleHTMLProps, useRole } from "../Role/Role";
+import { PopoverStateReturn } from "./PopoverState";
+import { POPOVER_ARROW_KEYS } from "./__keys";
+
+export type PopoverArrowOptions = RoleOptions &
+  Pick<
+    Partial<PopoverStateReturn>,
+    "unstable_arrowRef" | "unstable_arrowStyles"
+  > &
+  Pick<PopoverStateReturn, "placement"> & {
+    /** Arrow's size */
+    size?: number | string;
+  };
+
+export type PopoverArrowHTMLProps = RoleHTMLProps;
+
+export type PopoverArrowProps = PopoverArrowOptions & PopoverArrowHTMLProps;
+
+export const usePopoverArrow = createHook<
+  PopoverArrowOptions,
+  PopoverArrowHTMLProps
+>({
+  name: "PopoverArrow",
+  compose: useRole,
+  keys: POPOVER_ARROW_KEYS,
+
+  useOptions({ size = 30, ...options }) {
+    return { size, ...options };
+  },
+
+  useProps(options, { ref: htmlRef, style: htmlStyle, ...htmlProps }) {
+    const [placement] = options.placement.split("-");
+    const transformMap: Record<string, string> = {
+      top: "rotateZ(180deg)",
+      right: "rotateZ(-90deg)",
+      bottom: "rotateZ(360deg)",
+      left: "rotateZ(90deg)",
+    };
+    const { unstable_arrowStyles: arrowStyles } = options;
+    const transform = transformMap[placement];
+
+    const children = React.useMemo(
+      () => (
+        <svg viewBox="0 0 30 30" style={{ transform }}>
+          <path
+            className="stroke"
+            d="M23.7,27.1L17,19.9C16.5,19.3,15.8,19,15,19s-1.6,0.3-2.1,0.9l-6.6,7.2C5.3,28.1,3.4,29,2,29h26
+        C26.7,29,24.6,28.1,23.7,27.1z"
+          />
+          <path
+            className="fill"
+            d="M23,27.8c1.1,1.2,3.4,2.2,5,2.2h2H0h2c1.7,0,3.9-1,5-2.2l6.6-7.2c0.7-0.8,2-0.8,2.7,0L23,27.8L23,27.8z"
+          />
+        </svg>
+      ),
+      [transform]
+    );
+
+    return {
+      ref: useForkRef(options.unstable_arrowRef, htmlRef),
+      style: {
+        ...arrowStyles,
+        fontSize: options.size,
+        width: "1em",
+        height: "1em",
+        pointerEvents: "none",
+        [placement]: "100%",
+        ...htmlStyle,
+      },
+      children,
+      ...htmlProps,
+    };
+  },
+});
+
+export const PopoverArrow = createComponent({
+  as: "div",
+  memo: true,
+  useHook: usePopoverArrow,
+});

node_modules/reakit/src/Popover/PopoverBackdrop.ts

@@ -0,0 +1,34 @@
+import { createComponent } from "reakit-system/createComponent";
+import { createHook } from "reakit-system/createHook";
+import {
+  DialogBackdropOptions,
+  DialogBackdropHTMLProps,
+  useDialogBackdrop,
+} from "../Dialog/DialogBackdrop";
+import { POPOVER_BACKDROP_KEYS } from "./__keys";
+
+export type PopoverBackdropOptions = DialogBackdropOptions;
+
+export type PopoverBackdropHTMLProps = DialogBackdropHTMLProps;
+
+export type PopoverBackdropProps = PopoverBackdropOptions &
+  PopoverBackdropHTMLProps;
+
+export const usePopoverBackdrop = createHook<
+  PopoverBackdropOptions,
+  PopoverBackdropHTMLProps
+>({
+  name: "PopoverBackdrop",
+  compose: useDialogBackdrop,
+  keys: POPOVER_BACKDROP_KEYS,
+
+  useOptions({ modal = false, ...options }) {
+    return { modal, ...options };
+  },
+});
+
+export const PopoverBackdrop = createComponent({
+  as: "div",
+  memo: true,
+  useHook: usePopoverBackdrop,
+});

node_modules/reakit/src/Popover/PopoverDisclosure.ts

@@ -0,0 +1,40 @@
+import { createComponent } from "reakit-system/createComponent";
+import { createHook } from "reakit-system/createHook";
+import { useForkRef } from "reakit-utils/useForkRef";
+import {
+  DialogDisclosureOptions,
+  DialogDisclosureHTMLProps,
+  useDialogDisclosure,
+} from "../Dialog/DialogDisclosure";
+import { PopoverStateReturn } from "./PopoverState";
+import { POPOVER_DISCLOSURE_KEYS } from "./__keys";
+
+export type PopoverDisclosureOptions = DialogDisclosureOptions &
+  Pick<Partial<PopoverStateReturn>, "unstable_referenceRef">;
+
+export type PopoverDisclosureHTMLProps = DialogDisclosureHTMLProps;
+
+export type PopoverDisclosureProps = PopoverDisclosureOptions &
+  PopoverDisclosureHTMLProps;
+
+export const usePopoverDisclosure = createHook<
+  PopoverDisclosureOptions,
+  PopoverDisclosureHTMLProps
+>({
+  name: "PopoverDisclosure",
+  compose: useDialogDisclosure,
+  keys: POPOVER_DISCLOSURE_KEYS,
+
+  useProps(options, { ref: htmlRef, ...htmlProps }) {
+    return {
+      ref: useForkRef(options.unstable_referenceRef, htmlRef),
+      ...htmlProps,
+    };
+  },
+});
+
+export const PopoverDisclosure = createComponent({
+  as: "button",
+  memo: true,
+  useHook: usePopoverDisclosure,
+});

node_modules/reakit/src/Popover/PopoverState.ts

@@ -0,0 +1,264 @@
+import * as React from "react";
+import { createPopper, Instance, State } from "@popperjs/core";
+import {
+  SealedInitialState,
+  useSealedState,
+} from "reakit-utils/useSealedState";
+import { useIsomorphicEffect } from "reakit-utils/useIsomorphicEffect";
+import { shallowEqual } from "reakit-utils/shallowEqual";
+import { isUA } from "reakit-utils/dom";
+import {
+  DialogState,
+  DialogActions,
+  DialogInitialState,
+  useDialogState,
+  DialogStateReturn,
+} from "../Dialog/DialogState";
+
+const isSafari = isUA("Mac") && !isUA("Chrome") && isUA("Safari");
+
+type Placement =
+  | "auto-start"
+  | "auto"
+  | "auto-end"
+  | "top-start"
+  | "top"
+  | "top-end"
+  | "right-start"
+  | "right"
+  | "right-end"
+  | "bottom-end"
+  | "bottom"
+  | "bottom-start"
+  | "left-end"
+  | "left"
+  | "left-start";
+
+export type PopoverState = DialogState & {
+  /**
+   * The reference element.
+   */
+  unstable_referenceRef: React.RefObject<HTMLElement | null>;
+  /**
+   * The popover element.
+   * @private
+   */
+  unstable_popoverRef: React.RefObject<HTMLElement | null>;
+  /**
+   * The arrow element.
+   * @private
+   */
+  unstable_arrowRef: React.RefObject<HTMLElement | null>;
+  /**
+   * Popover styles.
+   * @private
+   */
+  unstable_popoverStyles: React.CSSProperties;
+  /**
+   * Arrow styles.
+   * @private
+   */
+  unstable_arrowStyles: React.CSSProperties;
+  /**
+   * `placement` passed to the hook.
+   * @private
+   */
+  unstable_originalPlacement: Placement;
+  /**
+   * @private
+   */
+  unstable_update: () => boolean;
+  /**
+   * Actual `placement`.
+   */
+  placement: Placement;
+};
+
+export type PopoverActions = DialogActions & {
+  /**
+   * Change the `placement` state.
+   */
+  place: React.Dispatch<React.SetStateAction<Placement>>;
+};
+
+export type PopoverInitialState = DialogInitialState &
+  Partial<Pick<PopoverState, "placement">> & {
+    /**
+     * Whether or not the popover should have `position` set to `fixed`.
+     */
+    unstable_fixed?: boolean;
+    /**
+     * Flip the popover's placement when it starts to overlap its reference
+     * element.
+     */
+    unstable_flip?: boolean;
+    /**
+     * Offset between the reference and the popover: [main axis, alt axis]. Should not be combined with `gutter`.
+     */
+    unstable_offset?: [number | string, number | string];
+    /**
+     * Offset between the reference and the popover on the main axis. Should not be combined with `unstable_offset`.
+     */
+    gutter?: number;
+    /**
+     * Prevents popover from being positioned outside the boundary.
+     */
+    unstable_preventOverflow?: boolean;
+  };
+
+export type PopoverStateReturn = DialogStateReturn &
+  PopoverState &
+  PopoverActions;
+
+function applyStyles(styles?: Partial<CSSStyleDeclaration>) {
+  return (prevStyles: React.CSSProperties) => {
+    if (styles && !shallowEqual(prevStyles, styles)) {
+      return styles as React.CSSProperties;
+    }
+    return prevStyles;
+  };
+}
+
+export function usePopoverState(
+  initialState: SealedInitialState<PopoverInitialState> = {}
+): PopoverStateReturn {
+  const {
+    gutter = 12,
+    placement: sealedPlacement = "bottom",
+    unstable_flip: flip = true,
+    unstable_offset: sealedOffset,
+    unstable_preventOverflow: preventOverflow = true,
+    unstable_fixed: fixed = false,
+    modal = false,
+    ...sealed
+  } = useSealedState(initialState);
+
+  const popper = React.useRef<Instance | null>(null);
+  const referenceRef = React.useRef<HTMLElement>(null);
+  const popoverRef = React.useRef<HTMLElement>(null);
+  const arrowRef = React.useRef<HTMLElement>(null);
+
+  const [originalPlacement, place] = React.useState(sealedPlacement);
+  const [placement, setPlacement] = React.useState(sealedPlacement);
+  const [offset] = React.useState(sealedOffset || [0, gutter]);
+  const [popoverStyles, setPopoverStyles] = React.useState<React.CSSProperties>(
+    {
+      position: "fixed",
+      left: "100%",
+      top: "100%",
+    }
+  );
+  const [arrowStyles, setArrowStyles] = React.useState<React.CSSProperties>({});
+
+  const dialog = useDialogState({ modal, ...sealed });
+
+  const update = React.useCallback(() => {
+    if (popper.current) {
+      popper.current.forceUpdate();
+      return true;
+    }
+    return false;
+  }, []);
+
+  const updateState = React.useCallback((state: Partial<State>) => {
+    if (state.placement) {
+      setPlacement(state.placement);
+    }
+    if (state.styles) {
+      setPopoverStyles(applyStyles(state.styles.popper));
+      if (arrowRef.current) {
+        setArrowStyles(applyStyles(state.styles.arrow));
+      }
+    }
+  }, []);
+
+  useIsomorphicEffect(() => {
+    if (referenceRef.current && popoverRef.current) {
+      popper.current = createPopper(referenceRef.current, popoverRef.current, {
+        // https://popper.js.org/docs/v2/constructors/#options
+        placement: originalPlacement,
+        strategy: fixed ? "fixed" : "absolute",
+        // Safari needs styles to be applied in the first render, otherwise
+        // hovering over the popover when it gets visible for the first time
+        // will change its dimensions unexpectedly.
+        onFirstUpdate: isSafari ? updateState : undefined,
+        modifiers: [
+          {
+            // https://popper.js.org/docs/v2/modifiers/event-listeners/
+            name: "eventListeners",
+            enabled: dialog.visible,
+          },
+          {
+            // https://popper.js.org/docs/v2/modifiers/apply-styles/
+            name: "applyStyles",
+            enabled: false,
+          },
+          {
+            // https://popper.js.org/docs/v2/modifiers/flip/
+            name: "flip",
+            enabled: flip,
+            options: { padding: 8 },
+          },
+          {
+            // https://popper.js.org/docs/v2/modifiers/offset/
+            name: "offset",
+            options: { offset },
+          },
+          {
+            // https://popper.js.org/docs/v2/modifiers/prevent-overflow/
+            name: "preventOverflow",
+            enabled: preventOverflow,
+            options: {
+              tetherOffset: () => arrowRef.current?.clientWidth || 0,
+            },
+          },
+          {
+            // https://popper.js.org/docs/v2/modifiers/arrow/
+            name: "arrow",
+            enabled: !!arrowRef.current,
+            options: { element: arrowRef.current },
+          },
+          {
+            // https://popper.js.org/docs/v2/modifiers/#custom-modifiers
+            name: "updateState",
+            phase: "write",
+            requires: ["computeStyles"],
+            enabled: dialog.visible && process.env.NODE_ENV !== "test",
+            fn: ({ state }) => updateState(state),
+          },
+        ],
+      });
+    }
+    return () => {
+      if (popper.current) {
+        popper.current.destroy();
+        popper.current = null;
+      }
+    };
+  }, [originalPlacement, fixed, dialog.visible, flip, offset, preventOverflow]);
+
+  // Ensure that the popover will be correctly positioned with an additional
+  // update.
+  React.useEffect(() => {
+    if (!dialog.visible) return undefined;
+    const id = window.requestAnimationFrame(() => {
+      popper.current?.forceUpdate();
+    });
+    return () => {
+      window.cancelAnimationFrame(id);
+    };
+  }, [dialog.visible]);
+
+  return {
+    ...dialog,
+    unstable_referenceRef: referenceRef,
+    unstable_popoverRef: popoverRef,
+    unstable_arrowRef: arrowRef,
+    unstable_popoverStyles: popoverStyles,
+    unstable_arrowStyles: arrowStyles,
+    unstable_update: update,
+    unstable_originalPlacement: originalPlacement,
+    placement,
+    place,
+  };
+}

node_modules/reakit/src/Popover/README.md

@@ -0,0 +1,511 @@
+---
+path: /docs/popover/
+redirect_from:
+  - /components/popover/
+  - /components/popover/popoverarrow/
+  - /components/popover/popovercontainer/
+  - /components/popover/popoverhide/
+  - /components/popover/popovershow/
+  - /components/popover/popovertoggle/
+---
+
+# Popover
+
+`Popover` is a [non-modal dialog](/docs/dialog/#non-modal-dialogs) that floats around its disclosure. It's commonly used for displaying additional rich content on top of something.
+
+<carbon-ad></carbon-ad>
+
+## Installation
+
+```sh
+npm install reakit
+```
+
+Learn more in [Get started](/docs/get-started/).
+
+## Usage
+
+```jsx
+import {
+  usePopoverState,
+  Popover,
+  PopoverDisclosure,
+  PopoverArrow,
+} from "reakit/Popover";
+
+function Example() {
+  const popover = usePopoverState();
+  return (
+    <>
+      <PopoverDisclosure {...popover}>Open Popover</PopoverDisclosure>
+      <Popover {...popover} aria-label="Welcome">
+        <PopoverArrow {...popover} />
+        Welcome to Reakit!
+      </Popover>
+    </>
+  );
+}
+```
+
+### Placement
+
+You can control how `Popover` is positioned by setting the `placement` option on `usePopoverState`.
+
+```jsx
+import {
+  usePopoverState,
+  Popover,
+  PopoverDisclosure,
+  PopoverArrow,
+} from "reakit/Popover";
+
+function Example() {
+  const popover = usePopoverState({ placement: "right-start" });
+  return (
+    <>
+      <PopoverDisclosure {...popover}>Open Popover</PopoverDisclosure>
+      <Popover {...popover} aria-label="Welcome">
+        <PopoverArrow {...popover} />
+        Welcome to Reakit!
+      </Popover>
+    </>
+  );
+}
+```
+
+### Gutter
+
+You can control the margin between `Popover` and `PopoverDisclosure` by setting the `gutter` option on `usePopoverState`.
+
+```jsx
+import { usePopoverState, Popover, PopoverDisclosure } from "reakit/Popover";
+
+function Example() {
+  const popover = usePopoverState({ gutter: 0, placement: "bottom-start" });
+  return (
+    <>
+      <PopoverDisclosure {...popover}>Open Popover</PopoverDisclosure>
+      <Popover {...popover} aria-label="Welcome">
+        Welcome to Reakit!
+      </Popover>
+    </>
+  );
+}
+```
+
+### Initial focus
+
+When opening `Popover`, focus is usually set on the first tabbable element within the popover, including itself. So, if you want to set the initial focus on the popover element, you can simply pass `tabIndex={0}` to it. It'll be also included in the tab order.
+
+```jsx
+import { Button } from "reakit/Button";
+import { usePopoverState, Popover, PopoverDisclosure } from "reakit/Popover";
+
+function Example() {
+  const popover = usePopoverState();
+  return (
+    <>
+      <PopoverDisclosure {...popover}>Open Popover</PopoverDisclosure>
+      <Popover {...popover} tabIndex={0} aria-label="Welcome">
+        <Button onClick={popover.hide}>Close</Button>
+      </Popover>
+    </>
+  );
+}
+```
+
+Alternatively, you can define another element to get the initial focus with React hooks:
+
+```jsx
+import React from "react";
+import { Button } from "reakit/Button";
+import { usePopoverState, Popover, PopoverDisclosure } from "reakit/Popover";
+
+function Example() {
+  const popover = usePopoverState();
+  const ref = React.useRef();
+
+  React.useEffect(() => {
+    if (popover.visible) {
+      ref.current.focus();
+    }
+  }, [popover.visible]);
+
+  return (
+    <>
+      <PopoverDisclosure {...popover}>Open Popover</PopoverDisclosure>
+      <Popover {...popover} aria-label="Welcome">
+        <Button>By default, initial focus would go here</Button>
+        <br />
+        <br />
+        <Button ref={ref}>But now it goes here</Button>
+      </Popover>
+    </>
+  );
+}
+```
+
+### Animating
+
+`Popover` uses [DisclosureContent](/docs/disclosure/) underneath, so you can use the same approaches as described in the [Animating](/docs/disclosure/#animating) section there.
+
+The only difference is that Reakit automatically adds inline styles to the `Popover` container so that it's correctly positioned according to `PopoverDisclosure`. In this example, we're animating an inner wrapper element, so we don't need to overwrite `Popover` positioning styles.
+
+```jsx
+import { css } from "emotion";
+import { Button } from "reakit/Button";
+import {
+  usePopoverState,
+  Popover,
+  PopoverArrow,
+  PopoverDisclosure,
+} from "reakit/Popover";
+
+const styles = css`
+  background-color: white;
+  padding: 16px;
+  border: 1px solid rgba(33, 33, 33, 0.25);
+  border-radius: 4px;
+  transition: opacity 250ms ease-in-out, transform 250ms ease-in-out;
+  opacity: 0;
+  transform-origin: top center;
+  transform: translate3d(0, -20px, 0);
+  [data-enter] & {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+`;
+
+function Example() {
+  const popover = usePopoverState({ animated: 250 });
+  return (
+    <>
+      <PopoverDisclosure {...popover}>Open popover</PopoverDisclosure>
+      <Popover
+        {...popover}
+        aria-label="Welcome"
+        style={{ border: 0, background: "none", padding: 0 }}
+      >
+        <div className={styles}>
+          <PopoverArrow {...popover} />
+          Welcome to Reakit
+          <Button onClick={popover.hide}>Close</Button>
+        </div>
+      </Popover>
+    </>
+  );
+}
+```
+
+### Abstracting
+
+You can build your own `Popover` component with a different API on top of Reakit.
+
+```jsx
+import React from "react";
+import {
+  usePopoverState,
+  Popover as BasePopover,
+  PopoverDisclosure,
+  PopoverArrow,
+} from "reakit/Popover";
+
+function Popover({ disclosure, ...props }) {
+  const popover = usePopoverState();
+  return (
+    <>
+      <PopoverDisclosure
+        {...popover}
+        ref={disclosure.ref}
+        {...disclosure.props}
+      >
+        {(disclosureProps) => React.cloneElement(disclosure, disclosureProps)}
+      </PopoverDisclosure>
+      <BasePopover {...popover} {...props}>
+        <PopoverArrow {...popover} />
+        {props.children}
+      </BasePopover>
+    </>
+  );
+}
+
+function Example() {
+  return (
+    <Popover
+      aria-label="Custom popover"
+      disclosure={<button>Open custom popover</button>}
+    >
+      Custom popover
+    </Popover>
+  );
+}
+```
+
+## Accessibility
+
+- `Popover` extends the accessibility features of [Dialog](/docs/dialog/#accessibility).
+- `PopoverDisclosure` extends the accessibility features of [DialogDisclosure](/docs/dialog/#accessibility).
+
+Learn more in [Accessibility](/docs/accessibility/).
+
+## Composition
+
+- `Popover` uses [Dialog](/docs/dialog/), and is used by [Menu](/docs/menu/).
+- `PopoverArrow` uses [Role](/docs/role/), and is used by [TooltipArrow](/docs/tooltip/).
+- `PopoverBackdrop` uses [DialogBackdrop](/docs/dialog/).
+- `PopoverDisclosure` uses [DialogDisclosure](/docs/dialog/), and is used by [MenuButton](/docs/menu/).
+
+Learn more in [Composition](/docs/composition/#props-hooks).
+
+## Props
+
+<!-- Automatically generated -->
+
+### `usePopoverState`
+
+- **`baseId`**
+  <code>string</code>
+
+  ID that will serve as a base for all the items IDs.
+
+- **`visible`**
+  <code>boolean</code>
+
+  Whether it's visible or not.
+
+- **`animated`**
+  <code>number | boolean</code>
+
+  If `true`, `animating` will be set to `true` when `visible` is updated.
+It'll wait for `stopAnimation` to be called or a CSS transition ends.
+If `animated` is set to a `number`, `stopAnimation` will be called only
+after the same number of milliseconds have passed.
+
+- **`modal`**
+  <code>boolean</code>
+
+  Toggles Dialog's `modal` state.
+  - Non-modal: `preventBodyScroll` doesn't work and focus is free.
+  - Modal: `preventBodyScroll` is automatically enabled, focus is
+trapped within the dialog and the dialog is rendered within a `Portal`
+by default.
+
+- **`placement`**
+  <code title="&#34;auto-start&#34; | &#34;auto&#34; | &#34;auto-end&#34; | &#34;top-start&#34; | &#34;top&#34; | &#34;top-end&#34; | &#34;right-start&#34; | &#34;right&#34; | &#34;right-end&#34; | &#34;bottom-end&#34; | &#34;bottom&#34; | &#34;bottom-start&#34; | &#34;left-end&#34; | &#34;left&#34; | &#34;left-start&#34;">&#34;auto-start&#34; | &#34;auto&#34; | &#34;auto-end&#34; | &#34;top-start...</code>
+
+  Actual `placement`.
+
+- **`unstable_fixed`** <span title="Experimental">⚠️</span>
+  <code>boolean | undefined</code>
+
+  Whether or not the popover should have `position` set to `fixed`.
+
+- **`unstable_flip`** <span title="Experimental">⚠️</span>
+  <code>boolean | undefined</code>
+
+  Flip the popover's placement when it starts to overlap its reference
+element.
+
+- **`unstable_offset`** <span title="Experimental">⚠️</span>
+  <code>[string | number, string | number] | undefined</code>
+
+  Offset between the reference and the popover: [main axis, alt axis]. Should not be combined with `gutter`.
+
+- **`gutter`**
+  <code>number | undefined</code>
+
+  Offset between the reference and the popover on the main axis. Should not be combined with `unstable_offset`.
+
+- **`unstable_preventOverflow`** <span title="Experimental">⚠️</span>
+  <code>boolean | undefined</code>
+
+  Prevents popover from being positioned outside the boundary.
+
+### `Popover`
+
+- **`hideOnEsc`**
+  <code>boolean | undefined</code>
+
+  When enabled, user can hide the dialog by pressing `Escape`.
+
+- **`hideOnClickOutside`**
+  <code>boolean | undefined</code>
+
+  When enabled, user can hide the dialog by clicking outside it.
+
+- **`preventBodyScroll`**
+  <code>boolean | undefined</code>
+
+  When enabled, user can't scroll on body when the dialog is visible.
+This option doesn't work if the dialog isn't modal.
+
+- **`unstable_initialFocusRef`** <span title="Experimental">⚠️</span>
+  <code>RefObject&#60;HTMLElement&#62; | undefined</code>
+
+  The element that will be focused when the dialog shows.
+When not set, the first tabbable element within the dialog will be used.
+
+- **`unstable_finalFocusRef`** <span title="Experimental">⚠️</span>
+  <code>RefObject&#60;HTMLElement&#62; | undefined</code>
+
+  The element that will be focused when the dialog hides.
+When not set, the disclosure component will be used.
+
+- **`unstable_orphan`** <span title="Experimental">⚠️</span>
+  <code>boolean | undefined</code>
+
+  Whether or not the dialog should be a child of its parent.
+Opening a nested orphan dialog will close its parent dialog if
+`hideOnClickOutside` is set to `true` on the parent.
+It will be set to `false` if `modal` is `false`.
+
+<details><summary>7 state props</summary>
+
+> These props are returned by the state hook. You can spread them into this component (`{...state}`) or pass them separately. You can also provide these props from your own state logic.
+
+- **`baseId`**
+  <code>string</code>
+
+  ID that will serve as a base for all the items IDs.
+
+- **`visible`**
+  <code>boolean</code>
+
+  Whether it's visible or not.
+
+- **`animated`**
+  <code>number | boolean</code>
+
+  If `true`, `animating` will be set to `true` when `visible` is updated.
+It'll wait for `stopAnimation` to be called or a CSS transition ends.
+If `animated` is set to a `number`, `stopAnimation` will be called only
+after the same number of milliseconds have passed.
+
+- **`animating`**
+  <code>boolean</code>
+
+  Whether it's animating or not.
+
+- **`stopAnimation`**
+  <code>() =&#62; void</code>
+
+  Stops animation. It's called automatically if there's a CSS transition.
+
+- **`modal`**
+  <code>boolean</code>
+
+  Toggles Dialog's `modal` state.
+  - Non-modal: `preventBodyScroll` doesn't work and focus is free.
+  - Modal: `preventBodyScroll` is automatically enabled, focus is
+trapped within the dialog and the dialog is rendered within a `Portal`
+by default.
+
+- **`hide`**
+  <code>() =&#62; void</code>
+
+  Changes the `visible` state to `false`
+
+</details>
+
+### `PopoverArrow`
+
+- **`size`**
+  <code>string | number | undefined</code>
+
+  Arrow's size
+
+<details><summary>1 state props</summary>
+
+> These props are returned by the state hook. You can spread them into this component (`{...state}`) or pass them separately. You can also provide these props from your own state logic.
+
+- **`placement`**
+  <code title="&#34;auto-start&#34; | &#34;auto&#34; | &#34;auto-end&#34; | &#34;top-start&#34; | &#34;top&#34; | &#34;top-end&#34; | &#34;right-start&#34; | &#34;right&#34; | &#34;right-end&#34; | &#34;bottom-end&#34; | &#34;bottom&#34; | &#34;bottom-start&#34; | &#34;left-end&#34; | &#34;left&#34; | &#34;left-start&#34;">&#34;auto-start&#34; | &#34;auto&#34; | &#34;auto-end&#34; | &#34;top-start...</code>
+
+  Actual `placement`.
+
+</details>
+
+### `PopoverBackdrop`
+
+<details><summary>6 state props</summary>
+
+> These props are returned by the state hook. You can spread them into this component (`{...state}`) or pass them separately. You can also provide these props from your own state logic.
+
+- **`baseId`**
+  <code>string</code>
+
+  ID that will serve as a base for all the items IDs.
+
+- **`visible`**
+  <code>boolean</code>
+
+  Whether it's visible or not.
+
+- **`animated`**
+  <code>number | boolean</code>
+
+  If `true`, `animating` will be set to `true` when `visible` is updated.
+It'll wait for `stopAnimation` to be called or a CSS transition ends.
+If `animated` is set to a `number`, `stopAnimation` will be called only
+after the same number of milliseconds have passed.
+
+- **`animating`**
+  <code>boolean</code>
+
+  Whether it's animating or not.
+
+- **`stopAnimation`**
+  <code>() =&#62; void</code>
+
+  Stops animation. It's called automatically if there's a CSS transition.
+
+- **`modal`**
+  <code>boolean</code>
+
+  Toggles Dialog's `modal` state.
+  - Non-modal: `preventBodyScroll` doesn't work and focus is free.
+  - Modal: `preventBodyScroll` is automatically enabled, focus is
+trapped within the dialog and the dialog is rendered within a `Portal`
+by default.
+
+</details>
+
+### `PopoverDisclosure`
+
+- **`disabled`**
+  <code>boolean | undefined</code>
+
+  Same as the HTML attribute.
+
+- **`focusable`**
+  <code>boolean | undefined</code>
+
+  When an element is `disabled`, it may still be `focusable`. It works
+similarly to `readOnly` on form elements. In this case, only
+`aria-disabled` will be set.
+
+<details><summary>4 state props</summary>
+
+> These props are returned by the state hook. You can spread them into this component (`{...state}`) or pass them separately. You can also provide these props from your own state logic.
+
+- **`visible`**
+  <code>boolean</code>
+
+  Whether it's visible or not.
+
+- **`baseId`**
+  <code>string</code>
+
+  ID that will serve as a base for all the items IDs.
+
+- **`toggle`**
+  <code>() =&#62; void</code>
+
+  Toggles the `visible` state
+
+- **`unstable_referenceRef`** <span title="Experimental">⚠️</span>
+  <code>RefObject&#60;HTMLElement | null&#62;</code>
+
+  The reference element.
+
+</details>

node_modules/reakit/src/Popover/__keys.ts

@@ -0,0 +1,31 @@
+// Automatically generated
+const POPOVER_STATE_KEYS = [
+  "baseId",
+  "unstable_idCountRef",
+  "visible",
+  "animated",
+  "animating",
+  "setBaseId",
+  "show",
+  "hide",
+  "toggle",
+  "setVisible",
+  "setAnimated",
+  "stopAnimation",
+  "modal",
+  "unstable_disclosureRef",
+  "setModal",
+  "unstable_referenceRef",
+  "unstable_popoverRef",
+  "unstable_arrowRef",
+  "unstable_popoverStyles",
+  "unstable_arrowStyles",
+  "unstable_originalPlacement",
+  "unstable_update",
+  "placement",
+  "place",
+] as const;
+export const POPOVER_KEYS = POPOVER_STATE_KEYS;
+export const POPOVER_ARROW_KEYS = [...POPOVER_KEYS, "size"] as const;
+export const POPOVER_BACKDROP_KEYS = POPOVER_KEYS;
+export const POPOVER_DISCLOSURE_KEYS = POPOVER_BACKDROP_KEYS;

node_modules/reakit/src/Popover/__tests__/Popover-test.tsx

@@ -0,0 +1,81 @@
+import * as React from "react";
+import { render } from "reakit-test-utils";
+import { Popover } from "../Popover";
+
+const props: Parameters<typeof Popover>[0] = {
+  baseId: "base",
+  "aria-label": "popover",
+};
+
+test("render", () => {
+  const { baseElement } = render(<Popover {...props}>popover</Popover>);
+  expect(baseElement).toMatchInlineSnapshot(`
+    <body>
+      <div>
+        <div
+          aria-label="popover"
+          data-dialog="true"
+          hidden=""
+          id="base"
+          role="dialog"
+          style="display: none;"
+          tabindex="-1"
+        >
+          popover
+        </div>
+      </div>
+    </body>
+  `);
+});
+
+test("render visible", () => {
+  const { baseElement } = render(
+    <Popover {...props} visible>
+      popover
+    </Popover>
+  );
+  expect(baseElement).toMatchInlineSnapshot(`
+    <body>
+      <div>
+        <div
+          aria-label="popover"
+          data-dialog="true"
+          id="base"
+          role="dialog"
+          tabindex="-1"
+        >
+          popover
+        </div>
+      </div>
+    </body>
+  `);
+});
+
+test("render modal", () => {
+  const { baseElement } = render(
+    <Popover {...props} modal>
+      test
+    </Popover>
+  );
+  expect(baseElement).toMatchInlineSnapshot(`
+    <body>
+      <div />
+      <div
+        class="__reakit-portal"
+      >
+        <div
+          aria-label="popover"
+          aria-modal="true"
+          data-dialog="true"
+          hidden=""
+          id="base"
+          role="dialog"
+          style="display: none;"
+          tabindex="-1"
+        >
+          test
+        </div>
+      </div>
+    </body>
+  `);
+});

node_modules/reakit/src/Popover/__tests__/PopoverArrow-test.tsx

@@ -0,0 +1,57 @@
+import * as React from "react";
+import { render } from "reakit-test-utils";
+import { PopoverArrow } from "../PopoverArrow";
+
+test("render", () => {
+  const { baseElement } = render(<PopoverArrow placement="top" />);
+  expect(baseElement).toMatchInlineSnapshot(`
+    <body>
+      <div>
+        <div
+          style="font-size: 30px; width: 1em; height: 1em; pointer-events: none; top: 100%;"
+        >
+          <svg
+            style="transform: rotateZ(180deg);"
+            viewBox="0 0 30 30"
+          >
+            <path
+              class="stroke"
+              d="M23.7,27.1L17,19.9C16.5,19.3,15.8,19,15,19s-1.6,0.3-2.1,0.9l-6.6,7.2C5.3,28.1,3.4,29,2,29h26 C26.7,29,24.6,28.1,23.7,27.1z"
+            />
+            <path
+              class="fill"
+              d="M23,27.8c1.1,1.2,3.4,2.2,5,2.2h2H0h2c1.7,0,3.9-1,5-2.2l6.6-7.2c0.7-0.8,2-0.8,2.7,0L23,27.8L23,27.8z"
+            />
+          </svg>
+        </div>
+      </div>
+    </body>
+  `);
+});
+
+test("render bottom", () => {
+  const { baseElement } = render(<PopoverArrow placement="bottom" />);
+  expect(baseElement).toMatchInlineSnapshot(`
+    <body>
+      <div>
+        <div
+          style="font-size: 30px; width: 1em; height: 1em; pointer-events: none; bottom: 100%;"
+        >
+          <svg
+            style="transform: rotateZ(360deg);"
+            viewBox="0 0 30 30"
+          >
+            <path
+              class="stroke"
+              d="M23.7,27.1L17,19.9C16.5,19.3,15.8,19,15,19s-1.6,0.3-2.1,0.9l-6.6,7.2C5.3,28.1,3.4,29,2,29h26 C26.7,29,24.6,28.1,23.7,27.1z"
+            />
+            <path
+              class="fill"
+              d="M23,27.8c1.1,1.2,3.4,2.2,5,2.2h2H0h2c1.7,0,3.9-1,5-2.2l6.6-7.2c0.7-0.8,2-0.8,2.7,0L23,27.8L23,27.8z"
+            />
+          </svg>
+        </div>
+      </div>
+    </body>
+  `);
+});

node_modules/reakit/src/Popover/__tests__/PopoverBackdrop-test.tsx

@@ -0,0 +1,31 @@
+import * as React from "react";
+import { render } from "reakit-test-utils";
+import { PopoverBackdrop } from "../PopoverBackdrop";
+
+test("render", () => {
+  const { baseElement } = render(<PopoverBackdrop baseId="popover" />);
+  expect(baseElement).toMatchInlineSnapshot(`
+    <body>
+      <div>
+        <div
+          data-dialog-ref="popover"
+          hidden=""
+          style="display: none;"
+        />
+      </div>
+    </body>
+  `);
+});
+
+test("render visible", () => {
+  const { baseElement } = render(<PopoverBackdrop baseId="popover" visible />);
+  expect(baseElement).toMatchInlineSnapshot(`
+    <body>
+      <div>
+        <div
+          data-dialog-ref="popover"
+        />
+      </div>
+    </body>
+  `);
+});

node_modules/reakit/src/Popover/__tests__/PopoverDisclosure-test.tsx

@@ -0,0 +1,50 @@
+import * as React from "react";
+import { render } from "reakit-test-utils";
+import { PopoverDisclosure } from "../PopoverDisclosure";
+
+const props: Parameters<typeof PopoverDisclosure>[0] = {
+  baseId: "base",
+  toggle: jest.fn,
+};
+
+test("render", () => {
+  const { baseElement } = render(
+    <PopoverDisclosure {...props}>disclosure</PopoverDisclosure>
+  );
+  expect(baseElement).toMatchInlineSnapshot(`
+    <body>
+      <div>
+        <button
+          aria-controls="base"
+          aria-expanded="false"
+          aria-haspopup="dialog"
+          type="button"
+        >
+          disclosure
+        </button>
+      </div>
+    </body>
+  `);
+});
+
+test("render visible", () => {
+  const { baseElement } = render(
+    <PopoverDisclosure {...props} visible>
+      disclosure
+    </PopoverDisclosure>
+  );
+  expect(baseElement).toMatchInlineSnapshot(`
+<body>
+  <div>
+    <button
+      aria-controls="base"
+      aria-expanded="true"
+      aria-haspopup="dialog"
+      type="button"
+    >
+      disclosure
+    </button>
+  </div>
+</body>
+`);
+});

node_modules/reakit/src/Popover/__tests__/index-test.tsx

@@ -0,0 +1,40 @@
+import * as React from "react";
+import { render, wait, click } from "reakit-test-utils";
+import {
+  Popover,
+  PopoverArrow,
+  PopoverDisclosure,
+  usePopoverState,
+  PopoverInitialState,
+} from "..";
+
+function Test(props: PopoverInitialState) {
+  const popover = usePopoverState(props);
+  return (
+    <>
+      <PopoverDisclosure {...popover}>disclosure</PopoverDisclosure>
+      <Popover {...popover} aria-label="popover" tabIndex={0}>
+        <PopoverArrow {...popover} />
+        popover
+      </Popover>
+    </>
+  );
+}
+
+test("show", async () => {
+  const { getByText } = render(<Test />);
+  const disclosure = getByText("disclosure");
+  const popover = getByText("popover");
+  expect(popover).not.toBeVisible();
+  click(disclosure);
+  await wait(expect(popover).toBeVisible);
+});
+
+test("hide", async () => {
+  const { getByText } = render(<Test visible />);
+  const disclosure = getByText("disclosure");
+  const popover = getByText("popover");
+  expect(popover).toBeVisible();
+  click(disclosure);
+  await wait(expect(popover).not.toBeVisible);
+});

node_modules/reakit/src/Popover/index.ts

@@ -0,0 +1,5 @@
+export * from "./Popover";
+export * from "./PopoverArrow";
+export * from "./PopoverBackdrop";
+export * from "./PopoverDisclosure";
+export * from "./PopoverState";