glide-data-grid-cells-fork 6.0.4-alpha10

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

@@ -0,0 +1,92 @@
+import { getMiddleCenterBias, GridCellKind, interpolateColors, } from "glide-data-grid-fork";
+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/esm/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/esm/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/esm/cells/date-picker-cell.js

@@ -0,0 +1,126 @@
+import React from "react";
+import { styled } from "@linaria/react";
+import { drawTextCell, GridCellKind, TextCellEntry } from "glide-data-grid-fork";
+export const StyledInputBox = /*#__PURE__*/styled('input')({
+  name: "StyledInputBox",
+  class: "gdg-s1wtovjx",
+  propsAsIs: false
+});
+export const formatValueForHTMLInput = (dateKind, date) => {
+  if (date === undefined || date === null) {
+    return "";
+  }
+  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;
+  const minValue = cellData.min instanceof Date ? formatValueForHTMLInput(format, cellData.min) : cellData.min;
+  const maxValue = cellData.max instanceof Date ? formatValueForHTMLInput(format, cellData.max) : cellData.max;
+  let date = cellData.date;
+  // Convert timezone offset to milliseconds
+  const timezoneOffsetMs = cellData.timezoneOffset ? cellData.timezoneOffset * 60 * 1000 : 0;
+  if (timezoneOffsetMs && date) {
+    // Adjust based on the timezone offset
+    date = new Date(date.getTime() + timezoneOffsetMs);
+  }
+  const value = formatValueForHTMLInput(format, date);
+  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/esm/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/esm/cells/dropdown-cell.css

@@ -0,0 +1,3 @@
+.gdg-wghi2zc{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:stretch;-webkit-box-align:stretch;-ms-flex-align:stretch;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/esm/cells/dropdown-cell.js

@@ -0,0 +1,201 @@
+import * as React from "react";
+import { styled } from "@linaria/react";
+import Select, { components } from "react-select";
+import { getMiddleCenterBias, useTheme, GridCellKind, TextCellEntry } from "glide-data-grid-fork";
+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
+  } = 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,
+          // 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: 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.includes(v) ? v : d.value
+  })
+};
+export default renderer;
+

package/dist/esm/cells/dropdown-cell.js.map

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

package/dist/esm/cells/input-dropdown-cell.css

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

package/dist/esm/cells/input-dropdown-cell.js

@@ -0,0 +1,209 @@
+import * as React from "react";
+import { styled } from "@linaria/react";
+import Select, { components } from "react-select";
+import { getMiddleCenterBias, useTheme, GridCellKind, TextCellEntry } from "glide-data-grid-fork";
+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-wq24c0d",
+  propsAsIs: false
+});
+const PortalWrap = /*#__PURE__*/styled('div')({
+  name: "PortalWrap",
+  class: "gdg-pjmrjuo",
+  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-rzd5ey8",
+  propsAsIs: false
+});
+// Editor Component
+const Editor = p => {
+  const {
+    value: cell,
+    onFinishedEditing,
+    initialValue
+  } = p;
+  const {
+    allowedValues,
+    value: valueIn,
+    fetchOptions
+  } = cell.data;
+  const [value, setValue] = React.useState(valueIn);
+  const [inputValue, setInputValue] = React.useState(initialValue ?? "");
+  const [options, setOptions] = React.useState(() => Array.from(allowedValues));
+  const [isFocused, setIsFocused] = React.useState(false);
+  const theme = useTheme();
+  // Debounced API Call
+  React.useEffect(() => {
+    if (fetchOptions && inputValue) {
+      const timeout = setTimeout(() => {
+        fetchOptions(inputValue).then(fetchedOptions => setOptions(fetchedOptions)).catch(console.error);
+      }, 300); // Debounce delay
+      return () => clearTimeout(timeout);
+    }
+  }, [inputValue, fetchOptions]);
+  const values = React.useMemo(() => {
+    return options.map(option => {
+      if (typeof option === "string" || option === null || option === undefined) {
+        return {
+          value: option,
+          label: option?.toString() ?? ""
+        };
+      }
+      return option;
+    });
+  }, [options]);
+  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, isFocused || !value ? 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: isFocused2
+      }) => ({
+        ...base,
+        fontSize: theme.editorFontSize,
+        fontFamily: theme.fontFamily,
+        cursor: isFocused2 ? "pointer" : undefined,
+        paddingLeft: theme.cellHorizontalPadding,
+        paddingRight: theme.cellHorizontalPadding,
+        ":active": {
+          ...base[":active"],
+          color: theme.accentFg
+        },
+        ":empty::after": {
+          content: '" "',
+          visibility: "hidden"
+        }
+      })
+    },
+    theme: t => {
+      return {
+        ...t,
+        colors: {
+          ...t.colors,
+          neutral0: theme.bgCell,
+          neutral20: theme.bgCellMedium,
+          neutral50: theme.textLight,
+          neutral80: theme.textDark,
+          primary: theme.accentColor
+        }
+      };
+    },
+    menuPortalTarget: 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);
+      setIsFocused(false);
+      await new Promise(r => window.requestAnimationFrame(r));
+      onFinishedEditing({
+        ...cell,
+        data: {
+          ...cell.data,
+          value: e.value
+        }
+      });
+    },
+    onBlur: () => setIsFocused(false)
+  }) : React.createElement("input", {
+    type: "text",
+    value: value,
+    onFocus: () => setIsFocused(true),
+    autoFocus: false,
+    readOnly: true,
+    style: {
+      fontFamily: theme.fontFamily,
+      fontSize: theme.editorFontSize,
+      border: "none",
+      background: "transparent",
+      padding: "0",
+      margin: "0"
+    }
+  }));
+};
+const renderer = {
+  kind: GridCellKind.Custom,
+  isMatch: c => c.data.kind === "input-dropdown-cell",
+  draw: (args, cell) => {
+    const {
+      ctx,
+      theme,
+      rect
+    } = args;
+    const {
+      value
+    } = cell.data;
+    const displayText = value;
+    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.value
+  })
+};
+export default renderer;
+