@ynput/ayon-frontend-shared 0.4.0 → 0.4.2

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 (!containerRef.current || offscreenChips.length === 0) 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  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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"}

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

@@ -1,6 +1,6 @@
 import { j as s } from "../../../../_virtual/jsx-runtime.es.js";
-import { useRef as E, useState as u, useLayoutEffect as C, createElement as B } from "react";
-import { Icon as p } from "@ynput/ayon-react-components";
+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`
@@ -43,7 +43,7 @@ const O = l.div`
   display: flex;
   justify-content: center;
   align-items: center;
-`, S = l(p)`
+`, S = l(u)`
   background-color: var(--md-sys-color-surface-container);
   border-radius: var(--border-radius-m);
   width: 24px;
@@ -57,29 +57,30 @@ const O = l.div`
     background-color: var(--md-sys-color-surface-container-high-hover);
   }
 `, D = ({ values: t, disabled: w, pt: a }) => {
-  const r = E(null), [g, v] = u([]), [h, j] = u(0), [f, k] = u([]);
+  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 || f.length === 0) return;
-      const x = r.current.offsetWidth, d = Array.from(r.current.querySelectorAll(".offscreen-chip")), R = r.current.querySelector(".more-chip");
-      if (!d.length) return;
+      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 = d[0].getBoundingClientRect().width;
+        const o = h[0].getBoundingClientRect().width;
         i.push(t[0]), c += o;
       }
       for (let o = 1; o < t.length; o++) {
-        const b = d[o].getBoundingClientRect().width;
+        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 = d[i.length - 1].getBoundingClientRect().width;
+            const V = h[i.length - 1].getBoundingClientRect().width;
             c -= V, i.pop();
           }
           break;
@@ -91,7 +92,7 @@ const O = l.div`
     return r.current && n.observe(r.current), e(), () => {
       r.current && n.unobserve(r.current);
     };
-  }, [t, f]), w ? null : t.length ? /* @__PURE__ */ s.jsxs(O, { ref: r, children: [
+  }, [t, d]), w ? null : t.length ? /* @__PURE__ */ s.jsxs(O, { ref: r, children: [
     g.map((e, n) => /* @__PURE__ */ B(
       m,
       {
@@ -100,22 +101,22 @@ const O = l.div`
         "data-tooltip": e.tooltip,
         className: y(
           "chip",
-          { last: n === g.length - 1 && h > 0 },
+          { last: n === g.length - 1 && f > 0 },
           a?.chip?.className
         )
       },
       e.prefix,
-      e?.icon && /* @__PURE__ */ s.jsx(p, { icon: e.icon }),
+      e?.icon && /* @__PURE__ */ s.jsx(u, { icon: e.icon }),
       e.label,
       e.suffix
     )),
-    h > 0 && /* @__PURE__ */ s.jsxs(A, { className: y("more-chip", a?.chip?.className), children: [
+    f > 0 && /* @__PURE__ */ s.jsxs(A, { className: y("more-chip", a?.chip?.className), children: [
       "+",
-      h
+      f
     ] }),
-    f.map((e, n) => /* @__PURE__ */ s.jsxs(z, { className: "offscreen-chip", children: [
+    d.map((e, n) => /* @__PURE__ */ s.jsxs(z, { className: "offscreen-chip", children: [
       e.prefix,
-      e?.icon && /* @__PURE__ */ s.jsx(p, { icon: e.icon }),
+      e?.icon && /* @__PURE__ */ s.jsx(u, { icon: e.icon }),
       e.label,
       e.suffix
     ] }, e.label + n))

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 (!containerRef.current || offscreenChips.length === 0) 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  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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"}

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("./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/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/CellWidget.cjs.js");require("../containers/ProjectTreeTable/widgets/EntityNameWidget.cjs.js");require("../containers/ProjectTreeTable/widgets/GroupHeaderWidget.cjs.js");require("../containers/ProjectTreeTable/widgets/ThumbnailWidget.cjs.js");require("../containers/ProjectTreeTable/widgets/LinksWidget.cjs.js");require("short-uuid");require("./SearchFilter/filterDates.cjs.js");require("../containers/ProjectTreeTable/context/CellEditingContext.cjs.js");require("../containers/ProjectTreeTable/context/SelectionCellsContext.cjs.js");require("../containers/ProjectTreeTable/context/ProjectTableQueriesContext.cjs.js");require("../containers/ProjectTreeTable/context/ClipboardContext.cjs.js");require("../containers/ProjectTreeTable/context/ColumnSettingsContext.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/context/ProjectTableContextInstance.cjs.js");require("../containers/ProjectTreeTable/widgets/EmptyWidget.cjs.js");require("../containers/ProjectTreeTable/widgets/ErrorWidget.cjs.js");require("../containers/ProjectTreeTable/ProjectTreeTable.styled.cjs.js");require("../containers/ProjectTreeTable/components/SelectionCell.cjs.js");require("../containers/ProjectTreeTable/components/RowSelectionHeader.cjs.js");require("../containers/ProjectTreeTable/widgets/LoadMoreWidget.cjs.js");require("../containers/ProjectTreeTable/components/HeaderActionButton.cjs.js");require("../containers/ProjectTreeTable/components/TableFooterRow.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":"g6hBAiBO,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"}