@trackunit/react-components 1.17.48 → 1.17.49

package/index.cjs.js

@@ -8672,6 +8672,87 @@ const useElevatedState = (initialState, customState) => {
     return react.useMemo(() => customState ?? [fallbackValue, fallbackSetter], [customState, fallbackValue, fallbackSetter]);
 };
 
+// ============================================================================
+// Permission Helper
+// ============================================================================
+/**
+ * Query the current geolocation permission state without triggering a prompt.
+ * Returns `null` when the Permissions API is unavailable or the browser throws.
+ */
+const queryGeolocationPermission = async () => {
+    try {
+        const status = await navigator.permissions.query({ name: "geolocation" });
+        return status.state;
+    }
+    catch {
+        return null;
+    }
+};
+// ============================================================================
+// Position Helper
+// ============================================================================
+/** Wrap `getCurrentPosition` in a Promise that resolves to `GeoJsonPosition | null`. */
+const getCurrentPosition = () => new Promise(resolve => {
+    if (typeof navigator === "undefined") {
+        resolve(null);
+        return;
+    }
+    navigator.geolocation.getCurrentPosition(pos => resolve([pos.coords.longitude, pos.coords.latitude]), () => resolve(null));
+});
+/**
+ * Lightweight geolocation hook.
+ *
+ * By default does nothing on mount — the consumer decides when (and how) to
+ * request a position via `getPosition`. Set `requestOnMount: true` to
+ * automatically populate `position` when permission is already granted.
+ *
+ * @example
+ * ```ts
+ * // Auto-populate position if permission is already granted
+ * const { position, getPosition } = useGeolocation({ requestOnMount: true });
+ *
+ * // User-initiated request (e.g. "My Location" button)
+ * onClick: () => {
+ *   void getPosition().then(pos => { if (pos) fitBounds(pos); });
+ * }
+ * ```
+ */
+const useGeolocation = (options) => {
+    const [position, setPosition] = react.useState(null);
+    const getPosition = react.useCallback(async (opts) => {
+        const prompt = opts?.prompt !== false;
+        if (!prompt) {
+            const permissionState = await queryGeolocationPermission();
+            if (permissionState !== "granted")
+                return null;
+        }
+        const pos = await getCurrentPosition();
+        if (pos !== null) {
+            setPosition(pos);
+        }
+        return pos;
+    }, []);
+    useWatch({
+        value: options?.requestOnMount ?? false,
+        onChange: () => {
+            void queryGeolocationPermission()
+                .then(state => {
+                if (state !== "granted")
+                    return;
+                return getCurrentPosition();
+            })
+                .then(pos => {
+                if (pos !== null && pos !== undefined) {
+                    setPosition(pos);
+                }
+            });
+        },
+        immediate: true,
+        skip: options?.requestOnMount !== true,
+    });
+    return react.useMemo(() => ({ position, getPosition }), [position, getPosition]);
+};
+
 /**
  * The useHover hook returns a onMouseEnter, onMouseLeave and a boolean indicating whether the element is being hovered.
  * The boolean will be true if the element is being hovered, and false if it is not.
@@ -9653,6 +9734,7 @@ exports.useDebounce = useDebounce;
 exports.useDevicePixelRatio = useDevicePixelRatio;
 exports.useElevatedReducer = useElevatedReducer;
 exports.useElevatedState = useElevatedState;
+exports.useGeolocation = useGeolocation;
 exports.useGridAreas = useGridAreas;
 exports.useHover = useHover;
 exports.useInfiniteScroll = useInfiniteScroll;

package/index.esm.js

@@ -8670,6 +8670,87 @@ const useElevatedState = (initialState, customState) => {
     return useMemo(() => customState ?? [fallbackValue, fallbackSetter], [customState, fallbackValue, fallbackSetter]);
 };
 
+// ============================================================================
+// Permission Helper
+// ============================================================================
+/**
+ * Query the current geolocation permission state without triggering a prompt.
+ * Returns `null` when the Permissions API is unavailable or the browser throws.
+ */
+const queryGeolocationPermission = async () => {
+    try {
+        const status = await navigator.permissions.query({ name: "geolocation" });
+        return status.state;
+    }
+    catch {
+        return null;
+    }
+};
+// ============================================================================
+// Position Helper
+// ============================================================================
+/** Wrap `getCurrentPosition` in a Promise that resolves to `GeoJsonPosition | null`. */
+const getCurrentPosition = () => new Promise(resolve => {
+    if (typeof navigator === "undefined") {
+        resolve(null);
+        return;
+    }
+    navigator.geolocation.getCurrentPosition(pos => resolve([pos.coords.longitude, pos.coords.latitude]), () => resolve(null));
+});
+/**
+ * Lightweight geolocation hook.
+ *
+ * By default does nothing on mount — the consumer decides when (and how) to
+ * request a position via `getPosition`. Set `requestOnMount: true` to
+ * automatically populate `position` when permission is already granted.
+ *
+ * @example
+ * ```ts
+ * // Auto-populate position if permission is already granted
+ * const { position, getPosition } = useGeolocation({ requestOnMount: true });
+ *
+ * // User-initiated request (e.g. "My Location" button)
+ * onClick: () => {
+ *   void getPosition().then(pos => { if (pos) fitBounds(pos); });
+ * }
+ * ```
+ */
+const useGeolocation = (options) => {
+    const [position, setPosition] = useState(null);
+    const getPosition = useCallback(async (opts) => {
+        const prompt = opts?.prompt !== false;
+        if (!prompt) {
+            const permissionState = await queryGeolocationPermission();
+            if (permissionState !== "granted")
+                return null;
+        }
+        const pos = await getCurrentPosition();
+        if (pos !== null) {
+            setPosition(pos);
+        }
+        return pos;
+    }, []);
+    useWatch({
+        value: options?.requestOnMount ?? false,
+        onChange: () => {
+            void queryGeolocationPermission()
+                .then(state => {
+                if (state !== "granted")
+                    return;
+                return getCurrentPosition();
+            })
+                .then(pos => {
+                if (pos !== null && pos !== undefined) {
+                    setPosition(pos);
+                }
+            });
+        },
+        immediate: true,
+        skip: options?.requestOnMount !== true,
+    });
+    return useMemo(() => ({ position, getPosition }), [position, getPosition]);
+};
+
 /**
  * The useHover hook returns a onMouseEnter, onMouseLeave and a boolean indicating whether the element is being hovered.
  * The boolean will be true if the element is being hovered, and false if it is not.
@@ -9514,4 +9595,4 @@ const useWindowActivity = ({ onFocus, onBlur, skip = false } = { onBlur: undefin
     return useMemo(() => ({ focused }), [focused]);
 };
 
-export { ActionRenderer, Alert, Badge, Breadcrumb, BreadcrumbContainer, Button, Card, CardBody, CardFooter, CardHeader, Collapse, CompletionStatusIndicator, CopyableText, DEFAULT_SKELETON_PREFERENCE_CARD_PROPS, DetailsList, EmptyState, EmptyValue, ExternalLink, GridAreas, Heading, Highlight, HorizontalOverflowScroller, Icon, IconButton, Indicator, KPI, KPICard, KPICardSkeleton, KPISkeleton, List, ListItem, MenuDivider, MenuItem, MenuList, MoreMenu, Notice, PackageNameStoryComponent, Page, PageContent, PageHeader, PageHeaderKpiMetrics, PageHeaderSecondaryActions, PageHeaderTitle, Pagination, Polygon, Popover, PopoverContent, PopoverTitle, PopoverTrigger, Portal, PreferenceCard, PreferenceCardSkeleton, Prompt, ROLE_CARD, SectionHeader, SegmentedValueBar, Sidebar, SkeletonBlock, SkeletonLabel, SkeletonLines, Spacer, Spinner, StarButton, Tab, TabContent, TabList, Tabs, Tag, Text, ToggleGroup, Tooltip, TrendIndicator, TrendIndicators, ValueBar, ZStack, createGrid, cvaButton, cvaButtonPrefixSuffix, cvaButtonSpinner, cvaButtonSpinnerContainer, cvaClickable, cvaContainerStyles, cvaContentContainer, cvaContentWrapper, cvaDescriptionCard, cvaIconBackground, cvaIconButton, cvaImgStyles, cvaIndicator, cvaIndicatorIcon, cvaIndicatorIconBackground, cvaIndicatorLabel, cvaIndicatorPing, cvaInputContainer, cvaInteractableItem, cvaList, cvaListContainer, cvaListItem$1 as cvaListItem, cvaMenu, cvaMenuItem, cvaMenuItemLabel, cvaMenuItemPrefix, cvaMenuItemStyle, cvaMenuItemSuffix, cvaMenuList, cvaMenuListDivider, cvaMenuListItem, cvaMenuListMultiSelect, cvaPageHeader, cvaPageHeaderContainer, cvaPageHeaderHeading, cvaPreferenceCard, cvaTitleCard, cvaToggleGroup, cvaToggleGroupWithSlidingBackground, cvaToggleItem, cvaToggleItemContent, cvaToggleItemText, cvaZStackContainer, cvaZStackItem, defaultPageSize, docs, getDevicePixelRatio, getValueBarColorByValue, iconColorNames, iconPalette, noPagination, preferenceCardGrid, useClickOutside, useContainerBreakpoints, useContinuousTimeout, useCopyToClipboard, useCustomEncoding, useDebounce, useDevicePixelRatio, useElevatedReducer, useElevatedState, useGridAreas, useHover, useInfiniteScroll, useIsFirstRender, useIsFullscreen, useIsTextTruncated, useKeyboardShortcut, useList, useListItemHeight, useLocalStorage, useLocalStorageReducer, useMeasure, useMergeRefs, useModifierKey, useOverflowItems, usePopoverContext, usePrevious, usePrompt, useRandomCSSLengths, useRelayPagination, useResize, useScrollBlock, useScrollDetection, useSelfUpdatingRef, useTextSearch, useTimeout, useViewportBreakpoints, useWatch, useWindowActivity };
+export { ActionRenderer, Alert, Badge, Breadcrumb, BreadcrumbContainer, Button, Card, CardBody, CardFooter, CardHeader, Collapse, CompletionStatusIndicator, CopyableText, DEFAULT_SKELETON_PREFERENCE_CARD_PROPS, DetailsList, EmptyState, EmptyValue, ExternalLink, GridAreas, Heading, Highlight, HorizontalOverflowScroller, Icon, IconButton, Indicator, KPI, KPICard, KPICardSkeleton, KPISkeleton, List, ListItem, MenuDivider, MenuItem, MenuList, MoreMenu, Notice, PackageNameStoryComponent, Page, PageContent, PageHeader, PageHeaderKpiMetrics, PageHeaderSecondaryActions, PageHeaderTitle, Pagination, Polygon, Popover, PopoverContent, PopoverTitle, PopoverTrigger, Portal, PreferenceCard, PreferenceCardSkeleton, Prompt, ROLE_CARD, SectionHeader, SegmentedValueBar, Sidebar, SkeletonBlock, SkeletonLabel, SkeletonLines, Spacer, Spinner, StarButton, Tab, TabContent, TabList, Tabs, Tag, Text, ToggleGroup, Tooltip, TrendIndicator, TrendIndicators, ValueBar, ZStack, createGrid, cvaButton, cvaButtonPrefixSuffix, cvaButtonSpinner, cvaButtonSpinnerContainer, cvaClickable, cvaContainerStyles, cvaContentContainer, cvaContentWrapper, cvaDescriptionCard, cvaIconBackground, cvaIconButton, cvaImgStyles, cvaIndicator, cvaIndicatorIcon, cvaIndicatorIconBackground, cvaIndicatorLabel, cvaIndicatorPing, cvaInputContainer, cvaInteractableItem, cvaList, cvaListContainer, cvaListItem$1 as cvaListItem, cvaMenu, cvaMenuItem, cvaMenuItemLabel, cvaMenuItemPrefix, cvaMenuItemStyle, cvaMenuItemSuffix, cvaMenuList, cvaMenuListDivider, cvaMenuListItem, cvaMenuListMultiSelect, cvaPageHeader, cvaPageHeaderContainer, cvaPageHeaderHeading, cvaPreferenceCard, cvaTitleCard, cvaToggleGroup, cvaToggleGroupWithSlidingBackground, cvaToggleItem, cvaToggleItemContent, cvaToggleItemText, cvaZStackContainer, cvaZStackItem, defaultPageSize, docs, getDevicePixelRatio, getValueBarColorByValue, iconColorNames, iconPalette, noPagination, preferenceCardGrid, useClickOutside, useContainerBreakpoints, useContinuousTimeout, useCopyToClipboard, useCustomEncoding, useDebounce, useDevicePixelRatio, useElevatedReducer, useElevatedState, useGeolocation, useGridAreas, useHover, useInfiniteScroll, useIsFirstRender, useIsFullscreen, useIsTextTruncated, useKeyboardShortcut, useList, useListItemHeight, useLocalStorage, useLocalStorageReducer, useMeasure, useMergeRefs, useModifierKey, useOverflowItems, usePopoverContext, usePrevious, usePrompt, useRandomCSSLengths, useRelayPagination, useResize, useScrollBlock, useScrollDetection, useSelfUpdatingRef, useTextSearch, useTimeout, useViewportBreakpoints, useWatch, useWindowActivity };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "1.17.48",
+  "version": "1.17.49",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -14,10 +14,10 @@
     "@floating-ui/react": "^0.26.25",
     "string-ts": "^2.0.0",
     "tailwind-merge": "^2.0.0",
-    "@trackunit/ui-design-tokens": "1.11.59",
-    "@trackunit/css-class-variance-utilities": "1.11.60",
-    "@trackunit/shared-utils": "1.13.60",
-    "@trackunit/ui-icons": "1.11.58",
+    "@trackunit/ui-design-tokens": "1.11.60",
+    "@trackunit/css-class-variance-utilities": "1.11.61",
+    "@trackunit/shared-utils": "1.13.61",
+    "@trackunit/ui-icons": "1.11.59",
     "@tanstack/react-router": "1.114.29",
     "es-toolkit": "^1.39.10",
     "@tanstack/react-virtual": "3.13.12",

package/src/hooks/useGeolocation.d.ts

@@ -0,0 +1,51 @@
+type GeoJsonPosition = [number, number] | [number, number, number];
+type UseGeolocationReturn = Readonly<{
+    /** Last successfully resolved position as [longitude, latitude], or null if no position has been obtained yet */
+    position: GeoJsonPosition | null;
+    /**
+     * Get the current geographic position.
+     *
+     * - `prompt: true` (default) — calls `getCurrentPosition` directly, which may
+     *   show the browser permission dialog if permission hasn't been granted yet.
+     *   Intended for user-initiated actions (e.g. "My Location" button).
+     *
+     * - `prompt: false` — checks the permission state first and only retrieves the
+     *   position if permission is already `"granted"`. Never triggers a prompt.
+     *   Returns `null` when permission is not granted or the API is unavailable.
+     *
+     * On success, also updates the `position` state so dependent renders pick it up.
+     */
+    getPosition: (options?: Readonly<{
+        prompt?: boolean;
+    }>) => Promise<GeoJsonPosition | null>;
+}>;
+type UseGeolocationOptions = Readonly<{
+    /**
+     * When `true`, passively checks geolocation permission on mount and
+     * populates `position` if permission is already `"granted"`.
+     * Never triggers a browser prompt.
+     *
+     * @default false
+     */
+    requestOnMount?: boolean;
+}>;
+/**
+ * Lightweight geolocation hook.
+ *
+ * By default does nothing on mount — the consumer decides when (and how) to
+ * request a position via `getPosition`. Set `requestOnMount: true` to
+ * automatically populate `position` when permission is already granted.
+ *
+ * @example
+ * ```ts
+ * // Auto-populate position if permission is already granted
+ * const { position, getPosition } = useGeolocation({ requestOnMount: true });
+ *
+ * // User-initiated request (e.g. "My Location" button)
+ * onClick: () => {
+ *   void getPosition().then(pos => { if (pos) fitBounds(pos); });
+ * }
+ * ```
+ */
+export declare const useGeolocation: (options?: UseGeolocationOptions) => UseGeolocationReturn;
+export {};

package/src/index.d.ts

@@ -116,6 +116,7 @@ export * from "./hooks/useDebounce";
 export * from "./hooks/useDevicePixelRatio";
 export * from "./hooks/useElevatedReducer";
 export * from "./hooks/useElevatedState";
+export * from "./hooks/useGeolocation";
 export * from "./hooks/useHover";
 export * from "./hooks/useInfiniteScroll";
 export * from "./hooks/useIsFirstRender";