@ynput/ayon-frontend-shared 0.3.4 → 0.3.6

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

@@ -1,7 +1,7 @@
-import { j as c } from "../../../../_virtual/jsx-runtime.es.js";
-import { useRef as E, useState as p, useLayoutEffect as x, createElement as B } from "react";
-import { Icon as y } from "@ynput/ayon-react-components";
-import C from "clsx";
+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 y from "clsx";
 import l from "styled-components";
 const O = l.div`
   display: flex;
@@ -9,7 +9,7 @@ const O = l.div`
   align-items: center;
   width: 100%;
   overflow: hidden;
-`, u = l.div`
+`, m = l.div`
   background-color: var(--md-sys-color-surface-container-high);
   border-radius: var(--border-radius-m);
   padding: 2px 4px;
@@ -32,18 +32,18 @@ const O = l.div`
   &:hover {
     background-color: var(--md-sys-color-surface-container-high-hover);
   }
-`, z = l(u)`
+`, z = l(m)`
   visibility: hidden;
   position: absolute;
   top: -9999px;
   left: -9999px;
   z-index: -100;
-`, A = l(u)`
+`, A = l(m)`
   flex-shrink: 0;
   display: flex;
   justify-content: center;
   align-items: center;
-`, S = l(y)`
+`, S = l(p)`
   background-color: var(--md-sys-color-surface-container);
   border-radius: var(--border-radius-m);
   width: 24px;
@@ -57,63 +57,69 @@ 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), [m, v] = p([]), [d, k] = p(0), [f, j] = p([]);
-  return x(() => {
-    j(t);
-  }, [t]), x(() => {
+  const r = E(null), [g, v] = u([]), [h, j] = u(0), [f, k] = u([]);
+  return C(() => {
+    k(t);
+  }, [t]), C(() => {
     const e = () => {
       if (!r.current || f.length === 0) return;
-      const g = r.current.offsetWidth, h = Array.from(r.current.querySelectorAll(".offscreen-chip")), R = r.current.querySelector(".more-chip");
-      if (!h.length) return;
-      let s = 0;
-      const n = [], N = R?.getBoundingClientRect().width || 60;
+      const x = r.current.offsetWidth, d = Array.from(r.current.querySelectorAll(".offscreen-chip")), R = r.current.querySelector(".more-chip");
+      if (!d.length) return;
+      let c = 0;
+      const i = [], N = R?.getBoundingClientRect().width || 60;
       if (t.length > 0) {
-        const o = h[0].getBoundingClientRect().width;
-        n.push(t[0]), s += o;
+        const o = d[0].getBoundingClientRect().width;
+        i.push(t[0]), c += o;
       }
       for (let o = 1; o < t.length; o++) {
-        const b = h[o].getBoundingClientRect().width;
-        if (s + b <= g)
-          s += b, n.push(t[o]);
+        const b = d[o].getBoundingClientRect().width;
+        if (c + b <= x)
+          c += b, i.push(t[o]);
         else {
-          if (s + N <= g)
+          if (c + N <= x)
             break;
-          if (n.length > 1) {
-            const V = h[n.length - 1].getBoundingClientRect().width;
-            s -= V, n.pop();
+          if (i.length > 1) {
+            const V = d[i.length - 1].getBoundingClientRect().width;
+            c -= V, i.pop();
           }
           break;
         }
       }
-      const W = t.length - n.length;
-      v(n), k(W);
-    }, i = new ResizeObserver(e);
-    return r.current && i.observe(r.current), e(), () => {
-      r.current && i.unobserve(r.current);
+      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, f]), w ? null : t.length ? /* @__PURE__ */ c.jsxs(O, { ref: r, children: [
-    m.map((e, i) => /* @__PURE__ */ B(
-      u,
+  }, [t, f]), w ? null : t.length ? /* @__PURE__ */ s.jsxs(O, { ref: r, children: [
+    g.map((e, n) => /* @__PURE__ */ B(
+      m,
       {
         ...a?.chip,
-        key: e.label + i,
+        key: e.label + n,
         "data-tooltip": e.tooltip,
-        className: C(
+        className: y(
           "chip",
-          { last: i === m.length - 1 && d > 0 },
+          { last: n === g.length - 1 && h > 0 },
           a?.chip?.className
         )
       },
-      e?.icon && /* @__PURE__ */ c.jsx(y, { icon: e.icon }),
-      "  ",
-      e.label
+      e.prefix,
+      e?.icon && /* @__PURE__ */ s.jsx(p, { icon: e.icon }),
+      e.label,
+      e.suffix
     )),
-    d > 0 && /* @__PURE__ */ c.jsxs(A, { className: C("more-chip", a?.chip?.className), children: [
+    h > 0 && /* @__PURE__ */ s.jsxs(A, { className: y("more-chip", a?.chip?.className), children: [
       "+",
-      d
+      h
     ] }),
-    f.map((e, i) => /* @__PURE__ */ c.jsx(z, { className: "offscreen-chip", children: e.label }, e.label + i))
-  ] }) : /* @__PURE__ */ c.jsx(S, { icon: "add", className: a?.chip?.className });
+    f.map((e, n) => /* @__PURE__ */ s.jsxs(z, { className: "offscreen-chip", children: [
+      e.prefix,
+      e?.icon && /* @__PURE__ */ s.jsx(p, { icon: e.icon }),
+      e.label,
+      e.suffix
+    ] }, e.label + n))
+  ] }) : /* @__PURE__ */ s.jsx(S, { icon: "add", className: a?.chip?.className });
 };
 export {
   D as Chips

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}\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?.icon && <Icon icon={chip.icon}/>}  {chip.label}\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.label}\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":";;;;;AAKA,MAAMA,IAAiBC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAQxBC,IAAOD,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAyBdE,IAAgBF,EAAOC,CAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAQ3BE,IAAWH,EAAOC,CAAI;AAAA;AAAA;AAAA;AAAA;AAAA,GAOtBG,IAAUJ,EAAOK,CAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GA6BdC,IAAwB,CAAC,EAAE,QAAAC,GAAQ,UAAAC,GAAU,IAAAC,QAAS;AACjE,QAAMC,IAAeC,EAAuB,IAAI,GAC1C,CAACC,GAAeC,CAAgB,IAAIC,EAAsB,CAAA,CAAE,GAC5D,CAACC,GAAaC,CAAc,IAAIF,EAAS,CAAC,GAC1C,CAACG,GAAgBC,CAAiB,IAAIJ,EAAsB,CAAA,CAAE;AA0EpE,SAxEAK,EAAgB,MAAM;AACpB,IAAAD,EAAkBX,CAAM;AAAA,EAC1B,GAAG,CAACA,CAAM,CAAC,GAEXY,EAAgB,MAAM;AACpB,UAAMC,IAAwB,MAAM;AAClC,UAAI,CAACV,EAAa,WAAWO,EAAe,WAAW,EAAG;AAE1D,YAAMI,IAAiBX,EAAa,QAAQ,aACtCY,IAAe,MAAM,KAAKZ,EAAa,QAAQ,iBAAiB,iBAAiB,CAAC,GAClFa,IAAkBb,EAAa,QAAQ,cAAc,YAAY;AAEvE,UAAI,CAACY,EAAa,OAAQ;AAE1B,UAAIE,IAAa;AACjB,YAAMC,IAAgC,CAAA,GAEhCC,IAAgBH,GAAiB,sBAAA,EAAwB,SAAS;AAGxE,UAAIhB,EAAO,SAAS,GAAG;AACrB,cAAMoB,IAAiBL,EAAa,CAAC,EAAE,wBAAwB;AAC/D,QAAAG,EAAiB,KAAKlB,EAAO,CAAC,CAAC,GAC/BiB,KAAcG;AAAA,MAChB;AAGA,eAASC,IAAI,GAAGA,IAAIrB,EAAO,QAAQqB,KAAK;AACtC,cAAMC,IAAYP,EAAaM,CAAC,EAAE,wBAAwB;AAG1D,YAAIJ,IAAaK,KAAaR;AAC5B,UAAAG,KAAcK,GACdJ,EAAiB,KAAKlB,EAAOqB,CAAC,CAAC;AAAA,aAC1B;AAEL,cAAIJ,IAAaE,KAAiBL;AAEhC;AAGA,cAAII,EAAiB,SAAS,GAAG;AAC/B,kBAAMK,IACJR,EAAaG,EAAiB,SAAS,CAAC,EAAE,wBAAwB;AACpE,YAAAD,KAAcM,GACdL,EAAiB,IAAA;AAAA,UACnB;AACA;AAAA,QAEJ;AAAA,MACF;AAEA,YAAMM,IAAmBxB,EAAO,SAASkB,EAAiB;AAC1D,MAAAZ,EAAiBY,CAAgB,GACjCT,EAAee,CAAgB;AAAA,IACjC,GAEMC,IAAiB,IAAI,eAAeZ,CAAqB;AAC/D,WAAIV,EAAa,WACfsB,EAAe,QAAQtB,EAAa,OAAO,GAI7CU,EAAA,GAEO,MAAM;AACX,MAAIV,EAAa,WACfsB,EAAe,UAAUtB,EAAa,OAAO;AAAA,IAEjD;AAAA,EACF,GAAG,CAACH,GAAQU,CAAc,CAAC,GAEvBT,IAAiB,OAGhBD,EAAO,SAKV0B,gBAAAA,EAAAA,KAAClC,GAAA,EAAe,KAAKW,GAClB,UAAA;AAAA,IAAAE,EAAc,IAAI,CAACsB,GAAMC,MACxB,gBAAAC;AAAA,MAACnC;AAAA,MAAA;AAAA,QACE,GAAGQ,GAAI;AAAA,QACR,KAAKyB,EAAK,QAAQC;AAAA,QAClB,gBAAcD,EAAK;AAAA,QACnB,WAAWG;AAAA,UACT;AAAA,UACA,EAAE,MAAMF,MAAUvB,EAAc,SAAS,KAAKG,IAAc,EAAA;AAAA,UAC5DN,GAAI,MAAM;AAAA,QAAA;AAAA,MACZ;AAAA,MAECyB,GAAM,QAAQI,gBAAAA,MAACjC,GAAA,EAAK,MAAM6B,EAAK,MAAK;AAAA,MAAG;AAAA,MAAGA,EAAK;AAAA,IAAA,CAEnD;AAAA,IACAnB,IAAc,KACbkB,gBAAAA,OAAC9B,GAAA,EAAS,WAAWkC,EAAK,aAAa5B,GAAI,MAAM,SAAS,GAAG,UAAA;AAAA,MAAA;AAAA,MAAEM;AAAA,IAAA,GAAY;AAAA,IAE5EE,EAAe,IAAI,CAACiB,GAAMC,MACzBG,gBAAAA,EAAAA,IAACpC,GAAA,EAAuC,WAAU,kBAC/C,UAAAgC,EAAK,MAAA,GADYA,EAAK,QAAQC,CAEjC,CACD;AAAA,EAAA,GACH,0BA3BQ/B,GAAA,EAAQ,MAAK,OAAM,WAAWK,GAAI,MAAM,WAAW;AA6B/D;"}
+{"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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"}

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

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("../../../../_virtual/jsx-runtime.cjs.js"),c=require("react"),X=require("react-dom"),l=require("date-fns"),i=require("./DateRangePicker.styled.cjs.js"),C=require("clsx"),v=require("../LinksManager/CellEditingDialog.cjs.js"),V=e=>{if(!e)return"";try{const a=l.parseISO(e);if(l.isValid(a))return l.format(a,"yyyy-MM-dd")}catch{return""}return""},A=(e,a)=>{if(!e)return null;try{const y=l.parseISO(e);if(l.isValid(y))return l.format(y,a)}catch{return null}return null},u=e=>{if(!e)return null;try{const a=new Date(e);if(l.isValid(a))return a.setUTCHours(0,0,0,0),a.toISOString()}catch{return null}return null},Y=({value:e,onChange:a,emptyTrigger:y,valueTrigger:I,align:E="left",disabled:b=!1,className:F,displayFormat:_="MMM d",minDate:g,maxDate:j,pt:n})=>{const[d,S]=c.useState(!1),[f,R]=c.useState(""),[x,w]=c.useState(""),p=c.useRef(null),k=c.useRef(null),T=c.useRef(null),q=c.useRef(null),M=e.startDate||e.endDate,D=c.useCallback(()=>{const t=u(f),r=u(x);(t!==e.startDate||r!==e.endDate)&&a({startDate:t,endDate:r}),S(!1)},[f,x,e.startDate,e.endDate,a]);c.useEffect(()=>{d&&(R(V(e.startDate)),w(V(e.endDate)),!e.startDate&&!e.endDate&&setTimeout(()=>{try{T.current?.showPicker()}catch{}},100))},[d,e.startDate,e.endDate]),c.useEffect(()=>{if(!d)return;const t=r=>{const o=r.target;p.current&&!p.current.contains(o)&&k.current&&!k.current.contains(o)&&D()};return document.addEventListener("mousedown",t),()=>document.removeEventListener("mousedown",t)},[d,D]),c.useEffect(()=>{if(!d)return;const t=r=>{r.key==="Escape"&&(r.stopPropagation(),D())};return document.addEventListener("keydown",t),()=>document.removeEventListener("keydown",t)},[d,D]);const K=t=>{const r=t.target.value;R(r);const o=u(r),m=u(x);if(o&&m){const h=new Date(o),P=new Date(m);h>P&&w(r)}o&&setTimeout(()=>{try{q.current?.showPicker()}catch{}},100)},G=t=>{const r=t.target.value;w(r);const o=u(r),m=u(f);let h=m,P=o;if(o&&m){const Q=new Date(m);new Date(o)<Q&&(R(r),h=o)}a({startDate:h,endDate:P})},$=()=>{R(""),w(""),a({startDate:null,endDate:null}),S(!1)},H=t=>{t.stopPropagation(),b||(d?D():S(!0))},U=d?u(f):e.startDate,W=d?u(x):e.endDate,L=A(U,_),N=A(W,_),B=L&&N?`${L} - ${N}`:L||N||"",z=()=>{if(!p.current)return{top:0,left:0};const t=p.current.getBoundingClientRect();return{top:t.bottom+4,left:E==="left"?t.left:t.right}},J=()=>M?I?I(e,B):s.jsxRuntimeExports.jsx("span",{className:C("date-value",n?.valueDisplay?.className),...n?.valueDisplay,children:B}):y||s.jsxRuntimeExports.jsx(i.DefaultEmptyTrigger,{icon:"calendar_add_on"}),O=z();return s.jsxRuntimeExports.jsxs(i.Container,{...n?.root,className:C(v.BLOCK_DIALOG_CLOSE_CLASS,F,n?.root?.className),children:[s.jsxRuntimeExports.jsx(i.Trigger,{ref:p,onClick:H,disabled:b,type:"button",...n?.trigger,className:C(M?"has-value":"empty",n?.trigger?.className),children:J()}),d&&X.createPortal(s.jsxRuntimeExports.jsx(i.Dropdown,{ref:k,style:{top:O.top,left:E==="left"?O.left:"auto",right:E==="right"?window.innerWidth-O.left:"auto",...n?.dropdown?.style},onMouseDown:t=>t.stopPropagation(),...n?.dropdown,className:C(v.BLOCK_DIALOG_CLOSE_CLASS,E,n?.dropdown?.className),children:s.jsxRuntimeExports.jsxs(i.DropdownContent,{className:n?.content?.className,...n?.content,children:[s.jsxRuntimeExports.jsx(i.CloseButton,{icon:"close",variant:"text",onClick:D,...n?.closeButton}),s.jsxRuntimeExports.jsxs(i.DateField,{className:n?.startDate?.field?.className,...n?.startDate?.field,children:[s.jsxRuntimeExports.jsx("label",{...n?.startDate?.label,children:"Start date"}),s.jsxRuntimeExports.jsx(i.DateInput,{ref:T,type:"date",value:f,onChange:K,max:j?l.format(j,"yyyy-MM-dd"):void 0,min:g?l.format(g,"yyyy-MM-dd"):void 0,onClick:t=>{try{t.currentTarget.showPicker()}catch{}},...n?.startDate?.input})]}),s.jsxRuntimeExports.jsxs(i.DateField,{className:n?.endDate?.field?.className,...n?.endDate?.field,children:[s.jsxRuntimeExports.jsx("label",{...n?.endDate?.label,children:"End date"}),s.jsxRuntimeExports.jsx(i.DateInput,{ref:q,type:"date",value:x,onChange:G,max:j?l.format(j,"yyyy-MM-dd"):void 0,min:f||(g?l.format(g,"yyyy-MM-dd"):void 0),onClick:t=>{try{t.currentTarget.showPicker()}catch{}},...n?.endDate?.input})]}),M&&s.jsxRuntimeExports.jsx(i.ClearButton,{onClick:$,variant:"text",...n?.clearButton,children:"Clear dates"})]})}),document.body)]})};exports.DateRangePicker=Y;
+//# sourceMappingURL=DateRangePicker.cjs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DateRangePicker.cjs.js","sources":["../../../../../src/components/DateRangePicker/DateRangePicker.tsx"],"sourcesContent":["import {\n  FC,\n  useState,\n  useRef,\n  useEffect,\n  ReactNode,\n  useCallback,\n  HTMLAttributes,\n  ButtonHTMLAttributes,\n  LabelHTMLAttributes,\n  InputHTMLAttributes,\n} from 'react'\nimport { createPortal } from 'react-dom'\nimport { format, isValid, parseISO } from 'date-fns'\nimport * as Styled from './DateRangePicker.styled'\nimport clsx from 'clsx'\nimport { BLOCK_DIALOG_CLOSE_CLASS } from '../LinksManager/CellEditingDialog'\nimport { ButtonProps } from '@ynput/ayon-react-components'\n\nexport interface DateRangePickerPassthrough {\n  root?: Partial<HTMLAttributes<HTMLDivElement>>\n  trigger?: Partial<ButtonHTMLAttributes<HTMLButtonElement>>\n  dropdown?: Partial<HTMLAttributes<HTMLDivElement>>\n  content?: Partial<HTMLAttributes<HTMLDivElement>>\n  startDate?: Partial<{\n    field?: Partial<HTMLAttributes<HTMLDivElement>>\n    label?: Partial<LabelHTMLAttributes<HTMLLabelElement>>\n    input?: Partial<InputHTMLAttributes<HTMLInputElement>>\n  }>\n  endDate?: Partial<{\n    field?: Partial<HTMLAttributes<HTMLDivElement>>\n    label?: Partial<LabelHTMLAttributes<HTMLLabelElement>>\n    input?: Partial<InputHTMLAttributes<HTMLInputElement>>\n  }>\n  clearButton?: Partial<ButtonProps>\n  closeButton?: Partial<ButtonProps>\n  valueDisplay?: Partial<HTMLAttributes<HTMLSpanElement>>\n}\n\nexport interface DateRange {\n  startDate: string | null\n  endDate: string | null\n}\n\nexport interface DateRangePickerProps {\n  /** Current date range value */\n  value: DateRange\n  /** Callback when date range changes */\n  onChange: (range: DateRange) => void\n  /** Custom trigger button when no dates are set */\n  emptyTrigger?: ReactNode\n  /** Custom trigger button when dates are set */\n  valueTrigger?: (range: DateRange, formattedRange: string) => ReactNode\n  /** Alignment of the dropdown relative to trigger */\n  align?: 'left' | 'right'\n  /** Whether the picker is disabled */\n  disabled?: boolean\n  /** Additional class name for the container */\n  className?: string\n  /** Format for displaying dates (default: 'MMM d') */\n  displayFormat?: string\n  /** Minimum selectable date */\n  minDate?: Date\n  /** Maximum selectable date */\n  maxDate?: Date\n  /** Passthrough props for internal components */\n  pt?: DateRangePickerPassthrough\n}\n\nconst formatDateForInput = (dateStr: string | null): string => {\n  if (!dateStr) return ''\n  try {\n    const date = parseISO(dateStr)\n    if (isValid(date)) {\n      return format(date, 'yyyy-MM-dd')\n    }\n  } catch {\n    return ''\n  }\n  return ''\n}\n\nconst formatDateForDisplay = (dateStr: string | null, formatStr: string): string | null => {\n  if (!dateStr) return null\n  try {\n    const date = parseISO(dateStr)\n    if (isValid(date)) {\n      return format(date, formatStr)\n    }\n  } catch {\n    return null\n  }\n  return null\n}\n\nconst parseDateInput = (value: string): string | null => {\n  if (!value) return null\n  try {\n    const date = new Date(value)\n    if (isValid(date)) {\n      date.setUTCHours(0, 0, 0, 0)\n      return date.toISOString()\n    }\n  } catch {\n    return null\n  }\n  return null\n}\n\nexport const DateRangePicker: FC<DateRangePickerProps> = ({\n  value,\n  onChange,\n  emptyTrigger,\n  valueTrigger,\n  align = 'left',\n  disabled = false,\n  className,\n  displayFormat = 'MMM d',\n  minDate,\n  maxDate,\n  pt,\n}) => {\n  const [isOpen, setIsOpen] = useState(false)\n  const [localStartDate, setLocalStartDate] = useState('')\n  const [localEndDate, setLocalEndDate] = useState('')\n  const triggerRef = useRef<HTMLButtonElement>(null)\n  const dropdownRef = useRef<HTMLDivElement>(null)\n  const startDateInputRef = useRef<HTMLInputElement>(null)\n  const endDateInputRef = useRef<HTMLInputElement>(null)\n\n  const hasValue = value.startDate || value.endDate\n\n  const handleSaveAndClose = useCallback(() => {\n    const start = parseDateInput(localStartDate)\n    const end = parseDateInput(localEndDate)\n    if (start !== value.startDate || end !== value.endDate) {\n      onChange({ startDate: start, endDate: end })\n    }\n    setIsOpen(false)\n  }, [localStartDate, localEndDate, value.startDate, value.endDate, onChange])\n\n  useEffect(() => {\n    if (isOpen) {\n      setLocalStartDate(formatDateForInput(value.startDate))\n      setLocalEndDate(formatDateForInput(value.endDate))\n\n      // Automatically open start date picker if no dates are set\n      if (!value.startDate && !value.endDate) {\n        setTimeout(() => {\n          try {\n            startDateInputRef.current?.showPicker()\n          } catch (err) {\n            // fallback\n          }\n        }, 100)\n      }\n    }\n  }, [isOpen, value.startDate, value.endDate])\n\n  // Handle click outside to close\n  useEffect(() => {\n    if (!isOpen) return\n\n    const handleClickOutside = (e: MouseEvent) => {\n      const target = e.target as Node\n      if (\n        triggerRef.current &&\n        !triggerRef.current.contains(target) &&\n        dropdownRef.current &&\n        !dropdownRef.current.contains(target)\n      ) {\n        handleSaveAndClose()\n      }\n    }\n\n    document.addEventListener('mousedown', handleClickOutside)\n    return () => document.removeEventListener('mousedown', handleClickOutside)\n  }, [isOpen, handleSaveAndClose])\n\n  // Handle escape key\n  useEffect(() => {\n    if (!isOpen) return\n\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        e.stopPropagation()\n        handleSaveAndClose()\n      }\n    }\n\n    document.addEventListener('keydown', handleKeyDown)\n    return () => document.removeEventListener('keydown', handleKeyDown)\n  }, [isOpen, handleSaveAndClose])\n\n  const handleStartDateChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const newValue = e.target.value\n    setLocalStartDate(newValue)\n\n    const newStartDate = parseDateInput(newValue)\n    const currentEndDate = parseDateInput(localEndDate)\n\n    // Validate: startDate cannot be after endDate\n    if (newStartDate && currentEndDate) {\n      const start = new Date(newStartDate)\n      const end = new Date(currentEndDate)\n      if (start > end) {\n        // If start is after end, set end to same as start\n        setLocalEndDate(newValue)\n      }\n    }\n\n    // Automatically open end date picker after start date is selected\n    if (newStartDate) {\n      setTimeout(() => {\n        try {\n          endDateInputRef.current?.showPicker()\n        } catch (err) {\n          // fallback\n        }\n      }, 100)\n    }\n  }\n\n  const handleEndDateChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const newValue = e.target.value\n    setLocalEndDate(newValue)\n\n    const newEndDate = parseDateInput(newValue)\n    const currentStartDate = parseDateInput(localStartDate)\n\n    let finalStart = currentStartDate\n    let finalEnd = newEndDate\n\n    // Validate: endDate cannot be before startDate\n    if (newEndDate && currentStartDate) {\n      const start = new Date(currentStartDate)\n      const end = new Date(newEndDate)\n      if (end < start) {\n        // If end is before start, set start to same as end\n        setLocalStartDate(newValue)\n        finalStart = newEndDate\n      }\n    }\n\n    onChange({ startDate: finalStart, endDate: finalEnd })\n  }\n\n  const handleClear = () => {\n    setLocalStartDate('')\n    setLocalEndDate('')\n    onChange({ startDate: null, endDate: null })\n    setIsOpen(false)\n  }\n\n  const handleToggle = (e: React.MouseEvent) => {\n    e.stopPropagation()\n    if (!disabled) {\n      if (isOpen) {\n        handleSaveAndClose()\n      } else {\n        setIsOpen(true)\n      }\n    }\n  }\n\n  // Format the display string\n  const displayStart = isOpen ? parseDateInput(localStartDate) : value.startDate\n  const displayEnd = isOpen ? parseDateInput(localEndDate) : value.endDate\n\n  const startDisplay = formatDateForDisplay(displayStart, displayFormat)\n  const endDisplay = formatDateForDisplay(displayEnd, displayFormat)\n  const formattedRange =\n    startDisplay && endDisplay\n      ? `${startDisplay} - ${endDisplay}`\n      : startDisplay || endDisplay || ''\n\n  // Get position for dropdown\n  const getDropdownPosition = () => {\n    if (!triggerRef.current) return { top: 0, left: 0 }\n    const rect = triggerRef.current.getBoundingClientRect()\n    return {\n      top: rect.bottom + 4,\n      left: align === 'left' ? rect.left : rect.right,\n    }\n  }\n\n  const renderTrigger = () => {\n    if (hasValue) {\n      if (valueTrigger) {\n        return valueTrigger(value, formattedRange)\n      }\n      return (\n        <span className={clsx('date-value', pt?.valueDisplay?.className)} {...pt?.valueDisplay}>\n          {formattedRange}\n        </span>\n      )\n    }\n\n    if (emptyTrigger) {\n      return emptyTrigger\n    }\n\n    return <Styled.DefaultEmptyTrigger icon={'calendar_add_on'} />\n  }\n\n  const position = getDropdownPosition()\n\n  return (\n    <Styled.Container\n      {...pt?.root}\n      className={clsx(BLOCK_DIALOG_CLOSE_CLASS, className, pt?.root?.className)}\n    >\n      <Styled.Trigger\n        ref={triggerRef}\n        onClick={handleToggle}\n        disabled={disabled}\n        type=\"button\"\n        {...pt?.trigger}\n        className={clsx(hasValue ? 'has-value' : 'empty', pt?.trigger?.className)}\n      >\n        {renderTrigger()}\n      </Styled.Trigger>\n\n      {isOpen &&\n        createPortal(\n          <Styled.Dropdown\n            ref={dropdownRef}\n            style={{\n              top: position.top,\n              left: align === 'left' ? position.left : 'auto',\n              right: align === 'right' ? window.innerWidth - position.left : 'auto',\n              ...pt?.dropdown?.style,\n            }}\n            onMouseDown={(e) => e.stopPropagation()}\n            {...pt?.dropdown}\n            className={clsx(BLOCK_DIALOG_CLOSE_CLASS, align, pt?.dropdown?.className)}\n          >\n            <Styled.DropdownContent className={pt?.content?.className} {...pt?.content}>\n              <Styled.CloseButton\n                icon=\"close\"\n                variant=\"text\"\n                onClick={handleSaveAndClose}\n                {...pt?.closeButton}\n              />\n              <Styled.DateField\n                className={pt?.startDate?.field?.className}\n                {...pt?.startDate?.field}\n              >\n                <label {...pt?.startDate?.label}>Start date</label>\n                <Styled.DateInput\n                  ref={startDateInputRef}\n                  type=\"date\"\n                  value={localStartDate}\n                  onChange={handleStartDateChange}\n                  max={maxDate ? format(maxDate, 'yyyy-MM-dd') : undefined}\n                  min={minDate ? format(minDate, 'yyyy-MM-dd') : undefined}\n                  onClick={(e: any) => {\n                    try {\n                      e.currentTarget.showPicker()\n                    } catch (err) {\n                      // fallback for older browsers\n                    }\n                  }}\n                  {...pt?.startDate?.input}\n                />\n              </Styled.DateField>\n\n              <Styled.DateField className={pt?.endDate?.field?.className} {...pt?.endDate?.field}>\n                <label {...pt?.endDate?.label}>End date</label>\n                <Styled.DateInput\n                  ref={endDateInputRef}\n                  type=\"date\"\n                  value={localEndDate}\n                  onChange={handleEndDateChange}\n                  max={maxDate ? format(maxDate, 'yyyy-MM-dd') : undefined}\n                  min={localStartDate || (minDate ? format(minDate, 'yyyy-MM-dd') : undefined)}\n                  onClick={(e: any) => {\n                    try {\n                      e.currentTarget.showPicker()\n                    } catch (err) {\n                      // fallback for older browsers\n                    }\n                  }}\n                  {...pt?.endDate?.input}\n                />\n              </Styled.DateField>\n\n              {hasValue && (\n                <Styled.ClearButton onClick={handleClear} variant=\"text\" {...pt?.clearButton}>\n                  Clear dates\n                </Styled.ClearButton>\n              )}\n            </Styled.DropdownContent>\n          </Styled.Dropdown>,\n          document.body,\n        )}\n    </Styled.Container>\n  )\n}\n"],"names":["formatDateForInput","dateStr","date","parseISO","isValid","format","formatDateForDisplay","formatStr","parseDateInput","value","DateRangePicker","onChange","emptyTrigger","valueTrigger","align","disabled","className","displayFormat","minDate","maxDate","pt","isOpen","setIsOpen","useState","localStartDate","setLocalStartDate","localEndDate","setLocalEndDate","triggerRef","useRef","dropdownRef","startDateInputRef","endDateInputRef","hasValue","handleSaveAndClose","useCallback","start","end","useEffect","handleClickOutside","e","target","handleKeyDown","handleStartDateChange","newValue","newStartDate","currentEndDate","handleEndDateChange","newEndDate","currentStartDate","finalStart","finalEnd","handleClear","handleToggle","displayStart","displayEnd","startDisplay","endDisplay","formattedRange","getDropdownPosition","rect","renderTrigger","jsx","clsx","Styled.DefaultEmptyTrigger","position","jsxs","Styled.Container","BLOCK_DIALOG_CLOSE_CLASS","Styled.Trigger","createPortal","Styled.Dropdown","Styled.DropdownContent","Styled.CloseButton","Styled.DateField","Styled.DateInput","Styled.ClearButton"],"mappings":"gUAqEMA,EAAsBC,GAAmC,CAC7D,GAAI,CAACA,EAAS,MAAO,GACrB,GAAI,CACF,MAAMC,EAAOC,EAAAA,SAASF,CAAO,EAC7B,GAAIG,EAAAA,QAAQF,CAAI,EACd,OAAOG,EAAAA,OAAOH,EAAM,YAAY,CAEpC,MAAQ,CACN,MAAO,EACT,CACA,MAAO,EACT,EAEMI,EAAuB,CAACL,EAAwBM,IAAqC,CACzF,GAAI,CAACN,EAAS,OAAO,KACrB,GAAI,CACF,MAAMC,EAAOC,EAAAA,SAASF,CAAO,EAC7B,GAAIG,EAAAA,QAAQF,CAAI,EACd,OAAOG,EAAAA,OAAOH,EAAMK,CAAS,CAEjC,MAAQ,CACN,OAAO,IACT,CACA,OAAO,IACT,EAEMC,EAAkBC,GAAiC,CACvD,GAAI,CAACA,EAAO,OAAO,KACnB,GAAI,CACF,MAAMP,EAAO,IAAI,KAAKO,CAAK,EAC3B,GAAIL,EAAAA,QAAQF,CAAI,EACd,OAAAA,EAAK,YAAY,EAAG,EAAG,EAAG,CAAC,EACpBA,EAAK,YAAA,CAEhB,MAAQ,CACN,OAAO,IACT,CACA,OAAO,IACT,EAEaQ,EAA4C,CAAC,CACxD,MAAAD,EACA,SAAAE,EACA,aAAAC,EACA,aAAAC,EACA,MAAAC,EAAQ,OACR,SAAAC,EAAW,GACX,UAAAC,EACA,cAAAC,EAAgB,QAChB,QAAAC,EACA,QAAAC,EACA,GAAAC,CACF,IAAM,CACJ,KAAM,CAACC,EAAQC,CAAS,EAAIC,EAAAA,SAAS,EAAK,EACpC,CAACC,EAAgBC,CAAiB,EAAIF,EAAAA,SAAS,EAAE,EACjD,CAACG,EAAcC,CAAe,EAAIJ,EAAAA,SAAS,EAAE,EAC7CK,EAAaC,EAAAA,OAA0B,IAAI,EAC3CC,EAAcD,EAAAA,OAAuB,IAAI,EACzCE,EAAoBF,EAAAA,OAAyB,IAAI,EACjDG,EAAkBH,EAAAA,OAAyB,IAAI,EAE/CI,EAAWxB,EAAM,WAAaA,EAAM,QAEpCyB,EAAqBC,EAAAA,YAAY,IAAM,CAC3C,MAAMC,EAAQ5B,EAAegB,CAAc,EACrCa,EAAM7B,EAAekB,CAAY,GACnCU,IAAU3B,EAAM,WAAa4B,IAAQ5B,EAAM,UAC7CE,EAAS,CAAE,UAAWyB,EAAO,QAASC,EAAK,EAE7Cf,EAAU,EAAK,CACjB,EAAG,CAACE,EAAgBE,EAAcjB,EAAM,UAAWA,EAAM,QAASE,CAAQ,CAAC,EAE3E2B,EAAAA,UAAU,IAAM,CACVjB,IACFI,EAAkBzB,EAAmBS,EAAM,SAAS,CAAC,EACrDkB,EAAgB3B,EAAmBS,EAAM,OAAO,CAAC,EAG7C,CAACA,EAAM,WAAa,CAACA,EAAM,SAC7B,WAAW,IAAM,CACf,GAAI,CACFsB,EAAkB,SAAS,WAAA,CAC7B,MAAc,CAEd,CACF,EAAG,GAAG,EAGZ,EAAG,CAACV,EAAQZ,EAAM,UAAWA,EAAM,OAAO,CAAC,EAG3C6B,EAAAA,UAAU,IAAM,CACd,GAAI,CAACjB,EAAQ,OAEb,MAAMkB,EAAsBC,GAAkB,CAC5C,MAAMC,EAASD,EAAE,OAEfZ,EAAW,SACX,CAACA,EAAW,QAAQ,SAASa,CAAM,GACnCX,EAAY,SACZ,CAACA,EAAY,QAAQ,SAASW,CAAM,GAEpCP,EAAA,CAEJ,EAEA,gBAAS,iBAAiB,YAAaK,CAAkB,EAClD,IAAM,SAAS,oBAAoB,YAAaA,CAAkB,CAC3E,EAAG,CAAClB,EAAQa,CAAkB,CAAC,EAG/BI,EAAAA,UAAU,IAAM,CACd,GAAI,CAACjB,EAAQ,OAEb,MAAMqB,EAAiBF,GAAqB,CACtCA,EAAE,MAAQ,WACZA,EAAE,gBAAA,EACFN,EAAA,EAEJ,EAEA,gBAAS,iBAAiB,UAAWQ,CAAa,EAC3C,IAAM,SAAS,oBAAoB,UAAWA,CAAa,CACpE,EAAG,CAACrB,EAAQa,CAAkB,CAAC,EAE/B,MAAMS,EAAyBH,GAA2C,CACxE,MAAMI,EAAWJ,EAAE,OAAO,MAC1Bf,EAAkBmB,CAAQ,EAE1B,MAAMC,EAAerC,EAAeoC,CAAQ,EACtCE,EAAiBtC,EAAekB,CAAY,EAGlD,GAAImB,GAAgBC,EAAgB,CAClC,MAAMV,EAAQ,IAAI,KAAKS,CAAY,EAC7BR,EAAM,IAAI,KAAKS,CAAc,EAC/BV,EAAQC,GAEVV,EAAgBiB,CAAQ,CAE5B,CAGIC,GACF,WAAW,IAAM,CACf,GAAI,CACFb,EAAgB,SAAS,WAAA,CAC3B,MAAc,CAEd,CACF,EAAG,GAAG,CAEV,EAEMe,EAAuBP,GAA2C,CACtE,MAAMI,EAAWJ,EAAE,OAAO,MAC1Bb,EAAgBiB,CAAQ,EAExB,MAAMI,EAAaxC,EAAeoC,CAAQ,EACpCK,EAAmBzC,EAAegB,CAAc,EAEtD,IAAI0B,EAAaD,EACbE,EAAWH,EAGf,GAAIA,GAAcC,EAAkB,CAClC,MAAMb,EAAQ,IAAI,KAAKa,CAAgB,EAC3B,IAAI,KAAKD,CAAU,EACrBZ,IAERX,EAAkBmB,CAAQ,EAC1BM,EAAaF,EAEjB,CAEArC,EAAS,CAAE,UAAWuC,EAAY,QAASC,EAAU,CACvD,EAEMC,EAAc,IAAM,CACxB3B,EAAkB,EAAE,EACpBE,EAAgB,EAAE,EAClBhB,EAAS,CAAE,UAAW,KAAM,QAAS,KAAM,EAC3CW,EAAU,EAAK,CACjB,EAEM+B,EAAgBb,GAAwB,CAC5CA,EAAE,gBAAA,EACGzB,IACCM,EACFa,EAAA,EAEAZ,EAAU,EAAI,EAGpB,EAGMgC,EAAejC,EAASb,EAAegB,CAAc,EAAIf,EAAM,UAC/D8C,EAAalC,EAASb,EAAekB,CAAY,EAAIjB,EAAM,QAE3D+C,EAAelD,EAAqBgD,EAAcrC,CAAa,EAC/DwC,EAAanD,EAAqBiD,EAAYtC,CAAa,EAC3DyC,EACJF,GAAgBC,EACZ,GAAGD,CAAY,MAAMC,CAAU,GAC/BD,GAAgBC,GAAc,GAG9BE,EAAsB,IAAM,CAChC,GAAI,CAAC/B,EAAW,QAAS,MAAO,CAAE,IAAK,EAAG,KAAM,CAAA,EAChD,MAAMgC,EAAOhC,EAAW,QAAQ,sBAAA,EAChC,MAAO,CACL,IAAKgC,EAAK,OAAS,EACnB,KAAM9C,IAAU,OAAS8C,EAAK,KAAOA,EAAK,KAAA,CAE9C,EAEMC,EAAgB,IAChB5B,EACEpB,EACKA,EAAaJ,EAAOiD,CAAc,EAGzCI,EAAAA,kBAAAA,IAAC,OAAA,CAAK,UAAWC,EAAK,aAAc3C,GAAI,cAAc,SAAS,EAAI,GAAGA,GAAI,aACvE,SAAAsC,CAAA,CACH,EAIA9C,GAIGkD,EAAAA,kBAAAA,IAACE,EAAAA,oBAAA,CAA2B,KAAM,iBAAA,CAAmB,EAGxDC,EAAWN,EAAA,EAEjB,OACEO,EAAAA,kBAAAA,KAACC,EAAAA,UAAA,CACE,GAAG/C,GAAI,KACR,UAAW2C,EAAKK,EAAAA,yBAA0BpD,EAAWI,GAAI,MAAM,SAAS,EAExE,SAAA,CAAA0C,EAAAA,kBAAAA,IAACO,EAAAA,QAAA,CACC,IAAKzC,EACL,QAASyB,EACT,SAAAtC,EACA,KAAK,SACJ,GAAGK,GAAI,QACR,UAAW2C,EAAK9B,EAAW,YAAc,QAASb,GAAI,SAAS,SAAS,EAEvE,SAAAyC,EAAA,CAAc,CAAA,EAGhBxC,GACCiD,EAAAA,aACER,EAAAA,kBAAAA,IAACS,EAAAA,SAAA,CACC,IAAKzC,EACL,MAAO,CACL,IAAKmC,EAAS,IACd,KAAMnD,IAAU,OAASmD,EAAS,KAAO,OACzC,MAAOnD,IAAU,QAAU,OAAO,WAAamD,EAAS,KAAO,OAC/D,GAAG7C,GAAI,UAAU,KAAA,EAEnB,YAAcoB,GAAMA,EAAE,gBAAA,EACrB,GAAGpB,GAAI,SACR,UAAW2C,EAAKK,EAAAA,yBAA0BtD,EAAOM,GAAI,UAAU,SAAS,EAExE,SAAA8C,EAAAA,kBAAAA,KAACM,kBAAA,CAAuB,UAAWpD,GAAI,SAAS,UAAY,GAAGA,GAAI,QACjE,SAAA,CAAA0C,EAAAA,kBAAAA,IAACW,EAAAA,YAAA,CACC,KAAK,QACL,QAAQ,OACR,QAASvC,EACR,GAAGd,GAAI,WAAA,CAAA,EAEV8C,EAAAA,kBAAAA,KAACQ,EAAAA,UAAA,CACC,UAAWtD,GAAI,WAAW,OAAO,UAChC,GAAGA,GAAI,WAAW,MAEnB,SAAA,CAAA0C,wBAAC,QAAA,CAAO,GAAG1C,GAAI,WAAW,MAAO,SAAA,aAAU,EAC3C0C,EAAAA,kBAAAA,IAACa,EAAAA,UAAA,CACC,IAAK5C,EACL,KAAK,OACL,MAAOP,EACP,SAAUmB,EACV,IAAKxB,EAAUd,EAAAA,OAAOc,EAAS,YAAY,EAAI,OAC/C,IAAKD,EAAUb,EAAAA,OAAOa,EAAS,YAAY,EAAI,OAC/C,QAAUsB,GAAW,CACnB,GAAI,CACFA,EAAE,cAAc,WAAA,CAClB,MAAc,CAEd,CACF,EACC,GAAGpB,GAAI,WAAW,KAAA,CAAA,CACrB,CAAA,CAAA,EAGF8C,EAAAA,kBAAAA,KAACQ,EAAAA,UAAA,CAAiB,UAAWtD,GAAI,SAAS,OAAO,UAAY,GAAGA,GAAI,SAAS,MAC3E,SAAA,CAAA0C,wBAAC,QAAA,CAAO,GAAG1C,GAAI,SAAS,MAAO,SAAA,WAAQ,EACvC0C,EAAAA,kBAAAA,IAACa,EAAAA,UAAA,CACC,IAAK3C,EACL,KAAK,OACL,MAAON,EACP,SAAUqB,EACV,IAAK5B,EAAUd,EAAAA,OAAOc,EAAS,YAAY,EAAI,OAC/C,IAAKK,IAAmBN,EAAUb,EAAAA,OAAOa,EAAS,YAAY,EAAI,QAClE,QAAUsB,GAAW,CACnB,GAAI,CACFA,EAAE,cAAc,WAAA,CAClB,MAAc,CAEd,CACF,EACC,GAAGpB,GAAI,SAAS,KAAA,CAAA,CACnB,EACF,EAECa,GACC6B,EAAAA,kBAAAA,IAACc,cAAA,CAAmB,QAASxB,EAAa,QAAQ,OAAQ,GAAGhC,GAAI,YAAa,SAAA,aAAA,CAE9E,CAAA,CAAA,CAEJ,CAAA,CAAA,EAEF,SAAS,IAAA,CACX,CAAA,CAAA,CAGR"}

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

@@ -0,0 +1,216 @@
+import { j as a } from "../../../../_virtual/jsx-runtime.es.js";
+import { useState as R, useRef as E, useCallback as nt, useEffect as O } from "react";
+import { createPortal as rt } from "react-dom";
+import { format as f, isValid as b, parseISO as U } from "date-fns";
+import { Container as at, Trigger as st, Dropdown as ot, DropdownContent as ct, CloseButton as lt, DateField as F, DateInput as K, ClearButton as dt, DefaultEmptyTrigger as it } from "./DateRangePicker.styled.es.js";
+import j from "clsx";
+import { BLOCK_DIALOG_CLOSE_CLASS as $ } from "../LinksManager/CellEditingDialog.es.js";
+const G = (e) => {
+  if (!e) return "";
+  try {
+    const s = U(e);
+    if (b(s))
+      return f(s, "yyyy-MM-dd");
+  } catch {
+    return "";
+  }
+  return "";
+}, H = (e, s) => {
+  if (!e) return null;
+  try {
+    const D = U(e);
+    if (b(D))
+      return f(D, s);
+  } catch {
+    return null;
+  }
+  return null;
+}, l = (e) => {
+  if (!e) return null;
+  try {
+    const s = new Date(e);
+    if (b(s))
+      return s.setUTCHours(0, 0, 0, 0), s.toISOString();
+  } catch {
+    return null;
+  }
+  return null;
+}, gt = ({
+  value: e,
+  onChange: s,
+  emptyTrigger: D,
+  valueTrigger: T,
+  align: p = "left",
+  disabled: B = !1,
+  className: W,
+  displayFormat: v = "MMM d",
+  minDate: w,
+  maxDate: g,
+  pt: n
+}) => {
+  const [c, k] = R(!1), [d, C] = R(""), [y, x] = R(""), m = E(null), M = E(null), _ = E(null), V = E(null), N = e.startDate || e.endDate, i = nt(() => {
+    const t = l(d), r = l(y);
+    (t !== e.startDate || r !== e.endDate) && s({ startDate: t, endDate: r }), k(!1);
+  }, [d, y, e.startDate, e.endDate, s]);
+  O(() => {
+    c && (C(G(e.startDate)), x(G(e.endDate)), !e.startDate && !e.endDate && setTimeout(() => {
+      try {
+        _.current?.showPicker();
+      } catch {
+      }
+    }, 100));
+  }, [c, e.startDate, e.endDate]), O(() => {
+    if (!c) return;
+    const t = (r) => {
+      const o = r.target;
+      m.current && !m.current.contains(o) && M.current && !M.current.contains(o) && i();
+    };
+    return document.addEventListener("mousedown", t), () => document.removeEventListener("mousedown", t);
+  }, [c, i]), O(() => {
+    if (!c) return;
+    const t = (r) => {
+      r.key === "Escape" && (r.stopPropagation(), i());
+    };
+    return document.addEventListener("keydown", t), () => document.removeEventListener("keydown", t);
+  }, [c, i]);
+  const q = (t) => {
+    const r = t.target.value;
+    C(r);
+    const o = l(r), u = l(y);
+    if (o && u) {
+      const h = new Date(o), I = new Date(u);
+      h > I && x(r);
+    }
+    o && setTimeout(() => {
+      try {
+        V.current?.showPicker();
+      } catch {
+      }
+    }, 100);
+  }, z = (t) => {
+    const r = t.target.value;
+    x(r);
+    const o = l(r), u = l(d);
+    let h = u, I = o;
+    if (o && u) {
+      const et = new Date(u);
+      new Date(o) < et && (C(r), h = o);
+    }
+    s({ startDate: h, endDate: I });
+  }, J = () => {
+    C(""), x(""), s({ startDate: null, endDate: null }), k(!1);
+  }, Q = (t) => {
+    t.stopPropagation(), B || (c ? i() : k(!0));
+  }, X = c ? l(d) : e.startDate, Y = c ? l(y) : e.endDate, S = H(X, v), L = H(Y, v), A = S && L ? `${S} - ${L}` : S || L || "", Z = () => {
+    if (!m.current) return { top: 0, left: 0 };
+    const t = m.current.getBoundingClientRect();
+    return {
+      top: t.bottom + 4,
+      left: p === "left" ? t.left : t.right
+    };
+  }, tt = () => N ? T ? T(e, A) : /* @__PURE__ */ a.jsx("span", { className: j("date-value", n?.valueDisplay?.className), ...n?.valueDisplay, children: A }) : D || /* @__PURE__ */ a.jsx(it, { icon: "calendar_add_on" }), P = Z();
+  return /* @__PURE__ */ a.jsxs(
+    at,
+    {
+      ...n?.root,
+      className: j($, W, n?.root?.className),
+      children: [
+        /* @__PURE__ */ a.jsx(
+          st,
+          {
+            ref: m,
+            onClick: Q,
+            disabled: B,
+            type: "button",
+            ...n?.trigger,
+            className: j(N ? "has-value" : "empty", n?.trigger?.className),
+            children: tt()
+          }
+        ),
+        c && rt(
+          /* @__PURE__ */ a.jsx(
+            ot,
+            {
+              ref: M,
+              style: {
+                top: P.top,
+                left: p === "left" ? P.left : "auto",
+                right: p === "right" ? window.innerWidth - P.left : "auto",
+                ...n?.dropdown?.style
+              },
+              onMouseDown: (t) => t.stopPropagation(),
+              ...n?.dropdown,
+              className: j($, p, n?.dropdown?.className),
+              children: /* @__PURE__ */ a.jsxs(ct, { className: n?.content?.className, ...n?.content, children: [
+                /* @__PURE__ */ a.jsx(
+                  lt,
+                  {
+                    icon: "close",
+                    variant: "text",
+                    onClick: i,
+                    ...n?.closeButton
+                  }
+                ),
+                /* @__PURE__ */ a.jsxs(
+                  F,
+                  {
+                    className: n?.startDate?.field?.className,
+                    ...n?.startDate?.field,
+                    children: [
+                      /* @__PURE__ */ a.jsx("label", { ...n?.startDate?.label, children: "Start date" }),
+                      /* @__PURE__ */ a.jsx(
+                        K,
+                        {
+                          ref: _,
+                          type: "date",
+                          value: d,
+                          onChange: q,
+                          max: g ? f(g, "yyyy-MM-dd") : void 0,
+                          min: w ? f(w, "yyyy-MM-dd") : void 0,
+                          onClick: (t) => {
+                            try {
+                              t.currentTarget.showPicker();
+                            } catch {
+                            }
+                          },
+                          ...n?.startDate?.input
+                        }
+                      )
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ a.jsxs(F, { className: n?.endDate?.field?.className, ...n?.endDate?.field, children: [
+                  /* @__PURE__ */ a.jsx("label", { ...n?.endDate?.label, children: "End date" }),
+                  /* @__PURE__ */ a.jsx(
+                    K,
+                    {
+                      ref: V,
+                      type: "date",
+                      value: y,
+                      onChange: z,
+                      max: g ? f(g, "yyyy-MM-dd") : void 0,
+                      min: d || (w ? f(w, "yyyy-MM-dd") : void 0),
+                      onClick: (t) => {
+                        try {
+                          t.currentTarget.showPicker();
+                        } catch {
+                        }
+                      },
+                      ...n?.endDate?.input
+                    }
+                  )
+                ] }),
+                N && /* @__PURE__ */ a.jsx(dt, { onClick: J, variant: "text", ...n?.clearButton, children: "Clear dates" })
+              ] })
+            }
+          ),
+          document.body
+        )
+      ]
+    }
+  );
+};
+export {
+  gt as DateRangePicker
+};
+//# sourceMappingURL=DateRangePicker.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DateRangePicker.es.js","sources":["../../../../../src/components/DateRangePicker/DateRangePicker.tsx"],"sourcesContent":["import {\n  FC,\n  useState,\n  useRef,\n  useEffect,\n  ReactNode,\n  useCallback,\n  HTMLAttributes,\n  ButtonHTMLAttributes,\n  LabelHTMLAttributes,\n  InputHTMLAttributes,\n} from 'react'\nimport { createPortal } from 'react-dom'\nimport { format, isValid, parseISO } from 'date-fns'\nimport * as Styled from './DateRangePicker.styled'\nimport clsx from 'clsx'\nimport { BLOCK_DIALOG_CLOSE_CLASS } from '../LinksManager/CellEditingDialog'\nimport { ButtonProps } from '@ynput/ayon-react-components'\n\nexport interface DateRangePickerPassthrough {\n  root?: Partial<HTMLAttributes<HTMLDivElement>>\n  trigger?: Partial<ButtonHTMLAttributes<HTMLButtonElement>>\n  dropdown?: Partial<HTMLAttributes<HTMLDivElement>>\n  content?: Partial<HTMLAttributes<HTMLDivElement>>\n  startDate?: Partial<{\n    field?: Partial<HTMLAttributes<HTMLDivElement>>\n    label?: Partial<LabelHTMLAttributes<HTMLLabelElement>>\n    input?: Partial<InputHTMLAttributes<HTMLInputElement>>\n  }>\n  endDate?: Partial<{\n    field?: Partial<HTMLAttributes<HTMLDivElement>>\n    label?: Partial<LabelHTMLAttributes<HTMLLabelElement>>\n    input?: Partial<InputHTMLAttributes<HTMLInputElement>>\n  }>\n  clearButton?: Partial<ButtonProps>\n  closeButton?: Partial<ButtonProps>\n  valueDisplay?: Partial<HTMLAttributes<HTMLSpanElement>>\n}\n\nexport interface DateRange {\n  startDate: string | null\n  endDate: string | null\n}\n\nexport interface DateRangePickerProps {\n  /** Current date range value */\n  value: DateRange\n  /** Callback when date range changes */\n  onChange: (range: DateRange) => void\n  /** Custom trigger button when no dates are set */\n  emptyTrigger?: ReactNode\n  /** Custom trigger button when dates are set */\n  valueTrigger?: (range: DateRange, formattedRange: string) => ReactNode\n  /** Alignment of the dropdown relative to trigger */\n  align?: 'left' | 'right'\n  /** Whether the picker is disabled */\n  disabled?: boolean\n  /** Additional class name for the container */\n  className?: string\n  /** Format for displaying dates (default: 'MMM d') */\n  displayFormat?: string\n  /** Minimum selectable date */\n  minDate?: Date\n  /** Maximum selectable date */\n  maxDate?: Date\n  /** Passthrough props for internal components */\n  pt?: DateRangePickerPassthrough\n}\n\nconst formatDateForInput = (dateStr: string | null): string => {\n  if (!dateStr) return ''\n  try {\n    const date = parseISO(dateStr)\n    if (isValid(date)) {\n      return format(date, 'yyyy-MM-dd')\n    }\n  } catch {\n    return ''\n  }\n  return ''\n}\n\nconst formatDateForDisplay = (dateStr: string | null, formatStr: string): string | null => {\n  if (!dateStr) return null\n  try {\n    const date = parseISO(dateStr)\n    if (isValid(date)) {\n      return format(date, formatStr)\n    }\n  } catch {\n    return null\n  }\n  return null\n}\n\nconst parseDateInput = (value: string): string | null => {\n  if (!value) return null\n  try {\n    const date = new Date(value)\n    if (isValid(date)) {\n      date.setUTCHours(0, 0, 0, 0)\n      return date.toISOString()\n    }\n  } catch {\n    return null\n  }\n  return null\n}\n\nexport const DateRangePicker: FC<DateRangePickerProps> = ({\n  value,\n  onChange,\n  emptyTrigger,\n  valueTrigger,\n  align = 'left',\n  disabled = false,\n  className,\n  displayFormat = 'MMM d',\n  minDate,\n  maxDate,\n  pt,\n}) => {\n  const [isOpen, setIsOpen] = useState(false)\n  const [localStartDate, setLocalStartDate] = useState('')\n  const [localEndDate, setLocalEndDate] = useState('')\n  const triggerRef = useRef<HTMLButtonElement>(null)\n  const dropdownRef = useRef<HTMLDivElement>(null)\n  const startDateInputRef = useRef<HTMLInputElement>(null)\n  const endDateInputRef = useRef<HTMLInputElement>(null)\n\n  const hasValue = value.startDate || value.endDate\n\n  const handleSaveAndClose = useCallback(() => {\n    const start = parseDateInput(localStartDate)\n    const end = parseDateInput(localEndDate)\n    if (start !== value.startDate || end !== value.endDate) {\n      onChange({ startDate: start, endDate: end })\n    }\n    setIsOpen(false)\n  }, [localStartDate, localEndDate, value.startDate, value.endDate, onChange])\n\n  useEffect(() => {\n    if (isOpen) {\n      setLocalStartDate(formatDateForInput(value.startDate))\n      setLocalEndDate(formatDateForInput(value.endDate))\n\n      // Automatically open start date picker if no dates are set\n      if (!value.startDate && !value.endDate) {\n        setTimeout(() => {\n          try {\n            startDateInputRef.current?.showPicker()\n          } catch (err) {\n            // fallback\n          }\n        }, 100)\n      }\n    }\n  }, [isOpen, value.startDate, value.endDate])\n\n  // Handle click outside to close\n  useEffect(() => {\n    if (!isOpen) return\n\n    const handleClickOutside = (e: MouseEvent) => {\n      const target = e.target as Node\n      if (\n        triggerRef.current &&\n        !triggerRef.current.contains(target) &&\n        dropdownRef.current &&\n        !dropdownRef.current.contains(target)\n      ) {\n        handleSaveAndClose()\n      }\n    }\n\n    document.addEventListener('mousedown', handleClickOutside)\n    return () => document.removeEventListener('mousedown', handleClickOutside)\n  }, [isOpen, handleSaveAndClose])\n\n  // Handle escape key\n  useEffect(() => {\n    if (!isOpen) return\n\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        e.stopPropagation()\n        handleSaveAndClose()\n      }\n    }\n\n    document.addEventListener('keydown', handleKeyDown)\n    return () => document.removeEventListener('keydown', handleKeyDown)\n  }, [isOpen, handleSaveAndClose])\n\n  const handleStartDateChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const newValue = e.target.value\n    setLocalStartDate(newValue)\n\n    const newStartDate = parseDateInput(newValue)\n    const currentEndDate = parseDateInput(localEndDate)\n\n    // Validate: startDate cannot be after endDate\n    if (newStartDate && currentEndDate) {\n      const start = new Date(newStartDate)\n      const end = new Date(currentEndDate)\n      if (start > end) {\n        // If start is after end, set end to same as start\n        setLocalEndDate(newValue)\n      }\n    }\n\n    // Automatically open end date picker after start date is selected\n    if (newStartDate) {\n      setTimeout(() => {\n        try {\n          endDateInputRef.current?.showPicker()\n        } catch (err) {\n          // fallback\n        }\n      }, 100)\n    }\n  }\n\n  const handleEndDateChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const newValue = e.target.value\n    setLocalEndDate(newValue)\n\n    const newEndDate = parseDateInput(newValue)\n    const currentStartDate = parseDateInput(localStartDate)\n\n    let finalStart = currentStartDate\n    let finalEnd = newEndDate\n\n    // Validate: endDate cannot be before startDate\n    if (newEndDate && currentStartDate) {\n      const start = new Date(currentStartDate)\n      const end = new Date(newEndDate)\n      if (end < start) {\n        // If end is before start, set start to same as end\n        setLocalStartDate(newValue)\n        finalStart = newEndDate\n      }\n    }\n\n    onChange({ startDate: finalStart, endDate: finalEnd })\n  }\n\n  const handleClear = () => {\n    setLocalStartDate('')\n    setLocalEndDate('')\n    onChange({ startDate: null, endDate: null })\n    setIsOpen(false)\n  }\n\n  const handleToggle = (e: React.MouseEvent) => {\n    e.stopPropagation()\n    if (!disabled) {\n      if (isOpen) {\n        handleSaveAndClose()\n      } else {\n        setIsOpen(true)\n      }\n    }\n  }\n\n  // Format the display string\n  const displayStart = isOpen ? parseDateInput(localStartDate) : value.startDate\n  const displayEnd = isOpen ? parseDateInput(localEndDate) : value.endDate\n\n  const startDisplay = formatDateForDisplay(displayStart, displayFormat)\n  const endDisplay = formatDateForDisplay(displayEnd, displayFormat)\n  const formattedRange =\n    startDisplay && endDisplay\n      ? `${startDisplay} - ${endDisplay}`\n      : startDisplay || endDisplay || ''\n\n  // Get position for dropdown\n  const getDropdownPosition = () => {\n    if (!triggerRef.current) return { top: 0, left: 0 }\n    const rect = triggerRef.current.getBoundingClientRect()\n    return {\n      top: rect.bottom + 4,\n      left: align === 'left' ? rect.left : rect.right,\n    }\n  }\n\n  const renderTrigger = () => {\n    if (hasValue) {\n      if (valueTrigger) {\n        return valueTrigger(value, formattedRange)\n      }\n      return (\n        <span className={clsx('date-value', pt?.valueDisplay?.className)} {...pt?.valueDisplay}>\n          {formattedRange}\n        </span>\n      )\n    }\n\n    if (emptyTrigger) {\n      return emptyTrigger\n    }\n\n    return <Styled.DefaultEmptyTrigger icon={'calendar_add_on'} />\n  }\n\n  const position = getDropdownPosition()\n\n  return (\n    <Styled.Container\n      {...pt?.root}\n      className={clsx(BLOCK_DIALOG_CLOSE_CLASS, className, pt?.root?.className)}\n    >\n      <Styled.Trigger\n        ref={triggerRef}\n        onClick={handleToggle}\n        disabled={disabled}\n        type=\"button\"\n        {...pt?.trigger}\n        className={clsx(hasValue ? 'has-value' : 'empty', pt?.trigger?.className)}\n      >\n        {renderTrigger()}\n      </Styled.Trigger>\n\n      {isOpen &&\n        createPortal(\n          <Styled.Dropdown\n            ref={dropdownRef}\n            style={{\n              top: position.top,\n              left: align === 'left' ? position.left : 'auto',\n              right: align === 'right' ? window.innerWidth - position.left : 'auto',\n              ...pt?.dropdown?.style,\n            }}\n            onMouseDown={(e) => e.stopPropagation()}\n            {...pt?.dropdown}\n            className={clsx(BLOCK_DIALOG_CLOSE_CLASS, align, pt?.dropdown?.className)}\n          >\n            <Styled.DropdownContent className={pt?.content?.className} {...pt?.content}>\n              <Styled.CloseButton\n                icon=\"close\"\n                variant=\"text\"\n                onClick={handleSaveAndClose}\n                {...pt?.closeButton}\n              />\n              <Styled.DateField\n                className={pt?.startDate?.field?.className}\n                {...pt?.startDate?.field}\n              >\n                <label {...pt?.startDate?.label}>Start date</label>\n                <Styled.DateInput\n                  ref={startDateInputRef}\n                  type=\"date\"\n                  value={localStartDate}\n                  onChange={handleStartDateChange}\n                  max={maxDate ? format(maxDate, 'yyyy-MM-dd') : undefined}\n                  min={minDate ? format(minDate, 'yyyy-MM-dd') : undefined}\n                  onClick={(e: any) => {\n                    try {\n                      e.currentTarget.showPicker()\n                    } catch (err) {\n                      // fallback for older browsers\n                    }\n                  }}\n                  {...pt?.startDate?.input}\n                />\n              </Styled.DateField>\n\n              <Styled.DateField className={pt?.endDate?.field?.className} {...pt?.endDate?.field}>\n                <label {...pt?.endDate?.label}>End date</label>\n                <Styled.DateInput\n                  ref={endDateInputRef}\n                  type=\"date\"\n                  value={localEndDate}\n                  onChange={handleEndDateChange}\n                  max={maxDate ? format(maxDate, 'yyyy-MM-dd') : undefined}\n                  min={localStartDate || (minDate ? format(minDate, 'yyyy-MM-dd') : undefined)}\n                  onClick={(e: any) => {\n                    try {\n                      e.currentTarget.showPicker()\n                    } catch (err) {\n                      // fallback for older browsers\n                    }\n                  }}\n                  {...pt?.endDate?.input}\n                />\n              </Styled.DateField>\n\n              {hasValue && (\n                <Styled.ClearButton onClick={handleClear} variant=\"text\" {...pt?.clearButton}>\n                  Clear dates\n                </Styled.ClearButton>\n              )}\n            </Styled.DropdownContent>\n          </Styled.Dropdown>,\n          document.body,\n        )}\n    </Styled.Container>\n  )\n}\n"],"names":["formatDateForInput","dateStr","date","parseISO","isValid","format","formatDateForDisplay","formatStr","parseDateInput","value","DateRangePicker","onChange","emptyTrigger","valueTrigger","align","disabled","className","displayFormat","minDate","maxDate","pt","isOpen","setIsOpen","useState","localStartDate","setLocalStartDate","localEndDate","setLocalEndDate","triggerRef","useRef","dropdownRef","startDateInputRef","endDateInputRef","hasValue","handleSaveAndClose","useCallback","start","end","useEffect","handleClickOutside","e","target","handleKeyDown","handleStartDateChange","newValue","newStartDate","currentEndDate","handleEndDateChange","newEndDate","currentStartDate","finalStart","finalEnd","handleClear","handleToggle","displayStart","displayEnd","startDisplay","endDisplay","formattedRange","getDropdownPosition","rect","renderTrigger","jsx","clsx","Styled.DefaultEmptyTrigger","position","jsxs","Styled.Container","BLOCK_DIALOG_CLOSE_CLASS","Styled.Trigger","createPortal","Styled.Dropdown","Styled.DropdownContent","Styled.CloseButton","Styled.DateField","Styled.DateInput","Styled.ClearButton"],"mappings":"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"}

package/dist/shared/src/components/DateRangePicker/DateRangePicker.styled.cjs.js

@@ -0,0 +1,134 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("@ynput/ayon-react-components"),o=require("styled-components"),e=o.keyframes`
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+`,t=o.div`
+  position: relative;
+  display: inline-flex;
+`,n=o.button`
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  /* Default styling for value display */
+  .date-value {
+    cursor: pointer;
+    border-radius: 4px;
+    padding: 2px 4px;
+    font-size: 0.85em;
+    color: var(--md-sys-color-outline);
+
+    &:hover {
+      background-color: var(--md-sys-color-surface-container-highest-hover);
+    }
+  }
+
+  /* Empty state styling */
+  &.empty {
+    width: 24px;
+    height: 24px;
+  }
+`,a=o(r.Icon)`
+  width: 20px;
+  height: 20px;
+  min-width: 20px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+  border: 1px dashed var(--md-sys-color-outline);
+  cursor: pointer;
+  font-size: 14px;
+  color: var(--md-sys-color-outline);
+
+  &:hover {
+    background-color: var(--md-sys-color-surface-container-highest-hover);
+  }
+`,i=o.div`
+  position: fixed;
+  z-index: 1001;
+  background-color: var(--md-sys-color-surface-container-highest);
+  border-radius: var(--border-radius-l);
+  box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.2);
+  animation: ${e} 0.15s ease-out;
+
+  &.right {
+    transform-origin: top right;
+  }
+
+  &.left {
+    transform-origin: top left;
+  }
+`,s=o.div`
+  display: flex;
+  flex-direction: column;
+  gap: var(--base-gap-small);
+  padding: var(--padding-m);
+  position: relative;
+`,l=o(r.Button)`
+  &.hasIcon {
+    padding: 4px;
+  }
+  position: absolute;
+  top: 2px;
+  right: 2px;
+  background: none;
+  .icon {
+    font-size: 18px;
+    color: var(--md-sys-color-outline);
+  }
+
+  &:hover {
+    background-color: var(--md-sys-color-surface-container-highest-hover);
+  }
+`,d=o.div`
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+
+  label {
+    ${r.theme.labelSmall}
+    color: var(--md-sys-color-outline);
+  }
+`,c=o.input`
+  background-color: var(--md-sys-color-surface-container-low);
+  border: 1px solid var(--md-sys-color-outline-variant);
+  border-radius: var(--border-radius-m);
+  padding: var(--padding-s) var(--padding-m);
+  ${r.theme.bodySmall}
+  color: var(--md-sys-color-on-surface);
+  cursor: pointer;
+
+  &:hover {
+    border-color: var(--md-sys-color-outline);
+  }
+
+  &:focus {
+    outline: none;
+    border-color: var(--md-sys-color-primary);
+  }
+
+  &::-webkit-calendar-picker-indicator {
+    cursor: pointer;
+    filter: invert(0.5);
+  }
+`,p=o(r.Button)`
+  &:hover {
+    background-color: var(--md-sys-color-surface-container-highest-hover);
+  }
+`;exports.ClearButton=p;exports.CloseButton=l;exports.Container=t;exports.DateField=d;exports.DateInput=c;exports.DefaultEmptyTrigger=a;exports.Dropdown=i;exports.DropdownContent=s;exports.Trigger=n;
+//# sourceMappingURL=DateRangePicker.styled.cjs.js.map