@flipdish/portal-library 8.5.7 → 8.6.0

package/dist/components/molecules/Autocomplete/hooks/useShortcutHotkey.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"useShortcutHotkey.cjs.js","sources":["../../../../../src/components/molecules/Autocomplete/hooks/useShortcutHotkey.ts"],"sourcesContent":["import { useEffect } from 'react';\n\nexport interface UseShortcutHotkeyOptions {\n  enabled?: boolean;\n  onTrigger?: () => void;\n}\n\nexport interface UseShortcutHotkeyResult {\n  hotkeyText: string;\n}\n\n/**\n * Sets up a global Cmd/Ctrl + K listener when enabled and returns the platform-appropriate display label.\n *\n * @param props - The component props\n * @returns The hotkey text\n */\nexport const useShortcutHotkey = ({\n  enabled = false,\n  onTrigger,\n}: UseShortcutHotkeyOptions): UseShortcutHotkeyResult => {\n  const isMac = typeof navigator !== 'undefined' && /Mac|iPod|iPhone|iPad/.test(navigator.platform);\n  const hotkeyText = isMac ? '⌘ + K' : 'Ctrl + K';\n\n  useEffect((): (() => void) | void => {\n    if (!enabled) return;\n\n    const handler = (e: KeyboardEvent): void => {\n      const key = e.key?.toLowerCase();\n      if ((isMac && e.metaKey && key === 'k') || (!isMac && e.ctrlKey && key === 'k')) {\n        e.preventDefault();\n        onTrigger?.();\n      }\n    };\n\n    window.addEventListener('keydown', handler);\n    return (): void => window.removeEventListener('keydown', handler);\n  }, [enabled, isMac, onTrigger]);\n\n  return { hotkeyText };\n};\n"],"names":["enabled","onTrigger","isMac","navigator","test","platform","hotkeyText","useEffect","handler","e","key","toLowerCase","metaKey","ctrlKey","preventDefault","window","addEventListener","removeEventListener"],"mappings":"8DAiBiC,EAC/BA,WAAU,EACVC,gBAEA,MAAMC,EAA6B,oBAAdC,WAA6B,uBAAuBC,KAAKD,UAAUE,UAClFC,EAAaJ,EAAQ,QAAU,WAiBrC,OAfAK,EAAAA,WAAU,KACR,IAAKP,EAAS,OAEd,MAAMQ,EAAWC,IACf,MAAMC,EAAMD,EAAEC,KAAKC,eACdT,GAASO,EAAEG,SAAmB,MAARF,IAAkBR,GAASO,EAAEI,SAAmB,MAARH,KACjED,EAAEK,iBACFb,QAKJ,OADAc,OAAOC,iBAAiB,UAAWR,GAC5B,IAAYO,OAAOE,oBAAoB,UAAWT,KACxD,CAACR,EAASE,EAAOD,IAEb,CAAEK"}
+{"version":3,"file":"useShortcutHotkey.cjs.js","sources":["../../../../../src/components/molecules/Autocomplete/hooks/useShortcutHotkey.ts"],"sourcesContent":["import { useEffect } from 'react';\n\nexport interface UseShortcutHotkeyOptions {\n  enabled?: boolean;\n  onTrigger?: () => void;\n}\n\nexport interface UseShortcutHotkeyResult {\n  hotkeyText: string;\n}\n\n/**\n * Sets up a global Cmd/Ctrl + K listener when enabled and returns the platform-appropriate display label.\n *\n * @param props - The component props\n * @returns The hotkey text\n */\nexport const useShortcutHotkey = ({\n  enabled = false,\n  onTrigger,\n}: UseShortcutHotkeyOptions): UseShortcutHotkeyResult => {\n  const isMac = typeof navigator !== 'undefined' && /Mac|iPod|iPhone|iPad/.test(navigator.platform);\n  const hotkeyText = isMac ? '⌘ + K' : 'Ctrl + K';\n\n  useEffect((): (() => void) | void => {\n    if (!enabled) return;\n\n    const handler = (e: KeyboardEvent): void => {\n      const key = e.key?.toLowerCase();\n      if ((isMac && e.metaKey && key === 'k') || (!isMac && e.ctrlKey && key === 'k')) {\n        e.preventDefault();\n        onTrigger?.();\n      }\n    };\n\n    window.addEventListener('keydown', handler);\n    return (): void => window.removeEventListener('keydown', handler);\n  }, [enabled, isMac, onTrigger]);\n\n  return { hotkeyText };\n};\n"],"names":["enabled","onTrigger","isMac","navigator","test","platform","hotkeyText","useEffect","handler","e","key","toLowerCase","metaKey","ctrlKey","preventDefault","window","addEventListener","removeEventListener"],"mappings":"8DAiBiC,EAC/BA,WAAU,EACVC,gBAEA,MAAMC,EAA6B,oBAAdC,WAA6B,uBAAuBC,KAAKD,UAAUE,UAClFC,EAAaJ,EAAQ,QAAU,WAiBrC,OAfAK,EAAAA,UAAU,KACR,IAAKP,EAAS,OAEd,MAAMQ,EAAWC,IACf,MAAMC,EAAMD,EAAEC,KAAKC,eACdT,GAASO,EAAEG,SAAmB,MAARF,IAAkBR,GAASO,EAAEI,SAAmB,MAARH,KACjED,EAAEK,iBACFb,QAKJ,OADAc,OAAOC,iBAAiB,UAAWR,GAC5B,IAAYO,OAAOE,oBAAoB,UAAWT,IACxD,CAACR,EAASE,EAAOD,IAEb,CAAEK"}

package/dist/components/molecules/Autocomplete/hooks/useShortcutHotkey.js

@@ -1,2 +1,2 @@
-import{useEffect as e}from"react";const t=({enabled:t=!1,onTrigger:n})=>{const o="undefined"!=typeof navigator&&/Mac|iPod|iPhone|iPad/.test(navigator.platform),r=o?"⌘ + K":"Ctrl + K";return e((()=>{if(!t)return;const e=e=>{const t=e.key?.toLowerCase();(o&&e.metaKey&&"k"===t||!o&&e.ctrlKey&&"k"===t)&&(e.preventDefault(),n?.())};return window.addEventListener("keydown",e),()=>window.removeEventListener("keydown",e)}),[t,o,n]),{hotkeyText:r}};export{t as useShortcutHotkey};
+import{useEffect as e}from"react";const t=({enabled:t=!1,onTrigger:n})=>{const o="undefined"!=typeof navigator&&/Mac|iPod|iPhone|iPad/.test(navigator.platform),r=o?"⌘ + K":"Ctrl + K";return e(()=>{if(!t)return;const e=e=>{const t=e.key?.toLowerCase();(o&&e.metaKey&&"k"===t||!o&&e.ctrlKey&&"k"===t)&&(e.preventDefault(),n?.())};return window.addEventListener("keydown",e),()=>window.removeEventListener("keydown",e)},[t,o,n]),{hotkeyText:r}};export{t as useShortcutHotkey};
 //# sourceMappingURL=useShortcutHotkey.js.map

package/dist/components/molecules/Autocomplete/hooks/useShortcutHotkey.js.map

@@ -1 +1 @@
-{"version":3,"file":"useShortcutHotkey.js","sources":["../../../../../src/components/molecules/Autocomplete/hooks/useShortcutHotkey.ts"],"sourcesContent":["import { useEffect } from 'react';\n\nexport interface UseShortcutHotkeyOptions {\n  enabled?: boolean;\n  onTrigger?: () => void;\n}\n\nexport interface UseShortcutHotkeyResult {\n  hotkeyText: string;\n}\n\n/**\n * Sets up a global Cmd/Ctrl + K listener when enabled and returns the platform-appropriate display label.\n *\n * @param props - The component props\n * @returns The hotkey text\n */\nexport const useShortcutHotkey = ({\n  enabled = false,\n  onTrigger,\n}: UseShortcutHotkeyOptions): UseShortcutHotkeyResult => {\n  const isMac = typeof navigator !== 'undefined' && /Mac|iPod|iPhone|iPad/.test(navigator.platform);\n  const hotkeyText = isMac ? '⌘ + K' : 'Ctrl + K';\n\n  useEffect((): (() => void) | void => {\n    if (!enabled) return;\n\n    const handler = (e: KeyboardEvent): void => {\n      const key = e.key?.toLowerCase();\n      if ((isMac && e.metaKey && key === 'k') || (!isMac && e.ctrlKey && key === 'k')) {\n        e.preventDefault();\n        onTrigger?.();\n      }\n    };\n\n    window.addEventListener('keydown', handler);\n    return (): void => window.removeEventListener('keydown', handler);\n  }, [enabled, isMac, onTrigger]);\n\n  return { hotkeyText };\n};\n"],"names":["useShortcutHotkey","enabled","onTrigger","isMac","navigator","test","platform","hotkeyText","useEffect","handler","e","key","toLowerCase","metaKey","ctrlKey","preventDefault","window","addEventListener","removeEventListener"],"mappings":"kCAiBO,MAAMA,EAAoB,EAC/BC,WAAU,EACVC,gBAEA,MAAMC,EAA6B,oBAAdC,WAA6B,uBAAuBC,KAAKD,UAAUE,UAClFC,EAAaJ,EAAQ,QAAU,WAiBrC,OAfAK,GAAU,KACR,IAAKP,EAAS,OAEd,MAAMQ,EAAWC,IACf,MAAMC,EAAMD,EAAEC,KAAKC,eACdT,GAASO,EAAEG,SAAmB,MAARF,IAAkBR,GAASO,EAAEI,SAAmB,MAARH,KACjED,EAAEK,iBACFb,QAKJ,OADAc,OAAOC,iBAAiB,UAAWR,GAC5B,IAAYO,OAAOE,oBAAoB,UAAWT,KACxD,CAACR,EAASE,EAAOD,IAEb,CAAEK"}
+{"version":3,"file":"useShortcutHotkey.js","sources":["../../../../../src/components/molecules/Autocomplete/hooks/useShortcutHotkey.ts"],"sourcesContent":["import { useEffect } from 'react';\n\nexport interface UseShortcutHotkeyOptions {\n  enabled?: boolean;\n  onTrigger?: () => void;\n}\n\nexport interface UseShortcutHotkeyResult {\n  hotkeyText: string;\n}\n\n/**\n * Sets up a global Cmd/Ctrl + K listener when enabled and returns the platform-appropriate display label.\n *\n * @param props - The component props\n * @returns The hotkey text\n */\nexport const useShortcutHotkey = ({\n  enabled = false,\n  onTrigger,\n}: UseShortcutHotkeyOptions): UseShortcutHotkeyResult => {\n  const isMac = typeof navigator !== 'undefined' && /Mac|iPod|iPhone|iPad/.test(navigator.platform);\n  const hotkeyText = isMac ? '⌘ + K' : 'Ctrl + K';\n\n  useEffect((): (() => void) | void => {\n    if (!enabled) return;\n\n    const handler = (e: KeyboardEvent): void => {\n      const key = e.key?.toLowerCase();\n      if ((isMac && e.metaKey && key === 'k') || (!isMac && e.ctrlKey && key === 'k')) {\n        e.preventDefault();\n        onTrigger?.();\n      }\n    };\n\n    window.addEventListener('keydown', handler);\n    return (): void => window.removeEventListener('keydown', handler);\n  }, [enabled, isMac, onTrigger]);\n\n  return { hotkeyText };\n};\n"],"names":["useShortcutHotkey","enabled","onTrigger","isMac","navigator","test","platform","hotkeyText","useEffect","handler","e","key","toLowerCase","metaKey","ctrlKey","preventDefault","window","addEventListener","removeEventListener"],"mappings":"kCAiBO,MAAMA,EAAoB,EAC/BC,WAAU,EACVC,gBAEA,MAAMC,EAA6B,oBAAdC,WAA6B,uBAAuBC,KAAKD,UAAUE,UAClFC,EAAaJ,EAAQ,QAAU,WAiBrC,OAfAK,EAAU,KACR,IAAKP,EAAS,OAEd,MAAMQ,EAAWC,IACf,MAAMC,EAAMD,EAAEC,KAAKC,eACdT,GAASO,EAAEG,SAAmB,MAARF,IAAkBR,GAASO,EAAEI,SAAmB,MAARH,KACjED,EAAEK,iBACFb,QAKJ,OADAc,OAAOC,iBAAiB,UAAWR,GAC5B,IAAYO,OAAOE,oBAAoB,UAAWT,IACxD,CAACR,EAASE,EAAOD,IAEb,CAAEK"}

package/dist/components/molecules/Autocomplete/index.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),i=require("react/jsx-runtime"),s=require("@mui/material/Autocomplete"),t=require("@mui/material/Box"),r=require("@mui/material/InputAdornment"),n=require("@mui/material/styles"),l=require("../../atoms/Badge/index.cjs.js"),o=require("../../atoms/CircularProgress/index.cjs.js"),a=require("../../atoms/MenuItem/index.cjs.js"),d=require("../../atoms/Tag/index.cjs.js"),u=require("../../atoms/TextField/index.cjs.js"),c=require("../../atoms/VisuallyHidden/index.cjs.js"),p=require("../Tooltip/index.cjs.js"),h=require("../../../icons/ArrowDown01/index.cjs.js"),m=require("../../../icons/ArrowUp01/index.cjs.js"),x=require("../../../icons/Cancel/index.cjs.js"),j=require("../../../icons/Search/index.cjs.js"),g=require("../../../providers/TranslationProvider.cjs.js"),y=require("../../../utilities/stringUtilities.cjs.js"),b=require("./hooks/useDynamicLimitTags.cjs.js"),f=require("./hooks/useShortcutHotkey.cjs.js");const T=s,q=n.styled(T,{shouldForwardProp:e=>"fullWidth"!==e})((({fullWidth:e=!1})=>({width:e?"100%":"min(364px, 100%)"}))),v=n.styled(r,{shouldForwardProp:e=>"disabled"!==e})((({theme:e,disabled:i=!1})=>({"&.MuiInputAdornment-positionEnd":{margin:0},"& svg":{color:i?e.palette.semantic.icon["icon-disabled"]:e.palette.semantic.icon["icon-strong"]}}))),k=n.styled(t)((({theme:e})=>({alignItems:"center",display:"flex",gap:e.spacing(1)}))),I=n.styled("span")((()=>({display:"inline-flex",".Mui-focused &":{display:"none"}}))),P=({ariaLabel:s,className:t,disabled:r=!1,errorText:n,fdKey:T,fullWidth:P=!1,helperText:C,label:A,loading:O=!1,multiple:S=!1,onChange:_,onInputChange:E,options:F=[],placeholder:M,required:W=!1,shortcutHotkey:w=!1,type:B="search",value:D})=>{const H=e.useRef(null),[L,V]=e.useState(""),[z,K]=e.useState(!1),{translate:N}=g.useTranslation(),R=S?Array.isArray(D)?D:null==D?[]:[D]:Array.isArray(D)?D.length>0?D[0]:null:D??null,U="search"===B,$="combobox"===B,G=(Boolean(L)||Boolean(R))&&!r,J=U&&w&&!R&&!r,Q=c.useVisuallyHiddenId(),X=e.useCallback((()=>{H.current?.focus()}),[]),{hotkeyText:Y}=f.useShortcutHotkey({enabled:J,onTrigger:X}),{rootRef:Z,limitTags:ee}=b.useDynamicLimitTags({chipMax:130,gap:4,horizontalPadding:32,reservedPx:U?120:90});e.useEffect((()=>{z&&(r&&K(!1),U&&0===F.length&&K(!1))}),[z,r,U,F.length]);const ie=e=>{r||U&&0===F.length||K(void 0===e?e=>!e:e)};return i.jsxs(i.Fragment,{children:[i.jsx(q,{ref:Z,className:t,clearIcon:i.jsx(x,{size:"md"}),clearText:N("Clear_selection"),disableClearable:!G,disableCloseOnSelect:S,disabled:r,filterOptions:U?e=>e:void 0,forcePopupIcon:$,freeSolo:U,fullWidth:P,getOptionKey:e=>"string"==typeof e?e:String(e.value),getOptionLabel:e=>"string"==typeof e?e:e.label,inputValue:L,isOptionEqualToValue:(e,i)=>null!=i&&("string"==typeof i?e.label===i||String(e.value)===i:e.value===i.value),limitTags:ee,loading:O,loadingText:`${N("Loading")}...`,multiple:S,noOptionsText:N("No_options"),onChange:(e,i,s,t)=>{_&&_(e,i,s,t)},onClose:()=>ie(!1),onInputChange:(e,i,s)=>{V(i),E&&E(e,i,s)},onOpen:()=>ie(!0),open:z,openText:N("Open_popup"),options:F,popupIcon:$?i.jsx(v,{disabled:r,position:"end",children:z?i.jsx(m,{}):i.jsx(h,{})}):null,renderInput:e=>{const t=Array.isArray(F)&&F.length>0,a=$||U&&t,d=[e.inputProps["aria-describedby"],J?Q:void 0].filter(Boolean).join(" ")||void 0;return i.jsx(u.TextField,{disabled:r,errorText:n,fdKey:T,fullWidth:P,helperText:C,inputRef:H,label:A,placeholder:M,required:W,slotProps:{input:{...e.InputProps,endAdornment:i.jsxs(i.Fragment,{children:[i.jsxs(k,{children:[O?i.jsx(o.CircularProgress,{size:"small"}):null,J?i.jsx(I,{children:i.jsx(l.Badge,{label:Y,size:"small",tone:"neutral"})}):null]}),e.InputProps.endAdornment]}),startAdornment:i.jsxs(i.Fragment,{children:[U?i.jsx(v,{disabled:r,position:"start",children:i.jsx(j,{"aria-hidden":"true","data-fd":"search-icon"})}):null,e.InputProps.startAdornment]})},htmlInput:{...e.inputProps,id:T,"aria-label":U&&!A?s:void 0,"aria-describedby":d,...!a&&{role:"searchbox","aria-autocomplete":"none","aria-invalid":n||W?e.inputProps["aria-invalid"]:void 0}}}})},renderOption:(i,s,t)=>{const{key:r,onClick:n,...l}=i;return S?e.createElement(a.MenuItem,{...l,key:r,checked:t.selected,label:s.label,onCheckedChange:(e,i)=>{n?.(i)},type:"checkbox"}):e.createElement(a.MenuItem,{...l,key:r,label:s.label,onClick:n,selected:t.selected,type:"text"})},renderTags:(e,s)=>e.map(((e,t)=>{const{key:r,onDelete:n,...l}=s({index:t}),o="string"==typeof e?e:e.label,a=y.truncateWithEllipsis(o,13,{includeEllipsisInLimit:!0}),u=a.endsWith("..."),c=r??`tag-${"string"==typeof e?e:e.value}`;return u?i.jsx(p.Tooltip,{title:o,children:i.jsx("span",{...l,children:i.jsx(d.Tag,{label:a,onDismiss:n})})},c):i.jsx("span",{...l,children:i.jsx(d.Tag,{label:a,onDismiss:n})},c)})),slotProps:{popupIndicator:{onClick:e=>{r||(e.stopPropagation(),ie())}}},value:R}),J&&i.jsx(c.VisuallyHidden,{fdKey:"autocomplete-shortcut-hotkey",id:Q,children:N("Press_hotkey_to_focus_search",{hotkey:Y})})]})};exports.Autocomplete=P,exports.default=P;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),i=require("react/jsx-runtime"),s=require("@mui/material/Autocomplete"),t=require("@mui/material/Box"),r=require("@mui/material/InputAdornment"),n=require("@mui/material/styles"),l=require("../../atoms/Badge/index.cjs.js"),o=require("../../atoms/CircularProgress/index.cjs.js"),a=require("../../atoms/MenuItem/index.cjs.js"),d=require("../../atoms/Tag/index.cjs.js"),u=require("../../atoms/TextField/index.cjs.js"),c=require("../../atoms/VisuallyHidden/index.cjs.js"),p=require("../Tooltip/index.cjs.js"),h=require("../../../icons/ArrowDown01/index.cjs.js"),m=require("../../../icons/ArrowUp01/index.cjs.js"),x=require("../../../icons/Cancel/index.cjs.js"),j=require("../../../icons/Search/index.cjs.js"),g=require("../../../providers/TranslationProvider.cjs.js"),y=require("../../../utilities/stringUtilities.cjs.js"),b=require("./hooks/useDynamicLimitTags.cjs.js"),f=require("./hooks/useShortcutHotkey.cjs.js");const T=s,q=n.styled(T,{shouldForwardProp:e=>"fullWidth"!==e})(({fullWidth:e=!1})=>({width:e?"100%":"min(364px, 100%)"})),v=n.styled(r,{shouldForwardProp:e=>"disabled"!==e})(({theme:e,disabled:i=!1})=>({"&.MuiInputAdornment-positionEnd":{margin:0},"& svg":{color:i?e.palette.semantic.icon["icon-disabled"]:e.palette.semantic.icon["icon-strong"]}})),k=n.styled(t)(({theme:e})=>({alignItems:"center",display:"flex",gap:e.spacing(1)})),I=n.styled("span")(()=>({display:"inline-flex",".Mui-focused &":{display:"none"}})),P=({ariaLabel:s,className:t,disabled:r=!1,errorText:n,fdKey:T,fullWidth:P=!1,helperText:C,label:A,loading:O=!1,multiple:S=!1,onChange:_,onInputChange:E,options:F=[],placeholder:M,required:W=!1,shortcutHotkey:w=!1,type:B="search",value:D})=>{const H=e.useRef(null),[L,V]=e.useState(""),[z,K]=e.useState(!1),{translate:N}=g.useTranslation(),R=S?Array.isArray(D)?D:null==D?[]:[D]:Array.isArray(D)?D.length>0?D[0]:null:D??null,U="search"===B,$="combobox"===B,G=(Boolean(L)||Boolean(R))&&!r,J=U&&w&&!R&&!r,Q=c.useVisuallyHiddenId(),X=e.useCallback(()=>{H.current?.focus()},[]),{hotkeyText:Y}=f.useShortcutHotkey({enabled:J,onTrigger:X}),{rootRef:Z,limitTags:ee}=b.useDynamicLimitTags({chipMax:130,gap:4,horizontalPadding:32,reservedPx:U?120:90});e.useEffect(()=>{z&&(r&&K(!1),U&&0===F.length&&K(!1))},[z,r,U,F.length]);const ie=e=>{r||U&&0===F.length||K(void 0===e?e=>!e:e)};return i.jsxs(i.Fragment,{children:[i.jsx(q,{ref:Z,className:t,clearIcon:i.jsx(x,{size:"md"}),clearText:N("Clear_selection"),disableClearable:!G,disableCloseOnSelect:S,disabled:r,filterOptions:U?e=>e:void 0,forcePopupIcon:$,freeSolo:U,fullWidth:P,getOptionKey:e=>"string"==typeof e?e:String(e.value),getOptionLabel:e=>"string"==typeof e?e:e.label,inputValue:L,isOptionEqualToValue:(e,i)=>null!=i&&("string"==typeof i?e.label===i||String(e.value)===i:e.value===i.value),limitTags:ee,loading:O,loadingText:`${N("Loading")}...`,multiple:S,noOptionsText:N("No_options"),onChange:(e,i,s,t)=>{_&&_(e,i,s,t)},onClose:()=>ie(!1),onInputChange:(e,i,s)=>{V(i),E&&E(e,i,s)},onOpen:()=>ie(!0),open:z,openText:N("Open_popup"),options:F,popupIcon:$?i.jsx(v,{disabled:r,position:"end",children:z?i.jsx(m,{}):i.jsx(h,{})}):null,renderInput:e=>{const t=Array.isArray(F)&&F.length>0,a=$||U&&t,d=[e.inputProps["aria-describedby"],J?Q:void 0].filter(Boolean).join(" ")||void 0;return i.jsx(u.TextField,{disabled:r,errorText:n,fdKey:T,fullWidth:P,helperText:C,inputRef:H,label:A,placeholder:M,required:W,slotProps:{input:{...e.InputProps,endAdornment:i.jsxs(i.Fragment,{children:[i.jsxs(k,{children:[O?i.jsx(o.CircularProgress,{size:"small"}):null,J?i.jsx(I,{children:i.jsx(l.Badge,{label:Y,size:"small",tone:"neutral"})}):null]}),e.InputProps.endAdornment]}),startAdornment:i.jsxs(i.Fragment,{children:[U?i.jsx(v,{disabled:r,position:"start",children:i.jsx(j,{"aria-hidden":"true","data-fd":"search-icon"})}):null,e.InputProps.startAdornment]})},htmlInput:{...e.inputProps,id:T,"aria-label":U&&!A?s:void 0,"aria-describedby":d,...!a&&{role:"searchbox","aria-autocomplete":"none","aria-invalid":n||W?e.inputProps["aria-invalid"]:void 0}}}})},renderOption:(i,s,t)=>{const{key:r,onClick:n,...l}=i;return S?e.createElement(a.MenuItem,{...l,key:r,checked:t.selected,label:s.label,onCheckedChange:(e,i)=>{n?.(i)},type:"checkbox"}):e.createElement(a.MenuItem,{...l,key:r,label:s.label,onClick:n,selected:t.selected,type:"text"})},renderTags:(e,s)=>e.map((e,t)=>{const{key:r,onDelete:n,...l}=s({index:t}),o="string"==typeof e?e:e.label,a=y.truncateWithEllipsis(o,13,{includeEllipsisInLimit:!0}),u=a.endsWith("..."),c=r??`tag-${"string"==typeof e?e:e.value}`;return u?i.jsx(p.Tooltip,{title:o,children:i.jsx("span",{...l,children:i.jsx(d.Tag,{label:a,onDismiss:n})})},c):i.jsx("span",{...l,children:i.jsx(d.Tag,{label:a,onDismiss:n})},c)}),slotProps:{popupIndicator:{onClick:e=>{r||(e.stopPropagation(),ie())}}},value:R}),J&&i.jsx(c.VisuallyHidden,{fdKey:"autocomplete-shortcut-hotkey",id:Q,children:N("Press_hotkey_to_focus_search",{hotkey:Y})})]})};exports.Autocomplete=P,exports.default=P;
 //# sourceMappingURL=index.cjs.js.map

package/dist/components/molecules/Autocomplete/index.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":["../../../../src/components/molecules/Autocomplete/index.tsx"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\n\nimport MuiAutocomplete, {\n  type AutocompleteChangeDetails,\n  type AutocompleteChangeReason,\n  type AutocompleteInputChangeReason,\n  type AutocompleteProps as MuiAutocompleteProps,\n  type AutocompleteRenderGetTagProps,\n  type AutocompleteRenderInputParams,\n  type AutocompleteRenderOptionState,\n  type AutocompleteValue,\n} from '@mui/material/Autocomplete';\nimport Box from '@mui/material/Box';\nimport MuiInputAdornment from '@mui/material/InputAdornment';\nimport { styled } from '@mui/material/styles';\n\nimport Badge from '@fd/components/atoms/Badge';\nimport CircularProgress from '@fd/components/atoms/CircularProgress';\nimport MenuItem from '@fd/components/atoms/MenuItem';\nimport Tag from '@fd/components/atoms/Tag';\nimport TextField, { type TextFieldProps } from '@fd/components/atoms/TextField';\nimport VisuallyHidden, { useVisuallyHiddenId } from '@fd/components/atoms/VisuallyHidden';\nimport Tooltip from '@fd/components/molecules/Tooltip';\nimport ArrowDown01Icon from '@fd/icons/ArrowDown01';\nimport ArrowUp01Icon from '@fd/icons/ArrowUp01';\nimport CancelIcon from '@fd/icons/Cancel';\nimport SearchIcon from '@fd/icons/Search';\nimport { useTranslation } from '@fd/providers/TranslationProvider';\nimport { truncateWithEllipsis } from '@fd/utilities/stringUtilities';\n\nimport { useDynamicLimitTags } from './hooks/useDynamicLimitTags';\nimport { useShortcutHotkey } from './hooks/useShortcutHotkey';\n\n// Bind flags to MuiAutocomplete\ntype MuiCustomAutocompleteProps<\n  M extends boolean = boolean, // Multiple\n  DC extends boolean = boolean, // DisableClearable\n  FS extends boolean = boolean, // FreeSolo\n> = MuiAutocompleteProps<AutocompleteOption, M, DC, FS>;\n\n/**\n * Represents an option in the Autocomplete dropdown.\n */\nexport interface AutocompleteOption {\n  /** The label to display in the dropdown option. */\n  label: string;\n  /** The value to store in the dropdown option. */\n  value: number | string;\n}\n\n/**\n * Props for the Autocomplete component.\n * Supports both single and multiple selection modes with optional search functionality.\n */\nexport interface AutocompleteProps extends Omit<\n  TextFieldProps,\n  'endAdornment' | 'multiline' | 'onChange' | 'options' | 'startAdornment'\n> {\n  /** Aria-label for the input when no label is provided. */\n  ariaLabel?: string;\n  /** Shows a loading indicator inside the input (e.g., while fetching). */\n  loading?: boolean;\n  /** Enables selection of multiple options and shows checkboxes and tags for selected values. */\n  multiple?: MuiCustomAutocompleteProps['multiple'];\n  /** Called when the selected value(s) change. */\n  onChange: MuiCustomAutocompleteProps['onChange'];\n  /** Called when the input text changes (typing or programmatic updates). */\n  onInputChange?: MuiCustomAutocompleteProps['onInputChange'];\n  /** Options to display in the dropdown list. */\n  options: AutocompleteOption[];\n  /** Shows the keyboard shortcut badge (Cmd/Ctrl + K) and enables focusing via the shortcut when in search mode. */\n  shortcutHotkey?: boolean;\n  /** Visual behavior: 'search' shows a leading search icon; 'combobox' shows a popup button. */\n  type?: 'combobox' | 'search';\n  /** Controlled value (single option, array for multiple, or null). */\n  value: MuiCustomAutocompleteProps['value'];\n}\n\n// Bind flags to MuiAutocomplete, see MuiCustomAutocompleteProps for more details\nconst MuiCustomAutocomplete = MuiAutocomplete<AutocompleteOption, boolean, boolean, boolean>;\nconst StyledAutocomplete = styled(MuiCustomAutocomplete, {\n  shouldForwardProp: (prop) => prop !== 'fullWidth',\n})<{ fullWidth?: boolean }>(({ fullWidth = false }) => ({\n  width: fullWidth ? '100%' : 'min(364px, 100%)',\n}));\n\nconst StyledInputAdornment = styled(MuiInputAdornment, {\n  shouldForwardProp: (prop) => prop !== 'disabled',\n})<{ disabled?: boolean }>(({ theme, disabled = false }) => ({\n  '&.MuiInputAdornment-positionEnd': {\n    margin: 0,\n  },\n\n  '& svg': {\n    color: disabled\n      ? theme.palette.semantic.icon['icon-disabled']\n      : theme.palette.semantic.icon['icon-strong'],\n  },\n}));\n\nconst StyledEndAdornmentContainer = styled(Box)(({ theme }) => ({\n  alignItems: 'center',\n  display: 'flex',\n  gap: theme.spacing(1),\n}));\n\nconst ShortcutBadgeWrapper = styled('span')(() => ({\n  display: 'inline-flex',\n\n  // hide when input root is focused\n  '.Mui-focused &': {\n    display: 'none',\n  },\n}));\n\n/**\n * A customizable Autocomplete component supporting search and combobox modes.\n * Supports single and multiple selection with dynamic tag rendering and optional loading states.\n *\n * @param props - The component props\n * @returns The rendered Autocomplete component\n */\nexport const Autocomplete = ({\n  ariaLabel,\n  className,\n  disabled = false,\n  errorText,\n  fdKey,\n  fullWidth = false,\n  helperText,\n  label,\n  loading = false,\n  multiple = false,\n  onChange,\n  onInputChange,\n  options = [],\n  placeholder,\n  required = false,\n  shortcutHotkey = false,\n  type = 'search',\n  value,\n}: AutocompleteProps): JSX.Element => {\n  const inputRef = useRef<HTMLInputElement>(null);\n  const [inputText, setInputText] = useState<string>('');\n  const [isOpen, setIsOpen] = useState<boolean>(false);\n\n  const { translate } = useTranslation();\n\n  /**\n   * Normalizes the value prop for MUI Autocomplete.\n   * Handles both single and multiple selection modes, ensuring the value\n   * format matches the mode (array for multiple, single value/null for single).\n   *\n   * @returns Normalized value compatible with MUI Autocomplete\n   */\n  const getValue = (): AutocompleteProps['value'] => {\n    // Multiple value selection\n    if (multiple) {\n      if (Array.isArray(value)) return value;\n      if (value === null || value === undefined) return [];\n      return [value as AutocompleteOption];\n    }\n\n    // Single value selection\n    if (Array.isArray(value)) return value.length > 0 ? value[0] : null;\n    return value ?? null;\n  };\n\n  const normalizedValue = getValue();\n  const isSearch = type === 'search';\n  const isCombobox = type === 'combobox';\n  const isClearable = (Boolean(inputText) || Boolean(normalizedValue)) && !disabled;\n  const isShortcutHotkeyEnabled = isSearch && shortcutHotkey && !normalizedValue && !disabled;\n  const screenReaderOnlyId = useVisuallyHiddenId();\n\n  const handleShortcutHotkeyFocus = useCallback(() => {\n    inputRef.current?.focus();\n  }, []);\n\n  // Hotkey handling and display for Cmd/Ctrl + K\n  const { hotkeyText } = useShortcutHotkey({\n    enabled: isShortcutHotkeyEnabled,\n    onTrigger: handleShortcutHotkeyFocus,\n  });\n\n  // Dynamic limit tags calculation\n  const { rootRef, limitTags } = useDynamicLimitTags({\n    chipMax: 130,\n    gap: 4,\n    horizontalPadding: 32,\n    reservedPx: isSearch ? 120 : 90,\n  });\n\n  /**\n   * Close the dropdown (if open) when:\n   * - the component is dynamically disabled.\n   * - if search mode and no options are provided.\n   */\n  useEffect(() => {\n    if (!isOpen) return;\n    if (disabled) setIsOpen(false);\n    if (isSearch && options.length === 0) setIsOpen(false);\n  }, [isOpen, disabled, isSearch, options.length]);\n\n  /**\n   * Toggles or sets the dropdown open state.\n   * Does nothing when:\n   * - the component is disabled.\n   * - if search mode and no options are provided.\n   *\n   * @param open - Optional boolean to explicitly set open state; if undefined, toggles current state\n   */\n  const toggleOpen = (open?: boolean): void => {\n    if (disabled) return;\n    if (isSearch && options.length === 0) return;\n\n    if (open !== undefined) {\n      setIsOpen(open);\n      return;\n    }\n\n    setIsOpen((prevOpen) => !prevOpen);\n  };\n\n  const renderSearchIcon = (): JSX.Element => {\n    return (\n      <StyledInputAdornment disabled={disabled} position=\"start\">\n        <SearchIcon aria-hidden=\"true\" data-fd=\"search-icon\" />\n      </StyledInputAdornment>\n    );\n  };\n\n  const renderPopupIcon = (): JSX.Element => {\n    return (\n      <StyledInputAdornment disabled={disabled} position=\"end\">\n        {isOpen ? <ArrowUp01Icon /> : <ArrowDown01Icon />}\n      </StyledInputAdornment>\n    );\n  };\n\n  const renderShortcutHotkey = (): JSX.Element => {\n    return (\n      <ShortcutBadgeWrapper>\n        <Badge label={hotkeyText} size=\"small\" tone=\"neutral\" />\n      </ShortcutBadgeWrapper>\n    );\n  };\n\n  const renderEndAdornment = (): React.ReactNode => {\n    return (\n      <StyledEndAdornmentContainer>\n        {loading ? <CircularProgress size=\"small\" /> : null}\n        {isShortcutHotkeyEnabled ? renderShortcutHotkey() : null}\n      </StyledEndAdornmentContainer>\n    );\n  };\n\n  const renderInputField = (params: AutocompleteRenderInputParams): JSX.Element => {\n    const hasOptions = Array.isArray(options) && options.length > 0;\n    const showPopup = isCombobox || (isSearch && hasOptions);\n    const ariaDescribedBy =\n      [params.inputProps['aria-describedby'], isShortcutHotkeyEnabled ? screenReaderOnlyId : undefined]\n        .filter(Boolean)\n        .join(' ') || undefined;\n\n    return (\n      <TextField\n        disabled={disabled}\n        errorText={errorText}\n        fdKey={fdKey}\n        fullWidth={fullWidth}\n        helperText={helperText}\n        inputRef={inputRef}\n        label={label}\n        placeholder={placeholder}\n        required={required}\n        slotProps={{\n          input: {\n            ...params.InputProps,\n            endAdornment: (\n              <>\n                {renderEndAdornment()}\n                {params.InputProps.endAdornment}\n              </>\n            ),\n            startAdornment: (\n              <>\n                {isSearch ? renderSearchIcon() : null}\n                {params.InputProps.startAdornment}\n              </>\n            ),\n          },\n          htmlInput: {\n            ...params.inputProps,\n            id: fdKey,\n            'aria-label': isSearch && !label ? ariaLabel : undefined,\n            'aria-describedby': ariaDescribedBy,\n            // If the popup is not shown, hide the autocomplete listbox functionality from screen readers\n            ...(!showPopup && {\n              role: 'searchbox',\n              'aria-autocomplete': 'none',\n              'aria-invalid': !errorText && !required ? undefined : params.inputProps['aria-invalid'],\n            }),\n          },\n        }}\n      />\n    );\n  };\n\n  const renderMenuOption = (\n    optionProps: React.HTMLAttributes<HTMLLIElement> & { key: React.Key },\n    option: AutocompleteOption,\n    state: AutocompleteRenderOptionState,\n  ): JSX.Element => {\n    const { key, onClick, ...rest } = optionProps;\n\n    if (multiple) {\n      return (\n        <MenuItem\n          {...rest}\n          key={key}\n          checked={state.selected}\n          label={option.label}\n          onCheckedChange={(_checked, e) => {\n            onClick?.(e as React.MouseEvent<HTMLLIElement, MouseEvent>);\n          }}\n          type=\"checkbox\"\n        />\n      );\n    }\n\n    return (\n      <MenuItem\n        {...rest}\n        key={key}\n        label={option.label}\n        onClick={onClick}\n        selected={state.selected}\n        type=\"text\"\n      />\n    );\n  };\n\n  const renderSelectedTags = (\n    selected: AutocompleteOption[],\n    getTagProps: AutocompleteRenderGetTagProps,\n  ): React.ReactNode =>\n    selected.map((tag, index) => {\n      const { key, onDelete, ...tagProps } = getTagProps({ index });\n      const rawLabel = typeof tag === 'string' ? tag : tag.label;\n      const label = truncateWithEllipsis(rawLabel, 13, { includeEllipsisInLimit: true });\n      const isTruncated = label.endsWith('...');\n      const tagKey = key ?? `tag-${typeof tag === 'string' ? tag : tag.value}`;\n\n      if (isTruncated) {\n        return (\n          <Tooltip key={tagKey} title={rawLabel}>\n            <span {...tagProps}>\n              <Tag label={label} onDismiss={onDelete} />\n            </span>\n          </Tooltip>\n        );\n      }\n\n      return (\n        <span key={tagKey} {...tagProps}>\n          <Tag label={label} onDismiss={onDelete} />\n        </span>\n      );\n    });\n\n  const handlePopupIndicatorClick = (event: React.MouseEvent): void => {\n    if (disabled) {\n      return;\n    }\n\n    event.stopPropagation();\n    toggleOpen();\n  };\n\n  const handleChange = (\n    event: React.SyntheticEvent,\n    value: AutocompleteValue<AutocompleteOption, boolean, boolean, boolean>,\n    reason: AutocompleteChangeReason,\n    details?: AutocompleteChangeDetails<AutocompleteOption>,\n  ): void => {\n    if (!onChange) {\n      return;\n    }\n    onChange(event, value, reason, details);\n  };\n\n  const handleInputChange = (\n    event: React.SyntheticEvent,\n    value: string,\n    reason: AutocompleteInputChangeReason,\n  ): void => {\n    setInputText(value);\n    if (!onInputChange) {\n      return;\n    }\n    onInputChange(event, value, reason);\n  };\n\n  /**\n   * Returns all options without filtering for search mode.\n   * Disables MUI's built-in client-side filtering when type is 'search'.\n   */\n  const disableClientFilter = (opts: AutocompleteOption[]): AutocompleteOption[] => opts;\n\n  /**\n   * Extracts the display label from an option.\n   * Supports both object options and freeSolo string values.\n   */\n  const getOptionLabel = (option: AutocompleteOption | string): string => {\n    return typeof option === 'string' ? option : option.label;\n  };\n\n  /**\n   * Provides a stable unique key for each option to optimize DOM reconciliation.\n   */\n  const getOptionKey = (option: AutocompleteOption | string): string => {\n    return typeof option === 'string' ? option : String(option.value);\n  };\n\n  /**\n   * Determines equality between an option and the current value.\n   * Handles both freeSolo string values and object options to prevent selection glitches.\n   */\n  const getIsOptionEqualToValue = (a: AutocompleteOption, b: AutocompleteOption): boolean => {\n    if (b === null || b === undefined) {\n      return false;\n    }\n    return typeof b === 'string' ? a.label === b || String(a.value) === b : a.value === b.value;\n  };\n\n  return (\n    <>\n      <StyledAutocomplete\n        ref={rootRef}\n        className={className}\n        clearIcon={<CancelIcon size=\"md\" />}\n        clearText={translate('Clear_selection')}\n        disableClearable={!isClearable}\n        disableCloseOnSelect={multiple}\n        disabled={disabled}\n        filterOptions={isSearch ? disableClientFilter : undefined}\n        forcePopupIcon={isCombobox}\n        freeSolo={isSearch}\n        fullWidth={fullWidth}\n        getOptionKey={getOptionKey}\n        getOptionLabel={getOptionLabel}\n        inputValue={inputText}\n        isOptionEqualToValue={getIsOptionEqualToValue}\n        limitTags={limitTags}\n        loading={loading}\n        loadingText={`${translate('Loading')}...`}\n        multiple={multiple}\n        noOptionsText={translate('No_options')}\n        onChange={handleChange}\n        onClose={() => toggleOpen(false)}\n        onInputChange={handleInputChange}\n        onOpen={() => toggleOpen(true)}\n        open={isOpen}\n        openText={translate('Open_popup')}\n        options={options}\n        popupIcon={isCombobox ? renderPopupIcon() : null}\n        renderInput={renderInputField}\n        renderOption={renderMenuOption}\n        renderTags={renderSelectedTags}\n        slotProps={{\n          popupIndicator: {\n            onClick: handlePopupIndicatorClick,\n          },\n        }}\n        value={normalizedValue}\n      />\n\n      {isShortcutHotkeyEnabled && (\n        <VisuallyHidden fdKey=\"autocomplete-shortcut-hotkey\" id={screenReaderOnlyId}>\n          {translate('Press_hotkey_to_focus_search', { hotkey: hotkeyText })}\n        </VisuallyHidden>\n      )}\n    </>\n  );\n};\n\nexport default Autocomplete;\n"],"names":["MuiCustomAutocomplete","StyledAutocomplete","styled","shouldForwardProp","prop","fullWidth","width","StyledInputAdornment","MuiInputAdornment","theme","disabled","margin","color","palette","semantic","icon","StyledEndAdornmentContainer","Box","alignItems","display","gap","spacing","ShortcutBadgeWrapper","Autocomplete","ariaLabel","className","errorText","fdKey","helperText","label","loading","multiple","onChange","onInputChange","options","placeholder","required","shortcutHotkey","type","value","inputRef","useRef","inputText","setInputText","useState","isOpen","setIsOpen","translate","useTranslation","normalizedValue","Array","isArray","length","isSearch","isCombobox","isClearable","Boolean","isShortcutHotkeyEnabled","screenReaderOnlyId","useVisuallyHiddenId","handleShortcutHotkeyFocus","useCallback","current","focus","hotkeyText","useShortcutHotkey","enabled","onTrigger","rootRef","limitTags","useDynamicLimitTags","chipMax","horizontalPadding","reservedPx","useEffect","toggleOpen","open","undefined","prevOpen","_jsxs","_Fragment","children","_jsx","ref","clearIcon","CancelIcon","size","clearText","disableClearable","disableCloseOnSelect","filterOptions","opts","forcePopupIcon","freeSolo","getOptionKey","option","String","getOptionLabel","inputValue","isOptionEqualToValue","a","b","loadingText","noOptionsText","event","reason","details","onClose","onOpen","openText","popupIcon","position","ArrowUp01Icon","ArrowDown01Icon","renderInput","params","hasOptions","showPopup","ariaDescribedBy","inputProps","filter","join","TextField","slotProps","input","InputProps","endAdornment","CircularProgress","Badge","tone","startAdornment","SearchIcon","htmlInput","id","role","renderOption","optionProps","state","key","onClick","rest","_createElement","MenuItem","checked","selected","onCheckedChange","_checked","e","renderTags","getTagProps","map","tag","index","onDelete","tagProps","rawLabel","truncateWithEllipsis","includeEllipsisInLimit","isTruncated","endsWith","tagKey","Tooltip","title","Tag","onDismiss","popupIndicator","stopPropagation","VisuallyHidden","hotkey"],"mappings":"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"}
+{"version":3,"file":"index.cjs.js","sources":["../../../../src/components/molecules/Autocomplete/index.tsx"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\n\nimport MuiAutocomplete, {\n  type AutocompleteChangeDetails,\n  type AutocompleteChangeReason,\n  type AutocompleteInputChangeReason,\n  type AutocompleteProps as MuiAutocompleteProps,\n  type AutocompleteRenderGetTagProps,\n  type AutocompleteRenderInputParams,\n  type AutocompleteRenderOptionState,\n  type AutocompleteValue,\n} from '@mui/material/Autocomplete';\nimport Box from '@mui/material/Box';\nimport MuiInputAdornment from '@mui/material/InputAdornment';\nimport { styled } from '@mui/material/styles';\n\nimport Badge from '@fd/components/atoms/Badge';\nimport CircularProgress from '@fd/components/atoms/CircularProgress';\nimport MenuItem from '@fd/components/atoms/MenuItem';\nimport Tag from '@fd/components/atoms/Tag';\nimport TextField, { type TextFieldProps } from '@fd/components/atoms/TextField';\nimport VisuallyHidden, { useVisuallyHiddenId } from '@fd/components/atoms/VisuallyHidden';\nimport Tooltip from '@fd/components/molecules/Tooltip';\nimport ArrowDown01Icon from '@fd/icons/ArrowDown01';\nimport ArrowUp01Icon from '@fd/icons/ArrowUp01';\nimport CancelIcon from '@fd/icons/Cancel';\nimport SearchIcon from '@fd/icons/Search';\nimport { useTranslation } from '@fd/providers/TranslationProvider';\nimport { truncateWithEllipsis } from '@fd/utilities/stringUtilities';\n\nimport { useDynamicLimitTags } from './hooks/useDynamicLimitTags';\nimport { useShortcutHotkey } from './hooks/useShortcutHotkey';\n\n// Bind flags to MuiAutocomplete\ntype MuiCustomAutocompleteProps<\n  M extends boolean = boolean, // Multiple\n  DC extends boolean = boolean, // DisableClearable\n  FS extends boolean = boolean, // FreeSolo\n> = MuiAutocompleteProps<AutocompleteOption, M, DC, FS>;\n\n/**\n * Represents an option in the Autocomplete dropdown.\n */\nexport interface AutocompleteOption {\n  /** The label to display in the dropdown option. */\n  label: string;\n  /** The value to store in the dropdown option. */\n  value: number | string;\n}\n\n/**\n * Props for the Autocomplete component.\n * Supports both single and multiple selection modes with optional search functionality.\n */\nexport interface AutocompleteProps extends Omit<\n  TextFieldProps,\n  'endAdornment' | 'multiline' | 'onChange' | 'options' | 'startAdornment'\n> {\n  /** Aria-label for the input when no label is provided. */\n  ariaLabel?: string;\n  /** Shows a loading indicator inside the input (e.g., while fetching). */\n  loading?: boolean;\n  /** Enables selection of multiple options and shows checkboxes and tags for selected values. */\n  multiple?: MuiCustomAutocompleteProps['multiple'];\n  /** Called when the selected value(s) change. */\n  onChange: MuiCustomAutocompleteProps['onChange'];\n  /** Called when the input text changes (typing or programmatic updates). */\n  onInputChange?: MuiCustomAutocompleteProps['onInputChange'];\n  /** Options to display in the dropdown list. */\n  options: AutocompleteOption[];\n  /** Shows the keyboard shortcut badge (Cmd/Ctrl + K) and enables focusing via the shortcut when in search mode. */\n  shortcutHotkey?: boolean;\n  /** Visual behavior: 'search' shows a leading search icon; 'combobox' shows a popup button. */\n  type?: 'combobox' | 'search';\n  /** Controlled value (single option, array for multiple, or null). */\n  value: MuiCustomAutocompleteProps['value'];\n}\n\n// Bind flags to MuiAutocomplete, see MuiCustomAutocompleteProps for more details\nconst MuiCustomAutocomplete = MuiAutocomplete<AutocompleteOption, boolean, boolean, boolean>;\nconst StyledAutocomplete = styled(MuiCustomAutocomplete, {\n  shouldForwardProp: (prop) => prop !== 'fullWidth',\n})<{ fullWidth?: boolean }>(({ fullWidth = false }) => ({\n  width: fullWidth ? '100%' : 'min(364px, 100%)',\n}));\n\nconst StyledInputAdornment = styled(MuiInputAdornment, {\n  shouldForwardProp: (prop) => prop !== 'disabled',\n})<{ disabled?: boolean }>(({ theme, disabled = false }) => ({\n  '&.MuiInputAdornment-positionEnd': {\n    margin: 0,\n  },\n\n  '& svg': {\n    color: disabled\n      ? theme.palette.semantic.icon['icon-disabled']\n      : theme.palette.semantic.icon['icon-strong'],\n  },\n}));\n\nconst StyledEndAdornmentContainer = styled(Box)(({ theme }) => ({\n  alignItems: 'center',\n  display: 'flex',\n  gap: theme.spacing(1),\n}));\n\nconst ShortcutBadgeWrapper = styled('span')(() => ({\n  display: 'inline-flex',\n\n  // hide when input root is focused\n  '.Mui-focused &': {\n    display: 'none',\n  },\n}));\n\n/**\n * A customizable Autocomplete component supporting search and combobox modes.\n * Supports single and multiple selection with dynamic tag rendering and optional loading states.\n *\n * @param props - The component props\n * @returns The rendered Autocomplete component\n */\nexport const Autocomplete = ({\n  ariaLabel,\n  className,\n  disabled = false,\n  errorText,\n  fdKey,\n  fullWidth = false,\n  helperText,\n  label,\n  loading = false,\n  multiple = false,\n  onChange,\n  onInputChange,\n  options = [],\n  placeholder,\n  required = false,\n  shortcutHotkey = false,\n  type = 'search',\n  value,\n}: AutocompleteProps): JSX.Element => {\n  const inputRef = useRef<HTMLInputElement>(null);\n  const [inputText, setInputText] = useState<string>('');\n  const [isOpen, setIsOpen] = useState<boolean>(false);\n\n  const { translate } = useTranslation();\n\n  /**\n   * Normalizes the value prop for MUI Autocomplete.\n   * Handles both single and multiple selection modes, ensuring the value\n   * format matches the mode (array for multiple, single value/null for single).\n   *\n   * @returns Normalized value compatible with MUI Autocomplete\n   */\n  const getValue = (): AutocompleteProps['value'] => {\n    // Multiple value selection\n    if (multiple) {\n      if (Array.isArray(value)) return value;\n      if (value === null || value === undefined) return [];\n      return [value as AutocompleteOption];\n    }\n\n    // Single value selection\n    if (Array.isArray(value)) return value.length > 0 ? value[0] : null;\n    return value ?? null;\n  };\n\n  const normalizedValue = getValue();\n  const isSearch = type === 'search';\n  const isCombobox = type === 'combobox';\n  const isClearable = (Boolean(inputText) || Boolean(normalizedValue)) && !disabled;\n  const isShortcutHotkeyEnabled = isSearch && shortcutHotkey && !normalizedValue && !disabled;\n  const screenReaderOnlyId = useVisuallyHiddenId();\n\n  const handleShortcutHotkeyFocus = useCallback(() => {\n    inputRef.current?.focus();\n  }, []);\n\n  // Hotkey handling and display for Cmd/Ctrl + K\n  const { hotkeyText } = useShortcutHotkey({\n    enabled: isShortcutHotkeyEnabled,\n    onTrigger: handleShortcutHotkeyFocus,\n  });\n\n  // Dynamic limit tags calculation\n  const { rootRef, limitTags } = useDynamicLimitTags({\n    chipMax: 130,\n    gap: 4,\n    horizontalPadding: 32,\n    reservedPx: isSearch ? 120 : 90,\n  });\n\n  /**\n   * Close the dropdown (if open) when:\n   * - the component is dynamically disabled.\n   * - if search mode and no options are provided.\n   */\n  useEffect(() => {\n    if (!isOpen) return;\n    if (disabled) setIsOpen(false);\n    if (isSearch && options.length === 0) setIsOpen(false);\n  }, [isOpen, disabled, isSearch, options.length]);\n\n  /**\n   * Toggles or sets the dropdown open state.\n   * Does nothing when:\n   * - the component is disabled.\n   * - if search mode and no options are provided.\n   *\n   * @param open - Optional boolean to explicitly set open state; if undefined, toggles current state\n   */\n  const toggleOpen = (open?: boolean): void => {\n    if (disabled) return;\n    if (isSearch && options.length === 0) return;\n\n    if (open !== undefined) {\n      setIsOpen(open);\n      return;\n    }\n\n    setIsOpen((prevOpen) => !prevOpen);\n  };\n\n  const renderSearchIcon = (): JSX.Element => {\n    return (\n      <StyledInputAdornment disabled={disabled} position=\"start\">\n        <SearchIcon aria-hidden=\"true\" data-fd=\"search-icon\" />\n      </StyledInputAdornment>\n    );\n  };\n\n  const renderPopupIcon = (): JSX.Element => {\n    return (\n      <StyledInputAdornment disabled={disabled} position=\"end\">\n        {isOpen ? <ArrowUp01Icon /> : <ArrowDown01Icon />}\n      </StyledInputAdornment>\n    );\n  };\n\n  const renderShortcutHotkey = (): JSX.Element => {\n    return (\n      <ShortcutBadgeWrapper>\n        <Badge label={hotkeyText} size=\"small\" tone=\"neutral\" />\n      </ShortcutBadgeWrapper>\n    );\n  };\n\n  const renderEndAdornment = (): React.ReactNode => {\n    return (\n      <StyledEndAdornmentContainer>\n        {loading ? <CircularProgress size=\"small\" /> : null}\n        {isShortcutHotkeyEnabled ? renderShortcutHotkey() : null}\n      </StyledEndAdornmentContainer>\n    );\n  };\n\n  const renderInputField = (params: AutocompleteRenderInputParams): JSX.Element => {\n    const hasOptions = Array.isArray(options) && options.length > 0;\n    const showPopup = isCombobox || (isSearch && hasOptions);\n    const ariaDescribedBy =\n      [params.inputProps['aria-describedby'], isShortcutHotkeyEnabled ? screenReaderOnlyId : undefined]\n        .filter(Boolean)\n        .join(' ') || undefined;\n\n    return (\n      <TextField\n        disabled={disabled}\n        errorText={errorText}\n        fdKey={fdKey}\n        fullWidth={fullWidth}\n        helperText={helperText}\n        inputRef={inputRef}\n        label={label}\n        placeholder={placeholder}\n        required={required}\n        slotProps={{\n          input: {\n            ...params.InputProps,\n            endAdornment: (\n              <>\n                {renderEndAdornment()}\n                {params.InputProps.endAdornment}\n              </>\n            ),\n            startAdornment: (\n              <>\n                {isSearch ? renderSearchIcon() : null}\n                {params.InputProps.startAdornment}\n              </>\n            ),\n          },\n          htmlInput: {\n            ...params.inputProps,\n            id: fdKey,\n            'aria-label': isSearch && !label ? ariaLabel : undefined,\n            'aria-describedby': ariaDescribedBy,\n            // If the popup is not shown, hide the autocomplete listbox functionality from screen readers\n            ...(!showPopup && {\n              role: 'searchbox',\n              'aria-autocomplete': 'none',\n              'aria-invalid': !errorText && !required ? undefined : params.inputProps['aria-invalid'],\n            }),\n          },\n        }}\n      />\n    );\n  };\n\n  const renderMenuOption = (\n    optionProps: React.HTMLAttributes<HTMLLIElement> & { key: React.Key },\n    option: AutocompleteOption,\n    state: AutocompleteRenderOptionState,\n  ): JSX.Element => {\n    const { key, onClick, ...rest } = optionProps;\n\n    if (multiple) {\n      return (\n        <MenuItem\n          {...rest}\n          key={key}\n          checked={state.selected}\n          label={option.label}\n          onCheckedChange={(_checked, e) => {\n            onClick?.(e as React.MouseEvent<HTMLLIElement, MouseEvent>);\n          }}\n          type=\"checkbox\"\n        />\n      );\n    }\n\n    return (\n      <MenuItem\n        {...rest}\n        key={key}\n        label={option.label}\n        onClick={onClick}\n        selected={state.selected}\n        type=\"text\"\n      />\n    );\n  };\n\n  const renderSelectedTags = (\n    selected: AutocompleteOption[],\n    getTagProps: AutocompleteRenderGetTagProps,\n  ): React.ReactNode =>\n    selected.map((tag, index) => {\n      const { key, onDelete, ...tagProps } = getTagProps({ index });\n      const rawLabel = typeof tag === 'string' ? tag : tag.label;\n      const label = truncateWithEllipsis(rawLabel, 13, { includeEllipsisInLimit: true });\n      const isTruncated = label.endsWith('...');\n      const tagKey = key ?? `tag-${typeof tag === 'string' ? tag : tag.value}`;\n\n      if (isTruncated) {\n        return (\n          <Tooltip key={tagKey} title={rawLabel}>\n            <span {...tagProps}>\n              <Tag label={label} onDismiss={onDelete} />\n            </span>\n          </Tooltip>\n        );\n      }\n\n      return (\n        <span key={tagKey} {...tagProps}>\n          <Tag label={label} onDismiss={onDelete} />\n        </span>\n      );\n    });\n\n  const handlePopupIndicatorClick = (event: React.MouseEvent): void => {\n    if (disabled) {\n      return;\n    }\n\n    event.stopPropagation();\n    toggleOpen();\n  };\n\n  const handleChange = (\n    event: React.SyntheticEvent,\n    value: AutocompleteValue<AutocompleteOption, boolean, boolean, boolean>,\n    reason: AutocompleteChangeReason,\n    details?: AutocompleteChangeDetails<AutocompleteOption>,\n  ): void => {\n    if (!onChange) {\n      return;\n    }\n    onChange(event, value, reason, details);\n  };\n\n  const handleInputChange = (\n    event: React.SyntheticEvent,\n    value: string,\n    reason: AutocompleteInputChangeReason,\n  ): void => {\n    setInputText(value);\n    if (!onInputChange) {\n      return;\n    }\n    onInputChange(event, value, reason);\n  };\n\n  /**\n   * Returns all options without filtering for search mode.\n   * Disables MUI's built-in client-side filtering when type is 'search'.\n   */\n  const disableClientFilter = (opts: AutocompleteOption[]): AutocompleteOption[] => opts;\n\n  /**\n   * Extracts the display label from an option.\n   * Supports both object options and freeSolo string values.\n   */\n  const getOptionLabel = (option: AutocompleteOption | string): string => {\n    return typeof option === 'string' ? option : option.label;\n  };\n\n  /**\n   * Provides a stable unique key for each option to optimize DOM reconciliation.\n   */\n  const getOptionKey = (option: AutocompleteOption | string): string => {\n    return typeof option === 'string' ? option : String(option.value);\n  };\n\n  /**\n   * Determines equality between an option and the current value.\n   * Handles both freeSolo string values and object options to prevent selection glitches.\n   */\n  const getIsOptionEqualToValue = (a: AutocompleteOption, b: AutocompleteOption): boolean => {\n    if (b === null || b === undefined) {\n      return false;\n    }\n    return typeof b === 'string' ? a.label === b || String(a.value) === b : a.value === b.value;\n  };\n\n  return (\n    <>\n      <StyledAutocomplete\n        ref={rootRef}\n        className={className}\n        clearIcon={<CancelIcon size=\"md\" />}\n        clearText={translate('Clear_selection')}\n        disableClearable={!isClearable}\n        disableCloseOnSelect={multiple}\n        disabled={disabled}\n        filterOptions={isSearch ? disableClientFilter : undefined}\n        forcePopupIcon={isCombobox}\n        freeSolo={isSearch}\n        fullWidth={fullWidth}\n        getOptionKey={getOptionKey}\n        getOptionLabel={getOptionLabel}\n        inputValue={inputText}\n        isOptionEqualToValue={getIsOptionEqualToValue}\n        limitTags={limitTags}\n        loading={loading}\n        loadingText={`${translate('Loading')}...`}\n        multiple={multiple}\n        noOptionsText={translate('No_options')}\n        onChange={handleChange}\n        onClose={() => toggleOpen(false)}\n        onInputChange={handleInputChange}\n        onOpen={() => toggleOpen(true)}\n        open={isOpen}\n        openText={translate('Open_popup')}\n        options={options}\n        popupIcon={isCombobox ? renderPopupIcon() : null}\n        renderInput={renderInputField}\n        renderOption={renderMenuOption}\n        renderTags={renderSelectedTags}\n        slotProps={{\n          popupIndicator: {\n            onClick: handlePopupIndicatorClick,\n          },\n        }}\n        value={normalizedValue}\n      />\n\n      {isShortcutHotkeyEnabled && (\n        <VisuallyHidden fdKey=\"autocomplete-shortcut-hotkey\" id={screenReaderOnlyId}>\n          {translate('Press_hotkey_to_focus_search', { hotkey: hotkeyText })}\n        </VisuallyHidden>\n      )}\n    </>\n  );\n};\n\nexport default Autocomplete;\n"],"names":["MuiCustomAutocomplete","StyledAutocomplete","styled","shouldForwardProp","prop","fullWidth","width","StyledInputAdornment","MuiInputAdornment","theme","disabled","margin","color","palette","semantic","icon","StyledEndAdornmentContainer","Box","alignItems","display","gap","spacing","ShortcutBadgeWrapper","Autocomplete","ariaLabel","className","errorText","fdKey","helperText","label","loading","multiple","onChange","onInputChange","options","placeholder","required","shortcutHotkey","type","value","inputRef","useRef","inputText","setInputText","useState","isOpen","setIsOpen","translate","useTranslation","normalizedValue","Array","isArray","length","isSearch","isCombobox","isClearable","Boolean","isShortcutHotkeyEnabled","screenReaderOnlyId","useVisuallyHiddenId","handleShortcutHotkeyFocus","useCallback","current","focus","hotkeyText","useShortcutHotkey","enabled","onTrigger","rootRef","limitTags","useDynamicLimitTags","chipMax","horizontalPadding","reservedPx","useEffect","toggleOpen","open","undefined","prevOpen","_jsxs","_Fragment","children","_jsx","ref","clearIcon","CancelIcon","size","clearText","disableClearable","disableCloseOnSelect","filterOptions","opts","forcePopupIcon","freeSolo","getOptionKey","option","String","getOptionLabel","inputValue","isOptionEqualToValue","a","b","loadingText","noOptionsText","event","reason","details","onClose","onOpen","openText","popupIcon","position","ArrowUp01Icon","ArrowDown01Icon","renderInput","params","hasOptions","showPopup","ariaDescribedBy","inputProps","filter","join","TextField","slotProps","input","InputProps","endAdornment","CircularProgress","Badge","tone","startAdornment","SearchIcon","htmlInput","id","role","renderOption","optionProps","state","key","onClick","rest","_createElement","MenuItem","checked","selected","onCheckedChange","_checked","e","renderTags","getTagProps","map","tag","index","onDelete","tagProps","rawLabel","truncateWithEllipsis","includeEllipsisInLimit","isTruncated","endsWith","tagKey","Tooltip","title","Tag","onDismiss","popupIndicator","stopPropagation","VisuallyHidden","hotkey"],"mappings":"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"}

package/dist/components/molecules/Autocomplete/index.js

@@ -1,2 +1,2 @@
-import{useRef as e,useState as o,useCallback as i,useEffect as t,createElement as r}from"react";import{jsxs as n,Fragment as l,jsx as a}from"react/jsx-runtime";import s from"@mui/material/Autocomplete";import d from"@mui/material/Box";import p from"@mui/material/InputAdornment";import{styled as m}from"@mui/material/styles";import{Badge as c}from"../../atoms/Badge/index.js";import{CircularProgress as u}from"../../atoms/CircularProgress/index.js";import{MenuItem as h}from"../../atoms/MenuItem/index.js";import{Tag as f}from"../../atoms/Tag/index.js";import{TextField as g}from"../../atoms/TextField/index.js";import{useVisuallyHiddenId as y,VisuallyHidden as b}from"../../atoms/VisuallyHidden/index.js";import{Tooltip as x}from"../Tooltip/index.js";import v from"../../../icons/ArrowDown01/index.js";import T from"../../../icons/ArrowUp01/index.js";import k from"../../../icons/Cancel/index.js";import j from"../../../icons/Search/index.js";import{useTranslation as P}from"../../../providers/TranslationProvider.js";import{truncateWithEllipsis as I}from"../../../utilities/stringUtilities.js";import{useDynamicLimitTags as A}from"./hooks/useDynamicLimitTags.js";import{useShortcutHotkey as C}from"./hooks/useShortcutHotkey.js";const O=m(s,{shouldForwardProp:e=>"fullWidth"!==e})((({fullWidth:e=!1})=>({width:e?"100%":"min(364px, 100%)"}))),_=m(p,{shouldForwardProp:e=>"disabled"!==e})((({theme:e,disabled:o=!1})=>({"&.MuiInputAdornment-positionEnd":{margin:0},"& svg":{color:o?e.palette.semantic.icon["icon-disabled"]:e.palette.semantic.icon["icon-strong"]}}))),w=m(d)((({theme:e})=>({alignItems:"center",display:"flex",gap:e.spacing(1)}))),S=m("span")((()=>({display:"inline-flex",".Mui-focused &":{display:"none"}}))),W=({ariaLabel:s,className:d,disabled:p=!1,errorText:m,fdKey:W,fullWidth:B=!1,helperText:D,label:L,loading:z=!1,multiple:K=!1,onChange:M,onInputChange:q,options:E=[],placeholder:F,required:H=!1,shortcutHotkey:N=!1,type:V="search",value:R})=>{const U=e(null),[$,G]=o(""),[J,Q]=o(!1),{translate:X}=P(),Y=K?Array.isArray(R)?R:null==R?[]:[R]:Array.isArray(R)?R.length>0?R[0]:null:R??null,Z="search"===V,ee="combobox"===V,oe=(Boolean($)||Boolean(Y))&&!p,ie=Z&&N&&!Y&&!p,te=y(),re=i((()=>{U.current?.focus()}),[]),{hotkeyText:ne}=C({enabled:ie,onTrigger:re}),{rootRef:le,limitTags:ae}=A({chipMax:130,gap:4,horizontalPadding:32,reservedPx:Z?120:90});t((()=>{J&&(p&&Q(!1),Z&&0===E.length&&Q(!1))}),[J,p,Z,E.length]);const se=e=>{p||Z&&0===E.length||Q(void 0===e?e=>!e:e)};return n(l,{children:[a(O,{ref:le,className:d,clearIcon:a(k,{size:"md"}),clearText:X("Clear_selection"),disableClearable:!oe,disableCloseOnSelect:K,disabled:p,filterOptions:Z?e=>e:void 0,forcePopupIcon:ee,freeSolo:Z,fullWidth:B,getOptionKey:e=>"string"==typeof e?e:String(e.value),getOptionLabel:e=>"string"==typeof e?e:e.label,inputValue:$,isOptionEqualToValue:(e,o)=>null!=o&&("string"==typeof o?e.label===o||String(e.value)===o:e.value===o.value),limitTags:ae,loading:z,loadingText:`${X("Loading")}...`,multiple:K,noOptionsText:X("No_options"),onChange:(e,o,i,t)=>{M&&M(e,o,i,t)},onClose:()=>se(!1),onInputChange:(e,o,i)=>{G(o),q&&q(e,o,i)},onOpen:()=>se(!0),open:J,openText:X("Open_popup"),options:E,popupIcon:ee?a(_,{disabled:p,position:"end",children:a(J?T:v,{})}):null,renderInput:e=>{const o=Array.isArray(E)&&E.length>0,i=ee||Z&&o,t=[e.inputProps["aria-describedby"],ie?te:void 0].filter(Boolean).join(" ")||void 0;return a(g,{disabled:p,errorText:m,fdKey:W,fullWidth:B,helperText:D,inputRef:U,label:L,placeholder:F,required:H,slotProps:{input:{...e.InputProps,endAdornment:n(l,{children:[n(w,{children:[z?a(u,{size:"small"}):null,ie?a(S,{children:a(c,{label:ne,size:"small",tone:"neutral"})}):null]}),e.InputProps.endAdornment]}),startAdornment:n(l,{children:[Z?a(_,{disabled:p,position:"start",children:a(j,{"aria-hidden":"true","data-fd":"search-icon"})}):null,e.InputProps.startAdornment]})},htmlInput:{...e.inputProps,id:W,"aria-label":Z&&!L?s:void 0,"aria-describedby":t,...!i&&{role:"searchbox","aria-autocomplete":"none","aria-invalid":m||H?e.inputProps["aria-invalid"]:void 0}}}})},renderOption:(e,o,i)=>{const{key:t,onClick:n,...l}=e;return r(h,K?{...l,key:t,checked:i.selected,label:o.label,onCheckedChange:(e,o)=>{n?.(o)},type:"checkbox"}:{...l,key:t,label:o.label,onClick:n,selected:i.selected,type:"text"})},renderTags:(e,o)=>e.map(((e,i)=>{const{key:t,onDelete:r,...n}=o({index:i}),l="string"==typeof e?e:e.label,s=I(l,13,{includeEllipsisInLimit:!0}),d=s.endsWith("..."),p=t??`tag-${"string"==typeof e?e:e.value}`;return d?a(x,{title:l,children:a("span",{...n,children:a(f,{label:s,onDismiss:r})})},p):a("span",{...n,children:a(f,{label:s,onDismiss:r})},p)})),slotProps:{popupIndicator:{onClick:e=>{p||(e.stopPropagation(),se())}}},value:Y}),ie&&a(b,{fdKey:"autocomplete-shortcut-hotkey",id:te,children:X("Press_hotkey_to_focus_search",{hotkey:ne})})]})};export{W as Autocomplete,W as default};
+import{useRef as e,useState as o,useCallback as i,useEffect as t,createElement as r}from"react";import{jsxs as n,Fragment as l,jsx as a}from"react/jsx-runtime";import s from"@mui/material/Autocomplete";import d from"@mui/material/Box";import p from"@mui/material/InputAdornment";import{styled as m}from"@mui/material/styles";import{Badge as c}from"../../atoms/Badge/index.js";import{CircularProgress as u}from"../../atoms/CircularProgress/index.js";import{MenuItem as h}from"../../atoms/MenuItem/index.js";import{Tag as f}from"../../atoms/Tag/index.js";import{TextField as g}from"../../atoms/TextField/index.js";import{useVisuallyHiddenId as y,VisuallyHidden as b}from"../../atoms/VisuallyHidden/index.js";import{Tooltip as x}from"../Tooltip/index.js";import v from"../../../icons/ArrowDown01/index.js";import T from"../../../icons/ArrowUp01/index.js";import k from"../../../icons/Cancel/index.js";import j from"../../../icons/Search/index.js";import{useTranslation as P}from"../../../providers/TranslationProvider.js";import{truncateWithEllipsis as I}from"../../../utilities/stringUtilities.js";import{useDynamicLimitTags as A}from"./hooks/useDynamicLimitTags.js";import{useShortcutHotkey as C}from"./hooks/useShortcutHotkey.js";const O=m(s,{shouldForwardProp:e=>"fullWidth"!==e})(({fullWidth:e=!1})=>({width:e?"100%":"min(364px, 100%)"})),_=m(p,{shouldForwardProp:e=>"disabled"!==e})(({theme:e,disabled:o=!1})=>({"&.MuiInputAdornment-positionEnd":{margin:0},"& svg":{color:o?e.palette.semantic.icon["icon-disabled"]:e.palette.semantic.icon["icon-strong"]}})),w=m(d)(({theme:e})=>({alignItems:"center",display:"flex",gap:e.spacing(1)})),S=m("span")(()=>({display:"inline-flex",".Mui-focused &":{display:"none"}})),W=({ariaLabel:s,className:d,disabled:p=!1,errorText:m,fdKey:W,fullWidth:B=!1,helperText:D,label:L,loading:z=!1,multiple:K=!1,onChange:M,onInputChange:q,options:E=[],placeholder:F,required:H=!1,shortcutHotkey:N=!1,type:V="search",value:R})=>{const U=e(null),[$,G]=o(""),[J,Q]=o(!1),{translate:X}=P(),Y=K?Array.isArray(R)?R:null==R?[]:[R]:Array.isArray(R)?R.length>0?R[0]:null:R??null,Z="search"===V,ee="combobox"===V,oe=(Boolean($)||Boolean(Y))&&!p,ie=Z&&N&&!Y&&!p,te=y(),re=i(()=>{U.current?.focus()},[]),{hotkeyText:ne}=C({enabled:ie,onTrigger:re}),{rootRef:le,limitTags:ae}=A({chipMax:130,gap:4,horizontalPadding:32,reservedPx:Z?120:90});t(()=>{J&&(p&&Q(!1),Z&&0===E.length&&Q(!1))},[J,p,Z,E.length]);const se=e=>{p||Z&&0===E.length||Q(void 0===e?e=>!e:e)};return n(l,{children:[a(O,{ref:le,className:d,clearIcon:a(k,{size:"md"}),clearText:X("Clear_selection"),disableClearable:!oe,disableCloseOnSelect:K,disabled:p,filterOptions:Z?e=>e:void 0,forcePopupIcon:ee,freeSolo:Z,fullWidth:B,getOptionKey:e=>"string"==typeof e?e:String(e.value),getOptionLabel:e=>"string"==typeof e?e:e.label,inputValue:$,isOptionEqualToValue:(e,o)=>null!=o&&("string"==typeof o?e.label===o||String(e.value)===o:e.value===o.value),limitTags:ae,loading:z,loadingText:`${X("Loading")}...`,multiple:K,noOptionsText:X("No_options"),onChange:(e,o,i,t)=>{M&&M(e,o,i,t)},onClose:()=>se(!1),onInputChange:(e,o,i)=>{G(o),q&&q(e,o,i)},onOpen:()=>se(!0),open:J,openText:X("Open_popup"),options:E,popupIcon:ee?a(_,{disabled:p,position:"end",children:a(J?T:v,{})}):null,renderInput:e=>{const o=Array.isArray(E)&&E.length>0,i=ee||Z&&o,t=[e.inputProps["aria-describedby"],ie?te:void 0].filter(Boolean).join(" ")||void 0;return a(g,{disabled:p,errorText:m,fdKey:W,fullWidth:B,helperText:D,inputRef:U,label:L,placeholder:F,required:H,slotProps:{input:{...e.InputProps,endAdornment:n(l,{children:[n(w,{children:[z?a(u,{size:"small"}):null,ie?a(S,{children:a(c,{label:ne,size:"small",tone:"neutral"})}):null]}),e.InputProps.endAdornment]}),startAdornment:n(l,{children:[Z?a(_,{disabled:p,position:"start",children:a(j,{"aria-hidden":"true","data-fd":"search-icon"})}):null,e.InputProps.startAdornment]})},htmlInput:{...e.inputProps,id:W,"aria-label":Z&&!L?s:void 0,"aria-describedby":t,...!i&&{role:"searchbox","aria-autocomplete":"none","aria-invalid":m||H?e.inputProps["aria-invalid"]:void 0}}}})},renderOption:(e,o,i)=>{const{key:t,onClick:n,...l}=e;return r(h,K?{...l,key:t,checked:i.selected,label:o.label,onCheckedChange:(e,o)=>{n?.(o)},type:"checkbox"}:{...l,key:t,label:o.label,onClick:n,selected:i.selected,type:"text"})},renderTags:(e,o)=>e.map((e,i)=>{const{key:t,onDelete:r,...n}=o({index:i}),l="string"==typeof e?e:e.label,s=I(l,13,{includeEllipsisInLimit:!0}),d=s.endsWith("..."),p=t??`tag-${"string"==typeof e?e:e.value}`;return d?a(x,{title:l,children:a("span",{...n,children:a(f,{label:s,onDismiss:r})})},p):a("span",{...n,children:a(f,{label:s,onDismiss:r})},p)}),slotProps:{popupIndicator:{onClick:e=>{p||(e.stopPropagation(),se())}}},value:Y}),ie&&a(b,{fdKey:"autocomplete-shortcut-hotkey",id:te,children:X("Press_hotkey_to_focus_search",{hotkey:ne})})]})};export{W as Autocomplete,W as default};
 //# sourceMappingURL=index.js.map

package/dist/components/molecules/Autocomplete/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/molecules/Autocomplete/index.tsx"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\n\nimport MuiAutocomplete, {\n  type AutocompleteChangeDetails,\n  type AutocompleteChangeReason,\n  type AutocompleteInputChangeReason,\n  type AutocompleteProps as MuiAutocompleteProps,\n  type AutocompleteRenderGetTagProps,\n  type AutocompleteRenderInputParams,\n  type AutocompleteRenderOptionState,\n  type AutocompleteValue,\n} from '@mui/material/Autocomplete';\nimport Box from '@mui/material/Box';\nimport MuiInputAdornment from '@mui/material/InputAdornment';\nimport { styled } from '@mui/material/styles';\n\nimport Badge from '@fd/components/atoms/Badge';\nimport CircularProgress from '@fd/components/atoms/CircularProgress';\nimport MenuItem from '@fd/components/atoms/MenuItem';\nimport Tag from '@fd/components/atoms/Tag';\nimport TextField, { type TextFieldProps } from '@fd/components/atoms/TextField';\nimport VisuallyHidden, { useVisuallyHiddenId } from '@fd/components/atoms/VisuallyHidden';\nimport Tooltip from '@fd/components/molecules/Tooltip';\nimport ArrowDown01Icon from '@fd/icons/ArrowDown01';\nimport ArrowUp01Icon from '@fd/icons/ArrowUp01';\nimport CancelIcon from '@fd/icons/Cancel';\nimport SearchIcon from '@fd/icons/Search';\nimport { useTranslation } from '@fd/providers/TranslationProvider';\nimport { truncateWithEllipsis } from '@fd/utilities/stringUtilities';\n\nimport { useDynamicLimitTags } from './hooks/useDynamicLimitTags';\nimport { useShortcutHotkey } from './hooks/useShortcutHotkey';\n\n// Bind flags to MuiAutocomplete\ntype MuiCustomAutocompleteProps<\n  M extends boolean = boolean, // Multiple\n  DC extends boolean = boolean, // DisableClearable\n  FS extends boolean = boolean, // FreeSolo\n> = MuiAutocompleteProps<AutocompleteOption, M, DC, FS>;\n\n/**\n * Represents an option in the Autocomplete dropdown.\n */\nexport interface AutocompleteOption {\n  /** The label to display in the dropdown option. */\n  label: string;\n  /** The value to store in the dropdown option. */\n  value: number | string;\n}\n\n/**\n * Props for the Autocomplete component.\n * Supports both single and multiple selection modes with optional search functionality.\n */\nexport interface AutocompleteProps extends Omit<\n  TextFieldProps,\n  'endAdornment' | 'multiline' | 'onChange' | 'options' | 'startAdornment'\n> {\n  /** Aria-label for the input when no label is provided. */\n  ariaLabel?: string;\n  /** Shows a loading indicator inside the input (e.g., while fetching). */\n  loading?: boolean;\n  /** Enables selection of multiple options and shows checkboxes and tags for selected values. */\n  multiple?: MuiCustomAutocompleteProps['multiple'];\n  /** Called when the selected value(s) change. */\n  onChange: MuiCustomAutocompleteProps['onChange'];\n  /** Called when the input text changes (typing or programmatic updates). */\n  onInputChange?: MuiCustomAutocompleteProps['onInputChange'];\n  /** Options to display in the dropdown list. */\n  options: AutocompleteOption[];\n  /** Shows the keyboard shortcut badge (Cmd/Ctrl + K) and enables focusing via the shortcut when in search mode. */\n  shortcutHotkey?: boolean;\n  /** Visual behavior: 'search' shows a leading search icon; 'combobox' shows a popup button. */\n  type?: 'combobox' | 'search';\n  /** Controlled value (single option, array for multiple, or null). */\n  value: MuiCustomAutocompleteProps['value'];\n}\n\n// Bind flags to MuiAutocomplete, see MuiCustomAutocompleteProps for more details\nconst MuiCustomAutocomplete = MuiAutocomplete<AutocompleteOption, boolean, boolean, boolean>;\nconst StyledAutocomplete = styled(MuiCustomAutocomplete, {\n  shouldForwardProp: (prop) => prop !== 'fullWidth',\n})<{ fullWidth?: boolean }>(({ fullWidth = false }) => ({\n  width: fullWidth ? '100%' : 'min(364px, 100%)',\n}));\n\nconst StyledInputAdornment = styled(MuiInputAdornment, {\n  shouldForwardProp: (prop) => prop !== 'disabled',\n})<{ disabled?: boolean }>(({ theme, disabled = false }) => ({\n  '&.MuiInputAdornment-positionEnd': {\n    margin: 0,\n  },\n\n  '& svg': {\n    color: disabled\n      ? theme.palette.semantic.icon['icon-disabled']\n      : theme.palette.semantic.icon['icon-strong'],\n  },\n}));\n\nconst StyledEndAdornmentContainer = styled(Box)(({ theme }) => ({\n  alignItems: 'center',\n  display: 'flex',\n  gap: theme.spacing(1),\n}));\n\nconst ShortcutBadgeWrapper = styled('span')(() => ({\n  display: 'inline-flex',\n\n  // hide when input root is focused\n  '.Mui-focused &': {\n    display: 'none',\n  },\n}));\n\n/**\n * A customizable Autocomplete component supporting search and combobox modes.\n * Supports single and multiple selection with dynamic tag rendering and optional loading states.\n *\n * @param props - The component props\n * @returns The rendered Autocomplete component\n */\nexport const Autocomplete = ({\n  ariaLabel,\n  className,\n  disabled = false,\n  errorText,\n  fdKey,\n  fullWidth = false,\n  helperText,\n  label,\n  loading = false,\n  multiple = false,\n  onChange,\n  onInputChange,\n  options = [],\n  placeholder,\n  required = false,\n  shortcutHotkey = false,\n  type = 'search',\n  value,\n}: AutocompleteProps): JSX.Element => {\n  const inputRef = useRef<HTMLInputElement>(null);\n  const [inputText, setInputText] = useState<string>('');\n  const [isOpen, setIsOpen] = useState<boolean>(false);\n\n  const { translate } = useTranslation();\n\n  /**\n   * Normalizes the value prop for MUI Autocomplete.\n   * Handles both single and multiple selection modes, ensuring the value\n   * format matches the mode (array for multiple, single value/null for single).\n   *\n   * @returns Normalized value compatible with MUI Autocomplete\n   */\n  const getValue = (): AutocompleteProps['value'] => {\n    // Multiple value selection\n    if (multiple) {\n      if (Array.isArray(value)) return value;\n      if (value === null || value === undefined) return [];\n      return [value as AutocompleteOption];\n    }\n\n    // Single value selection\n    if (Array.isArray(value)) return value.length > 0 ? value[0] : null;\n    return value ?? null;\n  };\n\n  const normalizedValue = getValue();\n  const isSearch = type === 'search';\n  const isCombobox = type === 'combobox';\n  const isClearable = (Boolean(inputText) || Boolean(normalizedValue)) && !disabled;\n  const isShortcutHotkeyEnabled = isSearch && shortcutHotkey && !normalizedValue && !disabled;\n  const screenReaderOnlyId = useVisuallyHiddenId();\n\n  const handleShortcutHotkeyFocus = useCallback(() => {\n    inputRef.current?.focus();\n  }, []);\n\n  // Hotkey handling and display for Cmd/Ctrl + K\n  const { hotkeyText } = useShortcutHotkey({\n    enabled: isShortcutHotkeyEnabled,\n    onTrigger: handleShortcutHotkeyFocus,\n  });\n\n  // Dynamic limit tags calculation\n  const { rootRef, limitTags } = useDynamicLimitTags({\n    chipMax: 130,\n    gap: 4,\n    horizontalPadding: 32,\n    reservedPx: isSearch ? 120 : 90,\n  });\n\n  /**\n   * Close the dropdown (if open) when:\n   * - the component is dynamically disabled.\n   * - if search mode and no options are provided.\n   */\n  useEffect(() => {\n    if (!isOpen) return;\n    if (disabled) setIsOpen(false);\n    if (isSearch && options.length === 0) setIsOpen(false);\n  }, [isOpen, disabled, isSearch, options.length]);\n\n  /**\n   * Toggles or sets the dropdown open state.\n   * Does nothing when:\n   * - the component is disabled.\n   * - if search mode and no options are provided.\n   *\n   * @param open - Optional boolean to explicitly set open state; if undefined, toggles current state\n   */\n  const toggleOpen = (open?: boolean): void => {\n    if (disabled) return;\n    if (isSearch && options.length === 0) return;\n\n    if (open !== undefined) {\n      setIsOpen(open);\n      return;\n    }\n\n    setIsOpen((prevOpen) => !prevOpen);\n  };\n\n  const renderSearchIcon = (): JSX.Element => {\n    return (\n      <StyledInputAdornment disabled={disabled} position=\"start\">\n        <SearchIcon aria-hidden=\"true\" data-fd=\"search-icon\" />\n      </StyledInputAdornment>\n    );\n  };\n\n  const renderPopupIcon = (): JSX.Element => {\n    return (\n      <StyledInputAdornment disabled={disabled} position=\"end\">\n        {isOpen ? <ArrowUp01Icon /> : <ArrowDown01Icon />}\n      </StyledInputAdornment>\n    );\n  };\n\n  const renderShortcutHotkey = (): JSX.Element => {\n    return (\n      <ShortcutBadgeWrapper>\n        <Badge label={hotkeyText} size=\"small\" tone=\"neutral\" />\n      </ShortcutBadgeWrapper>\n    );\n  };\n\n  const renderEndAdornment = (): React.ReactNode => {\n    return (\n      <StyledEndAdornmentContainer>\n        {loading ? <CircularProgress size=\"small\" /> : null}\n        {isShortcutHotkeyEnabled ? renderShortcutHotkey() : null}\n      </StyledEndAdornmentContainer>\n    );\n  };\n\n  const renderInputField = (params: AutocompleteRenderInputParams): JSX.Element => {\n    const hasOptions = Array.isArray(options) && options.length > 0;\n    const showPopup = isCombobox || (isSearch && hasOptions);\n    const ariaDescribedBy =\n      [params.inputProps['aria-describedby'], isShortcutHotkeyEnabled ? screenReaderOnlyId : undefined]\n        .filter(Boolean)\n        .join(' ') || undefined;\n\n    return (\n      <TextField\n        disabled={disabled}\n        errorText={errorText}\n        fdKey={fdKey}\n        fullWidth={fullWidth}\n        helperText={helperText}\n        inputRef={inputRef}\n        label={label}\n        placeholder={placeholder}\n        required={required}\n        slotProps={{\n          input: {\n            ...params.InputProps,\n            endAdornment: (\n              <>\n                {renderEndAdornment()}\n                {params.InputProps.endAdornment}\n              </>\n            ),\n            startAdornment: (\n              <>\n                {isSearch ? renderSearchIcon() : null}\n                {params.InputProps.startAdornment}\n              </>\n            ),\n          },\n          htmlInput: {\n            ...params.inputProps,\n            id: fdKey,\n            'aria-label': isSearch && !label ? ariaLabel : undefined,\n            'aria-describedby': ariaDescribedBy,\n            // If the popup is not shown, hide the autocomplete listbox functionality from screen readers\n            ...(!showPopup && {\n              role: 'searchbox',\n              'aria-autocomplete': 'none',\n              'aria-invalid': !errorText && !required ? undefined : params.inputProps['aria-invalid'],\n            }),\n          },\n        }}\n      />\n    );\n  };\n\n  const renderMenuOption = (\n    optionProps: React.HTMLAttributes<HTMLLIElement> & { key: React.Key },\n    option: AutocompleteOption,\n    state: AutocompleteRenderOptionState,\n  ): JSX.Element => {\n    const { key, onClick, ...rest } = optionProps;\n\n    if (multiple) {\n      return (\n        <MenuItem\n          {...rest}\n          key={key}\n          checked={state.selected}\n          label={option.label}\n          onCheckedChange={(_checked, e) => {\n            onClick?.(e as React.MouseEvent<HTMLLIElement, MouseEvent>);\n          }}\n          type=\"checkbox\"\n        />\n      );\n    }\n\n    return (\n      <MenuItem\n        {...rest}\n        key={key}\n        label={option.label}\n        onClick={onClick}\n        selected={state.selected}\n        type=\"text\"\n      />\n    );\n  };\n\n  const renderSelectedTags = (\n    selected: AutocompleteOption[],\n    getTagProps: AutocompleteRenderGetTagProps,\n  ): React.ReactNode =>\n    selected.map((tag, index) => {\n      const { key, onDelete, ...tagProps } = getTagProps({ index });\n      const rawLabel = typeof tag === 'string' ? tag : tag.label;\n      const label = truncateWithEllipsis(rawLabel, 13, { includeEllipsisInLimit: true });\n      const isTruncated = label.endsWith('...');\n      const tagKey = key ?? `tag-${typeof tag === 'string' ? tag : tag.value}`;\n\n      if (isTruncated) {\n        return (\n          <Tooltip key={tagKey} title={rawLabel}>\n            <span {...tagProps}>\n              <Tag label={label} onDismiss={onDelete} />\n            </span>\n          </Tooltip>\n        );\n      }\n\n      return (\n        <span key={tagKey} {...tagProps}>\n          <Tag label={label} onDismiss={onDelete} />\n        </span>\n      );\n    });\n\n  const handlePopupIndicatorClick = (event: React.MouseEvent): void => {\n    if (disabled) {\n      return;\n    }\n\n    event.stopPropagation();\n    toggleOpen();\n  };\n\n  const handleChange = (\n    event: React.SyntheticEvent,\n    value: AutocompleteValue<AutocompleteOption, boolean, boolean, boolean>,\n    reason: AutocompleteChangeReason,\n    details?: AutocompleteChangeDetails<AutocompleteOption>,\n  ): void => {\n    if (!onChange) {\n      return;\n    }\n    onChange(event, value, reason, details);\n  };\n\n  const handleInputChange = (\n    event: React.SyntheticEvent,\n    value: string,\n    reason: AutocompleteInputChangeReason,\n  ): void => {\n    setInputText(value);\n    if (!onInputChange) {\n      return;\n    }\n    onInputChange(event, value, reason);\n  };\n\n  /**\n   * Returns all options without filtering for search mode.\n   * Disables MUI's built-in client-side filtering when type is 'search'.\n   */\n  const disableClientFilter = (opts: AutocompleteOption[]): AutocompleteOption[] => opts;\n\n  /**\n   * Extracts the display label from an option.\n   * Supports both object options and freeSolo string values.\n   */\n  const getOptionLabel = (option: AutocompleteOption | string): string => {\n    return typeof option === 'string' ? option : option.label;\n  };\n\n  /**\n   * Provides a stable unique key for each option to optimize DOM reconciliation.\n   */\n  const getOptionKey = (option: AutocompleteOption | string): string => {\n    return typeof option === 'string' ? option : String(option.value);\n  };\n\n  /**\n   * Determines equality between an option and the current value.\n   * Handles both freeSolo string values and object options to prevent selection glitches.\n   */\n  const getIsOptionEqualToValue = (a: AutocompleteOption, b: AutocompleteOption): boolean => {\n    if (b === null || b === undefined) {\n      return false;\n    }\n    return typeof b === 'string' ? a.label === b || String(a.value) === b : a.value === b.value;\n  };\n\n  return (\n    <>\n      <StyledAutocomplete\n        ref={rootRef}\n        className={className}\n        clearIcon={<CancelIcon size=\"md\" />}\n        clearText={translate('Clear_selection')}\n        disableClearable={!isClearable}\n        disableCloseOnSelect={multiple}\n        disabled={disabled}\n        filterOptions={isSearch ? disableClientFilter : undefined}\n        forcePopupIcon={isCombobox}\n        freeSolo={isSearch}\n        fullWidth={fullWidth}\n        getOptionKey={getOptionKey}\n        getOptionLabel={getOptionLabel}\n        inputValue={inputText}\n        isOptionEqualToValue={getIsOptionEqualToValue}\n        limitTags={limitTags}\n        loading={loading}\n        loadingText={`${translate('Loading')}...`}\n        multiple={multiple}\n        noOptionsText={translate('No_options')}\n        onChange={handleChange}\n        onClose={() => toggleOpen(false)}\n        onInputChange={handleInputChange}\n        onOpen={() => toggleOpen(true)}\n        open={isOpen}\n        openText={translate('Open_popup')}\n        options={options}\n        popupIcon={isCombobox ? renderPopupIcon() : null}\n        renderInput={renderInputField}\n        renderOption={renderMenuOption}\n        renderTags={renderSelectedTags}\n        slotProps={{\n          popupIndicator: {\n            onClick: handlePopupIndicatorClick,\n          },\n        }}\n        value={normalizedValue}\n      />\n\n      {isShortcutHotkeyEnabled && (\n        <VisuallyHidden fdKey=\"autocomplete-shortcut-hotkey\" id={screenReaderOnlyId}>\n          {translate('Press_hotkey_to_focus_search', { hotkey: hotkeyText })}\n        </VisuallyHidden>\n      )}\n    </>\n  );\n};\n\nexport default Autocomplete;\n"],"names":["StyledAutocomplete","styled","shouldForwardProp","prop","fullWidth","width","StyledInputAdornment","MuiInputAdornment","theme","disabled","margin","color","palette","semantic","icon","StyledEndAdornmentContainer","Box","alignItems","display","gap","spacing","ShortcutBadgeWrapper","Autocomplete","ariaLabel","className","errorText","fdKey","helperText","label","loading","multiple","onChange","onInputChange","options","placeholder","required","shortcutHotkey","type","value","inputRef","useRef","inputText","setInputText","useState","isOpen","setIsOpen","translate","useTranslation","normalizedValue","Array","isArray","length","isSearch","isCombobox","isClearable","Boolean","isShortcutHotkeyEnabled","screenReaderOnlyId","useVisuallyHiddenId","handleShortcutHotkeyFocus","useCallback","current","focus","hotkeyText","useShortcutHotkey","enabled","onTrigger","rootRef","limitTags","useDynamicLimitTags","chipMax","horizontalPadding","reservedPx","useEffect","toggleOpen","open","undefined","prevOpen","_jsxs","_Fragment","children","_jsx","ref","clearIcon","CancelIcon","size","clearText","disableClearable","disableCloseOnSelect","filterOptions","opts","forcePopupIcon","freeSolo","getOptionKey","option","String","getOptionLabel","inputValue","isOptionEqualToValue","a","b","loadingText","noOptionsText","event","reason","details","onClose","onOpen","openText","popupIcon","position","ArrowUp01Icon","ArrowDown01Icon","renderInput","params","hasOptions","showPopup","ariaDescribedBy","inputProps","filter","join","TextField","slotProps","input","InputProps","endAdornment","CircularProgress","Badge","tone","startAdornment","SearchIcon","htmlInput","id","role","renderOption","optionProps","state","key","onClick","rest","_createElement","MenuItem","checked","selected","onCheckedChange","_checked","e","renderTags","getTagProps","map","tag","index","onDelete","tagProps","rawLabel","truncateWithEllipsis","includeEllipsisInLimit","isTruncated","endsWith","tagKey","Tooltip","title","Tag","onDismiss","popupIndicator","stopPropagation","VisuallyHidden","hotkey"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/molecules/Autocomplete/index.tsx"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\n\nimport MuiAutocomplete, {\n  type AutocompleteChangeDetails,\n  type AutocompleteChangeReason,\n  type AutocompleteInputChangeReason,\n  type AutocompleteProps as MuiAutocompleteProps,\n  type AutocompleteRenderGetTagProps,\n  type AutocompleteRenderInputParams,\n  type AutocompleteRenderOptionState,\n  type AutocompleteValue,\n} from '@mui/material/Autocomplete';\nimport Box from '@mui/material/Box';\nimport MuiInputAdornment from '@mui/material/InputAdornment';\nimport { styled } from '@mui/material/styles';\n\nimport Badge from '@fd/components/atoms/Badge';\nimport CircularProgress from '@fd/components/atoms/CircularProgress';\nimport MenuItem from '@fd/components/atoms/MenuItem';\nimport Tag from '@fd/components/atoms/Tag';\nimport TextField, { type TextFieldProps } from '@fd/components/atoms/TextField';\nimport VisuallyHidden, { useVisuallyHiddenId } from '@fd/components/atoms/VisuallyHidden';\nimport Tooltip from '@fd/components/molecules/Tooltip';\nimport ArrowDown01Icon from '@fd/icons/ArrowDown01';\nimport ArrowUp01Icon from '@fd/icons/ArrowUp01';\nimport CancelIcon from '@fd/icons/Cancel';\nimport SearchIcon from '@fd/icons/Search';\nimport { useTranslation } from '@fd/providers/TranslationProvider';\nimport { truncateWithEllipsis } from '@fd/utilities/stringUtilities';\n\nimport { useDynamicLimitTags } from './hooks/useDynamicLimitTags';\nimport { useShortcutHotkey } from './hooks/useShortcutHotkey';\n\n// Bind flags to MuiAutocomplete\ntype MuiCustomAutocompleteProps<\n  M extends boolean = boolean, // Multiple\n  DC extends boolean = boolean, // DisableClearable\n  FS extends boolean = boolean, // FreeSolo\n> = MuiAutocompleteProps<AutocompleteOption, M, DC, FS>;\n\n/**\n * Represents an option in the Autocomplete dropdown.\n */\nexport interface AutocompleteOption {\n  /** The label to display in the dropdown option. */\n  label: string;\n  /** The value to store in the dropdown option. */\n  value: number | string;\n}\n\n/**\n * Props for the Autocomplete component.\n * Supports both single and multiple selection modes with optional search functionality.\n */\nexport interface AutocompleteProps extends Omit<\n  TextFieldProps,\n  'endAdornment' | 'multiline' | 'onChange' | 'options' | 'startAdornment'\n> {\n  /** Aria-label for the input when no label is provided. */\n  ariaLabel?: string;\n  /** Shows a loading indicator inside the input (e.g., while fetching). */\n  loading?: boolean;\n  /** Enables selection of multiple options and shows checkboxes and tags for selected values. */\n  multiple?: MuiCustomAutocompleteProps['multiple'];\n  /** Called when the selected value(s) change. */\n  onChange: MuiCustomAutocompleteProps['onChange'];\n  /** Called when the input text changes (typing or programmatic updates). */\n  onInputChange?: MuiCustomAutocompleteProps['onInputChange'];\n  /** Options to display in the dropdown list. */\n  options: AutocompleteOption[];\n  /** Shows the keyboard shortcut badge (Cmd/Ctrl + K) and enables focusing via the shortcut when in search mode. */\n  shortcutHotkey?: boolean;\n  /** Visual behavior: 'search' shows a leading search icon; 'combobox' shows a popup button. */\n  type?: 'combobox' | 'search';\n  /** Controlled value (single option, array for multiple, or null). */\n  value: MuiCustomAutocompleteProps['value'];\n}\n\n// Bind flags to MuiAutocomplete, see MuiCustomAutocompleteProps for more details\nconst MuiCustomAutocomplete = MuiAutocomplete<AutocompleteOption, boolean, boolean, boolean>;\nconst StyledAutocomplete = styled(MuiCustomAutocomplete, {\n  shouldForwardProp: (prop) => prop !== 'fullWidth',\n})<{ fullWidth?: boolean }>(({ fullWidth = false }) => ({\n  width: fullWidth ? '100%' : 'min(364px, 100%)',\n}));\n\nconst StyledInputAdornment = styled(MuiInputAdornment, {\n  shouldForwardProp: (prop) => prop !== 'disabled',\n})<{ disabled?: boolean }>(({ theme, disabled = false }) => ({\n  '&.MuiInputAdornment-positionEnd': {\n    margin: 0,\n  },\n\n  '& svg': {\n    color: disabled\n      ? theme.palette.semantic.icon['icon-disabled']\n      : theme.palette.semantic.icon['icon-strong'],\n  },\n}));\n\nconst StyledEndAdornmentContainer = styled(Box)(({ theme }) => ({\n  alignItems: 'center',\n  display: 'flex',\n  gap: theme.spacing(1),\n}));\n\nconst ShortcutBadgeWrapper = styled('span')(() => ({\n  display: 'inline-flex',\n\n  // hide when input root is focused\n  '.Mui-focused &': {\n    display: 'none',\n  },\n}));\n\n/**\n * A customizable Autocomplete component supporting search and combobox modes.\n * Supports single and multiple selection with dynamic tag rendering and optional loading states.\n *\n * @param props - The component props\n * @returns The rendered Autocomplete component\n */\nexport const Autocomplete = ({\n  ariaLabel,\n  className,\n  disabled = false,\n  errorText,\n  fdKey,\n  fullWidth = false,\n  helperText,\n  label,\n  loading = false,\n  multiple = false,\n  onChange,\n  onInputChange,\n  options = [],\n  placeholder,\n  required = false,\n  shortcutHotkey = false,\n  type = 'search',\n  value,\n}: AutocompleteProps): JSX.Element => {\n  const inputRef = useRef<HTMLInputElement>(null);\n  const [inputText, setInputText] = useState<string>('');\n  const [isOpen, setIsOpen] = useState<boolean>(false);\n\n  const { translate } = useTranslation();\n\n  /**\n   * Normalizes the value prop for MUI Autocomplete.\n   * Handles both single and multiple selection modes, ensuring the value\n   * format matches the mode (array for multiple, single value/null for single).\n   *\n   * @returns Normalized value compatible with MUI Autocomplete\n   */\n  const getValue = (): AutocompleteProps['value'] => {\n    // Multiple value selection\n    if (multiple) {\n      if (Array.isArray(value)) return value;\n      if (value === null || value === undefined) return [];\n      return [value as AutocompleteOption];\n    }\n\n    // Single value selection\n    if (Array.isArray(value)) return value.length > 0 ? value[0] : null;\n    return value ?? null;\n  };\n\n  const normalizedValue = getValue();\n  const isSearch = type === 'search';\n  const isCombobox = type === 'combobox';\n  const isClearable = (Boolean(inputText) || Boolean(normalizedValue)) && !disabled;\n  const isShortcutHotkeyEnabled = isSearch && shortcutHotkey && !normalizedValue && !disabled;\n  const screenReaderOnlyId = useVisuallyHiddenId();\n\n  const handleShortcutHotkeyFocus = useCallback(() => {\n    inputRef.current?.focus();\n  }, []);\n\n  // Hotkey handling and display for Cmd/Ctrl + K\n  const { hotkeyText } = useShortcutHotkey({\n    enabled: isShortcutHotkeyEnabled,\n    onTrigger: handleShortcutHotkeyFocus,\n  });\n\n  // Dynamic limit tags calculation\n  const { rootRef, limitTags } = useDynamicLimitTags({\n    chipMax: 130,\n    gap: 4,\n    horizontalPadding: 32,\n    reservedPx: isSearch ? 120 : 90,\n  });\n\n  /**\n   * Close the dropdown (if open) when:\n   * - the component is dynamically disabled.\n   * - if search mode and no options are provided.\n   */\n  useEffect(() => {\n    if (!isOpen) return;\n    if (disabled) setIsOpen(false);\n    if (isSearch && options.length === 0) setIsOpen(false);\n  }, [isOpen, disabled, isSearch, options.length]);\n\n  /**\n   * Toggles or sets the dropdown open state.\n   * Does nothing when:\n   * - the component is disabled.\n   * - if search mode and no options are provided.\n   *\n   * @param open - Optional boolean to explicitly set open state; if undefined, toggles current state\n   */\n  const toggleOpen = (open?: boolean): void => {\n    if (disabled) return;\n    if (isSearch && options.length === 0) return;\n\n    if (open !== undefined) {\n      setIsOpen(open);\n      return;\n    }\n\n    setIsOpen((prevOpen) => !prevOpen);\n  };\n\n  const renderSearchIcon = (): JSX.Element => {\n    return (\n      <StyledInputAdornment disabled={disabled} position=\"start\">\n        <SearchIcon aria-hidden=\"true\" data-fd=\"search-icon\" />\n      </StyledInputAdornment>\n    );\n  };\n\n  const renderPopupIcon = (): JSX.Element => {\n    return (\n      <StyledInputAdornment disabled={disabled} position=\"end\">\n        {isOpen ? <ArrowUp01Icon /> : <ArrowDown01Icon />}\n      </StyledInputAdornment>\n    );\n  };\n\n  const renderShortcutHotkey = (): JSX.Element => {\n    return (\n      <ShortcutBadgeWrapper>\n        <Badge label={hotkeyText} size=\"small\" tone=\"neutral\" />\n      </ShortcutBadgeWrapper>\n    );\n  };\n\n  const renderEndAdornment = (): React.ReactNode => {\n    return (\n      <StyledEndAdornmentContainer>\n        {loading ? <CircularProgress size=\"small\" /> : null}\n        {isShortcutHotkeyEnabled ? renderShortcutHotkey() : null}\n      </StyledEndAdornmentContainer>\n    );\n  };\n\n  const renderInputField = (params: AutocompleteRenderInputParams): JSX.Element => {\n    const hasOptions = Array.isArray(options) && options.length > 0;\n    const showPopup = isCombobox || (isSearch && hasOptions);\n    const ariaDescribedBy =\n      [params.inputProps['aria-describedby'], isShortcutHotkeyEnabled ? screenReaderOnlyId : undefined]\n        .filter(Boolean)\n        .join(' ') || undefined;\n\n    return (\n      <TextField\n        disabled={disabled}\n        errorText={errorText}\n        fdKey={fdKey}\n        fullWidth={fullWidth}\n        helperText={helperText}\n        inputRef={inputRef}\n        label={label}\n        placeholder={placeholder}\n        required={required}\n        slotProps={{\n          input: {\n            ...params.InputProps,\n            endAdornment: (\n              <>\n                {renderEndAdornment()}\n                {params.InputProps.endAdornment}\n              </>\n            ),\n            startAdornment: (\n              <>\n                {isSearch ? renderSearchIcon() : null}\n                {params.InputProps.startAdornment}\n              </>\n            ),\n          },\n          htmlInput: {\n            ...params.inputProps,\n            id: fdKey,\n            'aria-label': isSearch && !label ? ariaLabel : undefined,\n            'aria-describedby': ariaDescribedBy,\n            // If the popup is not shown, hide the autocomplete listbox functionality from screen readers\n            ...(!showPopup && {\n              role: 'searchbox',\n              'aria-autocomplete': 'none',\n              'aria-invalid': !errorText && !required ? undefined : params.inputProps['aria-invalid'],\n            }),\n          },\n        }}\n      />\n    );\n  };\n\n  const renderMenuOption = (\n    optionProps: React.HTMLAttributes<HTMLLIElement> & { key: React.Key },\n    option: AutocompleteOption,\n    state: AutocompleteRenderOptionState,\n  ): JSX.Element => {\n    const { key, onClick, ...rest } = optionProps;\n\n    if (multiple) {\n      return (\n        <MenuItem\n          {...rest}\n          key={key}\n          checked={state.selected}\n          label={option.label}\n          onCheckedChange={(_checked, e) => {\n            onClick?.(e as React.MouseEvent<HTMLLIElement, MouseEvent>);\n          }}\n          type=\"checkbox\"\n        />\n      );\n    }\n\n    return (\n      <MenuItem\n        {...rest}\n        key={key}\n        label={option.label}\n        onClick={onClick}\n        selected={state.selected}\n        type=\"text\"\n      />\n    );\n  };\n\n  const renderSelectedTags = (\n    selected: AutocompleteOption[],\n    getTagProps: AutocompleteRenderGetTagProps,\n  ): React.ReactNode =>\n    selected.map((tag, index) => {\n      const { key, onDelete, ...tagProps } = getTagProps({ index });\n      const rawLabel = typeof tag === 'string' ? tag : tag.label;\n      const label = truncateWithEllipsis(rawLabel, 13, { includeEllipsisInLimit: true });\n      const isTruncated = label.endsWith('...');\n      const tagKey = key ?? `tag-${typeof tag === 'string' ? tag : tag.value}`;\n\n      if (isTruncated) {\n        return (\n          <Tooltip key={tagKey} title={rawLabel}>\n            <span {...tagProps}>\n              <Tag label={label} onDismiss={onDelete} />\n            </span>\n          </Tooltip>\n        );\n      }\n\n      return (\n        <span key={tagKey} {...tagProps}>\n          <Tag label={label} onDismiss={onDelete} />\n        </span>\n      );\n    });\n\n  const handlePopupIndicatorClick = (event: React.MouseEvent): void => {\n    if (disabled) {\n      return;\n    }\n\n    event.stopPropagation();\n    toggleOpen();\n  };\n\n  const handleChange = (\n    event: React.SyntheticEvent,\n    value: AutocompleteValue<AutocompleteOption, boolean, boolean, boolean>,\n    reason: AutocompleteChangeReason,\n    details?: AutocompleteChangeDetails<AutocompleteOption>,\n  ): void => {\n    if (!onChange) {\n      return;\n    }\n    onChange(event, value, reason, details);\n  };\n\n  const handleInputChange = (\n    event: React.SyntheticEvent,\n    value: string,\n    reason: AutocompleteInputChangeReason,\n  ): void => {\n    setInputText(value);\n    if (!onInputChange) {\n      return;\n    }\n    onInputChange(event, value, reason);\n  };\n\n  /**\n   * Returns all options without filtering for search mode.\n   * Disables MUI's built-in client-side filtering when type is 'search'.\n   */\n  const disableClientFilter = (opts: AutocompleteOption[]): AutocompleteOption[] => opts;\n\n  /**\n   * Extracts the display label from an option.\n   * Supports both object options and freeSolo string values.\n   */\n  const getOptionLabel = (option: AutocompleteOption | string): string => {\n    return typeof option === 'string' ? option : option.label;\n  };\n\n  /**\n   * Provides a stable unique key for each option to optimize DOM reconciliation.\n   */\n  const getOptionKey = (option: AutocompleteOption | string): string => {\n    return typeof option === 'string' ? option : String(option.value);\n  };\n\n  /**\n   * Determines equality between an option and the current value.\n   * Handles both freeSolo string values and object options to prevent selection glitches.\n   */\n  const getIsOptionEqualToValue = (a: AutocompleteOption, b: AutocompleteOption): boolean => {\n    if (b === null || b === undefined) {\n      return false;\n    }\n    return typeof b === 'string' ? a.label === b || String(a.value) === b : a.value === b.value;\n  };\n\n  return (\n    <>\n      <StyledAutocomplete\n        ref={rootRef}\n        className={className}\n        clearIcon={<CancelIcon size=\"md\" />}\n        clearText={translate('Clear_selection')}\n        disableClearable={!isClearable}\n        disableCloseOnSelect={multiple}\n        disabled={disabled}\n        filterOptions={isSearch ? disableClientFilter : undefined}\n        forcePopupIcon={isCombobox}\n        freeSolo={isSearch}\n        fullWidth={fullWidth}\n        getOptionKey={getOptionKey}\n        getOptionLabel={getOptionLabel}\n        inputValue={inputText}\n        isOptionEqualToValue={getIsOptionEqualToValue}\n        limitTags={limitTags}\n        loading={loading}\n        loadingText={`${translate('Loading')}...`}\n        multiple={multiple}\n        noOptionsText={translate('No_options')}\n        onChange={handleChange}\n        onClose={() => toggleOpen(false)}\n        onInputChange={handleInputChange}\n        onOpen={() => toggleOpen(true)}\n        open={isOpen}\n        openText={translate('Open_popup')}\n        options={options}\n        popupIcon={isCombobox ? renderPopupIcon() : null}\n        renderInput={renderInputField}\n        renderOption={renderMenuOption}\n        renderTags={renderSelectedTags}\n        slotProps={{\n          popupIndicator: {\n            onClick: handlePopupIndicatorClick,\n          },\n        }}\n        value={normalizedValue}\n      />\n\n      {isShortcutHotkeyEnabled && (\n        <VisuallyHidden fdKey=\"autocomplete-shortcut-hotkey\" id={screenReaderOnlyId}>\n          {translate('Press_hotkey_to_focus_search', { hotkey: hotkeyText })}\n        </VisuallyHidden>\n      )}\n    </>\n  );\n};\n\nexport default Autocomplete;\n"],"names":["StyledAutocomplete","styled","shouldForwardProp","prop","fullWidth","width","StyledInputAdornment","MuiInputAdornment","theme","disabled","margin","color","palette","semantic","icon","StyledEndAdornmentContainer","Box","alignItems","display","gap","spacing","ShortcutBadgeWrapper","Autocomplete","ariaLabel","className","errorText","fdKey","helperText","label","loading","multiple","onChange","onInputChange","options","placeholder","required","shortcutHotkey","type","value","inputRef","useRef","inputText","setInputText","useState","isOpen","setIsOpen","translate","useTranslation","normalizedValue","Array","isArray","length","isSearch","isCombobox","isClearable","Boolean","isShortcutHotkeyEnabled","screenReaderOnlyId","useVisuallyHiddenId","handleShortcutHotkeyFocus","useCallback","current","focus","hotkeyText","useShortcutHotkey","enabled","onTrigger","rootRef","limitTags","useDynamicLimitTags","chipMax","horizontalPadding","reservedPx","useEffect","toggleOpen","open","undefined","prevOpen","_jsxs","_Fragment","children","_jsx","ref","clearIcon","CancelIcon","size","clearText","disableClearable","disableCloseOnSelect","filterOptions","opts","forcePopupIcon","freeSolo","getOptionKey","option","String","getOptionLabel","inputValue","isOptionEqualToValue","a","b","loadingText","noOptionsText","event","reason","details","onClose","onOpen","openText","popupIcon","position","ArrowUp01Icon","ArrowDown01Icon","renderInput","params","hasOptions","showPopup","ariaDescribedBy","inputProps","filter","join","TextField","slotProps","input","InputProps","endAdornment","CircularProgress","Badge","tone","startAdornment","SearchIcon","htmlInput","id","role","renderOption","optionProps","state","key","onClick","rest","_createElement","MenuItem","checked","selected","onCheckedChange","_checked","e","renderTags","getTagProps","map","tag","index","onDelete","tagProps","rawLabel","truncateWithEllipsis","includeEllipsisInLimit","isTruncated","endsWith","tagKey","Tooltip","title","Tag","onDismiss","popupIndicator","stopPropagation","VisuallyHidden","hotkey"],"mappings":"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"}

package/dist/components/molecules/ButtonGroup/index.cjs.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),r=require("react"),t=require("@mui/material/styles"),l=require("../../atoms/Button/index.cjs.js");const i=t.styled("div",{shouldForwardProp:e=>!["align","gap","layout","order"].includes(e)})((({theme:e,align:r="right",gap:t=2,layout:l="horizontal",order:i="default"})=>{const n="vertical"===l,a="reverse"===i;return{display:"flex",flexDirection:n?a?"column-reverse":"column":a?"row-reverse":"row",justifyContent:n||"left"===r?a?"flex-end":"flex-start":"center"===r?"center":a?"flex-start":"flex-end",alignItems:n?"stretch":"center",gap:e.spacing(t),width:"100%",...n?{"&& > *":{width:"100%",maxWidth:"100%"}}:{}}}));module.exports=({children:t,align:n="right",layout:a="horizontal",size:s="medium",order:o="default",fullWidthChildren:d,gap:u,fdKey:c,className:h,...m})=>{const f=u??("small"===s?1:"large"===s?3:2),p="vertical"===a||!!d,g=(e,t)=>{if(!r.isValidElement(e))return e;if(e.type===r.Fragment){const t=e,l=r.Children.map(t.props.children,g)?.reverse();return r.cloneElement(t,{children:l})}if(e.type!==l.Button)return e;const i=e.props,n={};return void 0===i.size&&(n.size=s),p&&void 0===i.fullWidth&&(n.fullWidth=!0),n.style={...i.style,order:t},Object.keys(n).length>0?r.cloneElement(e,n):e},y=r.Children.map(t,g);return e.jsx(i,{...m,align:n,className:h,"data-fd":c,gap:f,layout:a,order:o,role:m.role??"group",children:y})};
+"use strict";var e=require("react/jsx-runtime"),r=require("react"),t=require("@mui/material/styles"),l=require("../../atoms/Button/index.cjs.js");const i=t.styled("div",{shouldForwardProp:e=>!["align","gap","layout","order"].includes(e)})(({theme:e,align:r="right",gap:t=2,layout:l="horizontal",order:i="default"})=>{const n="vertical"===l,a="reverse"===i;return{display:"flex",flexDirection:n?a?"column-reverse":"column":a?"row-reverse":"row",justifyContent:n||"left"===r?a?"flex-end":"flex-start":"center"===r?"center":a?"flex-start":"flex-end",alignItems:n?"stretch":"center",gap:e.spacing(t),width:"100%",...n?{"&& > *":{width:"100%",maxWidth:"100%"}}:{}}});module.exports=({children:t,align:n="right",layout:a="horizontal",size:s="medium",order:o="default",fullWidthChildren:d,gap:u,fdKey:c,className:h,...m})=>{const f=u??("small"===s?1:"large"===s?3:2),p="vertical"===a||!!d,g=(e,t)=>{if(!r.isValidElement(e))return e;if(e.type===r.Fragment){const t=e,l=r.Children.map(t.props.children,g)?.reverse();return r.cloneElement(t,{children:l})}if(e.type!==l.Button)return e;const i=e.props,n={};return void 0===i.size&&(n.size=s),p&&void 0===i.fullWidth&&(n.fullWidth=!0),n.style={...i.style,order:t},Object.keys(n).length>0?r.cloneElement(e,n):e},y=r.Children.map(t,g);return e.jsx(i,{...m,align:n,className:h,"data-fd":c,gap:f,layout:a,order:o,role:m.role??"group",children:y})};
 //# sourceMappingURL=index.cjs.js.map

package/dist/components/molecules/ButtonGroup/index.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":["../../../../src/components/molecules/ButtonGroup/index.tsx"],"sourcesContent":["import React from 'react';\n\nimport { styled } from '@mui/material/styles';\n\nimport Button from '../../atoms/Button';\n\nexport interface ButtonGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n  align?: 'center' | 'left' | 'right';\n  layout?: 'horizontal' | 'vertical';\n  size?: 'large' | 'medium' | 'small';\n  order?: 'default' | 'reverse';\n  fullWidthChildren?: boolean;\n  gap?: number;\n  fdKey?: string;\n}\n\ntype StyledProps = Pick<ButtonGroupProps, 'align' | 'gap' | 'layout' | 'order'>;\n\nconst StyledContainer = styled('div', {\n  shouldForwardProp: (prop) => !['align', 'gap', 'layout', 'order'].includes(prop as string),\n})<StyledProps>(({ theme, align = 'right', gap = 2, layout = 'horizontal', order = 'default' }) => {\n  const isVertical = layout === 'vertical';\n  const isReverse = order === 'reverse';\n\n  const flexDirection = isVertical\n    ? isReverse\n      ? 'column-reverse'\n      : 'column'\n    : isReverse\n      ? 'row-reverse'\n      : 'row';\n\n  const justifyContent = isVertical\n    ? // keep items visually at the top whether reversed or not\n      isReverse\n      ? 'flex-end'\n      : 'flex-start'\n    : align === 'left'\n      ? isReverse\n        ? 'flex-end'\n        : 'flex-start'\n      : align === 'center'\n        ? 'center'\n        : // align === 'right'\n          isReverse\n          ? 'flex-start'\n          : 'flex-end';\n\n  return {\n    display: 'flex',\n    flexDirection,\n    justifyContent,\n    alignItems: isVertical ? 'stretch' : 'center',\n    gap: theme.spacing(gap),\n    width: '100%',\n    ...(isVertical\n      ? {\n          // Ensure full-width children in vertical layout as a fallback\n          // Increase specificity so it overrides any child width styles\n          '&& > *': {\n            width: '100%',\n            maxWidth: '100%',\n          },\n        }\n      : {}),\n  };\n});\n\nconst ButtonGroup = ({\n  children,\n  align = 'right',\n  layout = 'horizontal',\n  size = 'medium',\n  order = 'default',\n  fullWidthChildren,\n  gap,\n  fdKey,\n  className,\n  ...rest\n}: ButtonGroupProps): JSX.Element => {\n  const resolvedGap = gap ?? (size === 'small' ? 1 : size === 'large' ? 3 : 2);\n  const resolvedFullWidthChildren = layout === 'vertical' ? true : !!fullWidthChildren;\n\n  interface ButtonLikeProps {\n    size?: 'large' | 'medium' | 'small';\n    fullWidth?: boolean;\n    style?: React.CSSProperties;\n  }\n\n  const enhanceChild = (node: React.ReactNode, index: number): React.ReactNode => {\n    if (!React.isValidElement(node)) return node;\n\n    if (node.type === React.Fragment) {\n      const fragment = node as React.ReactElement<{ children?: React.ReactNode }>;\n      const mappedChildren = React.Children.map(fragment.props.children, enhanceChild)?.reverse();\n      return React.cloneElement(fragment, { children: mappedChildren });\n    }\n\n    if (node.type !== Button) return node;\n\n    const childProps = node.props as ButtonLikeProps;\n    const newProps: Partial<ButtonLikeProps> = {};\n\n    if (childProps.size === undefined) newProps.size = size;\n    if (resolvedFullWidthChildren && childProps.fullWidth === undefined) newProps.fullWidth = true;\n\n    newProps.style = {\n      ...childProps.style,\n      order: index,\n    };\n\n    return Object.keys(newProps).length > 0 ? React.cloneElement(node, newProps) : node;\n  };\n\n  const enhancedChildren = React.Children.map(children, enhanceChild);\n\n  return (\n    <StyledContainer\n      {...rest}\n      align={align}\n      className={className}\n      data-fd={fdKey}\n      gap={resolvedGap}\n      layout={layout}\n      order={order}\n      role={rest.role ?? 'group'}\n    >\n      {enhancedChildren}\n    </StyledContainer>\n  );\n};\n\nexport default ButtonGroup;\n"],"names":["StyledContainer","styled","shouldForwardProp","prop","includes","theme","align","gap","layout","order","isVertical","isReverse","display","flexDirection","justifyContent","alignItems","spacing","width","maxWidth","children","size","fullWidthChildren","fdKey","className","rest","resolvedGap","resolvedFullWidthChildren","enhanceChild","node","index","React","isValidElement","type","Fragment","fragment","mappedChildren","Children","map","props","reverse","cloneElement","Button","childProps","newProps","undefined","fullWidth","style","Object","keys","length","enhancedChildren","_jsx","role"],"mappings":"kJAmBA,MAAMA,EAAkBC,EAAAA,OAAO,MAAO,CACpCC,kBAAoBC,IAAU,CAAC,QAAS,MAAO,SAAU,SAASC,SAASD,IADrDF,EAER,EAAGI,QAAOC,QAAQ,QAASC,MAAM,EAAGC,SAAS,aAAcC,QAAQ,cACjF,MAAMC,EAAwB,aAAXF,EACbG,EAAsB,YAAVF,EA0BlB,MAAO,CACLG,QAAS,OACTC,cA1BoBH,EAClBC,EACE,iBACA,SACFA,EACE,cACA,MAqBJG,eAnBqBJ,GAKT,SAAVJ,EAHAK,EACE,WACA,aAKU,WAAVL,EACE,SAEAK,EACE,aACA,WAMRI,WAAYL,EAAa,UAAY,SACrCH,IAAKF,EAAMW,QAAQT,GACnBU,MAAO,UACHP,EACA,CAGE,SAAU,CACRO,MAAO,OACPC,SAAU,SAGd,sBAIY,EAClBC,WACAb,QAAQ,QACRE,SAAS,aACTY,OAAO,SACPX,QAAQ,UACRY,oBACAd,MACAe,QACAC,eACGC,MAEH,MAAMC,EAAclB,IAAiB,UAATa,EAAmB,EAAa,UAATA,EAAmB,EAAI,GACpEM,EAAuC,aAAXlB,KAAiCa,EAQ7DM,EAAe,CAACC,EAAuBC,KAC3C,IAAKC,EAAMC,eAAeH,GAAO,OAAOA,EAExC,GAAIA,EAAKI,OAASF,EAAMG,SAAU,CAChC,MAAMC,EAAWN,EACXO,EAAiBL,EAAMM,SAASC,IAAIH,EAASI,MAAMnB,SAAUQ,IAAeY,UAClF,OAAOT,EAAMU,aAAaN,EAAU,CAAEf,SAAUgB,GAClD,CAEA,GAAIP,EAAKI,OAASS,EAAAA,OAAQ,OAAOb,EAEjC,MAAMc,EAAad,EAAKU,MAClBK,EAAqC,CAAA,EAU3C,YARwBC,IAApBF,EAAWtB,OAAoBuB,EAASvB,KAAOA,GAC/CM,QAAsDkB,IAAzBF,EAAWG,YAAyBF,EAASE,WAAY,GAE1FF,EAASG,MAAQ,IACZJ,EAAWI,MACdrC,MAAOoB,GAGFkB,OAAOC,KAAKL,GAAUM,OAAS,EAAInB,EAAMU,aAAaZ,EAAMe,GAAYf,GAG3EsB,EAAmBpB,EAAMM,SAASC,IAAIlB,EAAUQ,GAEtD,OACEwB,MAACnD,EAAe,IACVwB,EACJlB,MAAOA,EACPiB,UAAWA,YACFD,EACTf,IAAKkB,EACLjB,OAAQA,EACRC,MAAOA,EACP2C,KAAM5B,EAAK4B,MAAQ,iBAElBF"}
+{"version":3,"file":"index.cjs.js","sources":["../../../../src/components/molecules/ButtonGroup/index.tsx"],"sourcesContent":["import React from 'react';\n\nimport { styled } from '@mui/material/styles';\n\nimport Button from '../../atoms/Button';\n\nexport interface ButtonGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n  align?: 'center' | 'left' | 'right';\n  layout?: 'horizontal' | 'vertical';\n  size?: 'large' | 'medium' | 'small';\n  order?: 'default' | 'reverse';\n  fullWidthChildren?: boolean;\n  gap?: number;\n  fdKey?: string;\n}\n\ntype StyledProps = Pick<ButtonGroupProps, 'align' | 'gap' | 'layout' | 'order'>;\n\nconst StyledContainer = styled('div', {\n  shouldForwardProp: (prop) => !['align', 'gap', 'layout', 'order'].includes(prop as string),\n})<StyledProps>(({ theme, align = 'right', gap = 2, layout = 'horizontal', order = 'default' }) => {\n  const isVertical = layout === 'vertical';\n  const isReverse = order === 'reverse';\n\n  const flexDirection = isVertical\n    ? isReverse\n      ? 'column-reverse'\n      : 'column'\n    : isReverse\n      ? 'row-reverse'\n      : 'row';\n\n  const justifyContent = isVertical\n    ? // keep items visually at the top whether reversed or not\n      isReverse\n      ? 'flex-end'\n      : 'flex-start'\n    : align === 'left'\n      ? isReverse\n        ? 'flex-end'\n        : 'flex-start'\n      : align === 'center'\n        ? 'center'\n        : // align === 'right'\n          isReverse\n          ? 'flex-start'\n          : 'flex-end';\n\n  return {\n    display: 'flex',\n    flexDirection,\n    justifyContent,\n    alignItems: isVertical ? 'stretch' : 'center',\n    gap: theme.spacing(gap),\n    width: '100%',\n    ...(isVertical\n      ? {\n          // Ensure full-width children in vertical layout as a fallback\n          // Increase specificity so it overrides any child width styles\n          '&& > *': {\n            width: '100%',\n            maxWidth: '100%',\n          },\n        }\n      : {}),\n  };\n});\n\nconst ButtonGroup = ({\n  children,\n  align = 'right',\n  layout = 'horizontal',\n  size = 'medium',\n  order = 'default',\n  fullWidthChildren,\n  gap,\n  fdKey,\n  className,\n  ...rest\n}: ButtonGroupProps): JSX.Element => {\n  const resolvedGap = gap ?? (size === 'small' ? 1 : size === 'large' ? 3 : 2);\n  const resolvedFullWidthChildren = layout === 'vertical' ? true : !!fullWidthChildren;\n\n  interface ButtonLikeProps {\n    size?: 'large' | 'medium' | 'small';\n    fullWidth?: boolean;\n    style?: React.CSSProperties;\n  }\n\n  const enhanceChild = (node: React.ReactNode, index: number): React.ReactNode => {\n    if (!React.isValidElement(node)) return node;\n\n    if (node.type === React.Fragment) {\n      const fragment = node as React.ReactElement<{ children?: React.ReactNode }>;\n      const mappedChildren = React.Children.map(fragment.props.children, enhanceChild)?.reverse();\n      return React.cloneElement(fragment, { children: mappedChildren });\n    }\n\n    if (node.type !== Button) return node;\n\n    const childProps = node.props as ButtonLikeProps;\n    const newProps: Partial<ButtonLikeProps> = {};\n\n    if (childProps.size === undefined) newProps.size = size;\n    if (resolvedFullWidthChildren && childProps.fullWidth === undefined) newProps.fullWidth = true;\n\n    newProps.style = {\n      ...childProps.style,\n      order: index,\n    };\n\n    return Object.keys(newProps).length > 0 ? React.cloneElement(node, newProps) : node;\n  };\n\n  const enhancedChildren = React.Children.map(children, enhanceChild);\n\n  return (\n    <StyledContainer\n      {...rest}\n      align={align}\n      className={className}\n      data-fd={fdKey}\n      gap={resolvedGap}\n      layout={layout}\n      order={order}\n      role={rest.role ?? 'group'}\n    >\n      {enhancedChildren}\n    </StyledContainer>\n  );\n};\n\nexport default ButtonGroup;\n"],"names":["StyledContainer","styled","shouldForwardProp","prop","includes","theme","align","gap","layout","order","isVertical","isReverse","display","flexDirection","justifyContent","alignItems","spacing","width","maxWidth","children","size","fullWidthChildren","fdKey","className","rest","resolvedGap","resolvedFullWidthChildren","enhanceChild","node","index","React","isValidElement","type","Fragment","fragment","mappedChildren","Children","map","props","reverse","cloneElement","Button","childProps","newProps","undefined","fullWidth","style","Object","keys","length","enhancedChildren","_jsx","role"],"mappings":"kJAmBA,MAAMA,EAAkBC,EAAAA,OAAO,MAAO,CACpCC,kBAAoBC,IAAU,CAAC,QAAS,MAAO,SAAU,SAASC,SAASD,IADrDF,CAER,EAAGI,QAAOC,QAAQ,QAASC,MAAM,EAAGC,SAAS,aAAcC,QAAQ,cACjF,MAAMC,EAAwB,aAAXF,EACbG,EAAsB,YAAVF,EA0BlB,MAAO,CACLG,QAAS,OACTC,cA1BoBH,EAClBC,EACE,iBACA,SACFA,EACE,cACA,MAqBJG,eAnBqBJ,GAKT,SAAVJ,EAHAK,EACE,WACA,aAKU,WAAVL,EACE,SAEAK,EACE,aACA,WAMRI,WAAYL,EAAa,UAAY,SACrCH,IAAKF,EAAMW,QAAQT,GACnBU,MAAO,UACHP,EACA,CAGE,SAAU,CACRO,MAAO,OACPC,SAAU,SAGd,qBAIY,EAClBC,WACAb,QAAQ,QACRE,SAAS,aACTY,OAAO,SACPX,QAAQ,UACRY,oBACAd,MACAe,QACAC,eACGC,MAEH,MAAMC,EAAclB,IAAiB,UAATa,EAAmB,EAAa,UAATA,EAAmB,EAAI,GACpEM,EAAuC,aAAXlB,KAAiCa,EAQ7DM,EAAe,CAACC,EAAuBC,KAC3C,IAAKC,EAAMC,eAAeH,GAAO,OAAOA,EAExC,GAAIA,EAAKI,OAASF,EAAMG,SAAU,CAChC,MAAMC,EAAWN,EACXO,EAAiBL,EAAMM,SAASC,IAAIH,EAASI,MAAMnB,SAAUQ,IAAeY,UAClF,OAAOT,EAAMU,aAAaN,EAAU,CAAEf,SAAUgB,GAClD,CAEA,GAAIP,EAAKI,OAASS,EAAAA,OAAQ,OAAOb,EAEjC,MAAMc,EAAad,EAAKU,MAClBK,EAAqC,CAAA,EAU3C,YARwBC,IAApBF,EAAWtB,OAAoBuB,EAASvB,KAAOA,GAC/CM,QAAsDkB,IAAzBF,EAAWG,YAAyBF,EAASE,WAAY,GAE1FF,EAASG,MAAQ,IACZJ,EAAWI,MACdrC,MAAOoB,GAGFkB,OAAOC,KAAKL,GAAUM,OAAS,EAAInB,EAAMU,aAAaZ,EAAMe,GAAYf,GAG3EsB,EAAmBpB,EAAMM,SAASC,IAAIlB,EAAUQ,GAEtD,OACEwB,MAACnD,EAAe,IACVwB,EACJlB,MAAOA,EACPiB,UAAWA,YACFD,EACTf,IAAKkB,EACLjB,OAAQA,EACRC,MAAOA,EACP2C,KAAM5B,EAAK4B,MAAQ,iBAElBF"}

package/dist/components/molecules/ButtonGroup/index.js

@@ -1,2 +1,2 @@
-import{jsx as e}from"react/jsx-runtime";import r from"react";import{styled as t}from"@mui/material/styles";import{Button as l}from"../../atoms/Button/index.js";const i=t("div",{shouldForwardProp:e=>!["align","gap","layout","order"].includes(e)})((({theme:e,align:r="right",gap:t=2,layout:l="horizontal",order:i="default"})=>{const n="vertical"===l,o="reverse"===i;return{display:"flex",flexDirection:n?o?"column-reverse":"column":o?"row-reverse":"row",justifyContent:n||"left"===r?o?"flex-end":"flex-start":"center"===r?"center":o?"flex-start":"flex-end",alignItems:n?"stretch":"center",gap:e.spacing(t),width:"100%",...n?{"&& > *":{width:"100%",maxWidth:"100%"}}:{}}})),n=({children:t,align:n="right",layout:o="horizontal",size:a="medium",order:s="default",fullWidthChildren:d,gap:m,fdKey:c,className:u,...f})=>{const p=m??("small"===a?1:"large"===a?3:2),h="vertical"===o||!!d,g=(e,t)=>{if(!r.isValidElement(e))return e;if(e.type===r.Fragment){const t=e,l=r.Children.map(t.props.children,g)?.reverse();return r.cloneElement(t,{children:l})}if(e.type!==l)return e;const i=e.props,n={};return void 0===i.size&&(n.size=a),h&&void 0===i.fullWidth&&(n.fullWidth=!0),n.style={...i.style,order:t},Object.keys(n).length>0?r.cloneElement(e,n):e},y=r.Children.map(t,g);return e(i,{...f,align:n,className:u,"data-fd":c,gap:p,layout:o,order:s,role:f.role??"group",children:y})};export{n as default};
+import{jsx as e}from"react/jsx-runtime";import r from"react";import{styled as t}from"@mui/material/styles";import{Button as l}from"../../atoms/Button/index.js";const i=t("div",{shouldForwardProp:e=>!["align","gap","layout","order"].includes(e)})(({theme:e,align:r="right",gap:t=2,layout:l="horizontal",order:i="default"})=>{const n="vertical"===l,o="reverse"===i;return{display:"flex",flexDirection:n?o?"column-reverse":"column":o?"row-reverse":"row",justifyContent:n||"left"===r?o?"flex-end":"flex-start":"center"===r?"center":o?"flex-start":"flex-end",alignItems:n?"stretch":"center",gap:e.spacing(t),width:"100%",...n?{"&& > *":{width:"100%",maxWidth:"100%"}}:{}}}),n=({children:t,align:n="right",layout:o="horizontal",size:a="medium",order:s="default",fullWidthChildren:d,gap:m,fdKey:c,className:u,...f})=>{const p=m??("small"===a?1:"large"===a?3:2),h="vertical"===o||!!d,g=(e,t)=>{if(!r.isValidElement(e))return e;if(e.type===r.Fragment){const t=e,l=r.Children.map(t.props.children,g)?.reverse();return r.cloneElement(t,{children:l})}if(e.type!==l)return e;const i=e.props,n={};return void 0===i.size&&(n.size=a),h&&void 0===i.fullWidth&&(n.fullWidth=!0),n.style={...i.style,order:t},Object.keys(n).length>0?r.cloneElement(e,n):e},y=r.Children.map(t,g);return e(i,{...f,align:n,className:u,"data-fd":c,gap:p,layout:o,order:s,role:f.role??"group",children:y})};export{n as default};
 //# sourceMappingURL=index.js.map

package/dist/components/molecules/ButtonGroup/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/molecules/ButtonGroup/index.tsx"],"sourcesContent":["import React from 'react';\n\nimport { styled } from '@mui/material/styles';\n\nimport Button from '../../atoms/Button';\n\nexport interface ButtonGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n  align?: 'center' | 'left' | 'right';\n  layout?: 'horizontal' | 'vertical';\n  size?: 'large' | 'medium' | 'small';\n  order?: 'default' | 'reverse';\n  fullWidthChildren?: boolean;\n  gap?: number;\n  fdKey?: string;\n}\n\ntype StyledProps = Pick<ButtonGroupProps, 'align' | 'gap' | 'layout' | 'order'>;\n\nconst StyledContainer = styled('div', {\n  shouldForwardProp: (prop) => !['align', 'gap', 'layout', 'order'].includes(prop as string),\n})<StyledProps>(({ theme, align = 'right', gap = 2, layout = 'horizontal', order = 'default' }) => {\n  const isVertical = layout === 'vertical';\n  const isReverse = order === 'reverse';\n\n  const flexDirection = isVertical\n    ? isReverse\n      ? 'column-reverse'\n      : 'column'\n    : isReverse\n      ? 'row-reverse'\n      : 'row';\n\n  const justifyContent = isVertical\n    ? // keep items visually at the top whether reversed or not\n      isReverse\n      ? 'flex-end'\n      : 'flex-start'\n    : align === 'left'\n      ? isReverse\n        ? 'flex-end'\n        : 'flex-start'\n      : align === 'center'\n        ? 'center'\n        : // align === 'right'\n          isReverse\n          ? 'flex-start'\n          : 'flex-end';\n\n  return {\n    display: 'flex',\n    flexDirection,\n    justifyContent,\n    alignItems: isVertical ? 'stretch' : 'center',\n    gap: theme.spacing(gap),\n    width: '100%',\n    ...(isVertical\n      ? {\n          // Ensure full-width children in vertical layout as a fallback\n          // Increase specificity so it overrides any child width styles\n          '&& > *': {\n            width: '100%',\n            maxWidth: '100%',\n          },\n        }\n      : {}),\n  };\n});\n\nconst ButtonGroup = ({\n  children,\n  align = 'right',\n  layout = 'horizontal',\n  size = 'medium',\n  order = 'default',\n  fullWidthChildren,\n  gap,\n  fdKey,\n  className,\n  ...rest\n}: ButtonGroupProps): JSX.Element => {\n  const resolvedGap = gap ?? (size === 'small' ? 1 : size === 'large' ? 3 : 2);\n  const resolvedFullWidthChildren = layout === 'vertical' ? true : !!fullWidthChildren;\n\n  interface ButtonLikeProps {\n    size?: 'large' | 'medium' | 'small';\n    fullWidth?: boolean;\n    style?: React.CSSProperties;\n  }\n\n  const enhanceChild = (node: React.ReactNode, index: number): React.ReactNode => {\n    if (!React.isValidElement(node)) return node;\n\n    if (node.type === React.Fragment) {\n      const fragment = node as React.ReactElement<{ children?: React.ReactNode }>;\n      const mappedChildren = React.Children.map(fragment.props.children, enhanceChild)?.reverse();\n      return React.cloneElement(fragment, { children: mappedChildren });\n    }\n\n    if (node.type !== Button) return node;\n\n    const childProps = node.props as ButtonLikeProps;\n    const newProps: Partial<ButtonLikeProps> = {};\n\n    if (childProps.size === undefined) newProps.size = size;\n    if (resolvedFullWidthChildren && childProps.fullWidth === undefined) newProps.fullWidth = true;\n\n    newProps.style = {\n      ...childProps.style,\n      order: index,\n    };\n\n    return Object.keys(newProps).length > 0 ? React.cloneElement(node, newProps) : node;\n  };\n\n  const enhancedChildren = React.Children.map(children, enhanceChild);\n\n  return (\n    <StyledContainer\n      {...rest}\n      align={align}\n      className={className}\n      data-fd={fdKey}\n      gap={resolvedGap}\n      layout={layout}\n      order={order}\n      role={rest.role ?? 'group'}\n    >\n      {enhancedChildren}\n    </StyledContainer>\n  );\n};\n\nexport default ButtonGroup;\n"],"names":["StyledContainer","styled","shouldForwardProp","prop","includes","theme","align","gap","layout","order","isVertical","isReverse","display","flexDirection","justifyContent","alignItems","spacing","width","maxWidth","ButtonGroup","children","size","fullWidthChildren","fdKey","className","rest","resolvedGap","resolvedFullWidthChildren","enhanceChild","node","index","React","isValidElement","type","Fragment","fragment","mappedChildren","Children","map","props","reverse","cloneElement","Button","childProps","newProps","undefined","fullWidth","style","Object","keys","length","enhancedChildren","_jsx","role"],"mappings":"gKAmBA,MAAMA,EAAkBC,EAAO,MAAO,CACpCC,kBAAoBC,IAAU,CAAC,QAAS,MAAO,SAAU,SAASC,SAASD,IADrDF,EAER,EAAGI,QAAOC,QAAQ,QAASC,MAAM,EAAGC,SAAS,aAAcC,QAAQ,cACjF,MAAMC,EAAwB,aAAXF,EACbG,EAAsB,YAAVF,EA0BlB,MAAO,CACLG,QAAS,OACTC,cA1BoBH,EAClBC,EACE,iBACA,SACFA,EACE,cACA,MAqBJG,eAnBqBJ,GAKT,SAAVJ,EAHAK,EACE,WACA,aAKU,WAAVL,EACE,SAEAK,EACE,aACA,WAMRI,WAAYL,EAAa,UAAY,SACrCH,IAAKF,EAAMW,QAAQT,GACnBU,MAAO,UACHP,EACA,CAGE,SAAU,CACRO,MAAO,OACPC,SAAU,SAGd,OAIFC,EAAc,EAClBC,WACAd,QAAQ,QACRE,SAAS,aACTa,OAAO,SACPZ,QAAQ,UACRa,oBACAf,MACAgB,QACAC,eACGC,MAEH,MAAMC,EAAcnB,IAAiB,UAATc,EAAmB,EAAa,UAATA,EAAmB,EAAI,GACpEM,EAAuC,aAAXnB,KAAiCc,EAQ7DM,EAAe,CAACC,EAAuBC,KAC3C,IAAKC,EAAMC,eAAeH,GAAO,OAAOA,EAExC,GAAIA,EAAKI,OAASF,EAAMG,SAAU,CAChC,MAAMC,EAAWN,EACXO,EAAiBL,EAAMM,SAASC,IAAIH,EAASI,MAAMnB,SAAUQ,IAAeY,UAClF,OAAOT,EAAMU,aAAaN,EAAU,CAAEf,SAAUgB,GAClD,CAEA,GAAIP,EAAKI,OAASS,EAAQ,OAAOb,EAEjC,MAAMc,EAAad,EAAKU,MAClBK,EAAqC,CAAA,EAU3C,YARwBC,IAApBF,EAAWtB,OAAoBuB,EAASvB,KAAOA,GAC/CM,QAAsDkB,IAAzBF,EAAWG,YAAyBF,EAASE,WAAY,GAE1FF,EAASG,MAAQ,IACZJ,EAAWI,MACdtC,MAAOqB,GAGFkB,OAAOC,KAAKL,GAAUM,OAAS,EAAInB,EAAMU,aAAaZ,EAAMe,GAAYf,GAG3EsB,EAAmBpB,EAAMM,SAASC,IAAIlB,EAAUQ,GAEtD,OACEwB,EAACpD,EAAe,IACVyB,EACJnB,MAAOA,EACPkB,UAAWA,YACFD,EACThB,IAAKmB,EACLlB,OAAQA,EACRC,MAAOA,EACP4C,KAAM5B,EAAK4B,MAAQ,iBAElBF"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/molecules/ButtonGroup/index.tsx"],"sourcesContent":["import React from 'react';\n\nimport { styled } from '@mui/material/styles';\n\nimport Button from '../../atoms/Button';\n\nexport interface ButtonGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n  align?: 'center' | 'left' | 'right';\n  layout?: 'horizontal' | 'vertical';\n  size?: 'large' | 'medium' | 'small';\n  order?: 'default' | 'reverse';\n  fullWidthChildren?: boolean;\n  gap?: number;\n  fdKey?: string;\n}\n\ntype StyledProps = Pick<ButtonGroupProps, 'align' | 'gap' | 'layout' | 'order'>;\n\nconst StyledContainer = styled('div', {\n  shouldForwardProp: (prop) => !['align', 'gap', 'layout', 'order'].includes(prop as string),\n})<StyledProps>(({ theme, align = 'right', gap = 2, layout = 'horizontal', order = 'default' }) => {\n  const isVertical = layout === 'vertical';\n  const isReverse = order === 'reverse';\n\n  const flexDirection = isVertical\n    ? isReverse\n      ? 'column-reverse'\n      : 'column'\n    : isReverse\n      ? 'row-reverse'\n      : 'row';\n\n  const justifyContent = isVertical\n    ? // keep items visually at the top whether reversed or not\n      isReverse\n      ? 'flex-end'\n      : 'flex-start'\n    : align === 'left'\n      ? isReverse\n        ? 'flex-end'\n        : 'flex-start'\n      : align === 'center'\n        ? 'center'\n        : // align === 'right'\n          isReverse\n          ? 'flex-start'\n          : 'flex-end';\n\n  return {\n    display: 'flex',\n    flexDirection,\n    justifyContent,\n    alignItems: isVertical ? 'stretch' : 'center',\n    gap: theme.spacing(gap),\n    width: '100%',\n    ...(isVertical\n      ? {\n          // Ensure full-width children in vertical layout as a fallback\n          // Increase specificity so it overrides any child width styles\n          '&& > *': {\n            width: '100%',\n            maxWidth: '100%',\n          },\n        }\n      : {}),\n  };\n});\n\nconst ButtonGroup = ({\n  children,\n  align = 'right',\n  layout = 'horizontal',\n  size = 'medium',\n  order = 'default',\n  fullWidthChildren,\n  gap,\n  fdKey,\n  className,\n  ...rest\n}: ButtonGroupProps): JSX.Element => {\n  const resolvedGap = gap ?? (size === 'small' ? 1 : size === 'large' ? 3 : 2);\n  const resolvedFullWidthChildren = layout === 'vertical' ? true : !!fullWidthChildren;\n\n  interface ButtonLikeProps {\n    size?: 'large' | 'medium' | 'small';\n    fullWidth?: boolean;\n    style?: React.CSSProperties;\n  }\n\n  const enhanceChild = (node: React.ReactNode, index: number): React.ReactNode => {\n    if (!React.isValidElement(node)) return node;\n\n    if (node.type === React.Fragment) {\n      const fragment = node as React.ReactElement<{ children?: React.ReactNode }>;\n      const mappedChildren = React.Children.map(fragment.props.children, enhanceChild)?.reverse();\n      return React.cloneElement(fragment, { children: mappedChildren });\n    }\n\n    if (node.type !== Button) return node;\n\n    const childProps = node.props as ButtonLikeProps;\n    const newProps: Partial<ButtonLikeProps> = {};\n\n    if (childProps.size === undefined) newProps.size = size;\n    if (resolvedFullWidthChildren && childProps.fullWidth === undefined) newProps.fullWidth = true;\n\n    newProps.style = {\n      ...childProps.style,\n      order: index,\n    };\n\n    return Object.keys(newProps).length > 0 ? React.cloneElement(node, newProps) : node;\n  };\n\n  const enhancedChildren = React.Children.map(children, enhanceChild);\n\n  return (\n    <StyledContainer\n      {...rest}\n      align={align}\n      className={className}\n      data-fd={fdKey}\n      gap={resolvedGap}\n      layout={layout}\n      order={order}\n      role={rest.role ?? 'group'}\n    >\n      {enhancedChildren}\n    </StyledContainer>\n  );\n};\n\nexport default ButtonGroup;\n"],"names":["StyledContainer","styled","shouldForwardProp","prop","includes","theme","align","gap","layout","order","isVertical","isReverse","display","flexDirection","justifyContent","alignItems","spacing","width","maxWidth","ButtonGroup","children","size","fullWidthChildren","fdKey","className","rest","resolvedGap","resolvedFullWidthChildren","enhanceChild","node","index","React","isValidElement","type","Fragment","fragment","mappedChildren","Children","map","props","reverse","cloneElement","Button","childProps","newProps","undefined","fullWidth","style","Object","keys","length","enhancedChildren","_jsx","role"],"mappings":"gKAmBA,MAAMA,EAAkBC,EAAO,MAAO,CACpCC,kBAAoBC,IAAU,CAAC,QAAS,MAAO,SAAU,SAASC,SAASD,IADrDF,CAER,EAAGI,QAAOC,QAAQ,QAASC,MAAM,EAAGC,SAAS,aAAcC,QAAQ,cACjF,MAAMC,EAAwB,aAAXF,EACbG,EAAsB,YAAVF,EA0BlB,MAAO,CACLG,QAAS,OACTC,cA1BoBH,EAClBC,EACE,iBACA,SACFA,EACE,cACA,MAqBJG,eAnBqBJ,GAKT,SAAVJ,EAHAK,EACE,WACA,aAKU,WAAVL,EACE,SAEAK,EACE,aACA,WAMRI,WAAYL,EAAa,UAAY,SACrCH,IAAKF,EAAMW,QAAQT,GACnBU,MAAO,UACHP,EACA,CAGE,SAAU,CACRO,MAAO,OACPC,SAAU,SAGd,MAIFC,EAAc,EAClBC,WACAd,QAAQ,QACRE,SAAS,aACTa,OAAO,SACPZ,QAAQ,UACRa,oBACAf,MACAgB,QACAC,eACGC,MAEH,MAAMC,EAAcnB,IAAiB,UAATc,EAAmB,EAAa,UAATA,EAAmB,EAAI,GACpEM,EAAuC,aAAXnB,KAAiCc,EAQ7DM,EAAe,CAACC,EAAuBC,KAC3C,IAAKC,EAAMC,eAAeH,GAAO,OAAOA,EAExC,GAAIA,EAAKI,OAASF,EAAMG,SAAU,CAChC,MAAMC,EAAWN,EACXO,EAAiBL,EAAMM,SAASC,IAAIH,EAASI,MAAMnB,SAAUQ,IAAeY,UAClF,OAAOT,EAAMU,aAAaN,EAAU,CAAEf,SAAUgB,GAClD,CAEA,GAAIP,EAAKI,OAASS,EAAQ,OAAOb,EAEjC,MAAMc,EAAad,EAAKU,MAClBK,EAAqC,CAAA,EAU3C,YARwBC,IAApBF,EAAWtB,OAAoBuB,EAASvB,KAAOA,GAC/CM,QAAsDkB,IAAzBF,EAAWG,YAAyBF,EAASE,WAAY,GAE1FF,EAASG,MAAQ,IACZJ,EAAWI,MACdtC,MAAOqB,GAGFkB,OAAOC,KAAKL,GAAUM,OAAS,EAAInB,EAAMU,aAAaZ,EAAMe,GAAYf,GAG3EsB,EAAmBpB,EAAMM,SAASC,IAAIlB,EAAUQ,GAEtD,OACEwB,EAACpD,EAAe,IACVyB,EACJnB,MAAOA,EACPkB,UAAWA,YACFD,EACThB,IAAKmB,EACLlB,OAAQA,EACRC,MAAOA,EACP4C,KAAM5B,EAAK4B,MAAQ,iBAElBF"}

package/dist/components/molecules/CheckboxGroup/index.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),i=require("@mui/material/Box"),n=require("@mui/material/FormControl"),r=require("@mui/material/FormGroup"),o=require("@mui/material/FormHelperText"),s=require("@mui/material/FormLabel"),a=require("@mui/material/styles"),l=require("../../atoms/Checkbox/index.cjs.js"),c=require("../../../icons/CancelCircle/index.cjs.js");const d=a.styled(n)((({theme:e})=>({display:"flex",flexDirection:"column",gap:e.spacing(.5)}))),p=a.styled(r)((({theme:e})=>({display:"flex",flexDirection:"column",gap:e.spacing(2),paddingTop:e.spacing(2),overflow:"visible"}))),u=a.styled(i)((({theme:e})=>({display:"flex",flexDirection:"column",gap:e.spacing(2),paddingLeft:e.spacing(5.75),paddingTop:e.spacing(2),position:"relative",overflow:"visible","&::before":{content:'""',position:"absolute",left:e.spacing(1.75),top:e.spacing(2),bottom:0,width:"4px",backgroundColor:e.palette.semantic.stroke["stroke-weak"],zIndex:0}}))),m=({fdKey:n,options:r,value:a,size:m="medium",label:f,hintText:h,errorText:x,valid:g=!0,required:b=!1,onChange:j})=>{const[v,k]=t.useState([]),q=a??v,y=e=>{const t=[];return e.forEach((e=>{t.push(e.name),e.options&&t.push(...y(e.options))})),t},C=(e,t)=>{for(const i of e){if(i.name===t)return i;if(i.options){const e=C(i.options,t);if(e)return e}}},w=e=>e.options?y(e.options).filter((t=>{const i=C(e.options||[],t);return!i?.disabled})):[],T=e=>{const t=w(e);return 0!==t.length&&t.every((e=>q.includes(e)))},$=e=>{const t=e.options&&e.options.length>0,i=q.includes(e.name);if(!t)return{checked:i,indeterminate:!1};const n=T(e),r=(e=>{const t=w(e);if(0===t.length)return!1;const i=t.filter((e=>q.includes(e))).length;return i>0&&i<t.length})(e);return{checked:n,indeterminate:r&&!n}},F=e=>{const{name:t}=e.target,i=C(r,t);if(!i)return;let n;if(i.options&&i.options.length>0){if(T(i)){const e=(o=i).options?y(o.options):[];n=q.filter((t=>!e.includes(t)))}else{const e=w(i);n=[...new Set([...q,...e])]}n=n.filter((e=>e!==i.name))}else{const{checked:i}=e.target;n=i?[...q,t]:q.filter((e=>e!==t))}var o;void 0===a&&k(n),j&&j(e,n)},z=t=>t.map((t=>{const{checked:r,indeterminate:o}=$(t),s=t.options&&t.options.length>0;return e.jsxs(i,{children:[e.jsx(l,{checked:r,disabled:t.disabled,fdKey:`${n}-${t.name}`,indeterminate:o,label:t.label,name:t.name,onChange:F,size:m,valid:g}),s&&e.jsx(u,{children:z(t.options??[])})]},t.name)})),D=!g&&!!x;return e.jsxs(d,{"data-fd":n,children:[e.jsxs(i,{children:[e.jsx(s,{"data-fd":`${n}-label`,required:b,children:f}),h&&e.jsx(o,{"data-fd":`${n}-hint`,children:h})]}),D&&e.jsxs(o,{error:!0,children:[e.jsx(c,{}),x]}),e.jsx(p,{"data-fd":`${n}-checkboxes`,children:z(r)})]})};exports.CheckboxGroup=m,exports.default=m;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),i=require("@mui/material/Box"),n=require("@mui/material/FormControl"),r=require("@mui/material/FormGroup"),o=require("@mui/material/FormHelperText"),s=require("@mui/material/FormLabel"),a=require("@mui/material/styles"),l=require("../../atoms/Checkbox/index.cjs.js"),c=require("../../../icons/CancelCircle/index.cjs.js");const d=a.styled(n)(({theme:e})=>({display:"flex",flexDirection:"column",gap:e.spacing(.5)})),p=a.styled(r)(({theme:e})=>({display:"flex",flexDirection:"column",gap:e.spacing(2),paddingTop:e.spacing(2),overflow:"visible"})),u=a.styled(i)(({theme:e})=>({display:"flex",flexDirection:"column",gap:e.spacing(2),paddingLeft:e.spacing(5.75),paddingTop:e.spacing(2),position:"relative",overflow:"visible","&::before":{content:'""',position:"absolute",left:e.spacing(1.75),top:e.spacing(2),bottom:0,width:"4px",backgroundColor:e.palette.semantic.stroke["stroke-weak"],zIndex:0}})),m=({fdKey:n,options:r,value:a,size:m="medium",label:f,hintText:h,errorText:x,valid:g=!0,required:b=!1,onChange:j})=>{const[v,k]=t.useState([]),q=a??v,y=e=>{const t=[];return e.forEach(e=>{t.push(e.name),e.options&&t.push(...y(e.options))}),t},C=(e,t)=>{for(const i of e){if(i.name===t)return i;if(i.options){const e=C(i.options,t);if(e)return e}}},w=e=>e.options?y(e.options).filter(t=>{const i=C(e.options||[],t);return!i?.disabled}):[],T=e=>{const t=w(e);return 0!==t.length&&t.every(e=>q.includes(e))},$=e=>{const t=e.options&&e.options.length>0,i=q.includes(e.name);if(!t)return{checked:i,indeterminate:!1};const n=T(e),r=(e=>{const t=w(e);if(0===t.length)return!1;const i=t.filter(e=>q.includes(e)).length;return i>0&&i<t.length})(e);return{checked:n,indeterminate:r&&!n}},F=e=>{const{name:t}=e.target,i=C(r,t);if(!i)return;let n;if(i.options&&i.options.length>0){if(T(i)){const e=(o=i).options?y(o.options):[];n=q.filter(t=>!e.includes(t))}else{const e=w(i);n=[...new Set([...q,...e])]}n=n.filter(e=>e!==i.name)}else{const{checked:i}=e.target;n=i?[...q,t]:q.filter(e=>e!==t)}var o;void 0===a&&k(n),j&&j(e,n)},z=t=>t.map(t=>{const{checked:r,indeterminate:o}=$(t),s=t.options&&t.options.length>0;return e.jsxs(i,{children:[e.jsx(l,{checked:r,disabled:t.disabled,fdKey:`${n}-${t.name}`,indeterminate:o,label:t.label,name:t.name,onChange:F,size:m,valid:g}),s&&e.jsx(u,{children:z(t.options??[])})]},t.name)}),D=!g&&!!x;return e.jsxs(d,{"data-fd":n,children:[e.jsxs(i,{children:[e.jsx(s,{"data-fd":`${n}-label`,required:b,children:f}),h&&e.jsx(o,{"data-fd":`${n}-hint`,children:h})]}),D&&e.jsxs(o,{error:!0,children:[e.jsx(c,{}),x]}),e.jsx(p,{"data-fd":`${n}-checkboxes`,children:z(r)})]})};exports.CheckboxGroup=m,exports.default=m;
 //# sourceMappingURL=index.cjs.js.map

package/dist/components/molecules/CheckboxGroup/index.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":["../../../../src/components/molecules/CheckboxGroup/index.tsx"],"sourcesContent":["import { type ChangeEvent, useState } from 'react';\n\nimport Box from '@mui/material/Box';\nimport MuiFormControl from '@mui/material/FormControl';\nimport MuiFormGroup from '@mui/material/FormGroup';\nimport MuiFormHelperText from '@mui/material/FormHelperText';\nimport MuiFormLabel from '@mui/material/FormLabel';\nimport { styled } from '@mui/material/styles';\n\nimport Checkbox from '@fd/components/atoms/Checkbox';\nimport CancelCircleIcon from '@fd/icons/CancelCircle';\n\n/**\n * Represents a checkbox option in the CheckboxGroup.\n * Supports hierarchical nesting through the `options` property.\n */\nexport interface CheckboxOption {\n  /** Unique identifier for the option. */\n  name: string;\n  /** Display label for the checkbox. */\n  label: string;\n  /** Whether the checkbox is disabled. */\n  disabled?: boolean;\n  /** Nested child options, creating a hierarchical structure. */\n  options?: CheckboxOption[];\n}\n\n/**\n * Props for the CheckboxGroup component.\n * Supports hierarchical checkbox groups with parent-child relationships.\n * Parent checkboxes automatically reflect the selection state of their children,\n * showing indeterminate state when some (but not all) children are selected.\n */\ninterface CheckboxGroupProps {\n  /** Unique identifier forwarded to the root element as `data-fd` for testing and identification. */\n  fdKey: string;\n  /** Array of checkbox options. Supports nested options for hierarchical structures. */\n  options: CheckboxOption[];\n  /** Label displayed above the checkbox group. */\n  label: string;\n  /**\n   * The selected values. When provided, the component is controlled.\n   * When omitted, the component is uncontrolled and manages its own state.\n   */\n  value?: string[];\n  /** Size of the checkboxes. */\n  size?: 'medium' | 'small';\n  /** Helper text displayed below the label. */\n  hintText?: string;\n  /** Error message displayed when validation fails. */\n  errorText?: string;\n  /** Whether the input is valid. When false and errorText is provided, error styling is applied. */\n  valid?: boolean;\n  /** Whether the field is required. Adds a required indicator to the label. */\n  required?: boolean;\n  /** Called when the selection changes. Receives the change event and the updated array of selected option names. */\n  onChange?: (event: ChangeEvent<HTMLInputElement>, checkedOptions: string[]) => void;\n}\n\nconst StyledFormControl = styled(MuiFormControl)(({ theme }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: theme.spacing(0.5),\n}));\n\nconst StyledFormGroup = styled(MuiFormGroup)(({ theme }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: theme.spacing(2),\n  paddingTop: theme.spacing(2),\n  overflow: 'visible',\n}));\n\nconst StyledChildrenContainer = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: theme.spacing(2),\n  paddingLeft: theme.spacing(5.75),\n  paddingTop: theme.spacing(2),\n  position: 'relative',\n  overflow: 'visible',\n  '&::before': {\n    content: '\"\"',\n    position: 'absolute',\n    left: theme.spacing(1.75),\n    top: theme.spacing(2),\n    bottom: 0,\n    width: '4px',\n    backgroundColor: theme.palette.semantic.stroke['stroke-weak'],\n    zIndex: 0,\n  },\n}));\n\n/**\n * A hierarchical checkbox group component that supports nested options and parent-child relationships.\n * When a parent option is selected, all enabled child options are automatically selected.\n * Parent checkboxes show an indeterminate state when some (but not all) children are selected.\n * Supports both controlled and uncontrolled modes.\n *\n * @param props - The component props\n * @returns The rendered CheckboxGroup component\n */\nexport const CheckboxGroup = ({\n  fdKey,\n  options,\n  value,\n  size = 'medium',\n  label,\n  hintText,\n  errorText,\n  valid = true,\n  required = false,\n  onChange,\n}: CheckboxGroupProps): JSX.Element => {\n  const [internalValue, setInternalValue] = useState<string[]>([]);\n\n  const resolvedValue = value ?? internalValue;\n\n  // Flatten all option names (including children) for easy lookup\n  const getAllOptionNames = (opts: CheckboxOption[]): string[] => {\n    const names: string[] = [];\n    opts.forEach((opt) => {\n      names.push(opt.name);\n      if (opt.options) {\n        names.push(...getAllOptionNames(opt.options));\n      }\n    });\n    return names;\n  };\n\n  // Get all child option names for a given option (including disabled)\n  const getChildOptionNames = (option: CheckboxOption): string[] => {\n    if (!option.options) return [];\n    return getAllOptionNames(option.options);\n  };\n\n  // Helper to find an option by name in the hierarchy\n  const findOption = (opts: CheckboxOption[], targetName: string): CheckboxOption | undefined => {\n    for (const opt of opts) {\n      if (opt.name === targetName) return opt;\n      if (opt.options) {\n        const found = findOption(opt.options, targetName);\n        if (found) return found;\n      }\n    }\n    return undefined;\n  };\n\n  // Get all enabled child names for a given option\n  const getEnabledChildNames = (option: CheckboxOption): string[] => {\n    if (!option.options) return [];\n    return getAllOptionNames(option.options).filter((childName) => {\n      const childOption = findOption(option.options || [], childName);\n      return !childOption?.disabled;\n    });\n  };\n\n  // Check if all enabled children of an option are selected\n  const areAllChildrenSelected = (option: CheckboxOption): boolean => {\n    const enabledChildNames = getEnabledChildNames(option);\n    if (enabledChildNames.length === 0) return false;\n    return enabledChildNames.every((name) => resolvedValue.includes(name));\n  };\n\n  // Check if some (but not all) enabled children of an option are selected\n  const areSomeChildrenSelected = (option: CheckboxOption): boolean => {\n    const enabledChildNames = getEnabledChildNames(option);\n    if (enabledChildNames.length === 0) return false;\n    const selectedCount = enabledChildNames.filter((name) => resolvedValue.includes(name)).length;\n    return selectedCount > 0 && selectedCount < enabledChildNames.length;\n  };\n\n  // Calculate checkbox state for an option\n  const getCheckboxState = (option: CheckboxOption): { checked: boolean; indeterminate: boolean } => {\n    const hasChildren = option.options && option.options.length > 0;\n    const isDirectlySelected = resolvedValue.includes(option.name);\n\n    if (!hasChildren) {\n      return { checked: isDirectlySelected, indeterminate: false };\n    }\n\n    const allSelected = areAllChildrenSelected(option);\n    const someSelected = areSomeChildrenSelected(option);\n\n    return {\n      checked: allSelected,\n      indeterminate: someSelected && !allSelected,\n    };\n  };\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>): void => {\n    const { name: optionName } = event.target;\n    const clickedOption = findOption(options, optionName);\n    if (!clickedOption) return;\n\n    let newValue: string[];\n\n    // If option has children, toggle all children based on current state\n    if (clickedOption.options && clickedOption.options.length > 0) {\n      const allChildrenSelected = areAllChildrenSelected(clickedOption);\n\n      if (allChildrenSelected) {\n        // All children are selected - deselect all children\n        const childNames = getChildOptionNames(clickedOption);\n        newValue = resolvedValue.filter((name) => !childNames.includes(name));\n      } else {\n        // Not all children are selected - select all enabled children\n        const enabledChildNames = getEnabledChildNames(clickedOption);\n        // Add all enabled children that aren't already selected\n        newValue = [...new Set([...resolvedValue, ...enabledChildNames])];\n      }\n      // Ensure parent names are not persisted in the value for hierarchical options\n      newValue = newValue.filter((name) => name !== clickedOption.name);\n    } else {\n      // Regular checkbox toggle - use event.checked for leaf nodes\n      const { checked } = event.target;\n      newValue = checked\n        ? [...resolvedValue, optionName]\n        : resolvedValue.filter((name) => name !== optionName);\n    }\n\n    // If value is undefined, we're in uncontrolled mode - update internal state\n    if (value === undefined) {\n      setInternalValue(newValue);\n    }\n\n    if (onChange) {\n      onChange(event, newValue);\n    }\n  };\n\n  // Render checkbox options recursively\n  const renderOptions = (opts: CheckboxOption[]): JSX.Element[] => {\n    return opts.map((option) => {\n      const { checked, indeterminate } = getCheckboxState(option);\n      const hasOptions = option.options && option.options.length > 0;\n\n      return (\n        <Box key={option.name}>\n          <Checkbox\n            checked={checked}\n            disabled={option.disabled}\n            fdKey={`${fdKey}-${option.name}`}\n            indeterminate={indeterminate}\n            label={option.label}\n            name={option.name}\n            onChange={handleChange}\n            size={size}\n            valid={valid}\n          />\n          {hasOptions && (\n            <StyledChildrenContainer>{renderOptions(option.options ?? [])}</StyledChildrenContainer>\n          )}\n        </Box>\n      );\n    });\n  };\n\n  const isError = !valid && !!errorText;\n\n  return (\n    <StyledFormControl data-fd={fdKey}>\n      <Box>\n        <MuiFormLabel data-fd={`${fdKey}-label`} required={required}>\n          {label}\n        </MuiFormLabel>\n\n        {hintText && <MuiFormHelperText data-fd={`${fdKey}-hint`}>{hintText}</MuiFormHelperText>}\n      </Box>\n\n      {isError && (\n        <MuiFormHelperText error>\n          <CancelCircleIcon />\n\n          {errorText}\n        </MuiFormHelperText>\n      )}\n\n      <StyledFormGroup data-fd={`${fdKey}-checkboxes`}>{renderOptions(options)}</StyledFormGroup>\n    </StyledFormControl>\n  );\n};\n\nexport default CheckboxGroup;\n"],"names":["StyledFormControl","styled","MuiFormControl","theme","display","flexDirection","gap","spacing","StyledFormGroup","MuiFormGroup","paddingTop","overflow","StyledChildrenContainer","Box","paddingLeft","position","content","left","top","bottom","width","backgroundColor","palette","semantic","stroke","zIndex","CheckboxGroup","fdKey","options","value","size","label","hintText","errorText","valid","required","onChange","internalValue","setInternalValue","useState","resolvedValue","getAllOptionNames","opts","names","forEach","opt","push","name","findOption","targetName","found","getEnabledChildNames","option","filter","childName","childOption","disabled","areAllChildrenSelected","enabledChildNames","length","every","includes","getCheckboxState","hasChildren","isDirectlySelected","checked","indeterminate","allSelected","someSelected","selectedCount","areSomeChildrenSelected","handleChange","event","optionName","target","clickedOption","newValue","childNames","Set","undefined","renderOptions","map","hasOptions","_jsxs","children","_jsx","Checkbox","isError","MuiFormLabel","MuiFormHelperText","error","CancelCircleIcon"],"mappings":"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"}
+{"version":3,"file":"index.cjs.js","sources":["../../../../src/components/molecules/CheckboxGroup/index.tsx"],"sourcesContent":["import { type ChangeEvent, useState } from 'react';\n\nimport Box from '@mui/material/Box';\nimport MuiFormControl from '@mui/material/FormControl';\nimport MuiFormGroup from '@mui/material/FormGroup';\nimport MuiFormHelperText from '@mui/material/FormHelperText';\nimport MuiFormLabel from '@mui/material/FormLabel';\nimport { styled } from '@mui/material/styles';\n\nimport Checkbox from '@fd/components/atoms/Checkbox';\nimport CancelCircleIcon from '@fd/icons/CancelCircle';\n\n/**\n * Represents a checkbox option in the CheckboxGroup.\n * Supports hierarchical nesting through the `options` property.\n */\nexport interface CheckboxOption {\n  /** Unique identifier for the option. */\n  name: string;\n  /** Display label for the checkbox. */\n  label: string;\n  /** Whether the checkbox is disabled. */\n  disabled?: boolean;\n  /** Nested child options, creating a hierarchical structure. */\n  options?: CheckboxOption[];\n}\n\n/**\n * Props for the CheckboxGroup component.\n * Supports hierarchical checkbox groups with parent-child relationships.\n * Parent checkboxes automatically reflect the selection state of their children,\n * showing indeterminate state when some (but not all) children are selected.\n */\ninterface CheckboxGroupProps {\n  /** Unique identifier forwarded to the root element as `data-fd` for testing and identification. */\n  fdKey: string;\n  /** Array of checkbox options. Supports nested options for hierarchical structures. */\n  options: CheckboxOption[];\n  /** Label displayed above the checkbox group. */\n  label: string;\n  /**\n   * The selected values. When provided, the component is controlled.\n   * When omitted, the component is uncontrolled and manages its own state.\n   */\n  value?: string[];\n  /** Size of the checkboxes. */\n  size?: 'medium' | 'small';\n  /** Helper text displayed below the label. */\n  hintText?: string;\n  /** Error message displayed when validation fails. */\n  errorText?: string;\n  /** Whether the input is valid. When false and errorText is provided, error styling is applied. */\n  valid?: boolean;\n  /** Whether the field is required. Adds a required indicator to the label. */\n  required?: boolean;\n  /** Called when the selection changes. Receives the change event and the updated array of selected option names. */\n  onChange?: (event: ChangeEvent<HTMLInputElement>, checkedOptions: string[]) => void;\n}\n\nconst StyledFormControl = styled(MuiFormControl)(({ theme }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: theme.spacing(0.5),\n}));\n\nconst StyledFormGroup = styled(MuiFormGroup)(({ theme }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: theme.spacing(2),\n  paddingTop: theme.spacing(2),\n  overflow: 'visible',\n}));\n\nconst StyledChildrenContainer = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: theme.spacing(2),\n  paddingLeft: theme.spacing(5.75),\n  paddingTop: theme.spacing(2),\n  position: 'relative',\n  overflow: 'visible',\n  '&::before': {\n    content: '\"\"',\n    position: 'absolute',\n    left: theme.spacing(1.75),\n    top: theme.spacing(2),\n    bottom: 0,\n    width: '4px',\n    backgroundColor: theme.palette.semantic.stroke['stroke-weak'],\n    zIndex: 0,\n  },\n}));\n\n/**\n * A hierarchical checkbox group component that supports nested options and parent-child relationships.\n * When a parent option is selected, all enabled child options are automatically selected.\n * Parent checkboxes show an indeterminate state when some (but not all) children are selected.\n * Supports both controlled and uncontrolled modes.\n *\n * @param props - The component props\n * @returns The rendered CheckboxGroup component\n */\nexport const CheckboxGroup = ({\n  fdKey,\n  options,\n  value,\n  size = 'medium',\n  label,\n  hintText,\n  errorText,\n  valid = true,\n  required = false,\n  onChange,\n}: CheckboxGroupProps): JSX.Element => {\n  const [internalValue, setInternalValue] = useState<string[]>([]);\n\n  const resolvedValue = value ?? internalValue;\n\n  // Flatten all option names (including children) for easy lookup\n  const getAllOptionNames = (opts: CheckboxOption[]): string[] => {\n    const names: string[] = [];\n    opts.forEach((opt) => {\n      names.push(opt.name);\n      if (opt.options) {\n        names.push(...getAllOptionNames(opt.options));\n      }\n    });\n    return names;\n  };\n\n  // Get all child option names for a given option (including disabled)\n  const getChildOptionNames = (option: CheckboxOption): string[] => {\n    if (!option.options) return [];\n    return getAllOptionNames(option.options);\n  };\n\n  // Helper to find an option by name in the hierarchy\n  const findOption = (opts: CheckboxOption[], targetName: string): CheckboxOption | undefined => {\n    for (const opt of opts) {\n      if (opt.name === targetName) return opt;\n      if (opt.options) {\n        const found = findOption(opt.options, targetName);\n        if (found) return found;\n      }\n    }\n    return undefined;\n  };\n\n  // Get all enabled child names for a given option\n  const getEnabledChildNames = (option: CheckboxOption): string[] => {\n    if (!option.options) return [];\n    return getAllOptionNames(option.options).filter((childName) => {\n      const childOption = findOption(option.options || [], childName);\n      return !childOption?.disabled;\n    });\n  };\n\n  // Check if all enabled children of an option are selected\n  const areAllChildrenSelected = (option: CheckboxOption): boolean => {\n    const enabledChildNames = getEnabledChildNames(option);\n    if (enabledChildNames.length === 0) return false;\n    return enabledChildNames.every((name) => resolvedValue.includes(name));\n  };\n\n  // Check if some (but not all) enabled children of an option are selected\n  const areSomeChildrenSelected = (option: CheckboxOption): boolean => {\n    const enabledChildNames = getEnabledChildNames(option);\n    if (enabledChildNames.length === 0) return false;\n    const selectedCount = enabledChildNames.filter((name) => resolvedValue.includes(name)).length;\n    return selectedCount > 0 && selectedCount < enabledChildNames.length;\n  };\n\n  // Calculate checkbox state for an option\n  const getCheckboxState = (option: CheckboxOption): { checked: boolean; indeterminate: boolean } => {\n    const hasChildren = option.options && option.options.length > 0;\n    const isDirectlySelected = resolvedValue.includes(option.name);\n\n    if (!hasChildren) {\n      return { checked: isDirectlySelected, indeterminate: false };\n    }\n\n    const allSelected = areAllChildrenSelected(option);\n    const someSelected = areSomeChildrenSelected(option);\n\n    return {\n      checked: allSelected,\n      indeterminate: someSelected && !allSelected,\n    };\n  };\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>): void => {\n    const { name: optionName } = event.target;\n    const clickedOption = findOption(options, optionName);\n    if (!clickedOption) return;\n\n    let newValue: string[];\n\n    // If option has children, toggle all children based on current state\n    if (clickedOption.options && clickedOption.options.length > 0) {\n      const allChildrenSelected = areAllChildrenSelected(clickedOption);\n\n      if (allChildrenSelected) {\n        // All children are selected - deselect all children\n        const childNames = getChildOptionNames(clickedOption);\n        newValue = resolvedValue.filter((name) => !childNames.includes(name));\n      } else {\n        // Not all children are selected - select all enabled children\n        const enabledChildNames = getEnabledChildNames(clickedOption);\n        // Add all enabled children that aren't already selected\n        newValue = [...new Set([...resolvedValue, ...enabledChildNames])];\n      }\n      // Ensure parent names are not persisted in the value for hierarchical options\n      newValue = newValue.filter((name) => name !== clickedOption.name);\n    } else {\n      // Regular checkbox toggle - use event.checked for leaf nodes\n      const { checked } = event.target;\n      newValue = checked\n        ? [...resolvedValue, optionName]\n        : resolvedValue.filter((name) => name !== optionName);\n    }\n\n    // If value is undefined, we're in uncontrolled mode - update internal state\n    if (value === undefined) {\n      setInternalValue(newValue);\n    }\n\n    if (onChange) {\n      onChange(event, newValue);\n    }\n  };\n\n  // Render checkbox options recursively\n  const renderOptions = (opts: CheckboxOption[]): JSX.Element[] => {\n    return opts.map((option) => {\n      const { checked, indeterminate } = getCheckboxState(option);\n      const hasOptions = option.options && option.options.length > 0;\n\n      return (\n        <Box key={option.name}>\n          <Checkbox\n            checked={checked}\n            disabled={option.disabled}\n            fdKey={`${fdKey}-${option.name}`}\n            indeterminate={indeterminate}\n            label={option.label}\n            name={option.name}\n            onChange={handleChange}\n            size={size}\n            valid={valid}\n          />\n          {hasOptions && (\n            <StyledChildrenContainer>{renderOptions(option.options ?? [])}</StyledChildrenContainer>\n          )}\n        </Box>\n      );\n    });\n  };\n\n  const isError = !valid && !!errorText;\n\n  return (\n    <StyledFormControl data-fd={fdKey}>\n      <Box>\n        <MuiFormLabel data-fd={`${fdKey}-label`} required={required}>\n          {label}\n        </MuiFormLabel>\n\n        {hintText && <MuiFormHelperText data-fd={`${fdKey}-hint`}>{hintText}</MuiFormHelperText>}\n      </Box>\n\n      {isError && (\n        <MuiFormHelperText error>\n          <CancelCircleIcon />\n\n          {errorText}\n        </MuiFormHelperText>\n      )}\n\n      <StyledFormGroup data-fd={`${fdKey}-checkboxes`}>{renderOptions(options)}</StyledFormGroup>\n    </StyledFormControl>\n  );\n};\n\nexport default CheckboxGroup;\n"],"names":["StyledFormControl","styled","MuiFormControl","theme","display","flexDirection","gap","spacing","StyledFormGroup","MuiFormGroup","paddingTop","overflow","StyledChildrenContainer","Box","paddingLeft","position","content","left","top","bottom","width","backgroundColor","palette","semantic","stroke","zIndex","CheckboxGroup","fdKey","options","value","size","label","hintText","errorText","valid","required","onChange","internalValue","setInternalValue","useState","resolvedValue","getAllOptionNames","opts","names","forEach","opt","push","name","findOption","targetName","found","getEnabledChildNames","option","filter","childName","childOption","disabled","areAllChildrenSelected","enabledChildNames","length","every","includes","getCheckboxState","hasChildren","isDirectlySelected","checked","indeterminate","allSelected","someSelected","selectedCount","areSomeChildrenSelected","handleChange","event","optionName","target","clickedOption","newValue","childNames","Set","undefined","renderOptions","map","hasOptions","_jsxs","children","_jsx","Checkbox","isError","MuiFormLabel","MuiFormHelperText","error","CancelCircleIcon"],"mappings":"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"}

package/dist/components/molecules/CheckboxGroup/index.js

@@ -1,2 +1,2 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useState as i}from"react";import n from"@mui/material/Box";import o from"@mui/material/FormControl";import r from"@mui/material/FormGroup";import a from"@mui/material/FormHelperText";import l from"@mui/material/FormLabel";import{styled as s}from"@mui/material/styles";import c from"../../atoms/Checkbox/index.js";import m from"../../../icons/CancelCircle/index.js";const d=s(o)((({theme:e})=>({display:"flex",flexDirection:"column",gap:e.spacing(.5)}))),p=s(r)((({theme:e})=>({display:"flex",flexDirection:"column",gap:e.spacing(2),paddingTop:e.spacing(2),overflow:"visible"}))),f=s(n)((({theme:e})=>({display:"flex",flexDirection:"column",gap:e.spacing(2),paddingLeft:e.spacing(5.75),paddingTop:e.spacing(2),position:"relative",overflow:"visible","&::before":{content:'""',position:"absolute",left:e.spacing(1.75),top:e.spacing(2),bottom:0,width:"4px",backgroundColor:e.palette.semantic.stroke["stroke-weak"],zIndex:0}}))),u=({fdKey:o,options:r,value:s,size:u="medium",label:h,hintText:g,errorText:x,valid:b=!0,required:k=!1,onChange:v})=>{const[y,C]=i([]),w=s??y,T=e=>{const t=[];return e.forEach((e=>{t.push(e.name),e.options&&t.push(...T(e.options))})),t},$=(e,t)=>{for(const i of e){if(i.name===t)return i;if(i.options){const e=$(i.options,t);if(e)return e}}},F=e=>e.options?T(e.options).filter((t=>{const i=$(e.options||[],t);return!i?.disabled})):[],j=e=>{const t=F(e);return 0!==t.length&&t.every((e=>w.includes(e)))},z=e=>{const t=e.options&&e.options.length>0,i=w.includes(e.name);if(!t)return{checked:i,indeterminate:!1};const n=j(e),o=(e=>{const t=F(e);if(0===t.length)return!1;const i=t.filter((e=>w.includes(e))).length;return i>0&&i<t.length})(e);return{checked:n,indeterminate:o&&!n}},D=e=>{const{name:t}=e.target,i=$(r,t);if(!i)return;let n;if(i.options&&i.options.length>0){if(j(i)){const e=(o=i).options?T(o.options):[];n=w.filter((t=>!e.includes(t)))}else{const e=F(i);n=[...new Set([...w,...e])]}n=n.filter((e=>e!==i.name))}else{const{checked:i}=e.target;n=i?[...w,t]:w.filter((e=>e!==t))}var o;void 0===s&&C(n),v&&v(e,n)},q=i=>i.map((i=>{const{checked:r,indeterminate:a}=z(i),l=i.options&&i.options.length>0;return e(n,{children:[t(c,{checked:r,disabled:i.disabled,fdKey:`${o}-${i.name}`,indeterminate:a,label:i.label,name:i.name,onChange:D,size:u,valid:b}),l&&t(f,{children:q(i.options??[])})]},i.name)})),K=!b&&!!x;return e(d,{"data-fd":o,children:[e(n,{children:[t(l,{"data-fd":`${o}-label`,required:k,children:h}),g&&t(a,{"data-fd":`${o}-hint`,children:g})]}),K&&e(a,{error:!0,children:[t(m,{}),x]}),t(p,{"data-fd":`${o}-checkboxes`,children:q(r)})]})};export{u as CheckboxGroup,u as default};
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useState as i}from"react";import n from"@mui/material/Box";import o from"@mui/material/FormControl";import r from"@mui/material/FormGroup";import a from"@mui/material/FormHelperText";import l from"@mui/material/FormLabel";import{styled as s}from"@mui/material/styles";import c from"../../atoms/Checkbox/index.js";import m from"../../../icons/CancelCircle/index.js";const d=s(o)(({theme:e})=>({display:"flex",flexDirection:"column",gap:e.spacing(.5)})),p=s(r)(({theme:e})=>({display:"flex",flexDirection:"column",gap:e.spacing(2),paddingTop:e.spacing(2),overflow:"visible"})),f=s(n)(({theme:e})=>({display:"flex",flexDirection:"column",gap:e.spacing(2),paddingLeft:e.spacing(5.75),paddingTop:e.spacing(2),position:"relative",overflow:"visible","&::before":{content:'""',position:"absolute",left:e.spacing(1.75),top:e.spacing(2),bottom:0,width:"4px",backgroundColor:e.palette.semantic.stroke["stroke-weak"],zIndex:0}})),u=({fdKey:o,options:r,value:s,size:u="medium",label:h,hintText:g,errorText:x,valid:b=!0,required:k=!1,onChange:v})=>{const[y,C]=i([]),w=s??y,T=e=>{const t=[];return e.forEach(e=>{t.push(e.name),e.options&&t.push(...T(e.options))}),t},$=(e,t)=>{for(const i of e){if(i.name===t)return i;if(i.options){const e=$(i.options,t);if(e)return e}}},F=e=>e.options?T(e.options).filter(t=>{const i=$(e.options||[],t);return!i?.disabled}):[],j=e=>{const t=F(e);return 0!==t.length&&t.every(e=>w.includes(e))},z=e=>{const t=e.options&&e.options.length>0,i=w.includes(e.name);if(!t)return{checked:i,indeterminate:!1};const n=j(e),o=(e=>{const t=F(e);if(0===t.length)return!1;const i=t.filter(e=>w.includes(e)).length;return i>0&&i<t.length})(e);return{checked:n,indeterminate:o&&!n}},D=e=>{const{name:t}=e.target,i=$(r,t);if(!i)return;let n;if(i.options&&i.options.length>0){if(j(i)){const e=(o=i).options?T(o.options):[];n=w.filter(t=>!e.includes(t))}else{const e=F(i);n=[...new Set([...w,...e])]}n=n.filter(e=>e!==i.name)}else{const{checked:i}=e.target;n=i?[...w,t]:w.filter(e=>e!==t)}var o;void 0===s&&C(n),v&&v(e,n)},q=i=>i.map(i=>{const{checked:r,indeterminate:a}=z(i),l=i.options&&i.options.length>0;return e(n,{children:[t(c,{checked:r,disabled:i.disabled,fdKey:`${o}-${i.name}`,indeterminate:a,label:i.label,name:i.name,onChange:D,size:u,valid:b}),l&&t(f,{children:q(i.options??[])})]},i.name)}),K=!b&&!!x;return e(d,{"data-fd":o,children:[e(n,{children:[t(l,{"data-fd":`${o}-label`,required:k,children:h}),g&&t(a,{"data-fd":`${o}-hint`,children:g})]}),K&&e(a,{error:!0,children:[t(m,{}),x]}),t(p,{"data-fd":`${o}-checkboxes`,children:q(r)})]})};export{u as CheckboxGroup,u as default};
 //# sourceMappingURL=index.js.map