@neo4j-ndl/react 4.14.6 → 4.15.1

package/lib/cjs/data-grid/stories/datagrid-using-editable-cells.story.js

@@ -22,93 +22,186 @@ const jsx_runtime_1 = require("react/jsx-runtime");
  *  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 icons_1 = require("@neo4j-ndl/react/icons");
 const react_table_1 = require("@tanstack/react-table");
 const react_2 = require("react");
-const staticData_1 = require("./staticData");
+const ROLE_OPTIONS = [
+    { label: 'Admin', value: 'admin' },
+    { label: 'Editor', value: 'editor' },
+    { label: 'Viewer', value: 'viewer' },
+];
+const PERMISSION_OPTIONS = [
+    { label: 'Read', value: 'read' },
+    { label: 'Write', value: 'write' },
+    { label: 'Delete', value: 'delete' },
+];
+const LABEL_OPTIONS = [
+    { label: 'Person', value: 'person' },
+    { label: 'Movie', value: 'movie' },
+    { label: 'Director', value: 'director' },
+    { label: 'Actor', value: 'actor' },
+];
+const STATUS_OPTIONS = [
+    { label: 'Active', value: 'active' },
+    { label: 'Inactive', value: 'inactive' },
+    { label: 'Pending', value: 'pending' },
+];
+const VALID_STATUSES = STATUS_OPTIONS.map((option) => option.value);
+const LABEL_COLORS = {
+    actor: base_1.tokens.graph['7'],
+    director: base_1.tokens.graph['4'],
+    movie: base_1.tokens.graph['3'],
+    person: base_1.tokens.graph['1'],
+};
+// Render each selected value as a non-interactive GraphLabel (as a span)
+// instead of the default Tag chip, demonstrating the components override.
+const LabelMultiValue = (props) => ((0, jsx_runtime_1.jsx)(react_1.GraphLabel, { as: "span", type: "node", size: "small", color: LABEL_COLORS[props.data.value], children: props.data.label }));
+// The "Dallas Kuhn" row has a status that is not part of the available
+// options, so its dropdown cell renders in the error state.
+const DEMO_DATA = [
+    {
+        labels: ['person', 'actor'],
+        name: 'Alicia Sanford',
+        permissions: ['read', 'write'],
+        role: 'admin',
+        status: 'active',
+    },
+    {
+        labels: ['movie'],
+        name: 'Dallas Kuhn',
+        permissions: ['read'],
+        role: 'editor',
+        status: 'unknown',
+    },
+    {
+        labels: ['director'],
+        name: 'Susan Daugherty MD',
+        permissions: ['read', 'write', 'delete'],
+        role: 'viewer',
+        status: 'pending',
+    },
+    {
+        labels: ['person'],
+        name: 'Karen Huel',
+        permissions: ['read'],
+        role: 'editor',
+        status: 'inactive',
+    },
+    {
+        labels: ['movie', 'director'],
+        name: 'Ken Kessler',
+        permissions: ['write', 'delete'],
+        role: 'admin',
+        status: 'active',
+    },
+    {
+        labels: [],
+        name: 'Courtney McClure',
+        permissions: [],
+        role: 'viewer',
+        status: 'pending',
+    },
+];
 const columnHelper = (0, react_table_1.createColumnHelper)();
 const Component = () => {
-    const [data, setData] = (0, react_2.useState)(staticData_1.TABLE_DEMO_DATA);
+    const [data, setData] = (0, react_2.useState)(DEMO_DATA);
+    const updateRow = (name, update) => {
+        setData((oldData) => oldData.map((row) => (row.name === name ? Object.assign(Object.assign({}, row), update) : row)));
+    };
     const COMMON_COLUMNS = [
+        // Editable inline text cell.
         columnHelper.accessor('name', {
             cell: (cell) => ((0, jsx_runtime_1.jsx)(react_1.DataGrid.InlineEditCell, { cell: cell, value: cell.getValue(), ariaLabel: "edit name" })),
             meta: {
                 isInlineEditCell: {
                     onEditChange: (newValue, cell) => {
-                        setData((oldData) => {
-                            return oldData.map((row) => {
-                                if (row.name === cell.row.original.name) {
-                                    return Object.assign(Object.assign({}, row), { name: newValue });
-                                }
-                                return row;
-                            });
-                        });
+                        updateRow(cell.row.original.name, { name: newValue });
                     },
                 },
             },
             minSize: 180,
             size: 220,
         }),
-        columnHelper.accessor('age', {
-            cell: (info) => ((0, jsx_runtime_1.jsx)(react_1.DataGrid.DropDownCell, { cell: info, options: [
-                    {
-                        label: '12',
-                        value: '12',
-                    },
-                    {
-                        label: '32',
-                        value: '32',
-                    },
-                    {
-                        label: '37',
-                        value: '37',
+        // Default single-select dropdown.
+        columnHelper.accessor('role', {
+            cell: (info) => ((0, jsx_runtime_1.jsx)(react_1.DataGrid.DropDownCell, { cell: info, options: ROLE_OPTIONS, ariaLabel: "select role" })),
+            meta: {
+                isDropDownCell: {
+                    onChange: (newValue, cell) => {
+                        if (newValue === undefined) {
+                            return;
+                        }
+                        updateRow(cell.row.original.name, { role: newValue });
                     },
-                    {
-                        label: '39',
-                        value: '39',
+                },
+            },
+            minSize: 160,
+            size: 180,
+        }),
+        // Default multi-select dropdown (default Tag chips).
+        columnHelper.accessor('permissions', {
+            cell: (info) => ((0, jsx_runtime_1.jsx)(react_1.DataGrid.DropDownCell, { cell: info, options: PERMISSION_OPTIONS, ariaLabel: "select permissions" })),
+            enableSorting: false,
+            meta: {
+                isDropDownCell: {
+                    isMulti: true,
+                    onChange: (newValue, cell) => {
+                        updateRow(cell.row.original.name, { permissions: newValue });
                     },
-                    {
-                        label: '51',
-                        value: '51',
+                },
+            },
+            minSize: 220,
+            size: 260,
+        }),
+        // Multi-select dropdown with a custom MultiValue (GraphLabel chips).
+        columnHelper.accessor('labels', {
+            cell: (info) => ((0, jsx_runtime_1.jsx)(react_1.DataGrid.DropDownCell, { cell: info, options: LABEL_OPTIONS, ariaLabel: "select labels", components: { MultiValue: LabelMultiValue } })),
+            enableSorting: false,
+            meta: {
+                isDropDownCell: {
+                    isMulti: true,
+                    onChange: (newValue, cell) => {
+                        updateRow(cell.row.original.name, { labels: newValue });
                     },
-                ], ariaLabel: "select age" })),
+                },
+            },
+            minSize: 240,
+            size: 280,
+        }),
+        // Single-select dropdown in an error state.
+        columnHelper.accessor('status', {
+            cell: (info) => {
+                const isInvalid = !VALID_STATUSES.includes(info.getValue());
+                const isPending = info.getValue() === 'pending';
+                const isInactive = info.getValue() === 'inactive';
+                const warningHelpText = ((0, jsx_runtime_1.jsxs)("span", { className: "n-flex n-items-center n-gap-token-2 n-text-warning-text", children: [(0, jsx_runtime_1.jsx)(icons_1.ExclamationTriangleIconSolid, { className: "n-size-token-16 n-text-warning-icon" }), "Inactive users cannot sign in"] }));
+                return ((0, jsx_runtime_1.jsx)(react_1.DataGrid.DropDownCell, { cell: info, options: STATUS_OPTIONS, ariaLabel: "select status", errorText: isInvalid ? 'Please select a valid status' : undefined, helpText: isInactive
+                        ? warningHelpText
+                        : isPending
+                            ? 'Waiting for admin approval'
+                            : undefined }));
+            },
             meta: {
                 isDropDownCell: {
                     onChange: (newValue, cell) => {
                         if (newValue === undefined) {
-                            // No change
                             return;
                         }
-                        const parsedValue = parseInt(newValue, 10);
-                        if (isNaN(parsedValue)) {
-                            return;
-                        }
-                        setData((oldData) => {
-                            return oldData.map((row) => {
-                                if (row.name === cell.row.original.name) {
-                                    return Object.assign(Object.assign({}, row), { age: parsedValue });
-                                }
-                                return row;
-                            });
-                        });
+                        updateRow(cell.row.original.name, { status: newValue });
                     },
                 },
             },
-            minSize: 80,
-        }),
-        columnHelper.accessor('cypherCommand', {
-            cell: (info) => info.getValue(),
-            minSize: 400,
-            size: 400,
+            minSize: 200,
+            size: 240,
         }),
     ];
     const table = (0, react_table_1.useReactTable)({
+        autoResetPageIndex: false,
         columnResizeMode: 'onChange',
         columns: COMMON_COLUMNS,
         data: data,
-        debugColumns: true,
-        debugHeaders: true,
-        debugTable: true,
         defaultColumn: {
             maxSize: 800,
             minSize: 80,

package/lib/cjs/data-grid/stories/datagrid-using-editable-cells.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"datagrid-using-editable-cells.story.js","sourceRoot":"","sources":["../../../../src/data-grid/stories/datagrid-using-editable-cells.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 { DataGrid } from '@neo4j-ndl/react';\nimport {\n  createColumnHelper,\n  getCoreRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useReactTable,\n} from '@tanstack/react-table';\nimport { useState } from 'react';\n\nimport { TABLE_DEMO_DATA } from './staticData';\n\ntype TestDataFormat = {\n  name: string;\n  age: number;\n  cypherCommand: string;\n};\n\nconst columnHelper = createColumnHelper<TestDataFormat>();\n\nconst Component = () => {\n  const [data, setData] = useState(TABLE_DEMO_DATA);\n\n  const COMMON_COLUMNS = [\n    columnHelper.accessor('name', {\n      cell: (cell) => (\n        <DataGrid.InlineEditCell\n          cell={cell}\n          value={cell.getValue()}\n          ariaLabel=\"edit name\"\n        />\n      ),\n      meta: {\n        isInlineEditCell: {\n          onEditChange: (newValue, cell) => {\n            setData((oldData) => {\n              return oldData.map((row) => {\n                if (row.name === cell.row.original.name) {\n                  return {\n                    ...row,\n                    name: newValue,\n                  };\n                }\n                return row;\n              });\n            });\n          },\n        },\n      },\n      minSize: 180,\n      size: 220,\n    }),\n    columnHelper.accessor('age', {\n      cell: (info) => (\n        <DataGrid.DropDownCell\n          cell={info}\n          options={[\n            {\n              label: '12',\n              value: '12',\n            },\n            {\n              label: '32',\n              value: '32',\n            },\n            {\n              label: '37',\n              value: '37',\n            },\n            {\n              label: '39',\n              value: '39',\n            },\n            {\n              label: '51',\n              value: '51',\n            },\n          ]}\n          ariaLabel=\"select age\"\n        />\n      ),\n      meta: {\n        isDropDownCell: {\n          onChange: (newValue, cell) => {\n            if (newValue === undefined) {\n              // No change\n              return;\n            }\n\n            const parsedValue = parseInt(newValue, 10);\n\n            if (isNaN(parsedValue)) {\n              return;\n            }\n\n            setData((oldData) => {\n              return oldData.map((row) => {\n                if (row.name === cell.row.original.name) {\n                  return {\n                    ...row,\n                    age: parsedValue,\n                  };\n                }\n                return row;\n              });\n            });\n          },\n        },\n      },\n      minSize: 80,\n    }),\n    columnHelper.accessor('cypherCommand', {\n      cell: (info) => info.getValue(),\n      minSize: 400,\n      size: 400,\n    }),\n  ];\n  const table = useReactTable({\n    columnResizeMode: 'onChange',\n    columns: COMMON_COLUMNS,\n    data: data,\n    debugColumns: true,\n    debugHeaders: true,\n    debugTable: true,\n    defaultColumn: {\n      maxSize: 800,\n      minSize: 80,\n    },\n    enableSorting: true,\n    getCoreRowModel: getCoreRowModel(),\n    getPaginationRowModel: getPaginationRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    initialState: {\n      pagination: {\n        pageSize: 5,\n      },\n    },\n  });\n\n  return (\n    <div className=\"n-w-full n-bg-light-neutral-text-weakest\">\n      <DataGrid\n        isKeyboardNavigable={true}\n        isResizable={true}\n        styling={{\n          borderStyle: 'all-sides',\n          hasZebraStriping: false,\n        }}\n        tableInstance={table}\n      />\n    </div>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"datagrid-using-editable-cells.story.js","sourceRoot":"","sources":["../../../../src/data-grid/stories/datagrid-using-editable-cells.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 { tokens } from '@neo4j-ndl/base';\nimport { DataGrid, GraphLabel } from '@neo4j-ndl/react';\nimport { ExclamationTriangleIconSolid } from '@neo4j-ndl/react/icons';\nimport {\n  createColumnHelper,\n  getCoreRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useReactTable,\n} from '@tanstack/react-table';\nimport { useState } from 'react';\nimport { type MultiValueProps } from 'react-select';\n\ntype TestDataFormat = {\n  name: string;\n  role: string;\n  permissions: string[];\n  labels: string[];\n  status: string;\n};\n\nconst ROLE_OPTIONS = [\n  { label: 'Admin', value: 'admin' },\n  { label: 'Editor', value: 'editor' },\n  { label: 'Viewer', value: 'viewer' },\n];\n\nconst PERMISSION_OPTIONS = [\n  { label: 'Read', value: 'read' },\n  { label: 'Write', value: 'write' },\n  { label: 'Delete', value: 'delete' },\n];\n\nconst LABEL_OPTIONS = [\n  { label: 'Person', value: 'person' },\n  { label: 'Movie', value: 'movie' },\n  { label: 'Director', value: 'director' },\n  { label: 'Actor', value: 'actor' },\n];\n\nconst STATUS_OPTIONS = [\n  { label: 'Active', value: 'active' },\n  { label: 'Inactive', value: 'inactive' },\n  { label: 'Pending', value: 'pending' },\n];\n\nconst VALID_STATUSES = STATUS_OPTIONS.map((option) => option.value);\n\ntype DropDownOption = { value: string; label: string };\n\nconst LABEL_COLORS: Record<string, string> = {\n  actor: tokens.graph['7'],\n  director: tokens.graph['4'],\n  movie: tokens.graph['3'],\n  person: tokens.graph['1'],\n};\n\n// Render each selected value as a non-interactive GraphLabel (as a span)\n// instead of the default Tag chip, demonstrating the components override.\nconst LabelMultiValue = (props: MultiValueProps<DropDownOption, boolean>) => (\n  <GraphLabel\n    as=\"span\"\n    type=\"node\"\n    size=\"small\"\n    color={LABEL_COLORS[props.data.value]}\n  >\n    {props.data.label}\n  </GraphLabel>\n);\n\n// The \"Dallas Kuhn\" row has a status that is not part of the available\n// options, so its dropdown cell renders in the error state.\nconst DEMO_DATA: TestDataFormat[] = [\n  {\n    labels: ['person', 'actor'],\n    name: 'Alicia Sanford',\n    permissions: ['read', 'write'],\n    role: 'admin',\n    status: 'active',\n  },\n  {\n    labels: ['movie'],\n    name: 'Dallas Kuhn',\n    permissions: ['read'],\n    role: 'editor',\n    status: 'unknown',\n  },\n  {\n    labels: ['director'],\n    name: 'Susan Daugherty MD',\n    permissions: ['read', 'write', 'delete'],\n    role: 'viewer',\n    status: 'pending',\n  },\n  {\n    labels: ['person'],\n    name: 'Karen Huel',\n    permissions: ['read'],\n    role: 'editor',\n    status: 'inactive',\n  },\n  {\n    labels: ['movie', 'director'],\n    name: 'Ken Kessler',\n    permissions: ['write', 'delete'],\n    role: 'admin',\n    status: 'active',\n  },\n  {\n    labels: [],\n    name: 'Courtney McClure',\n    permissions: [],\n    role: 'viewer',\n    status: 'pending',\n  },\n];\n\nconst columnHelper = createColumnHelper<TestDataFormat>();\n\nconst Component = () => {\n  const [data, setData] = useState(DEMO_DATA);\n\n  const updateRow = (name: string, update: Partial<TestDataFormat>): void => {\n    setData((oldData) =>\n      oldData.map((row) => (row.name === name ? { ...row, ...update } : row)),\n    );\n  };\n\n  const COMMON_COLUMNS = [\n    // Editable inline text cell.\n    columnHelper.accessor('name', {\n      cell: (cell) => (\n        <DataGrid.InlineEditCell\n          cell={cell}\n          value={cell.getValue()}\n          ariaLabel=\"edit name\"\n        />\n      ),\n      meta: {\n        isInlineEditCell: {\n          onEditChange: (newValue, cell) => {\n            updateRow(cell.row.original.name, { name: newValue });\n          },\n        },\n      },\n      minSize: 180,\n      size: 220,\n    }),\n    // Default single-select dropdown.\n    columnHelper.accessor('role', {\n      cell: (info) => (\n        <DataGrid.DropDownCell\n          cell={info}\n          options={ROLE_OPTIONS}\n          ariaLabel=\"select role\"\n        />\n      ),\n      meta: {\n        isDropDownCell: {\n          onChange: (newValue, cell) => {\n            if (newValue === undefined) {\n              return;\n            }\n            updateRow(cell.row.original.name, { role: newValue });\n          },\n        },\n      },\n      minSize: 160,\n      size: 180,\n    }),\n    // Default multi-select dropdown (default Tag chips).\n    columnHelper.accessor('permissions', {\n      cell: (info) => (\n        <DataGrid.DropDownCell\n          cell={info}\n          options={PERMISSION_OPTIONS}\n          ariaLabel=\"select permissions\"\n        />\n      ),\n      enableSorting: false,\n      meta: {\n        isDropDownCell: {\n          isMulti: true,\n          onChange: (newValue, cell) => {\n            updateRow(cell.row.original.name, { permissions: newValue });\n          },\n        },\n      },\n      minSize: 220,\n      size: 260,\n    }),\n    // Multi-select dropdown with a custom MultiValue (GraphLabel chips).\n    columnHelper.accessor('labels', {\n      cell: (info) => (\n        <DataGrid.DropDownCell\n          cell={info}\n          options={LABEL_OPTIONS}\n          ariaLabel=\"select labels\"\n          components={{ MultiValue: LabelMultiValue }}\n        />\n      ),\n      enableSorting: false,\n      meta: {\n        isDropDownCell: {\n          isMulti: true,\n          onChange: (newValue, cell) => {\n            updateRow(cell.row.original.name, { labels: newValue });\n          },\n        },\n      },\n      minSize: 240,\n      size: 280,\n    }),\n    // Single-select dropdown in an error state.\n    columnHelper.accessor('status', {\n      cell: (info) => {\n        const isInvalid = !VALID_STATUSES.includes(info.getValue());\n\n        const isPending = info.getValue() === 'pending';\n        const isInactive = info.getValue() === 'inactive';\n\n        const warningHelpText = (\n          <span className=\"n-flex n-items-center n-gap-token-2 n-text-warning-text\">\n            <ExclamationTriangleIconSolid className=\"n-size-token-16 n-text-warning-icon\" />\n            Inactive users cannot sign in\n          </span>\n        );\n\n        return (\n          <DataGrid.DropDownCell\n            cell={info}\n            options={STATUS_OPTIONS}\n            ariaLabel=\"select status\"\n            errorText={isInvalid ? 'Please select a valid status' : undefined}\n            helpText={\n              isInactive\n                ? warningHelpText\n                : isPending\n                  ? 'Waiting for admin approval'\n                  : undefined\n            }\n          />\n        );\n      },\n      meta: {\n        isDropDownCell: {\n          onChange: (newValue, cell) => {\n            if (newValue === undefined) {\n              return;\n            }\n            updateRow(cell.row.original.name, { status: newValue });\n          },\n        },\n      },\n      minSize: 200,\n      size: 240,\n    }),\n  ];\n  const table = useReactTable({\n    autoResetPageIndex: false,\n    columnResizeMode: 'onChange',\n    columns: COMMON_COLUMNS,\n    data: data,\n    defaultColumn: {\n      maxSize: 800,\n      minSize: 80,\n    },\n    enableSorting: true,\n    getCoreRowModel: getCoreRowModel(),\n    getPaginationRowModel: getPaginationRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    initialState: {\n      pagination: {\n        pageSize: 5,\n      },\n    },\n  });\n\n  return (\n    <div className=\"n-w-full n-bg-light-neutral-text-weakest\">\n      <DataGrid\n        isKeyboardNavigable={true}\n        isResizable={true}\n        styling={{\n          borderStyle: 'all-sides',\n          hasZebraStriping: false,\n        }}\n        tableInstance={table}\n      />\n    </div>\n  );\n};\n\nexport default Component;\n"]}

package/lib/esm/data-grid/Components.js

@@ -424,24 +424,39 @@ const InlineEditCell = (_a) => {
         }, "aria-label": ariaLabel }, restProps, htmlAttributes)));
 };
 const DropDownCell = (_a) => {
-    var _b;
-    var { cell, options, portalTarget: portalTargetProp, ariaLabel, className, style, htmlAttributes, ref: forwardRef, isDisabled } = _a, restProps = __rest(_a, ["cell", "options", "portalTarget", "ariaLabel", "className", "style", "htmlAttributes", "ref", "isDisabled"]);
+    var _b, _c;
+    var { cell, options, portalTarget: portalTargetProp, ariaLabel, className, style, htmlAttributes, ref: forwardRef, isDisabled, errorText, helpText, components } = _a, restProps = __rest(_a, ["cell", "options", "portalTarget", "ariaLabel", "className", "style", "htmlAttributes", "ref", "isDisabled", "errorText", "helpText", "components"]);
     const { dataGridNav, portalTarget } = useDataGridContext();
     const ref = useRef(null);
     const mergedRef = useMergeRefs([ref, forwardRef]);
-    if (!((_b = cell.column.columnDef.meta) === null || _b === void 0 ? void 0 : _b.isDropDownCell)) {
+    const dropDownMeta = (_b = cell.column.columnDef.meta) === null || _b === void 0 ? void 0 : _b.isDropDownCell;
+    if (!dropDownMeta) {
         return null;
     }
-    const defaultOption = options.find((option) => { var _a; return option.value === ((_a = cell.getValue()) === null || _a === void 0 ? void 0 : _a.toString()); });
+    const isMulti = (_c = dropDownMeta.isMulti) !== null && _c !== void 0 ? _c : false;
+    const cellValue = cell.getValue();
+    const selectedValues = (Array.isArray(cellValue) ? cellValue : [cellValue]).map((value) => value === null || value === void 0 ? void 0 : value.toString());
+    const defaultValue = isMulti
+        ? options.filter((option) => selectedValues.includes(option.value))
+        : options.find((option) => option.value === (cellValue === null || cellValue === void 0 ? void 0 : cellValue.toString()));
     const menuPortalTarget = portalTargetProp === undefined ? portalTarget : portalTargetProp;
-    return (_jsx(Select, Object.assign({ ref: mergedRef, className: className, isFluid: true, isClean: true, style: Object.assign(Object.assign({}, style), { height: '100%', width: '100%' }), type: "select", size: "medium", ariaLabel: ariaLabel, isDisabled: isDisabled, selectProps: {
-            defaultValue: defaultOption,
+    return (_jsx(Select, Object.assign({ ref: mergedRef, className: className, isFluid: true, isClean: true, style: Object.assign(Object.assign({}, style), { height: '100%', width: '100%' }), type: "select", size: "medium", ariaLabel: ariaLabel, isDisabled: isDisabled, errorText: errorText, helpText: helpText, selectProps: {
+            components: components,
+            defaultValue,
+            isMulti,
             menuPortalTarget: menuPortalTarget,
             menuPosition: 'fixed',
-            onChange: (e) => {
-                var _a, _b;
-                const value = e === null || e === void 0 ? void 0 : e.value;
-                (_b = (_a = cell === null || cell === void 0 ? void 0 : cell.column.columnDef.meta) === null || _a === void 0 ? void 0 : _a.isDropDownCell) === null || _b === void 0 ? void 0 : _b.onChange(value === null || value === void 0 ? void 0 : value.toString(), cell);
+            onChange: (selected) => {
+                const selectedOptions = Array.isArray(selected)
+                    ? selected
+                    : selected
+                        ? [selected]
+                        : [];
+                const values = selectedOptions.map((option) => option.value);
+                // `TValue` is not known inside the component; cast once at this boundary
+                // to invoke onChange with the resolved single/multi value.
+                const handleChange = dropDownMeta.onChange;
+                handleChange(isMulti ? values : values[0], cell);
                 dataGridNav.enable();
                 if (ref === null || ref === void 0 ? void 0 : ref.current) {
                     dataGridNav.focusParentCell(ref.current);