npm - @neo4j-ndl/react - Versions diffs - 4.9.33 → 4.9.34 - Mend

@neo4j-ndl/react 4.9.33 → 4.9.34

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.

Files changed (10) hide show

package/lib/cjs/_common/CodeBlockWrapper.js +2 -2
package/lib/cjs/_common/CodeBlockWrapper.js.map +1 -1
package/lib/cjs/code-block/CodeBlock.js +1 -1
package/lib/cjs/code-block/CodeBlock.js.map +1 -1
package/lib/esm/_common/CodeBlockWrapper.js +2 -2
package/lib/esm/_common/CodeBlockWrapper.js.map +1 -1
package/lib/esm/code-block/CodeBlock.js +1 -1
package/lib/esm/code-block/CodeBlock.js.map +1 -1
package/lib/types/_common/CodeBlockWrapper.d.ts.map +1 -1
package/package.json +1 -1

package/lib/cjs/_common/CodeBlockWrapper.js CHANGED Viewed

@@ -77,11 +77,11 @@ const CodeBlockWrapper = (_a) => {
                             'ndl-disabled': isDisabled,
                         }), style: {
                             maxWidth: `calc(100% - ${((_b = actions === null || actions === void 0 ? void 0 : actions.length) !== null && _b !== void 0 ? _b : 0) * 36 + 20}px)`,
-                        }, "data-testid": "ndl-code-block-title", children: heading })), (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('ndl-code-content-container', {
+                        }, "data-testid": "ndl-code-block-title", children: heading })), (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ndl-code-content-container', {
                             'ndl-disabled': isDisabled,
                         }), style: {
                             height: Boolean(heading) === true ? 'calc(100% - 24px - 12px)' : '100%',
-                        }, children: [(0, jsx_runtime_1.jsx)("div", { className: "ndl-code-pseudo-element" }), (0, jsx_runtime_1.jsx)("div", { ref: syntaxHighlighterWrapperRef, className: "ndl-highlight-wrapper", role: "textbox", "aria-label": "Code snippet", tabIndex: 0, children: children }), (0, jsx_runtime_1.jsx)("div", { className: "ndl-code-pseudo-element" })] })] }), (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ndl-code-block-actions', {
+                        }, children: (0, jsx_runtime_1.jsx)("div", { ref: syntaxHighlighterWrapperRef, className: "ndl-highlight-wrapper", children: children }) })] }), (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ndl-code-block-actions', {
                     'ndl-disabled': isDisabled,
                 }), children: actions === null || actions === void 0 ? void 0 : actions.map((iconButtonProps, i) => {
                     const { htmlAttributes, description } = iconButtonProps, restCleanIconButtonProps = __rest(iconButtonProps, ["htmlAttributes", "description"]);

package/lib/cjs/_common/CodeBlockWrapper.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CodeBlockWrapper.js","sourceRoot":"","sources":["../../../src/_common/CodeBlockWrapper.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,4DAAoC;AAEpC,iCAAqE;AAErE,4DAAuD;AACvD,oCAAwE;AAgBxE,MAAM,cAAc,GAAG,KAAK,CAAC;AAEtB,MAAM,gBAAgB,GAAG,CAE9B,EAeiD,EAAE,EAAE;;QAfrD,EACA,EAAE,EACF,SAAS,EACT,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,UAAU,EACV,OAAO,EACP,sBAAsB,EACtB,yBAAyB,EACzB,SAAS,EACT,KAAK,EACL,GAAG,EACH,cAAc,OAEmC,EAD9C,SAAS,cAdZ,iLAeD,CADa;IAEZ,MAAM,SAAS,GAAsB,EAAE,aAAF,EAAE,cAAF,EAAE,GAAI,cAAc,CAAC;IAE1D,MAAM,2BAA2B,GAAG,IAAA,cAAM,EAAiB,IAAI,CAAC,CAAC;IAEjE,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,IAAA,gBAAQ,EAAC,GAAG,SAAS,IAAI,CAAC,CAAC;IACzE,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,IAAA,gBAAQ,EAAC,SAAS,KAAK,SAAS,CAAC,CAAC;IAEtE,IAAA,iBAAS,EAAC,GAAG,EAAE;;QACb,IACE,CAAC,MAAA,MAAA,2BAA2B,CAAC,OAAO,0CAAE,YAAY,mCAAI,CAAC,CAAC;YACxD,CAAC,MAAA,MAAA,2BAA2B,CAAC,OAAO,0CAAE,YAAY,mCAAI,CAAC,CAAC,EACxD,CAAC;YACD,aAAa,CAAC,IAAI,CAAC,CAAC;QACtB,CAAC;aAAM,CAAC;YACN,aAAa,CAAC,KAAK,CAAC,CAAC;QACvB,CAAC;IACH,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,IAAA,uBAAe,EAAC,GAAG,EAAE;;QACnB,IAAI,SAAS,KAAK,SAAS,EAAE,CAAC;YAC5B,OAAO;QACT,CAAC;QAED,IACE,CAAC,MAAA,MAAA,2BAA2B,CAAC,OAAO,0CAAE,YAAY,mCAAI,CAAC,CAAC;YACxD,CAAC,MAAA,MAAA,2BAA2B,CAAC,OAAO,0CAAE,YAAY,mCAAI,CAAC,CAAC,EACxD,CAAC;YACD,kBAAkB,CAAC,aAAa,CAAC,CAAC;YAClC,yBAAyB,CAAC,KAAK,CAAC,CAAC;QACnC,CAAC;aAAM,CAAC;YACN,kBAAkB,CAAC,GAAG,SAAS,IAAI,CAAC,CAAC;YACrC,yBAAyB,CAAC,IAAI,CAAC,CAAC;QAClC,CAAC;IACH,CAAC,EAAE,CAAC,SAAS,EAAE,IAAI,EAAE,yBAAyB,CAAC,CAAC,CAAC;IAEjD,OAAO,CACL,wBAAC,SAAS,kBACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,oBAAU,EAAC,0BAA0B,EAAE,SAAS,CAAC,EAC5D,KAAK,kBAAI,MAAM,EAAE,eAAe,IAAK,KAAK,KACtC,SAAS,EACT,cAAc,eAElB,iCAAK,SAAS,EAAC,4BAA4B,aACxC,OAAO,CAAC,OAAO,CAAC,KAAK,IAAI,IAAI,CAC5B,gCACE,SAAS,EAAE,IAAA,oBAAU,EAAC,sBAAsB,EAAE;4BAC5C,cAAc,EAAE,UAAU;yBAC3B,CAAC,EACF,KAAK,EAAE;4BACL,QAAQ,EAAE,eAAe,CAAC,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,MAAM,mCAAI,CAAC,CAAC,GAAG,EAAE,GAAG,EAAE,KAAK;yBAC/D,iBACW,sBAAsB,YAEjC,OAAO,GACJ,CACP,EACD,~~iCACE~~,SAAS,EAAE,IAAA,oBAAU,EAAC,4BAA4B,EAAE;4BAClD,cAAc,EAAE,UAAU;yBAC3B,CAAC,EACF,KAAK,EAAE;4BACL,MAAM,EACJ,OAAO,CAAC,OAAO,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC,0BAA0B,CAAC,CAAC,CAAC,MAAM;yBAClE,~~aAGD~~,~~gCAAK,SAAS,EAAC,yBAAyB,GAAO,EAC/C,~~gCACE,GAAG,EAAE,2BAA2B,EAChC,SAAS,EAAC,uBAAuB,~~EACjC~~,~~IAAI,EAAC,SAAS,gBACH,cAAc,EACzB,~~QAAQ,~~EAAE,CAAC,YAEV,QAAQ,~~GACL,~~EAEN~~,~~gCAAK,SAAS,EAAC,yBAAyB,GAAO,IAC3C,~~IACF,EACN,gCACE,SAAS,EAAE,IAAA,oBAAU,EAAC,wBAAwB,EAAE;oBAC9C,cAAc,EAAE,UAAU;iBAC3B,CAAC,YAED,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,GAAG,CAAC,CAAC,eAAe,EAAE,CAAC,EAAE,EAAE;oBACnC,MAAM,EAAE,cAAc,EAAE,WAAW,KACjC,eAAe,EADuB,wBAAwB,UAC9D,eAAe,EADX,iCAA4D,CACjD,CAAC;oBAClB,OAAO,CACL,uBAAC,mCAAe,kBAEd,WAAW,EAAE,GAAG,WAAW,aAAX,WAAW,cAAX,WAAW,GAAI,kBAAkB,EAAE,EACnD,UAAU,EAAE,UAAU,EACtB,cAAc,kBACZ,aAAa,EAAE,qBAAqB,CAAC,EAAE,IACpC,cAAc,KAEf,wBAAwB,GAPvB,CAAC,CAQN,CACH,CAAC;gBACJ,CAAC,CAAC,GACE,EACL,sBAAsB,IAAI,CACzB,gCAAK,SAAS,EAAC,8BAA8B,YAC3C,uBAAC,mCAAe,IACd,WAAW,EAAE,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,QAAQ,EAC/C,YAAY,EAAE;wBACZ,IAAI,EAAE;4BACJ,2BAA2B,EAAE,IAAI;yBAClC;qBACF,EACD,OAAO,EAAE,GAAG,EAAE;wBACZ,IAAI,UAAU,EAAE,CAAC;4BACf,kBAAkB,CAAC,GAAG,SAAS,IAAI,CAAC,CAAC;4BACrC,aAAa,CAAC,KAAK,CAAC,CAAC;wBACvB,CAAC;6BAAM,CAAC;4BACN,kBAAkB,CAAC,aAAa,CAAC,CAAC;4BAClC,aAAa,CAAC,IAAI,CAAC,CAAC;wBACtB,CAAC;oBACH,CAAC,YAEA,UAAU,CAAC,CAAC,CAAC,uBAAC,4BAAoB,KAAG,CAAC,CAAC,CAAC,uBAAC,8BAAsB,KAAG,GACnD,GACd,CACP,KACS,CACb,CAAC;AACJ,CAAC,CAAC;~~AAlJW~~,QAAA,gBAAgB,~~oBAkJ3B~~","sourcesContent":["/*\n \n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n \n This file is part of Neo4j.\n \n Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n \n This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n \n You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n /\nimport classNames from 'classnames';\nimport type React from 'react';\nimport { useEffect, useLayoutEffect, useRef, useState } from 'react';\n\nimport { CleanIconButton } from '../clean-icon-button';\nimport { ChevronDownIconOutline, ChevronUpIconOutline } from '../icons';\nimport { type PolymorphicCommonProps } from './types';\n\nexport interface CodeBlockWrapperProps {\n maxHeight?: number;\n code: string;\n heading?: string \| React.ReactNode;\n children: React.ReactNode;\n isDisabled?: boolean;\n actions?: React.ComponentPropsWithoutRef<typeof CleanIconButton<'button'>>[];\n shouldShowExpandButton: boolean;\n setShouldShowExpandButton: React.Dispatch<React.SetStateAction<boolean>>;\n className?: string;\n style?: React.CSSProperties;\n}\n\nconst defaultElement = 'div';\n\nexport const CodeBlockWrapper = <\n T extends React.ElementType = typeof defaultElement,\n>({\n as,\n maxHeight,\n code,\n heading,\n children,\n isDisabled,\n actions,\n shouldShowExpandButton,\n setShouldShowExpandButton,\n className,\n style,\n ref,\n htmlAttributes,\n ...restProps\n}: PolymorphicCommonProps<T, CodeBlockWrapperProps>) => {\n const Component: React.ElementType = as ?? defaultElement;\n\n const syntaxHighlighterWrapperRef = useRef<HTMLDivElement>(null);\n\n const [containerHeight, setContainerHeight] = useState(`${maxHeight}px`);\n const [isExpanded, setIsExpanded] = useState(maxHeight === undefined);\n\n useEffect(() => {\n if (\n (syntaxHighlighterWrapperRef.current?.scrollHeight ?? 0) <=\n (syntaxHighlighterWrapperRef.current?.clientHeight ?? 0)\n ) {\n setIsExpanded(true);\n } else {\n setIsExpanded(false);\n }\n }, []);\n\n useLayoutEffect(() => {\n if (maxHeight === undefined) {\n return;\n }\n\n if (\n (syntaxHighlighterWrapperRef.current?.clientHeight ?? 0) >=\n (syntaxHighlighterWrapperRef.current?.scrollHeight ?? 0)\n ) {\n setContainerHeight(`fit-content`);\n setShouldShowExpandButton(false);\n } else {\n setContainerHeight(`${maxHeight}px`);\n setShouldShowExpandButton(true);\n }\n }, [maxHeight, code, setShouldShowExpandButton]);\n\n return (\n <Component\n ref={ref}\n className={classNames('ndl-code-block-container', className)}\n style={{ height: containerHeight, ...style }}\n {...restProps}\n {...htmlAttributes}\n >\n <div className=\"n-flex n-flex-col n-h-full\">\n {Boolean(heading) === true && (\n <div\n className={classNames('ndl-code-block-title', {\n 'ndl-disabled': isDisabled,\n })}\n style={{\n maxWidth: `calc(100% - ${(actions?.length ?? 0) 36 + 20}px)`,\n }}\n data-testid=\"ndl-code-block-title\"\n >\n {heading}\n </div>\n )}\n <div\n className={classNames('ndl-code-content-container', {\n 'ndl-disabled': isDisabled,\n })}\n style={{\n height:\n Boolean(heading) === true ? 'calc(100% - 24px - 12px)' : '100%',\n }}\n >\n ~~{/* Pseudo element on the left to steal the editor focus when clicking outside /}\n~~ <div ~~className=\"ndl-code-pseudo-element~~\~~"></div>\~~n ~~<div\n~~ ref={syntaxHighlighterWrapperRef}\n className=\"ndl-highlight-wrapper\"\n ~~role=\"textbox\"\n aria-label=\"Code snippet\"\n tabIndex={0}\n~~ >\n {children}\n </div>\n ~~{/ Pseudo element on the right to steal the editor focus when clicking outside */}\n <div className=\"ndl-code-pseudo-element\"></div>\n~~ </div>\n </div>\n <div\n className={classNames('ndl-code-block-actions', {\n 'ndl-disabled': isDisabled,\n })}\n >\n {actions?.map((iconButtonProps, i) => {\n const { htmlAttributes, description, ...restCleanIconButtonProps } =\n iconButtonProps;\n return (\n <CleanIconButton\n key={i}\n description={`${description ?? 'CodeBlock Action'}`}\n isDisabled={isDisabled}\n htmlAttributes={{\n 'data-testid': `ndl-action-button-${i}`,\n ...htmlAttributes,\n }}\n {...restCleanIconButtonProps}\n />\n );\n })}\n </div>\n {shouldShowExpandButton && (\n <div className=\"ndl-code-block-expand-button\">\n <CleanIconButton\n description={isExpanded ? 'Collapse' : 'Expand'}\n tooltipProps={{\n root: {\n shouldCloseOnReferenceClick: true,\n },\n }}\n onClick={() => {\n if (isExpanded) {\n setContainerHeight(`${maxHeight}px`);\n setIsExpanded(false);\n } else {\n setContainerHeight(`fit-content`);\n setIsExpanded(true);\n }\n }}\n >\n {isExpanded ? <ChevronUpIconOutline /> : <ChevronDownIconOutline />}\n </CleanIconButton>\n </div>\n )}\n </Component>\n );\n};\n"]}
1	+ {"version":3,"file":"CodeBlockWrapper.js","sourceRoot":"","sources":["../../../src/_common/CodeBlockWrapper.tsx"],"names":[],"mappings":"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","sourcesContent":["/*\n \n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n \n This file is part of Neo4j.\n \n Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n \n This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n \n You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n /\nimport classNames from 'classnames';\nimport type React from 'react';\nimport { useEffect, useLayoutEffect, useRef, useState } from 'react';\n\nimport { CleanIconButton } from '../clean-icon-button';\nimport { ChevronDownIconOutline, ChevronUpIconOutline } from '../icons';\nimport { type PolymorphicCommonProps } from './types';\n\nexport interface CodeBlockWrapperProps {\n maxHeight?: number;\n code: string;\n heading?: string \| React.ReactNode;\n children: React.ReactNode;\n isDisabled?: boolean;\n actions?: React.ComponentPropsWithoutRef<typeof CleanIconButton<'button'>>[];\n shouldShowExpandButton: boolean;\n setShouldShowExpandButton: React.Dispatch<React.SetStateAction<boolean>>;\n className?: string;\n style?: React.CSSProperties;\n}\n\nconst defaultElement = 'div';\n\nexport const CodeBlockWrapper = <\n T extends React.ElementType = typeof defaultElement,\n>({\n as,\n maxHeight,\n code,\n heading,\n children,\n isDisabled,\n actions,\n shouldShowExpandButton,\n setShouldShowExpandButton,\n className,\n style,\n ref,\n htmlAttributes,\n ...restProps\n}: PolymorphicCommonProps<T, CodeBlockWrapperProps>) => {\n const Component: React.ElementType = as ?? defaultElement;\n\n const syntaxHighlighterWrapperRef = useRef<HTMLDivElement>(null);\n\n const [containerHeight, setContainerHeight] = useState(`${maxHeight}px`);\n const [isExpanded, setIsExpanded] = useState(maxHeight === undefined);\n\n useEffect(() => {\n if (\n (syntaxHighlighterWrapperRef.current?.scrollHeight ?? 0) <=\n (syntaxHighlighterWrapperRef.current?.clientHeight ?? 0)\n ) {\n setIsExpanded(true);\n } else {\n setIsExpanded(false);\n }\n }, []);\n\n useLayoutEffect(() => {\n if (maxHeight === undefined) {\n return;\n }\n\n if (\n (syntaxHighlighterWrapperRef.current?.clientHeight ?? 0) >=\n (syntaxHighlighterWrapperRef.current?.scrollHeight ?? 0)\n ) {\n setContainerHeight(`fit-content`);\n setShouldShowExpandButton(false);\n } else {\n setContainerHeight(`${maxHeight}px`);\n setShouldShowExpandButton(true);\n }\n }, [maxHeight, code, setShouldShowExpandButton]);\n\n return (\n <Component\n ref={ref}\n className={classNames('ndl-code-block-container', className)}\n style={{ height: containerHeight, ...style }}\n {...restProps}\n {...htmlAttributes}\n >\n <div className=\"n-flex n-flex-col n-h-full\">\n {Boolean(heading) === true && (\n <div\n className={classNames('ndl-code-block-title', {\n 'ndl-disabled': isDisabled,\n })}\n style={{\n maxWidth: `calc(100% - ${(actions?.length ?? 0) 36 + 20}px)`,\n }}\n data-testid=\"ndl-code-block-title\"\n >\n {heading}\n </div>\n )}\n <div\n className={classNames('ndl-code-content-container', {\n 'ndl-disabled': isDisabled,\n })}\n style={{\n height:\n Boolean(heading) === true ? 'calc(100% - 24px - 12px)' : '100%',\n }}\n >\n <div\n ref={syntaxHighlighterWrapperRef}\n className=\"ndl-highlight-wrapper\"\n >\n {children}\n </div>\n </div>\n </div>\n <div\n className={classNames('ndl-code-block-actions', {\n 'ndl-disabled': isDisabled,\n })}\n >\n {actions?.map((iconButtonProps, i) => {\n const { htmlAttributes, description, ...restCleanIconButtonProps } =\n iconButtonProps;\n return (\n <CleanIconButton\n key={i}\n description={`${description ?? 'CodeBlock Action'}`}\n isDisabled={isDisabled}\n htmlAttributes={{\n 'data-testid': `ndl-action-button-${i}`,\n ...htmlAttributes,\n }}\n {...restCleanIconButtonProps}\n />\n );\n })}\n </div>\n {shouldShowExpandButton && (\n <div className=\"ndl-code-block-expand-button\">\n <CleanIconButton\n description={isExpanded ? 'Collapse' : 'Expand'}\n tooltipProps={{\n root: {\n shouldCloseOnReferenceClick: true,\n },\n }}\n onClick={() => {\n if (isExpanded) {\n setContainerHeight(`${maxHeight}px`);\n setIsExpanded(false);\n } else {\n setContainerHeight(`fit-content`);\n setIsExpanded(true);\n }\n }}\n >\n {isExpanded ? <ChevronUpIconOutline /> : <ChevronDownIconOutline />}\n </CleanIconButton>\n </div>\n )}\n </Component>\n );\n};\n"]}

package/lib/cjs/code-block/CodeBlock.js CHANGED Viewed

@@ -99,7 +99,7 @@ const CodeBlock = (_a) => {
                     border: 0,
                     color: 'var(--theme-color-neutral-text-default)',
                     lineHeight: '1',
-                    padding: `0 ${calculateRightPadding !== null && calculateRightPadding !== void 0 ? calculateRightPadding : 0}px 0.75em ${shouldShowLineNumbers === true ? 0 : 0.75}em`,
+                    padding: `0 ${calculateRightPadding !== null && calculateRightPadding !== void 0 ? calculateRightPadding : 0}px 0.75em 0.75em`,
                     width: 'fit-content',
                 } }),
             // Turn on 'shouldShowLineNumbers' & 'wrapLongLines' at the same time, the display is wrong

package/lib/cjs/code-block/CodeBlock.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CodeBlock.js","sourceRoot":"","sources":["../../../src/code-block/CodeBlock.tsx"],"names":[],"mappings":"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~~aAAa,qBAAqB,KAAK,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,IAAI~~;~~oBAClG~~,KAAK,EAAE,aAAa;iBACrB;YAEH,2FAA2F;YAC3F,kFAAkF;YAClF,gBAAgB;YAChB,YAAY,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,EACrC,eAAe,EAAE,qBAAqB,YAErC,IAAI,GACa,IACH,CACpB,CAAC;AACJ,CAAC,CAAC;AA9GW,QAAA,SAAS,aA8GpB","sourcesContent":["/*\n \n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n \n This file is part of Neo4j.\n \n Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n \n This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n \n You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n /\nimport type React from 'react';\nimport { useEffect, useState } from 'react';\nimport { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter';\nimport {\n base16AteliersulphurpoolLight,\n coy,\n duotoneLight,\n ghcolors,\n prism,\n solarizedlight,\n vs,\n} from 'react-syntax-highlighter/dist/cjs/styles/prism';\n\nimport { CodeBlockWrapper } from '../_common/CodeBlockWrapper';\nimport { type PolymorphicCommonProps } from '../_common/types';\nimport { type IconButton } from '../icon-button';\nimport { useNeedleTheme } from '../theme';\nimport { type LanguageProp, loadLanguage } from './code-languages';\nimport ndlCodeDark from './themes/ndl-code-dark';\nimport ndlCodeLight from './themes/ndl-code-light';\n\ninterface CodeBlockProps {\n code: string;\n isDisabled?: boolean;\n maxHeight?: number;\n language: LanguageProp \| 'text';\n shouldShowLineNumbers?: boolean;\n theme?:\n \| 'vs'\n \| 'base16-ateliersulphurpool.light'\n \| 'coy'\n \| 'duotone-light'\n \| 'ghcolors'\n \| 'prism'\n \| 'solarizedlight'\n \| 'ndl-code-dark'\n \| 'ndl-code-light';\n heading?: React.ReactNode;\n actions?: React.ComponentProps<typeof IconButton<'button'>>[];\n}\n\nexport const CodeBlock = <T extends React.ElementType = 'button'>({\n as,\n maxHeight,\n code,\n language,\n shouldShowLineNumbers,\n theme,\n heading,\n actions,\n isDisabled,\n className,\n style,\n htmlAttributes,\n ref,\n ...restProps\n}: PolymorphicCommonProps<T, CodeBlockProps>) => {\n const [shouldShowExpandButton, setShouldShowExpandButton] = useState(\n maxHeight !== undefined,\n );\n\n const { theme: ndlTheme } = useNeedleTheme();\n const [loadedLanguage, setLoadedLanguage] = useState<\n LanguageProp \| 'text' \| null\n >(null);\n\n useEffect(() => {\n if (language === undefined \|\| language === 'text') {\n setLoadedLanguage('text');\n return;\n }\n\n loadLanguage(language)\n .then((module) => {\n SyntaxHighlighter.registerLanguage(language, module.default);\n setLoadedLanguage(language);\n })\n // TODO: add visual feedback for the user\n .catch((err) => console.error(err));\n }, [language]);\n\n const getTheme = () => {\n switch (theme) {\n case 'ndl-code-dark':\n return ndlCodeDark;\n case 'ndl-code-light':\n return ndlCodeLight;\n case 'vs':\n return vs;\n case 'base16-ateliersulphurpool.light':\n return base16AteliersulphurpoolLight;\n case 'coy':\n return coy;\n case 'duotone-light':\n return duotoneLight;\n case 'ghcolors':\n return ghcolors;\n case 'prism':\n return prism;\n case 'solarizedlight':\n return solarizedlight;\n default:\n return ndlTheme === 'light' ? ndlCodeLight : ndlCodeDark;\n }\n };\n const calculateRightPadding = (() => {\n if (Boolean(heading) === false) {\n const expandButtonCount = shouldShowExpandButton ? 1 : 0;\n const actionCount = actions?.length ?? 0;\n return Math.max(actionCount 36, expandButtonCount * 36) + 8;\n }\n })();\n\n return (\n <CodeBlockWrapper\n as={as}\n className={className}\n style={style}\n ref={ref}\n maxHeight={maxHeight}\n code={code}\n heading={heading}\n isDisabled={isDisabled}\n actions={actions}\n shouldShowExpandButton={shouldShowExpandButton}\n setShouldShowExpandButton={setShouldShowExpandButton}\n {...restProps}\n {...htmlAttributes}\n >\n <SyntaxHighlighter\n language={loadedLanguage \|\| 'text'}\n style={{\n ...getTheme(),\n 'pre[class*=\"language-\"]': {\n border: 0,\n color: 'var(--theme-color-neutral-text-default)',\n lineHeight: '1',\n padding: `0 ${calculateRightPadding ?? 0}px 0.75em ~~${shouldShowLineNumbers === true ?~~ 0 ~~: 0~~.~~75}em~~`,\n width: 'fit-content',\n },\n }}\n // Turn on 'shouldShowLineNumbers' & 'wrapLongLines' at the same time, the display is wrong\n // https://github.com/react-syntax-highlighter/react-syntax-highlighter/issues/402\n // wrapLongLines\n codeTagProps={{ className: 'n-code' }}\n showLineNumbers={shouldShowLineNumbers}\n >\n {code}\n </SyntaxHighlighter>\n </CodeBlockWrapper>\n );\n};\n"]}
1	+ {"version":3,"file":"CodeBlock.js","sourceRoot":"","sources":["../../../src/code-block/CodeBlock.tsx"],"names":[],"mappings":"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","sourcesContent":["/*\n \n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n \n This file is part of Neo4j.\n \n Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n \n This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n \n You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n /\nimport type React from 'react';\nimport { useEffect, useState } from 'react';\nimport { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter';\nimport {\n base16AteliersulphurpoolLight,\n coy,\n duotoneLight,\n ghcolors,\n prism,\n solarizedlight,\n vs,\n} from 'react-syntax-highlighter/dist/cjs/styles/prism';\n\nimport { CodeBlockWrapper } from '../_common/CodeBlockWrapper';\nimport { type PolymorphicCommonProps } from '../_common/types';\nimport { type IconButton } from '../icon-button';\nimport { useNeedleTheme } from '../theme';\nimport { type LanguageProp, loadLanguage } from './code-languages';\nimport ndlCodeDark from './themes/ndl-code-dark';\nimport ndlCodeLight from './themes/ndl-code-light';\n\ninterface CodeBlockProps {\n code: string;\n isDisabled?: boolean;\n maxHeight?: number;\n language: LanguageProp \| 'text';\n shouldShowLineNumbers?: boolean;\n theme?:\n \| 'vs'\n \| 'base16-ateliersulphurpool.light'\n \| 'coy'\n \| 'duotone-light'\n \| 'ghcolors'\n \| 'prism'\n \| 'solarizedlight'\n \| 'ndl-code-dark'\n \| 'ndl-code-light';\n heading?: React.ReactNode;\n actions?: React.ComponentProps<typeof IconButton<'button'>>[];\n}\n\nexport const CodeBlock = <T extends React.ElementType = 'button'>({\n as,\n maxHeight,\n code,\n language,\n shouldShowLineNumbers,\n theme,\n heading,\n actions,\n isDisabled,\n className,\n style,\n htmlAttributes,\n ref,\n ...restProps\n}: PolymorphicCommonProps<T, CodeBlockProps>) => {\n const [shouldShowExpandButton, setShouldShowExpandButton] = useState(\n maxHeight !== undefined,\n );\n\n const { theme: ndlTheme } = useNeedleTheme();\n const [loadedLanguage, setLoadedLanguage] = useState<\n LanguageProp \| 'text' \| null\n >(null);\n\n useEffect(() => {\n if (language === undefined \|\| language === 'text') {\n setLoadedLanguage('text');\n return;\n }\n\n loadLanguage(language)\n .then((module) => {\n SyntaxHighlighter.registerLanguage(language, module.default);\n setLoadedLanguage(language);\n })\n // TODO: add visual feedback for the user\n .catch((err) => console.error(err));\n }, [language]);\n\n const getTheme = () => {\n switch (theme) {\n case 'ndl-code-dark':\n return ndlCodeDark;\n case 'ndl-code-light':\n return ndlCodeLight;\n case 'vs':\n return vs;\n case 'base16-ateliersulphurpool.light':\n return base16AteliersulphurpoolLight;\n case 'coy':\n return coy;\n case 'duotone-light':\n return duotoneLight;\n case 'ghcolors':\n return ghcolors;\n case 'prism':\n return prism;\n case 'solarizedlight':\n return solarizedlight;\n default:\n return ndlTheme === 'light' ? ndlCodeLight : ndlCodeDark;\n }\n };\n const calculateRightPadding = (() => {\n if (Boolean(heading) === false) {\n const expandButtonCount = shouldShowExpandButton ? 1 : 0;\n const actionCount = actions?.length ?? 0;\n return Math.max(actionCount 36, expandButtonCount * 36) + 8;\n }\n })();\n\n return (\n <CodeBlockWrapper\n as={as}\n className={className}\n style={style}\n ref={ref}\n maxHeight={maxHeight}\n code={code}\n heading={heading}\n isDisabled={isDisabled}\n actions={actions}\n shouldShowExpandButton={shouldShowExpandButton}\n setShouldShowExpandButton={setShouldShowExpandButton}\n {...restProps}\n {...htmlAttributes}\n >\n <SyntaxHighlighter\n language={loadedLanguage \|\| 'text'}\n style={{\n ...getTheme(),\n 'pre[class*=\"language-\"]': {\n border: 0,\n color: 'var(--theme-color-neutral-text-default)',\n lineHeight: '1',\n padding: `0 ${calculateRightPadding ?? 0}px 0.75em 0.75em`,\n width: 'fit-content',\n },\n }}\n // Turn on 'shouldShowLineNumbers' & 'wrapLongLines' at the same time, the display is wrong\n // https://github.com/react-syntax-highlighter/react-syntax-highlighter/issues/402\n // wrapLongLines\n codeTagProps={{ className: 'n-code' }}\n showLineNumbers={shouldShowLineNumbers}\n >\n {code}\n </SyntaxHighlighter>\n </CodeBlockWrapper>\n );\n};\n"]}

package/lib/esm/_common/CodeBlockWrapper.js CHANGED Viewed

@@ -71,11 +71,11 @@ export const CodeBlockWrapper = (_a) => {
                             'ndl-disabled': isDisabled,
                         }), style: {
                             maxWidth: `calc(100% - ${((_b = actions === null || actions === void 0 ? void 0 : actions.length) !== null && _b !== void 0 ? _b : 0) * 36 + 20}px)`,
-                        }, "data-testid": "ndl-code-block-title", children: heading })), _jsxs("div", { className: classNames('ndl-code-content-container', {
+                        }, "data-testid": "ndl-code-block-title", children: heading })), _jsx("div", { className: classNames('ndl-code-content-container', {
                             'ndl-disabled': isDisabled,
                         }), style: {
                             height: Boolean(heading) === true ? 'calc(100% - 24px - 12px)' : '100%',
-                        }, children: [_jsx("div", { className: "ndl-code-pseudo-element" }), _jsx("div", { ref: syntaxHighlighterWrapperRef, className: "ndl-highlight-wrapper", role: "textbox", "aria-label": "Code snippet", tabIndex: 0, children: children }), _jsx("div", { className: "ndl-code-pseudo-element" })] })] }), _jsx("div", { className: classNames('ndl-code-block-actions', {
+                        }, children: _jsx("div", { ref: syntaxHighlighterWrapperRef, className: "ndl-highlight-wrapper", children: children }) })] }), _jsx("div", { className: classNames('ndl-code-block-actions', {
                     'ndl-disabled': isDisabled,
                 }), children: actions === null || actions === void 0 ? void 0 : actions.map((iconButtonProps, i) => {
                     const { htmlAttributes, description } = iconButtonProps, restCleanIconButtonProps = __rest(iconButtonProps, ["htmlAttributes", "description"]);

package/lib/esm/_common/CodeBlockWrapper.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CodeBlockWrapper.js","sourceRoot":"","sources":["../../../src/_common/CodeBlockWrapper.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC,OAAO,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAErE,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACvD,OAAO,EAAE,sBAAsB,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;AAgBxE,MAAM,cAAc,GAAG,KAAK,CAAC;AAE7B,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAE9B,EAeiD,EAAE,EAAE;;QAfrD,EACA,EAAE,EACF,SAAS,EACT,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,UAAU,EACV,OAAO,EACP,sBAAsB,EACtB,yBAAyB,EACzB,SAAS,EACT,KAAK,EACL,GAAG,EACH,cAAc,OAEmC,EAD9C,SAAS,cAdZ,iLAeD,CADa;IAEZ,MAAM,SAAS,GAAsB,EAAE,aAAF,EAAE,cAAF,EAAE,GAAI,cAAc,CAAC;IAE1D,MAAM,2BAA2B,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAEjE,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAC,GAAG,SAAS,IAAI,CAAC,CAAC;IACzE,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,SAAS,KAAK,SAAS,CAAC,CAAC;IAEtE,SAAS,CAAC,GAAG,EAAE;;QACb,IACE,CAAC,MAAA,MAAA,2BAA2B,CAAC,OAAO,0CAAE,YAAY,mCAAI,CAAC,CAAC;YACxD,CAAC,MAAA,MAAA,2BAA2B,CAAC,OAAO,0CAAE,YAAY,mCAAI,CAAC,CAAC,EACxD,CAAC;YACD,aAAa,CAAC,IAAI,CAAC,CAAC;QACtB,CAAC;aAAM,CAAC;YACN,aAAa,CAAC,KAAK,CAAC,CAAC;QACvB,CAAC;IACH,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,eAAe,CAAC,GAAG,EAAE;;QACnB,IAAI,SAAS,KAAK,SAAS,EAAE,CAAC;YAC5B,OAAO;QACT,CAAC;QAED,IACE,CAAC,MAAA,MAAA,2BAA2B,CAAC,OAAO,0CAAE,YAAY,mCAAI,CAAC,CAAC;YACxD,CAAC,MAAA,MAAA,2BAA2B,CAAC,OAAO,0CAAE,YAAY,mCAAI,CAAC,CAAC,EACxD,CAAC;YACD,kBAAkB,CAAC,aAAa,CAAC,CAAC;YAClC,yBAAyB,CAAC,KAAK,CAAC,CAAC;QACnC,CAAC;aAAM,CAAC;YACN,kBAAkB,CAAC,GAAG,SAAS,IAAI,CAAC,CAAC;YACrC,yBAAyB,CAAC,IAAI,CAAC,CAAC;QAClC,CAAC;IACH,CAAC,EAAE,CAAC,SAAS,EAAE,IAAI,EAAE,yBAAyB,CAAC,CAAC,CAAC;IAEjD,OAAO,CACL,MAAC,SAAS,kBACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,UAAU,CAAC,0BAA0B,EAAE,SAAS,CAAC,EAC5D,KAAK,kBAAI,MAAM,EAAE,eAAe,IAAK,KAAK,KACtC,SAAS,EACT,cAAc,eAElB,eAAK,SAAS,EAAC,4BAA4B,aACxC,OAAO,CAAC,OAAO,CAAC,KAAK,IAAI,IAAI,CAC5B,cACE,SAAS,EAAE,UAAU,CAAC,sBAAsB,EAAE;4BAC5C,cAAc,EAAE,UAAU;yBAC3B,CAAC,EACF,KAAK,EAAE;4BACL,QAAQ,EAAE,eAAe,CAAC,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,MAAM,mCAAI,CAAC,CAAC,GAAG,EAAE,GAAG,EAAE,KAAK;yBAC/D,iBACW,sBAAsB,YAEjC,OAAO,GACJ,CACP,EACD,~~eACE~~,SAAS,EAAE,UAAU,CAAC,4BAA4B,EAAE;4BAClD,cAAc,EAAE,UAAU;yBAC3B,CAAC,EACF,KAAK,EAAE;4BACL,MAAM,EACJ,OAAO,CAAC,OAAO,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC,0BAA0B,CAAC,CAAC,CAAC,MAAM;yBAClE,~~aAGD~~,~~cAAK,SAAS,EAAC,yBAAyB,GAAO,EAC/C,~~cACE,GAAG,EAAE,2BAA2B,EAChC,SAAS,EAAC,uBAAuB,~~EACjC~~,~~IAAI,EAAC,SAAS,gBACH,cAAc,EACzB,~~QAAQ,~~EAAE,CAAC,YAEV,QAAQ,~~GACL,~~EAEN~~,~~cAAK,SAAS,EAAC,yBAAyB,GAAO,IAC3C,~~IACF,EACN,cACE,SAAS,EAAE,UAAU,CAAC,wBAAwB,EAAE;oBAC9C,cAAc,EAAE,UAAU;iBAC3B,CAAC,YAED,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,GAAG,CAAC,CAAC,eAAe,EAAE,CAAC,EAAE,EAAE;oBACnC,MAAM,EAAE,cAAc,EAAE,WAAW,KACjC,eAAe,EADuB,wBAAwB,UAC9D,eAAe,EADX,iCAA4D,CACjD,CAAC;oBAClB,OAAO,CACL,KAAC,eAAe,kBAEd,WAAW,EAAE,GAAG,WAAW,aAAX,WAAW,cAAX,WAAW,GAAI,kBAAkB,EAAE,EACnD,UAAU,EAAE,UAAU,EACtB,cAAc,kBACZ,aAAa,EAAE,qBAAqB,CAAC,EAAE,IACpC,cAAc,KAEf,wBAAwB,GAPvB,CAAC,CAQN,CACH,CAAC;gBACJ,CAAC,CAAC,GACE,EACL,sBAAsB,IAAI,CACzB,cAAK,SAAS,EAAC,8BAA8B,YAC3C,KAAC,eAAe,IACd,WAAW,EAAE,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,QAAQ,EAC/C,YAAY,EAAE;wBACZ,IAAI,EAAE;4BACJ,2BAA2B,EAAE,IAAI;yBAClC;qBACF,EACD,OAAO,EAAE,GAAG,EAAE;wBACZ,IAAI,UAAU,EAAE,CAAC;4BACf,kBAAkB,CAAC,GAAG,SAAS,IAAI,CAAC,CAAC;4BACrC,aAAa,CAAC,KAAK,CAAC,CAAC;wBACvB,CAAC;6BAAM,CAAC;4BACN,kBAAkB,CAAC,aAAa,CAAC,CAAC;4BAClC,aAAa,CAAC,IAAI,CAAC,CAAC;wBACtB,CAAC;oBACH,CAAC,YAEA,UAAU,CAAC,CAAC,CAAC,KAAC,oBAAoB,KAAG,CAAC,CAAC,CAAC,KAAC,sBAAsB,KAAG,GACnD,GACd,CACP,KACS,CACb,CAAC;AACJ,CAAC,CAAC","sourcesContent":["/*\n \n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n \n This file is part of Neo4j.\n \n Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n \n This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n \n You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n /\nimport classNames from 'classnames';\nimport type React from 'react';\nimport { useEffect, useLayoutEffect, useRef, useState } from 'react';\n\nimport { CleanIconButton } from '../clean-icon-button';\nimport { ChevronDownIconOutline, ChevronUpIconOutline } from '../icons';\nimport { type PolymorphicCommonProps } from './types';\n\nexport interface CodeBlockWrapperProps {\n maxHeight?: number;\n code: string;\n heading?: string \| React.ReactNode;\n children: React.ReactNode;\n isDisabled?: boolean;\n actions?: React.ComponentPropsWithoutRef<typeof CleanIconButton<'button'>>[];\n shouldShowExpandButton: boolean;\n setShouldShowExpandButton: React.Dispatch<React.SetStateAction<boolean>>;\n className?: string;\n style?: React.CSSProperties;\n}\n\nconst defaultElement = 'div';\n\nexport const CodeBlockWrapper = <\n T extends React.ElementType = typeof defaultElement,\n>({\n as,\n maxHeight,\n code,\n heading,\n children,\n isDisabled,\n actions,\n shouldShowExpandButton,\n setShouldShowExpandButton,\n className,\n style,\n ref,\n htmlAttributes,\n ...restProps\n}: PolymorphicCommonProps<T, CodeBlockWrapperProps>) => {\n const Component: React.ElementType = as ?? defaultElement;\n\n const syntaxHighlighterWrapperRef = useRef<HTMLDivElement>(null);\n\n const [containerHeight, setContainerHeight] = useState(`${maxHeight}px`);\n const [isExpanded, setIsExpanded] = useState(maxHeight === undefined);\n\n useEffect(() => {\n if (\n (syntaxHighlighterWrapperRef.current?.scrollHeight ?? 0) <=\n (syntaxHighlighterWrapperRef.current?.clientHeight ?? 0)\n ) {\n setIsExpanded(true);\n } else {\n setIsExpanded(false);\n }\n }, []);\n\n useLayoutEffect(() => {\n if (maxHeight === undefined) {\n return;\n }\n\n if (\n (syntaxHighlighterWrapperRef.current?.clientHeight ?? 0) >=\n (syntaxHighlighterWrapperRef.current?.scrollHeight ?? 0)\n ) {\n setContainerHeight(`fit-content`);\n setShouldShowExpandButton(false);\n } else {\n setContainerHeight(`${maxHeight}px`);\n setShouldShowExpandButton(true);\n }\n }, [maxHeight, code, setShouldShowExpandButton]);\n\n return (\n <Component\n ref={ref}\n className={classNames('ndl-code-block-container', className)}\n style={{ height: containerHeight, ...style }}\n {...restProps}\n {...htmlAttributes}\n >\n <div className=\"n-flex n-flex-col n-h-full\">\n {Boolean(heading) === true && (\n <div\n className={classNames('ndl-code-block-title', {\n 'ndl-disabled': isDisabled,\n })}\n style={{\n maxWidth: `calc(100% - ${(actions?.length ?? 0) 36 + 20}px)`,\n }}\n data-testid=\"ndl-code-block-title\"\n >\n {heading}\n </div>\n )}\n <div\n className={classNames('ndl-code-content-container', {\n 'ndl-disabled': isDisabled,\n })}\n style={{\n height:\n Boolean(heading) === true ? 'calc(100% - 24px - 12px)' : '100%',\n }}\n >\n ~~{/* Pseudo element on the left to steal the editor focus when clicking outside /}\n~~ <div ~~className=\"ndl-code-pseudo-element~~\~~"></div>\~~n ~~<div\n~~ ref={syntaxHighlighterWrapperRef}\n className=\"ndl-highlight-wrapper\"\n ~~role=\"textbox\"\n aria-label=\"Code snippet\"\n tabIndex={0}\n~~ >\n {children}\n </div>\n ~~{/ Pseudo element on the right to steal the editor focus when clicking outside */}\n <div className=\"ndl-code-pseudo-element\"></div>\n~~ </div>\n </div>\n <div\n className={classNames('ndl-code-block-actions', {\n 'ndl-disabled': isDisabled,\n })}\n >\n {actions?.map((iconButtonProps, i) => {\n const { htmlAttributes, description, ...restCleanIconButtonProps } =\n iconButtonProps;\n return (\n <CleanIconButton\n key={i}\n description={`${description ?? 'CodeBlock Action'}`}\n isDisabled={isDisabled}\n htmlAttributes={{\n 'data-testid': `ndl-action-button-${i}`,\n ...htmlAttributes,\n }}\n {...restCleanIconButtonProps}\n />\n );\n })}\n </div>\n {shouldShowExpandButton && (\n <div className=\"ndl-code-block-expand-button\">\n <CleanIconButton\n description={isExpanded ? 'Collapse' : 'Expand'}\n tooltipProps={{\n root: {\n shouldCloseOnReferenceClick: true,\n },\n }}\n onClick={() => {\n if (isExpanded) {\n setContainerHeight(`${maxHeight}px`);\n setIsExpanded(false);\n } else {\n setContainerHeight(`fit-content`);\n setIsExpanded(true);\n }\n }}\n >\n {isExpanded ? <ChevronUpIconOutline /> : <ChevronDownIconOutline />}\n </CleanIconButton>\n </div>\n )}\n </Component>\n );\n};\n"]}
1	+ {"version":3,"file":"CodeBlockWrapper.js","sourceRoot":"","sources":["../../../src/_common/CodeBlockWrapper.tsx"],"names":[],"mappings":"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","sourcesContent":["/*\n \n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n \n This file is part of Neo4j.\n \n Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n \n This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n \n You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n /\nimport classNames from 'classnames';\nimport type React from 'react';\nimport { useEffect, useLayoutEffect, useRef, useState } from 'react';\n\nimport { CleanIconButton } from '../clean-icon-button';\nimport { ChevronDownIconOutline, ChevronUpIconOutline } from '../icons';\nimport { type PolymorphicCommonProps } from './types';\n\nexport interface CodeBlockWrapperProps {\n maxHeight?: number;\n code: string;\n heading?: string \| React.ReactNode;\n children: React.ReactNode;\n isDisabled?: boolean;\n actions?: React.ComponentPropsWithoutRef<typeof CleanIconButton<'button'>>[];\n shouldShowExpandButton: boolean;\n setShouldShowExpandButton: React.Dispatch<React.SetStateAction<boolean>>;\n className?: string;\n style?: React.CSSProperties;\n}\n\nconst defaultElement = 'div';\n\nexport const CodeBlockWrapper = <\n T extends React.ElementType = typeof defaultElement,\n>({\n as,\n maxHeight,\n code,\n heading,\n children,\n isDisabled,\n actions,\n shouldShowExpandButton,\n setShouldShowExpandButton,\n className,\n style,\n ref,\n htmlAttributes,\n ...restProps\n}: PolymorphicCommonProps<T, CodeBlockWrapperProps>) => {\n const Component: React.ElementType = as ?? defaultElement;\n\n const syntaxHighlighterWrapperRef = useRef<HTMLDivElement>(null);\n\n const [containerHeight, setContainerHeight] = useState(`${maxHeight}px`);\n const [isExpanded, setIsExpanded] = useState(maxHeight === undefined);\n\n useEffect(() => {\n if (\n (syntaxHighlighterWrapperRef.current?.scrollHeight ?? 0) <=\n (syntaxHighlighterWrapperRef.current?.clientHeight ?? 0)\n ) {\n setIsExpanded(true);\n } else {\n setIsExpanded(false);\n }\n }, []);\n\n useLayoutEffect(() => {\n if (maxHeight === undefined) {\n return;\n }\n\n if (\n (syntaxHighlighterWrapperRef.current?.clientHeight ?? 0) >=\n (syntaxHighlighterWrapperRef.current?.scrollHeight ?? 0)\n ) {\n setContainerHeight(`fit-content`);\n setShouldShowExpandButton(false);\n } else {\n setContainerHeight(`${maxHeight}px`);\n setShouldShowExpandButton(true);\n }\n }, [maxHeight, code, setShouldShowExpandButton]);\n\n return (\n <Component\n ref={ref}\n className={classNames('ndl-code-block-container', className)}\n style={{ height: containerHeight, ...style }}\n {...restProps}\n {...htmlAttributes}\n >\n <div className=\"n-flex n-flex-col n-h-full\">\n {Boolean(heading) === true && (\n <div\n className={classNames('ndl-code-block-title', {\n 'ndl-disabled': isDisabled,\n })}\n style={{\n maxWidth: `calc(100% - ${(actions?.length ?? 0) 36 + 20}px)`,\n }}\n data-testid=\"ndl-code-block-title\"\n >\n {heading}\n </div>\n )}\n <div\n className={classNames('ndl-code-content-container', {\n 'ndl-disabled': isDisabled,\n })}\n style={{\n height:\n Boolean(heading) === true ? 'calc(100% - 24px - 12px)' : '100%',\n }}\n >\n <div\n ref={syntaxHighlighterWrapperRef}\n className=\"ndl-highlight-wrapper\"\n >\n {children}\n </div>\n </div>\n </div>\n <div\n className={classNames('ndl-code-block-actions', {\n 'ndl-disabled': isDisabled,\n })}\n >\n {actions?.map((iconButtonProps, i) => {\n const { htmlAttributes, description, ...restCleanIconButtonProps } =\n iconButtonProps;\n return (\n <CleanIconButton\n key={i}\n description={`${description ?? 'CodeBlock Action'}`}\n isDisabled={isDisabled}\n htmlAttributes={{\n 'data-testid': `ndl-action-button-${i}`,\n ...htmlAttributes,\n }}\n {...restCleanIconButtonProps}\n />\n );\n })}\n </div>\n {shouldShowExpandButton && (\n <div className=\"ndl-code-block-expand-button\">\n <CleanIconButton\n description={isExpanded ? 'Collapse' : 'Expand'}\n tooltipProps={{\n root: {\n shouldCloseOnReferenceClick: true,\n },\n }}\n onClick={() => {\n if (isExpanded) {\n setContainerHeight(`${maxHeight}px`);\n setIsExpanded(false);\n } else {\n setContainerHeight(`fit-content`);\n setIsExpanded(true);\n }\n }}\n >\n {isExpanded ? <ChevronUpIconOutline /> : <ChevronDownIconOutline />}\n </CleanIconButton>\n </div>\n )}\n </Component>\n );\n};\n"]}

package/lib/esm/code-block/CodeBlock.js CHANGED Viewed

@@ -93,7 +93,7 @@ export const CodeBlock = (_a) => {
                     border: 0,
                     color: 'var(--theme-color-neutral-text-default)',
                     lineHeight: '1',
-                    padding: `0 ${calculateRightPadding !== null && calculateRightPadding !== void 0 ? calculateRightPadding : 0}px 0.75em ${shouldShowLineNumbers === true ? 0 : 0.75}em`,
+                    padding: `0 ${calculateRightPadding !== null && calculateRightPadding !== void 0 ? calculateRightPadding : 0}px 0.75em 0.75em`,
                     width: 'fit-content',
                 } }),
             // Turn on 'shouldShowLineNumbers' & 'wrapLongLines' at the same time, the display is wrong

package/lib/esm/code-block/CodeBlock.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CodeBlock.js","sourceRoot":"","sources":["../../../src/code-block/CodeBlock.tsx"],"names":[],"mappings":"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~~aAAa,qBAAqB,KAAK,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,IAAI~~;~~oBAClG~~,KAAK,EAAE,aAAa;iBACrB;YAEH,2FAA2F;YAC3F,kFAAkF;YAClF,gBAAgB;YAChB,YAAY,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,EACrC,eAAe,EAAE,qBAAqB,YAErC,IAAI,GACa,IACH,CACpB,CAAC;AACJ,CAAC,CAAC","sourcesContent":["/*\n \n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n \n This file is part of Neo4j.\n \n Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n \n This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n \n You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n /\nimport type React from 'react';\nimport { useEffect, useState } from 'react';\nimport { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter';\nimport {\n base16AteliersulphurpoolLight,\n coy,\n duotoneLight,\n ghcolors,\n prism,\n solarizedlight,\n vs,\n} from 'react-syntax-highlighter/dist/cjs/styles/prism';\n\nimport { CodeBlockWrapper } from '../_common/CodeBlockWrapper';\nimport { type PolymorphicCommonProps } from '../_common/types';\nimport { type IconButton } from '../icon-button';\nimport { useNeedleTheme } from '../theme';\nimport { type LanguageProp, loadLanguage } from './code-languages';\nimport ndlCodeDark from './themes/ndl-code-dark';\nimport ndlCodeLight from './themes/ndl-code-light';\n\ninterface CodeBlockProps {\n code: string;\n isDisabled?: boolean;\n maxHeight?: number;\n language: LanguageProp \| 'text';\n shouldShowLineNumbers?: boolean;\n theme?:\n \| 'vs'\n \| 'base16-ateliersulphurpool.light'\n \| 'coy'\n \| 'duotone-light'\n \| 'ghcolors'\n \| 'prism'\n \| 'solarizedlight'\n \| 'ndl-code-dark'\n \| 'ndl-code-light';\n heading?: React.ReactNode;\n actions?: React.ComponentProps<typeof IconButton<'button'>>[];\n}\n\nexport const CodeBlock = <T extends React.ElementType = 'button'>({\n as,\n maxHeight,\n code,\n language,\n shouldShowLineNumbers,\n theme,\n heading,\n actions,\n isDisabled,\n className,\n style,\n htmlAttributes,\n ref,\n ...restProps\n}: PolymorphicCommonProps<T, CodeBlockProps>) => {\n const [shouldShowExpandButton, setShouldShowExpandButton] = useState(\n maxHeight !== undefined,\n );\n\n const { theme: ndlTheme } = useNeedleTheme();\n const [loadedLanguage, setLoadedLanguage] = useState<\n LanguageProp \| 'text' \| null\n >(null);\n\n useEffect(() => {\n if (language === undefined \|\| language === 'text') {\n setLoadedLanguage('text');\n return;\n }\n\n loadLanguage(language)\n .then((module) => {\n SyntaxHighlighter.registerLanguage(language, module.default);\n setLoadedLanguage(language);\n })\n // TODO: add visual feedback for the user\n .catch((err) => console.error(err));\n }, [language]);\n\n const getTheme = () => {\n switch (theme) {\n case 'ndl-code-dark':\n return ndlCodeDark;\n case 'ndl-code-light':\n return ndlCodeLight;\n case 'vs':\n return vs;\n case 'base16-ateliersulphurpool.light':\n return base16AteliersulphurpoolLight;\n case 'coy':\n return coy;\n case 'duotone-light':\n return duotoneLight;\n case 'ghcolors':\n return ghcolors;\n case 'prism':\n return prism;\n case 'solarizedlight':\n return solarizedlight;\n default:\n return ndlTheme === 'light' ? ndlCodeLight : ndlCodeDark;\n }\n };\n const calculateRightPadding = (() => {\n if (Boolean(heading) === false) {\n const expandButtonCount = shouldShowExpandButton ? 1 : 0;\n const actionCount = actions?.length ?? 0;\n return Math.max(actionCount 36, expandButtonCount * 36) + 8;\n }\n })();\n\n return (\n <CodeBlockWrapper\n as={as}\n className={className}\n style={style}\n ref={ref}\n maxHeight={maxHeight}\n code={code}\n heading={heading}\n isDisabled={isDisabled}\n actions={actions}\n shouldShowExpandButton={shouldShowExpandButton}\n setShouldShowExpandButton={setShouldShowExpandButton}\n {...restProps}\n {...htmlAttributes}\n >\n <SyntaxHighlighter\n language={loadedLanguage \|\| 'text'}\n style={{\n ...getTheme(),\n 'pre[class*=\"language-\"]': {\n border: 0,\n color: 'var(--theme-color-neutral-text-default)',\n lineHeight: '1',\n padding: `0 ${calculateRightPadding ?? 0}px 0.75em ~~${shouldShowLineNumbers === true ?~~ 0 ~~: 0~~.~~75}em~~`,\n width: 'fit-content',\n },\n }}\n // Turn on 'shouldShowLineNumbers' & 'wrapLongLines' at the same time, the display is wrong\n // https://github.com/react-syntax-highlighter/react-syntax-highlighter/issues/402\n // wrapLongLines\n codeTagProps={{ className: 'n-code' }}\n showLineNumbers={shouldShowLineNumbers}\n >\n {code}\n </SyntaxHighlighter>\n </CodeBlockWrapper>\n );\n};\n"]}
1	+ {"version":3,"file":"CodeBlock.js","sourceRoot":"","sources":["../../../src/code-block/CodeBlock.tsx"],"names":[],"mappings":"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","sourcesContent":["/*\n \n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n \n This file is part of Neo4j.\n \n Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n \n This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n \n You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n /\nimport type React from 'react';\nimport { useEffect, useState } from 'react';\nimport { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter';\nimport {\n base16AteliersulphurpoolLight,\n coy,\n duotoneLight,\n ghcolors,\n prism,\n solarizedlight,\n vs,\n} from 'react-syntax-highlighter/dist/cjs/styles/prism';\n\nimport { CodeBlockWrapper } from '../_common/CodeBlockWrapper';\nimport { type PolymorphicCommonProps } from '../_common/types';\nimport { type IconButton } from '../icon-button';\nimport { useNeedleTheme } from '../theme';\nimport { type LanguageProp, loadLanguage } from './code-languages';\nimport ndlCodeDark from './themes/ndl-code-dark';\nimport ndlCodeLight from './themes/ndl-code-light';\n\ninterface CodeBlockProps {\n code: string;\n isDisabled?: boolean;\n maxHeight?: number;\n language: LanguageProp \| 'text';\n shouldShowLineNumbers?: boolean;\n theme?:\n \| 'vs'\n \| 'base16-ateliersulphurpool.light'\n \| 'coy'\n \| 'duotone-light'\n \| 'ghcolors'\n \| 'prism'\n \| 'solarizedlight'\n \| 'ndl-code-dark'\n \| 'ndl-code-light';\n heading?: React.ReactNode;\n actions?: React.ComponentProps<typeof IconButton<'button'>>[];\n}\n\nexport const CodeBlock = <T extends React.ElementType = 'button'>({\n as,\n maxHeight,\n code,\n language,\n shouldShowLineNumbers,\n theme,\n heading,\n actions,\n isDisabled,\n className,\n style,\n htmlAttributes,\n ref,\n ...restProps\n}: PolymorphicCommonProps<T, CodeBlockProps>) => {\n const [shouldShowExpandButton, setShouldShowExpandButton] = useState(\n maxHeight !== undefined,\n );\n\n const { theme: ndlTheme } = useNeedleTheme();\n const [loadedLanguage, setLoadedLanguage] = useState<\n LanguageProp \| 'text' \| null\n >(null);\n\n useEffect(() => {\n if (language === undefined \|\| language === 'text') {\n setLoadedLanguage('text');\n return;\n }\n\n loadLanguage(language)\n .then((module) => {\n SyntaxHighlighter.registerLanguage(language, module.default);\n setLoadedLanguage(language);\n })\n // TODO: add visual feedback for the user\n .catch((err) => console.error(err));\n }, [language]);\n\n const getTheme = () => {\n switch (theme) {\n case 'ndl-code-dark':\n return ndlCodeDark;\n case 'ndl-code-light':\n return ndlCodeLight;\n case 'vs':\n return vs;\n case 'base16-ateliersulphurpool.light':\n return base16AteliersulphurpoolLight;\n case 'coy':\n return coy;\n case 'duotone-light':\n return duotoneLight;\n case 'ghcolors':\n return ghcolors;\n case 'prism':\n return prism;\n case 'solarizedlight':\n return solarizedlight;\n default:\n return ndlTheme === 'light' ? ndlCodeLight : ndlCodeDark;\n }\n };\n const calculateRightPadding = (() => {\n if (Boolean(heading) === false) {\n const expandButtonCount = shouldShowExpandButton ? 1 : 0;\n const actionCount = actions?.length ?? 0;\n return Math.max(actionCount 36, expandButtonCount * 36) + 8;\n }\n })();\n\n return (\n <CodeBlockWrapper\n as={as}\n className={className}\n style={style}\n ref={ref}\n maxHeight={maxHeight}\n code={code}\n heading={heading}\n isDisabled={isDisabled}\n actions={actions}\n shouldShowExpandButton={shouldShowExpandButton}\n setShouldShowExpandButton={setShouldShowExpandButton}\n {...restProps}\n {...htmlAttributes}\n >\n <SyntaxHighlighter\n language={loadedLanguage \|\| 'text'}\n style={{\n ...getTheme(),\n 'pre[class*=\"language-\"]': {\n border: 0,\n color: 'var(--theme-color-neutral-text-default)',\n lineHeight: '1',\n padding: `0 ${calculateRightPadding ?? 0}px 0.75em 0.75em`,\n width: 'fit-content',\n },\n }}\n // Turn on 'shouldShowLineNumbers' & 'wrapLongLines' at the same time, the display is wrong\n // https://github.com/react-syntax-highlighter/react-syntax-highlighter/issues/402\n // wrapLongLines\n codeTagProps={{ className: 'n-code' }}\n showLineNumbers={shouldShowLineNumbers}\n >\n {code}\n </SyntaxHighlighter>\n </CodeBlockWrapper>\n );\n};\n"]}

package/lib/types/_common/CodeBlockWrapper.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CodeBlockWrapper.d.ts","sourceRoot":"","sources":["../../../src/_common/CodeBlockWrapper.tsx"],"names":[],"mappings":"AAqBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAEvD,OAAO,EAAE,KAAK,sBAAsB,EAAE,MAAM,SAAS,CAAC;AAEtD,MAAM,WAAW,qBAAqB;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IACnC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,CAAC,EAAE,KAAK,CAAC,wBAAwB,CAAC,OAAO,eAAe,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC;IAC7E,sBAAsB,EAAE,OAAO,CAAC;IAChC,yBAAyB,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IACzE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED,QAAA,MAAM,cAAc,QAAQ,CAAC;AAE7B,eAAO,MAAM,gBAAgB,GAC3B,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,OAAO,cAAc,EACnD,yKAeC,sBAAsB,CAAC,CAAC,EAAE,qBAAqB,CAAC,~~4CAiIlD~~,CAAC"}
1	+ {"version":3,"file":"CodeBlockWrapper.d.ts","sourceRoot":"","sources":["../../../src/_common/CodeBlockWrapper.tsx"],"names":[],"mappings":"AAqBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAEvD,OAAO,EAAE,KAAK,sBAAsB,EAAE,MAAM,SAAS,CAAC;AAEtD,MAAM,WAAW,qBAAqB;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IACnC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,CAAC,EAAE,KAAK,CAAC,wBAAwB,CAAC,OAAO,eAAe,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC;IAC7E,sBAAsB,EAAE,OAAO,CAAC;IAChC,yBAAyB,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IACzE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED,QAAA,MAAM,cAAc,QAAQ,CAAC;AAE7B,eAAO,MAAM,gBAAgB,GAC3B,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,OAAO,cAAc,EACnD,yKAeC,sBAAsB,CAAC,CAAC,EAAE,qBAAqB,CAAC,4CA0HlD,CAAC"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@neo4j-ndl/react",
-  "version": "4.9.33",
+  "version": "4.9.34",
   "sideEffects": false,
   "description": "React implementation of Neo4j Design System",
   "keywords": [