@lax-wp/design-system 0.14.2 → 0.14.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/components/data-display/infinite-table/body/cell/InlineEditField.cjs.js +1 -1
  2. package/dist/components/data-display/infinite-table/body/cell/InlineEditField.cjs.js.map +1 -1
  3. package/dist/components/data-display/infinite-table/body/cell/InlineEditField.es.js +0 -1
  4. package/dist/components/data-display/infinite-table/body/cell/InlineEditField.es.js.map +1 -1
  5. package/dist/components/data-display/resizable-sidebar/ResizableSidebar.cjs.js +1 -1
  6. package/dist/components/data-display/resizable-sidebar/ResizableSidebar.cjs.js.map +1 -1
  7. package/dist/components/data-display/resizable-sidebar/ResizableSidebar.es.js +25 -23
  8. package/dist/components/data-display/resizable-sidebar/ResizableSidebar.es.js.map +1 -1
  9. package/package.json +1 -1
package/dist/components/data-display/infinite-table/body/cell/InlineEditField.cjs.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),re=require("../../validateCell.cjs.js"),H=require("../../../../../constants/table.cjs.js"),ae=require("../../../../forms/date-time-field/DateTimeField.cjs.js"),ne=require("../../../../forms/select-field/SelectField.cjs.js"),oe=require("../../../../forms/toggle/Toggle.cjs.js"),ue=require("@mui/icons-material"),le=require("../../../../../_virtual/index.cjs.js"),d=require("react"),ie=require("../../context.cjs.js"),se=require("./InlineCurrencyField.cjs.js"),ce=require("./MasterDataInlineField.cjs.js"),de=require("../../../../icon/icons.generated.cjs.js"),x=new Map;let w=null,p=null;const F=t=>({target:{value:t}}),me=({cell:t,id:l,inlineEditing:v,cellRef:X,handleCellValueChange:y,registerValidation:I})=>{const{openMasterDataModal:J,selectedMasterData:k,clearSelectedMasterData:Y,getCurrencyForCell:N,getPendingEdit:M,addPendingEdit:f,onFieldOperationFlow:R,fieldOperationLoading:U}=d.useContext(ie.TableContext),Q=U===`${l}-${t?.column?.id}`,E=!!U,b=d.useCallback((a,u)=>{R&&R({value:a,fieldId:t?.column?.id,rowId:String(l),rowData:t?.row?.original,columnKey:t?.column?.key||"",flowName:t?.column?.live_field_source,isLiveField:t?.column?.is_live_field,meta:u})},[t?.column?.id,t?.column?.is_live_field,t?.column?.key,t?.column?.live_field_source,t?.row?.original,l,R]),V=()=>{const a=t?.row?.original?.__rawData,u=t?.column?.Header,r=t?.column?.key,e=u?a?.[u]?.currency_code:void 0,n=r?a?.[r]?.currency_code:void 0;return e&&e!==""?e:n&&n!==""?n:t?.column?.currencyCode||"USD"},o=t.column.key||"",_=`${l}-${o}`,W=N?.(_),z=M?.(String(l),o),[c,h]=d.useState({value:z?.value!==void 0?z.value:t.value||"",currencyCode:z?.meta?.currency_code||W||V()}),[K,D]=d.useState(null),Z=(()=>{if(v!==o)return null;const a=typeof c.value=="number"?String(c.value):c.value,u=re.validateCellValue(a,t?.column);return u.isValid?null:u.error||null})(),ee=M?.(String(l),o)?.validationError,L=K||Z||ee||null,B=d.useRef(null);d.useEffect(()=>{if(v===o&&B.current!==o){const u=N?.(`${l}-${o}`),r=M?.(String(l),o),e=r?.value!==void 0?r.value:t.value||"",n=r?.meta?.currency_code||u||V();h({value:e,currencyCode:n})}v!==o&&B.current===o&&D(null),B.current=v},[v,o,N,M,l,t.value]),d.useEffect(()=>{k&&v===o&&t?.column?.masterDataColumnName&&t?.column?.masterDataName&&(f&&f(String(l),o,{value:k.value,meta:{reference:k.reference},originalValue:t.value}),y(F(k.value)),b(k.value,{reference:k.reference}),Y?.())},[k,v,o,t?.column?.masterDataColumnName,t?.column?.masterDataName,f,l,t.value,y,b,Y]);const g=a=>t?.column?.is_required&&(a==null||a===""||typeof a=="string"&&a.trim()==="")?(D("Field required"),!1):(D(null),!0),A=a=>g(a)?a&&a.trim()!==""&&!H.REGEX.url.test(a)?(D("Invalid URL format"),!1):(D(null),!0):!1,O=a=>g(a)?a&&a.trim()!==""&&!H.REGEX.email.test(a)?(D("Email is not valid"),!1):(D(null),!0):!1,m=d.useRef(c);d.useEffect(()=>{m.current=c},[c]);const j=d.useRef(null),i=`${l}-${o}`;d.useLayoutEffect(()=>{const a=j.current;if(!a)return;const u=x.get(i);if(u){a.focus();try{a.setSelectionRange(u.start,u.end)}catch{}}else w!==i&&a.focus()},[i]);const S=d.useRef();d.useEffect(()=>()=>{S.current&&clearTimeout(S.current)},[]);const P=d.useCallback(a=>{y(F(a)),f&&f(String(l),o,{value:a,originalValue:t.value})},[y,f,l,o,t.value]),T=d.useCallback(a=>{S.current&&clearTimeout(S.current),S.current=setTimeout(()=>{P(a)},300)},[P]),q=d.useCallback(()=>{S.current&&(clearTimeout(S.current),S.current=void 0,P(String(m.current.value??"")))},[P]),$=d.useCallback(()=>{const a=t?.column?.type?.toLowerCase(),u=m.current.value;switch(a){case"url":A(String(u??""));break;case"e-mail":O(String(u??""));break;default:g(u);break}},[t?.column?.type]),G=d.useCallback(()=>{const a=t?.column?.type?.toLowerCase(),u=m.current.value,r=m.current.currencyCode;let e=!0;switch(a){case"url":e=A(String(u??""));break;case"e-mail":e=O(String(u??""));break;default:e=g(u);break}if(!e)return{isValid:!1};let n=null;return a==="currency"&&(n={currency_code:N?.(_)||r}),{isValid:!0,value:typeof u=="number"?String(u):u,meta:n}},[t?.column?.type,_,N]);d.useEffect(()=>{I&&v===o&&I(G)},[I,G,v,o]);const te=()=>{if(t?.column?.is_master_data&&t?.column?.masterDataName&&(t?.column?.masterDataColumnName||t?.column?.masterDataFormula)){const r=M?.(String(l),o),e=k?.value??r?.value??t.value;return s.jsx("div",{onMouseDown:n=>n.stopPropagation(),className:"z-[120] h-full w-full",children:s.jsx(ce.MasterDataInlineField,{id:`master-data-cell-${l}-${t.column.id}`,value:e,onChange:(n,C)=>{y(F(n)),f&&f(String(l),o,{value:n,meta:{reference:C||null},originalValue:t.value}),b(n,{reference:C||void 0}),g(n??"")},placeholder:t.column?.Header,masterDataName:t.column.masterDataName,masterDataColumnName:t.column.masterDataColumnName,masterDataFormula:t.column.masterDataFormula,masterDataFilters:t.column.masterDataFilters,onOpenMasterDataModal:J,reference:r?.meta?.reference})})}const a=t?.column?.type?.toLowerCase(),u=o?t?.row?.original?.__cellMetadata?.[o]:void 0;switch(a){case"choice":{const r=u?.choices??t?.column?.choices;return s.jsx("div",{onMouseDown:e=>e.stopPropagation(),children:s.jsx(ne.SelectField,{id:`select-cell-${l}-${t.column.id}`,value:c.value||null,selectOptions:r?.map(e=>({label:e,value:e}))||[],onChange:e=>{const n=e?Array.isArray(e)?e[0]?.value?.toString()||"":e?.value?.toString()||"":"";h(C=>({...C,value:n})),y(F(n)),f&&f(String(l),o,{value:n,originalValue:t.value}),b(n),g(n)},allowClear:!0,inputStyles:{height:"var(--row-height)",border:"none",boxShadow:"0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)"},className:"z-[120]"})})}case"datetime":case"date":return s.jsx("div",{onMouseDown:r=>{r.stopPropagation(),r.target.tagName!=="INPUT"&&r.preventDefault()},children:s.jsx(ae.DateTimeField,{id:`date-cell-${l}-${t.column.id}`,value:c.value||void 0,handleOnChange:r=>{const e=r||"";h(n=>({...n,value:e})),y(F(e)),f&&f(String(l),o,{value:e,originalValue:t.value}),b(e),g(e)},showTime:a==="datetime",dateFormat:a==="date"?"MM/DD/YYYY":void 0,className:"z-[120] w-full"})});case"currency":{const r=V();return s.jsx("div",{onMouseDown:e=>e.stopPropagation(),className:"z-[120] h-full w-full",children:s.jsx(se.InlineCurrencyField,{id:_,value:String(c.value??""),onChange:(e,n)=>{h(C=>({value:e,currencyCode:n||C.currencyCode})),y(F(e)),f&&f(String(l),o,{value:e,meta:{currency_code:n},originalValue:t.value,originalMeta:{currency_code:r}}),g(e),b(e,{currency_code:n})},currencyCode:c.currencyCode,inputStyle:{height:"var(--row-height)",border:"none",boxShadow:"0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)"},autoFocus:!0,disabled:E})})}case"percentage":return s.jsxs("label",{className:"relative block h-full",onMouseDown:r=>r.stopPropagation(),children:[s.jsx("input",{ref:j,type:"number",defaultValue:String(c.value??""),onChange:r=>{try{x.set(i,{start:r.target.selectionStart??0,end:r.target.selectionEnd??0})}catch{}const e=r.target.value;h(n=>({...n,value:e})),m.current={...m.current,value:e},p=i,g(e),T(e)},onBlur:()=>{w=i,x.delete(i),q(),$(),p===i&&(p=null,b(m.current.value)),requestAnimationFrame(()=>{w=null})},onKeyDown:r=>{r.stopPropagation()},className:"border border-gray-300 h-full text-gray-900 dark:bg-black-800 dark:text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 dark:focus:ring-white dark:focus:border-white block w-full px-2.5 py-1.5 font-inter font-medium disabled:bg-neutral-50 dark:disabled:!bg-black-800 dark:disabled:placeholder:!text-black-400",id:`percentage-cell-${l}-${t.column.id}`,style:{height:"var(--row-height)",border:"none",boxShadow:"0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)"},autoComplete:"off",disabled:E}),s.jsx("span",{className:"absolute inset-y-0 right-3 flex items-center pointer-events-none h-full dark:text-black-100",children:"%"})]});case"boolean":{const r=c.value===!0||c.value==="true"||c.value==="Yes"||c.value==="True"||c.value===1;return s.jsx("div",{onMouseDown:e=>e.stopPropagation(),className:"h-full w-full flex items-center px-2.5 bg-white dark:bg-black-800 rounded border-2 focus:outline-primary-600 border border-primary-600 dark:border-black-700 z-[120]",children:s.jsx(oe.Toggle,{id:`toggle-cell-${l}-${t.column.id}`,isChecked:r,onChange:e=>{h(n=>({...n,value:e})),y(F(e)),f&&f(String(l),o,{value:e,originalValue:t.value}),b(e)},hideStatus:!1,labelDirection:"right",stopClickPropagation:!0,statusText:r?"Yes":"No"})})}case"url":return s.jsx("input",{ref:j,type:"url",defaultValue:String(c.value??""),onChange:r=>{x.set(i,{start:r.target.selectionStart??0,end:r.target.selectionEnd??0});const e=r.target.value;h(n=>({...n,value:e})),m.current={...m.current,value:e},p=i,K?A(e):g(e),T(e)},onBlur:()=>{w=i,x.delete(i),q(),$(),p===i&&(p=null,b(m.current.value)),requestAnimationFrame(()=>{w=null})},onKeyDown:r=>{r.stopPropagation()},onMouseDown:r=>r.stopPropagation(),className:"text-neutral-900 dark:text-white dark:bg-black-800 text-base font-medium h-full font-inter overflow-hidden whitespace-nowrap text-ellipsis px-2.5 py-1 w-full border rounded focus:outline-primary-600 dark:focus:outline-white z-[120] shadow-xl disabled:bg-neutral-50 dark:disabled:!bg-black-800",style:{height:"var(--row-height)"},disabled:E});case"e-mail":return s.jsx("input",{ref:j,type:"email",defaultValue:String(c.value??""),onChange:r=>{try{x.set(i,{start:r.target.selectionStart??0,end:r.target.selectionEnd??0})}catch{}const e=r.target.value;h(n=>({...n,value:e})),m.current={...m.current,value:e},p=i,K?O(e):g(e),T(e)},onBlur:()=>{w=i,x.delete(i),q(),$(),p===i&&(p=null,b(m.current.value)),requestAnimationFrame(()=>{w=null})},onKeyDown:r=>{r.stopPropagation()},onMouseDown:r=>r.stopPropagation(),className:"text-neutral-900 dark:text-white dark:bg-black-800 text-base font-medium h-full font-inter overflow-hidden whitespace-nowrap text-ellipsis px-2.5 py-1 w-full border rounded focus:outline-primary-600 dark:focus:outline-white z-[120] shadow-xl disabled:bg-neutral-50 dark:disabled:!bg-black-800",style:{height:"var(--row-height)"},disabled:E});default:return s.jsx("input",{ref:j,type:"text",defaultValue:String(c.value??""),onChange:r=>{x.set(i,{start:r.target.selectionStart??0,end:r.target.selectionEnd??0});const e=r.target.value;h(n=>({...n,value:e})),m.current={...m.current,value:e},p=i,g(e),T(e)},onBlur:()=>{w=i,x.delete(i),q(),$(),p===i&&(p=null,b(m.current.value)),requestAnimationFrame(()=>{w=null})},onKeyDown:r=>{r.stopPropagation()},onMouseDown:r=>r.stopPropagation(),className:"text-neutral-900 dark:text-white dark:bg-black-800 text-base font-medium h-full font-inter overflow-hidden whitespace-nowrap text-ellipsis px-2.5 py-1 w-full border rounded focus:outline-primary-600 dark:focus:outline-white z-[120] shadow-xl disabled:bg-neutral-50 dark:disabled:!bg-black-800",style:{height:"var(--row-height)"},disabled:E})}};return s.jsxs("div",{ref:X,className:"relative h-full w-full overflow-visible",children:[s.jsx("div",{className:le("border p-0.5 rounded-lg h-full",L?"border-error-600":"border-neutral-200 dark:border-black-700",E&&"pointer-events-none opacity-70"),children:te()}),!!t?.column?.is_live_field&&s.jsx("div",{className:"absolute -top-1.5 -right-1.5 bg-white dark:bg-black-800 rounded-full w-5 h-5 flex items-center justify-center border border-primary-300 dark:border-primary-600 shadow-sm z-[125]",children:Q?s.jsx(de.LoadingSpinnerIcon,{className:"text-primary-600 dark:text-white",size:8}):s.jsx(ue.BoltOutlined,{sx:{fontSize:12,color:"var(--color-primary-600)"}})}),L&&s.jsx("div",{className:"absolute top-full left-0 mt-1 text-error-600 text-xs font-medium z-[130] bg-white dark:bg-black-800 px-2 py-1 rounded shadow-lg w-full",children:L})]})};exports.InlineEditField=me;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),re=require("../../validateCell.cjs.js"),H=require("../../../../../constants/table.cjs.js"),ae=require("../../../../forms/date-time-field/DateTimeField.cjs.js"),ne=require("../../../../forms/select-field/SelectField.cjs.js"),oe=require("../../../../forms/toggle/Toggle.cjs.js"),ue=require("@mui/icons-material"),le=require("../../../../../_virtual/index.cjs.js"),d=require("react"),ie=require("../../context.cjs.js"),se=require("./InlineCurrencyField.cjs.js"),ce=require("./MasterDataInlineField.cjs.js"),de=require("../../../../icon/icons.generated.cjs.js"),h=new Map;let w=null,p=null;const F=t=>({target:{value:t}}),me=({cell:t,id:l,inlineEditing:v,cellRef:X,handleCellValueChange:y,registerValidation:I})=>{const{openMasterDataModal:J,selectedMasterData:k,clearSelectedMasterData:Y,getCurrencyForCell:N,getPendingEdit:M,addPendingEdit:f,onFieldOperationFlow:R,fieldOperationLoading:U}=d.useContext(ie.TableContext),Q=U===`${l}-${t?.column?.id}`,E=!!U,b=d.useCallback((a,u)=>{R&&R({value:a,fieldId:t?.column?.id,rowId:String(l),rowData:t?.row?.original,columnKey:t?.column?.key||"",flowName:t?.column?.live_field_source,isLiveField:t?.column?.is_live_field,meta:u})},[t?.column?.id,t?.column?.is_live_field,t?.column?.key,t?.column?.live_field_source,t?.row?.original,l,R]),V=()=>{const a=t?.row?.original?.__rawData,u=t?.column?.Header,r=t?.column?.key,e=u?a?.[u]?.currency_code:void 0,n=r?a?.[r]?.currency_code:void 0;return e&&e!==""?e:n&&n!==""?n:t?.column?.currencyCode||"USD"},o=t.column.key||"",_=`${l}-${o}`,W=N?.(_),z=M?.(String(l),o),[c,x]=d.useState({value:z?.value!==void 0?z.value:t.value||"",currencyCode:z?.meta?.currency_code||W||V()}),[K,D]=d.useState(null),Z=(()=>{if(v!==o)return null;const a=typeof c.value=="number"?String(c.value):c.value,u=re.validateCellValue(a,t?.column);return u.isValid?null:u.error||null})(),ee=M?.(String(l),o)?.validationError,L=K||Z||ee||null,B=d.useRef(null);d.useEffect(()=>{if(v===o&&B.current!==o){const u=N?.(`${l}-${o}`),r=M?.(String(l),o),e=r?.value!==void 0?r.value:t.value||"",n=r?.meta?.currency_code||u||V();x({value:e,currencyCode:n})}v!==o&&B.current===o&&D(null),B.current=v},[v,o,N,M,l,t.value]),d.useEffect(()=>{k&&v===o&&t?.column?.masterDataColumnName&&t?.column?.masterDataName&&(f&&f(String(l),o,{value:k.value,meta:{reference:k.reference},originalValue:t.value}),y(F(k.value)),b(k.value,{reference:k.reference}),Y?.())},[k,v,o,t?.column?.masterDataColumnName,t?.column?.masterDataName,f,l,t.value,y,b,Y]);const g=a=>t?.column?.is_required&&(a==null||a===""||typeof a=="string"&&a.trim()==="")?(D("Field required"),!1):(D(null),!0),A=a=>g(a)?a&&a.trim()!==""&&!H.REGEX.url.test(a)?(D("Invalid URL format"),!1):(D(null),!0):!1,O=a=>g(a)?a&&a.trim()!==""&&!H.REGEX.email.test(a)?(D("Email is not valid"),!1):(D(null),!0):!1,m=d.useRef(c);d.useEffect(()=>{m.current=c},[c]);const j=d.useRef(null),i=`${l}-${o}`;d.useLayoutEffect(()=>{const a=j.current;if(!a)return;const u=h.get(i);if(u){a.focus();try{a.setSelectionRange(u.start,u.end)}catch{}}else w!==i&&a.focus()},[i]);const S=d.useRef();d.useEffect(()=>()=>{S.current&&clearTimeout(S.current)},[]);const P=d.useCallback(a=>{y(F(a)),f&&f(String(l),o,{value:a,originalValue:t.value})},[y,f,l,o,t.value]),T=d.useCallback(a=>{S.current&&clearTimeout(S.current),S.current=setTimeout(()=>{P(a)},300)},[P]),q=d.useCallback(()=>{S.current&&(clearTimeout(S.current),S.current=void 0,P(String(m.current.value??"")))},[P]),$=d.useCallback(()=>{const a=t?.column?.type?.toLowerCase(),u=m.current.value;switch(a){case"url":A(String(u??""));break;case"e-mail":O(String(u??""));break;default:g(u);break}},[t?.column?.type]),G=d.useCallback(()=>{const a=t?.column?.type?.toLowerCase(),u=m.current.value,r=m.current.currencyCode;let e=!0;switch(a){case"url":e=A(String(u??""));break;case"e-mail":e=O(String(u??""));break;default:e=g(u);break}if(!e)return{isValid:!1};let n=null;return a==="currency"&&(n={currency_code:N?.(_)||r}),{isValid:!0,value:typeof u=="number"?String(u):u,meta:n}},[t?.column?.type,_,N]);d.useEffect(()=>{I&&v===o&&I(G)},[I,G,v,o]);const te=()=>{if(t?.column?.is_master_data&&t?.column?.masterDataName&&(t?.column?.masterDataColumnName||t?.column?.masterDataFormula)){const r=M?.(String(l),o),e=k?.value??r?.value??t.value;return s.jsx("div",{onMouseDown:n=>n.stopPropagation(),className:"z-[120] h-full w-full",children:s.jsx(ce.MasterDataInlineField,{id:`master-data-cell-${l}-${t.column.id}`,value:e,onChange:(n,C)=>{y(F(n)),f&&f(String(l),o,{value:n,meta:{reference:C||null},originalValue:t.value}),b(n,{reference:C||void 0}),g(n??"")},placeholder:t.column?.Header,masterDataName:t.column.masterDataName,masterDataColumnName:t.column.masterDataColumnName,masterDataFormula:t.column.masterDataFormula,masterDataFilters:t.column.masterDataFilters,onOpenMasterDataModal:J,reference:r?.meta?.reference})})}const a=t?.column?.type?.toLowerCase(),u=o?t?.row?.original?.__cellMetadata?.[o]:void 0;switch(a){case"choice":{const r=u?.choices??t?.column?.choices;return s.jsx("div",{onMouseDown:e=>e.stopPropagation(),children:s.jsx(ne.SelectField,{id:`select-cell-${l}-${t.column.id}`,value:c.value||null,selectOptions:r?.map(e=>({label:e,value:e}))||[],onChange:e=>{const n=e?Array.isArray(e)?e[0]?.value?.toString()||"":e?.value?.toString()||"":"";x(C=>({...C,value:n})),y(F(n)),f&&f(String(l),o,{value:n,originalValue:t.value}),b(n),g(n)},allowClear:!0,inputStyles:{height:"var(--row-height)",border:"none",boxShadow:"0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)"},className:"z-[120]"})})}case"datetime":case"date":return s.jsx("div",{onMouseDown:r=>{r.stopPropagation(),r.target.tagName!=="INPUT"&&r.preventDefault()},children:s.jsx(ae.DateTimeField,{id:`date-cell-${l}-${t.column.id}`,value:c.value||void 0,handleOnChange:r=>{const e=r||"";x(n=>({...n,value:e})),y(F(e)),f&&f(String(l),o,{value:e,originalValue:t.value}),b(e),g(e)},showTime:a==="datetime",dateFormat:a==="date"?"MM/DD/YYYY":void 0,className:"z-[120] w-full"})});case"currency":{const r=V();return s.jsx("div",{onMouseDown:e=>e.stopPropagation(),className:"z-[120] h-full w-full",children:s.jsx(se.InlineCurrencyField,{id:_,value:String(c.value??""),onChange:(e,n)=>{x(C=>({value:e,currencyCode:n||C.currencyCode})),y(F(e)),f&&f(String(l),o,{value:e,meta:{currency_code:n},originalValue:t.value,originalMeta:{currency_code:r}}),g(e),b(e,{currency_code:n})},currencyCode:c.currencyCode,inputStyle:{border:"none",boxShadow:"0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)"},autoFocus:!0,disabled:E})})}case"percentage":return s.jsxs("label",{className:"relative block h-full",onMouseDown:r=>r.stopPropagation(),children:[s.jsx("input",{ref:j,type:"number",defaultValue:String(c.value??""),onChange:r=>{try{h.set(i,{start:r.target.selectionStart??0,end:r.target.selectionEnd??0})}catch{}const e=r.target.value;x(n=>({...n,value:e})),m.current={...m.current,value:e},p=i,g(e),T(e)},onBlur:()=>{w=i,h.delete(i),q(),$(),p===i&&(p=null,b(m.current.value)),requestAnimationFrame(()=>{w=null})},onKeyDown:r=>{r.stopPropagation()},className:"border border-gray-300 h-full text-gray-900 dark:bg-black-800 dark:text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 dark:focus:ring-white dark:focus:border-white block w-full px-2.5 py-1.5 font-inter font-medium disabled:bg-neutral-50 dark:disabled:!bg-black-800 dark:disabled:placeholder:!text-black-400",id:`percentage-cell-${l}-${t.column.id}`,style:{height:"var(--row-height)",border:"none",boxShadow:"0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)"},autoComplete:"off",disabled:E}),s.jsx("span",{className:"absolute inset-y-0 right-3 flex items-center pointer-events-none h-full dark:text-black-100",children:"%"})]});case"boolean":{const r=c.value===!0||c.value==="true"||c.value==="Yes"||c.value==="True"||c.value===1;return s.jsx("div",{onMouseDown:e=>e.stopPropagation(),className:"h-full w-full flex items-center px-2.5 bg-white dark:bg-black-800 rounded border-2 focus:outline-primary-600 border border-primary-600 dark:border-black-700 z-[120]",children:s.jsx(oe.Toggle,{id:`toggle-cell-${l}-${t.column.id}`,isChecked:r,onChange:e=>{x(n=>({...n,value:e})),y(F(e)),f&&f(String(l),o,{value:e,originalValue:t.value}),b(e)},hideStatus:!1,labelDirection:"right",stopClickPropagation:!0,statusText:r?"Yes":"No"})})}case"url":return s.jsx("input",{ref:j,type:"url",defaultValue:String(c.value??""),onChange:r=>{h.set(i,{start:r.target.selectionStart??0,end:r.target.selectionEnd??0});const e=r.target.value;x(n=>({...n,value:e})),m.current={...m.current,value:e},p=i,K?A(e):g(e),T(e)},onBlur:()=>{w=i,h.delete(i),q(),$(),p===i&&(p=null,b(m.current.value)),requestAnimationFrame(()=>{w=null})},onKeyDown:r=>{r.stopPropagation()},onMouseDown:r=>r.stopPropagation(),className:"text-neutral-900 dark:text-white dark:bg-black-800 text-base font-medium h-full font-inter overflow-hidden whitespace-nowrap text-ellipsis px-2.5 py-1 w-full border rounded focus:outline-primary-600 dark:focus:outline-white z-[120] shadow-xl disabled:bg-neutral-50 dark:disabled:!bg-black-800",style:{height:"var(--row-height)"},disabled:E});case"e-mail":return s.jsx("input",{ref:j,type:"email",defaultValue:String(c.value??""),onChange:r=>{try{h.set(i,{start:r.target.selectionStart??0,end:r.target.selectionEnd??0})}catch{}const e=r.target.value;x(n=>({...n,value:e})),m.current={...m.current,value:e},p=i,K?O(e):g(e),T(e)},onBlur:()=>{w=i,h.delete(i),q(),$(),p===i&&(p=null,b(m.current.value)),requestAnimationFrame(()=>{w=null})},onKeyDown:r=>{r.stopPropagation()},onMouseDown:r=>r.stopPropagation(),className:"text-neutral-900 dark:text-white dark:bg-black-800 text-base font-medium h-full font-inter overflow-hidden whitespace-nowrap text-ellipsis px-2.5 py-1 w-full border rounded focus:outline-primary-600 dark:focus:outline-white z-[120] shadow-xl disabled:bg-neutral-50 dark:disabled:!bg-black-800",style:{height:"var(--row-height)"},disabled:E});default:return s.jsx("input",{ref:j,type:"text",defaultValue:String(c.value??""),onChange:r=>{h.set(i,{start:r.target.selectionStart??0,end:r.target.selectionEnd??0});const e=r.target.value;x(n=>({...n,value:e})),m.current={...m.current,value:e},p=i,g(e),T(e)},onBlur:()=>{w=i,h.delete(i),q(),$(),p===i&&(p=null,b(m.current.value)),requestAnimationFrame(()=>{w=null})},onKeyDown:r=>{r.stopPropagation()},onMouseDown:r=>r.stopPropagation(),className:"text-neutral-900 dark:text-white dark:bg-black-800 text-base font-medium h-full font-inter overflow-hidden whitespace-nowrap text-ellipsis px-2.5 py-1 w-full border rounded focus:outline-primary-600 dark:focus:outline-white z-[120] shadow-xl disabled:bg-neutral-50 dark:disabled:!bg-black-800",style:{height:"var(--row-height)"},disabled:E})}};return s.jsxs("div",{ref:X,className:"relative h-full w-full overflow-visible",children:[s.jsx("div",{className:le("border p-0.5 rounded-lg h-full",L?"border-error-600":"border-neutral-200 dark:border-black-700",E&&"pointer-events-none opacity-70"),children:te()}),!!t?.column?.is_live_field&&s.jsx("div",{className:"absolute -top-1.5 -right-1.5 bg-white dark:bg-black-800 rounded-full w-5 h-5 flex items-center justify-center border border-primary-300 dark:border-primary-600 shadow-sm z-[125]",children:Q?s.jsx(de.LoadingSpinnerIcon,{className:"text-primary-600 dark:text-white",size:8}):s.jsx(ue.BoltOutlined,{sx:{fontSize:12,color:"var(--color-primary-600)"}})}),L&&s.jsx("div",{className:"absolute top-full left-0 mt-1 text-error-600 text-xs font-medium z-[130] bg-white dark:bg-black-800 px-2 py-1 rounded shadow-lg w-full",children:L})]})};exports.InlineEditField=me;
2
2
  //# sourceMappingURL=InlineEditField.cjs.js.map
package/dist/components/data-display/infinite-table/body/cell/InlineEditField.cjs.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"InlineEditField.cjs.js","sources":["../../../../../../src/components/data-display/infinite-table/body/cell/InlineEditField.tsx"],"sourcesContent":["import type { ICell, ValidateAndSaveResult } from '../../types';\nimport { validateCellValue } from '../../validateCell';\nimport { REGEX } from '../../../../../constants/table';\nimport { DateTimeField } from '../../../../forms/date-time-field/DateTimeField';\nimport { SelectField } from '../../../../forms/select-field/SelectField';\nimport { Toggle } from '../../../../forms/toggle/Toggle';\nimport { BoltOutlined } from '@mui/icons-material';\nimport cn from 'classnames';\nimport React, { useCallback, useContext, useEffect, useLayoutEffect, useRef, useState } from 'react';\n\nimport { TableContext } from '../../context';\nimport { InlineCurrencyField } from './InlineCurrencyField';\nimport { MasterDataInlineField } from './MasterDataInlineField';\nimport { LoadingSpinnerIcon } from '../../../../icon';\n\ntype InlineEditFieldProps = {\n cell: ICell;\n id: string | number;\n inlineEditing: string | null;\n cellRef: React.RefObject<HTMLDivElement>;\n handleCellValueChange: (event: React.ChangeEvent<HTMLInputElement>) => void;\n handleUpdateCellData: (\n directValue?: string | boolean | null,\n meta?: { currency_code?: string | null; reference?: unknown | null; [key: string]: unknown | null } | null,\n ) => void;\n registerValidation?: (validateFn: () => ValidateAndSaveResult) => void;\n};\n\ntype TSelectedOption = { label: string; value: string };\ntype TSelectedOptions = TSelectedOption | TSelectedOption[] | null;\n\nconst _cursorPositionCache = new Map<string, { start: number; end: number }>();\nlet _blurringCellKey: string | null = null;\nlet _pendingFieldOpCellKey: string | null = null;\n\nconst createSyntheticChangeEvent = (value: string | number | boolean | null): React.ChangeEvent<HTMLInputElement> => {\n return {\n target: { value } as HTMLInputElement,\n } as React.ChangeEvent<HTMLInputElement>;\n};\n\nexport const InlineEditField: React.FC<InlineEditFieldProps> = ({ cell, id, inlineEditing, cellRef, handleCellValueChange, registerValidation }) => {\n const {\n openMasterDataModal,\n selectedMasterData,\n clearSelectedMasterData,\n getCurrencyForCell,\n getPendingEdit,\n addPendingEdit,\n onFieldOperationFlow,\n fieldOperationLoading,\n } = useContext(TableContext);\n\n const isFieldOperationLoading = fieldOperationLoading === `${id}-${cell?.column?.id}`;\n const isAnyFieldOperationLoading = Boolean(fieldOperationLoading);\n\n const callLiveFieldOperation = useCallback(\n (value: unknown, meta?: { reference?: unknown; currency_code?: string }) => {\n if (!onFieldOperationFlow) return;\n\n onFieldOperationFlow({\n value,\n fieldId: cell?.column?.id as string,\n rowId: String(id),\n rowData: cell?.row?.original as Record<string, unknown>,\n columnKey: (cell?.column?.key as string) || '',\n flowName: cell?.column?.live_field_source as string | undefined,\n isLiveField: cell?.column?.is_live_field as boolean | undefined,\n meta,\n });\n },\n [\n cell?.column?.id,\n cell?.column?.is_live_field,\n cell?.column?.key,\n cell?.column?.live_field_source,\n cell?.row?.original,\n id,\n onFieldOperationFlow,\n ],\n );\n\n const getCurrencyFromCell = () => {\n const rawData = cell?.row?.original?.__rawData as Record<string, Record<string, unknown>> | undefined;\n const headerKey = cell?.column?.Header as string | undefined;\n const columnKey = cell?.column?.key as string | undefined;\n\n const dataFromHeader = headerKey ? rawData?.[headerKey]?.currency_code : undefined;\n const dataFromKey = columnKey ? rawData?.[columnKey]?.currency_code : undefined;\n\n if (dataFromHeader && dataFromHeader !== '') {\n return dataFromHeader as string;\n }\n if (dataFromKey && dataFromKey !== '') {\n return dataFromKey as string;\n }\n\n return (cell?.column?.currencyCode as string) || 'USD';\n };\n\n const columnKey = (cell.column.key as string) || '';\n const currencyCellId = `${id}-${columnKey}`;\n const contextCurrency = getCurrencyForCell?.(currencyCellId);\n const initialPendingEdit = getPendingEdit?.(String(id), columnKey);\n\n const [fieldState, setFieldState] = useState<{ value: string | number | boolean | null; currencyCode: string }>({\n value: initialPendingEdit?.value !== undefined ? (initialPendingEdit.value as string | number | boolean | null) : ((cell.value as string | number | boolean | null) || ''),\n currencyCode: (initialPendingEdit?.meta?.currency_code as string) || contextCurrency || getCurrencyFromCell(),\n });\n const [validationError, setValidationError] = useState<string | null>(null);\n\n const computedValidationError = (() => {\n if (inlineEditing !== columnKey) return null;\n const valueToValidate = typeof fieldState.value === 'number' ? String(fieldState.value) : fieldState.value;\n const result = validateCellValue(valueToValidate, cell?.column as { type?: string; is_required?: boolean });\n return result.isValid ? null : result.error || null;\n })();\n\n const pendingError = getPendingEdit?.(String(id), columnKey)?.validationError;\n const displayValidationError = validationError || computedValidationError || pendingError || null;\n\n const previousInlineEditingRef = useRef<string | null>(null);\n\n useEffect(() => {\n const isEnteringEditMode = inlineEditing === columnKey && previousInlineEditingRef.current !== columnKey;\n\n if (isEnteringEditMode) {\n const currencyFromContext = getCurrencyForCell?.(`${id}-${columnKey}`);\n const pendingEdit = getPendingEdit?.(String(id), columnKey);\n const initialValue = pendingEdit?.value !== undefined ? pendingEdit.value : ((cell.value as string | boolean | null) || '');\n const initialCurrency = (pendingEdit?.meta?.currency_code as string) || currencyFromContext || getCurrencyFromCell();\n\n setFieldState({\n value: initialValue as string | number | boolean | null,\n currencyCode: initialCurrency,\n });\n }\n\n if (inlineEditing !== columnKey && previousInlineEditingRef.current === columnKey) {\n setValidationError(null);\n }\n\n previousInlineEditingRef.current = inlineEditing;\n }, [inlineEditing, columnKey, getCurrencyForCell, getPendingEdit, id, cell.value]);\n\n useEffect(() => {\n if (selectedMasterData && inlineEditing === columnKey && cell?.column?.masterDataColumnName && cell?.column?.masterDataName) {\n if (addPendingEdit) {\n addPendingEdit(String(id), columnKey, {\n value: selectedMasterData.value as string | boolean | null,\n meta: { reference: selectedMasterData.reference },\n originalValue: cell.value,\n });\n }\n handleCellValueChange(createSyntheticChangeEvent(selectedMasterData.value as string | number | boolean | null));\n callLiveFieldOperation(selectedMasterData.value, { reference: selectedMasterData.reference });\n clearSelectedMasterData?.();\n }\n }, [\n selectedMasterData,\n inlineEditing,\n columnKey,\n cell?.column?.masterDataColumnName,\n cell?.column?.masterDataName,\n addPendingEdit,\n id,\n cell.value,\n handleCellValueChange,\n callLiveFieldOperation,\n clearSelectedMasterData,\n ]);\n\n const validateRequiredField = (value: string | number | boolean | null): boolean => {\n if (cell?.column?.is_required) {\n const isEmpty = value === null || value === undefined || value === '' || (typeof value === 'string' && value.trim() === '');\n if (isEmpty) {\n setValidationError('Field required');\n return false;\n }\n }\n setValidationError(null);\n return true;\n };\n\n const validateUrlField = (value: string): boolean => {\n if (!validateRequiredField(value)) {\n return false;\n }\n if (value && value.trim() !== '' && !REGEX.url.test(value)) {\n setValidationError('Invalid URL format');\n return false;\n }\n setValidationError(null);\n return true;\n };\n\n const validateEmailField = (value: string): boolean => {\n if (!validateRequiredField(value)) {\n return false;\n }\n if (value && value.trim() !== '' && !REGEX.email.test(value)) {\n setValidationError('Email is not valid');\n return false;\n }\n setValidationError(null);\n return true;\n };\n\n const fieldStateRef = useRef(fieldState);\n useEffect(() => {\n fieldStateRef.current = fieldState;\n }, [fieldState]);\n\n const textInputRef = useRef<HTMLInputElement>(null);\n const cellEditKey = `${id}-${columnKey}`;\n\n useLayoutEffect(() => {\n const el = textInputRef.current;\n if (!el) return;\n const cached = _cursorPositionCache.get(cellEditKey);\n if (cached) {\n el.focus();\n try {\n el.setSelectionRange(cached.start, cached.end);\n } catch {\n // email/number inputs may not support setSelectionRange\n }\n } else if (_blurringCellKey !== cellEditKey) {\n el.focus();\n }\n }, [cellEditKey]);\n\n const debouncedSyncTimerRef = useRef<ReturnType<typeof setTimeout>>();\n\n useEffect(() => {\n return () => {\n if (debouncedSyncTimerRef.current) clearTimeout(debouncedSyncTimerRef.current);\n };\n }, []);\n\n const syncToParent = useCallback(\n (value: string) => {\n handleCellValueChange(createSyntheticChangeEvent(value));\n if (addPendingEdit) {\n addPendingEdit(String(id), columnKey, {\n value,\n originalValue: cell.value,\n });\n }\n },\n [handleCellValueChange, addPendingEdit, id, columnKey, cell.value],\n );\n\n const debouncedSyncToParent = useCallback(\n (value: string) => {\n if (debouncedSyncTimerRef.current) clearTimeout(debouncedSyncTimerRef.current);\n debouncedSyncTimerRef.current = setTimeout(() => {\n syncToParent(value);\n }, 300);\n },\n [syncToParent],\n );\n\n const flushSyncToParent = useCallback(() => {\n if (debouncedSyncTimerRef.current) {\n clearTimeout(debouncedSyncTimerRef.current);\n debouncedSyncTimerRef.current = undefined;\n syncToParent(String(fieldStateRef.current.value ?? ''));\n }\n }, [syncToParent]);\n\n const handleBlurValidation = useCallback(() => {\n const columnType = (cell?.column?.type as string | undefined)?.toLowerCase();\n const currentValue = fieldStateRef.current.value;\n\n switch (columnType) {\n case 'url':\n validateUrlField(String(currentValue ?? ''));\n break;\n case 'e-mail':\n validateEmailField(String(currentValue ?? ''));\n break;\n default:\n validateRequiredField(currentValue);\n break;\n }\n }, [cell?.column?.type]);\n\n const validateAndGetValue = useCallback((): ValidateAndSaveResult => {\n const columnType = (cell?.column?.type as string | undefined)?.toLowerCase();\n const currentValue = fieldStateRef.current.value;\n const currentCurrency = fieldStateRef.current.currencyCode;\n\n let isValid = true;\n\n switch (columnType) {\n case 'url':\n isValid = validateUrlField(String(currentValue ?? ''));\n break;\n case 'e-mail':\n isValid = validateEmailField(String(currentValue ?? ''));\n break;\n default:\n isValid = validateRequiredField(currentValue);\n break;\n }\n\n if (!isValid) {\n return { isValid: false };\n }\n\n let meta: ValidateAndSaveResult['meta'] = null;\n if (columnType === 'currency') {\n const latestCurrency = getCurrencyForCell?.(currencyCellId) || currentCurrency;\n meta = { currency_code: latestCurrency };\n }\n\n return {\n isValid: true,\n value: (typeof currentValue === 'number' ? String(currentValue) : currentValue) as string | boolean | null,\n meta,\n };\n }, [cell?.column?.type, currencyCellId, getCurrencyForCell]);\n\n useEffect(() => {\n if (registerValidation && inlineEditing === columnKey) {\n registerValidation(validateAndGetValue);\n }\n }, [registerValidation, validateAndGetValue, inlineEditing, columnKey]);\n\n const renderFieldByType = () => {\n if (cell?.column?.is_master_data && cell?.column?.masterDataName && (cell?.column?.masterDataColumnName || cell?.column?.masterDataFormula)) {\n const currentPendingEdit = getPendingEdit?.(String(id), columnKey);\n const masterDataValue = selectedMasterData?.value ?? currentPendingEdit?.value ?? cell.value;\n\n return (\n <div onMouseDown={(e) => e.stopPropagation()} className='z-[120] h-full w-full'>\n <MasterDataInlineField\n id={`master-data-cell-${id}-${cell.column.id}`}\n value={masterDataValue as string | number | null}\n onChange={(value, reference) => {\n handleCellValueChange(createSyntheticChangeEvent(value));\n if (addPendingEdit) {\n addPendingEdit(String(id), columnKey, {\n value: value as string | boolean | null,\n meta: { reference: reference || null },\n originalValue: cell.value,\n });\n }\n callLiveFieldOperation(value, { reference: reference || undefined });\n validateRequiredField((value as string | boolean | null) ?? '');\n }}\n placeholder={cell.column?.Header as string | undefined}\n masterDataName={cell.column.masterDataName as string}\n masterDataColumnName={cell.column.masterDataColumnName as string}\n masterDataFormula={cell.column.masterDataFormula as string | undefined}\n masterDataFilters={cell.column.masterDataFilters as Record<string, unknown> | undefined}\n onOpenMasterDataModal={openMasterDataModal as never}\n reference={currentPendingEdit?.meta?.reference as Record<string, unknown> | undefined}\n />\n </div>\n );\n }\n\n const columnType = (cell?.column?.type as string | undefined)?.toLowerCase();\n const rowCellMeta = columnKey\n ? (cell?.row?.original?.__cellMetadata as Record<string, { choices?: string[] }> | undefined)?.[columnKey]\n : undefined;\n\n switch (columnType) {\n case 'choice': {\n const choices = rowCellMeta?.choices ?? (cell?.column?.choices as string[] | undefined);\n return (\n <div onMouseDown={(e) => e.stopPropagation()}>\n <SelectField\n id={`select-cell-${id}-${cell.column.id}`}\n value={fieldState.value || null}\n selectOptions={\n choices?.map((choice: string) => ({\n label: choice,\n value: choice,\n })) || []\n }\n onChange={(selectedOptions: TSelectedOptions) => {\n const value = selectedOptions\n ? Array.isArray(selectedOptions)\n ? selectedOptions[0]?.value?.toString() || ''\n : selectedOptions?.value?.toString() || ''\n : '';\n setFieldState((prev) => ({ ...prev, value }));\n handleCellValueChange(createSyntheticChangeEvent(value));\n if (addPendingEdit) {\n addPendingEdit(String(id), columnKey, {\n value,\n originalValue: cell.value,\n });\n }\n callLiveFieldOperation(value);\n validateRequiredField(value);\n }}\n allowClear={true}\n inputStyles={{\n height: 'var(--row-height)',\n border: 'none',\n boxShadow: '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',\n }}\n className='z-[120]'\n />\n </div>\n );\n }\n\n case 'datetime':\n case 'date':\n return (\n <div\n onMouseDown={(e) => {\n e.stopPropagation();\n if ((e.target as HTMLElement).tagName !== 'INPUT') {\n e.preventDefault();\n }\n }}\n >\n <DateTimeField\n id={`date-cell-${id}-${cell.column.id}`}\n value={(fieldState.value as string | undefined) || undefined}\n handleOnChange={(value) => {\n const newValue = value || '';\n setFieldState((prev) => ({ ...prev, value: newValue }));\n handleCellValueChange(createSyntheticChangeEvent(newValue));\n if (addPendingEdit) {\n addPendingEdit(String(id), columnKey, {\n value: newValue,\n originalValue: cell.value,\n });\n }\n callLiveFieldOperation(newValue);\n validateRequiredField(newValue);\n }}\n showTime={columnType === 'datetime'}\n dateFormat={columnType === 'date' ? 'MM/DD/YYYY' : undefined}\n className='z-[120] w-full'\n />\n </div>\n );\n\n case 'currency': {\n const originalCurrencyCode = getCurrencyFromCell();\n return (\n <div onMouseDown={(e) => e.stopPropagation()} className='z-[120] h-full w-full'>\n <InlineCurrencyField\n id={currencyCellId}\n value={String(fieldState.value ?? '')}\n onChange={(numericValue, currency_code) => {\n setFieldState((prev) => ({\n value: numericValue,\n currencyCode: currency_code || prev.currencyCode,\n }));\n handleCellValueChange(createSyntheticChangeEvent(numericValue));\n if (addPendingEdit) {\n addPendingEdit(String(id), columnKey, {\n value: numericValue,\n meta: { currency_code },\n originalValue: cell.value,\n originalMeta: { currency_code: originalCurrencyCode },\n });\n }\n validateRequiredField(numericValue);\n callLiveFieldOperation(numericValue, { currency_code });\n }}\n currencyCode={fieldState.currencyCode}\n inputStyle={{\n height: 'var(--row-height)',\n border: 'none',\n boxShadow: '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',\n }}\n autoFocus\n disabled={isAnyFieldOperationLoading}\n />\n </div>\n );\n }\n\n case 'percentage':\n return (\n <label className='relative block h-full' onMouseDown={(e) => e.stopPropagation()}>\n <input\n ref={textInputRef}\n type='number'\n defaultValue={String(fieldState.value ?? '')}\n onChange={(e) => {\n try {\n _cursorPositionCache.set(cellEditKey, { start: e.target.selectionStart ?? 0, end: e.target.selectionEnd ?? 0 });\n } catch {\n // number inputs may not support selection\n }\n const value = e.target.value;\n setFieldState((prev) => ({ ...prev, value }));\n fieldStateRef.current = { ...fieldStateRef.current, value };\n _pendingFieldOpCellKey = cellEditKey;\n validateRequiredField(value);\n debouncedSyncToParent(value);\n }}\n onBlur={() => {\n _blurringCellKey = cellEditKey;\n _cursorPositionCache.delete(cellEditKey);\n flushSyncToParent();\n handleBlurValidation();\n if (_pendingFieldOpCellKey === cellEditKey) {\n _pendingFieldOpCellKey = null;\n callLiveFieldOperation(fieldStateRef.current.value);\n }\n requestAnimationFrame(() => {\n _blurringCellKey = null;\n });\n }}\n onKeyDown={(e) => {\n e.stopPropagation();\n }}\n className='border border-gray-300 h-full text-gray-900 dark:bg-black-800 dark:text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 dark:focus:ring-white dark:focus:border-white block w-full px-2.5 py-1.5 font-inter font-medium disabled:bg-neutral-50 dark:disabled:!bg-black-800 dark:disabled:placeholder:!text-black-400'\n id={`percentage-cell-${id}-${cell.column.id}`}\n style={{\n height: 'var(--row-height)',\n border: 'none',\n boxShadow: '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',\n }}\n autoComplete='off'\n disabled={isAnyFieldOperationLoading}\n />\n <span className='absolute inset-y-0 right-3 flex items-center pointer-events-none h-full dark:text-black-100'>%</span>\n </label>\n );\n\n case 'boolean': {\n const currentBoolValue =\n fieldState.value === true ||\n fieldState.value === 'true' ||\n fieldState.value === 'Yes' ||\n fieldState.value === 'True' ||\n fieldState.value === 1;\n\n return (\n <div\n onMouseDown={(e) => e.stopPropagation()}\n className='h-full w-full flex items-center px-2.5 bg-white dark:bg-black-800 rounded border-2 focus:outline-primary-600 border border-primary-600 dark:border-black-700 z-[120]'\n >\n <Toggle\n id={`toggle-cell-${id}-${cell.column.id}`}\n isChecked={currentBoolValue}\n onChange={(checked) => {\n setFieldState((prev) => ({ ...prev, value: checked }));\n handleCellValueChange(createSyntheticChangeEvent(checked));\n if (addPendingEdit) {\n addPendingEdit(String(id), columnKey, {\n value: checked,\n originalValue: cell.value,\n });\n }\n callLiveFieldOperation(checked);\n }}\n hideStatus={false}\n labelDirection='right'\n stopClickPropagation={true}\n statusText={currentBoolValue ? 'Yes' : 'No'}\n />\n </div>\n );\n }\n\n case 'url':\n return (\n <input\n ref={textInputRef}\n type='url'\n defaultValue={String(fieldState.value ?? '')}\n onChange={(e) => {\n _cursorPositionCache.set(cellEditKey, { start: e.target.selectionStart ?? 0, end: e.target.selectionEnd ?? 0 });\n const value = e.target.value;\n setFieldState((prev) => ({ ...prev, value }));\n fieldStateRef.current = { ...fieldStateRef.current, value };\n _pendingFieldOpCellKey = cellEditKey;\n if (validationError) {\n validateUrlField(value);\n } else {\n validateRequiredField(value);\n }\n debouncedSyncToParent(value);\n }}\n onBlur={() => {\n _blurringCellKey = cellEditKey;\n _cursorPositionCache.delete(cellEditKey);\n flushSyncToParent();\n handleBlurValidation();\n if (_pendingFieldOpCellKey === cellEditKey) {\n _pendingFieldOpCellKey = null;\n callLiveFieldOperation(fieldStateRef.current.value);\n }\n requestAnimationFrame(() => {\n _blurringCellKey = null;\n });\n }}\n onKeyDown={(e) => {\n e.stopPropagation();\n }}\n onMouseDown={(e) => e.stopPropagation()}\n className='text-neutral-900 dark:text-white dark:bg-black-800 text-base font-medium h-full font-inter overflow-hidden whitespace-nowrap text-ellipsis px-2.5 py-1 w-full border rounded focus:outline-primary-600 dark:focus:outline-white z-[120] shadow-xl disabled:bg-neutral-50 dark:disabled:!bg-black-800'\n style={{\n height: 'var(--row-height)',\n }}\n disabled={isAnyFieldOperationLoading}\n />\n );\n\n case 'e-mail':\n return (\n <input\n ref={textInputRef}\n type='email'\n defaultValue={String(fieldState.value ?? '')}\n onChange={(e) => {\n try {\n _cursorPositionCache.set(cellEditKey, { start: e.target.selectionStart ?? 0, end: e.target.selectionEnd ?? 0 });\n } catch {\n // email inputs may not support selection\n }\n const value = e.target.value;\n setFieldState((prev) => ({ ...prev, value }));\n fieldStateRef.current = { ...fieldStateRef.current, value };\n _pendingFieldOpCellKey = cellEditKey;\n if (validationError) {\n validateEmailField(value);\n } else {\n validateRequiredField(value);\n }\n debouncedSyncToParent(value);\n }}\n onBlur={() => {\n _blurringCellKey = cellEditKey;\n _cursorPositionCache.delete(cellEditKey);\n flushSyncToParent();\n handleBlurValidation();\n if (_pendingFieldOpCellKey === cellEditKey) {\n _pendingFieldOpCellKey = null;\n callLiveFieldOperation(fieldStateRef.current.value);\n }\n requestAnimationFrame(() => {\n _blurringCellKey = null;\n });\n }}\n onKeyDown={(e) => {\n e.stopPropagation();\n }}\n onMouseDown={(e) => e.stopPropagation()}\n className='text-neutral-900 dark:text-white dark:bg-black-800 text-base font-medium h-full font-inter overflow-hidden whitespace-nowrap text-ellipsis px-2.5 py-1 w-full border rounded focus:outline-primary-600 dark:focus:outline-white z-[120] shadow-xl disabled:bg-neutral-50 dark:disabled:!bg-black-800'\n style={{\n height: 'var(--row-height)',\n }}\n disabled={isAnyFieldOperationLoading}\n />\n );\n\n default:\n return (\n <input\n ref={textInputRef}\n type='text'\n defaultValue={String(fieldState.value ?? '')}\n onChange={(e) => {\n _cursorPositionCache.set(cellEditKey, { start: e.target.selectionStart ?? 0, end: e.target.selectionEnd ?? 0 });\n const value = e.target.value;\n setFieldState((prev) => ({ ...prev, value }));\n fieldStateRef.current = { ...fieldStateRef.current, value };\n _pendingFieldOpCellKey = cellEditKey;\n validateRequiredField(value);\n debouncedSyncToParent(value);\n }}\n onBlur={() => {\n _blurringCellKey = cellEditKey;\n _cursorPositionCache.delete(cellEditKey);\n flushSyncToParent();\n handleBlurValidation();\n if (_pendingFieldOpCellKey === cellEditKey) {\n _pendingFieldOpCellKey = null;\n callLiveFieldOperation(fieldStateRef.current.value);\n }\n requestAnimationFrame(() => {\n _blurringCellKey = null;\n });\n }}\n onKeyDown={(e) => {\n e.stopPropagation();\n }}\n onMouseDown={(e) => e.stopPropagation()}\n className='text-neutral-900 dark:text-white dark:bg-black-800 text-base font-medium h-full font-inter overflow-hidden whitespace-nowrap text-ellipsis px-2.5 py-1 w-full border rounded focus:outline-primary-600 dark:focus:outline-white z-[120] shadow-xl disabled:bg-neutral-50 dark:disabled:!bg-black-800'\n style={{\n height: 'var(--row-height)',\n }}\n disabled={isAnyFieldOperationLoading}\n />\n );\n }\n };\n\n return (\n <div ref={cellRef} className='relative h-full w-full overflow-visible'>\n <div\n className={cn(\n 'border p-0.5 rounded-lg h-full',\n displayValidationError ? 'border-error-600' : 'border-neutral-200 dark:border-black-700',\n isAnyFieldOperationLoading && 'pointer-events-none opacity-70',\n )}\n >\n {renderFieldByType()}\n </div>\n {Boolean(cell?.column?.is_live_field) && (\n <div className='absolute -top-1.5 -right-1.5 bg-white dark:bg-black-800 rounded-full w-5 h-5 flex items-center justify-center border border-primary-300 dark:border-primary-600 shadow-sm z-[125]'>\n {isFieldOperationLoading ? (\n <LoadingSpinnerIcon className='text-primary-600 dark:text-white' size={8} />\n ) : (\n <BoltOutlined\n sx={{\n fontSize: 12,\n color: 'var(--color-primary-600)',\n }}\n />\n )}\n </div>\n )}\n {displayValidationError && (\n <div className='absolute top-full left-0 mt-1 text-error-600 text-xs font-medium z-[130] bg-white dark:bg-black-800 px-2 py-1 rounded shadow-lg w-full'>\n {displayValidationError}\n </div>\n )}\n </div>\n );\n};\n"],"names":["_cursorPositionCache","_blurringCellKey","_pendingFieldOpCellKey","createSyntheticChangeEvent","value","InlineEditField","cell","id","inlineEditing","cellRef","handleCellValueChange","registerValidation","openMasterDataModal","selectedMasterData","clearSelectedMasterData","getCurrencyForCell","getPendingEdit","addPendingEdit","onFieldOperationFlow","fieldOperationLoading","useContext","TableContext","isFieldOperationLoading","isAnyFieldOperationLoading","callLiveFieldOperation","useCallback","meta","getCurrencyFromCell","rawData","headerKey","columnKey","dataFromHeader","dataFromKey","currencyCellId","contextCurrency","initialPendingEdit","fieldState","setFieldState","useState","validationError","setValidationError","computedValidationError","valueToValidate","result","validateCellValue","pendingError","displayValidationError","previousInlineEditingRef","useRef","useEffect","currencyFromContext","pendingEdit","initialValue","initialCurrency","validateRequiredField","validateUrlField","REGEX","validateEmailField","fieldStateRef","textInputRef","cellEditKey","useLayoutEffect","el","cached","debouncedSyncTimerRef","syncToParent","debouncedSyncToParent","flushSyncToParent","handleBlurValidation","columnType","currentValue","validateAndGetValue","currentCurrency","isValid","renderFieldByType","currentPendingEdit","masterDataValue","jsx","e","MasterDataInlineField","reference","rowCellMeta","choices","SelectField","choice","selectedOptions","prev","DateTimeField","newValue","originalCurrencyCode","InlineCurrencyField","numericValue","currency_code","jsxs","currentBoolValue","Toggle","checked","cn","LoadingSpinnerIcon","BoltOutlined"],"mappings":"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"}
1
+ {"version":3,"file":"InlineEditField.cjs.js","sources":["../../../../../../src/components/data-display/infinite-table/body/cell/InlineEditField.tsx"],"sourcesContent":["import type { ICell, ValidateAndSaveResult } from '../../types';\nimport { validateCellValue } from '../../validateCell';\nimport { REGEX } from '../../../../../constants/table';\nimport { DateTimeField } from '../../../../forms/date-time-field/DateTimeField';\nimport { SelectField } from '../../../../forms/select-field/SelectField';\nimport { Toggle } from '../../../../forms/toggle/Toggle';\nimport { BoltOutlined } from '@mui/icons-material';\nimport cn from 'classnames';\nimport React, { useCallback, useContext, useEffect, useLayoutEffect, useRef, useState } from 'react';\n\nimport { TableContext } from '../../context';\nimport { InlineCurrencyField } from './InlineCurrencyField';\nimport { MasterDataInlineField } from './MasterDataInlineField';\nimport { LoadingSpinnerIcon } from '../../../../icon';\n\ntype InlineEditFieldProps = {\n cell: ICell;\n id: string | number;\n inlineEditing: string | null;\n cellRef: React.RefObject<HTMLDivElement>;\n handleCellValueChange: (event: React.ChangeEvent<HTMLInputElement>) => void;\n handleUpdateCellData: (\n directValue?: string | boolean | null,\n meta?: { currency_code?: string | null; reference?: unknown | null; [key: string]: unknown | null } | null,\n ) => void;\n registerValidation?: (validateFn: () => ValidateAndSaveResult) => void;\n};\n\ntype TSelectedOption = { label: string; value: string };\ntype TSelectedOptions = TSelectedOption | TSelectedOption[] | null;\n\nconst _cursorPositionCache = new Map<string, { start: number; end: number }>();\nlet _blurringCellKey: string | null = null;\nlet _pendingFieldOpCellKey: string | null = null;\n\nconst createSyntheticChangeEvent = (value: string | number | boolean | null): React.ChangeEvent<HTMLInputElement> => {\n return {\n target: { value } as HTMLInputElement,\n } as React.ChangeEvent<HTMLInputElement>;\n};\n\nexport const InlineEditField: React.FC<InlineEditFieldProps> = ({ cell, id, inlineEditing, cellRef, handleCellValueChange, registerValidation }) => {\n const {\n openMasterDataModal,\n selectedMasterData,\n clearSelectedMasterData,\n getCurrencyForCell,\n getPendingEdit,\n addPendingEdit,\n onFieldOperationFlow,\n fieldOperationLoading,\n } = useContext(TableContext);\n\n const isFieldOperationLoading = fieldOperationLoading === `${id}-${cell?.column?.id}`;\n const isAnyFieldOperationLoading = Boolean(fieldOperationLoading);\n\n const callLiveFieldOperation = useCallback(\n (value: unknown, meta?: { reference?: unknown; currency_code?: string }) => {\n if (!onFieldOperationFlow) return;\n\n onFieldOperationFlow({\n value,\n fieldId: cell?.column?.id as string,\n rowId: String(id),\n rowData: cell?.row?.original as Record<string, unknown>,\n columnKey: (cell?.column?.key as string) || '',\n flowName: cell?.column?.live_field_source as string | undefined,\n isLiveField: cell?.column?.is_live_field as boolean | undefined,\n meta,\n });\n },\n [\n cell?.column?.id,\n cell?.column?.is_live_field,\n cell?.column?.key,\n cell?.column?.live_field_source,\n cell?.row?.original,\n id,\n onFieldOperationFlow,\n ],\n );\n\n const getCurrencyFromCell = () => {\n const rawData = cell?.row?.original?.__rawData as Record<string, Record<string, unknown>> | undefined;\n const headerKey = cell?.column?.Header as string | undefined;\n const columnKey = cell?.column?.key as string | undefined;\n\n const dataFromHeader = headerKey ? rawData?.[headerKey]?.currency_code : undefined;\n const dataFromKey = columnKey ? rawData?.[columnKey]?.currency_code : undefined;\n\n if (dataFromHeader && dataFromHeader !== '') {\n return dataFromHeader as string;\n }\n if (dataFromKey && dataFromKey !== '') {\n return dataFromKey as string;\n }\n\n return (cell?.column?.currencyCode as string) || 'USD';\n };\n\n const columnKey = (cell.column.key as string) || '';\n const currencyCellId = `${id}-${columnKey}`;\n const contextCurrency = getCurrencyForCell?.(currencyCellId);\n const initialPendingEdit = getPendingEdit?.(String(id), columnKey);\n\n const [fieldState, setFieldState] = useState<{ value: string | number | boolean | null; currencyCode: string }>({\n value: initialPendingEdit?.value !== undefined ? (initialPendingEdit.value as string | number | boolean | null) : ((cell.value as string | number | boolean | null) || ''),\n currencyCode: (initialPendingEdit?.meta?.currency_code as string) || contextCurrency || getCurrencyFromCell(),\n });\n const [validationError, setValidationError] = useState<string | null>(null);\n\n const computedValidationError = (() => {\n if (inlineEditing !== columnKey) return null;\n const valueToValidate = typeof fieldState.value === 'number' ? String(fieldState.value) : fieldState.value;\n const result = validateCellValue(valueToValidate, cell?.column as { type?: string; is_required?: boolean });\n return result.isValid ? null : result.error || null;\n })();\n\n const pendingError = getPendingEdit?.(String(id), columnKey)?.validationError;\n const displayValidationError = validationError || computedValidationError || pendingError || null;\n\n const previousInlineEditingRef = useRef<string | null>(null);\n\n useEffect(() => {\n const isEnteringEditMode = inlineEditing === columnKey && previousInlineEditingRef.current !== columnKey;\n\n if (isEnteringEditMode) {\n const currencyFromContext = getCurrencyForCell?.(`${id}-${columnKey}`);\n const pendingEdit = getPendingEdit?.(String(id), columnKey);\n const initialValue = pendingEdit?.value !== undefined ? pendingEdit.value : ((cell.value as string | boolean | null) || '');\n const initialCurrency = (pendingEdit?.meta?.currency_code as string) || currencyFromContext || getCurrencyFromCell();\n\n setFieldState({\n value: initialValue as string | number | boolean | null,\n currencyCode: initialCurrency,\n });\n }\n\n if (inlineEditing !== columnKey && previousInlineEditingRef.current === columnKey) {\n setValidationError(null);\n }\n\n previousInlineEditingRef.current = inlineEditing;\n }, [inlineEditing, columnKey, getCurrencyForCell, getPendingEdit, id, cell.value]);\n\n useEffect(() => {\n if (selectedMasterData && inlineEditing === columnKey && cell?.column?.masterDataColumnName && cell?.column?.masterDataName) {\n if (addPendingEdit) {\n addPendingEdit(String(id), columnKey, {\n value: selectedMasterData.value as string | boolean | null,\n meta: { reference: selectedMasterData.reference },\n originalValue: cell.value,\n });\n }\n handleCellValueChange(createSyntheticChangeEvent(selectedMasterData.value as string | number | boolean | null));\n callLiveFieldOperation(selectedMasterData.value, { reference: selectedMasterData.reference });\n clearSelectedMasterData?.();\n }\n }, [\n selectedMasterData,\n inlineEditing,\n columnKey,\n cell?.column?.masterDataColumnName,\n cell?.column?.masterDataName,\n addPendingEdit,\n id,\n cell.value,\n handleCellValueChange,\n callLiveFieldOperation,\n clearSelectedMasterData,\n ]);\n\n const validateRequiredField = (value: string | number | boolean | null): boolean => {\n if (cell?.column?.is_required) {\n const isEmpty = value === null || value === undefined || value === '' || (typeof value === 'string' && value.trim() === '');\n if (isEmpty) {\n setValidationError('Field required');\n return false;\n }\n }\n setValidationError(null);\n return true;\n };\n\n const validateUrlField = (value: string): boolean => {\n if (!validateRequiredField(value)) {\n return false;\n }\n if (value && value.trim() !== '' && !REGEX.url.test(value)) {\n setValidationError('Invalid URL format');\n return false;\n }\n setValidationError(null);\n return true;\n };\n\n const validateEmailField = (value: string): boolean => {\n if (!validateRequiredField(value)) {\n return false;\n }\n if (value && value.trim() !== '' && !REGEX.email.test(value)) {\n setValidationError('Email is not valid');\n return false;\n }\n setValidationError(null);\n return true;\n };\n\n const fieldStateRef = useRef(fieldState);\n useEffect(() => {\n fieldStateRef.current = fieldState;\n }, [fieldState]);\n\n const textInputRef = useRef<HTMLInputElement>(null);\n const cellEditKey = `${id}-${columnKey}`;\n\n useLayoutEffect(() => {\n const el = textInputRef.current;\n if (!el) return;\n const cached = _cursorPositionCache.get(cellEditKey);\n if (cached) {\n el.focus();\n try {\n el.setSelectionRange(cached.start, cached.end);\n } catch {\n // email/number inputs may not support setSelectionRange\n }\n } else if (_blurringCellKey !== cellEditKey) {\n el.focus();\n }\n }, [cellEditKey]);\n\n const debouncedSyncTimerRef = useRef<ReturnType<typeof setTimeout>>();\n\n useEffect(() => {\n return () => {\n if (debouncedSyncTimerRef.current) clearTimeout(debouncedSyncTimerRef.current);\n };\n }, []);\n\n const syncToParent = useCallback(\n (value: string) => {\n handleCellValueChange(createSyntheticChangeEvent(value));\n if (addPendingEdit) {\n addPendingEdit(String(id), columnKey, {\n value,\n originalValue: cell.value,\n });\n }\n },\n [handleCellValueChange, addPendingEdit, id, columnKey, cell.value],\n );\n\n const debouncedSyncToParent = useCallback(\n (value: string) => {\n if (debouncedSyncTimerRef.current) clearTimeout(debouncedSyncTimerRef.current);\n debouncedSyncTimerRef.current = setTimeout(() => {\n syncToParent(value);\n }, 300);\n },\n [syncToParent],\n );\n\n const flushSyncToParent = useCallback(() => {\n if (debouncedSyncTimerRef.current) {\n clearTimeout(debouncedSyncTimerRef.current);\n debouncedSyncTimerRef.current = undefined;\n syncToParent(String(fieldStateRef.current.value ?? ''));\n }\n }, [syncToParent]);\n\n const handleBlurValidation = useCallback(() => {\n const columnType = (cell?.column?.type as string | undefined)?.toLowerCase();\n const currentValue = fieldStateRef.current.value;\n\n switch (columnType) {\n case 'url':\n validateUrlField(String(currentValue ?? ''));\n break;\n case 'e-mail':\n validateEmailField(String(currentValue ?? ''));\n break;\n default:\n validateRequiredField(currentValue);\n break;\n }\n }, [cell?.column?.type]);\n\n const validateAndGetValue = useCallback((): ValidateAndSaveResult => {\n const columnType = (cell?.column?.type as string | undefined)?.toLowerCase();\n const currentValue = fieldStateRef.current.value;\n const currentCurrency = fieldStateRef.current.currencyCode;\n\n let isValid = true;\n\n switch (columnType) {\n case 'url':\n isValid = validateUrlField(String(currentValue ?? ''));\n break;\n case 'e-mail':\n isValid = validateEmailField(String(currentValue ?? ''));\n break;\n default:\n isValid = validateRequiredField(currentValue);\n break;\n }\n\n if (!isValid) {\n return { isValid: false };\n }\n\n let meta: ValidateAndSaveResult['meta'] = null;\n if (columnType === 'currency') {\n const latestCurrency = getCurrencyForCell?.(currencyCellId) || currentCurrency;\n meta = { currency_code: latestCurrency };\n }\n\n return {\n isValid: true,\n value: (typeof currentValue === 'number' ? String(currentValue) : currentValue) as string | boolean | null,\n meta,\n };\n }, [cell?.column?.type, currencyCellId, getCurrencyForCell]);\n\n useEffect(() => {\n if (registerValidation && inlineEditing === columnKey) {\n registerValidation(validateAndGetValue);\n }\n }, [registerValidation, validateAndGetValue, inlineEditing, columnKey]);\n\n const renderFieldByType = () => {\n if (cell?.column?.is_master_data && cell?.column?.masterDataName && (cell?.column?.masterDataColumnName || cell?.column?.masterDataFormula)) {\n const currentPendingEdit = getPendingEdit?.(String(id), columnKey);\n const masterDataValue = selectedMasterData?.value ?? currentPendingEdit?.value ?? cell.value;\n\n return (\n <div onMouseDown={(e) => e.stopPropagation()} className='z-[120] h-full w-full'>\n <MasterDataInlineField\n id={`master-data-cell-${id}-${cell.column.id}`}\n value={masterDataValue as string | number | null}\n onChange={(value, reference) => {\n handleCellValueChange(createSyntheticChangeEvent(value));\n if (addPendingEdit) {\n addPendingEdit(String(id), columnKey, {\n value: value as string | boolean | null,\n meta: { reference: reference || null },\n originalValue: cell.value,\n });\n }\n callLiveFieldOperation(value, { reference: reference || undefined });\n validateRequiredField((value as string | boolean | null) ?? '');\n }}\n placeholder={cell.column?.Header as string | undefined}\n masterDataName={cell.column.masterDataName as string}\n masterDataColumnName={cell.column.masterDataColumnName as string}\n masterDataFormula={cell.column.masterDataFormula as string | undefined}\n masterDataFilters={cell.column.masterDataFilters as Record<string, unknown> | undefined}\n onOpenMasterDataModal={openMasterDataModal as never}\n reference={currentPendingEdit?.meta?.reference as Record<string, unknown> | undefined}\n />\n </div>\n );\n }\n\n const columnType = (cell?.column?.type as string | undefined)?.toLowerCase();\n const rowCellMeta = columnKey\n ? (cell?.row?.original?.__cellMetadata as Record<string, { choices?: string[] }> | undefined)?.[columnKey]\n : undefined;\n\n switch (columnType) {\n case 'choice': {\n const choices = rowCellMeta?.choices ?? (cell?.column?.choices as string[] | undefined);\n return (\n <div onMouseDown={(e) => e.stopPropagation()}>\n <SelectField\n id={`select-cell-${id}-${cell.column.id}`}\n value={fieldState.value || null}\n selectOptions={\n choices?.map((choice: string) => ({\n label: choice,\n value: choice,\n })) || []\n }\n onChange={(selectedOptions: TSelectedOptions) => {\n const value = selectedOptions\n ? Array.isArray(selectedOptions)\n ? selectedOptions[0]?.value?.toString() || ''\n : selectedOptions?.value?.toString() || ''\n : '';\n setFieldState((prev) => ({ ...prev, value }));\n handleCellValueChange(createSyntheticChangeEvent(value));\n if (addPendingEdit) {\n addPendingEdit(String(id), columnKey, {\n value,\n originalValue: cell.value,\n });\n }\n callLiveFieldOperation(value);\n validateRequiredField(value);\n }}\n allowClear={true}\n inputStyles={{\n height: 'var(--row-height)',\n border: 'none',\n boxShadow: '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',\n }}\n className='z-[120]'\n />\n </div>\n );\n }\n\n case 'datetime':\n case 'date':\n return (\n <div\n onMouseDown={(e) => {\n e.stopPropagation();\n if ((e.target as HTMLElement).tagName !== 'INPUT') {\n e.preventDefault();\n }\n }}\n >\n <DateTimeField\n id={`date-cell-${id}-${cell.column.id}`}\n value={(fieldState.value as string | undefined) || undefined}\n handleOnChange={(value) => {\n const newValue = value || '';\n setFieldState((prev) => ({ ...prev, value: newValue }));\n handleCellValueChange(createSyntheticChangeEvent(newValue));\n if (addPendingEdit) {\n addPendingEdit(String(id), columnKey, {\n value: newValue,\n originalValue: cell.value,\n });\n }\n callLiveFieldOperation(newValue);\n validateRequiredField(newValue);\n }}\n showTime={columnType === 'datetime'}\n dateFormat={columnType === 'date' ? 'MM/DD/YYYY' : undefined}\n className='z-[120] w-full'\n />\n </div>\n );\n\n case 'currency': {\n const originalCurrencyCode = getCurrencyFromCell();\n return (\n <div onMouseDown={(e) => e.stopPropagation()} className='z-[120] h-full w-full'>\n <InlineCurrencyField\n id={currencyCellId}\n value={String(fieldState.value ?? '')}\n onChange={(numericValue, currency_code) => {\n setFieldState((prev) => ({\n value: numericValue,\n currencyCode: currency_code || prev.currencyCode,\n }));\n handleCellValueChange(createSyntheticChangeEvent(numericValue));\n if (addPendingEdit) {\n addPendingEdit(String(id), columnKey, {\n value: numericValue,\n meta: { currency_code },\n originalValue: cell.value,\n originalMeta: { currency_code: originalCurrencyCode },\n });\n }\n validateRequiredField(numericValue);\n callLiveFieldOperation(numericValue, { currency_code });\n }}\n currencyCode={fieldState.currencyCode}\n inputStyle={{\n border: 'none',\n boxShadow: '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',\n }}\n autoFocus\n disabled={isAnyFieldOperationLoading}\n />\n </div>\n );\n }\n\n case 'percentage':\n return (\n <label className='relative block h-full' onMouseDown={(e) => e.stopPropagation()}>\n <input\n ref={textInputRef}\n type='number'\n defaultValue={String(fieldState.value ?? '')}\n onChange={(e) => {\n try {\n _cursorPositionCache.set(cellEditKey, { start: e.target.selectionStart ?? 0, end: e.target.selectionEnd ?? 0 });\n } catch {\n // number inputs may not support selection\n }\n const value = e.target.value;\n setFieldState((prev) => ({ ...prev, value }));\n fieldStateRef.current = { ...fieldStateRef.current, value };\n _pendingFieldOpCellKey = cellEditKey;\n validateRequiredField(value);\n debouncedSyncToParent(value);\n }}\n onBlur={() => {\n _blurringCellKey = cellEditKey;\n _cursorPositionCache.delete(cellEditKey);\n flushSyncToParent();\n handleBlurValidation();\n if (_pendingFieldOpCellKey === cellEditKey) {\n _pendingFieldOpCellKey = null;\n callLiveFieldOperation(fieldStateRef.current.value);\n }\n requestAnimationFrame(() => {\n _blurringCellKey = null;\n });\n }}\n onKeyDown={(e) => {\n e.stopPropagation();\n }}\n className='border border-gray-300 h-full text-gray-900 dark:bg-black-800 dark:text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 dark:focus:ring-white dark:focus:border-white block w-full px-2.5 py-1.5 font-inter font-medium disabled:bg-neutral-50 dark:disabled:!bg-black-800 dark:disabled:placeholder:!text-black-400'\n id={`percentage-cell-${id}-${cell.column.id}`}\n style={{\n height: 'var(--row-height)',\n border: 'none',\n boxShadow: '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',\n }}\n autoComplete='off'\n disabled={isAnyFieldOperationLoading}\n />\n <span className='absolute inset-y-0 right-3 flex items-center pointer-events-none h-full dark:text-black-100'>%</span>\n </label>\n );\n\n case 'boolean': {\n const currentBoolValue =\n fieldState.value === true ||\n fieldState.value === 'true' ||\n fieldState.value === 'Yes' ||\n fieldState.value === 'True' ||\n fieldState.value === 1;\n\n return (\n <div\n onMouseDown={(e) => e.stopPropagation()}\n className='h-full w-full flex items-center px-2.5 bg-white dark:bg-black-800 rounded border-2 focus:outline-primary-600 border border-primary-600 dark:border-black-700 z-[120]'\n >\n <Toggle\n id={`toggle-cell-${id}-${cell.column.id}`}\n isChecked={currentBoolValue}\n onChange={(checked) => {\n setFieldState((prev) => ({ ...prev, value: checked }));\n handleCellValueChange(createSyntheticChangeEvent(checked));\n if (addPendingEdit) {\n addPendingEdit(String(id), columnKey, {\n value: checked,\n originalValue: cell.value,\n });\n }\n callLiveFieldOperation(checked);\n }}\n hideStatus={false}\n labelDirection='right'\n stopClickPropagation={true}\n statusText={currentBoolValue ? 'Yes' : 'No'}\n />\n </div>\n );\n }\n\n case 'url':\n return (\n <input\n ref={textInputRef}\n type='url'\n defaultValue={String(fieldState.value ?? '')}\n onChange={(e) => {\n _cursorPositionCache.set(cellEditKey, { start: e.target.selectionStart ?? 0, end: e.target.selectionEnd ?? 0 });\n const value = e.target.value;\n setFieldState((prev) => ({ ...prev, value }));\n fieldStateRef.current = { ...fieldStateRef.current, value };\n _pendingFieldOpCellKey = cellEditKey;\n if (validationError) {\n validateUrlField(value);\n } else {\n validateRequiredField(value);\n }\n debouncedSyncToParent(value);\n }}\n onBlur={() => {\n _blurringCellKey = cellEditKey;\n _cursorPositionCache.delete(cellEditKey);\n flushSyncToParent();\n handleBlurValidation();\n if (_pendingFieldOpCellKey === cellEditKey) {\n _pendingFieldOpCellKey = null;\n callLiveFieldOperation(fieldStateRef.current.value);\n }\n requestAnimationFrame(() => {\n _blurringCellKey = null;\n });\n }}\n onKeyDown={(e) => {\n e.stopPropagation();\n }}\n onMouseDown={(e) => e.stopPropagation()}\n className='text-neutral-900 dark:text-white dark:bg-black-800 text-base font-medium h-full font-inter overflow-hidden whitespace-nowrap text-ellipsis px-2.5 py-1 w-full border rounded focus:outline-primary-600 dark:focus:outline-white z-[120] shadow-xl disabled:bg-neutral-50 dark:disabled:!bg-black-800'\n style={{\n height: 'var(--row-height)',\n }}\n disabled={isAnyFieldOperationLoading}\n />\n );\n\n case 'e-mail':\n return (\n <input\n ref={textInputRef}\n type='email'\n defaultValue={String(fieldState.value ?? '')}\n onChange={(e) => {\n try {\n _cursorPositionCache.set(cellEditKey, { start: e.target.selectionStart ?? 0, end: e.target.selectionEnd ?? 0 });\n } catch {\n // email inputs may not support selection\n }\n const value = e.target.value;\n setFieldState((prev) => ({ ...prev, value }));\n fieldStateRef.current = { ...fieldStateRef.current, value };\n _pendingFieldOpCellKey = cellEditKey;\n if (validationError) {\n validateEmailField(value);\n } else {\n validateRequiredField(value);\n }\n debouncedSyncToParent(value);\n }}\n onBlur={() => {\n _blurringCellKey = cellEditKey;\n _cursorPositionCache.delete(cellEditKey);\n flushSyncToParent();\n handleBlurValidation();\n if (_pendingFieldOpCellKey === cellEditKey) {\n _pendingFieldOpCellKey = null;\n callLiveFieldOperation(fieldStateRef.current.value);\n }\n requestAnimationFrame(() => {\n _blurringCellKey = null;\n });\n }}\n onKeyDown={(e) => {\n e.stopPropagation();\n }}\n onMouseDown={(e) => e.stopPropagation()}\n className='text-neutral-900 dark:text-white dark:bg-black-800 text-base font-medium h-full font-inter overflow-hidden whitespace-nowrap text-ellipsis px-2.5 py-1 w-full border rounded focus:outline-primary-600 dark:focus:outline-white z-[120] shadow-xl disabled:bg-neutral-50 dark:disabled:!bg-black-800'\n style={{\n height: 'var(--row-height)',\n }}\n disabled={isAnyFieldOperationLoading}\n />\n );\n\n default:\n return (\n <input\n ref={textInputRef}\n type='text'\n defaultValue={String(fieldState.value ?? '')}\n onChange={(e) => {\n _cursorPositionCache.set(cellEditKey, { start: e.target.selectionStart ?? 0, end: e.target.selectionEnd ?? 0 });\n const value = e.target.value;\n setFieldState((prev) => ({ ...prev, value }));\n fieldStateRef.current = { ...fieldStateRef.current, value };\n _pendingFieldOpCellKey = cellEditKey;\n validateRequiredField(value);\n debouncedSyncToParent(value);\n }}\n onBlur={() => {\n _blurringCellKey = cellEditKey;\n _cursorPositionCache.delete(cellEditKey);\n flushSyncToParent();\n handleBlurValidation();\n if (_pendingFieldOpCellKey === cellEditKey) {\n _pendingFieldOpCellKey = null;\n callLiveFieldOperation(fieldStateRef.current.value);\n }\n requestAnimationFrame(() => {\n _blurringCellKey = null;\n });\n }}\n onKeyDown={(e) => {\n e.stopPropagation();\n }}\n onMouseDown={(e) => e.stopPropagation()}\n className='text-neutral-900 dark:text-white dark:bg-black-800 text-base font-medium h-full font-inter overflow-hidden whitespace-nowrap text-ellipsis px-2.5 py-1 w-full border rounded focus:outline-primary-600 dark:focus:outline-white z-[120] shadow-xl disabled:bg-neutral-50 dark:disabled:!bg-black-800'\n style={{\n height: 'var(--row-height)',\n }}\n disabled={isAnyFieldOperationLoading}\n />\n );\n }\n };\n\n return (\n <div ref={cellRef} className='relative h-full w-full overflow-visible'>\n <div\n className={cn(\n 'border p-0.5 rounded-lg h-full',\n displayValidationError ? 'border-error-600' : 'border-neutral-200 dark:border-black-700',\n isAnyFieldOperationLoading && 'pointer-events-none opacity-70',\n )}\n >\n {renderFieldByType()}\n </div>\n {Boolean(cell?.column?.is_live_field) && (\n <div className='absolute -top-1.5 -right-1.5 bg-white dark:bg-black-800 rounded-full w-5 h-5 flex items-center justify-center border border-primary-300 dark:border-primary-600 shadow-sm z-[125]'>\n {isFieldOperationLoading ? (\n <LoadingSpinnerIcon className='text-primary-600 dark:text-white' size={8} />\n ) : (\n <BoltOutlined\n sx={{\n fontSize: 12,\n color: 'var(--color-primary-600)',\n }}\n />\n )}\n </div>\n )}\n {displayValidationError && (\n <div className='absolute top-full left-0 mt-1 text-error-600 text-xs font-medium z-[130] bg-white dark:bg-black-800 px-2 py-1 rounded shadow-lg w-full'>\n {displayValidationError}\n </div>\n )}\n </div>\n );\n};\n"],"names":["_cursorPositionCache","_blurringCellKey","_pendingFieldOpCellKey","createSyntheticChangeEvent","value","InlineEditField","cell","id","inlineEditing","cellRef","handleCellValueChange","registerValidation","openMasterDataModal","selectedMasterData","clearSelectedMasterData","getCurrencyForCell","getPendingEdit","addPendingEdit","onFieldOperationFlow","fieldOperationLoading","useContext","TableContext","isFieldOperationLoading","isAnyFieldOperationLoading","callLiveFieldOperation","useCallback","meta","getCurrencyFromCell","rawData","headerKey","columnKey","dataFromHeader","dataFromKey","currencyCellId","contextCurrency","initialPendingEdit","fieldState","setFieldState","useState","validationError","setValidationError","computedValidationError","valueToValidate","result","validateCellValue","pendingError","displayValidationError","previousInlineEditingRef","useRef","useEffect","currencyFromContext","pendingEdit","initialValue","initialCurrency","validateRequiredField","validateUrlField","REGEX","validateEmailField","fieldStateRef","textInputRef","cellEditKey","useLayoutEffect","el","cached","debouncedSyncTimerRef","syncToParent","debouncedSyncToParent","flushSyncToParent","handleBlurValidation","columnType","currentValue","validateAndGetValue","currentCurrency","isValid","renderFieldByType","currentPendingEdit","masterDataValue","jsx","e","MasterDataInlineField","reference","rowCellMeta","choices","SelectField","choice","selectedOptions","prev","DateTimeField","newValue","originalCurrencyCode","InlineCurrencyField","numericValue","currency_code","jsxs","currentBoolValue","Toggle","checked","cn","LoadingSpinnerIcon","BoltOutlined"],"mappings":"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"}
package/dist/components/data-display/infinite-table/body/cell/InlineEditField.es.js CHANGED
@@ -265,7 +265,6 @@ const C = (t) => ({
265
265
  },
266
266
  currencyCode: c.currencyCode,
267
267
  inputStyle: {
268
- height: "var(--row-height)",
269
268
  border: "none",
270
269
  boxShadow: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)"
271
270
  },
package/dist/components/data-display/infinite-table/body/cell/InlineEditField.es.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"InlineEditField.es.js","sources":["../../../../../../src/components/data-display/infinite-table/body/cell/InlineEditField.tsx"],"sourcesContent":["import type { ICell, ValidateAndSaveResult } from '../../types';\nimport { validateCellValue } from '../../validateCell';\nimport { REGEX } from '../../../../../constants/table';\nimport { DateTimeField } from '../../../../forms/date-time-field/DateTimeField';\nimport { SelectField } from '../../../../forms/select-field/SelectField';\nimport { Toggle } from '../../../../forms/toggle/Toggle';\nimport { BoltOutlined } from '@mui/icons-material';\nimport cn from 'classnames';\nimport React, { useCallback, useContext, useEffect, useLayoutEffect, useRef, useState } from 'react';\n\nimport { TableContext } from '../../context';\nimport { InlineCurrencyField } from './InlineCurrencyField';\nimport { MasterDataInlineField } from './MasterDataInlineField';\nimport { LoadingSpinnerIcon } from '../../../../icon';\n\ntype InlineEditFieldProps = {\n cell: ICell;\n id: string | number;\n inlineEditing: string | null;\n cellRef: React.RefObject<HTMLDivElement>;\n handleCellValueChange: (event: React.ChangeEvent<HTMLInputElement>) => void;\n handleUpdateCellData: (\n directValue?: string | boolean | null,\n meta?: { currency_code?: string | null; reference?: unknown | null; [key: string]: unknown | null } | null,\n ) => void;\n registerValidation?: (validateFn: () => ValidateAndSaveResult) => void;\n};\n\ntype TSelectedOption = { label: string; value: string };\ntype TSelectedOptions = TSelectedOption | TSelectedOption[] | null;\n\nconst _cursorPositionCache = new Map<string, { start: number; end: number }>();\nlet _blurringCellKey: string | null = null;\nlet _pendingFieldOpCellKey: string | null = null;\n\nconst createSyntheticChangeEvent = (value: string | number | boolean | null): React.ChangeEvent<HTMLInputElement> => {\n return {\n target: { value } as HTMLInputElement,\n } as React.ChangeEvent<HTMLInputElement>;\n};\n\nexport const InlineEditField: React.FC<InlineEditFieldProps> = ({ cell, id, inlineEditing, cellRef, handleCellValueChange, registerValidation }) => {\n const {\n openMasterDataModal,\n selectedMasterData,\n clearSelectedMasterData,\n getCurrencyForCell,\n getPendingEdit,\n addPendingEdit,\n onFieldOperationFlow,\n fieldOperationLoading,\n } = useContext(TableContext);\n\n const isFieldOperationLoading = fieldOperationLoading === `${id}-${cell?.column?.id}`;\n const isAnyFieldOperationLoading = Boolean(fieldOperationLoading);\n\n const callLiveFieldOperation = useCallback(\n (value: unknown, meta?: { reference?: unknown; currency_code?: string }) => {\n if (!onFieldOperationFlow) return;\n\n onFieldOperationFlow({\n value,\n fieldId: cell?.column?.id as string,\n rowId: String(id),\n rowData: cell?.row?.original as Record<string, unknown>,\n columnKey: (cell?.column?.key as string) || '',\n flowName: cell?.column?.live_field_source as string | undefined,\n isLiveField: cell?.column?.is_live_field as boolean | undefined,\n meta,\n });\n },\n [\n cell?.column?.id,\n cell?.column?.is_live_field,\n cell?.column?.key,\n cell?.column?.live_field_source,\n cell?.row?.original,\n id,\n onFieldOperationFlow,\n ],\n );\n\n const getCurrencyFromCell = () => {\n const rawData = cell?.row?.original?.__rawData as Record<string, Record<string, unknown>> | undefined;\n const headerKey = cell?.column?.Header as string | undefined;\n const columnKey = cell?.column?.key as string | undefined;\n\n const dataFromHeader = headerKey ? rawData?.[headerKey]?.currency_code : undefined;\n const dataFromKey = columnKey ? rawData?.[columnKey]?.currency_code : undefined;\n\n if (dataFromHeader && dataFromHeader !== '') {\n return dataFromHeader as string;\n }\n if (dataFromKey && dataFromKey !== '') {\n return dataFromKey as string;\n }\n\n return (cell?.column?.currencyCode as string) || 'USD';\n };\n\n const columnKey = (cell.column.key as string) || '';\n const currencyCellId = `${id}-${columnKey}`;\n const contextCurrency = getCurrencyForCell?.(currencyCellId);\n const initialPendingEdit = getPendingEdit?.(String(id), columnKey);\n\n const [fieldState, setFieldState] = useState<{ value: string | number | boolean | null; currencyCode: string }>({\n value: initialPendingEdit?.value !== undefined ? (initialPendingEdit.value as string | number | boolean | null) : ((cell.value as string | number | boolean | null) || ''),\n currencyCode: (initialPendingEdit?.meta?.currency_code as string) || contextCurrency || getCurrencyFromCell(),\n });\n const [validationError, setValidationError] = useState<string | null>(null);\n\n const computedValidationError = (() => {\n if (inlineEditing !== columnKey) return null;\n const valueToValidate = typeof fieldState.value === 'number' ? String(fieldState.value) : fieldState.value;\n const result = validateCellValue(valueToValidate, cell?.column as { type?: string; is_required?: boolean });\n return result.isValid ? null : result.error || null;\n })();\n\n const pendingError = getPendingEdit?.(String(id), columnKey)?.validationError;\n const displayValidationError = validationError || computedValidationError || pendingError || null;\n\n const previousInlineEditingRef = useRef<string | null>(null);\n\n useEffect(() => {\n const isEnteringEditMode = inlineEditing === columnKey && previousInlineEditingRef.current !== columnKey;\n\n if (isEnteringEditMode) {\n const currencyFromContext = getCurrencyForCell?.(`${id}-${columnKey}`);\n const pendingEdit = getPendingEdit?.(String(id), columnKey);\n const initialValue = pendingEdit?.value !== undefined ? pendingEdit.value : ((cell.value as string | boolean | null) || '');\n const initialCurrency = (pendingEdit?.meta?.currency_code as string) || currencyFromContext || getCurrencyFromCell();\n\n setFieldState({\n value: initialValue as string | number | boolean | null,\n currencyCode: initialCurrency,\n });\n }\n\n if (inlineEditing !== columnKey && previousInlineEditingRef.current === columnKey) {\n setValidationError(null);\n }\n\n previousInlineEditingRef.current = inlineEditing;\n }, [inlineEditing, columnKey, getCurrencyForCell, getPendingEdit, id, cell.value]);\n\n useEffect(() => {\n if (selectedMasterData && inlineEditing === columnKey && cell?.column?.masterDataColumnName && cell?.column?.masterDataName) {\n if (addPendingEdit) {\n addPendingEdit(String(id), columnKey, {\n value: selectedMasterData.value as string | boolean | null,\n meta: { reference: selectedMasterData.reference },\n originalValue: cell.value,\n });\n }\n handleCellValueChange(createSyntheticChangeEvent(selectedMasterData.value as string | number | boolean | null));\n callLiveFieldOperation(selectedMasterData.value, { reference: selectedMasterData.reference });\n clearSelectedMasterData?.();\n }\n }, [\n selectedMasterData,\n inlineEditing,\n columnKey,\n cell?.column?.masterDataColumnName,\n cell?.column?.masterDataName,\n addPendingEdit,\n id,\n cell.value,\n handleCellValueChange,\n callLiveFieldOperation,\n clearSelectedMasterData,\n ]);\n\n const validateRequiredField = (value: string | number | boolean | null): boolean => {\n if (cell?.column?.is_required) {\n const isEmpty = value === null || value === undefined || value === '' || (typeof value === 'string' && value.trim() === '');\n if (isEmpty) {\n setValidationError('Field required');\n return false;\n }\n }\n setValidationError(null);\n return true;\n };\n\n const validateUrlField = (value: string): boolean => {\n if (!validateRequiredField(value)) {\n return false;\n }\n if (value && value.trim() !== '' && !REGEX.url.test(value)) {\n setValidationError('Invalid URL format');\n return false;\n }\n setValidationError(null);\n return true;\n };\n\n const validateEmailField = (value: string): boolean => {\n if (!validateRequiredField(value)) {\n return false;\n }\n if (value && value.trim() !== '' && !REGEX.email.test(value)) {\n setValidationError('Email is not valid');\n return false;\n }\n setValidationError(null);\n return true;\n };\n\n const fieldStateRef = useRef(fieldState);\n useEffect(() => {\n fieldStateRef.current = fieldState;\n }, [fieldState]);\n\n const textInputRef = useRef<HTMLInputElement>(null);\n const cellEditKey = `${id}-${columnKey}`;\n\n useLayoutEffect(() => {\n const el = textInputRef.current;\n if (!el) return;\n const cached = _cursorPositionCache.get(cellEditKey);\n if (cached) {\n el.focus();\n try {\n el.setSelectionRange(cached.start, cached.end);\n } catch {\n // email/number inputs may not support setSelectionRange\n }\n } else if (_blurringCellKey !== cellEditKey) {\n el.focus();\n }\n }, [cellEditKey]);\n\n const debouncedSyncTimerRef = useRef<ReturnType<typeof setTimeout>>();\n\n useEffect(() => {\n return () => {\n if (debouncedSyncTimerRef.current) clearTimeout(debouncedSyncTimerRef.current);\n };\n }, []);\n\n const syncToParent = useCallback(\n (value: string) => {\n handleCellValueChange(createSyntheticChangeEvent(value));\n if (addPendingEdit) {\n addPendingEdit(String(id), columnKey, {\n value,\n originalValue: cell.value,\n });\n }\n },\n [handleCellValueChange, addPendingEdit, id, columnKey, cell.value],\n );\n\n const debouncedSyncToParent = useCallback(\n (value: string) => {\n if (debouncedSyncTimerRef.current) clearTimeout(debouncedSyncTimerRef.current);\n debouncedSyncTimerRef.current = setTimeout(() => {\n syncToParent(value);\n }, 300);\n },\n [syncToParent],\n );\n\n const flushSyncToParent = useCallback(() => {\n if (debouncedSyncTimerRef.current) {\n clearTimeout(debouncedSyncTimerRef.current);\n debouncedSyncTimerRef.current = undefined;\n syncToParent(String(fieldStateRef.current.value ?? ''));\n }\n }, [syncToParent]);\n\n const handleBlurValidation = useCallback(() => {\n const columnType = (cell?.column?.type as string | undefined)?.toLowerCase();\n const currentValue = fieldStateRef.current.value;\n\n switch (columnType) {\n case 'url':\n validateUrlField(String(currentValue ?? ''));\n break;\n case 'e-mail':\n validateEmailField(String(currentValue ?? ''));\n break;\n default:\n validateRequiredField(currentValue);\n break;\n }\n }, [cell?.column?.type]);\n\n const validateAndGetValue = useCallback((): ValidateAndSaveResult => {\n const columnType = (cell?.column?.type as string | undefined)?.toLowerCase();\n const currentValue = fieldStateRef.current.value;\n const currentCurrency = fieldStateRef.current.currencyCode;\n\n let isValid = true;\n\n switch (columnType) {\n case 'url':\n isValid = validateUrlField(String(currentValue ?? ''));\n break;\n case 'e-mail':\n isValid = validateEmailField(String(currentValue ?? ''));\n break;\n default:\n isValid = validateRequiredField(currentValue);\n break;\n }\n\n if (!isValid) {\n return { isValid: false };\n }\n\n let meta: ValidateAndSaveResult['meta'] = null;\n if (columnType === 'currency') {\n const latestCurrency = getCurrencyForCell?.(currencyCellId) || currentCurrency;\n meta = { currency_code: latestCurrency };\n }\n\n return {\n isValid: true,\n value: (typeof currentValue === 'number' ? String(currentValue) : currentValue) as string | boolean | null,\n meta,\n };\n }, [cell?.column?.type, currencyCellId, getCurrencyForCell]);\n\n useEffect(() => {\n if (registerValidation && inlineEditing === columnKey) {\n registerValidation(validateAndGetValue);\n }\n }, [registerValidation, validateAndGetValue, inlineEditing, columnKey]);\n\n const renderFieldByType = () => {\n if (cell?.column?.is_master_data && cell?.column?.masterDataName && (cell?.column?.masterDataColumnName || cell?.column?.masterDataFormula)) {\n const currentPendingEdit = getPendingEdit?.(String(id), columnKey);\n const masterDataValue = selectedMasterData?.value ?? currentPendingEdit?.value ?? cell.value;\n\n return (\n <div onMouseDown={(e) => e.stopPropagation()} className='z-[120] h-full w-full'>\n <MasterDataInlineField\n id={`master-data-cell-${id}-${cell.column.id}`}\n value={masterDataValue as string | number | null}\n onChange={(value, reference) => {\n handleCellValueChange(createSyntheticChangeEvent(value));\n if (addPendingEdit) {\n addPendingEdit(String(id), columnKey, {\n value: value as string | boolean | null,\n meta: { reference: reference || null },\n originalValue: cell.value,\n });\n }\n callLiveFieldOperation(value, { reference: reference || undefined });\n validateRequiredField((value as string | boolean | null) ?? '');\n }}\n placeholder={cell.column?.Header as string | undefined}\n masterDataName={cell.column.masterDataName as string}\n masterDataColumnName={cell.column.masterDataColumnName as string}\n masterDataFormula={cell.column.masterDataFormula as string | undefined}\n masterDataFilters={cell.column.masterDataFilters as Record<string, unknown> | undefined}\n onOpenMasterDataModal={openMasterDataModal as never}\n reference={currentPendingEdit?.meta?.reference as Record<string, unknown> | undefined}\n />\n </div>\n );\n }\n\n const columnType = (cell?.column?.type as string | undefined)?.toLowerCase();\n const rowCellMeta = columnKey\n ? (cell?.row?.original?.__cellMetadata as Record<string, { choices?: string[] }> | undefined)?.[columnKey]\n : undefined;\n\n switch (columnType) {\n case 'choice': {\n const choices = rowCellMeta?.choices ?? (cell?.column?.choices as string[] | undefined);\n return (\n <div onMouseDown={(e) => e.stopPropagation()}>\n <SelectField\n id={`select-cell-${id}-${cell.column.id}`}\n value={fieldState.value || null}\n selectOptions={\n choices?.map((choice: string) => ({\n label: choice,\n value: choice,\n })) || []\n }\n onChange={(selectedOptions: TSelectedOptions) => {\n const value = selectedOptions\n ? Array.isArray(selectedOptions)\n ? selectedOptions[0]?.value?.toString() || ''\n : selectedOptions?.value?.toString() || ''\n : '';\n setFieldState((prev) => ({ ...prev, value }));\n handleCellValueChange(createSyntheticChangeEvent(value));\n if (addPendingEdit) {\n addPendingEdit(String(id), columnKey, {\n value,\n originalValue: cell.value,\n });\n }\n callLiveFieldOperation(value);\n validateRequiredField(value);\n }}\n allowClear={true}\n inputStyles={{\n height: 'var(--row-height)',\n border: 'none',\n boxShadow: '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',\n }}\n className='z-[120]'\n />\n </div>\n );\n }\n\n case 'datetime':\n case 'date':\n return (\n <div\n onMouseDown={(e) => {\n e.stopPropagation();\n if ((e.target as HTMLElement).tagName !== 'INPUT') {\n e.preventDefault();\n }\n }}\n >\n <DateTimeField\n id={`date-cell-${id}-${cell.column.id}`}\n value={(fieldState.value as string | undefined) || undefined}\n handleOnChange={(value) => {\n const newValue = value || '';\n setFieldState((prev) => ({ ...prev, value: newValue }));\n handleCellValueChange(createSyntheticChangeEvent(newValue));\n if (addPendingEdit) {\n addPendingEdit(String(id), columnKey, {\n value: newValue,\n originalValue: cell.value,\n });\n }\n callLiveFieldOperation(newValue);\n validateRequiredField(newValue);\n }}\n showTime={columnType === 'datetime'}\n dateFormat={columnType === 'date' ? 'MM/DD/YYYY' : undefined}\n className='z-[120] w-full'\n />\n </div>\n );\n\n case 'currency': {\n const originalCurrencyCode = getCurrencyFromCell();\n return (\n <div onMouseDown={(e) => e.stopPropagation()} className='z-[120] h-full w-full'>\n <InlineCurrencyField\n id={currencyCellId}\n value={String(fieldState.value ?? '')}\n onChange={(numericValue, currency_code) => {\n setFieldState((prev) => ({\n value: numericValue,\n currencyCode: currency_code || prev.currencyCode,\n }));\n handleCellValueChange(createSyntheticChangeEvent(numericValue));\n if (addPendingEdit) {\n addPendingEdit(String(id), columnKey, {\n value: numericValue,\n meta: { currency_code },\n originalValue: cell.value,\n originalMeta: { currency_code: originalCurrencyCode },\n });\n }\n validateRequiredField(numericValue);\n callLiveFieldOperation(numericValue, { currency_code });\n }}\n currencyCode={fieldState.currencyCode}\n inputStyle={{\n height: 'var(--row-height)',\n border: 'none',\n boxShadow: '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',\n }}\n autoFocus\n disabled={isAnyFieldOperationLoading}\n />\n </div>\n );\n }\n\n case 'percentage':\n return (\n <label className='relative block h-full' onMouseDown={(e) => e.stopPropagation()}>\n <input\n ref={textInputRef}\n type='number'\n defaultValue={String(fieldState.value ?? '')}\n onChange={(e) => {\n try {\n _cursorPositionCache.set(cellEditKey, { start: e.target.selectionStart ?? 0, end: e.target.selectionEnd ?? 0 });\n } catch {\n // number inputs may not support selection\n }\n const value = e.target.value;\n setFieldState((prev) => ({ ...prev, value }));\n fieldStateRef.current = { ...fieldStateRef.current, value };\n _pendingFieldOpCellKey = cellEditKey;\n validateRequiredField(value);\n debouncedSyncToParent(value);\n }}\n onBlur={() => {\n _blurringCellKey = cellEditKey;\n _cursorPositionCache.delete(cellEditKey);\n flushSyncToParent();\n handleBlurValidation();\n if (_pendingFieldOpCellKey === cellEditKey) {\n _pendingFieldOpCellKey = null;\n callLiveFieldOperation(fieldStateRef.current.value);\n }\n requestAnimationFrame(() => {\n _blurringCellKey = null;\n });\n }}\n onKeyDown={(e) => {\n e.stopPropagation();\n }}\n className='border border-gray-300 h-full text-gray-900 dark:bg-black-800 dark:text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 dark:focus:ring-white dark:focus:border-white block w-full px-2.5 py-1.5 font-inter font-medium disabled:bg-neutral-50 dark:disabled:!bg-black-800 dark:disabled:placeholder:!text-black-400'\n id={`percentage-cell-${id}-${cell.column.id}`}\n style={{\n height: 'var(--row-height)',\n border: 'none',\n boxShadow: '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',\n }}\n autoComplete='off'\n disabled={isAnyFieldOperationLoading}\n />\n <span className='absolute inset-y-0 right-3 flex items-center pointer-events-none h-full dark:text-black-100'>%</span>\n </label>\n );\n\n case 'boolean': {\n const currentBoolValue =\n fieldState.value === true ||\n fieldState.value === 'true' ||\n fieldState.value === 'Yes' ||\n fieldState.value === 'True' ||\n fieldState.value === 1;\n\n return (\n <div\n onMouseDown={(e) => e.stopPropagation()}\n className='h-full w-full flex items-center px-2.5 bg-white dark:bg-black-800 rounded border-2 focus:outline-primary-600 border border-primary-600 dark:border-black-700 z-[120]'\n >\n <Toggle\n id={`toggle-cell-${id}-${cell.column.id}`}\n isChecked={currentBoolValue}\n onChange={(checked) => {\n setFieldState((prev) => ({ ...prev, value: checked }));\n handleCellValueChange(createSyntheticChangeEvent(checked));\n if (addPendingEdit) {\n addPendingEdit(String(id), columnKey, {\n value: checked,\n originalValue: cell.value,\n });\n }\n callLiveFieldOperation(checked);\n }}\n hideStatus={false}\n labelDirection='right'\n stopClickPropagation={true}\n statusText={currentBoolValue ? 'Yes' : 'No'}\n />\n </div>\n );\n }\n\n case 'url':\n return (\n <input\n ref={textInputRef}\n type='url'\n defaultValue={String(fieldState.value ?? '')}\n onChange={(e) => {\n _cursorPositionCache.set(cellEditKey, { start: e.target.selectionStart ?? 0, end: e.target.selectionEnd ?? 0 });\n const value = e.target.value;\n setFieldState((prev) => ({ ...prev, value }));\n fieldStateRef.current = { ...fieldStateRef.current, value };\n _pendingFieldOpCellKey = cellEditKey;\n if (validationError) {\n validateUrlField(value);\n } else {\n validateRequiredField(value);\n }\n debouncedSyncToParent(value);\n }}\n onBlur={() => {\n _blurringCellKey = cellEditKey;\n _cursorPositionCache.delete(cellEditKey);\n flushSyncToParent();\n handleBlurValidation();\n if (_pendingFieldOpCellKey === cellEditKey) {\n _pendingFieldOpCellKey = null;\n callLiveFieldOperation(fieldStateRef.current.value);\n }\n requestAnimationFrame(() => {\n _blurringCellKey = null;\n });\n }}\n onKeyDown={(e) => {\n e.stopPropagation();\n }}\n onMouseDown={(e) => e.stopPropagation()}\n className='text-neutral-900 dark:text-white dark:bg-black-800 text-base font-medium h-full font-inter overflow-hidden whitespace-nowrap text-ellipsis px-2.5 py-1 w-full border rounded focus:outline-primary-600 dark:focus:outline-white z-[120] shadow-xl disabled:bg-neutral-50 dark:disabled:!bg-black-800'\n style={{\n height: 'var(--row-height)',\n }}\n disabled={isAnyFieldOperationLoading}\n />\n );\n\n case 'e-mail':\n return (\n <input\n ref={textInputRef}\n type='email'\n defaultValue={String(fieldState.value ?? '')}\n onChange={(e) => {\n try {\n _cursorPositionCache.set(cellEditKey, { start: e.target.selectionStart ?? 0, end: e.target.selectionEnd ?? 0 });\n } catch {\n // email inputs may not support selection\n }\n const value = e.target.value;\n setFieldState((prev) => ({ ...prev, value }));\n fieldStateRef.current = { ...fieldStateRef.current, value };\n _pendingFieldOpCellKey = cellEditKey;\n if (validationError) {\n validateEmailField(value);\n } else {\n validateRequiredField(value);\n }\n debouncedSyncToParent(value);\n }}\n onBlur={() => {\n _blurringCellKey = cellEditKey;\n _cursorPositionCache.delete(cellEditKey);\n flushSyncToParent();\n handleBlurValidation();\n if (_pendingFieldOpCellKey === cellEditKey) {\n _pendingFieldOpCellKey = null;\n callLiveFieldOperation(fieldStateRef.current.value);\n }\n requestAnimationFrame(() => {\n _blurringCellKey = null;\n });\n }}\n onKeyDown={(e) => {\n e.stopPropagation();\n }}\n onMouseDown={(e) => e.stopPropagation()}\n className='text-neutral-900 dark:text-white dark:bg-black-800 text-base font-medium h-full font-inter overflow-hidden whitespace-nowrap text-ellipsis px-2.5 py-1 w-full border rounded focus:outline-primary-600 dark:focus:outline-white z-[120] shadow-xl disabled:bg-neutral-50 dark:disabled:!bg-black-800'\n style={{\n height: 'var(--row-height)',\n }}\n disabled={isAnyFieldOperationLoading}\n />\n );\n\n default:\n return (\n <input\n ref={textInputRef}\n type='text'\n defaultValue={String(fieldState.value ?? '')}\n onChange={(e) => {\n _cursorPositionCache.set(cellEditKey, { start: e.target.selectionStart ?? 0, end: e.target.selectionEnd ?? 0 });\n const value = e.target.value;\n setFieldState((prev) => ({ ...prev, value }));\n fieldStateRef.current = { ...fieldStateRef.current, value };\n _pendingFieldOpCellKey = cellEditKey;\n validateRequiredField(value);\n debouncedSyncToParent(value);\n }}\n onBlur={() => {\n _blurringCellKey = cellEditKey;\n _cursorPositionCache.delete(cellEditKey);\n flushSyncToParent();\n handleBlurValidation();\n if (_pendingFieldOpCellKey === cellEditKey) {\n _pendingFieldOpCellKey = null;\n callLiveFieldOperation(fieldStateRef.current.value);\n }\n requestAnimationFrame(() => {\n _blurringCellKey = null;\n });\n }}\n onKeyDown={(e) => {\n e.stopPropagation();\n }}\n onMouseDown={(e) => e.stopPropagation()}\n className='text-neutral-900 dark:text-white dark:bg-black-800 text-base font-medium h-full font-inter overflow-hidden whitespace-nowrap text-ellipsis px-2.5 py-1 w-full border rounded focus:outline-primary-600 dark:focus:outline-white z-[120] shadow-xl disabled:bg-neutral-50 dark:disabled:!bg-black-800'\n style={{\n height: 'var(--row-height)',\n }}\n disabled={isAnyFieldOperationLoading}\n />\n );\n }\n };\n\n return (\n <div ref={cellRef} className='relative h-full w-full overflow-visible'>\n <div\n className={cn(\n 'border p-0.5 rounded-lg h-full',\n displayValidationError ? 'border-error-600' : 'border-neutral-200 dark:border-black-700',\n isAnyFieldOperationLoading && 'pointer-events-none opacity-70',\n )}\n >\n {renderFieldByType()}\n </div>\n {Boolean(cell?.column?.is_live_field) && (\n <div className='absolute -top-1.5 -right-1.5 bg-white dark:bg-black-800 rounded-full w-5 h-5 flex items-center justify-center border border-primary-300 dark:border-primary-600 shadow-sm z-[125]'>\n {isFieldOperationLoading ? (\n <LoadingSpinnerIcon className='text-primary-600 dark:text-white' size={8} />\n ) : (\n <BoltOutlined\n sx={{\n fontSize: 12,\n color: 'var(--color-primary-600)',\n }}\n />\n )}\n </div>\n )}\n {displayValidationError && (\n <div className='absolute top-full left-0 mt-1 text-error-600 text-xs font-medium z-[130] bg-white dark:bg-black-800 px-2 py-1 rounded shadow-lg w-full'>\n {displayValidationError}\n </div>\n )}\n </div>\n );\n};\n"],"names":["_cursorPositionCache","_blurringCellKey","_pendingFieldOpCellKey","createSyntheticChangeEvent","value","InlineEditField","cell","id","inlineEditing","cellRef","handleCellValueChange","registerValidation","openMasterDataModal","selectedMasterData","clearSelectedMasterData","getCurrencyForCell","getPendingEdit","addPendingEdit","onFieldOperationFlow","fieldOperationLoading","useContext","TableContext","isFieldOperationLoading","isAnyFieldOperationLoading","callLiveFieldOperation","useCallback","meta","getCurrencyFromCell","rawData","headerKey","columnKey","dataFromHeader","dataFromKey","currencyCellId","contextCurrency","initialPendingEdit","fieldState","setFieldState","useState","validationError","setValidationError","computedValidationError","valueToValidate","result","validateCellValue","pendingError","displayValidationError","previousInlineEditingRef","useRef","useEffect","currencyFromContext","pendingEdit","initialValue","initialCurrency","validateRequiredField","validateUrlField","REGEX","validateEmailField","fieldStateRef","textInputRef","cellEditKey","useLayoutEffect","el","cached","debouncedSyncTimerRef","syncToParent","debouncedSyncToParent","flushSyncToParent","handleBlurValidation","columnType","currentValue","validateAndGetValue","currentCurrency","isValid","renderFieldByType","currentPendingEdit","masterDataValue","jsx","e","MasterDataInlineField","reference","rowCellMeta","choices","SelectField","choice","selectedOptions","prev","DateTimeField","newValue","originalCurrencyCode","InlineCurrencyField","numericValue","currency_code","jsxs","currentBoolValue","Toggle","checked","cn","LoadingSpinnerIcon","BoltOutlined"],"mappings":"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"}
1
+ {"version":3,"file":"InlineEditField.es.js","sources":["../../../../../../src/components/data-display/infinite-table/body/cell/InlineEditField.tsx"],"sourcesContent":["import type { ICell, ValidateAndSaveResult } from '../../types';\nimport { validateCellValue } from '../../validateCell';\nimport { REGEX } from '../../../../../constants/table';\nimport { DateTimeField } from '../../../../forms/date-time-field/DateTimeField';\nimport { SelectField } from '../../../../forms/select-field/SelectField';\nimport { Toggle } from '../../../../forms/toggle/Toggle';\nimport { BoltOutlined } from '@mui/icons-material';\nimport cn from 'classnames';\nimport React, { useCallback, useContext, useEffect, useLayoutEffect, useRef, useState } from 'react';\n\nimport { TableContext } from '../../context';\nimport { InlineCurrencyField } from './InlineCurrencyField';\nimport { MasterDataInlineField } from './MasterDataInlineField';\nimport { LoadingSpinnerIcon } from '../../../../icon';\n\ntype InlineEditFieldProps = {\n cell: ICell;\n id: string | number;\n inlineEditing: string | null;\n cellRef: React.RefObject<HTMLDivElement>;\n handleCellValueChange: (event: React.ChangeEvent<HTMLInputElement>) => void;\n handleUpdateCellData: (\n directValue?: string | boolean | null,\n meta?: { currency_code?: string | null; reference?: unknown | null; [key: string]: unknown | null } | null,\n ) => void;\n registerValidation?: (validateFn: () => ValidateAndSaveResult) => void;\n};\n\ntype TSelectedOption = { label: string; value: string };\ntype TSelectedOptions = TSelectedOption | TSelectedOption[] | null;\n\nconst _cursorPositionCache = new Map<string, { start: number; end: number }>();\nlet _blurringCellKey: string | null = null;\nlet _pendingFieldOpCellKey: string | null = null;\n\nconst createSyntheticChangeEvent = (value: string | number | boolean | null): React.ChangeEvent<HTMLInputElement> => {\n return {\n target: { value } as HTMLInputElement,\n } as React.ChangeEvent<HTMLInputElement>;\n};\n\nexport const InlineEditField: React.FC<InlineEditFieldProps> = ({ cell, id, inlineEditing, cellRef, handleCellValueChange, registerValidation }) => {\n const {\n openMasterDataModal,\n selectedMasterData,\n clearSelectedMasterData,\n getCurrencyForCell,\n getPendingEdit,\n addPendingEdit,\n onFieldOperationFlow,\n fieldOperationLoading,\n } = useContext(TableContext);\n\n const isFieldOperationLoading = fieldOperationLoading === `${id}-${cell?.column?.id}`;\n const isAnyFieldOperationLoading = Boolean(fieldOperationLoading);\n\n const callLiveFieldOperation = useCallback(\n (value: unknown, meta?: { reference?: unknown; currency_code?: string }) => {\n if (!onFieldOperationFlow) return;\n\n onFieldOperationFlow({\n value,\n fieldId: cell?.column?.id as string,\n rowId: String(id),\n rowData: cell?.row?.original as Record<string, unknown>,\n columnKey: (cell?.column?.key as string) || '',\n flowName: cell?.column?.live_field_source as string | undefined,\n isLiveField: cell?.column?.is_live_field as boolean | undefined,\n meta,\n });\n },\n [\n cell?.column?.id,\n cell?.column?.is_live_field,\n cell?.column?.key,\n cell?.column?.live_field_source,\n cell?.row?.original,\n id,\n onFieldOperationFlow,\n ],\n );\n\n const getCurrencyFromCell = () => {\n const rawData = cell?.row?.original?.__rawData as Record<string, Record<string, unknown>> | undefined;\n const headerKey = cell?.column?.Header as string | undefined;\n const columnKey = cell?.column?.key as string | undefined;\n\n const dataFromHeader = headerKey ? rawData?.[headerKey]?.currency_code : undefined;\n const dataFromKey = columnKey ? rawData?.[columnKey]?.currency_code : undefined;\n\n if (dataFromHeader && dataFromHeader !== '') {\n return dataFromHeader as string;\n }\n if (dataFromKey && dataFromKey !== '') {\n return dataFromKey as string;\n }\n\n return (cell?.column?.currencyCode as string) || 'USD';\n };\n\n const columnKey = (cell.column.key as string) || '';\n const currencyCellId = `${id}-${columnKey}`;\n const contextCurrency = getCurrencyForCell?.(currencyCellId);\n const initialPendingEdit = getPendingEdit?.(String(id), columnKey);\n\n const [fieldState, setFieldState] = useState<{ value: string | number | boolean | null; currencyCode: string }>({\n value: initialPendingEdit?.value !== undefined ? (initialPendingEdit.value as string | number | boolean | null) : ((cell.value as string | number | boolean | null) || ''),\n currencyCode: (initialPendingEdit?.meta?.currency_code as string) || contextCurrency || getCurrencyFromCell(),\n });\n const [validationError, setValidationError] = useState<string | null>(null);\n\n const computedValidationError = (() => {\n if (inlineEditing !== columnKey) return null;\n const valueToValidate = typeof fieldState.value === 'number' ? String(fieldState.value) : fieldState.value;\n const result = validateCellValue(valueToValidate, cell?.column as { type?: string; is_required?: boolean });\n return result.isValid ? null : result.error || null;\n })();\n\n const pendingError = getPendingEdit?.(String(id), columnKey)?.validationError;\n const displayValidationError = validationError || computedValidationError || pendingError || null;\n\n const previousInlineEditingRef = useRef<string | null>(null);\n\n useEffect(() => {\n const isEnteringEditMode = inlineEditing === columnKey && previousInlineEditingRef.current !== columnKey;\n\n if (isEnteringEditMode) {\n const currencyFromContext = getCurrencyForCell?.(`${id}-${columnKey}`);\n const pendingEdit = getPendingEdit?.(String(id), columnKey);\n const initialValue = pendingEdit?.value !== undefined ? pendingEdit.value : ((cell.value as string | boolean | null) || '');\n const initialCurrency = (pendingEdit?.meta?.currency_code as string) || currencyFromContext || getCurrencyFromCell();\n\n setFieldState({\n value: initialValue as string | number | boolean | null,\n currencyCode: initialCurrency,\n });\n }\n\n if (inlineEditing !== columnKey && previousInlineEditingRef.current === columnKey) {\n setValidationError(null);\n }\n\n previousInlineEditingRef.current = inlineEditing;\n }, [inlineEditing, columnKey, getCurrencyForCell, getPendingEdit, id, cell.value]);\n\n useEffect(() => {\n if (selectedMasterData && inlineEditing === columnKey && cell?.column?.masterDataColumnName && cell?.column?.masterDataName) {\n if (addPendingEdit) {\n addPendingEdit(String(id), columnKey, {\n value: selectedMasterData.value as string | boolean | null,\n meta: { reference: selectedMasterData.reference },\n originalValue: cell.value,\n });\n }\n handleCellValueChange(createSyntheticChangeEvent(selectedMasterData.value as string | number | boolean | null));\n callLiveFieldOperation(selectedMasterData.value, { reference: selectedMasterData.reference });\n clearSelectedMasterData?.();\n }\n }, [\n selectedMasterData,\n inlineEditing,\n columnKey,\n cell?.column?.masterDataColumnName,\n cell?.column?.masterDataName,\n addPendingEdit,\n id,\n cell.value,\n handleCellValueChange,\n callLiveFieldOperation,\n clearSelectedMasterData,\n ]);\n\n const validateRequiredField = (value: string | number | boolean | null): boolean => {\n if (cell?.column?.is_required) {\n const isEmpty = value === null || value === undefined || value === '' || (typeof value === 'string' && value.trim() === '');\n if (isEmpty) {\n setValidationError('Field required');\n return false;\n }\n }\n setValidationError(null);\n return true;\n };\n\n const validateUrlField = (value: string): boolean => {\n if (!validateRequiredField(value)) {\n return false;\n }\n if (value && value.trim() !== '' && !REGEX.url.test(value)) {\n setValidationError('Invalid URL format');\n return false;\n }\n setValidationError(null);\n return true;\n };\n\n const validateEmailField = (value: string): boolean => {\n if (!validateRequiredField(value)) {\n return false;\n }\n if (value && value.trim() !== '' && !REGEX.email.test(value)) {\n setValidationError('Email is not valid');\n return false;\n }\n setValidationError(null);\n return true;\n };\n\n const fieldStateRef = useRef(fieldState);\n useEffect(() => {\n fieldStateRef.current = fieldState;\n }, [fieldState]);\n\n const textInputRef = useRef<HTMLInputElement>(null);\n const cellEditKey = `${id}-${columnKey}`;\n\n useLayoutEffect(() => {\n const el = textInputRef.current;\n if (!el) return;\n const cached = _cursorPositionCache.get(cellEditKey);\n if (cached) {\n el.focus();\n try {\n el.setSelectionRange(cached.start, cached.end);\n } catch {\n // email/number inputs may not support setSelectionRange\n }\n } else if (_blurringCellKey !== cellEditKey) {\n el.focus();\n }\n }, [cellEditKey]);\n\n const debouncedSyncTimerRef = useRef<ReturnType<typeof setTimeout>>();\n\n useEffect(() => {\n return () => {\n if (debouncedSyncTimerRef.current) clearTimeout(debouncedSyncTimerRef.current);\n };\n }, []);\n\n const syncToParent = useCallback(\n (value: string) => {\n handleCellValueChange(createSyntheticChangeEvent(value));\n if (addPendingEdit) {\n addPendingEdit(String(id), columnKey, {\n value,\n originalValue: cell.value,\n });\n }\n },\n [handleCellValueChange, addPendingEdit, id, columnKey, cell.value],\n );\n\n const debouncedSyncToParent = useCallback(\n (value: string) => {\n if (debouncedSyncTimerRef.current) clearTimeout(debouncedSyncTimerRef.current);\n debouncedSyncTimerRef.current = setTimeout(() => {\n syncToParent(value);\n }, 300);\n },\n [syncToParent],\n );\n\n const flushSyncToParent = useCallback(() => {\n if (debouncedSyncTimerRef.current) {\n clearTimeout(debouncedSyncTimerRef.current);\n debouncedSyncTimerRef.current = undefined;\n syncToParent(String(fieldStateRef.current.value ?? ''));\n }\n }, [syncToParent]);\n\n const handleBlurValidation = useCallback(() => {\n const columnType = (cell?.column?.type as string | undefined)?.toLowerCase();\n const currentValue = fieldStateRef.current.value;\n\n switch (columnType) {\n case 'url':\n validateUrlField(String(currentValue ?? ''));\n break;\n case 'e-mail':\n validateEmailField(String(currentValue ?? ''));\n break;\n default:\n validateRequiredField(currentValue);\n break;\n }\n }, [cell?.column?.type]);\n\n const validateAndGetValue = useCallback((): ValidateAndSaveResult => {\n const columnType = (cell?.column?.type as string | undefined)?.toLowerCase();\n const currentValue = fieldStateRef.current.value;\n const currentCurrency = fieldStateRef.current.currencyCode;\n\n let isValid = true;\n\n switch (columnType) {\n case 'url':\n isValid = validateUrlField(String(currentValue ?? ''));\n break;\n case 'e-mail':\n isValid = validateEmailField(String(currentValue ?? ''));\n break;\n default:\n isValid = validateRequiredField(currentValue);\n break;\n }\n\n if (!isValid) {\n return { isValid: false };\n }\n\n let meta: ValidateAndSaveResult['meta'] = null;\n if (columnType === 'currency') {\n const latestCurrency = getCurrencyForCell?.(currencyCellId) || currentCurrency;\n meta = { currency_code: latestCurrency };\n }\n\n return {\n isValid: true,\n value: (typeof currentValue === 'number' ? String(currentValue) : currentValue) as string | boolean | null,\n meta,\n };\n }, [cell?.column?.type, currencyCellId, getCurrencyForCell]);\n\n useEffect(() => {\n if (registerValidation && inlineEditing === columnKey) {\n registerValidation(validateAndGetValue);\n }\n }, [registerValidation, validateAndGetValue, inlineEditing, columnKey]);\n\n const renderFieldByType = () => {\n if (cell?.column?.is_master_data && cell?.column?.masterDataName && (cell?.column?.masterDataColumnName || cell?.column?.masterDataFormula)) {\n const currentPendingEdit = getPendingEdit?.(String(id), columnKey);\n const masterDataValue = selectedMasterData?.value ?? currentPendingEdit?.value ?? cell.value;\n\n return (\n <div onMouseDown={(e) => e.stopPropagation()} className='z-[120] h-full w-full'>\n <MasterDataInlineField\n id={`master-data-cell-${id}-${cell.column.id}`}\n value={masterDataValue as string | number | null}\n onChange={(value, reference) => {\n handleCellValueChange(createSyntheticChangeEvent(value));\n if (addPendingEdit) {\n addPendingEdit(String(id), columnKey, {\n value: value as string | boolean | null,\n meta: { reference: reference || null },\n originalValue: cell.value,\n });\n }\n callLiveFieldOperation(value, { reference: reference || undefined });\n validateRequiredField((value as string | boolean | null) ?? '');\n }}\n placeholder={cell.column?.Header as string | undefined}\n masterDataName={cell.column.masterDataName as string}\n masterDataColumnName={cell.column.masterDataColumnName as string}\n masterDataFormula={cell.column.masterDataFormula as string | undefined}\n masterDataFilters={cell.column.masterDataFilters as Record<string, unknown> | undefined}\n onOpenMasterDataModal={openMasterDataModal as never}\n reference={currentPendingEdit?.meta?.reference as Record<string, unknown> | undefined}\n />\n </div>\n );\n }\n\n const columnType = (cell?.column?.type as string | undefined)?.toLowerCase();\n const rowCellMeta = columnKey\n ? (cell?.row?.original?.__cellMetadata as Record<string, { choices?: string[] }> | undefined)?.[columnKey]\n : undefined;\n\n switch (columnType) {\n case 'choice': {\n const choices = rowCellMeta?.choices ?? (cell?.column?.choices as string[] | undefined);\n return (\n <div onMouseDown={(e) => e.stopPropagation()}>\n <SelectField\n id={`select-cell-${id}-${cell.column.id}`}\n value={fieldState.value || null}\n selectOptions={\n choices?.map((choice: string) => ({\n label: choice,\n value: choice,\n })) || []\n }\n onChange={(selectedOptions: TSelectedOptions) => {\n const value = selectedOptions\n ? Array.isArray(selectedOptions)\n ? selectedOptions[0]?.value?.toString() || ''\n : selectedOptions?.value?.toString() || ''\n : '';\n setFieldState((prev) => ({ ...prev, value }));\n handleCellValueChange(createSyntheticChangeEvent(value));\n if (addPendingEdit) {\n addPendingEdit(String(id), columnKey, {\n value,\n originalValue: cell.value,\n });\n }\n callLiveFieldOperation(value);\n validateRequiredField(value);\n }}\n allowClear={true}\n inputStyles={{\n height: 'var(--row-height)',\n border: 'none',\n boxShadow: '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',\n }}\n className='z-[120]'\n />\n </div>\n );\n }\n\n case 'datetime':\n case 'date':\n return (\n <div\n onMouseDown={(e) => {\n e.stopPropagation();\n if ((e.target as HTMLElement).tagName !== 'INPUT') {\n e.preventDefault();\n }\n }}\n >\n <DateTimeField\n id={`date-cell-${id}-${cell.column.id}`}\n value={(fieldState.value as string | undefined) || undefined}\n handleOnChange={(value) => {\n const newValue = value || '';\n setFieldState((prev) => ({ ...prev, value: newValue }));\n handleCellValueChange(createSyntheticChangeEvent(newValue));\n if (addPendingEdit) {\n addPendingEdit(String(id), columnKey, {\n value: newValue,\n originalValue: cell.value,\n });\n }\n callLiveFieldOperation(newValue);\n validateRequiredField(newValue);\n }}\n showTime={columnType === 'datetime'}\n dateFormat={columnType === 'date' ? 'MM/DD/YYYY' : undefined}\n className='z-[120] w-full'\n />\n </div>\n );\n\n case 'currency': {\n const originalCurrencyCode = getCurrencyFromCell();\n return (\n <div onMouseDown={(e) => e.stopPropagation()} className='z-[120] h-full w-full'>\n <InlineCurrencyField\n id={currencyCellId}\n value={String(fieldState.value ?? '')}\n onChange={(numericValue, currency_code) => {\n setFieldState((prev) => ({\n value: numericValue,\n currencyCode: currency_code || prev.currencyCode,\n }));\n handleCellValueChange(createSyntheticChangeEvent(numericValue));\n if (addPendingEdit) {\n addPendingEdit(String(id), columnKey, {\n value: numericValue,\n meta: { currency_code },\n originalValue: cell.value,\n originalMeta: { currency_code: originalCurrencyCode },\n });\n }\n validateRequiredField(numericValue);\n callLiveFieldOperation(numericValue, { currency_code });\n }}\n currencyCode={fieldState.currencyCode}\n inputStyle={{\n border: 'none',\n boxShadow: '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',\n }}\n autoFocus\n disabled={isAnyFieldOperationLoading}\n />\n </div>\n );\n }\n\n case 'percentage':\n return (\n <label className='relative block h-full' onMouseDown={(e) => e.stopPropagation()}>\n <input\n ref={textInputRef}\n type='number'\n defaultValue={String(fieldState.value ?? '')}\n onChange={(e) => {\n try {\n _cursorPositionCache.set(cellEditKey, { start: e.target.selectionStart ?? 0, end: e.target.selectionEnd ?? 0 });\n } catch {\n // number inputs may not support selection\n }\n const value = e.target.value;\n setFieldState((prev) => ({ ...prev, value }));\n fieldStateRef.current = { ...fieldStateRef.current, value };\n _pendingFieldOpCellKey = cellEditKey;\n validateRequiredField(value);\n debouncedSyncToParent(value);\n }}\n onBlur={() => {\n _blurringCellKey = cellEditKey;\n _cursorPositionCache.delete(cellEditKey);\n flushSyncToParent();\n handleBlurValidation();\n if (_pendingFieldOpCellKey === cellEditKey) {\n _pendingFieldOpCellKey = null;\n callLiveFieldOperation(fieldStateRef.current.value);\n }\n requestAnimationFrame(() => {\n _blurringCellKey = null;\n });\n }}\n onKeyDown={(e) => {\n e.stopPropagation();\n }}\n className='border border-gray-300 h-full text-gray-900 dark:bg-black-800 dark:text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 dark:focus:ring-white dark:focus:border-white block w-full px-2.5 py-1.5 font-inter font-medium disabled:bg-neutral-50 dark:disabled:!bg-black-800 dark:disabled:placeholder:!text-black-400'\n id={`percentage-cell-${id}-${cell.column.id}`}\n style={{\n height: 'var(--row-height)',\n border: 'none',\n boxShadow: '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',\n }}\n autoComplete='off'\n disabled={isAnyFieldOperationLoading}\n />\n <span className='absolute inset-y-0 right-3 flex items-center pointer-events-none h-full dark:text-black-100'>%</span>\n </label>\n );\n\n case 'boolean': {\n const currentBoolValue =\n fieldState.value === true ||\n fieldState.value === 'true' ||\n fieldState.value === 'Yes' ||\n fieldState.value === 'True' ||\n fieldState.value === 1;\n\n return (\n <div\n onMouseDown={(e) => e.stopPropagation()}\n className='h-full w-full flex items-center px-2.5 bg-white dark:bg-black-800 rounded border-2 focus:outline-primary-600 border border-primary-600 dark:border-black-700 z-[120]'\n >\n <Toggle\n id={`toggle-cell-${id}-${cell.column.id}`}\n isChecked={currentBoolValue}\n onChange={(checked) => {\n setFieldState((prev) => ({ ...prev, value: checked }));\n handleCellValueChange(createSyntheticChangeEvent(checked));\n if (addPendingEdit) {\n addPendingEdit(String(id), columnKey, {\n value: checked,\n originalValue: cell.value,\n });\n }\n callLiveFieldOperation(checked);\n }}\n hideStatus={false}\n labelDirection='right'\n stopClickPropagation={true}\n statusText={currentBoolValue ? 'Yes' : 'No'}\n />\n </div>\n );\n }\n\n case 'url':\n return (\n <input\n ref={textInputRef}\n type='url'\n defaultValue={String(fieldState.value ?? '')}\n onChange={(e) => {\n _cursorPositionCache.set(cellEditKey, { start: e.target.selectionStart ?? 0, end: e.target.selectionEnd ?? 0 });\n const value = e.target.value;\n setFieldState((prev) => ({ ...prev, value }));\n fieldStateRef.current = { ...fieldStateRef.current, value };\n _pendingFieldOpCellKey = cellEditKey;\n if (validationError) {\n validateUrlField(value);\n } else {\n validateRequiredField(value);\n }\n debouncedSyncToParent(value);\n }}\n onBlur={() => {\n _blurringCellKey = cellEditKey;\n _cursorPositionCache.delete(cellEditKey);\n flushSyncToParent();\n handleBlurValidation();\n if (_pendingFieldOpCellKey === cellEditKey) {\n _pendingFieldOpCellKey = null;\n callLiveFieldOperation(fieldStateRef.current.value);\n }\n requestAnimationFrame(() => {\n _blurringCellKey = null;\n });\n }}\n onKeyDown={(e) => {\n e.stopPropagation();\n }}\n onMouseDown={(e) => e.stopPropagation()}\n className='text-neutral-900 dark:text-white dark:bg-black-800 text-base font-medium h-full font-inter overflow-hidden whitespace-nowrap text-ellipsis px-2.5 py-1 w-full border rounded focus:outline-primary-600 dark:focus:outline-white z-[120] shadow-xl disabled:bg-neutral-50 dark:disabled:!bg-black-800'\n style={{\n height: 'var(--row-height)',\n }}\n disabled={isAnyFieldOperationLoading}\n />\n );\n\n case 'e-mail':\n return (\n <input\n ref={textInputRef}\n type='email'\n defaultValue={String(fieldState.value ?? '')}\n onChange={(e) => {\n try {\n _cursorPositionCache.set(cellEditKey, { start: e.target.selectionStart ?? 0, end: e.target.selectionEnd ?? 0 });\n } catch {\n // email inputs may not support selection\n }\n const value = e.target.value;\n setFieldState((prev) => ({ ...prev, value }));\n fieldStateRef.current = { ...fieldStateRef.current, value };\n _pendingFieldOpCellKey = cellEditKey;\n if (validationError) {\n validateEmailField(value);\n } else {\n validateRequiredField(value);\n }\n debouncedSyncToParent(value);\n }}\n onBlur={() => {\n _blurringCellKey = cellEditKey;\n _cursorPositionCache.delete(cellEditKey);\n flushSyncToParent();\n handleBlurValidation();\n if (_pendingFieldOpCellKey === cellEditKey) {\n _pendingFieldOpCellKey = null;\n callLiveFieldOperation(fieldStateRef.current.value);\n }\n requestAnimationFrame(() => {\n _blurringCellKey = null;\n });\n }}\n onKeyDown={(e) => {\n e.stopPropagation();\n }}\n onMouseDown={(e) => e.stopPropagation()}\n className='text-neutral-900 dark:text-white dark:bg-black-800 text-base font-medium h-full font-inter overflow-hidden whitespace-nowrap text-ellipsis px-2.5 py-1 w-full border rounded focus:outline-primary-600 dark:focus:outline-white z-[120] shadow-xl disabled:bg-neutral-50 dark:disabled:!bg-black-800'\n style={{\n height: 'var(--row-height)',\n }}\n disabled={isAnyFieldOperationLoading}\n />\n );\n\n default:\n return (\n <input\n ref={textInputRef}\n type='text'\n defaultValue={String(fieldState.value ?? '')}\n onChange={(e) => {\n _cursorPositionCache.set(cellEditKey, { start: e.target.selectionStart ?? 0, end: e.target.selectionEnd ?? 0 });\n const value = e.target.value;\n setFieldState((prev) => ({ ...prev, value }));\n fieldStateRef.current = { ...fieldStateRef.current, value };\n _pendingFieldOpCellKey = cellEditKey;\n validateRequiredField(value);\n debouncedSyncToParent(value);\n }}\n onBlur={() => {\n _blurringCellKey = cellEditKey;\n _cursorPositionCache.delete(cellEditKey);\n flushSyncToParent();\n handleBlurValidation();\n if (_pendingFieldOpCellKey === cellEditKey) {\n _pendingFieldOpCellKey = null;\n callLiveFieldOperation(fieldStateRef.current.value);\n }\n requestAnimationFrame(() => {\n _blurringCellKey = null;\n });\n }}\n onKeyDown={(e) => {\n e.stopPropagation();\n }}\n onMouseDown={(e) => e.stopPropagation()}\n className='text-neutral-900 dark:text-white dark:bg-black-800 text-base font-medium h-full font-inter overflow-hidden whitespace-nowrap text-ellipsis px-2.5 py-1 w-full border rounded focus:outline-primary-600 dark:focus:outline-white z-[120] shadow-xl disabled:bg-neutral-50 dark:disabled:!bg-black-800'\n style={{\n height: 'var(--row-height)',\n }}\n disabled={isAnyFieldOperationLoading}\n />\n );\n }\n };\n\n return (\n <div ref={cellRef} className='relative h-full w-full overflow-visible'>\n <div\n className={cn(\n 'border p-0.5 rounded-lg h-full',\n displayValidationError ? 'border-error-600' : 'border-neutral-200 dark:border-black-700',\n isAnyFieldOperationLoading && 'pointer-events-none opacity-70',\n )}\n >\n {renderFieldByType()}\n </div>\n {Boolean(cell?.column?.is_live_field) && (\n <div className='absolute -top-1.5 -right-1.5 bg-white dark:bg-black-800 rounded-full w-5 h-5 flex items-center justify-center border border-primary-300 dark:border-primary-600 shadow-sm z-[125]'>\n {isFieldOperationLoading ? (\n <LoadingSpinnerIcon className='text-primary-600 dark:text-white' size={8} />\n ) : (\n <BoltOutlined\n sx={{\n fontSize: 12,\n color: 'var(--color-primary-600)',\n }}\n />\n )}\n </div>\n )}\n {displayValidationError && (\n <div className='absolute top-full left-0 mt-1 text-error-600 text-xs font-medium z-[130] bg-white dark:bg-black-800 px-2 py-1 rounded shadow-lg w-full'>\n {displayValidationError}\n </div>\n )}\n </div>\n );\n};\n"],"names":["_cursorPositionCache","_blurringCellKey","_pendingFieldOpCellKey","createSyntheticChangeEvent","value","InlineEditField","cell","id","inlineEditing","cellRef","handleCellValueChange","registerValidation","openMasterDataModal","selectedMasterData","clearSelectedMasterData","getCurrencyForCell","getPendingEdit","addPendingEdit","onFieldOperationFlow","fieldOperationLoading","useContext","TableContext","isFieldOperationLoading","isAnyFieldOperationLoading","callLiveFieldOperation","useCallback","meta","getCurrencyFromCell","rawData","headerKey","columnKey","dataFromHeader","dataFromKey","currencyCellId","contextCurrency","initialPendingEdit","fieldState","setFieldState","useState","validationError","setValidationError","computedValidationError","valueToValidate","result","validateCellValue","pendingError","displayValidationError","previousInlineEditingRef","useRef","useEffect","currencyFromContext","pendingEdit","initialValue","initialCurrency","validateRequiredField","validateUrlField","REGEX","validateEmailField","fieldStateRef","textInputRef","cellEditKey","useLayoutEffect","el","cached","debouncedSyncTimerRef","syncToParent","debouncedSyncToParent","flushSyncToParent","handleBlurValidation","columnType","currentValue","validateAndGetValue","currentCurrency","isValid","renderFieldByType","currentPendingEdit","masterDataValue","jsx","e","MasterDataInlineField","reference","rowCellMeta","choices","SelectField","choice","selectedOptions","prev","DateTimeField","newValue","originalCurrencyCode","InlineCurrencyField","numericValue","currency_code","jsxs","currentBoolValue","Toggle","checked","cn","LoadingSpinnerIcon","BoltOutlined"],"mappings":"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"}
package/dist/components/data-display/resizable-sidebar/ResizableSidebar.cjs.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),w=require("../../../_virtual/index.cjs.js"),R=require("framer-motion"),l=require("react"),I=require("react-dom"),T=require("re-resizable"),q=require("../../../hooks/useResponsiveWidth.cjs.js"),B=()=>t.jsx("div",{className:"cursor-ew-resize flex items-center justify-center rounded-full bg-[#1018288F] bg-opacity-55 w-8 h-8 shadow-200 border-[1.5px] border-[#FFFFFF3D]",children:t.jsxs("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[t.jsx("mask",{id:"mask0_36675_12",maskUnits:"userSpaceOnUse",x:"0",y:"0",width:"20",height:"20",children:t.jsx("rect",{y:"20",width:"20",height:"20",transform:"rotate(-90 0 20)",fill:"#D9D9D9"})}),t.jsx("g",{mask:"url(#mask0_36675_12)",children:t.jsx("path",{d:"M15.9583 10L12.7292 6.77084C12.5625 6.60418 12.4792 6.40973 12.4792 6.18751C12.4792 5.96529 12.5625 5.77084 12.7292 5.60418C12.8958 5.43751 13.0938 5.35418 13.3229 5.35418C13.5521 5.35418 13.75 5.43751 13.9167 5.60418L17.1458 8.81251C17.4653 9.13195 17.625 9.52779 17.625 10C17.625 10.4722 17.4653 10.8681 17.1458 11.1875L13.9167 14.4167C13.75 14.5833 13.5521 14.6632 13.3229 14.6563C13.0938 14.6493 12.8958 14.5625 12.7292 14.3958C12.5625 14.2292 12.4792 14.0313 12.4792 13.8021C12.4792 13.5729 12.5625 13.375 12.7292 13.2083L15.9583 10ZM4.04167 10L7.25 13.2083C7.41667 13.375 7.49653 13.5695 7.48958 13.7917C7.48264 14.0139 7.40278 14.2083 7.25 14.375C7.08333 14.5417 6.88542 14.6285 6.65625 14.6354C6.42708 14.6424 6.22917 14.5625 6.0625 14.3958L2.85417 11.1875C2.53472 10.8681 2.375 10.4722 2.375 10C2.375 9.52779 2.53472 9.13195 2.85417 8.81251L6.0625 5.60418C6.22917 5.43751 6.42708 5.35765 6.65625 5.36459C6.88542 5.37154 7.08333 5.45834 7.25 5.62501C7.40278 5.79168 7.48264 5.98612 7.48958 6.20834C7.49653 6.43057 7.41667 6.62501 7.25 6.79168L4.04167 10Z",fill:"white"})})]})}),H=(e,i)=>{const r=document.getElementById(e);r?i(r):requestAnimationFrame(()=>{const s=document.getElementById(e);s&&i(s)})},U=(e,i)=>{if(e.current){if(i)localStorage.setItem("resizable-sidebar-width-before-fullscreen",String(e.current.size?.width));else{const r=localStorage.getItem("resizable-sidebar-width-before-fullscreen");if(r){e.current.updateSize({width:r,height:"100%"});return}}e.current.updateSize({width:i?"100vw":"",height:"100%"})}},Z=(e,i,r,s,o,b)=>{const[c,a]=l.useState(!1),[d,n]=l.useState(null);return l.useEffect(()=>{if(!e||typeof window>"u"){n(null);return}H(e,n)},[e]),l.useEffect(()=>{U(o,r)},[r]),l.useEffect(()=>{if(e&&i){const u=requestAnimationFrame(()=>{a(!0)});return()=>{cancelAnimationFrame(u),a(!1)}}e||a(!0),i||a(!1)},[i,e]),l.useEffect(()=>{o.current?.size?.width&&s&&s(o.current.size.width)},[o.current?.size?.width,s]),{shouldRenderSidebar:c,portalTarget:d}},$=({isOpen:e,header:i,id:r,ref:s,className:o,containerClassName:b,headerClassName:c,widthStyle:a,heightStyle:d,motionVariants:n,resizableRef:u,fullScreen:f,maxResizableWidth:g,minWidth:x,handleKey:h,onDragEnd:p,onResize:v,children:y})=>t.jsx(R.AnimatePresence,{children:e&&t.jsx(R.motion.div,{ref:s,id:r,initial:n.initial,animate:n.animate,exit:n.exit,transition:{type:"tween",duration:.3},className:w("flex-shrink-0 z-50 relative bg-white border-neutral-200 dark:bg-black-800 dark:border-black-700",f?"fixed w-full transition translate-x-4 duration-300":"sticky",o),style:{width:a,height:d},children:t.jsx(T.Resizable,{onResize:m=>{m.stopPropagation();const j=u.current?.size?.width;v&&v(j||x)},onResizeStart:m=>{m.stopPropagation()},ref:u,maxWidth:f?g:g*.75,minWidth:x,minHeight:d,maxHeight:d,enable:f?{}:{[h]:!0},handleClasses:{[h]:w("relative w-6 -left-1 flex items-center justify-center bg-transparent transition-colors cursor-ew-resize group z-[9999] hover:bg-neutral-200 dark:hover:bg-neutral-700")},handleComponent:{[h]:t.jsx("div",{className:w("absolute -left-2.5 top-1/2 -translate-y-1/2 flex items-center justify-center w-8 h-12 cursor-ew-resize opacity-0 group-hover:opacity-100 hover:opacity-100 active:opacity-100 transition-opacity z-[9999]",h==="left"&&"-right-2.5 -left-auto"),children:t.jsx(B,{})})},className:"!h-full",onResizeStop:p||void 0,children:t.jsxs("div",{className:w("h-full w-full flex flex-col overflow-hidden @container/sidebar border-b border-neutral-200 dark:border-black-700 bg-white dark:bg-black-800 dark:border",b),children:[i?t.jsx("div",{className:w("py-4 px-6",c),children:i||null}):null,t.jsx("div",{className:"flex-1 overflow-y-auto overflow-x-hidden",children:y})]})})})}),D=l.forwardRef(({isOpen:e,children:i,fullScreen:r=!1,defaultSize:s=void 0,minWidth:o=400,onDragEnd:b=null,onResize:c,className:a,placement:d="right",parentContainer:n,header:u,id:f,containerClassName:g,headerClassName:x,ignoreParentContainerHeight:h=!1,height:p,isMainSidebarExpanded:v=!1,mainSidebarExpandedWidth:y=280,mainSidebarCollapsedWidth:m=80,navbarHeight:j=64},E)=>{const L=v?y:m,k=l.useRef(null),{shouldRenderSidebar:C,portalTarget:z}=Z(n,e,r,c,k),N=typeof window<"u"?window.innerWidth-L:0,W=q.useResponsiveWidth(o),M=q.useResponsiveWidth(s),S=d==="right",P=p||(n&&!h?"100%":`calc(100vh - ${j}px)`),_={initial:{x:S?"100%":"-100%"},animate:{x:0},exit:{x:S?"100%":"-100%"}},A=S?"left":"right",F=t.jsx($,{isOpen:e,header:u,id:f,ref:E,className:a,containerClassName:g,headerClassName:x,widthStyle:M,heightStyle:P,motionVariants:_,resizableRef:k,fullScreen:r,maxResizableWidth:N,minWidth:W,handleKey:A,onDragEnd:b,onResize:c,children:i});return n?!C||!z?null:I.createPortal(F,z):C?F:null});D.displayName="ResizableSidebar";exports.ResizableSidebar=D;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),w=require("../../../_virtual/index.cjs.js"),R=require("framer-motion"),l=require("react"),I=require("react-dom"),T=require("re-resizable"),q=require("../../../hooks/useResponsiveWidth.cjs.js"),B=()=>t.jsx("div",{className:"cursor-ew-resize flex items-center justify-center rounded-full bg-[#1018288F] bg-opacity-55 w-8 h-8 shadow-200 border-[1.5px] border-[#FFFFFF3D]",children:t.jsxs("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[t.jsx("mask",{id:"mask0_36675_12",maskUnits:"userSpaceOnUse",x:"0",y:"0",width:"20",height:"20",children:t.jsx("rect",{y:"20",width:"20",height:"20",transform:"rotate(-90 0 20)",fill:"#D9D9D9"})}),t.jsx("g",{mask:"url(#mask0_36675_12)",children:t.jsx("path",{d:"M15.9583 10L12.7292 6.77084C12.5625 6.60418 12.4792 6.40973 12.4792 6.18751C12.4792 5.96529 12.5625 5.77084 12.7292 5.60418C12.8958 5.43751 13.0938 5.35418 13.3229 5.35418C13.5521 5.35418 13.75 5.43751 13.9167 5.60418L17.1458 8.81251C17.4653 9.13195 17.625 9.52779 17.625 10C17.625 10.4722 17.4653 10.8681 17.1458 11.1875L13.9167 14.4167C13.75 14.5833 13.5521 14.6632 13.3229 14.6563C13.0938 14.6493 12.8958 14.5625 12.7292 14.3958C12.5625 14.2292 12.4792 14.0313 12.4792 13.8021C12.4792 13.5729 12.5625 13.375 12.7292 13.2083L15.9583 10ZM4.04167 10L7.25 13.2083C7.41667 13.375 7.49653 13.5695 7.48958 13.7917C7.48264 14.0139 7.40278 14.2083 7.25 14.375C7.08333 14.5417 6.88542 14.6285 6.65625 14.6354C6.42708 14.6424 6.22917 14.5625 6.0625 14.3958L2.85417 11.1875C2.53472 10.8681 2.375 10.4722 2.375 10C2.375 9.52779 2.53472 9.13195 2.85417 8.81251L6.0625 5.60418C6.22917 5.43751 6.42708 5.35765 6.65625 5.36459C6.88542 5.37154 7.08333 5.45834 7.25 5.62501C7.40278 5.79168 7.48264 5.98612 7.48958 6.20834C7.49653 6.43057 7.41667 6.62501 7.25 6.79168L4.04167 10Z",fill:"white"})})]})}),H=(e,i)=>{const r=document.getElementById(e);r?i(r):requestAnimationFrame(()=>{const s=document.getElementById(e);s&&i(s)})},U=(e,i)=>{if(e.current){if(i)localStorage.setItem("resizable-sidebar-width-before-fullscreen",String(e.current.size?.width));else{const r=localStorage.getItem("resizable-sidebar-width-before-fullscreen");if(r){e.current.updateSize({width:r,height:"100%"});return}}e.current.updateSize({width:i?"100vw":"",height:"100%"})}},Z=(e,i,r,s,o,g)=>{const[u,a]=l.useState(!1),[d,n]=l.useState(null);return l.useEffect(()=>{if(!e||typeof window>"u"){n(null);return}H(e,n)},[e]),l.useEffect(()=>{U(o,r)},[r]),l.useEffect(()=>{if(e&&i){const h=requestAnimationFrame(()=>{a(!0)});return()=>{cancelAnimationFrame(h),a(!1)}}e||a(!0),i||a(!1)},[i,e]),l.useEffect(()=>{o.current?.size?.width&&s&&s(o.current.size.width)},[o.current?.size?.width,s]),{shouldRenderSidebar:u,portalTarget:d}},$=({isOpen:e,header:i,id:r,ref:s,className:o,containerClassName:g,headerClassName:u,widthStyle:a,heightStyle:d,motionVariants:n,resizableRef:h,fullScreen:f,maxResizableWidth:b,minWidth:x,handleKey:c,onDragEnd:p,onResize:v,children:y})=>t.jsx(R.AnimatePresence,{children:e&&t.jsx(R.motion.div,{ref:s,id:r,initial:n.initial,animate:n.animate,exit:n.exit,transition:{type:"tween",duration:.3},className:w("flex-shrink-0 z-50 relative bg-white border-neutral-200 dark:bg-black-800 dark:border-black-700",f?"fixed w-full transition translate-x-4 duration-300":"sticky",o),style:{width:a,height:d},children:t.jsx(T.Resizable,{onResize:m=>{m.stopPropagation();const j=h.current?.size?.width;v&&v(j||x)},onResizeStart:m=>{m.stopPropagation()},ref:h,maxWidth:f?b:b*.75,minWidth:x,minHeight:d,maxHeight:d,enable:f?{}:{[c]:!0},handleClasses:{[c]:w("relative w-6 flex items-center justify-center bg-transparent transition-colors cursor-ew-resize group z-[9999] hover:bg-neutral-200 dark:hover:bg-neutral-700",c==="left"?"-left-1":"-right-1")},handleComponent:{[c]:t.jsx("div",{className:w("absolute top-1/2 -translate-y-1/2 flex items-center justify-center w-8 h-12 cursor-ew-resize opacity-0 group-hover:opacity-100 hover:opacity-100 active:opacity-100 transition-opacity z-[9999]",c==="left"?"-left-2.5":"-right-2.5"),children:t.jsx(B,{})})},className:"!h-full",onResizeStop:p||void 0,children:t.jsxs("div",{className:w("h-full w-full flex flex-col overflow-hidden @container/sidebar border-b border-neutral-200 dark:border-black-700 bg-white dark:bg-black-800 dark:border",g),children:[i?t.jsx("div",{className:w("py-4 px-6",u),children:i||null}):null,t.jsx("div",{className:"flex-1 overflow-y-auto overflow-x-hidden",children:y})]})})})}),D=l.forwardRef(({isOpen:e,children:i,fullScreen:r=!1,defaultSize:s=void 0,minWidth:o=400,onDragEnd:g=null,onResize:u,className:a,placement:d="right",parentContainer:n,header:h,id:f,containerClassName:b,headerClassName:x,ignoreParentContainerHeight:c=!1,height:p,isMainSidebarExpanded:v=!1,mainSidebarExpandedWidth:y=280,mainSidebarCollapsedWidth:m=80,navbarHeight:j=64},E)=>{const L=v?y:m,k=l.useRef(null),{shouldRenderSidebar:C,portalTarget:z}=Z(n,e,r,u,k),N=typeof window<"u"?window.innerWidth-L:0,W=q.useResponsiveWidth(o),M=q.useResponsiveWidth(s),S=d==="right",P=p||(n&&!c?"100%":`calc(100vh - ${j}px)`),_={initial:{x:S?"100%":"-100%"},animate:{x:0},exit:{x:S?"100%":"-100%"}},A=S?"left":"right",F=t.jsx($,{isOpen:e,header:h,id:f,ref:E,className:a,containerClassName:b,headerClassName:x,widthStyle:M,heightStyle:P,motionVariants:_,resizableRef:k,fullScreen:r,maxResizableWidth:N,minWidth:W,handleKey:A,onDragEnd:g,onResize:u,children:i});return n?!C||!z?null:I.createPortal(F,z):C?F:null});D.displayName="ResizableSidebar";exports.ResizableSidebar=D;
2
2
  //# sourceMappingURL=ResizableSidebar.cjs.js.map
package/dist/components/data-display/resizable-sidebar/ResizableSidebar.cjs.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ResizableSidebar.cjs.js","sources":["../../../../src/components/data-display/resizable-sidebar/ResizableSidebar.tsx"],"sourcesContent":["import cn from \"classnames\";\nimport { AnimatePresence, motion } from \"framer-motion\";\nimport { forwardRef, useEffect, useRef, useState } from \"react\";\nimport ReactDOM from \"react-dom\";\nimport { Resizable } from \"re-resizable\";\n\nimport { useResponsiveWidth } from \"../../../hooks/useResponsiveWidth\";\n\n/**\n * Sidebar placement options\n */\nexport type ResizableSidebarPlacement = \"left\" | \"right\";\n\n/**\n * Props for the ResizableSidebar component\n */\nexport interface ResizableSidebarProps {\n /** Whether the sidebar is open */\n isOpen: boolean;\n /** Content to display in the sidebar */\n children: React.ReactNode;\n /** Whether to display in full screen mode */\n fullScreen?: boolean;\n /** Callback when drag/resize ends */\n onDragEnd?: (() => void) | null;\n /** Callback when resize occurs */\n onResize?: (width: number) => void;\n /** Additional CSS classes for the wrapper */\n className?: string;\n /** Default size of the sidebar */\n defaultSize?: string;\n /** Minimum width of the sidebar */\n minWidth?: number;\n /** Placement of the sidebar */\n placement?: ResizableSidebarPlacement;\n /** Parent container ID for portal rendering */\n parentContainer?: string;\n /** Header content */\n header?: React.ReactNode;\n /** Unique ID for the sidebar */\n id?: string;\n /** Additional CSS classes for the container */\n containerClassName?: string;\n /** Additional CSS classes for the header wrapper */\n headerClassName?: string;\n /** Whether to ignore parent container height */\n ignoreParentContainerHeight?: boolean;\n /** Custom height */\n height?: string;\n /** Whether the main sidebar is expanded (affects max width calculation) */\n isMainSidebarExpanded?: boolean;\n /** Width of the main sidebar when expanded */\n mainSidebarExpandedWidth?: number;\n /** Width of the main sidebar when collapsed */\n mainSidebarCollapsedWidth?: number;\n /** Height offset for navbar */\n navbarHeight?: number;\n}\n\n/**\n * Drag handle component for the resizable sidebar\n */\nconst DragHandle = () => {\n return (\n <div className=\"cursor-ew-resize flex items-center justify-center rounded-full bg-[#1018288F] bg-opacity-55 w-8 h-8 shadow-200 border-[1.5px] border-[#FFFFFF3D]\">\n <svg\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 20 20\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <mask id=\"mask0_36675_12\" maskUnits=\"userSpaceOnUse\" x=\"0\" y=\"0\" width=\"20\" height=\"20\">\n <rect y=\"20\" width=\"20\" height=\"20\" transform=\"rotate(-90 0 20)\" fill=\"#D9D9D9\" />\n </mask>\n <g mask=\"url(#mask0_36675_12)\">\n <path\n d=\"M15.9583 10L12.7292 6.77084C12.5625 6.60418 12.4792 6.40973 12.4792 6.18751C12.4792 5.96529 12.5625 5.77084 12.7292 5.60418C12.8958 5.43751 13.0938 5.35418 13.3229 5.35418C13.5521 5.35418 13.75 5.43751 13.9167 5.60418L17.1458 8.81251C17.4653 9.13195 17.625 9.52779 17.625 10C17.625 10.4722 17.4653 10.8681 17.1458 11.1875L13.9167 14.4167C13.75 14.5833 13.5521 14.6632 13.3229 14.6563C13.0938 14.6493 12.8958 14.5625 12.7292 14.3958C12.5625 14.2292 12.4792 14.0313 12.4792 13.8021C12.4792 13.5729 12.5625 13.375 12.7292 13.2083L15.9583 10ZM4.04167 10L7.25 13.2083C7.41667 13.375 7.49653 13.5695 7.48958 13.7917C7.48264 14.0139 7.40278 14.2083 7.25 14.375C7.08333 14.5417 6.88542 14.6285 6.65625 14.6354C6.42708 14.6424 6.22917 14.5625 6.0625 14.3958L2.85417 11.1875C2.53472 10.8681 2.375 10.4722 2.375 10C2.375 9.52779 2.53472 9.13195 2.85417 8.81251L6.0625 5.60418C6.22917 5.43751 6.42708 5.35765 6.65625 5.36459C6.88542 5.37154 7.08333 5.45834 7.25 5.62501C7.40278 5.79168 7.48264 5.98612 7.48958 6.20834C7.49653 6.43057 7.41667 6.62501 7.25 6.79168L4.04167 10Z\"\n fill=\"white\"\n />\n </g>\n </svg>\n </div>\n );\n};\n\n/**\n * ResizableSidebar component displays a resizable sidebar panel\n *\n * @example\n * ```tsx\n * <ResizableSidebar\n * isOpen={isOpen}\n * onClose={() => setIsOpen(false)}\n * placement=\"right\"\n * minWidth={300}\n * >\n * <div>Sidebar content</div>\n * </ResizableSidebar>\n * ```\n */\n// Helper functions to reduce cognitive complexity\nconst findParentContainer = (parentContainer: string, setPortalTarget: (target: HTMLElement | null) => void) => {\n const el = document.getElementById(parentContainer);\n if (el) {\n setPortalTarget(el);\n } else {\n requestAnimationFrame(() => {\n const retryEl = document.getElementById(parentContainer);\n if (retryEl) setPortalTarget(retryEl);\n });\n }\n};\n\nconst handleFullScreenToggle = (resizableRef: React.RefObject<React.ElementRef<typeof Resizable>>, fullScreen: boolean) => {\n if (!resizableRef.current) return;\n\n if (fullScreen) {\n localStorage.setItem(\"resizable-sidebar-width-before-fullscreen\", String(resizableRef.current.size?.width));\n } else {\n const width = localStorage.getItem(\"resizable-sidebar-width-before-fullscreen\");\n if (width) {\n resizableRef.current.updateSize({ width: width, height: \"100%\" });\n return;\n }\n }\n resizableRef.current.updateSize({\n width: fullScreen ? \"100vw\" : \"\",\n height: \"100%\",\n });\n};\n\nconst useSidebarEffects = (\n parentContainer: string | undefined,\n isOpen: boolean,\n fullScreen: boolean,\n onResize: ((width: number) => void) | undefined,\n resizableRef: React.RefObject<React.ElementRef<typeof Resizable>>,\n _minWidth: number\n) => {\n const [shouldRenderSidebar, setShouldRenderSidebar] = useState(false);\n const [portalTarget, setPortalTarget] = useState<HTMLElement | null>(null);\n\n useEffect(() => {\n if (!parentContainer || typeof window === \"undefined\") {\n setPortalTarget(null);\n return;\n }\n findParentContainer(parentContainer, setPortalTarget);\n }, [parentContainer]);\n\n useEffect(() => {\n handleFullScreenToggle(resizableRef, fullScreen);\n }, [fullScreen]);\n\n useEffect(() => {\n if (parentContainer && isOpen) {\n const frame = requestAnimationFrame(() => {\n setShouldRenderSidebar(true);\n });\n return () => {\n cancelAnimationFrame(frame);\n setShouldRenderSidebar(false);\n };\n }\n\n if (!parentContainer) {\n setShouldRenderSidebar(true);\n }\n\n if (!isOpen) {\n setShouldRenderSidebar(false);\n }\n }, [isOpen, parentContainer]);\n\n useEffect(() => {\n if (resizableRef.current?.size?.width && onResize) {\n onResize(resizableRef.current.size.width);\n }\n }, [resizableRef.current?.size?.width, onResize]);\n\n return { shouldRenderSidebar, portalTarget };\n};\n\nconst SidebarContent = ({\n isOpen,\n header,\n id,\n ref,\n className,\n containerClassName,\n headerClassName,\n widthStyle,\n heightStyle,\n motionVariants,\n resizableRef,\n fullScreen,\n maxResizableWidth,\n minWidth,\n handleKey,\n onDragEnd,\n onResize,\n children,\n}: {\n isOpen: boolean;\n header?: React.ReactNode;\n id?: string;\n ref: React.Ref<HTMLDivElement>;\n className?: string;\n containerClassName?: string;\n headerClassName?: string;\n widthStyle?: string | number;\n heightStyle: string;\n motionVariants: any;\n resizableRef: React.RefObject<React.ElementRef<typeof Resizable>>;\n fullScreen: boolean;\n maxResizableWidth: number;\n minWidth: number;\n handleKey: string;\n onDragEnd?: (() => void) | null;\n onResize?: (width: number) => void;\n children: React.ReactNode;\n}) => (\n <AnimatePresence>\n {isOpen && (\n <motion.div\n ref={ref}\n id={id}\n initial={motionVariants.initial}\n animate={motionVariants.animate}\n exit={motionVariants.exit}\n transition={{ type: \"tween\", duration: 0.3 }}\n className={cn(\n \"flex-shrink-0 z-50 relative bg-white border-neutral-200 dark:bg-black-800 dark:border-black-700\",\n fullScreen ? \"fixed w-full transition translate-x-4 duration-300\" : \"sticky\",\n className,\n )}\n style={{\n width: widthStyle,\n height: heightStyle,\n }}\n >\n <Resizable\n onResize={(e) => {\n e.stopPropagation();\n const width = resizableRef.current?.size?.width;\n if (onResize) {\n onResize(width || minWidth);\n }\n }}\n onResizeStart={(e) => {\n e.stopPropagation();\n }}\n ref={resizableRef}\n maxWidth={fullScreen ? maxResizableWidth : maxResizableWidth * 0.75}\n minWidth={minWidth}\n minHeight={heightStyle}\n maxHeight={heightStyle}\n enable={fullScreen ? {} : { [handleKey]: true }}\n handleClasses={{\n [handleKey]: cn(\n \"relative w-6 -left-1 flex items-center justify-center bg-transparent transition-colors cursor-ew-resize group z-[9999] hover:bg-neutral-200 dark:hover:bg-neutral-700\",\n ),\n }}\n handleComponent={{\n [handleKey]: (\n <div\n className={cn(\n \"absolute -left-2.5 top-1/2 -translate-y-1/2 flex items-center justify-center w-8 h-12 cursor-ew-resize opacity-0 group-hover:opacity-100 hover:opacity-100 active:opacity-100 transition-opacity z-[9999]\",\n handleKey === \"left\" && \"-right-2.5 -left-auto\",\n )}\n >\n <DragHandle />\n </div>\n ),\n }}\n className=\"!h-full\"\n onResizeStop={onDragEnd || undefined}\n >\n <div\n className={cn(\n \"h-full w-full flex flex-col overflow-hidden @container/sidebar border-b border-neutral-200 dark:border-black-700 bg-white dark:bg-black-800 dark:border\",\n containerClassName,\n )}\n >\n {header ? <div className={cn(\"py-4 px-6\", headerClassName)}>{header || null}</div> : null}\n <div className=\"flex-1 overflow-y-auto overflow-x-hidden\">{children}</div>\n </div>\n </Resizable>\n </motion.div>\n )} \n </AnimatePresence>\n);\n\nexport const ResizableSidebar = forwardRef<HTMLDivElement, ResizableSidebarProps>(\n (\n {\n isOpen,\n children,\n fullScreen = false,\n defaultSize = undefined,\n minWidth = 400,\n onDragEnd = null,\n onResize,\n className,\n placement = \"right\",\n parentContainer,\n header,\n id,\n containerClassName,\n headerClassName,\n ignoreParentContainerHeight = false,\n height,\n isMainSidebarExpanded = false,\n mainSidebarExpandedWidth = 280,\n mainSidebarCollapsedWidth = 80,\n navbarHeight = 64,\n },\n ref\n ) => {\n const mainSidebarWidth = isMainSidebarExpanded ? mainSidebarExpandedWidth : mainSidebarCollapsedWidth;\n const resizableRef = useRef<React.ElementRef<typeof Resizable>>(null);\n const { shouldRenderSidebar, portalTarget } = useSidebarEffects(\n parentContainer,\n isOpen,\n fullScreen,\n onResize,\n resizableRef,\n minWidth\n );\n\n const maxResizableWidth = typeof window !== \"undefined\" ? window.innerWidth - mainSidebarWidth : 0;\n\n // Passed sizes are the desktop maximum; both the drag floor and the open\n // width shrink by viewport breakpoint.\n const responsiveMinWidth = useResponsiveWidth(minWidth);\n const responsiveDefaultSize = useResponsiveWidth(defaultSize);\n\n const widthStyle = responsiveDefaultSize;\n const isRight = placement === \"right\";\n const heightStyle = height || (parentContainer && !ignoreParentContainerHeight ? \"100%\" : `calc(100vh - ${navbarHeight}px)`);\n\n const motionVariants = {\n initial: { x: isRight ? \"100%\" : \"-100%\" },\n animate: { x: 0 },\n exit: { x: isRight ? \"100%\" : \"-100%\" },\n };\n\n const handleKey = isRight ? \"left\" : \"right\";\n\n const sidebarContent = (\n <SidebarContent\n isOpen={isOpen}\n header={header}\n id={id}\n ref={ref}\n className={className}\n containerClassName={containerClassName}\n headerClassName={headerClassName}\n widthStyle={widthStyle}\n heightStyle={heightStyle}\n motionVariants={motionVariants}\n resizableRef={resizableRef}\n fullScreen={fullScreen}\n maxResizableWidth={maxResizableWidth}\n minWidth={responsiveMinWidth}\n handleKey={handleKey}\n onDragEnd={onDragEnd}\n onResize={onResize}\n >\n {children}\n </SidebarContent>\n );\n\n if (parentContainer) {\n if (!shouldRenderSidebar || !portalTarget) return null;\n return ReactDOM.createPortal(sidebarContent, portalTarget);\n }\n\n if (!shouldRenderSidebar) return null;\n\n return sidebarContent;\n }\n);\n\nResizableSidebar.displayName = \"ResizableSidebar\";\n"],"names":["DragHandle","jsx","jsxs","findParentContainer","parentContainer","setPortalTarget","el","retryEl","handleFullScreenToggle","resizableRef","fullScreen","width","useSidebarEffects","isOpen","onResize","_minWidth","shouldRenderSidebar","setShouldRenderSidebar","useState","portalTarget","useEffect","frame","SidebarContent","header","id","ref","className","containerClassName","headerClassName","widthStyle","heightStyle","motionVariants","maxResizableWidth","minWidth","handleKey","onDragEnd","children","AnimatePresence","motion","cn","Resizable","e","ResizableSidebar","forwardRef","defaultSize","placement","ignoreParentContainerHeight","height","isMainSidebarExpanded","mainSidebarExpandedWidth","mainSidebarCollapsedWidth","navbarHeight","mainSidebarWidth","useRef","responsiveMinWidth","useResponsiveWidth","isRight","sidebarContent","ReactDOM"],"mappings":"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"}
1
+ {"version":3,"file":"ResizableSidebar.cjs.js","sources":["../../../../src/components/data-display/resizable-sidebar/ResizableSidebar.tsx"],"sourcesContent":["import cn from \"classnames\";\nimport { AnimatePresence, motion } from \"framer-motion\";\nimport { forwardRef, useEffect, useRef, useState } from \"react\";\nimport ReactDOM from \"react-dom\";\nimport { Resizable } from \"re-resizable\";\n\nimport { useResponsiveWidth } from \"../../../hooks/useResponsiveWidth\";\n\n/**\n * Sidebar placement options\n */\nexport type ResizableSidebarPlacement = \"left\" | \"right\";\n\n/**\n * Props for the ResizableSidebar component\n */\nexport interface ResizableSidebarProps {\n /** Whether the sidebar is open */\n isOpen: boolean;\n /** Content to display in the sidebar */\n children: React.ReactNode;\n /** Whether to display in full screen mode */\n fullScreen?: boolean;\n /** Callback when drag/resize ends */\n onDragEnd?: (() => void) | null;\n /** Callback when resize occurs */\n onResize?: (width: number) => void;\n /** Additional CSS classes for the wrapper */\n className?: string;\n /** Default size of the sidebar */\n defaultSize?: string;\n /** Minimum width of the sidebar */\n minWidth?: number;\n /** Placement of the sidebar */\n placement?: ResizableSidebarPlacement;\n /** Parent container ID for portal rendering */\n parentContainer?: string;\n /** Header content */\n header?: React.ReactNode;\n /** Unique ID for the sidebar */\n id?: string;\n /** Additional CSS classes for the container */\n containerClassName?: string;\n /** Additional CSS classes for the header wrapper */\n headerClassName?: string;\n /** Whether to ignore parent container height */\n ignoreParentContainerHeight?: boolean;\n /** Custom height */\n height?: string;\n /** Whether the main sidebar is expanded (affects max width calculation) */\n isMainSidebarExpanded?: boolean;\n /** Width of the main sidebar when expanded */\n mainSidebarExpandedWidth?: number;\n /** Width of the main sidebar when collapsed */\n mainSidebarCollapsedWidth?: number;\n /** Height offset for navbar */\n navbarHeight?: number;\n}\n\n/**\n * Drag handle component for the resizable sidebar\n */\nconst DragHandle = () => {\n return (\n <div className=\"cursor-ew-resize flex items-center justify-center rounded-full bg-[#1018288F] bg-opacity-55 w-8 h-8 shadow-200 border-[1.5px] border-[#FFFFFF3D]\">\n <svg\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 20 20\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <mask id=\"mask0_36675_12\" maskUnits=\"userSpaceOnUse\" x=\"0\" y=\"0\" width=\"20\" height=\"20\">\n <rect y=\"20\" width=\"20\" height=\"20\" transform=\"rotate(-90 0 20)\" fill=\"#D9D9D9\" />\n </mask>\n <g mask=\"url(#mask0_36675_12)\">\n <path\n d=\"M15.9583 10L12.7292 6.77084C12.5625 6.60418 12.4792 6.40973 12.4792 6.18751C12.4792 5.96529 12.5625 5.77084 12.7292 5.60418C12.8958 5.43751 13.0938 5.35418 13.3229 5.35418C13.5521 5.35418 13.75 5.43751 13.9167 5.60418L17.1458 8.81251C17.4653 9.13195 17.625 9.52779 17.625 10C17.625 10.4722 17.4653 10.8681 17.1458 11.1875L13.9167 14.4167C13.75 14.5833 13.5521 14.6632 13.3229 14.6563C13.0938 14.6493 12.8958 14.5625 12.7292 14.3958C12.5625 14.2292 12.4792 14.0313 12.4792 13.8021C12.4792 13.5729 12.5625 13.375 12.7292 13.2083L15.9583 10ZM4.04167 10L7.25 13.2083C7.41667 13.375 7.49653 13.5695 7.48958 13.7917C7.48264 14.0139 7.40278 14.2083 7.25 14.375C7.08333 14.5417 6.88542 14.6285 6.65625 14.6354C6.42708 14.6424 6.22917 14.5625 6.0625 14.3958L2.85417 11.1875C2.53472 10.8681 2.375 10.4722 2.375 10C2.375 9.52779 2.53472 9.13195 2.85417 8.81251L6.0625 5.60418C6.22917 5.43751 6.42708 5.35765 6.65625 5.36459C6.88542 5.37154 7.08333 5.45834 7.25 5.62501C7.40278 5.79168 7.48264 5.98612 7.48958 6.20834C7.49653 6.43057 7.41667 6.62501 7.25 6.79168L4.04167 10Z\"\n fill=\"white\"\n />\n </g>\n </svg>\n </div>\n );\n};\n\n/**\n * ResizableSidebar component displays a resizable sidebar panel\n *\n * @example\n * ```tsx\n * <ResizableSidebar\n * isOpen={isOpen}\n * onClose={() => setIsOpen(false)}\n * placement=\"right\"\n * minWidth={300}\n * >\n * <div>Sidebar content</div>\n * </ResizableSidebar>\n * ```\n */\n// Helper functions to reduce cognitive complexity\nconst findParentContainer = (parentContainer: string, setPortalTarget: (target: HTMLElement | null) => void) => {\n const el = document.getElementById(parentContainer);\n if (el) {\n setPortalTarget(el);\n } else {\n requestAnimationFrame(() => {\n const retryEl = document.getElementById(parentContainer);\n if (retryEl) setPortalTarget(retryEl);\n });\n }\n};\n\nconst handleFullScreenToggle = (resizableRef: React.RefObject<React.ElementRef<typeof Resizable>>, fullScreen: boolean) => {\n if (!resizableRef.current) return;\n\n if (fullScreen) {\n localStorage.setItem(\"resizable-sidebar-width-before-fullscreen\", String(resizableRef.current.size?.width));\n } else {\n const width = localStorage.getItem(\"resizable-sidebar-width-before-fullscreen\");\n if (width) {\n resizableRef.current.updateSize({ width: width, height: \"100%\" });\n return;\n }\n }\n resizableRef.current.updateSize({\n width: fullScreen ? \"100vw\" : \"\",\n height: \"100%\",\n });\n};\n\nconst useSidebarEffects = (\n parentContainer: string | undefined,\n isOpen: boolean,\n fullScreen: boolean,\n onResize: ((width: number) => void) | undefined,\n resizableRef: React.RefObject<React.ElementRef<typeof Resizable>>,\n _minWidth: number\n) => {\n const [shouldRenderSidebar, setShouldRenderSidebar] = useState(false);\n const [portalTarget, setPortalTarget] = useState<HTMLElement | null>(null);\n\n useEffect(() => {\n if (!parentContainer || typeof window === \"undefined\") {\n setPortalTarget(null);\n return;\n }\n findParentContainer(parentContainer, setPortalTarget);\n }, [parentContainer]);\n\n useEffect(() => {\n handleFullScreenToggle(resizableRef, fullScreen);\n }, [fullScreen]);\n\n useEffect(() => {\n if (parentContainer && isOpen) {\n const frame = requestAnimationFrame(() => {\n setShouldRenderSidebar(true);\n });\n return () => {\n cancelAnimationFrame(frame);\n setShouldRenderSidebar(false);\n };\n }\n\n if (!parentContainer) {\n setShouldRenderSidebar(true);\n }\n\n if (!isOpen) {\n setShouldRenderSidebar(false);\n }\n }, [isOpen, parentContainer]);\n\n useEffect(() => {\n if (resizableRef.current?.size?.width && onResize) {\n onResize(resizableRef.current.size.width);\n }\n }, [resizableRef.current?.size?.width, onResize]);\n\n return { shouldRenderSidebar, portalTarget };\n};\n\nconst SidebarContent = ({\n isOpen,\n header,\n id,\n ref,\n className,\n containerClassName,\n headerClassName,\n widthStyle,\n heightStyle,\n motionVariants,\n resizableRef,\n fullScreen,\n maxResizableWidth,\n minWidth,\n handleKey,\n onDragEnd,\n onResize,\n children,\n}: {\n isOpen: boolean;\n header?: React.ReactNode;\n id?: string;\n ref: React.Ref<HTMLDivElement>;\n className?: string;\n containerClassName?: string;\n headerClassName?: string;\n widthStyle?: string | number;\n heightStyle: string;\n motionVariants: any;\n resizableRef: React.RefObject<React.ElementRef<typeof Resizable>>;\n fullScreen: boolean;\n maxResizableWidth: number;\n minWidth: number;\n handleKey: string;\n onDragEnd?: (() => void) | null;\n onResize?: (width: number) => void;\n children: React.ReactNode;\n}) => (\n <AnimatePresence>\n {isOpen && (\n <motion.div\n ref={ref}\n id={id}\n initial={motionVariants.initial}\n animate={motionVariants.animate}\n exit={motionVariants.exit}\n transition={{ type: \"tween\", duration: 0.3 }}\n className={cn(\n \"flex-shrink-0 z-50 relative bg-white border-neutral-200 dark:bg-black-800 dark:border-black-700\",\n fullScreen ? \"fixed w-full transition translate-x-4 duration-300\" : \"sticky\",\n className,\n )}\n style={{\n width: widthStyle,\n height: heightStyle,\n }}\n >\n <Resizable\n onResize={(e) => {\n e.stopPropagation();\n const width = resizableRef.current?.size?.width;\n if (onResize) {\n onResize(width || minWidth);\n }\n }}\n onResizeStart={(e) => {\n e.stopPropagation();\n }}\n ref={resizableRef}\n maxWidth={fullScreen ? maxResizableWidth : maxResizableWidth * 0.75}\n minWidth={minWidth}\n minHeight={heightStyle}\n maxHeight={heightStyle}\n enable={fullScreen ? {} : { [handleKey]: true }}\n handleClasses={{\n [handleKey]: cn(\n \"relative w-6 flex items-center justify-center bg-transparent transition-colors cursor-ew-resize group z-[9999] hover:bg-neutral-200 dark:hover:bg-neutral-700\",\n // Offset must match the resized edge so it aligns with re-resizable's positioning.\n handleKey === \"left\" ? \"-left-1\" : \"-right-1\",\n ),\n }}\n handleComponent={{\n [handleKey]: (\n <div\n className={cn(\n \"absolute top-1/2 -translate-y-1/2 flex items-center justify-center w-8 h-12 cursor-ew-resize opacity-0 group-hover:opacity-100 hover:opacity-100 active:opacity-100 transition-opacity z-[9999]\",\n handleKey === \"left\" ? \"-left-2.5\" : \"-right-2.5\",\n )}\n >\n <DragHandle />\n </div>\n ),\n }}\n className=\"!h-full\"\n onResizeStop={onDragEnd || undefined}\n >\n <div\n className={cn(\n \"h-full w-full flex flex-col overflow-hidden @container/sidebar border-b border-neutral-200 dark:border-black-700 bg-white dark:bg-black-800 dark:border\",\n containerClassName,\n )}\n >\n {header ? <div className={cn(\"py-4 px-6\", headerClassName)}>{header || null}</div> : null}\n <div className=\"flex-1 overflow-y-auto overflow-x-hidden\">{children}</div>\n </div>\n </Resizable>\n </motion.div>\n )} \n </AnimatePresence>\n);\n\nexport const ResizableSidebar = forwardRef<HTMLDivElement, ResizableSidebarProps>(\n (\n {\n isOpen,\n children,\n fullScreen = false,\n defaultSize = undefined,\n minWidth = 400,\n onDragEnd = null,\n onResize,\n className,\n placement = \"right\",\n parentContainer,\n header,\n id,\n containerClassName,\n headerClassName,\n ignoreParentContainerHeight = false,\n height,\n isMainSidebarExpanded = false,\n mainSidebarExpandedWidth = 280,\n mainSidebarCollapsedWidth = 80,\n navbarHeight = 64,\n },\n ref\n ) => {\n const mainSidebarWidth = isMainSidebarExpanded ? mainSidebarExpandedWidth : mainSidebarCollapsedWidth;\n const resizableRef = useRef<React.ElementRef<typeof Resizable>>(null);\n const { shouldRenderSidebar, portalTarget } = useSidebarEffects(\n parentContainer,\n isOpen,\n fullScreen,\n onResize,\n resizableRef,\n minWidth\n );\n\n const maxResizableWidth = typeof window !== \"undefined\" ? window.innerWidth - mainSidebarWidth : 0;\n\n // Passed sizes are the desktop maximum; both the drag floor and the open\n // width shrink by viewport breakpoint.\n const responsiveMinWidth = useResponsiveWidth(minWidth);\n const responsiveDefaultSize = useResponsiveWidth(defaultSize);\n\n const widthStyle = responsiveDefaultSize;\n const isRight = placement === \"right\";\n const heightStyle = height || (parentContainer && !ignoreParentContainerHeight ? \"100%\" : `calc(100vh - ${navbarHeight}px)`);\n\n const motionVariants = {\n initial: { x: isRight ? \"100%\" : \"-100%\" },\n animate: { x: 0 },\n exit: { x: isRight ? \"100%\" : \"-100%\" },\n };\n\n const handleKey = isRight ? \"left\" : \"right\";\n\n const sidebarContent = (\n <SidebarContent\n isOpen={isOpen}\n header={header}\n id={id}\n ref={ref}\n className={className}\n containerClassName={containerClassName}\n headerClassName={headerClassName}\n widthStyle={widthStyle}\n heightStyle={heightStyle}\n motionVariants={motionVariants}\n resizableRef={resizableRef}\n fullScreen={fullScreen}\n maxResizableWidth={maxResizableWidth}\n minWidth={responsiveMinWidth}\n handleKey={handleKey}\n onDragEnd={onDragEnd}\n onResize={onResize}\n >\n {children}\n </SidebarContent>\n );\n\n if (parentContainer) {\n if (!shouldRenderSidebar || !portalTarget) return null;\n return ReactDOM.createPortal(sidebarContent, portalTarget);\n }\n\n if (!shouldRenderSidebar) return null;\n\n return sidebarContent;\n }\n);\n\nResizableSidebar.displayName = \"ResizableSidebar\";\n"],"names":["DragHandle","jsx","jsxs","findParentContainer","parentContainer","setPortalTarget","el","retryEl","handleFullScreenToggle","resizableRef","fullScreen","width","useSidebarEffects","isOpen","onResize","_minWidth","shouldRenderSidebar","setShouldRenderSidebar","useState","portalTarget","useEffect","frame","SidebarContent","header","id","ref","className","containerClassName","headerClassName","widthStyle","heightStyle","motionVariants","maxResizableWidth","minWidth","handleKey","onDragEnd","children","AnimatePresence","motion","cn","Resizable","e","ResizableSidebar","forwardRef","defaultSize","placement","ignoreParentContainerHeight","height","isMainSidebarExpanded","mainSidebarExpandedWidth","mainSidebarCollapsedWidth","navbarHeight","mainSidebarWidth","useRef","responsiveMinWidth","useResponsiveWidth","isRight","sidebarContent","ReactDOM"],"mappings":"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"}
package/dist/components/data-display/resizable-sidebar/ResizableSidebar.es.js CHANGED
@@ -47,7 +47,7 @@ const U = () => /* @__PURE__ */ r("div", { className: "cursor-ew-resize flex ite
47
47
  });
48
48
  }
49
49
  }, G = (e, t, i, n, s, w) => {
50
- const [d, a] = L(!1), [l, o] = L(null);
50
+ const [c, a] = L(!1), [l, o] = L(null);
51
51
  return v(() => {
52
52
  if (!e || typeof window > "u") {
53
53
  o(null);
@@ -58,17 +58,17 @@ const U = () => /* @__PURE__ */ r("div", { className: "cursor-ew-resize flex ite
58
58
  $(s, i);
59
59
  }, [i]), v(() => {
60
60
  if (e && t) {
61
- const c = requestAnimationFrame(() => {
61
+ const h = requestAnimationFrame(() => {
62
62
  a(!0);
63
63
  });
64
64
  return () => {
65
- cancelAnimationFrame(c), a(!1);
65
+ cancelAnimationFrame(h), a(!1);
66
66
  };
67
67
  }
68
68
  e || a(!0), t || a(!1);
69
69
  }, [t, e]), v(() => {
70
70
  s.current?.size?.width && n && n(s.current.size.width);
71
- }, [s.current?.size?.width, n]), { shouldRenderSidebar: d, portalTarget: l };
71
+ }, [s.current?.size?.width, n]), { shouldRenderSidebar: c, portalTarget: l };
72
72
  }, J = ({
73
73
  isOpen: e,
74
74
  header: t,
@@ -76,15 +76,15 @@ const U = () => /* @__PURE__ */ r("div", { className: "cursor-ew-resize flex ite
76
76
  ref: n,
77
77
  className: s,
78
78
  containerClassName: w,
79
- headerClassName: d,
79
+ headerClassName: c,
80
80
  widthStyle: a,
81
81
  heightStyle: l,
82
82
  motionVariants: o,
83
- resizableRef: c,
83
+ resizableRef: h,
84
84
  fullScreen: u,
85
85
  maxResizableWidth: g,
86
86
  minWidth: b,
87
- handleKey: h,
87
+ handleKey: d,
88
88
  onDragEnd: x,
89
89
  onResize: p,
90
90
  children: y
@@ -111,30 +111,32 @@ const U = () => /* @__PURE__ */ r("div", { className: "cursor-ew-resize flex ite
111
111
  {
112
112
  onResize: (f) => {
113
113
  f.stopPropagation();
114
- const k = c.current?.size?.width;
114
+ const k = h.current?.size?.width;
115
115
  p && p(k || b);
116
116
  },
117
117
  onResizeStart: (f) => {
118
118
  f.stopPropagation();
119
119
  },
120
- ref: c,
120
+ ref: h,
121
121
  maxWidth: u ? g : g * 0.75,
122
122
  minWidth: b,
123
123
  minHeight: l,
124
124
  maxHeight: l,
125
- enable: u ? {} : { [h]: !0 },
125
+ enable: u ? {} : { [d]: !0 },
126
126
  handleClasses: {
127
- [h]: m(
128
- "relative w-6 -left-1 flex items-center justify-center bg-transparent transition-colors cursor-ew-resize group z-[9999] hover:bg-neutral-200 dark:hover:bg-neutral-700"
127
+ [d]: m(
128
+ "relative w-6 flex items-center justify-center bg-transparent transition-colors cursor-ew-resize group z-[9999] hover:bg-neutral-200 dark:hover:bg-neutral-700",
129
+ // Offset must match the resized edge so it aligns with re-resizable's positioning.
130
+ d === "left" ? "-left-1" : "-right-1"
129
131
  )
130
132
  },
131
133
  handleComponent: {
132
- [h]: /* @__PURE__ */ r(
134
+ [d]: /* @__PURE__ */ r(
133
135
  "div",
134
136
  {
135
137
  className: m(
136
- "absolute -left-2.5 top-1/2 -translate-y-1/2 flex items-center justify-center w-8 h-12 cursor-ew-resize opacity-0 group-hover:opacity-100 hover:opacity-100 active:opacity-100 transition-opacity z-[9999]",
137
- h === "left" && "-right-2.5 -left-auto"
138
+ "absolute top-1/2 -translate-y-1/2 flex items-center justify-center w-8 h-12 cursor-ew-resize opacity-0 group-hover:opacity-100 hover:opacity-100 active:opacity-100 transition-opacity z-[9999]",
139
+ d === "left" ? "-left-2.5" : "-right-2.5"
138
140
  ),
139
141
  children: /* @__PURE__ */ r(U, {})
140
142
  }
@@ -150,7 +152,7 @@ const U = () => /* @__PURE__ */ r("div", { className: "cursor-ew-resize flex ite
150
152
  w
151
153
  ),
152
154
  children: [
153
- t ? /* @__PURE__ */ r("div", { className: m("py-4 px-6", d), children: t || null }) : null,
155
+ t ? /* @__PURE__ */ r("div", { className: m("py-4 px-6", c), children: t || null }) : null,
154
156
  /* @__PURE__ */ r("div", { className: "flex-1 overflow-y-auto overflow-x-hidden", children: y })
155
157
  ]
156
158
  }
@@ -166,15 +168,15 @@ const U = () => /* @__PURE__ */ r("div", { className: "cursor-ew-resize flex ite
166
168
  defaultSize: n = void 0,
167
169
  minWidth: s = 400,
168
170
  onDragEnd: w = null,
169
- onResize: d,
171
+ onResize: c,
170
172
  className: a,
171
173
  placement: l = "right",
172
174
  parentContainer: o,
173
- header: c,
175
+ header: h,
174
176
  id: u,
175
177
  containerClassName: g,
176
178
  headerClassName: b,
177
- ignoreParentContainerHeight: h = !1,
179
+ ignoreParentContainerHeight: d = !1,
178
180
  height: x,
179
181
  isMainSidebarExpanded: p = !1,
180
182
  mainSidebarExpandedWidth: y = 280,
@@ -185,13 +187,13 @@ const U = () => /* @__PURE__ */ r("div", { className: "cursor-ew-resize flex ite
185
187
  o,
186
188
  e,
187
189
  i,
188
- d,
190
+ c,
189
191
  S
190
- ), P = typeof window < "u" ? window.innerWidth - E : 0, _ = N(s), A = N(n), C = l === "right", I = x || (o && !h ? "100%" : `calc(100vh - ${k}px)`), D = /* @__PURE__ */ r(
192
+ ), P = typeof window < "u" ? window.innerWidth - E : 0, _ = N(s), A = N(n), C = l === "right", I = x || (o && !d ? "100%" : `calc(100vh - ${k}px)`), D = /* @__PURE__ */ r(
191
193
  J,
192
194
  {
193
195
  isOpen: e,
194
- header: c,
196
+ header: h,
195
197
  id: u,
196
198
  ref: j,
197
199
  className: a,
@@ -210,7 +212,7 @@ const U = () => /* @__PURE__ */ r("div", { className: "cursor-ew-resize flex ite
210
212
  minWidth: _,
211
213
  handleKey: C ? "left" : "right",
212
214
  onDragEnd: w,
213
- onResize: d,
215
+ onResize: c,
214
216
  children: t
215
217
  }
216
218
  );
package/dist/components/data-display/resizable-sidebar/ResizableSidebar.es.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ResizableSidebar.es.js","sources":["../../../../src/components/data-display/resizable-sidebar/ResizableSidebar.tsx"],"sourcesContent":["import cn from \"classnames\";\nimport { AnimatePresence, motion } from \"framer-motion\";\nimport { forwardRef, useEffect, useRef, useState } from \"react\";\nimport ReactDOM from \"react-dom\";\nimport { Resizable } from \"re-resizable\";\n\nimport { useResponsiveWidth } from \"../../../hooks/useResponsiveWidth\";\n\n/**\n * Sidebar placement options\n */\nexport type ResizableSidebarPlacement = \"left\" | \"right\";\n\n/**\n * Props for the ResizableSidebar component\n */\nexport interface ResizableSidebarProps {\n /** Whether the sidebar is open */\n isOpen: boolean;\n /** Content to display in the sidebar */\n children: React.ReactNode;\n /** Whether to display in full screen mode */\n fullScreen?: boolean;\n /** Callback when drag/resize ends */\n onDragEnd?: (() => void) | null;\n /** Callback when resize occurs */\n onResize?: (width: number) => void;\n /** Additional CSS classes for the wrapper */\n className?: string;\n /** Default size of the sidebar */\n defaultSize?: string;\n /** Minimum width of the sidebar */\n minWidth?: number;\n /** Placement of the sidebar */\n placement?: ResizableSidebarPlacement;\n /** Parent container ID for portal rendering */\n parentContainer?: string;\n /** Header content */\n header?: React.ReactNode;\n /** Unique ID for the sidebar */\n id?: string;\n /** Additional CSS classes for the container */\n containerClassName?: string;\n /** Additional CSS classes for the header wrapper */\n headerClassName?: string;\n /** Whether to ignore parent container height */\n ignoreParentContainerHeight?: boolean;\n /** Custom height */\n height?: string;\n /** Whether the main sidebar is expanded (affects max width calculation) */\n isMainSidebarExpanded?: boolean;\n /** Width of the main sidebar when expanded */\n mainSidebarExpandedWidth?: number;\n /** Width of the main sidebar when collapsed */\n mainSidebarCollapsedWidth?: number;\n /** Height offset for navbar */\n navbarHeight?: number;\n}\n\n/**\n * Drag handle component for the resizable sidebar\n */\nconst DragHandle = () => {\n return (\n <div className=\"cursor-ew-resize flex items-center justify-center rounded-full bg-[#1018288F] bg-opacity-55 w-8 h-8 shadow-200 border-[1.5px] border-[#FFFFFF3D]\">\n <svg\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 20 20\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <mask id=\"mask0_36675_12\" maskUnits=\"userSpaceOnUse\" x=\"0\" y=\"0\" width=\"20\" height=\"20\">\n <rect y=\"20\" width=\"20\" height=\"20\" transform=\"rotate(-90 0 20)\" fill=\"#D9D9D9\" />\n </mask>\n <g mask=\"url(#mask0_36675_12)\">\n <path\n d=\"M15.9583 10L12.7292 6.77084C12.5625 6.60418 12.4792 6.40973 12.4792 6.18751C12.4792 5.96529 12.5625 5.77084 12.7292 5.60418C12.8958 5.43751 13.0938 5.35418 13.3229 5.35418C13.5521 5.35418 13.75 5.43751 13.9167 5.60418L17.1458 8.81251C17.4653 9.13195 17.625 9.52779 17.625 10C17.625 10.4722 17.4653 10.8681 17.1458 11.1875L13.9167 14.4167C13.75 14.5833 13.5521 14.6632 13.3229 14.6563C13.0938 14.6493 12.8958 14.5625 12.7292 14.3958C12.5625 14.2292 12.4792 14.0313 12.4792 13.8021C12.4792 13.5729 12.5625 13.375 12.7292 13.2083L15.9583 10ZM4.04167 10L7.25 13.2083C7.41667 13.375 7.49653 13.5695 7.48958 13.7917C7.48264 14.0139 7.40278 14.2083 7.25 14.375C7.08333 14.5417 6.88542 14.6285 6.65625 14.6354C6.42708 14.6424 6.22917 14.5625 6.0625 14.3958L2.85417 11.1875C2.53472 10.8681 2.375 10.4722 2.375 10C2.375 9.52779 2.53472 9.13195 2.85417 8.81251L6.0625 5.60418C6.22917 5.43751 6.42708 5.35765 6.65625 5.36459C6.88542 5.37154 7.08333 5.45834 7.25 5.62501C7.40278 5.79168 7.48264 5.98612 7.48958 6.20834C7.49653 6.43057 7.41667 6.62501 7.25 6.79168L4.04167 10Z\"\n fill=\"white\"\n />\n </g>\n </svg>\n </div>\n );\n};\n\n/**\n * ResizableSidebar component displays a resizable sidebar panel\n *\n * @example\n * ```tsx\n * <ResizableSidebar\n * isOpen={isOpen}\n * onClose={() => setIsOpen(false)}\n * placement=\"right\"\n * minWidth={300}\n * >\n * <div>Sidebar content</div>\n * </ResizableSidebar>\n * ```\n */\n// Helper functions to reduce cognitive complexity\nconst findParentContainer = (parentContainer: string, setPortalTarget: (target: HTMLElement | null) => void) => {\n const el = document.getElementById(parentContainer);\n if (el) {\n setPortalTarget(el);\n } else {\n requestAnimationFrame(() => {\n const retryEl = document.getElementById(parentContainer);\n if (retryEl) setPortalTarget(retryEl);\n });\n }\n};\n\nconst handleFullScreenToggle = (resizableRef: React.RefObject<React.ElementRef<typeof Resizable>>, fullScreen: boolean) => {\n if (!resizableRef.current) return;\n\n if (fullScreen) {\n localStorage.setItem(\"resizable-sidebar-width-before-fullscreen\", String(resizableRef.current.size?.width));\n } else {\n const width = localStorage.getItem(\"resizable-sidebar-width-before-fullscreen\");\n if (width) {\n resizableRef.current.updateSize({ width: width, height: \"100%\" });\n return;\n }\n }\n resizableRef.current.updateSize({\n width: fullScreen ? \"100vw\" : \"\",\n height: \"100%\",\n });\n};\n\nconst useSidebarEffects = (\n parentContainer: string | undefined,\n isOpen: boolean,\n fullScreen: boolean,\n onResize: ((width: number) => void) | undefined,\n resizableRef: React.RefObject<React.ElementRef<typeof Resizable>>,\n _minWidth: number\n) => {\n const [shouldRenderSidebar, setShouldRenderSidebar] = useState(false);\n const [portalTarget, setPortalTarget] = useState<HTMLElement | null>(null);\n\n useEffect(() => {\n if (!parentContainer || typeof window === \"undefined\") {\n setPortalTarget(null);\n return;\n }\n findParentContainer(parentContainer, setPortalTarget);\n }, [parentContainer]);\n\n useEffect(() => {\n handleFullScreenToggle(resizableRef, fullScreen);\n }, [fullScreen]);\n\n useEffect(() => {\n if (parentContainer && isOpen) {\n const frame = requestAnimationFrame(() => {\n setShouldRenderSidebar(true);\n });\n return () => {\n cancelAnimationFrame(frame);\n setShouldRenderSidebar(false);\n };\n }\n\n if (!parentContainer) {\n setShouldRenderSidebar(true);\n }\n\n if (!isOpen) {\n setShouldRenderSidebar(false);\n }\n }, [isOpen, parentContainer]);\n\n useEffect(() => {\n if (resizableRef.current?.size?.width && onResize) {\n onResize(resizableRef.current.size.width);\n }\n }, [resizableRef.current?.size?.width, onResize]);\n\n return { shouldRenderSidebar, portalTarget };\n};\n\nconst SidebarContent = ({\n isOpen,\n header,\n id,\n ref,\n className,\n containerClassName,\n headerClassName,\n widthStyle,\n heightStyle,\n motionVariants,\n resizableRef,\n fullScreen,\n maxResizableWidth,\n minWidth,\n handleKey,\n onDragEnd,\n onResize,\n children,\n}: {\n isOpen: boolean;\n header?: React.ReactNode;\n id?: string;\n ref: React.Ref<HTMLDivElement>;\n className?: string;\n containerClassName?: string;\n headerClassName?: string;\n widthStyle?: string | number;\n heightStyle: string;\n motionVariants: any;\n resizableRef: React.RefObject<React.ElementRef<typeof Resizable>>;\n fullScreen: boolean;\n maxResizableWidth: number;\n minWidth: number;\n handleKey: string;\n onDragEnd?: (() => void) | null;\n onResize?: (width: number) => void;\n children: React.ReactNode;\n}) => (\n <AnimatePresence>\n {isOpen && (\n <motion.div\n ref={ref}\n id={id}\n initial={motionVariants.initial}\n animate={motionVariants.animate}\n exit={motionVariants.exit}\n transition={{ type: \"tween\", duration: 0.3 }}\n className={cn(\n \"flex-shrink-0 z-50 relative bg-white border-neutral-200 dark:bg-black-800 dark:border-black-700\",\n fullScreen ? \"fixed w-full transition translate-x-4 duration-300\" : \"sticky\",\n className,\n )}\n style={{\n width: widthStyle,\n height: heightStyle,\n }}\n >\n <Resizable\n onResize={(e) => {\n e.stopPropagation();\n const width = resizableRef.current?.size?.width;\n if (onResize) {\n onResize(width || minWidth);\n }\n }}\n onResizeStart={(e) => {\n e.stopPropagation();\n }}\n ref={resizableRef}\n maxWidth={fullScreen ? maxResizableWidth : maxResizableWidth * 0.75}\n minWidth={minWidth}\n minHeight={heightStyle}\n maxHeight={heightStyle}\n enable={fullScreen ? {} : { [handleKey]: true }}\n handleClasses={{\n [handleKey]: cn(\n \"relative w-6 -left-1 flex items-center justify-center bg-transparent transition-colors cursor-ew-resize group z-[9999] hover:bg-neutral-200 dark:hover:bg-neutral-700\",\n ),\n }}\n handleComponent={{\n [handleKey]: (\n <div\n className={cn(\n \"absolute -left-2.5 top-1/2 -translate-y-1/2 flex items-center justify-center w-8 h-12 cursor-ew-resize opacity-0 group-hover:opacity-100 hover:opacity-100 active:opacity-100 transition-opacity z-[9999]\",\n handleKey === \"left\" && \"-right-2.5 -left-auto\",\n )}\n >\n <DragHandle />\n </div>\n ),\n }}\n className=\"!h-full\"\n onResizeStop={onDragEnd || undefined}\n >\n <div\n className={cn(\n \"h-full w-full flex flex-col overflow-hidden @container/sidebar border-b border-neutral-200 dark:border-black-700 bg-white dark:bg-black-800 dark:border\",\n containerClassName,\n )}\n >\n {header ? <div className={cn(\"py-4 px-6\", headerClassName)}>{header || null}</div> : null}\n <div className=\"flex-1 overflow-y-auto overflow-x-hidden\">{children}</div>\n </div>\n </Resizable>\n </motion.div>\n )} \n </AnimatePresence>\n);\n\nexport const ResizableSidebar = forwardRef<HTMLDivElement, ResizableSidebarProps>(\n (\n {\n isOpen,\n children,\n fullScreen = false,\n defaultSize = undefined,\n minWidth = 400,\n onDragEnd = null,\n onResize,\n className,\n placement = \"right\",\n parentContainer,\n header,\n id,\n containerClassName,\n headerClassName,\n ignoreParentContainerHeight = false,\n height,\n isMainSidebarExpanded = false,\n mainSidebarExpandedWidth = 280,\n mainSidebarCollapsedWidth = 80,\n navbarHeight = 64,\n },\n ref\n ) => {\n const mainSidebarWidth = isMainSidebarExpanded ? mainSidebarExpandedWidth : mainSidebarCollapsedWidth;\n const resizableRef = useRef<React.ElementRef<typeof Resizable>>(null);\n const { shouldRenderSidebar, portalTarget } = useSidebarEffects(\n parentContainer,\n isOpen,\n fullScreen,\n onResize,\n resizableRef,\n minWidth\n );\n\n const maxResizableWidth = typeof window !== \"undefined\" ? window.innerWidth - mainSidebarWidth : 0;\n\n // Passed sizes are the desktop maximum; both the drag floor and the open\n // width shrink by viewport breakpoint.\n const responsiveMinWidth = useResponsiveWidth(minWidth);\n const responsiveDefaultSize = useResponsiveWidth(defaultSize);\n\n const widthStyle = responsiveDefaultSize;\n const isRight = placement === \"right\";\n const heightStyle = height || (parentContainer && !ignoreParentContainerHeight ? \"100%\" : `calc(100vh - ${navbarHeight}px)`);\n\n const motionVariants = {\n initial: { x: isRight ? \"100%\" : \"-100%\" },\n animate: { x: 0 },\n exit: { x: isRight ? \"100%\" : \"-100%\" },\n };\n\n const handleKey = isRight ? \"left\" : \"right\";\n\n const sidebarContent = (\n <SidebarContent\n isOpen={isOpen}\n header={header}\n id={id}\n ref={ref}\n className={className}\n containerClassName={containerClassName}\n headerClassName={headerClassName}\n widthStyle={widthStyle}\n heightStyle={heightStyle}\n motionVariants={motionVariants}\n resizableRef={resizableRef}\n fullScreen={fullScreen}\n maxResizableWidth={maxResizableWidth}\n minWidth={responsiveMinWidth}\n handleKey={handleKey}\n onDragEnd={onDragEnd}\n onResize={onResize}\n >\n {children}\n </SidebarContent>\n );\n\n if (parentContainer) {\n if (!shouldRenderSidebar || !portalTarget) return null;\n return ReactDOM.createPortal(sidebarContent, portalTarget);\n }\n\n if (!shouldRenderSidebar) return null;\n\n return sidebarContent;\n }\n);\n\nResizableSidebar.displayName = \"ResizableSidebar\";\n"],"names":["DragHandle","jsx","jsxs","findParentContainer","parentContainer","setPortalTarget","el","retryEl","handleFullScreenToggle","resizableRef","fullScreen","width","useSidebarEffects","isOpen","onResize","_minWidth","shouldRenderSidebar","setShouldRenderSidebar","useState","portalTarget","useEffect","frame","SidebarContent","header","id","ref","className","containerClassName","headerClassName","widthStyle","heightStyle","motionVariants","maxResizableWidth","minWidth","handleKey","onDragEnd","children","AnimatePresence","motion","cn","Resizable","e","ResizableSidebar","forwardRef","defaultSize","placement","ignoreParentContainerHeight","height","isMainSidebarExpanded","mainSidebarExpandedWidth","mainSidebarCollapsedWidth","navbarHeight","mainSidebarWidth","useRef","responsiveMinWidth","useResponsiveWidth","isRight","sidebarContent","ReactDOM"],"mappings":"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"}
1
+ {"version":3,"file":"ResizableSidebar.es.js","sources":["../../../../src/components/data-display/resizable-sidebar/ResizableSidebar.tsx"],"sourcesContent":["import cn from \"classnames\";\nimport { AnimatePresence, motion } from \"framer-motion\";\nimport { forwardRef, useEffect, useRef, useState } from \"react\";\nimport ReactDOM from \"react-dom\";\nimport { Resizable } from \"re-resizable\";\n\nimport { useResponsiveWidth } from \"../../../hooks/useResponsiveWidth\";\n\n/**\n * Sidebar placement options\n */\nexport type ResizableSidebarPlacement = \"left\" | \"right\";\n\n/**\n * Props for the ResizableSidebar component\n */\nexport interface ResizableSidebarProps {\n /** Whether the sidebar is open */\n isOpen: boolean;\n /** Content to display in the sidebar */\n children: React.ReactNode;\n /** Whether to display in full screen mode */\n fullScreen?: boolean;\n /** Callback when drag/resize ends */\n onDragEnd?: (() => void) | null;\n /** Callback when resize occurs */\n onResize?: (width: number) => void;\n /** Additional CSS classes for the wrapper */\n className?: string;\n /** Default size of the sidebar */\n defaultSize?: string;\n /** Minimum width of the sidebar */\n minWidth?: number;\n /** Placement of the sidebar */\n placement?: ResizableSidebarPlacement;\n /** Parent container ID for portal rendering */\n parentContainer?: string;\n /** Header content */\n header?: React.ReactNode;\n /** Unique ID for the sidebar */\n id?: string;\n /** Additional CSS classes for the container */\n containerClassName?: string;\n /** Additional CSS classes for the header wrapper */\n headerClassName?: string;\n /** Whether to ignore parent container height */\n ignoreParentContainerHeight?: boolean;\n /** Custom height */\n height?: string;\n /** Whether the main sidebar is expanded (affects max width calculation) */\n isMainSidebarExpanded?: boolean;\n /** Width of the main sidebar when expanded */\n mainSidebarExpandedWidth?: number;\n /** Width of the main sidebar when collapsed */\n mainSidebarCollapsedWidth?: number;\n /** Height offset for navbar */\n navbarHeight?: number;\n}\n\n/**\n * Drag handle component for the resizable sidebar\n */\nconst DragHandle = () => {\n return (\n <div className=\"cursor-ew-resize flex items-center justify-center rounded-full bg-[#1018288F] bg-opacity-55 w-8 h-8 shadow-200 border-[1.5px] border-[#FFFFFF3D]\">\n <svg\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 20 20\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <mask id=\"mask0_36675_12\" maskUnits=\"userSpaceOnUse\" x=\"0\" y=\"0\" width=\"20\" height=\"20\">\n <rect y=\"20\" width=\"20\" height=\"20\" transform=\"rotate(-90 0 20)\" fill=\"#D9D9D9\" />\n </mask>\n <g mask=\"url(#mask0_36675_12)\">\n <path\n d=\"M15.9583 10L12.7292 6.77084C12.5625 6.60418 12.4792 6.40973 12.4792 6.18751C12.4792 5.96529 12.5625 5.77084 12.7292 5.60418C12.8958 5.43751 13.0938 5.35418 13.3229 5.35418C13.5521 5.35418 13.75 5.43751 13.9167 5.60418L17.1458 8.81251C17.4653 9.13195 17.625 9.52779 17.625 10C17.625 10.4722 17.4653 10.8681 17.1458 11.1875L13.9167 14.4167C13.75 14.5833 13.5521 14.6632 13.3229 14.6563C13.0938 14.6493 12.8958 14.5625 12.7292 14.3958C12.5625 14.2292 12.4792 14.0313 12.4792 13.8021C12.4792 13.5729 12.5625 13.375 12.7292 13.2083L15.9583 10ZM4.04167 10L7.25 13.2083C7.41667 13.375 7.49653 13.5695 7.48958 13.7917C7.48264 14.0139 7.40278 14.2083 7.25 14.375C7.08333 14.5417 6.88542 14.6285 6.65625 14.6354C6.42708 14.6424 6.22917 14.5625 6.0625 14.3958L2.85417 11.1875C2.53472 10.8681 2.375 10.4722 2.375 10C2.375 9.52779 2.53472 9.13195 2.85417 8.81251L6.0625 5.60418C6.22917 5.43751 6.42708 5.35765 6.65625 5.36459C6.88542 5.37154 7.08333 5.45834 7.25 5.62501C7.40278 5.79168 7.48264 5.98612 7.48958 6.20834C7.49653 6.43057 7.41667 6.62501 7.25 6.79168L4.04167 10Z\"\n fill=\"white\"\n />\n </g>\n </svg>\n </div>\n );\n};\n\n/**\n * ResizableSidebar component displays a resizable sidebar panel\n *\n * @example\n * ```tsx\n * <ResizableSidebar\n * isOpen={isOpen}\n * onClose={() => setIsOpen(false)}\n * placement=\"right\"\n * minWidth={300}\n * >\n * <div>Sidebar content</div>\n * </ResizableSidebar>\n * ```\n */\n// Helper functions to reduce cognitive complexity\nconst findParentContainer = (parentContainer: string, setPortalTarget: (target: HTMLElement | null) => void) => {\n const el = document.getElementById(parentContainer);\n if (el) {\n setPortalTarget(el);\n } else {\n requestAnimationFrame(() => {\n const retryEl = document.getElementById(parentContainer);\n if (retryEl) setPortalTarget(retryEl);\n });\n }\n};\n\nconst handleFullScreenToggle = (resizableRef: React.RefObject<React.ElementRef<typeof Resizable>>, fullScreen: boolean) => {\n if (!resizableRef.current) return;\n\n if (fullScreen) {\n localStorage.setItem(\"resizable-sidebar-width-before-fullscreen\", String(resizableRef.current.size?.width));\n } else {\n const width = localStorage.getItem(\"resizable-sidebar-width-before-fullscreen\");\n if (width) {\n resizableRef.current.updateSize({ width: width, height: \"100%\" });\n return;\n }\n }\n resizableRef.current.updateSize({\n width: fullScreen ? \"100vw\" : \"\",\n height: \"100%\",\n });\n};\n\nconst useSidebarEffects = (\n parentContainer: string | undefined,\n isOpen: boolean,\n fullScreen: boolean,\n onResize: ((width: number) => void) | undefined,\n resizableRef: React.RefObject<React.ElementRef<typeof Resizable>>,\n _minWidth: number\n) => {\n const [shouldRenderSidebar, setShouldRenderSidebar] = useState(false);\n const [portalTarget, setPortalTarget] = useState<HTMLElement | null>(null);\n\n useEffect(() => {\n if (!parentContainer || typeof window === \"undefined\") {\n setPortalTarget(null);\n return;\n }\n findParentContainer(parentContainer, setPortalTarget);\n }, [parentContainer]);\n\n useEffect(() => {\n handleFullScreenToggle(resizableRef, fullScreen);\n }, [fullScreen]);\n\n useEffect(() => {\n if (parentContainer && isOpen) {\n const frame = requestAnimationFrame(() => {\n setShouldRenderSidebar(true);\n });\n return () => {\n cancelAnimationFrame(frame);\n setShouldRenderSidebar(false);\n };\n }\n\n if (!parentContainer) {\n setShouldRenderSidebar(true);\n }\n\n if (!isOpen) {\n setShouldRenderSidebar(false);\n }\n }, [isOpen, parentContainer]);\n\n useEffect(() => {\n if (resizableRef.current?.size?.width && onResize) {\n onResize(resizableRef.current.size.width);\n }\n }, [resizableRef.current?.size?.width, onResize]);\n\n return { shouldRenderSidebar, portalTarget };\n};\n\nconst SidebarContent = ({\n isOpen,\n header,\n id,\n ref,\n className,\n containerClassName,\n headerClassName,\n widthStyle,\n heightStyle,\n motionVariants,\n resizableRef,\n fullScreen,\n maxResizableWidth,\n minWidth,\n handleKey,\n onDragEnd,\n onResize,\n children,\n}: {\n isOpen: boolean;\n header?: React.ReactNode;\n id?: string;\n ref: React.Ref<HTMLDivElement>;\n className?: string;\n containerClassName?: string;\n headerClassName?: string;\n widthStyle?: string | number;\n heightStyle: string;\n motionVariants: any;\n resizableRef: React.RefObject<React.ElementRef<typeof Resizable>>;\n fullScreen: boolean;\n maxResizableWidth: number;\n minWidth: number;\n handleKey: string;\n onDragEnd?: (() => void) | null;\n onResize?: (width: number) => void;\n children: React.ReactNode;\n}) => (\n <AnimatePresence>\n {isOpen && (\n <motion.div\n ref={ref}\n id={id}\n initial={motionVariants.initial}\n animate={motionVariants.animate}\n exit={motionVariants.exit}\n transition={{ type: \"tween\", duration: 0.3 }}\n className={cn(\n \"flex-shrink-0 z-50 relative bg-white border-neutral-200 dark:bg-black-800 dark:border-black-700\",\n fullScreen ? \"fixed w-full transition translate-x-4 duration-300\" : \"sticky\",\n className,\n )}\n style={{\n width: widthStyle,\n height: heightStyle,\n }}\n >\n <Resizable\n onResize={(e) => {\n e.stopPropagation();\n const width = resizableRef.current?.size?.width;\n if (onResize) {\n onResize(width || minWidth);\n }\n }}\n onResizeStart={(e) => {\n e.stopPropagation();\n }}\n ref={resizableRef}\n maxWidth={fullScreen ? maxResizableWidth : maxResizableWidth * 0.75}\n minWidth={minWidth}\n minHeight={heightStyle}\n maxHeight={heightStyle}\n enable={fullScreen ? {} : { [handleKey]: true }}\n handleClasses={{\n [handleKey]: cn(\n \"relative w-6 flex items-center justify-center bg-transparent transition-colors cursor-ew-resize group z-[9999] hover:bg-neutral-200 dark:hover:bg-neutral-700\",\n // Offset must match the resized edge so it aligns with re-resizable's positioning.\n handleKey === \"left\" ? \"-left-1\" : \"-right-1\",\n ),\n }}\n handleComponent={{\n [handleKey]: (\n <div\n className={cn(\n \"absolute top-1/2 -translate-y-1/2 flex items-center justify-center w-8 h-12 cursor-ew-resize opacity-0 group-hover:opacity-100 hover:opacity-100 active:opacity-100 transition-opacity z-[9999]\",\n handleKey === \"left\" ? \"-left-2.5\" : \"-right-2.5\",\n )}\n >\n <DragHandle />\n </div>\n ),\n }}\n className=\"!h-full\"\n onResizeStop={onDragEnd || undefined}\n >\n <div\n className={cn(\n \"h-full w-full flex flex-col overflow-hidden @container/sidebar border-b border-neutral-200 dark:border-black-700 bg-white dark:bg-black-800 dark:border\",\n containerClassName,\n )}\n >\n {header ? <div className={cn(\"py-4 px-6\", headerClassName)}>{header || null}</div> : null}\n <div className=\"flex-1 overflow-y-auto overflow-x-hidden\">{children}</div>\n </div>\n </Resizable>\n </motion.div>\n )} \n </AnimatePresence>\n);\n\nexport const ResizableSidebar = forwardRef<HTMLDivElement, ResizableSidebarProps>(\n (\n {\n isOpen,\n children,\n fullScreen = false,\n defaultSize = undefined,\n minWidth = 400,\n onDragEnd = null,\n onResize,\n className,\n placement = \"right\",\n parentContainer,\n header,\n id,\n containerClassName,\n headerClassName,\n ignoreParentContainerHeight = false,\n height,\n isMainSidebarExpanded = false,\n mainSidebarExpandedWidth = 280,\n mainSidebarCollapsedWidth = 80,\n navbarHeight = 64,\n },\n ref\n ) => {\n const mainSidebarWidth = isMainSidebarExpanded ? mainSidebarExpandedWidth : mainSidebarCollapsedWidth;\n const resizableRef = useRef<React.ElementRef<typeof Resizable>>(null);\n const { shouldRenderSidebar, portalTarget } = useSidebarEffects(\n parentContainer,\n isOpen,\n fullScreen,\n onResize,\n resizableRef,\n minWidth\n );\n\n const maxResizableWidth = typeof window !== \"undefined\" ? window.innerWidth - mainSidebarWidth : 0;\n\n // Passed sizes are the desktop maximum; both the drag floor and the open\n // width shrink by viewport breakpoint.\n const responsiveMinWidth = useResponsiveWidth(minWidth);\n const responsiveDefaultSize = useResponsiveWidth(defaultSize);\n\n const widthStyle = responsiveDefaultSize;\n const isRight = placement === \"right\";\n const heightStyle = height || (parentContainer && !ignoreParentContainerHeight ? \"100%\" : `calc(100vh - ${navbarHeight}px)`);\n\n const motionVariants = {\n initial: { x: isRight ? \"100%\" : \"-100%\" },\n animate: { x: 0 },\n exit: { x: isRight ? \"100%\" : \"-100%\" },\n };\n\n const handleKey = isRight ? \"left\" : \"right\";\n\n const sidebarContent = (\n <SidebarContent\n isOpen={isOpen}\n header={header}\n id={id}\n ref={ref}\n className={className}\n containerClassName={containerClassName}\n headerClassName={headerClassName}\n widthStyle={widthStyle}\n heightStyle={heightStyle}\n motionVariants={motionVariants}\n resizableRef={resizableRef}\n fullScreen={fullScreen}\n maxResizableWidth={maxResizableWidth}\n minWidth={responsiveMinWidth}\n handleKey={handleKey}\n onDragEnd={onDragEnd}\n onResize={onResize}\n >\n {children}\n </SidebarContent>\n );\n\n if (parentContainer) {\n if (!shouldRenderSidebar || !portalTarget) return null;\n return ReactDOM.createPortal(sidebarContent, portalTarget);\n }\n\n if (!shouldRenderSidebar) return null;\n\n return sidebarContent;\n }\n);\n\nResizableSidebar.displayName = \"ResizableSidebar\";\n"],"names":["DragHandle","jsx","jsxs","findParentContainer","parentContainer","setPortalTarget","el","retryEl","handleFullScreenToggle","resizableRef","fullScreen","width","useSidebarEffects","isOpen","onResize","_minWidth","shouldRenderSidebar","setShouldRenderSidebar","useState","portalTarget","useEffect","frame","SidebarContent","header","id","ref","className","containerClassName","headerClassName","widthStyle","heightStyle","motionVariants","maxResizableWidth","minWidth","handleKey","onDragEnd","children","AnimatePresence","motion","cn","Resizable","e","ResizableSidebar","forwardRef","defaultSize","placement","ignoreParentContainerHeight","height","isMainSidebarExpanded","mainSidebarExpandedWidth","mainSidebarCollapsedWidth","navbarHeight","mainSidebarWidth","useRef","responsiveMinWidth","useResponsiveWidth","isRight","sidebarContent","ReactDOM"],"mappings":"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"}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@lax-wp/design-system",
3
3
  "private": false,
4
- "version": "0.14.2",
4
+ "version": "0.14.4",
5
5
  "type": "module",
6
6
  "main": "dist/index.cjs.js",
7
7
  "module": "dist/index.es.js",