app-studio 0.7.8 → 0.7.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/app-studio.cjs.development.js +141 -74
- package/dist/app-studio.cjs.development.js.map +1 -1
- package/dist/app-studio.cjs.production.min.js +1 -1
- package/dist/app-studio.esm.js +141 -74
- package/dist/app-studio.esm.js.map +1 -1
- package/dist/app-studio.umd.development.js +141 -74
- package/dist/app-studio.umd.development.js.map +1 -1
- package/dist/app-studio.umd.production.min.js +1 -1
- package/dist/stories/IframeSupport.stories.d.ts +3 -0
- package/package.json +8 -1
|
@@ -1066,12 +1066,15 @@ const deepMerge = (target, source) => {
|
|
|
1066
1066
|
}
|
|
1067
1067
|
return merged;
|
|
1068
1068
|
};
|
|
1069
|
+
// Stable default references to prevent unnecessary re-renders and cache invalidation
|
|
1070
|
+
const DEFAULT_THEME_OVERRIDE = {};
|
|
1071
|
+
const DEFAULT_COLORS_OVERRIDE = {};
|
|
1069
1072
|
const ThemeProvider = _ref => {
|
|
1070
1073
|
let {
|
|
1071
|
-
theme: themeOverride =
|
|
1074
|
+
theme: themeOverride = DEFAULT_THEME_OVERRIDE,
|
|
1072
1075
|
mode: initialMode = 'light',
|
|
1073
|
-
dark: darkOverride =
|
|
1074
|
-
light: lightOverride =
|
|
1076
|
+
dark: darkOverride = DEFAULT_COLORS_OVERRIDE,
|
|
1077
|
+
light: lightOverride = DEFAULT_COLORS_OVERRIDE,
|
|
1075
1078
|
children,
|
|
1076
1079
|
strict = false,
|
|
1077
1080
|
targetWindow
|
|
@@ -1809,12 +1812,53 @@ const cssProperties = /*#__PURE__*/new Set([
|
|
|
1809
1812
|
'textJustify', 'lineClamp', 'textIndent', 'perspective']);
|
|
1810
1813
|
// Common React event handlers that should not be treated as style props
|
|
1811
1814
|
const commonEventHandlers = /*#__PURE__*/new Set(['onClick', 'onChange', 'onSubmit', 'onFocus', 'onBlur', 'onKeyDown', 'onKeyUp', 'onKeyPress', 'onMouseDown', 'onMouseUp', 'onMouseMove', 'onMouseEnter', 'onMouseLeave', 'onTouchStart', 'onTouchEnd', 'onTouchMove', 'onScroll', 'onWheel', 'onDrag', 'onDragStart', 'onDragEnd', 'onDrop']);
|
|
1815
|
+
// Non-hyphenated HTML/SVG attributes that must never be treated as style props.
|
|
1816
|
+
// Hyphenated attributes (aria-*, data-*, etc.) are caught by a prefix/hyphen check below.
|
|
1817
|
+
const htmlOnlyAttributes = /*#__PURE__*/new Set([
|
|
1818
|
+
// Accessibility
|
|
1819
|
+
'role', 'tabIndex',
|
|
1820
|
+
// Global HTML attributes
|
|
1821
|
+
'id', 'title', 'lang', 'dir', 'hidden', 'draggable', 'contentEditable', 'spellCheck', 'nonce', 'slot', 'is', 'inputMode', 'enterKeyHint', 'autofocus', 'autoFocus', 'translate',
|
|
1822
|
+
// Form attributes
|
|
1823
|
+
'autoComplete', 'name', 'disabled', 'readOnly', 'required', 'checked', 'selected', 'multiple', 'value', 'defaultValue', 'defaultChecked', 'placeholder', 'htmlFor', 'type', 'accept', 'maxLength', 'minLength', 'pattern', 'noValidate', 'formAction', 'formEncType', 'formMethod', 'formNoValidate', 'formTarget',
|
|
1824
|
+
// Link/navigation attributes
|
|
1825
|
+
'href', 'target', 'rel', 'download', 'referrerPolicy', 'integrity', 'crossOrigin',
|
|
1826
|
+
// Form container attributes
|
|
1827
|
+
'action', 'method', 'encType',
|
|
1828
|
+
// Media attributes
|
|
1829
|
+
'autoPlay', 'controls', 'loop', 'muted', 'playsInline', 'poster', 'preload', 'mediaGroup',
|
|
1830
|
+
// Image/embed attributes
|
|
1831
|
+
'loading', 'decoding', 'sizes', 'srcDoc', 'srcLang', 'srcSet', 'useMap',
|
|
1832
|
+
// Table attributes
|
|
1833
|
+
'colSpan', 'rowSpan', 'cols', 'rows', 'headers', 'scope', 'span',
|
|
1834
|
+
// Iframe/embed attributes
|
|
1835
|
+
'sandbox', 'allowFullScreen', 'frameBorder', 'scrolling', 'seamless', 'allow',
|
|
1836
|
+
// Interactive attributes
|
|
1837
|
+
'open', 'cite', 'dateTime', 'reversed', 'start', 'high', 'low', 'optimum', 'wrap', 'shape', 'size', 'summary',
|
|
1838
|
+
// Script/resource attributes
|
|
1839
|
+
'async', 'defer', 'noModule', 'charSet', 'httpEquiv', 'manifest',
|
|
1840
|
+
// Microdata/RDFa attributes
|
|
1841
|
+
'about', 'datatype', 'inlist', 'prefix', 'property', 'resource', 'typeof', 'vocab', 'itemProp', 'itemScope', 'itemType', 'itemID', 'itemRef',
|
|
1842
|
+
// Deprecated but still used
|
|
1843
|
+
'classID', 'contextMenu', 'keyParams', 'keyType', 'kind', 'label', 'list', 'profile', 'radioGroup', 'wmode', 'capture', 'challenge', 'scoped', 'step', 'form',
|
|
1844
|
+
// SVG-only attributes (not CSS properties)
|
|
1845
|
+
'viewBox', 'preserveAspectRatio', 'xmlns', 'xlinkHref', 'xmlBase', 'xmlLang', 'xmlSpace', 'd', 'pathLength', 'points', 'markerEnd', 'markerMid', 'markerStart', 'clipPathUnits', 'gradientUnits', 'gradientTransform', 'patternUnits', 'patternTransform', 'patternContentUnits', 'spreadMethod', 'startOffset', 'stdDeviation', 'stitchTiles', 'surfaceScale', 'textLength', 'lengthAdjust', 'maskUnits', 'maskContentUnits', 'filterUnits', 'primitiveUnits', 'numOctaves', 'baseFrequency', 'seed', 'result', 'in2', 'values', 'keyTimes', 'keySplines', 'repeatCount', 'repeatDur', 'calcMode', 'attributeName', 'attributeType', 'begin', 'dur', 'end', 'by']);
|
|
1812
1846
|
// Improved style prop detection
|
|
1813
1847
|
const isStyleProp = prop => {
|
|
1814
1848
|
// First check if it's a common event handler (these should never be treated as style props)
|
|
1815
1849
|
if (commonEventHandlers.has(prop)) {
|
|
1816
1850
|
return false;
|
|
1817
1851
|
}
|
|
1852
|
+
// HTML attributes should never be treated as style props
|
|
1853
|
+
if (htmlOnlyAttributes.has(prop)) {
|
|
1854
|
+
return false;
|
|
1855
|
+
}
|
|
1856
|
+
// Any prop containing a hyphen is an HTML attribute (aria-*, data-*, accept-charset, etc.)
|
|
1857
|
+
// In React, CSS properties are always camelCase — only CSS custom properties use hyphens (--*),
|
|
1858
|
+
// and data-style-* is a special convention handled separately below.
|
|
1859
|
+
if (prop.includes('-') && !prop.startsWith('--') && !prop.startsWith('data-style-')) {
|
|
1860
|
+
return false;
|
|
1861
|
+
}
|
|
1818
1862
|
// Check if it's a valid CSS property or custom style prop
|
|
1819
1863
|
if (cssProperties.has(prop) || extraKeys.has(prop) || prop.startsWith('--') || prop.startsWith('data-style-') && !includeKeys.has(prop)) {
|
|
1820
1864
|
return true;
|
|
@@ -2950,10 +2994,11 @@ const AnalyticsProvider = _ref => {
|
|
|
2950
2994
|
trackEvent,
|
|
2951
2995
|
children
|
|
2952
2996
|
} = _ref;
|
|
2997
|
+
const value = React.useMemo(() => ({
|
|
2998
|
+
trackEvent
|
|
2999
|
+
}), [trackEvent]);
|
|
2953
3000
|
return /*#__PURE__*/React__default.createElement(AnalyticsContext.Provider, {
|
|
2954
|
-
value:
|
|
2955
|
-
trackEvent
|
|
2956
|
-
}
|
|
3001
|
+
value: value
|
|
2957
3002
|
}, children);
|
|
2958
3003
|
};
|
|
2959
3004
|
|
|
@@ -2985,12 +3030,10 @@ function hashStyleProps(props) {
|
|
|
2985
3030
|
*/
|
|
2986
3031
|
function useStableStyleMemo(propsToProcess, getColor, mediaQueries, devices, manager, theme) {
|
|
2987
3032
|
const cacheRef = React.useRef(null);
|
|
2988
|
-
// Compute hash
|
|
2989
|
-
|
|
2990
|
-
|
|
2991
|
-
|
|
2992
|
-
return hashStyleProps(propsToProcess) + '|' + hash(themeHash);
|
|
2993
|
-
}, [propsToProcess, theme]);
|
|
3033
|
+
// Compute hash directly — no useMemo since propsToProcess is always a new
|
|
3034
|
+
// reference (from destructuring), so the memo deps would always change.
|
|
3035
|
+
const themeHash = theme ? JSON.stringify(theme) : '';
|
|
3036
|
+
const currentHash = hashStyleProps(propsToProcess) + '|' + hash(themeHash);
|
|
2994
3037
|
// Only recompute classes if hash changed
|
|
2995
3038
|
if (!cacheRef.current || cacheRef.current.hash !== currentHash) {
|
|
2996
3039
|
const classes = extractUtilityClasses(propsToProcess, getColor, mediaQueries, devices, manager);
|
|
@@ -3082,44 +3125,44 @@ const Element = /*#__PURE__*/React__default.memo(/*#__PURE__*/React.forwardRef((
|
|
|
3082
3125
|
};
|
|
3083
3126
|
}, [animateOut, manager]);
|
|
3084
3127
|
// Prepare props for processing (apply view/scroll timeline if needed)
|
|
3085
|
-
|
|
3086
|
-
|
|
3087
|
-
|
|
3088
|
-
|
|
3089
|
-
|
|
3090
|
-
|
|
3091
|
-
|
|
3092
|
-
|
|
3093
|
-
|
|
3094
|
-
|
|
3095
|
-
|
|
3096
|
-
|
|
3097
|
-
|
|
3098
|
-
|
|
3099
|
-
|
|
3100
|
-
|
|
3101
|
-
|
|
3102
|
-
|
|
3103
|
-
|
|
3104
|
-
}
|
|
3105
|
-
|
|
3106
|
-
|
|
3107
|
-
|
|
3108
|
-
|
|
3109
|
-
|
|
3110
|
-
|
|
3111
|
-
|
|
3112
|
-
|
|
3113
|
-
|
|
3114
|
-
|
|
3115
|
-
|
|
3116
|
-
|
|
3117
|
-
|
|
3118
|
-
|
|
3119
|
-
}
|
|
3120
|
-
|
|
3121
|
-
|
|
3122
|
-
}
|
|
3128
|
+
// No useMemo — `rest` is always a new reference from destructuring, so
|
|
3129
|
+
// memo deps would always change. useStableStyleMemo handles the real
|
|
3130
|
+
// memoization via hash-based comparison.
|
|
3131
|
+
const propsToProcess = {
|
|
3132
|
+
...rest,
|
|
3133
|
+
blend
|
|
3134
|
+
};
|
|
3135
|
+
// Apply view() timeline ONLY if animateOn='View' (not Both or Mount)
|
|
3136
|
+
if (animateOn === 'View' && propsToProcess.animate) {
|
|
3137
|
+
const animations = Array.isArray(propsToProcess.animate) ? propsToProcess.animate : [propsToProcess.animate];
|
|
3138
|
+
propsToProcess.animate = animations.map(anim => {
|
|
3139
|
+
// Only add timeline if not already specified
|
|
3140
|
+
if (!anim.timeline) {
|
|
3141
|
+
return {
|
|
3142
|
+
...anim,
|
|
3143
|
+
timeline: 'view()',
|
|
3144
|
+
range: anim.range || 'entry',
|
|
3145
|
+
fillMode: anim.fillMode || 'both'
|
|
3146
|
+
};
|
|
3147
|
+
}
|
|
3148
|
+
return anim;
|
|
3149
|
+
});
|
|
3150
|
+
}
|
|
3151
|
+
// Apply scroll() timeline if animateOn='Scroll'
|
|
3152
|
+
if (animateOn === 'Scroll' && propsToProcess.animate) {
|
|
3153
|
+
const animations = Array.isArray(propsToProcess.animate) ? propsToProcess.animate : [propsToProcess.animate];
|
|
3154
|
+
propsToProcess.animate = animations.map(anim => {
|
|
3155
|
+
// Only add timeline if not already specified
|
|
3156
|
+
if (!anim.timeline) {
|
|
3157
|
+
return {
|
|
3158
|
+
...anim,
|
|
3159
|
+
timeline: 'scroll()',
|
|
3160
|
+
fillMode: anim.fillMode || 'both'
|
|
3161
|
+
};
|
|
3162
|
+
}
|
|
3163
|
+
return anim;
|
|
3164
|
+
});
|
|
3165
|
+
}
|
|
3123
3166
|
// Use hash-based memoization for style extraction
|
|
3124
3167
|
const utilityClasses = useStableStyleMemo(propsToProcess, getColor, mediaQueries, devices, manager, theme);
|
|
3125
3168
|
const newProps = {
|
|
@@ -5041,14 +5084,28 @@ const WindowSizeProvider = _ref => {
|
|
|
5041
5084
|
width: win?.innerWidth || 0,
|
|
5042
5085
|
height: win?.innerHeight || 0
|
|
5043
5086
|
});
|
|
5087
|
+
const timeoutRef = React.useRef();
|
|
5044
5088
|
React.useEffect(() => {
|
|
5045
5089
|
if (!win) return;
|
|
5046
|
-
const handleResize = () =>
|
|
5047
|
-
|
|
5048
|
-
|
|
5049
|
-
|
|
5090
|
+
const handleResize = () => {
|
|
5091
|
+
if (timeoutRef.current) clearTimeout(timeoutRef.current);
|
|
5092
|
+
timeoutRef.current = setTimeout(() => {
|
|
5093
|
+
const newWidth = win.innerWidth;
|
|
5094
|
+
const newHeight = win.innerHeight;
|
|
5095
|
+
setSize(prev => {
|
|
5096
|
+
if (prev.width === newWidth && prev.height === newHeight) return prev;
|
|
5097
|
+
return {
|
|
5098
|
+
width: newWidth,
|
|
5099
|
+
height: newHeight
|
|
5100
|
+
};
|
|
5101
|
+
});
|
|
5102
|
+
}, 100);
|
|
5103
|
+
};
|
|
5050
5104
|
win.addEventListener('resize', handleResize);
|
|
5051
|
-
return () =>
|
|
5105
|
+
return () => {
|
|
5106
|
+
win.removeEventListener('resize', handleResize);
|
|
5107
|
+
if (timeoutRef.current) clearTimeout(timeoutRef.current);
|
|
5108
|
+
};
|
|
5052
5109
|
}, [win]);
|
|
5053
5110
|
return /*#__PURE__*/React__default.createElement(WindowSizeContext.Provider, {
|
|
5054
5111
|
value: size
|
|
@@ -5081,12 +5138,13 @@ function useActive() {
|
|
|
5081
5138
|
return [ref, active];
|
|
5082
5139
|
}
|
|
5083
5140
|
|
|
5141
|
+
const DEFAULT_CLICK_OUTSIDE_OPTIONS = {};
|
|
5084
5142
|
function useClickOutside(options) {
|
|
5085
5143
|
const [clickedOutside, setClickedOutside] = React.useState(false);
|
|
5086
5144
|
const ref = React.useRef(null);
|
|
5087
5145
|
const {
|
|
5088
5146
|
targetWindow
|
|
5089
|
-
} = options ||
|
|
5147
|
+
} = options || DEFAULT_CLICK_OUTSIDE_OPTIONS;
|
|
5090
5148
|
React.useEffect(() => {
|
|
5091
5149
|
const win = targetWindow || (typeof window !== 'undefined' ? window : null);
|
|
5092
5150
|
if (!win) return;
|
|
@@ -5106,13 +5164,14 @@ function useClickOutside(options) {
|
|
|
5106
5164
|
return [ref, clickedOutside];
|
|
5107
5165
|
}
|
|
5108
5166
|
|
|
5167
|
+
const DEFAULT_ELEMENT_POSITION_OPTIONS = {};
|
|
5109
5168
|
/**
|
|
5110
5169
|
* A React hook to determine an element's relative position within the viewport
|
|
5111
5170
|
* and where the most available space is around it within the viewport.
|
|
5112
5171
|
*/
|
|
5113
5172
|
function useElementPosition(options) {
|
|
5114
5173
|
if (options === void 0) {
|
|
5115
|
-
options =
|
|
5174
|
+
options = DEFAULT_ELEMENT_POSITION_OPTIONS;
|
|
5116
5175
|
}
|
|
5117
5176
|
const {
|
|
5118
5177
|
trackChanges = true,
|
|
@@ -5284,18 +5343,21 @@ function useKeyPress(targetKey) {
|
|
|
5284
5343
|
}
|
|
5285
5344
|
|
|
5286
5345
|
const useMount = callback => {
|
|
5346
|
+
const callbackRef = React.useRef(callback);
|
|
5347
|
+
callbackRef.current = callback;
|
|
5287
5348
|
React.useEffect(() => {
|
|
5288
|
-
|
|
5349
|
+
callbackRef.current();
|
|
5289
5350
|
}, []);
|
|
5290
5351
|
};
|
|
5291
5352
|
|
|
5353
|
+
const DEFAULT_ON_SCREEN_OPTIONS = {};
|
|
5292
5354
|
function useOnScreen(options) {
|
|
5293
5355
|
const ref = React.useRef(null);
|
|
5294
5356
|
const [isOnScreen, setOnScreen] = React.useState(false);
|
|
5295
5357
|
const {
|
|
5296
5358
|
targetWindow,
|
|
5297
5359
|
...observerOptions
|
|
5298
|
-
} = options ||
|
|
5360
|
+
} = options || DEFAULT_ON_SCREEN_OPTIONS;
|
|
5299
5361
|
React.useEffect(() => {
|
|
5300
5362
|
const node = ref.current;
|
|
5301
5363
|
if (!node) return;
|
|
@@ -5314,7 +5376,7 @@ function useOnScreen(options) {
|
|
|
5314
5376
|
return () => {
|
|
5315
5377
|
observer.disconnect();
|
|
5316
5378
|
};
|
|
5317
|
-
}, [targetWindow,
|
|
5379
|
+
}, [targetWindow, observerOptions.root, observerOptions.rootMargin, observerOptions.threshold]);
|
|
5318
5380
|
return [ref, isOnScreen];
|
|
5319
5381
|
}
|
|
5320
5382
|
|
|
@@ -5339,14 +5401,14 @@ const useBreakpoint = () => {
|
|
|
5339
5401
|
devices
|
|
5340
5402
|
} = context;
|
|
5341
5403
|
// Helper to check if current screen matches a breakpoint or device
|
|
5342
|
-
const on = s => devices[s] ? devices[s].includes(screen) : s === screen;
|
|
5343
|
-
return {
|
|
5404
|
+
const on = React.useCallback(s => devices[s] ? devices[s].includes(screen) : s === screen, [devices, screen]);
|
|
5405
|
+
return React.useMemo(() => ({
|
|
5344
5406
|
...context,
|
|
5345
5407
|
screen,
|
|
5346
5408
|
orientation,
|
|
5347
5409
|
on,
|
|
5348
5410
|
is: on
|
|
5349
|
-
};
|
|
5411
|
+
}), [context, screen, orientation, on]);
|
|
5350
5412
|
};
|
|
5351
5413
|
/**
|
|
5352
5414
|
* Hook for components that need exact window dimensions.
|
|
@@ -5377,17 +5439,21 @@ const useResponsive = () => {
|
|
|
5377
5439
|
orientation,
|
|
5378
5440
|
devices
|
|
5379
5441
|
} = context;
|
|
5380
|
-
const on = s => devices[s] ? devices[s].includes(screen) : s === screen;
|
|
5381
|
-
|
|
5442
|
+
const on = React.useCallback(s => devices[s] ? devices[s].includes(screen) : s === screen, [devices, screen]);
|
|
5443
|
+
return React.useMemo(() => ({
|
|
5382
5444
|
...context,
|
|
5383
5445
|
screen,
|
|
5384
5446
|
orientation,
|
|
5385
5447
|
on,
|
|
5386
5448
|
is: on
|
|
5387
|
-
};
|
|
5388
|
-
return result;
|
|
5449
|
+
}), [context, screen, orientation, on]);
|
|
5389
5450
|
};
|
|
5390
5451
|
|
|
5452
|
+
// Stable default references to prevent unnecessary re-renders
|
|
5453
|
+
const DEFAULT_SCROLL_OFFSET = [0, 0];
|
|
5454
|
+
const DEFAULT_SCROLL_OPTIONS = {};
|
|
5455
|
+
const DEFAULT_SCROLL_ANIMATION_OPTIONS = {};
|
|
5456
|
+
const DEFAULT_INFINITE_SCROLL_OPTIONS = {};
|
|
5391
5457
|
// Helper to check if element is a Window object (works across iframes)
|
|
5392
5458
|
const isWindow = obj => {
|
|
5393
5459
|
return obj && obj.window === obj;
|
|
@@ -5421,10 +5487,10 @@ const getScrollDimensions = element => {
|
|
|
5421
5487
|
const useScroll = function (_temp) {
|
|
5422
5488
|
let {
|
|
5423
5489
|
container,
|
|
5424
|
-
offset =
|
|
5490
|
+
offset = DEFAULT_SCROLL_OFFSET,
|
|
5425
5491
|
throttleMs = 100,
|
|
5426
5492
|
disabled = false
|
|
5427
|
-
} = _temp === void 0 ?
|
|
5493
|
+
} = _temp === void 0 ? DEFAULT_SCROLL_OPTIONS : _temp;
|
|
5428
5494
|
const [scrollPosition, setScrollPosition] = React.useState({
|
|
5429
5495
|
x: 0,
|
|
5430
5496
|
y: 0,
|
|
@@ -5563,7 +5629,7 @@ const useScroll = function (_temp) {
|
|
|
5563
5629
|
// Enhanced useScrollAnimation with callback support and iframe support
|
|
5564
5630
|
const useScrollAnimation = function (ref, options) {
|
|
5565
5631
|
if (options === void 0) {
|
|
5566
|
-
options =
|
|
5632
|
+
options = DEFAULT_SCROLL_ANIMATION_OPTIONS;
|
|
5567
5633
|
}
|
|
5568
5634
|
const [isInView, setIsInView] = React.useState(false);
|
|
5569
5635
|
const [progress, setProgress] = React.useState(0);
|
|
@@ -5631,7 +5697,7 @@ const useSmoothScroll = targetWindow => {
|
|
|
5631
5697
|
// Enhanced useInfiniteScroll with debouncing
|
|
5632
5698
|
const useInfiniteScroll = function (callback, options) {
|
|
5633
5699
|
if (options === void 0) {
|
|
5634
|
-
options =
|
|
5700
|
+
options = DEFAULT_INFINITE_SCROLL_OPTIONS;
|
|
5635
5701
|
}
|
|
5636
5702
|
const [sentinel, setSentinel] = React.useState(null);
|
|
5637
5703
|
const callbackRef = React.useRef(callback);
|
|
@@ -5726,12 +5792,13 @@ const useScrollDirection = function (threshold, targetWindow) {
|
|
|
5726
5792
|
|
|
5727
5793
|
const useWindowSize = () => React.useContext(WindowSizeContext);
|
|
5728
5794
|
|
|
5795
|
+
const DEFAULT_IN_VIEW_OPTIONS = {};
|
|
5729
5796
|
function useInView(options) {
|
|
5730
5797
|
const {
|
|
5731
5798
|
triggerOnce = false,
|
|
5732
5799
|
targetWindow,
|
|
5733
5800
|
...observerOptions
|
|
5734
|
-
} = options ||
|
|
5801
|
+
} = options || DEFAULT_IN_VIEW_OPTIONS;
|
|
5735
5802
|
const ref = React.useRef(null);
|
|
5736
5803
|
const [inView, setInView] = React.useState(false);
|
|
5737
5804
|
React.useEffect(() => {
|
|
@@ -5761,7 +5828,7 @@ function useInView(options) {
|
|
|
5761
5828
|
return () => {
|
|
5762
5829
|
observer.disconnect();
|
|
5763
5830
|
};
|
|
5764
|
-
}, [triggerOnce, targetWindow,
|
|
5831
|
+
}, [triggerOnce, targetWindow, observerOptions.root, observerOptions.rootMargin, observerOptions.threshold]);
|
|
5765
5832
|
return {
|
|
5766
5833
|
ref,
|
|
5767
5834
|
inView
|
|
@@ -5846,7 +5913,7 @@ function useIframe(iframeRef) {
|
|
|
5846
5913
|
if (!iframe) return;
|
|
5847
5914
|
const updateState = () => {
|
|
5848
5915
|
const win = iframe.contentWindow;
|
|
5849
|
-
const doc = iframe.contentDocument
|
|
5916
|
+
const doc = win?.document || iframe.contentDocument;
|
|
5850
5917
|
if (win && doc) {
|
|
5851
5918
|
setIframeWindow(win);
|
|
5852
5919
|
setIframeDocument(doc);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"app-studio.cjs.development.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"app-studio.cjs.development.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|