@ynput/ayon-frontend-shared 0.2.0 → 0.2.2

package/dist/_virtual/index.cjs4.js

@@ -1,7 +1,7 @@
 "use strict";
 const _commonjsHelpers = require("./_commonjsHelpers.cjs.js");
-const index = require("../node_modules/parse-numeric-range/index.cjs.js");
-var parseNumericRangeExports = index.__require();
-const n = /* @__PURE__ */ _commonjsHelpers.getDefaultExportFromCjs(parseNumericRangeExports);
-module.exports = n;
+const index = require("../node_modules/remove-accents/index.cjs.js");
+var removeAccentsExports = index.__require();
+const removeAccents = /* @__PURE__ */ _commonjsHelpers.getDefaultExportFromCjs(removeAccentsExports);
+module.exports = removeAccents;
 //# sourceMappingURL=index.cjs4.js.map

package/dist/_virtual/index.cjs5.js

@@ -1,7 +1,5 @@
 "use strict";
-const _commonjsHelpers = require("./_commonjsHelpers.cjs.js");
-const index = require("../node_modules/remove-accents/index.cjs.js");
-var removeAccentsExports = index.__require();
-const removeAccents = /* @__PURE__ */ _commonjsHelpers.getDefaultExportFromCjs(removeAccentsExports);
-module.exports = removeAccents;
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+var removeAccents = { exports: {} };
+exports.__module = removeAccents;
 //# sourceMappingURL=index.cjs5.js.map

package/dist/_virtual/index.cjs5.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs5.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
+{"version":3,"file":"index.cjs5.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/_virtual/index.cjs6.js

@@ -1,5 +1,7 @@
 "use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-var parseNumericRange = { exports: {} };
-exports.__module = parseNumericRange;
+const _commonjsHelpers = require("./_commonjsHelpers.cjs.js");
+const index = require("../node_modules/parse-numeric-range/index.cjs.js");
+var parseNumericRangeExports = index.__require();
+const n = /* @__PURE__ */ _commonjsHelpers.getDefaultExportFromCjs(parseNumericRangeExports);
+module.exports = n;
 //# sourceMappingURL=index.cjs6.js.map

package/dist/_virtual/index.cjs6.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs6.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
+{"version":3,"file":"index.cjs6.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist/_virtual/index.cjs7.js

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-var removeAccents = { exports: {} };
-exports.__module = removeAccents;
+var parseNumericRange = { exports: {} };
+exports.__module = parseNumericRange;
 //# sourceMappingURL=index.cjs7.js.map

package/dist/_virtual/index.es4.js

@@ -1,8 +1,8 @@
 import { getDefaultExportFromCjs } from "./_commonjsHelpers.es.js";
-import { __require as requireParseNumericRange } from "../node_modules/parse-numeric-range/index.es.js";
-var parseNumericRangeExports = requireParseNumericRange();
-const n = /* @__PURE__ */ getDefaultExportFromCjs(parseNumericRangeExports);
+import { __require as requireRemoveAccents } from "../node_modules/remove-accents/index.es.js";
+var removeAccentsExports = requireRemoveAccents();
+const removeAccents = /* @__PURE__ */ getDefaultExportFromCjs(removeAccentsExports);
 export {
-  n as default
+  removeAccents as default
 };
 //# sourceMappingURL=index.es4.js.map

package/dist/_virtual/index.es5.js

@@ -1,8 +1,5 @@
-import { getDefaultExportFromCjs } from "./_commonjsHelpers.es.js";
-import { __require as requireRemoveAccents } from "../node_modules/remove-accents/index.es.js";
-var removeAccentsExports = requireRemoveAccents();
-const removeAccents = /* @__PURE__ */ getDefaultExportFromCjs(removeAccentsExports);
+var removeAccents = { exports: {} };
 export {
-  removeAccents as default
+  removeAccents as __module
 };
 //# sourceMappingURL=index.es5.js.map

package/dist/_virtual/index.es5.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es5.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
+{"version":3,"file":"index.es5.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/_virtual/index.es6.js

@@ -1,5 +1,8 @@
-var parseNumericRange = { exports: {} };
+import { getDefaultExportFromCjs } from "./_commonjsHelpers.es.js";
+import { __require as requireParseNumericRange } from "../node_modules/parse-numeric-range/index.es.js";
+var parseNumericRangeExports = requireParseNumericRange();
+const n = /* @__PURE__ */ getDefaultExportFromCjs(parseNumericRangeExports);
 export {
-  parseNumericRange as __module
+  n as default
 };
 //# sourceMappingURL=index.es6.js.map

package/dist/_virtual/index.es6.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es6.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"index.es6.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/_virtual/index.es7.js

@@ -1,5 +1,5 @@
-var removeAccents = { exports: {} };
+var parseNumericRange = { exports: {} };
 export {
-  removeAccents as __module
+  parseNumericRange as __module
 };
 //# sourceMappingURL=index.es7.js.map

package/dist/hooks.cjs.js

@@ -2,11 +2,13 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const useLocalStorage = require("./shared/src/hooks/useLocalStorage.cjs.js");
 const useLoadModule = require("./shared/src/hooks/useLoadModule.cjs.js");
+const useLoadModules = require("./shared/src/hooks/useLoadModules.cjs.js");
 const useScopedStatuses = require("./shared/src/hooks/useScopedStatuses.cjs.js");
 const useEntityUpdate = require("./shared/src/hooks/useEntityUpdate.cjs.js");
 const useActionTriggers = require("./shared/src/hooks/useActionTriggers.cjs.js");
 exports.useLocalStorage = useLocalStorage.useLocalStorage;
 exports.useLoadModule = useLoadModule.useLoadModule;
+exports.useLoadModules = useLoadModules.useLoadModules;
 exports.filterProjectStatuses = useScopedStatuses.filterProjectStatuses;
 exports.useScopedStatuses = useScopedStatuses.useScopedStatuses;
 exports.useEntityUpdate = useEntityUpdate.useEntityUpdate;

package/dist/hooks.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"hooks.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;"}
+{"version":3,"file":"hooks.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;"}

package/dist/hooks.es.js

@@ -1,5 +1,6 @@
 import { useLocalStorage } from "./shared/src/hooks/useLocalStorage.es.js";
 import { useLoadModule } from "./shared/src/hooks/useLoadModule.es.js";
+import { useLoadModules } from "./shared/src/hooks/useLoadModules.es.js";
 import { filterProjectStatuses, useScopedStatuses } from "./shared/src/hooks/useScopedStatuses.es.js";
 import { useEntityUpdate } from "./shared/src/hooks/useEntityUpdate.es.js";
 import { useActionTriggers } from "./shared/src/hooks/useActionTriggers.es.js";
@@ -8,6 +9,7 @@ export {
   useActionTriggers,
   useEntityUpdate,
   useLoadModule,
+  useLoadModules,
   useLocalStorage,
   useScopedStatuses
 };

package/dist/hooks.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"hooks.es.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}
+{"version":3,"file":"hooks.es.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist/node_modules/match-sorter/dist/match-sorter.esm.cjs.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const index = require("../../../_virtual/index.cjs5.js");
+const index = require("../../../_virtual/index.cjs4.js");
 /**
  * @name match-sorter
  * @license MIT license.

package/dist/node_modules/match-sorter/dist/match-sorter.esm.es.js

@@ -1,4 +1,4 @@
-import removeAccents from "../../../_virtual/index.es5.js";
+import removeAccents from "../../../_virtual/index.es4.js";
 /**
  * @name match-sorter
  * @license MIT license.

package/dist/node_modules/parse-numeric-range/index.cjs.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const index = require("../../_virtual/index.cjs6.js");
+const index = require("../../_virtual/index.cjs7.js");
 var hasRequiredParseNumericRange;
 function requireParseNumericRange() {
   if (hasRequiredParseNumericRange) return index.__module.exports;

package/dist/node_modules/parse-numeric-range/index.es.js

@@ -1,4 +1,4 @@
-import { __module as parseNumericRange } from "../../_virtual/index.es6.js";
+import { __module as parseNumericRange } from "../../_virtual/index.es7.js";
 var hasRequiredParseNumericRange;
 function requireParseNumericRange() {
   if (hasRequiredParseNumericRange) return parseNumericRange.exports;

package/dist/node_modules/rehype-prism-plus/dist/index.es.cjs.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const index$1 = require("../../hast-util-to-string/index.cjs.js");
-const index$2 = require("../../../_virtual/index.cjs4.js");
+const index$2 = require("../../../_virtual/index.cjs6.js");
 require("../../refractor/lib/common.cjs.js");
 require("../../refractor/lib/all.cjs.js");
 const index = require("../node_modules/unist-util-visit/lib/index.cjs.js");

package/dist/node_modules/rehype-prism-plus/dist/index.es.es.js

@@ -1,5 +1,5 @@
 import { toString } from "../../hast-util-to-string/index.es.js";
-import n from "../../../_virtual/index.es4.js";
+import n from "../../../_virtual/index.es6.js";
 import "../../refractor/lib/common.es.js";
 import "../../refractor/lib/all.es.js";
 import { visit } from "../node_modules/unist-util-visit/lib/index.es.js";

package/dist/node_modules/remove-accents/index.cjs.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const index = require("../../_virtual/index.cjs7.js");
+const index = require("../../_virtual/index.cjs5.js");
 var hasRequiredRemoveAccents;
 function requireRemoveAccents() {
   if (hasRequiredRemoveAccents) return index.__module.exports;

package/dist/node_modules/remove-accents/index.es.js

@@ -1,4 +1,4 @@
-import { __module as removeAccents } from "../../_virtual/index.es7.js";
+import { __module as removeAccents } from "../../_virtual/index.es5.js";
 var hasRequiredRemoveAccents;
 function requireRemoveAccents() {
   if (hasRequiredRemoveAccents) return removeAccents.exports;

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

@@ -27,6 +27,7 @@ const EntityPath = ({
   const [dropdownOpen, setDropdownOpen] = React.useState(null);
   const [maxSegments, setMaxSegments] = React.useState(null);
   const [calcMaxWidth, setCalcMaxWidth] = React.useState(false);
+  const finalSegmentRef = React.useRef(null);
   React.useLayoutEffect(() => {
     setMaxSegments(null);
     setCalcMaxWidth(true);
@@ -56,6 +57,15 @@ const EntityPath = ({
     setMaxSegments(newMaxSegments);
     setCalcMaxWidth(false);
   }, [containerRef.current, calcMaxWidth]);
+  React.useLayoutEffect(() => {
+    if (!containerRef.current || !finalSegmentRef.current || !maxSegments) return;
+    const container = containerRef.current;
+    const maxWidth = getPathMaxWidth(container) ?? Infinity;
+    const diff = container.clientWidth - maxWidth;
+    if (diff <= 0) return;
+    const newWidth = `${finalSegmentRef.current.clientWidth - diff}px`;
+    finalSegmentRef.current.style.width = newWidth;
+  }, [maxSegments]);
   const segmentsToShow = maxSegments && segments.length > maxSegments ? segments.slice(-maxSegments) : segments;
   const hiddenSegments = maxSegments && segments.length > maxSegments ? segments.slice(0, -maxSegments) : [];
   if (hideProjectName)
@@ -120,7 +130,7 @@ const EntityPath = ({
                 segment: versionSegment,
                 isOpen: dropdownOpen === "versions",
                 children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(EntityPath_styled.Segment, { children: [
-                  /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("span", { className: "label", children: versionSegment.label }),
+                  /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(EntityPath_styled.FinalSegmentLabel, { ref: finalSegmentRef, className: "label", children: versionSegment.label }),
                   /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(ayonReactComponents.Icon, { icon: "expand_more" })
                 ] })
               }

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

@@ -1 +1 @@
-{"version":3,"file":"EntityPath.cjs.js","sources":["../../../../../src/components/EntityPath/EntityPath.tsx"],"sourcesContent":["import { FC, Fragment, MouseEvent, useLayoutEffect, useRef, useState } from 'react'\nimport * as Styled from './EntityPath.styled'\nimport clsx from 'clsx'\nimport SegmentProvider from './SegmentProvider'\nimport { Icon } from '@ynput/ayon-react-components'\nimport { DetailsPanelEntityType } from '@shared/api'\n\nconst Slash = () => <span className=\"slash\">/</span>\n\nexport type PathSegment = {\n  type: DetailsPanelEntityType | 'product' | 'project'\n  label: string\n  id: string\n}\n\nconst dropdownStates = ['more', 'versions']\ntype DropdownState = (typeof dropdownStates)[number]\n\ntype DropdownMouseEvent = MouseEvent<HTMLSpanElement>\nconst getDropdownElements = (e: DropdownMouseEvent): [HTMLElement, string] => {\n  const target = e.target as HTMLElement\n  const dropdownId = target.closest('.dropdown')?.id || ''\n  return [target, dropdownId]\n}\n\nexport interface EntityPathProps {\n  projectName: string\n  hideProjectName: boolean\n  segments: PathSegment[]\n  isLoading: boolean\n  entityType: string\n  versions: PathSegment[]\n  scope: string\n}\n\nexport const EntityPath: FC<EntityPathProps> = ({\n  projectName,\n  hideProjectName,\n  segments,\n  versions = [],\n  isLoading,\n  entityType,\n  scope,\n}) => {\n  const containerRef = useRef<HTMLDivElement>(null)\n  const [dropdownOpen, setDropdownOpen] = useState<null | DropdownState>(null)\n  // defaults to whole path\n  const [maxSegments, setMaxSegments] = useState<null | number>(null)\n  const [calcMaxWidth, setCalcMaxWidth] = useState(false)\n\n  useLayoutEffect(() => {\n    setMaxSegments(null)\n    setCalcMaxWidth(true)\n  }, [segments])\n\n  useLayoutEffect(() => {\n    if (!containerRef.current) {\n      setCalcMaxWidth(false)\n      return\n    }\n    // find max width the path can be\n    const container = containerRef.current\n    const pathWidth = container.clientWidth\n    const maxWidth = getPathMaxWidth(container)\n\n    if (!maxWidth) return\n\n    // we need to reduce the number of segments shown\n    // but maybe even then it is still longer than the max width\n    // so we need to reduce the number of segments until the total width is less than the max width\n    const children = container.children\n    let totalWidth = pathWidth\n    // number of segments to keep\n    const fullCount = container.childElementCount\n    let segmentsCount = fullCount\n    // while loop that removes segments until the total width is less than the max width\n    while (totalWidth > maxWidth && segmentsCount > 0) {\n      // remove 2 segments at a time (because of slashes)\n      segmentsCount -= 2\n      totalWidth = totalUpSegmentsWidth(children, segmentsCount, fullCount)\n    }\n\n    // count number of \"full\" segments left\n    // if something goes wrong, removing 1 (2) is probably enough\n    let newMaxSegments =\n      Array.from(children)\n        .slice(0, segmentsCount)\n        .filter(\n          (segment) => segment.nodeType === Node.ELEMENT_NODE && segment.className.includes('full'),\n        )?.length || 2\n\n    // cap at 1\n    newMaxSegments = Math.max(newMaxSegments, 1)\n\n    setMaxSegments(newMaxSegments)\n    setCalcMaxWidth(false)\n  }, [containerRef.current, calcMaxWidth])\n\n  // Check if there are fewer than or equal to maxSegments segments\n  const segmentsToShow =\n    maxSegments && segments.length > maxSegments ? segments.slice(-maxSegments) : segments\n  const hiddenSegments =\n    maxSegments && segments.length > maxSegments ? segments.slice(0, -maxSegments) : []\n\n  // if there is no project name, add to hidden segments\n  if (hideProjectName)\n    hiddenSegments.unshift({ type: 'project', label: projectName, id: projectName })\n\n  // if the entityType is a version, separate the version\n  let versionSegment\n  let finalSegmentsToShow = segmentsToShow\n\n  if (entityType === 'version' && segments.length > 0) {\n    versionSegment = segments[segments.length - 1]\n    finalSegmentsToShow = segmentsToShow.slice(0, -1)\n  }\n\n  const handleMouseEnter = (e: DropdownMouseEvent) => {\n    const [, id] = getDropdownElements(e)\n    if (id && !dropdownOpen) setDropdownOpen(id)\n  }\n  const handleMouseLeave = () => setDropdownOpen(null)\n\n  const handleDropdownClick = (e: DropdownMouseEvent) => {\n    const [target, id] = getDropdownElements(e)\n\n    if (!dropdownStates.includes(id)) return\n    const isListItem = !!target.closest('li')\n\n    if (isListItem) setDropdownOpen(null)\n    else if (dropdownOpen !== id) setDropdownOpen(id)\n  }\n\n  const segmentProps = { scope, projectName }\n\n  return (\n    <Styled.Path className={clsx({ loading: isLoading })} id=\"entity-path\" ref={containerRef}>\n      {!hideProjectName && <Styled.Segment>{projectName}</Styled.Segment>}\n\n      {!!hiddenSegments.length && (\n        <>\n          {!hideProjectName && <Slash />}\n          <Styled.Segment\n            className=\"dropdown more\"\n            id=\"more\"\n            onMouseEnter={handleMouseEnter}\n            onMouseLeave={handleMouseLeave}\n            onClick={handleDropdownClick}\n          >\n            ...\n            {dropdownOpen === 'more' && (\n              <Styled.MoreModal>\n                <Styled.MoreList>\n                  {hiddenSegments.map((segment) => (\n                    <SegmentProvider {...segmentProps} segment={segment} key={segment.id}>\n                      <Styled.MoreItem>{segment.label}</Styled.MoreItem>\n                    </SegmentProvider>\n                  ))}\n                </Styled.MoreList>\n              </Styled.MoreModal>\n            )}\n          </Styled.Segment>\n        </>\n      )}\n\n      {finalSegmentsToShow.map((segment) => (\n        <Fragment key={segment.id}>\n          <Slash />\n\n          <SegmentProvider {...segmentProps} segment={segment} className=\"full\">\n            <Styled.Segment>\n              <span className=\"label\">{segment.label}</span>\n            </Styled.Segment>\n          </SegmentProvider>\n        </Fragment>\n      ))}\n\n      {versionSegment && (\n        <>\n          <Slash />\n          <Styled.SegmentWrapper\n            className=\"full dropdown\"\n            id=\"versions\"\n            onMouseEnter={handleMouseEnter}\n            onMouseLeave={handleMouseLeave}\n            onClick={handleDropdownClick}\n          >\n            <SegmentProvider\n              {...segmentProps}\n              segment={versionSegment}\n              isOpen={dropdownOpen === 'versions'}\n            >\n              <Styled.Segment>\n                <span className=\"label\">{versionSegment.label}</span>\n                <Icon icon=\"expand_more\" />\n              </Styled.Segment>\n            </SegmentProvider>\n            {dropdownOpen === 'versions' && (\n              <Styled.MoreModal>\n                <Styled.MoreList>\n                  {versions.map((version) => (\n                    <SegmentProvider {...segmentProps} segment={version} key={version.id}>\n                      <Styled.MoreItem>{version.label}</Styled.MoreItem>\n                    </SegmentProvider>\n                  ))}\n                </Styled.MoreList>\n              </Styled.MoreModal>\n            )}\n          </Styled.SegmentWrapper>\n        </>\n      )}\n    </Styled.Path>\n  )\n}\n\nconst getPathMaxWidth = (pathEl: HTMLDivElement) => {\n  const toolbar = pathEl.parentElement\n  if (!toolbar) return\n  // get width of toolbar without padding\n  const toolbarStyle = getComputedStyle(toolbar)\n  const paddingLeft = parseInt(toolbarStyle.paddingLeft) || 0\n  const paddingRight = parseInt(toolbarStyle.paddingRight) || 0\n  const gap = parseInt(toolbarStyle.gap) || 0\n  const toolbarWidth = toolbar.clientWidth - paddingLeft - paddingRight\n\n  // get child elements that are not path\n  const children = Array.from(toolbar.children).filter((child) => child.id !== 'entity-path')\n  // find total width of children including the gap between them\n  const childrenWidth = Array.from(children).reduce(\n    (acc, child) => acc + (child as HTMLElement).clientWidth,\n    0,\n  )\n\n  return toolbarWidth - childrenWidth - gap * (children.length - 1)\n}\n\nconst totalUpSegmentsWidth = (children: HTMLCollection, count: number, full: number) => {\n  const skip = full - count\n  let total = 0\n  for (let i = 0; i < full - skip; i++) {\n    const index = i > 1 ? i + skip : i\n    const width = (children[index] as Element)?.clientWidth\n    if (isNaN(width)) continue\n    total += width\n  }\n  const gap = 4\n  const moreWidth = 40\n  return total + (gap * count - 1) + moreWidth\n}\n"],"names":["jsx","useRef","useState","useLayoutEffect","jsxs","Styled.Path","Styled.Segment","Fragment","Styled.MoreModal","Styled.MoreList","createElement","Styled.MoreItem","Styled.SegmentWrapper","Icon"],"mappings":"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"}
+{"version":3,"file":"EntityPath.cjs.js","sources":["../../../../../src/components/EntityPath/EntityPath.tsx"],"sourcesContent":["import { FC, Fragment, MouseEvent, useLayoutEffect, useRef, useState } from 'react'\nimport * as Styled from './EntityPath.styled'\nimport clsx from 'clsx'\nimport SegmentProvider from './SegmentProvider'\nimport { Icon } from '@ynput/ayon-react-components'\nimport { DetailsPanelEntityType } from '@shared/api'\n\nconst Slash = () => <span className=\"slash\">/</span>\n\nexport type PathSegment = {\n  type: DetailsPanelEntityType | 'product' | 'project'\n  label: string\n  id: string\n}\n\nconst dropdownStates = ['more', 'versions']\ntype DropdownState = (typeof dropdownStates)[number]\n\ntype DropdownMouseEvent = MouseEvent<HTMLSpanElement>\nconst getDropdownElements = (e: DropdownMouseEvent): [HTMLElement, string] => {\n  const target = e.target as HTMLElement\n  const dropdownId = target.closest('.dropdown')?.id || ''\n  return [target, dropdownId]\n}\n\nexport interface EntityPathProps {\n  projectName: string\n  hideProjectName: boolean\n  segments: PathSegment[]\n  isLoading: boolean\n  entityType: string\n  versions: PathSegment[]\n  scope: string\n}\n\nexport const EntityPath: FC<EntityPathProps> = ({\n  projectName,\n  hideProjectName,\n  segments,\n  versions = [],\n  isLoading,\n  entityType,\n  scope,\n}) => {\n  const containerRef = useRef<HTMLDivElement>(null)\n  const [dropdownOpen, setDropdownOpen] = useState<null | DropdownState>(null)\n  // defaults to whole path\n  const [maxSegments, setMaxSegments] = useState<null | number>(null)\n  const [calcMaxWidth, setCalcMaxWidth] = useState(false)\n  const finalSegmentRef = useRef<HTMLSpanElement>(null)\n\n  useLayoutEffect(() => {\n    setMaxSegments(null)\n    setCalcMaxWidth(true)\n  }, [segments])\n\n  useLayoutEffect(() => {\n    if (!containerRef.current) {\n      setCalcMaxWidth(false)\n      return\n    }\n    // find max width the path can be\n    const container = containerRef.current\n    const pathWidth = container.clientWidth\n    const maxWidth = getPathMaxWidth(container)\n\n    if (!maxWidth) return\n\n    // we need to reduce the number of segments shown\n    // but maybe even then it is still longer than the max width\n    // so we need to reduce the number of segments until the total width is less than the max width\n    const children = container.children\n    let totalWidth = pathWidth\n    // number of segments to keep\n    const fullCount = container.childElementCount\n    let segmentsCount = fullCount\n    // while loop that removes segments until the total width is less than the max width\n    while (totalWidth > maxWidth && segmentsCount > 0) {\n      // remove 2 segments at a time (because of slashes)\n      segmentsCount -= 2\n      totalWidth = totalUpSegmentsWidth(children, segmentsCount, fullCount)\n    }\n\n    // count number of \"full\" segments left\n    // if something goes wrong, removing 1 (2) is probably enough\n    let newMaxSegments =\n      Array.from(children)\n        .slice(0, segmentsCount)\n        .filter(\n          (segment) => segment.nodeType === Node.ELEMENT_NODE && segment.className.includes('full'),\n        )?.length || 2\n\n    // cap at 1\n    newMaxSegments = Math.max(newMaxSegments, 1)\n\n    setMaxSegments(newMaxSegments)\n    setCalcMaxWidth(false)\n  }, [containerRef.current, calcMaxWidth])\n\n  // Ensure that, even if the collapsed segments still aren't\n  // enough to fit the path within the available space,\n  // we fit everything in by truncating the last segment's label.\n  // This segment is typically the product + version name,\n  // which is typically also shown in much larger font below,\n  // so there's no reason to always show it in full.\n  useLayoutEffect(() => {\n    if (!containerRef.current || !finalSegmentRef.current || !maxSegments) return\n    const container = containerRef.current\n\n    // The amount of truncation is exactly the difference between the container's width\n    // and the maximum available width.\n    const maxWidth = getPathMaxWidth(container) ?? Infinity\n    const diff = container.clientWidth - maxWidth\n    if (diff <= 0) return\n\n    // Reduce the segment's width by the difference\n    const newWidth = `${finalSegmentRef.current.clientWidth - diff}px`\n    finalSegmentRef.current.style.width = newWidth\n  }, [maxSegments])\n\n  // Check if there are fewer than or equal to maxSegments segments\n  const segmentsToShow =\n    maxSegments && segments.length > maxSegments ? segments.slice(-maxSegments) : segments\n  const hiddenSegments =\n    maxSegments && segments.length > maxSegments ? segments.slice(0, -maxSegments) : []\n\n  // if there is no project name, add to hidden segments\n  if (hideProjectName)\n    hiddenSegments.unshift({ type: 'project', label: projectName, id: projectName })\n\n  // if the entityType is a version, separate the version\n  let versionSegment\n  let finalSegmentsToShow = segmentsToShow\n\n  if (entityType === 'version' && segments.length > 0) {\n    versionSegment = segments[segments.length - 1]\n    finalSegmentsToShow = segmentsToShow.slice(0, -1)\n  }\n\n  const handleMouseEnter = (e: DropdownMouseEvent) => {\n    const [, id] = getDropdownElements(e)\n    if (id && !dropdownOpen) setDropdownOpen(id)\n  }\n  const handleMouseLeave = () => setDropdownOpen(null)\n\n  const handleDropdownClick = (e: DropdownMouseEvent) => {\n    const [target, id] = getDropdownElements(e)\n\n    if (!dropdownStates.includes(id)) return\n    const isListItem = !!target.closest('li')\n\n    if (isListItem) setDropdownOpen(null)\n    else if (dropdownOpen !== id) setDropdownOpen(id)\n  }\n\n  const segmentProps = { scope, projectName }\n\n  return (\n    <Styled.Path className={clsx({ loading: isLoading })} id=\"entity-path\" ref={containerRef}>\n      {!hideProjectName && <Styled.Segment>{projectName}</Styled.Segment>}\n\n      {!!hiddenSegments.length && (\n        <>\n          {!hideProjectName && <Slash />}\n          <Styled.Segment\n            className=\"dropdown more\"\n            id=\"more\"\n            onMouseEnter={handleMouseEnter}\n            onMouseLeave={handleMouseLeave}\n            onClick={handleDropdownClick}\n          >\n            ...\n            {dropdownOpen === 'more' && (\n              <Styled.MoreModal>\n                <Styled.MoreList>\n                  {hiddenSegments.map((segment) => (\n                    <SegmentProvider {...segmentProps} segment={segment} key={segment.id}>\n                      <Styled.MoreItem>{segment.label}</Styled.MoreItem>\n                    </SegmentProvider>\n                  ))}\n                </Styled.MoreList>\n              </Styled.MoreModal>\n            )}\n          </Styled.Segment>\n        </>\n      )}\n\n      {finalSegmentsToShow.map((segment) => (\n        <Fragment key={segment.id}>\n          <Slash />\n\n          <SegmentProvider {...segmentProps} segment={segment} className=\"full\">\n            <Styled.Segment>\n              <span className=\"label\">{segment.label}</span>\n            </Styled.Segment>\n          </SegmentProvider>\n        </Fragment>\n      ))}\n\n      {versionSegment && (\n        <>\n          <Slash />\n          <Styled.SegmentWrapper\n            className=\"full dropdown\"\n            id=\"versions\"\n            onMouseEnter={handleMouseEnter}\n            onMouseLeave={handleMouseLeave}\n            onClick={handleDropdownClick}\n          >\n            <SegmentProvider\n              {...segmentProps}\n              segment={versionSegment}\n              isOpen={dropdownOpen === 'versions'}\n            >\n              <Styled.Segment>\n                <Styled.FinalSegmentLabel ref={finalSegmentRef} className=\"label\">\n                  {versionSegment.label}\n                </Styled.FinalSegmentLabel>\n                <Icon icon=\"expand_more\" />\n              </Styled.Segment>\n            </SegmentProvider>\n            {dropdownOpen === 'versions' && (\n              <Styled.MoreModal>\n                <Styled.MoreList>\n                  {versions.map((version) => (\n                    <SegmentProvider {...segmentProps} segment={version} key={version.id}>\n                      <Styled.MoreItem>{version.label}</Styled.MoreItem>\n                    </SegmentProvider>\n                  ))}\n                </Styled.MoreList>\n              </Styled.MoreModal>\n            )}\n          </Styled.SegmentWrapper>\n        </>\n      )}\n    </Styled.Path>\n  )\n}\n\nconst getPathMaxWidth = (pathEl: HTMLDivElement) => {\n  const toolbar = pathEl.parentElement\n  if (!toolbar) return\n  // get width of toolbar without padding\n  const toolbarStyle = getComputedStyle(toolbar)\n  const paddingLeft = parseInt(toolbarStyle.paddingLeft) || 0\n  const paddingRight = parseInt(toolbarStyle.paddingRight) || 0\n  const gap = parseInt(toolbarStyle.gap) || 0\n  const toolbarWidth = toolbar.clientWidth - paddingLeft - paddingRight\n\n  // get child elements that are not path\n  const children = Array.from(toolbar.children).filter((child) => child.id !== 'entity-path')\n  // find total width of children including the gap between them\n  const childrenWidth = Array.from(children).reduce(\n    (acc, child) => acc + (child as HTMLElement).clientWidth,\n    0,\n  )\n\n  return toolbarWidth - childrenWidth - gap * (children.length - 1)\n}\n\nconst totalUpSegmentsWidth = (children: HTMLCollection, count: number, full: number) => {\n  const skip = full - count\n  let total = 0\n  for (let i = 0; i < full - skip; i++) {\n    const index = i > 1 ? i + skip : i\n    const width = (children[index] as Element)?.clientWidth\n    if (isNaN(width)) continue\n    total += width\n  }\n  const gap = 4\n  const moreWidth = 40\n  return total + (gap * count - 1) + moreWidth\n}\n"],"names":["jsx","useRef","useState","useLayoutEffect","jsxs","Styled.Path","Styled.Segment","Fragment","Styled.MoreModal","Styled.MoreList","createElement","Styled.MoreItem","Styled.SegmentWrapper","Styled.FinalSegmentLabel","Icon"],"mappings":"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"}

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

@@ -1,6 +1,6 @@
 import { j as jsxRuntimeExports } from "../../../../_virtual/jsx-runtime.es.js";
 import { useRef, useState, useLayoutEffect, createElement, Fragment } from "react";
-import { Path, Segment, MoreModal, MoreList, MoreItem, SegmentWrapper } from "./EntityPath.styled.es.js";
+import { Path, Segment, MoreModal, MoreList, MoreItem, SegmentWrapper, FinalSegmentLabel } from "./EntityPath.styled.es.js";
 import clsx from "clsx";
 import SegmentProvider from "./SegmentProvider.es.js";
 import { Icon } from "@ynput/ayon-react-components";
@@ -25,6 +25,7 @@ const EntityPath = ({
   const [dropdownOpen, setDropdownOpen] = useState(null);
   const [maxSegments, setMaxSegments] = useState(null);
   const [calcMaxWidth, setCalcMaxWidth] = useState(false);
+  const finalSegmentRef = useRef(null);
   useLayoutEffect(() => {
     setMaxSegments(null);
     setCalcMaxWidth(true);
@@ -54,6 +55,15 @@ const EntityPath = ({
     setMaxSegments(newMaxSegments);
     setCalcMaxWidth(false);
   }, [containerRef.current, calcMaxWidth]);
+  useLayoutEffect(() => {
+    if (!containerRef.current || !finalSegmentRef.current || !maxSegments) return;
+    const container = containerRef.current;
+    const maxWidth = getPathMaxWidth(container) ?? Infinity;
+    const diff = container.clientWidth - maxWidth;
+    if (diff <= 0) return;
+    const newWidth = `${finalSegmentRef.current.clientWidth - diff}px`;
+    finalSegmentRef.current.style.width = newWidth;
+  }, [maxSegments]);
   const segmentsToShow = maxSegments && segments.length > maxSegments ? segments.slice(-maxSegments) : segments;
   const hiddenSegments = maxSegments && segments.length > maxSegments ? segments.slice(0, -maxSegments) : [];
   if (hideProjectName)
@@ -118,7 +128,7 @@ const EntityPath = ({
                 segment: versionSegment,
                 isOpen: dropdownOpen === "versions",
                 children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Segment, { children: [
-                  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "label", children: versionSegment.label }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(FinalSegmentLabel, { ref: finalSegmentRef, className: "label", children: versionSegment.label }),
                   /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { icon: "expand_more" })
                 ] })
               }

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

@@ -1 +1 @@
-{"version":3,"file":"EntityPath.es.js","sources":["../../../../../src/components/EntityPath/EntityPath.tsx"],"sourcesContent":["import { FC, Fragment, MouseEvent, useLayoutEffect, useRef, useState } from 'react'\nimport * as Styled from './EntityPath.styled'\nimport clsx from 'clsx'\nimport SegmentProvider from './SegmentProvider'\nimport { Icon } from '@ynput/ayon-react-components'\nimport { DetailsPanelEntityType } from '@shared/api'\n\nconst Slash = () => <span className=\"slash\">/</span>\n\nexport type PathSegment = {\n  type: DetailsPanelEntityType | 'product' | 'project'\n  label: string\n  id: string\n}\n\nconst dropdownStates = ['more', 'versions']\ntype DropdownState = (typeof dropdownStates)[number]\n\ntype DropdownMouseEvent = MouseEvent<HTMLSpanElement>\nconst getDropdownElements = (e: DropdownMouseEvent): [HTMLElement, string] => {\n  const target = e.target as HTMLElement\n  const dropdownId = target.closest('.dropdown')?.id || ''\n  return [target, dropdownId]\n}\n\nexport interface EntityPathProps {\n  projectName: string\n  hideProjectName: boolean\n  segments: PathSegment[]\n  isLoading: boolean\n  entityType: string\n  versions: PathSegment[]\n  scope: string\n}\n\nexport const EntityPath: FC<EntityPathProps> = ({\n  projectName,\n  hideProjectName,\n  segments,\n  versions = [],\n  isLoading,\n  entityType,\n  scope,\n}) => {\n  const containerRef = useRef<HTMLDivElement>(null)\n  const [dropdownOpen, setDropdownOpen] = useState<null | DropdownState>(null)\n  // defaults to whole path\n  const [maxSegments, setMaxSegments] = useState<null | number>(null)\n  const [calcMaxWidth, setCalcMaxWidth] = useState(false)\n\n  useLayoutEffect(() => {\n    setMaxSegments(null)\n    setCalcMaxWidth(true)\n  }, [segments])\n\n  useLayoutEffect(() => {\n    if (!containerRef.current) {\n      setCalcMaxWidth(false)\n      return\n    }\n    // find max width the path can be\n    const container = containerRef.current\n    const pathWidth = container.clientWidth\n    const maxWidth = getPathMaxWidth(container)\n\n    if (!maxWidth) return\n\n    // we need to reduce the number of segments shown\n    // but maybe even then it is still longer than the max width\n    // so we need to reduce the number of segments until the total width is less than the max width\n    const children = container.children\n    let totalWidth = pathWidth\n    // number of segments to keep\n    const fullCount = container.childElementCount\n    let segmentsCount = fullCount\n    // while loop that removes segments until the total width is less than the max width\n    while (totalWidth > maxWidth && segmentsCount > 0) {\n      // remove 2 segments at a time (because of slashes)\n      segmentsCount -= 2\n      totalWidth = totalUpSegmentsWidth(children, segmentsCount, fullCount)\n    }\n\n    // count number of \"full\" segments left\n    // if something goes wrong, removing 1 (2) is probably enough\n    let newMaxSegments =\n      Array.from(children)\n        .slice(0, segmentsCount)\n        .filter(\n          (segment) => segment.nodeType === Node.ELEMENT_NODE && segment.className.includes('full'),\n        )?.length || 2\n\n    // cap at 1\n    newMaxSegments = Math.max(newMaxSegments, 1)\n\n    setMaxSegments(newMaxSegments)\n    setCalcMaxWidth(false)\n  }, [containerRef.current, calcMaxWidth])\n\n  // Check if there are fewer than or equal to maxSegments segments\n  const segmentsToShow =\n    maxSegments && segments.length > maxSegments ? segments.slice(-maxSegments) : segments\n  const hiddenSegments =\n    maxSegments && segments.length > maxSegments ? segments.slice(0, -maxSegments) : []\n\n  // if there is no project name, add to hidden segments\n  if (hideProjectName)\n    hiddenSegments.unshift({ type: 'project', label: projectName, id: projectName })\n\n  // if the entityType is a version, separate the version\n  let versionSegment\n  let finalSegmentsToShow = segmentsToShow\n\n  if (entityType === 'version' && segments.length > 0) {\n    versionSegment = segments[segments.length - 1]\n    finalSegmentsToShow = segmentsToShow.slice(0, -1)\n  }\n\n  const handleMouseEnter = (e: DropdownMouseEvent) => {\n    const [, id] = getDropdownElements(e)\n    if (id && !dropdownOpen) setDropdownOpen(id)\n  }\n  const handleMouseLeave = () => setDropdownOpen(null)\n\n  const handleDropdownClick = (e: DropdownMouseEvent) => {\n    const [target, id] = getDropdownElements(e)\n\n    if (!dropdownStates.includes(id)) return\n    const isListItem = !!target.closest('li')\n\n    if (isListItem) setDropdownOpen(null)\n    else if (dropdownOpen !== id) setDropdownOpen(id)\n  }\n\n  const segmentProps = { scope, projectName }\n\n  return (\n    <Styled.Path className={clsx({ loading: isLoading })} id=\"entity-path\" ref={containerRef}>\n      {!hideProjectName && <Styled.Segment>{projectName}</Styled.Segment>}\n\n      {!!hiddenSegments.length && (\n        <>\n          {!hideProjectName && <Slash />}\n          <Styled.Segment\n            className=\"dropdown more\"\n            id=\"more\"\n            onMouseEnter={handleMouseEnter}\n            onMouseLeave={handleMouseLeave}\n            onClick={handleDropdownClick}\n          >\n            ...\n            {dropdownOpen === 'more' && (\n              <Styled.MoreModal>\n                <Styled.MoreList>\n                  {hiddenSegments.map((segment) => (\n                    <SegmentProvider {...segmentProps} segment={segment} key={segment.id}>\n                      <Styled.MoreItem>{segment.label}</Styled.MoreItem>\n                    </SegmentProvider>\n                  ))}\n                </Styled.MoreList>\n              </Styled.MoreModal>\n            )}\n          </Styled.Segment>\n        </>\n      )}\n\n      {finalSegmentsToShow.map((segment) => (\n        <Fragment key={segment.id}>\n          <Slash />\n\n          <SegmentProvider {...segmentProps} segment={segment} className=\"full\">\n            <Styled.Segment>\n              <span className=\"label\">{segment.label}</span>\n            </Styled.Segment>\n          </SegmentProvider>\n        </Fragment>\n      ))}\n\n      {versionSegment && (\n        <>\n          <Slash />\n          <Styled.SegmentWrapper\n            className=\"full dropdown\"\n            id=\"versions\"\n            onMouseEnter={handleMouseEnter}\n            onMouseLeave={handleMouseLeave}\n            onClick={handleDropdownClick}\n          >\n            <SegmentProvider\n              {...segmentProps}\n              segment={versionSegment}\n              isOpen={dropdownOpen === 'versions'}\n            >\n              <Styled.Segment>\n                <span className=\"label\">{versionSegment.label}</span>\n                <Icon icon=\"expand_more\" />\n              </Styled.Segment>\n            </SegmentProvider>\n            {dropdownOpen === 'versions' && (\n              <Styled.MoreModal>\n                <Styled.MoreList>\n                  {versions.map((version) => (\n                    <SegmentProvider {...segmentProps} segment={version} key={version.id}>\n                      <Styled.MoreItem>{version.label}</Styled.MoreItem>\n                    </SegmentProvider>\n                  ))}\n                </Styled.MoreList>\n              </Styled.MoreModal>\n            )}\n          </Styled.SegmentWrapper>\n        </>\n      )}\n    </Styled.Path>\n  )\n}\n\nconst getPathMaxWidth = (pathEl: HTMLDivElement) => {\n  const toolbar = pathEl.parentElement\n  if (!toolbar) return\n  // get width of toolbar without padding\n  const toolbarStyle = getComputedStyle(toolbar)\n  const paddingLeft = parseInt(toolbarStyle.paddingLeft) || 0\n  const paddingRight = parseInt(toolbarStyle.paddingRight) || 0\n  const gap = parseInt(toolbarStyle.gap) || 0\n  const toolbarWidth = toolbar.clientWidth - paddingLeft - paddingRight\n\n  // get child elements that are not path\n  const children = Array.from(toolbar.children).filter((child) => child.id !== 'entity-path')\n  // find total width of children including the gap between them\n  const childrenWidth = Array.from(children).reduce(\n    (acc, child) => acc + (child as HTMLElement).clientWidth,\n    0,\n  )\n\n  return toolbarWidth - childrenWidth - gap * (children.length - 1)\n}\n\nconst totalUpSegmentsWidth = (children: HTMLCollection, count: number, full: number) => {\n  const skip = full - count\n  let total = 0\n  for (let i = 0; i < full - skip; i++) {\n    const index = i > 1 ? i + skip : i\n    const width = (children[index] as Element)?.clientWidth\n    if (isNaN(width)) continue\n    total += width\n  }\n  const gap = 4\n  const moreWidth = 40\n  return total + (gap * count - 1) + moreWidth\n}\n"],"names":["jsx","jsxs","Styled.Path","Styled.Segment","Fragment","Styled.MoreModal","Styled.MoreList","Styled.MoreItem","Styled.SegmentWrapper"],"mappings":"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"}
+{"version":3,"file":"EntityPath.es.js","sources":["../../../../../src/components/EntityPath/EntityPath.tsx"],"sourcesContent":["import { FC, Fragment, MouseEvent, useLayoutEffect, useRef, useState } from 'react'\nimport * as Styled from './EntityPath.styled'\nimport clsx from 'clsx'\nimport SegmentProvider from './SegmentProvider'\nimport { Icon } from '@ynput/ayon-react-components'\nimport { DetailsPanelEntityType } from '@shared/api'\n\nconst Slash = () => <span className=\"slash\">/</span>\n\nexport type PathSegment = {\n  type: DetailsPanelEntityType | 'product' | 'project'\n  label: string\n  id: string\n}\n\nconst dropdownStates = ['more', 'versions']\ntype DropdownState = (typeof dropdownStates)[number]\n\ntype DropdownMouseEvent = MouseEvent<HTMLSpanElement>\nconst getDropdownElements = (e: DropdownMouseEvent): [HTMLElement, string] => {\n  const target = e.target as HTMLElement\n  const dropdownId = target.closest('.dropdown')?.id || ''\n  return [target, dropdownId]\n}\n\nexport interface EntityPathProps {\n  projectName: string\n  hideProjectName: boolean\n  segments: PathSegment[]\n  isLoading: boolean\n  entityType: string\n  versions: PathSegment[]\n  scope: string\n}\n\nexport const EntityPath: FC<EntityPathProps> = ({\n  projectName,\n  hideProjectName,\n  segments,\n  versions = [],\n  isLoading,\n  entityType,\n  scope,\n}) => {\n  const containerRef = useRef<HTMLDivElement>(null)\n  const [dropdownOpen, setDropdownOpen] = useState<null | DropdownState>(null)\n  // defaults to whole path\n  const [maxSegments, setMaxSegments] = useState<null | number>(null)\n  const [calcMaxWidth, setCalcMaxWidth] = useState(false)\n  const finalSegmentRef = useRef<HTMLSpanElement>(null)\n\n  useLayoutEffect(() => {\n    setMaxSegments(null)\n    setCalcMaxWidth(true)\n  }, [segments])\n\n  useLayoutEffect(() => {\n    if (!containerRef.current) {\n      setCalcMaxWidth(false)\n      return\n    }\n    // find max width the path can be\n    const container = containerRef.current\n    const pathWidth = container.clientWidth\n    const maxWidth = getPathMaxWidth(container)\n\n    if (!maxWidth) return\n\n    // we need to reduce the number of segments shown\n    // but maybe even then it is still longer than the max width\n    // so we need to reduce the number of segments until the total width is less than the max width\n    const children = container.children\n    let totalWidth = pathWidth\n    // number of segments to keep\n    const fullCount = container.childElementCount\n    let segmentsCount = fullCount\n    // while loop that removes segments until the total width is less than the max width\n    while (totalWidth > maxWidth && segmentsCount > 0) {\n      // remove 2 segments at a time (because of slashes)\n      segmentsCount -= 2\n      totalWidth = totalUpSegmentsWidth(children, segmentsCount, fullCount)\n    }\n\n    // count number of \"full\" segments left\n    // if something goes wrong, removing 1 (2) is probably enough\n    let newMaxSegments =\n      Array.from(children)\n        .slice(0, segmentsCount)\n        .filter(\n          (segment) => segment.nodeType === Node.ELEMENT_NODE && segment.className.includes('full'),\n        )?.length || 2\n\n    // cap at 1\n    newMaxSegments = Math.max(newMaxSegments, 1)\n\n    setMaxSegments(newMaxSegments)\n    setCalcMaxWidth(false)\n  }, [containerRef.current, calcMaxWidth])\n\n  // Ensure that, even if the collapsed segments still aren't\n  // enough to fit the path within the available space,\n  // we fit everything in by truncating the last segment's label.\n  // This segment is typically the product + version name,\n  // which is typically also shown in much larger font below,\n  // so there's no reason to always show it in full.\n  useLayoutEffect(() => {\n    if (!containerRef.current || !finalSegmentRef.current || !maxSegments) return\n    const container = containerRef.current\n\n    // The amount of truncation is exactly the difference between the container's width\n    // and the maximum available width.\n    const maxWidth = getPathMaxWidth(container) ?? Infinity\n    const diff = container.clientWidth - maxWidth\n    if (diff <= 0) return\n\n    // Reduce the segment's width by the difference\n    const newWidth = `${finalSegmentRef.current.clientWidth - diff}px`\n    finalSegmentRef.current.style.width = newWidth\n  }, [maxSegments])\n\n  // Check if there are fewer than or equal to maxSegments segments\n  const segmentsToShow =\n    maxSegments && segments.length > maxSegments ? segments.slice(-maxSegments) : segments\n  const hiddenSegments =\n    maxSegments && segments.length > maxSegments ? segments.slice(0, -maxSegments) : []\n\n  // if there is no project name, add to hidden segments\n  if (hideProjectName)\n    hiddenSegments.unshift({ type: 'project', label: projectName, id: projectName })\n\n  // if the entityType is a version, separate the version\n  let versionSegment\n  let finalSegmentsToShow = segmentsToShow\n\n  if (entityType === 'version' && segments.length > 0) {\n    versionSegment = segments[segments.length - 1]\n    finalSegmentsToShow = segmentsToShow.slice(0, -1)\n  }\n\n  const handleMouseEnter = (e: DropdownMouseEvent) => {\n    const [, id] = getDropdownElements(e)\n    if (id && !dropdownOpen) setDropdownOpen(id)\n  }\n  const handleMouseLeave = () => setDropdownOpen(null)\n\n  const handleDropdownClick = (e: DropdownMouseEvent) => {\n    const [target, id] = getDropdownElements(e)\n\n    if (!dropdownStates.includes(id)) return\n    const isListItem = !!target.closest('li')\n\n    if (isListItem) setDropdownOpen(null)\n    else if (dropdownOpen !== id) setDropdownOpen(id)\n  }\n\n  const segmentProps = { scope, projectName }\n\n  return (\n    <Styled.Path className={clsx({ loading: isLoading })} id=\"entity-path\" ref={containerRef}>\n      {!hideProjectName && <Styled.Segment>{projectName}</Styled.Segment>}\n\n      {!!hiddenSegments.length && (\n        <>\n          {!hideProjectName && <Slash />}\n          <Styled.Segment\n            className=\"dropdown more\"\n            id=\"more\"\n            onMouseEnter={handleMouseEnter}\n            onMouseLeave={handleMouseLeave}\n            onClick={handleDropdownClick}\n          >\n            ...\n            {dropdownOpen === 'more' && (\n              <Styled.MoreModal>\n                <Styled.MoreList>\n                  {hiddenSegments.map((segment) => (\n                    <SegmentProvider {...segmentProps} segment={segment} key={segment.id}>\n                      <Styled.MoreItem>{segment.label}</Styled.MoreItem>\n                    </SegmentProvider>\n                  ))}\n                </Styled.MoreList>\n              </Styled.MoreModal>\n            )}\n          </Styled.Segment>\n        </>\n      )}\n\n      {finalSegmentsToShow.map((segment) => (\n        <Fragment key={segment.id}>\n          <Slash />\n\n          <SegmentProvider {...segmentProps} segment={segment} className=\"full\">\n            <Styled.Segment>\n              <span className=\"label\">{segment.label}</span>\n            </Styled.Segment>\n          </SegmentProvider>\n        </Fragment>\n      ))}\n\n      {versionSegment && (\n        <>\n          <Slash />\n          <Styled.SegmentWrapper\n            className=\"full dropdown\"\n            id=\"versions\"\n            onMouseEnter={handleMouseEnter}\n            onMouseLeave={handleMouseLeave}\n            onClick={handleDropdownClick}\n          >\n            <SegmentProvider\n              {...segmentProps}\n              segment={versionSegment}\n              isOpen={dropdownOpen === 'versions'}\n            >\n              <Styled.Segment>\n                <Styled.FinalSegmentLabel ref={finalSegmentRef} className=\"label\">\n                  {versionSegment.label}\n                </Styled.FinalSegmentLabel>\n                <Icon icon=\"expand_more\" />\n              </Styled.Segment>\n            </SegmentProvider>\n            {dropdownOpen === 'versions' && (\n              <Styled.MoreModal>\n                <Styled.MoreList>\n                  {versions.map((version) => (\n                    <SegmentProvider {...segmentProps} segment={version} key={version.id}>\n                      <Styled.MoreItem>{version.label}</Styled.MoreItem>\n                    </SegmentProvider>\n                  ))}\n                </Styled.MoreList>\n              </Styled.MoreModal>\n            )}\n          </Styled.SegmentWrapper>\n        </>\n      )}\n    </Styled.Path>\n  )\n}\n\nconst getPathMaxWidth = (pathEl: HTMLDivElement) => {\n  const toolbar = pathEl.parentElement\n  if (!toolbar) return\n  // get width of toolbar without padding\n  const toolbarStyle = getComputedStyle(toolbar)\n  const paddingLeft = parseInt(toolbarStyle.paddingLeft) || 0\n  const paddingRight = parseInt(toolbarStyle.paddingRight) || 0\n  const gap = parseInt(toolbarStyle.gap) || 0\n  const toolbarWidth = toolbar.clientWidth - paddingLeft - paddingRight\n\n  // get child elements that are not path\n  const children = Array.from(toolbar.children).filter((child) => child.id !== 'entity-path')\n  // find total width of children including the gap between them\n  const childrenWidth = Array.from(children).reduce(\n    (acc, child) => acc + (child as HTMLElement).clientWidth,\n    0,\n  )\n\n  return toolbarWidth - childrenWidth - gap * (children.length - 1)\n}\n\nconst totalUpSegmentsWidth = (children: HTMLCollection, count: number, full: number) => {\n  const skip = full - count\n  let total = 0\n  for (let i = 0; i < full - skip; i++) {\n    const index = i > 1 ? i + skip : i\n    const width = (children[index] as Element)?.clientWidth\n    if (isNaN(width)) continue\n    total += width\n  }\n  const gap = 4\n  const moreWidth = 40\n  return total + (gap * count - 1) + moreWidth\n}\n"],"names":["jsx","jsxs","Styled.Path","Styled.Segment","Fragment","Styled.MoreModal","Styled.MoreList","Styled.MoreItem","Styled.SegmentWrapper","Styled.FinalSegmentLabel"],"mappings":"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"}

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

@@ -24,7 +24,9 @@ const Segment = styled.span`
   position: relative;
   padding: 0px 2px;
   border-radius: var(--border-radius-m);
-  transition: color 0.2s, background-color 0.2s;
+  transition:
+    color 0.2s,
+    background-color 0.2s;
   min-width: max-content;
 
   display: flex;
@@ -41,6 +43,12 @@ const Segment = styled.span`
     }
   }
 `;
+const FinalSegmentLabel = styled.span`
+  text-overflow: ellipsis;
+  overflow: hidden;
+  display: inline-block;
+  white-space: nowrap;
+`;
 const NotClickableHover = styled.css`
   background-color: var(--md-sys-color-surface-container);
   &,
@@ -106,6 +114,7 @@ const MoreItem = styled.li`
   width: 100%;
 `;
 exports.ActiveSegment = ActiveSegment;
+exports.FinalSegmentLabel = FinalSegmentLabel;
 exports.MoreItem = MoreItem;
 exports.MoreList = MoreList;
 exports.MoreModal = MoreModal;

package/dist/shared/src/components/EntityPath/EntityPath.styled.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"EntityPath.styled.cjs.js","sources":["../../../../../src/components/EntityPath/EntityPath.styled.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\n\nexport const Path = styled.div`\n  position: relative;\n  border-radius: var(--border-radius-m);\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--base-gap-small);\n  user-select: none;\n  height: 100%;\n  &,\n  .icon {\n    color: var(--md-sys-color-outline);\n  }\n\n  flex: 1;\n`\n\nexport const SegmentWrapper = styled.div`\n  position: relative;\n`\n\nexport const Segment = styled.span`\n  position: relative;\n  padding: 0px 2px;\n  border-radius: var(--border-radius-m);\n  transition: color 0.2s, background-color 0.2s;\n  min-width: max-content;\n\n  display: flex;\n  align-items: center;\n\n  /* ... styles */\n  &.more {\n    cursor: pointer;\n\n    padding: 0px 6px;\n    &:hover {\n      background-color: var(--md-sys-color-surface-container);\n      color: var(--md-sys-color-on-surface);\n    }\n  }\n`\n\nconst NotClickableHover = css`\n  background-color: var(--md-sys-color-surface-container);\n  &,\n  .icon {\n    color: var(--md-sys-color-on-surface);\n  }\n`\n\nexport const ActiveSegment = styled.div`\n  & > span,\n  & > li {\n    cursor: pointer;\n    &:hover {\n      ${NotClickableHover}\n    }\n  }\n\n  &.open {\n    & > span {\n      ${NotClickableHover}\n    }\n  }\n\n  &.link {\n    & > span,\n    & > li {\n      &:hover {\n        background-color: var(--md-sys-color-surface-container-highest-hover);\n      }\n    }\n  }\n`\n\nexport const MoreModal = styled.div`\n  position: absolute;\n  top: 100%;\n  left: 0px;\n  width: 100%;\n  min-width: fit-content;\n\n  z-index: 200;\n  padding-top: 4px;\n`\n\nexport const MoreList = styled.ul`\n  display: flex;\n  flex-direction: column;\n  gap: var(--base-gap-small);\n\n  background-color: var(--md-sys-color-surface-container-high);\n  border-radius: var(--border-radius-m);\n  box-shadow: var(--md-sys-shadow-elevation-4);\n  padding: var(--padding-s);\n\n  margin: 0;\n  list-style: none;\n\n  max-height: 500px;\n  overflow: auto;\n`\n\nexport const MoreItem = styled.li`\n  padding: var(--base-gap-small);\n  border-radius: var(--border-radius-m);\n  color: var(--md-sys-color-on-surface);\n  min-width: max-content;\n  width: 100%;\n`\n"],"names":["css"],"mappings":";;;AAEO,MAAM,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiBpB,MAAM,iBAAiB,OAAO;AAAA;AAAA;AAI9B,MAAM,UAAU,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAsB9B,MAAM,oBAAoBA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQnB,MAAM,gBAAgB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,QAK5B,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAMjB,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAclB,MAAM,YAAY,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWzB,MAAM,WAAW,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiBxB,MAAM,WAAW,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;;;"}
+{"version":3,"file":"EntityPath.styled.cjs.js","sources":["../../../../../src/components/EntityPath/EntityPath.styled.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\n\nexport const Path = styled.div`\n  position: relative;\n  border-radius: var(--border-radius-m);\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--base-gap-small);\n  user-select: none;\n  height: 100%;\n  &,\n  .icon {\n    color: var(--md-sys-color-outline);\n  }\n\n  flex: 1;\n`\n\nexport const SegmentWrapper = styled.div`\n  position: relative;\n`\n\nexport const Segment = styled.span`\n  position: relative;\n  padding: 0px 2px;\n  border-radius: var(--border-radius-m);\n  transition:\n    color 0.2s,\n    background-color 0.2s;\n  min-width: max-content;\n\n  display: flex;\n  align-items: center;\n\n  /* ... styles */\n  &.more {\n    cursor: pointer;\n\n    padding: 0px 6px;\n    &:hover {\n      background-color: var(--md-sys-color-surface-container);\n      color: var(--md-sys-color-on-surface);\n    }\n  }\n`\n\nexport const FinalSegmentLabel = styled.span`\n  text-overflow: ellipsis;\n  overflow: hidden;\n  display: inline-block;\n  white-space: nowrap;\n`\n\nconst NotClickableHover = css`\n  background-color: var(--md-sys-color-surface-container);\n  &,\n  .icon {\n    color: var(--md-sys-color-on-surface);\n  }\n`\n\nexport const ActiveSegment = styled.div`\n  & > span,\n  & > li {\n    cursor: pointer;\n    &:hover {\n      ${NotClickableHover}\n    }\n  }\n\n  &.open {\n    & > span {\n      ${NotClickableHover}\n    }\n  }\n\n  &.link {\n    & > span,\n    & > li {\n      &:hover {\n        background-color: var(--md-sys-color-surface-container-highest-hover);\n      }\n    }\n  }\n`\n\nexport const MoreModal = styled.div`\n  position: absolute;\n  top: 100%;\n  left: 0px;\n  width: 100%;\n  min-width: fit-content;\n\n  z-index: 200;\n  padding-top: 4px;\n`\n\nexport const MoreList = styled.ul`\n  display: flex;\n  flex-direction: column;\n  gap: var(--base-gap-small);\n\n  background-color: var(--md-sys-color-surface-container-high);\n  border-radius: var(--border-radius-m);\n  box-shadow: var(--md-sys-shadow-elevation-4);\n  padding: var(--padding-s);\n\n  margin: 0;\n  list-style: none;\n\n  max-height: 500px;\n  overflow: auto;\n`\n\nexport const MoreItem = styled.li`\n  padding: var(--base-gap-small);\n  border-radius: var(--border-radius-m);\n  color: var(--md-sys-color-on-surface);\n  min-width: max-content;\n  width: 100%;\n`\n"],"names":["css"],"mappings":";;;AAEO,MAAM,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiBpB,MAAM,iBAAiB,OAAO;AAAA;AAAA;AAI9B,MAAM,UAAU,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAwBvB,MAAM,oBAAoB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOxC,MAAM,oBAAoBA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQnB,MAAM,gBAAgB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,QAK5B,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAMjB,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAclB,MAAM,YAAY,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWzB,MAAM,WAAW,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiBxB,MAAM,WAAW,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;;;;"}

package/dist/shared/src/components/EntityPath/EntityPath.styled.es.js

@@ -22,7 +22,9 @@ const Segment = styled.span`
   position: relative;
   padding: 0px 2px;
   border-radius: var(--border-radius-m);
-  transition: color 0.2s, background-color 0.2s;
+  transition:
+    color 0.2s,
+    background-color 0.2s;
   min-width: max-content;
 
   display: flex;
@@ -39,6 +41,12 @@ const Segment = styled.span`
     }
   }
 `;
+const FinalSegmentLabel = styled.span`
+  text-overflow: ellipsis;
+  overflow: hidden;
+  display: inline-block;
+  white-space: nowrap;
+`;
 const NotClickableHover = css`
   background-color: var(--md-sys-color-surface-container);
   &,
@@ -105,6 +113,7 @@ const MoreItem = styled.li`
 `;
 export {
   ActiveSegment,
+  FinalSegmentLabel,
   MoreItem,
   MoreList,
   MoreModal,

package/dist/shared/src/components/EntityPath/EntityPath.styled.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"EntityPath.styled.es.js","sources":["../../../../../src/components/EntityPath/EntityPath.styled.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\n\nexport const Path = styled.div`\n  position: relative;\n  border-radius: var(--border-radius-m);\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--base-gap-small);\n  user-select: none;\n  height: 100%;\n  &,\n  .icon {\n    color: var(--md-sys-color-outline);\n  }\n\n  flex: 1;\n`\n\nexport const SegmentWrapper = styled.div`\n  position: relative;\n`\n\nexport const Segment = styled.span`\n  position: relative;\n  padding: 0px 2px;\n  border-radius: var(--border-radius-m);\n  transition: color 0.2s, background-color 0.2s;\n  min-width: max-content;\n\n  display: flex;\n  align-items: center;\n\n  /* ... styles */\n  &.more {\n    cursor: pointer;\n\n    padding: 0px 6px;\n    &:hover {\n      background-color: var(--md-sys-color-surface-container);\n      color: var(--md-sys-color-on-surface);\n    }\n  }\n`\n\nconst NotClickableHover = css`\n  background-color: var(--md-sys-color-surface-container);\n  &,\n  .icon {\n    color: var(--md-sys-color-on-surface);\n  }\n`\n\nexport const ActiveSegment = styled.div`\n  & > span,\n  & > li {\n    cursor: pointer;\n    &:hover {\n      ${NotClickableHover}\n    }\n  }\n\n  &.open {\n    & > span {\n      ${NotClickableHover}\n    }\n  }\n\n  &.link {\n    & > span,\n    & > li {\n      &:hover {\n        background-color: var(--md-sys-color-surface-container-highest-hover);\n      }\n    }\n  }\n`\n\nexport const MoreModal = styled.div`\n  position: absolute;\n  top: 100%;\n  left: 0px;\n  width: 100%;\n  min-width: fit-content;\n\n  z-index: 200;\n  padding-top: 4px;\n`\n\nexport const MoreList = styled.ul`\n  display: flex;\n  flex-direction: column;\n  gap: var(--base-gap-small);\n\n  background-color: var(--md-sys-color-surface-container-high);\n  border-radius: var(--border-radius-m);\n  box-shadow: var(--md-sys-shadow-elevation-4);\n  padding: var(--padding-s);\n\n  margin: 0;\n  list-style: none;\n\n  max-height: 500px;\n  overflow: auto;\n`\n\nexport const MoreItem = styled.li`\n  padding: var(--base-gap-small);\n  border-radius: var(--border-radius-m);\n  color: var(--md-sys-color-on-surface);\n  min-width: max-content;\n  width: 100%;\n`\n"],"names":[],"mappings":";AAEO,MAAM,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiBpB,MAAM,iBAAiB,OAAO;AAAA;AAAA;AAI9B,MAAM,UAAU,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAsB9B,MAAM,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQnB,MAAM,gBAAgB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,QAK5B,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAMjB,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAclB,MAAM,YAAY,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWzB,MAAM,WAAW,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiBxB,MAAM,WAAW,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}
+{"version":3,"file":"EntityPath.styled.es.js","sources":["../../../../../src/components/EntityPath/EntityPath.styled.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\n\nexport const Path = styled.div`\n  position: relative;\n  border-radius: var(--border-radius-m);\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--base-gap-small);\n  user-select: none;\n  height: 100%;\n  &,\n  .icon {\n    color: var(--md-sys-color-outline);\n  }\n\n  flex: 1;\n`\n\nexport const SegmentWrapper = styled.div`\n  position: relative;\n`\n\nexport const Segment = styled.span`\n  position: relative;\n  padding: 0px 2px;\n  border-radius: var(--border-radius-m);\n  transition:\n    color 0.2s,\n    background-color 0.2s;\n  min-width: max-content;\n\n  display: flex;\n  align-items: center;\n\n  /* ... styles */\n  &.more {\n    cursor: pointer;\n\n    padding: 0px 6px;\n    &:hover {\n      background-color: var(--md-sys-color-surface-container);\n      color: var(--md-sys-color-on-surface);\n    }\n  }\n`\n\nexport const FinalSegmentLabel = styled.span`\n  text-overflow: ellipsis;\n  overflow: hidden;\n  display: inline-block;\n  white-space: nowrap;\n`\n\nconst NotClickableHover = css`\n  background-color: var(--md-sys-color-surface-container);\n  &,\n  .icon {\n    color: var(--md-sys-color-on-surface);\n  }\n`\n\nexport const ActiveSegment = styled.div`\n  & > span,\n  & > li {\n    cursor: pointer;\n    &:hover {\n      ${NotClickableHover}\n    }\n  }\n\n  &.open {\n    & > span {\n      ${NotClickableHover}\n    }\n  }\n\n  &.link {\n    & > span,\n    & > li {\n      &:hover {\n        background-color: var(--md-sys-color-surface-container-highest-hover);\n      }\n    }\n  }\n`\n\nexport const MoreModal = styled.div`\n  position: absolute;\n  top: 100%;\n  left: 0px;\n  width: 100%;\n  min-width: fit-content;\n\n  z-index: 200;\n  padding-top: 4px;\n`\n\nexport const MoreList = styled.ul`\n  display: flex;\n  flex-direction: column;\n  gap: var(--base-gap-small);\n\n  background-color: var(--md-sys-color-surface-container-high);\n  border-radius: var(--border-radius-m);\n  box-shadow: var(--md-sys-shadow-elevation-4);\n  padding: var(--padding-s);\n\n  margin: 0;\n  list-style: none;\n\n  max-height: 500px;\n  overflow: auto;\n`\n\nexport const MoreItem = styled.li`\n  padding: var(--base-gap-small);\n  border-radius: var(--border-radius-m);\n  color: var(--md-sys-color-on-surface);\n  min-width: max-content;\n  width: 100%;\n`\n"],"names":[],"mappings":";AAEO,MAAM,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiBpB,MAAM,iBAAiB,OAAO;AAAA;AAAA;AAI9B,MAAM,UAAU,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAwBvB,MAAM,oBAAoB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOxC,MAAM,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQnB,MAAM,gBAAgB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,QAK5B,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAMjB,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAclB,MAAM,YAAY,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWzB,MAAM,WAAW,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiBxB,MAAM,WAAW,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}

package/dist/shared/src/containers/Actions/Actions.cjs.js

@@ -71,6 +71,11 @@ require("../../context/RemoteModulesContext.cjs.js");
 require("../../../../_virtual/runtime.cjs.js");
 require("../../../../_virtual/semver.cjs.js");
 require("../../../../_virtual/lodash.cjs.js");
+require("../../context/DetailsPanelContext.cjs.js");
+require("../../context/ThumbnailUploaderContext.cjs.js");
+require("../../context/pip/PiPProvider.cjs.js");
+require("react-dom");
+require("../../context/pip/PiPWrapper.cjs.js");
 const useActionTriggers = require("../../hooks/useActionTriggers.cjs.js");
 const ActionConfigDialog = require("./ActionConfigDialog.cjs.js");
 const InteractiveActionDialog = require("./InteractiveActionDialog.cjs.js");