@neo4j-ndl/react 4.11.0 → 4.11.2

package/lib/cjs/_common/CodeBlockWrapper.js

@@ -81,7 +81,7 @@ const CodeBlockWrapper = (_a) => {
                             'ndl-disabled': isDisabled,
                         }), style: {
                             height: Boolean(heading) === true ? 'calc(100% - 24px - 12px)' : '100%',
-                        }, 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', {
+                        }, children: (0, jsx_runtime_1.jsx)("div", { ref: syntaxHighlighterWrapperRef, className: "ndl-highlight-wrapper", tabIndex: 0, role: "region", "aria-label": "Code content", 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

@@ -1 +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"]}
+{"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            tabIndex={0}\n            role=\"region\"\n            aria-label=\"Code content\"\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/button/stories/button-running-cancel.story.js

@@ -0,0 +1,79 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ *
+ *  Copyright (c) "Neo4j"
+ *  Neo4j Sweden AB [http://neo4j.com]
+ *
+ *  This file is part of Neo4j.
+ *
+ *  Neo4j is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+require("@neo4j-ndl/base/lib/neo4j-ds-styles.css");
+const react_1 = require("@neo4j-ndl/react");
+const react_2 = require("react");
+const Component = () => {
+    const [secondsLeft, setSecondsLeft] = (0, react_2.useState)(0);
+    const [isRunning, setIsRunning] = (0, react_2.useState)(false);
+    const timeoutRef = (0, react_2.useRef)(null);
+    const intervalRef = (0, react_2.useRef)(null);
+    const buttonProps = (0, react_2.useMemo)(() => {
+        return !isRunning
+            ? {
+                children: 'Run',
+                onClick: () => {
+                    setSecondsLeft(5);
+                    intervalRef.current = setInterval(() => {
+                        setSecondsLeft((prev) => prev - 1);
+                    }, 1000);
+                    // Start the mocked running process. This would be your running function.
+                    timeoutRef.current = setTimeout(() => {
+                        setIsRunning(false);
+                        timeoutRef.current = null;
+                        if (intervalRef.current) {
+                            clearInterval(intervalRef.current);
+                        }
+                    }, 5000);
+                    setIsRunning(true);
+                },
+            }
+            : {
+                children: 'Cancel',
+                onClick: () => {
+                    if (intervalRef.current) {
+                        clearInterval(intervalRef.current);
+                    }
+                    intervalRef.current = null;
+                    // Cancel the mocked running process. This would be your cancel the running function.
+                    if (timeoutRef.current) {
+                        clearTimeout(timeoutRef.current);
+                        timeoutRef.current = null;
+                    }
+                    setIsRunning(false);
+                },
+            };
+    }, [isRunning]);
+    return ((0, jsx_runtime_1.jsxs)("div", { style: {
+            alignItems: 'center',
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '5px',
+        }, children: [(0, jsx_runtime_1.jsx)("div", { children: "Click to start the mocked running process" }), (0, jsx_runtime_1.jsx)(react_1.FilledButton, Object.assign({ style: { width: '100px' } }, buttonProps)), (0, jsx_runtime_1.jsxs)("div", { style: { marginTop: '10px', position: 'relative' }, children: [(0, jsx_runtime_1.jsx)("span", { children: "Status: " }), (0, jsx_runtime_1.jsx)("span", { style: {
+                            color: isRunning ? 'green' : 'red',
+                            fontWeight: 'bold',
+                        }, children: isRunning ? `Running (${secondsLeft} seconds left)` : 'Not running' })] })] }));
+};
+exports.default = Component;
+//# sourceMappingURL=button-running-cancel.story.js.map

package/lib/cjs/button/stories/button-running-cancel.story.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-running-cancel.story.js","sourceRoot":"","sources":["../../../../src/button/stories/button-running-cancel.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAAgD;AAChD,iCAAkD;AAElD,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,IAAA,gBAAQ,EAAS,CAAC,CAAC,CAAC;IAC1D,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAClD,MAAM,UAAU,GAAG,IAAA,cAAM,EAAwB,IAAI,CAAC,CAAC;IACvD,MAAM,WAAW,GAAG,IAAA,cAAM,EAAwB,IAAI,CAAC,CAAC;IAExD,MAAM,WAAW,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE;QAC/B,OAAO,CAAC,SAAS;YACf,CAAC,CAAC;gBACE,QAAQ,EAAE,KAAK;gBACf,OAAO,EAAE,GAAG,EAAE;oBACZ,cAAc,CAAC,CAAC,CAAC,CAAC;oBAClB,WAAW,CAAC,OAAO,GAAG,WAAW,CAAC,GAAG,EAAE;wBACrC,cAAc,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC;oBACrC,CAAC,EAAE,IAAI,CAAC,CAAC;oBACT,yEAAyE;oBACzE,UAAU,CAAC,OAAO,GAAG,UAAU,CAAC,GAAG,EAAE;wBACnC,YAAY,CAAC,KAAK,CAAC,CAAC;wBACpB,UAAU,CAAC,OAAO,GAAG,IAAI,CAAC;wBAC1B,IAAI,WAAW,CAAC,OAAO,EAAE,CAAC;4BACxB,aAAa,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;wBACrC,CAAC;oBACH,CAAC,EAAE,IAAI,CAAC,CAAC;oBACT,YAAY,CAAC,IAAI,CAAC,CAAC;gBACrB,CAAC;aACF;YACH,CAAC,CAAC;gBACE,QAAQ,EAAE,QAAQ;gBAClB,OAAO,EAAE,GAAG,EAAE;oBACZ,IAAI,WAAW,CAAC,OAAO,EAAE,CAAC;wBACxB,aAAa,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;oBACrC,CAAC;oBACD,WAAW,CAAC,OAAO,GAAG,IAAI,CAAC;oBAC3B,qFAAqF;oBACrF,IAAI,UAAU,CAAC,OAAO,EAAE,CAAC;wBACvB,YAAY,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;wBACjC,UAAU,CAAC,OAAO,GAAG,IAAI,CAAC;oBAC5B,CAAC;oBACD,YAAY,CAAC,KAAK,CAAC,CAAC;gBACtB,CAAC;aACF,CAAC;IACR,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,OAAO,CACL,iCACE,KAAK,EAAE;YACL,UAAU,EAAE,QAAQ;YACpB,OAAO,EAAE,MAAM;YACf,aAAa,EAAE,QAAQ;YACvB,GAAG,EAAE,KAAK;SACX,aAED,wFAAoD,EACpD,uBAAC,oBAAY,kBAAC,KAAK,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,IAAM,WAAW,EAAI,EAC5D,iCAAK,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,UAAU,EAAE,aACrD,wDAAqB,EACrB,iCACE,KAAK,EAAE;4BACL,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK;4BAClC,UAAU,EAAE,MAAM;yBACnB,YAEA,SAAS,CAAC,CAAC,CAAC,YAAY,WAAW,gBAAgB,CAAC,CAAC,CAAC,aAAa,GAC/D,IACH,IACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,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 */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { FilledButton } from '@neo4j-ndl/react';\nimport { useMemo, useRef, useState } from 'react';\n\nconst Component = () => {\n  const [secondsLeft, setSecondsLeft] = useState<number>(0);\n  const [isRunning, setIsRunning] = useState(false);\n  const timeoutRef = useRef<NodeJS.Timeout | null>(null);\n  const intervalRef = useRef<NodeJS.Timeout | null>(null);\n\n  const buttonProps = useMemo(() => {\n    return !isRunning\n      ? {\n          children: 'Run',\n          onClick: () => {\n            setSecondsLeft(5);\n            intervalRef.current = setInterval(() => {\n              setSecondsLeft((prev) => prev - 1);\n            }, 1000);\n            // Start the mocked running process. This would be your running function.\n            timeoutRef.current = setTimeout(() => {\n              setIsRunning(false);\n              timeoutRef.current = null;\n              if (intervalRef.current) {\n                clearInterval(intervalRef.current);\n              }\n            }, 5000);\n            setIsRunning(true);\n          },\n        }\n      : {\n          children: 'Cancel',\n          onClick: () => {\n            if (intervalRef.current) {\n              clearInterval(intervalRef.current);\n            }\n            intervalRef.current = null;\n            // Cancel the mocked running process. This would be your cancel the running function.\n            if (timeoutRef.current) {\n              clearTimeout(timeoutRef.current);\n              timeoutRef.current = null;\n            }\n            setIsRunning(false);\n          },\n        };\n  }, [isRunning]);\n\n  return (\n    <div\n      style={{\n        alignItems: 'center',\n        display: 'flex',\n        flexDirection: 'column',\n        gap: '5px',\n      }}\n    >\n      <div>Click to start the mocked running process</div>\n      <FilledButton style={{ width: '100px' }} {...buttonProps} />\n      <div style={{ marginTop: '10px', position: 'relative' }}>\n        <span>Status: </span>\n        <span\n          style={{\n            color: isRunning ? 'green' : 'red',\n            fontWeight: 'bold',\n          }}\n        >\n          {isRunning ? `Running (${secondsLeft} seconds left)` : 'Not running'}\n        </span>\n      </div>\n    </div>\n  );\n};\n\nexport default Component;\n"]}

package/lib/cjs/button/stories/index.js

@@ -23,7 +23,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ButtonFloatingSrc = exports.ButtonDisabledSrc = exports.ButtonLoadingSrc = exports.ButtonVariantsSrc = exports.ButtonFluidSrc = exports.ButtonLeadingIconSrc = exports.ButtonSizesSrc = exports.ButtonFloating = exports.ButtonDisabled = exports.ButtonLoading = exports.ButtonVariants = exports.ButtonFluid = exports.ButtonLeadingIcon = exports.ButtonSizes = void 0;
+exports.ButtonRunningCancelSrc = exports.ButtonFloatingSrc = exports.ButtonDisabledSrc = exports.ButtonLoadingSrc = exports.ButtonVariantsSrc = exports.ButtonFluidSrc = exports.ButtonLeadingIconSrc = exports.ButtonSizesSrc = exports.ButtonRunningCancel = exports.ButtonFloating = exports.ButtonDisabled = exports.ButtonLoading = exports.ButtonVariants = exports.ButtonFluid = exports.ButtonLeadingIcon = exports.ButtonSizes = void 0;
 var button_sizes_story_1 = require("./button-sizes.story");
 Object.defineProperty(exports, "ButtonSizes", { enumerable: true, get: function () { return __importDefault(button_sizes_story_1).default; } });
 var button_leading_icon_story_1 = require("./button-leading-icon.story");
@@ -38,12 +38,15 @@ var button_disabled_story_1 = require("./button-disabled.story");
 Object.defineProperty(exports, "ButtonDisabled", { enumerable: true, get: function () { return __importDefault(button_disabled_story_1).default; } });
 var button_floating_story_1 = require("./button-floating.story");
 Object.defineProperty(exports, "ButtonFloating", { enumerable: true, get: function () { return __importDefault(button_floating_story_1).default; } });
+var button_running_cancel_story_1 = require("./button-running-cancel.story");
+Object.defineProperty(exports, "ButtonRunningCancel", { enumerable: true, get: function () { return __importDefault(button_running_cancel_story_1).default; } });
 const export_stories_utils_1 = require("../../_common/export-stories-utils");
 const button_disabled_story_raw_1 = __importDefault(require("./button-disabled.story?raw"));
 const button_floating_story_raw_1 = __importDefault(require("./button-floating.story?raw"));
 const button_fluid_story_raw_1 = __importDefault(require("./button-fluid.story?raw"));
 const button_leading_icon_story_raw_1 = __importDefault(require("./button-leading-icon.story?raw"));
 const button_loading_story_raw_1 = __importDefault(require("./button-loading.story?raw"));
+const button_running_cancel_story_raw_1 = __importDefault(require("./button-running-cancel.story?raw"));
 const button_sizes_story_raw_1 = __importDefault(require("./button-sizes.story?raw"));
 const button_variants_story_raw_1 = __importDefault(require("./button-variants.story?raw"));
 exports.ButtonSizesSrc = (0, export_stories_utils_1.removeLicenseHeader)(button_sizes_story_raw_1.default);
@@ -53,4 +56,5 @@ exports.ButtonVariantsSrc = (0, export_stories_utils_1.removeLicenseHeader)(butt
 exports.ButtonLoadingSrc = (0, export_stories_utils_1.removeLicenseHeader)(button_loading_story_raw_1.default);
 exports.ButtonDisabledSrc = (0, export_stories_utils_1.removeLicenseHeader)(button_disabled_story_raw_1.default);
 exports.ButtonFloatingSrc = (0, export_stories_utils_1.removeLicenseHeader)(button_floating_story_raw_1.default);
+exports.ButtonRunningCancelSrc = (0, export_stories_utils_1.removeLicenseHeader)(button_running_cancel_story_raw_1.default);
 //# sourceMappingURL=index.js.map

package/lib/cjs/button/stories/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/button/stories/index.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;;;;;;AAEH,2DAA8D;AAArD,kIAAA,OAAO,OAAe;AAC/B,yEAA2E;AAAlE,+IAAA,OAAO,OAAqB;AACrC,2DAA8D;AAArD,kIAAA,OAAO,OAAe;AAC/B,iEAAoE;AAA3D,wIAAA,OAAO,OAAkB;AAClC,+DAAkE;AAAzD,sIAAA,OAAO,OAAiB;AACjC,iEAAoE;AAA3D,wIAAA,OAAO,OAAkB;AAClC,iEAAoE;AAA3D,wIAAA,OAAO,OAAkB;AAElC,6EAAyE;AACzE,4FAA+D;AAC/D,4FAA+D;AAC/D,sFAAyD;AACzD,oGAAsE;AACtE,0FAA6D;AAC7D,sFAAyD;AACzD,4FAA+D;AAElD,QAAA,cAAc,GAAG,IAAA,0CAAmB,EAAC,gCAAiB,CAAC,CAAC;AACxD,QAAA,oBAAoB,GAAG,IAAA,0CAAmB,EACrD,uCAAuB,CACxB,CAAC;AACW,QAAA,cAAc,GAAG,IAAA,0CAAmB,EAAC,gCAAiB,CAAC,CAAC;AACxD,QAAA,iBAAiB,GAAG,IAAA,0CAAmB,EAAC,mCAAoB,CAAC,CAAC;AAC9D,QAAA,gBAAgB,GAAG,IAAA,0CAAmB,EAAC,kCAAmB,CAAC,CAAC;AAC5D,QAAA,iBAAiB,GAAG,IAAA,0CAAmB,EAAC,mCAAoB,CAAC,CAAC;AAC9D,QAAA,iBAAiB,GAAG,IAAA,0CAAmB,EAAC,mCAAoB,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 */\n\nexport { default as ButtonSizes } from './button-sizes.story';\nexport { default as ButtonLeadingIcon } from './button-leading-icon.story';\nexport { default as ButtonFluid } from './button-fluid.story';\nexport { default as ButtonVariants } from './button-variants.story';\nexport { default as ButtonLoading } from './button-loading.story';\nexport { default as ButtonDisabled } from './button-disabled.story';\nexport { default as ButtonFloating } from './button-floating.story';\n\nimport { removeLicenseHeader } from '../../_common/export-stories-utils';\nimport ButtonDisabledSrcRaw from './button-disabled.story?raw';\nimport ButtonFloatingSrcRaw from './button-floating.story?raw';\nimport ButtonFluidSrcRaw from './button-fluid.story?raw';\nimport ButtonLeadingIconSrcRaw from './button-leading-icon.story?raw';\nimport ButtonLoadingSrcRaw from './button-loading.story?raw';\nimport ButtonSizesSrcRaw from './button-sizes.story?raw';\nimport ButtonVariantsSrcRaw from './button-variants.story?raw';\n\nexport const ButtonSizesSrc = removeLicenseHeader(ButtonSizesSrcRaw);\nexport const ButtonLeadingIconSrc = removeLicenseHeader(\n  ButtonLeadingIconSrcRaw,\n);\nexport const ButtonFluidSrc = removeLicenseHeader(ButtonFluidSrcRaw);\nexport const ButtonVariantsSrc = removeLicenseHeader(ButtonVariantsSrcRaw);\nexport const ButtonLoadingSrc = removeLicenseHeader(ButtonLoadingSrcRaw);\nexport const ButtonDisabledSrc = removeLicenseHeader(ButtonDisabledSrcRaw);\nexport const ButtonFloatingSrc = removeLicenseHeader(ButtonFloatingSrcRaw);\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/button/stories/index.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;;;;;;AAEH,2DAA8D;AAArD,kIAAA,OAAO,OAAe;AAC/B,yEAA2E;AAAlE,+IAAA,OAAO,OAAqB;AACrC,2DAA8D;AAArD,kIAAA,OAAO,OAAe;AAC/B,iEAAoE;AAA3D,wIAAA,OAAO,OAAkB;AAClC,+DAAkE;AAAzD,sIAAA,OAAO,OAAiB;AACjC,iEAAoE;AAA3D,wIAAA,OAAO,OAAkB;AAClC,iEAAoE;AAA3D,wIAAA,OAAO,OAAkB;AAClC,6EAA+E;AAAtE,mJAAA,OAAO,OAAuB;AAEvC,6EAAyE;AACzE,4FAA+D;AAC/D,4FAA+D;AAC/D,sFAAyD;AACzD,oGAAsE;AACtE,0FAA6D;AAC7D,wGAA0E;AAC1E,sFAAyD;AACzD,4FAA+D;AAElD,QAAA,cAAc,GAAG,IAAA,0CAAmB,EAAC,gCAAiB,CAAC,CAAC;AACxD,QAAA,oBAAoB,GAAG,IAAA,0CAAmB,EACrD,uCAAuB,CACxB,CAAC;AACW,QAAA,cAAc,GAAG,IAAA,0CAAmB,EAAC,gCAAiB,CAAC,CAAC;AACxD,QAAA,iBAAiB,GAAG,IAAA,0CAAmB,EAAC,mCAAoB,CAAC,CAAC;AAC9D,QAAA,gBAAgB,GAAG,IAAA,0CAAmB,EAAC,kCAAmB,CAAC,CAAC;AAC5D,QAAA,iBAAiB,GAAG,IAAA,0CAAmB,EAAC,mCAAoB,CAAC,CAAC;AAC9D,QAAA,iBAAiB,GAAG,IAAA,0CAAmB,EAAC,mCAAoB,CAAC,CAAC;AAC9D,QAAA,sBAAsB,GAAG,IAAA,0CAAmB,EACvD,yCAAyB,CAC1B,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 */\n\nexport { default as ButtonSizes } from './button-sizes.story';\nexport { default as ButtonLeadingIcon } from './button-leading-icon.story';\nexport { default as ButtonFluid } from './button-fluid.story';\nexport { default as ButtonVariants } from './button-variants.story';\nexport { default as ButtonLoading } from './button-loading.story';\nexport { default as ButtonDisabled } from './button-disabled.story';\nexport { default as ButtonFloating } from './button-floating.story';\nexport { default as ButtonRunningCancel } from './button-running-cancel.story';\n\nimport { removeLicenseHeader } from '../../_common/export-stories-utils';\nimport ButtonDisabledSrcRaw from './button-disabled.story?raw';\nimport ButtonFloatingSrcRaw from './button-floating.story?raw';\nimport ButtonFluidSrcRaw from './button-fluid.story?raw';\nimport ButtonLeadingIconSrcRaw from './button-leading-icon.story?raw';\nimport ButtonLoadingSrcRaw from './button-loading.story?raw';\nimport ButtonRunningCancelSrcRaw from './button-running-cancel.story?raw';\nimport ButtonSizesSrcRaw from './button-sizes.story?raw';\nimport ButtonVariantsSrcRaw from './button-variants.story?raw';\n\nexport const ButtonSizesSrc = removeLicenseHeader(ButtonSizesSrcRaw);\nexport const ButtonLeadingIconSrc = removeLicenseHeader(\n  ButtonLeadingIconSrcRaw,\n);\nexport const ButtonFluidSrc = removeLicenseHeader(ButtonFluidSrcRaw);\nexport const ButtonVariantsSrc = removeLicenseHeader(ButtonVariantsSrcRaw);\nexport const ButtonLoadingSrc = removeLicenseHeader(ButtonLoadingSrcRaw);\nexport const ButtonDisabledSrc = removeLicenseHeader(ButtonDisabledSrcRaw);\nexport const ButtonFloatingSrc = removeLicenseHeader(ButtonFloatingSrcRaw);\nexport const ButtonRunningCancelSrc = removeLicenseHeader(\n  ButtonRunningCancelSrcRaw,\n);\n"]}

package/lib/esm/_common/CodeBlockWrapper.js

@@ -75,7 +75,7 @@ export const CodeBlockWrapper = (_a) => {
                             'ndl-disabled': isDisabled,
                         }), style: {
                             height: Boolean(heading) === true ? 'calc(100% - 24px - 12px)' : '100%',
-                        }, children: _jsx("div", { ref: syntaxHighlighterWrapperRef, className: "ndl-highlight-wrapper", children: children }) })] }), _jsx("div", { className: classNames('ndl-code-block-actions', {
+                        }, children: _jsx("div", { ref: syntaxHighlighterWrapperRef, className: "ndl-highlight-wrapper", tabIndex: 0, role: "region", "aria-label": "Code content", 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

@@ -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,cACE,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,YAED,cACE,GAAG,EAAE,2BAA2B,EAChC,SAAS,EAAC,uBAAuB,YAEhC,QAAQ,GACL,GACF,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          <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"]}
+{"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            tabIndex={0}\n            role=\"region\"\n            aria-label=\"Code content\"\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/button/stories/button-running-cancel.story.js

@@ -0,0 +1,77 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ *
+ *  Copyright (c) "Neo4j"
+ *  Neo4j Sweden AB [http://neo4j.com]
+ *
+ *  This file is part of Neo4j.
+ *
+ *  Neo4j is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+import { FilledButton } from '@neo4j-ndl/react';
+import { useMemo, useRef, useState } from 'react';
+const Component = () => {
+    const [secondsLeft, setSecondsLeft] = useState(0);
+    const [isRunning, setIsRunning] = useState(false);
+    const timeoutRef = useRef(null);
+    const intervalRef = useRef(null);
+    const buttonProps = useMemo(() => {
+        return !isRunning
+            ? {
+                children: 'Run',
+                onClick: () => {
+                    setSecondsLeft(5);
+                    intervalRef.current = setInterval(() => {
+                        setSecondsLeft((prev) => prev - 1);
+                    }, 1000);
+                    // Start the mocked running process. This would be your running function.
+                    timeoutRef.current = setTimeout(() => {
+                        setIsRunning(false);
+                        timeoutRef.current = null;
+                        if (intervalRef.current) {
+                            clearInterval(intervalRef.current);
+                        }
+                    }, 5000);
+                    setIsRunning(true);
+                },
+            }
+            : {
+                children: 'Cancel',
+                onClick: () => {
+                    if (intervalRef.current) {
+                        clearInterval(intervalRef.current);
+                    }
+                    intervalRef.current = null;
+                    // Cancel the mocked running process. This would be your cancel the running function.
+                    if (timeoutRef.current) {
+                        clearTimeout(timeoutRef.current);
+                        timeoutRef.current = null;
+                    }
+                    setIsRunning(false);
+                },
+            };
+    }, [isRunning]);
+    return (_jsxs("div", { style: {
+            alignItems: 'center',
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '5px',
+        }, children: [_jsx("div", { children: "Click to start the mocked running process" }), _jsx(FilledButton, Object.assign({ style: { width: '100px' } }, buttonProps)), _jsxs("div", { style: { marginTop: '10px', position: 'relative' }, children: [_jsx("span", { children: "Status: " }), _jsx("span", { style: {
+                            color: isRunning ? 'green' : 'red',
+                            fontWeight: 'bold',
+                        }, children: isRunning ? `Running (${secondsLeft} seconds left)` : 'Not running' })] })] }));
+};
+export default Component;
+//# sourceMappingURL=button-running-cancel.story.js.map

package/lib/esm/button/stories/button-running-cancel.story.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-running-cancel.story.js","sourceRoot":"","sources":["../../../../src/button/stories/button-running-cancel.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAElD,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAS,CAAC,CAAC,CAAC;IAC1D,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAClD,MAAM,UAAU,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IACvD,MAAM,WAAW,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IAExD,MAAM,WAAW,GAAG,OAAO,CAAC,GAAG,EAAE;QAC/B,OAAO,CAAC,SAAS;YACf,CAAC,CAAC;gBACE,QAAQ,EAAE,KAAK;gBACf,OAAO,EAAE,GAAG,EAAE;oBACZ,cAAc,CAAC,CAAC,CAAC,CAAC;oBAClB,WAAW,CAAC,OAAO,GAAG,WAAW,CAAC,GAAG,EAAE;wBACrC,cAAc,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC;oBACrC,CAAC,EAAE,IAAI,CAAC,CAAC;oBACT,yEAAyE;oBACzE,UAAU,CAAC,OAAO,GAAG,UAAU,CAAC,GAAG,EAAE;wBACnC,YAAY,CAAC,KAAK,CAAC,CAAC;wBACpB,UAAU,CAAC,OAAO,GAAG,IAAI,CAAC;wBAC1B,IAAI,WAAW,CAAC,OAAO,EAAE,CAAC;4BACxB,aAAa,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;wBACrC,CAAC;oBACH,CAAC,EAAE,IAAI,CAAC,CAAC;oBACT,YAAY,CAAC,IAAI,CAAC,CAAC;gBACrB,CAAC;aACF;YACH,CAAC,CAAC;gBACE,QAAQ,EAAE,QAAQ;gBAClB,OAAO,EAAE,GAAG,EAAE;oBACZ,IAAI,WAAW,CAAC,OAAO,EAAE,CAAC;wBACxB,aAAa,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;oBACrC,CAAC;oBACD,WAAW,CAAC,OAAO,GAAG,IAAI,CAAC;oBAC3B,qFAAqF;oBACrF,IAAI,UAAU,CAAC,OAAO,EAAE,CAAC;wBACvB,YAAY,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;wBACjC,UAAU,CAAC,OAAO,GAAG,IAAI,CAAC;oBAC5B,CAAC;oBACD,YAAY,CAAC,KAAK,CAAC,CAAC;gBACtB,CAAC;aACF,CAAC;IACR,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,OAAO,CACL,eACE,KAAK,EAAE;YACL,UAAU,EAAE,QAAQ;YACpB,OAAO,EAAE,MAAM;YACf,aAAa,EAAE,QAAQ;YACvB,GAAG,EAAE,KAAK;SACX,aAED,sEAAoD,EACpD,KAAC,YAAY,kBAAC,KAAK,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,IAAM,WAAW,EAAI,EAC5D,eAAK,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,UAAU,EAAE,aACrD,sCAAqB,EACrB,eACE,KAAK,EAAE;4BACL,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK;4BAClC,UAAU,EAAE,MAAM;yBACnB,YAEA,SAAS,CAAC,CAAC,CAAC,YAAY,WAAW,gBAAgB,CAAC,CAAC,CAAC,aAAa,GAC/D,IACH,IACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,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 */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { FilledButton } from '@neo4j-ndl/react';\nimport { useMemo, useRef, useState } from 'react';\n\nconst Component = () => {\n  const [secondsLeft, setSecondsLeft] = useState<number>(0);\n  const [isRunning, setIsRunning] = useState(false);\n  const timeoutRef = useRef<NodeJS.Timeout | null>(null);\n  const intervalRef = useRef<NodeJS.Timeout | null>(null);\n\n  const buttonProps = useMemo(() => {\n    return !isRunning\n      ? {\n          children: 'Run',\n          onClick: () => {\n            setSecondsLeft(5);\n            intervalRef.current = setInterval(() => {\n              setSecondsLeft((prev) => prev - 1);\n            }, 1000);\n            // Start the mocked running process. This would be your running function.\n            timeoutRef.current = setTimeout(() => {\n              setIsRunning(false);\n              timeoutRef.current = null;\n              if (intervalRef.current) {\n                clearInterval(intervalRef.current);\n              }\n            }, 5000);\n            setIsRunning(true);\n          },\n        }\n      : {\n          children: 'Cancel',\n          onClick: () => {\n            if (intervalRef.current) {\n              clearInterval(intervalRef.current);\n            }\n            intervalRef.current = null;\n            // Cancel the mocked running process. This would be your cancel the running function.\n            if (timeoutRef.current) {\n              clearTimeout(timeoutRef.current);\n              timeoutRef.current = null;\n            }\n            setIsRunning(false);\n          },\n        };\n  }, [isRunning]);\n\n  return (\n    <div\n      style={{\n        alignItems: 'center',\n        display: 'flex',\n        flexDirection: 'column',\n        gap: '5px',\n      }}\n    >\n      <div>Click to start the mocked running process</div>\n      <FilledButton style={{ width: '100px' }} {...buttonProps} />\n      <div style={{ marginTop: '10px', position: 'relative' }}>\n        <span>Status: </span>\n        <span\n          style={{\n            color: isRunning ? 'green' : 'red',\n            fontWeight: 'bold',\n          }}\n        >\n          {isRunning ? `Running (${secondsLeft} seconds left)` : 'Not running'}\n        </span>\n      </div>\n    </div>\n  );\n};\n\nexport default Component;\n"]}

package/lib/esm/button/stories/index.js

@@ -25,12 +25,14 @@ export { default as ButtonVariants } from './button-variants.story';
 export { default as ButtonLoading } from './button-loading.story';
 export { default as ButtonDisabled } from './button-disabled.story';
 export { default as ButtonFloating } from './button-floating.story';
+export { default as ButtonRunningCancel } from './button-running-cancel.story';
 import { removeLicenseHeader } from '../../_common/export-stories-utils';
 import ButtonDisabledSrcRaw from './button-disabled.story?raw';
 import ButtonFloatingSrcRaw from './button-floating.story?raw';
 import ButtonFluidSrcRaw from './button-fluid.story?raw';
 import ButtonLeadingIconSrcRaw from './button-leading-icon.story?raw';
 import ButtonLoadingSrcRaw from './button-loading.story?raw';
+import ButtonRunningCancelSrcRaw from './button-running-cancel.story?raw';
 import ButtonSizesSrcRaw from './button-sizes.story?raw';
 import ButtonVariantsSrcRaw from './button-variants.story?raw';
 export const ButtonSizesSrc = removeLicenseHeader(ButtonSizesSrcRaw);
@@ -40,4 +42,5 @@ export const ButtonVariantsSrc = removeLicenseHeader(ButtonVariantsSrcRaw);
 export const ButtonLoadingSrc = removeLicenseHeader(ButtonLoadingSrcRaw);
 export const ButtonDisabledSrc = removeLicenseHeader(ButtonDisabledSrcRaw);
 export const ButtonFloatingSrc = removeLicenseHeader(ButtonFloatingSrcRaw);
+export const ButtonRunningCancelSrc = removeLicenseHeader(ButtonRunningCancelSrcRaw);
 //# sourceMappingURL=index.js.map

package/lib/esm/button/stories/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/button/stories/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACpE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACpE,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAEpE,OAAO,EAAE,mBAAmB,EAAE,MAAM,oCAAoC,CAAC;AACzE,OAAO,oBAAoB,MAAM,6BAA6B,CAAC;AAC/D,OAAO,oBAAoB,MAAM,6BAA6B,CAAC;AAC/D,OAAO,iBAAiB,MAAM,0BAA0B,CAAC;AACzD,OAAO,uBAAuB,MAAM,iCAAiC,CAAC;AACtE,OAAO,mBAAmB,MAAM,4BAA4B,CAAC;AAC7D,OAAO,iBAAiB,MAAM,0BAA0B,CAAC;AACzD,OAAO,oBAAoB,MAAM,6BAA6B,CAAC;AAE/D,MAAM,CAAC,MAAM,cAAc,GAAG,mBAAmB,CAAC,iBAAiB,CAAC,CAAC;AACrE,MAAM,CAAC,MAAM,oBAAoB,GAAG,mBAAmB,CACrD,uBAAuB,CACxB,CAAC;AACF,MAAM,CAAC,MAAM,cAAc,GAAG,mBAAmB,CAAC,iBAAiB,CAAC,CAAC;AACrE,MAAM,CAAC,MAAM,iBAAiB,GAAG,mBAAmB,CAAC,oBAAoB,CAAC,CAAC;AAC3E,MAAM,CAAC,MAAM,gBAAgB,GAAG,mBAAmB,CAAC,mBAAmB,CAAC,CAAC;AACzE,MAAM,CAAC,MAAM,iBAAiB,GAAG,mBAAmB,CAAC,oBAAoB,CAAC,CAAC;AAC3E,MAAM,CAAC,MAAM,iBAAiB,GAAG,mBAAmB,CAAC,oBAAoB,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 */\n\nexport { default as ButtonSizes } from './button-sizes.story';\nexport { default as ButtonLeadingIcon } from './button-leading-icon.story';\nexport { default as ButtonFluid } from './button-fluid.story';\nexport { default as ButtonVariants } from './button-variants.story';\nexport { default as ButtonLoading } from './button-loading.story';\nexport { default as ButtonDisabled } from './button-disabled.story';\nexport { default as ButtonFloating } from './button-floating.story';\n\nimport { removeLicenseHeader } from '../../_common/export-stories-utils';\nimport ButtonDisabledSrcRaw from './button-disabled.story?raw';\nimport ButtonFloatingSrcRaw from './button-floating.story?raw';\nimport ButtonFluidSrcRaw from './button-fluid.story?raw';\nimport ButtonLeadingIconSrcRaw from './button-leading-icon.story?raw';\nimport ButtonLoadingSrcRaw from './button-loading.story?raw';\nimport ButtonSizesSrcRaw from './button-sizes.story?raw';\nimport ButtonVariantsSrcRaw from './button-variants.story?raw';\n\nexport const ButtonSizesSrc = removeLicenseHeader(ButtonSizesSrcRaw);\nexport const ButtonLeadingIconSrc = removeLicenseHeader(\n  ButtonLeadingIconSrcRaw,\n);\nexport const ButtonFluidSrc = removeLicenseHeader(ButtonFluidSrcRaw);\nexport const ButtonVariantsSrc = removeLicenseHeader(ButtonVariantsSrcRaw);\nexport const ButtonLoadingSrc = removeLicenseHeader(ButtonLoadingSrcRaw);\nexport const ButtonDisabledSrc = removeLicenseHeader(ButtonDisabledSrcRaw);\nexport const ButtonFloatingSrc = removeLicenseHeader(ButtonFloatingSrcRaw);\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/button/stories/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACpE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACpE,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACpE,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,+BAA+B,CAAC;AAE/E,OAAO,EAAE,mBAAmB,EAAE,MAAM,oCAAoC,CAAC;AACzE,OAAO,oBAAoB,MAAM,6BAA6B,CAAC;AAC/D,OAAO,oBAAoB,MAAM,6BAA6B,CAAC;AAC/D,OAAO,iBAAiB,MAAM,0BAA0B,CAAC;AACzD,OAAO,uBAAuB,MAAM,iCAAiC,CAAC;AACtE,OAAO,mBAAmB,MAAM,4BAA4B,CAAC;AAC7D,OAAO,yBAAyB,MAAM,mCAAmC,CAAC;AAC1E,OAAO,iBAAiB,MAAM,0BAA0B,CAAC;AACzD,OAAO,oBAAoB,MAAM,6BAA6B,CAAC;AAE/D,MAAM,CAAC,MAAM,cAAc,GAAG,mBAAmB,CAAC,iBAAiB,CAAC,CAAC;AACrE,MAAM,CAAC,MAAM,oBAAoB,GAAG,mBAAmB,CACrD,uBAAuB,CACxB,CAAC;AACF,MAAM,CAAC,MAAM,cAAc,GAAG,mBAAmB,CAAC,iBAAiB,CAAC,CAAC;AACrE,MAAM,CAAC,MAAM,iBAAiB,GAAG,mBAAmB,CAAC,oBAAoB,CAAC,CAAC;AAC3E,MAAM,CAAC,MAAM,gBAAgB,GAAG,mBAAmB,CAAC,mBAAmB,CAAC,CAAC;AACzE,MAAM,CAAC,MAAM,iBAAiB,GAAG,mBAAmB,CAAC,oBAAoB,CAAC,CAAC;AAC3E,MAAM,CAAC,MAAM,iBAAiB,GAAG,mBAAmB,CAAC,oBAAoB,CAAC,CAAC;AAC3E,MAAM,CAAC,MAAM,sBAAsB,GAAG,mBAAmB,CACvD,yBAAyB,CAC1B,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 */\n\nexport { default as ButtonSizes } from './button-sizes.story';\nexport { default as ButtonLeadingIcon } from './button-leading-icon.story';\nexport { default as ButtonFluid } from './button-fluid.story';\nexport { default as ButtonVariants } from './button-variants.story';\nexport { default as ButtonLoading } from './button-loading.story';\nexport { default as ButtonDisabled } from './button-disabled.story';\nexport { default as ButtonFloating } from './button-floating.story';\nexport { default as ButtonRunningCancel } from './button-running-cancel.story';\n\nimport { removeLicenseHeader } from '../../_common/export-stories-utils';\nimport ButtonDisabledSrcRaw from './button-disabled.story?raw';\nimport ButtonFloatingSrcRaw from './button-floating.story?raw';\nimport ButtonFluidSrcRaw from './button-fluid.story?raw';\nimport ButtonLeadingIconSrcRaw from './button-leading-icon.story?raw';\nimport ButtonLoadingSrcRaw from './button-loading.story?raw';\nimport ButtonRunningCancelSrcRaw from './button-running-cancel.story?raw';\nimport ButtonSizesSrcRaw from './button-sizes.story?raw';\nimport ButtonVariantsSrcRaw from './button-variants.story?raw';\n\nexport const ButtonSizesSrc = removeLicenseHeader(ButtonSizesSrcRaw);\nexport const ButtonLeadingIconSrc = removeLicenseHeader(\n  ButtonLeadingIconSrcRaw,\n);\nexport const ButtonFluidSrc = removeLicenseHeader(ButtonFluidSrcRaw);\nexport const ButtonVariantsSrc = removeLicenseHeader(ButtonVariantsSrcRaw);\nexport const ButtonLoadingSrc = removeLicenseHeader(ButtonLoadingSrcRaw);\nexport const ButtonDisabledSrc = removeLicenseHeader(ButtonDisabledSrcRaw);\nexport const ButtonFloatingSrc = removeLicenseHeader(ButtonFloatingSrcRaw);\nexport const ButtonRunningCancelSrc = removeLicenseHeader(\n  ButtonRunningCancelSrcRaw,\n);\n"]}

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

@@ -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,4CA0HlD,CAAC"}
+{"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,4CA6HlD,CAAC"}

package/lib/types/button/stories/button-running-cancel.story.d.ts

@@ -0,0 +1,24 @@
+/**
+ *
+ *  Copyright (c) "Neo4j"
+ *  Neo4j Sweden AB [http://neo4j.com]
+ *
+ *  This file is part of Neo4j.
+ *
+ *  Neo4j is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+declare const Component: () => import("react/jsx-runtime").JSX.Element;
+export default Component;
+//# sourceMappingURL=button-running-cancel.story.d.ts.map

package/lib/types/button/stories/button-running-cancel.story.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-running-cancel.story.d.ts","sourceRoot":"","sources":["../../../../src/button/stories/button-running-cancel.story.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAKjD,QAAA,MAAM,SAAS,+CAmEd,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/lib/types/button/stories/index.d.ts

@@ -25,6 +25,7 @@ export { default as ButtonVariants } from './button-variants.story';
 export { default as ButtonLoading } from './button-loading.story';
 export { default as ButtonDisabled } from './button-disabled.story';
 export { default as ButtonFloating } from './button-floating.story';
+export { default as ButtonRunningCancel } from './button-running-cancel.story';
 export declare const ButtonSizesSrc: string;
 export declare const ButtonLeadingIconSrc: string;
 export declare const ButtonFluidSrc: string;
@@ -32,4 +33,5 @@ export declare const ButtonVariantsSrc: string;
 export declare const ButtonLoadingSrc: string;
 export declare const ButtonDisabledSrc: string;
 export declare const ButtonFloatingSrc: string;
+export declare const ButtonRunningCancelSrc: string;
 //# sourceMappingURL=index.d.ts.map

package/lib/types/button/stories/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/button/stories/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACpE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACpE,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAWpE,eAAO,MAAM,cAAc,QAAyC,CAAC;AACrE,eAAO,MAAM,oBAAoB,QAEhC,CAAC;AACF,eAAO,MAAM,cAAc,QAAyC,CAAC;AACrE,eAAO,MAAM,iBAAiB,QAA4C,CAAC;AAC3E,eAAO,MAAM,gBAAgB,QAA2C,CAAC;AACzE,eAAO,MAAM,iBAAiB,QAA4C,CAAC;AAC3E,eAAO,MAAM,iBAAiB,QAA4C,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/button/stories/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACpE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACpE,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACpE,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,+BAA+B,CAAC;AAY/E,eAAO,MAAM,cAAc,QAAyC,CAAC;AACrE,eAAO,MAAM,oBAAoB,QAEhC,CAAC;AACF,eAAO,MAAM,cAAc,QAAyC,CAAC;AACrE,eAAO,MAAM,iBAAiB,QAA4C,CAAC;AAC3E,eAAO,MAAM,gBAAgB,QAA2C,CAAC;AACzE,eAAO,MAAM,iBAAiB,QAA4C,CAAC;AAC3E,eAAO,MAAM,iBAAiB,QAA4C,CAAC;AAC3E,eAAO,MAAM,sBAAsB,QAElC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neo4j-ndl/react",
-  "version": "4.11.0",
+  "version": "4.11.2",
   "sideEffects": false,
   "description": "React implementation of Neo4j Design System",
   "keywords": [
@@ -87,7 +87,7 @@
     "@tanstack/react-table": "8.21.3",
     "react": ">=19.0.0",
     "react-dom": ">=19.0.0",
-    "@neo4j-ndl/base": "^4.11.0"
+    "@neo4j-ndl/base": "^4.11.1"
   },
   "dependencies": {
     "@dnd-kit/core": "6.3.1",