@lax-wp/design-system 0.14.0 → 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/dist/components/data-display/modal/Modal.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),I=require("@mui/icons-material"),N=require("antd"),M=require("../typography/Typography.cjs.js"),S=require("../../../hooks/useModalContainer.cjs.js"),f=g=>{const{open:d,children:b,title:s,mask:c=!0,onlyBody:h=!1,bodySpacing:v=!0,headerRightContent:u,parentContainer:i,zIndex:p,asForm:y=!0,onSubmit:x,showCloseButton:m=!0,noPadding:n=!1,...r}=g,C=S.useModalContainer({primaryContainerId:"layout-app-main-content-container",fallbackContainerId:"full-screen-container"}),w=e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"flex justify-between items-center",children:[m?e.jsx(M.Typography,{size:"large",variant:"semibold",className:"tour__title",children:s}):e.jsx("div",{className:"flex flex-col w-full",children:s}),u||m&&e.jsx("button",{id:"btn-modal-close",onClick:r.onCancel,className:"",type:"button",children:e.jsx(I.CloseRounded,{sx:{fontSize:"20px"},className:"cursor-pointer text-neutral-400 hover:text-neutral-600"})})]}),r.addLineAfterHeader&&e.jsx("hr",{className:"mt-2"})]}),j=y?"form":"div",T=()=>{if(i){if(typeof document<"u"){const t=document.getElementById(i);if(t)return t}if(typeof globalThis<"u"&&globalThis.window&&globalThis.window.parent&&globalThis.window.parent!==globalThis.window)try{const t=globalThis.window.parent.document?.getElementById(i);if(t)return t}catch{}}return C};if(!d)return null;const a=T();if(!a)return null;const o=a!==document.body;return e.jsx(N.Modal,{open:d,centered:!0,closable:!1,title:h?null:w,modalRender:t=>e.jsx(j,{onSubmit:l=>{l.preventDefault(),x&&x()},children:e.jsx("div",{role:"none",onClick:l=>l.stopPropagation(),children:t})}),styles:{content:{padding:n?"0px":"20px 0px"},header:{padding:n?"0px":"0px 20px"},body:{padding:n?"0px":v?"0px 20px":"0px"},footer:{padding:n?"0px":"0px 20px"},mask:{zIndex:p||1e3,position:o?"absolute":void 0,top:o?0:void 0,right:o?0:void 0,bottom:o?0:void 0,left:o?0:void 0},wrapper:{zIndex:p||1e3,position:o?"absolute":void 0,top:o?0:void 0,right:o?0:void 0,bottom:o?0:void 0,left:o?0:void 0,backgroundColor:c?"rgb(16 24 40 / 80%)":void 0}},mask:c,...r,getContainer:()=>a,children:b})};exports.Modal=f;exports.default=f;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),k=require("@mui/icons-material"),q=require("antd"),R=require("../typography/Typography.cjs.js"),W=require("../../../hooks/useModalContainer.cjs.js"),z=require("../../../hooks/useResponsiveWidth.cjs.js"),g=b=>{const{open:l,children:v,title:c,mask:u=!0,onlyBody:y=!1,bodySpacing:C=!0,headerRightContent:p,parentContainer:r,zIndex:x,asForm:w=!0,onSubmit:f,showCloseButton:h=!0,noPadding:i=!1,width:n,...d}=b,j=W.useModalContainer({primaryContainerId:"layout-app-main-content-container",fallbackContainerId:"full-screen-container"}),m=typeof n=="number"||typeof n=="string"?n:void 0,T=z.useResponsiveWidth(m),I=m===void 0&&n!==void 0?n:T,N=e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"flex justify-between items-center",children:[h?e.jsx(R.Typography,{size:"large",variant:"semibold",className:"tour__title",children:c}):e.jsx("div",{className:"flex flex-col w-full",children:c}),p||h&&e.jsx("button",{id:"btn-modal-close",onClick:d.onCancel,className:"",type:"button",children:e.jsx(k.CloseRounded,{sx:{fontSize:"20px"},className:"cursor-pointer text-neutral-400 hover:text-neutral-600"})})]}),d.addLineAfterHeader&&e.jsx("hr",{className:"mt-2"})]}),M=w?"form":"div",S=()=>{if(r){if(typeof document<"u"){const o=document.getElementById(r);if(o)return o}if(typeof globalThis<"u"&&globalThis.window&&globalThis.window.parent&&globalThis.window.parent!==globalThis.window)try{const o=globalThis.window.parent.document?.getElementById(r);if(o)return o}catch{}}return j};if(!l)return null;const a=S();if(!a)return null;const t=a!==document.body;return e.jsx(q.Modal,{open:l,centered:!0,closable:!1,title:y?null:N,modalRender:o=>e.jsx(M,{onSubmit:s=>{s.preventDefault(),f&&f()},children:e.jsx("div",{role:"none",onClick:s=>s.stopPropagation(),children:o})}),styles:{content:{padding:i?"0px":"20px 0px"},header:{padding:i?"0px":"0px 20px"},body:{padding:i?"0px":C?"0px 20px":"0px"},footer:{padding:i?"0px":"0px 20px"},mask:{zIndex:x||1e3,position:t?"absolute":void 0,top:t?0:void 0,right:t?0:void 0,bottom:t?0:void 0,left:t?0:void 0},wrapper:{zIndex:x||1e3,position:t?"absolute":void 0,top:t?0:void 0,right:t?0:void 0,bottom:t?0:void 0,left:t?0:void 0,backgroundColor:u?"rgb(16 24 40 / 80%)":void 0}},mask:u,...d,width:I,getContainer:()=>a,children:v})};exports.Modal=g;exports.default=g;
 //# sourceMappingURL=Modal.cjs.js.map

package/dist/components/data-display/modal/Modal.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.cjs.js","sources":["../../../../src/components/data-display/modal/Modal.tsx"],"sourcesContent":["import { CloseRounded } from \"@mui/icons-material\";\nimport { Modal as AntDModal, type ModalProps as AntDModalProps } from \"antd\";\nimport type { ReactNode } from \"react\";\n// no-op\nimport { Typography } from \"../typography/Typography\";\nimport { useModalContainer } from \"../../../hooks/useModalContainer\";\n\n/**\n * Custom props extending Ant Design Modal props\n */\nexport interface ModalProps extends AntDModalProps {\n  /** Whether to show only the body content without header */\n  onlyBody?: boolean;\n  /** Whether to add spacing to the body */\n  bodySpacing?: boolean;\n  /** Container element ID for portal rendering */\n  parentContainer?: string;\n  /** Custom header content on the right side */\n  headerRightContent?: ReactNode;\n  /** Whether to add a line after the header */\n  addLineAfterHeader?: boolean;\n  /** Custom z-index for the modal */\n  zIndex?: number;\n  /** Whether to render as a form */\n  asForm?: boolean;\n  /** Form submit handler */\n  onSubmit?: () => void;\n  /** Whether to show the close button */\n  showCloseButton?: boolean;\n  /** Whether to remove padding */\n  noPadding?: boolean;\n  /** Close handler */\n  onClose?: () => void;\n}\n\n/**\n * Modal component for displaying overlay content\n *\n * @example\n * ```tsx\n * <Modal open={isOpen} onCancel={() => setIsOpen(false)} title=\"Example Modal\">\n *   <p>Modal content goes here</p>\n * </Modal>\n * ```\n */\nexport const Modal = (props: ModalProps) => {\n  const {\n    open,\n    children,\n    title,\n    mask = true,\n    onlyBody = false,\n    bodySpacing = true,\n    headerRightContent,\n    parentContainer,\n    zIndex,\n    asForm = true,\n    onSubmit,\n    showCloseButton = true,\n    noPadding = false,\n    ...rest\n  } = props;\n\n  // Use the hook to find the container with retry mechanism\n  const autoContainer = useModalContainer({\n    primaryContainerId: \"layout-app-main-content-container\",\n    fallbackContainerId: \"full-screen-container\",\n  });\n\n  const header = (\n    <>\n      <div className=\"flex justify-between items-center\">\n        {showCloseButton ? (\n          <Typography size=\"large\" variant=\"semibold\" className=\"tour__title\">\n            {title}\n          </Typography>\n        ) : (\n          <div className=\"flex flex-col w-full\">{title}</div>\n        )}\n\n        {headerRightContent\n          ? headerRightContent\n          : showCloseButton && (\n              <button id=\"btn-modal-close\" onClick={rest.onCancel} className=\"\" type=\"button\">\n                <CloseRounded sx={{ fontSize: \"20px\" }} className=\"cursor-pointer text-neutral-400 hover:text-neutral-600\" />\n              </button>\n            )}\n      </div>\n      {rest.addLineAfterHeader && <hr className=\"mt-2\" />}\n    </>\n  );\n\n  const Wrapper = asForm ? \"form\" : \"div\";\n\n  // Determine target container: use custom prop if provided, otherwise use auto-detected container\n  const getTargetContainer = (): HTMLElement | null => {\n    if (parentContainer) {\n      // If a specific container is provided, search for it\n      if (typeof document !== \"undefined\") {\n        const local = document.getElementById(parentContainer);\n        if (local) return local;\n      }\n      if (typeof globalThis !== \"undefined\" && globalThis.window && globalThis.window.parent && globalThis.window.parent !== globalThis.window) {\n        try {\n          const inParent = globalThis.window.parent.document?.getElementById(parentContainer);\n          if (inParent) return inParent;\n        } catch {\n          // Ignore cross-origin access errors\n        }\n      }\n    }\n    // Use auto-detected container\n    return autoContainer;\n  };\n\n  if (!open) return null;\n  const targetContainer = getTargetContainer();\n  \n  // Don't render until we have a container\n  if (!targetContainer) return null;\n  \n  const isScopedToContainer = targetContainer !== document.body;\n\n  const modalNode = (\n    <AntDModal\n      open={open}\n      centered\n      closable={false}\n      title={onlyBody ? null : header}\n      modalRender={(modal) => (\n        <Wrapper\n          onSubmit={(e) => {\n            e.preventDefault();\n            if (onSubmit) {\n              onSubmit();\n            }\n          }}\n        >\n          {/* Prevent outside click bubbling from custom wrappers */}\n          <div role=\"none\" onClick={(e) => e.stopPropagation()}>{modal}</div>\n        </Wrapper>\n      )}\n      styles={{\n        content: {\n          padding: noPadding ? \"0px\" : \"20px 0px\",\n        },\n        header: {\n          padding: noPadding ? \"0px\" : \"0px 20px\",\n        },\n        body: {\n          padding: noPadding ? \"0px\" : bodySpacing ? \"0px 20px\" : \"0px\",\n        },\n        footer: {\n          padding: noPadding ? \"0px\" : \"0px 20px\",\n        },\n        mask: {\n          zIndex: zIndex || 1000,\n          position: isScopedToContainer ? \"absolute\" : undefined,\n          top: isScopedToContainer ? 0 : undefined,\n          right: isScopedToContainer ? 0 : undefined,\n          bottom: isScopedToContainer ? 0 : undefined,\n          left: isScopedToContainer ? 0 : undefined,\n        },\n        wrapper: {\n          zIndex: zIndex || 1000,\n          position: isScopedToContainer ? \"absolute\" : undefined,\n          top: isScopedToContainer ? 0 : undefined,\n          right: isScopedToContainer ? 0 : undefined,\n          bottom: isScopedToContainer ? 0 : undefined,\n          left: isScopedToContainer ? 0 : undefined,\n          backgroundColor: mask ? \"rgb(16 24 40 / 80%)\" : undefined,\n        },\n      }}\n      mask={mask}\n      {...rest}\n      getContainer={() => targetContainer}\n    >\n      {children}\n    </AntDModal>\n  );\n\n  // No outer portal or mask; rely on AntD's getContainer to scope to the target container\n  return modalNode;\n};\n\nexport default Modal;\n"],"names":["Modal","props","open","children","title","mask","onlyBody","bodySpacing","headerRightContent","parentContainer","zIndex","asForm","onSubmit","showCloseButton","noPadding","rest","autoContainer","useModalContainer","header","jsxs","Fragment","jsx","Typography","CloseRounded","Wrapper","getTargetContainer","local","inParent","targetContainer","isScopedToContainer","AntDModal","modal","e"],"mappings":"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"}
+{"version":3,"file":"Modal.cjs.js","sources":["../../../../src/components/data-display/modal/Modal.tsx"],"sourcesContent":["import { CloseRounded } from \"@mui/icons-material\";\nimport { Modal as AntDModal, type ModalProps as AntDModalProps } from \"antd\";\nimport type { ReactNode } from \"react\";\n// no-op\nimport { Typography } from \"../typography/Typography\";\nimport { useModalContainer } from \"../../../hooks/useModalContainer\";\nimport { useResponsiveWidth } from \"../../../hooks/useResponsiveWidth\";\n\n/**\n * Custom props extending Ant Design Modal props\n */\nexport interface ModalProps extends AntDModalProps {\n  /** Whether to show only the body content without header */\n  onlyBody?: boolean;\n  /** Whether to add spacing to the body */\n  bodySpacing?: boolean;\n  /** Container element ID for portal rendering */\n  parentContainer?: string;\n  /** Custom header content on the right side */\n  headerRightContent?: ReactNode;\n  /** Whether to add a line after the header */\n  addLineAfterHeader?: boolean;\n  /** Custom z-index for the modal */\n  zIndex?: number;\n  /** Whether to render as a form */\n  asForm?: boolean;\n  /** Form submit handler */\n  onSubmit?: () => void;\n  /** Whether to show the close button */\n  showCloseButton?: boolean;\n  /** Whether to remove padding */\n  noPadding?: boolean;\n  /** Close handler */\n  onClose?: () => void;\n}\n\n/**\n * Modal component for displaying overlay content\n *\n * @example\n * ```tsx\n * <Modal open={isOpen} onCancel={() => setIsOpen(false)} title=\"Example Modal\">\n *   <p>Modal content goes here</p>\n * </Modal>\n * ```\n */\nexport const Modal = (props: ModalProps) => {\n  const {\n    open,\n    children,\n    title,\n    mask = true,\n    onlyBody = false,\n    bodySpacing = true,\n    headerRightContent,\n    parentContainer,\n    zIndex,\n    asForm = true,\n    onSubmit,\n    showCloseButton = true,\n    noPadding = false,\n    width,\n    ...rest\n  } = props;\n\n  // Use the hook to find the container with retry mechanism\n  const autoContainer = useModalContainer({\n    primaryContainerId: \"layout-app-main-content-container\",\n    fallbackContainerId: \"full-screen-container\",\n  });\n\n  // Numeric/px widths shrink by viewport breakpoint; AntD's responsive-object\n  // width form is passed through untouched.\n  const plainWidth =\n    typeof width === \"number\" || typeof width === \"string\" ? width : undefined;\n  const responsiveWidth = useResponsiveWidth(plainWidth);\n  const resolvedWidth =\n    plainWidth === undefined && width !== undefined ? width : responsiveWidth;\n\n  const header = (\n    <>\n      <div className=\"flex justify-between items-center\">\n        {showCloseButton ? (\n          <Typography size=\"large\" variant=\"semibold\" className=\"tour__title\">\n            {title}\n          </Typography>\n        ) : (\n          <div className=\"flex flex-col w-full\">{title}</div>\n        )}\n\n        {headerRightContent\n          ? headerRightContent\n          : showCloseButton && (\n              <button id=\"btn-modal-close\" onClick={rest.onCancel} className=\"\" type=\"button\">\n                <CloseRounded sx={{ fontSize: \"20px\" }} className=\"cursor-pointer text-neutral-400 hover:text-neutral-600\" />\n              </button>\n            )}\n      </div>\n      {rest.addLineAfterHeader && <hr className=\"mt-2\" />}\n    </>\n  );\n\n  const Wrapper = asForm ? \"form\" : \"div\";\n\n  // Determine target container: use custom prop if provided, otherwise use auto-detected container\n  const getTargetContainer = (): HTMLElement | null => {\n    if (parentContainer) {\n      // If a specific container is provided, search for it\n      if (typeof document !== \"undefined\") {\n        const local = document.getElementById(parentContainer);\n        if (local) return local;\n      }\n      if (typeof globalThis !== \"undefined\" && globalThis.window && globalThis.window.parent && globalThis.window.parent !== globalThis.window) {\n        try {\n          const inParent = globalThis.window.parent.document?.getElementById(parentContainer);\n          if (inParent) return inParent;\n        } catch {\n          // Ignore cross-origin access errors\n        }\n      }\n    }\n    // Use auto-detected container\n    return autoContainer;\n  };\n\n  if (!open) return null;\n  const targetContainer = getTargetContainer();\n  \n  // Don't render until we have a container\n  if (!targetContainer) return null;\n  \n  const isScopedToContainer = targetContainer !== document.body;\n\n  const modalNode = (\n    <AntDModal\n      open={open}\n      centered\n      closable={false}\n      title={onlyBody ? null : header}\n      modalRender={(modal) => (\n        <Wrapper\n          onSubmit={(e) => {\n            e.preventDefault();\n            if (onSubmit) {\n              onSubmit();\n            }\n          }}\n        >\n          {/* Prevent outside click bubbling from custom wrappers */}\n          <div role=\"none\" onClick={(e) => e.stopPropagation()}>{modal}</div>\n        </Wrapper>\n      )}\n      styles={{\n        content: {\n          padding: noPadding ? \"0px\" : \"20px 0px\",\n        },\n        header: {\n          padding: noPadding ? \"0px\" : \"0px 20px\",\n        },\n        body: {\n          padding: noPadding ? \"0px\" : bodySpacing ? \"0px 20px\" : \"0px\",\n        },\n        footer: {\n          padding: noPadding ? \"0px\" : \"0px 20px\",\n        },\n        mask: {\n          zIndex: zIndex || 1000,\n          position: isScopedToContainer ? \"absolute\" : undefined,\n          top: isScopedToContainer ? 0 : undefined,\n          right: isScopedToContainer ? 0 : undefined,\n          bottom: isScopedToContainer ? 0 : undefined,\n          left: isScopedToContainer ? 0 : undefined,\n        },\n        wrapper: {\n          zIndex: zIndex || 1000,\n          position: isScopedToContainer ? \"absolute\" : undefined,\n          top: isScopedToContainer ? 0 : undefined,\n          right: isScopedToContainer ? 0 : undefined,\n          bottom: isScopedToContainer ? 0 : undefined,\n          left: isScopedToContainer ? 0 : undefined,\n          backgroundColor: mask ? \"rgb(16 24 40 / 80%)\" : undefined,\n        },\n      }}\n      mask={mask}\n      {...rest}\n      width={resolvedWidth}\n      getContainer={() => targetContainer}\n    >\n      {children}\n    </AntDModal>\n  );\n\n  // No outer portal or mask; rely on AntD's getContainer to scope to the target container\n  return modalNode;\n};\n\nexport default Modal;\n"],"names":["Modal","props","open","children","title","mask","onlyBody","bodySpacing","headerRightContent","parentContainer","zIndex","asForm","onSubmit","showCloseButton","noPadding","width","rest","autoContainer","useModalContainer","plainWidth","responsiveWidth","useResponsiveWidth","resolvedWidth","header","jsxs","Fragment","jsx","Typography","CloseRounded","Wrapper","getTargetContainer","local","inParent","targetContainer","isScopedToContainer","AntDModal","modal","e"],"mappings":"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"}

package/dist/components/data-display/modal/Modal.es.js

@@ -1,80 +1,82 @@
-import { jsxs as g, Fragment as I, jsx as o } from "react/jsx-runtime";
-import { CloseRounded as k } from "@mui/icons-material";
-import { Modal as z } from "antd";
-import { Typography as S } from "../typography/Typography.es.js";
-import { useModalContainer as B } from "../../../hooks/useModalContainer.es.js";
-const _ = (x) => {
+import { jsxs as x, Fragment as W, jsx as o } from "react/jsx-runtime";
+import { CloseRounded as B } from "@mui/icons-material";
+import { Modal as M } from "antd";
+import { Typography as R } from "../typography/Typography.es.js";
+import { useModalContainer as j } from "../../../hooks/useModalContainer.es.js";
+import { useResponsiveWidth as P } from "../../../hooks/useResponsiveWidth.es.js";
+const $ = (b) => {
   const {
-    open: d,
-    children: h,
-    title: s,
-    mask: p = !0,
-    onlyBody: b = !1,
-    bodySpacing: v = !0,
-    headerRightContent: c,
-    parentContainer: i,
+    open: s,
+    children: v,
+    title: p,
+    mask: c = !0,
+    onlyBody: y = !1,
+    bodySpacing: w = !0,
+    headerRightContent: m,
+    parentContainer: r,
     zIndex: u,
-    asForm: y = !0,
-    onSubmit: m,
-    showCloseButton: f = !0,
-    noPadding: n = !1,
-    ...r
-  } = x, C = B({
+    asForm: C = !0,
+    onSubmit: f,
+    showCloseButton: h = !0,
+    noPadding: i = !1,
+    width: n,
+    ...d
+  } = b, T = j({
     primaryContainerId: "layout-app-main-content-container",
     fallbackContainerId: "full-screen-container"
-  }), w = /* @__PURE__ */ g(I, { children: [
-    /* @__PURE__ */ g("div", { className: "flex justify-between items-center", children: [
-      f ? /* @__PURE__ */ o(S, { size: "large", variant: "semibold", className: "tour__title", children: s }) : /* @__PURE__ */ o("div", { className: "flex flex-col w-full", children: s }),
-      c || f && /* @__PURE__ */ o("button", { id: "btn-modal-close", onClick: r.onCancel, className: "", type: "button", children: /* @__PURE__ */ o(k, { sx: { fontSize: "20px" }, className: "cursor-pointer text-neutral-400 hover:text-neutral-600" }) })
+  }), g = typeof n == "number" || typeof n == "string" ? n : void 0, N = P(g), I = g === void 0 && n !== void 0 ? n : N, k = /* @__PURE__ */ x(W, { children: [
+    /* @__PURE__ */ x("div", { className: "flex justify-between items-center", children: [
+      h ? /* @__PURE__ */ o(R, { size: "large", variant: "semibold", className: "tour__title", children: p }) : /* @__PURE__ */ o("div", { className: "flex flex-col w-full", children: p }),
+      m || h && /* @__PURE__ */ o("button", { id: "btn-modal-close", onClick: d.onCancel, className: "", type: "button", children: /* @__PURE__ */ o(B, { sx: { fontSize: "20px" }, className: "cursor-pointer text-neutral-400 hover:text-neutral-600" }) })
     ] }),
-    r.addLineAfterHeader && /* @__PURE__ */ o("hr", { className: "mt-2" })
-  ] }), T = y ? "form" : "div", N = () => {
-    if (i) {
+    d.addLineAfterHeader && /* @__PURE__ */ o("hr", { className: "mt-2" })
+  ] }), z = C ? "form" : "div", S = () => {
+    if (r) {
       if (typeof document < "u") {
-        const t = document.getElementById(i);
+        const t = document.getElementById(r);
         if (t) return t;
       }
       if (typeof globalThis < "u" && globalThis.window && globalThis.window.parent && globalThis.window.parent !== globalThis.window)
         try {
-          const t = globalThis.window.parent.document?.getElementById(i);
+          const t = globalThis.window.parent.document?.getElementById(r);
           if (t) return t;
         } catch {
         }
     }
-    return C;
+    return T;
   };
-  if (!d) return null;
-  const a = N();
+  if (!s) return null;
+  const a = S();
   if (!a) return null;
   const e = a !== document.body;
   return /* @__PURE__ */ o(
-    z,
+    M,
     {
-      open: d,
+      open: s,
       centered: !0,
       closable: !1,
-      title: b ? null : w,
+      title: y ? null : k,
       modalRender: (t) => /* @__PURE__ */ o(
-        T,
+        z,
         {
           onSubmit: (l) => {
-            l.preventDefault(), m && m();
+            l.preventDefault(), f && f();
           },
           children: /* @__PURE__ */ o("div", { role: "none", onClick: (l) => l.stopPropagation(), children: t })
         }
       ),
       styles: {
         content: {
-          padding: n ? "0px" : "20px 0px"
+          padding: i ? "0px" : "20px 0px"
         },
         header: {
-          padding: n ? "0px" : "0px 20px"
+          padding: i ? "0px" : "0px 20px"
         },
         body: {
-          padding: n ? "0px" : v ? "0px 20px" : "0px"
+          padding: i ? "0px" : w ? "0px 20px" : "0px"
         },
         footer: {
-          padding: n ? "0px" : "0px 20px"
+          padding: i ? "0px" : "0px 20px"
         },
         mask: {
           zIndex: u || 1e3,
@@ -91,18 +93,19 @@ const _ = (x) => {
           right: e ? 0 : void 0,
           bottom: e ? 0 : void 0,
           left: e ? 0 : void 0,
-          backgroundColor: p ? "rgb(16 24 40 / 80%)" : void 0
+          backgroundColor: c ? "rgb(16 24 40 / 80%)" : void 0
         }
       },
-      mask: p,
-      ...r,
+      mask: c,
+      ...d,
+      width: I,
       getContainer: () => a,
-      children: h
+      children: v
     }
   );
 };
 export {
-  _ as Modal,
-  _ as default
+  $ as Modal,
+  $ as default
 };
 //# sourceMappingURL=Modal.es.js.map

package/dist/components/data-display/modal/Modal.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.es.js","sources":["../../../../src/components/data-display/modal/Modal.tsx"],"sourcesContent":["import { CloseRounded } from \"@mui/icons-material\";\nimport { Modal as AntDModal, type ModalProps as AntDModalProps } from \"antd\";\nimport type { ReactNode } from \"react\";\n// no-op\nimport { Typography } from \"../typography/Typography\";\nimport { useModalContainer } from \"../../../hooks/useModalContainer\";\n\n/**\n * Custom props extending Ant Design Modal props\n */\nexport interface ModalProps extends AntDModalProps {\n  /** Whether to show only the body content without header */\n  onlyBody?: boolean;\n  /** Whether to add spacing to the body */\n  bodySpacing?: boolean;\n  /** Container element ID for portal rendering */\n  parentContainer?: string;\n  /** Custom header content on the right side */\n  headerRightContent?: ReactNode;\n  /** Whether to add a line after the header */\n  addLineAfterHeader?: boolean;\n  /** Custom z-index for the modal */\n  zIndex?: number;\n  /** Whether to render as a form */\n  asForm?: boolean;\n  /** Form submit handler */\n  onSubmit?: () => void;\n  /** Whether to show the close button */\n  showCloseButton?: boolean;\n  /** Whether to remove padding */\n  noPadding?: boolean;\n  /** Close handler */\n  onClose?: () => void;\n}\n\n/**\n * Modal component for displaying overlay content\n *\n * @example\n * ```tsx\n * <Modal open={isOpen} onCancel={() => setIsOpen(false)} title=\"Example Modal\">\n *   <p>Modal content goes here</p>\n * </Modal>\n * ```\n */\nexport const Modal = (props: ModalProps) => {\n  const {\n    open,\n    children,\n    title,\n    mask = true,\n    onlyBody = false,\n    bodySpacing = true,\n    headerRightContent,\n    parentContainer,\n    zIndex,\n    asForm = true,\n    onSubmit,\n    showCloseButton = true,\n    noPadding = false,\n    ...rest\n  } = props;\n\n  // Use the hook to find the container with retry mechanism\n  const autoContainer = useModalContainer({\n    primaryContainerId: \"layout-app-main-content-container\",\n    fallbackContainerId: \"full-screen-container\",\n  });\n\n  const header = (\n    <>\n      <div className=\"flex justify-between items-center\">\n        {showCloseButton ? (\n          <Typography size=\"large\" variant=\"semibold\" className=\"tour__title\">\n            {title}\n          </Typography>\n        ) : (\n          <div className=\"flex flex-col w-full\">{title}</div>\n        )}\n\n        {headerRightContent\n          ? headerRightContent\n          : showCloseButton && (\n              <button id=\"btn-modal-close\" onClick={rest.onCancel} className=\"\" type=\"button\">\n                <CloseRounded sx={{ fontSize: \"20px\" }} className=\"cursor-pointer text-neutral-400 hover:text-neutral-600\" />\n              </button>\n            )}\n      </div>\n      {rest.addLineAfterHeader && <hr className=\"mt-2\" />}\n    </>\n  );\n\n  const Wrapper = asForm ? \"form\" : \"div\";\n\n  // Determine target container: use custom prop if provided, otherwise use auto-detected container\n  const getTargetContainer = (): HTMLElement | null => {\n    if (parentContainer) {\n      // If a specific container is provided, search for it\n      if (typeof document !== \"undefined\") {\n        const local = document.getElementById(parentContainer);\n        if (local) return local;\n      }\n      if (typeof globalThis !== \"undefined\" && globalThis.window && globalThis.window.parent && globalThis.window.parent !== globalThis.window) {\n        try {\n          const inParent = globalThis.window.parent.document?.getElementById(parentContainer);\n          if (inParent) return inParent;\n        } catch {\n          // Ignore cross-origin access errors\n        }\n      }\n    }\n    // Use auto-detected container\n    return autoContainer;\n  };\n\n  if (!open) return null;\n  const targetContainer = getTargetContainer();\n  \n  // Don't render until we have a container\n  if (!targetContainer) return null;\n  \n  const isScopedToContainer = targetContainer !== document.body;\n\n  const modalNode = (\n    <AntDModal\n      open={open}\n      centered\n      closable={false}\n      title={onlyBody ? null : header}\n      modalRender={(modal) => (\n        <Wrapper\n          onSubmit={(e) => {\n            e.preventDefault();\n            if (onSubmit) {\n              onSubmit();\n            }\n          }}\n        >\n          {/* Prevent outside click bubbling from custom wrappers */}\n          <div role=\"none\" onClick={(e) => e.stopPropagation()}>{modal}</div>\n        </Wrapper>\n      )}\n      styles={{\n        content: {\n          padding: noPadding ? \"0px\" : \"20px 0px\",\n        },\n        header: {\n          padding: noPadding ? \"0px\" : \"0px 20px\",\n        },\n        body: {\n          padding: noPadding ? \"0px\" : bodySpacing ? \"0px 20px\" : \"0px\",\n        },\n        footer: {\n          padding: noPadding ? \"0px\" : \"0px 20px\",\n        },\n        mask: {\n          zIndex: zIndex || 1000,\n          position: isScopedToContainer ? \"absolute\" : undefined,\n          top: isScopedToContainer ? 0 : undefined,\n          right: isScopedToContainer ? 0 : undefined,\n          bottom: isScopedToContainer ? 0 : undefined,\n          left: isScopedToContainer ? 0 : undefined,\n        },\n        wrapper: {\n          zIndex: zIndex || 1000,\n          position: isScopedToContainer ? \"absolute\" : undefined,\n          top: isScopedToContainer ? 0 : undefined,\n          right: isScopedToContainer ? 0 : undefined,\n          bottom: isScopedToContainer ? 0 : undefined,\n          left: isScopedToContainer ? 0 : undefined,\n          backgroundColor: mask ? \"rgb(16 24 40 / 80%)\" : undefined,\n        },\n      }}\n      mask={mask}\n      {...rest}\n      getContainer={() => targetContainer}\n    >\n      {children}\n    </AntDModal>\n  );\n\n  // No outer portal or mask; rely on AntD's getContainer to scope to the target container\n  return modalNode;\n};\n\nexport default Modal;\n"],"names":["Modal","props","open","children","title","mask","onlyBody","bodySpacing","headerRightContent","parentContainer","zIndex","asForm","onSubmit","showCloseButton","noPadding","rest","autoContainer","useModalContainer","header","jsxs","Fragment","jsx","Typography","CloseRounded","Wrapper","getTargetContainer","local","inParent","targetContainer","isScopedToContainer","AntDModal","modal","e"],"mappings":"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"}
+{"version":3,"file":"Modal.es.js","sources":["../../../../src/components/data-display/modal/Modal.tsx"],"sourcesContent":["import { CloseRounded } from \"@mui/icons-material\";\nimport { Modal as AntDModal, type ModalProps as AntDModalProps } from \"antd\";\nimport type { ReactNode } from \"react\";\n// no-op\nimport { Typography } from \"../typography/Typography\";\nimport { useModalContainer } from \"../../../hooks/useModalContainer\";\nimport { useResponsiveWidth } from \"../../../hooks/useResponsiveWidth\";\n\n/**\n * Custom props extending Ant Design Modal props\n */\nexport interface ModalProps extends AntDModalProps {\n  /** Whether to show only the body content without header */\n  onlyBody?: boolean;\n  /** Whether to add spacing to the body */\n  bodySpacing?: boolean;\n  /** Container element ID for portal rendering */\n  parentContainer?: string;\n  /** Custom header content on the right side */\n  headerRightContent?: ReactNode;\n  /** Whether to add a line after the header */\n  addLineAfterHeader?: boolean;\n  /** Custom z-index for the modal */\n  zIndex?: number;\n  /** Whether to render as a form */\n  asForm?: boolean;\n  /** Form submit handler */\n  onSubmit?: () => void;\n  /** Whether to show the close button */\n  showCloseButton?: boolean;\n  /** Whether to remove padding */\n  noPadding?: boolean;\n  /** Close handler */\n  onClose?: () => void;\n}\n\n/**\n * Modal component for displaying overlay content\n *\n * @example\n * ```tsx\n * <Modal open={isOpen} onCancel={() => setIsOpen(false)} title=\"Example Modal\">\n *   <p>Modal content goes here</p>\n * </Modal>\n * ```\n */\nexport const Modal = (props: ModalProps) => {\n  const {\n    open,\n    children,\n    title,\n    mask = true,\n    onlyBody = false,\n    bodySpacing = true,\n    headerRightContent,\n    parentContainer,\n    zIndex,\n    asForm = true,\n    onSubmit,\n    showCloseButton = true,\n    noPadding = false,\n    width,\n    ...rest\n  } = props;\n\n  // Use the hook to find the container with retry mechanism\n  const autoContainer = useModalContainer({\n    primaryContainerId: \"layout-app-main-content-container\",\n    fallbackContainerId: \"full-screen-container\",\n  });\n\n  // Numeric/px widths shrink by viewport breakpoint; AntD's responsive-object\n  // width form is passed through untouched.\n  const plainWidth =\n    typeof width === \"number\" || typeof width === \"string\" ? width : undefined;\n  const responsiveWidth = useResponsiveWidth(plainWidth);\n  const resolvedWidth =\n    plainWidth === undefined && width !== undefined ? width : responsiveWidth;\n\n  const header = (\n    <>\n      <div className=\"flex justify-between items-center\">\n        {showCloseButton ? (\n          <Typography size=\"large\" variant=\"semibold\" className=\"tour__title\">\n            {title}\n          </Typography>\n        ) : (\n          <div className=\"flex flex-col w-full\">{title}</div>\n        )}\n\n        {headerRightContent\n          ? headerRightContent\n          : showCloseButton && (\n              <button id=\"btn-modal-close\" onClick={rest.onCancel} className=\"\" type=\"button\">\n                <CloseRounded sx={{ fontSize: \"20px\" }} className=\"cursor-pointer text-neutral-400 hover:text-neutral-600\" />\n              </button>\n            )}\n      </div>\n      {rest.addLineAfterHeader && <hr className=\"mt-2\" />}\n    </>\n  );\n\n  const Wrapper = asForm ? \"form\" : \"div\";\n\n  // Determine target container: use custom prop if provided, otherwise use auto-detected container\n  const getTargetContainer = (): HTMLElement | null => {\n    if (parentContainer) {\n      // If a specific container is provided, search for it\n      if (typeof document !== \"undefined\") {\n        const local = document.getElementById(parentContainer);\n        if (local) return local;\n      }\n      if (typeof globalThis !== \"undefined\" && globalThis.window && globalThis.window.parent && globalThis.window.parent !== globalThis.window) {\n        try {\n          const inParent = globalThis.window.parent.document?.getElementById(parentContainer);\n          if (inParent) return inParent;\n        } catch {\n          // Ignore cross-origin access errors\n        }\n      }\n    }\n    // Use auto-detected container\n    return autoContainer;\n  };\n\n  if (!open) return null;\n  const targetContainer = getTargetContainer();\n  \n  // Don't render until we have a container\n  if (!targetContainer) return null;\n  \n  const isScopedToContainer = targetContainer !== document.body;\n\n  const modalNode = (\n    <AntDModal\n      open={open}\n      centered\n      closable={false}\n      title={onlyBody ? null : header}\n      modalRender={(modal) => (\n        <Wrapper\n          onSubmit={(e) => {\n            e.preventDefault();\n            if (onSubmit) {\n              onSubmit();\n            }\n          }}\n        >\n          {/* Prevent outside click bubbling from custom wrappers */}\n          <div role=\"none\" onClick={(e) => e.stopPropagation()}>{modal}</div>\n        </Wrapper>\n      )}\n      styles={{\n        content: {\n          padding: noPadding ? \"0px\" : \"20px 0px\",\n        },\n        header: {\n          padding: noPadding ? \"0px\" : \"0px 20px\",\n        },\n        body: {\n          padding: noPadding ? \"0px\" : bodySpacing ? \"0px 20px\" : \"0px\",\n        },\n        footer: {\n          padding: noPadding ? \"0px\" : \"0px 20px\",\n        },\n        mask: {\n          zIndex: zIndex || 1000,\n          position: isScopedToContainer ? \"absolute\" : undefined,\n          top: isScopedToContainer ? 0 : undefined,\n          right: isScopedToContainer ? 0 : undefined,\n          bottom: isScopedToContainer ? 0 : undefined,\n          left: isScopedToContainer ? 0 : undefined,\n        },\n        wrapper: {\n          zIndex: zIndex || 1000,\n          position: isScopedToContainer ? \"absolute\" : undefined,\n          top: isScopedToContainer ? 0 : undefined,\n          right: isScopedToContainer ? 0 : undefined,\n          bottom: isScopedToContainer ? 0 : undefined,\n          left: isScopedToContainer ? 0 : undefined,\n          backgroundColor: mask ? \"rgb(16 24 40 / 80%)\" : undefined,\n        },\n      }}\n      mask={mask}\n      {...rest}\n      width={resolvedWidth}\n      getContainer={() => targetContainer}\n    >\n      {children}\n    </AntDModal>\n  );\n\n  // No outer portal or mask; rely on AntD's getContainer to scope to the target container\n  return modalNode;\n};\n\nexport default Modal;\n"],"names":["Modal","props","open","children","title","mask","onlyBody","bodySpacing","headerRightContent","parentContainer","zIndex","asForm","onSubmit","showCloseButton","noPadding","width","rest","autoContainer","useModalContainer","plainWidth","responsiveWidth","useResponsiveWidth","resolvedWidth","header","jsxs","Fragment","jsx","Typography","CloseRounded","Wrapper","getTargetContainer","local","inParent","targetContainer","isScopedToContainer","AntDModal","modal","e"],"mappings":"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"}

package/dist/components/data-display/resizable-sidebar/ResizableSidebar.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),x=require("../../../_virtual/index.cjs.js"),F=require("framer-motion"),o=require("react"),_=require("react-dom"),A=require("re-resizable"),I=()=>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"})})]})}),T=(e,r)=>{const i=document.getElementById(e);i?r(i):requestAnimationFrame(()=>{const s=document.getElementById(e);s&&r(s)})},B=(e,r)=>{if(e.current){if(r)localStorage.setItem("resizable-sidebar-width-before-fullscreen",String(e.current.size?.width));else{const i=localStorage.getItem("resizable-sidebar-width-before-fullscreen");if(i){e.current.updateSize({width:i,height:"100%"});return}}e.current.updateSize({width:r?"100vw":"",height:"100%"})}},H=(e,r,i,s,l,w)=>{const[u,n]=o.useState(!1),[d,a]=o.useState(null);return o.useEffect(()=>{if(!e||typeof window>"u"){a(null);return}T(e,a)},[e]),o.useEffect(()=>{B(l,i)},[i]),o.useEffect(()=>{if(e&&r){const c=requestAnimationFrame(()=>{n(!0)});return()=>{cancelAnimationFrame(c),n(!1)}}e||n(!0),r||n(!1)},[r,e]),o.useEffect(()=>{l.current?.size?.width&&s&&s(l.current.size.width)},[l.current?.size?.width,s]),{shouldRenderSidebar:u,portalTarget:d}},W=({isOpen:e,header:r,id:i,ref:s,className:l,containerClassName:w,widthStyle:u,heightStyle:n,motionVariants:d,resizableRef:a,fullScreen:c,maxResizableWidth:m,minWidth:b,handleKey:h,onDragEnd:v,onResize:g,children:y})=>t.jsx(F.AnimatePresence,{children:e&&t.jsx(F.motion.div,{ref:s,id:i,initial:d.initial,animate:d.animate,exit:d.exit,transition:{type:"tween",duration:.3},className:x("flex-shrink-0 z-50 relative bg-white border-neutral-200 dark:bg-black-800 dark:border-black-700",c?"fixed w-full transition translate-x-4 duration-300":"sticky",l),style:{width:u,height:n},children:t.jsx(A.Resizable,{onResize:f=>{f.stopPropagation();const p=a.current?.size?.width;g&&g(p||b)},onResizeStart:f=>{f.stopPropagation()},ref:a,maxWidth:c?m:m*.75,minWidth:b,minHeight:n,maxHeight:n,enable:c?{}:{[h]:!0},handleClasses:{[h]:x("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:x("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(I,{})})},className:"!h-full",onResizeStop:v||void 0,children:t.jsxs("div",{className:x("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",w),children:[r?t.jsx("div",{className:"py-4 px-6",children:r||null}):null,t.jsx("div",{className:"flex-1 overflow-y-auto overflow-x-hidden",children:y})]})})})}),q=o.forwardRef(({isOpen:e,children:r,fullScreen:i=!1,defaultSize:s=void 0,minWidth:l=400,onDragEnd:w=null,onResize:u,className:n,placement:d="right",parentContainer:a,header:c,id:m,containerClassName:b,ignoreParentContainerHeight:h=!1,height:v,isMainSidebarExpanded:g=!1,mainSidebarExpandedWidth:y=280,mainSidebarCollapsedWidth:f=80,navbarHeight:p=64},E)=>{const L=g?y:f,S=o.useRef(null),{shouldRenderSidebar:k,portalTarget:C}=H(a,e,i,u,S),N=typeof window<"u"?window.innerWidth-L:0,R=s,j=d==="right",D=v||(a&&!h?"100%":`calc(100vh - ${p}px)`),P={initial:{x:j?"100%":"-100%"},animate:{x:0},exit:{x:j?"100%":"-100%"}},M=j?"left":"right",z=t.jsx(W,{isOpen:e,header:c,id:m,ref:E,className:n,containerClassName:b,widthStyle:R,heightStyle:D,motionVariants:P,resizableRef:S,fullScreen:i,maxResizableWidth:N,minWidth:l,handleKey:M,onDragEnd:w,onResize:u,children:r});return a?!k||!C?null:_.createPortal(z,C):k?z:null});q.displayName="ResizableSidebar";exports.ResizableSidebar=q;
+"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;
 //# sourceMappingURL=ResizableSidebar.cjs.js.map