From bb468912831e46b2bfd9db7d002e85dd4d90902e Mon Sep 17 00:00:00 2001 From: O!dinu Date: Wed, 7 Feb 2024 19:00:22 +0530 Subject: [PATCH 1/6] Update README.md modified the URL to parent website, to write location --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index b087ce8..f35375c 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # React Log Viewer -Live docs available on [patternfly.org](https://www.patternfly.org/v4/extensions/log-viewer) +Live docs available on [patternfly.org](https://www.patternfly.org/extensions/log-viewer) To run the documentation locally, clone this repo and run: ```bash From 1b4cbb42df3c4b2cb83c703f0b0b18f7062a5fbd Mon Sep 17 00:00:00 2001 From: Paul van Dyk <39598117+paul-vd@users.noreply.github.com> Date: Sun, 9 Jun 2024 10:08:24 +0200 Subject: [PATCH 2/6] expose `LogViewerProps` Allows to reuse the props in extracted logic. --- packages/module/src/LogViewer/LogViewer.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/module/src/LogViewer/LogViewer.tsx b/packages/module/src/LogViewer/LogViewer.tsx index 127f101..7193f86 100644 --- a/packages/module/src/LogViewer/LogViewer.tsx +++ b/packages/module/src/LogViewer/LogViewer.tsx @@ -7,7 +7,7 @@ import { VariableSizeList as List, areEqual } from '../react-window'; import styles from '@patternfly/react-styles/css/components/LogViewer/log-viewer'; import AnsiUp from '../ansi_up/ansi_up'; -interface LogViewerProps { +export interface LogViewerProps { /** String or String Array data being sent by the consumer*/ data?: string | string[]; /** Consumer may turn off the visibility on the toolbar */ From fdf6b7a982bc2d5b941f744c32ef2ad7cbf3f703 Mon Sep 17 00:00:00 2001 From: HarpalSingh7395 Date: Tue, 2 Jul 2024 22:29:23 -0400 Subject: [PATCH 3/6] Fixed full screen react demo glitch. --- .../demos/ComplexToolbarLogViewer.jsx | 25 +++++++++++++++++++ .../extensions/log-viewer/react-demos.js | 2 +- 2 files changed, 26 insertions(+), 1 deletion(-) diff --git a/packages/module/patternfly-docs/content/extensions/react-log-viewer/demos/ComplexToolbarLogViewer.jsx b/packages/module/patternfly-docs/content/extensions/react-log-viewer/demos/ComplexToolbarLogViewer.jsx index 8148608..47d47f7 100644 --- a/packages/module/patternfly-docs/content/extensions/react-log-viewer/demos/ComplexToolbarLogViewer.jsx +++ b/packages/module/patternfly-docs/content/extensions/react-log-viewer/demos/ComplexToolbarLogViewer.jsx @@ -74,6 +74,31 @@ const ComplexToolbarLogViewer = () => { } }, [isPaused, buffer]); + //Listening escape key on full screen mode. + React.useEffect(() => { + const handleFullscreenChange = () => { + const isFullscreen = + document.fullscreenElement || + document.mozFullScreenElement || + document.webkitFullscreenElement || + document.msFullscreenElement; + + setIsFullScreen(!!isFullscreen); + }; + + document.addEventListener('fullscreenchange', handleFullscreenChange); + document.addEventListener('mozfullscreenchange', handleFullscreenChange); + document.addEventListener('webkitfullscreenchange', handleFullscreenChange); + document.addEventListener('msfullscreenchange', handleFullscreenChange); + + return () => { + document.removeEventListener('fullscreenchange', handleFullscreenChange); + document.removeEventListener('mozfullscreenchange', handleFullscreenChange); + document.removeEventListener('webkitfullscreenchange', handleFullscreenChange); + document.removeEventListener('msfullscreenchange', handleFullscreenChange); + }; + }, []); + const onExpandClick = _event => { const element = document.querySelector('#complex-toolbar-demo'); diff --git a/packages/module/patternfly-docs/generated/extensions/log-viewer/react-demos.js b/packages/module/patternfly-docs/generated/extensions/log-viewer/react-demos.js index 45d6115..c180e9d 100644 --- a/packages/module/patternfly-docs/generated/extensions/log-viewer/react-demos.js +++ b/packages/module/patternfly-docs/generated/extensions/log-viewer/react-demos.js @@ -65,7 +65,7 @@ pageData.relativeImports = { }; pageData.examples = { 'With complex toolbar': props => - {\n const dataSources = {\n 'container-1': { type: 'C', id: 'data1' },\n 'container-2': { type: 'D', id: 'data2' },\n 'container-3': { type: 'E', id: 'data3' }\n };\n const [isPaused, setIsPaused] = React.useState(false);\n const [isFullScreen, setIsFullScreen] = React.useState(false);\n const [itemCount, setItemCount] = React.useState(1);\n const [currentItemCount, setCurrentItemCount] = React.useState(0);\n const [renderData, setRenderData] = React.useState('');\n const [selectedDataSource, setSelectedDataSource] = React.useState('container-1');\n const [selectDataSourceOpen, setSelectDataSourceOpen] = React.useState(false);\n const [timer, setTimer] = React.useState(null);\n const [selectedData, setSelectedData] = React.useState(data[dataSources[selectedDataSource].id].split('\\n'));\n const [buffer, setBuffer] = React.useState([]);\n const [linesBehind, setLinesBehind] = React.useState(0);\n const logViewerRef = React.useRef();\n\n React.useEffect(() => {\n setTimer(\n window.setInterval(() => {\n setItemCount(itemCount => itemCount + 1);\n }, 500)\n );\n return () => {\n window.clearInterval(timer);\n };\n }, []);\n\n React.useEffect(() => {\n if (itemCount > selectedData.length) {\n window.clearInterval(timer);\n } else {\n setBuffer(selectedData.slice(0, itemCount));\n }\n }, [itemCount]);\n\n React.useEffect(() => {\n if (!isPaused && buffer.length > 0) {\n setCurrentItemCount(buffer.length);\n setRenderData(buffer.join('\\n'));\n if (logViewerRef && logViewerRef.current) {\n logViewerRef.current.scrollToBottom();\n }\n } else if (buffer.length !== currentItemCount) {\n setLinesBehind(buffer.length - currentItemCount);\n } else {\n setLinesBehind(0);\n }\n }, [isPaused, buffer]);\n\n const onExpandClick = _event => {\n const element = document.querySelector('#complex-toolbar-demo');\n\n if (!isFullScreen) {\n if (element.requestFullscreen) {\n element.requestFullscreen();\n } else if (element.mozRequestFullScreen) {\n element.mozRequestFullScreen();\n } else if (element.webkitRequestFullScreen) {\n element.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);\n }\n setIsFullScreen(true);\n } else {\n if (document.exitFullscreen) {\n document.exitFullscreen();\n } else if (document.webkitExitFullscreen) {\n /* Safari */\n document.webkitExitFullscreen();\n } else if (document.msExitFullscreen) {\n /* IE11 */\n document.msExitFullscreen();\n }\n setIsFullScreen(false);\n }\n };\n\n const onDownloadClick = () => {\n const element = document.createElement('a');\n const dataToDownload = [data[dataSources[selectedDataSource].id]];\n const file = new Blob(dataToDownload, { type: 'text/plain' });\n element.href = URL.createObjectURL(file);\n element.download = `${selectedDataSource}.txt`;\n document.body.appendChild(element);\n element.click();\n document.body.removeChild(element);\n };\n\n const onScroll = ({ scrollOffsetToBottom, _scrollDirection, scrollUpdateWasRequested }) => {\n if (!scrollUpdateWasRequested) {\n if (scrollOffsetToBottom > 0) {\n setIsPaused(true);\n } else {\n setIsPaused(false);\n }\n }\n };\n\n const selectDataSourceMenu = Object.entries(dataSources).map(([value, { type }]) => (\n \n {type}\n {` ${value}`}\n \n ));\n\n const selectDataSourcePlaceholder = (\n \n {dataSources[selectedDataSource].type}\n {` ${selectedDataSource}`}\n \n );\n\n const ControlButton = () => (\n {\n setIsPaused(!isPaused);\n }}\n >\n {isPaused ? : }\n {isPaused ? ` Resume Log` : ` Pause Log`}\n \n );\n \n const leftAlignedToolbarGroup = (\n \n } breakpoint=\"md\">\n \n setSelectDataSourceOpen(isOpen)}\n onSelect={(event, selection) => {\n setSelectDataSourceOpen(false);\n setSelectedDataSource(selection);\n setSelectedData(data[dataSources[selection].id].split('\\n'));\n setLinesBehind(0);\n setBuffer([]);\n setItemCount(1);\n setCurrentItemCount(0);\n }}\n selections={selectedDataSource}\n isOpen={selectDataSourceOpen}\n placeholderText={selectDataSourcePlaceholder}\n >\n {selectDataSourceMenu}\n \n \n \n setIsPaused(true)} placeholder=\"Search\" />\n \n \n \n \n \n \n );\n\n const rightAlignedToolbarGroup = (\n \n \n \n Download}>\n \n \n \n \n Expand}>\n \n \n \n \n \n );\n\n const FooterButton = () => {\n const handleClick = _e => {\n setIsPaused(false);\n };\n return (\n \n );\n };\n return (\n \n \n {leftAlignedToolbarGroup}\n {rightAlignedToolbarGroup}\n \n \n }\n overScanCount={10}\n footer={isPaused && }\n onScroll={onScroll}\n />\n );\n};\n\nexport default ComplexToolbarLogViewer;","title":"With complex toolbar","lang":"js"}}> + {\n const dataSources = {\n 'container-1': { type: 'C', id: 'data1' },\n 'container-2': { type: 'D', id: 'data2' },\n 'container-3': { type: 'E', id: 'data3' }\n };\n const [isPaused, setIsPaused] = React.useState(false);\n const [isFullScreen, setIsFullScreen] = React.useState(false);\n const [itemCount, setItemCount] = React.useState(1);\n const [currentItemCount, setCurrentItemCount] = React.useState(0);\n const [renderData, setRenderData] = React.useState('');\n const [selectedDataSource, setSelectedDataSource] = React.useState('container-1');\n const [selectDataSourceOpen, setSelectDataSourceOpen] = React.useState(false);\n const [timer, setTimer] = React.useState(null);\n const [selectedData, setSelectedData] = React.useState(data[dataSources[selectedDataSource].id].split('\\n'));\n const [buffer, setBuffer] = React.useState([]);\n const [linesBehind, setLinesBehind] = React.useState(0);\n const logViewerRef = React.useRef();\n\n React.useEffect(() => {\n setTimer(\n window.setInterval(() => {\n setItemCount(itemCount => itemCount + 1);\n }, 500)\n );\n return () => {\n window.clearInterval(timer);\n };\n }, []);\n\n React.useEffect(() => {\n if (itemCount > selectedData.length) {\n window.clearInterval(timer);\n } else {\n setBuffer(selectedData.slice(0, itemCount));\n }\n }, [itemCount]);\n\n React.useEffect(() => {\n if (!isPaused && buffer.length > 0) {\n setCurrentItemCount(buffer.length);\n setRenderData(buffer.join('\\n'));\n if (logViewerRef && logViewerRef.current) {\n logViewerRef.current.scrollToBottom();\n }\n } else if (buffer.length !== currentItemCount) {\n setLinesBehind(buffer.length - currentItemCount);\n } else {\n setLinesBehind(0);\n }\n }, [isPaused, buffer]);\n\n //Listening escape key on full screen mode.\n React.useEffect(() => {\n const handleFullscreenChange = () => {\n const isFullscreen =\n document.fullscreenElement ||\n document.mozFullScreenElement ||\n document.webkitFullscreenElement ||\n document.msFullscreenElement;\n\n setIsFullScreen(!!isFullscreen);\n };\n\n document.addEventListener('fullscreenchange', handleFullscreenChange);\n document.addEventListener('mozfullscreenchange', handleFullscreenChange);\n document.addEventListener('webkitfullscreenchange', handleFullscreenChange);\n document.addEventListener('msfullscreenchange', handleFullscreenChange);\n\n return () => {\n document.removeEventListener('fullscreenchange', handleFullscreenChange);\n document.removeEventListener('mozfullscreenchange', handleFullscreenChange);\n document.removeEventListener('webkitfullscreenchange', handleFullscreenChange);\n document.removeEventListener('msfullscreenchange', handleFullscreenChange);\n };\n }, []);\n\n const onExpandClick = _event => {\n const element = document.querySelector('#complex-toolbar-demo');\n\n if (!isFullScreen) {\n if (element.requestFullscreen) {\n element.requestFullscreen();\n } else if (element.mozRequestFullScreen) {\n element.mozRequestFullScreen();\n } else if (element.webkitRequestFullScreen) {\n element.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);\n }\n setIsFullScreen(true);\n } else {\n if (document.exitFullscreen) {\n document.exitFullscreen();\n } else if (document.webkitExitFullscreen) {\n /* Safari */\n document.webkitExitFullscreen();\n } else if (document.msExitFullscreen) {\n /* IE11 */\n document.msExitFullscreen();\n }\n setIsFullScreen(false);\n }\n };\n\n const onDownloadClick = () => {\n const element = document.createElement('a');\n const dataToDownload = [data[dataSources[selectedDataSource].id]];\n const file = new Blob(dataToDownload, { type: 'text/plain' });\n element.href = URL.createObjectURL(file);\n element.download = `${selectedDataSource}.txt`;\n document.body.appendChild(element);\n element.click();\n document.body.removeChild(element);\n };\n\n const onScroll = ({ scrollOffsetToBottom, _scrollDirection, scrollUpdateWasRequested }) => {\n if (!scrollUpdateWasRequested) {\n if (scrollOffsetToBottom > 0) {\n setIsPaused(true);\n } else {\n setIsPaused(false);\n }\n }\n };\n\n const selectDataSourceMenu = Object.entries(dataSources).map(([value, { type }]) => (\n \n {type}\n {` ${value}`}\n \n ));\n\n const selectDataSourcePlaceholder = (\n \n {dataSources[selectedDataSource].type}\n {` ${selectedDataSource}`}\n \n );\n\n const ControlButton = () => (\n {\n setIsPaused(!isPaused);\n }}\n >\n {isPaused ? : }\n {isPaused ? ` Resume Log` : ` Pause Log`}\n \n );\n \n const leftAlignedToolbarGroup = (\n \n } breakpoint=\"md\">\n \n setSelectDataSourceOpen(isOpen)}\n onSelect={(event, selection) => {\n setSelectDataSourceOpen(false);\n setSelectedDataSource(selection);\n setSelectedData(data[dataSources[selection].id].split('\\n'));\n setLinesBehind(0);\n setBuffer([]);\n setItemCount(1);\n setCurrentItemCount(0);\n }}\n selections={selectedDataSource}\n isOpen={selectDataSourceOpen}\n placeholderText={selectDataSourcePlaceholder}\n >\n {selectDataSourceMenu}\n \n \n \n setIsPaused(true)} placeholder=\"Search\" />\n \n \n \n \n \n \n );\n\n const rightAlignedToolbarGroup = (\n \n \n \n Download}>\n \n \n \n \n Expand}>\n \n \n \n \n \n );\n\n const FooterButton = () => {\n const handleClick = _e => {\n setIsPaused(false);\n };\n return (\n \n );\n };\n return (\n \n \n {leftAlignedToolbarGroup}\n {rightAlignedToolbarGroup}\n \n \n }\n overScanCount={10}\n footer={isPaused && }\n onScroll={onScroll}\n />\n );\n};\n\nexport default ComplexToolbarLogViewer;","title":"With complex toolbar","lang":"js"}}> }; From b0b13c72607987135b8ab49a8951669dc0613803 Mon Sep 17 00:00:00 2001 From: HarpalSingh7395 Date: Wed, 3 Jul 2024 16:51:39 -0400 Subject: [PATCH 4/6] Fixed linting issue. --- .../react-log-viewer/demos/ComplexToolbarLogViewer.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/module/patternfly-docs/content/extensions/react-log-viewer/demos/ComplexToolbarLogViewer.jsx b/packages/module/patternfly-docs/content/extensions/react-log-viewer/demos/ComplexToolbarLogViewer.jsx index 47d47f7..5a4a6d3 100644 --- a/packages/module/patternfly-docs/content/extensions/react-log-viewer/demos/ComplexToolbarLogViewer.jsx +++ b/packages/module/patternfly-docs/content/extensions/react-log-viewer/demos/ComplexToolbarLogViewer.jsx @@ -74,7 +74,7 @@ const ComplexToolbarLogViewer = () => { } }, [isPaused, buffer]); - //Listening escape key on full screen mode. + // Listening escape key on full screen mode. React.useEffect(() => { const handleFullscreenChange = () => { const isFullscreen = From 9a8a6e8bc91b1de4a64f96d5a8ae9e54a19c8413 Mon Sep 17 00:00:00 2001 From: Donald Labaj Date: Wed, 17 Jul 2024 10:33:11 -0400 Subject: [PATCH 5/6] fix(build): Update README.md to start a new build. --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index f35375c..d9e964c 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,7 @@ # React Log Viewer Live docs available on [patternfly.org](https://www.patternfly.org/extensions/log-viewer) - + To run the documentation locally, clone this repo and run: ```bash yarn install && yarn build && yarn start From acf54a287ce14f4741f4a50eb1c92ce472d1235c Mon Sep 17 00:00:00 2001 From: Donald Labaj Date: Tue, 30 Jul 2024 18:24:00 -0400 Subject: [PATCH 6/6] feat(beta): Updated to latest beta version and merged main into v6. --- package.json | 29 ++--- packages/module/package.json | 14 +-- .../log-viewer/design-guidelines.js | 14 +-- .../extensions/log-viewer/react-demos.js | 2 +- .../generated/extensions/log-viewer/react.js | 2 +- yarn.lock | 109 +++++++++--------- 6 files changed, 88 insertions(+), 82 deletions(-) diff --git a/package.json b/package.json index 66918d9..1aefce6 100644 --- a/package.json +++ b/package.json @@ -22,9 +22,15 @@ "serve:a11y": "yarn workspace @patternfly/react-log-viewer serve:a11y" }, "devDependencies": { - "react": "^18", - "react-dom": "^18", - "typescript": "^4.7.4", + "@babel/core": "^7.19.6", + "@babel/preset-env": "^7.19.4", + "@babel/preset-react": "^7.18.6", + "@babel/preset-flow": "^7.18.6", + "@babel/preset-typescript": "^7.18.6", + "@testing-library/react": "^13.4.0", + "@testing-library/user-event": "14.4.3", + "@testing-library/jest-dom": "5.16.5", + "@testing-library/dom": "9.0.0", "@typescript-eslint/eslint-plugin": "^5.42.0", "@typescript-eslint/parser": "^5.42.0", "@types/react": "^18", @@ -43,18 +49,13 @@ "prettier": "2.7.1", "jest": "^29.2.2", "babel-jest": "^29.2.2", - "@babel/core": "^7.19.6", - "@babel/preset-env": "^7.19.4", - "@babel/preset-react": "^7.18.6", - "@babel/preset-flow": "^7.18.6", - "@babel/preset-typescript": "^7.18.6", - "@testing-library/react":"^13.4.0", - "@testing-library/user-event": "14.4.3", - "@testing-library/jest-dom":"5.16.5", - "@testing-library/dom": "9.0.0", "jest-environment-jsdom": "^29.2.2", "jest-canvas-mock": "^2.4.0", + "react": "^18", + "react-dom": "^18", + "rimraf": "^2.6.2", "serve": "^14.1.2", - "rimraf": "^2.6.2" - } + "typescript": "^4.7.4" + }, + "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e" } diff --git a/packages/module/package.json b/packages/module/package.json index ee2601a..22876cf 100644 --- a/packages/module/package.json +++ b/packages/module/package.json @@ -30,9 +30,9 @@ }, "homepage": "https://github.com/patternfly/react-log-viewer#readme", "dependencies": { - "@patternfly/react-core": "^6.0.0-alpha.61", - "@patternfly/react-icons": "^6.0.0-alpha.23", - "@patternfly/react-styles": "^6.0.0-alpha.23", + "@patternfly/react-core": "^6.0.0-alpha.94", + "@patternfly/react-icons": "^6.0.0-alpha.34", + "@patternfly/react-styles": "^6.0.0-alpha.33", "memoize-one": "^5.1.0" }, "peerDependencies": { @@ -40,11 +40,11 @@ "react-dom": "^17 || ^18" }, "devDependencies": { - "@patternfly/documentation-framework": "^6.0.0-alpha.41", - "@patternfly/patternfly": "6.0.0-alpha.139", - "@patternfly/react-table": "^6.0.0-alpha.61", + "@patternfly/documentation-framework": "^6.0.0-alpha.69", + "@patternfly/patternfly": "6.0.0-alpha.205", + "@patternfly/react-table": "^6.0.0-alpha.95", "@patternfly/patternfly-a11y": "^4.3.1", - "@patternfly/react-code-editor": "6.0.0-alpha.61", + "@patternfly/react-code-editor": "6.0.0-alpha.94", "resize-observer-polyfill": "^1.5.1", "tslib": "^2.0.0", "react-monaco-editor": "^0.51.0", diff --git a/packages/module/patternfly-docs/generated/extensions/log-viewer/design-guidelines.js b/packages/module/patternfly-docs/generated/extensions/log-viewer/design-guidelines.js index 28260a2..3638197 100644 --- a/packages/module/patternfly-docs/generated/extensions/log-viewer/design-guidelines.js +++ b/packages/module/patternfly-docs/generated/extensions/log-viewer/design-guidelines.js @@ -33,7 +33,7 @@ const Component = () => ( {` is a preconfigured component that gives you the option to visualize your log content. Log viewer renders log output in real time in a clear and structured way.`}

- + {`Light theme log viewer`} @@ -88,7 +88,7 @@ const Component = () => ( {` Expand log viewer to full screen.`} - + {`Dark theme log viewer`}

@@ -97,7 +97,7 @@ available. All log viewer functionality remains the same whether a light or dark

- + {`Usability`}

@@ -117,10 +117,10 @@ available. All log viewer functionality remains the same whether a light or dark {`The user shares files frequently with other users or teams.`} - + {`Log viewer functionality`} - + {`With popover`}

@@ -128,7 +128,7 @@ available. All log viewer functionality remains the same whether a light or dark

- + {`With dropdown, drilldown, and search expanded`}

@@ -136,7 +136,7 @@ available. All log viewer functionality remains the same whether a light or dark

- + {`With search results`}

diff --git a/packages/module/patternfly-docs/generated/extensions/log-viewer/react-demos.js b/packages/module/patternfly-docs/generated/extensions/log-viewer/react-demos.js index f0f7600..d721261 100644 --- a/packages/module/patternfly-docs/generated/extensions/log-viewer/react-demos.js +++ b/packages/module/patternfly-docs/generated/extensions/log-viewer/react-demos.js @@ -66,7 +66,7 @@ pageData.liveContext = { pageData.relativeImports = "import { data } from 'content/extensions/react-log-viewer/demos/../examples/realTestData';" pageData.examples = { 'With complex toolbar': props => - {\n const dataSources = {\n 'container-1': { type: 'C', id: 'data1' },\n 'container-2': { type: 'D', id: 'data2' },\n 'container-3': { type: 'E', id: 'data3' }\n };\n const [isPaused, setIsPaused] = React.useState(false);\n const [isFullScreen, setIsFullScreen] = React.useState(false);\n const [itemCount, setItemCount] = React.useState(1);\n const [currentItemCount, setCurrentItemCount] = React.useState(0);\n const [renderData, setRenderData] = React.useState('');\n const [selectedDataSource, setSelectedDataSource] = React.useState('container-1');\n const [selectDataSourceOpen, setSelectDataSourceOpen] = React.useState(false);\n const [timer, setTimer] = React.useState(null);\n const [selectedData, setSelectedData] = React.useState(data[dataSources[selectedDataSource].id].split('\\n'));\n const [buffer, setBuffer] = React.useState([]);\n const [linesBehind, setLinesBehind] = React.useState(0);\n const logViewerRef = React.useRef();\n\n React.useEffect(() => {\n setTimer(\n window.setInterval(() => {\n setItemCount(itemCount => itemCount + 1);\n }, 500)\n );\n return () => {\n window.clearInterval(timer);\n };\n }, []);\n\n React.useEffect(() => {\n if (itemCount > selectedData.length) {\n window.clearInterval(timer);\n } else {\n setBuffer(selectedData.slice(0, itemCount));\n }\n }, [itemCount]);\n\n React.useEffect(() => {\n if (!isPaused && buffer.length > 0) {\n setCurrentItemCount(buffer.length);\n setRenderData(buffer.join('\\n'));\n if (logViewerRef && logViewerRef.current) {\n logViewerRef.current.scrollToBottom();\n }\n } else if (buffer.length !== currentItemCount) {\n setLinesBehind(buffer.length - currentItemCount);\n } else {\n setLinesBehind(0);\n }\n }, [isPaused, buffer]);\n\n //Listening escape key on full screen mode.\n React.useEffect(() => {\n const handleFullscreenChange = () => {\n const isFullscreen =\n document.fullscreenElement ||\n document.mozFullScreenElement ||\n document.webkitFullscreenElement ||\n document.msFullscreenElement;\n\n setIsFullScreen(!!isFullscreen);\n };\n\n document.addEventListener('fullscreenchange', handleFullscreenChange);\n document.addEventListener('mozfullscreenchange', handleFullscreenChange);\n document.addEventListener('webkitfullscreenchange', handleFullscreenChange);\n document.addEventListener('msfullscreenchange', handleFullscreenChange);\n\n return () => {\n document.removeEventListener('fullscreenchange', handleFullscreenChange);\n document.removeEventListener('mozfullscreenchange', handleFullscreenChange);\n document.removeEventListener('webkitfullscreenchange', handleFullscreenChange);\n document.removeEventListener('msfullscreenchange', handleFullscreenChange);\n };\n }, []);\n\n const onExpandClick = _event => {\n const element = document.querySelector('#complex-toolbar-demo');\n\n if (!isFullScreen) {\n if (element.requestFullscreen) {\n element.requestFullscreen();\n } else if (element.mozRequestFullScreen) {\n element.mozRequestFullScreen();\n } else if (element.webkitRequestFullScreen) {\n element.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);\n }\n setIsFullScreen(true);\n } else {\n if (document.exitFullscreen) {\n document.exitFullscreen();\n } else if (document.webkitExitFullscreen) {\n /* Safari */\n document.webkitExitFullscreen();\n } else if (document.msExitFullscreen) {\n /* IE11 */\n document.msExitFullscreen();\n }\n setIsFullScreen(false);\n }\n };\n\n const onDownloadClick = () => {\n const element = document.createElement('a');\n const dataToDownload = [data[dataSources[selectedDataSource].id]];\n const file = new Blob(dataToDownload, { type: 'text/plain' });\n element.href = URL.createObjectURL(file);\n element.download = `${selectedDataSource}.txt`;\n document.body.appendChild(element);\n element.click();\n document.body.removeChild(element);\n };\n\n const onScroll = ({ scrollOffsetToBottom, _scrollDirection, scrollUpdateWasRequested }) => {\n if (!scrollUpdateWasRequested) {\n if (scrollOffsetToBottom > 0) {\n setIsPaused(true);\n } else {\n setIsPaused(false);\n }\n }\n };\n\n const selectDataSourceMenu = Object.entries(dataSources).map(([value, { type }]) => (\n \n {type}\n {` ${value}`}\n \n ));\n\n const selectDataSourcePlaceholder = (\n \n {dataSources[selectedDataSource].type}\n {` ${selectedDataSource}`}\n \n );\n\n const ControlButton = () => (\n {\n setIsPaused(!isPaused);\n }}\n >\n {isPaused ? : }\n {isPaused ? ` Resume Log` : ` Pause Log`}\n \n );\n \n const leftAlignedToolbarGroup = (\n \n } breakpoint=\"md\">\n \n setSelectDataSourceOpen(isOpen)}\n onSelect={(event, selection) => {\n setSelectDataSourceOpen(false);\n setSelectedDataSource(selection);\n setSelectedData(data[dataSources[selection].id].split('\\n'));\n setLinesBehind(0);\n setBuffer([]);\n setItemCount(1);\n setCurrentItemCount(0);\n }}\n selections={selectedDataSource}\n isOpen={selectDataSourceOpen}\n placeholderText={selectDataSourcePlaceholder}\n >\n {selectDataSourceMenu}\n \n \n \n setIsPaused(true)} placeholder=\"Search\" />\n \n \n \n \n \n \n );\n\n const rightAlignedToolbarGroup = (\n \n \n \n Download}>\n \n \n \n \n Expand}>\n \n \n \n \n \n );\n\n const FooterButton = () => {\n const handleClick = _e => {\n setIsPaused(false);\n };\n return (\n \n );\n };\n return (\n \n \n {leftAlignedToolbarGroup}\n {rightAlignedToolbarGroup}\n \n \n }\n overScanCount={10}\n footer={isPaused && }\n onScroll={onScroll}\n />\n );\n};\n\nexport default ComplexToolbarLogViewer;","title":"With complex toolbar","lang":"js"}}> + {\n const dataSources = {\n 'container-1': { type: 'C', id: 'data1' },\n 'container-2': { type: 'D', id: 'data2' },\n 'container-3': { type: 'E', id: 'data3' }\n };\n const [isPaused, setIsPaused] = React.useState(false);\n const [isFullScreen, setIsFullScreen] = React.useState(false);\n const [itemCount, setItemCount] = React.useState(1);\n const [currentItemCount, setCurrentItemCount] = React.useState(0);\n const [renderData, setRenderData] = React.useState('');\n const [selectedDataSource, setSelectedDataSource] = React.useState('container-1');\n const [selectDataSourceOpen, setSelectDataSourceOpen] = React.useState(false);\n const [timer, setTimer] = React.useState(null);\n const [selectedData, setSelectedData] = React.useState(data[dataSources[selectedDataSource].id].split('\\n'));\n const [buffer, setBuffer] = React.useState([]);\n const [linesBehind, setLinesBehind] = React.useState(0);\n const logViewerRef = React.useRef();\n\n React.useEffect(() => {\n setTimer(\n window.setInterval(() => {\n setItemCount((itemCount) => itemCount + 1);\n }, 500)\n );\n return () => {\n window.clearInterval(timer);\n };\n }, []);\n\n React.useEffect(() => {\n if (itemCount > selectedData.length) {\n window.clearInterval(timer);\n } else {\n setBuffer(selectedData.slice(0, itemCount));\n }\n }, [itemCount]);\n\n React.useEffect(() => {\n if (!isPaused && buffer.length > 0) {\n setCurrentItemCount(buffer.length);\n setRenderData(buffer.join('\\n'));\n if (logViewerRef && logViewerRef.current) {\n logViewerRef.current.scrollToBottom();\n }\n } else if (buffer.length !== currentItemCount) {\n setLinesBehind(buffer.length - currentItemCount);\n } else {\n setLinesBehind(0);\n }\n }, [isPaused, buffer]);\n\n // Listening escape key on full screen mode.\n React.useEffect(() => {\n const handleFullscreenChange = () => {\n const isFullscreen =\n document.fullscreenElement ||\n document.mozFullScreenElement ||\n document.webkitFullscreenElement ||\n document.msFullscreenElement;\n\n setIsFullScreen(!!isFullscreen);\n };\n\n document.addEventListener('fullscreenchange', handleFullscreenChange);\n document.addEventListener('mozfullscreenchange', handleFullscreenChange);\n document.addEventListener('webkitfullscreenchange', handleFullscreenChange);\n document.addEventListener('msfullscreenchange', handleFullscreenChange);\n\n return () => {\n document.removeEventListener('fullscreenchange', handleFullscreenChange);\n document.removeEventListener('mozfullscreenchange', handleFullscreenChange);\n document.removeEventListener('webkitfullscreenchange', handleFullscreenChange);\n document.removeEventListener('msfullscreenchange', handleFullscreenChange);\n };\n }, []);\n\n const onExpandClick = _event => {\n const element = document.querySelector('#complex-toolbar-demo');\n\n if (!isFullScreen) {\n if (element.requestFullscreen) {\n element.requestFullscreen();\n } else if (element.mozRequestFullScreen) {\n element.mozRequestFullScreen();\n } else if (element.webkitRequestFullScreen) {\n element.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);\n }\n setIsFullScreen(true);\n } else {\n if (document.exitFullscreen) {\n document.exitFullscreen();\n } else if (document.webkitExitFullscreen) {\n /* Safari */\n document.webkitExitFullscreen();\n } else if (document.msExitFullscreen) {\n /* IE11 */\n document.msExitFullscreen();\n }\n setIsFullScreen(false);\n }\n };\n\n const onDownloadClick = () => {\n const element = document.createElement('a');\n const dataToDownload = [data[dataSources[selectedDataSource].id]];\n const file = new Blob(dataToDownload, { type: 'text/plain' });\n element.href = URL.createObjectURL(file);\n element.download = `${selectedDataSource}.txt`;\n document.body.appendChild(element);\n element.click();\n document.body.removeChild(element);\n };\n\n const onToggleClick = () => {\n setSelectDataSourceOpen(!selectDataSourceOpen);\n };\n\n const onScroll = ({ scrollOffsetToBottom, _scrollDirection, scrollUpdateWasRequested }) => {\n if (!scrollUpdateWasRequested) {\n if (scrollOffsetToBottom > 0) {\n setIsPaused(true);\n } else {\n setIsPaused(false);\n }\n }\n };\n\n const selectDataSourceMenu = Object.entries(dataSources).map(([value, { type }]) => (\n \n {type}\n {` ${value}`}\n \n ));\n\n const selectDataSourcePlaceholder = (\n \n {dataSources[selectedDataSource].type}\n {` ${selectedDataSource}`}\n \n );\n\n const ControlButton = () => (\n {\n setIsPaused(!isPaused);\n }}\n icon={isPaused ? : }\n >\n {isPaused ? ` Resume Log` : ` Pause Log`}\n \n );\n\n const toggle = (toggleRef) => (\n \n {selectDataSourcePlaceholder}\n \n );\n\n const leftAlignedToolbarGroup = (\n \n } breakpoint=\"md\">\n \n setSelectDataSourceOpen(isOpen)}\n onSelect={(event, selection) => {\n setSelectDataSourceOpen(false);\n setSelectedDataSource(selection);\n setSelectedData(data[dataSources[selection].id].split('\\n'));\n setLinesBehind(0);\n setBuffer([]);\n setItemCount(1);\n setCurrentItemCount(0);\n }}\n selections={selectedDataSource}\n isOpen={selectDataSourceOpen}\n placeholderText={selectDataSourcePlaceholder}\n >\n {selectDataSourceMenu}\n \n \n \n setIsPaused(true)} placeholder=\"Search\" />\n \n \n \n \n \n \n );\n\n const rightAlignedToolbarGroup = (\n \n \n \n Download}>\n \n \n \n \n Expand}>\n \n \n \n \n \n );\n\n const FooterButton = () => {\n const handleClick = (_e) => {\n setIsPaused(false);\n };\n return (\n \n );\n };\n return (\n \n \n {leftAlignedToolbarGroup}\n {rightAlignedToolbarGroup}\n \n \n }\n overScanCount={10}\n footer={isPaused && }\n onScroll={onScroll}\n />\n );\n};\n\nexport default ComplexToolbarLogViewer;\n","title":"With complex toolbar","lang":"js","className":""}}> }; diff --git a/packages/module/patternfly-docs/generated/extensions/log-viewer/react.js b/packages/module/patternfly-docs/generated/extensions/log-viewer/react.js index d7954c3..c5b5211 100644 --- a/packages/module/patternfly-docs/generated/extensions/log-viewer/react.js +++ b/packages/module/patternfly-docs/generated/extensions/log-viewer/react.js @@ -186,7 +186,7 @@ pageData.examples = { const Component = () => ( - + {`Examples`} {React.createElement(pageData.examples["Basic"])} diff --git a/yarn.lock b/yarn.lock index 2509fda..e15390d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2388,10 +2388,10 @@ "@nodelib/fs.scandir" "2.1.5" fastq "^1.6.0" -"@patternfly/ast-helpers@^1.4.0-alpha.31": - version "1.4.0-alpha.31" - resolved "https://registry.yarnpkg.com/@patternfly/ast-helpers/-/ast-helpers-1.4.0-alpha.31.tgz#d3fa479a4a4579f49848a9db7826d65ef53dc2aa" - integrity sha512-/UsMH+OTnAP4g6Tmytj6fQ4Zgp88kMQ5Q9KZdVMiXoObN3lJiBcIrg6RrwFEej5OHx+7HA+HF/lRVm8yIMuk0g== +"@patternfly/ast-helpers@^1.4.0-alpha.58": + version "1.19.0" + resolved "https://registry.yarnpkg.com/@patternfly/ast-helpers/-/ast-helpers-1.19.0.tgz#f3eecafb2e04d73b48de2a0142b18e3fc5e230de" + integrity sha512-osD5y+q7+oO6l4GCB8MnOjBLvyRZLyHk3L3XhEGwd+HxRf1YxE/NWhSP0ATuByU7xxpCXas7OaW3fKe/KgeneA== dependencies: acorn "^8.4.1" acorn-class-fields "^1.0.0" @@ -2399,16 +2399,16 @@ acorn-static-class-features "^1.0.0" astring "^1.7.5" -"@patternfly/documentation-framework@^6.0.0-alpha.41": - version "6.0.0-alpha.42" - resolved "https://registry.yarnpkg.com/@patternfly/documentation-framework/-/documentation-framework-6.0.0-alpha.42.tgz#7220bcd2c6c23c3fb641c9c534da23f32da99573" - integrity sha512-S1Fi/tHYk2dzr+lYmY090x130TR2x2NErf2J9oE0WCZudpfVRK9XyODS2cyy7bUIVkgE5A8W05Ist79RgHJXlA== +"@patternfly/documentation-framework@^6.0.0-alpha.69": + version "6.0.0-alpha.69" + resolved "https://registry.yarnpkg.com/@patternfly/documentation-framework/-/documentation-framework-6.0.0-alpha.69.tgz#d411dd03107cf0ea7635531cc1fec9fa8b82a868" + integrity sha512-Qr28SSTzjNOy2BJSaJvBQYb9JOjuxFv49u7j4kGlY6BgMNUJoHYnGdTOVLBZgl1uvXfLhxRgkHBc4h5/smCFWQ== dependencies: "@babel/core" "^7.24.3" "@babel/preset-env" "^7.24.3" "@babel/preset-react" "^7.24.1" "@mdx-js/util" "1.6.16" - "@patternfly/ast-helpers" "^1.4.0-alpha.31" + "@patternfly/ast-helpers" "^1.4.0-alpha.58" "@reach/router" "npm:@gatsbyjs/reach-router@1.3.9" autoprefixer "9.8.6" babel-loader "^9.1.3" @@ -2481,61 +2481,61 @@ puppeteer-cluster "^0.23.0" xmldoc "^1.1.2" -"@patternfly/patternfly@6.0.0-alpha.139": - version "6.0.0-alpha.139" - resolved "https://registry.yarnpkg.com/@patternfly/patternfly/-/patternfly-6.0.0-alpha.139.tgz#417d6d3cf5e923a9cff28c99ecd8a3489fa935ff" - integrity sha512-RfM0pvIhWwaSzobKh/mjkTqYMnAdeOqC1wH9zg9zTab9GyUQdeGkRkd9gpDEQhuuN/bhNpO03W6jpaqauxfpmA== +"@patternfly/patternfly@6.0.0-alpha.205": + version "6.0.0-alpha.205" + resolved "https://registry.yarnpkg.com/@patternfly/patternfly/-/patternfly-6.0.0-alpha.205.tgz#9974f712ee69b28ec6851c6240e52c2d99969f9c" + integrity sha512-rzatApP3YpiYOHamDm+RhQpnep2AAhVodVRr3lyg6X5naiSSbPXXGWm7ShhUfftzwW4G1le1Uy0ZlM05rtQHWg== -"@patternfly/react-code-editor@6.0.0-alpha.61": - version "6.0.0-alpha.61" - resolved "https://registry.yarnpkg.com/@patternfly/react-code-editor/-/react-code-editor-6.0.0-alpha.61.tgz#b092198346516c4149aa7a9df7d65fed6d2f7bc8" - integrity sha512-dfML9T6SYNzPrLNlSqlAc3pTW1+GqYagJowLo5U+6Qea0OuLJ91+SiAiIuX1R2VTwSjEvPkgzhUonMgKkuNm+A== +"@patternfly/react-code-editor@6.0.0-alpha.94": + version "6.0.0-alpha.94" + resolved "https://registry.yarnpkg.com/@patternfly/react-code-editor/-/react-code-editor-6.0.0-alpha.94.tgz#a462ab4194f1434aa291dc2d32c802cd06cac29e" + integrity sha512-df0re3F6nscVDbq8gQF9+7pxJSQzMDfPHfmuz6lHi6oQbsyvOXn2YTgv8nMQXFtyt2XmrK5nf3Zfj4ctCv6ZeA== dependencies: "@monaco-editor/react" "^4.6.0" - "@patternfly/react-core" "^6.0.0-alpha.61" - "@patternfly/react-icons" "^6.0.0-alpha.23" - "@patternfly/react-styles" "^6.0.0-alpha.23" + "@patternfly/react-core" "^6.0.0-alpha.94" + "@patternfly/react-icons" "^6.0.0-alpha.34" + "@patternfly/react-styles" "^6.0.0-alpha.33" react-dropzone "14.2.3" tslib "^2.6.2" -"@patternfly/react-core@^6.0.0-alpha.61": - version "6.0.0-alpha.61" - resolved "https://registry.yarnpkg.com/@patternfly/react-core/-/react-core-6.0.0-alpha.61.tgz#b31305d477294a0a82960a51224336aaee34470f" - integrity sha512-rQ1xPXRpSYktFYEQ7pywWf/GconQhA+RNYd+aVAMIR6JnSDG/9Ws5yFKIHAlHROXtjLJIHgz8TmFSBM1aW0AkQ== +"@patternfly/react-core@^6.0.0-alpha.94": + version "6.0.0-alpha.94" + resolved "https://registry.yarnpkg.com/@patternfly/react-core/-/react-core-6.0.0-alpha.94.tgz#60f8811ca5ac084ae6aff87d5fe0c6e47135a7b9" + integrity sha512-E2/ulZKhMB8QHUXbonnm5Mqtbw7TW2AyfsMHHeV4RW0nn7HccZ6G+YEjo7i4ThTCdmBqU26e57tS0VUHVmYdww== dependencies: - "@patternfly/react-icons" "^6.0.0-alpha.23" - "@patternfly/react-styles" "^6.0.0-alpha.23" - "@patternfly/react-tokens" "^6.0.0-alpha.23" + "@patternfly/react-icons" "^6.0.0-alpha.34" + "@patternfly/react-styles" "^6.0.0-alpha.33" + "@patternfly/react-tokens" "^6.0.0-alpha.33" focus-trap "7.5.4" react-dropzone "^14.2.3" tslib "^2.6.2" -"@patternfly/react-icons@^6.0.0-alpha.23": - version "6.0.0-alpha.23" - resolved "https://registry.yarnpkg.com/@patternfly/react-icons/-/react-icons-6.0.0-alpha.23.tgz#3903733fb82113b41bff0669232b90e1277ed35a" - integrity sha512-OfKHrS2ZSmu9fMEBKQ2t6ZeJ/uw1y7pobxATWn08NHJvscAceiN5a76VET2+kLrHYXCpK/EYjgpTlXNmm0hZKw== - -"@patternfly/react-styles@^6.0.0-alpha.23": - version "6.0.0-alpha.23" - resolved "https://registry.yarnpkg.com/@patternfly/react-styles/-/react-styles-6.0.0-alpha.23.tgz#b4bf2fefe5a2039a466c78888475c9c533ae8f70" - integrity sha512-N8HuDF68rFRJkWVoCDSUauiOrnjcLHUFrGJGaxnjynzee+GbpHf22NS9E9xmc25CDDzICMrU/SvthocxzQowKA== - -"@patternfly/react-table@^6.0.0-alpha.61": - version "6.0.0-alpha.61" - resolved "https://registry.yarnpkg.com/@patternfly/react-table/-/react-table-6.0.0-alpha.61.tgz#4a6cfa66458236baf048b53609ac42b544934a2e" - integrity sha512-bA5rBKzuip4DPd3u9oJIlR0IrCCn+aeHwk7k1fWpFd/IbFRMkrHZQIXOOD48IARxUDjvP26BWqMbxFxLdN7Fww== - dependencies: - "@patternfly/react-core" "^6.0.0-alpha.61" - "@patternfly/react-icons" "^6.0.0-alpha.23" - "@patternfly/react-styles" "^6.0.0-alpha.23" - "@patternfly/react-tokens" "^6.0.0-alpha.23" - lodash "^4.17.19" - tslib "^2.6.2" +"@patternfly/react-icons@^6.0.0-alpha.34": + version "6.0.0-alpha.34" + resolved "https://registry.yarnpkg.com/@patternfly/react-icons/-/react-icons-6.0.0-alpha.34.tgz#4066d5bb4f66cf461aab9554d86968e0964d6ae2" + integrity sha512-YApbSfIEevWhTila9OzG6RHmbu/f+08XCUiNjTri2ZY54flvX/+GZDdt6gLzS+JQlysA6MCtzRxLgWAKh27Uew== + +"@patternfly/react-styles@^6.0.0-alpha.33": + version "6.0.0-alpha.33" + resolved "https://registry.yarnpkg.com/@patternfly/react-styles/-/react-styles-6.0.0-alpha.33.tgz#6f1035e7b3ac332cc923b618db2caf5a38793ff5" + integrity sha512-YWKYugsoMw4IdLm02d0d5gKM4RKIhF3n2DlomJ6crNQfnpb9jQhA9Zixj35LiHUrQRre97W5VA4UfSGM5zZk5w== + +"@patternfly/react-table@^6.0.0-alpha.95": + version "6.0.0-alpha.95" + resolved "https://registry.yarnpkg.com/@patternfly/react-table/-/react-table-6.0.0-alpha.95.tgz#f49568c69aafb89adb1e0fb6513e7eceebceb29d" + integrity sha512-fVq4iNojcrB4G212LNeLfCwYXWTotLPbD60+s85HkIsuaFLHM2mEToAebUm1RpYgVjO1mFq95wt/8WvSmVPzgQ== + dependencies: + "@patternfly/react-core" "^6.0.0-alpha.94" + "@patternfly/react-icons" "^6.0.0-alpha.34" + "@patternfly/react-styles" "^6.0.0-alpha.33" + "@patternfly/react-tokens" "^6.0.0-alpha.33" + lodash "^4.17.21" + tslib "^2.6.3" -"@patternfly/react-tokens@^6.0.0-alpha.23": - version "6.0.0-alpha.23" - resolved "https://registry.yarnpkg.com/@patternfly/react-tokens/-/react-tokens-6.0.0-alpha.23.tgz#ee3f5da222bf52b75d9c3f578be5885eff745ef6" - integrity sha512-YaHFiY1vxDI8rpBHY5qt6FbZV2onnvWwbxQseCN2UxDeLx2pb54ZN/sutUnie6FUm3cyKFaTwYS2zDGHZYmeMg== +"@patternfly/react-tokens@^6.0.0-alpha.33": + version "6.0.0-alpha.33" + resolved "https://registry.yarnpkg.com/@patternfly/react-tokens/-/react-tokens-6.0.0-alpha.33.tgz#a207f74dbad7943b0ac18d5abb5885bcbff1cebc" + integrity sha512-77hzWw2ODIBFFHUF+Vf3NseBEAyddWIakqZNqLc2TSoWFUOEpTd1DBtb1qb5RV3uMzKHdOtHNIh17P0Unz41KA== "@polka/url@^1.0.0-next.20": version "1.0.0-next.21" @@ -11038,6 +11038,11 @@ tslib@^2.6.2: resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.2.tgz#703ac29425e7b37cd6fd456e92404d46d1f3e4ae" integrity sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q== +tslib@^2.6.3: + version "2.6.3" + resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.3.tgz#0438f810ad7a9edcde7a241c3d80db693c8cbfe0" + integrity sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ== + tsutils@^3.21.0: version "3.21.0" resolved "https://registry.npmjs.org/tsutils/-/tsutils-3.21.0.tgz"