@neo4j-ndl/react 4.18.13 → 4.20.0

package/lib/cjs/combobox/stories/combobox-action-on-select.story.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox-action-on-select.story.js","sourceRoot":"","sources":["../../../../src/combobox/stories/combobox-action-on-select.story.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAAkE;AAClE,kDAAgE;AAChE,iCAAyC;AAEzC,MAAM,QAAQ,GAAG;IACf;QACE,WAAW,EAAE,gCAAgC;QAC7C,KAAK,EAAE,aAAa;QACpB,KAAK,EAAE,6BAA6B;KACrC;IACD;QACE,WAAW,EAAE,mDAAmD;QAChE,KAAK,EAAE,kBAAkB;QACzB,KAAK,EAAE,gCAAgC;KACxC;IACD;QACE,WAAW,EAAE,gDAAgD;QAC7D,KAAK,EAAE,cAAc;QACrB,KAAK,EAAE,cAAc;KACtB;CACF,CAAC;AAEF,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,IAAA,gBAAQ,EAAC,EAAE,CAAC,CAAC;IACvD,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,IAAA,gBAAQ,EAAC,EAAE,CAAC,CAAC;IACnD,MAAM,WAAW,GAAG,IAAA,cAAM,EAAsB,IAAI,CAAC,CAAC;IACtD,OAAO,CACL,iCAAK,SAAS,EAAC,qCAAqC,aAClD,uBAAC,gBAAQ,IACP,GAAG,EAAE,WAAW,EAChB,KAAK,EAAC,eAAe,EACrB,KAAK,EAAE,aAAa,EACpB,cAAc,EAAE;oBACd,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,gBAAgB,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;oBACzD,IAAI,EAAE,CAAC;iBACR,EACD,QAAQ,EAAC,+CAA+C,GACxD,EACF,uBAAC,gBAAQ,IACP,KAAK,EAAC,gBAAgB,EACtB,OAAO,EAAE,QAAQ,EACjB,iBAAiB,EAAC,iBAAiB,EACnC,WAAW,EAAE,WAAW,EACxB,cAAc,EAAE,cAAc;gBAC9B,kEAAkE;gBAClE,yEAAyE;gBACzE,KAAK,EAAE,IAAI,EACX,QAAQ,EAAE,CAAC,OAAO,EAAE,EAAE;;oBACpB,IAAI,OAAO,KAAK,IAAI,EAAE,CAAC;wBACrB,OAAO;oBACT,CAAC;oBAED,gBAAgB,CAAC,CAAC,YAAY,EAAE,EAAE,CAChC,YAAY,KAAK,EAAE;wBACjB,CAAC,CAAC,OAAO,CAAC,KAAK;wBACf,CAAC,CAAC,GAAG,YAAY,KAAK,OAAO,CAAC,KAAK,EAAE,CACxC,CAAC;oBACF,cAAc,CAAC,EAAE,CAAC,CAAC;oBACnB,MAAA,WAAW,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;gBAC/B,CAAC,EACD,aAAa,EAAE,CAAC,EAAwB,EAAE,EAAE;wBAA5B,EAAE,GAAG,OAAmB,EAAd,YAAY,cAAtB,OAAwB,CAAF;oBAAO,OAAA,CAC3C,uBAAC,kBAAU,IACT,GAAG,EAAE,GAAmC,EACxC,WAAW,EAAC,gBAAgB,EAC5B,cAAc,EAAE,YAAY,YAE5B,uBAAC,8BAAsB,KAAG,GACf,CACd,CAAA;iBAAA,GACD,IACE,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 { Combobox, IconButton, TextArea } from '@neo4j-ndl/react';\nimport { CommandLineIconOutline } from '@neo4j-ndl/react/icons';\nimport { useRef, useState } from 'react';\n\nconst commands = [\n  {\n    description: 'Return a small sample of nodes',\n    label: 'Match nodes',\n    value: 'MATCH (n) RETURN n LIMIT 25',\n  },\n  {\n    description: 'Show the labels and relationships in the database',\n    label: 'Visualize schema',\n    value: 'CALL db.schema.visualization()',\n  },\n  {\n    description: 'List the indexes available to the current user',\n    label: 'Show indexes',\n    value: 'SHOW INDEXES',\n  },\n];\n\nconst Component = () => {\n  const [terminalValue, setTerminalValue] = useState('');\n  const [searchValue, setSearchValue] = useState('');\n  const textAreaRef = useRef<HTMLTextAreaElement>(null);\n  return (\n    <div className=\"n-flex n-gap-token-2 n-items-center\">\n      <TextArea\n        ref={textAreaRef}\n        label=\"Command input\"\n        value={terminalValue}\n        htmlAttributes={{\n          onChange: (event) => setTerminalValue(event.target.value),\n          rows: 5,\n        }}\n        helpText=\"Use the button below to search for a command.\"\n      />\n      <Combobox\n        label=\"Insert command\"\n        options={commands}\n        searchPlaceholder=\"Search commands\"\n        searchValue={searchValue}\n        onSearchChange={setSearchValue}\n        // The picker activates an option but never keeps it as its value.\n        // Keeping the controlled value empty avoids a persistent selected state.\n        value={null}\n        onChange={(command) => {\n          if (command === null) {\n            return;\n          }\n\n          setTerminalValue((currentValue) =>\n            currentValue === ''\n              ? command.value\n              : `${currentValue}\\n${command.value}`,\n          );\n          setSearchValue('');\n          textAreaRef.current?.focus();\n        }}\n        renderTrigger={({ ref, ...triggerProps }) => (\n          <IconButton\n            ref={ref as React.Ref<HTMLButtonElement>}\n            description=\"Insert command\"\n            htmlAttributes={triggerProps}\n          >\n            <CommandLineIconOutline />\n          </IconButton>\n        )}\n      />\n    </div>\n  );\n};\n\nexport default Component;\n"]}

package/lib/cjs/combobox/stories/combobox-actions.story.js

@@ -0,0 +1,78 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ *
+ *  Copyright (c) "Neo4j"
+ *  Neo4j Sweden AB [http://neo4j.com]
+ *
+ *  This file is part of Neo4j.
+ *
+ *  Neo4j is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+require("@neo4j-ndl/base/lib/neo4j-ds-styles.css");
+const react_1 = require("@neo4j-ndl/react");
+const icons_1 = require("@neo4j-ndl/react/icons");
+const options = [
+    { label: 'Movie recommendations', value: 'movie-recommendations' },
+    { label: 'Fraud detection', value: 'fraud-detection' },
+    { label: 'Supply chain', value: 'supply-chain' },
+    { label: 'Customer 360', value: 'customer-360' },
+    { label: 'Knowledge graph', value: 'knowledge-graph' },
+    { label: 'Network topology', value: 'network-topology' },
+    { label: 'Identity resolution', value: 'identity-resolution' },
+    { label: 'Master data management', value: 'master-data-management' },
+    { label: 'Social network analysis', value: 'social-network-analysis' },
+    { label: 'Route optimization', value: 'route-optimization' },
+    { label: 'Recommendation engine', value: 'recommendation-engine' },
+    { label: 'Access control', value: 'access-control' },
+    { label: 'Data lineage', value: 'data-lineage' },
+    { label: 'Entity resolution', value: 'entity-resolution' },
+    { label: 'Bill of materials', value: 'bill-of-materials' },
+    { label: 'Impact analysis', value: 'impact-analysis' },
+    { label: 'Anti money laundering', value: 'anti-money-laundering' },
+    { label: 'Dependency mapping', value: 'dependency-mapping' },
+    { label: 'Patient journey', value: 'patient-journey' },
+    { label: 'Content personalization', value: 'content-personalization' },
+    { label: 'Risk assessment', value: 'risk-assessment' },
+    { label: 'Churn prediction', value: 'churn-prediction' },
+    { label: 'Inventory tracking', value: 'inventory-tracking' },
+    { label: 'Semantic search', value: 'semantic-search' },
+    { label: 'Digital twin', value: 'digital-twin' },
+];
+const Component = () => {
+    return ((0, jsx_runtime_1.jsx)("div", { className: "n-flex n-flex-col n-gap-token-4", children: (0, jsx_runtime_1.jsx)(react_1.Combobox, { label: "Project", placeholder: "Select project", searchPlaceholder: "Search projects", options: options, 
+            // An action never becomes part of the value. It runs, the panel closes,
+            // and the selection is left as it was, which is what makes it usable for
+            // leaving the combobox entirely.
+            actions: [
+                {
+                    label: 'All projects',
+                    onSelect: () => console.info('all projects'),
+                },
+                {
+                    // A divider above the action separates it from the actions before
+                    // it. The first action never needs one: it already sits below the
+                    // divider that separates actions from options.
+                    hasDivider: true,
+                    label: 'Create project',
+                    leadingVisual: (0, jsx_runtime_1.jsx)(icons_1.PlusIconOutline, {}),
+                    // The search value comes along, so an unmatched query can prefill
+                    // the flow the action leads to.
+                    onSelect: ({ searchValue }) => console.info('create project with search value', searchValue),
+                },
+            ], helpText: "actions stay pinned below the scrolling options, and are exempt from searching" }) }));
+};
+exports.default = Component;
+//# sourceMappingURL=combobox-actions.story.js.map

package/lib/cjs/combobox/stories/combobox-actions.story.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox-actions.story.js","sourceRoot":"","sources":["../../../../src/combobox/stories/combobox-actions.story.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 '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { Combobox } from '@neo4j-ndl/react';\nimport { PlusIconOutline } from '@neo4j-ndl/react/icons';\n\nconst options = [\n  { label: 'Movie recommendations', value: 'movie-recommendations' },\n  { label: 'Fraud detection', value: 'fraud-detection' },\n  { label: 'Supply chain', value: 'supply-chain' },\n  { label: 'Customer 360', value: 'customer-360' },\n  { label: 'Knowledge graph', value: 'knowledge-graph' },\n  { label: 'Network topology', value: 'network-topology' },\n  { label: 'Identity resolution', value: 'identity-resolution' },\n  { label: 'Master data management', value: 'master-data-management' },\n  { label: 'Social network analysis', value: 'social-network-analysis' },\n  { label: 'Route optimization', value: 'route-optimization' },\n  { label: 'Recommendation engine', value: 'recommendation-engine' },\n  { label: 'Access control', value: 'access-control' },\n  { label: 'Data lineage', value: 'data-lineage' },\n  { label: 'Entity resolution', value: 'entity-resolution' },\n  { label: 'Bill of materials', value: 'bill-of-materials' },\n  { label: 'Impact analysis', value: 'impact-analysis' },\n  { label: 'Anti money laundering', value: 'anti-money-laundering' },\n  { label: 'Dependency mapping', value: 'dependency-mapping' },\n  { label: 'Patient journey', value: 'patient-journey' },\n  { label: 'Content personalization', value: 'content-personalization' },\n  { label: 'Risk assessment', value: 'risk-assessment' },\n  { label: 'Churn prediction', value: 'churn-prediction' },\n  { label: 'Inventory tracking', value: 'inventory-tracking' },\n  { label: 'Semantic search', value: 'semantic-search' },\n  { label: 'Digital twin', value: 'digital-twin' },\n];\n\nconst Component = () => {\n  return (\n    <div className=\"n-flex n-flex-col n-gap-token-4\">\n      <Combobox\n        label=\"Project\"\n        placeholder=\"Select project\"\n        searchPlaceholder=\"Search projects\"\n        options={options}\n        // An action never becomes part of the value. It runs, the panel closes,\n        // and the selection is left as it was, which is what makes it usable for\n        // leaving the combobox entirely.\n        actions={[\n          {\n            label: 'All projects',\n            onSelect: () => console.info('all projects'),\n          },\n          {\n            // A divider above the action separates it from the actions before\n            // it. The first action never needs one: it already sits below the\n            // divider that separates actions from options.\n            hasDivider: true,\n            label: 'Create project',\n            leadingVisual: <PlusIconOutline />,\n            // The search value comes along, so an unmatched query can prefill\n            // the flow the action leads to.\n            onSelect: ({ searchValue }) =>\n              console.info('create project with search value', searchValue),\n          },\n        ]}\n        helpText=\"actions stay pinned below the scrolling options, and are exempt from searching\"\n      />\n    </div>\n  );\n};\n\nexport default Component;\n"]}

package/lib/cjs/combobox/stories/combobox-async.story.js

@@ -0,0 +1,75 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ *
+ *  Copyright (c) "Neo4j"
+ *  Neo4j Sweden AB [http://neo4j.com]
+ *
+ *  This file is part of Neo4j.
+ *
+ *  Neo4j is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+require("@neo4j-ndl/base/lib/neo4j-ds-styles.css");
+const react_1 = require("@neo4j-ndl/react");
+const react_2 = require("react");
+const catalog = [
+    { label: 'Neo4j', value: 'neo4j' },
+    { label: 'Aura', value: 'aura' },
+    { label: 'Bloom', value: 'bloom' },
+    { label: 'Browser', value: 'browser' },
+    { label: 'Cypher', value: 'cypher' },
+    { label: 'Data Importer', value: 'data-importer' },
+    { label: 'GraphQL', value: 'graphql' },
+];
+const SEARCH_DELAY_MS = 600;
+const Component = () => {
+    const [searchValue, setSearchValue] = (0, react_2.useState)('');
+    const [options, setOptions] = (0, react_2.useState)([]);
+    const [isLoading, setIsLoading] = (0, react_2.useState)(false);
+    const [hasOpened, setHasOpened] = (0, react_2.useState)(false);
+    (0, react_2.useEffect)(() => {
+        if (!hasOpened) {
+            return;
+        }
+        let isCancelled = false;
+        const query = searchValue.trim().toLowerCase();
+        setIsLoading(true);
+        setOptions([]);
+        const timeoutId = window.setTimeout(() => {
+            if (isCancelled) {
+                return;
+            }
+            setOptions(query === ''
+                ? catalog
+                : catalog.filter((option) => option.label.toLowerCase().includes(query)));
+            setIsLoading(false);
+        }, SEARCH_DELAY_MS);
+        return () => {
+            isCancelled = true;
+            window.clearTimeout(timeoutId);
+        };
+    }, [hasOpened, searchValue]);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-flex-col n-gap-token-4", children: [(0, jsx_runtime_1.jsx)(react_1.Combobox, { label: "Products", 
+                // The consumer supplies already-filtered options, so internal
+                // filtering must be disabled.
+                filterOption: false, searchValue: searchValue, onSearchChange: setSearchValue, onOpenChange: (isOpen) => {
+                    if (isOpen) {
+                        setIsLoading(true);
+                        setHasOpened(true);
+                    }
+                }, options: options, isLoading: isLoading, searchPlaceholder: "Search products" }), (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-small", className: "n-text-neutral-text-weak", children: "The consumer clears, fetches, and filters options after a short delay. The loading state is shown while each request is in flight." })] }));
+};
+exports.default = Component;
+//# sourceMappingURL=combobox-async.story.js.map

package/lib/cjs/combobox/stories/combobox-async.story.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox-async.story.js","sourceRoot":"","sources":["../../../../src/combobox/stories/combobox-async.story.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 '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { Combobox, Typography } from '@neo4j-ndl/react';\nimport { useEffect, useState } from 'react';\n\nconst catalog = [\n  { label: 'Neo4j', value: 'neo4j' },\n  { label: 'Aura', value: 'aura' },\n  { label: 'Bloom', value: 'bloom' },\n  { label: 'Browser', value: 'browser' },\n  { label: 'Cypher', value: 'cypher' },\n  { label: 'Data Importer', value: 'data-importer' },\n  { label: 'GraphQL', value: 'graphql' },\n];\n\nconst SEARCH_DELAY_MS = 600;\n\nconst Component = () => {\n  const [searchValue, setSearchValue] = useState('');\n  const [options, setOptions] = useState<typeof catalog>([]);\n  const [isLoading, setIsLoading] = useState(false);\n  const [hasOpened, setHasOpened] = useState(false);\n\n  useEffect(() => {\n    if (!hasOpened) {\n      return;\n    }\n\n    let isCancelled = false;\n    const query = searchValue.trim().toLowerCase();\n\n    setIsLoading(true);\n    setOptions([]);\n\n    const timeoutId = window.setTimeout(() => {\n      if (isCancelled) {\n        return;\n      }\n\n      setOptions(\n        query === ''\n          ? catalog\n          : catalog.filter((option) =>\n              option.label.toLowerCase().includes(query),\n            ),\n      );\n      setIsLoading(false);\n    }, SEARCH_DELAY_MS);\n\n    return () => {\n      isCancelled = true;\n      window.clearTimeout(timeoutId);\n    };\n  }, [hasOpened, searchValue]);\n\n  return (\n    <div className=\"n-flex n-flex-col n-gap-token-4\">\n      <Combobox\n        label=\"Products\"\n        // The consumer supplies already-filtered options, so internal\n        // filtering must be disabled.\n        filterOption={false}\n        searchValue={searchValue}\n        onSearchChange={setSearchValue}\n        onOpenChange={(isOpen) => {\n          if (isOpen) {\n            setIsLoading(true);\n            setHasOpened(true);\n          }\n        }}\n        options={options}\n        isLoading={isLoading}\n        searchPlaceholder=\"Search products\"\n      />\n      <Typography variant=\"body-small\" className=\"n-text-neutral-text-weak\">\n        The consumer clears, fetches, and filters options after a short delay.\n        The loading state is shown while each request is in flight.\n      </Typography>\n    </div>\n  );\n};\n\nexport default Component;\n"]}

package/lib/cjs/combobox/stories/combobox-clean.story.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ *
+ *  Copyright (c) "Neo4j"
+ *  Neo4j Sweden AB [http://neo4j.com]
+ *
+ *  This file is part of Neo4j.
+ *
+ *  Neo4j is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+require("@neo4j-ndl/base/lib/neo4j-ds-styles.css");
+const react_1 = require("@neo4j-ndl/react");
+const Component = () => {
+    const options = [
+        { label: 'Neo4j', value: 'neo4j' },
+        { label: 'Aura', value: 'aura' },
+        { label: 'Bloom', value: 'bloom' },
+        { isDisabled: true, label: 'Unavailable', value: 'unavailable' },
+    ];
+    return ((0, jsx_runtime_1.jsx)(react_1.Combobox, { label: "Product", 
+        // A clean combobox sits inline, next to whatever already names it.
+        hasVisuallyHiddenLabel: true, isClean: true, options: options, defaultValue: options[0] }));
+};
+exports.default = Component;
+//# sourceMappingURL=combobox-clean.story.js.map

package/lib/cjs/combobox/stories/combobox-clean.story.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox-clean.story.js","sourceRoot":"","sources":["../../../../src/combobox/stories/combobox-clean.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAA4C;AAE5C,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,OAAO,GAAG;QACd,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;QAClC,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE;QAChC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;QAClC,EAAE,UAAU,EAAE,IAAI,EAAE,KAAK,EAAE,aAAa,EAAE,KAAK,EAAE,aAAa,EAAE;KACjE,CAAC;IAEF,OAAO,CACL,uBAAC,gBAAQ,IACP,KAAK,EAAC,SAAS;QACf,mEAAmE;QACnE,sBAAsB,QACtB,OAAO,QACP,OAAO,EAAE,OAAO,EAChB,YAAY,EAAE,OAAO,CAAC,CAAC,CAAC,GACxB,CACH,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 { Combobox } from '@neo4j-ndl/react';\n\nconst Component = () => {\n  const options = [\n    { label: 'Neo4j', value: 'neo4j' },\n    { label: 'Aura', value: 'aura' },\n    { label: 'Bloom', value: 'bloom' },\n    { isDisabled: true, label: 'Unavailable', value: 'unavailable' },\n  ];\n\n  return (\n    <Combobox\n      label=\"Product\"\n      // A clean combobox sits inline, next to whatever already names it.\n      hasVisuallyHiddenLabel\n      isClean\n      options={options}\n      defaultValue={options[0]}\n    />\n  );\n};\n\nexport default Component;\n"]}

package/lib/cjs/combobox/stories/combobox-creatable.story.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ *
+ *  Copyright (c) "Neo4j"
+ *  Neo4j Sweden AB [http://neo4j.com]
+ *
+ *  This file is part of Neo4j.
+ *
+ *  Neo4j is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+require("@neo4j-ndl/base/lib/neo4j-ds-styles.css");
+const react_1 = require("@neo4j-ndl/react");
+const react_2 = require("react");
+const INITIAL_OPTIONS = [
+    { label: 'Recommendations', value: 'recommendations' },
+    { label: 'Fraud detection', value: 'fraud-detection' },
+    { label: 'Knowledge graph', value: 'knowledge-graph' },
+];
+const Component = () => {
+    const [options, setOptions] = (0, react_2.useState)(INITIAL_OPTIONS);
+    const [value, setValue] = (0, react_2.useState)([]);
+    return ((0, jsx_runtime_1.jsx)(react_1.Combobox, { label: "Use cases", placeholder: "Select use cases", searchPlaceholder: "Search or add a use case", isMulti: true, isCreatable: true, isClearable: true, options: options, value: value, onChange: (nextValue) => setValue(nextValue), 
+        // Created options are not added to `options` by the Combobox, so they are
+        // appended here to keep them available for later selections.
+        onCreateOption: (option) => setOptions((current) => [...current, option]) }));
+};
+exports.default = Component;
+//# sourceMappingURL=combobox-creatable.story.js.map

package/lib/cjs/combobox/stories/combobox-creatable.story.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox-creatable.story.js","sourceRoot":"","sources":["../../../../src/combobox/stories/combobox-creatable.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAA4C;AAC5C,iCAAiC;AAOjC,MAAM,eAAe,GAAa;IAChC,EAAE,KAAK,EAAE,iBAAiB,EAAE,KAAK,EAAE,iBAAiB,EAAE;IACtD,EAAE,KAAK,EAAE,iBAAiB,EAAE,KAAK,EAAE,iBAAiB,EAAE;IACtD,EAAE,KAAK,EAAE,iBAAiB,EAAE,KAAK,EAAE,iBAAiB,EAAE;CACvD,CAAC;AAEF,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,IAAA,gBAAQ,EAAC,eAAe,CAAC,CAAC;IACxD,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,IAAA,gBAAQ,EAAW,EAAE,CAAC,CAAC;IAEjD,OAAO,CACL,uBAAC,gBAAQ,IACP,KAAK,EAAC,WAAW,EACjB,WAAW,EAAC,kBAAkB,EAC9B,iBAAiB,EAAC,0BAA0B,EAC5C,OAAO,QACP,WAAW,QACX,WAAW,QACX,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,CAAC,SAAS,EAAE,EAAE,CAAC,QAAQ,CAAC,SAAS,CAAC;QAC5C,0EAA0E;QAC1E,6DAA6D;QAC7D,cAAc,EAAE,CAAC,MAAM,EAAE,EAAE,CAAC,UAAU,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,GAAG,OAAO,EAAE,MAAM,CAAC,CAAC,GACzE,CACH,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 { Combobox } from '@neo4j-ndl/react';\nimport { useState } from 'react';\n\ntype Option = {\n  label: string;\n  value: string;\n};\n\nconst INITIAL_OPTIONS: Option[] = [\n  { label: 'Recommendations', value: 'recommendations' },\n  { label: 'Fraud detection', value: 'fraud-detection' },\n  { label: 'Knowledge graph', value: 'knowledge-graph' },\n];\n\nconst Component = () => {\n  const [options, setOptions] = useState(INITIAL_OPTIONS);\n  const [value, setValue] = useState<Option[]>([]);\n\n  return (\n    <Combobox\n      label=\"Use cases\"\n      placeholder=\"Select use cases\"\n      searchPlaceholder=\"Search or add a use case\"\n      isMulti\n      isCreatable\n      isClearable\n      options={options}\n      value={value}\n      onChange={(nextValue) => setValue(nextValue)}\n      // Created options are not added to `options` by the Combobox, so they are\n      // appended here to keep them available for later selections.\n      onCreateOption={(option) => setOptions((current) => [...current, option])}\n    />\n  );\n};\n\nexport default Component;\n"]}

package/lib/cjs/combobox/stories/combobox-custom-multi.story.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ *
+ *  Copyright (c) "Neo4j"
+ *  Neo4j Sweden AB [http://neo4j.com]
+ *
+ *  This file is part of Neo4j.
+ *
+ *  Neo4j is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+require("@neo4j-ndl/base/lib/neo4j-ds-styles.css");
+const base_1 = require("@neo4j-ndl/base");
+const react_1 = require("@neo4j-ndl/react");
+const react_2 = require("react");
+const options = [
+    { color: base_1.tokens.graph['1'], label: 'Person', value: 'person' },
+    { color: base_1.tokens.graph['2'], label: 'Movie', value: 'movie' },
+    { color: base_1.tokens.graph['3'], label: 'Director', value: 'director' },
+    { color: base_1.tokens.graph['4'], label: 'Actor', value: 'actor' },
+    { color: base_1.tokens.graph['7'], label: 'Genre', value: 'genre' },
+    { color: base_1.tokens.graph['12'], label: 'Studio', value: 'studio' },
+];
+// One presentation for the selected values and for the options, so both read
+// the same. `as="span"` keeps it non-interactive, which leaves the list and the
+// clear button as the ways to deselect.
+const NodeLabel = ({ option, isDisabled, }) => ((0, jsx_runtime_1.jsx)(react_1.GraphLabel, { as: "span", type: "node", size: "small", color: option.color, isDisabled: isDisabled, children: option.label }));
+const Component = () => {
+    const [value, setValue] = (0, react_2.useState)(options.slice(0, 2));
+    return ((0, jsx_runtime_1.jsx)(react_1.Combobox, { label: "Node labels", helpText: "Deselect a label in the list to remove it.", isMulti: true, isClearable: true, options: options, value: value, onChange: setValue, components: { MultiValue: NodeLabel, OptionLabel: NodeLabel } }));
+};
+exports.default = Component;
+//# sourceMappingURL=combobox-custom-multi.story.js.map

package/lib/cjs/combobox/stories/combobox-custom-multi.story.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox-custom-multi.story.js","sourceRoot":"","sources":["../../../../src/combobox/stories/combobox-custom-multi.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,0CAAyC;AACzC,4CAAwD;AACxD,iCAAiC;AAUjC,MAAM,OAAO,GAAsB;IACjC,EAAE,KAAK,EAAE,aAAM,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE;IAC9D,EAAE,KAAK,EAAE,aAAM,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;IAC5D,EAAE,KAAK,EAAE,aAAM,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,UAAU,EAAE;IAClE,EAAE,KAAK,EAAE,aAAM,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;IAC5D,EAAE,KAAK,EAAE,aAAM,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;IAC5D,EAAE,KAAK,EAAE,aAAM,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE;CAChE,CAAC;AAEF,6EAA6E;AAC7E,gFAAgF;AAChF,wCAAwC;AACxC,MAAM,SAAS,GAAG,CAAC,EACjB,MAAM,EACN,UAAU,GAIX,EAAE,EAAE,CAAC,CACJ,uBAAC,kBAAU,IACT,EAAE,EAAC,MAAM,EACT,IAAI,EAAC,MAAM,EACX,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,UAAU,EAAE,UAAU,YAErB,MAAM,CAAC,KAAK,GACF,CACd,CAAC;AAEF,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,IAAA,gBAAQ,EAAoB,OAAO,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;IAE3E,OAAO,CACL,uBAAC,gBAAQ,IACP,KAAK,EAAC,aAAa,EACnB,QAAQ,EAAC,4CAA4C,EACrD,OAAO,QACP,WAAW,QACX,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,UAAU,EAAE,EAAE,UAAU,EAAE,SAAS,EAAE,WAAW,EAAE,SAAS,EAAE,GAC7D,CACH,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 { tokens } from '@neo4j-ndl/base';\nimport { Combobox, GraphLabel } from '@neo4j-ndl/react';\nimport { useState } from 'react';\n\n// The option type is free to carry fields of its own. Passing these options to\n// the combobox is what types `option` inside the overrides below.\ntype NodeLabelOption = {\n  label: string;\n  value: string;\n  color: string;\n};\n\nconst options: NodeLabelOption[] = [\n  { color: tokens.graph['1'], label: 'Person', value: 'person' },\n  { color: tokens.graph['2'], label: 'Movie', value: 'movie' },\n  { color: tokens.graph['3'], label: 'Director', value: 'director' },\n  { color: tokens.graph['4'], label: 'Actor', value: 'actor' },\n  { color: tokens.graph['7'], label: 'Genre', value: 'genre' },\n  { color: tokens.graph['12'], label: 'Studio', value: 'studio' },\n];\n\n// One presentation for the selected values and for the options, so both read\n// the same. `as=\"span\"` keeps it non-interactive, which leaves the list and the\n// clear button as the ways to deselect.\nconst NodeLabel = ({\n  option,\n  isDisabled,\n}: {\n  option: NodeLabelOption;\n  isDisabled: boolean;\n}) => (\n  <GraphLabel\n    as=\"span\"\n    type=\"node\"\n    size=\"small\"\n    color={option.color}\n    isDisabled={isDisabled}\n  >\n    {option.label}\n  </GraphLabel>\n);\n\nconst Component = () => {\n  const [value, setValue] = useState<NodeLabelOption[]>(options.slice(0, 2));\n\n  return (\n    <Combobox\n      label=\"Node labels\"\n      helpText=\"Deselect a label in the list to remove it.\"\n      isMulti\n      isClearable\n      options={options}\n      value={value}\n      onChange={setValue}\n      components={{ MultiValue: NodeLabel, OptionLabel: NodeLabel }}\n    />\n  );\n};\n\nexport default Component;\n"]}

package/lib/cjs/combobox/stories/combobox-custom-single.story.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ *
+ *  Copyright (c) "Neo4j"
+ *  Neo4j Sweden AB [http://neo4j.com]
+ *
+ *  This file is part of Neo4j.
+ *
+ *  Neo4j is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+require("@neo4j-ndl/base/lib/neo4j-ds-styles.css");
+const base_1 = require("@neo4j-ndl/base");
+const react_1 = require("@neo4j-ndl/react");
+const react_2 = require("react");
+const options = [
+    { color: base_1.tokens.graph['1'], label: 'Person', value: 'person' },
+    { color: base_1.tokens.graph['2'], label: 'Movie', value: 'movie' },
+    { color: base_1.tokens.graph['3'], label: 'Director', value: 'director' },
+    { color: base_1.tokens.graph['4'], label: 'Actor', value: 'actor' },
+    { color: base_1.tokens.graph['7'], label: 'Genre', value: 'genre' },
+    { color: base_1.tokens.graph['12'], label: 'Studio', value: 'studio' },
+];
+// One presentation for the selected value and for the options, so both read
+// the same. `as="span"` keeps the label non-interactive.
+const NodeLabel = ({ option, isDisabled, }) => ((0, jsx_runtime_1.jsx)(react_1.GraphLabel, { as: "span", type: "node", size: "small", color: option.color, isDisabled: isDisabled, children: option.label }));
+const Component = () => {
+    const [value, setValue] = (0, react_2.useState)(options[0]);
+    return ((0, jsx_runtime_1.jsx)(react_1.Combobox, { label: "Node label", isClearable: true, options: options, value: value, onChange: setValue, components: { OptionLabel: NodeLabel, SingleValue: NodeLabel } }));
+};
+exports.default = Component;
+//# sourceMappingURL=combobox-custom-single.story.js.map

package/lib/cjs/combobox/stories/combobox-custom-single.story.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox-custom-single.story.js","sourceRoot":"","sources":["../../../../src/combobox/stories/combobox-custom-single.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,0CAAyC;AACzC,4CAAwD;AACxD,iCAAiC;AAUjC,MAAM,OAAO,GAAsB;IACjC,EAAE,KAAK,EAAE,aAAM,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE;IAC9D,EAAE,KAAK,EAAE,aAAM,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;IAC5D,EAAE,KAAK,EAAE,aAAM,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,UAAU,EAAE;IAClE,EAAE,KAAK,EAAE,aAAM,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;IAC5D,EAAE,KAAK,EAAE,aAAM,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;IAC5D,EAAE,KAAK,EAAE,aAAM,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE;CAChE,CAAC;AAEF,4EAA4E;AAC5E,yDAAyD;AACzD,MAAM,SAAS,GAAG,CAAC,EACjB,MAAM,EACN,UAAU,GAIX,EAAE,EAAE,CAAC,CACJ,uBAAC,kBAAU,IACT,EAAE,EAAC,MAAM,EACT,IAAI,EAAC,MAAM,EACX,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,UAAU,EAAE,UAAU,YAErB,MAAM,CAAC,KAAK,GACF,CACd,CAAC;AAEF,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,IAAA,gBAAQ,EAAyB,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC;IAEvE,OAAO,CACL,uBAAC,gBAAQ,IACP,KAAK,EAAC,YAAY,EAClB,WAAW,QACX,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,UAAU,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,WAAW,EAAE,SAAS,EAAE,GAC9D,CACH,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 { tokens } from '@neo4j-ndl/base';\nimport { Combobox, GraphLabel } from '@neo4j-ndl/react';\nimport { useState } from 'react';\n\n// The option type is free to carry fields of its own. Passing these options to\n// the combobox is what types `option` inside the overrides below.\ntype NodeLabelOption = {\n  label: string;\n  value: string;\n  color: string;\n};\n\nconst options: NodeLabelOption[] = [\n  { color: tokens.graph['1'], label: 'Person', value: 'person' },\n  { color: tokens.graph['2'], label: 'Movie', value: 'movie' },\n  { color: tokens.graph['3'], label: 'Director', value: 'director' },\n  { color: tokens.graph['4'], label: 'Actor', value: 'actor' },\n  { color: tokens.graph['7'], label: 'Genre', value: 'genre' },\n  { color: tokens.graph['12'], label: 'Studio', value: 'studio' },\n];\n\n// One presentation for the selected value and for the options, so both read\n// the same. `as=\"span\"` keeps the label non-interactive.\nconst NodeLabel = ({\n  option,\n  isDisabled,\n}: {\n  option: NodeLabelOption;\n  isDisabled: boolean;\n}) => (\n  <GraphLabel\n    as=\"span\"\n    type=\"node\"\n    size=\"small\"\n    color={option.color}\n    isDisabled={isDisabled}\n  >\n    {option.label}\n  </GraphLabel>\n);\n\nconst Component = () => {\n  const [value, setValue] = useState<NodeLabelOption | null>(options[0]);\n\n  return (\n    <Combobox\n      label=\"Node label\"\n      isClearable\n      options={options}\n      value={value}\n      onChange={setValue}\n      components={{ OptionLabel: NodeLabel, SingleValue: NodeLabel }}\n    />\n  );\n};\n\nexport default Component;\n"]}

package/lib/cjs/combobox/stories/combobox-custom-trigger.story.js

@@ -0,0 +1,60 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ *
+ *  Copyright (c) "Neo4j"
+ *  Neo4j Sweden AB [http://neo4j.com]
+ *
+ *  This file is part of Neo4j.
+ *
+ *  Neo4j is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+require("@neo4j-ndl/base/lib/neo4j-ds-styles.css");
+const react_1 = require("@neo4j-ndl/react");
+const icons_1 = require("@neo4j-ndl/react/icons");
+const Component = () => {
+    const options = [
+        { label: 'Neo4j', value: 'neo4j' },
+        { label: 'Aura', value: 'aura' },
+        { label: 'Bloom', value: 'bloom' },
+    ];
+    return ((0, jsx_runtime_1.jsx)(react_1.Combobox
+    // The custom trigger renders no label of its own, so the label reaches it
+    // as its accessible name only.
+    , { 
+        // The custom trigger renders no label of its own, so the label reaches it
+        // as its accessible name only.
+        label: "Product", options: options, searchPlaceholder: "Search products", 
+        // The panel anchors to whichever element the props land on, and that
+        // element becomes the combobox, so it has to be focusable.
+        renderTrigger: (_a, state) => {
+            var _b, _c;
+            var { ref } = _a, triggerProps = __rest(_a, ["ref"]);
+            return ((0, jsx_runtime_1.jsx)(react_1.OutlinedButton, { ref: ref, htmlAttributes: triggerProps, leadingVisual: (0, jsx_runtime_1.jsx)(icons_1.AdjustmentsHorizontalIconOutline, {}), children: (_c = (_b = state.selectedOptions[0]) === null || _b === void 0 ? void 0 : _b.label) !== null && _c !== void 0 ? _c : 'Pick a product' }));
+        } }));
+};
+exports.default = Component;
+//# sourceMappingURL=combobox-custom-trigger.story.js.map

package/lib/cjs/combobox/stories/combobox-custom-trigger.story.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox-custom-trigger.story.js","sourceRoot":"","sources":["../../../../src/combobox/stories/combobox-custom-trigger.story.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAA4D;AAC5D,kDAA0E;AAE1E,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,OAAO,GAAG;QACd,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;QAClC,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE;QAChC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;KACnC,CAAC;IAEF,OAAO,CACL,uBAAC,gBAAQ;IACP,0EAA0E;IAC1E,+BAA+B;;QAD/B,0EAA0E;QAC1E,+BAA+B;QAC/B,KAAK,EAAC,SAAS,EACf,OAAO,EAAE,OAAO,EAChB,iBAAiB,EAAC,iBAAiB;QACnC,qEAAqE;QACrE,2DAA2D;QAC3D,aAAa,EAAE,CAAC,EAAwB,EAAE,KAAK,EAAE,EAAE;;gBAAnC,EAAE,GAAG,OAAmB,EAAd,YAAY,cAAtB,OAAwB,CAAF;YAAc,OAAA,CAClD,uBAAC,sBAAc,IACb,GAAG,EAAE,GAAmC,EACxC,cAAc,EAAE,YAAY,EAC5B,aAAa,EAAE,uBAAC,wCAAgC,KAAG,YAElD,MAAA,MAAA,KAAK,CAAC,eAAe,CAAC,CAAC,CAAC,0CAAE,KAAK,mCAAI,gBAAgB,GACrC,CAClB,CAAA;SAAA,GACD,CACH,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 { Combobox, OutlinedButton } from '@neo4j-ndl/react';\nimport { AdjustmentsHorizontalIconOutline } from '@neo4j-ndl/react/icons';\n\nconst Component = () => {\n  const options = [\n    { label: 'Neo4j', value: 'neo4j' },\n    { label: 'Aura', value: 'aura' },\n    { label: 'Bloom', value: 'bloom' },\n  ];\n\n  return (\n    <Combobox\n      // The custom trigger renders no label of its own, so the label reaches it\n      // as its accessible name only.\n      label=\"Product\"\n      options={options}\n      searchPlaceholder=\"Search products\"\n      // The panel anchors to whichever element the props land on, and that\n      // element becomes the combobox, so it has to be focusable.\n      renderTrigger={({ ref, ...triggerProps }, state) => (\n        <OutlinedButton\n          ref={ref as React.Ref<HTMLButtonElement>}\n          htmlAttributes={triggerProps}\n          leadingVisual={<AdjustmentsHorizontalIconOutline />}\n        >\n          {state.selectedOptions[0]?.label ?? 'Pick a product'}\n        </OutlinedButton>\n      )}\n    />\n  );\n};\n\nexport default Component;\n"]}

package/lib/cjs/combobox/stories/combobox-default.story.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ *
+ *  Copyright (c) "Neo4j"
+ *  Neo4j Sweden AB [http://neo4j.com]
+ *
+ *  This file is part of Neo4j.
+ *
+ *  Neo4j is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+require("@neo4j-ndl/base/lib/neo4j-ds-styles.css");
+const react_1 = require("@neo4j-ndl/react");
+const Component = () => {
+    let options = [
+        {
+            label: 'Option 1 ',
+            value: 'option-1',
+        },
+        { label: 'Option 2', value: 'option-2' },
+        {
+            label: 'Option 3 has a really, really, really, really, long label',
+            value: 'option-3',
+        },
+        { isDisabled: true, label: 'Option 4', value: 'option-4' },
+    ];
+    return ((0, jsx_runtime_1.jsx)(react_1.Combobox, { label: "Products", options: options, defaultValue: options[0] }));
+};
+exports.default = Component;
+//# sourceMappingURL=combobox-default.story.js.map

package/lib/cjs/combobox/stories/combobox-default.story.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox-default.story.js","sourceRoot":"","sources":["../../../../src/combobox/stories/combobox-default.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAA4C;AAE5C,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,IAAI,OAAO,GAAG;QACZ;YACE,KAAK,EAAE,WAAW;YAClB,KAAK,EAAE,UAAU;SAClB;QACD,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,UAAU,EAAE;QACxC;YACE,KAAK,EAAE,2DAA2D;YAClE,KAAK,EAAE,UAAU;SAClB;QACD,EAAE,UAAU,EAAE,IAAI,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,UAAU,EAAE;KAC3D,CAAC;IAEF,OAAO,CACL,uBAAC,gBAAQ,IAAC,KAAK,EAAC,UAAU,EAAC,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,OAAO,CAAC,CAAC,CAAC,GAAI,CAC1E,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 { Combobox } from '@neo4j-ndl/react';\n\nconst Component = () => {\n  let options = [\n    {\n      label: 'Option 1 ',\n      value: 'option-1',\n    },\n    { label: 'Option 2', value: 'option-2' },\n    {\n      label: 'Option 3 has a really, really, really, really, long label',\n      value: 'option-3',\n    },\n    { isDisabled: true, label: 'Option 4', value: 'option-4' },\n  ];\n\n  return (\n    <Combobox label=\"Products\" options={options} defaultValue={options[0]} />\n  );\n};\n\nexport default Component;\n"]}

package/lib/cjs/combobox/stories/combobox-descriptions.story.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ *
+ *  Copyright (c) "Neo4j"
+ *  Neo4j Sweden AB [http://neo4j.com]
+ *
+ *  This file is part of Neo4j.
+ *
+ *  Neo4j is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+require("@neo4j-ndl/base/lib/neo4j-ds-styles.css");
+const react_1 = require("@neo4j-ndl/react");
+const options = [
+    {
+        description: 'A fully managed graph database service',
+        label: 'AuraDB',
+        value: 'auradb',
+    },
+    {
+        description: 'Graph analytics and data science tools',
+        label: 'Graph Data Science',
+        value: 'graph-data-science',
+    },
+    {
+        description: 'Explore and visualize connected data',
+        label: 'Neo4j Bloom',
+        value: 'neo4j-bloom',
+    },
+];
+const Component = () => ((0, jsx_runtime_1.jsx)(react_1.Combobox, { label: "Products", options: options, placeholder: "Select product" }));
+exports.default = Component;
+//# sourceMappingURL=combobox-descriptions.story.js.map

package/lib/cjs/combobox/stories/combobox-descriptions.story.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox-descriptions.story.js","sourceRoot":"","sources":["../../../../src/combobox/stories/combobox-descriptions.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAA4C;AAE5C,MAAM,OAAO,GAAG;IACd;QACE,WAAW,EAAE,wCAAwC;QACrD,KAAK,EAAE,QAAQ;QACf,KAAK,EAAE,QAAQ;KAChB;IACD;QACE,WAAW,EAAE,wCAAwC;QACrD,KAAK,EAAE,oBAAoB;QAC3B,KAAK,EAAE,oBAAoB;KAC5B;IACD;QACE,WAAW,EAAE,sCAAsC;QACnD,KAAK,EAAE,aAAa;QACpB,KAAK,EAAE,aAAa;KACrB;CACF,CAAC;AAEF,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,CACtB,uBAAC,gBAAQ,IAAC,KAAK,EAAC,UAAU,EAAC,OAAO,EAAE,OAAO,EAAE,WAAW,EAAC,gBAAgB,GAAG,CAC7E,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 { Combobox } from '@neo4j-ndl/react';\n\nconst options = [\n  {\n    description: 'A fully managed graph database service',\n    label: 'AuraDB',\n    value: 'auradb',\n  },\n  {\n    description: 'Graph analytics and data science tools',\n    label: 'Graph Data Science',\n    value: 'graph-data-science',\n  },\n  {\n    description: 'Explore and visualize connected data',\n    label: 'Neo4j Bloom',\n    value: 'neo4j-bloom',\n  },\n];\n\nconst Component = () => (\n  <Combobox label=\"Products\" options={options} placeholder=\"Select product\" />\n);\n\nexport default Component;\n"]}

package/lib/cjs/combobox/stories/combobox-disabled.story.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ *
+ *  Copyright (c) "Neo4j"
+ *  Neo4j Sweden AB [http://neo4j.com]
+ *
+ *  This file is part of Neo4j.
+ *
+ *  Neo4j is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+require("@neo4j-ndl/base/lib/neo4j-ds-styles.css");
+const react_1 = require("@neo4j-ndl/react");
+const options = [
+    { label: 'Neo4j', value: 'neo4j' },
+    { label: 'Aura', value: 'aura' },
+    { label: 'Bloom', value: 'bloom' },
+    { label: 'Data Importer', value: 'data-importer' },
+];
+const Component = () => ((0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-flex-col n-items-start n-gap-token-16", children: [(0, jsx_runtime_1.jsx)(react_1.Combobox, { label: "Disabled single select", defaultValue: options[0], isDisabled: true, options: options }), (0, jsx_runtime_1.jsx)(react_1.Combobox, { label: "Disabled multi select", defaultValue: options.slice(0, 3), isDisabled: true, isMulti: true, options: options })] }));
+exports.default = Component;
+//# sourceMappingURL=combobox-disabled.story.js.map