@nextui-org/react-utils
Advanced tools
Comparing version 0.0.0-dev-v2-20230613212244 to 0.0.0-dev-v2-20230613214509
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'; |
@@ -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 | ||
}); |
{ | ||
"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": { |
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis 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 riskPackage 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
35429
26
1084
0
+ Added@nextui-org/shared-utils@0.0.0-dev-v2-20230613214509(transitive)
- Removed@nextui-org/shared-utils@0.0.0-dev-v2-20230613212244(transitive)