@marimo-team/frontend 0.19.3-dev27 → 0.19.3-dev28

package/src/components/editor/actions/name-cell-input.tsx

@@ -93,11 +93,17 @@ export const NameCellContentEditable: React.FC<{
         onChange={inputProps.onChange}
         onBlur={inputProps.onBlur}
         onFocus={inputProps.onFocus}
-        onKeyDown={Events.onEnter((e) => {
-          if (e.target instanceof HTMLElement) {
-            e.target.blur();
+        onKeyDown={(e) => {
+          // Prevent all key presses from triggering hotkeys
+          e.stopPropagation();
+
+          // On Enter, blur the input to commit the change
+          if (e.key === "Enter") {
+            if (e.target instanceof HTMLElement) {
+              e.target.blur();
+            }
           }
-        })}
+        }}
       >
         {value}
       </span>

package/src/utils/events.ts

@@ -42,6 +42,7 @@ export const Events = {
       target.tagName === "INPUT" ||
       target.tagName === "TEXTAREA" ||
       target.tagName.startsWith("MARIMO") ||
+      target.isContentEditable ||
       Events.fromCodeMirror(e)
     );
   },

package/dist/assets/button-DuYGqRtX.js

@@ -1 +0,0 @@
-import{s as k}from"./chunk-LvLJmgfZ.js";import{t as R}from"./react-BGmjiNul.js";import{t as j}from"./compiler-runtime-DeeZ7FnK.js";import{l as I}from"./hotkeys-uKX61F1_.js";import{n as S,t as K}from"./useEventListener-COkmyg1v.js";import{t as O}from"./jsx-runtime-DN_bIXfG.js";import{n as A,t as d}from"./cn-C1rgT0yh.js";var a=k(R(),1),w=k(O(),1),D=Symbol.for("react.lazy"),h=a.use;function P(e){return typeof e=="object"&&!!e&&"then"in e}function N(e){return typeof e=="object"&&!!e&&"$$typeof"in e&&e.$$typeof===D&&"_payload"in e&&P(e._payload)}function C(e){let t=$(e),r=a.forwardRef((n,o)=>{let{children:i,...l}=n;N(i)&&typeof h=="function"&&(i=h(i._payload));let s=a.Children.toArray(i),u=s.find(H);if(u){let p=u.props.children,c=s.map(g=>g===u?a.Children.count(p)>1?a.Children.only(null):a.isValidElement(p)?p.props.children:null:g);return(0,w.jsx)(t,{...l,ref:o,children:a.isValidElement(p)?a.cloneElement(p,void 0,c):null})}return(0,w.jsx)(t,{...l,ref:o,children:i})});return r.displayName=`${e}.Slot`,r}var _=C("Slot");function $(e){let t=a.forwardRef((r,n)=>{let{children:o,...i}=r;if(N(o)&&typeof h=="function"&&(o=h(o._payload)),a.isValidElement(o)){let l=W(o),s=V(i,o.props);return o.type!==a.Fragment&&(s.ref=n?S(n,l):l),a.cloneElement(o,s)}return a.Children.count(o)>1?a.Children.only(null):null});return t.displayName=`${e}.SlotClone`,t}var z=Symbol("radix.slottable");function H(e){return a.isValidElement(e)&&typeof e.type=="function"&&"__radixId"in e.type&&e.type.__radixId===z}function V(e,t){let r={...t};for(let n in t){let o=e[n],i=t[n];/^on[A-Z]/.test(n)?o&&i?r[n]=(...l)=>{let s=i(...l);return o(...l),s}:o&&(r[n]=o):n==="style"?r[n]={...o,...i}:n==="className"&&(r[n]=[o,i].filter(Boolean).join(" "))}return{...e,...r}}function W(e){var n,o;let t=(n=Object.getOwnPropertyDescriptor(e.props,"ref"))==null?void 0:n.get,r=t&&"isReactWarning"in t&&t.isReactWarning;return r?e.ref:(t=(o=Object.getOwnPropertyDescriptor(e,"ref"))==null?void 0:o.get,r=t&&"isReactWarning"in t&&t.isReactWarning,r?e.props.ref:e.props.ref||e.ref)}const E={stopPropagation:e=>t=>{t.stopPropagation(),e&&e(t)},onEnter:e=>t=>{t.key==="Enter"&&e&&e(t)},preventFocus:e=>{e.preventDefault()},fromInput:e=>{let t=e.target;return t.tagName==="INPUT"||t.tagName==="TEXTAREA"||t.tagName.startsWith("MARIMO")||E.fromCodeMirror(e)},fromCodeMirror:e=>e.target.closest(".cm-editor")!==null,shouldIgnoreKeyboardEvent(e){return e.target instanceof HTMLInputElement||e.target instanceof HTMLTextAreaElement||e.target instanceof HTMLSelectElement||e.target instanceof HTMLElement&&(e.target.isContentEditable||e.target.tagName==="BUTTON"||e.target.closest("[role='textbox']")!==null||e.target.closest("[contenteditable='true']")!==null||e.target.closest(".cm-editor")!==null)},hasModifier:e=>e.ctrlKey||e.metaKey||e.altKey||e.shiftKey,isMetaOrCtrl:e=>e.metaKey||e.ctrlKey};var L=j(),f="active:shadow-none",T=A(d("disabled:opacity-50 disabled:pointer-events-none","inline-flex items-center justify-center rounded-md text-sm font-medium focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-2 ring-offset-background"),{variants:{variant:{default:d("bg-primary text-primary-foreground hover:bg-primary/90 shadow-xs border border-primary",f),destructive:d("border shadow-xs","bg-(--red-9) hover:bg-(--red-10) dark:bg-(--red-6) dark:hover:bg-(--red-7)","text-(--red-1) dark:text-(--red-12)","border-(--red-11)",f),success:d("border shadow-xs","bg-(--grass-9) hover:bg-(--grass-10) dark:bg-(--grass-6) dark:hover:bg-(--grass-7)","text-(--grass-1) dark:text-(--grass-12)","border-(--grass-11)",f),warn:d("border shadow-xs","bg-(--yellow-9) hover:bg-(--yellow-10) dark:bg-(--yellow-6) dark:hover:bg-(--yellow-7)","text-(--yellow-12)","border-(--yellow-11)",f),action:d("bg-action text-action-foreground shadow-xs","hover:bg-action-hover border border-action",f),outline:d("border border-slate-300 shadow-xs","hover:bg-accent hover:text-accent-foreground","hover:border-primary","aria-selected:text-accent-foreground aria-selected:border-primary",f),secondary:d("bg-secondary text-secondary-foreground hover:bg-secondary/80","border border-input shadow-xs",f),text:d("opacity-80 hover:opacity-100","active:opacity-100"),ghost:d("border border-transparent","hover:bg-accent hover:text-accent-foreground hover:shadow-xs",f,"active:text-accent-foreground"),link:"underline-offset-4 hover:underline text-link",linkDestructive:"underline-offset-4 hover:underline text-destructive underline-destructive",outlineDestructive:"border border-destructive text-destructive hover:bg-destructive/10"},size:{default:"h-10 py-2 px-4",xs:"h-7 px-2 rounded-md text-xs",sm:"h-9 px-3 rounded-md",lg:"h-11 px-8 rounded-md",icon:"h-6 w-6 mb-0"},disabled:{true:"opacity-50 pointer-events-none"}},defaultVariants:{variant:"default",size:"sm"}}),M=a.forwardRef((e,t)=>{let r=(0,L.c)(7),{className:n,variant:o,size:i,asChild:l,keyboardShortcut:s,...u}=e,p=l===void 0?!1:l,c=a.useRef(null),g;r[0]===Symbol.for("react.memo_cache_sentinel")?(g=()=>c.current,r[0]=g):g=r[0],a.useImperativeHandle(t,g);let b;r[1]===s?b=r[2]:(b=y=>{s&&(E.shouldIgnoreKeyboardEvent(y)||I(s)(y)&&(y.preventDefault(),y.stopPropagation(),c!=null&&c.current&&!c.current.disabled&&c.current.click()))},r[1]=s,r[2]=b),K(document,"keydown",b);let v=p?_:"button",x=d(T({variant:o,size:i,className:n,disabled:u.disabled}),n),m;return r[3]!==v||r[4]!==u||r[5]!==x?(m=(0,w.jsx)(v,{className:x,ref:c,...u}),r[3]=v,r[4]=u,r[5]=x,r[6]=m):m=r[6],m});M.displayName="Button";export{C as a,_ as i,T as n,E as r,M as t};

package/dist/assets/name-cell-input-B68Jbheu.js

@@ -1 +0,0 @@
-import{s as b}from"./chunk-LvLJmgfZ.js";import{t as L}from"./react-BGmjiNul.js";import{C as T,f as j,gt as C,ht as y,mt as F}from"./cells-CxLYaBUM.js";import{t as E}from"./compiler-runtime-DeeZ7FnK.js";import{t as H}from"./useLifecycle-CmDXEyIC.js";import{t as K}from"./jsx-runtime-DN_bIXfG.js";import{r as x}from"./button-DuYGqRtX.js";import{t as w}from"./cn-C1rgT0yh.js";import{r as _}from"./input-a7Oxxo2e.js";import{r as k}from"./dist-RKnr9SNh.js";import{r as D}from"./useTheme-DfP1CWaW.js";import{t as I}from"./tooltip-CvjcEpZC.js";import{r as M,t as P}from"./esm-B3JckBtM.js";var R=E(),g=b(L(),1),d=b(K(),1),W=[k(),M({syntaxHighlighting:!0,highlightSpecialChars:!1,history:!1,drawSelection:!1,defaultKeymap:!1,historyKeymap:!1})];const B=(0,g.memo)(i=>{let e=(0,R.c)(8),{code:a,className:r}=i,{theme:s}=D(),o;e[0]===r?o=e[1]:(o=w(r,"text-muted-foreground flex flex-col overflow-hidden"),e[0]=r,e[1]=o);let l=s==="dark"?"dark":"light",t;e[2]!==a||e[3]!==l?(t=(0,d.jsx)(P,{minHeight:"10px",theme:l,height:"100%",className:"tiny-code",editable:!1,basicSetup:!1,extensions:W,value:a}),e[2]=a,e[3]=l,e[4]=t):t=e[4];let n;return e[5]!==o||e[6]!==t?(n=(0,d.jsx)("div",{className:o,children:t}),e[5]=o,e[6]=t,e[7]=n):n=e[7],n});B.displayName="TinyCode";var N=E();const q=i=>{let e=(0,N.c)(16),a,r,s,o,l;e[0]===i?(a=e[1],r=e[2],s=e[3],o=e[4],l=e[5]):({value:l,onChange:a,placeholder:s,onEnterKey:r,...o}=i,e[0]=i,e[1]=a,e[2]=r,e[3]=s,e[4]=o,e[5]=l);let t=(0,g.useRef)(null),n=S(l,a),m;e[6]===n.onBlur?m=e[7]:(m=()=>{let c=n.onBlur,f=t.current;if(f)return f.addEventListener("blur",c),()=>{f.removeEventListener("blur",c)}},e[6]=n.onBlur,e[7]=m),H(m);let p=n.value,v=n.onChange,h;e[8]===r?h=e[9]:(h=x.onEnter(c=>{x.stopPropagation()(c),r==null||r()}),e[8]=r,e[9]=h);let u;return e[10]!==n.onChange||e[11]!==n.value||e[12]!==s||e[13]!==o||e[14]!==h?(u=(0,d.jsx)(_,{"data-testid":"cell-name-input",value:p,onChange:v,ref:t,placeholder:s,className:"shadow-none! hover:shadow-none focus:shadow-none focus-visible:shadow-none",onKeyDown:h,...o}),e[10]=n.onChange,e[11]=n.value,e[12]=s,e[13]=o,e[14]=h,e[15]=u):u=e[15],u},z=i=>{let e=(0,N.c)(13),{value:a,cellId:r,className:s}=i,{updateCellName:o}=T(),l;e[0]!==r||e[1]!==o?(l=f=>o({cellId:r,name:f}),e[0]=r,e[1]=o,e[2]=l):l=e[2];let t=S(a,l);if(y(a))return null;let n=t.focusing?"":"text-ellipsis",m;e[3]!==s||e[4]!==n?(m=w("outline-hidden border hover:border-cyan-500/40 focus:border-cyan-500/40",n,s),e[3]=s,e[4]=n,e[5]=m):m=e[5];let p=t.onChange,v=t.onBlur,h=t.onFocus,u;e[6]===Symbol.for("react.memo_cache_sentinel")?(u=x.onEnter(A),e[6]=u):u=e[6];let c;return e[7]!==t.onBlur||e[8]!==t.onChange||e[9]!==t.onFocus||e[10]!==m||e[11]!==a?(c=(0,d.jsx)(I,{content:"Click to rename",children:(0,d.jsx)("span",{className:m,contentEditable:!0,suppressContentEditableWarning:!0,onChange:p,onBlur:v,onFocus:h,onKeyDown:u,children:a})}),e[7]=t.onBlur,e[8]=t.onChange,e[9]=t.onFocus,e[10]=m,e[11]=a,e[12]=c):c=e[12],c};function S(i,e){let[a,r]=(0,g.useState)(i),[s,o]=(0,g.useState)(!1),l=t=>{if(t!==i){if(!t||y(t)){e(t);return}e(F(t,j()))}};return{value:y(a)?"":a,focusing:s,onChange:t=>{let n=t.target.value;r(C(n))},onBlur:t=>{if(t.target instanceof HTMLInputElement){let n=t.target.value;l(C(n))}else t.target instanceof HTMLSpanElement&&(l(C(t.target.innerText.trim())),t.target.scrollLeft=0,o(!1))},onFocus:()=>{o(!0)}}}function A(i){i.target instanceof HTMLElement&&i.target.blur()}export{q as n,B as r,z as t};