@homecode/ui 5.1.14 → 5.1.17

package/dist/esm/index.js

@@ -88,6 +88,7 @@ import * as resizeObserver from './src/tools/resizeObserver.js';
 export { resizeObserver };
 import * as queryParams from './src/tools/queryParams.js';
 export { queryParams };
+export { useAwake } from './src/hooks/useAwake.js';
 export { useThrottle, useThrottleCallback } from './src/hooks/useThrottle.js';
 export { useDebounce, useDebounceCallback } from './src/hooks/useDebounce.js';
 import 'react';

package/dist/esm/src/components/Slider/Slider.js

@@ -9,7 +9,7 @@ const valueToPct = (value, min, max) => {
     const range = max - min;
     return range > 0 ? `${((value - min) / range) * 100}%` : '0%';
 };
-function Slider({ className, label, value, min = 0, max = 100, step, size = 'm', disabled = false, showGhost = false, markers, markerClassName, onMarkerClick, onChange, onInput, ...inputProps }) {
+function Slider({ className, label, value, min = 0, max = 100, step, size = 'm', disabled = false, showGhost = false, markers, markerClassName, onMarkerClick, onChange, onInput, markerTooltipProps = {}, ...inputProps }) {
     const trackWrapRef = useRef(null);
     const [ghostRatio, setGhostRatio] = useState(null);
     const progressPct = valueToPct(value, min, max);
@@ -37,7 +37,7 @@ function Slider({ className, label, value, min = 0, max = 100, step, size = 'm',
                                     if (!disabled)
                                         onMarkerClick?.(marker.value);
                                 } }));
-                            return (jsx("span", { className: S.markerWrap, style: { left: valueToPct(marker.value, min, max) }, children: marker.label ? (jsx(Tooltip, { content: marker.label, direction: "top", children: markerButton })) : (markerButton) }, marker.key ?? index));
+                            return (jsx("span", { className: S.markerWrap, style: { left: valueToPct(marker.value, min, max) }, children: marker.label ? (jsx(Tooltip, { direction: "bottom", ...markerTooltipProps, content: marker.label, children: markerButton })) : (markerButton) }, marker.key ?? index));
                         }) })) : null] })] }));
 }
 

package/dist/esm/src/hooks/useAwake.js

@@ -0,0 +1,65 @@
+import { useRef, useEffect } from 'react';
+
+function getWakeLockNavigator() {
+    if (typeof navigator === 'undefined' || !('wakeLock' in navigator)) {
+        return null;
+    }
+    return navigator;
+}
+function useAwake(isActive) {
+    const isActiveRef = useRef(isActive);
+    isActiveRef.current = isActive;
+    const sentinelRef = useRef(null);
+    useEffect(() => {
+        const wakeLockNavigator = getWakeLockNavigator();
+        if (!wakeLockNavigator?.wakeLock)
+            return;
+        const release = async () => {
+            const sentinel = sentinelRef.current;
+            sentinelRef.current = null;
+            if (!sentinel || sentinel.released)
+                return;
+            try {
+                await sentinel.release();
+            }
+            catch {
+                // already released or unsupported
+            }
+        };
+        const request = async () => {
+            if (!isActiveRef.current || document.visibilityState !== 'visible')
+                return;
+            await release();
+            try {
+                const sentinel = await wakeLockNavigator.wakeLock.request('screen');
+                sentinelRef.current = sentinel;
+                sentinel.addEventListener('release', () => {
+                    if (sentinelRef.current === sentinel) {
+                        sentinelRef.current = null;
+                    }
+                });
+            }
+            catch {
+                // NotAllowedError, etc.
+            }
+        };
+        const onVisibilityChange = () => {
+            if (document.visibilityState === 'visible') {
+                void request();
+            }
+        };
+        if (isActive) {
+            void request();
+        }
+        else {
+            void release();
+        }
+        document.addEventListener('visibilitychange', onVisibilityChange);
+        return () => {
+            document.removeEventListener('visibilitychange', onVisibilityChange);
+            void release();
+        };
+    }, [isActive]);
+}
+
+export { useAwake };

package/dist/esm/types/src/components/Slider/Slider.d.ts

@@ -1,4 +1,4 @@
 import * as T from './Slider.types';
 export type SliderProps = T.Props;
 export type SliderMarker = T.SliderMarker;
-export declare function Slider({ className, label, value, min, max, step, size, disabled, showGhost, markers, markerClassName, onMarkerClick, onChange, onInput, ...inputProps }: SliderProps): JSX.Element;
+export declare function Slider({ className, label, value, min, max, step, size, disabled, showGhost, markers, markerClassName, onMarkerClick, onChange, onInput, markerTooltipProps, ...inputProps }: SliderProps): JSX.Element;

package/dist/esm/types/src/components/Slider/Slider.types.d.ts

@@ -1,5 +1,6 @@
 import { ReactNode, ChangeEvent, FormEvent, InputHTMLAttributes } from 'react';
 import { Size, ComponentType } from '../../types';
+import { TooltipProps } from 'uilib';
 export type SliderMarker = {
     key?: string;
     value: number;
@@ -16,6 +17,7 @@ export type Props = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'
     label?: ReactNode;
     markers?: SliderMarker[];
     markerClassName?: string;
+    markerTooltipProps?: Partial<TooltipProps>;
     onMarkerClick?: (value: number) => void;
     onChange?: (value: number, e: ChangeEvent<HTMLInputElement> | FormEvent<HTMLInputElement>) => void;
 };

package/dist/esm/types/src/hooks/index.d.ts

@@ -1,3 +1,4 @@
+export * from './useAwake';
 export * from './useThrottle';
 export * from './useDebounce';
 export * from './useEvent';

package/dist/esm/types/src/hooks/useAwake.d.ts

@@ -0,0 +1 @@
+export declare function useAwake(isActive: boolean): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homecode/ui",
-  "version": "5.1.14",
+  "version": "5.1.17",
   "description": "React UI components library",
   "scripts": {
     "tests": "jest",