@trackunit/react-components 0.1.21 → 0.1.22

package/index.js

@@ -2790,6 +2790,57 @@ const useDebounce = (value, delay = 500) => {
     return debouncedValue;
 };
 
+// Copied from https://github.com/rexxars/use-device-pixel-ratio
+/**
+ * Get the device pixel ratio, potentially rounded and capped.
+ * Will emit new values if it changes.
+ *
+ * @param {DevicePixelRatioOptions} options the options object
+ * @returns { number } The current device pixel ratio, or the default if none can be resolved
+ */
+function useDevicePixelRatio(options) {
+    const dpr = getDevicePixelRatio(options);
+    const [currentDpr, setCurrentDpr] = useState(dpr);
+    const { defaultDpr, maxDpr, round } = options || {};
+    useEffect(() => {
+        const canListen = typeof window !== "undefined" && "matchMedia" in window;
+        if (!canListen) {
+            return;
+        }
+        const updateDpr = () => setCurrentDpr(getDevicePixelRatio({ defaultDpr, maxDpr, round }));
+        const mediaMatcher = window.matchMedia(`screen and (resolution: ${currentDpr}dppx)`);
+        // Safari 13.1 does not have `addEventListener`, but does have `addListener`
+        if (mediaMatcher.addEventListener) {
+            mediaMatcher.addEventListener("change", updateDpr);
+        }
+        else {
+            mediaMatcher.addListener(updateDpr);
+        }
+        return () => {
+            if (mediaMatcher.removeEventListener) {
+                mediaMatcher.removeEventListener("change", updateDpr);
+            }
+            else {
+                mediaMatcher.removeListener(updateDpr);
+            }
+        };
+    }, [currentDpr, defaultDpr, maxDpr, round]);
+    return currentDpr;
+}
+/**
+ * Returns the current device pixel ratio (DPR) given the passed options
+ *
+ * @param { DevicePixelRatioOptions } options the options object
+ * @returns { number } current device pixel ratio
+ */
+function getDevicePixelRatio(options) {
+    const { defaultDpr = 1, maxDpr = 3, round = true } = options || {};
+    const hasDprProp = typeof window !== "undefined" && typeof window.devicePixelRatio === "number";
+    const dpr = hasDprProp ? window.devicePixelRatio : defaultDpr;
+    const rounded = Math.min(Math.max(1, round ? Math.floor(dpr) : dpr), maxDpr);
+    return rounded;
+}
+
 /**
  * The useLocalStorage hook works like useState, but saves to localstorage.
  *
@@ -3056,4 +3107,4 @@ const Layout = tw.div `
   tu-layout-TwoColumnLayout
 `;
 
-export { ActionButton, Alert, Badge, BaseInput, Button, Card, CardBody, CardFooter, CardHeader, Chart, Checkbox, Collapse, ContentGridArea, CopyableText, CreatableSelect, DateField, DateInput, DayPicker, DayPickerPopover, DayRangePicker, DensityContainer, Drawer, ExternalLink, FilterListMapLayout, FormGroup, FullWidthRepeatingLayout, GridArea, Heading$1 as Heading, Icon$1 as Icon, IconButton, Indicator$1 as Indicator, IntrinsicallyResponsiveGrid, Label$2 as Label, LegendItem, MenuItem, MenuList, MinTopFullContentLayout, Modal, ModalBackdrop, MoreMenu, MultiSelectMenuItem, NavGridArea, NumberField, NumberInput, PageHeader, Pagination, PieChart, Popover, PopoverList, PopoverListItem, PopoverTitle, Prompt, ROLE_CARD, RadioGroup, RadioItem, Search, SectionHeader, Select, SelectPrefix, Sidebar, SingleSelectMenuItem, SkeletonLines, Spacer, Spinner, StarButton, Tag, Text$1 as Text, TextArea, TextAreaField, TextField, TextInput, Timeline, TimelineElement, Tip, TitleGridArea, TitleNavContentLayout, Toggle, Tooltip, TwoColumnLayout, ValueBar, docs, getOrderedOptions, getValueBarColorByValue, isMultiValue, useContainerProps, useCustomComponents, useDebounce, useLocalStorage, useModal, usePrompt, useTimeout };
+export { ActionButton, Alert, Badge, BaseInput, Button, Card, CardBody, CardFooter, CardHeader, Chart, Checkbox, Collapse, ContentGridArea, CopyableText, CreatableSelect, DateField, DateInput, DayPicker, DayPickerPopover, DayRangePicker, DensityContainer, Drawer, ExternalLink, FilterListMapLayout, FormGroup, FullWidthRepeatingLayout, GridArea, Heading$1 as Heading, Icon$1 as Icon, IconButton, Indicator$1 as Indicator, IntrinsicallyResponsiveGrid, Label$2 as Label, LegendItem, MenuItem, MenuList, MinTopFullContentLayout, Modal, ModalBackdrop, MoreMenu, MultiSelectMenuItem, NavGridArea, NumberField, NumberInput, PageHeader, Pagination, PieChart, Popover, PopoverList, PopoverListItem, PopoverTitle, Prompt, ROLE_CARD, RadioGroup, RadioItem, Search, SectionHeader, Select, SelectPrefix, Sidebar, SingleSelectMenuItem, SkeletonLines, Spacer, Spinner, StarButton, Tag, Text$1 as Text, TextArea, TextAreaField, TextField, TextInput, Timeline, TimelineElement, Tip, TitleGridArea, TitleNavContentLayout, Toggle, Tooltip, TwoColumnLayout, ValueBar, docs, getDevicePixelRatio, getOrderedOptions, getValueBarColorByValue, isMultiValue, useContainerProps, useCustomComponents, useDebounce, useDevicePixelRatio, useLocalStorage, useModal, usePrompt, useTimeout };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "0.1.21",
+  "version": "0.1.22",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "dependencies": {
@@ -23,6 +23,7 @@
     "react-router-dom": "6.4.5",
     "react-helmet-async": "1.3.0",
     "react-select": "5.7.0",
+    "react-dom": "18.2.0",
     "jest-canvas-mock": "2.4.0"
   },
   "module": "./index.js",

package/src/hooks/index.d.ts

@@ -1,3 +1,4 @@
 export * from "./useDebounce";
+export * from "./useDevicePixelRatio";
 export * from "./useLocalStorage";
 export * from "./useTimeout";

package/src/hooks/useDevicePixelRatio.d.ts

@@ -0,0 +1,37 @@
+export interface DevicePixelRatioOptions {
+    /**
+     * Default DPR to use if browser does not support the `devicePixelRatio`
+     * property, or when rendering on server
+     *
+     * @default `1`
+     * @returns DPR
+     */
+    defaultDpr?: number;
+    /**
+     * Whether or not to round the number down to the closest integer
+     *
+     * @default `true`
+     */
+    round?: boolean;
+    /**
+     * Maximum DPR to return (set to `2` to only generate 1 and 2)
+     *
+     * @default `3`
+     */
+    maxDpr?: number;
+}
+/**
+ * Get the device pixel ratio, potentially rounded and capped.
+ * Will emit new values if it changes.
+ *
+ * @param {DevicePixelRatioOptions} options the options object
+ * @returns { number } The current device pixel ratio, or the default if none can be resolved
+ */
+export declare function useDevicePixelRatio(options?: DevicePixelRatioOptions): number;
+/**
+ * Returns the current device pixel ratio (DPR) given the passed options
+ *
+ * @param { DevicePixelRatioOptions } options the options object
+ * @returns { number } current device pixel ratio
+ */
+export declare function getDevicePixelRatio(options?: DevicePixelRatioOptions): number;