impact-ui 3.7.34-alpha.2 → 3.7.34-alpha.3

package/dist/components/Select/hooks/useKeyboardNavigation.js

@@ -0,0 +1,160 @@
+import { useState, useRef, useEffect, useCallback } from "react";
+function useKeyboardNavigation({
+  options = [],
+  isOpen,
+  onSelect,
+  onClose,
+  isMulti = false,
+  selectedOption = null,
+  getOptionDisabled = () => false,
+  onHighlightChange,
+  onNavigateUp,
+  hasSelectAll = false,
+  onSelectAllToggle
+}) {
+  const [highlightedIndex, setHighlightedIndex] = useState(-1);
+  const prevOpenRef = useRef(isOpen);
+  useEffect(() => {
+    if (isOpen && !prevOpenRef.current) {
+      if (hasSelectAll) {
+        setHighlightedIndex(-1);
+      } else {
+        let startIndex = 0;
+        if (!isMulti && selectedOption) {
+          const idx = options.findIndex((o) => o.value === selectedOption.value);
+          if (idx >= 0) startIndex = idx;
+        }
+        setHighlightedIndex(startIndex);
+      }
+    } else if (!isOpen && prevOpenRef.current) {
+      setHighlightedIndex(-1);
+    }
+    prevOpenRef.current = isOpen;
+  }, [isOpen]);
+  useEffect(() => {
+    if (isOpen) {
+      setHighlightedIndex((prev) => {
+        if (prev >= options.length) return Math.max(0, options.length - 1);
+        if (prev === -1 && hasSelectAll) return -1;
+        if (prev < 0 && options.length > 0) return 0;
+        return prev;
+      });
+    }
+  }, [options.length, isOpen, hasSelectAll]);
+  const findNextEnabled = useCallback(
+    (start, direction) => {
+      const len = options.length;
+      if (len === 0) return -1;
+      let idx = start;
+      for (let i = 0; i < len; i++) {
+        idx = (idx + direction + len) % len;
+        const option = options[idx];
+        if (option && !getOptionDisabled(option)) return idx;
+      }
+      return start;
+    },
+    [options, getOptionDisabled]
+  );
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (!isOpen) return;
+      switch (e.key) {
+        case "ArrowDown": {
+          e.preventDefault();
+          if (highlightedIndex === -1 && hasSelectAll) {
+            const first = findNextEnabled(-1, 1);
+            setHighlightedIndex(first);
+            onHighlightChange == null ? void 0 : onHighlightChange(first);
+          } else if (hasSelectAll && highlightedIndex >= options.length - 1) {
+            setHighlightedIndex(-1);
+            onHighlightChange == null ? void 0 : onHighlightChange(-1);
+          } else {
+            const next = findNextEnabled(highlightedIndex, 1);
+            setHighlightedIndex(next);
+            onHighlightChange == null ? void 0 : onHighlightChange(next);
+          }
+          break;
+        }
+        case "ArrowUp": {
+          e.preventDefault();
+          if (highlightedIndex === -1 && hasSelectAll) {
+            const last = options.length - 1;
+            setHighlightedIndex(last);
+            onHighlightChange == null ? void 0 : onHighlightChange(last);
+            break;
+          }
+          if (highlightedIndex === 0 && hasSelectAll) {
+            setHighlightedIndex(-1);
+            onHighlightChange == null ? void 0 : onHighlightChange(-1);
+            break;
+          }
+          if (highlightedIndex <= 0 && onNavigateUp) {
+            setHighlightedIndex(-1);
+            onNavigateUp();
+            break;
+          }
+          const prev = findNextEnabled(highlightedIndex, -1);
+          setHighlightedIndex(prev);
+          onHighlightChange == null ? void 0 : onHighlightChange(prev);
+          break;
+        }
+        case "Home": {
+          e.preventDefault();
+          const first = findNextEnabled(-1, 1);
+          setHighlightedIndex(first);
+          onHighlightChange == null ? void 0 : onHighlightChange(first);
+          break;
+        }
+        case "End": {
+          e.preventDefault();
+          const last = findNextEnabled(options.length, -1);
+          setHighlightedIndex(last);
+          onHighlightChange == null ? void 0 : onHighlightChange(last);
+          break;
+        }
+        case "Enter":
+        case " ": {
+          e.preventDefault();
+          if (highlightedIndex === -1 && hasSelectAll && onSelectAllToggle) {
+            onSelectAllToggle();
+          } else if (highlightedIndex >= 0 && highlightedIndex < options.length) {
+            const opt = options[highlightedIndex];
+            if (opt && !getOptionDisabled(opt)) {
+              onSelect == null ? void 0 : onSelect(opt, highlightedIndex);
+            }
+          }
+          break;
+        }
+        case "Escape": {
+          e.preventDefault();
+          onClose == null ? void 0 : onClose();
+          break;
+        }
+        case "Tab":
+          onClose == null ? void 0 : onClose();
+          break;
+      }
+    },
+    [
+      isOpen,
+      highlightedIndex,
+      options,
+      findNextEnabled,
+      onSelect,
+      onClose,
+      getOptionDisabled,
+      onHighlightChange,
+      onNavigateUp,
+      hasSelectAll,
+      onSelectAllToggle
+    ]
+  );
+  return {
+    highlightedIndex,
+    setHighlightedIndex,
+    handleKeyDown
+  };
+}
+export {
+  useKeyboardNavigation
+};

package/dist/components/Select/hooks/useMenuPosition.d.ts

@@ -0,0 +1,13 @@
+import { CSSProperties } from 'react';
+import { UseMenuPositionParams } from '../Select.types';
+
+/**
+ * Calculates and tracks menu position with:
+ * - requestAnimationFrame throttling
+ * - ResizeObserver for trigger element changes
+ * - Scrollable parent container detection
+ * - Support for both portal and non-portal modes
+ */
+export declare const useMenuPosition: ({ isOpen, triggerRef, menuRef, withPortal, dropdownPosition, }: UseMenuPositionParams) => CSSProperties;
+export default useMenuPosition;
+//# sourceMappingURL=useMenuPosition.d.ts.map

package/dist/components/Select/hooks/useMenuPosition.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMenuPosition.d.ts","sourceRoot":"","sources":["../../../../src/components/Select/hooks/useMenuPosition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAqC,KAAK,aAAa,EAAE,MAAM,OAAO,CAAC;AAC9E,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAC;AAE7D;;;;;;GAMG;AACH,eAAO,MAAM,eAAe,GAAI,gEAM7B,qBAAqB,KAAG,aAgO1B,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/components/Select/hooks/useMenuPosition.js

@@ -0,0 +1,187 @@
+import { useState, useRef, useLayoutEffect } from "react";
+const useMenuPosition = ({
+  isOpen,
+  triggerRef,
+  menuRef,
+  withPortal = false,
+  dropdownPosition
+}) => {
+  const [menuStyle, setMenuStyle] = useState({ opacity: 0 });
+  const positionUpdateRef = useRef(null);
+  const lastPositionRef = useRef(null);
+  const isHiddenRef = useRef(true);
+  useLayoutEffect(() => {
+    if (!isOpen || !triggerRef.current) {
+      if (!isHiddenRef.current) {
+        setMenuStyle({ opacity: 0 });
+        isHiddenRef.current = true;
+      }
+      return;
+    }
+    isHiddenRef.current = false;
+    const calculatePosition = () => {
+      if (!triggerRef.current) return null;
+      const triggerRect = triggerRef.current.getBoundingClientRect();
+      const viewportWidth = window.innerWidth;
+      const viewportHeight = window.innerHeight;
+      const scrollX = window.scrollX || document.documentElement.scrollLeft;
+      const scrollY = window.scrollY || document.documentElement.scrollTop;
+      let menuHeight = 320;
+      if (menuRef == null ? void 0 : menuRef.current) {
+        const menuRect = menuRef.current.getBoundingClientRect();
+        menuHeight = menuRect.height || 320;
+      }
+      const menuWidth = triggerRect.width;
+      const spacing = 6;
+      const viewportTopOffset = 64;
+      const spaceBelow = viewportHeight - triggerRect.bottom;
+      const spaceAbove = triggerRect.top - viewportTopOffset;
+      let position = "bottom";
+      if (dropdownPosition === "top" || dropdownPosition === "bottom") {
+        position = dropdownPosition;
+      } else {
+        if (spaceBelow >= menuHeight + spacing) {
+          position = "bottom";
+        } else if (spaceAbove >= menuHeight + spacing) {
+          position = "top";
+        } else {
+          position = spaceBelow >= spaceAbove ? "bottom" : "top";
+        }
+      }
+      let top = 0;
+      let left = 0;
+      if (withPortal) {
+        if (position === "bottom") {
+          top = triggerRect.bottom + scrollY + spacing;
+        } else {
+          top = triggerRect.top + scrollY - menuHeight - spacing;
+        }
+        left = triggerRect.left + scrollX;
+        top = Math.max(viewportTopOffset + scrollY, top);
+      } else {
+        if (position === "bottom") {
+          top = triggerRect.height + spacing - 4;
+        } else {
+          top = -menuHeight - spacing;
+        }
+        left = 0;
+        const absoluteY = triggerRect.top;
+        const minTopRelative = viewportTopOffset - absoluteY;
+        top = Math.max(minTopRelative, top);
+      }
+      if (withPortal) {
+        let adjustedLeft = left - scrollX;
+        if (adjustedLeft + menuWidth > viewportWidth) {
+          adjustedLeft = Math.max(0, viewportWidth - menuWidth - 10);
+        }
+        if (adjustedLeft < 0) {
+          adjustedLeft = 10;
+        }
+        left = adjustedLeft + scrollX;
+      }
+      return { top, left, width: menuWidth, position };
+    };
+    const applyPosition = (newPosition) => {
+      const lastPos = lastPositionRef.current;
+      if (!lastPos || lastPos.top !== newPosition.top || lastPos.left !== newPosition.left || lastPos.width !== newPosition.width || lastPos.position !== newPosition.position) {
+        lastPositionRef.current = {
+          top: newPosition.top,
+          left: newPosition.left,
+          width: newPosition.width,
+          position: newPosition.position
+        };
+        const style = {
+          top: newPosition.top,
+          width: newPosition.width + "px",
+          minWidth: newPosition.width + "px",
+          opacity: 1
+        };
+        if (withPortal) {
+          style.left = newPosition.left;
+          style.position = "absolute";
+        }
+        setMenuStyle(style);
+      }
+    };
+    const updatePosition = () => {
+      if (positionUpdateRef.current !== null) {
+        cancelAnimationFrame(positionUpdateRef.current);
+      }
+      positionUpdateRef.current = requestAnimationFrame(() => {
+        const newPosition = calculatePosition();
+        if (newPosition) {
+          applyPosition(newPosition);
+        }
+        positionUpdateRef.current = null;
+      });
+    };
+    const initialPos = calculatePosition();
+    if (initialPos) {
+      applyPosition(initialPos);
+    }
+    let resizeObserver = null;
+    if (typeof ResizeObserver !== "undefined" && triggerRef.current) {
+      resizeObserver = new ResizeObserver(() => {
+        updatePosition();
+      });
+      resizeObserver.observe(triggerRef.current);
+    }
+    let resizeFrame = null;
+    const handleResize = () => {
+      if (resizeFrame !== null) return;
+      resizeFrame = requestAnimationFrame(() => {
+        updatePosition();
+        resizeFrame = null;
+      });
+    };
+    let scrollFrame = null;
+    const handleScroll = () => {
+      if (scrollFrame !== null) return;
+      scrollFrame = requestAnimationFrame(() => {
+        updatePosition();
+        scrollFrame = null;
+      });
+    };
+    const scrollableParents = [];
+    let parent = triggerRef.current.parentElement;
+    while (parent) {
+      const style = window.getComputedStyle(parent);
+      const overflowY = style.overflowY;
+      const overflowX = style.overflowX;
+      if (overflowY === "auto" || overflowY === "scroll" || overflowX === "auto" || overflowX === "scroll") {
+        scrollableParents.push(parent);
+      }
+      parent = parent.parentElement;
+    }
+    scrollableParents.forEach((scrollableParent) => {
+      scrollableParent.addEventListener("scroll", handleScroll, { passive: true });
+    });
+    window.addEventListener("resize", handleResize, { passive: true });
+    window.addEventListener("scroll", handleScroll, { passive: true, capture: true });
+    return () => {
+      if (positionUpdateRef.current !== null) {
+        cancelAnimationFrame(positionUpdateRef.current);
+        positionUpdateRef.current = null;
+      }
+      if (resizeFrame !== null) {
+        cancelAnimationFrame(resizeFrame);
+      }
+      if (scrollFrame !== null) {
+        cancelAnimationFrame(scrollFrame);
+      }
+      if (resizeObserver) {
+        resizeObserver.disconnect();
+      }
+      scrollableParents.forEach((scrollableParent) => {
+        scrollableParent.removeEventListener("scroll", handleScroll);
+      });
+      window.removeEventListener("resize", handleResize);
+      window.removeEventListener("scroll", handleScroll, true);
+      lastPositionRef.current = null;
+    };
+  }, [isOpen, triggerRef, menuRef, withPortal, dropdownPosition]);
+  return menuStyle;
+};
+export {
+  useMenuPosition
+};

package/dist/components/Select/hooks/useScrollIntoView.d.ts

@@ -0,0 +1,11 @@
+import { RefObject } from 'react';
+
+export declare function useScrollIntoView({ highlightedIndex, containerRef, listRef, isVirtualized, }: {
+    highlightedIndex: number;
+    containerRef?: RefObject<HTMLElement | null>;
+    listRef?: RefObject<{
+        scrollToItem: (index: number, align: string) => void;
+    } | null>;
+    isVirtualized?: boolean;
+}): void;
+//# sourceMappingURL=useScrollIntoView.d.ts.map

package/dist/components/Select/hooks/useScrollIntoView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useScrollIntoView.d.ts","sourceRoot":"","sources":["../../../../src/components/Select/hooks/useScrollIntoView.ts"],"names":[],"mappings":"AAAA,OAAO,EAAqB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAE1D,wBAAgB,iBAAiB,CAAC,EAChC,gBAAgB,EAChB,YAAY,EACZ,OAAO,EACP,aAAqB,GACtB,EAAE;IACD,gBAAgB,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC7C,OAAO,CAAC,EAAE,SAAS,CAAC;QAAE,YAAY,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;KAAE,GAAG,IAAI,CAAC,CAAC;IACrF,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,QAqBA"}

package/dist/components/Select/hooks/useScrollIntoView.js

@@ -0,0 +1,28 @@
+import { useRef, useEffect } from "react";
+function useScrollIntoView({
+  highlightedIndex,
+  containerRef,
+  listRef,
+  isVirtualized = false
+}) {
+  const prevIndex = useRef(highlightedIndex);
+  useEffect(() => {
+    if (highlightedIndex < 0) return;
+    if (highlightedIndex === prevIndex.current) return;
+    prevIndex.current = highlightedIndex;
+    if (isVirtualized && (listRef == null ? void 0 : listRef.current)) {
+      listRef.current.scrollToItem(highlightedIndex, "smart");
+      return;
+    }
+    if (containerRef == null ? void 0 : containerRef.current) {
+      const items = containerRef.current.querySelectorAll('[role="option"]');
+      const target = items[highlightedIndex];
+      if (target && typeof target.scrollIntoView === "function") {
+        target.scrollIntoView({ block: "nearest", behavior: "smooth" });
+      }
+    }
+  }, [highlightedIndex, containerRef, listRef, isVirtualized]);
+}
+export {
+  useScrollIntoView
+};

package/dist/components/Select/hooks/useTypeahead.d.ts

@@ -0,0 +1,11 @@
+import { SelectOption } from '../Select.types';
+
+export declare function useTypeahead({ options, setHighlightedIndex, isActive, }: {
+    options?: SelectOption[];
+    setHighlightedIndex: (index: number) => void;
+    isActive?: boolean;
+}): {
+    handleTypeahead: (e: React.KeyboardEvent) => boolean;
+    resetBuffer: () => void;
+};
+//# sourceMappingURL=useTypeahead.d.ts.map

package/dist/components/Select/hooks/useTypeahead.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTypeahead.d.ts","sourceRoot":"","sources":["../../../../src/components/Select/hooks/useTypeahead.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAIpD,wBAAgB,YAAY,CAAC,EAC3B,OAAY,EACZ,mBAAmB,EACnB,QAAe,GAChB,EAAE;IACD,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IACzB,mBAAmB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;yBAKO,KAAK,CAAC,aAAa;;EAqC1B"}

package/dist/components/Select/hooks/useTypeahead.js

@@ -0,0 +1,41 @@
+import { useRef, useCallback } from "react";
+const TYPEAHEAD_TIMEOUT = 500;
+function useTypeahead({
+  options = [],
+  setHighlightedIndex,
+  isActive = true
+}) {
+  const bufferRef = useRef("");
+  const timerRef = useRef(null);
+  const handleTypeahead = useCallback(
+    (e) => {
+      if (!isActive) return false;
+      if (e.key.length !== 1 || e.ctrlKey || e.metaKey || e.altKey) return false;
+      e.preventDefault();
+      bufferRef.current += e.key.toLowerCase();
+      if (timerRef.current) clearTimeout(timerRef.current);
+      timerRef.current = setTimeout(() => {
+        bufferRef.current = "";
+      }, TYPEAHEAD_TIMEOUT);
+      const matchIndex = options.findIndex(
+        (opt) => String(opt.label ?? "").toLowerCase().startsWith(bufferRef.current)
+      );
+      if (matchIndex >= 0) {
+        setHighlightedIndex(matchIndex);
+      }
+      return true;
+    },
+    [options, setHighlightedIndex, isActive]
+  );
+  const resetBuffer = useCallback(() => {
+    bufferRef.current = "";
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+      timerRef.current = null;
+    }
+  }, []);
+  return { handleTypeahead, resetBuffer };
+}
+export {
+  useTypeahead
+};

package/dist/components/Select/index.d.ts

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+import { SelectProps } from './Select.types';
+
+export type { SelectProps, SelectOption } from './Select.types';
+export declare const Select: React.NamedExoticComponent<SelectProps>;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Select/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Select/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4D,MAAM,OAAO,CAAC;AAyBjF,OAAO,KAAK,EACV,WAAW,EAIZ,MAAM,gBAAgB,CAAC;AACxB,OAAO,sBAAsB,CAAC;AAE9B,YAAY,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAgBhE,eAAO,MAAM,MAAM,yCA81CjB,CAAC"}