@pega/cosmos-react-core 9.0.0-build.4.1 → 9.0.0-build.4.3
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.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useBreakpoint.d.ts","sourceRoot":"","sources":["../../src/hooks/useBreakpoint.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAYvC;;;;;GAKG;AACH,QAAA,MAAM,aAAa,GACjB,YAAY,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,EAC5C,6CAIG;IACD,aAAa,CAAC,EAAE,SAAS,CAAC,OAAO,CAAC,GAAG,SAAS,CAAC;IAC/C,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,aAAa,GAAG,eAAe,CAAC;CACxC,
|
|
1
|
+
{"version":3,"file":"useBreakpoint.d.ts","sourceRoot":"","sources":["../../src/hooks/useBreakpoint.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAYvC;;;;;GAKG;AACH,QAAA,MAAM,aAAa,GACjB,YAAY,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,EAC5C,6CAIG;IACD,aAAa,CAAC,EAAE,SAAS,CAAC,OAAO,CAAC,GAAG,SAAS,CAAC;IAC/C,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,aAAa,GAAG,eAAe,CAAC;CACxC,YA4EP,CAAC;AAEF,eAAe,aAAa,CAAC"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { useState, useLayoutEffect, useCallback } from 'react';
|
|
2
|
-
import { windowIsAvailable, debounce } from '../utils';
|
|
2
|
+
import { windowIsAvailable, debounce, testElForOverflow, getScrollbarWidth } from '../utils';
|
|
3
3
|
import useChToPxConversionFactor from './useChToPxConversionFactor';
|
|
4
4
|
import useTheme from './useTheme';
|
|
5
5
|
// We should be able to safely capture once as the computed root font size is unlikely to change during normal runtime.
|
|
@@ -29,8 +29,11 @@ const useBreakpoint = (breakpoint, { breakpointRef, defaultValue = false, themeP
|
|
|
29
29
|
const matchesBreakpoint = entries.some(({ target, contentRect }) => {
|
|
30
30
|
if (target !== breakpointRef.current)
|
|
31
31
|
return;
|
|
32
|
+
const scrollbarWidth = testElForOverflow(breakpointRef.current)[1]
|
|
33
|
+
? getScrollbarWidth()
|
|
34
|
+
: 0;
|
|
32
35
|
const multiplier = themeProp === 'breakpoints' ? parseFloat(rootFontSize) : chToPxConversionFactor;
|
|
33
|
-
return contentRect.width >= parseFloat(breakpointVal) * multiplier;
|
|
36
|
+
return (Math.ceil(contentRect.width + scrollbarWidth) >= parseFloat(breakpointVal) * multiplier);
|
|
34
37
|
});
|
|
35
38
|
setMatches(matchesBreakpoint);
|
|
36
39
|
}, 100);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useBreakpoint.js","sourceRoot":"","sources":["../../src/hooks/useBreakpoint.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAG/D,OAAO,EAAE,iBAAiB,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;
|
|
1
|
+
{"version":3,"file":"useBreakpoint.js","sourceRoot":"","sources":["../../src/hooks/useBreakpoint.ts"],"names":[],"mappings":"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","sourcesContent":["import { useState, useLayoutEffect, useCallback } from 'react';\nimport type { RefObject } from 'react';\n\nimport { windowIsAvailable, debounce, testElForOverflow, getScrollbarWidth } from '../utils';\n\nimport useChToPxConversionFactor from './useChToPxConversionFactor';\nimport useTheme from './useTheme';\n\n// We should be able to safely capture once as the computed root font size is unlikely to change during normal runtime.\nconst rootFontSize = windowIsAvailable\n ? window.getComputedStyle(document.documentElement).fontSize || '16px'\n : '16px';\n\n/**\n * @example const breakpointActive = useBreakpoint(breakpoint);\n * @param breakpoint The string indicator for the breakpoint that should be checked for validity.\n * @param options\n * @returns breakpointActive:: A boolean indicating if the given breakpoint is active or not. If false, the breakpoint is too big for the screen size.\n */\nconst useBreakpoint = (\n breakpoint: 'xs' | 'sm' | 'md' | 'lg' | 'xl',\n {\n breakpointRef,\n defaultValue = false,\n themeProp = 'breakpoints'\n }: {\n breakpointRef?: RefObject<Element> | undefined;\n defaultValue?: boolean;\n themeProp?: 'breakpoints' | 'content-width';\n } = {}\n) => {\n const {\n base: { breakpoints, 'content-width': contentWidth }\n } = useTheme();\n const breakpointVal =\n themeProp === 'content-width' ? contentWidth[breakpoint] : breakpoints[breakpoint];\n\n const [matches, setMatches] = useState(\n windowIsAvailable ? window.matchMedia(`(min-width: ${breakpointVal})`).matches : !!defaultValue\n );\n\n const chToPxConversionFactor = useChToPxConversionFactor();\n\n const onResize = useCallback((e: MediaQueryListEvent) => {\n setMatches(e.matches);\n }, []);\n\n useLayoutEffect(() => {\n // Breakpoint handling for contained elements\n if (breakpointRef && breakpointRef.current) {\n const debouncedResize = debounce((entries: ResizeObserverEntry[]) => {\n if (!breakpointRef.current?.checkVisibility()) return;\n const matchesBreakpoint = entries.some(({ target, contentRect }) => {\n if (target !== breakpointRef.current) return;\n\n const scrollbarWidth = testElForOverflow(breakpointRef.current)[1]\n ? getScrollbarWidth()\n : 0;\n const multiplier =\n themeProp === 'breakpoints' ? parseFloat(rootFontSize) : chToPxConversionFactor;\n return (\n Math.ceil(contentRect.width + scrollbarWidth) >= parseFloat(breakpointVal) * multiplier\n );\n });\n\n setMatches(matchesBreakpoint);\n }, 100);\n\n const observer = new ResizeObserver(debouncedResize);\n\n observer.observe(breakpointRef.current);\n\n return () => {\n observer.disconnect();\n };\n }\n\n // Breakpoint handling for viewport\n if (windowIsAvailable) {\n const mediaMatch = window.matchMedia(`(min-width: ${breakpointVal})`);\n const mediaMatchAvailable = 'addEventListener' in mediaMatch;\n const resizeHandler = debounce(() => {\n setMatches(window.innerWidth >= parseInt(breakpointVal, 10));\n }, 100);\n\n // Need to check useMatchMedia in order to support unit testing\n if (mediaMatchAvailable) {\n mediaMatch.addEventListener('change', onResize);\n setMatches(mediaMatch.matches);\n } else {\n window.addEventListener('resize', resizeHandler);\n setMatches(window.innerWidth >= parseInt(breakpointVal, 10));\n }\n\n return () => {\n // Need to check useMatchMedia in order to support unit testing\n if (mediaMatchAvailable) mediaMatch.removeEventListener('change', onResize);\n else {\n window.removeEventListener('resize', resizeHandler);\n }\n };\n }\n }, [breakpointRef?.current]);\n\n return matches;\n};\n\nexport default useBreakpoint;\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pega/cosmos-react-core",
|
|
3
|
-
"version": "9.0.0-build.4.
|
|
3
|
+
"version": "9.0.0-build.4.3",
|
|
4
4
|
"description": "Cosmos is a visual design system and UI component collection. Its goal is to empower application developers in their pursuit to create engaging and rewarding user experiences.",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE",
|
|
6
6
|
"author": "Pegasystems",
|