@lax-wp/design-system 0.14.1 → 0.14.2

package/dist/components/data-display/infinite-table/body/cell/InlineCurrencyField.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),B=require("../../../../forms/currency-input/currency.constant.cjs.js"),K=require("../../../../../utils/countryFlags.cjs.js"),F=require("../../../../../_virtual/index.cjs.js"),r=require("react"),U=require("../../context.cjs.js"),m=new Map;let b=null;const O=({id:n,value:s,onChange:d,onBlur:h,currencyCode:E="USD",autoFocus:q=!1,inputStyle:M,disabled:y=!1})=>{const{openCurrencyDropdown:g,closeCurrencyDropdown:k,currencyDropdownConfig:o,setCurrencyForCell:C,getCurrencyForCell:T}=r.useContext(U.TableContext),p=T?.(n)||E||"USD",[u,v]=r.useState(p),[R,S]=r.useState(s),c=r.useRef(s),a=r.useRef(null),x=r.useRef(null),i=r.useRef(!1),w=r.useRef(d);r.useEffect(()=>{c.current=R},[R]),r.useEffect(()=>{w.current=d},[d]);const D=r.useRef(!1);r.useEffect(()=>{D.current||(S(s),c.current=s,D.current=!0)},[s]),r.useEffect(()=>{p!==u&&v(p)},[p,u]),r.useLayoutEffect(()=>{const e=a.current;if(!e)return;const t=m.get(n);t?(e.value=c.current||"",e.focus(),e.setSelectionRange(t.start,t.end)):b!==n&&(e.value=c.current||"",e.focus())},[]);const N=e=>{if(e==null||e==="")return"";const t=Number(e);return isNaN(t)?String(e):t.toLocaleString("en-US",{minimumFractionDigits:2,maximumFractionDigits:2})},I=e=>{const t=e.target.value;if(t!==""&&(Number(t)<0||!/^\d*\.?\d*$/.test(t))){e.target.value=c.current==="0"?"":c.current||"";return}m.set(n,{start:e.target.selectionStart??0,end:e.target.selectionEnd??0});const f=t===""||t===null||t===void 0?"0":t;S(f),c.current=f,d(f,u)},L=()=>{a.current&&(a.current.value=c.current||"")},P=r.useCallback(()=>{b=n,m.delete(n),a.current&&(a.current.value=N(c.current)),setTimeout(()=>{!i.current&&!o&&h?.()},150),requestAnimationFrame(()=>{b=null})},[n,h,o]),j=r.useCallback(e=>{v(e),C?.(n,e);const t=c.current,f=t===""||t===null||t===void 0?"0":t;w.current(f,e),i.current=!1},[n,C]),_=r.useCallback(e=>{if(e.stopPropagation(),e.preventDefault(),i.current=!0,o)k?.(),i.current=!1;else if(x.current&&g){const t=x.current.getBoundingClientRect();g({anchorRect:t,currentCurrency:u,onSelect:j})}},[o,g,k,u,j]);return r.useEffect(()=>{o||setTimeout(()=>{i.current=!1},100)},[o]),l.jsx("div",{className:"flex flex-col gap-0 mb-0 w-full h-full",children:l.jsxs("label",{className:"relative block w-full h-full",children:[l.jsx("span",{className:"absolute inset-y-0 left-1 flex items-center pl-3 py-1.5 text-neutral-900 dark:text-white z-10",children:B.CURRENCY_SYMBOLS[u]}),l.jsx("input",{ref:a,placeholder:"0.00",type:"text",inputMode:"decimal",className:F("pl-11 pr-24 border h-full text-sm rounded-lg block w-full px-2.5 py-1.5 font-inter font-medium","text-neutral-900 dark:text-black-200 bg-white dark:bg-black-600","border-gray-300 dark:border-black-600","disabled:bg-neutral-50 dark:disabled:!bg-black-800 dark:disabled:placeholder:!text-black-400"),onChange:I,onFocus:L,onBlur:P,onKeyDown:e=>{e.stopPropagation(),!(e.key.length>1||e.ctrlKey||e.metaKey)&&(e.key>="0"&&e.key<="9"||e.key==="."&&!e.currentTarget.value.includes(".")||e.preventDefault())},defaultValue:N(s),id:n,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)",...M},autoComplete:"off",autoFocus:q,disabled:y}),l.jsx("div",{ref:x,className:F("absolute inset-y-0 right-1 flex items-center h-full",y?"pointer-events-none opacity-50":"cursor-pointer"),onClick:_,onMouseDown:e=>{e.stopPropagation(),e.preventDefault(),i.current=!0},children:l.jsxs("div",{className:"px-2 py-1.5 text-sm text-gray-700 dark:text-black-200 flex items-center gap-1 hover:bg-neutral-100 dark:hover:bg-black-500 rounded transition-colors",children:[K.getFlagComponent(u),l.jsx("span",{className:"font-medium",children:u}),l.jsx("svg",{className:"w-3 h-3",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",children:l.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M19 9l-7 7-7-7"})})]})})]})})};exports.InlineCurrencyField=O;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),B=require("../../../../forms/currency-input/currency.constant.cjs.js"),K=require("../../../../../utils/countryFlags.cjs.js"),F=require("../../../../../_virtual/index.cjs.js"),r=require("react"),U=require("../../context.cjs.js"),m=new Map;let b=null;const O=({id:n,value:s,onChange:d,onBlur:y,currencyCode:E="USD",autoFocus:q=!1,inputStyle:M,disabled:h=!1})=>{const{openCurrencyDropdown:x,closeCurrencyDropdown:k,currencyDropdownConfig:o,setCurrencyForCell:C,getCurrencyForCell:T}=r.useContext(U.TableContext),p=T?.(n)||E||"USD",[u,v]=r.useState(p),[R,S]=r.useState(s),c=r.useRef(s),a=r.useRef(null),g=r.useRef(null),i=r.useRef(!1),w=r.useRef(d);r.useEffect(()=>{c.current=R},[R]),r.useEffect(()=>{w.current=d},[d]);const D=r.useRef(!1);r.useEffect(()=>{D.current||(S(s),c.current=s,D.current=!0)},[s]),r.useEffect(()=>{p!==u&&v(p)},[p,u]),r.useLayoutEffect(()=>{const e=a.current;if(!e)return;const t=m.get(n);t?(e.value=c.current||"",e.focus(),e.setSelectionRange(t.start,t.end)):b!==n&&(e.value=c.current||"",e.focus())},[]);const N=e=>{if(e==null||e==="")return"";const t=Number(e);return isNaN(t)?String(e):t.toLocaleString("en-US",{minimumFractionDigits:2,maximumFractionDigits:2})},I=e=>{const t=e.target.value;if(t!==""&&(Number(t)<0||!/^\d*\.?\d*$/.test(t))){e.target.value=c.current==="0"?"":c.current||"";return}m.set(n,{start:e.target.selectionStart??0,end:e.target.selectionEnd??0});const f=t===""||t===null||t===void 0?"0":t;S(f),c.current=f,d(f,u)},L=()=>{a.current&&(a.current.value=c.current||"")},P=r.useCallback(()=>{b=n,m.delete(n),a.current&&(a.current.value=N(c.current)),setTimeout(()=>{!i.current&&!o&&y?.()},150),requestAnimationFrame(()=>{b=null})},[n,y,o]),j=r.useCallback(e=>{v(e),C?.(n,e);const t=c.current,f=t===""||t===null||t===void 0?"0":t;w.current(f,e),i.current=!1},[n,C]),_=r.useCallback(e=>{if(e.stopPropagation(),e.preventDefault(),i.current=!0,o)k?.(),i.current=!1;else if(g.current&&x){const t=g.current.getBoundingClientRect();x({anchorRect:t,currentCurrency:u,onSelect:j})}},[o,x,k,u,j]);return r.useEffect(()=>{o||setTimeout(()=>{i.current=!1},100)},[o]),l.jsx("div",{className:"flex flex-col gap-0 mb-0 w-full h-full",children:l.jsxs("label",{className:"relative block w-full h-full",children:[l.jsx("span",{className:"absolute inset-y-0 left-1 flex items-center pl-3 py-1.5 text-neutral-900 dark:text-white z-10",children:B.CURRENCY_SYMBOLS[u]}),l.jsx("input",{ref:a,placeholder:"0.00",type:"text",inputMode:"decimal",className:F("pl-11 pr-24 border h-full text-sm rounded-lg block w-full px-2.5 py-1.5 font-inter font-medium","text-neutral-900 dark:text-black-200 bg-white dark:bg-black-600","border-gray-300 dark:border-black-600","disabled:bg-neutral-50 dark:disabled:!bg-black-800 dark:disabled:placeholder:!text-black-400"),onChange:I,onFocus:L,onBlur:P,onKeyDown:e=>{e.stopPropagation(),!(e.key.length>1||e.ctrlKey||e.metaKey)&&(e.key>="0"&&e.key<="9"||e.key==="."&&!e.currentTarget.value.includes(".")||e.preventDefault())},defaultValue:N(s),id:n,style:{border:"none",boxShadow:"0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)",...M},autoComplete:"off",autoFocus:q,disabled:h}),l.jsx("div",{ref:g,className:F("absolute inset-y-0 right-1 flex items-center h-full",h?"pointer-events-none opacity-50":"cursor-pointer"),onClick:_,onMouseDown:e=>{e.stopPropagation(),e.preventDefault(),i.current=!0},children:l.jsxs("div",{className:"px-2 py-1.5 text-sm text-gray-700 dark:text-black-200 flex items-center gap-1 hover:bg-neutral-100 dark:hover:bg-black-500 rounded transition-colors",children:[K.getFlagComponent(u),l.jsx("span",{className:"font-medium",children:u}),l.jsx("svg",{className:"w-3 h-3",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",children:l.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M19 9l-7 7-7-7"})})]})})]})})};exports.InlineCurrencyField=O;
 //# sourceMappingURL=InlineCurrencyField.cjs.js.map

package/dist/components/data-display/infinite-table/body/cell/InlineCurrencyField.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"InlineCurrencyField.cjs.js","sources":["../../../../../../src/components/data-display/infinite-table/body/cell/InlineCurrencyField.tsx"],"sourcesContent":["import { CURRENCY_SYMBOLS } from '../../../../forms/currency-input/currency.constant';\nimport { getFlagComponent } from '../../../../../utils/countryFlags';\nimport cn from 'classnames';\nimport React, { useCallback, useContext, useEffect, useLayoutEffect, useRef, useState } from 'react';\n\nimport { TableContext } from '../../context';\n\ntype InlineCurrencyFieldProps = {\n  id: string;\n  value: string;\n  onChange: (numericValue: string, currencyCode: string) => void;\n  onBlur?: () => void;\n  currencyCode: string;\n  autoFocus?: boolean;\n  inputStyle?: React.CSSProperties;\n  disabled?: boolean;\n};\n\nconst _cursorPositionCache = new Map<string, { start: number; end: number }>();\nlet _blurringCellKey: string | null = null;\n\nexport const InlineCurrencyField: React.FC<InlineCurrencyFieldProps> = ({\n  id,\n  value,\n  onChange,\n  onBlur,\n  currencyCode = 'USD',\n  autoFocus = false,\n  inputStyle,\n  disabled = false,\n}) => {\n  const { openCurrencyDropdown, closeCurrencyDropdown, currencyDropdownConfig, setCurrencyForCell, getCurrencyForCell } = useContext(TableContext);\n  const contextCurrency = getCurrencyForCell?.(id);\n  const effectiveCurrency = contextCurrency || currencyCode || 'USD';\n  const [selectedCurrency, setSelectedCurrency] = useState<string>(effectiveCurrency);\n  const [internalValue, setInternalValue] = useState(value);\n  const internalValueRef = useRef(value);\n  const inputRef = useRef<HTMLInputElement>(null);\n  const triggerRef = useRef<HTMLDivElement>(null);\n  const isInteractingRef = useRef(false);\n  const onChangeRef = useRef(onChange);\n\n  useEffect(() => {\n    internalValueRef.current = internalValue;\n  }, [internalValue]);\n\n  useEffect(() => {\n    onChangeRef.current = onChange;\n  }, [onChange]);\n\n  const hasInitializedRef = useRef(false);\n  useEffect(() => {\n    if (!hasInitializedRef.current) {\n      setInternalValue(value);\n      internalValueRef.current = value;\n      hasInitializedRef.current = true;\n    }\n  }, [value]);\n\n  useEffect(() => {\n    if (effectiveCurrency !== selectedCurrency) {\n      setSelectedCurrency(effectiveCurrency);\n    }\n  }, [effectiveCurrency, selectedCurrency]);\n\n  useLayoutEffect(() => {\n    const el = inputRef.current;\n    if (!el) return;\n\n    const cached = _cursorPositionCache.get(id);\n    if (cached) {\n      el.value = internalValueRef.current || '';\n      el.focus();\n      el.setSelectionRange(cached.start, cached.end);\n    } else if (_blurringCellKey !== id) {\n      el.value = internalValueRef.current || '';\n      el.focus();\n    }\n  }, []);\n\n  const formatCurrency = (targetValue: string | number | null | undefined) => {\n    if (targetValue === null || targetValue === undefined || targetValue === '') return '';\n    const number = Number(targetValue);\n    if (isNaN(number)) return String(targetValue);\n    return number.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 });\n  };\n\n  const handleOnChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const _value = e.target.value;\n    if (_value !== '' && (Number(_value) < 0 || !/^\\d*\\.?\\d*$/.test(_value))) {\n      e.target.value = internalValueRef.current === '0' ? '' : internalValueRef.current || '';\n      return;\n    }\n\n    _cursorPositionCache.set(id, {\n      start: e.target.selectionStart ?? 0,\n      end: e.target.selectionEnd ?? 0,\n    });\n\n    const numericValue = _value === '' || _value === null || _value === undefined ? '0' : _value;\n    setInternalValue(numericValue);\n    internalValueRef.current = numericValue;\n    onChange(numericValue, selectedCurrency);\n  };\n\n  const handleFocus = () => {\n    if (inputRef.current) {\n      inputRef.current.value = internalValueRef.current || '';\n    }\n  };\n\n  const handleBlur = useCallback(() => {\n    _blurringCellKey = id;\n    _cursorPositionCache.delete(id);\n    if (inputRef.current) {\n      inputRef.current.value = formatCurrency(internalValueRef.current);\n    }\n    setTimeout(() => {\n      if (!isInteractingRef.current && !currencyDropdownConfig) onBlur?.();\n    }, 150);\n    requestAnimationFrame(() => {\n      _blurringCellKey = null;\n    });\n  }, [id, onBlur, currencyDropdownConfig]);\n\n  const handleCurrencySelect = useCallback(\n    (newCurrency: string) => {\n      setSelectedCurrency(newCurrency);\n      setCurrencyForCell?.(id, newCurrency);\n      const currentValue = internalValueRef.current;\n      const numericValue = currentValue === '' || currentValue === null || currentValue === undefined ? '0' : currentValue;\n      onChangeRef.current(numericValue, newCurrency);\n      isInteractingRef.current = false;\n    },\n    [id, setCurrencyForCell],\n  );\n\n  const handleToggleDropdown = useCallback(\n    (e: React.MouseEvent) => {\n      e.stopPropagation();\n      e.preventDefault();\n      isInteractingRef.current = true;\n      if (currencyDropdownConfig) {\n        closeCurrencyDropdown?.();\n        isInteractingRef.current = false;\n      } else if (triggerRef.current && openCurrencyDropdown) {\n        const rect = triggerRef.current.getBoundingClientRect();\n        openCurrencyDropdown({ anchorRect: rect, currentCurrency: selectedCurrency, onSelect: handleCurrencySelect });\n      }\n    },\n    [currencyDropdownConfig, openCurrencyDropdown, closeCurrencyDropdown, selectedCurrency, handleCurrencySelect],\n  );\n\n  useEffect(() => {\n    if (!currencyDropdownConfig) {\n      setTimeout(() => {\n        isInteractingRef.current = false;\n      }, 100);\n    }\n  }, [currencyDropdownConfig]);\n\n  return (\n    <div className='flex flex-col gap-0 mb-0 w-full h-full'>\n      <label className='relative block w-full h-full'>\n        <span className='absolute inset-y-0 left-1 flex items-center pl-3 py-1.5 text-neutral-900 dark:text-white z-10'>\n          {CURRENCY_SYMBOLS[selectedCurrency]}\n        </span>\n        <input\n          ref={inputRef}\n          placeholder='0.00'\n          type='text'\n          inputMode='decimal'\n          className={cn(\n            'pl-11 pr-24 border h-full text-sm rounded-lg block w-full px-2.5 py-1.5 font-inter font-medium',\n            'text-neutral-900 dark:text-black-200 bg-white dark:bg-black-600',\n            'border-gray-300 dark:border-black-600',\n            'disabled:bg-neutral-50 dark:disabled:!bg-black-800 dark:disabled:placeholder:!text-black-400',\n          )}\n          onChange={handleOnChange}\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n          onKeyDown={(e) => {\n            e.stopPropagation();\n            if (e.key.length > 1 || e.ctrlKey || e.metaKey) return;\n            if (e.key >= '0' && e.key <= '9') return;\n            if (e.key === '.' && !e.currentTarget.value.includes('.')) return;\n            e.preventDefault();\n          }}\n          defaultValue={formatCurrency(value)}\n          id={id}\n          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)', ...inputStyle }}\n          autoComplete='off'\n          autoFocus={autoFocus}\n          disabled={disabled}\n        />\n        <div\n          ref={triggerRef}\n          className={cn('absolute inset-y-0 right-1 flex items-center h-full', disabled ? 'pointer-events-none opacity-50' : 'cursor-pointer')}\n          onClick={handleToggleDropdown}\n          onMouseDown={(e) => { e.stopPropagation(); e.preventDefault(); isInteractingRef.current = true; }}\n        >\n          <div className='px-2 py-1.5 text-sm text-gray-700 dark:text-black-200 flex items-center gap-1 hover:bg-neutral-100 dark:hover:bg-black-500 rounded transition-colors'>\n            {getFlagComponent(selectedCurrency)}\n            <span className='font-medium'>{selectedCurrency}</span>\n            <svg className='w-3 h-3' fill='none' stroke='currentColor' viewBox='0 0 24 24'>\n              <path strokeLinecap='round' strokeLinejoin='round' strokeWidth={2} d='M19 9l-7 7-7-7' />\n            </svg>\n          </div>\n        </div>\n      </label>\n    </div>\n  );\n};\n"],"names":["_cursorPositionCache","_blurringCellKey","InlineCurrencyField","id","value","onChange","onBlur","currencyCode","autoFocus","inputStyle","disabled","openCurrencyDropdown","closeCurrencyDropdown","currencyDropdownConfig","setCurrencyForCell","getCurrencyForCell","useContext","TableContext","effectiveCurrency","selectedCurrency","setSelectedCurrency","useState","internalValue","setInternalValue","internalValueRef","useRef","inputRef","triggerRef","isInteractingRef","onChangeRef","useEffect","hasInitializedRef","useLayoutEffect","el","cached","formatCurrency","targetValue","number","handleOnChange","_value","numericValue","handleFocus","handleBlur","useCallback","handleCurrencySelect","newCurrency","currentValue","handleToggleDropdown","rect","jsxs","jsx","CURRENCY_SYMBOLS","cn","getFlagComponent"],"mappings":"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"}
+{"version":3,"file":"InlineCurrencyField.cjs.js","sources":["../../../../../../src/components/data-display/infinite-table/body/cell/InlineCurrencyField.tsx"],"sourcesContent":["import { CURRENCY_SYMBOLS } from '../../../../forms/currency-input/currency.constant';\nimport { getFlagComponent } from '../../../../../utils/countryFlags';\nimport cn from 'classnames';\nimport React, { useCallback, useContext, useEffect, useLayoutEffect, useRef, useState } from 'react';\n\nimport { TableContext } from '../../context';\n\ntype InlineCurrencyFieldProps = {\n  id: string;\n  value: string;\n  onChange: (numericValue: string, currencyCode: string) => void;\n  onBlur?: () => void;\n  currencyCode: string;\n  autoFocus?: boolean;\n  inputStyle?: React.CSSProperties;\n  disabled?: boolean;\n};\n\nconst _cursorPositionCache = new Map<string, { start: number; end: number }>();\nlet _blurringCellKey: string | null = null;\n\nexport const InlineCurrencyField: React.FC<InlineCurrencyFieldProps> = ({\n  id,\n  value,\n  onChange,\n  onBlur,\n  currencyCode = 'USD',\n  autoFocus = false,\n  inputStyle,\n  disabled = false,\n}) => {\n  const { openCurrencyDropdown, closeCurrencyDropdown, currencyDropdownConfig, setCurrencyForCell, getCurrencyForCell } = useContext(TableContext);\n  const contextCurrency = getCurrencyForCell?.(id);\n  const effectiveCurrency = contextCurrency || currencyCode || 'USD';\n  const [selectedCurrency, setSelectedCurrency] = useState<string>(effectiveCurrency);\n  const [internalValue, setInternalValue] = useState(value);\n  const internalValueRef = useRef(value);\n  const inputRef = useRef<HTMLInputElement>(null);\n  const triggerRef = useRef<HTMLDivElement>(null);\n  const isInteractingRef = useRef(false);\n  const onChangeRef = useRef(onChange);\n\n  useEffect(() => {\n    internalValueRef.current = internalValue;\n  }, [internalValue]);\n\n  useEffect(() => {\n    onChangeRef.current = onChange;\n  }, [onChange]);\n\n  const hasInitializedRef = useRef(false);\n  useEffect(() => {\n    if (!hasInitializedRef.current) {\n      setInternalValue(value);\n      internalValueRef.current = value;\n      hasInitializedRef.current = true;\n    }\n  }, [value]);\n\n  useEffect(() => {\n    if (effectiveCurrency !== selectedCurrency) {\n      setSelectedCurrency(effectiveCurrency);\n    }\n  }, [effectiveCurrency, selectedCurrency]);\n\n  useLayoutEffect(() => {\n    const el = inputRef.current;\n    if (!el) return;\n\n    const cached = _cursorPositionCache.get(id);\n    if (cached) {\n      el.value = internalValueRef.current || '';\n      el.focus();\n      el.setSelectionRange(cached.start, cached.end);\n    } else if (_blurringCellKey !== id) {\n      el.value = internalValueRef.current || '';\n      el.focus();\n    }\n  }, []);\n\n  const formatCurrency = (targetValue: string | number | null | undefined) => {\n    if (targetValue === null || targetValue === undefined || targetValue === '') return '';\n    const number = Number(targetValue);\n    if (isNaN(number)) return String(targetValue);\n    return number.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 });\n  };\n\n  const handleOnChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const _value = e.target.value;\n    if (_value !== '' && (Number(_value) < 0 || !/^\\d*\\.?\\d*$/.test(_value))) {\n      e.target.value = internalValueRef.current === '0' ? '' : internalValueRef.current || '';\n      return;\n    }\n\n    _cursorPositionCache.set(id, {\n      start: e.target.selectionStart ?? 0,\n      end: e.target.selectionEnd ?? 0,\n    });\n\n    const numericValue = _value === '' || _value === null || _value === undefined ? '0' : _value;\n    setInternalValue(numericValue);\n    internalValueRef.current = numericValue;\n    onChange(numericValue, selectedCurrency);\n  };\n\n  const handleFocus = () => {\n    if (inputRef.current) {\n      inputRef.current.value = internalValueRef.current || '';\n    }\n  };\n\n  const handleBlur = useCallback(() => {\n    _blurringCellKey = id;\n    _cursorPositionCache.delete(id);\n    if (inputRef.current) {\n      inputRef.current.value = formatCurrency(internalValueRef.current);\n    }\n    setTimeout(() => {\n      if (!isInteractingRef.current && !currencyDropdownConfig) onBlur?.();\n    }, 150);\n    requestAnimationFrame(() => {\n      _blurringCellKey = null;\n    });\n  }, [id, onBlur, currencyDropdownConfig]);\n\n  const handleCurrencySelect = useCallback(\n    (newCurrency: string) => {\n      setSelectedCurrency(newCurrency);\n      setCurrencyForCell?.(id, newCurrency);\n      const currentValue = internalValueRef.current;\n      const numericValue = currentValue === '' || currentValue === null || currentValue === undefined ? '0' : currentValue;\n      onChangeRef.current(numericValue, newCurrency);\n      isInteractingRef.current = false;\n    },\n    [id, setCurrencyForCell],\n  );\n\n  const handleToggleDropdown = useCallback(\n    (e: React.MouseEvent) => {\n      e.stopPropagation();\n      e.preventDefault();\n      isInteractingRef.current = true;\n      if (currencyDropdownConfig) {\n        closeCurrencyDropdown?.();\n        isInteractingRef.current = false;\n      } else if (triggerRef.current && openCurrencyDropdown) {\n        const rect = triggerRef.current.getBoundingClientRect();\n        openCurrencyDropdown({ anchorRect: rect, currentCurrency: selectedCurrency, onSelect: handleCurrencySelect });\n      }\n    },\n    [currencyDropdownConfig, openCurrencyDropdown, closeCurrencyDropdown, selectedCurrency, handleCurrencySelect],\n  );\n\n  useEffect(() => {\n    if (!currencyDropdownConfig) {\n      setTimeout(() => {\n        isInteractingRef.current = false;\n      }, 100);\n    }\n  }, [currencyDropdownConfig]);\n\n  return (\n    <div className='flex flex-col gap-0 mb-0 w-full h-full'>\n      <label className='relative block w-full h-full'>\n        <span className='absolute inset-y-0 left-1 flex items-center pl-3 py-1.5 text-neutral-900 dark:text-white z-10'>\n          {CURRENCY_SYMBOLS[selectedCurrency]}\n        </span>\n        <input\n          ref={inputRef}\n          placeholder='0.00'\n          type='text'\n          inputMode='decimal'\n          className={cn(\n            'pl-11 pr-24 border h-full text-sm rounded-lg block w-full px-2.5 py-1.5 font-inter font-medium',\n            'text-neutral-900 dark:text-black-200 bg-white dark:bg-black-600',\n            'border-gray-300 dark:border-black-600',\n            'disabled:bg-neutral-50 dark:disabled:!bg-black-800 dark:disabled:placeholder:!text-black-400',\n          )}\n          onChange={handleOnChange}\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n          onKeyDown={(e) => {\n            e.stopPropagation();\n            if (e.key.length > 1 || e.ctrlKey || e.metaKey) return;\n            if (e.key >= '0' && e.key <= '9') return;\n            if (e.key === '.' && !e.currentTarget.value.includes('.')) return;\n            e.preventDefault();\n          }}\n          defaultValue={formatCurrency(value)}\n          id={id}\n          style={{ border: 'none', boxShadow: '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)', ...inputStyle }}\n          autoComplete='off'\n          autoFocus={autoFocus}\n          disabled={disabled}\n        />\n        <div\n          ref={triggerRef}\n          className={cn('absolute inset-y-0 right-1 flex items-center h-full', disabled ? 'pointer-events-none opacity-50' : 'cursor-pointer')}\n          onClick={handleToggleDropdown}\n          onMouseDown={(e) => { e.stopPropagation(); e.preventDefault(); isInteractingRef.current = true; }}\n        >\n          <div className='px-2 py-1.5 text-sm text-gray-700 dark:text-black-200 flex items-center gap-1 hover:bg-neutral-100 dark:hover:bg-black-500 rounded transition-colors'>\n            {getFlagComponent(selectedCurrency)}\n            <span className='font-medium'>{selectedCurrency}</span>\n            <svg className='w-3 h-3' fill='none' stroke='currentColor' viewBox='0 0 24 24'>\n              <path strokeLinecap='round' strokeLinejoin='round' strokeWidth={2} d='M19 9l-7 7-7-7' />\n            </svg>\n          </div>\n        </div>\n      </label>\n    </div>\n  );\n};\n"],"names":["_cursorPositionCache","_blurringCellKey","InlineCurrencyField","id","value","onChange","onBlur","currencyCode","autoFocus","inputStyle","disabled","openCurrencyDropdown","closeCurrencyDropdown","currencyDropdownConfig","setCurrencyForCell","getCurrencyForCell","useContext","TableContext","effectiveCurrency","selectedCurrency","setSelectedCurrency","useState","internalValue","setInternalValue","internalValueRef","useRef","inputRef","triggerRef","isInteractingRef","onChangeRef","useEffect","hasInitializedRef","useLayoutEffect","el","cached","formatCurrency","targetValue","number","handleOnChange","_value","numericValue","handleFocus","handleBlur","useCallback","handleCurrencySelect","newCurrency","currentValue","handleToggleDropdown","rect","jsxs","jsx","CURRENCY_SYMBOLS","cn","getFlagComponent"],"mappings":"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"}

package/dist/components/data-display/infinite-table/body/cell/InlineCurrencyField.es.js

@@ -2,9 +2,9 @@ import { jsx as o, jsxs as T } from "react/jsx-runtime";
 import { CURRENCY_SYMBOLS as O } from "../../../../forms/currency-input/currency.constant.es.js";
 import { getFlagComponent as Y } from "../../../../../utils/countryFlags.es.js";
 import B from "../../../../../_virtual/index.es.js";
-import { useContext as q, useState as E, useRef as i, useEffect as d, useLayoutEffect as A, useCallback as b } from "react";
+import { useContext as q, useState as E, useRef as i, useEffect as d, useLayoutEffect as A, useCallback as x } from "react";
 import { TableContext as W } from "../../context.es.js";
-const x = /* @__PURE__ */ new Map();
+const h = /* @__PURE__ */ new Map();
 let y = null;
 const ee = ({
   id: r,
@@ -16,7 +16,7 @@ const ee = ({
   inputStyle: P,
   disabled: C = !1
 }) => {
-  const { openCurrencyDropdown: g, closeCurrencyDropdown: v, currencyDropdownConfig: u, setCurrencyForCell: w, getCurrencyForCell: U } = q(W), m = U?.(r) || I || "USD", [l, S] = E(m), [D, N] = E(c), n = i(c), a = i(null), h = i(null), s = i(!1), R = i(p);
+  const { openCurrencyDropdown: g, closeCurrencyDropdown: v, currencyDropdownConfig: u, setCurrencyForCell: S, getCurrencyForCell: U } = q(W), m = U?.(r) || I || "USD", [l, w] = E(m), [D, N] = E(c), n = i(c), s = i(null), b = i(null), a = i(!1), R = i(p);
   d(() => {
     n.current = D;
   }, [D]), d(() => {
@@ -26,11 +26,11 @@ const ee = ({
   d(() => {
     F.current || (N(c), n.current = c, F.current = !0);
   }, [c]), d(() => {
-    m !== l && S(m);
+    m !== l && w(m);
   }, [m, l]), A(() => {
-    const e = a.current;
+    const e = s.current;
     if (!e) return;
-    const t = x.get(r);
+    const t = h.get(r);
     t ? (e.value = n.current || "", e.focus(), e.setSelectionRange(t.start, t.end)) : y !== r && (e.value = n.current || "", e.focus());
   }, []);
   const L = (e) => {
@@ -43,33 +43,33 @@ const ee = ({
       e.target.value = n.current === "0" ? "" : n.current || "";
       return;
     }
-    x.set(r, {
+    h.set(r, {
       start: e.target.selectionStart ?? 0,
       end: e.target.selectionEnd ?? 0
     });
     const f = t === "" || t === null || t === void 0 ? "0" : t;
     N(f), n.current = f, p(f, l);
   }, j = () => {
-    a.current && (a.current.value = n.current || "");
-  }, V = b(() => {
-    y = r, x.delete(r), a.current && (a.current.value = L(n.current)), setTimeout(() => {
-      !s.current && !u && k?.();
+    s.current && (s.current.value = n.current || "");
+  }, V = x(() => {
+    y = r, h.delete(r), s.current && (s.current.value = L(n.current)), setTimeout(() => {
+      !a.current && !u && k?.();
     }, 150), requestAnimationFrame(() => {
       y = null;
     });
-  }, [r, k, u]), M = b(
+  }, [r, k, u]), M = x(
     (e) => {
-      S(e), w?.(r, e);
+      w(e), S?.(r, e);
       const t = n.current, f = t === "" || t === null || t === void 0 ? "0" : t;
-      R.current(f, e), s.current = !1;
+      R.current(f, e), a.current = !1;
     },
-    [r, w]
-  ), z = b(
+    [r, S]
+  ), z = x(
     (e) => {
-      if (e.stopPropagation(), e.preventDefault(), s.current = !0, u)
-        v?.(), s.current = !1;
-      else if (h.current && g) {
-        const t = h.current.getBoundingClientRect();
+      if (e.stopPropagation(), e.preventDefault(), a.current = !0, u)
+        v?.(), a.current = !1;
+      else if (b.current && g) {
+        const t = b.current.getBoundingClientRect();
         g({ anchorRect: t, currentCurrency: l, onSelect: M });
       }
     },
@@ -77,14 +77,14 @@ const ee = ({
   );
   return d(() => {
     u || setTimeout(() => {
-      s.current = !1;
+      a.current = !1;
     }, 100);
   }, [u]), /* @__PURE__ */ o("div", { className: "flex flex-col gap-0 mb-0 w-full h-full", children: /* @__PURE__ */ T("label", { className: "relative block w-full h-full", children: [
     /* @__PURE__ */ o("span", { className: "absolute inset-y-0 left-1 flex items-center pl-3 py-1.5 text-neutral-900 dark:text-white z-10", children: O[l] }),
     /* @__PURE__ */ o(
       "input",
       {
-        ref: a,
+        ref: s,
         placeholder: "0.00",
         type: "text",
         inputMode: "decimal",
@@ -102,7 +102,7 @@ const ee = ({
         },
         defaultValue: L(c),
         id: r,
-        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)", ...P },
+        style: { border: "none", boxShadow: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)", ...P },
         autoComplete: "off",
         autoFocus: K,
         disabled: C
@@ -111,11 +111,11 @@ const ee = ({
     /* @__PURE__ */ o(
       "div",
       {
-        ref: h,
+        ref: b,
         className: B("absolute inset-y-0 right-1 flex items-center h-full", C ? "pointer-events-none opacity-50" : "cursor-pointer"),
         onClick: z,
         onMouseDown: (e) => {
-          e.stopPropagation(), e.preventDefault(), s.current = !0;
+          e.stopPropagation(), e.preventDefault(), a.current = !0;
         },
         children: /* @__PURE__ */ T("div", { className: "px-2 py-1.5 text-sm text-gray-700 dark:text-black-200 flex items-center gap-1 hover:bg-neutral-100 dark:hover:bg-black-500 rounded transition-colors", children: [
           Y(l),

package/dist/components/data-display/infinite-table/body/cell/InlineCurrencyField.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"InlineCurrencyField.es.js","sources":["../../../../../../src/components/data-display/infinite-table/body/cell/InlineCurrencyField.tsx"],"sourcesContent":["import { CURRENCY_SYMBOLS } from '../../../../forms/currency-input/currency.constant';\nimport { getFlagComponent } from '../../../../../utils/countryFlags';\nimport cn from 'classnames';\nimport React, { useCallback, useContext, useEffect, useLayoutEffect, useRef, useState } from 'react';\n\nimport { TableContext } from '../../context';\n\ntype InlineCurrencyFieldProps = {\n  id: string;\n  value: string;\n  onChange: (numericValue: string, currencyCode: string) => void;\n  onBlur?: () => void;\n  currencyCode: string;\n  autoFocus?: boolean;\n  inputStyle?: React.CSSProperties;\n  disabled?: boolean;\n};\n\nconst _cursorPositionCache = new Map<string, { start: number; end: number }>();\nlet _blurringCellKey: string | null = null;\n\nexport const InlineCurrencyField: React.FC<InlineCurrencyFieldProps> = ({\n  id,\n  value,\n  onChange,\n  onBlur,\n  currencyCode = 'USD',\n  autoFocus = false,\n  inputStyle,\n  disabled = false,\n}) => {\n  const { openCurrencyDropdown, closeCurrencyDropdown, currencyDropdownConfig, setCurrencyForCell, getCurrencyForCell } = useContext(TableContext);\n  const contextCurrency = getCurrencyForCell?.(id);\n  const effectiveCurrency = contextCurrency || currencyCode || 'USD';\n  const [selectedCurrency, setSelectedCurrency] = useState<string>(effectiveCurrency);\n  const [internalValue, setInternalValue] = useState(value);\n  const internalValueRef = useRef(value);\n  const inputRef = useRef<HTMLInputElement>(null);\n  const triggerRef = useRef<HTMLDivElement>(null);\n  const isInteractingRef = useRef(false);\n  const onChangeRef = useRef(onChange);\n\n  useEffect(() => {\n    internalValueRef.current = internalValue;\n  }, [internalValue]);\n\n  useEffect(() => {\n    onChangeRef.current = onChange;\n  }, [onChange]);\n\n  const hasInitializedRef = useRef(false);\n  useEffect(() => {\n    if (!hasInitializedRef.current) {\n      setInternalValue(value);\n      internalValueRef.current = value;\n      hasInitializedRef.current = true;\n    }\n  }, [value]);\n\n  useEffect(() => {\n    if (effectiveCurrency !== selectedCurrency) {\n      setSelectedCurrency(effectiveCurrency);\n    }\n  }, [effectiveCurrency, selectedCurrency]);\n\n  useLayoutEffect(() => {\n    const el = inputRef.current;\n    if (!el) return;\n\n    const cached = _cursorPositionCache.get(id);\n    if (cached) {\n      el.value = internalValueRef.current || '';\n      el.focus();\n      el.setSelectionRange(cached.start, cached.end);\n    } else if (_blurringCellKey !== id) {\n      el.value = internalValueRef.current || '';\n      el.focus();\n    }\n  }, []);\n\n  const formatCurrency = (targetValue: string | number | null | undefined) => {\n    if (targetValue === null || targetValue === undefined || targetValue === '') return '';\n    const number = Number(targetValue);\n    if (isNaN(number)) return String(targetValue);\n    return number.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 });\n  };\n\n  const handleOnChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const _value = e.target.value;\n    if (_value !== '' && (Number(_value) < 0 || !/^\\d*\\.?\\d*$/.test(_value))) {\n      e.target.value = internalValueRef.current === '0' ? '' : internalValueRef.current || '';\n      return;\n    }\n\n    _cursorPositionCache.set(id, {\n      start: e.target.selectionStart ?? 0,\n      end: e.target.selectionEnd ?? 0,\n    });\n\n    const numericValue = _value === '' || _value === null || _value === undefined ? '0' : _value;\n    setInternalValue(numericValue);\n    internalValueRef.current = numericValue;\n    onChange(numericValue, selectedCurrency);\n  };\n\n  const handleFocus = () => {\n    if (inputRef.current) {\n      inputRef.current.value = internalValueRef.current || '';\n    }\n  };\n\n  const handleBlur = useCallback(() => {\n    _blurringCellKey = id;\n    _cursorPositionCache.delete(id);\n    if (inputRef.current) {\n      inputRef.current.value = formatCurrency(internalValueRef.current);\n    }\n    setTimeout(() => {\n      if (!isInteractingRef.current && !currencyDropdownConfig) onBlur?.();\n    }, 150);\n    requestAnimationFrame(() => {\n      _blurringCellKey = null;\n    });\n  }, [id, onBlur, currencyDropdownConfig]);\n\n  const handleCurrencySelect = useCallback(\n    (newCurrency: string) => {\n      setSelectedCurrency(newCurrency);\n      setCurrencyForCell?.(id, newCurrency);\n      const currentValue = internalValueRef.current;\n      const numericValue = currentValue === '' || currentValue === null || currentValue === undefined ? '0' : currentValue;\n      onChangeRef.current(numericValue, newCurrency);\n      isInteractingRef.current = false;\n    },\n    [id, setCurrencyForCell],\n  );\n\n  const handleToggleDropdown = useCallback(\n    (e: React.MouseEvent) => {\n      e.stopPropagation();\n      e.preventDefault();\n      isInteractingRef.current = true;\n      if (currencyDropdownConfig) {\n        closeCurrencyDropdown?.();\n        isInteractingRef.current = false;\n      } else if (triggerRef.current && openCurrencyDropdown) {\n        const rect = triggerRef.current.getBoundingClientRect();\n        openCurrencyDropdown({ anchorRect: rect, currentCurrency: selectedCurrency, onSelect: handleCurrencySelect });\n      }\n    },\n    [currencyDropdownConfig, openCurrencyDropdown, closeCurrencyDropdown, selectedCurrency, handleCurrencySelect],\n  );\n\n  useEffect(() => {\n    if (!currencyDropdownConfig) {\n      setTimeout(() => {\n        isInteractingRef.current = false;\n      }, 100);\n    }\n  }, [currencyDropdownConfig]);\n\n  return (\n    <div className='flex flex-col gap-0 mb-0 w-full h-full'>\n      <label className='relative block w-full h-full'>\n        <span className='absolute inset-y-0 left-1 flex items-center pl-3 py-1.5 text-neutral-900 dark:text-white z-10'>\n          {CURRENCY_SYMBOLS[selectedCurrency]}\n        </span>\n        <input\n          ref={inputRef}\n          placeholder='0.00'\n          type='text'\n          inputMode='decimal'\n          className={cn(\n            'pl-11 pr-24 border h-full text-sm rounded-lg block w-full px-2.5 py-1.5 font-inter font-medium',\n            'text-neutral-900 dark:text-black-200 bg-white dark:bg-black-600',\n            'border-gray-300 dark:border-black-600',\n            'disabled:bg-neutral-50 dark:disabled:!bg-black-800 dark:disabled:placeholder:!text-black-400',\n          )}\n          onChange={handleOnChange}\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n          onKeyDown={(e) => {\n            e.stopPropagation();\n            if (e.key.length > 1 || e.ctrlKey || e.metaKey) return;\n            if (e.key >= '0' && e.key <= '9') return;\n            if (e.key === '.' && !e.currentTarget.value.includes('.')) return;\n            e.preventDefault();\n          }}\n          defaultValue={formatCurrency(value)}\n          id={id}\n          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)', ...inputStyle }}\n          autoComplete='off'\n          autoFocus={autoFocus}\n          disabled={disabled}\n        />\n        <div\n          ref={triggerRef}\n          className={cn('absolute inset-y-0 right-1 flex items-center h-full', disabled ? 'pointer-events-none opacity-50' : 'cursor-pointer')}\n          onClick={handleToggleDropdown}\n          onMouseDown={(e) => { e.stopPropagation(); e.preventDefault(); isInteractingRef.current = true; }}\n        >\n          <div className='px-2 py-1.5 text-sm text-gray-700 dark:text-black-200 flex items-center gap-1 hover:bg-neutral-100 dark:hover:bg-black-500 rounded transition-colors'>\n            {getFlagComponent(selectedCurrency)}\n            <span className='font-medium'>{selectedCurrency}</span>\n            <svg className='w-3 h-3' fill='none' stroke='currentColor' viewBox='0 0 24 24'>\n              <path strokeLinecap='round' strokeLinejoin='round' strokeWidth={2} d='M19 9l-7 7-7-7' />\n            </svg>\n          </div>\n        </div>\n      </label>\n    </div>\n  );\n};\n"],"names":["_cursorPositionCache","_blurringCellKey","InlineCurrencyField","id","value","onChange","onBlur","currencyCode","autoFocus","inputStyle","disabled","openCurrencyDropdown","closeCurrencyDropdown","currencyDropdownConfig","setCurrencyForCell","getCurrencyForCell","useContext","TableContext","effectiveCurrency","selectedCurrency","setSelectedCurrency","useState","internalValue","setInternalValue","internalValueRef","useRef","inputRef","triggerRef","isInteractingRef","onChangeRef","useEffect","hasInitializedRef","useLayoutEffect","el","cached","formatCurrency","targetValue","number","handleOnChange","_value","numericValue","handleFocus","handleBlur","useCallback","handleCurrencySelect","newCurrency","currentValue","handleToggleDropdown","rect","jsxs","jsx","CURRENCY_SYMBOLS","cn","getFlagComponent"],"mappings":"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"}
+{"version":3,"file":"InlineCurrencyField.es.js","sources":["../../../../../../src/components/data-display/infinite-table/body/cell/InlineCurrencyField.tsx"],"sourcesContent":["import { CURRENCY_SYMBOLS } from '../../../../forms/currency-input/currency.constant';\nimport { getFlagComponent } from '../../../../../utils/countryFlags';\nimport cn from 'classnames';\nimport React, { useCallback, useContext, useEffect, useLayoutEffect, useRef, useState } from 'react';\n\nimport { TableContext } from '../../context';\n\ntype InlineCurrencyFieldProps = {\n  id: string;\n  value: string;\n  onChange: (numericValue: string, currencyCode: string) => void;\n  onBlur?: () => void;\n  currencyCode: string;\n  autoFocus?: boolean;\n  inputStyle?: React.CSSProperties;\n  disabled?: boolean;\n};\n\nconst _cursorPositionCache = new Map<string, { start: number; end: number }>();\nlet _blurringCellKey: string | null = null;\n\nexport const InlineCurrencyField: React.FC<InlineCurrencyFieldProps> = ({\n  id,\n  value,\n  onChange,\n  onBlur,\n  currencyCode = 'USD',\n  autoFocus = false,\n  inputStyle,\n  disabled = false,\n}) => {\n  const { openCurrencyDropdown, closeCurrencyDropdown, currencyDropdownConfig, setCurrencyForCell, getCurrencyForCell } = useContext(TableContext);\n  const contextCurrency = getCurrencyForCell?.(id);\n  const effectiveCurrency = contextCurrency || currencyCode || 'USD';\n  const [selectedCurrency, setSelectedCurrency] = useState<string>(effectiveCurrency);\n  const [internalValue, setInternalValue] = useState(value);\n  const internalValueRef = useRef(value);\n  const inputRef = useRef<HTMLInputElement>(null);\n  const triggerRef = useRef<HTMLDivElement>(null);\n  const isInteractingRef = useRef(false);\n  const onChangeRef = useRef(onChange);\n\n  useEffect(() => {\n    internalValueRef.current = internalValue;\n  }, [internalValue]);\n\n  useEffect(() => {\n    onChangeRef.current = onChange;\n  }, [onChange]);\n\n  const hasInitializedRef = useRef(false);\n  useEffect(() => {\n    if (!hasInitializedRef.current) {\n      setInternalValue(value);\n      internalValueRef.current = value;\n      hasInitializedRef.current = true;\n    }\n  }, [value]);\n\n  useEffect(() => {\n    if (effectiveCurrency !== selectedCurrency) {\n      setSelectedCurrency(effectiveCurrency);\n    }\n  }, [effectiveCurrency, selectedCurrency]);\n\n  useLayoutEffect(() => {\n    const el = inputRef.current;\n    if (!el) return;\n\n    const cached = _cursorPositionCache.get(id);\n    if (cached) {\n      el.value = internalValueRef.current || '';\n      el.focus();\n      el.setSelectionRange(cached.start, cached.end);\n    } else if (_blurringCellKey !== id) {\n      el.value = internalValueRef.current || '';\n      el.focus();\n    }\n  }, []);\n\n  const formatCurrency = (targetValue: string | number | null | undefined) => {\n    if (targetValue === null || targetValue === undefined || targetValue === '') return '';\n    const number = Number(targetValue);\n    if (isNaN(number)) return String(targetValue);\n    return number.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 });\n  };\n\n  const handleOnChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const _value = e.target.value;\n    if (_value !== '' && (Number(_value) < 0 || !/^\\d*\\.?\\d*$/.test(_value))) {\n      e.target.value = internalValueRef.current === '0' ? '' : internalValueRef.current || '';\n      return;\n    }\n\n    _cursorPositionCache.set(id, {\n      start: e.target.selectionStart ?? 0,\n      end: e.target.selectionEnd ?? 0,\n    });\n\n    const numericValue = _value === '' || _value === null || _value === undefined ? '0' : _value;\n    setInternalValue(numericValue);\n    internalValueRef.current = numericValue;\n    onChange(numericValue, selectedCurrency);\n  };\n\n  const handleFocus = () => {\n    if (inputRef.current) {\n      inputRef.current.value = internalValueRef.current || '';\n    }\n  };\n\n  const handleBlur = useCallback(() => {\n    _blurringCellKey = id;\n    _cursorPositionCache.delete(id);\n    if (inputRef.current) {\n      inputRef.current.value = formatCurrency(internalValueRef.current);\n    }\n    setTimeout(() => {\n      if (!isInteractingRef.current && !currencyDropdownConfig) onBlur?.();\n    }, 150);\n    requestAnimationFrame(() => {\n      _blurringCellKey = null;\n    });\n  }, [id, onBlur, currencyDropdownConfig]);\n\n  const handleCurrencySelect = useCallback(\n    (newCurrency: string) => {\n      setSelectedCurrency(newCurrency);\n      setCurrencyForCell?.(id, newCurrency);\n      const currentValue = internalValueRef.current;\n      const numericValue = currentValue === '' || currentValue === null || currentValue === undefined ? '0' : currentValue;\n      onChangeRef.current(numericValue, newCurrency);\n      isInteractingRef.current = false;\n    },\n    [id, setCurrencyForCell],\n  );\n\n  const handleToggleDropdown = useCallback(\n    (e: React.MouseEvent) => {\n      e.stopPropagation();\n      e.preventDefault();\n      isInteractingRef.current = true;\n      if (currencyDropdownConfig) {\n        closeCurrencyDropdown?.();\n        isInteractingRef.current = false;\n      } else if (triggerRef.current && openCurrencyDropdown) {\n        const rect = triggerRef.current.getBoundingClientRect();\n        openCurrencyDropdown({ anchorRect: rect, currentCurrency: selectedCurrency, onSelect: handleCurrencySelect });\n      }\n    },\n    [currencyDropdownConfig, openCurrencyDropdown, closeCurrencyDropdown, selectedCurrency, handleCurrencySelect],\n  );\n\n  useEffect(() => {\n    if (!currencyDropdownConfig) {\n      setTimeout(() => {\n        isInteractingRef.current = false;\n      }, 100);\n    }\n  }, [currencyDropdownConfig]);\n\n  return (\n    <div className='flex flex-col gap-0 mb-0 w-full h-full'>\n      <label className='relative block w-full h-full'>\n        <span className='absolute inset-y-0 left-1 flex items-center pl-3 py-1.5 text-neutral-900 dark:text-white z-10'>\n          {CURRENCY_SYMBOLS[selectedCurrency]}\n        </span>\n        <input\n          ref={inputRef}\n          placeholder='0.00'\n          type='text'\n          inputMode='decimal'\n          className={cn(\n            'pl-11 pr-24 border h-full text-sm rounded-lg block w-full px-2.5 py-1.5 font-inter font-medium',\n            'text-neutral-900 dark:text-black-200 bg-white dark:bg-black-600',\n            'border-gray-300 dark:border-black-600',\n            'disabled:bg-neutral-50 dark:disabled:!bg-black-800 dark:disabled:placeholder:!text-black-400',\n          )}\n          onChange={handleOnChange}\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n          onKeyDown={(e) => {\n            e.stopPropagation();\n            if (e.key.length > 1 || e.ctrlKey || e.metaKey) return;\n            if (e.key >= '0' && e.key <= '9') return;\n            if (e.key === '.' && !e.currentTarget.value.includes('.')) return;\n            e.preventDefault();\n          }}\n          defaultValue={formatCurrency(value)}\n          id={id}\n          style={{ border: 'none', boxShadow: '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)', ...inputStyle }}\n          autoComplete='off'\n          autoFocus={autoFocus}\n          disabled={disabled}\n        />\n        <div\n          ref={triggerRef}\n          className={cn('absolute inset-y-0 right-1 flex items-center h-full', disabled ? 'pointer-events-none opacity-50' : 'cursor-pointer')}\n          onClick={handleToggleDropdown}\n          onMouseDown={(e) => { e.stopPropagation(); e.preventDefault(); isInteractingRef.current = true; }}\n        >\n          <div className='px-2 py-1.5 text-sm text-gray-700 dark:text-black-200 flex items-center gap-1 hover:bg-neutral-100 dark:hover:bg-black-500 rounded transition-colors'>\n            {getFlagComponent(selectedCurrency)}\n            <span className='font-medium'>{selectedCurrency}</span>\n            <svg className='w-3 h-3' fill='none' stroke='currentColor' viewBox='0 0 24 24'>\n              <path strokeLinecap='round' strokeLinejoin='round' strokeWidth={2} d='M19 9l-7 7-7-7' />\n            </svg>\n          </div>\n        </div>\n      </label>\n    </div>\n  );\n};\n"],"names":["_cursorPositionCache","_blurringCellKey","InlineCurrencyField","id","value","onChange","onBlur","currencyCode","autoFocus","inputStyle","disabled","openCurrencyDropdown","closeCurrencyDropdown","currencyDropdownConfig","setCurrencyForCell","getCurrencyForCell","useContext","TableContext","effectiveCurrency","selectedCurrency","setSelectedCurrency","useState","internalValue","setInternalValue","internalValueRef","useRef","inputRef","triggerRef","isInteractingRef","onChangeRef","useEffect","hasInitializedRef","useLayoutEffect","el","cached","formatCurrency","targetValue","number","handleOnChange","_value","numericValue","handleFocus","handleBlur","useCallback","handleCurrencySelect","newCurrency","currentValue","handleToggleDropdown","rect","jsxs","jsx","CURRENCY_SYMBOLS","cn","getFlagComponent"],"mappings":"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"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lax-wp/design-system",
   "private": false,
-  "version": "0.14.1",
+  "version": "0.14.2",
   "type": "module",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",