@glideappsfinal/glide-data-grid-cells 6.0.9

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 typeguard, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,64 @@
+<h1 align="center">
+  <img src="https://raw.githubusercontent.com/glideapps/glide-data-grid/master/icon.png" width="224px"/><br/>
+  <b>Glide Data Grid Cells</b>
+</h1>
+<p align="center">Additional cells and features for Glide Data Grid</p>
+
+[![Version](https://img.shields.io/npm/v/@glideapps/glide-data-grid-cells?color=blue&label=latest&style=for-the-badge)](https://github.com/glideapps/glide-data-grid/releases)
+[![React 16+](https://img.shields.io/badge/React-16+-00ADD8?style=for-the-badge&logo=react)](https://reactjs.org)
+[![npm bundle size](https://img.shields.io/bundlephobia/minzip/@glideapps/glide-data-grid-cells?color=success&label=bundle&style=for-the-badge)](https://bundlephobia.com/package/@glideapps/glide-data-grid-cells)
+[![License](https://img.shields.io/github/license/glideapps/glide-data-grid?color=red&style=for-the-badge)](https://github.com/glideapps/glide-data-grid/blob/main/LICENSE)
+[![Made By Glide](https://img.shields.io/badge/❤_Made_by-Glide-11CCE5?style=for-the-badge&logo=none)](https://www.glideapps.com/jobs)
+
+![Data Grid](https://raw.githubusercontent.com/glideapps/glide-data-grid/master/data-grid.jpg)
+
+Current cells
+
+-   Star (Rating) Cell
+-   Sparklines
+-   Article
+-   Dropdown
+-   Range
+-   User profile
+-   Tags
+
+# Usage
+
+Step 1: Import the cell renderers you want to use and pass them to the grid.
+
+```tsx
+import { allCells } from "@glideapps/glide-data-grid-cells";
+
+const Grid = () => {
+    return <DataEditor customRenderers={allCells} {...rest} />;
+};
+```
+
+Step 2: Use the cells in your `getCellContent` callback
+
+```ts
+import type { StarCell } from "@glideapps/glide-data-grid-cells";
+
+const getCellContent = React.useCallback(() => {
+    const starCell: StarCell = {
+        kind: GridCellKind.Custom,
+        allowOverlay: true,
+        copyData: "4 out of 5",
+        data: {
+            kind: "star-cell",
+            label: "Test",
+            rating: 4,
+        },
+    };
+
+    return starCell;
+}, []);
+```
+
+## Note on ArticleCell
+
+The ArticleCell uses `@toast-ui/editor` to provide its editor. To make sure it works correctly your project will need to import the css file it depends on.
+
+```
+import "@toast-ui/editor/dist/toastui-editor.css";
+```

package/dist/cjs/cells/article-cell-editor.css

@@ -0,0 +1 @@
+.gdg-w1hnqk7o .gdg-footer{display:flex;justify-content:flex-end;padding:20px;}.gdg-w1hnqk7o .gdg-footer button{border:none;padding:8px 16px;font-size:14px;font-weight:500;font-family:var(--gdg-font-family);cursor:pointer;border-radius:var(--gdg-rounding-radius, 9px);}.gdg-w1hnqk7o .gdg-save-button{background-color:var(--gdg-accent-color);color:var(--gdg-accent-fg);}.gdg-w1hnqk7o .gdg-close-button{background-color:var(--gdg-bg-header);color:var(--gdg-text-medium);margin-right:8px;}

package/dist/cjs/cells/article-cell-editor.js

@@ -0,0 +1,62 @@
+import * as React from "react";
+import { Editor, Viewer } from "@toast-ui/react-editor";
+import { styled } from "@linaria/react";
+const Wrapper = /*#__PURE__*/styled('div')({
+  name: "Wrapper",
+  class: "gdg-w1hnqk7o",
+  propsAsIs: false
+});
+const ArticleCellEditor = p => {
+  const [tempValue, setTempValue] = React.useState(p.value.data.markdown);
+  const onKeyDown = React.useCallback(e => {
+    e.stopPropagation();
+  }, []);
+  const onSave = React.useCallback(() => {
+    p.onFinishedEditing({
+      ...p.value,
+      data: {
+        ...p.value.data,
+        markdown: tempValue
+      }
+    });
+  }, [p, tempValue]);
+  const onClose = React.useCallback(() => {
+    p.onFinishedEditing(undefined);
+  }, [p]);
+  if (p.value.readonly) {
+    return React.createElement(Wrapper, {
+      id: "gdg-markdown-readonly",
+      onKeyDown: onKeyDown,
+      style: {
+        height: "75vh",
+        padding: "35px"
+      }
+    }, React.createElement(Viewer, {
+      initialValue: p.value.data.markdown,
+      usageStatistics: false
+    }));
+  }
+  return React.createElement(Wrapper, {
+    id: "gdg-markdown-wysiwyg",
+    onKeyDown: onKeyDown
+  }, React.createElement(Editor, {
+    initialEditType: "wysiwyg",
+    autofocus: true,
+    initialValue: p.value.data.markdown,
+    hideModeSwitch: true,
+    onChange: setTempValue,
+    height: "75vh",
+    usageStatistics: false,
+    toolbarItems: [["heading", "bold", "italic", "strike"], ["hr", "quote"], ["ul", "ol", "task", "indent", "outdent"], ["table", "link"], ["code", "codeblock"]]
+  }), React.createElement("div", {
+    className: "gdg-footer"
+  }, React.createElement("button", {
+    className: "gdg-close-button",
+    onClick: onClose
+  }, "Close"), React.createElement("button", {
+    className: "gdg-save-button",
+    onClick: onSave
+  }, "Save")));
+};
+export default ArticleCellEditor;
+

package/dist/cjs/cells/article-cell-editor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"article-cell-editor.js","sourceRoot":"","sources":["../../../src/cells/article-cell-editor.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAGxC,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;CA0BzB,CAAC;AAEF,MAAM,iBAAiB,GAAwC,CAAC,CAAC,EAAE;IAC/D,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IAExE,MAAM,SAAS,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,CAAsB,EAAE,EAAE;QAC3D,CAAC,CAAC,eAAe,EAAE,CAAC;IACxB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,MAAM,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QAClC,CAAC,CAAC,iBAAiB,CAAC;YAChB,GAAG,CAAC,CAAC,KAAK;YACV,IAAI,EAAE;gBACF,GAAG,CAAC,CAAC,KAAK,CAAC,IAAI;gBACf,QAAQ,EAAE,SAAS;aACtB;SACJ,CAAC,CAAC;IACP,CAAC,EAAE,CAAC,CAAC,EAAE,SAAS,CAAC,CAAC,CAAC;IAEnB,MAAM,OAAO,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACnC,CAAC,CAAC,iBAAiB,CAAC,SAAS,CAAC,CAAC;IACnC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;IAER,IAAI,CAAC,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC;QACnB,OAAO,CACH,oBAAC,OAAO,IAAC,EAAE,EAAC,uBAAuB,EAAC,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE;YAChG,oBAAC,MAAM,IAAC,YAAY,EAAE,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,QAAQ,EAAE,eAAe,EAAE,KAAK,GAAI,CACjE,CACb,CAAC;IACN,CAAC;IAED,OAAO,CACH,oBAAC,OAAO,IAAC,EAAE,EAAC,sBAAsB,EAAC,SAAS,EAAE,SAAS;QACnD,oBAAC,MAAM,IACH,eAAe,EAAC,SAAS,EACzB,SAAS,EAAE,IAAI,EACf,YAAY,EAAE,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,QAAQ,EACnC,cAAc,EAAE,IAAI,EACpB,QAAQ,EAAE,YAAY,EACtB,MAAM,EAAC,MAAM,EACb,eAAe,EAAE,KAAK,EACtB,YAAY,EAAE;gBACV,CAAC,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,CAAC;gBACvC,CAAC,IAAI,EAAE,OAAO,CAAC;gBACf,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,SAAS,CAAC;gBACzC,CAAC,OAAO,EAAE,MAAM,CAAC;gBACjB,CAAC,MAAM,EAAE,WAAW,CAAC;aACxB,GACH;QACF,6BAAK,SAAS,EAAC,YAAY;YACvB,gCAAQ,SAAS,EAAC,kBAAkB,EAAC,OAAO,EAAE,OAAO,YAE5C;YACT,gCAAQ,SAAS,EAAC,iBAAiB,EAAC,OAAO,EAAE,MAAM,WAE1C,CACP,CACA,CACb,CAAC;AACN,CAAC,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/cjs/cells/article-cell-types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=article-cell-types.js.map

package/dist/cjs/cells/article-cell-types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"article-cell-types.js","sourceRoot":"","sources":["../../../src/cells/article-cell-types.ts"],"names":[],"mappings":""}

package/dist/cjs/cells/article-cell.js

@@ -0,0 +1,46 @@
+import * as React from "react";
+import { getMiddleCenterBias, GridCellKind } from "@glideapps/glide-data-grid";
+const ArticleCellEditor = React.lazy(async () => await import("./article-cell-editor.js"));
+const renderer = {
+    kind: GridCellKind.Custom,
+    isMatch: (c) => c.data.kind === "article-cell",
+    draw: (args, cell) => {
+        const { ctx, theme, rect } = args;
+        const { markdown } = cell.data;
+        let data = markdown;
+        if (data.includes("\n")) {
+            // new lines are rare and split is relatively expensive compared to the search
+            // it pays off to not do the split contantly.
+            data = data.split(/\r?\n/)[0];
+        }
+        const max = rect.width / 4; // no need to round, slice will just truncate this
+        if (data.length > max) {
+            data = data.slice(0, max);
+        }
+        ctx.fillStyle = theme.textDark;
+        ctx.fillText(data, rect.x + theme.cellHorizontalPadding, rect.y + rect.height / 2 + getMiddleCenterBias(ctx, theme));
+        return true;
+    },
+    provideEditor: () => ({
+        editor: p => {
+            return (React.createElement(React.Suspense, { fallback: null },
+                React.createElement(ArticleCellEditor, { ...p })));
+        },
+        styleOverride: {
+            position: "fixed",
+            left: "12.5vw",
+            top: "12.5vh",
+            width: "75vw",
+            borderRadius: "9px",
+            maxWidth: "unset",
+            maxHeight: "unset",
+        },
+        disablePadding: true,
+    }),
+    onPaste: (val, d) => ({
+        ...d,
+        markdown: val,
+    }),
+};
+export default renderer;
+//# sourceMappingURL=article-cell.js.map

package/dist/cjs/cells/article-cell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"article-cell.js","sourceRoot":"","sources":["../../../src/cells/article-cell.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAuB,mBAAmB,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAEpG,MAAM,iBAAiB,GAAG,KAAK,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC,MAAM,MAAM,CAAC,0BAA0B,CAAC,CAAC,CAAC;AAE3F,MAAM,QAAQ,GAAgC;IAC1C,IAAI,EAAE,YAAY,CAAC,MAAM;IACzB,OAAO,EAAE,CAAC,CAAC,EAAoB,EAAE,CAAE,CAAC,CAAC,IAAY,CAAC,IAAI,KAAK,cAAc;IACzE,IAAI,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,EAAE;QACjB,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC;QAClC,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC,IAAI,CAAC;QAE/B,IAAI,IAAI,GAAG,QAAQ,CAAC;QACpB,IAAI,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC;YACtB,8EAA8E;YAC9E,6CAA6C;YAC7C,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC;QAClC,CAAC;QACD,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,kDAAkD;QAC9E,IAAI,IAAI,CAAC,MAAM,GAAG,GAAG,EAAE,CAAC;YACpB,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;QAC9B,CAAC;QAED,GAAG,CAAC,SAAS,GAAG,KAAK,CAAC,QAAQ,CAAC;QAC/B,GAAG,CAAC,QAAQ,CACR,IAAI,EACJ,IAAI,CAAC,CAAC,GAAG,KAAK,CAAC,qBAAqB,EACpC,IAAI,CAAC,CAAC,GAAG,IAAI,CAAC,MAAM,GAAG,CAAC,GAAG,mBAAmB,CAAC,GAAG,EAAE,KAAK,CAAC,CAC7D,CAAC;QAEF,OAAO,IAAI,CAAC;IAChB,CAAC;IACD,aAAa,EAAE,GAAG,EAAE,CAAC,CAAC;QAClB,MAAM,EAAE,CAAC,CAAC,EAAE;YACR,OAAO,CACH,oBAAC,KAAK,CAAC,QAAQ,IAAC,QAAQ,EAAE,IAAI;gBAC1B,oBAAC,iBAAiB,OAAK,CAAC,GAAI,CACf,CACpB,CAAC;QACN,CAAC;QACD,aAAa,EAAE;YACX,QAAQ,EAAE,OAAO;YACjB,IAAI,EAAE,QAAQ;YACd,GAAG,EAAE,QAAQ;YACb,KAAK,EAAE,MAAM;YACb,YAAY,EAAE,KAAK;YACnB,QAAQ,EAAE,OAAO;YACjB,SAAS,EAAE,OAAO;SACrB;QACD,cAAc,EAAE,IAAI;KACvB,CAAC;IACF,OAAO,EAAE,CAAC,GAAG,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC;QAClB,GAAG,CAAC;QACJ,QAAQ,EAAE,GAAG;KAChB,CAAC;CACL,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/dist/cjs/cells/button-cell.js

@@ -0,0 +1,92 @@
+import { getMiddleCenterBias, GridCellKind, interpolateColors, } from "@glideapps/glide-data-grid";
+import { roundedRect } from "../draw-fns.js";
+function unpackColor(color, theme, hoverAmount) {
+    if (typeof color === "string") {
+        if (theme[color] !== undefined)
+            return theme[color];
+        return color;
+    }
+    let [normal, hover] = color;
+    if (theme[normal] !== undefined)
+        normal = theme[normal];
+    if (theme[hover] !== undefined)
+        hover = theme[hover];
+    return interpolateColors(normal, hover, hoverAmount);
+}
+function getIsHovered(bounds, posX, posY, theme) {
+    const x = Math.floor(bounds.x + theme.cellHorizontalPadding + 1);
+    const y = Math.floor(bounds.y + theme.cellVerticalPadding + 1);
+    const width = Math.ceil(bounds.width - theme.cellHorizontalPadding * 2 - 1);
+    const height = Math.ceil(bounds.height - theme.cellVerticalPadding * 2 - 1);
+    return (posX !== undefined &&
+        posY !== undefined &&
+        posX + bounds.x >= x &&
+        posX + bounds.x < x + width &&
+        posY + bounds.y >= y &&
+        posY + bounds.y < y + height);
+}
+const renderer = {
+    kind: GridCellKind.Custom,
+    isMatch: (c) => c.data.kind === "button-cell",
+    needsHoverPosition: true,
+    needsHover: true,
+    onSelect: a => a.preventDefault(),
+    onClick: a => {
+        const { cell, theme, bounds, posX, posY } = a;
+        if (getIsHovered(bounds, posX, posY, theme))
+            cell.data.onClick?.();
+        return undefined;
+    },
+    drawPrep: args => {
+        const { ctx } = args;
+        ctx.textAlign = "center";
+        return {
+            deprep: a => {
+                a.ctx.textAlign = "start";
+            },
+        };
+    },
+    draw: (args, cell) => {
+        const { ctx, theme, rect, hoverX, hoverY, frameTime, drawState } = args;
+        const { title, backgroundColor, color, borderColor, borderRadius } = cell.data;
+        const x = Math.floor(rect.x + theme.cellHorizontalPadding + 1);
+        const y = Math.floor(rect.y + theme.cellVerticalPadding + 1);
+        const width = Math.ceil(rect.width - theme.cellHorizontalPadding * 2 - 1);
+        const height = Math.ceil(rect.height - theme.cellVerticalPadding * 2 - 1);
+        if (width <= 0 || height <= 0)
+            return true;
+        const isHovered = getIsHovered(rect, hoverX, hoverY, theme);
+        // eslint-disable-next-line prefer-const
+        let [state, setState] = drawState;
+        if (isHovered)
+            args.overrideCursor?.("pointer");
+        state ??= { hovered: false, animationStartTime: 0 };
+        if (isHovered !== state.hovered) {
+            state = { ...state, hovered: isHovered, animationStartTime: frameTime };
+            setState(state);
+        }
+        const progress = Math.min(1, (frameTime - state.animationStartTime) / 200);
+        const hoverAmount = isHovered ? progress : 1 - progress;
+        if (progress < 1)
+            args.requestAnimationFrame?.();
+        if (backgroundColor !== undefined) {
+            ctx.beginPath();
+            roundedRect(ctx, x, y, width, height, borderRadius ?? theme.roundingRadius ?? 0);
+            ctx.fillStyle = unpackColor(backgroundColor, theme, hoverAmount);
+            ctx.fill();
+        }
+        if (borderColor !== undefined) {
+            ctx.beginPath();
+            roundedRect(ctx, x + 0.5, y + 0.5, width - 1, height - 1, borderRadius ?? theme.roundingRadius ?? 0);
+            ctx.strokeStyle = unpackColor(borderColor, theme, hoverAmount);
+            ctx.lineWidth = 1;
+            ctx.stroke();
+        }
+        ctx.fillStyle = unpackColor(color ?? theme.accentColor, theme, hoverAmount);
+        ctx.fillText(title, x + width / 2, y + height / 2 + getMiddleCenterBias(ctx, theme.baseFontFull));
+        return true;
+    },
+    provideEditor: undefined,
+};
+export default renderer;
+//# sourceMappingURL=button-cell.js.map

package/dist/cjs/cells/button-cell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-cell.js","sourceRoot":"","sources":["../../../src/cells/button-cell.tsx"],"names":[],"mappings":"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"}

package/dist/cjs/cells/date-picker-cell.css

@@ -0,0 +1 @@
+.gdg-s1wtovjx{min-height:26px;border:none;outline:none;background-color:transparent;font-size:var(--gdg-editor-font-size);font-family:var(--gdg-font-family);color:var(--gdg-text-dark);}.gdg-s1wtovjx ::-webkit-calendar-picker-indicator{background-color:white;}

package/dist/cjs/cells/date-picker-cell.js

@@ -0,0 +1,127 @@
+import React from "react";
+import { styled } from "@linaria/react";
+import { drawTextCell, GridCellKind, TextCellEntry } from "@glideapps/glide-data-grid";
+export const StyledInputBox = /*#__PURE__*/styled('input')({
+  name: "StyledInputBox",
+  class: "gdg-s1wtovjx",
+  propsAsIs: false
+});
+export const formatValueForHTMLInput = (dateKind, date, timezoneOffsetMs) => {
+  if (date === undefined || date === null) {
+    return "";
+  }
+  if (timezoneOffsetMs) {
+    // Adjust based on the configured timezone offset:
+    date = new Date(date.getTime() + timezoneOffsetMs);
+  }
+  const isoDate = date.toISOString();
+  switch (dateKind) {
+    case "date":
+      return isoDate.split("T")[0];
+    case "datetime-local":
+      return isoDate.replace("Z", "");
+    case "time":
+      return isoDate.split("T")[1].replace("Z", "");
+    default:
+      throw new Error(`Unknown date kind ${dateKind}`);
+  }
+};
+const Editor = cell => {
+  const cellData = cell.value.data;
+  const {
+    format,
+    displayDate
+  } = cellData;
+  const step = cellData.step !== undefined && !Number.isNaN(Number(cellData.step)) ? Number(cellData.step) : undefined;
+  // Convert timezone offset from minutes to milliseconds:
+  const timezoneOffsetMs = cellData.timezoneOffset ? cellData.timezoneOffset * 60 * 1000 : 0;
+  // We need to convert the min and max to iso strings. Thereby, we are also
+  // adjusting the values to the given timezone offset.
+  const minValue = cellData.min instanceof Date ? formatValueForHTMLInput(format, cellData.min, timezoneOffsetMs) : cellData.min;
+  const maxValue = cellData.max instanceof Date ? formatValueForHTMLInput(format, cellData.max, timezoneOffsetMs) : cellData.max;
+  const value = formatValueForHTMLInput(format, cellData.date, timezoneOffsetMs);
+  if (cell.value.readonly) {
+    return React.createElement(TextCellEntry, {
+      highlight: true,
+      autoFocus: false,
+      disabled: true,
+      value: displayDate ?? "",
+      onChange: () => undefined
+    });
+  }
+  return React.createElement(StyledInputBox, {
+    "data-testid": "date-picker-cell",
+    required: true,
+    type: format,
+    defaultValue: value,
+    min: minValue,
+    max: maxValue,
+    step: step,
+    autoFocus: true,
+    onChange: event => {
+      if (isNaN(event.target.valueAsNumber)) {
+        // The user has cleared the date, contribute as undefined
+        cell.onChange({
+          ...cell.value,
+          data: {
+            ...cell.value.data,
+            date: undefined
+          }
+        });
+      } else {
+        cell.onChange({
+          ...cell.value,
+          data: {
+            ...cell.value.data,
+            // use valueAsNumber because valueAsDate is null for "datetime-local"
+            // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/datetime-local#technical_summary
+            date: new Date(event.target.valueAsNumber - timezoneOffsetMs)
+          }
+        });
+      }
+    }
+  });
+};
+const renderer = {
+  kind: GridCellKind.Custom,
+  isMatch: cell => cell.data.kind === "date-picker-cell",
+  draw: (args, cell) => {
+    const {
+      displayDate
+    } = cell.data;
+    drawTextCell(args, displayDate, cell.contentAlign);
+    return true;
+  },
+  measure: (ctx, cell, theme) => {
+    const {
+      displayDate
+    } = cell.data;
+    return ctx.measureText(displayDate).width + theme.cellHorizontalPadding * 2;
+  },
+  provideEditor: () => ({
+    editor: Editor
+  }),
+  onPaste: (v, d) => {
+    let parseDateTimestamp = NaN;
+    // We only try to parse the value if it is not empty/undefined/null:
+    if (v) {
+      // Support for unix timestamps (milliseconds since 1970-01-01):
+      parseDateTimestamp = Number(v).valueOf();
+      if (Number.isNaN(parseDateTimestamp)) {
+        // Support for parsing ISO 8601 date strings:
+        parseDateTimestamp = Date.parse(v);
+        if (d.format === "time" && Number.isNaN(parseDateTimestamp)) {
+          // The pasted value was not a valid date string
+          // Try to interpret value as time string instead (HH:mm:ss)
+          parseDateTimestamp = Date.parse(`1970-01-01T${v}Z`);
+        }
+      }
+    }
+    return {
+      ...d,
+      date: Number.isNaN(parseDateTimestamp) ? undefined : new Date(parseDateTimestamp)
+    };
+  }
+};
+export default renderer;
+

package/dist/cjs/cells/date-picker-cell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-picker-cell.js","sourceRoot":"","sources":["../../../src/cells/date-picker-cell.tsx"],"names":[],"mappings":"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"}

package/dist/cjs/cells/dropdown-cell.css

@@ -0,0 +1,3 @@
+.gdg-wghi2zc{display:flex;flex-direction:column;align-items:stretch;}.gdg-wghi2zc .glide-select{font-family:var(--gdg-font-family);font-size:var(--gdg-editor-font-size);}
+.gdg-p13nj8j0{font-family:var(--gdg-font-family);font-size:var(--gdg-editor-font-size);color:var(--gdg-text-dark);}.gdg-p13nj8j0 >div{border-radius:4px;border:1px solid var(--gdg-border-color);}
+.gdg-r6sia3g{display:"flex";margin:auto 8.5px;padding-bottom:3px;}

package/dist/cjs/cells/dropdown-cell.js

@@ -0,0 +1,206 @@
+import * as React from "react";
+import { styled } from "@linaria/react";
+import Select, { components } from "react-select";
+import { getMiddleCenterBias, useTheme, GridCellKind, TextCellEntry } from "@glideapps/glide-data-grid";
+const CustomMenu = p => {
+  const {
+    Menu
+  } = components;
+  const {
+    children,
+    ...rest
+  } = p;
+  return React.createElement(Menu, {
+    ...rest
+  }, children);
+};
+const Wrap = /*#__PURE__*/styled('div')({
+  name: "Wrap",
+  class: "gdg-wghi2zc",
+  propsAsIs: false
+});
+const PortalWrap = /*#__PURE__*/styled('div')({
+  name: "PortalWrap",
+  class: "gdg-p13nj8j0",
+  propsAsIs: false
+});
+// This is required since the padding is disabled for this cell type
+// The settings are based on the "pad" settings in the data-grid-overlay-editor-style.tsx
+const ReadOnlyWrap = /*#__PURE__*/styled('div')({
+  name: "ReadOnlyWrap",
+  class: "gdg-r6sia3g",
+  propsAsIs: false
+});
+const Editor = p => {
+  const {
+    value: cell,
+    onFinishedEditing,
+    initialValue,
+    portalElementRef
+  } = p;
+  const {
+    allowedValues,
+    value: valueIn
+  } = cell.data;
+  const [value, setValue] = React.useState(valueIn);
+  const [inputValue, setInputValue] = React.useState(initialValue ?? "");
+  const theme = useTheme();
+  const values = React.useMemo(() => {
+    return allowedValues.map(option => {
+      if (typeof option === "string" || option === null || option === undefined) {
+        return {
+          value: option,
+          label: option?.toString() ?? ""
+        };
+      }
+      return option;
+    });
+  }, [allowedValues]);
+  if (cell.readonly) {
+    return React.createElement(ReadOnlyWrap, null, React.createElement(TextCellEntry, {
+      highlight: true,
+      autoFocus: false,
+      disabled: true,
+      value: value ?? "",
+      onChange: () => undefined
+    }));
+  }
+  return React.createElement(Wrap, null, React.createElement(Select, {
+    className: "glide-select",
+    inputValue: inputValue,
+    onInputChange: setInputValue,
+    menuPlacement: "auto",
+    value: values.find(x => x.value === value),
+    styles: {
+      control: base => ({
+        ...base,
+        border: 0,
+        boxShadow: "none"
+      }),
+      option: (base, {
+        isFocused
+      }) => ({
+        ...base,
+        fontSize: theme.editorFontSize,
+        fontFamily: theme.fontFamily,
+        cursor: isFocused ? "pointer" : undefined,
+        paddingLeft: theme.cellHorizontalPadding,
+        paddingRight: theme.cellHorizontalPadding,
+        ":active": {
+          ...base[":active"],
+          color: theme.accentFg
+        },
+        // Add some content in case the option is empty
+        // so that the option height can be calculated correctly
+        ":empty::after": {
+          content: '" "',
+          visibility: "hidden"
+        }
+      })
+    },
+    theme: t => {
+      return {
+        ...t,
+        colors: {
+          ...t.colors,
+          neutral0: theme.bgCell,
+          // this is both the background color AND the fg color of
+          // the selected item because of course it is.
+          neutral5: theme.bgCell,
+          neutral10: theme.bgCell,
+          neutral20: theme.bgCellMedium,
+          neutral30: theme.bgCellMedium,
+          neutral40: theme.bgCellMedium,
+          neutral50: theme.textLight,
+          neutral60: theme.textMedium,
+          neutral70: theme.textMedium,
+          neutral80: theme.textDark,
+          neutral90: theme.textDark,
+          neutral100: theme.textDark,
+          primary: theme.accentColor,
+          primary75: theme.accentColor,
+          primary50: theme.accentColor,
+          primary25: theme.accentLight // prelight color
+        }
+      };
+    },
+    menuPortalTarget: portalElementRef?.current ?? document.getElementById("portal"),
+    autoFocus: true,
+    openMenuOnFocus: true,
+    components: {
+      DropdownIndicator: () => null,
+      IndicatorSeparator: () => null,
+      Menu: props => React.createElement(PortalWrap, null, React.createElement(CustomMenu, {
+        className: "click-outside-ignore",
+        ...props
+      }))
+    },
+    options: values,
+    onChange: async e => {
+      if (e === null) return;
+      setValue(e.value);
+      await new Promise(r => window.requestAnimationFrame(r));
+      onFinishedEditing({
+        ...cell,
+        data: {
+          ...cell.data,
+          value: e.value
+        }
+      });
+    }
+  }));
+};
+const renderer = {
+  kind: GridCellKind.Custom,
+  isMatch: c => c.data.kind === "dropdown-cell",
+  draw: (args, cell) => {
+    const {
+      ctx,
+      theme,
+      rect
+    } = args;
+    const {
+      value
+    } = cell.data;
+    const foundOption = cell.data.allowedValues.find(opt => {
+      if (typeof opt === "string" || opt === null || opt === undefined) {
+        return opt === value;
+      }
+      return opt.value === value;
+    });
+    const displayText = typeof foundOption === "string" ? foundOption : foundOption?.label ?? "";
+    if (displayText) {
+      ctx.fillStyle = theme.textDark;
+      ctx.fillText(displayText, rect.x + theme.cellHorizontalPadding, rect.y + rect.height / 2 + getMiddleCenterBias(ctx, theme));
+    }
+    return true;
+  },
+  measure: (ctx, cell, theme) => {
+    const {
+      value
+    } = cell.data;
+    return (value ? ctx.measureText(value).width : 0) + theme.cellHorizontalPadding * 2;
+  },
+  provideEditor: () => ({
+    editor: Editor,
+    disablePadding: true,
+    deletedValue: v => ({
+      ...v,
+      copyData: "",
+      data: {
+        ...v.data,
+        value: ""
+      }
+    })
+  }),
+  onPaste: (v, d) => ({
+    ...d,
+    value: d.allowedValues.some(option => {
+      if (option === null || option === undefined) return false;
+      if (typeof option === "string") return option === v;
+      return option.value === v;
+    }) ? v : d.value
+  })
+};
+export default renderer;
+