@ariakit/react-core 0.0.1 → 0.1.1

package/esm/__chunks/WHN4PCW7.js

@@ -0,0 +1,337 @@
+import {
+  useCommand
+} from "./SAVDGYCC.js";
+import {
+  useCollectionItem
+} from "./OJNRBQKS.js";
+import {
+  focusSilently,
+  getEnabledItem,
+  isItem
+} from "./STKLF26R.js";
+import {
+  CompositeContext,
+  CompositeItemContext,
+  CompositeRowContext
+} from "./Z3X3QN6P.js";
+import {
+  createElement,
+  createHook,
+  createMemoComponent
+} from "./JE5NWDDX.js";
+import {
+  useBooleanEvent,
+  useEvent,
+  useForkRef,
+  useId,
+  useSafeLayoutEffect,
+  useWrapElement
+} from "./B7MIN7YT.js";
+
+// src/composite/composite-item.tsx
+import { useCallback, useContext, useMemo, useRef, useState } from "react";
+import {
+  getScrollingElement,
+  isButton,
+  isTextField
+} from "@ariakit/core/utils/dom";
+import { isPortalEvent, isSelfTarget } from "@ariakit/core/utils/events";
+import { invariant } from "@ariakit/core/utils/misc";
+import { jsx } from "react/jsx-runtime";
+function isEditableElement(element) {
+  if (element.isContentEditable)
+    return true;
+  if (isTextField(element))
+    return true;
+  return element.tagName === "INPUT" && !isButton(element);
+}
+function getNextPageOffset(scrollingElement, pageUp = false) {
+  const height = scrollingElement.clientHeight;
+  const { top } = scrollingElement.getBoundingClientRect();
+  const pageSize = Math.max(height * 0.875, height - 40) * 1.5;
+  const pageOffset = pageUp ? height - pageSize + top : pageSize + top;
+  if (scrollingElement.tagName === "HTML") {
+    return pageOffset + scrollingElement.scrollTop;
+  }
+  return pageOffset;
+}
+function getItemOffset(itemElement, pageUp = false) {
+  const { top } = itemElement.getBoundingClientRect();
+  if (pageUp) {
+    return top + itemElement.clientHeight;
+  }
+  return top;
+}
+function findNextPageItemId(element, store, next, pageUp = false) {
+  if (!store)
+    return;
+  if (!next)
+    return;
+  const { renderedItems } = store.getState();
+  const scrollingElement = getScrollingElement(element);
+  if (!scrollingElement)
+    return;
+  const nextPageOffset = getNextPageOffset(scrollingElement, pageUp);
+  let id;
+  let prevDifference;
+  for (let i = 0; i < renderedItems.length; i += 1) {
+    const previousId = id;
+    id = next(i);
+    if (!id)
+      break;
+    if (id === previousId)
+      continue;
+    const itemElement = getEnabledItem(store, id)?.element;
+    if (!itemElement)
+      continue;
+    const itemOffset = getItemOffset(itemElement, pageUp);
+    const difference = itemOffset - nextPageOffset;
+    const absDifference = Math.abs(difference);
+    if (pageUp && difference <= 0 || !pageUp && difference >= 0) {
+      if (prevDifference !== void 0 && prevDifference < absDifference) {
+        id = previousId;
+      }
+      break;
+    }
+    prevDifference = absDifference;
+  }
+  return id;
+}
+function targetIsAnotherItem(event, store) {
+  if (isSelfTarget(event))
+    return false;
+  return isItem(store, event.target);
+}
+function useRole(ref, props) {
+  const roleProp = props.role;
+  const [role, setRole] = useState(roleProp);
+  useSafeLayoutEffect(() => {
+    const element = ref.current;
+    if (!element)
+      return;
+    setRole(element.getAttribute("role") || roleProp);
+  }, [roleProp]);
+  return role;
+}
+function requiresAriaSelected(role) {
+  return role === "option" || role === "treeitem";
+}
+function supportsAriaSelected(role) {
+  if (role === "option")
+    return true;
+  if (role === "tab")
+    return true;
+  if (role === "treeitem")
+    return true;
+  if (role === "gridcell")
+    return true;
+  if (role === "row")
+    return true;
+  if (role === "columnheader")
+    return true;
+  if (role === "rowheader")
+    return true;
+  return false;
+}
+var useCompositeItem = createHook(
+  ({
+    store,
+    rowId: rowIdProp,
+    preventScrollOnKeyDown = false,
+    moveOnKeyPress = true,
+    getItem: getItemProp,
+    ...props
+  }) => {
+    const context = useContext(CompositeContext);
+    store = store || context;
+    invariant(
+      store,
+      process.env.NODE_ENV !== "production" && "CompositeItem must be wrapped in a Composite component"
+    );
+    const id = useId(props.id);
+    const ref = useRef(null);
+    const row = useContext(CompositeRowContext);
+    const rowId = store.useState((state) => {
+      if (rowIdProp)
+        return rowIdProp;
+      if (!row?.baseElement)
+        return;
+      if (row.baseElement !== state.baseElement)
+        return;
+      return row.id;
+    });
+    const trulyDisabled = props.disabled && !props.accessibleWhenDisabled;
+    const getItem = useCallback(
+      (item) => {
+        const nextItem = {
+          ...item,
+          id: id || item.id,
+          rowId,
+          disabled: !!trulyDisabled
+        };
+        if (getItemProp) {
+          return getItemProp(nextItem);
+        }
+        return nextItem;
+      },
+      [id, rowId, trulyDisabled, getItemProp]
+    );
+    const onFocusProp = props.onFocus;
+    const hasFocusedComposite = useRef(false);
+    const onFocus = useEvent((event) => {
+      onFocusProp?.(event);
+      if (event.defaultPrevented)
+        return;
+      if (isPortalEvent(event))
+        return;
+      if (!id)
+        return;
+      if (!store)
+        return;
+      const { activeId, virtualFocus: virtualFocus2, baseElement: baseElement2 } = store.getState();
+      if (targetIsAnotherItem(event, store))
+        return;
+      if (activeId !== id) {
+        store.setActiveId(id);
+      }
+      if (!virtualFocus2)
+        return;
+      if (!isSelfTarget(event))
+        return;
+      if (isEditableElement(event.currentTarget))
+        return;
+      if (!baseElement2)
+        return;
+      hasFocusedComposite.current = true;
+      const fromComposite = event.relatedTarget === baseElement2 || isItem(store, event.relatedTarget);
+      if (fromComposite) {
+        focusSilently(baseElement2);
+      } else {
+        baseElement2.focus();
+      }
+    });
+    const onBlurCaptureProp = props.onBlurCapture;
+    const onBlurCapture = useEvent((event) => {
+      onBlurCaptureProp?.(event);
+      if (event.defaultPrevented)
+        return;
+      const state = store?.getState();
+      if (state?.virtualFocus && hasFocusedComposite.current) {
+        hasFocusedComposite.current = false;
+        event.preventDefault();
+        event.stopPropagation();
+      }
+    });
+    const onKeyDownProp = props.onKeyDown;
+    const preventScrollOnKeyDownProp = useBooleanEvent(preventScrollOnKeyDown);
+    const moveOnKeyPressProp = useBooleanEvent(moveOnKeyPress);
+    const onKeyDown = useEvent((event) => {
+      onKeyDownProp?.(event);
+      if (event.defaultPrevented)
+        return;
+      if (!isSelfTarget(event))
+        return;
+      if (!store)
+        return;
+      const { currentTarget } = event;
+      const state = store.getState();
+      const item = store.item(id);
+      const isGrid = !!item?.rowId;
+      const isVertical = state.orientation !== "horizontal";
+      const isHorizontal = state.orientation !== "vertical";
+      const keyMap = {
+        ArrowUp: (isGrid || isVertical) && store.up,
+        ArrowRight: (isGrid || isHorizontal) && store.next,
+        ArrowDown: (isGrid || isVertical) && store.down,
+        ArrowLeft: (isGrid || isHorizontal) && store.previous,
+        Home: () => {
+          if (!isGrid || event.ctrlKey) {
+            return store?.first();
+          }
+          return store?.previous(-1);
+        },
+        End: () => {
+          if (!isGrid || event.ctrlKey) {
+            return store?.last();
+          }
+          return store?.next(-1);
+        },
+        PageUp: () => {
+          return findNextPageItemId(currentTarget, store, store?.up, true);
+        },
+        PageDown: () => {
+          return findNextPageItemId(currentTarget, store, store?.down);
+        }
+      };
+      const action = keyMap[event.key];
+      if (action) {
+        const nextId = action();
+        if (preventScrollOnKeyDownProp(event) || nextId !== void 0) {
+          if (!moveOnKeyPressProp(event))
+            return;
+          event.preventDefault();
+          store.move(nextId);
+        }
+      }
+    });
+    const baseElement = store.useState(
+      (state) => state.baseElement || void 0
+    );
+    const providerValue = useMemo(
+      () => ({ id, baseElement }),
+      [id, baseElement]
+    );
+    props = useWrapElement(
+      props,
+      (element) => /* @__PURE__ */ jsx(CompositeItemContext.Provider, { value: providerValue, children: element }),
+      [providerValue]
+    );
+    const isActiveItem = store.useState((state) => state.activeId === id);
+    const role = useRole(ref, props);
+    const virtualFocus = store.useState("virtualFocus");
+    let ariaSelected;
+    if (isActiveItem) {
+      if (requiresAriaSelected(role)) {
+        ariaSelected = true;
+      } else if (virtualFocus && supportsAriaSelected(role)) {
+        ariaSelected = true;
+      }
+    }
+    const shouldTabIndex = store.useState(
+      (state) => !state.virtualFocus && isActiveItem
+    );
+    props = {
+      id,
+      "aria-selected": ariaSelected,
+      "data-active-item": isActiveItem ? "" : void 0,
+      ...props,
+      ref: useForkRef(ref, props.ref),
+      tabIndex: shouldTabIndex ? props.tabIndex : -1,
+      onFocus,
+      onBlurCapture,
+      onKeyDown
+    };
+    props = useCommand(props);
+    props = useCollectionItem({
+      store,
+      ...props,
+      getItem,
+      shouldRegisterItem: !!id ? props.shouldRegisterItem : false
+    });
+    return props;
+  }
+);
+var CompositeItem = createMemoComponent(
+  (props) => {
+    const htmlProps = useCompositeItem(props);
+    return createElement("button", htmlProps);
+  }
+);
+if (process.env.NODE_ENV !== "production") {
+  CompositeItem.displayName = "CompositeItem";
+}
+
+export {
+  useCompositeItem,
+  CompositeItem
+};

package/esm/__chunks/WO2RXMKK.js

@@ -0,0 +1,31 @@
+// src/dialog/utils/use-focus-on-child-unmount.ts
+import { useEffect } from "react";
+import { getActiveElement, getDocument } from "@ariakit/core/utils/dom";
+function useFocusOnChildUnmount(store) {
+  const open = store.useState("open");
+  const contentElement = store.useState("contentElement");
+  useEffect(() => {
+    if (!open)
+      return;
+    const dialog = contentElement;
+    if (!dialog)
+      return;
+    const observer = new MutationObserver(([mutation]) => {
+      if (!mutation)
+        return;
+      if (mutation.target !== dialog)
+        return;
+      const document = getDocument(dialog);
+      const activeElement = getActiveElement(dialog);
+      if (activeElement === document.body) {
+        dialog.focus();
+      }
+    });
+    observer.observe(dialog, { childList: true, subtree: true });
+    return () => observer.disconnect();
+  }, [open, contentElement]);
+}
+
+export {
+  useFocusOnChildUnmount
+};

package/esm/__chunks/WOX4XCVH.js

@@ -0,0 +1,158 @@
+import {
+  MenuBarContext,
+  MenuContext
+} from "./HVBRRKV4.js";
+import {
+  useCompositeTypeahead
+} from "./6OCAIYRY.js";
+import {
+  useComposite
+} from "./FXC76SFN.js";
+import {
+  createComponent,
+  createElement,
+  createHook
+} from "./JE5NWDDX.js";
+import {
+  useStoreState
+} from "./6DAEYZ43.js";
+import {
+  useEvent,
+  useForkRef,
+  useId,
+  useWrapElement
+} from "./B7MIN7YT.js";
+
+// src/menu/menu-list.tsx
+import { useContext, useEffect, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+function useAriaLabelledBy({ store, ...props }) {
+  const [id, setId] = useState(void 0);
+  const label = props["aria-label"];
+  const disclosureElement = store.useState("disclosureElement");
+  const contentElement = store.useState("contentElement");
+  useEffect(() => {
+    const disclosure = disclosureElement;
+    if (!disclosure)
+      return;
+    const menu = contentElement;
+    if (!menu)
+      return;
+    const menuLabel = label || menu.hasAttribute("aria-label");
+    if (menuLabel) {
+      setId(void 0);
+    } else if (disclosure.id) {
+      setId(disclosure.id);
+    }
+  }, [label, disclosureElement, contentElement]);
+  return id;
+}
+var useMenuList = createHook(
+  ({ store, composite = true, ...props }) => {
+    const parentMenu = useContext(MenuContext);
+    const parentMenuBar = useContext(MenuBarContext);
+    const hasParentMenu = !!parentMenu;
+    const id = useId(props.id);
+    const onKeyDownProp = props.onKeyDown;
+    const dir = store.useState(
+      (state) => state.placement.split("-")[0]
+    );
+    const orientation = store.useState(
+      (state) => state.orientation === "both" ? void 0 : state.orientation
+    );
+    const isHorizontal = orientation !== "vertical";
+    const isMenuBarHorizontal = !!useStoreState(
+      parentMenuBar,
+      (state) => state.orientation !== "vertical"
+    );
+    const onKeyDown = useEvent((event) => {
+      onKeyDownProp?.(event);
+      if (event.defaultPrevented)
+        return;
+      if (hasParentMenu || parentMenuBar && !isHorizontal) {
+        const hideMap = {
+          ArrowRight: () => dir === "left" && !isHorizontal,
+          ArrowLeft: () => dir === "right" && !isHorizontal,
+          ArrowUp: () => dir === "bottom" && isHorizontal,
+          ArrowDown: () => dir === "top" && isHorizontal
+        };
+        const action = hideMap[event.key];
+        if (action?.()) {
+          event.stopPropagation();
+          event.preventDefault();
+          return store.hide();
+        }
+      }
+      if (parentMenuBar) {
+        const keyMap = {
+          ArrowRight: () => {
+            if (!isMenuBarHorizontal)
+              return;
+            return parentMenuBar.next();
+          },
+          ArrowLeft: () => {
+            if (!isMenuBarHorizontal)
+              return;
+            return parentMenuBar.previous();
+          },
+          ArrowDown: () => {
+            if (isMenuBarHorizontal)
+              return;
+            return parentMenuBar.next();
+          },
+          ArrowUp: () => {
+            if (isMenuBarHorizontal)
+              return;
+            return parentMenuBar.previous();
+          }
+        };
+        const action = keyMap[event.key];
+        const id2 = action?.();
+        if (id2 !== void 0) {
+          event.stopPropagation();
+          event.preventDefault();
+          parentMenuBar.move(id2);
+        }
+      }
+    });
+    props = useWrapElement(
+      props,
+      (element) => /* @__PURE__ */ jsx(MenuContext.Provider, { value: store, children: element }),
+      [store]
+    );
+    const ariaLabelledBy = useAriaLabelledBy({ store, ...props });
+    const mounted = store.useState("mounted");
+    const style = mounted ? props.style : { ...props.style, display: "none" };
+    props = {
+      id,
+      "aria-labelledby": ariaLabelledBy,
+      hidden: !mounted,
+      ...props,
+      ref: useForkRef(id ? store.setContentElement : null, props.ref),
+      style,
+      onKeyDown
+    };
+    if (composite) {
+      props = {
+        role: "menu",
+        "aria-orientation": orientation,
+        ...props
+      };
+    }
+    props = useComposite({ store, composite, ...props });
+    props = useCompositeTypeahead({ store, ...props });
+    return props;
+  }
+);
+var MenuList = createComponent((props) => {
+  const htmlProps = useMenuList(props);
+  return createElement("div", htmlProps);
+});
+if (process.env.NODE_ENV !== "production") {
+  MenuList.displayName = "MenuList";
+}
+
+export {
+  useMenuList,
+  MenuList
+};

package/esm/__chunks/X7FKJQME.js

@@ -0,0 +1,87 @@
+// src/hovercard/utils/polygon.ts
+function getEventPoint(event) {
+  return [event.clientX, event.clientY];
+}
+function isPointInPolygon(point, polygon) {
+  const [x, y] = point;
+  let inside = false;
+  const length = polygon.length;
+  for (let l = length, i = 0, j = l - 1; i < l; j = i++) {
+    const [xi, yi] = polygon[i];
+    const [xj, yj] = polygon[j];
+    const [, vy] = polygon[j === 0 ? l - 1 : j - 1] || [0, 0];
+    const where = (yi - yj) * (x - xi) - (xi - xj) * (y - yi);
+    if (yj < yi) {
+      if (y >= yj && y < yi) {
+        if (where === 0)
+          return true;
+        if (where > 0) {
+          if (y === yj) {
+            if (y > vy) {
+              inside = !inside;
+            }
+          } else {
+            inside = !inside;
+          }
+        }
+      }
+    } else if (yi < yj) {
+      if (y > yi && y <= yj) {
+        if (where === 0)
+          return true;
+        if (where < 0) {
+          if (y === yj) {
+            if (y < vy) {
+              inside = !inside;
+            }
+          } else {
+            inside = !inside;
+          }
+        }
+      }
+    } else if (y == yi && (x >= xj && x <= xi || x >= xi && x <= xj)) {
+      return true;
+    }
+  }
+  return inside;
+}
+function getEnterPointPlacement(enterPoint, rect) {
+  const { top, right, bottom, left } = rect;
+  const [x, y] = enterPoint;
+  const placementX = x < left ? "left" : x > right ? "right" : null;
+  const placementY = y < top ? "top" : y > bottom ? "bottom" : null;
+  return [placementX, placementY];
+}
+function getElementPolygon(element, enterPoint) {
+  const rect = element.getBoundingClientRect();
+  const { top, right, bottom, left } = rect;
+  const [x, y] = getEnterPointPlacement(enterPoint, rect);
+  const polygon = [enterPoint];
+  if (x) {
+    if (y !== "top") {
+      polygon.push([x === "left" ? left : right, top]);
+    }
+    polygon.push([x === "left" ? right : left, top]);
+    polygon.push([x === "left" ? right : left, bottom]);
+    if (y !== "bottom") {
+      polygon.push([x === "left" ? left : right, bottom]);
+    }
+  } else if (y === "top") {
+    polygon.push([left, top]);
+    polygon.push([left, bottom]);
+    polygon.push([right, bottom]);
+    polygon.push([right, top]);
+  } else {
+    polygon.push([left, bottom]);
+    polygon.push([left, top]);
+    polygon.push([right, top]);
+    polygon.push([right, bottom]);
+  }
+  return polygon;
+}
+
+export {
+  getEventPoint,
+  isPointInPolygon,
+  getElementPolygon
+};