@nextui-org/react-utils - npm Package Compare versions

Comparing version 0.0.0-dev-v2-20230613212244 to 0.0.0-dev-v2-20230613214509

dist/index.d.ts

 export { CreateContextOptions, CreateContextReturn, createContext } from './context.js';
 export { getValidChildren, pickChildren } from './children.js';
 export { ReactRef, assignRef, mergeRefs } from './refs.js';
+export { ContextValue, UserAgentBrowser, UserAgentDeviceType, UserAgentOS, canUseDOM, createDOMRef, createFocusableRef, detectBrowser, detectDeviceType, detectOS, detectTouch, getUserAgentBrowser, getUserAgentOS, isBrowser, useDOMRef, useFocusableRef, useSyncRef } from './dom.js';
+export { ShapeType, getCSSStyleVal, getRealShape } from './dimensions.js';
 import 'react';
+import '@react-types/shared';

dist/index.js

@@ -31,6 +31,21 @@ "use client";
   assignRef: () => assignRef,
+  canUseDOM: () => canUseDOM,
   createContext: () => createContext2,
+  createDOMRef: () => createDOMRef,
+  createFocusableRef: () => createFocusableRef,
+  detectBrowser: () => detectBrowser,
+  detectDeviceType: () => detectDeviceType,
+  detectOS: () => detectOS,
+  detectTouch: () => detectTouch,
+  getCSSStyleVal: () => getCSSStyleVal,
+  getRealShape: () => getRealShape,
+  getUserAgentBrowser: () => getUserAgentBrowser,
+  getUserAgentOS: () => getUserAgentOS,
   getValidChildren: () => getValidChildren,
+  isBrowser: () => isBrowser,
   mergeRefs: () => mergeRefs,
-  pickChildren: () => pickChildren
+  pickChildren: () => pickChildren,
+  useDOMRef: () => useDOMRef,
+  useFocusableRef: () => useFocusableRef,
+  useSyncRef: () => useSyncRef
 });
@@ -105,9 +120,158 @@ module.exports = __toCommonJS(src_exports);
 }
+
+// src/dom.ts
+var import_react2 = require("react");
+function canUseDOM() {
+  return !!(typeof window !== "undefined" && window.document && window.document.createElement);
+}
+var isBrowser = canUseDOM();
+function getUserAgentBrowser(navigator) {
+  const { userAgent: ua, vendor } = navigator;
+  const android = /(android)/i.test(ua);
+  switch (true) {
+    case /CriOS/.test(ua):
+      return "Chrome for iOS";
+    case /Edg\//.test(ua):
+      return "Edge";
+    case (android && /Silk\//.test(ua)):
+      return "Silk";
+    case (/Chrome/.test(ua) && /Google Inc/.test(vendor)):
+      return "Chrome";
+    case /Firefox\/\d+\.\d+$/.test(ua):
+      return "Firefox";
+    case android:
+      return "AOSP";
+    case /MSIE|Trident/.test(ua):
+      return "IE";
+    case (/Safari/.test(navigator.userAgent) && /Apple Computer/.test(ua)):
+      return "Safari";
+    case /AppleWebKit/.test(ua):
+      return "WebKit";
+    default:
+      return null;
+  }
+}
+function getUserAgentOS(navigator) {
+  const { userAgent: ua, platform } = navigator;
+  switch (true) {
+    case /Android/.test(ua):
+      return "Android";
+    case /iPhone|iPad|iPod/.test(platform):
+      return "iOS";
+    case /Win/.test(platform):
+      return "Windows";
+    case /Mac/.test(platform):
+      return "Mac";
+    case /CrOS/.test(ua):
+      return "Chrome OS";
+    case /Firefox/.test(ua):
+      return "Firefox OS";
+    default:
+      return null;
+  }
+}
+function detectDeviceType(navigator) {
+  const { userAgent: ua } = navigator;
+  if (/(tablet)|(iPad)|(Nexus 9)/i.test(ua))
+    return "tablet";
+  if (/(mobi)/i.test(ua))
+    return "phone";
+  return "desktop";
+}
+function detectOS(os) {
+  if (!isBrowser)
+    return false;
+  return getUserAgentOS(window.navigator) === os;
+}
+function detectBrowser(browser) {
+  if (!isBrowser)
+    return false;
+  return getUserAgentBrowser(window.navigator) === browser;
+}
+function detectTouch() {
+  if (!isBrowser)
+    return false;
+  return window.ontouchstart === null && window.ontouchmove === null && window.ontouchend === null;
+}
+function createDOMRef(ref) {
+  return {
+    UNSAFE_getDOMNode() {
+      return ref.current;
+    }
+  };
+}
+function createFocusableRef(domRef, focusableRef = domRef) {
+  return {
+    ...createDOMRef(domRef),
+    focus() {
+      if (focusableRef.current) {
+        focusableRef.current.focus();
+      }
+    }
+  };
+}
+function useDOMRef(ref) {
+  const domRef = (0, import_react2.useRef)(null);
+  (0, import_react2.useImperativeHandle)(ref, () => domRef.current);
+  return domRef;
+}
+function useFocusableRef(ref, focusableRef) {
+  const domRef = (0, import_react2.useRef)(null);
+  (0, import_react2.useImperativeHandle)(ref, () => createFocusableRef(domRef, focusableRef));
+  return domRef;
+}
+function useSyncRef(context, ref) {
+  (0, import_react2.useLayoutEffect)(() => {
+    if (context && context.ref && ref && ref.current) {
+      context.ref.current = ref.current;
+      return () => {
+        var _a;
+        if ((_a = context.ref) == null ? void 0 : _a.current) {
+          context.ref.current = null;
+        }
+      };
+    }
+  }, [context, ref]);
+}
+
+// src/dimensions.ts
+var getCSSStyleVal = (str, parentNum) => {
+  if (!str)
+    return 0;
+  const strVal = str.includes("px") ? +str.split("px")[0] : str.includes("%") ? +str.split("%")[0] * parentNum * 0.01 : str;
+  return Number.isNaN(+strVal) ? 0 : +strVal;
+};
+var getRealShape = (el) => {
+  const defaultShape = { width: 0, height: 0 };
+  if (!el || typeof window === "undefined")
+    return defaultShape;
+  const rect = el.getBoundingClientRect();
+  const { width, height } = window.getComputedStyle(el);
+  return {
+    width: getCSSStyleVal(`${width}`, rect.width),
+    height: getCSSStyleVal(`${height}`, rect.height)
+  };
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   assignRef,
+  canUseDOM,
   createContext,
+  createDOMRef,
+  createFocusableRef,
+  detectBrowser,
+  detectDeviceType,
+  detectOS,
+  detectTouch,
+  getCSSStyleVal,
+  getRealShape,
+  getUserAgentBrowser,
+  getUserAgentOS,
   getValidChildren,
+  isBrowser,
   mergeRefs,
-  pickChildren
+  pickChildren,
+  useDOMRef,
+  useFocusableRef,
+  useSyncRef
 });

package.json

 {
   "name": "@nextui-org/react-utils",
-  "version": "0.0.0-dev-v2-20230613212244",
+  "version": "0.0.0-dev-v2-20230613214509",
   "description": "A set of utilities for react on client side",
@@ -31,3 +31,3 @@ "keywords": [
   "dependencies": {
-    "@nextui-org/shared-utils": "0.0.0-dev-v2-20230613212244"
+    "@nextui-org/shared-utils": "0.0.0-dev-v2-20230613214509"
   },
@@ -34,0 +34,0 @@ "devDependencies": {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

35429

increased by113.36%

Number of package files

26

increased by44.44%

Lines of code

1084

increased by144.14%

Number of medium supply chain risk alerts

0

decreased by-100%

Dependency changes

• + Added@nextui-org/shared-utils@0.0.0-dev-v2-20230613214509(transitive)

• - Removed@nextui-org/shared-utils@0.0.0-dev-v2-20230613212244(transitive)

• Updated@nextui-org/shared-utils@0.0.0-dev-v2-20230613214509