klz-cables.com/.pnpm-store/v10/files/f2/2946ca4802f8fb44a35620ba5e944275e7dbe61fd97ac770124efab0008e0001d7714e54d2b529fb930025728796c00f034ac056b928c1a1488875b6424d50

{"version":3,"file":"index.js","names":["React","PlusIcon","XIcon","DraggableSortable","Pill","baseClass","PillSelector","draggable","onClick","pills","pillElements","useMemo","map","pill","i","_jsx","alignIcon","selected","className","filter","Boolean","join","icon","id","name","size","Label","key","ids","onDragEnd","moveFromIndex","moveToIndex"],"sources":["../../../src/elements/PillSelector/index.tsx"],"sourcesContent":["'use client'\n\nimport React from 'react'\n\nimport { PlusIcon } from '../../icons/Plus/index.js'\nimport { XIcon } from '../../icons/X/index.js'\nimport { DraggableSortable } from '../DraggableSortable/index.js'\nimport { Pill } from '../Pill/index.js'\nimport './index.scss'\n\nconst baseClass = 'pill-selector'\n\nexport type SelectablePill = {\n  key?: string\n  Label?: React.ReactNode\n  name: string\n  selected: boolean\n}\n\nexport type Props = {\n  draggable?: {\n    onDragEnd: (args: { moveFromIndex: number; moveToIndex: number }) => void\n  }\n  onClick?: (args: { pill: SelectablePill }) => Promise<void> | void\n  pills: SelectablePill[]\n}\n\n/**\n * Displays a wrappable list of pills that can be selected or deselected.\n * If `draggable` is true, the pills can be reordered by dragging.\n */\nexport const PillSelector: React.FC<Props> = ({ draggable, onClick, pills }) => {\n  // IMPORTANT: Do NOT wrap DraggableSortable in a dynamic component function using useMemo.\n  // BAD: useMemo(() => ({ children }) => <DraggableSortable>...</DraggableSortable>, [deps])\n  // This creates a new function reference on each recomputation, causing React to treat it as a\n  // different component type, triggering unmount/mount cycles instead of just updating props.\n  // GOOD: Use conditional rendering directly: draggable ? <DraggableSortable /> : <div />\n  const pillElements = React.useMemo(() => {\n    return pills.map((pill, i) => {\n      return (\n        <Pill\n          alignIcon=\"left\"\n          aria-checked={pill.selected}\n          className={[`${baseClass}__pill`, pill.selected && `${baseClass}__pill--selected`]\n            .filter(Boolean)\n            .join(' ')}\n          draggable={Boolean(draggable)}\n          icon={pill.selected ? <XIcon /> : <PlusIcon />}\n          id={pill.name}\n          key={pill.key ?? `${pill.name}-${i}`}\n          onClick={() => {\n            if (onClick) {\n              void onClick({ pill })\n            }\n          }}\n          size=\"small\"\n        >\n          {pill.Label ?? <span className={`${baseClass}__pill-label`}>{pill.name}</span>}\n        </Pill>\n      )\n    })\n  }, [pills, onClick, draggable])\n\n  if (draggable) {\n    return (\n      <DraggableSortable\n        className={baseClass}\n        ids={pills.map((pill) => pill.name)}\n        onDragEnd={({ moveFromIndex, moveToIndex }) => {\n          draggable.onDragEnd({\n            moveFromIndex,\n            moveToIndex,\n          })\n        }}\n      >\n        {pillElements}\n      </DraggableSortable>\n    )\n  }\n\n  return <div className={baseClass}>{pillElements}</div>\n}\n"],"mappings":"AAAA;;;AAEA,OAAOA,KAAA,MAAW;AAElB,SAASC,QAAQ,QAAQ;AACzB,SAASC,KAAK,QAAQ;AACtB,SAASC,iBAAiB,QAAQ;AAClC,SAASC,IAAI,QAAQ;AACrB,OAAO;AAEP,MAAMC,SAAA,GAAY;AAiBlB;;;;AAIA,OAAO,MAAMC,YAAA,GAAgCA,CAAC;EAAEC,SAAS;EAAEC,OAAO;EAAEC;AAAK,CAAE;EACzE;EACA;EACA;EACA;EACA;EACA,MAAMC,YAAA,GAAeV,KAAA,CAAMW,OAAO,CAAC;IACjC,OAAOF,KAAA,CAAMG,GAAG,CAAC,CAACC,IAAA,EAAMC,CAAA;MACtB,oBACEC,IAAA,CAACX,IAAA;QACCY,SAAA,EAAU;QACV,gBAAcH,IAAA,CAAKI,QAAQ;QAC3BC,SAAA,EAAW,CAAC,GAAGb,SAAA,QAAiB,EAAEQ,IAAA,CAAKI,QAAQ,IAAI,GAAGZ,SAAA,kBAA2B,CAAC,CAC/Ec,MAAM,CAACC,OAAA,EACPC,IAAI,CAAC;QACRd,SAAA,EAAWa,OAAA,CAAQb,SAAA;QACnBe,IAAA,EAAMT,IAAA,CAAKI,QAAQ,gBAAGF,IAAA,CAACb,KAAA,qBAAWa,IAAA,CAACd,QAAA;QACnCsB,EAAA,EAAIV,IAAA,CAAKW,IAAI;QAEbhB,OAAA,EAASA,CAAA;UACP,IAAIA,OAAA,EAAS;YACX,KAAKA,OAAA,CAAQ;cAAEK;YAAK;UACtB;QACF;QACAY,IAAA,EAAK;kBAEJZ,IAAA,CAAKa,KAAK,iBAAIX,IAAA,CAAC;UAAKG,SAAA,EAAW,GAAGb,SAAA,cAAuB;oBAAGQ,IAAA,CAAKW;;SAR7DX,IAAA,CAAKc,GAAG,IAAI,GAAGd,IAAA,CAAKW,IAAI,IAAIV,CAAA,EAAG;IAW1C;EACF,GAAG,CAACL,KAAA,EAAOD,OAAA,EAASD,SAAA,CAAU;EAE9B,IAAIA,SAAA,EAAW;IACb,oBACEQ,IAAA,CAACZ,iBAAA;MACCe,SAAA,EAAWb,SAAA;MACXuB,GAAA,EAAKnB,KAAA,CAAMG,GAAG,CAAEC,MAAA,IAASA,MAAA,CAAKW,IAAI;MAClCK,SAAA,EAAWA,CAAC;QAAEC,aAAa;QAAEC;MAAW,CAAE;QACxCxB,SAAA,CAAUsB,SAAS,CAAC;UAClBC,aAAA;UACAC;QACF;MACF;gBAECrB;;EAGP;EAEA,oBAAOK,IAAA,CAAC;IAAIG,SAAA,EAAWb,SAAA;cAAYK;;AACrC","ignoreList":[]}