@ynput/ayon-frontend-shared 0.4.1 → 0.4.3

package/dist/shared/src/components/Chips/Chips.cjs.js

@@ -1,10 +1,16 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("../../../../_virtual/jsx-runtime.cjs.js"),s=require("react"),p=require("@ynput/ayon-react-components"),C=require("clsx"),a=require("styled-components"),N=a.div`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("../../../../_virtual/jsx-runtime.cjs.js"),a=require("react"),b=require("@ynput/ayon-react-components"),x=require("clsx"),u=require("styled-components"),z=u.div`
   display: flex;
   gap: var(--base-gap-small);
   align-items: center;
+  align-self: stretch;
   width: 100%;
   overflow: hidden;
-`,m=a.div`
+
+  &.multi-row {
+    flex-wrap: wrap;
+    align-content: center;
+  }
+`,y=u.div`
   background-color: var(--md-sys-color-surface-container-high);
   border-radius: var(--border-radius-m);
   padding: 2px 4px;
@@ -27,18 +33,18 @@
   &:hover {
     background-color: var(--md-sys-color-surface-container-high-hover);
   }
-`,S=a(m)`
+`,N=u(y)`
   visibility: hidden;
   position: absolute;
   top: -9999px;
   left: -9999px;
   z-index: -100;
-`,W=a(m)`
+`,A=u(y)`
   flex-shrink: 0;
   display: flex;
   justify-content: center;
   align-items: center;
-`,V=a(p.Icon)`
+`,H=u(b.Icon)`
   background-color: var(--md-sys-color-surface-container);
   border-radius: var(--border-radius-m);
   width: 24px;
@@ -51,5 +57,5 @@
   &:hover {
     background-color: var(--md-sys-color-surface-container-high-hover);
   }
-`,O=({values:t,disabled:y,pt:d})=>{const n=s.useRef(null),[x,j]=s.useState([]),[f,R]=s.useState(0),[u,w]=s.useState([]);return s.useLayoutEffect(()=>{w(t)},[t]),s.useLayoutEffect(()=>{const e=()=>{if(!n.current||u.length===0||u.length!==t.length)return;const g=n.current.offsetWidth,h=Array.from(n.current.querySelectorAll(".offscreen-chip")),v=n.current.querySelector(".more-chip");if(!h.length)return;let l=0;const i=[],E=v?.getBoundingClientRect().width||60;if(t.length>0){const o=h[0].getBoundingClientRect().width;i.push(t[0]),l+=o}for(let o=1;o<t.length;o++){const b=h[o].getBoundingClientRect().width;if(l+b<=g)l+=b,i.push(t[o]);else{if(l+E<=g)break;if(i.length>1){const q=h[i.length-1].getBoundingClientRect().width;l-=q,i.pop()}break}}const k=t.length-i.length;j(i),R(k)},r=new ResizeObserver(e);return n.current&&r.observe(n.current),e(),()=>{n.current&&r.unobserve(n.current)}},[t,u]),y?null:t.length?c.jsxRuntimeExports.jsxs(N,{ref:n,children:[x.map((e,r)=>s.createElement(m,{...d?.chip,key:e.label+r,"data-tooltip":e.tooltip,className:C("chip",{last:r===x.length-1&&f>0},d?.chip?.className)},e.prefix,e?.icon&&c.jsxRuntimeExports.jsx(p.Icon,{icon:e.icon}),e.label,e.suffix)),f>0&&c.jsxRuntimeExports.jsxs(W,{className:C("more-chip",d?.chip?.className),children:["+",f]}),u.map((e,r)=>c.jsxRuntimeExports.jsxs(S,{className:"offscreen-chip",children:[e.prefix,e?.icon&&c.jsxRuntimeExports.jsx(p.Icon,{icon:e.icon}),e.label,e.suffix]},e.label+r))]}):c.jsxRuntimeExports.jsx(V,{icon:"add",className:d?.chip?.className})};exports.Chips=O;
+`,W=({values:t,disabled:k,pt:d})=>{const w=a.useRef(null),[{visibleCount:C,rows:q},S]=a.useState({visibleCount:0,rows:1}),[c,O]=a.useState([]);if(a.useLayoutEffect(()=>{O(t)},[t]),a.useLayoutEffect(()=>{const e=w.current;if(!e||c.length===0||c.length!==t.length)return;const o=Array.from(e.querySelectorAll(".offscreen-chip"));if(o.length!==t.length)return;const f=parseFloat(getComputedStyle(e).rowGap)||0,B=o.map(l=>l.getBoundingClientRect().width),j=o[0].getBoundingClientRect().height,I=e.querySelector(".offscreen-more-chip")?.getBoundingClientRect().width||60,L=(l,p,h)=>{let n=1,r=0;const E=(s,M)=>{M?r=s:r+f+s<=h?r+=f+s:(n++,r=s)};for(let s=0;s<l;s++)E(B[s],s===0);return p&&E(p,l===0),n},R=()=>{const l=e.getBoundingClientRect().width,p=e.offsetHeight,h=j?Math.max(1,Math.floor((p+f)/(j+f))):1;let n=t.length;for(;n>1&&L(n,n<t.length?I:0,l)>h;)n--;S(r=>r.visibleCount===n&&r.rows===h?r:{visibleCount:n,rows:h})},v=new ResizeObserver(R);return v.observe(e),R(),()=>v.disconnect()},[t,c]),k)return null;if(!t.length)return i.jsxRuntimeExports.jsx(H,{icon:"add",className:d?.chip?.className});const g=t.slice(0,C),m=C?t.length-g.length:0;return i.jsxRuntimeExports.jsxs(z,{ref:w,className:x({"multi-row":q>1}),children:[g.map((e,o)=>a.createElement(y,{...d?.chip,key:e.label+o,"data-tooltip":e.tooltip,className:x("chip",{last:o===g.length-1&&m>0},d?.chip?.className)},e.prefix,e?.icon&&i.jsxRuntimeExports.jsx(b.Icon,{icon:e.icon}),e.label,e.suffix)),m>0&&i.jsxRuntimeExports.jsxs(A,{className:x("more-chip",d?.chip?.className),children:["+",m]}),c.map((e,o)=>i.jsxRuntimeExports.jsxs(N,{className:"offscreen-chip",children:[e.prefix,e?.icon&&i.jsxRuntimeExports.jsx(b.Icon,{icon:e.icon}),e.label,e.suffix]},e.label+o)),c.length>1&&i.jsxRuntimeExports.jsxs(N,{className:"offscreen-more-chip",children:["+",c.length-1]})]})};exports.Chips=W;
 //# sourceMappingURL=Chips.cjs.js.map

package/dist/shared/src/components/Chips/Chips.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Chips.cjs.js","sources":["../../../../../src/components/Chips/Chips.tsx"],"sourcesContent":["import { Icon } from '@ynput/ayon-react-components'\nimport clsx from 'clsx'\nimport React, { FC, useRef, useState, useLayoutEffect, HTMLAttributes } from 'react'\nimport styled from 'styled-components'\n\nconst ChipsContainer = styled.div`\n  display: flex;\n  gap: var(--base-gap-small);\n  align-items: center;\n  width: 100%;\n  overflow: hidden;\n`\n\nconst Chip = styled.div`\n  background-color: var(--md-sys-color-surface-container-high);\n  border-radius: var(--border-radius-m);\n  padding: 2px 4px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  cursor: pointer;\n\n  display: flex;\n  align-items: center;\n  gap: 4px;\n\n  flex-shrink: 0;\n  min-width: auto;\n  &.last {\n    flex-shrink: 1;\n    min-width: 0;\n  }\n\n  &:hover {\n    background-color: var(--md-sys-color-surface-container-high-hover);\n  }\n`\n\nconst OffscreenChip = styled(Chip)`\n  visibility: hidden;\n  position: absolute;\n  top: -9999px;\n  left: -9999px;\n  z-index: -100;\n`\n\nconst MoreChip = styled(Chip)`\n  flex-shrink: 0;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n`\n\nconst AddIcon = styled(Icon)`\n  background-color: var(--md-sys-color-surface-container);\n  border-radius: var(--border-radius-m);\n  width: 24px;\n  height: 24px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n\n  &:hover {\n    background-color: var(--md-sys-color-surface-container-high-hover);\n  }\n`\n\nexport type ChipValue = {\n  label: string\n  tooltip: string\n  icon?: string\n  prefix?: React.ReactNode\n  suffix?: React.ReactNode\n}\n\ninterface ChipsProps {\n  values: ChipValue[]\n  disabled?: boolean\n  pt?: {\n    chip?: Partial<HTMLAttributes<HTMLDivElement>>\n  }\n}\n\nexport const Chips: FC<ChipsProps> = ({ values, disabled, pt }) => {\n  const containerRef = useRef<HTMLDivElement>(null)\n  const [visibleValues, setVisibleValues] = useState<ChipValue[]>([])\n  const [hiddenCount, setHiddenCount] = useState(0)\n  const [offscreenChips, setOffscreenChips] = useState<ChipValue[]>([])\n\n  useLayoutEffect(() => {\n    setOffscreenChips(values)\n  }, [values])\n\n  useLayoutEffect(() => {\n    const calculateVisibleChips = () => {\n      if (\n        !containerRef.current ||\n        offscreenChips.length === 0 ||\n        offscreenChips.length !== values.length\n      )\n        return\n\n      const containerWidth = containerRef.current.offsetWidth\n      const chipElements = Array.from(containerRef.current.querySelectorAll('.offscreen-chip'))\n      const moreChipElement = containerRef.current.querySelector('.more-chip')\n\n      if (!chipElements.length) return\n\n      let totalWidth = 0\n      const newVisibleValues: ChipValue[] = []\n\n      const moreChipWidth = moreChipElement?.getBoundingClientRect().width || 60\n\n      // Always show the first chip\n      if (values.length > 0) {\n        const firstChipWidth = chipElements[0].getBoundingClientRect().width\n        newVisibleValues.push(values[0])\n        totalWidth += firstChipWidth\n      }\n\n      // Add additional chips if they fit\n      for (let i = 1; i < values.length; i++) {\n        const chipWidth = chipElements[i].getBoundingClientRect().width\n\n        // Check if the next chip can fit completely\n        if (totalWidth + chipWidth <= containerWidth) {\n          totalWidth += chipWidth\n          newVisibleValues.push(values[i])\n        } else {\n          // Check if there's room for the more chip\n          if (totalWidth + moreChipWidth <= containerWidth) {\n            // Keep current visible chips and show more chip\n            break\n          } else {\n            // Remove the last chip if we need room for the more chip\n            if (newVisibleValues.length > 1) {\n              const lastChipWidth =\n                chipElements[newVisibleValues.length - 1].getBoundingClientRect().width\n              totalWidth -= lastChipWidth\n              newVisibleValues.pop()\n            }\n            break\n          }\n        }\n      }\n\n      const finalHiddenCount = values.length - newVisibleValues.length\n      setVisibleValues(newVisibleValues)\n      setHiddenCount(finalHiddenCount)\n    }\n\n    const resizeObserver = new ResizeObserver(calculateVisibleChips)\n    if (containerRef.current) {\n      resizeObserver.observe(containerRef.current)\n    }\n\n    // Initial calculation\n    calculateVisibleChips()\n\n    return () => {\n      if (containerRef.current) {\n        resizeObserver.unobserve(containerRef.current)\n      }\n    }\n  }, [values, offscreenChips])\n\n  if (disabled) return null\n\n  // for no values return plus button\n  if (!values.length) {\n    return <AddIcon icon=\"add\" className={pt?.chip?.className} />\n  }\n\n  return (\n    <ChipsContainer ref={containerRef}>\n      {visibleValues.map((chip, index) => (\n        <Chip\n          {...pt?.chip}\n          key={chip.label + index}\n          data-tooltip={chip.tooltip}\n          className={clsx(\n            'chip',\n            { last: index === visibleValues.length - 1 && hiddenCount > 0 },\n            pt?.chip?.className,\n          )}\n        >\n          {chip.prefix}\n          {chip?.icon && <Icon icon={chip.icon} />}\n          {chip.label}\n          {chip.suffix}\n        </Chip>\n      ))}\n      {hiddenCount > 0 && (\n        <MoreChip className={clsx('more-chip', pt?.chip?.className)}>+{hiddenCount}</MoreChip>\n      )}\n      {offscreenChips.map((chip, index) => (\n        <OffscreenChip key={chip.label + index} className=\"offscreen-chip\">\n          {chip.prefix}\n          {chip?.icon && <Icon icon={chip.icon} />}\n          {chip.label}\n          {chip.suffix}\n        </OffscreenChip>\n      ))}\n    </ChipsContainer>\n  )\n}\n"],"names":["ChipsContainer","styled","Chip","OffscreenChip","MoreChip","AddIcon","Icon","Chips","values","disabled","pt","containerRef","useRef","visibleValues","setVisibleValues","useState","hiddenCount","setHiddenCount","offscreenChips","setOffscreenChips","useLayoutEffect","calculateVisibleChips","containerWidth","chipElements","moreChipElement","totalWidth","newVisibleValues","moreChipWidth","firstChipWidth","i","chipWidth","lastChipWidth","finalHiddenCount","resizeObserver","jsxs","chip","index","createElement","clsx","jsx"],"mappings":"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"}
+{"version":3,"file":"Chips.cjs.js","sources":["../../../../../src/components/Chips/Chips.tsx"],"sourcesContent":["import { Icon } from '@ynput/ayon-react-components'\nimport clsx from 'clsx'\nimport React, { FC, useRef, useState, useLayoutEffect, HTMLAttributes } from 'react'\nimport styled from 'styled-components'\n\nconst ChipsContainer = styled.div`\n  display: flex;\n  gap: var(--base-gap-small);\n  align-items: center;\n  align-self: stretch;\n  width: 100%;\n  overflow: hidden;\n\n  &.multi-row {\n    flex-wrap: wrap;\n    align-content: center;\n  }\n`\n\nconst Chip = styled.div`\n  background-color: var(--md-sys-color-surface-container-high);\n  border-radius: var(--border-radius-m);\n  padding: 2px 4px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  cursor: pointer;\n\n  display: flex;\n  align-items: center;\n  gap: 4px;\n\n  flex-shrink: 0;\n  min-width: auto;\n  &.last {\n    flex-shrink: 1;\n    min-width: 0;\n  }\n\n  &:hover {\n    background-color: var(--md-sys-color-surface-container-high-hover);\n  }\n`\n\nconst OffscreenChip = styled(Chip)`\n  visibility: hidden;\n  position: absolute;\n  top: -9999px;\n  left: -9999px;\n  z-index: -100;\n`\n\nconst MoreChip = styled(Chip)`\n  flex-shrink: 0;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n`\n\nconst AddIcon = styled(Icon)`\n  background-color: var(--md-sys-color-surface-container);\n  border-radius: var(--border-radius-m);\n  width: 24px;\n  height: 24px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n\n  &:hover {\n    background-color: var(--md-sys-color-surface-container-high-hover);\n  }\n`\n\nexport type ChipValue = {\n  label: string\n  tooltip: string\n  icon?: string\n  prefix?: React.ReactNode\n  suffix?: React.ReactNode\n}\n\ninterface ChipsProps {\n  values: ChipValue[]\n  disabled?: boolean\n  pt?: {\n    chip?: Partial<HTMLAttributes<HTMLDivElement>>\n  }\n}\n\ntype ChipsLayout = {\n  visibleCount: number\n  rows: number\n}\n\nexport const Chips: FC<ChipsProps> = ({ values, disabled, pt }) => {\n  const containerRef = useRef<HTMLDivElement>(null)\n  const [{ visibleCount, rows }, setLayout] = useState<ChipsLayout>({\n    visibleCount: 0,\n    rows: 1,\n  })\n  const [offscreenChips, setOffscreenChips] = useState<ChipValue[]>([])\n\n  useLayoutEffect(() => {\n    setOffscreenChips(values)\n  }, [values])\n\n  useLayoutEffect(() => {\n    const container = containerRef.current\n    if (!container || offscreenChips.length === 0 || offscreenChips.length !== values.length) return\n\n    const chipElements = Array.from(container.querySelectorAll('.offscreen-chip'))\n    if (chipElements.length !== values.length) return\n\n    const gap = parseFloat(getComputedStyle(container).rowGap) || 0\n    const chipWidths = chipElements.map((el) => el.getBoundingClientRect().width)\n    const chipHeight = chipElements[0].getBoundingClientRect().height\n    // measured offscreen at its widest label, so it does not depend on the +N chip being rendered\n    const moreChipWidth =\n      container.querySelector('.offscreen-more-chip')?.getBoundingClientRect().width || 60\n\n    const rowsNeeded = (count: number, extraWidth: number, containerWidth: number) => {\n      let used = 1\n      let rowWidth = 0\n      const place = (width: number, isFirst: boolean) => {\n        if (isFirst) rowWidth = width\n        else if (rowWidth + gap + width <= containerWidth) rowWidth += gap + width\n        else {\n          used++\n          rowWidth = width\n        }\n      }\n\n      for (let i = 0; i < count; i++) place(chipWidths[i], i === 0)\n      if (extraWidth) place(extraWidth, count === 0)\n      return used\n    }\n\n    const calculateLayout = () => {\n      const containerWidth = container.getBoundingClientRect().width\n      const containerHeight = container.offsetHeight\n      const rows = chipHeight\n        ? Math.max(1, Math.floor((containerHeight + gap) / (chipHeight + gap)))\n        : 1\n\n      // drop chips until they and the more chip fit the rows available\n      let visibleCount = values.length\n      while (\n        visibleCount > 1 &&\n        rowsNeeded(visibleCount, visibleCount < values.length ? moreChipWidth : 0, containerWidth) >\n          rows\n      ) {\n        visibleCount--\n      }\n\n      setLayout((prev) =>\n        prev.visibleCount === visibleCount && prev.rows === rows ? prev : { visibleCount, rows },\n      )\n    }\n\n    const resizeObserver = new ResizeObserver(calculateLayout)\n    resizeObserver.observe(container)\n\n    // Initial calculation\n    calculateLayout()\n\n    return () => resizeObserver.disconnect()\n  }, [values, offscreenChips])\n\n  if (disabled) return null\n\n  // for no values return plus button\n  if (!values.length) {\n    return <AddIcon icon=\"add\" className={pt?.chip?.className} />\n  }\n\n  const visibleValues = values.slice(0, visibleCount)\n  const hiddenCount = visibleCount ? values.length - visibleValues.length : 0\n\n  return (\n    <ChipsContainer ref={containerRef} className={clsx({ 'multi-row': rows > 1 })}>\n      {visibleValues.map((chip, index) => (\n        <Chip\n          {...pt?.chip}\n          key={chip.label + index}\n          data-tooltip={chip.tooltip}\n          className={clsx(\n            'chip',\n            { last: index === visibleValues.length - 1 && hiddenCount > 0 },\n            pt?.chip?.className,\n          )}\n        >\n          {chip.prefix}\n          {chip?.icon && <Icon icon={chip.icon} />}\n          {chip.label}\n          {chip.suffix}\n        </Chip>\n      ))}\n      {hiddenCount > 0 && (\n        <MoreChip className={clsx('more-chip', pt?.chip?.className)}>+{hiddenCount}</MoreChip>\n      )}\n      {offscreenChips.map((chip, index) => (\n        <OffscreenChip key={chip.label + index} className=\"offscreen-chip\">\n          {chip.prefix}\n          {chip?.icon && <Icon icon={chip.icon} />}\n          {chip.label}\n          {chip.suffix}\n        </OffscreenChip>\n      ))}\n      {offscreenChips.length > 1 && (\n        <OffscreenChip className=\"offscreen-more-chip\">+{offscreenChips.length - 1}</OffscreenChip>\n      )}\n    </ChipsContainer>\n  )\n}\n"],"names":["ChipsContainer","styled","Chip","OffscreenChip","MoreChip","AddIcon","Icon","Chips","values","disabled","pt","containerRef","useRef","visibleCount","rows","setLayout","useState","offscreenChips","setOffscreenChips","useLayoutEffect","container","chipElements","gap","chipWidths","el","chipHeight","moreChipWidth","rowsNeeded","count","extraWidth","containerWidth","used","rowWidth","place","width","isFirst","i","calculateLayout","containerHeight","prev","resizeObserver","visibleValues","hiddenCount","jsxs","clsx","chip","index","createElement","jsx"],"mappings":"yPAKMA,EAAiBC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAcxBC,EAAOD,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAyBdE,EAAgBF,EAAOC,CAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQ3BE,EAAWH,EAAOC,CAAI;AAAA;AAAA;AAAA;AAAA;AAAA,EAOtBG,EAAUJ,EAAOK,MAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAoCdC,EAAwB,CAAC,CAAE,OAAAC,EAAQ,SAAAC,EAAU,GAAAC,KAAS,CACjE,MAAMC,EAAeC,EAAAA,OAAuB,IAAI,EAC1C,CAAC,CAAE,aAAAC,EAAc,KAAAC,GAAQC,CAAS,EAAIC,EAAAA,SAAsB,CAChE,aAAc,EACd,KAAM,CAAA,CACP,EACK,CAACC,EAAgBC,CAAiB,EAAIF,EAAAA,SAAsB,CAAA,CAAE,EAoEpE,GAlEAG,EAAAA,gBAAgB,IAAM,CACpBD,EAAkBV,CAAM,CAC1B,EAAG,CAACA,CAAM,CAAC,EAEXW,EAAAA,gBAAgB,IAAM,CACpB,MAAMC,EAAYT,EAAa,QAC/B,GAAI,CAACS,GAAaH,EAAe,SAAW,GAAKA,EAAe,SAAWT,EAAO,OAAQ,OAE1F,MAAMa,EAAe,MAAM,KAAKD,EAAU,iBAAiB,iBAAiB,CAAC,EAC7E,GAAIC,EAAa,SAAWb,EAAO,OAAQ,OAE3C,MAAMc,EAAM,WAAW,iBAAiBF,CAAS,EAAE,MAAM,GAAK,EACxDG,EAAaF,EAAa,IAAKG,GAAOA,EAAG,sBAAA,EAAwB,KAAK,EACtEC,EAAaJ,EAAa,CAAC,EAAE,wBAAwB,OAErDK,EACJN,EAAU,cAAc,sBAAsB,GAAG,sBAAA,EAAwB,OAAS,GAE9EO,EAAa,CAACC,EAAeC,EAAoBC,IAA2B,CAChF,IAAIC,EAAO,EACPC,EAAW,EACf,MAAMC,EAAQ,CAACC,EAAeC,IAAqB,CAC7CA,EAASH,EAAWE,EACfF,EAAWV,EAAMY,GAASJ,KAA4BR,EAAMY,GAEnEH,IACAC,EAAWE,EAEf,EAEA,QAASE,EAAI,EAAGA,EAAIR,EAAOQ,MAAWb,EAAWa,CAAC,EAAGA,IAAM,CAAC,EAC5D,OAAIP,GAAYI,EAAMJ,EAAYD,IAAU,CAAC,EACtCG,CACT,EAEMM,EAAkB,IAAM,CAC5B,MAAMP,EAAiBV,EAAU,sBAAA,EAAwB,MACnDkB,EAAkBlB,EAAU,aAC5BN,EAAOW,EACT,KAAK,IAAI,EAAG,KAAK,OAAOa,EAAkBhB,IAAQG,EAAaH,EAAI,CAAC,EACpE,EAGJ,IAAIT,EAAeL,EAAO,OAC1B,KACEK,EAAe,GACfc,EAAWd,EAAcA,EAAeL,EAAO,OAASkB,EAAgB,EAAGI,CAAc,EACvFhB,GAEFD,IAGFE,EAAWwB,GACTA,EAAK,eAAiB1B,GAAgB0B,EAAK,OAASzB,EAAOyB,EAAO,CAAE,aAAA1B,EAAc,KAAAC,CAAAA,CAAK,CAE3F,EAEM0B,EAAiB,IAAI,eAAeH,CAAe,EACzD,OAAAG,EAAe,QAAQpB,CAAS,EAGhCiB,EAAA,EAEO,IAAMG,EAAe,WAAA,CAC9B,EAAG,CAAChC,EAAQS,CAAc,CAAC,EAEvBR,EAAU,OAAO,KAGrB,GAAI,CAACD,EAAO,OACV,+BAAQH,EAAA,CAAQ,KAAK,MAAM,UAAWK,GAAI,MAAM,UAAW,EAG7D,MAAM+B,EAAgBjC,EAAO,MAAM,EAAGK,CAAY,EAC5C6B,EAAc7B,EAAeL,EAAO,OAASiC,EAAc,OAAS,EAE1E,OACEE,EAAAA,kBAAAA,KAAC3C,EAAA,CAAe,IAAKW,EAAc,UAAWiC,EAAK,CAAE,YAAa9B,EAAO,CAAA,CAAG,EACzE,SAAA,CAAA2B,EAAc,IAAI,CAACI,EAAMC,IACxBC,EAAAA,cAAC7C,EAAA,CACE,GAAGQ,GAAI,KACR,IAAKmC,EAAK,MAAQC,EAClB,eAAcD,EAAK,QACnB,UAAWD,EACT,OACA,CAAE,KAAME,IAAUL,EAAc,OAAS,GAAKC,EAAc,CAAA,EAC5DhC,GAAI,MAAM,SAAA,CACZ,EAECmC,EAAK,OACLA,GAAM,MAAQG,wBAAC1C,EAAAA,KAAA,CAAK,KAAMuC,EAAK,KAAM,EACrCA,EAAK,MACLA,EAAK,MAAA,CAET,EACAH,EAAc,GACbC,yBAACvC,EAAA,CAAS,UAAWwC,EAAK,YAAalC,GAAI,MAAM,SAAS,EAAG,SAAA,CAAA,IAAEgC,CAAA,EAAY,EAE5EzB,EAAe,IAAI,CAAC4B,EAAMC,IACzBH,yBAACxC,EAAA,CAAuC,UAAU,iBAC/C,SAAA,CAAA0C,EAAK,OACLA,GAAM,MAAQG,wBAAC1C,EAAAA,KAAA,CAAK,KAAMuC,EAAK,KAAM,EACrCA,EAAK,MACLA,EAAK,MAAA,CAAA,EAJYA,EAAK,MAAQC,CAKjC,CACD,EACA7B,EAAe,OAAS,GACvB0B,EAAAA,kBAAAA,KAACxC,EAAA,CAAc,UAAU,sBAAsB,SAAA,CAAA,IAAEc,EAAe,OAAS,CAAA,CAAA,CAAE,CAAA,EAE/E,CAEJ"}

package/dist/shared/src/components/Chips/Chips.es.js

@@ -1,15 +1,21 @@
-import { j as s } from "../../../../_virtual/jsx-runtime.es.js";
-import { useRef as E, useState as p, useLayoutEffect as C, createElement as B } from "react";
-import { Icon as u } from "@ynput/ayon-react-components";
-import y from "clsx";
-import l from "styled-components";
-const O = l.div`
+import { j as i } from "../../../../_virtual/jsx-runtime.es.js";
+import { useRef as W, useState as k, useLayoutEffect as R, createElement as q } from "react";
+import { Icon as x } from "@ynput/ayon-react-components";
+import u from "clsx";
+import h from "styled-components";
+const I = h.div`
   display: flex;
   gap: var(--base-gap-small);
   align-items: center;
+  align-self: stretch;
   width: 100%;
   overflow: hidden;
-`, m = l.div`
+
+  &.multi-row {
+    flex-wrap: wrap;
+    align-content: center;
+  }
+`, b = h.div`
   background-color: var(--md-sys-color-surface-container-high);
   border-radius: var(--border-radius-m);
   padding: 2px 4px;
@@ -32,18 +38,18 @@ const O = l.div`
   &:hover {
     background-color: var(--md-sys-color-surface-container-high-hover);
   }
-`, z = l(m)`
+`, B = h(b)`
   visibility: hidden;
   position: absolute;
   top: -9999px;
   left: -9999px;
   z-index: -100;
-`, A = l(m)`
+`, F = h(b)`
   flex-shrink: 0;
   display: flex;
   justify-content: center;
   align-items: center;
-`, S = l(u)`
+`, G = h(x)`
   background-color: var(--md-sys-color-surface-container);
   border-radius: var(--border-radius-m);
   width: 24px;
@@ -56,73 +62,74 @@ const O = l.div`
   &:hover {
     background-color: var(--md-sys-color-surface-container-high-hover);
   }
-`, D = ({ values: t, disabled: w, pt: a }) => {
-  const r = E(null), [g, v] = p([]), [f, j] = p(0), [d, k] = p([]);
-  return C(() => {
-    k(t);
-  }, [t]), C(() => {
-    const e = () => {
-      if (!r.current || d.length === 0 || d.length !== t.length)
-        return;
-      const x = r.current.offsetWidth, h = Array.from(r.current.querySelectorAll(".offscreen-chip")), R = r.current.querySelector(".more-chip");
-      if (!h.length) return;
-      let c = 0;
-      const i = [], N = R?.getBoundingClientRect().width || 60;
-      if (t.length > 0) {
-        const o = h[0].getBoundingClientRect().width;
-        i.push(t[0]), c += o;
-      }
-      for (let o = 1; o < t.length; o++) {
-        const b = h[o].getBoundingClientRect().width;
-        if (c + b <= x)
-          c += b, i.push(t[o]);
-        else {
-          if (c + N <= x)
-            break;
-          if (i.length > 1) {
-            const V = h[i.length - 1].getBoundingClientRect().width;
-            c -= V, i.pop();
-          }
-          break;
-        }
-      }
-      const W = t.length - i.length;
-      v(i), j(W);
-    }, n = new ResizeObserver(e);
-    return r.current && n.observe(r.current), e(), () => {
-      r.current && n.unobserve(r.current);
-    };
-  }, [t, d]), w ? null : t.length ? /* @__PURE__ */ s.jsxs(O, { ref: r, children: [
-    g.map((e, n) => /* @__PURE__ */ B(
-      m,
+`, Q = ({ values: t, disabled: E, pt: f }) => {
+  const w = W(null), [{ visibleCount: y, rows: O }, S] = k({
+    visibleCount: 0,
+    rows: 1
+  }), [c, z] = k([]);
+  if (R(() => {
+    z(t);
+  }, [t]), R(() => {
+    const e = w.current;
+    if (!e || c.length === 0 || c.length !== t.length) return;
+    const r = Array.from(e.querySelectorAll(".offscreen-chip"));
+    if (r.length !== t.length) return;
+    const d = parseFloat(getComputedStyle(e).rowGap) || 0, A = r.map((l) => l.getBoundingClientRect().width), C = r[0].getBoundingClientRect().height, H = e.querySelector(".offscreen-more-chip")?.getBoundingClientRect().width || 60, L = (l, p, a) => {
+      let o = 1, s = 0;
+      const N = (n, M) => {
+        M ? s = n : s + d + n <= a ? s += d + n : (o++, s = n);
+      };
+      for (let n = 0; n < l; n++) N(A[n], n === 0);
+      return p && N(p, l === 0), o;
+    }, v = () => {
+      const l = e.getBoundingClientRect().width, p = e.offsetHeight, a = C ? Math.max(1, Math.floor((p + d) / (C + d))) : 1;
+      let o = t.length;
+      for (; o > 1 && L(o, o < t.length ? H : 0, l) > a; )
+        o--;
+      S(
+        (s) => s.visibleCount === o && s.rows === a ? s : { visibleCount: o, rows: a }
+      );
+    }, j = new ResizeObserver(v);
+    return j.observe(e), v(), () => j.disconnect();
+  }, [t, c]), E) return null;
+  if (!t.length)
+    return /* @__PURE__ */ i.jsx(G, { icon: "add", className: f?.chip?.className });
+  const m = t.slice(0, y), g = y ? t.length - m.length : 0;
+  return /* @__PURE__ */ i.jsxs(I, { ref: w, className: u({ "multi-row": O > 1 }), children: [
+    m.map((e, r) => /* @__PURE__ */ q(
+      b,
       {
-        ...a?.chip,
-        key: e.label + n,
+        ...f?.chip,
+        key: e.label + r,
         "data-tooltip": e.tooltip,
-        className: y(
+        className: u(
           "chip",
-          { last: n === g.length - 1 && f > 0 },
-          a?.chip?.className
+          { last: r === m.length - 1 && g > 0 },
+          f?.chip?.className
         )
       },
       e.prefix,
-      e?.icon && /* @__PURE__ */ s.jsx(u, { icon: e.icon }),
+      e?.icon && /* @__PURE__ */ i.jsx(x, { icon: e.icon }),
       e.label,
       e.suffix
     )),
-    f > 0 && /* @__PURE__ */ s.jsxs(A, { className: y("more-chip", a?.chip?.className), children: [
+    g > 0 && /* @__PURE__ */ i.jsxs(F, { className: u("more-chip", f?.chip?.className), children: [
       "+",
-      f
+      g
     ] }),
-    d.map((e, n) => /* @__PURE__ */ s.jsxs(z, { className: "offscreen-chip", children: [
+    c.map((e, r) => /* @__PURE__ */ i.jsxs(B, { className: "offscreen-chip", children: [
       e.prefix,
-      e?.icon && /* @__PURE__ */ s.jsx(u, { icon: e.icon }),
+      e?.icon && /* @__PURE__ */ i.jsx(x, { icon: e.icon }),
       e.label,
       e.suffix
-    ] }, e.label + n))
-  ] }) : /* @__PURE__ */ s.jsx(S, { icon: "add", className: a?.chip?.className });
+    ] }, e.label + r)),
+    c.length > 1 && /* @__PURE__ */ i.jsxs(B, { className: "offscreen-more-chip", children: [
+      "+",
+      c.length - 1
+    ] })
+  ] });
 };
 export {
-  D as Chips
+  Q as Chips
 };
 //# sourceMappingURL=Chips.es.js.map

package/dist/shared/src/components/Chips/Chips.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"Chips.es.js","sources":["../../../../../src/components/Chips/Chips.tsx"],"sourcesContent":["import { Icon } from '@ynput/ayon-react-components'\nimport clsx from 'clsx'\nimport React, { FC, useRef, useState, useLayoutEffect, HTMLAttributes } from 'react'\nimport styled from 'styled-components'\n\nconst ChipsContainer = styled.div`\n  display: flex;\n  gap: var(--base-gap-small);\n  align-items: center;\n  width: 100%;\n  overflow: hidden;\n`\n\nconst Chip = styled.div`\n  background-color: var(--md-sys-color-surface-container-high);\n  border-radius: var(--border-radius-m);\n  padding: 2px 4px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  cursor: pointer;\n\n  display: flex;\n  align-items: center;\n  gap: 4px;\n\n  flex-shrink: 0;\n  min-width: auto;\n  &.last {\n    flex-shrink: 1;\n    min-width: 0;\n  }\n\n  &:hover {\n    background-color: var(--md-sys-color-surface-container-high-hover);\n  }\n`\n\nconst OffscreenChip = styled(Chip)`\n  visibility: hidden;\n  position: absolute;\n  top: -9999px;\n  left: -9999px;\n  z-index: -100;\n`\n\nconst MoreChip = styled(Chip)`\n  flex-shrink: 0;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n`\n\nconst AddIcon = styled(Icon)`\n  background-color: var(--md-sys-color-surface-container);\n  border-radius: var(--border-radius-m);\n  width: 24px;\n  height: 24px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n\n  &:hover {\n    background-color: var(--md-sys-color-surface-container-high-hover);\n  }\n`\n\nexport type ChipValue = {\n  label: string\n  tooltip: string\n  icon?: string\n  prefix?: React.ReactNode\n  suffix?: React.ReactNode\n}\n\ninterface ChipsProps {\n  values: ChipValue[]\n  disabled?: boolean\n  pt?: {\n    chip?: Partial<HTMLAttributes<HTMLDivElement>>\n  }\n}\n\nexport const Chips: FC<ChipsProps> = ({ values, disabled, pt }) => {\n  const containerRef = useRef<HTMLDivElement>(null)\n  const [visibleValues, setVisibleValues] = useState<ChipValue[]>([])\n  const [hiddenCount, setHiddenCount] = useState(0)\n  const [offscreenChips, setOffscreenChips] = useState<ChipValue[]>([])\n\n  useLayoutEffect(() => {\n    setOffscreenChips(values)\n  }, [values])\n\n  useLayoutEffect(() => {\n    const calculateVisibleChips = () => {\n      if (\n        !containerRef.current ||\n        offscreenChips.length === 0 ||\n        offscreenChips.length !== values.length\n      )\n        return\n\n      const containerWidth = containerRef.current.offsetWidth\n      const chipElements = Array.from(containerRef.current.querySelectorAll('.offscreen-chip'))\n      const moreChipElement = containerRef.current.querySelector('.more-chip')\n\n      if (!chipElements.length) return\n\n      let totalWidth = 0\n      const newVisibleValues: ChipValue[] = []\n\n      const moreChipWidth = moreChipElement?.getBoundingClientRect().width || 60\n\n      // Always show the first chip\n      if (values.length > 0) {\n        const firstChipWidth = chipElements[0].getBoundingClientRect().width\n        newVisibleValues.push(values[0])\n        totalWidth += firstChipWidth\n      }\n\n      // Add additional chips if they fit\n      for (let i = 1; i < values.length; i++) {\n        const chipWidth = chipElements[i].getBoundingClientRect().width\n\n        // Check if the next chip can fit completely\n        if (totalWidth + chipWidth <= containerWidth) {\n          totalWidth += chipWidth\n          newVisibleValues.push(values[i])\n        } else {\n          // Check if there's room for the more chip\n          if (totalWidth + moreChipWidth <= containerWidth) {\n            // Keep current visible chips and show more chip\n            break\n          } else {\n            // Remove the last chip if we need room for the more chip\n            if (newVisibleValues.length > 1) {\n              const lastChipWidth =\n                chipElements[newVisibleValues.length - 1].getBoundingClientRect().width\n              totalWidth -= lastChipWidth\n              newVisibleValues.pop()\n            }\n            break\n          }\n        }\n      }\n\n      const finalHiddenCount = values.length - newVisibleValues.length\n      setVisibleValues(newVisibleValues)\n      setHiddenCount(finalHiddenCount)\n    }\n\n    const resizeObserver = new ResizeObserver(calculateVisibleChips)\n    if (containerRef.current) {\n      resizeObserver.observe(containerRef.current)\n    }\n\n    // Initial calculation\n    calculateVisibleChips()\n\n    return () => {\n      if (containerRef.current) {\n        resizeObserver.unobserve(containerRef.current)\n      }\n    }\n  }, [values, offscreenChips])\n\n  if (disabled) return null\n\n  // for no values return plus button\n  if (!values.length) {\n    return <AddIcon icon=\"add\" className={pt?.chip?.className} />\n  }\n\n  return (\n    <ChipsContainer ref={containerRef}>\n      {visibleValues.map((chip, index) => (\n        <Chip\n          {...pt?.chip}\n          key={chip.label + index}\n          data-tooltip={chip.tooltip}\n          className={clsx(\n            'chip',\n            { last: index === visibleValues.length - 1 && hiddenCount > 0 },\n            pt?.chip?.className,\n          )}\n        >\n          {chip.prefix}\n          {chip?.icon && <Icon icon={chip.icon} />}\n          {chip.label}\n          {chip.suffix}\n        </Chip>\n      ))}\n      {hiddenCount > 0 && (\n        <MoreChip className={clsx('more-chip', pt?.chip?.className)}>+{hiddenCount}</MoreChip>\n      )}\n      {offscreenChips.map((chip, index) => (\n        <OffscreenChip key={chip.label + index} className=\"offscreen-chip\">\n          {chip.prefix}\n          {chip?.icon && <Icon icon={chip.icon} />}\n          {chip.label}\n          {chip.suffix}\n        </OffscreenChip>\n      ))}\n    </ChipsContainer>\n  )\n}\n"],"names":["ChipsContainer","styled","Chip","OffscreenChip","MoreChip","AddIcon","Icon","Chips","values","disabled","pt","containerRef","useRef","visibleValues","setVisibleValues","useState","hiddenCount","setHiddenCount","offscreenChips","setOffscreenChips","useLayoutEffect","calculateVisibleChips","containerWidth","chipElements","moreChipElement","totalWidth","newVisibleValues","moreChipWidth","firstChipWidth","i","chipWidth","lastChipWidth","finalHiddenCount","resizeObserver","jsxs","chip","index","createElement","clsx","jsx"],"mappings":"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"}
+{"version":3,"file":"Chips.es.js","sources":["../../../../../src/components/Chips/Chips.tsx"],"sourcesContent":["import { Icon } from '@ynput/ayon-react-components'\nimport clsx from 'clsx'\nimport React, { FC, useRef, useState, useLayoutEffect, HTMLAttributes } from 'react'\nimport styled from 'styled-components'\n\nconst ChipsContainer = styled.div`\n  display: flex;\n  gap: var(--base-gap-small);\n  align-items: center;\n  align-self: stretch;\n  width: 100%;\n  overflow: hidden;\n\n  &.multi-row {\n    flex-wrap: wrap;\n    align-content: center;\n  }\n`\n\nconst Chip = styled.div`\n  background-color: var(--md-sys-color-surface-container-high);\n  border-radius: var(--border-radius-m);\n  padding: 2px 4px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  cursor: pointer;\n\n  display: flex;\n  align-items: center;\n  gap: 4px;\n\n  flex-shrink: 0;\n  min-width: auto;\n  &.last {\n    flex-shrink: 1;\n    min-width: 0;\n  }\n\n  &:hover {\n    background-color: var(--md-sys-color-surface-container-high-hover);\n  }\n`\n\nconst OffscreenChip = styled(Chip)`\n  visibility: hidden;\n  position: absolute;\n  top: -9999px;\n  left: -9999px;\n  z-index: -100;\n`\n\nconst MoreChip = styled(Chip)`\n  flex-shrink: 0;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n`\n\nconst AddIcon = styled(Icon)`\n  background-color: var(--md-sys-color-surface-container);\n  border-radius: var(--border-radius-m);\n  width: 24px;\n  height: 24px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n\n  &:hover {\n    background-color: var(--md-sys-color-surface-container-high-hover);\n  }\n`\n\nexport type ChipValue = {\n  label: string\n  tooltip: string\n  icon?: string\n  prefix?: React.ReactNode\n  suffix?: React.ReactNode\n}\n\ninterface ChipsProps {\n  values: ChipValue[]\n  disabled?: boolean\n  pt?: {\n    chip?: Partial<HTMLAttributes<HTMLDivElement>>\n  }\n}\n\ntype ChipsLayout = {\n  visibleCount: number\n  rows: number\n}\n\nexport const Chips: FC<ChipsProps> = ({ values, disabled, pt }) => {\n  const containerRef = useRef<HTMLDivElement>(null)\n  const [{ visibleCount, rows }, setLayout] = useState<ChipsLayout>({\n    visibleCount: 0,\n    rows: 1,\n  })\n  const [offscreenChips, setOffscreenChips] = useState<ChipValue[]>([])\n\n  useLayoutEffect(() => {\n    setOffscreenChips(values)\n  }, [values])\n\n  useLayoutEffect(() => {\n    const container = containerRef.current\n    if (!container || offscreenChips.length === 0 || offscreenChips.length !== values.length) return\n\n    const chipElements = Array.from(container.querySelectorAll('.offscreen-chip'))\n    if (chipElements.length !== values.length) return\n\n    const gap = parseFloat(getComputedStyle(container).rowGap) || 0\n    const chipWidths = chipElements.map((el) => el.getBoundingClientRect().width)\n    const chipHeight = chipElements[0].getBoundingClientRect().height\n    // measured offscreen at its widest label, so it does not depend on the +N chip being rendered\n    const moreChipWidth =\n      container.querySelector('.offscreen-more-chip')?.getBoundingClientRect().width || 60\n\n    const rowsNeeded = (count: number, extraWidth: number, containerWidth: number) => {\n      let used = 1\n      let rowWidth = 0\n      const place = (width: number, isFirst: boolean) => {\n        if (isFirst) rowWidth = width\n        else if (rowWidth + gap + width <= containerWidth) rowWidth += gap + width\n        else {\n          used++\n          rowWidth = width\n        }\n      }\n\n      for (let i = 0; i < count; i++) place(chipWidths[i], i === 0)\n      if (extraWidth) place(extraWidth, count === 0)\n      return used\n    }\n\n    const calculateLayout = () => {\n      const containerWidth = container.getBoundingClientRect().width\n      const containerHeight = container.offsetHeight\n      const rows = chipHeight\n        ? Math.max(1, Math.floor((containerHeight + gap) / (chipHeight + gap)))\n        : 1\n\n      // drop chips until they and the more chip fit the rows available\n      let visibleCount = values.length\n      while (\n        visibleCount > 1 &&\n        rowsNeeded(visibleCount, visibleCount < values.length ? moreChipWidth : 0, containerWidth) >\n          rows\n      ) {\n        visibleCount--\n      }\n\n      setLayout((prev) =>\n        prev.visibleCount === visibleCount && prev.rows === rows ? prev : { visibleCount, rows },\n      )\n    }\n\n    const resizeObserver = new ResizeObserver(calculateLayout)\n    resizeObserver.observe(container)\n\n    // Initial calculation\n    calculateLayout()\n\n    return () => resizeObserver.disconnect()\n  }, [values, offscreenChips])\n\n  if (disabled) return null\n\n  // for no values return plus button\n  if (!values.length) {\n    return <AddIcon icon=\"add\" className={pt?.chip?.className} />\n  }\n\n  const visibleValues = values.slice(0, visibleCount)\n  const hiddenCount = visibleCount ? values.length - visibleValues.length : 0\n\n  return (\n    <ChipsContainer ref={containerRef} className={clsx({ 'multi-row': rows > 1 })}>\n      {visibleValues.map((chip, index) => (\n        <Chip\n          {...pt?.chip}\n          key={chip.label + index}\n          data-tooltip={chip.tooltip}\n          className={clsx(\n            'chip',\n            { last: index === visibleValues.length - 1 && hiddenCount > 0 },\n            pt?.chip?.className,\n          )}\n        >\n          {chip.prefix}\n          {chip?.icon && <Icon icon={chip.icon} />}\n          {chip.label}\n          {chip.suffix}\n        </Chip>\n      ))}\n      {hiddenCount > 0 && (\n        <MoreChip className={clsx('more-chip', pt?.chip?.className)}>+{hiddenCount}</MoreChip>\n      )}\n      {offscreenChips.map((chip, index) => (\n        <OffscreenChip key={chip.label + index} className=\"offscreen-chip\">\n          {chip.prefix}\n          {chip?.icon && <Icon icon={chip.icon} />}\n          {chip.label}\n          {chip.suffix}\n        </OffscreenChip>\n      ))}\n      {offscreenChips.length > 1 && (\n        <OffscreenChip className=\"offscreen-more-chip\">+{offscreenChips.length - 1}</OffscreenChip>\n      )}\n    </ChipsContainer>\n  )\n}\n"],"names":["ChipsContainer","styled","Chip","OffscreenChip","MoreChip","AddIcon","Icon","Chips","values","disabled","pt","containerRef","useRef","visibleCount","rows","setLayout","useState","offscreenChips","setOffscreenChips","useLayoutEffect","container","chipElements","gap","chipWidths","el","chipHeight","moreChipWidth","rowsNeeded","count","extraWidth","containerWidth","used","rowWidth","place","width","isFirst","i","calculateLayout","containerHeight","prev","resizeObserver","visibleValues","hiddenCount","jsxs","clsx","chip","index","createElement","jsx"],"mappings":"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"}

package/dist/shared/src/components/ColumnHeaderMenuUI.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("../../../_virtual/jsx-runtime.cjs.js"),c=require("react"),l=require("@ynput/ayon-react-components"),p=require("styled-components");require("../context/RemoteModulesContext.cjs.js");require("../../../_virtual/runtime.cjs.js");require("../../../_virtual/semver.cjs.js");require("../api/base/client.cjs.js");require("../api/generated/graphql.cjs.js");require("../api/generated/graphqlLinks.cjs.js");require("../api/generated/access.cjs.js");require("../api/generated/actions.cjs.js");require("../api/generated/activityFeed.cjs.js");require("../api/generated/addons.cjs.js");require("../api/generated/anatomy.cjs.js");require("../api/generated/attributes.cjs.js");require("../api/generated/authentication.cjs.js");require("../api/generated/bundles.cjs.js");require("../api/generated/configuration.cjs.js");require("../api/generated/dataImport.cjs.js");require("../api/generated/desktop.cjs.js");require("../api/generated/entityLists.cjs.js");require("../api/generated/events.cjs.js");require("../api/generated/files.cjs.js");require("../api/generated/folders.cjs.js");require("../api/generated/inbox.cjs.js");require("../api/generated/links.cjs.js");require("../api/generated/market.cjs.js");require("../api/generated/onboarding.cjs.js");require("../api/generated/operations.cjs.js");require("../api/generated/products.cjs.js");require("../api/generated/projectDashboard.cjs.js");require("../api/generated/projects.cjs.js");require("../api/generated/projectFolders.cjs.js");require("../api/generated/reviewables.cjs.js");require("../api/generated/services.cjs.js");require("../api/generated/system.cjs.js");require("../api/generated/tasks.cjs.js");require("../api/generated/teams.cjs.js");require("../api/generated/thumbnails.cjs.js");require("../api/generated/uRIs.cjs.js");require("../api/generated/users.cjs.js");require("../api/generated/versions.cjs.js");require("../api/generated/workfiles.cjs.js");require("../api/generated/ynputCloud.cjs.js");require("../api/generated/grouping.cjs.js");require("../api/generated/views.cjs.js");require("../api/queries/actions/getActions.cjs.js");require("../api/queries/activities/getActivities.cjs.js");require("../api/queries/activities/updateReaction.cjs.js");require("../api/queries/activities/getMentions.cjs.js");require("../api/queries/activities/getCategories.cjs.js");require("../api/queries/addons/getAddons.cjs.js");require("../api/queries/addons/updateAddons.cjs.js");require("../api/queries/attributes/getAttributes.cjs.js");require("../api/queries/attributes/updateAttributes.cjs.js");require("../api/queries/authentication/getAuthentication.cjs.js");require("../api/queries/bundles/getBundles.cjs.js");require("../api/queries/bundles/updateBundles.cjs.js");require("../api/queries/cloud/cloud.cjs.js");require("../api/queries/columnStats/metricTargets.cjs.js");require("../api/queries/columnStats/groupCounts.cjs.js");require("../api/queries/config/getConfig.cjs.js");require("../api/queries/config/updateConfig.cjs.js");require("../api/queries/entities/getEntity.cjs.js");require("../api/queries/entities/getEntityPanel.cjs.js");require("../api/queries/overview/getOverview.cjs.js");require("../api/queries/overview/updateOverview.cjs.js");require("../api/queries/versions/getVersionsProducts.cjs.js");require("../api/queries/links/getEntityLinks.cjs.js");require("../api/queries/entities/updateEntity.cjs.js");require("../api/queries/entityLists/getLists.cjs.js");require("../api/queries/entityLists/updateLists.cjs.js");require("../api/queries/entityLists/getListsAttributes.cjs.js");require("../api/queries/entityLists/listItemsColumnStats.cjs.js");require("../api/queries/entityLists/updateListsAttributes.cjs.js");require("../api/queries/entityLists/listFolders.cjs.js");require("../api/queries/folders/getFolders.cjs.js");require("../api/queries/folders/getFolderDeleteInfo.cjs.js");require("../api/queries/grouping/getGrouping.cjs.js");require("../api/queries/links/updateLinks.cjs.js");require("../api/queries/links/getLinks.cjs.js");require("../api/queries/permissions/getPermissions.cjs.js");require("../api/queries/products/createProduct.cjs.js");require("../api/queries/products/getFolderProducts.cjs.js");require("../api/queries/project/getProject.cjs.js");require("../api/queries/project/updateProject.cjs.js");require("../api/queries/projectFolders/projectFolders.cjs.js");require("../api/queries/review/getReview.cjs.js");require("../api/queries/review/updateReview.cjs.js");require("../api/queries/share/share.cjs.js");require("../api/queries/system/getSystem.cjs.js");require("../api/queries/tasks/getTasks.cjs.js");require("../api/queries/tasks/updateTasks.cjs.js");require("../api/queries/teams/getTeams.cjs.js");require("../api/queries/userDashboard/getUserDashboard.cjs.js");require("../api/queries/users/getUsers.cjs.js");require("../api/queries/users/updateUsers.cjs.js");require("../api/queries/users/guests.cjs.js");require("../api/queries/versions/updateVersions.cjs.js");require("../api/queries/views/getViews.cjs.js");require("../api/queries/views/updateViews.cjs.js");require("../api/queries/watchers/getWatchers.cjs.js");require("../api/queries/uris/getUris.cjs.js");require("lodash");require("react-toastify");require("react-redux");require("custom-protocol-check");require("../containers/ProjectTreeTable/components/GroupSettingsFallback.cjs.js");require("uuid");require("../util/pubsub.cjs.js");require("../context/PowerpackContextInstance.cjs.js");require("../context/UriContext.cjs.js");require("../context/DetailsPanelContextInstance.cjs.js");require("../context/SubtasksModulesContextInstance.cjs.js");require("../context/ThumbnailUploaderContext.cjs.js");require("../context/SettingsPanelContext.cjs.js");require("../context/pip/PiPProvider.cjs.js");require("react-dom");require("../context/pip/PiPWrapper.cjs.js");require("../context/AddonProjectContext.cjs.js");require("../context/AddonContext.cjs.js");const x=require("../context/MenuContext.cjs.js");require("../context/WebsocketContext.cjs.js");require("../context/GlobalContext.cjs.js");require("../context/ProjectContext.cjs.js");require("../context/ProjectFoldersContextInstance.cjs.js");require("../context/EntityUpdatesContextInstance.cjs.js");require("../containers/ContextMenu/ContextMenuContext.cjs.js");;/* empty css                                              */require("clsx");require("../containers/Feed/context/FeedContext.cjs.js");require("../containers/Feed/components/Tooltips/UserTooltipItem.cjs.js");require("../containers/Feed/components/Tooltips/UserTooltip/UserTooltip.styled.cjs.js");require("../containers/Feed/components/Tooltips/TeamTooltip/TeamTooltip.styled.cjs.js");require("../containers/Feed/components/Tooltips/EntityTooltip/EntityTooltip.styled.cjs.js");require("../containers/Feed/components/FileUploadPreview/FileUploadPreview.styled.cjs.js");require("../containers/Feed/components/FileUploadPreview/Mimes/TextMime.cjs.js");require("react-markdown");require("remark-emoji");require("remark-gfm");require("remark-directive");require("remark-directive-rehype");require("../containers/Feed/components/CommentInput/CommentInput.cjs.js");require("../containers/Feed/components/ReactionContainer/Reactions.styled.cjs.js");require("../containers/Feed/components/FilesGrid/FilesGrid.styled.cjs.js");require("../containers/Feed/components/FileUploadCard/FileUploadCard.styled.cjs.js");require("../containers/Feed/components/CommentInput/quillToMarkdown.cjs.js");require("../containers/Feed/components/ActivityComment/ActivityComment.styled.cjs.js");require("../containers/Feed/components/ActivityCheckbox/ActivityCheckbox.styled.cjs.js");require("./AddonLoadingScreen/AddonLoadingScreen.cjs.js");require("../../../node_modules/match-sorter/dist/match-sorter.esm.cjs.js");require("./AccessSearchInput/AccessSearchInput.styled.cjs.js");require("./AccessUser/AccessUser.cjs.js");require("./AttributeEditor/AttributeEditor.cjs.js");require("./AttributeEditor/attributeTypeMap.cjs.js");require("./Badge/Badge.cjs.js");require("./Chips/Chips.cjs.js");require("date-fns");require("./DateRangePicker/DateRangePicker.styled.cjs.js");require("./LinksManager/CellEditingDialog.cjs.js");require("./DeleteEntitiesConfirm/DeleteConfirmContent.cjs.js");require("./DeleteEntitiesConfirm/DeleteEntitiesConfirmDialog.styled.cjs.js");require("../../../_virtual/index.cjs.js");require("../../../node_modules/refractor/lib/common.cjs.js");require("../../../node_modules/refractor/lib/all.cjs.js");;/* empty css                                                                             */require("./DetailsPanelAttributes/DetailsPanelAttributesEditor.cjs.js");require("./DetailsPanelDetails/DetailsPanelDetails.cjs.js");require("react-quill-ayon");require("./DetailsPanelDetails/BorderedSection.cjs.js");require("./QuillListStyles/QuillListStyles.cjs.js");require("./DetailsPanelDetails/DescriptionSection.styles.cjs.js");require("rehype-raw");require("./DetailsPanelDetails/hooks/useMentionSystem.cjs.js");require("../containers/Feed/components/CommentInput/modules/index.cjs.js");require("./DetailsPanelDetails/DetailsSection.cjs.js");require("./DetailsPanelDetails/FieldLabel.cjs.js");require("./DoneCheckbox/DoneCheckbox.cjs.js");require("./EarlyPreview/EarlyPreview.cjs.js");require("./EmptyPlaceholder/EmptyPlaceholder.cjs.js");require("./EmptyPlaceholder/EmptyPlaceholderFlex.styled.cjs.js");require("./InfoMessage/InfoMessage.cjs.js");require("@dnd-kit/core");require("@dnd-kit/sortable");require("./EnumEditor/EnumEditor.styled.cjs.js");require("./EntityPanelUploader/EntityPanelUploader.styled.cjs.js");require("axios");require("./ReviewablesList/ReviewablesList.styled.cjs.js");require("./ReviewablesList/ReviewablesUpload.styled.cjs.js");require("./EntityPath/EntityPath.styled.cjs.js");require("./EntityPath/SegmentProvider.cjs.js");require("./FeaturedVersionOrder/FeaturedVersionOrder.cjs.js");require("./Feedback/FeedbackContextInstance.cjs.js");require("./Feedback/SupportBubble.cjs.js");require("./FileThumbnail/FileThumbnail.cjs.js");require("./LegacyBadge/LegacyBadge.cjs.js");require("./LinksManager/LinksManager.styled.cjs.js");require("../containers/EntityPickerDialog/EntityPickerDialog.cjs.js");require("./Powerpack/PowerpackButton.cjs.js");require("./Powerpack/FreeTrialLink.cjs.js");require("./Powerpack/PowerpackDialog.styled.cjs.js");require("./Powerpack/CTAButton.cjs.js");require("./Powerpack/RequiredAddonVersion.cjs.js");require("./ProjectTableSettings/ProjectTableSettings.cjs.js");require("./ProjectTableSettings/ColumnsSettings.cjs.js");require("./SizeSlider/SizeSlider.cjs.js");require("react-router-dom");require("../containers/Slicer/components/Slicer.cjs.js");require("../containers/Slicer/context/SlicerContextInstance.cjs.js");require("../containers/Slicer/components/SlicerDropdownFallback.cjs.js");require("../containers/NewEntity/components/NewEntity.cjs.js");require("@tanstack/react-virtual");require("@tanstack/react-table");require("../containers/ProjectTreeTable/buildTreeTableColumns.cjs.js");require("../containers/ProjectTreeTable/ProjectTreeTable.styled.cjs.js");require("../containers/ProjectTreeTable/components/HeaderActionButton.cjs.js");require("../containers/ProjectTreeTable/components/RowSelectionHeader.cjs.js");require("../containers/ProjectTreeTable/components/SelectionCell.cjs.js");require("../containers/ProjectTreeTable/context/CellEditingContext.cjs.js");require("./SearchFilter/filterDates.cjs.js");require("short-uuid");require("../containers/ProjectTreeTable/utils/columnIds.cjs.js");require("../containers/ProjectTreeTable/context/SelectionCellsContext.cjs.js");require("../containers/ProjectTreeTable/context/ProjectTableQueriesContext.cjs.js");require("../containers/ProjectTreeTable/context/ColumnSettingsContext.cjs.js");require("../containers/ProjectTreeTable/context/ProjectTableContextInstance.cjs.js");require("../containers/ProjectTreeTable/context/ClipboardContext.cjs.js");require("../containers/ProjectTreeTable/context/SelectedRowsContext.cjs.js");require("../containers/ProjectTreeTable/context/DetailsPanelEntityContext.cjs.js");require("../containers/ProjectTreeTable/context/ProjectDataContextInstance.cjs.js");require("../containers/ProjectTreeTable/components/TableFooterRow.cjs.js");require("../containers/ProjectTreeTable/widgets/CellWidget.cjs.js");require("../containers/ProjectTreeTable/widgets/CollapsedWidget.cjs.js");require("../containers/ProjectTreeTable/widgets/DateWidget.cjs.js");require("../containers/ProjectTreeTable/widgets/EnumWidget.cjs.js");require("../containers/ProjectTreeTable/widgets/EnumCellValue.cjs.js");require("../containers/ProjectTreeTable/widgets/TextWidget.cjs.js");require("../containers/ProjectTreeTable/widgets/MarkdownWidget.cjs.js");require("../containers/ProjectTreeTable/widgets/BooleanWidget.cjs.js");require("../containers/ProjectTreeTable/widgets/EntityNameWidget.cjs.js");require("../containers/ProjectTreeTable/widgets/EntityWidget.cjs.js");require("../containers/ProjectTreeTable/widgets/GroupHeaderWidget.cjs.js");require("../containers/ProjectTreeTable/widgets/ThumbnailWidget.cjs.js");require("../containers/ProjectTreeTable/widgets/LinksWidget.cjs.js");require("../containers/ProjectTreeTable/widgets/EmptyWidget.cjs.js");require("../containers/ProjectTreeTable/widgets/ErrorWidget.cjs.js");require("../containers/NewEntity/context/NewEntityContextInstance.cjs.js");require("../containers/NewEntity/components/NewEntityForm.cjs.js");require("../containers/Slicer/hooks/useTableDataBySlice.cjs.js");require("./ReviewableCard/ReviewableCard.cjs.js");require("./ReviewableProgressCard/ReviewableProgressCard.styled.cjs.js");require("./SearchFilter/CustomDateRangeDialog.cjs.js");require("./SettingsPanel/SettingsPanel.cjs.js");require("./SettingsPanel/SettingsPanelItemTemplate.cjs.js");require("./ShareOptionIcon/ShareOptionIcon.cjs.js");require("./SimpleFormDialog/SimpleFormDialog.cjs.js");require("./StyledLink/StyledLink.cjs.js");require("./SyncButton/SyncButton.cjs.js");require("./TableGridSwitch/TableGridSwitch.cjs.js");require("./Thumbnail/Thumbnail.styled.cjs.js");require("./Thumbnail/StackedThumbnails.cjs.js");require("./ThumbnailSimple/ThumbnailSimple.cjs.js");require("./VersionUploader/components/UploadVersionDialog.cjs.js");require("./VersionUploader/context/VersionUploadContextInstance.cjs.js");require("./Watchers/Watchers.cjs.js");const d=require("./Menu/Menu.cjs.js"),g=require("./Menu/MenuContainer.cjs.js");require("./Menu/MenuItem.cjs.js");require("./Menu/Menu.styled.cjs.js");require("./ReviewablesSelector/ReviewablesSelector.cjs.js");require("../containers/Feed/components/ActivityReference/ActivityReference.styled.cjs.js");require("../containers/Feed/components/ActivityStatus/ActivityStatus.cjs.js");require("../containers/Feed/components/ActivityHeader/ActivityHeader.styled.cjs.js");require("../containers/Feed/components/ActivityDate.cjs.js");require("../containers/Feed/components/ActivityVersionReview/ActivityVersionReview.styled.cjs.js");require("../containers/Feed/components/ActivityCategorySelect/ActivityCategorySelect.cjs.js");require("../containers/Feed/components/ActivityCategorySelect/CategoryDropdownItem.cjs.js");require("../containers/Feed/components/ActivityCategorySelect/CategoryTag.cjs.js");require("../containers/Feed/components/ActivityFieldChange/ActivityFieldChange.styled.cjs.js");require("../containers/Feed/components/ActivityFieldChange/FieldValue.cjs.js");require("../containers/Feed/components/ActivityAssigneeChange/ActivityAssigneeChange.styled.cjs.js");require("../containers/Feed/components/ActivityVersions/ActivityVersions.styled.cjs.js");require("../containers/Feed/components/ActivityGroup/ActivityGroup.styled.cjs.js");require("../containers/Feed/Feed.styled.cjs.js");require("../containers/Feed/components/FeedSearchFilter.cjs.js");require("../containers/DetailsPanel/DetailsPanel.styled.cjs.js");require("../containers/DetailsPanel/components/DetailsPanelTabs/DetailsPanelTabs.styled.cjs.js");require("../containers/DetailsPanel/components/DetailsPanelHeader/LinkedTaskRow.styled.cjs.js");require("../containers/DetailsPanel/components/DetailsPanelHeader/DetailsPanelHeader.styled.cjs.js");require("./PlayableIcon/PlayableIcon.cjs.js");require("../containers/DetailsPanel/components/DetailsPanelFiles/DetailsPanelFiles.cjs.js");require("../containers/DetailsPanel/components/DetailsPanelMoreMenu/components/ShareDialog.cjs.js");require("../containers/DetailsPanel/components/TabHeaderAndFilters/TabHeaderAndFilters.styled.cjs.js");require("../containers/DetailsPanel/components/SubtasksSearchFilter/SubtasksSearchFilter.cjs.js");require("../containers/DetailsPanel/components/DetailsPanelSlideOut/DetailsPanelSlideOut.styled.cjs.js");require("../containers/DetailsPanel/components/DetailsPanelFloating/DetailsPanelFloating.styled.cjs.js");require("../containers/Actions/Actions.styled.cjs.js");require("../containers/Actions/ActionsDropdown/ActionsDropdown.cjs.js");require("../containers/Actions/ActionIcon.cjs.js");require("../containers/Views/ViewsMenu/ViewsMenu.cjs.js");require("../containers/Views/context/ViewsContextInstance.cjs.js");require("../containers/Views/Views.styled.cjs.js");require("../containers/Views/ViewsMenuContainer/ViewsMenuContainer.cjs.js");require("../containers/ListTable/ListTableRow.cjs.js");require("../containers/ListTable/ListTable.styled.cjs.js");require("../context/DeleteEntitiesContext.cjs.js");const o=p(l.Button)`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("../../../_virtual/jsx-runtime.cjs.js"),l=require("react"),p=require("@ynput/ayon-react-components"),x=require("styled-components"),d=require("../context/MenuContext.cjs.js"),g=require("./Menu/Menu.cjs.js"),m=require("./Menu/MenuContainer.cjs.js");require("./Menu/MenuItem.cjs.js");require("./Menu/Menu.styled.cjs.js");require("../context/RemoteModulesContext.cjs.js");require("../../../_virtual/runtime.cjs.js");require("../../../_virtual/semver.cjs.js");require("../context/PowerpackContextInstance.cjs.js");const i=x(p.Button)`
   background-color: unset !important;
   z-index: 110;
   position: relative;
@@ -15,8 +15,8 @@
     background-color: var(--md-sys-color-surface-container-hover) !important;
   }
 
-  ${({$isOpen:u})=>u&&`
+  ${({$isOpen:o})=>o&&`
     background-color: var(--md-sys-color-surface-container-hover) !important;
   `}
-`,m=({menuItems:u,menuId:i,className:t})=>{const{toggleMenuOpen:q,menuOpen:s}=x.useMenuContext(),n=c.useRef(null),a=s===i;return u.length===0?null:r.jsxRuntimeExports.jsxs(r.jsxRuntimeExports.Fragment,{children:[r.jsxRuntimeExports.jsx(o,{ref:n,className:t,onClick:e=>{e.stopPropagation(),q(i)},onPointerDown:e=>e.stopPropagation(),icon:"more_horiz",$isOpen:a}),r.jsxRuntimeExports.jsx(g.MenuContainer,{target:n.current,id:i,align:"left",onClose:e=>{e.stopPropagation(),q(!1)},children:r.jsxRuntimeExports.jsx(d.Menu,{menu:u,onClose:()=>q(!1)})})]})};exports.ColumnHeaderMenuUI=m;exports.ColumnMenuButton=o;
+`,q=({menuItems:o,menuId:r,className:s})=>{const{toggleMenuOpen:t,menuOpen:a}=d.useMenuContext(),u=l.useRef(null),c=a===r;return o.length===0?null:n.jsxRuntimeExports.jsxs(n.jsxRuntimeExports.Fragment,{children:[n.jsxRuntimeExports.jsx(i,{ref:u,className:s,onClick:e=>{e.stopPropagation(),t(r)},onPointerDown:e=>e.stopPropagation(),icon:"more_horiz",$isOpen:c}),n.jsxRuntimeExports.jsx(m.MenuContainer,{target:u.current,id:r,align:"left",onClose:e=>{e.stopPropagation(),t(!1)},children:n.jsxRuntimeExports.jsx(g.Menu,{menu:o,onClose:()=>t(!1)})})]})};exports.ColumnHeaderMenuUI=q;exports.ColumnMenuButton=i;
 //# sourceMappingURL=ColumnHeaderMenuUI.cjs.js.map

package/dist/shared/src/components/ColumnHeaderMenuUI.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColumnHeaderMenuUI.cjs.js","sources":["../../../../src/components/ColumnHeaderMenuUI.tsx"],"sourcesContent":["import { useRef } from 'react'\nimport { Button } from '@ynput/ayon-react-components'\nimport styled from 'styled-components'\nimport { useMenuContext } from '@shared/context'\nimport { Menu, MenuContainer } from './Menu'\nimport type { MenuItemType } from './Menu'\n\nexport type ColumnMenuItemType = {\n  id: string\n  label?: string\n  icon?: string\n  className?: string\n  onClick?: () => void\n  type?: 'divider'\n  selected?: boolean\n}\n\nexport const ColumnMenuButton = styled(Button)<{ $isOpen: boolean }>`\n  background-color: unset !important;\n  z-index: 110;\n  position: relative;\n  padding: 2px;\n  width: 24px;\n  height: 24px;\n\n  &.hasIcon {\n    padding: 2px;\n  }\n\n  &:hover,\n  &.active {\n    background-color: var(--md-sys-color-surface-container-hover) !important;\n  }\n\n  ${({ $isOpen }) =>\n    $isOpen &&\n    `\n    background-color: var(--md-sys-color-surface-container-hover) !important;\n  `}\n`\n\ninterface ColumnHeaderMenuUIProps {\n  menuItems: ColumnMenuItemType[]\n  menuId: string\n  className?: string\n}\n\n/**\n * Self-contained column header menu UI.\n * Uses the shared MenuContainer/Menu infrastructure and MenuContext for open state.\n */\nexport const ColumnHeaderMenuUI = ({ menuItems, menuId, className }: ColumnHeaderMenuUIProps) => {\n  const { toggleMenuOpen, menuOpen } = useMenuContext()\n  const buttonRef = useRef<HTMLButtonElement>(null)\n  const isOpen = menuOpen === menuId\n\n  if (menuItems.length === 0) return null\n\n  return (\n    <>\n      <ColumnMenuButton\n        ref={buttonRef}\n        className={className}\n        onClick={(e) => {\n          e.stopPropagation()\n          toggleMenuOpen(menuId)\n        }}\n        onPointerDown={(e) => e.stopPropagation()}\n        icon=\"more_horiz\"\n        $isOpen={isOpen}\n      />\n      <MenuContainer\n        target={buttonRef.current}\n        id={menuId}\n        align=\"left\"\n        onClose={(e: any) => {\n          e.stopPropagation()\n          toggleMenuOpen(false)\n        }}\n      >\n        <Menu menu={menuItems as MenuItemType[]} onClose={() => toggleMenuOpen(false)} />\n      </MenuContainer>\n    </>\n  )\n}\n"],"names":["ColumnMenuButton","styled","Button","$isOpen","ColumnHeaderMenuUI","menuItems","menuId","className","toggleMenuOpen","menuOpen","useMenuContext","buttonRef","useRef","isOpen","jsxs","Fragment","jsx","MenuContainer","Menu"],"mappings":"+liBAiBO,MAAMA,EAAmBC,EAAOC,QAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAiBzC,CAAC,CAAE,QAAAC,CAAA,IACHA,GACA;AAAA;AAAA,GAED;AAAA,EAaUC,EAAqB,CAAC,CAAE,UAAAC,EAAW,OAAAC,EAAQ,UAAAC,KAAyC,CAC/F,KAAM,CAAE,eAAAC,EAAgB,SAAAC,CAAA,EAAaC,iBAAA,EAC/BC,EAAYC,EAAAA,OAA0B,IAAI,EAC1CC,EAASJ,IAAaH,EAE5B,OAAID,EAAU,SAAW,EAAU,KAGjCS,EAAAA,kBAAAA,KAAAC,6BAAA,CACE,SAAA,CAAAC,EAAAA,kBAAAA,IAAChB,EAAA,CACC,IAAKW,EACL,UAAAJ,EACA,QAAU,GAAM,CACd,EAAE,gBAAA,EACFC,EAAeF,CAAM,CACvB,EACA,cAAgB,GAAM,EAAE,gBAAA,EACxB,KAAK,aACL,QAASO,CAAA,CAAA,EAEXG,EAAAA,kBAAAA,IAACC,EAAAA,cAAA,CACC,OAAQN,EAAU,QAClB,GAAIL,EACJ,MAAM,OACN,QAAU,GAAW,CACnB,EAAE,gBAAA,EACFE,EAAe,EAAK,CACtB,EAEA,SAAAQ,EAAAA,kBAAAA,IAACE,EAAAA,MAAK,KAAMb,EAA6B,QAAS,IAAMG,EAAe,EAAK,CAAA,CAAG,CAAA,CAAA,CACjF,EACF,CAEJ"}
+{"version":3,"file":"ColumnHeaderMenuUI.cjs.js","sources":["../../../../src/components/ColumnHeaderMenuUI.tsx"],"sourcesContent":["import { useRef } from 'react'\nimport { Button } from '@ynput/ayon-react-components'\nimport styled from 'styled-components'\nimport { useMenuContext } from '@shared/context/MenuContext'\nimport { Menu, MenuContainer } from './Menu'\nimport type { MenuItemType } from './Menu'\n\nexport type ColumnMenuItemType = {\n  id: string\n  label?: string\n  icon?: string\n  className?: string\n  onClick?: () => void\n  type?: 'divider'\n  selected?: boolean\n}\n\nexport const ColumnMenuButton = styled(Button)<{ $isOpen: boolean }>`\n  background-color: unset !important;\n  z-index: 110;\n  position: relative;\n  padding: 2px;\n  width: 24px;\n  height: 24px;\n\n  &.hasIcon {\n    padding: 2px;\n  }\n\n  &:hover,\n  &.active {\n    background-color: var(--md-sys-color-surface-container-hover) !important;\n  }\n\n  ${({ $isOpen }) =>\n    $isOpen &&\n    `\n    background-color: var(--md-sys-color-surface-container-hover) !important;\n  `}\n`\n\ninterface ColumnHeaderMenuUIProps {\n  menuItems: ColumnMenuItemType[]\n  menuId: string\n  className?: string\n}\n\n/**\n * Self-contained column header menu UI.\n * Uses the shared MenuContainer/Menu infrastructure and MenuContext for open state.\n */\nexport const ColumnHeaderMenuUI = ({ menuItems, menuId, className }: ColumnHeaderMenuUIProps) => {\n  const { toggleMenuOpen, menuOpen } = useMenuContext()\n  const buttonRef = useRef<HTMLButtonElement>(null)\n  const isOpen = menuOpen === menuId\n\n  if (menuItems.length === 0) return null\n\n  return (\n    <>\n      <ColumnMenuButton\n        ref={buttonRef}\n        className={className}\n        onClick={(e) => {\n          e.stopPropagation()\n          toggleMenuOpen(menuId)\n        }}\n        onPointerDown={(e) => e.stopPropagation()}\n        icon=\"more_horiz\"\n        $isOpen={isOpen}\n      />\n      <MenuContainer\n        target={buttonRef.current}\n        id={menuId}\n        align=\"left\"\n        onClose={(e: any) => {\n          e.stopPropagation()\n          toggleMenuOpen(false)\n        }}\n      >\n        <Menu menu={menuItems as MenuItemType[]} onClose={() => toggleMenuOpen(false)} />\n      </MenuContainer>\n    </>\n  )\n}\n"],"names":["ColumnMenuButton","styled","Button","$isOpen","ColumnHeaderMenuUI","menuItems","menuId","className","toggleMenuOpen","menuOpen","useMenuContext","buttonRef","useRef","isOpen","jsxs","Fragment","jsx","MenuContainer","Menu"],"mappings":"8lBAiBO,MAAMA,EAAmBC,EAAOC,QAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAiBzC,CAAC,CAAE,QAAAC,CAAA,IACHA,GACA;AAAA;AAAA,GAED;AAAA,EAaUC,EAAqB,CAAC,CAAE,UAAAC,EAAW,OAAAC,EAAQ,UAAAC,KAAyC,CAC/F,KAAM,CAAE,eAAAC,EAAgB,SAAAC,CAAA,EAAaC,iBAAA,EAC/BC,EAAYC,EAAAA,OAA0B,IAAI,EAC1CC,EAASJ,IAAaH,EAE5B,OAAID,EAAU,SAAW,EAAU,KAGjCS,EAAAA,kBAAAA,KAAAC,6BAAA,CACE,SAAA,CAAAC,EAAAA,kBAAAA,IAAChB,EAAA,CACC,IAAKW,EACL,UAAAJ,EACA,QAAU,GAAM,CACd,EAAE,gBAAA,EACFC,EAAeF,CAAM,CACvB,EACA,cAAgB,GAAM,EAAE,gBAAA,EACxB,KAAK,aACL,QAASO,CAAA,CAAA,EAEXG,EAAAA,kBAAAA,IAACC,EAAAA,cAAA,CACC,OAAQN,EAAU,QAClB,GAAIL,EACJ,MAAM,OACN,QAAU,GAAW,CACnB,EAAE,gBAAA,EACFE,EAAe,EAAK,CACtB,EAEA,SAAAQ,EAAAA,kBAAAA,IAACE,EAAAA,MAAK,KAAMb,EAA6B,QAAS,IAAMG,EAAe,EAAK,CAAA,CAAG,CAAA,CAAA,CACjF,EACF,CAEJ"}