@viax.io/uxm 4.36.0

package/dist/ui/editable-cell/editable-cell-preview.js

@@ -0,0 +1,216 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { cn } from "../../helpers/index.js";
+import {
+  EditableCell
+} from "../../ui/index.js";
+const sectionLabel = {
+  fontSize: 11,
+  color: "var(--color-text-muted)",
+  marginBottom: 12,
+  letterSpacing: 0.5,
+  textTransform: "uppercase"
+};
+function buildVars(styles) {
+  return {
+    "--uxm-editable-cell-radius": `${styles.radius}px`,
+    // Per-size width caps — passed verbatim, never px-suffixed: both knobs are
+    // selects whose values are already CSS (`none` / `320px`), matching the
+    // Font Size pair below.
+    "--uxm-editable-cell-small-max-width": styles.smallMaxWidth ?? "320px",
+    "--uxm-editable-cell-medium-max-width": styles.mediumMaxWidth ?? "none",
+    // Symmetric per-size dimension knobs — each set is read only by its own
+    // size modifier, so writing both alongside each other is harmless.
+    "--uxm-editable-cell-small-padding-x": `${styles.smallPaddingX ?? 8}px`,
+    "--uxm-editable-cell-small-padding-y": `${styles.smallPaddingY ?? 4}px`,
+    // Passed through verbatim, not suffixed with px: the knob is a select whose
+    // default is the literal `inherit`, matching the CSS fallback (`1em`). The
+    // canvas gets its table scale from the `fontSize` context below instead of
+    // by pinning this var — so an untouched knob previews the real inheriting
+    // behaviour rather than a hardcoded 13px the CSS never applies.
+    "--uxm-editable-cell-small-font-size": styles.smallFontSize ?? "inherit",
+    "--uxm-editable-cell-medium-padding-x": `${styles.mediumPaddingX ?? 12}px`,
+    "--uxm-editable-cell-medium-padding-y": `${styles.mediumPaddingY ?? 6}px`,
+    "--uxm-editable-cell-medium-font-size": styles.mediumFontSize ?? "14px",
+    "--uxm-editable-cell-hover-bg": styles.hoverBg,
+    "--uxm-editable-cell-pencil-color": styles.pencilColor,
+    "--uxm-editable-cell-focus-border": styles.focusBorder,
+    "--uxm-editable-cell-focus-ring": styles.focusRing,
+    "--uxm-editable-cell-color": styles.color,
+    "--uxm-editable-cell-placeholder-color": styles.placeholderColor,
+    "--uxm-editable-cell-disabled-opacity": String(styles.disabledOpacity ?? 0.55),
+    "--uxm-editable-cell-input-bg": styles.inputBg,
+    "--uxm-editable-cell-input-color": styles.inputColor,
+    "--uxm-editable-cell-input-border": styles.inputBorder,
+    "--uxm-editable-cell-input-focus-border": styles.inputFocusBorder,
+    "--uxm-editable-cell-clear-color": styles.clearColor,
+    "--uxm-editable-cell-clear-hover-bg": styles.clearHoverBg,
+    "--uxm-editable-cell-warning-border": styles.warningBorder,
+    "--uxm-editable-cell-error-border": styles.errorBorder,
+    width: 280,
+    // The canvas' own font is larger than a table's, which would make a `small`
+    // cell read as oversized. Setting the surrounding CONTEXT to DataTable's
+    // 13px cell font — rather than pinning the cell's font-size var — previews
+    // the dense table scale while keeping `small`'s documented inherit
+    // behaviour intact. `medium` pins 14px itself, so it's unaffected.
+    fontSize: 13
+  };
+}
+const SAMPLE_OPTIONS = [
+  { value: "growth", label: "Growth" },
+  { value: "retention", label: "Retention" },
+  { value: "expansion", label: "Expansion" },
+  { value: "winback", label: "Win-back" }
+];
+const commitDelay = () => new Promise((r) => setTimeout(r, 400));
+function useCellState() {
+  const [text, setText] = useState("Revenue Motion");
+  const [num, setNum] = useState(42);
+  const [date, setDate] = useState("2026-03-14");
+  const [select, setSelect] = useState("growth");
+  const [multi, setMulti] = useState(["growth", "expansion"]);
+  return {
+    text,
+    num,
+    date,
+    select,
+    multi,
+    commitText: async (n) => {
+      await commitDelay();
+      setText(String(Array.isArray(n) ? n.join(", ") : n));
+    },
+    commitNumber: async (n) => {
+      await commitDelay();
+      setNum(n === "" ? "" : Number(n));
+    },
+    commitDate: async (n) => {
+      await commitDelay();
+      setDate(String(n));
+    },
+    commitSelect: async (n) => {
+      await commitDelay();
+      setSelect(String(n));
+    },
+    commitMulti: async (n) => {
+      await commitDelay();
+      setMulti(Array.isArray(n) ? n : n === "" ? [] : [String(n)]);
+    }
+  };
+}
+function EditableCellPreview({ styles, variants }) {
+  const type = variants.type ?? "text";
+  const align = variants.align ?? "left";
+  const size = variants.size ?? "small";
+  const dateFormat = variants.dateFormat ?? "ymd";
+  const state = variants.state ?? "default";
+  const inputStates = ["editing", "warning", "error"];
+  const forcedClass = cn(
+    state === "hover" && "uxm-editable-cell--state-hover",
+    state === "focus" && "uxm-editable-cell--state-focus",
+    // `open` is the pickers' editing state: forcing the real `--open` class
+    // paints the editing chrome on the trigger and reveals its ✕, without
+    // actually mounting the Listbox panel over the canvas.
+    state === "open" && "uxm-editable-cell--open",
+    inputStates.includes(state) && "uxm-editable-cell--force-input-focus"
+  );
+  const forceMode = inputStates.includes(state) ? state : void 0;
+  const showcase = useCellState();
+  const interactive = useCellState();
+  const vars = buildVars(styles);
+  const showcaseChrome = {
+    align,
+    size,
+    forceMode,
+    disabled: state === "disabled",
+    className: forcedClass || void 0
+  };
+  const renderCell = (chrome, c) => {
+    switch (type) {
+      case "number":
+        return /* @__PURE__ */ jsx(
+          EditableCell,
+          {
+            ...chrome,
+            type: "number",
+            value: c.num,
+            onCommit: c.commitNumber,
+            placeholder: "Enter a number\u2026",
+            validate: (v) => typeof v === "number" && v < 0 ? "Must be \u2265 0" : null
+          }
+        );
+      case "date":
+        return /* @__PURE__ */ jsx(
+          EditableCell,
+          {
+            ...chrome,
+            type: "date",
+            value: c.date,
+            dateFormat,
+            onCommit: c.commitDate
+          }
+        );
+      case "select":
+        return /* @__PURE__ */ jsx(
+          EditableCell,
+          {
+            ...chrome,
+            type: "select",
+            value: c.select,
+            options: SAMPLE_OPTIONS,
+            onCommit: c.commitSelect,
+            placeholder: "Pick a motion\u2026"
+          }
+        );
+      case "multiselect":
+        return /* @__PURE__ */ jsx(
+          EditableCell,
+          {
+            ...chrome,
+            type: "multiselect",
+            value: c.multi,
+            options: SAMPLE_OPTIONS,
+            onCommit: c.commitMulti,
+            placeholder: "Pick motions\u2026"
+          }
+        );
+      default:
+        return /* @__PURE__ */ jsx(
+          EditableCell,
+          {
+            ...chrome,
+            type: "text",
+            value: c.text,
+            onCommit: c.commitText,
+            placeholder: "Enter a name\u2026"
+          }
+        );
+    }
+  };
+  const showcaseCell = renderCell(showcaseChrome, showcase);
+  const interactiveCell = renderCell({ align, size }, interactive);
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 32 }, children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsxs("div", { style: sectionLabel, children: [
+        type,
+        " cell (",
+        size,
+        ", ",
+        align,
+        ") \u2014 ",
+        state
+      ] }),
+      /* @__PURE__ */ jsx("div", { style: vars, children: showcaseCell })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: { borderTop: "1px solid var(--color-border)", paddingTop: 16 }, children: [
+      /* @__PURE__ */ jsxs("div", { style: sectionLabel, children: [
+        "Interactive \u2014 ",
+        type
+      ] }),
+      /* @__PURE__ */ jsx("div", { style: vars, children: interactiveCell })
+    ] })
+  ] });
+}
+export {
+  EditableCellPreview
+};
+//# sourceMappingURL=editable-cell-preview.js.map

package/dist/ui/editable-cell/editable-cell-preview.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/editable-cell/editable-cell-preview.tsx"],"sourcesContent":["import { useState, type CSSProperties } from 'react';\n\nimport { cn } from '@/helpers';\nimport type { PreviewProps } from '@/previews/types';\nimport {\n  EditableCell,\n  type EditableCellAlign,\n  type EditableCellOption,\n  type EditableCellSize,\n  type EditableCellType,\n  type EditableCellValue,\n} from '@/ui';\n\ntype Styles = PreviewProps['styles'];\n\nconst sectionLabel = {\n  fontSize: 11,\n  color: 'var(--color-text-muted)',\n  marginBottom: 12,\n  letterSpacing: 0.5,\n  textTransform: 'uppercase' as const,\n};\n\nfunction buildVars(styles: Styles): CSSProperties {\n  return {\n    '--uxm-editable-cell-radius': `${styles.radius}px`,\n    // Per-size width caps — passed verbatim, never px-suffixed: both knobs are\n    // selects whose values are already CSS (`none` / `320px`), matching the\n    // Font Size pair below.\n    '--uxm-editable-cell-small-max-width': (styles.smallMaxWidth as string) ?? '320px',\n    '--uxm-editable-cell-medium-max-width': (styles.mediumMaxWidth as string) ?? 'none',\n    // Symmetric per-size dimension knobs — each set is read only by its own\n    // size modifier, so writing both alongside each other is harmless.\n    '--uxm-editable-cell-small-padding-x': `${styles.smallPaddingX ?? 8}px`,\n    '--uxm-editable-cell-small-padding-y': `${styles.smallPaddingY ?? 4}px`,\n    // Passed through verbatim, not suffixed with px: the knob is a select whose\n    // default is the literal `inherit`, matching the CSS fallback (`1em`). The\n    // canvas gets its table scale from the `fontSize` context below instead of\n    // by pinning this var — so an untouched knob previews the real inheriting\n    // behaviour rather than a hardcoded 13px the CSS never applies.\n    '--uxm-editable-cell-small-font-size': (styles.smallFontSize as string) ?? 'inherit',\n    '--uxm-editable-cell-medium-padding-x': `${styles.mediumPaddingX ?? 12}px`,\n    '--uxm-editable-cell-medium-padding-y': `${styles.mediumPaddingY ?? 6}px`,\n    '--uxm-editable-cell-medium-font-size': (styles.mediumFontSize as string) ?? '14px',\n    '--uxm-editable-cell-hover-bg': styles.hoverBg as string,\n    '--uxm-editable-cell-pencil-color': styles.pencilColor as string,\n    '--uxm-editable-cell-focus-border': styles.focusBorder as string,\n    '--uxm-editable-cell-focus-ring': styles.focusRing as string,\n    '--uxm-editable-cell-color': styles.color as string,\n    '--uxm-editable-cell-placeholder-color': styles.placeholderColor as string,\n    '--uxm-editable-cell-disabled-opacity': String(styles.disabledOpacity ?? 0.55),\n    '--uxm-editable-cell-input-bg': styles.inputBg as string,\n    '--uxm-editable-cell-input-color': styles.inputColor as string,\n    '--uxm-editable-cell-input-border': styles.inputBorder as string,\n    '--uxm-editable-cell-input-focus-border': styles.inputFocusBorder as string,\n    '--uxm-editable-cell-clear-color': styles.clearColor as string,\n    '--uxm-editable-cell-clear-hover-bg': styles.clearHoverBg as string,\n    '--uxm-editable-cell-warning-border': styles.warningBorder as string,\n    '--uxm-editable-cell-error-border': styles.errorBorder as string,\n    width: 280,\n    // The canvas' own font is larger than a table's, which would make a `small`\n    // cell read as oversized. Setting the surrounding CONTEXT to DataTable's\n    // 13px cell font — rather than pinning the cell's font-size var — previews\n    // the dense table scale while keeping `small`'s documented inherit\n    // behaviour intact. `medium` pins 14px itself, so it's unaffected.\n    fontSize: 13,\n  } as CSSProperties;\n}\n\n// Sample options for the select / multiselect showcase branches. Kept small\n// so the dropdown renders without a search box by default (auto threshold).\nconst SAMPLE_OPTIONS: EditableCellOption[] = [\n  { value: 'growth', label: 'Growth' },\n  { value: 'retention', label: 'Retention' },\n  { value: 'expansion', label: 'Expansion' },\n  { value: 'winback', label: 'Win-back' },\n];\n\nconst commitDelay = () => new Promise((r) => setTimeout(r, 400));\n\n// One independent bundle of per-type state + async commit handlers. Called\n// once for the showcase cell and once for the Interactive cell so editing one\n// never leaks into the other (each call is its own hook instance).\nfunction useCellState() {\n  const [text, setText] = useState('Revenue Motion');\n  // number | '' — an emptied number cell commits '' (the uniform \"cleared\"\n  // value), and the preview must round-trip it to show the placeholder.\n  const [num, setNum] = useState<number | ''>(42);\n  const [date, setDate] = useState('2026-03-14');\n  const [select, setSelect] = useState('growth');\n  const [multi, setMulti] = useState<string[]>(['growth', 'expansion']);\n  return {\n    text,\n    num,\n    date,\n    select,\n    multi,\n    commitText: async (n: EditableCellValue) => {\n      await commitDelay();\n      setText(String(Array.isArray(n) ? n.join(', ') : n));\n    },\n    commitNumber: async (n: EditableCellValue) => {\n      await commitDelay();\n      setNum(n === '' ? '' : Number(n));\n    },\n    commitDate: async (n: EditableCellValue) => {\n      await commitDelay();\n      setDate(String(n));\n    },\n    commitSelect: async (n: EditableCellValue) => {\n      await commitDelay();\n      setSelect(String(n));\n    },\n    commitMulti: async (n: EditableCellValue) => {\n      await commitDelay();\n      // multiselect commits a string[]; clearable commits [] (empty).\n      setMulti(Array.isArray(n) ? n : n === '' ? [] : [String(n)]);\n    },\n  };\n}\ntype CellState = ReturnType<typeof useCellState>;\n\nexport function EditableCellPreview({ styles, variants }: PreviewProps & { componentId: string }) {\n  const type = (variants.type as EditableCellType) ?? 'text';\n  const align = (variants.align as EditableCellAlign) ?? 'left';\n  const size = (variants.size as EditableCellSize) ?? 'small';\n  const dateFormat = (variants.dateFormat as 'ymd' | 'dmy' | 'mdy') ?? 'ymd';\n  // `state` forces the showcase cell into each peer state so only the\n  // matching knobs are shown and they paint without interaction. hover /\n  // focus ride on forced modifier classes, disabled on the `disabled` prop,\n  // editing / error on `forceMode` — mirroring the rest of the input family.\n  // Editing / error also force the input's focus halo via a class (in real\n  // use the editing input is always focused; the canvas must not steal real\n  // focus, so it mirrors the visuals instead). The Interactive row below\n  // stays unforced for exercising the real click-to-edit flow.\n  const state = (variants.state as string) ?? 'default';\n  const inputStates = ['editing', 'warning', 'error'];\n  const forcedClass = cn(\n    state === 'hover' && 'uxm-editable-cell--state-hover',\n    state === 'focus' && 'uxm-editable-cell--state-focus',\n    // `open` is the pickers' editing state: forcing the real `--open` class\n    // paints the editing chrome on the trigger and reveals its ✕, without\n    // actually mounting the Listbox panel over the canvas.\n    state === 'open' && 'uxm-editable-cell--open',\n    inputStates.includes(state) && 'uxm-editable-cell--force-input-focus',\n  );\n  const forceMode = inputStates.includes(state)\n    ? (state as 'editing' | 'warning' | 'error')\n    : undefined;\n\n  // Two independent state bundles — the showcase cell and the Interactive cell\n  // never share a value, so editing one leaves the other untouched.\n  const showcase = useCellState();\n  const interactive = useCellState();\n\n  const vars = buildVars(styles);\n\n  // Chrome shared by every showcase branch so switching Type in the editor\n  // re-renders the matching editor while keeping the forced state / align.\n  const showcaseChrome = {\n    align,\n    size,\n    forceMode,\n    disabled: state === 'disabled',\n    className: forcedClass || undefined,\n  };\n\n  // Render an editor for the type currently picked in the editor — the whole\n  // point of this preview: changing Type must swap the rendered editor, not\n  // fall back to a text input. `chrome` is the per-context wrapper: the\n  // showcase passes forced state / disabled; the Interactive row passes just\n  // `align` so it stays a real, clickable editor.\n  type Chrome = {\n    align: EditableCellAlign;\n    size?: EditableCellSize;\n    forceMode?: 'editing' | 'warning' | 'error';\n    disabled?: boolean;\n    className?: string;\n  };\n  const renderCell = (chrome: Chrome, c: CellState) => {\n    switch (type) {\n      case 'number':\n        return (\n          <EditableCell\n            {...chrome}\n            type=\"number\"\n            value={c.num}\n            onCommit={c.commitNumber}\n            placeholder=\"Enter a number…\"\n            validate={(v) => (typeof v === 'number' && v < 0 ? 'Must be ≥ 0' : null)}\n          />\n        );\n      case 'date':\n        return (\n          <EditableCell\n            {...chrome}\n            type=\"date\"\n            value={c.date}\n            dateFormat={dateFormat}\n            onCommit={c.commitDate}\n          />\n        );\n      case 'select':\n        return (\n          <EditableCell\n            {...chrome}\n            type=\"select\"\n            value={c.select}\n            options={SAMPLE_OPTIONS}\n            onCommit={c.commitSelect}\n            placeholder=\"Pick a motion…\"\n          />\n        );\n      case 'multiselect':\n        return (\n          <EditableCell\n            {...chrome}\n            type=\"multiselect\"\n            value={c.multi}\n            options={SAMPLE_OPTIONS}\n            onCommit={c.commitMulti}\n            placeholder=\"Pick motions…\"\n          />\n        );\n      default:\n        return (\n          <EditableCell\n            {...chrome}\n            type=\"text\"\n            value={c.text}\n            onCommit={c.commitText}\n            placeholder=\"Enter a name…\"\n          />\n        );\n    }\n  };\n  const showcaseCell = renderCell(showcaseChrome, showcase);\n  // Interactive: same type, but unforced (real click-to-edit) — only `align`,\n  // and its OWN state bundle so edits here don't touch the showcase value.\n  const interactiveCell = renderCell({ align, size }, interactive);\n\n  return (\n    <div style={{ display: 'flex', flexDirection: 'column', gap: 32 }}>\n      <div>\n        <div style={sectionLabel}>{type} cell ({size}, {align}) — {state}</div>\n        <div style={vars}>{showcaseCell}</div>\n      </div>\n\n      <div style={{ borderTop: '1px solid var(--color-border)', paddingTop: 16 }}>\n        <div style={sectionLabel}>Interactive — {type}</div>\n        {/* Mirrors the Type knob: a real, click-to-edit cell of the SAME type\n            as the showcase (no forced state), so designers can exercise the\n            selected editor. */}\n        <div style={vars}>{interactiveCell}</div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}