@neo4j-ndl/react 4.9.14 → 4.9.16
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/cjs/ai/reasoning/Reasoning.js +20 -16
- package/lib/cjs/ai/reasoning/Reasoning.js.map +1 -1
- package/lib/cjs/ai/reasoning/stories/index.js +1 -5
- package/lib/cjs/ai/reasoning/stories/index.js.map +1 -1
- package/lib/cjs/ai/reasoning/stories/reasoning-full.story.js +1 -1
- package/lib/cjs/ai/reasoning/stories/reasoning-full.story.js.map +1 -1
- package/lib/cjs/popover/Popover.js.map +1 -1
- package/lib/cjs/popover/stories/index.js +5 -1
- package/lib/cjs/popover/stories/index.js.map +1 -1
- package/lib/cjs/popover/stories/popover-controlled.story.js +34 -0
- package/lib/cjs/popover/stories/popover-controlled.story.js.map +1 -0
- package/lib/cjs/popover/use-popover.js +10 -5
- package/lib/cjs/popover/use-popover.js.map +1 -1
- package/lib/esm/ai/reasoning/Reasoning.js +22 -18
- package/lib/esm/ai/reasoning/Reasoning.js.map +1 -1
- package/lib/esm/ai/reasoning/stories/index.js +0 -3
- package/lib/esm/ai/reasoning/stories/index.js.map +1 -1
- package/lib/esm/ai/reasoning/stories/reasoning-full.story.js +2 -2
- package/lib/esm/ai/reasoning/stories/reasoning-full.story.js.map +1 -1
- package/lib/esm/popover/Popover.js.map +1 -1
- package/lib/esm/popover/stories/index.js +3 -0
- package/lib/esm/popover/stories/index.js.map +1 -1
- package/lib/esm/{ai/reasoning/stories/reasoning-controlled.story.js → popover/stories/popover-controlled.story.js} +6 -6
- package/lib/esm/popover/stories/popover-controlled.story.js.map +1 -0
- package/lib/esm/popover/use-popover.js +10 -5
- package/lib/esm/popover/use-popover.js.map +1 -1
- package/lib/types/ai/reasoning/Reasoning.d.ts +7 -4
- package/lib/types/ai/reasoning/Reasoning.d.ts.map +1 -1
- package/lib/types/ai/reasoning/stories/index.d.ts +0 -2
- package/lib/types/ai/reasoning/stories/index.d.ts.map +1 -1
- package/lib/types/ai/reasoning/stories/reasoning-full.story.d.ts.map +1 -1
- package/lib/types/popover/Popover.d.ts +1 -1
- package/lib/types/popover/Popover.d.ts.map +1 -1
- package/lib/types/popover/stories/index.d.ts +2 -0
- package/lib/types/popover/stories/index.d.ts.map +1 -1
- package/lib/types/{ai/reasoning/stories/reasoning-controlled.story.d.ts → popover/stories/popover-controlled.story.d.ts} +1 -1
- package/lib/types/popover/stories/popover-controlled.story.d.ts.map +1 -0
- package/lib/types/popover/use-popover.d.ts +0 -1
- package/lib/types/popover/use-popover.d.ts.map +1 -1
- package/package.json +2 -2
- package/lib/cjs/ai/reasoning/stories/reasoning-controlled.story.js +0 -34
- package/lib/cjs/ai/reasoning/stories/reasoning-controlled.story.js.map +0 -1
- package/lib/esm/ai/reasoning/stories/reasoning-controlled.story.js.map +0 -1
- package/lib/types/ai/reasoning/stories/reasoning-controlled.story.d.ts.map +0 -1
|
@@ -40,7 +40,6 @@ const react_1 = require("@neo4j-ndl/react");
|
|
|
40
40
|
const icons_1 = require("@neo4j-ndl/react/icons");
|
|
41
41
|
const classnames_1 = __importDefault(require("classnames"));
|
|
42
42
|
const react_2 = require("react");
|
|
43
|
-
const use_semi_controlled_state_1 = require("../../_common/use-semi-controlled-state");
|
|
44
43
|
const presence_1 = require("../presence");
|
|
45
44
|
const thinking_duration_formatter_1 = require("../thinking/thinking-duration-formatter");
|
|
46
45
|
/**
|
|
@@ -54,27 +53,32 @@ const ReasoningComponent = (_a) => {
|
|
|
54
53
|
const classes = (0, classnames_1.default)('ndl-ai-reasoning', className);
|
|
55
54
|
const [isExpanded, setIsExpanded] = (0, react_2.useState)(false);
|
|
56
55
|
const shouldShowChildren = isExpanded && isThinking === false;
|
|
56
|
+
const buttonId = (0, react_2.useId)();
|
|
57
|
+
const panelId = (0, react_2.useId)();
|
|
57
58
|
const { value: thinkingDuration, unit } = (0, thinking_duration_formatter_1.formatThinkingDuration)(thinkingMs);
|
|
58
|
-
return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ ref: ref, className: classes, style: style }, restProps, htmlAttributes, { children: [(0, jsx_runtime_1.jsx)(react_1.Typography,
|
|
59
|
+
return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ ref: ref, className: classes, style: style }, restProps, htmlAttributes, { children: [(0, jsx_runtime_1.jsx)(react_1.Typography, Object.assign({ variant: "label", className: (0, classnames_1.default)('ndl-ai-reasoning-header', {
|
|
60
|
+
'ndl-expanded': isExpanded,
|
|
61
|
+
}) }, (!isThinking
|
|
62
|
+
? {
|
|
63
|
+
as: 'button',
|
|
64
|
+
htmlAttributes: {
|
|
65
|
+
'aria-controls': panelId,
|
|
66
|
+
'aria-expanded': isExpanded,
|
|
67
|
+
id: buttonId,
|
|
68
|
+
onClick: () => setIsExpanded(!isExpanded),
|
|
69
|
+
type: 'button',
|
|
70
|
+
},
|
|
71
|
+
}
|
|
72
|
+
: { as: 'div', htmlAttributes: { id: buttonId } }), { children: isThinking === true ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(presence_1.Presence, { isThinking: isThinking, className: "ndl-ai-reasoning-presence" }), (0, jsx_runtime_1.jsxs)("span", { className: "ndl-ai-reasoning-header-text", children: [currentAction, "..."] })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("span", { children: ["Thought for ", thinkingDuration, " ", unit] }), (0, jsx_runtime_1.jsx)(icons_1.ChevronDownIconOutline, { className: (0, classnames_1.default)('ndl-ai-reasoning-chevron', {
|
|
59
73
|
'ndl-expanded': isExpanded,
|
|
60
|
-
})
|
|
74
|
+
}) })] })) })), (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ndl-ai-reasoning-content', {
|
|
61
75
|
'ndl-expanded': shouldShowChildren,
|
|
62
|
-
}), inert: !shouldShowChildren, children: (0, jsx_runtime_1.jsx)("div", { className: "ndl-ai-reasoning-content-inner", children: (0, jsx_runtime_1.jsx)("div", { className: "ndl-ai-reasoning-content-inner-2", children: children }) }) })] })));
|
|
76
|
+
}), inert: !shouldShowChildren, "aria-hidden": !shouldShowChildren, "aria-labelledby": buttonId, role: "region", id: panelId, children: (0, jsx_runtime_1.jsx)("div", { className: "ndl-ai-reasoning-content-inner", children: (0, jsx_runtime_1.jsx)("div", { className: "ndl-ai-reasoning-content-inner-2", children: children }) }) })] })));
|
|
63
77
|
};
|
|
64
78
|
const Section = (_a) => {
|
|
65
|
-
var
|
|
66
|
-
var { heading, leadingVisual, children, className, style, htmlAttributes, ref, isExpanded, isDefaultExpanded, onExpandChange } = _a, restProps = __rest(_a, ["heading", "leadingVisual", "children", "className", "style", "htmlAttributes", "ref", "isExpanded", "isDefaultExpanded", "onExpandChange"]);
|
|
79
|
+
var { heading, leadingVisual, children, className, style, htmlAttributes, ref, isExpanded: _isExpanded, isDefaultExpanded: _isDefaultExpanded, onExpandChange: _onExpandChange } = _a, restProps = __rest(_a, ["heading", "leadingVisual", "children", "className", "style", "htmlAttributes", "ref", "isExpanded", "isDefaultExpanded", "onExpandChange"]);
|
|
67
80
|
const classes = (0, classnames_1.default)('ndl-ai-reasoning-section', className);
|
|
68
|
-
|
|
69
|
-
isControlled: isExpanded !== undefined,
|
|
70
|
-
onChange: onExpandChange,
|
|
71
|
-
state: (_b = isExpanded !== null && isExpanded !== void 0 ? isExpanded : isDefaultExpanded) !== null && _b !== void 0 ? _b : false,
|
|
72
|
-
});
|
|
73
|
-
return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ ref: ref, className: classes, style: style }, restProps, htmlAttributes, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "ndl-ai-reasoning-section-header", children: [(0, jsx_runtime_1.jsx)("div", { className: "ndl-ai-reasoning-section-leading", children: leadingVisual }), (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "subheading-small", children: heading }), (0, jsx_runtime_1.jsx)(react_1.CleanIconButton, { description: isExpandedState ? 'Collapse' : 'Expand', size: "small", variant: "neutral", className: (0, classnames_1.default)('ndl-ai-reasoning-expand-button', {
|
|
74
|
-
'ndl-expanded': isExpandedState,
|
|
75
|
-
}), onClick: () => setIsExpandedState((prev) => !prev), children: (0, jsx_runtime_1.jsx)(icons_1.ChevronDownIconOutline, {}) })] }), (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ndl-ai-reasoning-section-content', {
|
|
76
|
-
'ndl-expanded': isExpandedState,
|
|
77
|
-
}), inert: !isExpandedState, children: (0, jsx_runtime_1.jsx)("div", { className: "ndl-ai-reasoning-section-content-inner", children: (0, jsx_runtime_1.jsxs)("div", { className: "ndl-ai-reasoning-section-content-inner-2", children: [(0, jsx_runtime_1.jsx)("div", { className: "ndl-ai-reasoning-section-content-line-container", children: (0, jsx_runtime_1.jsx)("div", { className: "ndl-ai-reasoning-section-content-line" }) }), (0, jsx_runtime_1.jsx)("div", { className: "ndl-ai-reasoning-section-content-children", children: children })] }) }) })] })));
|
|
81
|
+
return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ ref: ref, className: classes, style: style }, restProps, htmlAttributes, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "ndl-ai-reasoning-section-header", children: [(0, jsx_runtime_1.jsx)("div", { className: "ndl-ai-reasoning-section-leading", children: leadingVisual }), (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "subheading-small", children: heading })] }), (0, jsx_runtime_1.jsxs)("div", { className: "ndl-ai-reasoning-section-content", children: [(0, jsx_runtime_1.jsx)("div", { className: "ndl-ai-reasoning-section-content-line-container", children: (0, jsx_runtime_1.jsx)("div", { className: "ndl-ai-reasoning-section-content-line" }) }), (0, jsx_runtime_1.jsx)("div", { className: "ndl-ai-reasoning-section-content-children", children: children })] })] })));
|
|
78
82
|
};
|
|
79
83
|
const Footer = (_a) => {
|
|
80
84
|
var { children, className, style, htmlAttributes, ref } = _a, restProps = __rest(_a, ["children", "className", "style", "htmlAttributes", "ref"]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Reasoning.js","sourceRoot":"","sources":["../../../../src/ai/reasoning/Reasoning.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 */\n\nimport { CleanIconButton, Typography } from '@neo4j-ndl/react';\nimport { ChevronDownIconOutline } from '@neo4j-ndl/react/icons';\nimport classNames from 'classnames';\nimport { useState } from 'react';\n\nimport { type CommonProps } from '../../_common/types';\nimport { useSemicontrolledState } from '../../_common/use-semi-controlled-state';\nimport { Presence } from '../presence';\nimport { formatThinkingDuration } from '../thinking/thinking-duration-formatter';\n\ntype ReasoningProps = {\n /** What should be displayed inside the reasoning component. */\n children?: React.ReactNode;\n /** Whether the AI is thinking */\n isThinking?: boolean;\n /** The duration of the thinking in milliseconds */\n thinkingMs?: number;\n /** The current action the AI is performing */\n currentAction?: string;\n};\n\n/**\n * The component is used to display the reasoning state of an LLM.\n * It has an accordion like behavior to show the reasoning steps.\n *\n * @alpha - Changes to this component may be breaking.\n */\nconst ReasoningComponent = ({\n isThinking = true,\n thinkingMs = 1000,\n currentAction = 'Thinking',\n children,\n className,\n style,\n htmlAttributes,\n ref,\n ...restProps\n}: CommonProps<'div', ReasoningProps>) => {\n const classes = classNames('ndl-ai-reasoning', className);\n const [isExpanded, setIsExpanded] = useState(false);\n const shouldShowChildren = isExpanded && isThinking === false;\n\n const { value: thinkingDuration, unit } = formatThinkingDuration(thinkingMs);\n\n return (\n <div\n ref={ref}\n className={classes}\n style={style}\n {...restProps}\n {...htmlAttributes}\n >\n <Typography variant=\"label\" className=\"ndl-ai-reasoning-header\">\n {isThinking === true ? (\n <>\n <Presence isThinking={isThinking} className=\"n-size-token-24\" />\n <span className=\"ndl-ai-reasoning-header-text\">\n {currentAction}...\n </span>\n </>\n ) : (\n <>\n <span>\n Thought for {thinkingDuration} {unit}\n </span>\n <CleanIconButton\n size=\"small\"\n variant=\"neutral\"\n onClick={() => setIsExpanded(!isExpanded)}\n description={isExpanded ? 'Collapse' : 'Expand'}\n className={classNames('ndl-ai-reasoning-expand-button', {\n 'ndl-expanded': isExpanded,\n })}\n >\n <ChevronDownIconOutline />\n </CleanIconButton>\n </>\n )}\n </Typography>\n <div\n className={classNames('ndl-ai-reasoning-content', {\n 'ndl-expanded': shouldShowChildren,\n })}\n inert={!shouldShowChildren}\n >\n <div className=\"ndl-ai-reasoning-content-inner\">\n <div className=\"ndl-ai-reasoning-content-inner-2\">{children}</div>\n </div>\n </div>\n </div>\n );\n};\n\ntype SectionProps = {\n /** The heading of the section */\n heading?: React.ReactNode;\n /** The children of the section */\n children?: React.ReactNode;\n /** The visual leading the section */\n leadingVisual?: React.ReactNode;\n /** Whether the section is expanded */\n isExpanded?: boolean;\n /** The default value of the section is expanded */\n isDefaultExpanded?: boolean;\n /** Callback function triggered when the section is expanded */\n onExpandChange?: (isExpanded: boolean) => void;\n};\n\nconst Section = ({\n heading,\n leadingVisual,\n children,\n className,\n style,\n htmlAttributes,\n ref,\n isExpanded,\n isDefaultExpanded,\n onExpandChange,\n ...restProps\n}: CommonProps<'div', SectionProps>) => {\n const classes = classNames('ndl-ai-reasoning-section', className);\n const [isExpandedState, setIsExpandedState] = useSemicontrolledState({\n isControlled: isExpanded !== undefined,\n onChange: onExpandChange,\n state: isExpanded ?? isDefaultExpanded ?? false,\n });\n\n return (\n <div\n ref={ref}\n className={classes}\n style={style}\n {...restProps}\n {...htmlAttributes}\n >\n <div className=\"ndl-ai-reasoning-section-header\">\n <div className=\"ndl-ai-reasoning-section-leading\">{leadingVisual}</div>\n <Typography variant=\"subheading-small\">{heading}</Typography>\n <CleanIconButton\n description={isExpandedState ? 'Collapse' : 'Expand'}\n size=\"small\"\n variant=\"neutral\"\n className={classNames('ndl-ai-reasoning-expand-button', {\n 'ndl-expanded': isExpandedState,\n })}\n onClick={() => setIsExpandedState((prev) => !prev)}\n >\n <ChevronDownIconOutline />\n </CleanIconButton>\n </div>\n <div\n className={classNames('ndl-ai-reasoning-section-content', {\n 'ndl-expanded': isExpandedState,\n })}\n inert={!isExpandedState}\n >\n <div className=\"ndl-ai-reasoning-section-content-inner\">\n <div className=\"ndl-ai-reasoning-section-content-inner-2\">\n <div className=\"ndl-ai-reasoning-section-content-line-container\">\n <div className=\"ndl-ai-reasoning-section-content-line\" />\n </div>\n <div className=\"ndl-ai-reasoning-section-content-children\">\n {children}\n </div>\n </div>\n </div>\n </div>\n </div>\n );\n};\n\nconst Footer = ({\n children,\n className,\n style,\n htmlAttributes,\n ref,\n ...restProps\n}: CommonProps<'div', { children: React.ReactNode }>) => {\n const classes = classNames('ndl-ai-reasoning-footer', className);\n return (\n <Typography\n as=\"div\"\n variant=\"body-small\"\n className={classes}\n style={style}\n ref={ref}\n {...restProps}\n {...htmlAttributes}\n >\n {children}\n </Typography>\n );\n};\n\nconst Reasoning = Object.assign(ReasoningComponent, {\n Footer,\n Section,\n});\n\nexport { Reasoning };\n"]}
|
|
1
|
+
{"version":3,"file":"Reasoning.js","sourceRoot":"","sources":["../../../../src/ai/reasoning/Reasoning.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 */\n\nimport { Typography } from '@neo4j-ndl/react';\nimport { ChevronDownIconOutline } from '@neo4j-ndl/react/icons';\nimport classNames from 'classnames';\nimport { useId, useState } from 'react';\n\nimport { type CommonProps } from '../../_common/types';\nimport { Presence } from '../presence';\nimport { formatThinkingDuration } from '../thinking/thinking-duration-formatter';\n\ntype ReasoningProps = {\n /** What should be displayed inside the reasoning component. */\n children?: React.ReactNode;\n /** Whether the AI is thinking */\n isThinking?: boolean;\n /** The duration of the thinking in milliseconds */\n thinkingMs?: number;\n /** The current action the AI is performing */\n currentAction?: string;\n};\n\n/**\n * The component is used to display the reasoning state of an LLM.\n * It has an accordion like behavior to show the reasoning steps.\n *\n * @alpha - Changes to this component may be breaking.\n */\nconst ReasoningComponent = ({\n isThinking = true,\n thinkingMs = 1000,\n currentAction = 'Thinking',\n children,\n className,\n style,\n htmlAttributes,\n ref,\n ...restProps\n}: CommonProps<'div', ReasoningProps>) => {\n const classes = classNames('ndl-ai-reasoning', className);\n const [isExpanded, setIsExpanded] = useState(false);\n const shouldShowChildren = isExpanded && isThinking === false;\n const buttonId = useId();\n const panelId = useId();\n\n const { value: thinkingDuration, unit } = formatThinkingDuration(thinkingMs);\n\n return (\n <div\n ref={ref}\n className={classes}\n style={style}\n {...restProps}\n {...htmlAttributes}\n >\n <Typography\n variant=\"label\"\n className={classNames('ndl-ai-reasoning-header', {\n 'ndl-expanded': isExpanded,\n })}\n {...(!isThinking\n ? {\n as: 'button',\n htmlAttributes: {\n 'aria-controls': panelId,\n 'aria-expanded': isExpanded,\n id: buttonId,\n onClick: () => setIsExpanded(!isExpanded),\n type: 'button',\n },\n }\n : { as: 'div', htmlAttributes: { id: buttonId } })}\n >\n {isThinking === true ? (\n <>\n <Presence\n isThinking={isThinking}\n className=\"ndl-ai-reasoning-presence\"\n />\n <span className=\"ndl-ai-reasoning-header-text\">\n {currentAction}...\n </span>\n </>\n ) : (\n <>\n <span>\n Thought for {thinkingDuration} {unit}\n </span>\n <ChevronDownIconOutline\n className={classNames('ndl-ai-reasoning-chevron', {\n 'ndl-expanded': isExpanded,\n })}\n />\n </>\n )}\n </Typography>\n <div\n className={classNames('ndl-ai-reasoning-content', {\n 'ndl-expanded': shouldShowChildren,\n })}\n inert={!shouldShowChildren}\n aria-hidden={!shouldShowChildren}\n aria-labelledby={buttonId}\n role=\"region\"\n id={panelId}\n >\n <div className=\"ndl-ai-reasoning-content-inner\">\n <div className=\"ndl-ai-reasoning-content-inner-2\">{children}</div>\n </div>\n </div>\n </div>\n );\n};\n\ntype SectionProps = {\n /** The heading of the section */\n heading?: React.ReactNode;\n /** The children of the section */\n children?: React.ReactNode;\n /** The visual leading the section */\n leadingVisual?: React.ReactNode;\n // TODO v5: remove this prop\n /** Whether the section is expanded.\n * @deprecated - Does nothing, will be removed in v5 */\n isExpanded?: boolean;\n // TODO v5: remove this prop\n /** The default value of the section is expanded.\n * @deprecated - Does nothing, will be removed in v5 */\n isDefaultExpanded?: boolean;\n // TODO v5: remove this prop\n /** Callback function triggered when the section is expanded.\n * @deprecated - Does nothing, will be removed in v5 */\n onExpandChange?: (isExpanded: boolean) => void;\n};\n\nconst Section = ({\n heading,\n leadingVisual,\n children,\n className,\n style,\n htmlAttributes,\n ref,\n isExpanded: _isExpanded,\n isDefaultExpanded: _isDefaultExpanded,\n onExpandChange: _onExpandChange,\n ...restProps\n}: CommonProps<'div', SectionProps>) => {\n const classes = classNames('ndl-ai-reasoning-section', className);\n\n return (\n <div\n ref={ref}\n className={classes}\n style={style}\n {...restProps}\n {...htmlAttributes}\n >\n <div className=\"ndl-ai-reasoning-section-header\">\n <div className=\"ndl-ai-reasoning-section-leading\">{leadingVisual}</div>\n <Typography variant=\"subheading-small\">{heading}</Typography>\n </div>\n <div className=\"ndl-ai-reasoning-section-content\">\n <div className=\"ndl-ai-reasoning-section-content-line-container\">\n <div className=\"ndl-ai-reasoning-section-content-line\" />\n </div>\n <div className=\"ndl-ai-reasoning-section-content-children\">\n {children}\n </div>\n </div>\n </div>\n );\n};\n\nconst Footer = ({\n children,\n className,\n style,\n htmlAttributes,\n ref,\n ...restProps\n}: CommonProps<'div', { children: React.ReactNode }>) => {\n const classes = classNames('ndl-ai-reasoning-footer', className);\n return (\n <Typography\n as=\"div\"\n variant=\"body-small\"\n className={classes}\n style={style}\n ref={ref}\n {...restProps}\n {...htmlAttributes}\n >\n {children}\n </Typography>\n );\n};\n\nconst Reasoning = Object.assign(ReasoningComponent, {\n Footer,\n Section,\n});\n\nexport { Reasoning };\n"]}
|
|
@@ -23,14 +23,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
23
23
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
24
24
|
};
|
|
25
25
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
26
|
-
exports.
|
|
26
|
+
exports.ReasoningFullSrc = exports.ReasoningFull = void 0;
|
|
27
27
|
var reasoning_full_story_1 = require("./reasoning-full.story");
|
|
28
28
|
Object.defineProperty(exports, "ReasoningFull", { enumerable: true, get: function () { return __importDefault(reasoning_full_story_1).default; } });
|
|
29
|
-
var reasoning_controlled_story_1 = require("./reasoning-controlled.story");
|
|
30
|
-
Object.defineProperty(exports, "ReasoningControlled", { enumerable: true, get: function () { return __importDefault(reasoning_controlled_story_1).default; } });
|
|
31
29
|
const export_stories_utils_1 = require("../../../_common/export-stories-utils");
|
|
32
|
-
const reasoning_controlled_story_raw_1 = __importDefault(require("./reasoning-controlled.story?raw"));
|
|
33
30
|
const reasoning_full_story_raw_1 = __importDefault(require("./reasoning-full.story?raw"));
|
|
34
31
|
exports.ReasoningFullSrc = (0, export_stories_utils_1.removeLicenseHeader)(reasoning_full_story_raw_1.default);
|
|
35
|
-
exports.ReasoningControlledSrc = (0, export_stories_utils_1.removeLicenseHeader)(reasoning_controlled_story_raw_1.default);
|
|
36
32
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/ai/reasoning/stories/index.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;;;;;;AAEH,+DAAkE;AAAzD,sIAAA,OAAO,OAAiB;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/ai/reasoning/stories/index.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;;;;;;AAEH,+DAAkE;AAAzD,sIAAA,OAAO,OAAiB;AAEjC,gFAA4E;AAC5E,0FAA6D;AAEhD,QAAA,gBAAgB,GAAG,IAAA,0CAAmB,EAAC,kCAAmB,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 ReasoningFull } from './reasoning-full.story';\n\nimport { removeLicenseHeader } from '../../../_common/export-stories-utils';\nimport ReasoningFullSrcRaw from './reasoning-full.story?raw';\n\nexport const ReasoningFullSrc = removeLicenseHeader(ReasoningFullSrcRaw);\n"]}
|
|
@@ -28,7 +28,7 @@ const icons_1 = require("@neo4j-ndl/react/icons");
|
|
|
28
28
|
const react_2 = require("react");
|
|
29
29
|
const Component = () => {
|
|
30
30
|
const [isThinking, setThinking] = (0, react_2.useState)(true);
|
|
31
|
-
return ((0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-flex-col n-gap-token-12", children: [(0, jsx_runtime_1.jsx)(react_1.FilledButton, { onClick: () => setThinking(!isThinking), children: isThinking ? 'Stop Thinking' : 'Start Thinking' }), (0, jsx_runtime_1.jsxs)(ai_1.Reasoning, { isThinking: isThinking, thinkingMs: 1400, currentAction: "Creating an action plan", children: [(0, jsx_runtime_1.jsx)(ai_1.Reasoning.Section, { leadingVisual: (0, jsx_runtime_1.jsx)(icons_1.PencilSquareIconOutline, {}), heading: "Creating an action plan", isDefaultExpanded: true, children: "Step 1 content" }), (0, jsx_runtime_1.jsx)(ai_1.Reasoning.Section, { leadingVisual: (0, jsx_runtime_1.jsx)(icons_1.WrenchIconOutline, {}), heading: "Applying agent tools", children: "Step 2 content" }), (0, jsx_runtime_1.jsxs)(ai_1.Reasoning.Footer, { children: ["Footer information", (0, jsx_runtime_1.
|
|
31
|
+
return ((0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-flex-col n-gap-token-12", children: [(0, jsx_runtime_1.jsx)(react_1.FilledButton, { onClick: () => setThinking(!isThinking), children: isThinking ? 'Stop Thinking' : 'Start Thinking' }), (0, jsx_runtime_1.jsxs)(ai_1.Reasoning, { isThinking: isThinking, thinkingMs: 1400, currentAction: "Creating an action plan", children: [(0, jsx_runtime_1.jsx)(ai_1.Reasoning.Section, { leadingVisual: (0, jsx_runtime_1.jsx)(icons_1.PencilSquareIconOutline, {}), heading: "Creating an action plan", isDefaultExpanded: true, children: "Step 1 content" }), (0, jsx_runtime_1.jsx)(ai_1.Reasoning.Section, { leadingVisual: (0, jsx_runtime_1.jsx)(icons_1.WrenchIconOutline, {}), heading: "Applying agent tools", children: "Step 2 content" }), (0, jsx_runtime_1.jsxs)(ai_1.Reasoning.Footer, { children: ["Footer information", (0, jsx_runtime_1.jsxs)(react_1.Tooltip, { type: "simple", children: [(0, jsx_runtime_1.jsx)(react_1.Tooltip.Trigger, { htmlAttributes: { 'aria-label': 'Info about things like tokens' }, children: (0, jsx_runtime_1.jsx)(icons_1.InformationCircleIconOutline, { className: "n-size-token-16" }) }), (0, jsx_runtime_1.jsx)(react_1.Tooltip.Content, { children: "Info about things like tokens" })] })] })] })] }));
|
|
32
32
|
};
|
|
33
33
|
exports.default = Component;
|
|
34
34
|
//# sourceMappingURL=reasoning-full.story.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"reasoning-full.story.js","sourceRoot":"","sources":["../../../../../src/ai/reasoning/stories/reasoning-full.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,
|
|
1
|
+
{"version":3,"file":"reasoning-full.story.js","sourceRoot":"","sources":["../../../../../src/ai/reasoning/stories/reasoning-full.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAAyD;AACzD,4CAAgD;AAChD,kDAIgC;AAChC,iCAAiC;AAEjC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,UAAU,EAAE,WAAW,CAAC,GAAG,IAAA,gBAAQ,EAAC,IAAI,CAAC,CAAC;IAEjD,OAAO,CACL,iCAAK,SAAS,EAAC,kCAAkC,aAC/C,uBAAC,oBAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,CAAC,UAAU,CAAC,YAClD,UAAU,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,gBAAgB,GACnC,EACf,wBAAC,cAAS,IACR,UAAU,EAAE,UAAU,EACtB,UAAU,EAAE,IAAI,EAChB,aAAa,EAAC,yBAAyB,aAEvC,uBAAC,cAAS,CAAC,OAAO,IAChB,aAAa,EAAE,uBAAC,+BAAuB,KAAG,EAC1C,OAAO,EAAC,yBAAyB,EACjC,iBAAiB,EAAE,IAAI,+BAGL,EACpB,uBAAC,cAAS,CAAC,OAAO,IAChB,aAAa,EAAE,uBAAC,yBAAiB,KAAG,EACpC,OAAO,EAAC,sBAAsB,+BAGZ,EACpB,wBAAC,cAAS,CAAC,MAAM,qCAEf,wBAAC,eAAO,IAAC,IAAI,EAAC,QAAQ,aACpB,uBAAC,eAAO,CAAC,OAAO,IACd,cAAc,EAAE,EAAE,YAAY,EAAE,+BAA+B,EAAE,YAEjE,uBAAC,oCAA4B,IAAC,SAAS,EAAC,iBAAiB,GAAG,GAC5C,EAClB,uBAAC,eAAO,CAAC,OAAO,gDAAgD,IACxD,IACO,IACT,IACR,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, Tooltip } from '@neo4j-ndl/react';\nimport { Reasoning } from '@neo4j-ndl/react/ai';\nimport {\n InformationCircleIconOutline,\n PencilSquareIconOutline,\n WrenchIconOutline,\n} from '@neo4j-ndl/react/icons';\nimport { useState } from 'react';\n\nconst Component = () => {\n const [isThinking, setThinking] = useState(true);\n\n return (\n <div className=\"n-flex n-flex-col n-gap-token-12\">\n <FilledButton onClick={() => setThinking(!isThinking)}>\n {isThinking ? 'Stop Thinking' : 'Start Thinking'}\n </FilledButton>\n <Reasoning\n isThinking={isThinking}\n thinkingMs={1400}\n currentAction=\"Creating an action plan\"\n >\n <Reasoning.Section\n leadingVisual={<PencilSquareIconOutline />}\n heading=\"Creating an action plan\"\n isDefaultExpanded={true}\n >\n Step 1 content\n </Reasoning.Section>\n <Reasoning.Section\n leadingVisual={<WrenchIconOutline />}\n heading=\"Applying agent tools\"\n >\n Step 2 content\n </Reasoning.Section>\n <Reasoning.Footer>\n Footer information\n <Tooltip type=\"simple\">\n <Tooltip.Trigger\n htmlAttributes={{ 'aria-label': 'Info about things like tokens' }}\n >\n <InformationCircleIconOutline className=\"n-size-token-16\" />\n </Tooltip.Trigger>\n <Tooltip.Content>Info about things like tokens</Tooltip.Content>\n </Tooltip>\n </Reasoning.Footer>\n </Reasoning>\n </div>\n );\n};\n\nexport default Component;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Popover.js","sourceRoot":"","sources":["../../../src/popover/Popover.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,8CAM4B;AAC5B,4DAAoC;AACpC,kDAA0B;AAM1B,0DAAsD;AACtD,6DAA6D;AAC7D,0DAAwD;AACxD,+CAA2C;AAC3C,+EAA4E;AAgB/D,QAAA,oBAAoB,GAAwC;IACvE,yBAAyB,EAAE,WAAW;IACtC,oBAAoB,EAAE,YAAY;IAClC,0BAA0B,EAAE,QAAQ;IACpC,yBAAyB,EAAE,UAAU;IACrC,wBAAwB,EAAE,cAAc;IACxC,yBAAyB,EAAE,OAAO;IAClC,yBAAyB,EAAE,MAAM;IACjC,oBAAoB,EAAE,SAAS;IAC/B,mBAAmB,EAAE,aAAa;IAClC,0BAA0B,EAAE,KAAK;IACjC,wBAAwB,EAAE,WAAW;IACrC,mBAAmB,EAAE,YAAY;CAClC,CAAC;AA4CF,MAAM,cAAc,GAAG,eAAK,CAAC,aAAa,CAAc,IAAI,CAAC,CAAC;AAEvD,MAAM,iBAAiB,GAAG,GAAG,EAAE;IACpC,MAAM,OAAO,GAAG,eAAK,CAAC,UAAU,CAAC,cAAc,CAAC,CAAC;IAEjD,IAAI,OAAO,KAAK,IAAI,EAAE,CAAC;QACrB,MAAM,IAAI,KAAK,CAAC,mDAAmD,CAAC,CAAC;IACvE,CAAC;IAED,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AARW,QAAA,iBAAiB,qBAQ5B;AAEF,MAAM,gBAAgB,GAAG,CAAC,EACxB,QAAQ,EACR,aAAa,EACb,SAAS,EACT,MAAM,EACN,MAAM,EACN,cAAc,EACd,eAAe,EAAE,mBAAmB,EACpC,kBAAkB,GAAG,KAAK,EAC1B,YAAY,EACZ,YAAY,EACZ,IAAI,EACJ,mBAAmB,GAAG,IAAI,EAC1B,UAAU,EAAE,cAAc,EAC1B,QAAQ,EAAE,YAAY,GACT,EAAE,EAAE;IACjB,MAAM,cAAc,GAAG,IAAA,kCAAiB,GAAE,CAAC;IAE3C,MAAM,QAAQ,GAAG,cAAc,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC;IACvD,MAAM,eAAe,GAAG,cAAc,CAAC;IACvC,MAAM,UAAU,GAAG,CAAC,cAAc,CAAC;IAEnC,MAAM,OAAO,GAAG,IAAA,wBAAU,EAAC;QACzB,aAAa,EAAE,aAAa;QAC5B,2BAA2B,EAAE,mBAAmB,aAAnB,mBAAmB,cAAnB,mBAAmB,GAAI,eAAe;QACnE,cAAc;QACd,mBAAmB;QACnB,YAAY;QACZ,MAAM,EAAE,MAAM;QACd,UAAU,EAAE,cAAc,aAAd,cAAc,cAAd,cAAc,GAAI,UAAU;QACxC,YAAY,EAAE,MAAM;QACpB,YAAY,EAAE,YAAY;QAC1B,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,4BAAoB,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,SAAS;QAClE,IAAI;QACJ,kBAAkB,EAAE,kBAAkB;QACtC,QAAQ,EAAE,YAAY,aAAZ,YAAY,cAAZ,YAAY,GAAI,QAAQ;KACnC,CAAC,CAAC;IAEH,OAAO,CACL,uBAAC,cAAc,CAAC,QAAQ,IAAC,KAAK,EAAE,OAAO,YACpC,QAAQ,GACe,CAC3B,CAAC;AACJ,CAAC,CAAC;AASF,MAAM,cAAc,GAAG,CAAC,EAKqB,EAAE,EAAE;QALzB,EACtB,QAAQ,EACR,gBAAgB,GAAG,KAAK,EACxB,GAAG,OAEwC,EADxC,KAAK,cAJc,uCAKvB,CADS;IAER,MAAM,OAAO,GAAG,IAAA,yBAAiB,GAAE,CAAC;IACpC,2BAA2B;IAC3B,8DAA8D;IAC9D,MAAM,aAAa,GAAI,QAAgB,CAAC,KAAK,CAAC;IAC9C,MAAM,UAAU,GAAG,IAAA,oBAAY,EAAC;QAC9B,OAAO,CAAC,IAAI,CAAC,YAAY;QACzB,GAAG;QACH,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,GAAG;KACnB,CAAC,CAAC;IAEH,uEAAuE;IACvE,IAAI,gBAAgB,IAAI,eAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,CAAC;QACvD,OAAO,eAAK,CAAC,YAAY,CACvB,QAAQ,EACR,OAAO,CAAC,iBAAiB,+CACpB,KAAK,GACL,aAAa,KAChB,YAAY,EAAE,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,EAChD,GAAG,EAAE,UAAU,IACf,CACH,CAAC;IACJ,CAAC;IACD,OAAO,CACL,iDACE,GAAG,EAAE,OAAO,CAAC,IAAI,CAAC,YAAY,EAC9B,IAAI,EAAC,QAAQ,gBACD,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,IAC1C,OAAO,CAAC,iBAAiB,CAAC,KAAK,CAAC,cAEnC,QAAQ,IACF,CACV,CAAC;AACJ,CAAC,CAAC;AAQF,MAAM,cAAc,GAAG,CAAsC,EAQZ,EAAE,EAAE;QARQ,EAC3D,EAAE,EACF,SAAS,EACT,KAAK,EACL,QAAQ,EACR,cAAc,EACd,GAAG,OAE4C,EAD5C,SAAS,cAP+C,iEAQ5D,CADa;IAEZ,MAAM,KAA2C,IAAA,yBAAiB,GAAE,EAA9D,EAAE,OAAO,EAAE,eAAe,OAAoC,EAA/B,OAAO,cAAtC,WAAwC,CAAsB,CAAC;IAErE,MAAM,IAAI,GAAG,IAAA,oBAAY,EAAC,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE,GAAG,CAAC,CAAC,CAAC;IAE3D,MAAM,EAAE,cAAc,EAAE,GAAG,IAAA,8BAAc,GAAE,CAAC;IAE5C,MAAM,OAAO,GAAG,IAAA,oBAAU,EAAC,aAAa,EAAE,cAAc,EAAE,SAAS,CAAC,CAAC;IACrE,MAAM,SAAS,GAAsB,EAAE,aAAF,EAAE,cAAF,EAAE,GAAI,KAAK,CAAC;IAEjD,mDAAmD;IACnD,4HAA4H;IAC5H,yDAAyD;IACzD,IAAA,yDAA2B,GAAE,CAAC;IAE9B,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,CAAC;QAC1B,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,CACL,uBAAC,kCAAe,IACd,UAAU,EAAE,OAAO,CAAC,UAAU,EAC9B,IAAI,EAAE,CAAC,YAAY,EAAE,EAAE;;YAAC,OAAA,CACtB,uBAAC,sBAAc,IACb,IAAI,EACF,CAAC,MAAA,OAAO,CAAC,2BAA2B,mCAAI,KAAK,CAAC;oBAC5C,CAAC,CAAE,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,OAA8B;oBACxD,CAAC,CAAC,SAAS,YAGd,YAAY,GACE,CAClB,CAAA;SAAA,YAED,uBAAC,4BAAoB,IACnB,OAAO,EAAE,eAAe,EACxB,KAAK,EAAE,OAAO,CAAC,kBAAkB,EACjC,YAAY,EAAE,OAAO,CAAC,YAAY,YAElC,uBAAC,SAAS,kBACR,SAAS,EAAE,OAAO,qBACD,OAAO,CAAC,OAAO,sBACd,OAAO,CAAC,aAAa,EACvC,KAAK,gDACA,OAAO,CAAC,cAAc,GACtB,OAAO,CAAC,gBAAgB,GACxB,KAAK,GAEV,GAAG,EAAE,IAAI,IACL,OAAO,CAAC,gBAAgB,mBAAM,cAAc,EAAG,EAC/C,SAAS,cAEZ,QAAQ,IACC,GACS,GACP,CACnB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,OAAO,GAAG,MAAM,CAAC,MAAM,CAAC,gBAAgB,EAAE;IAC9C,OAAO,EAAE,cAAc;IACvB,OAAO,EAAE,cAAc;CACxB,CAAC,CAAC;AAEM,0BAAO","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 {\n FloatingFocusManager,\n FloatingPortal,\n type OffsetOptions,\n type Placement,\n useMergeRefs,\n} from '@floating-ui/react';\nimport classNames from 'classnames';\nimport React from 'react';\n\nimport {\n type CommonProps,\n type PolymorphicCommonProps,\n} from '../_common/types';\nimport { ConditionalWrap } from '../conditional-wrap';\nimport { useIsInsideDialog } from '../dialog/dialog-context';\nimport { useNeedleTheme } from '../theme/ThemeProvider';\nimport { usePopover } from './use-popover';\nimport { usePatchFloatingFocusGuards } from './usePatchFloatingFocusGuards';\n\ntype PlacementOptions =\n | 'bottom-end-top-end'\n | 'bottom-start-top-start'\n | 'bottom-middle-top-middle'\n | 'top-end-bottom-end'\n | 'top-start-bottom-start'\n | 'top-middle-bottom-middle'\n | 'bottom-start-bottom-end'\n | 'top-start-top-end'\n | 'middle-start-middle-end'\n | 'bottom-end-bottom-start'\n | 'top-end-top-start'\n | 'middle-end-middle-start';\n\nexport const placementTranslation: Record<PlacementOptions, Placement> = {\n 'bottom-end-bottom-start': 'right-end',\n 'bottom-end-top-end': 'bottom-end',\n 'bottom-middle-top-middle': 'bottom',\n 'bottom-start-bottom-end': 'left-end',\n 'bottom-start-top-start': 'bottom-start',\n 'middle-end-middle-start': 'right',\n 'middle-start-middle-end': 'left',\n 'top-end-bottom-end': 'top-end',\n 'top-end-top-start': 'right-start',\n 'top-middle-bottom-middle': 'top',\n 'top-start-bottom-start': 'top-start',\n 'top-start-top-end': 'left-start',\n};\ntype PopoverProps = {\n /** if the popover is open */\n isOpen?: boolean;\n /** The content of the popover */\n children?: React.ReactNode;\n /** Can be used if the anchor should be separated from the trigger */\n anchorElement?: Element | null;\n /** If the anchorPosition is provided the anchorElement will be ignored */\n anchorPosition?: {\n x: number;\n y: number;\n };\n /** The placement of the floating element is determined by two sets of words. The first set of words specifies the point on the anchor element where the floating element will be attached. The second set of coordinates specifies the point on the floating element that will attach to the anchor element.*/\n placement?: PlacementOptions;\n /** can take either a number, an object or a function. Full documentation here: https://floating-ui.com/docs/offset */\n offset?: OffsetOptions;\n /** Called when the floating element is opened or closed */\n onOpenChange?: (isOpen: boolean, event?: Event) => void;\n /** Use anchorEl for portal's container. Should be used if the popover is portaled and is inside a Dialog for example. */\n hasAnchorPortal?: boolean;\n /** If the popover should constrain the focus inside the popover while open */\n shouldCaptureFocus?: boolean;\n /** Which element to initially focus. **/\n initialFocus?: number | React.RefObject<HTMLElement | null>;\n /** The role of the popover */\n role?:\n | 'tooltip'\n | 'dialog'\n | 'alertdialog'\n | 'menu'\n | 'listbox'\n | 'grid'\n | 'tree';\n /** If the popover should close when the user clicks outside of it */\n closeOnClickOutside?: boolean;\n /** The strategy of the popover. Fixed should be used when the popover is inside a Dialog. */\n strategy?: 'fixed' | 'absolute';\n /** Whether the content is rendered in a portal */\n isPortaled?: boolean;\n};\n\ntype ContextType = ReturnType<typeof usePopover> | null;\n\nconst PopoverContext = React.createContext<ContextType>(null);\n\nexport const usePopoverContext = () => {\n const context = React.useContext(PopoverContext);\n\n if (context === null) {\n throw new Error('Popover components must be wrapped in <Popover />');\n }\n\n return context;\n};\n\nconst PopoverComponent = ({\n children,\n anchorElement,\n placement,\n isOpen,\n offset,\n anchorPosition,\n hasAnchorPortal: hasAnchorPortalProp,\n shouldCaptureFocus = false,\n initialFocus,\n onOpenChange,\n role,\n closeOnClickOutside = true,\n isPortaled: isPortaledProp,\n strategy: strategyProp,\n}: PopoverProps) => {\n const isInsideDialog = useIsInsideDialog();\n\n const strategy = isInsideDialog ? 'fixed' : 'absolute';\n const hasAnchorPortal = isInsideDialog;\n const isPortaled = !isInsideDialog;\n\n const popover = usePopover({\n anchorElement: anchorElement,\n anchorElementAsPortalAnchor: hasAnchorPortalProp ?? hasAnchorPortal,\n anchorPosition,\n closeOnClickOutside,\n initialFocus,\n isOpen: isOpen,\n isPortaled: isPortaledProp ?? isPortaled,\n offsetOption: offset,\n onOpenChange: onOpenChange,\n placement: placement ? placementTranslation[placement] : undefined,\n role,\n shouldCaptureFocus: shouldCaptureFocus,\n strategy: strategyProp ?? strategy,\n });\n\n return (\n <PopoverContext.Provider value={popover}>\n {children}\n </PopoverContext.Provider>\n );\n};\n\ntype PopoverTriggerProps = {\n /** The content of the trigger */\n children: React.ReactNode;\n /** Whether the trigger should render a button element, or pass its props to the child element */\n hasButtonWrapper?: boolean;\n};\n\nconst PopoverTrigger = ({\n children,\n hasButtonWrapper = false,\n ref,\n ...props\n}: CommonProps<'button', PopoverTriggerProps>) => {\n const context = usePopoverContext();\n // Example from floating UI\n // oxlint-disable-next-line @typescript-eslint/no-explicit-any\n const childrenProps = (children as any).props;\n const mergedRefs = useMergeRefs([\n context.refs.setReference,\n ref,\n childrenProps?.ref,\n ]);\n\n // `hasButtonWrapper` allows the user to pass any element as the anchor\n if (hasButtonWrapper && React.isValidElement(children)) {\n return React.cloneElement(\n children,\n context.getReferenceProps({\n ...props,\n ...childrenProps,\n 'data-state': context.isOpen ? 'open' : 'closed',\n ref: mergedRefs,\n }),\n );\n }\n return (\n <button\n ref={context.refs.setReference}\n type=\"button\"\n data-state={context.isOpen ? 'open' : 'closed'}\n {...context.getReferenceProps(props)}\n >\n {children}\n </button>\n );\n};\n\ntype PopoverContentProps = {\n children: React.ReactNode;\n className?: string;\n style?: React.CSSProperties;\n};\n\nconst PopoverContent = <T extends React.ElementType = 'div'>({\n as,\n className,\n style,\n children,\n htmlAttributes,\n ref,\n ...restProps\n}: PolymorphicCommonProps<T, PopoverContentProps>) => {\n const { context: floatingContext, ...context } = usePopoverContext();\n\n const refs = useMergeRefs([context.refs.setFloating, ref]);\n\n const { themeClassName } = useNeedleTheme();\n\n const classes = classNames('ndl-popover', themeClassName, className);\n const Component: React.ElementType = as ?? 'div';\n\n // Patch to not get axe errors for the focus guards\n // To be noted is that axe gives us a false positive error here since the focus guards directly pass focus to other elements\n // https://github.com/floating-ui/floating-ui/issues/2462\n usePatchFloatingFocusGuards();\n\n if (!floatingContext.open) {\n return null;\n }\n\n return (\n <ConditionalWrap\n shouldWrap={context.isPortaled}\n wrap={(wrapChildren) => (\n <FloatingPortal\n root={\n (context.anchorElementAsPortalAnchor ?? false)\n ? (context.refs.reference.current as HTMLElement | null)\n : undefined\n }\n >\n {wrapChildren}\n </FloatingPortal>\n )}\n >\n <FloatingFocusManager\n context={floatingContext}\n modal={context.shouldCaptureFocus}\n initialFocus={context.initialFocus}\n >\n <Component\n className={classes}\n aria-labelledby={context.labelId}\n aria-describedby={context.descriptionId}\n style={{\n ...context.floatingStyles,\n ...context.transitionStyles,\n ...style,\n }}\n ref={refs}\n {...context.getFloatingProps({ ...htmlAttributes })}\n {...restProps}\n >\n {children}\n </Component>\n </FloatingFocusManager>\n </ConditionalWrap>\n );\n};\n\nconst Popover = Object.assign(PopoverComponent, {\n Content: PopoverContent,\n Trigger: PopoverTrigger,\n});\n\nexport { Popover };\n"]}
|
|
1
|
+
{"version":3,"file":"Popover.js","sourceRoot":"","sources":["../../../src/popover/Popover.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 {\n FloatingFocusManager,\n FloatingPortal,\n type OffsetOptions,\n type Placement,\n useMergeRefs,\n} from '@floating-ui/react';\nimport classNames from 'classnames';\nimport React from 'react';\n\nimport {\n type CommonProps,\n type PolymorphicCommonProps,\n} from '../_common/types';\nimport { ConditionalWrap } from '../conditional-wrap';\nimport { useIsInsideDialog } from '../dialog/dialog-context';\nimport { useNeedleTheme } from '../theme/ThemeProvider';\nimport { usePopover } from './use-popover';\nimport { usePatchFloatingFocusGuards } from './usePatchFloatingFocusGuards';\n\ntype PlacementOptions =\n | 'bottom-end-top-end'\n | 'bottom-start-top-start'\n | 'bottom-middle-top-middle'\n | 'top-end-bottom-end'\n | 'top-start-bottom-start'\n | 'top-middle-bottom-middle'\n | 'bottom-start-bottom-end'\n | 'top-start-top-end'\n | 'middle-start-middle-end'\n | 'bottom-end-bottom-start'\n | 'top-end-top-start'\n | 'middle-end-middle-start';\n\nexport const placementTranslation: Record<PlacementOptions, Placement> = {\n 'bottom-end-bottom-start': 'right-end',\n 'bottom-end-top-end': 'bottom-end',\n 'bottom-middle-top-middle': 'bottom',\n 'bottom-start-bottom-end': 'left-end',\n 'bottom-start-top-start': 'bottom-start',\n 'middle-end-middle-start': 'right',\n 'middle-start-middle-end': 'left',\n 'top-end-bottom-end': 'top-end',\n 'top-end-top-start': 'right-start',\n 'top-middle-bottom-middle': 'top',\n 'top-start-bottom-start': 'top-start',\n 'top-start-top-end': 'left-start',\n};\ntype PopoverProps = {\n /** if the popover is open */\n isOpen?: boolean;\n /** The content of the popover */\n children?: React.ReactNode;\n /** Can be used if the anchor should be separated from the trigger */\n anchorElement?: Element | null;\n /** If the anchorPosition is provided the anchorElement will be ignored */\n anchorPosition?: {\n x: number;\n y: number;\n };\n /** The placement of the floating element is determined by two sets of words. The first set of words specifies the point on the anchor element where the floating element will be attached. The second set of coordinates specifies the point on the floating element that will attach to the anchor element.*/\n placement?: PlacementOptions;\n /** can take either a number, an object or a function. Full documentation here: https://floating-ui.com/docs/offset */\n offset?: OffsetOptions;\n /** Called when an internal state change is triggered, when the floating element either opens or closes. It is not called when `isOpen` is updated by the consumer. */\n onOpenChange?: (isOpen: boolean, event?: Event) => void;\n /** Use anchorEl for portal's container. Should be used if the popover is portaled and is inside a Dialog for example. */\n hasAnchorPortal?: boolean;\n /** If the popover should constrain the focus inside the popover while open */\n shouldCaptureFocus?: boolean;\n /** Which element to initially focus. **/\n initialFocus?: number | React.RefObject<HTMLElement | null>;\n /** The role of the popover */\n role?:\n | 'tooltip'\n | 'dialog'\n | 'alertdialog'\n | 'menu'\n | 'listbox'\n | 'grid'\n | 'tree';\n /** If the popover should close when the user clicks outside of it */\n closeOnClickOutside?: boolean;\n /** The strategy of the popover. Fixed should be used when the popover is inside a Dialog. */\n strategy?: 'fixed' | 'absolute';\n /** Whether the content is rendered in a portal */\n isPortaled?: boolean;\n};\n\ntype ContextType = ReturnType<typeof usePopover> | null;\n\nconst PopoverContext = React.createContext<ContextType>(null);\n\nexport const usePopoverContext = () => {\n const context = React.useContext(PopoverContext);\n\n if (context === null) {\n throw new Error('Popover components must be wrapped in <Popover />');\n }\n\n return context;\n};\n\nconst PopoverComponent = ({\n children,\n anchorElement,\n placement,\n isOpen,\n offset,\n anchorPosition,\n hasAnchorPortal: hasAnchorPortalProp,\n shouldCaptureFocus = false,\n initialFocus,\n onOpenChange,\n role,\n closeOnClickOutside = true,\n isPortaled: isPortaledProp,\n strategy: strategyProp,\n}: PopoverProps) => {\n const isInsideDialog = useIsInsideDialog();\n\n const strategy = isInsideDialog ? 'fixed' : 'absolute';\n const hasAnchorPortal = isInsideDialog;\n const isPortaled = !isInsideDialog;\n\n const popover = usePopover({\n anchorElement: anchorElement,\n anchorElementAsPortalAnchor: hasAnchorPortalProp ?? hasAnchorPortal,\n anchorPosition,\n closeOnClickOutside,\n initialFocus,\n isOpen: isOpen,\n isPortaled: isPortaledProp ?? isPortaled,\n offsetOption: offset,\n onOpenChange: onOpenChange,\n placement: placement ? placementTranslation[placement] : undefined,\n role,\n shouldCaptureFocus: shouldCaptureFocus,\n strategy: strategyProp ?? strategy,\n });\n\n return (\n <PopoverContext.Provider value={popover}>\n {children}\n </PopoverContext.Provider>\n );\n};\n\ntype PopoverTriggerProps = {\n /** The content of the trigger */\n children: React.ReactNode;\n /** Whether the trigger should render a button element, or pass its props to the child element */\n hasButtonWrapper?: boolean;\n};\n\nconst PopoverTrigger = ({\n children,\n hasButtonWrapper = false,\n ref,\n ...props\n}: CommonProps<'button', PopoverTriggerProps>) => {\n const context = usePopoverContext();\n // Example from floating UI\n // oxlint-disable-next-line @typescript-eslint/no-explicit-any\n const childrenProps = (children as any).props;\n const mergedRefs = useMergeRefs([\n context.refs.setReference,\n ref,\n childrenProps?.ref,\n ]);\n\n // `hasButtonWrapper` allows the user to pass any element as the anchor\n if (hasButtonWrapper && React.isValidElement(children)) {\n return React.cloneElement(\n children,\n context.getReferenceProps({\n ...props,\n ...childrenProps,\n 'data-state': context.isOpen ? 'open' : 'closed',\n ref: mergedRefs,\n }),\n );\n }\n return (\n <button\n ref={context.refs.setReference}\n type=\"button\"\n data-state={context.isOpen ? 'open' : 'closed'}\n {...context.getReferenceProps(props)}\n >\n {children}\n </button>\n );\n};\n\ntype PopoverContentProps = {\n children: React.ReactNode;\n className?: string;\n style?: React.CSSProperties;\n};\n\nconst PopoverContent = <T extends React.ElementType = 'div'>({\n as,\n className,\n style,\n children,\n htmlAttributes,\n ref,\n ...restProps\n}: PolymorphicCommonProps<T, PopoverContentProps>) => {\n const { context: floatingContext, ...context } = usePopoverContext();\n\n const refs = useMergeRefs([context.refs.setFloating, ref]);\n\n const { themeClassName } = useNeedleTheme();\n\n const classes = classNames('ndl-popover', themeClassName, className);\n const Component: React.ElementType = as ?? 'div';\n\n // Patch to not get axe errors for the focus guards\n // To be noted is that axe gives us a false positive error here since the focus guards directly pass focus to other elements\n // https://github.com/floating-ui/floating-ui/issues/2462\n usePatchFloatingFocusGuards();\n\n if (!floatingContext.open) {\n return null;\n }\n\n return (\n <ConditionalWrap\n shouldWrap={context.isPortaled}\n wrap={(wrapChildren) => (\n <FloatingPortal\n root={\n (context.anchorElementAsPortalAnchor ?? false)\n ? (context.refs.reference.current as HTMLElement | null)\n : undefined\n }\n >\n {wrapChildren}\n </FloatingPortal>\n )}\n >\n <FloatingFocusManager\n context={floatingContext}\n modal={context.shouldCaptureFocus}\n initialFocus={context.initialFocus}\n >\n <Component\n className={classes}\n aria-labelledby={context.labelId}\n aria-describedby={context.descriptionId}\n style={{\n ...context.floatingStyles,\n ...context.transitionStyles,\n ...style,\n }}\n ref={refs}\n {...context.getFloatingProps({ ...htmlAttributes })}\n {...restProps}\n >\n {children}\n </Component>\n </FloatingFocusManager>\n </ConditionalWrap>\n );\n};\n\nconst Popover = Object.assign(PopoverComponent, {\n Content: PopoverContent,\n Trigger: PopoverTrigger,\n});\n\nexport { Popover };\n"]}
|
|
@@ -23,7 +23,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
23
23
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
24
24
|
};
|
|
25
25
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
26
|
-
exports.PopoverCustomOffsetSrc = exports.PopoverInDialogSrc = exports.PopoverSeparateAnchorSrc = exports.PopoverNoButtonWrapperSrc = exports.PopoverDefaultSrc = exports.PopoverCustomOffset = exports.PopoverInDialog = exports.PopoverSeparateAnchor = exports.PopoverNoButtonWrapper = exports.PopoverDefault = void 0;
|
|
26
|
+
exports.PopoverControlledSrc = exports.PopoverCustomOffsetSrc = exports.PopoverInDialogSrc = exports.PopoverSeparateAnchorSrc = exports.PopoverNoButtonWrapperSrc = exports.PopoverDefaultSrc = exports.PopoverControlled = exports.PopoverCustomOffset = exports.PopoverInDialog = exports.PopoverSeparateAnchor = exports.PopoverNoButtonWrapper = exports.PopoverDefault = void 0;
|
|
27
27
|
var popover_default_story_1 = require("./popover-default.story");
|
|
28
28
|
Object.defineProperty(exports, "PopoverDefault", { enumerable: true, get: function () { return __importDefault(popover_default_story_1).default; } });
|
|
29
29
|
var popover_no_button_wrapper_story_1 = require("./popover-no-button-wrapper.story");
|
|
@@ -34,7 +34,10 @@ var popover_in_dialog_story_1 = require("./popover-in-dialog.story");
|
|
|
34
34
|
Object.defineProperty(exports, "PopoverInDialog", { enumerable: true, get: function () { return __importDefault(popover_in_dialog_story_1).default; } });
|
|
35
35
|
var popover_custom_offset_story_1 = require("./popover-custom-offset.story");
|
|
36
36
|
Object.defineProperty(exports, "PopoverCustomOffset", { enumerable: true, get: function () { return __importDefault(popover_custom_offset_story_1).default; } });
|
|
37
|
+
var popover_controlled_story_1 = require("./popover-controlled.story");
|
|
38
|
+
Object.defineProperty(exports, "PopoverControlled", { enumerable: true, get: function () { return __importDefault(popover_controlled_story_1).default; } });
|
|
37
39
|
const export_stories_utils_1 = require("../../_common/export-stories-utils");
|
|
40
|
+
const popover_controlled_story_raw_1 = __importDefault(require("./popover-controlled.story?raw"));
|
|
38
41
|
const popover_custom_offset_story_raw_1 = __importDefault(require("./popover-custom-offset.story?raw"));
|
|
39
42
|
const popover_default_story_raw_1 = __importDefault(require("./popover-default.story?raw"));
|
|
40
43
|
const popover_in_dialog_story_raw_1 = __importDefault(require("./popover-in-dialog.story?raw"));
|
|
@@ -45,4 +48,5 @@ exports.PopoverNoButtonWrapperSrc = (0, export_stories_utils_1.removeLicenseHead
|
|
|
45
48
|
exports.PopoverSeparateAnchorSrc = (0, export_stories_utils_1.removeLicenseHeader)(popover_separate_anchor_story_raw_1.default);
|
|
46
49
|
exports.PopoverInDialogSrc = (0, export_stories_utils_1.removeLicenseHeader)(popover_in_dialog_story_raw_1.default);
|
|
47
50
|
exports.PopoverCustomOffsetSrc = (0, export_stories_utils_1.removeLicenseHeader)(popover_custom_offset_story_raw_1.default);
|
|
51
|
+
exports.PopoverControlledSrc = (0, export_stories_utils_1.removeLicenseHeader)(popover_controlled_story_raw_1.default);
|
|
48
52
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/popover/stories/index.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;;;;;;AAEH,iEAAoE;AAA3D,wIAAA,OAAO,OAAkB;AAClC,qFAAsF;AAA7E,0JAAA,OAAO,OAA0B;AAC1C,iFAAmF;AAA1E,uJAAA,OAAO,OAAyB;AACzC,qEAAuE;AAA9D,2IAAA,OAAO,OAAmB;AACnC,6EAA+E;AAAtE,mJAAA,OAAO,OAAuB;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/popover/stories/index.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;;;;;;AAEH,iEAAoE;AAA3D,wIAAA,OAAO,OAAkB;AAClC,qFAAsF;AAA7E,0JAAA,OAAO,OAA0B;AAC1C,iFAAmF;AAA1E,uJAAA,OAAO,OAAyB;AACzC,qEAAuE;AAA9D,2IAAA,OAAO,OAAmB;AACnC,6EAA+E;AAAtE,mJAAA,OAAO,OAAuB;AACvC,uEAA0E;AAAjE,8IAAA,OAAO,OAAqB;AAErC,6EAAyE;AACzE,kGAAqE;AACrE,wGAA0E;AAC1E,4FAA+D;AAC/D,gGAAkE;AAClE,gHAAiF;AACjF,4GAA8E;AAEjE,QAAA,iBAAiB,GAAG,IAAA,0CAAmB,EAAC,mCAAoB,CAAC,CAAC;AAC9D,QAAA,yBAAyB,GAAG,IAAA,0CAAmB,EAC1D,6CAA4B,CAC7B,CAAC;AACW,QAAA,wBAAwB,GAAG,IAAA,0CAAmB,EACzD,2CAA2B,CAC5B,CAAC;AACW,QAAA,kBAAkB,GAAG,IAAA,0CAAmB,EAAC,qCAAqB,CAAC,CAAC;AAChE,QAAA,sBAAsB,GAAG,IAAA,0CAAmB,EACvD,yCAAyB,CAC1B,CAAC;AACW,QAAA,oBAAoB,GAAG,IAAA,0CAAmB,EACrD,sCAAuB,CACxB,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 PopoverDefault } from './popover-default.story';\nexport { default as PopoverNoButtonWrapper } from './popover-no-button-wrapper.story';\nexport { default as PopoverSeparateAnchor } from './popover-separate-anchor.story';\nexport { default as PopoverInDialog } from './popover-in-dialog.story';\nexport { default as PopoverCustomOffset } from './popover-custom-offset.story';\nexport { default as PopoverControlled } from './popover-controlled.story';\n\nimport { removeLicenseHeader } from '../../_common/export-stories-utils';\nimport PopoverControlledSrcRaw from './popover-controlled.story?raw';\nimport PopoverCustomOffsetSrcRaw from './popover-custom-offset.story?raw';\nimport PopoverDefaultSrcRaw from './popover-default.story?raw';\nimport PopoverInDialogSrcRaw from './popover-in-dialog.story?raw';\nimport PopoverNoButtonWrapperSrcRaw from './popover-no-button-wrapper.story?raw';\nimport PopoverSeparateAnchorSrcRaw from './popover-separate-anchor.story?raw';\n\nexport const PopoverDefaultSrc = removeLicenseHeader(PopoverDefaultSrcRaw);\nexport const PopoverNoButtonWrapperSrc = removeLicenseHeader(\n PopoverNoButtonWrapperSrcRaw,\n);\nexport const PopoverSeparateAnchorSrc = removeLicenseHeader(\n PopoverSeparateAnchorSrcRaw,\n);\nexport const PopoverInDialogSrc = removeLicenseHeader(PopoverInDialogSrcRaw);\nexport const PopoverCustomOffsetSrc = removeLicenseHeader(\n PopoverCustomOffsetSrcRaw,\n);\nexport const PopoverControlledSrc = removeLicenseHeader(\n PopoverControlledSrcRaw,\n);\n"]}
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
4
|
+
/**
|
|
5
|
+
*
|
|
6
|
+
* Copyright (c) "Neo4j"
|
|
7
|
+
* Neo4j Sweden AB [http://neo4j.com]
|
|
8
|
+
*
|
|
9
|
+
* This file is part of Neo4j.
|
|
10
|
+
*
|
|
11
|
+
* Neo4j is free software: you can redistribute it and/or modify
|
|
12
|
+
* it under the terms of the GNU General Public License as published by
|
|
13
|
+
* the Free Software Foundation, either version 3 of the License, or
|
|
14
|
+
* (at your option) any later version.
|
|
15
|
+
*
|
|
16
|
+
* This program is distributed in the hope that it will be useful,
|
|
17
|
+
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
18
|
+
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
19
|
+
* GNU General Public License for more details.
|
|
20
|
+
*
|
|
21
|
+
* You should have received a copy of the GNU General Public License
|
|
22
|
+
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|
23
|
+
*/
|
|
24
|
+
require("@neo4j-ndl/base/lib/neo4j-ds-styles.css");
|
|
25
|
+
const react_1 = require("@neo4j-ndl/react");
|
|
26
|
+
const react_2 = require("react");
|
|
27
|
+
const Component = () => {
|
|
28
|
+
const [isOpen, setIsOpen] = (0, react_2.useState)(false);
|
|
29
|
+
return ((0, jsx_runtime_1.jsxs)(react_1.Popover, { isOpen: isOpen, onOpenChange: (open) => {
|
|
30
|
+
setIsOpen(open);
|
|
31
|
+
}, children: [(0, jsx_runtime_1.jsx)(react_1.Popover.Trigger, { hasButtonWrapper: true, children: (0, jsx_runtime_1.jsx)(react_1.FilledButton, { onClick: () => setIsOpen((prev) => !prev), children: "Open Popover" }) }), (0, jsx_runtime_1.jsx)(react_1.Popover.Content, { className: "n-p-token-16", children: "Popover content" })] }));
|
|
32
|
+
};
|
|
33
|
+
exports.default = Component;
|
|
34
|
+
//# sourceMappingURL=popover-controlled.story.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"popover-controlled.story.js","sourceRoot":"","sources":["../../../../src/popover/stories/popover-controlled.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAAyD;AACzD,iCAAiC;AAEjC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAC5C,OAAO,CACL,wBAAC,eAAO,IACN,MAAM,EAAE,MAAM,EACd,YAAY,EAAE,CAAC,IAAI,EAAE,EAAE;YACrB,SAAS,CAAC,IAAI,CAAC,CAAC;QAClB,CAAC,aAED,uBAAC,eAAO,CAAC,OAAO,IAAC,gBAAgB,kBAC/B,uBAAC,oBAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,6BAExC,GACC,EAClB,uBAAC,eAAO,CAAC,OAAO,IAAC,SAAS,EAAC,cAAc,gCAEvB,IACV,CACX,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, Popover } from '@neo4j-ndl/react';\nimport { useState } from 'react';\n\nconst Component = () => {\n const [isOpen, setIsOpen] = useState(false);\n return (\n <Popover\n isOpen={isOpen}\n onOpenChange={(open) => {\n setIsOpen(open);\n }}\n >\n <Popover.Trigger hasButtonWrapper>\n <FilledButton onClick={() => setIsOpen((prev) => !prev)}>\n Open Popover\n </FilledButton>\n </Popover.Trigger>\n <Popover.Content className=\"n-p-token-16\">\n Popover content\n </Popover.Content>\n </Popover>\n );\n};\n\nexport default Component;\n"]}
|
|
@@ -26,11 +26,13 @@ const base_1 = require("@neo4j-ndl/base");
|
|
|
26
26
|
const react_2 = require("react");
|
|
27
27
|
function usePopover({ isInitialOpen = false, placement = 'bottom', isOpen: controlledOpen, onOpenChange: setControlledOpen, offsetOption = 10, anchorElement, anchorPosition, anchorElementAsPortalAnchor, shouldCaptureFocus, initialFocus, role: roleProp, closeOnClickOutside, strategy = 'absolute', isPortaled = true, } = {}) {
|
|
28
28
|
var _a;
|
|
29
|
+
// Internal state for uncontrolled mode (no `isOpen` prop provided).
|
|
29
30
|
const [isOpenUncontrolled, setIsOpenUncontrolled] = (0, react_2.useState)(isInitialOpen);
|
|
30
31
|
const [labelId, setLabelId] = (0, react_2.useState)();
|
|
31
32
|
const [descriptionId, setDescriptionId] = (0, react_2.useState)();
|
|
33
|
+
// Controlled/uncontrolled pattern: prefer the consumer-provided `isOpen`,
|
|
34
|
+
// falling back to internal state when not provided.
|
|
32
35
|
const isOpen = controlledOpen !== null && controlledOpen !== void 0 ? controlledOpen : isOpenUncontrolled;
|
|
33
|
-
const setIsOpen = setControlledOpen !== null && setControlledOpen !== void 0 ? setControlledOpen : setIsOpenUncontrolled;
|
|
34
36
|
const data = (0, react_1.useFloating)({
|
|
35
37
|
elements: {
|
|
36
38
|
reference: anchorElement,
|
|
@@ -44,8 +46,11 @@ function usePopover({ isInitialOpen = false, placement = 'bottom', isOpen: contr
|
|
|
44
46
|
}),
|
|
45
47
|
(0, react_1.shift)(),
|
|
46
48
|
],
|
|
49
|
+
// Floating UI calls this when interactions (useClick, useDismiss, etc.)
|
|
50
|
+
// trigger an open/close. We always sync internal state so uncontrolled
|
|
51
|
+
// mode works, and notify the consumer callback exactly once if provided.
|
|
47
52
|
onOpenChange: (open, event) => {
|
|
48
|
-
|
|
53
|
+
setIsOpenUncontrolled(open);
|
|
49
54
|
setControlledOpen === null || setControlledOpen === void 0 ? void 0 : setControlledOpen(open, event);
|
|
50
55
|
},
|
|
51
56
|
open: isOpen,
|
|
@@ -54,6 +59,8 @@ function usePopover({ isInitialOpen = false, placement = 'bottom', isOpen: contr
|
|
|
54
59
|
whileElementsMounted: react_1.autoUpdate,
|
|
55
60
|
});
|
|
56
61
|
const context = data.context;
|
|
62
|
+
// Only enable built-in click-to-toggle in uncontrolled mode. In controlled
|
|
63
|
+
// mode the consumer owns the open state and wires up their own trigger.
|
|
57
64
|
const click = (0, react_1.useClick)(context, {
|
|
58
65
|
enabled: controlledOpen === undefined,
|
|
59
66
|
});
|
|
@@ -72,8 +79,7 @@ function usePopover({ isInitialOpen = false, placement = 'bottom', isOpen: contr
|
|
|
72
79
|
const { styles: transitionStyles } = (0, react_1.useTransitionStyles)(context, {
|
|
73
80
|
duration: (_a = Number.parseInt(base_1.tokens.motion.duration.quick)) !== null && _a !== void 0 ? _a : 0,
|
|
74
81
|
});
|
|
75
|
-
return (0, react_2.useMemo)(() => (Object.assign(Object.assign(Object.assign({ isOpen,
|
|
76
|
-
setIsOpen }, interactions), data), { transitionStyles,
|
|
82
|
+
return (0, react_2.useMemo)(() => (Object.assign(Object.assign(Object.assign({ isOpen }, interactions), data), { transitionStyles,
|
|
77
83
|
labelId,
|
|
78
84
|
descriptionId,
|
|
79
85
|
setLabelId,
|
|
@@ -83,7 +89,6 @@ function usePopover({ isInitialOpen = false, placement = 'bottom', isOpen: contr
|
|
|
83
89
|
initialFocus,
|
|
84
90
|
isPortaled })), [
|
|
85
91
|
isOpen,
|
|
86
|
-
setIsOpen,
|
|
87
92
|
interactions,
|
|
88
93
|
data,
|
|
89
94
|
transitionStyles,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-popover.js","sourceRoot":"","sources":["../../../src/popover/use-popover.tsx"],"names":[],"mappings":";;
|
|
1
|
+
{"version":3,"file":"use-popover.js","sourceRoot":"","sources":["../../../src/popover/use-popover.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 {\n autoUpdate,\n flip,\n offset,\n type OffsetOptions,\n type Placement,\n shift,\n useClick,\n useClientPoint,\n useDismiss,\n useFloating,\n useInteractions,\n type UseInteractionsReturn,\n useRole,\n useTransitionStyles,\n} from '@floating-ui/react';\nimport { tokens } from '@neo4j-ndl/base';\nimport { useMemo, useState } from 'react';\n\nexport interface PopoverOptions {\n isInitialOpen?: boolean;\n placement?: Placement;\n isOpen?: boolean;\n onOpenChange?: (open: boolean, event?: Event) => void;\n offsetOption?: OffsetOptions;\n anchorElement?: Element | null;\n anchorPosition?: {\n x: number;\n y: number;\n };\n anchorElementAsPortalAnchor?: boolean;\n shouldCaptureFocus?: boolean;\n initialFocus?: number | React.RefObject<HTMLElement | null>;\n role?:\n | 'tooltip'\n | 'dialog'\n | 'alertdialog'\n | 'menu'\n | 'listbox'\n | 'grid'\n | 'tree';\n closeOnClickOutside?: boolean;\n strategy?: 'fixed' | 'absolute';\n isPortaled?: boolean;\n}\n\nexport interface UsePopoverReturn\n extends UseInteractionsReturn, ReturnType<typeof useFloating> {\n isOpen: boolean;\n labelId: string | undefined;\n descriptionId: string | undefined;\n transitionStyles: React.CSSProperties;\n setLabelId: (labelId: string | undefined) => void;\n setDescriptionId: (descriptionId: string | undefined) => void;\n anchorElementAsPortalAnchor: boolean | undefined;\n shouldCaptureFocus: boolean | undefined;\n initialFocus: number | React.RefObject<HTMLElement | null> | undefined;\n isPortaled: boolean;\n}\n\nexport function usePopover({\n isInitialOpen = false,\n placement = 'bottom',\n isOpen: controlledOpen,\n onOpenChange: setControlledOpen,\n offsetOption = 10,\n anchorElement,\n anchorPosition,\n anchorElementAsPortalAnchor,\n shouldCaptureFocus,\n initialFocus,\n role: roleProp,\n closeOnClickOutside,\n strategy = 'absolute',\n isPortaled = true,\n}: PopoverOptions = {}): UsePopoverReturn {\n // Internal state for uncontrolled mode (no `isOpen` prop provided).\n const [isOpenUncontrolled, setIsOpenUncontrolled] = useState(isInitialOpen);\n const [labelId, setLabelId] = useState<string | undefined>();\n const [descriptionId, setDescriptionId] = useState<string | undefined>();\n\n // Controlled/uncontrolled pattern: prefer the consumer-provided `isOpen`,\n // falling back to internal state when not provided.\n const isOpen = controlledOpen ?? isOpenUncontrolled;\n\n const data = useFloating({\n elements: {\n reference: anchorElement,\n },\n middleware: [\n offset(offsetOption),\n flip({\n crossAxis: placement.includes('-'),\n fallbackAxisSideDirection: 'end',\n padding: 5,\n }),\n shift(),\n ],\n // Floating UI calls this when interactions (useClick, useDismiss, etc.)\n // trigger an open/close. We always sync internal state so uncontrolled\n // mode works, and notify the consumer callback exactly once if provided.\n onOpenChange: (open, event) => {\n setIsOpenUncontrolled(open);\n setControlledOpen?.(open, event);\n },\n open: isOpen,\n placement: placement,\n strategy,\n whileElementsMounted: autoUpdate,\n });\n const context = data.context;\n\n // Only enable built-in click-to-toggle in uncontrolled mode. In controlled\n // mode the consumer owns the open state and wires up their own trigger.\n const click = useClick(context, {\n enabled: controlledOpen === undefined,\n });\n\n const dismiss = useDismiss(context, {\n outsidePress: closeOnClickOutside,\n });\n const role = useRole(context, {\n role: roleProp,\n });\n\n const clientPoint = useClientPoint(context, {\n enabled: anchorPosition !== undefined,\n x: anchorPosition?.x,\n y: anchorPosition?.y,\n });\n\n const interactions = useInteractions([click, dismiss, role, clientPoint]);\n\n const { styles: transitionStyles } = useTransitionStyles(context, {\n duration: Number.parseInt(tokens.motion.duration.quick) ?? 0,\n });\n\n return useMemo(\n () => ({\n isOpen,\n ...interactions,\n ...data,\n transitionStyles,\n labelId,\n descriptionId,\n setLabelId,\n setDescriptionId,\n anchorElementAsPortalAnchor,\n shouldCaptureFocus,\n initialFocus,\n isPortaled,\n }),\n [\n isOpen,\n interactions,\n data,\n transitionStyles,\n labelId,\n descriptionId,\n anchorElementAsPortalAnchor,\n shouldCaptureFocus,\n initialFocus,\n isPortaled,\n ],\n );\n}\n"]}
|
|
@@ -30,11 +30,10 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
|
|
|
30
30
|
* You should have received a copy of the GNU General Public License
|
|
31
31
|
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|
32
32
|
*/
|
|
33
|
-
import {
|
|
33
|
+
import { Typography } from '@neo4j-ndl/react';
|
|
34
34
|
import { ChevronDownIconOutline } from '@neo4j-ndl/react/icons';
|
|
35
35
|
import classNames from 'classnames';
|
|
36
|
-
import { useState } from 'react';
|
|
37
|
-
import { useSemicontrolledState } from '../../_common/use-semi-controlled-state';
|
|
36
|
+
import { useId, useState } from 'react';
|
|
38
37
|
import { Presence } from '../presence';
|
|
39
38
|
import { formatThinkingDuration } from '../thinking/thinking-duration-formatter';
|
|
40
39
|
/**
|
|
@@ -48,27 +47,32 @@ const ReasoningComponent = (_a) => {
|
|
|
48
47
|
const classes = classNames('ndl-ai-reasoning', className);
|
|
49
48
|
const [isExpanded, setIsExpanded] = useState(false);
|
|
50
49
|
const shouldShowChildren = isExpanded && isThinking === false;
|
|
50
|
+
const buttonId = useId();
|
|
51
|
+
const panelId = useId();
|
|
51
52
|
const { value: thinkingDuration, unit } = formatThinkingDuration(thinkingMs);
|
|
52
|
-
return (_jsxs("div", Object.assign({ ref: ref, className: classes, style: style }, restProps, htmlAttributes, { children: [_jsx(Typography, { variant: "label", className:
|
|
53
|
+
return (_jsxs("div", Object.assign({ ref: ref, className: classes, style: style }, restProps, htmlAttributes, { children: [_jsx(Typography, Object.assign({ variant: "label", className: classNames('ndl-ai-reasoning-header', {
|
|
54
|
+
'ndl-expanded': isExpanded,
|
|
55
|
+
}) }, (!isThinking
|
|
56
|
+
? {
|
|
57
|
+
as: 'button',
|
|
58
|
+
htmlAttributes: {
|
|
59
|
+
'aria-controls': panelId,
|
|
60
|
+
'aria-expanded': isExpanded,
|
|
61
|
+
id: buttonId,
|
|
62
|
+
onClick: () => setIsExpanded(!isExpanded),
|
|
63
|
+
type: 'button',
|
|
64
|
+
},
|
|
65
|
+
}
|
|
66
|
+
: { as: 'div', htmlAttributes: { id: buttonId } }), { children: isThinking === true ? (_jsxs(_Fragment, { children: [_jsx(Presence, { isThinking: isThinking, className: "ndl-ai-reasoning-presence" }), _jsxs("span", { className: "ndl-ai-reasoning-header-text", children: [currentAction, "..."] })] })) : (_jsxs(_Fragment, { children: [_jsxs("span", { children: ["Thought for ", thinkingDuration, " ", unit] }), _jsx(ChevronDownIconOutline, { className: classNames('ndl-ai-reasoning-chevron', {
|
|
53
67
|
'ndl-expanded': isExpanded,
|
|
54
|
-
})
|
|
68
|
+
}) })] })) })), _jsx("div", { className: classNames('ndl-ai-reasoning-content', {
|
|
55
69
|
'ndl-expanded': shouldShowChildren,
|
|
56
|
-
}), inert: !shouldShowChildren, children: _jsx("div", { className: "ndl-ai-reasoning-content-inner", children: _jsx("div", { className: "ndl-ai-reasoning-content-inner-2", children: children }) }) })] })));
|
|
70
|
+
}), inert: !shouldShowChildren, "aria-hidden": !shouldShowChildren, "aria-labelledby": buttonId, role: "region", id: panelId, children: _jsx("div", { className: "ndl-ai-reasoning-content-inner", children: _jsx("div", { className: "ndl-ai-reasoning-content-inner-2", children: children }) }) })] })));
|
|
57
71
|
};
|
|
58
72
|
const Section = (_a) => {
|
|
59
|
-
var
|
|
60
|
-
var { heading, leadingVisual, children, className, style, htmlAttributes, ref, isExpanded, isDefaultExpanded, onExpandChange } = _a, restProps = __rest(_a, ["heading", "leadingVisual", "children", "className", "style", "htmlAttributes", "ref", "isExpanded", "isDefaultExpanded", "onExpandChange"]);
|
|
73
|
+
var { heading, leadingVisual, children, className, style, htmlAttributes, ref, isExpanded: _isExpanded, isDefaultExpanded: _isDefaultExpanded, onExpandChange: _onExpandChange } = _a, restProps = __rest(_a, ["heading", "leadingVisual", "children", "className", "style", "htmlAttributes", "ref", "isExpanded", "isDefaultExpanded", "onExpandChange"]);
|
|
61
74
|
const classes = classNames('ndl-ai-reasoning-section', className);
|
|
62
|
-
|
|
63
|
-
isControlled: isExpanded !== undefined,
|
|
64
|
-
onChange: onExpandChange,
|
|
65
|
-
state: (_b = isExpanded !== null && isExpanded !== void 0 ? isExpanded : isDefaultExpanded) !== null && _b !== void 0 ? _b : false,
|
|
66
|
-
});
|
|
67
|
-
return (_jsxs("div", Object.assign({ ref: ref, className: classes, style: style }, restProps, htmlAttributes, { children: [_jsxs("div", { className: "ndl-ai-reasoning-section-header", children: [_jsx("div", { className: "ndl-ai-reasoning-section-leading", children: leadingVisual }), _jsx(Typography, { variant: "subheading-small", children: heading }), _jsx(CleanIconButton, { description: isExpandedState ? 'Collapse' : 'Expand', size: "small", variant: "neutral", className: classNames('ndl-ai-reasoning-expand-button', {
|
|
68
|
-
'ndl-expanded': isExpandedState,
|
|
69
|
-
}), onClick: () => setIsExpandedState((prev) => !prev), children: _jsx(ChevronDownIconOutline, {}) })] }), _jsx("div", { className: classNames('ndl-ai-reasoning-section-content', {
|
|
70
|
-
'ndl-expanded': isExpandedState,
|
|
71
|
-
}), inert: !isExpandedState, children: _jsx("div", { className: "ndl-ai-reasoning-section-content-inner", children: _jsxs("div", { className: "ndl-ai-reasoning-section-content-inner-2", children: [_jsx("div", { className: "ndl-ai-reasoning-section-content-line-container", children: _jsx("div", { className: "ndl-ai-reasoning-section-content-line" }) }), _jsx("div", { className: "ndl-ai-reasoning-section-content-children", children: children })] }) }) })] })));
|
|
75
|
+
return (_jsxs("div", Object.assign({ ref: ref, className: classes, style: style }, restProps, htmlAttributes, { children: [_jsxs("div", { className: "ndl-ai-reasoning-section-header", children: [_jsx("div", { className: "ndl-ai-reasoning-section-leading", children: leadingVisual }), _jsx(Typography, { variant: "subheading-small", children: heading })] }), _jsxs("div", { className: "ndl-ai-reasoning-section-content", children: [_jsx("div", { className: "ndl-ai-reasoning-section-content-line-container", children: _jsx("div", { className: "ndl-ai-reasoning-section-content-line" }) }), _jsx("div", { className: "ndl-ai-reasoning-section-content-children", children: children })] })] })));
|
|
72
76
|
};
|
|
73
77
|
const Footer = (_a) => {
|
|
74
78
|
var { children, className, style, htmlAttributes, ref } = _a, restProps = __rest(_a, ["children", "className", "style", "htmlAttributes", "ref"]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Reasoning.js","sourceRoot":"","sources":["../../../../src/ai/reasoning/Reasoning.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 */\n\nimport { CleanIconButton, Typography } from '@neo4j-ndl/react';\nimport { ChevronDownIconOutline } from '@neo4j-ndl/react/icons';\nimport classNames from 'classnames';\nimport { useState } from 'react';\n\nimport { type CommonProps } from '../../_common/types';\nimport { useSemicontrolledState } from '../../_common/use-semi-controlled-state';\nimport { Presence } from '../presence';\nimport { formatThinkingDuration } from '../thinking/thinking-duration-formatter';\n\ntype ReasoningProps = {\n /** What should be displayed inside the reasoning component. */\n children?: React.ReactNode;\n /** Whether the AI is thinking */\n isThinking?: boolean;\n /** The duration of the thinking in milliseconds */\n thinkingMs?: number;\n /** The current action the AI is performing */\n currentAction?: string;\n};\n\n/**\n * The component is used to display the reasoning state of an LLM.\n * It has an accordion like behavior to show the reasoning steps.\n *\n * @alpha - Changes to this component may be breaking.\n */\nconst ReasoningComponent = ({\n isThinking = true,\n thinkingMs = 1000,\n currentAction = 'Thinking',\n children,\n className,\n style,\n htmlAttributes,\n ref,\n ...restProps\n}: CommonProps<'div', ReasoningProps>) => {\n const classes = classNames('ndl-ai-reasoning', className);\n const [isExpanded, setIsExpanded] = useState(false);\n const shouldShowChildren = isExpanded && isThinking === false;\n\n const { value: thinkingDuration, unit } = formatThinkingDuration(thinkingMs);\n\n return (\n <div\n ref={ref}\n className={classes}\n style={style}\n {...restProps}\n {...htmlAttributes}\n >\n <Typography variant=\"label\" className=\"ndl-ai-reasoning-header\">\n {isThinking === true ? (\n <>\n <Presence isThinking={isThinking} className=\"n-size-token-24\" />\n <span className=\"ndl-ai-reasoning-header-text\">\n {currentAction}...\n </span>\n </>\n ) : (\n <>\n <span>\n Thought for {thinkingDuration} {unit}\n </span>\n <CleanIconButton\n size=\"small\"\n variant=\"neutral\"\n onClick={() => setIsExpanded(!isExpanded)}\n description={isExpanded ? 'Collapse' : 'Expand'}\n className={classNames('ndl-ai-reasoning-expand-button', {\n 'ndl-expanded': isExpanded,\n })}\n >\n <ChevronDownIconOutline />\n </CleanIconButton>\n </>\n )}\n </Typography>\n <div\n className={classNames('ndl-ai-reasoning-content', {\n 'ndl-expanded': shouldShowChildren,\n })}\n inert={!shouldShowChildren}\n >\n <div className=\"ndl-ai-reasoning-content-inner\">\n <div className=\"ndl-ai-reasoning-content-inner-2\">{children}</div>\n </div>\n </div>\n </div>\n );\n};\n\ntype SectionProps = {\n /** The heading of the section */\n heading?: React.ReactNode;\n /** The children of the section */\n children?: React.ReactNode;\n /** The visual leading the section */\n leadingVisual?: React.ReactNode;\n /** Whether the section is expanded */\n isExpanded?: boolean;\n /** The default value of the section is expanded */\n isDefaultExpanded?: boolean;\n /** Callback function triggered when the section is expanded */\n onExpandChange?: (isExpanded: boolean) => void;\n};\n\nconst Section = ({\n heading,\n leadingVisual,\n children,\n className,\n style,\n htmlAttributes,\n ref,\n isExpanded,\n isDefaultExpanded,\n onExpandChange,\n ...restProps\n}: CommonProps<'div', SectionProps>) => {\n const classes = classNames('ndl-ai-reasoning-section', className);\n const [isExpandedState, setIsExpandedState] = useSemicontrolledState({\n isControlled: isExpanded !== undefined,\n onChange: onExpandChange,\n state: isExpanded ?? isDefaultExpanded ?? false,\n });\n\n return (\n <div\n ref={ref}\n className={classes}\n style={style}\n {...restProps}\n {...htmlAttributes}\n >\n <div className=\"ndl-ai-reasoning-section-header\">\n <div className=\"ndl-ai-reasoning-section-leading\">{leadingVisual}</div>\n <Typography variant=\"subheading-small\">{heading}</Typography>\n <CleanIconButton\n description={isExpandedState ? 'Collapse' : 'Expand'}\n size=\"small\"\n variant=\"neutral\"\n className={classNames('ndl-ai-reasoning-expand-button', {\n 'ndl-expanded': isExpandedState,\n })}\n onClick={() => setIsExpandedState((prev) => !prev)}\n >\n <ChevronDownIconOutline />\n </CleanIconButton>\n </div>\n <div\n className={classNames('ndl-ai-reasoning-section-content', {\n 'ndl-expanded': isExpandedState,\n })}\n inert={!isExpandedState}\n >\n <div className=\"ndl-ai-reasoning-section-content-inner\">\n <div className=\"ndl-ai-reasoning-section-content-inner-2\">\n <div className=\"ndl-ai-reasoning-section-content-line-container\">\n <div className=\"ndl-ai-reasoning-section-content-line\" />\n </div>\n <div className=\"ndl-ai-reasoning-section-content-children\">\n {children}\n </div>\n </div>\n </div>\n </div>\n </div>\n );\n};\n\nconst Footer = ({\n children,\n className,\n style,\n htmlAttributes,\n ref,\n ...restProps\n}: CommonProps<'div', { children: React.ReactNode }>) => {\n const classes = classNames('ndl-ai-reasoning-footer', className);\n return (\n <Typography\n as=\"div\"\n variant=\"body-small\"\n className={classes}\n style={style}\n ref={ref}\n {...restProps}\n {...htmlAttributes}\n >\n {children}\n </Typography>\n );\n};\n\nconst Reasoning = Object.assign(ReasoningComponent, {\n Footer,\n Section,\n});\n\nexport { Reasoning };\n"]}
|
|
1
|
+
{"version":3,"file":"Reasoning.js","sourceRoot":"","sources":["../../../../src/ai/reasoning/Reasoning.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 */\n\nimport { Typography } from '@neo4j-ndl/react';\nimport { ChevronDownIconOutline } from '@neo4j-ndl/react/icons';\nimport classNames from 'classnames';\nimport { useId, useState } from 'react';\n\nimport { type CommonProps } from '../../_common/types';\nimport { Presence } from '../presence';\nimport { formatThinkingDuration } from '../thinking/thinking-duration-formatter';\n\ntype ReasoningProps = {\n /** What should be displayed inside the reasoning component. */\n children?: React.ReactNode;\n /** Whether the AI is thinking */\n isThinking?: boolean;\n /** The duration of the thinking in milliseconds */\n thinkingMs?: number;\n /** The current action the AI is performing */\n currentAction?: string;\n};\n\n/**\n * The component is used to display the reasoning state of an LLM.\n * It has an accordion like behavior to show the reasoning steps.\n *\n * @alpha - Changes to this component may be breaking.\n */\nconst ReasoningComponent = ({\n isThinking = true,\n thinkingMs = 1000,\n currentAction = 'Thinking',\n children,\n className,\n style,\n htmlAttributes,\n ref,\n ...restProps\n}: CommonProps<'div', ReasoningProps>) => {\n const classes = classNames('ndl-ai-reasoning', className);\n const [isExpanded, setIsExpanded] = useState(false);\n const shouldShowChildren = isExpanded && isThinking === false;\n const buttonId = useId();\n const panelId = useId();\n\n const { value: thinkingDuration, unit } = formatThinkingDuration(thinkingMs);\n\n return (\n <div\n ref={ref}\n className={classes}\n style={style}\n {...restProps}\n {...htmlAttributes}\n >\n <Typography\n variant=\"label\"\n className={classNames('ndl-ai-reasoning-header', {\n 'ndl-expanded': isExpanded,\n })}\n {...(!isThinking\n ? {\n as: 'button',\n htmlAttributes: {\n 'aria-controls': panelId,\n 'aria-expanded': isExpanded,\n id: buttonId,\n onClick: () => setIsExpanded(!isExpanded),\n type: 'button',\n },\n }\n : { as: 'div', htmlAttributes: { id: buttonId } })}\n >\n {isThinking === true ? (\n <>\n <Presence\n isThinking={isThinking}\n className=\"ndl-ai-reasoning-presence\"\n />\n <span className=\"ndl-ai-reasoning-header-text\">\n {currentAction}...\n </span>\n </>\n ) : (\n <>\n <span>\n Thought for {thinkingDuration} {unit}\n </span>\n <ChevronDownIconOutline\n className={classNames('ndl-ai-reasoning-chevron', {\n 'ndl-expanded': isExpanded,\n })}\n />\n </>\n )}\n </Typography>\n <div\n className={classNames('ndl-ai-reasoning-content', {\n 'ndl-expanded': shouldShowChildren,\n })}\n inert={!shouldShowChildren}\n aria-hidden={!shouldShowChildren}\n aria-labelledby={buttonId}\n role=\"region\"\n id={panelId}\n >\n <div className=\"ndl-ai-reasoning-content-inner\">\n <div className=\"ndl-ai-reasoning-content-inner-2\">{children}</div>\n </div>\n </div>\n </div>\n );\n};\n\ntype SectionProps = {\n /** The heading of the section */\n heading?: React.ReactNode;\n /** The children of the section */\n children?: React.ReactNode;\n /** The visual leading the section */\n leadingVisual?: React.ReactNode;\n // TODO v5: remove this prop\n /** Whether the section is expanded.\n * @deprecated - Does nothing, will be removed in v5 */\n isExpanded?: boolean;\n // TODO v5: remove this prop\n /** The default value of the section is expanded.\n * @deprecated - Does nothing, will be removed in v5 */\n isDefaultExpanded?: boolean;\n // TODO v5: remove this prop\n /** Callback function triggered when the section is expanded.\n * @deprecated - Does nothing, will be removed in v5 */\n onExpandChange?: (isExpanded: boolean) => void;\n};\n\nconst Section = ({\n heading,\n leadingVisual,\n children,\n className,\n style,\n htmlAttributes,\n ref,\n isExpanded: _isExpanded,\n isDefaultExpanded: _isDefaultExpanded,\n onExpandChange: _onExpandChange,\n ...restProps\n}: CommonProps<'div', SectionProps>) => {\n const classes = classNames('ndl-ai-reasoning-section', className);\n\n return (\n <div\n ref={ref}\n className={classes}\n style={style}\n {...restProps}\n {...htmlAttributes}\n >\n <div className=\"ndl-ai-reasoning-section-header\">\n <div className=\"ndl-ai-reasoning-section-leading\">{leadingVisual}</div>\n <Typography variant=\"subheading-small\">{heading}</Typography>\n </div>\n <div className=\"ndl-ai-reasoning-section-content\">\n <div className=\"ndl-ai-reasoning-section-content-line-container\">\n <div className=\"ndl-ai-reasoning-section-content-line\" />\n </div>\n <div className=\"ndl-ai-reasoning-section-content-children\">\n {children}\n </div>\n </div>\n </div>\n );\n};\n\nconst Footer = ({\n children,\n className,\n style,\n htmlAttributes,\n ref,\n ...restProps\n}: CommonProps<'div', { children: React.ReactNode }>) => {\n const classes = classNames('ndl-ai-reasoning-footer', className);\n return (\n <Typography\n as=\"div\"\n variant=\"body-small\"\n className={classes}\n style={style}\n ref={ref}\n {...restProps}\n {...htmlAttributes}\n >\n {children}\n </Typography>\n );\n};\n\nconst Reasoning = Object.assign(ReasoningComponent, {\n Footer,\n Section,\n});\n\nexport { Reasoning };\n"]}
|
|
@@ -19,10 +19,7 @@
|
|
|
19
19
|
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|
20
20
|
*/
|
|
21
21
|
export { default as ReasoningFull } from './reasoning-full.story';
|
|
22
|
-
export { default as ReasoningControlled } from './reasoning-controlled.story';
|
|
23
22
|
import { removeLicenseHeader } from '../../../_common/export-stories-utils';
|
|
24
|
-
import ReasoningControlledSrcRaw from './reasoning-controlled.story?raw';
|
|
25
23
|
import ReasoningFullSrcRaw from './reasoning-full.story?raw';
|
|
26
24
|
export const ReasoningFullSrc = removeLicenseHeader(ReasoningFullSrcRaw);
|
|
27
|
-
export const ReasoningControlledSrc = removeLicenseHeader(ReasoningControlledSrcRaw);
|
|
28
25
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/ai/reasoning/stories/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/ai/reasoning/stories/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAElE,OAAO,EAAE,mBAAmB,EAAE,MAAM,uCAAuC,CAAC;AAC5E,OAAO,mBAAmB,MAAM,4BAA4B,CAAC;AAE7D,MAAM,CAAC,MAAM,gBAAgB,GAAG,mBAAmB,CAAC,mBAAmB,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 ReasoningFull } from './reasoning-full.story';\n\nimport { removeLicenseHeader } from '../../../_common/export-stories-utils';\nimport ReasoningFullSrcRaw from './reasoning-full.story?raw';\n\nexport const ReasoningFullSrc = removeLicenseHeader(ReasoningFullSrcRaw);\n"]}
|
|
@@ -20,13 +20,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
20
20
|
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|
21
21
|
*/
|
|
22
22
|
import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
|
|
23
|
-
import {
|
|
23
|
+
import { FilledButton, Tooltip } from '@neo4j-ndl/react';
|
|
24
24
|
import { Reasoning } from '@neo4j-ndl/react/ai';
|
|
25
25
|
import { InformationCircleIconOutline, PencilSquareIconOutline, WrenchIconOutline, } from '@neo4j-ndl/react/icons';
|
|
26
26
|
import { useState } from 'react';
|
|
27
27
|
const Component = () => {
|
|
28
28
|
const [isThinking, setThinking] = useState(true);
|
|
29
|
-
return (_jsxs("div", { className: "n-flex n-flex-col n-gap-token-12", children: [_jsx(FilledButton, { onClick: () => setThinking(!isThinking), children: isThinking ? 'Stop Thinking' : 'Start Thinking' }), _jsxs(Reasoning, { isThinking: isThinking, thinkingMs: 1400, currentAction: "Creating an action plan", children: [_jsx(Reasoning.Section, { leadingVisual: _jsx(PencilSquareIconOutline, {}), heading: "Creating an action plan", isDefaultExpanded: true, children: "Step 1 content" }), _jsx(Reasoning.Section, { leadingVisual: _jsx(WrenchIconOutline, {}), heading: "Applying agent tools", children: "Step 2 content" }), _jsxs(Reasoning.Footer, { children: ["Footer information",
|
|
29
|
+
return (_jsxs("div", { className: "n-flex n-flex-col n-gap-token-12", children: [_jsx(FilledButton, { onClick: () => setThinking(!isThinking), children: isThinking ? 'Stop Thinking' : 'Start Thinking' }), _jsxs(Reasoning, { isThinking: isThinking, thinkingMs: 1400, currentAction: "Creating an action plan", children: [_jsx(Reasoning.Section, { leadingVisual: _jsx(PencilSquareIconOutline, {}), heading: "Creating an action plan", isDefaultExpanded: true, children: "Step 1 content" }), _jsx(Reasoning.Section, { leadingVisual: _jsx(WrenchIconOutline, {}), heading: "Applying agent tools", children: "Step 2 content" }), _jsxs(Reasoning.Footer, { children: ["Footer information", _jsxs(Tooltip, { type: "simple", children: [_jsx(Tooltip.Trigger, { htmlAttributes: { 'aria-label': 'Info about things like tokens' }, children: _jsx(InformationCircleIconOutline, { className: "n-size-token-16" }) }), _jsx(Tooltip.Content, { children: "Info about things like tokens" })] })] })] })] }));
|
|
30
30
|
};
|
|
31
31
|
export default Component;
|
|
32
32
|
//# sourceMappingURL=reasoning-full.story.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"reasoning-full.story.js","sourceRoot":"","sources":["../../../../../src/ai/reasoning/stories/reasoning-full.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"reasoning-full.story.js","sourceRoot":"","sources":["../../../../../src/ai/reasoning/stories/reasoning-full.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAChD,OAAO,EACL,4BAA4B,EAC5B,uBAAuB,EACvB,iBAAiB,GAClB,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,UAAU,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IAEjD,OAAO,CACL,eAAK,SAAS,EAAC,kCAAkC,aAC/C,KAAC,YAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,CAAC,UAAU,CAAC,YAClD,UAAU,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,gBAAgB,GACnC,EACf,MAAC,SAAS,IACR,UAAU,EAAE,UAAU,EACtB,UAAU,EAAE,IAAI,EAChB,aAAa,EAAC,yBAAyB,aAEvC,KAAC,SAAS,CAAC,OAAO,IAChB,aAAa,EAAE,KAAC,uBAAuB,KAAG,EAC1C,OAAO,EAAC,yBAAyB,EACjC,iBAAiB,EAAE,IAAI,+BAGL,EACpB,KAAC,SAAS,CAAC,OAAO,IAChB,aAAa,EAAE,KAAC,iBAAiB,KAAG,EACpC,OAAO,EAAC,sBAAsB,+BAGZ,EACpB,MAAC,SAAS,CAAC,MAAM,qCAEf,MAAC,OAAO,IAAC,IAAI,EAAC,QAAQ,aACpB,KAAC,OAAO,CAAC,OAAO,IACd,cAAc,EAAE,EAAE,YAAY,EAAE,+BAA+B,EAAE,YAEjE,KAAC,4BAA4B,IAAC,SAAS,EAAC,iBAAiB,GAAG,GAC5C,EAClB,KAAC,OAAO,CAAC,OAAO,gDAAgD,IACxD,IACO,IACT,IACR,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, Tooltip } from '@neo4j-ndl/react';\nimport { Reasoning } from '@neo4j-ndl/react/ai';\nimport {\n InformationCircleIconOutline,\n PencilSquareIconOutline,\n WrenchIconOutline,\n} from '@neo4j-ndl/react/icons';\nimport { useState } from 'react';\n\nconst Component = () => {\n const [isThinking, setThinking] = useState(true);\n\n return (\n <div className=\"n-flex n-flex-col n-gap-token-12\">\n <FilledButton onClick={() => setThinking(!isThinking)}>\n {isThinking ? 'Stop Thinking' : 'Start Thinking'}\n </FilledButton>\n <Reasoning\n isThinking={isThinking}\n thinkingMs={1400}\n currentAction=\"Creating an action plan\"\n >\n <Reasoning.Section\n leadingVisual={<PencilSquareIconOutline />}\n heading=\"Creating an action plan\"\n isDefaultExpanded={true}\n >\n Step 1 content\n </Reasoning.Section>\n <Reasoning.Section\n leadingVisual={<WrenchIconOutline />}\n heading=\"Applying agent tools\"\n >\n Step 2 content\n </Reasoning.Section>\n <Reasoning.Footer>\n Footer information\n <Tooltip type=\"simple\">\n <Tooltip.Trigger\n htmlAttributes={{ 'aria-label': 'Info about things like tokens' }}\n >\n <InformationCircleIconOutline className=\"n-size-token-16\" />\n </Tooltip.Trigger>\n <Tooltip.Content>Info about things like tokens</Tooltip.Content>\n </Tooltip>\n </Reasoning.Footer>\n </Reasoning>\n </div>\n );\n};\n\nexport default Component;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Popover.js","sourceRoot":"","sources":["../../../src/popover/Popover.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 {\n FloatingFocusManager,\n FloatingPortal,\n type OffsetOptions,\n type Placement,\n useMergeRefs,\n} from '@floating-ui/react';\nimport classNames from 'classnames';\nimport React from 'react';\n\nimport {\n type CommonProps,\n type PolymorphicCommonProps,\n} from '../_common/types';\nimport { ConditionalWrap } from '../conditional-wrap';\nimport { useIsInsideDialog } from '../dialog/dialog-context';\nimport { useNeedleTheme } from '../theme/ThemeProvider';\nimport { usePopover } from './use-popover';\nimport { usePatchFloatingFocusGuards } from './usePatchFloatingFocusGuards';\n\ntype PlacementOptions =\n | 'bottom-end-top-end'\n | 'bottom-start-top-start'\n | 'bottom-middle-top-middle'\n | 'top-end-bottom-end'\n | 'top-start-bottom-start'\n | 'top-middle-bottom-middle'\n | 'bottom-start-bottom-end'\n | 'top-start-top-end'\n | 'middle-start-middle-end'\n | 'bottom-end-bottom-start'\n | 'top-end-top-start'\n | 'middle-end-middle-start';\n\nexport const placementTranslation: Record<PlacementOptions, Placement> = {\n 'bottom-end-bottom-start': 'right-end',\n 'bottom-end-top-end': 'bottom-end',\n 'bottom-middle-top-middle': 'bottom',\n 'bottom-start-bottom-end': 'left-end',\n 'bottom-start-top-start': 'bottom-start',\n 'middle-end-middle-start': 'right',\n 'middle-start-middle-end': 'left',\n 'top-end-bottom-end': 'top-end',\n 'top-end-top-start': 'right-start',\n 'top-middle-bottom-middle': 'top',\n 'top-start-bottom-start': 'top-start',\n 'top-start-top-end': 'left-start',\n};\ntype PopoverProps = {\n /** if the popover is open */\n isOpen?: boolean;\n /** The content of the popover */\n children?: React.ReactNode;\n /** Can be used if the anchor should be separated from the trigger */\n anchorElement?: Element | null;\n /** If the anchorPosition is provided the anchorElement will be ignored */\n anchorPosition?: {\n x: number;\n y: number;\n };\n /** The placement of the floating element is determined by two sets of words. The first set of words specifies the point on the anchor element where the floating element will be attached. The second set of coordinates specifies the point on the floating element that will attach to the anchor element.*/\n placement?: PlacementOptions;\n /** can take either a number, an object or a function. Full documentation here: https://floating-ui.com/docs/offset */\n offset?: OffsetOptions;\n /** Called when the floating element is opened or closed */\n onOpenChange?: (isOpen: boolean, event?: Event) => void;\n /** Use anchorEl for portal's container. Should be used if the popover is portaled and is inside a Dialog for example. */\n hasAnchorPortal?: boolean;\n /** If the popover should constrain the focus inside the popover while open */\n shouldCaptureFocus?: boolean;\n /** Which element to initially focus. **/\n initialFocus?: number | React.RefObject<HTMLElement | null>;\n /** The role of the popover */\n role?:\n | 'tooltip'\n | 'dialog'\n | 'alertdialog'\n | 'menu'\n | 'listbox'\n | 'grid'\n | 'tree';\n /** If the popover should close when the user clicks outside of it */\n closeOnClickOutside?: boolean;\n /** The strategy of the popover. Fixed should be used when the popover is inside a Dialog. */\n strategy?: 'fixed' | 'absolute';\n /** Whether the content is rendered in a portal */\n isPortaled?: boolean;\n};\n\ntype ContextType = ReturnType<typeof usePopover> | null;\n\nconst PopoverContext = React.createContext<ContextType>(null);\n\nexport const usePopoverContext = () => {\n const context = React.useContext(PopoverContext);\n\n if (context === null) {\n throw new Error('Popover components must be wrapped in <Popover />');\n }\n\n return context;\n};\n\nconst PopoverComponent = ({\n children,\n anchorElement,\n placement,\n isOpen,\n offset,\n anchorPosition,\n hasAnchorPortal: hasAnchorPortalProp,\n shouldCaptureFocus = false,\n initialFocus,\n onOpenChange,\n role,\n closeOnClickOutside = true,\n isPortaled: isPortaledProp,\n strategy: strategyProp,\n}: PopoverProps) => {\n const isInsideDialog = useIsInsideDialog();\n\n const strategy = isInsideDialog ? 'fixed' : 'absolute';\n const hasAnchorPortal = isInsideDialog;\n const isPortaled = !isInsideDialog;\n\n const popover = usePopover({\n anchorElement: anchorElement,\n anchorElementAsPortalAnchor: hasAnchorPortalProp ?? hasAnchorPortal,\n anchorPosition,\n closeOnClickOutside,\n initialFocus,\n isOpen: isOpen,\n isPortaled: isPortaledProp ?? isPortaled,\n offsetOption: offset,\n onOpenChange: onOpenChange,\n placement: placement ? placementTranslation[placement] : undefined,\n role,\n shouldCaptureFocus: shouldCaptureFocus,\n strategy: strategyProp ?? strategy,\n });\n\n return (\n <PopoverContext.Provider value={popover}>\n {children}\n </PopoverContext.Provider>\n );\n};\n\ntype PopoverTriggerProps = {\n /** The content of the trigger */\n children: React.ReactNode;\n /** Whether the trigger should render a button element, or pass its props to the child element */\n hasButtonWrapper?: boolean;\n};\n\nconst PopoverTrigger = ({\n children,\n hasButtonWrapper = false,\n ref,\n ...props\n}: CommonProps<'button', PopoverTriggerProps>) => {\n const context = usePopoverContext();\n // Example from floating UI\n // oxlint-disable-next-line @typescript-eslint/no-explicit-any\n const childrenProps = (children as any).props;\n const mergedRefs = useMergeRefs([\n context.refs.setReference,\n ref,\n childrenProps?.ref,\n ]);\n\n // `hasButtonWrapper` allows the user to pass any element as the anchor\n if (hasButtonWrapper && React.isValidElement(children)) {\n return React.cloneElement(\n children,\n context.getReferenceProps({\n ...props,\n ...childrenProps,\n 'data-state': context.isOpen ? 'open' : 'closed',\n ref: mergedRefs,\n }),\n );\n }\n return (\n <button\n ref={context.refs.setReference}\n type=\"button\"\n data-state={context.isOpen ? 'open' : 'closed'}\n {...context.getReferenceProps(props)}\n >\n {children}\n </button>\n );\n};\n\ntype PopoverContentProps = {\n children: React.ReactNode;\n className?: string;\n style?: React.CSSProperties;\n};\n\nconst PopoverContent = <T extends React.ElementType = 'div'>({\n as,\n className,\n style,\n children,\n htmlAttributes,\n ref,\n ...restProps\n}: PolymorphicCommonProps<T, PopoverContentProps>) => {\n const { context: floatingContext, ...context } = usePopoverContext();\n\n const refs = useMergeRefs([context.refs.setFloating, ref]);\n\n const { themeClassName } = useNeedleTheme();\n\n const classes = classNames('ndl-popover', themeClassName, className);\n const Component: React.ElementType = as ?? 'div';\n\n // Patch to not get axe errors for the focus guards\n // To be noted is that axe gives us a false positive error here since the focus guards directly pass focus to other elements\n // https://github.com/floating-ui/floating-ui/issues/2462\n usePatchFloatingFocusGuards();\n\n if (!floatingContext.open) {\n return null;\n }\n\n return (\n <ConditionalWrap\n shouldWrap={context.isPortaled}\n wrap={(wrapChildren) => (\n <FloatingPortal\n root={\n (context.anchorElementAsPortalAnchor ?? false)\n ? (context.refs.reference.current as HTMLElement | null)\n : undefined\n }\n >\n {wrapChildren}\n </FloatingPortal>\n )}\n >\n <FloatingFocusManager\n context={floatingContext}\n modal={context.shouldCaptureFocus}\n initialFocus={context.initialFocus}\n >\n <Component\n className={classes}\n aria-labelledby={context.labelId}\n aria-describedby={context.descriptionId}\n style={{\n ...context.floatingStyles,\n ...context.transitionStyles,\n ...style,\n }}\n ref={refs}\n {...context.getFloatingProps({ ...htmlAttributes })}\n {...restProps}\n >\n {children}\n </Component>\n </FloatingFocusManager>\n </ConditionalWrap>\n );\n};\n\nconst Popover = Object.assign(PopoverComponent, {\n Content: PopoverContent,\n Trigger: PopoverTrigger,\n});\n\nexport { Popover };\n"]}
|
|
1
|
+
{"version":3,"file":"Popover.js","sourceRoot":"","sources":["../../../src/popover/Popover.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 {\n FloatingFocusManager,\n FloatingPortal,\n type OffsetOptions,\n type Placement,\n useMergeRefs,\n} from '@floating-ui/react';\nimport classNames from 'classnames';\nimport React from 'react';\n\nimport {\n type CommonProps,\n type PolymorphicCommonProps,\n} from '../_common/types';\nimport { ConditionalWrap } from '../conditional-wrap';\nimport { useIsInsideDialog } from '../dialog/dialog-context';\nimport { useNeedleTheme } from '../theme/ThemeProvider';\nimport { usePopover } from './use-popover';\nimport { usePatchFloatingFocusGuards } from './usePatchFloatingFocusGuards';\n\ntype PlacementOptions =\n | 'bottom-end-top-end'\n | 'bottom-start-top-start'\n | 'bottom-middle-top-middle'\n | 'top-end-bottom-end'\n | 'top-start-bottom-start'\n | 'top-middle-bottom-middle'\n | 'bottom-start-bottom-end'\n | 'top-start-top-end'\n | 'middle-start-middle-end'\n | 'bottom-end-bottom-start'\n | 'top-end-top-start'\n | 'middle-end-middle-start';\n\nexport const placementTranslation: Record<PlacementOptions, Placement> = {\n 'bottom-end-bottom-start': 'right-end',\n 'bottom-end-top-end': 'bottom-end',\n 'bottom-middle-top-middle': 'bottom',\n 'bottom-start-bottom-end': 'left-end',\n 'bottom-start-top-start': 'bottom-start',\n 'middle-end-middle-start': 'right',\n 'middle-start-middle-end': 'left',\n 'top-end-bottom-end': 'top-end',\n 'top-end-top-start': 'right-start',\n 'top-middle-bottom-middle': 'top',\n 'top-start-bottom-start': 'top-start',\n 'top-start-top-end': 'left-start',\n};\ntype PopoverProps = {\n /** if the popover is open */\n isOpen?: boolean;\n /** The content of the popover */\n children?: React.ReactNode;\n /** Can be used if the anchor should be separated from the trigger */\n anchorElement?: Element | null;\n /** If the anchorPosition is provided the anchorElement will be ignored */\n anchorPosition?: {\n x: number;\n y: number;\n };\n /** The placement of the floating element is determined by two sets of words. The first set of words specifies the point on the anchor element where the floating element will be attached. The second set of coordinates specifies the point on the floating element that will attach to the anchor element.*/\n placement?: PlacementOptions;\n /** can take either a number, an object or a function. Full documentation here: https://floating-ui.com/docs/offset */\n offset?: OffsetOptions;\n /** Called when an internal state change is triggered, when the floating element either opens or closes. It is not called when `isOpen` is updated by the consumer. */\n onOpenChange?: (isOpen: boolean, event?: Event) => void;\n /** Use anchorEl for portal's container. Should be used if the popover is portaled and is inside a Dialog for example. */\n hasAnchorPortal?: boolean;\n /** If the popover should constrain the focus inside the popover while open */\n shouldCaptureFocus?: boolean;\n /** Which element to initially focus. **/\n initialFocus?: number | React.RefObject<HTMLElement | null>;\n /** The role of the popover */\n role?:\n | 'tooltip'\n | 'dialog'\n | 'alertdialog'\n | 'menu'\n | 'listbox'\n | 'grid'\n | 'tree';\n /** If the popover should close when the user clicks outside of it */\n closeOnClickOutside?: boolean;\n /** The strategy of the popover. Fixed should be used when the popover is inside a Dialog. */\n strategy?: 'fixed' | 'absolute';\n /** Whether the content is rendered in a portal */\n isPortaled?: boolean;\n};\n\ntype ContextType = ReturnType<typeof usePopover> | null;\n\nconst PopoverContext = React.createContext<ContextType>(null);\n\nexport const usePopoverContext = () => {\n const context = React.useContext(PopoverContext);\n\n if (context === null) {\n throw new Error('Popover components must be wrapped in <Popover />');\n }\n\n return context;\n};\n\nconst PopoverComponent = ({\n children,\n anchorElement,\n placement,\n isOpen,\n offset,\n anchorPosition,\n hasAnchorPortal: hasAnchorPortalProp,\n shouldCaptureFocus = false,\n initialFocus,\n onOpenChange,\n role,\n closeOnClickOutside = true,\n isPortaled: isPortaledProp,\n strategy: strategyProp,\n}: PopoverProps) => {\n const isInsideDialog = useIsInsideDialog();\n\n const strategy = isInsideDialog ? 'fixed' : 'absolute';\n const hasAnchorPortal = isInsideDialog;\n const isPortaled = !isInsideDialog;\n\n const popover = usePopover({\n anchorElement: anchorElement,\n anchorElementAsPortalAnchor: hasAnchorPortalProp ?? hasAnchorPortal,\n anchorPosition,\n closeOnClickOutside,\n initialFocus,\n isOpen: isOpen,\n isPortaled: isPortaledProp ?? isPortaled,\n offsetOption: offset,\n onOpenChange: onOpenChange,\n placement: placement ? placementTranslation[placement] : undefined,\n role,\n shouldCaptureFocus: shouldCaptureFocus,\n strategy: strategyProp ?? strategy,\n });\n\n return (\n <PopoverContext.Provider value={popover}>\n {children}\n </PopoverContext.Provider>\n );\n};\n\ntype PopoverTriggerProps = {\n /** The content of the trigger */\n children: React.ReactNode;\n /** Whether the trigger should render a button element, or pass its props to the child element */\n hasButtonWrapper?: boolean;\n};\n\nconst PopoverTrigger = ({\n children,\n hasButtonWrapper = false,\n ref,\n ...props\n}: CommonProps<'button', PopoverTriggerProps>) => {\n const context = usePopoverContext();\n // Example from floating UI\n // oxlint-disable-next-line @typescript-eslint/no-explicit-any\n const childrenProps = (children as any).props;\n const mergedRefs = useMergeRefs([\n context.refs.setReference,\n ref,\n childrenProps?.ref,\n ]);\n\n // `hasButtonWrapper` allows the user to pass any element as the anchor\n if (hasButtonWrapper && React.isValidElement(children)) {\n return React.cloneElement(\n children,\n context.getReferenceProps({\n ...props,\n ...childrenProps,\n 'data-state': context.isOpen ? 'open' : 'closed',\n ref: mergedRefs,\n }),\n );\n }\n return (\n <button\n ref={context.refs.setReference}\n type=\"button\"\n data-state={context.isOpen ? 'open' : 'closed'}\n {...context.getReferenceProps(props)}\n >\n {children}\n </button>\n );\n};\n\ntype PopoverContentProps = {\n children: React.ReactNode;\n className?: string;\n style?: React.CSSProperties;\n};\n\nconst PopoverContent = <T extends React.ElementType = 'div'>({\n as,\n className,\n style,\n children,\n htmlAttributes,\n ref,\n ...restProps\n}: PolymorphicCommonProps<T, PopoverContentProps>) => {\n const { context: floatingContext, ...context } = usePopoverContext();\n\n const refs = useMergeRefs([context.refs.setFloating, ref]);\n\n const { themeClassName } = useNeedleTheme();\n\n const classes = classNames('ndl-popover', themeClassName, className);\n const Component: React.ElementType = as ?? 'div';\n\n // Patch to not get axe errors for the focus guards\n // To be noted is that axe gives us a false positive error here since the focus guards directly pass focus to other elements\n // https://github.com/floating-ui/floating-ui/issues/2462\n usePatchFloatingFocusGuards();\n\n if (!floatingContext.open) {\n return null;\n }\n\n return (\n <ConditionalWrap\n shouldWrap={context.isPortaled}\n wrap={(wrapChildren) => (\n <FloatingPortal\n root={\n (context.anchorElementAsPortalAnchor ?? false)\n ? (context.refs.reference.current as HTMLElement | null)\n : undefined\n }\n >\n {wrapChildren}\n </FloatingPortal>\n )}\n >\n <FloatingFocusManager\n context={floatingContext}\n modal={context.shouldCaptureFocus}\n initialFocus={context.initialFocus}\n >\n <Component\n className={classes}\n aria-labelledby={context.labelId}\n aria-describedby={context.descriptionId}\n style={{\n ...context.floatingStyles,\n ...context.transitionStyles,\n ...style,\n }}\n ref={refs}\n {...context.getFloatingProps({ ...htmlAttributes })}\n {...restProps}\n >\n {children}\n </Component>\n </FloatingFocusManager>\n </ConditionalWrap>\n );\n};\n\nconst Popover = Object.assign(PopoverComponent, {\n Content: PopoverContent,\n Trigger: PopoverTrigger,\n});\n\nexport { Popover };\n"]}
|
|
@@ -23,7 +23,9 @@ export { default as PopoverNoButtonWrapper } from './popover-no-button-wrapper.s
|
|
|
23
23
|
export { default as PopoverSeparateAnchor } from './popover-separate-anchor.story';
|
|
24
24
|
export { default as PopoverInDialog } from './popover-in-dialog.story';
|
|
25
25
|
export { default as PopoverCustomOffset } from './popover-custom-offset.story';
|
|
26
|
+
export { default as PopoverControlled } from './popover-controlled.story';
|
|
26
27
|
import { removeLicenseHeader } from '../../_common/export-stories-utils';
|
|
28
|
+
import PopoverControlledSrcRaw from './popover-controlled.story?raw';
|
|
27
29
|
import PopoverCustomOffsetSrcRaw from './popover-custom-offset.story?raw';
|
|
28
30
|
import PopoverDefaultSrcRaw from './popover-default.story?raw';
|
|
29
31
|
import PopoverInDialogSrcRaw from './popover-in-dialog.story?raw';
|
|
@@ -34,4 +36,5 @@ export const PopoverNoButtonWrapperSrc = removeLicenseHeader(PopoverNoButtonWrap
|
|
|
34
36
|
export const PopoverSeparateAnchorSrc = removeLicenseHeader(PopoverSeparateAnchorSrcRaw);
|
|
35
37
|
export const PopoverInDialogSrc = removeLicenseHeader(PopoverInDialogSrcRaw);
|
|
36
38
|
export const PopoverCustomOffsetSrc = removeLicenseHeader(PopoverCustomOffsetSrcRaw);
|
|
39
|
+
export const PopoverControlledSrc = removeLicenseHeader(PopoverControlledSrcRaw);
|
|
37
40
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/popover/stories/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACpE,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,mCAAmC,CAAC;AACtF,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,iCAAiC,CAAC;AACnF,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,2BAA2B,CAAC;AACvE,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,+BAA+B,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/popover/stories/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACpE,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,mCAAmC,CAAC;AACtF,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,iCAAiC,CAAC;AACnF,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,2BAA2B,CAAC;AACvE,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,+BAA+B,CAAC;AAC/E,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAE1E,OAAO,EAAE,mBAAmB,EAAE,MAAM,oCAAoC,CAAC;AACzE,OAAO,uBAAuB,MAAM,gCAAgC,CAAC;AACrE,OAAO,yBAAyB,MAAM,mCAAmC,CAAC;AAC1E,OAAO,oBAAoB,MAAM,6BAA6B,CAAC;AAC/D,OAAO,qBAAqB,MAAM,+BAA+B,CAAC;AAClE,OAAO,4BAA4B,MAAM,uCAAuC,CAAC;AACjF,OAAO,2BAA2B,MAAM,qCAAqC,CAAC;AAE9E,MAAM,CAAC,MAAM,iBAAiB,GAAG,mBAAmB,CAAC,oBAAoB,CAAC,CAAC;AAC3E,MAAM,CAAC,MAAM,yBAAyB,GAAG,mBAAmB,CAC1D,4BAA4B,CAC7B,CAAC;AACF,MAAM,CAAC,MAAM,wBAAwB,GAAG,mBAAmB,CACzD,2BAA2B,CAC5B,CAAC;AACF,MAAM,CAAC,MAAM,kBAAkB,GAAG,mBAAmB,CAAC,qBAAqB,CAAC,CAAC;AAC7E,MAAM,CAAC,MAAM,sBAAsB,GAAG,mBAAmB,CACvD,yBAAyB,CAC1B,CAAC;AACF,MAAM,CAAC,MAAM,oBAAoB,GAAG,mBAAmB,CACrD,uBAAuB,CACxB,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 PopoverDefault } from './popover-default.story';\nexport { default as PopoverNoButtonWrapper } from './popover-no-button-wrapper.story';\nexport { default as PopoverSeparateAnchor } from './popover-separate-anchor.story';\nexport { default as PopoverInDialog } from './popover-in-dialog.story';\nexport { default as PopoverCustomOffset } from './popover-custom-offset.story';\nexport { default as PopoverControlled } from './popover-controlled.story';\n\nimport { removeLicenseHeader } from '../../_common/export-stories-utils';\nimport PopoverControlledSrcRaw from './popover-controlled.story?raw';\nimport PopoverCustomOffsetSrcRaw from './popover-custom-offset.story?raw';\nimport PopoverDefaultSrcRaw from './popover-default.story?raw';\nimport PopoverInDialogSrcRaw from './popover-in-dialog.story?raw';\nimport PopoverNoButtonWrapperSrcRaw from './popover-no-button-wrapper.story?raw';\nimport PopoverSeparateAnchorSrcRaw from './popover-separate-anchor.story?raw';\n\nexport const PopoverDefaultSrc = removeLicenseHeader(PopoverDefaultSrcRaw);\nexport const PopoverNoButtonWrapperSrc = removeLicenseHeader(\n PopoverNoButtonWrapperSrcRaw,\n);\nexport const PopoverSeparateAnchorSrc = removeLicenseHeader(\n PopoverSeparateAnchorSrcRaw,\n);\nexport const PopoverInDialogSrc = removeLicenseHeader(PopoverInDialogSrcRaw);\nexport const PopoverCustomOffsetSrc = removeLicenseHeader(\n PopoverCustomOffsetSrcRaw,\n);\nexport const PopoverControlledSrc = removeLicenseHeader(\n PopoverControlledSrcRaw,\n);\n"]}
|
|
@@ -20,13 +20,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
20
20
|
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|
21
21
|
*/
|
|
22
22
|
import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
|
|
23
|
-
import {
|
|
24
|
-
import { PencilSquareIconOutline, WrenchIconOutline, } from '@neo4j-ndl/react/icons';
|
|
23
|
+
import { FilledButton, Popover } from '@neo4j-ndl/react';
|
|
25
24
|
import { useState } from 'react';
|
|
26
25
|
const Component = () => {
|
|
27
|
-
const [
|
|
28
|
-
|
|
29
|
-
|
|
26
|
+
const [isOpen, setIsOpen] = useState(false);
|
|
27
|
+
return (_jsxs(Popover, { isOpen: isOpen, onOpenChange: (open) => {
|
|
28
|
+
setIsOpen(open);
|
|
29
|
+
}, children: [_jsx(Popover.Trigger, { hasButtonWrapper: true, children: _jsx(FilledButton, { onClick: () => setIsOpen((prev) => !prev), children: "Open Popover" }) }), _jsx(Popover.Content, { className: "n-p-token-16", children: "Popover content" })] }));
|
|
30
30
|
};
|
|
31
31
|
export default Component;
|
|
32
|
-
//# sourceMappingURL=
|
|
32
|
+
//# sourceMappingURL=popover-controlled.story.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"popover-controlled.story.js","sourceRoot":"","sources":["../../../../src/popover/stories/popover-controlled.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC5C,OAAO,CACL,MAAC,OAAO,IACN,MAAM,EAAE,MAAM,EACd,YAAY,EAAE,CAAC,IAAI,EAAE,EAAE;YACrB,SAAS,CAAC,IAAI,CAAC,CAAC;QAClB,CAAC,aAED,KAAC,OAAO,CAAC,OAAO,IAAC,gBAAgB,kBAC/B,KAAC,YAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,6BAExC,GACC,EAClB,KAAC,OAAO,CAAC,OAAO,IAAC,SAAS,EAAC,cAAc,gCAEvB,IACV,CACX,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, Popover } from '@neo4j-ndl/react';\nimport { useState } from 'react';\n\nconst Component = () => {\n const [isOpen, setIsOpen] = useState(false);\n return (\n <Popover\n isOpen={isOpen}\n onOpenChange={(open) => {\n setIsOpen(open);\n }}\n >\n <Popover.Trigger hasButtonWrapper>\n <FilledButton onClick={() => setIsOpen((prev) => !prev)}>\n Open Popover\n </FilledButton>\n </Popover.Trigger>\n <Popover.Content className=\"n-p-token-16\">\n Popover content\n </Popover.Content>\n </Popover>\n );\n};\n\nexport default Component;\n"]}
|
|
@@ -23,11 +23,13 @@ import { tokens } from '@neo4j-ndl/base';
|
|
|
23
23
|
import { useMemo, useState } from 'react';
|
|
24
24
|
export function usePopover({ isInitialOpen = false, placement = 'bottom', isOpen: controlledOpen, onOpenChange: setControlledOpen, offsetOption = 10, anchorElement, anchorPosition, anchorElementAsPortalAnchor, shouldCaptureFocus, initialFocus, role: roleProp, closeOnClickOutside, strategy = 'absolute', isPortaled = true, } = {}) {
|
|
25
25
|
var _a;
|
|
26
|
+
// Internal state for uncontrolled mode (no `isOpen` prop provided).
|
|
26
27
|
const [isOpenUncontrolled, setIsOpenUncontrolled] = useState(isInitialOpen);
|
|
27
28
|
const [labelId, setLabelId] = useState();
|
|
28
29
|
const [descriptionId, setDescriptionId] = useState();
|
|
30
|
+
// Controlled/uncontrolled pattern: prefer the consumer-provided `isOpen`,
|
|
31
|
+
// falling back to internal state when not provided.
|
|
29
32
|
const isOpen = controlledOpen !== null && controlledOpen !== void 0 ? controlledOpen : isOpenUncontrolled;
|
|
30
|
-
const setIsOpen = setControlledOpen !== null && setControlledOpen !== void 0 ? setControlledOpen : setIsOpenUncontrolled;
|
|
31
33
|
const data = useFloating({
|
|
32
34
|
elements: {
|
|
33
35
|
reference: anchorElement,
|
|
@@ -41,8 +43,11 @@ export function usePopover({ isInitialOpen = false, placement = 'bottom', isOpen
|
|
|
41
43
|
}),
|
|
42
44
|
shift(),
|
|
43
45
|
],
|
|
46
|
+
// Floating UI calls this when interactions (useClick, useDismiss, etc.)
|
|
47
|
+
// trigger an open/close. We always sync internal state so uncontrolled
|
|
48
|
+
// mode works, and notify the consumer callback exactly once if provided.
|
|
44
49
|
onOpenChange: (open, event) => {
|
|
45
|
-
|
|
50
|
+
setIsOpenUncontrolled(open);
|
|
46
51
|
setControlledOpen === null || setControlledOpen === void 0 ? void 0 : setControlledOpen(open, event);
|
|
47
52
|
},
|
|
48
53
|
open: isOpen,
|
|
@@ -51,6 +56,8 @@ export function usePopover({ isInitialOpen = false, placement = 'bottom', isOpen
|
|
|
51
56
|
whileElementsMounted: autoUpdate,
|
|
52
57
|
});
|
|
53
58
|
const context = data.context;
|
|
59
|
+
// Only enable built-in click-to-toggle in uncontrolled mode. In controlled
|
|
60
|
+
// mode the consumer owns the open state and wires up their own trigger.
|
|
54
61
|
const click = useClick(context, {
|
|
55
62
|
enabled: controlledOpen === undefined,
|
|
56
63
|
});
|
|
@@ -69,8 +76,7 @@ export function usePopover({ isInitialOpen = false, placement = 'bottom', isOpen
|
|
|
69
76
|
const { styles: transitionStyles } = useTransitionStyles(context, {
|
|
70
77
|
duration: (_a = Number.parseInt(tokens.motion.duration.quick)) !== null && _a !== void 0 ? _a : 0,
|
|
71
78
|
});
|
|
72
|
-
return useMemo(() => (Object.assign(Object.assign(Object.assign({ isOpen,
|
|
73
|
-
setIsOpen }, interactions), data), { transitionStyles,
|
|
79
|
+
return useMemo(() => (Object.assign(Object.assign(Object.assign({ isOpen }, interactions), data), { transitionStyles,
|
|
74
80
|
labelId,
|
|
75
81
|
descriptionId,
|
|
76
82
|
setLabelId,
|
|
@@ -80,7 +86,6 @@ export function usePopover({ isInitialOpen = false, placement = 'bottom', isOpen
|
|
|
80
86
|
initialFocus,
|
|
81
87
|
isPortaled })), [
|
|
82
88
|
isOpen,
|
|
83
|
-
setIsOpen,
|
|
84
89
|
interactions,
|
|
85
90
|
data,
|
|
86
91
|
transitionStyles,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-popover.js","sourceRoot":"","sources":["../../../src/popover/use-popover.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,EACL,UAAU,EACV,IAAI,EACJ,MAAM,EAGN,KAAK,EACL,QAAQ,EACR,cAAc,EACd,UAAU,EACV,WAAW,EACX,eAAe,EAEf,OAAO,EACP,mBAAmB,GACpB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"use-popover.js","sourceRoot":"","sources":["../../../src/popover/use-popover.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 {\n autoUpdate,\n flip,\n offset,\n type OffsetOptions,\n type Placement,\n shift,\n useClick,\n useClientPoint,\n useDismiss,\n useFloating,\n useInteractions,\n type UseInteractionsReturn,\n useRole,\n useTransitionStyles,\n} from '@floating-ui/react';\nimport { tokens } from '@neo4j-ndl/base';\nimport { useMemo, useState } from 'react';\n\nexport interface PopoverOptions {\n isInitialOpen?: boolean;\n placement?: Placement;\n isOpen?: boolean;\n onOpenChange?: (open: boolean, event?: Event) => void;\n offsetOption?: OffsetOptions;\n anchorElement?: Element | null;\n anchorPosition?: {\n x: number;\n y: number;\n };\n anchorElementAsPortalAnchor?: boolean;\n shouldCaptureFocus?: boolean;\n initialFocus?: number | React.RefObject<HTMLElement | null>;\n role?:\n | 'tooltip'\n | 'dialog'\n | 'alertdialog'\n | 'menu'\n | 'listbox'\n | 'grid'\n | 'tree';\n closeOnClickOutside?: boolean;\n strategy?: 'fixed' | 'absolute';\n isPortaled?: boolean;\n}\n\nexport interface UsePopoverReturn\n extends UseInteractionsReturn, ReturnType<typeof useFloating> {\n isOpen: boolean;\n labelId: string | undefined;\n descriptionId: string | undefined;\n transitionStyles: React.CSSProperties;\n setLabelId: (labelId: string | undefined) => void;\n setDescriptionId: (descriptionId: string | undefined) => void;\n anchorElementAsPortalAnchor: boolean | undefined;\n shouldCaptureFocus: boolean | undefined;\n initialFocus: number | React.RefObject<HTMLElement | null> | undefined;\n isPortaled: boolean;\n}\n\nexport function usePopover({\n isInitialOpen = false,\n placement = 'bottom',\n isOpen: controlledOpen,\n onOpenChange: setControlledOpen,\n offsetOption = 10,\n anchorElement,\n anchorPosition,\n anchorElementAsPortalAnchor,\n shouldCaptureFocus,\n initialFocus,\n role: roleProp,\n closeOnClickOutside,\n strategy = 'absolute',\n isPortaled = true,\n}: PopoverOptions = {}): UsePopoverReturn {\n // Internal state for uncontrolled mode (no `isOpen` prop provided).\n const [isOpenUncontrolled, setIsOpenUncontrolled] = useState(isInitialOpen);\n const [labelId, setLabelId] = useState<string | undefined>();\n const [descriptionId, setDescriptionId] = useState<string | undefined>();\n\n // Controlled/uncontrolled pattern: prefer the consumer-provided `isOpen`,\n // falling back to internal state when not provided.\n const isOpen = controlledOpen ?? isOpenUncontrolled;\n\n const data = useFloating({\n elements: {\n reference: anchorElement,\n },\n middleware: [\n offset(offsetOption),\n flip({\n crossAxis: placement.includes('-'),\n fallbackAxisSideDirection: 'end',\n padding: 5,\n }),\n shift(),\n ],\n // Floating UI calls this when interactions (useClick, useDismiss, etc.)\n // trigger an open/close. We always sync internal state so uncontrolled\n // mode works, and notify the consumer callback exactly once if provided.\n onOpenChange: (open, event) => {\n setIsOpenUncontrolled(open);\n setControlledOpen?.(open, event);\n },\n open: isOpen,\n placement: placement,\n strategy,\n whileElementsMounted: autoUpdate,\n });\n const context = data.context;\n\n // Only enable built-in click-to-toggle in uncontrolled mode. In controlled\n // mode the consumer owns the open state and wires up their own trigger.\n const click = useClick(context, {\n enabled: controlledOpen === undefined,\n });\n\n const dismiss = useDismiss(context, {\n outsidePress: closeOnClickOutside,\n });\n const role = useRole(context, {\n role: roleProp,\n });\n\n const clientPoint = useClientPoint(context, {\n enabled: anchorPosition !== undefined,\n x: anchorPosition?.x,\n y: anchorPosition?.y,\n });\n\n const interactions = useInteractions([click, dismiss, role, clientPoint]);\n\n const { styles: transitionStyles } = useTransitionStyles(context, {\n duration: Number.parseInt(tokens.motion.duration.quick) ?? 0,\n });\n\n return useMemo(\n () => ({\n isOpen,\n ...interactions,\n ...data,\n transitionStyles,\n labelId,\n descriptionId,\n setLabelId,\n setDescriptionId,\n anchorElementAsPortalAnchor,\n shouldCaptureFocus,\n initialFocus,\n isPortaled,\n }),\n [\n isOpen,\n interactions,\n data,\n transitionStyles,\n labelId,\n descriptionId,\n anchorElementAsPortalAnchor,\n shouldCaptureFocus,\n initialFocus,\n isPortaled,\n ],\n );\n}\n"]}
|
|
@@ -36,18 +36,21 @@ type SectionProps = {
|
|
|
36
36
|
children?: React.ReactNode;
|
|
37
37
|
/** The visual leading the section */
|
|
38
38
|
leadingVisual?: React.ReactNode;
|
|
39
|
-
/** Whether the section is expanded
|
|
39
|
+
/** Whether the section is expanded.
|
|
40
|
+
* @deprecated - Does nothing, will be removed in v5 */
|
|
40
41
|
isExpanded?: boolean;
|
|
41
|
-
/** The default value of the section is expanded
|
|
42
|
+
/** The default value of the section is expanded.
|
|
43
|
+
* @deprecated - Does nothing, will be removed in v5 */
|
|
42
44
|
isDefaultExpanded?: boolean;
|
|
43
|
-
/** Callback function triggered when the section is expanded
|
|
45
|
+
/** Callback function triggered when the section is expanded.
|
|
46
|
+
* @deprecated - Does nothing, will be removed in v5 */
|
|
44
47
|
onExpandChange?: (isExpanded: boolean) => void;
|
|
45
48
|
};
|
|
46
49
|
declare const Reasoning: (({ isThinking, thinkingMs, currentAction, children, className, style, htmlAttributes, ref, ...restProps }: CommonProps<"div", ReasoningProps>) => import("react/jsx-runtime").JSX.Element) & {
|
|
47
50
|
Footer: ({ children, className, style, htmlAttributes, ref, ...restProps }: CommonProps<"div", {
|
|
48
51
|
children: React.ReactNode;
|
|
49
52
|
}>) => import("react/jsx-runtime").JSX.Element;
|
|
50
|
-
Section: ({ heading, leadingVisual, children, className, style, htmlAttributes, ref, isExpanded, isDefaultExpanded, onExpandChange, ...restProps }: CommonProps<"div", SectionProps>) => import("react/jsx-runtime").JSX.Element;
|
|
53
|
+
Section: ({ heading, leadingVisual, children, className, style, htmlAttributes, ref, isExpanded: _isExpanded, isDefaultExpanded: _isDefaultExpanded, onExpandChange: _onExpandChange, ...restProps }: CommonProps<"div", SectionProps>) => import("react/jsx-runtime").JSX.Element;
|
|
51
54
|
};
|
|
52
55
|
export { Reasoning };
|
|
53
56
|
//# sourceMappingURL=Reasoning.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Reasoning.d.ts","sourceRoot":"","sources":["../../../../src/ai/reasoning/Reasoning.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAOH,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,qBAAqB,CAAC;
|
|
1
|
+
{"version":3,"file":"Reasoning.d.ts","sourceRoot":"","sources":["../../../../src/ai/reasoning/Reasoning.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAOH,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAIvD,KAAK,cAAc,GAAG;IACpB,+DAA+D;IAC/D,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,iCAAiC;IACjC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,mDAAmD;IACnD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,8CAA8C;IAC9C,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AA8FF,KAAK,YAAY,GAAG;IAClB,iCAAiC;IACjC,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,kCAAkC;IAClC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,qCAAqC;IACrC,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEhC;2DACuD;IACvD,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;2DACuD;IACvD,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAE5B;2DACuD;IACvD,cAAc,CAAC,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;CAChD,CAAC;AAiEF,QAAA,MAAM,SAAS,8GAhKZ,WAAW,CAAC,KAAK,EAAE,cAAc,CAAC;gFA+IlC,WAAW,CAAC,KAAK,EAAE;QAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;KAAE,CAAC;0MAlCjD,WAAW,CAAC,KAAK,EAAE,YAAY,CAAC;CAsDjC,CAAC;AAEH,OAAO,EAAE,SAAS,EAAE,CAAC"}
|
|
@@ -19,7 +19,5 @@
|
|
|
19
19
|
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|
20
20
|
*/
|
|
21
21
|
export { default as ReasoningFull } from './reasoning-full.story';
|
|
22
|
-
export { default as ReasoningControlled } from './reasoning-controlled.story';
|
|
23
22
|
export declare const ReasoningFullSrc: string;
|
|
24
|
-
export declare const ReasoningControlledSrc: string;
|
|
25
23
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/ai/reasoning/stories/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/ai/reasoning/stories/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAKlE,eAAO,MAAM,gBAAgB,QAA2C,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"reasoning-full.story.d.ts","sourceRoot":"","sources":["../../../../../src/ai/reasoning/stories/reasoning-full.story.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAWjD,QAAA,MAAM,SAAS,+
|
|
1
|
+
{"version":3,"file":"reasoning-full.story.d.ts","sourceRoot":"","sources":["../../../../../src/ai/reasoning/stories/reasoning-full.story.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAWjD,QAAA,MAAM,SAAS,+CAwCd,CAAC;AAEF,eAAe,SAAS,CAAC"}
|
|
@@ -39,7 +39,7 @@ type PopoverProps = {
|
|
|
39
39
|
placement?: PlacementOptions;
|
|
40
40
|
/** can take either a number, an object or a function. Full documentation here: https://floating-ui.com/docs/offset */
|
|
41
41
|
offset?: OffsetOptions;
|
|
42
|
-
/**
|
|
42
|
+
/** Called when an internal state change is triggered, when the floating element either opens or closes. It is not called when `isOpen` is updated by the consumer. */
|
|
43
43
|
onOpenChange?: (isOpen: boolean, event?: Event) => void;
|
|
44
44
|
/** Use anchorEl for portal's container. Should be used if the popover is portaled and is inside a Dialog for example. */
|
|
45
45
|
hasAnchorPortal?: boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../../../src/popover/Popover.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,EAGL,KAAK,aAAa,EAClB,KAAK,SAAS,EAEf,MAAM,oBAAoB,CAAC;AAE5B,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EACL,KAAK,WAAW,EAChB,KAAK,sBAAsB,EAC5B,MAAM,kBAAkB,CAAC;AAO1B,KAAK,gBAAgB,GACjB,oBAAoB,GACpB,wBAAwB,GACxB,0BAA0B,GAC1B,oBAAoB,GACpB,wBAAwB,GACxB,0BAA0B,GAC1B,yBAAyB,GACzB,mBAAmB,GACnB,yBAAyB,GACzB,yBAAyB,GACzB,mBAAmB,GACnB,yBAAyB,CAAC;AAE9B,eAAO,MAAM,oBAAoB,EAAE,MAAM,CAAC,gBAAgB,EAAE,SAAS,CAapE,CAAC;AACF,KAAK,YAAY,GAAG;IAClB,6BAA6B;IAC7B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,iCAAiC;IACjC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,qEAAqE;IACrE,aAAa,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IAC/B,0EAA0E;IAC1E,cAAc,CAAC,EAAE;QACf,CAAC,EAAE,MAAM,CAAC;QACV,CAAC,EAAE,MAAM,CAAC;KACX,CAAC;IACF,+SAA+S;IAC/S,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B,yHAAyH;IACzH,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,
|
|
1
|
+
{"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../../../src/popover/Popover.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,EAGL,KAAK,aAAa,EAClB,KAAK,SAAS,EAEf,MAAM,oBAAoB,CAAC;AAE5B,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EACL,KAAK,WAAW,EAChB,KAAK,sBAAsB,EAC5B,MAAM,kBAAkB,CAAC;AAO1B,KAAK,gBAAgB,GACjB,oBAAoB,GACpB,wBAAwB,GACxB,0BAA0B,GAC1B,oBAAoB,GACpB,wBAAwB,GACxB,0BAA0B,GAC1B,yBAAyB,GACzB,mBAAmB,GACnB,yBAAyB,GACzB,yBAAyB,GACzB,mBAAmB,GACnB,yBAAyB,CAAC;AAE9B,eAAO,MAAM,oBAAoB,EAAE,MAAM,CAAC,gBAAgB,EAAE,SAAS,CAapE,CAAC;AACF,KAAK,YAAY,GAAG;IAClB,6BAA6B;IAC7B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,iCAAiC;IACjC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,qEAAqE;IACrE,aAAa,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IAC/B,0EAA0E;IAC1E,cAAc,CAAC,EAAE;QACf,CAAC,EAAE,MAAM,CAAC;QACV,CAAC,EAAE,MAAM,CAAC;KACX,CAAC;IACF,+SAA+S;IAC/S,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B,yHAAyH;IACzH,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,sKAAsK;IACtK,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,EAAE,KAAK,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;IACxD,yHAAyH;IACzH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,8EAA8E;IAC9E,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,yCAAyC;IACzC,YAAY,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC5D,8BAA8B;IAC9B,IAAI,CAAC,EACD,SAAS,GACT,QAAQ,GACR,aAAa,GACb,MAAM,GACN,SAAS,GACT,MAAM,GACN,MAAM,CAAC;IACX,qEAAqE;IACrE,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,6FAA6F;IAC7F,QAAQ,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC;IAChC,kDAAkD;IAClD,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAMF,eAAO,MAAM,iBAAiB,gDAQ7B,CAAC;AA+CF,KAAK,mBAAmB,GAAG;IACzB,iCAAiC;IACjC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,iGAAiG;IACjG,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B,CAAC;AA0CF,KAAK,mBAAmB,GAAG;IACzB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,CAAC;AAqEF,QAAA,MAAM,OAAO,kPAtJV,YAAY;cAmFS,CAAC,SAAS,KAAK,CAAC,WAAW,iFAQhD,sBAAsB,CAAC,CAAC,EAAE,mBAAmB,CAAC;6DAjD9C,WAAW,CAAC,QAAQ,EAAE,mBAAmB,CAAC;CA+G3C,CAAC;AAEH,OAAO,EAAE,OAAO,EAAE,CAAC"}
|
|
@@ -23,9 +23,11 @@ export { default as PopoverNoButtonWrapper } from './popover-no-button-wrapper.s
|
|
|
23
23
|
export { default as PopoverSeparateAnchor } from './popover-separate-anchor.story';
|
|
24
24
|
export { default as PopoverInDialog } from './popover-in-dialog.story';
|
|
25
25
|
export { default as PopoverCustomOffset } from './popover-custom-offset.story';
|
|
26
|
+
export { default as PopoverControlled } from './popover-controlled.story';
|
|
26
27
|
export declare const PopoverDefaultSrc: string;
|
|
27
28
|
export declare const PopoverNoButtonWrapperSrc: string;
|
|
28
29
|
export declare const PopoverSeparateAnchorSrc: string;
|
|
29
30
|
export declare const PopoverInDialogSrc: string;
|
|
30
31
|
export declare const PopoverCustomOffsetSrc: string;
|
|
32
|
+
export declare const PopoverControlledSrc: string;
|
|
31
33
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/popover/stories/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACpE,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,mCAAmC,CAAC;AACtF,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,iCAAiC,CAAC;AACnF,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,2BAA2B,CAAC;AACvE,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,+BAA+B,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/popover/stories/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACpE,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,mCAAmC,CAAC;AACtF,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,iCAAiC,CAAC;AACnF,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,2BAA2B,CAAC;AACvE,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,+BAA+B,CAAC;AAC/E,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAU1E,eAAO,MAAM,iBAAiB,QAA4C,CAAC;AAC3E,eAAO,MAAM,yBAAyB,QAErC,CAAC;AACF,eAAO,MAAM,wBAAwB,QAEpC,CAAC;AACF,eAAO,MAAM,kBAAkB,QAA6C,CAAC;AAC7E,eAAO,MAAM,sBAAsB,QAElC,CAAC;AACF,eAAO,MAAM,oBAAoB,QAEhC,CAAC"}
|
|
@@ -21,4 +21,4 @@
|
|
|
21
21
|
import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
|
|
22
22
|
declare const Component: () => import("react/jsx-runtime").JSX.Element;
|
|
23
23
|
export default Component;
|
|
24
|
-
//# sourceMappingURL=
|
|
24
|
+
//# sourceMappingURL=popover-controlled.story.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"popover-controlled.story.d.ts","sourceRoot":"","sources":["../../../../src/popover/stories/popover-controlled.story.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAKjD,QAAA,MAAM,SAAS,+CAmBd,CAAC;AAEF,eAAe,SAAS,CAAC"}
|
|
@@ -40,7 +40,6 @@ export interface PopoverOptions {
|
|
|
40
40
|
}
|
|
41
41
|
export interface UsePopoverReturn extends UseInteractionsReturn, ReturnType<typeof useFloating> {
|
|
42
42
|
isOpen: boolean;
|
|
43
|
-
setIsOpen: (isOpen: boolean) => void;
|
|
44
43
|
labelId: string | undefined;
|
|
45
44
|
descriptionId: string | undefined;
|
|
46
45
|
transitionStyles: React.CSSProperties;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-popover.d.ts","sourceRoot":"","sources":["../../../src/popover/use-popover.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,EAIL,KAAK,aAAa,EAClB,KAAK,SAAS,EAKd,WAAW,EAEX,KAAK,qBAAqB,EAG3B,MAAM,oBAAoB,CAAC;AAI5B,MAAM,WAAW,cAAc;IAC7B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,KAAK,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;IACtD,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,aAAa,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IAC/B,cAAc,CAAC,EAAE;QACf,CAAC,EAAE,MAAM,CAAC;QACV,CAAC,EAAE,MAAM,CAAC;KACX,CAAC;IACF,2BAA2B,CAAC,EAAE,OAAO,CAAC;IACtC,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,YAAY,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC5D,IAAI,CAAC,EACD,SAAS,GACT,QAAQ,GACR,aAAa,GACb,MAAM,GACN,SAAS,GACT,MAAM,GACN,MAAM,CAAC;IACX,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC;IAChC,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,WAAW,gBACf,SAAQ,qBAAqB,EAAE,UAAU,CAAC,OAAO,WAAW,CAAC;IAC7D,MAAM,EAAE,OAAO,CAAC;IAChB,
|
|
1
|
+
{"version":3,"file":"use-popover.d.ts","sourceRoot":"","sources":["../../../src/popover/use-popover.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,EAIL,KAAK,aAAa,EAClB,KAAK,SAAS,EAKd,WAAW,EAEX,KAAK,qBAAqB,EAG3B,MAAM,oBAAoB,CAAC;AAI5B,MAAM,WAAW,cAAc;IAC7B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,KAAK,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;IACtD,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,aAAa,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IAC/B,cAAc,CAAC,EAAE;QACf,CAAC,EAAE,MAAM,CAAC;QACV,CAAC,EAAE,MAAM,CAAC;KACX,CAAC;IACF,2BAA2B,CAAC,EAAE,OAAO,CAAC;IACtC,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,YAAY,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC5D,IAAI,CAAC,EACD,SAAS,GACT,QAAQ,GACR,aAAa,GACb,MAAM,GACN,SAAS,GACT,MAAM,GACN,MAAM,CAAC;IACX,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC;IAChC,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,WAAW,gBACf,SAAQ,qBAAqB,EAAE,UAAU,CAAC,OAAO,WAAW,CAAC;IAC7D,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,GAAG,SAAS,CAAC;IAC5B,aAAa,EAAE,MAAM,GAAG,SAAS,CAAC;IAClC,gBAAgB,EAAE,KAAK,CAAC,aAAa,CAAC;IACtC,UAAU,EAAE,CAAC,OAAO,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IAClD,gBAAgB,EAAE,CAAC,aAAa,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IAC9D,2BAA2B,EAAE,OAAO,GAAG,SAAS,CAAC;IACjD,kBAAkB,EAAE,OAAO,GAAG,SAAS,CAAC;IACxC,YAAY,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,GAAG,SAAS,CAAC;IACvE,UAAU,EAAE,OAAO,CAAC;CACrB;AAED,wBAAgB,UAAU,CAAC,EACzB,aAAqB,EACrB,SAAoB,EACpB,MAAM,EAAE,cAAc,EACtB,YAAY,EAAE,iBAAiB,EAC/B,YAAiB,EACjB,aAAa,EACb,cAAc,EACd,2BAA2B,EAC3B,kBAAkB,EAClB,YAAY,EACZ,IAAI,EAAE,QAAQ,EACd,mBAAmB,EACnB,QAAqB,EACrB,UAAiB,GAClB,GAAE,cAAmB,GAAG,gBAAgB,CA0FxC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@neo4j-ndl/react",
|
|
3
|
-
"version": "4.9.
|
|
3
|
+
"version": "4.9.16",
|
|
4
4
|
"sideEffects": false,
|
|
5
5
|
"description": "React implementation of Neo4j Design System",
|
|
6
6
|
"keywords": [
|
|
@@ -85,7 +85,7 @@
|
|
|
85
85
|
"@tanstack/react-table": "8.21.3",
|
|
86
86
|
"react": ">=19.0.0",
|
|
87
87
|
"react-dom": ">=19.0.0",
|
|
88
|
-
"@neo4j-ndl/base": "^4.9.
|
|
88
|
+
"@neo4j-ndl/base": "^4.9.6"
|
|
89
89
|
},
|
|
90
90
|
"dependencies": {
|
|
91
91
|
"@dnd-kit/core": "6.3.1",
|
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
4
|
-
/**
|
|
5
|
-
*
|
|
6
|
-
* Copyright (c) "Neo4j"
|
|
7
|
-
* Neo4j Sweden AB [http://neo4j.com]
|
|
8
|
-
*
|
|
9
|
-
* This file is part of Neo4j.
|
|
10
|
-
*
|
|
11
|
-
* Neo4j is free software: you can redistribute it and/or modify
|
|
12
|
-
* it under the terms of the GNU General Public License as published by
|
|
13
|
-
* the Free Software Foundation, either version 3 of the License, or
|
|
14
|
-
* (at your option) any later version.
|
|
15
|
-
*
|
|
16
|
-
* This program is distributed in the hope that it will be useful,
|
|
17
|
-
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
18
|
-
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
19
|
-
* GNU General Public License for more details.
|
|
20
|
-
*
|
|
21
|
-
* You should have received a copy of the GNU General Public License
|
|
22
|
-
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|
23
|
-
*/
|
|
24
|
-
require("@neo4j-ndl/base/lib/neo4j-ds-styles.css");
|
|
25
|
-
const ai_1 = require("@neo4j-ndl/react/ai");
|
|
26
|
-
const icons_1 = require("@neo4j-ndl/react/icons");
|
|
27
|
-
const react_1 = require("react");
|
|
28
|
-
const Component = () => {
|
|
29
|
-
const [isFirstSectionExpanded, setIsFirstSectionExpanded] = (0, react_1.useState)(false);
|
|
30
|
-
const [isSecondSectionExpanded, setIsSecondSectionExpanded] = (0, react_1.useState)(false);
|
|
31
|
-
return ((0, jsx_runtime_1.jsxs)(ai_1.Reasoning, { isThinking: false, thinkingMs: 1400, children: [(0, jsx_runtime_1.jsx)(ai_1.Reasoning.Section, { leadingVisual: (0, jsx_runtime_1.jsx)(icons_1.PencilSquareIconOutline, {}), heading: "Creating an action plan", isExpanded: isFirstSectionExpanded, onExpandChange: (isExpanded) => setIsFirstSectionExpanded(isExpanded), children: "Step 1 content" }), (0, jsx_runtime_1.jsx)(ai_1.Reasoning.Section, { leadingVisual: (0, jsx_runtime_1.jsx)(icons_1.WrenchIconOutline, {}), heading: "Applying agent tools", isExpanded: isSecondSectionExpanded, onExpandChange: (isExpanded) => setIsSecondSectionExpanded(isExpanded), children: "Step 2 content" })] }));
|
|
32
|
-
};
|
|
33
|
-
exports.default = Component;
|
|
34
|
-
//# sourceMappingURL=reasoning-controlled.story.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"reasoning-controlled.story.js","sourceRoot":"","sources":["../../../../../src/ai/reasoning/stories/reasoning-controlled.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAAgD;AAChD,kDAGgC;AAChC,iCAAiC;AAEjC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,sBAAsB,EAAE,yBAAyB,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAC5E,MAAM,CAAC,uBAAuB,EAAE,0BAA0B,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAE9E,OAAO,CACL,wBAAC,cAAS,IAAC,UAAU,EAAE,KAAK,EAAE,UAAU,EAAE,IAAI,aAC5C,uBAAC,cAAS,CAAC,OAAO,IAChB,aAAa,EAAE,uBAAC,+BAAuB,KAAG,EAC1C,OAAO,EAAC,yBAAyB,EACjC,UAAU,EAAE,sBAAsB,EAClC,cAAc,EAAE,CAAC,UAAU,EAAE,EAAE,CAAC,yBAAyB,CAAC,UAAU,CAAC,+BAGnD,EACpB,uBAAC,cAAS,CAAC,OAAO,IAChB,aAAa,EAAE,uBAAC,yBAAiB,KAAG,EACpC,OAAO,EAAC,sBAAsB,EAC9B,UAAU,EAAE,uBAAuB,EACnC,cAAc,EAAE,CAAC,UAAU,EAAE,EAAE,CAAC,0BAA0B,CAAC,UAAU,CAAC,+BAGpD,IACV,CACb,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 { Reasoning } from '@neo4j-ndl/react/ai';\nimport {\n PencilSquareIconOutline,\n WrenchIconOutline,\n} from '@neo4j-ndl/react/icons';\nimport { useState } from 'react';\n\nconst Component = () => {\n const [isFirstSectionExpanded, setIsFirstSectionExpanded] = useState(false);\n const [isSecondSectionExpanded, setIsSecondSectionExpanded] = useState(false);\n\n return (\n <Reasoning isThinking={false} thinkingMs={1400}>\n <Reasoning.Section\n leadingVisual={<PencilSquareIconOutline />}\n heading=\"Creating an action plan\"\n isExpanded={isFirstSectionExpanded}\n onExpandChange={(isExpanded) => setIsFirstSectionExpanded(isExpanded)}\n >\n Step 1 content\n </Reasoning.Section>\n <Reasoning.Section\n leadingVisual={<WrenchIconOutline />}\n heading=\"Applying agent tools\"\n isExpanded={isSecondSectionExpanded}\n onExpandChange={(isExpanded) => setIsSecondSectionExpanded(isExpanded)}\n >\n Step 2 content\n </Reasoning.Section>\n </Reasoning>\n );\n};\n\nexport default Component;\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"reasoning-controlled.story.js","sourceRoot":"","sources":["../../../../../src/ai/reasoning/stories/reasoning-controlled.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAChD,OAAO,EACL,uBAAuB,EACvB,iBAAiB,GAClB,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,sBAAsB,EAAE,yBAAyB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC5E,MAAM,CAAC,uBAAuB,EAAE,0BAA0B,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE9E,OAAO,CACL,MAAC,SAAS,IAAC,UAAU,EAAE,KAAK,EAAE,UAAU,EAAE,IAAI,aAC5C,KAAC,SAAS,CAAC,OAAO,IAChB,aAAa,EAAE,KAAC,uBAAuB,KAAG,EAC1C,OAAO,EAAC,yBAAyB,EACjC,UAAU,EAAE,sBAAsB,EAClC,cAAc,EAAE,CAAC,UAAU,EAAE,EAAE,CAAC,yBAAyB,CAAC,UAAU,CAAC,+BAGnD,EACpB,KAAC,SAAS,CAAC,OAAO,IAChB,aAAa,EAAE,KAAC,iBAAiB,KAAG,EACpC,OAAO,EAAC,sBAAsB,EAC9B,UAAU,EAAE,uBAAuB,EACnC,cAAc,EAAE,CAAC,UAAU,EAAE,EAAE,CAAC,0BAA0B,CAAC,UAAU,CAAC,+BAGpD,IACV,CACb,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 { Reasoning } from '@neo4j-ndl/react/ai';\nimport {\n PencilSquareIconOutline,\n WrenchIconOutline,\n} from '@neo4j-ndl/react/icons';\nimport { useState } from 'react';\n\nconst Component = () => {\n const [isFirstSectionExpanded, setIsFirstSectionExpanded] = useState(false);\n const [isSecondSectionExpanded, setIsSecondSectionExpanded] = useState(false);\n\n return (\n <Reasoning isThinking={false} thinkingMs={1400}>\n <Reasoning.Section\n leadingVisual={<PencilSquareIconOutline />}\n heading=\"Creating an action plan\"\n isExpanded={isFirstSectionExpanded}\n onExpandChange={(isExpanded) => setIsFirstSectionExpanded(isExpanded)}\n >\n Step 1 content\n </Reasoning.Section>\n <Reasoning.Section\n leadingVisual={<WrenchIconOutline />}\n heading=\"Applying agent tools\"\n isExpanded={isSecondSectionExpanded}\n onExpandChange={(isExpanded) => setIsSecondSectionExpanded(isExpanded)}\n >\n Step 2 content\n </Reasoning.Section>\n </Reasoning>\n );\n};\n\nexport default Component;\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"reasoning-controlled.story.d.ts","sourceRoot":"","sources":["../../../../../src/ai/reasoning/stories/reasoning-controlled.story.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AASjD,QAAA,MAAM,SAAS,+CAwBd,CAAC;AAEF,eAAe,SAAS,CAAC"}
|